/* =========================================================
   Typeri design system v9 "Ink and Volt"
   Inter + Inter Display, ink neutrals, one volt accent, solid ink bands.
   Light by default, dark on request. Mobile first.
   ========================================================= */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400.woff) format("woff")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-500.woff) format("woff")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-600.woff) format("woff")}
@font-face{font-family:"Inter Display";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-display-700.woff) format("woff")}
:root{
  --bg:#ffffff; --s1:#ffffff; --s2:#f5f6f2; --s3:#ecefe8; --s4:#e1e5dc;
  --ink:#0e1410; --ink-2:#384039; --muted:#5d685f; --faint:#859087; --ghost:#c2c9c0;
  --line:#e5e8e1; --line-2:#d6dbd2; --line-3:#c1c8bd;
  --accent:#2c7a10; --accent-2:#246a0b; --accent-50:#f0f8e6; --accent-100:#dbefc2; --accent-ink:#215d0a; --on-accent:#ffffff;
  --btn:#c3f05a; --btn-ink:#0e1410; --btn-hover:#b2e43f;
  --band:#0e1410; --band-2:#161e18; --band-ink:#f3f6ef; --band-mut:#a9b3a8; --band-line:#263028;
  --err:#d93a45; --err-bg:#fdecee; --ok:#1d7f3b; --ok-bg:#e7f6ec; --warn:#9a5a06; --warn-bg:#fff5e3;
  --untyped:#a2aba3; --caret:#2c7a10; --pace:#d0d6cb;
  --g1:#9aa39b; --g2:#7cc4fa; --g3:#2f8fd8; --g4:#2f9e44; --g5:#7b5cf0; --g6:#d14bd8; --g7:#f2a516;
  --sh-1:0 1px 2px rgba(14,20,16,.05);
  --sh-2:0 6px 16px -6px rgba(14,20,16,.14),0 2px 4px -2px rgba(14,20,16,.08);
  --sh-3:0 28px 60px -18px rgba(14,20,16,.28),0 10px 24px -12px rgba(14,20,16,.14);
  --r-sm:8px; --r:10px; --r-lg:16px; --r-xl:24px;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"Inter Display","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Mono","Roboto Mono","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --tt-size:1.45rem; --tt-lh:1.62; --wrap:1200px; --header:64px;
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#0b0f0c; --s1:#121813; --s2:#0f1410; --s3:#1a211b; --s4:#232c25;
  --ink:#f2f5ef; --ink-2:#c6cdc4; --muted:#98a297; --faint:#768075; --ghost:#3b453c;
  --line:#1c241e; --line-2:#273128; --line-3:#354036;
  --accent:#c3f05a; --accent-2:#d1f57c; --accent-50:rgba(195,240,90,.08); --accent-100:rgba(195,240,90,.2); --accent-ink:#d8f78f; --on-accent:#0b0f0c;
  --btn:#c3f05a; --btn-ink:#0b0f0c; --btn-hover:#d1f57c;
  --band:#141b15; --band-2:#1a231c; --band-line:#29332b;
  --err:#ff7a83; --err-bg:rgba(255,122,131,.13); --ok:#6fdc8c; --ok-bg:rgba(111,220,140,.12); --warn:#f7c56b; --warn-bg:rgba(247,197,107,.12);
  --untyped:#4f5a50; --caret:#c3f05a; --pace:#2c362d;
  --sh-1:0 1px 2px rgba(0,0,0,.3); --sh-2:0 6px 16px -6px rgba(0,0,0,.5); --sh-3:0 30px 60px -12px rgba(0,0,0,.6),0 18px 36px -18px rgba(0,0,0,.6);
  color-scheme:dark;
}
[data-theme="classic"]{
  --bg:#ffffff; --s1:#ffffff; --s2:#f6f9fc; --s3:#edf1f7; --s4:#e3e8ee;
  --ink:#0a2540; --ink-2:#425466; --muted:#5e6f88; --faint:#8898aa; --ghost:#c1cad6;
  --line:#e6ebf1; --line-2:#d6dde6; --line-3:#c4ced9;
  --accent:#635bff; --accent-2:#544de0; --accent-50:#f4f3ff; --accent-100:#e5e3ff; --accent-ink:#3d36c4; --on-accent:#ffffff;
  --btn:#635bff; --btn-ink:#ffffff; --btn-hover:#544de0;
  --err:#e5424d; --err-bg:#fdecee; --ok:#0f8a5f; --ok-bg:#e8f7f0; --warn:#a15c07; --warn-bg:#fff6e5;
  --untyped:#9aa8ba; --caret:#635bff; --pace:#cdd5e0;
  --g1:#9aa8ba; --g2:#7cc4fa; --g3:#3aa0ec; --g4:#635bff; --g5:#8f5cf7; --g6:#d14bd8; --g7:#f2a516;
  --sh-1:0 1px 1px rgba(10,37,64,.04),0 1px 3px rgba(10,37,64,.06);
  --sh-2:0 2px 5px -1px rgba(50,50,93,.18),0 1px 3px -1px rgba(0,0,0,.14);
  --sh-3:0 30px 60px -12px rgba(50,50,93,.25),0 18px 36px -18px rgba(0,0,0,.3);
  color-scheme:light;
}
/* Extra themes (generated) */
[data-theme="paper"]{--bg:#f5efe3;--s1:#faf8f2;--s2:#ede7db;--s3:#e5dfd3;--s4:#dbd5ca;--ink:#2b2520;--ink-2:#4f4943;--muted:#78726a;--faint:#948e85;--ghost:#bcb6ac;--line:#e1dbd0;--line-2:#d3cdc2;--line-3:#c2bcb2;--accent:#c2410c;--accent-2:#ab3d0f;--accent-50:rgba(194,65,12,0.1);--accent-100:rgba(194,65,12,0.2);--accent-ink:#8d3713;--on-accent:#ffffff;--btn:#27211d;--btn-ink:#ffffff;--btn-hover:#49433d;--untyped:#908a82;--caret:#c2410c;--pace:#c2bcb2;color-scheme:light}
[data-theme="mint"]{--bg:#f2faf6;--s1:#f9fdfb;--s2:#e9f2ed;--s3:#e0e9e5;--s4:#d4dfda;--ink:#0f2a1f;--ink-2:#384f46;--muted:#657971;--faint:#85968f;--ghost:#b2c0ba;--line:#dbe5e0;--line-2:#cbd7d1;--line-3:#b9c6c0;--accent:#059669;--accent-2:#06865e;--accent-50:rgba(5,150,105,0.1);--accent-100:rgba(5,150,105,0.2);--accent-ink:#08704f;--on-accent:#ffffff;--btn:#0e261c;--btn-ink:#ffffff;--btn-hover:#31493f;--untyped:#80928a;--caret:#059669;--pace:#b9c6c0;color-scheme:light}
[data-theme="rose"]{--bg:#fff6f7;--s1:#fffbfb;--s2:#f7edee;--s3:#efe3e5;--s4:#e6d7db;--ink:#3b0b1c;--ink-2:#5e3543;--muted:#85646f;--faint:#a1858e;--ghost:#c8b4ba;--line:#ebdee1;--line-2:#deced2;--line-3:#cebbc0;--accent:#e11d48;--accent-2:#c81a41;--accent-50:rgba(225,29,72,0.1);--accent-100:rgba(225,29,72,0.2);--accent-ink:#a71739;--on-accent:#ffffff;--btn:#350a19;--btn-ink:#ffffff;--btn-hover:#582e3d;--untyped:#9d808a;--caret:#e11d48;--pace:#cebbc0;color-scheme:light}
[data-theme="sky"]{--bg:#f1f7fe;--s1:#f9fbff;--s2:#e8eff7;--s3:#dfe7ef;--s4:#d3dce6;--ink:#0c2a44;--ink-2:#354f65;--muted:#63788b;--faint:#8395a5;--ghost:#b1beca;--line:#dae2eb;--line-2:#cad4de;--line-3:#b8c4d0;--accent:#0284c7;--accent-2:#0476b3;--accent-50:rgba(2,132,199,0.1);--accent-100:rgba(2,132,199,0.2);--accent-ink:#056499;--on-accent:#ffffff;--btn:#0b263d;--btn-ink:#ffffff;--btn-hover:#2e4960;--untyped:#7e90a1;--caret:#0284c7;--pace:#b8c4d0;color-scheme:light}
[data-theme="graphite"]{--bg:#2c2e31;--s1:#323436;--s2:#353739;--s3:#3c3e40;--s4:#464849;--ink:#d1d0c5;--ink-2:#b3b3aa;--muted:#92928d;--faint:#7b7c78;--ghost:#5a5b5a;--line:#404143;--line-2:#484a4a;--line-3:#555656;--accent:#e2b714;--accent-2:#dfbb2f;--accent-50:rgba(226,183,20,0.1);--accent-100:rgba(226,183,20,0.2);--accent-ink:#dcc052;--on-accent:#2c2e31;--btn:#e2b714;--btn-ink:#2c2e31;--btn-hover:#dfbb2f;--untyped:#767774;--caret:#e2b714;--pace:#555656;color-scheme:dark}
[data-theme="midnight"]{--bg:#0c0d12;--s1:#14151a;--s2:#18191e;--s3:#222328;--s4:#2f3035;--ink:#e4e6ef;--ink-2:#bdbfc7;--muted:#92949b;--faint:#74757c;--ghost:#484a50;--line:#26272d;--line-2:#313238;--line-3:#424349;--accent:#7dd3fc;--accent-2:#8cd6fa;--accent-50:rgba(125,211,252,0.1);--accent-100:rgba(125,211,252,0.2);--accent-ink:#a1daf7;--on-accent:#0c0d12;--btn:#7dd3fc;--btn-ink:#0c0d12;--btn-hover:#8cd6fa;--untyped:#6d6f75;--caret:#7dd3fc;--pace:#424349;color-scheme:dark}
[data-theme="forest"]{--bg:#0f1913;--s1:#16201a;--s2:#1a241e;--s3:#232e27;--s4:#303a34;--ink:#dbe9df;--ink-2:#b6c4ba;--muted:#8d9a91;--faint:#717d75;--ghost:#48534c;--line:#27322b;--line-2:#323c36;--line-3:#424d46;--accent:#4ade80;--accent-2:#60e08e;--accent-50:rgba(74,222,128,0.1);--accent-100:rgba(74,222,128,0.2);--accent-ink:#7de2a1;--on-accent:#0f1913;--btn:#4ade80;--btn-ink:#0f1913;--btn-hover:#60e08e;--untyped:#6b776f;--caret:#4ade80;--pace:#424d46;color-scheme:dark}
[data-theme="violet"]{--bg:#1c1828;--s1:#231f2f;--s2:#272333;--s3:#302c3c;--s4:#3c3849;--ink:#e6e1f5;--ink-2:#c2bdd0;--muted:#9995a7;--faint:#7d788a;--ghost:#555061;--line:#343041;--line-2:#3e3a4b;--line-3:#4e4a5b;--accent:#c084fc;--accent-2:#c692fb;--accent-50:rgba(192,132,252,0.1);--accent-100:rgba(192,132,252,0.2);--accent-ink:#cda5fa;--on-accent:#1c1828;--btn:#c084fc;--btn-ink:#1c1828;--btn-hover:#c692fb;--untyped:#777284;--caret:#c084fc;--pace:#4e4a5b;color-scheme:dark}
[data-theme="ember"]{--bg:#1b1311;--s1:#221a18;--s2:#271e1c;--s3:#302825;--s4:#3d3431;--ink:#efe2dc;--ink-2:#c9bdb7;--muted:#9e938f;--faint:#817672;--ghost:#564d4a;--line:#342c29;--line-2:#3f3634;--line-3:#504744;--accent:#fb923c;--accent-2:#f99e54;--accent-50:rgba(251,146,60,0.1);--accent-100:rgba(251,146,60,0.2);--accent-ink:#f7ae74;--on-accent:#1b1311;--btn:#fb923c;--btn-ink:#1b1311;--btn-hover:#f99e54;--untyped:#7a706c;--caret:#fb923c;--pace:#504744;color-scheme:dark}
[data-theme="contrast"]{--bg:#000000;--s1:#090909;--s2:#0e0e0e;--s3:#1a1a1a;--s4:#292929;--ink:#ffffff;--ink-2:#d1d1d1;--muted:#cfcfcf;--faint:#b0b0b0;--ghost:#474747;--line:#5a5a5a;--line-2:#7a7a7a;--line-3:#404040;--accent:#ffd400;--accent-2:#ffda26;--accent-50:rgba(255,212,0,0.1);--accent-100:rgba(255,212,0,0.2);--accent-ink:#ffe359;--on-accent:#000000;--btn:#ffd400;--btn-ink:#000000;--btn-hover:#ffda26;--untyped:#8c8c8c;--caret:#ffd400;--pace:#404040;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:76px;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink-2);font:400 16px/1.65 var(--sans);font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body.nav-open{overflow:hidden}
a{color:var(--ink);text-decoration:none}
img,svg{max-width:100%}
button{font:inherit;color:inherit}
.icon{width:1.1em;height:1.1em;flex:none;vertical-align:-.18em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--s1);padding:8px 12px;border-radius:8px}.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
::selection{background:var(--accent-100);color:var(--ink)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 14px}
@media(min-width:768px){.wrap{padding:0 28px}}
[hidden]{display:none!important}

/* ---------------- Header ---------------- */
.site-header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:10px;height:var(--header)}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);font:600 1.15rem/1 var(--sans);letter-spacing:-.03em;flex:none}
.brand-mark{width:28px;height:28px;flex:none}
.brand-mark .bm-bg{fill:var(--ink)}.brand-mark .bm-fg{fill:var(--bg)}.brand-mark .bm-ac{fill:var(--accent)}
.nav{display:none}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.ib-btn{display:inline-grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);border-radius:999px;background:var(--s1);color:var(--ink-2);cursor:pointer;flex:none;transition:background .15s,border-color .15s}
.ib-btn:hover{background:var(--s3);color:var(--ink)}
.ib-btn .icon{width:18px;height:18px}
.theme-sun{display:none}.is-dark .theme-moon{display:none}.is-dark .theme-sun{display:block}
.install-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px;border-radius:999px;background:var(--btn);color:var(--btn-ink);border:0;font:600 .86rem var(--sans);cursor:pointer;white-space:nowrap;transition:background .15s}
.install-btn:hover{background:var(--btn-hover)}
.install-btn .icon{width:16px;height:16px}
.install-btn .lbl{display:none}
@media(min-width:440px){.install-btn .lbl{display:inline}}
.streak-pill{display:none;align-items:center;gap:6px;height:36px;padding:0 11px;border:1px solid var(--line);border-radius:10px;color:var(--ink-2);font:600 .84rem var(--sans)}
@media(min-width:640px){.streak-pill:not([hidden]){display:inline-flex}}
.menu-toggle{display:inline-grid}
.mobile-nav{display:none;position:absolute;left:0;right:0;top:100%;height:calc(100vh - var(--header));height:calc(100dvh - var(--header));overflow-y:auto;overscroll-behavior:contain;background:var(--bg);padding:10px 14px 40px;border-top:1px solid var(--line);z-index:59}
.mobile-nav.open{display:block}
.mobile-nav h4{margin:18px 4px 6px;font:600 .72rem var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.mobile-nav .mgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.mobile-nav a{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;color:var(--ink);font-weight:500;font-size:.93rem;line-height:1.25}
.mobile-nav a:hover,.mobile-nav a:active{background:var(--s3)}
.mobile-nav a .icon{display:none}
.mobile-nav .mrow{display:flex;gap:8px;margin-top:20px}
.mobile-nav .mrow .btn{flex:1}
.mobile-nav .mrow .btn .icon{display:inline-block}
@media(min-width:1080px){
  :root{--header:68px}
  .nav{display:flex;align-items:center;gap:4px;margin:0 0 0 28px;list-style:none;padding:0}
  .nav>li{position:relative}
  .nav>li>a,.dd-btn{display:inline-flex;align-items:center;gap:5px;color:var(--ink);font:500 .94rem var(--sans);padding:8px 12px;border-radius:999px;background:none;border:0;cursor:pointer;transition:opacity .15s,background .15s}
  .nav>li>a:hover,.dd-btn:hover,.dd.open .dd-btn{background:var(--s2)}
  .nav a[aria-current],.dd-btn[aria-current]{color:var(--accent)}
  .dd-btn .icon{width:12px;height:12px;opacity:.6;transition:transform .2s}
  .dd.open .dd-btn .icon{transform:rotate(180deg)}
  .dd-menu{display:none;position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);width:560px;background:var(--s1);border-radius:12px;box-shadow:var(--sh-3),0 0 0 1px var(--line);padding:22px 24px 18px;z-index:70;grid-template-columns:1fr 1fr;gap:4px 28px;animation:ddin .18s ease}
  .dd-menu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
  .dd-menu::after{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;background:var(--s1);transform:translateX(-50%) rotate(45deg);border-radius:2px;box-shadow:-1px -1px 0 var(--line)}
  .dd-menu.one{width:320px;grid-template-columns:1fr}
  .dd.open .dd-menu{display:grid}
  .dd-menu a{display:block;padding:9px 10px;margin:0 -10px;border-radius:8px;color:var(--ink);transition:background .12s}
  .dd-menu a:hover{background:var(--s2)}
  .dd-menu a:hover b{color:var(--accent)}
  .dd-menu a b{display:block;font-size:.92rem;font-weight:600;line-height:1.35;transition:color .12s}
  .dd-menu a small{display:block;color:var(--muted);font-size:.84rem;line-height:1.45;margin-top:1px}
  .dd-menu .dd-all{grid-column:1/-1;margin:10px -24px -18px;padding:14px 24px;border-radius:0 0 12px 12px;background:var(--s2);border-top:1px solid var(--line);font-weight:600;font-size:.88rem;color:var(--accent);display:flex;align-items:center;gap:6px}
  .dd-menu .dd-all:hover{background:var(--s3)}
  .dd-menu .dd-all .icon{width:14px;height:14px}
  .menu-toggle,.mobile-nav,.mobile-nav.open{display:none}
}
@keyframes ddin{from{opacity:0;margin-top:-6px}}

/* ---------------- Buttons & inputs ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 18px;border:1px solid var(--line-2);border-radius:999px;background:var(--s1);color:var(--ink);font:600 .88rem var(--sans);cursor:pointer;white-space:nowrap;box-shadow:var(--sh-1);transition:background .15s,border-color .15s,transform .05s}
.btn:hover{background:var(--s3);color:var(--ink);border-color:var(--line-3)}
.btn:active{transform:translateY(1px)}
.btn .icon{width:16px;height:16px}
.btn.primary,.btn-primary,.btn-dark{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.btn.primary:hover,.btn-primary:hover,.btn-dark:hover{background:var(--btn-hover);color:var(--btn-ink);border-color:var(--btn-hover)}
.btn-ghost{border-color:transparent;background:transparent;box-shadow:none}
.btn.sm{height:32px;padding:0 13px;font-size:.82rem;border-radius:999px}
.btn.lg{height:48px;padding:0 24px;font-size:.98rem;border-radius:999px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
select.inp,input.inp,textarea.inp{font:inherit;font-size:.92rem;border:1px solid var(--line-2);border-radius:10px;padding:0 12px;height:40px;background:var(--s1);color:var(--ink);max-width:100%;box-shadow:var(--sh-1)}
select.inp{appearance:none;-webkit-appearance:none;padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e98' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;cursor:pointer}
textarea.inp{width:100%;min-height:150px;padding:12px;height:auto;line-height:1.6;resize:vertical}
.inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-100)}
kbd{display:inline-block;font:500 .74rem/1 var(--mono);background:var(--s1);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;padding:3px 6px;color:var(--ink-2);white-space:nowrap}

/* ---------------- Page frame ---------------- */
main{padding:10px 0 44px}
@media(min-width:768px){main{padding:24px 0 72px}}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;font-size:.8rem;color:var(--faint);margin:0 0 12px}
.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--accent)}
.crumbs span{margin:0 7px;color:var(--ghost)}
h1,h2,h3{color:var(--ink);text-wrap:balance}
h2{font:600 1.4rem/1.25 var(--sans);letter-spacing:-.02em;margin:2em 0 .6em}
h3{font:600 1.08rem/1.35 var(--sans);letter-spacing:-.01em;margin:1.5em 0 .45em}
@media(min-width:768px){h2{font-size:1.65rem}}
.page-title{font:600 1.85rem/1.12 var(--sans);letter-spacing:-.03em;margin:0 0 12px}
@media(min-width:768px){.page-title{font-size:2.9rem}}
.lede{color:var(--muted);font-size:1.02rem;margin:0 0 18px;max-width:68ch}
@media(min-width:768px){.lede{font-size:1.13rem}}
.eyebrow{display:inline-block;font:600 .95rem var(--sans);color:var(--accent)}
.muted{color:var(--muted)}.hint{font-size:.85rem;color:var(--muted)}
.meta-line{font-size:.84rem;color:var(--muted);margin:-2px 0 18px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.meta-line a{color:var(--accent)}
.tt-title{display:flex;flex-direction:column;gap:4px;margin:18px 2px 0}
.tt-title h1{font:600 1.35rem/1.2 var(--sans);margin:0;letter-spacing:-.025em}
.tt-title p{margin:0;color:var(--muted);font-size:.94rem;max-width:72ch}
@media(min-width:768px){.tt-title{margin-top:26px}.tt-title h1{font-size:1.85rem}.tt-title p{font-size:1.02rem}}

/* Layout helpers */
.grid-2{display:grid;gap:28px}
@media(min-width:1040px){.grid-2{grid-template-columns:minmax(0,1fr) 300px;gap:56px}}
.cols-3{display:grid;gap:12px}
@media(min-width:640px){.cols-3{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(min-width:1000px){.cols-3{grid-template-columns:repeat(3,1fr)}}
.card,.panel,.feature,.tile,.faq details,aside .side-box,.insight,.bdg,.stat,.welcome,.drawer,.consent,.game,.sym-glyph,.quick,.ai-sum{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg)}
.card{padding:18px;box-shadow:var(--sh-1)}
@media(min-width:768px){.card{padding:24px}}
.panel{padding:18px;background:var(--s2)}
.note{background:var(--s2);border:1px solid var(--line);border-radius:12px;padding:12px 15px;font-size:.94rem;color:var(--ink-2)}
.note.warn{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 25%,transparent)}
.note.ok-note{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.note.ok-note b{color:var(--ok)}

/* Quick answer */
.quick{position:relative;padding:16px 18px 16px 20px;margin:4px 0 22px;background:var(--accent-50);border-color:var(--accent-100);overflow:hidden}
.quick::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.quick .q-h{display:flex;align-items:center;gap:6px;font:600 .74rem var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:6px}
.quick .q-h .icon{display:none}
.quick p{margin:0;font-size:1.01rem;line-height:1.65;color:var(--ink)}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0 6px}
@media(min-width:760px){.facts{grid-template-columns:repeat(4,1fr)}}
.facts div{background:var(--s1);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--sh-1)}
.facts b{display:block;font:600 1.5rem/1.1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.facts span{font-size:.8rem;color:var(--muted)}
.toc{border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin:0 0 22px;background:var(--s2)}
.toc b{display:block;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.toc ol{margin:0;padding-left:20px;columns:1;column-gap:28px;font-size:.92rem}
@media(min-width:700px){.toc ol{columns:2}}
.toc li{margin:3px 0;break-inside:avoid}.toc a{color:var(--ink-2)}.toc a:hover{color:var(--accent)}

/* ---------------- Prose ---------------- */
.prose{max-width:70ch;font-size:1.04rem;line-height:1.75;color:var(--ink-2)}
.prose p,.prose ul,.prose ol{margin:0 0 1.1em}
.prose li{margin:.35em 0;padding-left:2px}
.prose li::marker{color:var(--faint)}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--accent);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent);text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{text-decoration-color:currentColor}
.prose code{font:500 .86em var(--mono);background:var(--s3);padding:.15em .4em;border-radius:5px;color:var(--ink)}
.prose h2{scroll-margin-top:84px;padding-top:6px}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:14px;margin:1.2em 0 1.6em;-webkit-overflow-scrolling:touch;box-shadow:var(--sh-1)}
.prose table,.tbl table{width:100%;border-collapse:collapse;font-size:.92rem;margin:0}
.prose th,.prose td,.tbl th,.tbl td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.prose thead th,.tbl thead th{background:var(--s2);font-weight:600;color:var(--ink);font-size:.82rem}
.prose tbody tr:hover td{background:var(--s2)}
.prose tbody tr:last-child td,.tbl tbody tr:last-child td{border-bottom:0}
.prose td:first-child{color:var(--ink);font-weight:500}

