:root {
  color-scheme: dark;
  --ui: Tahoma, "DejaVu Sans", "Liberation Sans", Verdana, sans-serif;
  --mono: Consolas, "DejaVu Sans Mono", "Liberation Mono", "Lucida Console", monospace;
  --ink: #f4f1ea;
  --amber: #e4b15a;
  --panel-h: 30px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #05060a;
  font-family: var(--ui);
  font-size: 12px;
  color: var(--ink);
}

button, input { font-family: inherit; font-size: inherit; color: inherit; }

button:focus-visible, input:focus-visible {
  outline: 1px solid #f0d78c;
  outline-offset: 1px;
}

#screen { height: 100%; position: relative; }

#panel {
  height: var(--panel-h);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  position: relative;
  z-index: 20;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, rgba(70, 78, 90, 0.94), rgba(28, 32, 38, 0.92));
  border-bottom: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
  color: var(--ink);
}

#btn-apps, #btn-matrix, .task, .desk-btn, #btn-vol {
  height: 22px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.45);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  color: inherit;
  padding: 0 8px;
  cursor: pointer;
}

#btn-apps { font-weight: 700; }

#btn-apps:hover, #btn-apps[aria-expanded="true"], .task:hover, .desk-btn:hover, #btn-vol:hover {
  background: linear-gradient(180deg, #4d7ea3, #2f5f86);
}

#btn-matrix {
  background: linear-gradient(180deg, #3d4a3a, #243024);
  color: #d8f5c4;
  white-space: nowrap;
}

body.matrix-mode #panel {
  box-shadow: inset 0 1px 0 rgba(190, 255, 200, 0.4), 0 0 14px rgba(40, 180, 70, 0.28);
  border-bottom-color: #1f8a3a;
}

body.matrix-mode #btn-matrix {
  background: linear-gradient(180deg, #1d6b32, #0d3d1c);
  color: #f3fff4;
  box-shadow: 0 0 8px rgba(80, 255, 120, 0.35);
}

#tasks {
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

.task {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 180px;
  min-width: 0;
  flex: 0 1 auto;
}

.task.active {
  background: linear-gradient(180deg, #6b5a3a, #3e3424);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}

.task.min { opacity: 0.62; }

.tic { width: 14px; height: 14px; display: inline-flex; flex: none; }
.tic svg { width: 14px; height: 14px; display: block; }
.tlab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#pager {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 2px;
  flex: none;
}

.desk-btn {
  width: 28px;
  height: 18px;
  padding: 1px;
  position: relative;
  background: #1b1e24;
}

.desk-btn[aria-current="true"] {
  border-color: var(--amber);
  box-shadow: inset 0 0 0 1px var(--amber);
}

.pip {
  position: absolute;
  width: 4px;
  height: 3px;
  background: #9ad7ff;
  pointer-events: none;
}

.vol { position: relative; flex: none; }
#btn-vol { width: 28px; padding: 0; display: grid; place-items: center; }
#btn-vol svg { width: 14px; height: 14px; display: block; }

#vol-pop {
  position: absolute;
  top: 26px;
  right: 0;
  width: 132px;
  padding: 8px;
  background: linear-gradient(180deg, #3c424c, #2a3038);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
  z-index: 30;
}

#vol-pop label { display: flex; flex-direction: column; gap: 4px; }
#vol { width: 100%; accent-color: var(--amber); }

#clock {
  font-variant-numeric: tabular-nums;
  min-width: 12.5em;
  text-align: right;
  padding: 0 4px;
  flex: none;
}

#viewport {
  position: absolute;
  top: var(--panel-h);
  left: 0;
  right: 0;
  bottom: 0;
  user-select: none;
}

textarea, input, .term-out, .page { user-select: text; }

#sky, #stage { position: absolute; inset: 0; }

#sky { z-index: 0; pointer-events: none; }

#stage {
  touch-action: none;
  z-index: 1;
  perspective: 1100px;
  perspective-origin: 50% 50%;
}

