/* Zeeded front page v3 (11-04): its own look, away from the owner's personal site: a green-black circuit board, phosphor mint
   current, the red wall; a dot-matrix name (Doto), Geist for words, Geist Mono for the small spaced labels. */
:root {
  --bg: #010504;
  --ink: #e8f3ee;
  --dim: rgba(232, 243, 238, 0.74);
  --faint: rgba(232, 243, 238, 0.46);
  --accent: #4dffa0;
  --red: #ff2a45;
  --line: rgba(77, 255, 160, 0.22);
  --title: "Doto", "Geist Mono", ui-monospace, monospace;
  --sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: clamp(16px, 6vw, 96px);
}

* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font: 300 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(77, 255, 160, 0.28); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

/* the scene */
#net { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; opacity: 0; transition: opacity 1.4s ease; }
#net.ready { opacity: 1; }
html.no-webgl #net { background: radial-gradient(ellipse at 50% 30%, #0b1c30 0%, var(--bg) 70%); }
html.dragging, html.dragging * { cursor: grabbing !important; user-select: none; }
.veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(circle, rgba(77, 255, 160, 0.07) 0.7px, transparent 1px) 0 0 / 5px 5px,
    linear-gradient(90deg, rgba(1, 5, 4, 0.72) 0%, rgba(1, 5, 4, 0.35) 35%, rgba(1, 5, 4, 0) 60%),
    linear-gradient(180deg, rgba(1, 5, 4, 0.6) 0%, rgba(1, 5, 4, 0) 22%, rgba(1, 5, 4, 0) 50%, rgba(1, 5, 4, 0.88) 100%),
    radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(1, 5, 4, 0.55) 100%);
}
#strings {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  font: 500 10px/1 var(--mono); letter-spacing: 0.18em; color: var(--accent);
}
#strings span {
  position: absolute; opacity: 0; white-space: nowrap;
  animation: flick 7.5s linear infinite;
  text-shadow: 0 0 8px rgba(77, 255, 160, 0.55);
}
#strings span:nth-child(3n) { color: var(--red); text-shadow: 0 0 8px rgba(255, 42, 69, 0.55); }
@keyframes flick {
  0% { opacity: 0; } 5% { opacity: 0.8; } 7% { opacity: 0.15; } 9% { opacity: 0.7; }
  65% { opacity: 0.45; } 100% { opacity: 0; }
}
/* v18: the dial dome's error line when a sector crashes (net.js places it beside the sector): the data strings' look, red, then
   mint while it repairs */
.dome-err {
  position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none; opacity: 0; white-space: nowrap; will-change: transform;
  font: 500 10px/1 var(--mono); letter-spacing: 0.18em; color: var(--red); text-shadow: 0 0 8px rgba(255, 42, 69, 0.55);
  transition: opacity 0.35s ease;
}
.dome-err.on { opacity: 0.9; transition-duration: 0.05s; animation: dome-err-in 0.3s steps(1, end); }
.dome-err.fix { color: var(--accent); text-shadow: 0 0 8px rgba(77, 255, 160, 0.55); }
@keyframes dome-err-in {
  0% { opacity: 0; } 20% { opacity: 1; text-shadow: 3px 0 var(--red), -3px 0 var(--accent); } 40% { opacity: 0.2; }
  60% { opacity: 1; clip-path: inset(0 0 45% 0); } 80% { opacity: 0.7; clip-path: none; } 100% { opacity: 0.9; }
}

/* the glitch open (glitch.js): covers the page from the first paint; a failsafe clears it if the script never runs */
#glitch {
  position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 20; pointer-events: none;
  background: var(--bg); image-rendering: pixelated;
  animation: zd-failsafe 0.3s 3s forwards;
}
@keyframes zd-failsafe { to { opacity: 0; visibility: hidden; } }
html.glitching .hero, html.glitching .top { animation: zd-tear 1s steps(1, end) backwards; }
html.glitch-short .hero, html.glitch-short .top { animation-duration: 0.5s; }
@keyframes zd-tear {
  0% { opacity: 0; }
  14% { opacity: 1; clip-path: inset(40% 0 48% 0); transform: translateX(-14px); text-shadow: 3px 0 var(--red), -3px 0 var(--accent); }
  22% { clip-path: inset(8% 0 66% 0); transform: translateX(10px); }
  30% { clip-path: inset(60% 0 6% 0); transform: translateX(-6px); }
  38% { opacity: 0; }
  46% { opacity: 1; clip-path: inset(0); transform: translateX(4px) skewX(-6deg); }
  54% { clip-path: inset(30% 0 28% 0); transform: translateX(-20px); }
  64% { clip-path: inset(0); transform: none; text-shadow: 2px 0 var(--red), -2px 0 var(--accent); }
  82% { text-shadow: 1px 0 var(--red), -1px 0 var(--accent); }
  100% { opacity: 1; clip-path: inset(0); transform: none; }
}