/* ---------------- Typing test ---------------- */
.tt{background:transparent;border:0;border-radius:0;padding:4px 0 8px;position:relative;box-shadow:none}
@media(min-width:768px){.tt{padding:22px 0 10px;min-height:min(58vh,520px);display:flex;flex-direction:column;justify-content:center}}
.tt.done{justify-content:flex-start}
.tt-bar{margin-bottom:14px;display:flex;justify-content:center}
.tt-cfg{display:flex;align-items:center;gap:2px;padding:5px 8px;background:var(--s2);border:0;border-radius:10px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;width:max-content;max-width:100%}
.tt-cfg::-webkit-scrollbar{display:none}
.cfg-g{display:flex;align-items:center;gap:0;flex:none}
.cfg-sep{width:4px;height:20px;border-radius:2px;background:var(--s4);margin:0 8px;flex:none}
.tt-cfg button{display:inline-flex;align-items:center;gap:5px;border:0;background:none;font:500 .84rem var(--sans);color:var(--faint);height:30px;padding:0 8px;border-radius:6px;cursor:pointer;white-space:nowrap;transition:color .12s}
.tt-cfg button .icon{display:none}
.tt-cfg button:hover{color:var(--ink)}
.tt-cfg button.on{color:var(--accent)}
.cfg-sym{font:600 .84rem var(--sans);margin-right:2px}
.cfg-in{width:76px;height:26px;border:1px solid var(--line-2);border-radius:6px;background:var(--s1);color:var(--ink);font:500 .8rem var(--sans);padding:0 8px;margin-left:4px}
.cfg-in:focus{outline:none;border-color:var(--accent)}
.cfg-sel{height:28px;border:1px solid var(--line-2);border-radius:6px;background:var(--s1);color:var(--ink);font:500 .82rem var(--sans);padding:0 8px}
.cfg-note{font-size:.82rem;color:var(--faint);padding:0 8px;white-space:nowrap}
.tt-live{display:flex;gap:22px;align-items:baseline;font-family:var(--mono);min-height:40px;margin:4px 0 8px}
.tt-live .big{font-size:2rem;font-weight:600;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}
.tt-live .lbl{font:500 .7rem var(--sans);color:var(--faint);text-transform:uppercase;letter-spacing:.08em;margin-left:5px}
.tt-live .sm{font-size:1.15rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.lang-pick{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--faint);font:500 .84rem var(--sans);align-self:center;border:0;padding:0 2px 0 8px;height:30px;background:transparent;border-radius:6px}
.lang-pick:hover{color:var(--ink);background:var(--s2)}
.lang-pick .icon{width:15px;height:15px}
.lang-pick select{border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;padding:0 4px;height:28px;outline:none}
.tt-box{position:relative;cursor:text;outline:none;border-radius:10px}
.tt-text{font:400 var(--tt-size)/var(--tt-lh) var(--mono);height:calc(var(--tt-size)*var(--tt-lh)*3);overflow:hidden;color:var(--untyped);position:relative;user-select:none;-webkit-user-select:none;letter-spacing:.01em}
@media(min-width:768px){:root{--tt-size:2rem}}
.tt-text.code{white-space:pre;height:calc(var(--tt-size)*1.6*8);line-height:1.6;font-size:calc(var(--tt-size)*.62);overflow-x:auto}
.tt-text.zen{color:var(--ink)}
.tt-inner{position:relative;transition:transform .16s ease}
.tt-text .w{display:inline-block;white-space:nowrap}
.tt-text.code .w{display:inline;white-space:pre}
.tt-text i{font-style:normal;position:relative;border-radius:2px;transition:color .06s}
.tt-text i.c{color:var(--ink)}
.tt-text i.x{color:var(--err);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--err) 60%,transparent);text-underline-offset:6px;text-decoration-thickness:2px}
.tt-text i.x.sp{background:var(--err-bg)}
.tt-text i.nl::after{content:"\21B5";color:var(--ghost);font-size:.7em}
.tt-text:not(.code) i.nl{margin:0 .3em 0 .05em}
.caret{position:absolute;width:3px;background:var(--caret);border-radius:2px;transition:left .085s cubic-bezier(.2,.7,.3,1),top .085s;pointer-events:none;animation:blink 1s ease-in-out infinite}
.typing .caret{animation:none}
.caret.pace{background:var(--pace);opacity:.9;animation:none;transition:left .25s linear,top .1s}
@keyframes blink{0%,45%{opacity:1}50%,95%{opacity:0}}
.tt-input{position:absolute;opacity:0;left:0;top:0;width:1px;height:1px;border:0;padding:0;resize:none;font-size:16px}
.tt-focus{position:absolute;inset:0;display:none;place-items:center;background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-radius:10px;font:500 1rem var(--sans);color:var(--ink);cursor:pointer;text-align:center;padding:10px}
.tt-focus span{display:inline-flex;align-items:center;gap:8px}
.tt-focus .icon{display:none}
.tt-box.blur .tt-focus{display:grid}
.tt-foot{display:flex;justify-content:center;align-items:center;margin-top:18px;gap:16px;flex-wrap:wrap}
.tt-foot .hint{display:none;font-size:.8rem}
@media(min-width:900px){.tt-foot .hint{display:block}}
.tt-foot .acts{display:flex;gap:6px;order:-1}
.tt-foot .hint{width:100%;text-align:center}
.tt-modal{position:fixed;inset:0;z-index:150;background:rgba(9,9,11,.42);display:grid;place-items:end center;padding:10px}
@media(min-width:640px){.tt-modal{place-items:center}}
.tt-modal .modal-box{max-width:620px}

