/* ══════════════════════════════════════════════════════════════════════
   openMXO — terminal chrome
   The glass itself is drawn in WebGL underneath this DOM. Everything here
   stays background-free on purpose so the shader's refraction shows through.
   ═════════════════════════════════════════════════════════════════════ */

:root {
  --void:        #000000;
  --green:       #00ff88;
  --green-hot:   #9dffd2;
  --green-mid:   #2fe39a;
  --green-deep:  #0b8f57;
  --text:        #d6ffef;
  --muted:       #86bfa5;
  --muted-dim:   #5c8f78;
  --danger:      #ff6b6b;
  --amber:       #ffc94d;

  /* Every piece of chrome sits over moving rain, so type carries its own
     shadow rather than relying on a panel background that does not exist. */
  --ink-shadow:  0 1px 3px rgba(0,0,0,.95), 0 0 12px rgba(0,0,0,.85);

  --panel-w:     432px;
  --pad-x:       36px;

  --ease-liquid: cubic-bezier(.22, 1, .28, 1);
  --ease-snap:   cubic-bezier(.34, 1.42, .48, 1);

  --mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", "SF Mono",
          "Roboto Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--void);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

#gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.hard-fallback {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  color: var(--green); z-index: 99;
}

/* ── stage ─────────────────────────────────────────────────────────── */

.stage {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* The panel is deliberately transparent — the WebGL pass paints the glass
   slab, the bevel, the specular and the interior scrim exactly under this
   box. Adding a CSS background here would flatten all of it. */
.glass-panel {
  position: relative;
  width: min(var(--panel-w), 100%);
  padding: 0;
  /* Hard right angles. scene.js reads this value and feeds it to the SDF,
     so the WebGL slab and the DOM box always share the same corner. */
  border-radius: 0;
  background: none;
  isolation: isolate;

  opacity: 0;
  transform: translateY(18px) scale(.965);
  animation: panel-in 1.15s var(--ease-liquid) .35s forwards;
}

@keyframes panel-in {
  to { opacity: 1; transform: none; }
}

/* ── window chrome ─────────────────────────────────────────────────── */

.chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 21px var(--pad-x) 13px;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  text-shadow: var(--ink-shadow);
  border-bottom: 1px solid rgba(0, 255, 136, .12);
}

.chrome-lamps { display: flex; gap: 6px; }
.chrome-lamps i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(0, 255, 136, .16);
  box-shadow: inset 0 0 0 1px rgba(0, 255, 136, .22);
}
.chrome-lamps i:first-child {
  background: rgba(0, 255, 136, .55);
  box-shadow: 0 0 9px rgba(0, 255, 136, .6), inset 0 0 0 1px rgba(0,255,136,.5);
}

.chrome-path { flex: 1; color: var(--muted-dim); letter-spacing: .06em; }

