/* ByeOS — the stylesheet.
   Grayscale everywhere. Colour is permitted only inside a .frame (the media
   frames in project and photo windows), and under the pointer: a photograph
   comes up in colour (media.mjs) and each desktop widget shows its own (the
   --c-* tokens, used only in the widget rules). */

@font-face { font-family: "Doto"; src: url("/fonts/doto.woff2") format("woff2"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "Departure Mono"; src: url("/fonts/departure-mono.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/plex-sans.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/plex-sans-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --paper: #EDEDEB;
  --card: #F8F8F7;
  --ink: #0A0A0A;
  --g1: #1F1F1F; --g2: #4A4A4A; --g3: #8A8A8A; --g4: #C4C4C4; --g5: #E1E1DF;
  /* the widget colours: only ever shown under the pointer, never in the chrome at rest */
  --c-sun: #F0A400; --c-moon: #8FADDF; --c-cloud: #8DA1B5; --c-rain: #2F80D0; --c-snow: #7FC6EC;
  --c-visitor: #F26B1D; --c-time: #E2432D; --c-score: #2EB86A;
  --f-display: "Doto", "Handjet", ui-monospace, monospace;
  --f-mono: "Departure Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --menubar: 32px;
  --titlebar: 28px;
  --scan: rgba(0, 0, 0, .11);
  --tube: #000; --tube-ink: #F2F2F2; --tube-dim: #8A8A8A; /* the always-dark surfaces: screensaver, shut down */
  /* the cursors, drawn in pixels (an arrow, an I-beam, a pointing hand, an open and a closed hand), each with the platform's own as the fallback */
  --cur-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='17' viewBox='0 0 12 17' shape-rendering='crispEdges'%3E%3Cpath fill='%230A0A0A' d='M0 0h1v1h-1zM0 1h2v1h-2zM0 2h1v1h-1zM2 2h1v1h-1zM0 3h1v1h-1zM3 3h1v1h-1zM0 4h1v1h-1zM4 4h1v1h-1zM0 5h1v1h-1zM5 5h1v1h-1zM0 6h1v1h-1zM6 6h1v1h-1zM0 7h1v1h-1zM7 7h1v1h-1zM0 8h1v1h-1zM8 8h1v1h-1zM0 9h1v1h-1zM9 9h1v1h-1zM0 10h1v1h-1zM6 10h5v1h-5zM0 11h1v1h-1zM3 11h1v1h-1zM6 11h1v1h-1zM0 12h1v1h-1zM2 12h1v1h-1zM4 12h1v1h-1zM7 12h1v1h-1zM0 13h2v1h-2zM4 13h1v1h-1zM7 13h1v1h-1zM0 14h1v1h-1zM5 14h1v1h-1zM8 14h1v1h-1zM5 15h1v1h-1zM8 15h1v1h-1zM5 16h4v1h-4z'/%3E%3Cpath fill='%23F8F8F7' d='M1 2h1v1h-1zM1 3h2v1h-2zM1 4h3v1h-3zM1 5h4v1h-4zM1 6h5v1h-5zM1 7h6v1h-6zM1 8h7v1h-7zM1 9h8v1h-8zM1 10h5v1h-5zM1 11h2v1h-2zM4 11h2v1h-2zM1 12h1v1h-1zM5 12h2v1h-2zM5 13h2v1h-2zM6 14h2v1h-2zM6 15h2v1h-2z'/%3E%3C/svg%3E") 0 0, default;
  --cur-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='19' viewBox='0 0 9 19' shape-rendering='crispEdges'%3E%3Cpath fill='%230A0A0A' d='M1 1h3v1h-3zM5 1h3v1h-3zM4 2h1v1h-1zM4 3h1v1h-1zM4 4h1v1h-1zM4 5h1v1h-1zM4 6h1v1h-1zM4 7h1v1h-1zM4 8h1v1h-1zM4 9h1v1h-1zM4 10h1v1h-1zM4 11h1v1h-1zM4 12h1v1h-1zM4 13h1v1h-1zM4 14h1v1h-1zM4 15h1v1h-1zM4 16h1v1h-1zM1 17h3v1h-3zM5 17h3v1h-3z'/%3E%3Cpath fill='%23F8F8F7' d='M0 0h9v1h-9zM0 1h1v1h-1zM4 1h1v1h-1zM8 1h1v1h-1zM0 2h4v1h-4zM5 2h4v1h-4zM3 3h1v1h-1zM5 3h1v1h-1zM3 4h1v1h-1zM5 4h1v1h-1zM3 5h1v1h-1zM5 5h1v1h-1zM3 6h1v1h-1zM5 6h1v1h-1zM3 7h1v1h-1zM5 7h1v1h-1zM3 8h1v1h-1zM5 8h1v1h-1zM3 9h1v1h-1zM5 9h1v1h-1zM3 10h1v1h-1zM5 10h1v1h-1zM3 11h1v1h-1zM5 11h1v1h-1zM3 12h1v1h-1zM5 12h1v1h-1zM3 13h1v1h-1zM5 13h1v1h-1zM3 14h1v1h-1zM5 14h1v1h-1zM3 15h1v1h-1zM5 15h1v1h-1zM0 16h4v1h-4zM5 16h4v1h-4zM0 17h1v1h-1zM4 17h1v1h-1zM8 17h1v1h-1zM0 18h9v1h-9z'/%3E%3C/svg%3E") 4 9, text;
  --cur-point: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%230A0A0A' d='M6 0h2v1h-2zM5 1h1v1h-1zM8 1h1v1h-1zM5 2h1v1h-1zM8 2h1v1h-1zM5 3h1v1h-1zM8 3h1v1h-1zM5 4h1v1h-1zM8 4h3v1h-3zM5 5h1v1h-1zM8 5h1v1h-1zM11 5h3v1h-3zM1 6h2v1h-2zM5 6h1v1h-1zM8 6h1v1h-1zM11 6h1v1h-1zM14 6h1v1h-1zM0 7h1v1h-1zM3 7h1v1h-1zM5 7h1v1h-1zM8 7h1v1h-1zM11 7h1v1h-1zM14 7h1v1h-1zM0 8h1v1h-1zM3 8h1v1h-1zM5 8h1v1h-1zM15 8h1v1h-1zM1 9h1v1h-1zM4 9h1v1h-1zM15 9h1v1h-1zM1 10h1v1h-1zM14 10h1v1h-1zM2 11h1v1h-1zM14 11h1v1h-1zM2 12h1v1h-1zM13 12h1v1h-1zM3 13h1v1h-1zM13 13h1v1h-1zM3 14h1v1h-1zM12 14h1v1h-1zM4 15h8v1h-8z'/%3E%3Cpath fill='%23F8F8F7' d='M6 1h2v1h-2zM6 2h2v1h-2zM6 3h2v1h-2zM6 4h2v1h-2zM6 5h2v1h-2zM9 5h2v1h-2zM6 6h2v1h-2zM9 6h2v1h-2zM12 6h2v1h-2zM1 7h2v1h-2zM6 7h2v1h-2zM9 7h2v1h-2zM12 7h2v1h-2zM1 8h2v1h-2zM6 8h9v1h-9zM2 9h2v1h-2zM5 9h10v1h-10zM2 10h12v1h-12zM3 11h11v1h-11zM3 12h10v1h-10zM4 13h9v1h-9zM4 14h8v1h-8z'/%3E%3C/svg%3E") 6 1, pointer;
  --cur-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%230A0A0A' d='M7 0h2v1h-2zM6 1h1v1h-1zM9 1h3v1h-3zM4 2h3v1h-3zM9 2h1v1h-1zM12 2h1v1h-1zM3 3h1v1h-1zM6 3h1v1h-1zM9 3h1v1h-1zM12 3h3v1h-3zM3 4h1v1h-1zM6 4h1v1h-1zM9 4h1v1h-1zM12 4h1v1h-1zM15 4h1v1h-1zM3 5h1v1h-1zM6 5h1v1h-1zM9 5h1v1h-1zM12 5h1v1h-1zM15 5h1v1h-1zM1 6h3v1h-3zM6 6h1v1h-1zM9 6h1v1h-1zM12 6h1v1h-1zM15 6h1v1h-1zM0 7h1v1h-1zM3 7h1v1h-1zM6 7h1v1h-1zM9 7h1v1h-1zM12 7h1v1h-1zM15 7h1v1h-1zM0 8h1v1h-1zM3 8h1v1h-1zM15 8h1v1h-1zM0 9h1v1h-1zM15 9h1v1h-1zM1 10h1v1h-1zM15 10h1v1h-1zM1 11h1v1h-1zM14 11h1v1h-1zM2 12h1v1h-1zM14 12h1v1h-1zM2 13h1v1h-1zM13 13h1v1h-1zM3 14h1v1h-1zM13 14h1v1h-1zM4 15h9v1h-9z'/%3E%3Cpath fill='%23F8F8F7' d='M7 1h2v1h-2zM7 2h2v1h-2zM10 2h2v1h-2zM4 3h2v1h-2zM7 3h2v1h-2zM10 3h2v1h-2zM4 4h2v1h-2zM7 4h2v1h-2zM10 4h2v1h-2zM13 4h2v1h-2zM4 5h2v1h-2zM7 5h2v1h-2zM10 5h2v1h-2zM13 5h2v1h-2zM4 6h2v1h-2zM7 6h2v1h-2zM10 6h2v1h-2zM13 6h2v1h-2zM1 7h2v1h-2zM4 7h2v1h-2zM7 7h2v1h-2zM10 7h2v1h-2zM13 7h2v1h-2zM1 8h2v1h-2zM4 8h11v1h-11zM1 9h14v1h-14zM2 10h13v1h-13zM2 11h12v1h-12zM3 12h11v1h-11zM3 13h10v1h-10zM4 14h9v1h-9z'/%3E%3C/svg%3E") 7 8, grab;
  --cur-grab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%230A0A0A' d='M3 3h2v1h-2zM6 3h2v1h-2zM9 3h2v1h-2zM12 3h2v1h-2zM2 4h1v1h-1zM5 4h1v1h-1zM8 4h1v1h-1zM11 4h1v1h-1zM14 4h1v1h-1zM2 5h1v1h-1zM5 5h1v1h-1zM8 5h1v1h-1zM11 5h1v1h-1zM14 5h1v1h-1zM1 6h3v1h-3zM14 6h1v1h-1zM0 7h1v1h-1zM3 7h1v1h-1zM14 7h1v1h-1zM0 8h1v1h-1zM14 8h1v1h-1zM0 9h1v1h-1zM13 9h1v1h-1zM1 10h1v1h-1zM13 10h1v1h-1zM1 11h1v1h-1zM12 11h1v1h-1zM2 12h1v1h-1zM12 12h1v1h-1zM2 13h10v1h-10z'/%3E%3Cpath fill='%23F8F8F7' d='M3 4h2v1h-2zM6 4h2v1h-2zM9 4h2v1h-2zM12 4h2v1h-2zM3 5h2v1h-2zM6 5h2v1h-2zM9 5h2v1h-2zM12 5h2v1h-2zM4 6h10v1h-10zM1 7h2v1h-2zM4 7h10v1h-10zM1 8h13v1h-13zM1 9h12v1h-12zM2 10h11v1h-11zM2 11h10v1h-10zM3 12h9v1h-9z'/%3E%3C/svg%3E") 7 8, grabbing;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #000000; --card: #121212; --ink: #F2F2F2;
    --g1: #E1E1DF; --g2: #C4C4C4; --g3: #8A8A8A; --g4: #4A4A4A; --g5: #1F1F1F;
    --c-moon: #A9C2EC; --c-cloud: #9DB1C6; --c-snow: #A5DBF6;
    --scan: rgba(255, 255, 255, .06);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #000000; --card: #121212; --ink: #F2F2F2;
  --g1: #E1E1DF; --g2: #C4C4C4; --g3: #8A8A8A; --g4: #4A4A4A; --g5: #1F1F1F;
  --c-moon: #A9C2EC; --c-cloud: #9DB1C6; --c-snow: #A5DBF6;
  --scan: rgba(255, 255, 255, .06);
  color-scheme: dark;
}
/* the pixel cursors are the default; the System setting puts the platform's own back */
html[data-cursor="system"] { --cur-arrow: default; --cur-text: text; --cur-point: pointer; --cur-hand: grab; --cur-grab: grabbing; }

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden;
  background: var(--paper); color: var(--ink);
  font: 15px/1.55 var(--f-body); cursor: var(--cur-arrow);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* the desktop: a dot every 16px, no dither field */
body::before {
  content: ""; position: fixed; inset: var(--menubar) 0 0 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, var(--g4) 0.9px, transparent 1.15px) 0 0 / var(--grid, 16px) var(--grid, 16px);
}
html[data-grid="0"] body::before { display: none; }
/* scanlines */
html[data-crt] body::after {
  content: ""; position: fixed; inset: 0; z-index: 4500; pointer-events: none;
  background: repeating-linear-gradient(0deg, var(--scan, rgba(0, 0, 0, .11)) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 140px rgba(0, 0, 0, .25);
}
html[data-shadows] .win, html[data-shadows] .widget, html[data-shadows] .dropdown { box-shadow: 6px 6px 0 var(--g4); }
html[data-cursor="cross"], html[data-cursor="cross"] * { cursor: crosshair !important; }
html[data-cursor="dot"], html[data-cursor="dot"] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='7' cy='7' r='5' fill='%23F8F8F7' stroke='%230A0A0A' stroke-width='1.5'/%3E%3C/svg%3E") 7 7, auto !important; }
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; clip-path: none !important; }
html[data-motion="off"] .boot-ver, html[data-motion="off"] .win .doc, html[data-motion="off"] body.drawing :is(.icon, .widget, .status, .status-os, #menubar) { opacity: 1 !important; } /* these fade in from 0 (the folder build-in too); with the fade gone they are simply there */
button { font: inherit; color: inherit; }
button, .icon, .win-title, .mb-item, .seg-btn, .tbtn, .l-item, .doc button, a[data-open] { cursor: var(--cur-arrow); }
input:not([type="range"]), textarea { cursor: var(--cur-text); }
a { color: inherit; cursor: var(--cur-point); } /* a real link gets the pointing hand; the controls that are also links (data-open) keep the arrow */
a[data-open] { text-decoration: none; } /* controls that are also links to their page */
h1.win-name { font: inherit; letter-spacing: inherit; text-transform: inherit; margin: 0; } /* a window title that is the page's heading */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* for readers and search engines, not drawn */
:focus-visible { outline: 1px dotted var(--ink); outline-offset: 2px; }
::selection { background: var(--ink); color: var(--card); }

/* the wordmark is mixed case even where the chrome is uppercase */
.brand span, .win-brand, .boot-logo { text-transform: none; }

/* shared mono label style */
.meta, .label, .caption, .stat-l, .pager-pos, .status, .folder-bar, .transport, .tc, .row-label, .sent, .era-note, .l-item, .app, .cmp-tag, .frame-tag, .frame-play, #menubar, .win-title, .icon, .doc :is(button, a), .btn, .seg-btn {
  font-family: var(--f-mono); font-size: 11px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase;
}
.display {
  font-family: var(--f-display); font-variation-settings: "ROND" var(--rond, 100); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; line-height: 1; margin: 0;
}

/* ---------- menu bar ---------- */

#menubar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--menubar); z-index: 900;
  display: flex; align-items: stretch; justify-content: space-between; padding: 0 8px 0 12px;
  background: var(--card); border-bottom: 1px solid var(--ink); user-select: none;
}
.mb-left, .mb-right { display: flex; align-items: stretch; gap: 2px; }
.mb-item.brand { gap: 8px; margin-right: 6px; padding-left: 4px; text-decoration: none; letter-spacing: .02em; font-size: 13px; }
.brand svg { display: block; }
/* the mark is a block wave (icons.mjs logoLive): nine blocks, a swell running down the diagonal every 160 ms. Still, the
   three blocks on the diagonal are swollen and their neighbours are a plus; the wave runs in the menu bar while the ByeOS
   menu is pointed at or open, and all the time where the mark carries .live (boot, About ByeOS). Every frame is held. */
