:root{--bg: #0a0a0a;--bg-1: #0d0d0d;--bg-2: #141414;--bg-3: #1c1c1c;--line: #1f1f1f;--line-2: #2a2a2a;--text: #e8e8e8;--text-dim: #888;--text-faint: #555;--c-piano: #d4a960;--c-dots: #ff7a3d;--c-hex: #4dd0c8;--c-strip: #b56dff;--c-chords: #ffc04d;--accent: var(--c-piano);--accent-glow: rgba(212, 169, 96, .4);--shadow-deep: 0 30px 70px rgba(0, 0, 0, .85);--shadow-key: 0 8px 14px rgba(0, 0, 0, .5);--r-sm: 6px;--r-md: 10px;--r-lg: 14px;--topbar-h: 64px}body[data-mode=piano]{--accent: var(--c-piano);--accent-glow: rgba(212, 169, 96, .4)}body[data-mode=dots]{--accent: var(--c-dots);--accent-glow: rgba(255, 122, 61, .45)}body[data-mode=hex]{--accent: var(--c-hex);--accent-glow: rgba(77, 208, 200, .4)}body[data-mode=strip]{--accent: var(--c-strip);--accent-glow: rgba(181, 109, 255, .45)}body[data-mode=chords]{--accent: var(--c-chords);--accent-glow: rgba(255, 192, 77, .4)}*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;user-select:none;-webkit-user-select:none;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;overscroll-behavior:none}body{display:flex;flex-direction:column;height:100vh;height:100dvh;min-width:0;transition:background .4s ease}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at top,var(--accent-glow) 0%,transparent 55%);opacity:.05;pointer-events:none;transition:background .6s ease;z-index:0}#topbar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 22px;background:linear-gradient(to bottom,#161616,#0c0c0c);border-bottom:1px solid #000;box-shadow:0 2px 12px #0009;flex-shrink:0;min-height:var(--topbar-h);height:auto}#brand{display:flex;align-items:center;gap:12px;flex-shrink:0;min-width:110px}#brand .logo{color:var(--accent);font-size:24px;line-height:1;text-shadow:0 0 12px var(--accent-glow);transition:color .4s,text-shadow .4s}.brand-text{display:flex;flex-direction:column;gap:2px}.brand-text .title{font-size:12px;letter-spacing:5px;color:var(--text-dim);font-weight:400}.brand-text .subtitle{font-size:10px;letter-spacing:2px;color:var(--accent);transition:color .4s}#mode-switcher{display:flex;gap:4px;background:#060606;border:1px solid var(--line);padding:4px;border-radius:12px;box-shadow:inset 0 2px 6px #0009;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x}#mode-switcher::-webkit-scrollbar{display:none}.mode-btn{display:flex;align-items:center;gap:8px;padding:8px 14px;background:transparent;border:none;border-radius:8px;color:var(--text-dim);font-size:12px;letter-spacing:2px;cursor:pointer;font-family:inherit;transition:color .2s ease,background .2s ease,box-shadow .2s ease;-webkit-appearance:none;position:relative;flex:0 0 auto}.mode-btn:hover{color:var(--text);background:#ffffff08}.mode-btn.active{color:#000;background:var(--accent);box-shadow:0 0 18px var(--accent-glow),inset 0 1px #ffffff4d}.mode-btn.active .m-icon *{background:#000!important;border-color:#000!important}.m-icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.m-text{font-weight:500}.piano-icon{gap:1px;align-items:flex-end}.piano-icon span{width:2px;background:currentColor}.piano-icon span:nth-child(1){height:14px}.piano-icon span:nth-child(2){height:9px}.piano-icon span:nth-child(3){height:14px}.piano-icon span:nth-child(4){height:9px}.piano-icon span:nth-child(5){height:14px}.dots-icon{display:grid;grid-template-columns:1fr 1fr;gap:2px}.dots-icon span{width:6px;height:6px;border-radius:50%;background:currentColor}.hex-icon{width:14px;height:16px;background:currentColor;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}.strip-icon{width:18px;height:3px;border-radius:2px;background:linear-gradient(to right,currentColor,transparent,currentColor)}.chords-icon{display:grid;grid-template-columns:1fr 1fr;gap:2px}.chords-icon span{width:6px;height:6px;border-radius:1px;background:currentColor;opacity:.5}.chords-icon span:first-child{opacity:1}#actions{display:flex;gap:8px;flex-shrink:0;align-items:center;min-width:0}.btn{padding:8px 14px;background:#1a1a1a;border:1px solid var(--line-2);border-radius:8px;color:var(--text);font-size:12px;letter-spacing:2px;cursor:pointer;font-family:inherit;transition:color .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease;-webkit-appearance:none;min-width:44px}.btn:active{transform:scale(.96)}.btn:hover{background:#222;border-color:#353535}.btn.ghost{background:transparent;border-color:var(--line);color:var(--text-dim)}.btn.ghost:hover{color:var(--text);border-color:var(--line-2);background:#ffffff05}.btn.icon{padding:8px;min-width:36px;display:inline-flex;align-items:center;justify-content:center}.btn.icon-text{display:inline-flex;align-items:center;gap:6px;padding:7px 12px}.btn.icon-text .vol-num{font-size:11px;letter-spacing:1px;color:var(--text-dim);font-variant-numeric:tabular-nums;min-width:22px;text-align:right}.btn.active{background:var(--accent);color:#000;border-color:var(--accent);box-shadow:0 0 16px var(--accent-glow)}.btn.active .vol-num{color:#000}.btn.muted{color:#ff6464;border-color:#ff646466}.btn.muted .vol-wave1,.btn.muted .vol-wave2{display:none}#btn-sustain.active{animation:sustainPulse 1.6s ease-in-out infinite}@keyframes sustainPulse{0%,to{box-shadow:0 0 16px var(--accent-glow)}50%{box-shadow:0 0 28px var(--accent),0 0 12px var(--accent-glow)}}#volume-popover{position:absolute;top:calc(100% + 8px);right:18px;width:280px;background:linear-gradient(to bottom,#1c1c1c,#0e0e0e);border:1px solid var(--line-2);border-radius:12px;padding:16px 18px;box-shadow:0 16px 40px #000000b3,0 0 0 1px #0006;opacity:0;pointer-events:none;transform:translateY(-8px) scale(.96);transform-origin:top right;transition:opacity .18s ease,transform .18s ease;z-index:60}#volume-popover.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}#volume-popover .vp-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}#volume-popover .vp-title{font-size:11px;letter-spacing:4px;color:var(--text-dim)}#volume-popover .vp-num{font-size:22px;font-weight:300;color:var(--accent);letter-spacing:1px;font-variant-numeric:tabular-nums}#volume-popover .vp-row{display:flex;align-items:center;gap:10px}#volume-popover .vp-quick{flex-shrink:0;width:36px;height:36px;background:#181818;border:1px solid var(--line);border-radius:8px;color:var(--text-dim);font-size:10px;letter-spacing:1px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color .15s ease,background .15s ease,border-color .15s ease;-webkit-appearance:none;font-family:inherit}#volume-popover .vp-quick:hover{background:var(--accent);color:#000;border-color:var(--accent)}#volume-popover input[type=range]{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--vol-pct, 80%),#2a2a2a var(--vol-pct, 80%),#2a2a2a 100%);border-radius:3px;outline:none;cursor:pointer}#volume-popover input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:#fff;border:2px solid var(--accent);border-radius:50%;cursor:pointer;box-shadow:0 0 12px var(--accent-glow)}#volume-popover input[type=range]::-moz-range-thumb{width:18px;height:18px;background:#fff;border:2px solid var(--accent);border-radius:50%;cursor:pointer}#volume-popover .vp-presets{display:flex;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);justify-content:space-between}#volume-popover .vp-preset{flex:1;padding:6px;background:transparent;border:1px solid var(--line);border-radius:6px;color:var(--text-dim);font-size:11px;letter-spacing:1px;cursor:pointer;transition:color .15s ease,background .15s ease,border-color .15s ease;-webkit-appearance:none;font-family:inherit}#volume-popover .vp-preset:hover{background:#d4a9601f;color:var(--accent);border-color:var(--accent)}.tonality-pill{display:inline-flex;align-items:baseline;gap:5px;padding:7px 12px}.tonality-pill .ton-key{font-size:13px;font-weight:600;letter-spacing:1px;color:var(--accent);font-variant-numeric:tabular-nums}.tonality-pill .ton-scale{font-size:11px;letter-spacing:1px;color:var(--text-dim)}.tonality-pill:hover .ton-scale{color:var(--text)}.tonality-pill.open{border-color:var(--accent);color:var(--text);box-shadow:0 0 14px var(--accent-glow)}#tonality-popover{position:absolute;top:calc(100% + 8px);right:18px;width:min(304px,calc(100vw - 24px));background:linear-gradient(to bottom,#1c1c1c,#0e0e0e);border:1px solid var(--line-2);border-radius:12px;padding:16px 18px;box-shadow:0 16px 40px #000000b3,0 0 0 1px #0006;opacity:0;pointer-events:none;transform:translateY(-8px) scale(.96);transform-origin:top right;transition:opacity .18s ease,transform .18s ease;z-index:60}#tonality-popover.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}#tonality-popover .tp-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}#tonality-popover .tp-title{font-size:11px;letter-spacing:4px;color:var(--text-dim)}#tonality-popover .tp-current{font-size:16px;font-weight:300;color:var(--accent);letter-spacing:1px}#tonality-popover .tp-section-label{font-size:9px;letter-spacing:3px;color:var(--text-faint);margin:12px 0 8px}#tonality-popover .tp-section-label:first-of-type{margin-top:2px}#tonality-popover .tp-keys{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}#tonality-popover .tp-scales{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.tp-key-btn,.tp-scale-btn{border:1px solid var(--line-2);border-radius:6px;background:#161616;color:var(--text-dim);font:inherit;font-size:11px;letter-spacing:.5px;cursor:pointer;padding:8px 4px;transition:color .15s,background .15s,border-color .15s,box-shadow .15s;-webkit-appearance:none}.tp-key-btn.is-black{background:#0c0c0c;color:var(--text-faint)}.tp-key-btn:hover,.tp-scale-btn:hover{color:var(--text);border-color:var(--accent)}.tp-key-btn.active,.tp-scale-btn.active{background:var(--accent);color:#000;border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow);font-weight:600}.tb-tonality{flex-direction:column;gap:2px;padding:6px 12px}.tb-tonality .tb-ton-key{font-size:14px;font-weight:600;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}.tb-tonality .tb-ton-scale{font-size:9px;letter-spacing:1px;color:var(--text-dim);line-height:1}.tb-tonality.open{border-color:var(--accent);box-shadow:0 0 14px var(--accent-glow)}@media(pointer:coarse){#tonality-popover{position:fixed;top:auto;bottom:calc(84px + env(safe-area-inset-bottom,0));right:16px;transform-origin:bottom right}}#kbd-hint{position:fixed;left:16px;bottom:14px;z-index:40;display:none;align-items:center;gap:8px;padding:6px 12px;background:#101010b3;border:1px solid var(--line);border-radius:8px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:11px;letter-spacing:1px;color:var(--text-faint);pointer-events:none;opacity:.5;transition:opacity .3s ease}#kbd-hint .kh-icon{font-size:13px;opacity:.85}#kbd-hint .kh-text b{color:var(--text-dim);font-weight:600;font-family:ui-monospace,SF Mono,monospace}#kbd-hint .kh-oct{display:inline-block;color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums;padding-left:8px;border-left:1px solid var(--line-2)}#kbd-hint .kh-oct.pulse{animation:kbdOctPulse .4s ease}@keyframes kbdOctPulse{0%{transform:scale(1.5);color:#fff;text-shadow:0 0 10px var(--accent)}to{transform:scale(1)}}#kbd-hint.disabled{opacity:0}@media(pointer:fine){#kbd-hint{display:flex}}#midi-badge{position:fixed;left:16px;bottom:52px;z-index:41;display:none;align-items:center;gap:8px;padding:6px 12px;background:#101010c7;border:1px solid var(--line-2);border-radius:8px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:11px;letter-spacing:1px;pointer-events:none;max-width:min(280px,calc(100vw - 32px))}#midi-badge.connected{display:flex}#midi-badge .mb-dot{flex-shrink:0;width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80;animation:midiPulse 1.8s ease-in-out infinite}@keyframes midiPulse{0%,to{opacity:1}50%{opacity:.4}}#midi-badge .mb-label{color:var(--text-dim);font-weight:600;flex-shrink:0}#midi-badge .mb-name{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(pointer:coarse){#midi-badge{bottom:calc(84px + env(safe-area-inset-bottom,0))}}#stage{flex:1;position:relative;overflow:hidden;z-index:1;display:flex;flex-direction:column;min-height:0}#mode-container{flex:1;position:relative;overflow:hidden;min-height:0;contain:layout paint;will-change:opacity,transform;transition:opacity .22s ease,transform .22s ease,filter .22s ease}#mode-container.fading{opacity:0;filter:blur(6px);transform:scale(.985)}#voice-bar{display:flex;align-items:center;gap:8px;padding:10px 18px;background:linear-gradient(to bottom,#0000008c,#00000040);border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;flex-shrink:0;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#2a2a2a transparent;box-shadow:inset 0 -2px 8px #0000004d;overscroll-behavior-x:contain;touch-action:pan-x}#voice-bar::-webkit-scrollbar{height:4px}#voice-bar::-webkit-scrollbar-track{background:transparent}#voice-bar::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:2px}#voice-bar .vb-prefix{font-size:10px;letter-spacing:4px;color:var(--text-faint);flex-shrink:0;padding-right:4px;white-space:nowrap}.voice-chip{flex-shrink:0;padding:8px 14px 7px;background:#161616;border:1px solid var(--line);border-radius:9px;color:var(--text-dim);font-family:inherit;cursor:pointer;transition:color .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease;text-align:left;display:flex;flex-direction:column;gap:2px;min-width:96px;-webkit-appearance:none;position:relative;overflow:hidden}.voice-chip:hover{background:#1f1f1f;border-color:var(--line-2);color:var(--text)}.voice-chip:active{transform:scale(.97)}.voice-chip .vc-tag{font-size:8px;letter-spacing:2px;color:var(--accent);opacity:.6;line-height:1}.voice-chip .vc-label{font-size:13px;letter-spacing:1px;color:var(--text);font-weight:400;line-height:1.1}.voice-chip .vc-sub{font-size:9px;letter-spacing:1px;color:var(--text-faint);line-height:1}.voice-chip.active{background:var(--accent);border-color:var(--accent);box-shadow:0 0 18px var(--accent-glow),inset 0 1px #ffffff40}.voice-chip.active .vc-tag,.voice-chip.active .vc-label,.voice-chip.active .vc-sub{color:#000;opacity:1}@media(max-width:700px){#voice-bar{padding:8px 12px;gap:6px}#voice-bar .vb-prefix{display:none}.voice-chip{min-width:84px;padding:6px 10px 5px}.voice-chip .vc-label{font-size:12px}}#sustain-overlay{position:fixed;bottom:0;left:0;right:0;height:44px;background:linear-gradient(to top,rgba(0,0,0,.6),transparent);display:flex;align-items:center;justify-content:center;gap:14px;color:var(--accent);letter-spacing:8px;font-size:10px;pointer-events:none;opacity:0;transition:opacity .2s ease;font-weight:500;z-index:5}#sustain-overlay .dot{width:4px;height:4px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:pulse-dot 1.6s infinite}#sustain-overlay .dot:last-child{animation-delay:.8s}body.sustaining #sustain-overlay{opacity:1}@keyframes pulse-dot{0%,to{opacity:.4}50%{opacity:1}}#loading{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#080808f5;color:#fff;z-index:100;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:opacity .5s ease}#loading.hidden{opacity:0;pointer-events:none}#loading .brand-logo{font-size:56px;color:var(--accent);text-shadow:0 0 30px var(--accent-glow);margin-bottom:8px;animation:rotate-slow 6s linear infinite}@keyframes rotate-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#loading .ll-label{font-size:14px;letter-spacing:10px;color:var(--accent);font-weight:500}#loading .ll-sublabel{font-size:11px;letter-spacing:4px;color:var(--text-dim)}#loading .ll-progress{width:240px;height:2px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:6px}#loading .ll-bar{width:0%;height:100%;background:linear-gradient(to right,var(--accent),#fff);box-shadow:0 0 10px var(--accent-glow);transition:width .4s ease}#loading .ll-hint{font-size:10px;color:var(--text-faint);letter-spacing:1px;margin-top:14px}#audio-hint{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;padding-top:calc(14px + env(safe-area-inset-top,0));background:linear-gradient(to bottom,#ff50501f,#b4282814);border-bottom:1px solid rgba(255,80,80,.2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#f88;font-size:12px;letter-spacing:2px;cursor:pointer;transform:translateY(-100%);transition:transform .35s ease;-webkit-tap-highlight-color:transparent}#audio-hint.visible{transform:translateY(0)}#audio-hint svg{flex-shrink:0}#settings-panel{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(320px,100vw);background:linear-gradient(to bottom,#141414,#080808);border-left:1px solid var(--line);box-shadow:-20px 0 40px #0009;z-index:50;transform:translate(100%);transition:transform .3s ease;padding:24px 22px;overflow-y:auto}#settings-panel.open{transform:translate(0)}.sp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.sp-header h3{margin:0;font-size:13px;letter-spacing:6px;color:var(--accent);font-weight:500}#settings-close{background:transparent;border:none;color:var(--text-dim);font-size:28px;line-height:1;cursor:pointer;padding:0 6px;transition:color .15s}#settings-close:hover{color:var(--text)}.sp-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}.sp-row label{font-size:12px;letter-spacing:2px;color:var(--text-dim);width:60px;flex-shrink:0}.sp-row input[type=range]{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:var(--line-2);border-radius:2px;outline:none}.sp-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--accent);border-radius:50%;cursor:pointer;box-shadow:0 0 10px var(--accent-glow)}.sp-row input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--accent);border-radius:50%;cursor:pointer;border:none}.sp-value{width:32px;text-align:right;font-size:11px;color:var(--text-dim);font-variant-numeric:tabular-nums}.sp-section{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}.sp-section-title{font-size:10px;letter-spacing:4px;color:var(--text-faint);margin-bottom:10px}.sp-text{font-size:12px;color:var(--text-dim);margin:4px 0;line-height:1.5}.sp-text-dim{font-size:10px;color:var(--text-faint);margin:2px 0}#settings-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:49;opacity:0;pointer-events:none;transition:opacity .3s ease}#settings-backdrop.open{opacity:1;pointer-events:auto}@media(max-width:900px){#topbar{padding:10px 14px;gap:10px}#brand{min-width:0}.brand-text{display:none}#brand .logo{font-size:22px}.mode-btn{padding:7px 10px}.m-text{display:none}.btn{padding:7px 10px;min-width:36px}#actions .btn[id=btn-labels],#actions .btn[id=btn-sustain]{font-size:11px;letter-spacing:1px;padding:7px 10px}}@media(max-width:600px){#actions{gap:5px}.btn{padding:7px 8px;min-width:34px}.btn.icon-text{padding:7px 8px}.btn.icon-text .vol-num{display:none}#volume-popover{right:10px;width:min(280px,calc(100vw - 20px))}}@media(max-height:520px){:root{--topbar-h: 54px}#topbar{padding:7px 12px;gap:8px}#voice-bar{padding:6px 12px}.voice-chip{padding:6px 10px 5px;min-width:82px}.voice-chip .vc-label{font-size:12px}}@supports (padding: env(safe-area-inset-top)){#topbar{min-height:calc(var(--topbar-h) + env(safe-area-inset-top,0));padding-top:calc(12px + env(safe-area-inset-top,0));padding-left:max(22px,env(safe-area-inset-left,0));padding-right:max(22px,env(safe-area-inset-right,0))}#stage{padding-bottom:env(safe-area-inset-bottom,0)}@media(max-width:900px){#topbar{padding-top:calc(10px + env(safe-area-inset-top,0));padding-left:max(14px,env(safe-area-inset-left,0));padding-right:max(14px,env(safe-area-inset-right,0))}}@media(max-width:600px){#topbar{padding-left:max(10px,env(safe-area-inset-left,0));padding-right:max(10px,env(safe-area-inset-right,0))}}@media(max-height:520px){#topbar{padding-top:calc(7px + env(safe-area-inset-top,0))}}}@media(hover:none){.mode-btn:not(.active):hover{color:var(--text-dim);background:transparent}.btn.ghost:not(.active):hover{color:var(--text-dim);border-color:var(--line);background:transparent}.voice-chip:not(.active):hover{color:var(--text-dim);background:#161616;border-color:var(--line)}}#btn-fullscreen .fs-exit,body.is-fullscreen #btn-fullscreen .fs-enter{display:none}body.is-fullscreen #btn-fullscreen .fs-exit{display:block}#topbar-handle{display:none;position:fixed;top:0;left:50%;transform:translate(-50%);z-index:12;width:80px;height:24px;align-items:flex-end;justify-content:center;cursor:pointer;padding-bottom:6px;-webkit-tap-highlight-color:transparent}#topbar-handle .handle-line{width:40px;height:4px;background:#ffffff40;border-radius:2px;transition:background .15s,width .15s}#topbar-handle:hover .handle-line,#topbar-handle:active .handle-line{background:#ffffff80;width:48px}body.is-fullscreen #topbar{transition:transform .3s ease,opacity .3s ease}body.is-fullscreen.topbar-hidden #topbar{transform:translateY(-100%);opacity:0;pointer-events:none}body.is-fullscreen #topbar-handle{display:flex}body.is-fullscreen:not(.topbar-hidden) #topbar-handle{display:none}body.is-fullscreen #sustain-overlay{bottom:80px}#tablet-bar{display:none}.tb-mode{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 14px;background:transparent;border:none;border-radius:10px;color:var(--text-dim);font-family:inherit;cursor:pointer;transition:color .15s ease,background .15s ease;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;min-width:52px;min-height:44px}.tb-mode .m-icon{width:20px;height:20px}.tb-mode .m-icon *{transition:background .15s,border-color .15s}.tb-mode:active{transform:scale(.93)}.tb-mode.active{color:var(--accent);background:#ffffff0f}.tb-mode.active .m-icon *{background:var(--accent)!important;border-color:var(--accent)!important}.tb-mode.active .hex-icon{background:var(--accent)!important}.tb-mode.active .strip-icon{background:linear-gradient(to right,var(--accent),transparent,var(--accent))!important}.tb-label{font-size:9px;letter-spacing:1.5px;line-height:1}.tb-sep{width:1px;height:28px;background:#ffffff1a;margin:0 8px;flex-shrink:0}.tb-action{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px 12px;background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:var(--text-dim);font-family:inherit;font-size:11px;letter-spacing:1.5px;cursor:pointer;transition:color .15s,background .15s,border-color .15s,box-shadow .15s;-webkit-appearance:none;-webkit-tap-highlight-color:transparent}.tb-action:active{transform:scale(.93)}.tb-action.active{background:var(--accent);color:#000;border-color:var(--accent);box-shadow:0 0 14px var(--accent-glow)}#tb-sustain.active{animation:sustainPulse 1.6s ease-in-out infinite}.tb-action .fs-exit,body.is-fullscreen .tb-action .fs-enter{display:none}body.is-fullscreen .tb-action .fs-exit{display:block}@media(min-width:768px)and (pointer:coarse){#tablet-bar{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:center;gap:4px;height:72px;padding:0 20px;padding-bottom:env(safe-area-inset-bottom,0);background:linear-gradient(to top,#080808f7,#0c0c0ceb);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-top:1px solid rgba(255,255,255,.06);box-shadow:0 -6px 24px #00000080}#mode-switcher{display:none}#topbar{min-height:50px;padding:8px 16px;gap:12px}.brand-text{display:none}#brand .logo{font-size:20px}.btn{min-width:44px;min-height:44px}.btn.icon{padding:10px}#voice-bar{padding:8px 14px;gap:6px}.voice-chip{min-width:80px;padding:6px 10px 5px}#stage{padding-bottom:calc(72px + env(safe-area-inset-bottom,0))}.mode-piano .piano-nav{padding-bottom:20px}.mode-chords .chord-bottom-hint,.mode-dots .dots-info,.mode-hex .hex-info,.mode-strip .strip-bottom-hint{bottom:10px}#sustain-overlay{bottom:72px}body.is-fullscreen #tablet-bar{background:linear-gradient(to top,#080808d9,#0c0c0c99);border-radius:16px 16px 0 0;left:50%;transform:translate(-50%);right:auto;width:auto;min-width:420px;max-width:90%;padding:0 24px;padding-bottom:env(safe-area-inset-bottom,0)}body.is-fullscreen #stage{padding-bottom:0}body.is-fullscreen #sustain-overlay{bottom:80px}}@media(min-width:1024px)and (pointer:coarse){#tablet-bar{gap:8px;height:68px}.tb-mode{padding:8px 18px;min-width:60px}.tb-label{font-size:10px}.voice-chip{min-width:96px}}@supports (padding: env(safe-area-inset-bottom)){@media(min-width:768px)and (pointer:coarse){#tablet-bar{padding-bottom:max(8px,env(safe-area-inset-bottom,0))}}}@media(max-width:767px){#mode-switcher,#kbd-hint{display:none}#tablet-bar{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;align-items:stretch;justify-content:space-around;gap:2px;height:60px;padding:4px 6px;padding-bottom:max(4px,env(safe-area-inset-bottom,0));background:linear-gradient(to top,#080808fa,#0c0c0cf0);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-top:1px solid rgba(255,255,255,.06);box-shadow:0 -6px 24px #00000080}#tablet-bar .tb-sep,#tb-tonality,#tb-sustain,#tb-fullscreen{display:none}.tb-mode{flex:1;min-width:0;padding:5px 2px;gap:3px;border-radius:10px;min-height:0}.tb-mode .m-icon{width:18px;height:18px}.tb-label{font-size:9px;letter-spacing:1px}#stage{padding-bottom:calc(60px + env(safe-area-inset-bottom,0))}.mode-chords .chord-bottom-hint,.mode-dots .dots-info,.mode-hex .hex-info,.mode-strip .strip-bottom-hint{bottom:8px}body.is-fullscreen #tablet-bar{left:50%;right:auto;transform:translate(-50%);width:auto;min-width:300px;max-width:calc(100vw - 24px);border-radius:16px 16px 0 0}}.mode-piano{width:100%;height:100%;display:flex;flex-direction:column;min-height:0;--white-key-w: 80px;--white-key-h: clamp(220px, calc(100dvh - 250px) , 340px);--black-key-w: 52px;--black-key-h: calc(var(--white-key-h) * .632)}.mode-piano .piano-wrapper{flex:1;min-height:0;position:relative;overflow-x:auto;overflow-y:hidden;display:flex;align-items:flex-end;padding:18px 0 28px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#333 transparent;touch-action:pan-x;overscroll-behavior-x:contain}.mode-piano .piano-wrapper{scrollbar-width:none}.mode-piano .piano-wrapper::-webkit-scrollbar{display:none}.mode-zoom-rail{position:absolute;top:14px;right:16px;z-index:8;display:flex;align-items:center;gap:6px;padding:6px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#080808c7;box-shadow:0 10px 26px #00000073;touch-action:none;pointer-events:auto}.mode-zoom-rail .zoom-rail-btn{width:34px;height:30px;padding:0;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:#ffffff0a;color:var(--text);font:inherit;font-size:11px;letter-spacing:1px;cursor:pointer}.mode-zoom-rail .zoom-rail-btn:active{transform:translateY(1px)}.mode-zoom-rail .zoom-rail-value{min-width:44px;color:var(--accent);font-size:11px;text-align:center;font-variant-numeric:tabular-nums}.mode-zoom-rail .zoom-rail-range{width:76px;accent-color:var(--accent)}.mode-piano .piano-board{background:linear-gradient(to bottom,#0a0a0a,#050505);padding:22px 18px 28px;border-radius:14px;box-shadow:0 30px 70px #000000d9,inset 0 1px #ffffff0a;display:flex;margin:auto;border:1px solid #1a1a1a;position:relative;contain:layout paint style}.mode-piano .piano-board:before{content:"";position:absolute;top:8px;left:18px;right:18px;height:1px;background:linear-gradient(to right,transparent,rgba(212,169,96,.5) 20%,rgba(212,169,96,.5) 80%,transparent)}.mode-piano .key{position:relative;cursor:pointer;flex-shrink:0;transition:transform .04s ease-out,box-shadow .04s ease-out,filter .04s;touch-action:none;will-change:transform}.mode-piano .white-key{width:var(--white-key-w);height:var(--white-key-h);background:linear-gradient(to bottom,#fafafa,#f0f0f0 70%,#d8d8d8);border:1px solid #aaa;border-radius:0 0 8px 8px;box-shadow:inset 0 1px #fff,inset 0 -4px 6px #0000002e,inset 2px 0 4px #0000000f,0 5px #888,0 10px 16px #00000080;z-index:1}.mode-piano .white-key.active{background:linear-gradient(to bottom,#e0e0e0,#c8c8c8);transform:translateY(4px);box-shadow:inset 0 1px #fff,inset 0 -3px 5px #00000040,0 1px #777,0 4px 8px #0006,0 0 30px var(--accent-glow)}.mode-piano .black-key{width:var(--black-key-w);height:var(--black-key-h);background:linear-gradient(to bottom,#2a2a2a,#0d0d0d 60%,#050505);border-radius:0 0 5px 5px;box-shadow:inset 0 1px #ffffff2e,inset 0 -3px 5px #0009,0 5px #000,0 8px 12px #000000b3;margin-left:calc(var(--black-key-w) * -.5);margin-right:calc(var(--black-key-w) * -.5);z-index:2}.mode-piano .black-key.active{background:linear-gradient(to bottom,#1a1a1a,#000);transform:translateY(3px);box-shadow:inset 0 1px #ffffff1f,0 1px #000,0 4px 6px #0009,0 0 22px var(--accent-glow)}.mode-piano .key-label{position:absolute;bottom:14px;left:50%;transform:translate(-50%);font-size:12px;color:#999;pointer-events:none;opacity:0;transition:opacity .25s;letter-spacing:.5px}.mode-piano .black-key .key-label{color:#bbb;bottom:8px;font-size:10px}body.show-labels .mode-piano .key-label{opacity:1}.mode-piano .white-key[data-c-marker=true]:after{content:"";position:absolute;top:8px;left:50%;transform:translate(-50%);width:5px;height:5px;border-radius:50%;background:var(--c-piano);opacity:.4}.mode-piano .white-key[data-c-marker=true][data-octave="4"]:after{opacity:1;box-shadow:0 0 8px var(--c-piano)}.mode-piano .key.in-scale:before,.mode-piano .key.is-tonic:before{content:"";position:absolute;left:50%;transform:translate(-50%);border-radius:2px;pointer-events:none;background:var(--c-piano)}.mode-piano .white-key.in-scale:before{bottom:7px;width:58%;height:3px;opacity:.32}.mode-piano .white-key.is-tonic:before{bottom:7px;width:66%;height:4px;opacity:.92;box-shadow:0 0 8px var(--c-piano)}.mode-piano .black-key.in-scale:before{bottom:6px;width:52%;height:3px;opacity:.5}.mode-piano .black-key.is-tonic:before{bottom:6px;width:58%;height:4px;opacity:1;box-shadow:0 0 7px var(--c-piano)}.mode-piano .piano-nav{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 16px 60px;background:linear-gradient(to top,rgba(0,0,0,.5) 0%,transparent 100%);z-index:3}.mode-piano .piano-nav-btns{display:flex;justify-content:center;align-items:center;gap:14px}.mode-piano .piano-minimap{position:relative;width:min(600px,calc(100% - 32px));height:28px;cursor:grab;touch-action:none}.mode-piano .piano-minimap.dragging{cursor:grabbing}.mode-piano .mm-track{position:absolute;top:0;right:0;bottom:0;left:0;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:6px;overflow:hidden}.mode-piano .mm-viewport{position:absolute;top:2px;bottom:2px;border-radius:4px;background:#d4a96026;border:1px solid rgba(212,169,96,.35);pointer-events:none;transition:left .05s ease-out,width .15s ease}.mode-piano .piano-minimap.dragging .mm-viewport{transition:none}.mode-piano .mm-mark{position:absolute;top:0;bottom:0;width:1px;background:#d4a9602e}.mode-piano .mm-label{position:absolute;bottom:2px;left:3px;font-size:7px;color:#d4a96073;letter-spacing:.5px;white-space:nowrap;pointer-events:none}.mode-piano .piano-nav-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:110px;min-height:52px;padding:10px 22px;background:linear-gradient(to bottom,#1f1f1f,#141414);border:1px solid var(--line-2);border-radius:14px;color:var(--text);font-family:inherit;font-size:14px;letter-spacing:3px;cursor:pointer;transition:color .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease;-webkit-appearance:none;box-shadow:0 4px 10px #0006,inset 0 1px #ffffff0d;flex-direction:column;line-height:1.1}.mode-piano .piano-nav-btn:hover{background:linear-gradient(to bottom,#2a2a2a,#1a1a1a);border-color:var(--accent);color:var(--accent)}.mode-piano .piano-nav-btn:active{transform:translateY(1px);box-shadow:0 2px 6px #0006}.mode-piano .piano-nav-btn .pn-icon{font-size:22px;line-height:1;color:var(--accent);font-weight:300}.mode-piano .piano-nav-btn .pn-text{font-size:12px;letter-spacing:3px}.mode-piano .piano-nav-btn .pn-sub{font-size:9px;letter-spacing:2px;color:var(--text-faint);margin-top:2px}.mode-piano .piano-nav-btn.center{min-width:130px;background:linear-gradient(to bottom,#2a2014,#1a1408);border-color:var(--c-piano);box-shadow:0 4px 14px #d4a96026,inset 0 1px #ffffff0f}.mode-piano .piano-nav-btn.center:hover{background:linear-gradient(to bottom,var(--c-piano),#b8852e);color:#1a0f00;box-shadow:0 6px 18px #d4a96066}.mode-piano .piano-nav-btn.center:hover .pn-sub{color:#00000080}.mode-piano .piano-nav-btn.center .pn-text{color:var(--c-piano)}.mode-piano .piano-nav-btn.center:hover .pn-text{color:#1a0f00}.mode-piano .piano-nav-btn:not(.center){flex-direction:row}@media(max-width:900px){.mode-piano{--white-key-w: 68px;--white-key-h: clamp(190px, calc(100dvh - 230px) , 290px);--black-key-w: 44px}.mode-piano .piano-nav{padding:6px 12px 56px;gap:6px}.mode-piano .piano-nav-btns{gap:10px}.mode-piano .piano-nav-btn{min-width:90px;min-height:46px;padding:8px 16px}.mode-piano .piano-nav-btn.center{min-width:110px}.mode-piano .piano-minimap{height:24px}}@media(max-width:600px){.mode-piano{--white-key-w: 56px;--white-key-h: clamp(150px, calc(100dvh - 220px) , 250px);--black-key-w: 36px}.mode-piano .piano-nav-btn .pn-text{font-size:11px;letter-spacing:2px}}@media(max-height:520px){.mode-piano{--white-key-h: clamp(128px, calc(100dvh - 176px) , 238px)}.mode-piano .piano-wrapper{padding:8px 0 10px}.mode-zoom-rail{top:8px;right:10px;transform:scale(.9);transform-origin:top right}.mode-piano .piano-board{padding:14px 12px 18px}.mode-piano .piano-nav{padding:4px 10px 10px;gap:4px}.mode-piano .piano-nav-btns{gap:8px}.mode-piano .piano-nav-btn{min-height:38px;padding:6px 12px}.mode-piano .piano-minimap{height:20px}.mode-piano .piano-nav-btn .pn-icon{font-size:18px}}.mode-dots{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden;position:relative}.mode-dots .dots-grid{display:grid;--dot-size: 64px;--dot-gap: 14px;--dot-pad: 24px;gap:var(--dot-gap);padding:var(--dot-pad);touch-action:none;contain:layout paint style;position:relative}.mode-dots .dot{width:var(--dot-size);height:var(--dot-size);border-radius:50%;background:radial-gradient(circle at 35% 30%,#1a1a1a,#0a0a0a);border:1px solid var(--line-2);cursor:pointer;position:relative;transition:transform .08s ease-out,border-color .15s,box-shadow .15s;touch-action:none;display:flex;align-items:center;justify-content:center;color:var(--text-faint);font-size:10px;letter-spacing:1px}.mode-dots .dot.scale-in{border-color:#ff7a3d4d;background:radial-gradient(circle at 35% 30%,#2a1a10,#0d0707)}.mode-dots .dot.root{border-color:var(--c-dots);background:radial-gradient(circle at 35% 30%,#3a1a08,#0d0503);box-shadow:0 0 20px #ff7a3d33,inset 0 0 10px #ff7a3d1a}.mode-dots .dot.active{background:radial-gradient(circle at 35% 30%,#ffaa70,var(--c-dots));border-color:var(--c-dots);transform:scale(.92);box-shadow:0 0 30px var(--c-dots),0 0 60px #ff7a3d80,inset 0 -2px 4px #0000004d;color:#fff}.mode-dots .dot-label{pointer-events:none;opacity:0;transition:opacity .25s}body.show-labels .mode-dots .dot-label{opacity:1}.mode-dots .dot.active .dot-label{opacity:.8;color:#fff}.mode-dots .ripple{position:absolute;left:0;top:0;width:var(--dot-size);height:var(--dot-size);border-radius:50%;border:2px solid var(--c-dots);pointer-events:none;opacity:0;transform:translate3d(-50%,-50%,0) scale(1);will-change:transform,opacity}.mode-dots .ripple.play{animation:ripple-out .7s ease-out forwards}@keyframes ripple-out{0%{transform:translate3d(-50%,-50%,0) scale(1);opacity:.7}to{transform:translate3d(-50%,-50%,0) scale(3.1);opacity:0}}.mode-dots .dots-info{position:absolute;bottom:18px;left:50%;transform:translate(-50%);color:var(--text-faint);font-size:10px;letter-spacing:4px;pointer-events:none}.mode-hex{width:100%;height:100%;overflow:hidden;background:radial-gradient(ellipse at center,rgba(77,208,200,.04),transparent 60%);position:relative;touch-action:none}.mode-hex svg{width:100%;height:100%;display:block}.mode-hex .hex{fill:#141414e6;stroke:#4dd0c82e;stroke-width:1;cursor:pointer;transition:fill .1s ease,stroke .1s ease}.mode-hex .hex.scale-in{fill:#142323f2;stroke:#4dd0c859}.mode-hex .hex.root{fill:#1e3232f2;stroke:var(--c-hex);stroke-width:1.5;filter:drop-shadow(0 0 6px rgba(77,208,200,.5))}.mode-hex .hex.active{fill:var(--c-hex);stroke:#fff;stroke-width:1.5;filter:drop-shadow(0 0 16px var(--c-hex)) drop-shadow(0 0 30px rgba(77,208,200,.6))}.mode-hex .hex-label{fill:#4dd0c880;font-size:10px;text-anchor:middle;dominant-baseline:middle;pointer-events:none;font-family:-apple-system,sans-serif;letter-spacing:.5px;opacity:0;transition:opacity .25s}.mode-hex .hex.root+.hex-label,body.show-labels .mode-hex .hex-label{opacity:1}.mode-hex .hex.active+.hex-label{fill:#000;opacity:1;font-weight:600}body.show-labels .mode-hex .hex.scale-in+.hex-label{fill:#4dd0c8d9}.mode-hex .hex-info{position:absolute;bottom:18px;left:50%;transform:translate(-50%);color:var(--text-faint);font-size:10px;letter-spacing:4px;pointer-events:none;text-align:center}.mode-hex .hex-info strong{color:var(--c-hex);font-weight:500;letter-spacing:2px}.mode-strip{width:100%;height:100%;display:flex;flex-direction:column;background:radial-gradient(ellipse at center,rgba(181,109,255,.06),transparent 70%);overflow:hidden;position:relative;touch-action:none}.mode-strip .strip-canvas{flex:1;position:relative;overflow:hidden;cursor:crosshair;touch-action:none}.mode-strip svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.mode-strip .snap-line{stroke:#b56dff4d;stroke-width:1.5}.mode-strip .snap-line.root{stroke:#b56dffd9;stroke-width:2.5;filter:drop-shadow(0 0 4px rgba(181,109,255,.4))}.mode-strip .snap-line.in-scale{stroke:#b56dff6b;stroke-width:1.5}.mode-strip .snap-line.out{stroke:#b56dff14;stroke-width:1}.mode-strip .snap-label{fill:#b56dffd9;font-size:11px;font-weight:500;text-anchor:middle;font-family:-apple-system,sans-serif;letter-spacing:1px}.mode-strip .strip-finger{position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle,#b56dffe6,#b56dff4d);border:2px solid #fff;box-shadow:0 0 30px var(--c-strip),0 0 60px #b56dff66;pointer-events:none;transform:translateZ(0) translate(-50%,-50%);transition:opacity .1s ease;will-change:transform,opacity}.mode-strip .strip-finger.snapped{background:radial-gradient(circle,#fff,var(--c-strip))}.mode-strip .strip-finger.free{background:radial-gradient(circle,#ffaaff,var(--c-strip));box-shadow:0 0 40px #f6f,0 0 80px #ff66ff80}.mode-strip .strip-info{position:absolute;top:14px;left:50%;transform:translate(-50%);color:var(--text-faint);font-size:10px;letter-spacing:4px;pointer-events:auto;touch-action:none;text-align:center;padding:8px 12px}.mode-strip .strip-info strong{color:var(--c-strip);font-weight:500;letter-spacing:2px}.mode-strip .strip-bottom-hint{position:absolute;bottom:14px;left:50%;transform:translate(-50%);color:var(--text-faint);font-size:10px;letter-spacing:3px;pointer-events:auto;touch-action:none;text-align:center;opacity:.6;padding:8px 12px}.mode-chords{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;position:relative}.mode-chords .chord-key-row{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 16px 6px;z-index:2}.mode-chords .ckr-label{color:var(--text-faint);font-size:10px;letter-spacing:4px}.mode-chords .chord-key-selector{display:flex;gap:3px}.mode-chords .ks-btn{width:30px;height:26px;border:1px solid var(--line-2);border-radius:6px;background:#14100acc;color:var(--text-dim);font:inherit;font-size:10px;letter-spacing:.5px;cursor:pointer;transition:all .15s;padding:0}.mode-chords .ks-btn.is-black{background:#0a0805e6}.mode-chords .ks-btn.active{background:var(--c-chords);color:#1a0f00;border-color:var(--c-chords);box-shadow:0 0 10px #ffc04d59;font-weight:600}.mode-chords .ks-btn:hover:not(.active){border-color:#ffc04d66;color:var(--text)}.mode-chords .chord-rows{flex:1;min-height:0;display:flex;flex-direction:column;gap:2px;padding:4px 0;overflow:hidden}.mode-chords .chord-row{flex:1;min-height:0;display:flex;flex-direction:column}.mode-chords .chord-row-label{flex-shrink:0;padding:2px 20px;font-size:9px;letter-spacing:5px;color:#ffc04d4d;font-weight:500;pointer-events:none;-webkit-user-select:none;user-select:none}.mode-chords .chord-row-scroll{flex:1;min-height:0;display:flex;gap:8px;padding:0 16px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-x;scrollbar-width:none;-ms-overflow-style:none}.mode-chords .chord-row-scroll::-webkit-scrollbar{display:none}.mode-chords .chord-row-scroll.fade-right{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 34px);mask-image:linear-gradient(to left,transparent 0,#000 34px)}.mode-chords .chord-row-scroll.fade-left{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 34px);mask-image:linear-gradient(to right,transparent 0,#000 34px)}.mode-chords .chord-row-scroll.fade-left.fade-right{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%)}.mode-chords .chord-pad{flex:0 0 108px;min-height:0;height:100%;position:relative;background:linear-gradient(to bottom,#1a1410,#0a0805);border:1px solid var(--line-2);border-radius:12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-dim);transition:color .12s,background .12s,border-color .12s,box-shadow .12s,transform .12s,opacity .2s;box-shadow:0 4px 12px #0006;overflow:hidden;opacity:.35}.mode-chords .chord-pad:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,rgba(255,192,77,.12),transparent)}.mode-chords .chord-pad.in-key{opacity:1;border-color:#ffc04d33}.mode-chords .chord-pad.in-key:before{background:linear-gradient(to right,transparent,rgba(255,192,77,.35),transparent)}.mode-chords .chord-pad:hover{opacity:.7;background:linear-gradient(to bottom,#2a1f15,#14100a)}.mode-chords .chord-pad.in-key:hover{opacity:1;border-color:#ffc04d66}.mode-chords .chord-pad.active{background:linear-gradient(to bottom,var(--c-chords),#b8852e);color:#1a0f00;border-color:var(--c-chords);transform:scale(.96);opacity:1;box-shadow:0 0 30px #ffc04d80,0 0 60px #ffc04d33,inset 0 -2px 4px #0000004d}.mode-chords .chord-name{font-size:22px;font-weight:300;letter-spacing:1px;color:var(--text);line-height:1}.mode-chords .chord-pad:not(.in-key) .chord-name{color:var(--text-dim)}.mode-chords .chord-pad.active .chord-name{color:#1a0f00;font-weight:500}.mode-chords .chord-roman{font-size:9px;letter-spacing:3px;color:var(--c-chords);margin-top:4px;opacity:.7}.mode-chords .chord-pad.active .chord-roman{color:#1a0f00;opacity:1}.mode-chords .chord-oct{font-size:10px;color:var(--text-faint);opacity:.35;line-height:1;margin-top:1px}.mode-chords .chord-pad.in-key .chord-oct{color:var(--c-chords);opacity:.45}.mode-chords .chord-pad.active .chord-oct{color:#1a0f00;opacity:.6}.mode-chords .chord-pad.octave-start{margin-left:6px}.mode-chords .chord-bottom-hint{flex-shrink:0;text-align:center;color:var(--text-faint);font-size:10px;letter-spacing:3px;padding:6px 16px 14px;opacity:.5;pointer-events:none}@media(max-width:700px){.mode-chords .chord-pad{flex:0 0 88px;border-radius:10px}.mode-chords .chord-row-scroll{gap:6px;padding:0 10px}.mode-chords .chord-name{font-size:18px}.mode-chords .chord-roman{font-size:8px;margin-top:3px}.mode-chords .ks-btn{width:26px;height:24px;font-size:9px;border-radius:5px}.mode-chords .chord-key-selector{gap:2px}.mode-chords .ckr-label{display:none}.mode-chords .chord-row-label{padding:1px 12px;font-size:8px;letter-spacing:4px}.mode-chords .chord-key-row{padding:6px 12px 4px}}@media(max-height:520px){.mode-chords .chord-rows{gap:1px;padding:2px 0}.mode-chords .chord-pad{flex:0 0 80px;border-radius:8px}.mode-chords .chord-name{font-size:16px}.mode-chords .chord-roman{margin-top:2px;font-size:8px}.mode-chords .chord-key-row{padding:4px 12px 2px}.mode-chords .ks-btn{width:24px;height:22px;font-size:8px}.mode-chords .chord-bottom-hint,.mode-dots .dots-info,.mode-hex .hex-info,.mode-strip .strip-bottom-hint,.mode-chords .chord-row-label{display:none}}@media(min-width:768px)and (pointer:coarse){.mode-zoom-rail .zoom-rail-btn{width:44px;height:44px;font-size:14px}.mode-zoom-rail .zoom-rail-range{width:100px}.mode-piano .piano-board{padding:18px 14px 22px}.mode-piano .piano-nav{padding:8px 14px 20px;gap:8px}.mode-piano .piano-nav-btns{gap:12px}.mode-piano .piano-nav-btn{min-width:120px;min-height:56px;padding:12px 24px}.mode-piano .piano-nav-btn.center{min-width:140px}.mode-piano .piano-minimap{width:min(700px,calc(100% - 48px));height:32px}.mode-chords .chord-pad{flex:0 0 120px;border-radius:14px}.mode-chords .chord-row-scroll{gap:10px;padding:0 20px}.mode-chords .chord-name{font-size:26px}.mode-chords .ks-btn{width:36px;height:30px;font-size:11px;border-radius:7px}.mode-chords .chord-key-selector{gap:4px}}@media(min-width:1024px)and (pointer:coarse)and (orientation:landscape){.mode-piano .piano-nav-btn{min-width:130px;min-height:58px}.mode-piano .piano-nav-btn.center{min-width:150px}.mode-piano .piano-minimap{width:min(800px,calc(100% - 64px))}.mode-chords .chord-pad{flex:0 0 140px}.mode-chords .chord-row-scroll{gap:12px}.mode-chords .chord-name{font-size:28px}.mode-chords .chord-roman{font-size:10px;letter-spacing:4px}}@media(min-width:900px){.mode-chords{align-items:center}.mode-chords .mode-zoom-rail{display:none}.mode-chords .chord-rows{width:min(960px,calc(100% - 60px));gap:4px}.mode-chords .chord-row-scroll{gap:10px;padding:0 4px}.mode-chords .chord-pad{flex:0 0 148px;border-radius:14px}.mode-chords .chord-row-label{padding:3px 8px 1px;font-size:8px;letter-spacing:6px}.mode-chords .chord-name{font-size:28px}.mode-chords .chord-roman{font-size:10px;margin-top:6px}.mode-chords .chord-key-row{padding:8px 24px 4px;gap:14px}.mode-chords .ks-btn{width:36px;height:30px;font-size:11px;border-radius:7px}.mode-chords .chord-key-selector{gap:5px}.mode-chords .chord-bottom-hint{display:none}}@media(min-width:1200px){.mode-chords .chord-rows{width:min(1100px,calc(100% - 100px))}.mode-chords .chord-pad{flex:0 0 160px}.mode-chords .chord-row-scroll{gap:12px}.mode-chords .chord-name{font-size:30px}.mode-chords .chord-roman{font-size:11px;letter-spacing:4px}.mode-chords .chord-row-label{font-size:9px;letter-spacing:6px;padding:4px 8px 1px}}