:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ink:#2a2233;--ink-2:#675d73;--ink-3:#a89fb4;--gold:#e8a01c;--gold-hover:#f6b53c;--gold-soft:#fbeccb;--gold-glow:#e8a01c66;--indigo:#5b4bce;--indigo-hover:#6d5de0;--indigo-soft:#ece9fb;--surface:#fff;--surface-2:#f6f2f8;--surface-3:#efe8f3;--border:#ece5f1;--border-2:#ddd3e6;--success:#12a06a;--success-ink:#0a7a50;--success-soft:#12a06a1f;--warning:#e08a1e;--warning-ink:#b06510;--warning-soft:#e08a1e24;--error:#e5484d;--error-ink:#c02b30;--error-soft:#e5484d1a;--radius-sm:.7rem;--radius:1.15rem;--radius-lg:1.6rem;--shadow-sm:0 1px 2px #2a22330f;--shadow:0 10px 30px -16px #2a223338, 0 2px 6px -3px #2a223314;--shadow-lg:0 30px 70px -28px #2a223352;--ease:cubic-bezier(.22, 1, .36, 1);font-synthesis:none;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}*{box-sizing:border-box}body{color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;background-color:#0000;background-image:radial-gradient(1100px 620px at 8% -10%,#5b4bce1a,#0000 60%),radial-gradient(900px 620px at 104% -4%,#e8a01c29,#0000 55%),linear-gradient(#fdfaf6 0%,#f7f1f5 100%);background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:auto,auto,auto;background-attachment:fixed;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;min-height:100dvh;margin:0;font-weight:400;line-height:1.55}#root{flex-direction:column;min-height:100dvh;display:flex}a{color:var(--ink-2);transition:color .16s var(--ease);font-weight:500;text-decoration:none}a:hover{color:var(--ink)}h1,h2,h3,.brand{font-optical-sizing:auto;letter-spacing:-.015em;color:var(--ink);font-family:Fraunces,Iowan Old Style,Georgia,serif;font-weight:600;line-height:1.15}::selection{background:var(--gold-soft);color:var(--ink)}.topbar{-webkit-backdrop-filter:saturate(1.4)blur(14px);z-index:40;background:#ffffffb8;border-bottom:1px solid #ece5f1e6;align-items:center;gap:.55rem;padding:.7rem 1.75rem;display:flex;position:sticky;top:0}.brand{letter-spacing:0;text-transform:lowercase;margin-right:.75rem;font-family:Oswald,sans-serif;font-size:1.4rem;font-weight:300;display:inline-block;color:var(--ink)!important}.brand .dot{color:currentColor}.nav-links{align-items:center;gap:.35rem;display:flex}.nav-link{color:var(--ink-2);transition:background .16s var(--ease), color .16s var(--ease);border-radius:9999px;padding:.5rem .85rem;font-size:.9rem}.nav-link:hover{background:var(--surface-2);color:var(--ink)}.nav-link.active{background:var(--ink);color:#fff}.nav-link.active:hover{color:#fff}.topbar .spacer{flex:1}.topbar .who{color:var(--ink);align-items:center;gap:.5rem;padding-right:.1rem;font-size:.9rem;font-weight:500;display:inline-flex}.topbar .who .avatar{background:var(--indigo-soft);width:28px;height:28px;color:var(--indigo);text-transform:uppercase;border-radius:50%;place-items:center;font-size:.74rem;font-weight:700;display:grid}.topbar .ghost{padding:.44rem 1.05rem;font-size:.9rem;font-weight:500}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.voice-select{align-items:center;margin:0;display:inline-flex}.voice-select select{border:1px solid var(--border-2);background:var(--surface-2);width:auto;color:var(--ink);cursor:pointer;text-transform:capitalize;border-radius:9999px;padding:.5rem .85rem;font-size:.875rem;font-weight:600}.voice-select select:hover{background:var(--surface-3);border-color:var(--border-2)}.container{width:100%;max-width:780px;animation:rise .4s var(--ease) both;margin:0 auto;padding:2.25rem 1.5rem 4rem}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.breadcrumb{margin:0 0 1.25rem}.breadcrumb a{color:var(--ink-3);white-space:nowrap;align-items:center;gap:.3rem;font-size:.88rem;display:inline-flex}.breadcrumb a svg{flex-shrink:0;width:15px;height:15px}.breadcrumb a:hover{color:var(--ink)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);margin-bottom:1.25rem;padding:1.85rem 2rem}.card h2{margin:0 0 .4rem;font-size:1.6rem}.card p.sub{color:var(--ink-2);margin:0 0 1rem}.grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.1rem;display:grid}.dash-head{margin:.25rem 0 1.6rem}.dash-head h2{margin:0 0 .35rem;font-size:1.95rem}.dash-head .sub{color:var(--ink-2);max-width:58ch;margin:0}.ex-card{text-align:left;cursor:pointer;transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);flex-direction:column;margin:0;padding:1.6rem 1.6rem 1.5rem;display:flex}.ex-card:hover{box-shadow:var(--shadow-lg);border-color:var(--border-2);transform:translateY(-4px)}.ex-card .ex-icon{background:var(--indigo-soft);width:46px;height:46px;color:var(--indigo);border-radius:14px;place-items:center;margin-bottom:1rem;display:grid}.ex-card .ex-icon svg{width:24px;height:24px}.ex-card h2{margin:0 0 .35rem;font-size:1.3rem}.ex-card .sub{flex:1;font-size:.95rem}.ex-card .go{color:var(--ink);transition:gap .2s var(--ease);align-items:center;gap:.4rem;font-size:.95rem;font-weight:600;display:inline-flex}.ex-card:hover .go{gap:.7rem}.ex-card .go svg{width:15px;height:15px;color:var(--gold)}button{font:inherit;background:var(--gold);color:#3a2a08;cursor:pointer;letter-spacing:-.005em;box-shadow:0 6px 16px -8px var(--gold-glow);transition:background .16s var(--ease), transform .12s var(--ease), box-shadow .2s var(--ease), opacity .16s var(--ease);border:none;border-radius:9999px;padding:.68rem 1.5rem;font-weight:600}button:hover:not(:disabled){background:var(--gold-hover);box-shadow:0 10px 22px -8px var(--gold-glow)}button:active:not(:disabled){transform:scale(.97)}button:disabled{opacity:.5;cursor:default;box-shadow:none}button:focus-visible{outline:3px solid var(--gold-glow);outline-offset:2px}button.secondary{background:var(--indigo);color:#fff;box-shadow:0 6px 16px -8px #5b4bce80}button.secondary:hover:not(:disabled){background:var(--indigo-hover)}button.ghost{border:1px solid var(--border-2);color:var(--ink-2);box-shadow:none;background:0 0;font-weight:500}button.ghost:hover:not(:disabled){background:var(--surface-2);color:var(--ink);border-color:var(--border-2)}button.big{padding:.82rem 1.9rem;font-size:1.02rem}input,select{font:inherit;background:var(--surface);border:1px solid var(--border-2);color:var(--ink);border-radius:var(--radius-sm);width:100%;transition:border-color .16s var(--ease), box-shadow .16s var(--ease);padding:.62rem .9rem}input:focus,select:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow);outline:none}label{color:var(--ink-2);text-transform:uppercase;letter-spacing:.1em;margin:1.1rem 0 .4rem;font-size:.72rem;font-weight:700;display:block}.exercise-card{padding-bottom:2rem}.exercise-head{justify-content:space-between;align-items:baseline;gap:1rem;display:flex}.session-score{color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.85rem;font-weight:500}.round-dots{flex-wrap:wrap;gap:.34rem;margin:.35rem 0 1.15rem;display:flex}.round-dots .dot{background:var(--surface-3);width:.65rem;height:.65rem;transition:background .26s var(--ease), transform .26s var(--ease);border-radius:50%}.round-dots .dot.hit{background:var(--success)}.round-dots .dot.miss{background:var(--border-2)}.round-dots .dot.current{background:var(--gold);box-shadow:0 0 0 4px var(--gold-glow);transform:scale(1.25)}.pills{flex-wrap:wrap;gap:.5rem;margin:.25rem 0 .5rem;display:flex}.pill{background:var(--surface-2);color:var(--ink-2);box-shadow:none;border:1px solid #0000;padding:.4rem 1rem;font-size:.85rem;font-weight:500}.pill:hover:not(:disabled){background:var(--surface-3);color:var(--ink)}.pill.active{background:var(--ink);color:#fff;font-weight:600}.pill.active:hover{background:var(--ink);color:#fff}.prompt{color:var(--ink);margin:0 0 1.1rem;font-size:1.08rem;line-height:1.5}.level-tag{color:var(--ink-3);font-family:Inter,sans-serif;font-size:.95rem;font-weight:500}.level-list{flex-direction:column;gap:.55rem;margin-bottom:.5rem;display:flex}.level-option{text-align:left;background:var(--surface-2);border-radius:var(--radius);color:var(--ink);box-shadow:none;transition:background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);border:1.5px solid #0000;flex-direction:column;align-items:flex-start;gap:.15rem;padding:.8rem 1.15rem;font-weight:500;display:flex}.level-option:hover:not(:disabled){background:var(--surface-3)}.level-option.selected{background:var(--surface);border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow)}.level-option.selected:hover{background:var(--surface)}.level-option.locked{opacity:.55}.level-option.locked:hover{background:var(--surface-2)}.level-name{align-items:center;gap:.4rem;font-weight:600;display:inline-flex}.level-name svg{width:13px;height:13px;color:var(--ink-3)}.level-hint{color:var(--ink-2);font-size:.85rem;font-weight:400}.unlock-rule{color:var(--ink-2);margin-top:.6rem;font-size:.85rem}.summary-card{text-align:center}.summary-card h2{font-size:1.4rem}.summary-score{font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin:.75rem 0 .35rem;font-family:Fraunces,serif;font-size:5rem;font-weight:600;line-height:1}.summary-score.perfect{background:linear-gradient(120deg, var(--gold) 0%, var(--gold-hover) 55%, var(--indigo) 130%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.summary-slash{color:var(--ink-3);margin:0 .25rem;font-weight:400}.summary-card .sub{max-width:34ch;margin-inline:auto}.summary-card .action-row{justify-content:center}.score-box{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);justify-content:center;padding:1rem .75rem;display:flex;overflow-x:auto}.score-box svg{max-width:100%;height:auto}.action-row{flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:1.5rem;display:flex}button.action{min-width:240px;transition:background .2s var(--ease), color .2s var(--ease), transform .12s var(--ease), box-shadow .2s var(--ease);justify-content:center;align-items:center;gap:.55rem;padding:.9rem 2.2rem;font-size:1.05rem;display:inline-flex}button.action svg{width:18px;height:18px}button.action.playing{background:var(--indigo);color:#fff;opacity:1;box-shadow:0 8px 20px -8px #5b4bce80}button.action.recording{background:var(--error);color:#fff;opacity:1;animation:1.3s ease-in-out infinite pulse}@keyframes pulse{0%,to{box-shadow:0 0 #e5484d66}50%{box-shadow:0 0 0 12px #e5484d00}}.key-hint{color:var(--ink-3);border:1px solid var(--border-2);background:var(--surface);box-shadow:0 1px 0 var(--border-2);text-transform:uppercase;letter-spacing:.12em;border-radius:.4rem;margin-left:auto;padding:.2rem .5rem;font-size:.7rem;font-weight:600}.listen-panel{animation:rise .26s var(--ease) both;margin-top:1.4rem}.listen-progress{background:var(--surface-3);border-radius:3px;height:5px;margin-bottom:.9rem;overflow:hidden}.listen-progress-fill{background:linear-gradient(90deg, var(--error), var(--gold-hover));border-radius:3px;height:100%;animation-name:drain;animation-timing-function:linear;animation-fill-mode:forwards}@keyframes drain{0%{width:100%}to{width:0}}.meter{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;height:16px;margin:.7rem 0;position:relative;overflow:hidden}.meter .zone{background:var(--success-soft);width:36px;position:absolute;top:0;bottom:0;left:calc(50% - 18px)}.meter .needle{background:var(--ink);border-radius:2px;width:4px;transition:left 90ms linear;position:absolute;top:-1px;bottom:-1px}.meter .center{background:var(--gold);width:2px;position:absolute;top:0;bottom:0;left:calc(50% - 1px)}.hearing{color:var(--ink-2);align-items:center;gap:.5rem;font-size:.92rem;display:inline-flex}.hearing .live-note{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:700}.hearing .dot-pulse{background:var(--error);border-radius:50%;width:8px;height:8px;animation:1s ease-in-out infinite pulse-dot}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}.verdict{border-radius:var(--radius);color:var(--ink);animation:verdict-in .32s var(--ease) both;align-items:flex-start;gap:.9rem;margin-top:1.4rem;padding:1.1rem 1.3rem 1.1rem 1.25rem;font-size:1rem;line-height:1.5;display:flex}@keyframes verdict-in{0%{opacity:0;transform:translateY(10px)scale(.99)}to{opacity:1;transform:none}}.verdict .v-icon{border-radius:10px;flex-shrink:0;place-items:center;width:34px;height:34px;display:grid}.verdict .v-icon svg{width:19px;height:19px}.verdict .v-body{flex:1;min-width:0}.verdict.good{background:var(--success-soft);border:1px solid #12a06a66}.verdict.good .v-icon{background:var(--success);color:#fff}.verdict.octave{background:var(--warning-soft);border:1px solid #e08a1e66}.verdict.octave .v-icon{background:var(--warning);color:#fff}.verdict.bad{background:var(--error-soft);border:1px solid #e5484d52}.verdict.bad .v-icon{background:var(--error);color:#fff}.verdict .headline{margin-bottom:.15rem;font-family:Fraunces,serif;font-size:1.2rem;font-weight:600;line-height:1.2}.skip-confirm{border-radius:var(--radius);background:var(--warning-soft);animation:verdict-in .26s var(--ease) both;border:1px solid #e08a1e66;flex-wrap:wrap;align-items:center;gap:.9rem;margin-top:1rem;padding:.85rem 1rem .85rem 1.05rem;display:flex}.skip-confirm .sc-icon{background:var(--warning);color:#fff;border-radius:10px;flex-shrink:0;place-items:center;width:34px;height:34px;display:grid}.skip-confirm .sc-icon svg{width:18px;height:18px}.skip-confirm .sc-body{min-width:12ch;color:var(--ink);flex:1;font-size:.95rem}.skip-confirm .headline{margin-bottom:.1rem;font-family:Fraunces,serif;font-size:1.05rem;font-weight:600}.skip-confirm .sc-skip{color:var(--warning-ink);border-color:#e08a1e80;flex-shrink:0;align-items:center;gap:.35rem;display:inline-flex}.skip-confirm .sc-skip:hover:not(:disabled){color:var(--warning-ink);background:#e08a1e1f}.skip-confirm .sc-skip svg{width:15px;height:15px}.error-text{color:var(--error-ink);margin-top:.85rem;font-size:.92rem}table.stats{border-collapse:collapse;width:100%}table.stats th,table.stats td{text-align:left;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums;padding:.6rem .7rem;font-size:.92rem}table.stats tbody tr{transition:background .14s var(--ease)}table.stats tbody tr:hover{background:var(--surface-2)}table.stats th{color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em;border-bottom:1.5px solid var(--border-2);font-size:.7rem;font-weight:700}.stats+h3{margin-top:1.75rem;font-size:1.15rem}.badge{white-space:nowrap;border-radius:9999px;align-items:center;gap:.3rem;padding:.16rem .65rem;font-size:.76rem;font-weight:600;display:inline-flex}.badge:before{content:"";background:currentColor;border-radius:50%;width:6px;height:6px}.badge.good{background:var(--success-soft);color:var(--success-ink)}.badge.octave{background:var(--warning-soft);color:var(--warning-ink)}.badge.bad{background:var(--error-soft);color:var(--error-ink)}.controls{flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:1.25rem;display:flex}.who{color:var(--ink-3);font-size:.88rem;font-weight:500}.spacer{flex:1}.auth-wrap{max-width:420px;margin:6vh auto 0;padding:0 1rem 3rem}.auth-wrap .card{box-shadow:var(--shadow-lg);padding:2.25rem 2.25rem 2rem}.auth-wrap .brand-hero{letter-spacing:0;text-transform:lowercase;margin:0 0 .15rem;font-family:Oswald,sans-serif;font-size:2.4rem;font-weight:300}.auth-wrap .brand-hero .dot{color:currentColor}.auth-wrap .tabs{background:var(--surface-2);border-radius:9999px;gap:.3rem;margin:1.5rem 0 .5rem;padding:.28rem;display:flex}.auth-wrap .tabs button{color:var(--ink-2);box-shadow:none;background:0 0;flex:1;padding:.55rem 1rem;font-weight:600}.auth-wrap .tabs button:not(.inactive){background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}.auth-wrap .tabs button.inactive:hover{color:var(--ink);background:0 0}@media (width<=640px){.topbar{flex-wrap:wrap;gap:.55rem .4rem;padding:.7rem 1rem}.topbar .brand{margin-right:0;font-size:1.3rem}.topbar .who,.topbar .spacer{display:none}.topbar .voice-select{order:1;margin-left:auto}.topbar .ghost{order:1;padding:.5rem 1rem}.nav-links{order:2;justify-content:space-between;width:100%}.nav-link{padding:.4rem .7rem;font-size:.88rem}.container{padding:1.5rem 1.1rem 3rem}.card{border-radius:var(--radius);padding:1.4rem 1.3rem}button.action{width:100%;min-width:0}.action-row .key-hint{display:none}.summary-score{font-size:4rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}