/* ==========================================================================
   Tokens
   ========================================================================== */
:root{
  --bg:#f5f6fb; --panel:#ffffff; --panel-2:#f0f2f8; --ink:#11142b; --ink-2:#39405a; --muted:#6b7190;
  --line:#e4e7f1; --line-2:#d6dae8;
  --accent:#4f46e5; --accent-2:#7c3aed; --accent-soft:#eef0ff; --accent-ink:#3730a3; --on-accent:#ffffff;
  --ok:#15803d; --ok-bg:#e8f7ee; --ok-line:#7fd3a0;
  --no:#b91c1c; --no-bg:#fdecec; --no-line:#f1a3a3;
  --warn:#9a5b00; --warn-bg:#fff5df; --warn-line:#f3c56b;
  --radius:14px; --radius-sm:10px; --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(17,20,43,.05);
  --shadow:0 1px 2px rgba(17,20,43,.05),0 10px 30px -18px rgba(17,20,43,.28);
  --shadow-lg:0 2px 4px rgba(17,20,43,.05),0 24px 48px -24px rgba(49,46,129,.35);
  --hero:linear-gradient(135deg,#4338ca 0%,#6d28d9 55%,#9333ea 100%);
  /* The content column is 1172px wide; the gutter scales with the screen. */
  --content:1172px;
  --gutter:clamp(16px,4vw,32px);
  --header-h:64px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0c0e18; --panel:#141827; --panel-2:#1b2033; --ink:#eceefa; --ink-2:#c6cae0; --muted:#8f95b2;
    --line:#252b40; --line-2:#323a55;
    --accent:#8e8cff; --accent-2:#b98cff; --accent-soft:#1f2144; --accent-ink:#cfd0ff; --on-accent:#0c0e18;
    --ok:#6ee7a0; --ok-bg:#12291d; --ok-line:#2f6b48;
    --no:#fca5a5; --no-bg:#2c1417; --no-line:#7a3a3f;
    --warn:#fcd27d; --warn-bg:#2b2211; --warn-line:#7a5d25;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -18px rgba(0,0,0,.8);
    --shadow-lg:0 2px 4px rgba(0,0,0,.4),0 24px 48px -24px rgba(0,0,0,.9);
    --hero:linear-gradient(135deg,#312e81 0%,#4c1d95 60%,#6b21a8 100%);
  }
}
:root[data-theme="dark"]{
  --bg:#0c0e18; --panel:#141827; --panel-2:#1b2033; --ink:#eceefa; --ink-2:#c6cae0; --muted:#8f95b2;
  --line:#252b40; --line-2:#323a55;
  --accent:#8e8cff; --accent-2:#b98cff; --accent-soft:#1f2144; --accent-ink:#cfd0ff; --on-accent:#0c0e18;
  --ok:#6ee7a0; --ok-bg:#12291d; --ok-line:#2f6b48;
  --no:#fca5a5; --no-bg:#2c1417; --no-line:#7a3a3f;
  --warn:#fcd27d; --warn-bg:#2b2211; --warn-line:#7a5d25;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -18px rgba(0,0,0,.8);
  --shadow-lg:0 2px 4px rgba(0,0,0,.4),0 24px 48px -24px rgba(0,0,0,.9);
  --hero:linear-gradient(135deg,#312e81 0%,#4c1d95 60%,#6b21a8 100%);
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);
  font:16px/1.65 "Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3{color:var(--ink);line-height:1.2;letter-spacing:-.02em;margin:0}
h1,h2,h3,.fw,.de,.lt,.lb strong{overflow-wrap:break-word}
ul,ol{padding-left:1.2em}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px;border-radius:6px}
img{max-width:100%}
[hidden]{display:none!important}

/* The footer sits at the bottom of short pages instead of leaving a band below it. */
main.wrap{flex:1 0 auto;padding-bottom:clamp(28px,5vw,56px)}
.wrap{width:100%;max-width:calc(var(--content) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}

.tight{margin-top:0}
.last{margin-bottom:0}
.mt14{margin-top:14px}
.count{font-size:13px;color:var(--muted);margin:0 0 14px}
.lead{color:var(--muted);margin:0 0 16px;font-size:15.5px;max-width:72ch}
.sub{font-weight:500;color:var(--muted);font-size:.62em;letter-spacing:0;margin-left:8px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent)}

/* ==========================================================================
   Header
   ========================================================================== */
header.site{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px)}
header.site .wrap{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"brand nav account";
  align-items:center;column-gap:24px;min-height:var(--header-h)}
header.site .brand{grid-area:brand}
header.site nav.top{grid-area:nav;justify-self:end}
header.site .account{grid-area:account}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.02em;
  color:var(--ink);white-space:nowrap}
