/* ===========================================================================
   RunHacks — public, indexable pages rendered AS the RunHacks OS.
   These reproduce the authed TUI ([[runhacks-os-tui]]): a green-phosphor
   "operating system" with a menu bar, an app tab strip, two-pane app windows
   (a directory list + a file/briefing viewer), a dashboard grid, and a status
   bar — but as plain, scrollable, crawlable documents for SEO. All content is
   server-rendered and readable with CSS/JS disabled.
   =========================================================================== */
:root {
  --bg:         #050805;
  --bg-2:       #0a160c;   /* lifted window/panel fill */
  --bg-3:       #0c1c0f;   /* row hover fill */
  --fg:         #38d957;   /* primary phosphor green */
  --fg-bright:  #74ff90;   /* highlights, logo, titles */
  --fg-dim:     #1c7d33;   /* secondary text */
  --border:     #246b34;   /* window/box borders */
  --border-lit: #45c862;   /* focused / hovered border */
  --amber:      #e3b341;   /* unread / warnings / numbers */
  --red:        #e86a5c;   /* brand badge, danger */
  --red-bg:     #3a1411;   /* maroon badge background */
  --cyan:       #46c7d6;   /* links / accents */
  --sel-bg:     #2ce04f;   /* selected row background */
  --sel-fg:     #061006;   /* selected row text */
  --shadow:     rgba(0,0,0,.55);
  --font: 'JetBrains Mono', 'Cascadia Code', ui-monospace, 'Courier New', monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh;
  color: var(--fg);
  /* 1989 OS desktop: a faint phosphor stipple (offset dot grid, Turbo-Vision
     style) over the dark background — static and subtle, sets the "desktop". */
  background-color: var(--bg);
  background-image:
    radial-gradient(rgba(58,166,83,.05) 0.6px, transparent 0.7px),
    radial-gradient(rgba(58,166,83,.05) 0.6px, transparent 0.7px);
  background-size: 7px 7px; background-position: 0 0, 3.5px 3.5px;
  background-attachment: fixed;
  font-family: var(--font); font-size: 15px; line-height: 1.45;
  text-shadow: 0 0 1px rgba(86,255,128,.25);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 2em;   /* room for the fixed status bar */
}
a { color: var(--fg-bright); text-decoration: none; }
a:hover { text-decoration: underline; }
b, strong { color: var(--fg-bright); font-weight: 700; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.grow { flex: 1; min-width: 0; }
.dim { color: var(--fg-dim); } .bright { color: var(--fg-bright); }
.amber { color: var(--amber); } .red { color: var(--red); } .cyan { color: var(--cyan); }

/* ---- decorative CRT layers (behind / above content, never block input) --- */
body::before {                 /* fine scanlines */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.17) 3px);
  mix-blend-mode: multiply;
}
body::after {                  /* vignette + gentle flicker */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(120% 100% at 50% 0%, transparent 64%, rgba(0,0,0,.5) 100%),
    radial-gradient(150% 130% at 50% 50%, transparent 72%, rgba(2,8,3,.42) 100%);
  animation: flicker 7s infinite steps(1);
}
@keyframes flicker { 0%,100%,48%,50%,78%,80% { opacity: 1; } 49% { opacity: .93; } 79% { opacity: .96; } }
body > * { position: relative; z-index: 3; }

