*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;font-family:var(--font-body);font-weight:400;font-size:16px;line-height:1.5;color:var(--text-primary);background-color:var(--bg-deep);min-height:100dvh;min-height:-webkit-fill-available;overflow-x:hidden;overscroll-behavior:contain;-webkit-user-select:none;user-select:none}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);line-height:1.2}button{font-family:inherit}img,svg{display:block;max-width:100%}*{-webkit-tap-highlight-color:transparent}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.layout{display:flex;flex-direction:column;min-height:100dvh;min-height:-webkit-fill-available}.layout-main{flex:1;overflow-y:auto;padding:var(--sp-5) var(--sp-4) calc(80px + var(--sp-4));max-width:600px;margin:0 auto;width:100%}.layout-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;padding:var(--sp-2) var(--sp-2) max(var(--sp-2),env(safe-area-inset-bottom));border-top:1px solid rgba(201,169,110,.08);z-index:var(--z-nav)}.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--sp-2) var(--sp-3);background:none;border:none;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-md);transition:color var(--transition-fast);-webkit-tap-highlight-color:transparent;min-width:48px;min-height:48px;justify-content:center}.nav-item:hover{color:var(--text-secondary)}.nav-item-active{color:var(--gold)}.nav-icon{font-size:1.3rem;line-height:1;font-variant-emoji:text}.nav-label{font-size:.65rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em}.card{position:relative;overflow:hidden;background:var(--bg-surface);border:1px solid rgba(201,169,110,.08);border-radius:var(--radius-md);padding:var(--sp-6);transition:border-color var(--transition-base),box-shadow var(--transition-base)}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity var(--transition-base)}.card:hover:before,.card-glow:before{opacity:1}.card-glow{border-color:#c9a96e26;box-shadow:var(--shadow-gold)}.btn{font-family:var(--font-body);font-weight:600;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);transition:all var(--transition-fast);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-sm{padding:var(--sp-2) var(--sp-3);font-size:var(--text-sm);border-radius:var(--radius-sm)}.btn-md{padding:var(--sp-3) var(--sp-6);font-size:var(--text-base);border-radius:var(--radius-lg)}.btn-lg{padding:var(--sp-4) var(--sp-8);font-size:var(--text-lg);border-radius:var(--radius-lg)}.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-muted));color:var(--bg-deep)}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,var(--gold-light),var(--gold));box-shadow:var(--shadow-gold)}.btn-primary:active:not(:disabled){transform:scale(.97)}.btn-ghost{background:transparent;color:var(--gold);border:1px solid var(--gold-muted)}.btn-ghost:hover:not(:disabled){background:var(--gold-glow);border-color:var(--gold)}.btn-choice{background:var(--bg-elevated);color:var(--text-primary);border:1px solid rgba(201,169,110,.12);min-width:72px;min-height:48px;padding:var(--sp-3) var(--sp-5);border-radius:var(--radius-lg);font-size:var(--text-base);font-weight:500}.btn-choice:hover:not(:disabled){border-color:var(--gold-muted);background:var(--bg-hover)}.btn-choice:active:not(:disabled){transform:scale(.96)}.btn-choice-correct{background:var(--success);color:#fff;border:1px solid var(--success);min-width:72px;padding:var(--sp-3) var(--sp-5);border-radius:var(--radius-lg);font-size:var(--text-base);font-weight:600;animation:correctFlash .6s ease}.btn-choice-wrong{background:var(--error);color:#fff;border:1px solid var(--error);min-width:72px;padding:var(--sp-3) var(--sp-5);border-radius:var(--radius-lg);font-size:var(--text-base);font-weight:600;animation:wrongShake .4s ease}.progress-bar-container{width:100%}.progress-bar-header{display:flex;justify-content:space-between;margin-bottom:var(--sp-2)}.progress-bar-label{font-size:var(--text-sm);color:var(--text-secondary)}.progress-bar-pct{font-size:var(--text-sm);color:var(--gold);font-weight:600}.progress-bar-track{width:100%;height:6px;background:var(--bg-elevated);border-radius:var(--radius-full);overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold-muted),var(--gold),var(--gold-light));border-radius:var(--radius-full);transition:width var(--transition-base);background-size:200% 100%;animation:shimmer 3s linear infinite}.dashboard{display:flex;flex-direction:column;gap:var(--sp-6)}.dashboard-header{text-align:center;padding:var(--sp-4) 0}.dashboard-title{font-family:var(--font-heading);font-style:italic;font-size:var(--text-3xl);color:var(--gold-light);margin:0;letter-spacing:-.02em}.dashboard-subtitle{font-size:var(--text-sm);color:var(--text-secondary);margin:var(--sp-2) 0 0}.welcome-card{text-align:center;padding:var(--sp-6) var(--sp-5);border-color:#c9a96e26}.welcome-text{font-size:var(--text-sm);color:var(--text-secondary);margin:0;line-height:1.6}.dashboard-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}.stat-card{text-align:center;padding:var(--sp-4) var(--sp-3)}.stat-value{display:block;font-family:var(--font-heading);font-size:var(--text-2xl);color:var(--gold);line-height:1.2}.stat-label{display:block;font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.12em;margin-top:var(--sp-1)}.dashboard-section{display:flex;flex-direction:column;gap:var(--sp-3)}.section-title{font-family:var(--font-heading);font-size:var(--text-lg);color:var(--text-primary);margin:0;letter-spacing:.12em}.quick-start-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}.quick-start-btn{flex-direction:column;padding:var(--sp-5) var(--sp-4)!important;gap:var(--sp-2)}.qs-icon{font-size:1.5rem;font-variant-emoji:text}.progress-card{cursor:pointer;display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5)}.progress-card-header{display:flex;justify-content:space-between;align-items:baseline}.progress-type{font-weight:600;color:var(--text-primary)}.progress-sessions{font-size:var(--text-xs);color:var(--text-muted)}.progress-best{font-size:var(--text-xs);color:var(--gold);font-weight:600;text-align:right}.recent-list{display:flex;flex-direction:column;gap:var(--sp-2)}.recent-item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--bg-surface);border-radius:var(--radius-sm);border:1px solid rgba(201,169,110,.05)}.recent-type{flex:1;font-size:var(--text-sm);color:var(--text-secondary)}.recent-score{font-size:var(--text-sm);color:var(--text-primary);font-weight:500}.recent-pct{font-size:var(--text-sm);color:var(--gold);font-weight:600;min-width:36px;text-align:right}.piano-container{width:100%;overflow-x:auto;padding:var(--sp-4) 0;-webkit-overflow-scrolling:touch;display:flex;justify-content:center}.piano-wrapper{display:inline-flex;transform-origin:top center}.piano{display:flex;min-width:fit-content}.piano-octave{position:relative;display:flex;flex-shrink:0}.piano-key{border:none;cursor:pointer;transition:background var(--transition-fast),box-shadow var(--transition-fast);-webkit-tap-highlight-color:transparent;touch-action:manipulation}.piano-key-white{width:40px;height:140px;background:linear-gradient(180deg,#f8f6f0,#e8e4da);border-radius:0 0 var(--radius-sm) var(--radius-sm);border:1px solid rgba(0,0,0,.15);border-top:none;position:relative;z-index:1;box-shadow:0 4px #aaa,0 6px 12px #0006}.piano-key-white:hover{background:linear-gradient(180deg,#fff,#f0ece2)}.piano-key-white:active{background:linear-gradient(180deg,#e8e4da,#d8d4ca);transform:scaleY(.96) translateY(2px)}.piano-key-white.piano-key-highlight{background:#ffe08a;box-shadow:0 4px #c8a830,0 0 12px #c9a84c80}.piano-key-black{position:absolute;width:26px;height:90px;background:linear-gradient(to bottom,#2a2520,#1a1714 40%,#0f0e0c);border-radius:0 0 4px 4px;z-index:2;top:0;box-shadow:2px 4px #000,0 6px 10px #0009}.piano-key-black:hover{background:linear-gradient(180deg,#3a3a3a,#1a1a1a)}.piano-key-black:active{background:linear-gradient(180deg,#222,#0a0a0a)}.piano-key-black.piano-key-highlight{background:linear-gradient(to bottom,#c9a84c,#7a6330);box-shadow:0 4px #3a2f10,0 0 12px #c9a84c66}.piano-key-label{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:.6rem;color:var(--text-muted);pointer-events:none}@media(max-width:600px){.piano-wrapper{transform:scale(.78);margin-bottom:-20px}}@media(min-width:601px)and (max-width:900px){.piano-wrapper{transform:scale(.88);margin-bottom:-10px}}.score-display{display:flex;align-items:baseline;gap:var(--sp-3)}.score-label{font-size:var(--text-sm);color:var(--text-muted);text-transform:uppercase;letter-spacing:.12em}.score-value{font-family:var(--font-heading);font-size:var(--text-2xl);color:var(--text-primary)}.score-pct{font-size:var(--text-sm);color:var(--gold);font-weight:600}.training-page{display:flex;flex-direction:column;gap:var(--sp-5)}.training-title{font-family:var(--font-heading);font-style:italic;font-size:var(--text-3xl);color:var(--gold-light);letter-spacing:-.02em;line-height:1;margin:0;text-align:center}.training-subtitle{font-size:var(--text-sm);color:var(--text-secondary);text-align:center;margin:0;letter-spacing:.12em;text-transform:uppercase}.training-header{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}.training-level{font-size:var(--text-sm);color:var(--gold);font-weight:600;text-transform:uppercase;letter-spacing:.12em}.back-btn{background:none;border:1px solid rgba(201,169,110,.15);border-radius:var(--radius-sm);color:var(--gold);font-size:var(--text-lg);cursor:pointer;padding:var(--sp-2) var(--sp-3);min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}.level-select{display:flex;flex-direction:column;gap:var(--sp-3)}.level-card{cursor:pointer;padding:var(--sp-4) var(--sp-5);transition:all var(--transition-fast)}.level-card-selected{border-color:var(--gold);box-shadow:var(--shadow-gold)}.level-card-header{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-1)}.level-number{font-size:var(--text-xs);color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:.12em}.level-name{font-family:var(--font-heading);font-size:var(--text-lg);color:var(--text-primary)}.level-desc{font-size:var(--text-sm);color:var(--text-secondary);margin:0}.start-btn{width:100%;margin-top:var(--sp-4)}.question-transition{animation:questionIn .3s ease}@keyframes questionIn{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}.question-area{text-align:center;padding:var(--sp-6) 0}.question-text{font-family:var(--font-heading);font-size:var(--text-xl);color:var(--text-primary);margin:0 0 var(--sp-5)}.replay-btn{margin:var(--sp-4) auto 0}.play-modes{display:flex;justify-content:center;gap:var(--sp-2);margin-bottom:var(--sp-4)}.choices-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}.feedback-area{text-align:center;padding:var(--sp-5) 0;opacity:0;visibility:hidden;transition:opacity var(--transition-fast),visibility var(--transition-fast)}.feedback-area.active{opacity:1;visibility:visible}.feedback-area.wrong{background:var(--bg-surface);border-radius:var(--radius-md);padding:var(--sp-5);border:1px solid rgba(196,92,92,.15)}.replay-btn.hidden{visibility:hidden}.feedback-text{font-size:var(--text-sm);font-weight:600;margin:0 0 var(--sp-4);letter-spacing:.1em;text-transform:uppercase}.feedback-text.correct{color:var(--success)}.feedback-reveal{font-family:var(--font-heading);font-size:var(--text-lg);color:var(--text-primary);margin:0 0 var(--sp-3)}.feedback-reveal strong{color:var(--gold);font-size:var(--text-xl)}.feedback-listen{margin-bottom:var(--sp-3)}.feedback-encourage{font-size:var(--text-xs);color:var(--text-muted);margin:0 0 var(--sp-4);letter-spacing:.06em}.answer-mode-toggle{display:flex;gap:var(--sp-2);justify-content:center;margin-bottom:var(--sp-3)}.toggle-btn{padding:var(--sp-2) var(--sp-4);border:1px solid rgba(201,169,110,.2);border-radius:var(--radius-md);background:none;color:var(--text-muted);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:all var(--transition-fast);-webkit-tap-highlight-color:transparent}.toggle-btn:hover{color:var(--text-secondary);border-color:#c9a96e66}.toggle-btn-active{color:var(--gold);border-color:var(--gold);background:#c9a96e14}.results-card{text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--sp-5);padding:var(--sp-8)}.results-msg{font-size:var(--text-base);color:var(--text-secondary);margin:0}.feedback-actions{display:flex;gap:var(--sp-3);align-items:center;justify-content:center}.results-actions{display:flex;gap:var(--sp-3);justify-content:center}.streak-row{display:flex;gap:4px;justify-content:center;margin-top:var(--sp-2)}.streak-pip{width:8px;height:8px;border-radius:50%;background:var(--gold-dim);transition:background .3s}.streak-pip.active{background:var(--gold);box-shadow:0 0 6px var(--gold)}.mode-toggle{display:flex;gap:var(--sp-2);justify-content:center;margin-bottom:var(--sp-3)}.mode-toggle-desc{text-align:center;font-size:var(--text-xs);color:var(--text-muted);margin:0 0 var(--sp-3)}.speed-timer{font-family:var(--font-heading);font-size:var(--text-3xl);color:var(--gold);text-align:center;font-weight:700;margin-bottom:var(--sp-2)}.speed-timer.urgent{color:var(--error);animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.6}}.streak-counter{font-size:var(--text-sm);color:var(--gold);font-weight:600;white-space:nowrap}.streak-counter.hot{animation:glow 2s infinite}@keyframes glow{50%{text-shadow:0 0 8px var(--gold)}}.focus-badge{font-size:var(--text-xs);color:var(--gold);border:1px solid rgba(201,169,110,.3);border-radius:var(--radius-pill, 999px);padding:2px 8px}.focus-areas{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:center}.focus-section{text-align:center}.focus-section-title{font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.12em;margin:0 0 var(--sp-2)}.best-streak{font-size:var(--text-sm);color:var(--gold);margin:0}.share-section{display:flex;flex-direction:column;gap:var(--sp-3);align-items:center}.share-group{text-align:center}.share-label{font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin:0 0 var(--sp-2)}.share-icons{display:flex;gap:var(--sp-2);justify-content:center}.share-icon-btn{width:40px;height:40px;border:1px solid rgba(201,169,110,.2);border-radius:var(--radius-md);background:none;color:var(--gold-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);-webkit-tap-highlight-color:transparent}.share-icon-btn:hover{color:var(--gold);background:#c9a96e14;border-color:#c9a96e66}.share-icon-btn:active{background:#c9a96e24}.share-toast{position:fixed;bottom:var(--sp-6);left:50%;transform:translate(-50%);background:var(--bg-elevated);color:var(--gold);border:1px solid rgba(201,169,110,.3);border-radius:var(--radius-md);padding:var(--sp-3) var(--sp-5);font-size:var(--text-sm);font-weight:500;animation:toastIn .3s ease;z-index:100}@keyframes toastIn{0%{opacity:0;transform:translate(-50%) translateY(8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.staff-container{width:calc(100% + 2 * var(--sp-4));margin-left:calc(-1 * var(--sp-4));margin-right:calc(-1 * var(--sp-4));padding:var(--sp-4) 0;background:var(--bg-surface);border-radius:var(--radius-lg);border:1px solid rgba(201,169,110,.1)}.staff-container svg text{fill:var(--text-secondary)!important}.staff-container svg line,.staff-container svg rect{stroke:var(--text-muted)!important}.staff-container svg path{stroke:var(--text-muted)!important;fill:var(--text-secondary)!important}.scroll-canvas{width:100%;border-radius:var(--radius-lg);background:var(--bg-surface);border:1px solid rgba(201,169,110,.1)}.scroll-score{font-family:var(--font-heading);font-size:var(--text-lg);color:var(--gold-light);font-weight:700}.scroll-answer-row,.scroll-accidental-row{display:flex;gap:var(--sp-2);justify-content:center}.scroll-answer-btn{flex:1;max-width:56px;min-width:48px;min-height:48px;border:1px solid rgba(201,169,110,.2);border-radius:var(--radius-md);background:var(--bg-elevated);color:var(--text-primary);font-size:var(--text-base);font-weight:600;cursor:pointer;transition:all var(--transition-fast);-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none}.scroll-answer-btn:active{background:#c9a96e26;border-color:var(--gold);transform:scale(.95)}.scroll-answer-btn-sharp{font-size:var(--text-sm);max-width:52px}.speed-control{display:flex;align-items:center;gap:var(--sp-1)}.speed-btn{width:28px;height:28px;border-radius:var(--radius-sm);border:1px solid rgba(201,169,110,.25);background:var(--bg-elevated);color:var(--text-primary);font-size:var(--text-base);font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:all var(--transition-fast);line-height:1}.speed-btn:active{background:#c9a96e26;transform:scale(.9)}.speed-display{font-family:var(--font-heading);font-size:var(--text-sm);color:var(--text-primary);font-weight:700;min-width:48px;text-align:center;font-variant-numeric:tabular-nums}.settings-page{display:flex;flex-direction:column;gap:var(--sp-6)}.settings-title{font-family:var(--font-heading);font-style:italic;font-size:var(--text-3xl);color:var(--gold-light);letter-spacing:-.02em;margin:0;text-align:center}.settings-section{display:flex;flex-direction:column;gap:var(--sp-3)}.settings-section-title{font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.12em;margin:0}.setting-card{padding:var(--sp-4) var(--sp-5)}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}.setting-info{display:flex;flex-direction:column;gap:2px}.setting-label{font-size:var(--text-sm);color:var(--text-primary);font-weight:500}.setting-desc{font-size:var(--text-xs);color:var(--text-muted)}.setting-control{display:flex;align-items:center;gap:var(--sp-2)}.stepper-btn{width:44px;height:44px;border-radius:var(--radius-sm);border:1px solid rgba(201,169,110,.2);background:none;color:var(--gold);font-size:var(--text-lg);cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}.stepper-btn:disabled{opacity:.3;cursor:default}.stepper-value{font-family:var(--font-heading);font-size:var(--text-xl);color:var(--text-primary);min-width:32px;text-align:center}.toggle-switch{position:relative;width:48px;height:28px;border-radius:14px;border:none;background:var(--bg-elevated);cursor:pointer;padding:2px;transition:background var(--transition-fast);-webkit-tap-highlight-color:transparent;flex-shrink:0}.toggle-on{background:var(--gold-muted)}.toggle-knob{display:block;width:24px;height:24px;border-radius:50%;background:var(--text-muted);transition:transform var(--transition-fast),background var(--transition-fast)}.toggle-on .toggle-knob{transform:translate(20px);background:var(--gold)}.clear-btn{margin-top:var(--sp-3);color:var(--error)!important;border-color:#c45c5c33!important}.confirm-row{margin-top:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-3)}.confirm-text{font-size:var(--text-sm);color:var(--error)}.confirm-actions{display:flex;gap:var(--sp-2)}.confirm-delete{background:var(--error)!important;color:#fff!important}:root{--bg-deep: #08080c;--bg-surface: #12121a;--bg-elevated: #1a1a28;--bg-hover: #222236;--gold: #c9a96e;--gold-light: #e8d5a3;--gold-muted: #8a7040;--gold-dim: #5a4a2e;--gold-glow: rgba(201, 169, 110, .15);--gold-glow-strong: rgba(201, 169, 110, .3);--text-primary: #f5f0e8;--text-secondary: #b8b0a0;--text-muted: #8a8478;--success: #4a9e6e;--success-glow: rgba(74, 158, 110, .2);--error: #c45c5c;--error-glow: rgba(196, 92, 92, .2);--info: #5c8ac4;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 20px;--sp-6: 24px;--sp-8: 32px;--sp-10: 40px;--sp-12: 48px;--sp-16: 64px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 20px;--radius-full: 9999px;--font-heading: "Playfair Display", Georgia, serif;--font-mono: "DM Mono", monospace;--font-body: "DM Mono", monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 2rem;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);--shadow-md: 0 4px 12px rgba(0, 0, 0, .5);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .6);--shadow-gold: 0 0 20px rgba(201, 169, 110, .15);--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .4s ease;--z-nav: 100;--z-modal: 200;--z-toast: 300}.glass{background:#12121ad9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.card{background:var(--bg-surface);border:1px solid rgba(201,169,110,.08);border-radius:var(--radius-md);padding:var(--sp-6);transition:border-color var(--transition-base),box-shadow var(--transition-base)}.card:hover{border-color:#c9a96e26;box-shadow:var(--shadow-gold)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:var(--radius-full)}:focus-visible{outline:2px solid var(--gold);outline-offset:2px}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes correctFlash{0%{box-shadow:0 0 0 0 var(--success-glow)}50%{box-shadow:0 0 20px 4px var(--success-glow)}to{box-shadow:0 0 0 0 var(--success-glow)}}@keyframes wrongShake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.animate-fade-in{animation:fadeIn var(--transition-base) ease forwards}.animate-correct{animation:correctFlash .6s ease}.animate-wrong{animation:wrongShake .4s ease}.audio-loading{text-align:center;padding:var(--sp-3) var(--sp-4);font-size:var(--text-sm);color:var(--gold);background:var(--bg-surface);border-radius:var(--radius-md);margin-bottom:var(--sp-4);animation:pulse 1.5s ease infinite}.audio-debug{text-align:center;padding:var(--sp-2) var(--sp-4);font-size:.7rem;color:var(--text-muted);background:var(--bg-surface);border-radius:var(--radius-sm);margin-bottom:var(--sp-3);cursor:pointer}.test-sound-btn{display:block;margin:var(--sp-2) auto;padding:var(--sp-2) var(--sp-6);background:var(--gold);color:var(--bg-deep);border:none;border-radius:var(--radius-sm);font-weight:700;font-size:var(--text-sm);cursor:pointer}.debug-log{text-align:left;font-size:.65rem;color:var(--text-muted);margin:var(--sp-2) 0 0;white-space:pre-wrap;word-break:break-all;max-height:200px;overflow-y:auto}.splash-screen{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:var(--bg-deep);-webkit-tap-highlight-color:transparent}.splash-content{display:flex;flex-direction:column;align-items:center;gap:var(--sp-6);padding:var(--sp-8)}.splash-icon{opacity:.7;animation:splash-glow 2.5s ease-in-out infinite}.splash-title{font-family:var(--font-heading);font-style:italic;font-size:var(--text-3xl);font-weight:600;color:var(--gold-light);letter-spacing:-.02em;margin:0;text-align:center}.splash-button{font-family:var(--font-body);font-size:var(--text-lg);font-weight:600;color:var(--bg-deep);background:linear-gradient(135deg,var(--gold),var(--gold-muted));border:none;border-radius:var(--radius-lg);padding:var(--sp-4) var(--sp-10);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:all .2s ease}.splash-button:hover{background:linear-gradient(135deg,var(--gold-light),var(--gold));box-shadow:var(--shadow-gold)}.splash-button:active{transform:scale(.97)}@keyframes splash-glow{0%,to{opacity:.5;filter:drop-shadow(0 0 8px var(--gold-glow))}50%{opacity:.9;filter:drop-shadow(0 0 20px var(--gold-glow-strong))}}