@import"https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+TC:wght@100..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-25..200";:root{--gray-50: #f8f8fa;--gray-100: #f1f0f4;--gray-200: #e7e6ec;--gray-300: #d4d3dc;--gray-400: #a9a8b6;--gray-500: #8f8e9c;--gray-600: #6d6c7c;--gray-700: #54546a;--gray-800: #3a3b50;--gray-900: #2f3147;--brand-50: #f3f4f7;--brand-100: #e3e4ec;--brand-200: #c6c8d8;--brand-300: #9a9db6;--brand-400: #6e7191;--brand-500: #4e5174;--brand-600: #3d4061;--brand-700: #33364f;--brand-800: #2f3147;--brand-900: #23253a;--success-50: #eef3ef;--success-100: #dde9e1;--success-200: #cad9cf;--success-300: #a6c2b0;--success-400: #74a187;--success-500: #3f7a57;--success-600: #356749;--success-700: #2c543c;--success-800: #234430;--success-900: #1a3324;--error-50: #f7efee;--error-100: #f0dedc;--error-200: #e3cfcc;--error-300: #d3aba7;--error-400: #bf827d;--error-500: #a85551;--error-600: #8f4744;--error-700: #743a37;--error-800: #5c2e2c;--error-900: #452322;--ink: var(--brand-800);--ink-soft: var(--brand-500);--fg1: var(--brand-800);--fg2: var(--gray-600);--fg3: var(--gray-500);--bg: #ffffff;--surface: var(--gray-50);--line: var(--gray-200);--muted: var(--gray-500);--btn-neutral:var(--gray-100);--ok: var(--success-500);--ok-bg: var(--success-50);--ok-border: var(--success-200);--ok-btn: var(--success-100);--ok-btn-border:#d2dfd6;--ng: var(--error-500);--ng-bg: var(--error-50);--ng-border: var(--error-200);--ng-btn: var(--error-100);--ng-btn-border:#e8d5d2;--radius-sm: 5px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 18px;--radius-2xl: 22px;--radius-3xl: 28px;--radius-pill:999px;--shadow-card: 0 8px 30px rgba(47,49,71,.12);--shadow-phone: 0 20px 60px rgba(47,49,71,.22);--shadow-sheet: 0 -8px 24px rgba(47,49,71,.12);--space-1: 4px;--space-1-5: 6px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 28px;--space-8: 32px;--space-9: 36px;--space-10: 40px;--ease-out-back: cubic-bezier(.22,1,.36,1);--dur-sheet: .4s;--font-jp: "Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP", system-ui,sans-serif;--font-tc: "Noto Sans TC","Hiragino Sans","PingFang TC",sans-serif;--font-mono: ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;--weight-regular: 400;--weight-medium: 500;--weight-semibold:600;--weight-bold: 700;--display: 44px;--hanzi-lg: 34px;--hanzi: 30px;--title: 22px;--h2: 19px;--body: 16px;--label: 15px;--caption: 14px;--micro: 12px}.t-display{font-family:var(--font-jp);font-size:var(--display);font-weight:var(--weight-bold);letter-spacing:2px;color:var(--ink);line-height:1.05}.t-hanzi{font-family:var(--font-tc);font-size:var(--hanzi-lg);font-weight:var(--weight-bold);color:var(--ink);line-height:1.1}h2.t-prompt,.t-prompt{font-family:var(--font-jp);font-size:var(--h2);font-weight:var(--weight-semibold);color:var(--ink);line-height:1.4}.t-choice{font-family:var(--font-tc);font-size:var(--title);font-weight:var(--weight-regular);color:var(--ink)}.t-body{font-family:var(--font-jp);font-size:var(--body);font-weight:var(--weight-regular);color:var(--ink);line-height:1.5}.t-pinyin{font-family:var(--font-jp);font-size:var(--caption);font-weight:var(--weight-regular);color:var(--muted)}.t-caption{font-family:var(--font-jp);font-size:var(--caption);color:var(--muted)}.t-tag{font-family:var(--font-jp);font-size:var(--label);font-weight:var(--weight-bold)}.t-mono{font-family:var(--font-mono);font-size:var(--micro);color:var(--muted)}.mi{display:inline-flex;align-items:center;justify-content:center;line-height:1}.mi>svg{width:1em;height:1em;display:block}.app-phone{width:380px;max-width:100%;background:var(--bg);border-radius:var(--radius-3xl);overflow:hidden;display:flex;flex-direction:column;position:relative;min-height:680px;box-shadow:var(--shadow-phone)}.quiz-header{background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-6);font-size:var(--body)}.quiz-header__close{background:none;border:none;color:#fff;opacity:.9;cursor:pointer;padding:0;display:flex;font-size:24px}.quiz-header__title{font-weight:var(--weight-medium)}.quiz-header__count{font-size:var(--label);opacity:.85}.q-prompt{font-size:var(--h2);font-weight:var(--weight-semibold);text-align:center;padding:var(--space-6) var(--space-5) var(--space-5);line-height:1.4}.q-word{display:flex;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--space-1-5) var(--space-5) var(--space-6)}.q-word__text{font-size:var(--hanzi);font-weight:var(--weight-semibold)}.q-word--pinyin .q-word__text{font-size:26px}.q-word--order{justify-content:space-between;padding:var(--space-1-5) var(--space-6) var(--space-6)}.q-word--order .q-word__text{font-size:var(--title);line-height:1.4;flex:1;text-align:left}.speaker{position:relative;width:40px;height:40px;border-radius:var(--radius-pill);background:var(--btn-neutral);border:1.5px solid var(--line);color:var(--ink);display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer;padding:0;font-size:20px}.speaker:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px}.speaker--sm{width:36px;height:36px;font-size:18px}.speaker--ok{background:var(--ok-btn);border-color:var(--ok-btn-border);color:var(--ok)}.speaker--ng{background:var(--ng-btn);border-color:var(--ng-btn-border);color:var(--ng)}.choice-list{display:flex;flex-direction:column;gap:var(--space-2);padding:0 var(--space-5) var(--space-10)}.choice{position:relative;width:100%;border:1.5px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-4);text-align:center;font-family:var(--font-tc);font-size:var(--title);color:var(--ink);background:#fff;cursor:pointer;transition:opacity .25s ease}.choice--correct{background:var(--ok-bg);border-color:var(--ok-border);color:var(--ok);font-weight:var(--weight-bold)}.choice--wrong{background:var(--ng-bg);border-color:var(--ng-border);color:var(--ng);font-weight:var(--weight-bold)}.choice--dim{opacity:.42}.choice__mark{position:absolute;right:var(--space-4);top:50%;transform:translateY(-50%);font-size:22px}.choice--correct .choice__mark{color:var(--ok)}.choice--wrong .choice__mark{color:var(--ng)}.pinyin-row{display:flex;justify-content:center;gap:var(--space-6);padding:var(--space-2) var(--space-5) var(--space-8);flex:1}.pinyin-slot{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}.pinyin-slot__han{font-family:var(--font-tc);font-size:44px;font-weight:var(--weight-semibold);color:var(--ink);line-height:1}.pinyin-slot__fill{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.pinyin-slot__fill--shake{animation:tw-shake .4s ease-in-out 0s 3}.pinyin-slot__pillrow{height:40px;display:flex;align-items:center}.pinyin-pill{padding:var(--space-2) var(--space-4);border-radius:var(--radius-lg);font-size:19px;font-weight:var(--weight-semibold);min-width:58px;text-align:center}.pinyin-pill--locked{background:var(--ok-btn);border:1.5px solid var(--ok-btn-border);color:var(--ok)}.pinyin-pill--error{background:var(--ng-btn);border:1.5px solid var(--ng-btn-border);color:var(--ng)}.pinyin-slot__underline{width:92px;border-bottom:2px solid var(--line);transition:border-color .2s}.pinyin-slot__underline--active{border-color:var(--brand-400)}.pinyin-candidates{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3);padding:0 var(--space-5) var(--space-10)}.pinyin-candidate{padding:var(--space-4) var(--space-7);border-radius:var(--radius-lg);border:1.5px solid var(--line);background:#fff;color:var(--ink);font-size:21px;font-weight:var(--weight-medium);cursor:pointer;min-width:92px}.wo-tray{margin:0 var(--space-6);min-height:148px;padding-top:var(--space-3);line-height:74px;background-image:linear-gradient(to bottom,#e0e0e0 1px,transparent 1px);background-size:100% 74px;display:flex;flex-wrap:wrap;align-content:flex-start;column-gap:var(--space-3);row-gap:var(--space-6)}.wo-tray--shake{animation:tw-shake .4s ease-in-out 0s 3}.wo-bank{margin-top:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3);padding:var(--space-7) var(--space-5) var(--space-10)}.wo-token{padding:var(--space-3) var(--space-6);border-radius:var(--radius-lg);font-family:var(--font-tc);font-size:var(--title);font-weight:var(--weight-medium);line-height:1.1;white-space:nowrap;cursor:pointer;border:1.5px solid transparent}.wo-token--bank{background:#fff;border-color:var(--line);color:var(--ink)}.wo-token--placed{background:var(--ink);border-color:var(--ink);color:#fff}.wo-token--ok{background:var(--ok-btn);border-color:var(--ok-btn-border);color:var(--ok)}.wo-token--error{background:var(--ng-btn);border-color:var(--ng-btn-border);color:var(--ng)}.sheet{position:absolute;left:0;right:0;bottom:0;border:1.5px solid;border-bottom:none;border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;padding:var(--space-4) var(--space-5) var(--space-6);box-shadow:var(--shadow-sheet);transform:translateY(100%);transition:transform var(--dur-sheet) var(--ease-out-back)}.sheet--open{transform:translateY(0)}.sheet--ok{background:var(--ok-bg);border-color:var(--ok-border)}.sheet--ng{background:var(--ng-bg);border-color:var(--ng-border)}.sheet__grip{width:40px;height:4px;border-radius:2px;margin:0 auto var(--space-3)}.sheet--ok .sheet__grip{background:var(--ok-border)}.sheet--ng .sheet__grip{background:var(--ng-border)}.sheet__tag{font-weight:var(--weight-bold);font-size:var(--label);margin-bottom:var(--space-3)}.sheet--ok .sheet__tag{color:var(--ok)}.sheet--ng .sheet__tag{color:var(--ng)}.sheet__your-answer{font-size:13px;color:var(--ng);margin-bottom:var(--space-3)}.sheet__your-answer b{font-weight:var(--weight-bold);font-family:var(--font-tc)}.sheet__detail{display:flex;align-items:center;gap:var(--space-4);padding-bottom:var(--space-4);border-bottom:1px solid}.sheet--ok .sheet__detail{border-bottom-color:var(--ok-border)}.sheet--ng .sheet__detail{border-bottom-color:var(--ng-border)}.sheet__hanzi{font-family:var(--font-tc);font-size:var(--hanzi-lg);font-weight:var(--weight-bold);flex:none}.sheet__gloss{flex:1;line-height:1.4}.sheet__pinyin{font-size:var(--caption);color:var(--muted)}.sheet__jp{font-size:var(--body)}.sheet__sentence{flex:1;line-height:1.35}.sheet__chunks{display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:var(--space-4);row-gap:var(--space-1);margin-bottom:var(--space-1-5)}.sheet__chunk{display:flex;flex-direction:column;align-items:flex-start}.sheet__chunk-py{font-size:13px;color:var(--muted);font-style:italic}.sheet__chunk-han{font-family:var(--font-tc);font-size:28px;font-weight:var(--weight-bold);line-height:1.1}.sheet__sentence .sheet__jp{font-size:var(--label)}.btn-primary{width:100%;padding:var(--space-4);border:none;cursor:pointer;border-radius:var(--radius-lg);background:var(--ink);color:#fff;text-align:center;font-size:var(--body);font-weight:var(--weight-semibold);font-family:inherit}.sheet__next{margin-top:var(--space-5)}.result__retry{margin:var(--space-1-5) var(--space-5) var(--space-6);width:auto}.result-score{text-align:center;padding:var(--space-7) var(--space-5) var(--space-5)}.result-score__num{font-size:var(--display);font-weight:var(--weight-bold);letter-spacing:2px}.result-score__num small{color:var(--muted)}.result-score__msg{margin-top:var(--space-1-5);font-size:17px;color:var(--ink-soft)}.result-list{padding:var(--space-1) var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)}.result-row{display:flex;align-items:center;gap:var(--space-3);background:#fff;border:1.5px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4)}.result-row--wrong{background:var(--ng-bg);border-color:var(--ng-border)}.result-row__mark{width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);font-size:18px;color:var(--ok);background:var(--ok-btn)}.result-row--wrong .result-row__mark{color:var(--ng);background:var(--ng-btn)}.result-row__hanzi{font-family:var(--font-tc);font-size:26px;font-weight:var(--weight-semibold);flex:none;width:62px;line-height:1.1}.result-row__body{flex:1;line-height:1.35}.result-row__pinyin{font-size:var(--caption);color:var(--muted)}.result-row__jp{font-size:var(--label)}.result-row .speaker{margin-left:auto}.result-row__chunks{display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:var(--space-3);row-gap:var(--space-1);margin-bottom:var(--space-1)}.result-row__chunk{display:flex;flex-direction:column;align-items:flex-start}.result-row__chunk-py{font-size:13px;color:var(--muted)}.result-row__chunk-han{font-family:var(--font-tc);font-size:24px;font-weight:var(--weight-semibold);line-height:1.1}@keyframes tw-shake{0%,to{transform:translate(0)}20%{transform:translate(-7px)}40%{transform:translate(6px)}60%{transform:translate(-5px)}80%{transform:translate(4px)}}@media (prefers-reduced-motion: reduce){.pinyin-slot__fill--shake,.wo-tray--shake,.sheet{animation:none;transition:none}}.switch{position:relative;display:inline-block;width:60px;height:34px;vertical-align:middle}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--gray-300);-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--primary-800)}input:focus+.slider{box-shadow:0 0 1px var(--primary-800)}input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translate(26px)}.slider.round{border-radius:1000px}.slider.round:before{border-radius:1000px}html,body{width:100%;margin:0;padding:0;-webkit-text-size-adjust:100%}*{-webkit-tap-highlight-color:transparent}