/* ===== 07 · Word formation template — styles ===== */
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:block}
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-latin-wght-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:block}
@font-face{font-family:"DM Sans";src:url(fonts/dm-sans-latin-wght-normal.woff2) format("woff2");font-weight:100 1000;font-display:block}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2");font-weight:100 800;font-display:block}
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque-latin-600-normal.woff2) format("woff2");font-weight:400 650;font-display:block}
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2");font-weight:651 900;font-display:block}
@font-face{font-family:"Space Grotesk";src:url(fonts/space-grotesk-latin-500-normal.woff2) format("woff2");font-weight:300 600;font-display:block}
@font-face{font-family:"Space Grotesk";src:url(fonts/space-grotesk-latin-700-normal.woff2) format("woff2");font-weight:601 900;font-display:block}
@font-face{font-family:"Nunito";src:url(fonts/nunito-latin-400-normal.woff2) format("woff2");font-weight:300 500;font-display:block}
@font-face{font-family:"Nunito";src:url(fonts/nunito-latin-700-normal.woff2) format("woff2");font-weight:501 750;font-display:block}
@font-face{font-family:"Nunito";src:url(fonts/nunito-latin-800-normal.woff2) format("woff2");font-weight:751 900;font-display:block}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");font-weight:300 550;font-display:block}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");font-weight:551 900;font-display:block}

