.transport-bar-themed{box-shadow:0 -8px 8px -4px #0009}.theme-light .transport-bar-themed,.theme-heal .transport-bar-themed,.theme-edu .transport-bar-themed,.theme-kids .transport-bar-themed{box-shadow:0 -8px 8px -4px #ffffff80}:root{--key-perspective: 820px;--key-press-wash-start: rgba(255, 248, 220, .5);--key-press-wash-end: rgba(212, 175, 55, .4);--key-press-rim: rgba(255, 235, 140, .85)}body,p,span,h1,h2,h3,h4,h5,h6,label,button,a,input,textarea,select,td,th,li{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{touch-action:manipulation;overscroll-behavior-x:none}.recording-card-cv{content-visibility:auto;contain-intrinsic-size:auto 120px}[data-sonner-toaster],[data-radix-toast-viewport],.toast-viewport-pass-through{pointer-events:none!important}[data-sonner-toast],[role=status][data-state],[role=alert][data-state]{pointer-events:auto}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.piano-scrollbar{overflow-x:scroll!important;scrollbar-width:auto;scrollbar-color:hsl(var(--brand-gold)) rgba(0,0,0,.3)}.piano-scrollbar::-webkit-scrollbar{-webkit-appearance:none;height:24px}@media (max-width: 639px) and (orientation: portrait){.piano-scrollbar{scrollbar-width:none}.piano-scrollbar::-webkit-scrollbar{height:0;display:none}}.piano-scrollbar::-webkit-scrollbar-track{background:#050505;border-radius:12px;border:1px solid rgba(255,255,255,.05)}.piano-scrollbar::-webkit-scrollbar-thumb{background:hsl(var(--brand-gold));border-radius:12px;border:4px solid #050505;min-width:100px}.piano-scrollbar::-webkit-scrollbar-thumb:hover{background:hsl(var(--brand-gold) / .9)}.piano-scrollbar::-webkit-scrollbar-thumb:active{background:hsl(var(--brand-gold) / .8)}.piano-scrollbar::-webkit-scrollbar-button{display:none}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}:root{--key-press-tilt: 0deg !important;--key-press-depth: 0px !important}}@keyframes gradient-x{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.animate-gradient-x{background-size:200% 200%;animation:gradient-x 3s ease 3}@keyframes magic-icon-spin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.03)}to{transform:rotate(360deg) scale(1)}}.animate-magic-spin{animation:magic-icon-spin 2s var(--ease-smooth) forwards}@keyframes magic-first-note-glow-pulse{0%,to{transform:scale(.96);opacity:.3}50%{transform:scale(1.18);opacity:.9}}.animate-magic-first-note-glow{animation:magic-first-note-glow-pulse 2.2s cubic-bezier(.4,0,.2,1) infinite}@keyframes magic-idle-icon-breath{0%,to{transform:scale(1) rotate(0)}50%{transform:scale(1.22) rotate(14deg)}}.animate-magic-idle-icon{animation:magic-idle-icon-breath 2.2s cubic-bezier(.4,0,.2,1) infinite}@keyframes magic-icon-glow-pulse{0%,to{opacity:.6}50%{opacity:1}}.animate-magic-icon-glow{filter:drop-shadow(0 0 8px rgba(167,139,250,.8)) drop-shadow(0 0 14px rgba(212,175,55,.4));animation:magic-icon-glow-pulse 2.2s cubic-bezier(.4,0,.2,1) 12}.magic-star-burst-container{position:fixed;z-index:500;pointer-events:none;width:0;height:0;contain:strict;isolation:isolate}.magic-star-glow{position:absolute;left:0;top:0;width:50px;height:50px;margin-left:-25px;margin-top:-25px;border-radius:50%;background:radial-gradient(circle,hsl(var(--brand-pro) / .35),hsl(var(--brand-gold) / .1) 50%,transparent 75%);animation:magic-star-glow-pulse .7s var(--ease-snappy) forwards}@keyframes magic-star-glow-pulse{0%{transform:scale(.4);opacity:.8}40%{opacity:.5}to{transform:scale(3.5);opacity:0}}.magic-star{position:absolute;left:0;top:0;width:var(--star-size, 4px);height:var(--star-size, 4px);margin-left:calc(var(--star-size, 4px) / -2);margin-top:calc(var(--star-size, 4px) / -2);clip-path:polygon(50% 0%,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0% 50%,39% 39%);will-change:transform,opacity;transform:translateZ(0);animation:magic-star-rise .95s cubic-bezier(.1,.8,.3,1) forwards;animation-delay:var(--star-delay, 0ms)}.magic-star-pro{background:hsl(var(--brand-pro));box-shadow:0 0 4px hsl(var(--brand-pro) / .9),0 0 8px hsl(var(--brand-pro) / .4)}.magic-star-gold{background:hsl(var(--brand-gold));box-shadow:0 0 4px hsl(var(--brand-gold) / .9),0 0 8px hsl(var(--brand-gold) / .4)}@keyframes magic-star-rise{0%{transform:translate(0) scale(0) rotate(0);opacity:0}12%{transform:translate(calc(var(--sx) * .12),calc(var(--sy) * .12)) scale(1) rotate(45deg);opacity:1}65%{opacity:.85}to{transform:translate(var(--sx),var(--sy)) scale(.2) rotate(200deg);opacity:0}}button,[role=button],a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.no-navigation-gestures{overscroll-behavior:none!important;-webkit-overflow-scrolling:auto!important;touch-action:none!important}.piano-keyboard-stage,html.gesture-pad-active,body.gesture-pad-active{overscroll-behavior:none!important;-webkit-overflow-scrolling:auto!important}.ios-glass{transition:background-color .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1)}.pull-effect{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.pull-effect:hover{transform:translate(-8px) scale(1.05)}.pull-effect:active{transform:translate(-12px) scale(.98);transition:transform .15s cubic-bezier(.4,0,1,1)}.press-effect{transition:transform .2s cubic-bezier(.4,0,.2,1)}.press-effect:active{transform:scale(.95)}.content-visibility-auto{content-visibility:auto;contain-intrinsic-size:auto 176px}@keyframes fx-glow{0%,to{opacity:.4}50%{opacity:.7}}.animate-fx-glow{animation:fx-glow 2s ease-in-out 5 forwards}@keyframes fx-unassign-pop{0%{transform:translate(-50%) scale(1);opacity:1}50%{transform:translate(-50%,-12px) scale(1.35);opacity:.9}to{transform:translate(-50%,-24px) scale(.1);opacity:0}}.animate-fx-unassign{animation:fx-unassign-pop .3s cubic-bezier(.19,1,.22,1) forwards}@keyframes drop-ready{0%,to{transform:scale(1.02)}50%{transform:scale(1.04)}}.animate-drop-ready{animation:drop-ready .8s ease-in-out 3 forwards}@property --key-at-shift-x{syntax: "<length>"; inherits: false; initial-value: 0px;}@property --key-at-shift-y{syntax: "<length>"; inherits: false; initial-value: 0px;}@property --key-at-rotate-x{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@property --key-at-rotate-y{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@property --key-at-rotate-z{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@property --key-at-skew-y{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@property --key-mpe-depth{syntax: "<length>"; inherits: false; initial-value: 0px;}@property --key-mpe-yaw{syntax: "<angle>"; inherits: false; initial-value: 0deg;}button:is(.piano-key-base-white,.premium-key-base-ivory){--key-rest-z: 0px;--key-action-depth: var(--key-press-depth, 12px);--key-action-tilt: var(--key-press-tilt, 3deg)}button:is(.piano-key-base-black,.premium-key-base-gold){--key-rest-z: 8px;--key-action-depth: var(--key-press-depth, 6px);--key-action-tilt: var(--key-press-tilt, 4deg)}button:is(.piano-key-base-white,.piano-key-base-black,.premium-key-base-ivory,.premium-key-base-gold){transform-origin:50% 0%;transform:translateZ(var(--key-rest-z)) rotateX(0) rotateX(0) rotate(0) skewY(0) rotateY(0);transition:transform 145ms cubic-bezier(.22,.7,.25,1);will-change:transform;backface-visibility:hidden}button:is(.piano-key-pressed-white,.piano-key-pressed-black,.premium-key-pressed-ivory,.premium-key-pressed-gold){transform:translate3d(var(--key-at-shift-x, 0px),calc(var(--key-action-depth) + var(--key-at-shift-y, 0px) + var(--key-mpe-depth, 0px)),var(--key-rest-z)) rotateX(calc(var(--key-action-tilt) * -1)) rotateX(var(--key-at-rotate-x, 0deg)) rotate(var(--key-at-rotate-z, 0deg)) skewY(var(--key-at-skew-y, 0deg)) rotateY(calc(var(--key-at-rotate-y, 0deg) + var(--key-mpe-yaw, 0deg)));transition:transform 75ms cubic-bezier(.16,.75,.3,1)}button.aftertouch-active{transition:transform 55ms cubic-bezier(.16,.75,.3,1)!important}.aftertouch-ripple.active{transition:none!important}@media (prefers-reduced-motion: reduce){button:is(.piano-key-base-white,.piano-key-base-black,.premium-key-base-ivory,.premium-key-base-gold){transform:none!important;transition:none!important}button.aftertouch-active{transition:none!important}}.piano-key-base-black{border-radius:0 0 11px 11px}.piano-key-idle-black{background:linear-gradient(180deg,#ffffff52,#ffffff1a,#35363c 8%,#191a1f 26%,#0a0b0e 62%,#000000eb 76%,#000);border-left:2px solid rgba(255,255,255,.2)!important;border-right:2px solid rgba(0,0,0,1)!important;border-bottom:1px solid rgba(0,0,0,1)!important;border-top:2px solid rgba(255,255,255,.3)!important;box-shadow:0 12px 14px -3px #000000eb,inset 0 2px #fff3,inset -14px 0 22px #000000eb;text-shadow:0 -1px 0 rgba(0,0,0,.8)}.piano-key-pressed-black{border-left:2px solid rgba(255,255,255,.2)!important;border-right:2px solid rgba(0,0,0,1)!important;border-bottom:1px solid rgba(0,0,0,1)!important;border-top:2px solid rgba(255,255,255,.3)!important;box-shadow:0 6px 9px #000000eb,inset 0 2px #ffffff1f,inset 0 14px 20px rgba(0,0,0,var(--key-press-shade, .65))}.piano-key-pressed-overlay-black{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(180deg,transparent 35%,hsl(var(--brand-onyx) / .16) 100%),linear-gradient(100deg,var(--key-press-wash-start),transparent 28%,transparent 80%,var(--key-press-wash-end));box-shadow:inset 0 -1px hsl(var(--brand-onyx) / .22);opacity:0;transition:opacity .11s ease-out;pointer-events:none}.piano-key-pressed-black .piano-key-pressed-overlay-black{opacity:min(1,calc(var(--key-press-glow, .55) + var(--key-mpe-glow, 0) * .45))}.piano-key-base-white{border-radius:0 0 13px 13px}.piano-key-idle-white{background:linear-gradient(180deg,#fefdf9,#f8f3e8 34%,#f0ebd9 74%,#ece5d8);box-shadow:inset 0 2px #ffffffeb,inset 0 -16px 26px #6e5c3c0f,0 10px 14px -7px #00000052;z-index:1}@keyframes octave-tint-loading{0%,to{opacity:0}50%{opacity:.55}}.animate-octave-tint-loading{animation:octave-tint-loading 1.1s ease-in-out infinite}.piano-key-pressed-white{box-shadow:inset 0 2px #ffffffeb,inset 0 12px 18px rgba(80,64,38,var(--key-press-shade, .28)),0 2px 3px -2px #00000080;z-index:2}.piano-key-pressed-overlay-white{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(180deg,transparent 35%,hsl(var(--brand-onyx) / .16) 100%),linear-gradient(100deg,var(--key-press-wash-start),transparent 28%,transparent 80%,var(--key-press-wash-end));box-shadow:inset 0 -1px hsl(var(--brand-onyx) / .22);opacity:0;transition:opacity .11s ease-out;pointer-events:none}.piano-key-pressed-white .piano-key-pressed-overlay-white{opacity:min(1,calc(var(--key-press-glow, .55) + var(--key-mpe-glow, 0) * .45))}button[data-key-id][data-velocity-high=true]{outline:none}@keyframes key-glow{0%{opacity:.18}to{opacity:0}}.animate-key-glow{animation:key-glow .3s cubic-bezier(.3,1.5,.5,1) forwards}.animate-gliss-trail{animation:gliss-trail .38s cubic-bezier(.19,1,.22,1) forwards;pointer-events:none;will-change:opacity}@keyframes gliss-trail{0%{opacity:.9}to{opacity:0}}@keyframes pulse-ring{0%{transform:scale(1);opacity:.6}to{transform:scale(1.8);opacity:0}}.animate-pulse-ring{animation:pulse-ring .5s ease-out}.aftertouch-active{animation:none!important;transition:none!important}.aftertouch-ripple-clip{position:fixed;overflow:visible!important;pointer-events:none;z-index:9999}@property --ripple-scale{syntax: "<number>"; inherits: false; initial-value: 1;}@property --ripple-skx{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@property --ripple-sky{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@property --ripple-sy{syntax: "<number>"; inherits: false; initial-value: 1;}@property --ripple-opacity{syntax: "<number>"; inherits: false; initial-value: .75;}.aftertouch-ripple{--rb: conic-gradient(from 0deg, hsl(0 95% 62%), hsl(55 95% 62%), hsl(120 95% 62%), hsl(185 95% 62%), hsl(240 95% 62%), hsl(300 95% 62%), hsl(360 95% 62%));position:absolute;width:120px;height:120px;border-radius:50%;pointer-events:none;z-index:25;left:0;top:0;transform:translate3d(var(--ripple-tx, calc(50% - 60px) ),var(--ripple-ty, calc(50% - 60px) ),0) scale(calc(var(--ripple-scale, .45) * .22));opacity:0;background:none;will-change:transform,opacity;contain:layout style;transition:opacity .14s cubic-bezier(.16,1,.3,1)}.aftertouch-ripple:before{content:"";position:absolute;top:6%;right:6%;bottom:6%;left:6%;border-radius:inherit;padding:9px;background:var(--rb);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:1;pointer-events:none}.aftertouch-ripple{--fill-a: hsl(0 95% 62% / .55);--fill-b: hsl(120 95% 62% / .45);--fill-c: hsl(240 95% 62% / .55)}.aftertouch-ripple:after{content:"";position:absolute;top:6%;right:6%;bottom:6%;left:6%;border-radius:inherit;background:conic-gradient(from 0deg,var(--fill-a),var(--fill-b),var(--fill-c),var(--fill-a));opacity:.55;pointer-events:none}.aftertouch-ripple.active:after{animation:at-fill-flow 2.4s linear infinite,at-fill-pulse 1.6s ease-in-out infinite}@keyframes at-fill-flow{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}@keyframes at-fill-pulse{0%,to{opacity:.4}50%{opacity:.75}}.aftertouch-ripple[data-effect=vibrato]{--fill-a: hsl(260 95% 62% / .6);--fill-b: hsl(320 95% 62% / .5);--fill-c: hsl(220 95% 62% / .6)}.aftertouch-ripple[data-effect=filter]{--fill-a: hsl(170 95% 55% / .6);--fill-b: hsl(120 95% 55% / .45);--fill-c: hsl(215 95% 60% / .6)}.aftertouch-ripple[data-effect=pitch],.aftertouch-ripple[data-effect=combined]{--fill-a: hsl(48 95% 58% / .6);--fill-b: hsl(15 95% 58% / .5);--fill-c: hsl(320 95% 60% / .55)}.aftertouch-ripple[data-effect=reverb],.aftertouch-ripple[data-effect=delay]{--fill-a: hsl(195 95% 60% / .55);--fill-b: hsl(230 90% 65% / .5);--fill-c: hsl(275 90% 65% / .55)}.aftertouch-ripple[data-effect=drive],.aftertouch-ripple[data-effect=flutter]{--fill-a: hsl(0 95% 58% / .6);--fill-b: hsl(25 95% 55% / .5);--fill-c: hsl(45 95% 58% / .55)}.aftertouch-ripple[data-effect=chorus],.aftertouch-ripple[data-effect=flanger],.aftertouch-ripple[data-effect=tremolo]{--fill-a: hsl(150 85% 55% / .55);--fill-b: hsl(180 90% 55% / .5);--fill-c: hsl(300 80% 62% / .5)}.aftertouch-ripple[data-effect=vibrato]{--rb: conic-gradient(from 0deg, hsl(260 95% 62%), hsl(300 95% 62%), hsl(330 95% 62%), hsl(220 95% 62%), hsl(260 95% 62%))}.aftertouch-ripple[data-effect=filter]{--rb: conic-gradient(from 45deg, hsl(170 95% 62%), hsl(120 95% 62%), hsl(195 95% 62%), hsl(225 95% 62%), hsl(170 95% 62%))}.aftertouch-ripple[data-effect=pitch],.aftertouch-ripple[data-effect=combined]{--rb: conic-gradient(from 0deg, hsl(48 95% 62%), hsl(25 95% 62%), hsl(0 95% 62%), hsl(320 95% 62%), hsl(48 95% 62%))}.aftertouch-ripple.active{transform:translate3d(var(--ripple-tx, calc(50% - 60px) ),var(--ripple-ty, calc(50% - 60px) ),0) scale(calc(var(--ripple-scale, 1) * .22)) skew(var(--ripple-skx, 0deg)) skewY(var(--ripple-sky, 0deg)) scaleY(var(--ripple-sy, 1));opacity:var(--ripple-opacity, .75);transition:none!important}.aftertouch-ripple.active:before{rotate:var(--ripple-spin, 0deg)}@media (prefers-reduced-motion: reduce){.animate-key-glow,.animate-gliss-trail,.animate-pulse-ring,.aftertouch-ripple,.aftertouch-ripple.active:before,.aftertouch-ripple.active:after{animation:none!important}.aftertouch-ripple.active{transform:translate3d(var(--ripple-tx, calc(50% - 60px) ),var(--ripple-ty, calc(50% - 60px) ),0) scale(calc(var(--ripple-scale, 1) * .22)) skew(var(--ripple-skx, 0deg)) skewY(var(--ripple-sky, 0deg)) scaleY(var(--ripple-sy, 1));opacity:var(--ripple-opacity, .9)}.aftertouch-active{transition:none!important}.animate-magic-spin,.animate-magic-first-note-glow,.animate-magic-idle-icon,.magic-star-glow,.magic-star,.animate-pulse,.animate-wiggle,.animate-bounce,.animate-octave-tint-loading{animation:none!important}}button[data-key-id][data-edu-status]{transition:outline-color .15s ease-out,outline-width .15s ease-out;contain:layout paint}button[data-key-id][data-edu-status=target]{outline:4px solid rgba(59,130,246,.5);outline-offset:-4px;animation:pulse 2s cubic-bezier(.4,0,.6,1) 5;contain:layout paint}button[data-key-id][data-edu-status=correct]{outline:4px solid rgb(34,197,94);outline-offset:-4px;box-shadow:0 0 15px #22c55e99}button[data-key-id][data-edu-status=error]{outline:4px solid rgb(239,68,68);outline-offset:-4px}.piano-slap-specular-rail{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--slap-accent-color, var(--skin-accent, #D4AF37)) 25%,#FFFFFF 50%,var(--slap-accent-color, var(--skin-accent, #D4AF37)) 75%,transparent 100%);box-shadow:0 0 10px var(--slap-accent-color, var(--skin-accent, rgba(212, 175, 55, .45)));opacity:0;pointer-events:none;will-change:opacity;transition:opacity 60ms ease-out;z-index:40}.piano-slap-specular-rail.active{opacity:1;animation:piano-rail-pulse .36s ease-in-out infinite alternate}@keyframes piano-rail-pulse{0%{opacity:.6}to{opacity:1}}.piano-key-slap-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:36;opacity:0;transition:opacity 80ms cubic-bezier(.19,1,.22,1);overflow:hidden;border-radius:inherit;border:1.5px solid var(--slap-accent-color, var(--skin-accent, rgba(212, 175, 55, .45)));border-top:none;contain:strict}.piano-key-slap-active .piano-key-slap-overlay{opacity:1}.piano-key-slap-active{z-index:3}.piano-key-base-white.piano-key-slap-active,.premium-key-base-ivory.piano-key-slap-active{z-index:3!important}.piano-key-base-black.piano-key-slap-active,.premium-key-base-gold.piano-key-slap-active{z-index:20!important}@media (prefers-reduced-motion: reduce){.piano-key-base-white,.piano-key-base-black,.premium-key-base-ivory,.premium-key-base-gold{transition:opacity .1s ease!important}.piano-key-pressed-white,.piano-key-pressed-black,.premium-key-pressed-ivory,.premium-key-pressed-gold{transform:none!important;transition:opacity .1s ease!important}.aftertouch-ripple,.piano-key-slap-shockwave,.halo-conic-rotator,.halo-beat-active,.key-anim-strike,.aftertouch-active,.animate-key-glow,.animate-gliss-trail,.key-anim-release,.animate-fx-glow,.animate-fx-unassign,.animate-octave-tint-loading{animation:none!important}}button[data-key-id]:focus-visible{outline:2px solid var(--slap-accent-color, #D4AF37)!important;outline-offset:-2px!important}@media (forced-colors: active){button[data-key-id]{forced-color-adjust:none}button[data-key-id]:focus-visible{outline:3px solid Highlight!important;outline-offset:-3px!important}button[data-key-id][aria-pressed=true]{background-color:Highlight!important;color:HighlightText!important}}@media (prefers-contrast: more){.piano-key-pressed-white .piano-key-pressed-overlay-white,.piano-key-pressed-black .piano-key-pressed-overlay-black{opacity:1!important;border-bottom:3px solid var(--key-press-rim, #D4AF37)!important}button[data-key-id][aria-pressed=true]{outline:2px solid var(--key-press-rim, #D4AF37)!important;outline-offset:-2px!important}}.piano-keyboard-stage{position:relative;background:radial-gradient(ellipse at 50% -12%,rgba(212,175,55,.26),transparent 42%),linear-gradient(120deg,#211407,#060606 38%,#1c1308 74%,#030303);border:none;border-radius:0;padding:0 10px;scrollbar-width:none;-ms-overflow-style:none}.piano-keyboard-stage::-webkit-scrollbar{display:none}.piano-stage-frame{box-shadow:0 34px 74px #0000006b,0 8px #0000003d}.theme-light .piano-stage-frame,.theme-heal .piano-stage-frame,.theme-edu .piano-stage-frame,.theme-kids .piano-stage-frame{box-shadow:0 1px #0f172a1a,0 10px 20px -12px #0f172a47}[data-fps-critical=true] .theme-light .piano-stage-frame,[data-fps-critical=true] .theme-heal .piano-stage-frame,[data-fps-critical=true] .theme-edu .piano-stage-frame,[data-fps-critical=true] .theme-kids .piano-stage-frame{box-shadow:none!important}.piano-keybed-shell{position:relative;border-radius:0;padding:0 4px;contain:layout style;background:linear-gradient(180deg,rgba(255,255,255,.055),transparent 24%),radial-gradient(120% 44px at 50% 0%,rgba(255,214,128,.1),transparent 72%);box-shadow:inset 0 1px #ffffff14}.piano-fallboard-rail{display:none}.piano-octave-label-ui{background:none!important;border:none!important;box-shadow:none!important;text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 4px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.55);transition:opacity .16s var(--ease-smooth)}.piano-octave-label-ui:active{opacity:.7}.piano-octave-overlay-bar{background:none!important;box-shadow:none!important;height:26px!important;margin:0!important;padding:0 10px!important;pointer-events:auto}.piano-octave-pill{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 4px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.55);touch-action:pan-x;-webkit-touch-callout:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important}.theme-light .piano-keyboard-stage,.theme-heal .piano-keyboard-stage,.theme-edu .piano-keyboard-stage{background:transparent;border:none;box-shadow:none}.theme-light .piano-keybed-shell,.theme-heal .piano-keybed-shell,.theme-edu .piano-keybed-shell{background:none;box-shadow:none}.piano-keybed-shell:after{display:none}button[data-key-id]{position:relative}.piano-key-base-black{outline:1px solid rgba(255,255,255,.075);outline-offset:-1px}.piano-key-idle-white{text-shadow:0 1px 0 rgba(255,255,255,.46)}.piano-key-base-black{border-radius:0 0 8px 8px}.piano-octave-label-ui{letter-spacing:.02em}.piano-octave-label-ui:hover{text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 5px rgba(0,0,0,.85),0 0 12px rgba(212,175,55,.75)}.piano-keyboard-stage .relative.flex{border-radius:0}.theme-light .piano-keyboard-stage .relative.flex,.theme-heal .piano-keyboard-stage .relative.flex,.theme-edu .piano-keyboard-stage .relative.flex{background:none;box-shadow:none}.theme-light{--key-press-wash-start: rgba(255, 240, 180, .65);--key-press-wash-end: rgba(197, 160, 40, .55);--key-press-rim: rgba(180, 130, 20, .9)}.theme-heal{--key-press-wash-start: rgba(42, 157, 143, .35);--key-press-wash-end: rgba(42, 157, 143, .2);--key-press-rim: rgba(140, 230, 210, .85)}.theme-edu{--key-press-wash-start: rgba(69, 123, 157, .35);--key-press-wash-end: rgba(69, 123, 157, .2);--key-press-rim: rgba(180, 215, 240, .85)}.studio-root{min-height:100dvh;overflow-x:hidden;overflow-x:clip;padding-top:0;contain:style;--studio-gap-xs: 4px;--studio-gap-sm: 8px;--z-footer: 50;--z-loading: 200;--z-drawer-toggle: 250;--z-replay: 300;--z-header: 500;--z-drawer-backdrop: 600;--z-drawer: 700;--z-mic-recorder: 2000;--z-popover: 9999;--z-nav-drawer: 10050;--z-dialog: 100000;--studio-gap-md: 12px;--studio-gap-lg: 16px}.piano-performance-idle [data-idle-pausable=true],.piano-performance-idle .ambient-idle-animation,.piano-performance-idle .realm-cinematic-stage,.piano-performance-idle .realm-cinematic-stage:before,.piano-performance-idle .realm-cinematic-stage:after,.piano-performance-idle .realm-cinematic-lights:before,.piano-performance-idle .realm-cinematic-lights:after,.piano-performance-idle .realm-cinematic-atmosphere:before,.piano-performance-idle .help-attention-glow>svg{animation-play-state:paused!important}.studio-panel{padding:var(--studio-gap-xs) var(--studio-gap-sm);margin-bottom:var(--studio-gap-xs);border-radius:8px;contain:layout style}.studio-dock,.studio-sticky-dock{position:relative;background-color:hsl(var(--background));contain:layout style;overflow-anchor:none;margin-bottom:0}.piano-studio-config-label{max-height:2rem;opacity:1;margin:.375rem 0;transition:opacity .18s ease}.piano-quick-action-label-row{height:1.25rem;max-height:1.25rem;opacity:1;overflow:hidden;transition:opacity .18s ease}.piano-quick-action-label{max-height:1.5rem;opacity:1;transition:opacity .18s ease}.studio-dock-scalebar{display:grid;grid-template-rows:1fr;opacity:1;contain:style;transition:grid-template-rows .24s cubic-bezier(.2,0,.2,1),opacity .18s ease}.studio-dock-scalebar>div{overflow:hidden;min-height:0}.studio-scalebar{padding:0 var(--studio-gap-sm) 2px}.studio-dock .studio-keyboard-area,.studio-sticky-dock .studio-keyboard-area,.studio-keyboard-area{position:relative;height:calc(176px * var(--keyboard-zoom, 1) + 38px);overflow:hidden;box-shadow:inset 0 4px 12px #0000001f;contain:layout style paint}.studio-dock .studio-keyboard-area .piano-keyboard-stage,.studio-sticky-dock .studio-keyboard-area .piano-keyboard-stage,.piano-keyboard-stage{transform:none;contain:layout style}@media (orientation: landscape) and (max-height: 500px){.piano-studio-config-label{max-width:130px;height:28px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}.studio-dock:has([data-chat-open=true]) .studio-dock-scalebar,.studio-sticky-dock:has([data-chat-open=true]) .studio-dock-scalebar,[data-chat-open=true]~.studio-dock-scalebar{grid-template-rows:0fr!important;opacity:0!important;pointer-events:none!important;margin:0!important;padding:0!important;min-height:0!important;overflow:hidden!important}.studio-section-label{position:relative;height:0;overflow:visible;z-index:5;pointer-events:none}.studio-section-label span{position:absolute;top:-2px;left:12px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.2em;color:hsl(var(--muted-foreground) / .7);font-family:Montserrat,sans-serif}.studio-keyboard-separator{height:1px;background:linear-gradient(to right,transparent,hsl(var(--border) / .3) 20%,hsl(var(--border) / .3) 80%,transparent);margin:0 var(--studio-gap-md)}.studio-below-keyboard{position:relative;overflow-x:clip;contain:layout style}.studio-replay-indicator{position:fixed;bottom:calc(var(--transport-bar-height, 78px) + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);z-index:var(--z-replay);border-radius:20px;padding:8px 20px;display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:hsl(var(--destructive) / .96);border:1px solid rgba(255,255,255,.15);box-shadow:0 4px 14px hsl(var(--destructive) / .28);contain:layout style paint}@keyframes studio-replay-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.8}}.studio-replay-pulse-circle{animation:studio-replay-pulse 1.2s ease-in-out 4}@media (prefers-reduced-motion: reduce){.studio-replay-pulse-circle{animation:none}}.studio-dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:#000000b8}.studio-dialog-card{background:hsl(var(--brand-onyx) / .95);border:1px solid hsl(var(--brand-gold) / .2);border-radius:8px;padding:28px 24px;max-width:380px;width:90vw;box-shadow:0 16px 48px #00000080;contain:content}@media (prefers-reduced-motion: no-preference){@keyframes studio-panel-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.studio-panel-enter{animation:studio-panel-enter .2s cubic-bezier(.4,0,.2,1) both}.studio-panel-enter-b2{animation-delay:.1s}.studio-panel-enter-b3{animation-delay:.25s}}@media (max-width: 639px){.studio-panel-enter,.studio-panel-enter-b2,.studio-panel-enter-b3{animation:none}}.studio-footer{position:fixed;bottom:0;left:0;right:0;z-index:50;background:hsl(var(--background) / .96);border-top:1px solid hsl(var(--border) / .15);padding:0;box-shadow:0 -2px 14px hsl(var(--background) / .45),0 -1px hsl(var(--border) / .08);contain:layout style paint;isolation:isolate;transition:transform .26s cubic-bezier(.2,0,.2,1)}.studio-footer[data-scroll-hidden=true],.studio-footer.is-scroll-hidden{transform:translateY(calc(100% + env(safe-area-inset-bottom,0px)));pointer-events:none!important}.studio-root.is-recording{box-shadow:inset 0 0 80px hsl(var(--brand-warning) / .15)}.studio-root.is-recording .studio-footer{border-top-color:hsl(var(--brand-warning) / .4);box-shadow:0 -4px 24px hsl(var(--brand-warning) / .12),0 -1px hsl(var(--brand-warning) / .15)}@media (max-width: 639px){.studio-footer{padding:0}}@media (max-width: 639px) and (orientation: portrait){.studio-root{--studio-gap-md: 6px;--studio-gap-lg: 10px}.studio-root .studio-panel{padding:2px var(--studio-gap-sm);margin-bottom:2px}.studio-root .piano-keyboard-stage{padding:0 4px 4px}.studio-root .piano-fallboard-rail{display:none}}@media (min-width: 640px) and (max-width: 1024px) and (orientation: portrait){.studio-root{--studio-gap-md: 14px;--studio-gap-lg: 20px}.studio-root .studio-panel{max-width:760px;width:100%;margin-inline:auto;padding:var(--studio-gap-sm) var(--studio-gap-md)}.studio-root .piano-keyboard-stage{padding:0 20px 6px}}@media (orientation: landscape) and (max-height: 500px){.piano-studio-config-label{display:none!important;max-height:0!important;opacity:0!important;margin:0!important;padding:0!important;overflow:hidden!important;pointer-events:none!important}.studio-quick-actions-bar{padding-top:0!important;padding-bottom:0!important}.studio-quick-actions-bar .studio-quick-actions-deck{padding:2px 4px!important;gap:4px!important}.studio-quick-actions-bar .w-14,.studio-quick-actions-bar .sm\:w-16{width:2.75rem!important;gap:0!important}.studio-quick-actions-bar button{height:44px!important;width:44px!important;min-height:44px!important}.piano-quick-action-label-row{display:none!important;max-height:0!important;min-height:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important;overflow:hidden!important;pointer-events:none!important}.piano-quick-action-label{display:none!important;max-height:0!important;opacity:0!important;padding:0!important;margin:0!important;overflow:hidden!important;pointer-events:none!important}.studio-second-keyboard-container,.studio-keyboard-separator{display:none!important}.studio-scalebar{display:none}}.studio-fx-scroll>.studio-fx-card{content-visibility:auto;contain-intrinsic-size:auto 280px auto 200px;contain:layout style paint}.studio-effect-card{background:#ffffff0a;border-color:#ffffff0f;box-shadow:0 8px 32px #0000005e;contain:content}.kids-grid-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;flex-direction:column;pointer-events:auto}.kids-grid-scrim{position:absolute;top:0;right:0;bottom:0;left:0;background:#0000008c}.kids-grid-panel{position:absolute;left:0;right:0;bottom:0;max-height:75vh;display:flex;flex-direction:column;background:hsl(from var(--background) h s l / .25);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-top-left-radius:8px;border-top-right-radius:8px;border-top:1px solid hsl(from var(--border) h s l / .2);box-shadow:none;overflow:hidden;will-change:transform,opacity}.kids-grid-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid hsl(from var(--border) h s l / .2);position:sticky;top:0;z-index:10;background:hsl(from var(--background) h s l / .5);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.kids-grid-header:before{content:"";position:absolute;top:8px;left:50%;transform:translate(-50%);width:36px;height:4px;border-radius:2px;background:hsl(from var(--muted-foreground) h s l / .3)}.kids-grid-title{font-family:var(--font-brand, "Montserrat", sans-serif);font-size:18px;font-weight:900;letter-spacing:-.03em;color:var(--foreground)}.kids-grid-close-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;min-height:40px;border-radius:8px;border:none;background:hsl(from var(--muted-foreground) h s l / .1);color:var(--muted-foreground);cursor:pointer;transition:background-color .15s ease,color .15s ease;-webkit-tap-highlight-color:transparent}.kids-grid-close-btn:hover{background:hsl(from var(--muted-foreground) h s l / .2);color:var(--foreground)}.kids-grid-close-btn:active{transform:scale(.92)}.kids-grid-scroll{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:16px 16px 32px}.kids-grid-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:12px 6px;border-radius:8px;border:1px solid rgba(255,255,255,.25);box-shadow:0 4px 12px #00000026,inset 0 2px 4px #fff3;color:#fff;cursor:pointer;transition:transform .12s cubic-bezier(.19,1,.22,1),filter .2s ease;min-height:88px;-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:pan-y}.kids-grid-card:hover{filter:brightness(1.15)}.kids-grid-card:active{transform:scale(.93);will-change:transform}.kids-grid-card-label{width:100%;text-align:center;font-family:var(--font-interface, "Inter", sans-serif);font-size:12px;font-weight:700;letter-spacing:0em;color:inherit;text-shadow:0 1px 2px rgba(0,0,0,.4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kids-grid-section-title{font-family:var(--font-brand, "Montserrat", sans-serif);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:-.03em;color:var(--muted-foreground);padding:0 4px}.kids-gesture-section{position:relative;width:100%;height:280px;max-height:35vh;flex-shrink:0;padding:0 44px}.kids-drawer-toggles{display:flex;gap:8px;justify-content:center}.kids-drawer-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 16px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--muted-foreground);font-size:10px;font-weight:700;letter-spacing:-.03em;cursor:pointer;transition:background-color .2s ease,color .2s ease;-webkit-tap-highlight-color:transparent;min-width:56px;min-height:44px}.kids-drawer-btn:hover{background:hsl(from var(--accent) h s l / .6)}.kids-drawer-btn:active{transform:scale(.95)}.kids-drawer-btn-active{color:var(--brand-gold, #D4AF37);background:hsl(from var(--brand-gold, #D4AF37) h s l / .12);border-color:hsl(from var(--brand-gold, #D4AF37) h s l / .25)}.kids-drawer-label{font-family:var(--font-brand, "Montserrat", sans-serif)}