#cube {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}

.face, .cap {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: flat;
  backface-visibility: hidden;
  background: #000;
}

.face { pointer-events: none; width: 100%; height: 100%; }
.face.active { pointer-events: auto; }

.wallpaper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.windows { position: absolute; inset: 0; }

/* Transparency belongs to the individual surfaces, not the 3D containers:
   opacity on a face would flatten its lifted window layers. */
#cube.overview .face, #cube.overview .cap {
  transform-style: preserve-3d;
  backface-visibility: visible;
  background: transparent;
  outline: 1px solid rgba(150, 200, 230, 0.24);
}
#cube.overview .wallpaper { opacity: 0.16; }
#cube.overview .cap .wallpaper { opacity: 0.08; }
#cube.overview .windows {
  transform-style: preserve-3d;
  transform: translateZ(40px);
}
#cube.overview .window {
  translate: 0 0 var(--layer-depth, 24px);
  opacity: 0.78;
  backface-visibility: visible;
}
#cube.overview .desk-icon { opacity: 0.65; translate: 0 0 20px; }

.desk-icon {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  width: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 2px;
}

.desk-icon svg { width: 40px; height: 40px; display: block; }

.desk-icon .label {
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  background: rgba(0, 0, 0, 0.45);
  padding: 1px 4px;
  text-shadow: 0 1px 1px #000;
}

.desk-icon:hover .label, .desk-icon:focus-visible .label {
  background: rgba(20, 60, 90, 0.8);
}

body.matrix-mode .desk-icon .label { background: rgba(8, 40, 16, 0.75); color: #d8ffd0; }

#hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  z-index: 5;
  margin: 0;
  text-align: center;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.46);
  font-size: 11px;
  text-shadow: 0 1px 2px #000;
}