.bw .bw-a, .bw .bw-k { opacity: 0; }
.bw .bw-d2, .bw .bw-a.bw-d1, .bw .bw-a.bw-d3 { opacity: 1; }
@keyframes bw-arm { 0% { opacity: 1; } 40% { opacity: 0; } 80% { opacity: 1; } }
@keyframes bw-corner { 0% { opacity: 1; } 20% { opacity: 0; } }
.bw .bw-d0 { --bwd: -.32s; } .bw .bw-d1 { --bwd: -.16s; } .bw .bw-d2 { --bwd: 0s; } .bw .bw-d3 { --bwd: -.64s; } .bw .bw-d4 { --bwd: -.48s; } /* phased so the wave starts from the still frame */
.bw.live .bw-a, .mb-item.brand:hover .bw .bw-a, .menu.open > .mb-item.brand .bw .bw-a { animation: bw-arm .8s steps(1, end) var(--bwd, 0s) infinite; }
.bw.live .bw-k, .mb-item.brand:hover .bw .bw-k, .menu.open > .mb-item.brand .bw .bw-k { animation: bw-corner .8s steps(1, end) var(--bwd, 0s) infinite; }
.mb-item {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; margin: 4px 0;
  border: 0; border-radius: 3px; background: none;
}
.mb-item:hover { outline: 1px dotted var(--ink); outline-offset: -1px; }
.mb-item:active, .menu.open > .mb-item, .mb-item[aria-pressed="true"] { background: var(--ink); color: var(--card); outline: 0; }
.mb-item svg { display: block; }
#menubar .mb-item:not(.brand) { text-transform: none; letter-spacing: .03em; } /* sentence case, like the menus */
/* the name is always written ByeOS, even where the chrome is upper case */
.win[data-id="system"] .win-name, .win[data-id="system"] h1.display, .win[data-id="updates"] h1.display, .boot-logo, .power-off .display, .pad-head > span:first-of-type, .app-label-case { text-transform: none; }
.menu { position: relative; display: flex; }
.dropdown {
  position: absolute; top: calc(100% - 4px); left: 0; z-index: 950; min-width: 280px;
  margin: 0; padding: 4px 0; list-style: none;
  background: var(--card); color: var(--ink); border: 1px solid var(--ink); border-radius: 0 0 4px 4px;
}
.menu:not(.open) .dropdown { display: none; }
.dropdown :is(button, a) {
  display: flex; width: 100%; align-items: center; gap: 10px; padding: 7px 12px;
  border: 0; background: none; text-align: left; font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.dropdown :is(button, a):hover, .dropdown :is(button, a):focus-visible { background: var(--ink); color: var(--card); outline: 0; }
@keyframes mi-flash { 0%, 40%, 80% { background: var(--card); color: var(--ink); } 20%, 60%, 100% { background: var(--ink); color: var(--card); } }
.dropdown .mi-flash { animation: mi-flash .18s steps(1, end); } /* the picked item blinks three times (five held 36 ms slots) before the menu goes */
.mi-num { color: var(--g3); min-width: 1.6em; }
.mi-name { flex: 1; white-space: nowrap; }
.mi-year, kbd { color: var(--g3); font: inherit; }
kbd { min-width: 1.4em; text-align: right; }
.dropdown :is(button, a):is(:hover, :focus-visible) :is(.mi-num, .mi-year, kbd) { color: var(--g4); }
.mi-rule { height: 0; margin: 4px 0; border-top: 1px dotted var(--g3); }

.clock { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.clock-t {
  font-family: var(--f-display); font-variation-settings: "ROND" var(--rond, 100); font-weight: 700;
  font-size: 22px; letter-spacing: .06em; line-height: 1; text-transform: none;
}

/* ---------- desktop ---------- */

#desktop { position: fixed; inset: var(--menubar) 0 0 0; z-index: 1; }
.icons { position: absolute; display: grid; gap: 6px 10px; }
.icons-system { top: 18px; left: 18px; grid-auto-flow: column; grid-template-rows: repeat(5, auto); grid-template-columns: repeat(2, 92px); }
.icon-gap { height: 0; }
.icon {
  position: relative; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 10px 4px 9px; border: 0; border-radius: 4px; background: none; color: var(--ink); text-align: center; /* labels are links now, and links do not centre their text the way buttons did */
}
.icon svg { width: 44px; height: 44px; }
.icon small { font-size: 9px; letter-spacing: .12em; color: var(--g3); }
.icon:hover { outline: 1px dotted var(--ink); outline-offset: -1px; }
.icon:active, .icon.pressed { background: var(--ink); color: var(--card); outline: 0; } /* .pressed: held by wm.mjs while its window's zoom rectangles fly */
.icon:active small, .icon.pressed small { color: inherit; }
.icon.open:not(:active):not(.pressed) svg { color: var(--g3); } /* its window is open: the System 1 dimmed icon (colour, so it survives the motion switch) */
/* two fixed columns, each stacked top to bottom, so the tops always line up and nothing moves with the window height */
.widgets { position: absolute; top: 18px; right: 18px; display: flex; align-items: flex-start; gap: 10px; }
.widget-col { display: flex; flex-direction: column; gap: 10px; width: 236px; }
.widget { border: 1px solid var(--ink); border-radius: 4px; background: var(--card); padding: 12px 14px; color: var(--g2); }
.widget-weather { display: grid; grid-template-columns: 44px 1fr; gap: 6px 12px; align-items: center; cursor: var(--cur-arrow); }
.widget-weather:hover { outline: 1px dotted var(--ink); outline-offset: 2px; }
.w-glyph svg { display: block; width: 44px; height: 44px; color: var(--ink); }
/* the weather glyph does the weather, dot by dot (widgets.mjs part()); in the SVG 1px is one cell of the 11x11 viewBox */
@keyframes dim { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .35; } }
@keyframes shift { 0%, 49% { transform: translateX(0); } 50%, 100% { transform: translateX(var(--dx, 1px)); } }
@keyframes bolt { 0%, 88% { opacity: 1; } 89%, 91% { opacity: 0; } 92%, 94% { opacity: 1; } 95%, 97% { opacity: 0; } 98%, 100% { opacity: 1; } }
.w-glyph .fall-a { animation: blink .8s steps(1, end) infinite; }
.w-glyph .fall-b { animation: blink .8s steps(1, end) -.4s infinite; } /* drops step from row 7 to row 9 every 400 ms */
.w-glyph .ray-a { animation: dim 2s steps(1, end) infinite; }
.w-glyph .ray-b { animation: dim 2s steps(1, end) -1s infinite; } /* diagonal and orthogonal rays take turns: a slow sun */
.w-glyph .bolt { animation: bolt 5s steps(1, end) infinite; } /* a double flash once every five seconds */
.w-glyph .bar-a { animation: shift 3s steps(1, end) infinite; }
.w-glyph .bar-b { animation: shift 3s steps(1, end) -1.5s infinite; }
.w-glyph .bar-c { --dx: -1px; animation: shift 3s steps(1, end) -1.5s infinite; } /* fog: rows 2 and 8 step right, rows 4 and 6 toward the centre on the other beat */
.w-main { display: flex; flex-direction: column; gap: 3px; }
.w-temp { font-size: 34px; color: var(--ink); }
.w-desc { font-family: var(--f-body); font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.w-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; padding-top: 8px; border-top: 1px dotted var(--g3); }
.w-updated { color: var(--g3); }
.w-head { display: flex; align-items: center; gap: 8px; color: var(--ink); margin-bottom: 8px; }
.w-head svg { display: block; }
.w-head time { margin-left: auto; color: var(--g3); }
.w-photo { margin: 0 0 10px; border: 1px solid var(--ink); aspect-ratio: 16 / 10; overflow: hidden; }
.w-photo canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.w-text { margin: 0 0 10px; font: 13px/1.45 var(--f-body); text-transform: none; letter-spacing: 0; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.w-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; }
.w-link:hover { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.w-link svg { display: block; }
.w-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.w-row + .w-row { margin-top: 8px; padding-top: 8px; border-top: 1px dotted var(--g3); }
.w-city { color: var(--ink); }
.w-sf, .w-you-time { font-size: 26px; color: var(--ink); }
.widget-clock .w-foot { margin-top: 8px; }
/* the weather, the clocks, the counter and the map are buttons: each opens its window (the forecast, the world clock, Traffic, Visitors) */
.widget-clock { cursor: var(--cur-arrow); }
.widget-clock:hover { outline: 1px dotted var(--ink); outline-offset: 2px; }
.widget-flip { cursor: var(--cur-arrow); }
.widget-flip:hover { outline: 1px dotted var(--ink); outline-offset: 2px; }
.widget-visitors { cursor: var(--cur-arrow); padding: 10px 12px 12px; }
.widget-visitors:hover { outline: 1px dotted var(--ink); outline-offset: 2px; }
.w-map svg { display: block; width: 100%; height: auto; }
.w-map { min-height: 80px; }
.widget-visitors .w-foot { margin-top: 8px; }
.w-vis { color: var(--ink); }
/* Under the pointer (or keyboard focus) a widget shows its colour, the way a photograph does: the
   weather glyph in the sky's colours (the box's data-w names the weather, the dots' classes the
   parts: widgets.mjs), the visitors on the map and the counter's digits in orange, the clocks in
   LED red, the game glyphs on the week's scores in phosphor green. The picture on the latest post
   comes up in colour from anywhere on its widget (media.mjs). It is instant, like the peek. */
.widget-weather:is(:hover, :focus-visible) .w-glyph svg { color: var(--c-cloud); }
.widget-weather:is(:hover, :focus-visible) .w-glyph[data-w="sun"] svg { color: var(--c-sun); }
.widget-weather:is(:hover, :focus-visible) .w-glyph[data-w="moon"] svg { color: var(--c-moon); }
.widget-weather:is(:hover, :focus-visible) .w-glyph[data-w="partly"] :is(.ray-a, .core) { fill: var(--c-sun); }
.widget-weather:is(:hover, :focus-visible) .w-glyph[data-w="rain"] :is(.fall-a, .fall-b) { fill: var(--c-rain); }
.widget-weather:is(:hover, :focus-visible) .w-glyph[data-w="snow"] :is(.fall-a, .fall-b) { fill: var(--c-snow); }
.widget-weather:is(:hover, :focus-visible) .w-glyph[data-w="thunder"] .bolt { fill: var(--c-sun); }
.widget-clock:hover :is(.w-sf, .w-you-time) { color: var(--c-time); }
.widget-flip:hover .flap { color: var(--c-visitor); }
.widget-week:hover .w-week-glyph { color: var(--c-score); }
.widget-visitors:is(:hover, :focus-visible) .map-visitors { fill: var(--c-visitor); }
.widget-visitors:is(:hover, :focus-visible) .map-you { stroke: var(--c-visitor); }
.status { position: absolute; left: 24px; bottom: 20px; text-align: left; color: var(--g2); line-height: 1.8; }
.status b { font-weight: normal; color: var(--ink); }
.status-os { position: absolute; right: 24px; bottom: 20px; color: var(--g3); font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: none; line-height: 1.8; }

/* ---------- windows ---------- */

#windows { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#zoom { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.zoom-rect { position: absolute; border: 1px dotted var(--ink); border-radius: 4px; }
.win {
  position: absolute; pointer-events: auto; display: flex; flex-direction: column;
  width: var(--w, 560px); max-width: calc(100vw - 32px); max-height: calc(100vh - var(--menubar) - 32px);
  background: var(--card); color: var(--ink); border: 1px solid var(--ink); border-radius: 4px; overflow: hidden; outline: 0;
}
.win.prerendered { left: 50%; top: calc(50% + var(--menubar) / 2); transform: translate(-50%, -50%); }
.win.measuring { visibility: hidden; }
.win[data-id="project"] { --w: clamp(640px, 64vw, 880px); }
.win[data-kind="folder"] { --w: 640px; }
.win[data-id="about"] { --w: 560px; }
.win[data-id="contact"] { --w: 520px; }
.win[data-id="resume"] { --w: 760px; }
.win[data-id="game"] { --w: clamp(680px, 72vw, 940px); }
.win[data-id="board"] { --w: min(96vw, 1040px); }
.win[data-id="launcher"] { --w: 480px; }
.win:focus-visible { outline: 1px dotted var(--ink); outline-offset: -4px; }
.win-title {
  flex: none; display: flex; align-items: center; gap: 8px; height: var(--titlebar); padding: 0 12px 0 6px;
  border-bottom: 1px solid var(--ink); user-select: none; touch-action: none;
}
.win.active .win-title { background: var(--ink); color: var(--card); }
.win.dragging .win-title { cursor: var(--cur-grab); }
.win-num, .win-sep { color: var(--g3); }
.win.active .win-num, .win.active .win-sep { color: var(--g4); }
.win-name { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.win-brand { display: none; letter-spacing: .02em; font-size: 12px; }
.win-glyph svg { display: block; }
.win-close {
  width: 16px; height: 16px; padding: 0; display: grid; place-items: center; margin-right: 2px;
  border: 1px solid currentColor; border-radius: 2px; background: none;
}
.win-close svg { display: block; }
.win-close:hover { outline: 1px dotted currentColor; outline-offset: 2px; }
.win.active .win-close:active { background: var(--card); color: var(--ink); }
.win:not(.active) .win-close:active { background: var(--ink); color: var(--card); }
.win-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 24px 28px 28px; }
.win[data-kind="folder"] .win-body, .win[data-id="launcher"] .win-body, .win[data-id="board"] .win-body { padding: 0; }

/* ---------- type inside windows ---------- */

h1.display { font-size: 40px; margin: 0 0 12px; }
.meta { margin: 0 0 22px; color: var(--g2); }
.label { margin: 0 0 8px; color: var(--ink); }
.lede { max-width: 62ch; margin: 0 0 24px; }
.prose { max-width: 62ch; }
.prose p { margin: 0 0 1em; }
.prose section { margin: 0 0 22px; }
.prose a, .lede a { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
/* a dot-matrix heading lights up letter by letter, fast: each letter (templates.mjs dotted()) knows its place in the line and
   comes on in two steps, 16 ms after the one before, so a title of 25 letters is lit in under half a second */
.build .l { animation: light .06s steps(2, end) calc(var(--i) * 16ms) both; }
@keyframes light { from { opacity: 0; } 50% { opacity: .4; } to { opacity: 1; } }
@keyframes rows { to { clip-path: inset(0 0 -.35em 0); } } /* the boot logo builds row by row; it ends below the line box, so the descender of the y in ByeOS survives */

/* ---------- media frames: the only colour ---------- */

.media { margin: 0 0 24px; }
.frame {
  position: relative; overflow: hidden; aspect-ratio: var(--ar, 16 / 9);
  border: 1px solid var(--ink); background: var(--card);
}
.frame > img, .frame > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.frame > video { z-index: 1; }
.frame > img.poster { z-index: 2; }
.frame > canvas.dither {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%;
  image-rendering: pixelated; transition: opacity .4s steps(4, end);
}
.frame.revealed > canvas.dither { opacity: 0; pointer-events: none; }
.frame.playing > img.poster { visibility: hidden; }
/* the play button on a video's poster: a dot triangle and the length, in the tags' paper and ink; the whole frame is the target */
.frame-play {
  position: absolute; left: 50%; top: 50%; z-index: 4; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 12px 8px;
  background: #F8F8F7; color: #0A0A0A; border: 1px solid #0A0A0A; font-size: 9px; letter-spacing: .12em;
}
.frame-play .glyph { display: block; }
.frame-play:hover, .frame-play:focus-visible { background: #0A0A0A; color: #F8F8F7; outline: none; }
.frame.playing:not(.paused) > .frame-play { display: none; }
.frame-tall > .frame-play .glyph { width: 33px; height: 33px; }

.transport { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px dotted var(--g3); }
.tbtn {
  display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px;
  border: 1px solid var(--ink); border-radius: 3px; background: none; color: var(--ink);
}
.tbtn svg { display: block; }
.tbtn:hover { outline: 1px dotted var(--ink); outline-offset: 2px; }
.tbtn:active, .tbtn[aria-pressed="true"] { background: var(--ink); color: var(--card); }
.scrub { flex: 1; min-width: 60px; -webkit-appearance: none; appearance: none; height: 24px; margin: 0; background: transparent; }
.scrub::-webkit-slider-runnable-track { height: 24px; background: radial-gradient(circle, var(--g3) 1px, transparent 1.5px) 0 0 / 6px 24px repeat-x; }
.scrub::-moz-range-track { height: 24px; background: radial-gradient(circle, var(--g3) 1px, transparent 1.5px) 0 0 / 6px 24px repeat-x; }
.scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; margin-top: 7px; border: 0; border-radius: 50%; background: var(--ink); }
.scrub::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--ink); }
.tc { min-width: 9.6em; text-align: right; font-variant-numeric: tabular-nums; color: var(--g2); }
.caption { margin: 8px 0 0; color: var(--g2); }

.media-compare .frame { margin: 0 auto; }
.frame-tall { width: min(100%, calc(60vh * var(--ar))); margin: 0 auto; border-radius: 13% / calc(13% * var(--ar)); } /* a phone screen: no taller than most of the viewport (--ar is w/h, so this is its width at that height), with an iPhone's corners, round whatever the size */
.frame-tall .cmp-tag, .frame-tall .frame-tag { top: 14px; } .frame-tall .cmp-tag-b, .frame-tall .frame-tag { left: 14px; } .frame-tall .cmp-tag-a { right: 14px; } /* in from the corners */
.media-set { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 16px; align-items: start; } /* side by side */
.media-stack .media-set { grid-template-columns: minmax(0, 1fr); } /* one above the other */
.media-set .frame-tall { width: min(100%, calc(50vh * var(--ar))); } /* phones side by side stand a little shorter still */
.media-item { margin: 0; }
.media-set .caption { text-align: center; }
.cmp-layer { position: absolute; inset: 0; overflow: hidden; }
.cmp-layer img { position: absolute; top: 0; left: 0; height: 100%; max-width: none; display: block; }
.cmp-two .cmp-layer img { width: 100%; height: auto; } /* two files: each at the frame's width, from the top */
.cmp-after { clip-path: inset(0 0 0 var(--pos)); }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; z-index: 4; border-left: 1px dotted #fff; pointer-events: none; }
.cmp-handle span {
  position: absolute; top: 50%; left: 0; width: 22px; height: 22px; transform: translate(-50%, -50%);
  border-radius: 50%; background: #F8F8F7; border: 1px solid #0A0A0A;
}
.cmp-handle span::before, .cmp-handle span::after { content: ""; position: absolute; top: 7px; width: 5px; height: 5px; border: 0 solid #0A0A0A; border-width: 0 0 1.5px 1.5px; } /* a pair of chevrons */
.cmp-handle span::before { left: 6px; transform: rotate(45deg); } .cmp-handle span::after { right: 6px; transform: rotate(-135deg); }
.cmp-range { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.cmp-tag, .frame-tag { position: absolute; top: 8px; z-index: 4; padding: 3px 6px; font-size: 9px; letter-spacing: .12em; background: #F8F8F7; color: #0A0A0A; border: 1px solid #0A0A0A; }
.cmp-tag-b, .frame-tag { left: 8px; } .cmp-tag-a { right: 8px; }

/* ---------- stats, buttons, footer ---------- */

.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 28px; padding: 18px 0; list-style: none;
  border-top: 1px dotted var(--g3); border-bottom: 1px dotted var(--g3);
}
.stat { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 0 0; }
.stat + .stat { padding-left: 16px; border-left: 1px dotted var(--g3); }
.stat-n { font-size: 32px; }
.stat-l { color: var(--g2); }

.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border: 1px solid var(--ink); border-radius: 999px; background: var(--card); color: var(--ink);
  line-height: 1; text-decoration: none; white-space: nowrap;
}
.btn svg { display: block; }
.btn:hover { outline: 1px dotted var(--ink); outline-offset: 2px; }
.btn:active, .btn.primary { background: var(--ink); color: var(--card); }
.btn.primary:active { background: var(--card); color: var(--ink); }
.btn[disabled] { opacity: .5; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.p-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid var(--ink); }
.pager { display: flex; align-items: center; gap: 12px; }
.pager-pos { color: var(--g2); }

/* ---------- folders ---------- */

.folder-bar {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 9px 16px;
  background: var(--card); border-bottom: 1px solid var(--ink); color: var(--g2);
}
.folder-count { flex: 1; }
.seg { display: inline-flex; border: 1px solid var(--ink); border-radius: 999px; overflow: hidden; }
.seg-btn { padding: 6px 12px; border: 0; background: none; color: var(--ink); }
.seg-btn + .seg-btn { border-left: 1px solid var(--ink); }
.seg-btn:hover { background: var(--g5); }
.seg-btn[aria-pressed="true"] { background: var(--ink); color: var(--card); }
.folder-mobile { display: none; }
.docs { list-style: none; margin: 0; padding: 12px; }
.docs.view-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.doc :is(button, a) {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px 14px;
  border: 0; border-radius: 4px; background: none; color: var(--ink); text-align: center;
}
.doc :is(button, a):hover { outline: 1px dotted var(--ink); outline-offset: -1px; }
.doc :is(button, a):active { background: var(--ink); color: var(--card); outline: 0; }
.doc :is(button, a).pressed { background: var(--ink); color: var(--card); outline: 0; } /* held while its window's zoom rectangles fly */
.doc-glyph svg { width: 44px; height: 44px; display: block; }
.doc-meta, .doc-sub, .doc-num { color: var(--g3); }
.doc :is(button, a):active :is(.doc-meta, .doc-sub, .doc-num) { color: var(--g4); }
.view-icons .doc-thumb, .view-icons .doc-num, .view-icons .doc-sub { display: none; }
.view-icons .doc-meta:empty { display: none; }
.docs.view-list { padding: 6px 0; }
.view-list .doc :is(button, a) { flex-direction: row; gap: 14px; padding: 8px 16px; border-radius: 0; text-align: left; }
.view-list .doc.has-thumb .doc-glyph { display: none; }
.view-list .doc-glyph svg { width: 28px; height: 28px; margin: 0 6px; }
.view-list .doc-thumb { width: 40px; height: 40px; flex: none; border: 1px solid var(--ink); image-rendering: pixelated; }
.view-list .doc-num { width: 2em; }
.view-list .doc-name { flex: none; }
.view-list .doc-sub { flex: 1; text-align: right; }
.view-list .doc-sub:empty { display: none; }
.view-list .doc-meta:empty { display: none; }
.view-list .doc + .doc { border-top: 1px dotted var(--g4); }
/* documents snap onto the grid 25 ms apart (the boot's cadence) once the window is revealed; never in the prerender */
.win:not(.prerendered) .doc { opacity: 0; animation: appear .01s calc(var(--i, 0) * 25ms) forwards; }
.win.measuring .doc, .win.measuring .build .l { animation: none; } /* start on reveal, not on insert: removing .measuring in wm.show() starts both */
@media (max-width: 720px) { .win:not(.prerendered) .doc { animation-delay: calc(.22s + var(--i, 0) * 25ms); } } /* after the sheet is up */
.folder-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 56px 24px; color: var(--g2); text-align: center; }
.folder-empty-glyph { color: var(--g3); }
.folder-empty p { margin: 0; max-width: 32ch; }

/* ---------- About ---------- */

.about-top { display: flex; align-items: flex-end; gap: 20px; margin: 0 0 22px; }
.portrait { flex: none; width: 128px; height: 128px; border: 1px solid var(--ink); overflow: hidden; }
.portrait canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.about-top h1.display { font-size: 34px; margin-bottom: 8px; }
.about-top .meta { margin: 0; }

/* ---------- Contact ---------- */

.compose { margin: 0 0 24px; border: 1px solid var(--ink); border-radius: 4px; overflow: hidden; }
.row { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-bottom: 1px dotted var(--g3); }
.row:focus-within { background: var(--g5); }
.row-label { flex: none; width: 76px; color: var(--g2); }
.row input, .row textarea { flex: 1; min-width: 0; padding: 9px 0; border: 0; background: none; color: var(--ink); font: 15px/1.5 var(--f-body); outline: 0; }
.row input::placeholder, .row textarea::placeholder { color: var(--g3); }
.row-msg { align-items: flex-start; }
.row-msg .row-label { padding-top: 13px; }
.row textarea { resize: vertical; min-height: 150px; }
.row-actions { justify-content: space-between; padding: 10px 12px; border-bottom: 0; }
.fixed { font-family: var(--f-mono); font-size: 12px; }
.sent { color: var(--g2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Resume ---------- */

.r-head { margin-bottom: 8px; }
.eras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0 0 24px; }
.era { border-top: 1px solid var(--ink); padding-top: 12px; }
.era-span { font-size: 28px; margin-bottom: 10px; }
.era-note { margin: 0 0 8px; color: var(--g2); text-transform: none; letter-spacing: 0; font-family: var(--f-body); font-size: 13px; }
.roles { list-style: none; margin: 0; padding: 0; }
.roles li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px dotted var(--g4); font-size: 13px; line-height: 1.45; }
.roles b { font-weight: 600; }
.roles time { font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--g2); }
.roles em { font-style: normal; color: var(--g2); }
.r-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid var(--ink); }
.r-foot .meta { margin: 0 0 4px; }