/* ============================================================== menu bar == */
.menubar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(5,8,5,.96); backdrop-filter: blur(2px);
  border-bottom: 1px solid var(--border); user-select: none;
}
.menubar .bar { display: flex; align-items: stretch; gap: 0; height: 1.95em; }
.menubar .brand {
  display: flex; align-items: center; white-space: nowrap;
  background: var(--red-bg); color: var(--red);
  font-weight: 700; letter-spacing: .12em; padding: 0 .85em; margin-right: .5em;
}
.menubar .brand:hover { color: #ff9d8f; text-decoration: none; }
.menubar .brand::before { content: "\25A3"; margin-right: .5em; }
.menubar .menu { display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.menubar .menu::-webkit-scrollbar { display: none; }
.menubar .mi { display: flex; align-items: center; padding: 0 .8em; color: var(--fg); white-space: nowrap; }
.menubar .mi .accel { text-decoration: underline; }
/* dark-on-bright hover: kill the phosphor glow so the label stays legible */
.menubar .mi:hover { background: var(--sel-bg); color: var(--sel-fg); text-decoration: none; text-shadow: none; }
.menubar .mi:hover .accel { text-decoration: none; }
.menubar .mi.active { color: var(--fg-bright); }      /* current app — bright, like the OS tab */
.menubar .mi.lock { color: var(--fg-dim); }           /* auth-only apps */
.menubar .mi.lock:hover { color: var(--sel-fg); }
.menubar .clock { display: flex; align-items: center; padding: 0 .9em; color: var(--fg-dim); white-space: nowrap; }
.menubar .sys {
  display: flex; align-items: center; padding: 0 .85em; color: var(--fg); white-space: nowrap;
}
.menubar .sys::before { content: "\25B8 "; color: var(--fg-dim); margin-right: .35em; }
.menubar .sys:hover { color: var(--sel-fg); background: var(--sel-bg); text-decoration: none; text-shadow: none; }
.menubar .sys:hover::before { color: var(--sel-fg); }

/* ============================================================ status bar == */
.statusbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: rgba(5,8,5,.97); backdrop-filter: blur(2px);
  border-top: 1px solid var(--border); height: 1.9em; user-select: none;
}
.statusbar .bar { display: flex; align-items: center; gap: 1.1em; height: 100%; }
.statusbar .id {
  display: flex; align-items: center; white-space: nowrap;
  background: var(--red-bg); color: var(--red); padding: 0 .6em; height: 1.5em;
}
.statusbar .id::before { content: "\25A3"; margin-right: .4em; }
.statusbar .ind { color: var(--fg-dim); white-space: nowrap; }
.statusbar .ind.on { color: var(--fg); }
.statusbar .ind.on::before { content: "\25C6 "; color: var(--fg-bright); }
.statusbar .ind.alert { color: var(--amber); }
.statusbar .ind.alert::before { content: "\25C6 "; color: var(--amber); }
.statusbar .keys { color: var(--fg-dim); white-space: nowrap; }
.statusbar .keys kbd { color: var(--bg); background: var(--fg-dim); padding: 0 .3em; font: inherit; }
.statusbar a { color: var(--fg); }
.statusbar a:hover { color: var(--fg-bright); }
@media (max-width: 700px) { .statusbar .keys, .statusbar .ind { display: none; } }

/* ================================================================ buttons == */
.btn {
  display: inline-block; border: 1px solid var(--border); color: var(--fg);
  padding: .2em .9em; white-space: nowrap; background: transparent;
  transition: background .12s, box-shadow .12s, color .12s, border-color .12s;
}
.btn.primary { border-color: var(--border-lit); color: var(--fg-bright); box-shadow: 0 0 12px rgba(86,255,128,.16); }
.btn::before { content: "< "; color: var(--fg-dim); }
.btn::after  { content: " >"; color: var(--fg-dim); }
/* hover wins over .btn.primary's color via the doubled-class specificity + source order */
.btn:hover, .btn.primary:hover {
  background: var(--sel-bg); color: var(--sel-fg); border-color: var(--sel-bg);
  text-decoration: none; text-shadow: none; box-shadow: 0 0 16px rgba(44,224,79,.4);
}
.btn:hover::before, .btn:hover::after { color: var(--sel-fg); }

/* ================================================================ desktop == */
.desktop { padding: 44px 0 44px; }
.desktop .wrap { padding-top: 0; }

/* ================================================================ windows == */
.win {
  position: relative; border: 1px solid var(--border); background: var(--bg-2);
  display: flex; flex-direction: column; min-width: 0;
  box-shadow: 6px 6px 0 var(--shadow);          /* Turbo Vision hard shadow */
  transition: border-color .15s, box-shadow .15s;
}
.win + .win { margin-top: 44px; }
/* inside grid/flex layouts the gap handles spacing — don't let the sibling
   margin offset (and shorten) side-by-side panes or dashboard cells */
.osdash > .win, .appsplit > .win { margin: 0; }
.win > .title {
  position: absolute; top: -.74em; left: 1em; background: var(--bg);
  color: var(--fg); padding: 0 .45em; white-space: nowrap; font-weight: 700; letter-spacing: .03em;
}
.win > .title::before { content: "[ "; color: var(--fg-dim); }
.win > .title::after  { content: " ]"; color: var(--fg-dim); }
.win > .title .hint { color: var(--fg-dim); font-weight: 400; letter-spacing: 0; }
.win.lit { border-color: var(--border-lit); }
.win.lit > .title { color: var(--fg-bright); }
.win > .bd { padding: 1.45em 1.5em 1.35em; }
.win > .bd.pad-sm { padding: .7em .6em; }      /* tight, for list panes */
.win > .bd > :first-child { margin-top: 0; }
.win > .bd > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- dashboard -- */
.osdash {
  display: grid; gap: 26px 16px;
  grid-template-columns: 1.15fr .85fr;
  grid-template-areas: "logo logo" "ch readme" "sys sys";
}
.osdash .a-logo   { grid-area: logo; }
.osdash .a-ch     { grid-area: ch; }
.osdash .a-readme { grid-area: readme; }
.osdash .a-sys    { grid-area: sys; }
@media (max-width: 800px) {
  .osdash { grid-template-columns: 1fr; grid-template-areas: "logo" "ch" "readme" "sys"; }
}

/* dashboard logo block — compact, like the OS .tui-logo (not a website hero) */
.oslogo { text-align: center; padding: 6px 0 2px; }
.oslogo pre {
  margin: 0 auto; color: var(--fg-bright); font-weight: 700;
  font-size: clamp(6px, 1.55vw, 13px); line-height: 1.05; display: inline-block; white-space: pre;
  text-shadow: 0 0 7px rgba(86,255,128,.45);
  animation: logoLife 7s infinite;
}
@keyframes logoLife {
  0%,90%,100% { transform: translateZ(0); }
  91% { transform: translate(-1px,1px); text-shadow: -1px 0 0 #e86a5c, 1px 0 0 #36c6ff, 0 0 7px rgba(86,255,128,.45); }
  93% { transform: translate(1px,-1px); text-shadow: 1px 0 0 #e86a5c, -1px 0 0 #36c6ff; }
  95% { transform: translate(0,0); }
}
.oslogo .tagline { color: var(--fg-dim); margin: 10px auto 0; font-size: 14px; }
.oslogo .tagline::before { content: "> "; color: var(--fg-dim); }
.oslogo .motd { color: var(--fg-dim); margin: 4px auto 0; font-size: 13px; }
.blink { animation: blink 1.1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ----------------------------------------------------------- app split --- */
.appsplit { display: flex; gap: 16px; align-items: stretch; }
.appsplit .pane-list { flex: 0 0 25em; min-width: 0; }
.appsplit .pane-view { flex: 1; min-width: 0; }
@media (max-width: 820px) {
  .appsplit { flex-direction: column; }
  .appsplit .pane-list { flex: auto; }
}

/* -------------------------------------------------------- OS list rows ---- */
.oslist { display: flex; flex-direction: column; }
.osrow {
  display: flex; align-items: center; gap: .6em; padding: .2em .45em;
  color: var(--fg); white-space: nowrap; border-bottom: 1px solid transparent;
}
.osrow:hover { background: var(--bg-3); text-decoration: none; }
.osrow .marker { flex: 0 0 auto; width: 1ch; color: var(--fg-dim); }
.osrow:hover .marker { color: var(--fg-bright); }
.osrow .name { color: var(--fg-bright); font-weight: 700; }
.osrow .slug { color: var(--fg-dim); }
.osrow .desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--fg-dim); }
.osrow .num { color: var(--fg-dim); } .osrow .num b { color: var(--amber); font-weight: 700; }
.osrow .pill { flex: 0 0 auto; font-size: 12px; padding: 0 .5em; border: 1px solid var(--border-lit); color: var(--fg-bright); }
.osrow .pill.lock { border-color: var(--border); color: var(--fg-dim); }
.osrow .led {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--fg-bright); box-shadow: 0 0 7px var(--fg-bright);
  margin-right: .45em; animation: pulse 1.9s ease-in-out infinite; vertical-align: middle;
}
@keyframes pulse { 0%,100% { opacity: 1; box-shadow: 0 0 9px var(--fg-bright); } 50% { opacity: .35; box-shadow: 0 0 2px var(--fg-bright); } }
/* the selected/open row (current challenge) — phosphor highlight like the OS.
   Drop the phosphor glow on the dark-on-bright text so it stays crisp. */
.osrow.sel { background: var(--sel-bg); color: var(--sel-fg); text-shadow: none; }
.osrow.sel .marker, .osrow.sel .name, .osrow.sel .slug, .osrow.sel .desc, .osrow.sel .num, .osrow.sel .num b { color: var(--sel-fg); }
.osrow.sel .pill { border-color: var(--sel-fg); color: var(--sel-fg); }
.osrow.sel .led { background: var(--sel-fg); box-shadow: none; animation: none; }
.osrow.up .name { color: var(--fg-dim); font-weight: 400; }
.osrow.file .name { font-weight: 400; }
/* locked file: not openable to guests — dim, non-interactive, LOCKED pill */
.osrow.lock { color: var(--fg-dim); cursor: default; }
.osrow.lock:hover { background: transparent; }
.osrow.lock .marker { color: var(--fg-dim); font-size: 11px; }
.osrow.lock .name { color: var(--fg-dim); }
.list-foot { margin-top: .5em; border-top: 1px solid var(--border); padding: .5em .45em 0; color: var(--fg-dim); }
.list-foot b { color: var(--fg-bright); font-weight: 700; }

/* -------------------------------------------------------- viewer pane ----- */
.viewer { display: flex; flex-direction: column; }
.viewer .vpath { color: var(--fg-dim); padding: 0 .2em .5em; border-bottom: 1px solid var(--border); margin-bottom: .7em; }
.viewer .vpath b { color: var(--fg-bright); font-weight: 700; }

/* -------------------------------------------------------- system grid ----- */
.sysgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .25em 2.4em; }
.sysgrid .kv { display: flex; gap: .7em; }
.sysgrid .kv .k { color: var(--fg-dim); min-width: 5.5em; }
.sysgrid .kv .v { color: var(--fg); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 620px) { .sysgrid { grid-template-columns: 1fr; } }