.chrome-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green-mid);
}
.chrome-state .pulse {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

/* ── body ──────────────────────────────────────────────────────────── */

.panel-body { padding: 26px var(--pad-x) 4px; }

/* ── wordmark ──────────────────────────────────────────────────────── */

/* A Didone — extreme thick/thin contrast, fine flat serifs, wide letterforms
   — set light and open. Modern No. 20 leads because it has the poster's flat
   hairline serifs and generous width; Bodoni is the same family but narrower
   and rounder. The stack then degrades through the sharpest high-contrast
   faces available before falling back to plain serif.

   No vertical stretch. Scaling y thickens every HORIZONTAL stroke by the same
   factor — and in a Didone those are precisely the hairlines the whole design
   rests on, so stretching quietly destroys the contrast it is meant to
   exaggerate. The letterforms are left at their true proportions. */
.brand h1 {
  position: relative;
  display: inline-block;
  margin: 0 0 10px;
  font-family: "Modern No. 20", "Bodoni MT", "Didot", "Bodoni 72",
               "Baskerville Old Face", "High Tower Text", "Playfair Display",
               "Big Caslon", Constantia, "Times New Roman", Times, serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 1.05;
  color: var(--green-hot);
  text-shadow: 0 0 26px rgba(0, 255, 136, .45);
}
/* Same weight throughout — the open/MXO split is carried by brightness and by
   the case change, not by mass, so the line keeps one even colour. */
.brand h1 b { font-weight: 400; color: var(--green); }


/* Gradient + interlace, painted through the glyphs. Guarded by @supports so
   a browser without background-clip:text keeps the solid colours above
   rather than rendering the wordmark invisible. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .brand h1,
  .brand h1 b {
    background-image:
      repeating-linear-gradient(180deg,
        rgba(0, 0, 0, .16) 0 1px, transparent 1px 7px),
      linear-gradient(180deg, #9fe9c6 0%, #1ec47a 48%, #0a7d4a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* drop-shadow follows the glyph alpha; text-shadow would bleed through
       the now-transparent fill. One wide soft pass only — a tight 2px glow
       visually thickens hairline strokes back into a bold face. */
    text-shadow: none;
    filter: drop-shadow(0 0 20px rgba(0, 255, 136, .5));
  }
  .brand h1 b {
    background-image:
      repeating-linear-gradient(180deg,
        rgba(0, 0, 0, .16) 0 1px, transparent 1px 7px),
      linear-gradient(180deg, #ffffff 0%, #7dffc8 38%, #00ff88 100%);
    filter: none;                       /* the parent already carries it */
  }
}

/* Letters interlock, as they do on the poster. No fixed width here — a
   Didone's letterforms vary enormously (M against I) and forcing them all to
   one advance looks obviously wrong. glitch.js measures each glyph's natural
   width once and pins it, which keeps swaps from reflowing the word without
   flattening the rhythm. */
/* Open tracking rather than the interlock a heavy setting wants. Light
   letterforms need air around them or the hairline strokes read as noise. */
.wm-ch {
  display: inline-block;
  margin-right: .022em;
  text-align: center;
  transition: color .12s linear;
}
.wm-ch.is-glitching {
  color: #d8fff0;
  -webkit-text-fill-color: #d8fff0;     /* beat the gradient fill above */
  text-shadow: 2px 0 rgba(255, 0, 96, .9), -2px 0 rgba(0, 255, 240, .9),
               0 0 18px rgba(0, 255, 136, .9);
}

/* Two offset copies of the word, one cyan one magenta, normally clipped to
   nothing. The keyframes flick narrow horizontal slices of them into view —
   which is what reads as a broken signal rather than as a drop shadow. */
.wordmark::before,
.wordmark::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  letter-spacing: inherit;
  clip-path: inset(100% 0 0 0);
  /* Match the per-character interlock above, or the split copies drift out
     of register with the real text and read as misalignment, not glitch. */
  letter-spacing: .022em;
  /* These carry their own flat colour — undo the parent's gradient fill. */
  background-image: none;
  -webkit-text-fill-color: currentColor;
  filter: none;
}
.wordmark::before {
  color: #00fff0;
  text-shadow: -1px 0 rgba(0, 255, 240, .8);
  animation: wm-slice-a 5.2s steps(1) infinite;
}
.wordmark::after {
  color: #ff0060;
  text-shadow: 1px 0 rgba(255, 0, 96, .8);
  animation: wm-slice-b 7.1s steps(1) infinite;
}

@keyframes wm-slice-a {
  0%, 100%   { clip-path: inset(100% 0 0 0); transform: none; }
  1.4%  { clip-path: inset(12% 0 66% 0); transform: translateX(-3px); }
  2.6%  { clip-path: inset(58% 0 26% 0); transform: translateX(3px); }
  3.4%  { clip-path: inset(100% 0 0 0);  transform: none; }
  41%   { clip-path: inset(34% 0 48% 0); transform: translateX(-4px); }
  42.2% { clip-path: inset(100% 0 0 0);  transform: none; }
}
@keyframes wm-slice-b {
  0%, 100%   { clip-path: inset(100% 0 0 0); transform: none; }
  2.0%  { clip-path: inset(44% 0 34% 0); transform: translateX(4px); }
  3.1%  { clip-path: inset(8% 0 78% 0);  transform: translateX(-2px); }
  4.0%  { clip-path: inset(100% 0 0 0);  transform: none; }
  67%   { clip-path: inset(70% 0 14% 0); transform: translateX(3px); }
  68.4% { clip-path: inset(100% 0 0 0);  transform: none; }
}


