:root{--cream:#f7f2e9;--cream-deep:#efe6d6;--walnut:#3a2c21;--walnut-soft:#5c4936;--oak:#8a6a4d;--oak-light:#c9b295;--brass:#b07d3f;--ember:#b45c33;--ember-soft:#d99a72;--sage:#7d8b6f;--ink-on-dark:#f5ede0;--radius:18px;--radius-sm:12px;--shadow:0 2px 14px #3a2c211a, 0 1px 3px #3a2c2114;--shadow-lift:0 8px 28px #3a2c2129;--font-display:"Fraunces", Georgia, serif;--font-body:"Nunito Sans", system-ui, -apple-system, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0}body{background:var(--cream);color:var(--walnut);font-family:var(--font-body);min-height:100dvh;font-size:16px;line-height:1.55}h1,h2,h3{font-family:var(--font-display);margin:0;font-weight:500;line-height:1.2}button{font-family:var(--font-body);cursor:pointer;border:none}.app{max-width:680px;padding:0 20px calc(84px + env(safe-area-inset-bottom));min-height:100dvh;margin:0 auto}.app-header{justify-content:space-between;align-items:baseline;padding:26px 0 8px;display:flex}.app-header .wordmark{font-family:var(--font-display);letter-spacing:.01em;font-size:22px}.wordmark em{color:var(--ember);font-style:italic}.streak{color:var(--walnut-soft);font-size:13px}.tabbar{padding:8px 12px calc(10px + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:50;background:#f7f2e9eb;border-top:1px solid #3a2c2114;justify-content:center;gap:4px;display:flex;position:fixed;bottom:0;left:0;right:0}.tabbar button{border-radius:var(--radius-sm);max-width:150px;color:var(--walnut-soft);background:0 0;flex-direction:column;flex:1;align-items:center;gap:3px;padding:8px 4px 6px;font-size:12px;font-weight:600;transition:color .2s,background .2s;display:flex}.tabbar button .glyph{font-size:20px;line-height:1}.tabbar button.active{color:var(--ember);background:#b45c3314}.card{border-radius:var(--radius);box-shadow:var(--shadow);background:#fffdf8;border:1px solid #3a2c210f;margin:14px 0;padding:20px}.card.wood{color:var(--ink-on-dark);background:linear-gradient(135deg,#4a3828 0%,#3a2c21 60%,#33261c 100%);border:none}.card.wood .subtle{color:#f5ede0b3}.card h2{margin-bottom:6px;font-size:21px}.card h3{font-size:17px}.subtle{color:var(--walnut-soft);font-size:14px}.eyebrow{text-transform:uppercase;letter-spacing:.14em;color:var(--brass);margin-bottom:8px;font-size:11px;font-weight:700}.btn{border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:12px 22px;font-size:15px;font-weight:700;transition:transform .15s,box-shadow .2s,background .2s;display:inline-flex}.btn:active{transform:scale(.97)}.btn-primary{background:var(--ember);color:#fff;box-shadow:0 3px 12px #b45c3359}.btn-primary:hover{background:#a2512c}.btn-ghost{color:var(--walnut);background:#3a2c210f}.btn-ghost:hover{background:#3a2c211c}.btn-block{width:100%}.options{grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;display:grid}.options.single-col{grid-template-columns:1fr}.option{border-radius:var(--radius-sm);color:var(--walnut);text-align:center;background:#fffdf8;border:1.5px solid #3a2c211f;padding:14px 12px;font-size:14.5px;font-weight:600;transition:border-color .15s,background .15s,transform .12s}.option:hover{border-color:var(--oak)}.option:active{transform:scale(.98)}.option.correct{border-color:var(--sage);background:#7d8b6f21}.option.wrong{border-color:var(--ember-soft);opacity:.75;background:#b45c3314}.option .hint{color:var(--walnut-soft);margin-top:2px;font-size:12px;font-weight:400;display:block}.option-dontknow{border-radius:var(--radius-sm);width:100%;color:var(--walnut-soft);text-align:center;background:0 0;border:1.5px dashed #3a2c2138;margin-top:10px;padding:12px;font-size:14px;font-weight:600;transition:border-color .15s,background .15s;display:block}.option-dontknow:hover:not(:disabled){border-color:var(--brass);color:var(--walnut)}.option-dontknow.chosen{border-style:solid;border-color:var(--brass);color:var(--walnut);background:#b07d3f14}.option-dontknow:disabled{cursor:default}.why{border-left:3px solid var(--brass);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:#b07d3f12;margin-top:14px;padding:14px 16px;font-size:14.5px;animation:.35s rise}.why strong{font-family:var(--font-display);font-weight:600}@keyframes rise{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.fade-in{animation:.35s rise}.keyboard{border-radius:var(--radius-sm);height:170px;box-shadow:var(--shadow);-webkit-user-select:none;user-select:none;touch-action:manipulation;display:flex;position:relative;overflow:hidden}.key-white{background:linear-gradient(#fffefb,#f4efe6);border:1px solid #d8cfc0;border-radius:0 0 6px 6px;flex:1;transition:background .1s;position:relative}.key-white.held,.key-white:active{background:linear-gradient(#f3e7d8,#eaddc9)}.key-white.lit{border-color:var(--ember-soft);background:linear-gradient(#f5d9c4,#edc4a6)}.key-white .label{text-align:center;color:var(--walnut-soft);pointer-events:none;font-size:10.5px;position:absolute;bottom:6px;left:0;right:0}.key-black{z-index:2;background-color:#33281e;border-radius:0 0 5px 5px;width:8%;height:60%;transition:background-color .1s;position:absolute;top:0;box-shadow:0 3px 6px #00000059}.key-black.held,.key-black:active{background-color:#1f1710}.key-black.lit{background-color:var(--ember)}.chips{flex-wrap:wrap;gap:8px;margin:12px 0;display:flex}.chip{color:var(--walnut);background:#3a2c210f;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:700;transition:background .15s,color .15s}.chip.active{background:var(--walnut);color:var(--ink-on-dark)}.mode-card{text-align:left;border-radius:var(--radius);width:100%;box-shadow:var(--shadow);margin:14px 0;padding:22px 20px;transition:transform .18s,box-shadow .2s;display:block}.mode-card:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}.mode-card h2{margin:4px 0 6px;font-size:22px}.mode-card p{margin:0;font-size:14px}.mode-listen{color:var(--ink-on-dark);background:linear-gradient(135deg,#4a3828,#33261c)}.mode-listen p{color:#f5ede0bf}.mode-listen .eyebrow{color:var(--ember-soft)}.mode-play{color:var(--walnut);background:linear-gradient(135deg,#fffdf8,#f3ead9);border:1px solid #3a2c2114}.mode-play p{color:var(--walnut-soft)}.screen-title{margin:18px 0 4px;font-size:28px}.screen-sub{color:var(--walnut-soft);margin:0 0 8px;font-size:15px}.back-link{color:var(--brass);background:0 0;padding:8px 0;font-size:14px;font-weight:700}.game-list{flex-direction:column;gap:4px;display:flex}.prompt-word{font-family:var(--font-display);color:var(--ink-on-dark);margin:10px 0 4px;font-size:40px;font-style:italic}.stat-row{gap:18px;margin-top:10px;display:flex}.stat{color:var(--walnut-soft);font-size:13px}.stat b{color:var(--walnut);font-size:20px;font-family:var(--font-display);display:block}.lesson-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-bottom:20px;display:grid}.lesson-card{border-radius:var(--radius-sm);text-align:left;cursor:pointer;background:#fffdf8;border:1px solid #3a2c211f;padding:16px;transition:all .2s;position:relative;overflow:hidden}.lesson-card:hover:not(:disabled){border-color:var(--oak);box-shadow:var(--shadow);transform:translateY(-2px)}.lesson-card:disabled{opacity:.45;cursor:not-allowed}.lesson-card.done{background:#7d8b6f12;border-color:#7d8b6f80}.lesson-card h3{margin:0 0 8px;font-size:1rem}.lesson-card .subtle{opacity:.8;margin:0;font-size:.9rem}.lock-icon{opacity:.5;font-size:20px;position:absolute;bottom:8px;right:8px}.tag{opacity:.7;background:#0000000d;border-radius:3px;padding:2px 8px;font-size:.8rem;display:inline-block}.badge{color:var(--ember);white-space:nowrap;background:#b45c3326;border-radius:12px;padding:4px 12px;font-size:.8rem;font-weight:600;display:inline-block}.badge-done{color:var(--sage);background:#7d8b6f2e}.badge-muted{color:var(--walnut-soft);background:#3a2c2112}.btn-small{color:var(--walnut);cursor:pointer;background:#3a2c2112;border:1px solid #3a2c2126;border-radius:999px;padding:7px 14px;font-size:.9rem;font-weight:700;transition:all .2s}.btn-small:hover{background:#3a2c211f}.staff-wrap{color:var(--walnut);border-radius:var(--radius-sm);background:#fffdf8;border:1px solid #3a2c211a;margin:14px 0;padding:10px 12px 8px}.staff-caption{color:var(--walnut-soft);margin-top:2px;font-size:13px}.staff-hint{color:var(--brass);margin-top:4px;font-size:11px;font-style:italic}.demo-card{border-radius:var(--radius-sm);background:#3a2c210b;margin:12px 0;padding:14px 16px}.demo-card-title{margin-bottom:4px;font-weight:700}.demo-card-formula{color:var(--walnut-soft);margin-bottom:8px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:13px}.demo-card-body{color:var(--walnut-soft);margin-top:8px;font-size:14px}.lesson-tip{border-left:3px solid var(--sage);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:#7d8b6f17;margin-top:18px;padding:14px 16px;font-size:14.5px}.compare-row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.compare-row .demo-card{margin:12px 0 0}@media (width<=480px){.compare-row{grid-template-columns:1fr;gap:0}}.formula-box{border-radius:var(--radius-sm);text-align:center;letter-spacing:.06em;background:#3a2c210d;margin:12px 0;padding:14px;font-weight:700}.formula-box span{color:var(--walnut-soft);letter-spacing:normal;margin-top:4px;font-size:12.5px;font-weight:400;display:block}.degree-table{margin:12px 0}.degree-row{border-bottom:1px solid #3a2c2114;grid-template-columns:28px 152px 1fr;align-items:baseline;gap:10px;padding:8px 0;font-size:14px;display:grid}.degree-row:last-child{border-bottom:none}.degree-num{font-family:var(--font-display);color:var(--brass);font-size:17px}.degree-name{font-weight:700}.degree-name em{color:var(--walnut-soft);font-weight:400}.degree-job{color:var(--walnut-soft)}@media (width<=480px){.degree-row{grid-template-columns:24px 1fr}.degree-job{grid-column:2}}.quiz-progress{align-items:center;gap:6px;margin-bottom:14px;display:flex}.quiz-dot{background:#3a2c2126;border-radius:50%;width:9px;height:9px;transition:background .25s}.quiz-dot.filled{background:var(--sage)}.quiz-count{color:var(--walnut-soft);margin-left:4px;font-size:12px}.seg-control{background:#3a2c210f;border-radius:999px;margin:6px 0 16px;padding:4px;display:flex}.seg-control button{color:var(--walnut-soft);background:0 0;border-radius:999px;flex:1;padding:9px 12px;font-size:14px;font-weight:700;transition:background .2s,color .2s}.seg-control button.active{color:var(--walnut);box-shadow:var(--shadow);background:#fffdf8}.topic-search{width:100%;font-family:var(--font-body);color:var(--walnut);background:#fffdf8;border:1.5px solid #3a2c2126;border-radius:999px;margin-bottom:16px;padding:12px 16px;font-size:15px}.topic-search:focus{border-color:var(--brass);outline:none}.topic-row{text-align:left;border-radius:var(--radius-sm);background:#fffdf8;border:1px solid #3a2c211a;align-items:center;gap:10px;width:100%;margin-bottom:8px;padding:12px 14px;transition:border-color .15s,transform .12s;display:flex}.topic-row:hover:not(:disabled){border-color:var(--oak)}.topic-row:disabled{opacity:.5;cursor:not-allowed}.topic-row-main{flex:1;min-width:0}.topic-row-title{color:var(--walnut);font-size:14.5px;font-weight:700;display:block}.topic-row-topics{color:var(--walnut-soft);margin-top:2px;font-size:12.5px;display:block}.topic-row-go{color:var(--brass);white-space:nowrap;font-size:12.5px;font-weight:700}.placement-list{margin:0;padding-left:20px}.placement-list li{padding:5px 0;font-size:14.5px}.note-value-row{align-items:center;gap:12px;margin:10px 0;display:flex}.note-value-bar{background:linear-gradient(90deg, var(--ember), var(--ember-soft));border-radius:4px;flex-shrink:0;min-width:22px;height:14px}.note-value-label{flex-direction:column;flex:1;font-size:13.5px;display:flex}.note-value-label strong{font-size:14.5px}.note-value-label span{color:var(--walnut-soft);font-size:12.5px}.beat-row{gap:10px;margin:14px 0;display:flex}.beat-dot{aspect-ratio:1;color:var(--walnut-soft);background:#fffdf8;border:1.5px solid #3a2c2133;border-radius:50%;flex:1;justify-content:center;align-items:center;font-size:15px;font-weight:700;display:flex}.beat-dot.strong{background:var(--ember);border-color:var(--ember);color:#fff}