:root{
  --bg:#F5F1EA; --ink:#1B2233; --a1:#3F51E8; --a2:#F2643D; --ok:#178A5E; --bad:#D8344A;
  --fd:"Fraunces",Georgia,serif; --fb:"DM Sans",system-ui,sans-serif; --fm:"JetBrains Mono",ui-monospace,monospace;
  --fs:36px; --sx:3%; --sy:6%; --sw:52%; --sh:88%;
  --muted:color-mix(in srgb,var(--ink) 58%,transparent);
  --hair:color-mix(in srgb,var(--ink) 16%,transparent);
  --noun:var(--a1); --verb:var(--a2);
  --adjective:color-mix(in oklch,var(--a1) 45%,var(--a2)); --adverb:color-mix(in oklch,var(--ink) 50%,var(--a1));
  --glow:1;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#15171c;font-family:system-ui,sans-serif}
body.bg-transparent,html.bg-transparent{background:transparent}

/* ---------- stage ---------- */
#viewport{position:fixed;left:0;top:0;right:0;bottom:64px;display:grid;place-items:center;overflow:hidden}
body.clean #viewport,body.nohud #viewport{bottom:0}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;background:transparent}
#bg{position:absolute;inset:0;background:var(--bg);overflow:hidden}
#bg.area-safe{left:var(--sx);top:var(--sy);width:var(--sw);height:var(--sh);inset:auto;border-radius:28px}
#bg .orb{position:absolute;width:900px;height:900px;border-radius:50%;filter:blur(40px);opacity:.55;will-change:transform}
#bg .o1{background:radial-gradient(closest-side,color-mix(in srgb,var(--a1) 22%,transparent),transparent)}
#bg .o2{background:radial-gradient(closest-side,color-mix(in srgb,var(--a2) 20%,transparent),transparent)}
#bg .grain{position:absolute;inset:0;opacity:.07;mix-blend-mode:multiply;background-size:220px 220px}
.bgmode-off #bg .orb,.bgmode-off #bg .grain,.bgmode-chroma #bg .orb,.bgmode-chroma #bg .grain,.bgmode-chromablue #bg .orb,.bgmode-chromablue #bg .grain{display:none}
.bgmode-transparent #bg{display:none}
.bgmode-chroma #bg{background:#00B140!important;inset:0!important;left:0!important;top:0!important;width:100%!important;height:100%!important;border-radius:0!important}
.bgmode-chromablue #bg{background:#0047BB!important;inset:0!important;left:0!important;top:0!important;width:100%!important;height:100%!important;border-radius:0!important}
.bgmode-chroma,.bgmode-chromablue{--glow:0}
#plate{position:absolute;inset:0;width:1920px;height:1080px;display:none;mix-blend-mode:multiply;pointer-events:none}
.show-plate #plate{display:block}
#safe{position:absolute;left:var(--sx);top:var(--sy);width:var(--sw);height:var(--sh);overflow:hidden}
#host{position:absolute;left:calc(var(--fs)*1.1);right:calc(var(--fs)*1.1);top:calc(var(--fs)*2.3);bottom:calc(var(--fs)*1.1)}
#fx{position:absolute;inset:0;pointer-events:none}
#guides{position:absolute;inset:0;pointer-events:none;display:none}
.show-guides #guides{display:block}
#guides .g-safe{position:absolute;left:var(--sx);top:var(--sy);width:var(--sw);height:var(--sh);outline:3px dashed rgba(255,0,140,.8);outline-offset:-2px}
#guides .g-narr{position:absolute;top:0;bottom:0;right:0;left:calc(var(--sx) + var(--sw));background:repeating-linear-gradient(135deg,rgba(255,0,140,.10) 0 14px,transparent 14px 28px);border-left:3px solid rgba(255,0,140,.8)}
#guides .g-narr span{position:absolute;top:16px;left:16px;font:600 20px/1.2 system-ui;color:#c0007a;background:#fff;padding:6px 10px;border-radius:6px}
body.clean #guides,body.clean #plate{display:none!important}

/* ---------- progress rail (persistent) ---------- */
#rail{position:absolute;left:calc(var(--fs)*1.1);right:calc(var(--fs)*1.1);top:calc(var(--fs)*.9);display:flex;align-items:center;gap:calc(var(--fs)*.5);opacity:0;font:600 calc(var(--fs)*.36)/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#rail .r-num{color:var(--ink);white-space:nowrap}
#rail .r-num b{color:var(--a1);font-weight:700}
#rail .r-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.06em;text-transform:none;font:500 calc(var(--fs)*.42)/1 var(--fb);color:var(--muted);max-width:48%}
#rail .r-ticks{flex:1;display:flex;gap:4px;min-width:30%}
#rail .r-ticks i{flex:1;height:4px;border-radius:2px;background:var(--hair)}
#rail .r-ticks i.done{background:color-mix(in srgb,var(--a1) 55%,transparent)}
#rail .r-ticks i.cur{background:var(--a2)}

/* ---------- scene base ---------- */
.scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;color:var(--ink);font-family:var(--fb);--u:calc(var(--fs)*var(--k,1))}
.scene>.inner{display:flex;flex-direction:column;gap:calc(var(--u)*.7);min-width:0}
.kicker{display:flex;align-items:center;gap:.8em;font:600 calc(var(--u)*.4)/1.2 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--a1)}
.kicker::before{content:"";width:2.2em;height:2px;background:currentColor;transform-origin:left;transform:scaleX(var(--kx,1))}
.disp{font-family:var(--fd);font-weight:560;letter-spacing:-.01em;font-optical-sizing:auto}
.w{display:inline-block;white-space:nowrap}
.sw .syl+.syl{margin-left:.2em}
.chip{display:inline-flex;align-items:center;gap:.45em;padding:.38em .8em .36em;border-radius:99px;font:600 calc(var(--u)*.36)/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--c,var(--a1));background:color-mix(in srgb,var(--c,var(--a1)) 12%,transparent);white-space:nowrap}
.chip::before{content:"";width:.55em;height:.55em;border-radius:50%;background:currentColor}
.chip.plain::before{display:none}
[data-cls=noun]{--c:var(--noun)} [data-cls=verb]{--c:var(--verb)} [data-cls=adjective]{--c:var(--adjective)} [data-cls=adverb]{--c:var(--adverb)}
.caption{font:500 calc(var(--u)*.72)/1.35 var(--fb);color:var(--muted);display:flex;gap:.6em;align-items:baseline}
.caption::before{content:"";flex:none;width:.5em;height:.5em;border-radius:50%;background:var(--a2);transform:translateY(-.1em)}

/* keyword highlight */
.kw{position:relative;display:inline-block;white-space:nowrap;font-weight:700;z-index:0}
.kw .hl{position:absolute;left:-.12em;right:-.12em;bottom:.04em;height:.5em;border-radius:.12em;background:color-mix(in srgb,var(--a2) 30%,transparent);z-index:-1;transform-origin:left center;transform:scaleX(0)}