.boot {
  margin: 6px 0 0;
  min-height: 17px;
  font-size: 11px;
  letter-spacing: .07em;
  color: var(--muted);
  text-shadow: var(--ink-shadow);
}
.boot::after {
  content: "";
  display: inline-block;
  width: 7px; height: 12px;
  margin-left: 3px;
  vertical-align: -2px;
  background: var(--green-mid);
  animation: caret 1.05s steps(1) infinite;
}
.boot.done::after { animation: caret 1.05s steps(1) infinite; opacity: .5; }
@keyframes caret { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }

/* ── view switcher ─────────────────────────────────────────────────── */

.views {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height .62s var(--ease-liquid);
}

.view {
  position: absolute;
  inset: 0 0 auto 0;
  padding: 22px 0 26px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .34s ease, transform .5s var(--ease-liquid),
              visibility 0s linear .4s;
  pointer-events: none;
}
.view.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity .42s ease .12s, transform .58s var(--ease-liquid) .1s,
              visibility 0s;
}
.view.is-leaving { transform: translateY(-8px); }

.view-head { margin-bottom: 20px; }
.view-kicker {
  display: block;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-mid);
  text-shadow: var(--ink-shadow);
}
.view-head h2 {
  margin: 5px 0 0;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--text);
  text-shadow: var(--ink-shadow);
}

.prose {
  margin: 0 0 20px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted);
  text-shadow: var(--ink-shadow);
}
.prose p { margin: 0 0 11px; }
.prose p:last-child { margin-bottom: 0; }

.scroller {
  max-height: 208px;
  overflow-y: auto;
  padding-right: 12px;
  margin-bottom: 22px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,255,136,.28) transparent;
}
.scroller::-webkit-scrollbar { width: 4px; }
.scroller::-webkit-scrollbar-thumb {
  background: rgba(0,255,136,.28); border-radius: 2px;
}

/* ── fields ────────────────────────────────────────────────────────── */

.field { margin-bottom: 17px; }

.field label {
  display: block;
  margin-bottom: 7px;
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  text-shadow: var(--ink-shadow);
  transition: color .25s ease;
}
.field label .hint {
  text-transform: none;
  letter-spacing: .04em;
  color: var(--muted-dim);
}
.field:focus-within label { color: var(--green-mid); }

.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  height: 44px;
  border-radius: 3px;
  background: rgba(0, 16, 10, .58);
  box-shadow: inset 0 0 0 1px rgba(0, 255, 136, .16);
  transition: box-shadow .3s ease, background .3s ease;
}
.input-wrap::after {
  content: "";
  position: absolute;
  left: 11px; right: 11px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  transform: scaleX(0);
  opacity: 0;
  transition: transform .45s var(--ease-liquid), opacity .3s ease;
}
.input-wrap:focus-within {
  background: rgba(0, 30, 18, .70);
  box-shadow: inset 0 0 0 1px rgba(0, 255, 136, .42),
              0 0 26px -6px rgba(0, 255, 136, .42);
}
.input-wrap:focus-within::after { transform: scaleX(1); opacity: .85; }

.field.has-error .input-wrap {
  box-shadow: inset 0 0 0 1px rgba(255, 107, 107, .5);
}
.field.has-error label { color: var(--danger); }

.sigil {
  color: var(--green-deep);
  font-size: 13px;
  transition: color .25s ease, transform .25s ease;
}
.input-wrap:focus-within .sigil { color: var(--green); transform: translateX(1px); }

.input-wrap input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--green-hot);
  font: inherit;
  font-size: 14px;
  letter-spacing: .02em;
  outline: none;
  caret-color: var(--green);
}
.input-wrap input::placeholder { color: rgba(94, 155, 129, .42); letter-spacing: .05em; }
.input-wrap input:-webkit-autofill,
.input-wrap input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--green-hot);
  -webkit-box-shadow: 0 0 0 60px #001b10 inset;
  caret-color: var(--green);
}

