/* Wordtrail styles */
:root{
  --paper:#F4F8FF; --grid:#DFE8F8; --ink:#1B2250; --ink-soft:#4A5485;
  --card:#FFFFFF; --line:#B9C8EA; --edge:#1B2250; --shadow:#1B2250;
  --highlight:#FFE45C; --amber:#B86E00; --green:#15935F; --blue:#2A62D4; --violet:#6A45E6; --coral:#E0434C;
  --good-bg:#DFF5EA; --bad-bg:#FDE3E4;
  --level:var(--green);
  --display:"Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#121633; --grid:#1A1F45; --ink:#EEF1FF; --ink-soft:#AAB2DD;
    --card:#1E2552; --line:#39428A; --edge:#0A0D26; --shadow:#070918;
    --highlight:#F2D440; --amber:#F0A83A; --green:#23B477; --blue:#4C82F0; --violet:#8C6CF7; --coral:#F2626A;
    --good-bg:#15392F; --bad-bg:#43202A;
  }
}
:root[data-theme="dark"]{
  --paper:#121633; --grid:#1A1F45; --ink:#EEF1FF; --ink-soft:#AAB2DD;
  --card:#1E2552; --line:#39428A; --edge:#0A0D26; --shadow:#070918;
  --highlight:#F2D440; --amber:#F0A83A; --green:#23B477; --blue:#4C82F0; --violet:#8C6CF7; --coral:#F2626A;
  --good-bg:#15392F; --bad-bg:#43202A;
}
body[data-level="intermediate"]{--level:var(--blue)}
body[data-level="advanced"]{--level:var(--violet)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); font-family:var(--body); font-size:1.0625rem; line-height:1.55;
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:28px 28px;
  min-height:100vh; display:flex; flex-direction:column;
}
img{max-width:100%}
button{font:inherit; color:inherit; cursor:pointer}
button:disabled{cursor:not-allowed; opacity:.5}
:focus-visible{outline:3px solid var(--level); outline-offset:3px}
main:focus{outline:none}
h1,h2,h3{font-family:var(--display); line-height:1.05; margin:0}
p{margin:0}
.wrap{width:100%; max-width:980px; margin:0 auto; padding:0 20px}

