:root{--bg: #0b0c0e;--panel: #141619;--panel-2: #1a1d21;--line: #262a30;--line-2: #33383f;--text: #d9dce0;--text-dim: #8a9099;--text-faint: #5b616a;--accent: #e8a33d;--accent-dim: rgba(232, 163, 61, .16);--radius: 8px;--mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;--sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, system-ui, sans-serif;--top-h: 46px;color-scheme:dark}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;width:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;touch-action:none}body{position:fixed;inset:0}button,select,input{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation}svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.scroll-y{overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain}.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x;scrollbar-width:none}.scroll-x::-webkit-scrollbar{display:none}.app{position:fixed;inset:0;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.topbar{flex:none;height:var(--top-h);display:flex;align-items:center;gap:6px;padding:0 0 0 8px;border-bottom:1px solid var(--line);background:linear-gradient(#131518,#0f1113)}.topbar-scroll{flex:1;min-width:0;height:100%;display:flex;align-items:center;gap:6px;padding-right:8px}.topbar-actions{flex:none;display:flex;gap:6px;padding:0 8px;height:100%;align-items:center;border-left:1px solid var(--line);background:#111316}.brand{display:flex;align-items:center;gap:8px;padding-right:6px;flex:none}.brand-mark{width:16px;height:16px;border-radius:3px;background:linear-gradient(90deg,transparent 0 20%,var(--accent) 20% 30%,transparent 30% 45%,rgba(255,255,255,.55) 45% 52%,transparent 52% 68%,rgba(255,255,255,.3) 68% 73%,transparent 73%);border:1px solid var(--line-2)}.brand-mark.big{width:44px;height:44px;border-radius:8px}.brand-text{font-weight:700;font-size:12px;letter-spacing:.22em;color:var(--text)}.chip{flex:none;height:34px;display:flex;flex-direction:column;justify-content:center;gap:1px;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel);text-align:left;position:relative}.chip small{font-size:8.5px;letter-spacing:.14em;color:var(--text-faint);font-weight:600}.chip span{font-size:12px;font-weight:600;white-space:nowrap}.chip.inst{min-width:120px;max-width:190px}.chip.inst span{overflow:hidden;text-overflow:ellipsis}.chip.sel{padding-right:20px}.chip.sel:after{content:"";position:absolute;right:8px;top:50%;width:5px;height:5px;border-right:1.5px solid var(--text-dim);border-bottom:1.5px solid var(--text-dim);transform:translateY(-70%) rotate(45deg);pointer-events:none}.chip.sel select{appearance:none;-webkit-appearance:none;background:transparent;border:0;outline:0;font-size:12px;font-weight:600;padding:0;margin:0;max-width:128px;cursor:pointer}.chip.sel select option,.chip.sel select optgroup{background:#1a1d21;color:var(--text)}.chip.sel.narrow select{max-width:44px}.chip.range{flex-direction:row;align-items:center;padding:0 2px;gap:2px}.chip.range .range-mid{display:flex;flex-direction:column;align-items:center;min-width:64px}.chip.range .arrow{width:26px;height:30px;border:0;background:transparent;font-size:20px;line-height:1;color:var(--text-dim);border-radius:4px}.chip.range .arrow:active{background:var(--panel-2);color:var(--text)}.oct-sel{appearance:none;-webkit-appearance:none;background:var(--panel-2);border:1px solid var(--line);border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.06em;padding:4px 6px;margin-right:3px}.toggle-chip.on{border-color:#e8a33d8c;background:var(--accent-dim)}.toggle-chip.on span{color:var(--accent)}.spacer{flex:1 0 4px}.icon-btn{flex:none;width:36px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--text-dim)}.icon-btn:active{color:var(--text);background:var(--panel-2)}.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--panel);flex:none}.seg button{border:0;background:transparent;padding:0 12px;height:32px;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--text-dim);border-right:1px solid var(--line)}.seg button:last-child{border-right:0}.seg button.on{background:var(--accent-dim);color:var(--accent)}.seg-sm button{padding:0 9px;height:32px;font-size:10.5px}.topbar .seg{height:34px}.stage{flex:1;min-height:0;display:flex;gap:6px;padding:6px}.stage.ctl-left{flex-direction:row-reverse}.play-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.display-area{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}.ribbon-wrap{flex:none;position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-2)}.ribbon{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.overlay-display{position:absolute;top:8px;left:12px;pointer-events:none;opacity:.9}.controls-col{flex:none;width:clamp(138px,16vw,210px);display:flex;gap:6px}.note-display{display:flex;align-items:center;gap:clamp(10px,3vw,36px);padding:0 16px;transition:opacity .25s}.note-display.idle{opacity:.45}.nd-main{display:flex;align-items:flex-start;font-family:var(--mono);line-height:.9}.nd-note{font-size:clamp(26px,11vh,84px);font-weight:600;letter-spacing:-.02em;color:#f0f2f5}.nd-oct{font-size:clamp(12px,4vh,28px);font-weight:500;color:var(--text-dim);margin-left:3px;margin-top:.15em}.nd-info{display:grid;grid-template-columns:auto auto;gap:2px 14px;align-items:center;font-family:var(--mono);font-size:clamp(10px,2.6vh,14px);color:var(--text-dim)}.nd-alt{grid-column:1 / 3;color:var(--accent);font-size:.85em;min-height:1em;font-family:var(--sans);letter-spacing:.04em}.nd-alt:empty{display:none}.nd-hz{color:var(--text)}.nd-meter{grid-column:1 / 3;position:relative;width:clamp(110px,18vw,200px);height:10px;margin-top:4px}.nd-meter-scale{position:absolute;inset:4px 0;border-top:1px solid var(--line-2)}.nd-meter-scale:before,.nd-meter-scale:after{content:"";position:absolute;top:-4px;width:1px;height:8px;background:var(--line-2);left:0}.nd-meter-scale:after{left:auto;right:0}.nd-needle-track{position:absolute;inset:0}.nd-needle-track:before{content:"";position:absolute;left:50%;top:0;width:1px;height:10px;background:var(--text-faint)}.nd-needle{position:absolute;left:50%;top:0;width:3px;height:10px;margin-left:-1px;background:var(--text-dim);border-radius:1px}.nd-needle.intune{background:var(--accent)}.note-display.compact .nd-note{font-size:clamp(22px,7vh,44px)}.note-display.compact{padding:0}.strip{flex:1;min-width:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);overflow:hidden}.strip-head,.strip-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:2px;padding:0 6px;height:28px;font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--text-faint);white-space:nowrap}.strip-head{flex-direction:column;height:auto;padding:5px 6px 4px;gap:4px}.strip-head .mini{width:100%}.strip-foot{justify-content:center;gap:4px}.strip-head em{font-style:normal;color:var(--text-dim);letter-spacing:0}.strip-foot{font-family:var(--mono);letter-spacing:0;font-size:11px;color:var(--text-dim)}.strip-foot .dim{color:var(--text-faint)}.mini{border:1px solid var(--line);background:var(--panel-2);border-radius:4px;font-size:8.5px;font-weight:700;letter-spacing:.08em;padding:3px 5px;color:var(--text-dim)}.mini.on{color:var(--accent);border-color:#e8a33d8c;background:var(--accent-dim)}.strip-area{flex:1;position:relative;margin:0 6px;border-radius:6px;touch-action:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 12px),#0f1113;border:1px solid var(--line)}.strip.horiz .strip-area{background:repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 12px),#0f1113}.strip-center{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line-2)}.strip.horiz .strip-center{inset:0 auto 0 50%;width:1px;height:auto}.bend-thumb-track{position:absolute;inset:0;pointer-events:none}.bend-thumb{position:absolute;left:50%;top:50%;width:78%;height:30px;transform:translate(-50%,-50%);border-radius:5px;background:linear-gradient(#3a3f46,#2a2e34);border:1px solid #4a5058;box-shadow:0 2px 6px #0006}.strip.horiz .bend-thumb{width:26px;height:78%}.bend-thumb:after{content:"";position:absolute;left:20%;right:20%;top:50%;height:2px;margin-top:-1px;background:var(--text-faint);border-radius:1px}.strip.horiz .bend-thumb:after{inset:20% auto 20% 50%;width:2px;height:auto;margin:0 0 0 -1px}.bend-thumb.active:after{background:var(--accent)}.mod-fill{position:absolute;inset:0;transform-origin:bottom;transform:scaleY(0);background:linear-gradient(to top,#e8a33d59,#e8a33d1f);border-top:2px solid var(--accent);pointer-events:none}.modal,.sheet-backdrop{position:fixed;inset:0;z-index:20;background:#0405069e;display:flex}.modal{align-items:center;justify-content:center;padding:max(10px,env(safe-area-inset-top)) 10px 10px}.modal-card{width:min(920px,100%);max-height:100%;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line-2);border-radius:12px;overflow:hidden;box-shadow:0 20px 60px #00000080}.modal-card.presets{width:min(460px,100%)}.modal-head,.sheet-head{flex:none;display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}.modal-head h2,.sheet-head h2{margin:0;font-size:13px;letter-spacing:.14em;font-weight:700;flex:none}.count{color:var(--text-faint);font-weight:500;margin-left:4px}.search{flex:1;min-width:0;height:34px;border-radius:6px;border:1px solid var(--line-2);background:#0f1113;padding:0 12px;font-size:14px;outline:none;-webkit-user-select:text;user-select:text}.search:focus{border-color:#e8a33d99}.tabs{flex:none;display:flex;gap:4px;padding:8px 12px;border-bottom:1px solid var(--line)}.tabs button{flex:none;border:1px solid var(--line);background:transparent;border-radius:5px;padding:6px 10px;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--text-dim)}.tabs button.on{color:var(--accent);border-color:#e8a33d80;background:var(--accent-dim)}.browser-body{padding:10px 12px 14px;min-height:0}.recent{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}.recent small{font-size:9px;letter-spacing:.14em;color:var(--text-faint);font-weight:700;margin-right:4px}.recent-chip{border:1px solid var(--line);background:var(--panel-2);border-radius:5px;padding:5px 9px;font-size:12px}.inst-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px}.inst-card{border:1px solid var(--line);background:#111316;border-radius:7px;padding:9px 10px;display:flex;flex-direction:column;gap:6px;cursor:pointer}.inst-card:active{background:var(--panel-2)}.inst-card.current{border-color:#e8a33d99;background:var(--accent-dim)}.inst-top{display:flex;align-items:center;justify-content:space-between;gap:6px}.inst-name{font-size:13px;font-weight:600}.star{border:0;background:none;color:var(--text-faint);font-size:15px;padding:0 2px;line-height:1}.star.on{color:var(--accent)}.inst-meta{display:flex;gap:6px;align-items:center;font-size:9.5px;color:var(--text-faint);letter-spacing:.06em}.badge{font-size:8.5px;font-weight:700;padding:2px 4px;border-radius:3px;border:1px solid var(--line-2);color:var(--text-dim)}.badge.sample{color:var(--accent);border-color:#e8a33d80}.empty{color:var(--text-faint);font-size:13px}.preset-body{padding:12px;display:flex;flex-direction:column;gap:6px;min-height:0}.preset-save{display:flex;gap:6px;margin-bottom:6px}.preset-save input{flex:1;min-width:0;height:36px;border-radius:6px;border:1px solid var(--line-2);background:#0f1113;padding:0 10px;outline:none;-webkit-user-select:text;user-select:text}.list-title{font-size:9px;letter-spacing:.16em;color:var(--text-faint);font-weight:700;margin-top:6px}.preset-row{display:flex;gap:6px}.preset-load{flex:1;text-align:left;border:1px solid var(--line);background:#111316;border-radius:6px;padding:10px 12px;font-size:13px;font-weight:600}.preset-load:active{background:var(--panel-2)}.sheet-backdrop{justify-content:flex-end}.sheet{width:min(440px,94vw);height:100%;background:var(--panel);border-left:1px solid var(--line-2);display:flex;flex-direction:column;padding-right:env(safe-area-inset-right);animation:slide .18s ease-out}@keyframes slide{0%{transform:translate(24px);opacity:0}}.sheet-head{justify-content:space-between}.sheet-body{flex:1;min-height:0;padding:4px 14px 30px}.sec{padding:12px 0 8px;border-bottom:1px solid var(--line)}.sec h3{margin:0 0 8px;font-size:10px;letter-spacing:.18em;color:var(--accent);font-weight:700}.row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;padding:3px 0}.row-label{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:13px}.row-label small{font-size:10.5px;color:var(--text-faint)}.row-ctl{flex:none;display:flex;justify-content:flex-end;max-width:64%}.row-ctl .seg button{padding:0 9px;font-size:10px}.note{font-size:11px;color:var(--text-faint);margin:2px 0 6px;line-height:1.4}.note.err{color:#e87a5d}.select{appearance:none;-webkit-appearance:none;background:#0f1113;border:1px solid var(--line-2);border-radius:6px;padding:7px 10px;font-size:12px;max-width:200px}.slider{display:flex;align-items:center;gap:8px;width:210px;max-width:100%}.slider output{font-family:var(--mono);font-size:11px;color:var(--text-dim);min-width:56px;text-align:right}input[type=range]{flex:1;min-width:0;-webkit-appearance:none;appearance:none;background:transparent;height:28px;touch-action:none}input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--line-2);border-radius:2px}input[type=range]::-moz-range-track{height:3px;background:var(--line-2);border-radius:2px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#d9dce0;margin-top:-7.5px;border:3px solid #2a2e34;box-shadow:0 0 0 1px #4a5058}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#d9dce0;border:3px solid #2a2e34}.toggle{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:0}.toggle .knob{width:38px;height:22px;border-radius:11px;background:var(--line-2);position:relative;transition:background .15s}.toggle .knob:after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#9aa0a8;transition:transform .15s,background .15s}.toggle.on .knob{background:#e8a33d66}.toggle.on .knob:after{transform:translate(16px);background:var(--accent)}.quick{display:flex;gap:4px;flex-wrap:wrap;margin:2px 0 6px;justify-content:flex-end}.quick button,.degrees button{border:1px solid var(--line);background:#111316;border-radius:4px;padding:5px 7px;font-size:10.5px;font-family:var(--mono);color:var(--text-dim)}.quick button.on,.degrees button.on{border-color:#e8a33d99;color:var(--accent);background:var(--accent-dim)}.degrees{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 8px}.degrees button.mod{color:var(--text);border-color:var(--line-2)}.degrees sup{font-size:8px;color:var(--accent);margin-left:2px}.btn-row{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-2);background:var(--panel-2);border-radius:6px;padding:8px 12px;font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--text);cursor:pointer}.btn:active{background:#23272c}.btn.primary{background:var(--accent);color:#1a1206;border-color:var(--accent)}.btn.ghost{background:transparent;color:var(--text-faint)}.btn.big{padding:13px 34px;font-size:13px;letter-spacing:.2em}.toast{position:fixed;bottom:16px;left:50%;transform:translate(-50%);z-index:40;background:#2a1c14;border:1px solid #6b3b20;color:#f0c0a0;padding:10px 14px;border-radius:8px;font-size:12px}.start{position:fixed;inset:0;z-index:50;background:radial-gradient(ellipse at 50% 40%,#16181c,#08090a 70%);display:grid;place-items:center;cursor:pointer}.start-card{display:flex;flex-direction:column;align-items:center;gap:18px;padding:20px;text-align:center}.start-logo{display:flex;align-items:center;gap:14px;text-align:left}.start-logo h1{margin:0;font-size:clamp(26px,6vw,40px);letter-spacing:.28em;font-weight:700}.start-logo p{margin:2px 0 0;font-size:11px;letter-spacing:.42em;color:var(--text-dim)}.start-tip{margin:0;color:var(--text-faint);font-size:12px;max-width:420px}.rotate{display:none}@media (orientation: portrait) and (max-width: 820px){.rotate{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:30px;text-align:center;background:#0b0c0e}.rotate p{font-size:15px;color:var(--text);margin:0;max-width:260px;line-height:1.45}.rotate-icon{width:46px;height:76px;border:2px solid var(--text-dim);border-radius:9px;animation:rot 2.4s ease-in-out infinite;position:relative}.rotate-icon:after{content:"";position:absolute;bottom:6px;left:50%;width:10px;height:2px;margin-left:-5px;background:var(--text-dim);border-radius:1px}@keyframes rot{0%,25%{transform:rotate(0)}55%,to{transform:rotate(-90deg)}}.controls-col{width:96px}}@media (max-height: 430px){:root{--top-h: 42px}.chip{height:32px;padding:0 8px}.brand-text{display:none}.strip-foot{height:24px}.strip-head{padding:4px 4px 3px;gap:3px}.bend-thumb{height:24px}.stage{padding:5px;gap:5px}.play-col{gap:5px}}@media (max-width: 1000px){.brand-text{display:none}.chip.inst{min-width:96px;max-width:136px}.chip.sel select{max-width:92px}.seg-sm button{padding:0 7px}}@media (max-width: 760px){.controls-col{width:124px;gap:4px}.strip-head,.strip-foot{padding:0 4px}}@media (min-width: 1400px){.controls-col{width:220px}}.controls-col.single{width:clamp(68px,8vw,110px)}.koma-chip{flex-direction:row;align-items:center;padding:0 2px;gap:2px}.koma-chip .arrow{width:26px;height:30px;border:0;background:transparent;font-size:16px;line-height:1;color:var(--text-dim);border-radius:4px}.koma-chip .arrow:active{background:var(--panel-2);color:var(--text)}.koma-chip .koma-mid{display:flex;flex-direction:column;align-items:center;min-width:52px;border:0;background:transparent;padding:0}.koma-chip.on span{color:var(--accent)}