/* nechos.dev: the page is a NechOS desktop. 1 P = var(--P) css px, always a whole number (2 up to 959 px wide,
   3 up to 1599, 4 above). Ink is only the theme tokens of tokens.css: no alpha, no ad-hoc colour; mid-tones are
   dithers. Strokes are 1 P, keyboard focus is a 1 P accent ring with a 1 P gap (:focus-visible only), selected is
   inverted, disabled is dotted. --Pm is the pixel size inside the mini screens (half of P, at least 1). */
@font-face { font-family: "NechOS Pixel"; src: url(../fonts/NechOSPixel.ttf) format("truetype"); font-display: swap; }
:root { --P: 2px; --Pm: 1px; --Pp: 2px; }
@media (min-width: 960px) { :root { --P: 3px; --Pp: 3px; --Pm: 2px; } }
@media (min-width: 1600px) { :root { --P: 4px; --Pp: 4px; --Pm: 2px; } }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { background: var(--bg); color: var(--fg); font: calc(var(--P) * 12) / calc(var(--P) * 16) "NechOS Pixel", monospace; min-height: 100vh; overflow-x: hidden; }
canvas { display: block; image-rendering: pixelated; flex: none; }
button, input { font: inherit; color: inherit; background: none; border: 0; border-radius: 0; appearance: none; text-align: left; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus { outline: none; }
:focus-visible { outline: var(--P) solid var(--acc); outline-offset: var(--P); }
.cap { text-transform: uppercase; }
.mut { color: var(--muted); }
.big { font-size: calc(var(--P) * 24); line-height: calc(var(--P) * 24); }
.sel, .sel .mut { background: var(--fg); color: var(--bg); }
.row { display: flex; align-items: center; gap: calc(var(--P) * 4); }
.center { text-align: center; }
p { margin: 0 0 calc(var(--P) * 8); }
h1, h2, h3, h4 { font-weight: normal; font-size: inherit; line-height: inherit; }
.gap8 { height: calc(var(--P) * 8); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: calc(var(--P) * 4); top: calc(var(--P) * -40); z-index: 20; background: var(--acc); color: var(--ink); min-height: calc(var(--P) * 16); display: flex; align-items: center; padding: 0 calc(var(--P) * 6); text-transform: uppercase; }
.skip:focus { top: calc(var(--P) * 4); }
/* Dither: checkers on the 1 P grid in the two surface colours. */
.d50 { background-image: conic-gradient(var(--fg) 25%, var(--bg) 0 50%, var(--fg) 0 75%, var(--bg) 0); background-size: calc(var(--P) * 2) calc(var(--P) * 2); }
.d25 { background-image: conic-gradient(var(--fg) 25%, var(--bg) 0); background-size: calc(var(--P) * 2) calc(var(--P) * 2); }

/* Buttons: 1 P frame, 16 P tall; primary = accent fill; dotted = not available yet. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--P) * 4); min-height: calc(var(--P) * 16); padding: 0 calc(var(--P) * 6); border: var(--P) solid var(--fg); text-transform: uppercase; background: var(--bg); color: var(--fg); }
.btn.pri { background: var(--acc); color: var(--ink); border-color: var(--acc); }
.btn.soon { border-style: dotted; color: var(--muted); cursor: default; }
.chips { display: flex; flex-wrap: wrap; gap: calc(var(--P) * 4); margin: calc(var(--P) * 4) 0; }
.chip { min-height: calc(var(--P) * 16); padding: 0 calc(var(--P) * 4); border: var(--P) solid var(--fg); text-transform: uppercase; display: inline-flex; align-items: center; gap: calc(var(--P) * 3); }
.chip[aria-pressed=true] { background: var(--fg); color: var(--bg); }
.chip[aria-disabled=true] { border-style: dotted; color: var(--muted); }
.chip .sw { width: calc(var(--P) * 8); height: calc(var(--P) * 8); background: var(--acc); border: var(--P) solid currentColor; }
input[type=text] { width: 100%; min-height: calc(var(--P) * 16); padding: 0 calc(var(--P) * 4); border: var(--P) solid var(--fg); background: var(--bg); color: var(--fg); }
input::placeholder { color: var(--muted); opacity: 1; }
.lbl { color: var(--muted); text-transform: uppercase; }

/* ---- the desktop ---- */
.a-bar { position: sticky; top: 0; z-index: 5; height: calc(var(--P) * 28); display: flex; align-items: center; gap: calc(var(--P) * 4); padding: 0 calc(var(--P) * 3); border-bottom: var(--P) solid var(--fg); background: var(--bg); }
.a-mascot { display: block; padding: calc(var(--P) * 2); min-width: calc(var(--P) * 28); min-height: calc(var(--P) * 24); }
.a-mascot[aria-expanded=true] { background: var(--fg); }
.a-desks { display: flex; border: var(--P) solid var(--muted); }
.a-desks a { width: calc(var(--P) * 12); height: calc(var(--P) * 16); display: grid; place-items: center; }
.a-desks a[aria-current=true] { background: var(--acc); color: var(--ink); }
.a-clock { margin-left: auto; white-space: nowrap; flex: none; }
.a-tray { flex: none; display: flex; gap: calc(var(--P) * 2); border: var(--P) solid var(--muted); padding: 0 calc(var(--P) * 2); height: calc(var(--P) * 20); align-items: center; }
.a-set { min-width: calc(var(--P) * 12); min-height: calc(var(--P) * 20); display: grid; place-items: center; }
.a-set[aria-expanded=true] { background: var(--fg); }
.a-set[aria-expanded=true] canvas { visibility: hidden; }
.a-menu, .a-fan, .a-theme { position: absolute; top: 100%; left: 0; right: 0; max-width: calc(var(--P) * 190); background: var(--bg); border: var(--P) solid var(--fg); border-top: 0; padding: calc(var(--P) * 4); display: none; }
.a-theme { left: auto; right: 0; }
.a-fan { max-width: calc(var(--P) * 340); }
.a-menu.open, .a-fan.open, .a-theme.open { display: block; }
.a-desk { width: 100%; max-width: calc(var(--P) * 330); margin: 0 auto; padding: calc(var(--P) * 4) 0 calc(var(--P) * 2); }
.win { margin: 0 calc(var(--P) * 4) calc(var(--P) * 8); border: var(--P) solid var(--fg); background: var(--bg); scroll-margin-top: calc(var(--P) * 34); min-width: 0; }
.win-bar { display: flex; align-items: center; height: calc(var(--P) * 16); padding-left: calc(var(--P) * 4); border-bottom: var(--P) solid var(--fg); text-transform: uppercase; }
.win.on > .win-bar { background: var(--fg); color: var(--bg); }
.win-bar .wbs { margin-left: auto; display: flex; height: 100%; }
.win-bar .wbs span { width: calc(var(--P) * 16); display: grid; place-items: center; border-left: var(--P) solid currentColor; }
.win-body { padding: calc(var(--P) * 6); }
.a-task { position: sticky; bottom: 0; z-index: 5; display: flex; height: calc(var(--P) * 18); border-top: var(--P) solid var(--fg); background: var(--bg); }
.a-task a, .a-task button { flex: 1; display: grid; place-items: center; min-width: calc(var(--P) * 12); }
.a-task [aria-current=true] { box-shadow: inset 0 calc(var(--P) * -2) 0 var(--acc); }
.a-task .fanb { flex: 0 0 calc(var(--P) * 24); border-left: var(--P) solid var(--muted); }
.seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--P) * 76), 1fr)); overflow: hidden; border: var(--P) solid var(--fg); margin-bottom: calc(var(--P) * 6); }
.seg button { min-width: 0; overflow: hidden; white-space: nowrap; display: flex; align-items: center; gap: calc(var(--P) * 3); padding: 0 calc(var(--P) * 3); text-transform: uppercase; min-height: calc(var(--P) * 20); }
.seg button[aria-selected=true] { background: var(--fg); color: var(--bg); }
.a-hero { display: grid; justify-items: center; text-align: center; }
.a-hero .row { flex-direction: column; width: 100%; } .a-hero .row .btn { width: 100%; }
.h1 { font-size: calc(var(--P) * 24); line-height: calc(var(--P) * 24); text-transform: uppercase; }
.pitch { margin: calc(var(--P) * 4) 0 calc(var(--P) * 8); }
.cols .col { display: grid; grid-template-columns: calc(var(--P) * 32) 1fr; gap: 0 calc(var(--P) * 6); margin-bottom: calc(var(--P) * 8); align-items: start; }
.cols .col h3 { text-transform: uppercase; }
.lic { color: var(--muted); } .lic b { color: var(--fg); font-weight: normal; text-transform: uppercase; }
.cap-line { color: var(--muted); margin-top: calc(var(--P) * 4); }
.soon-note { margin-top: calc(var(--P) * 4); }
@media (min-width: 960px) {
  .a-desk { max-width: calc(var(--P) * 360); display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .a-desk > .win { margin-bottom: calc(var(--P) * 6); }
  #winHello, #winLic, #winInstall, #winAbout { grid-column: 1 / -1; }
  #winTour { grid-column: 2; grid-row: 2 / span 3; }
  #winWhat { grid-column: 1; } #winDown { grid-column: 1; } #winSrc { grid-column: 1; }
}

/* ---- demos ---- */
.demo { display: block; }
.scr { --P: var(--Pm); position: relative; width: 100%; max-width: calc(var(--P) * 320); height: calc(var(--P) * 180); margin: 0 auto; border: var(--P) solid var(--fg); background: var(--bg); font-size: calc(var(--P) * 12); line-height: calc(var(--P) * 12); overflow: hidden; }
.scr .bar { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--P) * 20); border-bottom: var(--P) solid var(--fg); display: flex; align-items: center; gap: calc(var(--P) * 4); padding: 0 calc(var(--P) * 3); }
.scr .bar .dk { display: flex; gap: var(--P); } .scr .bar .dk i { width: calc(var(--P) * 10); height: calc(var(--P) * 12); display: grid; place-items: center; font-style: normal; } .scr .bar .dk i.on { background: var(--acc); color: var(--ink); }
.scr .bar .ck { margin-left: auto; }
.scr .w { position: absolute; border: var(--P) solid var(--fg); background: var(--bg); overflow: hidden; }
.scr .w .wb { height: calc(var(--P) * 18); border-bottom: var(--P) solid var(--fg); display: flex; align-items: center; gap: calc(var(--P) * 2); padding: 0 calc(var(--P) * 2); white-space: nowrap; overflow: hidden; }
.scr .w.on .wb { background: var(--fg); color: var(--bg); }
.scr .w .wb .x { margin-left: auto; letter-spacing: var(--P); }
.scr .w .ln { height: calc(var(--P) * 2); margin: calc(var(--P) * 4) calc(var(--P) * 6) 0; background: var(--muted); }
.scr .zone { position: absolute; }
.keys { display: flex; flex-wrap: wrap; gap: calc(var(--P) * 4); justify-content: center; margin-top: calc(var(--P) * 6); }
.keys .btn { min-width: calc(var(--P) * 24); padding: 0 calc(var(--P) * 4); }
.keys .mut { display: flex; align-items: center; }
.demo-status { margin-top: calc(var(--P) * 4); color: var(--muted); }
.sm { border: var(--P) solid var(--fg); padding: calc(var(--P) * 4); background: var(--bg); }
.sm .sm-s { display: grid; grid-template-columns: calc(var(--P) * 16) 1fr; align-items: center; gap: calc(var(--P) * 4); margin-bottom: calc(var(--P) * 4); }
.sm .sm-r { display: grid; grid-template-columns: calc(var(--P) * 32) 1fr; gap: calc(var(--P) * 4); align-items: center; width: 100%; min-height: calc(var(--P) * 36); padding: calc(var(--P) * 2); }
.sm .sm-r b { font-weight: normal; display: block; } .sm .sm-r i { font-style: normal; display: block; }
.sm .sm-t { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--P) dotted var(--muted); margin-top: calc(var(--P) * 4); padding-top: calc(var(--P) * 4); }
.sm .tile { display: grid; justify-items: center; gap: calc(var(--P) * 2); padding: calc(var(--P) * 2) 0; text-transform: uppercase; min-height: calc(var(--P) * 12); }
.fx { display: grid; grid-template-columns: calc(var(--P) * 56) 1fr; border: var(--P) solid var(--fg); min-height: calc(var(--P) * 120); }
.fx .fx-side { border-right: var(--P) solid var(--fg); padding: calc(var(--P) * 2) 0; }
.fx .fx-side button, .fx .fx-r { display: flex; align-items: center; gap: calc(var(--P) * 3); width: 100%; min-height: calc(var(--P) * 20); padding: 0 calc(var(--P) * 3); text-transform: uppercase; }
.fx .fx-r { text-transform: none; }
.fx .crumb { border-bottom: var(--P) solid var(--fg); min-height: calc(var(--P) * 16); display: flex; align-items: center; padding: 0 calc(var(--P) * 3); color: var(--muted); }
.fx .crumb b { color: var(--fg); font-weight: normal; }
.st { border: var(--P) solid var(--fg); }
.st nav { display: flex; flex-wrap: wrap; border-bottom: var(--P) solid var(--fg); }
.st nav button { display: flex; align-items: center; gap: calc(var(--P) * 3); min-height: calc(var(--P) * 20); padding: 0 calc(var(--P) * 3); text-transform: uppercase; }
.st nav button[aria-current=true] { background: var(--fg); color: var(--bg); }
.st .pane { padding: calc(var(--P) * 4); }
.st .pane h3 { text-transform: uppercase; margin-bottom: calc(var(--P) * 4); }
.st .ctl { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--P) * 4); min-height: calc(var(--P) * 24); }
.st .ctl span.t { text-transform: uppercase; }
.sw2 { width: calc(var(--P) * 28); height: calc(var(--P) * 14); min-height: 24px; border: var(--P) solid var(--fg); position: relative; background: var(--bg); }
.sw2::after { content: ""; position: absolute; top: var(--P); left: var(--P); width: calc(var(--P) * 10); height: calc(var(--P) * 10); background: var(--fg); }
.sw2[aria-checked=true] { background: var(--acc); border-color: var(--acc); }
.sw2[aria-checked=true]::after { left: auto; right: var(--P); background: var(--ink); }
.sl { width: calc(var(--P) * 64); height: calc(var(--P) * 12); min-height: 24px; position: relative; display: block; }
.sl .tr { border: var(--P) solid var(--muted); box-sizing: border-box; position: absolute; left: 0; right: 0; top: calc(var(--P) * 4); height: calc(var(--P) * 4); background: var(--t1); }
:root[data-theme=light] .sl .tr, :root[data-theme=white] .sl .tr { background: var(--t3); }
.sl .fi { position: absolute; left: 0; top: calc(var(--P) * 4); height: calc(var(--P) * 4); background: var(--acc); }
.sl .kn { position: absolute; top: 0; width: calc(var(--P) * 8); height: calc(var(--P) * 12); background: var(--fg); border: var(--P) solid var(--bg); outline: var(--P) solid var(--fg); }
.st .chips { margin: 0; }
.fan .card { position: absolute; width: 35%; height: calc(var(--P) * 72); border: var(--P) solid var(--fg); background: var(--bg); overflow: hidden; text-align: left; }
.fan .card .wb { height: calc(var(--P) * 18); border-bottom: var(--P) solid var(--fg); display: flex; align-items: center; gap: calc(var(--P) * 3); padding: 0 calc(var(--P) * 3); white-space: nowrap; }
.fan .card.on { outline: var(--P) solid var(--acc); outline-offset: var(--P); } .fan .card.on .wb { background: var(--fg); color: var(--bg); }
.fan .card .body { padding: calc(var(--P) * 4) calc(var(--P) * 6); } .fan .card .body i { display: block; height: calc(var(--P) * 2); margin-bottom: calc(var(--P) * 4); background: var(--muted); }
.lk .face { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: calc(var(--P) * 4); text-align: center; }
.lk .pw { width: calc(var(--P) * 120); height: calc(var(--P) * 18); border: var(--P) solid var(--fg); display: flex; align-items: center; padding: 0 calc(var(--P) * 4); gap: calc(var(--P) * 2); margin: calc(var(--P) * 4) auto 0; }
.lk .pw i { width: calc(var(--P) * 4); height: calc(var(--P) * 4); background: var(--fg); } .lk .pw .cur { width: var(--P); height: calc(var(--P) * 10); background: var(--fg); }
.lk .today { position: absolute; left: 0; right: 0; bottom: calc(var(--P) * 6); text-align: center; color: var(--muted); }
.br { border: var(--P) solid var(--fg); }
.br .tabs { display: flex; flex-wrap: wrap; border-bottom: var(--P) solid var(--fg); }
.br .tab { display: flex; align-items: center; gap: calc(var(--P) * 3); min-height: calc(var(--P) * 18); padding: 0 calc(var(--P) * 4); border-right: var(--P) solid var(--fg); white-space: nowrap; }
.br .tab[aria-selected=true] { background: var(--acc); color: var(--ink); }
.br .tab.add { min-width: calc(var(--P) * 16); justify-content: center; }
.br .url { display: flex; align-items: center; gap: calc(var(--P) * 3); margin: calc(var(--P) * 3); min-height: calc(var(--P) * 16); border: var(--P) solid var(--fg); padding: 0 calc(var(--P) * 3); }
.br .url b { font-weight: normal; margin-left: auto; }
.br .pg { padding: calc(var(--P) * 4) calc(var(--P) * 6) calc(var(--P) * 2); }
.br .pg i { display: block; height: calc(var(--P) * 2); margin-bottom: calc(var(--P) * 4); background: var(--muted); }
.br .pg .d50 { height: calc(var(--P) * 24); width: calc(var(--P) * 48); margin-left: auto; }
.br .stat { border-top: var(--P) solid var(--fg); min-height: calc(var(--P) * 14); display: flex; align-items: center; gap: calc(var(--P) * 6); padding: 0 calc(var(--P) * 3); text-transform: uppercase; }
.ac .ring { display: grid; grid-template-columns: repeat(6, calc(var(--P) * 14)); gap: calc(var(--P) * 2); justify-content: center; margin: calc(var(--P) * 4) 0; }
.ac .hue { width: calc(var(--P) * 14); height: calc(var(--P) * 14); min-width: 24px; min-height: 24px; border: var(--P) solid var(--fg); }
.ac .hue[aria-pressed=true] { outline: var(--P) solid var(--fg); outline-offset: var(--P); }
.ac .hue[aria-disabled=true] { border-style: dotted; }
.ac .prev { display: grid; grid-template-columns: calc(var(--P) * 24) 1fr; gap: calc(var(--P) * 4); align-items: center; border: var(--P) solid var(--fg); padding: calc(var(--P) * 3); margin-top: calc(var(--P) * 4); }
.ac .prev .sw { height: calc(var(--P) * 24); background: var(--acc); border: var(--P) solid var(--fg); }
@media (max-width: 420px) { .a-tray > .row { display: none; } }