/* ---------- syllable word ---------- */
.sw{position:relative;display:inline-block;white-space:nowrap;line-height:1.05;padding-bottom:.42em}
.sw .syl{position:relative;display:inline-block;z-index:1}
.sw .l{display:inline-block}
.sw .l.sfx,.sw .l.pfx{color:var(--a2)}
.sw .lens{opacity:0;position:absolute;z-index:0;top:-.08em;height:1.18em;border-radius:.26em;left:0;width:10px;pointer-events:none}
.sw .lens i{position:absolute;inset:0;border-radius:inherit}
.sw .lens .f-ok{background:color-mix(in srgb,var(--a1) 15%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--a1) 55%,transparent)}
.sw .lens .f-bad{background:color-mix(in srgb,var(--bad) 13%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--bad) 60%,transparent)}
.sw .lens b{position:absolute;left:50%;top:-.62em;transform:translateX(-50%);font:700 calc(var(--u)*.34)/1 var(--fm);letter-spacing:.08em;white-space:nowrap;padding:.28em .5em;border-radius:99px;color:#fff}
.sw .lens b.t-bad{background:var(--bad)} .sw .lens b.t-ok{background:var(--a1)}
.sw .beads{position:absolute;left:0;right:0;bottom:.08em;height:.3em}
.sw .beads .rule{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--hair);transform-origin:left}
.sw .bead{position:absolute;top:50%;width:.16em;height:.16em;margin:-.08em 0 0 -.08em;border-radius:50%;background:var(--muted)}
.sw .bead.big{background:var(--a1)}
.sw .bead.big.glow{box-shadow:0 0 calc(var(--glow)*.4em) color-mix(in srgb,var(--a1) 70%,transparent)}

/* ---------- title ---------- */
.t-title .lines{font-size:calc(var(--u)*1.45);line-height:1.12}
.t-title .line{display:block;overflow:hidden;padding-bottom:.06em}
.t-title .big{font-size:calc(var(--u)*2.05);color:var(--a1);font-weight:640;letter-spacing:.02em}
.t-title .sub{font:500 calc(var(--u)*.85)/1.3 var(--fb);color:var(--muted)}
.t-title .sub em{font-style:normal;color:var(--a2)}

/* ---------- section ---------- */
.t-section>.inner{gap:calc(var(--u)*.9)}
.t-section .sec-row{display:flex;align-items:center;gap:calc(var(--u)*1)}
.t-section .odo{flex:none;display:flex;align-items:flex-start;font-size:calc(var(--u)*3.4);line-height:1;font-weight:300;height:1em;overflow:hidden;color:var(--ink);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.02em}
.t-section .odo .col{display:flex;flex-direction:column}
.t-section .odo .col span{height:1em;display:block;text-align:center}
.t-section .odo .hash{font-size:.34em;align-self:flex-start;margin:.25em .15em 0 0;color:var(--a2);font-family:var(--fm);font-weight:600}
.t-section .vbar{width:2px;align-self:stretch;background:var(--hair);transform-origin:top}
.t-section .sec-text{display:flex;flex-direction:column;gap:.5em;min-width:0}
.t-section .sec-title{font-size:calc(var(--u)*1.2);line-height:1.2}
.t-section .sec-title .dot{color:var(--a2);padding:0 .12em}
.t-section .sec-sub{font:500 calc(var(--u)*.7)/1.3 var(--fb);color:var(--muted)}
.t-section .bigrail{display:flex;gap:6px;margin-top:calc(var(--u)*.2)}
.t-section .bigrail i{flex:1;height:6px;border-radius:3px;background:var(--hair);transform-origin:left}
.t-section .bigrail i.done{background:color-mix(in srgb,var(--a1) 60%,transparent)}
.t-section .bigrail i.cur{background:var(--a2)}
.t-section .railcap{display:flex;justify-content:space-between;font:600 calc(var(--u)*.34)/1 var(--fm);letter-spacing:.14em;color:var(--muted);text-transform:uppercase}

/* ---------- family ---------- */
.t-family .rootchip{display:inline-flex;align-items:baseline;gap:.7em;align-self:flex-start;padding:.35em .9em .4em .8em;border-radius:.5em;border:1.5px solid var(--hair);font-size:calc(var(--u)*.95)}
.t-family .rootchip small{font:600 calc(var(--u)*.34)/1 var(--fm);letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.t-family .rows{position:relative;display:flex;flex-direction:column;gap:calc(var(--u)*.5);padding-left:calc(var(--u)*1.2)}
.t-family .stem{position:absolute;left:calc(var(--u)*.35);top:calc(var(--u)*-.7);width:2px;background:var(--hair);height:0}
.t-family .row{position:relative;display:grid;grid-template-columns:minmax(0,32%) 1fr;align-items:center;gap:calc(var(--u)*.6)}
.t-family .wcell{display:flex;align-items:center;gap:calc(var(--u)*.5);min-width:0}
.t-family .branch{position:absolute;left:calc(var(--u)*-.85);width:calc(var(--u)*.65);top:50%;height:2px;background:var(--hair);transform-origin:left}
.t-family .role{font:500 calc(var(--u)*.62)/1.25 var(--fb);color:var(--muted)}
.t-family .role .also{display:inline-block;margin-left:.4em;font:700 calc(var(--u)*.32)/1 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--a2);padding:.3em .5em;border-radius:.3em;transform:rotate(-4deg)}
.t-family .word{font-size:calc(var(--u)*1.35)}
.t-family .word .sw{padding-bottom:.36em}

