#loadingScreen{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;justify-content:center;align-items:center;background:radial-gradient(ellipse at center,#0d2a3f 0,#050d14 60%,#000 100%);transition:opacity .9s ease-in-out}#loadingScreen.fade-out{opacity:0;pointer-events:none}.ld-bar-track{height:3px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}.ld-bar-fill{height:100%;width:0%;border-radius:2px;background:linear-gradient(90deg,#00e5ff,#007eff);box-shadow:0 0 8px rgba(0,229,255,.6);transition:width .25s ease}.ld-bar-fill.done{background:linear-gradient(90deg,#0f8,#00e5ff);box-shadow:0 0 8px rgba(0,255,136,.5)}.ld-main-label{font-family:Quicksand,sans-serif;font-size:12px;font-weight:700;color:rgba(255,255,255,.45);letter-spacing:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.ld-detail-label{font-family:Quicksand,sans-serif;font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.4);letter-spacing:.4px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;min-height:13px;visibility:hidden}.ld-detail-label.show{visibility:visible}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes corePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}:root{--accent-white:#0088e0;--accent-black:#29a3ff;--anim-color:#0099ff;--piano-height:25vh;--ui-color:#15151e;--btn-color:#2a2a35;--bg-stage:#000000;--strike-line-color:#ffffff;--strike-line-thickness:3px;--strike-line-aura-height:20px;--strike-line-aura-blur:5px;--strike-line-shadow-height:8px;--strike-line-shadow-blur:4px;--strike-line-smoke-motion:2.8s;--black-key-height:60%;--piano-visibility:1;--key-glow-intensity:0.88;--key-glow-opacity:0.88;--key-glow-spread:1.75}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}body,html{width:100%;height:100%;overflow:hidden;background:#000;font-family:Quicksand,sans-serif;touch-action:none}#app{height:100%;display:flex;flex-direction:column;background:#000;position:relative;opacity:0;transition:opacity .8s ease-in-out}#app.fade-in{opacity:1}#logoToggle{position:absolute;top:12px;left:15px;z-index:2000;cursor:pointer;display:flex;align-items:center;background:rgba(0,0,0,.35);padding:6px 14px;border-radius:40px;border:1px solid rgba(255,255,255,.1)}#logoToggle:active{transform:scale(.96);background:rgba(0,0,0,.5)}.brand-text{font-weight:800;font-size:14px;letter-spacing:1px;background:linear-gradient(135deg,#fff,#00e5ff);-webkit-background-clip:text;background-clip:text;color:transparent}.top{height:60px;display:flex;align-items:center;padding:0 15px 0 130px;background:var(--ui-color);border-bottom:1px solid rgba(255,255,255,.1);z-index:1000;gap:15px;transition:all .3s cubic-bezier(.4, 0, .2, 1);flex-shrink:0;isolation:isolate;contain:layout paint style}#panel{flex:1;display:flex;align-items:center;gap:8px;overflow-x:auto;padding:5px 8px;scrollbar-width:none;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}#panel::-webkit-scrollbar{display:none}.btn{border:none;padding:0 18px;height:38px;line-height:38px;border-radius:12px;background:var(--btn-color);color:#fff;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer;border:1px solid rgba(255,255,255,.05);flex-shrink:0}.btn.active{background:linear-gradient(135deg,rgba(91,198,242,.92),rgba(127,226,255,.7))!important;border-color:rgba(157,235,255,.72)!important;color:#061117!important}.floating-panel{position:absolute;top:70px;display:none;padding:20px;background:var(--ui-color);border-radius:24px;border:1px solid rgba(255,255,255,.1);z-index:120;box-shadow:0 20px 50px rgba(0,0,0,.8);flex-direction:column;gap:18px;width:340px;left:50%;transform:translateX(-50%);max-height:80vh;overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain}.color-row{display:flex;flex-direction:column;gap:12px;padding:15px;background:rgba(255,255,255,.03);border-radius:15px;margin-bottom:8px}.floating-panel input[type=range]{touch-action:pan-y!important;accent-color:#78dcff;margin:9px 0;min-height:22px}.section-title{font-size:10px;color:rgba(255,255,255,.4);font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}.stage{position:relative;flex:1;overflow:hidden;background:#000;transition:background .3s;min-height:0;contain:layout paint size}.stage.has-custom-bg::after,.stage.has-custom-bg::before{opacity:0}canvas{will-change:transform;transform:translateZ(0);position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:20}#fxParticles{z-index:19}.stage.dust-front #fxParticles{z-index:21}#vizFallCanvas{z-index:20}#strikeLine{position:absolute;left:0;right:0;bottom:0;width:auto;height:var(--strike-line-thickness);background:var(--strike-line-color);opacity:1;pointer-events:none;z-index:25;border-radius:0;box-shadow:0 0 2px #fff,0 0 6px #fff,0 0 14px var(--strike-line-color),0 0 30px var(--strike-line-color),0 0 56px var(--strike-line-color),0 0 92px color-mix(in srgb,var(--strike-line-color) 52%,transparent);filter:brightness(1.35) saturate(1.28);overflow:visible}#strikeLine::before{content:'';position:absolute;left:-18%;right:-18%;bottom:var(--strike-line-thickness);height:var(--strike-line-aura-height,34px);pointer-events:none;z-index:-1;background:radial-gradient(ellipse 22% 150% at 50% 118%,var(--strike-line-smoke-a,rgba(0,229,255,.24)) 0,transparent 60%),radial-gradient(ellipse 17% 135% at 50% 124%,var(--strike-line-smoke-b,rgba(0,229,255,.16)) 0,transparent 58%),linear-gradient(to top,var(--strike-line-shadow-a,rgba(0,229,255,.16)) 0,var(--strike-line-shadow-b,rgba(0,229,255,.07)) 40%,transparent 88%);background-repeat:repeat-x,repeat-x,no-repeat;background-size:190px 100%,300px 100%,100% 100%;background-position:0 100%,0 100%,50% 100%;-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,1) 0%,rgba(0,0,0,.86) 42%,rgba(0,0,0,.28) 78%,transparent 100%);mask-image:linear-gradient(to top,rgba(0,0,0,1) 0%,rgba(0,0,0,.86) 42%,rgba(0,0,0,.28) 78%,transparent 100%);filter:blur(var(--strike-line-aura-blur, 8px));opacity:.5;animation:strikeLineWaveFlow var(--strike-line-smoke-motion,2.8s) linear infinite}body.strike-line-motion-off #strikeLine::after,body.strike-line-motion-off #strikeLine::before,body.strike-line-motion-off #strikeLineAuraSegments::after,body.strike-line-motion-off #strikeLineAuraSegments::before{animation:none!important}#strikeLine::after{content:'';position:absolute;left:-14%;right:-14%;bottom:var(--strike-line-thickness);height:calc(var(--strike-line-shadow-height,22px) * 1.25);pointer-events:none;z-index:-1;background:radial-gradient(ellipse 26% 130% at 50% 120%,var(--strike-line-shadow-a,rgba(0,229,255,.16)) 0,transparent 60%),linear-gradient(to top,var(--strike-line-shadow-b,rgba(0,229,255,.08)) 0,transparent 80%);background-repeat:repeat-x,no-repeat;background-size:240px 100%,100% 100%;background-position:0 100%,50% 100%;-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.45) 58%,transparent 100%);mask-image:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.45) 58%,transparent 100%);filter:blur(var(--strike-line-shadow-blur, 8px));opacity:.4;animation:strikeLineWaveFlowB var(--strike-line-smoke-motion,2.8s) linear infinite}body.strike-line-off #strikeLine{opacity:0!important}body.strike-line-off #strikeLineAuraSegments{display:none!important}body.strike-line-smoke-off #strikeLine::after,body.strike-line-smoke-off #strikeLine::before,html[data-graphic-quality=potato] #strikeLine::after,html[data-graphic-quality=potato] #strikeLine::before{display:none!important}#strikeLine.strike-line-hit{filter:brightness(1.55) saturate(1.35)}#strikeLineAuraSegments{position:absolute;left:0;right:0;bottom:0;height:0;pointer-events:none;z-index:24;display:none}body.strikeLine-multiColor #strikeLineAuraSegments{display:block}body.strikeLine-multiColor #strikeLine::after,body.strikeLine-multiColor #strikeLine::before{display:none!important}#strikeLineAuraSegments::before{content:'';position:absolute;left:-18%;right:-18%;bottom:var(--strike-line-thickness);height:var(--strike-line-aura-height,34px);pointer-events:none;z-index:-1;background:radial-gradient(ellipse 22% 150% at 50% 118%,var(--strike-line-smoke-a,rgba(0,229,255,.24)) 0,transparent 60%),radial-gradient(ellipse 17% 135% at 50% 124%,var(--strike-line-smoke-b,rgba(0,229,255,.16)) 0,transparent 58%),var(--strike-line-multi-tint-a,transparent);background-repeat:repeat-x,repeat-x,no-repeat;background-size:190px 100%,300px 100%,100% 100%;background-position:0 100%,0 100%,50% 100%;-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,1) 0%,rgba(0,0,0,.86) 42%,rgba(0,0,0,.28) 78%,transparent 100%);mask-image:linear-gradient(to top,rgba(0,0,0,1) 0%,rgba(0,0,0,.86) 42%,rgba(0,0,0,.28) 78%,transparent 100%);filter:blur(var(--strike-line-aura-blur, 8px));opacity:.5;animation:strikeLineWaveFlow var(--strike-line-smoke-motion,2.8s) linear infinite}#strikeLineAuraSegments::after{content:'';position:absolute;left:-14%;right:-14%;bottom:var(--strike-line-thickness);height:calc(var(--strike-line-shadow-height,22px) * 1.25);pointer-events:none;z-index:-1;background:radial-gradient(ellipse 26% 130% at 50% 120%,var(--strike-line-shadow-a,rgba(0,229,255,.16)) 0,transparent 60%),var(--strike-line-multi-tint-b,transparent);background-repeat:repeat-x,no-repeat;background-size:240px 100%,100% 100%;background-position:0 100%,50% 100%;-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.45) 58%,transparent 100%);mask-image:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.45) 58%,transparent 100%);filter:blur(var(--strike-line-shadow-blur, 8px));opacity:.4;animation:strikeLineWaveFlowB var(--strike-line-smoke-motion,2.8s) linear infinite}body.strike-line-smoke-off #strikeLineAuraSegments::after,body.strike-line-smoke-off #strikeLineAuraSegments::before,html[data-graphic-quality=potato] #strikeLineAuraSegments::after,html[data-graphic-quality=potato] #strikeLineAuraSegments::before{display:none!important}#strikeReactionLayer{position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;z-index:26;overflow:visible;contain:layout style}.strike-pulse{position:absolute;bottom:0;border-radius:50%;pointer-events:none;opacity:0;transform:translate(-50%,50%) scale(.3);transform-origin:center;will-change:transform,opacity;background:radial-gradient(circle,color-mix(in srgb,var(--strike-line-color) 92%,#fff) 0,var(--strike-line-color) 38%,transparent 72%)}.strike-pulse.playing{animation:strikePulseReact 420ms cubic-bezier(.22,.7,.25,1)}@keyframes strikePulseReact{0%{opacity:0;transform:translate(-50%,50%) scale(.25)}12%{opacity:.95;transform:translate(-50%,50%) scale(.7)}40%{opacity:.6;transform:translate(-50%,50%) scale(1.15)}100%{opacity:0;transform:translate(-50%,50%) scale(1.7)}}body.strike-line-off #strikeReactionLayer{display:none}@keyframes strikeLineWaveFlow{from{background-position:0 100%,0 100%,50% 100%}to{background-position:190px 100%,300px 100%,50% 100%}}@keyframes strikeLineWaveFlowB{from{background-position:0 100%,50% 100%}to{background-position:240px 100%,50% 100%}}@media (pointer:coarse){#pianoWrap::before{display:none!important}}@media (pointer:coarse){#strikeLine::before,#strikeLineAuraSegments::before{filter:blur(4px)!important}#strikeLine::after,#strikeLineAuraSegments::after{filter:blur(3px)!important}#strikeLine{box-shadow:0 0 8px var(--strike-line-color),0 0 18px rgba(0,229,255,.35)!important}#piano .black{box-shadow:none!important}body.input-burst-mode #strikeLine::after,body.input-burst-mode #strikeLine::before,body.input-burst-mode #strikeLineAuraSegments::after,body.input-burst-mode #strikeLineAuraSegments::before{animation-play-state:paused!important}}body.idle-no-notes #strikeLine::after,body.idle-no-notes #strikeLine::before,body.idle-no-notes #strikeLineAuraSegments::after,body.idle-no-notes #strikeLineAuraSegments::before{animation-play-state:running!important}.floating-panel{contain:layout paint style}#chordDisplay{contain:layout paint}#perfHud{contain:layout paint style}#pianoWrap{height:var(--piano-height);width:100%;position:relative;display:flex;background:#000;overflow:hidden;flex-shrink:0;transition:height .16s ease;contain:layout paint;transform:translateZ(0);-webkit-transform:translateZ(0);touch-action:none}body.piano-height-dragging #pianoWrap{transition:none!important}#pianoWrap::before{content:'';position:absolute;top:-14px;left:-4px;right:-4px;height:34px;pointer-events:none;z-index:7;background:linear-gradient(to bottom,var(--strike-line-shadow-a,rgba(0,229,255,.16)) 0,var(--strike-line-shadow-b,rgba(0,229,255,.075)) 52%,transparent 100%);filter:blur(8px);opacity:.78}body.strike-line-smoke-off #pianoWrap::before,html[data-graphic-quality=potato] #pianoWrap::before{display:none!important}#pianoViewport{position:relative;height:100%;width:100%;overflow:hidden;background:0 0}#piano{position:absolute;height:100%;left:0;top:0;display:flex;background:linear-gradient(180deg,var(--piano-white-top,#fff) 0,var(--piano-white-mid,#f7f8fa) 52%,var(--piano-white-bottom,#e9ecef) 100%);opacity:var(--piano-visibility, 1);will-change:transform;transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.white{position:absolute;height:100%;background:#fff;border:none!important;border-radius:0 0 2px 2px;z-index:1;flex-shrink:0;contain:layout paint style}.white.active{background:var(--accent-white)!important}.key-label{position:absolute;bottom:6%;left:0;right:0;text-align:center;font-family:Quicksand,sans-serif;font-weight:700;color:rgba(0,0,0,.55);pointer-events:none;z-index:3;line-height:1.1;white-space:nowrap;overflow:hidden}.white.active .key-label{color:rgba(20,24,30,.54)}.black{position:absolute;height:var(--black-key-height,60%);background:#1a1a1a;border:none!important;border-radius:0 0 2px 2px;z-index:5;box-shadow:2px 3px 6px rgba(0,0,0,.4);flex-shrink:0;contain:layout style}.black.active{background:var(--accent-black)!important}.black-label{position:absolute;bottom:7%;left:0;right:0;text-align:center;font-family:Quicksand,sans-serif;font-weight:700;color:rgba(255,255,255,.55);pointer-events:none;z-index:6;line-height:1.1;white-space:nowrap;overflow:hidden}.black.active .black-label{color:rgba(255,255,255,.64)}.qwerty-ctrl-label{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0;line-height:.86}.qwerty-ctrl-label .ctrl-mark{font-size:.72em;line-height:.75;transform:translateY(1px)}.qwerty-ctrl-label .ctrl-key{font-size:1em;line-height:.9}#swipeStrip{position:absolute;top:60px;bottom:var(--piano-height);left:0;width:100%;background:0 0;z-index:100;touch-action:none;pointer-events:all}body.hide-ui .floating-panel,body.hide-ui .top{opacity:0!important;visibility:hidden!important;pointer-events:none!important}body.hide-ui #logoToggle{opacity:.55!important}.toggle-switch{display:flex;align-items:center;gap:12px}.toggle-track{width:48px;height:24px;background:#2a2a35;border-radius:30px;cursor:pointer;position:relative;transition:.25s;border:1px solid rgba(255,255,255,.1)}.toggle-track.active{background:rgba(91,198,242,.82)}.toggle-thumb{width:20px;height:20px;background:#fff;border-radius:50%;position:absolute;top:2px;left:3px;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.3)}.toggle-track.active .toggle-thumb{left:25px}.label-selector-vertical{display:flex;flex-direction:column;gap:8px;margin-top:5px}.label-option-vertical{display:flex;align-items:center;padding:10px 12px;background:rgba(0,0,0,.3);border-radius:12px;cursor:pointer;transition:.2s;gap:0;justify-content:center}.label-option-vertical.active{background:linear-gradient(135deg,rgba(91,198,242,.92),rgba(127,226,255,.7))}.label-option-vertical .label-text{font-size:13px;font-weight:600;color:#fff}@keyframes modalPop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.panel-title{font-size:11px;color:rgba(255,255,255,.5);font-weight:800;text-transform:uppercase;letter-spacing:1px}.panel-close{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.6);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;flex-shrink:0}.panel-close:active{background:rgba(255,255,255,.18);transform:scale(.92)}#customBgLayer{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;pointer-events:none;z-index:1;opacity:0;transition:opacity .3s}#customBgLayer.active{opacity:var(--custom-bg-opacity, 1)}#customBgLayer{filter:blur(var(--custom-bg-blur, 0px));transform:scale(var(--custom-bg-scale,1))}#customBgDimLayer{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;background:rgba(0,0,0,var(--custom-bg-dim,0));transition:opacity .2s}.stage.has-custom-bg #customBgDimLayer{opacity:1}.stage.has-custom-bg{background:0 0!important}#octaveLinesLayer{position:absolute;inset:0;pointer-events:none;display:none;overflow:hidden;z-index:1;will-change:transform}body.octave-lines-on #octaveLinesLayer{display:block}.octave-line{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.16);pointer-events:none}#chordDisplay{position:absolute;top:72px;left:15px;z-index:500;pointer-events:none;display:flex;flex-direction:column;gap:4px;min-width:120px}.chord-name{font-family:Quicksand,sans-serif;font-weight:800;font-size:22px;color:#fff;letter-spacing:.5px;line-height:1.1;text-shadow:0 2px 12px rgba(0,0,0,.8),0 0 30px rgba(0,229,255,.3);opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease;white-space:nowrap}.chord-name.show{opacity:1;transform:translateY(0)}.chord-name.primary{font-size:calc(26px * var(--chord-scale, 1));color:#00e5ff}.chord-name.secondary{font-size:calc(16px * var(--chord-scale, 1));color:rgba(255,255,255,.55)}:root{--accent-white:#0088e0;--accent-black:#29a3ff;--anim-color:#0099ff;--ui-color:rgba(31,34,40,0.72);--btn-color:rgba(255,255,255,0.075);--bg-stage:#101217;--glass-bg:rgba(38,41,48,0.62);--glass-bg-strong:rgba(45,49,58,0.78);--glass-border:rgba(255,255,255,0.145);--glass-border-strong:rgba(255,255,255,0.24);--glass-shadow:0 22px 60px rgba(0,0,0,0.34);--text-main:#f3f7fb;--text-muted:rgba(232,240,248,0.62)}body,html{background:#090b0f;font-family:'Plus Jakarta Sans',Nunito,sans-serif}body,button,input,select,textarea{font-family:'Plus Jakarta Sans',Nunito,sans-serif!important}#app{background:linear-gradient(180deg,#0c0f14 0,#11151c 55%,#080a0d 100%)}#loadingScreen{background:radial-gradient(circle at 50% 38%,rgba(120,220,255,.12),transparent 34%),linear-gradient(180deg,#0b0d11 0,#141820 52%,#07090d 100%)!important;gap:0}.ld-card{width:min(340px,86vw);padding:30px 28px 28px;border-radius:30px;background:rgba(39,43,51,.64);border:1px solid rgba(255,255,255,.14);box-shadow:0 28px 80px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08);display:flex;flex-direction:column;align-items:center}.ld-logo{font-family:Nunito,'Plus Jakarta Sans',sans-serif!important;font-size:30px;letter-spacing:3px;margin:0 0 16px;filter:none;background:linear-gradient(135deg,#fff 0,#aeb9c6 52%,#78dcff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.ld-main-label{color:rgba(244,248,252,.74);font-size:12px;letter-spacing:.9px;font-weight:800;text-transform:uppercase;animation:none;margin-bottom:4px}.ld-detail-label{margin-bottom:16px}.ld-single-track{width:100%;height:7px;background:rgba(255,255,255,.1);border-radius:999px;box-shadow:inset 0 1px 2px rgba(0,0,0,.28)}.ld-bar-fill{background:linear-gradient(90deg,#5ccfff,#8be6ff)!important;box-shadow:0 0 18px rgba(120,220,255,.32);border-radius:999px}.ld-bar-fill.done{background:linear-gradient(90deg,#77e0ff,#c6f5ff)!important}#logoToggle{top:12px;left:14px;padding:8px 14px;background:rgba(38,42,50,.72);border:1px solid rgba(255,255,255,.16);box-shadow:0 4px 16px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08);isolation:isolate}.brand-text{font-family:Nunito,'Plus Jakarta Sans',sans-serif!important;font-size:14px;letter-spacing:1.2px;background:linear-gradient(135deg,#fff,#b9c4d0 55%,#78dcff);-webkit-background-clip:text;background-clip:text;color:transparent}.top{height:68px;margin:10px 12px 0;padding:0 14px 0 132px;border-radius:28px;background:rgba(34,37,44,.66);border:1px solid rgba(255,255,255,.13);border-bottom-color:rgba(255,255,255,.17);box-shadow:0 8px 20px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.075);isolation:isolate;contain:layout paint style}#panel{gap:8px}.btn{border-radius:999px;background:rgba(255,255,255,.075);color:rgba(245,248,252,.88);border:1px solid rgba(255,255,255,.12);box-shadow:0 4px 12px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.06);font-size:13px;font-weight:800;height:38px;line-height:38px;padding:0 18px;flex-shrink:0}.btn:active:active{transform:scale(.96)}.btn.active,.shape-choice.active{background:linear-gradient(135deg,rgba(91,198,242,.92),rgba(127,226,255,.7))!important;border-color:rgba(157,235,255,.72)!important;color:#061117!important;box-shadow:0 12px 28px rgba(91,198,242,.24),inset 0 1px 0 rgba(255,255,255,.22)!important}.floating-panel{top:86px;background:rgba(35,38,45,.82);border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 36px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.075);border-radius:30px;isolation:isolate}.color-row,.label-option-vertical{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.085);box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}.panel-title,.section-title{color:rgba(232,240,248,.58)}.panel-close{background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.12);color:rgba(245,248,252,.72)}.stage{background:#000!important}#pianoWrap{background:linear-gradient(180deg,#0b0d10 0,#050608 100%);box-shadow:0 -14px 40px rgba(0,0,0,.28)}.chord-name{text-shadow:0 14px 34px rgba(0,0,0,.5)}.chord-name.primary{color:#78dcff}.toggle-track{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.12)}.toggle-track.active{background:rgba(91,198,242,.82)}.shape-setting-block{margin-bottom:12px}.shape-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.shape-choice{padding:9px 8px;min-width:0;text-align:center}#sfLoadingOverlay{position:fixed;inset:0;z-index:99998;display:none;align-items:center;justify-content:center;flex-direction:column;gap:18px;font-family:Quicksand,sans-serif;background:rgba(5,7,10,.86);pointer-events:all}#sfLoadingOverlay.show{display:flex!important}#sfLoadingOverlay .sf-load-spinner{display:block!important}.sf-load-spinner{position:relative;width:58px;height:58px}.sf-load-spinner-ring{position:absolute;inset:0;border-radius:50%;border:3px solid transparent}.sf-load-spinner-ring-1{border-top-color:#00e5ff;border-left-color:rgba(0,229,255,.3);animation:spin .9s linear infinite}.sf-load-spinner-ring-2{inset:10px;border-width:2px;border-top-color:rgba(0,229,255,.5);animation:spin .6s linear infinite reverse}.sf-load-spinner-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;background:#00e5ff;border-radius:50%;box-shadow:0 0 12px #00e5ff;animation:corePulse 1.2s ease-in-out infinite}.sf-load-title{color:rgba(245,248,252,.92);font-size:15px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;text-align:center;margin-bottom:6px}.sf-load-name{color:rgba(0,229,255,.75);font-size:12px;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}.sf-load-progress{width:240px}.sf-load-bar-track{height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}.sf-load-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,#5ccfff,#8be6ff);border-radius:2px;box-shadow:0 0 18px rgba(120,220,255,.38);transition:width .2s ease}.sf-load-bar-fill.done{background:linear-gradient(90deg,#0f8,#00e5ff)!important;box-shadow:0 0 18px rgba(0,255,136,.32)!important}.sf-load-stats{display:flex;justify-content:space-between;align-items:baseline;margin-top:7px;gap:10px}.sf-load-bytes{color:rgba(255,255,255,.4);font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sf-load-pct{color:rgba(120,220,255,.9);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto}.sf-load-cancel-btn{padding:9px 22px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:rgba(255,255,255,.65);font-family:Quicksand,sans-serif;font-size:12px;font-weight:700;letter-spacing:.3px;cursor:pointer;transition:background 120ms ease,border-color 120ms ease,color 120ms ease}.sf-load-cancel-btn:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.9)}.sf-load-cancel-btn:active{transform:translateY(1px)}#bootSfChip{position:fixed;left:50%;bottom:calc(var(--piano-height,25vh) + 18px);transform:translateX(-50%) translateY(12px);z-index:1500;pointer-events:none;overflow:hidden;display:flex;align-items:center;gap:11px;padding:9px 18px 11px;border-radius:14px;background:linear-gradient(135deg,rgba(18,22,30,.96),rgba(10,14,20,.96));border:1px solid rgba(0,229,255,.28);box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 22px rgba(0,229,255,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:Quicksand,sans-serif;opacity:0;visibility:hidden;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .4s ease,visibility .45s,border-color .45s ease,box-shadow .45s ease}#bootSfChip.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}.bsc-spinner{position:relative;width:20px;height:20px;flex:0 0 auto}.bsc-spinner i{position:absolute;border-radius:50%;border:2px solid transparent}.bsc-spinner i:first-child{inset:0;border-top-color:#00e5ff;border-left-color:rgba(0,229,255,.3);animation:spin .9s linear infinite}.bsc-spinner i:nth-child(2){inset:5px;border-top-color:rgba(0,229,255,.55);animation:spin .6s linear infinite reverse}.bsc-spinner b{position:absolute;top:50%;left:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#00e5ff;box-shadow:0 0 8px #00e5ff;animation:corePulse 1.2s ease-in-out infinite}.bsc-text{font-size:12.5px;font-weight:800;letter-spacing:.4px;white-space:nowrap;background:linear-gradient(135deg,#fff,#7fe2ff);-webkit-background-clip:text;background-clip:text;color:transparent}.bsc-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:rgba(0,229,255,.1)}.bsc-bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#00e5ff,#007eff);box-shadow:0 0 8px rgba(0,229,255,.6);transition:width .25s ease}#bootSfChip.ready{border-color:rgba(0,255,136,.34);box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 22px rgba(0,255,136,.14)}#bootSfChip.ready .bsc-spinner b,#bootSfChip.ready .bsc-spinner i{display:none}#bootSfChip.ready .bsc-spinner::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:#0f8;text-shadow:0 0 8px rgba(0,255,136,.6)}#bootSfChip.ready .bsc-text{background:linear-gradient(135deg,#fff,#7dffbe);-webkit-background-clip:text;background-clip:text}#bootSfChip.ready .bsc-bar i{width:100%!important;background:linear-gradient(90deg,#0f8,#00b85f);box-shadow:0 0 8px rgba(0,255,136,.5)}#loadingScreen{background:rgba(9,11,15,.85)!important}#loadingScreen::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 24% 18%,rgba(255,255,255,.08),transparent 28%),radial-gradient(circle at 74% 32%,rgba(120,220,255,.1),transparent 30%),linear-gradient(180deg,rgba(28,31,38,.72),rgba(8,10,14,.86))}.ld-card{position:relative;z-index:1;padding:24px 26px}.ld-main-label{margin-bottom:15px}#logoToggle{min-height:48px;gap:10px;padding:5px 14px 5px 6px}.brand-icon{width:40px;height:40px;border-radius:999px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 24px rgba(0,0,0,.18);flex:0 0 auto}.brand-icon img{width:116%;height:116%;object-fit:cover;transform:translateY(2%);display:block;pointer-events:none}.top{padding-left:172px}@media (max-width:700px){.top{margin:8px 8px 0;padding-left:158px;border-radius:24px}#logoToggle{left:10px}.shape-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}:root{--bg-stage:#090d12;--piano-white-top:#ffffff;--piano-white-mid:#fdfdfe;--piano-white-bottom:#f1f3f5;--piano-black-top:#2d333d;--piano-black-mid:#151a22;--piano-black-bottom:#040506;--piano-white-active-top:#eafaff;--piano-white-active-mid:#c9f2ff;--piano-white-active-bottom:#91dcf5;--piano-black-active-top:#bfefff;--piano-black-active-mid:#70d8ff;--piano-black-active-bottom:#34a8d8}#loadingScreen::after{display:none!important}.ld-card{width:min(300px,80vw)!important;padding:0!important;background:0 0!important;border:0!important;box-shadow:none!important}.ld-main-label{margin:0 0 4px!important;color:rgba(247,250,253,.86)!important;text-shadow:0 0 18px rgba(120,220,255,.16),0 8px 28px rgba(0,0,0,.52)}.ld-detail-label{margin:0 0 14px!important;color:rgba(247,250,253,.5)!important}.ld-single-track{height:6px!important;background:rgba(255,255,255,.115)!important;border:1px solid rgba(255,255,255,.075);box-shadow:inset 0 1px 2px rgba(0,0,0,.38),0 10px 26px rgba(0,0,0,.22)!important}.stage{background:#000!important}.stage::after,.stage::before{display:none!important}#pianoWrap{background:linear-gradient(180deg,#090a0c 0,#050607 100%)!important;box-shadow:0 -10px 28px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.05)!important}#piano .white,.white{background:linear-gradient(180deg,var(--piano-white-top) 0,var(--piano-white-mid) 52%,var(--piano-white-bottom) 100%)!important;background-color:var(--piano-white-mid)!important;background-image:linear-gradient(180deg,var(--piano-white-top) 0,var(--piano-white-mid) 52%,var(--piano-white-bottom) 100%)!important;border-radius:0 0 2px 2px!important;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(6,17,31,.1)!important}#piano .white.active,.white.active{background:var(--accent-white)!important;background-color:var(--accent-white)!important;background-image:none!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 0 12px var(--accent-white)!important}#piano .black,.black{background:linear-gradient(180deg,var(--piano-black-top) 0,var(--piano-black-mid) 55%,var(--piano-black-bottom) 100%)!important;background-color:var(--piano-black-mid)!important;background-image:linear-gradient(180deg,var(--piano-black-top) 0,var(--piano-black-mid) 55%,var(--piano-black-bottom) 100%)!important;border-radius:0 0 2px 2px!important;box-shadow:2px 3px 6px rgba(0,0,0,.4)!important}#piano .black.active,.black.active{background:var(--accent-black)!important;background-color:var(--accent-black)!important;background-image:none!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 12px var(--accent-black)!important}body.key-glow-on #piano .white.active,body.key-glow-on #piano>.white.active{background:var(--accent-white)!important;background-color:var(--accent-white)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 0 calc(10px * var(--key-glow-spread,1)) var(--strike-line-color),0 0 calc(24px * var(--key-glow-spread,1)) var(--strike-line-color),0 0 calc(44px * var(--key-glow-spread,1)) var(--strike-line-color)!important;filter:brightness(calc(1 + .18 * var(--key-glow-intensity, .5)))!important}body.key-glow-on #piano .black.active,body.key-glow-on #piano>.black.active{background:var(--accent-black)!important;background-color:var(--accent-black)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 calc(10px * var(--key-glow-spread,1)) var(--strike-line-color),0 0 calc(24px * var(--key-glow-spread,1)) var(--strike-line-color),0 0 calc(44px * var(--key-glow-spread,1)) var(--strike-line-color)!important;filter:brightness(calc(1 + .18 * var(--key-glow-intensity, .5)))!important}body.key-glow-on.perf-lite #piano .black.active,body.key-glow-on.perf-lite #piano .white.active,body.key-glow-on.perf-lite #piano>.black.active,body.key-glow-on.perf-lite #piano>.white.active{filter:none!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 0 calc(16px * var(--key-glow-spread,1)) var(--strike-line-color)!important}.key-label{color:rgba(20,24,30,.54)!important}.black-label{color:rgba(255,255,255,.64)!important}.floating-panel{width:min(310px,calc(100vw - 28px))!important;padding:12px!important;gap:9px!important;max-height:66vh!important;border-radius:24px!important}#settingsPanel{width:min(330px,calc(100vw - 28px))!important}#colorPanel{width:min(320px,calc(100vw - 28px))!important}.color-row,.label-option-vertical,.perf-setting-block{padding:10px 11px!important;gap:8px!important;border-radius:16px!important}.label-selector-vertical{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px!important}.label-option-vertical{justify-content:center}.label-option-vertical .label-text{font-size:10px!important;font-weight:800!important;line-height:1.15!important;text-align:center!important}.perf-setting-block{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);margin-bottom:8px}.perf-hud{position:fixed;top:72px;left:14px;z-index:620;display:none;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(27,31,38,.62);border:1px solid rgba(255,255,255,.13);box-shadow:0 10px 26px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06);color:rgba(242,248,252,.84);font-size:10px;font-weight:850;letter-spacing:.2px;pointer-events:none}.perf-hud.show{display:flex}.perf-fps{color:rgba(242,248,252,.88)}#chordDisplay{top:54px!important;left:15px!important}@media (max-width:700px){.floating-panel{max-height:62vh!important}#chordDisplay{top:50px!important}.perf-hud{top:68px;left:12px}}#logoToggle{top:calc(7px + env(safe-area-inset-top,0px))!important;left:calc(8px + env(safe-area-inset-left,0px))!important;height:clamp(48px,6vw,56px)!important;min-height:clamp(48px,6vw,56px)!important;gap:7px!important;padding:0 11px 0 5px!important;border-radius:22px!important}.brand-icon{width:clamp(30px,4vw,36px)!important;height:clamp(30px,4vw,36px)!important}.brand-text{font-size:clamp(12px, 1.45vw, 13px)!important;letter-spacing:.75px!important}.top{height:clamp(48px,6vw,56px)!important;min-height:clamp(48px,6vw,56px)!important;margin:calc(7px + env(safe-area-inset-top,0px)) calc(8px + env(safe-area-inset-right,0px)) 0 calc(6px + env(safe-area-inset-left,0px))!important;padding:0 10px 0 clamp(128px,16.4vw,148px)!important;border-radius:22px!important;gap:8px!important;box-shadow:0 12px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.07)!important}#panel{gap:6px!important;padding:3px!important;min-width:0!important;overscroll-behavior-x:contain;touch-action:pan-x}.btn{flex-shrink:0!important;min-height:36px!important}#panel>div[style*=padding-left]{padding-left:4px!important;gap:4px!important}#panel>div[style*=padding-left] .btn{padding:7px 9px!important;min-width:34px!important}#tVal{font-size:10px!important;min-width:12px!important}#tDown,#tUp{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;aspect-ratio:1/1!important;padding:0!important;border-radius:50%!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;position:relative!important;font-size:0!important;line-height:0!important;flex-shrink:0!important}#tDown::before,#tUp::after,#tUp::before{content:''!important;position:absolute!important;top:50%!important;left:50%!important;background:currentColor!important;border-radius:1.5px!important;transform:translate(-50%,-50%)!important;pointer-events:none!important}#tDown::before,#tUp::before{width:12px!important;height:2.2px!important}#tUp::after{width:2.2px!important;height:12px!important}.floating-panel{top:calc(64px + env(safe-area-inset-top,0px))!important;max-height:calc(100dvh - 82px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;overscroll-behavior:contain}#swipeStrip{top:calc(58px + env(safe-area-inset-top,0px))!important}.perf-hud{top:calc(62px + env(safe-area-inset-top,0px))!important}#chordDisplay{top:calc(46px + env(safe-area-inset-top,0px))!important}@media (max-width:700px){#logoToggle{top:calc(6px + env(safe-area-inset-top,0px))!important;left:calc(6px + env(safe-area-inset-left,0px))!important;height:46px!important;min-height:46px!important;padding-right:10px!important}.brand-icon{width:29px!important;height:29px!important}.brand-text{font-size:11.5px!important}.top{height:46px!important;min-height:46px!important;margin:calc(6px + env(safe-area-inset-top,0px)) calc(6px + env(safe-area-inset-right,0px)) 0 calc(6px + env(safe-area-inset-left,0px))!important;padding-left:118px!important;padding-right:8px!important;border-radius:20px!important}#panel{gap:5px!important}.btn{flex-shrink:0!important;min-height:36px!important}.floating-panel{top:calc(60px + env(safe-area-inset-top,0px))!important;max-height:calc(100dvh - 76px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important}#swipeStrip{top:calc(54px + env(safe-area-inset-top,0px))!important}.perf-hud{top:calc(58px + env(safe-area-inset-top,0px))!important}#chordDisplay{top:calc(42px + env(safe-area-inset-top,0px))!important}}.compact-color-panel{width:min(326px,calc(100vw - 28px))!important}.compact-color-row{padding:13px 12px!important}.color-group-title{margin:10px 2px 4px;padding:0 2px;color:rgba(255,255,255,.46);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.color-group-title:first-of-type{margin-top:2px}#colorPanel .color-row{margin-bottom:7px}.anim-style-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.anim-style-grid .btn{width:100%;text-align:center}.visual-hub{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.visual-hub .visual-open-btn:last-child{grid-column:1/-1}.visual-hub.active{display:grid}.visual-open-btn{min-height:58px!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;padding:10px 12px!important;border-radius:18px!important;text-align:left!important;gap:4px}.visual-open-btn{font-size:13px!important;font-weight:900!important;line-height:1!important}.visual-subpage{display:none}.visual-subpage.active{display:block}.visual-back-btn{width:100%;margin-bottom:9px;justify-content:flex-start!important}.sf-tab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:10px}.sf-tab{width:100%;padding:0 8px!important;font-size:11px!important}.sf-page{display:none}.sf-page.active{display:block}.sf-effect-stack{display:flex;flex-direction:column;gap:9px}.sf-effect-card{padding:11px;border-radius:16px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.085);box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}.sf-effect-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:8px 0 6px;color:#fff;font-size:11px;font-weight:800}.sf-effect-head:first-child{margin-top:0}.sf-effect-head span:last-child{color:#78dcff;font-size:12px}.sf-effect-card input[type=range]{width:100%;accent-color:#78dcff}.sf-current-card{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 10px;margin-bottom:10px;border-radius:16px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.085);box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}.sf-current-label{color:rgba(232,240,248,.58);font-size:10px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.sf-current-value{color:#78dcff;font-size:12px;font-weight:900;text-align:right}.sf-category{border-radius:16px;background:rgba(255,255,255,.045);box-shadow:0 0 0 1px rgba(255,255,255,.1);margin-bottom:9px;overflow:hidden}.sf-category:has(.sf-option.active){box-shadow:0 0 0 1px rgba(120,220,255,.35)}.sf-category summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;color:rgba(245,248,252,.88);font-size:12px;font-weight:900;cursor:pointer}.sf-category summary::-webkit-details-marker{display:none}.sf-category summary::after{content:'▾';color:rgba(120,220,255,.92);font-size:12px;transition:transform .15s ease}.sf-category:not([open]) summary::after{transform:rotate(-90deg)}.sf-category-body{display:flex;flex-direction:column;gap:8px;padding:0 10px 10px}#metronomePanel{width:min(318px,calc(100vw - 28px))!important;padding:13px!important;gap:10px!important}#metronomePanel .panel-header{margin-bottom:0}#metronomePanel .panel-title{font-size:11px;color:rgba(244,248,252,.72)}.metro-card{padding:12px!important;border-radius:18px!important;background:rgba(255,255,255,.052)!important}.metro-bpm-display{display:grid;grid-template-columns:1fr;gap:10px;padding:2px 0 0}.metro-bpm-center{display:flex;align-items:flex-end;justify-content:center;gap:8px;padding:4px 0 0}.metro-bpm-num{font-size:54px;font-weight:900;color:#fff;font-family:Quicksand,sans-serif;line-height:.92;letter-spacing:-2px;min-width:96px;text-align:center;font-variant-numeric:tabular-nums}.metro-bpm-label{font-size:10px;color:rgba(255,255,255,.44);font-weight:900;text-transform:uppercase;letter-spacing:1px;padding-bottom:7px}.metro-bpm-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.metro-bpm-btn{width:100%;height:34px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.072);color:rgba(255,255,255,.84);font-size:12px;font-weight:900;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-family:Quicksand,sans-serif;flex-shrink:0}.metro-bpm-btn:active{transform:scale(.94);background:rgba(255,255,255,.14)}.metro-bpm-slider{width:100%;margin:8px 0 4px;accent-color:#78dcff}.metro-beat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:4px 0 0}.metro-beat-btn,.metro-sound-btn{min-height:34px;padding:0 6px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);color:rgba(255,255,255,.72);font-size:11px;font-weight:900;cursor:pointer;text-align:center;transition:.12s;font-family:Quicksand,sans-serif;display:inline-flex;align-items:center;justify-content:center;line-height:1}.metro-beat-btn.active,.metro-sound-btn.active{background:linear-gradient(135deg,rgba(91,198,242,.92),rgba(127,226,255,.7));border-color:rgba(157,235,255,.72);color:#061117}.metro-beat-btn:active,.metro-sound-btn:active{transform:scale(.94)}.metro-sound-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin:4px 0 0}.metro-start-btn{width:100%;min-height:42px;padding:0;border-radius:16px;border:1px solid rgba(157,235,255,.44);background:linear-gradient(135deg,#147fa6,#78dcff);color:#061117;font-size:13px;font-weight:900;cursor:pointer;font-family:Quicksand,sans-serif;letter-spacing:.3px;box-shadow:0 10px 24px rgba(120,220,255,.2),inset 0 1px 0 rgba(255,255,255,.22);transition:.12s;display:inline-flex;align-items:center;justify-content:center}.metro-start-btn:active{transform:scale(.98)}.metro-start-btn.running{background:linear-gradient(135deg,#d85b45,#ff9a72);border-color:rgba(255,160,130,.52);color:#170604;box-shadow:0 10px 24px rgba(255,112,80,.18),inset 0 1px 0 rgba(255,255,255,.22)}.metro-dots{display:flex;gap:8px;justify-content:center;padding:8px 0 0}.metro-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16);transition:background .06s,transform .06s,box-shadow .06s}.metro-dot.accent{background:rgba(255,255,255,.28)}.metro-dot.beat{background:#78dcff!important;transform:scale(1.55);box-shadow:0 0 9px rgba(120,220,255,.76)}.metro-dot.accent.beat{background:#fff1c7!important;box-shadow:0 0 10px rgba(255,241,199,.78)}#metroBtn.active{background:linear-gradient(135deg,rgba(91,198,242,.92),rgba(127,226,255,.7))!important;border-color:rgba(157,235,255,.72)!important;color:#061117!important}.graphic-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:5px}.graphic-btn{padding:9px 0;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);font-size:12px;font-weight:800;cursor:pointer;text-align:center;transition:.15s;font-family:Quicksand,sans-serif}.graphic-btn.active{background:linear-gradient(135deg,rgba(91,198,242,.92),rgba(127,226,255,.7));border-color:rgba(157,235,255,.72);color:#061117}.graphic-btn:active{transform:scale(.93)}#fsBtn{border:none;padding:0 14px;height:38px;line-height:38px;border-radius:999px;background:rgba(255,255,255,.075);color:rgba(245,248,252,.88);font-size:13px;font-weight:800;white-space:nowrap;cursor:pointer;transition:.2s;border:1px solid rgba(255,255,255,.12);flex-shrink:0;box-shadow:0 8px 22px rgba(0,0,0,.16)}#fsBtn:active{transform:scale(.96)}#fsBtn.fs-hidden,body.papiano-fullscreen #fsBtn,html.papiano-fullscreen #fsBtn{display:none!important}#fsBtn,.ac-btn,.acc-logout-btn,.acc-save-btn,.btn,.label-option-vertical,.panel-close,.shape-choice{display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;text-align:center!important}#fsBtn,.btn{padding-top:0!important;padding-bottom:0!important}.black-label,.key-label{display:flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;transform:none!important}@media (min-width:900px) and (pointer:fine){#app{background:radial-gradient(circle at 18% 10%,rgba(120,220,255,.1),transparent 24%),radial-gradient(circle at 78% 14%,rgba(160,120,255,.075),transparent 28%),linear-gradient(180deg,#080b10 0,#11161e 48%,#050608 100%)}#logoToggle{top:18px!important;left:22px!important;min-height:48px!important;padding:6px 16px 6px 7px!important;border-radius:24px!important}.brand-icon{width:38px!important;height:38px!important}.brand-text{font-size:13px!important;letter-spacing:1px!important}.top{width:min(1180px,calc(100vw - 44px))!important;height:64px!important;min-height:64px!important;margin:16px auto 0!important;padding:0 18px 0 184px!important;border-radius:28px!important;gap:12px!important}#panel{justify-content:flex-start!important;gap:9px!important;padding:5px 8px!important;overflow-x:auto!important}#fsBtn,.btn{min-height:40px!important;height:40px!important;padding-left:18px!important;padding-right:18px!important;font-size:13px!important}.stage{margin:12px auto 0!important;width:min(1180px,calc(100vw - 44px))!important;border-radius:30px 30px 0 0!important;border:1px solid rgba(255,255,255,.07)!important;border-bottom:0!important;box-shadow:0 18px 70px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.045)!important}#pianoWrap{width:min(1180px,calc(100vw - 44px))!important;height:var(--piano-height)!important;margin:0 auto 18px!important;border-radius:0 0 26px 26px!important;border:1px solid rgba(255,255,255,.07)!important;border-top:0!important;overflow:hidden!important}.floating-panel{top:96px!important;width:min(460px,calc(100vw - 48px))!important;max-height:calc(100vh - 132px)!important;padding:16px!important;gap:12px!important;border-radius:28px!important}#colorPanel,#metronomePanel,#settingsPanel,#sfPanel{width:min(500px,calc(100vw - 48px))!important}.color-row,.metro-card,.perf-setting-block,.sf-effect-card{padding:13px 14px!important;border-radius:18px!important}.anim-style-grid,.graphic-grid,.shape-choice-grid{gap:8px!important}.label-selector-vertical{grid-template-columns:repeat(3,minmax(0,1fr))!important}#swipeStrip{top:92px!important;bottom:calc(var(--piano-height) + 18px)!important;width:min(1180px,calc(100vw - 44px))!important;left:50%!important;transform:translateX(-50%)!important}#chordDisplay{top:96px!important;left:calc((100vw - min(1180px,calc(100vw - 44px)))/ 2 + 22px)!important}.perf-hud{top:98px!important;left:calc((100vw - min(1180px,calc(100vw - 44px)))/ 2 + 20px)!important}}.settings-hub-panel{width:min(520px,calc(100vw - 14px))!important}.settings-hub{display:flex;flex-direction:column;gap:11px}.settings-nav-vertical{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding-bottom:11px;border-bottom:1px solid rgba(255,255,255,.16)}.settings-cat-btn{width:100%;justify-content:center!important;padding:0 8px!important;min-width:0!important;font-size:10.5px!important;letter-spacing:-.1px}.settings-cat-btn.active{background:linear-gradient(135deg,rgba(120,220,255,.92),rgba(157,235,255,.68))!important;color:#061117!important;border-color:rgba(185,244,255,.76)!important}.settings-content-wrap{min-height:180px;padding-top:2px}.settings-section{display:none}.settings-section.active{display:block}.settings-open-btn{width:100%;margin-top:8px;justify-content:flex-start!important}.vel-meter-track{height:6px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;margin-top:6px}.vel-meter-fill{height:100%;width:0%;border-radius:4px;background:linear-gradient(90deg,#78dcff,#00e5ff);box-shadow:0 0 6px rgba(0,229,255,.5)}.settings-sub-divider{height:1px;background:rgba(255,255,255,.14);margin:12px 0 10px}.load-low{color:#78dcff}.load-medium{color:#ffd166}.load-high{color:#ff9f43}.load-extreme{color:#ff5f73}@media (min-width:900px){.settings-hub-panel{width:min(640px,calc(100vw - 56px))!important}.settings-content-wrap{min-height:260px}.settings-cat-btn{font-size:12px!important}}#piano .white:not(.active){background:linear-gradient(180deg,var(--piano-white-top) 0,var(--piano-white-mid) 52%,var(--piano-white-bottom) 100%)!important;background-color:var(--piano-white-mid)!important;background-image:linear-gradient(180deg,var(--piano-white-top) 0,var(--piano-white-mid) 52%,var(--piano-white-bottom) 100%)!important;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(6,17,31,.1)!important;filter:none!important}#piano .white.active,#piano>.white.active{background:var(--accent-white)!important;background-color:var(--accent-white)!important;background-image:none!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 0 12px var(--accent-white)!important;filter:none!important}#piano .black:not(.active){background:linear-gradient(180deg,var(--piano-black-top) 0,var(--piano-black-mid) 55%,var(--piano-black-bottom) 100%)!important;background-color:var(--piano-black-mid)!important;background-image:linear-gradient(180deg,var(--piano-black-top) 0,var(--piano-black-mid) 55%,var(--piano-black-bottom) 100%)!important;box-shadow:2px 3px 6px rgba(0,0,0,.4)!important;filter:none!important}#piano .black.active,#piano>.black.active{background:var(--accent-black)!important;background-color:var(--accent-black)!important;background-image:none!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 12px var(--accent-black)!important;filter:none!important}#holdBtn.midi-sustain-active,#settingsSustainBtn.midi-sustain-active{background:linear-gradient(135deg,rgba(120,220,255,.96),rgba(255,255,255,.72))!important;border-color:rgba(185,244,255,.86)!important;color:#061117!important;box-shadow:0 0 18px rgba(120,220,255,.34),inset 0 1px 0 rgba(255,255,255,.26)!important}body.input-burst-mode #piano .black.active,body.input-burst-mode #piano .white.active,body.wide-key-mode #piano .black.active,body.wide-key-mode #piano .white.active{box-shadow:none!important;filter:none!important}body.input-burst-mode #piano .white.active .key-label,body.layout-changing #piano .white.active .key-label,body.wide-key-mode #piano .white.active .key-label{opacity:1!important}body.input-burst-mode #piano .black.active .black-label,body.layout-changing #piano .black.active .black-label,body.wide-key-mode #piano .black.active .black-label{opacity:1!important}body.input-burst-mode #piano .black-label,body.input-burst-mode #piano .key-label{opacity:1!important}body.layout-changing #piano .black.active,body.layout-changing #piano .white.active{box-shadow:none!important;filter:none!important}.key-apply-btn{width:100%;margin-top:10px;border-color:rgba(120,220,255,.35)!important}.key-apply-btn.pending{background:linear-gradient(135deg,rgba(120,220,255,.92),rgba(255,255,255,.68))!important;color:#061117!important}@media (pointer:coarse){#piano .white:not(.active){background:#f8fafb!important;background-image:none!important;background-color:#f8fafb!important;box-shadow:none!important}#piano .black:not(.active){background:#1a1a1a!important;background-image:none!important;background-color:#1a1a1a!important;box-shadow:1px 2px 3px rgba(0,0,0,.35)!important}#piano .white.active,.white.active{background:var(--accent-white)!important;background-image:none!important;background-color:var(--accent-white)!important;box-shadow:none!important;filter:none!important}#piano .black.active,.black.active{background:var(--accent-black)!important;background-image:none!important;background-color:var(--accent-black)!important;box-shadow:none!important;filter:none!important}}#piano .white,.white{contain:layout paint style}#piano .black,.black{contain:layout style}#piano .black.active,#piano .white.active{box-shadow:none!important;filter:none!important;transition:none!important}#piano .black,#piano .white{transition:none!important}@media (pointer:fine){#piano .white:not(.active){background:linear-gradient(180deg,#fff 0,#fdfdfe 62%,#f7f8fa 88%,#e9ebee 95%,#f5f6f8 100%)!important;background-color:#fdfdfe!important;background-image:linear-gradient(180deg,#fff 0,#fdfdfe 62%,#f7f8fa 88%,#e9ebee 95%,#f5f6f8 100%)!important;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(6,17,31,.1)!important;filter:none!important}#piano .black{border-radius:0 0 4px 4px!important}#piano .black:not(.active){background:linear-gradient(180deg,#23262b 0,#16181c 22%,#0c0d0f 48%,#08090a 68%,#101216 88%,#1a1d22 100%)!important;background-color:#0c0d10!important;background-image:linear-gradient(180deg,#23262b 0,#16181c 22%,#0c0d0f 48%,#08090a 68%,#101216 88%,#1a1d22 100%)!important;box-shadow:inset 1px 0 1px rgba(255,255,255,.06),inset -1px 0 2px rgba(0,0,0,.55),2px 5px 8px rgba(0,0,0,.5)!important;filter:none!important}}#piano .white.active,#piano>.white.active,body.input-burst-mode #piano .white.active,body.layout-changing #piano .white.active,body.wide-key-mode #piano .white.active{background:var(--accent-white)!important;background-color:var(--accent-white)!important;background-image:none!important;box-shadow:none!important;filter:none!important;opacity:1!important}#piano .black.active,#piano>.black.active,body.input-burst-mode #piano .black.active,body.layout-changing #piano .black.active,body.wide-key-mode #piano .black.active{background:var(--accent-black)!important;background-color:var(--accent-black)!important;background-image:none!important;box-shadow:none!important;filter:none!important;opacity:1!important}#piano .white.active .key-label{opacity:1!important}#piano .black.active .black-label{opacity:1!important}#piano .white.active,#piano>.white.active,body.input-burst-mode #piano .white.active,body.layout-changing #piano .white.active,body.wide-key-mode #piano .white.active{background:var(--accent-white)!important;background-color:var(--accent-white)!important;background-image:none!important;box-shadow:none!important;filter:none!important;opacity:1!important}#piano .black.active,#piano>.black.active,body.input-burst-mode #piano .black.active,body.layout-changing #piano .black.active,body.wide-key-mode #piano .black.active{background:var(--accent-black)!important;background-color:var(--accent-black)!important;background-image:none!important;box-shadow:none!important;filter:none!important;opacity:1!important}@media (pointer:coarse){#piano .white.active,#piano>.white.active{background:var(--accent-white)!important;background-color:var(--accent-white)!important;background-image:none!important}#piano .black.active,#piano>.black.active{background:var(--accent-black)!important;background-color:var(--accent-black)!important;background-image:none!important}}#activeKeyLayer{position:absolute;left:0;top:0;height:100%;pointer-events:none;opacity:1;z-index:70;transform:translate3d(0,0,0);will-change:transform;overflow:visible;contain:layout style}.active-key-glow-shell,.active-key-light,.active-key-piece{position:absolute;pointer-events:none;transition:none;background-image:none!important;contain:layout style}.active-key-piece{opacity:1;filter:none!important}.active-key-glow-shell{opacity:0;z-index:0;background:0 0!important;filter:none!important}.active-key-white-bottom-glow{top:var(--black-key-height,60%);bottom:0;border-radius:0 0 2px 2px}.active-key-white-bottom-tapered{transform:translateZ(0);clip-path:polygon(var(--active-white-left-cut-pct,0%) 0%,calc(100% - var(--active-white-right-cut-pct,0%)) 0%,100% var(--active-white-taper-depth-pct,18%),100% 100%,0 100%,0 var(--active-white-taper-depth-pct,18%))}.active-key-white-top{top:0;height:var(--black-key-height,60%);background:var(--accent-white);z-index:1}.active-key-white-bottom{top:var(--black-key-height,60%);bottom:0;background:var(--accent-white);border-radius:0 0 2px 2px;z-index:1}.active-key-black{top:0;height:var(--black-key-height,60%);background:var(--accent-black);border-radius:0 0 2px 2px;z-index:3}.active-key-light{top:-1px;height:52%;z-index:4;opacity:0;background:radial-gradient(ellipse at 50% 0,#fff 0,rgba(255,255,255,.82) 16%,rgba(255,255,255,.5) 40%,rgba(255,255,255,.18) 70%,transparent 100%),linear-gradient(to bottom,rgba(255,255,255,.78) 0,rgba(255,255,255,.28) 50%,transparent 100%);filter:blur(calc(14px * var(--key-glow-blur-spread, 1)));transform:translateZ(0);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,.82) 34%,rgba(0,0,0,.26) 74%,transparent 100%);mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,.82) 34%,rgba(0,0,0,.26) 74%,transparent 100%)}.active-key-white-bottom,.active-key-white-bottom-glow,.active-key-white-light,.active-key-white-top{--active-key-glow-core:color-mix(in srgb, var(--accent-white) 78%, white 22%);--active-key-glow-mid:color-mix(in srgb, var(--accent-white) 58%, white 42%);--active-key-glow-outer:color-mix(in srgb, var(--accent-white) 38%, white 62%);--active-key-highlight:color-mix(in srgb, white 84%, var(--accent-white) 16%)}.active-key-black,.active-key-black-light{--active-key-glow-core:color-mix(in srgb, var(--accent-black) 78%, white 22%);--active-key-glow-mid:color-mix(in srgb, var(--accent-black) 58%, white 42%);--active-key-glow-outer:color-mix(in srgb, var(--accent-black) 38%, white 62%);--active-key-highlight:color-mix(in srgb, white 84%, var(--accent-black) 16%)}.active-key-black-light,.active-key-white-light{--active-key-light-color:var(--active-key-highlight)}.active-key-black-light{top:-2px;height:60%;z-index:5}body.key-glow-on .active-key-piece{box-shadow:0 0 calc(12px * var(--key-glow-spread,1)) color-mix(in srgb,var(--active-key-glow-core) 92%,transparent),0 0 calc(28px * var(--key-glow-spread,1)) color-mix(in srgb,var(--active-key-glow-mid) 74%,transparent),0 0 calc(48px * var(--key-glow-spread,1)) color-mix(in srgb,var(--active-key-glow-outer) 56%,transparent)}body.key-glow-on .active-key-white-bottom-tapered{box-shadow:none!important;filter:drop-shadow(0 0 calc(12px * var(--key-glow-spread, 1)) color-mix(in srgb, var(--active-key-glow-core) 92%, transparent)) drop-shadow(0 0 calc(28px * var(--key-glow-spread, 1)) color-mix(in srgb, var(--active-key-glow-mid) 74%, transparent)) drop-shadow(0 0 calc(48px * var(--key-glow-spread, 1)) color-mix(in srgb, var(--active-key-glow-outer) 56%, transparent))!important}body.key-glow-on .active-key-white-bottom-glow{opacity:calc(.9 * var(--key-glow-opacity, .5));box-shadow:0 0 calc(10px * var(--key-glow-spread,1)) color-mix(in srgb,var(--active-key-glow-core) 82%,transparent),0 0 calc(22px * var(--key-glow-spread,1)) color-mix(in srgb,var(--active-key-glow-mid) 60%,transparent),0 0 calc(38px * var(--key-glow-spread,1)) color-mix(in srgb,var(--active-key-glow-outer) 40%,transparent)}body.key-glow-on .active-key-light{opacity:calc(.95 * var(--key-glow-opacity, .5));mix-blend-mode:screen;box-shadow:0 -2px calc(14px * var(--key-glow-spread,1)) var(--active-key-light-color,#fff),0 0 calc(28px * var(--key-glow-spread,1)) color-mix(in srgb,var(--active-key-light-color,#fff) 76%,transparent)}body.key-glow-on:is(.layout-changing,.perf-lite) #activeKeyLayer .active-key-light{filter:none!important;mix-blend-mode:normal!important;opacity:calc(.82 * var(--key-glow-opacity, .5))!important;box-shadow:0 0 calc(14px * var(--key-glow-spread,1)) var(--active-key-light-color,#fff),0 0 calc(28px * var(--key-glow-spread,1)) color-mix(in srgb,var(--active-key-light-color,#fff) 70%,transparent)!important}body.key-glow-on:is(.layout-changing,.perf-lite) #activeKeyLayer :is(.active-key-piece,.active-key-white-bottom-tapered){filter:none!important;box-shadow:0 0 calc(15px * var(--key-glow-spread,1)) color-mix(in srgb,var(--active-key-glow-core) 88%,transparent),0 0 calc(30px * var(--key-glow-spread,1)) color-mix(in srgb,var(--active-key-glow-mid) 64%,transparent)!important}body.key-glow-on:is(.layout-changing,.perf-lite) #activeKeyLayer .active-key-white-bottom-glow{opacity:calc(.92 * var(--key-glow-opacity, .5))!important;box-shadow:0 0 calc(13px * var(--key-glow-spread,1)) color-mix(in srgb,var(--active-key-glow-core) 78%,transparent),0 0 calc(24px * var(--key-glow-spread,1)) color-mix(in srgb,var(--active-key-glow-mid) 52%,transparent)!important}.brand-icon.logo-fallback img{display:none!important}.brand-icon.logo-fallback::after{content:'P';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;color:#061117;background:linear-gradient(135deg,#fff,#78dcff)}#toastWrap{position:fixed;left:50%;bottom:calc(var(--piano-height,25vh) + 24px);transform:translateX(-50%);z-index:100000;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;width:auto;max-width:calc(100vw - 28px)}.toast{width:max-content;max-width:min(360px,calc(100vw - 28px));display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:14px;background:linear-gradient(135deg,rgba(18,22,30,.96),rgba(10,14,20,.96));border:1px solid rgba(0,229,255,.28);box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 22px rgba(0,229,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#eaf6ff;font-family:Quicksand,sans-serif;transform:translateY(18px) scale(.96);opacity:0;transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .32s ease;pointer-events:auto;overflow:hidden;position:relative}.toast.show{transform:translateY(0) scale(1);opacity:1}.toast.hide{transform:translateY(12px) scale(.97);opacity:0}.toast-icon{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;margin-top:0}.toast-body{flex:0 1 auto;min-width:0}.toast-title{font-size:12px;font-weight:800;letter-spacing:.25px;margin-bottom:1px}.toast-msg{font-size:11.5px;font-weight:600;line-height:1.35;color:rgba(234,246,255,.72);white-space:pre-line;overflow-wrap:anywhere}.toast-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;transform-origin:left;animation:toastBar linear forwards}@keyframes toastBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}.toast.t-error{border-color:rgba(255,86,86,.4);box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 22px rgba(255,86,86,.14)}.toast.t-error .toast-icon{background:linear-gradient(135deg,#ff5e5e,#c81e1e);color:#fff}.toast.t-error .toast-bar{background:linear-gradient(90deg,#ff7a7a,#c81e1e)}.toast.t-error .toast-title{color:#ff9d9d}.toast.t-info{border-color:rgba(0,229,255,.32)}.toast.t-info .toast-icon{background:linear-gradient(135deg,#00e5ff,#007eff);color:#04121a}.toast.t-info .toast-bar{background:linear-gradient(90deg,#00e5ff,#007eff)}.toast.t-info .toast-title{color:#7fe2ff}.toast.t-success{border-color:rgba(0,255,136,.34)}.toast.t-success .toast-icon{background:linear-gradient(135deg,#0f8,#00b85f);color:#02140a}.toast.t-success .toast-bar{background:linear-gradient(90deg,#0f8,#00b85f)}.toast.t-success .toast-title{color:#7dffbe}#app>.floating-panel{position:absolute!important}#app>.stage{flex:1 1 auto!important;min-height:0!important}#app>#pianoWrap{flex:0 0 auto!important}:root{--chord-primary:#ffffff;--chord-secondary:#ffffff;--chord-glow:rgba(255,255,255,0.36)}.chord-name{text-shadow:0 14px 34px rgba(0,0,0,.5),0 0 30px var(--chord-glow)!important}.chord-name.primary{color:var(--chord-primary)!important}.chord-name.secondary{color:var(--chord-secondary)!important;opacity:0}.chord-name.secondary.show{opacity:.62}.graphic-grid{grid-template-columns:repeat(2,1fr)!important}.option-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:6px}.option-grid-3 .btn{width:100%;padding-left:8px!important;padding-right:8px!important;font-size:11px!important}.color-pad-host{width:100%}.color-pad-widget{display:flex;flex-direction:column;gap:8px}.color-pad-head{display:flex;align-items:center;justify-content:space-between;gap:10px;color:rgba(255,255,255,.7);font-size:10px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}.color-pad-value{color:rgba(255,255,255,.42);font-size:10px;font-weight:900;letter-spacing:.02em;text-transform:none}.color-pad-sv{position:relative;height:92px;border-radius:16px;overflow:hidden;cursor:crosshair;touch-action:none;border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 26px rgba(0,0,0,.2)}.color-pad-hue{position:relative;height:18px;margin-top:8px;border-radius:999px;cursor:pointer;touch-action:none;border:1px solid rgba(255,255,255,.16);background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.color-pad-hue-dot{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid rgba(0,0,0,.35);box-shadow:0 1px 4px rgba(0,0,0,.5);transform:translate(-50%,-50%);pointer-events:none}.color-pad-dot{position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:var(--pad-color,#fff);border:3px solid #fff;box-shadow:0 5px 16px rgba(0,0,0,.48),0 0 0 1px rgba(0,0,0,.42);transform:translate(-50%,-50%);pointer-events:none}.color-pad-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}.color-pad-chip{width:28px;height:28px;border-radius:999px;flex:0 0 auto;background:var(--pad-color,#fff);border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.34)}.color-pad-reset{height:30px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.085);color:rgba(245,248,252,.92);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;font-family:Quicksand,sans-serif;transition:background .16s ease,transform .08s ease}.color-pad-reset:hover{background:rgba(255,255,255,.13)}.color-pad-reset:active{transform:scale(.94)}.chord-color-grid{display:grid;grid-template-columns:1fr;gap:10px}@media (min-width:900px) and (pointer:fine){.color-pad-sv{height:108px}}.string-range-control{padding:4px 2px 0}.string-range-values{display:flex;justify-content:space-between;align-items:center;color:#78dcff;font-size:11px;font-weight:900;margin-bottom:4px}.string-range-slider{position:relative;height:44px;--string-range-left:0%;--string-range-right:100%}.string-range-fill,.string-range-track{position:absolute;top:22px;height:6px;border-radius:999px;pointer-events:none}.string-range-track{left:0;right:0;background:rgba(255,255,255,.12);box-shadow:inset 0 1px 2px rgba(0,0,0,.28)}.string-range-fill{left:var(--string-range-left);right:calc(100% - var(--string-range-right));background:linear-gradient(90deg,rgba(91,198,242,.92),rgba(127,226,255,.78));box-shadow:0 0 12px rgba(120,220,255,.25)}.string-range-slider input[type=range]{position:absolute;inset:0;width:100%;height:44px;margin:0;background:0 0;pointer-events:none;appearance:none;-webkit-appearance:none}.string-range-slider input[type=range]::-webkit-slider-runnable-track{height:6px;background:0 0;border:0}.string-range-slider input[type=range]::-webkit-slider-thumb{width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.42);background:linear-gradient(135deg,#fff,#78dcff);box-shadow:0 4px 14px rgba(0,0,0,.34),0 0 12px rgba(120,220,255,.32);cursor:pointer;pointer-events:auto;appearance:none;-webkit-appearance:none;margin-top:-10px}.string-range-slider input[type=range]::-moz-range-track{height:6px;background:0 0;border:0}.string-range-slider input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.42);background:linear-gradient(135deg,#fff,#78dcff);box-shadow:0 4px 14px rgba(0,0,0,.34),0 0 12px rgba(120,220,255,.32);cursor:pointer;pointer-events:auto}.double-note-controls{display:none}.double-note-controls.active{display:block}.split-note-slider{position:relative;height:44px}.split-note-track{position:absolute;left:0;right:0;top:22px;height:6px;border-radius:999px;background:rgba(255,255,255,.12);box-shadow:inset 0 1px 2px rgba(0,0,0,.28);pointer-events:none}.split-note-slider input[type=range]{position:absolute;inset:0;width:100%;height:44px;margin:0;background:0 0;appearance:none;-webkit-appearance:none}.split-note-slider input[type=range]::-webkit-slider-runnable-track{height:6px;background:0 0;border:0}.split-note-slider input[type=range]::-webkit-slider-thumb{width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.42);background:linear-gradient(135deg,#fff,#78dcff);box-shadow:0 4px 14px rgba(0,0,0,.34),0 0 12px rgba(120,220,255,.32);cursor:pointer;appearance:none;-webkit-appearance:none;margin-top:-9px}.split-note-slider input[type=range]::-moz-range-track{height:6px;background:0 0;border:0}.split-note-slider input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.42);background:linear-gradient(135deg,#fff,#78dcff);box-shadow:0 4px 14px rgba(0,0,0,.34),0 0 12px rgba(120,220,255,.32);cursor:pointer}.render-fixed #app{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;min-height:100dvh!important;display:block!important;overflow:hidden!important}.render-fixed .stage{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:var(--piano-height)!important;width:auto!important;height:auto!important;min-height:0!important;margin:0!important;border:0!important;border-radius:0!important;flex:none!important;z-index:1!important}.render-fixed canvas:not(#pianoSeparatorLayer){width:100%!important;height:100%!important}.render-fixed #pianoWrap{position:absolute!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;width:auto!important;height:var(--piano-height)!important;margin:0!important;border:0!important;border-radius:0!important;flex:none!important;z-index:70!important}.render-fixed #swipeStrip{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:var(--piano-height)!important;width:auto!important;z-index:80!important}.render-fixed #logoToggle{position:absolute!important;top:8px!important;left:8px!important;margin:0!important;z-index:2200!important}.render-fixed .top{position:absolute!important;top:8px!important;left:8px!important;right:8px!important;width:auto!important;margin:0!important;padding-left:clamp(126px,16vw,166px)!important;z-index:2100!important;flex:none!important}.render-fixed .floating-panel{position:absolute!important;top:68px!important;z-index:1500!important}.render-fixed #chordDisplay{position:absolute!important;top:50%!important;left:14px!important;transform:translateY(-50%)!important;z-index:520!important;gap:8px!important;align-items:flex-start!important}.render-fixed .perf-hud{position:fixed!important;top:72px!important;left:14px!important;z-index:620!important}.render-fixed.hide-ui .floating-panel,.render-fixed.hide-ui .top{opacity:0!important;visibility:hidden!important;pointer-events:none!important}.render-fixed.hide-ui #logoToggle{opacity:.55!important}.render-fixed.papiano-fullscreen #logoToggle{top:6px!important}.render-fixed.papiano-fullscreen .top{top:6px!important}@media (max-width:700px){.render-fixed #logoToggle{top:6px!important;left:6px!important}.render-fixed .top{top:6px!important;left:6px!important;right:6px!important;padding-left:118px!important}.render-fixed .floating-panel{top:60px!important;z-index:1500!important}.render-fixed #chordDisplay{top:50%!important;left:12px!important;transform:translateY(-50%)!important}.render-fixed .perf-hud{top:66px!important;left:12px!important}}body:not(.mp-entering-piano) #loadingScreen{display:none!important}body.mp-entering-piano #loadingScreen{display:flex!important;opacity:1;pointer-events:all}#pianoSeparatorLayer{position:absolute;left:0;top:0;height:100%;pointer-events:none;z-index:75;contain:layout paint style;image-rendering:pixelated}@media (min-width:900px){.stage{width:100%}#pianoWrap{width:100%}}@media (hover:hover) and (pointer:fine){#panel .btn:not(.active):hover{background:#34343f;border-color:rgba(255,255,255,.14)}#logoToggle:hover{background:rgba(0,0,0,.5)}}:root{--piano-height:26vh;--ui-top-offset:calc(8px + env(safe-area-inset-top,0px));--ui-edge-left:calc(8px + env(safe-area-inset-left,0px));--ui-edge-right:calc(8px + env(safe-area-inset-right,0px));--ui-topbar-h:clamp(48px, 34px + 1.6vw, 84px);--ui-btn-h:clamp(36px, 26px + 0.95vw, 58px);--ui-btn-font:clamp(12px, 10.4px + 0.21vw, 17px);--ui-logo-clear:clamp(128px, 98px + 2.9vw, 196px);--ui-pill-h:clamp(36px, 27px + 0.8vw, 54px);--ui-pill-font:clamp(11px, 9.6px + 0.18vw, 15px);--ui-strip-top:calc(var(--ui-top-offset) + var(--ui-topbar-h) + 8px);--ui-below-strip:calc(var(--ui-strip-top) + var(--ui-pill-h) + 10px);--ui-chat-w:clamp(300px, 120px + 12vw, 420px)}@media (orientation:landscape) and (max-height:520px){:root{--ui-top-offset:calc(4px + env(safe-area-inset-top,0px));--ui-topbar-h:44px;--ui-btn-h:34px;--ui-btn-font:12px;--ui-pill-h:32px;--ui-pill-font:10.5px}}@media (min-width:1280px) and (min-height:600px){:root{--ui-topbar-h:72px;--ui-btn-h:52px;--ui-btn-font:15px;--ui-pill-h:48px;--ui-pill-font:13.5px}}@media (min-width:1700px) and (min-height:700px){:root{--ui-topbar-h:80px;--ui-btn-h:56px;--ui-btn-font:16px;--ui-pill-h:52px;--ui-pill-font:14.5px}}.render-fixed .top,.render-fixed.papiano-fullscreen .top{top:var(--ui-top-offset)!important;left:var(--ui-edge-left)!important;right:var(--ui-edge-right)!important;width:auto!important;margin:0!important;height:var(--ui-topbar-h)!important;min-height:var(--ui-topbar-h)!important;padding:0 clamp(10px,.8vw,18px) 0 calc(var(--ui-logo-clear) + 8px)!important;border-radius:calc(var(--ui-topbar-h)/ 2)!important;gap:clamp(8px,.6vw,14px)!important}.render-fixed #logoToggle,.render-fixed.papiano-fullscreen #logoToggle{top:var(--ui-top-offset)!important;left:var(--ui-edge-left)!important;height:var(--ui-topbar-h)!important;min-height:var(--ui-topbar-h)!important;padding:5px clamp(12px,.9vw,20px) 5px 6px!important;gap:clamp(7px,.5vw,12px)!important;border-radius:calc(var(--ui-topbar-h)/ 2)!important}.render-fixed .brand-icon{width:min(calc(var(--ui-topbar-h) - 16px),52px)!important;height:min(calc(var(--ui-topbar-h) - 16px),52px)!important}.render-fixed .brand-text{font-size:clamp(11.5px, 10px + .22vw, 17px)!important}#panel #fsBtn,#panel .btn{height:var(--ui-btn-h)!important;min-height:var(--ui-btn-h)!important;line-height:calc(var(--ui-btn-h) - 2px)!important;padding:0 clamp(14px,9px + .5vw,26px)!important;font-size:var(--ui-btn-font)!important;border-radius:999px!important}#panel #tDown,#panel #tUp{width:calc(var(--ui-btn-h) - 2px)!important;height:calc(var(--ui-btn-h) - 2px)!important;min-width:calc(var(--ui-btn-h) - 2px)!important;min-height:calc(var(--ui-btn-h) - 2px)!important;aspect-ratio:1/1!important;padding:0!important;border-radius:50%!important;font-size:0!important;line-height:0!important}#panel #tDown::before,#panel #tUp::before{width:calc(var(--ui-btn-h) * .36)!important;height:2.4px!important}#panel #tUp::after{width:2.4px!important;height:calc(var(--ui-btn-h) * .36)!important}#panel #tVal{font-size:calc(var(--ui-btn-font) - 1px)!important;min-width:calc(var(--ui-btn-font) + 4px)!important}@media (min-width:1280px) and (min-height:600px){.floating-panel .btn{height:46px!important;min-height:46px!important;line-height:44px!important;padding:0 20px!important;font-size:14px!important}.floating-panel .visual-open-btn{min-height:66px!important;padding:12px 14px!important;font-size:14px!important}.floating-panel .shape-choice{padding:0 10px!important}.floating-panel .settings-cat-btn{padding:0 8px!important;height:40px!important;line-height:38px!important;font-size:12px!important}.floating-panel .metro-bpm-btn{height:40px!important;font-size:13px!important}.floating-panel .graphic-btn{padding:12px 0!important;font-size:13px!important}.floating-panel .label-option-vertical{padding:13px 14px!important}.floating-panel .label-option-vertical .label-text{font-size:14px!important}}@media (min-width:1700px) and (min-height:700px){.floating-panel .btn{height:50px!important;min-height:50px!important;line-height:48px!important;padding:0 22px!important;font-size:14.5px!important}.floating-panel .visual-open-btn{min-height:72px!important;padding:14px 16px!important;font-size:14.5px!important}.floating-panel .shape-choice{padding:0 10px!important}.floating-panel .settings-cat-btn{padding:0 8px!important;height:44px!important;line-height:42px!important;font-size:12.5px!important}.floating-panel .metro-bpm-btn{height:44px!important;font-size:13.5px!important}.floating-panel .graphic-btn{padding:14px 0!important;font-size:13.5px!important}.floating-panel .label-option-vertical{padding:14px 15px!important}.floating-panel .label-option-vertical .label-text{font-size:14.5px!important}}.render-fixed .floating-panel{top:calc(var(--ui-top-offset) + var(--ui-topbar-h) + 10px)!important}.render-fixed .perf-hud{top:var(--ui-below-strip)!important}.render-fixed #pianoWrap,.render-fixed .stage{max-width:none!important;margin:0!important}#swipeStrip{transform:none!important;max-width:none!important}@media (min-width:900px) and (max-width:1599px){.floating-panel{width:min(380px,calc(100vw - 28px))!important}#settingsPanel{width:min(400px,calc(100vw - 28px))!important}#colorPanel{width:min(380px,calc(100vw - 28px))!important}}@media (min-width:1600px) and (min-height:700px){.floating-panel{width:min(460px,calc(100vw - 28px))!important}#settingsPanel{width:min(760px,calc(100vw - 56px))!important}#colorPanel{width:min(440px,calc(100vw - 28px))!important}}@media (prefers-reduced-motion:reduce){*,::after,::before{animation-duration:NaNs!important;animation-iteration-count:1!important;transition-duration:NaNs!important;scroll-behavior:auto!important}}.ui-setting-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.ui-setting-head-gap{display:flex;justify-content:space-between;align-items:center;gap:12px}.ui-setting-head-divided{display:flex;justify-content:space-between;align-items:center;margin:10px 0 6px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}.ui-setting-head-divided-soft{display:flex;justify-content:space-between;align-items:center;margin:10px 0 6px;padding-top:8px;border-top:1px solid rgba(255,255,255,.07)}.ui-label{color:#fff;font-size:11px;font-weight:700}.ui-label-strong{color:#fff;font-size:11px;font-weight:800}.ui-value{color:#78dcff;font-size:12px;font-weight:800}.ui-value-sm{color:#78dcff;font-size:11px;font-weight:800}.ui-muted-caption{color:rgba(255,255,255,.38);font-size:9px;margin-top:2px}.ui-help{color:rgba(255,255,255,.35);font-size:10px;margin-bottom:8px}.ui-full,.ui-range{width:100%}.ui-full-left{width:100%;text-align:left}.ui-mt8{margin-top:8px}.ui-mt10{margin-top:10px}.ui-mb8{margin-bottom:8px}.ui-mb10{margin-bottom:10px}.ui-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:7px}.ui-grid-2-wide{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}.ui-grid-3-preset{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:10px}.ui-center-actions{display:flex;align-items:center;justify-content:center;gap:14px}.ui-inline-actions{display:flex;gap:6px}.ui-count{text-align:center}.ui-count-main{color:#fff;font-size:25px;font-weight:800;line-height:1}.ui-count-sub{color:rgba(255,255,255,.4);font-size:10px;margin-top:4px}.ui-pad-x-10{padding:0 10px}.ui-pad-x-12{padding:0 12px}.ui-stepper-btn{font-size:18px;padding:10px 18px}.ui-flex-1{flex:1}.ui-danger-action{background:#ff3d00;width:100%;margin:8px 0}.ui-primary-action{background:linear-gradient(135deg,rgba(91,198,242,.92),rgba(127,226,255,.7));color:#061117;width:100%}body.theme-child{--neo-border:2.5px solid #06111f;--neo-shadow:4px 4px 0 #06111f;--neo-radius:14px;--neo-key-bg:#ffffff;--neo-key-active:#8ecbff;--neo-black-bg:#2d2d2d;--neo-black-active:#555555;--anim-color:#0099ff!important}body.theme-child .stage{background-color:#fff!important;background-image:url('/images/child-theme-bg.webp')!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;border-bottom:var(--neo-border)}body.theme-child canvas#fx{filter:contrast(1.08) saturate(1.3)!important}body.theme-child #chordDisplay{border:none!important;border-radius:0!important;box-shadow:none!important;background:0 0!important;color:#06111f!important}body.theme-child #chordDisplay .chord-name,body.theme-child .chord-name,body.theme-child .chord-name.primary,body.theme-child .chord-name.secondary{color:#06111f!important;text-shadow:none!important;font-family:Kalam,Fredoka,Quicksand,sans-serif!important;font-weight:700!important;letter-spacing:.02em!important}body.theme-child #pianoWrap{border-top:3px solid #06111f!important;box-shadow:0 -4px 0 #06111f!important}body.theme-child #piano .white,body.theme-child .white{border:2px solid #06111f!important;border-top:none!important;border-radius:0!important;box-shadow:3px 3px 0 rgba(6,17,31,.5)!important;background:var(--neo-key-bg)!important}body.theme-child #piano .white.active,body.theme-child .white.active{background:var(--accent-white,var(--neo-key-active))!important;box-shadow:1px 1px 0 #06111f!important;transform:translate(1px,1px)!important}body.theme-child #piano .black,body.theme-child .black{border:2px solid #06111f!important;border-top:none!important;border-radius:0 0 2px 2px!important;box-shadow:none!important;background:var(--neo-black-bg)!important}body.theme-child #piano .black.active,body.theme-child .black.active{background:var(--accent-black,var(--neo-black-active))!important;box-shadow:1px 1px 0 #06111f!important;transform:translate(1px,1px)!important}body.theme-child .black-label,body.theme-child .key-label{font-family:Fredoka,Quicksand,sans-serif!important;font-weight:700!important}body.theme-child .floating-panel{border:var(--neo-border)!important;border-radius:var(--neo-radius)!important;box-shadow:6px 6px 0 #06111f!important;background:#fff!important;color:#06111f!important}body.theme-child .panel-header{border-bottom:var(--neo-border)!important;color:#06111f!important}body.theme-child .panel-header .panel-title{color:#06111f!important}body.theme-child .panel-close{color:#06111f!important}body.theme-child .btn,body.theme-child .visual-open-btn{border:2px solid #06111f!important;border-radius:10px!important;box-shadow:3px 3px 0 #06111f!important;font-weight:800!important;background:#fff!important;color:#06111f!important;transition:transform 80ms,box-shadow 80ms!important}body.theme-child .btn:active,body.theme-child .visual-open-btn:active{transform:translate(2px,2px)!important;box-shadow:1px 1px 0 #06111f!important}body.theme-child .btn.active,body.theme-child .theme-btn.active{background:var(--neo-key-active)!important;color:#06111f!important;box-shadow:2px 2px 0 #06111f!important}body.theme-child .floating-trigger,body.theme-child .top-action-btn{border:2px solid #06111f!important;border-radius:12px!important;box-shadow:3px 3px 0 #06111f!important;background:#fff!important;color:#06111f!important}body.theme-child .color-group-title,body.theme-child .section-title,body.theme-child .ui-label,body.theme-child .ui-value-sm{color:#06111f!important}body.theme-child .color-row,body.theme-child .perf-setting-block{background:rgba(6,17,31,.05)!important;border:1.5px solid rgba(6,17,31,.18)!important;box-shadow:2px 2px 0 rgba(6,17,31,.12)!important}body.theme-child .toggle-track{background:rgba(6,17,31,.08)!important;border:1.5px solid rgba(6,17,31,.4)!important}body.theme-child .toggle-track.active{border-color:#06111f!important}body.theme-child .toggle-thumb{border:1.5px solid rgba(6,17,31,.25)!important}body.theme-child .metro-beat-btn,body.theme-child .metro-sound-btn{background:#fff!important;border:1.5px solid rgba(6,17,31,.45)!important;color:#06111f!important}body.theme-child .metro-beat-btn.active,body.theme-child .metro-sound-btn.active{border-color:#06111f!important}body.theme-child .split-note-track,body.theme-child .string-range-track{background:rgba(6,17,31,.15)!important}body.theme-child .split-note-slider input[type=range]::-webkit-slider-thumb,body.theme-child .string-range-slider input[type=range]::-webkit-slider-thumb{border:1.5px solid #06111f!important}body.theme-child .split-note-slider input[type=range]::-moz-range-thumb,body.theme-child .string-range-slider input[type=range]::-moz-range-thumb{border:1.5px solid #06111f!important}body.theme-child .preset-name-input{background:#fff!important;border:1.5px solid rgba(6,17,31,.4)!important;color:#06111f!important}body.theme-child .preset-name-input::placeholder{color:rgba(6,17,31,.4)!important}body.theme-child .preset-name-input:focus{border-color:#06111f!important}body.theme-child .preset-confirm-inline{background:rgba(6,17,31,.05)!important;border:1.5px solid rgba(6,17,31,.18)!important}body.theme-child #strikeLine{border-top:3px solid #06111f!important;box-shadow:0 -2px 0 rgba(142,203,255,.7)!important}body.theme-child #toastHost .toast-item,body.theme-child .toast-wrap .toast-item{border:var(--neo-border)!important;border-radius:12px!important;box-shadow:var(--neo-shadow)!important;background:#fff!important;color:#06111f!important}body.theme-child #mBatik,body.theme-child #mGlass,body.theme-child #mMidnight,body.theme-child #mOutline{display:none!important}body.theme-child [data-style-target=mBatik]{display:none!important}body.theme-child #rowNoteGlow,body.theme-child #rowNoteGlowIntensity,body.theme-child #rowSettingsNoteGlow,body.theme-child #rowStrikeReaction,body.theme-child #rowStrikeReactionIntensity{display:none!important}body.theme-child [data-visual-open=particle],body.theme-child [data-visual-open=strikeLine]{display:none!important}body.theme-child,body.theme-child *{color:#06111f!important}body.theme-child #piano .black .key-label,body.theme-child #piano .black .key-label *,body.theme-child .black .key-label,body.theme-child .black .key-label *,body.theme-child .black-label,body.theme-child .black-label *{color:rgba(255,255,255,.9)!important}body.theme-child #logoToggle,body.theme-child .brand-toggle{background:#fff!important;border:2px solid #06111f!important;box-shadow:3px 3px 0 #06111f!important}body.theme-child .brand-text{background:0 0!important;-webkit-background-clip:unset!important;background-clip:unset!important;color:#09f!important;-webkit-text-fill-color:#0099ff!important}body.theme-child .floating-panel{border-radius:16px 14px 20px 12px!important;box-shadow:6px 5px 0 #06111f!important}body.theme-child .btn,body.theme-child .visual-open-btn{border-radius:12px 10px 14px 9px!important;box-shadow:3px 4px 0 #06111f!important}body.theme-child .btn:active,body.theme-child .visual-open-btn:active{box-shadow:1px 2px 0 #06111f!important}body.theme-child .btn.active,body.theme-child .theme-btn.active{box-shadow:2px 3px 0 #06111f!important}body.theme-child .floating-trigger,body.theme-child .top-action-btn{border-radius:14px 11px 15px 10px!important;box-shadow:3px 4px 0 #06111f!important}body.theme-child #toastHost .toast-item,body.theme-child .toast-wrap .toast-item{border-radius:14px 11px 16px 10px!important;box-shadow:5px 4px 0 #06111f!important}body.theme-child #piano .white{box-shadow:3px 4px 0 rgba(6,17,31,.5)!important}body.theme-child #piano .white.active{box-shadow:1px 2px 0 #06111f!important}body.theme-child #piano .black.active{box-shadow:1px 2px 0 #06111f!important}body.theme-child #logoToggle,body.theme-child .brand-toggle{border-radius:14px 11px 15px 10px!important;box-shadow:3px 4px 0 #06111f!important}body.theme-child .color-group-title,body.theme-child .panel-title,body.theme-child .section-title,body.theme-child .ui-count-main,body.theme-child .ui-label,body.theme-child .ui-label-strong{font-family:Fredoka,Quicksand,sans-serif!important;letter-spacing:.01em!important}body.theme-child .brand-text{font-family:Kalam,Fredoka,Quicksand,sans-serif!important;font-weight:700!important}body.theme-child .octave-line{width:2px!important;background:repeating-linear-gradient(to bottom,#06111f 0 6px,transparent 6px 12px)!important}.preset-count-badge{font-size:10px;font-weight:800;color:rgba(255,255,255,.5)}.auth-gate-card{display:flex;flex-direction:column;gap:12px;padding:6px 2px 2px}.auth-gate-icon{display:flex;justify-content:center;color:#78dcff;margin-bottom:-2px}.auth-gate-icon .icon-svg{width:36px;height:36px}.auth-gate-title{text-align:center;font-family:Quicksand,sans-serif;font-size:16px;font-weight:900;color:#fff}.auth-gate-sub{text-align:center;font-size:12px;font-weight:600;color:rgba(255,255,255,.55);line-height:1.5;margin-top:-6px}.auth-gate-submit-btn{width:100%;height:42px;border-radius:11px;border:none;background:linear-gradient(135deg,rgba(91,198,242,.95),rgba(127,226,255,.75));color:#061117;font-size:12.5px;font-weight:800;cursor:pointer;font-family:Quicksand,sans-serif}.auth-gate-submit-btn:disabled{opacity:.6;cursor:default}.preset-slot-list{display:flex;flex-direction:column;gap:6px;margin:2px 0 8px}.preset-slot-row{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}.preset-slot-name{flex:1;font-size:12px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-slot-btn{width:30px;height:30px;border-radius:50%;border:none;background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}.preset-slot-btn .icon-svg{width:15px;height:15px}.preset-slot-load-btn:hover{background:rgba(120,220,255,.18);color:#78dcff}.preset-slot-delete-btn:hover{background:rgba(255,90,90,.22);color:#ff6b6b}.preset-empty-hint{font-size:11px;color:rgba(255,255,255,.4);font-weight:600;padding:6px 2px}.preset-new-row{display:flex;gap:8px;margin-top:4px}.preset-name-input{flex:1;padding:9px 12px;border-radius:11px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;font-size:12px;font-weight:600;outline:0;font-family:inherit}.preset-name-input::placeholder{color:rgba(255,255,255,.32)}.preset-name-input:focus{border-color:#78dcff}.preset-save-new-btn{width:38px;height:38px;padding:0;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preset-max-hint{font-size:10.5px;color:rgba(255,190,110,.85);font-weight:700;margin-top:6px}.preset-confirm-inline{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:12px;margin-bottom:10px}.preset-confirm-inline .section-title{margin-bottom:6px}.preset-confirm-text{font-size:11px;font-weight:700;color:rgba(255,255,255,.55);line-height:1.4}.preset-confirm-inline .anim-style-grid{margin-top:10px}.preset-confirm-inline .btn.active.preset-confirm-danger{background:linear-gradient(135deg,#ff4f67,#d92d4a)!important;border-color:rgba(255,82,104,.95)!important;color:#fff!important}.faq-list{display:flex;flex-direction:column}.faq-group{margin-top:20px}.faq-group:first-child{margin-top:0}.faq-group-title{font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.4);margin:0 2px 10px}.faq-item{border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.03);margin-top:8px;overflow:hidden}.faq-item:first-of-type{margin-top:0}.faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;padding:12px 14px;font-size:12.5px;font-weight:700;color:rgba(255,255,255,.88);line-height:1.45;user-select:none;-webkit-user-select:none}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary::after{content:'';flex:0 0 auto;width:7px;height:7px;border-right:1.6px solid rgba(255,255,255,.45);border-bottom:1.6px solid rgba(255,255,255,.45);transform:rotate(45deg) translateY(-2px);transition:transform .18s ease}.faq-item[open] summary::after{transform:rotate(-135deg) translateY(2px)}.faq-item[open] summary{color:#fff}.faq-item[open]{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.11)}.faq-answer{padding:0 14px 13px;font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.68)}.faq-answer p{margin:0 0 9px}.faq-answer p:last-child{margin-bottom:0}.faq-answer b{color:rgba(255,255,255,.86);font-weight:700}