:root{--accent-green: #4CAF50;--accent-purple: #32BAAE;--accent-red: #F44336;--accent-warning: #FF9800;--accent-info: #2196F3;--accent-blue: #64B5F6;--accent-yellow: #FFD700;--accent-orange: #FFA726;--word-correct: #4CAF50;--word-warning: #FFC107;--word-error: #F44336;--radius-lg: 24px;--radius-md: 12px;--radius-sm: 8px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: .95rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 2rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.4;--line-height-normal: 1.5;--line-height-relaxed: 1.6;--line-height-loose: 1.8;--primary-bg: #121212;--secondary-bg: #1E1E1E;--card-bg: #2C2C2C;--card-hover: #3C3C3C;--text-primary: #FFFFFF;--text-secondary: #B3B3B3;--text-muted: #888888;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .2);--shadow-md: 0 4px 12px rgba(0, 0, 0, .3);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .4);--overlay-bg: rgba(255, 255, 255, .05);--overlay-bg-medium: rgba(255, 255, 255, .08);--overlay-bg-strong: rgba(255, 255, 255, .1);--overlay-bg-stronger: rgba(255, 255, 255, .15);--border-subtle: rgba(255, 255, 255, .1);--border-medium: rgba(255, 255, 255, .15);--border-strong: rgba(255, 255, 255, .3);--hover-overlay: rgba(255, 255, 255, .04);--backdrop-overlay: rgba(0, 0, 0, .8);--scrollbar-track: rgba(255, 255, 255, .05);--scrollbar-thumb: rgba(255, 255, 255, .2);--scrollbar-thumb-hover: rgba(255, 255, 255, .3);--loading-bg: rgba(18, 18, 18, .8)}[data-theme=dark]{--primary-bg: #121212;--secondary-bg: #1E1E1E;--card-bg: #2C2C2C;--card-hover: #3C3C3C;--text-primary: #FFFFFF;--text-secondary: #B3B3B3;--text-muted: #888888;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .2);--shadow-md: 0 4px 12px rgba(0, 0, 0, .3);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .4);--overlay-bg: rgba(255, 255, 255, .05);--overlay-bg-medium: rgba(255, 255, 255, .08);--overlay-bg-strong: rgba(255, 255, 255, .1);--overlay-bg-stronger: rgba(255, 255, 255, .15);--border-subtle: rgba(255, 255, 255, .1);--border-medium: rgba(255, 255, 255, .15);--border-strong: rgba(255, 255, 255, .3);--hover-overlay: rgba(255, 255, 255, .04);--backdrop-overlay: rgba(0, 0, 0, .8);--scrollbar-track: rgba(255, 255, 255, .05);--scrollbar-thumb: rgba(255, 255, 255, .2);--scrollbar-thumb-hover: rgba(255, 255, 255, .3);--loading-bg: rgba(18, 18, 18, .8)}[data-theme=light]{--primary-bg: #F5F7FA;--secondary-bg: #FFFFFF;--card-bg: #FFFFFF;--card-hover: #F0F2F5;--surface-elevated: #FFFFFF;--surface-sunken: #F0F2F5;--text-primary: #1A1A1A;--text-secondary: #6B7280;--text-muted: #9CA3AF;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .08);--shadow-md: 0 4px 12px rgba(0, 0, 0, .12);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .16);--overlay-bg: rgba(0, 0, 0, .03);--overlay-bg-medium: rgba(0, 0, 0, .05);--overlay-bg-strong: rgba(0, 0, 0, .08);--overlay-bg-stronger: rgba(0, 0, 0, .12);--border-subtle: rgba(0, 0, 0, .08);--border-medium: rgba(0, 0, 0, .12);--border-strong: rgba(0, 0, 0, .18);--hover-overlay: rgba(0, 0, 0, .04);--backdrop-overlay: rgba(0, 0, 0, .5);--scrollbar-track: rgba(0, 0, 0, .03);--scrollbar-thumb: rgba(0, 0, 0, .15);--scrollbar-thumb-hover: rgba(0, 0, 0, .25);--loading-bg: rgba(248, 250, 251, .9)}@media(prefers-color-scheme:light){:root:not([data-theme]){--primary-bg: #F5F7FA;--secondary-bg: #FFFFFF;--card-bg: #FFFFFF;--card-hover: #F0F2F5;--text-primary: #1A1A1A;--text-secondary: #6B7280;--text-muted: #9CA3AF;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .08);--shadow-md: 0 4px 12px rgba(0, 0, 0, .12);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .16);--overlay-bg: rgba(0, 0, 0, .03);--overlay-bg-medium: rgba(0, 0, 0, .05);--overlay-bg-strong: rgba(0, 0, 0, .08);--overlay-bg-stronger: rgba(0, 0, 0, .12);--border-subtle: rgba(0, 0, 0, .08);--border-medium: rgba(0, 0, 0, .12);--border-strong: rgba(0, 0, 0, .18);--hover-overlay: rgba(0, 0, 0, .04);--backdrop-overlay: rgba(0, 0, 0, .5);--scrollbar-track: rgba(0, 0, 0, .03);--scrollbar-thumb: rgba(0, 0, 0, .15);--scrollbar-thumb-hover: rgba(0, 0, 0, .25);--loading-bg: rgba(248, 250, 251, .9)}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}:root{--blue-fill: #bcdbf7;--blue-line: #619ad3;--pink-fill: #f9e4e1;--pink-line: #dca9a2;--purple-fill: #e4d2fb;--purple-line: #8a62bd;--yellow-fill: #f8e6a7;--yellow-line: #d4a92b;--mint-fill: #d5efe1;--mint-line: #5d9d7c;--orange-fill: #f8d9bd;--orange-line: #cf823c;--page-bg: #fcfcfc;--surface: #ffffff;--ink: #111827;--ink-2: #374151;--muted: #6b7280;--rule: #e5e7eb;--ok: #16a34a}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0}body{min-height:100vh;background:var(--page-bg);color:var(--ink);font-family:Noto Sans TC,PingFang TC,system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}.blue{--fill: var(--blue-fill);--line: var(--blue-line)}.pink{--fill: var(--pink-fill);--line: var(--pink-line)}.purple{--fill: var(--purple-fill);--line: var(--purple-line)}.yellow{--fill: var(--yellow-fill);--line: var(--yellow-line)}.mint{--fill: var(--mint-fill);--line: var(--mint-line)}.orange{--fill: var(--orange-fill);--line: var(--orange-line)}.wrap{width:min(1040px,100%);margin:0 auto;padding:20px clamp(14px,3vw,32px) 48px}.top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:20px 0 18px;border-bottom:1px solid var(--rule)}.eyebrow{margin:0 0 5px;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.08em}.top h1{margin:0;font-size:clamp(25px,3vw,34px);line-height:1.2}.progress{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:12px;row-gap:3px;min-width:172px;padding:10px 12px;border:1px solid var(--rule);border-radius:12px;background:var(--surface)}.progress>span{color:var(--muted);font-size:12px}.progress strong{justify-self:end;font-size:17px}.progress strong[data-complete="1"]{color:var(--ok)}.progress button{grid-column:1 / -1;justify-self:end;padding:1px 0;border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.progress button:hover:not(:disabled){color:var(--ink)}.progress button:disabled{visibility:hidden}.progress button:focus-visible{outline:2px solid var(--blue-line);outline-offset:3px}.lead{margin:22px 0 20px;color:var(--ink-2);font-size:14px}.course-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.lesson-group{padding:16px;border:1px solid var(--rule);border-radius:16px;background:var(--surface);box-shadow:0 1px 2px #1118270a}.group-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.group-head h2{order:-1;display:flex;align-items:center;gap:8px;margin:0;color:var(--ink-2);font-size:14px}.group-head h2:before{content:"";width:12px;height:12px;border:1.5px solid var(--line);border-radius:4px;background:var(--fill)}.group-step{color:var(--muted);font-size:12px}.letter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px}.letter-card{position:relative;display:block;min-width:0;padding:7px;border:1.5px solid var(--line);border-radius:14px;background:var(--fill);color:var(--ink);font:inherit;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}.letter-image{display:block;width:100%;height:auto;border-radius:10px}.letter-check{position:absolute;top:-6px;right:-6px;display:none;width:20px;height:20px;border-radius:50%;background:var(--ok);color:#fff;font-size:12px;font-weight:700;line-height:20px;text-align:center;box-shadow:0 0 0 2px var(--surface)}.letter-card[data-seen="1"] .letter-check{display:block}.letter-card[data-seen="1"]{box-shadow:inset 0 0 0 2px #16a34a33}.letter-card:hover{transform:translateY(-2px);box-shadow:0 5px 12px #11182724}.letter-card:focus-visible{outline:3px solid var(--ink);outline-offset:2px;z-index:1}.source-note{margin-top:30px;padding-top:18px;border-top:1px solid var(--rule);color:var(--muted);font-size:12px;line-height:1.7}.source-note p{margin:0}.source-note a{color:var(--ink-2);text-underline-offset:3px}dialog{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:fit-content;max-width:min(1000px,94vw,calc((100dvh - 165px) * 16 / 9));max-height:calc(100dvh - 24px);margin:auto;padding:0;border:0;border-radius:16px;background:#fff;box-shadow:0 20px 60px #00000047}dialog::backdrop{background:#0f111594}.dclose{position:absolute;top:10px;right:10px;z-index:1;display:grid;width:34px;height:34px;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);font:inherit;font-size:24px;cursor:pointer}.dclose:hover{background:#f3f4f6;color:var(--ink)}.dclose:focus-visible{outline:2px solid var(--blue-line);outline-offset:2px}.dhead{display:flex;align-items:center;gap:12px;min-height:72px;padding:12px 56px 12px 18px}.dhead p{margin:0 0 2px;color:var(--muted);font-size:11px}.dhead h2{margin:0;font-size:19px}.player-letter{display:flex;align-items:baseline;justify-content:center;gap:2px;min-width:54px;padding:7px 9px;border:1px solid var(--blue-line);border-radius:11px;background:var(--blue-fill);font-family:Arial,Helvetica Neue,sans-serif}.player-letter strong{font-size:27px;line-height:1}.player-letter strong.uppercase-serif{font-family:Georgia,Times New Roman,serif}.player-letter span{font-size:18px;line-height:1}.vid{aspect-ratio:16 / 9;background:#000}.vid iframe{display:block;width:100%;height:100%;border:0}.dfoot{display:flex;align-items:center;gap:12px;padding:13px 20px 17px}.dfoot .seen{color:var(--ok);font-size:14px;font-weight:600}.dfoot .undo{margin-left:auto;padding:4px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.dfoot .undo:hover{color:var(--ink)}@media(max-width:720px){.top{align-items:flex-start}.course-groups{grid-template-columns:1fr}.lesson-group{padding:14px}}@media(max-width:480px){.top{display:grid}.progress{width:100%}.letter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.letter-card{padding:5px;border-radius:12px}.source-note span{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}.letter-cell{display:grid;gap:7px;min-width:0}.letter-cell .letter-card{width:100%}.practice-entry{min-height:38px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink-2);font:inherit;font-size:13px;cursor:pointer}.practice-entry:disabled{border-color:var(--rule);color:var(--muted);cursor:default}.practice-entry:focus-visible,.practice-button:focus-visible,.practice-choice:focus-visible{outline:3px solid var(--blue-line);outline-offset:3px}.practice-dialog{width:min(760px,94vw);max-width:94vw;max-height:calc(100dvh - 24px);overflow-y:auto}#practice-body{padding:0 20px 20px}.practice-step{margin:0 0 12px;color:var(--muted);font-size:13px}.practice-media{border-radius:12px;overflow:hidden}.practice-status,.practice-instruction{color:var(--ink-2);line-height:1.6;font-size:14px}.practice-instruction{margin-bottom:8px}.practice-choices{display:flex;flex-wrap:wrap;gap:12px}.practice-choice{flex:1 1 80px;min-height:62px;padding:12px;background:var(--blue-fill);border:2px solid var(--blue-line);border-radius:12px;color:var(--ink);font:600 26px Arial,sans-serif;cursor:pointer}.practice-choice:disabled{opacity:.55;cursor:default}.practice-choice[data-result=correct]{border-color:#15803d;background:#dcfce7;opacity:1}.practice-choice[data-result=retry]{border-color:#b45309;background:#fff7ed}.practice-feedback{min-height:24px;color:#92400e;font-size:14px;line-height:1.6}.practice-feedback[data-correct=true]{color:#166534}.practice-controls{display:flex;flex-wrap:wrap;gap:10px}.practice-button{padding:11px 18px;min-height:44px;background:#2563a6;color:#fff;border:1px solid #2563a6;border-radius:10px;font:inherit;font-size:14px;cursor:pointer}.practice-button.secondary{background:#fff;color:#2563a6}.practice-button:disabled{opacity:.45;cursor:default}.practice-result-title{margin:20px 0 12px;font-size:23px;font-weight:700}.practice-result-copy{color:var(--ink-2);line-height:1.7}#practice-body>.practice-button{margin:8px 10px 8px 0}@media(max-height:650px)and (min-width:700px){.practice-dialog{width:620px}.practice-media{max-height:260px}}@media(max-width:480px){#practice-body{padding:0 14px 16px}.practice-choice{min-height:54px}.practice-controls .practice-button{flex:1 1 auto}}