/* Literata, SIL Open Font License 1.1, self-hosted (no requests to Google) */
@font-face{font-family:"Literata";font-style:italic;font-weight:400 600;font-display:swap;src:url(assets/fonts/literata-italic-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"Literata";font-style:italic;font-weight:400 600;font-display:swap;src:url(assets/fonts/literata-italic-cyrillic.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Literata";font-style:italic;font-weight:400 600;font-display:swap;src:url(assets/fonts/literata-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Literata";font-style:italic;font-weight:400 600;font-display:swap;src:url(assets/fonts/literata-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Literata";font-style:normal;font-weight:400 600;font-display:swap;src:url(assets/fonts/literata-regular-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"Literata";font-style:normal;font-weight:400 600;font-display:swap;src:url(assets/fonts/literata-regular-cyrillic.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Literata";font-style:normal;font-weight:400 600;font-display:swap;src:url(assets/fonts/literata-regular-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Literata";font-style:normal;font-weight:400 600;font-display:swap;src:url(assets/fonts/literata-regular-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --paper:#F8F5ED; --paper-2:#F1ECDF; --ink:#0A1D16; --ink-2:#3A4A42; --green:#173F32; --green-2:#2E6B4F; --green-3:#34A853;
  --copper:#B8733D; --sage:#E2EEE0; --sage-2:#BACCC2; --tan:#EDB992; --tan-2:#F6E3D0;
  --blue:#2A63AA; --blue-2:#DCE8F7; --orange:#E07A2F; --orange-2:#FBE3D1; --violet:#7C4DFF; --violet-2:#EBE4FF; --red:#D64545;
  --serif:"Literata",Georgia,"Times New Roman",serif; --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:clamp(46px,6vw,84px); --h2:clamp(32px,3.6vw,52px); --h3:24px; --lead:21px; --body:18px; --ui:15px; --small:13px;
  --r:12px; --m:clamp(16px,4vw,48px); --w:1200px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --shadow:none; --float:0 12px 32px -16px rgba(10,29,22,.45);
  /* colour layer: the site has one theme, dark */
  color-scheme:dark;
  --bg:#0E211A; --bg-2:#142A22; --card:#182F27; --card-2:#0F221B; --deep:#07130E; --nav:rgba(14,33,26,.86);
  --fg:#F3F0E8; --fg-2:#B5C3BA; --on-deep:#F3F0E8; --on-deep-2:#A9BBB0;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.2); --track:rgba(255,255,255,.12); --edge:rgba(255,255,255,.07);
  --sec-g:#143027; --sec-c:#2B1F16; --t-g:#1F4536; --t-g-fg:#9FE0B4; --t-c:#4A3220; --t-c-fg:#F2C09A;
  --acc-green:#9FE0B4; --acc-copper:#EAB58C; --copper-hi:#EAB58C;
  --btn:#F3F0E8; --btn-fg:#0A1D16; --btn-hover:#fff; --next:#2E6B4F; --bar6:#2E6B4F;
  --mk-g:#9FE0B4; --mk-b:#8FBBF2; --mk-v:#C9B8EA;
  /* the app's overview card and score steps (overviewTheme.ts, ResultTokens.module.css), dark set */
  --ov-kick:#9FE0B4; --ov-plan:#173A2E; --ov-plan-line:rgba(159,224,180,.3); --cta:#32634D;
  --wt:#1F4536; --wt-line:#2F6B52; --wt-ink:#D7F5E3; --wp:#3A3220; --wp-line:#6B5A2A; --wp-ink:#F6E3B0;
  --st-good:#32634D; --st-good-fg:#F1FAF4; --st-mid:#253A31; --st-mid-fg:#C4E4CD; --st-mid-line:#36553F; --st-low:#3A342A; --st-low-fg:#E8DCC2; --st-low-line:#4D4535; --st-fail:#45292B; --st-fail-fg:#F2C6C2; --st-fail-line:#5E3739;
  --blue:#7FAEEA; --blue-2:#1C3350; --orange:#F0914A; --orange-2:#4A2A17; --violet:#AE9BFF; --violet-2:#2E2650; --green-3:#4CC46A;
  --float:0 12px 32px -14px rgba(0,0,0,.8);
  --band:var(--deep); --band-fg:var(--on-deep); --band-fg-2:var(--on-deep-2); --band-link:#9FE0B4; --band-copper:var(--tan);
  --band-tint:rgba(255,255,255,.08); --band-tint-2:rgba(255,255,255,.14); --band-line:rgba(255,255,255,.12); --band-card:rgba(255,255,255,.08); --foot:color-mix(in srgb,var(--deep) 84%,#000); --foot-line:transparent;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--serif);font-size:var(--body);line-height:1.55;font-kerning:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--sage);color:var(--ink)}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:.07em}
button,input{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;line-height:1.08;text-wrap:balance;hyphens:none}
h1{font-size:var(--display);letter-spacing:-.025em;line-height:1}
h2{font-size:var(--h2)}
h3{font-size:var(--h3);line-height:1.25}
em{font-style:italic}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--m)}
.lead{font-size:var(--lead);line-height:1.4;color:var(--fg);max-width:42ch;text-wrap:pretty}
.muted{color:var(--fg-2)}
/* UI chrome and product fragments keep the app's sans */
nav,.btn,.facts,.chip,.pills,.lv,.key,.pill,.tabs,.cat,.meta,.more,.std table,.lvstats,.totals span,.levels,.app,.rule,.mk,.side,.ziel,.cls,.box,.legal,.credits,.menu{font-family:var(--sans)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:10px;background:var(--btn);color:var(--btn-fg);font-size:16px;font-weight:600;letter-spacing:-.01em;text-decoration:none;border:0;cursor:pointer;transition:transform .16s var(--ease-out),background .2s ease}
.btn:hover{background:var(--btn-hover)}
.btn:active{transform:scale(.98)}
.btn.light{background:var(--card);color:var(--fg)}
.btn.light:hover{background:var(--bg-2)}
.btn.copper{background:#9A5C2A;color:#fff}
.btn.copper:hover{background:#7F4B21}
.ic{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.s{width:18px;height:18px}
.dot{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none}
.dot.g{background:var(--t-g);color:var(--t-g-fg)}
.dot.c{background:var(--t-c);color:var(--t-c-fg)}
.dot.b{background:var(--blue-2);color:var(--blue)}
.dot.o{background:var(--orange-2);color:var(--orange)}
.dot.v{background:var(--violet-2);color:var(--violet)}
.dot.k{background:var(--deep);color:var(--on-deep)}
.dot.sq{border-radius:14px}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.on{opacity:1;transform:none}
section{padding:clamp(72px,10vh,120px) 0}
.head2{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-bottom:48px}
.head2 h2{max-width:18ch}

/* nav */
nav{position:sticky;top:0;z-index:20;background:var(--nav);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--serif);font-size:24px;font-weight:500;letter-spacing:-.02em;color:var(--fg)}
.brand img{width:44px;height:38px;object-fit:cover}
nav .wrap>ul{display:flex;gap:32px;list-style:none;font-weight:500;font-size:var(--ui)}
nav .wrap>ul a{text-decoration:none;color:var(--fg-2)}
nav .wrap>ul a:hover,nav .wrap>ul a[aria-current]{color:var(--fg)}
nav .wrap>ul a[aria-current]{text-decoration:underline;text-underline-offset:.4em;text-decoration-color:var(--copper)}
nav .btn{min-height:44px;padding:0 20px}
nav .navr{display:flex;align-items:center;gap:14px}
.menu{display:none;width:44px;height:44px;border-radius:10px;border:0;background:var(--bg-2);color:var(--fg);align-items:center;justify-content:center;cursor:pointer;padding:0}
.menu .ic{width:22px;height:22px}
nav.open .menu{background:var(--fg);color:var(--bg)}
/* language menu, injected by build.mjs */
.lang{position:relative;font-family:var(--sans);font-size:var(--ui)}
.lang summary{list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 11px 0 14px;border:1px solid var(--acc-copper);border-radius:999px;color:var(--fg);font-weight:500;cursor:pointer;user-select:none;transition:background .2s var(--ease-out)}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover,.lang[open] summary{background:var(--t-c)}
.lang summary .ic{color:var(--acc-copper);transition:transform .2s var(--ease-out)}
.lang[open] summary .ic{transform:rotate(180deg)}
.lang summary .short{display:none}
.lang ul{display:block;position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:168px;margin:0;padding:6px;list-style:none;background:var(--card);border:1px solid var(--line-2);border-radius:14px}
.lang[open] ul{box-shadow:var(--float)}
.lang li a{display:block;padding:9px 12px;border-radius:9px;color:var(--fg);font-weight:500;text-decoration:none;transition:background .15s var(--ease-out)}
.lang li a:hover{background:var(--bg-2)}
.lang li a[aria-current]{background:var(--t-c);color:var(--t-c-fg)}
.consent{margin-top:12px;font-size:14px;line-height:1.5;color:var(--fg-2)}
.join .box .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.join .box .msg{margin:0;font-size:var(--ui);line-height:1.5;color:var(--fg);min-height:0}
.join .box .msg:empty{display:none}
.join .box .msg.err{color:var(--red)}
.join .box form.busy .btn{opacity:.7;pointer-events:none}
.join .box .consent{margin-top:0}
.consent a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
.legal-page .prose{max-width:70ch}
.ahead.legal h1{font-size:clamp(34px,4.6vw,66px)}
.confirmed{min-height:60vh}
.confirmed .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.legal-page .prose h2{font-size:var(--lead);margin-top:34px;scroll-margin-top:96px}
/* Chinese pages: CJK serif beside Literata, no tight tracking */
html[lang="zh"]{--serif:"Literata","Songti SC","Noto Serif CJK SC","Source Han Serif SC","SimSun",serif}
html[lang="zh"] body{line-height:1.75}
html[lang="zh"] :is(h1,h2,h3,.lead){letter-spacing:0}

/* hero (home) */
.hero{padding:clamp(40px,7vh,88px) 0 0;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero h1 .l{display:block;overflow:hidden}
.hero h1 .l>span{display:block;transform:translateY(110%);animation:rise .9s var(--ease-out) forwards}
.hero h1 .l:nth-child(2)>span{animation-delay:.1s}
.hero h1 .no{color:var(--copper-hi);position:relative;display:inline-block;letter-spacing:-.02em;line-height:1}
.hero h1 .no::after{content:"";position:absolute;left:-.04em;right:-.04em;top:54%;height:.06em;background:var(--copper-hi);transform:scaleX(0);transform-origin:left;animation:strike .6s var(--ease-out) .9s forwards}
.hero .lead{margin:28px 0 32px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.facts{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px;font-size:var(--ui);font-weight:500;color:var(--fg-2)}
.facts span{display:inline-flex;align-items:center;gap:8px}
.flag{width:16px;height:16px;border-radius:3px;background:#E3242B;position:relative;flex:none}
.flag::before,.flag::after{content:"";position:absolute;background:#fff;left:50%;top:50%;transform:translate(-50%,-50%)}
.flag::before{width:10px;height:3px}.flag::after{width:3px;height:10px}
.fade{opacity:0;animation:fade .8s var(--ease-out) .5s forwards}
.stage{position:relative;padding:36px 0 24px}
@keyframes rise{to{transform:none}}
@keyframes fade{to{opacity:1}}
@keyframes strike{to{transform:scaleX(1)}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

/* ---------- product visuals: HTML fragments in the app's own language (data-ui) ---------- */
.app{position:relative;z-index:1;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;width:min(460px,100%);margin:0 auto;font-size:var(--ui);line-height:1.35;color:var(--fg)}
.lab{display:block;font-size:var(--small);line-height:1.3;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--t-g-fg)}
.pcard{position:relative;background:var(--t-g);border:1px solid color-mix(in srgb,var(--t-g-fg) 22%,transparent);border-radius:12px;padding:12px 14px}
.pcard .ph{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pcard .big{font-size:28px;font-weight:700;color:var(--t-g-fg);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.pcard .pl{display:grid;gap:3px;margin-top:8px;color:var(--fg-2);font-variant-numeric:tabular-nums}
.pcard .pl b{color:var(--fg);font-weight:700}
.pcard .pn{margin-top:6px;font-size:var(--small);color:var(--acc-copper);font-weight:500}
.rings{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.stage .rings{margin-top:38px}
.ring{background:var(--card-2);border-radius:12px;padding:12px 6px 10px;text-align:center}
.ring .dial{position:relative;width:62px;height:62px;margin:0 auto 6px}
.ring svg{width:100%;height:100%;display:block;transform:rotate(-90deg);overflow:visible}
.ring circle{fill:none;stroke-width:6;r:20px;cx:24px;cy:24px}
.ring .bg{stroke:color-mix(in srgb,var(--c) 16%,transparent)}
.ring .fg{stroke:var(--c);stroke-linecap:round;stroke-dasharray:125.66;stroke-dashoffset:calc(125.66 - var(--p) * 1.2566);animation:dial 1.4s var(--ease-out) .5s both}
@keyframes dial{from{stroke-dashoffset:125.66}}
.ring .dial b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--small);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ring span{display:block;font-size:var(--small);color:var(--fg-2);font-weight:500}
.ring em{display:inline-block;margin-top:5px;font-style:normal;font-size:var(--small);line-height:18px;font-weight:700;color:var(--t-g-fg);background:var(--t-g);border-radius:999px;padding:1px 7px}
.blk{position:relative;margin-top:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px}
.app>.blk:first-child{margin-top:0}
.blk .bh{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:var(--ui);padding:8px 10px 4px}
.blk .bh a{font-size:var(--small);color:var(--t-g-fg);text-decoration:none;font-weight:600}
.blk ol,.blk ul{list-style:none}
.blk li{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:9px}
.blk li i{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:var(--small);flex:none}
.blk li i.o{background:var(--orange-2);color:var(--orange)}.blk li i.v{background:var(--violet-2);color:var(--mk-v)}.blk li i.b{background:var(--blue-2);color:var(--blue)}.blk li i.g{background:var(--t-g);color:var(--acc-green)}
.blk li div{flex:1;min-width:0}
.blk li b{display:block;font-weight:600;font-size:var(--ui)}
.blk li span{font-size:var(--small);color:var(--fg-2)}
.blk li .chev{width:14px;height:14px;color:var(--fg-2);stroke-width:2.4;flex:none}
.next{position:relative;margin-top:10px;background:var(--next);color:#fff;border-radius:12px;padding:13px 16px;font-weight:700;font-size:16px;letter-spacing:-.01em;text-align:center}
.stage .blk{margin-top:30px}
.stage .next{margin-top:28px}
.chip{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:10px;line-height:1.2;color:var(--fg);background:var(--card);border-radius:999px;padding:8px 14px 8px 8px;font-weight:600;font-size:var(--ui);box-shadow:var(--float);opacity:0;animation:pop .6s var(--ease-out) forwards}
.chip .dot{width:32px;height:32px}
.chip .dot .ic{width:16px;height:16px}
.chip small{display:block;font-size:var(--small);font-weight:500;color:var(--fg-2)}
.chip.c1{left:-30px;top:-36px;animation-delay:1.1s}
.chip.c2{right:-26px;bottom:-38px;animation-delay:1.3s}
.chip.c3{right:-26px;top:-36px;animation-delay:1.5s}
/* hero: the app's overview card: unit header, what holds you back, the next step (Nit 11-05: no plan shares, one chip) */
.ovw .ovc{padding:6px 8px 14px}
.ovk{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ov-kick)}
.ovt2{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-top:6px}
.ovs{margin-top:6px;color:var(--fg-2)}
.plan{position:relative;margin-top:10px;background:var(--ov-plan);border:1px solid var(--ov-plan-line);border-radius:12px;padding:12px 14px}
.plan .lab{color:var(--ov-kick);font-size:12px;letter-spacing:.12em}
.plan dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 20px;margin-top:8px}
.plan dl div{display:flex;justify-content:space-between;gap:8px;font-weight:600}
.plan dd{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:420px){.plan dl{gap:6px 12px}.plan dl div{font-size:14px}}
@media (max-width:360px){.plan dl{grid-template-columns:minmax(0,1fr)}}
.blk.clean{background:none;border:0;padding:0}
.stage .blk.clean{margin-top:64px}
.stage .blk.clean .chip.c1{top:-60px}
.blk.clean .bh{font-size:18px;font-weight:800;padding:4px 6px 4px}
.blk.clean .bh a{color:var(--ov-kick);font-size:var(--ui)}
.blk.clean li{border-radius:0;padding:10px 6px}
.blk.clean li+li{box-shadow:0 -1px 0 var(--line)} /* taste-skill-ignore: app UI inside data-ui mocks */
.blk.clean li b{font-weight:700}
.blk li i.s1{background:var(--st-fail);color:var(--st-fail-fg);box-shadow:inset 0 0 0 1px var(--st-fail-line)}
.blk li i.s2{background:var(--st-low);color:var(--st-low-fg);box-shadow:inset 0 0 0 1px var(--st-low-line)}
.next.clean{background:var(--cta);border-radius:14px}
/* a rule or a learning goal: the app's box with the green edge */
.ziel{background:var(--t-g);border-left:4px solid var(--t-g-fg);border-radius:12px;padding:12px 14px}
.ziel p{font-size:16px;font-weight:600;line-height:1.45;margin:5px 0 2px}
.ziel>span{display:block;font-size:var(--small);color:var(--fg-2)}
.ziel .key{margin-top:8px}
.rule{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;font-size:var(--ui);line-height:1.4;color:var(--fg)}
.rule .rh{display:flex;justify-content:space-between;align-items:center;gap:10px}
.rule .rh .ic{color:var(--t-g-fg)}
.rule .t{font-weight:500;margin:8px 0 12px}
.rule .ziel{margin-bottom:8px}
/* grammar legend: the term is coloured and underlined, the way a textbook marks it; the tokens keep mark readable in every theme */
mark{background:transparent;color:var(--mk-g);font-weight:500;text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:.09em;text-underline-offset:.14em;border-radius:0;padding:0}
mark.b{color:var(--mk-b)}
mark.v{color:var(--mk-v)}
.key{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:var(--small);font-weight:500;color:var(--fg-2);margin-top:10px}
.key i{display:inline-block;width:18px;height:3px;border-radius:2px;margin-right:7px;vertical-align:.25em}
.key i.g{background:var(--mk-g)}.key i.b{background:var(--mk-b)}.key i.v{background:var(--mk-v)}
/* the unit sidebar */
.side .sh{display:flex;justify-content:space-between;align-items:center;font-size:var(--small);letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--fg-2);padding:2px 2px 10px}
.side .sh .ic{width:16px;height:16px;transform:rotate(180deg)}
.side .lbl{font-size:var(--small);font-weight:700;color:var(--fg-2);margin:2px 0 4px 2px}
.side .sel{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line-2);border-radius:10px;padding:9px 12px;font-size:16px;font-weight:500;background:var(--card-2)}
.side .sel .ic{width:16px;height:16px;color:var(--fg-2)}
.side .sub{display:flex;justify-content:space-between;align-items:center;font-size:var(--small);color:var(--fg-2);margin:8px 2px 8px}
.side .sub span{display:inline-flex;align-items:center;gap:6px}
.side .sub .ic{width:12px;height:12px;fill:currentColor;stroke:none}
.ulist{list-style:none}
.ulist li{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;font-weight:600;font-size:16px}
.ulist li>.ic{width:14px;height:14px;color:var(--fg-2);stroke-width:2.4;flex:none}
.ulist li.plain{font-weight:400;padding-left:34px}
.ulist li.on{background:var(--t-g);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t-g-fg) 30%,transparent);font-weight:700}
.ulist li .r{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-weight:400;font-size:var(--small);color:var(--fg-2);white-space:nowrap}
.pf{display:inline-block;font-size:var(--small);line-height:1.2;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--t-c);color:var(--t-c-fg)}
.pf.o{background:var(--track);color:var(--fg-2)}
.mt{font-size:var(--lead);font-weight:700;letter-spacing:-.01em;margin:8px 0 10px;line-height:1.2}

/* level strip */
.levels{padding:18px 0;background:var(--bg-2)}
.levels .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lv{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:var(--ui)}
.lv i{width:28px;height:28px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:var(--small);font-weight:600;color:#0A1D16;font-style:normal}
.lv:nth-child(1) i{background:#EADFCB}.lv:nth-child(2) i{background:#E2CDB1}.lv:nth-child(3) i{background:#D9B48E}.lv:nth-child(4) i{background:#CC9A6C}.lv:nth-child(5) i{background:var(--copper);color:#fff}.lv:nth-child(6) i{background:var(--bar6);color:#fff}

/* for you if */
.foryou{background:var(--sec-g)}
.foryou .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.foryou ul{list-style:none;margin-top:36px;display:grid;gap:22px}
.foryou ul+p{margin-top:28px;color:var(--fg-2)}
.foryou li{display:flex;gap:18px;align-items:center;font-size:var(--lead);font-weight:500;line-height:1.35;letter-spacing:-.01em;text-wrap:pretty}
.foryou img{border-radius:var(--r);aspect-ratio:4/3;object-fit:cover;width:100%}

/* two panels */
.panels h2{max-width:24ch;margin-bottom:40px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.panel{border-radius:var(--r);padding:40px;display:flex;flex-direction:column;position:relative}
.panel.tan{background:var(--sec-c)}
.panel.sage{background:var(--sec-g)}
.panel.paper{background:var(--bg-2)}
.panel .dot{margin-bottom:18px}
.panel h3{font-size:28px;max-width:14ch}
.panel p.d{margin-top:10px;max-width:34ch;color:var(--fg)}
.panel .art{margin-top:32px;flex:1;display:flex;align-items:flex-start}
.panel .art>*{width:100%}

/* engine */
.path{position:relative;padding-top:70px}
.path svg.loop{color:var(--copper-hi);position:absolute;left:0;right:0;top:0;width:100%;height:80px;overflow:visible}
.steps{display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.steps::before{content:"";position:absolute;left:10%;right:10%;top:34px;height:2px;background:var(--line-2)}
.step{text-align:center;padding:0 12px;position:relative}
.step .n{width:70px;height:70px;border-radius:50%;background:var(--t-c);color:var(--t-c-fg);display:inline-flex;align-items:center;justify-content:center;position:relative}
.step .n .ic{width:26px;height:26px}
.step .n b{position:absolute;right:-6px;top:-6px;width:24px;height:24px;border-radius:50%;background:var(--copper);color:#fff;font-family:var(--serif);font-size:var(--small);font-weight:600;display:flex;align-items:center;justify-content:center}
.step{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background:none;border:0;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:16px}
.step:focus-visible{outline:2px solid var(--copper);outline-offset:4px}
.step .n{transition:background .3s,color .3s,transform .5s var(--ease-out)}
.step.on .n{background:var(--copper);color:#fff;transform:scale(1.08)}
.step.on .n b{background:#fff;color:var(--copper)}
.step .t{display:block;margin-top:18px;font-family:var(--serif);font-weight:500;font-size:var(--lead);line-height:1.1;letter-spacing:-.02em;color:var(--fg)}
.step .d{display:block;color:var(--fg-2);margin-top:6px;font-size:16px;max-width:20ch;margin-inline:auto}
.step .pb{display:block;height:3px;border-radius:2px;background:var(--line-2);margin:14px auto 0;width:96px;overflow:hidden;opacity:0;transition:opacity .3s}
.step.on .pb{opacity:1}
.step .pb i{display:block;height:100%;background:var(--copper);transform-origin:left;transform:scaleX(0)}
.step.on .pb i{animation:pb var(--sf-dur,5.2s) linear forwards}
.engine.manual .pb{display:none}
@keyframes pb{to{transform:scaleX(1)}}
.loopl{position:absolute;left:50%;top:-6px;transform:translateX(-50%);font-family:var(--serif);font-style:italic;color:var(--copper-hi);font-size:var(--lead);background:var(--bg);padding:0 14px;white-space:nowrap}

/* cefr numbers */
.cefr{background:var(--bg-2)}
.cefr{padding-block:clamp(56px,7vh,80px)}
.cefr .top{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:end;margin-bottom:32px}
.cefr h2{max-width:22ch}
.totals{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.totals span{background:var(--card);border-radius:var(--r);padding:14px 16px;font-weight:500;font-size:var(--ui);color:var(--fg-2);display:block;line-height:1.2}
.totals b{font-family:var(--serif);font-size:28px;font-weight:600;color:var(--fg);line-height:1;margin-right:6px;font-variant-numeric:tabular-nums}
.bars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;align-items:end;height:280px;padding-left:132px}
.bars .bar{margin:0 6px}
.bar{border-radius:14px 14px 10px 10px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:0 6px 14px;color:#0A1D16;text-align:center;transition:transform .3s var(--ease-out)}
.bar:hover{transform:translateY(-4px)}
.bar b{font-family:var(--serif);font-size:28px;font-weight:600;display:block}
.bar span{font-size:13px;font-weight:600;display:block;margin-top:2px}
.bar:nth-child(1){height:34%;background:#EADFCB}.bar:nth-child(2){height:46%;background:#E2CDB1}.bar:nth-child(3){height:58%;background:#D9B48E}.bar:nth-child(4){height:70%;background:#CC9A6C}.bar:nth-child(5){height:84%;background:var(--copper)}.bar:nth-child(6){height:100%;background:var(--bar6);color:#fff}
.lvstats{width:100%;table-layout:fixed;margin-top:12px;background:var(--card);border-radius:var(--r);border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
.lvstats th,.lvstats td{padding:9px 6px;border-top:1px solid var(--line)}
.lvstats tr:first-child th,.lvstats tr:first-child td{border-top:0}
.lvstats th{width:132px;text-align:left;padding-left:14px;font-size:var(--ui);font-weight:600;color:var(--fg-2);white-space:nowrap}
.lvstats th .ic{width:16px;height:16px;vertical-align:-3px;margin-right:8px;color:var(--acc-copper)}
.lvstats td{text-align:center;font-family:var(--serif);font-size:var(--lead);font-weight:600;line-height:1.1}
.lvstats tr.sub td{font-family:var(--sans);font-size:16px;font-weight:600}

/* three depths of knowing: a glossary list, not a card row */
.depths{display:grid}
.depth{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px 48px;align-items:start;padding:30px 0}
.depth .dh h3{display:flex;align-items:center;gap:14px;font-size:28px}
.depth .dh p{margin-top:10px;color:var(--fg-2);max-width:30ch}
.depth dl{display:grid;gap:16px;margin:0}
.depth dl>div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;align-items:baseline}
.depth dt{font-family:var(--sans);font-size:var(--ui);font-weight:700;color:var(--acc-green)}
.depth dd{margin:0;text-wrap:pretty}
.depth dd small{display:block;font-size:var(--ui);color:var(--fg-2);margin-top:3px}
.fw .key{justify-content:center;margin-top:22px}

/* standard table */
.std{background:var(--green);color:var(--paper)}
.std .lead{color:var(--sage-2)}
.std table{width:100%;border-collapse:separate;border-spacing:0;background:rgba(255,255,255,.04);border-radius:var(--r);overflow:hidden}
.std th,.std td{padding:20px 18px;text-align:center;border-bottom:1px solid rgba(248,245,237,.14);font-size:16px}
.std th{font-weight:600;color:#CBD8CF;font-size:15px}
.std tbody th{text-align:left;color:var(--paper);font-weight:600}
.std tr:last-child td,.std tr:last-child th{border-bottom:0}
.std .mp{background:rgba(248,245,237,.12)}
.std thead .mp{background:var(--paper);color:var(--green);font-family:var(--serif);font-size:var(--lead);font-weight:600}
.std td .ic{width:20px;height:20px;vertical-align:-5px;margin-right:6px}
.std td{font-weight:500}
.std .no{color:#F4B6A4}.std .so{color:#F5E0B6}.std .yes{color:#B6F0C8;font-weight:600}
.std td .ic{stroke-width:2.2}
.std .mp .yes{color:#fff}

/* ideas: labs + blog teaser */
.ideas3{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ideas3 .post.dark{grid-column:1/-1;flex-direction:row;align-items:center;gap:24px;padding:22px 28px}
.ideas3 .post.dark .cover{width:72px;height:72px;border-radius:14px;flex:none}
.ideas3 .post.dark .cover .ic{width:30px;height:30px}
.ideas3 .post.dark .body{flex-direction:row;align-items:center;gap:28px;padding:0;flex:1}
.ideas3 .post.dark h3{flex:0 1 34%}
.ideas3 .post.dark p{flex:1}
.ideas3 .post.dark .more{margin:0;padding:0;white-space:nowrap}
.post{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r);overflow:hidden;text-decoration:none;transition:transform .3s var(--ease-out)}
.post:hover{transform:translateY(-3px)}
.post .cover{height:150px;display:flex;align-items:center;justify-content:center}
.post .cover .ic{width:44px;height:44px;stroke-width:1.6}
.post .cover.g{background:var(--t-g);color:var(--t-g-fg)}.post .cover.c{background:var(--t-c);color:var(--t-c-fg)}.post .cover.b{background:var(--blue-2);color:var(--blue)}.post .cover.v{background:var(--violet-2);color:var(--violet)}.post .cover.k{background:var(--deep);color:var(--on-deep)}
.post .body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px;flex:1}
.post .cat{font-size:var(--small);font-weight:700;color:var(--acc-copper)}
.post h3{font-size:var(--lead)}
.post p{color:var(--fg-2);font-size:16px}
.post .more{margin-top:auto;padding-top:10px;display:inline-flex;gap:8px;align-items:center;font-weight:600;font-size:var(--ui);color:var(--acc-green)}
.post.dark{background:var(--band);color:var(--band-fg);border-color:rgba(255,255,255,.1)}
.post.dark p{color:var(--band-fg-2)}.post.dark .more{color:var(--band-link)}.post.dark .cat{color:var(--band-copper)}

/* founder + schools */
.people{background:var(--bg-2)}
.people .wrap{display:grid;grid-template-columns:1fr;gap:24px}
.quote{background:var(--card);border-radius:var(--r);padding:40px;display:grid;grid-template-columns:260px 1fr;gap:36px;align-items:center}
.quote img{width:260px;height:260px;object-fit:cover;border-radius:14px}
.quote blockquote{font-family:var(--serif);font-size:var(--lead);line-height:1.35;font-style:italic;text-wrap:pretty}
.quote .who{margin-top:14px;font-size:var(--ui);color:var(--fg-2);font-family:var(--sans)}
.quote .who b{display:block;color:var(--fg);font-weight:600}
.school{border-radius:var(--r);background:var(--band);color:var(--band-fg);padding:32px;display:grid;gap:24px;align-content:start}
.school.wide{grid-template-columns:1.05fr .95fr;align-items:center;padding:40px;gap:40px}
.school h3{font-size:28px;color:var(--band-fg)}
.school p{margin:8px 0 16px;color:var(--band-fg-2);max-width:36ch}
.cls{background:var(--band-tint);border:1px solid var(--band-line);border-radius:16px;padding:12px 16px 6px;font-size:14px}
.cls .ch{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:700;font-size:15px;padding:4px 0 10px;border-bottom:1px solid var(--band-line)}
.cls .ch span{font-size:13px;font-weight:600;color:var(--band-link);white-space:nowrap}
.cls .cr{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--band-line)}
.cls .ch+.cr{border-top:0}
.cls .cr i{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:13px;flex:none}
.cls .cr i.o{background:var(--orange-2);color:var(--orange)}.cls .cr i.v{background:var(--violet-2);color:var(--violet)}.cls .cr i.b{background:var(--blue-2);color:var(--blue)}.cls .cr i.g{background:var(--t-g);color:var(--t-g-fg)}
.cls .cr div{flex:1;min-width:0}
.cls .cr b{display:block;font-weight:600}
.cls .cr span{font-size:13px;color:var(--band-fg-2)}
.cls .cr em{font-style:normal;font-weight:700;font-size:13px;background:var(--band-tint-2);border-radius:999px;padding:3px 9px;flex:none}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.pills span{display:inline-flex;align-items:center;gap:8px;background:var(--band-tint-2);border-radius:999px;padding:8px 14px;font-size:var(--ui);font-weight:600}
.pills .ic{width:16px;height:16px}

/* signup */
.join{background:var(--band);color:var(--band-fg)}
.join .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.join .lead{color:var(--band-fg-2)}
.join .box{background:var(--card);color:var(--fg);border-radius:var(--r);padding:28px;display:grid;gap:12px}
.join .box .btn.light{width:100%;background:var(--card-2)}
.join .or{text-align:center;font-size:var(--ui);color:var(--fg-2);margin:4px 0}
.join form{display:flex;gap:10px}
.join input{flex:1;border:1px solid var(--line-2);border-radius:10px;padding:0 18px;min-height:52px;outline:0;background:var(--card-2)}
.join input:focus{border-color:var(--acc-green)}
.join form.stack{flex-direction:column;align-items:stretch}
/* early access: the optional interview box, unticked; label text is the tap target too */
.join .optin{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--fg-2);cursor:pointer}
.join .optin input{flex:none;width:20px;height:20px;min-height:0;margin:1px 0 0;padding:0;border:0;border-radius:4px;background:none;accent-color:var(--acc-green);cursor:pointer}
.join .optin input:focus-visible{outline:2px solid var(--acc-green);outline-offset:2px}

footer{background:var(--foot);color:var(--band-fg-2);border-top:1px solid var(--foot-line);padding:56px 0 40px;font-size:16px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
footer .brand{color:var(--band-fg);font-size:var(--lead);margin-bottom:10px}
footer b{display:block;color:var(--band-fg);font-weight:600;margin-bottom:10px}
footer a{display:block;text-decoration:none;margin-bottom:8px}
footer a:hover{color:var(--band-fg)}
footer .legal{margin-top:40px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:var(--small)}

/* sub-page hero */
.phero{padding:clamp(48px,8vh,96px) 0 clamp(32px,6vh,56px)}
.phero h1{font-size:clamp(36px,4.8vw,66px)}
.phero .lead{margin-top:22px}
.phero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:end}
.feature{background:var(--band);color:var(--band-fg);border-radius:var(--r);padding:40px;display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;text-decoration:none}
.feature h2{font-size:clamp(28px,3vw,40px);margin:0 0 12px;max-width:18ch}
.feature p{color:var(--band-fg-2);max-width:48ch}
.feature .more{display:inline-flex;gap:8px;align-items:center;font-weight:600;color:var(--band-link);margin-top:18px}
.feature .viz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.feature .viz div{background:var(--band-card);border-radius:12px;padding:18px 18px 16px;font-size:var(--ui);line-height:1.3;color:var(--band-fg-2);display:grid;align-content:start;gap:8px;text-wrap:pretty}
.feature .viz b{display:block;font-family:var(--serif);font-size:40px;color:var(--band-fg);font-weight:600;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.plain{max-width:68ch}
.plain p{margin-bottom:18px;color:var(--fg)}
.plain p b{color:var(--fg);font-weight:600}
/* values and themes: a list with the icon in the margin */
.values{display:grid;gap:4px}
.value{display:grid;grid-template-columns:44px minmax(0,.75fr) minmax(0,1.25fr);gap:12px 28px;align-items:start;padding:22px 0}
.value h3{margin:6px 0 0;font-size:28px;max-width:16ch}
.value p{color:var(--fg);font-size:var(--body);max-width:48ch;margin-top:9px;text-wrap:pretty}
.bio{background:var(--card);border-radius:var(--r);padding:40px;display:grid;grid-template-columns:220px 1fr;gap:36px;align-items:center}
.bio img{width:220px;height:220px;object-fit:cover;border-radius:14px}
.bio h2{font-size:34px;margin-bottom:12px}
.bio p{color:var(--fg);margin-bottom:12px}
.bio blockquote{font-family:var(--serif);font-style:italic;font-size:var(--lead);line-height:1.35;margin:18px 0;color:var(--fg)}

@media (max-width:960px){
  nav .wrap>ul{display:none}
  .menu{display:inline-flex}
  nav.open .wrap>ul{display:flex;flex-direction:column;gap:2px;position:absolute;left:0;right:0;top:72px;background:var(--bg);padding:10px var(--m) 16px;font-size:19px;box-shadow:var(--float)}
  nav.open .wrap>ul a{display:block;padding:12px 0}
  .hero .wrap,.foryou .wrap,.cefr .top,.people .wrap,.join .wrap,.head2,.phero .wrap,.feature,.bio{grid-template-columns:1fr}
  .feature .viz{order:-1}
  .grid2,.ideas3{grid-template-columns:1fr}
  .depth{grid-template-columns:1fr;gap:16px}
  .value{grid-template-columns:44px 1fr}
  .value p{grid-column:2;margin-top:0}
  .ideas3 .post.dark{flex-direction:column;align-items:flex-start}
  .ideas3 .post.dark .body{flex-direction:column;align-items:flex-start;gap:8px}
  .ideas3 .post.dark h3,.ideas3 .post.dark p{flex:none}
  .steps{grid-template-columns:1fr 1fr;gap:28px 12px}
  .steps::before,.loopl,.path svg.loop{display:none}
  .path{padding-top:0}
  .bars{height:260px;gap:8px}
  .bar b{font-size:20px}
  .lvstats th{width:100px}
  .std table{display:block;overflow-x:auto}
  .quote{grid-template-columns:1fr;padding:24px;gap:20px}
  .quote img{width:100%;height:auto;aspect-ratio:1}
  .quote blockquote{font-size:19px}
  .levels .wrap{justify-content:flex-start;gap:14px 22px}
  .foryou li{font-size:19px}
  footer .cols{grid-template-columns:1fr 1fr}
  .stage{padding:24px 0}
  .chip.c1{left:-12px;top:-36px}.chip.c2{right:0;bottom:-36px}
  .bio img{width:160px;height:200px}
}
@media (max-width:600px){
  nav .brand span{display:none}
  nav .btn{padding:0 14px}
  nav .navr{gap:10px}
  .lang summary{padding:0 9px 0 12px}.lang summary .full{display:none}.lang summary .short{display:inline}
  .join form{flex-direction:column}
  .depth dl>div{grid-template-columns:1fr;gap:4px}
  .plist .post .cover.ph{width:120px;height:80px}
  .feature{padding:24px}
  .feature .viz b{font-size:32px}
  .feature h2{font-size:26px}
  .ahead h1{letter-spacing:-.025em}
  .plist .post .more{display:none}
  .rings{grid-template-columns:repeat(4,1fr);gap:6px}
  .ring .dial{width:52px;height:52px}
  .chip{font-size:14px}
  .chip.c1{left:-10px;top:-36px}
  .chip.c2{right:-4px;bottom:-36px}
  .chip.c3{right:-10px;top:-36px}
  .bars{height:200px;padding-left:0}
  /* phone: the row name sits on its own line above the six numbers, so no word breaks; the numbers line up under the six bars */
  .lvstats tbody{display:block}
  .lvstats tr{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--line);padding:8px 0 10px}
  .lvstats tr:first-child{border-top:0}
  .lvstats th,.lvstats td{border-top:0}
  .lvstats th{grid-column:1/-1;width:auto;font-size:var(--small);padding:0 12px 4px}
  .lvstats th .ic{width:14px;height:14px;margin-right:6px}
  .lvstats td{font-size:16px;padding:2px 0}
  .lvstats tr.sub td{font-size:14px}
  .bar{padding:0 2px 10px}
  .bar span{display:none}
  .school.wide{grid-template-columns:1fr}
  .hero .cta .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .hero h1 .l span,.fade,.chip,.hero h1 .no::after,.ring .fg{animation:none;transform:none;opacity:1}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- blog articles ---------- */
.ahead{padding:clamp(48px,8vh,88px) 0 clamp(20px,4vh,36px)}
.ahead .wrap,.article .wrap{max-width:860px}
.ahead h1{font-size:clamp(28px,4.2vw,58px);max-width:24ch}
.ahead .lead{margin-top:20px;max-width:60ch}
.ahead .meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;font-size:var(--ui);color:var(--fg-2);font-weight:500}
.ahead .meta .cat{display:inline-flex;align-items:center;gap:8px;color:var(--acc-copper);font-weight:700}
.ahead .meta .cat .ic{width:16px;height:16px}
.article{padding-top:0}
.prose{font-size:var(--body);line-height:1.65;text-wrap:pretty;font-variant-numeric:oldstyle-nums}
.prose>*+*{margin-top:18px}
.prose h2{font-size:28px;margin-top:46px;max-width:24ch;line-height:1.15}
.prose h3{font-size:var(--lead);margin-top:30px}
.prose ul,.prose ol{padding-left:22px}
.prose li+li{margin-top:8px}
.prose em{font-style:italic}
.prose blockquote{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.35;padding:4px 0 4px 22px;border-left:3px solid var(--copper-hi);margin:36px 0}
.prose .callout{background:var(--sec-g);border-radius:var(--r);padding:22px 26px;font-size:var(--body)}
.prose .callout b{display:block;margin-bottom:6px;color:var(--fg)}
.prose table{width:100%;border-collapse:collapse;font-size:16px;margin-top:22px;font-variant-numeric:lining-nums tabular-nums}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line-2);vertical-align:top}
.prose th{font-weight:600;color:var(--fg-2);font-size:var(--ui);font-family:var(--sans)}
.prose .key{margin-top:8px}
.author{display:flex;gap:18px;align-items:center;margin-top:52px;padding-top:26px}
.author img{width:60px;height:72px;border-radius:8px;object-fit:cover;filter:grayscale(1)}
.author b{display:block}
.author span{font-size:var(--ui);color:var(--fg-2);font-family:var(--sans)}
.morep{background:var(--bg-2)}
.morep h2{font-size:28px;margin-bottom:20px}
.plist{display:grid;gap:4px}
.plist .post{flex-direction:row;align-items:center;gap:22px;background:transparent;border-radius:0;padding:10px 0}
.plist .post:hover{transform:none}
.plist .post:hover h3{text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:.06em}
.plist .post .cover.ph{width:184px;height:116px;flex:none;border-radius:8px}
.plist .post .cover.ph .pill{display:none}
.plist .post .body{padding:0;flex-direction:row;align-items:center;gap:22px;flex:1}
.plist .post h3{flex:1;font-size:var(--lead)}
.plist .post p{display:none}
.plist .post .more{margin:0;padding:0;white-space:nowrap}
@media (max-width:768px){.prose{font-size:17px}.prose blockquote{font-size:21px}}

/* ---------- photographs: blog covers, article hero, credits ---------- */
.post .cover.ph{height:176px;padding:0;position:relative;display:block;overflow:hidden;background:var(--card-2)}
.post .cover.ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease-out)}
.post:hover .cover.ph img{transform:scale(1.035)}
.post .cover.ph .pill{position:absolute;left:12px;top:12px;background:rgba(14,33,26,.84);color:#fff;font-size:var(--small);font-weight:600;padding:5px 10px;border-radius:999px}
.bgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.bgrid .post .body{padding:18px 20px 22px;gap:8px}
.bgrid .post h3{font-size:var(--lead);line-height:1.2}
.bgrid .post p{font-size:16px}
.bgrid .post .more{font-size:var(--ui)}
.post.feat{grid-column:1/-1;flex-direction:row;align-items:stretch}
.post.feat .cover.ph{flex:0 0 56%;height:auto;min-height:360px}
.post.feat .cover.ph .pill{left:18px;top:18px}
.bgrid .post.feat .body{padding:40px 44px;justify-content:center;gap:14px}
.bgrid .post.feat h3{font-size:clamp(28px,2.8vw,40px);line-height:1.05;max-width:18ch}
.bgrid .post.feat p{font-size:var(--body);max-width:46ch}
.bgrid .post.feat .more{margin-top:6px}
.ahero{margin:4px 0 40px}
.ahero .wrap{max-width:var(--w)}
.ahero img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);display:block}
.ahero figcaption{font-size:var(--small);font-style:italic;color:var(--fg-2);margin-top:8px;text-align:right}
footer .credits{margin-top:14px;font-size:var(--small);line-height:1.6;opacity:.8;max-width:90ch}
footer .credits a{display:inline;margin:0;text-decoration:underline;text-underline-offset:2px}
@media (max-width:1024px){
  .bgrid{grid-template-columns:1fr 1fr}
  .post.feat{flex-direction:column}
  .post.feat .cover.ph{flex:none;height:260px;min-height:0}
  .bgrid .post.feat .body{padding:28px}
}
@media (max-width:600px){
  .bgrid{grid-template-columns:1fr}
  .post.feat .cover.ph{height:220px}
}

/* ---------- engine stage: one panel per step ---------- */
.estage{margin-top:32px;background:var(--bg-2);border-radius:var(--r);padding:28px 44px;display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center;min-height:460px}
.engine .head2{margin-bottom:36px}
.einfo{position:relative;min-height:220px}
.einfo>div{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out),visibility 0s .4s;pointer-events:none}
.einfo>div.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.einfo h3{font-size:28px;margin:0 0 12px;max-width:26ch}
.einfo p{color:var(--fg);font-size:var(--body);max-width:40ch}
.emock{position:relative;min-height:420px}
.epanel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(12px) scale(.985);transition:opacity .45s var(--ease-out),transform .55s var(--ease-out),visibility 0s .45s;pointer-events:none}
.epanel.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.mk{width:min(100%,430px);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;font-size:var(--ui);line-height:1.35;color:var(--fg)}
.mk>.lab{margin-bottom:10px}
.mk .hint{margin-top:12px;display:flex;gap:8px;align-items:center;font-size:var(--small);font-weight:600;color:var(--acc-copper)}
.mk .hint .ic{width:16px;height:16px;flex:none}
.word{background:var(--t-g);border-left:4px solid var(--t-g-fg);border-radius:12px;padding:12px 14px;margin-bottom:10px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px}
.word b{font-size:var(--lead);font-weight:700;letter-spacing:-.01em}
.word .tr{color:var(--fg-2)}
.word em{grid-column:1/-1;font-style:italic;font-weight:500;margin-top:4px}
.word .snd{grid-row:1/3;width:36px;height:36px;border-radius:50%;background:var(--card);display:inline-flex;align-items:center;justify-content:center;color:var(--t-g-fg)}
.word .snd .ic{width:18px;height:18px}
.story p{font-size:var(--ui);line-height:1.5;font-weight:500}
.story p+p{margin-top:8px}
.story .who{font-size:var(--small);letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--t-g-fg);display:block;margin-bottom:1px}
.play{margin-top:14px;display:flex;align-items:center;gap:12px;background:var(--t-g);border-radius:999px;padding:7px 14px 7px 7px}
.play .pbtn{width:32px;height:32px;border-radius:50%;background:var(--next);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none}
.play .pbtn .ic{width:14px;height:14px;fill:currentColor;stroke:none;margin-left:2px}
.play .wave{flex:1;display:flex;align-items:center;gap:3px;height:22px}
.play .wave i{flex:1;background:var(--t-g-fg);border-radius:2px;height:var(--h,40%);opacity:.75}
.play small{font-size:var(--small);font-weight:600;color:var(--t-g-fg);white-space:nowrap}
.tabs{display:flex;gap:3px;margin-bottom:14px;background:var(--track);border-radius:10px;padding:3px}
.tabs span{flex:1;text-align:center;font-size:var(--small);font-weight:600;padding:7px 0;border-radius:8px;color:var(--fg-2)}
.tabs span.on{background:var(--card);color:var(--t-g-fg)}
.q{font-size:16px;font-weight:600;line-height:1.5}
.q u{text-decoration:none;border-bottom:2px solid var(--copper);padding:0 14px;color:var(--acc-copper)}
.ans{margin-top:12px;display:flex;align-items:center;gap:12px}
.ans .in{border:1.5px solid var(--t-g-fg);border-radius:8px;padding:8px 14px;font-weight:700;font-size:16px;min-width:64px;text-align:center}
.ans .ok{display:inline-flex;gap:6px;align-items:center;font-size:var(--small);font-weight:600;color:var(--t-g-fg)}
.ans .ok .ic{width:16px;height:16px}
.mk .prog{height:6px;border-radius:3px;background:var(--track);margin-top:16px;overflow:hidden}
.mk .prog i{display:block;height:100%;background:var(--t-g-fg);border-radius:3px}
.mk .blk{margin-top:0}
.mk .next{margin-top:12px}
/* engine panels: picture on top, typed practice, the four test parts and their result */
.mk .wimg{margin:-16px -16px 12px;border-radius:15px 15px 0 0;overflow:hidden;aspect-ratio:16/6;background:var(--bg-2)}
.mk .wimg img{display:block;width:100%;height:100%;object-fit:cover}
.mk .wimg.sc img{object-position:50% 35%}
.mk .exr{margin-top:14px}
.mk .exr .lab{margin-bottom:4px}
.mk .exr p{font-weight:500;line-height:1.5}
.mk .cue{color:var(--fg-2);font-weight:500}
.mk .cue b{color:var(--fg)}
.mk .typed{border-bottom:2px solid var(--t-g-fg);padding:0 1px;font-weight:700}
.mk .typed mark{font-weight:700}
.mk .okl{display:flex;gap:6px;align-items:center;margin-top:4px;font-size:var(--small);font-weight:600;color:var(--t-g-fg)}
.mk .okl .ic{width:15px;height:15px;flex:none}
.mk .trow{display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px;align-items:start;padding:9px 0;border-top:1px solid var(--line)}
.mk>.lab+.trow{border-top:0;padding-top:0}
.mk .trow .tp{font-size:var(--small);font-weight:700;color:var(--t-g-fg)}
.mk .trow .tp small{display:block;font-weight:500;color:var(--fg-2)}
.mk .trow p{font-weight:500;line-height:1.45}
.mk .trow .cue{display:block}
.mk .pick{display:inline-block;margin-top:4px;background:var(--t-g);color:var(--t-g-fg);border-radius:8px;padding:2px 10px;font-weight:700}
.mk .eres{margin-top:10px;background:var(--t-g);border-radius:12px;padding:10px 12px}
.mk .eres ul{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.mk .eres li{font-size:var(--small);color:var(--fg-2);font-weight:600}
.mk .eres b{display:block;font-size:clamp(16px,4.4vw,var(--lead));color:var(--fg);letter-spacing:-.01em;white-space:nowrap;font-variant-numeric:tabular-nums}
.mk .eres li{min-width:0}
@media (max-width:600px){.mk .eres li{font-size:12px}.mk .eres ul{gap:4px}}
@media (max-width:900px){
  .estage{grid-template-columns:1fr;padding:24px;gap:24px;min-height:0}
  .einfo{min-height:190px}
  .emock{min-height:340px}
}
@media (max-width:600px){
  .einfo h3{font-size:24px;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .einfo>div,.epanel{transition:none}
  .step .pb{display:none}
}

/* comparison table: one card per criterion on phones, MeisterPath first, every value labelled */
.std .cl{display:none}
@media (max-width:720px){
  .std table,.std tbody,.std tr,.std th,.std td{display:block}
  .std table{background:none;border-radius:0;overflow:visible}
  .std thead{display:none}
  .std tr{display:flex;flex-direction:column;background:rgba(255,255,255,.04);border-radius:var(--r);overflow:hidden}
  .std tr+tr{margin-top:14px}
  .std tbody th{order:-2;padding:18px 18px 10px;font-size:17px;border-bottom:0}
  .std td{display:grid;grid-template-columns:1fr auto minmax(0,auto);align-items:center;column-gap:6px;text-align:right;padding:12px 18px;border-bottom:0;border-top:1px solid rgba(248,245,237,.14)}
  .std td.mp{order:-1;border-top:0}
  .std td .cl{display:block;text-align:left;color:#CBD8CF;font-weight:500;margin-right:12px}
  .std td .ic{margin-right:0}
  .std td.mp .cl{color:#fff;font-weight:600}
}

/* ================= home page, 23 Oct redesign: everything below is scoped to body.home ================= */
.home{--d1:clamp(72px,10vw,160px);--d2:clamp(48px,6vw,96px)}
.home nav{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;transition:background-color .3s ease} /* taste-skill-ignore: removes the blur */

/* stuck at A2: statement tiles */
.home .stuck{padding:8px 0 clamp(80px,12vh,140px);background:var(--bg)}
.home .tiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(2,clamp(240px,38svh,420px));gap:8px;padding:0 8px}
.home .tile{position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:clamp(20px,2.6vw,44px)}
.home .ta{grid-column:1/9;grid-row:1/3;background:var(--deep)}
.home .ta h2{font-size:var(--d1);line-height:.88;letter-spacing:-.045em;max-width:7ch}
.home .tb{grid-column:9/13;grid-row:1;background:var(--tan);color:var(--ink)}
.home .tb em{display:block;font-size:var(--d2);line-height:.9;letter-spacing:-.035em;font-weight:500}
.home .tc{grid-column:9/13;grid-row:2;padding:0}
.home .tc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.08) translate(-1.5%,-1%)}}
.home .pains{list-style:none;max-width:var(--w);margin:clamp(48px,8vh,96px) auto 0;padding:0 var(--m);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px 24px}
.home .pains li{grid-column:span 4;font-size:var(--h3);line-height:1.3;letter-spacing:-.01em;text-wrap:pretty}

/* exercise cards: the try-it block */
.home .ex{background:rgba(4,12,9,.42);border-radius:16px;padding:24px;font-size:16px;line-height:1.4;color:var(--fg)}
.home .exh{display:flex;gap:6px 10px;align-items:baseline;flex-wrap:wrap;margin-bottom:14px}
.home .exk{font-size:13px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--t-g);color:var(--t-g-fg)}
.home .rec .exk{background:#2B4C78;color:#CFE0F8}.home .cal .exk{background:var(--t-c);color:var(--t-c-fg)}
.home .ext{font-size:15px;font-weight:500;color:var(--fg-2)}
.home .exq{font-family:var(--serif);font-size:var(--lead);line-height:1.45;font-weight:500;margin-bottom:18px;text-wrap:pretty}
.home .opts{display:grid;gap:8px}
.home .opts button{all:unset;box-sizing:border-box;display:flex;align-items:center;min-height:48px;padding:8px 14px;border:2px solid transparent;border-radius:12px;background:rgba(255,255,255,.07);font-weight:600;cursor:pointer;transition:background-color .2s ease,transform .16s var(--ease-out),opacity .2s ease}
.home .opts button:hover{background:rgba(255,255,255,.13)}
.home .opts button:active{transform:scale(.98)}
.home .opts button.ok{background:var(--t-g);color:var(--t-g-fg);border-color:var(--t-g-fg)}
.home .opts button.no{background:rgba(214,69,69,.2);color:#F4B6A4;animation:shake .32s var(--ease-out)}
.home .opts button:disabled{opacity:.4;cursor:default}
.home .opts button mark{margin-left:.25em}
.home .fb{display:none;margin-top:14px;font-size:15px;line-height:1.45;color:var(--fg)}
.home .fb b{display:block;font-size:16px;margin-bottom:2px}
.home .fb.ok b{color:var(--t-g-fg)}.home .fb.no b{color:#F4B6A4}
html:not(.js) .home .fb.ok{display:block}
.home .ex.is-ok .fb.ok,.home .ex.is-no .fb.no{display:block;animation:fbin .36s var(--ease-out)}
.home .ex.is-ok .fb.no{display:none}
.home .tin{display:flex;gap:8px}
.home .tin input,.home .ex textarea{flex:1;min-width:0;min-height:48px;border-radius:10px;border:1.5px solid var(--line-2);background:rgba(0,0,0,.28);padding:0 14px;font:inherit;font-size:16px;color:var(--fg);transition:border-color .2s ease}
.home .ex textarea{display:block;width:100%;padding:12px 14px;font-family:var(--serif);font-size:18px;resize:vertical;margin-bottom:10px}
.home .chk{all:unset;box-sizing:border-box;cursor:pointer;min-height:48px;padding:0 20px;border-radius:10px;background:var(--next);color:#fff;font-weight:700;display:inline-flex;align-items:center;justify-content:center;transition:transform .16s var(--ease-out),background-color .2s ease}
.home .chk:hover{background:#357A5B}.home .chk:active{transform:scale(.97)}
.home .gap{color:var(--mk-g);white-space:nowrap}
.home .gap input{width:6.5ch;font:inherit;color:var(--mk-g);background:transparent;border:0;border-bottom:2px solid var(--copper-hi);padding:0 2px;margin-left:1px;border-radius:0}
.home .ex input.ok{border-color:var(--t-g-fg)}.home .ex input.no{border-color:#F4B6A4;animation:shake .32s var(--ease-out)}
.home .mail{background:rgba(255,255,255,.06);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.home .mail .from{display:block;font-size:13px;font-weight:600;color:var(--fg-2);margin-bottom:6px}
.home .mail p{font-family:var(--serif);font-size:var(--lead);line-height:1.45;font-weight:500}
@keyframes fbin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* view settings: the app's real sidebar, its language switch and its four themes */

/* ideas: a list with photo bullets */
.home .ideas{background:var(--bg)}
.home .ideas-h .more{display:inline-flex;gap:8px;align-items:center;font-weight:600;font-size:16px;color:var(--acc-green);text-decoration:none;white-space:nowrap}
.home .ilist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 64px}
.home .ilist a{display:grid;grid-template-columns:clamp(120px,14vw,200px) minmax(0,1fr);gap:24px;align-items:center;text-decoration:none}
.home .ilist img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);transition:transform .5s var(--ease-out)}
.home .ilist a:hover img{transform:translateY(-3px)}
.home .ilist a:hover b{text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.16em}
.home .ilist b{display:block;font-size:var(--h3);font-weight:500;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.home .ilist small{display:block;margin-top:8px;font-size:15px;color:var(--fg-2)}

/* the close: the hero's idea again */
.home .join{background:#3A2617;padding:clamp(96px,16vh,180px) 0 clamp(72px,10vh,120px)}
.home .join .wrap{display:block}
.home .join h2{font-size:var(--d1);line-height:.9;letter-spacing:-.045em}
.home .join .lead{color:var(--fg)}
.home .jrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:end;margin-top:clamp(48px,9vh,112px)}

/* engine stage (kept): panels stack in one grid cell, so the box is as tall as the tallest panel in every browser */
.home .einfo,.home .emock{display:grid}
.home .einfo>div,.home .epanel{position:relative;inset:auto;grid-area:1/1}
@media (max-width:900px){
  .home .einfo,.home .emock{min-height:0}
  /* phone: the five steps become one strip sitting on top of the stage they drive */
  .home .engine .path{padding-top:46px}
  /* the loop closes over the strip, from Improve back to Select */
  .home .engine .path svg.loop{display:block;height:52px}
  .home .engine .loopl{display:block;top:-8px;font-size:16px;padding:0 10px}
  .home .engine .steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  .home .engine .steps::before{display:block;top:24px}
  .home .engine .step{padding:0 2px}
  .home .engine .step .n{width:48px;height:48px}
  .home .engine .step .n .ic{width:20px;height:20px}
  .home .engine .step .n b{width:20px;height:20px;right:-5px;top:-5px;font-size:13px}
  .home .engine .step .t{margin-top:8px;font-size:13px;letter-spacing:-.01em}
  .home .engine .step .d,.home .engine .step .pb{display:none}
  .home .engine .estage{margin-top:14px}
  .home .engine .head2{margin-bottom:28px}
}

/* flow fragments: the app's course surfaces, rebuilt (data-ui) */
.home .fui .sc{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t-g-fg);margin-bottom:6px}
.home .fui .gt{font-size:20px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.home .fui .rl{font-size:15px;color:var(--fg-2);margin-top:4px}
.home .fui mark{color:var(--mk-g)}
.home .fcol{display:grid;gap:16px;align-content:start}
.home .fst.vo h3{color:#D6B8EE}.home .fst.gr h3{color:#F3C27F}.home .fst.le h3{color:#9DCDEF}.home .fst.ho h3{color:#8FDACB}
/* vocab card */
.home .vcard{display:grid;gap:12px;align-content:start}
.home .vtop{display:flex;align-items:center;gap:8px}
.home .vtop .pos{font-size:13px;font-weight:700;padding:3px 10px;border-radius:999px;background:#1C3350;color:#BFD6F6}
.home .vtop .lvl{font-size:13px;font-weight:700;color:var(--fg-2)}
.home .vtop .snd{margin-left:auto;width:36px;height:36px;border-radius:50%;background:var(--card-2);display:inline-flex;align-items:center;justify-content:center;color:var(--t-g-fg)}
.home .vtop .snd .ic{width:18px;height:18px}
.home .vw{font-size:clamp(36px,3.4vw,52px);font-weight:900;letter-spacing:-.03em;line-height:1}
.home .vm{font-size:17px}
.home .vm .sc{display:inline;margin-right:10px}
.home .vbox{background:var(--card-2);border-radius:12px;padding:12px 14px;font-size:15px;line-height:1.45}
.home .vdef{background:var(--t-g);border-radius:12px;padding:12px 14px;font-size:15px;line-height:1.45}
.home .vex p,.home .vlv p,.home .gex p{font-family:var(--serif);font-size:var(--lead);line-height:1.4;font-weight:500}
.home .vex small,.home .gex small{display:block;margin-top:6px;font-size:13px;color:var(--fg-2);font-weight:600}
.home .chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.home .chips span{font-size:13px;font-weight:700;padding:5px 11px;border-radius:999px;background:var(--card-2);color:var(--fg-2)}
.home .chips span.on{background:#2E6B4F;color:#fff}
/* grammar card */
.home .gcard{display:grid;gap:14px}
.home .grule{background:var(--t-g);border-radius:12px;padding:12px 14px;font-size:16px;line-height:1.45}
.home .gpat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.home .pc{background:var(--card-2);border-left:3px solid #7FA88A;border-radius:10px;padding:12px 14px}
.home .pc .ch{display:flex;flex-wrap:wrap;gap:6px}
.home .pc .ch span{display:inline-flex;flex-direction:column;font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.15;padding:6px 10px 5px;border-radius:6px;background:rgba(255,255,255,.06);border-bottom:2px solid rgba(255,255,255,.18)}
.home .pc .ch span.vb{background:rgba(127,168,138,.22);border-bottom-color:#7FA88A}
.home .pc .ch small{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--fg-2);margin-bottom:2px}
.home .gex{background:var(--card-2);border-radius:12px;padding:12px 14px}
.home .gmore{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--fg-2)}
.home .gmore .ic{width:14px;height:14px;stroke-width:2.4}
/* Grammatik: the unit's rule card, its example as a sentence diagram, more forms with sound, the key points */
.home .g2{display:grid;gap:12px}
.home .g2e{margin-top:4px;color:var(--fg-2)}
.home .g2 .pch{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.home .g2 .pch .sc{margin:0}
.home .g2 .pc .ch span{font-size:19px}
.home .gforms{list-style:none;display:grid;gap:6px}
.home .gforms li{display:flex;align-items:center;gap:10px;background:var(--card-2);border-radius:12px;padding:8px 8px 8px 14px}
.home .gforms li>div{flex:1;min-width:0}
.home .gforms p{font-family:var(--serif);font-size:17px;line-height:1.4}
.home .gforms b{font-weight:600;color:var(--mk-b)}
.home .gforms small{display:block;font-size:13px;color:var(--fg-2);font-weight:600}
.home .gpts{background:var(--card-2);border-radius:12px;padding:0 14px}
.home .gpts summary{display:flex;align-items:center;gap:8px;min-height:44px;font-weight:700;cursor:pointer}
.home .gpts summary span{margin-left:auto;font-weight:600;color:var(--fg-2)}
.home .gpts ul{padding:0 0 12px 18px;display:grid;gap:4px;font-size:15px}
/* reader */
.home .rdr{padding:0;overflow:hidden}
.home .rimg{height:clamp(120px,14vw,200px);background:var(--t-g)}
.home .rimg img{width:100%;height:100%;object-fit:cover}
.home .rdr>*:not(.rimg){margin-left:clamp(18px,2vw,28px);margin-right:clamp(18px,2vw,28px)}
.home .rmode{display:flex;gap:6px;margin-top:18px}
.home .rmode button{all:unset;cursor:pointer;min-height:40px;padding:0 16px;border-radius:10px;font-size:15px;font-weight:700;border:1.5px solid var(--line-2);color:var(--fg-2);transition:background-color .2s ease,color .2s ease}
.home .rmode button[aria-pressed="true"]{background:var(--cta);border-color:var(--cta);color:#fff}
.home .rmode button:focus-visible{outline:2px solid var(--copper-hi);outline-offset:2px}
.home .rt{font-size:22px;font-weight:800;margin-top:18px}
.home .rrow{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:4px 16px;margin-top:16px}
.home .rrow .who{font-size:15px;font-weight:700;color:var(--t-g-fg);padding-top:4px}
.home .rrow p{font-family:var(--serif);font-size:19px;line-height:1.75}
.home .rrow b{font-weight:inherit;border-radius:4px;transition:background-color .25s ease,color .25s ease}
/* the app's marks: a sky band for grammar, an amber chip for vocabulary; both can show at once */
.home .rdr[data-gram] b.g,.home .rdr[data-vocab] b.v,.home .story b.g,.home .story b.v{padding:1px 2px}
.home .rdr[data-gram] b.g,.home .story b.g{background:#1F3E57;color:#DCEEFF;font-weight:700;border-radius:3px}
.home .rdr[data-vocab] b.v,.home .story b.v{background:#4D3A16;color:#FFE7B0;font-weight:700}
.home .trb{display:inline-flex;vertical-align:-3px;margin-left:8px;color:#8CC4EA}
.home .trb .ic{width:16px;height:16px}
.home .rfoot{display:flex;align-items:center;gap:10px;margin-top:18px;margin-bottom:22px;font-size:14px;font-weight:700;color:var(--fg-2)}
.home .rbtn{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:10px;background:#2E6B4F;color:#fff;font-size:15px;font-weight:700}
/* listening */
.home .hplay{display:grid;gap:12px;align-content:start}
.home .pbar{background:var(--card-2);border-radius:12px;padding:12px;display:grid;gap:10px}
.home .pctl{display:flex;align-items:center;gap:8px}
.home .pp{width:44px;height:44px;border-radius:10px;background:#2E6B4F;color:#fff;display:inline-flex;align-items:center;justify-content:center}
.home .pp .ic{width:18px;height:18px;fill:currentColor;stroke:none}
.home .pk{min-width:44px;height:36px;border-radius:9px;background:rgba(255,255,255,.07);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.home .spd{margin-left:auto;font-size:14px;font-weight:700;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.07)}
.home .ptime{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;color:var(--fg-2);font-variant-numeric:tabular-nums}
.home .seek{flex:1;height:6px;border-radius:3px;background:var(--track);overflow:hidden}
.home .seek i{display:block;height:100%;width:44%;background:var(--t-g-fg)}
.home .hlock{font-size:14px;color:var(--fg-2)}
.home .hq{display:grid;gap:10px;align-content:start}
.home .hqh{display:flex;justify-content:space-between;font-size:15px}
.home .hqh span{color:var(--fg-2)}
.home .hopts{display:grid;gap:8px}
.home .hopts span{padding:11px 14px;border-radius:10px;background:rgba(255,255,255,.07);font-weight:600}
.home .hopts span.sel{background:var(--t-g);color:var(--t-g-fg)}
.home .hres{padding:10px 14px;border-radius:10px;background:var(--t-g);color:var(--t-g-fg);font-weight:700}
/* unit test */
.home .ttest{display:grid;gap:14px}
.home .tth{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.home .tth span{font-size:14px;color:var(--fg-2)}
.home .ttabs{display:flex;gap:6px;flex-wrap:wrap}
.home .ttabs span{padding:8px 14px;border-radius:10px;background:rgba(255,255,255,.07);font-weight:700;font-size:15px}
.home .ttabs span.on{background:#2E6B4F;color:#fff}
.home .ttabs i{font-style:normal;font-weight:500;opacity:.8;margin-left:4px}
.home .tdone{background:#1C3350;color:#CFE0F8;border-radius:10px;padding:10px 14px;font-size:15px}
.home .tres{background:var(--t-g);border-radius:14px;padding:18px 20px;display:grid;gap:4px}
.home .tres b{font-size:clamp(48px,5vw,72px);font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--t-g-fg);font-variant-numeric:tabular-nums}
.home .tres>span:last-child{font-size:15px}
/* wrap-up */
.home .send{display:grid;gap:16px}
.home .snext{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:var(--card-2);border-radius:14px;padding:14px 16px}
.home .snext p{font-size:16px;font-weight:600}
.home .skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 28px;padding:4px 4px 0}
.home .sk{display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 14px;align-items:center;padding:10px 0}
.home .sk>dl,.home .sk>p{grid-column:2}
.home .skh{display:contents}
.home .skh b{grid-column:2;grid-row:1;font-size:16px;color:var(--k)}
.home .skh .rg{grid-column:1;grid-row:1/span 2}
.home .rg{position:relative;width:56px;height:56px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.home .rg svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.home .rg circle{fill:none;stroke-width:5;r:20px;cx:24px;cy:24px}
.home .rg .b{stroke:rgba(255,255,255,.1)}
.home .rg .f{stroke:var(--k);stroke-linecap:round;stroke-dasharray:125.66;stroke-dashoffset:calc(125.66 - var(--p) * 1.2566)}
.home .rg em{position:relative;font-style:normal;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.home .sk dl{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0}
.home .sk dl div{display:flex;gap:6px;font-size:13px}
.home .sk dt{color:var(--fg-2)}.home .sk dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.home .sk p{font-size:13px;color:var(--fg-2)}
/* overview, word list, collection and report: the app's 2026-10-26 designs */
.home .ovf{display:grid;gap:12px}
.home .ovf .ovc{padding:0}
.home .ovf .plan{margin:0}
.home .plan .pl2{margin-top:12px;padding-top:12px;border-top:1px solid var(--ov-plan-line)} /* taste-skill-ignore: app UI inside data-ui mocks */
.home .wlst{display:grid;gap:10px;align-content:start}
.home .wlt{font-size:20px;font-weight:800;letter-spacing:-.01em}
.home .wlc{display:flex;gap:8px;align-items:center}
.home .sg{display:inline-flex;border:1.5px solid var(--wt-line);border-radius:12px;padding:3px}
.home .sg i{font-style:normal;font-weight:700;padding:7px 12px;border-radius:9px;color:var(--ov-kick)}
.home .sg i.on{background:var(--cta);color:#fff}
.home .nsel{flex:1;display:flex;justify-content:space-between;align-items:center;min-height:42px;padding:0 12px;border:1px solid var(--line-2);border-radius:10px;font-weight:600}
.home .nsel .ic{width:16px;height:16px;color:var(--fg-2)}
.home .go{width:44px;height:42px;border-radius:10px;background:var(--cta);color:#fff;display:grid;place-items:center}
.home .go .ic{width:18px;height:18px}
.home .wlm{display:flex;justify-content:space-between;gap:10px;font-size:14px;font-weight:600;color:var(--fg-2)}
.home .wlm b{color:var(--ov-kick)}
.home .wrows{list-style:none;display:grid;gap:6px}
.home .wrows li{padding:6px 12px;border-radius:12px;border:1.5px solid var(--wt-line);background:var(--wt);color:var(--wt-ink)}
.home .wrows .wtop{display:flex;align-items:center;gap:10px;min-height:40px}
.home .wrows .wex{font-family:var(--serif);font-size:15px;line-height:1.4;margin:2px 0 4px 30px;opacity:.9}
.home .wrows li.p{border-color:var(--wp-line);background:var(--wp);color:var(--wp-ink)}
.home .wrows .wd{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.home .wrows b{font-size:17px;font-weight:700;min-width:0;overflow-wrap:break-word;hyphens:manual}
.home .wrows b i{font-style:normal;font-weight:600}
.home .wrows em{font-style:normal;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;border:1px solid currentColor;opacity:.85;flex:none}
.home .aplay{all:unset;box-sizing:border-box;cursor:pointer;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;color:inherit;transition:background-color .2s ease,transform .16s var(--ease-out)}
.home .aplay .ic{width:20px;height:20px}
.home .aplay:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.home .aplay:active{transform:scale(.94)}
.home .aplay[aria-pressed="true"]{background:var(--cta);color:#fff}
.home .aplay:focus-visible{outline:2px solid var(--copper-hi);outline-offset:2px}
.home .wrows .det{font-weight:700;font-size:14px;flex:none}
.home .cbx{width:20px;height:20px;border-radius:5px;border:1.5px solid currentColor;background:var(--card);display:grid;place-items:center;flex:none;opacity:.8}
.home .cbx.on{background:var(--cta);border-color:var(--cta);color:#fff;opacity:1}
.home .cbx .ic{width:14px;height:14px;stroke-width:3}
.home .clh{border:1.5px solid var(--wt-line);border-radius:14px;padding:12px 14px}
.home .clh span{display:block;color:var(--fg-2);margin-top:2px}
.home .clt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.home .clt span{display:grid;justify-items:center;padding:10px;border-radius:12px;border:1px solid var(--line-2);font-weight:700}
.home .clt span.on{background:var(--cta);border-color:var(--cta);color:#fff}
.home .clt small{font-weight:500}
.home .cta2{background:var(--cta);color:#fff;border-radius:14px;padding:13px 16px;font-weight:700;text-align:center}
.home .spill{display:inline-flex;align-items:center;font-style:normal;font-size:12px;font-weight:700;line-height:18px;padding:1px 9px;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums}
.home .s-good{background:var(--st-good);color:var(--st-good-fg)}
.home .s-mid{background:var(--st-mid);color:var(--st-mid-fg);box-shadow:inset 0 0 0 1px var(--st-mid-line)}
.home .s-low{background:var(--st-low);color:var(--st-low-fg);box-shadow:inset 0 0 0 1px var(--st-low-line)}
.home .s-fail{background:var(--st-fail);color:var(--st-fail-fg);box-shadow:inset 0 0 0 1px var(--st-fail-line)}
.home .ttabs .spill{margin-left:6px;opacity:1}
.home .rpt{align-items:start}
.home .bcard{display:grid;gap:8px;align-content:start}
.home .bsub{color:var(--fg-2)}
.home .bh2{font-size:18px;font-weight:800;margin-top:4px}
.home .bhr{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.home .bhr span{font-weight:700;color:var(--ov-kick);white-space:nowrap}
.home .brows{list-style:none}
.home .brows li{display:flex;align-items:center;gap:12px;padding:10px 0}
.home .brows li+li{box-shadow:0 -1px 0 var(--line)} /* taste-skill-ignore: app UI inside data-ui mocks */
.home .brows li>div{flex:1;min-width:0}
.home .brows b{display:block;font-weight:700}
.home .brows div>span{display:block;font-size:14px;color:var(--fg-2)}
.home .brows .chev{width:16px;height:16px;color:var(--fg-2)}
.home .brows .okc{width:28px;height:28px;border-radius:50%;background:var(--st-good);color:var(--st-good-fg);display:grid;place-items:center;flex:none}
.home .okc .ic{width:15px;height:15px;stroke-width:3}
.home .brows .num{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:13px;flex:none}
@media (max-width:600px){.home .wrows .det{display:none}.home .wlc .nsel{display:none}}
/* writing */
@media (max-width:960px){
  .home .skills{grid-template-columns:minmax(0,1fr)}
  .home .gpat{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .home .rrow{grid-template-columns:minmax(0,1fr)}
  .home .rrow .who{padding-top:0}
  .home .pc .ch span{font-size:19px}
}

@media (max-width:960px){
  .home .tiles{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:6px;padding:0 6px}
  .home .ta{grid-column:1/-1;grid-row:auto;min-height:46svh}
  .home .tb,.home .tc{grid-column:auto;grid-row:auto;aspect-ratio:1}
  .home .pains li{grid-column:1/-1}
  .home .ilist,.home .jrow{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .home{--d1:16vw;--d2:12vw}
  .home .tb{padding:16px}
  .home .ideas-h{flex-direction:column;align-items:flex-start}
  .home .ilist{gap:32px}
  .home .ilist a{grid-template-columns:minmax(0,1fr);gap:14px}
  .home .ilist img{aspect-ratio:16/9}
  .home .join h2{font-size:12vw}
  .home .ex{padding:18px}
  .home .tin:not(.solo){flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .home .tc img,.home .opts button.no,.home .ex input.no,.home .ex.is-ok .fb.ok,.home .ex.is-no .fb.no{animation:none}
  .home nav{transition:none}
}

/* ---- one section skeleton: a big heading, one line, then one frame ---- */
.home .sx{padding:clamp(80px,11vh,128px) 0}
.home .sx .head2,.home .cefr .top,.home .ideas-h{display:block;margin:0}
.home .sx-h{font-size:clamp(32px,5vw,72px);line-height:1;letter-spacing:-.035em;font-weight:500;max-width:none}
.home .sx-l{margin-top:16px;font-size:var(--lead);line-height:1.4;max-width:46ch;color:var(--fg);text-wrap:pretty}
.home .sx-f,.home .cefr .totals,.home .engine .path,.home .std table,.home .ilist{margin-top:clamp(32px,5vh,56px)}
.home .cefr .totals{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}
.home .ideas-h .more{margin-top:12px}
.home .people .wrap{display:block}
.home .pp-f .sf-track{gap:24px}

/* ---- slideshow frames: tabs plus a horizontal snap track ---- */
.home .sf{position:relative}
.home .sf-track{display:flex;align-items:flex-start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.home .sf-track::-webkit-scrollbar{display:none}
.home .sf-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.home .sf-track.sf-going{scroll-snap-type:none}
.home .sf-tabs{display:flex;gap:6px;font-family:var(--sans)}
.home .sf-tabs [role="tab"]{all:unset;box-sizing:border-box;position:relative;cursor:pointer;min-height:44px;padding:0 14px;border-radius:10px;display:inline-flex;align-items:center;font-size:16px;font-weight:700;color:var(--fg-2);white-space:nowrap;transition:background-color .25s ease,color .25s ease}
.home .sf-tabs [role="tab"]:hover{color:var(--fg)}
.home .sf-tabs [role="tab"][aria-selected="true"]{background:var(--t-g);color:var(--fg)}
.home .sf-tabs [role="tab"]:focus-visible,.home .sf-nav button:focus-visible,.home .pctabs button:focus-visible{outline:2px solid var(--copper-hi);outline-offset:2px}
.home .sf-pb{position:absolute;left:14px;right:14px;bottom:5px;height:3px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden;opacity:0;transition:opacity .2s ease}
.home .sf-pb::after{content:"";position:absolute;inset:0;background:var(--copper-hi);transform:scaleX(0);transform-origin:left}
.home .sf-run [aria-selected="true"] .sf-pb{opacity:1}
.home .sf-run [aria-selected="true"] .sf-pb::after{animation:sfpb var(--sf-dur,7s) linear forwards}
@keyframes sfpb{to{transform:scaleX(1)}}
/* the unit flow frame: the app's sidebar on the left drives the stage on the right */
.home .flowf{display:grid;grid-template-columns:232px minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start;background:var(--bg-2);border-radius:22px;padding:clamp(16px,2vw,28px)}
.home .sf-side{background:var(--card);border-radius:16px;padding:14px 10px;font-family:var(--sans)}
.home .sf-sh{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--fg-2);padding:2px 10px 10px}
.home .flowf .sf-tabs{flex-direction:column;gap:2px}
.home .flowf .sf-tabs [role="tab"]{width:100%;padding:0 12px;font-weight:600}
.home .sf-nav{display:flex;gap:8px;padding:12px 4px 2px}
.home .sf-nav button{all:unset;cursor:pointer;width:44px;height:44px;border-radius:10px;background:rgba(255,255,255,.07);display:inline-flex;align-items:center;justify-content:center;color:var(--fg);transition:background-color .2s ease,transform .16s var(--ease-out)}
.home .sf-nav button:hover{background:rgba(255,255,255,.13)}
.home .sf-nav button:active{transform:scale(.95)}
.home .sf-nav .sf-prev .ic{transform:rotate(180deg)}
.home .fst{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;padding:4px 2px}
.home .fst-h h3{font-size:clamp(44px,5vw,76px);line-height:.92;letter-spacing:-.04em;font-weight:500}
.home .fst-h p{margin-top:10px;font-size:var(--lead);line-height:1.35;max-width:46ch;text-wrap:pretty}
.home .fui{background:var(--card);border-radius:18px;padding:clamp(16px,1.8vw,24px);font-family:var(--sans);font-size:16px;line-height:1.4;color:var(--fg)}
.home .fui2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.home .lvl{display:inline-flex;align-items:center;font-family:var(--sans);font-size:13px;font-weight:800;padding:3px 9px;border-radius:999px;background:#E8DCC8;color:#0A1D16}
.home .rhd{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
/* picture cards: one at a time, chosen by level */
.home .pcset{display:grid;gap:12px}
.home .pctabs{display:flex;flex-wrap:wrap;gap:6px;font-family:var(--sans)}
.home .pctabs button{all:unset;box-sizing:border-box;cursor:pointer;min-height:40px;padding:0 14px;border-radius:10px;font-size:15px;font-weight:800;border:1.5px solid var(--line-2);color:var(--fg-2);transition:background-color .2s ease,color .2s ease}
.home .pctabs button[aria-pressed="true"]{background:#E8DCC8;border-color:#E8DCC8;color:#0A1D16}
html.js .home .pcard-img{display:none}
html.js .home .pcset[data-show="a1"] [data-card="a1"],html.js .home .pcset[data-show="a2"] [data-card="a2"],html.js .home .pcset[data-show="b1"] [data-card="b1"],html.js .home .pcset[data-show="b2"] [data-card="b2"],html.js .home .pcset[data-show="c2"] [data-card="c2"]{display:block;animation:fbin .3s var(--ease-out)}
.home .pcard-img img{width:100%;height:auto;border-radius:14px;background:#fff}
.home .vo .pcard-img{max-width:640px}
.home .gr .pcard-img{max-width:620px}
.home .gr .pcard-img .gcard{margin-top:12px}
.home .gfig{font-weight:800;font-size:16px;margin-bottom:10px}
.home .pc .ch span.cn{background:rgba(129,156,171,.22);border-bottom-color:#819cab}
/* the detailed card view (Vokabelkarte Details) */
.home .vdlg{max-width:640px}
.home .vdh{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.home .vdh b{font-size:15px;color:var(--t-g-fg)}
.home .vx{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:700;color:var(--t-g-fg)}
.home .vx .ic{width:16px;height:16px}
.home .vdg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.home .vdg>div{display:grid;gap:10px;align-content:start}
.home .vdlg .vw{font-size:clamp(30px,2.6vw,40px)}
/* reader band */
.home .rdr .rimg{height:clamp(96px,10vw,150px);margin:0}
.home .rrow.solo{grid-template-columns:minmax(0,1fr)}
.home .rdr .rhd{margin-top:16px}
.home .rdr .rhd .rmode{margin-top:0}
.home .rdr .rrow:last-child{margin-bottom:22px}
/* group exercise and test part */
.home .gx{display:grid;gap:12px;align-content:start}
.home .gxh{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.home .pill{font-size:13px;font-weight:800;padding:4px 11px;border-radius:999px;background:#1C3350;color:#CFE0F8}
.home .ttabs.sm span{padding:6px 11px;font-size:14px}
.home .gi{font-size:15px;color:var(--fg-2)}
.home .dlg p,.home .letter p{font-family:var(--serif);font-size:19px;line-height:1.9}
.home .dlg p+p{margin-top:6px}
.home .dlg .who{display:block;font-family:var(--sans);font-size:14px;font-weight:700;color:var(--t-g-fg);line-height:1.4}
.home .letter{background:var(--card-2);border-radius:12px;padding:14px 16px}
.home .letter p+p{margin-top:6px}
.home .gx input,.home .gx select{font:inherit;font-family:var(--sans);font-size:16px;color:var(--fg);transition:border-color .2s ease,background-color .2s ease}
.home .gx input{width:7.5ch;background:transparent;border:0;border-bottom:2px solid var(--copper-hi);padding:0 4px;border-radius:0}
.home .gx select{background:var(--card);border:1.5px solid var(--line-2);border-radius:8px;padding:2px 6px;max-width:100%}
.home .gx .ok{border-color:var(--t-g-fg);color:var(--t-g-fg)}
.home .gx .no{border-color:#F4B6A4;color:#F4B6A4}
.home .gx input:focus-visible,.home .gx select:focus-visible{outline:2px solid var(--copper-hi);outline-offset:2px}
.home .gxa{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:#1C3350;color:#CFE0F8;border-radius:12px;padding:10px 12px}
.home .gxa p{font-size:14px}
.home .gxa .chk{margin-left:auto}
.home .chk:disabled{opacity:.5;cursor:default}
.home .gx .gxr{display:none}
.home .gx.is-done .gxr{display:block;animation:fbin .36s var(--ease-out)}
/* settings: the sidebar is the one frame */
/* mobile-only frames: side by side on a desk, tabs and swipe on a phone */
@media (min-width:901px){
  .home .sf-m .sf-tabs{display:none}
  .home .sf-m .sf-track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;overflow:visible;scroll-snap-type:none}
  .home .sf-m .sf-slide{flex:none}
}
@media (max-width:900px){
  .home .flowf{grid-template-columns:minmax(0,1fr);padding:12px;gap:14px}
  .home .sf-side{background:none;padding:0}
  .home .sf-sh,.home .sf-nav{display:none}
  .home .flowf .sf-tabs{flex-direction:row}
  .home .sf-tabs{overflow-x:auto;scrollbar-width:none;margin:0 -2px;padding:0 2px}
  .home .sf-tabs::-webkit-scrollbar{display:none}
  .home .flowf .sf-tabs [role="tab"]{width:auto;background:rgba(255,255,255,.06)}
  .home .flowf .sf-tabs [role="tab"][aria-selected="true"]{background:var(--t-g)}
  .home .sf-m .sf-tabs{margin-bottom:14px}
  .home .sf-m .sf-track{gap:16px}
  .home .sf-m .sf-track>.sf-slide{flex:0 0 100%}
  .home .grid2.sf-track{display:flex}
  .home .fui2,.home .vdg{grid-template-columns:minmax(0,1fr)}
  .home .cefr .totals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home .sx{padding:48px 0}
  .home .sx-f,.home .cefr .totals,.home .engine .path,.home .std table,.home .ilist{margin-top:24px}
  .home .quote{grid-template-columns:96px minmax(0,1fr);padding:20px;gap:16px;align-items:start}
  .home .quote img{width:96px;height:96px}
  .home .quote blockquote{font-size:18px}
}
@media (max-width:600px){
  .home .fst-h h3{font-size:12vw}
  .home .dlg p,.home .letter p{font-size:17px}
  .home .ilist{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:calc(-1 * var(--m))}
  .home .ilist::-webkit-scrollbar{display:none}
  .home .ilist a{flex:0 0 86%;scroll-snap-align:start}
  .home .ilist b{font-size:var(--lead)}
  .home .std tbody{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:calc(-1 * var(--m))}
  .home .std tbody::-webkit-scrollbar{display:none}
  .home .std tbody tr{flex:0 0 86%;scroll-snap-align:start}
  .home .std tr+tr{margin-top:0}
}
html:not(.js) .home .sf-track{display:block;overflow:visible}
html:not(.js) .home .sf-slide+.sf-slide{margin-top:24px}
html:not(.js) .home .sf-tabs,html:not(.js) .home .sf-nav,html:not(.js) .home .sf-sh{display:none}
html:not(.js) .home .flowf{grid-template-columns:minmax(0,1fr)}
@media (prefers-reduced-motion:reduce){
  .home .sf-pb{display:none}
  .home .pcard-img{animation:none}
}
@media (max-width:600px){
  .home .ta{min-height:32svh}
  .home .join{padding:64px 0 56px}
  .home .jrow{margin-top:28px}
  .home .panel{padding:20px}
  .home .panel .art{margin-top:20px}
  .home .vdlg .vdef{display:none}
  .home .engine .einfo p{display:none}
  .home .engine .estage{padding:18px;gap:16px}
}
@media (max-width:600px){
  .home .rdr .rimg{display:none}
  .home .rdr .ph-x{display:none}
  .home .school .pills{display:none}
  .home .panel p.d{font-size:16px}
}
@media (min-width:901px){.home .pp-f.sf-m .sf-track{grid-template-columns:minmax(0,1fr)}}

/* engine mocks after the unit-page template (2026-10-25): overview with depth chips, word cards, depth bubbles, skill rings, practice grid */
.home .mk .ovt{font-family:var(--serif);font-size:22px;font-weight:500;line-height:1.2;letter-spacing:-.01em;margin-top:-4px}
.home .mk .oplan{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}
.home .mk .oplan li{background:var(--card-2);border-radius:12px;padding:8px 10px;font-size:var(--small);color:var(--fg-2);font-weight:600}
.home .mk .oplan b{display:block;font-family:var(--serif);font-size:24px;font-weight:500;line-height:1.1;color:var(--fg);font-variant-numeric:tabular-nums}
.home .mk .ovh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:14px;font-size:var(--small)}
.home .mk .ovh b{font-weight:700}
.home .mk .ovh span{color:var(--fg-2)}
.home .mk .wl{list-style:none;margin-top:6px;background:var(--card-2);border-radius:12px;padding:2px 0}
.home .mk .wl li{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px}
.home .mk .wl li+li{box-shadow:0 -1px 0 var(--card)} /* taste-skill-ignore: app UI inside data-ui mocks */
.home .mk .wl li>div{flex:1;min-width:0}
.home .mk .wl b{display:block;font-family:var(--serif);font-weight:500;font-size:17px;line-height:1.25}
.home .mk .wl b i,.home .wcs b i{font-style:normal;color:var(--acc-copper)}
.home .mk .wl li.out>div{opacity:.5}
.home .dp{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.home .dp i{font-style:normal;font-size:11px;font-weight:700;border-radius:6px;padding:1px 7px;background:var(--t-g);color:var(--t-g-fg)}
.home .pk2{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--card);color:var(--fg-2)}
.home .pk2.on{background:var(--t-g-fg);color:var(--btn-fg)}
.home .pk2 .ic{width:16px;height:16px;stroke-width:2.6}
@media (max-width:900px){
  /* phone: only the active panel takes space, so a short panel leaves no gap */
  .home .einfo>div:not(.on),.home .epanel:not(.on){display:none}
}
.home .wcs{background:var(--card-2);border-radius:12px;overflow:hidden;margin-bottom:6px}
.home .wcs figure{aspect-ratio:16/6;overflow:hidden;background:var(--bg-2)}
.home .wcs figure img{width:100%;height:100%;object-fit:cover}
.home .wcs .wr{display:flex;align-items:center;gap:10px;padding:10px 12px}
.home .wcs .wr>div{flex:1;min-width:0}
.home .wcs b{display:block;font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.2}
.home .wcs small{display:block;font-size:var(--small);color:var(--t-g-fg);font-weight:600}
.home .wcs .snd{width:34px;height:34px;border-radius:50%;background:var(--card);display:grid;place-items:center;color:var(--t-g-fg);flex:none}
.home .wcs .snd .ic{width:17px;height:17px}
.home .wcs .chv{width:16px;height:16px;color:var(--fg-2);transform:rotate(90deg);flex:none}
.home .wcs .th{float:left;width:44px;height:44px;margin:8px 0 8px 10px;border-radius:9px;background:var(--card);display:grid;place-items:center;font-family:var(--serif);font-size:20px;color:var(--fg-2)}
.home .wcs .gn{margin:0 12px;padding:8px 10px;border-radius:10px;background:var(--card);font-size:var(--small);color:var(--fg-2)}
.home .wcs .gn b{display:inline;font-family:var(--sans);font-size:inherit;font-weight:700;color:var(--fg)}
.home .wcs em{display:block;padding:8px 12px 12px;font-family:var(--serif);font-style:italic}
.home .mk.lrn>.lab{margin:12px 0 6px}
.home .bubs{display:grid;gap:6px}
.home .bub{display:flex;align-items:center;gap:10px;background:var(--card-2);border-radius:14px;padding:8px 8px 8px 12px}
.home .bub>div{flex:1;min-width:0}
.home .bub b{display:flex;align-items:center;font-weight:700}
.home .bub>div>span{display:block;font-family:var(--serif);font-size:var(--small);color:var(--fg-2);margin-top:1px}
.home .lv3{display:inline-flex;gap:3px;margin-left:6px}
.home .lv3 i{width:6px;height:6px;border-radius:50%;background:var(--track)}
.home .lv3 i.f{background:var(--t-g-fg)}
.home .mini{width:40px;height:40px;flex:none}
.home .mini circle{fill:none;stroke-width:5}
.home .mini .tr{stroke:var(--track)}
.home .mini .ar{stroke:var(--t-g-fg);stroke-linecap:round}
.home .mini text{font:700 11px var(--sans);fill:var(--fg);text-anchor:middle;dominant-baseline:central}
@keyframes epIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:900px){.home .einfo>div.on,.home .epanel.on{animation:epIn .45s var(--ease-out)}}
@media (prefers-reduced-motion:reduce){.home .einfo>div.on,.home .epanel.on{animation:none}}
.home .eres2{margin-top:10px;background:var(--card-2);border-radius:12px;padding:10px}
.home .eres2 .erh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:var(--small);color:var(--fg-2);font-weight:600}
.home .eres2 ul{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:8px}
.home .eres2 li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;border-radius:10px;padding:6px 2px;min-width:0}
.home .eres2 li.low{box-shadow:inset 0 0 0 2px var(--acc-copper)} /* taste-skill-ignore: app UI inside data-ui mocks */
.home .eres2 b{font-size:12px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.home .eres2 small{font-size:11px;color:var(--fg-2);white-space:nowrap}
.home .skr{display:block;width:min(60px,100%);height:auto}
.home .skr circle{fill:none;stroke-width:8}
.home .skr .tr{stroke:var(--track)}
.home .skr .ar{stroke-linecap:round}
.home .skr text{font-family:var(--serif);font-size:24px;fill:var(--fg);text-anchor:middle;dominant-baseline:central}
.home .lgrid{margin-top:12px}
.home .lgrid table{width:100%;border-collapse:separate;border-spacing:4px;font-size:12px;margin-top:2px}
.home .lgrid th{font-weight:600;color:var(--fg-2);text-align:center;padding:2px}
.home .lgrid th:first-child{text-align:left}
.home .lgrid td{background:var(--card-2);border-radius:8px;text-align:center;padding:8px 2px;font-weight:600;font-variant-numeric:tabular-nums}
.home .lgrid td.some{background:var(--t-g);color:var(--t-g-fg)}
.home .lgrid td.all{background:var(--t-g-fg);color:var(--btn-fg)}
.home .eres2 .lab{letter-spacing:.06em}
@media (max-width:600px){
  .home .mk .trow.ph-h{display:none}
  .home .eres2 .erh{flex-direction:column;gap:0}
  .home .eres2 b{font-size:11px}
  .home .eres2 li{padding:6px 0}
}
/* engine panels, 2026-10-26: the app's + and × rows, the Bericht and the next step */
.home .mk .sl1{margin-top:8px;font-size:14px;color:var(--fg-2)}
.home .mk .wl small{display:block;font-size:13px;color:var(--fg-2)}
.home .pk3{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;border:1px solid var(--line-2);color:var(--fg)}
.home .mk .wl li.out .pk3{background:var(--cta);border-color:var(--cta);color:#fff}
.home .pk3 .ic{width:17px;height:17px;stroke-width:2.4}
.home .mk.rep{display:grid;gap:6px}
.home .bh3{font-size:16px;font-weight:800;margin-top:8px}
.home .nstep{display:grid;gap:8px;justify-items:start;margin-top:6px;border:1.5px solid var(--ov-plan-line);border-radius:14px;padding:12px 14px}
.home .nstep .cta2{padding:10px 18px}
/* unit slideshow, vocab: the compact word cards of the unit page */
.home .vlist{display:grid;gap:6px;align-content:start}
.home .vlist .vlh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px}
.home .vlist .vlh b{font-family:var(--serif);font-weight:500;font-size:20px}
.home .vlist .vlh span{font-size:var(--small);color:var(--fg-2);font-weight:600;white-space:nowrap}
.home .vlist .wcs{margin:0}
.home .vlist .wcs .wr .th{float:none;margin:0;flex:none}
.home .vlist .wcs .th img{width:100%;height:100%;object-fit:cover;border-radius:9px}
.home .vlist .wcs.open .chv{transform:rotate(-90deg)}
.home .vlist .wcs.open .gn{margin-bottom:8px}
.home .vlist .vxe{display:flex;gap:10px;align-items:flex-start;padding:6px 12px}
.home .vlist .vxe:last-child{padding-bottom:12px}
.home .vlist .vxe p{font-family:var(--serif);font-size:17px;line-height:1.4}
.home .vlist .vxe small{display:block;font-size:12px;color:var(--fg-2);font-weight:500}
.home .vlist .vxe .snd{width:32px;height:32px}
@media (max-width:600px){.home .vlist .vlh{flex-direction:column;gap:0}}
/* Read it your way: a small unit page in the app's four themes */

/* ================= light theme = the app's Forest theme (lib/unit-player/overviewTheme.ts): off-white paper, deep-green ink, white cards.
   The site default since 2026-10-26: build.mjs sets html[data-theme="light"]; picking dark in the nav switch removes it and keeps localStorage['mp-theme']='dark'. */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#F7F5EE; --bg-2:#EEEADF; --card:#FFFFFF; --card-2:#F4F1E9; --deep:#173F32; --nav:rgba(251,250,246,.94);
  --fg:#183D32; --fg-2:#5C6A63; --on-deep:#F3F0E8; --on-deep-2:#BACCC2;
  --line:rgba(24,61,50,.1); --line-2:rgba(24,61,50,.22); --track:rgba(24,61,50,.1); --edge:rgba(24,61,50,.08);
  --sec-g:#E9EFE6; --sec-c:#F3E7D9; --t-g:#E2EEE0; --t-g-fg:#1F5A45; --t-c:#F6E3D0; --t-c-fg:#8A4B1C;
  --acc-green:#1F6B4F; --acc-copper:#9A5C2A; --copper-hi:#B8733D;
  --btn:#183D32; --btn-fg:#FFFFFF; --btn-hover:#0F2A22; --next:#2E6B4F; --bar6:#2E6B4F;
  --mk-g:#1F7A4F; --mk-b:#2A63AA; --mk-v:#6A45A8;
  --ov-kick:#15803D; --ov-plan:#ECFDF5; --ov-plan-line:#A7F3D0; --cta:#166534;
  --wt:#D1FAE5; --wt-line:#6EE7B7; --wt-ink:#064E3B; --wp:#FEF3C7; --wp-line:#FCD34D; --wp-ink:#78350F;
  --st-good:#166534; --st-good-fg:#FFFFFF; --st-mid:#DCFCE7; --st-mid-fg:#14532D; --st-mid-line:#B7E8C7; --st-low:#F1EADB; --st-low-fg:#5C4A2C; --st-low-line:#E2D7C1; --st-fail:#F7E4E2; --st-fail-fg:#8A2F2A; --st-fail-line:#EBC8C4;
  --blue:#2A63AA; --blue-2:#DCE8F7; --orange:#C2621F; --orange-2:#FBE3D1; --violet:#6A45A8; --violet-2:#EBE4FF; --green-3:#2F9E50;
  --float:0 12px 32px -18px rgba(24,61,50,.35);
}
html[data-theme="light"] nav{background:var(--nav)!important}
html[data-theme="light"] .home nav{background:var(--bg)!important}
html[data-theme="light"] .home .join{background:#F3E7D9}
html[data-theme="light"] .home .ex{background:var(--card)}
html[data-theme="light"] .home .tin input,html[data-theme="light"] .home .ex textarea{background:var(--card-2)}
html[data-theme="light"] .home .opts button{background:var(--card-2)}
html[data-theme="light"] .home .opts button:hover,html[data-theme="light"] .home .sf-nav button:hover{background:var(--bg-2)}
html[data-theme="light"] .home .opts button.no,html[data-theme="light"] .home .ex input.no,html[data-theme="light"] .home .gx .no{color:#B23A2A;border-color:#E39A8B}
html[data-theme="light"] .home .fb.no b{color:#B23A2A}
html[data-theme="light"] .home .mail,html[data-theme="light"] .home .pk,html[data-theme="light"] .home .spd,
html[data-theme="light"] .home .hopts span,html[data-theme="light"] .home .ttabs span,html[data-theme="light"] .home .sf-nav button,html[data-theme="light"] .home .flowf .sf-tabs [role="tab"]{background:var(--card-2)}
html[data-theme="light"] .home .ttabs span.on{background:#2E6B4F}
html[data-theme="light"] .home .sf-pb{background:var(--track)}
html[data-theme="light"] .home .fst.vo h3{color:#7A4FB0}html[data-theme="light"] .home .fst.gr h3{color:#B0631C}
html[data-theme="light"] .home .fst.le h3{color:#2A6AA8}html[data-theme="light"] .home .fst.ho h3{color:#1F7F6E}
html[data-theme="light"] .home .vtop .pos,html[data-theme="light"] .home .pill,html[data-theme="light"] .home .tdone,html[data-theme="light"] .home .gxa,html[data-theme="light"] .home .rec .exk{background:#DCE8F7;color:#1F4A7A}
html[data-theme="light"] .home .rdr[data-gram] b.g,html[data-theme="light"] .home .story b.g{background:#E0F0FC;color:#0B3A5E}
html[data-theme="light"] .home .rdr[data-vocab] b.v,html[data-theme="light"] .home .story b.v{background:#FEF0C4;color:#4A2A06}
html[data-theme="light"] .home .trb{color:#2A63AA}
html[data-theme="light"] .home .lvl,html[data-theme="light"] .home .pctabs button[aria-pressed="true"]{background:#EADFCB}
/* the nav switch */
.tmode{all:unset;box-sizing:border-box;cursor:pointer;width:44px;height:44px;border-radius:50%;display:inline-grid;place-items:center;color:var(--fg);background:var(--card);transition:background-color .2s ease,transform .16s var(--ease-out)}
.tmode:active{transform:scale(.92)}
.tmode:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.tmode .ic{width:20px;height:20px}
.tmode .sun,html[data-theme="light"] .tmode .moon{display:none}
html[data-theme="light"] .tmode .sun{display:block}
nav .wrap>ul .mtheme{display:none}
@media (max-width:900px){
  nav .navr .tmode{display:none}
  nav .wrap>ul .mtheme{display:block}
  nav .wrap>ul .mtheme .tmode{display:inline-flex;width:auto;border-radius:12px;padding:0 16px;gap:10px;font-weight:600}
}
.tmode .tl{display:none}nav .wrap>ul .mtheme .tmode .tl{display:inline}
html[data-theme="light"] .home .join{color:var(--fg)}
html[data-theme="light"] .home .ta{color:var(--on-deep)}
html[data-theme="light"] .home .skh b{color:color-mix(in srgb,var(--k) 50%,#183D32)}
html[data-theme="light"] .home .std .sx-l{color:var(--on-deep-2)}
html[data-theme="light"] .home .g2 .pc .ch span:not(.vb):not(.cn){background:#fff;border-bottom-color:var(--line-2)}
.home .rqh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px;color:var(--fg-2)}
.home .rqh .sc{margin:0}
/* Hören: the unit's scene picture and a real player */
.home .himg{border-radius:12px;overflow:hidden;aspect-ratio:16/7}
.home .himg img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.home button.pp{all:unset;box-sizing:border-box;cursor:pointer;width:48px;height:48px;border-radius:50%;background:var(--cta);color:#fff;display:grid;place-items:center;flex:none;transition:transform .16s var(--ease-out)}
.home button.pp:active{transform:scale(.94)}
.home button.pp:focus-visible{outline:2px solid var(--copper-hi);outline-offset:2px}
.home button.pp .ic{width:20px;height:20px;fill:currentColor;stroke:none}
.home button.pp .pa{display:none;fill:none;stroke:currentColor;stroke-width:3}
.home button.pp[aria-pressed="true"] .pl{display:none}
.home button.pp[aria-pressed="true"] .pa{display:block}
.home .pctl .ptime{flex:1}
.home .seek i{transition:width .25s linear}
.home .pt{white-space:nowrap}
.home .hplay .seek i{width:0}
/* Test: the unit test's own items, one Teil at a time */
.home .ttest .t1{font-weight:800;font-size:17px}
.home .titems{list-style:none;display:grid;gap:8px}
.home .titems li{display:flex;gap:12px;align-items:baseline;background:var(--card-2);border-radius:12px;padding:10px 14px}
.home .titems .tn{font-weight:800;color:var(--fg-2);flex:none}
.home .titems p{font-family:var(--serif);font-size:18px;line-height:1.7}
/* Zum Schluss, as the app shows it now: what holds you back, the next step, the unit result per skill, the next unit */
.home .rpt2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;font-family:var(--sans)}
.home .rpt2 .fcol{gap:16px}
.home .nstep2{border:1.5px solid var(--ov-plan-line)}
.home .nstep2 .cta2,.home .rpt2 .bcard>.cta2{justify-self:stretch}
.home .nstep2 .cta2{justify-self:start;padding:10px 18px}
.home .erg{display:flex;gap:14px;align-items:center}
.home .sk2r{position:relative;width:56px;height:56px;flex:none;display:grid;place-items:center}
.home .sk2r.big{width:72px;height:72px}
.home .sk2r svg{position:absolute;inset:0;width:100%;height:100%}
.home .sk2r b{position:relative;font-size:12px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.home .sk2r.big b{font-size:16px}
.home .sr circle{fill:none;stroke-width:5}
.home .sr .tr{stroke:var(--track)}
.home .sr .ar{stroke:var(--k,var(--cta));stroke-linecap:round}
.home .sk2l{list-style:none;display:grid;gap:4px;margin-top:6px}
.home .sk2{display:flex;gap:12px;align-items:center;padding:8px 0;border-top:3px solid transparent}
.home .sk2+.sk2{box-shadow:0 -1px 0 var(--line)} /* taste-skill-ignore: app UI inside data-ui mocks */
.home .sk2>div>b{display:block;font-weight:800;color:var(--k)}
.home .sk2d{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:4px;font-size:13px;color:var(--fg-2)}
.home .sk2d span{display:inline-flex;align-items:center;gap:5px}
.home .sk2s{font-size:13px;color:var(--fg-2)}
.home .kv{--k:#B691E0}.home .kg{--k:#E0A060}.home .kl{--k:#7FB8E6}.home .kh{--k:#6CCDB8}
html[data-theme="light"] .home .kv{--k:#7E3AA8}html[data-theme="light"] .home .kg{--k:#B45309}html[data-theme="light"] .home .kl{--k:#1F6FA0}html[data-theme="light"] .home .kh{--k:#13786A}
@media (max-width:960px){.home .rpt2{grid-template-columns:minmax(0,1fr)}}

/* Zum Schluss as the app's unit player shows it (CourseAssessmentSummary + CourseClosingExercises):
   next step, unit result with one card per part in the pass colours, then the wrong answers. */
.home .zs{background:var(--card-2);display:flex;flex-direction:column;gap:10px;font-family:var(--sans)}
.home .mk.zs{border:0;padding:14px}
.home .zs-next,.home .zs-all,.home .zs-miss li,.home .zs-c,.home .zs-more{background:var(--card);border-radius:16px}
.home .zs-next{padding:16px;display:grid;gap:6px}
.home .zs-k{font-size:13px;font-weight:650;letter-spacing:.02em;color:var(--fg-2)}
.home .zs-q{font-size:14px;color:var(--fg-2)}
.home .zs-btn{display:flex;align-items:center;justify-content:center;min-height:46px;margin-top:6px;border-radius:12px;background:var(--cta);color:#fff;font-weight:650}
.home .zs-sec{font-family:var(--serif);font-size:22px;font-weight:500;line-height:1.25;margin-top:6px}
.home .zs-lead,.home .zs-st,.home .zs-ln{font-size:13px;line-height:1.45;color:var(--fg-2)}
.home .zs-lead{margin-top:-6px}
.home .zs-all{display:flex;align-items:center;gap:14px;padding:14px;--k:var(--fg)}
.home .zs-all b{display:block;font-family:var(--serif);font-size:20px;font-weight:500;line-height:1.2}
.home .zs-all p{font-size:13px;color:var(--fg-2);margin-top:2px}
.home .zs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.home .zs-c{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;text-align:center;min-width:0}
.home .zs-n{font-size:16px;font-weight:650;margin-top:2px}
.home .zs-ok{background:var(--st-mid);box-shadow:inset 0 0 0 2px var(--st-good)} /* taste-skill-ignore: app UI inside data-ui mocks */
.home .zs-bad{background:var(--st-fail);box-shadow:inset 0 0 0 2px var(--st-fail-fg)} /* taste-skill-ignore: app UI inside data-ui mocks */
.home .zs-ok .zs-n{color:var(--st-mid-fg)}.home .zs-bad .zs-n{color:var(--st-fail-fg)}
.home .zs-dl{align-self:stretch;display:grid;gap:4px;margin-top:6px;font-size:12px}
.home .zs-dl div{display:flex;justify-content:space-between;gap:6px;padding:5px 8px;border-radius:8px;background:var(--card);text-align:left}
.home .zs-dl dt{color:var(--fg-2)}.home .zs-dl dd{font-weight:600;font-variant-numeric:tabular-nums}
.home .zs-miss{list-style:none;display:grid;gap:8px}
.home .zs-miss li{padding:14px}
.home .zs-miss small{display:block;font-size:13px;color:var(--fg-2)}
.home .zs-qq{margin-top:4px;font-family:var(--serif);font-size:17px;line-height:1.45}
.home .zs-y{margin-top:6px;font-size:15px;color:var(--fg-2)}
.home .zs-y span{font-family:var(--serif);color:var(--st-fail-fg)}
.home .zs-fb{margin-top:6px;font-size:14px;line-height:1.5;color:var(--fg-2)}
.home .zs-fb b{color:var(--fg);font-weight:650}
.home .zs-ex{margin-top:8px;border-radius:10px;padding:10px 12px;background:var(--st-mid)}
.home .zs-ex small{color:var(--st-mid-fg);font-weight:650}
.home .zs-ex p{font-family:var(--serif);margin-top:2px}
.home .zs-more{display:flex;justify-content:space-between;align-items:center;min-height:46px;padding:0 14px;font-size:15px;font-weight:600}
.home .zs-more::after{content:"+";font-size:20px;font-weight:400;color:var(--fg-2)}
.home .zs-m .zs-grid .zs-ln:last-child{display:none}
@media (min-width:1100px){.home .fui.zs .zs-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* One fixed frame per slideshow: every stage keeps the same height and the app screen
   scrolls inside it, as on the phone, so no stage leaves the frame half empty. */
.home .flowf .sf-track{height:clamp(600px,74vh,700px)}
.home .flowf .sf-slide{height:100%;grid-template-rows:auto minmax(0,1fr)}
.home .fscr{min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;border-radius:18px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.home .fscr>*{flex:none}
.home .fscr>:last-child{flex:1 0 auto}
.home .emock{height:clamp(460px,62vh,580px);grid-template-rows:minmax(0,1fr)}
.home .epanel{min-height:0}
.home .epanel>.mk{max-height:100%;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
@media (max-width:760px){
  .home .flowf .sf-track{height:620px}
  .home .emock{height:480px}
}

/* Engine path, plain: five circles on one line that fills up to the active step;
   the number sits with the name instead of a badge on the circle.
   The dashed MeisterPath arc closes the loop from Improve back to Select. */
.home .engine .step .n b{display:none}
.home .engine .steps::after{content:"";position:absolute;left:10%;top:34px;height:2px;width:0;background:var(--copper);transition:width .6s var(--ease-out)}
.home .engine .steps:has(.step:nth-child(2).on)::after{width:20%}
.home .engine .steps:has(.step:nth-child(3).on)::after{width:40%}
.home .engine .steps:has(.step:nth-child(4).on)::after{width:60%}
.home .engine .steps:has(.step:nth-child(5).on)::after{width:80%}
.home .engine .step .t{counter-increment:eng}
.home .engine .steps{counter-reset:eng}
.home .engine .step .t::before{content:counter(eng);display:block;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--copper);margin-bottom:4px}
.home .engine .step.on .n{transform:none;outline:6px solid var(--bg)} /* the gap ring around the active circle */
@media (max-width:760px){
  .home .engine .steps::after{top:24px}
  .home .engine .step .t::before{font-size:11px;margin-bottom:2px}
}
@media (prefers-reduced-motion:reduce){.home .engine .steps::after{transition:none}}
.home .engine .step{z-index:1}
.home .zs-m .zs-dl{display:none}

/* Flashcard, as the app's Karteikarte: word and sound on the front; meaning, forms and
   example with DE/EN audio on the back. A click or Enter turns it over. */
.home .fc{cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
/* the card turns flat: it narrows to its edge, swaps face at the middle, and widens again.
   No 3D layers: a preserve-3d card inside the scrolling stage frame flickers on iPhone Safari. */
.home .fc-in{display:grid}
.home .fc.t .fc-in{animation:fcB .5s linear}
.home .fc.t.flip .fc-in{animation:fcA .5s linear}
@keyframes fcA{0%{transform:scaleX(1);animation-timing-function:cubic-bezier(.5,0,.75,0)}50%{transform:scaleX(0);animation-timing-function:cubic-bezier(.25,1,.5,1)}100%{transform:scaleX(1)}}
@keyframes fcB{0%{transform:scaleX(1);animation-timing-function:cubic-bezier(.5,0,.75,0)}50%{transform:scaleX(0);animation-timing-function:cubic-bezier(.25,1,.5,1)}100%{transform:scaleX(1)}}
.home .fc-f,.home .fc-b{grid-area:1/1;background:var(--card-2);border:1px solid var(--line);border-radius:14px;min-height:0;transition:visibility 0s .25s}
.home .fc-b{visibility:hidden;padding:12px 14px;overflow:hidden;scrollbar-width:thin;display:flex;flex-direction:column;gap:6px}
.home .fc.flip .fc-b{visibility:visible;overflow-y:auto}
.home .fc.flip .fc-f{visibility:hidden}
.home .fc:focus-visible .fc-f,.home .fc:focus-visible .fc-b{outline:2px solid var(--copper);outline-offset:2px}
.home .fc-f{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:28px 14px 18px}
.home .fc-sel{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:6px;background:var(--cta);color:#fff;display:grid;place-items:center;opacity:.55}
.home .fc-sel .ic{width:14px;height:14px}
.home .fc-pos{font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--fg-2)}
.home .fc-w{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3vw,32px);line-height:1.15;color:var(--fg);overflow-wrap:break-word;hyphens:manual}
.home .fc-w i{font-style:normal;color:var(--acc-copper)}
.home .fc-w.sm{font-size:22px}
.home .fc-snd{width:38px;height:38px;border:1px solid var(--line-2)}
.home .fc-btn{margin-top:4px;padding:9px 16px;border-radius:10px;background:var(--cta);color:#fff;font-weight:700;font-size:var(--small);transition:transform .16s var(--ease-out)}
.home .fc:active .fc-btn{transform:scale(.97)}
.home .fc-id{display:flex;align-items:center;justify-content:space-between;font-size:var(--small);color:var(--fg-2)}
.home .fc-id .fc-snd{width:34px;height:34px}
.home .fc-k{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--t-g-fg);display:flex;justify-content:space-between}
.home .fc-k span{letter-spacing:0;font-weight:600;color:var(--fg-2)}
.home .fc-tr{font-weight:700;margin-top:-4px}
.home .fc-box{background:var(--card);border-radius:10px;padding:8px 10px;font-size:var(--small)}
.home .fc-bt{font-weight:700;color:var(--t-g-fg);margin-bottom:2px}
.home .fc-ex{border-top:1px solid var(--line);padding-top:8px}
.home .fc-s{font-family:var(--serif);font-weight:500;margin-top:4px}
.home .fc-au{display:flex;gap:4px;margin-top:4px}
.home .fc-lb{width:auto;height:34px;padding:0 10px;border-radius:9px;display:inline-flex;gap:4px;color:var(--t-g-fg)}
.home .fc-lb small{font-size:10px;font-weight:800}
.home .fc-lb .ic,.home .fc-snd .ic{width:16px;height:16px}
.home .fc-cnt{text-align:center;font-size:11px;font-weight:600;color:var(--fg-2);margin:8px 0 4px}
.home .fc-nav{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:var(--small);font-weight:700;color:var(--t-g-fg)}
.home .fc-nav .fc-opt{font-weight:600;color:var(--fg-2)}
.home .lrn .fc{margin-bottom:12px}
.home .lrn .fc-in{height:clamp(250px,34vh,300px)}
.home .wlst .fc-in{height:clamp(270px,36vh,320px)}
@media (hover:hover) and (pointer:fine){.home .fc:hover .fc-btn{transform:translateY(-1px)}}
@media (prefers-reduced-motion:reduce){
  .home .fc.t .fc-in,.home .fc.t.flip .fc-in{animation:none}
  .home .fc-f,.home .fc-b{transition:none}
}

/* Überblick: "Wähle deine Übungen", as the app's overview. Tested words and grammar are locked;
   + and × move practice words in or out of Meine Sammlung. */
.home .ovsel{margin-top:14px;font-size:var(--ui)}
.home .ovsel .ovq{font-weight:700;font-size:17px}
.home .ovsel .ovi{color:var(--fg-2);font-size:var(--small);margin-top:4px;max-width:60ch}
.home .ovsh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:16px;font-size:var(--small)}
.home .ovsh>b{font-size:16px;font-weight:700}
.home .ovsh span{color:var(--fg-2)}
.home .ovg{display:flex;justify-content:space-between;margin-top:10px;font-size:12px;font-weight:700;color:var(--t-g-fg)}
.home .ovsel .wl{list-style:none;margin-top:6px;background:var(--card-2);border-radius:12px;padding:2px 0}
.home .ovsel .wl li{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;transition:opacity .2s}
.home .ovsel .wl li+li{box-shadow:0 -1px 0 var(--card)} /* taste-skill-ignore: app UI inside data-ui mocks */
.home .ovsel .wl li>div{flex:1;min-width:0;transition:opacity .2s}
.home .ovsel .wl b{display:block;font-family:var(--serif);font-weight:500;font-size:17px;line-height:1.25}
.home .ovsel .wl b i{font-style:normal;color:var(--acc-copper)}
.home .ovsel .wl small{display:block;font-size:13px;color:var(--fg-2)}
.home .ovsel .wl li.out>div{opacity:.5}
.home .ovsel .pk3.tg{all:unset;box-sizing:border-box;cursor:pointer;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;border:1px solid var(--line-2);color:var(--fg);transition:transform .16s var(--ease-out),background-color .2s}
.home .ovsel .pk3.tg:active{transform:scale(.94)}
.home .ovsel .pk3.tg:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.home .ovsel li.out .pk3.tg{background:var(--cta);border-color:var(--cta);color:#fff}
.home .ovsel .pk3.lk{border:0;color:var(--fg-2)}
@media (prefers-reduced-motion:reduce){.home .ovsel .pk3.tg,.home .ovsel .wl li>div{transition:none}}

/* Sammlung, Übungen view: the app's Lernraster (R/P rows by Erkennen · Erinnern · Anwenden),
   then the collection's exercises inline. */
.home .lr{margin-top:12px;background:var(--card-2);border-radius:14px;padding:12px}
.home .lr-h{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.home .lr-t{font-weight:700;font-size:16px}
.home .lr-n{font-size:12px;color:var(--fg-2)}
.home .lr-g{display:grid;grid-template-columns:20px repeat(3,minmax(64px,1fr));gap:4px;align-items:center;flex:1;max-width:340px}
.home .lr-s{font-size:11px;font-weight:700;text-align:center;color:var(--fg-2)}
.home .lr-r{font-size:12px;font-weight:800;text-decoration:none;color:var(--fg-2);text-align:center}
.home .lr-c{display:grid;place-items:center;height:34px;border-radius:9px;font-weight:700;font-size:13px;background:var(--card)}
.home .lr-c[data-tone="ok"]{background:var(--t-g);color:var(--t-g-fg)}
.home .lr-c[data-tone="mid"]{background:var(--t-c);color:var(--t-c-fg)}
.home .lr-c[data-tone="low"]{background:var(--card);color:var(--fg-2)}
.home .lr-c.na{opacity:.5}
.home .lr-l{margin-top:8px;font-size:12px;color:var(--fg-2)}
.home .coll .hq{margin-top:12px}

/* Test: the app's unit-test row: level, title, no-help note, "Teil n von m" and the part strip */
.home .tey{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t-g-fg)}
.home .tti{font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.15;margin-top:2px}
.home .tno{font-size:var(--small);color:var(--fg-2);margin-top:2px}
.home .tln{font-weight:700;margin-top:12px}
.home .tstrip{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.home .tstrip span{min-width:36px;height:34px;padding:0 8px;display:grid;place-items:center;border-radius:9px;background:var(--card-2);font-weight:700;font-size:14px}
.home .tstrip span.d{color:var(--t-g-fg)}
.home .tstrip span.on{background:#2E6B4F;color:#fff}

/* The difference: one system, not more tools (Nit 10-29); two columns, the open Übungen, one feedback card, one closing line */
.home .std .head2{align-items:start}
.home .std-eb{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-2);margin:0 0 14px}
.home .std .sx-l{color:var(--sage-2);max-width:48ch}
.home .std-fb{background:var(--paper);color:var(--ink);border-radius:18px;padding:22px 24px;font-family:var(--sans);font-size:15px;line-height:1.45}
.home .std-fbh{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:20px;font-weight:600;margin:0 0 6px}
.home .std-no{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--sage);color:var(--green);font-family:var(--sans);font-size:14px;font-weight:700}
.home .std-fbi{color:var(--ink-2);margin:0 0 14px}
.home .std-fi{border:1px solid var(--paper-2);border-radius:12px;padding:12px 14px;margin-top:10px;background:#fff}
.home .std-fi p{margin:0}
.home .std-fi>p:first-child{font-family:var(--serif);font-size:16px}
.home .std-fw{color:var(--ink-2);margin-top:4px!important}
.home .std-x{margin-top:10px!important;position:relative;padding-left:20px}
.home .std-x .xg{position:absolute;left:1px;top:-1px;font-size:18px;line-height:1.3;font-weight:700;color:#B3261E}
.home .std-x s{color:#B3261E}
.home .std-ok{padding-left:20px;margin-top:4px!important;color:var(--ink)}
.home .std-ok u{text-decoration:underline;text-decoration-color:var(--green-2);text-decoration-thickness:2px;text-underline-offset:3px;font-weight:600}
.home .std-q{font-family:var(--serif);font-size:clamp(24px,3vw,36px);line-height:1.15;letter-spacing:-.01em;max-width:22ch;margin:clamp(56px,8vh,96px) 0 0}
@media (max-width:760px){
  .home .std .head2{grid-template-columns:1fr;gap:12px}
  .home .std-fb{padding:16px}
}

/* blog components (Nit 10-29: posts were "really really dry"): tick lists, verdict lists, stat rows, steps, do/don't pairs, SVG plots; all on tokens, so both themes work */
.prose .ticks,.prose .steps,.prose .vs ul{list-style:none;padding:0;margin-left:0;margin-bottom:0}
.prose .vs ul{margin-top:0}
.prose h3+.ticks,.prose h3+.steps{margin-top:14px}
.prose .ticks li{position:relative;padding-left:34px}
.prose .ticks li+li{margin-top:10px}
.prose .ticks li .ic{position:absolute;left:0;top:3px;width:22px;height:22px;color:var(--acc-green);stroke-width:2.2}
.prose .ticks li.no .ic{color:#E07A5F}
.prose .ticks li.so .ic{color:var(--copper-hi)}
.prose .ticks b{color:var(--fg)}
.prose .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:22px}
.prose .stats div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.prose .stats b{display:block;font-family:var(--serif);font-size:34px;line-height:1;font-weight:600;color:var(--fg);font-variant-numeric:lining-nums tabular-nums}
.prose .stats span{display:block;margin-top:6px;font-family:var(--sans);font-size:var(--ui);color:var(--fg-2);line-height:1.35}
.prose .steps{counter-reset:bs;display:grid;gap:12px;margin-top:22px}
.prose .steps li{counter-increment:bs;display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.prose .steps li::before{content:counter(bs);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--t-g);color:var(--t-g-fg);font-family:var(--sans);font-weight:700;font-size:16px}
.prose .steps b{display:block;color:var(--fg);margin-bottom:2px}
.prose .steps li>div{font-size:17px}
.prose .vs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.prose .vs>div{border-radius:14px;padding:18px 20px;border:1px solid var(--line);background:var(--card)}
.prose .vs>div.good{background:var(--t-g);border-color:transparent}
.prose .vs>div.good,.prose .vs>div.good b{color:#fff}
html[data-theme="light"] .prose .vs>div.good,html[data-theme="light"] .prose .vs>div.good b{color:var(--green)}
.prose .vs b{display:block;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;color:var(--fg-2)}
.prose .vs li{position:relative;padding-left:26px;font-size:17px}
.prose .vs li+li{margin-top:8px}
.prose .vs li .ic{position:absolute;left:0;top:4px;width:18px;height:18px;stroke-width:2.4}
.prose figure.plot{margin-top:28px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px 16px}
.prose figure.plot svg{display:block;width:100%;height:auto;font-family:var(--sans);font-variant-numeric:lining-nums tabular-nums}
.prose figure.plot svg text{fill:var(--fg-2);font-size:14px}
.prose figure.plot svg text.v{fill:var(--fg);font-weight:600}
.prose figure.plot svg .ax{stroke:var(--line-2);stroke-width:1}
.prose figure.plot svg .grid{stroke:var(--line);stroke-width:1}
.prose figure.plot svg .bar{fill:var(--copper-hi)}
.prose figure.plot svg .bar.g{fill:var(--acc-green)}
.prose figure.plot svg .bar.m{fill:var(--line-2)}
.prose figure.plot svg .ln{fill:none;stroke:var(--copper-hi);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.prose figure.plot svg .ln.g{stroke:var(--acc-green)}
.prose figure.plot svg .ln.m{stroke:var(--line-2);stroke-dasharray:4 6}
.prose figure.plot svg .dot{fill:var(--copper-hi)}
.prose figure.plot svg .area{fill:var(--copper-hi);opacity:.14}
.prose figure.plot figcaption{margin-top:12px;font-family:var(--sans);font-size:var(--ui);color:var(--fg-2)}
.prose .tbl-wrap{overflow-x:auto;margin-top:22px}
.prose .tbl-wrap table{margin-top:0;min-width:480px}
.prose td .ic{width:18px;height:18px;vertical-align:-4px;margin-right:6px;stroke-width:2.2}
.prose td.ok .ic{color:var(--acc-green)}.prose td.no .ic{color:#E07A5F}.prose td.so .ic{color:var(--copper-hi)}
.prose .key{font-family:var(--sans);font-size:var(--ui);color:var(--fg-2)}
figure.plot.reveal.on .bar,.reveal.on figure.plot .bar{animation:plotUp .8s var(--ease-out) both}
figure.plot.reveal.on .ln,.reveal.on figure.plot .ln{stroke-dasharray:2000;stroke-dashoffset:2000;animation:plotDraw 1.6s var(--ease-out) forwards}
@keyframes plotUp{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes plotDraw{to{stroke-dashoffset:0}}
.prose figure.plot .bar{transform-origin:bottom;transform-box:fill-box}
@media (prefers-reduced-motion:reduce){figure.plot.reveal.on .bar,figure.plot.reveal.on .ln,.reveal.on figure.plot .bar,.reveal.on figure.plot .ln{animation:none;stroke-dashoffset:0}}
@media (max-width:760px){.prose .vs{grid-template-columns:1fr}.prose .stats b{font-size:28px}.prose figure.plot svg text{font-size:20px}}

.home .tstrip span.d{display:inline-flex;align-items:center;justify-content:center;gap:3px}
.home .tstrip span .ic{width:12px;height:12px;stroke-width:3}
.prose .steps{grid-template-columns:1fr}
.prose .steps::before{display:none}

/* One system (Nit 10-30: "the same shit ... repetition"): the five needs named once, each with its tool elsewhere and the tick here */
.home .os{list-style:none;padding:0;margin:clamp(32px,5vh,56px) 0 0;font-family:var(--sans);max-width:720px}
.home .os li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) 120px;align-items:center;gap:16px;padding:14px 0}
.home .os li+li{border-top:1px solid rgba(248,245,237,.14)}
.home .os-h{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sage-2);padding-bottom:6px}
.home .os-h span:last-child,.home .os-t{text-align:center}
.home .os-n{font-family:var(--serif);font-size:clamp(22px,2.2vw,28px);color:var(--paper)}
.home .os-e{font-size:16px;color:var(--sage-2)}
.home .os-t{display:flex;justify-content:center}
.home .os-t .ic{width:30px;height:30px;padding:5px;border-radius:50%;background:var(--paper);color:var(--green-2);stroke-width:3;transform:scale(0);transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.home .os.on .os-t .ic{transform:scale(1)}
.home .os.on li:nth-child(3) .os-t .ic{transition-delay:.12s}.home .os.on li:nth-child(4) .os-t .ic{transition-delay:.24s}.home .os.on li:nth-child(5) .os-t .ic{transition-delay:.36s}.home .os.on li:nth-child(6) .os-t .ic{transition-delay:.48s}
@media (max-width:760px){
  .home .os li{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) auto;gap:10px;padding:12px 0}
  .home .os-h{font-size:11px;white-space:nowrap}
  .home .os-e{font-size:14px}
  .home .os-t .ic{width:26px;height:26px}
}

/* Different learners, different needs (Nit 10-29, merged into One system 10-30: "just repetition again and again"): the asks as a tick list the visitor can mark as theirs; the feedback card beside it */
.home .sx .want-h{margin-top:clamp(56px,8vh,96px)}
.home .want-h .sx-h{font-size:clamp(28px,3.6vw,52px)}
.home .want-g{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,56px);align-items:start;margin-top:clamp(32px,5vh,56px)}
.home .wlist{list-style:none;padding:0;margin:0}
.home .wlist li+li{margin-top:6px}
.home .wlist button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:start;width:100%;padding:16px 10px 16px 0;border-left:3px solid transparent;transition:background-color .25s ease,border-color .25s ease,padding .25s ease}
.home .wlist button:hover{background:rgba(248,245,237,.06)}
.home .wlist button:focus-visible{outline:2px solid var(--copper-hi);outline-offset:2px}
.home .wlist button[aria-pressed="true"]{border-left-color:var(--copper-hi);padding-left:12px;background:rgba(248,245,237,.08)}
.home .wlist .wt{grid-row:1/3;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--paper);color:var(--green);margin-top:2px}
.home .wlist .wt .ic{width:16px;height:16px;stroke-width:3;transform:scale(0);transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.home .wlist.on .wt .ic{transform:scale(1)}
.home .wlist.on li:nth-child(n) .wt .ic{transition-delay:calc(var(--i,0)*.09s)}
.home .wlist li:nth-child(1){--i:0}.home .wlist li:nth-child(2){--i:1}.home .wlist li:nth-child(3){--i:2}.home .wlist li:nth-child(4){--i:3}.home .wlist li:nth-child(5){--i:4}.home .wlist li:nth-child(6){--i:5}
.home .wlist .wn{font-family:var(--serif);font-size:21px;font-weight:500;line-height:1.25;color:var(--paper)}
.home .wlist button[aria-pressed="true"] .wn{font-weight:600}
.home .wlist .wa{font-family:var(--sans);font-size:15px;color:var(--sage-2);line-height:1.4}
.home .want-sum{font-family:var(--serif);font-size:22px;margin:28px 0 0;color:var(--paper)}
@media (max-width:760px){
  .home .want-g{grid-template-columns:1fr;gap:28px}
  .home .wlist .wn{font-size:18px}
  .home .wlist .wa{font-size:14px}
}

/* Unit test as the exam page (Nit 10-29): Teil chips with their count, red "Test abgeben", one Teil per page */
.home .ex2{gap:12px}
.home .ex2h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.home .ex2t{display:flex;gap:6px;flex-wrap:wrap}
.home .ex2t [role="tab"]{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:999px;background:var(--card-2);font-weight:700;font-size:14px;color:var(--fg-2)}
.home .ex2t [role="tab"] small{font-size:12px;font-weight:700;opacity:.6}
.home .ex2t [role="tab"] .ic{width:14px;height:14px}
.home .ex2t [role="tab"][aria-selected="true"]{background:#2E6B4F;color:#fff}
.home .ex2t [role="tab"]:focus-visible,.home .ex2s:focus-visible,.home .rwb:focus-visible,.home .wsel:focus-visible{outline:2px solid var(--copper-hi);outline-offset:2px}
.home .ex2s{all:unset;box-sizing:border-box;cursor:pointer;min-height:36px;padding:0 14px;border-radius:999px;background:#C2402A;color:#fff;font-weight:700;font-size:14px}
.home .ex2p{display:grid;gap:12px;background:var(--card-2);border-radius:14px;padding:14px 16px}
.home .ex2p .letter{background:var(--card);padding:12px 14px}
.home .ex2hd .t1{margin-bottom:2px}
.home .ex2p textarea{font:inherit;font-family:var(--serif);font-size:18px;line-height:1.6;color:var(--fg);background:var(--card);border:1.5px solid var(--line-2);border-radius:10px;padding:10px 12px;width:100%;resize:vertical}
.home .ex2p textarea:focus-visible{outline:2px solid var(--copper-hi);outline-offset:1px}
.home .ex2p .wfb{display:none}
.home .ex2p.is-done .wfb{display:block;animation:fbin .36s var(--ease-out)}

/* Lesen: an unknown word opens its card; one tap puts it in Meine Sammlung */
.home .rw{position:relative;display:inline}
.home .rwb{all:unset;cursor:pointer;border-bottom:2px dotted var(--copper-hi);padding-bottom:1px}
.home .rw.open .rwb{background:var(--t-g)}
.home .wcard{margin:4px 16px 18px;background:var(--card-2);border-radius:14px;padding:14px 16px;font-family:var(--sans);font-size:14px;line-height:1.4;display:grid;gap:6px;animation:fbin .25s var(--ease-out)}
.home .wcard[hidden]{display:none}
.home .wcard>b{font-family:var(--serif);font-size:18px;font-weight:600}
.home .wtr{color:var(--fg-2)}
.home .wsel{all:unset;box-sizing:border-box;cursor:pointer;margin-top:4px;min-height:40px;padding:0 12px;border-radius:10px;border:1.5px solid var(--green-2);color:var(--green-2);font-weight:700;display:inline-flex;align-items:center;gap:6px;transition:background-color .25s ease,color .25s ease}
.home .wsel .w1{display:none;align-items:center;gap:6px}
.home .wsel .ic{width:16px;height:16px;stroke-width:3}
.home .wsel.in{background:var(--green-2);color:#fff;border-color:var(--green-2)}
.home .wsel.in .w0{display:none}.home .wsel.in .w1{display:inline-flex}
.home .wnt{font-size:12px;color:var(--fg-2)}

/* Tested in context: writing with a correction on every line (Nit 10-29) */
.home .wtxt{background:var(--card-2);border-radius:12px;padding:14px 16px}
.home .wtxt p{font-family:var(--serif);font-size:19px;line-height:1.8}
.home .wtxt p+p{margin-top:8px}
.home .wk s{color:#F4B6A4;display:none}
.home .wk u{text-decoration:underline;text-decoration-color:#8CD9A9;text-decoration-thickness:2px;text-underline-offset:4px}
.home .wx.is-done .wk s{display:inline;margin-right:6px}
.home .wx.is-done .wk u{color:#B6F0C8;font-weight:600}
.home .wlst-fb{display:none;list-style:none;padding:0;margin:0;gap:8px;font-size:15px;line-height:1.45}
.home .wx.is-done .wlst-fb{display:grid;animation:fbin .36s var(--ease-out)}
.home .wlst-fb li{padding:10px 12px;border-radius:10px;background:var(--card-2)}
.home .wlst-fb li b{display:block;color:#F4B6A4;margin-bottom:2px}
.home .wlst-fb li.good b{color:#B6F0C8}
html[data-theme="light"] .home .wk s{color:#B3261E}
html[data-theme="light"] .home .wx.is-done .wk u{color:var(--green-2)}
html[data-theme="light"] .home .wlst-fb li b{color:#B3261E}
html[data-theme="light"] .home .wlst-fb li.good b{color:var(--green-2)}

/* The unit frame's side list is a plain list again, not a card: less box, less empty box under it (Nit: "the side space looks ugly") */
@media (min-width:761px){.home .flowf{grid-template-columns:200px minmax(0,1fr)}.home .sf-side{align-self:stretch;display:flex;flex-direction:column}.home .flowf .sf-nav{margin-top:auto}}
.home .ex2p[hidden]{display:none}
.home .gt-f .sf-tabs{margin-bottom:14px}
.home .gt-f .sf-track{gap:16px}
.home .gt-f{max-width:820px;margin-inline:0}
.home .wsel{justify-self:start}

/* review round (Nit 10-29: "alignment, empty spaces"): level totals as number over label; hero chips off the phone; frames whose slides differ in height follow the active slide */
.home .cefr .totals span{display:grid;gap:4px}
.home .cefr .totals b{margin:0}
@media (max-width:760px){.home .hero .chip{display:none}.stage .blk.clean{margin-top:22px}.stage .next{margin-top:18px}}
.home .sf-fit .sf-track{transition:height .35s var(--ease-out)}
.stage .next .chip.c3{top:auto;bottom:-56px;right:-26px}

/* stage frames (Nit 10-30: "the scroll at bottom is not that clear"): a fade and an arrow until the end of the frame has been seen */
.home .fst{position:relative}
.home .fst::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;border-radius:0 0 18px 18px;background:linear-gradient(to bottom,transparent,var(--bg-2));pointer-events:none;opacity:0;transition:opacity .3s}
.home .fst::before{content:"↓";position:absolute;left:50%;bottom:10px;z-index:2;width:34px;height:34px;border-radius:50%;background:var(--copper);color:#fff;font-family:var(--sans);font-size:18px;line-height:34px;text-align:center;pointer-events:none;opacity:0;transform:translate(-50%,8px);transition:opacity .3s,transform .3s}
.home .fst.sc-more::after{opacity:1}
.home .fst.sc-more::before{opacity:1;transform:translate(-50%,0);animation:bob 1.8s ease-in-out .6s infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-6px)}}
@media (prefers-reduced-motion:reduce){.home .fst.sc-more::before{animation:none}}
/* Überblick leads with the selection (Nit 10-30: "the selection part is the key"); the picture is in Lesen */
.home .ovsel{margin-top:4px}

/* One system / Your way (Nit 11-05: the four panels "can dissapear"; the table, the exercise types and the needs list move up as two tabs) */
.home .sw-f .sf-tabs{margin-bottom:clamp(20px,3vh,32px)}
.home .std .sf-tabs [role="tab"]{color:var(--sage-2);border:1.5px solid rgba(248,245,237,.24)}
.home .std .sf-tabs [role="tab"]:hover{color:var(--paper)}
.home .std .sf-tabs [role="tab"][aria-selected="true"]{background:var(--paper);border-color:var(--paper);color:var(--green)}
.home .sw-f .os,.home .sw-f .std-ty{margin-top:0}
.home .sw-f .sf-slide{padding:2px}
.home .std .sw-f .want-h{margin-top:clamp(40px,6vh,56px)}
.home .sw-f .want-h .sx-h{font-size:clamp(26px,3vw,36px);line-height:1.15;letter-spacing:-.01em}
.home .sw-f .want-h .sx-l{margin-top:8px}
.home .sw-f .wlist{margin-top:20px}
/* Three tabs, one height (Nit 11-07: "left part and right part have different lengths and change website flow"): the track keeps the tallest panel, the needs list shows the answer of the last tick in one line */
.home .sw-f .sf-track{align-items:stretch}
.home .std .sw-f .want-h{margin-top:0}
.home .sw-f .wlist button{padding-top:11px;padding-bottom:11px;grid-template-rows:auto}
.home .sw-f .wlist .wa{display:none}
.home .sw-f .want-sum{font-family:var(--sans);font-size:16px;line-height:1.45;color:var(--sage-2);min-height:2.9em;margin-top:16px}
/* exercise types (Nit 11-01: "many exercise types and the system makes you learn from the types you like") */
.home .std-ty{margin-top:clamp(40px,6vh,72px);max-width:760px}
.home .std-tyh{font-family:var(--serif);font-size:clamp(26px,3vw,36px);line-height:1.15;letter-spacing:-.01em;color:var(--paper);max-width:26ch;text-wrap:balance}
.home .std-tyd{margin-top:10px;color:var(--sage-2);font-size:var(--body)}
.home .std-tyl{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px;font-family:var(--sans)}
.home .std-tyl button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(248,245,237,.24);color:var(--paper);font-size:16px;font-weight:600;transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .16s var(--ease-out)}
.home .std-tyl button .ic{width:0;height:16px;stroke-width:3;opacity:0;transition:width .2s var(--ease-out),opacity .2s ease}
.home .std-tyl button[aria-pressed="true"]{background:var(--paper);border-color:var(--paper);color:var(--green)}
.home .std-tyl button[aria-pressed="true"] .ic{width:16px;opacity:1}
.home .std-tyl button:active{transform:scale(.97)}
.home .std-tyl button:focus-visible{outline:2px solid var(--copper-hi);outline-offset:2px}
@media (max-width:600px){.home .std-tyh{font-size:22px}}
@media (hover:hover) and (pointer:fine){.home .std-tyl button:hover{border-color:rgba(248,245,237,.5)}}

/* Different needs: the list alone, two columns on a desk (the Passiv card moved up to Feedback that matters) */
.home .want-g{grid-template-columns:minmax(0,1fr)}
.home .wlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,3vw,40px);row-gap:6px}
.home .wlist li+li{margin-top:0}
@media (max-width:760px){.home .wlist{grid-template-columns:minmax(0,1fr)}}

/* Content first (Nit 11-01: "we don't need to say again vocab grammar Zum Schluss etc they are taking too much space what we want to show there is content"):
   the tab already names the stage or panel, so the big title and its sentence are kept for screen readers only and the app screen fills the frame */
.home .fst-h{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.home .flowf .sf-slide{grid-template-rows:minmax(0,1fr)}
/* Test stage (Nit 11-01: only the Sprachbausteine example): the screen ends with the letter */
.home #st-test .fscr>:last-child{flex:none}
/* Test stage: the unit test parts turn on their own inside the stage (Sprachbausteine, Hören, Schreiben) */
.home .flowf .tt-f .sf-tabs{flex-direction:row;gap:6px}
.home .flowf .tt-f .sf-tabs [role="tab"]{width:auto;padding:0 14px}
.home .flowf .tt-f .sf-track{height:auto}
.home .flowf .tt-f .sf-slide{height:auto;grid-template-rows:none}
.home .tt-f{min-width:0}
.home .tt-f .ex2p{align-content:start}
.home .tt-f .wtxt{background:none;padding:0}
@media (max-width:600px){.home .tt-f .wtxt p{font-size:16px;line-height:1.55}}
/* Engine panels (Nit 11-05: "too much happening… make it cleaner"): the five steps drive five quiet app screens in one frame,
   one per step, as the app's unit shows them now: pick words, one rule, a few lines of the story, one test item, what to practise next */
.home .engf{background:var(--bg-2);border-radius:22px;padding:clamp(12px,3vw,40px)}
.home .engf .sf-track{align-items:stretch}
.home .eng-p{display:flex;align-items:center;justify-content:center}
.home .eng-m{width:min(100%,600px)}
.home .sel{display:grid;gap:12px}
.home .sel-img{margin:0;border-radius:12px;overflow:hidden;aspect-ratio:4/1;background:var(--t-g)}
.home .sel-img img{display:block;width:100%;height:100%;object-fit:cover}
.home .sel-l{font-size:14px;color:var(--fg-2)}
.home .sel-l b{color:var(--fg);font-weight:700}
.home .sel-s{font-size:13px;font-weight:700;color:var(--t-g-fg)}
.home .sel-c{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.home .sel-c li{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:5px 16px 5px 5px;border:1px solid var(--line-2);border-radius:999px;background:var(--card)}
.home .sel-t{all:unset;box-sizing:border-box;cursor:pointer;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--t-g);color:var(--t-g-fg);transition:background-color .2s ease,transform .16s var(--ease-out)}
.home .sel-t .ic{width:16px;height:16px;stroke-width:2.6}
.home .sel-t:active{transform:scale(.94)}
.home .sel-t:focus-visible{outline:2px solid var(--copper-hi);outline-offset:2px}
.home .sel-c li.out .sel-t{background:none;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--fg)} /* taste-skill-ignore: app UI inside data-ui mocks */
.home .sel-c li.req .sel-t{background:none;color:var(--fg-2);cursor:default}
.home .sel-w{display:grid;gap:3px}
.home .sel-w>span{font-family:var(--serif);font-size:18px;line-height:1.2}
.home .sel-w .ar{font-style:normal;color:var(--acc-copper)}
.home .sel .dp{display:flex;gap:3px}
.home .sel .dp i{width:6px;height:6px;border-radius:50%;background:var(--line-2)}
.home .sel .dp i.on{background:var(--acc-green)}
.home .sel-a{font-size:15px;font-weight:700;color:var(--acc-green);text-decoration:underline;text-underline-offset:3px}
.home .eng-m.rdr{padding-bottom:22px}
.home .eng-m.zs{gap:12px}
@media (prefers-reduced-motion:reduce){.home .sel-t{transition:none}}
@media (max-width:600px){
  .home .sel-w>span{font-size:16px}
  .home .eng-m .rrow p{font-size:17px;line-height:1.7}
  .home .sel-img{aspect-ratio:3/1}
  .home .eng-m.rdr>*{margin-left:16px;margin-right:16px}
  .home .eng-m .rmode{gap:4px}
  .home .eng-m .rmode button{padding:0 10px;font-size:14px}
}

/* cookie banner (_consent.html, only on builds with POSTHOG_KEY): fixed, so it never moves the page */
.cookies{position:fixed;z-index:40;left:var(--m);bottom:calc(16px + env(safe-area-inset-bottom));width:min(400px,calc(100vw - 2 * var(--m)));background:var(--card);color:var(--fg);border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--float);padding:16px 18px;font-family:var(--sans);font-size:var(--ui);line-height:1.45}
.cookies[hidden]{display:none}
.cookies .cookies-t{font-weight:600;margin-bottom:4px}
.cookies a{color:var(--acc-green);text-decoration:underline}
.cookies-b{display:flex;gap:10px;margin-top:12px}
.cookies-b .btn{flex:1 1 0;min-height:44px;padding:0 14px;font-size:var(--ui)}
.cookies-b .btn[aria-pressed="true"]{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--acc-copper)}
footer .cookies-open{display:block;margin:0 0 8px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
footer .cookies-open:hover{color:var(--band-fg)}
@media (max-width:600px){.cookies{left:10px;right:10px;width:auto;bottom:calc(10px + env(safe-area-inset-bottom));padding:14px}}
@media (prefers-reduced-motion:no-preference){.cookies:not([hidden]){animation:cookies-in .24s var(--ease-out)}}
@keyframes cookies-in{from{opacity:0;transform:translateY(8px)}}

/* Check shows the result circles (Nit 11-07: "in check I would show the circles and the scores somehow but length should stay the same") */
.home .zs .gxres{display:grid;gap:10px;padding:12px;border-radius:16px;background:var(--card)}
.home .gxt{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;color:var(--fg-2)}
.home .gxt>b{font-family:var(--serif);font-size:18px;font-weight:500;color:var(--fg)}
.home .gxt span b{font-size:16px;font-weight:650;color:var(--fg)}
.home .zs .gxr4 li{background:none;padding:0}
.home .zs-why{display:grid;gap:4px;margin-top:4px;padding-top:10px;border-top:1px solid var(--line-2)}
.home .zs-why .zs-y,.home .zs-why .zs-fb{margin-top:0}
.home .gxr4{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.home .gxr4 li{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;border-radius:14px;background:var(--card);font-size:11px;font-weight:600;color:var(--fg-2);min-width:0}
.home .gxr4 li span:last-child{overflow:hidden;text-overflow:ellipsis;max-width:100%}
.home .gxr4 .sk2r{width:48px;height:48px}
.home .gxr4 .sk2r b{font-size:11px}
/* Nit 11-07: "adapt the size so they fit in the same area and there is no empty space": each tab panel fills the tallest one */
.home .sw-f .sf-slide{display:flex;flex-direction:column}
.home .sw-f .os{flex:1;display:grid;grid-template-rows:auto repeat(5,1fr)}
.home .sw-f .std-ty{flex:1;display:flex;flex-direction:column}
.home .sw-f .std-tyl{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));grid-auto-rows:1fr}
.home .sw-f .std-tyl button{width:100%;height:100%;border-radius:14px;padding:0 18px}
.home .sw-f .wlist{flex:1;align-content:space-between}
@media (min-width:761px){.home .sw-f .wlist{grid-auto-rows:1fr;align-content:stretch}}
.home .zs .gxr4 .sk2r{width:56px;height:56px}
.join .box>.btn{width:100%}