.fzsp{
  --bg:#EEF3F1; --panel:#FFFFFF; --ink:#0F2A44; --muted:#5A6B7B; --line:#CFDBD6;
  --navy:#0F2A44; --brass:#C98E12; --brass-soft:#F6E7C4; --sea:#2F6F6A; --sea-soft:#D6EAE6;
  --good:#1E8A52; --good-soft:#DDF2E6; --bad:#C0392B; --bad-soft:#F8DEDA;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}@media (prefers-color-scheme: dark){.fzsp:not([data-theme="light"]){ --bg:#0C1826; --panel:#132338; --ink:#E6EEF3; --muted:#93A4B4; --line:#24384F; --navy:#E6EEF3; --brass:#E8B44A; --brass-soft:#3A2E14; --sea:#6FC0B6; --sea-soft:#163A38; --good:#5CD08F; --good-soft:#15352A; --bad:#F08C79; --bad-soft:#3D1F1A; }}.fzsp[data-theme="dark"]{ --bg:#0C1826; --panel:#132338; --ink:#E6EEF3; --muted:#93A4B4; --line:#24384F; --navy:#E6EEF3; --brass:#E8B44A; --brass-soft:#3A2E14; --sea:#6FC0B6; --sea-soft:#163A38; --good:#5CD08F; --good-soft:#15352A; --bad:#F08C79; --bad-soft:#3D1F1A; }.fzsp *, .fzsp *::before, .fzsp *::after{box-sizing:border-box}.fzsp{background:var(--bg);color:var(--ink);font:16px/1.5 "Barlow",system-ui,-apple-system,"Segoe UI",sans-serif}.fzsp .wrap{max-width:720px;margin:0 auto;padding:28px 18px 48px}.fzsp h1{font:700 2.4rem/1 "Barlow Condensed","Arial Narrow",sans-serif;margin:0 0 6px}.fzsp .lede{color:var(--muted);margin:0 0 20px;max-width:60ch}.fzsp button{font:inherit;cursor:pointer}.fzsp button:focus-visible, .fzsp input:focus-visible{outline:3px solid var(--brass);outline-offset:2px}.fzsp button:disabled{opacity:.5;cursor:not-allowed}.fzsp .tabs{display:flex;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:5px;margin-bottom:14px}.fzsp .tab{flex:1;border:0;background:transparent;color:var(--ink);padding:10px;border-radius:8px;font-weight:600}.fzsp .tab[aria-selected="true"]{background:var(--navy);color:var(--bg)}.fzsp .setup{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}.fzsp .field{margin-bottom:16px}.fzsp .field > span{display:block;font-weight:600;margin-bottom:8px}.fzsp .chips{display:flex;flex-wrap:wrap;gap:8px}.fzsp .chip{border:1.5px solid var(--line);background:transparent;color:var(--ink);padding:8px 12px;border-radius:999px;text-align:left}.fzsp .chip[aria-pressed="true"]{border-color:var(--navy);background:var(--navy);color:var(--bg)}.fzsp .stack{display:grid;gap:8px}.fzsp .stack .chip{border-radius:10px;padding:10px 12px}.fzsp .chip small{display:block;opacity:.75;font-size:.85rem}.fzsp .key{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:11px 12px;background:var(--bg);color:var(--ink);font:inherit}.fzsp .hint{color:var(--muted);font-size:.88rem;margin:6px 0 0}.fzsp .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.fzsp input[type=range]{accent-color:var(--sea);width:180px}.fzsp .start{display:inline-flex;align-items:center;gap:10px;margin-top:6px;background:#1E9E5A;color:#fff;border:0;border-radius:999px;padding:13px 22px;font-weight:600;font-size:1.05rem}.fzsp .start svg{width:20px;height:20px}.fzsp .err{color:var(--bad)}.fzsp .panel{display:none}.fzsp .panel.on{display:block}.fzsp /* drill */
.drill{display:none;margin-top:14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}.fzsp .drill.on{display:block}.fzsp .dtop{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.92rem;margin-bottom:12px}.fzsp .focus{background:var(--sea-soft);color:var(--sea);padding:3px 10px;border-radius:999px;font-weight:600}.fzsp .sentence{font:500 1.9rem/1.3 "Barlow",sans-serif;margin:6px 0 4px;letter-spacing:.005em}.fzsp .sentence .w{border-radius:6px;padding:0 3px}.fzsp .sentence .ok{background:var(--good-soft);color:var(--good)}.fzsp .sentence .miss{background:var(--bad-soft);color:var(--bad);text-decoration:underline wavy;text-underline-offset:5px}.fzsp .tipline{color:var(--muted);margin:0 0 16px}.fzsp .dbtns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.fzsp .btn{border:1.5px solid var(--line);background:transparent;color:var(--ink);border-radius:10px;padding:10px 14px;font-weight:600}.fzsp .rec{width:74px;height:74px;border-radius:50%;border:0;background:var(--navy);color:var(--bg);display:grid;place-items:center;position:relative}.fzsp .rec svg{width:30px;height:30px}.fzsp .rec.live{background:var(--bad);color:#fff}.fzsp .rec.live::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid var(--bad);animation:ring 1.2s ease-out infinite}
@keyframes ring{from{opacity:.8;transform:scale(.9)}to{opacity:0;transform:scale(1.25)}}.fzsp .result{margin-top:18px;min-height:2em}.fzsp .big{font:700 2.6rem/1 "Barlow Condensed",sans-serif}.fzsp .heard{color:var(--muted);margin-top:6px}.fzsp .dnav{display:flex;justify-content:space-between;margin-top:20px;gap:10px}.fzsp .primary{background:var(--brass);color:#1A1405;border:0;border-radius:10px;padding:11px 18px;font-weight:600}.fzsp /* rapid */
.rapid{display:none;margin-top:14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}.fzsp .rapid.on{display:block}.fzsp .rq{font:500 1.8rem/1.3 "Barlow",sans-serif;margin:8px 0 14px}.fzsp .clockbar{height:10px;border-radius:6px;background:var(--line);overflow:hidden;margin-bottom:8px}.fzsp .clockbar i{display:block;height:100%;width:0;background:var(--sea);transition:width .1s linear}.fzsp .clockbar.late i{background:var(--bad)}.fzsp .rstate{font-weight:600;min-height:1.5em}.fzsp .rlive{color:var(--muted);min-height:3em;margin-top:8px;font-size:1.05rem}.fzsp .starters{margin-top:14px;padding:10px 12px;border-radius:10px;background:var(--brass-soft);font-size:.93rem}.fzsp .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0}.fzsp .stat{border:1px solid var(--line);border-radius:10px;padding:10px;text-align:center}.fzsp .stat b{display:block;font:700 1.9rem/1.1 "Barlow Condensed",sans-serif}.fzsp .stat span{color:var(--muted);font-size:.85rem}.fzsp .qa{border-top:1px solid var(--line);padding:10px 0}.fzsp .qa .q{font-weight:600}.fzsp .qa .m{color:var(--muted);font-size:.88rem}.fzsp /* phone call */
.phone{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:space-between;
  background:radial-gradient(120% 80% at 50% 20%,#1D4466 0%,#0A1B2C 70%);color:#fff;
  padding:calc(env(safe-area-inset-top,0px) + 40px) 24px calc(env(safe-area-inset-bottom,0px) + 36px);z-index:10}.fzsp .phone.tutor{background:radial-gradient(120% 80% at 50% 20%,#2C5A55 0%,#0E1F24 70%)}.fzsp .phone.on{display:flex}.fzsp .top{text-align:center}.fzsp .pname{font:600 2rem/1.1 "Barlow Condensed",sans-serif;margin:0}.fzsp .prole{opacity:.7;margin:4px 0 0;font-size:.95rem}.fzsp .status{margin-top:10px;font-variant-numeric:tabular-nums;opacity:.85;min-height:1.5em}.fzsp .face{position:relative;width:170px;height:170px;display:grid;place-items:center}.fzsp .face .ini{width:150px;height:150px;border-radius:50%;background:#2F6F6A;display:grid;place-items:center;font:700 3.2rem "Barlow Condensed",sans-serif;position:relative;z-index:2}.fzsp .phone.tutor .face .ini{background:#C98E12}.fzsp .face .ring{position:absolute;inset:10px;border-radius:50%;border:3px solid #6FC0B6;opacity:0}.fzsp .phone[data-s="them"] .ring{animation:pulse 1.3s ease-out infinite}.fzsp .phone[data-s="them"] .ring.r2{animation-delay:.45s}.fzsp .phone[data-s="ringing"] .ini{animation:shake .5s ease-in-out infinite}
@keyframes pulse{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.45)}}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}.fzsp .bars{display:flex;gap:5px;height:28px;align-items:center;margin-top:18px;opacity:0;transition:opacity .2s}.fzsp .phone[data-s="you"] .bars{opacity:1}.fzsp .bars i{width:5px;border-radius:3px;background:#E8B44A;height:8px;animation:bar .9s ease-in-out infinite}.fzsp .bars i:nth-child(2){animation-delay:.15s}.fzsp .bars i:nth-child(3){animation-delay:.3s}.fzsp .bars i:nth-child(4){animation-delay:.45s}.fzsp .bars i:nth-child(5){animation-delay:.6s}
@keyframes bar{0%,100%{height:6px}50%{height:26px}}@media (prefers-reduced-motion: reduce){.fzsp .ring, .fzsp .bars i, .fzsp .ini, .fzsp .rec.live::after{animation:none!important}.fzsp .phone[data-s="them"] .ring{opacity:.5}}.fzsp .mid{display:flex;flex-direction:column;align-items:center;width:100%}.fzsp .caption{max-width:560px;text-align:center;min-height:3.2em;margin-top:18px;font-size:1.1rem;line-height:1.45;opacity:.92}.fzsp .caption .who{display:block;font-size:.8rem;opacity:.6;margin-bottom:2px}.fzsp .tip{max-width:560px;margin-top:10px;background:rgba(232,180,74,.16);border-left:3px solid #E8B44A;padding:8px 12px;border-radius:8px;font-size:.95rem;display:none}.fzsp .tip.on{display:block}.fzsp .tip s{opacity:.7}.fzsp .typebox{display:none;gap:8px;width:100%;max-width:560px;margin-top:14px}.fzsp .typebox.on{display:flex}.fzsp .typebox input{flex:1;border:0;border-radius:999px;padding:12px 16px;font:inherit}.fzsp .typebox button{border:0;border-radius:999px;padding:0 18px;background:#2F6F6A;color:#fff;font-weight:600}.fzsp .keys{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;justify-content:center}.fzsp .key-btn{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;color:#fff;font-size:.85rem}.fzsp .key-btn .c{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center}.fzsp .key-btn[aria-pressed="true"] .c{background:#fff;color:#0A1B2C}.fzsp .key-btn svg{width:26px;height:26px}.fzsp .key-btn.hang .c{background:#E0392B;width:70px;height:70px}.fzsp .key-btn.hang svg{transform:rotate(135deg)}.fzsp /* report */
.report{display:none;margin-top:18px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}.fzsp .report.on{display:block}.fzsp .score{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}.fzsp .score b{font:700 3.2rem/1 "Barlow Condensed",sans-serif;color:var(--brass)}.fzsp .report h2{font:700 1.5rem "Barlow Condensed",sans-serif;margin:0 0 4px}.fzsp .report h3{font:700 1.15rem "Barlow Condensed",sans-serif;margin:20px 0 8px}.fzsp .report ul{margin:0;padding-left:20px}.fzsp .pair{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px}.fzsp .pair .said{color:var(--bad);text-decoration:line-through;text-decoration-thickness:1px}.fzsp .pair .better{color:var(--sea);font-weight:600}.fzsp .pair .why{color:var(--muted);font-size:.9rem}.fzsp .phrase{display:flex;gap:10px;align-items:flex-start;margin-bottom:6px}.fzsp .speak{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:8px;padding:2px 8px;font-size:.85rem;flex:none}.fzsp details{margin-top:18px}.fzsp summary{cursor:pointer;font-weight:600}.fzsp .line{margin:6px 0}
/* ---- login + standalone additions ---- */
.fzsp .fzsp-login-wrap{max-width:460px}
.fzsp .fzsp-login{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:16px;margin:8px 0 18px}
.fzsp .fzsp-login .field{display:flex;flex-direction:column;gap:6px}
.fzsp .fzsp-login .key{width:100%;max-width:none}
.fzsp .fzsp-login .start{width:100%;justify-content:center}
.fzsp .fzsp-signedin{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px;font-size:14px;color:var(--muted)}
.fzsp .fzsp-signedin a{color:var(--muted);text-decoration:underline}
.fzsp .fzsp-signedin a:hover{color:var(--ink)}