: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: #f1c9c4;--purple-fill: #c49bf9;--purple-line: #6a379d;--yellow-fill: #f8e6a7;--yellow-line: #ecbf43;--page-bg: #fcfcfc;--ink: #111827;--ink2: #374151;--muted: #6b7280;--rule: #e5e7eb;--ok: #16a34a;--cell: clamp(44px, 4.6vw, 60px);--fs: clamp(15px, 1.3vw, 19px);--r: 12px;--gap: clamp(6px, .7vw, 10px)}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0}body{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}.wrap{max-width:940px;margin:0 auto;padding:20px clamp(12px,3vw,28px) 64px}.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)}header.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:22px 0 18px;margin-bottom:24px;border-bottom:1px solid var(--rule)}header.top h1{margin:0;font-size:clamp(20px,2.4vw,26px);font-weight:700}.keys{display:flex;gap:clamp(10px,1.6vw,20px);flex-wrap:wrap;margin-left:auto}.key{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink2)}.key i{width:14px;height:14px;flex:none;border-radius:4px;border:1.5px solid var(--line);background:var(--fill)}button.key{border:0;background:none;padding:4px 2px;border-radius:6px;font:inherit;font-size:12.5px;color:var(--ink2);cursor:pointer}button.key:hover{background:#f3f4f6;color:var(--ink)}button.key:focus-visible{outline:2px solid var(--blue-line);outline-offset:1px}.cols{display:grid;grid-template-columns:1fr auto;gap:clamp(20px,4vw,56px);align-items:start}@media(max-width:820px){.cols{grid-template-columns:1fr}}#col-bottom{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px}#col-bottom>.block.words{flex:1 1 330px;margin-left:16px}.block{margin-bottom:26px}.block h2{margin:0 0 10px;font-size:13px;line-height:1.5;min-height:1.5em;font-weight:600;color:var(--ink2);display:flex;align-items:center;gap:8px}.block h2:before{content:"";width:11px;height:11px;flex:none;border-radius:3px;border:1.5px solid var(--line);background:var(--fill)}.block.cont h2{visibility:hidden}.sublbl{margin:2px 0 8px;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px}.row{display:flex;gap:var(--gap);margin-bottom:var(--gap);flex-wrap:wrap}.block.words .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.block.words .cell{padding:0 6px}.block.words .bandrow{display:flex}@media(max-width:640px){.block.words .row{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:430px){.block.words .row{grid-template-columns:1fr}}.block[data-align=end] h2,.block[data-align=end] .row,.block[data-align=end] .sublbl{justify-content:flex-end}@media(max-width:820px){.block[data-align=end] h2,.block[data-align=end] .row,.block[data-align=end] .sublbl{justify-content:flex-start}}.tail{margin-top:4px}.cell{min-width:var(--cell);height:var(--cell);width:auto;padding:0 clamp(6px,.8vw,12px);border:1.5px solid var(--line);border-radius:var(--r);background:var(--fill);font:inherit;font-size:var(--fs);color:var(--ink);white-space:nowrap;line-height:1;display:grid;place-items:center;position:relative}.band{display:flex;align-items:center;width:100%;text-align:left;height:var(--cell);font-size:var(--fs);border-radius:var(--r);padding:0 clamp(12px,1.3vw,18px);line-height:1.35;border:1.5px solid var(--line);background:var(--fill);font-family:inherit;color:var(--ink);position:relative}.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);align-items:stretch}@media(max-width:720px){.tiles{grid-template-columns:1fr}}button.cell,button.band{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}button.cell:hover,button.band:hover{transform:translateY(-2px);box-shadow:0 4px 10px #00000021;z-index:1}button.cell:focus-visible,button.band:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px;z-index:2}[data-seen="1"].cell:after,[data-seen="1"].band:after{content:"✓";position:absolute;top:-5px;right:-5px;width:17px;height:17px;border-radius:50%;background:var(--ok);color:#fff;font-size:11px;line-height:17px;text-align:center;font-weight:700}dialog{border:0;border-radius:16px;padding:0;max-width:min(1000px,94vw,calc((100dvh - 150px) * 16 / 9));width:100%;max-height:calc(100dvh - 24px);height:fit-content;margin:auto;box-shadow:0 20px 60px #00000047;background:#fff;position:fixed;top:0;right:0;bottom:0;left:0}dialog::backdrop{background:#0f11158c}.dclose{position:absolute;top:10px;right:10px;z-index:1;width:34px;height:34px;border:0;border-radius:50%;background:none;color:var(--muted);font:inherit;font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center}.dclose:hover{background:#f3f4f6;color:var(--ink)}.dclose:focus-visible{outline:2px solid var(--blue-line);outline-offset:2px}.dhead{padding:18px 56px 12px 22px}.dhead h3,.dhead h2{margin:0;font-size:19px;font-weight:700}.dhead .incl{padding:9px 12px;border-radius:8px;background:#f3f4f6;font-size:13.5px;color:var(--ink2)}.vid{aspect-ratio:16 / 9;background:#000}.vid iframe{width:100%;height:100%;border:0;display:block}.dfoot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:13px 22px 18px}.seen-controls{display:flex;align-items:center;gap:10px}.dfoot .seen{color:var(--ok);font-size:14px;font-weight:600}.dfoot .undo{background:none;border:0;padding:4px;cursor:pointer;font:inherit;font-size:13.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}.dfoot .undo:hover{color:var(--ink)}.dfoot .undo:focus-visible{outline:2px solid var(--blue-line);outline-offset:2px;border-radius:4px}.practice-launch{display:flex;align-items:center;gap:12px;margin-left:auto}.practice-launch span{color:var(--muted);font-size:13px}.practice-launch button,.practice-button{min-height:44px;padding:10px 17px;border-radius:10px;border:1.5px solid var(--blue-line);background:#fff;color:#2563a6;font:inherit;font-size:14px;font-weight:600;cursor:pointer}.practice-launch button.ready,.practice-button:not(.secondary){border-color:#2563a6;background:#2563a6;color:#fff}.practice-launch button:focus-visible,.practice-button:focus-visible,.practice-choice:focus-visible{outline:3px solid var(--blue-line);outline-offset:3px}.practice-button:disabled{opacity:.45;cursor:default}.practice-dialog{width:min(760px,94vw);max-width:94vw;max-height:calc(100dvh - 24px);overflow-y:auto}.practice-dialog .dhead{border-bottom:1px solid var(--rule)}.practice-kicker{margin:0 0 4px;color:var(--muted);font-size:12.5px}#practice-body{padding:18px 22px 22px}.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(--ink2);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-sorter{display:grid;gap:8px}.practice-sorter-label{margin:0;color:var(--muted);font-size:13px;font-weight:600}.practice-sorter-answer,.practice-tile-bank{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-height:66px;padding:10px;border-radius:12px}.practice-sorter-answer{border:2px dashed var(--blue-line);background:#f8fbff}.practice-sorter-answer[data-empty=true]:before{content:"依序點選下方字卡";color:var(--muted);font-size:14px}.practice-tile-bank{border:1px solid var(--rule);background:#fff}.practice-tile{min-width:68px;min-height:48px;padding:8px 14px;border:2px solid #e2b93b;border-radius:10px;background:#fff4bd;color:var(--ink);cursor:pointer;font:600 23px Arial,sans-serif}.practice-tile.selected{border-color:var(--blue-line);background:var(--blue-fill)}.practice-tile:disabled{opacity:.55;cursor:default}.practice-tile:focus-visible{outline:3px solid var(--blue-line);outline-offset:3px}.practice-sorter-actions{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 2px}.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-result-title{margin:8px 0 12px;font-size:23px;font-weight:700}.practice-result-copy{color:var(--ink2);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:560px){.practice-launch{width:100%;margin-left:0;align-items:stretch;flex-direction:column;gap:7px}.practice-launch button{width:100%}#practice-body{padding:14px 14px 18px}.practice-choice{min-height:54px}.practice-sorter-answer,.practice-tile-bank{min-height:60px;padding:8px}.practice-tile{flex:1 1 68px;min-height:52px}.practice-sorter-actions .practice-button{flex:1 1 120px}.practice-controls .practice-button{flex:1 1 auto}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}