/* reveal / hide passcode */
.reveal {
  flex: none;
  width: 26px; height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  cursor: pointer;
  position: relative;
  opacity: .5;
  transition: opacity .22s ease, background .22s ease;
}
.reveal:hover, .reveal:focus-visible { opacity: 1; background: rgba(0,255,136,.1); }
.reveal::before {
  content: "";
  position: absolute; inset: 6px;
  border: 1.4px solid var(--green-mid);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform: scaleY(.66);
}
.reveal::after {
  content: "";
  position: absolute;
  left: 5px; right: 5px; top: 50%;
  height: 1.4px;
  background: var(--green-mid);
  transform: rotate(-42deg) scaleX(0);
  transform-origin: center;
  transition: transform .28s var(--ease-liquid);
}
.reveal[aria-pressed="true"]::after { transform: rotate(-42deg) scaleX(1); }

/* availability probe dot next to the handle field */
.probe {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: transparent;
  transition: background .3s ease, box-shadow .3s ease;
}
.probe.is-checking {
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
  animation: pulse 1s ease-in-out infinite;
}
.probe.is-free  { background: var(--green); box-shadow: 0 0 8px var(--green); }
.probe.is-taken { background: var(--danger); box-shadow: 0 0 8px var(--danger); }

/* ── errors ────────────────────────────────────────────────────────── */

.err, .caps {
  margin: 0;
  max-height: 0;
  overflow: hidden;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--danger);
  text-shadow: var(--ink-shadow);
  opacity: 0;
  transition: max-height .3s ease, opacity .25s ease, margin .3s ease;
}
.err.show, .caps:not([hidden]) {
  max-height: 40px; opacity: 1; margin-top: 7px;
}
.caps { color: var(--amber); }
.err::before { content: "! "; }

.form-err {
  margin: 0;
  max-height: 0;
  overflow: hidden;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 11.5px;
  color: var(--danger);
  background: rgba(255, 107, 107, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0);
  opacity: 0;
  transition: max-height .34s var(--ease-liquid), opacity .25s ease,
              padding .3s ease, margin .3s ease, box-shadow .3s ease;
}
.form-err.show {
  max-height: 90px; opacity: 1;
  padding: 10px 12px; margin: 0 0 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 107, 107, .26);
}
.form-err.ok {
  color: var(--green); background: rgba(0, 255, 136, .07);
}
.form-err.ok.show { box-shadow: inset 0 0 0 1px rgba(0, 255, 136, .26); }

/* ── strength meter ────────────────────────────────────────────────── */

.meter { margin-top: 10px; }
.meter[hidden] { display: none; }
.meter-bars { display: flex; gap: 5px; }
.meter-bars i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(0, 255, 136, .12);
  transition: background .4s ease, box-shadow .4s ease;
}
.meter-text {
  margin: 7px 0 0;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  text-shadow: var(--ink-shadow);
  transition: color .3s ease;
}
.meter[data-level="0"] .meter-bars i:nth-child(-n+1),
.meter[data-level="1"] .meter-bars i:nth-child(-n+1) {
  background: var(--danger); box-shadow: 0 0 8px rgba(255,107,107,.55);
}
.meter[data-level="2"] .meter-bars i:nth-child(-n+2) {
  background: var(--amber); box-shadow: 0 0 8px rgba(255,201,77,.5);
}
.meter[data-level="3"] .meter-bars i:nth-child(-n+3) {
  background: var(--green-mid); box-shadow: 0 0 8px rgba(47,227,154,.5);
}
.meter[data-level="4"] .meter-bars i {
  background: var(--green); box-shadow: 0 0 10px rgba(0,255,136,.6);
}
.meter[data-level="0"] .meter-text,
.meter[data-level="1"] .meter-text { color: var(--danger); }
.meter[data-level="2"] .meter-text { color: var(--amber); }
.meter[data-level="3"] .meter-text { color: var(--green-mid); }
.meter[data-level="4"] .meter-text { color: var(--green); }

