/* The speaking family: /english/speaking-practice/, /speaking-test/,
   /accent-test/ and /shadowing/. Pieces the four pages share on top of
   /english/tools.css: each tool's own solid colour, the family cards at the
   end of every page, the step list, the tips list and the "more natural"
   fix. Solid colours only, sentence case, no inline styles (the CSP forbids
   them). */

/* Each tool keeps one colour pair wherever the family meets. */
[data-fam="practice"]{--fam-bg:#bcf7db;--fam-ink:#065f46}
[data-fam="test"]{--fam-bg:#f4edff;--fam-ink:#5B10CC}
[data-fam="accent"]{--fam-bg:#d4ddff;--fam-ink:#3730a3}
[data-fam="shadow"]{--fam-bg:#ffe7b3;--fam-ink:#7a4a00}

/* ── The family cards (the end of each page) ─────────────────────────── */
.sp-family-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px 56px;align-items:end;margin-bottom:36px}
.sp-family-head .tt-sub{margin:0!important}
.sp-fam{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.sp-fam-card{position:relative;display:grid;grid-template-rows:auto 1fr;height:100%;border-radius:var(--r-panel);background:var(--fam-bg);color:var(--ink);text-decoration:none;overflow:hidden;transition:transform .2s var(--ease-out)}
.sp-fam-art{display:flex;align-items:center;min-height:148px;padding:28px 28px 0}
.sp-fam-art img{width:96px;height:96px}
.sp-fam-text{display:grid;align-content:start;gap:8px;padding:20px 28px 28px}
.sp-fam-text b{color:var(--ink);font:700 22px/1.2 var(--font-display);letter-spacing:-.03em}
.sp-fam-text span{color:var(--ink-soft);font-size:15.5px;line-height:1.5}
.sp-fam-text small{margin-top:6px;color:var(--fam-ink);font:600 14px/1.3 var(--font-body)}
.sp-fam-go{position:absolute;top:28px;right:26px;width:28px;height:28px;color:var(--fam-ink);transition:transform .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .sp-fam-card:hover{transform:translateY(-3px)}
  .sp-fam-card:hover .sp-fam-go{transform:translateX(4px)}
}
.sp-fam-card:focus-visible{outline-offset:4px}
@media (max-width:899px){.sp-family-head{grid-template-columns:1fr}}
@media (max-width:767px){
  .sp-fam{grid-template-columns:1fr;gap:12px}
  .sp-fam-card{grid-template-columns:72px minmax(0,1fr);grid-template-rows:none;align-items:center;border-radius:20px}
  .sp-fam-art{min-height:0;padding:18px 0 18px 18px}
  .sp-fam-art img{width:56px;height:56px}
  .sp-fam-text{gap:4px;padding:18px 48px 18px 16px}
  .sp-fam-text b{font-size:18px}
  .sp-fam-text span{font-size:14.5px}
  .sp-fam-text small{margin-top:2px}
  .sp-fam-go{top:50%;right:16px;width:22px;height:22px;margin-top:-11px}
}

/* ── Numbered steps and tips ───────────────────────────────────────────── */
.sp-steps{display:grid;gap:22px;margin-top:32px!important}
.sp-steps li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:16px;align-items:start}
.sp-n{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--cat-bg);color:var(--cat-ink);font:700 15px/1 var(--font-display)}
.sp-steps h3{font-size:17px;font-weight:700;letter-spacing:-.02em}
.sp-steps p{margin-top:4px!important;color:var(--ink-soft);font-size:15.5px}

.sp-tips{display:grid;gap:18px;counter-reset:tip}
.sp-tips li{position:relative;padding:20px 22px 20px 70px;border:1px solid var(--line);border-radius:var(--r-card);background:#fff;color:var(--ink-soft)}
.sp-tips li::before{counter-increment:tip;content:counter(tip);position:absolute;left:20px;top:18px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--cat-bg);color:var(--cat-ink);font:700 15px/1 var(--font-display)}
.sp-tips b{display:block;margin-bottom:2px;color:var(--ink);font:700 17px/1.35 var(--font-display);letter-spacing:-.015em}
@media (max-width:639px){.sp-tips li{padding:18px 18px 18px 62px}.sp-tips li::before{left:16px}}

/* ── Chat bubbles and the "more natural" fix ───────────────────────────── */
.sp-bub{width:fit-content;max-width:min(85%,560px);margin:0;padding:11px 16px;border-radius:20px;font-size:15.5px;line-height:1.5}
.sp-bub-them{background:var(--field);color:var(--ink);border-bottom-left-radius:6px}
.sp-bub-me{margin-left:auto;background:var(--purple);color:#fff;border-bottom-right-radius:6px}
.sp-fix{display:grid;gap:4px;width:fit-content;max-width:min(85%,560px);margin:8px 0 0 auto;padding:12px 16px;border-radius:16px;background:var(--ok-bg);color:var(--ink);font-size:15px;line-height:1.45}
.sp-fix-k{color:var(--ok);font:700 13.5px/1.2 var(--font-body)}
.sp-fix-line s{color:var(--ink-soft);text-decoration-thickness:1.5px}
.sp-fix-line b{font-weight:700;color:var(--ink)}
.sp-fix small{color:var(--ink-soft);font-size:14px}

/* ── A section heading next to a short lede, left aligned ──────────────── */
.sp-row-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px 56px;align-items:end;margin-bottom:36px}
.sp-row-head .tt-sub{margin:0!important}
@media (max-width:899px){.sp-row-head{grid-template-columns:1fr}}

/* ── The Slova card at the end of a result (the level test's style) ─────── */
.sp-promo{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:440px minmax(0,1fr);align-items:center;gap:40px;padding:clamp(28px,3.5vw,44px);border-radius:28px;background:var(--tint);color:var(--ink)}
.sp-promo-rays{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.sp-promo-copy{display:flex;flex-direction:column}
.sp-promo-brand{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font:700 16px/1 var(--font-display);letter-spacing:-.02em}
.sp-promo-brand img{width:28px;height:28px;padding:3px;border-radius:8px;background:#fff}
.sp-promo-title{margin-top:16px!important;color:var(--ink);font:750 clamp(26px,2.8vw,36px)/1.15 var(--font-display);letter-spacing:-.035em}
.sp-promo-list{display:grid;gap:10px;margin-top:18px!important}
.sp-promo-list li{position:relative;padding-left:30px;color:var(--ink-soft);font-size:16.5px;line-height:1.45}
.sp-promo-list li::before{content:"";position:absolute;left:3px;top:3px;width:7px;height:13px;border:solid var(--purple);border-width:0 3px 3px 0;transform:rotate(45deg)}
.sp-promo-act{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px 16px;margin-top:22px}
.sp-promo-note{color:var(--muted);font-size:14px}
.sp-promo-fan{position:relative;width:100%;aspect-ratio:330/215}
.sp-promo-card{position:absolute;top:20%;left:1.5%;width:30.5%;aspect-ratio:3/4;overflow:hidden;border:4px solid #fff;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line);transform:rotate(-9deg)}
.sp-promo-card:nth-child(2){top:6%;left:32.8%;width:34.4%;z-index:2;transform:none}
.sp-promo-card:nth-child(3){left:68%;transform:rotate(9deg)}
.sp-promo-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp-promo-card b{position:absolute;left:0;right:0;bottom:0;padding:6px 8px;background:var(--ink);color:#fff;font:700 12px/1.15 var(--font-display);letter-spacing:-.02em}
.sp-promo-sticker{position:absolute;z-index:3;top:-6%;right:-4%;width:28%;aspect-ratio:1;transform:rotate(12deg)}
.sp-promo-sticker svg{position:absolute;inset:0;width:100%;height:100%}
.sp-promo-sticker>span{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#fff}
.sp-promo-sticker b{font:800 clamp(20px,2.2vw,28px)/1 var(--font-display);letter-spacing:-.05em}
.sp-promo-sticker small{margin-top:2px;font:700 11px/1.1 var(--font-body)}
@media (max-width:1023px){.sp-promo{grid-template-columns:340px minmax(0,1fr);gap:28px}}
@media (max-width:760px){
  .sp-promo{grid-template-columns:1fr;gap:8px;padding:22px 18px 24px;border-radius:22px}
  .sp-promo-fan{width:min(100%,320px);margin:0 auto}
  .sp-promo-card{border-width:3px;border-radius:14px}
  .sp-promo-card b{padding:5px 6px;font-size:10px}
  .sp-promo-list li{font-size:15.5px}
  .sp-promo-act{flex-direction:column-reverse;align-items:stretch;text-align:center;margin-top:16px}
}

/* The banner under the score on phones, and the purple bar at the bottom. */
.sp-nudge{display:none}
@media (max-width:760px){
  .sp-nudge{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:14px;border-radius:18px;background:#fff;text-align:left}
  .sp-nudge img{flex:none;border-radius:8px}
  .sp-nudge p{flex:1;min-width:0;display:grid;gap:2px}
  .sp-nudge b{color:var(--ink);font:700 16px/1.2 var(--font-display)}
  .sp-nudge span{color:var(--muted);font-size:13px}
  .sp-nudge-go{width:100%}
}
.sp-dock-bar{position:fixed;left:0;right:0;bottom:0;z-index:250;display:flex;align-items:center;justify-content:center;gap:12px 24px;padding:12px max(16px,calc((100vw - 1100px) / 2)) calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:#fff;color:var(--ink);box-shadow:0 -8px 24px rgba(23,18,29,.06);transform:translateY(110%);visibility:hidden;transition:transform .25s var(--ease-out),visibility .25s}
.sp-dock-bar.is-on{transform:none;visibility:visible}
.sp-dock-bar p{display:grid;gap:2px}
.sp-dock-bar b{font:700 17px/1.2 var(--font-display)}
.sp-dock-bar span{color:var(--muted);font-size:13px}
.sp-dock-go{flex:none}
@media (max-width:760px){.sp-dock-bar{justify-content:space-between}.sp-dock-bar span{display:none}.sp-dock-bar b{font-size:15px}}
@media (prefers-reduced-motion:reduce){.sp-dock-bar{transition:none}}

/* ── The test layer of the speaking test and the accent test ───────────
   Full screen: a top bar with five or six segments, the task on a warm
   neutral side, the timer or microphone, your words and the actions on
   white. Phone: one column with the actions stuck to the bottom. */
/* Shared bits: the number, the tick */
.st-n{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:#fff;color:var(--ink-soft);font:800 15px/1 var(--font-display)}
.st-n .tt-i{width:16px;height:16px;stroke-width:3}
.st-tick{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line-strong);background:#fff;color:transparent;transition:background-color .2s,color .2s,box-shadow .2s}
.st-tick .tt-i{width:14px;height:14px;stroke-width:3}
.is-on>.st-tick{background:var(--ok);box-shadow:none;color:#fff}

/* ── The test layer ───────────────────────────────────────────────────── */
.st-talk{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;height:100vh;height:100dvh;background:#fff;color:var(--ink-soft)}
.st-talk[hidden]{display:none}
.st-t-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px 16px;align-items:center;padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));padding-top:calc(10px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--line)}
.st-t-x{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--field);color:var(--ink);cursor:pointer}
.st-t-name{display:grid;min-width:0}
.st-t-name b{overflow:hidden;color:var(--ink);font:700 17px/1.25 var(--font-display);letter-spacing:-.02em;white-space:nowrap;text-overflow:ellipsis}
.st-t-name b:focus{outline:none}
.st-t-name span{overflow:hidden;font-size:14px;white-space:nowrap;text-overflow:ellipsis}
.st-t-prog{display:grid;grid-template-columns:repeat(5,40px);gap:6px;margin-right:8px}
.st-t-prog li{height:6px;border-radius:3px;background:var(--line-strong)}
.st-t-prog [data-state="done"]{background:var(--ok)}
.st-t-prog [data-state="skip"]{background:#f0b65a}
.st-t-prog [data-state="now"]{background:var(--ink)}
.st-talk.is-summary .st-t-prog{display:none}
.st-t-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(320px,420px) minmax(0,1fr)}
.st-talk.is-summary .st-t-body{display:none}

/* The side: the task and the five steps */
.st-side{display:grid;align-content:start;gap:20px;overflow-y:auto;padding:28px;background:#f6f4f0;color:var(--ink)}
.st-side-k{color:var(--muted);font:700 14px/1.3 var(--font-body)}
.st-side-h{margin-top:-14px!important;color:var(--ink);font:700 24px/1.2 var(--font-display);letter-spacing:-.03em}
.st-steps{display:grid;gap:4px}
.st-steps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:center;padding:10px 12px;border-radius:14px;transition:background-color .2s}
.st-steps .st-n{width:30px;height:30px;font-size:14px}
.st-steps-t{display:grid;gap:1px;min-width:0}
.st-steps b{color:var(--ink);font:700 15.5px/1.3 var(--font-display);letter-spacing:-.015em}
.st-steps small{color:var(--ink-soft);font-size:13px}
.st-steps [data-state="now"]{background:#fff}
.st-steps [data-state="now"] .st-n{background:var(--ink);color:#fff}
.st-steps [data-state="done"] .st-n{background:var(--ok);color:#fff}
.st-steps [data-state="skip"] .st-n{background:#fde7c2;color:#7a4a00}
.st-steps [data-state="todo"] b{color:var(--ink-soft)}
.st-card{display:grid;gap:14px;padding:22px;border-radius:20px;background:#fff;color:var(--ink)}
.st-kind{color:var(--muted);font:700 13.5px/1.3 var(--font-body)}
.st-q{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:start}
.st-prompt{color:var(--ink);font:700 clamp(1.3rem,1.8vw,1.55rem)/1.3 var(--font-display);letter-spacing:-.025em}
.st-card .tt-say{background:var(--field);color:var(--ink)}
.st-cover{padding-top:14px;border-top:1px solid var(--line)}
.st-cover-k{margin-bottom:10px!important;color:var(--muted);font:600 13.5px/1.3 var(--font-body)}
.st-points{display:grid;gap:8px}
.st-points li{display:flex;gap:10px;align-items:center;color:var(--ink-soft);font-size:15.5px;transition:color .2s}
.st-points .is-on{color:var(--ink);font-weight:600}
.st-typed-note{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:#fff1d6;color:#5c3700;font-size:14.5px}
.st-typed-note .tt-i{width:18px;height:18px;margin-top:2px}

/* The stage: the timer, your words, the actions */
.st-stage{display:flex;flex-direction:column;gap:24px;min-height:0;min-width:0;overflow-y:auto;padding:clamp(28px,5vh,56px) max(24px,calc((100% - 680px) / 2)) 0}
.st-meter{display:flex;align-items:center;gap:24px}
.st-meter-t{display:grid;gap:6px;min-width:0}
.st-phase{color:var(--ink);font:750 clamp(1.6rem,2.6vw,2.1rem)/1.1 var(--font-display);letter-spacing:-.035em}
.st-t-body[data-phase="speak"] .st-phase{color:#c22a30}
.st-t-body[data-phase="speak"] .st-phase::before{content:"";display:inline-block;width:12px;height:12px;margin-right:10px;border-radius:50%;background:#e5484d;vertical-align:4px}
@media (prefers-reduced-motion:no-preference){.st-t-body[data-phase="speak"] .st-phase::before{animation:st-blink 1.1s ease-in-out infinite alternate}}
@keyframes st-blink{from{opacity:1}to{opacity:.35}}
.st-t-body[data-phase="saved"] .st-phase{color:var(--ok)}
.st-status{color:var(--ink-soft);font-size:15.5px}
.st-ring{position:relative;flex:none;width:132px;height:132px}
.st-ring-svg{display:block;width:100%;height:100%}
.st-ring-track{fill:none;stroke:#ebe8e3;stroke-width:10}
.st-ring-bar{fill:none;stroke:var(--ink);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .1s linear}
.st-t-body[data-phase="speak"] .st-ring-track{stroke:#fde4e4}
.st-t-body[data-phase="speak"] .st-ring-bar{stroke:#e5484d}
.st-t-body[data-phase="typing"] .st-ring-track,.st-t-body[data-phase="saved"] .st-ring-track{stroke:var(--ok-bg)}
.st-t-body[data-phase="typing"] .st-ring-bar,.st-t-body[data-phase="saved"] .st-ring-bar{stroke:var(--ok)}
.st-ring-text{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.st-ring-num{color:var(--ink);font:800 40px/1 var(--font-display);font-variant-numeric:tabular-nums}
.st-ring-k{margin-top:4px;color:var(--muted);font-size:12.5px;font-weight:600}
.st-live,.st-field{width:100%;min-height:180px;padding:18px 20px;border:0;border-radius:20px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-strong);color:var(--ink);font:400 18px/1.55 var(--font-body);transition:background-color .2s,box-shadow .2s}
.st-live:empty::before{content:attr(data-empty);color:var(--muted)}
.st-live .is-interim{color:var(--muted)}
.st-t-body[data-phase="speak"] .st-live{background:#fff7f7;box-shadow:inset 0 0 0 1.5px #f6c4c6}
.st-live{flex:1 1 auto;max-height:340px;overflow-y:auto}
.st-field{flex:1 1 auto;max-height:360px;resize:none;min-height:200px}
.st-field:focus{outline:none;background:#fff;box-shadow:inset 0 0 0 2px var(--ink)}
.st-act{position:sticky;bottom:0;display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:auto;padding:16px 0 calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:#fff}
.st-primary{min-width:220px}
.st-t-body[data-phase="saving"] .st-act .tt-pill,.st-t-body[data-phase="saved"] .st-act .tt-pill{visibility:hidden}

/* Before task 1 */
.st-ready{display:grid;gap:18px;justify-items:start;max-width:580px}
.st-ready-ico{display:grid;place-items:center;width:72px;height:72px;border-radius:24px;background:#f6f4f0;color:var(--ink)}
.st-ready-ico .tt-i{width:34px;height:34px}
.st-ready-ico[data-kind="denied"]{background:var(--bad-bg);color:var(--bad)}
.st-ready-ico[data-kind="typed"]{background:#fff1d6;color:#7a4a00}
.st-ready-h{color:var(--ink);font:750 clamp(1.8rem,3vw,2.4rem)/1.1 var(--font-display);letter-spacing:-.035em}
.st-ready-why{color:var(--ink-soft);font-size:17px;line-height:1.55}
.st-ready-points{display:grid;gap:10px;padding:18px 20px;border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.st-ready-points li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-soft);font-size:15px}
.st-ready-points .tt-i{flex:none;width:18px;height:18px;margin-top:2px;color:var(--ok);stroke-width:2.5}
.st-ready .tt-actions{margin-top:6px}
.st-mic-status{min-height:1.4em;color:var(--ink);font-weight:600}
.st-mic-status:empty{display:none}

/* The result in the layer */
.st-sum{flex:1;min-height:0;overflow-y:auto;padding:clamp(24px,4vw,48px) 0 calc(112px + env(safe-area-inset-bottom,0px))}
.st-sum .st-res-card{top:24px}
.st-result{padding-bottom:112px}

@media (max-width:899px){
  .st-t-bar{grid-template-columns:auto minmax(0,1fr)}
  .st-t-prog{grid-column:1/-1;grid-template-columns:repeat(5,minmax(0,1fr));margin:0}
  .st-t-body{display:block;overflow-y:auto}
  .st-side{overflow:visible;padding:14px 16px 16px}
  .st-t-body[data-view="ready"] .st-side{display:none}
  .st-side .st-steps{display:none}
  .st-card{gap:10px;padding:16px}
  .st-prompt{font-size:19px}
  .st-cover{padding-top:10px}
  .st-cover-k{display:none}
  .st-points{display:flex;flex-wrap:wrap;gap:6px}
  .st-points li{gap:6px;padding:5px 10px 5px 5px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:14px}
  .st-points .st-tick{width:20px;height:20px}
  .st-points .st-tick .tt-i{width:12px;height:12px}
  .st-points .is-on{background:var(--ok-bg);box-shadow:none}
  .st-stage{overflow:visible;gap:16px;padding:18px 16px 0;min-height:calc(100% - 1px)}
  .st-meter{gap:16px}
  .st-ring{width:84px;height:84px}
  .st-ring-num{font-size:26px}
  .st-ring-k{display:none}
  .st-phase{font-size:22px}
  .st-status{font-size:14px}
  .st-live,.st-field{flex:none;min-height:132px;max-height:none;padding:14px 16px;font-size:16.5px}
  .st-act{margin:auto -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
  .st-primary{flex:1;min-width:0}
  .st-ready{padding-top:8px}
  .st-ready .tt-actions{width:100%}
  .st-ready .tt-actions .tt-pill{flex:1}
}


/* ── The hero picture with a sample card (speaking test, accent test) ─── */
.st-msg{margin-top:14px!important;color:var(--bad);font-weight:600}
.st-msg:empty{display:none}
.st-visual{position:relative;justify-self:end;width:min(100%,400px)}
.st-visual-pic{aspect-ratio:4/5;overflow:hidden;border-radius:28px;background:var(--field)}
.st-visual-pic img{display:block;width:100%;height:100%;object-fit:cover}
.st-sample{position:absolute;left:-64px;bottom:28px;display:grid;gap:10px;width:286px;padding:16px 18px 18px;border-radius:20px;background:#fff;box-shadow:0 18px 44px rgba(23,18,29,.16),0 0 0 1px rgba(23,18,29,.04)}
.st-sample-k{display:flex;justify-content:space-between;align-items:center;color:var(--ink-soft);font:700 13px/1.2 var(--font-body)}
.st-sample-k span{display:inline-flex;align-items:center;gap:5px}
.st-sample-k .tt-i{width:14px;height:14px}
.st-sample-q{color:var(--ink);font:700 18px/1.3 var(--font-display);letter-spacing:-.02em}
.st-sample-points{display:grid;gap:6px}
.st-sample-points li{display:flex;align-items:center;gap:8px;color:var(--ink-soft);font-size:14px}
.st-sample-points .is-on{color:var(--ink);font-weight:600}
.st-sample-points .st-tick{width:20px;height:20px}
.st-sample-points .st-tick .tt-i{width:12px;height:12px}
.st-sample-live{padding:10px 12px;border-radius:12px;background:#fff7f7;box-shadow:inset 0 0 0 1.5px #f6c4c6;color:var(--ink);font-size:14px;line-height:1.45}
.st-sample-live span{color:var(--muted)}
@media (max-width:1023px){
  .st-visual{justify-self:center;width:min(100%,460px)}
  .st-visual-pic{aspect-ratio:4/3}
  .st-sample{position:relative;left:auto;bottom:auto;width:auto;margin:-72px 20px 0}
}

/* The Slova banner at the top of a result: stays in sight while the result scrolls. */
.sp-top-bar{position:sticky;top:0;z-index:20;isolation:isolate;overflow:hidden;margin-bottom:clamp(24px,4vw,40px);border-bottom:1px solid #e6dcfb;background:var(--tint)}
.sp-top-bar .sp-promo-rays{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.sp-top-in{display:flex;align-items:center;gap:12px 24px;width:min(1180px,100%);margin:0 auto;padding:14px 24px}
.sp-top-fan{position:relative;flex:none;width:118px;height:76px}
.sp-top-fan img{position:absolute;top:8px;width:44px;height:60px;border:3px solid #fff;border-radius:10px;object-fit:cover;box-shadow:0 0 0 1px var(--line);transform:rotate(-9deg)}
.sp-top-fan img:nth-child(1){left:0}
.sp-top-fan img:nth-child(2){left:36px;top:2px;z-index:2;width:48px;height:66px;transform:none}
.sp-top-fan img:nth-child(3){left:74px;transform:rotate(9deg)}
.sp-top-in p{flex:1;min-width:0;display:grid;gap:3px}
.sp-top-brand{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font:700 13.5px/1 var(--font-display)}
.sp-top-brand img{border-radius:5px;background:#fff}
.sp-top-in b{color:var(--ink);font:750 clamp(18px,1.8vw,22px)/1.2 var(--font-display);letter-spacing:-.025em}
.sp-top-note{color:var(--ink-soft);font-size:13.5px}
.sp-top-go{flex:none}
.st-sum:has(>.sp-top-bar),.sp-sum:has(>.sp-top-bar){padding-top:0}
.st-result .sp-top-bar,.ac-result .sp-top-bar{top:var(--top-h)}
.st-result:has(>.sp-top-bar),.ac-result:has(>.sp-top-bar){padding-top:0}
@media (max-width:760px){
  .sp-top-in{flex-wrap:wrap;gap:10px 12px;padding:12px 16px 14px}
  .sp-top-fan{width:78px;height:52px}
  .sp-top-fan img{top:6px;width:30px;height:40px;border-width:2px;border-radius:7px}
  .sp-top-fan img:nth-child(2){left:24px;top:2px;width:32px;height:44px}
  .sp-top-fan img:nth-child(3){left:48px}
  .sp-top-in p{gap:2px}
  .sp-top-brand{font-size:12px}
  .sp-top-brand img{width:16px;height:16px}
  .sp-top-in b{font-size:16px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .sp-top-note{display:none}
  .sp-top-go{flex:1 0 100%;min-height:44px;padding:0 16px;font-size:15px}
}

/* Phones: the title, the lede and Start, then a short wide picture with the
   sample card, and the facts last, so the picture is on the first screen. */
@media (max-width:639px){
  .st-hero-grid>.st-copy,.ac-hero-grid>.ac-copy,.sh-hero-grid>.sh-copy{display:contents}
  .tt-hero2 .st-hero-grid,.tt-hero2 .ac-hero-grid,.tt-hero2 .sh-hero-grid{gap:0}
  .st-hero-grid .st-visual,.ac-hero-grid .st-visual,.sh-hero-grid .st-visual{order:2;width:100%;margin-top:28px}
  .st-hero-grid .tt-facts-row,.ac-hero-grid .tt-facts-row,.sh-hero-grid .tt-facts-row{order:3;margin-top:28px}
  .st-visual-pic{aspect-ratio:2/1}
  .st-visual-pic img{object-position:50% 40%}
  .st-sample{gap:8px;margin:-52px 14px 0;padding:12px 14px 14px}
  .st-sample-live{display:none}
  .st-sample-q{font-size:16.5px}
  .st-hero-grid .tt-title,.ac-hero-grid .tt-title,.sh-hero-grid .tt-title{margin:0!important}
  .st-hero-grid .tt-lede,.ac-hero-grid .tt-lede,.sh-hero-grid .tt-lede{margin:14px 0 0!important}
  .st-hero-grid .tt-actions,.ac-hero-grid .tt-actions,.sh-hero-grid .tt-actions{margin:22px 0 0!important}
  .st-hero-grid .st-visual,.ac-hero-grid .st-visual,.sh-hero-grid .st-visual{margin-top:24px}
}

/* ── Results of the tests and shadowing (the card, measures, review) ─── */
/* ── The result ───────────────────────────────────────────────────────── */
.st-result{scroll-margin-top:calc(var(--top-h) + 8px);padding-top:clamp(32px,4vw,56px);border-top:1px solid var(--line)}
.st-res-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:start}
.st-res-card{position:sticky;top:calc(var(--top-h) + 24px);display:grid;gap:14px;padding:clamp(24px,3vw,36px);border-radius:var(--r-panel);background:#f6f4f0;color:var(--ink)}
.st-res-card .st-k{color:var(--muted)}
.st-res-big{color:var(--ink);font:800 clamp(3.4rem,7vw,5rem)/.95 var(--font-display);letter-spacing:-.05em}
.st-res-big:focus{outline:none}
.st-res-none{font-size:clamp(2rem,4vw,2.8rem);line-height:1.05}
.st-res-name{color:var(--ink);font:700 19px/1.35 var(--font-display);letter-spacing:-.02em}
.st-scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.st-scale li{padding:9px 0;border-radius:10px;background:#fff;color:var(--muted);text-align:center;font:700 14px/1 var(--font-body)}
.st-scale .is-on{background:var(--ink);color:#fff}
.st-res-note{color:var(--ink-soft);font-size:14.5px}
.st-res-held{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:#fff1d6;color:#5c3700;font-size:14.5px}
.st-res-held .tt-i{width:18px;height:18px;margin-top:2px}
.st-res-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.st-res-stats li{padding:12px;border-radius:14px;background:#fff}
.st-res-stats b{display:block;color:var(--ink);font:800 20px/1.15 var(--font-display)}
.st-res-stats span{color:var(--ink-soft);font-size:13px}
.st-res-main{display:grid;gap:32px}
.st-res-sec h3{margin-bottom:14px!important;font:700 21px/1.25 var(--font-display);letter-spacing:-.025em}
.st-res-measures{display:grid;gap:10px}
.st-res-measures li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line-strong);border-radius:16px}
.st-mi{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#f6f4f0;color:var(--ink)}
.st-mi .tt-i{width:22px;height:22px}
.st-m-name{color:var(--ink-soft);font-size:13.5px;font-weight:600}
.st-m-val{color:var(--ink);font:700 17px/1.3 var(--font-display)}
.st-m-why{color:var(--ink-soft);font-size:14.5px}
.st-chip{padding:6px 12px;border-radius:999px;background:var(--ink);color:#fff;font:800 14px/1 var(--font-body)}
.st-chip[data-none]{background:var(--field);color:var(--muted);font-weight:600}
.st-fixes{display:grid;gap:10px}
.st-fixes .sp-fix{margin:0;max-width:100%;width:auto}
.st-review{display:grid;gap:12px}
.st-review>li{display:grid;gap:10px;padding:16px 18px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.st-review-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.st-review-top .st-n{width:28px;height:28px;background:var(--field);font-size:14px}
.st-review-top b{color:var(--ink);font:700 16.5px/1.3 var(--font-display)}
.st-review-top small{margin-left:auto;color:var(--muted);font-size:13.5px;font-weight:600}
.st-review-text{color:var(--ink);font-size:15.5px}
.st-review-points{display:flex;flex-wrap:wrap;gap:6px}
.st-review-points li{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--bad-bg);color:#7f1d1d;font-size:13.5px;font-weight:600}
.st-review-points .is-on{background:var(--ok-bg);color:#065f46}
.st-review-points .tt-i{width:14px;height:14px;stroke-width:3}
.st-review .is-skip{opacity:.8}
.st-res-links{display:flex;flex-wrap:wrap;gap:12px}
.st-res-next{display:grid;gap:24px;margin-top:clamp(32px,5vw,56px)}
@media (max-width:899px){.st-res-grid{grid-template-columns:minmax(0,1fr)}.st-res-card{position:static}}
@media (max-width:479px){.st-res-measures li{grid-template-columns:auto minmax(0,1fr)}.st-chip{grid-column:2;justify-self:start}.st-res-links .tt-pill{width:100%}}


/* ── The round microphone button and the green, amber and red word chips ── */
.ac-micbtn{position:relative;flex:none;display:grid;place-items:center;width:112px;height:112px;border:0;border-radius:50%;background:#f6f4f0;box-shadow:inset 0 0 0 2px var(--line-strong);color:var(--ink);cursor:pointer;transition:transform .16s var(--ease-out),background-color .2s,color .2s}
.ac-micbtn .tt-i{width:40px;height:40px}
.ac-micbtn:active{transform:scale(.96)}
.ac-micbtn::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:3px solid #f6c4c6;opacity:0}
.st-t-body[data-phase="listening"] .ac-micbtn{background:#e5484d;box-shadow:none;color:#fff}
@media (prefers-reduced-motion:no-preference){.st-t-body[data-phase="listening"] .ac-micbtn::after{animation:tt-ring 1.4s var(--ease-out) infinite}}
.st-t-body[data-phase="checked"] .ac-micbtn{background:var(--ok-bg);box-shadow:none;color:var(--ok)}
.ac-heard-k{margin-bottom:12px!important;color:var(--muted);font:600 13.5px/1.3 var(--font-body)}
.ac-chips{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px}
.ac-chip{display:grid;gap:2px;padding:8px 12px;border-radius:12px;font:700 clamp(1.05rem,1.6vw,1.25rem)/1.2 var(--font-display)}
.ac-chip small{font:600 12.5px/1.2 var(--font-body)}
.ac-chip.is-ok{background:var(--ok-bg);color:#065f46}
.ac-chip.is-miss{background:var(--bad-bg);color:#7f1d1d}
.ac-chip.is-close{background:#fff1d6;color:#7a4a00}
.ac-heard-key{display:flex;align-items:center;gap:8px;margin-top:12px!important;color:var(--ink-soft);font-size:13.5px}
.ac-heard-key i{flex:none;width:12px;height:12px;border-radius:4px;background:#f0b65a}