:root,html[data-theme=magic]{--bg: #eef3ff;--bg-elevated: #e5ecff;--surface: rgba(255, 255, 255, .96);--surface-strong: #ffffff;--surface-soft: rgba(244, 247, 255, .88);--surface-hover: #eef2ff;--card-bg: var(--surface-strong);--border: #b8c6ef;--border-light: #9caedc;--primary: #5d48e8;--primary-light: #7a69f0;--primary-dark: #4332b8;--primary-alpha: rgba(93, 72, 232, .12);--btn-primary-text: #ffffff;--text: #16203f;--text-muted: #46557e;--accent: #4d60d8;--accent-light: #7083f2;--danger: #c84545;--success: #2f8f68;--hover-bg: rgba(93, 72, 232, .1);--content-width: 1500px}html,html[data-theme=magic]{background:radial-gradient(circle at 12% 15%,rgba(99,102,241,.12),transparent 36%),radial-gradient(circle at 88% 10%,rgba(79,70,229,.09),transparent 32%),linear-gradient(180deg,#f7f9ff,#eef3ff 38%,#e5ecff);color-scheme:light}html[data-theme=gold]{--bg: #f8f3e6;--bg-elevated: #efe4cb;--surface: rgba(255, 250, 240, .97);--surface-strong: #fffaf0;--surface-soft: rgba(252, 246, 232, .9);--surface-hover: #f4ead0;--card-bg: var(--surface-strong);--border: #d7c296;--border-light: #b89d63;--primary: #a47717;--primary-light: #c29226;--primary-dark: #7c5810;--primary-alpha: rgba(164, 119, 23, .12);--btn-primary-text: #fffaf0;--text: #36260f;--text-muted: #6c5630;--accent: #8f6415;--accent-light: #c58f2d;--danger: #b8493c;--success: #5f8350;--hover-bg: rgba(164, 119, 23, .1);background:radial-gradient(circle at 12% 15%,rgba(199,146,38,.14),transparent 36%),radial-gradient(circle at 88% 10%,rgba(164,119,23,.09),transparent 32%),linear-gradient(180deg,#fffaf0,#f8f3e6 38%,#efe4cb);color-scheme:light}html[data-theme=olive]{--bg: #eff3e7;--bg-elevated: #e5ebd7;--surface: rgba(250, 252, 244, .97);--surface-strong: #fafcf4;--surface-soft: rgba(240, 245, 232, .9);--surface-hover: #e7edd8;--card-bg: var(--surface-strong);--border: #b7c59b;--border-light: #97a978;--primary: #6c7f33;--primary-light: #859b44;--primary-dark: #536224;--primary-alpha: rgba(108, 127, 51, .12);--btn-primary-text: #f7fbef;--text: #223015;--text-muted: #536347;--accent: #7d8d46;--accent-light: #9dae5d;--danger: #ad5248;--success: #44744d;--hover-bg: rgba(108, 127, 51, .1);background:radial-gradient(circle at 12% 15%,rgba(133,155,68,.13),transparent 36%),radial-gradient(circle at 88% 10%,rgba(108,127,51,.09),transparent 32%),linear-gradient(180deg,#f8fbf2,#eff3e7 38%,#e5ebd7);color-scheme:light}html[data-theme=graphite]{--bg: #202123;--bg-elevated: #18191c;--surface: rgba(42, 43, 48, .88);--surface-strong: #2b2d31;--surface-soft: rgba(49, 52, 58, .9);--surface-hover: #31343a;--card-bg: var(--surface-strong);--border: rgba(112, 118, 131, .44);--border-light: rgba(144, 151, 166, .56);--primary: #8ab4ff;--primary-light: #a8c7ff;--primary-dark: #6c9dff;--primary-alpha: rgba(138, 180, 255, .14);--btn-primary-text: #111318;--text: #eceff4;--text-muted: #a7b0be;--accent: #8ab4ff;--accent-light: #c2d7ff;--danger: #ff8a8a;--success: #6ecf95;--hover-bg: rgba(255, 255, 255, .08);background:radial-gradient(circle at 12% 15%,rgba(138,180,255,.12),transparent 34%),radial-gradient(circle at 88% 10%,rgba(116,163,255,.1),transparent 28%),linear-gradient(180deg,#161719,#202123 44%,#24262b);color-scheme:dark}html[data-theme=oled]{--bg: #020202;--bg-elevated: #000000;--surface: rgba(12, 12, 12, .94);--surface-strong: #0c0c0c;--surface-soft: rgba(18, 18, 18, .92);--surface-hover: #171717;--card-bg: var(--surface-strong);--border: rgba(255, 255, 255, .14);--border-light: rgba(255, 255, 255, .2);--primary: #c8c8c8;--primary-light: #ffffff;--primary-dark: #9f9f9f;--primary-alpha: rgba(255, 255, 255, .1);--btn-primary-text: #050505;--text: #f3f3f3;--text-muted: #a2a2a2;--accent: #d4d4d4;--accent-light: #ffffff;--danger: #ff8d8d;--success: #7fd2a9;--hover-bg: rgba(255, 255, 255, .08);background:#000;color-scheme:dark}body{position:relative}body:before,body:after{content:none!important;background:none!important}.music-emoji-field{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}.music-emoji-note{position:absolute;color:#5d48e847;transform-origin:center;user-select:none;line-height:1}html[data-theme=graphite] .music-emoji-note,html[data-theme=oled] .music-emoji-note{color:#ffffff29}.site-header,.mobile-nav,.site-footer,.about-preview{background:var(--surface)}.site-header{background:color-mix(in srgb,var(--surface) 82%,transparent);border-bottom:1px solid var(--border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 10px 28px #141c3514}html[data-theme=graphite] .site-header,html[data-theme=oled] .site-header{background:#141518a8;border-bottom-color:#ffffff1a;box-shadow:0 14px 30px #00000042}.mobile-nav{background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}.header-inner{max-width:1500px;margin-inline:auto;gap:10px;flex-wrap:nowrap}.main-nav{flex:1;min-width:0;gap:4px;flex-wrap:nowrap;justify-content:center}.nav-link{white-space:nowrap;font-size:.82rem;padding:10px 11px;color:var(--text-muted)}.nav-link:hover,.mobile-nav-link:hover{color:var(--text);background:var(--hover-bg)}.nav-link.active,.mobile-nav-link.active{color:var(--primary);background:color-mix(in srgb,var(--primary) 14%,transparent)}.nav-link-account{max-width:210px;overflow:hidden;text-overflow:ellipsis}.theme-picker{position:relative;display:flex;align-items:center}.theme-toggle{background:color-mix(in srgb,var(--surface) 80%,transparent);border:1px solid var(--border);border-radius:12px;color:var(--text-muted);box-shadow:0 8px 18px #141c3514}.theme-toggle:hover{color:var(--text);border-color:var(--primary);background:color-mix(in srgb,var(--surface-hover) 82%,transparent)}.theme-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:220px;padding:10px;display:none;flex-direction:column;gap:6px;border-radius:16px;background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--border);box-shadow:0 20px 40px #141c3529;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:130}.theme-menu.open{display:flex}.theme-option{width:100%;display:inline-flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--text);cursor:pointer;text-align:left;font:inherit;font-weight:600;transition:background var(--transition),border-color var(--transition),color var(--transition)}.theme-option:hover,.theme-option.active{background:color-mix(in srgb,var(--primary) 10%,transparent);border-color:color-mix(in srgb,var(--primary) 32%,transparent)}.theme-swatch{width:16px;height:16px;border-radius:50%;border:1px solid rgba(255,255,255,.35);flex:0 0 auto}.theme-swatch-magic{background:linear-gradient(135deg,#5d48e8,#8b7cff)}.theme-swatch-gold{background:linear-gradient(135deg,#a47717,#e3bb5b)}.theme-swatch-olive{background:linear-gradient(135deg,#6c7f33,#9dae5d)}.theme-swatch-graphite{background:linear-gradient(135deg,#2a2b30,#687387)}.theme-swatch-oled{background:linear-gradient(135deg,#000,#555)}.mobile-theme-picker{margin-top:8px;padding-top:12px;border-top:1px solid var(--border)}.mobile-theme-title{padding:0 16px 10px;color:var(--text-muted);font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.mobile-theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 4px}.mobile-theme-grid .theme-option{min-width:0;padding:10px;font-size:.84rem}.quick-card-icon-tutor{color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,transparent)}.btn-outline,.hero-meta-pill,.control-btn,.btn-sm,.theme-toggle{border-width:1.5px}.btn-outline,.btn-sm{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--primary);border:1.5px solid color-mix(in srgb,var(--primary) 42%,var(--border));box-shadow:none}.btn-outline:hover,.btn-sm:hover{background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary-dark);border-color:var(--primary)}html[data-theme=graphite] .btn-outline,html[data-theme=graphite] .btn-sm,html[data-theme=oled] .btn-outline,html[data-theme=oled] .btn-sm{background:color-mix(in srgb,var(--surface) 90%,transparent);color:var(--text);border-color:color-mix(in srgb,var(--primary) 24%,var(--border))}html[data-theme=graphite] .btn-outline:hover,html[data-theme=graphite] .btn-sm:hover,html[data-theme=oled] .btn-outline:hover,html[data-theme=oled] .btn-sm:hover{color:var(--primary-light)}.page-home .hero{min-height:calc(100vh - 67px);display:flex;align-items:center;padding:90px 0 72px;background:radial-gradient(circle at 18% 20%,color-mix(in srgb,var(--primary) 18%,transparent),transparent 28%),radial-gradient(circle at 80% 12%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 20%),linear-gradient(180deg,color-mix(in srgb,var(--surface) 22%,transparent),transparent)}.page-home .hero .container{width:100%;align-items:center}.page-home .hero-content{max-width:720px}.page-home .hero-title{text-wrap:balance}.quick-access-section,.home-leaderboard-section,.about-preview,.piano-home-section{position:relative}.quick-access-section:before,.piano-home-section:before,.about-preview:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 5%,transparent),transparent 38%),radial-gradient(circle at 82% 28%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 22%)}.quick-access-header{text-align:center;margin-bottom:38px}.quick-access-subtitle{display:none}.quick-access-grid{gap:16px}.quick-card{border-radius:18px;border:1.5px solid var(--border);box-shadow:0 16px 32px #141c3514}.quick-card:hover{border-color:var(--primary);box-shadow:0 20px 36px #141c351f}.howto-home-section .container,.piano-home-section .container{position:relative}.howto-shell,.virtual-piano{background:color-mix(in srgb,var(--surface) 88%,transparent);border:1.5px solid var(--border);border-radius:26px;box-shadow:0 18px 42px #141c3514}.howto-shell{padding:28px;overflow:hidden}.howto-shell>*{min-width:0}.howto-video-wrap{width:100%;max-width:100%;min-width:0;min-height:100%;align-self:stretch;aspect-ratio:16 / 10;overflow:hidden;border-radius:22px;border:1px solid var(--border);background:#000}.howto-video{display:block;width:100%;max-width:100%;height:100%;min-height:280px;object-fit:cover}.howto-step{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--border) 80%,transparent)}.howto-step:last-of-type{border-bottom:none}.howto-step-num{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary);font-weight:800;flex:0 0 auto}.virtual-piano{padding:28px}.module-card,.games-folder,.games-accordion,.games-panel,.summary-test-card,.games-quiz-card,.module-header,.games-folder-btn,.games-accordion-header,.msg-convo-item,.msg-new-form,.chat-bubble.theirs,.chat-bubble.left,.dash-inbox-card,.dash-quick-link,.recent-item,.tutor-topic-card,.tutor-final-card{color:var(--text)}.module-card,.games-folder,.games-accordion,.games-panel,.msg-convo-item,.msg-new-form,.chat-bubble.theirs,.chat-bubble.left,.dash-inbox-card,.dash-quick-link,.recent-item,.tutor-topic-card,.tutor-final-card{background:color-mix(in srgb,var(--card-bg) 96%,transparent)!important;border-color:var(--border)!important;box-shadow:0 14px 32px #141c3514}.module-header,.games-folder-btn,.games-accordion-header{background:color-mix(in srgb,var(--surface-soft) 96%,transparent)!important;color:var(--text)!important}.module-header:hover,.games-folder-btn:hover,.games-accordion-header:hover{background:color-mix(in srgb,var(--primary) 8%,var(--surface-strong))!important}.games-panel,.games-quiz-card-accent,.games-submit-hint,.summary-test-card,.notif-item.unread,.tutor-final-card{background:color-mix(in srgb,var(--primary) 8%,var(--card-bg))!important}.games-quiz-card-accent,.games-submit-hint,.summary-test-card,.notif-item.unread,.tutor-final-card{border-color:color-mix(in srgb,var(--primary) 32%,var(--border))!important}.games-feature-card,.games-quiz-card{background:color-mix(in srgb,var(--surface) 94%,transparent)!important;border-color:var(--border)!important}.games-feature-card:hover,.games-quiz-card:hover{border-color:var(--primary)!important}.module-title,.games-folder-label,.games-quiz-title,.games-feature-title,.summary-test-card strong,.summary-test-card div,.games-accordion-header span{color:var(--text)!important}.module-desc,.module-meta,.games-quiz-desc,.games-quiz-count,.games-folder-count,.lesson-label,.legacy-label,.subsection-label,.games-submit-hint,.games-submit-hint span{color:var(--text-muted)!important}.games-folder-svg,.module-chevron,.acc-arrow,.games-quiz-arrow{color:var(--primary)!important}.summary-test-card:hover{background:color-mix(in srgb,var(--primary) 12%,var(--card-bg))!important}.auth-error{background:color-mix(in srgb,var(--danger) 16%,var(--surface-strong));border:1px solid color-mix(in srgb,var(--danger) 48%,var(--border));color:color-mix(in srgb,var(--danger) 86%,var(--text))}.site-footer{background:color-mix(in srgb,var(--surface) 92%,transparent)}@media (max-width: 1330px){.header-inner{max-width:none}}@media (max-width: 1100px){.main-nav{display:none}.mobile-menu-btn{display:flex}.page-home .hero{min-height:calc(100vh - 64px)}}@media (max-width: 900px){.page-home .hero .container{flex-direction:column;align-items:flex-start;gap:20px}.page-home .hero-visual{align-self:center}.howto-video-wrap{aspect-ratio:16 / 9}}@media (max-width: 768px){.mobile-theme-grid{grid-template-columns:1fr}.page-home .hero{padding:74px 0 60px}.quick-access-header{margin-bottom:28px}.howto-shell,.virtual-piano{padding:18px;border-radius:22px}.howto-video{min-height:220px}}@media (max-width: 520px){.logo-text{display:none}.logo-img{height:42px}.theme-toggle{width:34px;height:34px}.page-home .hero{min-height:calc(100svh - 64px)}}:root{--section-glow-primary: color-mix(in srgb, var(--primary) 8%, transparent);--section-glow-accent: color-mix(in srgb, var(--accent) 8%, transparent)}html[data-theme=magic]{--section-glow-primary: rgba(93, 72, 232, .1);--section-glow-accent: rgba(77, 96, 216, .08)}html[data-theme=gold]{--section-glow-primary: rgba(164, 119, 23, .12);--section-glow-accent: rgba(143, 100, 21, .08)}html[data-theme=olive]{--section-glow-primary: rgba(108, 127, 51, .12);--section-glow-accent: rgba(125, 141, 70, .08)}html[data-theme=graphite],html[data-theme=oled]{--section-glow-primary: rgba(160, 170, 185, .13);--section-glow-accent: rgba(124, 134, 150, .08)}.quick-access-section:before,.piano-home-section:before,.about-preview:before{background:linear-gradient(180deg,var(--section-glow-primary),transparent 38%),radial-gradient(circle at 82% 28%,var(--section-glow-accent),transparent 22%)!important}html,body{background-color:var(--bg)}body{position:relative;isolation:isolate}.music-emoji-field{z-index:0!important}.site-header,.main-content,.site-footer{position:relative;z-index:1}.header-actions{display:flex;align-items:center;gap:8px}.hero-actions{display:flex;flex-wrap:wrap;gap:10px}.hero-actions .btn{width:auto;flex:0 0 auto}.howto-video-fallback{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;text-align:center;color:var(--text-muted);font-size:.92rem;line-height:1.5;padding:18px 14px;border:1px dashed var(--border);border-radius:14px;background:color-mix(in srgb,var(--surface) 92%,transparent)}.howto-video-fallback a{font-weight:700}html[data-theme=graphite] .quick-card,html[data-theme=graphite] .quick-card:hover,html[data-theme=oled] .quick-card,html[data-theme=oled] .quick-card:hover{background:color-mix(in srgb,var(--surface-strong) 92%,transparent)!important;border-color:color-mix(in srgb,var(--border) 92%,#a5adb8)!important;box-shadow:0 14px 32px #0000005c!important}html[data-theme=graphite] .quick-card-icon,html[data-theme=oled] .quick-card-icon,html[data-theme=graphite] .quick-card-icon-tutor,html[data-theme=oled] .quick-card-icon-tutor{color:color-mix(in srgb,var(--text) 86%,#dce3ef)!important;background:color-mix(in srgb,var(--surface-hover) 78%,#7d8696)!important}html[data-theme=graphite] .quick-card-sub,html[data-theme=oled] .quick-card-sub{color:color-mix(in srgb,var(--text-muted) 92%,#c2c8d3)!important}html[data-theme=graphite] .games-folder-btn,html[data-theme=graphite] .module-header,html[data-theme=graphite] .games-accordion-header,html[data-theme=oled] .games-folder-btn,html[data-theme=oled] .module-header,html[data-theme=oled] .games-accordion-header{background:color-mix(in srgb,var(--surface-soft) 96%,#868f9d)!important}html[data-theme=graphite] .games-folder.open .games-folder-btn,html[data-theme=oled] .games-folder.open .games-folder-btn{background:color-mix(in srgb,var(--surface-hover) 92%,#9da6b5)!important}.page-account .profile-header{align-items:center;padding:16px;border-radius:16px;background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--border)}.page-account .profile-avatar,.page-account .profile-avatar-img{width:74px;height:74px;border-radius:20px}.page-account .profile-avatar{font-size:2rem}.page-account .profile-meta{font-size:.95rem}.page-account .profile-stat-card{min-width:140px}.page-account .profile-stat-label{color:var(--text-muted);font-size:.8rem;letter-spacing:.02em;text-transform:uppercase}@media (max-width: 900px){.hero-actions{gap:8px}.hero-actions .btn{padding:10px 14px;font-size:.88rem}}@media (max-width: 768px){.header-inner{gap:8px}.logo{margin-right:auto}.theme-picker{order:1}.mobile-menu-btn{order:2}.quick-access-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.quick-card{min-height:0!important;padding:12px!important;gap:10px!important}.quick-card-icon{width:42px;height:42px;border-radius:11px}.quick-card-icon svg{width:24px;height:24px}.quick-card-label{font-size:.88rem;line-height:1.2}.quick-card-sub{font-size:.75rem;line-height:1.2}}@media (max-width: 420px){.hero-actions .btn{padding:9px 12px;font-size:.82rem}}html[data-theme=graphite] .games-hero .hero-title,html[data-theme=graphite] .page-home .hero-title,html[data-theme=oled] .games-hero .hero-title,html[data-theme=oled] .page-home .hero-title{text-shadow:0 0 26px rgba(188,198,212,.22)!important}html[data-theme=graphite] .section-title,html[data-theme=oled] .section-title{text-shadow:none}html[data-theme=magic]{--theme-page-bg: linear-gradient(180deg, #f7f9ff, #eef3ff 42%, #e5ecff);--theme-hero-glow: rgba(93, 72, 232, .16)}html[data-theme=gold]{--theme-page-bg: linear-gradient(180deg, #fffaf0, #f8f3e6 42%, #efe4cb);--theme-hero-glow: rgba(164, 119, 23, .18)}html[data-theme=olive]{--theme-page-bg: linear-gradient(180deg, #f8fbf2, #eff3e7 42%, #e5ebd7);--theme-hero-glow: rgba(108, 127, 51, .18)}html[data-theme=graphite]{--theme-page-bg: linear-gradient(180deg, #161719, #202123 44%, #24262b);--theme-hero-glow: rgba(138, 180, 255, .2)}html[data-theme=oled]{--theme-page-bg: linear-gradient(180deg, #000000, #050505 44%, #080808);--theme-hero-glow: rgba(255, 255, 255, .12)}html[data-theme] body{background:var(--theme-page-bg)!important}html[data-theme] .page-home .hero,html[data-theme] .games-hero{background:radial-gradient(circle at 18% 20%,var(--theme-hero-glow),transparent 32%),radial-gradient(circle at 82% 14%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 28%),linear-gradient(180deg,color-mix(in srgb,var(--surface) 24%,transparent),transparent)!important}html[data-theme] .site-header,html[data-theme] .mobile-nav{background:color-mix(in srgb,var(--surface) 88%,transparent)!important;border-color:var(--border)!important}html[data-theme] .section-title,html[data-theme] .hero-title,html[data-theme] .games-hero .hero-title{color:var(--text)!important;text-shadow:none!important}html[data-theme] .btn-primary{background:var(--primary)!important;color:var(--btn-primary-text)!important;border-color:color-mix(in srgb,var(--primary) 84%,#000 16%)!important}html[data-theme] .btn-outline{border-color:color-mix(in srgb,var(--primary) 56%,var(--border))!important;color:var(--primary)!important}html[data-theme] .theme-option.active{background:color-mix(in srgb,var(--primary) 18%,transparent)!important;border-color:color-mix(in srgb,var(--primary) 52%,transparent)!important}.header-actions,.theme-picker,#theme-toggle,#theme-menu,#theme-menu .theme-option,.mobile-theme-picker,.mobile-theme-grid .theme-option{position:relative;z-index:1002;pointer-events:auto}#theme-menu{z-index:1200}