/* ── checkbox ──────────────────────────────────────────────────────── */

.check {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12px;
  color: var(--muted);
  text-shadow: var(--ink-shadow);
  cursor: pointer;
  user-select: none;
  transition: color .25s ease;
}
.check:hover { color: var(--green-mid); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box {
  flex: none;
  position: relative;
  width: 15px; height: 15px;
  margin-top: 1px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 136, .34);
  background: rgba(0, 16, 10, .62);
  transition: box-shadow .25s ease, background .25s ease;
}
.check .box::after {
  content: "";
  position: absolute;
  left: 4.5px; top: 1px;
  width: 4px; height: 8px;
  border: solid var(--void);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .3s var(--ease-snap);
}
.check input:checked + .box {
  background: var(--green);
  box-shadow: 0 0 14px rgba(0, 255, 136, .55), inset 0 0 0 1px var(--green);
}
.check input:checked + .box::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + .box {
  box-shadow: 0 0 0 2px rgba(0,255,136,.4), inset 0 0 0 1px var(--green);
}
.check.terms { margin-bottom: 4px; align-items: flex-start; }
.check.terms span:last-child { line-height: 1.55; }

/* ── rows, links ───────────────────────────────────────────────────── */

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 4px 0 20px;
  flex-wrap: wrap;
}

.link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--green-mid);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  position: relative;
  text-shadow: var(--ink-shadow);
  transition: color .22s ease, text-shadow .22s ease;
}
.link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .32s var(--ease-liquid);
}
.link:hover, .link:focus-visible {
  color: var(--green);
  text-shadow: 0 0 12px rgba(0, 255, 136, .6);
}
.link:hover::after, .link:focus-visible::after {
  transform: scaleX(1); transform-origin: left;
}

.swap {
  margin: 18px 0 0;
  font-size: 12px;
  color: var(--muted);
  text-shadow: var(--ink-shadow);
}
.swap .sep { margin: 0 6px; color: var(--muted-dim); }

/* ── submit ────────────────────────────────────────────────────────── */

.submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(168deg, rgba(0,255,136,.96), rgba(0,196,116,.88));
  color: #001a0e;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 34px -12px rgba(0, 255, 136, .8),
              inset 0 1px 0 rgba(255, 255, 255, .38);
  transition: transform .22s var(--ease-snap), box-shadow .3s ease, filter .25s ease;
}
.submit::before {                       /* sheen sweep */
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.62), transparent);
  transform: skewX(-18deg);
  transition: left .75s var(--ease-liquid);
}
.submit:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 16px 42px -12px rgba(0, 255, 136, .95),
              inset 0 1px 0 rgba(255, 255, 255, .45);
}
.submit:hover::before { left: 115%; }
.submit:active { transform: translateY(0) scale(.988); }
.submit:focus-visible { outline: 2px solid var(--green-hot); outline-offset: 3px; }

.submit.ghost {
  background: none;
  color: var(--green-mid);
  box-shadow: inset 0 0 0 1px rgba(0, 255, 136, .3);
}
.submit.ghost:hover {
  color: var(--green);
  background: rgba(0, 255, 136, .07);
  box-shadow: inset 0 0 0 1px rgba(0, 255, 136, .55);
}
.submit.ghost::before { display: none; }

.submit .spin {
  position: absolute;
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 2px solid rgba(0, 26, 14, .28);
  border-top-color: #001a0e;
  opacity: 0;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

.submit.is-busy { pointer-events: none; filter: saturate(.72); }
.submit.is-busy .label { opacity: 0; }
.submit.is-busy .spin  { opacity: 1; }
.submit .label { transition: opacity .2s ease; }

/* ── result console ────────────────────────────────────────────────── */

.console {
  margin: 0 0 22px;
  padding: 15px 16px;
  min-height: 118px;
  border-radius: 3px;
  background: rgba(0, 14, 9, .66);
  box-shadow: inset 0 0 0 1px rgba(0, 255, 136, .16);
  font: inherit;
  font-size: 11.5px;
  line-height: 1.85;
  color: var(--green-mid);
  white-space: pre-wrap;
  word-break: break-word;
}
.console .ok   { color: var(--green); }
.console .dim  { color: var(--muted-dim); }
.console .warn { color: var(--amber); }

/* ── footer ────────────────────────────────────────────────────────── */

.panel-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px var(--pad-x) 20px;
  border-top: 1px solid rgba(0, 255, 136, .12);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-dim);
  text-shadow: var(--ink-shadow);
}
.foot-dot { opacity: .5; }
.panel-foot span:last-child { margin-left: auto; }

