/* CSS · restrained terminal chrome; Chinese stays in system fonts. */
:root { color-scheme: dark; --ink: #111315; --panel: #171a1c; --white: #edf0e8; --muted: #9a9f9b; --line: #303530; --lime: #d9ff62; --cyan: #8dcbd7; --violet: #b4a1d6; --mono: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
* { box-sizing: border-box; }
html { background: var(--ink); }
body { margin: 0; color: var(--white); background: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--lime); outline-offset: 6px; }
::selection { color: var(--ink); background: var(--lime); }
.page { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 30; padding: 12px 18px; color: var(--ink); background: var(--lime); }
.skip-link:focus { top: 16px; }
.topbar { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 19px; font-weight: 800; letter-spacing: -.06em; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; background: var(--lime); color: var(--ink); }
.brand-mark svg { width: 24px; height: 24px; }
.brand em { color: var(--lime); font-style: normal; }
.top-meta { display: flex; align-items: center; gap: 34px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }
.online { display: inline-flex; align-items: center; gap: 9px; color: var(--lime); white-space: nowrap; }
.dot { display: inline-block; width: 6px; height: 6px; background: currentColor; flex-shrink: 0; }
.clock { color: var(--muted); display: flex; gap: 12px; }
.clock time { font-variant-numeric: tabular-nums; color: var(--white); }

/* HTML control room viewport · the canvas never owns navigation. */
.room { position: relative; height: 492px; isolation: isolate; }
.room-bar { position: absolute; top: 24px; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 3; }
.room-label { display: flex; align-items: center; gap: 12px; color: var(--muted); font: 12px var(--mono); letter-spacing: .1em; }
.room-label b { color: var(--lime); font-weight: 500; }
.view-controls { display: flex; align-items: center; gap: 15px; color: var(--muted); font: 12px var(--mono); }
.motion-toggle { padding: 8px 10px; min-height: 34px; border: 1px solid var(--line); background: transparent; font: 12px var(--mono); }
.motion-toggle:hover { color: var(--lime); border-color: #778450; }
.motion-toggle:disabled { cursor: default; opacity: .65; }
.room-title { position: absolute; top: 64px; left: 0; right: 0; margin: 0; text-align: center; color: #343935; font: 700 clamp(32px, 4.8vw, 62px)/1 var(--mono); letter-spacing: -.055em; pointer-events: none; z-index: -1; }
.room-title span { color: #62695b; }
.scene { position: absolute; inset: 34px 0 6px; overflow: hidden; }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .5s; }
.scene-ready .scene canvas { opacity: 1; }
.scanlines { position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: .09; background: repeating-linear-gradient(transparent 0 3px, #080a08 3px 4px); }
.room::before, .room::after { content: "+"; position: absolute; color: #636a5d; font: 20px var(--mono); bottom: 44px; pointer-events: none; }
.room::before { left: 0; } .room::after { right: 0; }
.operator-note { position: absolute; left: 0; top: 168px; z-index: 2; pointer-events: none; }
.micro-label { color: var(--muted); font: 12px var(--mono); letter-spacing: .09em; }
.operator-note strong { display: block; margin-top: 12px; color: #c5cabd; font: 14px/1.8 var(--mono); letter-spacing: .03em; }
.operator-note .vertical-line { width: 1px; height: 42px; margin: 16px 0; background: linear-gradient(var(--lime), #d9ff6200); }
.operator-id { color: var(--lime); font: 12px var(--mono); }
.coordinates { position: absolute; right: 0; top: 172px; color: #8a9285; font: 12px/1.9 var(--mono); text-align: right; pointer-events: none; }
.coordinates b { display: block; font-weight: 400; color: #c4cabe; }
.room-tag { position: absolute; z-index: 3; width: max-content; pointer-events: none; padding: 6px 9px; border-left: 2px solid var(--node-color); background: #111315d9; font: 12px/1.6 var(--mono); transform: translate(-50%, -100%); transition: opacity .2s, background .2s; opacity: .75; }
.room-tag b { display: block; color: #d5dbcd; font-weight: 500; letter-spacing: .04em; }
.room-tag span { color: var(--node-color); font-size: 12px; }
.tag-main { --node-color: var(--lime); left: 32%; top: 45%; }
.tag-backup { --node-color: var(--violet); left: 72%; top: 43%; }
.tag-support { --node-color: var(--cyan); left: 74%; top: 76%; }
[data-node="main"] .tag-main, [data-node="backup"] .tag-backup, [data-node="support"] .tag-support { opacity: 1; background: #222820ed; }
.speech { position: absolute; z-index: 4; left: 54%; top: 41%; padding: 8px 12px; color: var(--ink); background: var(--cyan); font: 700 12px var(--mono); opacity: 0; transform: translate(-50%, -100%); pointer-events: none; }
.speech::after { content: ""; position: absolute; bottom: -6px; left: 12px; width: 6px; height: 6px; background: var(--cyan); }
[data-node="support"] .speech { opacity: 1; }
.room-bottom { position: absolute; bottom: 4px; left: 0; right: 0; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.room-prompt { margin: 0; color: #b4bba9; font-size: 13px; line-height: 1.6; }
.room-prompt .prompt-arrow { margin-right: 9px; color: var(--lime); font-family: var(--mono); }
.cursor { display: inline-block; width: 6px; height: 12px; margin-left: 7px; background: var(--lime); vertical-align: -1px; animation: cursor-blink 1.5s steps(1) infinite; }
@keyframes cursor-blink { 50% { opacity: 0; } }
.room-hint { color: #909788; font: 12px var(--mono); }
.room-hint::before { content: "[ "; color: #5f6954; } .room-hint::after { content: " ]"; color: #5f6954; }
.fallback-note { display: none; }
[data-render="fallback"] .fallback-note { display: inline; }
[data-render="fallback"] .default-hint { display: none; }

/* Primary action and compact pixel menu. */
.welcome { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 25px 0 28px; border-bottom: 1px solid var(--line); }
.welcome-title { display: flex; align-items: baseline; gap: 24px; }
h1 { margin: 0; font-size: clamp(38px, 4.3vw, 56px); font-weight: 800; letter-spacing: -.075em; line-height: 1.25; }
h1 em { color: var(--lime); font-style: normal; font-family: var(--mono); font-weight: 700; letter-spacing: -.08em; }
.tagline { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: .02em; }
.brand-copy { margin: 10px 0 0; font-size: 14px; color: var(--muted); line-height: 1.7; }
.cta-wrap { flex-shrink: 0; padding: 5px; }
.enter { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 35px; min-width: 252px; min-height: 65px; padding: 0 24px; background: var(--lime); color: #202719; font: 700 16px var(--mono); box-shadow: 4px 4px 0 #566039; transition: background .18s, box-shadow .18s; will-change: transform; }
.enter::before, .enter::after { content: ""; position: absolute; width: 4px; height: 4px; background: var(--ink); }
.enter::before { left: 0; top: 0; } .enter::after { right: 0; bottom: 0; }
.enter:hover { background: #e6ff96; box-shadow: 4px 4px 0 #85944c; }
.enter .enter-arrow { font-size: 25px; font-weight: 400; line-height: 1; }
.enter:active { box-shadow: 1px 1px 0 #85944c; }
.nav-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 22px 0; border: 1px solid var(--line); background: #171a18; }
.nav-item { position: relative; display: flex; align-items: center; gap: 17px; width: 100%; min-width: 0; min-height: 90px; padding: 20px 25px; text-align: left; border: 0; background: transparent; transition: background .18s; }
.nav-item + .nav-item { border-left: 1px solid var(--line); }
.nav-item::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--node-color); opacity: 0; transition: opacity .18s; }
.nav-item:hover, .nav-item:focus-visible { background: #232921; }
.nav-item:hover::before, .nav-item:focus-visible::before { opacity: 1; }
.nav-main { --node-color: var(--lime); } .nav-support { --node-color: var(--cyan); } .nav-backup { --node-color: var(--violet); }
.nav-number { color: #9ba78e; font: 12px var(--mono); align-self: flex-start; margin-top: 5px; }
.nav-name { display: flex; gap: 9px; align-items: center; font: 14px var(--mono); letter-spacing: .04em; }
.nav-name .dot { color: var(--node-color); width: 4px; height: 4px; }
.nav-caption { display: block; margin-top: 7px; color: #bdc4b6; font-size: 14px; }
.nav-arrow { margin-left: auto; color: var(--node-color); font: 21px var(--mono); }
.status-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 23px; color: var(--muted); font: 12px/1.7 var(--mono); }
.status-list { display: flex; flex-wrap: wrap; gap: 21px; }
.status-list span { display: inline-flex; align-items: center; gap: 7px; }
.status-list .dot { width: 4px; height: 4px; color: #9eb379; }
.status-list span:nth-child(2) .dot { color: var(--cyan); } .status-list span:nth-child(3) .dot { color: var(--violet); }
.session { display: flex; gap: 14px; }
.session time { color: #d7decf; font-variant-numeric: tabular-nums; }
footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px 0 25px; border-top: 1px solid var(--line); color: #979e90; font: 12px/1.6 var(--mono); }
.footer-note { color: #adb59e; } .footer-note span { color: var(--lime); margin-left: 10px; }
.support-notice { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 15px 19px; background: #212b29; border: 1px solid var(--cyan); box-shadow: 4px 4px 0 #080a09; color: #e3efed; font-size: 14px; line-height: 1.65; z-index: 20; }
.support-notice:empty { display: none; }
.support-notice button { margin-left: 16px; padding: 3px 7px; border: 1px solid #526763; background: transparent; }
.cursor-glow { position: fixed; left: 0; top: 0; z-index: 5; width: 210px; height: 210px; pointer-events: none; background: radial-gradient(circle, #d9ff6207, transparent 65%); opacity: 0; }
.launching .enter { background: #f0ffcb; } .launching .tag-main { background: #d9ff62; }
.launching .tag-main b, .launching .tag-main span { color: var(--ink); }

/* Fallback · always rendered first, including when JavaScript is disabled. */
.fallback-room { position: absolute; left: 50%; top: 48%; width: 520px; height: 300px; transform: translate(-50%, -43%); pointer-events: none; }
.scene-ready .fallback-room { display: none; }
.fb-floor { position: absolute; left: 45px; top: 125px; width: 420px; height: 155px; background: repeating-linear-gradient(0deg, transparent 0 29px, #81887520 29px 30px), repeating-linear-gradient(90deg, #282e29 0 39px, #394134 39px 40px); transform: skewY(-12deg); border: 5px solid #414b36; box-shadow: 8px 14px 0 #1b211b, 8px 18px 0 #39452b; }
.fb-wall { position: absolute; left: 45px; top: 44px; width: 420px; height: 150px; transform: skewY(-12deg); background: #242b25; border: 5px solid #394333; box-shadow: inset 0 18px #2e362c; }
.fb-wall span { display: block; position: absolute; top: 27px; right: 32px; padding: 6px 10px; border: 1px solid #63734c; color: var(--lime); font: 12px var(--mono); }
.fb-terminal { position: absolute; left: 87px; top: 104px; width: 115px; height: 130px; }
.fb-monitor { width: 105px; height: 74px; border: 7px solid #626b56; box-shadow: 5px 4px 0 #323d2a; background: #2b361c; color: var(--lime); font: 10px/1.5 var(--mono); padding: 8px; }
.fb-monitor::after { content: "▰ ▰ ▰\A ━━━━━\A > _"; white-space: pre; }
.fb-desk { position: absolute; top: 89px; left: -17px; width: 150px; height: 12px; background: #6b7359; box-shadow: 4px 5px 0 #384331; }
.fb-desk::before, .fb-desk::after { content: ""; position: absolute; top: 12px; width: 10px; height: 40px; background: #384332; }
.fb-desk::before { left: 10px; } .fb-desk::after { right: 9px; }
.fb-robot { position: absolute; left: 249px; top: 115px; width: 66px; height: 132px; }
.fb-head { position: absolute; width: 64px; height: 52px; border: 7px solid #d2d8bf; background: #222925; box-shadow: 7px -4px 0 #8b9681, -7px 10px 0 -1px #56634b; }
.fb-head::before { content: ""; position: absolute; top: 14px; left: 8px; width: 9px; height: 9px; background: var(--lime); box-shadow: 23px 0 0 var(--lime); animation: fb-blink 6s steps(1) infinite; }
.fb-head::after { content: ""; position: absolute; width: 7px; height: 15px; background: var(--lime); top: -22px; right: -4px; }
.fb-body { position: absolute; top: 58px; left: 8px; width: 45px; height: 40px; border: 8px solid #68745a; background: #20291c; box-shadow: 6px -3px 0 #3f4a36; }
.fb-body::after { content: "AI"; display: block; color: var(--lime); text-align: center; font: 12px/23px var(--mono); }
.fb-arms { position: absolute; top: 60px; left: -9px; width: 12px; height: 37px; background: #c9d3b9; box-shadow: 72px 0 0 #c9d3b9; border-bottom: 8px solid #8c9d6d; }
.fb-legs { position: absolute; top: 104px; left: 10px; width: 17px; height: 27px; background: #8a9579; border-bottom: 8px solid #343f2e; box-shadow: 25px 0 0 #899577; }
.fb-server { position: absolute; right: 74px; top: 75px; width: 61px; height: 110px; border: 7px solid #465144; background: repeating-linear-gradient(#1a211e 0 20px, #3b483a 20px 25px); box-shadow: 8px 5px 0 #242e25; }
.fb-server::after { content: ""; position: absolute; width: 5px; height: 5px; top: 8px; left: 7px; background: var(--violet); box-shadow: 0 25px 0 var(--violet), 0 50px 0 var(--violet), 0 75px 0 var(--violet); }
.fb-comm { position: absolute; right: 25px; bottom: 39px; width: 66px; height: 43px; border: 6px solid #64786e; background: #20393a; color: var(--cyan); font: 700 18px var(--mono); text-align: center; box-shadow: 4px 6px 0 #344941; }
[data-node="main"] .fb-monitor { background: #445424; } [data-node="backup"] .fb-server { border-color: #84759b; } [data-node="support"] .fb-comm { background: #45616a; }
@keyframes fb-blink { 0%, 44%, 48%, 100% { transform: scaleY(1); } 46% { transform: scaleY(.1); } }

/* Responsive · fixed camera and a vertical menu on small screens. */
@media (min-width: 1550px) and (min-height: 900px) { .room { height: 552px; } .welcome { padding-block: 30px; } }
@media (max-width: 1080px) {
  .page { width: calc(100% - 56px); } .operator-note, .coordinates { display: none; } .room { height: 455px; }
  .welcome-title { gap: 18px; } .tagline { font-size: 18px; } .enter { min-width: 235px; padding-inline: 22px; gap: 18px; } .nav-item { padding-inline: 20px; gap: 12px; }
}
@media (max-width: 760px) {
  .page { width: calc(100% - 36px); } .topbar { min-height: 73px; } .brand { font-size: 17px; gap: 9px; } .brand-mark { width: 28px; height: 28px; }
  .top-meta { flex-direction: column; align-items: flex-end; gap: 7px; font-size: 12px; } .clock { display: flex; font-size: 10px; gap: 7px; } .room { height: 394px; } .room-bar { top: 18px; }
  .room-label { gap: 7px; font-size: 12px; letter-spacing: 0; } .room-label .optional { display: none; } .view-controls { gap: 8px; } .view-mode { display: none; } .motion-toggle { min-height: 40px; }
  .room-title { font-size: clamp(26px, 6.4vw, 44px); top: 82px; letter-spacing: -.06em; } .scene { inset: 50px -16px 15px; }
  .room-tag { padding: 4px 6px; font-size: 12px; } .room-tag span { display: none; } .room-prompt { font-size: 12px; } .room-hint { display: none; } .room::before, .room::after { bottom: 38px; }
  .welcome { padding: 22px 0; gap: 18px; } .welcome-title { display: block; } h1 { font-size: 42px; } .tagline { margin-top: 8px; font-size: 17px; } .brand-copy { font-size: 13px; }
  .enter { min-width: 212px; min-height: 61px; padding-inline: 20px; font-size: 14px; } .nav-item { padding: 18px 13px; gap: 10px; min-height: 88px; }
  .nav-name { font-size: 13px; letter-spacing: 0; } .nav-number { display: none; } .nav-caption { font-size: 14px; } .nav-arrow { font-size: 17px; }
  .status-line { gap: 15px; } .status-list { gap: 13px; font-size: 12px; } .fallback-room { transform: translate(-50%, -39%) scale(.83); } .cursor-glow { display: none; }
}
@media (max-width: 540px) {
  .room { height: 345px; } .room-title { top: 75px; } .room-tag { font-size: 10px; padding: 3px 5px; } .tag-support { display: none; } .speech { font-size: 10px; } .room-bottom { bottom: 0; }
  .welcome { display: block; padding-top: 21px; } .welcome-title { display: flex; align-items: baseline; gap: 15px; } h1 { font-size: 39px; } .tagline { margin: 0; font-size: 16px; }
  .brand-copy { margin-top: 9px; font-size: 13px; } .cta-wrap { margin-top: 18px; padding: 0 4px 4px 0; } .enter { width: 100%; min-height: 58px; font-size: 15px; padding-inline: 21px; }
  .nav-menu { grid-template-columns: 1fr; margin: 18px 0; } .nav-item { min-height: 66px; padding: 16px 18px; gap: 16px; } .nav-item + .nav-item { border-left: 0; border-top: 1px solid var(--line); }
  .nav-number { display: block; align-self: center; margin: 0; } .nav-text { display: flex; align-items: center; gap: 16px; } .nav-name { min-width: 75px; font-size: 13px; } .nav-caption { margin: 0; font-size: 14px; } .nav-arrow { font-size: 19px; }
  .status-list { width: 100%; gap: 5px 16px; font-size: 12px; } .status-list span { gap: 5px; } .session { width: 100%; justify-content: space-between; }
  footer { font-size: 12px; padding-bottom: 22px; gap: 9px; } .footer-note { font-size: 12px; } .fallback-room { transform: translate(-50%, -38%) scale(.64); }
}
@media (max-width: 360px) { .page { width: calc(100% - 28px); } .scene { left: -12px; right: -12px; } .top-meta { font-size: 10px; } .brand { font-size: 16px; } .room { height: 315px; } .welcome-title { gap: 12px; } h1 { font-size: 34px; } .tagline { font-size: 14px; } .nav-text { gap: 8px; } .fallback-room { transform: translate(-50%, -38%) scale(.55); } }
@media (hover: none), (pointer: coarse) { .cursor-glow { display: none; } .nav-item, .enter { transform: none !important; } }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .cursor-glow { display: none; } .nav-item, .enter { transform: none !important; } }

/* Former inline declarations, with their original values. */
.operator-unit { color: #87907b; }
.noscript-notice { margin: 16px; text-align: center; color: #8dcbd7; }