@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,400;9..144,700;9..144,900&display=swap");*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f4f1ec;--ink:#1a1814;--ink-light:#6b6560;--surface:#fff;--border:#d8d3cb;--accent-green:#7c9e8a;--pass:#5a8a6a;--fail:#b85a3a;--radius:12px}body,html{height:100%;background:var(--bg);color:var(--ink);font-family:DM Mono,monospace;-webkit-font-smoothing:antialiased}.app-root{flex-direction:column}.app-root,.start-screen{min-height:100vh;display:flex}.start-screen{flex:1;align-items:center;justify-content:center;padding:24px}.start-inner{max-width:420px;width:100%;display:flex;flex-direction:column;align-items:center}.logo-mark{font-size:32px;color:var(--accent-green);margin-bottom:20px;animation:pulse 3s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.start-title{font-family:Fraunces,serif;font-size:clamp(52px,12vw,80px);font-weight:900;line-height:.95;letter-spacing:-.02em;text-align:center;margin-bottom:24px}.start-subtitle{font-size:13px;line-height:1.7;color:var(--ink-light);text-align:center;margin-bottom:28px}.start-lessons{display:flex;gap:8px;margin-bottom:36px;flex-wrap:wrap;justify-content:center}.lesson-chip{font-size:11px;padding:6px 14px;border:1px solid var(--border);border-radius:100px;color:var(--ink-light);letter-spacing:.05em}.start-btn{width:100%;padding:18px;background:var(--ink);color:var(--bg);border:none;border-radius:var(--radius);font-family:DM Mono,monospace;font-size:14px;font-weight:500;letter-spacing:.08em;cursor:pointer;transition:all .2s;margin-bottom:16px}.start-btn:hover{background:#333;transform:translateY(-1px)}.start-note{font-size:11px;color:var(--ink-light);letter-spacing:.04em}.play-screen{flex:1;display:flex;flex-direction:column;min-height:100vh}.play-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid var(--border)}.header-logo{font-size:12px;font-weight:500;letter-spacing:.06em}.header-count{font-size:12px;color:var(--ink-light);font-variant-numeric:tabular-nums}.progress-track{height:3px;background:var(--border)}.progress-fill{height:100%;background:var(--ink);transition:width .5s ease}.task-wrapper{flex:1;padding:32px 24px}.session-bar,.task-wrapper{display:flex;align-items:center;justify-content:center}.session-bar{gap:24px;padding:16px 24px;border-top:1px solid var(--border)}.stat{display:flex;flex-direction:column;align-items:center;gap:2px}.stat-num{font-size:18px;font-weight:500;font-variant-numeric:tabular-nums}.stat-label{font-size:10px;color:var(--ink-light);letter-spacing:.06em}.stat-divider{width:1px;height:24px;background:var(--border)}.task-player{max-width:480px;width:100%;display:flex;flex-direction:column;gap:20px}.lesson-tag{display:inline-block;font-size:10px;font-weight:500;letter-spacing:.1em;padding:5px 12px;border:1px solid;border-radius:100px;width:fit-content}.prompt-area{display:flex;flex-direction:column;gap:8px}.prompt-main{font-family:Fraunces,serif;font-size:clamp(22px,5vw,30px);font-weight:700;line-height:1.2}.prompt-sub{font-size:13px;color:var(--ink-light);line-height:1.5;font-style:italic}.options-grid{display:flex;flex-direction:column;gap:10px}.option-btn{width:100%;padding:16px 20px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);font-family:DM Mono,monospace;font-size:14px;text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:all .15s}.option-btn:hover:not(:disabled){border-color:var(--ink);transform:translateX(2px)}.option-btn.pass{background:#f0f7f3;border-color:var(--pass);border-width:2px;color:var(--pass)}.option-btn.fail{background:#fdf3f0;border-color:var(--fail);border-width:2px;color:var(--fail)}.option-btn:disabled{cursor:default;opacity:.6}.option-text{font-size:15px}.badge{font-size:16px}.result-banner{display:flex;align-items:center;gap:10px;padding:14px 18px;border-radius:var(--radius);font-size:13px;font-weight:500;animation:slideIn .2s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.result-banner.pass{background:#f0f7f3;color:var(--pass);border:1px solid #c5dfd0}.result-banner.retry{background:#fdf3f0;color:var(--fail);border:1px solid #f0c8bb}.result-icon{font-size:16px}.hint-box{padding:14px 16px;border-left:3px solid var(--accent-green);background:var(--surface);border-radius:0 var(--radius) var(--radius) 0;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.hint-label{font-size:9px;font-weight:500;letter-spacing:.12em;color:var(--ink-light);display:block;margin-bottom:4px}.hint-text{font-size:13px;line-height:1.6}.loading-dots{display:flex;gap:6px;justify-content:center;padding:8px}.loading-dots span{width:6px;height:6px;border-radius:50%;background:var(--ink-light);animation:dot 1.2s ease-in-out infinite}.loading-dots span:nth-child(2){animation-delay:.2s}.loading-dots span:nth-child(3){animation-delay:.4s}@keyframes dot{0%,80%,to{transform:scale(.6);opacity:.3}40%{transform:scale(1);opacity:1}}.complete-screen{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;min-height:100vh}.complete-inner{max-width:420px;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}.complete-mark{font-size:40px;color:var(--accent-green);margin-bottom:24px}.complete-title{font-family:Fraunces,serif;font-size:52px;font-weight:900;letter-spacing:-.02em;margin-bottom:16px}.complete-subtitle{font-size:13px;color:var(--ink-light);line-height:1.7;margin-bottom:36px}.final-stats{display:flex;gap:32px;margin-bottom:40px;padding:24px 32px;background:var(--surface);border-radius:20px;border:1px solid var(--border)}.final-stat{display:flex;flex-direction:column;align-items:center;gap:4px}.final-num{font-family:Fraunces,serif;font-size:36px;font-weight:700}.final-label{font-size:11px;color:var(--ink-light);letter-spacing:.06em}@media (max-width:480px){.task-wrapper{padding:24px 16px;align-items:flex-start}.final-stats{gap:20px;padding:20px 24px}}.audio-player{gap:14px;padding:14px 18px;border:1.5px solid;border-radius:var(--radius);background:var(--surface)}.audio-player,.play-btn{display:flex;align-items:center}.play-btn{width:44px;height:44px;border-radius:50%;border:2px solid;justify-content:center;cursor:pointer;transition:all .15s;flex-shrink:0}.play-btn:hover{opacity:.8;transform:scale(1.05)}.play-btn:active{transform:scale(.97)}.play-icon{font-size:13px;line-height:1}.audio-info{flex:1}.audio-cue{font-size:12px;color:var(--ink-light);letter-spacing:.04em}.waveform{display:flex;align-items:center;gap:3px;height:20px}.waveform span{width:3px;background:var(--accent-green);border-radius:2px;animation:wave 1s ease-in-out infinite}.waveform span:first-child{animation-delay:0s}.waveform span:nth-child(2){animation-delay:.15s}.waveform span:nth-child(3){animation-delay:.3s}.waveform span:nth-child(4){animation-delay:.45s}.waveform span:nth-child(5){animation-delay:.6s}@keyframes wave{0%,to{height:4px}50%{height:18px}}