/* Settings drawer */
.drawer{display:none;margin-top:12px;padding:16px;background:var(--s2)}
.drawer.open{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.drawer.open{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.drawer.open{grid-template-columns:repeat(4,1fr)}}
.drawer label{font-size:.84rem;font-weight:500;color:var(--ink-2);display:flex;flex-direction:column;gap:6px}
.drawer label.row{flex-direction:row;align-items:center;gap:9px}
.drawer input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent)}

/* Results */
.res{display:none}
.tt.done .res{display:block;animation:fadein .35s ease}
.tt.done .tt-box,.tt.done .tt-live,.tt.done .tt-foot,.tt.done .kb,.tt.done .drawer{display:none}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}}
.res-hero{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media(min-width:900px){.res-hero{grid-template-columns:170px 150px minmax(0,1fr);align-items:center}}
.res-num .v{font:600 3.4rem/1 var(--mono);color:var(--ink);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.res-num.main .v{color:var(--accent)}
.res-num .k{font:500 .7rem var(--sans);color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:8px}
@media(min-width:900px){.res-num .v{font-size:4.8rem}}
.res-chart-wrap{grid-column:1/-1}
@media(min-width:900px){.res-chart-wrap{grid-column:auto}}
.res-chart{width:100%;height:150px;display:block}
.pb{display:none;align-items:center;gap:8px;background:var(--accent-50);border:1px solid var(--accent-100);color:var(--accent-ink);padding:9px 13px;border-radius:10px;font-weight:600;font-size:.9rem;margin-bottom:12px}
.pb.show{display:flex}
.verdict{font-size:.98rem;color:var(--ink-2);margin:12px 0 0}

/* Grade ladder */
.grade{margin:18px 0 4px}
.grade-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.grade-badge{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;font:600 .88rem var(--sans);color:#fff;background:var(--g4)}
.grade-badge.g1{background:#71717a}.grade-badge.g2{background:#0284c7}.grade-badge.g3{background:#0369a1}.grade-badge.g4{background:var(--g4)}.grade-badge.g5{background:var(--g5)}.grade-badge.g6{background:#c026d3}.grade-badge.g7{background:#d97706}
.grade-txt{font-size:.95rem;color:var(--ink-2)}.grade-txt b{color:var(--ink)}
.grade-scale{position:relative;display:flex;gap:3px;padding-top:4px}
.gs{position:relative;height:10px;border-radius:3px;background:var(--s4)}
.gs.g1{background:color-mix(in srgb,var(--g1) 45%,var(--s3))}.gs.g2{background:color-mix(in srgb,var(--g2) 55%,var(--s3))}.gs.g3{background:color-mix(in srgb,var(--g3) 60%,var(--s3))}.gs.g4{background:color-mix(in srgb,var(--g4) 60%,var(--s3))}.gs.g5{background:color-mix(in srgb,var(--g5) 60%,var(--s3))}.gs.g6{background:color-mix(in srgb,var(--g6) 60%,var(--s3))}.gs.g7{background:color-mix(in srgb,var(--g7) 70%,var(--s3))}
.gs.on{background:var(--g4)}.gs.g1.on{background:var(--g1)}.gs.g2.on{background:var(--g2)}.gs.g3.on{background:var(--g3)}.gs.g5.on{background:var(--g5)}.gs.g6.on{background:var(--g6)}.gs.g7.on{background:var(--g7)}
.gs i{display:none}
.gs em{position:absolute;top:15px;left:0;font:500 .66rem var(--mono);font-style:normal;color:var(--faint)}
.gs.on em{color:var(--ink);font-weight:600}
.grade-scale{margin:30px 0 30px}
.gs-mark{position:absolute;top:-2px;width:3px;height:22px;background:var(--ink);border-radius:2px;transform:translateX(-50%);box-shadow:0 0 0 2px var(--s1)}
.gs-mark span{position:absolute;top:-24px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);font:600 .72rem var(--mono);padding:2px 6px;border-radius:5px;white-space:nowrap}
.grade-table{display:grid;gap:6px;margin:14px 0 22px}
.grade-row{display:grid;grid-template-columns:14px 1fr auto auto;gap:12px;align-items:center;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--s1);font-size:.92rem}
.grade-row .sw{width:12px;height:12px;border-radius:4px}
.grade-row b{font-weight:600}.grade-row span{color:var(--muted);font-variant-numeric:tabular-nums}
.grade-row.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-50)}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0}
@media(min-width:640px){.stats{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.stats{grid-template-columns:repeat(6,1fr)}}
.stat{padding:12px 14px;border-radius:12px;background:var(--s2)}
.stat b{display:block;font:600 1.12rem var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.stat span{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:500}
.stat small{display:block;margin-top:3px;color:var(--muted);font-size:.78rem}
.stat small a{color:var(--accent)}
.res-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:20px 0 14px;overflow-x:auto;scrollbar-width:none}
.res-tabs button{border:0;background:none;font:500 .9rem var(--sans);color:var(--muted);padding:10px 12px;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;white-space:nowrap}
.res-tabs button.on{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
.res-pane{display:none}.res-pane.on{display:block}
.res-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.insights{display:grid;gap:8px}
.insight{display:flex;gap:12px;padding:12px 14px;border-radius:12px;color:var(--ink);transition:border-color .15s}
a.insight:hover{border-color:var(--accent)}
.insight .icon{color:var(--accent);margin-top:2px}
.insight b{display:block;font-size:.94rem;font-weight:600}
.insight p{margin:2px 0 0;font-size:.88rem;color:var(--muted)}
.bars{display:grid;gap:8px}
.barrow{display:grid;grid-template-columns:118px 1fr 74px;gap:10px;align-items:center;font-size:.86rem}
.barrow .t{height:8px;background:var(--s3);border-radius:99px;overflow:hidden}
.barrow .t i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.barrow .v{text-align:right;font-family:var(--mono);font-size:.82rem;color:var(--ink-2)}
.chips-k{display:flex;flex-wrap:wrap;gap:6px}
.chips-k span{font:500 .86rem var(--mono);padding:4px 9px;border-radius:7px;background:var(--s3);color:var(--ink)}
.chips-k span.bad{background:var(--err-bg);color:var(--err)}
.chips-k span.slow{background:var(--warn-bg);color:var(--warn)}
.jobs-ok{display:flex;flex-wrap:wrap;gap:6px}
.jobs-ok a{display:inline-flex;align-items:center;gap:5px;font-size:.84rem;padding:5px 11px;border-radius:999px;background:var(--ok-bg);color:var(--ok);font-weight:500}

/* Keyboard */
.kb{margin:16px auto 0;max-width:760px;user-select:none;display:none}
@media(min-width:800px){.kb{display:block}}
.kb-row{display:flex;gap:5px;justify-content:center;margin-bottom:5px}
.kb-k{flex:0 0 auto;min-width:44px;height:42px;border-radius:8px;background:var(--s1);border:1px solid var(--line-2);box-shadow:0 1px 0 var(--line-2);display:grid;place-items:center;font:500 .78rem var(--mono);color:var(--ink-2);position:relative;transition:background .08s,transform .08s}
.kb-k.w15{min-width:66px}.kb-k.w175{min-width:78px}.kb-k.w2{min-width:96px}.kb-k.w225{min-width:104px}.kb-k.w275{min-width:124px}.kb-k.sp{min-width:300px}
.kb-k.next{background:var(--accent);color:var(--on-accent);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-100)}
.kb-k.hit{background:var(--s3);transform:translateY(1px)}.kb-k.bad{background:var(--err-bg);border-color:var(--err)}
.kb-k.home::after{content:"";position:absolute;bottom:7px;width:10px;height:2px;background:currentColor;opacity:.4;border-radius:2px}
.kb-k.heat{color:#fff}
.finger-tip{text-align:center;font-size:.85rem;color:var(--muted);margin-top:8px;min-height:1.4em}

/* Ads */
.ad{margin:24px auto;text-align:center;min-height:100px;max-width:970px;overflow:hidden}
.ad::before{content:"Advertisement";display:block;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.ad.side{position:sticky;top:88px;min-height:600px}
body.focus-mode .site-header,body.focus-mode .below,body.focus-mode .site-footer,body.focus-mode .crumbs,body.focus-mode .tt-title,body.focus-mode .ai-sum,body.focus-mode .welcome,body.focus-mode .trust,body.focus-mode .tt-cfg,body.focus-mode .lang-pick{opacity:0;pointer-events:none;transition:opacity .3s}

/* ---------------- Sections & cards ---------------- */
.section{margin-top:56px}
@media(min-width:768px){.section{margin-top:96px}}
.section-head{max-width:680px;margin-bottom:24px}
.section-head h2{margin:.25em 0 .35em;font-size:1.75rem;letter-spacing:-.03em}
@media(min-width:768px){.section-head h2{font-size:2.5rem}}
.section-head p{color:var(--muted);margin:0;font-size:1.04rem}
.feature{padding:24px;transition:border-color .2s,box-shadow .2s,transform .2s;color:var(--ink);display:block;box-shadow:var(--sh-1)}
a.feature:hover{border-color:var(--line-3);box-shadow:var(--sh-2);transform:translateY(-2px)}
.feature .ib{display:none}
.feature::before{content:"";display:block;width:28px;height:3px;border-radius:2px;background:var(--accent);margin-bottom:16px}
.feature .more{display:inline-block;margin-top:12px;color:var(--accent);font-weight:600;font-size:.88rem}
.feature h3{margin:0 0 8px;font-size:1.05rem;font-weight:600;color:var(--ink)}
.feature p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.6}
.tiles{display:grid;gap:10px;grid-template-columns:1fr;margin:16px 0}
@media(min-width:560px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:14px;color:var(--ink);transition:border-color .15s,box-shadow .15s;box-shadow:var(--sh-1)}
.tile:hover{border-color:var(--line-3);box-shadow:var(--sh-2);color:var(--ink)}
.tile b{font-size:.95rem;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:8px}
.tile b .icon{color:var(--faint);width:16px;height:16px;transition:transform .15s,color .15s}
.tile:hover b .icon{color:var(--accent);transform:translateX(2px)}
.tile small{color:var(--muted);font-size:.85rem;line-height:1.45}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}
.chips a{background:var(--s1);border:1px solid var(--line-2);padding:6px 13px;border-radius:999px;font-size:.85rem;color:var(--ink-2);font-weight:500;transition:border-color .15s,color .15s}
.chips a:hover{border-color:var(--accent);color:var(--accent)}
.prose .chips a,.prose .jobs-ok a,.prose .btn,.prose .tile{text-decoration:none}
.trust{display:flex;flex-wrap:wrap;gap:6px 18px;margin:14px 2px 0;color:var(--muted);font-size:.85rem}
.trust span{display:inline-flex;align-items:center;gap:6px}
.trust .icon{color:var(--accent);width:15px;height:15px}
.faq{display:grid;gap:8px}
.faq details{padding:0 18px;border-radius:12px;transition:border-color .15s}
.faq details[open]{border-color:var(--line-2);box-shadow:var(--sh-1)}
.faq summary{cursor:pointer;font-weight:600;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px;color:var(--ink);font-size:.98rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:9px;height:9px;margin-top:6px;border-right:1.75px solid var(--faint);border-bottom:1.75px solid var(--faint);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:10px}
.faq details p{margin:0 0 16px;color:var(--ink-2)}
aside .side-box{padding:16px 18px;margin-bottom:14px;border-radius:14px}
aside .side-box h3{margin:0 0 8px;font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);font-weight:600}
aside .side-box ul{list-style:none;margin:0;padding:0;font-size:.9rem}
aside .side-box li{padding:6px 0;border-bottom:1px solid var(--line)}
aside .side-box li:last-child{border-bottom:0}
aside .side-box a{color:var(--ink-2)}aside .side-box a:hover{color:var(--accent)}

