/* Screen palette: one ink on one paper, after industrial terminal UIs. Dark mode inverts it. */
:root {
  color-scheme: light;
  --paper: #e4dfbf;
  --paper-hi: #efebd3;
  --paper-2: #d6d0ac;
  --ink: #262a26;
  --ink-soft: #484c44;
  --ink-dim: #7e7d69;
  --rule: #262a26;
  --rule-soft: #262a2640;
  --scan: #0000001c;
  --vignette: #1a1c1888;
  --crt: .45;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --logo: "Archivo Black", "Arial Black", sans-serif;
  --label: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --fs: 12.5px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #191b18;
  --paper-hi: #20231f;
  --paper-2: #262a24;
  --ink: #ddd7b6;
  --ink-soft: #b4af94;
  --ink-dim: #78765f;
  --rule: #ddd7b6;
  --rule-soft: #ddd7b633;
  --scan: #00000040;
  --vignette: #000c;
  --crt: .7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #191b18;
    --paper-hi: #20231f;
    --paper-2: #262a24;
    --ink: #ddd7b6;
    --ink-soft: #b4af94;
    --ink-dim: #78765f;
    --rule: #ddd7b6;
    --rule-soft: #ddd7b633;
    --scan: #00000040;
    --vignette: #000c;
    --crt: .7;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; }
body { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
a { color: inherit; }

.home { min-height: 100vh; background: #080808; color: var(--ink); font: var(--fs)/1.5 var(--mono); }
.site-shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

/* ── Stage + monitor (desktop) ─────────────────────────────── */
.deck-stage { position: relative; flex: 1; display: grid; place-items: center; overflow: hidden; padding: 20px 16px; background: #070707; }
.shader-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cyberdeck { position: relative; z-index: 1; width: min(100%, 1240px, calc((100dvh - 40px) * 1.127)); aspect-ratio: 1154 / 1024; filter: drop-shadow(0 30px 40px #000b) drop-shadow(0 0 60px #e4dfbf1a); }
.cyberdeck::after { content: ""; position: absolute; inset: 0; z-index: 10; pointer-events: none; background: url('/crt-frame.webp') center / 100% 100% no-repeat; }
/* Matches the transparent glass in crt-frame.webp, tucked just under the bezel. */
.deck-housing { position: absolute; inset: 10.8% 10.3% 25.8% 10.6%; container: screen / size; }
.deck-screen { position: relative; display: flex; width: 100%; height: 100%; overflow: hidden; border-radius: 5.5% / 7.5%; background: var(--paper); }
.deck-screen::before, .deck-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.deck-screen::before { z-index: 8; background: radial-gradient(ellipse 55% 35% at 16% 6%, #ffffff14, transparent 70%); box-shadow: inset 0 0 40px 6px var(--vignette), inset 0 0 120px #0004; }
.deck-screen::after { z-index: 6; background: repeating-linear-gradient(to bottom, transparent 0 2px, var(--scan) 2px 3px); }
/* Bloom: a blurred, brightened copy of what's behind, laid over at low strength. */
.crt-bloom { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; -webkit-backdrop-filter: blur(5px) brightness(1.25) saturate(1.2); backdrop-filter: blur(5px) brightness(1.25) saturate(1.2); opacity: .22; }
/* Glow and a hair of chromatic aberration on everything drawn on the tube. */
.deck-housing .os-shell, .deck-housing .boot-screen, .deck-housing .lock-screen { text-shadow: .6px 0 0 #ff2a0030, -.6px 0 0 #00a0ff30, 0 0 4px var(--rule-soft); }
.crt-shader { position: absolute; inset: 0; z-index: 7; width: 100%; height: 100%; pointer-events: none; opacity: var(--crt); }

/* ── Desktop ───────────────────────────────────────────────── */
.os-shell { position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; background: radial-gradient(ellipse at 50% 40%, var(--paper-hi), var(--paper) 70%); }
/* Overscan: keep the flat UI inside the curved glass so no corner gets clipped. */
.deck-housing .os-shell { padding: 4cqh 3.6cqw 3.6cqh; }

.wm-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; flex: none; border: 1px solid var(--rule); font: 600 13px/1 var(--label); letter-spacing: .08em; text-transform: uppercase; }
.wm-cell { display: flex; align-items: center; min-height: 28px; }
.wm-cell + .wm-cell { border-left: 1px solid var(--rule); }
.wm-workspaces button { display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 12px; border: 0; background: transparent; cursor: pointer; letter-spacing: inherit; text-transform: inherit; }
.wm-workspaces button b { font-family: var(--mono); font-size: 10px; }
.wm-workspaces button:hover { background: var(--paper-2); }
.wm-workspaces button[aria-current="page"] { background: var(--ink); color: var(--paper); }
.wm-title { justify-content: center; overflow: hidden; padding: 0 12px; white-space: nowrap; }
.wm-status { gap: 12px; padding-left: 12px; white-space: nowrap; }
.wm-host, #wm-clock { color: var(--ink-soft); }
.wm-theme { align-self: stretch; padding: 0 12px; border: 0; border-left: 1px solid var(--rule); background: transparent; cursor: pointer; letter-spacing: inherit; text-transform: inherit; }
.wm-theme::before { content: "◐ "; }
.wm-theme:hover { background: var(--ink); color: var(--paper); }

.wm-desktop { position: relative; flex: 1; min-height: 0; }
.workspace { height: 100%; }
.ws-home { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; }
.tile-stack { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; min-height: 0; }

/* Panels: thin rule with a solid label tab, like "SYSTEM CONSOLE". */
.tile { display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 1px solid var(--rule); }
.tile-title { display: flex; align-items: baseline; gap: 10px; flex: none; margin: -1px -1px 0; padding: 3px 9px 2px; background: var(--ink); color: var(--paper); font: 600 12px/1.2 var(--label); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.tile-title small { overflow: hidden; opacity: .7; font: 500 11px/1 var(--mono); letter-spacing: 0; text-overflow: ellipsis; text-transform: none; }

/* Shell */
.shell { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; cursor: text; scrollbar-width: thin; scrollbar-color: var(--ink-dim) transparent; }
.shell-output > div { min-height: 1.5em; white-space: pre-wrap; overflow-wrap: anywhere; }
.shell-output a { text-decoration: underline; text-underline-offset: 2px; }
.shell-output a:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.shell-line { display: flex; align-items: baseline; gap: .6em; }
.shell-prompt { flex: none; white-space: pre; }
.shell-prompt b, .c-user { font-weight: 700; }
.shell-prompt i, .c-dir { font-style: normal; font-weight: 700; }
.c-dir { text-decoration: underline; text-underline-offset: 2px; }
#shell-input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; caret-color: var(--ink); }
.c-key { padding: 0 2px; background: var(--ink); color: var(--paper); }
.c-dim { color: var(--ink-dim); }
.c-logo { font-weight: 700; }


/* Logo: heavy blocky capitals cut by even bars, after Paul Rand's IBM mark. */
.logo { --stripe-ink: var(--ink); display: inline-flex; flex-direction: column; align-items: flex-start; color: var(--stripe-ink); }
.logo b { --stripes: repeating-linear-gradient(to bottom, #000 0 56%, transparent 56% 100%); font: 700 1em/1 var(--logo); letter-spacing: -.01em; color: var(--stripe-ink); -webkit-mask: var(--stripes) 0 .21em / 100% .09em; mask: var(--stripes) 0 .21em / 100% .09em; }
.logo small { align-self: flex-end; margin: .16em -.9em 0 0; font: 700 .2em/1 var(--logo); letter-spacing: .9em; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.files-heading { display: flex; align-items: baseline; gap: .1em; margin: 0; font-size: clamp(28px, 4.4cqi, 42px); }
.files-tld { color: var(--ink-dim); font: 600 .5em/1 var(--label); letter-spacing: .08em; text-transform: uppercase; }
.brand { display: flex; align-items: center; gap: 6px; }
.d-mark { flex: none; width: 1.6em; height: 1.6em; }
.brand .d-mark { width: 34px; height: 34px; }
.wm-mark { font-size: 24px; align-items: flex-end; }
.post-logo { --stripe-ink: #e8e6d6; position: absolute; top: 6cqh; right: 6cqw; align-items: flex-end; font-size: 34px; }

/* Applications list: rows like a system console. */
.files { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 14px 12px; }
.files-lead { margin: 6px 0 12px; color: var(--ink-soft); }
.file-list { margin: 0; padding: 0; border: 1px solid var(--rule); list-style: none; }
.file-list li + li { border-top: 1px solid var(--rule); }
.file-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; text-decoration: none; }
.file-row:hover, .file-row:focus-visible { background: var(--ink); color: var(--paper); outline: 0; }
.file-row:hover .file-copy small, .file-row:focus-visible .file-copy small, .file-row:hover .file-meta { color: inherit; opacity: .8; }
.file-copy { display: flex; flex-direction: column; min-width: 0; }
.file-copy strong { font: 600 17px/1.15 var(--label); letter-spacing: .06em; text-transform: uppercase; }
.file-copy small { color: var(--ink-soft); font-size: 11.5px; }
.file-meta { color: var(--ink-dim); font: 600 11px/1 var(--label); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

/* Status card: big inverted numeral. */
.tile-readme { min-height: 0; }
.readme { min-height: 0; overflow-y: auto; padding: 12px 14px; color: var(--ink-soft); scrollbar-width: thin; }
.readme p { margin: 0 0 8px; }
.status-card { display: flex; align-items: stretch; margin-bottom: 10px; border: 1px solid var(--rule); }
.status-number { padding: 2px 12px 0; background: var(--ink); color: var(--paper); font: 500 44px/1 var(--label); letter-spacing: .02em; }
.status-label { display: flex; align-items: center; padding: 0 12px; color: var(--ink); font: 600 14px/1.1 var(--label); letter-spacing: .1em; text-transform: uppercase; }
.status-log { margin: 0 !important; color: var(--ink-dim); font-size: 10.5px; line-height: 1.5; }
.status-log kbd { padding: 0 2px; background: var(--ink); color: var(--paper); font: inherit; }

/* Footer: technical small print and the wordmark. */
.wm-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex: none; }
.wm-footer-log { color: var(--ink-dim); font-size: 9.5px; line-height: 1.4; white-space: nowrap; overflow: hidden; }

/* Buttons */
.wm-button { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 16px; border: 1px solid var(--rule); background: transparent; cursor: pointer; font: 600 13px/1 var(--label); letter-spacing: .1em; text-transform: uppercase; }
.wm-button:hover { background: var(--ink); color: var(--paper); }
.wm-button:disabled { opacity: .5; cursor: progress; }

/* Board workspace */
.board-panel { height: 100%; }
.board-body { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(0, 3fr); flex: 1; min-height: 0; }
.board-form { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-right: 1px solid var(--rule); }
.board-intro { margin: 0 0 8px; color: var(--ink-soft); }
.board-form label { font: 600 12px/1 var(--label); letter-spacing: .1em; text-transform: uppercase; }
.board-form input, .board-form textarea { width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid var(--rule); border-radius: 0; background: var(--paper-hi); resize: vertical; }
.board-form input:focus, .board-form textarea:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
.board-form input::placeholder, .board-form textarea::placeholder { color: var(--ink-dim); }
.board-form .wm-button { align-self: flex-start; margin-top: 6px; }
.board-log { min-height: 0; overflow-y: auto; padding: 14px 16px; scrollbar-width: thin; }
.board-feedback { margin: 0 0 10px; color: var(--ink-dim); font: 600 12px/1 var(--label); letter-spacing: .1em; text-transform: uppercase; }
.board-messages { display: grid; gap: 0; border-top: 1px solid var(--rule-soft); }
.board-entry { padding: 8px 0; border-bottom: 1px solid var(--rule-soft); }
.board-entry > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.board-entry strong { font-weight: 700; }
.board-entry time { color: var(--ink-dim); font-size: 10.5px; }
.board-entry p, .board-empty { margin: 2px 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.board-empty { padding: 10px 0; color: var(--ink-dim); }

/* Metal tilted D on the front of the monitor. */
.cyberdeck { container-type: inline-size; }
.badge { position: absolute; z-index: 11; left: 50%; top: 79.2%; width: 4.4cqw; height: 4.4cqw; transform: translate(-50%, -50%); filter: drop-shadow(0 1px 0 #ffffff30) drop-shadow(0 2px 2px #000c); pointer-events: none; }

/* ── Power: the LED is the switch; the tube collapses to a line on shutdown and warms up on boot. */
.power-button { position: absolute; z-index: 11; left: 77.82%; top: 85.89%; width: 4%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transform: translate(-50%, -50%); }
.power-led { position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 40% 35%, #ffe7b4, #ffae3c 45%, #c46a10 78%); box-shadow: 0 0 6px 2px #ffae3c99, 0 0 20px 7px #ff9a2a40; transition: background .25s, box-shadow .25s; }
.power-button:hover .power-led { box-shadow: 0 0 8px 3px #ffae3ccc, 0 0 26px 9px #ff9a2a55; }
.power-button[aria-pressed="false"] .power-led { background: radial-gradient(circle at 40% 35%, #5d4c36, #2b251d 60%, #16130f); box-shadow: inset 0 1px 1px #000a; }
.power-button[aria-pressed="false"]:hover .power-led { box-shadow: inset 0 1px 1px #000a, 0 0 6px 1px #ffae3c33; }
.power-button.is-busy .power-led { animation: led-blink .45s steps(1) infinite; }
.power-button:focus-visible { outline: 2px solid #e4dfbf; outline-offset: 3px; }
@keyframes led-blink { 50% { opacity: .3; } }

.deck-screen[data-power="off"], .deck-screen[data-power="shutting"], .deck-screen[data-power="booting"] { background: #0a0b0a; }
.deck-screen[data-power="off"] .os-shell, .deck-screen[data-power="booting"] .os-shell { visibility: hidden; }
.deck-screen[data-power="off"]::after, .deck-screen[data-power="off"] .crt-shader { opacity: 0; }
.deck-screen[data-power="off"] { cursor: pointer; }
.deck-screen[data-power="shutting"] .os-shell { animation: crt-collapse .3s cubic-bezier(.7, 0, 1, 1) forwards; }
.crt-beam { position: absolute; z-index: 9; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; opacity: 0; pointer-events: none; background: #fffbe9; box-shadow: 0 0 8px 2px #fff6d0cc, 0 0 32px 8px #fff2c055; }
.deck-screen[data-power="shutting"] .crt-beam { animation: beam-off 1s .26s ease-in forwards; }
.deck-screen[data-power="booting"] .crt-beam { animation: beam-on .55s ease-out forwards; }
.boot-screen { position: absolute; inset: 0; z-index: 2; overflow: hidden; animation: boot-open .35s .32s cubic-bezier(.2, .8, .3, 1) both; }
/* POST: always the classic grey-on-black BIOS screen. */
.post { position: absolute; inset: 0; padding: 6cqh 6cqw; background: #050605; color: #c9c9bd; }
.post pre { margin: 0; font: 12px/1.5 var(--mono); white-space: pre-wrap; }
.post pre::after { content: "_"; animation: led-blink .8s steps(1) infinite; }
/* Boot transition: the tilted D. */
.boot-mark { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, var(--paper-hi), var(--paper) 70%); color: var(--ink); }
/* Warp: faint streaks rush outward from the hole as the dive speeds up. */
.boot-mark::before, .boot-mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 260cqw; height: 260cqw; margin: -130cqw 0 0 -130cqw; pointer-events: none; opacity: 0; -webkit-mask: radial-gradient(circle, transparent 0 6%, #000 22%, #000 40%, transparent 62%); mask: radial-gradient(circle, transparent 0 6%, #000 22%, #000 40%, transparent 62%); }
.boot-mark::before { background: repeating-conic-gradient(from 0deg, var(--ink) 0 .25deg, transparent .25deg 5deg); animation: warp 2.8s linear both; }
.boot-mark::after { background: repeating-conic-gradient(from 2.3deg, var(--ink) 0 .18deg, transparent .18deg 8.5deg); animation: warp 2.8s linear both; animation-name: warp-far; }
@keyframes warp { 0%, 52% { opacity: 0; transform: scale(.35); } 72% { opacity: .16; } 94% { opacity: .3; transform: scale(1.6) rotate(2deg); } 100% { opacity: 0; transform: scale(2) rotate(2deg); } }
@keyframes warp-far { 0%, 60% { opacity: 0; transform: scale(.25) rotate(-1deg); } 80% { opacity: .12; } 96% { opacity: .22; transform: scale(1.4); } 100% { opacity: 0; transform: scale(1.7); } }
.boot-mark .d-mark { position: relative; z-index: 1; width: 30cqh; height: 30cqh; transform-origin: 51.6% 48.4%; animation: d-turn 2.8s linear both; }
@keyframes d-turn {
  0% { opacity: 0; transform: rotate(-135deg) scale(.1); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  14% { opacity: 1; }
  32% { transform: rotate(10deg) scale(1.05); animation-timing-function: ease-in-out; }
  42% { transform: rotate(0) scale(1); }
  /* Hold, then dive: scale grows roughly exponentially so the fall keeps accelerating. */
  52% { transform: rotate(0) scale(1); animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  72% { transform: rotate(0) scale(2.6); animation-timing-function: cubic-bezier(.4, 0, .9, .7); }
  88% { transform: rotate(0) scale(8); animation-timing-function: ease-in; }
  100% { transform: rotate(0) scale(30); }
}
/* Splash: DANB0ND in blocks cascades in, a glint passes, then the progress bar fills. */
.splash { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6cqh; background: radial-gradient(ellipse at 50% 45%, var(--paper-hi), var(--paper) 70%); color: var(--ink); }
.splash-version { margin-top: 1cqh; color: var(--ink-soft); font: 500 12px/1 var(--label); letter-spacing: .18em; text-transform: uppercase; animation: rise .5s 1.3s ease-out both; }
.splash-bar { display: block; width: min(320px, 46cqw); height: 14px; margin-top: 1.5cqh; padding: 2px; border: 1px solid var(--rule); animation: rise .4s 1.6s ease-out both; }
.splash-bar i { display: block; width: 0; height: 100%; background: repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 10px); transition: width .18s steps(3); }
.splash-note { color: var(--ink-dim); font: 600 11px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; animation: rise .4s 1.6s ease-out both; }
.splash-legal { position: absolute; bottom: 5cqh; color: var(--ink-dim); font-size: 9.5px; }
.splash-logo { position: relative; overflow: hidden; padding: .05em .1em; font-size: clamp(56px, 19cqh, 130px); }
.splash-logo b { animation: logo-sweep .9s .15s cubic-bezier(.2, .8, .2, 1) both, stripes-in 1.1s .15s ease-out both; }
.splash-logo small { animation: spread 1s .7s cubic-bezier(.2, .8, .2, 1) both; }
.splash-logo::after { content: ""; position: absolute; inset: -20% auto -20% -40%; width: 22%; background: linear-gradient(100deg, transparent, var(--paper-hi) 50%, transparent); opacity: .9; transform: skewX(-18deg); animation: glint .8s 1.2s ease-in-out both; }
@keyframes logo-sweep { from { clip-path: inset(0 100% 0 0); transform: translateX(-6%); } to { clip-path: inset(0 -10% 0 0); transform: none; } }
@keyframes stripes-in { from { -webkit-mask-size: 100% .02em; mask-size: 100% .02em; } to { -webkit-mask-size: 100% .09em; mask-size: 100% .09em; } }
@keyframes spread { from { opacity: 0; letter-spacing: 0; } to { opacity: 1; letter-spacing: .9em; } }
@keyframes glint { from { left: -40%; } to { left: 120%; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.deck-screen.is-revealing .os-shell { animation: shell-in .55s ease-out both; }
@keyframes crt-collapse {
  0% { transform: none; filter: none; }
  70% { filter: brightness(1.6) contrast(.7); }
  100% { transform: scale(1, .004); filter: brightness(4); }
}
@keyframes beam-off {
  0% { opacity: 1; transform: scaleX(1); }
  40% { opacity: 1; transform: scaleX(.006); }
  100% { opacity: 0; transform: scaleX(.006); }
}
@keyframes beam-on {
  0% { opacity: 0; transform: scaleX(.006); }
  20% { opacity: 1; transform: scaleX(.006); }
  60% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
@keyframes boot-open {
  from { transform: scale(1, .004); filter: brightness(3); }
  to { transform: none; filter: none; }
}
@keyframes shell-in {
  0% { opacity: 0; filter: brightness(1.8); }
  25% { opacity: .7; }
  35% { opacity: .25; }
  100% { opacity: 1; filter: none; }
}

.boot-skip { position: absolute; z-index: 3; right: 6cqw; bottom: 5cqh; color: #8d8b7c; font: 600 10px/1 var(--label); letter-spacing: .16em; text-transform: uppercase; animation: led-blink 1.6s steps(1) infinite; }
.splash ~ .boot-skip, .boot-screen:has(.splash:not([hidden])) .boot-skip { color: var(--ink-dim); }
/* First visit: hold the desktop back until the boot sequence reveals it. */
.will-boot .deck-screen { background: #0a0b0a; }
.will-boot .os-shell { visibility: hidden; }

/* ── Screensaver + lock screen ─────────────────────────────── */
.saver-canvas { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; }
.saver-logo { position: absolute; z-index: 5; left: 0; top: 0; font-size: clamp(28px, 7cqh, 52px); filter: drop-shadow(0 0 6px var(--paper)) drop-shadow(0 0 2px var(--paper)); will-change: transform; }
.lock-screen { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2cqh; padding: 5cqh 6cqw; background: radial-gradient(ellipse at 50% 40%, var(--paper-hi), var(--paper) 70%); color: var(--ink); animation: rise .35s ease-out both; }
.lock-mark { width: clamp(40px, 11cqh, 72px); height: clamp(40px, 11cqh, 72px); }
.lock-logo { font-size: clamp(22px, 5cqh, 36px); margin-bottom: 1cqh; align-items: center; }
.lock-time { font: 500 clamp(56px, 17cqh, 120px)/.9 var(--label); letter-spacing: .02em; }
.lock-date { color: var(--ink-soft); font: 600 13px/1 var(--label); letter-spacing: .16em; text-transform: uppercase; }
.lock-box { width: min(340px, 80%); margin-top: 3cqh; background: var(--paper); }
.lock-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px 14px; }
.lock-user { font-weight: 700; }
.lock-hint { color: var(--ink-dim); font-size: 11.5px; }

/* ── Background-only view ───────────────────────────────────── */
.view-toggle { position: fixed; z-index: 20; right: 16px; bottom: 14px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid #e4dfbf55; background: #0b0c0bcc; color: #e4dfbf; cursor: pointer; font: 600 11px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; backdrop-filter: blur(6px); opacity: .6; transition: opacity .2s, background .2s; }
.view-toggle:hover, .view-toggle:focus-visible { opacity: 1; background: #e4dfbf; color: #0b0c0b; }
.view-toggle span { width: 12px; height: 9px; border: 1.5px solid currentColor; border-radius: 2px; }
.is-bg-only .view-toggle span { border-style: dashed; }
.cyberdeck { transition: opacity .5s ease, transform .5s ease, filter .5s ease; }
.is-bg-only .cyberdeck { opacity: 0; transform: scale(.94); pointer-events: none; }

/* Short CRT screens */
@container screen (max-height: 520px) {
  .os-shell { --fs: 11.5px; gap: 6px; font-size: 11.5px; }
  .tile-readme, .wm-footer-log { display: none; }
  .shell { padding: 8px 10px; font-size: 10.5px; }
  .wm-mark { font-size: 19px; }
  .brand .d-mark { width: 26px; height: 26px; }
  .ws-home { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .tile-stack { grid-template-rows: minmax(0, 1fr); }
  .files { padding: 10px; }
  .file-row { padding: 7px 10px; }
}
@container screen (max-width: 860px) {
  .file-meta { display: none; }
}
@container screen (max-width: 640px) {
  .wm-host { display: none; }
}

/* ── Phones + tablets: no monitor, the OS is the page (unless Monitor view is on) ── */
.mode-toggle { display: none; }
@media (max-width: 1024px) {
  .mode-toggle { position: fixed; z-index: 20; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #e4dfbf55; background: #0b0c0bcc; color: #e4dfbf; cursor: pointer; font: 600 11px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .mode-toggle span { width: 12px; height: 10px; border: 1.5px solid currentColor; border-radius: 3px 3px 1px 1px; box-shadow: 0 2px 0 -0.5px currentColor; }
  html:not(.crt-view) .mode-toggle { right: auto; left: 50%; transform: translateX(-50%); opacity: .75; }
  .crt-view .view-toggle { right: auto; left: max(12px, env(safe-area-inset-left)); gap: 0; padding: 8px; font-size: 0; }
  /* Monitor view on a small screen: the desktop is laid out at desktop size and scaled into the tube. */
  .crt-view .deck-stage { padding: 12px 10px 56px; }
  .crt-view .is-scaled .os-shell { position: absolute; left: 0; top: 0; padding: 24px 28px 22px; transform-origin: 0 0; }
}
@media (max-width: 1024px) {
  html:not(.crt-view) .home { background: var(--paper); }
  html:not(.crt-view) .deck-stage { display: block; padding: 0; background: none; }
  html:not(.crt-view) .shader-canvas, html:not(.crt-view) .crt-shader { display: none; }
  html:not(.crt-view) .cyberdeck { width: 100%; aspect-ratio: auto; filter: none; }
  html:not(.crt-view) .cyberdeck::after, html:not(.crt-view) .deck-screen::before, html:not(.crt-view) .deck-screen::after { display: none; }
  html:not(.crt-view) .deck-housing { position: static; container-type: normal; }
  html:not(.crt-view) .deck-screen { height: 100vh; height: 100dvh; border-radius: 0; }
  html:not(.crt-view) .power-button, html:not(.crt-view) .badge, html:not(.crt-view) .crt-bloom { display: none; }
  html:not(.crt-view) .deck-housing .os-shell, html:not(.crt-view) .deck-housing .boot-screen, html:not(.crt-view) .deck-housing .lock-screen { text-shadow: none; }
  html:not(.crt-view) .is-bg-only .shader-canvas { display: block; position: fixed; }
  .view-toggle { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
  html:not(.crt-view) .boot-screen { padding: 0; }
  html:not(.crt-view) .deck-screen[data-power="off"]::before { content: "Tap to power on"; display: grid; place-items: center; color: #8a8670; font: 600 13px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; }
  html:not(.crt-view) .os-shell { padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) calc(max(10px, env(safe-area-inset-bottom)) + 44px) max(10px, env(safe-area-inset-left)); }
}
@media (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) {
  html:not(.crt-view) .ws-home { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  html:not(.crt-view) .tile-stack { order: -1; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto; }
}
@media (max-width: 760px) {
  html:not(.crt-view) .home { --fs: 12px; }
  .view-toggle { right: auto; left: max(12px, env(safe-area-inset-left)); gap: 0; padding: 8px; font-size: 0; }
  html:not(.crt-view) .wm-bar { grid-template-columns: auto 1fr; }
  html:not(.crt-view) .wm-title { display: none; }
  html:not(.crt-view) .wm-status { justify-content: flex-end; }
  html:not(.crt-view) .wm-host, html:not(.crt-view) #wm-clock { display: none; }
  html:not(.crt-view) .ws-home { display: flex; flex-direction: column; overflow-y: auto; }
  html:not(.crt-view) .tile-stack { display: contents; }
  html:not(.crt-view) .tile-files { order: 1; flex: none; }
  html:not(.crt-view) .tile-shell { order: 2; flex: 1 0 340px; }
  html:not(.crt-view) .tile-readme { display: none; }
  html:not(.crt-view) .file-meta { display: none; }
  html:not(.crt-view) .wm-footer-log { display: none; }
  html:not(.crt-view) .wm-footer { justify-content: flex-end; }
  html:not(.crt-view) .board-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  html:not(.crt-view) .board-form { border-right: 0; border-bottom: 1px solid var(--rule); }
}
@media (prefers-reduced-motion: reduce) {
  .crt-shader { display: none; }
  .deck-screen .os-shell, .crt-beam, .boot-screen, .boot-screen *, .boot-screen *::after, .power-button .power-led { animation: none !important; }
}