/* ---- feature cardgrid (readme window) --------------------------------- */
.cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 18px; }
.card { border: 1px solid var(--border); background: var(--bg); padding: 18px 18px; transition: border-color .15s, box-shadow .15s; }
.card:hover { border-color: var(--border-lit); box-shadow: 0 0 20px -8px rgba(58,166,83,.45); }
.card .ico { color: var(--amber); font-weight: 700; letter-spacing: .1em; margin-bottom: 7px; text-shadow: 0 0 10px rgba(227,179,65,.35); }
.card h3 { margin: 0 0 4px; color: var(--fg-bright); font-size: 15px; }
.card p { margin: 0; color: var(--fg-dim); }

/* ---- how-it-works ----------------------------------------------------- */
.how { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.how li { display: flex; gap: 18px; align-items: flex-start; }
.how .k { color: var(--amber); font-weight: 700; font-size: 26px; line-height: 1; min-width: 1.7em; text-shadow: 0 0 14px rgba(227,179,65,.4); }
.how h3 { margin: 0 0 3px; color: var(--fg-bright); font-size: 15px; }
.how p { margin: 0; color: var(--fg-dim); }

/* ---- section heading inside a window ---------------------------------- */
.win h2 { color: var(--fg-bright); font-size: 18px; margin: 0 0 12px; }
.win h2::before { content: "// "; color: var(--fg-dim); }

/* ================================================================= prose === */
.prose { max-width: 78ch; }
.prose h1, .prose h2, .prose h3 { color: var(--fg-bright); margin: 1.2em 0 .4em; }
.prose h1 { font-size: 22px; } .prose h2 { font-size: 17px; } .prose h3 { font-size: 15px; }
.prose h1::before, .prose h2::before { content: "// "; color: var(--fg-dim); }
.prose p { margin: .7em 0; }
.prose ul, .prose ol { padding-left: 1.4em; } .prose li { margin: .3em 0; }
.prose a { color: var(--cyan); }
.prose code { color: var(--amber); background: var(--bg); padding: 1px 5px; }
.prose pre { background: var(--bg); border: 1px solid var(--border); padding: 12px 14px; overflow: auto; }
.prose em { color: var(--amber); font-style: normal; }

/* ======================================================== challenge detail = */
.detail-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.detail-head .h1 { font-size: clamp(20px,3vw,28px); color: var(--fg-bright); font-weight: 700; margin: 0; }
.detail-head .h1::before { content: "> "; color: var(--fg-dim); }
.detail-head .pill { font-size: 13px; padding: 1px 10px; border: 1px solid var(--border-lit); color: var(--fg-bright); }
.detail-head .pill.lock { border-color: var(--border); color: var(--fg-dim); }
.detail-meta { display: flex; gap: 24px; color: var(--fg-dim); margin: 10px 0 0; flex-wrap: wrap; }
.detail-meta b { color: var(--amber); font-weight: 700; }
.flaglist { display: flex; flex-direction: column; }
.flaglist .f { display: grid; grid-template-columns: 1.4ch 15em 1fr; gap: .8em; padding: .4em .2em; border-bottom: 1px dashed var(--border); align-items: baseline; }
.flaglist .f:last-child { border-bottom: 0; }
.flaglist .f .i { color: var(--fg-dim); }
.flaglist .f .n { color: var(--fg-bright); }
.flaglist .f .d { color: var(--fg-dim); }
@media (max-width: 560px) { .flaglist .f { grid-template-columns: 1.4ch 1fr; } .flaglist .f .d { grid-column: 2; } }
.start-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid var(--border); }
.start-row .hint { color: var(--fg-dim); }

