/* English word of the day, on top of /english/tools.css.
   Each topic has one solid colour: a light surface and a dark ink. The page
   top stays white; colour sits on the word cards, the quiz, the word family
   band and the archive. The quiz options are big cards that turn solid green
   (right) or solid red (wrong). Solid colour only, sentence case only. */

main [hidden]{display:none!important}

/* ── Topic colours ───────────────────────────────────────────────────────── */
[data-topic]{--tp-bg:var(--field);--tp-ink:var(--ink)}
[data-topic="work"]{--tp-bg:#fdf0c4;--tp-ink:#7c4a03}
[data-topic="travel"]{--tp-bg:#dbeafe;--tp-ink:#1e40af}
[data-topic="tech"]{--tp-bg:#ede9fe;--tp-ink:#5b21b6}
[data-topic="health"]{--tp-bg:#d6f5e3;--tp-ink:#166534}
[data-topic="home"]{--tp-bg:#ffe4d1;--tp-ink:#9a3412}
[data-topic="feelings"]{--tp-bg:#fce7f3;--tp-ink:#9d174d}
[data-topic="levels"]{--tp-bg:#f3f2f5;--tp-ink:var(--words-ink)}
[data-topic="students"]{--tp-bg:#fff1f2;--tp-ink:var(--words-ink)}
/* Inside a topic, the frame's category colours (listen buttons, eyebrows, the title's em) follow it. */
.wd-word-hero,.wd-hub-hero[data-topic],.wd-quiz,.wd-card,.wd-family-band,.wd-recall,.wd-test-item{--cat-bg:var(--tp-bg);--cat-ink:var(--tp-ink);--cat-btn:var(--tp-ink)}

/* ── Small pieces ────────────────────────────────────────────────────────── */
.wd-level{display:inline-grid;place-items:center;min-width:34px;height:26px;padding:0 8px;border-radius:8px;background:var(--ink);color:#fff;font:700 12.5px/1 var(--font-body);font-style:normal;letter-spacing:.01em}
.wd-tag{display:inline-flex;align-items:center;min-height:30px;padding:0 13px;border-radius:999px;background:var(--tp-bg);color:var(--tp-ink);font:700 13.5px/1 var(--font-body);text-decoration:none}
@media (hover:hover) and (pointer:fine){a.wd-tag:hover{background:var(--tp-ink);color:#fff}}
.wd-flip{transform:scaleX(-1)}
.wd-sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px}
.wd-sec-head .tt-sub{max-width:62ch;margin-top:12px!important}
.wd-sec-head .tt-link{color:var(--tp-ink,var(--purple))}

/* Topic chips: the six topics, the current one solid */
.wd-chips ul{display:flex;flex-wrap:wrap;gap:8px}
.wd-chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:var(--tp-bg);color:var(--tp-ink);font:600 14.5px/1 var(--font-body);text-decoration:none;box-shadow:inset 0 0 0 1.5px transparent;transition:background-color .18s,color .18s,box-shadow .18s}
.wd-chip[aria-current]{background:var(--tp-ink);color:#fff}
@media (hover:hover) and (pointer:fine){.wd-chip:not([aria-current]):hover{box-shadow:inset 0 0 0 1.5px var(--tp-ink)}}
.tt-hero2-copy .wd-chips{margin-bottom:28px}
.tt-hero2-copy .wd-chips ul{gap:6px}
.tt-hero2-copy .wd-chip{min-height:36px;padding:0 14px;font-size:14px}

/* ── The day bar on word pages: previous day · topic · next day ──────────── */
.wd-daybar{position:sticky;top:var(--top-h);z-index:30;margin-top:16px;background:#fff;border-block:1px solid var(--line)}
.wd-daybar-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;min-height:60px}
.wd-day{display:inline-flex;align-items:center;gap:10px;min-width:0;max-width:100%;padding:6px 0;color:var(--ink);text-decoration:none}
.wd-day-next{justify-self:end;text-align:right}
.wd-day-text{display:grid;min-width:0}
.wd-day small{font-size:12.5px;line-height:1.3;color:var(--muted)}
.wd-day b{overflow:hidden;font:700 15.5px/1.25 var(--font-display);letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis}
.wd-day .tt-i{flex:none;width:20px;height:20px;color:var(--tp-ink)}
.wd-day.is-off,.wd-day.is-off .tt-i{color:var(--muted)}
.wd-day.is-off b{font-weight:600}
@media (hover:hover) and (pointer:fine){a.wd-day:hover b{text-decoration:underline;text-underline-offset:3px}}
.wd-daybar-topic{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px 0 6px;border-radius:999px;background:var(--tp-bg);color:var(--tp-ink);font:700 14.5px/1 var(--font-body);text-decoration:none;white-space:nowrap}
.wd-daybar-art{width:30px;height:30px}
@media (hover:hover) and (pointer:fine){.wd-daybar-topic:hover{box-shadow:inset 0 0 0 1.5px var(--tp-ink)}}
@media (max-width:599px){
  .wd-daybar{margin-top:12px}
  .wd-daybar-row{min-height:54px;gap:8px}
  .wd-daybar-all{display:none}
  .wd-daybar-topic{padding:0 12px 0 5px;font-size:14px}
  .wd-daybar-art{width:26px;height:26px}
  .wd-day b{font-size:14.5px}
}

/* ── The word (word pages) ───────────────────────────────────────────────── */
.wd-word-hero{padding-block:clamp(28px,4vw,48px) clamp(40px,6vw,72px)}
.wd-word-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"head tool" "def tool" "after after";grid-template-rows:auto 1fr auto;gap:0 clamp(32px,5vw,64px);align-items:start}
.wd-after-in{grid-area:after;padding:0;margin-top:clamp(32px,4vw,48px)}
.wd-head{grid-area:head;min-width:0;container-type:inline-size}
.wd-def{grid-area:def;min-width:0}
.wd-word-pic{grid-area:pic;width:min(100%,200px);margin-top:32px}
.wd-tool{grid-area:tool;min-width:0}
@media (max-width:1023px){
  .wd-word-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "def" "tool" "after"}
  .wd-after-in{margin-top:24px}
  .wd-tool{margin-top:28px}
  .wd-word-pic{width:min(56%,220px);margin-top:28px}
}
.wd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:14px;color:var(--muted)}
/* The word never breaks inside itself: it is set as large as its longest part fits. */
.wd-word,.wd-card-word{margin:14px 0 0;font:700 4.5rem/1.02 var(--font-display);letter-spacing:-.05em;color:var(--ink);overflow-wrap:normal;word-break:normal;hyphens:manual}
.wd-word{font-size:clamp(2.4rem,12vw,4.75rem)}
.wd-word[data-len="l"],.wd-word[data-len="xl"]{font-size:clamp(2rem,9vw,3.75rem)}
@supports (font-size:1cqi){
  .wd-word,.wd-card-word{font-size:min(5rem,17cqi)}
  .wd-word[data-len="m"],.wd-card-word[data-len="m"]{font-size:min(4.75rem,13.5cqi)}
  .wd-word[data-len="l"],.wd-card-word[data-len="l"]{font-size:min(4.5rem,11.5cqi)}
  .wd-word[data-len="xl"],.wd-card-word[data-len="xl"]{font-size:min(4.25rem,10cqi)}
}
.wd-pos{margin-top:8px!important;font-size:16px;font-style:italic;color:var(--ink-soft)}
.wd-us{font-style:normal}
.wd-pron{display:flex;align-items:center;gap:14px;margin-top:18px}
.wd-ipas{display:flex;flex-wrap:wrap;gap:2px 18px;min-width:0}
.wd-ipa{font-size:15px;color:var(--ink-soft);white-space:nowrap}
.wd-ipa b{margin-right:4px;font:700 12px/1 var(--font-body);color:var(--muted)}
.wd-meaning{margin-top:28px!important;font:500 clamp(1.1rem,1.5vw,1.3rem)/1.5 var(--font-body);color:var(--ink)}
.wd-examples{display:grid;gap:10px;margin-top:20px!important}
.wd-examples li{display:flex;gap:12px;align-items:flex-start;padding:10px 14px 10px 10px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.wd-examples p{padding-top:7px;color:var(--ink-soft);font-size:16px;line-height:1.5}
.wd-examples b{font-weight:700;color:var(--ink)}
@media (max-width:599px){
  .wd-word-hero{padding-top:20px}
  .wd-word{margin-top:10px}
  .wd-pron{margin-top:12px}
  .wd-meaning{margin-top:16px!important;font-size:1.08rem}
  .wd-examples{gap:4px;margin-top:12px!important}
  .wd-examples li{gap:10px;padding:4px 0;border:0;background:none}
  .wd-examples .tt-say-sm{width:34px;height:34px}
  .wd-examples p{padding-top:5px;font-size:15.5px}
  .wd-tool{margin-top:20px}
}

/* The picture, or until it exists, a box with the word set in type */
.wd-pic{position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;border-radius:20px;background:var(--field)}
.wd-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wd-pic.is-blank{display:grid;place-items:center;padding:16px 12px 40px;text-align:center;container-type:inline-size;box-shadow:inset 0 0 0 1px var(--line-strong)}
.wd-blank-word{font:700 1.5rem/1.05 var(--font-display);letter-spacing:-.04em;color:var(--muted-2);overflow-wrap:normal;word-break:normal}
@supports (font-size:1cqi){
  .wd-blank-word{font-size:15cqi}
  .wd-blank-word[data-len="m"]{font-size:11.5cqi}
  .wd-blank-word[data-len="l"]{font-size:9.5cqi}
  .wd-blank-word[data-len="xl"]{font-size:8cqi}
}
.wd-blank-note{position:absolute;left:0;right:0;bottom:14px;display:flex;align-items:center;justify-content:center;gap:6px;font:600 13px/1 var(--font-body);color:var(--muted)}
.wd-blank-note .tt-i{width:16px;height:16px}

/* ── The quiz ────────────────────────────────────────────────────────────── */
.wd-quiz{padding:clamp(20px,3vw,32px);border-radius:var(--r-panel);background:var(--tp-bg);color:var(--ink)}
.wd-quiz-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 16px}
.wd-quiz-art{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:#fff}
.wd-quiz-art img{width:40px;height:40px}
.wd-quiz-title{min-width:0}
@media (max-width:519px){
  .wd-quiz-top{grid-template-columns:auto minmax(0,1fr)}
  .wd-quiz-top .wd-dots{grid-column:1/-1}
  .wd-quiz-art{width:48px;height:48px;border-radius:14px}
  .wd-quiz-art img{width:34px;height:34px}
}
.wd-quiz-h{font:700 clamp(1.3rem,2vw,1.6rem)/1.15 var(--font-display);letter-spacing:-.03em;color:var(--tp-ink)}
.wd-quiz-sub{margin-top:4px!important;font-size:14.5px;color:var(--ink-soft)}
.wd-dots{display:flex;gap:6px}
.wd-dots li{width:26px;height:8px;border-radius:999px;background:#fff}
.wd-dots li.is-now{background:var(--tp-ink)}
.wd-dots li.is-right{background:var(--ok)}
.wd-dots li.is-retry{background:var(--bad)}
.wd-qs{margin-top:22px!important}
.wd-q-label{display:flex;flex-wrap:wrap;gap:4px 10px;font:500 13.5px/1.3 var(--font-body);color:var(--ink-soft)}
.wd-q-label span+span::before{content:"·";margin-right:10px}
.wd-q-text{margin-top:8px!important;font:700 clamp(1.15rem,1.7vw,1.4rem)/1.3 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.wd-q-text:focus{outline:none}
.wd-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.wd-opts.is-long{grid-template-columns:minmax(0,1fr);gap:10px}
.wd-opt{display:flex;align-items:center;gap:14px;min-width:0;min-height:64px;padding:12px 16px 12px 12px;border:2px solid #fff;border-radius:16px;background:#fff;color:var(--ink);font:600 16.5px/1.35 var(--font-body);text-align:left;cursor:pointer;transition:transform .16s var(--ease-out),border-color .15s,background-color .15s,color .15s,opacity .2s}
.wd-opts.is-long .wd-opt{min-height:58px;font-weight:500;font-size:15.5px;line-height:1.45}
.wd-opt-text{min-width:0;overflow-wrap:break-word}
.wd-key{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--tp-bg);color:var(--tp-ink);font:700 14px/1 var(--font-body)}
.wd-key .tt-i{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.wd-opt:not([aria-disabled]):hover{border-color:var(--tp-ink)}}
.wd-opt:not([aria-disabled]):active{transform:scale(.985)}
.wd-opt[aria-disabled]{cursor:default}
.wd-opt.is-wrong{border-color:var(--bad);background:var(--bad);color:#fff}
.wd-opt.is-right{border-color:var(--ok);background:var(--ok);color:#fff}
.wd-opt.is-wrong .wd-key{background:#fff;color:var(--bad)}
.wd-opt.is-right .wd-key{background:#fff;color:var(--ok)}
.wd-q.is-done .wd-opt:not(.is-right):not(.is-wrong){opacity:.5}
.wd-opt:focus-visible{outline:3px solid var(--tp-ink);outline-offset:2px}
/* Feedback: a solid green strip with the reason under it; a solid red line for a wrong try */
.wd-why{margin-top:16px;overflow:hidden;border:2px solid var(--ok);border-radius:16px;background:#fff}
.wd-verdict{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--ok);color:#fff;font:700 15px/1.3 var(--font-body)}
.wd-verdict .tt-i{flex:none;width:20px;height:20px}
.wd-why p+p{padding:14px 16px 16px;font-size:15.5px;line-height:1.55;color:var(--ink)}
.wd-status{display:flex;align-items:center;gap:10px;margin-top:14px!important;padding:12px 16px;border-radius:14px;background:var(--bad);color:#fff;font:600 15px/1.4 var(--font-body)}
.wd-status .tt-i{flex:none;width:20px;height:20px}
.wd-status:empty{display:none}
.wd-quiz-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-top:18px}
.wd-quiz-foot .tt-pill{order:2}
.wd-keys{font-size:13px;color:var(--ink-soft)}
@media (hover:none),(max-width:719px){.wd-keys{display:none}}
@media (max-width:519px){
  .wd-opts{grid-template-columns:minmax(0,1fr);gap:10px}
  .wd-opt{min-height:56px}
  .wd-quiz-foot .tt-pill{width:100%}
}
/* On a phone, once a question is answered, "Next question" stays at the bottom of the screen */
@media (max-width:719px){
  .wd-quiz.is-answered .wd-quiz-foot{position:sticky;bottom:0;z-index:5;margin:18px calc(-1 * clamp(20px,3vw,32px)) 0;padding:12px clamp(20px,3vw,32px) calc(12px + env(safe-area-inset-bottom,0px));background:var(--tp-bg);border-top:1px solid rgba(23,18,29,.08)}
}

/* The score */
.wd-result:focus{outline:none}
.wd-result-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.wd-result-art{flex:none;width:88px;height:88px}
@media (max-width:519px){.wd-result-art{width:64px;height:64px}}
.wd-result-score{font:800 clamp(2.6rem,5vw,3.5rem)/1 var(--font-display);letter-spacing:-.04em;color:var(--tp-ink)}
.wd-result-sub{margin-top:6px!important;font-weight:500;color:var(--ink-soft)}
.wd-dots-big{margin-top:16px}
.wd-dots-big li{width:40px;height:10px}
.wd-result-line{margin-top:16px!important;max-width:54ch;font-size:16px;line-height:1.55;color:var(--ink)}
.wd-result .tt-actions{margin-top:20px}
.wd-result-next{display:flex;align-items:center;gap:14px;margin-top:20px!important;padding:14px 16px;border-radius:14px;background:#fff;font-size:15.5px;line-height:1.45;color:var(--ink)}
.wd-result-next a{color:var(--tp-ink);font-weight:700;text-underline-offset:3px}
.wd-mini-art{flex:none;width:44px;height:44px}

/* After the score: the Slova card, then the optional email box */
.wd-after{padding-block:0 clamp(48px,6vw,80px)}
.wd-after-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px;align-items:start}
@media (max-width:1023px){.wd-after-grid{grid-template-columns:minmax(0,1fr)}}

/* ── Word pages, below the quiz ──────────────────────────────────────────── */
.wd-notes{align-items:start}
.wd-prose p{margin-top:16px!important;max-width:62ch;color:var(--ink-soft);font-size:17px;line-height:1.65}
.tt-h2+.wd-prose p:first-child{margin-top:20px!important}
.wd-mistakes{display:grid;gap:14px;margin-top:24px!important}
.wd-mistakes li{display:grid;gap:10px;padding:18px 20px;border:1px solid var(--line-strong);border-radius:var(--r-card);background:#fff}
.wd-wrong,.wd-right{display:flex;gap:12px;align-items:baseline;color:var(--ink);font-size:16px}
.wd-wrong>span:last-child{color:var(--ink-soft);text-decoration:line-through;text-decoration-color:var(--bad);text-decoration-thickness:1.5px}
.wd-right>span:last-child{font-weight:600}
.wd-lab{flex:none;display:inline-grid;place-items:center;min-width:42px;height:24px;padding:0 8px;border-radius:7px;color:#fff;font:700 12.5px/1 var(--font-body);text-decoration:none}
.wd-wrong .wd-lab{background:var(--bad)}
.wd-right .wd-lab{background:var(--ok)}
.wd-mwhy{font-size:15px;line-height:1.5;color:var(--ink-soft)}

.wd-family-band{background:var(--tp-bg)}
.wd-family-band .tt-h2{color:var(--ink)}
.wd-family{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.wd-fam{padding:20px 22px 22px;border-radius:var(--r-card);background:#fff}
.wd-fam.is-wide{grid-column:1/-1}
.wd-fam h3{font:700 15px/1.3 var(--font-body);color:var(--tp-ink)}
.wd-fam ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px!important}
.wd-fam li{padding:7px 13px;border-radius:999px;background:var(--tp-bg);color:var(--ink);font-size:15px;line-height:1.3}
@media (max-width:599px){.wd-family{grid-template-columns:minmax(0,1fr)}}

.wd-recall .tt-cols-head .tt-actions{margin-top:18px}
.wd-recall .tt-link{color:var(--tp-ink)}

/* Small word cards: more in this topic, today's six */
.wd-minis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px!important}
@media (max-width:899px){.wd-minis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:559px){.wd-minis{grid-template-columns:minmax(0,1fr);gap:10px}}
.wd-minis>li{min-width:0}
.wd-mini{position:relative;display:grid;align-content:start;gap:6px;height:100%;padding:18px 52px 20px 20px;border-radius:var(--r-card);background:var(--tp-bg);color:var(--ink);text-decoration:none;transition:transform .2s var(--ease-out),box-shadow .2s}
.wd-mini-top{display:flex;align-items:center;gap:10px;font:600 13.5px/1.2 var(--font-body);color:var(--tp-ink)}
.wd-mini-word{font:700 clamp(1.35rem,2vw,1.6rem)/1.15 var(--font-display);letter-spacing:-.03em;color:var(--ink);overflow-wrap:normal}
.wd-mini-mean{display:-webkit-box;overflow:hidden;font-size:14.5px;line-height:1.45;color:var(--ink-soft);-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wd-mini-go{position:absolute;right:18px;top:50%;margin-top:-10px;color:var(--tp-ink)}
.wd-mini-go .tt-i{width:20px;height:20px}
@media (hover:hover) and (pointer:fine){.wd-mini:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1.5px var(--tp-ink)}}

/* ── Main page and topic pages: the hero card ────────────────────────────── */
.wd-hub-hero{padding-block:clamp(28px,4vw,56px) clamp(48px,6vw,80px)}
.wd-hub-hero .tt-hero2-grid{align-items:start}
.wd-today{display:grid;gap:16px;min-width:0}
.wd-switch ul{gap:6px}
.wd-card{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:clamp(20px,3vw,32px);border-radius:var(--r-panel);background:var(--tp-bg)}
.wd-card-body{min-width:0;container-type:inline-size}
.wd-card-top{display:flex;align-items:center;gap:10px;font:700 14.5px/1.2 var(--font-body);color:var(--tp-ink)}
.wd-card-top time{margin-left:auto;font-weight:500;color:var(--ink-soft)}
.wd-card-art{flex:none;width:40px;height:40px}
.wd-card-word{margin-top:18px}
.wd-card-pos{display:flex;align-items:center;gap:10px;margin-top:10px!important;font-style:italic;color:var(--ink-soft)}
.wd-card .wd-pron{margin-top:14px}
.wd-card .tt-say{background:#fff}
@media (hover:hover) and (pointer:fine){.wd-card .tt-say:not([data-state]):hover{background:var(--tp-ink);color:#fff}}
.wd-card-mean{margin-top:18px!important;font:500 17px/1.5 var(--font-body);color:var(--ink)}
.wd-card-ex{display:flex;gap:10px;align-items:flex-start;margin-top:12px!important;color:var(--ink-soft)}
.wd-card-ex>span{padding-top:7px}
.wd-card-ex b{color:var(--ink)}
.wd-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:24px}
.wd-card-actions .tt-link{color:var(--tp-ink)}
.wd-card-pic{align-self:start;box-shadow:inset 0 0 0 1px rgba(23,18,29,.12)}
.wd-card-pic.is-blank{background:#fff}
/* On a phone the card is the word, its sound and its meaning; the word page has the picture. */
@media (max-width:639px){.wd-card{grid-template-columns:minmax(0,1fr)}.wd-card>.wd-pic{display:none}}

/* The words a topic quiz covers, next to it */
.wd-quiz-words-h{margin-top:24px!important;font:700 14px/1.3 var(--font-body);color:var(--tp-ink)}
.wd-quiz-words{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px!important}
.wd-quiz-words a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;background:var(--tp-bg);color:var(--tp-ink);font:600 14.5px/1 var(--font-body);text-decoration:none}
@media (hover:hover) and (pointer:fine){.wd-quiz-words a:hover{background:var(--tp-ink);color:#fff}}

/* The quiz section under the hero */
.wd-test{padding-top:clamp(16px,3vw,40px)}
.wd-test .tt-cols-head .tt-link{color:var(--tp-ink)}

/* How to learn */
.wd-steps{display:grid;gap:14px;counter-reset:step}
.wd-steps li{position:relative;display:grid;gap:6px;padding:20px 22px 22px 76px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);counter-increment:step}
.wd-steps li::before{content:counter(step);position:absolute;left:22px;top:19px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--purple);color:#fff;font:700 15px/1 var(--font-body)}
.wd-steps h3{font:700 18px/1.3 var(--font-display);letter-spacing:-.02em}
.wd-steps p{color:var(--ink-soft)}
.wd-teachers{margin-top:20px!important;font-size:15px;color:var(--ink-soft)}
@media (max-width:599px){
  .wd-steps{gap:10px}
  .wd-steps li{padding:16px 16px 18px 62px}
  .wd-steps li::before{left:16px;top:16px;width:32px;height:32px;font-size:14px}
  .wd-steps h3{font-size:17px}
  .wd-steps p{font-size:15px}
}

/* ── The calendar of every word so far ───────────────────────────────────── */
.wd-archive .wd-chips{margin-top:24px}
.wd-cal{margin-top:36px}
.wd-cal-month{font:700 20px/1.2 var(--font-display);letter-spacing:-.02em}
.wd-cal-head,.wd-cal-day{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px}
.wd-cal-head{grid-template-columns:104px repeat(6,minmax(0,1fr));margin-top:14px;padding-bottom:10px;border-bottom:1px solid var(--line);font:700 13px/1.2 var(--font-body);color:var(--muted)}
.wd-cal-head span[data-topic]{padding-left:12px;color:var(--tp-ink)}
.wd-cal-day{align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.wd-cal-day time{display:flex;align-items:baseline;gap:6px;font-size:13.5px;color:var(--muted)}
.wd-cal-day time b{font:700 20px/1 var(--font-display);color:var(--ink)}
.wd-cal-day ul{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.wd-cal-day a{display:block;height:100%;padding:9px 12px;border-radius:10px;background:var(--tp-bg);color:var(--tp-ink);font:600 14.5px/1.3 var(--font-body);text-decoration:none;overflow-wrap:normal}
.wd-cal-day a small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (hover:hover) and (pointer:fine){.wd-cal-day a:hover{background:var(--tp-ink);color:#fff}}
@media (max-width:899px){
  .wd-cal-head{display:none}
  .wd-cal-day{grid-template-columns:minmax(0,1fr);gap:8px;padding:12px 0}
  .wd-cal-day ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .wd-cal-day a{padding:6px 10px 7px;font-size:14px}
  .wd-cal-day a small{position:static;display:block;width:auto;height:auto;clip:auto;font-size:11.5px;font-weight:600;line-height:1.35;color:var(--ink-soft)}
}
@media (max-width:479px){.wd-cal-day ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wd-cal-more{margin-top:20px}
.wd-cal-more>summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-strong);font:600 15px/1 var(--font-body);color:var(--ink);cursor:pointer;list-style:none}
.wd-cal-more>summary::-webkit-details-marker{display:none}
.wd-cal-more>summary .tt-i{width:18px;height:18px;transition:transform .2s var(--ease-out)}
.wd-cal-more[open]>summary .tt-i{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){.wd-cal-more>summary:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}}

/* One topic's words, newest first (topic pages) */
.wd-list{display:grid;gap:8px}
.wd-list a{display:grid;grid-template-columns:88px minmax(0,10.5rem) 40px minmax(0,1fr);align-items:center;gap:6px 14px;padding:14px 18px;border-radius:14px;background:#fff;color:var(--ink);text-decoration:none;transition:box-shadow .2s}
.wd-list time{font-size:13.5px;color:var(--muted)}
.wd-list b{font:700 18px/1.2 var(--font-display);letter-spacing:-.02em}
.wd-list-mean{font-size:14.5px;line-height:1.45;color:var(--ink-soft)}
@media (hover:hover) and (pointer:fine){.wd-list a:hover{box-shadow:inset 0 0 0 1.5px var(--tp-ink)}}
@media (max-width:719px){
  .wd-list a{grid-template-columns:auto minmax(0,1fr);padding:12px 16px}
  .wd-list time{grid-column:1/-1}
  .wd-list .wd-level{justify-self:start}
  .wd-list-mean{grid-column:1/-1}
}

/* Print: the word and its notes, not the quiz */
@media print{.wd-daybar,.wd-tool,.wd-test,.wd-after,.wd-recall{display:none!important}}

/* ── Where to go next: the level test and the vocabulary test ───────────── */
.wd-mylevel{font-size:14px;font-weight:600;color:#15803d;text-underline-offset:3px}
.wd-result-route{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-top:14px!important;padding:14px 16px;border-radius:14px;background:var(--purple);color:#fff;font-size:15.5px;line-height:1.45}
.wd-result-route span{flex:1 1 260px}
.wd-result-route .tt-pill{background:#fff;color:var(--purple)!important}
@media (hover:hover) and (pointer:fine){.wd-result-route .tt-pill:hover{background:var(--tint)}}
.wd-next-band{background:var(--tests-bg)}
.wd-next{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(28px,5vw,64px);align-items:center}
.wd-next-head .tt-sub{margin-top:12px!important}
.wd-next-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.wd-next-card{display:grid;grid-template-rows:auto 1fr auto;gap:14px;padding:22px;border-radius:var(--r-card);background:#fff;color:var(--ink);text-decoration:none;transition:transform .2s var(--ease-out),box-shadow .2s}
.wd-next-card .tt-ico{--cat-bg:var(--tests-bg);--cat-ink:var(--tests-ink)}
.wd-next-text{display:grid;gap:6px}
.wd-next-text b{font:700 19px/1.25 var(--font-display);letter-spacing:-.02em}
.wd-next-text span{font-size:15px;line-height:1.5;color:var(--ink-soft)}
.wd-next-text small{font-size:13.5px;color:var(--muted)}
.wd-next-cta{display:inline-flex;align-items:center;gap:6px;color:var(--purple);font-weight:700}
.wd-next-cta .tt-i{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.wd-next-card:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1.5px var(--tests-ink)}}
@media (max-width:899px){.wd-next{grid-template-columns:minmax(0,1fr)}}
@media (max-width:559px){.wd-next-cards{grid-template-columns:minmax(0,1fr);gap:10px}.wd-next-card{padding:18px}}

/* Days in a row and sharing */
.wd-streak{display:flex;align-items:center;gap:10px;margin-top:14px!important;font-size:15px;line-height:1.45;color:var(--ink)}
.wd-streak .tt-i{flex:none;width:22px;height:22px;color:var(--tp-ink)}
.wd-share .tt-i{width:18px;height:18px}

/* ── The students page: the assembly card and this week's table ─────────── */
.wd-assembly{--cat-bg:var(--tp-bg);--cat-ink:var(--tp-ink);--cat-btn:var(--tp-ink);min-width:0;padding:clamp(20px,3vw,32px);border-radius:var(--r-panel);background:var(--tp-bg);container-type:inline-size}
.wd-assembly .tt-say{background:#fff}
.wd-assembly .wd-pron{flex-wrap:wrap}
.wd-assembly-facts{display:grid;gap:10px;margin:20px 0 0}
.wd-assembly-facts div{padding:12px 16px;border-radius:14px;background:#fff}
.wd-assembly-facts dt{font:700 13px/1.3 var(--font-body);color:var(--tp-ink)}
.wd-assembly-facts dd{display:flex;gap:10px;align-items:flex-start;margin:4px 0 0;font-size:16px;line-height:1.5;color:var(--ink)}
.wd-assembly-facts dd span{padding-top:6px}
.wd-spell{font:700 18px/1.4 var(--font-display)!important;letter-spacing:.04em}
.wd-script{margin-top:12px;padding:14px 16px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--tp-ink)}
.wd-script-h{font:700 13px/1.3 var(--font-body);color:var(--tp-ink)}
.wd-script p+p{margin-top:6px!important;font-size:16px;line-height:1.6;color:var(--ink)}
.wd-assembly .wd-card-actions .tt-i{width:18px;height:18px}
.wd-table-wrap{margin-top:24px;overflow-x:auto;border-radius:var(--r-card);background:#fff}
.wd-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.wd-table th,.wd-table td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.wd-table thead th{font:700 13.5px/1.3 var(--font-body);color:var(--tp-ink);white-space:nowrap}
.wd-table tbody th{font-weight:500;color:var(--muted);white-space:nowrap}
.wd-table td:nth-child(2){white-space:nowrap}
.wd-table td:nth-child(2) a{color:var(--ink);text-decoration:none}
.wd-table td:nth-child(2) b{font:700 17px/1.3 var(--font-display)}
.wd-table td:nth-child(2) .tt-say{vertical-align:middle;margin-left:6px}
.wd-table b{color:var(--ink)}
.wd-table tbody tr:last-child>*{border-bottom:0}
.wd-table-more{margin-top:16px!important}
@media (max-width:719px){
  .wd-table thead{display:none}
  .wd-table,.wd-table tbody,.wd-table tr,.wd-table th,.wd-table td{display:block;width:auto}
  .wd-table tr{padding:14px 16px;border-bottom:1px solid var(--line)}
  .wd-table th,.wd-table td{padding:2px 0;border:0;white-space:normal!important}
  .wd-table td:nth-child(3){font-style:italic;color:var(--ink-soft)}
}
/* On the students page the assembly block sits in the word's left column, on white */
.wd-def.wd-assembly{padding:0;border-radius:0;background:none;margin-top:20px}
.wd-def.wd-assembly .wd-assembly-facts{margin-top:0}
.wd-def.wd-assembly .wd-assembly-facts div{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
@media print{
  main:has(.wd-student-hero)>*:not(.wd-student-hero),.wd-student-hero .wd-tool,.wd-student-hero .wd-hub-top,.wd-assembly .wd-card-actions,.wd-student-hero .tt-say{display:none!important}
  .wd-student-hero .wd-word-grid{display:block}
}

/* ── Word lists under /english/vocabulary/: the 100 most common words, A1–C1 ── */
.wd-table-h{margin-top:40px!important;font:700 20px/1.3 var(--font-display);letter-spacing:-.02em}
.wd-table-h+.wd-table-wrap{margin-top:14px;box-shadow:inset 0 0 0 1px var(--line)}
.wd-lv-sub{margin-top:6px!important;font-size:15px;color:var(--ink-soft)}
.wd-lv-sub a{color:var(--purple);text-underline-offset:3px}
.wd-lv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px!important}
.wd-lv-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:14px 16px;border-radius:14px;background:var(--tp-bg)}
.wd-lv-word{display:flex;align-items:center;gap:8px;font:700 17px/1.3 var(--font-display);color:var(--ink)}
.wd-lv-word a{color:var(--ink);text-underline-offset:3px}
.wd-lv-word .tt-say{background:#fff}
.wd-lv-pos{align-self:center;font-size:13.5px;font-style:italic;color:var(--ink-soft)}
.wd-lv-mean,.wd-lv-ex{grid-column:1/-1;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
.wd-lv-ex b{color:var(--ink)}
.wd-lv-card{padding:clamp(20px,3vw,32px);border-radius:var(--r-panel);background:var(--tp-bg)}
.wd-lv-card .wd-quiz-h{color:var(--tp-ink)}
.wd-lv-card p+p{margin-top:10px!important;font-size:17px;line-height:1.55}
.wd-lv-card .tt-actions{margin-top:20px}
@media (max-width:719px){.wd-lv{grid-template-columns:minmax(0,1fr)}}
.wd-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px!important}
.wd-strip a{display:inline-flex;align-items:center;min-height:36px;padding:0 13px;border-radius:999px;background:var(--tp-bg);color:var(--tp-ink);font:600 14.5px/1 var(--font-body);text-decoration:none}
@media (hover:hover) and (pointer:fine){.wd-strip a:hover{background:var(--tp-ink);color:#fff}}
.wd-hero-note{margin-top:16px!important;max-width:46ch;font-size:15px;line-height:1.5;color:var(--ink-soft)}
/* Word lists: grey surfaces, the category red only on the current chip, the em and small labels */
.wd-chip[data-topic="levels"]:not([aria-current]){color:var(--ink)}
.wd-lv-row,.wd-table-wrap[data-topic="levels"]{background:#f7f6f9}
.wd-quiz[data-topic="levels"] .wd-quiz-h,.wd-lv-card .wd-quiz-h{color:var(--ink)}
.wd-quiz[data-topic="levels"] .wd-dots li.is-now,.wd-quiz[data-topic="levels"] .wd-result-score{background:none}
.wd-quiz[data-topic="levels"] .wd-dots li.is-now{background:var(--ink)}
.wd-quiz[data-topic="levels"] .wd-result-score{color:var(--ink)}
.wd-quiz[data-topic="levels"] .wd-key{background:#f3f2f5;color:var(--ink)}

.wd-table-wrap[data-topic="levels"] .tt-say,.wd-lv[data-topic="levels"] .tt-say{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.wd-table-wrap[data-topic="levels"] thead th{color:var(--ink-soft)}

/* The main page's top: like a word page, with the page title and the topic chips above */
.wd-hub-day{padding-top:clamp(24px,3vw,40px)}
.wd-hub-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:clamp(24px,3vw,36px);padding-bottom:clamp(20px,2.5vw,28px);border-bottom:1px solid var(--line)}
.wd-hub-h1{font:700 clamp(1.9rem,3.2vw,2.75rem)/1.05 var(--font-display);letter-spacing:-.045em;color:var(--ink)}
.wd-hub-h1 em{font-style:normal;color:var(--cat-ink)}
.wd-hub-lede{margin-top:10px!important;max-width:60ch;font-size:16.5px;line-height:1.55;color:var(--ink-soft)}
.wd-hub-lede .tt-link{display:inline-flex;margin-left:4px}
.wd-day-item .wd-word a{color:inherit;text-decoration:none}
@media (hover:hover) and (pointer:fine){.wd-day-item .wd-word a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}}
.wd-day-more{margin-top:18px!important}
.wd-day-more .tt-link{color:var(--tp-ink)}

.wd-day-item{--cat-bg:var(--tp-bg);--cat-ink:var(--tp-ink);--cat-btn:var(--tp-ink)}
.wd-hub-day .wd-word a{color:inherit;text-decoration:none}
@media (hover:hover) and (pointer:fine){.wd-hub-day .wd-word a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}}
.wd-hub-day:not([data-topic]) .wd-hub-h1 em{color:var(--ink)}

/* The students page: presenter and the word table */
.wd-presenter-cols{align-items:start}
.wd-steps-tight{margin-top:20px!important;gap:10px}
.wd-steps-tight li{padding:14px 16px 16px 62px}
.wd-steps-tight li::before{left:16px;top:14px;width:30px;height:30px;font-size:14px}
.wd-steps-tight h3{font-size:16px}
.wd-steps-tight p{font-size:14.5px}
.wd-presenter-pick{display:grid;gap:6px;margin-bottom:16px;font:700 13px/1.3 var(--font-body);color:var(--tp-ink)}
.wd-presenter-pick select{min-height:48px;padding:0 44px 0 16px;border:1px solid var(--line-strong);border-radius:12px;background:#fff url(/english/shared/select-chevron.svg) no-repeat right 14px center;color:var(--ink);font:700 18px/1 var(--font-display);appearance:none}
.wd-presenter .wd-pron{margin:0 0 6px}
.wd-use-word{min-height:34px;padding:0 12px;border:0;border-radius:999px;background:#fff;color:var(--purple);font:600 13.5px/1 var(--font-body);white-space:nowrap;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line-strong)}
@media (hover:hover) and (pointer:fine){.wd-use-word:hover{box-shadow:inset 0 0 0 1.5px var(--purple)}}
.wd-table-students tbody th{white-space:nowrap;color:var(--ink)}
.wd-table-students tbody th a{color:var(--ink);text-decoration:none}
@media print{
  .wd-student-hero .tt-cols-head,.wd-student-hero .wd-hub-top,.wd-presenter-pick,.wd-presenter .wd-pron{display:none!important}
  .wd-student-hero .tt-cols{display:block}
}

@media (max-width:899px){.wd-presenter-cols .tt-cols-head{order:2}.wd-presenter-cols .wd-presenter{order:1}}

/* The main and students pages: the title centred, the vocabulary test as a button under it */
.wd-hub-top.is-center{flex-direction:column;align-items:center;justify-content:center;gap:0;text-align:center}
.wd-hub-top.is-center .wd-hub-h1{max-width:22ch}
.wd-hub-top.is-center .wd-hub-lede{margin-inline:auto}
.wd-hub-top.is-center .tt-pill{margin-top:20px}
.wd-hub-top.is-center .tt-pill .tt-i{width:18px;height:18px}
@media (max-width:519px){.wd-hub-top.is-center .tt-pill{width:100%;white-space:normal;text-align:center;line-height:1.3;padding-block:12px}}

/* Students page, like a word page: the word left, the script panel right */
.wd-presenter .wd-presenter-pick{max-width:360px}
.wd-presenter .wd-word{margin-top:6px}
.wd-presenter .wd-spell{font:700 16px/1.4 var(--font-display)!important;letter-spacing:.04em;color:var(--ink)}
.wd-script-text{margin-top:20px!important;padding:18px 20px;border-radius:16px;background:#fff;font-size:17px;line-height:1.65;color:var(--ink)}
.wd-script-panel .wd-card-actions{margin-top:16px}
.wd-script-panel .wd-card-actions .tt-i{width:18px;height:18px}
.wd-script-steps-h{margin-top:24px!important;font:700 14px/1.3 var(--font-body);color:var(--tp-ink)}
.wd-script-steps{margin-top:8px!important;padding-left:20px;list-style:decimal;display:grid;gap:6px;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.wd-script-steps b{color:var(--ink)}
@media print{
  .wd-student-hero .wd-hub-top,.wd-presenter-pick,.wd-presenter .tt-say,.wd-script-panel .wd-card-actions,.wd-script-steps-h,.wd-script-steps,.wd-script-panel .wd-quiz-art{display:none!important}
  .wd-presenter.wd-word-grid{display:block}
  .wd-script-panel{background:#fff;border:1px solid #999}
}

.wd-script-panel .wd-copy{background:var(--words-ink);color:#fff}
@media (hover:hover) and (pointer:fine){.wd-script-panel .wd-copy:hover{background:#7f1d1d}}
.wd-presenter .wd-pron{flex-wrap:wrap;margin-top:14px}
@media (max-width:599px){.wd-presenter .wd-ipas{flex-basis:100%}.wd-presenter .wd-ipa{white-space:normal}}
/* Main and students page: the vocabulary test button in dark green, so the top is not all purple */
.wd-hub-top .tt-pill{background:#16a34a;color:#fff}
@media (hover:hover) and (pointer:fine){.wd-hub-top .tt-pill:hover{background:#15803d}}

/* Word page, more depth: sentences in context, forms and patterns, the word or a similar one, questions */
.wd-ctx{display:grid;gap:0;border-top:1px solid var(--line)}
.wd-ctx li{display:grid;grid-template-columns:150px 1fr;gap:6px 20px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.wd-ctx-in{font:700 13.5px/1.3 var(--font-body);color:var(--muted)}
.wd-ctx p{display:flex;align-items:center;gap:12px;font-size:17px;line-height:1.5;color:var(--ink-soft)}
.wd-ctx p b{color:var(--ink)}
.wd-h3{margin-top:28px!important;font:700 15px/1.3 var(--font-body);color:var(--ink)}
.wd-forms{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:10px!important}
.wd-forms li{display:flex;align-items:baseline;gap:8px;font-size:16px}
.wd-forms span{font-size:13.5px;color:var(--muted)}
.wd-patterns{margin-top:8px!important;padding-left:20px;list-style:disc;display:grid;gap:4px;font-size:16px;line-height:1.5;color:var(--ink-soft)}
.wd-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:18px 40px;margin-top:22px!important}
.wd-compare div{padding-left:18px;border-left:3px solid var(--words-ink)}
.wd-compare dt{font:700 17px/1.3 var(--font-body);color:var(--ink)}
.wd-compare dt span{font-weight:500;color:var(--muted)}
.wd-compare dd{margin:6px 0 0;font-size:16px;line-height:1.6;color:var(--ink-soft)}
.wd-level-line{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wd-level-line p{font-size:16px;color:var(--ink-soft)}
.wd-level-line a{color:#15803d;font-weight:700;text-underline-offset:3px}
@media (max-width:599px){.wd-ctx li{grid-template-columns:1fr}}