@font-face { font-family: "Mestika"; src: url("../fonts/Mestika-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Mestika"; src: url("../fonts/Mestika-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mestika"; src: url("../fonts/Mestika-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Mestika"; src: url("../fonts/Mestika-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Mestika"; src: url("../fonts/Mestika-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
/* Layout: the whole site is one computer on a rich-black desk. Desktop: compact computer + keyboard + mouse, scaled to
   the viewport with no page scroll. Mobile: the phone itself becomes the computer's front. Every section is a window;
   clicking opens, the close box (or Esc) goes back. Screen is 1-bit dark: rich black + off-white, Persian blue as the one accent. */
:root {
  --black: #0a0b0e;
  --text: #f2f1ec;
  --muted: #8e909a;
  --primary: #2448e0;
  --s-bg: #0a0b0e;
  --s-fg: #e9e7e0;
  --s-dim: #2b2e36;
  --s-soft: #b9b7b0;
  --beige: #ddd5c3;
  --beige-hi: #ebe5d6;
  --beige-lo: #c4bba7;
  --beige-dk: #a99f8a;
  --fa: "Mestika", Tahoma, sans-serif;
  --latin: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='33' viewBox='0 0 12 18' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1H7v1h1v1h1v2H8v1H7v-1H6v-2H5v-1H4v1H3v1H2v1H0z' fill='%23000'/%3E%3Cpath d='M1 2v13h1v-1h1v-1h1v-1h1v1h1v2h1v1h1v-2H7v-2H6v-1h4v-1H9V9H8V8H7V7H6V6H5V5H4V4H3V3H2V2z' fill='%23fff'/%3E%3C/svg%3E") 0 0, default;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --plastic: var(--noise), linear-gradient(90deg, #b3aa95, #d3cab6 3.5%, #e3dccb 22%, #e9e2d3 50%, #e2dbca 78%, #d1c8b4 96.5%, #ada48f);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--black); color: var(--text); font: 400 16px/1.7 var(--fa); overflow: hidden; }
button { font: inherit; color: inherit; cursor: inherit; }
a { color: inherit; }

.room { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse 55% 40% at 50% 40%, #171a21, transparent 70%), linear-gradient(180deg, var(--black) 0 66%, #101116 66%, #0c0d11); cursor: var(--arrow);
  padding: max(8px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.room a, .room button { cursor: var(--arrow); }

/* ---------- Desktop setup: computer, keyboard, mouse ---------- */
.setup { position: relative; height: min(94svh, calc((100vw - 32px) / 1.25)); aspect-ratio: 1.25; }
.setup::before { content: ""; position: absolute; left: 6%; right: 2%; top: 74%; height: 26%; background: radial-gradient(ellipse 50% 40% at 45% 55%, rgba(0,0,0,.75), transparent 75%); pointer-events: none; }
.mac { position: absolute; left: 13%; top: 0; width: 74%; height: 78%; z-index: 1; background: var(--plastic); border-radius: 2.4% / 2%;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.75), inset 0 -4px 0 rgba(0,0,0,.14), inset 3px 0 0 rgba(255,255,255,.25), inset -3px 0 0 rgba(0,0,0,.1), 0 1px 0 #8f8671, 0 50px 70px -20px rgba(0,0,0,.9); }
/* the step between face and chin, then the recessed foot */
.mac::before { content: ""; position: absolute; left: .6%; right: .6%; top: 79.5%; height: 3px; background: linear-gradient(180deg, rgba(0,0,0,.16), rgba(255,255,255,.55)); }
.mac::after { content: ""; position: absolute; left: 4%; right: 4%; top: 100%; height: 2.6%; background: linear-gradient(180deg, #8c836e, #a49b86 40%, #91887300); border-radius: 0 0 10px 10px; box-shadow: inset 0 3px 4px rgba(0,0,0,.35); }
.mac .bezel { position: absolute; left: 5.5%; right: 5.5%; top: 4.5%; height: 71%; border-radius: 3.4% / 4%; padding: 2.6%;
  background: var(--noise), linear-gradient(180deg, #b6ad98, #cdc4b0 30%, #d6cdb9);
  box-shadow: inset 0 7px 12px rgba(0,0,0,.32), inset 0 -2px 0 rgba(255,255,255,.6), inset 4px 0 8px rgba(0,0,0,.12), inset -4px 0 8px rgba(0,0,0,.08), 0 -1px 0 rgba(0,0,0,.08), 0 2px 0 rgba(255,255,255,.7); }
.mac .glass { position: relative; width: 100%; height: 100%; background: #020203; border-radius: 6% / 8%; padding: 3.4% 3.8%;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 4px #0c0c0e, inset 0 0 3em rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.35); }
/* curved CRT glass: soft glare top-left, darker corners */
.mac .glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 45;
  background: radial-gradient(ellipse 70% 45% at 28% 12%, rgba(255,255,255,.11), transparent 60%), linear-gradient(125deg, rgba(255,255,255,.05) 0 30%, transparent 30.5%), radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,.55) 100%); }
.mac .slot { position: absolute; right: 9%; top: 83%; width: 34%; height: 2.6%; border-radius: 3px; background: linear-gradient(180deg, #b9b09b, #cfc6b2); box-shadow: inset 0 2px 3px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.7); }
.mac .slot::before { content: ""; position: absolute; left: 6%; right: 18%; top: 36%; height: 30%; background: #1b1a17; border-radius: 2px; box-shadow: 0 1px 0 rgba(255,255,255,.5); }
.mac .slot::after { content: ""; position: absolute; right: 4%; top: 24%; width: 11%; height: 52%; background: linear-gradient(180deg, #2a2823, #141310); border-radius: 1px; }
.mac .badge { position: absolute; left: 7%; top: 86.5%; display: flex; align-items: center; gap: 8px; font: 700 clamp(10px, 1.4svh, 14px)/1 var(--fa); color: #8a826f; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.mac .badge i { display: block; width: 1.6em; height: 1.6em; border-radius: 3px; background: var(--beige-lo); box-shadow: inset 1px 1px 2px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.6); position: relative; }
.mac .badge i::after { content: ""; position: absolute; inset: 28%; border-radius: 50%; background: var(--primary); }
.mac .led { position: absolute; right: 9%; top: 88%; width: 3%; height: 1%; border-radius: 2px; background: #3a3f4a; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); }
.mac .led.on { background: #5b78ff; box-shadow: 0 0 8px #4d6bff, inset 0 1px 0 rgba(255,255,255,.4); }
.mac .vents { position: absolute; left: 7%; right: 60%; top: 92.5%; height: 3%; background: repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, rgba(255,255,255,.35) 2px 3px, transparent 3px 9px); border-radius: 2px; opacity: .7; }

/* keyboard: tilted toward the viewer, keys with real depth */
.kb { position: absolute; left: 4%; top: 78.5%; width: 70%; height: 22%; z-index: 2; transform: perspective(900px) rotateX(34deg); transform-origin: 50% 100%; filter: drop-shadow(0 14px 14px rgba(0,0,0,.65)); }
.kb .case { position: absolute; inset: 0; border-radius: 3.5% / 12%; background: var(--noise), linear-gradient(180deg, #e7e0d0, #ddd5c3 55%, #cfc6b2);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.75), inset 0 -7px 0 #b3aa95, inset 0 -8px 0 rgba(0,0,0,.12); }
.kb .keys { position: absolute; left: 4.5%; right: 4.5%; top: 9%; bottom: 20%; display: grid; grid-template-rows: repeat(5, 1fr); gap: 3.5%; padding: .6% .7%; border-radius: 4px; background: #9e957f; box-shadow: inset 0 2px 4px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.6); }
.kb .row { display: flex; gap: .55%; }
.kb .key { flex: 1; min-width: 0; border: 0; border-radius: 3px; padding: .25em .35em; display: grid; place-items: start; font: 600 clamp(5px, .85svh, 10px)/1 var(--latin); color: #6f6754; overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 50% 35%, #f4efe3, #e2dacb 70%), #e2dacb;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.06), 0 2px 0 #b0a792, 0 3px 0 #8f8671, 0 4px 3px rgba(0,0,0,.3); transition: transform .06s, box-shadow .06s; }
.kb .key.w2 { flex: 1.6; } .kb .key.w3 { flex: 2.1; } .kb .key.space { flex: 7; }
.kb .key.on, .kb .key:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 0 #8f8671, 0 1px 1px rgba(0,0,0,.3); background: #d6cebd; }
.kb .key.esc { color: var(--primary); }

/* mouse + cord */
.cord { position: absolute; left: 82%; top: 70%; width: 10%; height: 14%; overflow: visible; z-index: 0; }
.mouse { position: absolute; left: 82.5%; top: 81%; width: 8.5%; aspect-ratio: 120 / 180; z-index: 2; transform: rotate(-6deg); transform-origin: 50% 80%; }
.mouse-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mouse .mbtn { transition: transform .06s, filter .06s; transform-origin: 50% 0; }
.mouse.down .mbtn { transform: translateY(1.2px) scaleY(.985); filter: brightness(.93); }
.nojs { position: fixed; inset: 0; z-index: 50; overflow: auto; padding: 2rem 1.25rem; background: var(--black); color: var(--text); max-width: 46rem; margin-inline: auto; }
.nojs a { color: #8fa3ff; }
.under { position: fixed; bottom: max(10px, env(safe-area-inset-bottom, 0px)); left: max(16px, env(safe-area-inset-left, 0px)); display: flex; gap: 18px; z-index: 5; }
.under button { background: none; border: 0; color: var(--muted); font: 400 13px var(--fa); padding: 4px; }
.under button:hover { color: var(--text); }

/* ---------- Mobile: the phone is the computer's front ---------- */
@media (max-width: 720px) {
  .room { padding: 0; place-items: stretch; background: var(--beige); }
  .setup { height: 100%; width: 100%; aspect-ratio: auto; }
  .mac { inset: 0; width: auto; height: auto; border-radius: 0; box-shadow: inset 6px 0 10px rgba(0,0,0,.12), inset -6px 0 10px rgba(0,0,0,.12); padding-top: env(safe-area-inset-top, 0px); }
  .mac::after, .setup::before { display: none; }
  .mac::before { top: 78%; }
  .mac .vents { top: 91%; left: 8%; right: 50%; }
  .mac .bezel { left: 4%; right: 4%; top: calc(env(safe-area-inset-top, 0px) + 3%); height: 70%; border-radius: 16px; padding: 3%; }
  .mac .glass { border-radius: 18px; padding: 3%; }
  .mac .slot { top: 81%; height: 1.4%; width: 44%; right: 8%; }
  .mac .badge { top: 85%; left: 8%; font-size: 13px; }
  .mac .led { top: 86%; height: .7%; width: 8%; }
  .kb, .mouse, .cord { display: none; }
  .under { left: auto; right: 50%; transform: translateX(50%); bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 1%); }
  .under button { color: #6f6858; }
}

/* ---------- Screen ---------- */
.screen { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--s-bg); color: var(--s-fg); border-radius: 5% / 7%; container-type: size; }
.screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 40; background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 62%, rgba(0,0,0,.5)); }
.ui { --u: clamp(10px, 2.1cqw, 16px); font-size: var(--u); line-height: 1.6; }
@media (max-width: 720px) { .ui { --u: clamp(12px, 3.7cqw, 16px); } .screen { border-radius: 12px; } }
.scr { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.scr.on { opacity: 1; visibility: visible; }
.crt { background: #d9d7cf; }
.crt.on { animation: crt .7s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes crt { 0% { transform: scale(.5, .004); filter: brightness(4); } 45% { transform: scale(1, .004); } 100% { transform: scale(1, 1); opacity: 0; } }
.dither { background-color: var(--s-bg); background-image: conic-gradient(var(--s-dim) 25%, transparent 0 50%, var(--s-dim) 0 75%, transparent 0); background-size: 3px 3px; }
.center { display: grid; place-items: center; }
.boot-ico { width: 12cqw; min-width: 44px; color: var(--s-fg); }
.box { position: absolute; background: var(--s-bg); border: 1px solid var(--s-fg); box-shadow: 0 0 0 3px var(--s-bg), 0 0 0 4px var(--s-fg); }
.welcome { inset: 30% 18%; display: grid; place-items: center; align-content: center; gap: .3em; text-align: center; }
.welcome b { font: 900 2.6em/1.15 var(--fa); }
.welcome span { color: var(--s-soft); }

.menubar { position: absolute; inset: 0 0 auto; height: 2em; background: var(--s-bg); border-bottom: 1px solid var(--s-fg); display: flex; align-items: center; gap: .6em; padding-inline: .7em; font-weight: 700; z-index: 30; }
.menubar .dot { width: .85em; height: .85em; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 1.5px var(--s-fg); margin-inline-end: .3em; flex: none; }
.crumbs { display: flex; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; }
.crumbs button { background: none; border: 0; padding: .05em .45em; font-weight: 400; color: var(--s-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.crumbs button:hover:not([aria-current]) { background: var(--s-fg); color: var(--s-bg); }
.crumbs button[aria-current] { color: var(--s-fg); font-weight: 700; flex-shrink: 0; }
.crumbs i { font-style: normal; color: #5d5f66; padding-inline: .1em; flex: none; }
.menubar .clock { margin-inline-start: auto; font-family: var(--latin); font-weight: 500; font-size: .92em; }

.dicons { position: absolute; top: 3em; bottom: .8em; left: .9em; display: grid; align-content: space-between; justify-items: center; z-index: 1; }
.dicons > div { display: grid; gap: 1.2em; justify-items: center; }
@container (max-width: 560px) { .dicons { display: none; } }

.icon { background: none; border: 0; display: grid; justify-items: center; gap: .25em; padding: .2em; color: var(--s-fg); }
.icon svg { width: 3em; height: 2.3em; overflow: visible; }
.icon svg .fill { fill: var(--s-bg); }
.icon span { padding: 0 .3em; background: var(--s-bg); white-space: nowrap; line-height: 1.5; }
.icon:hover span, .icon.sel span, .icon:focus-visible span { background: var(--s-fg); color: var(--s-bg); }
.icon:hover svg .fill, .icon.sel svg .fill, .icon:focus-visible svg .fill { fill: var(--s-fg); }
.icon:focus-visible { outline: none; }
.icon .tag { font-size: .75em; padding: 0 .3em; border: 1px solid var(--s-fg); background: var(--s-bg); color: var(--s-fg); }

/* Windows */
.layer { position: absolute; inset: 2em 0 0; z-index: 5; }
.window { position: absolute; background: var(--s-bg); border: 1px solid var(--s-fg); box-shadow: 2px 2px 0 var(--s-fg); display: flex; flex-direction: column; }
.window .tbar { flex: none; height: 1.75em; border-bottom: 1px solid var(--s-fg); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: .38em .5em; background: repeating-linear-gradient(180deg, var(--s-fg) 0 1px, transparent 1px 3px) content-box; }
.window.inactive .tbar { background: none; }
.window .closebox { width: 1.05em; height: 1.05em; border: 1px solid var(--s-fg); background: var(--s-bg); padding: 0; box-shadow: 0 0 0 2px var(--s-bg); }
.window .closebox:hover { background: var(--s-fg); }
.window .tbar b { justify-self: center; background: var(--s-bg); padding: 0 .7em; margin-inline-end: 1.5em; box-shadow: 0 0 0 .38em var(--s-bg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80%; }
.window .info { flex: none; border-bottom: 1px solid var(--s-fg); padding: .15em .8em; display: flex; justify-content: space-between; gap: 1em; font-weight: 700; white-space: nowrap; overflow: hidden; }
.window .info span:last-child { font-weight: 400; color: var(--s-soft); overflow: hidden; text-overflow: ellipsis; }
.window .pane { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.window .pg { position: absolute; inset: 0; padding: 1em 1.3em; display: none; }
.window .pg.on { display: block; }
/* footer: one clear way back, one clear way through the pages */
.window .foot { flex: none; border-top: 1px solid var(--s-fg); display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .3em .5em; min-height: 2.3em; }
.window .foot button { border: 1px solid var(--s-fg); background: var(--s-bg); border-radius: .6em; padding: .05em .85em; font-weight: 700; white-space: nowrap; }
.window .foot button:hover:not(:disabled) { background: var(--s-fg); color: var(--s-bg); }
.window .foot button:disabled { border-color: #3d3f46; color: #4b4d54; }
.window .foot .wback { border-width: 2px; }
.window .foot .hint { color: var(--s-soft); font-size: .92em; }
.window .pager { display: flex; align-items: center; gap: .5em; margin-inline-start: auto; }
.window .pager .pnum { min-width: 3.6em; text-align: center; color: var(--s-soft); }
.window .pager .next:not(:disabled) { background: var(--primary); border-color: var(--primary); color: #fff; }
.window .pager .next:not(:disabled):hover { background: #3a5cff; color: #fff; }

/* Window content */
.grid-icons { height: 100%; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 1em 1.8em; }
.grid-icons .icon svg { width: 3.4em; height: 2.6em; }
.grid-icons.big { gap: 1.2em 1.4em; font-size: 1.05em; }
.grid-icons.big .icon svg { width: 4.2em; height: 3.2em; }
.list { display: grid; }
.list .head, .list button { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; gap: .8em; align-items: center; text-align: start; padding: .35em .5em; border: 0; background: none; border-bottom: 1px dotted #4b4d54; }
.list .head { font-weight: 700; border-bottom: 1px solid var(--s-fg); }
.list button:hover, .list button:focus-visible { background: var(--s-fg); color: var(--s-bg); outline: none; }
.list button svg { width: 1.6em; height: 1.25em; }
.list button span:last-child { color: var(--s-soft); font-size: .9em; white-space: nowrap; }
.list button:hover span:last-child { color: var(--s-bg); }
.doc { display: grid; gap: .6em; align-content: start; height: 100%; }
.doc h2 { margin: 0; font: 900 1.45em/1.25 var(--fa); }
.doc h3 { margin: 0; font: 700 1.15em/1.4 var(--fa); }
.doc p { margin: 0; max-width: 46em; }
.doc .soft { color: var(--s-soft); }
.doc ul { margin: 0; padding-inline-start: 1.2em; display: grid; gap: .15em; }
.doc li::marker { content: "◆  "; font-size: .7em; }
.doc .row { display: flex; flex-wrap: wrap; gap: .6em; margin-top: .4em; }
.doc .split { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 1.1em; align-items: start; }
@container (max-width: 560px) { .doc .split { grid-template-columns: minmax(0, 1fr); } .doc .portrait { width: 6em; } }
.portrait { aspect-ratio: 4 / 5; border: 1px solid var(--s-fg); display: grid; place-items: center; text-align: center; font-size: .8em; color: var(--s-soft); background-image: conic-gradient(var(--s-dim) 25%, transparent 0 50%, var(--s-dim) 0 75%, transparent 0); background-size: 3px 3px; }
.rbtn { border: 1px solid var(--s-fg); background: var(--s-bg); border-radius: .7em; padding: .25em 1em; font-weight: 700; text-decoration: none; display: inline-block; }
.rbtn.default { box-shadow: 0 0 0 2px var(--s-bg), 0 0 0 4px var(--s-fg); background: var(--primary); border-color: var(--primary); color: #fff; }
.rbtn:hover, .rbtn:active { background: var(--s-fg); color: var(--s-bg); }
.rbtn.default:hover { background: #3a5cff; color: #fff; }
.tl { display: grid; border-inline-start: 1px solid var(--s-fg); margin-inline-start: .3em; }
.tl div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: .8em; padding: .3em .9em; position: relative; }
.tl div::before { content: ""; position: absolute; inset-inline-start: -.3em; top: .75em; width: .55em; height: .55em; background: var(--s-fg); }
.tl span { color: var(--s-soft); }
.todo { font: 500 .7em/1 var(--latin); border: 1px dashed var(--s-soft); color: var(--s-soft); padding: .15em .4em; vertical-align: middle; }
.chips { display: flex; flex-wrap: wrap; gap: .35em; }
.chips span, .chips label { border: 1px solid var(--s-fg); padding: 0 .55em; border-radius: .6em; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label:has(input:checked) { background: var(--s-fg); color: var(--s-bg); }
.chips label:has(input:focus-visible) { outline: 1px dashed var(--s-fg); outline-offset: 2px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--s-fg); }
.stats div { padding: .4em .6em; display: grid; }
.stats div + div { border-inline-start: 1px solid var(--s-fg); }
.stats b { font-size: 1.5em; line-height: 1.2; }
.quote { border: 1px solid var(--s-fg); padding: .5em .8em; position: relative; }
.logos { overflow: hidden; border-block: 1px solid var(--s-fg); padding-block: .3em; margin-bottom: .2em; }
.logos .track { display: flex; gap: 1.6em; width: max-content; animation: logos 22s linear infinite; }
.logos span { font: 600 .8em/1.6 var(--latin); letter-spacing: .12em; color: var(--s-soft); border: 1px solid #4b4d54; padding: 0 .6em; }
@keyframes logos { to { transform: translateX(50%); } }
.player { display: flex; align-items: center; gap: .7em; border: 1px solid var(--s-fg); padding: .5em .7em; }
.player button { width: 2em; height: 2em; border-radius: 50%; border: 1px solid var(--s-fg); background: var(--primary); color: #fff; padding: 0; flex: none; }
.player .bar { flex: 1; height: .7em; border: 1px solid var(--s-fg); position: relative; }
.player .bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--s-fg); }
.form { display: grid; gap: .35em; }
.form .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6em; }
.form label.f { display: grid; gap: .1em; }
.form input[type=text], .form textarea { width: 100%; font: inherit; color: var(--s-fg); background: var(--s-bg); border: 1px solid var(--s-fg); padding: .2em .5em; border-radius: 0; }
.form textarea { height: 2.3em; resize: none; }
.form input:focus, .form textarea:focus { outline: 1px dashed var(--s-fg); outline-offset: 2px; }
.copy { display: flex; gap: .6em; align-items: center; flex-wrap: wrap; }
.copy code { font: 500 1em var(--latin); user-select: all; direction: ltr; }
.zoom { position: absolute; border: 1px dotted var(--s-fg); z-index: 35; pointer-events: none; }
.ghost { position: absolute; width: clamp(14px, 2.6cqw, 22px); z-index: 38; left: 92%; top: 92%; pointer-events: none; transition: left 1.1s cubic-bezier(.45,0,.2,1), top 1.1s cubic-bezier(.45,0,.2,1); }
.ghost.pulse { animation: nudge .5s ease-in-out 2; }
@keyframes nudge { 50% { transform: translate(-10%, -10%) scale(.9); } }
@media (prefers-reduced-motion: reduce) { .crt.on { animation-duration: .01s; } .ghost { transition: none; } .logos .track { animation: none; } }
@container (max-width: 440px) { .window .foot { gap: .3em; padding-inline: .35em; } .window .foot button { padding: .05em .6em; } .window .pager { gap: .3em; } .window .pager .pnum { min-width: 2.8em; } }