/* ── misc ──────────────────────────────────────────────────────────── */

.gl-warning {
  position: fixed;
  left: 50%; bottom: 18px;
  transform: translateX(-50%);
  z-index: 5;
  padding: 9px 16px;
  border-radius: 9px;
  background: rgba(0, 20, 12, .8);
  box-shadow: inset 0 0 0 1px rgba(255, 201, 77, .3);
  color: var(--amber);
  font-size: 11px;
}
.gl-warning p { margin: 0; }

/* No WebGL: the shader normally paints the slab, so give the DOM a real
   background or the terminal floats on nothing. */
.no-gl body {
  background:
    radial-gradient(120% 90% at 50% 0%, #04301d 0%, #010b06 55%, #000 100%);
}
.no-gl .glass-panel {
  background: linear-gradient(158deg, rgba(6, 40, 26, .72), rgba(2, 14, 9, .82));
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9),
              inset 0 0 0 1px rgba(0, 255, 136, .22),
              inset 0 1px 0 rgba(160, 255, 210, .16);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

::selection { background: rgba(0, 255, 136, .3); color: var(--green-hot); }

:focus-visible { outline: 2px solid rgba(0, 255, 136, .7); outline-offset: 2px; }

/* ── responsive ────────────────────────────────────────────────────── */

@media (max-width: 520px) {
  /* Stays above the 24px shader bevel so no text lands on the curve. */
  :root { --pad-x: 26px; }
  .stage { padding: 14px; align-items: start; }
  .glass-panel { margin: auto 0; }
  .brand h1 { font-size: 40px; }
  .chrome-path { display: none; }
}

@media (max-height: 640px) {
  .stage { align-items: start; }
  .glass-panel { margin: auto 0; }
  .scroller { max-height: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .06s !important;
  }
  .glass-panel { opacity: 1; transform: none; }
  /* Kill the glitch copies outright — a 0.01ms slice animation would freeze
     on whatever frame it landed on, leaving a permanent offset ghost. */
  .wordmark::before, .wordmark::after { display: none; }
}

/* ── audio toggle ───────────────────────────────────────────────────────
   Lives in the terminal chrome beside the path. Four bars that animate only
   while audio is actually playing, so the control reports element state
   rather than intent — if play() is refused, the bars stay flat and the
   button reads "Play audio". */
.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;
}

.chrome-audio {
  margin-left: auto;
  display: inline-flex; align-items: flex-end; gap: 2px;
  height: 16px; padding: 0 8px;
  background: none; border: 0; cursor: pointer;
  opacity: 0.45;
  transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.chrome-audio:hover,
.chrome-audio:focus-visible { opacity: 0.95; }
.chrome-audio.is-playing { opacity: 0.85; }

.chrome-audio .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.chrome-audio .bars i {
  display: block; width: 2px; height: 3px;
  background: currentColor;
  transition: height 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Flat = silent. The resting state has to be unmistakably "not playing". */
.chrome-audio.is-playing .bars i { animation: eq 1.1s ease-in-out infinite; }
.chrome-audio.is-playing .bars i:nth-child(2) { animation-delay: 0.15s; }
.chrome-audio.is-playing .bars i:nth-child(3) { animation-delay: 0.32s; }
.chrome-audio.is-playing .bars i:nth-child(4) { animation-delay: 0.08s; }

@keyframes eq {
  0%, 100% { height: 3px; }
  50%      { height: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Do not animate, but still distinguish playing from silent. */
  .chrome-audio.is-playing .bars i { animation: none; height: 9px; }
}