@font-face { font-family: "Maple Mono CN iptools"; src: url("assets/fonts/maple-mono-cn-iptools.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 400; }

:root {
  color-scheme: dark;
  --bg: #080b0f; --surface: #101419; --surface-raised: #171c22; --terminal: #0c0c0c;
  --text: #cccccc; --muted: #858b92; --faint: #555b62; --line: #30363d;
  --accent: #3a96dd; --positive: #13a10e; --warning: #c19c00; --glow: rgba(58,150,221,.16);
  --radius: 12px;
  font-family: "Maple Mono CN iptools", "Maple Mono NF CN", "LXGW WenKai Mono", "Noto Sans Mono CJK SC", "Cascadia Mono", monospace;
  background: var(--bg); color: var(--text);
}
:root[data-theme="nord"] { --bg:#242933; --surface:#2e3440; --surface-raised:#3b4252; --terminal:#2e3440; --text:#eceff4; --muted:#aab3c0; --faint:#697386; --line:#4c566a; --accent:#88c0d0; --positive:#a3be8c; --warning:#ebcb8b; --glow:rgba(136,192,208,.15); }
:root[data-theme="catppuccin-mocha"] { --bg:#11111b; --surface:#181825; --surface-raised:#313244; --terminal:#1e1e2e; --text:#cdd6f4; --muted:#a6adc8; --faint:#6c7086; --line:#45475a; --accent:#89b4fa; --positive:#a6e3a1; --warning:#f9e2af; --glow:rgba(137,180,250,.16); }
:root[data-theme="dracula"] { --bg:#191a21; --surface:#21222c; --surface-raised:#282a36; --terminal:#282a36; --text:#f8f8f2; --muted:#b7b8c2; --faint:#6272a4; --line:#44475a; --accent:#8be9fd; --positive:#50fa7b; --warning:#f1fa8c; --glow:rgba(139,233,253,.15); }

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0; height: 100vh; overflow: hidden; display: grid;
  grid-template-rows: auto auto minmax(0,1fr) auto; gap: .65rem;
  padding: max(.85rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(.75rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));
  background: var(--bg); transition: background-color .25s ease, color .25s ease;
}
.ambient { position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .8; background: radial-gradient(800px 420px at 12% -10%,var(--glow),transparent 68%), radial-gradient(680px 360px at 92% 5%,color-mix(in srgb,var(--positive) 7%,transparent),transparent 72%), linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size: auto,auto,48px 48px,48px 48px; mask-image: linear-gradient(to bottom,#000 0%,transparent 70%); }

a, button, select { font: inherit; }
a { color: inherit; text-decoration: none; }
.masthead { min-height: 2.7rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; border-bottom: 1px solid var(--line); padding: 0 .15rem .65rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; width: fit-content; }
.brand-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: .72rem; letter-spacing: -.08em; }
.brand-copy { display: grid; line-height: 1.05; }
.brand-copy strong { color: var(--text); font-size: 1.05rem; letter-spacing: -.04em; }
.brand-copy small { margin-top: .26rem; color: var(--muted); font-size: .64rem; }
.edition { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .67rem; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.status-dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--positive); box-shadow: 0 0 .8rem color-mix(in srgb,var(--positive) 55%,transparent); }
.edition-separator { width: 1px; height: .85rem; background: var(--line); }
.demo-badge { color: var(--warning); }
.utility-links { display: flex; justify-content: flex-end; gap: 1rem; color: var(--muted); font-size: .7rem; }
.utility-links a { position: relative; padding: .35rem 0; }
.utility-links a::after { content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--accent); transition:right .18s ease; }
.utility-links a:hover::after { right:0; }

.exhibit-bar { display: grid; grid-template-columns: minmax(15rem,1fr) auto; align-items: end; gap: 1.5rem; }
.exhibit-intro { min-width: 0; }
.eyebrow { display: block; color: var(--accent); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .25rem; }
.exhibit-intro p { margin: 0; max-width: 54rem; color: var(--muted); font-size: .72rem; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.controls { display: flex; align-items: flex-end; gap: .4rem; }
.scenario-control { display: grid; gap: .22rem; }
.control-label { padding-left: .15rem; color: var(--faint); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }
button, select { min-height: 2.05rem; border: 1px solid var(--line); border-radius: 7px; background: color-mix(in srgb,var(--surface-raised) 78%,transparent); color: var(--text); padding: .38rem .62rem; transition: border-color .16s ease,background-color .16s ease,transform .16s ease; }
button { cursor: pointer; }
button:hover, select:hover { border-color: color-mix(in srgb,var(--accent) 70%,var(--line)); background: var(--surface-raised); }
button:active { transform: translateY(1px); }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon-button { display: inline-flex; align-items: center; gap: .45rem; }
.icon-button > [aria-hidden="true"] { color: var(--accent); }

.stage { min-width: 0; min-height: 0; display: grid; grid-template-rows: 2rem minmax(0,1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb,var(--surface) 85%,transparent); box-shadow: 0 1.5rem 4rem rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.025); }
.stage-meta { min-height: 2rem; display: flex; align-items: center; gap: .7rem; padding: .42rem .7rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; }
.stage-number { color: var(--accent); }
.stage-title { color: var(--text); }
.stage-rule { height: 1px; flex: 1; background: var(--line); }
.privacy-note { color: var(--muted); white-space: nowrap; }
#terminal { width:100%; height:100%; min-width:0; min-height:0; overflow:hidden; background:var(--terminal); outline:none; transition:background-color .25s ease; }
#terminal:focus { box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--accent) 72%,transparent); }
#terminal canvas, #terminal pre { display:block; margin:0; }
#terminal, #terminal pre, #terminal span { font-family:"Maple Mono CN iptools","Maple Mono NF CN","LXGW WenKai Mono","Noto Sans Mono CJK SC",monospace; font-variant-ligatures:none; }

.soft-keys { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.3rem; }
.soft-key-label { margin-right:.4rem; color:var(--faint); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; }
.soft-keys button { min-width:2.8rem; min-height:1.75rem; padding:.28rem .48rem; color:var(--muted); font-size:.68rem; touch-action:manipulation; }
.soft-keys button:hover { color:var(--text); }
.rotate { display:none; margin:.45rem; color:var(--warning); text-align:center; font-size:.72rem; }
#update-toast { position:fixed; right:1rem; bottom:1rem; z-index:4; display:flex; align-items:center; gap:.7rem; padding:.65rem .75rem; border:1px solid var(--accent); background:var(--surface-raised); border-radius:8px; box-shadow:0 .8rem 2.5rem rgba(0,0,0,.35); font-size:.72rem; }
#update-toast[hidden] { display:none; }
noscript { position:fixed; inset:auto 1rem 1rem; padding:.75rem; background:var(--surface-raised); border:1px solid var(--warning); }
.i18n-en { display:none; }
html[lang="en"] .i18n-zh { display:none; }
html[lang="en"] .i18n-en { display:revert; }

:fullscreen body { min-height:100vh; padding:.5rem; }
@media (max-width: 900px) { .masthead { grid-template-columns:1fr auto; } .edition { display:none; } .utility-links { gap:.7rem; } .exhibit-bar { grid-template-columns:1fr; gap:.55rem; } .exhibit-intro p { white-space:normal; } .controls { justify-content:flex-end; } .button-label { display:none; } }
@media (max-width:720px) and (orientation:portrait) { body { height:auto; overflow:auto; grid-template-rows:auto auto minmax(390px,1fr) auto; } .masthead { align-items:start; } .utility-links a:first-child { display:none; } .stage { min-height:390px; grid-template-rows:auto auto minmax(0,1fr); } .rotate { display:block; } .privacy-note { display:none; } .controls { justify-content:flex-start; flex-wrap:wrap; } .scenario-control { flex:1; } #scenario-select { width:100%; } }
@media (pointer:fine) and (min-width:900px) { .soft-keys { opacity:.74; transition:opacity .18s ease; } .soft-keys:hover,.soft-keys:focus-within { opacity:1; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } }