:root { --bg:#0e1b24; --fg:#d9e2e6; --dim:#8aa0aa; --panelbg:#101418e0; --pline:#2c3a42; --ok:#5fd36a; --warn:#f0b43c; --bad:#f0503c; --acc:#6cc4ff; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--fg); overflow:hidden; }
body { font:12px/1.4 Consolas, "Courier New", monospace; }
canvas#cv { position:fixed; inset:0; display:block; }
#viewport { position:fixed; inset:0; width:auto; margin:0; overflow:hidden; pointer-events:none; }
#stage { position:absolute; left:0; top:0; background:transparent !important; pointer-events:none; transform-origin:top left; }
#stage .console, #stage .console * { pointer-events:auto; }
#stage .crew-notice { pointer-events:none !important; }
#stage .game-top { background:#101820e8; }
#stage .scene-foot { background:#101820d8; }
body:not([data-state=trial]):not([data-state=free]):not([data-state=practice]):not([data-state=replay]) #viewport { visibility:hidden; }
#trial-info { display:flex; gap:22px; align-items:center; font:15px/1 'Segoe UI', sans-serif; letter-spacing:.1em; color:#c1cdd2; }
#trial-info .ti-time b { color:#f2f1e8; font-size:22px; letter-spacing:.06em; margin-left:6px; }
#tiDev { color:var(--bad); font-weight:700; } #tiFree { color:#101418; background:var(--acc); padding:4px 8px; border-radius:3px; }
#tiFree:empty, #tiDev:empty { display:none; }
#screens { position:fixed; inset:0; z-index:40; overflow:auto; --screens-height:100vh; }
#screens[hidden] { display:none; }
#hostcard { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; background:#09121af2; color:#f2f1e8; font:16px/1.5 'Segoe UI', sans-serif; }
#hostcard[hidden] { display:none; }
#hostcard .host-inner { max-width:560px; padding:36px; border:1px solid #47606d; background:#101820; }
#hostcard .eyebrow { font-size:11px; letter-spacing:.2em; color:#75cfe3; }
#hostcard button { font:inherit; padding:10px 18px; background:#1b3a47; color:#f2f1e8; border:1px solid #75cfe3; cursor:pointer; }
.panel { position:fixed; background:var(--panelbg); border:1px solid var(--pline); padding:6px 10px; white-space:pre; color:var(--fg); }
.dim { color:var(--dim); }
#help { right:12px; top:90px; z-index:30; white-space:normal; max-width:520px; font:13px/1.5 'Segoe UI', sans-serif; padding:12px 16px; }
#help[hidden] { display:none; }
#help h3 { margin:6px 0 4px; font-size:12px; letter-spacing:.14em; color:#75cfe3; }
#help .k { display:inline-block; min-width:18px; padding:0 5px; border:1px solid #607d8c; border-radius:3px; color:#75cfe3; margin-right:4px; font-family:Consolas, monospace; }
#help .row { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid #22323b; padding:2px 0; }
#drill { position:fixed; right:14px; top:96px; z-index:40; background:#101418e8; border:1px solid #5a7684; border-left:3px solid #75cfe3; color:#e8edf0; padding:8px 12px; font:13px/1.5 Consolas, monospace; white-space:pre; max-width:34vw; }
#drill[hidden] { display:none; }
#replayhud { position:fixed; left:32px; right:32px; z-index:40; background:#101820f0; border:1px solid #47606d; border-top:3px solid #f2ba59; border-radius:5px; color:#e4e4d9; padding:6px 14px; font:13px/1.5 'Segoe UI', sans-serif; font-variant-numeric:tabular-nums; white-space:pre-wrap; max-width:none; }
#alarm-rail { z-index:60; }
#replayhud[hidden] { display:none; }
#replayhud .k { display:inline-block; border:1px solid #6a7f8a; border-radius:3px; padding:0 5px; margin:0 2px; color:#75cfe3; }
#replayhud .on { background:#294b58; color:#fff; border-color:#75cfe3; }
body[data-state=replay] #console-root { pointer-events:none; opacity:.92; }
#flash { position:fixed; left:50%; top:96px; transform:translateX(-50%); display:none; color:var(--warn); background:#101418f0; border:1px solid var(--warn); padding:6px 14px; font:14px/1.4 'Segoe UI', sans-serif; z-index:45; max-width:70vw; text-align:center; }
#errors { position:fixed; left:8px; top:50%; color:var(--bad); white-space:pre; z-index:60; }
#overlay { right:8px; top:90px; display:none; max-width:48vw; overflow:hidden; font-size:11px; z-index:25; }
#inmon { right:8px; top:90px; display:none; z-index:26; white-space:normal; max-width:360px; }
#inmon .k { display:inline-block; min-width:22px; padding:1px 4px; margin:1px; border:1px solid var(--pline); text-align:center; color:var(--dim); background:#0b1116; }
#inmon .k.on { color:#101418; background:var(--warn); border-color:var(--warn); font-weight:bold; }
#monHist { white-space:pre; margin-top:4px; font-size:11px; }
#monClose, #tuning button { float:right; background:#23313a; color:var(--fg); border:1px solid var(--pline); padding:2px 8px; margin-left:6px; cursor:pointer; font:inherit; }
#tuning { left:50%; transform:translateX(-50%); top:8px; bottom:8px; width:560px; overflow:auto; display:none; white-space:normal; z-index:35; }
#tuning h3 { margin:10px 0 4px; color:var(--acc); font-size:12px; }
#tuning .row { display:flex; justify-content:space-between; gap:8px; margin:2px 0; }
#tuning label.chg { color:var(--bad); font-weight:bold; }
#tuning input[type=number] { width:90px; background:#1b242a; color:var(--fg); border:1px solid var(--pline); }
#tuning select { background:#1b242a; color:var(--fg); border:1px solid var(--pline); }
#tuning button { float:none; }
#stage [data-guide-action-box] { cursor:pointer; }
#stage [data-guide-action-box]:hover { outline:1px solid #75cfe3; }
#tiWarp { display:flex; gap:6px; align-items:center; }
#tiWarp b { color:#f2f1e8; }
#tiWarp button { pointer-events:auto; font:inherit; color:#c1cdd2; background:transparent; border:1px solid #5d7480; border-radius:3px; width:22px; height:22px; line-height:18px; padding:0; cursor:pointer; }
#tiWarp small { color:#f2ba59; font-size:12px; letter-spacing:.04em; }
#tiWarp[hidden] { display:none; }
#top-auto { margin-left:8px; color:#8fd18f; letter-spacing:.1em; }
#top-auto[hidden] { display:none; }
.top-right.view-changed #top-view { color:#f2f1e8; text-shadow:0 0 6px rgba(242,186,89,.9); }
#tiWarp .warp-seg{display:inline-flex;border:1px solid #47606d;border-radius:5px;overflow:hidden}
#tiWarp .warp-seg button{pointer-events:auto;min-width:36px;min-height:36px;width:auto;height:auto;border:0;border-right:1px solid #47606d;border-radius:0;background:#101820;color:#e4e4d9;font:600 14px/1 'Segoe UI',sans-serif;padding:0 8px;cursor:pointer}
#tiWarp .warp-seg button:last-child{border-right:0}
#tiWarp .warp-seg button.on{background:#75cfe3;color:#101820}
#tiWarp .warp-seg button.blocked{color:#a5b7c0;background:#172832;cursor:not-allowed}
#tiWarp .warp-seg button:focus-visible{outline:2px solid #75cfe3;outline-offset:-2px}
.top-right .top-label,#trial-info .top-label{font-size:12px;letter-spacing:.12em;color:#a5b7c0;margin-right:8px}
.top-right #top-view{font-size:14px;color:#e4e4d9}
.top-right #top-auto{margin:0 8px 0 0;font-size:14px}
.top-right #top-note{margin-left:8px;font-size:12px;color:#f2ba59}
.top-right #top-note[hidden]{display:none}
#replayhud { display:flex; flex-wrap:wrap; gap:2px 24px; white-space:nowrap; }
#replayhud[hidden] { display:none; }
#replayhud .rh-seg { display:inline-flex; align-items:center; gap:2px; }
#stage .scene-foot #quick, #stage .scene-foot #quick * { pointer-events:auto; }
#quick { display:flex; align-items:center; gap:16px; font:600 12px/1 'Segoe UI', sans-serif; letter-spacing:.1em; color:#c1cdd2; }
#quick .q-label { color:#a5b7c0; font-size:11px; margin-right:6px; }
#quick .q-seg { display:inline-flex; border:1px solid #47606d; border-radius:4px; overflow:hidden; }
#quick .q-seg button { font:600 12px/1 'Segoe UI', sans-serif; letter-spacing:.08em; color:#e4e4d9; background:#101820; border:0; border-right:1px solid #47606d; padding:0 11px; min-height:32px; cursor:pointer; }
#quick .q-seg button:last-child { border-right:0; }
#quick .q-seg button:hover { background:#1b3a47; }
#quick .q-seg button.on { background:#75cfe3; color:#101820; }
#quick .q-seg button.picked { box-shadow:inset 0 0 0 2px #75cfe3; }
#quick .q-slider { display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
#quick input[type=range] { width:120px; accent-color:#75cfe3; cursor:pointer; margin:0 4px; }
#quick output { min-width:40px; font-variant-numeric:tabular-nums; color:#e4e4d9; }
#quick .q-handle { display:none; }
#quick .q-music { font:600 12px/1 'Segoe UI', sans-serif; letter-spacing:.08em; color:#e4e4d9; background:#101820; border:1px solid #47606d; border-radius:4px; padding:0 11px; min-height:32px; cursor:pointer; }
#quick .q-music.on { background:#75cfe3; color:#101820; border-color:#75cfe3; }
#title { position:fixed; inset:0; z-index:70; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; background:radial-gradient(ellipse at 50% 40%, #1d3442 0%, #0b141b 70%); cursor:pointer; }
#title[hidden] { display:none; }
#title img { width:min(1100px, 86vw); height:auto; }
#title .title-prompt { margin:0; font:600 18px/1 'Segoe UI', sans-serif; letter-spacing:.32em; color:#e4e4d9; animation:titlePulse 1.6s ease-in-out infinite; }
#title .title-note { margin:0; font:14px/1.4 'Segoe UI', sans-serif; color:#f2ba59; letter-spacing:.06em; }
@keyframes titlePulse { 0%, 100% { opacity:1; } 50% { opacity:.35; } }
@media (prefers-reduced-motion: reduce) { #title .title-prompt { animation:none; } }
#stage[data-view=minimal] .scene-foot { background:transparent; justify-content:flex-end; }
#stage[data-view=minimal] #foot-keys, #stage[data-view=minimal] #quick .q-slider, #stage[data-view=minimal] #quick > .q-label { display:none; }
#stage[data-view=minimal] #quick { background:#101820ed; border:1px solid #547380; border-radius:18px; padding:4px 6px 4px 16px; gap:10px; }
#stage[data-view=minimal] #quick .q-handle { display:inline; color:#75cfe3; font-size:12px; }