/* ================================================================= login === */
.login { max-width: 30em; margin: 7vh auto 3vh; }
.login .bd { padding: 1.5em 1.5em 1.3em; }
.login p { color: var(--fg-dim); margin: 0 0 1em; }
.login .prov { display: block; margin: .6em 0; text-align: center; }
.login .notice { color: var(--amber); font-size: 14px; margin: 1em 0 0; }
.login .notice.closed { margin: 0 0 1.1em; padding: .6em .7em; border: 1px solid var(--amber); background: var(--bg); }
.login .boot { color: var(--fg-dim); margin: 0 0 1.2em; }
.login .boot .ok { color: var(--fg-bright); }

/* ================================================================= error === */
.error-screen { max-width: 42em; margin: 7vh auto 3vh; }
.error-screen .code {
  font-size: clamp(54px, 14vw, 108px); font-weight: 700; line-height: 1; color: var(--red);
  text-shadow: 0 0 22px rgba(232,106,92,.45); margin: 0;
}
.error-screen .halt { color: var(--amber); margin: .2em 0 1em; }
.error-screen pre.dump { color: var(--fg-dim); white-space: pre-wrap; margin: 0 0 1.2em; }
.error-screen pre.dump .err { color: var(--red); }
.error-screen .actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 1.2em; }