/* ---------- stress ---------- */
.t-stress .srows{display:flex;flex-direction:column;gap:calc(var(--u)*.55)}
.t-stress .srow{display:flex;flex-direction:column;gap:.25em}
.t-stress .slabel{display:flex;align-items:center;gap:.8em}
.t-stress .slabel .lbl{font:600 calc(var(--u)*.36)/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.t-stress .sword{font-size:calc(var(--u)*1.85);padding-top:.25em}
.t-stress.n3 .sword{font-size:calc(var(--u)*1.55)}

/* ---------- mistake ---------- */
.t-mistake .mrow{display:grid;grid-template-columns:auto 1fr;gap:calc(var(--u)*.6);align-items:start}
.t-mistake .badge{width:calc(var(--u)*1.25);height:calc(var(--u)*1.25);border-radius:50%;display:grid;place-items:center;margin-top:.05em}
.t-mistake .badge svg{width:56%;height:56%;overflow:visible}
.t-mistake .badge.bad{background:color-mix(in srgb,var(--bad) 13%,transparent);color:var(--bad)}
.t-mistake .badge.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.t-mistake .msent{font:500 calc(var(--u)*1.02)/1.35 var(--fb);padding-top:.06em}
.t-mistake.wordmode .msent{font-family:var(--fd);font-size:calc(var(--u)*1.7);font-weight:560;line-height:1.1;padding-top:0}
.t-mistake.wordmode .badge{margin-top:.25em}
.t-mistake .mrow.wrong .kw{color:var(--bad)}
.t-mistake .mrow.right .kw{color:var(--ok)}
.t-mistake .mrow .kw .hl{background:color-mix(in srgb,var(--ok) 20%,transparent)}
.t-mistake .squig{position:absolute;left:-.05em;right:-.05em;bottom:-.22em;height:.3em;overflow:visible}
.t-mistake .strike{position:absolute;left:-.08em;right:-.08em;top:54%;height:.08em;min-height:3px;background:var(--bad);border-radius:2px;transform-origin:left}
.t-mistake .morph{display:inline-block;overflow:hidden;vertical-align:bottom;white-space:nowrap}
.t-mistake .morph .l{display:inline-block}
.t-mistake .mnote{font:500 calc(var(--u)*.72)/1.35 var(--fb);color:var(--muted);padding-left:calc(var(--u)*1.85)}
.t-mistake .mnote b{color:var(--ink)}

/* ---------- example ---------- */
.t-example .sents{display:flex;flex-direction:column;gap:calc(var(--u)*.75)}
.t-example .sent{position:relative;padding-left:calc(var(--u)*.85)}
.t-example .sent .bar{position:absolute;left:0;top:.2em;bottom:.2em;width:3px;border-radius:2px;background:var(--a1);transform-origin:top}
.t-example .stext{font:500 calc(var(--u)*1)/1.38 var(--fb)}
.t-example .tagline{display:flex;align-items:center;gap:.7em;margin-top:.5em;font:500 calc(var(--u)*.6)/1 var(--fb);color:var(--muted)}
.t-example .tagline .kwc{font-family:var(--fd);font-weight:600;color:var(--ink);font-size:1.12em}

/* ---------- note ---------- */
.t-note .nhead{display:flex;align-items:center;flex-wrap:wrap;gap:calc(var(--u)*.55)}
.t-note .term{font-size:calc(var(--u)*1.6);line-height:1.1}
.t-note .nrule{height:2px;background:var(--hair);transform-origin:left}
.t-note .meaning{display:grid;grid-template-columns:auto 1fr;gap:.55em;font:500 calc(var(--u)*1.08)/1.36 var(--fb)}
.t-note .meaning .eq{font-family:var(--fd);color:var(--a1);font-weight:500}
.t-note .extra{font:500 calc(var(--u)*.78)/1.4 var(--fb);color:var(--muted);padding-left:calc(var(--u)*1.1)}
.t-note .nchips{display:flex;flex-wrap:wrap;gap:.6em;padding-left:calc(var(--u)*1.1)}
.t-note .nchips .chip{font-size:calc(var(--u)*.42)}
.t-note .pron{font-size:calc(var(--u)*1.05);color:var(--muted)}
.t-note .spell .l{display:inline-block;position:relative}
.t-note .spell .l.hit::after{content:"";position:absolute;left:50%;top:55%;width:1.05em;height:1.05em;margin:-.52em 0 0 -.52em;border-radius:50%;border:2px solid var(--a2);transform:scale(var(--ring,0));opacity:var(--ringo,0)}
.t-note.kind-quote .qmark{font-family:var(--fd);font-size:calc(var(--u)*3.2);line-height:.6;height:.42em;color:var(--a1);font-weight:600}
.t-note.kind-quote .qtext{font:italic 460 calc(var(--u)*1.12)/1.42 var(--fd)}
.t-note.kind-quote .qtext .kw{font-style:italic}
.t-note.kind-quote .qauthor{font:600 calc(var(--u)*.4)/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- pattern ---------- */
.t-pattern .prows{display:flex;flex-direction:column;gap:calc(var(--u)*.85)}
.t-pattern .prow{display:flex;flex-direction:column;gap:calc(var(--u)*.45)}
.t-pattern .formula{display:flex;flex-wrap:wrap;align-items:center;gap:.45em;font-size:calc(var(--u)*.82)}
.t-pattern .part{padding:.3em .7em .34em;border-radius:.45em;font-family:var(--fd);font-weight:600;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 45%,transparent)}
.t-pattern .plus{color:var(--muted);font-weight:300;font-size:1.2em}
.t-pattern .pex{font:500 calc(var(--u)*.98)/1.4 var(--fb)}
.t-pattern .seg{position:relative;display:inline-block;white-space:pre}
.t-pattern .seg u{position:absolute;left:0;right:0;bottom:-.02em;height:.16em;border-radius:.08em;background:var(--c);transform-origin:left;text-decoration:none}
.t-pattern .pc0{--c:var(--a1)} .t-pattern .pc1{--c:var(--a2)} .t-pattern .pc2{--c:var(--adjective)} .t-pattern .pc3{--c:var(--ok)}

/* ---------- forms ---------- */
.t-forms .chain{display:flex;align-items:flex-start;flex-wrap:wrap;gap:calc(var(--u)*.4)}
.t-forms .form{display:flex;flex-direction:column;align-items:center;gap:.5em;position:relative;padding:.2em .45em}
.t-forms .form .fw{font-size:calc(var(--u)*1.45);line-height:1.1;position:relative;z-index:1}
.t-forms .form .fl{font:600 calc(var(--u)*.34)/1 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.t-forms .form .ring{position:absolute;inset:-.1em -.1em auto -.1em;height:calc(var(--u)*1.45*1.3);border-radius:.4em;background:color-mix(in srgb,var(--a2) 16%,transparent);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--a2) 55%,transparent);transform-origin:center}
.t-forms .arrow{width:calc(var(--u)*1.5);height:calc(var(--u)*1.45*1.1);flex:none;color:var(--a1)}

