@font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: url(../fonts/jetbrains-mono-500.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: url(../fonts/jetbrains-mono-700.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Unbounded'; font-weight: 800; src: url(../fonts/unbounded-800.woff2) format('woff2'); font-display: swap; }

:root { --bg: #05070b; --bg2: #090d13; --line: #121822; --line2: #1f2835; --fg: #dfe6ee; --fg2: #a9b4c2; --dim: #74808f; --faint: #434d5a; --sig: #9ad8ff; --sigd: #4f86ab; --warn: #ff6b5e; --amber: #d7c6ff; --ink: #031018;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; --sans: 'JetBrains Mono', ui-monospace, monospace; --disp: 'Unbounded', 'JetBrains Mono', sans-serif; }
* { box-sizing: border-box; margin: 0; }
html { color-scheme: dark; background: var(--bg); }
body { background: var(--bg); color: var(--fg); font: 500 13px/1.6 var(--mono); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--sig); color: #000; }
:focus-visible { outline: 1px solid var(--sig); outline-offset: 1px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* the frame: a title line, the page, a tmux-style status bar */
body.app { height: 100vh; height: 100dvh; display: grid; grid-template-rows: 56px minmax(0, 1fr) 28px; overflow: hidden; }
body.app::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 80; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
body.app::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 79; background: radial-gradient(ellipse at 50% 45%, #0000 60%, #00000099 100%); }
.top { display: flex; align-items: center; gap: 14px; padding: 0 14px; border-bottom: 1px solid var(--line2); background: var(--bg); min-width: 0; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.brand img { width: 20px; height: 20px; display: block; }
.path { color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.path b { color: var(--dim); font-weight: 400; }
.sp { flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 9px; font-size: 11.5px; color: var(--fg2); border: 1px solid var(--line2); background: transparent; cursor: pointer; white-space: nowrap; }
.chip:hover { border-color: var(--sigd); color: var(--sig); }
.chip b { font-weight: 400; color: var(--faint); }
main#main { overflow: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: #26303c transparent; position: relative; }

.bar { display: flex; align-items: stretch; background: var(--sig); color: var(--ink); font-size: 12px; min-width: 0; position: relative; z-index: 81; }
.bar .sess { padding: 0 10px; background: var(--ink); color: var(--sig); font-weight: 700; display: flex; align-items: center; white-space: nowrap; }
.bar .wins { display: flex; overflow-x: auto; scrollbar-width: none; }
.bar .wins a { padding: 0 10px; display: flex; align-items: center; white-space: nowrap; }
.bar .wins a:hover { background: #0000001f; }
.bar .wins a[aria-current=page] { background: var(--ink); color: var(--sig); }
.bar .wins a[aria-current=page]::after { content: '*'; }
.bar .st { margin-left: auto; padding: 0 12px; display: flex; align-items: center; gap: 14px; white-space: nowrap; overflow: hidden; }
.bar .msg { margin-left: auto; padding: 0 12px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bar form { flex: 1; display: none; align-items: center; background: var(--ink); color: var(--sig); padding: 0 10px; gap: 8px; }
.bar.cmd form { display: flex; } .bar.cmd .wins, .bar.cmd .st, .bar.cmd .sess { display: none; }
.bar form input { flex: 1; background: transparent; border: 0; outline: none; color: var(--fg); min-width: 0; }
.hintk { color: #03101899; }

/* panes */
.wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); grid-auto-rows: minmax(270px, 1fr); gap: 0; height: 100%; }
.pane { background: var(--bg); display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; overflow: hidden; cursor: pointer; transition: box-shadow .3s; border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.pane:hover { background: var(--bg2); }
.pane.hot { box-shadow: inset 0 0 0 1px var(--sigd), inset 0 0 28px #9ad8ff18; }
.pane.root { cursor: default; }
@media (min-width: 900px) { .pane.root { grid-row: span 2; } }
.ph { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--dim); white-space: nowrap; min-width: 0; }
.ph .pid { color: var(--faint); }
.ph .tk { color: var(--fg); font-weight: 700; letter-spacing: .02em; }
.ph .pipe { color: var(--faint); display: inline-flex; gap: 5px; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ph .pipe i { font-style: normal; color: var(--sigd); min-width: 2.4ch; text-align: center; }
.ph .pipe.l i, .ph .pipe.r i { color: var(--sig); }
.ph .fuel { margin-left: auto; letter-spacing: -.5px; color: var(--sigd); flex: none; }
.ph .fuel s { text-decoration: none; color: var(--line2); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.dot.awake { background: var(--sig); box-shadow: 0 0 8px var(--sig); animation: pulse 2.4s infinite; }
.dot.bonded { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.dot.stopped { background: var(--warn); }
@keyframes pulse { 50% { opacity: .4; } }
.pb { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px 12px 10px; -webkit-mask-image: linear-gradient(transparent 0, #000 22%); mask-image: linear-gradient(transparent 0, #000 22%); }
.pb.scroll { overflow-y: auto; justify-content: flex-start; -webkit-mask-image: none; mask-image: none; scrollbar-width: thin; scrollbar-color: #26303c transparent; }
.vacant .pb { justify-content: center; align-items: flex-start; color: var(--faint); -webkit-mask-image: none; mask-image: none; }
.vacant .pb a { color: var(--sigd); } .vacant .pb a:hover { color: var(--sig); }

/* lines */
.l { display: grid; grid-template-columns: 2ch 8ch minmax(0, 1fr); gap: 0 6px; padding: 1px 0; font-size: 12.5px; }
.l .g { color: var(--faint); }
.l .n { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l .t { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--fg); }
.l.h1 .g, .l.h1 .n { color: var(--sig); } .l.h1 .t { color: var(--fg2); }
.l.h0 .g { color: var(--dim); }
.l.sys .t { color: var(--faint); font-style: italic; } .l.sys .g::before { content: '#'; }
.l.wh .t { color: var(--amber); } .l.wh .g::before { content: '~'; } .l.wh .n { color: var(--amber); }
.l .guest { color: var(--faint); }
.l.red .t { color: var(--faint); }
.cur { display: inline-block; width: .6em; height: 1.05em; background: var(--sig); vertical-align: -.18em; animation: blink 1.05s steps(1) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }
.flick { animation: flick 7s infinite; } @keyframes flick { 0%, 93%, 100% { opacity: 1; } 94% { opacity: .85; } 95% { opacity: 1; } 96.5% { opacity: .9; } }

/* root pane intro */
.intro { padding: 22px 18px 6px; border-bottom: 1px solid var(--line); }
.mark { display: flex; align-items: center; gap: 14px; }
.mark img { width: 52px; height: 52px; }
.mark h1 { font: 700 clamp(34px, 5.2vw, 56px)/1 var(--mono); letter-spacing: -.045em; }
.intro .lead { margin-top: 14px; color: var(--fg2); max-width: 54ch; font-size: 13.5px; }
.intro .lead b { color: var(--sig); font-weight: 700; }
.ps { margin: 16px 0 14px; display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 4px 26px; font-size: 12px; }
.ps dt { color: var(--dim); } .ps dd { color: var(--fg); font-size: 15px; font-weight: 700; }
.ps div { display: flex; flex-direction: column-reverse; }
.heroca { font-size: 12px; color: var(--dim); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.heroca code { color: var(--sig); word-break: break-all; } .heroca a { text-decoration: underline; text-underline-offset: 3px; } .heroca a:hover { color: var(--fg); }
.cta { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 32px; padding: 0 14px; font-size: 12.5px; border: 1px solid var(--line2); background: transparent; color: var(--fg); cursor: pointer; }
.btn:hover { border-color: var(--sigd); color: var(--sig); }
.btn.primary { background: var(--sig); color: var(--ink); border-color: var(--sig); font-weight: 700; } .btn.primary:hover { background: #c7ebff; color: var(--ink); }
.btn:disabled { opacity: .4; cursor: not-allowed; } .btn.sm { height: 26px; padding: 0 10px; font-size: 11.5px; }

/* pages */
.page { max-width: 1100px; margin: 0 auto; padding: 26px 18px 60px; }
.page h1 { font: 700 clamp(22px, 3.4vw, 30px)/1.15 var(--mono); letter-spacing: -.03em; }
.page .sub { color: var(--dim); margin: 8px 0 22px; max-width: 70ch; }
.page .sub.cmd::before { content: '$ '; color: var(--sigd); }
.k { color: var(--faint); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.f { height: 26px; padding: 0 10px; font-size: 11.5px; border: 1px solid var(--line2); background: transparent; color: var(--dim); cursor: pointer; }
.f[aria-pressed=true] { color: var(--ink); background: var(--sig); border-color: var(--sig); }
table.pt { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pt th { text-align: left; font-weight: 400; color: var(--faint); padding: 6px 12px 6px 0; border-bottom: 1px solid var(--line2); white-space: nowrap; }
.pt td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.pt tr.row { cursor: pointer; } .pt tr.row:hover td { background: var(--bg2); }
.pt .last { color: var(--fg2); max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt .num { text-align: right; white-space: nowrap; }
.pt .tkc { color: var(--fg); font-weight: 700; }
.bars { display: inline-block; letter-spacing: -.5px; color: var(--sigd); } .bars s { text-decoration: none; color: var(--line2); }
.empty { padding: 44px 18px; text-align: left; color: var(--dim); border: 1px dashed var(--line2); }
.empty b { display: block; color: var(--fg); font-weight: 700; margin-bottom: 6px; }
.empty .btn { margin-top: 14px; }
.msgbox { padding: 9px 12px; border: 1px solid var(--line2); font-size: 12.5px; margin: 12px 0; }
.msgbox.err { border-color: #7a3b33; color: #eab4a6; } .msgbox.ok { border-color: #2f5a78; color: #cfeaff; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.field label { font-size: 11.5px; color: var(--dim); display: flex; justify-content: space-between; }
.in { background: var(--bg2); border: 1px solid var(--line2); padding: 9px 11px; font-size: 13px; width: 100%; outline: none; border-radius: 0; }
.in:focus { border-color: var(--sigd); }
textarea.in { resize: vertical; min-height: 78px; line-height: 1.5; }
select.in { appearance: none; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 7px 14px; font-size: 12.5px; } .kv dt { color: var(--dim); } .kv dd { word-break: break-all; }
.note { border-left: 2px solid var(--sigd); padding: 4px 0 4px 12px; color: var(--fg2); }
.note b { color: var(--fg); }
.toasts { position: fixed; right: 14px; bottom: 40px; z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #0a0e14; border: 1px solid var(--line2); padding: 9px 12px; font-size: 12px; max-width: 340px; } .toast.warn { border-color: #7a3b33; }
footer.foot { margin-top: 50px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--faint); font-size: 11.5px; display: flex; flex-wrap: wrap; gap: 6px 22px; } footer.foot a:hover { color: var(--sig); } footer.foot code { color: var(--dim); }

/* attach (proc) */
.attach { display: grid; grid-template-columns: minmax(0, 1fr) 340px; height: 100%; min-height: 0; }
.attach .term { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line2); }
.attach .pb { padding: 12px 16px; } .attach .l { font-size: 13.5px; padding: 2px 0; }
.wf { display: flex; border-top: 1px solid var(--line2); align-items: center; }
.wf .pfx { padding-left: 14px; color: var(--amber); white-space: nowrap; }
.wf input { flex: 1; background: transparent; border: 0; padding: 12px 10px; outline: none; min-width: 0; font-size: 13px; }
.wf button { background: transparent; border: 0; border-left: 1px solid var(--line2); padding: 0 16px; align-self: stretch; color: var(--fg2); cursor: pointer; } .wf button:hover { color: var(--amber); }
.insp { overflow: auto; padding: 14px 16px 30px; scrollbar-width: thin; }
.insp h4 { font-weight: 400; color: var(--faint); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin: 18px 0 6px; } .insp h4:first-child { margin-top: 0; }
.insp p { color: var(--fg2); } .insp .half { margin: 6px 0; } .insp .half b { color: var(--fg); font-weight: 700; display: block; }
.insp .lore { white-space: pre-wrap; color: var(--fg2); border-left: 2px solid var(--line2); padding-left: 10px; }
.insp .cabox { word-break: break-all; color: var(--sig); } .insp b { word-break: break-all; }
.gauge { height: 4px; background: var(--line2); } .gauge i { display: block; height: 100%; background: var(--sig); }
.mini { display: flex; justify-content: space-between; gap: 10px; color: var(--dim); font-size: 12px; margin-top: 6px; }
@media (max-width: 860px) {
  body.app { grid-template-rows: 56px minmax(0, 1fr) 30px; }
  .wall { height: auto; grid-auto-rows: minmax(300px, auto); } .pane { min-height: 300px; } .pane.root .pb { min-height: 220px; flex: none; }
  .attach { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; overflow: auto; } .attach .term { border-right: 0; min-height: 60vh; } .insp { overflow: visible; }
  .ps { grid-template-columns: repeat(2, auto); } .path, .chip.hide-sm, .bar .st { display: none; }
  .kv { grid-template-columns: 1fr; gap: 2px; } .kv dd { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* spawn wizard */
.lw .steps { display: flex; gap: 6px; margin-bottom: 22px; flex-wrap: wrap; } .lw .steps span { padding: 4px 10px; border: 1px solid var(--line2); color: var(--faint); font-size: 11.5px; } .lw .steps span.on { color: var(--ink); background: var(--sig); border-color: var(--sig); } .lw .steps span.done { color: var(--fg2); }
.lw .cols { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: start; }
.lw section { display: none; } .lw section.on { display: block; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; } .sw { height: 28px; padding: 0 10px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line2); background: transparent; font-size: 11.5px; cursor: pointer; color: var(--dim); } .sw i { width: 12px; height: 12px; } .sw[aria-pressed=true] { border-color: var(--sig); color: var(--fg); }
.lw .pv { position: sticky; top: 16px; } .lw .pv .pane { height: 320px; border: 1px solid var(--line2); cursor: default; }
.av { width: 36px; height: 36px; image-rendering: pixelated; background: #000; border: 1px solid var(--line2); object-fit: cover; flex: none; }
.chk { display: flex; gap: 10px; align-items: flex-start; color: var(--fg2); cursor: pointer; } .chk.bad { color: #eab4a6; }
@media (max-width: 960px) { .lw .cols { grid-template-columns: 1fr; } .lw .pv { position: static; } .two { grid-template-columns: 1fr; } }

/* themed panes (process palette + effects) */
.pane[style*='--acc'] .l.h1 .g, .pane[style*='--acc'] .l.h1 .n { color: var(--acc); }
.fx-scanlines::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(#0000 0 2px, #00000040 2px 3px); z-index: 2; }
.fx-glow .pb { text-shadow: 0 0 6px color-mix(in srgb, var(--acc, #9ad8ff) 40%, transparent); }
.fx-flicker .pb { animation: flick 6s infinite; }
.fx-grain::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .08; z-index: 2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* man page */
.man { max-width: 78ch; } .man h2 { font-weight: 700; font-size: 13px; letter-spacing: .08em; color: var(--sig); margin: 28px 0 8px; text-transform: uppercase; } .man p, .man li { color: var(--fg2); margin: 6px 0; } .man ul { padding-left: 4ch; } .man code { color: var(--fg); background: #ffffff0c; padding: 0 4px; } .man .ind { padding-left: 4ch; }
.man table { border-collapse: collapse; margin: 8px 0 8px 4ch; } .man td { padding: 3px 18px 3px 0; color: var(--fg2); vertical-align: top; } .man td:first-child { color: var(--fg); white-space: nowrap; }

/* pages that fit the window instead of scrolling */
body[data-page=proc] #main, body[data-page=feed] #main { overflow: hidden; }
@media (max-width: 860px) { body[data-page=proc] #main { overflow: auto; } body[data-page=feed] #main { overflow: auto; } body[data-page=feed] .page { height: auto !important; } body[data-page=feed] .pane { min-height: 60vh; } }

/* the descent (home) */
body[data-page=boot] #main { overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
body[data-page=boot] #main::-webkit-scrollbar { display: none; }
#stage { position: sticky; top: 0; height: 100%; overflow: hidden; background: #020306; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#boot { position: absolute; left: clamp(16px, 3vw, 40px); bottom: 18px; font: 12px/1.6 var(--mono); color: var(--dim); white-space: pre-wrap; pointer-events: none; max-width: 62ch; margin: 0; }
#hero { position: absolute; left: clamp(16px, 5vw, 72px); top: 50%; transform: translateY(-54%); max-width: 520px; opacity: 0; transition: opacity .7s; z-index: 3; }
#hero .intro { border: 0; padding: 0; }
#hero .mark h1 { font-size: clamp(40px, 6vw, 72px); }
#hero .mark img { width: 60px; height: 60px; }
#loc { position: absolute; left: clamp(16px, 3vw, 40px); bottom: 20px; display: flex; align-items: baseline; gap: 12px; pointer-events: none; z-index: 3; text-shadow: 0 0 12px #000; }
#loc .k { color: var(--dim); letter-spacing: .08em; } #loc b { font-size: 18px; letter-spacing: -.01em; } #loc em { color: var(--sigd); font-style: normal; font-size: 12px; }
#rail { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; z-index: 3; align-items: flex-end; }
#rail button { display: flex; align-items: center; gap: 9px; background: transparent; border: 0; color: var(--faint); font-size: 11px; cursor: pointer; padding: 3px 0; }
#rail button span { opacity: 0; transition: opacity .2s; } #rail button:hover span, #rail button.on span { opacity: 1; }
#rail button i { width: 7px; height: 7px; border: 1px solid var(--faint); transition: all .2s; } #rail button.on { color: var(--sig); } #rail button.on i { background: var(--sig); border-color: var(--sig); box-shadow: 0 0 10px var(--sig); }
#hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); color: var(--faint); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; z-index: 3; }
#hint::after { content: ' ↓'; color: var(--sigd); animation: pulse 1.8s infinite; }
#end { position: absolute; left: 50%; top: 73%; transform: translate(-50%, -50%); text-align: center; max-width: 560px; padding: 0 18px; opacity: 0; pointer-events: none; z-index: 3; }
#end h2 { font: 700 clamp(24px, 4vw, 40px)/1.1 var(--mono); letter-spacing: -.04em; margin-bottom: 12px; } #end p { color: var(--fg2); margin-bottom: 20px; }
#fade { position: absolute; inset: 0; background: #020306; opacity: 0; pointer-events: none; transition: opacity .32s; z-index: 9; } #fade.on { opacity: 1; }
@media (max-width: 860px) {
  #hero { top: auto; bottom: 64px; transform: none; max-width: none; right: 16px; } #hero .mark img { width: 40px; height: 40px; }
  #boot { top: 14px; bottom: auto; font-size: 11px; } #rail { display: none; } #hint { bottom: 12px; }
}

/* the menu: plain words on top, one big button */
.top { gap: 22px; padding: 0 18px; }
.brand { font-size: 15px; letter-spacing: .02em; } .brand img { width: 24px; height: 24px; }
.menu { display: flex; align-items: center; gap: 2px; min-width: 0; }
.menu a { padding: 8px 12px; font-size: 13.5px; color: var(--fg2); border-bottom: 2px solid transparent; white-space: nowrap; }
.menu a:hover { color: var(--fg); background: #ffffff08; }
.menu a[aria-current=page] { color: var(--sig); border-bottom-color: var(--sig); }
.menu .menu-go { display: none; }
.go { height: 34px; padding: 0 16px; font-size: 13px; }
.chip { height: 30px; font-size: 12px; }
.burger { display: none; }
.bar .where { padding: 0 12px; display: flex; align-items: center; color: #031018cc; white-space: nowrap; }
@media (max-width: 960px) {
  .top { gap: 10px; padding: 0 12px; }
  .menu { display: none; position: fixed; top: 56px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: #05070b; border-bottom: 1px solid var(--line2); padding: 8px 12px 16px; z-index: 90; gap: 0; }
  .menu.open { display: flex; } .menu a { padding: 14px 6px; font-size: 16px; border-bottom: 1px solid var(--line); } .menu a[aria-current=page] { border-bottom-color: var(--line); }
  .menu .menu-go { display: block; margin-top: 12px; text-align: center; background: var(--sig); color: var(--ink); font-weight: 700; border: 0; }
  .burger { display: inline-flex; } .hide-sm { display: none !important; }
}

.bar.cmd .where { display: none; }
/* live: toolbar + every coin, fixed-height panes in a scrolling grid */
.toolbar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 14px; padding: 8px 16px; background: var(--bg); border-bottom: 1px solid var(--line2); flex-wrap: wrap; }
.toolbar b { font-size: 15px; } .toolbar span { color: var(--dim); } .toolbar em { color: var(--faint); font-style: normal; margin-left: auto; }
.toolbar .in { width: 220px; padding: 6px 10px; }
body[data-page=live] .wall { height: auto; grid-auto-rows: 300px; }
body[data-page=live] .pane { min-height: 300px; }
#skip, #jump, #snd { background: #05070be6; border: 1px solid var(--line2); color: var(--fg2); height: 30px; font-size: 12px; padding: 0 10px; cursor: pointer; }
#skip:hover, #jump:hover, #snd:hover { border-color: var(--sigd); color: var(--sig); }
#skip { background: var(--sig); color: var(--ink); border-color: var(--sig); font-weight: 700; } #skip:hover { background: #c7ebff; color: var(--ink); }
#jumpbox { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 8px; z-index: 4; }
#progress { position: absolute; right: 6px; top: 70px; bottom: 70px; width: 2px; background: var(--line2); z-index: 3; } #progress i { display: block; width: 100%; background: var(--sig); box-shadow: 0 0 8px var(--sig); }
@media (max-width: 860px) { #jumpbox { right: 10px; bottom: 44px; } #progress { display: none; } }

/* how it works + docs */
.page.how { max-width: 920px; } .page.how h2, .docs h2 { font: 700 19px var(--mono); letter-spacing: -.02em; margin: 40px 0 12px; color: var(--fg); scroll-margin-top: 16px; } .page.how h2::before, .docs h2::before { content: '# '; color: var(--sigd); }
.lead2 { font-size: 16px; color: var(--fg2); max-width: 66ch; margin-top: 10px; }
.page.how p, .docs p { color: var(--fg2); margin: 8px 0; max-width: 76ch; }
.steps5 { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.steps5 li { border: 1px solid var(--line2); padding: 16px 16px 18px; background: var(--bg2); position: relative; }
.steps5 i { font-style: normal; display: inline-grid; place-items: center; width: 26px; height: 26px; background: var(--sig); color: var(--ink); font-weight: 700; margin-bottom: 10px; }
.steps5 h3 { font: 700 15px var(--mono); margin-bottom: 6px; } .steps5 p { margin: 0; font-size: 12.5px; }
.flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.flow div { flex: 1 1 130px; border: 1px solid var(--line2); padding: 10px 12px; background: var(--bg2); display: flex; flex-direction: column; gap: 4px; }
.flow b { color: var(--sig); font-weight: 700; } .flow span { color: var(--dim); font-size: 12px; } .flow em { align-self: center; color: var(--sigd); font-style: normal; font-size: 18px; }
.pipe-diag { display: flex; align-items: center; margin: 14px 0 10px; }
.pipe-diag .cube { border: 1px solid var(--sigd); padding: 14px 16px; min-width: 150px; background: var(--bg2); display: flex; flex-direction: column; gap: 4px; } .pipe-diag .cube b { color: var(--sig); } .pipe-diag .cube span { color: var(--dim); font-size: 12px; }
.tube { flex: 1; height: 8px; background: #9ad8ff22; border-top: 1px solid var(--sigd); border-bottom: 1px solid var(--sigd); position: relative; min-width: 60px; overflow: hidden; }
.tube i { position: absolute; top: 1px; width: 10px; height: 4px; background: var(--sig); box-shadow: 0 0 8px var(--sig); animation: flow 3.2s linear infinite; } .tube i:nth-child(2) { animation-delay: -.64s; } .tube i:nth-child(3) { animation-delay: -1.28s; } .tube i:nth-child(4) { animation-delay: -1.92s; } .tube i:nth-child(5) { animation-delay: -2.56s; }
@keyframes flow { from { left: -12px; } to { left: 100%; } }
pre.sample, .docs pre { background: var(--bg2); border: 1px solid var(--line2); padding: 14px 16px; overflow-x: auto; font-size: 12.5px; line-height: 1.55; color: var(--fg2); white-space: pre; }
.words { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; } .words dt { color: var(--sig); font-weight: 700; } .words dd { color: var(--fg2); }
.plain { padding-left: 2.2ch; color: var(--fg2); } .plain li { margin: 8px 0; max-width: 76ch; } .plain b { color: var(--fg); }
.docs { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 40px; max-width: 1100px; } .docs article { max-width: 78ch; }
.toc { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; gap: 2px; padding-top: 6px; } .toc b { color: var(--faint); font-weight: 400; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; margin-bottom: 8px; }
.toc a { color: var(--dim); padding: 4px 0 4px 10px; border-left: 2px solid var(--line2); font-size: 12.5px; } .toc a:hover { color: var(--sig); border-left-color: var(--sig); }
.dt { border-collapse: collapse; width: 100%; margin: 8px 0; } .dt td { padding: 8px 14px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--fg2); } .dt td:first-child { color: var(--fg); white-space: nowrap; font-size: 12.5px; }
.docs code, .how code { color: var(--fg); background: #ffffff0c; padding: 0 4px; }
@media (max-width: 860px) { .docs { grid-template-columns: 1fr; gap: 0; } .toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 14px; } .toc a { border: 0; padding: 2px 0; } .toc b { width: 100%; } .words { grid-template-columns: 1fr; gap: 2px; } .words dd { margin-bottom: 8px; } .dt td:first-child { white-space: normal; } .pipe-diag { flex-direction: column; align-items: stretch; } .tube { min-height: 40px; width: 8px; align-self: center; } }

/* film mode: only the scene and the real header/status bar */
body.film #jumpbox, body.film #hint, body.film #progress { display: none; }

/* scrolling: touch drags scroll the page (also over the 3D canvas), no scroll chaining out of the main area */
main#main { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#gl { touch-action: pan-y; }

/* the hall keeps a scroll range even before (or without) data, and says so when the server is unreachable */
#space { height: 400vh; }
#offline { position: absolute; left: 50%; top: 76px; transform: translateX(-50%); z-index: 5; max-width: min(560px, calc(100% - 32px)); text-align: center; padding: 10px 16px; background: #0a0e14; border: 1px solid #7a3b33; color: #eab4a6; font-size: 12.5px; }

/* ---------- Echo: every line keeps its echo ---------- */
/* the big words reverberate downwards, like a voice going down the well */
.mark h1, #end h2, .page h1 { font-family: var(--disp); font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; }
.mark h1 { text-shadow: 0 .16em 0 #9ad8ff38, 0 .32em 0 #9ad8ff1a, 0 .48em 0 #9ad8ff0a; padding-bottom: .5em; line-height: .95; }
#end h2 { text-shadow: 0 .16em 0 #9ad8ff30, 0 .32em 0 #9ad8ff14; padding-bottom: .3em; }
.page h1 { font-size: clamp(22px, 3.2vw, 32px); text-shadow: 0 .16em 0 #9ad8ff2a, 0 .32em 0 #9ad8ff10; padding-bottom: .3em; }
.brand { font-family: var(--disp); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; }
/* the newest line arrives with two ghost copies that fall back into it */
.l.ring .x { animation: ring 1.8s cubic-bezier(.2, .7, .2, 1); }
@keyframes ring { 0% { text-shadow: 18px 0 0 #9ad8ff66, 36px 0 0 #9ad8ff33; } 100% { text-shadow: 0 0 0 #9ad8ff00, 0 0 0 #9ad8ff00; } }
.l.h1 .x { text-shadow: 3px 0 0 #9ad8ff12; }
.l .g { font-weight: 700; }
.l.h1 .g, .l.h1 .n { color: var(--sig); } .l.h0 .g, .l.h0 .n { color: var(--dim); }
.ph .pipe i { letter-spacing: -1px; }
.lead b { color: var(--sig); }
.dot.awake { box-shadow: 0 0 0 0 #9ad8ff66; animation: sonar 2.4s infinite; }
@keyframes sonar { 0% { box-shadow: 0 0 0 0 #9ad8ff88; } 70% { box-shadow: 0 0 0 8px #9ad8ff00; } 100% { box-shadow: 0 0 0 0 #9ad8ff00; } }
.bar { font-weight: 500; } .bar .sess { font-weight: 700; letter-spacing: .04em; }
.btn, .chip, .f, .in, .sw, #skip, #jump { border-radius: 999px; }
.in { border-radius: 10px; } textarea.in { border-radius: 10px; }
.btn.primary { box-shadow: 0 0 0 1px #9ad8ff, 0 0 24px #9ad8ff33; }
.steps5 i { border-radius: 50%; }
.steps5 li, .flow div, .pipe-diag .cube, pre.sample, .docs pre, .empty, .msgbox, .toast, .pane.root, .lw .pv .pane { border-radius: 12px; }
.lw .steps span { border-radius: 999px; }
.av { border-radius: 50%; }

/* the well diagram (how it works): two walls, rings crossing between them */
.well-diag { display: flex; align-items: stretch; margin: 14px 0 10px; gap: 0; }
.well-diag .wallv { border: 1px solid var(--sigd); padding: 14px 16px; min-width: 150px; background: var(--bg2); display: flex; flex-direction: column; gap: 4px; border-radius: 12px; }
.well-diag .wallv b { color: var(--sig); } .well-diag .wallv span { color: var(--dim); font-size: 12px; }
.well-diag .gap { flex: 1; position: relative; min-width: 80px; overflow: hidden; }
.well-diag .gap i { position: absolute; top: 50%; left: 0; width: 26px; height: 26px; margin-top: -13px; border: 2px solid var(--sig); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(45deg); opacity: 0; animation: cross 3s linear infinite; }
.well-diag .gap i:nth-child(2) { animation-delay: -1s; } .well-diag .gap i:nth-child(3) { animation-delay: -2s; }
@keyframes cross { 0% { left: 0; opacity: 0; transform: rotate(45deg) scale(.6); } 15% { opacity: 1; } 85% { opacity: .7; } 100% { left: calc(100% - 26px); opacity: 0; transform: rotate(45deg) scale(1.5); } }
@media (max-width: 860px) { .well-diag { flex-direction: column; } .well-diag .gap { min-height: 70px; } .well-diag .gap i { left: 50%; margin-left: -13px; top: 0; animation-name: crossv; transform: rotate(135deg); } }
@keyframes crossv { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 100% { top: calc(100% - 26px); opacity: 0; } }

/* the descent (home) */
#stage { background: #020306; }
#hero { max-width: 560px; }
#hero .mark h1 { font-size: clamp(54px, 9vw, 120px); }
#hero .lead { font-size: 14px; }
#loc b { font-family: var(--disp); font-weight: 800; font-size: 20px; text-transform: uppercase; text-shadow: 0 .16em 0 #9ad8ff30; }
#hint::after { content: ' ↓'; }
#depthm { position: absolute; left: clamp(16px, 3vw, 40px); top: 50%; transform: translateY(-50%); z-index: 3; pointer-events: none; font-size: 11px; color: var(--faint); letter-spacing: .1em; opacity: 0; transition: opacity .4s; }
#depthm b { display: block; font-family: var(--disp); font-weight: 800; font-size: clamp(28px, 4vw, 44px); color: var(--fg); letter-spacing: -.02em; text-shadow: 0 .16em 0 #9ad8ff2c, 0 .32em 0 #9ad8ff12; margin-top: 4px; }
@media (max-width: 860px) { #depthm { top: 76px; transform: none; } #depthm b { font-size: 26px; } #hero .mark h1 { font-size: clamp(48px, 15vw, 80px); } }
#end { top: 30%; }
#skip { white-space: nowrap; }
@media (max-width: 860px) { #loc { bottom: 92px; left: 16px; right: 16px; flex-wrap: wrap; gap: 4px 10px; } #loc b { font-size: 16px; } #jumpbox { left: 10px; right: 10px; bottom: 40px; } #jump { flex: 1; min-width: 0; } #end { top: 26%; } #hint { display: none; } }
@media (max-width: 860px) { #stage.heroon #boot { visibility: hidden; } #hero .ps { margin: 10px 0; } }