:root {
    --h: 50; --sat: 74%;
    --bg: hsl(var(--h) 38% 3.6%);
    --bg2: hsl(var(--h) 40% 6%);
    --fg: hsl(var(--h) var(--sat) 60%);
    --dim: hsl(var(--h) 34% 40%);
    --bright: hsl(var(--h) 100% 87%);
    --rule: hsl(var(--h) 45% 16%);
    --glow: 0 0 10px hsl(var(--h) 100% 55% / .38);
    --crt: 1;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  :root[data-phosphor="green"] { --h: 140; --sat: 90%; }
  :root[data-phosphor="ice"] { --h: 192; --sat: 90%; }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
      --bg: hsl(var(--h) 42% 90%); --bg2: hsl(var(--h) 42% 86%); --fg: hsl(var(--h) 85% 15%); --dim: hsl(var(--h) 30% 34%);
      --bright: hsl(var(--h) 90% 8%); --rule: hsl(var(--h) 34% 70%); --glow: none; --crt: 0;
    }
  }
  :root[data-theme="light"] {
    --bg: hsl(var(--h) 42% 90%); --bg2: hsl(var(--h) 42% 86%); --fg: hsl(var(--h) 85% 15%); --dim: hsl(var(--h) 30% 34%);
    --bright: hsl(var(--h) 90% 8%); --rule: hsl(var(--h) 34% 70%); --glow: none; --crt: 0;
  }
  :root[data-theme="dark"] {
    --bg: hsl(var(--h) 38% 3.6%); --bg2: hsl(var(--h) 40% 6%); --fg: hsl(var(--h) var(--sat) 60%); --dim: hsl(var(--h) 34% 40%);
    --bright: hsl(var(--h) 100% 87%); --rule: hsl(var(--h) 45% 16%);
    --glow: 0 0 10px hsl(var(--h) 100% 55% / .38); --crt: 1;
  }
  *, *::before, *::after { box-sizing: inherit; }
  html, body { height: 100%; }
  html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 3.2rem); }
  body {
    margin: 0; background: var(--bg); color: var(--fg);
    font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 15px; line-height: 1.55; text-shadow: var(--glow);
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
  }
  ::selection { background: var(--fg); color: var(--bg); text-shadow: none; }
  body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 40; opacity: var(--crt); }
  body::before { background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.62) 100%); }
  body::after { background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.22) 2px 3px); }
  pre { margin: 0; font: inherit; }
  h1, h2, h3, p { margin: 0; }
  [hidden] { display: none !important; }
  @keyframes power-on {
    0% { transform: scale(.7, .004); filter: brightness(5); }
    45% { transform: scale(1, .004); filter: brightness(5); }
    100% { transform: none; filter: none; }
  }
  @keyframes blink { 50% { opacity: 0; } }

  /* ---------- controls ---------- */
  button, input { font: inherit; color: inherit; text-shadow: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  .btn {
    display: inline-block; border: 1px solid var(--dim); padding: .32rem 1.3ch; color: var(--fg);
    text-decoration: none; white-space: nowrap; background: var(--bg); line-height: 1.4;
  }
  .btn:hover, .btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); text-shadow: none; }
  .btn.solid { background: var(--fg); color: var(--bg); border-color: var(--fg); font-weight: 700; text-shadow: none; box-shadow: 0 0 18px hsl(var(--h) 100% 55% / calc(.32 * var(--crt))); }
  .btn.solid:hover { background: var(--bright); border-color: var(--bright); }
  .btn:disabled { opacity: .45; cursor: default; }
  .lnk { color: var(--fg); text-decoration: underline dashed var(--dim); text-underline-offset: .28em; }
  .lnk:hover { color: var(--bright); text-decoration-style: solid; }
  :focus-visible { outline: 2px solid var(--bright); outline-offset: 2px; }
  input[type="text"] { background: transparent; border: 0; border-radius: 0; padding: 0; color: var(--bright); caret-color: var(--bright); font-size: 16px; font-weight: 500; min-width: 0; }
  input[type="text"]:focus { outline: none; }
  input[type="range"] { accent-color: var(--fg); width: 100%; }
  .row { display: flex; align-items: baseline; gap: 1ch; }
  .row label { color: var(--dim); white-space: nowrap; }
  .row input { flex: 1; }
  .btns { display: flex; flex-wrap: wrap; gap: .5rem; }
  .dim { color: var(--dim); } .strong { color: var(--bright); font-weight: 700; }
  .small { font-size: 13px; }
  .caret { display: inline-block; width: 1ch; height: 1.1em; vertical-align: text-bottom; background: var(--bright); animation: blink 1.05s steps(1) infinite; }

  /* ---------- app frame ---------- */
  .app { height: 100%; max-width: 1680px; margin: 0 auto; padding: .65rem 1.1rem .6rem; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: .8rem; }
  .js .app { animation: power-on .55s cubic-bezier(.2, .8, .2, 1) both; }
  .top { display: flex; align-items: center; gap: 1.4rem; border-bottom: 1px solid var(--rule); padding-bottom: .6rem; }
  .brand { font-weight: 700; color: var(--bright); font-size: 1.08rem; white-space: nowrap; letter-spacing: .02em; }
  .brand i { font-style: normal; animation: blink 1.15s steps(1) infinite; }
  .tabs { display: flex; gap: .25rem; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: .28rem 1.2ch; white-space: nowrap; color: var(--fg); border: 1px solid transparent; }
  .tab kbd { font: inherit; color: var(--dim); margin-right: .6ch; }
  .tab:hover { border-color: var(--dim); }
  .tab[aria-selected="true"] { background: var(--fg); color: var(--bg); font-weight: 700; text-shadow: none; }
  .tab[aria-selected="true"] kbd { color: var(--bg); }
  .panel { min-height: 0; height: 100%; }
  .bar { display: flex; justify-content: space-between; gap: .2rem 2ch; flex-wrap: wrap; font-size: .82rem; background: var(--rule); padding: .14rem 1ch; }
  .bar b { font-weight: 400; color: var(--bright); }
  .bar button { margin-left: 1ch; text-decoration: underline dashed var(--dim); text-underline-offset: .25em; }
  .bar button[aria-pressed="true"] { color: var(--bright); text-decoration-style: solid; }

  .pane { position: relative; border: 1px solid var(--rule); min-height: 0; min-width: 0; background: var(--bg); }
  .pane > h2 { position: absolute; top: -.72em; left: 1.4ch; padding: 0 .8ch; font: inherit; font-size: .8rem; line-height: 1.4; color: var(--dim); background: var(--bg); z-index: 2; white-space: nowrap; }
  .pane.pad { padding: 1.05rem 1.2rem .9rem; }
  .stagebox { position: relative; min-height: 220px; }
  .stagebox canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 4px hsl(var(--h) 100% 55% / calc(.45 * var(--crt)))); }
  .scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
  table { border-collapse: collapse; width: 100%; white-space: nowrap; }
  th, td { text-align: left; padding: 0 2ch 0 0; font-weight: 400; }
  th { color: var(--dim); }
  .lines { overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
  .lines p { flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dim); }
  .lines p b { font-weight: 400; color: var(--fg); }
  .lines p:last-child { color: var(--fg); } .lines p:last-child b { color: var(--bright); }

  /* ---------- 1 home ---------- */
  .home { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 1.1rem; }
  .hero { position: relative; overflow: hidden; container-type: inline-size; display: flex; flex-direction: column; }
  .hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; pointer-events: none; }
  .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--bg) 0%, transparent 55%), linear-gradient(to top, var(--bg) 6%, transparent 48%); opacity: .88; pointer-events: none; }
  .hero-in { position: relative; z-index: 1; padding: 1.6rem 1.7rem 1.3rem; display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .logo { font-size: min(calc((100vw - 4rem) / 30), 25px); font-size: min(calc((100cqw - 3.4rem) / 29), 3.1vh, 27px); line-height: 1; font-weight: 700; color: var(--bright); white-space: pre; overflow: hidden; }
  .hero h1 { font: inherit; font-size: 1.5rem; font-weight: 700; color: var(--bright); margin: 1.5rem 0 .6rem; line-height: 1.25; }
  .hero .lead { max-width: 60ch; margin-bottom: .55rem; }
  .hero .btns { margin: 1rem 0 0; }
  .ca { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.2ch; margin-top: .9rem; padding: .45rem .8rem; border: 1px dashed var(--dim); background: var(--bg); max-width: max-content; }
  .ca code { font: inherit; color: var(--bright); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
  .ca .btn { padding: .12rem 1ch; }
  .manifesto .ca { margin-top: 0; }
  .tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: auto; padding-top: 1.4rem; }
  .tile { text-align: left; border: 1px solid var(--rule); padding: .6rem .8rem .65rem; background: color-mix(in srgb, var(--bg) 82%, transparent); display: block; }
  .tile:hover { border-color: var(--fg); background: var(--bg2); }
  .tile b { display: block; color: var(--bright); } .tile kbd { font: inherit; font-weight: 400; color: var(--dim); margin-right: .7ch; }
  .tile span { display: block; color: var(--dim); font-size: 13px; line-height: 1.4; margin-top: .15rem; }
  .shell { display: flex; flex-direction: column; border-color: var(--dim); }
  .shell .scroll { flex: 1; min-height: 0; margin-top: .7rem; padding: .5rem 1.25rem 1rem; }
  .block { margin-bottom: 1.2rem; }
  .cmd { color: var(--bright); font-weight: 500; overflow-wrap: anywhere; }
  .ps1 { color: var(--dim); font-weight: 400; }
  .out { margin-top: .4rem; }
  .out p { margin-bottom: .5rem; max-width: 64ch; } .out p:last-child { margin-bottom: 0; }
  .out p.ok { margin: 0; color: var(--dim); } .out p.ok b { color: var(--fg); font-weight: 400; }
  .out h3 { font: inherit; font-weight: 700; color: var(--bright); margin-bottom: .4rem; }
  .help td:first-child { color: var(--bright); } .help td:nth-child(2) { color: var(--dim); white-space: normal; }
  .live { display: none; } .booted .live { display: block; }
  .js .wait { display: none; }
  .chips { margin-top: .7rem; display: flex; flex-wrap: wrap; gap: .15rem 2ch; }

  /* ---------- 2 backrooms ---------- */
  .rooms { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.1rem; }
  .view { display: flex; flex-direction: column; }
  .view .stagebox { flex: 1 1 0; cursor: crosshair; }
  .hud { display: flex; justify-content: space-between; gap: 2ch; flex-wrap: wrap; border-top: 1px solid var(--rule); padding: .3rem 1.2rem; font-size: 13px; color: var(--dim); }
  .hud b { font-weight: 400; color: var(--bright); }
  .roominfo { border-top: 1px solid var(--rule); padding: .8rem 1.2rem .9rem; font-size: 13.5px; }
  .roominfo h3 { font: inherit; font-size: 1.12rem; font-weight: 700; color: var(--bright); margin-bottom: .2rem; }
  .roominfo > div > p { margin-bottom: .55rem; max-width: 70ch; }
  .roominfo .btns { margin-top: .65rem; }
  .roominfo td.l { color: var(--bright); } .roominfo td.m { width: 99%; padding-right: 0; }
  .roominfo tbody tr { cursor: pointer; } .roominfo tbody tr:hover td { color: var(--bright); }
  .roominfo tr.ping td { background: var(--fg); color: var(--bg); text-shadow: none; }
  #sig { height: calc(4 * 1.55em); } #code { height: calc(5 * 1.55em); white-space: pre; overflow: hidden; }
  #memlist { max-height: calc(4 * 1.55em); overflow-y: auto; margin: .4rem 0 0; padding: 0; list-style: none; scrollbar-width: thin; }
  #memlist li::before { content: "> "; color: var(--dim); }
  .memrow { border-bottom: 1px solid var(--rule); padding-bottom: .2rem; max-width: 60ch; }
  .rside { display: flex; flex-direction: column; gap: 1.1rem; width: 23.5rem; min-height: 0; }
  #mini { line-height: 1.12; font-size: 12.5px; color: var(--dim); letter-spacing: 0; }
  #mini b { color: var(--bright); font-weight: 700; } #mini i { font-style: normal; color: var(--bg); background: var(--fg); text-shadow: none; }
  .doors { display: grid; gap: .1rem; margin-top: .7rem; font-size: 13.5px; }
  .doors button { text-align: left; padding: .12rem .6ch; } .doors button:hover { background: var(--bg2); color: var(--bright); }
  .doors button kbd { font: inherit; color: var(--bright); font-weight: 700; margin-right: 1.2ch; }
  .doors button.here { background: var(--fg); color: var(--bg); text-shadow: none; } .doors button.here kbd { color: var(--bg); }
  .dpad { display: grid; grid-template-columns: repeat(3, 3.3rem); grid-auto-rows: 2.7rem; gap: .35rem; justify-content: center; margin: .2rem 0 .5rem; }
  .dpad button { border: 1px solid var(--dim); font-weight: 700; touch-action: none; user-select: none; -webkit-user-select: none; }
  .dpad button:active, .dpad button.on { background: var(--fg); color: var(--bg); text-shadow: none; }
  .dpad .f { grid-column: 2; } .dpad .l { grid-column: 1; grid-row: 2; } .dpad .b { grid-column: 2; grid-row: 2; } .dpad .r { grid-column: 3; grid-row: 2; }

  /* ---------- 3 system ---------- */
  .system { display: grid; grid-template-rows: auto auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .pillars > *, .sysgrid > * { min-width: 0; }
  .pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
  .pillars .pane { padding: 1rem 1.1rem .8rem; }
  .pillars b { display: block; color: var(--bright); font-size: 1.05rem; }
  .pillars pre { color: var(--fg); overflow: hidden; margin-top: .35rem; height: 1.55em; }
  .pipe { padding: .95rem 1.2rem .8rem; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1ch; }
  .pipe span { border: 1px solid var(--rule); padding: .1rem 1.1ch; } .pipe span.on { background: var(--fg); color: var(--bg); border-color: var(--fg); text-shadow: none; font-weight: 700; }
  .pipe i { font-style: normal; color: var(--dim); }
  .sysgrid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.1rem; min-height: 0; }
  .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 1.1rem; min-height: 0; }
  .card { text-align: left; border: 1px solid var(--rule); padding: .8rem 1rem .75rem; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--bg); }
  .card:hover { border-color: var(--dim); background: var(--bg2); }
  .card[aria-pressed="true"] { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
  .card b { color: var(--bright); font-size: 1.08rem; } .card small { font-size: 13px; color: var(--dim); }
  .card pre { margin: .5rem 0 .15rem; color: var(--fg); font-size: 13px; overflow: hidden; }
  .card .cnt { font-size: 13px; color: var(--dim); margin-top: .35rem; }
  .card .last { margin-top: auto; padding-top: .4rem; font-size: 13px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .detail { display: flex; flex-direction: column; }
  .detail h3 { font: inherit; font-size: 1.2rem; font-weight: 700; color: var(--bright); }
  .detail .lines { flex: 1; min-height: calc(5 * 1.55em); margin: .7rem 0; font-size: 13.5px; }

  /* ---------- 4 signal ---------- */
  .signal { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.1rem; }
  .signal .feed { display: flex; flex-direction: column; }
  #bigfeed { flex: 1; min-height: 0; font-size: 13.5px; }
  .sside { display: flex; flex-direction: column; gap: 1.1rem; min-height: 0; }
  .filters { display: flex; flex-wrap: wrap; gap: .45rem; }
  #hist { font-size: 13px; color: var(--fg); line-height: 1.5; }

  /* ---------- 5 lab ---------- */
  .lab { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.1rem; }
  .lab .view .stagebox { touch-action: none; cursor: cell; }
  .lside { display: flex; flex-direction: column; gap: 1.1rem; }
  .stat { display: grid; grid-template-columns: auto 1fr; gap: 0 2ch; } .stat b { color: var(--bright); font-weight: 400; text-align: right; }

  /* ---------- 6 talk ---------- */
  .talk { display: grid; grid-template-rows: minmax(0, 1fr) auto; max-width: 96ch; margin: 0 auto; gap: .9rem; }
  .talk .convo { display: flex; flex-direction: column; }
  #chat { flex: 1; min-height: 0; padding: 0 1.2rem; }
  #chat p { margin: 0 0 .8rem; max-width: 76ch; white-space: pre-wrap; overflow-wrap: anywhere; }
  #chat p.me { color: var(--bright); } #chat p.me::before { content: "you> "; color: var(--dim); }
  #chat p.it::before { content: "$SHELL> "; color: var(--bright); font-weight: 700; }
  #chat p.sys { color: var(--dim); font-size: 13px; }
  .talk .send { padding: .7rem 1.2rem; display: flex; gap: 1ch; align-items: center; }
  .talk .send input { flex: 1; }

  /* ---------- 7 manifesto ---------- */
  .manifesto { max-width: 74ch; margin: 0 auto; padding: 1.5rem .5rem 3rem; }
  .manifesto .eyebrow { color: var(--dim); margin-bottom: 1.6rem; }
  .manifesto p.m { font-size: clamp(1.25rem, 2.6vw, 1.9rem); line-height: 1.35; color: var(--fg); margin-bottom: 1.5rem; min-height: 1.35em; }
  .manifesto p.m.hi { color: var(--bright); font-weight: 700; font-size: clamp(1.7rem, 4.2vw, 3.1rem); line-height: 1.15; margin: 2.2rem 0; }
  .manifesto .btns { margin-top: 2.2rem; }

  /* ---------- header CA, token page, extras ---------- */
  .topca { white-space: nowrap; font-size: 13px; }
  .topca code { font: inherit; color: var(--bright); }
  .top .xlink { padding: .32rem 1.6ch; }
  .dreport { color: var(--fg); margin-top: .5rem; max-width: 70ch; }
  .pipe em { font-style: normal; margin-left: auto; }
  #exp { color: var(--fg); line-height: 1.5; white-space: pre-wrap; }
  #now { color: var(--fg); white-space: pre-wrap; }
  .lines p a { color: inherit; text-decoration: none; } .lines p a:hover { color: var(--bright); text-decoration: underline; }
  #bigfeed p { white-space: normal; text-overflow: clip; }
  #bigfeed { justify-content: flex-start; }
  .tokenp { max-width: 96ch; margin: 0 auto; padding: 1.5rem .5rem 3rem; }
  .tokenp .eyebrow { color: var(--dim); margin-bottom: 1.2rem; }
  .tokenp .big { font-size: clamp(2rem, 6vw, 4rem); color: var(--bright); line-height: 1.05; }
  .tokenp .lead { margin: .6rem 0 0; }
  .tokenp .btns { margin-top: 1rem; }
  #tokread { margin-top: 1rem; white-space: pre-wrap; }
  .tgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin-top: 2rem; }
  .tgrid p { font-size: 14px; }
  .brief { border-top: 1px solid var(--rule); padding-top: .5rem; margin-top: .5rem; white-space: pre-wrap; }
  .wait-line { color: var(--dim); }

  /* ---------- wide desktop keeps everything on one screen ---------- */
  @media (min-width: 1000px) and (min-height: 640px) {
    .panel.fit > * { height: 100%; }
    .panel.free { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
    .roominfo { max-height: 46%; overflow-y: auto; scrollbar-width: thin; }
  }
  /* ---------- everything else stacks and scrolls ---------- */
  @media (max-width: 1240px) { .topca { display: none; } }
  @media (max-width: 999px), (max-height: 639px) {
    html, body { height: auto; }
    body { font-size: clamp(13.5px, 3.7vw, 15px); }
    .app { display: block; height: auto; padding: 0 .8rem 1rem; }
    .top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); padding: .55rem 0; gap: .9rem; margin-bottom: 1.1rem; }
    .top .xlink { padding: .2rem 1.2ch; } .topca { display: none; } .brand { font-size: .95rem; }
    .tgrid { grid-template-columns: 1fr; }
    .panel { height: auto; }
    .home, .rooms, .signal, .lab, .sysgrid { display: flex; flex-direction: column; gap: 1.15rem; }
    .hero-in { padding: 1.2rem 1rem 1rem; }
    .hero canvas { opacity: .28; }
    .logo { font-size: min(calc((100vw - 3.8rem) / 30), 22px); }
    .hero h1 { font-size: 1.3rem; margin-top: 1.2rem; }
    .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shell .scroll { overflow: visible; margin-top: 0; padding: 1.1rem .9rem .9rem; }
    .view .stagebox { flex: none; height: min(72vw, 360px); min-height: 0; }
    .lab .view .stagebox { height: min(86vw, 420px); }
    .rside, .sside, .lside { width: auto; }
    .rside .mapp { order: 2; }
    #mini { font-size: clamp(9.5px, 2.75vw, 12.5px); }
    .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
    .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
    .system { gap: 1.15rem; }
    #bigfeed { height: 60vh; flex: none; }
    .talk { display: block; } #chat { height: 52vh; } .talk .convo { margin-bottom: .9rem; }
    .pane.pad, .roominfo, .hud { padding-left: .9rem; padding-right: .9rem; }
    .bar { margin-top: 1.15rem; }
    .dpad { grid-template-columns: repeat(3, 4.2rem); grid-auto-rows: 3.1rem; }
  }
  @media (prefers-reduced-motion: reduce) { .caret, .brand i { animation: none; } .js .app { animation: none; } }