/* os-shell v1: fake desktop OS. Skins = variable sets on [data-os-skin]. Window chrome reads ONLY variables,
   so a nested [data-os-skin] (e.g. the Display Properties previews) renders its own skin correctly.
   Fonts are not loaded here: the page loads them (see RECIPE.md). */

/* ------------------------------------------------------------------ skins */
[data-os-skin="xp"] {
  --os-font-ui: "PT Sans", Tahoma, Verdana, sans-serif;
  --os-font-title: "PT Sans", "Trebuchet MS", sans-serif;
  --os-fs: 13px;
  --os-ink: #000; --os-ink-dim: #4b4b4b;
  --os-desk-bg: #3a6ea5;
  --os-face: #ece9d8; --os-well: #fff;
  --os-field-border: 1px solid #7f9db9; --os-field-shadow: none; --os-field-radius: 0;
  --os-win-bg: #0a48d8; --os-win-bg-inactive: #7d97d8;
  --os-win-pad: 0 3px 3px; --os-win-radius: 8px 8px 0 0; --os-win-border: 0;
  --os-win-shadow: inset 1px 0 #3d80f5, inset -1px 0 #002a9e, inset 0 -1px #00168c, 0 12px 34px rgba(4, 22, 82, .38), 0 2px 6px rgba(0, 0, 0, .25);
  --os-title-h: 30px; --os-title-mx: -3px; --os-title-pad: 0 5px 0 7px; --os-title-radius: 8px 8px 0 0;
  --os-title-bg: linear-gradient(180deg, #0997ff 0%, #0053ee 8%, #0050ee 40%, #06f 88%, #06f 93%, #005bff 95%, #003dd7 96%, #003dd7);
  --os-title-bg-inactive: linear-gradient(180deg, #7697e7, #7e9ee3 3%, #94afe8 6%, #97b4e9 8%, #82a5e4 14%, #7c9fe2 17%, #7996de 25%, #7b99e1 56%, #82a9e9 81%, #80a5e7 89%, #7b96e1 94%, #7a93df 97%, #abbae3);
  --os-title-ink: #fff; --os-title-ink-inactive: #dfe8fb;
  --os-title-fs: 14px; --os-title-weight: 700; --os-title-shadow: 1px 1px 0 #0f1089;
  --os-title-text-bg: transparent; --os-title-text-pad: 0; --os-title-margin: 0; --os-title-flex: 1 1 auto; --os-title-icon-display: block;
  --os-ctl-w: 21px; --os-ctl-h: 21px; --os-ctl-radius: 3px; --os-ctl-border: 1px solid #fff; --os-ctl-ink: #fff; --os-ctl-gap: 2px;
  --os-ctl-bg: radial-gradient(circle at 90% 90%, #0054e9 0%, #2263d5 55%, #4479e4 70%, #a3bbec 90%, #fff 100%);
  --os-ctl-bg-close: radial-gradient(circle at 90% 90%, #cc4600 0%, #dc6527 55%, #cd7546 70%, #ffccb2 90%, #fff 100%);
  --os-ctl-shadow: none; --os-ctl-inactive: saturate(.55) brightness(1.15) opacity(.85); --os-glyph-display: block; --os-glyph-size: 10px; --os-close-order: 0;
  --os-body-pad: 10px; --os-body-border: 0; --os-body-mt: 0;
  --os-select-bg: #316ac5; --os-select-ink: #fff;
  --os-btn-bg: linear-gradient(180deg, #fff, #ecebe6 86%, #d6d0c5); --os-btn-bg-active: linear-gradient(180deg, #cdcac3, #e3e3db 8%, #e5e5de 94%, #f2f2f1);
  --os-btn-border: 1px solid #003c74; --os-btn-radius: 3px; --os-btn-shadow: none;
  --os-btn-shadow-hover: inset -1px 1px #fff0cf, inset 1px 2px #fdd889, inset -2px 2px #fbc761, inset 2px -2px #e5a01a;
  --os-btn-shadow-active: none;
  --os-btn-shadow-primary: inset -1px 1px #cee7ff, inset 1px 2px #98b8ea, inset -2px 2px #bcd4f6, inset 1px -1px #89ade4, inset 2px -2px #89ade4;
  --os-group-border: 1px solid #d0d0bf; --os-group-radius: 4px; --os-group-legend: #0046d5;
  --os-progress-radius: 3px;
  --os-progress-fill: repeating-linear-gradient(90deg, transparent 0 8px, #fff 8px 10px), linear-gradient(180deg, #acedad 0%, #7be47d 14%, #4cda50 28%, #2ed330 42%, #42d845 57%, #76e275 71%, #8fe791 85%, #fff 100%);
  --os-menu-bg: #fff; --os-menu-border: 1px solid #aca899; --os-menu-shadow: 2px 2px 4px rgba(0, 0, 0, .35); --os-flyout-radius: 6px;
  --os-status-seg: inset 1px 0 #fff, inset -1px 0 #c5c2b2;
  --os-grip-dot: #b5b2a3;
  --os-icon-ink: #fff; --os-icon-label-bg: transparent; --os-icon-label-shadow: 1px 1px 2px #000, 0 0 1px #000;
  --os-icon-sel-filter: brightness(.72) sepia(1) hue-rotate(180deg) saturate(3.4);
  --os-lasso-border: 1px solid #316ac5; --os-lasso-bg: rgba(49, 106, 197, .28);
  --os-taskbar-h: 38px;
  --os-sd-band: linear-gradient(180deg, #3d63c9, #6f8fe2 46%, #5a7cd8 54%, #3b61c6); --os-sd-ink: #fff;
  --os-min-mode: hide;
}
[data-os-skin="win98"] {
  --os-bevel-out: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  --os-bevel-in: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
  --os-bevel-field: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  --os-font-ui: "Pixelify Sans", "MS Sans Serif", Tahoma, sans-serif;
  --os-font-title: "Pixelify Sans", "MS Sans Serif", Tahoma, sans-serif;
  --os-fs: 13px;
  --os-ink: #000; --os-ink-dim: #3a3a3a;
  --os-desk-bg: #008080;
  --os-face: #c0c0c0; --os-well: #fff;
  --os-field-border: 0; --os-field-shadow: var(--os-bevel-field); --os-field-radius: 0;
  --os-win-bg: #c0c0c0; --os-win-bg-inactive: #c0c0c0;
  --os-win-pad: 3px; --os-win-radius: 0; --os-win-border: 0;
  --os-win-shadow: var(--os-bevel-out), 3px 3px 0 rgba(0, 0, 0, .18);
  --os-title-h: 22px; --os-title-mx: 0; --os-title-pad: 0 2px 0 4px; --os-title-radius: 0;
  --os-title-bg: linear-gradient(90deg, #000080, #1084d0); --os-title-bg-inactive: linear-gradient(90deg, #808080, #b5b5b5);
  --os-title-ink: #fff; --os-title-ink-inactive: #d6d6d6;
  --os-title-fs: 13px; --os-title-weight: 600; --os-title-shadow: none;
  --os-title-text-bg: transparent; --os-title-text-pad: 0; --os-title-margin: 0; --os-title-flex: 1 1 auto; --os-title-icon-display: block;
  --os-ctl-w: 18px; --os-ctl-h: 16px; --os-ctl-radius: 0; --os-ctl-border: 0; --os-ctl-ink: #000; --os-ctl-gap: 0;
  --os-ctl-bg: #c0c0c0; --os-ctl-bg-close: #c0c0c0; --os-ctl-shadow: var(--os-bevel-out); --os-ctl-inactive: none;
  --os-glyph-display: block; --os-glyph-size: 8px; --os-close-order: 0;
  --os-body-pad: 8px; --os-body-border: 0; --os-body-mt: 2px;
  --os-select-bg: #000080; --os-select-ink: #fff;
  --os-btn-bg: #c0c0c0; --os-btn-bg-active: #c0c0c0; --os-btn-border: 0; --os-btn-radius: 0;
  --os-btn-shadow: var(--os-bevel-out); --os-btn-shadow-hover: var(--os-bevel-out); --os-btn-shadow-active: var(--os-bevel-in);
  --os-btn-shadow-primary: inset 0 0 0 1px #0a0a0a, inset -2px -2px #0a0a0a, inset 2px 2px #fff, inset -3px -3px #808080, inset 3px 3px #dfdfdf;
  --os-group-border: 1px solid #808080; --os-group-radius: 0; --os-group-legend: #000;
  --os-progress-radius: 0;
  --os-progress-fill: repeating-linear-gradient(90deg, #000080 0 8px, transparent 8px 10px);
  --os-menu-bg: #c0c0c0; --os-menu-border: 0; --os-menu-shadow: var(--os-bevel-out), 2px 2px 0 rgba(0, 0, 0, .25); --os-flyout-radius: 0;
  --os-status-seg: inset -1px -1px #dfdfdf, inset 1px 1px #808080;
  --os-grip-dot: #808080;
  --os-icon-ink: #fff; --os-icon-label-bg: transparent; --os-icon-label-shadow: 1px 1px 0 rgba(0, 0, 0, .55);
  --os-icon-sel-filter: brightness(.6) sepia(1) hue-rotate(195deg) saturate(5);
  --os-lasso-border: 1px dotted #000; --os-lasso-bg: transparent;
  --os-taskbar-h: 36px;
  --os-sd-band: #c0c0c0; --os-sd-ink: #000;
  --os-min-mode: hide;
}
[data-os-skin="macclassic"] {
  --os-font-ui: "Pixelify Sans", Charcoal, Chicago, Geneva, sans-serif;
  --os-font-title: "Pixelify Sans", Charcoal, Chicago, Geneva, sans-serif;
  --os-fs: 13px;
  --os-ink: #000; --os-ink-dim: #444;
  --os-desk-bg: #6670a8;
  --os-face: #dddddd; --os-well: #fff;
  --os-field-border: 1px solid #222; --os-field-shadow: inset 1px 1px #9a9a9a; --os-field-radius: 0;
  --os-win-bg: #dddddd; --os-win-bg-inactive: #e6e6e6;
  --os-win-pad: 0 5px 5px; --os-win-radius: 0; --os-win-border: 1px solid #000;
  --os-win-shadow: inset 1px 1px #fff, inset -1px -1px #888, 1px 1px 0 #000, 3px 3px 0 rgba(0, 0, 0, .22);
  --os-title-h: 21px; --os-title-mx: -4px; --os-title-pad: 0 6px; --os-title-radius: 0;
  --os-title-bg: linear-gradient(#ddd, #ddd) 0 0 / 100% 4px no-repeat, linear-gradient(#ddd, #ddd) 0 100% / 100% 4px no-repeat, repeating-linear-gradient(180deg, #fbfbfb 0 1px, #8f8f8f 1px 2px);
  --os-title-bg-inactive: #e6e6e6;
  --os-title-ink: #000; --os-title-ink-inactive: #8a8a8a; --os-title-text-bg-inactive: #e6e6e6;
  --os-title-fs: 13px; --os-title-weight: 600; --os-title-shadow: none;
  --os-title-text-bg: #ddd; --os-title-text-pad: 0 8px; --os-title-margin: 0 auto; --os-title-flex: 0 1 auto; --os-title-icon-display: none;
  --os-ctl-w: 13px; --os-ctl-h: 13px; --os-ctl-radius: 0; --os-ctl-border: 1px solid #262626; --os-ctl-ink: #000; --os-ctl-gap: 4px;
  --os-ctl-bg: linear-gradient(135deg, #a8a8a8, #f2f2f2); --os-ctl-bg-close: linear-gradient(135deg, #a8a8a8, #f2f2f2);
  --os-ctl-shadow: inset 1px 1px #fff, inset -1px -1px #777, 0 0 0 1px #ddd; --os-ctl-inactive: opacity(0);
  --os-glyph-display: none; --os-glyph-size: 0; --os-close-order: -1;
  --os-body-pad: 10px; --os-body-border: 1px solid #555; --os-body-mt: 0;
  --os-select-bg: #3a46c2; --os-select-ink: #fff;
  --os-btn-bg: linear-gradient(180deg, #f6f6f6, #d2d2d2); --os-btn-bg-active: linear-gradient(180deg, #8c8c8c, #b5b5b5);
  --os-btn-border: 1px solid #1d1d1d; --os-btn-radius: 6px;
  --os-btn-shadow: inset 1px 1px #fff, inset -1px -1px #a0a0a0; --os-btn-shadow-hover: inset 1px 1px #fff, inset -1px -1px #a0a0a0, 0 0 0 1px #d0d0d0;
  --os-btn-shadow-active: inset 1px 1px #666;
  --os-btn-shadow-primary: inset 1px 1px #fff, inset -1px -1px #a0a0a0, 0 0 0 2px #ddd, 0 0 0 3px #1d1d1d;
  --os-group-border: 1px solid #8a8a8a; --os-group-radius: 0; --os-group-legend: #000;
  --os-progress-radius: 4px;
  --os-progress-fill: repeating-linear-gradient(-45deg, #5b6fd6 0 6px, #a9b6f0 6px 12px);
  --os-menu-bg: #eee; --os-menu-border: 1px solid #000; --os-menu-shadow: 2px 2px 0 rgba(0, 0, 0, .35); --os-flyout-radius: 0;
  --os-status-seg: none;
  --os-grip-dot: #777;
  --os-icon-ink: #000; --os-icon-label-bg: #fff; --os-icon-label-shadow: none;
  --os-icon-sel-filter: brightness(.55);
  --os-lasso-border: 1px dashed #000; --os-lasso-bg: transparent;
  --os-taskbar-h: 26px;
  --os-sd-band: #dddddd; --os-sd-ink: #000;
  --os-min-mode: shade;
}

/* ------------------------------------------------------------------ root + layers */
body:has(> .os) { margin: 0; }
.os {
  --os-up: #12823a; --os-down: #c42b1c; --os-up-bg: rgba(52, 199, 89, .32); --os-down-bg: rgba(235, 64, 52, .3);
  --os-desk-top: 0px; --os-desk-bottom: var(--os-taskbar-h);
  position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; isolation: isolate;
  font: var(--os-fs)/1.4 var(--os-font-ui); color: var(--os-ink); background: var(--os-desk-bg);
  -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
}
.os[data-os-skin="macclassic"] { --os-desk-top: var(--os-taskbar-h); --os-desk-bottom: 0px; }
.os *, .os *::before, .os *::after { box-sizing: border-box; }
.os button { font: inherit; color: inherit; cursor: default; }
.os.is-busy, .os.is-busy * { cursor: progress !important; }
.os.is-dragging, .os.is-dragging * { user-select: none !important; }
.os.is-dragging iframe { pointer-events: none; }
.os-ico { display: inline-block; flex: none; width: 16px; height: 16px; line-height: 0; }
.os-ico svg, .os-ico img { width: 100%; height: 100%; display: block; }
.os-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.os-desktop { position: absolute; inset: 0; transition: filter 1.2s ease; }
.os-wallpaper { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--os-desk-bg); }
.os-wallpaper-fill { position: absolute; inset: 0; }
.os-m-hero { display: none; }
.os-wins { position: absolute; z-index: 5; left: 0; right: 0; top: var(--os-desk-top); bottom: var(--os-desk-bottom); pointer-events: none; }
.os-wins > .os-win { position: absolute; pointer-events: auto; }
.os-lasso { position: absolute; z-index: 4; border: var(--os-lasso-border); background: var(--os-lasso-bg); pointer-events: none; }
.os.is-greying .os-desktop, .os.is-greying .os-taskbar { filter: grayscale(1) brightness(.9); }
.os-taskbar { transition: filter 1.2s ease; }

/* ------------------------------------------------------------------ desktop icons */
.os-icons {
  position: absolute; z-index: 3; left: 8px; top: calc(var(--os-desk-top) + 10px); bottom: calc(var(--os-desk-bottom) + 8px);
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 86px); grid-auto-columns: 84px; gap: 4px; align-content: start;
  pointer-events: none;
}
.os-icons.is-refresh { visibility: hidden; }
.os-icon {
  pointer-events: auto; direction: ltr; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 84px; padding: 4px 2px;
  border: 0; background: none; color: var(--os-icon-ink); text-decoration: none; font: var(--os-fs)/1.2 var(--os-font-ui); cursor: default; outline: none;
}
.os-icon-img { position: relative; width: 40px; height: 40px; transition: transform .18s cubic-bezier(.2, .8, .2, 1); }
.os-icon-img svg { filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .35)); }
.os-icon-label { max-width: 100%; padding: 1px 3px; text-align: center; color: var(--os-icon-ink); background: var(--os-icon-label-bg); text-shadow: var(--os-icon-label-shadow); overflow-wrap: anywhere; outline: 1px dotted transparent; outline-offset: 0; }
.os-shortcut { position: absolute; left: -2px; bottom: -2px; width: 13px; height: 13px; line-height: 0; }
.os-shortcut svg { width: 100%; height: 100%; filter: none !important; }
.os-badge { position: absolute; right: -7px; top: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; font: 700 11px/19px var(--os-font-ui); text-align: center; color: #fff; background: #e0301e; box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(0, 0, 0, .35); animation: os-badge 1.6s ease-in-out infinite; }
@keyframes os-badge { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.18); } 90% { transform: scale(.94); } }
.os-icon:hover .os-icon-img { transform: translateY(-2px); }
.os-icon:hover .os-icon-label { outline-color: color-mix(in srgb, var(--os-icon-ink) 55%, transparent); }
.os-icon.is-sel .os-icon-img > svg { filter: var(--os-icon-sel-filter) drop-shadow(1px 2px 1px rgba(0, 0, 0, .35)); }
.os-icon.is-sel .os-icon-label { background: var(--os-select-bg); color: var(--os-select-ink); text-shadow: none; }
.os-icon:focus-visible .os-icon-label { outline: 1px dotted var(--os-select-ink); background: var(--os-select-bg); color: var(--os-select-ink); text-shadow: none; }

/* ------------------------------------------------------------------ windows */
.os-win {
  display: flex; flex-direction: column; min-width: 0; padding: var(--os-win-pad);
  background: var(--os-win-bg-inactive); border: var(--os-win-border); border-radius: var(--os-win-radius); box-shadow: var(--os-win-shadow);
  font: var(--os-fs)/1.4 var(--os-font-ui); color: var(--os-ink); outline: none; user-select: none;
}
.os-win.is-active { background: var(--os-win-bg); }
.os-win[hidden], .os-win.is-min { display: none !important; }
.os-win.is-anim { transition: left .18s cubic-bezier(.2, .8, .2, 1), top .18s cubic-bezier(.2, .8, .2, 1), width .18s cubic-bezier(.2, .8, .2, 1), height .18s cubic-bezier(.2, .8, .2, 1); }
.os-win.is-max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; }
.os-win.is-max .os-titlebar { border-radius: 0; }
.os-win.is-shade { height: auto !important; }
.os-win.is-shade > :not(.os-titlebar) { display: none !important; }
.os-titlebar {
  display: flex; align-items: center; gap: var(--os-ctl-gap); flex: none; height: var(--os-title-h); margin: 0 var(--os-title-mx); padding: var(--os-title-pad);
  background: var(--os-title-bg-inactive); color: var(--os-title-ink-inactive); border-radius: var(--os-title-radius); touch-action: none; cursor: default;
}
.os-win.is-active > .os-titlebar { background: var(--os-title-bg); color: var(--os-title-ink); }
.os-title-ico { display: var(--os-title-icon-display); width: 16px; height: 16px; margin-right: 4px; }
.os-title {
  flex: var(--os-title-flex); min-width: 0; margin: var(--os-title-margin); padding: var(--os-title-text-pad); background: var(--os-title-text-bg);
  font: var(--os-title-weight) var(--os-title-fs)/var(--os-title-h) var(--os-font-title); letter-spacing: .01em; text-shadow: var(--os-title-shadow);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.os-win:not(.is-active) .os-title { text-shadow: none; background: var(--os-title-text-bg-inactive, var(--os-title-text-bg)); }
.os-ctl {
  display: inline-grid; place-items: center; flex: none; width: var(--os-ctl-w); height: var(--os-ctl-h); padding: 0;
  border: var(--os-ctl-border); border-radius: var(--os-ctl-radius); background: var(--os-ctl-bg); box-shadow: var(--os-ctl-shadow); color: var(--os-ctl-ink);
}
.os-ctl-close { background: var(--os-ctl-bg-close); order: var(--os-close-order); margin-left: 2px; }
.os-ctl-min + .os-ctl-max, .os-ctl-min { margin-left: 0; }
.os-glyph { display: var(--os-glyph-display); width: var(--os-glyph-size); height: var(--os-glyph-size); }
.os-ctl:hover { filter: brightness(1.14); }
.os-ctl:active { filter: brightness(.86); box-shadow: var(--os-bevel-in, var(--os-ctl-shadow)); }
.os-ctl:focus-visible { outline: 1px dotted currentColor; outline-offset: -4px; }
.os-win:not(.is-active) .os-ctl { filter: var(--os-ctl-inactive); }
.os-body {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; margin-top: var(--os-body-mt); padding: var(--os-body-pad);
  background: var(--os-face); border: var(--os-body-border); user-select: text; -webkit-user-select: text; scrollbar-width: thin;
}
.os-body > :first-child { margin-top: 0; } .os-body > :last-child { margin-bottom: 0; }
.os-win.is-flash > .os-titlebar { animation: os-flash .7s steps(1); }
@keyframes os-flash { 0%, 33%, 66% { background: var(--os-title-bg-inactive); color: var(--os-title-ink-inactive); } 16%, 50%, 83%, 100% { background: var(--os-title-bg); color: var(--os-title-ink); } }
.os-grip {
  position: absolute; right: 3px; bottom: 3px; width: 13px; height: 13px; cursor: nwse-resize; touch-action: none;
  background: radial-gradient(circle, var(--os-grip-dot) 1px, transparent 1.6px) 0 0 / 4px 4px; clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.os-menubar { display: flex; flex-wrap: wrap; flex: none; margin-top: var(--os-body-mt); background: var(--os-face); border-bottom: 1px solid color-mix(in srgb, var(--os-ink) 14%, transparent); }
.os-menubar-btn { padding: 3px 8px; border: 0; background: none; }
.os-menubar-btn:hover, .os-menubar-btn.is-on, .os-menubar-btn:focus-visible { background: var(--os-select-bg); color: var(--os-select-ink); outline: none; }
.os-statusbar { display: flex; gap: 2px; flex: none; padding-top: 3px; background: var(--os-face); font-size: 12px; color: var(--os-ink-dim); }
.os-status-seg { flex: 1 1 auto; min-width: 0; padding: 2px 8px; box-shadow: var(--os-status-seg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-status-seg:first-child { flex-grow: 3; }
.os-ghost { position: absolute; z-index: 9800; pointer-events: none; background: var(--os-title-bg); outline: 1px solid rgba(0, 0, 0, .45); opacity: .9; }

/* ------------------------------------------------------------------ widgets for window bodies */
.os-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 76px; min-height: 26px; padding: 3px 14px;
  font: var(--os-fs)/1.2 var(--os-font-ui); color: var(--os-ink); text-decoration: none; white-space: nowrap;
  background: var(--os-btn-bg); border: var(--os-btn-border); border-radius: var(--os-btn-radius); box-shadow: var(--os-btn-shadow); cursor: default;
}
.os-btn:hover { box-shadow: var(--os-btn-shadow-hover); }
.os-btn--primary, .os-btn--primary:hover { box-shadow: var(--os-btn-shadow-primary); }
.os-btn:active { background: var(--os-btn-bg-active); box-shadow: var(--os-btn-shadow-active); }
.os-btn:focus-visible { outline: 1px dotted var(--os-ink); outline-offset: -5px; }
.os-btn[aria-disabled="true"], .os-btn:disabled { color: #8d8d8d; text-shadow: 1px 1px #fff; }
.os-input {
  min-height: 26px; padding: 3px 6px; font: var(--os-fs)/1.2 var(--os-font-ui); color: var(--os-ink);
  background: var(--os-well); border: var(--os-field-border); box-shadow: var(--os-field-shadow); border-radius: var(--os-field-radius); outline: none;
}
.os-input:focus-visible { outline: 1px dotted var(--os-ink); outline-offset: 1px; }
.os-well { background: var(--os-well); border: var(--os-field-border); box-shadow: var(--os-field-shadow); padding: 8px; }
.os-group { margin: 0; padding: 8px 10px 10px; border: var(--os-group-border); border-radius: var(--os-group-radius); }
.os-group > legend { padding: 0 4px; color: var(--os-group-legend); }
.os-progress { height: 18px; padding: 2px; background: var(--os-well); border: var(--os-field-border); box-shadow: var(--os-field-shadow); border-radius: var(--os-progress-radius); overflow: hidden; }
.os-progress > i { display: block; height: 100%; width: var(--p, 0%); background: var(--os-progress-fill); border-radius: calc(var(--os-progress-radius) - 1px); transition: width .25s steps(4); }
.os-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; }
.os-kv dt { color: var(--os-ink-dim); }
.os-kv dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.os-up { animation: os-up .9s ease-out; } .os-down { animation: os-down .9s ease-out; }
@keyframes os-up { 0%, 30% { background: var(--os-up-bg); color: var(--os-up); } }
@keyframes os-down { 0%, 30% { background: var(--os-down-bg); color: var(--os-down); } }

/* dialogs */
.os-dialog .os-body { padding: 14px 14px 12px; }
.os-dlg-row { display: flex; gap: 14px; align-items: flex-start; padding: 2px 2px 14px; }
.os-dlg-ico { width: 34px; height: 34px; }
.os-dlg-text { min-width: 0; padding-top: 2px; }
.os-dlg-text p { margin: 0 0 6px; }
.os-dlg-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.os-modals { position: absolute; inset: 0; z-index: 9700; pointer-events: none; }
.os-modals.is-on { pointer-events: auto; }
.os-modals > .os-win { position: absolute; pointer-events: auto; }
.os-shutdown .os-body { padding: 0; }
.os-sd-band { display: flex; justify-content: space-around; gap: 6px; padding: 20px 10px 18px; background: var(--os-sd-band); color: var(--os-sd-ink); }
.os-sd-btn { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 92px; padding: 6px; border: 0; background: none; color: inherit; }
.os-sd-ico { width: 40px; height: 40px; transition: transform .15s cubic-bezier(.2, .8, .2, 1), filter .15s; }
.os-sd-btn:hover .os-sd-ico, .os-sd-btn:focus-visible .os-sd-ico { transform: scale(1.08); filter: brightness(1.12) drop-shadow(0 0 6px rgba(255, 255, 255, .55)); }
.os-sd-btn:focus-visible { outline: 1px dotted currentColor; }
.os-shutdown .os-dlg-btns { justify-content: flex-end; padding: 10px; }

/* display properties */
.os-skin-hint { margin: 0 0 10px; }
.os-skin-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.os-skin-tile { display: flex; flex-direction: column; gap: 6px; padding: 4px; border: 2px solid transparent; background: none; text-align: center; }
.os-skin-tile[aria-checked="true"] { border-color: var(--os-select-bg); }
.os-skin-tile:focus-visible { outline: 1px dotted var(--os-ink); }
.os-skin-prev { display: block; padding: 12px 8px; height: 92px; background: var(--os-desk-bg); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.os-skin-name { font-weight: 700; }
.os-win--mini { position: relative; --os-title-h: 18px; --os-title-fs: 11px; --os-ctl-w: 13px; --os-ctl-h: 13px; --os-glyph-size: 7px; --os-body-pad: 6px; font-size: 11px; pointer-events: none; }
.os-win--mini .os-body { overflow: hidden; display: flex; justify-content: center; }
.os-win--mini .os-btn { min-width: 0; min-height: 18px; padding: 1px 10px; font-size: 11px; }

/* ------------------------------------------------------------------ taskbar */
.os-taskbar {
  position: absolute; z-index: 9000; left: 0; right: 0; bottom: 0; height: var(--os-taskbar-h); display: flex; align-items: stretch;
  font: var(--os-fs)/1 var(--os-font-ui);
}
.os-start { display: flex; align-items: center; gap: 6px; flex: none; border: 0; }
.os-start-ico { width: 22px; height: 22px; }
.os-tasks { display: flex; flex: 1 1 auto; min-width: 0; gap: 3px; padding: 4px 6px; overflow: hidden; }
.os-task, .os-stat { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0 9px; text-decoration: none; white-space: nowrap; }
.os-task { flex: 0 1 172px; }
.os-task-label { overflow: hidden; text-overflow: ellipsis; }
.os-task-ico, .os-stat-ico { width: 16px; height: 16px; }
.os-stats { display: flex; flex: none; gap: 3px; padding: 4px 6px; }
.os-stat-val { font-variant-numeric: tabular-nums; border-radius: 2px; padding: 0 2px; }
.os-tray { display: flex; align-items: center; flex: none; gap: 3px; padding: 0 8px 0 6px; }
.os-tray-btn { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; background: none; border-radius: 3px; }
.os-tray-btn .os-ico { width: 18px; height: 18px; }
.os-tray-btn:hover { background: rgba(255, 255, 255, .16); }
.os-clock { padding: 0 6px; height: 100%; border: 0; background: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.os-taskbar button:focus-visible, .os-taskbar a:focus-visible { outline: 1px dotted currentColor; outline-offset: -3px; }

/* xp taskbar */
.os[data-os-skin="xp"] .os-taskbar {
  color: #fff;
  background: linear-gradient(180deg, #1f2f86 0, #3165c4 3%, #3682e5 6%, #4490e6 10%, #3883e5 12%, #2b71e0 15%, #2663da 18%, #235bd6 20%, #2258d5 23%, #2157d6 38%, #245ddb 54%, #2562df 86%, #245fdc 89%, #2158d4 92%, #1d4ec0 95%, #1941a5 98%);
}
.os[data-os-skin="xp"] .os-start {
  padding: 0 22px 0 10px; border-radius: 0 13px 13px 0; color: #fff; font: italic 700 20px/1 var(--os-font-title); text-shadow: 1px 1px 2px rgba(0, 0, 0, .55); letter-spacing: .01em;
  background: radial-gradient(ellipse 90% 70% at 40% 30%, #66c25a 0%, #3c9d38 55%, #2d8a2c 80%, #246d22 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .55), inset -3px 0 4px rgba(0, 0, 0, .28), 2px 0 5px rgba(0, 0, 0, .35);
}
.os[data-os-skin="xp"] .os-start:hover { filter: brightness(1.1); }
.os[data-os-skin="xp"] .os-start.is-on { filter: brightness(.82); }
.os[data-os-skin="xp"] .os-task, .os[data-os-skin="xp"] .os-stat {
  color: #fff; border: 0; border-radius: 3px; background: #3c81f3;
  box-shadow: inset -1px 0 rgba(0, 0, 0, .3), inset 1px 1px 1px rgba(255, 255, 255, .25);
}
.os[data-os-skin="xp"] .os-stat { background: linear-gradient(180deg, #4a90f5, #2f6fe0); }
.os[data-os-skin="xp"] .os-task:hover, .os[data-os-skin="xp"] .os-stat:hover { background: #5193f6; }
.os[data-os-skin="xp"] .os-task[aria-pressed="true"] { background: #1e52b7; box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, .25), inset 1px 0 1px rgba(0, 0, 0, .7); }
.os[data-os-skin="xp"] .os-tray {
  color: #fff; border-left: 1px solid #092e8a; box-shadow: inset 1px 0 1px #18bbff;
  background: linear-gradient(180deg, #0c59b9 1%, #139ee9 6%, #18b5f2 10%, #139beb 14%, #1290e8 19%, #0d8dea 63%, #0d9ff1 81%, #0f9eed 88%, #119be9 91%, #1392e2 94%, #137ed7 97%, #095bc9);
}

/* win98 taskbar */
.os[data-os-skin="win98"] .os-taskbar { background: #c0c0c0; box-shadow: inset 0 1px #dfdfdf, inset 0 2px #fff; padding-top: 2px; }
.os[data-os-skin="win98"] .os-start {
  margin: 3px 2px 3px 3px; padding: 0 8px 0 5px; font: 700 14px/1 var(--os-font-title); color: #000; text-transform: capitalize; background: #c0c0c0; box-shadow: var(--os-bevel-out);
}
.os[data-os-skin="win98"] .os-start.is-on, .os[data-os-skin="win98"] .os-start:active { box-shadow: var(--os-bevel-in); }
.os[data-os-skin="win98"] .os-tasks, .os[data-os-skin="win98"] .os-stats { padding: 3px 2px; }
.os[data-os-skin="win98"] .os-task, .os[data-os-skin="win98"] .os-stat { color: #000; border: 0; background: #c0c0c0; box-shadow: var(--os-bevel-out); }
.os[data-os-skin="win98"] .os-task[aria-pressed="true"] { font-weight: 700; box-shadow: var(--os-bevel-in); background: repeating-conic-gradient(#c0c0c0 0 25%, #fff 0 50%) 0 0 / 2px 2px; }
.os[data-os-skin="win98"] .os-stat:active, .os[data-os-skin="win98"] .os-task:active { box-shadow: var(--os-bevel-in); }
.os[data-os-skin="win98"] .os-tray { margin: 3px 3px 3px 2px; color: #000; box-shadow: inset -1px -1px #fff, inset 1px 1px #808080; }
.os[data-os-skin="win98"] .os-tray-btn:hover { background: rgba(0, 0, 0, .08); }

/* platinum menu bar (top) */
.os[data-os-skin="macclassic"] .os-taskbar {
  top: 0; bottom: auto; color: #000; background: linear-gradient(180deg, #f2f2f2, #d6d6d6); box-shadow: inset 0 -1px #000, inset 0 1px #fff;
}
.os[data-os-skin="macclassic"] .os-start { padding: 0 12px; background: none; }
.os[data-os-skin="macclassic"] .os-start-label { display: none; }
.os[data-os-skin="macclassic"] .os-start-ico { width: 18px; height: 18px; }
.os[data-os-skin="macclassic"] .os-start.is-on, .os[data-os-skin="macclassic"] .os-start:hover { background: var(--os-select-bg); }
.os[data-os-skin="macclassic"] .os-tasks, .os[data-os-skin="macclassic"] .os-stats { padding: 0; gap: 0; }
.os[data-os-skin="macclassic"] .os-task, .os[data-os-skin="macclassic"] .os-stat { flex: none; max-width: 170px; padding: 0 10px; border: 0; background: none; color: #000; font-weight: 600; }
.os[data-os-skin="macclassic"] .os-task .os-task-ico { display: none; }
.os[data-os-skin="macclassic"] .os-task:hover, .os[data-os-skin="macclassic"] .os-stat:hover, .os[data-os-skin="macclassic"] .os-task[aria-pressed="true"] { background: var(--os-select-bg); color: #fff; }
.os[data-os-skin="macclassic"] .os-tray { color: #000; padding-left: 4px; }
.os[data-os-skin="macclassic"] .os-tray-btn { height: 22px; }

/* ------------------------------------------------------------------ start menu */
.os-startmenu { position: absolute; z-index: 9500; left: 0; bottom: var(--os-taskbar-h); width: min(400px, calc(100% - 12px)); max-height: calc(100% - var(--os-taskbar-h) - 8px); overflow: auto; }
.os-startmenu[hidden] { display: none; }
.os-start-head { display: flex; align-items: center; gap: 10px; }
.os-start-avatar { width: 46px; height: 46px; }
.os-start-main { display: flex; }
.os-start-banner { display: none; }
.os-start-cols { display: flex; flex: 1; min-width: 0; }
.os-start-left, .os-start-right { min-width: 0; padding: 6px 0; }
.os-start-item { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 36px; padding: 4px 10px; border: 0; background: none; color: #000; text-align: left; text-decoration: none; outline: none; }
.os-start-item-ico { width: 22px; height: 22px; }
.os-start-item.is-big .os-start-item-ico { width: 30px; height: 30px; }
.os-start-item-text { display: flex; flex-direction: column; min-width: 0; }
.os-start-item small { font-size: 11px; color: #5d5d5d; }
.os-start-item:hover, .os-start-item:focus-visible { background: var(--os-select-bg); color: var(--os-select-ink); }
.os-start-item:hover small, .os-start-item:focus-visible small { color: inherit; opacity: .85; }
.os-start-sep { height: 1px; margin: 4px 10px; background: color-mix(in srgb, currentColor 22%, transparent); }
.os-start-foot { display: flex; justify-content: flex-end; gap: 2px; }

.os[data-os-skin="xp"] .os-startmenu { border-radius: 8px 8px 0 0; background: #fff; box-shadow: 2px -2px 18px rgba(0, 0, 0, .42); border: 1px solid #0a3bb3; }
.os[data-os-skin="xp"] .os-start-head {
  min-height: 64px; padding: 8px 12px; color: #fff; font: 700 16px/1.1 var(--os-font-title); text-shadow: 1px 1px 2px rgba(0, 0, 0, .55);
  background: linear-gradient(180deg, #1868ce 0, #0e60cb 12%, #0e60cb 20%, #1164cf 32%, #1667cf 33%, #1b6cd3 47%, #1e70d9 54%, #2476dc 60%, #2a7ce5 65%, #3082ee 77%, #3786f3 79%, #3c8af6 90%, #3a8ff5 100%);
}
.os[data-os-skin="xp"] .os-start-avatar { padding: 2px; background: #fff; border-radius: 4px; box-shadow: 0 0 0 1px #7da2ce, 1px 2px 3px rgba(0, 0, 0, .4); }
.os[data-os-skin="xp"] .os-start-cols { border-top: 2px solid; border-image: linear-gradient(90deg, transparent, #ff9a32 40%, #ff9a32 60%, transparent) 1; }
.os[data-os-skin="xp"] .os-start-left { flex: 1 1 56%; }
.os[data-os-skin="xp"] .os-start-right { flex: 1 1 44%; background: #d3e5fa; border-left: 1px solid #95bdee; }
.os[data-os-skin="xp"] .os-start-right .os-start-item { min-height: 30px; }
.os[data-os-skin="xp"] .os-start-right .os-start-item-label { font-weight: 700; color: #0a246a; }
.os[data-os-skin="xp"] .os-start-right .os-start-item:hover .os-start-item-label { color: #fff; }
.os[data-os-skin="xp"] .os-start-left .os-start-item-label { font-weight: 700; }
.os[data-os-skin="xp"] .os-start-foot { padding: 6px 8px; background: linear-gradient(180deg, #4282d6, #3b85e0 3%, #418ae3 5%, #418ae3 17%, #3c87e2 21%, #3786e4 26%, #3482e3 29%, #2e7ee1 39%, #2374df 49%, #2072db 57%, #196edb 62%, #176bd8 72%, #1468d2 83%, #0e60cb 100%); }
.os[data-os-skin="xp"] .os-start-foot .os-start-item { width: auto; min-height: 32px; color: #fff; border-radius: 3px; }
.os[data-os-skin="xp"] .os-start-foot .os-start-item:hover, .os[data-os-skin="xp"] .os-start-foot .os-start-item:focus-visible { background: rgba(255, 255, 255, .2); }

.os[data-os-skin="win98"] .os-startmenu { width: min(268px, calc(100% - 12px)); padding: 3px; background: #c0c0c0; box-shadow: var(--os-bevel-out); }
.os[data-os-skin="win98"] .os-start-head { display: none; }
.os[data-os-skin="win98"] .os-start-banner { display: flex; align-items: flex-end; flex: none; width: 26px; background: linear-gradient(0deg, #000080, #1084d0); }
.os[data-os-skin="win98"] .os-start-banner span { writing-mode: vertical-rl; transform: rotate(180deg); padding: 8px 0; color: #fff; font: 700 17px/26px var(--os-font-title); letter-spacing: .04em; white-space: nowrap; }
.os[data-os-skin="win98"] .os-start-cols, .os[data-os-skin="macclassic"] .os-start-cols { display: block; }
.os[data-os-skin="win98"] .os-start-left, .os[data-os-skin="win98"] .os-start-right, .os[data-os-skin="macclassic"] .os-start-left, .os[data-os-skin="macclassic"] .os-start-right { padding: 2px 0; }
.os[data-os-skin="win98"] .os-start-right { border-top: 1px solid #808080; box-shadow: inset 0 1px #fff; }
.os[data-os-skin="win98"] .os-start-foot { display: block; border-top: 1px solid #808080; box-shadow: inset 0 1px #fff; margin-left: 26px; padding-top: 2px; }
.os[data-os-skin="win98"] .os-start-item small, .os[data-os-skin="macclassic"] .os-start-item small { display: none; }
.os[data-os-skin="macclassic"] .os-startmenu { top: var(--os-taskbar-h); bottom: auto; width: min(250px, calc(100% - 12px)); background: #eee; border: 1px solid #000; box-shadow: 2px 2px 0 rgba(0, 0, 0, .35); }
.os[data-os-skin="macclassic"] .os-start-head, .os[data-os-skin="macclassic"] .os-start-banner { display: none; }
.os[data-os-skin="macclassic"] .os-start-item { min-height: 28px; }
.os[data-os-skin="macclassic"] .os-start-item-ico, .os[data-os-skin="macclassic"] .os-start-item.is-big .os-start-item-ico { width: 18px; height: 18px; }
.os[data-os-skin="macclassic"] .os-start-right, .os[data-os-skin="macclassic"] .os-start-foot { display: block; border-top: 1px solid #999; }

/* ------------------------------------------------------------------ popup menus, flyout, balloon */
.os-menu { position: absolute; z-index: 9600; min-width: 190px; padding: 2px; background: var(--os-menu-bg); border: var(--os-menu-border); box-shadow: var(--os-menu-shadow); font: var(--os-fs)/1.2 var(--os-font-ui); color: var(--os-ink); }
.os-menu-item { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 4px; width: 100%; min-height: 26px; padding: 3px 14px 3px 4px; border: 0; background: none; text-align: left; text-decoration: none; color: inherit; outline: none; }
.os-menu-item:hover, .os-menu-item:focus-visible { background: var(--os-select-bg); color: var(--os-select-ink); }
.os-menu-item[aria-disabled="true"] { color: #8d8d8d; background: none; }
.os-menu-item kbd { font: inherit; opacity: .75; padding-left: 18px; }
.os-menu-sep { height: 1px; margin: 3px 2px; background: #a5a5a5; box-shadow: 0 1px #fff; }
.os-flyout { position: absolute; z-index: 9550; right: 6px; bottom: calc(var(--os-taskbar-h) + 6px); width: 236px; padding: 12px; background: var(--os-face); border: var(--os-menu-border); box-shadow: var(--os-menu-shadow); border-radius: var(--os-flyout-radius); color: var(--os-ink); }
.os[data-os-skin="macclassic"] .os-flyout { top: calc(var(--os-taskbar-h) + 4px); bottom: auto; }
.os-cal-time { font: 700 24px/1 var(--os-font-title); font-variant-numeric: tabular-nums; }
.os-cal-date { margin: 4px 0 10px; color: var(--os-ink-dim); }
.os-cal-month { margin-bottom: 4px; font-weight: 700; }
.os-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 6px; text-align: center; background: var(--os-well); border: var(--os-field-border); box-shadow: var(--os-field-shadow); font-variant-numeric: tabular-nums; }
.os-cal-wd { font-weight: 700; color: var(--os-ink-dim); }
.os-cal-d.is-today { background: var(--os-select-bg); color: var(--os-select-ink); border-radius: 2px; }
.os-balloon {
  --os-tail: 40px; position: absolute; z-index: 9400; right: 8px; bottom: calc(var(--os-taskbar-h) + 14px); width: min(310px, calc(100% - 16px)); padding: 9px 12px 10px;
  background: #ffffe1; color: #000; border: 1px solid #000; border-radius: 8px; box-shadow: 2px 3px 6px rgba(0, 0, 0, .35); font: 12px/1.35 var(--os-font-ui);
}
.os-balloon::after { content: ""; position: absolute; right: var(--os-tail); bottom: -9px; width: 16px; height: 16px; background: #ffffe1; border: 1px solid #000; border-top: 0; border-left: 0; transform: skewX(40deg) rotate(45deg) scale(.8); }
.os[data-os-skin="macclassic"] .os-balloon { top: calc(var(--os-taskbar-h) + 14px); bottom: auto; }
.os[data-os-skin="macclassic"] .os-balloon::after { top: -9px; bottom: auto; transform: skewX(40deg) rotate(225deg) scale(.8); }
.os-balloon.is-click { cursor: pointer; }
.os-balloon-head { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.os-balloon-head strong { flex: 1; }
.os-balloon-ico { width: 18px; height: 18px; }
.os-balloon p { margin: 0; padding-left: 25px; }
.os-balloon-x { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 1px solid transparent; border-radius: 3px; background: none; color: #555; }
.os-balloon-x:hover { border-color: #b0b0b0; background: #fff; color: #c42b1c; }
.os-balloon-x .os-glyph { display: block; width: 8px; height: 8px; }

/* ------------------------------------------------------------------ boot / power screens */
.os-boot, .os-off { position: absolute; inset: 0; z-index: 9900; display: grid; place-items: center; background: #000; color: #fff; font-family: var(--os-font-title); }
.os-boot.is-out { opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.os-boot-mid { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.os-boot-logo { width: 76px; height: 76px; }
.os-boot-title { font: 700 clamp(28px, 4vw, 40px)/1 var(--os-font-title); letter-spacing: -.01em; }
.os-boot-title sup { margin-left: 4px; font-size: .45em; font-style: italic; color: var(--os-accent, #ff8a1f); vertical-align: super; }
.os-boot-tag { color: #9aa3b8; font-size: 13px; }
.os-boot-bar { position: relative; width: 168px; height: 20px; margin-top: 28px; padding: 3px; border: 2px solid #b4b4b4; border-radius: 5px; overflow: hidden; }
.os-boot-bar i { position: absolute; top: 3px; left: -40px; width: 9px; height: 10px; border-radius: 1px; background: linear-gradient(180deg, #2838c7, #3c69f6 45%, #8fb2ff 55%, #2c4fd8); animation: os-boot 1.9s linear infinite; }
.os-boot-bar i:nth-child(2) { animation-delay: .1s; } .os-boot-bar i:nth-child(3) { animation-delay: .2s; }
@keyframes os-boot { from { transform: translateX(0); } to { transform: translateX(230px); } }
.os-boot-foot { position: absolute; left: 24px; bottom: 20px; color: #8b93a7; font-size: 12px; }
.os-boot-corner { position: absolute; right: 24px; bottom: 18px; font: italic 700 16px/1 var(--os-font-title); color: #e6e6e6; }
.os-off { cursor: pointer; outline: none; }
.os-off-main { margin: 0; padding: 0 24px; max-width: 30ch; text-align: center; font: 600 clamp(22px, 3vw, 34px)/1.25 var(--os-font-title); color: #ff8a1f; }
.os-off-hint { position: absolute; bottom: 28px; margin: 0; color: #6c6c6c; font-size: 13px; }
.os-off--standby { background: #050608; }
.os-off--standby .os-off-main { color: #3a3f4a; font-size: 18px; }

/* ------------------------------------------------------------------ mobile: stacked sheets + icon grid */
@media (max-width: 640px) {
  .os {
    --os-desk-top: 0px; --os-desk-bottom: 0px; --os-ctl-w: 32px; --os-ctl-h: 32px; --os-glyph-size: 11px; --os-title-h: 42px;
    height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; overflow-x: clip;
  }
  .os[data-os-skin="macclassic"] { --os-ctl-w: 22px; --os-ctl-h: 22px; }
  .os-desktop { position: relative; inset: auto; min-height: 100dvh; display: flex; flex-direction: column; padding: 14px 16px calc(var(--os-taskbar-h) + 22px); }
  .os-wallpaper { position: fixed; }
  .os-icons, .os[data-os-skin="macclassic"] .os-icons {
    position: relative; inset: auto; direction: ltr; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row; grid-auto-columns: auto; gap: 6px 4px;
  }
  .os-icon { width: auto; min-height: 76px; padding: 4px 0; }
  .os-icon-img { width: 44px; height: 44px; }
  .os-m-hero { display: block; height: var(--os-m-hero, 0px); flex: none; }
  .os-wins { position: relative; inset: auto; display: flex; flex-direction: column; gap: 14px; pointer-events: auto; }
  .os-wins > .os-win { position: relative; left: auto !important; top: auto !important; width: auto !important; height: auto !important; max-width: 100%; }
  .os-wins > .os-win > .os-body { overflow: visible; }
  .os-wins .os-ctl-max, .os-wins .os-grip { display: none; }
  .os-taskbar, .os[data-os-skin="macclassic"] .os-taskbar { position: fixed; top: auto; bottom: 0; }
  .os-tasks { display: none; }
  .os-stats { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); }
  .os-stat-label { display: none; }
  .os-stat { padding: 0 8px; gap: 5px; }
  .os-stat[data-os-phone="hide"] { display: none; }
  .os-stat[data-os-phone="label"] .os-stat-label { display: inline; }
  .os-stats::-webkit-scrollbar { display: none; }
  .os-stat { flex: none; }
  .os-start-label { font-size: 17px; }
  .os[data-os-skin="xp"] .os-start { padding: 0 14px 0 8px; font-size: 17px; }
  .os-tray-btn { display: none; }
  .os-startmenu, .os[data-os-skin="macclassic"] .os-startmenu { position: fixed; top: auto; left: 8px; right: 8px; bottom: var(--os-taskbar-h); width: auto; max-height: calc(100dvh - var(--os-taskbar-h) - 12px); }
  .os-start-item.is-big .os-start-item-ico { width: 26px; height: 26px; }
  .os-start-item { gap: 7px; padding: 4px 8px; }
  .os-modals, .os-boot, .os-off { position: fixed; }
  .os-flyout, .os[data-os-skin="macclassic"] .os-flyout { position: fixed; top: auto; bottom: calc(var(--os-taskbar-h) + 6px); }
  .os-balloon, .os[data-os-skin="macclassic"] .os-balloon { position: fixed; top: auto; left: 16px; right: 16px; width: auto; bottom: calc(var(--os-taskbar-h) + 14px); }
  .os[data-os-skin="macclassic"] .os-balloon::after { top: auto; bottom: -9px; transform: skewX(40deg) rotate(45deg) scale(.8); }
  .os-skin-tiles { grid-template-columns: 1fr; }
  .os-skin-tile { flex-direction: row; align-items: center; text-align: left; }
  .os-skin-prev { flex: 0 0 150px; height: 74px; padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .os *, .os *::before, .os *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}