:root{color:#172033;background:#eef4f7;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html{min-width:320px;min-height:100%}body{min-width:320px;min-height:100vh;margin:0}#root{min-height:100vh}.app-shell{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:28px 0 44px}.top-bar{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.eyebrow{margin:0 0 6px;color:#64748b;font-size:.76rem;font-weight:800;letter-spacing:0;text-transform:uppercase}h1,h2,p{margin-top:0}h1{margin-bottom:0;color:#111827;font-size:clamp(2rem,6vw,4.5rem);line-height:.98}h2{margin-bottom:0;color:#172033;font-size:1.1rem;line-height:1.35}button{font:inherit}.level-summary{display:grid;min-width:118px;padding:14px 16px;border:1px solid #d9e2ec;border-radius:8px;background:#fff;text-align:right;box-shadow:0 12px 32px #0f172a14}.level-summary strong{color:#0f766e;font-size:1.8rem;line-height:1}.level-summary span{color:#64748b;font-size:.86rem}.study-layout{display:grid;grid-template-columns:196px 1fr;gap:18px;align-items:start}.level-rail{display:grid;gap:8px;max-height:calc(100vh - 144px);overflow:auto;padding-right:2px}.level-pill,.ghost-button,.play-button,.clear-strip button{border:1px solid #cad6e0;border-radius:8px;background:#fff;color:#1f2937;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease,background .16s ease}.level-pill{display:grid;gap:2px;width:100%;padding:10px 12px;text-align:left}.level-pill span{font-weight:800}.level-pill small{color:#64748b;font-size:.78rem}.level-pill.active{border-color:#0f766e;background:#e8f7f4;box-shadow:inset 3px 0 #0f766e}.level-pill:disabled{background:#eef2f6;color:#94a3b8;cursor:not-allowed}.quiz-panel{position:relative;min-width:0;padding:18px;border:1px solid #d9e2ec;border-radius:8px;background:#fff;box-shadow:0 18px 48px #0f172a17}.confetti-burst{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}.confetti-burst span{position:absolute;left:50%;top:42%;width:9px;height:14px;border-radius:2px;background:#f59e0b;opacity:0;animation:confetti-pop .62s ease-out forwards}.confetti-burst span:nth-child(3n){background:#14b8a6}.confetti-burst span:nth-child(3n+1){background:#ef4444}.confetti-burst span:nth-child(3n+2){background:#3b82f6}.confetti-burst span:nth-child(1){--x: -210px;--y: -92px;--r: -32deg}.confetti-burst span:nth-child(2){--x: -164px;--y: -132px;--r: 48deg}.confetti-burst span:nth-child(3){--x: -120px;--y: -72px;--r: 84deg}.confetti-burst span:nth-child(4){--x: -84px;--y: -148px;--r: -72deg}.confetti-burst span:nth-child(5){--x: -44px;--y: -94px;--r: 24deg}.confetti-burst span:nth-child(6){--x: -12px;--y: -154px;--r: 112deg}.confetti-burst span:nth-child(7){--x: 28px;--y: -98px;--r: -96deg}.confetti-burst span:nth-child(8){--x: 66px;--y: -144px;--r: 38deg}.confetti-burst span:nth-child(9){--x: 104px;--y: -76px;--r: -42deg}.confetti-burst span:nth-child(10){--x: 144px;--y: -130px;--r: 76deg}.confetti-burst span:nth-child(11){--x: 190px;--y: -88px;--r: -118deg}.confetti-burst span:nth-child(12){--x: -188px;--y: -18px;--r: 62deg}.confetti-burst span:nth-child(13){--x: -126px;--y: 14px;--r: -84deg}.confetti-burst span:nth-child(14){--x: -58px;--y: 22px;--r: 44deg}.confetti-burst span:nth-child(15){--x: 18px;--y: 24px;--r: -28deg}.confetti-burst span:nth-child(16){--x: 86px;--y: 12px;--r: 108deg}.confetti-burst span:nth-child(17){--x: 148px;--y: -12px;--r: -58deg}.confetti-burst span:nth-child(18){--x: 212px;--y: 20px;--r: 92deg}@keyframes confetti-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.45) rotate(0)}16%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y) + 48px)) scale(.95) rotate(var(--r))}}@media(prefers-reduced-motion:reduce){.confetti-burst{display:none}}.quiz-head,.listen-area,.clear-strip{display:flex;align-items:center;justify-content:space-between;gap:14px}.quiz-head{padding-bottom:16px;border-bottom:1px solid #e5edf4}.new-guide{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:14px 0 0}.guide-item{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;min-height:58px;padding:9px 11px;border:1px solid #fde68a;border-radius:8px;background:#fffbeb;cursor:pointer;text-align:left;transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease}.guide-item:hover{border-color:#f59e0b;box-shadow:0 8px 20px #b453091f;transform:translateY(-1px)}.guide-item strong{grid-row:span 2;color:#92400e;font-size:2rem;line-height:1}.guide-item span{color:#78350f;font-weight:900}.guide-item small{color:#a16207;font-size:.78rem;font-weight:700}.ghost-button{min-height:40px;padding:0 14px;color:#64748b;font-weight:800}.listen-area{margin:16px 0;padding:14px;border:1px solid #dce7ef;border-radius:8px;background:#f8fbfd}.play-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:118px;min-height:52px;border-color:#0f766e;background:#0f766e;color:#fff;font-weight:900}.play-icon{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:999px;background:#ffffff2e;font-size:.72rem}.target-meta{flex:1;min-width:170px}.target-meta p{margin-bottom:2px;color:#233044;font-weight:800}.target-meta strong{color:#b45309;font-size:.92rem}.hint-toggle{display:inline-flex;align-items:center;gap:8px;min-height:40px;color:#475569;font-size:.92rem;font-weight:800;white-space:nowrap}.hint-toggle input{width:18px;height:18px;accent-color:#0f766e}.keyboard-grid{display:grid;grid-template-columns:repeat(11,minmax(58px,1fr));gap:8px;overflow-x:auto;padding-bottom:4px}.answer-key{display:grid;grid-template-rows:1fr 7px auto;gap:7px;align-items:end;min-height:96px;padding:10px 8px;border:1px solid #d9e2ec;border-radius:8px;background:#fff;color:#111827;cursor:pointer;text-align:center;transition:border-color .14s ease,transform .14s ease,box-shadow .14s ease}.answer-key.available:hover,.level-pill:not(:disabled):hover,.ghost-button:hover{border-color:#0f766e;box-shadow:0 10px 24px #0f766e21;transform:translateY(-1px)}.answer-key.unavailable,.answer-key.tone-key{border-color:#d7dee7;background:#eef2f6;color:#a0aec0;cursor:not-allowed}.answer-key.tone-key{background:#f6f8fb;color:#c0cad7}.answer-key.new-key{border-color:#f59e0b;background:#fffaf0}.answer-key.correct-highlight{border-color:#16a34a;background:#dcfce7;box-shadow:0 0 0 4px #22c55e2e;animation:correct-pulse 1.1s ease-out}.answer-key.correct-highlight .symbol{color:#166534}@keyframes correct-pulse{0%{transform:scale(1)}35%{transform:scale(1.04)}to{transform:scale(1)}}.keyboard-spacer{min-height:96px}.answer-key:focus-visible,.guide-item:focus-visible,.level-pill:focus-visible,.ghost-button:focus-visible,.play-button:focus-visible,.clear-strip button:focus-visible{outline:3px solid rgb(20 184 166 / 32%);outline-offset:2px}.symbol{align-self:center;font-size:2.35rem;font-weight:900;line-height:1}.progress-track{display:block;overflow:hidden;height:8px;border-radius:999px;background:#e2e8f0}.progress-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0f766e,#22c55e);transition:width .18s ease}.progress-label{color:#64748b;font-size:.68rem;font-weight:900;line-height:1.1}.clear-strip{margin-top:16px;padding:14px;border:1px solid #b7ebd8;border-radius:8px;background:#ecfdf5}.clear-strip div{display:grid;gap:2px}.clear-strip strong{color:#047857}.clear-strip span{color:#475569;font-size:.88rem}.clear-strip button{min-height:42px;padding:0 18px;border-color:#047857;background:#047857;color:#fff;font-weight:900}.curriculum{margin-top:30px}.curriculum>div:first-child{margin-bottom:12px}.curriculum-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}.rank-item{display:grid;grid-template-columns:34px 44px 1fr;gap:8px;align-items:center;min-height:64px;padding:10px;border:1px solid #dce7ef;border-radius:8px;background:#fff}.rank-item>span{color:#94a3b8;font-size:.78rem;font-weight:900}.rank-item>strong{color:#111827;font-size:1.9rem;line-height:1}.rank-item div{display:grid;gap:2px}.rank-item b{color:#334155;font-size:.86rem}.rank-item small{color:#64748b;font-size:.78rem;line-height:1.25}@media(max-width:820px){.app-shell{width:min(100% - 20px,720px);padding-top:16px}.top-bar{align-items:stretch;flex-direction:column}.level-summary{text-align:left}.study-layout{grid-template-columns:1fr}.level-rail{display:flex;max-height:none;overflow-x:auto;padding-bottom:4px}.level-pill{min-width:126px}.quiz-head,.listen-area,.clear-strip{align-items:stretch;flex-direction:column}.play-button,.clear-strip button{width:100%}.hint-toggle{justify-content:flex-start}}@media(max-width:700px){.app-shell{width:calc(100% - 12px)}.quiz-panel{padding:8px}.keyboard-grid{grid-template-columns:repeat(11,minmax(0,1fr));gap:3px;overflow-x:visible;padding-bottom:0}.answer-key{grid-template-rows:1fr 4px;gap:4px;min-width:0;min-height:clamp(58px,10vw,74px);padding:5px 2px;border-radius:6px}.symbol{font-size:clamp(1.35rem,5vw,1.8rem)}.progress-track{height:4px}.progress-label{display:none}.keyboard-spacer{min-height:clamp(58px,10vw,74px)}}