/* Header */
.top{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(6px); border-bottom:2px solid var(--line)}
.top-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:10px; padding-bottom:8px}
.logo{display:flex; align-items:center; gap:10px; background:none; border:0; padding:0; font-family:var(--display); font-weight:800; font-size:1.5rem; letter-spacing:-.01em}
.logo-mark{display:grid; place-items:center; width:38px; height:38px; border-radius:12px 12px 12px 4px; background:var(--level); color:#fff; border:2px solid var(--edge); box-shadow:2px 2px 0 var(--shadow); font-size:1.3rem; transition:background .3s}
.stats{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.stat{display:inline-flex; align-items:center; gap:5px; font-weight:700; background:var(--card); border:2px solid var(--line); border-radius:999px; padding:3px 11px; font-size:.95rem}
.rank-pill{color:var(--level); border-color:currentColor}
.icon-btn{width:38px; height:38px; border-radius:50%; border:2px solid var(--line); background:var(--card); font-size:1.05rem; display:grid; place-items:center; padding:0}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--display); font-weight:700; font-size:1.08rem; line-height:1;
  padding:.8em 1.35em; border-radius:999px; border:2px solid var(--edge);
  background:var(--card); color:var(--ink); box-shadow:3px 3px 0 var(--shadow);
  transition:transform .12s, box-shadow .12s;
}
.btn:hover:not(:disabled){transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--shadow)}
.btn:active:not(:disabled){transform:translate(2px,2px); box-shadow:1px 1px 0 var(--shadow)}
.btn-primary{background:var(--level); color:#fff}
.btn-ghost{background:transparent; box-shadow:none; border-color:var(--line)}
.btn-ghost:hover:not(:disabled){box-shadow:none; transform:none; border-color:var(--ink-soft)}
.btn-small{font-size:.95rem; padding:.6em 1em}
.row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.center{justify-content:center}

/* Hero */
.hero{display:grid; grid-template-columns:1.25fr .9fr; gap:40px; align-items:center; padding:52px 0 36px}
.hero h1{font-size:clamp(2.6rem, 6.4vw, 4.4rem); font-weight:800; letter-spacing:-.02em; max-width:12ch}
.lede{margin:18px 0 26px; color:var(--ink-soft); font-size:1.15rem; max-width:44ch}
.wotd{
  position:relative; text-align:left; display:flex; flex-direction:column; gap:6px;
  background:var(--card); border:2px solid var(--edge); border-radius:6px; padding:30px 26px 22px;
  box-shadow:6px 6px 0 var(--shadow); transform:rotate(-2.5deg); transition:transform .2s;
}
.wotd:hover{transform:rotate(-1deg) scale(1.02)}
.wotd::before{content:""; position:absolute; top:-14px; left:50%; width:96px; height:26px; transform:translateX(-50%) rotate(3deg); background:color-mix(in srgb, var(--level) 45%, transparent); border-radius:3px}
.wotd-tag{font-size:.9rem; color:var(--ink-soft); font-weight:700}
.wotd-top{display:flex; align-items:center; gap:12px}
.wotd-emoji{font-size:2.6rem; line-height:1}
.wotd-word{font-family:var(--display); font-size:2.3rem; font-weight:800; line-height:1.1}
mark{background:linear-gradient(transparent 38%, var(--highlight) 38%, var(--highlight) 88%, transparent 88%); color:inherit; padding:0 .12em}
.wotd-word mark{color:#1B2250; background:var(--highlight); border-radius:4px}
.wotd-meaning{font-size:1.05rem}
.wotd-ex{font-style:italic; color:var(--ink-soft)}
.wotd-hint{margin-top:6px; font-weight:700; color:var(--level); font-size:.95rem}

/* Level switch */
.levels{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0 34px}
.level-btn{
  text-align:left; border:2px solid var(--line); background:var(--card); border-radius:18px; padding:14px 16px;
  display:flex; flex-direction:column; gap:2px; transition:border-color .15s, transform .15s;
}
.level-btn:hover{transform:translateY(-2px)}
.level-btn strong{font-family:var(--display); font-size:1.35rem; line-height:1.1}
.level-btn small{color:var(--ink-soft)}
.level-btn .lv-meter{height:6px; border-radius:6px; background:var(--grid); margin-top:8px; overflow:hidden}
.level-btn .lv-meter span{display:block; height:100%; background:var(--lvc)}
.level-btn[aria-pressed="true"]{border-color:var(--edge); box-shadow:4px 4px 0 var(--lvc); background:color-mix(in srgb, var(--lvc) 10%, var(--card))}
.level-btn[data-level="beginner"]{--lvc:var(--green)}
.level-btn[data-level="intermediate"]{--lvc:var(--blue)}
.level-btn[data-level="advanced"]{--lvc:var(--violet)}

/* Trail */
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap}
.section-head h2{font-size:2rem; font-weight:800}
.section-head p{color:var(--ink-soft)}
.trail{position:relative; list-style:none; margin:0 0 56px; padding:0; display:grid; gap:20px}
.trail::before{content:""; position:absolute; left:38px; top:30px; bottom:30px; border-left:4px dashed var(--line)}
.stop{position:relative}
.stop-btn{
  width:100%; display:grid; grid-template-columns:56px 1fr auto; grid-template-areas:"num text stars";
  align-items:center; gap:14px; text-align:left; padding:10px 18px 10px 10px;
  background:var(--card); border:2px solid var(--edge); border-radius:22px; box-shadow:4px 4px 0 var(--shadow);
  transition:transform .12s, box-shadow .12s;
}
.stop-btn:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--shadow)}
.stop-btn:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--shadow)}
.stop-num{grid-area:num; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--level); color:#fff; font-family:var(--display); font-weight:800; font-size:1.6rem; border:3px solid var(--edge)}
.stop-num.done{background:var(--highlight); color:#1B2250}
.stop-text{grid-area:text; display:flex; flex-direction:column}
.stop-text strong{font-family:var(--display); font-size:1.35rem; line-height:1.15}
.stop-text small{color:var(--ink-soft); font-size:.95rem}
.stop-stars{grid-area:stars; font-size:1.25rem; letter-spacing:2px; white-space:nowrap; color:var(--line)}
.stop-stars .on{color:#F5B400}
.stop-icon{font-size:1.3rem; margin-right:6px}
@media (min-width:760px){
  .trail::before{left:calc(50% - 2px)}
  .stop{width:calc(50% + 40px)}
  .stop:nth-child(odd) .stop-btn{grid-template-columns:auto 1fr 56px; grid-template-areas:"stars text num"; text-align:right; padding:10px 10px 10px 18px}
  .stop:nth-child(even){margin-left:calc(50% - 40px)}
}

/* Progress */
.progress-sec{padding:0 0 56px}
.progress-grid{display:grid; grid-template-columns:1fr 2fr; gap:20px; align-items:start}
.rank-card{background:var(--card); border:2px solid var(--edge); border-radius:22px; padding:20px; box-shadow:4px 4px 0 var(--shadow)}
.rank-card strong{font-family:var(--display); font-size:1.8rem; display:block; line-height:1.1; color:var(--level)}
.meter{height:12px; background:var(--grid); border-radius:999px; overflow:hidden; border:2px solid var(--line)}
.meter span{display:block; height:100%; background:var(--level); border-radius:999px; transition:width .4s}
.rank-card .meter{margin:14px 0 8px}
.rank-card small{color:var(--ink-soft)}
.badges{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px}
.badge{background:var(--card); border:2px dashed var(--line); border-radius:18px; padding:14px; display:flex; flex-direction:column; gap:2px; opacity:.55; filter:grayscale(1)}
.badge.on{opacity:1; filter:none; border-style:solid; border-color:var(--edge)}
.badge span{font-size:1.8rem}
.badge strong{font-family:var(--display); font-size:1.1rem}
.badge small{color:var(--ink-soft); font-size:.88rem; line-height:1.35}

/* Activity shell */
.act{padding:28px 0 60px; max-width:720px; margin:0 auto}
.act-bar{display:flex; align-items:center; gap:14px; margin-bottom:26px}
.act-bar .meter{flex:1}
.act-count{font-weight:700; color:var(--ink-soft); min-width:3.5em; text-align:right}
.act-title{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap}
.act-title h1{font-size:1.9rem; font-weight:800}
.chip-level{font-weight:700; color:#fff; background:var(--level); padding:3px 12px; border-radius:999px; font-size:.9rem}
.panel{background:var(--card); border:2px solid var(--edge); border-radius:24px; padding:26px; box-shadow:5px 5px 0 var(--shadow)}
.prompt{font-size:clamp(1.5rem, 3.6vw, 2rem); font-weight:700; margin-bottom:6px}
.sub{color:var(--ink-soft); margin-bottom:18px}
.combo{min-height:1.6em; font-family:var(--display); font-weight:800; color:var(--coral); font-size:1.15rem}
.combo.bump{animation:pop .35s}

/* Flashcards */
.flash{perspective:1200px; margin-bottom:18px}
.flash-inner{
  position:relative; width:100%; height:300px; border:0; padding:0; background:none;
  transform-style:preserve-3d; transition:transform .55s cubic-bezier(.3,1.3,.5,1);
}
.flash.is-flipped .flash-inner{transform:rotateY(180deg)}
.face{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:24px;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:var(--card); border:2px solid var(--edge); border-radius:24px; box-shadow:5px 5px 0 var(--shadow); text-align:center;
}
.face.back{transform:rotateY(180deg); background:color-mix(in srgb, var(--level) 10%, var(--card))}
.big-emoji{font-size:3.6rem; line-height:1}
.flash-word{font-family:var(--display); font-size:clamp(2.2rem, 7vw, 3.2rem); font-weight:800; line-height:1.05}
.pos{color:var(--ink-soft); font-style:italic}
.tap{margin-top:8px; font-size:.95rem; color:var(--level); font-weight:700}
.flash-meaning{font-family:var(--display); font-size:1.7rem; font-weight:700; line-height:1.2; max-width:22ch}
.flash-ex{color:var(--ink-soft); font-style:italic; font-size:1.1rem; max-width:36ch}

/* Quiz */
.options{display:grid; gap:12px; margin-top:18px}
.opt{
  display:flex; align-items:center; gap:14px; text-align:left; width:100%;
  padding:14px 16px; border-radius:16px; border:2px solid var(--line); background:var(--card); font-size:1.08rem;
  transition:border-color .12s, transform .12s, background .12s;
}
.opt:hover:not(:disabled){border-color:var(--ink); transform:translateX(3px)}
.opt:disabled{opacity:1; cursor:default}
.opt kbd{font-family:var(--display); font-weight:700; min-width:30px; height:30px; display:grid; place-items:center; border-radius:9px; border:2px solid var(--line); font-size:.95rem}
.opt.is-right{border-color:var(--green); background:var(--good-bg)}
.opt.is-right kbd{background:var(--green); color:#fff; border-color:var(--green)}
.opt.is-wrong{border-color:var(--coral); background:var(--bad-bg); animation:shake .35s}
.opt.is-wrong kbd{background:var(--coral); color:#fff; border-color:var(--coral)}
.opt.dim{opacity:.5}
.feedback:empty{display:none}
.feedback{margin-top:18px; border-radius:18px; padding:16px 18px; display:flex; flex-direction:column; gap:12px; animation:rise .25s}
.feedback.good{background:var(--good-bg); border:2px solid var(--green)}
.feedback.bad{background:var(--bad-bg); border:2px solid var(--coral)}
.feedback strong{font-family:var(--display); font-size:1.35rem}
.feedback .row{justify-content:flex-end}

/* Sentence builder */
.answer-zone{
  min-height:88px; border:3px dashed var(--line); border-radius:18px; padding:12px; display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  background:color-mix(in srgb, var(--grid) 50%, var(--card)); transition:border-color .2s;
}
.answer-zone.good{border-style:solid; border-color:var(--green); background:var(--good-bg)}
.answer-zone.bad{border-style:solid; border-color:var(--coral); background:var(--bad-bg); animation:shake .35s}
.placeholder{color:var(--ink-soft)}
.pool{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 22px; min-height:50px}
.chip{
  font-family:var(--display); font-weight:700; font-size:1.2rem; padding:.35em .8em; border-radius:12px;
  border:2px solid var(--edge); background:var(--card); box-shadow:0 3px 0 var(--shadow); transition:transform .1s;
}
button.chip:hover:not(:disabled){transform:translateY(-2px)}
button.chip:active:not(:disabled){transform:translateY(2px); box-shadow:0 1px 0 var(--shadow)}
.chip.ghost{color:transparent; border-style:dashed; border-color:var(--line); background:transparent; box-shadow:none; user-select:none}
.answer-zone .chip{background:color-mix(in srgb, var(--level) 16%, var(--card))}
.chip:disabled{opacity:1}

/* Listening */
.listen-controls{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:center; margin:10px 0 24px}
.play-big{width:108px; height:108px; border-radius:50%; font-size:2.6rem; padding:0; background:var(--level); color:#fff; border:3px solid var(--edge); box-shadow:4px 4px 0 var(--shadow)}
.play-big.playing{animation:pulse 1s infinite}
.text-input{
  width:100%; font:inherit; font-size:1.2rem; padding:14px 16px; border-radius:16px; border:2px solid var(--edge);
  background:var(--card); color:var(--ink);
}
.text-input:focus{outline:none; box-shadow:0 0 0 4px color-mix(in srgb, var(--level) 35%, transparent)}
.diff{font-size:1.2rem; line-height:1.9}
.diff .hit{background:color-mix(in srgb, var(--green) 25%, transparent); border-radius:6px; padding:1px 4px}
.diff .miss{background:color-mix(in srgb, var(--coral) 28%, transparent); border-radius:6px; padding:1px 4px; text-decoration:underline wavy var(--coral)}
.note{background:color-mix(in srgb, var(--highlight) 30%, var(--card)); border:2px solid var(--line); border-radius:14px; padding:10px 14px; margin-bottom:14px}

/* Match */
.match-top{display:flex; justify-content:space-between; gap:12px; margin-bottom:16px; font-weight:700; color:var(--ink-soft)}
.match-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:12px}
.match-col{display:grid; gap:10px; align-content:start}
.tile{
  text-align:left; padding:12px 14px; border-radius:14px; border:2px solid var(--edge); background:var(--card);
  box-shadow:0 3px 0 var(--shadow); min-height:56px; transition:transform .1s, background .15s, opacity .3s;
}
.tile.word{font-family:var(--display); font-weight:700; font-size:1.2rem}
.tile.meaning{font-size:.98rem; line-height:1.35}
.tile:hover:not(:disabled){transform:translateY(-2px)}
.tile.sel{background:color-mix(in srgb, var(--level) 22%, var(--card)); border-color:var(--level); box-shadow:0 3px 0 var(--level)}
.tile.wrong{background:var(--bad-bg); border-color:var(--coral); animation:shake .35s}
.tile.matched{background:var(--good-bg); border-color:var(--green); box-shadow:none; opacity:.45}
.tile.matched:disabled{opacity:.45}

/* Result */
.result{text-align:center; padding:48px 0 70px; max-width:620px; margin:0 auto}
.rstars{display:flex; justify-content:center; gap:10px; margin-bottom:14px}
.rstar{font-size:4.4rem; line-height:1; color:var(--line); -webkit-text-stroke:2px var(--edge)}
.rstar.on{color:#F5B400; animation:pop .5s both; animation-delay:calc(var(--d) * .18s + .1s)}
.result h1{font-size:clamp(2.4rem, 7vw, 3.6rem); font-weight:800}
.result p{color:var(--ink-soft); font-size:1.15rem; margin-top:8px}
.xp-gain{display:inline-block; margin:18px 0 8px; font-family:var(--display); font-weight:800; font-size:1.8rem; color:var(--ink)!important; background:var(--highlight); padding:2px 16px; border-radius:10px; transform:rotate(-2deg)}
.new-badges{margin:18px auto 6px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.new-badge{border:2px solid var(--edge); background:var(--card); border-radius:999px; padding:6px 14px; font-weight:700; animation:pop .5s both .6s}
.result .row{justify-content:center; margin-top:26px}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
footer{margin-top:auto; border-top:2px solid var(--line); padding:18px 0; color:var(--ink-soft); font-size:.92rem}
footer .wrap{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
.linkish{background:none; border:0; padding:0; color:var(--ink-soft); text-decoration:underline; font-size:.92rem}

.confetti{position:fixed; top:-16px; width:10px; height:14px; z-index:50; pointer-events:none; border-radius:2px; animation:fall linear forwards}

@keyframes pop{0%{transform:scale(0) rotate(-20deg)}70%{transform:scale(1.25) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes rise{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes fall{to{transform:translate(var(--dx), 110vh) rotate(var(--rot))}}
@keyframes load-in{from{opacity:0; transform:translateY(14px) rotate(-6deg)}to{opacity:1; transform:rotate(-2.5deg)}}
.hero .wotd{animation:load-in .6s cubic-bezier(.3,1.4,.5,1) both .15s}

/* Navigation */
.nav-row{display:flex; gap:2px; overflow-x:auto; padding-top:2px; padding-bottom:8px; scrollbar-width:none}
.nav-row::-webkit-scrollbar{display:none}
.mainnav a.nav-test{margin-left:auto; border:2px solid var(--edge); color:var(--ink)}
.mainnav a{font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--ink-soft); text-decoration:none; padding:6px 13px; border-radius:999px; white-space:nowrap}
.mainnav a:hover{color:var(--ink); background:var(--card)}
.mainnav a[aria-current="page"]{background:var(--highlight); color:#1B2250}

/* Level + style color scopes */
.lv-beginner{--level:var(--green)} .lv-intermediate{--level:var(--blue)} .lv-advanced{--level:var(--violet)}
.st-formal{--sc:var(--blue); --level:var(--blue)} .st-casual{--sc:var(--coral); --level:var(--coral)} .st-conversational{--sc:var(--amber); --level:var(--amber)}
.tag{display:inline-block; font-size:.82rem; font-weight:700; color:#fff; padding:2px 10px; border-radius:999px; background:var(--level)}
.tag-beginner{background:var(--green)} .tag-intermediate{background:var(--blue)} .tag-advanced{background:var(--violet)}

/* Generic page */
.page{padding:36px 0 64px}
.page-head{margin-bottom:26px; max-width:720px}
.page-head h1{font-size:clamp(2.4rem, 6vw, 3.6rem); font-weight:800; letter-spacing:-.02em}
.page-head .lede{margin:12px 0 10px}
.block-h{font-size:1.8rem; font-weight:800; margin:34px 0 6px}
.backlink{display:inline-block; margin-bottom:18px; color:var(--ink-soft); font-weight:700; text-decoration:none; border-bottom:2px solid var(--line)}
.backlink:hover{color:var(--ink); border-color:var(--ink)}

/* Grammar lab */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px}
.filter{border:2px solid var(--line); background:var(--card); border-radius:999px; padding:6px 15px; font-weight:700}
.filter[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.topic-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px}
.topic-tile{display:flex; flex-direction:column; gap:6px; height:100%; padding:18px; background:var(--card); border:2px solid var(--edge); border-radius:20px; box-shadow:4px 4px 0 var(--shadow); color:inherit; text-decoration:none; transition:transform .12s, box-shadow .12s}
.topic-tile:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--shadow)}
.topic-tile:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--shadow)}
.tt-top{display:flex; justify-content:space-between; align-items:center}
.tt-emoji{font-size:2rem; line-height:1}
.topic-tile strong{font-family:var(--display); font-size:1.5rem; line-height:1.1; margin-top:4px}
.tt-sum{color:var(--ink-soft); font-size:.97rem; flex:1}
.keychips{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.keychips span{font-family:var(--display); font-weight:700; background:var(--highlight); color:#1B2250; padding:1px 9px; border-radius:8px; font-size:.98rem; transform:rotate(-1deg)}
.keychips span:nth-child(even){transform:rotate(1.2deg)}
.topic-tile .stop-stars{margin-top:6px}

.topic-head{display:flex; gap:22px; align-items:flex-start}
.topic-emoji{font-size:3.2rem; width:92px; height:92px; display:grid; place-items:center; flex:none; background:var(--card); border:2px solid var(--edge); border-radius:26px; box-shadow:4px 4px 0 var(--shadow); transform:rotate(-4deg)}
.rules{display:grid; gap:14px; margin-top:12px}
.rule{background:var(--card); border:2px solid var(--line); border-left:8px solid var(--level); border-radius:18px; padding:18px 20px}
.rule h3{font-size:1.45rem; margin-bottom:6px}
.rule p{max-width:66ch}
.examples{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px}
.examples li{display:flex; gap:10px; align-items:center; font-size:1.08rem}
.say-btn{flex:none; width:36px; height:36px; border-radius:50%; border:2px solid var(--line); background:var(--paper); display:grid; place-items:center; padding:0; font-size:.95rem}
.say-btn:hover{border-color:var(--ink)}
.table-wrap{overflow-x:auto; margin-top:12px; border:2px solid var(--edge); border-radius:18px; box-shadow:4px 4px 0 var(--shadow); background:var(--card)}
.word-table{width:100%; border-collapse:collapse; min-width:560px}
.word-table th,.word-table td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
.word-table th{font-family:var(--display); font-size:1.05rem; background:color-mix(in srgb, var(--grid) 60%, var(--card))}
.word-table tr:last-child td{border-bottom:0}
.word-table td:last-child{font-style:italic; color:var(--ink-soft)}
.word-say{font-family:var(--display); font-weight:800; font-size:1.12rem; background:var(--highlight); color:#1B2250; border:0; border-radius:8px; padding:3px 10px; white-space:nowrap}
.word-say::after{content:" 🔊"; font-size:.75em}

/* Action cards (topic + style pages) */
.style-actions{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin:4px 0 8px}
.style-actions.two{grid-template-columns:repeat(2, minmax(0, 320px))}
.action-card{text-align:left; display:flex; flex-direction:column; gap:4px; padding:18px; border-radius:20px; background:var(--card); border:2px solid var(--edge); box-shadow:4px 4px 0 var(--shadow); transition:transform .12s, box-shadow .12s}
.action-card:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--level)}
.action-card:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--shadow)}
.ac-icon{font-size:1.8rem; line-height:1.2}
.action-card strong{font-family:var(--display); font-size:1.35rem; line-height:1.1}
.action-card small{color:var(--ink-soft); font-size:.95rem; flex:1}
.action-card .stop-stars{margin-top:6px}

/* Speaking styles */
.style-cards{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
.style-card{display:flex; flex-direction:column; gap:6px; padding:0 18px 18px; background:var(--card); border:2px solid var(--edge); border-radius:22px; box-shadow:4px 4px 0 var(--shadow); color:inherit; text-decoration:none; overflow:hidden; transition:transform .12s, box-shadow .12s}
.style-card:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--sc)}
.sc-band{height:12px; background:var(--sc); margin:0 -18px 10px}
.sc-icon{font-size:2.2rem; line-height:1.2}
.style-card strong{font-family:var(--display); font-size:1.8rem; line-height:1}
.sc-sample{font-family:var(--display); font-size:1.15rem; font-weight:600; color:var(--sc); line-height:1.25; margin:6px 0 4px}
.sc-meta{color:var(--ink-soft); font-size:.9rem; margin-top:auto}
.segmented{display:inline-flex; flex-wrap:wrap; border:2px solid var(--edge); border-radius:22px; overflow:hidden; box-shadow:3px 3px 0 var(--shadow); margin:12px 0 18px}
.segmented button{border:0; background:var(--card); padding:10px 18px; font-family:var(--display); font-weight:700; font-size:1.05rem}
.segmented button + button{border-left:2px solid var(--edge)}
.segmented button[aria-pressed="true"]{background:var(--sc); color:#fff}
.switch-list{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.switch-list li{display:grid; grid-template-columns:190px 1fr auto; gap:14px; align-items:center; background:var(--card); border:2px solid var(--line); border-left:8px solid var(--sc); border-radius:16px; padding:12px 14px; transition:border-color .2s}
.idea{color:var(--ink-soft); font-weight:700; font-size:.95rem}
.switch-text{font-family:var(--display); font-size:1.3rem; font-weight:600; line-height:1.25}
.switch-text.swap{animation:rise .3s}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px}
.info-card{background:var(--card); border:2px solid var(--line); border-top:8px solid var(--sc); border-radius:18px; padding:18px 20px}
.info-card h2{font-size:1.45rem; margin-bottom:8px}
.info-card ul{margin:0; padding-left:1.2em}
.info-card li + li{margin-top:5px}
.swaps{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px}
.swaps li{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1.3fr) auto; gap:12px; align-items:center; background:var(--card); border:2px solid var(--line); border-radius:14px; padding:10px 14px}
.swap-from{color:var(--ink-soft); text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--coral) 70%, transparent)}
.swap-arrow{color:var(--sc); font-weight:800; font-size:1.2rem}
.swap-to{font-weight:700; font-size:1.08rem}

.bubble.them:not(.new), .bubble.you:not(.new){animation:none}
@media (max-width:600px){
  .mainnav a{font-size:.98rem; padding:5px 11px}
  .topic-head{flex-direction:column}
  .page-head h1{font-size:clamp(2rem, 9vw, 2.6rem); overflow-wrap:anywhere}
  .table-wrap{border:0; box-shadow:none; background:none; overflow:visible}
  .word-table{min-width:0}
  .word-table thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0)}
  .word-table tbody{display:grid; gap:10px}
  .word-table tr{display:grid; gap:4px; background:var(--card); border:2px solid var(--line); border-radius:14px; padding:12px 14px}
  .word-table td{display:block; padding:0; border:0}
}

/* Chat role-play */
.chat{display:flex; flex-direction:column; gap:10px; max-height:430px; overflow-y:auto; padding:16px; background:color-mix(in srgb, var(--grid) 45%, var(--card)); border:2px solid var(--edge); border-radius:24px; box-shadow:5px 5px 0 var(--shadow); margin-bottom:18px; scroll-behavior:smooth}
.bubble{max-width:84%; padding:10px 14px; border-radius:20px; display:flex; gap:10px; align-items:center; line-height:1.4; animation:rise .25s}
.bubble.them{align-self:flex-start; background:var(--card); border:2px solid var(--line); border-bottom-left-radius:6px}
.bubble.them .say-btn{width:32px; height:32px}
.bubble.you{align-self:flex-end; background:var(--level); color:#fff; border-bottom-right-radius:6px; font-weight:700}
.bubble.you.bad{background:var(--coral); text-decoration:line-through; text-decoration-color:rgba(255,255,255,.7)}
.chat-bottom .options{margin-top:8px}

/* Speaking drill */
.speak-target{font-family:var(--display); font-weight:700; font-size:clamp(1.6rem, 4.6vw, 2.3rem); text-align:center; line-height:1.2; margin:14px auto 18px; max-width:24ch}
.mic{width:112px; height:112px; border-radius:50%; font-size:2.8rem; padding:0; background:var(--coral); color:#fff; border:3px solid var(--edge); box-shadow:4px 4px 0 var(--shadow); transition:transform .12s}
.mic:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--shadow)}
.mic.on{animation:pulse 1s infinite; box-shadow:0 0 0 10px color-mix(in srgb, var(--coral) 30%, transparent)}
.status{text-align:center; min-height:1.5em; color:var(--ink-soft); font-weight:700}
.type-row{display:flex; gap:10px; margin-top:18px}
.type-row .text-input{flex:1}
.text-input.good{border-color:var(--green); background:var(--good-bg)}
.text-input.bad{border-color:var(--coral); background:var(--bad-bg)}

/* Home: more ways to learn */
.more-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; margin-bottom:56px}
.tense-banner{margin-bottom:20px; max-width:620px; box-shadow:4px 4px 0 var(--blue)}
.more-card{display:flex; gap:16px; align-items:center; padding:20px; background:var(--card); border:2px solid var(--edge); border-radius:22px; box-shadow:4px 4px 0 var(--shadow); text-decoration:none; color:inherit; transition:transform .12s, box-shadow .12s}
.more-card:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--shadow)}
.mc-icon{font-size:2.6rem; width:70px; height:70px; display:grid; place-items:center; flex:none; background:var(--highlight); border-radius:20px; border:2px solid var(--edge); transform:rotate(-4deg)}
.more-card strong{font-family:var(--display); font-size:1.5rem; display:block; line-height:1.1}
.more-card small{color:var(--ink-soft); font-size:.97rem}