/* ---------- compare ---------- */
.t-compare .cards{display:grid;grid-template-columns:1fr auto 1fr;gap:calc(var(--u)*.55);align-items:stretch}
.t-compare .card{position:relative;padding:calc(var(--u)*.8) calc(var(--u)*.8) calc(var(--u)*.9);border-radius:calc(var(--u)*.5);background:color-mix(in srgb,var(--c) 7%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 28%,transparent);display:flex;flex-direction:column;gap:.55em}
.t-compare .card.l{--c:var(--a1)} .t-compare .card.r{--c:var(--a2)}
.t-compare .card .ic{width:calc(var(--u)*1.35);height:calc(var(--u)*1.35);color:var(--c)}
.t-compare .card .ch{font-size:calc(var(--u)*1.25);line-height:1.1;color:var(--ink)}
.t-compare .card .ipa{font:500 calc(var(--u)*.62)/1 var(--fm);color:var(--c)}
.t-compare .card .cl{font:500 calc(var(--u)*.72)/1.35 var(--fb);color:var(--muted)}
.t-compare .card .cl{color:color-mix(in srgb,var(--ink) 78%,transparent)}
.t-compare .vs{align-self:center;font:600 calc(var(--u)*.36)/1 var(--fm);letter-spacing:.12em;color:var(--muted);width:2.6em;height:2.6em;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--hair)}
.t-compare .sw{font-size:1em}

