:root {
  --desktop: #008080;
  --face: #c0c0c0;
  --light: #ffffff;
  --mid: #808080;
  --dark: #000000;
  --title: #000080;
  --title2: #1084d0;
  --text: #000000;
  --hi: #dfdfdf;
  --bw: 3px; /* bolder-than-95 bevels */
  --cell-w: 104px;
  --cell-h: 112px;
  --taskbar-h: 46px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--desktop);
  font: 14px/1.2 "MS Sans Serif", "Tahoma", "Segoe UI", sans-serif;
  color: var(--text);
  overflow: hidden;
  user-select: none;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Bevels */
.raised {
  background: var(--face);
  border: var(--bw) solid;
  border-color: var(--light) var(--dark) var(--dark) var(--light);
  box-shadow: inset -2px -2px 0 var(--mid), inset 2px 2px 0 var(--hi);
}
.sunken {
  background: var(--face);
  border: var(--bw) solid;
  border-color: var(--mid) var(--light) var(--light) var(--mid);
  box-shadow: inset 2px 2px 0 var(--dark);
}
.btn {
  font: inherit; font-weight: bold; color: inherit; cursor: pointer;
  background: var(--face);
  border: var(--bw) solid;
  border-color: var(--light) var(--dark) var(--dark) var(--light);
  box-shadow: inset -2px -2px 0 var(--mid), inset 2px 2px 0 var(--hi);
  padding: 4px 12px;
}
.btn:active, .btn.pressed {
  border-color: var(--dark) var(--light) var(--light) var(--dark);
  box-shadow: inset 2px 2px 0 var(--mid);
  padding: 5px 11px 3px 13px;
}
.btn:focus-visible { outline: 2px dotted var(--dark); outline-offset: -8px; }

/* Desktop: icons flow top-to-bottom, then wrap into new columns; scrolls sideways if huge */
.desktop {
  position: fixed; inset: 0 0 var(--taskbar-h) 0;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--cell-w));
  grid-auto-rows: var(--cell-h);
  gap: 10px 14px;
  justify-content: center; /* centers every row */
  align-content: center;   /* centers vertically; falls back to scrolling when full */
  max-width: 920px; margin: 0 auto;
  left: 0; right: 0;
  overflow: hidden auto;
  -webkit-overflow-scrolling: touch;
}

/* Icon */
.icon {
  all: unset; box-sizing: border-box;
  width: var(--cell-w); height: var(--cell-h);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 4px; cursor: pointer; text-align: center;
  color: #fff; font-weight: bold; text-shadow: 1px 1px 0 #000;
  position: relative;
}
.icon .glyph {
  width: 56px; height: 56px; display: grid; place-items: center;
  font-size: 38px;
  background: var(--face);
  border: var(--bw) solid;
  border-color: var(--light) var(--dark) var(--dark) var(--light);
  box-shadow: inset -2px -2px 0 var(--mid), 4px 4px 0 rgba(0,0,0,.45);
  transition: transform .18s cubic-bezier(.3,1.8,.5,1), box-shadow .18s;
}
.icon .glyph img { width: 40px; height: 40px; image-rendering: pixelated; }
.icon .label { padding: 2px 4px; max-width: 100%; overflow-wrap: anywhere; font-size: 13px; }
.icon.folder .glyph::after {
  content: "▸"; position: absolute; right: 22px; bottom: 34px;
  font-size: 14px; color: #000; text-shadow: none;
}