.brand:hover{text-decoration:none}
.brand .mark{width:32px;height:32px;border-radius:10px;background:var(--hero);color:#fff;font-size:13px;
  font-weight:800;display:inline-flex;align-items:center;justify-content:center;letter-spacing:0;box-shadow:var(--shadow-sm)}
.brand .wordmark span{color:var(--accent)}
.brand{min-width:0}
.brand .mark{flex:none}
.brand .wordmark{min-width:0;overflow:hidden;text-overflow:ellipsis}
.account .tk-ic{display:none;font-weight:800}
@media(max-width:479px){.brand{font-size:16px;gap:8px}.brand .mark{width:30px;height:30px;font-size:12px}}
@media(max-width:399px){.account .tk{display:none}.account .tk-ic{display:inline}}
@media(max-width:359px){.brand{font-size:14.5px;gap:7px}.brand .mark{width:28px;height:28px;font-size:11px}}
nav.top{display:flex;gap:2px;flex-wrap:wrap}
nav.top a{padding:7px 12px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink-2)}
nav.top a:hover{background:var(--panel-2);color:var(--ink);text-decoration:none}
nav.top a[aria-current="page"]{background:var(--accent-soft);color:var(--accent-ink)}
@media(max-width:899px){
  :root{--header-h:56px}
  header.site .wrap{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand account" "nav nav";row-gap:2px;
    padding-top:8px}
  header.site nav.top{justify-self:stretch;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    margin:0 calc(-1 * var(--gutter));padding:2px var(--gutter) 10px;scrollbar-width:none}
  header.site nav.top::-webkit-scrollbar{display:none}
  header.site nav.top a{flex:none}
}

.account{display:flex;align-items:center;gap:8px}
.account a.login,.account .me{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:650;
  padding:8px 14px;border-radius:999px;white-space:nowrap}
.account a.login{background:#5865f2;color:#fff;box-shadow:0 6px 16px -8px rgba(88,101,242,.8)}
.account a.login:hover{text-decoration:none;filter:brightness(1.07)}
.account .me{background:var(--panel-2);color:var(--ink);border:1px solid var(--line)}
.account .me:hover{text-decoration:none;border-color:var(--line-2)}
.account .me img{width:24px;height:24px;border-radius:50%;flex:none}
.account .due{font-size:12px;font-weight:700;background:var(--accent);color:var(--on-accent);border-radius:999px;
  padding:0 7px;line-height:18px}
.account .nm{max-width:160px;overflow:hidden;text-overflow:ellipsis}
.account .lg-short{display:none}
@media(max-width:1099px){.account .nm{display:none}.account .me.prof{padding:4px}}
@media(max-width:479px){
  .account .lg-full{display:none}
  .account .lg-short{display:inline}
  .account a.login,.account .me{padding:7px 11px}
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer.site{border-top:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:14px}
.foot{display:grid;gap:28px;grid-template-columns:1fr;padding:clamp(28px,5vw,48px) 0 24px}
@media(min-width:760px){.foot{grid-template-columns:1.6fr 1fr 1fr}}
.foot h4{margin:0 0 10px;color:var(--ink);font-size:13px;letter-spacing:.05em;text-transform:uppercase}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot a{color:var(--ink-2)}
.foot p{margin:10px 0 0;max-width:46ch}
.foot-bottom{border-top:1px solid var(--line);padding:16px 0 22px;display:flex;flex-wrap:wrap;gap:8px 20px;
  justify-content:space-between;font-size:13px}

/* ==========================================================================
   Surfaces
   ========================================================================== */
section{margin:clamp(28px,4vw,44px) 0}
section > h2{font-size:clamp(20px,2.4vw,24px);margin:0 0 6px}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 20px;margin-bottom:16px}
.sec-head h2{font-size:clamp(20px,2.4vw,24px)}
.sec-head .lead{margin:6px 0 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(16px,2.4vw,24px);
  box-shadow:var(--shadow)}
.card > p,.card .satz,.gram .rule{max-width:80ch}
.grid{display:grid;gap:clamp(12px,1.6vw,18px);grid-template-columns:minmax(0,1fr)}
@media(min-width:560px){.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:900px){.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.scroll{overflow-x:auto}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-ink);vertical-align:middle;letter-spacing:0}
.chip-row{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-2);
  background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:3px 10px;white-space:nowrap;max-width:100%}
@media(max-width:479px){.pill{white-space:normal}}
.date{display:inline-flex;align-items:center;font-size:13px;font-weight:650;border-radius:999px;padding:4px 12px;
  background:var(--accent-soft);color:var(--accent-ink)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:14.5px;font-weight:650;
  cursor:pointer;padding:10px 18px;border-radius:12px;border:1px solid var(--line-2);background:var(--panel);color:var(--ink);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease,border-color .12s ease}