/* ---------- arcade ---------- */

.arcade { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; }
.arcade-stage { min-width: 0; }
.arcade-hud { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 10px; }
.arcade-hud .label { display: block; margin: 0 0 4px; color: var(--g2); }
.hud-right { text-align: right; }
.hud-score, .hud-best { font-size: 30px; }
.hud-best.flash { animation: flash .36s steps(1, end); } /* a new best */
.arcade-screen { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--ink); background: var(--card); }
.arcade-screen canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.arcade-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; background: var(--card); }
@keyframes wipe-up { to { clip-path: inset(0 0 100% 0); } }
.arcade-overlay.wiping { clip-path: inset(0); animation: wipe-up .18s steps(6, end) forwards; pointer-events: none; } /* Start: the panel rolls up like a shutter (inset(0) is required, none does not interpolate) */
.arcade-panel { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.arcade-title { font-size: 40px; }
.arcade-blurb { margin: 0; max-width: 34ch; }
.arcade-final { font-size: 48px; }
.arcade-submit { display: flex; gap: 8px; }
.arcade-submit input {
  width: 150px; padding: 8px 12px; border: 1px solid var(--ink); border-radius: 999px; background: none; color: var(--ink);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; outline: 0;
}
.arcade-submit input:focus-visible { outline: 1px dotted var(--ink); outline-offset: 2px; }
.arcade-result { margin: 0; min-height: 1.3em; color: var(--g2); }
.arcade-controls { margin: 10px 0 0; color: var(--g2); }
.hud-info { flex: 1; text-align: center; color: var(--g2); align-self: center; }
.arcade-note { margin: 0; color: var(--g2); }
.arcade-side { border-left: 1px dotted var(--g3); padding-left: 20px; }
.scores { list-style: none; margin: 0 0 10px; padding: 0; }
.scores li { display: grid; grid-template-columns: 2em 1fr auto; gap: 8px; padding: 7px 0; border-top: 1px dotted var(--g4); font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.scores li:first-child { border-top: 0; }
.scores li.mine { background: var(--g5); margin: 0 -6px; padding-left: 6px; padding-right: 6px; animation: flash .36s steps(1, end); } /* only ever inserted after a submit, so the row you took blinks once */
.scores .s-rank { color: var(--g3); }
.scores .s-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scores .s-score { font-variant-numeric: tabular-nums; }
.scores li.scores-empty { display: block; color: var(--g3); }
.scores-total { margin: 0; color: var(--g3); }
.arcade-foot { grid-column: 1 / -1; }

/* the pocket pad card in a game window */
.arcade-padcard { position: absolute; right: 16px; bottom: 16px; z-index: 6; width: 156px; padding: 10px; border: 1px solid var(--ink); background: var(--card); box-shadow: 4px 4px 0 var(--g4); font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--g2); }
.padcard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: var(--ink); }
.padcard-qr svg { display: block; width: 100%; height: auto; border: 1px solid var(--g4); }
.padcard-text { margin: 8px 0 0; line-height: 1.6; }
.padcard-url { color: var(--ink); text-transform: none; }
.padcard-code { display: inline-block; margin-top: 2px; font-size: 18px; color: var(--ink); }