.icon:hover .glyph {
  transform: translateY(-6px) rotate(-4deg) scale(1.12);
  box-shadow: inset -2px -2px 0 var(--mid), 8px 10px 0 rgba(0,0,0,.45);
}
.icon:hover .label { background: var(--title); text-shadow: none; }
.icon:active .glyph {
  transform: translateY(3px) scale(.88);
  border-color: var(--dark) var(--light) var(--light) var(--dark);
  box-shadow: inset 2px 2px 0 var(--mid);
}
.icon.selected .label { background: var(--title); outline: 2px dotted #ff0; outline-offset: -2px; text-shadow: none; }
.icon.selected .glyph { filter: brightness(.75) sepia(1) hue-rotate(190deg) saturate(4); }
.icon:focus-visible .label { outline: 2px dotted #ff0; background: var(--title); }
.icon.launching .glyph { animation: launch .5s ease-out; }
.icon.hidden { display: none; }
@keyframes launch {
  0% { transform: scale(1); } 30% { transform: scale(.8); }
  60% { transform: translateY(-14px) scale(1.25); } 100% { transform: scale(1); }
}

/* Windows */
.window {
  position: fixed; min-width: 260px; max-width: calc(100vw - 8px);
  display: flex; flex-direction: column;
  animation: pop .22s cubic-bezier(.2,1.6,.4,1);
  padding: 3px; z-index: 10;
}
.window.minimized { display: none; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.titlebar {
  display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 8px; cursor: move;
  background: linear-gradient(90deg, var(--title), var(--title2));
  color: #fff; font-weight: bold;
}
.titlebar .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titlebar .btn { padding: 0; width: 26px; height: 24px; line-height: 1; font-size: 14px; color: #000; }
.titlebar .btn:active { padding: 2px 0 0 2px; }
.window .body { margin-top: 3px; padding: 14px; flex: 1 1 auto; min-height: 0; overflow: auto; }
.titlebar { flex: none; }
.window .body p { margin: 0 0 12px; line-height: 1.5; user-select: text; }
.window .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.window .actions .btn { min-width: 84px; }
.window .folder-grid {
  display: grid; grid-template-columns: repeat(auto-fill, var(--cell-w)); gap: 6px;
  background: #fff; padding: 10px; max-height: 60vh; overflow: auto; min-width: 260px;
  border: var(--bw) solid; border-color: var(--mid) var(--light) var(--light) var(--mid);
}
.folder-grid .icon { color: #000; text-shadow: none; }
.folder-grid .icon:hover .label, .folder-grid .icon.selected .label { color: #fff; }

.progress {
  height: 24px; padding: 3px; background: #fff;
  border: var(--bw) solid; border-color: var(--mid) var(--light) var(--light) var(--mid);
}
.progress i {
  display: block; height: 100%; width: 0;
  background: repeating-linear-gradient(90deg, var(--title) 0 12px, transparent 12px 15px);
  transition: width .08s linear;
}

/* Taskbar */
.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--taskbar-h);
  display: flex; align-items: center; gap: 8px; padding: 4px 6px; z-index: 50000;
  background: var(--face);
  border-top: var(--bw) solid var(--light);
  box-shadow: 0 -2px 0 var(--mid);
}
.start { display: flex; align-items: center; gap: 6px; font-size: 15px; height: 100%; }
.start-logo { font-size: 18px; }
.search { height: 100%; width: 190px; display: flex; }
.search input { all: unset; flex: 1; padding: 0 6px; min-width: 0; background: #fff; user-select: text; }
.tasks { flex: 1; display: flex; gap: 6px; height: 100%; overflow: hidden; }
.tasks .btn { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: normal; }
.tray { height: 100%; padding: 0 12px; display: flex; align-items: center; }

.start-menu {
  position: fixed; left: 6px; bottom: var(--taskbar-h); z-index: 50001;
  margin: 0; padding: 4px; list-style: none; min-width: 230px; max-height: 70vh; overflow: auto;
}
.start-menu[hidden] { display: none; }
.start-menu button {
  all: unset; box-sizing: border-box; width: 100%; display: flex; gap: 10px; align-items: center;
  padding: 8px 10px; cursor: pointer; font-weight: bold;
}
.start-menu button:hover, .start-menu button:focus-visible { background: var(--title); color: #fff; }
.start-menu .sep { height: 0; margin: 4px 0; border-top: 2px solid var(--mid); border-bottom: 2px solid var(--light); }

.statusline {
  position: fixed; right: 12px; bottom: calc(var(--taskbar-h) + 8px); z-index: 5;
  color: #fff; font-weight: bold; text-shadow: 1px 1px 0 #000; pointer-events: none;
}

.titlebar { touch-action: none; }
.titlebar .btn { margin-left: 0; }

/* Maximize + embedded apps */
.window.maximized {
  left: 0 !important; top: 0 !important; right: 0; bottom: var(--taskbar-h);
  width: auto !important; max-width: none; display: flex; flex-direction: column;
}
.window.maximized .body { flex: 1; overflow: auto; }
.window.embed .body { padding: 0; display: flex; flex-direction: column; }
.embed-frame { width: 100%; height: min(72vh, 660px); border: 0; background: #fff; flex: 1; }
.window.embed.maximized .embed-frame, .window.sized .embed-frame { height: auto; flex: 1 1 0; min-height: 0; }
.window.sized { max-width: none; }

/* Resize handles: 8 edges/corners, drawn outside the bevel so they're easy to grab */
.rz { position: absolute; z-index: 5; touch-action: none; }
.rz-n, .rz-s { left: 10px; right: 10px; height: 10px; cursor: ns-resize; }
.rz-e, .rz-w { top: 10px; bottom: 10px; width: 10px; cursor: ew-resize; }
.rz-n { top: -5px; } .rz-s { bottom: -5px; } .rz-w { left: -5px; } .rz-e { right: -5px; }
.rz-nw, .rz-ne, .rz-sw, .rz-se { width: 18px; height: 18px; }
.rz-nw { top: -5px; left: -5px; cursor: nwse-resize; } .rz-se { bottom: -5px; right: -5px; cursor: nwse-resize; }
.rz-ne { top: -5px; right: -5px; cursor: nesw-resize; } .rz-sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.window.maximized .rz { display: none; }
@media (pointer: coarse) {
  .rz-n, .rz-s { height: 18px; } .rz-e, .rz-w { width: 18px; }
  .rz-nw, .rz-ne, .rz-sw, .rz-se { width: 28px; height: 28px; }
}
.window .body > div:has(> .tabs) { display: block; }

/* Control Panel */
.settings .body { padding: 10px; }
.tabs { display: flex; gap: 2px; padding: 0 4px; }
.tab {
  font: inherit; font-weight: bold; color: inherit; cursor: pointer; background: var(--face);
  border: var(--bw) solid; border-bottom: 0; border-color: var(--light) var(--dark) transparent var(--light);
  padding: 5px 12px; margin-bottom: -3px; position: relative;
}
.tab[aria-selected="true"] { z-index: 2; padding-bottom: 8px; margin-top: -3px; }
.tab[aria-selected="false"] { top: 2px; }
.panel { padding: 12px; margin: 0; background: var(--face); min-height: 250px; box-shadow: none; border-color: var(--light) var(--dark) var(--dark) var(--light); }
.panel fieldset { margin: 0 0 12px; padding: 8px 10px 10px; border: 2px groove var(--mid); }
.panel legend { padding: 0 6px; font-weight: bold; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 8px 0; }
.check { display: flex; align-items: center; gap: 8px; margin: 6px 0; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--title); }
.hint { margin: 8px 0 0 !important; font-size: 12px; opacity: .8; }
.panel select {
  font: inherit; color: #000; background: #fff; padding: 5px 6px; width: 100%; max-width: 100%;
  border: var(--bw) solid; border-color: var(--mid) var(--light) var(--light) var(--mid);
}
.row select { width: auto; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: normal; padding: 6px; }
.swatch[aria-pressed="true"] { border-color: var(--dark) var(--light) var(--light) var(--dark); outline: 2px dotted var(--text); outline-offset: -7px; font-weight: bold; }
.chips { display: flex; border: 2px solid #000; }
.chips i { width: 24px; height: 16px; display: block; }
.tests { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.panel .btn { font-weight: normal; }

/* Context menu */
.ctx { position: fixed; z-index: 60000; margin: 0; padding: 4px; list-style: none; min-width: 210px; }
.ctx[hidden] { display: none; }
.ctx button { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 7px 12px; cursor: pointer; }
.ctx button:hover, .ctx button:focus-visible { background: var(--title); color: #fff; }
.ctx .sep { height: 0; margin: 4px 0; border-top: 2px solid var(--mid); border-bottom: 2px solid var(--light); }

/* Icon rearranging */
.drag-ghost { position: fixed !important; pointer-events: none; z-index: 70000; opacity: .85; transform: rotate(4deg) scale(1.1); }
.icon.lifted { opacity: .3; }

/* Wallpapers */
html[data-wall="checker"] body { background-image: conic-gradient(rgba(0,0,0,.2) 25%, transparent 0 50%, rgba(0,0,0,.2) 0 75%, transparent 0); background-size: 40px 40px; }
html[data-wall="dots"] body { background-image: radial-gradient(rgba(255,255,255,.4) 3px, transparent 3.5px); background-size: 26px 26px; }
html[data-wall="grid"] body { background-image: linear-gradient(rgba(255,255,255,.22) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,.22) 2px, transparent 2px); background-size: 32px 32px; }
html[data-wall="stripes"] body { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.18) 0 14px, transparent 14px 28px); }

/* Custom cursors (set from JS) */
html[data-cursor] * { cursor: var(--cur) !important; }
html[data-cursor] button, html[data-cursor] a, html[data-cursor] select, html[data-cursor] .icon, html[data-cursor] label.check { cursor: var(--cur-point) !important; }

/* Overlays */
.crt, .trail, .saver { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.crt { display: none; z-index: 99998; background: repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.4)); }
html[data-crt] .crt { display: block; }
.trail { z-index: 99999; }
.saver { z-index: 200000; pointer-events: auto; background: #000; cursor: none; }
.saver[hidden] { display: none; }
.boot, .shutdown {
  position: fixed; inset: 0; z-index: 300000; background: #000; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 20px; text-align: center;
}
.boot-logo { width: min(520px, 86vw); height: auto; filter: drop-shadow(0 0 16px rgba(255,255,255,.35)); }
.boot .progress { width: min(360px, 80vw); }
.shutdown { font-size: 20px; }
.shutdown .boot-logo { margin-bottom: 8px; }
.shutdown.done { color: #ff8c00; cursor: pointer; }
.taskbar { padding-bottom: max(4px, env(safe-area-inset-bottom)); }

@media (max-width: 600px) {
  :root { --cell-w: 92px; --cell-h: 108px; --taskbar-h: 52px; }
  .desktop { padding: 10px 6px; gap: 6px 4px; }
  .search { width: auto; flex: 1; min-width: 0; }
  .tasks { display: none; }
  .tray { padding: 0 6px; font-size: 12px; }
  .window { left: 8px !important; right: 8px; width: auto; min-width: 0; top: 12vh !important; max-width: none; }
  .rz { display: none; }
  .window.embed { top: 8px !important; }
  .embed-frame { height: calc(100dvh - var(--taskbar-h) - 70px); }
  .window .folder-grid { min-width: 0; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .titlebar .btn { width: 36px; height: 32px; }
  .start-menu { left: 4px; right: 4px; }
  .statusline { display: none; }
}
@media (hover: none) {
  .icon:hover .glyph { transform: none; box-shadow: inset -2px -2px 0 var(--mid), 4px 4px 0 rgba(0,0,0,.45); }
  .icon:hover .label { background: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Low frame rate mode: snap UI transitions and animations to a few discrete steps */
html[data-fps="30"] *, html[data-fps="30"] *::before, html[data-fps="30"] *::after { transition-timing-function: steps(6, end) !important; animation-timing-function: steps(6, end) !important; }
html[data-fps="15"] *, html[data-fps="15"] *::before, html[data-fps="15"] *::after { transition-timing-function: steps(3, end) !important; animation-timing-function: steps(3, end) !important; }
html[data-fps="8"] *, html[data-fps="8"] *::before, html[data-fps="8"] *::after { transition-timing-function: steps(2, end) !important; animation-timing-function: steps(2, end) !important; }