/* ===================================================== landing: boot hero == */
/* CRT power-on when the page loads */
@media (prefers-reduced-motion: no-preference) {
  .desktop { animation: crt-on .5s ease-out; }
}
@keyframes crt-on {
  0%   { opacity: .05; filter: brightness(2.6) contrast(1.3); transform: scaleY(.94); }
  55%  { opacity: 1; }
  100% { filter: none; transform: none; }
}

.boot > .bd { padding: 1.2em 1.4em 1.15em; }
.bootwrap { max-width: 46em; margin: 0 auto; }
.cmd { margin: 0; color: var(--fg); white-space: nowrap; overflow: hidden; }
.cmd .ps1 { color: var(--fg-dim); }
.cmd .typed { color: var(--fg-bright); font-weight: 700; }
.cmd .cur { color: var(--fg-bright); }
.bootseq { list-style: none; margin: .5em 0 0; padding: 0; }
.bl { display: flex; align-items: baseline; gap: .7em; }
.bl .tag { flex: 0 0 auto; color: var(--fg-bright); font-weight: 700; }
.bl .lbl { flex: 0 0 auto; color: var(--fg); }
.bl .val { flex: 0 0 auto; color: var(--fg-bright); }
.bl.warn .tag, .bl.warn .val { color: var(--amber); text-shadow: 0 0 9px rgba(227,179,65,.35); }
.bl .leader { flex: 1 1 0; min-width: 1.5em; overflow: hidden; white-space: nowrap; color: var(--fg-dim); opacity: .75; }
.bl .leader::before { content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ."; }
.boot .oslogo { margin-top: 20px; }
.heroctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.heroctas.start { justify-content: flex-start; margin-top: 14px; }
.btn.big { padding: .45em 1.5em; font-weight: 700; }
.boot .motd { text-align: center; color: var(--fg-dim); font-size: 13px; margin: 16px 0 0; }

/* boot animation gating — content is visible by default (no-JS, SEO, reduced
   motion); landing.js adds .anim then reveals pieces in sequence. The delayed
   forceshow animation is a pure-CSS failsafe if the script dies mid-boot. */
.boot.anim .bl, .boot.anim .rv { visibility: hidden; animation: forceshow 0s 2.8s forwards; }
.boot.anim .bl.on, .boot.anim .rv.on { visibility: visible; animation: none; }
.boot.anim .oslogo.on { animation: bloomin .4s ease-out; }
@keyframes forceshow { to { visibility: visible; } }
@keyframes bloomin {
  0% { filter: brightness(2.6); transform: scale(1.015); }
  100% { filter: none; transform: none; }
}

/* --------------------------------- landing: primary challenge list ------- */
/* the main event: full-width, lit, with an explicit call to action */
.a-ch .osrow { padding: .4em .45em; }          /* roomier rows — this is what to click */
.listhint { margin: 0 .1em .7em; color: var(--fg-bright); }
.listhint kbd { color: var(--bg); background: var(--fg-dim); padding: 0 .3em; font: inherit; }

/* -------------------------------------------------- landing: how-to-play --- */
.howtx { list-style: none; margin: .8em 0 0; padding: 0 0 0 .2em; }
.howtx li { display: flex; align-items: baseline; gap: 1em; padding: .55em 0; flex-wrap: wrap; }
.howtx .n { color: var(--amber); font-weight: 700; text-shadow: 0 0 10px rgba(227,179,65,.35); }
.howtx h3 { margin: 0; flex: 0 0 12em; color: var(--fg-bright); font-size: 15px; text-transform: uppercase; letter-spacing: .06em; }
.howtx p { margin: 0; flex: 1 1 24em; min-width: 16em; color: var(--fg-dim); }

@media (max-width: 620px) {
  .bl .lbl, .bl .val { white-space: normal; }
  .boot > .bd { padding: 1em .9em; }
  .howtx h3 { flex-basis: auto; }
  .howtx p { flex-basis: 100%; padding-left: 2.4em; }
}

/* ============================================================ motion-safe == */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .oslogo pre { animation: none; }
  .osrow .led { animation: none; }
  .blink { animation: none; }
  .desktop { animation: none; }
  html { scroll-behavior: auto; }
}
@media (max-width: 620px) {
  .menubar .brand { letter-spacing: .06em; padding: 0 .6em; }
  .menubar .clock { display: none; }
}