/* Summarize with AI */
.ai-sum{display:flex;flex-direction:column;gap:12px;padding:16px 18px;margin:36px 0 0;border-radius:16px;background:var(--s2)}
.ai-sum .ai-h{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.94rem}
.ai-sum .ai-h .icon{display:none}
.ai-sum .ai-h small{font-weight:400;color:var(--muted)}
.ai-links{display:flex;flex-wrap:wrap;gap:6px}
.ai-links a{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px 0 10px;border-radius:999px;border:1px solid var(--line);background:var(--s1);font:500 .84rem var(--sans);color:var(--ink);box-shadow:var(--sh-1);transition:border-color .15s}
.ai-links a:hover{border-color:var(--line-3)}
.ai-links img{width:16px;height:16px;border-radius:4px}
@media(min-width:900px){.ai-sum{flex-direction:row;align-items:center;justify-content:space-between}}

/* Footer */
.site-footer{background:var(--s2);border-top:1px solid var(--line);padding:44px 0 24px;font-size:.88rem;color:var(--muted)}
.foot-top{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.foot-top p{margin:8px 0 0;max-width:430px}
.foot-top .row{display:flex;gap:8px;flex-wrap:wrap}
.foot-grid{display:grid;gap:26px;grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.foot-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.foot-grid{grid-template-columns:repeat(5,1fr)}}
.site-footer h4{color:var(--ink);font:600 .8rem var(--sans);margin:0 0 12px}
.site-footer ul{list-style:none;margin:0;padding:0}.site-footer li{margin:8px 0}
.site-footer a{color:var(--muted);transition:color .12s}.site-footer a:hover{color:var(--ink)}
.foot-bottom{border-top:1px solid var(--line);margin-top:30px;padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.8rem}
.foot-bottom a{color:var(--muted)}
.foot-bottom nav{display:flex;gap:16px;flex-wrap:wrap}

/* Tools */
.tool{background:var(--s1);padding:14px;border-radius:var(--r-xl);border:1px solid var(--line);box-shadow:var(--sh-3)}
@media(min-width:768px){.tool{padding:24px}}
.tool-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0}
@media(min-width:640px){.metric-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.metric-grid{grid-template-columns:repeat(6,1fr)}}
.limits{display:grid;gap:8px;margin-top:12px}
.limit{display:grid;grid-template-columns:150px 1fr 90px;gap:10px;align-items:center;font-size:.86rem}
.limit .t{height:8px;background:var(--s3);border-radius:99px;overflow:hidden}.limit .t i{display:block;height:100%;background:var(--accent)}
.limit.over .t i{background:var(--err)}.limit.over .v{color:var(--err)}
.big-area{display:grid;place-items:center;min-height:220px;border:1.5px dashed var(--line-3);border-radius:var(--r-xl);background:var(--s2);cursor:pointer;user-select:none;-webkit-user-select:none;text-align:center;padding:20px;touch-action:manipulation}
.big-area .n{font:600 3.4rem/1 var(--mono);color:var(--ink)}
.big-area.go{background:var(--accent);color:var(--on-accent);border-style:solid;border-color:var(--accent)}.big-area.go .n{color:var(--on-accent)}
.big-area.wait{background:var(--s1)}
.sym-hero{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.sym-glyph{font-size:4rem;line-height:1;min-width:96px;height:96px;display:grid;place-items:center;font-family:var(--sans);box-shadow:var(--sh-2)}
.table{width:100%;border-collapse:collapse;font-size:.9rem}
.table th,.table td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left}
.table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0}
@media(min-width:768px){.kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
.game{height:400px;position:relative;overflow:hidden;border-radius:16px;background:var(--s2)}
.game .fw{position:absolute;font:500 1.05rem var(--mono);background:var(--s1);border:1px solid var(--line-2);padding:3px 9px;border-radius:8px;white-space:nowrap;color:var(--ink);box-shadow:var(--sh-1)}
.game .fw b{color:var(--accent)}
.kt-key.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.pct-out{margin-top:16px}.big-pct b{display:block;font:600 2.6rem/1.05 var(--sans);letter-spacing:-.03em;color:var(--accent)}.big-pct span{color:var(--muted)}
.pct-bar{height:10px;border-radius:99px;background:var(--s3);overflow:hidden;margin:14px 0 6px}.pct-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--g3),var(--g4),var(--g5));border-radius:99px}
.calc-time{display:grid;gap:8px;grid-template-columns:repeat(2,1fr);margin-top:14px}
@media(min-width:700px){.calc-time{grid-template-columns:repeat(4,1fr)}}

/* Consent + modal */
.consent{position:fixed;left:10px;right:10px;bottom:10px;z-index:120;padding:18px;font-size:.9rem;color:var(--ink-2);max-width:440px;box-shadow:var(--sh-3)}
@media(min-width:640px){.consent{left:20px;bottom:20px}}
.consent p{margin:0 0 12px}
.consent .row{display:flex;gap:8px;flex-wrap:wrap}
.modal{position:fixed;inset:0;z-index:150;background:rgba(9,9,11,.42);display:grid;place-items:end center;padding:10px;animation:fadein .15s}
@media(min-width:640px){.modal{place-items:center}}
.modal-box{position:relative;background:var(--s1);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:24px 22px 20px;max-width:460px;width:100%;box-shadow:var(--sh-3);animation:fadein .2s ease}
.modal-box h2{margin:0 40px 10px 0;font-size:1.3rem}
.modal-box ol{padding-left:20px}.modal-box li{margin:7px 0}
.modal-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--s1);display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.modal-x:hover{background:var(--s3);color:var(--ink)}

/* Toasts, profile */
.toast-w{position:fixed;right:12px;bottom:12px;z-index:110;display:flex;flex-direction:column;gap:8px;max-width:calc(100vw - 24px)}
.toast{display:flex;gap:10px;align-items:flex-start;background:var(--btn);color:var(--btn-ink);padding:12px 15px;border-radius:12px;box-shadow:var(--sh-3);font-size:.9rem;max-width:340px;animation:fadein .3s ease}
.toast b{display:block}.toast a{color:inherit;text-decoration:underline}
.xpbar{height:8px;background:var(--s3);border-radius:99px;overflow:hidden}
.xpbar i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width 1s ease}
.eng{display:grid;grid-template-columns:1fr;gap:8px;margin:14px 0 4px}
@media(min-width:760px){.eng{grid-template-columns:repeat(3,1fr)}}
.badge-g{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:640px){.badge-g{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1000px){.badge-g{grid-template-columns:repeat(6,1fr)}}
.bdg{padding:14px 10px;text-align:center;border-radius:14px}
.bdg .md{width:44px;height:44px;border-radius:50%;margin:0 auto 8px;display:grid;place-items:center;background:var(--accent-50);color:var(--accent);border:1px solid var(--accent-100)}
.bdg.off .md{background:var(--s3);color:var(--faint);border-color:var(--line)}
.bdg b{display:block;font-size:.86rem;font-weight:600}.bdg small{color:var(--muted);font-size:.75rem;line-height:1.35;display:block;margin-top:2px}
.bdg.off b{color:var(--muted)}
.cal{display:grid;grid-template-rows:repeat(7,11px);grid-auto-flow:column;gap:3px;overflow-x:auto;padding-bottom:4px}
.cal i{width:11px;height:11px;border-radius:3px;background:var(--s3)}
.cal i.l1{background:color-mix(in srgb,var(--accent) 30%,var(--s3))}.cal i.l2{background:color-mix(in srgb,var(--accent) 65%,var(--s3))}.cal i.l3{background:var(--accent)}
.welcome{display:flex;gap:8px 16px;align-items:center;flex-wrap:wrap;background:var(--s2);padding:9px 13px;margin:0 0 10px;font-size:.87rem;color:var(--ink-2);border-radius:12px}
.welcome span{display:inline-flex;align-items:center;gap:6px}
.welcome .icon{color:var(--accent)}
canvas.confetti{position:fixed;inset:0;pointer-events:none;z-index:98}
.sitemap-cols{columns:1;column-gap:32px}
@media(min-width:700px){.sitemap-cols{columns:2}}
@media(min-width:1050px){.sitemap-cols{columns:3}}
.sitemap-cols section{break-inside:avoid;margin-bottom:22px}
.sitemap-cols h2{font-size:1.02rem;margin:0 0 8px}
.sitemap-cols ul{margin:0;padding-left:18px;font-size:.88rem}
.sitemap-cols a{color:var(--ink-2)}.sitemap-cols a:hover{color:var(--accent)}
@media print{.site-header,.site-footer,.ad,.tt-bar,.consent,aside,.ai-sum{display:none}.grid-2{display:block}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-width:600px){.tt-live{gap:12px}.tt-live .big{font-size:1.5rem}.tt-live .lbl{font-size:.6rem;margin-left:3px}.tt-live .sm{font-size:.95rem}.lang-pick{font-size:.76rem;height:28px;padding:0 0 0 6px;gap:3px}.lang-pick .icon{width:13px;height:13px}.lang-pick select{max-width:86px;padding:0 2px}}
.tt-tap{display:none;margin:10px 0 0;text-align:center;font-size:.86rem;color:var(--faint)}
@media(hover:none){.tt-tap{display:block}.tt.typing .tt-tap{display:none}}
@media(max-width:759px){
  .tt-cfg{flex-wrap:wrap;width:100%;gap:2px 6px;padding:6px 8px}
  .cfg-sep{display:none}
  .cfg-modes{order:1;width:100%;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--s4);padding-bottom:4px;margin-bottom:2px}
  .cfg-opts{order:2;flex-wrap:wrap}
  .cfg-mods{order:3}
  .tt-cfg button{height:28px;padding:0 7px;font-size:.82rem}
  .tt-live .big{font-size:1.6rem}
}
@media(max-width:600px){.tt-live{gap:12px}.tt-live .lbl{font-size:.6rem;margin-left:3px}.tt-live .sm{font-size:.95rem}.lang-pick{font-size:.78rem;padding:0 0 0 6px;gap:3px}.lang-pick .icon{width:13px;height:13px}.lang-pick select{max-width:86px;padding:0 2px}}

