:root { color-scheme: dark; --paper:#e9e0c8; --muted:#a8bbb7; --cyan:#73e1dc; --amber:#f8b85d; font:16px/1.5 Inter,"Segoe UI",system-ui,sans-serif; color:var(--paper); background:#05090c; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-width:320px; min-height:100vh; background:radial-gradient(circle at 80% 12%,#193138 0,transparent 34rem),radial-gradient(circle at 8% 92%,#332719 0,transparent 31rem),#05090c; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.12; background:repeating-linear-gradient(to bottom,transparent 0 3px,#000 4px); }
button,input { font:inherit; } a { color:inherit; }
button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--amber); outline-offset:3px; }
.skip-link { position:fixed; top:.8rem; left:.8rem; z-index:10; padding:.6rem .8rem; transform:translateY(-200%); color:#21190f; background:var(--amber); } .skip-link:focus { transform:none; }
.age-gate { min-height:100vh; display:grid; place-items:center; padding:1.2rem; }
.age-card { width:min(100%,620px); padding:clamp(1.3rem,4vw,2.4rem); border:2px solid #91794e; border-radius:8px; background:linear-gradient(145deg,#1b2d30,#0b1519); box-shadow:0 25px 80px #000b,inset 0 0 0 4px #0b1519; }
.age-card h1 { margin:0 0 1.3rem; color:var(--paper); font-size:clamp(2.2rem,6vw,3.5rem); }
.age-card p:not(.eyebrow) { color:#d0d9d1; font-size:1.04rem; }
.age-confirm { display:flex; align-items:flex-start; gap:.7rem; margin:1.5rem 0; padding:1rem; border:1px solid #57757a; border-radius:4px; background:#0a171b; cursor:pointer; }
.age-confirm input { flex:none; width:1.25rem; height:1.25rem; margin:.1rem 0 0; accent-color:var(--amber); }
.age-actions { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.age-actions a { color:var(--cyan); font-size:.9rem; } .age-actions button { padding:.7rem 1rem; }
.shell { max-width:1580px; margin:0 auto; }
.masthead { min-height:86px; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem clamp(1rem,3vw,2.5rem); border-bottom:1px solid #52747a; background:#0b161ac9; }
.brand { display:flex; align-items:center; gap:.9rem; text-decoration:none; } .brand-mark { display:grid; place-items:center; width:46px; height:46px; border:2px solid #291f14; border-radius:5px; color:#183536; background:linear-gradient(#eddab3,#a88e65); box-shadow:inset 1px 1px #fff7,0 5px #201b15; font-size:1.5rem; }
.brand strong,.brand small { display:block; } .brand strong { font-size:1.1rem; letter-spacing:.22em; line-height:1.3; } .brand small { color:var(--amber); font:.66rem/1.5 Consolas,monospace; letter-spacing:.1em; }
.archive-link { color:var(--cyan); font:.8rem Consolas,monospace; text-decoration:none; } .archive-link:hover { text-decoration:underline; }
.layout { display:grid; grid-template-columns:minmax(290px,380px) minmax(0,1fr); gap:clamp(1rem,2.5vw,2rem); min-height:calc(100vh - 86px); padding:clamp(1rem,2.5vw,2rem); }
.side-panel { align-self:start; } .eyebrow { margin:0 0 .55rem; color:var(--amber); font:.68rem/1.4 Consolas,monospace; letter-spacing:.13em; }
h1 { margin:0; font:700 clamp(2.5rem,4.2vw,4.2rem)/1.05 "Arial Narrow","Segoe UI",sans-serif; letter-spacing:-.05em; } h1 em { color:var(--cyan); font-style:normal; }
.intro { max-width:34ch; margin:1rem 0 1.5rem; color:#c9d3cd; font-size:1.04rem; }
.connection-card { display:flex; gap:.75rem; padding:.9rem 1rem; margin-bottom:1rem; border:1px solid #a07134; border-radius:5px; background:#3a2b1a88; } .connection-card.ready { border-color:#47895b; background:#173322aa; }
.card-lamp { flex:none; width:11px; height:11px; margin-top:.34rem; border-radius:50%; background:var(--amber); box-shadow:0 0 12px #f8b85d99; } .ready .card-lamp { background:#8cdf95; box-shadow:0 0 12px #8cdf9599; }
.connection-card strong { font-size:.95rem; } .connection-card p { margin:.15rem 0 0; color:#d5ccb9; font-size:.85rem; }
.address-card,.login-card { padding:1.05rem 1.1rem; margin-top:1rem; border:1px solid #38565b; border-radius:5px; background:linear-gradient(145deg,#15272b,#0c171b); box-shadow:0 12px 24px #0004; }
h2 { margin:0 0 .75rem; font-size:1.13rem; } .address-card dl { margin:0; } .address-card dl div { display:flex; justify-content:space-between; gap:.5rem; border-top:1px solid #365056; padding:.45rem 0; } .address-card dt { color:var(--muted); } .address-card dd { margin:0; }
code { color:#c8f5e8; font:.94em Consolas,monospace; } .address-card p:last-child { margin:.7rem 0 0; color:var(--muted); font-size:.84rem; }
.login-card form { display:grid; gap:.45rem; } .login-card label,.command-form label { color:var(--cyan); font:.72rem Consolas,monospace; letter-spacing:.08em; }
.login-card input,.command-row input { min-width:0; width:100%; padding:.67rem .75rem; border:1px solid #658085; border-radius:3px; color:var(--paper); background:#071115; }
.login-card input:disabled,.command-row input:disabled { opacity:.55; }
button { border:1px solid #282119; border-bottom:4px solid #433426; border-radius:4px; color:#211b13; background:linear-gradient(#eddbb7,#b99d72); font-weight:750; cursor:pointer; box-shadow:inset 1px 1px #fff8; } button:hover:not(:disabled) { filter:brightness(1.1); } button:disabled { opacity:.5; cursor:not-allowed; }
.login-card button { margin-top:.45rem; padding:.65rem .8rem; } .fine-print { margin:.85rem 0 0; color:#9caeac; font-size:.78rem; }
.terminal { display:flex; flex-direction:column; min-width:0; min-height:650px; max-height:calc(100vh - 150px); border:2px solid #6b7162; border-radius:9px; overflow:hidden; background:#0a1419; box-shadow:0 15px 0 #080d0e,0 28px 55px #0009,inset 0 0 22px #8ce6d60b; }
.terminal-top { display:flex; justify-content:space-between; align-items:center; gap:.7rem; padding:.8rem 1rem; background:linear-gradient(#c3b390,#8f8069); border-bottom:4px solid #292d2a; color:#28251f; }
.terminal-title { display:flex; align-items:center; gap:.55rem; min-width:0; font:.85rem Consolas,monospace; letter-spacing:.08em; } .terminal-title small { color:#4b4235; font-size:.7rem; }
.status { flex:none; padding:.2rem .45rem; border:1px solid #675946; border-radius:3px; color:#463827; background:#e9d4a7; font:.7rem Consolas,monospace; text-transform:uppercase; } .status.connected { color:#15331c; background:#97d7a3; } .status.error { color:#521e16; background:#f4ad9e; }
.terminal-tools,.terminal-foot { display:flex; justify-content:space-between; gap:1rem; padding:.5rem 1rem; color:#96aaa8; background:#14262a; font:.7rem Consolas,monospace; letter-spacing:.09em; } .terminal-tools { border-bottom:1px solid #3b585a; }
.terminal-tools i { display:inline-block; width:5px; height:5px; margin:0 .35rem .1rem; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); } .terminal-tools label { display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; letter-spacing:0; } .terminal-tools input { accent-color:var(--cyan); }
.output { flex:1; min-height:280px; overflow-y:auto; padding:1.1rem 1.2rem; color:#d4e2d9; white-space:pre-wrap; overflow-wrap:anywhere; font:.94rem/1.58 "Cascadia Mono",Consolas,monospace; background:radial-gradient(circle at center,#18303755,transparent 65%),repeating-linear-gradient(to bottom,#ffffff02 0 2px,transparent 3px 5px),#071015; }
.line { min-height:1.5em; } .line.system { color:var(--amber); } .portrait { display:block; max-width:min(100%,460px); max-height:520px; width:auto; height:auto; margin:.55rem 0 1rem; border:1px solid #5c7b7c; border-radius:5px; background:#030808; }
.standby-note { display:grid; place-content:center; justify-items:center; min-height:100%; padding:2rem; text-align:center; color:#799894; } .standby-symbol { display:grid; place-items:center; width:80px; height:80px; border:1px solid #426462; border-radius:50%; color:var(--cyan); box-shadow:0 0 45px #61cfca27; font-size:2.1rem; } .standby-note p { margin:1.2rem 0 .25rem; color:#b6d8d0; font:.9rem Consolas,monospace; letter-spacing:.15em; } .standby-note small { max-width:34ch; font-size:.83rem; }
.command-form { padding:.75rem 1rem .85rem; border-top:1px solid #4f6a69; background:#182c30; } .command-row { display:flex; align-items:center; gap:.6rem; margin-top:.45rem; } .prompt { color:var(--amber); font:bold 1.2rem Consolas,monospace; } .command-row input { flex:1; } .command-row button { padding:.6rem 1rem; } .terminal-foot { border-top:1px solid #395355; }
.login-card.hidden { display:none; }
@media (max-width:900px) { .layout { grid-template-columns:1fr; } .side-panel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1rem; } .side-panel>.eyebrow,.side-panel>h1,.side-panel>.intro,.connection-card { grid-column:1/-1; } .terminal { max-height:none; height:70vh; min-height:500px; } }
@media (max-width:590px) { .masthead { align-items:start; } .archive-link { max-width:8rem; text-align:right; } .brand small { font-size:.55rem; } .layout { padding:.9rem; } .side-panel { display:block; } .terminal { height:70vh; min-height:460px; } .terminal-title small,.terminal-foot span:last-child { display:none; } .terminal-foot { font-size:.58rem; } .terminal-tools { font-size:.62rem; } }

/* Full-width play surface with a compact connection bar above it. */
.layout { display:flex; flex-direction:column; gap:1rem; min-height:calc(100vh - 86px); }
.page-intro { display:flex; align-items:end; justify-content:space-between; gap:1.5rem; }
.page-intro h1 { font-size:clamp(1.9rem,3.4vw,3rem); }
.page-intro>p { max-width:40ch; margin:0 0 .15rem; color:#c9d3cd; font-size:.93rem; }
.access-bar { display:grid; grid-template-columns:minmax(270px, .85fr) minmax(420px, 1.35fr); overflow:hidden; border:1px solid #52747a; border-radius:7px; background:linear-gradient(140deg,#162a2e,#0b171b); box-shadow:0 9px 24px #0005; }
.direct-access { padding:.85rem 1rem; }
.direct-access h2,.access-bar .login-card h2 { margin:0 0 .45rem; color:var(--amber); font:.78rem Consolas,monospace; letter-spacing:.09em; text-transform:uppercase; }
.direct-details { display:flex; gap:clamp(.8rem,2vw,2rem); flex-wrap:wrap; }
.direct-details span { color:#a9bdb9; font:.72rem Consolas,monospace; letter-spacing:.06em; }
.direct-details code { display:block; color:#c8f5e8; font-size:1.08rem; letter-spacing:0; }
.direct-access p { margin:.45rem 0 0; color:#b5c6c2; font-size:.75rem; }
.access-bar .login-card { margin:0; padding:.85rem 1rem; border:0; border-left:1px solid #52747a; border-radius:0; background:transparent; box-shadow:none; }
.access-bar .login-card form { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; align-items:end; gap:.55rem; }
.access-bar .login-card label { display:block; margin-bottom:.25rem; }
.access-bar .login-card input { padding:.46rem .55rem; }
.access-bar .login-card button { min-height:40px; margin:0; padding:.45rem .7rem; white-space:nowrap; }
.access-bar .login-card .fine-print { margin:.4rem 0 0; font-size:.71rem; }
.access-bar .connection-card { grid-column:1/-1; align-items:center; margin:0; padding:.38rem 1rem; border:0; border-top:1px solid #6e5c3d; border-radius:0; background:#33271980; }
.access-bar .connection-card.ready { border-top-color:#47895b; background:#173322aa; }
.access-bar .connection-card .card-lamp { margin:0; }
.access-bar .connection-card strong { font-size:.78rem; }
.access-bar .connection-card p { display:inline; margin-left:.5rem; font-size:.75rem; }
.terminal { flex:1; width:100%; height:calc(100vh - 350px); min-height:540px; max-height:none; }
@media (max-width:920px) {
  .page-intro { align-items:start; flex-direction:column; gap:.25rem; }
  .access-bar { grid-template-columns:1fr; }
  .access-bar .login-card { border-left:0; border-top:1px solid #52747a; }
  .terminal { height:65vh; min-height:480px; }
}
@media (max-width:590px) {
  .access-bar .login-card form { grid-template-columns:1fr 1fr; }
  .access-bar .login-card button { grid-column:1/-1; }
  .access-bar .connection-card p { display:block; margin:0; }
  .terminal { height:70vh; min-height:460px; }
}

/* ============================================================
   Web client additions
   ------------------------------------------------------------
   Everything above this line is a copy of the site stylesheet from
   /muck/. Nothing here edits that file; these rules only cover the
   parts of the live client that the mockup did not need: the bundled
   monospace face, echoed commands, and accessibility affordances.
   ============================================================ */

/* Source Code Pro, bundled locally, so the MUCK's ASCII art lines up even
   where Cascadia Mono and Consolas are absent (Linux, older macOS). */
@font-face {
  font-family: "Source Code Pro";
  src: url("fonts/SourceCodePro-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Code Pro";
  src: url("fonts/SourceCodePro-Semibold.woff") format("woff");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Source Code Pro";
  src: url("fonts/SourceCodePro-Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

.output {
  font-family: "Source Code Pro", "Cascadia Mono", Consolas, ui-monospace, monospace;
  tab-size: 4;
}

/* Commands you typed, so the transcript reads as a conversation. */
.line.echo { color: var(--cyan); opacity: .85; }

/* ------------------------------------------------------------
   Accessibility
   ------------------------------------------------------------ */

/* Text for screen readers only. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Every interactive target gets a visible, high-contrast focus ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.output:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
  border-radius: 2px;
}

/* The log is focusable so it can be scrolled and read from the keyboard. */
.output:focus-visible { outline-offset: -3px; }

/* The skip link stays out of the way until it is tabbed to. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: .5rem .8rem;
  background: var(--amber);
  color: #10191b;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: .5rem;
  top: .5rem;
}

/* Honour a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Raise contrast, and drop the decorative scanline texture behind the text,
   when the reader has asked for more contrast. */
@media (prefers-contrast: more) {
  .output {
    color: #f2fbf6;
    background: #000;
  }
  .status { border-width: 2px; }
  .line.system { color: #ffd07a; }
}

/* Touch: keep the command line reachable above an on-screen keyboard and stop
   iOS zooming the page when the field takes focus. */
@media (max-width: 590px) {
  .command-row input { font-size: 16px; }
  .terminal { height: 78vh; }
}

/* ------------------------------------------------------------
   App shell height
   ------------------------------------------------------------
   The page itself must never grow: the transcript scrolls inside the
   terminal. That needs an unbroken height chain from the shell down to
   the log, and every flex item in it needs min-height:0 — the default
   of auto refuses to shrink below its content, which is what let the
   terminal stretch down the page instead of scrolling.
   The age gate is left alone so it can scroll on a short screen.
   ------------------------------------------------------------ */

.shell:not([hidden]) {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;          /* keeps the command line above mobile browser chrome */
  overflow: hidden;
}

.shell .masthead { flex: 0 0 auto; }

.shell .layout {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.shell .page-intro { flex: 0 0 auto; }

.shell .terminal {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  max-height: none;
}

.shell .terminal-top,
.shell .terminal-tools,
.shell .command-form,
.shell .terminal-foot { flex: 0 0 auto; }

.shell .output {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;   /* scrolling the log does not drag the page */
  scrollbar-gutter: stable;
}

/* A visible scrollbar on the log, rather than the thin overlay bar that some
   platforms hide until you scroll. */
.shell .output { scrollbar-width: thin; scrollbar-color: #4d6f70 #071015; }
.shell .output::-webkit-scrollbar { width: 12px; }
.shell .output::-webkit-scrollbar-track { background: #071015; }
.shell .output::-webkit-scrollbar-thumb {
  background: #4d6f70;
  border: 3px solid #071015;
  border-radius: 6px;
}
.shell .output::-webkit-scrollbar-thumb:hover { background: #73e1dc; }

/* Short windows: drop the intro so the terminal keeps a usable height. */
@media (max-height: 640px) {
  .shell .page-intro { display: none; }
}