/* ---------- question ---------- */
.t-question .qs{display:flex;flex-direction:column;gap:calc(var(--u)*.75)}
.t-question .q{display:grid;grid-template-columns:auto 1fr;gap:calc(var(--u)*.6);align-items:start}
.t-question .qb{width:calc(var(--u)*1.2);height:calc(var(--u)*1.2);border-radius:50%;display:grid;place-items:center;background:var(--a1);color:var(--bg);font:700 calc(var(--u)*.7)/1 var(--fd);margin-top:.1em}
.t-question .qt{font-size:calc(var(--u)*1.2);line-height:1.25}
.t-question.single .qt{font-size:calc(var(--u)*1.65)}
.t-question.single .qb{width:calc(var(--u)*1.5);height:calc(var(--u)*1.5);font-size:calc(var(--u)*.9);margin-top:.12em}
.t-question .prompt{align-self:flex-start;display:inline-flex;align-items:center;gap:.6em;padding:.55em 1em;border-radius:99px;font:600 calc(var(--u)*.66)/1 var(--fb);color:var(--a2);background:color-mix(in srgb,var(--a2) 12%,transparent);margin-left:calc(var(--u)*1.8)}
.t-question .prompt svg{width:1.2em;height:1.2em}

/* ---------- sound ---------- */
.t-sound .steps{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u)*.5) calc(var(--u)*.35)}
.t-sound .step{position:relative;padding:.3em .75em .38em;border-radius:99px;font-size:calc(var(--u)*1.3);background:color-mix(in srgb,var(--a1) 9%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--a1) 35%,transparent)}
.t-sound .step.wrong{color:var(--bad);background:color-mix(in srgb,var(--bad) 8%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--bad) 40%,transparent)}
.t-sound .step .ripple{position:absolute;inset:0;border-radius:99px;box-shadow:0 0 0 2px var(--a1);opacity:0;pointer-events:none}
.t-sound .step.wrong .ripple{box-shadow:0 0 0 2px var(--bad)}
.t-sound .step .x{position:absolute;left:.4em;right:.4em;top:52%;height:3px;border-radius:2px;background:var(--bad);transform-origin:left}
.t-sound .chev{color:var(--muted);font-size:calc(var(--u)*.8);font-family:var(--fd)}