/* Caret styles and typing fonts (Customize) */
.caret-block .caret:not(.pace){width:.62em;opacity:.28;border-radius:3px}
.caret-underline .caret:not(.pace){width:.62em;height:3px!important;margin-top:1.2em}
.caret-off .caret:not(.pace){display:none}
.caret-instant .caret{transition:none!important}
/* Customize panel */
.cz-box{max-width:720px!important;max-height:88vh;overflow:auto}
.cz-sec{margin:18px 0 0}.cz-sec h3{margin:0 0 10px;font-size:.92rem;color:var(--ink)}
.th-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:560px){.th-grid{grid-template-columns:repeat(4,1fr)}}
.th-card{border:1px solid var(--line-2);border-radius:10px;padding:0;overflow:hidden;cursor:pointer;background:none;text-align:left}
.th-card .pv{display:flex;align-items:center;gap:5px;padding:12px 10px;font:600 .9rem var(--mono)}
.th-card .pv i{width:8px;height:16px;border-radius:2px;display:inline-block}
.th-card b{display:block;padding:7px 10px;font:500 .8rem var(--sans);color:var(--ink);background:var(--s1);border-top:1px solid var(--line)}
.th-card.on{outline:2px solid var(--accent);outline-offset:1px}
.cz-row{display:flex;flex-wrap:wrap;gap:6px}
.cz-row button{border:1px solid var(--line-2);background:var(--s1);color:var(--ink-2);font:500 .84rem var(--sans);height:34px;padding:0 13px;border-radius:999px;cursor:pointer}
.cz-row button.on{border-color:var(--accent);color:var(--accent);background:var(--accent-50)}
.cz-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;font-size:.9rem}
.cz-toggles label{display:flex;gap:8px;align-items:center;color:var(--ink-2)}
.cz-toggles input{width:17px;height:17px;accent-color:var(--accent)}
.blind .tt-text i.x{color:var(--ink);text-decoration:none;background:none}
.adapt{margin:0 0 12px}
.ad-keys{display:flex;flex-wrap:wrap;gap:4px}
.ak{width:28px;height:32px;display:grid;place-items:center;border-radius:6px;font:600 .9rem var(--mono);text-transform:uppercase;background:var(--s3);color:var(--ink)}
.ak.lk{background:transparent;color:var(--ghost);border:1px dashed var(--line-2)}
.ak.nw{background:var(--s3)}.ak.lo{background:var(--err-bg);color:var(--err)}.ak.mid{background:var(--warn-bg);color:var(--warn)}.ak.ok{background:var(--ok-bg);color:var(--ok)}
.ak.fo{outline:2px solid var(--accent);outline-offset:1px}
.ad-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;font-size:.84rem;color:var(--muted)}.ad-meta b{color:var(--accent)}
.ad-meta select{border:1px solid var(--line-2);border-radius:6px;background:var(--s1);color:var(--ink);font:inherit;padding:1px 4px}
.tt-text i.extra{color:var(--err);opacity:.75;text-decoration:none}

