:root{color-scheme:light;--color-bg: #ffffff;--color-paper: #f6f6f4;--color-ink: #090909;--color-muted: #5d5d5a;--color-line: #d8d8d4;--color-line-strong: #9b9b97;--color-cyan: #1a6f9a;--color-red: #c41e3a;--step-0: #c41e3a;--step-1: #d4652f;--step-2: #c9a227;--step-3: #f4f1ea;--page-x: clamp(18px, 3vw, 48px);--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-bold: 700;--font-sans: "IBM Plex Sans", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", ui-sans-serif, "Helvetica Neue", sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, monospace}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:linear-gradient(90deg,rgba(0,0,0,.055) 1px,transparent 1px) 0 0 / 80px 80px,var(--color-bg);color:var(--color-ink);font-family:var(--font-sans);font-weight:var(--font-weight-regular);text-rendering:geometricPrecision}body::selection{background:var(--color-ink);color:var(--color-bg)}button,input,select{font:inherit;color:inherit}button{cursor:pointer}.boot-rule,.hero-index-rule{display:inline-block;height:1px;width:48px;background:var(--color-line-strong)}#hud{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;min-height:64px;padding:0 var(--page-x);background:#ffffffe0;border-bottom:1px solid var(--color-line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.brand{display:inline-flex;align-items:center;gap:10px;width:fit-content;color:inherit;text-decoration:none;font-size:13px;font-weight:var(--font-weight-bold);white-space:nowrap}.brand__ver{color:var(--color-muted);font-family:var(--font-mono);font-size:11px;font-weight:var(--font-weight-medium);font-variant-numeric:tabular-nums}.brand__mark{display:inline-block;width:10px;height:10px;border-top:1px solid var(--color-ink);border-right:1px solid var(--color-ink);transform:rotate(45deg)}.hud-readout{display:flex;gap:16px;justify-self:center;font-family:var(--font-mono);font-size:11px;font-variant-numeric:tabular-nums;color:var(--color-cyan)}.hud-actions{display:flex;justify-content:flex-end;gap:8px;align-items:center}.hud-actions button,.hud-actions select,.preset-extra button,.rotary,.start-btn,.tap-btn,.clear-btn,.power,.var-sw,.switch{background:transparent;border:1px solid var(--color-line-strong);padding:6px 10px;min-height:36px}#board{padding:24px var(--page-x) 80px;overflow-x:auto}.machine,.rear{min-width:1180px;border:1px solid var(--color-line);background:var(--color-paper);padding:18px 20px 24px;position:relative}.machine:before,.rear:before{content:"";position:absolute;inset:8px;border:1px solid rgba(26,111,154,.18);pointer-events:none}.sheet-head{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.08em;margin-bottom:16px}.sheet-kicker{font-family:var(--font-mono);color:var(--color-cyan)}.sheet-rule{flex:1;height:1px;background:var(--color-cyan);opacity:.45}.sheet-meta{font-family:var(--font-mono);color:var(--color-muted)}.voice-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;padding-bottom:16px;border-bottom:1px solid var(--color-line)}.voice-group{border:1px solid var(--color-line);padding:8px 6px 10px;background:linear-gradient(180deg,transparent 11px,rgba(26,111,154,.08) 11px,rgba(26,111,154,.08) 12px,transparent 12px)}.voice-title{margin:0 0 8px;font-size:10px;font-weight:var(--font-weight-bold);letter-spacing:.12em}.voice-knobs{display:flex;gap:4px;justify-content:center}.knob{display:flex;flex-direction:column;align-items:center;gap:4px}.knob__dial{width:36px;height:36px;border-radius:50%;border:1px solid var(--color-ink);background:radial-gradient(circle at 50% 50%,transparent 61%,var(--color-cyan) 62%,transparent 63%),var(--color-bg);padding:0;position:relative}.knob__pointer{position:absolute;left:50%;top:4px;width:1px;height:12px;background:var(--color-red);transform-origin:50% 14px}.knob__label{font-size:8px;letter-spacing:.08em;color:var(--color-muted)}.voice-sw{margin-top:8px;text-align:center}.transport{display:grid;grid-template-columns:220px 1fr 280px;gap:16px;padding:16px 0}.transport-left,.transport-mid,.transport-right{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.bpm-read{font-family:var(--font-mono);font-size:11px;color:var(--color-cyan)}.power.is-on,.var-sw.is-on,.switch.is-on,.start-btn.is-run{background:var(--color-ink);color:var(--color-bg)}.start-btn,.clear-btn{border-color:var(--color-red);color:var(--color-red)}.start-btn.is-run{background:var(--color-red);color:#fff}.part-led,.var-led{font-family:var(--font-mono);font-size:10px;color:var(--color-cyan);border:1px solid var(--color-cyan);padding:4px 8px;letter-spacing:.08em}.transport-left .knob__label{letter-spacing:.14em}.crosshair{width:9px;height:9px;border-top:1px solid var(--color-cyan);border-left:1px solid var(--color-cyan)}.step-row{display:grid;grid-template-columns:repeat(16,1fr);gap:6px}.step{height:52px;border:1px solid var(--color-ink);font-family:var(--font-mono);font-size:12px}.step--0{background:var(--step-0);color:#fff}.step--1{background:var(--step-1);color:#fff}.step--2{background:var(--step-2);color:#111}.step--3{background:var(--step-3);color:#111}.step.is-hit{outline:2px solid var(--color-ink);outline-offset:-6px}.step.is-play{box-shadow:inset 0 0 0 3px #fff}.step.is-selected{box-shadow:0 0 0 2px var(--color-cyan)}.step.is-intro{animation:pulse .8s steps(2) infinite}@keyframes pulse{50%{filter:brightness(1.25)}}.step-legend{display:flex;justify-content:space-between;margin-top:8px;font-size:10px;letter-spacing:.08em;color:var(--color-muted)}.rear{margin-top:16px}.jacks{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:8px;margin-bottom:16px;align-items:start}.jack{width:52px;height:52px;justify-self:center;border-radius:50%;border:1px solid var(--color-ink);background:radial-gradient(circle,var(--color-bg) 38%,var(--color-ink) 40%,var(--color-ink) 46%,var(--color-bg) 48%);font-size:9px;letter-spacing:.06em;padding:0}.rear-io{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}.jack.is-pulled{background:radial-gradient(circle,var(--color-cyan) 38%,var(--color-ink) 40%,var(--color-ink) 46%,var(--color-bg) 48%);color:var(--color-cyan)}.rear-note{font-size:11px;color:var(--color-muted);max-width:72ch}#gate,#howto{position:fixed;inset:0;z-index:40;display:grid;grid-template-columns:18px 1fr;background:#fff}#howto[hidden],#osc-sheet[hidden],#gate[hidden]{display:none!important}.gate-bar{background:var(--color-red)}.gate-inner,.howto-inner{max-width:720px;padding:72px var(--page-x)}.hero-index{display:flex;align-items:center;gap:12px;color:var(--color-muted);font-size:12px;letter-spacing:.12em}.hero-ver{margin-left:auto;font-family:var(--font-mono)}h1{font-size:clamp(48px,8vw,88px);letter-spacing:-.04em;margin:12px 0 8px;font-weight:var(--font-weight-bold)}.hero-identity{font-family:var(--font-mono);font-size:12px;color:var(--color-cyan)}.gate-copy,.howto-lead{font-size:16px;max-width:46ch;line-height:1.45}.gate-actions,.howto-actions{display:flex;gap:12px;margin-top:24px}.gate-actions button,.howto-actions button{min-height:44px;padding:0 18px;background:var(--color-ink);color:#fff;border:0}#btn-gate-howto,#howto-back{background:transparent;color:var(--color-ink);border:1px solid var(--color-ink)}.hero-coords{display:flex;gap:10px;margin-top:48px;font-family:var(--font-mono);font-size:11px;color:var(--color-muted)}.hero-coords-mark{color:var(--color-red)}.hero-x{color:inherit}.howto-spec{list-style:none;padding:0;display:flex;flex-direction:column;gap:18px}.howto-spec li{display:flex;gap:16px}.howto-num{font-family:var(--font-mono);color:var(--color-cyan)}#settings{position:fixed;top:64px;right:0;width:min(420px,100%);bottom:0;background:#fff;border-left:1px solid var(--color-line);z-index:30;padding:20px;overflow:auto;transform:translate(100%);transition:transform .16s ease}#settings[aria-hidden=false]{transform:none}.settings-head{display:flex;justify-content:space-between;align-items:center}.preset-extra{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.preset-file{display:none}.preset-file-hint,.preset-file-note{font-size:12px;color:var(--color-muted)}.preset-file-note.is-ok{color:var(--color-cyan)}.preset-file-note.is-bad{color:var(--color-red)}#osc-sheet{position:fixed;top:64px;right:24px;z-index:31;background:#fff;border:1px solid var(--color-line);padding:16px;display:grid;gap:8px;width:280px}#osc-sheet .sheet-kicker{font-family:var(--font-mono);font-size:11px;color:var(--color-cyan)}body.is-gated #board{visibility:hidden}@media(max-width:900px){#hud{grid-template-columns:1fr;min-height:auto;padding:10px var(--page-x)}.hud-readout,.hud-actions{justify-self:start}}