/* ---------- recap ---------- */
.t-recap .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*.3)}
.t-recap .rc{display:flex;align-items:baseline;gap:.6em;padding:.55em .7em;border-radius:.45em;background:color-mix(in srgb,var(--a1) 6%,transparent);box-shadow:inset 0 0 0 1px var(--hair);font-size:calc(var(--u)*.62);min-width:0}
.t-recap .rc .n{font:600 .66em/1 var(--fm);color:var(--a1);letter-spacing:.06em}
.t-recap .rc .tx{font-family:var(--fd);font-weight:560;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-recap .rc .ck{margin-left:auto;color:var(--ok);font-weight:700;font-family:var(--fm)}

/* ---------- UI (never visible in clean view) ---------- */
body.clean #hud,body.clean #panel,body.clean #list,body.clean #toast{display:none!important}
body.clean{cursor:none}
body.nohud #hud{display:none}
#hud{position:fixed;left:0;right:0;bottom:0;height:64px;display:flex;align-items:center;gap:14px;padding:0 16px;background:#101217;color:#d9dce4;font:13px/1.2 system-ui,sans-serif;border-top:1px solid #262a33;z-index:20}
#hud button,#hud select,.ui button,.ui select,.ui input{font:inherit;color:#e8eaf0;background:#1d2029;border:1px solid #2e3340;border-radius:7px;padding:6px 10px;cursor:pointer}
#hud button:hover,.ui button:hover{background:#262a36}
#hud .play{width:40px;height:36px;font-size:15px}
#hud .time{font:12px/1 ui-monospace,monospace;color:#9aa1b2;white-space:nowrap;min-width:150px}
#hud .scn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px;color:#fff}
#scrub{position:relative;flex:1;height:34px;cursor:pointer}
#scrub .track{position:absolute;left:0;right:0;top:15px;height:4px;background:#2a2e38;border-radius:2px}
#scrub .tick{position:absolute;top:10px;width:1px;height:14px;background:#3c4250}
#scrub .tick.sec{background:#8f97ff;height:20px;top:7px;width:2px}
#scrub .fill{position:absolute;left:0;top:15px;height:4px;background:#8f97ff;border-radius:2px}
#scrub .head{position:absolute;top:8px;width:4px;height:18px;margin-left:-2px;background:#fff;border-radius:2px}
#scrub .tip{position:absolute;bottom:34px;transform:translateX(-50%);background:#000;color:#fff;padding:4px 8px;border-radius:5px;white-space:nowrap;font-size:12px;display:none;pointer-events:none}
#scrub:hover .tip{display:block}
#hud .hint{color:#6d7485;font-size:11.5px;white-space:nowrap}
.ui{position:fixed;top:0;bottom:64px;width:380px;background:#111318f2;color:#d9dce4;font:13px/1.35 system-ui,sans-serif;z-index:30;overflow:auto;padding:14px 16px 30px;display:none;backdrop-filter:blur(8px)}
body.nohud .ui{bottom:0}
.ui.open{display:block}
#panel{right:0;border-left:1px solid #262a33}
#list{left:0;border-right:1px solid #262a33;width:400px}
.ui h2{font-size:15px;margin:2px 0 10px;color:#fff;display:flex;justify-content:space-between;align-items:center}
.ui h3{font:600 11px/1 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#8f97ff;margin:18px 0 8px}
.ui label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0}
.ui label span{color:#aab0bf}
.ui input[type=range]{flex:1;max-width:170px;padding:0}
.ui input[type=color]{width:44px;height:28px;padding:1px 2px}
.ui input[type=text],.ui input[type=number]{width:170px;cursor:text}
.ui select{width:180px}
.ui .row{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.ui .presets button{flex:1;min-width:80px;padding:8px 6px;display:flex;align-items:center;gap:6px;justify-content:center}
.ui .presets i{display:inline-block;width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1px #0006}
.ui .presets button.on{border-color:#8f97ff}
.ui .note{color:#7c8394;font-size:12px;margin:4px 0}
.ui .warn{color:#ffb86b;font-size:12px}
.ui textarea{width:100%;height:90px;background:#0b0c10;color:#cfd3dc;border:1px solid #2e3340;border-radius:6px;font:11px/1.35 ui-monospace,monospace}
#list ol{list-style:none;margin:0;padding:0}
#list li{display:grid;grid-template-columns:34px 1fr auto;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;align-items:baseline}
#list li:hover{background:#1c1f28}
#list li.cur{background:#262b3f}
#list li .i{color:#6d7485;font:11px ui-monospace,monospace}
#list li .ty{font:10px/1 ui-monospace,monospace;color:#8f97ff;text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:2px}
#list li .tx{color:#e6e8ee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#list li .tm{color:#6d7485;font:11px ui-monospace,monospace;white-space:nowrap}
#list li.sec{margin-top:8px;border-top:1px solid #23262f;border-radius:0}
#toast{position:fixed;left:50%;top:18px;transform:translateX(-50%);background:#000d;color:#fff;padding:8px 14px;border-radius:8px;font:13px system-ui;z-index:40;opacity:0;transition:opacity .25s;pointer-events:none}
#toast.on{opacity:1}

/* inline pronunciation: no·TICE */
.pr{white-space:nowrap}
.pr .sep{color:var(--muted);opacity:.6;padding:0 .08em}
.pr .st{position:relative;color:var(--c,var(--a1));font-weight:700}
.pr .st::before{content:"";position:absolute;left:50%;top:-.28em;width:.22em;height:.22em;margin-left:-.11em;border-radius:50%;background:currentColor}
.t-sound .grp{display:inline-flex;align-items:center;gap:calc(var(--u)*.35);white-space:nowrap}
.veil{position:absolute;top:-5%;bottom:-5%;left:0;width:60%;background:var(--a1);z-index:5;pointer-events:none;transform:translateX(-120%) skewX(-12deg)}
.veil.v2{background:var(--a2);width:14%;z-index:6}
.t-sound .step .ripple{}
/* chroma modes: green/blue everywhere except an opaque card behind the graphics,
   so soft colours never mix with the key colour */
.bgmode-chroma #safe,.bgmode-chromablue #safe{background:var(--bg);border-radius:28px}