/* =========================================================
   v9 component layer: Ink and Volt
   ========================================================= */
body{overflow-x:clip;font-size:16.5px}
h1,h2,h3,.page-title{font-family:var(--display);color:var(--ink)}
.page-title{font-weight:700;font-size:2.15rem;line-height:1.04;letter-spacing:-.04em}
@media(min-width:768px){.page-title{font-size:3.5rem}}
h2{font-weight:700;letter-spacing:-.03em;font-size:1.55rem}
@media(min-width:768px){h2{font-size:2rem}}
h3{font-family:var(--sans);font-weight:600}
.lede{font-size:1.08rem;color:var(--ink-2)}
@media(min-width:768px){.lede{font-size:1.25rem;line-height:1.55}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 .82rem var(--sans);letter-spacing:.02em;color:var(--ink-2)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--btn)}
.prose{font-size:1.06rem}
.prose h2{font-size:1.5rem;margin-top:1.9em}
@media(min-width:768px){.prose h2{font-size:1.85rem}}

/* Header */
.site-header{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--line)}
.brand{font:700 1.22rem/1 var(--display);letter-spacing:-.035em}
.brand-mark .bm-ac{fill:var(--btn)}
.ib-btn{border-color:transparent;background:transparent}
.ib-btn:hover{background:var(--s3)}
.install-btn{background:var(--btn);color:var(--btn-ink);height:40px;padding:0 18px;font-weight:600}
.install-btn:hover{background:var(--btn-hover)}
@media(min-width:1080px){
  .nav>li>a,.dd-btn{font-weight:500;color:var(--ink-2);padding:8px 13px}
  .nav>li>a:hover,.dd-btn:hover,.dd.open .dd-btn{background:var(--s2);color:var(--ink)}
  .nav a[aria-current],.dd-btn[aria-current]{color:var(--ink);font-weight:600}
  .dd-menu{border-radius:20px;padding:20px 22px 16px;box-shadow:var(--sh-3),0 0 0 1px var(--line)}
  .dd-menu::after{display:none}
  .dd-menu a{border-radius:12px}
  .dd-menu a:hover b{color:var(--ink)}
  .dd-menu a b{font-size:.94rem}
  .dd-menu .dd-all{background:var(--s2);color:var(--ink);border-radius:0 0 20px 20px}
  .dd-menu .dd-all:hover{background:var(--s3)}
  .dd-menu .dd-new{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--btn);color:var(--btn-ink);font:600 .66rem var(--sans);vertical-align:2px}
}
.dd-new{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--btn);color:var(--btn-ink);font:600 .66rem var(--sans);vertical-align:1px}