/* ---------- the message board ---------- */

.win[data-id="board"] .win-body { display: flex; flex-direction: column; min-height: min(70vh, 720px); }
.board { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.board-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 9px 16px; border-bottom: 1px solid var(--ink); color: var(--g2); }
.board-you { display: inline-flex; align-items: baseline; gap: 6px; }
.board-name { width: 13ch; padding: 2px 0; border: 0; border-bottom: 1px dotted var(--ink); background: none; color: var(--ink); font: inherit; letter-spacing: inherit; text-transform: inherit; outline: 0; }
.board-status { margin-left: auto; color: var(--ink); } /* takes the middle of the bar, so the zoom controls and New note sit at the right */
.board-zoom { display: inline-flex; align-items: center; gap: 4px; }
.board-zoomlevel { min-width: 4ch; text-align: center; color: var(--ink); font-variant-numeric: tabular-nums; }
.board-viewport {
  position: relative; flex: 1; min-height: 0; overflow: hidden; cursor: var(--cur-hand); touch-action: none; background: var(--paper);
  background-image: radial-gradient(var(--g4) 1px, transparent 1.3px); background-size: 24px 24px;
}
.board-viewport.panning { cursor: var(--cur-grab); }
.board-surface { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; overflow: visible; --inv: 1; }
.board-edge { position: absolute; left: 0; top: 0; box-sizing: border-box; border: 2px dotted var(--g3); pointer-events: none; }
.board-mini { position: absolute; right: 12px; bottom: 12px; width: 120px; height: 90px; z-index: 30; border: 1px solid var(--ink); background: var(--card); cursor: var(--cur-arrow); overflow: hidden; }
.board-mini-notes i { position: absolute; width: 3px; height: 3px; margin: -1px 0 0 -1px; background: var(--ink); }
.board-mini-view { position: absolute; box-sizing: border-box; border: 1px solid var(--ink); background: rgba(128, 128, 128, .12); pointer-events: none; }
/* who is in the room: a small tag at the bottom left, opposite the minimap; the pointer goes through it, so a drag that starts on it pans */
.board-peers { position: absolute; left: 12px; bottom: 12px; z-index: 30; padding: 4px 8px; border: 1px solid var(--ink); background: var(--card); color: var(--g2); font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.board-peers b { font-weight: normal; color: var(--ink); }
.tbtn-text { font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 0 8px; }
.note {
  position: absolute; width: 160px; min-height: 130px; padding: 12px 12px 28px; box-sizing: border-box;
  background: var(--card); border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--g4);
  transform: rotate(var(--rot, 0deg)); font: 13px/1.4 var(--f-body); color: var(--ink); overflow-wrap: anywhere; user-select: none; touch-action: none;
}
.note.tone-1 { background: var(--g5); }
.note.tone-2 { background: var(--paper); }
.note.dragging { box-shadow: 8px 8px 0 var(--g4); z-index: 5; }
/* a note that has just arrived comes down like a rubber stamp: two held frames, then at rest; it keeps its own tilt */
@keyframes stamp { 0% { transform: rotate(var(--rot, 0deg)) scale(1.25); box-shadow: 10px 10px 0 var(--g4); } 50% { transform: rotate(var(--rot, 0deg)) scale(1.08); box-shadow: 6px 6px 0 var(--g4); } 100% { transform: rotate(var(--rot, 0deg)) scale(1); box-shadow: 4px 4px 0 var(--g4); } }
.note.landing { animation: stamp .16s steps(1, end); }
.note.editing { z-index: 6; }
.note-text { margin: 0; white-space: pre-wrap; }
.note-text:empty { display: none; }
.note-img { display: block; width: 100%; margin: 0 0 8px; image-rendering: pixelated; border: 1px solid var(--ink); }
.note.has-img { min-height: 0; }
.note-link { margin: 4px 0 8px; }
.note textarea { display: block; width: 100%; height: 88px; border: 0; background: none; color: inherit; font: inherit; resize: none; outline: 0; padding: 0; }
.note-foot { position: absolute; left: 12px; right: 12px; bottom: 8px; display: flex; justify-content: space-between; gap: 6px; font-family: var(--f-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--g2); white-space: nowrap; overflow: hidden; }
.note-del { position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; padding: 0; display: none; place-items: center; border: 1px solid var(--ink); border-radius: 2px; background: var(--card); color: var(--ink); }
.note-del svg { display: block; }
.note.mine:hover .note-del, .note.mine.editing .note-del, .board.admin .note:hover .note-del { display: grid; }
.note-del:hover { background: var(--ink); color: var(--card); }
.cursor { position: absolute; left: 0; top: 0; z-index: 20; pointer-events: none; will-change: transform; transform: translate(var(--cx, -100px), var(--cy, -100px)) scale(var(--inv, 1)); transform-origin: 0 0; transition: transform .09s linear; }
.cursor svg { display: block; }
.cursor-name { position: absolute; left: 12px; top: 14px; padding: 2px 6px; background: var(--ink); color: var(--card); font-family: var(--f-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }

/* ---------- photos ---------- */

.win[data-id="photos"] { --w: 760px; }
.win[data-id="photos"] .win-body { padding: 0; }
.photos-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; background: var(--card); border-bottom: 1px solid var(--ink); }
.photos-head h1.display { font-size: 30px; margin: 0 0 4px; }
.photos-head .meta { margin: 0; }
.photos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 3px; background: var(--card); }
.photo { display: block; padding: 0; aspect-ratio: 1; overflow: hidden; border: 0; background: var(--g5); }
.photo canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); } /* the server-rendered grid, before the browser dithers it */
.photo:hover { outline: 2px solid var(--ink); outline-offset: -2px; }
.photo:active { filter: invert(1); }
.photos-empty { grid-column: 1 / -1; padding: 48px 24px; text-align: center; color: var(--g2); }
.photos-empty p { margin: 0 0 12px; }

