.sf-root{--color-bg:#fff;--color-surface:#fff;--color-surface-alt:#f5f5f7;--color-border:#111;--color-text:#111;--color-text-muted:#5a5a66;--color-focus:#111;--color-correct:#0f7b3a;--color-incorrect:#b42318;--color-warn:#b54708;--color-lang-purple:#5b3df5;--color-lang-purple-hover:#4a2fdb;--color-lang-purple-fg:#fff;--color-lang-purple-wash:#efebff;--header-h:44px;--progress-h:8px;--color-progress-track:var(--color-border);--color-progress-fill:#12b69a;--color-stage:var(--color-surface-alt);--r-btn:4px;--r-card:8px;--r-chip:4px;--r-img:0;--border-hairline:1px solid var(--color-border);--border-focus:2px solid var(--color-focus);--focus-offset:2px;--shadow-none:none;--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--font-ui:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--fs-display:32px;--lh-display:40px;--fs-h1:24px;--lh-h1:32px;--fs-h2:18px;--lh-h2:24px;--fs-body:16px;--lh-body:24px;--fs-small:14px;--lh-small:20px;--fs-micro:12px;--lh-micro:16px;--fw-regular:400;--fw-medium:500;--fw-bold:700;--dur-fast:.12s;--dur-base:.2s;--dur-slow:.32s;--ease-standard:cubic-bezier(.2, 0, .2, 1);--dur-flipback:900;--dur-flipback-rm-factor:1.25;--dur-toast:1600;--dur-cue-press:600;--dur-peek-per-card:250;--dur-peek-min:1500;--dur-peek-max:6000;--frame-w:810px;--frame-h:1080px;--info-h:810px;--band-h:270px;--cuebar-h:56px;--cuepanel-h:142px;--stage-title-h:56px;font-family:var(--font-ui);color:var(--color-text);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;background:var(--color-surface-alt);width:100%;min-height:100dvh}.sf-root :focus-visible{outline:var(--border-focus);outline-offset:var(--focus-offset)}.sf-root svg{display:block}.sf-root [hidden]{display:none!important}.sf-root .sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.shell{min-height:100dvh;padding:var(--space-4) var(--space-4) var(--space-8);align-items:center;gap:var(--space-3);background:var(--color-surface-alt);box-sizing:border-box;flex-direction:column;display:flex;position:relative}@media (width>=768px){.shell{padding:var(--space-5) var(--space-5) var(--space-8)}}@media (width<=375px){.shell{padding:var(--space-2) var(--space-2) var(--space-8)}}.sf-header{width:100%;max-width:var(--frame-w);height:var(--header-h);align-items:center;gap:var(--space-3);box-sizing:border-box;background:0 0;display:flex}.sf-progress{height:var(--progress-h);background:var(--color-progress-track);border-radius:var(--r-chip);flex:auto;overflow:hidden}.sf-progress__fill{background:var(--color-progress-fill);transform-origin:0;width:100%;height:100%;transition:transform var(--dur-base) var(--ease-standard);transform:scaleX(0)}.sf-counter{font-size:var(--fs-small);line-height:var(--lh-small);font-weight:var(--fw-medium);font-variant-numeric:tabular-nums;text-align:right;flex:none;min-width:52px}.frame-scaler{width:100%;max-width:var(--frame-w);justify-content:center;display:flex}.frame{width:var(--frame-w);height:var(--frame-h);background:var(--color-surface);border:var(--border-hairline);border-radius:var(--r-card);transform-origin:top;box-shadow:var(--shadow-none);box-sizing:border-box;flex-direction:column;flex:none;display:flex;overflow:hidden}.sf-info{height:var(--info-h);flex:0 0 var(--info-h);padding:var(--space-4);border-bottom:var(--border-hairline);gap:var(--space-3);box-sizing:border-box;flex-direction:column;display:flex;position:relative}.sf-title{height:var(--stage-title-h);flex:0 0 var(--stage-title-h);font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:var(--fw-bold);text-align:center;justify-content:center;align-items:center;margin:0;display:flex}.sf-stage{min-height:0;padding:var(--space-4);background:var(--color-stage);border-radius:var(--r-card);box-sizing:border-box;flex:auto}.sf-grid{gap:var(--space-3);grid-template-columns:repeat(var(--cols), 1fr);grid-template-rows:repeat(var(--rows), 1fr);height:100%;display:grid}.sf-card{padding:var(--space-3) var(--space-2);border:var(--border-hairline);border-radius:var(--r-card);background:var(--color-lang-purple);color:var(--color-lang-purple-fg);font-family:var(--font-ui);font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:var(--fw-bold);cursor:pointer;box-shadow:var(--shadow-none);box-sizing:border-box;transition:background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);justify-content:center;align-items:center;display:flex;position:relative}.sf-card__mono{opacity:.45;pointer-events:none}.sf-card__mono svg{width:28px;height:28px}.sf-card__word{word-break:break-word;text-align:center;display:none}.sf-card[data-face=up]{background:var(--color-surface);color:var(--color-text)}.sf-card[data-face=up] .sf-card__mono{display:none}.sf-card[data-face=up] .sf-card__word{display:block}.sf-card[data-face=down]:hover{background:var(--color-lang-purple-hover)}.sf-card[data-state=target]{border-color:var(--color-lang-purple)}.sf-card[data-state=matched],.sf-card[data-state=revealed]{border-color:var(--color-correct);cursor:default}.sf-card[data-state=miss]{border-color:var(--color-incorrect)}.sf-card[disabled]{cursor:default}.sf-peek{left:var(--space-4);right:var(--space-4);top:var(--space-1);background:var(--color-surface-alt);border-radius:var(--r-chip);z-index:2;height:4px;display:none;position:absolute;overflow:hidden}.sf-peek[data-active=true]{display:block}.sf-peek__fill{background:var(--color-lang-purple);transform-origin:0;width:100%;height:100%}.sf-toast{left:50%;top:var(--space-5);padding:var(--space-2) var(--space-4);border:1px solid var(--color-lang-purple);border-radius:var(--r-chip);background:var(--color-surface);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:var(--fw-medium);z-index:3;display:none;position:absolute;transform:translate(-50%)}.sf-toast[data-active=true]{display:block}.sf-scrim{z-index:4;background:#1116;display:none;position:absolute;inset:0}.sf-scrim[data-active=true]{display:block}.sf-confirm{left:var(--space-6);right:var(--space-6);bottom:var(--space-6);padding:var(--space-5);background:var(--color-surface);border:var(--border-hairline);border-radius:var(--r-card);z-index:5;box-sizing:border-box;display:none;position:absolute}.sf-confirm[data-active=true]{display:block}.sf-confirm__q{margin:0 0 var(--space-4);font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:var(--fw-bold)}.sf-confirm__row{gap:var(--space-3);display:flex}.sf-confirm__row .btn-primary,.sf-confirm__row .btn-secondary{flex:1}.sf-band{height:var(--band-h);flex:0 0 var(--band-h);padding:var(--space-5);gap:var(--space-5);background:var(--color-surface);box-sizing:border-box;flex-direction:column;display:flex}.sf-cuebar{height:var(--cuebar-h);flex:0 0 var(--cuebar-h);gap:var(--space-3);grid-template-columns:repeat(3,1fr);display:grid}.sf-cuepanel{height:var(--cuepanel-h);flex:0 0 var(--cuepanel-h);padding:var(--space-4);border:var(--border-hairline);border-radius:var(--r-card);background:var(--color-surface);box-sizing:border-box;position:relative;overflow:auto}.sf-cuepanel[data-empty=true]{border-color:var(--color-text-muted);color:var(--color-text-muted);font-size:var(--fs-small);line-height:var(--lh-small);justify-content:center;align-items:center;display:flex}.sf-cuepanel__close{top:var(--space-2);right:var(--space-2);border:var(--border-hairline);border-radius:var(--r-btn);background:var(--color-surface);width:44px;height:44px;color:var(--color-text);cursor:pointer;justify-content:center;align-items:center;display:flex;position:absolute}.sf-cuepanel__close svg{width:14px;height:14px}.sf-def__word{margin:0 0 var(--space-1);font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:var(--fw-bold)}.sf-def__ipa{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--color-text-muted);margin:0}.sf-def__en{margin:var(--space-1) 0 0;font-size:var(--fs-small);line-height:var(--lh-small)}.sf-def__vi{margin:var(--space-1) 0 0;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--color-text-muted)}.sf-results{justify-content:center;align-items:center;gap:var(--space-4);text-align:center;box-sizing:border-box;flex-direction:column;height:100%;display:flex}.sf-results__brainy{width:200px;height:200px;color:var(--color-lang-purple)}.sf-results__brainy svg{width:100%;height:100%}.sf-results__deck{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--color-text-muted);margin:0}.sf-results__title{font-size:var(--fs-display);line-height:var(--lh-display);font-weight:var(--fw-bold);margin:0}.sf-results__score{align-items:baseline;gap:var(--space-2);font-variant-numeric:tabular-nums;display:flex}.sf-results__scoreNum{font-size:64px;line-height:1;font-weight:var(--fw-bold);color:var(--color-lang-purple)}.sf-results__scoreMax{font-size:var(--fs-h2);line-height:var(--lh-h2);color:var(--color-text-muted)}.sf-results__stats{gap:var(--space-1);flex-direction:column;width:100%;max-width:520px;margin:0;display:flex}.sf-results__row{font-size:var(--fs-body);line-height:var(--lh-body);justify-content:space-between;display:flex}.sf-results__row dt{color:var(--color-text-muted);margin:0}.sf-results__row dd{font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;margin:0}.sf-results__chip{padding:var(--space-2) var(--space-4);border:1px solid var(--color-lang-purple);border-radius:var(--r-chip);background:var(--color-lang-purple-wash);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:var(--fw-medium)}.sf-results__note{max-width:560px;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--color-text-muted);margin:0}.sf-resultsband{height:var(--band-h);flex:0 0 var(--band-h);padding:var(--space-5);gap:var(--space-4);background:var(--color-surface);box-sizing:border-box;flex-direction:column;display:flex}.sf-resultsband .btn-primary,.sf-resultsband .btn-secondary{width:100%}.sf-summary{width:100%;max-width:var(--frame-w);background:var(--color-surface);border:var(--border-hairline);border-radius:var(--r-card);padding:var(--space-4);box-sizing:border-box}@media (width>=1280px){.sf-summary{max-width:720px}}.sf-summary__title{margin:0 0 var(--space-3);font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:var(--fw-bold)}.sf-summary__list{margin:0;padding:0;list-style:none}.sf-summary__item{border-top:var(--border-hairline)}.sf-summary__item:first-child{border-top:0}.sf-summary__head{align-items:center;gap:var(--space-3);width:100%;min-height:56px;padding:var(--space-2) 0;font-family:var(--font-ui);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--color-text);cursor:pointer;text-align:left;background:0 0;border:0;display:flex}.sf-summary__pair{font-weight:var(--fw-bold);flex:auto}.sf-summary__arrow{color:var(--color-lang-purple);padding:0 var(--space-1)}.sf-summary__mark{font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:var(--fw-medium);padding:var(--space-1) var(--space-2);border-radius:var(--r-chip);border:1px solid;flex:none}.sf-summary__mark[data-outcome=first]{color:var(--color-correct)}.sf-summary__mark[data-outcome=miss]{color:var(--color-warn)}.sf-summary__mark[data-outcome=revealed]{color:var(--color-lang-purple)}.sf-summary__mark[data-outcome=unsolved]{color:var(--color-text-muted)}.sf-summary__body{padding:0 0 var(--space-3);gap:var(--space-1);flex-direction:column;display:flex}.sf-summary__ipa{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--color-text-muted);margin:0}.sf-summary__en{font-size:var(--fs-small);line-height:var(--lh-small);margin:0}.sf-summary__vi{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--color-text-muted);margin:0}.sf-summary__audio{align-self:flex-start;align-items:center;gap:var(--space-2);min-height:44px;padding:var(--space-2) var(--space-3);border:var(--border-hairline);border-radius:var(--r-btn);background:var(--color-surface);color:var(--color-lang-purple);font-family:var(--font-ui);font-size:var(--fs-small);font-weight:var(--fw-medium);cursor:pointer;display:inline-flex}.sf-summary__audio svg{width:18px;height:18px}.sf-summary__audio:disabled{color:var(--color-text-muted);border-color:var(--color-text-muted);cursor:not-allowed}.sf-summary__legend{margin:var(--space-3) 0 0;font-size:var(--fs-micro);line-height:var(--lh-micro);color:var(--color-text-muted)}.sf-guest{left:var(--space-4);bottom:var(--space-4);align-items:center;gap:var(--space-2);min-height:36px;padding:var(--space-1) var(--space-3);background:var(--color-surface);border:1px solid var(--color-lang-purple);border-radius:var(--r-chip);color:var(--color-lang-purple);font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:var(--fw-medium);z-index:10;display:inline-flex;position:fixed}.sf-guest svg{width:14px;height:14px}.btn-primary,.btn-secondary{min-height:44px;padding:var(--space-3) var(--space-5);border:var(--border-hairline);border-radius:var(--r-btn);font-family:var(--font-ui);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-medium);background:var(--color-surface);color:var(--color-text);cursor:pointer;box-shadow:var(--shadow-none);box-sizing:border-box;transition:background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard)}.btn-primary{background:var(--color-text);color:var(--color-bg)}.btn-primary:hover{background:#000}.btn-secondary:hover{background:var(--color-surface-alt)}.btn-ghost{width:44px;height:44px;padding:var(--space-2);border-radius:var(--r-btn);color:var(--color-text);cursor:pointer;box-sizing:border-box;background:0 0;border:1px solid #0000;flex:0 0 44px;justify-content:center;align-items:center;display:inline-flex}.btn-ghost:hover{background:var(--color-surface-alt);border-color:var(--color-border)}.btn-ghost svg{width:20px;height:20px}.btn-cue{justify-content:center;align-items:center;gap:var(--space-2);min-height:44px;padding:var(--space-2);border:var(--border-hairline);border-radius:var(--r-btn);background:var(--color-surface);color:var(--color-lang-purple);font-family:var(--font-ui);cursor:pointer;box-shadow:var(--shadow-none);box-sizing:border-box;transition:background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);flex-direction:row;display:flex}.btn-cue:hover:not(:disabled){background:var(--color-surface-alt)}.btn-cue svg{flex:0 0 18px;width:18px;height:18px}.btn-cue__label{font-size:var(--fs-small);line-height:var(--lh-small);font-weight:var(--fw-medium)}.btn-cue[aria-pressed=true]{background:var(--color-lang-purple);color:var(--color-lang-purple-fg);border-color:var(--color-lang-purple)}.btn-cue:disabled,.btn-primary:disabled,.btn-secondary:disabled{color:var(--color-text-muted);border-color:var(--color-text-muted);background:var(--color-surface);cursor:not-allowed}@media (width<=375px){.btn-cue{gap:var(--space-1);flex-direction:column}.btn-cue__label{font-size:var(--fs-micro);line-height:var(--lh-micro)}}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}