*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--color-bg:#FFFDF7;--color-surface:#FAFAFA;--color-border:#d4c9b8;--color-text-primary:#222222;--color-text-secondary:#4a4a4a;--color-text-muted:#7a7a7a;--color-brand:#2d6a4f;--color-brand-light:#52b788;--color-brand-dark:#1b4332;--color-accent:#e76f51;--color-accent-light:#fcd5c5;--color-correct:#2d6a4f;--color-correct-bg:#d8f3dc;--color-wrong:#c1121f;--color-wrong-bg:#ffe0e0;--color-focus-ring:#2d6a4f;--font-display:"Fredoka",system-ui,sans-serif;--font-body:"Georgia","Times New Roman",serif;--font-ui:system-ui,-apple-system,sans-serif;--font-mono:"Courier New",monospace;--text-xs:1rem;--text-sm:1.125rem;--text-md:1.25rem;--text-lg:1.5rem;--text-xl:2rem;--text-2xl:2.75rem;--text-3xl:3.5rem;--leading-relaxed:1.8;--leading-normal:1.5;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--radius-pill:9999px;--shadow-sm:0 1px 3px rgba(0,0,0,0.08);--shadow-md:0 4px 16px rgba(0,0,0,0.10);--shadow-lg:0 8px 32px rgba(0,0,0,0.12);--transition:160ms ease}html{font-size:14px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{font-family:var(--font-ui);font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--color-text-primary);background:var(--color-bg);min-height:100dvh;letter-spacing:.01em;word-spacing:.05em}:focus-visible{outline:3px solid var(--color-focus-ring);outline-offset:3px;border-radius:var(--radius-sm)}h1,h2,h3{font-family:var(--font-ui);font-weight:700;line-height:1.3;color:var(--color-text-primary)}.page-wrapper{min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:var(--space-4) var(--space-4)}.card{background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-8);box-shadow:var(--shadow-md);width:100%;max-width:680px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-ui);font-size:var(--text-md);font-weight:700;line-height:1;padding:var(--space-4) var(--space-8);border:2.5px solid transparent;border-radius:var(--radius-pill);cursor:pointer;transition:background var(--transition),border-color var(--transition),transform var(--transition),box-shadow var(--transition);text-decoration:none;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;min-height:48px}.btn:active{transform:scale(.97)}.btn-primary{background:var(--color-brand);color:#ffffff;border-color:var(--color-brand)}.btn-primary:hover{background:var(--color-brand-dark);border-color:var(--color-brand-dark);box-shadow:var(--shadow-sm)}.btn-secondary{background:transparent;color:var(--color-brand);border-color:var(--color-brand)}.btn-secondary:hover{background:#d8f3dc}.btn-ghost{background:transparent;color:var(--color-text-secondary);border-color:var(--color-border)}.btn-ghost:hover{background:#ededeb;border-color:var(--color-text-muted)}.btn-accent{background:var(--color-accent);color:#ffffff;border-color:var(--color-accent)}.btn-accent:hover{background:#c1550f;border-color:#c1550f}.btn-tricky-active{background:var(--color-accent-light);color:var(--color-accent);border-color:var(--color-accent)}.btn-lg{font-size:var(--text-lg);padding:var(--space-6) var(--space-12);min-height:60px}.form-group{display:flex;flex-direction:column;gap:var(--space-2)}.form-label{font-weight:600;font-size:var(--text-sm);color:var(--color-text-secondary)}.form-select{font-family:var(--font-ui);font-size:var(--text-md);color:var(--color-text-primary);background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%235a4e3c' d='M8 10.5L2.5 5h11z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;cursor:pointer;transition:border-color var(--transition)}.form-select:hover{border-color:var(--color-brand)}.form-select:focus-visible{outline:3px solid var(--color-focus-ring);outline-offset:2px}.word-display{font-family:var(--font-body);font-size:var(--text-3xl);font-weight:700;letter-spacing:.04em;color:var(--color-text-primary);text-align:center;line-height:1.2}.chunk-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;font-family:var(--font-body);font-size:var(--text-xl);font-weight:600}.chunk-part{padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);transition:background var(--transition)}.chunk-prefix{background:#e8f4fd;color:#1565c0;border:2px solid #90caf9}.chunk-root{background:#f3e5f5;color:#6a1b9a;border:2px solid #ce93d8}.chunk-suffix{background:#e8f5e9;color:#2e7d32;border:2px solid #a5d6a7}.chunk-separator{color:var(--color-text-muted);font-size:var(--text-xl);padding:0 var(--space-1);font-weight:400}.chunk-label{font-family:var(--font-ui);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.75;display:block;text-align:center;margin-top:2px}.quiz-options{display:flex;flex-direction:column;gap:var(--space-3);width:100%}.quiz-option{width:100%;text-align:left;font-family:var(--font-ui);font-size:var(--text-sm);font-weight:500;line-height:var(--leading-relaxed);padding:var(--space-4) var(--space-6);border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);cursor:pointer;transition:border-color var(--transition),background var(--transition),transform var(--transition)}.quiz-option:hover:not(:disabled){border-color:var(--color-brand);background:#f0faf4;transform:translateX(4px)}.quiz-option:disabled{cursor:default}.quiz-option.correct{border-color:var(--color-correct);background:var(--color-correct-bg);color:var(--color-correct);font-weight:700}.quiz-option.wrong{border-color:var(--color-wrong);background:var(--color-wrong-bg);color:var(--color-wrong);text-decoration:line-through}.feedback{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-6);border-radius:var(--radius-md);font-size:var(--text-md);font-weight:700}.feedback-correct{background:var(--color-correct-bg);color:var(--color-correct);border:2px solid var(--color-correct)}.feedback-wrong{background:var(--color-wrong-bg);color:var(--color-wrong);border:2px solid var(--color-wrong)}.progress-wrapper{width:100%;max-width:680px}.progress-label{font-size:var(--text-xs);font-weight:600;color:var(--color-text-secondary);margin-bottom:var(--space-2);display:flex;justify-content:space-between}.progress-track{width:100%;height:10px;background:var(--color-border);overflow:hidden}.progress-fill,.progress-track{border-radius:var(--radius-pill)}.progress-fill{height:100%;background:var(--color-brand-light);transition:width .4s ease}.decoding-note{font-family:var(--font-ui);font-size:var(--text-xs);background:#faf5eb;border-left:4px solid var(--color-brand-light);padding:var(--space-3) var(--space-4);border-radius:0 var(--radius-sm) var(--radius-sm) 0}.decoding-note,.example-sentence{line-height:var(--leading-relaxed);color:var(--color-text-secondary)}.example-sentence{font-family:var(--font-body);font-size:var(--text-md);font-style:italic;text-align:center}.badge{display:inline-block;font-family:var(--font-ui);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);background:#e8f4fd;color:#1565c0}.divider{width:100%;border:none;border-top:1.5px solid var(--color-border);margin:var(--space-6) 0}.speech-controls{gap:var(--space-3);flex-wrap:wrap}.slow-toggle,.speech-controls{display:flex;align-items:center}.slow-toggle{gap:var(--space-2);font-size:var(--text-xs);font-weight:600;cursor:pointer;color:var(--color-text-secondary);-webkit-user-select:none;-moz-user-select:none;user-select:none}.slow-toggle input[type=checkbox]{width:18px;height:18px;accent-color:var(--color-brand);cursor:pointer}.no-speech-notice{font-size:var(--text-xs);color:var(--color-text-muted);background:#f5f5f5;border:1.5px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)}.tricky-indicator{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);font-weight:700;color:var(--color-accent)}@media (max-width:600px){.word-display{font-size:var(--text-2xl)}.chunk-container{font-size:var(--text-lg)}.card{padding:var(--space-6)}.btn-lg{font-size:var(--text-md);padding:var(--space-4) var(--space-8);min-height:52px}}@keyframes pulse{0%,to{box-shadow:0 0 0 0 rgba(230,81,0,.3)}50%{box-shadow:0 0 0 8px rgba(230,81,0,0)}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}