:root{color-scheme:light;--color-bg: #f7f3ff;--color-surface: #fffdf7;--color-surface-subtle: #eee7ff;--color-text: #1c1038;--color-text-muted: #675d7b;--color-border: #d9ccef;--color-primary: #4316bd;--color-primary-hover: #310b91;--color-primary-glow: #6c38ef;--color-primary-gradient: linear-gradient( 135deg, var(--color-primary), var(--color-primary-glow) );--color-on-primary: #ffffff;--color-accent: #ffc400;--color-accent-soft: #fff0a3;--color-audio: #e95509;--color-audio-glow: #ff8a1f;--color-audio-gradient: linear-gradient( 135deg, var(--color-audio), var(--color-audio-glow) );--color-on-audio: #211033;--color-success: #247556;--color-warning: #9b5b00;--color-error: #bd313d;--color-focus: #f0a900;--color-ink: #1c1038;--color-paper: #f7f3ff;--color-cobalt: #4316bd;--color-teal: #e95509;--color-orange: #ffc400;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--radius-sm: .75rem;--radius-md: 1rem;--radius-lg: 1.35rem;--shadow-raised: 0 18px 44px color-mix(in srgb, var(--color-primary) 16%, transparent);--shadow-ink: 0 10px 28px color-mix(in srgb, var(--color-text) 10%, transparent);--grid-size: 24px;--duration-fast: .12s;--duration-normal: .18s;--duration-slow: .24s;--duration-enter: .24s;--duration-spectrum: 80ms;--ease-out: cubic-bezier(.22, 1, .36, 1);--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-display: "Bricolage Grotesque", var(--font-sans);--font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;--text-xs: .75rem;--text-sm: .875rem;--text-body: 1rem;--text-lg: 1.125rem}[data-theme=dark]{color-scheme:dark;--color-bg: #100329;--color-surface: #1d0b42;--color-surface-subtle: #2b125c;--color-text: #fff9df;--color-text-muted: #c7b9dd;--color-border: #493072;--color-primary: #ffd21a;--color-primary-hover: #ffe05a;--color-primary-glow: #ff9d0a;--color-primary-gradient: linear-gradient( 135deg, var(--color-primary-glow), var(--color-primary) );--color-on-primary: #211033;--color-accent: #ff7a00;--color-accent-soft: #522907;--color-audio: #ff7a18;--color-audio-glow: #ffb12b;--color-audio-gradient: linear-gradient( 135deg, var(--color-audio-glow), var(--color-audio) );--color-on-audio: #0f172a;--color-success: #8bd8a7;--color-warning: #ffd166;--color-error: #ff8d94;--color-focus: #ffd21a;--color-ink: #fff9df;--color-paper: #100329;--color-cobalt: #ffd21a;--color-teal: #ff7a18;--color-orange: #ff9d0a}@font-face{font-family:Bricolage Grotesque;font-style:normal;font-weight:500 700;font-stretch:100%;font-display:swap;src:url(./bricolage-grotesque-latin-C23fTOVi.woff2) format("woff2")}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh}body{background:radial-gradient(circle at 12% 0%,color-mix(in srgb,var(--color-primary) 14%,transparent),transparent 28rem),radial-gradient(circle at 92% 12%,color-mix(in srgb,var(--color-accent) 16%,transparent),transparent 24rem),var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:var(--text-body);line-height:1.5;-webkit-font-smoothing:antialiased}body:after{display:none}h1,h2,h3{margin:0 0 var(--space-3)}h1{font-size:clamp(2.15rem,5vw,3.6rem);font-weight:750;line-height:1.02;letter-spacing:-.045em}h2{font-size:clamp(1.3rem,2vw,1.55rem);font-weight:700;letter-spacing:-.025em}h3{font-size:1.0625rem;font-weight:650}h1,h2,h3,.music-answer,.degree-btn,.stat-card .value{font-family:var(--font-display);letter-spacing:-.01em}p{margin:0 0 var(--space-3)}a{color:var(--color-primary)}button{font-family:inherit}:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.app-shell{width:min(100%,1380px);margin:0 auto;padding:0 var(--space-5) calc(76px + env(safe-area-inset-bottom));position:relative}@media (min-width: 600px){.app-shell{padding-left:var(--space-6);padding-right:var(--space-6)}}@media (min-width: 1024px){.app-shell{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:clamp(var(--space-8),5vw,4.5rem);padding:0 clamp(var(--space-6),4vw,var(--space-12)) var(--space-10)}.app-shell>.app-header{grid-column:2}.app-shell>.app-main{grid-column:2;padding-bottom:0}}.app-header{height:76px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);border-bottom:1px solid color-mix(in srgb,var(--color-border) 72%,transparent)}@media (min-width: 1024px){.app-header{height:64px}}.app-header .brand{display:inline-flex;align-items:center;gap:var(--space-3);font-family:var(--font-display);font-size:1.05rem;font-weight:750;letter-spacing:-.025em;text-transform:lowercase;text-decoration:none;color:var(--color-text)}.brand-mark{position:relative;display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;border:1px solid color-mix(in srgb,var(--color-accent) 52%,transparent);border-radius:50%;color:#fff;background:#16043d;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 10%,transparent),0 7px 18px color-mix(in srgb,var(--color-primary) 30%,transparent);object-fit:cover}.brand-mark>svg:first-child{transform:translate(-1px)}.brand-mark-wave{position:absolute;right:-5px;bottom:-3px;padding:2px;border-radius:999px;color:var(--color-audio);background:var(--color-surface)}.app-header>a:last-child{display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:42px;color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:999px;background:color-mix(in srgb,var(--color-surface) 82%,transparent)}.app-header>a:last-child:hover{color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 35%,var(--color-border));background:var(--color-surface-subtle)}.app-main{min-width:0;padding-bottom:var(--space-6)}.network-status,.update-ready{position:fixed;right:var(--space-4);bottom:calc(var(--space-4) + env(safe-area-inset-bottom));z-index:30;display:flex;align-items:center;gap:var(--space-3);max-width:min(92vw,420px);padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);box-shadow:var(--shadow-raised);font-size:var(--text-sm)}.network-status.offline{color:var(--color-error);border-color:color-mix(in srgb,var(--color-error) 45%,var(--color-border))}.network-status.online{color:var(--color-success)}.update-ready{bottom:calc(var(--space-4) + env(safe-area-inset-bottom) + 52px)}.page{width:100%;max-width:960px;margin:0 auto;padding:clamp(var(--space-8),6vw,4.5rem) 0}.page-session{max-width:760px}.editorial-header{margin-bottom:clamp(var(--space-6),4vw,var(--space-10));padding:0}.editorial-header-copy{position:relative;z-index:1}.editorial-kicker{color:var(--color-primary);font-size:.7rem;font-weight:750;letter-spacing:.18em;line-height:1.2;margin-bottom:var(--space-2);text-transform:uppercase}.editorial-header h1{max-width:20ch;margin-bottom:var(--space-2);text-wrap:balance}.editorial-description{max-width:58ch;color:var(--color-text-muted);margin:0;font-size:var(--text-lg);line-height:1.55}[data-theme=dark] body:after{mix-blend-mode:screen;opacity:.08}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:46px;padding:0 var(--space-5);border-radius:.8rem;border:1px solid transparent;font-size:var(--text-body);font-weight:650;cursor:pointer;transition:background-color var(--duration-fast) ease,border-color var(--duration-fast) ease,color var(--duration-fast) ease,box-shadow var(--duration-fast) ease,transform var(--duration-fast) var(--ease-out);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-primary-gradient);color:var(--color-on-primary);box-shadow:0 8px 20px color-mix(in srgb,var(--color-primary) 24%,transparent)}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,var(--color-primary-hover),var(--color-primary));box-shadow:0 12px 26px color-mix(in srgb,var(--color-primary) 30%,transparent);transform:translateY(-1px)}.btn-secondary{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border);box-shadow:0 1px 2px color-mix(in srgb,var(--color-text) 5%,transparent)}.btn-secondary:hover:not(:disabled){background:var(--color-surface-subtle);border-color:var(--color-primary)}.btn-ghost{background:transparent;color:var(--color-primary);box-shadow:none}.btn-ghost:hover:not(:disabled){background:var(--color-surface-subtle);box-shadow:none}.btn-audio{background:var(--color-audio);color:var(--color-on-audio)}.btn-audio.playing{animation:transport-pulse 1.2s var(--ease-out) infinite}@keyframes transport-pulse{0%{box-shadow:0 0 color-mix(in srgb,var(--color-audio) 45%,transparent)}70%{box-shadow:0 0 0 14px transparent}to{box-shadow:0 0 0 0 transparent}}.btn-block{width:100%}.btn-listen{width:88px;height:88px;min-height:88px;border-radius:50%;font-size:var(--text-sm);padding:0;position:relative}.spectrum{display:flex;align-items:flex-end;gap:3px;height:48px;width:min(320px,100%);margin-top:var(--space-4)}.spectrum-bar{flex:1;height:100%;border-radius:2px;background:var(--color-audio-gradient);transform:scaleY(.06);transform-origin:bottom;transition:transform var(--duration-spectrum) linear}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:clamp(var(--space-5),3vw,var(--space-6));margin-bottom:var(--space-4);position:relative;overflow:hidden;transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.card:hover{border-color:var(--color-border)}.card:after{display:none}.card-featured{border-color:color-mix(in srgb,var(--color-primary) 34%,var(--color-border))}.card-featured:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--color-accent),var(--color-audio),var(--color-primary))}.card-clickable{cursor:pointer;text-align:left;width:100%;font:inherit;color:inherit;transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-normal) var(--ease-out),transform var(--duration-normal) var(--ease-out)}.card-clickable:hover{border-color:color-mix(in srgb,var(--color-primary) 45%,var(--color-border));box-shadow:var(--shadow-ink);transform:translateY(-3px)}.card-clickable:active{transform:translateY(0)}.muted{color:var(--color-text-muted)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.text-sm{font-size:var(--text-sm)}.tabular{font-variant-numeric:tabular-nums}.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:calc(72px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:color-mix(in srgb,var(--color-surface) 92%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-top:1px solid var(--color-border);display:flex;z-index:10}.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:var(--text-xs);text-decoration:none;color:var(--color-text-muted)}.bottom-nav a.active{color:var(--color-primary);font-weight:700}.bottom-nav a svg,.side-rail a svg{transition:transform var(--duration-fast) var(--ease-out)}.bottom-nav a.active svg,.side-rail a.active svg{transform:scale(1.08)}.side-rail{display:none}@media (min-width: 1024px){.bottom-nav{display:none}.side-rail{position:sticky;top:0;grid-column:1;grid-row:1 / span 2;display:flex;flex-direction:column;gap:var(--space-2);height:fit-content}.side-rail a{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-2);font-size:var(--text-xs);text-decoration:none;color:var(--color-text-muted);border:1px solid transparent;border-radius:var(--radius-md)}.side-rail a.active{color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 18%,transparent);background:color-mix(in srgb,var(--color-primary) 9%,var(--color-surface));box-shadow:0 8px 20px color-mix(in srgb,var(--color-primary) 9%,transparent);font-weight:700}}.progressbar{height:8px;border-radius:999px;background:var(--color-surface-subtle);overflow:hidden}.progressbar>div{height:100%;background:var(--color-primary-gradient);transition:width var(--duration-normal) var(--ease-out)}.progress-label{font-family:var(--font-display);font-weight:600}.segmented{display:inline-flex;flex-wrap:wrap;border:1px solid var(--color-border);border-radius:.85rem;overflow:hidden}.segmented label{padding:var(--space-2) var(--space-4);min-height:44px;display:inline-flex;align-items:center;cursor:pointer;border-right:1px solid var(--color-border)}.segmented label:last-child{border-right:none}.segmented input{position:absolute;opacity:0}.segmented label.checked{background:var(--color-primary-gradient);color:var(--color-on-primary);font-weight:600}@media (max-width: 560px){.setup-page .segmented{display:grid;width:100%}.setup-page .segmented-2{grid-template-columns:repeat(2,minmax(0,1fr))}.setup-page .segmented-3{grid-template-columns:repeat(3,minmax(0,1fr))}.setup-page .segmented-4{grid-template-columns:repeat(4,minmax(0,1fr))}.setup-page .segmented label{justify-content:center;min-width:0;padding:var(--space-2);text-align:center;text-wrap:pretty;overflow-wrap:normal;word-break:normal}.setup-page .segmented label:last-child{border-right:none}.setup-page .segmented-long{grid-template-columns:minmax(0,1fr)}.setup-page .segmented-long label{justify-content:flex-start;padding-inline:var(--space-4);border-right:none;border-bottom:1px solid var(--color-border);text-align:left}.setup-page .segmented-long label:last-child{border-bottom:none}}@media (max-width: 560px){.progress-range .segmented{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}.progress-range .segmented label{justify-content:center;min-width:0;padding-inline:var(--space-2);text-align:center;font-size:var(--text-xs)}.progress-range .segmented label:nth-child(3n){border-right:none}}.check-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}.check-chip{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-4);border:1px solid var(--color-border);border-radius:999px;cursor:pointer;background:var(--color-surface)}.check-chip.checked{border-color:var(--color-primary);background:var(--color-surface-subtle);font-weight:600}.check-chip input{accent-color:var(--color-primary)}.field{margin-bottom:var(--space-4)}.field>label{display:block;font-weight:600;margin-bottom:var(--space-2)}.field-error{color:var(--color-error);font-size:var(--text-sm);margin-top:var(--space-1)}.custom-progression{margin-bottom:var(--space-3);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-subtle)}.custom-progression-sequence,.custom-progression-options{flex-wrap:wrap}.custom-progression-sequence{min-height:44px;margin:var(--space-2) 0}input[type=number],select{min-height:44px;padding:0 var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:var(--text-body)}.slider-row{display:flex;align-items:center;gap:var(--space-3)}.slider-row input[type=range]{flex:1;accent-color:var(--color-primary)}.setup-page>.muted:first-of-type{margin-bottom:var(--space-6)}.setup-page .card>.field:last-child,.setup-page .card>fieldset:last-child{margin-bottom:0}.setup-primary-actions{align-items:stretch;margin:var(--space-5) 0 var(--space-6)}.setup-primary-actions .btn{min-width:10rem}@media (max-width: 560px){.setup-primary-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.setup-primary-actions .btn{min-width:0;width:100%;padding-inline:var(--space-3)}}.session-answer-row{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-4) 0}.rhythm-pad{display:grid;gap:var(--space-2);justify-items:start;margin-top:var(--space-3)}.rhythm-pad-target{align-items:center;background:var(--color-surface-subtle);border:2px solid var(--color-audio);border-radius:var(--radius-md);color:var(--color-text);display:inline-flex;font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;justify-content:center;min-height:64px;min-width:min(100%,280px);padding:0 var(--space-5);touch-action:manipulation;transition:background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.rhythm-pad-target:hover:not(:disabled){border-color:var(--color-primary);box-shadow:var(--shadow-ink)}.rhythm-pad-target:active:not(:disabled){background:color-mix(in srgb,var(--color-audio) 14%,var(--color-surface));transform:scale(.98)}.rhythm-pad-target:disabled{cursor:not-allowed;opacity:.55}.about-section{margin-bottom:var(--space-6)}.about-identity{padding:var(--space-6) 0}.about-mark{align-items:center;background:var(--color-surface-subtle);border:2px solid var(--color-primary);display:flex;height:80px;justify-content:center;margin-bottom:var(--space-4);width:80px}.about-app-name{font-size:var(--text-xl);margin-bottom:var(--space-2)}.about-heading{gap:var(--space-2)}.about-list,.about-technologies{font-size:var(--text-sm);margin-top:var(--space-3)}.about-technologies{display:flex;flex-wrap:wrap;gap:var(--space-2)}.degree-btn{min-width:64px;min-height:56px;padding:0 var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);font-size:var(--text-lg);font-weight:700;cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.degree-btn:hover:not(:disabled){border-color:var(--color-primary)}.degree-btn:active:not(:disabled){transform:scale(.97)}.degree-btn.selected{background:var(--color-primary);color:var(--color-on-primary);border-color:var(--color-primary)}.degree-btn.slot-correct{border-color:var(--color-success);box-shadow:inset 0 0 0 2px var(--color-success);animation:slot-in .2s var(--ease-out) backwards;animation-delay:calc(var(--slot-index, 0) * 40ms)}.degree-btn.slot-incorrect{border-color:var(--color-error);box-shadow:inset 0 0 0 2px var(--color-error);animation:slot-in .2s var(--ease-out) backwards;animation-delay:calc(var(--slot-index, 0) * 40ms)}@keyframes slot-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.music-answer{font-size:clamp(28px,8vw,48px);font-weight:700;line-height:1.2}.feedback-panel{border-radius:var(--radius-md);padding:var(--space-4);margin-top:var(--space-4);animation:fade-in var(--duration-slow) var(--ease-out)}.feedback-panel.correct{background:color-mix(in srgb,var(--color-success) 12%,transparent);border:1px solid var(--color-success);animation:fade-in var(--duration-slow) var(--ease-out),feedback-pop var(--duration-slow) var(--ease-out)}.feedback-panel.incorrect{background:color-mix(in srgb,var(--color-error) 10%,transparent);border:1px solid var(--color-error)}@media (prefers-reduced-motion: no-preference){.feedback-panel.incorrect{animation:fade-in var(--duration-slow) var(--ease-out),feedback-shake .24s var(--ease-out)}}@keyframes feedback-pop{0%{transform:scale(.98)}to{transform:scale(1)}}@keyframes feedback-shake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}50%{transform:translate(3px)}75%{transform:translate(-2px)}}@keyframes fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}.dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;display:flex;align-items:center;justify-content:center;padding:var(--space-4);z-index:50}.dialog{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-6);max-width:420px;width:100%}.dialog-actions{display:flex;justify-content:flex-end;gap:var(--space-3);margin-top:var(--space-6)}.tabs{display:flex;gap:var(--space-1);overflow-x:auto;border-bottom:1px solid var(--color-border);margin-bottom:var(--space-4)}.tabs button{min-height:44px;padding:0 var(--space-4);background:none;border:none;border-bottom:2px solid transparent;color:var(--color-text-muted);font-size:var(--text-sm);font-weight:600;cursor:pointer;white-space:nowrap}.tabs button[aria-selected=true]{color:var(--color-primary);border-bottom-color:var(--color-primary)}@media (max-width: 600px){.tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow-x:visible}.tabs button{width:100%;padding-inline:var(--space-2);text-align:center}}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-4);margin-bottom:var(--space-4)}.stat-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4)}.stat-card .value{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;margin-bottom:var(--space-1)}.stat-card-icon{color:var(--color-primary);margin-bottom:var(--space-2)}.stat-card-icon svg{width:22px;height:22px}.table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}.table th,.table td{text-align:left;padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-border)}.empty-state{text-align:center;color:var(--color-text-muted);padding:var(--space-10) var(--space-4)}.skeleton{border-radius:var(--radius-md);background:linear-gradient(90deg,var(--color-surface-subtle),var(--color-border),var(--color-surface-subtle));background-size:200% 100%;animation:shimmer 1.2s infinite;height:16px;margin-bottom:var(--space-3)}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}.row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}.stack{display:flex;flex-direction:column;gap:var(--space-3)}.center{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center}.question-card{animation:question-in var(--duration-enter) var(--ease-out)}@keyframes question-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.card-hero{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--color-primary) 22%,var(--color-border));background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 10%,var(--color-surface)),var(--color-surface) 72%),var(--color-surface);box-shadow:0 16px 38px color-mix(in srgb,var(--color-primary) 10%,transparent)}.badge{display:inline-flex;align-items:center;gap:var(--space-1);min-height:24px;padding:0 var(--space-2);border-radius:999px;font-size:var(--text-xs);font-weight:650;border:1px solid var(--color-border);background:var(--color-surface-subtle);color:var(--color-text-muted)}.badge-success{border-color:var(--color-success);color:var(--color-success);background:color-mix(in srgb,var(--color-success) 10%,transparent)}.badge-warning{border-color:var(--color-warning);color:var(--color-warning);background:color-mix(in srgb,var(--color-warning) 10%,transparent)}.badge-error{border-color:var(--color-error);color:var(--color-error);background:color-mix(in srgb,var(--color-error) 10%,transparent)}.badge-audio{border-color:var(--color-audio);color:var(--color-audio);background:color-mix(in srgb,var(--color-audio) 12%,transparent)}.onboarding-progress{display:flex;gap:var(--space-2);margin-bottom:var(--space-6)}.onboarding-progress span{flex:1;height:4px;border-radius:999px;background:var(--color-surface-subtle);transition:background-color var(--duration-normal) var(--ease-out)}.onboarding-progress span.done{background:var(--color-primary-gradient)}@media (max-width: 560px){.onboarding-language-control .segmented{display:grid;grid-template-columns:minmax(0,1fr);width:100%}.onboarding-language-control .segmented label{justify-content:flex-start;min-width:0;padding-inline:var(--space-4);border-right:none;border-bottom:1px solid var(--color-border);text-align:left}.onboarding-language-control .segmented label:last-child{border-bottom:none}}.track-accent{border-left:3px solid var(--track-color, var(--color-primary));padding-left:var(--space-3)}.track-icon{color:var(--track-color, var(--color-primary))}.track-heading{display:flex;align-items:center;gap:var(--space-2);text-transform:uppercase}.track-fundamentos{--track-color: var(--color-primary)}.track-graus{--track-color: var(--color-audio)}.track-acordes{--track-color: var(--color-success)}.track-progressoes{--track-color: var(--color-warning)}.empty-art{color:var(--color-border);margin:0 auto var(--space-4);width:72px;height:72px}.segmented label{transition:background-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}.check-chip{transition:border-color var(--duration-fast) var(--ease-out),background-color var(--duration-fast) var(--ease-out)}.check-chip:active{transform:scale(.97)}.session-title{font-size:1.25rem;font-weight:700;margin:0}.h2-sm{font-size:1rem}.text-error{color:var(--color-error)}.text-success{color:var(--color-success)}.mt-4{margin-top:var(--space-4)}.session-transport-gap{margin:var(--space-6) 0}.feedback-title{display:flex;align-items:center;gap:var(--space-2);font-size:1.125rem;margin-bottom:var(--space-2)}.skill-meter{display:flex;align-items:center;gap:var(--space-2);min-width:140px}.skill-meter-bar{flex:1;height:6px;border-radius:999px;background:var(--color-surface-subtle);overflow:hidden}.skill-meter-bar:after{content:"";display:block;height:100%;width:100%;background:var(--color-primary-gradient);border-radius:inherit}.disclosure-btn{width:100%;background:none;border:none;font:inherit;font-weight:650;cursor:pointer;color:inherit;padding:0}.disclosure-chevron{transition:transform var(--duration-fast) var(--ease-out)}.disclosure-chevron.open{transform:rotate(180deg)}.field-reset{border:none;margin:0;padding:0}.slider-value{width:5.5rem}.field-full{width:100%;min-height:44px}.mb-2{margin-bottom:var(--space-2)}.mt-8{margin-top:var(--space-8)}.skeleton-50{width:50%}.skeleton-70{width:70%}.skeleton-40{width:40%}.settings-instrument-description{margin-bottom:var(--space-3)}.instrument-list{display:flex;flex-direction:column;gap:var(--space-2)}.instrument-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface)}.instrument-row.selected{border:2px solid var(--color-primary);background:var(--color-surface-subtle)}.instrument-copy{min-width:0}.instrument-status{display:block;margin-top:var(--space-1)}.instrument-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2)}.instrument-action{min-height:40px;padding:var(--space-2) var(--space-3)}.settings-page>h1{margin-bottom:var(--space-8)}.settings-page>.card{margin-bottom:var(--space-5)}.settings-page>.btn-ghost{margin-top:var(--space-2)}@media (max-width: 560px){.settings-page .settings-language-control .segmented{grid-template-columns:minmax(0,1fr)}.settings-page .settings-language-control .segmented label{justify-content:flex-start;padding-inline:var(--space-4);border-right:none;border-bottom:1px solid var(--color-border);font-size:var(--text-body);text-align:left}.settings-page .settings-language-control .segmented label:last-child{border-bottom:none}.settings-page .segmented{display:grid;grid-template-columns:1.4fr .85fr .75fr;width:100%}.settings-page .segmented label{justify-content:center;min-width:0;padding-inline:var(--space-2);font-size:.8rem;text-align:center}.settings-page .segmented label:last-child{border-right:none}.instrument-row{align-items:stretch;flex-direction:column}.instrument-actions{justify-content:stretch}.instrument-actions .btn{flex:1}}.virtual-keyboard{position:relative;display:inline-block;width:100%;max-width:640px;user-select:none;-webkit-user-select:none;touch-action:none}.virtual-keys{position:relative;display:flex;height:160px;border-radius:var(--radius-md);overflow:hidden;background:var(--color-surface-subtle)}.white-key{flex:1;height:100%;border:none;border-right:1px solid var(--color-border);background:var(--color-surface);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:var(--space-2);font-size:var(--text-xs);color:var(--color-text-muted);transition:background-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.white-key:last-child{border-right:none}.white-key:active:not(:disabled),.white-key.active{background:var(--color-primary-glow);box-shadow:inset 0 -2px 0 var(--color-primary)}.white-key.highlighted{background:color-mix(in srgb,var(--color-success) 25%,var(--color-surface));border-color:var(--color-success)}.black-key{position:absolute;top:0;width:60%;height:60%;z-index:2;border:none;border-radius:0 0 var(--radius-sm) var(--radius-sm);background:var(--color-text);color:var(--color-surface);cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:var(--space-2);font-size:var(--text-xs);transition:background-color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.black-key:active:not(:disabled),.black-key.active{background:var(--color-primary-glow);transform:scaleY(.98)}.black-key.highlighted{background:var(--color-success)}.note-label{opacity:.7;line-height:1}.note-label sub{font-size:.7em;opacity:.6}.white-key:after,.black-key:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;opacity:0;background:radial-gradient(circle at 50% 80%,rgba(255,255,255,.2),transparent 60%);pointer-events:none;transition:opacity .1s}.white-key:active:after,.black-key:active:after{opacity:1}.fretboard{display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;background:var(--color-surface-subtle);user-select:none;-webkit-user-select:none;touch-action:none}.fretboard-strings{display:flex;flex-direction:column}.fretboard-string{display:flex;align-items:stretch;border-bottom:1px solid var(--color-border)}.fretboard-string:last-child{border-bottom:none}.fretboard-string-label{width:48px;min-height:44px;display:flex;align-items:center;justify-content:center;background:var(--color-surface);border-right:1px solid var(--color-border);font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted);flex-shrink:0}.fretboard-frets{display:flex}.fret{min-width:40px;height:44px;border-right:2px solid var(--color-border);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:background-color var(--duration-fast) var(--ease-out)}.fret:last-child{border-right:none}.fret:hover{background:var(--color-surface-subtle)}.fret:active{background:color-mix(in srgb,var(--color-primary) 15%,transparent)}.fret.highlighted{background:color-mix(in srgb,var(--color-success) 25%,var(--color-surface-subtle))}.fret .fret-marker{width:12px;height:12px;border-radius:50%;background:var(--color-border)}.fret.highlighted .fret-marker{background:var(--color-success)}.fretboard-fret-numbers{display:flex;border-left:49px}.fret-number{min-width:40px;height:24px;display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);color:var(--color-text-muted);border-right:2px solid var(--color-border)}.sr-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);text-align:center;animation:card-pop var(--duration-slow) var(--ease-out)}@keyframes card-pop{0%{opacity:0;transform:scale(.95) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}.sr-card-question{font-size:var(--text-body);margin-bottom:var(--space-4)}.sr-card-mastery{display:flex;align-items:center;gap:var(--space-2);justify-content:center;margin-bottom:var(--space-3)}.sr-card-schedule{font-size:var(--text-sm);color:var(--color-text-muted)}.sr-empty{text-align:center;padding:var(--space-10) var(--space-4);color:var(--color-text-muted)}.sr-queue-list{display:flex;flex-direction:column;gap:var(--space-3)}.sr-queue-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--duration-fast) var(--ease-out)}.sr-queue-item:hover{border-color:var(--color-primary)}.confusion-matrix{width:100%;border-collapse:collapse;font-size:var(--text-sm)}.confusion-matrix th,.confusion-matrix td{padding:var(--space-2) var(--space-3);text-align:center;border:1px solid var(--color-border)}.confusion-matrix th{background:var(--color-surface-subtle);font-weight:600}.confusion-matrix td{background:var(--color-surface)}.confusion-matrix td.highlight{background:color-mix(in srgb,var(--color-error) 20%,var(--color-surface))}.confusion-matrix td.zero{opacity:.3}.editorial-kicker{color:var(--color-primary);font-family:var(--font-display);font-size:.7rem;font-weight:750;letter-spacing:.12em;margin-bottom:var(--space-2);text-transform:uppercase}.learning-next-card,.practice-lab-card{align-items:flex-start;display:flex;gap:var(--space-5);justify-content:space-between;overflow:hidden;position:relative;box-shadow:0 14px 34px color-mix(in srgb,var(--color-text) 7%,transparent)}.learning-next-copy{max-width:48ch}.learning-next-copy h2{margin-bottom:var(--space-2)}.learning-step-number{color:var(--color-primary);font-family:var(--font-display);font-size:1.4em}.learning-progress-mark{align-items:baseline;color:var(--color-primary);display:flex;font-family:var(--font-display);gap:var(--space-1);line-height:1;margin-top:0;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-primary) 8%,var(--color-surface));white-space:nowrap}.learning-progress-mark strong{font-size:3.25rem;letter-spacing:-.08em}.learning-progress-mark span{font-size:1.1rem}.learning-trail{margin-top:var(--space-8)}.learning-families{display:grid;gap:var(--space-7);margin-top:var(--space-5)}.learning-family{border-left:2px solid var(--color-border);padding-left:var(--space-5)}.learning-family-fundamentals{border-color:var(--color-primary)}.learning-family-harmony{border-color:var(--color-audio)}.learning-family-melody{border-color:var(--color-accent)}.learning-family-rhythm{border-color:var(--color-success)}.learning-family-heading{align-items:end;display:flex;justify-content:space-between}.learning-family-heading h3{margin:0}.learning-family-heading .editorial-kicker{margin-bottom:var(--space-1)}.learning-family .learning-timeline{margin-top:var(--space-3)}.learning-timeline{list-style:none;margin:var(--space-5) 0 0;padding:0 0 0 var(--space-6);position:relative}.learning-timeline:before{background:var(--color-border);bottom:var(--space-5);content:"";left:15px;position:absolute;top:var(--space-5);width:2px}.learning-step{position:relative}.learning-step-marker{align-items:center;background:var(--color-bg);border:2px solid var(--color-border);border-radius:50%;color:var(--color-text-muted);display:flex;font-family:var(--font-display);font-weight:750;height:32px;justify-content:center;left:-41px;position:absolute;top:var(--space-5);width:32px;z-index:1}.learning-step-mastered .learning-step-marker{background:var(--color-success);border-color:var(--color-success);color:#fff}.learning-step-training .learning-step-marker,.learning-step-next .learning-step-marker{border-color:var(--color-primary);color:var(--color-primary)}.learning-step>.card{margin-bottom:var(--space-4);box-shadow:0 5px 16px color-mix(in srgb,var(--color-text) 5%,transparent)}.learning-step-heading{align-items:flex-start;gap:var(--space-3)}.learning-step-heading h3{margin-bottom:0}.learning-step-meta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4)}.learning-step-meta span:first-child{color:var(--color-primary);font-weight:650}.mode-bridge{align-items:center;border-top:1px solid var(--color-border);display:flex;gap:var(--space-4);justify-content:space-between;margin-top:var(--space-8);padding-top:var(--space-5)}.mode-bridge strong{display:block}.practice-lab-mark{align-items:center;background:color-mix(in srgb,var(--color-audio) 11%,var(--color-surface));border-radius:var(--radius-md);color:var(--color-audio);display:flex;flex:0 0 auto;height:56px;padding:var(--space-3);width:56px}.practice-lab-card .practice-lab-mark{margin:var(--space-2) var(--space-2) 0 0}.practice-search{margin:0}.practice-controls{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);display:grid;gap:var(--space-3);margin:var(--space-6) 0;padding:var(--space-4);box-shadow:0 8px 24px color-mix(in srgb,var(--color-text) 5%,transparent)}.practice-filter-grid{display:grid;gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr))}.practice-results-heading{margin-bottom:var(--space-5)}.practice-result-mark{color:var(--color-primary);font-family:var(--font-display);font-size:2rem;font-weight:750}.practice-families{display:grid;gap:var(--space-8)}.practice-family{border-top:1px solid var(--color-border);padding-top:var(--space-5)}.practice-family-fundamentals{border-color:var(--color-primary)}.practice-family-harmony{border-color:var(--color-audio)}.practice-family-melody{border-color:var(--color-accent)}.practice-family-rhythm{border-color:var(--color-success)}.practice-family-heading{align-items:center;display:flex;justify-content:space-between}.practice-family-heading h3{margin:0}.practice-family-heading p{margin:var(--space-1) 0 0}.practice-grid{display:grid;gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--space-4)}.practice-tile{display:flex;flex-direction:column;margin-bottom:0;min-height:280px;box-shadow:0 6px 18px color-mix(in srgb,var(--color-text) 5%,transparent)}.practice-tile-icon{align-items:center;background:color-mix(in srgb,var(--color-primary) 12%,transparent);border-radius:.8rem;color:var(--color-primary);display:flex;height:40px;justify-content:center;margin-bottom:var(--space-3);width:40px}.practice-tile h3{margin-bottom:var(--space-2)}.practice-tile h4{font-family:var(--font-display);font-size:var(--text-lg);margin:0}.practice-tile-heading{align-items:start;display:flex;gap:var(--space-2);justify-content:space-between}.practice-difficulty{color:var(--color-primary);font-size:var(--text-xs);font-weight:700;text-align:right}.practice-tile .btn{margin-top:auto;width:100%}.practice-configurable{color:var(--color-audio);font-weight:650;margin-top:auto;padding:var(--space-2) 0 var(--space-3)}.practice-presets{margin-top:var(--space-8)}.preset-row{margin-top:var(--space-3)}.preset-transfer-card{display:grid;gap:var(--space-3);margin-top:var(--space-4)}.preset-transfer-card h3{margin-bottom:var(--space-1)}.preset-transfer-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}.preset-transfer-status{border-left:3px solid var(--color-audio);margin:0;padding-left:var(--space-2)}.preset-transfer-status-error{border-color:var(--color-accent)}.preset-row .row{flex-wrap:wrap;justify-content:flex-end}@media (max-width: 640px){.preset-row .row-between{align-items:stretch;flex-direction:column;gap:var(--space-3)}.preset-row .row{justify-content:flex-start}}.home-learning-card{margin-top:var(--space-3)}.home-recommendation-card,.home-retention-card{margin-top:var(--space-4)}.home-recommendation-card{border-color:color-mix(in srgb,var(--color-audio) 28%,var(--color-border));background:linear-gradient(135deg,color-mix(in srgb,var(--color-audio) 7%,var(--color-surface)),var(--color-surface) 72%)}.home-retention-card{background:var(--color-surface)}.retention-streak{color:var(--color-primary);font-family:var(--font-display);font-size:var(--text-sm);font-weight:700}.retention-goal{margin-top:var(--space-4)}.retention-goal-track{accent-color:var(--color-primary);display:block;height:10px;margin-top:var(--space-2);width:100%}.lesson-page{max-width:900px}.lesson-back{margin-bottom:var(--space-4)}.lesson-concept-card{border-color:color-mix(in srgb,var(--color-primary) 30%,var(--color-border))}.lesson-concept-copy{font-size:var(--text-lg);line-height:1.55;max-width:65ch}.lesson-principle{border-top:1px solid var(--color-border);display:grid;gap:var(--space-1);margin-top:var(--space-5);padding-top:var(--space-4)}.lesson-examples{margin-top:var(--space-8)}.lesson-section-heading{align-items:flex-end;gap:var(--space-4)}.lesson-section-heading .spectrum{flex:0 0 150px;margin:0}.lesson-example-grid{display:grid;gap:var(--space-3);grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--space-4)}.lesson-example-card{display:flex;flex-direction:column;margin:0}.lesson-example-card.card-clickable:disabled{cursor:wait}.lesson-example-card.card-clickable:disabled:hover{border-color:var(--color-border);box-shadow:none;transform:none}.lesson-example-card-playing{border-color:color-mix(in srgb,var(--color-audio) 55%,var(--color-border))}.lesson-example-number{color:var(--color-audio);font-family:var(--font-display);font-size:var(--text-sm);font-weight:750;letter-spacing:.12em}.lesson-example-card h3{margin:var(--space-2) 0}.lesson-takeaway{border-left:2px solid var(--color-audio);margin-top:auto;padding-left:var(--space-3)}.lesson-example-card>.btn{align-self:stretch;margin-top:var(--space-4)}.lesson-practice-card{align-items:center;border-color:color-mix(in srgb,var(--color-primary) 30%,var(--color-border));display:flex;gap:var(--space-5);justify-content:space-between;margin-top:var(--space-8)}.lesson-guided-copy{color:var(--color-primary);font-size:var(--text-sm);font-weight:650;margin-top:var(--space-3)}.lesson-next-link{margin-top:var(--space-4)}.spaced-loading{margin:var(--space-4) 0}.sr-item-copy{min-width:0}.sr-queue-item{flex-wrap:wrap;gap:var(--space-3)}.sr-queue-item .skill-meter{flex:1 1 150px}.sr-item-label{font-family:var(--font-display);font-weight:700}.sr-progress{accent-color:var(--color-primary);min-width:110px}.spaced-refresh{margin-top:var(--space-4)}@media (max-width: 560px){.learning-next-card,.practice-lab-card{flex-direction:column}.learning-progress-mark{align-self:flex-start;margin-top:var(--space-2)}.practice-grid{grid-template-columns:1fr}.learning-next-card .btn,.lesson-practice-card .btn,.card-hero .btn{width:100%}.practice-filter-grid{grid-template-columns:1fr}.practice-tile-heading{display:block}.practice-difficulty{display:block;margin-top:var(--space-1);text-align:left}.lesson-example-grid{grid-template-columns:1fr}.lesson-practice-card,.lesson-section-heading{align-items:flex-start;flex-direction:column}.lesson-section-heading .spectrum{flex-basis:auto;width:100%}.mode-bridge{align-items:flex-start;flex-direction:column}}