:root{color-scheme:dark;--rail-w: 60px;--device-max-w: 1500px;--device-max-h: calc(var(--device-max-w) * 700 / 1940);--touch: 44px;--touch-rail: var(--touch);--keys-h: calc(var(--touch) * 2 + 26px);--drawer-ms: .25s;--panel-min-scale: .4;--stage-full-h: 0px;--line: #2a2a30;--plate: #121215;--bg: #0d0d0f;--muted: #888;--secondary: #00fffd}[hidden]{display:none!important}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#ddd;font:14px/1.5 ui-sans-serif,system-ui,-apple-system,sans-serif;overflow:hidden;overscroll-behavior:none}#app{height:100dvh;display:grid;grid-template-columns:var(--rail-w) 1fr;overflow:hidden}#main{min-width:0;min-height:0;position:relative;display:grid;grid-template-rows:1fr auto auto auto auto}#rail{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.4rem;border-right:1px solid var(--line);background:var(--plate);min-height:0}#rail .spacer{flex:1}#rail .railGap{flex:0 0 auto;height:.5rem}#railBadges{display:flex;flex-direction:column;align-items:center;gap:.25rem;flex:0 0 auto}.railButton{flex:0 1 var(--touch-rail);width:auto;aspect-ratio:1;min-height:28px;display:grid;place-items:center;padding:0;border-radius:8px;border:2px solid #33333a;background:#000;color:#ddd;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.railButton svg{width:22px;height:22px;display:block}.railButton:hover{border-color:#55555f}.railButton:focus-visible{outline:2px solid #ffcf70;outline-offset:2px}.railButton[aria-pressed=true],.railButton[aria-expanded=true]{background:var(--accent, #ffcf70);border-color:var(--accent, #ffcf70);color:var(--accent-fg, #1a1a1a)}#railReset{border-color:#6a3a3a;background:#241a1a;color:#e7b7b7}#railReset:hover{background:#332020;border-color:#8a4a4a}#stage{position:relative;min-height:max(0px,calc(var(--stage-full-h) * var(--panel-min-scale)))}#panel{position:absolute;inset:0;margin:auto;width:calc(100% - 1rem);height:calc(100% - 1rem);max-width:var(--device-max-w);max-height:var(--device-max-h);display:block;opacity:0;transition:opacity .25s ease;touch-action:none;user-select:none;-webkit-user-select:none}#panel.live{opacity:1}#stage:has(#audioNotice:not([hidden])):after{content:"";position:absolute;inset:0;background:#0d0d0fa6;border-radius:6px;pointer-events:none}#audioNotice{position:absolute;inset:0;margin:auto;width:min(80vw,34rem);height:fit-content;display:grid;gap:.6rem;text-align:center;font:inherit;letter-spacing:.02em;cursor:pointer;z-index:2;padding:1.4rem 2rem;border-radius:8px;background:#ffcf70;color:#1a1a1a;border:3px solid #ffcf70;box-shadow:0 8px 30px #00000080}.audioNoticeTitle{font-size:clamp(1.05rem,2.4vw,1.75rem);font-weight:700;line-height:1.3}.audioNoticeCta{font-size:clamp(.85rem,1.4vw,1rem);font-weight:600;opacity:.75}#audioNotice:hover{background:#ffd98f;border-color:#ffd98f}#fullscreen{position:absolute;top:.5rem;right:.5rem;z-index:2;width:var(--touch-rail);height:var(--touch-rail);display:grid;place-items:center;padding:0;border-radius:8px;border:1px solid #3a3a42;background:#0a0a0cb8;color:#9a9aa4;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}#fullscreen:hover{color:#ddd;border-color:#55555f}#fullscreen:focus-visible{outline:2px solid #ffcf70;outline-offset:2px}#fullscreen svg{width:20px;height:20px;display:block}#fullscreen .exitFullscreen,#fullscreen[aria-pressed=true] .enterFullscreen{display:none}#fullscreen[aria-pressed=true] .exitFullscreen{display:block}#modifierHome{display:flex;justify-content:flex-end;padding:.3rem .75rem;max-width:var(--device-max-w);margin-inline:auto;width:100%}#modifierHome:not(:has(#modifierKeys)){display:none}#modifierKeys{display:flex;gap:.35rem}.keycap{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:var(--touch);min-width:3.4rem;padding:.2rem .7rem;font:inherit;font-size:12px;font-weight:600;letter-spacing:.02em;color:#ccc;background:#1c1c22;border:1px solid #4a4a55;border-bottom-width:3px;border-radius:5px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.keycapIcon{width:14px;height:14px;flex:0 0 auto}.keycapSub{font-size:10px;letter-spacing:.08em;opacity:.7;font-weight:600}.keycap[data-modifier=shift],.keycapMini.isSecondary{color:var(--secondary)}.keycap:hover{border-color:#6a6a78;color:#fff}.keycap:focus-visible{outline:2px solid #ffcf70;outline-offset:2px}.keycap[aria-pressed=true]{background:#ffcf70;border-color:#ffcf70;color:#1a1a1a;border-bottom-width:1px;transform:translateY(2px)}.keycapMini{min-height:0;min-width:0;gap:0;padding:.05rem .3rem;font-size:10px;border-bottom-width:2px;cursor:default}#demoBadge{font-size:9px;letter-spacing:.04em;font-weight:700;padding:.15rem .25rem;border-radius:3px;background:#ffcf70;color:#1a1a1a}#version{color:#ddd}#rotateHint{position:absolute;left:50%;top:calc(1rem + var(--touch-rail));transform:translate(-50%);z-index:3;display:flex;align-items:center;gap:.5rem;max-width:calc(100% - 1rem);padding:.5rem .75rem;border-radius:6px;border:1px solid var(--line);background:#1a1a20;color:#ddd;font-size:12px;text-align:left}#rotateHint button{flex:0 0 auto;font:inherit;line-height:1;min-width:1.75rem;min-height:1.75rem;border-radius:4px;border:1px solid #3a3a42;background:#16161a;color:#ddd;cursor:pointer}.accent-magenta{--accent: #ff00ff;--accent-fg: #000;--accent-inverse: #00ff00}.accent-orange{--accent: #ff8e00;--accent-fg: #000;--accent-inverse: #00ffff}.accent-green{--accent: #00ff00;--accent-fg: #000;--accent-inverse: #ff00ff}.accent-cyan{--accent: #00ffff;--accent-fg: #000;--accent-inverse: #ff8e00}.button{display:inline-flex;align-items:center;justify-content:center;font:inherit;font-weight:600;cursor:pointer;border-radius:10px;padding:.35rem 1rem;min-height:var(--touch);background-color:#000;color:#fff;border:3px solid var(--accent, #33333a);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.button:hover{opacity:.8}.button[aria-pressed=true]{background-color:var(--accent);color:var(--accent-fg)}.subButton{display:inline-flex;align-items:center;justify-content:center;font:inherit;font-size:13px;font-weight:500;cursor:pointer;border-radius:8px;padding:.3rem .75rem;min-height:var(--touch);background-color:#000;color:#fff;border:2px solid var(--accent, #33333a);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.subButton:hover{color:var(--accent);border-color:var(--accent)}.subButton[aria-pressed=true]{background-color:var(--accent-inverse);color:var(--accent-fg);border-color:var(--accent-fg)}.popover{position:fixed;z-index:20;display:grid;gap:.5rem;padding:.7rem;max-width:min(22rem,calc(100vw - 5rem));border:1px solid var(--line);border-radius:8px;background:var(--plate);box-shadow:0 8px 30px #0009}.popoverLabel{color:var(--muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase}.popover .row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.popover .hint{color:var(--muted);font-size:12px}.popover select{font:inherit;padding:.35rem .5rem;border-radius:4px;min-height:var(--touch);border:1px solid #3a3a42;background:#16161a;color:#ddd;cursor:pointer}#midiPopover a{color:#ffcf70;font-size:12px}#soundPresets{display:flex;gap:.5rem;flex-wrap:wrap}#helpPopover{width:min(80vw,46rem);max-width:80vw;max-height:calc(100vh - 2rem);grid-template-rows:auto 1fr}#helpScroll{display:grid;align-content:start;gap:.5rem;overflow-y:auto;min-height:0;overscroll-behavior:contain}#helpBody{margin:0}#helpHints{display:grid;gap:.3rem;padding:0 0 .6rem;border-bottom:1px solid var(--line);color:var(--muted);font-size:12px}#helpBody dt{color:#ddd;font-weight:600;font-size:13px;margin-top:.7rem}#helpBody dt:first-child{margin-top:0}#helpBody dd{margin:.15rem 0 0;color:var(--muted);font-size:12px;line-height:1.5}#helpBody b{color:#ffcf70;font-weight:600}#helpPopover p{margin:0}#helpPopover a{color:#ffcf70;font-size:12px;display:inline-flex;align-items:center;min-height:var(--touch)}#footer{display:flex;align-items:center;gap:.3rem .75rem;padding:.3rem .75rem;border-top:1px solid var(--line)}#footerHints{display:flex;flex-wrap:wrap;gap:.2rem .9rem;max-width:var(--device-max-w);margin-inline:auto;min-width:0;color:var(--muted);font-size:12px}.hints .entry{display:inline-flex;align-items:center;gap:.35rem}.hints svg{width:15px;height:15px;flex:0 0 auto;opacity:.85}#drawer{overflow:hidden;height:0;border-top:1px solid var(--line);background:var(--plate);transform:translateY(100%);transition:transform var(--drawer-ms) ease;will-change:transform}#app.drawer-open #drawer{transform:translateY(0)}#app.drawer-overlaps #drawer{position:absolute;left:0;right:0;bottom:0;z-index:10;box-shadow:0 -8px 30px #00000080}#notes{display:grid;gap:.6rem;padding:.6rem .75rem .75rem;max-width:var(--device-max-w);margin-inline:auto}#notes section{display:grid;gap:.6rem}#notes .row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}#notes .spacer{flex:1}#notes .hint{color:var(--muted);font-size:12px}#notes label{color:#aaa;font-size:12px}.keyRow{display:flex;gap:.5rem;align-items:stretch;height:var(--keys-h);min-width:0}.keys{flex:1 1 0;min-width:0;max-width:100%;height:var(--keys-h);display:block;border-radius:4px;background:#16161a;touch-action:none;user-select:none;-webkit-user-select:none}.octave{flex:0 0 auto;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;gap:.25rem}.octave .octLabel{text-align:center;font-size:12px}.chevron{display:inline-grid;place-items:center;padding:0!important;width:var(--touch);min-width:var(--touch);min-height:var(--touch)}.chevron svg{width:18px;height:18px;display:block}#notes button:not(.button):not(.subButton):not(.keycap),#notes select{font:inherit;padding:.35rem .8rem;border-radius:4px;min-height:var(--touch);border:1px solid #3a3a42;background:#16161a;color:#ddd;cursor:pointer}#inputMethods,#chordTypes,#degrees{gap:.35rem}#inputMethods .button,#degrees .subButton{flex:1;min-width:3.5rem}#chordTypes .subButton{flex:0 0 auto;min-width:3.5rem;white-space:nowrap}#chordTypes{flex:1 1 auto;min-width:0}#notes .row:has(>#chordTypes){flex-wrap:nowrap}.moreButton{flex:0 0 auto;min-width:var(--touch);padding:.3rem;font-size:15px;line-height:1}.modifierSlot{flex:0 0 auto;margin-left:auto}.modifierSlot:empty{display:none}#degrees .subButton{letter-spacing:.04em}#degrees .subButton:active{background-color:var(--accent);color:var(--accent-fg)}#currentDegree{color:#aaa;font-size:12px;min-width:8rem}#midiStatus{color:var(--muted);font-size:12px}#notes a{color:#ffcf70;font-size:12px}.octLabel{color:#aaa;min-width:2.5rem;text-align:center}#status{display:none}#status.problem,body.has-debug #status{display:block;padding:0 .75rem .25rem;color:var(--muted);font-size:11px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#status.problem{color:#ff7a7a;white-space:normal}#engineState{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:#555}#engineState[data-state=starting]{background:#666}#engineState[data-state=silent]{background:#ffcf70}#engineState[data-state=running]{background:#3ecf6a}#engineState[data-state=error]{background:#ff5a5a}@media (max-width: 700px){:root{--rail-w: 52px}#notes{gap:.45rem;padding:.5rem}.popoverLabel,#helpHints{font-size:13px}#helpBody dt{font-size:15px}#helpBody dd{font-size:14px;line-height:1.55}.popover .hint{font-size:13px}#helpPopover a{font-size:14px}}@media (min-width: 701px) and (min-height: 501px){#modifierKeys .keycap{min-width:4.4rem;min-height:var(--touch);padding:.35rem 1rem;font-size:14px}#modifierKeys .keycapIcon{width:16px;height:16px}}@media (max-width: 500px),(max-height: 500px){#modifierKeys .keycapSub{display:none}#modifierKeys .keycap{gap:.3rem;min-width:0;padding:.2rem .55rem}}@media (max-width: 700px),(max-height: 500px){#footer{display:none}}@media (max-width: 700px),(max-height: 500px){#chordTypes,#degrees{gap:.3rem}#chordTypes .subButton,#degrees .subButton{min-width:0;padding:.3rem .45rem;font-size:12px}label[for=degKey],label[for=degScale]{display:none}#degKey,#degScale{flex:0 1 auto;min-width:0;padding:.35rem}}@media (max-height: 500px){:root{--touch-rail: 36px;--touch: 38px}#rail{gap:.2rem;padding:.3rem}#rail .railGap{height:.3rem}.railButton svg{width:19px;height:19px}#notes{gap:.4rem;padding:.4rem .5rem}}@media (prefers-reduced-motion: reduce){#drawer,#panel{transition:none}.keycap[aria-pressed=true]{transform:none}}