.play-control-curtain{position:absolute;bottom:100%;left:0;right:0;height:0;background:linear-gradient(to bottom,#51b2ea,#51b2ea);border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden;z-index:9999;transition:height var(--transition-normal) ease-out,background var(--transition-fast) ease-out,box-shadow var(--transition-fast) ease-out,opacity .18s ease-in-out;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px #00000057,0 2px 8px #00000038}.play-control-curtain.visible{height:92px}.play-control-curtain.loop-active{background:linear-gradient(to bottom,#51b2ea8a,#51b2ea8a);box-shadow:0 8px 22px #0000003d,0 2px 8px #00000029}.app.seek-interacting .play-control-curtain.visible{opacity:0!important;pointer-events:none;box-shadow:none!important}.app.seek-interacting .play-control-curtain.visible .curtain-buttons{opacity:0!important;transition-delay:0ms}.curtain-buttons{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-items:center;column-gap:16px;opacity:0;transition:opacity .16s ease-in-out;transition-delay:40ms}.play-control-curtain.visible .curtain-buttons{opacity:1}.curtain-btn{width:58px;height:58px;border-radius:999px;border:none!important;cursor:pointer;transition:all var(--transition-fast);display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;line-height:0;background:#ffffff24;color:#1f2937;-moz-appearance:none;appearance:none;-webkit-appearance:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);-webkit-tap-highlight-color:transparent}.play-control-curtain .curtain-btn:hover,.play-control-curtain .curtain-btn:active{border-color:transparent!important}.curtain-btn:focus,.curtain-btn:focus-visible{outline:none;border-color:transparent!important;box-shadow:none!important}.curtain-btn:hover{background:#ffffff42;transform:translateY(-2px)}.curtain-btn:active{transform:translateY(0)}.curtain-btn.play-btn{width:58px;height:58px;border-radius:50%;position:relative;display:grid;place-items:center;background:#ffffff85;color:#323232;box-shadow:0 4px 14px #0000004d}.curtain-btn.play-btn:hover{background:#ffffff9e}.curtain-btn.play-btn.playing{transform:scale(.98)}.curtain-btn.play-btn:focus,.curtain-btn.play-btn:focus-visible{outline:none;box-shadow:0 4px 14px #0000004d}.play-control-curtain .curtain-btn.play-btn:focus,.play-control-curtain .curtain-btn.play-btn:focus-visible,.play-control-curtain .curtain-btn.play-btn:active{outline:none!important;border:none!important;box-shadow:0 4px 14px #0000004d!important}.play-control-curtain .curtain-btn.hand-btn:focus,.play-control-curtain .curtain-btn.hand-btn:focus-visible,.play-control-curtain .curtain-btn.hand-btn:active,.play-control-curtain .curtain-btn.hand-btn:hover:focus,.play-control-curtain .curtain-btn.hand-btn:hover:focus-visible{outline:none!important;border-color:transparent!important;box-shadow:none!important}button.curtain-btn.play-btn:focus,button.curtain-btn.play-btn:focus-visible,button.curtain-btn.play-btn:active,button.curtain-btn.play-btn:hover:focus,button.curtain-btn.play-btn:hover:focus-visible{outline:none!important;border-color:transparent!important;box-shadow:0 4px 14px #0000004d!important}button.curtain-btn.play-btn::-moz-focus-inner{border:0}.curtain-btn.hand-btn.active{background:#ffffff57;box-shadow:none;color:var(--color-warning)}.play-icon{width:22px;height:22px;display:block;position:absolute;top:50%;left:50%;transform:translate(-42%,-50%)}.hand-icon{width:28px;height:28px;display:block;fill:currentColor;opacity:.72;transition:opacity .14s ease,filter .14s ease,transform .14s ease}.hand-icon.left{transform:scaleX(-1)}.curtain-btn.hand-btn.active .hand-icon{opacity:1;filter:drop-shadow(0 0 8px rgba(245,158,11,.5)) drop-shadow(0 0 14px rgba(245,158,11,.32))}@media (max-width: 768px){.play-control-curtain.visible{height:84px}.curtain-btn,.curtain-btn.play-btn{width:52px;height:52px}.play-icon{width:26px;height:26px;transform:translate(-46%,-50%)}.hand-icon{width:24px;height:24px}}.piano-keyboard-wrapper{width:100%;margin:var(--gap-xl) 0;display:flex;flex-direction:column;border-radius:var(--radius-lg);overflow:visible;box-shadow:var(--shadow-2xl);position:relative}.piano-keyboard-container{position:relative;width:100%}.piano-top-extension{width:100%;height:var(--falling-zone-height);background:var(--piano-frame-bg);border-radius:var(--radius-lg) var(--radius-lg) 0 0;border:1px solid var(--keyboard-border);border-bottom:none;box-shadow:inset 0 4px 8px #00000080}.piano-keyboard-wrapper.no-falling-notes .piano-keyboard{border-radius:0 0 var(--radius-lg) var(--radius-lg)}.piano-keyboard-wrapper.no-falling-notes .piano-top-extension,.piano-keyboard-wrapper.no-falling-notes .piano-keyboard{background:#111317}.piano-keyboard-wrapper.no-falling-notes .piano-top-extension{box-shadow:none}.piano-keyboard-wrapper.no-falling-notes .piano-keyboard{border-top:none;box-shadow:none}.falling-notes-zone{width:100%;height:var(--falling-zone-height);background:linear-gradient(to bottom,#0f142180,#151b2bcc);border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden;position:relative;border:1px solid var(--color-border);border-bottom:none;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);cursor:pointer}.falling-notes-zone.rising-notes{background:linear-gradient(to top,#0f142180,#151b2bcc)}.falling-notes-zone.rising-notes:after{bottom:0;top:auto}.falling-notes-track{position:relative;width:100%;height:100%;padding:0 var(--padding-lg)}.piano-keyboard{width:100%;padding:var(--padding-lg);background:var(--piano-frame-bg);border-radius:0 0 var(--radius-lg) var(--radius-lg);box-shadow:inset 0 4px 8px #00000080;border:1px solid var(--keyboard-border);border-top:none;overflow:visible;position:relative}.falling-note{position:absolute;border-radius:999px;display:flex;align-items:center;justify-content:center;transition:top .05s linear,bottom .05s linear,opacity .05s linear;box-shadow:0 4px 15px #0006,0 0 20px currentColor;animation:gentle-glow 1.5s ease-in-out infinite alternate;will-change:top,bottom,opacity;border:2px solid rgba(255,255,255,.2)}.falling-note.original-style{border-radius:var(--radius)}.falling-note.modern-style{border-radius:999px}.falling-note.rising-note{will-change:bottom,opacity}.falling-note.white-note{background:linear-gradient(135deg,var(--color-warning) 0%,#f59e0b 100%);color:var(--color-warning)}.falling-note.black-note{background:linear-gradient(135deg,#51b2ea,#2f8fd1);color:#51b2ea}.falling-note.off-hand-note{opacity:.22!important;filter:saturate(.4) brightness(.9);box-shadow:0 2px 8px #00000040;animation:none}.falling-note.off-hand-note .falling-note-label{opacity:.65}.falling-note-label{font-size:.8rem;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.8);pointer-events:none;letter-spacing:.5px}@keyframes gentle-glow{0%{filter:brightness(1);box-shadow:0 4px 15px #0006,0 0 20px currentColor}to{filter:brightness(1.3);box-shadow:0 4px 20px #00000080,0 0 30px currentColor}}.falling-notes-zone:after{content:"";position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent 0%,var(--color-primary) 20%,var(--color-accent) 50%,var(--color-primary) 80%,transparent 100%);pointer-events:none;z-index:10;box-shadow:0 0 20px var(--color-primary-glow)}.keyboard-container{position:relative;width:100%;margin:0 auto;height:var(--white-key-height);overflow:visible}.keyboard-container:before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:#111317;z-index:20;pointer-events:none}.white-keys{display:flex;gap:0;width:100%;position:relative;z-index:1;height:100%}.black-keys{position:absolute;top:0;left:0;width:100%;height:var(--black-key-height);z-index:5;pointer-events:none;display:flex;align-items:flex-start}.black-keys:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:#111317;pointer-events:none;z-index:6}.key{position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s ease,filter .12s ease;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;font-size:9px;font-weight:700;transform:translateY(0);will-change:transform,box-shadow,background}.white-key{flex:1;background:var(--white-key-bg);border:1px solid var(--white-key-border);border-top:none;border-radius:0 0 var(--radius-sm) var(--radius-sm);height:100%;min-width:20px;box-shadow:inset 0 1px #fffc,inset 0 -2px 4px #0000001a,0 4px 8px #0000004d;color:#666;pointer-events:auto;transition:transform .12s ease,box-shadow .12s ease,background .12s ease,filter .12s ease}.white-key:hover{background:var(--white-key-hover);transform:translateY(0);box-shadow:inset 0 1px #ffffffe6,inset 0 -2px 4px #0000000d,0 6px 12px #0006}.white-key.disabled{cursor:default}.white-key.disabled:hover{background:var(--white-key-bg);transform:none;box-shadow:inset 0 1px #ffffffd9,inset 0 -2px 4px #0000000a,0 4px 8px #00000052}.white-key.pressed{background:var(--white-key-pressed);filter:brightness(.97);box-shadow:inset 0 3px 8px #0000004d,inset 0 1px #ffffff4d,0 2px 4px #0003;transform:translateY(2px)}.white-key.highlighted{background:linear-gradient(180deg,#f5e7c7,#d9bc67);animation:highlight-pulse .45s ease-out;box-shadow:inset 0 1px #ffffff8c,0 4px 8px #00000059,0 0 10px #d9bc6759}.white-key.highlighted.pressed{background:linear-gradient(180deg,#dfba61,#c59f43);filter:brightness(.96);box-shadow:inset 0 3px 8px #0000004d,0 2px 4px #0003,0 0 12px #c59f4366}.black-key{position:absolute;background:var(--black-key-bg);border:1px solid rgba(0,0,0,.9);border-top:none;border-radius:0 0 var(--radius-xs) var(--radius-xs);pointer-events:auto;color:#999;top:0;z-index:10;box-shadow:inset 0 1px 3px #ffffff1a,inset 0 -2px 4px #000c,0 4px 10px #000000e6;font-size:8px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;transition:transform .12s ease,box-shadow .12s ease,background .12s ease,filter .12s ease}.black-key:hover{background:var(--black-key-hover);transform:translateY(0);box-shadow:inset 0 1px 3px #ffffff26,inset 0 -2px 4px #000000e6,0 6px 14px #000000f2}.black-key.disabled{cursor:default}.black-key.disabled:hover{background:var(--black-key-bg);transform:none;box-shadow:inset 0 1px 3px #ffffff1a,inset 0 -2px 4px #000c,0 4px 10px #000000e6}.black-key.pressed{background:var(--black-key-pressed);filter:brightness(.92);box-shadow:inset 0 4px 8px #000000e6,inset 0 1px 2px #ffffff1a,0 2px 6px #000c,0 -2px #111317;transform:translateY(2px)}.black-key.highlighted{background:linear-gradient(180deg,#b87d33,#8f5f24);animation:highlight-pulse .45s ease-out;box-shadow:inset 0 1px 3px #ffffff24,0 4px 12px #000000e6,0 0 10px #b87d3359}.black-key.highlighted.pressed{background:linear-gradient(180deg,#9a6828,#7c521f);filter:brightness(.94);box-shadow:inset 0 4px 8px #000000b3,0 2px 6px #000c,0 0 12px #9a682866}.key-label{opacity:.7;font-size:8px;white-space:nowrap}.key-fingering{position:absolute;top:8px;left:50%;transform:translate(-50%);min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;line-height:1;letter-spacing:.01em;color:#f8fafc;background:#0f172ad9;border:1px solid rgba(248,250,252,.22);box-shadow:0 2px 6px #0006;pointer-events:none;z-index:14}.white-key.highlighted .key-fingering{background:#3f2600d1;border-color:#ffe29380;color:#fff7df}.black-key .key-fingering{top:6px;background:#f8fafce6;border-color:#0f172a66;color:#0f172a}.black-key.highlighted .key-fingering{background:#ffdea4f0;border-color:#7a4d178c;color:#4a2800}.piano-keyboard.fingering-modern .key-fingering{top:auto;bottom:8px;min-width:0;height:auto;padding:0;border-radius:0;background:transparent;border:none;box-shadow:none;font-size:clamp(16px,1.35vw,22px);font-weight:900;letter-spacing:.03em}.piano-keyboard.fingering-modern .white-key .key-fingering{color:#f8fafc;text-shadow:none}.piano-keyboard.fingering-modern .black-key .key-fingering{bottom:4px;color:#0b0d10;text-shadow:none}.sparkles-canvas{position:absolute;left:0;right:0;bottom:6px;width:100%;height:160px;pointer-events:none;z-index:60}.key:focus{outline:none}.key:focus-visible{box-shadow:0 0 0 4px var(--focus-ring);border-radius:4px}@keyframes highlight-pulse{0%,to{filter:brightness(1);box-shadow:inset 0 1px #ffffff80,0 4px 8px #00000059,0 0 8px #d9bc674d}50%{filter:brightness(1.08);box-shadow:inset 0 1px #ffffff8c,0 4px 8px #00000061,0 0 12px #b87d3361}}.play-performance-mode .piano-keyboard-wrapper,.play-performance-mode .piano-top-extension,.play-performance-mode .piano-keyboard{box-shadow:none}.play-performance-mode .falling-notes-zone{backdrop-filter:none;-webkit-backdrop-filter:none}.play-performance-mode .falling-notes-zone:after{box-shadow:none}.play-performance-mode .sparkles-canvas{display:none}.play-performance-mode .falling-note{animation:none;box-shadow:none;filter:none;transition:opacity 50ms linear;will-change:auto;border-color:#ffffff3d}.play-performance-mode .falling-note.off-hand-note{filter:none;box-shadow:none}.play-performance-mode .key,.play-performance-mode .white-key,.play-performance-mode .black-key{transition:background-color 60ms linear,opacity 60ms linear;will-change:auto;filter:none}.play-performance-mode .white-key,.play-performance-mode .white-key:hover,.play-performance-mode .white-key.disabled:hover,.play-performance-mode .black-key,.play-performance-mode .black-key:hover,.play-performance-mode .black-key.disabled:hover{box-shadow:none}.play-performance-mode .white-key.pressed,.play-performance-mode .white-key.highlighted,.play-performance-mode .white-key.highlighted.pressed{background:#d7bd68;animation:none;box-shadow:none;filter:none;transform:translateY(1px)}.play-performance-mode .black-key.pressed,.play-performance-mode .black-key.highlighted,.play-performance-mode .black-key.highlighted.pressed{background:#9a6828;animation:none;box-shadow:none;filter:none;transform:translateY(1px)}.play-performance-mode .key-fingering{box-shadow:none;text-shadow:none}@media (max-width: 768px){.white-key{height:80px}.black-key{height:50px}.key-label{font-size:8px}}.guided-mode{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--padding-lg);margin:var(--gap-xl) 0;border:1px solid var(--color-border);box-shadow:var(--shadow-xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:fadeIn var(--transition-normal) ease-out}.guided-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--gap-lg);flex-wrap:wrap;gap:var(--gap)}.guided-header h2{margin:0;font-size:1.8rem;font-weight:700;background:linear-gradient(135deg,var(--color-accent) 0%,var(--color-primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:flex;align-items:center;gap:12px}.guided-header .controls{display:flex;gap:12px;justify-content:center;align-items:center}.play-btn,.reset-btn{padding:12px 24px;font-size:1rem;font-weight:600;border-radius:var(--radius);border:2px solid transparent;cursor:pointer;transition:all var(--transition-fast);position:relative;overflow:hidden}.play-btn{background:linear-gradient(135deg,var(--color-success) 0%,#059669 100%);color:#fff;border-color:var(--color-success)}.play-btn:hover{transform:translateY(-2px);box-shadow:0 0 20px #10b98166}.play-btn.playing{background:linear-gradient(135deg,var(--color-warning) 0%,#d97706 100%);border-color:var(--color-warning)}.play-btn.playing:hover{box-shadow:0 0 20px #f59e0b66}.reset-btn{background:var(--color-surface-elevated);color:var(--color-text);border-color:var(--color-border)}.reset-btn:hover{background:var(--color-surface-hover);border-color:var(--color-primary);transform:translateY(-2px)}.guided-content{display:flex;flex-direction:column;gap:var(--gap-lg)}.next-note-box{background:linear-gradient(135deg,var(--color-primary-light) 0%,transparent 100%);border:2px solid var(--color-primary);border-radius:var(--radius);padding:var(--padding);box-shadow:var(--shadow-glow)}.next-note-box h3{margin:0 0 var(--gap) 0;color:var(--color-text);font-size:1.2rem;font-weight:600}.note-display{display:flex;gap:12px;flex-wrap:wrap}.note-item{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);color:#fff;padding:14px 20px;border-radius:var(--radius);font-weight:700;box-shadow:var(--shadow-md);transition:all var(--transition-fast);display:flex;flex-direction:column;gap:4px;align-items:center}.note-item:hover{transform:translateY(-2px) scale(1.05);box-shadow:var(--shadow-lg)}.note-name{font-size:1.4rem}.note-midi{font-size:.85rem;opacity:.8}.progress-section{display:flex;flex-direction:column;gap:12px}.progress-bar{width:100%;height:12px;background:var(--color-surface-elevated);border-radius:999px;overflow:hidden;border:1px solid var(--color-border);position:relative;transition:all var(--transition-fast);cursor:pointer}.progress-bar:hover{height:16px;box-shadow:0 0 15px #6366f14d}.progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-accent) 100%);border-radius:999px;transition:width var(--transition-fast);position:relative;overflow:hidden}.progress-fill:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.progress-text{text-align:center;color:var(--color-text-secondary);font-weight:600;font-size:1rem;margin:0}.tempo-control{margin-top:var(--gap);padding:var(--padding);background:var(--color-surface-elevated);border-radius:var(--radius);border:1px solid var(--color-border)}.tempo-control label{display:flex;justify-content:space-between;align-items:center;color:var(--color-text-secondary);font-weight:500}.tempo-control span{color:var(--color-primary);font-weight:700;font-size:1.1rem}.view-btn.active{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-accent) 100%);color:#fff;border-color:transparent;box-shadow:var(--shadow-glow)}.autoplay-mode{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--padding-lg);margin:var(--gap-xl) 0;border:1px solid var(--color-border);box-shadow:var(--shadow-xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:fadeIn var(--transition-normal) ease-out}.autoplay-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--gap-lg);gap:var(--gap);flex-wrap:wrap}.autoplay-header h2{margin:0;font-size:1.8rem;font-weight:700;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:flex;align-items:center;gap:12px}.autoplay-header .controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.autoplay-header .controls button{padding:12px 24px;border:2px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface-elevated);color:var(--color-text);cursor:pointer;font-size:1rem;font-weight:600;transition:all var(--transition-fast)}.autoplay-header .controls button:hover{background:var(--color-surface-hover);border-color:var(--color-primary);transform:translateY(-2px)}.speed-control{display:flex;flex-direction:column;gap:8px;min-width:200px;padding:var(--padding);background:var(--color-surface-elevated);border-radius:var(--radius);border:1px solid var(--color-border)}.speed-control label{font-size:.9rem;font-weight:600;color:var(--color-text-secondary);display:flex;justify-content:space-between}.speed-control label span{color:var(--color-primary);font-weight:700}.speed-slider{width:100%;height:8px;border-radius:999px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-surface);border:1px solid var(--color-border);cursor:pointer;transition:all var(--transition-fast)}.speed-slider:hover{box-shadow:0 0 10px #6366f14d}.speed-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-md)}.speed-slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:var(--shadow-glow)}.speed-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);cursor:pointer;border:none;transition:all var(--transition-fast);box-shadow:var(--shadow-md);transition:all .2s ease}.speed-slider::-moz-range-thumb:hover{background:#ffed4e;transform:scale(1.2)}.autoplay-header .controls button:hover{background:#ffffff4d;transform:scale(1.05)}.autoplay-header .controls button.playing{background:#ff646499}.autoplay-content{background:#0003;border-radius:8px;padding:20px}.now-playing-box{margin-bottom:20px}.now-playing-box h3{margin:0 0 12px;font-size:16px;text-transform:uppercase;letter-spacing:1px;opacity:.9}.note-display{display:flex;flex-wrap:wrap;gap:10px}.note-item{background:#ffffff26;border:2px solid rgba(255,255,255,.3);border-radius:8px;padding:10px 15px;animation:pulse .6s ease-in-out}.note-name{font-weight:700;font-size:18px;display:block}.note-midi{font-size:12px;opacity:.8}.progress-section{margin-top:20px}.progress-bar{width:100%;height:8px;background:#0000004d;border-radius:4px;overflow:hidden;margin-bottom:12px;cursor:pointer}.progress-fill{height:100%;background:linear-gradient(90deg,#ff6b6b,#ffd93d);transition:width .1s linear}.time-display{text-align:center;font-size:14px;opacity:.9;margin-bottom:8px}.progress-text{text-align:center;margin:0;font-size:12px;opacity:.8}.view-toggle{display:inline-flex;align-items:center;gap:6px;padding:6px;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface-elevated)}.view-btn{padding:8px 12px;border:1px solid transparent;border-radius:var(--radius);background:transparent;color:var(--color-text-secondary);font-weight:600;transition:all var(--transition-fast);cursor:pointer}.view-btn:hover:not(:disabled){color:var(--color-text);border-color:var(--color-primary)}.view-btn.active{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);color:#fff;border-color:transparent;box-shadow:var(--shadow-glow)}.view-btn:disabled{opacity:.5;cursor:not-allowed}.live-audio-mode{margin-top:16px;padding:16px;border:1px solid #2b2d42;border-radius:12px;background:#0f172a;color:#e0e7ff;box-shadow:0 8px 24px #00000059}.live-audio-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.live-audio-header h2{margin:0;font-size:1.1rem}.live-audio-header p{margin:4px 0 0;opacity:.85;font-size:.92rem}.live-audio-btn{background:linear-gradient(135deg,#22d3ee,#3b82f6);color:#0b1021;border:none;border-radius:10px;padding:10px 18px;font-weight:700;cursor:pointer;box-shadow:0 6px 14px #22d3ee4d;transition:transform .15s ease,box-shadow .15s ease}.live-audio-btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px #22d3ee59}.live-audio-progress{margin-top:12px;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}.live-audio-progress input[type=range]{width:100%;accent-color:#3b82f6}.live-audio-progress .time{font-variant-numeric:tabular-nums;font-size:.9rem;opacity:.9}.site-header{--header-active-color: var(--color-warning);background:linear-gradient(180deg,#0a1224,#090f1f);padding:12px 0 10px;border-bottom:none;position:fixed;top:0;left:0;right:0;width:100%;z-index:1200;box-shadow:0 14px 30px #00000094}.site-header.visual-style-new{--header-active-color: #38bdf8;--header-active-glow: rgba(56, 189, 248, .62)}.site-header .container{max-width:1400px;margin:0 auto;padding:0 var(--padding);display:flex;align-items:center;gap:var(--gap-lg)}.site-header.is-premium-layout .container{max-width:none;padding-left:clamp(20px,2.8vw,36px);padding-right:clamp(20px,2.8vw,36px);gap:12px}.brand{font-weight:600;display:flex;align-items:center;gap:9px;font-size:1.4rem;transition:transform var(--transition-fast),opacity var(--transition-fast)}.brand:hover{transform:translateY(-1px);opacity:.96}.brand>svg{width:auto;height:38px}.brand-name{font-size:1.58rem;background:linear-gradient(135deg,#f59e0b,#f97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;letter-spacing:-.25px}.site-header.visual-style-new .brand-name{background:linear-gradient(135deg,#60a5fa,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.nav{margin-left:auto;display:flex;gap:36px}.actions{display:flex;align-items:center;gap:30px;margin-left:26px}.site-header.is-premium-layout .nav{order:1;margin-left:0;gap:24px}.site-header.is-premium-layout .actions{order:2;margin-left:auto;gap:0}.site-header.is-premium-layout .brand{order:3;margin-left:10px;flex-direction:row-reverse}.header-nav-btn.ui-btn-ghost,.header-action-btn.ui-btn-ghost{color:var(--color-text-secondary);background:transparent;border:none;box-shadow:none;border-radius:0;padding:0;overflow:visible;flex-direction:row;justify-content:center;gap:4px;line-height:1.1;font-size:1rem;font-weight:600;transition:color var(--transition-fast),transform var(--transition-fast),opacity var(--transition-fast)}.header-nav-btn.is-active.ui-btn-ghost,.header-action-btn.is-active.ui-btn-ghost{color:var(--header-active-color);background:transparent;box-shadow:none}.site-header.visual-style-new .header-nav-btn.is-active.ui-btn-ghost,.site-header.visual-style-new .header-action-btn.is-active.ui-btn-ghost{text-shadow:0 0 10px var(--header-active-glow)}.header-nav-btn.is-active.ui-btn-ghost .nav-icon,.header-action-btn.is-active.ui-btn-ghost .nav-icon{color:var(--header-active-color)}.site-header.visual-style-new .header-nav-btn.is-active.ui-btn-ghost .nav-icon,.site-header.visual-style-new .header-action-btn.is-active.ui-btn-ghost .nav-icon{filter:drop-shadow(0 0 6px var(--header-active-glow)) saturate(1.2)}.header-nav-btn.is-active.ui-btn-ghost:hover,.header-action-btn.is-active.ui-btn-ghost:hover{color:var(--header-active-color);background:transparent}.header-nav-btn.ui-btn-ghost:hover,.header-action-btn.ui-btn-ghost:hover{background:transparent;color:var(--color-text);transform:translateY(-1px)}.header-nav-btn.ui-btn-ghost:focus,.header-nav-btn.ui-btn-ghost:focus-visible,.header-action-btn.ui-btn-ghost:focus,.header-action-btn.ui-btn-ghost:focus-visible{outline:none;box-shadow:none;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}.header-nav-btn.ui-btn-ghost:active,.header-action-btn.ui-btn-ghost:active{transform:translateY(0)}.header-nav-btn.ui-btn-ghost:before,.header-action-btn.ui-btn-ghost:before{content:none}.nav-icon{width:27px;height:27px;display:inline-block;vertical-align:middle;color:inherit;flex-shrink:0}.header-nav-btn .nav-icon{margin-right:4px}.header-action-btn .nav-icon{margin-right:0;opacity:.9}.header-action-btn.ui-btn-ghost{opacity:.82}.header-action-btn.ui-btn-ghost:hover,.header-action-btn.ui-btn-ghost:focus-visible{opacity:1}.settings-icon{color:inherit}.midi-badge{position:absolute;left:50%;top:100%;transform:translate(-50%,-40%);padding:8px 12px;border-radius:12px;font-size:.95rem;box-shadow:0 8px 28px #02061773,0 2px 6px #0003;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;z-index:120;white-space:nowrap;max-width:calc(100% - 48px);text-align:center;display:none}.midi-badge.midi-green{background:linear-gradient(90deg,#10b981,#06b6d4)}.midi-badge.midi-orange{background:linear-gradient(90deg,#f59e0b,#fb923c)}.midi-badge.midi-red{background:linear-gradient(90deg,#ef4444,#dc2626)}@media (max-width: 768px){.midi-badge{left:50%;transform:translate(-50%,-25%);font-size:.85rem;padding:6px 10px}}.help-icon,.docs-icon,.import-icon,.morceaux-icon{color:inherit}.courses-icon{transform:scale(1.32);transform-origin:center}@media (max-width: 768px){.site-header .container{padding:0 var(--padding);flex-wrap:wrap;row-gap:8px}.brand{font-size:1.2rem}.brand>svg{width:40px;height:40px}.brand-name{font-size:1.28rem}.nav{order:3;width:100%;margin-left:0;gap:18px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding:2px 2px 4px;scrollbar-width:thin}.nav::-webkit-scrollbar{height:6px}.nav::-webkit-scrollbar-thumb{background:#7c92b259;border-radius:999px}.actions{margin-left:auto;gap:0}.header-nav-btn.ui-btn-ghost{font-size:.92rem}.nav-icon{width:23px;height:23px}.header-nav-btn .nav-icon{margin-right:3px}}.ui-btn{border-radius:var(--radius);padding:10px 18px;font-weight:600;font-size:.95rem;font-family:inherit;cursor:pointer;border:2px solid transparent;transition:all var(--transition-fast);position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px}.ui-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff26;transform:translate(-50%,-50%);transition:width .6s,height .6s}.ui-btn:active:before{width:300px;height:300px}.ui-btn-primary{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);color:#fff;box-shadow:var(--shadow-md);border-color:var(--color-primary)}.ui-btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow),var(--shadow-lg)}.ui-btn-secondary{background:var(--color-surface-elevated);color:var(--color-text);border-color:var(--color-border)}.ui-btn-secondary:hover{background:var(--color-surface-hover);border-color:var(--color-primary);transform:translateY(-2px)}.ui-btn-ghost{background:transparent;color:var(--color-text-secondary);border:none}.ui-btn-ghost:hover{color:var(--color-text);background:var(--color-surface-elevated)}.ui-btn-danger{background:linear-gradient(135deg,var(--color-error) 0%,#dc2626 100%);color:#fff;border-color:var(--color-error);box-shadow:var(--shadow-md)}.ui-btn-danger:hover{transform:translateY(-2px);box-shadow:0 0 20px #ef444466,var(--shadow-lg)}.ui-btn:active{transform:translateY(1px)}.ui-btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.language-switcher{position:relative;display:inline-flex;min-width:132px}.language-switcher-trigger,.language-switcher-option{width:100%;border:0;cursor:pointer;color:#f8fafc;font:inherit}.language-switcher-trigger{display:inline-flex;align-items:center;gap:.72rem;min-height:46px;justify-content:center;padding:.55rem .9rem;border-radius:14px;background:linear-gradient(180deg,#ffffff0f,#ffffff05),#0f172ab8;box-shadow:inset 0 1px #ffffff0f,0 14px 34px #0206173d;transition:background .16s ease,box-shadow .16s ease,transform .16s ease}.language-switcher-trigger:hover,.language-switcher-trigger:focus-visible{outline:none;background:linear-gradient(180deg,#ffffff14,#ffffff08),#0f172ad1;box-shadow:inset 0 1px #ffffff14,0 18px 40px #0206174d}.language-switcher.is-open .language-switcher-trigger{background:linear-gradient(180deg,#60a5fa33,#3b82f614),#0f172ae0}.language-switcher-flag{flex:0 0 auto;width:18px;height:12px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border-radius:3px;box-shadow:0 0 0 1px #ffffff14}.language-switcher-flag-svg{display:block;width:100%;height:100%}.language-switcher-language{font-size:.9rem;font-weight:700;line-height:1.1}.language-switcher-menu{position:absolute;top:calc(100% + .55rem);left:0;right:0;z-index:40;display:flex;flex-direction:column;gap:.28rem;padding:.38rem;border-radius:16px;background:linear-gradient(180deg,#0f172af5,#090f1cfa);box-shadow:0 24px 56px #02061761,inset 0 1px #ffffff0d;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.language-switcher-option{display:inline-flex;align-items:center;gap:.72rem;justify-content:flex-start;padding:.68rem .8rem;border-radius:12px;background:transparent;text-align:left;transition:background .16s ease,transform .16s ease}.language-switcher-option:hover,.language-switcher-option:focus-visible{outline:none;background:#94a3b81f}.language-switcher-option.is-active{background:linear-gradient(90deg,#38bdf82e,#60a5fa24)}@media (max-width: 720px){.language-switcher{min-width:100%}}.settings-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#060a1299;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:2000;animation:settingsFadeIn var(--transition-fast) ease-out}.settings-panel{width:min(900px,calc(100% - 32px));max-width:calc(100% - 32px);max-height:calc(100vh - 32px);display:flex;flex-direction:column;background:linear-gradient(180deg,#1a263cf7,#111b2ef7);color:var(--color-text);border-radius:18px;padding:1.2rem 1.25rem;box-shadow:0 22px 60px #00000080;border:none;animation:settingsPopIn var(--transition-normal) ease-out}.settings-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--gap-lg);padding-bottom:var(--gap);border-bottom:none}.settings-header-left{display:flex;align-items:center;gap:.55rem;min-width:0}.settings-header h3{margin:0;font-size:1.35rem;font-weight:700;color:#fff}.settings-back-btn,.settings-back-spacer{width:22px;height:22px;flex:0 0 22px}.settings-back-btn{border:none;background:transparent;color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:transform var(--transition-fast),opacity var(--transition-fast)}.settings-back-btn:hover{opacity:.85;transform:scale(1.08)}.settings-back-btn:focus-visible{outline:none}.settings-back-btn svg{width:22px;height:22px;display:block}.close-btn{background:transparent;border:none;cursor:pointer;font-size:0;color:var(--color-text-secondary);width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.close-btn:hover{background:#51b2ea2e;color:#fff;transform:scale(1.05)}.close-btn svg{width:18px;height:18px;display:block}.settings-layout{display:grid;grid-template-columns:minmax(240px,280px) minmax(0,1fr);gap:1rem}.settings-menu{display:flex;flex-direction:column;gap:.55rem;padding:.2rem}.settings-menu-page{padding:.2rem .2rem .45rem;overflow-y:auto;flex:1;min-height:0}.settings-menu-item{width:100%;text-align:left;padding:.72rem .85rem;border-radius:12px;border:none;background:#ffffff08;color:var(--color-text);font-weight:600;font-size:.96rem;cursor:pointer;transition:background-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)}.settings-menu-item.is-premium{background:linear-gradient(135deg,#51b2ea33,#51b2ea0f);color:#bce8ff}.settings-menu-item.is-active{background:#51b2ea33;color:#fff;box-shadow:0 8px 24px #51b2ea33}.settings-menu-item:not(.is-disabled):hover{background:#51b2ea1f;transform:translateY(-1px)}.settings-menu-item.is-disabled{opacity:.62;cursor:not-allowed}.settings-content{padding:.2rem;display:flex;flex-direction:column;gap:.65rem}.settings-section-page{padding:.2rem .2rem .45rem;overflow-y:auto;flex:1;min-height:0}.settings-content h4{margin:0 0 .8rem;font-size:1.05rem;font-weight:700;color:#fff}.setting-item{display:flex;align-items:center;justify-content:space-between;padding:var(--padding);background:#ffffff0a;border-radius:12px;border:none;transition:all var(--transition-fast)}.setting-item:hover{background:#ffffff12}.setting-item label{font-weight:600;color:var(--color-text);font-size:1rem}.settings-account-email-value{font-weight:600;color:#94a3b8eb;text-transform:uppercase;word-break:break-all;text-align:right}.setting-actions{display:flex;gap:12px}.settings-style-selector{display:inline-flex;align-items:center;gap:6px;padding:4px;border-radius:999px;background:#94a3b829}.settings-style-option{border:none;border-radius:999px;padding:6px 12px;background:transparent;color:#d5deed;font-weight:700;cursor:pointer;transition:background-color var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast)}.settings-style-option:hover{color:#fff}.settings-style-option.is-active{color:#fff;background:linear-gradient(135deg,#0ea5e9,#38bdf8);box-shadow:0 8px 18px #0ea5e952}.toggle{width:22px;height:22px;padding:0;border-radius:50%;border:none;cursor:pointer;background:transparent;color:#51b2ea;transition:transform var(--transition-fast),opacity var(--transition-fast),background-color var(--transition-fast);box-shadow:none;display:inline-flex;align-items:center;justify-content:center}.toggle:hover{opacity:.9;transform:scale(1.06)}.toggle:focus,.toggle:focus-visible{outline:none;box-shadow:none}.toggle.on{background:#51b2ea}.toggle.off{background:transparent}.toggle-dot{width:100%;height:100%;border-radius:50%;border:2px solid #51b2ea;display:block}.toggle.on .toggle-dot{border-color:transparent}.settings-open-admin-btn{border:none;border-radius:10px;padding:8px 14px;background:#51b2ea2e;color:#d5f0ff;font-weight:700;cursor:pointer;transition:background-color var(--transition-fast),transform var(--transition-fast)}.settings-open-admin-btn:hover{background:#51b2ea4d;transform:translateY(-1px)}.settings-logout-btn{border:none;border-radius:10px;padding:8px 14px;background:#ef444429;color:#fecaca;font-weight:700;cursor:pointer;transition:background-color var(--transition-fast),transform var(--transition-fast)}.settings-logout-btn:hover{background:#ef444447;transform:translateY(-1px)}.settings-text-input{width:220px;max-width:46vw;padding:8px 12px;border-radius:10px;border:1px solid rgba(148,163,184,.22);background:#0f172a59;color:#fff;font-weight:600;outline:none}.settings-text-input.is-plain{width:auto;max-width:min(46vw,320px);padding:0;border:0;background:transparent;box-shadow:none;color:var(--color-text);text-align:right;-webkit-appearance:none;-moz-appearance:none;appearance:none}.settings-text-input:focus{border-color:#51b2eaa6;box-shadow:0 0 0 3px #51b2ea2e}.settings-text-input.is-plain:focus{border-color:transparent;box-shadow:none}.settings-text-input.is-readonly{opacity:.9;cursor:default}.settings-save-btn{border:none;border-radius:10px;padding:8px 14px;background:#51b2ea2e;color:#d5f0ff;font-weight:800;cursor:pointer;transition:background-color var(--transition-fast),transform var(--transition-fast),opacity var(--transition-fast)}.settings-save-btn:hover{background:#51b2ea4d;transform:translateY(-1px)}.settings-save-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.settings-inline-error{margin-top:-.25rem;padding:.5rem .75rem;border-radius:12px;background:#ef444424;border:1px solid rgba(239,68,68,.24);color:#fecaca;font-weight:650}@media (max-width: 840px){.settings-panel{width:min(640px,calc(100% - 24px));padding:1rem}.settings-layout{grid-template-columns:1fr;gap:.75rem}}@keyframes settingsFadeIn{0%{opacity:0}to{opacity:1}}@keyframes settingsPopIn{0%{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.premium-checkout-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:radial-gradient(circle at top,rgba(34,211,238,.14),transparent 34%),#020614ad;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.premium-checkout-modal{position:relative;width:min(1040px,100%);max-height:min(92vh,920px);border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:linear-gradient(155deg,#050c1cf5,#081429ed);box-shadow:0 34px 120px #0000007a}.premium-checkout-layout{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);min-height:620px;max-height:min(92vh,920px)}.premium-checkout-summary{padding:2.25rem;background:linear-gradient(180deg,#22d3ee2e,#3b82f614),radial-gradient(circle at top left,rgba(255,209,102,.14),transparent 40%);border-right:1px solid rgba(255,255,255,.08);overflow-y:auto}.premium-checkout-summary{display:flex;flex-direction:column;justify-content:flex-start}.premium-checkout-summary-sep{height:1px;background:linear-gradient(90deg,#ffffff0f,#ffffff05);margin:3.5rem 0 .6rem}.premium-checkout-summary-bottom{margin-top:.6rem}.premium-checkout-badge{display:inline-flex;padding:.35rem .8rem;border-radius:999px;background:#ffffff14;color:#dff8ff;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.premium-checkout-summary h2{margin:1.1rem 0 .5rem;font-size:2rem;line-height:1.05;color:#fff}.premium-checkout-price{margin:1.6rem 0 0;font-size:1.05rem;font-weight:400;font-family:inherit;color:#fff}.premium-checkout-cadence,.premium-checkout-trial{margin:.5rem 0 0;color:#e8f1ffcc}.premium-checkout-trial-note{margin:.5rem 0 0;color:#e8f1ffb8;font-size:.95rem;display:flex;align-items:center;gap:.7rem;padding-left:.4rem}.premium-checkout-free-note{margin:.5rem 0 0;color:#e8f1ffc7;font-size:.96rem;display:flex;align-items:center;gap:.7rem;padding-left:.4rem}.premium-checkout-free-note:before,.premium-checkout-trial-note:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#ffffff2e;flex:0 0 auto}.premium-checkout-cancel-note{margin:.9rem 0 0;color:#e8f1ffad;font-size:.92rem;font-weight:700}.premium-checkout-benefits{margin:2rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.9rem}.premium-checkout-benefits li{position:relative;padding-left:1.6rem;color:#eff7ff;line-height:1.45}.premium-checkout-benefits li:before{content:"";position:absolute;left:0;top:.58rem;width:.5rem;height:.5rem;border-radius:999px;background:linear-gradient(135deg,#22d3ee,#60a5fa);box-shadow:0 0 18px #22d3ee66}.premium-checkout-panel{padding:2.25rem;display:flex;flex-direction:column;min-height:0;overflow:hidden}.premium-checkout-panel-head h3{margin:0;color:#fff;font-size:1.5rem}.premium-checkout-panel-head p{margin:.45rem 0 0;color:#e8f1ffb8}.premium-checkout-form{margin-top:1.6rem;display:flex;flex-direction:column;min-height:0;flex:1 1 auto}.premium-checkout-element-wrap{flex:1 1 auto;min-height:320px;overflow-y:auto;overscroll-behavior:contain;max-height:calc(min(92vh,920px) - 250px);padding:1rem;border-radius:20px;background:#ffffff08;border:none;position:relative}.premium-checkout-element-host{opacity:0;transition:opacity .18s ease}.premium-checkout-element-host.is-ready{opacity:1}.premium-checkout-skeleton{position:absolute;top:1rem;right:1rem;bottom:1rem;left:1rem;display:flex;flex-direction:column;gap:.9rem;pointer-events:none}.premium-checkout-skeleton-line{display:block;border-radius:12px;background:linear-gradient(90deg,#ffffff0f,#ffffff1c,#ffffff0f);background-size:220% 100%;animation:premium-checkout-skeleton-shimmer 1.2s linear infinite}.premium-checkout-skeleton-line-title{width:30%;height:18px}.premium-checkout-skeleton-line-input,.premium-checkout-skeleton-line-row,.premium-checkout-skeleton-line-select{width:100%;height:52px}.premium-checkout-skeleton-line-copy{width:88%;height:74px}@keyframes premium-checkout-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-20% 0}}.premium-checkout-inline-message{margin:1rem 0 0;color:#ffd7de}.premium-checkout-actions{display:flex;gap:.9rem;justify-content:flex-end;margin-top:1.4rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#08142900,#081429eb 28%);position:sticky;bottom:0}.premium-checkout-secondary,.premium-checkout-submit{border:none;border-radius:14px;font-weight:800;cursor:pointer;padding:.95rem 1.25rem}.premium-checkout-secondary{background:#ffffff0d;color:#e5f1ff}.premium-checkout-submit{color:#06131c;background:linear-gradient(100deg,#22d3ee,#60a5fa);box-shadow:0 18px 40px #22d3ee33}.premium-checkout-secondary:disabled,.premium-checkout-submit:disabled{opacity:.55;cursor:not-allowed}.premium-checkout-close{position:absolute;top:1rem;right:1rem;z-index:2;width:40px;height:40px;border:none;border-radius:8px;background:transparent;color:#fff;display:inline-grid;place-items:center;padding:6px;cursor:pointer}.premium-checkout-close svg{display:block;width:20px;height:20px}.premium-checkout-close:hover{background:#ffffff0a;transform:translateY(-1px)}.premium-checkout-close:active{transform:translateY(0)}.premium-checkout-config-error{padding:3rem;color:#fff}@media (max-width: 900px){.premium-checkout-modal,.premium-checkout-layout{max-height:none}.premium-checkout-layout{grid-template-columns:1fr}.premium-checkout-summary{border-right:none;border-bottom:1px solid rgba(255,255,255,.08);max-height:34vh}.premium-checkout-element-wrap{max-height:none}}@media (max-width: 640px){.premium-checkout-overlay{padding:.8rem}.premium-checkout-summary,.premium-checkout-panel{padding:1.25rem}.premium-checkout-actions{flex-direction:column-reverse}.premium-checkout-secondary,.premium-checkout-submit{width:100%}}.premium-page{color:#fff;padding:3.2rem 1.2rem;display:flex;flex-direction:column;gap:1.6rem;align-items:center;min-height:100vh;width:100%;position:relative;overflow:hidden}.premium-page:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background:linear-gradient(180deg,#05081273,#040812a6);pointer-events:none}.premium-page:after{content:"";position:absolute;left:0;right:0;top:0;height:240px;z-index:2;background:linear-gradient(180deg,#040812d1,#04081200);pointer-events:none}.premium-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background:url(/assets/landingpiano-9Gd3mMt-.png) center/cover no-repeat;filter:blur(8px) saturate(1.05);transform:scale(1.03);pointer-events:none;transition:filter .32s ease,opacity .32s ease,transform .32s ease;will-change:filter,opacity,transform}.premium-hero{width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem;padding:0 1rem;position:relative;z-index:3}.premium-back{position:absolute;left:16px;top:16px;z-index:10;background:transparent;border:none;color:#fff;padding:8px;border-radius:8px;display:inline-grid;place-items:center;cursor:pointer}.premium-back:hover{background:#ffffff0a}.premium-title{margin:0;font-size:1.6rem;font-weight:800;letter-spacing:-.02em;text-align:center;color:#fff}.premium-subtitle{margin:0;max-width:720px;text-align:center;color:#e8f1ffc7;font-size:1rem;line-height:1.5}.billing-toggle{display:inline-flex;background:#ffffff08;border-radius:999px;padding:4px;box-shadow:0 10px 28px #02061480}.billing-btn{border:none;background:transparent;color:#ffffffe6;padding:6px 14px;height:34px;line-height:22px;border-radius:999px;font-weight:700;cursor:pointer;font-size:.95rem}.billing-btn.is-active{background:linear-gradient(90deg,var(--brand-blue) 0%,var(--brand-blue-2) 100%);color:#02121b;box-shadow:0 10px 30px #22d3ee1f,0 6px 20px #60a5fa1f}.plans-row{width:100%;display:flex;gap:1rem;justify-content:center;margin-top:1.6rem;padding:0 1rem;position:relative;z-index:3}.plans-row{align-items:center}.plan-card{background:linear-gradient(180deg,var(--brand-blue) 0%,var(--color-primary) 100%);border-radius:14px;position:relative;padding:.9rem;width:100%;max-width:300px;min-height:280px;display:flex;flex-direction:column;gap:.9rem;align-items:center;text-align:center;box-shadow:0 12px 36px #06182e5c;border:1px solid rgba(255,255,255,.06);z-index:3;cursor:pointer;border:none;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}.plan-card.is-premium{min-height:360px;padding:1rem;box-shadow:0 24px 80px #22d3ee29,0 12px 44px #0f6ef429;background:linear-gradient(180deg,#60a5faf7,#6a66e4fa);filter:drop-shadow(0 6px 26px rgba(34,211,238,.07))}.plan-card.is-premium.is-selected{transform:translateY(-5px);box-shadow:0 32px 100px #22d3ee33,0 16px 56px #0f6ef42e;border:2px solid rgba(255,255,255,.98)}.recommended-badge{position:absolute;top:-10px;right:-10px;background:linear-gradient(90deg,#ffd166,#ffaf40);color:#08121b;font-weight:800;font-size:.75rem;padding:6px 10px;border-radius:999px;box-shadow:0 6px 18px #00000040;z-index:6;white-space:nowrap}.plan-title{font-weight:900;font-size:1.35rem;text-align:center;line-height:1.05;text-decoration:underline;text-decoration-color:#fffffff2;text-decoration-thickness:2px;text-underline-offset:8px;text-decoration-skip-ink:none}.plan-copy{margin:0;color:#ffffffdb;font-weight:700;line-height:1.45}.plan-bullets{margin:0;padding:0 1.2rem;list-style:none;color:#fffffff2;font-weight:600;text-align:left;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;flex:1}.plan-bullets li{margin:.55rem 0;font-size:1rem;line-height:1.5;display:flex;align-items:center;justify-content:flex-start;gap:.8rem;width:100%}.plan-bullets li:before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:#ffffff47;box-shadow:inset 0 0 0 1px #0000000a;flex:0 0 auto}.plan-price{display:flex;gap:.6rem;align-items:baseline;margin-top:auto;justify-content:center}.price-main{font-size:1.4rem;font-weight:900;color:#fff}.price-cross{font-size:.95rem;color:#ffffff59;text-decoration:line-through}.plan-footnote{color:#ffffffb3;font-size:.9rem;line-height:1.45}.plan-card:focus-visible{outline:3px solid rgba(96,165,250,.22);outline-offset:4px}.plan-card.is-selected{box-shadow:0 20px 60px #22d3ee2e,0 8px 28px #0f6ef41f;transform:translateY(-4px);border:2px solid rgba(255,255,255,.95)}@media (max-width: 980px){.plans-row{flex-direction:column;align-items:center}.premium-title{font-size:1.3rem}.plan-card{min-height:220px;width:calc(100% - 2rem);max-width:720px}}.next-step-row{width:100%;display:flex;justify-content:center;margin-top:3rem;z-index:3}.premium-inline-error{margin:0;z-index:3;color:#ffd7de;font-weight:700;text-align:center}.premium-success-card{position:relative;z-index:3;margin-top:8rem;width:min(720px,calc(100% - 2rem));padding:2rem;border-radius:28px;background:linear-gradient(180deg,#0c182ee6,#070f1deb);border:1px solid rgba(255,255,255,.08);box-shadow:0 28px 90px #00000061;text-align:center}.premium-success-badge{display:inline-flex;padding:.4rem .8rem;border-radius:999px;background:#22d3ee24;color:#dff8ff;font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:.78rem}.premium-success-copy{margin:1rem auto 1.8rem;max-width:560px;color:#e8f1ffd1;line-height:1.6}.next-step-btn{background:linear-gradient(100deg,#22d3ee,#3b82f6,#22d3ee);background-size:200% 100%;color:#fff;border:none;padding:14px 32px;border-radius:12px;font-weight:800;font-size:1.05rem;cursor:pointer;box-shadow:0 0 0 1px #22d3ee26,0 4px 18px #22d3ee38,0 12px 40px #22d3ee24;transition:background-position .6s ease,transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease,opacity .22s ease;animation:btn-gradient-shift 4s linear infinite;min-width:320px;max-width:220px;width:clamp(260px,45%,420px);text-align:center}@keyframes btn-gradient-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.next-step-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 0 1px #22d3ee47,0 6px 24px #22d3ee61,0 18px 52px #22d3ee38;background-position:100% 50%}.next-step-btn:active:not(:disabled){transform:translateY(0);box-shadow:0 0 0 1px #22d3ee33,0 4px 16px #22d3ee42}.next-step-btn:disabled{opacity:.5;cursor:not-allowed}.promo-row{width:70%;display:flex;gap:.8rem;justify-content:center;align-items:center;margin-top:1.6rem;z-index:3}.promo-field{position:relative;width:clamp(260px,48%,620px)}.promo-input{padding:14px 52px 14px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,#ffffff06,#ffffff05);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;width:100%;font-weight:700;outline:none;box-shadow:0 6px 26px #22d3ee0f;transition:box-shadow .26s ease,border-color .2s ease,transform .2s cubic-bezier(.2,.9,.2,1);animation:promo-pulse 6s ease-in-out infinite}.promo-input::placeholder{color:#fff9;font-weight:600}.promo-input:focus{border-color:#22d3eef2;box-shadow:0 8px 34px #22d3ee38,0 0 0 6px #22d3ee0f;transform:translateY(-1px);animation-play-state:paused}@keyframes promo-pulse{0%{box-shadow:0 6px 26px #22d3ee0a}50%{box-shadow:0 8px 34px #22d3ee12}to{box-shadow:0 6px 26px #22d3ee0a}}.promo-icon-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:inline-grid;place-items:center;background:transparent;color:#fff;border:none;padding:0;width:34px;height:34px;box-shadow:0 6px 18px #22d3ee0f;border-radius:999px;cursor:pointer}.promo-icon-btn svg{display:block;width:18px;height:18px}.promo-icon-btn:hover{transform:translateY(-50%) scale(1.06);background:transparent!important;box-shadow:0 10px 30px #22d3ee1f!important}.promo-icon-btn:focus,.promo-icon-btn:active,.promo-icon-btn:focus-visible{outline:none!important;box-shadow:0 10px 30px #22d3ee29!important;background:transparent!important}.recordings-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn var(--duration-fast) var(--ease-out)}.recordings-modal{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-2xl);max-width:700px;width:90%;max-height:80vh;display:flex;flex-direction:column;border:1px solid var(--color-border);animation:slideIn var(--duration-normal) var(--ease-out)}.recordings-header{padding:var(--padding-lg);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between}.recordings-header h2{margin:0;font-size:1.5rem;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.recordings-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--color-text-secondary);padding:var(--gap);transition:all var(--duration-fast) var(--ease-out);border-radius:var(--radius)}.recordings-close:hover{color:var(--color-text);background:var(--color-border);transform:rotate(90deg)}.recordings-list{flex:1;overflow-y:auto;padding:var(--padding-lg)}.recordings-empty{text-align:center;padding:var(--padding-xl) var(--padding-lg);color:var(--color-text-secondary)}.recordings-empty p:first-child{font-size:1.2rem;margin-bottom:var(--gap)}.recordings-hint{font-size:.9rem;opacity:.7}.recording-item{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--padding-lg);margin-bottom:var(--gap-lg);display:flex;justify-content:space-between;align-items:center;transition:all var(--duration-fast) var(--ease-out)}.recording-item:hover{border-color:var(--color-primary);box-shadow:0 4px 12px #6366f11a;transform:translateY(-2px)}.recording-info{flex:1}.recording-info h3{margin:0 0 var(--gap) 0;font-size:1.1rem;color:var(--color-text)}.recording-meta{display:flex;gap:var(--gap-lg);font-size:.85rem;color:var(--color-text-secondary)}.recording-meta span{display:flex;align-items:center;gap:4px}.recording-actions{display:flex;gap:var(--gap)}.btn-sm{padding:8px 16px;font-size:.9rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.recordings-list::-webkit-scrollbar{width:8px}.recordings-list::-webkit-scrollbar-track{background:var(--color-bg);border-radius:var(--radius)}.recordings-list::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius)}.recordings-list::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}.midi-importer{width:100%;max-width:600px;margin:0}.drop-zone{border:2px dashed var(--color-border);border-radius:var(--radius-lg);padding:var(--padding-lg);text-align:center;background:var(--color-surface);cursor:pointer;transition:all var(--transition-fast);position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.drop-zone:hover{border-color:var(--color-primary);background:var(--color-surface-hover);transform:translateY(-2px);box-shadow:var(--shadow-lg),0 0 30px #6366f126}.drop-zone h3{margin:0 0 var(--gap) 0;color:var(--color-text);font-size:1.4rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:10px}.drop-zone h3.sheet-import-title{align-items:flex-start}.sheet-import-title-text{display:inline-block;text-align:left;line-height:1.25}.icon-import-midi,.icon-import-sheet{width:40px;height:40px;flex:0 0 40px;display:inline-flex;align-items:center;justify-content:center}.drop-zone p{margin:10px 0;color:var(--color-text-secondary);font-size:1rem}.drop-zone p.file-types{font-size:.85rem;color:var(--color-text-muted);margin-top:var(--gap);font-family:var(--font-mono)}.loaded-info{margin-top:var(--gap);background:var(--color-surface-elevated);border:1px solid var(--color-border);padding:var(--padding);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;gap:12px;animation:fadeIn var(--transition-normal) ease-out}.loaded-info p{margin:0;color:var(--color-text);font-weight:500}.loaded-info strong{color:var(--color-primary);font-weight:700}.file-input{display:none}.drop-zone:has(.file-input:hover){border-color:var(--color-primary);background:var(--color-surface-hover)}.loading{color:var(--color-warning);margin-top:var(--gap);font-weight:700;animation:pulse 1.5s ease-in-out infinite}.drop-zone.disabled{opacity:.5;pointer-events:none;filter:grayscale(.5)}.drop-zone.hatched{opacity:.95;background-image:repeating-linear-gradient(45deg,#6366f108 0,#6366f108 8px,#0000 8px,#0000 16px);box-shadow:inset 0 0 0 1px var(--color-border)}.drop-zone.hatched .file-input{pointer-events:none}.loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0a0e1ad9;border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:10;color:#fff;gap:12px;padding:20px}.spinner{width:48px;height:48px;border-radius:50%;border:6px solid rgba(255,255,255,.15);border-top-color:#646cff;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{font-weight:600;color:#fff;text-align:center}.progress-container{margin-top:12px;width:100%;display:flex;flex-direction:column;align-items:center}.progress-label{color:#ffffffe6;font-weight:600;margin-bottom:8px}.progress-bar{width:100%;height:8px;background:#ffffff1a;border-radius:4px;margin-top:10px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#646cff,#535bf2);transition:width .2s ease;border-radius:4px}.error{color:#ff6b6b;margin-top:20px;font-weight:700}.import-warnings{margin-top:14px;width:100%;padding:10px 12px;border:1px solid rgba(255,193,7,.35);border-radius:10px;background:#ffc10714}.warning{margin:6px 0;color:#ffdd85f2;font-weight:600;font-size:.95rem}.imports-page{width:100%;max-width:1200px;margin:0 auto;padding:2rem;font-family:var(--font-sans)}.imports-page-title{margin:0 0 1.25rem;font-size:clamp(2rem,4vw,2.6rem);line-height:1.05;font-weight:800;color:var(--text-primary, var(--color-text))}.imports-page-content{display:flex;flex-direction:column;gap:1.5rem}.imports-page.premium-layout .imports-page-content{display:grid;grid-template-columns:var(--imports-left-panel-width) minmax(520px,1fr);gap:var(--imports-columns-gap);align-items:stretch;flex:1;min-height:0}.imports-page.premium-layout{--imports-left-panel-width: 560px;--imports-columns-gap: 2rem;max-width:none;margin:0;height:100%;display:flex;flex-direction:column;overflow:hidden;padding-top:2rem;padding-bottom:0;padding-left:0;padding-right:.5rem}.imports-page.premium-layout .import-section{position:relative;width:100%;background:radial-gradient(circle at 30% 20%,rgba(120,160,255,.18),transparent 60%),linear-gradient(145deg,#0b1220,#0f172a);border:none;border-left:none;border-radius:0;padding:.8rem .9rem 1rem .85rem;display:flex;flex-direction:column}.imports-page.premium-layout .import-section:before{padding:1px 1px 1px 0;background:linear-gradient(145deg,#8c78ff80,#a855f780)}.imports-page.premium-layout .import-section.import-drop-target:hover:before{padding:1px 1px 1px 0;background:linear-gradient(145deg,#8c78ffb3,#a855f7b3)}.imports-page.premium-layout .import-section.drag-active:before{padding:2px 2px 2px 0;background:linear-gradient(145deg,#82a0ffe6,#a855f7e6)}.imports-page.premium-layout .import-section h2{width:100%;text-align:center;justify-content:center}.imports-page.premium-layout .imports-page-title{margin:0 0 1.25rem clamp(20px,2.8vw,36px);max-width:none;transform:none}.recordings-section{background:transparent;border:none;box-shadow:none;padding:0}.import-section{position:relative;background:radial-gradient(circle at 30% 20%,rgba(120,160,255,.18),transparent 60%),linear-gradient(145deg,#0b1220,#0f172a);border:none;border-radius:0;padding:1rem;box-shadow:0 20px 40px #0006,inset 0 0 20px #0000004d;transition:box-shadow .3s ease,transform .3s ease}.import-section:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:0;padding:1px;background:linear-gradient(145deg,#78a0ff66,#a855f766);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;z-index:1}.import-section.import-drop-target:hover{background:radial-gradient(circle at 30% 20%,rgba(120,160,255,.28),transparent 60%),linear-gradient(145deg,#0d1526,#111d32);box-shadow:0 24px 48px #00000073,0 0 24px #78a0ff14,inset 0 0 20px #00000040}.import-section.import-drop-target:hover:before{background:linear-gradient(145deg,#78a0ff99,#a855f799)}.import-section.drag-active{background:radial-gradient(circle at 30% 20%,rgba(120,160,255,.35),transparent 60%),linear-gradient(145deg,#0e1830,#131f38);box-shadow:0 24px 48px #00000073,0 0 32px #64b4ff26,inset 0 0 24px #0003;transform:scale(1.01)}.import-section.drag-active:before{background:linear-gradient(145deg,#64b4ffe6,#78a0ffe6);padding:2px}.import-section.import-drop-target{cursor:pointer}.import-section.import-drop-target:focus-visible{outline:2px solid rgba(81,178,234,.65);outline-offset:2px}.import-section h2,.recordings-section h2{margin:0 0 1rem;font-size:1.5rem;font-weight:700;font-family:var(--font-sans);color:var(--text-primary, var(--color-text));display:flex;align-items:center;gap:.75rem}.imports-page .import-row{display:flex;align-items:center;justify-content:center;width:100%}.imports-page.premium-layout .import-row{justify-content:flex-start}.imports-page.premium-layout .import-section .import-row{flex:1 1 auto;justify-content:center;align-items:center}.imports-page.premium-layout .recordings-section{min-width:0;min-height:0;height:100%;display:flex;flex-direction:column;overflow:hidden;align-self:stretch}.imports-page.premium-layout .import-row .midi-importer{width:100%;max-width:none}.imports-page.premium-layout .recordings-list{min-height:0;padding-left:.25rem;padding-right:.25rem}.imports-page.premium-layout .recordings-scroll-viewport{min-height:0;flex:1 1 auto;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding-bottom:0}.imports-page .recordings-scroll-viewport{-ms-overflow-style:none;scrollbar-width:none}.imports-page .recordings-scroll-viewport::-webkit-scrollbar{width:0;height:0}.imports-page .import-row .midi-importer{width:min(760px,100%);max-width:none;margin:0}.imports-page .import-row .midi-importer.unified-importer{min-height:260px;height:260px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border-radius:0;transition:none;pointer-events:none}.imports-page .import-row .midi-importer.unified-importer:hover{background:transparent;transform:none}.imports-page .import-row .midi-importer.unified-importer .import-icon{margin-bottom:.75rem;opacity:.85;transition:opacity .3s ease,transform .3s ease}.imports-page .import-row .midi-importer.unified-importer.drag-active .import-icon{opacity:1;transform:translateY(-2px)}.imports-page .import-row .midi-importer.unified-importer .import-title{margin:0 0 .5rem;color:var(--color-text, #e2e8f0);font-size:1.25rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;transition:color .3s ease}.imports-page .import-row .midi-importer.unified-importer.drag-active .import-title{color:#78a0ff}.imports-page .import-row .midi-importer.unified-importer .import-subtitle{margin:0 0 .5rem;color:var(--color-text-secondary, #94a3b8);font-size:.95rem;opacity:.7}.imports-page .import-row .midi-importer.unified-importer h3{margin:0 0 .5rem;color:var(--color-text, #e2e8f0);font-size:1.25rem;font-weight:700;letter-spacing:.08em}.imports-page .import-row .midi-importer.unified-importer p{margin:4px 0;color:var(--color-text-secondary);font-size:.95rem;opacity:.7}.imports-page .import-row .midi-importer.unified-importer .file-types{font-size:.8rem;color:var(--color-text-muted, #64748b);margin-top:.5rem;font-family:var(--font-mono);letter-spacing:.04em;opacity:.5}.imports-page .import-row .midi-importer.unified-importer.disabled{opacity:.5;pointer-events:none;filter:grayscale(.5)}.import-or{display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;text-transform:uppercase;color:var(--text-secondary, var(--color-text-secondary));letter-spacing:.04em;padding:0 .5rem;flex:0 0 auto}.recordings-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;padding:0;border-bottom:none}.imports-page:not(.premium-layout) .recordings-header{position:relative;justify-content:center;margin-bottom:.3rem}.imports-page:not(.premium-layout) .recordings-header h2{text-align:center}.imports-page:not(.premium-layout) .recordings-header .recordings-count{position:absolute;right:0;bottom:-.18rem;z-index:2}.imports-page .recordings-header h2{margin:0;color:#fff;background:none;-webkit-background-clip:border-box;-webkit-text-fill-color:#fff;background-clip:border-box}.icon-recordings{display:inline-flex;width:26px;height:26px;color:var(--color-primary)}.icon-recordings svg{width:100%;height:100%}.recordings-count{background:#51b2ea;color:#fff;padding:.25rem .7rem;border-radius:999px;font-size:.85rem;font-weight:700}.recordings-empty{text-align:center;padding:2rem 1rem;color:var(--text-secondary, var(--color-text-secondary))}.recordings-empty p:first-child{margin:0 0 .35rem;font-size:1.1rem;color:var(--text-primary, var(--color-text))}.recordings-empty-hint{margin:0;font-size:.95rem;opacity:.9}.imports-page .recordings-list{display:flex;flex-direction:column;gap:0;border-top:none}.imports-page .recordings-list:before{content:"";display:block;height:1px;background:linear-gradient(90deg,#fff3,#ffffffe6,#fff3)}.imports-page .recording-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0;background:transparent;border:0;border-radius:0;box-shadow:none;border-bottom:1px solid var(--border-color, var(--color-border));margin:0;transition:none}.imports-page .recording-item:hover{background:transparent;box-shadow:none;transform:none}.recording-info-row{display:flex;align-items:center;gap:.6rem;min-width:0}.btn-edit-recording{background:transparent;border:none;border-radius:0;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary, var(--color-text-secondary));padding:0;box-shadow:none;transform:translateY(0);transition:color .15s ease,transform .16s ease}.btn-edit-recording:hover{color:var(--text-secondary, var(--color-text-secondary));background:transparent!important;border:none!important;box-shadow:none!important;transform:translateY(-1px)}.btn-edit-recording:focus-visible{outline:none;background:transparent!important;border:none!important;box-shadow:none!important}.btn-edit-recording:active{background:transparent!important;border:none!important;box-shadow:none!important;transform:translateY(0)}.btn-edit-icon{width:20px;height:20px;display:block;fill:currentColor}.recording-name{font-size:1.05rem;font-weight:600;color:var(--text-primary, var(--color-text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recording-meta{display:flex;align-items:center;gap:.45rem;font-size:.9rem;color:var(--text-secondary, var(--color-text-secondary))}.recording-actions{display:flex;align-items:center;gap:.6rem}.action-icon-btn{background:transparent;border:none;box-shadow:none;border-radius:0;padding:0;display:inline-flex;align-items:center;justify-content:center;color:var(--text-secondary, var(--color-text-secondary));cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:transform .16s ease,color .16s ease}.action-load-btn{color:#51b2ea}.action-delete-btn{color:#ff2f67}.action-icon-btn:hover{background:transparent;border-color:transparent;box-shadow:none;transform:scale(1.18)}.action-icon-btn:focus,.action-icon-btn:focus-visible{outline:none;background:transparent;border-color:transparent;box-shadow:none}.action-icon-btn:active{background:transparent;border-color:transparent;box-shadow:none;transform:scale(1.06)}.action-icon{width:20px;height:20px;display:block}.edit-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:1rem;background:radial-gradient(900px 460px at 18% 12%,rgba(81,178,234,.22) 0%,transparent 62%),radial-gradient(860px 420px at 85% 88%,rgba(16,185,129,.14) 0%,transparent 60%),#060a14c7;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.edit-modal{width:min(720px,calc(100vw - 2rem));background:linear-gradient(160deg,#1f2d49f2,#121d34f7);border:none;border-radius:18px;box-shadow:0 28px 60px #0308148f,0 4px 18px #09132666,inset 0 1px #ffffff0f;padding:1.35rem}.edit-modal h2{margin:0 0 1.1rem;font-size:clamp(1.2rem,2.2vw,1.45rem);font-weight:800;letter-spacing:.01em;color:#f6fbff}.edit-form-horizontal-row{--edit-label-font-size: .8rem;--edit-label-line-height: 1.2;--edit-label-gap: .38rem;--edit-control-height: 44px;--edit-field-gap: .78rem;--edit-photo-size: calc( (3 * ((var(--edit-label-font-size) * var(--edit-label-line-height)) + var(--edit-label-gap) + var(--edit-control-height))) + (2 * var(--edit-field-gap)) - 20px );display:flex;gap:1.3rem;align-items:flex-start;width:100%}.edit-form-photo-col{flex:0 0 var(--edit-photo-size);min-width:var(--edit-photo-size);display:flex;flex-direction:column}.edit-photo-label-title{margin-bottom:.45rem;font-size:.82rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#c4dbf4eb}.edit-photo-card-wrapper{display:flex}.edit-photo-card{width:var(--edit-photo-size);height:var(--edit-photo-size);border-radius:12px;border:none;background:linear-gradient(140deg,#1b2742eb,#10192de6);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;cursor:pointer;transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}.edit-photo-card:hover,.edit-photo-card:focus-visible{outline:none;box-shadow:0 0 0 3px #51b2ea2e,0 10px 20px #0308145c;transform:translateY(-1px)}.edit-photo-icon{display:inline-flex}.edit-photo-preview{width:100%;height:100%;object-fit:cover}.edit-photo-overlay-text{position:absolute;inset:auto 0 0 0;padding:.45rem .4rem;text-align:center;font-size:.72rem;font-weight:600;color:#fff;background:#090e1ab8}.edit-form-fields-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:.78rem;padding-top:1px}.edit-form-horizontal label{display:flex;flex-direction:column;gap:var(--edit-label-gap);font-size:var(--edit-label-font-size);line-height:var(--edit-label-line-height);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#c4dbf4eb}.edit-form-horizontal input[type=text]{width:100%;max-width:100%;min-height:var(--edit-control-height);padding:.72rem .86rem;border-radius:11px;border:none;background:linear-gradient(160deg,#101a2df2,#0a1222eb);color:#eff7ff;font-size:.95rem;font-family:inherit;font-weight:600;transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.edit-form-horizontal select{width:100%;max-width:100%;min-height:var(--edit-control-height);padding:.72rem .86rem;border-radius:11px;border:none;background:linear-gradient(160deg,#101a2df2,#0a1222eb);color:#eff7ff;font-size:.95rem;font-family:inherit;font-weight:600;color-scheme:dark;transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.category-dropdown{width:100%;max-width:250px;position:relative;border:none;border-radius:11px;background:linear-gradient(160deg,#1b2b46f2,#101c31f0);box-shadow:inset 0 1px #ffffff0a;overflow:visible;transition:border-color .15s ease,box-shadow .15s ease,border-radius .15s ease}.category-dropdown.is-open{box-shadow:0 0 0 3px #51b2ea2e,inset 0 1px #ffffff0d}.category-dropdown-toggle{width:100%;min-height:var(--edit-control-height);border:none;border-radius:0;background:transparent;color:#eff7ff;display:flex;align-items:center;justify-content:space-between;padding:.72rem .86rem;font-family:inherit;font-size:.95rem;font-weight:600;line-height:1.2}.category-dropdown-toggle:hover{border:none!important;background:transparent!important;box-shadow:none!important}.category-dropdown-toggle:focus,.category-dropdown-toggle:focus-visible{outline:none!important;border:none!important;background:transparent!important;box-shadow:none!important}.category-dropdown-chevron{width:12px;height:12px;margin-left:.86rem;flex-shrink:0;border-right:2px solid #ffffff;border-bottom:2px solid #ffffff;transform:rotate(45deg);transform-origin:center;transition:transform .18s ease}.category-dropdown.is-open .category-dropdown-chevron{transform:rotate(-135deg)}.category-dropdown-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;max-height:260px;opacity:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-ms-overflow-style:none;pointer-events:none;transform:translateY(-6px) scale(.98);transform-origin:top center;border:none;border-radius:11px;background:linear-gradient(160deg,#0e182bfa,#0a1222fa);box-shadow:0 18px 36px #03081480;transition:opacity .16s ease,transform .18s ease;scrollbar-width:none}.category-dropdown-menu::-webkit-scrollbar{width:0;height:0;background:transparent}.category-dropdown.is-open .category-dropdown-menu{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}.category-dropdown-option{width:100%;text-align:left;border:none;border-radius:0;background:transparent;color:#eaf4ff;padding:.62rem .86rem;font-family:inherit;font-size:.92rem;font-weight:500;line-height:1.2;transition:background .12s ease,color .12s ease}.category-dropdown-option:hover{border:none;background:#57a6e433;color:#fff}.category-dropdown-option.is-selected{background:#57a6e442;color:#fff}.edit-form-horizontal input[type=text]:focus{outline:none;border-color:#62c0f4eb;box-shadow:0 0 0 3px #51b2ea2e;background:linear-gradient(160deg,#141f34f5,#0c1528f0)}.edit-form-horizontal select:focus{outline:none;border-color:#62c0f4eb;box-shadow:0 0 0 3px #51b2ea2e;background:linear-gradient(160deg,#141f34f5,#0c1528f0)}.edit-modal-actions{margin-top:.35rem;display:flex;justify-content:flex-end;gap:.65rem}.category-actions-row{display:flex;align-items:flex-end;justify-content:flex-start;gap:.75rem;width:100%}.category-actions-row .category-field{flex:1 1 auto;min-width:0;max-width:250px}.category-actions-row .edit-modal-actions{margin-top:0;margin-bottom:1px;margin-left:auto;flex-shrink:0}.edit-modal-actions button{min-width:108px;padding:.62rem 1rem;border-radius:11px;border:none;background:linear-gradient(160deg,#1e2f4cf0,#14213af5);color:#e8f2ff;font-family:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease}.edit-modal-actions button:hover{transform:translateY(-1px);box-shadow:0 8px 16px #03081457}.edit-modal-actions button.btn-primary{border:none;background:linear-gradient(135deg,#2ea6e6,#3d9be0 42%,#2f86d3);color:#fff;box-shadow:0 10px 20px #10488057}.edit-modal-actions button.btn-primary:hover{background:linear-gradient(135deg,#3ab2ee,#49a7ea 42%,#398fdb);box-shadow:0 12px 24px #1048806b}.imports-page.premium-layout .import-section{overflow:hidden}.imports-page.premium-layout .import-section.import-drop-target:hover{background:radial-gradient(circle at 30% 20%,rgba(120,160,255,.32),transparent 58%),linear-gradient(145deg,#0d1526,#111d32)}.import-drag-release-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;align-items:center;justify-content:center;background:#0a142ac7;pointer-events:none}.import-drag-release-overlay span{font-size:1.15rem;font-weight:700;color:#78a0ff;letter-spacing:.08em;text-transform:uppercase}.imports-page.premium-layout .recording-item{background:#ffffff06;border:1px solid rgba(255,255,255,.055);border-bottom:1px solid rgba(255,255,255,.055);border-radius:6px;padding:.68rem .78rem;margin-bottom:4px;transition:background .18s ease,transform .18s ease,box-shadow .18s ease,border-color .18s ease}.imports-page.premium-layout .recording-item:last-child{border-bottom:1px solid rgba(255,255,255,.055)}.imports-page.premium-layout .recording-item:hover{background:#ffffff0d;border-color:#51b2ea2b;transform:translate(2px);box-shadow:0 2px 14px #00000042}.imports-page.premium-layout .recording-name{font-size:1rem;font-weight:700;color:#eaf4ff}.imports-page.premium-layout .recording-meta{font-size:.82rem;opacity:.6}.imports-page.premium-layout .action-icon-btn{width:36px;height:36px;border-radius:8px}.imports-page.premium-layout .action-icon-btn:hover{transform:none}.imports-page.premium-layout .action-load-btn:hover{background:#51b2ea1c;box-shadow:0 0 0 1px #51b2ea47,0 0 8px #51b2ea2e}.imports-page.premium-layout .action-delete-btn:hover{background:#ff2f671a;box-shadow:0 0 0 1px #ff2f6747,0 0 8px #ff2f6724}.imports-page.premium-layout .recording-item:hover .action-load-btn{color:#6ec8f5}.imports-page.premium-layout .recording-item:hover .action-delete-btn{color:#ff5580}.imports-page.premium-layout .recordings-toolbar{display:flex;align-items:center;justify-content:center;gap:.55rem;margin-bottom:0;padding:0 .1rem 1.05rem;position:relative}.imports-page.premium-layout .recordings-toolbar .recordings-count-toolbar{position:absolute;right:.25rem;bottom:.36rem;z-index:2}.imports-page.premium-layout .recordings-toolbar:after{content:"";position:absolute;left:.25rem;right:.25rem;bottom:0;height:1px;background:linear-gradient(90deg,#fff3,#ffffffe6,#fff3);box-shadow:0 6px 14px #00000073}.recordings-search-row{flex:0 1 33.333%;width:33.333%;max-width:420px;min-width:320px;position:relative;display:flex;align-items:center}.recordings-search{width:100%;height:40px;padding:0 238px 0 16px;border:none;border-radius:999px;background:linear-gradient(135deg,#162242f5,#20315ceb);box-shadow:0 10px 30px #030a1c6b,inset 0 1px #ffffff14;color:#f4f7ff;font-size:.9rem;font-family:inherit;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.recordings-search::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}.recordings-search::placeholder{color:#dce7ffb3}.recordings-search:focus{box-shadow:0 12px 30px #030a1c80,inset 0 1px #ffffff1a}.recordings-search-clear{position:absolute;right:196px;top:50%;transform:translateY(-50%);width:28px;height:28px;padding:0;border:none;background:transparent;color:#f4f7ff;-moz-appearance:none;appearance:none;-webkit-appearance:none;display:grid;place-items:center;cursor:pointer;transition:transform .15s ease;box-shadow:none}.recordings-search-clear:hover{transform:translateY(-50%) scale(1.08);background:transparent;box-shadow:none}.recordings-search-clear svg{width:24px;height:24px;display:block}.recordings-search-clear:focus,.recordings-search-clear:focus-visible{outline:none;background:transparent;box-shadow:none}.recordings-sort-dropdown{position:absolute;right:14px;top:50%;transform:translateY(-50%);z-index:4}.recordings-sort-toggle{min-height:28px;max-width:184px;padding:0;border:none;background:transparent;color:#d6e6ff;font-size:.8rem;font-weight:600;font-family:inherit;display:inline-flex;align-items:center;gap:.42rem;cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none}.recordings-sort-toggle:hover{background:transparent;border:none;box-shadow:none;color:#f2f7ff}.recordings-sort-toggle:focus,.recordings-sort-toggle:focus-visible{outline:none;border:none;background:transparent;box-shadow:none}.recordings-sort-toggle:before,.recordings-sort-toggle:after{content:none!important}.recordings-sort-text{white-space:nowrap;overflow:visible;text-overflow:clip}.recordings-sort-chevron{width:9px;height:9px;flex-shrink:0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transform-origin:center;transition:transform .18s ease}.recordings-sort-dropdown.is-open .recordings-sort-chevron{transform:rotate(-135deg)}.recordings-sort-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;border:none;border-radius:10px;background:linear-gradient(160deg,#0e182bfa,#0a1222fa);box-shadow:0 18px 36px #03081480;opacity:0;pointer-events:none;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:opacity .16s ease,transform .18s ease;overflow:hidden}.recordings-sort-dropdown.is-open .recordings-sort-menu{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}.recordings-sort-option{width:100%;text-align:left;border:none;background:transparent;color:#eaf4ff;padding:.58rem .8rem;font-family:inherit;font-size:.86rem;line-height:1.2;cursor:pointer}.recordings-sort-option:hover{border:none;background:#57a6e433;color:#fff}.recordings-sort-option.is-selected{background:#57a6e442;color:#fff}.imports-page.premium-layout .recordings-list:before{display:none}.imports-page.premium-layout .recordings-scroll-viewport{padding-top:.12rem;-webkit-mask-image:linear-gradient(to bottom,black calc(100% - 56px),transparent 100%);mask-image:linear-gradient(to bottom,black calc(100% - 56px),transparent 100%)}.imports-page.premium-layout .recordings-scroll-viewport{-ms-overflow-style:none;scrollbar-width:none}.imports-page.premium-layout .recordings-scroll-viewport::-webkit-scrollbar{width:0;height:0}.imports-page.premium-layout .imports-page-title{text-shadow:0 0 28px rgba(81,178,234,.22),0 2px 6px rgba(0,0,0,.5)}.imports-page.premium-layout .recordings-header h2{font-size:1.34rem!important;letter-spacing:.01em;color:#dcf0ffe0!important;-webkit-text-fill-color:rgba(220,240,255,.88)!important}.imports-page.premium-layout .recordings-header{position:relative;justify-content:center}.imports-page.premium-layout .recordings-header h2{text-align:center}.imports-page.premium-layout .recordings-header .recordings-count{display:none}@media (max-width: 768px){.recordings-search-row{width:100%;max-width:none;min-width:0;flex:1}.recordings-search{padding-right:182px}.recordings-sort-toggle{max-width:130px;font-size:.75rem}.recordings-search-clear{right:146px}.imports-page.premium-layout .imports-page-content{display:flex;flex-direction:column;gap:1.5rem}.imports-page.premium-layout .import-section{position:relative;width:auto;border-left:none;border-radius:0;padding:0;background:transparent}.imports-page.premium-layout .recordings-section,.imports-page.premium-layout .imports-page-title{margin-left:0}.imports-page{padding:1rem}.imports-page .recording-item{flex-direction:column;align-items:flex-start}.imports-page .import-row{display:flex;flex-direction:column}.imports-page .import-row .midi-importer{width:100%;max-width:760px}.imports-page .import-row .midi-importer.unified-importer{height:auto;min-height:250px}.import-or{padding:0}.recording-actions{width:100%}.recording-actions .btn{flex:1;justify-content:center}.edit-form-horizontal-row{flex-direction:column;gap:1rem}.edit-form-photo-col{min-width:0;align-items:flex-start;--edit-photo-size: 152px}.category-actions-row{flex-direction:column;align-items:stretch}.category-actions-row .category-field{min-width:0}.category-dropdown{max-width:100%}.edit-modal{width:min(680px,calc(100vw - 1.4rem));padding:1.15rem 1rem .95rem}.edit-modal-actions button{min-width:100px}}@media (max-width: 1100px){.imports-page.premium-layout .imports-page-content{display:flex;flex-direction:column;gap:1.5rem}.imports-page.premium-layout .import-section{position:relative;width:auto;border-left:none;border-radius:0;padding:0;background:transparent}.imports-page.premium-layout .recordings-section,.imports-page.premium-layout .imports-page-title{margin-left:0}}.pieces-page{--pieces-card-size: 240px;--pieces-thumbnail-size: 240px;--pieces-category-tile-width: 214px;--pieces-card-gap: .1rem;--pieces-nav-size: 42px;--pieces-nav-gutter: 6px;--pieces-max-visible-cards: 7;padding:2rem;max-width:1200px;margin:0 auto}.pieces-page.is-premium{max-width:100%;margin:0;padding-left:clamp(20px,2.8vw,36px);padding-right:clamp(20px,2.8vw,36px)}.pieces-page .pieces-page-title{margin:0 0 1.25rem;font-size:clamp(2rem,4vw,2.6rem);line-height:1.05;font-weight:800;color:var(--text-primary)}.pieces-page .section{margin-top:1.5rem}.pieces-page .section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.pieces-page .category-separator{height:1px;width:100%;border-radius:0;margin-bottom:1.5rem;background:#ffffff0a;box-shadow:none}.pieces-page .see-all-btn{border:none;background:transparent;color:#ffcf8f;padding:0;border-radius:0;font-weight:700;font-size:.86rem;transition:color .16s ease,transform .16s ease}.pieces-page .see-all-btn:hover{color:#ffe1b4;transform:translateY(-1px)}.pieces-page .see-all-btn:focus,.pieces-page .see-all-btn:focus-visible{outline:none;text-decoration:underline;text-underline-offset:3px}.pieces-page.visual-style-new .category-separator{background:#ffffff0a;box-shadow:none}.pieces-page.visual-style-new .see-all-btn{color:#7dd3fc;text-shadow:0 0 8px rgba(56,189,248,.38)}.pieces-page.visual-style-new .see-all-btn:hover{color:#bae6fd}.pieces-page.visual-style-new .see-all-btn:focus,.pieces-page.visual-style-new .see-all-btn:focus-visible{text-decoration-color:#7dd3fc}.pieces-page .carousel-wrapper{position:relative;display:flex;align-items:center;width:fit-content;max-width:min(100%,calc((var(--pieces-max-visible-cards) * var(--pieces-card-size)) + ((var(--pieces-max-visible-cards) - 1) * var(--pieces-card-gap)) + (2 * (var(--pieces-nav-size) + var(--pieces-nav-gutter)))));padding:0 calc(var(--pieces-nav-size) + var(--pieces-nav-gutter));box-sizing:border-box}.pieces-page.is-premium .carousel-wrapper{width:100%;max-width:100%;padding:0}.pieces-page.is-premium .carousel-btn.carousel-btn-left{left:8px;top:calc(var(--pieces-card-size) / 2)}.pieces-page.is-premium .carousel-btn.carousel-btn-right{right:8px;top:calc(var(--pieces-card-size) / 2)}.pieces-page .category-tiles-wrapper .carousel-btn.carousel-btn-left,.pieces-page .category-tiles-wrapper .carousel-btn.carousel-btn-right{top:calc((var(--pieces-category-tile-width) / 2) / 2)}.pieces-page .carousel-btn.carousel-btn-left{position:absolute;left:0;top:calc(var(--pieces-card-size) / 2);transform:translateY(-50%);z-index:2}.pieces-page .carousel-btn.carousel-btn-right{position:absolute;right:0;top:calc(var(--pieces-card-size) / 2);transform:translateY(-50%);z-index:2}.pieces-page .carousel-btn{width:var(--pieces-nav-size);height:var(--pieces-nav-size);padding:0;border:none;border-radius:999px;background:linear-gradient(135deg,#172142e6,#23325cd1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 24px #00000047;display:grid;place-items:center;min-width:var(--pieces-nav-size);min-height:var(--pieces-nav-size);color:#e8efff;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.pieces-page .carousel-btn.is-hidden{opacity:0;visibility:hidden;pointer-events:none}.pieces-page .carousel-btn svg{width:22px;height:22px;display:block}.pieces-page .carousel-btn:hover{border-color:transparent;background:linear-gradient(135deg,#212f58f5,#364c84e6);box-shadow:0 14px 28px #040a1c61;transform:translateY(calc(-50% - 1px))}.pieces-page .carousel-btn:focus,.pieces-page .carousel-btn:focus-visible{outline:none;box-shadow:0 0 0 3px #7daaff40,0 12px 24px #02081861}.pieces-page .carousel{width:fit-content;max-width:min(100%,calc((var(--pieces-max-visible-cards) * var(--pieces-card-size)) + ((var(--pieces-max-visible-cards) - 1) * var(--pieces-card-gap))));display:flex;gap:var(--pieces-card-gap);overflow-x:auto;overflow-y:visible;scroll-snap-type:x proximity;padding-top:8px;padding-bottom:.5rem;margin-top:-8px;cursor:grab;touch-action:pan-y;scrollbar-width:none}.pieces-page.is-premium .carousel{width:100%;max-width:100%;gap:1rem}.pieces-page .category-tiles-wrapper{max-width:min(100%,calc((var(--pieces-max-visible-cards) * var(--pieces-category-tile-width)) + ((var(--pieces-max-visible-cards) - 1) * var(--pieces-card-gap)) + (2 * (var(--pieces-nav-size) + var(--pieces-nav-gutter)))))}.pieces-page .category-tiles-carousel{max-width:min(100%,calc((var(--pieces-max-visible-cards) * var(--pieces-category-tile-width)) + ((var(--pieces-max-visible-cards) - 1) * var(--pieces-card-gap))))}.pieces-page .category-tile-card-outer{width:var(--pieces-category-tile-width);margin-bottom:.5rem;flex-shrink:0}.pieces-page .category-tile-card{scroll-snap-align:start;position:relative;min-width:var(--pieces-category-tile-width);max-width:var(--pieces-category-tile-width);aspect-ratio:2 / 1;border:1px solid var(--border-color);border-radius:8px;overflow:hidden;padding:0;background:#202638;box-shadow:var(--shadow-sm);transition:transform .16s ease,box-shadow .16s ease;-webkit-tap-highlight-color:transparent}.pieces-page .category-tile-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#060a1624,#060a1685 68%,#060a16b8);z-index:1;pointer-events:none}.pieces-page .category-tile-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.pieces-page .category-tile-photo,.pieces-page .category-tile-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:8px;z-index:0}.pieces-page .category-tile-placeholder{background:linear-gradient(130deg,#ffb85c80,#f973168c 32%,#1c2a4af2)}.pieces-page .category-tile-label{position:absolute;left:12px;bottom:10px;right:12px;z-index:2;font-size:.9rem;font-weight:700;line-height:1.2;color:#fff7e8;text-align:left;text-shadow:0 2px 12px rgba(0,0,0,.7)}.pieces-page.is-premium .category-tiles-wrapper{width:100%;max-width:100%}.pieces-page.is-premium .category-tiles-carousel{width:100%;max-width:100%;gap:1rem}.pieces-page .carousel.dragging{cursor:grabbing;-webkit-user-select:none;user-select:none;scroll-snap-type:none}.pieces-page .carousel::-webkit-scrollbar{display:none}.pieces-page .carousel::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:999px}.pieces-page .piece-card-outer{display:flex;flex-direction:column;align-items:center;width:var(--pieces-card-size);margin-bottom:.5rem;flex-shrink:0;position:relative}.pieces-page .piece-card{scroll-snap-align:start;min-width:var(--pieces-card-size);max-width:var(--pieces-card-size);aspect-ratio:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1px solid var(--border-color, rgba(255, 255, 255, .06));border-radius:var(--border-radius-lg, 12px);background:var(--card-background, rgba(21, 27, 43, .85));box-shadow:0 2px 8px #0000002e,0 1px 3px #0000001f;transition:transform .25s ease,box-shadow .25s ease;-webkit-tap-highlight-color:transparent;padding:0;-webkit-user-drag:none;position:relative;overflow:hidden}.pieces-page .piece-card,.pieces-page .piece-card:focus,.pieces-page .piece-card:focus-visible,.pieces-page .piece-card:active,.pieces-page .piece-card:visited,.pieces-page .piece-card:hover:focus,.pieces-page .piece-card:focus:active,.pieces-page .piece-card:focus-within{outline:none!important;border-color:var(--border-color, rgba(255, 255, 255, .06))!important;background:var(--card-background, rgba(21, 27, 43, .85))!important}.pieces-page .piece-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 8px 24px #00000052,0 2px 8px #0000002e!important;border-color:#ffffff1a!important}.pieces-page .piece-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.35) 0%,transparent 50%);opacity:0;transition:opacity .25s ease;pointer-events:none;z-index:1;border-radius:inherit}.pieces-page .piece-card:hover:after{opacity:1}.pieces-page .piece-icon{display:flex;align-items:center;justify-content:center;margin:0 auto;background:linear-gradient(135deg,#23283a 60%,#6366f1);border-radius:8px;overflow:hidden;padding:8px;width:var(--pieces-thumbnail-size);height:var(--pieces-thumbnail-size);flex-shrink:0}.pieces-page .piece-icon svg{width:100%;height:100%;transform:scale(1.15)}.pieces-page .piece-photo{width:100%;height:100%;aspect-ratio:1 / 1;transform:scale(1.15);object-fit:cover;border-radius:8px;display:block;-webkit-user-drag:none}.pieces-page .piece-labels{display:flex;flex-direction:column;align-items:flex-start;margin-top:.25rem;width:100%;padding:0 8px}.piece-difficulty-dots{display:flex;align-items:center;justify-content:flex-start;gap:6px;width:100%;padding:0 10px;margin-top:.35rem}.piece-difficulty-dot{width:10px;height:10px;border-radius:999px;display:inline-block;box-shadow:0 2px 6px #050d2147}.piece-difficulty-dot-debutant{background:#16a34a}.piece-difficulty-dot-intermediaire{background:#2563eb}.piece-difficulty-dot-expert{background:#dc2626}.piece-difficulty-dot-virtuose{background:linear-gradient(135deg,#fef08a,#fbbf24 35%,#f59e0b 65%,#d97706)}.pieces-page .piece-title{font-weight:700;color:var(--text-primary);font-size:.95rem;line-height:1.1;display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;transition:color .25s ease}.pieces-page .piece-card-outer:hover .piece-title{color:#fff}.pieces-page .piece-subtitle{font-size:.75rem;color:var(--text-secondary);opacity:.7;margin-top:.1rem;display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;transition:opacity .25s ease}.pieces-page .piece-card-outer:hover .piece-subtitle{opacity:.85}.pieces-subpage-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:2.4rem}.pieces-back-btn{justify-self:start}.pieces-subpage-header .pieces-page-title{margin:0;text-align:center;font-weight:500}.pieces-mosaic{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}.pieces-mosaic .piece-card-outer{width:100%;margin-bottom:0}.piece-favorite-btn{position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;padding:0;border:none;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#0a10209e;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#ffffffeb;box-shadow:0 10px 24px #00000038;transition:transform .16s ease,background .16s ease,color .16s ease}.piece-favorite-btn svg{width:20px;height:20px;display:block}.piece-favorite-btn:hover{transform:translateY(-1px) scale(1.04);background:#121b34d1}.piece-favorite-btn:focus,.piece-favorite-btn:focus-visible{outline:none;box-shadow:0 0 0 3px #7daaff38,0 10px 24px #00000038}.piece-favorite-btn.is-active{background:#7f1d1dd1;color:#ff8fa3}.piece-favorite-btn.is-hidden-pref{opacity:0;pointer-events:none}.pieces-mosaic .piece-card{min-width:0;max-width:none;width:100%}.pieces-mosaic .piece-icon{width:100%;height:auto;aspect-ratio:1 / 1}.pieces-page .category{margin-top:2.8rem}.pieces-page .empty{color:var(--text-secondary);padding:1rem}.difficulty-modal-backdrop{--pieces-thumbnail-size: 198px;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2200;display:flex;align-items:center;justify-content:center;padding:1rem;background:radial-gradient(900px 460px at 18% 12%,rgba(81,178,234,.22) 0%,transparent 62%),radial-gradient(860px 420px at 85% 88%,rgba(16,185,129,.14) 0%,transparent 60%),#040710d6;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:modalBackdropIn .2s ease-out both}@keyframes modalBackdropIn{0%{opacity:0}to{opacity:1}}.difficulty-modal{width:min(650px,calc(100vw - 2rem));border:none;border-radius:18px;overflow:hidden;background:linear-gradient(160deg,#1f2d49f5,#10182efa);box-shadow:0 28px 60px #03081499,0 4px 18px #0913266b,inset 0 1px #ffffff12,0 0 0 1px #648cff0f,0 0 80px #5078f00f;animation:modalCardIn .2s ease-out both}@keyframes modalCardIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.difficulty-modal-band{padding:.85rem 1.2rem;display:flex;align-items:center;justify-content:center;background:linear-gradient(115deg,#182248d9,#2a3c6cd1 42%,#121d36db);position:relative;isolation:isolate;overflow:hidden}.difficulty-modal-band-bg{position:absolute;top:-18%;right:-18%;bottom:-18%;left:-18%;width:136%;height:136%;object-fit:cover;object-position:center;filter:blur(18px) saturate(1.25);transform:scale(1.08);opacity:.9;z-index:0;pointer-events:none}.difficulty-modal-band-photo{width:var(--pieces-thumbnail-size, 198px);height:var(--pieces-thumbnail-size, 198px);object-fit:cover;border-radius:10px;box-shadow:0 8px 20px #060a1452,0 2px 6px #060a1433;display:block;position:relative;z-index:2}.difficulty-modal-band-placeholder{width:var(--pieces-thumbnail-size, 198px);height:var(--pieces-thumbnail-size, 198px);border-radius:10px;display:block;background:linear-gradient(135deg,#23283a 60%,#6366f1);position:relative;z-index:2}.difficulty-modal-band.has-photo:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#060a140a,#080c1833 48%,#0508109e),radial-gradient(circle at 50% 44%,#fafcff1a,#fafcff08 45%,#fafcff00 75%);pointer-events:none;z-index:1}.difficulty-modal-content{padding:.6rem 1.2rem 1.4rem;text-align:center;position:relative}.difficulty-modal-hero-actions{position:absolute;top:1.2rem;left:1rem;right:1rem;height:0;display:flex;align-items:center;justify-content:flex-end;pointer-events:none;z-index:2}.difficulty-modal-hero-actions>*{pointer-events:auto}.difficulty-modal-title{margin:0;font-size:1.35rem;font-weight:800;color:#f6fbff}.difficulty-modal-author{margin:.35rem 0 0;font-size:.9rem;color:#cbddf4e6}.difficulty-modal-transpose-toggle{position:static;padding:0;border:0;background:transparent;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;border-radius:0;box-shadow:none;transition:transform .16s ease,opacity .16s ease;outline:none;-webkit-tap-highlight-color:transparent}.difficulty-modal-band-favorite-btn{position:absolute;top:12px;left:12px;z-index:3;padding:0;border:0;background:transparent;color:#ffffffeb;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;border-radius:0;box-shadow:none;transition:transform .16s ease,opacity .16s ease,color .16s ease;outline:none;-webkit-tap-highlight-color:transparent}.difficulty-modal-band-favorite-btn svg{width:27px;height:27px;display:block}.difficulty-modal-band-favorite-btn:hover{transform:translateY(-1px) scale(1.03);opacity:1;background:transparent;box-shadow:none}.difficulty-modal-band-favorite-btn:focus,.difficulty-modal-band-favorite-btn:focus-visible,.difficulty-modal-band-favorite-btn:active{outline:none;background:transparent;box-shadow:none}.difficulty-modal-band-favorite-btn.is-active{color:#ff8fa3}.difficulty-modal-band-close-btn{position:absolute;top:12px;right:12px;z-index:3;padding:0;border:0;background:transparent;color:#ffffffeb;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;border-radius:0;box-shadow:none;transition:transform .16s ease,opacity .16s ease,color .16s ease;outline:none;-webkit-tap-highlight-color:transparent}.difficulty-modal-band-close-btn svg{width:26px;height:26px;display:block}.difficulty-modal-band-close-btn:hover{transform:translateY(-1px) scale(1.03);opacity:1;background:transparent;box-shadow:none}.difficulty-modal-band-close-btn:focus,.difficulty-modal-band-close-btn:focus-visible,.difficulty-modal-band-close-btn:active{outline:none;background:transparent;box-shadow:none}.difficulty-modal-print-btn{padding:0;border:0;background:transparent;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;border-radius:0;box-shadow:none;transition:transform .16s ease,opacity .16s ease;outline:none;-webkit-tap-highlight-color:transparent}.difficulty-modal-print-btn:hover:not(:disabled){transform:translateY(-1px) scale(1.03);opacity:1;background:transparent;box-shadow:none}.difficulty-modal-print-btn:focus,.difficulty-modal-print-btn:focus-visible,.difficulty-modal-print-btn:active{outline:none;background:transparent;box-shadow:none}.difficulty-modal-print-btn:disabled{opacity:.42;cursor:not-allowed}.difficulty-modal-print-icon{width:29px;height:29px;display:block;color:#fff;fill:none}.difficulty-modal-transpose-toggle:hover{transform:translateY(-1px) scale(1.03);opacity:1;background:transparent;box-shadow:none}.difficulty-modal-transpose-icon{width:27px;height:27px;display:block;fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;transition:transform .2s ease,stroke .2s ease}.difficulty-modal-transpose-toggle.is-open{opacity:1}.difficulty-modal-transpose-toggle.is-open .difficulty-modal-transpose-icon{transform:scale(1.06);stroke:#fff}.difficulty-modal-transpose-toggle:focus,.difficulty-modal-transpose-toggle:focus-visible,.difficulty-modal-transpose-toggle:active{outline:none;background:transparent;box-shadow:none}.difficulty-modal-transpose-panel{max-height:0;opacity:0;overflow:hidden;transition:max-height .2s ease,opacity .2s ease;text-align:left}.difficulty-modal-transpose-panel.is-open{max-height:350px;opacity:1;overflow:visible}.difficulty-modal-transpose-title{margin:.8rem 0 .6rem;font-size:.7rem;font-weight:600;font-family:inherit;letter-spacing:.1em;text-transform:uppercase;color:#a0aec08c;text-align:center}.transpose-dropdown{position:relative;width:75%;margin:0 auto}.transpose-dropdown-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-radius:10px;border:none;background:#ffffff0d;color:#fff;font-size:.95rem;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:background .2s ease;outline:none;-webkit-tap-highlight-color:transparent}.transpose-dropdown-trigger:hover{background:#ffffff14}.transpose-dropdown-trigger:focus-visible{box-shadow:0 0 0 1.5px #6366f173}.transpose-dropdown-trigger.is-open{background:#ffffff14}.transpose-dropdown-chevron{width:12px;height:12px;color:#ffffff59;transition:transform .25s ease,color .2s ease;flex-shrink:0}.transpose-dropdown-trigger:hover .transpose-dropdown-chevron{color:#ffffff8c}.transpose-dropdown-trigger.is-open .transpose-dropdown-chevron{transform:rotate(180deg);color:#6366f1b3}.transpose-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:200px;overflow-y:auto;border-radius:10px;background:#0f121ef7;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 12px 40px #00000080;padding:4px;z-index:20;animation:transposeDropdownIn .15s ease;-ms-overflow-style:none;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent}.transpose-dropdown-menu::-webkit-scrollbar{width:4px}.transpose-dropdown-menu::-webkit-scrollbar-track{background:transparent}.transpose-dropdown-menu::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:4px}@keyframes transposeDropdownIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.transpose-dropdown-item{width:100%;padding:.55rem .85rem;border:none;border-radius:7px;background:transparent;color:#c8d2e6bf;font-size:.88rem;font-weight:500;text-align:left;cursor:pointer;transition:background .12s ease,color .12s ease;outline:none;-webkit-tap-highlight-color:transparent}.transpose-dropdown-item:hover{background:#ffffff0f;color:#fff}.transpose-dropdown-item.is-selected{background:#6366f126;color:#fff}.transpose-dropdown-item:focus-visible{box-shadow:0 0 0 1.5px #6366f173}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.difficulty-modal-instruction{margin:1rem 0 0;font-size:1.05rem;color:#eaf4ff}.difficulty-modal-actions{margin-top:1rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem}.difficulty-choice-btn{width:92px;height:92px;border:0;border-radius:999px;background:#2f86d3;color:#fff;font-size:.86rem;font-weight:500;line-height:1.15;text-align:center;display:flex;align-items:center;justify-content:center;font-family:inherit;-moz-appearance:none;appearance:none;-webkit-appearance:none;text-indent:0;cursor:pointer;opacity:.56;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease,background .2s ease;padding:0}.difficulty-choice-btn:hover{transform:translateY(-1px) scale(1.05);box-shadow:0 0 18px #2f86d34d}.difficulty-choice-btn:focus,.difficulty-choice-btn:focus-visible{outline:none;box-shadow:0 12px 24px #10488040}.difficulty-choice-btn.is-selected{opacity:1;box-shadow:0 0 22px #2f86d359,0 14px 26px #050d216b;transform:scale(1.05)}.difficulty-choice-debutant{background:linear-gradient(135deg,#16a34a,#15803d)}.difficulty-choice-intermediaire{background:linear-gradient(135deg,#3b82f6,#2563eb)}.difficulty-choice-expert{background:linear-gradient(135deg,#ef4444,#dc2626)}.difficulty-choice-virtuose{position:relative;overflow:hidden;background:linear-gradient(135deg,#fef08a,#fbbf24 28%,#f59e0b 55%,#d97706)!important;color:#fffdf3;text-shadow:0 1px 8px rgba(120,63,4,.45);box-shadow:inset 0 1px #ffffff59,0 0 0 1px #fbbf2459,0 10px 24px #d977064d}.difficulty-choice-virtuose:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;background:linear-gradient(118deg,#fff0 10%,#ffffff73 40%,#fff0 62%);transform:translate(-135%) rotate(8deg);animation:virtuose-shimmer 2.7s ease-in-out infinite;pointer-events:none}.difficulty-choice-virtuose:after{content:"";position:absolute;width:9px;height:9px;top:20%;right:22%;border-radius:999px;background:radial-gradient(circle,#fffffff2,#ffe8ac40 70%,#ffe8ac00);box-shadow:0 0 14px #ffd666b3,-26px 28px 0 -3px #fff7d3bf;animation:virtuose-sparkle 1.8s ease-in-out infinite alternate;pointer-events:none}.difficulty-choice-virtuose.is-selected{box-shadow:inset 0 1px #fff6,0 0 0 1px #fbbf247a,0 0 24px #fbbf2459,0 14px 26px #050d216b}@keyframes virtuose-shimmer{0%{transform:translate(-140%) rotate(8deg);opacity:0}18%{opacity:1}52%{transform:translate(132%) rotate(8deg);opacity:.85}to{transform:translate(132%) rotate(8deg);opacity:0}}@keyframes virtuose-sparkle{0%{opacity:.6;transform:scale(.92)}to{opacity:1;transform:scale(1.07)}}.difficulty-launch-btn{margin-top:1.5rem;min-width:220px;padding:.72rem 1.2rem;border:none;border-radius:11px;background:linear-gradient(135deg,#2ea6e6,#3d9be0 42%,#2f86d3);color:#fff;font-size:.96rem;font-weight:700;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.difficulty-launch-btn:hover{transform:translateY(-2px);background:linear-gradient(135deg,#3ab2ee,#49a7ea 42%,#398fdb);box-shadow:0 12px 24px #1048806b,0 0 16px #2ea6e633}.difficulty-launch-btn:focus,.difficulty-launch-btn:focus-visible{outline:none;box-shadow:0 0 0 3px #51b2ea38}@media (max-width: 768px){.difficulty-modal-backdrop{--pieces-thumbnail-size: 140px}.pieces-page{--pieces-card-gap: .08rem;--pieces-nav-size: 36px;--pieces-nav-gutter: 5px;--pieces-max-visible-cards: 3;padding:1rem}.pieces-page .piece-title{font-size:.8rem}.pieces-page .piece-subtitle{font-size:.65rem}.piece-difficulty-dots{gap:5px;padding:0 8px;margin-top:.28rem}.piece-difficulty-dot{width:9px;height:9px}.pieces-page .section-header{gap:10px}.pieces-page .see-all-btn{font-size:.8rem;padding:5px 10px}.pieces-mosaic{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.difficulty-modal-content{padding:.55rem .9rem 1.2rem}.difficulty-modal-hero-actions{top:1rem}.difficulty-modal-title{font-size:1.15rem}.difficulty-choice-btn{width:84px;height:84px;font-size:.78rem}.difficulty-launch-btn{min-width:200px}}.home-page{--home-card-size: 240px;--home-thumbnail-size: 240px;--home-card-gap: .1rem;--home-nav-size: 42px;--home-nav-gutter: 6px;--home-max-visible-cards: 7;display:flex;flex-direction:column;gap:var(--gap-xl);max-width:1200px;margin:0 auto;padding:var(--padding-lg);position:relative}.home-page:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 40% 10%,rgba(100,140,255,.15),transparent 60%);pointer-events:none;z-index:0}.home-page.is-premium{max-width:100%;margin:0;padding-left:clamp(20px,2.8vw,36px);padding-right:clamp(20px,2.8vw,36px)}.home-page-title{margin:0;font-size:clamp(2rem,4vw,2.6rem);line-height:1.05;font-weight:800;color:var(--text-primary, var(--color-text));position:relative;z-index:1;letter-spacing:-.02em}.home-section{display:flex;flex-direction:column;gap:var(--gap-lg);position:relative;z-index:1}.home-section h2{margin:0;font-size:1.5em;font-weight:700;font-family:var(--font-sans);color:var(--text-primary, var(--color-text));letter-spacing:-.01em}.home-section+.home-section{margin-top:.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.04)}.home-carousel-wrapper{position:relative;display:flex;align-items:center;width:fit-content;max-width:min(100%,calc((var(--home-max-visible-cards) * var(--home-card-size)) + ((var(--home-max-visible-cards) - 1) * var(--home-card-gap)) + (2 * (var(--home-nav-size) + var(--home-nav-gutter)))));padding:0 calc(var(--home-nav-size) + var(--home-nav-gutter));box-sizing:border-box}.home-page.is-premium .home-carousel-wrapper{width:100%;max-width:100%;padding:0}.home-carousel-btn.home-carousel-btn-left{position:absolute;left:0;top:calc(var(--home-card-size) / 2);transform:translateY(-50%);z-index:2}.home-carousel-btn.home-carousel-btn-right{position:absolute;right:0;top:calc(var(--home-card-size) / 2);transform:translateY(-50%);z-index:2}.home-page.is-premium .home-carousel-btn.home-carousel-btn-left{left:8px;top:calc(var(--home-card-size) / 2)}.home-page.is-premium .home-carousel-btn.home-carousel-btn-right{right:8px;top:calc(var(--home-card-size) / 2)}.home-carousel-btn{width:var(--home-nav-size);height:var(--home-nav-size);padding:0;border:none;border-radius:999px;background:linear-gradient(135deg,#172142e6,#23325cd1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 24px #00000047;display:grid;place-items:center;min-width:var(--home-nav-size);min-height:var(--home-nav-size);color:#e8efff;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.home-carousel-btn.is-hidden{opacity:0;visibility:hidden;pointer-events:none}.home-carousel-btn svg{width:22px;height:22px;display:block}.home-carousel-btn:hover{border-color:transparent;background:linear-gradient(135deg,#212f58f5,#364c84e6);box-shadow:0 14px 28px #040a1c61;transform:translateY(calc(-50% - 1px))}.home-carousel-btn:focus,.home-carousel-btn:focus-visible{outline:none;box-shadow:0 0 0 3px #7daaff40,0 12px 24px #02081861}.home-carousel{width:fit-content;max-width:min(100%,calc((var(--home-max-visible-cards) * var(--home-card-size)) + ((var(--home-max-visible-cards) - 1) * var(--home-card-gap))));display:flex;gap:var(--home-card-gap);overflow-x:auto;overflow-y:visible;scroll-snap-type:x proximity;padding-top:8px;padding-bottom:.5rem;margin-top:-8px;cursor:grab;touch-action:pan-y;scrollbar-width:none}.home-page.is-premium .home-carousel{width:100%;max-width:100%;gap:1rem}.home-carousel.dragging{cursor:grabbing;-webkit-user-select:none;user-select:none;scroll-snap-type:none}.home-carousel::-webkit-scrollbar{display:none}.home-page .piece-card-outer{display:flex;flex-direction:column;align-items:center;width:var(--home-card-size);margin-bottom:.5rem;flex-shrink:0;position:relative}.home-page .piece-card{scroll-snap-align:start;min-width:var(--home-card-size);max-width:var(--home-card-size);aspect-ratio:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1px solid var(--border-color, rgba(255, 255, 255, .06));border-radius:var(--border-radius-lg, 12px);background:var(--card-background, rgba(21, 27, 43, .85));box-shadow:0 2px 8px #0000002e,0 1px 3px #0000001f;transition:transform .25s ease,box-shadow .25s ease;-webkit-tap-highlight-color:transparent;padding:0;-webkit-user-drag:none;position:relative;overflow:hidden}.home-page .piece-card,.home-page .piece-card:focus,.home-page .piece-card:focus-visible,.home-page .piece-card:active,.home-page .piece-card:visited,.home-page .piece-card:hover:focus,.home-page .piece-card:focus:active,.home-page .piece-card:focus-within{outline:none!important;border-color:var(--border-color, rgba(255, 255, 255, .06))!important;background:var(--card-background, rgba(21, 27, 43, .85))!important}.home-page .piece-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 8px 24px #00000052,0 2px 8px #0000002e!important;border-color:#ffffff1a!important}.home-page .piece-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.35) 0%,transparent 50%);opacity:0;transition:opacity .25s ease;pointer-events:none;z-index:1;border-radius:inherit}.home-page .piece-card:hover:after{opacity:1}.home-page .piece-icon{display:flex;align-items:center;justify-content:center;margin:0 auto;background:linear-gradient(135deg,#23283a 60%,#6366f1);border-radius:8px;overflow:hidden;padding:8px;width:var(--home-thumbnail-size);height:var(--home-thumbnail-size);flex-shrink:0}.home-page .piece-icon svg{width:100%;height:100%;transform:scale(1.15)}.home-page .piece-photo{width:100%;height:100%;aspect-ratio:1 / 1;transform:scale(1.15);object-fit:cover;border-radius:8px;display:block;-webkit-user-drag:none}.home-page .piece-labels{display:flex;flex-direction:column;align-items:flex-start;margin-top:.25rem;width:100%;padding:0 8px}.home-page .piece-title{font-weight:700;color:var(--text-primary, var(--color-text));font-size:.95rem;line-height:1.1;display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;transition:color .25s ease}.home-page .piece-card-outer:hover .piece-title{color:#fff}.home-page .piece-subtitle{font-size:.75rem;color:var(--text-secondary, var(--color-text-secondary));opacity:.7;margin-top:.1rem;display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;transition:opacity .25s ease}.home-page .piece-card-outer:hover .piece-subtitle{opacity:.85}.home-featured-section{width:100%}.home-featured-band{position:relative;width:100%;min-height:calc(var(--home-card-size) * 1.95);padding:clamp(18px,3vw,30px) 0;border-radius:18px;overflow:hidden;display:flex;align-items:center;justify-content:center;border:none;background:linear-gradient(115deg,#182248b8,#2a3c6ca8 42%,#121d36b8);box-shadow:0 18px 36px #00000047;isolation:isolate}.home-featured-band-bg{position:absolute;top:-14%;right:-14%;bottom:-14%;left:-14%;width:128%;height:128%;object-fit:cover;object-position:center;filter:blur(18px) saturate(1.25);transform:scale(1.08);opacity:.86;z-index:-1;pointer-events:none}.home-featured-band.has-photo:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#060a140a,#080c1833 48%,#0508109e),radial-gradient(circle at 50% 44%,#fafcff1a,#fafcff08 45%,#fafcff00 75%);pointer-events:none;z-index:0}.home-featured-band .piece-card-outer-featured{position:relative;z-index:1}.home-page .piece-card-outer.piece-card-outer-featured{width:calc(var(--home-card-size) * 1.5);max-width:calc(var(--home-card-size) * 1.5);margin-bottom:0}.home-page .piece-card.piece-card-featured{min-width:calc(var(--home-card-size) * 1.5);max-width:calc(var(--home-card-size) * 1.5);border:none!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0}.home-page .piece-card.piece-card-featured:hover{transform:none;box-shadow:none!important}.home-page .piece-card.piece-card-featured:after{display:none}.home-page .piece-card.piece-card-featured,.home-page .piece-card.piece-card-featured:focus,.home-page .piece-card.piece-card-featured:focus-visible,.home-page .piece-card.piece-card-featured:active,.home-page .piece-card.piece-card-featured:focus:active,.home-page .piece-card.piece-card-featured:focus-within{outline:none!important;border:none!important;background:transparent!important;box-shadow:none!important}.home-page .piece-card-featured .piece-icon{width:calc(var(--home-thumbnail-size) * 1.5);height:calc(var(--home-thumbnail-size) * 1.5);padding:0;background:transparent;border-radius:12px;overflow:hidden}.home-page .piece-labels.piece-labels-featured .piece-title{font-size:1.05rem}.home-page .piece-labels.piece-labels-featured .piece-subtitle{font-size:.82rem}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--padding-lg);gap:var(--gap-lg);color:var(--color-text-secondary);text-align:center;min-height:400px}.empty-state svg{width:80px;height:80px;opacity:.5}.empty-state h3{margin:0;font-size:1.5rem;color:var(--color-text)}.empty-state p{margin:0;font-size:1rem;max-width:400px}@media (max-width: 768px){.home-page{--home-card-gap: .08rem;--home-nav-size: 36px;--home-nav-gutter: 5px;--home-max-visible-cards: 3;padding:1rem;gap:var(--gap-lg)}.home-page .piece-title{font-size:.8rem}.home-page .piece-subtitle{font-size:.65rem}.home-featured-band{min-height:calc(var(--home-card-size) * 1.85);border-radius:14px}.home-page .piece-labels.piece-labels-featured .piece-title{font-size:.9rem}.home-page .piece-labels.piece-labels-featured .piece-subtitle{font-size:.72rem}}.search-page{display:flex;flex-direction:column;padding:2rem;max-width:1200px;margin:0 auto}.search-page.is-premium{max-width:100%;margin:0;padding-left:clamp(20px,2.8vw,36px);padding-right:clamp(20px,2.8vw,36px)}.search-input-block{min-height:unset;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:.7rem;margin-top:.6rem;margin-bottom:1.2rem}.search-input-block.has-query{min-height:unset;justify-content:flex-start;align-items:center;margin-bottom:1.2rem}.search-input-label{margin:0;font-size:1.12rem;font-weight:600;color:var(--text-primary)}.search-input-row{width:100%;display:flex;justify-content:center;margin-top:.7rem;margin-bottom:.9rem;position:relative}.search-input-block.has-query .search-input-row{justify-content:center}.search-input{width:min(100%,700px);height:48px;padding:0 52px 0 16px;border:none;border-radius:999px;background:linear-gradient(135deg,#162242f5,#20315ceb);box-shadow:0 10px 30px #030a1c6b,inset 0 1px #ffffff14;color:#f4f7ff;font-size:1rem}.search-clear-btn{position:absolute;right:max(calc((100% - min(100%,700px))/2 + 8px),8px);top:50%;transform:translateY(-50%);width:28px;height:28px;padding:0;border:none;background:transparent;color:#f4f7ff;-moz-appearance:none;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;display:grid;place-items:center;cursor:pointer;transition:transform .15s ease;box-shadow:none}.search-clear-btn:hover{transform:translateY(-50%) scale(1.08);background:transparent;box-shadow:none}.search-clear-btn svg{width:28px;height:28px;display:block}.search-clear-btn:focus,.search-clear-btn:focus-visible{outline:none;background:transparent;box-shadow:none}.search-input:focus,.search-input:focus-visible{outline:none;box-shadow:0 12px 30px #030a1c80,inset 0 1px #ffffff1a}.search-input::placeholder{color:#dce7ffb3}.search-results-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}.search-page .piece-card-outer{width:100%;margin-bottom:0;display:flex;flex-direction:column;align-items:center;position:relative}.search-page .piece-card{min-width:0;max-width:none;width:100%;aspect-ratio:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1px solid var(--border-color, rgba(255, 255, 255, .06));border-radius:var(--border-radius-lg, 12px);background:var(--card-background, rgba(21, 27, 43, .85));box-shadow:0 2px 8px #0000002e,0 1px 3px #0000001f;transition:transform .25s ease,box-shadow .25s ease;-webkit-tap-highlight-color:transparent;padding:0;position:relative;overflow:hidden}.search-page .piece-card,.search-page .piece-card:focus,.search-page .piece-card:focus-visible,.search-page .piece-card:active,.search-page .piece-card:visited,.search-page .piece-card:hover:focus,.search-page .piece-card:focus:active,.search-page .piece-card:focus-within{outline:none!important;border-color:var(--border-color, rgba(255, 255, 255, .06))!important;background:var(--card-background, rgba(21, 27, 43, .85))!important}.search-page .piece-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 8px 24px #00000052,0 2px 8px #0000002e!important;border-color:#ffffff1a!important}.search-page .piece-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.35) 0%,transparent 50%);opacity:0;transition:opacity .25s ease;pointer-events:none;z-index:1;border-radius:inherit}.search-page .piece-card:hover:after{opacity:1}.search-page .piece-icon{width:100%;height:auto;aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;margin:0 auto;background:linear-gradient(135deg,#23283a 60%,#6366f1);border-radius:8px;overflow:hidden;padding:8px}.search-page .piece-icon svg{width:100%;height:100%;transform:scale(1.15)}.search-page .piece-photo{width:100%;height:100%;aspect-ratio:1 / 1;transform:scale(1.15);object-fit:cover;border-radius:8px;display:block;-webkit-user-drag:none}.search-page .piece-labels{display:flex;flex-direction:column;align-items:flex-start;margin-top:.25rem;width:100%;padding:0 8px}.search-page .piece-title{font-weight:700;color:var(--text-primary);font-size:.95rem;line-height:1.1;display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;transition:color .25s ease}.search-page .piece-card-outer:hover .piece-title{color:#fff}.search-page .piece-subtitle{font-size:.75rem;color:var(--text-secondary);opacity:.7;margin-top:.1rem;display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;transition:opacity .25s ease}.search-page .piece-card-outer:hover .piece-subtitle{opacity:.85}.search-footer-cta{margin-top:1.9rem;display:flex;flex-direction:column;align-items:center;gap:.7rem}.search-footer-cta p{margin:0;color:var(--text-primary);font-size:1.6rem;font-weight:600;text-align:center}.search-footer-btn{border:none;border-radius:10px;height:44px;padding:0 18px;color:#eef4ff;background:linear-gradient(135deg,#172142f5,#2c3f72eb);box-shadow:0 10px 24px #02081852;font-weight:700;font-size:.94rem;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}.search-footer-btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px #02081861;filter:brightness(1.05)}.search-footer-btn:focus,.search-footer-btn:focus-visible{outline:none;box-shadow:0 0 0 3px #7daaff40,0 12px 24px #02081861}@media (max-width: 768px){.search-page{padding:1rem}.search-input-block{min-height:unset;margin-top:.4rem}.search-input-label{font-size:.98rem}.search-input{width:100%;height:44px}.search-results-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.search-page .piece-title{font-size:.8rem}.search-page .piece-subtitle{font-size:.65rem}.search-footer-cta p{font-size:1.35rem}}.admin-page{width:min(1200px,100%);margin:0 auto;padding:clamp(16px,2vw,24px);display:grid;gap:18px}.admin-page-header h1{margin:0;font-size:clamp(1.6rem,2.8vw,2.2rem)}.admin-page-header p{margin:6px 0 0;color:var(--color-text-secondary)}.admin-page-toolbar{display:grid;gap:8px}.admin-catalog-switch{display:inline-flex;align-items:center;gap:8px;width:fit-content;padding:6px;border-radius:12px;background:#0f172a73;border:1px solid rgba(148,163,184,.2)}.admin-catalog-tab{border:1px solid transparent;border-radius:10px;background:transparent;color:var(--color-text-secondary);font:inherit;font-weight:700;padding:8px 12px;cursor:pointer;transition:border-color var(--transition-fast),background-color var(--transition-fast),color var(--transition-fast)}.admin-catalog-tab:hover{color:var(--color-text);background:#1e293b80}.admin-catalog-tab.is-active{color:#dbeafe;border-color:#51b2ea8c;background:#082f49a6}.admin-label{font-weight:600}.admin-search{width:min(520px,100%);border:1px solid rgba(148,163,184,.4);background:#0f172a99;color:var(--color-text);border-radius:10px;padding:10px 12px;font-size:.98rem}.admin-section{display:grid;gap:10px}.admin-import-section .import-section{margin:0}.admin-import-drop-target{cursor:pointer}.admin-section h2{margin:0;font-size:1.2rem}.admin-association-banner{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid rgba(81,178,234,.35);background:#163c5c73}.admin-association-banner strong{color:#dbeafe}.admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}.admin-recordings-list{display:flex;flex-direction:column;gap:0}.admin-recordings-list:before{content:"";display:block;height:1px;background:linear-gradient(90deg,#fff3,#ffffffd9,#fff3)}.admin-page .recording-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0;background:transparent;border:0;border-radius:0;box-shadow:none;border-bottom:1px solid var(--border-color, var(--color-border));margin:0}.admin-recording-main{min-width:0;display:flex;flex-direction:column;gap:.28rem}.admin-recording-main .recording-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-official-groups{display:grid;gap:12px}.admin-group-list-block{border:1px solid rgba(148,163,184,.2);border-radius:14px;padding:0 14px 10px;background:#0f172a5c}.admin-group-header-row{padding-top:12px!important}.admin-group-header-actions{gap:10px}.admin-group-variants-list{margin-left:28px}.admin-group-variants-list:before{display:none}.admin-group-variants-list .recording-item:last-child{border-bottom:none}.admin-association-choice-row{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}.admin-association-choice-row:hover{background:#0f172a6b}.admin-association-choice-row.is-source{opacity:.7;cursor:not-allowed}.admin-card{border:1px solid rgba(148,163,184,.24);border-radius:14px;padding:14px;background:#0f172a80;display:grid;gap:8px}.admin-card-group{grid-column:span var(--admin-group-span, 1);gap:12px}.admin-group-count{border-radius:999px;padding:3px 9px;font-size:.72rem;font-weight:700;color:#bfdbfe;border:1px solid rgba(96,165,250,.4);background:#1e40af59}.admin-group-variants{display:grid;grid-template-columns:repeat(var(--admin-variant-count, 1),minmax(0,1fr));gap:10px}.admin-group-variant{min-width:0;border-radius:12px;border:1px solid rgba(148,163,184,.2);background:#0f172a6b;padding:10px;display:grid;gap:8px}.admin-group-variant-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.admin-variant-difficulty{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;line-height:1.2;letter-spacing:.04em;text-transform:uppercase;color:#e2e8f0eb;font-weight:700}.admin-variant-date{margin:0;color:var(--color-text-secondary)}.admin-feature-row-variant{margin-top:0}.admin-card h3{margin:0;font-size:1rem}.admin-card p{margin:0;color:var(--color-text-secondary)}.admin-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.admin-card-top-right{display:inline-flex;align-items:center;gap:6px}.admin-badge{border-radius:999px;padding:3px 8px;font-size:.72rem;font-weight:700;color:#102515;background:#86efac}.admin-card-actions{display:flex;gap:8px;flex-wrap:wrap}.admin-delete-btn{color:#fecaca!important;border-color:#f8717173!important}.admin-delete-btn:hover{background:#7f1d1d59!important}.admin-card-association-target{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:border-color var(--transition-fast),transform var(--transition-fast),background-color var(--transition-fast);border-style:dashed}.admin-card-association-target:hover{border-color:#60a5facc;background:#0f172aa6;transform:translateY(-1px)}.admin-card-association-target.is-source{cursor:not-allowed;opacity:.7;border-style:solid;border-color:#e2e8f052}.admin-association-difficulty{display:inline-flex;align-items:center;gap:7px;width:fit-content;border-radius:999px;border:1px solid rgba(148,163,184,.35);padding:4px 10px;color:#dbeafe;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.admin-association-hint{color:#93c5fd!important;font-size:.82rem}.admin-difficulty-chip-dot{width:10px;height:10px;border-radius:999px;display:inline-block}.admin-difficulty-chip-dot.difficulty-dot-beginner{background:#16a34a}.admin-difficulty-chip-dot.difficulty-dot-intermediate{background:#2563eb}.admin-difficulty-chip-dot.difficulty-dot-expert{background:#dc2626}.admin-difficulty-chip-dot.difficulty-dot-virtuoso{background:linear-gradient(135deg,#fbbf24,#f59e0b 45%,#d97706)}.admin-card-menu-wrap{position:relative}.admin-card-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:170px;border-radius:10px;border:1px solid rgba(148,163,184,.35);background:#0f172af5;box-shadow:0 12px 28px #00000059;z-index:40;padding:6px}.admin-card-menu-item{width:100%;text-align:left;border:none;border-radius:8px;padding:8px 10px;font:inherit;color:var(--color-text);background:transparent;cursor:pointer}.admin-card-menu-item:hover{background:#51b2ea24}.admin-feature-row{margin-top:4px;padding-top:8px;border-top:1px solid rgba(148,163,184,.22);display:flex;align-items:center;justify-content:space-between;gap:10px}.admin-feature-label{font-size:.9rem;color:var(--color-text-secondary)}.admin-feature-toggle{border:none;border-radius:999px;min-width:52px;padding:5px 12px;font-weight:700;cursor:pointer;color:#e2e8f0;background:#334155cc;transition:background-color var(--transition-fast),transform var(--transition-fast)}.admin-feature-toggle.on{background:#16a34a}.admin-feature-toggle.off{background:#475569d9}.admin-feature-toggle:hover{transform:translateY(-1px)}.admin-empty{margin:0;color:var(--color-text-secondary)}.admin-delete-modal{width:min(420px,calc(100vw - 2rem));border-radius:14px;border:1px solid rgba(248,113,113,.35);background:#0f172af7;box-shadow:0 16px 38px #0000006b;padding:18px;display:grid;gap:12px}.admin-delete-modal h2{margin:0;font-size:1.06rem}.admin-delete-modal p{margin:0;color:var(--color-text-secondary);word-break:break-word}.admin-delete-modal-actions{display:flex;justify-content:flex-end;gap:8px}.admin-delete-modal-btn{border:1px solid rgba(148,163,184,.35);border-radius:9px;background:#1e293bd9;color:var(--color-text);font:inherit;font-weight:700;padding:8px 14px;cursor:pointer}.admin-delete-modal-btn.is-danger{border-color:#f8717173;background:#7f1d1d73;color:#fecaca}.admin-delete-modal-btn:hover{transform:translateY(-1px)}.admin-edit-form .category-actions-row{align-items:center;gap:.75rem}.admin-difficulty-field{margin-left:.7rem;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:.34rem}.admin-difficulty-label{font-size:.8rem;line-height:1.2;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#c4dbf4eb;padding-left:2px}.admin-difficulty-picker{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0}.admin-difficulty-dot{width:22px;height:22px;border-radius:999px;border:2px solid transparent;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;color:#fff;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}.admin-difficulty-dot svg{width:14px;height:14px}.admin-difficulty-dot.difficulty-dot-beginner{background:#16a34a}.admin-difficulty-dot.difficulty-dot-intermediate{background:#2563eb}.admin-difficulty-dot.difficulty-dot-intermediate.is-selected{color:#93c5fd}.admin-difficulty-dot.difficulty-dot-intermediate.is-selected svg path{fill:#93c5fd!important}.admin-difficulty-dot.difficulty-dot-expert{background:#dc2626}.admin-difficulty-dot.difficulty-dot-virtuoso{background:linear-gradient(135deg,#fbbf24,#f59e0b 45%,#d97706)}.admin-difficulty-dot:hover{transform:translateY(-1px)}.admin-difficulty-dot.is-selected{box-shadow:0 0 0 2px #ffffff38;border-color:#fffc}.admin-edit-modal-actions-bottom{margin-top:1rem;width:100%;display:flex;justify-content:center;align-self:center;margin-left:0!important}@media (max-width: 1080px){.admin-card-group{grid-column:span 1}.admin-group-variants{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}@media (max-width: 700px){.admin-catalog-switch{width:100%;display:grid;grid-template-columns:1fr 1fr}.admin-catalog-tab{width:100%;text-align:center}.admin-association-banner,.admin-group-variants{grid-template-columns:1fr}}.score-viewport{position:relative;max-height:260px;overflow:hidden;contain:layout paint;isolation:isolate;padding:.5rem;border-radius:var(--border-radius);background:#fff;border:none}.score-center-line{position:absolute;top:8px;bottom:8px;left:50%;width:10px;transform:translate(-50%);background:#80808033;box-shadow:0 0 8px #80808024;border-radius:999px;pointer-events:none;z-index:5}.score-loop-control-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:20;transform:translateZ(0);contain:paint}.score-loop-toggle-btn{width:58px;height:58px;border-radius:999px;border:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;background:#ffffffd1;color:#323232;box-shadow:0 4px 14px #0000004d;cursor:pointer;pointer-events:auto;transition:background .14s ease,transform .14s ease,box-shadow .14s ease;-webkit-tap-highlight-color:transparent}.score-loop-toggle-btn:focus,.score-loop-toggle-btn:focus-visible,.score-loop-toggle-btn:active{outline:none;box-shadow:0 4px 14px #0000004d}.score-loop-toggle-btn:hover{background:#ffffffeb;transform:translate(-50%,-50%) scale(1.03)}.score-loop-toggle-btn.active{background:#4fd0ffe6;color:#08324b}.score-loop-toggle-btn.has-selection:not(.active){box-shadow:0 4px 14px #0000004d,0 0 0 2px #4fd0ff73}.score-loop-toggle-btn svg{width:24px;height:24px}.score-loop-selection-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.score-loop-selection-shade{position:absolute;top:8px;bottom:8px;border-radius:10px;background:#60606038;box-shadow:inset 0 0 0 1px #3c3c3c3d}.score-loop-handle{position:absolute;top:8px;bottom:8px;width:18px;border:none;border-radius:999px;transform:translate(-50%);background:linear-gradient(180deg,#32373ff2,#1c2026f2);box-shadow:0 2px 8px #00000073;cursor:ew-resize;pointer-events:auto;padding:0;display:inline-flex;align-items:center;justify-content:center}.score-loop-handle-grip{width:4px;height:26px;border-radius:999px;background:#ffffffb8}.score-loop-handle:hover,.score-loop-handle:focus-visible{outline:none;box-shadow:0 2px 8px #00000073,0 0 0 2px #4fd0ff73}.score-container{height:100%;overflow-x:hidden;overflow-y:hidden;padding:.25rem 0;background:transparent;position:relative;white-space:normal;scroll-behavior:auto;cursor:pointer;scrollbar-width:none;-ms-overflow-style:none}.score-container.drag-seek-enabled{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}.score-container.drag-seek-enabled:active{cursor:grabbing}.score-container::-webkit-scrollbar{display:none}.score-content-track{display:inline-block;min-width:100%;white-space:nowrap;transform:translateZ(0);will-change:transform}.score-content-track:before,.score-content-track:after{content:"";display:inline-block;width:45%}.score-content-track>*{display:inline-block;vertical-align:top}.score-container .osmd-cursor{opacity:0!important}.score-container svg{width:auto!important;height:auto!important;max-height:200px}.score-container [class*=osmd-cursor]{opacity:0!important;fill:transparent!important;stroke:transparent!important}.play-fullscreen .score-viewport{max-height:none;height:100%;padding:14px 18px;border-radius:0;background:linear-gradient(180deg,#f5fcfffa,#ebf8fff7);border-top:1px solid rgba(116,190,232,.3);border-bottom:1px solid rgba(116,190,232,.25);box-shadow:inset 0 1px #ffffffd1,inset 0 -1px #b8d8ec80}.play-fullscreen .score-viewport:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:4;background:linear-gradient(90deg,#daeefaeb,#daeefa00 13%,#daeefa00 87%,#daeefaeb)}.play-fullscreen .score-center-line{width:12px;top:10px;bottom:10px;background:linear-gradient(180deg,#51b2ea94,#72ddbf94);box-shadow:0 0 16px #4eade43d}.play-fullscreen .score-container{display:flex;align-items:center;justify-content:flex-start;height:100%;padding:.65rem 0;position:relative;z-index:2}.play-fullscreen .score-content-track{flex:0 0 auto}.play-fullscreen .score-content-track:before,.play-fullscreen .score-content-track:after,.play-fullscreen .score-content-track>*{flex:0 0 auto}.play-fullscreen .score-container svg{display:block;max-height:none;filter:contrast(1.08) saturate(1.06)}@media (max-width: 768px){.score-loop-toggle-btn{width:52px;height:52px}.score-loop-toggle-btn svg{width:22px;height:22px}}.app{min-height:100vh;background:linear-gradient(180deg,#ffffff1c,#ffffff0f),radial-gradient(ellipse at top,var(--color-bg-alt) 0%,var(--color-bg) 58%);color:var(--color-text);position:relative}.app:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 50%,rgba(99,102,241,.08) 0%,transparent 52%),radial-gradient(circle at 80% 80%,rgba(20,184,166,.075) 0%,transparent 52%);pointer-events:none;z-index:0}.app>*:not(.settings-overlay):not(.site-header){position:relative;z-index:1}.app>.settings-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:3000}.main-layout .app-main{flex:1;max-width:1200px;margin:0 auto;padding:var(--padding-lg);width:100%}.app-main{flex:1;max-width:100%;padding:var(--padding-lg);animation:fadeIn var(--transition-normal) ease-out;overflow-y:auto}.app:not(.play-fullscreen):not(.play-page) .app-main{padding-top:calc(var(--padding-lg) + 38px)}.app.premium-wide-page .app-main{padding-left:0;padding-right:0}.play-area-stack{display:flex;flex-direction:column;gap:0}.play-toolbar{display:flex;justify-content:flex-end;align-items:center;margin:var(--gap) 0}.play-toolbar-left,.play-toolbar-right,.play-toolbar-center{position:relative}.app:not(.play-fullscreen) .play-toolbar{display:grid;grid-template-columns:36px 1fr 36px;justify-content:stretch;align-items:center;position:relative;z-index:12000;gap:10px}.app:not(.play-fullscreen) .play-toolbar-left,.app:not(.play-fullscreen) .play-toolbar-right{display:flex;align-items:center;justify-content:center}.app:not(.play-fullscreen) .play-toolbar-center{z-index:220;min-width:0;display:flex;align-items:center;justify-content:center}.app:not(.play-fullscreen) .play-fullscreen-icon-btn{position:static;border:none;background:transparent;box-shadow:none;color:var(--color-text);padding:0;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:color var(--transition-fast),transform var(--transition-fast)}.app:not(.play-fullscreen) .play-fullscreen-icon-btn svg{width:24px;height:24px;display:block}.app:not(.play-fullscreen) .play-fullscreen-icon-btn:hover:not(:disabled){color:var(--color-primary);transform:translateY(-1px)}.app:not(.play-fullscreen) .play-fullscreen-icon-btn:disabled{opacity:.5;cursor:not-allowed}.play-back-text-btn{border:none;background:transparent;color:var(--color-text);font-weight:700;font-size:1.05rem;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0;border-radius:0;line-height:1;cursor:pointer;transition:color var(--transition-fast),transform var(--transition-fast)}.play-back-text-btn:hover:not(:disabled){color:#fff;transform:translateY(-1px)}.play-back-text-btn:disabled{opacity:.5;cursor:not-allowed}.play-back-text-btn:focus-visible{outline:none;text-decoration:underline;text-underline-offset:4px}.play-back-text-btn-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;opacity:.96;transform:translateY(0)}.play-back-text-btn-icon:before{content:"";width:10px;height:10px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg);transform-origin:center}.play-fullscreen-toggle{border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);padding:10px 16px;border-radius:999px;font-weight:700;cursor:pointer;transition:all var(--transition-fast)}.play-fullscreen-toggle:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-1px)}.play-fullscreen-toggle:disabled{opacity:.5;cursor:not-allowed}.play-fullscreen-toggle.active{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-accent) 100%);color:#fff;border-color:transparent;box-shadow:var(--shadow-glow)}.play-area-progress-container{--progress-position: 0%;--progress-ratio: 0;--progress-side-padding: 8px;height:24px;display:flex;align-items:center;cursor:pointer;position:relative;padding:0 var(--progress-side-padding);transition:background-color var(--transition-fast),border-color var(--transition-fast)}.play-area-progress-track{flex:1;height:6px;background:#9dbfdc42;border-radius:999px;position:relative;overflow:hidden;box-shadow:inset 0 1px 2px #00000040}.play-area-progress-track:after{content:"";position:absolute;inset:0 auto 0 0;width:var(--progress-position, 0%);border-radius:inherit;background:linear-gradient(90deg,#4fd0ff,#78f0d0 52%,#ffd978);box-shadow:0 0 12px #4fd0ff73}.play-area-progress-handle{display:none}.play-fullscreen .play-area-stack .piano-keyboard-wrapper{margin-top:0}.app.app-print{min-height:100vh;background:#fff;color:#101522}.app.app-print:before{display:none}.printable-score-page{min-height:100vh;padding:24px;background:#fff}.printable-score-shell{max-width:1240px;margin:0 auto}.printable-score-title{margin:0 0 18px;color:#101522;font-size:1.75rem;font-weight:700}.printable-score-status,.printable-score-error{margin:0 0 16px;font-size:.98rem;color:#425066}.printable-score-error{color:#a12828}.printable-score-page .score-viewport{max-height:none;min-height:0;padding:0;background:#fff;border-radius:0;contain:none}.printable-score-page .score-center-line,.printable-score-page .score-loop-control-layer{display:none}.printable-score-page .score-container{overflow:visible;cursor:default}.printable-score-page .score-content-track{display:block;min-width:0;transform:none!important}.printable-score-page .score-content-track:before,.printable-score-page .score-content-track:after{display:none}.printable-score-page .score-content-track>*{display:block}.printable-score-page .score-container svg{max-height:none;max-width:100%}@media print{.app.app-print,.printable-score-page{min-height:auto;padding:0;background:#fff}.printable-score-shell{max-width:none;margin:0}.printable-score-title{margin-bottom:12px;font-size:20pt}}.play-fullscreen .play-area-stack .falling-notes-zone{border-top-left-radius:0;border-top-right-radius:0;border-top:none;flex:1 1 auto;min-height:0;height:auto}.play-fullscreen .play-area-stack .score-viewport{border-top-left-radius:0;border-top-right-radius:0}.play-fullscreen{height:100vh;overflow:hidden;--fs-bg-deep: #040a17;--fs-bg-mid: #0a1a33;--fs-surface: rgba(8, 18, 38, .66);--fs-surface-strong: rgba(7, 16, 34, .88);--fs-border: rgba(128, 214, 255, .28);--fs-text-strong: #e9f7ff;--fs-text-muted: #a0c0d4;--fs-accent-a: #57ccff;--fs-accent-b: #7df0ce;--fs-accent-c: #ffd67d;--white-key-height: calc((100vw - 64px) * 5 / 52)}.play-fullscreen:before{background:radial-gradient(1200px 560px at 12% -8%,rgba(87,204,255,.24) 0%,transparent 55%),radial-gradient(980px 500px at 88% -12%,rgba(125,240,206,.19) 0%,transparent 58%),radial-gradient(700px 360px at 50% 120%,rgba(255,214,125,.14) 0%,transparent 62%),linear-gradient(180deg,var(--fs-bg-mid) 0%,var(--fs-bg-deep) 100%)}.play-fullscreen:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;opacity:.5;background:linear-gradient(transparent 0,transparent calc(100% - 1px),rgba(148,182,212,.08) calc(100% - 1px)),linear-gradient(90deg,transparent 0,transparent calc(100% - 1px),rgba(148,182,212,.06) calc(100% - 1px));background-size:100% 36px,36px 100%}.play-fullscreen .site-header{display:none}.play-fullscreen .main-layout{min-height:100vh;height:100vh}.play-fullscreen .sidebar{display:none}.play-fullscreen .app-main{max-width:100%;padding:0;height:100vh;overflow:hidden;background:linear-gradient(180deg,#0812266b,#040a17cc)}.play-fullscreen .play-toolbar{position:fixed;top:18px;left:16px;right:16px;justify-content:space-between;z-index:13000;margin:0;font-family:Rajdhani,Avenir Next Condensed,Trebuchet MS,sans-serif;letter-spacing:.02em;text-transform:uppercase}.play-fullscreen .play-toolbar-left,.play-fullscreen .play-toolbar-right{opacity:.4;transition:opacity .18s ease-in-out}.play-fullscreen .play-toolbar-center{position:absolute;left:50%;transform:translate(-50%);max-width:min(70vw,820px);min-width:0;opacity:0;transition:opacity .18s ease-in-out}.play-fullscreen.top-overlay-visible .play-toolbar-left,.play-fullscreen.top-overlay-visible .play-toolbar-right,.play-fullscreen.top-overlay-visible .play-toolbar-center,.play-fullscreen.mode-settings-open .play-toolbar-left,.play-fullscreen.mode-settings-open .play-toolbar-right,.play-fullscreen.mode-settings-open .play-toolbar-center{opacity:1}.play-mode-settings-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:12000;background:#030811a3;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.play-fullscreen.mode-settings-open .play-toolbar-left{pointer-events:none}.play-fullscreen .play-back-text-btn{color:var(--fs-text-strong);font-size:1.1rem;font-weight:800;letter-spacing:.03em;text-shadow:0 0 12px rgba(87,204,255,.28);border:none;background:transparent;box-shadow:none}.play-fullscreen .play-back-text-btn:hover:not(:disabled){color:#fff;transform:translateY(-1px)}.play-fullscreen .play-back-text-btn:disabled{color:var(--fs-text-muted);border:none;background:transparent}.play-mode-settings-toggle{width:auto;height:auto;border:none;border-radius:0;background:transparent;color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:color var(--transition-fast),transform var(--transition-fast);box-shadow:none}.play-mode-settings-toggle svg{width:32px;height:32px;display:block;transform:scale(.9);transform-origin:center}.play-mode-settings-toggle:hover{color:#fff;transform:translateY(-1px);filter:drop-shadow(0 0 12px rgba(87,204,255,.45));background:transparent;border-color:transparent}.play-mode-settings-toggle:focus-visible{outline:none;text-decoration:underline;text-underline-offset:4px}.app:not(.play-fullscreen) .play-mode-settings-toggle{width:36px;height:36px;border:none;border-radius:0;background:transparent;color:var(--color-text);box-shadow:none}.app:not(.play-fullscreen) .play-mode-settings-toggle svg{width:26px;height:26px;transform:scale(.9);transform:none}.app:not(.play-fullscreen) .play-mode-settings-toggle:hover{color:var(--color-primary);filter:none;background:transparent;border-color:transparent}.play-mode-settings-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:230px;padding:12px 10px;border-radius:14px;border:none;background:#091222f2;box-shadow:0 18px 42px #0106109e;display:flex;flex-direction:column;gap:4px;z-index:13000;color:var(--fs-text-strong);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.app:not(.play-fullscreen) .play-mode-settings-menu{left:auto;right:0;transform:none;min-width:240px;background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text);box-shadow:var(--shadow-lg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:14000}.play-current-piece{max-width:min(70vw,820px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;font-weight:700;color:var(--color-text);font-size:1rem}.play-fullscreen.no-score .play-current-piece{color:var(--fs-text-strong);text-shadow:0 0 12px rgba(87,204,255,.3)}.play-mode-settings-item{border:none;background:transparent;color:var(--fs-text-muted);text-align:left;border-radius:8px;font-weight:700;letter-spacing:.02em;padding:8px 12px;cursor:pointer;transition:color var(--transition-fast),opacity var(--transition-fast)}.play-mode-settings-item:hover:not(:disabled){color:#fff;opacity:.96}.play-mode-settings-item.active{color:var(--fs-accent-a);background:transparent;box-shadow:none}.play-mode-settings-item:disabled{opacity:.5;cursor:not-allowed}.app:not(.play-fullscreen) .play-mode-settings-item{color:var(--color-text-secondary)}.app:not(.play-fullscreen) .play-mode-settings-item:hover:not(:disabled){color:var(--color-text)}.app:not(.play-fullscreen) .play-mode-settings-item.active{color:var(--color-primary)}.play-mode-speed-control{margin-top:8px;padding-top:10px;border-top:none;display:flex;flex-direction:column;gap:7px}.play-mode-speed-control label{color:var(--fs-text-strong);font-size:.86rem;font-weight:700;letter-spacing:.02em}.app:not(.play-fullscreen) .play-mode-speed-control label{color:var(--color-text-secondary)}.play-mode-speed-control input[type=range]{width:100%;height:14px;display:block;accent-color:#6cd9ff;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer}.play-mode-speed-control input[type=range]:active{cursor:grabbing}.play-mode-speed-control input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,#57ccffb8,#7df0ceb8)}.play-mode-speed-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;margin-top:-4px;border:1px solid rgba(255,255,255,.9);background:#f6fdff;box-shadow:0 0 10px #57ccffb3}.play-mode-speed-control input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:linear-gradient(90deg,#57ccffb8,#7df0ceb8)}.play-mode-speed-control input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;border:1px solid rgba(255,255,255,.9);background:#f6fdff;box-shadow:0 0 10px #57ccffb3}.play-performance-mode .play-mode-settings-backdrop,.play-performance-mode .play-mode-settings-menu,.play-performance-mode .keyboard-help{backdrop-filter:none;-webkit-backdrop-filter:none}.play-performance-mode .play-mode-settings-menu,.play-performance-mode .play-area-progress-container,.play-performance-mode .play-area-progress-track,.play-performance-mode .play-area-progress-handle,.play-performance-mode .play-control-curtain{box-shadow:none}.play-performance-mode .play-mode-settings-toggle,.play-performance-mode .play-mode-settings-toggle:hover,.play-performance-mode .play-back-text-btn,.play-performance-mode .play-current-piece{filter:none;text-shadow:none}.play-fullscreen .recording-controls,.play-fullscreen .guided-mode,.play-fullscreen .autoplay-mode,.play-fullscreen .keyboard-help{display:none}.play-fullscreen .play-area-progress-container{order:2;--progress-side-padding: 14px;padding:14px var(--progress-side-padding) 16px;border-top:1px solid var(--fs-border);background:linear-gradient(180deg,#0b182ee6,#081224f2);height:auto;box-shadow:0 -10px 26px #01061059}.play-fullscreen .play-area-stack{height:100%}.play-fullscreen.no-score .play-area-stack{justify-content:flex-end}.play-fullscreen.no-score:not(.no-falling-notes) .piano-keyboard-wrapper{margin-top:0;margin-bottom:0;height:auto;min-height:0;display:flex;flex-direction:column;flex:1 1 auto}.play-fullscreen.no-score:not(.no-falling-notes) .piano-keyboard-container{flex:0 0 auto}.play-fullscreen.no-score:not(.no-falling-notes) .falling-notes-zone{flex:1 1 auto;min-height:0;height:auto}.play-fullscreen.no-score.no-falling-notes .piano-keyboard-wrapper{margin-top:0;margin-bottom:0;height:auto;min-height:0;display:flex;flex-direction:column;flex:1 1 auto}.play-fullscreen.no-score.no-falling-notes .piano-keyboard-container{flex:0 0 auto}.play-fullscreen.no-score.no-falling-notes .piano-top-extension{flex:1 1 auto;min-height:0;height:auto}.play-fullscreen .play-score-panel{order:1;flex:0 0 auto;height:360px;min-height:360px;flex-shrink:0;background:linear-gradient(180deg,#0b182e61,#07102247);border-top:1px solid rgba(118,195,241,.22);border-bottom:1px solid rgba(118,195,241,.18);box-shadow:inset 0 1px #ffffff0d}.play-fullscreen .piano-keyboard-wrapper{order:0;margin:0;border-radius:0;flex:1 1 auto;min-height:0;height:auto;box-shadow:inset 0 1px #88d3ff2e;border-top:1px solid rgba(118,195,241,.26);background:linear-gradient(180deg,#08122459,#050c18a6)}.play-fullscreen .piano-keyboard-container{flex:0 0 auto}.play-fullscreen .keyboard-container{height:calc((100vw - 64px) * 5 / 52);overflow:hidden}.play-fullscreen .white-key{min-width:0}.play-fullscreen .piano-top-extension{flex:1 1 auto;min-height:0;height:auto}.play-fullscreen.no-falling-notes .piano-keyboard-wrapper{background:#111317;border-top:1px solid var(--keyboard-border);box-shadow:inset 0 1px #ffffff0f}.play-fullscreen.no-falling-notes .piano-top-extension{border-radius:0}.play-fullscreen .piano-keyboard-container .play-control-curtain{position:absolute;bottom:auto;top:100%;border-radius:0;box-shadow:0 10px 24px #00000061,0 3px 10px #0000003d}.play-fullscreen.no-score .piano-keyboard-container .play-control-curtain{top:auto;bottom:100%;border-radius:var(--radius-lg) var(--radius-lg) 0 0}.play-fullscreen.mouse-idle-hidden,.play-fullscreen.mouse-idle-hidden *{cursor:none!important}@media (max-width: 760px){.play-fullscreen .play-toolbar{top:12px;left:12px;right:12px}.play-fullscreen .play-back-text-btn{font-size:.98rem}.play-mode-settings-toggle{width:46px;height:46px}.play-mode-settings-menu{min-width:200px}}@media (max-width: 768px){.app-main{padding:var(--padding)}.app:not(.play-fullscreen):not(.play-page) .app-main{padding-top:calc(var(--padding) + 34px)}.app.play-page:not(.play-fullscreen) .play-toolbar{margin-top:72px}}.midi-status{text-align:center;margin:0 auto var(--gap);padding:12px 24px;border-radius:var(--radius);font-weight:500;font-size:.95rem;display:block;width:fit-content;min-width:300px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all var(--transition-fast)}.midi-status.midi-red{background:var(--color-error-light);color:var(--color-error);border:1px solid var(--color-error)}.midi-status.midi-orange{background:var(--color-warning-light);color:var(--color-warning);border:1px solid var(--color-warning)}.midi-status.midi-green{background:var(--color-success-light);color:var(--color-success);border:1px solid var(--color-success);box-shadow:0 0 20px #10b98133}.import-row{display:flex;gap:var(--gap-lg);align-items:stretch;justify-content:center;margin:calc(var(--gap-xl) + 0px) auto var(--gap-xl);width:max-content}.imports-wrapper{display:flex;flex-direction:column;align-items:center;width:100%;margin-top:24px}.imports-toggle{background:transparent;border:none;color:var(--color-text-secondary);font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;margin:0 auto 8px;transition:color var(--transition-fast),transform var(--transition-fast)}.imports-toggle:hover{color:var(--color-primary);transform:translateY(-2px)}.imports-arrow{display:inline-flex;align-items:center;justify-content:center;transition:transform .2s ease;transform-origin:center;margin-left:8px;line-height:1}.imports-arrow svg{width:14px;height:14px;display:block}.imports-toggle.open .imports-arrow{transform:rotate(180deg)}.imports-panel{width:100%;display:block;overflow:hidden;max-height:0;opacity:0;transition:max-height .3s ease,opacity .25s ease}.imports-panel.open{max-height:1200px;opacity:1;transition:max-height .35s ease,opacity .3s ease}@media (max-width: 900px){.imports-toggle{margin-bottom:6px}}.inline-recordings{margin-top:18px;width:calc(1040px + var(--gap-lg));max-width:calc(100% - 48px);margin-left:auto;margin-right:auto;background:var(--color-surface);border:1px solid var(--color-border);border-radius:10px;padding:12px;box-shadow:var(--shadow-sm)}.inline-recordings-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.inline-recordings-header h3{margin:0;font-size:1rem;display:inline-flex;align-items:center;gap:8px;line-height:1}.inline-recordings-count{color:var(--color-text-secondary);font-weight:600}.icon-recordings{display:inline-flex;align-items:center;justify-content:center;color:currentColor}.icon-recordings svg{width:24px;height:24px;display:block}.icon-import-midi,.icon-import-sheet{display:inline-flex;align-items:center;justify-content:center;color:inherit;vertical-align:middle;margin-right:8px}.icon-import-midi svg,.icon-import-sheet svg{width:40px;height:40px;display:block}@media (max-width: 900px){.icon-import-midi svg,.icon-import-sheet svg{width:28px;height:28px}}.icon-import-midi .secondary{fill:transparent;filter:none}.inline-recordings-empty{color:var(--color-text-secondary);padding:8px 0}.inline-recordings-list{display:flex;flex-direction:column;gap:8px}.inline-recording-item{display:flex;align-items:center;justify-content:space-between;padding:8px;border-radius:8px;background:transparent}.inline-recording-info{display:flex;flex-direction:column}.inline-recording-name{font-weight:700}.inline-recording-meta{font-size:.85rem;color:var(--color-text-secondary)}.inline-recording-actions{display:flex;gap:8px}.inline-recording-actions .btn{border:none;background:transparent;padding:6px;border-radius:8px;transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease}.inline-recording-actions .btn:focus{outline:none;box-shadow:none}.inline-recording-actions .btn.btn-primary:hover{background:#00e5ff0f;box-shadow:0 8px 24px #00e5ff1f;transform:translateY(-2px)}.inline-recording-actions .btn.btn-danger:hover{background:#ff2d550f;box-shadow:0 8px 24px #ff2d551f;transform:translateY(-2px)}.icon-play svg{width:18px;height:18px;display:block}.btn.btn-primary .icon-play{margin-right:6px;display:inline-flex;align-items:center}.icon-play{color:#00e5ff;filter:drop-shadow(0 0 8px rgba(0,229,255,.45))}.icon-play:hover{filter:drop-shadow(0 0 12px rgba(0,229,255,.6)) saturate(120%)}.icon-trash svg{width:22px;height:22px;display:block}.btn.btn-danger .icon-trash{display:inline-flex;align-items:center}.icon-trash{color:#ff2d55;filter:drop-shadow(0 0 8px rgba(255,45,85,.45))}.icon-trash:hover{filter:drop-shadow(0 0 12px rgba(255,45,85,.6)) saturate(120%)}@media (max-width: 900px){.inline-recordings{padding:10px;border-radius:8px}}@media (max-width: 900px){.inline-recordings{width:100%;max-width:100%}}.import-row .midi-importer{flex:0 0 520px;max-width:520px}.import-or{display:flex;align-items:center;justify-content:center;padding:0 12px;background:transparent;color:var(--color-text-secondary);font-weight:600;font-size:.9rem;text-transform:uppercase;letter-spacing:1px;border-radius:0;border:none;transition:color var(--transition-fast)}.import-or:hover{color:var(--color-primary)}@media (max-width: 900px){.import-row{flex-direction:column;gap:var(--gap);width:100%}.import-row .midi-importer{max-width:100%;flex:1 1 auto;width:100%;margin:0}.import-or{padding:12px 0;width:100%;justify-content:center}}.main-layout{display:flex;gap:0;min-height:calc(100vh - 80px);width:100%}.app.play-page:not(.play-fullscreen){height:100vh;overflow:hidden}.app.play-page:not(.play-fullscreen) .main-layout{height:calc(100vh - 80px);min-height:0;overflow:hidden}.app.play-page:not(.play-fullscreen) .main-layout .app-main{height:100%;overflow:hidden}.app.imports-fixed-page{height:100vh;overflow:hidden}.app.imports-fixed-page .app-main{height:calc(100vh - 80px);min-height:0;overflow:hidden;padding:calc(var(--padding-lg) + 38px) .5rem 0 0}@media (max-width: 768px){.app.imports-fixed-page .app-main{padding-top:calc(var(--padding) + 34px);padding-right:0}}.app.play-page:not(.play-fullscreen) .play-toolbar{margin-top:88px}.sidebar{width:200px;background:var(--color-surface);border-right:1px solid var(--color-border);padding:var(--padding-lg);display:flex;flex-direction:column;align-items:center;overflow-y:auto;position:sticky;top:80px;height:calc(100vh - 80px)}.sidebar-modes{display:flex;flex-direction:column;gap:var(--gap);width:100%}.sidebar-modes .mode-btn{width:100%;justify-content:center;padding:8px 0;font-size:.95rem}.mode-toggle{display:flex;gap:var(--gap);justify-content:center;margin:var(--gap-xl) 0;flex-wrap:wrap}.mode-btn{padding:8px 0;background:transparent;border:none;border-radius:0;color:var(--color-text-secondary);font-weight:600;font-size:1rem;cursor:pointer;transition:all var(--transition-fast);position:relative;overflow:visible}.mode-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left var(--transition-slow)}.mode-btn:hover:before{left:100%}.mode-btn:hover{color:var(--color-text);transform:translateY(-2px)}.mode-btn.active{color:var(--color-primary);font-weight:700}.mode-btn.active:hover{transform:translateY(-2px);color:var(--color-primary)}.keyboard-help{margin-top:var(--gap-xl);padding:var(--padding-lg);background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border);text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.keyboard-help h3{margin:0 0 var(--gap) 0;font-size:1.3rem;color:var(--color-text);display:flex;align-items:center;justify-content:center;gap:10px}.keyboard-help p{margin:8px 0;color:var(--color-text-secondary);font-size:1rem;font-family:var(--font-mono)}.keyboard-help p:last-child{margin-top:var(--gap);color:var(--color-text-muted);font-family:var(--font-sans);font-size:.9rem}.recording-controls{display:flex;justify-content:center;gap:var(--gap-lg);margin:var(--gap-xl) 0;flex-wrap:wrap}.recording-controls .btn{min-width:200px;font-size:1rem;padding:14px 28px;animation:fadeIn var(--duration-normal) ease-out}.btn-record{position:relative;min-width:220px;padding:16px 32px;font-size:1.1rem;font-weight:700;border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:12px;letter-spacing:1px;text-transform:uppercase;overflow:hidden}.btn-record:not(.recording){background:#10b9811a;color:#10b981;border:2px solid #10b981;box-shadow:0 0 10px #10b9814d,0 0 20px #10b98133,inset 0 0 10px #10b9811a;text-shadow:0 0 5px rgba(16,185,129,.5),0 0 10px rgba(16,185,129,.3)}.btn-record:not(.recording):hover{background:#10b98133;box-shadow:0 0 20px #10b98180,0 0 40px #10b9814d,inset 0 0 15px #10b98133;transform:translateY(-2px)}.btn-record:not(.recording) .record-indicator{width:12px;height:12px;border-radius:50%;background:#10b981;box-shadow:0 0 10px #10b981,0 0 20px #10b981,0 0 30px #10b981;animation:neonPulseGreen 2s ease-in-out infinite}.btn-record.recording{background:#ef44441a;color:#ef4444;border:2px solid #ef4444;box-shadow:0 0 10px #ef44444d,0 0 20px #ef444433,inset 0 0 10px #ef44441a;text-shadow:0 0 5px rgba(239,68,68,.5),0 0 10px rgba(239,68,68,.3);animation:neonBorderPulse 1.5s ease-in-out infinite}.btn-record.recording:hover{background:#ef444433;box-shadow:0 0 20px #ef444480,0 0 40px #ef44444d,inset 0 0 15px #ef444433;transform:translateY(-2px)}.btn-record.recording .record-indicator{width:14px;height:14px;border-radius:2px;background:#ef4444;box-shadow:0 0 10px #ef4444,0 0 20px #ef4444,0 0 30px #ef4444;animation:neonPulseRed 1s ease-in-out infinite}@keyframes neonPulseGreen{0%,to{box-shadow:0 0 10px #10b981,0 0 20px #10b981,0 0 30px #10b981}50%{box-shadow:0 0 15px #10b981,0 0 30px #10b981,0 0 45px #10b981}}@keyframes neonPulseRed{0%,to{box-shadow:0 0 10px #ef4444,0 0 20px #ef4444,0 0 30px #ef4444;opacity:1}50%{box-shadow:0 0 20px #ef4444,0 0 40px #ef4444,0 0 60px #ef4444;opacity:.7}}@keyframes neonBorderPulse{0%,to{box-shadow:0 0 10px #ef44444d,0 0 20px #ef444433,inset 0 0 10px #ef44441a}50%{box-shadow:0 0 20px #ef444480,0 0 40px #ef44444d,inset 0 0 15px #ef444433}}@keyframes pulse{0%,to{box-shadow:0 0 #ef4444b3}50%{box-shadow:0 0 0 10px #ef444400}}@media (max-width: 768px){.app-header h1{font-size:1.8em}.app-header p{font-size:.95em}.app-main{padding:10px}.mode-toggle{flex-direction:column}.mode-btn{width:100%}.sidebar{width:160px;padding:var(--padding)}.sidebar-modes .mode-btn{padding:10px 12px;font-size:.85rem}}.transpose-loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#060a129e;display:flex;align-items:center;justify-content:center;z-index:21000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.play-opening-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(1000px 520px at 16% -4%,rgba(87,204,255,.16) 0%,transparent 58%),radial-gradient(900px 460px at 84% 0%,rgba(125,240,206,.12) 0%,transparent 56%),linear-gradient(180deg,#040914f5,#02060efb);display:flex;align-items:center;justify-content:center;z-index:23000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden;isolation:isolate}.play-opening-overlay-bg{position:absolute;top:-14%;right:-14%;bottom:-14%;left:-14%;width:128%;height:128%;object-fit:cover;object-position:center;filter:blur(20px) saturate(1.2);transform:scale(1.08);opacity:.92;z-index:-2;pointer-events:none}.play-opening-overlay.has-photo:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#060a144d,#080c1866 38%,#050810d1),radial-gradient(circle at 50% 38%,#fafcff1a,#fafcff08 42%,#fafcff00 74%);pointer-events:none;z-index:-1}.transpose-loading-card{min-width:280px;padding:1rem 1.1rem 1.1rem;border-radius:12px;background:#0d1528f2;border:1px solid rgba(116,176,233,.45);color:#edf6ff;text-align:center;box-shadow:0 16px 40px #00000059}.play-opening-card{min-width:320px;width:min(92vw,520px);padding:0 1.45rem;text-align:center;animation:playOpeningCardIn .38s cubic-bezier(.22,1,.36,1);position:relative;z-index:1}.transpose-loading-card p{margin:.6rem 0 0;font-size:.95rem}.play-opening-card p{margin:.5rem 0 0;font-size:.96rem}.play-opening-title{margin:0 0 1.2rem;font-size:clamp(1.7rem,3.2vw,2.25rem);font-weight:700;line-height:1.08;letter-spacing:-.03em;color:#f7fbff;text-wrap:balance}.transpose-loading-detail{color:#edf6ffb8;font-size:.84rem}.transpose-loading-spinner{width:28px;height:28px;border-radius:50%;border:3px solid rgba(138,185,231,.3);border-top-color:#8dc7ff;margin:0 auto;animation:transposeSpin .85s linear infinite}.transpose-loading-progress{width:100%;height:10px;margin-top:.8rem;border-radius:999px;overflow:hidden;background:#8dc7ff29;border:1px solid rgba(141,199,255,.2)}.play-opening-progress{margin-top:0;height:12px;background:#69a0db1f}.transpose-loading-progress-bar{height:100%;border-radius:inherit;background:linear-gradient(90deg,#5ab1ff,#8fe0ff);box-shadow:0 0 18px #5ab1ff59;transition:width .12s linear}.play-opening-progress-bar{position:relative;background:linear-gradient(90deg,#5ab1ff,#8fe0ff 52%,#7df0ce);box-shadow:0 0 22px #5ab1ff6b}.play-opening-progress-bar:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.42) 50%,transparent 100%);transform:translate(-100%);animation:playOpeningShimmer 1.6s ease-in-out infinite}.transpose-loading-progress-label{display:inline-block;margin-top:.45rem;font-size:.82rem;font-weight:700;letter-spacing:.04em;color:#9fd8ff}@keyframes playOpeningCardIn{0%{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes playOpeningShimmer{to{transform:translate(100%)}}@keyframes transposeSpin{to{transform:rotate(360deg)}}.product-mock{position:relative;overflow:hidden;border:none;border-radius:1.4rem;padding:1.2rem 1.2rem 1rem;background:radial-gradient(circle at 50% 40%,rgba(0,150,255,.08),transparent 60%),linear-gradient(164deg,#0a1223f0,#030914f0);box-shadow:inset 0 1px #ffffff0d,0 18px 34px #02061757}.product-mock__fade-line{display:none}.product-mock:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 34%)}.product-mock--frameless{background:transparent;border-radius:0;box-shadow:none;padding:0}.product-mock--frameless:after{display:none}.product-mock--frameless .product-mock__fade-line{position:relative;display:block;width:100%;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(125,211,252,.72) 50%,transparent 100%);box-shadow:0 0 16px #38bdf842}.product-mock--frameless .product-mock__fade-line--top{margin-bottom:.62rem}.product-mock--frameless .product-mock__fade-line--bottom{margin-top:.34rem}.product-sheet{position:relative;margin-top:.9rem;padding:.2rem .1rem .34rem;overflow:hidden}.product-sheet__content{display:grid;gap:1.55rem;padding-bottom:6px;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.42) 7%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 84%,rgba(0,0,0,.42) 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.42) 7%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 84%,rgba(0,0,0,.42) 93%,transparent 100%)}.product-sheet__staff{position:relative;height:42px;overflow:visible}.product-sheet__line{position:absolute;left:0;right:0;top:calc((var(--line-index) / 4) * (100% - 1px));width:100%;height:1px;background:linear-gradient(90deg,#e2e8f000,#e2e8f075 9%,#e2e8f075 91%,#e2e8f000)}.product-sheet__note{position:absolute;width:14px;height:9px;border-radius:50%;background:#e2e8f0f0;top:calc(var(--row) * 12.5%);left:50%;transform:translate(-50%,-50%) scale(1);margin-left:var(--offset-px);transition:margin-left .42s ease-in-out,transform .22s ease,box-shadow .22s ease,background-color .22s ease}.product-sheet__note:after{content:"";position:absolute;width:1px;height:13px;top:-11px;right:0;background:#e2e8f0e6}.product-sheet__note.is-pulsed{transform:translate(-50%,-50%) scale(1.05);box-shadow:0 0 0 4px #38bdf824;background:#f8fafc}.product-sheet__cursor{position:absolute;left:50%;top:0;bottom:6px;width:2px;border-radius:0;transform:translate(-50%);background:linear-gradient(180deg,#7dd3fc40,#38bdf8f2 52%,#7dd3fc40);box-shadow:0 0 0 1px #7dd3fc47,0 0 18px #38bdf857}.product-keyboard-scroll{overflow-x:auto;overflow-y:hidden;padding-bottom:.3rem;margin-bottom:.18rem;scrollbar-width:thin;scrollbar-color:rgba(125,211,252,.4) transparent}.product-keyboard-scroll::-webkit-scrollbar{height:6px}.product-keyboard-scroll::-webkit-scrollbar-track{background:transparent}.product-keyboard-scroll::-webkit-scrollbar-thumb{background:#7dd3fc52;border-radius:999px}.product-keyboard{position:relative;min-width:620px}.product-keyboard__white{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:1px;height:92px;background:#e2e8f01f;border-radius:0 0 14px 14px;padding:0 1px 1px}.product-keyboard__white-key{position:relative;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#fffffff2,#e2e8f0e6);transform-origin:top center;box-shadow:inset 0 -1px #0f172a1f,0 6px 10px #0f172a24}button.product-keyboard__white-key{border:none;cursor:pointer;padding:0;transition:background .18s ease,box-shadow .22s ease,filter .2s ease,transform .12s ease}.product-keyboard__black{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.product-keyboard__black-key{position:absolute;top:0;left:calc((var(--black-boundary) + 1) * (100% / 14));transform:translate(-50%);transform-origin:top center;width:calc((100% / 14) * .62);height:56px;border-radius:0 0 8px 8px;background:linear-gradient(180deg,#111827,#020617);box-shadow:inset 0 -1px #ffffff1f,0 5px 10px #0206174d}button.product-keyboard__black-key{border:none;cursor:pointer;padding:0;pointer-events:auto;transition:background .18s ease,height .12s ease,box-shadow .22s ease,transform .12s ease}.product-keyboard__white-key:after,.product-keyboard__black-key:after{content:"";position:absolute;left:50%;bottom:-9px;width:140%;height:11px;transform:translate(-50%) scaleX(.65);transform-origin:center;border-radius:999px;background:radial-gradient(circle,#7dd3fc8a,#7dd3fc00);opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease}.product-keyboard--interactive .product-keyboard__white-key:hover{filter:brightness(1.04);background:linear-gradient(180deg,#fff,#bae6fdf0);box-shadow:inset 0 -1px #0f172a26,0 10px 16px #0f172a33}.product-keyboard--interactive .product-keyboard__black-key:hover{transform:translate(-50%);background:linear-gradient(180deg,#1f2937,#022f4b);box-shadow:inset 0 -1px #ffffff29,0 0 14px #2dd4bf3d,0 9px 14px #02061766}.product-keyboard--interactive .product-keyboard__white-key.is-target{background:linear-gradient(180deg,#e0f2fe,#7dd3fcf2);box-shadow:inset 0 -1px #0f172a29,0 0 20px #38bdf86b,0 8px 14px #0f172a33;animation:productTargetPulse 1.2s ease-in-out infinite}.product-keyboard--interactive .product-keyboard__black-key.is-target{background:linear-gradient(180deg,#22d3eef5,#082f49f5);box-shadow:inset 0 -1px #ffffff29,inset 0 0 0 1px #a5f3fc52,0 0 0 1px #2dd4bfb3,0 0 16px #2dd4bf70,0 8px 14px #0206176b;animation:productTargetPulse 1.2s ease-in-out infinite}.product-keyboard--interactive .product-keyboard__white-key.is-active,.product-keyboard--interactive .product-keyboard__black-key.is-active{transform:scaleY(.968)}.product-keyboard--interactive .product-keyboard__black-key.is-active{transform:translate(-50%) scaleY(.968);height:56px}.product-keyboard--interactive .product-keyboard__white-key.is-active{box-shadow:inset 0 -2px #0f172a29,0 0 0 1px #38bdf86b,0 8px 14px #0f172a2e,inset 0 0 0 1px #ffffff6b}.product-keyboard--interactive .product-keyboard__black-key.is-active{box-shadow:inset 0 -1px #ffffff2e,0 0 0 1px #2dd4bf6b,0 8px 14px #0206176b}.product-keyboard--interactive .product-keyboard__white-key.is-impact:after,.product-keyboard--interactive .product-keyboard__black-key.is-impact:after{opacity:1;transform:translate(-50%) scaleX(1)}.product-keyboard--interactive .product-keyboard__white-key.is-pulse,.product-keyboard--interactive .product-keyboard__black-key.is-pulse{animation:productKeyPulse .28s ease-out}@keyframes productKeyPulse{0%{filter:brightness(1)}50%{filter:brightness(1.04)}to{filter:brightness(1)}}@keyframes productTargetPulse{0%{filter:brightness(1)}50%{filter:brightness(1.035)}to{filter:brightness(1)}}@media (max-width: 900px){.product-keyboard__white{height:78px}.product-keyboard__black-key{height:48px}}@media (min-width: 721px){.product-keyboard-scroll{overflow:visible;padding-bottom:0}.product-keyboard{min-width:0}}@media (max-width: 720px){.product-mock{padding:1rem .95rem .9rem}.product-sheet{margin-top:.75rem}.product-sheet__content{gap:1.35rem}}.reveal{opacity:0;transform:translateY(32px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}.reveal--visible{opacity:1;transform:translateY(0)}.landing-scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:100;transform-origin:left;background:linear-gradient(90deg,#6366f1,#0ea5e9,#22c55e);pointer-events:none}.landing-page{min-height:100vh;color:var(--color-text);background:radial-gradient(960px 520px at 0% -12%,rgba(99,102,241,.22),transparent 58%),radial-gradient(920px 500px at 100% 0%,rgba(20,184,166,.16),transparent 55%),linear-gradient(180deg,var(--color-bg-alt),var(--color-bg));overflow-x:hidden}.landing-container{width:min(1360px,calc(100% - 1.2rem));margin:0 auto}.landing-header{position:sticky;top:0;z-index:20;color:#f8fafc;-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);background:#0a0e1ab8;border-bottom:1px solid rgba(148,163,184,.08);box-shadow:0 10px 24px #02061738}.landing-header__inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:1rem}.landing-brand{display:inline-flex;align-items:center;gap:.55rem;font-size:1.03rem;font-weight:700;letter-spacing:.01em;color:#f8fafc;transition:color .25s}.landing-brand:hover{color:#fff}.landing-brand__svg{height:32px;width:auto;display:block}.landing-nav{display:inline-flex;align-items:center;gap:1rem}.landing-nav .language-switcher{background:#0f172aa3}.landing-nav a{color:#f8fafce6;font-size:.92rem;font-weight:600;transition:color .2s ease}.landing-nav a:hover{color:#fff}main{position:relative;z-index:1}.landing-hero{position:relative;min-height:calc(100vh - 78px);display:flex;align-items:center;justify-content:center;overflow:hidden}.landing-hero__media{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden}.landing-hero__image{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.03) brightness(.62);transform:scale(1.04);animation:heroImageIn 1.3s cubic-bezier(.16,1,.3,1) both}@keyframes heroImageIn{0%{opacity:0;transform:scale(1.08)}to{opacity:1;transform:scale(1.04)}}.landing-hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;z-index:0;pointer-events:none;background:linear-gradient(to bottom,transparent 0%,rgba(15,20,33,.15) 25%,rgba(15,20,33,.45) 50%,rgba(15,20,33,.78) 72%,var(--color-bg) 100%)}.landing-hero:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 18% 25%,rgba(255,255,255,.16),transparent 40%),radial-gradient(circle at 76% 20%,rgba(148,163,184,.19),transparent 42%),radial-gradient(circle at 50% 75%,rgba(99,102,241,.2),transparent 50%),linear-gradient(180deg,#05081294,#040812d1);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.landing-hero__grid{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:0;width:100%;padding-top:0;padding-bottom:4rem}#hero-end{height:1px}.landing-gradient-text{margin:0;font-size:clamp(1rem,2.4vw,1.7rem);line-height:1.15;letter-spacing:-.025em;text-align:center;white-space:nowrap;background:linear-gradient(135deg,#fff,#c7d2fe 40%,#93c5fd,#fff);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gradientShift 6s ease-in-out infinite}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.landing-hero__sub{margin:1.4rem auto 0;text-align:center;white-space:nowrap;color:var(--color-text-secondary);font-size:clamp(.82rem,1.4vw,1rem);line-height:1.5}.landing-hero__content{display:flex;flex-direction:column;align-items:center;max-width:700px;width:100%}.landing-hero__mock-wrap{width:100%;display:flex;justify-content:center;margin-top:2.6rem;animation:heroMockIn 1s cubic-bezier(.16,1,.3,1) .3s both}.landing-hero__mock-wrap .product-mock{width:min(100%,520px)}@keyframes heroMockIn{0%{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.landing-hero__scroll-btn{position:absolute;bottom:1.4rem;left:50%;transform:translate(-50%);z-index:2;background:none;border:none;cursor:pointer;display:inline-flex;padding:0;color:#ffffff59;transition:color .3s;animation:scrollBtnFadeIn 1s cubic-bezier(.16,1,.3,1) 1.4s both,arrowBounce 2.2s ease-in-out 2.6s infinite}.landing-hero__scroll-btn:hover,.landing-hero__scroll-btn:focus-visible{color:#93c5fd;outline:none;background:none;border:none;box-shadow:none}.landing-hero__scroll-btn:focus{outline:none;box-shadow:none}.landing-hero__scroll-btn svg{width:38px;height:38px}@keyframes scrollBtnFadeIn{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes arrowBounce{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(7px)}}.landing-cta-row{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:.75rem}.landing-cta-row--centered{justify-content:center}.landing-btn{border:none;border-radius:12px;padding:.72rem 1.1rem;font-weight:700;font-size:.93rem;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,filter .3s}.landing-btn--primary{color:#fff;background:linear-gradient(135deg,var(--color-primary),var(--color-accent));box-shadow:0 8px 24px #6366f14d}.landing-btn--primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 32px #6366f173;filter:brightness(1.1)}.landing-btn--primary:active{transform:translateY(0)}.landing-btn--glow{position:relative;overflow:visible}.landing-btn--glow:before{content:"";position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;border-radius:14px;background:radial-gradient(circle at center,#6366f173,#0ea5e952 40%,#22c55e00 74%);z-index:-1;opacity:0;animation:glowPulse 2.6s ease-in-out infinite;transition:opacity .4s;filter:blur(12px)}.landing-btn--glow:hover:before{opacity:.7}@keyframes glowPulse{0%,to{transform:scale(.95);opacity:.5}50%{transform:scale(1.05);opacity:.85}}.landing-btn--hero{padding:1rem 1.7rem;font-size:1.15rem;line-height:1;border-radius:14px}.landing-btn__arrow{display:inline-block;transition:transform .3s cubic-bezier(.16,1,.3,1)}.landing-btn:hover .landing-btn__arrow{transform:translate(4px)}.landing-card{border-radius:18px;background:#ffffff08;padding:1.25rem;box-shadow:0 20px 40px #02061757;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s cubic-bezier(.16,1,.3,1),border-color .4s}.landing-card--glass{-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);background:#ffffff08;box-shadow:0 20px 40px #0206175c,inset 0 1px #ffffff05}.landing-card--glass:hover{transform:translateY(-4px);box-shadow:0 24px 48px #02061773,0 0 0 1.5px #6366f18c,0 0 24px #6366f124}.landing-card h2,.landing-card h3{margin:0;color:var(--color-text)}.landing-card p{margin:.45rem 0 0;color:var(--color-text-secondary);font-size:.94rem;line-height:1.6}.landing-card__emoji{display:block;font-size:1.6rem;margin-bottom:.6rem}.landing-intro{margin-top:clamp(3.2rem,6vw,5rem);margin-bottom:clamp(1.8rem,4vw,3rem);text-align:center}.landing-intro__title{margin:0;font-size:clamp(1.55rem,2.8vw,2.35rem);letter-spacing:-.02em;color:#fff}.landing-intro__text{margin:1rem auto 0;max-width:70ch;color:var(--color-text-secondary);font-size:clamp(.95rem,1.25vw,1.06rem);line-height:1.7}.landing-intro__video-wrap{position:relative;width:min(100%,980px);margin:1.35rem auto 0;border-radius:18px;border:1px solid rgba(148,163,184,.25);background:radial-gradient(120% 180% at 0% 0%,rgba(99,102,241,.1),transparent 62%),linear-gradient(160deg,#0c1222e6,#060a14f2);box-shadow:0 22px 44px #02061761,inset 0 1px #ffffff0f;overflow:hidden}.landing-intro__video{display:block;width:100%;aspect-ratio:16 / 9;object-fit:cover;background:transparent;pointer-events:none;-webkit-user-select:none;user-select:none}.landing-intro__video-hint{position:absolute;left:50%;bottom:1rem;transform:translate(-50%);margin:0;padding:.42rem .65rem;border-radius:999px;color:#e2e8f0e0;font-size:.8rem;background:#0f172ab8;border:1px solid rgba(148,163,184,.28)}.landing-section{padding:clamp(2rem,5vw,3.4rem) 0}.landing-section__title{margin:0 0 1.4rem;font-size:clamp(1.5rem,2.2vw,2rem);color:#fff;position:relative;display:inline-block}.landing-section__title:after{content:"";display:block;width:48px;height:3px;margin-top:.5rem;border-radius:3px;background:linear-gradient(90deg,#6366f1,#0ea5e9)}.modular-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:360px 360px;gap:1.25rem}.modular-grid .modular-pos-1{grid-column:1 / 8;grid-row:1 / 2}.modular-grid .modular-pos-2{grid-column:8 / 13;grid-row:1 / 2}.modular-grid .modular-pos-3{grid-column:1 / 6;grid-row:2 / 3}.modular-grid .modular-pos-4{grid-column:6 / 13;grid-row:2 / 3}.modular-card{position:relative;display:flex;flex-direction:column;height:100%;padding:1.75rem 1.75rem 1.25rem;border-radius:20px;overflow:hidden;isolation:isolate;cursor:default;background:radial-gradient(ellipse 140% 110% at 0% 0%,color-mix(in srgb,var(--card-accent) 11%,transparent),transparent 58%),radial-gradient(ellipse 100% 100% at 100% 100%,color-mix(in srgb,var(--card-accent) 7%,transparent),transparent 55%),linear-gradient(145deg,#101f3cf5,#0a1a30f5);border:1px solid rgba(255,255,255,.06);box-shadow:0 20px 40px #00000047,inset 0 1px #ffffff0a;transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s cubic-bezier(.16,1,.3,1),border-color .45s}.modular-card:before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border-radius:inherit;padding:1px;background:linear-gradient(135deg,color-mix(in srgb,var(--card-accent) 35%,transparent),transparent 45%,transparent 55%,color-mix(in srgb,var(--card-accent) 18%,transparent));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .45s;pointer-events:none;z-index:3}.modular-card:after{content:"";position:absolute;bottom:-40%;left:50%;translate:-50% 0;width:70%;height:60%;border-radius:50%;background:var(--card-accent);opacity:0;filter:blur(50px);pointer-events:none;z-index:0;transition:opacity .5s}.modular-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--card-accent) 28%,transparent);box-shadow:0 28px 56px #00000061,0 0 48px color-mix(in srgb,var(--card-accent) 8%,transparent),inset 0 1px #ffffff14}.modular-card:hover:before{opacity:1}.modular-card:hover:after{opacity:.12}.modular-card__content{position:relative;z-index:2;flex-shrink:0}.modular-card__title{font-size:1.15rem;font-weight:700;color:#fff;margin:0 0 .45rem;letter-spacing:-.015em}.modular-card__desc{font-size:.84rem;color:#ffffff80;line-height:1.55;margin:0;max-width:300px}.modular-card__visual{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding-top:.75rem}.modular-card__svg{width:100%;height:100%;max-height:100%;display:block;transition:transform .5s cubic-bezier(.16,1,.3,1)}.modular-card:hover .modular-card__svg{transform:scale(1.06)}.feature-card-synth-clone{width:100%;display:flex;justify-content:center}.feature-card-sheet-clone{width:100%;display:flex;align-items:center;justify-content:center}.feature-card-sheet-clone .feature-card-sheet{width:min(100%,520px);margin:0}.feature-card-sheet-clone .feature-card-sheet .product-sheet{margin-top:0;padding:0}.feature-card-sheet-clone .feature-card-sheet .product-sheet__cursor{left:50%;transform:translate(-50%);top:0;bottom:6px;background:linear-gradient(180deg,#e2e8f038,#e2e8f0e6 52%,#e2e8f038);box-shadow:0 0 0 1px #e2e8f038,0 0 14px #e2e8f033;transition:background .22s ease,box-shadow .22s ease}.modular-card:hover .feature-card-sheet-clone .feature-card-sheet .product-sheet__cursor{background:linear-gradient(180deg,color-mix(in srgb,var(--card-accent) 26%,transparent),color-mix(in srgb,var(--card-accent) 84%,white) 52%,color-mix(in srgb,var(--card-accent) 26%,transparent));box-shadow:0 0 0 1px color-mix(in srgb,var(--card-accent) 44%,transparent),0 0 18px color-mix(in srgb,var(--card-accent) 34%,transparent)}.modular-card:hover .feature-card-sheet-clone .feature-card-sheet .product-sheet__note.is-current{background:color-mix(in srgb,var(--card-accent) 78%,white);box-shadow:0 0 0 4px color-mix(in srgb,var(--card-accent) 20%,transparent)}.modular-card:hover .feature-card-sheet-clone .feature-card-sheet .product-sheet__note.is-current:after{background:color-mix(in srgb,var(--card-accent) 70%,white)}.feature-card-synth-clone .landing-features-synth{width:min(100%,520px);margin:0}.feature-card-synth-clone .landing-features-synth{--feature-key-base-white-top: color-mix(in srgb, rgba(16, 31, 60, .96) 74%, rgba(255, 255, 255, .32));--feature-key-base-white-bottom: color-mix(in srgb, rgba(10, 26, 48, .96) 88%, rgba(226, 232, 240, .16));--feature-key-base-black-top: color-mix(in srgb, rgba(10, 26, 48, .96) 78%, rgba(2, 6, 23, .42));--feature-key-base-black-bottom: color-mix(in srgb, rgba(10, 26, 48, .96) 92%, rgba(2, 6, 23, .52));--feature-key-base-white-border: rgba(148, 163, 184, .52);--feature-key-base-black-border: rgba(148, 163, 184, .52);background:linear-gradient(145deg,#101f3cf5,#0a1a30f5)}.feature-card-synth-clone .landing-features-synth .product-keyboard{background:transparent;box-shadow:none;padding:0;border-radius:0}.feature-card-synth-clone .landing-features-synth .product-keyboard__white{background:color-mix(in srgb,rgba(16,31,60,.96) 86%,rgba(226,232,240,.2))}.feature-card-synth-clone .landing-features-synth .product-keyboard__black{top:0;left:0;right:0}.feature-card-synth-clone .landing-features-synth .product-keyboard__white-key{background:linear-gradient(180deg,var(--feature-key-base-white-top),var(--feature-key-base-white-bottom));border-color:var(--feature-key-base-white-border)}.feature-card-synth-clone .landing-features-synth .product-keyboard__black-key{background:linear-gradient(180deg,var(--feature-key-base-black-top),var(--feature-key-base-black-bottom));border-color:var(--feature-key-base-black-border)}.feature-card-synth-clone .landing-features-synth .product-keyboard{--seq-step: .22s}@keyframes feature-card-key-sweep-white{0%,to{background:linear-gradient(180deg,var(--feature-key-base-white-top),var(--feature-key-base-white-bottom));border-color:var(--feature-key-base-white-border);box-shadow:inset 0 -1px #0f172a33,0 4px 8px #0f172a33;filter:brightness(1)}1.2%{background:linear-gradient(180deg,color-mix(in srgb,var(--card-accent) 68%,white),color-mix(in srgb,var(--card-accent) 56%,rgba(226,232,240,.22)));border-color:color-mix(in srgb,var(--card-accent) 70%,white);box-shadow:inset 0 -1px #0f172a29,0 0 14px color-mix(in srgb,var(--card-accent) 44%,transparent),0 7px 12px #0f172a33;filter:brightness(1.03)}2.6%{background:linear-gradient(180deg,color-mix(in srgb,var(--card-accent) 38%,white),color-mix(in srgb,var(--card-accent) 26%,rgba(226,232,240,.18)));border-color:color-mix(in srgb,var(--card-accent) 40%,rgba(148,163,184,.52));box-shadow:inset 0 -1px #0f172a2e,0 0 8px color-mix(in srgb,var(--card-accent) 22%,transparent),0 6px 10px #0f172a33;filter:brightness(1.01)}6%{background:linear-gradient(180deg,color-mix(in srgb,var(--card-accent) 22%,white),color-mix(in srgb,var(--card-accent) 14%,rgba(226,232,240,.16)));border-color:color-mix(in srgb,var(--card-accent) 26%,rgba(148,163,184,.52));box-shadow:inset 0 -1px #0f172a2e,0 0 5px color-mix(in srgb,var(--card-accent) 12%,transparent),0 5px 9px #0f172a33;filter:brightness(1.005)}9.5%{background:linear-gradient(180deg,var(--feature-key-base-white-top),var(--feature-key-base-white-bottom));border-color:var(--feature-key-base-white-border);box-shadow:inset 0 -1px #0f172a33,0 4px 8px #0f172a33;filter:brightness(1)}}@keyframes feature-card-key-sweep-black{0%,to{background:linear-gradient(180deg,var(--feature-key-base-black-top),var(--feature-key-base-black-bottom));border-color:var(--feature-key-base-black-border);box-shadow:inset 0 -1px #ffffff14,0 5px 10px #0206174d;filter:brightness(1)}1.2%{background:linear-gradient(180deg,color-mix(in srgb,var(--card-accent) 82%,rgba(8,47,73,.96)),color-mix(in srgb,var(--card-accent) 56%,rgba(2,7,18,.92)));border-color:color-mix(in srgb,var(--card-accent) 62%,white);box-shadow:inset 0 -1px #ffffff29,0 0 0 1px color-mix(in srgb,var(--card-accent) 52%,transparent),0 0 12px color-mix(in srgb,var(--card-accent) 34%,transparent),0 6px 10px #02061757;filter:brightness(1.04)}2.6%{background:linear-gradient(180deg,color-mix(in srgb,var(--card-accent) 46%,rgba(8,47,73,.96)),color-mix(in srgb,var(--card-accent) 30%,rgba(2,7,18,.92)));border-color:color-mix(in srgb,var(--card-accent) 42%,rgba(148,163,184,.52));box-shadow:inset 0 -1px #ffffff1a,0 0 0 1px color-mix(in srgb,var(--card-accent) 30%,transparent),0 0 8px color-mix(in srgb,var(--card-accent) 20%,transparent),0 5px 10px #02061752;filter:brightness(1.02)}6%{background:linear-gradient(180deg,color-mix(in srgb,var(--card-accent) 24%,rgba(8,47,73,.96)),color-mix(in srgb,var(--card-accent) 16%,rgba(2,7,18,.92)));border-color:color-mix(in srgb,var(--card-accent) 28%,rgba(148,163,184,.52));box-shadow:inset 0 -1px #ffffff17,0 0 0 1px color-mix(in srgb,var(--card-accent) 16%,transparent),0 0 5px color-mix(in srgb,var(--card-accent) 10%,transparent),0 5px 9px #0206174f;filter:brightness(1.01)}9.5%{background:linear-gradient(180deg,var(--feature-key-base-black-top),var(--feature-key-base-black-bottom));border-color:var(--feature-key-base-black-border);box-shadow:inset 0 -1px #ffffff14,0 5px 10px #0206174d;filter:brightness(1)}}.modular-card:hover .feature-card-synth-clone .landing-features-synth .product-keyboard__white-key.seq-key{animation:feature-card-key-sweep-white calc(var(--seq-count, 24) * var(--seq-step, .22s)) linear infinite;animation-delay:calc(var(--seq-order, 0) * var(--seq-step, .22s))}.modular-card:hover .feature-card-synth-clone .landing-features-synth .product-keyboard__black-key.seq-key{animation:feature-card-key-sweep-black calc(var(--seq-count, 24) * var(--seq-step, .22s)) linear infinite;animation-delay:calc(var(--seq-order, 0) * var(--seq-step, .22s))}.feature-card-synth-clone .landing-features-synth .product-keyboard__white-key.seq-key,.feature-card-synth-clone .landing-features-synth .product-keyboard__black-key.seq-key{animation:none}@keyframes modular-float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes modular-pulse{0%,to{opacity:.18}50%{opacity:.38}}.modular-card__float{animation:modular-float 3.5s ease-in-out infinite}.modular-card__pulse{animation:modular-pulse 2.2s ease-in-out infinite}.landing-features-synth-wrap{margin-top:clamp(1.4rem,3vw,2rem);display:flex;justify-content:center}.landing-features-synth{width:min(100%,520px);padding:.7rem;border-radius:0 0 1rem 1rem;border:1px solid rgba(148,163,184,.42);background:color-mix(in srgb,var(--color-bg) 84%,transparent);-webkit-backdrop-filter:blur(8px) saturate(1.1);backdrop-filter:blur(8px) saturate(1.1);box-shadow:inset 0 1px #ffffff17,0 10px 28px #0206173d}.landing-features-synth:after{display:none}.landing-features-synth .product-sheet{display:none}.landing-features-synth .product-keyboard-scroll{overflow:visible;margin-bottom:0;padding-bottom:0}.landing-features-synth .product-keyboard{border-radius:.85rem;padding:.4rem;background:color-mix(in srgb,var(--color-bg) 90%,transparent);box-shadow:inset 0 1px #ffffff0f}.landing-features-synth .product-keyboard__white{height:128px;gap:0;padding:0;background:color-mix(in srgb,var(--color-bg) 82%,rgba(226,232,240,.2))}.landing-features-synth .product-keyboard__black{top:.4rem;left:.4rem;right:.4rem}.landing-features-synth .product-keyboard__white-key{border-radius:0 0 12px 12px;border:1px solid rgba(148,163,184,.52);background:linear-gradient(180deg,color-mix(in srgb,var(--color-bg) 74%,rgba(255,255,255,.32)),color-mix(in srgb,var(--color-bg) 88%,rgba(226,232,240,.16)));box-shadow:inset 0 -1px #0f172a33,0 4px 8px #0f172a33}.landing-features-synth .product-keyboard__black-key{top:0;height:80px;border:1px solid rgba(148,163,184,.52);background:linear-gradient(180deg,color-mix(in srgb,var(--color-bg) 78%,rgba(2,6,23,.42)),color-mix(in srgb,var(--color-bg) 92%,rgba(2,6,23,.52)));box-shadow:inset 0 -1px #ffffff14,0 5px 10px #0206174d}.neon-white-key{transition:fill .32s ease-out,stroke .32s ease-out,background-color .32s ease-out,border-color .32s ease-out}.neon-glow-key{transition:opacity .34s ease-out}@keyframes feature-key-pulse{0%,to{background:linear-gradient(180deg,#101b32c2,#081427d6);border-color:#94a3b894}2%{background:linear-gradient(180deg,#7dd3fcf0,#38bdf8db);border-color:#e0f2fef2}8%{background:linear-gradient(180deg,#7dd3fcd1,#38bdf8bd);border-color:#bae6fdd1}24%{background:linear-gradient(180deg,#4683aabd,#225c83b3);border-color:#94a3b8ad}50%{background:linear-gradient(180deg,#101b32c2,#081427d6);border-color:#94a3b894}}@keyframes feature-glow-pulse{0%,to{opacity:0}2%{opacity:.58}8%{opacity:.42}24%{opacity:.2}50%{opacity:0}}@keyframes neon-pulse{0%,to{fill:#dce0ffb8;stroke:#ffffff2e}2%{fill:#8b5cf6fa;stroke:#fffffff2}8%{fill:#8b5cf6bf;stroke:#ffffffa6}15%{fill:#8b5cf68c;stroke:#ffffff6b}24%{fill:#b48cfa61;stroke:#ffffff47}35%{fill:#c8aaff3d;stroke:#ffffff2e}50%{fill:#dce0ffb8;stroke:#ffffff2e}}@keyframes neon-glow-pulse{0%,to{opacity:0}2%{opacity:.72}8%{opacity:.58}15%{opacity:.42}24%{opacity:.28}35%{opacity:.14}50%{opacity:0}}.modular-card:hover .neon-white-key{animation-name:neon-pulse;animation-duration:2s;animation-timing-function:ease-out;animation-iteration-count:infinite;animation-fill-mode:both}.modular-card:hover .neon-glow-key{animation-name:neon-glow-pulse;animation-duration:2s;animation-timing-function:ease-out;animation-iteration-count:infinite;animation-fill-mode:both}.modular-card .neon-wk-0,.modular-card .neon-gk-0,.modular-card:hover .neon-wk-0,.modular-card:hover .neon-gk-0{animation-delay:0ms}.modular-card .neon-wk-1,.modular-card .neon-gk-1,.modular-card:hover .neon-wk-1,.modular-card:hover .neon-gk-1{animation-delay:.2s}.modular-card .neon-wk-2,.modular-card .neon-gk-2,.modular-card:hover .neon-wk-2,.modular-card:hover .neon-gk-2{animation-delay:.4s}.modular-card .neon-wk-3,.modular-card .neon-gk-3,.modular-card:hover .neon-wk-3,.modular-card:hover .neon-gk-3{animation-delay:.6s}.modular-card .neon-wk-4,.modular-card .neon-gk-4,.modular-card:hover .neon-wk-4,.modular-card:hover .neon-gk-4{animation-delay:.8s}.modular-card .neon-wk-5,.modular-card .neon-gk-5,.modular-card:hover .neon-wk-5,.modular-card:hover .neon-gk-5{animation-delay:1s}.modular-card .neon-wk-6,.modular-card .neon-gk-6,.modular-card:hover .neon-wk-6,.modular-card:hover .neon-gk-6{animation-delay:1.2s}.modular-card .neon-wk-7,.modular-card .neon-gk-7,.modular-card:hover .neon-wk-7,.modular-card:hover .neon-gk-7{animation-delay:1.4s}.modular-card .neon-wk-8,.modular-card .neon-gk-8,.modular-card:hover .neon-wk-8,.modular-card:hover .neon-gk-8{animation-delay:1.6s}.modular-card .neon-wk-9,.modular-card .neon-gk-9,.modular-card:hover .neon-wk-9,.modular-card:hover .neon-gk-9{animation-delay:1.8s}.landing-timeline{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;padding:3rem 0 2rem;max-width:1680px;margin:0 auto}.landing-timeline>.reveal{width:100%}.landing-timeline__line{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translate(-50%);z-index:0;background:linear-gradient(180deg,transparent 0%,rgba(99,102,241,.15) 8%,rgba(99,102,241,.45) 20%,rgba(56,189,248,.45) 50%,rgba(99,102,241,.45) 80%,rgba(99,102,241,.15) 92%,transparent 100%);pointer-events:none}.landing-timeline__line:after{content:"";position:absolute;top:0;bottom:0;left:50%;width:12px;transform:translate(-50%);background:linear-gradient(180deg,transparent 0%,rgba(99,102,241,.06) 15%,rgba(56,189,248,.1) 50%,rgba(99,102,241,.06) 85%,transparent 100%);filter:blur(6px);pointer-events:none}.landing-timeline__step{position:relative;z-index:1;display:flex;align-items:center;width:100%;padding:1.4rem 0;flex-direction:row-reverse;justify-content:center;gap:1.6rem}.landing-timeline__step--right{flex-direction:row}.landing-timeline__node{position:relative;z-index:4;flex-shrink:0;width:48px;height:48px;display:flex;align-items:center;justify-content:center}.landing-timeline__node-number{position:relative;z-index:3;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:999px;font-size:.9rem;font-weight:800;color:#fff;background:linear-gradient(145deg,#6366f1,#0ea5e9);box-shadow:0 0 0 3px #0a0e1ae6,0 4px 16px #6366f173;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}.landing-timeline__step:hover .landing-timeline__node-number{transform:scale(1.12);box-shadow:0 0 0 3px #0a0e1ae6,0 6px 24px #6366f18c,0 0 32px #6366f14d}.landing-timeline__node-ring{position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:999px;border:1.5px solid rgba(99,102,241,.25);animation:timelineRingPulse 3s ease-in-out infinite;pointer-events:none}@keyframes timelineRingPulse{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(1.18);opacity:.15}}.landing-timeline__node-glow{position:absolute;top:-12px;right:-12px;bottom:-12px;left:-12px;border-radius:999px;background:radial-gradient(circle,rgba(99,102,241,.35) 0%,rgba(56,189,248,.12) 40%,transparent 70%);filter:blur(8px);animation:timelineGlowPulse 3.5s ease-in-out infinite;pointer-events:none}@keyframes timelineGlowPulse{0%,to{opacity:.55;transform:scale(.9)}50%{opacity:.9;transform:scale(1.15)}}.landing-timeline__card{position:relative;width:fit-content;max-width:calc(100% - 4.2rem);border-radius:18px;padding:1.5rem 1.6rem;overflow:hidden;background:radial-gradient(140% 120% at 0% 0%,rgba(99,102,241,.14),transparent 56%),radial-gradient(140% 130% at 100% 100%,rgba(56,189,248,.1),transparent 58%),linear-gradient(140deg,#101f3c,#0e2238 52%,#0a1c2e);box-shadow:0 16px 40px #0206175c,inset 0 1px #ffffff0a;border:1px solid rgba(99,102,241,.08);transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s cubic-bezier(.16,1,.3,1),border-color .4s}.landing-timeline__step:hover .landing-timeline__card{transform:translateY(-3px);border-color:#6366f159;box-shadow:0 20px 48px #02061773,0 0 0 1px #6366f133,0 0 40px #6366f114}.landing-timeline__card-shine{position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.03) 40%,rgba(255,255,255,.06) 50%,rgba(255,255,255,.03) 60%,transparent 80%);transition:left .7s cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:1}.landing-timeline__step:hover .landing-timeline__card-shine{left:130%}.landing-timeline__card-content{position:relative;z-index:2}.landing-timeline__card-content h3{margin:0;font-size:1.05rem;font-weight:700;color:#fff;letter-spacing:-.01em;white-space:nowrap}.landing-timeline__card-content p{margin:.4rem 0 0;color:var(--color-text-secondary);font-size:.9rem;line-height:1.6;white-space:nowrap}.landing-learn{display:grid;gap:0}.landing-learn__header{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem;padding:.55rem 0;border-top:1px solid rgba(148,163,184,.24);border-bottom:1px solid rgba(148,163,184,.24)}.landing-learn__indicator{position:absolute;top:-.01rem;bottom:-.01rem;left:0;width:calc((100% - .3rem)/2);transform:translate(calc(var(--learn-indicator-col, 0) * (100% + .3rem)));pointer-events:none;transition:transform .3s cubic-bezier(.22,.61,.36,1);background:linear-gradient(90deg,transparent,rgba(125,211,252,.75),transparent) top / 100% 2px no-repeat,linear-gradient(90deg,transparent,rgba(34,211,238,.65),transparent) bottom / 100% 2px no-repeat}.landing-learn__tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;z-index:1;border:none;border-color:transparent!important;background:transparent!important;background-color:transparent!important;color:#e2e8f0a8;font:inherit;font-size:.94rem;font-weight:400;letter-spacing:.01em;padding:.5rem .6rem .44rem;border-radius:0;box-shadow:none;outline:none;cursor:pointer;display:grid;gap:.4rem;transition:color .22s ease,transform .22s ease}.landing-learn__tab:focus,.landing-learn__tab:focus-visible,.landing-learn__tab:active{border-color:transparent!important;background:transparent!important;background-color:transparent!important;box-shadow:none;outline:none}.landing-learn__tab:hover{border-color:transparent!important;background:transparent!important;background-color:transparent!important;color:#a0daffb8}.landing-learn__tab--active,.landing-learn__tab--active:hover,.landing-learn__tab--active:focus,.landing-learn__tab--active:focus-visible{color:#7dd3fceb;font-weight:400}.landing-learn__tab-title{display:block;font-size:1.8rem;line-height:1.18;font-weight:400;text-wrap:balance}.landing-learn__tab-subtitle{display:block;font-size:1rem;line-height:1.24;color:#cbd5e18c;text-wrap:balance;transition:color .22s ease}.landing-learn__tab:hover .landing-learn__tab-subtitle{color:#a0daff9e}.landing-learn__tab--active .landing-learn__tab-subtitle{color:#a5f3fcd1}.landing-learn__panel{min-height:420px;margin-top:.95rem;margin-bottom:.95rem;display:grid;align-content:center}.landing-learn__sheet-wrap{width:min(100%,520px);margin-inline:auto}.landing-learn__sheet-wrap .product-mock{width:100%}.landing-learn__panel--notes{display:grid;gap:.86rem;align-content:center;justify-items:center}.landing-learn__fade-line{width:min(100%,520px);height:2px;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(125,211,252,.72) 50%,transparent 100%);box-shadow:0 0 16px #38bdf83d}.landing-learn__fade-line--notes-top{margin-bottom:-.16rem}.landing-learn__fade-line--keyboard-bottom{margin-top:-.1rem}.landing-notes-rain{position:relative;isolation:isolate;overflow:hidden;height:252px;width:min(100%,520px);border-radius:1.2rem;background:linear-gradient(180deg,#07172eeb,#020812f5),repeating-linear-gradient(90deg,rgba(148,163,184,.045) 0,rgba(148,163,184,.045) calc(100% / 14),transparent calc(100% / 14),transparent calc((100% / 14) + 1px));box-shadow:inset 0 1px #94a3b81f,inset 0 -24px 36px #02061780,0 16px 26px #0206175c}.landing-notes-rain__noise{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.1) .8px,transparent .8px);background-size:3px 3px;opacity:.06;mix-blend-mode:soft-light}.landing-notes-rain__lane-focus{position:absolute;top:0;bottom:0;left:calc((var(--lane-focus) + .5) * (100% / 14));width:calc(100% / 14);transform:translate(-50%);background:linear-gradient(180deg,#7dd3fc0f,#2dd4bf2e 68%,#2dd4bf05);opacity:0;transition:opacity .22s ease;pointer-events:none}.landing-notes-rain__lane-focus.is-visible{opacity:1}.landing-notes-rain__hitline{position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(125,211,252,.46),transparent)}.landing-notes-rain__note{position:absolute;z-index:1;top:-60px;left:calc((var(--lane) + .5) * (100% / 14));width:var(--note-width);height:62px;border-radius:999px;transform:translate3d(-50%,0,0);transform-origin:center;background:linear-gradient(180deg,#67e8f9f2,#2dd4bfc7);box-shadow:inset 0 -1px #fff3,0 6px 16px #22d3ee3d;filter:blur(var(--note-blur));opacity:.72;will-change:transform,opacity,filter;animation:landingNoteFall var(--fall-duration) cubic-bezier(.22,.61,.36,1) infinite;animation-delay:var(--fall-delay)}@keyframes landingNoteFall{0%{transform:translate3d(-50%,-68px,0);opacity:.12;filter:blur(calc(var(--note-blur) + 1.4px))}18%{opacity:.95}78%{opacity:.74}to{transform:translate3d(-50%,286px,0);opacity:.08;filter:blur(0px)}}.landing-notes-rain__note.is-focus{filter:blur(0px);opacity:1}.landing-notes-rain__note--manual{z-index:2;animation-iteration-count:1;background:linear-gradient(180deg,#a5f3fcfa,#22d3eecc);box-shadow:inset 0 -1px #ffffff3d,0 8px 20px #22d3ee47}.landing-notes-rain__note--queue{z-index:2;animation:none;top:calc(77px + var(--queue-slot) * 72px);opacity:.9;filter:blur(var(--note-blur));transition:top .3s cubic-bezier(.22,.61,.36,1),left .22s ease,opacity .22s ease,filter .22s ease}.landing-notes-rain__note--queue.is-focus{opacity:1;filter:blur(0px);background:linear-gradient(180deg,#a5f3fcfa,#22d3eed1);box-shadow:inset 0 -1px #ffffff3d,0 8px 20px #22d3ee4d}.landing-keyboard-scroll{width:min(100%,520px);overflow-x:auto;overflow-y:hidden;padding-bottom:.22rem}.landing-learn-notes-keyboard{width:100%;margin-top:.08rem;isolation:isolate}.landing-keyboard-hit-glow{position:absolute;left:calc((var(--glow-index) + .5) * (100% / 14));bottom:-8px;width:calc((100% / 14) * 1.7);height:24px;transform:translate(-50%) scaleX(.7);transform-origin:center;border-radius:999px;background:radial-gradient(circle,#2dd4bf7a,#2dd4bf00);opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease}.landing-keyboard-hit-glow.is-visible{opacity:1;transform:translate(-50%) scaleX(1)}.landing-learn-notes-keyboard .product-keyboard__white-key:after,.landing-learn-notes-keyboard .product-keyboard__black-key:after{display:none}.landing-learn-notes-keyboard .landing-keyboard-hit-glow{display:none}.landing-cmp-reveal.reveal{transform:translateY(10px)}.landing-cmp-reveal.reveal--visible{transform:translateY(0)}.landing-section--learn{padding-bottom:1.4rem}.landing-section--cmp{padding-top:1.4rem}.landing-cmp{position:relative;isolation:isolate;display:grid}.landing-cmp:before{content:"";position:absolute;top:-16%;right:0;bottom:-20%;left:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,transparent 34%,rgba(0,255,200,.028) 54%,rgba(0,255,200,.082) 72%,rgba(0,255,200,.024) 86%,transparent 94%,transparent 100%),radial-gradient(60% 95% at 70% 50%,rgba(0,255,200,.06) 0%,rgba(0,255,200,.028) 44%,transparent 76%)}.landing-cmp__header,.landing-cmp__row{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.8fr) auto minmax(0,1.6fr);column-gap:clamp(.9rem,2vw,1.6rem)}.landing-cmp__header{align-items:center;margin-bottom:.3rem}.landing-cmp__label{margin:0;font-size:clamp(1.06rem,1.9vw,1.24rem);line-height:1;letter-spacing:.08em;text-transform:uppercase;font-weight:400}.landing-cmp__label--before{color:#e2e8f073;text-align:right}.landing-cmp__label--after{color:#6ee7b7e6;padding-left:.85rem}.landing-cmp__label-spacer,.landing-cmp__arrow{display:flex;align-items:center;justify-content:center;color:#94a3b8b8}.landing-cmp__label-spacer{width:20px}.landing-cmp__arrow svg{width:20px;height:20px}.landing-cmp__row{align-items:stretch;padding:clamp(1.05rem,2.2vw,1.4rem) 0;border-top:1px solid rgba(148,163,184,.1)}.landing-cmp__before,.landing-cmp__after{display:flex;flex-direction:column;justify-content:center}.landing-cmp__before p,.landing-cmp__after p{margin:0;line-height:1.6}.landing-cmp__before p{margin-left:auto;max-width:34ch;text-align:right;color:#e2e8f080;font-size:clamp(.89rem,1.2vw,.96rem);font-weight:400}.landing-cmp__after{border-radius:14px;padding:.5rem .85rem;transition:background-color .2s ease}.landing-cmp__after p{max-width:58ch;color:#f8fafcf5;font-size:clamp(.99rem,1.45vw,1.08rem);font-weight:600}.landing-cmp__arrow svg{opacity:.8;transition:transform .2s ease,opacity .2s ease}.landing-cmp__row:hover .landing-cmp__after{background:#ffffff0d}.landing-cmp__row:hover .landing-cmp__arrow svg{transform:translate(3px);opacity:1}.landing-cmp__mobile-label{display:none}.landing-faq-list{display:grid;gap:.75rem;max-width:720px}.landing-faq-item{overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;text-align:left;font:inherit;cursor:pointer;background:#ffffff08;color:var(--color-text);border:none;transition:box-shadow .28s cubic-bezier(.16,1,.3,1),transform .28s cubic-bezier(.16,1,.3,1),background .28s ease}.landing-faq-item:hover{transform:translateY(-1px);background:#6366f114;box-shadow:0 18px 36px #02061761,0 0 0 1.5px #6366f173,0 0 20px #6366f11a}.landing-faq-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-weight:700;font-size:.96rem;color:var(--color-text);pointer-events:none}.landing-faq-chevron{font-size:1.3rem;line-height:1;font-weight:600;color:var(--color-text-secondary);transition:transform .4s cubic-bezier(.16,1,.3,1)}.landing-faq-item--open .landing-faq-chevron{transform:rotate(90deg)}.landing-faq-body{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.16,1,.3,1)}.landing-faq-body p{padding-top:.6rem}.landing-footer{padding:1.5rem 0 2rem;margin-top:clamp(.8rem,2vw,1.4rem);border-top:1px solid rgba(148,163,184,.1)}.landing-footer__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}.landing-footer p{margin:0;color:var(--color-text-secondary)}.landing-redirecting{min-height:100vh;display:grid;place-items:center;color:var(--color-text);background:var(--color-bg);font-weight:700}#features,#how{scroll-margin-top:110px}@media (max-width: 1024px){.landing-hero__content{max-width:640px}.landing-hero__mock-wrap{margin-top:.95rem}.landing-intro__video-wrap{width:100%}.landing-notes-rain{height:214px}.landing-cmp__header,.landing-cmp__row{grid-template-columns:minmax(0,.85fr) auto minmax(0,1.45fr);column-gap:.8rem}.landing-cmp__arrow svg{width:17px;height:17px}.landing-cmp__label-spacer{width:17px}.landing-timeline{padding:2rem 0 1rem;align-items:flex-start;width:100%}.landing-timeline__line{left:24px;transform:none}.landing-timeline__step,.landing-timeline__step--right{flex-direction:row;justify-content:flex-start;padding-left:0;gap:0}.landing-timeline__node{position:absolute;left:0;top:50%;transform:translateY(-50%);margin:0}.landing-timeline__card{width:fit-content;max-width:calc(100% - 3.2rem);margin-left:3.2rem;padding:1.2rem 1rem}.landing-timeline__card-content h3{font-size:1rem}.landing-timeline__card-content p{font-size:.76rem;line-height:1.4}.modular-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:250px}.modular-grid .modular-pos-1{grid-column:1 / 3;grid-row:auto}.modular-grid .modular-pos-2{grid-column:1;grid-row:auto}.modular-grid .modular-pos-3{grid-column:2;grid-row:auto}.modular-grid .modular-pos-4{grid-column:1 / 3;grid-row:auto}}@media (max-width: 720px){.landing-header__inner{min-height:0;padding:.8rem 0;flex-direction:column;align-items:flex-start}.landing-nav{width:100%;flex-wrap:wrap}.landing-nav .language-switcher{order:1}.landing-footer__inner{flex-direction:column;align-items:flex-start}.landing-hero{min-height:72vh}.landing-hero__mock-wrap .product-mock{width:min(100%,520px)}.landing-gradient-text,.landing-hero__sub{white-space:normal}.landing-container{width:min(1360px,calc(100% - 1rem))}.modular-grid{grid-template-columns:1fr;grid-auto-rows:auto}.modular-grid .modular-pos-1,.modular-grid .modular-pos-2,.modular-grid .modular-pos-3,.modular-grid .modular-pos-4{grid-column:1;grid-row:auto}.modular-card{min-height:260px}.landing-learn{gap:0}.landing-learn__header{grid-template-columns:repeat(2,minmax(0,1fr))}.landing-learn__tab{text-align:center}.landing-notes-rain{height:188px;border-radius:1rem}.landing-learn__panel{min-height:320px;margin-top:.8rem;margin-bottom:.8rem}.landing-notes-rain__hitline{bottom:0}.landing-keyboard-scroll{width:100%;padding-bottom:.16rem}.landing-cmp:before{top:-14%;right:-4%;bottom:-12%;left:-4%}.landing-cmp__header{display:none}.landing-cmp__row{grid-template-columns:1fr;row-gap:.68rem;padding:1rem 0}.landing-cmp__arrow{display:none}.landing-cmp__before p{margin-left:0;max-width:none;text-align:left;font-size:.9rem}.landing-cmp__after{padding:.82rem .9rem}.landing-cmp__after p{max-width:none;font-size:1rem}.landing-cmp__mobile-label{display:inline-block;margin:0 0 .38rem;font-size:.62rem;letter-spacing:.15em;text-transform:uppercase}.landing-cmp__mobile-label--before{color:#e2e8f06e;font-weight:500}.landing-cmp__mobile-label--after{color:#6ee7b7f2;font-weight:700}}.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-primary, #0f0f13);padding:1rem}.auth-card{background:var(--bg-card, #1a1a24);border:1px solid var(--border-color, rgba(255,255,255,.1));border-radius:12px;padding:2rem 2.5rem;width:100%;max-width:400px;box-shadow:0 8px 32px #0006}.auth-title{margin:0 0 1.5rem;font-size:1.5rem;font-weight:700;color:var(--text-primary, #fff);text-align:center}.auth-form{display:flex;flex-direction:column;gap:1rem}.auth-form label{display:flex;flex-direction:column;gap:.375rem;font-size:.875rem;color:var(--text-secondary, rgba(255,255,255,.7))}.auth-form input{padding:.625rem .75rem;border-radius:6px;border:1px solid var(--border-color, rgba(255,255,255,.15));background:var(--bg-input, rgba(255,255,255,.05));color:var(--text-primary, #fff);font-size:.9375rem;outline:none;transition:border-color .15s}.auth-form input:focus{border-color:var(--accent, #7c6af7)}.auth-error{margin:0;padding:.5rem .75rem;border-radius:6px;background:#ef444426;border:1px solid rgba(239,68,68,.35);color:#fca5a5;font-size:.875rem}.auth-info{margin:0;padding:.5rem .75rem;border-radius:6px;background:#22c55e1f;border:1px solid rgba(34,197,94,.3);color:#86efac;font-size:.875rem}.auth-submit{margin-top:.5rem;padding:.75rem;border-radius:8px;border:none;background:var(--accent, #7c6af7);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .15s}.auth-submit:hover:not(:disabled){opacity:.88}.auth-submit:disabled{opacity:.5;cursor:not-allowed}.auth-link{margin:1.25rem 0 0;text-align:center;font-size:.875rem;color:var(--text-secondary, rgba(255,255,255,.6))}.auth-link a{color:var(--accent, #7c6af7);text-decoration:none}.auth-link a:hover{text-decoration:underline}.user-menu{position:relative}.user-menu-trigger{display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;border:1px solid var(--border-color, rgba(255,255,255,.15));background:transparent;color:var(--text-primary, #fff);font-size:.8125rem;cursor:pointer;transition:background .15s}.user-menu-trigger:hover{background:#ffffff12}.user-menu-avatar{width:24px;height:24px;border-radius:50%;background:var(--accent, #7c6af7);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#fff;flex-shrink:0}.user-menu-dropdown{position:absolute;top:calc(100% + 6px);right:0;min-width:220px;background:var(--bg-card, #1a1a24);border:1px solid var(--border-color, rgba(255,255,255,.12));border-radius:8px;padding:.75rem;box-shadow:0 8px 24px #00000073;z-index:1000}.user-menu-email{font-size:.8125rem;color:var(--text-secondary, rgba(255,255,255,.6));padding:0 .25rem .75rem;border-bottom:1px solid var(--border-color, rgba(255,255,255,.1));margin-bottom:.5rem;word-break:break-all}.user-menu-signout{width:100%;padding:.5rem .75rem;border-radius:6px;border:none;background:transparent;color:#fca5a5;font-size:.875rem;cursor:pointer;text-align:left;transition:background .15s}.user-menu-signout:hover{background:#ef44441f}.user-menu-login-btn{padding:.375rem .875rem;border-radius:6px;border:1px solid var(--border-color, rgba(255,255,255,.2));background:transparent;color:var(--text-primary, #fff);font-size:.8125rem;cursor:pointer;transition:background .15s;text-decoration:none;display:inline-flex;align-items:center}.user-menu-login-btn:hover{background:#ffffff12}.onboarding-card{max-width:540px}.auth-subtitle{margin:-.75rem 0 1.25rem;text-align:center;font-size:.9rem;color:var(--text-secondary, rgba(255,255,255,.55))}.onboarding-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.auth-form select{padding:.625rem .75rem;border-radius:6px;border:1px solid var(--border-color, rgba(255,255,255,.15));background:var(--bg-input, rgba(255,255,255,.05));color:var(--text-primary, #fff);font-size:.9375rem;outline:none;transition:border-color .15s;cursor:pointer}.auth-form select:focus{border-color:var(--accent, #7c6af7)}.auth-form select option{background:#1a1a24;color:#fff}.onboarding-fieldset{border:1px solid var(--border-color, rgba(255,255,255,.12));border-radius:8px;padding:.75rem 1rem;margin:0}.onboarding-fieldset legend{font-size:.875rem;color:var(--text-secondary, rgba(255,255,255,.7));padding:0 .375rem}.onboarding-checkboxes{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}.onboarding-checkbox-label{display:flex;align-items:center;gap:.375rem;font-size:.875rem;color:var(--text-primary, #fff);cursor:pointer;padding:.25rem .625rem;border-radius:999px;border:1px solid var(--border-color, rgba(255,255,255,.15));transition:border-color .15s,background .15s;flex-direction:row}.onboarding-checkbox-label:has(input:checked){border-color:var(--accent, #7c6af7);background:#7c6af71f}.onboarding-checkbox-label input[type=checkbox]{accent-color:var(--accent, #7c6af7);width:14px;height:14px}.onboarding-radio-group{display:flex;gap:1rem;margin-top:.5rem;flex-wrap:wrap}.onboarding-radio-label{display:flex;align-items:center;gap:.375rem;font-size:.875rem;color:var(--text-primary, #fff);cursor:pointer;flex-direction:row}.onboarding-radio-label input[type=radio]{accent-color:var(--accent, #7c6af7)}.auth-loading{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg-primary, #0f0f13);color:var(--text-secondary, rgba(255,255,255,.5));font-size:.9rem}.ob-page{min-height:100vh;position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;background:linear-gradient(180deg,#ffffff1c,#ffffff0f),radial-gradient(ellipse at top,#0f172a,#0b1220 58%);padding:0 1rem 3rem;box-sizing:border-box}.ob-page:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 20% 50%,rgba(99,102,241,.08) 0%,transparent 52%),radial-gradient(circle at 80% 80%,rgba(20,184,166,.075) 0%,transparent 52%);pointer-events:none;z-index:0}.ob-page:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#0a1224,#090f1f);opacity:.34;pointer-events:none;z-index:0}.ob-page>*{position:relative;z-index:1}.ob-header{width:100%;max-width:600px;display:flex;align-items:center;gap:1rem;padding:1.5rem 0 0}.ob-back-btn{position:fixed;top:18px;left:16px;z-index:100}.ob-back-btn:disabled{opacity:0;pointer-events:none}.ob-progress-wrap{flex:1;display:flex;flex-direction:column;gap:.35rem}.ob-progress-track{width:100%;height:4px;background:#ffffff14;border-radius:99px;overflow:hidden}.ob-progress-fill{height:100%;width:var(--ob-progress, 0%);background:linear-gradient(90deg,#60a5fa,#22d3ee);border-radius:99px;transition:width .45s cubic-bezier(.22,1,.36,1)}.ob-progress-label{font-size:.75rem;color:#ffffff4d;text-align:center}.ob-main{width:100%;max-width:600px;flex:1;display:flex;align-items:flex-start;padding-top:3.5rem}@keyframes ob-step-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.ob-step{width:100%;animation:ob-step-in .4s cubic-bezier(.22,1,.36,1) both}.ob-question{font-size:clamp(1.625rem,4.5vw,2.25rem);font-weight:800;color:#fff;margin:0 0 .5rem;line-height:1.15;letter-spacing:-.025em;text-align:center}.ob-subtitle{text-align:center;font-size:.9375rem;color:#fff6;margin:0}.ob-cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-top:2.25rem}.ob-cards-grid--3,.ob-cards-grid--multi{grid-template-columns:repeat(3,1fr)}.ob-cards-grid--multi .ob-card:last-child:not(:nth-child(3n)){grid-column:1 / -1;max-width:calc(33.33% - .375rem);margin:0 auto;width:100%}.ob-line-list{display:flex;flex-direction:column;gap:.5rem;margin-top:1.75rem}.ob-line-option{display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;width:100%;border-radius:12px;background:#ffffff08;border:none;color:#fff;text-align:left;cursor:pointer;transition:background .15s,transform .12s}.ob-line-option:not(.ob-line-option--selected):hover{transform:translateY(-2px);background:#ffffff0b}.ob-line-option--selected{background:linear-gradient(135deg,#60a5fa1f,#22d3ee14);box-shadow:0 6px 20px #38bdf814}.ob-line-icon{width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;color:var(--color-primary);flex-shrink:0}.ob-line-body{display:flex;flex-direction:column}.ob-line-label{font-weight:700}.ob-line-desc{font-size:.88rem;color:#ffffff75}.ob-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.45rem;padding:1.375rem .875rem 1.25rem;background:#ffffff0a;border:none;border-radius:16px;cursor:pointer;color:#fff;outline:none;transition:transform .2s cubic-bezier(.22,1,.36,1),background .2s ease,box-shadow .2s ease;-webkit-tap-highlight-color:transparent}.ob-card:not(.ob-card--selected):hover{transform:translateY(-3px);background:#ffffff13;box-shadow:0 10px 30px #00000059}.ob-card:not(.ob-card--selected):focus-visible{box-shadow:0 0 0 3px #38bdf847}.ob-card--selected{background:linear-gradient(135deg,#60a5fa33,#22d3ee24);box-shadow:0 10px 30px #38bdf833;transform:translateY(-2px)}.ob-card-icon{font-size:2rem;line-height:1;margin-bottom:.1rem}.ob-card-icon-svg{display:inline-flex;width:2rem;height:2rem}.ob-card-icon-svg svg{width:100%;height:100%;display:block}.ob-card-icon,.ob-card-icon-svg,.ob-card-icon-svg svg,.ob-line-icon,.ob-line-icon svg{color:#fff}.ob-card-label{font-size:.9375rem;font-weight:600;line-height:1.3;color:#fff}.ob-card-desc{font-size:.78rem;color:#ffffff6b;line-height:1.35;margin-top:.1rem}.ob-card-check{position:absolute;top:.55rem;right:.6rem;width:20px;height:20px;border-radius:50%;background:#60a5fa26;border:1.5px solid rgba(96,165,250,.33);display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:800;color:#ffffff4d;transition:background .18s,border-color .18s,color .18s}.ob-card-check--visible{background:linear-gradient(135deg,#60a5fa,#22d3ee);border-color:#60a5fae6;color:#fff}.ob-cta-btn{display:block;width:100%;margin-top:1.5rem;padding:1rem 1.5rem;border:none;border-radius:12px;background:linear-gradient(135deg,#60a5fa,#22d3ee);color:#fff;font-size:1rem;font-weight:700;letter-spacing:.01em;cursor:pointer;transition:opacity .15s,transform .15s,box-shadow .15s;box-shadow:0 4px 18px #60a5fa61}.ob-cta-btn:hover:not(:disabled){opacity:.92;transform:translateY(-1px);box-shadow:0 6px 24px #60a5fa80}.ob-cta-btn:active:not(:disabled){transform:translateY(0)}.ob-cta-btn:disabled{opacity:.28;cursor:not-allowed;box-shadow:none}.ob-name-form{display:flex;flex-direction:column;gap:1rem;margin-top:2.25rem}.ob-field{display:flex;flex-direction:column;gap:.4rem}.ob-field--single{width:100%}.ob-field label{font-size:.8rem;font-weight:500;color:#ffffff73;letter-spacing:.04em;text-transform:uppercase}.ob-field input{padding:.875rem 1rem;border-radius:10px;border:1.5px solid rgba(255,255,255,.1);background:#ffffff0d;color:#fff;font-size:1rem;outline:none;transition:border-color .15s,background .15s;width:100%;box-sizing:border-box}.ob-field input:focus{border-color:#a29bfea6;background:#ffffff12}.ob-field input::placeholder{color:#ffffff2e}.ob-skip-link{background:none;border:none;color:#ffffff47;font-size:.8125rem;cursor:pointer;text-align:center;padding:.25rem;transition:color .15s;margin-top:.25rem}.ob-skip-link:hover:not(:disabled){color:#ffffff8c}.ob-error{margin:0;padding:.625rem .875rem;border-radius:8px;background:#ef44441a;border:1px solid rgba(239,68,68,.28);color:#fca5a5;font-size:.875rem;text-align:center}@media (max-width: 520px){.ob-main{padding-top:2.5rem}.ob-cards-grid,.ob-cards-grid--3{grid-template-columns:1fr}.ob-cards-grid--multi{grid-template-columns:repeat(2,1fr)}.ob-cards-grid--multi .ob-card:last-child:not(:nth-child(3n)){grid-column:auto;max-width:100%;margin:0}.ob-question,.ob-subtitle{text-align:left}}:root{--color-bg: #0a0e1a;--color-bg-alt: #0f1421;--color-surface: #151b2b;--color-surface-elevated: #1a2135;--color-surface-hover: #1f2840;--color-border: rgba(99, 102, 241, .15);--color-border-light: rgba(255, 255, 255, .08);--color-text: #ffffff;--color-text-secondary: #a0aec0;--color-text-muted: #718096;--color-primary: #6366f1;--color-primary-hover: #7c3aed;--color-primary-light: rgba(99, 102, 241, .1);--color-primary-glow: rgba(99, 102, 241, .4);--brand-blue: #60a5fa;--brand-blue-2: #22d3ee;--color-accent: #14b8a6;--color-accent-hover: #0d9488;--color-accent-light: rgba(20, 184, 166, .1);--color-warning: #f59e0b;--color-warning-light: rgba(245, 158, 11, .1);--color-success: #10b981;--color-success-light: rgba(16, 185, 129, .1);--color-error: #ef4444;--color-error-light: rgba(239, 68, 68, .1);--white-key-bg: linear-gradient(180deg, #fafbfc 0%, #f0f2f5 100%);--white-key-border: #cbd5e0;--white-key-pressed: linear-gradient(180deg, #e2e8f0 0%, #cbd5e0 100%);--white-key-hover: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);--black-key-bg: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);--black-key-pressed: linear-gradient(180deg, #2d3748 0%, #1a202c 100%);--black-key-hover: linear-gradient(180deg, #252525 0%, #101010 100%);--keyboard-border: rgba(99, 102, 241, .2);--keyboard-bezel: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);--key-edge: rgba(0, 0, 0, .3);--bezel-width: 12px;--keyboard-padding: 8px;--focus-ring: rgba(99, 102, 241, .4);--radius: 12px;--radius-lg: 16px;--radius-sm: 8px;--radius-xs: 4px;--gap: 16px;--gap-lg: 24px;--gap-xl: 32px;--padding: 20px;--padding-lg: 32px;--white-key-height: clamp(80px, 15vh, 120px);--black-key-height: calc(var(--white-key-height) * .5);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 20px rgba(0, 0, 0, .15);--shadow-xl: 0 20px 40px rgba(0, 0, 0, .25);--shadow-2xl: 0 25px 50px rgba(0, 0, 0, .35);--shadow-glow: 0 0 20px var(--color-primary-glow);--shadow-glow-accent: 0 0 20px rgba(20, 184, 166, .4);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .35s cubic-bezier(.4, 0, .2, 1);--falling-zone-height: 340px;--font-mono: "SF Mono", "Cascadia Code", "Consolas", monospace;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes glow{0%,to{box-shadow:0 0 20px var(--color-primary-glow)}50%{box-shadow:0 0 30px var(--color-primary-glow),0 0 40px var(--color-primary-glow)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}*{box-sizing:border-box;margin:0;padding:0}*:not(input):not(textarea):not([contenteditable=true]){caret-color:transparent!important}body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-bg);color:var(--color-text);line-height:1.6;overflow-x:hidden}html{scrollbar-gutter:stable}code{font-family:var(--font-mono)}#root{width:100%;min-height:100vh}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--color-surface)}::-webkit-scrollbar-thumb{background:var(--color-surface-elevated);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--color-surface-hover)}::selection{background:var(--color-primary-light);color:var(--color-text)}a{font-weight:500;color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-hover)}button{border-radius:var(--radius-sm);border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--color-surface);color:var(--color-text);cursor:pointer;transition:all var(--transition-fast)}button:hover{border-color:var(--color-primary);background-color:var(--color-surface-hover)}button:focus,button:focus-visible{outline:none;box-shadow:none!important}.piece-card:focus,.piece-card:focus-visible{box-shadow:none!important}