/* ---------- visitors, traffic ---------- */

.v-map { padding: 10px; border: 1px solid var(--ink); background: var(--card); aspect-ratio: 128 / 50; } /* the map's shape (worldmap.mjs), held before it is in */
.v-map svg { display: block; width: 100%; height: auto; }
.v-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 0; padding: 14px 0; border-top: 1px dotted var(--g3); border-bottom: 1px dotted var(--g3); }
.v-stat { display: flex; flex-direction: column; gap: 6px; padding: 0 12px 0 0; }
.v-stat + .v-stat { padding-left: 12px; border-left: 1px dotted var(--g3); }
.v-stat .display { font-size: 28px; }
.v-stat .label { margin: 0; color: var(--g2); }
.v-note { margin: 0; }
/* the top cities: a name, a bar of dots and a count each */
.v-cities { margin: 0 0 16px; }
.v-city-list { list-style: none; margin: 0; padding: 0; }
.v-city { display: grid; grid-template-columns: minmax(120px, 2fr) 3fr auto; gap: 12px; align-items: center; padding: 6px 0; border-top: 1px dotted var(--g4); color: var(--ink); }
.v-city:first-child { border-top: 0; }
.v-city-cc { margin-left: 6px; color: var(--g3); }
.v-city-bar { display: block; height: 6px; width: var(--w, 0%); min-width: 6px; background: radial-gradient(circle, var(--ink) 1.3px, transparent 1.6px) 0 0 / 6px 6px repeat-x; }
.v-city-n { text-align: right; color: var(--g2); font-variant-numeric: tabular-nums; }
/* Traffic: the counts, then months as bars of dots on a faint grid (visitors.mjs renderMonths), the count above each, the month below */
.traffic .v-stats { margin-top: 0; }
.t-months { display: flex; gap: 6px; align-items: flex-end; margin: 4px 0 18px; }
.v-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--g3); }
.v-col svg { display: block; width: 100%; max-width: 28px; height: auto; aspect-ratio: 5 / 16; }
.v-col .v-n { color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* ---------- weather ---------- */

.wx-now { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; margin: 0 0 20px; }
.wx-glyph svg { width: 64px; height: 64px; }
.wx-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wx-temp { font-size: 44px; line-height: 1; }
.wx-desc { font-family: var(--f-body); font-size: 15px; }
.wx-range { color: var(--g2); }
.wx-unit { align-self: start; }
.wx-days { margin: 0 0 16px; }
.wx-day { display: grid; grid-template-columns: 44px 22px 1fr 36px 32px minmax(96px, 168px) 32px; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px dotted var(--g4); }
.wx-day:first-child { border-top: 0; }
.wx-dname { color: var(--ink); }
.wx-dglyph { display: block; width: 22px; height: 22px; }
.wx-dglyph svg { display: block; color: var(--ink); }
.wx-dwords { font-family: var(--f-body); font-size: 13px; color: var(--ink); text-transform: none; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-drain { color: var(--g3); text-align: right; font-variant-numeric: tabular-nums; }
.wx-dlo, .wx-dhi { font-variant-numeric: tabular-nums; }
.wx-dlo { color: var(--g2); text-align: right; }
.wx-dhi { color: var(--ink); }
.wx-dbar { display: block; width: 100%; height: 7px; overflow: visible; }
.wx .v-note { display: flex; justify-content: space-between; gap: 12px; }
.wx-updated { color: var(--g3); }

/* ---------- world clock ---------- */

.win[data-id="clock"] { --w: 520px; }
.wc-list { margin: 0 0 16px; }
.wc-row { display: grid; grid-template-columns: 1fr minmax(96px, 144px) auto; gap: 16px; align-items: center; padding: 10px 0; border-top: 1px dotted var(--g4); }
.wc-row:first-child { border-top: 0; }
.wc-place { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wc-city { color: var(--ink); }
.wc-tag { margin-left: 6px; padding: 1px 5px; border: 1px solid var(--g3); border-radius: 999px; color: var(--g2); font-size: 9px; }
.wc-rel { color: var(--g3); }
.wc-rel:empty::before { content: "\00a0"; } /* a line's height before the relation is known, so the window is measured at its size */
.wc-strip { display: block; width: 100%; height: 6px; overflow: visible; }
.wc-time { font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }

/* ---------- system update, about ByeOS ---------- */

.u-head { margin-bottom: 4px; }
.updates { list-style: none; margin: 0; padding: 0; }
.updates > li { padding: 16px 0; border-top: 1px dotted var(--g3); }
.u-ver { display: flex; align-items: baseline; gap: 12px; }
.u-ver .display { font-size: 26px; }
.u-ver .meta { margin: 0; }
.updates ul { margin: 8px 0 0; padding-left: 18px; }
.updates ul li { margin: 2px 0; }
.sys { text-align: center; }
.sys-logo { color: var(--ink); }
.sys-logo svg { display: inline-block; }
.sys h1.display { font-size: 40px; margin: 12px 0 6px; }
.sys-lede { margin: 16px auto 20px; }
.sys-credits { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 auto 22px; max-width: 360px; text-align: left; font-size: 13px; }
.sys-credits dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--g2); }
.sys-credits dd { margin: 0; }
.sys-actions { justify-content: center; }

/* ---------- screensaver ---------- */

#saver { position: fixed; inset: 0; z-index: 3000; overflow: hidden; background: var(--tube); color: var(--tube-ink); cursor: none; }
.saver-clock { position: absolute; left: 0; top: 0; font-family: var(--f-display); font-variation-settings: "ROND" var(--rond, 100); font-weight: 700; font-size: 96px; line-height: 1; letter-spacing: .06em; will-change: transform; white-space: nowrap; }
.saver-hint { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--tube-dim); }