@media (max-width:900px){
  .mainnav a.nav-test{margin-left:6px}
}
@media (max-width:760px){
  .style-cards,.style-actions,.two-col,.more-grid{grid-template-columns:1fr}
  .style-actions.two{grid-template-columns:1fr}
  .topic-head{gap:14px}
  .topic-emoji{width:64px; height:64px; font-size:2.2rem; border-radius:18px}
  .switch-list li{grid-template-columns:1fr auto}
  .idea{grid-column:1 / -1}
  .swaps li{grid-template-columns:1fr auto; row-gap:2px}
  .swap-arrow{display:none}
  .swap-from{grid-column:1 / -1}
  .bubble{max-width:94%}
}

@media (max-width:760px){
  .hero{grid-template-columns:1fr; gap:34px; padding-top:34px}
  .levels{grid-template-columns:1fr}
  .level-btn{flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:8px}
  .level-btn .lv-meter{flex-basis:100%}
  .progress-grid{grid-template-columns:1fr}
  .rank-pill{display:none}
  .match-grid{grid-template-columns:1fr 1fr}
  .panel{padding:20px}
  .stop-text small{display:none}
}
@media (max-width:420px){
  .logo{font-size:1.25rem}
  .stat{padding:3px 8px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .confetti{display:none}
}

/* ===== Tenses, Everyday English, Idioms, Level test ===== */
.tone-tenses{--level:var(--blue)}
.tone-everyday{--level:var(--amber)}
.tone-idioms{--level:var(--coral)}
.tone-test{--level:var(--violet)}
.page-title{font-size:clamp(2.4rem, 6vw, 3.6rem); font-weight:800; letter-spacing:-.02em}

/* Tense map */
.row-present{--row:var(--green)} .row-past{--row:var(--blue)} .row-future{--row:var(--violet)}
.tense-map-wrap{overflow-x:auto; margin:4px -4px 10px; padding:4px 8px 10px 4px}
.tense-map{display:grid; grid-template-columns:86px repeat(4, minmax(140px, 1fr)); gap:10px; min-width:680px}
.tm-colhead{font-family:var(--display); font-weight:700; color:var(--ink-soft); text-align:center; align-self:end; line-height:1.1}
.tm-rowhead{font-family:var(--display); font-weight:800; font-size:1.3rem; display:flex; align-items:center; color:var(--row)}
.tm-cell{display:flex; flex-direction:column; gap:2px; text-align:left; padding:10px 12px; border:2px solid var(--edge); border-radius:14px; background:var(--card); box-shadow:3px 3px 0 var(--row); transition:transform .12s, box-shadow .12s}
.tm-cell:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--row)}
.tm-cell:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--row)}
.tm-cell strong{font-family:var(--display); font-size:1.08rem; line-height:1.15}
.tm-cell small{color:var(--ink-soft); font-size:.85rem; line-height:1.25}

