:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;overflow-x:clip}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:0;min-height:100vh;overflow-x:clip}#root{width:100%;max-width:100%;min-width:0}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.locale-switcher{margin-top:1.5rem;font-size:.9rem}.locale-switcher label{margin-right:.5rem}.locale-switcher select{padding:.35rem .5rem;border-radius:.375rem;max-width:100%}@media (max-width: 480px){.locale-switcher select{display:block;width:100%;margin-top:.35rem}.locale-switcher label{display:block}}.app-shell{text-align:center;padding:1.5rem;max-width:48rem;margin:0 auto;width:100%;min-width:0}.app-shell__header h1{font-size:clamp(1.25rem,5vw,1.75rem);margin-bottom:.25rem;color:inherit;overflow-wrap:anywhere}.app-shell__subtitle{margin-top:0;opacity:.8;font-size:clamp(.85rem,3.5vw,.95rem);overflow-wrap:anywhere}.app-shell__main{margin-top:1.5rem;min-width:0}.app-shell__footer{margin-top:2rem;padding-top:1rem;border-top:1px solid rgba(127,127,127,.25)}@media (max-width: 480px){.app-shell{padding:.75rem}}.study-mode-selector{margin:0 0 1.25rem;padding:0;border:0;min-width:0;text-align:left}.study-mode-selector legend{font-weight:700;margin-bottom:.5rem}.study-mode-selector__options{display:flex;flex-wrap:wrap;gap:.5rem}.study-mode-selector__option{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .75rem;border:2px solid #93c5fd;border-radius:999px;background:#fff;cursor:pointer;font-weight:600;max-width:100%}.study-mode-selector__option span{overflow-wrap:anywhere}.study-mode-selector__option:has(input:checked){border-color:#2563eb;background:#dbeafe;color:#1e40af}.study-mode-selector__option input{margin:0;flex-shrink:0}.study-mode-selector__hint{margin:.75rem 0 0;font-size:.9rem;opacity:.8;overflow-wrap:anywhere}@media (max-width: 480px){.study-mode-selector__options{flex-direction:column}.study-mode-selector__option{width:100%;justify-content:flex-start;border-radius:.5rem}}.lesson-selector h2{font-size:1.25rem;margin-bottom:.5rem}.lesson-selector__intro{margin:0 0 1.25rem;opacity:.85}.lesson-selector__unit-block{margin-bottom:2rem}.lesson-selector__unit-block--testing{padding-top:1rem;border-top:2px dashed #cbd5e1}.lesson-selector__unit-heading{margin:0 0 .75rem;font-size:1.1rem;color:#1e40af}.lesson-selector__unit-description{margin:0 0 1rem;opacity:.85}.lesson-selector__grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))}.lesson-selector__card{padding:1.25rem;border:2px solid #2563eb;border-radius:.75rem;background-color:#2563eb0f;min-width:0;max-width:100%;display:flex;flex-direction:column}.lesson-selector__unit-block--testing .lesson-selector__card{border-color:#64748b;background-color:#64748b14}.lesson-selector__card-header{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.5rem}.lesson-selector__kind{display:inline-block;padding:.15rem .5rem;border-radius:999px;background:#dbeafe;color:#1e40af;font-size:.75rem;font-weight:700;text-transform:capitalize}.lesson-selector__kind--testing{background:#e2e8f0;color:#334155}.lesson-selector__card h3{margin:0 0 .5rem;font-size:1.2rem}.lesson-selector__objective{margin:0 0 .75rem;font-size:.95rem;opacity:.9}.lesson-selector__meta{margin:0 0 .75rem;font-size:.9rem;opacity:.8}.lesson-selector__description{margin:0 0 1rem;opacity:.85;overflow-wrap:anywhere}.lesson-selector__start{margin-top:auto;align-self:flex-start}.lesson-selector__error{color:#dc2626}@media (max-width: 480px){.lesson-selector__card{padding:.75rem}}.lesson-intro{margin-bottom:1.5rem;padding:1.25rem;border:1px solid #cbd5e1;border-radius:.75rem;background:#f8fafc}.lesson-intro__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.lesson-intro__header h2{margin:0 0 .5rem;font-size:1.35rem}.lesson-intro__skip{flex-shrink:0}.lesson-intro__objective{margin:0 0 1rem;opacity:.9}.lesson-intro__section{margin-bottom:1rem}.lesson-intro__section h3,.lesson-intro__list-block h3{margin:0 0 .35rem;font-size:1.05rem}.lesson-intro__list-block--pitfalls{color:#9a3412}.lesson-intro__continue{margin-top:.5rem}.voice-selector{margin:1rem 0;min-width:0}.voice-selector label{margin-right:.5rem}.voice-selector select{padding:.4rem .6rem;font-size:1rem;border-radius:.375rem;max-width:100%}@media (max-width: 480px){.voice-selector label{display:block;margin:0 0 .35rem}.voice-selector select{display:block;width:100%}}.recorder{margin-top:1.25rem;padding-top:1rem;border-top:1px solid rgba(127,127,127,.3)}.recorder h3{margin-top:0;font-size:1.1rem}.recorder__status{font-size:.9rem;margin:.5rem 0 1rem}.recorder__status--denied,.recorder__status--unavailable,.recorder__status--error{color:#dc2626}.recorder__status--granted{color:#16a34a}.recorder__buttons button{margin:0 .25rem}.recorder__recording{color:#dc2626;font-weight:600}.exercise-view{padding:1.25rem;border:2px solid #2563eb;border-radius:.75rem;background-color:#2563eb0a;margin-bottom:1.5rem;min-width:0;max-width:100%}.exercise-view__progress{font-size:.9rem;opacity:.85}.exercise-view__type{font-size:.85rem;font-weight:600;color:#1d4ed8;margin:0 0 .5rem}.exercise-view__zhuyin-display{font-size:clamp(2rem,8vw,3rem);margin:0;line-height:1.1}.exercise-view__zhuyin-symbol{margin:0 0 .75rem;text-align:center}.exercise-view__zhuyin-symbol-roman{display:grid;gap:.2rem;margin:.35rem 0 0;font-size:.95rem}.exercise-view__zhuyin-symbol-roman-row{display:flex;flex-wrap:wrap;gap:.35rem .6rem;justify-content:center;align-items:baseline}.exercise-view__zhuyin-symbol-roman-row dt{font-weight:700;opacity:.75}.exercise-view__zhuyin-symbol-roman-row dd{margin:0;font-weight:600}.exercise-view__variant-phrase--secondary{font-size:1.25rem;opacity:.85}.exercise-view__mouth-guide{margin-top:.75rem;padding:.75rem;border-radius:.5rem;background:#f0f9ff;font-size:.9rem}.exercise-view__mouth-guide h4{margin:0 0 .35rem;font-size:.95rem}.exercise-view__mouth-guide ul{margin:.35rem 0 0;padding-left:1.25rem}.exercise-view__speak-only-note{margin:.75rem 0 0;font-size:.9rem;color:#1d4ed8;font-weight:600}.exercise-view__sample-penalty{margin:.75rem 0 0;font-size:.9rem;color:#b45309;font-weight:600}.exercise-view__sample-penalty--played{color:#dc2626}.exercise-view__gloss-heading{font-size:clamp(1.1rem,4.5vw,1.35rem);margin:.5rem 0 1rem;font-weight:700;overflow-wrap:anywhere}.exercise-view__languages{display:grid;gap:1rem;margin-bottom:1rem;min-width:0}.exercise-view__languages--dual{grid-template-columns:repeat(2,minmax(0,1fr))}.exercise-view__language-panel{padding:1rem;border:1px solid #93c5fd;border-radius:.75rem;background:#fff;min-width:0}.exercise-view__language-label{margin:0 0 .5rem;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#1e40af}.exercise-view__variant-phrase{font-size:clamp(1.5rem,8vw,2rem);margin:0 0 .5rem;overflow-wrap:anywhere}.exercise-view__word-definition{margin:0 0 .75rem;font-size:1rem;font-weight:600;text-align:center;opacity:.85}@media (max-width: 720px){.exercise-view__languages--dual{grid-template-columns:1fr}}@media (max-width: 480px){.exercise-view{padding:.75rem}}.exercise-view__guides{display:grid;gap:.5rem;margin:.75rem 0}.exercise-view__guide{display:flex;flex-wrap:wrap;gap:.4rem .75rem;justify-content:center;align-items:baseline}.exercise-view__guide dt{font-weight:700;opacity:.75}.exercise-view__guide dd{margin:0;font-size:1.2rem;letter-spacing:.04em}.exercise-view__gloss{opacity:.85;margin-bottom:.5rem}.exercise-view__notes,.exercise-view__practice-note{max-width:36rem;margin:0 auto 1rem;font-size:.95rem;opacity:.8}.exercise-view__practice-note{padding:.75rem 1rem;border-radius:.5rem;background:#2563eb14}.exercise-view__controls,.exercise-view__audio{margin:1rem 0}.exercise-view__controls{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.exercise-view__audio audio{display:block;margin:.75rem auto 0;width:100%;max-width:100%;min-width:0}.chart-display{margin-top:1.5rem;text-align:left;min-width:0;max-width:100%}.chart-display__chart{margin-bottom:1.5rem;min-width:0}.chart-display__canvas-wrap{position:relative;width:100%;max-width:100%;min-width:0;overflow:hidden}.chart-display__chart h4{text-align:center;margin-bottom:.5rem}.chart-display__note{margin:0 0 .75rem;font-size:.875rem;color:#4b5563;text-align:center}.result-feedback{text-align:left;margin-top:1.5rem;padding:1.25rem;border-radius:.75rem;border:1px solid rgba(127,127,127,.3);min-width:0;max-width:100%;overflow-wrap:anywhere}@media (max-width: 480px){.result-feedback{padding:.75rem}}.result-feedback__loading{text-align:center;margin-top:1rem}.result-feedback__penalty{color:#b45309;font-weight:600;margin:.5rem 0 1rem}.result-feedback__score-note{opacity:.85;font-weight:500}.result-feedback__section ul{margin:.5rem 0 1rem;padding-left:1.25rem}.result-feedback__section li{margin-bottom:.35rem}.result-feedback__table-wrap{overflow-x:auto}.result-feedback__table{width:100%;border-collapse:collapse;font-size:.9rem}.result-feedback__table th,.result-feedback__table td{border:1px solid rgba(127,127,127,.4);padding:.4rem .5rem;text-align:left}.result-feedback__table th{background-color:#7f7f7f1a}.app-error{color:#dc2626;text-align:center;margin:1rem 0}.app-session-bar{margin-bottom:1rem}button{margin:.25rem}button:disabled{opacity:.6;cursor:not-allowed}