/* ---------- shut down and restart ---------- */

#power { position: fixed; inset: 0; z-index: 3500; pointer-events: none; }
.power-top, .power-bottom { position: absolute; left: 0; right: 0; height: 0; background: var(--tube); }
.power-top { top: 0; } .power-bottom { bottom: 0; }
.power-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--tube-ink); opacity: 0; transform-origin: 50% 50%; }
.power-off { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; background: var(--tube); color: var(--tube-dim); opacity: 0; }
.power-off .display { font-size: 22px; color: var(--tube-ink); margin-bottom: 10px; }
.power-off p { margin: 0 0 24px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; }
.power-btn { width: 64px; height: 64px; padding: 0; display: grid; place-items: center; border: 1px solid var(--tube-ink); border-radius: 50%; background: none; color: var(--tube-ink); }
.power-btn:hover { background: var(--tube-ink); color: var(--tube); }
.power-btn svg { display: block; }
#power.off { pointer-events: auto; }
#power.off .power-off { opacity: 1; }

/* ---------- settings ---------- */

.win[data-id="settings"] { --w: 600px; height: min(64vh, 600px); }
.set-group { padding: 14px 0 4px; border-top: 1px solid var(--ink); }
.set-group:first-child { border-top: 0; padding-top: 0; }
.set-group .label { margin-bottom: 4px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px dotted var(--g4); }
.set-row:first-of-type { border-top: 0; }
.set-row-action { justify-content: flex-start; }
.set-label { font-size: 14px; }
.set-label small { display: block; margin-top: 2px; font-size: 12px; color: var(--g3); }
.set-control { flex: none; display: flex; align-items: center; }
.switch { position: relative; width: 42px; height: 22px; padding: 0; border: 1px solid var(--ink); border-radius: 999px; background: var(--card); cursor: var(--cur-arrow); }
.switch span { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); transition: left .12s steps(3, end); }
.switch[aria-checked="true"] { background: var(--ink); }
.switch[aria-checked="true"] span { left: 23px; background: var(--card); }
.switch:hover { outline: 1px dotted var(--ink); outline-offset: 2px; }
.set-text { width: 160px; padding: 7px 10px; border: 1px solid var(--ink); border-radius: 999px; background: none; color: var(--ink); font: 13px var(--f-body); outline: 0; }
.set-text:focus-visible { outline: 1px dotted var(--ink); outline-offset: 2px; }
.btn.danger { border-style: dotted; color: var(--g2); }
.btn.danger:active, .btn.danger.confirm { background: var(--ink); color: var(--card); border-style: solid; }

/* ---------- launcher ---------- */

.l-input { width: 100%; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--ink); background: none; color: var(--ink); font: 16px var(--f-body); outline: 0; }
.l-input::placeholder { color: var(--g3); }
.l-list { list-style: none; margin: 0; padding: 6px 0; max-height: 50vh; overflow: auto; }
.l-item { display: flex; align-items: center; gap: 12px; padding: 8px 16px; color: var(--ink); }
.l-item[aria-selected="true"] { background: var(--ink); color: var(--card); }
.l-thumb { width: 28px; height: 28px; flex: none; border: 1px solid currentColor; image-rendering: pixelated; }
.l-item .glyph { width: 22px; height: 22px; margin: 0 3px; flex: none; }
.l-num { color: var(--g3); min-width: 1.6em; }
.l-name { flex: 1; }
.l-sub { color: var(--g3); }
.l-item[aria-selected="true"] .l-sub, .l-item[aria-selected="true"] .l-num { color: var(--g4); }

/* ---------- boot ---------- */

