/* The pronunciation checker, the list of difficult words and the word pages.
   On top of /english/tools.css. Solid colours only; no inline styles (CSP).
   US and UK each have one fixed colour, used for their chips, IPA rows and
   buttons everywhere. Green, amber and red only mark a Say it result. */
.tt-body{
  --us:#1d4ed8; --us-ink:#1e3a8a; --us-bg:#dbeafe;
  --uk:#be185d; --uk-ink:#831843; --uk-bg:#fce7f3;
  --st-ok:#15803d; --st-ok-bg:#dcfce7; --st-close:#b45309; --st-close-bg:#fef3c7; --st-miss:#b91c1c; --st-miss-bg:#fee2e2;
  --font-ipa:"Inter","Segoe UI","Lucida Grande","DejaVu Sans",system-ui,sans-serif;
}
.pr-ipa{font-family:var(--font-ipa);font-weight:500;letter-spacing:0;white-space:nowrap}
.pr-resp{font-weight:500;color:var(--ink-soft)}
.pr-resp b{color:var(--ink);font-weight:800}
.pr-tag{display:inline-grid;place-items:center;flex:none;min-width:36px;height:26px;padding:0 8px;border-radius:8px;background:var(--us);color:#fff;font:700 13px/1 var(--font-body);letter-spacing:.02em}
.pr-tag-uk,.pr-acc-uk .pr-tag{background:var(--uk)}
.pr-ipa-us{color:var(--us-ink)}
.pr-ipa-uk{color:var(--uk-ink)}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.pr-hero .tt-hero2-grid{align-items:start}
.pr-hero .tt-title em{overflow-wrap:anywhere}
.pr-hero .tt-crumbbar{padding-top:0;margin-bottom:22px}
.pr-hero .tt-crumbbar .tt-wrap{padding:0}
/* Phones and tablets: the search and the tool come before the facts. */
@media (max-width:1023px){
  .pr-hero-tool .tt-hero2-grid{gap:0;grid-template-columns:minmax(0,1fr)}
  .pr-hero-tool .tt-hero2-copy{display:contents}
  .pr-hero-tool .tt-hero2-copy>*{order:1}
  .pr-hero-tool .pr-picker{order:2;margin-top:24px}
  .pr-hero-tool .tt-facts-row{order:3;margin-top:32px!important}
  .pr-hero-word .tt-hero2-grid{gap:0;grid-template-columns:minmax(0,1fr)}
  .pr-hero-word .tt-hero2-copy{display:contents}
  .pr-hero-word .tt-hero2-copy>*{order:1}
  .pr-hero-word .pr-hero-card{order:2;margin-top:24px}
  .pr-hero-word .tt-facts-row{order:3;margin-top:32px!important}
}
@media (max-width:639px){
  .pr-hero-word .tt-actions{flex-wrap:nowrap;margin-top:20px}
  .pr-hero-word .tt-actions .tt-pill-lg{flex:1;min-height:50px;padding:0 14px;font-size:15px}
  .pr-hero-word .pr-answer{font-size:16px}
}
@media (min-width:1024px){.pr-hero .tt-hero2-copy{padding-top:8px}}
.pr-form{margin-top:28px}
.pr-field{display:flex;gap:6px;padding:5px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-strong);transition:box-shadow .2s}
.pr-field:focus-within{box-shadow:inset 0 0 0 2px var(--purple)}
.pr-field input{flex:1;min-width:0;height:48px;padding:0 8px 0 18px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:500 18px/1 var(--font-body)}
.pr-field input:focus{outline:none}
.pr-field input::placeholder{color:var(--muted)}
.pr-go{min-height:48px}
.pr-tries-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.pr-tries-k{color:var(--muted);font-size:14px}
.pr-tries{display:flex;flex-wrap:wrap;gap:6px}
.pr-chip{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:0;border-radius:999px;background:#fff;color:var(--ink);font:600 14px/1 var(--font-body);text-decoration:none;box-shadow:inset 0 0 0 1px var(--line-strong);cursor:pointer;transition:box-shadow .2s,transform .16s var(--ease-out)}
.pr-chip:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.pr-chip:hover{box-shadow:inset 0 0 0 2px var(--purple)}}
.pr-shuffle{padding:4px 2px;border:0;background:none;color:var(--purple);font:600 14px/1 var(--font-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-width:639px){
  .pr-tries-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .pr-tries-row::-webkit-scrollbar{display:none}
  .pr-tries{flex-wrap:nowrap}
  .pr-tries-k,.pr-tries li,.pr-shuffle{flex:none;white-space:nowrap}
  .pr-hero-tool .tt-lede{font-size:16px}
}
.pr-hero .tt-facts-row{margin-top:36px!important}

/* The tool: one solid category panel, the card and Say it side by side. */
.pr-stage{padding:clamp(12px,1.6vw,20px);border-radius:var(--r-panel);background:var(--cat-bg)}
.pr-stage-grid{display:grid;grid-template-columns:1fr;gap:12px}
.pr-next{display:grid;gap:16px;margin-top:28px}
.pr-say-band .pr-next{margin-top:40px}

/* ── The word card ───────────────────────────────────────────────────── */
.pr-result{display:grid;gap:clamp(12px,1.4vw,16px);align-content:start;min-width:0}
.pr-sounds-card{gap:12px}
.pr-mini-h{color:var(--ink);font:700 17px/1.2 var(--font-display);letter-spacing:-.01em}
.pr-mini{display:grid;gap:8px}
.pr-mini>li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 10px;align-items:start;padding:8px 10px;border-radius:12px;background:var(--surface)}
.pr-mini>li.is-stress{background:var(--us-bg)}
.pr-mini-uk>li.is-stress{background:var(--uk-bg)}
.pr-mini>li>b{color:var(--ink);font:700 16px/1.6 var(--font-display)}
.pr-mini ul{display:grid;gap:2px}
.pr-mini ul li{display:flex;align-items:center;gap:8px;font-size:14px}
.pr-mini .pr-ph{min-width:44px;height:24px;background:#fff;color:var(--us-ink);font-size:14px}
.pr-mini-uk .pr-ph{color:var(--uk-ink)}
.pr-mini i{font-style:normal;color:var(--ink)}
.pr-mini i b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.pr-card{display:grid;gap:16px;align-content:start;min-width:0;padding:clamp(18px,2vw,24px);border-radius:20px;background:#fff}
.pr-hero-card .pr-card{padding:clamp(20px,2.6vw,30px)}
.pr-card-head{display:grid;gap:4px}
.pr-word{color:var(--ink);font:700 clamp(2rem,3.2vw,2.6rem)/1.05 var(--font-display);letter-spacing:-.04em;overflow-wrap:break-word;hyphens:manual}
.pr-word.is-long{font-size:clamp(1.5rem,2.2vw,1.9rem)}
.pr-hero-card .pr-word{font-size:clamp(2.2rem,4vw,3.2rem)}
.pr-hero-card .pr-word.is-long{font-size:clamp(1.8rem,3vw,2.4rem)}
.pr-word-line{font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.25}
.pr-meta{color:var(--muted);font-size:14px}
.pr-def{color:var(--ink-soft);font-size:15px}
.pr-def i{font-style:normal;color:var(--muted)}

.pr-syl{display:flex;flex-wrap:wrap;gap:6px}
.pr-syl li{display:grid;justify-items:center;gap:2px;min-width:54px;padding:8px 12px 7px;border-radius:12px;background:var(--us-bg);color:var(--us-ink)}
.pr-syl b{font:700 19px/1.1 var(--font-display);letter-spacing:-.01em}
.pr-syl small{font:500 12.5px/1.2 var(--font-ipa);opacity:.85}
.pr-syl li.is-stress{background:var(--us);color:#fff}
.pr-syl-uk li{background:var(--uk-bg);color:var(--uk-ink)}
.pr-syl-uk li.is-stress{background:var(--uk);color:#fff}

.pr-accs{display:grid;gap:8px}
.pr-acc{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:8px 12px;align-items:center;padding:12px;border-radius:14px;background:var(--us-bg)}
.pr-acc .pr-tag{grid-row:1/span 2;align-self:start;margin-top:2px}
.pr-acc-uk{background:var(--uk-bg)}
.pr-acc-main{grid-column:2/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;min-width:0}
.pr-acc-main .pr-ipa{color:var(--us-ink);font-size:17px}
.pr-acc-uk .pr-acc-main .pr-ipa{color:var(--uk-ink)}
.pr-acc-main .pr-ipa{white-space:normal;overflow-wrap:anywhere}
.pr-acc-main .pr-resp{font-size:15px}
.pr-none{color:var(--muted);font-size:14px}
.pr-acc-btns{grid-column:2;grid-row:2;display:flex;gap:6px}
.pr-acc-src{grid-column:3;grid-row:2;color:var(--ink-soft);font-size:12.5px;line-height:1.3}
.pr-acc .tt-say,.pr-line-play .tt-say{background:#fff;color:var(--us-ink)}
.pr-acc-uk .tt-say,.pr-line-play.pr-acc-uk .tt-say{color:var(--uk-ink)}
.pr-acc .tt-say-pill{height:44px;padding:0 14px}
.pr-acc .tt-say[data-state="playing"],.pr-line-play .tt-say[data-state="playing"]{background:var(--us);color:#fff}
.pr-acc-uk .tt-say[data-state="playing"],.pr-line-play.pr-acc-uk .tt-say[data-state="playing"]{background:var(--uk);color:#fff}
@media (hover:hover) and (pointer:fine){
  .pr-acc .tt-say:not([data-state]):not(:disabled):hover,.pr-line-play .tt-say:not([data-state]):not(:disabled):hover{background:var(--us);color:#fff}
  .pr-acc-uk .tt-say:not([data-state]):not(:disabled):hover,.pr-line-play.pr-acc-uk .tt-say:not([data-state]):not(:disabled):hover{background:var(--uk);color:#fff}
}
.tt-say:disabled{opacity:.45;cursor:default}


.pr-note{font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
.pr-note b{color:var(--ink)}
.pr-note .pr-ipa{white-space:normal}
.pr-forms{display:grid;gap:8px}
.pr-forms ul{display:grid;gap:6px}
.pr-forms li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:10px 12px;border-radius:12px;background:var(--surface);font-size:14.5px}
.pr-form-label{flex-basis:100%;color:var(--ink);font-weight:600}
.pr-src{color:var(--muted);font-size:12.5px;line-height:1.45}
.pr-guide{font-size:15px}

/* A line of words */
.pr-words{display:grid;gap:2px}
.pr-words li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:4px 12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.pr-words li b{color:var(--ink);font-weight:700}
.pr-words li b a{color:inherit;text-underline-offset:3px}
.pr-words .pr-ipa{white-space:normal;overflow-wrap:anywhere}
.pr-words-head{color:var(--muted);font-size:12.5px!important}
.pr-words-head b{color:var(--muted)!important;font-weight:500!important}
.pr-words li.is-missing span{color:var(--muted);grid-column:2/-1}
@media (max-width:560px){.pr-words li{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.pr-words-head{display:none!important}}
.pr-line-plays{display:flex;flex-wrap:wrap;gap:10px}
.pr-line-play{display:inline-flex;align-items:center;gap:6px;padding:6px 8px 6px 10px;border-radius:14px;background:var(--us-bg)}
.pr-line-play.pr-acc-uk{background:var(--uk-bg)}
.pr-line-play .tt-say-pill{height:44px;padding:0 14px}
.pr-card-missing .pr-meta{font-size:15px;line-height:1.5;color:var(--ink-soft)}

/* ── Say it ──────────────────────────────────────────────────────────── */
.pr-say{--pad:clamp(18px,2vw,24px);display:grid;gap:14px;align-content:start;min-width:0;padding:0 var(--pad) var(--pad);border-radius:20px;background:#fff;overflow:hidden}
.pr-say-band .pr-say{border:1px solid var(--line-strong)}
.pr-say-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 calc(-1 * var(--pad));padding:12px var(--pad);background:var(--purple)}
.pr-say-h{color:#fff!important;font:700 20px/1.2 var(--font-display);letter-spacing:-.02em}
.pr-say-head :focus-visible{outline-color:#fff}
.pr-say-intro{color:var(--ink-soft);font-size:14.5px}
.pr-seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--purple-deep)}
.pr-seg button{min-width:52px;height:34px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:#fff;font:700 13.5px/1 var(--font-body);cursor:pointer}
.pr-seg [data-acc="us"][aria-checked="true"]{background:#fff;color:var(--us)}
.pr-seg [data-acc="uk"][aria-checked="true"]{background:#fff;color:var(--uk)}
.pr-target{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 16px;border-radius:14px;background:var(--surface)}
.pr-target-text{display:grid;gap:6px;min-width:0}
.pr-target-art{width:64px;height:64px}
.pr-say[data-screen="result"] .pr-target-art{display:none}
.pr-target-k{color:var(--muted);font-size:13px}
.pr-target-w{color:var(--ink);font:700 28px/1.15 var(--font-display);letter-spacing:-.03em;overflow-wrap:break-word}
.pr-target-w.is-long{font-size:22px}
.pr-target-w.is-line{font-size:19px;line-height:1.35;letter-spacing:-.01em}
.pr-res-chips{display:flex;flex-wrap:wrap;gap:6px}
.pr-res-chips:empty{display:none}
.pr-res-chips li{padding:6px 12px;border-radius:10px;background:var(--us-bg);color:var(--us-ink);font:600 16px/1.2 var(--font-display)}
.pr-res-chips li.is-stress{background:var(--us);color:#fff;font-weight:800}
.pr-res-chips[data-acc="uk"] li{background:var(--uk-bg);color:var(--uk-ink)}
.pr-res-chips[data-acc="uk"] li.is-stress{background:var(--uk);color:#fff}
.pr-res-chips.is-line li{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong);font-size:15px}
.pr-res-chips li[data-status]{color:#fff!important;box-shadow:none!important}
.pr-res-chips li[data-status="ok"]{background:var(--st-ok)!important}
.pr-res-chips li[data-status="close"]{background:var(--st-close)!important}
.pr-res-chips li[data-status="miss"]{background:var(--st-miss)!important}

/* The shared microphone box, made compact inside the panel */
.pr-say .tt-mic{padding:0;border:0;border-radius:0;background:transparent}
.pr-say .tt-mic-ask{gap:4px 14px}
.pr-say .tt-mic-ask .tt-ico{width:44px;height:44px}
.pr-say .tt-mic-ask .tt-ico .tt-i{width:22px;height:22px}
.pr-say .tt-mic h3{font-size:17px}
.pr-say .tt-mic-why{font-size:14.5px}
.pr-say .tt-mic-points{font-size:13.5px;gap:6px}
.pr-say .tt-mic .tt-actions{margin-top:14px;gap:8px}
.pr-say .tt-mic .tt-actions .tt-pill{min-height:44px;padding:0 18px;font-size:14.5px}
.pr-say .tt-mic-live{gap:10px}
.pr-say .tt-mic-btn{width:68px;height:68px}
.pr-say .tt-mic-btn .tt-i{width:30px;height:30px}
.pr-say .tt-mic-text{min-height:48px;padding:10px 14px;font-size:16px;text-align:center}
.pr-say .tt-mic-switch{margin-top:8px!important}
.pr-say .tt-mic-type textarea{min-height:64px}
.pr-say .tt-mic-note{font-size:14px}

/* The result: replaces the microphone box until the learner tries again */
.pr-say[data-screen="result"] .pr-mic{display:none}
.pr-said{display:grid;border-radius:16px;overflow:hidden;background:var(--st-miss-bg);color:var(--ink);font-size:15px;line-height:1.5}
.pr-said-h{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--st-miss);color:#fff;font:700 18px/1.25 var(--font-display);letter-spacing:-.01em}
.pr-said-h .tt-i{flex:none;width:22px;height:22px}
.pr-said-body{display:grid;gap:10px;padding:14px 16px 16px}
.pr-say[data-outcome="clear"] .pr-said{background:var(--st-ok-bg)}
.pr-say[data-outcome="clear"] .pr-said-h{background:var(--st-ok)}
.pr-say[data-outcome="nearly"] .pr-said{background:var(--st-close-bg)}
.pr-say[data-outcome="nearly"] .pr-said-h{background:var(--st-close)}
.pr-say[data-outcome="nothing"] .pr-said{background:var(--surface)}
.pr-say[data-outcome="nothing"] .pr-said-h{background:var(--ink-soft)}
.pr-tip{padding:10px 12px;border-radius:10px;background:#fff;font-size:14.5px}
.pr-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--ink-soft)}
.pr-legend span{display:inline-flex;align-items:center;gap:6px}
.pr-legend span::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--st-ok)}
.pr-legend [data-status="close"]::before{background:var(--st-close)}
.pr-legend [data-status="miss"]::before{background:var(--st-miss)}
.pr-result-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.pr-result-actions .tt-pill{min-height:44px;padding:0 18px;font-size:14.5px}

/* Record and compare */
.pr-compare{display:grid;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.pr-compare-k{color:var(--ink);font:700 15px/1.2 var(--font-display)}
.pr-wave-row{display:grid;grid-template-columns:44px 56px minmax(0,1fr);gap:10px;align-items:center}
.pr-wave-label{color:var(--ink-soft);font-size:13.5px;font-weight:600;line-height:1.2}
.pr-wave{display:block;width:100%;height:44px;border-radius:10px;background:var(--surface);color:var(--us)}
[data-acc="uk"] .pr-wave-ours .pr-wave{color:var(--uk)}
.pr-wave-yours .pr-wave{color:var(--purple)}
.pr-wave-ours .tt-say{background:var(--us-bg);color:var(--us-ink)}
[data-acc="uk"] .pr-wave-ours .tt-say{background:var(--uk-bg);color:var(--uk-ink)}
.pr-wave-yours .tt-say{background:var(--tint);color:var(--purple)}
.pr-wave-ours .tt-say[data-state="playing"]{background:var(--us);color:#fff}
[data-acc="uk"] .pr-wave-ours .tt-say[data-state="playing"]{background:var(--uk)}
.pr-wave-yours .tt-say[data-state="playing"]{background:var(--purple);color:#fff}
.pr-compare.is-device .pr-wave-ours .pr-wave{visibility:hidden}
.pr-compare .pr-wave-ours .pr-wave-label{grid-column:2/-1}
.pr-compare.has-ours .pr-wave-ours .pr-wave-label{grid-column:auto}
.pr-compare:not(.has-ours) .pr-wave-ours .pr-wave{display:none}
.pr-compare-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pr-record[data-state="recording"]{background:var(--st-miss)}
.pr-compare-note{flex-basis:100%;color:var(--muted);font-size:12.5px;line-height:1.4}

/* ── Sections ─────────────────────────────────────────────────────────── */
.pr-steps{display:grid;gap:22px}
.pr-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start}
.pr-n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--cat-bg);color:var(--cat-ink);font:700 18px/1 var(--font-display)}
.pr-steps h3{font:700 19px/1.25 var(--font-display);letter-spacing:-.02em;margin-bottom:4px}
.pr-legend-box{margin-top:32px;padding:20px 22px;border-radius:var(--r-card);background:var(--surface)}
.pr-legend-k{color:var(--ink);font-weight:600;margin-bottom:12px!important}
.pr-legend-list{display:grid;gap:10px}
.pr-legend-list li{display:flex;align-items:center;gap:12px;font-size:15px}
.pr-dot{display:inline-grid;place-items:center;min-width:52px;height:32px;padding:0 10px;border-radius:9px;color:#fff;font:700 15px/1 var(--font-display)}
.pr-dot[data-status="ok"]{background:var(--st-ok)}
.pr-dot[data-status="close"]{background:var(--st-close)}
.pr-dot[data-status="miss"]{background:var(--st-miss)}

.pr-sounds{margin-top:32px}
.pr-sound-card{display:grid;gap:10px;align-content:start;padding:24px;border-radius:var(--r-card);background:#fff;border:1px solid var(--line)}
.pr-sound-syms{display:flex;gap:6px}
.pr-ph{display:inline-grid;place-items:center;min-width:44px;height:32px;padding:0 8px;border-radius:9px;background:var(--cat-bg);color:var(--cat-ink);font:600 16px/1 var(--font-ipa)}
.pr-sound-card h3{font:700 19px/1.25 var(--font-display);letter-spacing:-.02em}
.pr-sound-card>p:not(.pr-sound-syms){font-size:15px}
.pr-chiprow{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px!important}

.pr-more-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px}
.pr-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:28px!important}
.pr-tile{position:relative;border-radius:var(--r-card);background:#fff;border:1px solid var(--line);transition:border-color .2s}
@media (hover:hover) and (pointer:fine){.pr-tile:hover{border-color:var(--line-strong)}}
.pr-tile a{display:grid;gap:3px;padding:16px 60px 16px 18px;text-decoration:none}
.pr-tile b{color:var(--ink);font:700 19px/1.2 var(--font-display);letter-spacing:-.02em;overflow-wrap:anywhere}
.pr-tile .pr-resp{font-size:14.5px}
.pr-tile .pr-ipa{color:var(--muted);font-size:13px;white-space:normal;overflow-wrap:anywhere}
.pr-tile .tt-say{position:absolute;right:12px;top:50%;translate:0 -50%;background:var(--us-bg);color:var(--us-ink)}
.pr-tile .tt-say[data-state="playing"]{background:var(--us);color:#fff}
@media (max-width:1023px){.pr-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:719px){.pr-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479px){.pr-tiles{grid-template-columns:1fr;gap:8px}.pr-tile a{padding:12px 56px 12px 14px}.pr-tile .pr-ipa{display:none}}

.pr-tips{display:grid;counter-reset:tip}
.pr-tips li{counter-increment:tip;position:relative;padding:16px 0 16px 48px;border-bottom:1px solid var(--line)}
.pr-tips li::before{content:counter(tip);position:absolute;left:0;top:14px;color:var(--cat-ink);font:700 20px/1.3 var(--font-display)}
.pr-tips b{color:var(--ink)}
.tt-cols .faq{margin-top:0}
.pr-prose{display:grid;gap:16px;max-width:66ch;font-size:17px;line-height:1.7}

/* ── Word pages ───────────────────────────────────────────────────────── */
.pr-title em{overflow-wrap:anywhere}
.pr-answer b{color:var(--ink)}
.pr-hero-card{display:grid;gap:12px;padding:clamp(12px,1.6vw,20px);border-radius:var(--r-panel);background:var(--cat-bg)}
.pr-hero-card .pr-card{border:0}
.pr-hero-card .pr-src{padding:0 8px 2px;color:var(--ink-soft)}
.pr-variants{display:grid;gap:10px;padding:18px 20px;border-radius:20px;background:var(--surface)}
.pr-variants-h{color:var(--ink);font:700 17px/1.3 var(--font-display)}
.pr-variants ul{display:grid;gap:10px}
.pr-variants li{display:grid;gap:6px;justify-items:start;padding:12px 14px;border-radius:14px;background:#fff;font-size:15px}
.pr-variants li b{color:var(--ink)}
.pr-variant-ipa{display:flex;flex-wrap:wrap;gap:2px 14px}
.pr-variants .tt-say{background:var(--us-bg);color:var(--us-ink)}

.pr-sbs-head{max-width:62ch;margin-bottom:28px}
.pr-sbs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pr-sbs.is-one{grid-template-columns:1fr}
@media (max-width:899px){.pr-sbs{grid-template-columns:1fr}}
.pr-sbs-acc{display:grid;gap:14px;align-content:start;padding:clamp(16px,2vw,24px);border-radius:20px;background:#fff;border:1px solid var(--line)}
.pr-sbs-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--ink);font:600 16px/1.3 var(--font-body)}
.pr-sbs-h .pr-ipa{margin-left:auto;color:var(--us-ink);font-size:17px}
.pr-sbs-acc.pr-acc-uk .pr-sbs-h .pr-ipa{color:var(--uk-ink)}
.pr-sbs-syl{display:grid;gap:10px}
.pr-sbs.is-one .pr-sbs-syl{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.pr-sbs-syl>li{display:grid;gap:8px;align-content:start;padding:12px 14px;border-radius:14px;background:var(--surface);border-left:4px solid var(--us-bg)}
.pr-sbs-syl>li.is-stress{background:var(--us-bg);border-left-color:var(--us)}
.pr-acc-uk .pr-sbs-syl>li{border-left-color:var(--uk-bg)}
.pr-acc-uk .pr-sbs-syl>li.is-stress{background:var(--uk-bg);border-left-color:var(--uk)}
.pr-sbs-chunk{display:flex;align-items:center;gap:8px}
.pr-sbs-chunk b{color:var(--ink);font:700 19px/1.2 var(--font-display)}
.pr-sbs-chunk span{padding:2px 8px;border-radius:6px;background:var(--us);color:#fff;font:600 12px/1.4 var(--font-body)}
.pr-acc-uk .pr-sbs-chunk span{background:var(--uk)}
.pr-sbs-syl ul{display:grid;gap:4px}
.pr-sbs-syl ul li{display:flex;align-items:center;gap:10px;font-size:15px}
.pr-sbs-syl .pr-ph{min-width:48px;height:28px;background:#fff;color:var(--us-ink);font-size:15px}
.pr-acc-uk .pr-sbs-syl .pr-ph{color:var(--uk-ink)}
.pr-sbs-syl i{font-style:normal;color:var(--ink)}
.pr-sbs-syl i b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

.pr-say-cols{align-items:start}
.pr-say-tip{margin-top:16px!important;padding:14px 16px;border-radius:14px;background:var(--tint);color:var(--ink);font-size:15px;max-width:52ch}
.pr-say-tip b{color:var(--ink)}

.pr-mistakes{margin-top:28px}
.pr-not-card{display:grid;gap:10px;align-content:start;padding:22px;border-radius:var(--r-card);background:var(--st-miss-bg);color:#5f1717}
.pr-not{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:#7f1d1d;font:700 21px/1.2 var(--font-display);letter-spacing:-.01em}
.pr-not-k{padding:4px 10px;border-radius:8px;background:var(--st-miss);color:#fff;font:700 13px/1.2 var(--font-body);letter-spacing:0}
.pr-not s{text-decoration-thickness:2px;text-decoration-color:var(--st-miss)}

.pr-sents{display:grid;gap:12px}
.pr-sents li{display:grid;gap:12px;padding:18px 20px;border-radius:var(--r-card);background:#fff;border:1px solid var(--line)}
.pr-sents p{color:var(--ink);font-size:18px;line-height:1.5}
.pr-sents p b{color:var(--us-ink)}
.pr-sent-btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pr-sents .tt-say{background:var(--us-bg);color:var(--us-ink)}
.pr-sents .tt-say[data-state="playing"]{background:var(--us);color:#fff}

.pr-alike{margin-top:28px}
.pr-alike-card{position:relative;border-radius:var(--r-card);background:#fff;border:1px solid var(--line)}
.pr-alike-card a{display:grid;gap:4px;height:100%;padding:20px 64px 20px 20px;text-decoration:none;color:var(--ink-soft)}
.pr-alike-card b{color:var(--ink);font:700 21px/1.2 var(--font-display);letter-spacing:-.02em}
.pr-alike-card .pr-ipa{color:var(--us-ink);font-size:15px}
.pr-alike-card small{font-size:14.5px;line-height:1.45}
.pr-alike-go{display:inline-flex;align-items:center;gap:6px;margin-top:6px;color:var(--purple);font-weight:600;font-size:14.5px}
.pr-alike-go .tt-i{width:16px;height:16px}
.pr-alike-card .tt-say{position:absolute;right:16px;top:18px;background:var(--us-bg);color:var(--us-ink)}
.pr-alike-card .tt-say[data-state="playing"]{background:var(--us);color:#fff}

/* ── The list ─────────────────────────────────────────────────────────── */
.pr-top10{display:grid;gap:12px}
.pr-top10-h{color:var(--ink);font:700 clamp(1.4rem,2.4vw,1.75rem)/1.15 var(--font-display);letter-spacing:-.03em}
.pr-top10-sub{font-size:15px;margin-bottom:4px!important}
.pr-top10 ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pr-top10 li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px 10px 10px 14px;border-radius:14px;background:#fff}
.pr-top-n{color:var(--cat-ink);font:800 16px/1 var(--font-display)}
.pr-top10 a{display:grid;gap:2px;min-width:0;text-decoration:none}
.pr-top10 a b{color:var(--ink);font:700 17px/1.2 var(--font-display);overflow-wrap:anywhere}
.pr-top10 a .pr-resp{font-size:14px;overflow-wrap:anywhere}
.pr-top10 .tt-say{background:var(--us-bg);color:var(--us-ink)}
.pr-top10 .tt-say[data-state="playing"]{background:var(--us);color:#fff}
@media (max-width:479px){.pr-top10 ol{grid-template-columns:1fr}}

.pr-bar{position:sticky;top:var(--top-h);z-index:5;padding-block:12px;background:#fff;border-block:1px solid var(--line)}
.pr-bar-row{display:flex;align-items:center;gap:12px 16px}
.pr-search{flex:0 0 220px}
.pr-search input{width:100%;height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--field);color:var(--ink);font:500 16px/1 var(--font-body)}
.pr-search input:focus{outline:2px solid var(--purple);outline-offset:1px;background:#fff}
.pr-cats{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.pr-cats::-webkit-scrollbar{display:none}
.pr-cats a{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:40px;padding:0 14px;border-radius:999px;background:#fff;color:var(--ink);font:600 14px/1 var(--font-body);text-decoration:none;white-space:nowrap;box-shadow:inset 0 0 0 1px var(--line-strong)}
.pr-cats a span{color:var(--muted);font-weight:500}
.pr-cats a[aria-current="true"]{background:var(--cat-ink);color:#fff;box-shadow:none}
.pr-cats a[aria-current="true"] span{color:#fff;opacity:.8}
.pr-count{flex:none;color:var(--muted);font-size:14px}
@media (max-width:899px){
  .pr-bar-row{flex-wrap:wrap}
  .pr-search{flex:1 1 100%}
  .pr-cats{flex:1 1 100%;order:2}
  .pr-count{display:none}
}
.pr-list{padding-block:clamp(32px,4vw,48px) var(--space-section)}
.pr-group+.pr-group{margin-top:clamp(40px,5vw,56px)}
.pr-group-head{display:grid;gap:6px;margin-bottom:18px;max-width:70ch}
.pr-group-h{font:700 clamp(1.4rem,2.4vw,1.75rem)/1.15 var(--font-display);letter-spacing:-.03em}
.pr-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pr-rows li{position:relative;border-radius:14px;background:#fff;border:1px solid var(--line);transition:border-color .2s}
@media (hover:hover) and (pointer:fine){.pr-rows li:hover{border-color:var(--line-strong)}}
.pr-rows a{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:2px 12px;align-items:baseline;padding:12px 56px 12px 16px;text-decoration:none}
.pr-rows b{color:var(--ink);font:700 17px/1.25 var(--font-display);overflow-wrap:anywhere}
.pr-rows .pr-resp{font-size:14px;overflow-wrap:anywhere}
.pr-rows .pr-ipa{grid-column:1/-1;color:var(--muted);font-size:13px;white-space:normal;overflow-wrap:anywhere}
.pr-rows .tt-say{position:absolute;right:10px;top:50%;translate:0 -50%;background:var(--us-bg);color:var(--us-ink)}
.pr-rows .tt-say[data-state="playing"]{background:var(--us);color:#fff}
@media (max-width:1023px){.pr-rows{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.pr-rows{grid-template-columns:1fr;gap:6px}.pr-rows a{padding:10px 56px 10px 14px}.pr-rows .pr-ipa{display:none}}
.pr-empty{padding:20px;border-radius:var(--r-card);background:var(--surface);font-size:16px}
.pr-empty a{color:var(--purple);text-underline-offset:3px}
html:has(.pr-bar){scroll-padding-top:calc(var(--top-h) + 84px)}
@media (max-width:899px){html:has(.pr-bar){scroll-padding-top:calc(var(--top-h) + 128px)}}

@media print{.pr-say,.pr-next,.pr-bar,.tt-say{display:none!important}}

/* Under the checker: sound by sound and compare, so the first screen stays calm */
.pr-below-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px);align-items:start}
.pr-below-grid .pr-sounds-card,.pr-compare-card{padding:clamp(18px,2vw,24px);border-radius:20px;background:#fff;border:1px solid var(--line)}
.pr-compare-card .pr-compare{padding-top:0;border-top:0}
.pr-below-sounds[hidden]+.pr-compare-card{grid-column:1/-1}
@media (max-width:899px){.pr-below-grid{grid-template-columns:1fr}}
.pr-work .pr-say .pr-target{background:transparent;padding:0}

/* The checker's tool: the card, then "Now say it" as a strip, then Slova. Compact, read top to bottom. */
.pr-eyebrow{margin-bottom:10px!important}
.pr-stage{display:grid;gap:12px}
.pr-work .pr-card{gap:12px;padding:18px 20px}
.pr-work .pr-card-head{grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:4px 14px}
.pr-work .pr-word{font-size:clamp(1.8rem,2.6vw,2.2rem)}
.pr-work .pr-syl li{min-width:46px;padding:6px 10px 5px}
.pr-work .pr-syl b{font-size:17px}
@media (min-width:560px){
  .pr-work .pr-acc{grid-template-columns:auto minmax(0,1fr) auto auto;padding:8px 8px 8px 12px}
  .pr-work .pr-acc .pr-tag{grid-row:1;margin-top:0;align-self:center}
  .pr-work .pr-acc-main{grid-column:2}
  .pr-work .pr-acc-src{grid-column:3;grid-row:1;max-width:9em;text-align:right}
  .pr-work .pr-acc-btns{grid-column:4;grid-row:1}
}
.pr-work .pr-src{font-size:12px}
.pr-work .pr-say{gap:12px}
.pr-work .pr-say-head{padding-block:10px}
.pr-work .pr-say-h{font-size:18px}
/* The shared microphone intro, short: the panel header already says what it is. */
.pr-work .tt-mic-ask{display:block}
.pr-work .tt-mic-ask .tt-ico,.pr-work .tt-mic h3{display:none}
.pr-work .tt-mic-why{font-size:14px}
.pr-work .tt-mic-points{margin-top:6px!important;font-size:12.5px;color:var(--muted)}
.pr-work .tt-mic-points .tt-i{width:14px;height:14px}
.pr-work .tt-mic .tt-actions{margin-top:10px}
.pr-work .tt-mic .tt-actions .tt-pill{min-height:40px;padding:0 14px;font-size:14px}
.pr-slova{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;border-radius:18px;background:#fff}
.pr-slova img{border-radius:12px}
.pr-slova p{font-size:14.5px;line-height:1.45;color:var(--ink-soft)}
.pr-slova b{color:var(--ink)}
@media (max-width:559px){.pr-slova{grid-template-columns:40px minmax(0,1fr)}.pr-slova img{width:40px;height:40px}.pr-slova-go{grid-column:1/-1}}
/* Before a result the card above already shows the word: the strip is just the microphone. */
.pr-work .pr-say[data-screen="mic"] .pr-target{display:none}
.pr-work .tt-mic-type textarea{min-height:48px;height:48px}
.pr-work .tt-mic-note{padding:10px 12px;font-size:13.5px}
.pr-work .tt-mic-live{grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;align-items:center}
.pr-work .tt-mic-live .tt-mic-text{grid-column:1/-1}

/* The picker in the hero, the workspace below it */
.pr-picker{display:grid;gap:12px;align-content:start;padding:clamp(20px,2.4vw,32px);border-radius:var(--r-panel);background:var(--cat-bg)}
.pr-picker .pr-form{margin:0}
.pr-picker-k{color:var(--cat-ink);font:600 15px/1.3 var(--font-body);display:block;margin-bottom:8px}
.pr-picker .pr-picker-k:not(label){margin:6px 0 -2px}
.pr-sets{display:flex;flex-wrap:wrap;gap:6px}
.pr-set{min-height:36px;padding:0 14px;border:0;border-radius:999px;background:#fff;color:var(--cat-ink);font:600 14px/1 var(--font-body);cursor:pointer}
.pr-set[aria-pressed="true"]{background:var(--cat-ink);color:#fff}
@media (hover:hover) and (pointer:fine){.pr-set[aria-pressed="false"]:hover{box-shadow:inset 0 0 0 2px var(--cat-ink)}}
.pr-picker .pr-tries{display:flex;flex-wrap:wrap;gap:8px;padding:14px;border-radius:16px;background:#fff;min-height:64px}
.pr-picker .pr-chip{min-height:38px;font-size:15px}
.pr-picker-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.pr-picker .pr-shuffle{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:15px}
.pr-picker .pr-shuffle .tt-i{width:18px;height:18px}
.pr-work{scroll-margin-top:calc(var(--top-h) + 8px)}
.pr-workbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.pr-workbar-k{color:var(--ink-soft);font-size:16px}
.pr-workbar-k b{color:var(--ink);font:700 22px/1.2 var(--font-display);margin-left:6px}
.pr-workbar-btns{display:flex;gap:8px}
.pr-work-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(16px,2vw,24px);align-items:start}
.pr-work-main{display:grid;gap:16px;min-width:0}
.pr-work .pr-card,.pr-work .pr-say{border:1px solid var(--line)}
.pr-work .pr-sounds-card{padding:20px 22px;border-radius:20px;background:#fff;border:1px solid var(--line)}
.pr-work .pr-slova{margin-top:20px;border:1px solid var(--line)}
@media (max-width:899px){.pr-work-grid{grid-template-columns:1fr}}
@media (max-width:1023px){.pr-hero-tool .tt-hero2-grid{gap:28px}}
.pr-picker,.pr-picker>*{min-width:0}
.pr-picker{grid-template-columns:minmax(0,1fr)}

/* The Slova bar: talk with the AI tutor. Sticky under the site header, can be hidden. */
.pr-promo{position:sticky;top:var(--top-h);z-index:40;background:var(--tint);border-bottom:1px solid var(--purple-14)}
.pr-promo-row{display:flex;align-items:center;gap:14px;min-height:60px}
.pr-promo img{flex:none;width:44px;height:44px;border-radius:12px;object-fit:cover}
.pr-promo p{flex:1;min-width:0;color:var(--ink-soft);font-size:15px;line-height:1.35}
.pr-promo b{color:var(--ink)}
.pr-promo-go{flex:none}
.pr-promo-x{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink-soft);cursor:pointer}
.pr-promo-x .tt-i{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.pr-promo-x:hover{background:#fff;color:var(--ink)}}
@media (max-width:639px){
  .pr-promo-more{display:none}
  .pr-promo-row{gap:10px;min-height:52px}
  .pr-promo img{width:36px;height:36px;border-radius:10px}
  .pr-promo p{font-size:14px}
  .pr-promo-go{min-height:36px;padding:0 12px;font-size:13.5px}
}
body:has(.pr-promo:not([hidden])) .pr-bar{top:calc(var(--top-h) + 61px)}
html:has(.pr-promo:not([hidden])){scroll-padding-top:calc(var(--top-h) + 80px)}
html:has(.pr-bar):has(.pr-promo:not([hidden])){scroll-padding-top:calc(var(--top-h) + 146px)}
body:has(.pr-promo:not([hidden])) .pr-work{scroll-margin-top:calc(var(--top-h) + 70px)}
@media (max-width:639px){body:has(.pr-promo:not([hidden])) .pr-bar{top:calc(var(--top-h) + 53px)}}

/* The list's hero: the copy wide on the left, a globe with five hard words on the right */
@media (min-width:1024px){.pr-hero-list .tt-hero2-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}}
.pr-globe-art{position:relative;display:grid;place-items:center;min-height:320px}
.pr-globe-art .pr-globe{width:min(100%,380px);margin:0}
.pr-floats{position:absolute;inset:0}
.pr-float{position:absolute;display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border-radius:14px;background:#fff;border:1px solid var(--line-strong)}
.pr-float a{display:grid;text-decoration:none}
.pr-float b{color:var(--ink);font:700 15px/1.2 var(--font-display)}
.pr-float .pr-resp{font-size:12.5px}
.pr-float .tt-say{width:34px;height:34px;background:var(--us-bg);color:var(--us-ink)}
.pr-float .tt-say .tt-i{width:17px;height:17px}
.pr-float .tt-say[data-state="playing"]{background:var(--us);color:#fff}
.pr-f1{top:4%;left:0}
.pr-f2{top:0;right:0}
.pr-f3{top:46%;left:-2%}
.pr-f4{top:50%;right:0}
.pr-f5{bottom:0;left:32%}
@media (max-width:1023px){.pr-globe-art{min-height:280px}.pr-globe-art .pr-globe{width:min(100%,320px)}}
@media (max-width:479px){.pr-globe-art{min-height:250px}.pr-globe-art .pr-globe{width:min(100%,250px)}.pr-f3,.pr-f5{display:none}.pr-f4{top:62%}}
@media (max-width:639px){.pr-hero-list .pr-globe-art{display:none}.pr-hero-list .tt-facts-row{margin-top:24px!important}}