/* the radial HUD on One WTC's beacon (net.js moves it) */
.hud { position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; will-change: transform; }
.hud.on { opacity: 1; transition-duration: 0.6s; }
.hud-rings { position: absolute; left: -90px; top: -90px; overflow: visible; }
.ring { fill: none; stroke: var(--accent); stroke-width: 1; transform-origin: 0 0; }
.r1 { opacity: 0.8; stroke: var(--red); stroke-dasharray: 2 4; animation: spin 6s linear infinite; }
.r2 { opacity: 0.55; stroke-dasharray: 40 8 4 8; animation: spin 14s linear infinite reverse; }
.r3 { opacity: 0.35; stroke-dasharray: 1 5; animation: spin 30s linear infinite; }
.r4 { opacity: 0.22; stroke-dasharray: 90 30 10 30; animation: spin 48s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.hud-dot {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px;
  border: 1px solid var(--accent); transform: rotate(45deg); box-shadow: 0 0 8px rgba(77, 255, 160, 0.5);
}
.hud-line { position: absolute; left: 0; top: -70px; overflow: visible; transform-origin: 0 70px; }
.hud-line path, .probe-line path {
  fill: none; stroke: var(--accent); stroke-width: 1; opacity: 0.75;
  stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 0.9s ease 0.2s;
}
.hud.on .hud-line path, .probe.on .probe-line path { stroke-dashoffset: 0; }
.hud-tag, .probe-tag {
  position: absolute; display: flex; flex-direction: column; gap: 3px; white-space: nowrap;
  font: 500 9.5px/1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(77, 255, 160, 0.75);
}
.hud-tag { left: 156px; top: -86px; }
.hud-tag b, .probe-tag b { font-weight: 500; color: var(--ink); letter-spacing: 0.2em; }
.hud.flip .hud-line { transform: scaleX(-1); }
.hud.flip .hud-tag { left: auto; right: 156px; align-items: flex-end; }
/* v19 (his look 11-07): with the beacon high on the screen the tag drops below it (net.js adds .low), clear of the bar's links */
.hud.low .hud-line { transform: scaleY(-1); }
.hud.low.flip .hud-line { transform: scale(-1, -1); }
.hud.low .hud-tag { top: 34px; }
/* the probe: the building under the cursor */
.probe { position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; will-change: transform; }
.probe.on { opacity: 1; }
.probe-dot { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border: 1px solid var(--ink); }
.probe-line { position: absolute; left: 0; top: -40px; overflow: visible; }
.probe-line path { transition-duration: 0.35s; transition-delay: 0s; }
.probe-tag { left: 76px; top: -50px; }
/* the board view's silkscreen labels */
.labels { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; }
.labels span {
  position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform;
  font: 500 9px/1 var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(232, 243, 238, 0.62);
  text-shadow: 0 0 6px rgba(1, 5, 4, 0.9);
}
.labels span:first-child { color: var(--accent); }
.live {
  display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; vertical-align: 1px;
  background: #5dff9c; box-shadow: 0 0 6px #5dff9c; animation: live 2.4s steps(1, end) infinite;
}
@keyframes live { 0%, 70% { opacity: 1; } 71%, 100% { opacity: 0.25; } }

/* the bar */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px clamp(16px, 4vw, 48px);
}
.mark { font: 500 12px/1 var(--mono); letter-spacing: 0.32em; color: var(--ink); text-decoration: none; }
.diamond { color: var(--accent); margin-right: 0.7em; text-shadow: 0 0 10px rgba(77, 255, 160, 0.6); }
nav { display: flex; gap: clamp(14px, 2.5vw, 32px); }
nav a {
  font: 500 10.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dim); text-decoration: none; transition: color 0.2s;
}
nav a:hover, nav a:focus-visible { color: var(--accent); }
/* v13: the user icon at the top right (their word 11-05: a "user icon" in the top right for the code sign-in, so the front page always
   shows the way back in): an outline person when signed out (Enter code), a lit circle with the tester's initial when signed in */
.top nav { align-items: center; }
.me-link { display: inline-flex; align-items: center; gap: 10px; }
.me-dot {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--ink); font: 600 12px/1 var(--mono); letter-spacing: 0; text-transform: none;
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.me-dot svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.me-link:hover .me-dot, .me-link:focus-visible .me-dot { border-color: var(--accent); color: var(--accent); }
.me-link.is-in .me-dot { background: var(--accent); border-color: var(--accent); color: #021a0e; box-shadow: 0 0 14px rgba(77, 255, 160, 0.45); }
.me-link.is-in:hover .me-dot, .me-link.is-in:focus-visible .me-dot { color: #021a0e; box-shadow: 0 0 20px rgba(77, 255, 160, 0.7); }
.me-link.is-in .me-label { color: var(--ink); }
@media (max-width: 560px) {
  .me-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* the hero */
main { position: relative; z-index: 2; }
.hero {
  min-height: 100vh; max-width: 1100px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--gutter) 15vh;
}
.eyebrow {
  display: flex; align-items: center; gap: 14px; margin: 0 0 18px;
  font: 500 11px/1.4 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim);
}
.eyebrow.small { color: var(--accent); margin-bottom: 12px; }
.rule { width: 36px; height: 1px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
h1 {
  margin: 0 0 22px;
  font: 700 clamp(56px, 11.5vw, 160px)/0.9 var(--title); letter-spacing: 0.02em; text-transform: uppercase;
  text-shadow: 0 0 36px rgba(77, 255, 160, 0.28);
}
.lede { max-width: 34em; margin: 0 0 32px; color: var(--dim); font-size: clamp(16px, 1.6vw, 19px); }
.enter {
  align-self: flex-start; padding-bottom: 8px;
  font: 500 11px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); transition: color 0.2s, border-color 0.2s;
}
.enter:hover, .enter:focus-visible { color: var(--accent); border-color: var(--accent); }

/* about */
.about { padding: 14vh var(--gutter) 10vh; }
.cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(16px, 2.4vw, 32px);
  max-width: 1100px;
}
.cols h2 { margin: 0 0 12px; font: 700 30px/1 var(--title); text-transform: uppercase; letter-spacing: 0.04em; }
.cols p { margin: 0; max-width: 28em; }
.cols .eyebrow { margin-bottom: 12px; }
/* v6d (the owner, 11-05: "make the txt a bit easier to read. i think the box on the furthest scroll makes it pretty easy to read compared
   to the txt being in the open"): the hero's words and the three About columns sit in the form panel's box (.card, the same look) */