#boot { display: none; position: fixed; inset: 0; z-index: 2000; background: var(--paper); color: var(--ink); } /* the boot screen follows the theme; the screensaver and shut-down stay dark */
html.boot #boot { display: grid; place-items: center; }
.boot-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.boot-mark { color: var(--ink); margin-bottom: 4px; }
.boot-logo {
  font-family: var(--f-display); font-variation-settings: "ROND" var(--rond, 100); font-weight: 700; font-size: 72px; letter-spacing: .06em; line-height: 1;
  clip-path: inset(0 0 100% 0); animation: rows .3s steps(9, end) .15s forwards;
}
.boot-ver { font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: 0; animation: appear .01s .5s forwards; }
.boot-msg { min-height: 1.2em; font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--g3); }
.boot-bar {
  width: 168px; height: 4px;
  background: radial-gradient(circle, var(--ink) 1px, transparent 1.5px) 0 0 / 7px 4px repeat-x;
  -webkit-mask: linear-gradient(#000 0 0) left / 0% 100% no-repeat; mask: linear-gradient(#000 0 0) left / 0% 100% no-repeat;
  animation: fill 1.8s steps(24, end) .55s forwards; /* lands just before the 2.5 s boot ends */
}
@keyframes fill { to { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } }
@keyframes appear { to { opacity: 1; } }
body.drawing #menubar { opacity: 0; animation: appear .01s .05s forwards; }
body.drawing .icon, body.drawing .widget, body.drawing .status, body.drawing .status-os { opacity: 0; animation: appear .01s calc(.14s + var(--i, 5) * 30ms) forwards; }

/* ---------- responsive ---------- */

@media (max-width: 720px) {
  #menubar, #desktop, #zoom, #boot { display: none !important; }
  body::before { inset: 0; }
  #windows { inset: 0; }
  .win {
    animation: sheet-up .22s steps(5, end); position: absolute; inset: 0; width: auto !important; max-width: none; max-height: none;
    left: 0 !important; top: 0 !important; transform: none; border: 0; border-radius: 0; /* transform is not !important: that outranked the sheet animations */
  }
  @keyframes sheet-up { from { transform: translateY(100%); } }
  @keyframes sheet-down { to { transform: translateY(100%); } }
  .win.closing { animation: sheet-down .2s steps(5, end) forwards; pointer-events: none; } /* the close box or the home bar: the sheet slides back down */
  .win.prerendered { transform: none; animation: none; } /* the no-JS prerender: beats the desktop centring above, and does not slide (the app re-opens it) */
  .win-title { height: 44px; padding: 0 12px; }
  .win-brand { display: inline; margin-right: 6px; }
  .win-body { padding: 20px 16px 64px; }
  h1.display { font-size: 28px; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stat { padding-right: 8px; } .stat + .stat { padding-left: 8px; }
  .stat-n { font-size: 22px; }
  .docs.view-icons { grid-template-columns: repeat(3, 1fr); }
  .seg-sort { display: none; }
  .set-row { flex-wrap: wrap; }
  .set-control { flex-basis: 100%; }
  .arcade { grid-template-columns: 1fr; }
  .arcade-padcard { display: none; }
  .photos-grid { grid-template-columns: repeat(3, 1fr); }
  .arcade-side { border-left: 0; padding-left: 0; }
  .arcade-title { font-size: 30px; }
  .board-hint, .board-coords { display: none; }
  .board-mini { width: 80px; height: 60px; }
  .v-stats { grid-template-columns: 1fr 1fr; }
  .wx-now { grid-template-columns: 48px 1fr; }
  .wx-glyph svg { width: 48px; height: 48px; }
  .wx-unit { grid-column: 1 / -1; justify-self: start; }
  .wx-day { grid-template-columns: 40px 22px 1fr 28px minmax(56px, 1fr) 28px; gap: 8px; }
  .wx-drain { display: none; }
  .wc-row { grid-template-columns: 1fr auto; }
  .wc-strip { display: none; }
  .hud-info { display: none; }
  .win[data-id="board"] .win-body { min-height: 0; }
  .win[data-id="settings"], .win[data-id="bob"] { height: auto; }
  .folder-mobile { display: inline-flex; align-items: center; gap: 10px; margin-left: 4px; }
  .folder-mobile .clock-t { font-size: 18px; }
  .eras { grid-template-columns: 1fr; }
  .about-top { align-items: flex-start; }
  .about-top h1.display { font-size: 26px; }
  .p-foot { flex-direction: column; align-items: stretch; }
  .pager { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .build .l, .boot-logo, .boot-ver, .boot-bar, body.drawing .icon, body.drawing .widget, body.drawing .status, body.drawing .status-os, body.drawing #menubar, .w-glyph path, .win .doc, .mi-flash, .win.closing, .flash, .scores li.mine, .arcade-overlay.wiping, .note.landing { animation: none !important; clip-path: none !important; opacity: 1 !important; }
  .frame > canvas.dither { transition: none; }
}

/* ---------- print: the resume only ---------- */

@media print {
  body::before, #menubar, #desktop, #home, .home-bar, #zoom, #boot, .win:not([data-id="resume"]) { display: none !important; }
  body { overflow: visible; background: #fff; color: #000; }
  #windows { position: static; }
  .win[data-id="resume"] { position: static; width: auto; max-width: none; max-height: none; border: 0; transform: none; }
  .win[data-id="resume"] .win-title, .r-foot .btn { display: none; }
  .win-body { overflow: visible; }
}

/* ---------- toasts ---------- */

#toasts { position: fixed; left: 50%; bottom: 24px; z-index: 1200; display: flex; flex-direction: column; gap: 8px; transform: translateX(-50%); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; max-width: min(92vw, 560px); padding: 10px 12px 10px 14px; border: 1px solid var(--ink); border-radius: 4px; background: var(--card); color: var(--ink); box-shadow: 4px 4px 0 var(--g4); font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; pointer-events: auto; }
.toast b { font-family: var(--f-display); font-variation-settings: "ROND" var(--rond, 100); font-weight: 700; font-size: 20px; letter-spacing: .1em; text-transform: none; }
.toast .toast-x { margin-left: auto; }
@media (max-width: 720px) { #toasts { bottom: calc(136px + env(safe-area-inset-bottom)); } body.has-sheet #toasts { bottom: calc(28px + env(safe-area-inset-bottom)); } }

/* ---------- neon: the one setting that breaks the grayscale rule ---------- */

:root[data-neon] {
  --paper: #06000e; --card: #10001f; --ink: #39ff14;
  --g1: #ff2bd6; --g2: #00f0ff; --g3: #faff00; --g4: #b026ff; --g5: #24004a; --scan: rgba(255, 255, 255, .06);
  color-scheme: dark;
}
:root[data-neon] body { text-shadow: 0 0 6px currentColor; }
:root[data-neon] .display, :root[data-neon] .clock-t { color: var(--g1); text-shadow: 0 0 8px var(--g1), 0 0 22px var(--g1); animation: neonhue 14s linear infinite; }
@keyframes neonhue { to { filter: hue-rotate(360deg); } }
:root[data-neon] .win, :root[data-neon] .widget, :root[data-neon] .dropdown, :root[data-neon] #menubar, :root[data-neon] .home-dock, :root[data-neon] .app-tile { box-shadow: 0 0 12px var(--ink), inset 0 0 8px rgba(57, 255, 20, .12); }
:root[data-neon] .win.active .win-title { background: var(--g1); color: var(--paper); text-shadow: 0 0 8px var(--g1); }
:root[data-neon] .btn, :root[data-neon] .seg, :root[data-neon] .tbtn, :root[data-neon] .frame, :root[data-neon] .frame-play, :root[data-neon] .compose, :root[data-neon] .note { box-shadow: 0 0 8px var(--g2); border-color: var(--g2); }
:root[data-neon] .btn.primary, :root[data-neon] .seg-btn[aria-pressed="true"], :root[data-neon] .tbtn[aria-pressed="true"] { background: var(--g2); color: var(--paper); text-shadow: none; }
:root[data-neon] a, :root[data-neon] .prose a, :root[data-neon] .w-link { color: var(--g2); }
:root[data-neon] .icon:nth-child(4n+1) svg, :root[data-neon] .doc:nth-child(4n+1) svg { color: var(--ink); }
:root[data-neon] .icon:nth-child(4n+2) svg, :root[data-neon] .doc:nth-child(4n+2) svg { color: var(--g1); }
:root[data-neon] .icon:nth-child(4n+3) svg, :root[data-neon] .doc:nth-child(4n+3) svg { color: var(--g2); }
:root[data-neon] .icon:nth-child(4n+4) svg, :root[data-neon] .doc:nth-child(4n+4) svg { color: var(--g3); }
:root[data-neon] .icon svg, :root[data-neon] .doc svg, :root[data-neon] .w-glyph svg { filter: drop-shadow(0 0 4px currentColor); }
:root[data-neon] .stat-n, :root[data-neon] .hud-score, :root[data-neon] .arcade-final { color: var(--g3); text-shadow: 0 0 8px var(--g3), 0 0 20px var(--g3); }
:root[data-neon] .note.tone-1 { background: #3a0066; } :root[data-neon] .note.tone-2 { background: #002a30; }
:root[data-neon] body::before { background-image: radial-gradient(circle, var(--g4) 1px, transparent 1.2px); filter: drop-shadow(0 0 3px var(--g4)); }
:root[data-neon] .frame > canvas.dither { filter: drop-shadow(0 0 2px var(--ink)); }

/* ---------- photo booth ---------- */

.win[data-id="booth"] { --w: 720px; }
.booth { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 20px; }
.booth-frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--ink); background: var(--card); }
.booth-preview { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.booth-count { position: absolute; inset: 0; display: grid; place-items: center; font-size: 110px; color: var(--ink); }
.booth-off { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; background: var(--card); }
.booth-off p { margin: 0; max-width: 34ch; }
.booth-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.booth-side { display: flex; flex-direction: column; gap: 12px; }
.booth-strip-wrap { display: grid; place-items: center; min-height: 220px; padding: 10px; border: 1px dotted var(--g3); }
.booth-strip { display: block; width: 100%; max-width: 160px; image-rendering: pixelated; border: 1px solid var(--ink); }

/* ---------- loop ---------- */

.win[data-id="loop"] { --w: min(96vw, 980px); }
.loop-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.loop-play { width: 32px; height: 32px; min-width: 0; }
.loop-knob { display: inline-flex; align-items: center; gap: 8px; color: var(--g2); }
.loop-knob b { min-width: 3ch; color: var(--ink); font-weight: normal; }
.loop-knob input { width: 84px; height: 22px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; }
.loop-knob input::-webkit-slider-runnable-track { height: 22px; background: radial-gradient(circle, var(--g3) 1px, transparent 1.5px) 0 0 / 6px 22px repeat-x; }
.loop-knob input::-moz-range-track { height: 22px; background: radial-gradient(circle, var(--g3) 1px, transparent 1.5px) 0 0 / 6px 22px repeat-x; }
.loop-knob input::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; margin-top: 6px; border: 0; border-radius: 50%; background: var(--ink); }
.loop-knob input::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--ink); }
.loop-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.loop-tracks { display: flex; flex-direction: column; gap: 10px; }
.track { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; }
.track-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-top: 3px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.steps { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; }
.roll { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 2px 4px; }
.cell { padding: 0; border: 1px solid var(--g3); background: none; }
.steps .cell { height: 24px; border-radius: 50%; }
.roll .cell { height: 13px; border-radius: 3px; border-color: var(--g4); }
.steps .cell:nth-child(4n+1), .roll .cell:nth-child(4n+1) { border-color: var(--g2); }
.cell:hover { border-color: var(--ink); }
.cell[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
.cell.now { box-shadow: 0 0 0 2px var(--g4); }
.cell.now[aria-pressed="true"] { background: var(--g2); border-color: var(--g2); }
.chords { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.chords button { height: 32px; border: 1px solid var(--ink); border-radius: 4px; background: none; color: var(--ink); font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; }
.chords button:hover { background: var(--g5); }
.chords button.now { box-shadow: 0 0 0 2px var(--g4); }
.loop-status { margin: 12px 0 0; }
.track-roll .track-head { padding-top: 0; }

/* ---------- bob ---------- */

.win[data-id="bob"] { --w: 520px; height: min(72vh, 600px); }
.win[data-id="bob"] .win-body { display: flex; flex-direction: column; padding: 0; }
.bob { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.bob-head { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px dotted var(--g3); font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.bob-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--ink); }
.bob-sub { margin-left: auto; color: var(--g3); }
.bob-log { flex: 1; min-height: 0; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.msg { display: flex; align-items: flex-end; gap: 8px; max-width: 86%; }
.msg-you { align-self: flex-end; flex-direction: row-reverse; }
.msg-avatar { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: var(--card); color: var(--ink); }
.msg-avatar svg { display: block; }
.msg-bubble { padding: 8px 12px; border: 1px solid var(--ink); border-radius: 12px 12px 12px 3px; background: var(--card); }
.msg-you .msg-bubble { border-radius: 12px 12px 3px 12px; background: var(--ink); color: var(--card); }
.msg-text { margin: 0; font-family: var(--f-mono); font-size: 12px; line-height: 1.55; letter-spacing: .05em; overflow-wrap: anywhere; }
.msg-you .msg-text { font-family: var(--f-body); font-size: 14px; letter-spacing: 0; }
.msg-time { display: block; margin-top: 4px; font-family: var(--f-mono); font-size: 9px; letter-spacing: .1em; color: var(--g3); }
.msg-you .msg-time { color: var(--g4); text-align: right; }
.msg-typing .msg-bubble { display: flex; gap: 4px; padding: 11px 12px; }
.msg-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--g3); animation: typing 1s steps(1, end) infinite; }
.msg-typing span:nth-child(2) { animation-delay: .33s; }
.msg-typing span:nth-child(3) { animation-delay: .66s; }
@keyframes typing { 0%, 100% { background: var(--g4); } 50% { background: var(--ink); } }
.bob-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.bob-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--ink); }
.bob-input { flex: 1; min-width: 0; padding: 8px 14px; border: 1px solid var(--ink); border-radius: 999px; background: none; color: var(--ink); font: 14px var(--f-body); outline: 0; }
.bob-input:focus-visible { outline: 1px dotted var(--ink); outline-offset: 2px; }
.bob-input::placeholder { color: var(--g3); }

/* ---------- the pocket pad page ---------- */

body.pad-page { overflow: auto; }
body.pad-page::before { display: none; }
.pad { min-height: 100vh; display: flex; flex-direction: column; gap: 20px; padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.pad-head { display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.pad-head svg { display: block; }
.pad-status { margin-left: auto; color: var(--g2); text-align: right; }
.pad-code { text-align: center; }
.pad-digits { display: flex; justify-content: center; gap: 10px; margin: 24px 0; }
.pad-digits b { width: 52px; height: 64px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 4px; font-family: var(--f-display); font-variation-settings: "ROND" var(--rond, 100); font-weight: 700; font-size: 34px; }
.pad-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 320px; margin: 0 auto 16px; }
.pad-keys button { height: 64px; border: 1px solid var(--ink); border-radius: 8px; background: var(--card); color: var(--ink); font-family: var(--f-display); font-variation-settings: "ROND" var(--rond, 100); font-weight: 700; font-size: 26px; }
.pad-keys button:active { background: var(--ink); color: var(--card); }
.pad-controls { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; gap: 20px; align-items: center; }
.pad-game { grid-column: 1 / -1; text-align: center; font-size: 26px; }
.pad-dpad { display: grid; grid-template-areas: ". u ." "l . r" ". d ."; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 64px); gap: 4px; justify-content: center; }
.pad-dpad button, .pad-buttons button { border: 1px solid var(--ink); border-radius: 8px; background: var(--card); color: var(--ink); font-family: var(--f-mono); font-size: 16px; touch-action: none; }
.pad-buttons { display: flex; align-items: center; justify-content: center; gap: 16px; }
.pad-buttons button { width: 78px; height: 78px; border-radius: 50%; font-family: var(--f-display); font-variation-settings: "ROND" var(--rond, 100); font-weight: 700; font-size: 26px; }
.pad button.down, .pad-dpad button:active, .pad-buttons button:active { background: var(--ink); color: var(--card); }
.pad-hint { grid-column: 1 / -1; text-align: center; margin: 0; }

@media (max-width: 720px) {
  .booth { grid-template-columns: 1fr; }
  .track { grid-template-columns: 1fr; gap: 6px; }
  .steps .cell { height: 18px; }
  .roll .cell { height: 11px; }
  .loop-actions { margin-left: 0; }
}

/* ---------- badges ---------- */

.icon-badge, .doc-badge {
  position: absolute; top: 4px; right: 4px; padding: 2px 6px; border-radius: 999px;
  background: var(--ink); color: var(--card); font-family: var(--f-mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4;
}
.doc button { position: relative; }
.doc-badge { display: inline-flex; align-items: center; gap: 4px; }
.doc-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--card); animation: blink 1.4s steps(1, end) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.view-list .doc-badge { position: static; margin-left: 8px; }
.icon:active .icon-badge, .doc button:active .doc-badge { background: var(--card); color: var(--ink); }

/* ---------- the split-flap counter ---------- */

.flip { display: flex; align-items: flex-end; gap: 3px; margin-top: 4px; }
.flap { position: relative; width: 20px; height: 30px; perspective: 140px; font-family: var(--f-display); font-variation-settings: "ROND" var(--rond, 100); font-weight: 700; font-size: 22px; color: var(--ink); }
.flap > span { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; box-sizing: border-box; background: var(--card); border: 1px dotted var(--g3); backface-visibility: hidden; }
.flap > span > i { position: absolute; left: 0; right: 0; height: 30px; line-height: 30px; text-align: center; font-style: normal; }
.flap-top, .flap-fold { top: 0; border-radius: 3px 3px 0 0; border-bottom: 1px solid var(--g4); transform-origin: 50% 100%; }
.flap-bottom, .flap-unfold { bottom: 0; border-radius: 0 0 3px 3px; border-top: 0; transform-origin: 50% 0; }
.flap-bottom > i, .flap-unfold > i { top: -16px; }
.flap-fold, .flap-unfold { display: none; }
.flap-sep { align-self: flex-end; padding-bottom: 2px; color: var(--g3); font-family: var(--f-mono); font-size: 12px; }
.w-flip-today { color: var(--g3); }

/* ---------- this week's top scores ---------- */

.w-week { margin-top: 2px; }
.w-week-row { display: grid; grid-template-columns: 16px 1fr auto; gap: 2px 8px; align-items: center; padding: 6px 0; border-top: 1px dotted var(--g4); }
.w-week-row:first-child { border-top: 0; }
.w-week-glyph { color: var(--g2); grid-row: 1 / span 2; }
.w-week-glyph svg { display: block; }
.w-week-game { color: var(--g3); }
.w-week-name { grid-column: 2; color: var(--ink); }
.w-week-score { grid-column: 3; grid-row: 1 / span 2; text-align: right; color: var(--g2); font-variant-numeric: tabular-nums; }
.w-week-pages { display: flex; gap: 4px; padding-top: 6px; }
.w-week-pages i { width: 4px; height: 4px; border-radius: 50%; background: var(--g4); }
.w-week-pages i.on { background: var(--ink); }
.w-week-empty { margin: 2px 0 0; color: var(--g2); }

/* ---------- notices (top right) ---------- */

#notices { position: fixed; top: calc(var(--menubar) + 12px); right: 16px; z-index: 1300; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 340px); }
.notice { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--ink); border-radius: 4px; background: var(--card); color: var(--ink); box-shadow: 4px 4px 0 var(--g4); animation: slidein .18s steps(4, end); }
@keyframes slidein { from { transform: translateX(24px); opacity: 0; } }
.notice-glyph { flex: none; color: var(--ink); }
.notice-glyph svg { display: block; }
.notice-body { flex: 1; min-width: 0; }
.notice-head { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--g2); }
.notice-head b { font-weight: normal; color: var(--ink); }
.notice-text { margin: 4px 0 0; font: 13px/1.4 var(--f-body); overflow-wrap: anywhere; }
.notice-x { flex: none; margin-left: 4px; }
.icon-badge.badge-live { background: var(--card); color: var(--ink); border: 1px solid var(--ink); }
.icon-badge.badge-live.flash { animation: flash .3s steps(1, end); } /* the live count changed or first appeared */
.win-title .icon-badge { position: static; margin-left: 6px; }
@media (max-width: 720px) { #notices { top: 12px; right: 12px; left: 12px; width: auto; } }

/* ---------- live cursors (cursors.mjs) ---------- */

#peers { position: fixed; inset: 0; z-index: 1250; pointer-events: none; overflow: hidden; }
.peer { position: absolute; left: 0; top: 0; will-change: transform; transform: translate(-100px, -100px); transition: transform .09s linear, opacity .3s steps(3, end); }
.peer.idle { opacity: .4; }
.peer.over { display: none; } /* past the eighth most recent, when the room is busy */
.peer.entering, .peer.fading { opacity: 0; } /* the first visit's guide fades in, and out at the end */
.peer > svg { display: block; }
.peer-tag { position: absolute; left: 12px; top: 14px; display: flex; align-items: baseline; gap: 6px; padding: 2px 6px; background: var(--ink); color: var(--card); font-family: var(--f-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.peer-name { font-weight: normal; }
.peer-status { color: var(--g4); }
.peer-status:empty { display: none; }
.peer-say, .say-me { position: absolute; left: 12px; top: 34px; width: max-content; max-width: 240px; padding: 5px 10px; border: 1px solid var(--ink); border-radius: 12px 12px 12px 3px; background: var(--card); color: var(--ink); font: 13px/1.35 var(--f-body); overflow-wrap: anywhere; box-shadow: 3px 3px 0 var(--g4); }
.say-me { left: 0; top: 0; pointer-events: auto; padding: 4px 8px; }
.say-me input { width: 190px; border: 0; padding: 2px 2px; background: none; color: var(--ink); font: 13px/1.35 var(--f-body); outline: 0; }
.say-me input::placeholder { color: var(--g3); }
.peer-say.fading, .say-me.fading { opacity: 0; transition: opacity .3s steps(3, end); } /* three seconds after the last keystroke */
.peer-ripple { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border: 1px dotted var(--ink); border-radius: 50%; animation: peer-ripple .45s steps(5, end) forwards; }
@keyframes peer-ripple { from { opacity: 1; scale: .25; } to { opacity: 0; scale: 1.5; } }
.zoom-rect.ghost { border-color: var(--g3); }
/* the surprise: dot-pixel effects a line of chat sets off, drawn on one canvas over the desk (fx.mjs) */
#peers canvas.fx { position: absolute; inset: 0; }
@media (max-width: 720px) { #peers { display: none; } }

/* ---------- paint ---------- */

.win[data-id="paint"] { --w: min(96vw, 760px); }
.paint { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
.paint-tools { display: flex; flex-direction: column; gap: 4px; }
.paint-tool { width: 38px; height: 38px; }
.paint-tool svg { display: block; }
.paint-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.paint-patterns { display: flex; gap: 4px; }
.paint-pattern { width: 26px; height: 26px; padding: 2px; border: 1px solid var(--g3); border-radius: 3px; background: var(--card); }
.paint-pattern canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.paint-pattern[aria-pressed="true"] { border-color: var(--ink); outline: 1px dotted var(--ink); outline-offset: 2px; }
.paint-stage { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--ink); background: var(--card); overflow: hidden; }
.paint-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.paint-overlay { cursor: crosshair; touch-action: none; }
.paint-status { margin: 10px 0 0; }
@media (max-width: 720px) { .paint { grid-template-columns: 1fr; } .paint-tools { flex-direction: row; flex-wrap: wrap; } }

/* ---------- link previews: tools/build-og.mjs loads every route with ?og=1 and screenshots it ---------- */

html.og .widgets, html.og #toasts, html.og #notices, html.og .arcade-padcard { display: none !important; }

/* ---------- the phone home screen ---------- */

#home, .home-bar { display: none; }
@media (max-width: 720px) {
  #home { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 1; padding: env(safe-area-inset-top) 16px 150px; overflow: auto; }
  .home-status { display: flex; align-items: center; justify-content: space-between; height: 44px; flex: none; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; }
  .home-brand { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .02em; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } /* a tap sets the home screen loose (loose.mjs), three quick ones crash it (app.mjs); none of them zooms */
  .home-brand svg { display: block; }
  .home-signal { display: inline-flex; align-items: flex-end; gap: 2px; }
  .home-signal i { width: 3px; background: var(--ink); border-radius: 1px; }
  .home-signal i:nth-child(1) { height: 4px; } .home-signal i:nth-child(2) { height: 6px; } .home-signal i:nth-child(3) { height: 8px; } .home-signal i:nth-child(4) { height: 10px; }
  .home-batt { position: relative; width: 22px; height: 10px; margin-left: 6px; border: 1px solid var(--ink); border-radius: 2px; }
  .home-batt::before { content: ""; position: absolute; inset: 2px 5px 2px 2px; background: var(--ink); }
  .home-batt::after { content: ""; position: absolute; right: -4px; top: 2px; width: 2px; height: 4px; background: var(--ink); }
  #home.loose { overflow: hidden; } /* come loose (loose.mjs): every piece is a fixed box on the move, nothing to scroll */
  .home-widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 20px; }
  .home-widgets .widget { margin: 0; break-inside: auto; padding: 12px; }
  .home-widgets .widget-flip { grid-column: 1 / -1; }
  .home-widgets .widget-visitors { padding: 10px; }
  .home-widgets .w-map { min-height: 0; }
  .home-widgets .widget-visitors .w-foot { margin-top: 6px; padding-top: 6px; font-size: 10px; letter-spacing: .04em; }
  .home-widgets .widget-weather { grid-template-columns: 26px 1fr; gap: 2px 8px; align-items: start; }
  .home-widgets .w-glyph svg { width: 26px; height: 26px; }
  .home-widgets .w-main { gap: 2px; }
  .home-widgets .w-temp { font-size: 26px; line-height: 1; }
  .home-widgets .w-desc { font-size: 12px; }
  .home-widgets .w-range { font-size: 10px; letter-spacing: .04em; }
  .home-widgets .w-foot { margin-top: 4px; padding-top: 6px; font-size: 10px; }
  .home-widgets .widget-clock { display: flex; flex-direction: column; justify-content: space-between; }
  .home-widgets .widget-clock .w-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .home-widgets .widget-clock .w-row + .w-row { margin-top: 6px; padding-top: 6px; }
  .home-widgets .w-city { font-size: 10px; letter-spacing: .1em; }
  .home-widgets .w-sf, .home-widgets .w-you-time { font-size: 26px; line-height: 1; }
  .home-widgets .widget-flip .w-head { margin-bottom: 4px; }
  .home-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 6px; align-content: start; }
  .app { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: var(--ink); font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; text-align: center; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .app-tile { width: 60px; height: 60px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 15px; background: var(--card); color: var(--ink); box-shadow: 2px 2px 0 var(--g4); }
  .app-tile svg { display: block; }
  .app-tile.mini { grid-template-columns: 1fr 1fr; gap: 5px; padding: 9px; background: var(--g5); }
  .app-tile.mini svg { width: 17px; height: 17px; }
  .app:active .app-tile { transform: translate(2px, 2px); box-shadow: none; background: var(--ink); color: var(--card); } /* pressed into its own hard shadow: instant, no easing */
  .app-label { max-width: 80px; line-height: 1.35; max-height: 2.7em; overflow: hidden; }
  .app .icon-badge { left: auto; right: 2px; top: -6px; }
  .home-dock .app .icon-badge { right: -6px; }
  .home-dock { position: fixed; left: 16px; right: 16px; bottom: calc(26px + env(safe-area-inset-bottom)); z-index: 2; display: flex; justify-content: space-around; padding: 10px 6px 9px; border: 1px solid var(--ink); border-radius: 24px; background: var(--card); box-shadow: 4px 4px 0 var(--g4); }
  .home-dock .app { gap: 5px; }
  .home-dock .app-label { font-size: 9px; letter-spacing: .08em; }
  .home-dock .app-tile { width: 52px; height: 52px; border-radius: 14px; }
  .home-dock .app-tile.mini { padding: 8px; gap: 4px; }
  .home-dock .app-tile.mini svg { width: 15px; height: 15px; }
  body.has-sheet .home-dock { display: none; }
  .home-bar { display: block; position: fixed; left: 50%; bottom: calc(9px + env(safe-area-inset-bottom)); z-index: 1500; width: 120px; height: 5px; margin-left: -60px; padding: 0; border: 0; border-radius: 3px; background: var(--ink); opacity: .75; }
  .home-bar:active { width: 96px; margin-left: -48px; opacity: 1; } /* a one-frame pinch under the thumb */
  .win-body > .prose, .win-body > footer { padding-bottom: 0; }
}

/* ---------- delight ---------- */

/* shared by the arcade (a new best, the leaderboard row you took) and the board's live count: three inversions, every frame held */
@keyframes flash { 0%, 40%, 80% { background: var(--ink); color: var(--card); } 20%, 60%, 100% { background: var(--card); color: var(--ink); } }