/* Tense cards */
.tense-list{display:grid; gap:20px; margin-top:30px}
.tense-card{scroll-margin-top:130px; display:grid; grid-template-columns:1fr 1fr; gap:4px 30px; padding:22px 24px; background:var(--card); border:2px solid var(--edge); border-radius:24px; box-shadow:6px 6px 0 var(--row)}
.tense-card.flash{animation:glow 1.2s}
@keyframes glow{0%,40%{outline:4px solid var(--highlight); outline-offset:4px}100%{outline:4px solid transparent; outline-offset:4px}}
.tc-head{grid-column:1 / -1; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.tc-head h2{font-size:clamp(1.7rem, 4vw, 2.1rem); font-weight:800; color:var(--row)}
.tc-common{background:var(--highlight); color:#1B2250}
.formula{grid-column:1 / -1; justify-self:start; margin-top:8px; font-family:var(--display); font-weight:700; font-size:1.15rem; background:color-mix(in srgb, var(--row) 13%, var(--card)); border:2px solid color-mix(in srgb, var(--row) 45%, transparent); border-radius:12px; padding:6px 14px}
.timeline{grid-column:1 / -1; width:100%; max-width:560px; height:auto; margin:10px 0 2px}
.tl-axis{stroke:var(--ink-soft); stroke-width:2}
.tl-arrow{fill:var(--ink-soft)}
.tl-now{stroke:var(--coral); stroke-width:3; stroke-dasharray:4 3}
.tl-label{font:700 10px var(--body); fill:var(--ink-soft); text-anchor:middle}
.tl-start{text-anchor:start} .tl-end{text-anchor:end}
.tl-dot{fill:var(--row); stroke:var(--edge); stroke-width:2}
.tl-dot2{fill:var(--card); stroke:var(--row); stroke-width:3}
.tl-span{fill:color-mix(in srgb, var(--row) 45%, transparent); stroke:var(--row); stroke-width:2}
.tl-flag{stroke:var(--ink); stroke-width:2}
.tense-card h3{font-size:1.25rem; margin:14px 0 8px}
.uses{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.uses strong{display:block; margin-bottom:3px}
.use-ex{display:flex; gap:10px; align-items:center; color:var(--ink-soft)}
.forms li{align-items:center}
.sign{flex:none; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-weight:800; font-size:1.1rem; background:var(--row); color:#fff}
.signals{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px; padding-top:12px; border-top:2px dashed var(--line)}
.signals .keychips{margin:0}
.tip-line{grid-column:1 / -1; margin-top:14px; padding:12px 14px; border-radius:14px; background:color-mix(in srgb, var(--highlight) 25%, var(--card)); border:2px dashed var(--edge)}

/* Everyday English */
.sit-sample{font-family:var(--display); font-weight:600; color:var(--level); line-height:1.3}
.phrase-groups{display:grid; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); gap:16px; margin-top:12px}
.phrase-card{background:var(--card); border:2px solid var(--line); border-top:8px solid var(--level); border-radius:18px; padding:16px 18px}
.phrase-card h3{font-size:1.35rem; margin-bottom:10px}
.phrases{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.phrases li{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start}
.phrases strong{display:block; line-height:1.3}
.phrases small{color:var(--ink-soft); font-size:.9rem}
.dialogue{margin-top:12px; background:var(--card); border:2px solid var(--edge); border-radius:24px; box-shadow:5px 5px 0 var(--shadow); padding:18px 20px}
.dialogue-top{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.script{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.script li{display:grid; grid-template-columns:120px auto 1fr; gap:10px; align-items:center; padding:8px 10px; border-radius:14px; transition:background .2s}
.script li.me{background:color-mix(in srgb, var(--level) 14%, transparent)}
.script li.me > span:last-child{font-weight:700}
.script li.speaking{background:var(--highlight); color:#1B2250}
.script .who{font-family:var(--display); font-weight:700; color:var(--ink-soft)}
.script li.speaking .who{color:#1B2250}
.tips{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:12px}
.tip{background:color-mix(in srgb, var(--highlight) 22%, var(--card)); border:2px dashed var(--edge); border-radius:18px; padding:16px 18px}
.tip h3{font-size:1.25rem; margin-bottom:4px}

/* Idioms */
.idiom-hero{padding-top:36px}
.idiom-hero .lede{max-width:52ch}
.idiom-hero .row{align-items:center}
.wotd-word.idiom-word{font-size:clamp(1.6rem, 4vw, 2.1rem)}
.idiom-tools{display:flex; gap:12px; margin:6px 0 14px}
.search{flex:1 1 280px; max-width:520px}
.tone-key{display:flex; flex-wrap:wrap; gap:8px 18px; margin:-6px 0 18px; font-size:.92rem}
.reg-casual{background:var(--coral)} .reg-everyday{background:var(--amber)} .reg-work{background:var(--blue)}
.idiom-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:16px}
.idiom-card{display:flex; flex-direction:column; gap:8px; height:100%; padding:18px; background:var(--card); border:2px solid var(--edge); border-radius:20px; box-shadow:4px 4px 0 var(--shadow); transition:box-shadow .2s}
.idiom-card.learned{box-shadow:4px 4px 0 var(--green)}
.ic-top{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:.88rem; font-weight:700; color:var(--ink-soft)}
.idiom-card h3{font-size:1.6rem; line-height:1.1}
.ic-meaning{font-size:1.05rem; font-weight:700}
.ic-ex{display:flex; gap:10px; align-items:flex-start; color:var(--ink-soft); font-style:italic}
.ic-ex mark{font-style:normal; font-weight:700; color:#1B2250; border-radius:3px}
.ic-when{margin-top:auto; font-size:.95rem; padding:9px 11px; border-radius:12px; background:color-mix(in srgb, var(--grid) 60%, var(--card))}
.learn-btn{align-self:flex-start; border:2px solid var(--line); background:transparent; border-radius:999px; padding:5px 13px; font-weight:700; font-size:.92rem}
.learn-btn:hover{border-color:var(--ink)}
.learn-btn[aria-pressed="true"]{background:var(--green); border-color:var(--green); color:#fff}
.empty{padding:32px 20px; text-align:center; border:2px dashed var(--line); border-radius:18px; background:var(--card)}

/* Level test */
.test-intro{display:grid; grid-template-columns:1.25fr 1fr; gap:20px; align-items:stretch}
.how-list{margin:10px 0 22px; padding-left:1.2em; display:grid; gap:6px}
.last-result{border:2px dashed var(--line); border-radius:24px; padding:22px; background:color-mix(in srgb, var(--card) 70%, transparent)}
.lr-level{font-family:var(--display); font-weight:800; font-size:2.4rem; line-height:1.1; color:var(--level); margin:4px 0 10px}
.lr-level span{font-size:1.1rem; color:#fff; background:var(--level); border-radius:999px; padding:2px 12px; vertical-align:middle}
.lr-empty{font-size:2.6rem}
.cefr-cards{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:12px}
.cefr-card{display:flex; flex-direction:column; gap:6px; align-items:flex-start; padding:16px 18px; border:2px solid var(--line); border-top:8px solid var(--level); border-radius:18px; background:var(--card)}
.cefr-card strong{font-family:var(--display); font-size:1.45rem; line-height:1}
.cefr-card p{color:var(--ink-soft); font-size:.97rem}
.part-label{font-weight:700; color:var(--level); margin-bottom:6px}
.opt.picked{border-color:var(--level); background:color-mix(in srgb, var(--level) 14%, var(--card))}
.opt.picked kbd{background:var(--level); border-color:var(--level); color:#fff}
.test-result{max-width:740px}
.level-badge{display:inline-flex; flex-direction:column; align-items:center; gap:6px; margin:8px 0 14px; padding:18px 38px; border:3px solid var(--edge); border-radius:30px; background:var(--level); color:#fff; box-shadow:6px 6px 0 var(--shadow); transform:rotate(-2deg); animation:stamp .6s cubic-bezier(.3,1.5,.5,1) both}
@keyframes stamp{from{transform:scale(1.6) rotate(-10deg); opacity:0}to{transform:rotate(-2deg); opacity:1}}
.lb-name{font-family:var(--display); font-weight:800; font-size:clamp(2.6rem, 9vw, 4.2rem); line-height:1}
.lb-cefr{font-family:var(--display); font-weight:800; font-size:1.3rem; background:#fff; color:#1B2250; border-radius:999px; padding:0 16px}
.part-bars{display:grid; gap:10px; text-align:left; max-width:560px; margin:22px auto}
.part-bars.small{margin:0 0 10px; gap:8px}
.part-bar{display:grid; grid-template-columns:150px 1fr 48px; gap:12px; align-items:center; font-weight:700}
.part-bars.small .part-bar{grid-template-columns:120px 1fr 44px; font-size:.9rem}
.part-bar b{text-align:right}
.test-result .reco{text-align:left; margin:10px 0 6px}
.test-result .reco p{color:var(--ink)}
.review{text-align:left; margin-top:26px; background:var(--card); border:2px solid var(--line); border-radius:18px; padding:14px 18px}
.review summary{cursor:pointer; font-family:var(--display); font-weight:700; font-size:1.15rem}
.review ol{margin:14px 0 4px; padding-left:1.3em; display:grid; gap:14px}
.test-result .review p{margin:2px 0 0; font-size:1rem}
.review .yours{color:var(--coral)}
.review .right{color:var(--green); font-weight:700}
.test-result .fine{font-size:.9rem; margin-top:20px}

@media (max-width:760px){
  .tense-card{grid-template-columns:1fr; padding:18px}
  .tips,.test-intro,.cefr-cards{grid-template-columns:1fr}
  .script li{grid-template-columns:auto 1fr}
  .script .who{grid-column:1 / -1}
  .part-bar{grid-template-columns:1fr 44px}
  .part-bar .meter{grid-column:1 / -1; grid-row:2}
  .part-bar > span{grid-column:1}
  .part-bar b{grid-row:1; grid-column:2}
}

/* Final touches */
a.btn{text-decoration:none}
.nav-short{display:none}
.tm-common{align-self:flex-start; margin-top:4px; font-size:.72rem; font-weight:700; background:var(--highlight); color:#1B2250; border-radius:999px; padding:1px 8px}
@media (max-width:760px){
  .nav-long{display:none}
  .nav-short{display:inline}
  .nav-row{-webkit-mask-image:linear-gradient(90deg, #000 85%, transparent); mask-image:linear-gradient(90deg, #000 85%, transparent)}
  .tense-map-wrap{overflow:visible; margin:4px 0 10px; padding:0}
  .tense-map{grid-template-columns:1fr 1fr; min-width:0; gap:8px}
  .tense-map > span:first-child, .tm-colhead{display:none}
  .tm-rowhead{grid-column:1 / -1; margin-top:8px; font-size:1.2rem}
  .tm-cell{padding:9px 10px}
}

/* Donations */
.support-card{display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; margin:0 0 56px; padding:20px 24px; border:2px solid var(--edge); border-radius:24px; background:color-mix(in srgb, var(--highlight) 30%, var(--card)); box-shadow:5px 5px 0 var(--shadow)}
.sc-cup{font-size:2.6rem; width:72px; height:72px; display:grid; place-items:center; border-radius:50%; background:var(--card); border:2px solid var(--edge); transform:rotate(-8deg)}
.support-card h2{font-size:1.6rem; margin-bottom:4px}
.support-card p{max-width:56ch; color:var(--ink-soft)}
.support-card .btn{white-space:nowrap}
.support-line{margin-top:18px}
.support-line a{color:var(--level); font-weight:700}
@media (max-width:760px){
  .support-card{grid-template-columns:1fr; gap:12px; padding:20px}
  .sc-cup{width:56px; height:56px; font-size:2rem}
  .support-card .btn{justify-self:start}
}

/* Footer links and legal page */
.foot-links{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center}
.foot-links a{color:var(--ink-soft); font-weight:700}
.foot-links a:hover{color:var(--ink)}
.legal{max-width:720px}
.legal p{max-width:66ch; margin-top:8px}
.legal a{color:var(--blue); font-weight:700}
.legal .block-h{font-size:1.5rem; margin-top:28px}