/* Rim/OS look, after the Outer Rim Bookmaker brief: a brown plastic terminal on a desk, a curved CRT,
   a dithered late-90s desktop inside it, beige bevelled windows with plum title bars, and amber
   phosphor inside the windows. Switch state lives on <html> as data-crt / data-colour / data-sound / data-plain. */
:root {
  --desk: #cfc8ba;
  --plastic: #3e3a33; --plastic-hi: #5b554b; --plastic-lo: #221f1b;
  --engrave: #a59c8b;
  --screen-bg: #262c5e; --screen-dot: #303a78;
  --win: #c8c2b4; --win-hi: #f4efe4; --win-lo: #6b665b; --edge: #15130f;
  --title: #6a1d5e; --title-ink: #fff2d6;
  --btn: #b8321f; --btn-shadow: #6b1a0f; --btn-ink: #fff2dc;
  --lamp-off: #3f2a22; --lamp-on: #ff9a2e;
  --focus: #ff5fa8;
  --term: #140d03; --ph: #ffb347; --ph-dim: #a4702c; --odds: #ffcf6e;
  --glow: color-mix(in srgb, var(--ph) 45%, transparent);
  --f-pixel: "Silkscreen", "Courier New", monospace;
  --f-term: "VT323", "Courier New", monospace;
  --f-plain: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --body-font: var(--f-term); --body-size: 1.3rem; --body-lh: 1.22;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --desk: #1b1916; --engrave: #8d8576; color-scheme: dark; }
}
:root[data-theme="dark"] { --desk: #1b1916; --engrave: #8d8576; color-scheme: dark; }

/* The "colour monitor" upgrade: 16-colour phosphor, and each project gets its own accent (--acc). */
:root[data-colour="on"] { --term: #060b16; --ph: #cfeaff; --ph-dim: #6a8cab; --odds: #ffd166; }
:root[data-plain="on"] { --body-font: var(--f-plain); --body-size: 1.02rem; --body-lh: 1.6; }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--desk); color: var(--ph); font-family: var(--body-font); overflow: hidden; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px dashed var(--focus); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Housing ----------
   Drawn the way the windows are: square corners, a 1–2px near-black outline, solid bevel bands
   (light top-left, dark bottom-right) and a hard offset shadow. No soft gradients or round corners. */
:root { --ink-edge: #0e0c0a; --dither: #444038; --slot: #12100d; }
.rig { height: 100dvh; display: grid; place-items: center; padding: clamp(0px, 1.6vw, 22px) clamp(0px, 2.2vw, 30px) clamp(0px, 2.2vw, 30px) clamp(0px, 1.6vw, 22px); }
.terminal {
  width: 100%; max-width: 1440px; height: 100%; min-height: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px;
  padding: 14px 34px 18px;
  border: 2px solid var(--ink-edge);
  background:
    /* four corner screws: head, then the slot across it */
    linear-gradient(var(--slot), var(--slot)) left 15px top 18px / 7px 2px no-repeat,
    linear-gradient(var(--slot), var(--slot)) right 15px top 18px / 7px 2px no-repeat,
    linear-gradient(var(--slot), var(--slot)) left 15px bottom 18px / 7px 2px no-repeat,
    linear-gradient(var(--slot), var(--slot)) right 15px bottom 18px / 7px 2px no-repeat,
    radial-gradient(circle at 40% 38%, #b9b19f 0 1px, #7a7365 1.5px 3.5px, var(--slot) 4px 5px, transparent 5.5px) left 13px top 13px / 12px 12px no-repeat,
    radial-gradient(circle at 40% 38%, #b9b19f 0 1px, #7a7365 1.5px 3.5px, var(--slot) 4px 5px, transparent 5.5px) right 13px top 13px / 12px 12px no-repeat,
    radial-gradient(circle at 40% 38%, #b9b19f 0 1px, #7a7365 1.5px 3.5px, var(--slot) 4px 5px, transparent 5.5px) left 13px bottom 13px / 12px 12px no-repeat,
    radial-gradient(circle at 40% 38%, #b9b19f 0 1px, #7a7365 1.5px 3.5px, var(--slot) 4px 5px, transparent 5.5px) right 13px bottom 13px / 12px 12px no-repeat,
    /* cooling vents either side of the badge */
    repeating-linear-gradient(90deg, var(--slot) 0 4px, var(--plastic-hi) 4px 5px, transparent 5px 10px) left 46px top 17px / calc(50% - 200px) 14px no-repeat,
    repeating-linear-gradient(90deg, var(--slot) 0 4px, var(--plastic-hi) 4px 5px, transparent 5px 10px) right 46px top 17px / calc(50% - 200px) 14px no-repeat,
    /* moulded plastic, dithered rather than shaded */
    repeating-conic-gradient(var(--plastic) 0 25%, var(--dither) 0 50%) 0 0 / 4px 4px;
  box-shadow:
    inset 4px 4px 0 var(--plastic-hi), inset -4px -4px 0 var(--plastic-lo),
    inset 6px 6px 0 #4a453d, inset -6px -6px 0 #2e2a25,
    10px 10px 0 rgb(0 0 0 / 0.38);
}
.plate {
  justify-self: center; display: flex; align-items: center; gap: 10px;
  padding: 5px 10px 4px; background: repeating-linear-gradient(90deg, #b3ac9c 0 1px, #a69f90 1px 3px);
  border: 1px solid var(--ink-edge);
  font: 400 10px/1 var(--f-pixel); text-transform: uppercase; letter-spacing: 0.08em; color: #2b2720;
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.35);
  box-shadow: inset 1px 1px 0 #e6dfcf, inset -1px -1px 0 #6f695d, 3px 3px 0 rgb(0 0 0 / 0.35);
}
/* Three colour stripes on the badge */
.plate::after { content: ""; width: 26px; height: 9px; background: linear-gradient(#ff9a2e 0 33.3%, #b8321f 0 66.6%, #6a1d5e 0); box-shadow: 0 0 0 1px var(--ink-edge); }
.plate .name { margin: 0; font: 700 13px/1 var(--f-pixel); letter-spacing: 0.14em; }
.led { width: 7px; height: 7px; background: #67ff74; box-shadow: 0 0 0 1px var(--ink-edge), 0 0 7px #67ff74; }

/* The screen opening: a recessed square frame stepped down in two hard bands to the tube. */
.well {
  min-height: 0; display: grid; padding: 16px; background: #1f1c18;
  border: 2px solid var(--ink-edge);
  box-shadow:
    inset 4px 4px 0 var(--plastic-lo), inset -4px -4px 0 var(--plastic-hi),
    inset 8px 8px 0 #181512, inset -8px -8px 0 #36322b,
    -2px -2px 0 var(--plastic-lo), 2px 2px 0 var(--plastic-hi);
}
.crt { position: relative; min-height: 0; display: grid; border-radius: 10px / 14px; overflow: hidden; background: #000; isolation: isolate; box-shadow: 0 0 0 2px #000; }
.crt-inner { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; transform-origin: center; }
:root[data-crt="off"] .crt { border-radius: 0; }

/* Scanlines, vignette and a faint flicker over everything on the screen. */
.fx {
  position: absolute; inset: 0; z-index: 20; pointer-events: none;
  background:
    radial-gradient(ellipse 120% 90% at 30% 18%, rgb(255 255 255 / 0.05), transparent 45%),
    radial-gradient(ellipse at center, transparent 58%, rgb(0 0 0 / 0.5) 100%),
    repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.2) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 60px rgb(0 0 0 / 0.55);
}
:root[data-crt="off"] .fx { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .fx { animation: flicker 7s steps(1) infinite; }
  @keyframes flicker { 0%, 100% { opacity: 1; } 41% { opacity: 0.86; } 42% { opacity: 1; } 77% { opacity: 0.93; } 78% { opacity: 1; } }
  .crt-inner.boot { animation: power-on 1s cubic-bezier(.2, .7, .3, 1) both; }
  .crt-inner.boot-quick { animation: power-on-quick 0.32s ease-out both; }
  .crt-inner.power-off { animation: power-off 0.26s ease-in both; }
  @keyframes power-on {
    0% { transform: scale(0.02, 0.004); filter: brightness(5); }
    22% { transform: scale(1, 0.004); filter: brightness(4); }
    55% { transform: scale(1, 1.03); filter: brightness(1.7); }
    100% { transform: none; filter: none; }
  }
  @keyframes power-on-quick { 0% { transform: scale(1, 0.01); filter: brightness(3); } 100% { transform: none; filter: none; } }
  @keyframes power-off { 0% { transform: none; } 70% { transform: scale(1, 0.006); filter: brightness(3); } 100% { transform: scale(0, 0.004); filter: brightness(5); } }
}

/* ---------- Desktop ---------- */
.screen {
  position: relative; min-height: 0; overflow-y: auto; overflow-x: hidden;
  background: repeating-conic-gradient(var(--screen-bg) 0 25%, var(--screen-dot) 0 50%) 0 0 / 4px 4px;
  scrollbar-color: var(--win) var(--screen-dot);
}
@media (prefers-reduced-motion: no-preference) { .screen { scroll-behavior: smooth; } }
.screen::-webkit-scrollbar { width: 16px; }
.screen::-webkit-scrollbar-track { background: repeating-conic-gradient(var(--win) 0 25%, var(--win-hi) 0 50%) 0 0 / 2px 2px; }
.screen::-webkit-scrollbar-thumb { background: var(--win); border: 1px solid var(--edge); box-shadow: inset 2px 2px 0 var(--win-hi), inset -2px -2px 0 var(--win-lo); }

.desktop {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1.5rem;
  padding: 1.5rem clamp(16px, 3vw, 2.25rem) 2.5rem; max-width: 66rem; margin: 0 auto;
}
.icons { position: sticky; top: 1.5rem; align-self: start; display: grid; gap: 1.1rem; justify-items: center; }
.icon {
  display: grid; justify-items: center; gap: 5px; width: 5.5rem; padding: 4px 2px;
  font: 400 10px/1.25 var(--f-pixel); color: #fff; text-align: center; text-decoration: none; word-break: break-word;
}
.icon svg { width: 34px; height: 34px; shape-rendering: crispEdges; filter: drop-shadow(2px 2px 0 rgb(0 0 0 / 0.45)); }
.icon span { padding: 1px 3px; }
.icon:hover span, .icon:focus-visible span { background: var(--title); }
.windows { display: grid; gap: 2rem; min-width: 0; align-content: start; }

.folder-label {
  justify-self: start; display: flex; align-items: center; gap: 8px; margin: 0.6rem 0 -0.8rem;
  font: 400 11px/1 var(--f-pixel); color: #fff; letter-spacing: 0.06em;
}
.folder-label svg { width: 18px; height: 18px; shape-rendering: crispEdges; }

/* ---------- Windows ---------- */
.win {
  display: grid; gap: 3px; padding: 4px; scroll-margin-top: 1.25rem; min-width: 0;
  background: var(--win); border: 1px solid var(--edge);
  box-shadow: inset 2px 2px 0 var(--win-hi), inset -2px -2px 0 var(--win-lo), 5px 5px 0 rgb(8 6 20 / 0.6);
}
.win:focus { outline: none; }
.titlebar {
  display: flex; align-items: center; gap: 8px; padding: 3px 3px 3px 6px;
  background: var(--title); color: var(--title-ink); font: 400 11px/1.3 var(--f-pixel);
}
.titlebar .ttl { margin: 0; font: inherit; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titlebar .glyph { width: 14px; height: 14px; flex: none; shape-rendering: crispEdges; }
/* Minimise folds the window up to its title bar; the glyph swaps to a restore box. */
.tb-min {
  display: grid; place-items: center; flex: none; width: 17px; height: 15px; padding: 0; cursor: pointer; color: var(--edge);
  background: var(--win); border: 1px solid var(--edge); box-shadow: inset 1px 1px 0 var(--win-hi), inset -1px -1px 0 var(--win-lo);
}
.tb-min::before { content: ""; width: 7px; height: 2px; margin-top: 6px; background: currentColor; }
.tb-min[aria-expanded="false"]::before { width: 7px; height: 6px; margin-top: 0; background: transparent; border: 1px solid currentColor; border-top-width: 2px; }
.tb-min:active { box-shadow: inset 1px 1px 0 var(--win-lo), inset -1px -1px 0 var(--win-hi); }
.win.min > :not(.titlebar) { display: none; }
.titlebar { user-select: none; }
.menubar { display: flex; gap: 2px; padding: 1px 2px; font: 400 10px/1 var(--f-pixel); color: var(--edge); }
.menubar span { padding: 3px 6px; }
.menubar span::first-letter { text-decoration: underline; }

.term {
  position: relative; display: grid; gap: 0.85rem; padding: 1.15rem 1.3rem 1.3rem; min-width: 0;
  background: var(--term); color: var(--ph);
  font-family: var(--body-font); font-size: var(--body-size); line-height: var(--body-lh);
  text-shadow: 0 0 0.3em var(--glow);
  border: 1px solid var(--edge);
  box-shadow: inset 2px 2px 0 #000, inset 0 0 22px rgb(0 0 0 / 0.6), 0 0 0 1px var(--win-lo), 1px 1px 0 1px var(--win-hi);
}
:root[data-plain="on"] .term { text-shadow: none; }
.statusbar { display: flex; flex-wrap: wrap; gap: 3px; font: 400 10px/1 var(--f-pixel); color: #2a261f; }
.statusbar span { padding: 4px 7px; box-shadow: inset 1px 1px 0 var(--win-lo), inset -1px -1px 0 var(--win-hi); }
.statusbar span:last-child:not(:first-child) { flex: 1; text-align: right; }

/* Type inside the phosphor */
.term h1, .term h2, .term h3 { margin: 0; font-family: var(--f-pixel); font-weight: 400; color: var(--acc, var(--odds)); text-wrap: balance; }
.term h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); line-height: 1; letter-spacing: -0.01em; }
.term h3 { font-size: clamp(1.15rem, 2.6vw, 1.5rem); line-height: 1.15; }
.term p { margin: 0; max-width: 64ch; }
.term b { color: var(--odds); font-weight: 400; }
.term i { color: var(--odds); }
.prompt { color: var(--ph-dim); font-family: var(--f-term); font-size: 1.15rem; }
.prompt::after { content: ""; }
.cursor::after {
  content: ""; display: inline-block; width: 0.55em; height: 1em; margin-left: 0.15em; vertical-align: -0.12em; background: var(--ph);
}
@media (prefers-reduced-motion: no-preference) { .cursor::after { animation: blink 1.05s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } }
.dim { color: var(--ph-dim); }
.facts { display: flex; flex-wrap: wrap; color: var(--ph-dim); margin-top: -0.45rem; }
.facts span:not(:last-child)::after { content: "\00B7"; margin: 0 0.5em; }
.kicker, .term .kicker { font: 400 10px/1.3 var(--f-pixel); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ph-dim); }
.kicker::before { content: "> "; }
.term ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.3rem; max-width: 64ch; }
.term ul.bullets li { padding-left: 1.2em; position: relative; }
.term ul.bullets li::before { content: "\25B8"; position: absolute; left: 0; color: var(--acc, var(--odds)); }
.term a { color: var(--odds); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.term a:hover { background: var(--ph); color: var(--term); text-decoration: none; text-shadow: none; }
.rule { height: 0; border: 0; border-top: 2px dashed color-mix(in srgb, var(--ph-dim) 55%, transparent); margin: 0.2rem 0; }

/* Outlined pixel buttons that invert on hover/press */
.px-row { display: flex; flex-wrap: wrap; gap: 8px; }
.term a.px, .px {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 5px;
  font: 400 10px/1.2 var(--f-pixel); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ph); text-decoration: none; border: 1px solid var(--ph); background: transparent;
}
.term a.px:hover, .px:hover, .term a.px:active { background: var(--ph); color: var(--term); text-shadow: none; }

/* Tiny pixel-font tags */
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tags b {
  font: 400 8px/1 var(--f-pixel); letter-spacing: 0.05em; color: var(--ph-dim); text-shadow: none;
  padding: 3px 4px 2px; border: 1px solid color-mix(in srgb, var(--ph-dim) 70%, transparent);
}

/* ---------- Credit board (work.dir) ---------- */
.board { margin: 0; padding: 0; list-style: none; display: grid; }
.board a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 1.1rem; align-items: center; }
.board li:first-child { border-top: 1px solid color-mix(in srgb, var(--ph-dim) 60%, transparent); }
.board li { border-bottom: 1px dashed color-mix(in srgb, var(--ph-dim) 45%, transparent); }
.term .board a { padding: 0.6rem 0.35rem; color: var(--ph); text-decoration: none; }
.term .board a:hover, .term .board a:focus-visible { background: color-mix(in srgb, var(--ph) 14%, transparent); color: var(--ph); }
.board .t { font: 400 1rem/1.2 var(--f-pixel); color: var(--odds); }
.board .y { font-family: var(--f-term); font-size: 1.15rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--ph); }
.board .d { grid-column: 1; color: var(--ph-dim); font-size: 0.92em; line-height: 1.2; }
.board .tags { grid-column: 2; justify-content: flex-end; }
.board a:hover .t { text-decoration: underline; text-decoration-style: dotted; }

/* ---------- Clips: a small sunken monitor inside the window ---------- */
.clip { margin: 0.2rem 0 0.1rem; max-width: 40rem; position: relative; padding: 6px; background: #000; border: 1px solid color-mix(in srgb, var(--ph-dim) 70%, transparent); }
.clip video { display: block; width: 100%; height: auto; background: #111; }
.clip::after {
  content: ""; position: absolute; inset: 6px; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.22) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 28px rgb(0 0 0 / 0.6);
}
:root[data-crt="off"] .clip::after { display: none; }
.clip figcaption { position: absolute; top: 12px; left: 12px; z-index: 1; font: 400 8px/1 var(--f-pixel); color: #fff; background: rgb(0 0 0 / 0.55); padding: 3px 4px; text-shadow: none; letter-spacing: 0.06em; }

/* Toolkit: outlined toggles, as in the game's option rows */
.toolkit { display: flex; flex-wrap: wrap; gap: 6px; }
.toolkit li { font: 400 10px/1.2 var(--f-pixel); text-transform: uppercase; padding: 7px 9px 6px; border: 1px solid var(--ph); letter-spacing: 0.04em; }
.toolkit li:nth-child(3n+1) { background: var(--ph); color: var(--term); text-shadow: none; }

/* Per-project accents, only in colour mode */
:root[data-colour="on"] [data-acc="sump"] { --acc: #ff5fa8; }
:root[data-colour="on"] [data-acc="leak"] { --acc: #ffd166; }
:root[data-colour="on"] [data-acc="authority"] { --acc: #5fd3ff; }
:root[data-colour="on"] [data-acc="revenue"] { --acc: #8ef0b8; }
:root[data-colour="on"] [data-acc="rats"] { --acc: #ff6b5e; }
:root[data-colour="on"] [data-acc="shop"] { --acc: #cfeaff; }
:root[data-colour="on"] [data-acc] .kicker { color: var(--acc); }

/* ---------- Taskbar ---------- */
.taskbar {
  position: relative; z-index: 10; display: flex; align-items: stretch; gap: 3px; padding: 3px 4px;
  background: var(--win); border-top: 1px solid var(--win-hi); box-shadow: 0 -1px 0 var(--edge);
  font: 400 10px/1 var(--f-pixel); color: var(--edge);
}
.bevel {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 4px; color: var(--edge); text-decoration: none;
  background: var(--win); border: 1px solid var(--edge); box-shadow: inset 1px 1px 0 var(--win-hi), inset -1px -1px 0 var(--win-lo);
  font: inherit; cursor: pointer; white-space: nowrap;
}
.bevel:active, .bevel[aria-expanded="true"], .bevel[aria-current="true"], .bevel[aria-current="page"] {
  box-shadow: inset 1px 1px 0 var(--win-lo), inset -1px -1px 0 var(--win-hi);
  background: repeating-conic-gradient(var(--win) 0 25%, var(--win-hi) 0 50%) 0 0 / 2px 2px;
}
.start { font-weight: 700; }
.start svg, .home-btn svg { width: 14px; height: 14px; shape-rendering: crispEdges; }
.tasks { display: flex; gap: 3px; min-width: 0; overflow: hidden; }
.tasks .bevel { min-width: 0; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
.tray { margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 0 9px; box-shadow: inset 1px 1px 0 var(--win-lo), inset -1px -1px 0 var(--win-hi); white-space: nowrap; }
.tray a { color: var(--edge); }
.startmenu {
  position: absolute; left: 4px; bottom: calc(100% + 1px); z-index: 30; display: grid; grid-template-columns: 22px auto; min-width: 13rem;
  background: var(--win); border: 1px solid var(--edge); box-shadow: inset 2px 2px 0 var(--win-hi), inset -2px -2px 0 var(--win-lo), 4px 4px 0 rgb(8 6 20 / 0.6);
}
.startmenu .stripe { background: var(--title); color: var(--title-ink); writing-mode: vertical-rl; transform: rotate(180deg); font: 700 10px/1 var(--f-pixel); padding: 8px 5px; letter-spacing: 0.1em; }
.startmenu ul { list-style: none; margin: 0; padding: 4px; display: grid; }
.startmenu a { display: flex; align-items: center; gap: 8px; padding: 7px 10px 6px 6px; color: var(--edge); text-decoration: none; font: 400 10px/1 var(--f-pixel); }
.startmenu a svg { width: 16px; height: 16px; shape-rendering: crispEdges; }
.startmenu a:hover, .startmenu a:focus-visible { background: var(--title); color: var(--title-ink); outline: none; }
.startmenu hr { border: 0; border-top: 1px solid var(--win-lo); border-bottom: 1px solid var(--win-hi); margin: 3px 2px; }

/* ---------- Physical controls under the screen ---------- */
/* A recessed deck, same bevel language as the housing */
.controls {
  display: flex; align-items: center; justify-content: space-between; gap: 14px 22px; flex-wrap: wrap;
  padding: 10px 16px 12px; border: 2px solid var(--ink-edge);
  background: repeating-conic-gradient(#36322b 0 25%, #3a362f 0 50%) 0 0 / 4px 4px;
  box-shadow: inset 3px 3px 0 var(--plastic-lo), inset -3px -3px 0 var(--plastic-hi), -2px -2px 0 var(--plastic-lo), 2px 2px 0 var(--plastic-hi);
}
.ctl-group { display: grid; gap: 8px; justify-items: stretch; }
/* Printed panel legend with a rule running out of it */
.ctl-label { display: flex; align-items: center; gap: 6px; font: 400 8px/1 var(--f-pixel); letter-spacing: 0.12em; text-transform: uppercase; color: var(--engrave); }
.ctl-label::after { content: ""; flex: 1; min-width: 12px; height: 2px; background: var(--engrave); opacity: 0.45; }
.ctl-row { display: flex; gap: 16px; align-items: end; }
.lamp, .switch {
  display: grid; justify-items: center; gap: 7px; padding: 2px; background: none; border: 0; cursor: pointer;
  font: 400 8px/1 var(--f-pixel); letter-spacing: 0.08em; text-transform: uppercase; color: #c9c0ae; text-decoration: none;
}
/* Square indicator lamps in a stepped bezel */
.lamp::before {
  content: ""; width: 16px; height: 12px; background: var(--lamp-off); border: 2px solid var(--ink-edge);
  box-shadow: inset 2px 2px 0 #59392c, inset -2px -2px 0 #2a1c16, 0 0 0 2px #26221d, 2px 2px 0 2px var(--plastic-hi);
}
.lamp[aria-current]:not([aria-current="false"])::before {
  background: var(--lamp-on);
  box-shadow: inset 2px 2px 0 #ffd9a0, inset -2px -2px 0 #c4560c, 0 0 0 2px #26221d, 2px 2px 0 2px var(--plastic-hi), 0 0 14px 3px rgb(255 154 46 / 0.55);
}
.switch .slot {
  position: relative; width: 18px; height: 32px; background: var(--slot); border: 2px solid var(--ink-edge);
  box-shadow: inset 2px 2px 0 #000, 0 0 0 2px #26221d, 2px 2px 0 2px var(--plastic-hi);
}
.switch .slot::after {
  content: ""; position: absolute; left: 1px; right: 1px; top: 14px; height: 13px;
  background: #d8d0bf; box-shadow: inset 2px 2px 0 #fff6e4, inset -2px -2px 0 #8d8574, 0 2px 0 #000;
  transition: top 0.07s steps(2);
}
.switch[aria-checked="true"] .slot::after { top: 1px; }
.switch[aria-checked="true"] { color: #fff2dc; }
.big-well { display: grid; place-items: center; padding: 8px 8px 6px; background: #1a1714; border: 2px solid var(--ink-edge); box-shadow: inset 3px 3px 0 #000, -2px -2px 0 var(--plastic-lo), 2px 2px 0 var(--plastic-hi); }
.big {
  min-width: 96px; padding: 14px 16px 12px; border: 2px solid var(--ink-edge); cursor: pointer;
  background: var(--btn);
  color: var(--btn-ink); font: 700 11px/1 var(--f-pixel); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; text-align: center;
  text-shadow: 1px 1px 0 var(--btn-shadow);
  box-shadow: inset 3px 3px 0 #e2593e, inset -3px -3px 0 #7d1f11, 0 5px 0 #3a0e07;
  transform: translateY(-4px); transition: transform 0.04s steps(1), box-shadow 0.04s steps(1);
}
.big:active { transform: translateY(0); box-shadow: inset 3px 3px 0 #7d1f11, inset -3px -3px 0 #c9432a, 0 1px 0 #3a0e07; }
/* Punched speaker grille: square holes on a grid */
.grille {
  flex: 1; align-self: stretch; min-width: 40px; max-width: 260px; margin: 4px 0;
  background:
    linear-gradient(90deg, transparent 4px, #3a362f 4px) 0 0 / 8px 8px,
    linear-gradient(transparent 4px, #3a362f 4px) 0 0 / 8px 8px,
    var(--slot);
}

@media (max-width: 760px) {
  .desktop { grid-template-columns: minmax(0, 1fr); padding-top: 1rem; }
  .icons { display: none; }
  .grille { display: none; }
  .tasks { display: none; }
}
@media (max-width: 560px) {
  .rig { padding: 0; }
  .terminal { padding: 6px 8px 8px; gap: 6px; border-width: 0; box-shadow: inset 3px 3px 0 var(--plastic-hi), inset -3px -3px 0 var(--plastic-lo); background: repeating-conic-gradient(var(--plastic) 0 25%, var(--dither) 0 50%) 0 0 / 4px 4px; }
  .well { padding: 8px; box-shadow: inset 3px 3px 0 var(--plastic-lo), inset -3px -3px 0 var(--plastic-hi), inset 5px 5px 0 #181512; }
  .crt { border-radius: 6px / 8px; }
  .plate .long { display: none; }
  .controls { padding: 8px 6px; }
  .term { padding: 1rem 0.9rem 1.1rem; }
  .controls { gap: 10px 14px; padding: 0 2px; justify-content: center; }
  .ctl-label { display: none; }
  .ctl-row { gap: 11px; }
  .board .d, .board .tags { grid-column: 1 / -1; }
  .board .tags { justify-content: flex-start; }
  .tray .hide-sm { display: none; }
}