/* ---- window buttons, keys hint, install terminal, about, snake ---- */
[hidden] { display: none !important; }
.win-bar .wbs button { width: calc(var(--P) * 16); min-width: 24px; display: grid; place-items: center; border-left: var(--P) solid currentColor; text-align: center; color: inherit; }
.win-bar .wbs button:focus-visible { outline-offset: calc(var(--P) * -3); }
.win.on > .win-bar button:focus-visible { outline-color: var(--bg); }
.win:focus-visible { outline-offset: calc(var(--P) * 2); }
.a-keys { display: none; flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; color: var(--muted); flex-wrap: wrap; column-gap: calc(var(--P) * 3); max-height: calc(var(--P) * 16); }
.a-keys > span { flex: 0 0 auto; }
.a-keys .lbl { margin-right: calc(var(--P) * 2); }
@media (min-width: 960px) { .a-keys { display: flex; margin-left: calc(var(--P) * 4); } }
.a-menu, .a-fan, .a-theme { max-height: calc(100vh - var(--P) * 48); overflow: auto; }
.a-menu .sm-w { margin-top: calc(var(--P) * 4); border-top: var(--P) dotted var(--muted); padding-top: calc(var(--P) * 4); }
.a-menu .sm-w button { display: flex; align-items: center; gap: calc(var(--P) * 3); width: 100%; min-height: calc(var(--P) * 14); min-width: 24px; padding: 0 calc(var(--P) * 2); text-transform: uppercase; }
.a-menu .sm-w button .mut { margin-left: auto; }
.a-menu .sm-k { margin-top: calc(var(--P) * 4); color: var(--muted); }
.a-task [data-state=min], .a-task [data-state=closed] { color: var(--muted); }
.a-task [data-state=min] canvas { visibility: visible; }
.a-task [data-state=min]::after, .a-task [data-state=closed]::after { content: ""; position: absolute; left: calc(var(--P) * 3); right: calc(var(--P) * 3); bottom: var(--P); border-top: var(--P) dotted var(--muted); }
.a-task a, .a-task button { position: relative; }
.term { height: calc(var(--P) * 100); overflow: auto; border: var(--P) solid var(--fg); padding: calc(var(--P) * 4); background: var(--bg); }
.term .tl { white-space: pre-wrap; overflow-wrap: anywhere; }
.term .plain { color: var(--muted); padding-left: calc(var(--P) * 6); margin-bottom: calc(var(--P) * 2); }
.term .prompt { margin-top: calc(var(--P) * 3); text-transform: uppercase; }
.term .prompt::before { content: "$ "; color: var(--muted); }
.term .echo { background: var(--fg); color: var(--bg); display: inline-block; margin-top: calc(var(--P) * 2); }
.term .err { background: var(--fg); color: var(--bg); display: inline-block; }
.term .end { color: var(--ink); background: var(--acc); display: inline-block; text-transform: uppercase; padding: 0 calc(var(--P) * 2); }
.term .opt { padding-left: calc(var(--P) * 6); }
.about h3 { margin: calc(var(--P) * 6) 0 calc(var(--P) * 3); }
.about h3:first-child { margin-top: 0; }
.about details { border-top: var(--P) dotted var(--muted); }
.about summary { list-style: none; cursor: pointer; min-height: calc(var(--P) * 14); min-width: 24px; display: flex; align-items: center; gap: calc(var(--P) * 3); }
.about summary::-webkit-details-marker { display: none; }
.about summary::before { content: "+"; width: calc(var(--P) * 8); text-align: center; }
.about details[open] > summary::before { content: "-"; }
.about details p { padding-left: calc(var(--P) * 11); margin: 0 0 calc(var(--P) * 4); color: var(--muted); }
.road { list-style: none; }
.road li { margin-bottom: calc(var(--P) * 2); }
.road .tag { font-weight: normal; text-transform: uppercase; display: inline-block; min-width: calc(var(--P) * 42); }
.road .tag[data-s=built] { color: var(--fg); } .road .tag[data-s=planned], .road .tag[data-s=parked] { color: var(--muted); }
.press { display: grid; gap: calc(var(--P) * 6); }
.press .mascot-svg { width: calc(var(--P) * 72); height: calc(var(--P) * 54); image-rendering: pixelated; }
.press-dl { flex-wrap: wrap; }
.press-dl .btn { min-width: 24px; }
.m-t0 { fill: var(--t0); } .m-t1 { fill: var(--t1); } .m-t2 { fill: var(--t2); } .m-t3 { fill: var(--t3); } .m-t4 { fill: var(--t4); } .m-rim { fill: var(--rim); } .m-acc { fill: var(--acc); }
@media (min-width: 560px) { .press { grid-template-columns: calc(var(--P) * 80) 1fr; } }
.snake { position: fixed; z-index: 4; top: calc(var(--P) * 32); left: calc(var(--P) * 4); width: calc(var(--P) * 150); max-width: calc(100% - var(--P) * 8); margin: 0; }
.snake canvas { border: var(--P) solid var(--fg); margin: 0 auto calc(var(--P) * 4); max-width: 100%; }
/* 404: the lock screen */
.lock404 { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: calc(var(--P) * 6); text-align: center; padding: calc(var(--P) * 8); }
.lock404 .h1 { font-size: calc(var(--P) * 24); }

/* the window fan sits on the page, so its cards use the page pixel and read like real windows */
.a-fan .scr { --P: var(--Pp); }
.a-fan .card { display: grid; align-content: start; width: max(31%, calc(var(--P) * 100)); }