.menu {
  position: fixed;
  z-index: 80;
  min-width: 210px;
  padding: 4px;
  background: linear-gradient(180deg, #3a404a, #2a3038);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 2px 6px 18px rgba(0, 0, 0, 0.5);
}

.menu button {
  display: flex;
  width: 100%;
  gap: 8px;
  align-items: center;
  text-align: left;
  background: transparent;
  border: 0;
  color: #f4f1ea;
  padding: 4px 8px;
  cursor: pointer;
}

.menu button .mic { width: 16px; height: 16px; display: inline-flex; }
.menu button .mic svg { width: 16px; height: 16px; }

.menu button:hover, .menu button:focus {
  background: #3d6f8f;
  outline: none;
}

.menu-label {
  padding: 4px 8px 2px;
  color: #b7b1a4;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.menu-credit {
  padding: 6px 8px 4px;
  color: #b7b1a4;
  font-size: 10px;
  line-height: 1.35;
}

.desk-game { width: 104px; }

.menu .sep { height: 1px; margin: 4px 6px; background: rgba(255, 255, 255, 0.15); }

.wobble-svg {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.fireworks-desktop>.wallpaper { visibility:hidden; }
.fireworks-frame { position:absolute; inset:38px 0 0; width:100%; height:calc(100% - 38px); border:0; background:#070b1a; pointer-events:none; }
.fireworks-desktop .windows { pointer-events:none; }
.face.active.fireworks-desktop .window { pointer-events:auto; }
.face.active.fireworks-interactive .fireworks-frame { pointer-events:auto; }
.fireworks-tools { position:absolute; top:0; left:0; right:0; height:38px; display:flex; align-items:center; gap:12px; padding:4px 12px; background:#102131; color:#fff; font-size:11px; }
.fireworks-tools span { font-weight:bold; margin-right:auto; }
.fireworks-tools button { background:#f3be6b; color:#081622; border:0; border-radius:3px; padding:5px 9px; cursor:pointer; }
.fireworks-tools a { color:#f3be6b; text-decoration:none; }
#cube.overview .fireworks-frame { opacity:.5; }
#cube.overview .fireworks-tools { opacity:.65; }
body.matrix-mode .fireworks-desktop>.wallpaper { visibility:visible; }
body.matrix-mode .fireworks-frame, body.matrix-mode .fireworks-tools { visibility:hidden; pointer-events:none !important; }
#vol-pop label.mute-control { flex-direction:row; align-items:center; margin-top:8px; gap:6px; }
#dock { position:absolute; z-index:60; bottom:14px; left:50%; transform:translateX(-50%); display:flex; align-items:flex-end; gap:12px; padding:10px 18px 7px; border:1px solid rgba(255,255,255,.35); border-radius:14px; background:linear-gradient(rgba(210,229,244,.32),rgba(75,102,126,.3)); box-shadow:0 8px 24px #0009,inset 0 1px 0 #ffffff66; backdrop-filter:blur(14px); }
.dock-app { position:relative; flex:none; width:48px; height:54px; padding:0 0 6px; border:0; background:transparent; cursor:pointer; transform:translateX(var(--dock-shift,0px)) scale(var(--dock-scale,1)); transform-origin:50% 100%; transition:transform .13s ease-out; }
.dock-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:10px; background:linear-gradient(#ffffff33,#ffffff08); box-shadow:0 3px 6px #0007,inset 0 1px #ffffff66; }
.dock-icon svg { width:38px; height:38px; filter:drop-shadow(0 2px 2px #0008); }
.dock-running { position:absolute; bottom:0; left:22px; width:4px; height:4px; border-radius:50%; background:transparent; }
.dock-app.running .dock-running { background:#edf8ff; box-shadow:0 0 4px #b8e4ff; }
.dock-app.has-minimized .dock-running { background:#ffc87b; }
.dock-label { position:absolute; left:50%; bottom:65px; transform:translateX(-50%); background:#172531ee; border:1px solid #ffffff55; color:#fff; border-radius:5px; padding:4px 7px; font-size:10px; white-space:nowrap; opacity:0; pointer-events:none; }
.dock-app:hover .dock-label,.dock-app:focus-visible .dock-label { opacity:1; }
#hint { bottom:98px; }
@media(max-width:480px) { #dock { gap:5px; padding-inline:8px; bottom:8px; } .dock-app { width:40px; } .dock-icon { width:40px; height:40px; } .dock-icon svg { width:32px; height:32px; } #hint { font-size:9px; } }
@media(prefers-reduced-motion:reduce) { .dock-app { transition:none; transform:none; } }
body { --chrome-bg:#303c49; --chrome-ink:#f4f1ea; --chrome-active:#715331; --chrome-edge:#6d8495; }
body[data-ui-theme="light"] { --chrome-bg:#dce5ed; --chrome-ink:#13293d; --chrome-active:#a7cbe4; --chrome-edge:#8ea5b9; }
body[data-ui-theme="brown"] { --chrome-bg:#513c2f; --chrome-ink:#fff0da; --chrome-active:#946c40; --chrome-edge:#b39776; }
body[data-ui-theme="blue"] { --chrome-bg:#163b55; --chrome-ink:#e8f6ff; --chrome-active:#237fab; --chrome-edge:#66a9c7; }
body[data-ui-theme="starship"] { --chrome-bg:#10101c; --chrome-ink:#ffc281; --chrome-active:#754b83; --chrome-edge:#cf9bc2; --ui:Tahoma,Arial,sans-serif; }
#panel,.titlebar,.menu { background:linear-gradient(#ffffff22,transparent),var(--chrome-bg); color:var(--chrome-ink); border-color:var(--chrome-edge); }
.window.focused .titlebar,.task.active { background:linear-gradient(#ffffff22,transparent),var(--chrome-active); }
.menu button { color:var(--chrome-ink); }
#dock { background:linear-gradient(#ffffff33,#ffffff09),var(--chrome-bg); border-color:var(--chrome-edge); }
body[data-ui-theme="starship"] #panel { border-bottom:3px solid #eaaa60; }
body[data-ui-theme="starship"] .titlebar { border-radius:14px 14px 0 0; letter-spacing:.05em; }
.theme-settings { height:100%; overflow:auto; padding:16px; background:#f4f1eb; color:#172536; }
.theme-settings h2 { margin:0 0 9px; font-size:16px; }
.theme-settings p { font-size:12px; line-height:1.5; }
.theme-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:12px 0 22px; }
.theme-choice { padding:10px 5px; border:2px solid #aab5bf; border-radius:6px; background:#fff; color:#182533; cursor:pointer; }
.theme-choice::before { content:''; display:block; height:35px; margin-bottom:6px; background:var(--swatch); border-radius:3px; }
.theme-choice[aria-pressed="true"] { border-color:#247abc; box-shadow:0 0 0 1px #247abc; }
.wallpaper-options { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.wallpaper-options button,.choose-wallpaper { padding:6px 9px; color:#122534; background:#dce8f1; border:1px solid #8fa8bb; border-radius:3px; cursor:pointer; }
.wallpaper-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.has-photo>.wallpaper { visibility:hidden; }
.fireworks-desktop.has-photo .fireworks-frame,.fireworks-desktop.has-photo .fireworks-tools,.fireworks-desktop.wallpaper-override .fireworks-frame,.fireworks-desktop.wallpaper-override .fireworks-tools { visibility:hidden; pointer-events:none; }
.fireworks-desktop.wallpaper-override:not(.has-photo)>.wallpaper { visibility:visible; }
#cube.overview .wallpaper-photo { opacity:.2; }
body.matrix-mode .wallpaper-photo { visibility:hidden; }
body.matrix-mode .has-photo>.wallpaper { visibility:visible; }
.fireworks-background { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at bottom,#142b42,#030712 75%); }
#cube.overview .fireworks-background { opacity:.5; }
body.matrix-mode .fireworks-background,.fireworks-desktop.has-photo .fireworks-background,.fireworks-desktop.wallpaper-override .fireworks-background { visibility:hidden; }
.fireworks-invitation { padding:18px; text-align:center; height:100%; overflow:auto; }
.fireworks-invitation img { width:100%; max-width:270px; height:90px; object-fit:contain; }
.fireworks-invitation p { margin:10px 0; }
.fireworks-invitation a { display:inline-block; padding:9px 14px; border-radius:5px; background:#efb75f; color:#14202c; font-weight:bold; }
body[data-ui-theme="starship"] .window { border-radius:6px; }
body[data-ui-theme="starship"] .window .titlebar { border-radius:5px 5px 0 0; }
body[data-ui-theme="starship"] .window .body { border-radius:0 0 5px 5px; }
.wallpaper-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.wallpaper-options .wallpaper-choice { padding:0; overflow:hidden; text-align:left; }
.wallpaper-choice img { display:block; width:100%; height:90px; object-fit:cover; }
.wallpaper-choice span { display:block; padding:7px 9px; }
.fireworks-invitation { background:#000; color:#fff; }
.fireworks-invitation a { margin:4px; }
.fireworks-invitation a + a { background:#202020; color:#fff; border:1px solid #777; }
.dock-app.selected .dock-icon { background:linear-gradient(#ffffff99,#88d6ff55); box-shadow:0 0 0 2px #bce8ff,0 0 18px 5px #63caff88,inset 0 1px 0 #fff; }
.dock-app.selected .dock-running { background:#bce8ff; box-shadow:0 0 8px 3px #63caffaa; }
/* Keep reflection effects off the cube: they flatten its preserve-3d layers. */
#viewport:has(#cube.overview) { background:linear-gradient(transparent 65%,rgba(120,170,200,.09) 87%,rgba(180,215,240,.16)); }
.menu button:disabled { opacity:.55; cursor:default; }

#vol-pop { background:var(--chrome-bg); color:var(--chrome-ink); border-color:var(--chrome-edge); } #vol-pop label { color:inherit; }