/* Buttons */
.btn{box-shadow:none;border-color:var(--line-2);height:42px;padding:0 20px}
.btn.lg{height:52px;padding:0 28px;font-size:1rem}
.btn.primary,.btn-primary{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.btn.primary:hover,.btn-primary:hover{background:var(--btn-hover);border-color:var(--btn-hover);color:var(--btn-ink)}
.btn-dark{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-dark:hover{background:var(--ink-2);border-color:var(--ink-2);color:var(--bg)}

/* Test bar: segmented, calm */
.tt-cfg{background:var(--s2);border-radius:999px;padding:4px 6px}
.tt-cfg button{border-radius:999px;color:var(--muted);height:30px;padding:0 10px}
.tt-cfg button.on{color:var(--ink);background:var(--s1);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--line)}
.cfg-sep{width:1px;background:var(--line-2);margin:0 6px}
.tt-live .big{font-family:var(--display);font-weight:700;letter-spacing:-.02em}
.tt-text i.c{color:var(--ink)}
.res-num .v{font-family:var(--display);font-weight:700}
.quick{background:var(--s2);border-color:var(--line);border-radius:16px}
.quick::before{width:4px;background:var(--btn)}
.quick .q-h{color:var(--ink)}
.tool{border-radius:var(--r-xl);box-shadow:var(--sh-2)}
.card{box-shadow:none;border-radius:20px}

/* Cards */
.feature{background:var(--s2);border:0;border-radius:20px;box-shadow:none;padding:26px}
a.feature:hover{background:var(--s3);transform:none;box-shadow:none}
.feature::before{display:none}
.feature h3{font:700 1.2rem/1.25 var(--display);letter-spacing:-.02em}
.feature .more{color:var(--ink);font-weight:600}
.tile{box-shadow:none;border-radius:16px}
.tile:hover{border-color:var(--ink);box-shadow:none}
.tile:hover b .icon{color:var(--ink)}
.chips a{border-color:var(--line-2);padding:8px 15px;font-size:.9rem}
.chips a:hover{border-color:var(--ink);color:var(--ink);background:var(--s2)}
.facts div{box-shadow:none;border-radius:16px;background:var(--s2);border:0}
.facts b{font-family:var(--display);font-weight:700}
.tbl{box-shadow:none;border-radius:16px}
.faq details{border-radius:16px}
.ai-sum{border-radius:20px}
.section{margin-top:72px}
@media(min-width:768px){.section{margin-top:120px}}
.section-head{max-width:760px;margin-bottom:32px}
.section-head h2{font-size:2.05rem;line-height:1.06;letter-spacing:-.04em}
@media(min-width:768px){.section-head h2{font-size:3.25rem}}
.section-head p{font-size:1.1rem;color:var(--ink-2)}
@media(min-width:768px){.section-head p{font-size:1.2rem}}

/* Full-bleed ink band */
.band{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:64px max(14px,calc(50vw - 586px));background:var(--band);color:var(--band-mut,#a9b3a8)}
@media(min-width:768px){.band{padding:104px max(28px,calc(50vw - 572px))}}
.band h2,.band h3,.band b{color:var(--band-ink,#f3f6ef)}
.band .section-head p,.band p{color:var(--band-mut,#a9b3a8)}
.band .eyebrow{color:var(--band-ink,#f3f6ef)}
.band a:not(.btn){color:var(--band-ink,#f3f6ef)}
.band.section{margin-top:72px}
@media(min-width:768px){.band.section{margin-top:120px}}
.split{display:grid;gap:36px;align-items:center}
@media(min-width:980px){.split{grid-template-columns:1fr 1.05fr;gap:64px}}
.ticks{list-style:none;padding:0;margin:22px 0 28px;display:grid;gap:12px}
.ticks li{position:relative;padding-left:30px;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:6px;background:var(--btn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1410' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}

/* X-ray sample report */
.xr{background:var(--band-2,#161e18);border:1px solid var(--band-line,#263028);border-radius:24px;padding:22px;color:var(--band-mut,#a9b3a8);font-size:.9rem}
@media(min-width:768px){.xr{padding:28px}}
.xr-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.xr-tag{font:600 .72rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--band-mut,#a9b3a8)}
.xr-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.xr-nums div{background:rgba(255,255,255,.04);border-radius:14px;padding:12px 14px}
.xr-nums b{display:block;font:700 1.9rem/1 var(--display);letter-spacing:-.03em;color:var(--band-ink,#f3f6ef)}
.xr-nums b.v{color:#c3f05a}
.xr-nums span{font-size:.74rem}
.xr h4{margin:16px 0 8px;font:600 .78rem var(--sans);color:var(--band-ink,#f3f6ef);letter-spacing:.02em}
.xr .pairs{display:flex;flex-wrap:wrap;gap:6px}
.xr .pairs span{font:600 .84rem var(--mono);padding:5px 9px;border-radius:8px;background:rgba(255,180,90,.12);color:#ffc983}
.xr .fb{display:grid;grid-template-columns:96px 1fr 52px;gap:10px;align-items:center;margin:7px 0;font-size:.8rem}
.xr .fb i{height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;display:block}
.xr .fb i em{display:block;height:100%;background:#c3f05a;border-radius:99px}
.xr .fb i em.slow{background:#ff9f6b}
.xr .fix{margin-top:16px;padding:12px 14px;border-radius:14px;background:rgba(195,240,90,.1);color:#e3f9b5;font-size:.86rem}
.xr .fix b{color:#c3f05a}

/* Bento */
.bento{display:grid;gap:12px}
@media(min-width:720px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.bento{grid-template-columns:repeat(3,1fr);gap:16px}}
.bento a{display:flex;flex-direction:column;gap:10px;padding:26px;border-radius:24px;background:var(--s2);color:var(--ink);min-height:220px;transition:background .15s}
.bento a:hover{background:var(--s3)}
.bento a.big{background:var(--btn);color:var(--btn-ink)}
.bento a.big:hover{background:var(--btn-hover)}
.bento a.big p,.bento a.big .k{color:var(--btn-ink)}
@media(min-width:1040px){.bento a.wide{grid-column:span 2}}
.bento .k{font:600 .74rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bento h3{margin:0;font:700 1.45rem/1.15 var(--display);letter-spacing:-.03em;color:inherit}
.bento p{margin:0;color:var(--ink-2);font-size:.96rem;line-height:1.55}
.bento .go{margin-top:auto;font-weight:600;font-size:.92rem;display:inline-flex;align-items:center;gap:6px}
.bento .go .icon{width:16px;height:16px}

/* Comparison table */
.vs{border:1px solid var(--line);border-radius:24px;overflow:hidden}
.vs table{width:100%;border-collapse:collapse;font-size:.95rem}
.vs th,.vs td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left}
.vs thead th{background:var(--s2);font:600 .84rem var(--sans);color:var(--ink)}
.vs thead th:nth-child(2){background:var(--ink);color:var(--bg)}
.vs td:nth-child(2),.vs td:nth-child(3){text-align:center;width:22%}
.vs thead th:nth-child(2),.vs thead th:nth-child(3){text-align:center}
.vs tbody tr:last-child td{border-bottom:0}
.vs .y,.vs .n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font-weight:700;font-size:.8rem}
.vs .y{background:var(--btn);color:var(--btn-ink)}
.vs .n{background:var(--s3);color:var(--faint)}
.vs td:first-child{color:var(--ink);font-weight:500}

/* Job cards */
.jobs{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.jobs{grid-template-columns:repeat(4,1fr)}}
.jobs a{display:flex;flex-direction:column;gap:4px;padding:18px;border:1px solid var(--line);border-radius:18px;color:var(--ink);transition:border-color .15s}
.jobs a:hover{border-color:var(--ink)}
.jobs b{font-weight:600}
.jobs span{font:700 1.6rem/1.1 var(--display);letter-spacing:-.03em}
.jobs small{color:var(--muted);font-size:.8rem}

/* Stat strip */
.strip{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 12px;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:48px}
@media(min-width:900px){.strip{grid-template-columns:repeat(4,1fr)}}
.strip b{display:block;font:700 2.2rem/1 var(--display);letter-spacing:-.04em;color:var(--ink)}
@media(min-width:768px){.strip b{font-size:2.8rem}}
.strip span{display:block;margin-top:6px;font-size:.88rem;color:var(--muted)}

/* CTA band */
.cta{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
@media(min-width:900px){.cta{flex-direction:row;align-items:center;justify-content:space-between}}
.cta h2{margin:0;font-size:2rem;line-height:1.05;letter-spacing:-.04em}
@media(min-width:768px){.cta h2{font-size:3rem}}

/* Footer: ink */
.site-footer{background:var(--band);color:var(--band-mut,#a9b3a8);border-top:0;padding:64px 0 28px}
.site-footer h4{color:var(--band-ink,#f3f6ef);font-size:.84rem}
.site-footer a{color:var(--band-mut,#a9b3a8)}
.site-footer a:hover{color:var(--band-ink,#f3f6ef)}
.site-footer .brand{color:var(--band-ink,#f3f6ef)}
.site-footer .brand-mark .bm-bg{fill:var(--btn)}.site-footer .brand-mark .bm-fg{fill:#0e1410}.site-footer .brand-mark .bm-ac{fill:#0e1410}
.foot-top,.foot-bottom{border-color:var(--band-line,#263028)}
.site-footer .btn{background:transparent;color:var(--band-ink,#f3f6ef);border-color:var(--band-line,#263028)}
.site-footer .btn:hover{background:var(--band-2,#161e18)}
.site-footer .btn.primary{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.foot-big{font:700 clamp(3.2rem,14vw,11rem)/.85 var(--display);letter-spacing:-.06em;color:var(--band-ink,#f3f6ef);opacity:.07;margin:38px 0 0;user-select:none;overflow:hidden;white-space:nowrap}

/* Data pages (layout lab, word lab) */
.metric{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:16px 0 8px}
@media(min-width:760px){.metric{grid-template-columns:repeat(4,1fr)}}
.metric div{background:var(--s2);border-radius:16px;padding:16px}
.metric b{display:block;font:700 1.8rem/1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.metric span{display:block;margin-top:6px;font-size:.8rem;color:var(--muted)}
.wordgrid{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 18px}
.wordgrid span{font:500 .9rem var(--mono);padding:5px 10px;border-radius:8px;background:var(--s2);color:var(--ink)}
.cite{background:var(--s2);border-radius:16px;padding:16px 18px;margin:28px 0 0;font-size:.9rem}
.cite b{display:block;color:var(--ink);margin-bottom:6px}
.cite code{display:block;font:500 .82rem/1.55 var(--mono);color:var(--ink-2);white-space:normal;word-break:break-word;background:var(--s1);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:6px 0}
.ll-out{display:grid;gap:8px;margin-top:16px}
.ll-row{display:grid;grid-template-columns:120px repeat(5,1fr);gap:8px;align-items:center;font-size:.86rem;padding:10px 12px;border-radius:12px;background:var(--s2)}
.ll-row.h{background:transparent;font-weight:600;color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.05em}
.ll-row b{color:var(--ink)}
.ll-row .best{color:var(--accent);font-weight:700}
@media(max-width:640px){.ll-row{grid-template-columns:90px repeat(5,1fr);font-size:.76rem;padding:8px;gap:4px}}
@media(max-width:759px){
  .tt-cfg{border-radius:16px;padding:6px 8px}
  .tt-cfg button{height:28px;padding:0 8px;font-size:.82rem}
  .cfg-sep{display:none}
}
.kb-k.hr{background:var(--accent-50);border-color:color-mix(in srgb,var(--accent) 35%,transparent);color:var(--ink);font-weight:600}
.vs .y .icon{width:14px;height:14px}