: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;--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;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;overflow:hidden}body::selection{background:var(--color-ink);color:var(--color-bg)}button,input,select{font:inherit;color:inherit}button{cursor:pointer}#stage{position:fixed;inset:0}#camera{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:0;opacity:1;transform:translateZ(0)}#camera-hot{position:fixed;top:0;left:0;width:3px;height:3px;object-fit:cover;pointer-events:none;z-index:21;opacity:.08}#field{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}#btn-audio-unlock{position:absolute;inset:0;z-index:11;margin:0;border:0;background:#ffffffd1;color:var(--color-ink);font-family:inherit;font-size:14px;font-weight:var(--font-weight-medium);letter-spacing:.06em;cursor:pointer}#btn-audio-unlock[hidden]{display:none}#hud{position:fixed;top:0;left:0;right:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;min-height:72px;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);line-height:1;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;flex-direction:column;align-items:center;gap:4px;justify-self:center;font-family:var(--font-mono);font-size:11px;font-variant-numeric:tabular-nums}.hud-pitch,.hud-level{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;white-space:nowrap;gap:8px}#readout-hz{color:var(--color-cyan)}#readout-note{display:inline-flex;align-items:baseline;gap:.35em;color:var(--color-ink);font-weight:var(--font-weight-medium)}#readout-note-alt:not(:empty):before{content:"/ ";color:var(--color-muted);font-weight:var(--font-weight-regular)}#readout-note-alt{color:var(--color-muted);font-weight:var(--font-weight-regular)}#readout-note-cents{color:var(--color-muted);min-width:3.2em}.hud-readout.is-in-tune #readout-note,.hud-readout.is-in-tune #readout-note-cents{color:var(--color-cyan)}.hud-readout.is-off #readout-note,.hud-readout.is-off #readout-note-cents{color:var(--color-red)}.hud-readout.is-in-tune #readout-note-alt,.hud-readout.is-in-tune #readout-note-alt:not(:empty):before{color:var(--color-cyan)}#readout-tuner{--cents: 0;position:relative;width:48px;height:10px;flex:none;color:var(--color-ink);border-bottom:1px solid var(--color-line-strong);background:linear-gradient(currentColor,currentColor) 50% 100% / 1px 8px no-repeat}#readout-tuner:before,#readout-tuner:after{content:"";position:absolute;bottom:0;width:1px;height:4px;background:var(--color-line-strong)}#readout-tuner:before{left:0}#readout-tuner:after{right:0}#readout-tuner-needle{position:absolute;left:50%;bottom:0;width:1px;height:10px;background:var(--color-red);transform:translate(calc(-50% + (var(--cents) / 50) * 24px))}.hud-readout.is-in-tune #readout-tuner-needle{background:var(--color-cyan)}#readout-amp{color:var(--color-muted)}#readout-finger{color:var(--color-muted);font-family:var(--font-sans);font-size:11px;font-weight:var(--font-weight-medium)}.hud-actions{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:18px 22px}#locale{appearance:none;background:transparent;border:0;border-radius:0;padding:9px 0;margin:0;min-width:7.2em;color:var(--color-muted);font-size:12px;font-weight:var(--font-weight-medium);line-height:1;cursor:pointer}#locale:hover,#locale:focus{color:var(--color-ink);outline:none}.mosaic-size{display:flex;align-items:center;gap:8px;color:var(--color-muted);font-size:12px;font-weight:var(--font-weight-medium);line-height:1}.mosaic-size[hidden]{display:none}.mosaic-size input[type=range]{width:88px;margin:0;accent-color:var(--color-ink);cursor:pointer}#hud button,#osc-sheet button,#settings button{background:none;border:0;padding:9px 0;color:var(--color-muted);font-size:12px;font-weight:var(--font-weight-medium);line-height:1}#hud button{position:relative}#hud button:after,.brand:hover .brand__mark{content:""}#hud button:after{position:absolute;right:0;bottom:1px;left:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .18s ease}#hud button:hover,#hud button[aria-pressed=true],#hud button.is-on{color:var(--color-ink)}#hud button:hover:after,#hud button[aria-pressed=true]:after,#hud button.is-on:after{transform:scaleX(1)}#hud button:disabled{opacity:.35;cursor:default}#hud button:disabled:after{transform:none;background:transparent}#osc-sheet{position:fixed;top:84px;right:var(--page-x);z-index:21;display:grid;gap:12px;min-width:280px;padding:16px 18px 18px;background:var(--color-paper);border:1px solid var(--color-ink)}#osc-sheet[hidden]{display:none}.sheet-kicker,.section-title{margin:0;color:var(--color-muted);font-size:11px;font-weight:var(--font-weight-bold);letter-spacing:0}#osc-sheet:before{position:absolute;top:0;left:0;width:6px;height:100%;background:var(--color-red);content:""}#osc-sheet{position:fixed}#osc-sheet label{display:grid;gap:4px;color:var(--color-muted);font-size:11px;font-weight:var(--font-weight-medium)}#osc-sheet input,select,.field-row input[type=number]{background:var(--color-bg);border:0;border-bottom:1px solid var(--color-line-strong);border-radius:0;padding:7px 0;outline:none}#osc-connect,#settings-close,#settings [data-act=role-add],#settings [data-act=role-remove],#settings [data-act=preset-save],#settings [data-act=preset-download],#settings [data-act=preset-import],#settings [data-act=preset-delete]{width:fit-content;border-bottom:1px solid currentColor;color:var(--color-ink)}#osc-status{margin:0;color:var(--color-muted);font-size:12px;line-height:1.55}#osc-status code{font-family:var(--font-mono);font-size:11px}#settings{position:fixed;top:0;right:0;bottom:0;z-index:22;width:min(420px,100vw);background:var(--color-paper);border-left:1px solid var(--color-ink);transform:translate(104%);transition:transform .22s ease;overflow:auto;pointer-events:none}#settings.is-open{transform:none;pointer-events:auto}#settings:before{position:sticky;top:0;display:block;width:6px;height:0;background:var(--color-red);content:""}.settings-head{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:24px 22px 12px;background:var(--color-paper);border-bottom:1px solid var(--color-line)}.settings-head h2{margin:0;font-size:15px;font-weight:var(--font-weight-bold)}#settings-body{padding:18px 22px 48px;display:grid;gap:28px}.field-row{display:grid;gap:6px}.axis-pair{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}.invert-toggle{white-space:nowrap;font-size:12px}.preset-extra{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:12px}.preset-extra input[type=text]{flex:1 1 140px;min-width:0;background:transparent;border:0;border-bottom:1px solid var(--color-line-strong);border-radius:0;padding:7px 0}.preset-file{display:none}.preset-file-hint,.preset-file-note{margin:8px 0 0;color:var(--color-muted);font-size:11px;line-height:1.5}.preset-file-note.is-ok{color:var(--color-ink)}.preset-file-note.is-bad{color:var(--color-red)}.field-row label,.role-row span.label{color:var(--color-muted);font-size:11px;font-weight:var(--font-weight-medium)}.field-row input[type=range]{width:100%;accent-color:var(--color-ink)}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}select{background:transparent;border:0;border-bottom:1px solid var(--color-line-strong);border-radius:0;padding:7px 0}.hand-map svg{width:100%;height:auto;overflow:visible}.finger-dot{cursor:pointer}.finger-dot circle{fill:var(--color-bg);stroke:var(--color-ink);stroke-width:1}.finger-dot.is-voice circle{fill:var(--color-ink)}.finger-dot.is-role circle{fill:var(--color-bg);stroke:var(--color-cyan);stroke-dasharray:3 2}.finger-dot.is-selected circle{stroke:var(--color-red);stroke-width:2}.toggle{display:flex;align-items:center;gap:10px;font-size:13px}.roles{display:grid;gap:12px}.role-row{display:grid;gap:8px;padding:12px 0 12px 12px;border-left:6px solid var(--color-red);border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line)}.role-row .role-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}#gate{position:fixed;inset:0;z-index:12;display:grid;grid-template-columns:18px 1fr;background:linear-gradient(90deg,rgba(0,0,0,.055) 1px,transparent 1px) 0 0 / 80px 80px,var(--color-bg)}.gate-bar{background:var(--color-red)}.gate-inner{display:flex;flex-direction:column;justify-content:center;max-width:640px;padding:clamp(88px,10vw,120px) var(--page-x) clamp(34px,6vw,78px)}.hero-index{display:flex;align-items:center;gap:12px;margin:0 0 18px;color:var(--color-muted);font-size:12px;font-weight:var(--font-weight-bold);font-variant-numeric:tabular-nums}.hero-ver{margin-left:auto;font-family:var(--font-mono);font-weight:var(--font-weight-medium)}.hero-index-rule{flex:0 0 22px;align-self:center;height:1px;background:var(--color-line-strong)}.gate-inner h1{margin:0;font-size:clamp(58px,10vw,118px);font-weight:var(--font-weight-bold);line-height:.92;letter-spacing:0}.hero-identity{margin:22px 0 0;font-size:clamp(18px,2.2vw,28px);font-weight:var(--font-weight-medium);line-height:1.1}.gate-copy{max-width:460px;margin:28px 0 0;color:var(--color-muted);font-size:15px;line-height:1.78}.gate-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:42px}#gate #btn-start{width:fit-content;padding:12px 22px;border:0;background:var(--color-ink);color:var(--color-bg);font-size:12px;font-weight:var(--font-weight-medium)}#gate #btn-gate-howto{padding:12px 0;border:0;background:none;color:var(--color-ink);font-size:12px;font-weight:var(--font-weight-medium);border-bottom:1px solid currentColor}.hero-coords{display:flex;align-items:flex-start;gap:10px;margin-top:clamp(48px,6vw,92px);color:var(--color-muted);font-size:11px;font-weight:var(--font-weight-medium);font-variant-numeric:tabular-nums;line-height:1.55;opacity:.72}.hero-coords-mark{margin-top:1px;font-size:13px}.hero-x{color:inherit;font-family:var(--font-mono);font-weight:var(--font-weight-medium);text-decoration:none;border-bottom:1px solid color-mix(in srgb,currentColor 40%,transparent)}.hero-x:hover,.hero-x:focus-visible{color:var(--color-ink);border-bottom-color:currentColor}#gate.is-gone{display:none}#boot{position:fixed;inset:0;z-index:80;display:grid;grid-template-columns:18px 1fr;background:linear-gradient(90deg,rgba(0,0,0,.055) 1px,transparent 1px) 0 0 / 80px 80px,var(--color-bg)}html.is-ready #boot{display:none!important}.boot-inner{display:flex;flex-direction:column;justify-content:center;max-width:640px;padding:clamp(88px,10vw,120px) var(--page-x)}.boot-rule{flex:0 0 48px;height:1px;background:var(--color-ink);transform-origin:0 50%;animation:boot-scan 1.15s ease-in-out infinite}@keyframes boot-scan{0%,to{transform:scaleX(.2);opacity:.3}50%{transform:scaleX(1);opacity:1}}@media(prefers-reduced-motion:reduce){.howto-tabs [role=tab]:after{transform:none;opacity:0;transition:none}.howto-tabs [role=tab][aria-selected=true]:after,.howto-tabs [role=tab]:hover:after{opacity:1}.boot-rule{animation:none;opacity:1;transform:none}}#howto{position:fixed;inset:0;z-index:13;display:grid;grid-template-columns:18px 1fr;overflow:auto;background:linear-gradient(90deg,rgba(0,0,0,.055) 1px,transparent 1px) 0 0 / 80px 80px,var(--color-bg)}#howto[hidden]{display:none}.howto-inner{display:flex;flex-direction:column;justify-content:flex-start;max-width:920px;min-height:100%;padding:clamp(88px,10vw,120px) var(--page-x) clamp(34px,6vw,78px)}.howto-inner h1{margin:0;font-size:clamp(36px,6vw,64px);font-weight:var(--font-weight-bold);line-height:.96}.howto-lead{max-width:420px;margin:18px 0 0;color:var(--color-muted);font-size:16px;line-height:1.6}.howto-tabs{display:flex;flex-wrap:wrap;gap:0 28px;margin:28px 0 0;padding:0;border-bottom:1px solid var(--color-ink)}.howto-tabs [role=tab]{position:relative;margin:0 0 -1px;padding:10px 0 12px;border:0;background:none;color:var(--color-muted);font-size:12px;font-weight:var(--font-weight-medium);line-height:1}.howto-tabs [role=tab]:after{content:"";position:absolute;right:0;bottom:0;left:0;height:2px;background:var(--color-ink);transform:scaleX(0);transform-origin:left;transition:transform .18s ease}.howto-tabs [role=tab][aria-selected=true]{color:var(--color-ink)}.howto-tabs [role=tab][aria-selected=true]:after,.howto-tabs [role=tab]:hover:after{transform:scaleX(1)}.howto-tabs [role=tab]:hover{color:var(--color-ink)}.howto-tabs [role=tab]:focus-visible{outline:1px solid var(--color-ink);outline-offset:4px}.howto-panel[hidden]{display:none}.howto-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px);gap:36px 48px;align-items:start;margin-top:28px}.howto-panel .howto-spec{border-top:0}.howto-panel>.howto-spec{margin-top:28px}.howto-spec{margin:0;padding:0;list-style:none;border-top:1px solid var(--color-ink)}.howto-spec>li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;margin:0;padding:16px 0;border-bottom:1px solid var(--color-line)}.howto-num{color:var(--color-muted);font-family:var(--font-mono);font-size:11px;font-weight:var(--font-weight-medium);font-variant-numeric:tabular-nums;line-height:1.4}.howto-kicker{margin:0 0 6px;font-size:12px;font-weight:var(--font-weight-bold)}.howto-spec p:last-child{margin:0;color:var(--color-muted);font-size:14px;line-height:1.65}.howto-notes{display:grid;gap:0;margin-top:14px;border-top:1px solid var(--color-line)}.howto-notes p{display:grid;gap:4px;margin:0;padding:12px 0;border-bottom:1px solid var(--color-line)}.howto-notes p:last-child{border-bottom:0;padding-bottom:0}.howto-notes strong{color:var(--color-ink);font-size:12px;font-weight:var(--font-weight-bold)}.howto-notes span{color:var(--color-muted);font-size:14px;font-weight:var(--font-weight-regular);line-height:1.65}.howto-ex{margin-top:14px}.howto-ex ol{margin:8px 0 0;padding:0 0 0 1.15em}.howto-ex li{padding:5px 0;color:var(--color-muted);font-size:14px;line-height:1.65}.howto-fig{margin:0;padding:16px 16px 14px;background:var(--color-paper);border:1px solid var(--color-ink);position:sticky;top:88px}.howto-fig svg{display:block;width:100%;height:auto}.howto-fig figcaption{display:grid;gap:8px;margin-top:14px}.howto-legend{display:flex;align-items:center;gap:8px;margin:0;font-size:12px;font-weight:var(--font-weight-medium)}.howto-swatch{flex:0 0 12px;width:12px;height:12px;border:1px solid var(--color-ink);border-radius:50%;background:var(--color-bg)}.howto-swatch.is-pitch{background:var(--color-ink)}.howto-swatch.is-amp{border-color:var(--color-cyan);border-style:dashed}.howto-fig-hint{margin:4px 0 0;color:var(--color-muted);font-size:12px;line-height:1.5}.howto-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:42px}#howto-back{padding:12px 0;border:0;background:none;color:var(--color-ink);font-size:12px;font-weight:var(--font-weight-medium);border-bottom:1px solid currentColor}#howto-go{width:fit-content;padding:12px 22px;border:0;background:var(--color-ink);color:var(--color-bg);font-size:12px;font-weight:var(--font-weight-medium)}#howto-go[hidden]{display:none}#howto-error,#gate-error{margin:16px 0 0;color:var(--color-red);font-size:13px}@media(max-width:720px){#hud{grid-template-columns:1fr;min-height:0;padding:14px var(--page-x)}.hud-actions,.hud-readout{justify-self:start}.howto-layout{grid-template-columns:1fr}.howto-fig{order:-1}}