.btn:hover{text-decoration:none;border-color:var(--accent);box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:default}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 8px 20px -10px color-mix(in srgb,var(--accent) 80%,transparent)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.light{background:#fff;border-color:#fff;color:#312e81}
.btn.ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.2);border-color:#fff}
.btn.danger{color:var(--no);border-color:var(--no-line)}
.btn.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.btn.no{background:var(--no-bg);border-color:var(--no-line);color:var(--no)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.linklike{font:inherit;font-size:14px;background:none;border:0;padding:0;color:var(--accent);cursor:pointer;text-decoration:underline;
  text-underline-offset:3px}

.bar{display:flex;height:8px;border-radius:999px;background:var(--panel-2);overflow:hidden;border:1px solid var(--line)}
.bar .b-ok{background:linear-gradient(90deg,#22c55e,#16a34a);width:0;transition:width .35s ease}
.bar .b-no{background:#ef4444;opacity:.75}
.bar.lvl .b-ok{background:var(--lc,var(--accent))}
.sp{font-size:12px;font-weight:700;color:var(--muted);background:var(--panel-2);border:1px solid var(--line);
  border-radius:999px;padding:1px 9px;white-space:nowrap;font-variant-numeric:tabular-nums}
.sp.all{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.hint{font-size:14px;color:var(--ink-2);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  border-radius:var(--radius-sm);padding:10px 14px;margin:0 0 14px}

/* ==========================================================================
   Home
   ========================================================================== */
.hero{padding:clamp(22px,5vw,40px) 0 4px}
.hero h1{font-size:clamp(28px,4.4vw,44px);font-weight:800;margin:0 0 12px}
.hero p{color:var(--muted);margin:0;max-width:66ch;font-size:clamp(15.5px,1.6vw,17px)}

.hero-card{position:relative;overflow:hidden;margin-top:clamp(16px,3vw,28px);border-radius:var(--radius-lg);background:var(--hero);
  color:#fff;padding:clamp(22px,4.5vw,48px);box-shadow:var(--shadow-lg);display:grid;gap:28px;grid-template-columns:minmax(0,1fr)}
@media(min-width:960px){.hero-card{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:center}}
.hero-card::after{content:"";position:absolute;inset:auto -120px -160px auto;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.18),transparent);pointer-events:none}
.hero-card h1{color:#fff;font-size:clamp(28px,4.6vw,48px);font-weight:800;margin:14px 0 12px}
.hero-card p{color:rgba(255,255,255,.86);margin:0;max-width:56ch;font-size:clamp(15.5px,1.6vw,17.5px)}
.hero-card .date{background:rgba(255,255,255,.16);color:#fff}
.hero-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px;max-width:560px}
@media(min-width:560px){.hero-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hero-stats div{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:10px 12px}
.hero-stats strong{display:block;font-size:22px;line-height:1.1;color:#fff}
.hero-stats span{font-size:12.5px;color:rgba(255,255,255,.8)}
.wotd{position:relative;z-index:1;background:var(--panel);color:var(--ink);border-radius:var(--radius);padding:20px 22px;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.wotd .eyebrow{color:var(--accent)}
.wotd .wotd-word{font-size:clamp(24px,3vw,30px);font-weight:800;letter-spacing:-.02em;margin:6px 0 2px}
.wotd .wotd-tr{color:var(--accent);font-weight:650}
.wotd ul{margin:12px 0 0;color:var(--ink-2);font-size:14.5px}
.wotd .more{display:inline-block;margin-top:12px;font-weight:650;font-size:14px}

.levelcard{position:relative;display:flex;flex-direction:column;gap:10px;color:inherit;overflow:hidden;
  padding-top:calc(clamp(16px,2.4vw,24px) + 4px);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.levelcard::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--lc,var(--accent))}
.levelcard:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.lc-head{display:flex;align-items:center;gap:12px}
.lc-code{flex:none;width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:800;
  font-size:17px;color:#fff;background:var(--lc,var(--accent))}
.lc-name{font-size:18px;font-weight:750;line-height:1.2}
.lc-label{font-size:13.5px;color:var(--muted)}
.lc-desc{font-size:14.5px;color:var(--ink-2);margin:0}
.lc-foot{margin-top:auto;display:grid;gap:8px}
.lc-go{font-weight:650;font-size:14px;color:var(--accent)}

.steps{counter-reset:step}
.step{position:relative;padding-top:clamp(18px,2.4vw,24px)}
.step .ic{width:42px;height:42px;border-radius:12px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;
  font-size:21px;margin-bottom:12px}
.step h3{font-size:17px;margin-bottom:6px}
.step p{margin:0;color:var(--muted);font-size:14.5px}

.today{display:flex;flex-direction:column;gap:12px;min-width:0}
.mini-words .mw,.mini-words .mt{min-width:0;overflow-wrap:anywhere}
.today-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.today-head h3{font-size:17px;display:flex;align-items:center;gap:10px}
.mini-words{list-style:none;margin:0;padding:0;display:grid;gap:0}
.mini-words li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-top:1px dashed var(--line)}
.mini-words li:first-child{border-top:0}
.mini-words .mw{font-weight:650}
.mini-words .mt{color:var(--accent);text-align:right;font-size:14.5px}
.today .satz{font-size:15.5px;background:var(--panel-2);border-radius:var(--radius-sm);padding:12px 14px}
.today .satz .tr{font-size:14px}

/* ==========================================================================
   Learning content
   ========================================================================== */
.words{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media(min-width:720px){.words{grid-template-columns:repeat(2,minmax(0,1fr))}}
.word{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.hit{display:flex}
.hit > .word{flex:1;min-width:0}
.btn.more{display:flex;margin:18px auto 0;min-width:min(100%,320px)}
.word .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.word .top > div{min-width:0}
.word .de,.word .tr,.word li{overflow-wrap:anywhere}
.word .de{font-size:18.5px;font-weight:750;letter-spacing:-.01em;line-height:1.3}
.word .pl{display:block;color:var(--muted);font-weight:500;font-size:13.5px;letter-spacing:0}
.word .tr{color:var(--accent);font-size:15px;font-weight:600;margin-top:4px}
.word .cat{flex:none;font-size:11.5px;font-weight:650;color:var(--muted);background:var(--panel-2);border:1px solid var(--line);
  border-radius:999px;padding:2px 9px}
.word ul{margin:10px 0 0;padding:0 0 0 12px;border-left:3px solid var(--accent-soft);color:var(--ink-2);font-size:14.5px;list-style:none}
.word li{margin:3px 0}
.wact{display:flex;gap:8px;margin-top:auto;padding-top:12px;flex-wrap:wrap}
.wact:empty{padding-top:0}
.wact button{font:inherit;font-size:13px;font-weight:650;cursor:pointer;padding:6px 12px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--panel);color:var(--ink-2)}
.wact button:hover{border-color:var(--accent);color:var(--accent)}
.wact button.on-ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.wact button.on-no{background:var(--no-bg);border-color:var(--no-line);color:var(--no)}

.satz{font-size:17.5px;line-height:1.55;color:var(--ink)}
.satz .tr{color:var(--muted);font-size:15px;margin-top:6px}
.focus{font-size:13px;color:var(--muted);margin-top:10px}
.focus em{font-style:normal;background:var(--panel-2);border-radius:6px;padding:1px 6px}
.sent-grid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.sent-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.gram h3{font-size:18px;margin:0 0 8px}
.gram .rule{font-size:clamp(16px,1.7vw,18px);color:var(--ink);line-height:1.6}
.examples{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;counter-reset:ex}
.examples li{counter-increment:ex;display:flex;gap:12px;align-items:baseline;background:var(--panel-2);border-radius:var(--radius-sm);
  padding:10px 14px;font-size:15.5px}
.examples li::before{content:counter(ex);flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent-ink);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.pit{display:flex;gap:12px;margin-top:12px;background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--radius-sm);
  padding:12px 14px;font-size:14.5px;color:var(--ink-2)}
.pit::before{content:"⚠";color:var(--warn);font-size:18px;line-height:1.2}
.pit strong{color:var(--warn)}
.pit-wrong,.pit-right{display:block;font-size:15.5px;line-height:1.5}
.pit-wrong{color:var(--muted);text-decoration:line-through}
.pit-wrong::before{content:"✗ ";text-decoration:none;color:var(--warn);font-weight:700}
.pit-right{color:var(--ink);font-weight:600}
.pit-right::before{content:"✓ ";color:var(--ok,#2f9e44);font-weight:700}
.pit-why{margin-top:6px;color:var(--ink-2);font-size:14px}

/* ---- grammar lesson sections ---- */
.gloss{font-weight:400;font-size:15px;color:var(--muted)}
.gsec{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.gsec:first-of-type{border-top:0;padding-top:10px}
.gsec h4{margin:0 0 8px;font-size:16px;letter-spacing:-0.01em}
.gsec p{margin:0;max-width:80ch;line-height:1.65;color:var(--ink-2);font-size:15.5px}
.ex-de{font-weight:600;color:var(--ink)}
.ex-tr{display:block;color:var(--muted);font-size:14.5px;margin-top:2px}
.ex-note{display:block;color:var(--muted);font-size:13px;margin-top:4px;font-style:italic}
.examples li{align-items:flex-start}
.examples li>span:first-of-type{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.ex-de{display:block}
.gtab-wrap{margin-top:14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.gtab{border-collapse:collapse;width:100%;min-width:min(100%,380px);font-size:14.5px}
.gtab caption{caption-side:top;text-align:left;color:var(--muted);font-size:13.5px;padding-bottom:8px}
.gtab th,.gtab td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.gtab thead th{background:var(--panel-2);font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  font-weight:700;border-bottom:1px solid var(--line)}
.gtab tbody tr:last-child td{border-bottom:0}
.gtab td:first-child{font-weight:600;color:var(--ink)}

.topic{font-size:18px;margin:0 0 8px}
ul.plain{list-style:none;margin:12px 0 0;padding:0}
ul.plain li{padding:9px 0;border-top:1px solid var(--line);font-size:15px}
ul.plain li:first-child{border-top:0}

/* ---- reading: words above the text's level ---- */
.gl{position:relative;color:var(--gc);font-weight:600;cursor:help;
  border-bottom:2px solid color-mix(in srgb,var(--gc) 45%,transparent);border-radius:2px}
.gl:focus-visible{outline:2px solid var(--gc);outline-offset:2px}
.gl::after{content:attr(data-lv) " · " attr(data-tr);position:absolute;left:50%;bottom:calc(100% + 8px);
  transform:translateX(-50%);white-space:nowrap;max-width:min(80vw,320px);overflow:hidden;text-overflow:ellipsis;
  background:var(--ink);color:var(--panel);font-size:13px;font-weight:600;line-height:1.3;
  padding:6px 10px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .12s ease;z-index:5}
.gl::before{content:"";position:absolute;left:50%;bottom:calc(100% + 3px);transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--ink);opacity:0;transition:opacity .12s ease;z-index:5}
.gl:hover::after,.gl:hover::before,.gl:focus::after,.gl:focus::before{opacity:1}
.above{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.above h3{margin:0 0 6px;font-size:15px}
.above-note{margin:0 0 10px;font-size:13.5px;color:var(--muted);line-height:1.5}
.above-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.above-list li{display:flex;gap:8px;align-items:baseline;font-size:14.5px;flex-wrap:wrap}
.lv{flex:none;color:#fff;font-size:11px;font-weight:700;letter-spacing:.03em;
  padding:2px 7px;border-radius:999px;line-height:1.5}
.above-tr{color:var(--muted)}

/* ---- test packs: gap, order, translate ---- */
.qtype{display:inline-block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  color:var(--accent-ink);background:var(--accent-soft);border-radius:999px;padding:3px 10px;margin-bottom:10px}
.qtr{color:var(--muted);font-size:15px;margin:-6px 0 0}
.answer-row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.answer{flex:1 1 220px;min-width:0;font:inherit;font-size:16px;padding:11px 14px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--panel);color:var(--ink)}
.answer:focus{outline:2px solid var(--accent);outline-offset:1px}
.answer.right{border-color:var(--ok,#2f9e44);background:var(--ok-bg,rgba(47,158,68,.08))}
.answer.wrong{border-color:var(--warn);background:var(--warn-bg)}
.hint{margin-top:8px;font-size:13.5px;color:var(--muted)}
.verdict{margin-top:14px;font-weight:700;font-size:15.5px}
.verdict.ok{color:var(--ok,#2f9e44)}
.verdict.no{color:var(--warn)}
.drop{min-height:56px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px;margin-top:6px;
  border:2px dashed var(--line);border-radius:var(--radius-sm);background:var(--panel-2)}
.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop.right{border-style:solid;border-color:var(--ok,#2f9e44)}
.drop.wrong{border-style:solid;border-color:var(--warn)}
.drop-hint{color:var(--muted);font-size:14px}
.bank{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tok{font:inherit;font-size:15.5px;padding:8px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--panel);color:var(--ink);cursor:grab;touch-action:manipulation}
.tok:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}
.tok:disabled{cursor:default;opacity:.85}
.tok.in{background:var(--accent-soft);border-color:var(--accent)}
@media(max-width:520px){.answer-row{flex-direction:column}.answer-row .btn{width:100%}}

/* ---- quiz ---- */
.q{font-size:clamp(16.5px,1.8vw,18.5px);font-weight:700;margin:0 0 14px;line-height:1.45}
.opts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.opts li{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--panel);font-size:15px}
.opts li.ok{border-color:var(--ok-line);background:var(--ok-bg);color:var(--ok);font-weight:650}
.opts li.ok::after{content:"✓";margin-left:auto}
.expl{margin-top:14px;font-size:14.5px;color:var(--ink-2);background:var(--panel-2);border-radius:var(--radius-sm);padding:10px 14px}
button.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;font-size:15.5px;cursor:pointer;
  border:1px solid var(--line-2);border-radius:12px;padding:11px 14px;background:var(--panel);color:inherit;
  transition:border-color .12s ease,background .12s ease,transform .12s ease}
button.opt:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}
button.opt:disabled{cursor:default}
button.opt .key{flex:none;width:28px;height:28px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--muted)}
button.opt.right{border-color:var(--ok-line);background:var(--ok-bg);color:var(--ok);font-weight:650}
button.opt.right .key{background:#16a34a;border-color:#16a34a;color:#fff}
button.opt.wrong{border-color:var(--no-line);background:var(--no-bg);color:var(--no)}
button.opt.wrong .key{background:#dc2626;border-color:#dc2626;color:#fff}
button.opt.center{justify-content:center;font-weight:650}
.quizbar{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13.5px;font-weight:600;margin-bottom:12px;
  font-variant-numeric:tabular-nums}
.quizbar .track{flex:1;height:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.quizbar .fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .25s}
.result{text-align:center;padding:10px 0 4px}
.result .big{font-size:clamp(36px,6vw,52px);font-weight:800;letter-spacing:-.03em;color:var(--accent)}
.result p{color:var(--muted);margin:4px 0 16px}

.search{width:100%;font:inherit;padding:12px 16px;border:1px solid var(--line-2);border-radius:12px;background:var(--panel);color:inherit;
  margin-bottom:8px;box-shadow:var(--shadow-sm)}
.search:focus{outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent);border-color:var(--accent)}

/* ==========================================================================
   Course: sidebar + content
   ========================================================================== */
.course{display:grid;gap:clamp(18px,2.5vw,32px);grid-template-columns:minmax(0,1fr);padding-top:clamp(14px,3vw,28px)}
@media(min-width:920px){.course{grid-template-columns:clamp(236px,24%,284px) minmax(0,1fr)}}
.course-main > :first-child{margin-top:0}
.side{align-self:start;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow)}
@media(min-width:920px){.side{position:sticky;top:calc(var(--header-h) + 16px);max-height:calc(100vh - var(--header-h) - 32px);overflow:auto}}
.side-level{display:flex;align-items:center;gap:10px;color:var(--ink);padding:8px;border-radius:10px}
.side-level:hover,.side-level[aria-current="page"]{text-decoration:none;background:var(--panel-2)}
.side-level .lc-code{width:36px;height:36px;border-radius:10px;font-size:14px}
.side-level .sl-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.side-level .sl-text strong{font-size:15px;overflow-wrap:anywhere}
.side-level .sl-text > span{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:2px}
.side-bar{margin:6px 8px 12px;height:7px}
.side-sec{border-top:1px solid var(--line);padding:4px 0}
.side-sec summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:9px 8px;border-radius:10px;font-weight:700;font-size:15px}
.side-sec summary::-webkit-details-marker{display:none}
.side-sec summary .ic{flex:none;width:28px;height:28px;border-radius:8px;background:var(--panel-2);display:inline-flex;
  align-items:center;justify-content:center;font-size:15px}
.side-sec summary .st{flex:1}
.side-sec summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(-45deg);transition:transform .15s ease;margin:0 4px 0 2px}
.side-sec[open] summary::after{transform:rotate(45deg)}
.side-sec summary:hover{background:var(--panel-2)}
.side-sec ul{list-style:none;margin:2px 0 6px;padding:0}
.side-sec li a{display:flex;align-items:flex-start;gap:10px;padding:7px 8px 7px 12px;border-radius:9px;color:var(--ink-2);font-size:14px;line-height:1.35}
.side-sec li a:hover{background:var(--panel-2);color:var(--ink);text-decoration:none}
.side-sec li a[aria-current="page"]{background:var(--accent-soft);color:var(--accent-ink);font-weight:650}
.side-sec a.side-over{color:var(--muted);font-size:13px;font-weight:600}
.ck{flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;border:2px solid var(--line-2);display:inline-flex;
  align-items:center;justify-content:center;font-size:10px;line-height:1;color:#fff;background:var(--panel)}
.done > .ck,.done .ck{background:#16a34a;border-color:#16a34a}
.done > .ck::after,.done .ck::after{content:"✓"}
.side-sec li a.done .lt{color:var(--muted)}
.side-note{font-size:12.5px;color:var(--muted);margin:10px 8px 4px}

.crumbs{font-size:13.5px;color:var(--muted);margin-bottom:10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}

.page-head{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(18px,3vw,30px);
  box-shadow:var(--shadow);position:relative;overflow:hidden}
.page-head::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--lc,var(--accent))}
.page-head h1{font-size:clamp(26px,3.6vw,38px);font-weight:800;margin:8px 0 8px}
.page-head p{color:var(--muted);margin:0;max-width:70ch}
.page-head .chip-row{margin-top:14px}
.page-head.tinted{background:linear-gradient(135deg,color-mix(in srgb,var(--lc,var(--accent)) 14%,var(--panel)) 0%,var(--panel) 70%)}
.head-row{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between}
.head-progress{min-width:min(100%,260px);flex:1;max-width:360px}
.head-progress .hp-top{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted);margin-bottom:6px}
.head-progress .hp-top strong{color:var(--ink)}

.sec-card{display:flex;flex-direction:column;gap:10px;color:inherit;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.sec-card:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.sec-card .sc-top{display:flex;align-items:center;gap:12px}
.sec-card .ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-size:22px}
.sec-title{font-size:18px;font-weight:750;flex:1}
.sec-intro{font-size:14.5px;color:var(--muted)}
.sec-list{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:6px}
.sec-list li{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.sec-foot{margin-top:auto;display:grid;gap:8px;font-size:13px;color:var(--muted)}
.sec-foot .sf-row{display:flex;justify-content:space-between;align-items:center}

ol.lessons{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media(min-width:1100px){ol.lessons.cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
ol.lessons > li{display:flex}
a.lesson{flex:1;display:flex;align-items:flex-start;gap:14px;color:inherit;padding:16px 18px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
a.lesson:hover{text-decoration:none;border-color:var(--accent);box-shadow:var(--shadow-lg);transform:translateY(-1px)}
a.lesson .ln{flex:none;width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);
  font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
a.lesson .lb{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
a.lesson .lb strong{font-size:16px;line-height:1.3;overflow-wrap:anywhere}
a.lesson .lb .ls{font-size:14px;color:var(--muted);line-height:1.5}
a.lesson .lb .chip-row{margin-top:4px}
a.lesson.done{border-color:var(--ok-line)}
a.lesson.done .ln{background:var(--ok-bg);color:var(--ok)}
a.lesson .ck{width:24px;height:24px;font-size:12px}
@media(max-width:479px){a.lesson{gap:10px;padding:14px}a.lesson .ln{width:28px;height:28px;font-size:13px}}

.split{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:minmax(0,1fr)}
@media(min-width:1180px){.split{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:start}
  .split .aside{position:sticky;top:calc(var(--header-h) + 16px)}}
.reading p{font-size:clamp(16.5px,1.7vw,18px);line-height:1.8;margin:0 0 16px;max-width:70ch;color:var(--ink)}
.reading p:last-child{margin-bottom:0}
.reading p:first-child::first-letter{font-size:2.6em;float:left;line-height:.9;margin:6px 8px 0 0;font-weight:800;color:var(--accent)}
.aside h3{font-size:16px;margin:0 0 10px}
dl.gloss{margin:0;display:grid}
dl.gloss div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:14.5px}
dl.gloss div:first-child{border-top:0}
dl.gloss dt{font-weight:650}
dl.gloss dd{margin:0;color:var(--accent);text-align:right}

.complete{display:flex;gap:16px;align-items:flex-start;border-left:5px solid var(--accent)}
.complete .cp-ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--accent-soft);display:flex;align-items:center;
  justify-content:center;font-size:22px}
.complete .cp-body{flex:1;min-width:0}
.complete .cp-body p{margin:0 0 4px}
.complete .btn{margin-top:10px}
.complete.done{border-left-color:#16a34a;background:var(--ok-bg);border-color:var(--ok-line)}
.complete.done .cp-ic{background:#16a34a;color:#fff}
.xlink{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;background:var(--panel-2);
  border:1px dashed var(--line-2);border-radius:var(--radius);padding:14px 18px;font-size:14.5px;color:var(--ink-2)}

.pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:clamp(22px,3vw,32px) 0 0}
.pager a{display:flex;flex-direction:column;gap:2px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);color:inherit;box-shadow:var(--shadow-sm);transition:border-color .15s ease,box-shadow .15s ease}
.pager a:hover{text-decoration:none;border-color:var(--accent);box-shadow:var(--shadow)}
.pager a span{font-size:12.5px;font-weight:650;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.pager a strong{font-size:15px}
.pager a.next{text-align:right}
@media(max-width:559px){.pager{grid-template-columns:1fr}.pager a.next{text-align:left}.pager > span{display:none}}

/* ==========================================================================
   Account pages
   ========================================================================== */
.hero.profile{display:flex;align-items:center;gap:18px}
.hero.profile h1{margin-bottom:4px}
.avatar{border-radius:50%;flex:none;box-shadow:0 0 0 4px var(--panel),0 0 0 6px var(--accent-soft)}
.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm)}
.tile .tv{font-size:28px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tile .tl{font-size:13px;color:var(--muted)}
.lp{padding:12px 0;border-top:1px solid var(--line)}
.lp:first-child{border-top:0;padding-top:0}
.lph{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin-bottom:8px}
.lph strong{color:var(--ink)}
details.wl{margin-top:12px}
details.wl summary{cursor:pointer;font-weight:700}
.wr{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.wt{color:var(--accent);margin-left:8px}
.wm{font-size:13px;color:var(--muted)}
table.act{border-collapse:collapse;width:100%;font-size:14px}
table.act th,table.act td{text-align:left;padding:9px 12px;border-top:1px solid var(--line);white-space:nowrap}
table.act th{color:var(--muted);font-weight:650;border-top:0;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em}
table.act tbody tr:hover{background:var(--panel-2)}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chip{font-size:14px;font-weight:650;padding:7px 14px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);background:var(--panel)}
.chip[aria-current="page"]{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent-ink)}
.chip:hover{text-decoration:none;border-color:var(--accent)}
.focus-col{max-width:760px;margin-left:auto;margin-right:auto}
.flash{text-align:center;padding:clamp(24px,5vw,40px) clamp(16px,4vw,28px)}
.flash .fw{font-size:clamp(28px,5vw,40px);font-weight:800;letter-spacing:-.02em}
.flash .fp{color:var(--muted);margin-top:4px}
.flash .ft{font-size:21px;font-weight:650;color:var(--accent);margin-top:18px}
.flash ul{text-align:left;max-width:520px;margin:14px auto 0;color:var(--ink-2)}
.flash .fb{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.flash .fb .btn{min-width:150px}

.lc-a1{--lc:#10b981}
.lc-a2{--lc:#3b82f6}
.lc-b1{--lc:#f59e0b}
.lc-b2{--lc:#ef4444}
.gl-a1{--gc:#10b981}
.lv-a1{background:#10b981}
.gl-a2{--gc:#3b82f6}
.lv-a2{background:#3b82f6}
.gl-b1{--gc:#f59e0b}
.lv-b1{background:#f59e0b}
.gl-b2{--gc:#ef4444}
.lv-b2{background:#ef4444}
.w0{width:0%}.w1{width:1%}.w2{width:2%}.w3{width:3%}.w4{width:4%}.w5{width:5%}.w6{width:6%}.w7{width:7%}.w8{width:8%}.w9{width:9%}.w10{width:10%}.w11{width:11%}.w12{width:12%}.w13{width:13%}.w14{width:14%}.w15{width:15%}.w16{width:16%}.w17{width:17%}.w18{width:18%}.w19{width:19%}.w20{width:20%}.w21{width:21%}.w22{width:22%}.w23{width:23%}.w24{width:24%}.w25{width:25%}.w26{width:26%}.w27{width:27%}.w28{width:28%}.w29{width:29%}.w30{width:30%}.w31{width:31%}.w32{width:32%}.w33{width:33%}.w34{width:34%}.w35{width:35%}.w36{width:36%}.w37{width:37%}.w38{width:38%}.w39{width:39%}.w40{width:40%}.w41{width:41%}.w42{width:42%}.w43{width:43%}.w44{width:44%}.w45{width:45%}.w46{width:46%}.w47{width:47%}.w48{width:48%}.w49{width:49%}.w50{width:50%}.w51{width:51%}.w52{width:52%}.w53{width:53%}.w54{width:54%}.w55{width:55%}.w56{width:56%}.w57{width:57%}.w58{width:58%}.w59{width:59%}.w60{width:60%}.w61{width:61%}.w62{width:62%}.w63{width:63%}.w64{width:64%}.w65{width:65%}.w66{width:66%}.w67{width:67%}.w68{width:68%}.w69{width:69%}.w70{width:70%}.w71{width:71%}.w72{width:72%}.w73{width:73%}.w74{width:74%}.w75{width:75%}.w76{width:76%}.w77{width:77%}.w78{width:78%}.w79{width:79%}.w80{width:80%}.w81{width:81%}.w82{width:82%}.w83{width:83%}.w84{width:84%}.w85{width:85%}.w86{width:86%}.w87{width:87%}.w88{width:88%}.w89{width:89%}.w90{width:90%}.w91{width:91%}.w92{width:92%}.w93{width:93%}.w94{width:94%}.w95{width:95%}.w96{width:96%}.w97{width:97%}.w98{width:98%}.w99{width:99%}.w100{width:100%}