.card {
  position: relative; padding: clamp(20px, 2.6vw, 32px);
  background: rgba(4, 8, 18, 0.64); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.card::before, .card::after { content: ""; position: absolute; width: 14px; height: 14px; }
.card::before { top: -1px; left: -1px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.card::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.card p:not(.eyebrow) { color: rgba(232, 243, 238, 0.86); }
.hero-card { align-self: flex-start; width: fit-content; max-width: min(900px, 100%); padding: clamp(22px, 3vw, 40px) clamp(22px, 3.4vw, 48px); }
.hero-card .lede { margin-bottom: 26px; }
.hero-card .enter { display: inline-block; }
/* 11-07 (his box: the status line + the live readouts): the One WTC tag's look inside the boxes (mono, mint, the live dot; the dot's
   blink stops with Pause and with reduced motion, as the tag's does) */
.card p.world-line, .card p.readout {
  display: flex; align-items: center; margin: 0;
  font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(77, 255, 160, 0.8);
}
.card p.world-line { margin: -8px 0 20px; }
.card p.readout { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 9.5px; letter-spacing: 0.16em; }
.world-line .live, .readout .live { flex: none; }
.cols .card { display: flex; flex-direction: column; } /* the readouts line up along the boxes' bottoms */
.cols .card p[data-decode] { margin-bottom: 18px; }
.cols .card p[data-decode] + p[data-decode] { margin-top: -10px; } /* a second line of the same thought (02's mouse-only line) */
.cols .card p.readout { margin-top: auto; }
/* decode-in (main.js): the scrambling front of a line, and the part still to come (in place but unseen, so nothing reflows) */
.dz-front { color: var(--accent); text-shadow: 0 0 8px rgba(77, 255, 160, 0.55); }
.dz-rest { color: transparent; text-shadow: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* the alpha door */
.alpha { min-height: 80vh; display: flex; align-items: center; padding: 8vh var(--gutter) 16vh; }
.panel {
  position: relative; width: min(560px, 100%);
  padding: clamp(20px, 3vw, 32px);
  background: rgba(4, 8, 18, 0.64); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.panel::before, .panel::after { content: ""; position: absolute; width: 14px; height: 14px; }
.panel::before { top: -1px; left: -1px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.panel::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.tabs { display: flex; gap: 24px; margin-bottom: 24px; }
.tabs button {
  padding: 0 0 8px; background: none; border: 0; border-bottom: 1px solid transparent; cursor: pointer;
  font: 500 11px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint);
}
.tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--accent); }
.tabs button:hover { color: var(--ink); }
label { display: block; margin-bottom: 10px; font: 500 10.5px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
input {
  flex: 1 1 220px; min-width: 0; padding: 14px;
  background: rgba(1, 5, 4, 0.72); border: 1px solid var(--line); border-radius: 0; outline: none;
  color: var(--ink); font: 400 15px/1.2 var(--mono); letter-spacing: 0.04em;
}
input::placeholder { color: rgba(232, 243, 238, 0.3); }
/* v15 (their box 11-06): the optional "What do you play?" line under the email */
label.opt { margin-top: 18px; display: flex; align-items: baseline; gap: 10px; }
label.opt span { color: var(--faint); letter-spacing: 0.14em; text-transform: none; font-size: 10px; }
#play { font-size: 14px; } /* 11-06: was #about (the About section shares that id) */
.row-about { flex-basis: 100%; color: var(--dim); font: 400 13px/1.45 var(--sans); letter-spacing: 0; overflow-wrap: anywhere; }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 18px rgba(77, 255, 160, 0.18); }
button[type="submit"], .button {
  padding: 15px 18px; border: 0; cursor: pointer;
  background: var(--ink); color: var(--bg);
  font: 500 11px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; transition: background 0.2s;
}
button[type="submit"]:hover, button[type="submit"]:focus-visible, .button:hover { background: var(--accent); }
.fine { margin: 14px 0 0; font-size: 13px; color: var(--faint); }
/* live site only: the bot check and the sign-in step in front of the code box */
.ts { margin-top: 14px; min-height: 65px; }
.signin { margin-bottom: 20px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
a.button { display: inline-block; text-decoration: none; }
/* 11-06 (his look at the live sign-in: "kinda smashed together ... didnt have your usual google logo"): Google's own sign-in button
   (white, the four-colour G, 40 px tall, as Google's branding page draws it), then an "or" rule, then the email link with room around it */
.signin .fine { margin-bottom: 14px; }
.google-row { margin-bottom: 18px; }
.gbtn { display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px 0 12px; background: #fff; color: #1f1f1f;
  border: 1px solid #747775; border-radius: 4px; font: 500 14px/1 Roboto, Arial, sans-serif; letter-spacing: 0.25px; text-decoration: none; }
.gbtn:hover { background: #f1f3f4; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.gbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gbtn .glogo { width: 20px; height: 20px; flex: none; }
.or { display: flex; align-items: center; gap: 12px; margin-top: 18px; color: var(--faint); font: 500 10.5px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.status { min-height: 1.4em; margin: 16px 0 0; font: 500 12px/1.4 var(--mono); letter-spacing: 0.06em; color: var(--dim); }
.status[data-kind="good"] { color: var(--accent); }
.status[data-kind="bad"] { color: var(--red); }

/* the foot */
.foot {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  padding: 24px clamp(16px, 4vw, 48px);
  font: 500 10px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint);
  border-top: 1px solid rgba(77, 255, 160, 0.08);
}

/* the launcher */
.launch { min-height: 100vh; max-width: 1100px; padding: 20vh var(--gutter) 10vh; }
.servers { margin-top: 36px; border-top: 1px solid var(--line); }
.server {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; align-items: center;
  padding: 20px 0; border-bottom: 1px solid var(--line);
  font: 500 12px/1.5 var(--mono); letter-spacing: 0.1em; color: var(--dim);
}
.server strong { color: var(--ink); font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; }
.server .state { color: var(--faint); text-transform: uppercase; letter-spacing: 0.2em; font-size: 10.5px; }
.server .state::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--faint); vertical-align: 1px; }
.ghost {
  margin-top: 32px; padding: 12px 14px; cursor: pointer;
  background: none; border: 1px solid var(--line); color: var(--dim);
  font: 500 10.5px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase;
}
.ghost:hover { color: var(--accent); border-color: var(--accent); }
/* v8: the launcher's step A (a world to play, the play page's stand-in, the feedback box) */
.launch-card { max-width: 760px; }
.launch-card .servers { margin-top: 28px; }
.server .play { justify-self: end; text-decoration: none; padding: 13px 22px; }
.server .state.growing { color: var(--accent); }
.server .state.growing::before { background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: pulse 2.4s ease-in-out infinite; }
.launch-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.launch-actions .ghost { margin-top: 0; }
a.ghost { display: inline-block; text-decoration: none; }
@keyframes pulse { 50% { opacity: 0.35; } }
dialog.feedback {
  width: min(520px, calc(100vw - 32px)); margin: auto;
  color: var(--ink); background: rgba(4, 8, 18, 0.94); overflow: visible; /* the corner ticks sit 1 px outside: no scrollbars */
}
dialog.feedback form { max-height: calc(100vh - 110px); overflow-y: auto; overflow-x: hidden; }
dialog.feedback::backdrop { background: rgba(1, 3, 6, 0.66); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
dialog.feedback label { margin-top: 18px; }
dialog.feedback select, dialog.feedback textarea {
  display: block; width: 100%; padding: 12px 14px;
  background: rgba(1, 5, 4, 0.72); border: 1px solid var(--line); border-radius: 0; outline: none;
  color: var(--ink); font: 400 14px/1.45 var(--mono); letter-spacing: 0.02em;
}
dialog.feedback textarea { resize: vertical; min-height: 120px; }
dialog.feedback select:focus, dialog.feedback textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
dialog.feedback .fb-row { margin-top: 18px; align-items: center; }
dialog.feedback .fb-row .ghost { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .server .state.growing::before { animation: none; } }
/* v9: the tester's account page */
.account .tabs { margin-top: 26px; }
.account input[type="text"] { display: block; width: 100%; box-sizing: border-box; }
.account label { margin-top: 18px; }
.account .check { display: flex; align-items: center; gap: 12px; margin: 22px 0 18px; text-transform: none; letter-spacing: 0.02em; font: 400 14px/1.4 var(--sans); color: var(--ink); cursor: pointer; }
.account .check input { flex: none; width: 16px; height: 16px; padding: 0; margin: 0; accent-color: var(--accent); }
.account .danger { margin-top: 34px; padding-top: 4px; border-top: 1px solid var(--line); }
.account .danger .ghost { margin-top: 14px; }
.account .danger .ghost:hover { color: var(--red); border-color: var(--red); }
.account .ghost:disabled { opacity: 0.45; cursor: default; }
.notes { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
.notes li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.notes li.empty { color: var(--faint); font: 500 12px/1.5 var(--mono); letter-spacing: 0.06em; }
.note-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
.note-kind { color: var(--ink); }
.note-when { color: var(--faint); }
.note-status { margin-left: auto; padding: 4px 8px; border: 1px solid var(--line); color: var(--dim); }
.note-status.s-seen, .note-status.s-planned { color: var(--ink); border-color: rgba(232, 243, 238, 0.35); }
.note-status.s-fixed { color: var(--accent); border-color: var(--accent); }
.note-status.s-wontfix { color: var(--faint); }
.note-text { margin: 10px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.55; }
.note-reply { margin: 10px 0 0; padding: 10px 12px; border-left: 2px solid var(--accent); background: rgba(77, 255, 160, 0.05); font-size: 14px; }
/* v10: THE SIGNED-IN APP (X-style: menu | list | detail; no city behind it) */
body.app { background: var(--bg); }
.shell { display: grid; grid-template-columns: 260px minmax(300px, 400px) minmax(0, 1fr); max-width: 1380px; margin: 0 auto; min-height: 100vh; }
.rail { position: sticky; top: 0; height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; padding: 18px 14px 18px 12px; border-right: 1px solid var(--line); }
.rail svg, .tabbar svg, .row-item svg, .back svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rail-mark { display: flex; align-items: center; gap: 12px; padding: 10px 14px 22px; color: var(--ink); text-decoration: none; font: 500 13px/1 var(--mono); letter-spacing: 0.32em; }
.rail-mark .diamond { color: var(--accent); font-size: 16px; }
.rail-item { position: relative; display: flex; align-items: center; gap: 18px; padding: 13px 14px; color: var(--ink); text-decoration: none; font: 400 18px/1 var(--sans); text-transform: none; letter-spacing: 0; border-radius: 999px; transition: background 0.15s; }
.rail-item:hover { background: rgba(232, 243, 238, 0.06); }
.rail-item[aria-current="page"] { color: var(--accent); font-weight: 400; }
.rail-item[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 2px; background: var(--accent); }
.badge { margin-left: auto; min-width: 20px; padding: 3px 6px; box-sizing: border-box; border-radius: 999px; background: var(--accent); color: var(--bg); font: 500 11px/1 var(--mono); text-align: center; }
.rail-cta { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px 4px 0; padding: 16px 18px; border: 0; border-radius: 999px; cursor: pointer; background: var(--ink); color: var(--bg); font: 500 12px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; }
.rail-cta svg { display: none; }
.rail-cta:hover { background: var(--accent); }
/* v11: who you are opens the account menu (a popover) */
.rail-me { margin-top: auto; width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 999px; background: none; color: var(--ink); cursor: pointer; text-align: left; font: inherit; transition: background 0.15s; }
.rail-me:hover, .rail-me:focus-visible { background: rgba(232, 243, 238, 0.06); }
.rail-me-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.rail-me-text b, .me-menu-head b { color: var(--ink); font: 400 15px/1.2 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-me-text span, .me-menu-head div span { display: block; color: var(--faint); font: 500 10.5px/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.rail .rail-more { width: 20px; height: 20px; stroke-width: 2.6; color: var(--dim); }
.avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--accent); background: rgba(77, 255, 160, 0.07); color: var(--accent); font: 700 16px/1 var(--title); }
.me-btn { display: none; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.me-btn .avatar { width: 34px; height: 34px; font-size: 14px; }
.me-menu { position: fixed; inset: auto; margin: 0; width: 280px; max-width: calc(100vw - 16px); padding: 8px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 14px; background: #06110d; color: var(--ink); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65); }
.me-menu::backdrop { background: transparent; }
.me-menu-head { display: flex; align-items: center; gap: 12px; padding: 8px 10px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.me-menu-head div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.me-menu a, .me-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; padding: 11px 12px; border: 0; border-radius: 8px; background: none; color: var(--ink); text-decoration: none; text-align: left; text-transform: none; letter-spacing: 0; font: 400 15px/1.2 var(--sans); cursor: pointer; }
.me-menu a:hover, .me-menu button:hover, .me-menu a:focus-visible, .me-menu button:focus-visible { background: rgba(232, 243, 238, 0.07); outline: none; }
.me-menu hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--line); }
.me-menu .me-out { color: var(--red); }
kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px; box-sizing: border-box; border: 1px solid rgba(232, 243, 238, 0.22); border-bottom-width: 2px; border-radius: 6px; background: rgba(232, 243, 238, 0.04); color: var(--ink); font: 500 11px/1 var(--mono); letter-spacing: 0.04em; }
.me-menu kbd { min-width: 22px; height: 22px; padding: 0 6px; color: var(--dim); }
/* v11: settings as grouped cards (T3 Code's settings as the model): the setting on the left, its control on the right */
.set-page { max-width: 720px; }
.set-section { margin: 28px 0 10px; font: 500 15px/1.2 var(--sans); color: var(--ink); letter-spacing: 0; text-transform: none; }
.set-card { border: 1px solid rgba(77, 255, 160, 0.16); border-radius: 12px; background: rgba(232, 243, 238, 0.02); overflow: hidden; }
.set-card.danger { border-color: rgba(255, 42, 69, 0.32); }
.set-row { display: flex; align-items: center; gap: 18px; padding: 16px 18px; }
.set-row + .set-row { border-top: 1px solid rgba(77, 255, 160, 0.09); }
.set-text { flex: 1; min-width: 0; }
.set-text b { display: block; color: var(--ink); font: 400 15px/1.3 var(--sans); }
.set-text span { display: block; margin-top: 4px; color: var(--faint); font-size: 13px; line-height: 1.45; }
.set-ctl { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 12px; max-width: 60%; }
.set-val { color: var(--dim); font: 500 12px/1.2 var(--mono); letter-spacing: 0.08em; text-align: right; }
.set-status { color: var(--faint); font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.08em; text-align: right; }
.set-status[data-kind="good"] { color: var(--accent); }
.set-status[data-kind="bad"] { color: var(--red); }
input.set-input { flex: 0 1 230px; width: 230px; padding: 9px 12px; border-radius: 8px; font: 400 14px/1.3 var(--sans); letter-spacing: 0; }
input.set-input:focus { box-shadow: 0 0 0 1px var(--accent); }
.set-btn { display: inline-flex; align-items: center; padding: 10px 15px; border: 1px solid rgba(232, 243, 238, 0.24); border-radius: 999px; background: none; color: var(--ink); text-decoration: none; white-space: nowrap; cursor: pointer; font: 500 10.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.set-btn:hover { color: var(--accent); border-color: var(--accent); }
.set-btn.solid { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.set-btn.solid:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.set-btn.danger { color: var(--red); border-color: rgba(255, 42, 69, 0.45); }
.set-btn.danger:hover { background: rgba(255, 42, 69, 0.1); border-color: var(--red); }
.set-btn:disabled { opacity: 0.45; cursor: default; }
input.switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 42px; min-width: 0; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: rgba(232, 243, 238, 0.18); cursor: pointer; transition: background 0.15s; }
input.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); transition: transform 0.15s; }
input.switch:checked { background: var(--accent); }
input.switch:checked::after { transform: translateX(18px); background: var(--bg); }
input.switch:focus { box-shadow: none; }
input.switch:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.keys { display: inline-flex; align-items: center; gap: 8px; }
.keys i { color: var(--faint); font: italic 400 12px/1 var(--sans); }
.set-page > .fine { margin-top: 16px; }
.col-list { border-right: 1px solid var(--line); min-height: 100vh; }
.col-detail { min-width: 0; padding: 26px clamp(18px, 3vw, 44px) 60px; }
.col-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 18px 18px 16px; background: rgba(1, 5, 4, 0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.col-title h2 { margin: 0; font: 400 22px/1.15 var(--sans); color: var(--ink); letter-spacing: 0; text-transform: none; }
.col-title p { margin: 4px 0 0; font-size: 13px; color: var(--faint); }
.back { display: none; padding: 6px; margin-left: -6px; border-radius: 999px; color: var(--ink); }
.row-item { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(77, 255, 160, 0.06); color: var(--ink); text-decoration: none; transition: background 0.15s; }
a.row-item:hover { background: rgba(232, 243, 238, 0.04); }
.row-item.active { background: rgba(77, 255, 160, 0.05); box-shadow: inset 2px 0 0 var(--accent); }
.row-item.muted { opacity: 0.45; }
.row-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.row-text b { font: 400 15.5px/1.3 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-text span { font-size: 13px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-item svg { width: 18px; height: 18px; color: var(--faint); }
.row-count { color: var(--dim); font: 500 11px/1 var(--mono); letter-spacing: 0.1em; white-space: nowrap; }
.chip-s { flex: none; padding: 4px 8px; border: 1px solid var(--line); color: var(--dim); font: 500 9.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
.chip-s.s-growing, .chip-s.s-fixed { color: var(--accent); border-color: var(--accent); }
.chip-s.s-seen, .chip-s.s-planned { color: var(--ink); border-color: rgba(232, 243, 238, 0.35); }
.chip-s.s-wontfix { color: var(--faint); }
.row-out b { color: var(--red); }
.empty-box { margin: 0; padding: 26px 18px; color: var(--faint); font-size: 14px; line-height: 1.55; }
.col-list .counts { padding: 18px; margin: 0; }
.detail-title { margin: 6px 0 14px; font: 700 clamp(28px, 3.2vw, 42px)/1.05 var(--title); color: var(--ink); }
.detail-lede { max-width: 560px; color: rgba(232, 243, 238, 0.86); font-size: 16px; line-height: 1.6; }
.detail-back { display: none; margin-bottom: 8px; }
.world-card .play-big { display: inline-block; margin: 10px 0 26px; padding: 18px 40px; text-decoration: none; font-size: 13px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 12px 26px; max-width: 520px; margin: 8px 0 22px; padding: 18px 0 0; border-top: 1px solid var(--line); }
.facts dt { color: var(--faint); font: 500 10.5px/1.6 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; }
.facts dd { margin: 0; color: var(--ink); font-size: 15px; }
.note-full .note-body { max-width: 620px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 17px; line-height: 1.6; color: var(--ink); }
.reply-box { max-width: 620px; margin-top: 18px; padding: 14px 16px; border-left: 2px solid var(--accent); background: rgba(77, 255, 160, 0.05); }
.reply-box p:last-child { margin: 0; font-size: 15px; line-height: 1.55; }
.panel-form { max-width: 560px; }
.panel-form label { margin-top: 20px; }
.panel-form input[type="text"] { display: block; width: 100%; box-sizing: border-box; }
.panel-form .row-btns { margin-top: 16px; }
.panel-form > button, .panel-form .row-btns button { margin-top: 16px; }
.panel-form .check { display: flex; align-items: center; gap: 12px; margin: 8px 0 10px; text-transform: none; letter-spacing: 0.02em; font: 400 15px/1.4 var(--sans); color: var(--ink); cursor: pointer; }
.panel-form .check input { flex: none; width: 16px; height: 16px; padding: 0; margin: 0; accent-color: var(--accent); }
.text-link { color: var(--accent); text-underline-offset: 3px; }
.danger-zone { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); }
.danger-zone .eyebrow.small { color: var(--red); }
.danger-btn { margin-top: 12px; }
.danger-btn:hover { color: var(--red); border-color: var(--red); }
.danger-btn:disabled { opacity: 0.45; cursor: default; }
.col-detail .notes { border-top: 1px solid var(--line); }
.col-detail .filters { margin: 4px 0 14px; }
.tabbar { display: none; }
@media (max-width: 1100px) {
  .shell { grid-template-columns: 76px minmax(260px, 360px) minmax(0, 1fr); }
  .rail { padding: 18px 10px; align-items: center; }
  .rail-word, .rail-item span, .rail-me-text, .rail-cta span, .rail .rail-more { display: none; }
  .rail-mark { padding: 10px 0 22px; }
  .rail-item { padding: 13px; }
  .rail-item[aria-current="page"]::before { left: -10px; }
  .badge { position: absolute; top: 4px; right: 2px; margin: 0; }
  .rail-cta { width: 52px; height: 52px; padding: 0; margin: 14px 0 0; }
  .rail-cta svg { display: block; }
  .rail-me { width: auto; padding: 6px; }
}
@media (max-width: 760px) {
  .shell { display: block; padding-bottom: 72px; }
  .rail { display: none; }
  .col-list { border-right: 0; min-height: 0; }
  .shell[data-view="list"] .col-detail { display: none; }
  .shell[data-view="detail"] .col-list { display: none; }
  .back, .detail-back { display: inline-flex; }
  .col-detail { padding: 16px 16px 40px; }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around; align-items: center; height: 64px; padding-bottom: env(safe-area-inset-bottom); background: rgba(1, 5, 4, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
  .tabbar a, .tabbar button { display: flex; padding: 12px; color: var(--dim); background: none; border: 0; cursor: pointer; }
  .tabbar a[aria-current="page"] { color: var(--accent); }
  .tabbar .tab-cta { padding: 12px; border-radius: 999px; background: var(--ink); color: var(--bg); }
  .tabbar [hidden] { display: none !important; }
  .me-btn { display: inline-flex; }
  .me-menu { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto; max-width: none; padding: 10px 10px calc(16px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; border-bottom: 0; }
  .me-menu::backdrop { background: rgba(0, 0, 0, 0.55); }
  .me-menu a, .me-menu button { padding: 14px 12px; font-size: 16px; }
}
@media (max-width: 560px) {
  .set-row.wide { flex-wrap: wrap; }
  .set-row.wide .set-ctl { max-width: none; width: 100%; justify-content: flex-start; flex-direction: row-reverse; }
  .set-row.wide input.set-input { flex: 1 1 auto; width: auto; }
}
/* v9c: the privacy page + its links */
.privacy { max-width: 760px; }
.privacy h2 { margin: 30px 0 10px; font: 500 11px/1.3 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.privacy ul { margin: 0; padding-left: 18px; }
.privacy li { margin: 0 0 10px; color: rgba(232, 243, 238, 0.86); line-height: 1.6; }
.privacy li b, .privacy p b { color: var(--ink); font-weight: 400; }
.privacy p { line-height: 1.6; }
.fine a, .foot a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.fine a:hover, .foot a:hover { color: var(--accent); }
[hidden] { display: none !important; } /* v9b: a styled link (a.ghost is inline-block) must still hide when told to */
/* v9b: the owner's inbox */
.inbox-page { max-width: 1100px; }
.inbox { max-width: 980px; }
.counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 22px 0 6px; }
.count { padding: 14px 16px; border: 1px solid var(--line); background: rgba(1, 5, 4, 0.5); }
.count b { display: block; font: 700 28px/1 var(--title); color: var(--ink); }
.count span { display: block; margin-top: 8px; font: 500 10px/1.2 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); }
.inbox .tabs { margin-top: 24px; flex-wrap: wrap; row-gap: 12px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.chip { padding: 8px 12px; cursor: pointer; background: none; border: 1px solid var(--line); color: var(--dim); font: 500 10px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; }
.chip[aria-pressed="true"] { color: var(--ink); border-color: var(--accent); }
.note-who { color: var(--dim); }
.note-ua { margin: 6px 0 0; font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.08em; color: var(--faint); }
.note-edit { display: grid; grid-template-columns: 150px 1fr auto; gap: 10px; align-items: start; margin-top: 12px; }
.note-edit select, .note-edit textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; background: rgba(1, 5, 4, 0.72); border: 1px solid var(--line); border-radius: 0;
  color: var(--ink); font: 400 13px/1.4 var(--mono); outline: none;
}
.note-edit textarea { resize: vertical; min-height: 42px; }
.note-edit select:focus, .note-edit textarea:focus { border-color: var(--accent); }
.note-edit button { padding: 12px 16px; border: 0; cursor: pointer; background: var(--ink); color: var(--bg); font: 500 10.5px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; }
.note-edit button:hover { background: var(--accent); }
.note-edit .status { grid-column: 1 / -1; margin: 0; min-height: 0; }
@media (max-width: 640px) { .note-edit { grid-template-columns: 1fr; } }
.rows { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--line); }
.rows li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 14px 0; border-bottom: 1px solid var(--line); font: 500 12px/1.4 var(--mono); letter-spacing: 0.05em; }
.rows li.empty { color: var(--faint); }
.row-main { color: var(--ink); overflow-wrap: anywhere; }
.row-side { color: var(--faint); margin-left: auto; }
.rows .ghost { margin-top: 0; }
.rows .status { flex-basis: 100%; margin: 0; min-height: 0; }
.note-reply::before { content: "Reply: "; color: var(--accent); font: 500 10.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }

@media (max-width: 560px) {
  nav a[href="#about"] { display: none; }
  .hero { padding-bottom: 12vh; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #strings, #glitch { display: none; }
  .live { animation: none; }
}

/* the short tear as the camera crosses the wall (glitch.js makes it) */
#tear { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 19; pointer-events: none; image-rendering: pixelated; }

/* the view switcher (v4): fly between landmarks; scrolling hands back to the route */
.views {
  position: fixed; right: clamp(16px, 4vw, 48px); top: 50%; transform: translateY(-50%); z-index: 5;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.views-label { font: 500 9px/1 var(--mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.views button {
  padding: 0 0 5px; background: none; border: 0; border-bottom: 1px solid transparent; cursor: pointer;
  font: 500 10px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); transition: color 0.2s, border-color 0.2s;
}
.views button i { font-style: normal; color: var(--faint); margin-right: 10px; }
.views button:hover, .views button:focus-visible { color: var(--ink); }
.views button[aria-pressed="true"] { color: var(--ink); border-color: var(--accent); }
.views button[aria-pressed="true"] i { color: var(--accent); }
/* (the phone layout of the bar and the views: "THE PHONE HEADER" further down; it replaced the wrapping row of 11-05) */

/* v12 (11-05): fixes from two outside reviews (Opus 5.5, Sonnet 5.5), each checked first */
body.app, .privacy { --faint: rgba(232, 243, 238, 0.58); } /* small grey text at about 5:1 (it was about 4:1) inside the app and the privacy page */
input::placeholder, textarea::placeholder { color: rgba(232, 243, 238, 0.5); }
:focus-visible { outline-width: 2px; }
.row-item.muted { opacity: 1; }
.row-item.muted b, .row-item.muted span { color: var(--faint); }
.me-menu a:focus-visible, .me-menu button:focus-visible, .rail-me:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.note-full .detail-title { font: 400 clamp(22px, 2.4vw, 30px)/1.25 var(--sans); text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.note-state { margin: 0 0 16px; }
.world-card .play-soon { display: inline-block; margin: 10px 0 4px; text-decoration: none; }
.world-card .play-soon + .fine { margin: 6px 0 22px; }
.col-head h2:focus, .col-detail h1:focus { outline: none; }
.empty-box .set-btn { margin-top: 12px; }
.hint-touch { display: none; }
html.no-webgl #net { opacity: 1; } /* the fallback gradient was never shown */
.hero { min-height: 100svh; }
.launch { min-height: 100svh; padding-top: clamp(96px, 14vh, 200px); }
dialog.feedback form { max-height: calc(100dvh - 110px); }
@media (max-width: 1100px) {
  /* the icon-only menu keeps its words for screen readers (display:none removed them) */
  .rail-item span, .rail-cta span { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 760px) {
  .tabbar { height: 68px; }
  .tabbar a, .tabbar button { flex-direction: column; align-items: center; gap: 3px; padding: 8px 10px; }
  .tabbar a span { font: 500 10px/1 var(--sans); }
  .tabbar .tab-cta { padding: 12px; }
}
@media (pointer: coarse) {
  .hint-mouse { display: none; }
  .hint-touch { display: inline; }
  nav a, .views button, .tabs button, .enter { min-height: 44px; display: inline-flex; align-items: center; }
  .set-btn, .chip, .ghost { min-height: 44px; }
  .me-btn, .back { padding: 6px; }
  input.switch { transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .ring, .live, .server .state.growing::before { animation: none; }
  html.glitching .hero, html.glitching .top { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* 11-06 (DR-49 / DR-50, his box): the 18+ tick, the field only bots see, the Pause button, paused motion */
label.tick { display: flex; align-items: center; gap: 10px; min-height: 24px; margin: 16px 0 0; font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1.3; letter-spacing: normal; text-transform: none; color: var(--dim); cursor: pointer; }
label.tick input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.views .motion-btn { margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; min-height: 24px; }
.views .motion-btn[aria-pressed="true"] { color: var(--accent); border-color: transparent; }
/* THE PHONE HEADER (11-06, his look on his phone, Chrome on Android: "on mobile the nav bar hard to see on the top"): the bar had no
   backing, so the page's words ran under ZEEDED, and the views wrapped onto 2-3 see-through rows over the panels. On a phone or a
   narrow window (and a phone on its side) the bar and the views are now ONE solid header: the bar (56 px), and under it the five views
   in ONE row that slides sideways (44 px, fading at its right edge). Pause moves up into the bar's middle, so it is always in sight
   and never sits over a view (a view half under it was a tap target too small to hit, and axe said so at 320 px). The page scrolls
   UNDER the header, never through it: the hero starts below it, and #about / #alpha land below it. Wider screens: as before. */
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  :root { --bar-h: 56px; --views-h: 44px; --head-h: calc(var(--bar-h) + var(--views-h) + 1px); }
  html { scroll-padding-top: calc(var(--head-h) + 12px); }
  .top, .views { background: var(--bg); } /* solid: at 94 % the words scrolling under it still showed through */
  .top { height: var(--bar-h); padding: 0 16px; }
  .views {
    top: var(--bar-h); left: 0; right: 0; transform: none; height: calc(var(--views-h) + 1px);
    flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 18px;
    padding: 0 28px 0 16px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none;
    border-bottom: 1px solid var(--line);
  }
  .views { --faint: rgba(232, 243, 238, 0.58); } /* the small numbers on the solid backing: 4.2:1 -> about 5:1 (the lift .alpha has) */
  .views::-webkit-scrollbar { display: none; }
  .views::after { /* the row's right edge fades: more to slide to (drawn over the row, not a box of its own) */
    content: ""; position: fixed; top: var(--bar-h); right: 0; width: 28px; height: var(--views-h); pointer-events: none;
    background: linear-gradient(90deg, rgba(1, 5, 4, 0), var(--bg));
  }
  .views-label { display: none; }
  .views button { flex: none; display: inline-flex; align-items: center; height: var(--views-h); min-height: 0; padding: 0; white-space: nowrap; }
  .views .motion-btn { position: fixed; top: calc((var(--bar-h) - 44px) / 2); left: 50%; transform: translateX(-50%); height: 44px; margin: 0; padding: 0 10px; }
  .hero { padding-top: calc(var(--head-h) + 16px); }
}
@media (max-width: 560px) { .views button i { display: none; } }
@media (min-width: 561px) and (max-width: 768px) { /* the bar's links are wider here (About, Enter code): Pause just after the mark */
  .views .motion-btn { left: 120px; transform: none; }
}
/* 11-06 (the same look, the scroll): on a touch screen a sideways drag on the page turns the view ("drag to look", as the foot says)
   and an up-down swipe scrolls; before, the browser took every drag as a scroll and cancelled the look a few pixels in */
@media (pointer: coarse) { main { touch-action: pan-y pinch-zoom; } }
.motion-ico { display: inline-block; width: 8px; height: 9px; box-sizing: border-box; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.motion-btn[aria-pressed="true"] .motion-ico { width: 0; height: 0; border-right: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
html.motion-off *, html.motion-off *::before, html.motion-off *::after { animation-play-state: paused !important; }
.row-fast { color: var(--warn, #ffb86b); font: 500 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; margin-left: 8px; }
.issue-edit { grid-template-columns: 1fr 1fr 160px auto; }
.issue-edit input[type="text"] { min-width: 0; width: 100%; box-sizing: border-box; padding: 10px 12px; background: rgba(1, 5, 4, 0.72); border: 1px solid var(--line); border-radius: 0; color: var(--ink); font: 400 13px/1.4 var(--mono); outline: none; }
.issue-edit input[type="text"]:focus { border-color: var(--accent); }
@media (max-width: 760px) { .issue-edit { grid-template-columns: 1fr; } }
.known { margin-top: 28px; }
.known .rows li { flex-wrap: wrap; }
.known.bare { margin-top: 8px; }
/* 11-06 (the new check script, axe): the front page's small grey text was 4.2:1 (needs 4.5): the same lift v12 gave the app */
.alpha, .foot { --faint: rgba(232, 243, 238, 0.58); }

/* 11-07 CITY VIEW (his ask: "a simple city view next to the pause or w/e that gets rid of the pages boxes ... mainly for mobile to see
   the city"): a button beside Pause. On, the page's words, boxes and foot are hidden by VISIBILITY only (the page keeps its length, so
   the scroll still moves the camera, and a drag anywhere turns it), the veil thins, and one hint line shows at the bottom. */
.views .city-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; }
.views .city-btn[aria-pressed="true"] { color: var(--accent); border-color: transparent; }
.city-ico { width: 14px; height: 12px; fill: currentColor; flex: none; }
.veil { transition: opacity 0.4s ease; }
html.city-view main, html.city-view .foot { visibility: hidden; }
html.city-view .veil { opacity: 0.35; }
.city-hint { display: none; }
html.city-view .city-hint {
  display: block; position: fixed; left: 0; right: 0; bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 5; margin: 0;
  padding: 0 16px; text-align: center; pointer-events: none;
  font: 500 10px/1.6 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim);
  text-shadow: 0 0 2px var(--bg), 0 0 6px var(--bg), 0 0 12px var(--bg); /* readable over the lit towers */
}
@media (pointer: coarse) { html.city-view body, html.city-view #net { touch-action: pan-y pinch-zoom; } }
/* the phone header: Pause and City side by side in the bar's middle (Pause's right edge 3 px left of the centre, City's left edge 3 px
   right of it); 561-768 px: both just after the mark, where Pause was; 380 px and under: icons only (the words stay for screen
   readers), two 44 px targets, since the bar has about 117 px between the mark and the links at 320 */
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  .views .motion-btn { transform: translateX(calc(-100% - 3px)); }
  .views .city-btn { position: fixed; top: calc((var(--bar-h) - 44px) / 2); left: calc(50% + 3px); height: 44px; margin: 0; padding: 0 10px; }
  .views .city-btn .w-long { display: none; }
}
@media (min-width: 561px) and (max-width: 768px) {
  .views .motion-btn { min-width: 76px; justify-content: center; transform: none; }
  .views .city-btn { left: 202px; }
}
@media (max-width: 380px) {
  .views .motion-btn, .views .city-btn { width: 44px; min-width: 0; padding: 0; justify-content: center; }
  .views .btn-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}