/*
Theme Name: DailyTech AI
Theme URI: https://dailytech.ai
Author: DailyTech.ai
Description: DailyTech.ai v2 (2026): AI news, guides and tools measured in tokens. Apple-style layout, living logo, live tokenizer.
Version: 2.0.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: dailytech-ai
*/
/* ---- base, nav, hero, tokenizer, home sections (from the approved mockup, 2026-10-26) ---- */
:root{
  --paper:#ffffff; --mist:#f2f4f8; --ink:#15172b; --ink-2:#4a4f6a; --ink-3:#8a8fa8; --line:#e4e7ef; --volt:#4b3bff;
  --t1:#e6e0ff; --t2:#d3f4e6; --t3:#d7eaff; --t4:#fff0c4; --t5:#ffdde6;
  --c1:#9d8cff; --c2:#5fd3a5; --c3:#6bb5ff; --c4:#ffcf4d; --c5:#ff8fab;
  --ok:#1f9d6b; --warn:#d68a00; --bad:#e0445f;
  --night:#121429; --night-2:#1b1e3a;
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font:17px/1.6 var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--volt);outline-offset:3px;border-radius:8px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* nav and the living logo: six squares, each with its own motion, speed and delay */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid rgba(21,23,43,.06)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:56px}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;letter-spacing:-.02em}
.logo i{display:grid;grid-template-columns:repeat(3,7px);gap:2px}
.logo i b{width:7px;height:7px;border-radius:2px;animation:var(--a) var(--d) cubic-bezier(.45,0,.55,1) var(--w) infinite}
.logo i b:nth-child(1){background:var(--c1);--a:dt-hop;--d:2.8s;--w:0s}.logo i b:nth-child(2){background:var(--c2);--a:dt-turn;--d:3.6s;--w:.4s}
.logo i b:nth-child(3){background:var(--c3);--a:dt-blink;--d:3.1s;--w:.9s}.logo i b:nth-child(4){background:var(--c4);--a:dt-turn;--d:3.3s;--w:1.3s}
.logo i b:nth-child(5){background:var(--c5);--a:dt-hop;--d:2.6s;--w:1.7s}.logo i b:nth-child(6){background:var(--volt);--a:dt-pulse;--d:2.4s;--w:.2s}
.logo:hover i b{animation-duration:1.1s}
@keyframes dt-hop{0%,62%,100%{transform:none}70%{transform:translateY(-3px)}80%{transform:translateY(0) scale(1.08,.9)}}
@keyframes dt-turn{0%,55%,100%{transform:none}75%{transform:rotate(90deg) scale(.82);border-radius:50%}}
@keyframes dt-blink{0%,60%,100%{opacity:1}75%{opacity:.25}}
@keyframes dt-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
.logo .wm span{color:var(--ink-3);font-weight:500}
.nav nav{display:flex;gap:22px;margin-left:auto;font-size:14px;color:var(--ink-2)}
.nav nav a:hover{color:var(--ink)}
.nav .search{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2)}

/* hero: tokens arrive one by one, the counter follows, then the token colours fill in */
.hero{padding:96px 0 40px;text-align:center}
.hero h1{font-size:clamp(2.4rem,6.6vw,5.2rem);line-height:1.16;letter-spacing:-.045em;font-weight:700;max-width:1000px;margin:0 auto}
.tok{display:inline-block;white-space:pre;border-radius:.18em;padding:.02em .07em .06em;margin:.03em .015em;transition:background-color .6s ease,box-shadow .6s ease}
.hero h1 .tok{opacity:0;transform:translateY(.32em) scale(.96);filter:blur(12px);animation:dt-in .75s var(--ease) forwards;animation-delay:calc(var(--i) * 95ms + 150ms)}
@keyframes dt-in{to{opacity:1;transform:none;filter:blur(0)}}
.hero h1.on .tok{box-shadow:inset 0 -2px 0 rgba(21,23,43,.06)}
.hero h1.on .tok:nth-child(5n+1){background:var(--t1)}.hero h1.on .tok:nth-child(5n+2){background:var(--t2)}.hero h1.on .tok:nth-child(5n+3){background:var(--t3)}
.hero h1.on .tok:nth-child(5n+4){background:var(--t4)}.hero h1.on .tok:nth-child(5n){background:var(--t5)}
.hero p.lead{max-width:640px;margin:26px auto 0;font-size:21px;line-height:1.5;color:var(--ink-2)}
.hero .count{margin-top:18px;font:600 14px var(--mono);color:var(--ink-3);min-height:1.4em}

/* live tokenizer */
.lab{max-width:880px;margin:44px auto 0;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:26px;box-shadow:0 30px 70px -40px rgba(21,23,43,.35)}
.lab-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:12px}
.lab-head label{font-weight:600;font-size:15px;margin-right:auto}
.ex{display:flex;flex-wrap:wrap;gap:6px}
.ex button{padding:6px 12px;border-radius:999px;background:var(--mist);font-size:13px;font-weight:500;color:var(--ink-2);transition:background .2s,color .2s}
.ex button:hover{background:var(--t1);color:var(--ink)}
.ex button[aria-pressed="true"]{background:var(--ink);color:#fff}
.lab textarea{display:block;width:100%;min-height:64px;max-height:420px;overflow-y:auto;resize:none;border:0;background:var(--mist);border-radius:16px;padding:16px 18px;font:17px/1.55 var(--sans);color:var(--ink);overflow-wrap:anywhere;transition:height .15s ease}
.lab textarea:focus{outline:2px solid var(--volt)}
.chips{margin-top:16px;font-size:16px;line-height:2.15;min-height:36px;max-height:300px;overflow-y:auto;overflow-wrap:anywhere;word-break:break-all;padding-right:4px}
.chips span{padding:3px 1px;border-radius:5px;white-space:pre-wrap}
.chips span:nth-child(5n+1){background:var(--t1)}.chips span:nth-child(5n+2){background:var(--t2)}.chips span:nth-child(5n+3){background:var(--t3)}.chips span:nth-child(5n+4){background:var(--t4)}.chips span:nth-child(5n){background:var(--t5)}
.chips .more{background:none!important;color:var(--ink-3);font-size:14px;word-break:normal}
.chips .sample{display:block;padding:14px 16px;border-radius:14px;background:var(--mist)!important;color:var(--ink-2);font-size:15px;line-height:1.5;word-break:normal;white-space:normal}
.lab-out{display:grid;grid-template-columns:220px 1fr;gap:26px;margin-top:18px;padding-top:20px;border-top:1px solid var(--line);align-items:center}
.lab-out .n b{display:block;font:600 46px/1 var(--mono);letter-spacing:-.04em}
.lab-out .n small{display:block;margin-top:4px;color:var(--ink-3);font-size:13px}
.lab-out .eq{margin-top:12px;font-size:14px;color:var(--ink-2)}
.lab-out .eq b{font:600 15px var(--mono);display:inline}
.fit{display:grid;gap:12px}
.row{display:grid;grid-template-columns:62px 1fr 150px;gap:14px;align-items:center;font-size:13px;color:var(--ink-2)}
.row .nm{font-weight:600;color:var(--ink)}
.row i{position:relative;height:10px;border-radius:10px;background:var(--mist);overflow:hidden}
.row i b{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:10px;background:var(--ok);transition:width .6s var(--ease),background-color .4s}
.row.warn i b{background:var(--warn)}
.row.over i b{background:repeating-linear-gradient(45deg,var(--bad) 0 8px,#ef6b83 8px 16px)}
.row .st{text-align:right;font:500 12px var(--mono)}
.row .st strong{display:block;font:600 13px var(--sans);color:var(--ok)}
.row.warn .st strong{color:var(--warn)}.row.over .st strong{color:var(--bad)}
.note{margin-top:16px;font-size:13px;color:var(--ink-3)}

/* sections */
section.band{padding:96px 0}
.band.mist{background:var(--mist)}
.band h2{font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.08;letter-spacing:-.035em;font-weight:700;max-width:760px}
.band .sub{margin-top:14px;max-width:620px;color:var(--ink-2);font-size:19px}

/* briefing */
.brief{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;margin-top:44px}
.story{display:block;border-radius:26px;overflow:hidden;background:var(--paper);border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s}
.story:hover{transform:translateY(-3px);box-shadow:0 24px 50px -30px rgba(21,23,43,.35)}
.story .art{aspect-ratio:16/10;background:radial-gradient(circle at 30% 30%,#c9c0ff 0,transparent 45%),radial-gradient(circle at 75% 60%,#a8e6cf 0,transparent 45%),radial-gradient(circle at 50% 100%,#bfdcff 0,transparent 55%),#eef0f7}
.story .txt{padding:24px 26px 28px}
.story .kind{font-size:13px;font-weight:600;color:var(--volt)}
.story h3{margin-top:8px;font-size:26px;line-height:1.18;letter-spacing:-.02em}
.story p{margin-top:10px;color:var(--ink-2);font-size:16px}
.side{display:grid;gap:20px}
.side .story{display:grid;grid-template-columns:140px 1fr}
.side .story .art{aspect-ratio:auto;min-height:100%}
.side .story h3{font-size:19px}.side .story p{font-size:14px;margin-top:6px}.side .story .txt{padding:20px 22px}
.story:hover h3{color:var(--volt)}

/* tools: each card shows what it answers, and its picture plays when the section comes into view or on hover */
.tools{background:var(--night);color:#fff}
.tools h2{color:#fff}.tools .sub{color:#b4b8d6}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.tool{display:flex;flex-direction:column;border-radius:26px;padding:26px;background:var(--night-2);border:1px solid rgba(255,255,255,.08);transition:border-color .3s,transform .35s var(--ease)}
.tool:hover{transform:translateY(-4px);border-color:rgba(201,192,255,.45)}
.tool .viz{height:130px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.tool .ask{font-size:19px;line-height:1.3;font-weight:600;letter-spacing:-.015em;color:#fff}
.tool h3{margin-top:10px;font-size:14px;font-weight:600;color:#c9c0ff}
.tool p{margin-top:6px;color:#b4b8d6;font-size:15px}
.tool .go{margin-top:auto;padding-top:18px;font-weight:600;color:#fff;display:flex;align-items:center;gap:8px}
.tool .go svg{transition:transform .3s var(--ease)}
.tool:hover .go svg{transform:translateX(4px)}
/* token chips appear one by one */
.v-chips{flex-wrap:wrap;align-content:center;gap:6px}
.v-chips span{padding:6px 10px;border-radius:8px;font:600 13px var(--mono);color:var(--ink);opacity:0;transform:translateY(8px) scale(.9)}
.play .v-chips span{animation:dt-pop .45s var(--ease) forwards;animation-delay:calc(var(--k) * 110ms)}
@keyframes dt-pop{to{opacity:1;transform:none}}
/* words to tokens counts up (JS) */
.tool .viz.v-conv{flex-direction:column;align-items:flex-start;justify-content:center;gap:4px}
.v-conv div{display:flex;align-items:baseline;gap:10px}
.v-conv b{font:600 30px var(--mono);letter-spacing:-.04em;color:#fff}.v-conv span{color:#b4b8d6;font-size:14px}.v-conv i{font-style:normal;color:var(--c1);font-size:20px}
/* cost bars grow */
.tool .viz.v-bars{width:100%;display:grid;grid-template-columns:1fr;gap:9px;align-content:center}
.v-bars div{display:grid;grid-template-columns:62px 1fr;gap:10px;align-items:center;font-size:12px;color:#b4b8d6}
.v-bars em{display:block;height:11px;border-radius:11px;background:linear-gradient(90deg,var(--c1),var(--c3));width:0;transition:width .9s var(--ease);font-style:normal}
.play .v-bars em{width:var(--w)}
.v-bars div:nth-child(2) em{transition-delay:.12s}.v-bars div:nth-child(3) em{transition-delay:.24s}.v-bars div:nth-child(4) em{transition-delay:.36s}
/* subscription vs API: the usage line draws and meets the plan line */
.v-even{width:100%;max-width:250px;overflow:visible}
.v-even .use{stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset 1.1s var(--ease)}
.v-even circle,.v-even text{opacity:0;transition:opacity .4s .9s}
.play .v-even .use{stroke-dashoffset:0}.play .v-even circle,.play .v-even text{opacity:1}
/* context window fills */
.v-ruler{position:relative;width:100%;height:84px;border-radius:14px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 1px,transparent 1px 22px),rgba(255,255,255,.05);overflow:hidden}
.v-ruler b{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,rgba(95,211,165,.35),rgba(95,211,165,.7));transition:width 1.2s var(--ease)}
.v-ruler span{position:absolute;right:12px;bottom:10px;font:600 12px var(--mono);color:#d5f5e8}
.play .v-ruler b{width:62%}
/* rate limit gauge sweeps */
.v-gauge svg{width:160px;overflow:visible}
.v-gauge .arc{stroke-dasharray:157;stroke-dashoffset:157;transition:stroke-dashoffset 1.2s var(--ease)}
.play .v-gauge .arc{stroke-dashoffset:52}

/* topics: the colour bar grows, the card opens to a first guide and a count */
.topics{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:40px}
.topic{position:relative;display:flex;flex-direction:column;min-height:228px;padding:22px 20px;border-radius:22px;background:var(--paper);border:1px solid var(--line);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.topic i{display:block;width:0;height:8px;border-radius:8px;margin-bottom:16px;background:var(--c);transition:width .8s var(--ease)}
.topics.play .topic i{width:34px}
.topics.play .topic:nth-child(2) i{transition-delay:.08s}.topics.play .topic:nth-child(3) i{transition-delay:.16s}.topics.play .topic:nth-child(4) i{transition-delay:.24s}.topics.play .topic:nth-child(5) i{transition-delay:.32s}
.topic b{display:block;font-size:17px;letter-spacing:-.01em}
.topic span{display:block;margin-top:6px;font-size:14px;color:var(--ink-2)}
.topic .first{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2);opacity:.75;transition:opacity .3s}
.topic .first strong{display:block;color:var(--ink);font-weight:600;font-size:14px}
.topic .first em{display:flex;align-items:center;gap:6px;margin-top:8px;font-style:normal;font-weight:600;color:var(--volt);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s var(--ease)}
.topic:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(21,23,43,.35);border-color:transparent}
.topic:hover i{width:100%!important}
.topic:hover .first{opacity:1}
.topic:hover .first em{opacity:1;transform:none}

/* method */
.method{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:44px}
.method h3{font-size:19px;letter-spacing:-.01em}
.method p{margin-top:8px;color:var(--ink-2);font-size:16px}

footer{padding:56px 0 64px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
footer .wrap{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:flex-start}
footer nav{display:flex;flex-wrap:wrap;gap:12px 22px;margin-left:auto}

@media (max-width:980px){.topics{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.brief{grid-template-columns:1fr}.tgrid{grid-template-columns:1fr 1fr}.method{grid-template-columns:1fr;gap:24px}}
@media (max-width:640px){.hero{padding-top:64px}.hero p.lead{font-size:18px}.lab{padding:18px;border-radius:22px}.lab-out{grid-template-columns:1fr}.row{grid-template-columns:48px 1fr 118px;gap:10px}
  .side .story{grid-template-columns:1fr}.side .story .art{aspect-ratio:16/9}section.band{padding:64px 0}.tgrid,.topics{grid-template-columns:1fr}.topic{min-height:0}.topic .first{opacity:1}.topic .first em{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.hero h1 .tok{animation:none;opacity:1;transform:none;filter:none}.logo i b{animation:none}.v-chips span{animation:none!important;opacity:1;transform:none}}

/* ---- site-wide additions for the WordPress theme ---- */
.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--ink);color:#fff;padding:8px 14px;border-radius:10px}
.skip:focus{left:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.menu-btn{display:none;width:40px;height:40px;border-radius:12px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.menu-btn span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease)}
.menu-open .menu-btn span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-open .menu-btn span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* cards with real images */
.story .art{position:relative;overflow:hidden}
.story .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.story:hover .art img{transform:scale(1.03)}
.story .meta{display:flex;gap:14px;margin-top:12px;font-size:13px;color:var(--ink-3)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.story.small .art{aspect-ratio:16/10}.story.small h3{font-size:19px}.story.small p{font-size:15px}
.story.feature{display:grid;grid-template-columns:1.2fr 1fr;margin-bottom:8px}.story.feature .art{aspect-ratio:auto;min-height:340px}.story.feature .txt{display:flex;flex-direction:column;justify-content:center;padding:34px 38px}
.story.feature h3{font-size:30px}
.more-h{margin-top:56px;font-size:22px;letter-spacing:-.02em}

/* archive and page heads */
.arch-head{padding:88px 0 28px}
.arch-head .bar{display:block;width:48px;height:10px;border-radius:10px;background:var(--c);margin-bottom:22px;animation:dt-bar .9s var(--ease) both}
@keyframes dt-bar{from{width:0}}
.arch-head h1{font-size:clamp(2.4rem,5.4vw,4rem);line-height:1.05;letter-spacing:-.04em}
.arch-head .sub{margin-top:14px;max-width:640px;color:var(--ink-2);font-size:20px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.pills a{padding:8px 15px;border-radius:999px;border:1px solid var(--line);font-size:14px;font-weight:500;color:var(--ink-2);transition:background .2s,color .2s,border-color .2s}
.pills a:hover{border-color:var(--c);color:var(--ink)}
.pills a[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}
.band.arch,.band.page-body{padding-top:28px}
.empty{padding:26px;border-radius:18px;background:var(--mist);color:var(--ink-2)}
.pager .nav-links{display:flex;gap:10px;justify-content:center;margin-top:40px}
.pager .page-numbers{padding:8px 14px;border-radius:12px;background:var(--mist);font-size:14px}.pager .current{background:var(--ink);color:#fff}

/* article */
.post-head{max-width:820px;padding-top:72px;padding-bottom:10px}
.kicker{font-size:15px;font-weight:600;color:var(--volt)}
.post-head h1{margin-top:12px;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.06;letter-spacing:-.04em}
.dek{margin-top:16px;font-size:21px;line-height:1.5;color:var(--ink-2)}
.byline{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:22px;font-size:14px;color:var(--ink-3)}
.byline a{color:var(--ink);font-weight:600}
.byline .tk{font:600 13px var(--mono);padding:2px 9px;border-radius:7px;background:var(--t1);color:var(--ink)}
.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px}
.share-row>span{font-size:14px;font-weight:600;color:var(--ink-2);margin-right:6px}
.sh{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--mist);color:var(--ink);transition:background .2s,color .2s,transform .2s}
.sh svg{width:17px;height:17px}.sh:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}.sh.done{background:var(--ok);color:#fff}
.share-row.end{margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
.post-hero{max-width:1120px;margin-top:34px}
.post-hero img{display:block;width:100%;height:auto;border-radius:28px}
.post-body{display:grid;grid-template-columns:220px minmax(0,720px);gap:56px;justify-content:center;padding-top:48px;padding-bottom:80px}
.toc{position:sticky;top:84px;align-self:start;font-size:14px}
.toc p{font-weight:600;color:var(--ink-3);margin-bottom:10px}
.toc ol{list-style:none;border-left:2px solid var(--line)}
.toc a{display:block;padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--ink-3);line-height:1.35}
.toc a:hover{color:var(--ink)}.toc a.on{color:var(--ink);border-color:var(--volt);font-weight:600}
.prose{font-size:19px;line-height:1.72;color:#23263b;min-width:0}
.prose>*+*{margin-top:1.15em}
.prose>p:first-child{font-size:21px;line-height:1.6;color:var(--ink);padding:22px 24px;border-radius:20px;background:var(--mist)}
.prose h2{margin-top:2.1em;font-size:clamp(1.55rem,2.8vw,2rem);line-height:1.2;letter-spacing:-.025em;color:var(--ink);scroll-margin-top:84px}
.prose h3{margin-top:1.6em;font-size:1.25rem;letter-spacing:-.015em;color:var(--ink)}
.prose a{color:var(--volt);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:1.3em}.prose li+li{margin-top:.45em}
.prose blockquote{padding:4px 0 4px 20px;border-left:4px solid var(--c1);color:var(--ink-2)}
.prose code{font:15px var(--mono);background:var(--mist);padding:2px 6px;border-radius:6px}
.prose pre{background:var(--night);color:#e7e9ff;padding:18px 20px;border-radius:16px;overflow-x:auto}.prose pre code{background:none;padding:0;color:inherit}
.prose table{width:100%;border-collapse:separate;border-spacing:0;font-size:16px;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:block;overflow-x:auto}
.prose th{background:var(--mist);text-align:left;font-weight:600;padding:12px 14px}.prose td{padding:12px 14px;border-top:1px solid var(--line)}
.prose img{max-width:100%;height:auto;border-radius:18px}
.author-note{display:flex;gap:16px;align-items:flex-start;margin-top:28px;padding:22px 24px;border-radius:20px;background:var(--mist)}
.author-note .logo i{grid-template-columns:repeat(3,9px)}.author-note .logo i b{width:9px;height:9px}
.author-note p{margin-top:6px;font-size:15px;color:var(--ink-2)}

/* footer */
.site-foot{padding:64px 0 56px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.site-foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.site-foot .foot-brand p{margin-top:14px;max-width:300px}
.site-foot nav{display:flex;flex-direction:column;gap:9px}.site-foot h4{font-size:14px;color:var(--ink);margin-bottom:4px}
.site-foot a:hover{color:var(--ink)}
.site-foot .copy{grid-column:1/-1;padding-top:24px;border-top:1px solid var(--line);color:var(--ink-3);font-size:13px}
.to-top{position:fixed;right:22px;bottom:22px;z-index:30;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(21,23,43,.82);color:#fff;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s,transform .3s var(--ease),visibility .3s}
.to-top svg{width:20px;height:20px}.to-top.on{opacity:1;visibility:visible;transform:none}.to-top:hover{background:var(--volt)}

/* search and 404 */
.sform{display:flex;gap:10px;max-width:620px;margin-top:22px}
.sform input{flex:1;padding:14px 18px;border-radius:14px;border:1px solid var(--line);background:var(--mist);font:17px var(--sans)}
.sform button,.btn{padding:13px 22px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600}
.btn.ghost{background:var(--mist);color:var(--ink)}.err-links{display:flex;gap:12px;justify-content:center;margin-top:28px}
.err .tok{opacity:1!important;filter:none!important;transform:none!important;animation:none!important}
.err .on1{background:var(--t1)}.err .on2{background:var(--t2)}.err .on3{background:var(--t3)}

@media (max-width:1060px){.post-body{grid-template-columns:minmax(0,720px)}.toc{display:none}}
@media (max-width:900px){.grid3{grid-template-columns:1fr 1fr}.story.feature{grid-template-columns:1fr}.story.feature .art{min-height:220px}.site-foot .wrap{grid-template-columns:1fr 1fr}
  .menu-btn{display:flex;margin-left:6px}.nav .search{margin-left:auto}
  .nav nav{position:fixed;left:0;right:0;top:56px;display:flex;flex-direction:column;gap:0;padding:8px 24px 24px;background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .3s var(--ease),visibility .25s;font-size:19px}
  .nav nav a{padding:12px 0;border-bottom:1px solid var(--line)}
  .menu-open .nav nav{opacity:1;visibility:visible;transform:none}}
@media (max-width:640px){.grid3{grid-template-columns:1fr}.post-head{padding-top:44px}.dek{font-size:18px}.prose{font-size:18px}.prose>p:first-child{font-size:19px}.post-hero img{border-radius:18px}
  .site-foot .wrap{grid-template-columns:1fr}.arch-head{padding-top:56px}}

/* ---- tools: head, the working card, results as rows with bars, the numbers table ---- */
.t-head{padding:84px 0 120px;background:radial-gradient(60% 120% at 15% 0%,rgba(157,140,255,.35),transparent 60%),radial-gradient(50% 120% at 90% 10%,rgba(95,211,165,.25),transparent 60%),var(--night);color:#fff}
.t-head h1{font-size:clamp(2.3rem,5.4vw,4rem);line-height:1.05;letter-spacing:-.04em;max-width:820px}
.t-head .lead{margin-top:16px;max-width:640px;font-size:20px;color:#c8cbe6}
.tools.hub{padding-top:0}
.crumb{margin-bottom:18px;font-size:14px}.crumb a{color:#c9c0ff;font-weight:600}.crumb a::after{content:" /";color:#6b6f92}
.t-stage{margin-top:-80px;padding-bottom:56px}
.t-card{background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:30px;box-shadow:0 40px 90px -50px rgba(21,23,43,.55)}
.t-checked{margin-top:16px;font-size:14px;color:var(--ink-3);text-align:center}.t-checked a{color:var(--volt);font-weight:600}
.t-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:12px}
.t-lab{font-weight:600;font-size:15px;margin-right:auto}
.t-file{position:relative;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--mist);font-size:14px;font-weight:600;cursor:pointer}
.t-file:hover{background:var(--t1)}.t-file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.t-file:focus-within{outline:3px solid var(--volt);outline-offset:2px}
.t-area{display:block;width:100%;min-height:120px;max-height:460px;resize:vertical;border:0;background:var(--mist);border-radius:16px;padding:16px 18px;font:16px/1.55 var(--sans);color:var(--ink);overflow-wrap:anywhere}
.t-area:focus,.t-form input:focus,.t-form select:focus,.t-conv-in input:focus,.t-conv-in select:focus{outline:2px solid var(--volt)}
.t-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.t-tiles.one{grid-template-columns:1fr}
.t-tiles>div{background:var(--mist);border-radius:18px;padding:16px 18px}
.t-tiles b{display:block;font:600 30px/1.1 var(--mono);letter-spacing:-.03em;overflow-wrap:anywhere}
.t-tiles b small{display:block;margin-top:4px;font:500 13px var(--sans);color:var(--ink-3);letter-spacing:0}
.t-tiles span{display:block;margin-top:6px;font-size:13px;color:var(--ink-2)}
.tag{display:inline-block;margin-left:4px;padding:1px 8px;border-radius:999px;background:var(--line);font-style:normal;font-size:12px;font-weight:600;color:var(--ink-2)}
.tag.ok{background:var(--t2);color:#0f6b48}.tag.warn{background:var(--t4);color:#7a5200}
.t-split{margin-top:18px;border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.t-split-h{display:flex;justify-content:space-between;gap:12px;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:10px}
.tc-chips{display:flex;flex-wrap:wrap;gap:3px;max-height:220px;overflow:auto}
.tc-chips span{padding:3px 4px;border-radius:5px;font:500 13px/1.3 var(--mono);white-space:pre;color:var(--ink)}
.tc-chips .t1{background:var(--t1)}.tc-chips .t2{background:var(--t2)}.tc-chips .t3{background:var(--t3)}.tc-chips .t4{background:var(--t4)}.tc-chips .t5{background:var(--t5)}
.muted{color:var(--ink-3)}
.t-h3{margin-top:30px;font-size:20px;letter-spacing:-.02em}
.t-hint{margin-top:6px;font-size:14px;color:var(--ink-2)}
.t-foot{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;line-height:1.55;color:var(--ink-3)}
.t-list{margin-top:14px;display:grid;gap:2px}
.t-li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) 150px;gap:16px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--line)}
.t-li.two{grid-template-columns:1fr 200px}
.t-li.plan{grid-template-columns:1fr 170px}.t-li.plan.same{background:linear-gradient(90deg,var(--t1),transparent 70%);border-radius:12px;padding-left:12px}
.t-name b{display:block;font-size:15px}.t-name span{display:block;font-size:13px;color:var(--ink-3);line-height:1.4}
.t-bar{height:10px;border-radius:10px;background:var(--mist);overflow:hidden}
.t-bar i{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,var(--c1),var(--c3));transition:width .5s var(--ease)}
.t-bar i.ok{background:linear-gradient(90deg,#7fe0b8,var(--ok))}.t-bar i.warn{background:linear-gradient(90deg,#ffd970,var(--warn))}.t-bar i.bad{background:linear-gradient(90deg,#ff9fb1,var(--bad))}
.t-fig{text-align:right}.t-fig b{display:block;font:600 16px var(--mono);letter-spacing:-.02em}.t-fig b small{font-size:12px;color:var(--ink-3)}
.t-fig span{display:block;font-size:12px;color:var(--ink-3)}
b.ok,span.ok{color:var(--ok)}b.warn{color:var(--warn)}b.bad{color:var(--bad)}
.t-form{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 18px}
.t-form.two{grid-template-columns:1fr 1fr;margin-top:14px}
.t-form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--ink-2)}
.t-form input,.t-form select,.t-conv-in input,.t-conv-in select{width:100%;border:0;background:var(--mist);border-radius:12px;padding:12px 14px;font:500 16px var(--sans);color:var(--ink)}
.t-form input[type=range]{padding:0;background:none;accent-color:var(--volt)}
.t-range{display:flex;align-items:center;gap:12px;min-height:46px}.t-range output{font:600 15px var(--mono);min-width:44px;text-align:right;color:var(--ink)}
.t-presets{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px;font-size:14px}
.t-presets button,.t-filter button{padding:7px 14px;border-radius:999px;border:1px solid var(--line);font-size:14px;font-weight:500;transition:background .2s,border-color .2s}
.t-presets button:hover,.t-filter button:hover{border-color:var(--volt)}
.t-presets button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.t-filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.t-filter button[aria-pressed=true]{background:var(--t1);border-color:var(--c1)}
.t-filter button[aria-pressed=false]{color:var(--ink-3);text-decoration:line-through}
.t-conv{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}.t-conv .t-lab{margin:0;font-size:18px}
.t-conv-in{display:grid;grid-template-columns:minmax(0,220px) 160px;gap:10px}.t-conv-in input{font:600 22px var(--mono)}
.t-cal{margin-top:20px;border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.t-cal summary{cursor:pointer;font-weight:600;color:var(--volt)}.t-cal .t-area{margin-top:10px;min-height:100px}
.t-verdict{margin-top:24px}
.t-big{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.t-big b{font:600 46px/1 var(--mono);letter-spacing:-.04em}.t-big span{font-size:14px;color:var(--ink-2)}
.t-say{margin-top:14px;padding:14px 16px;border-radius:14px;font-size:16px;font-weight:500}
.t-say.ok{background:var(--t2)}.t-say.warn{background:var(--t4)}
.vr-total{margin-top:24px;display:grid;grid-template-columns:200px 1fr;gap:10px 28px;align-items:center}
.vr-n b{display:block;font:600 52px/1 var(--mono);letter-spacing:-.04em}.vr-n span{font-size:13px;color:var(--ink-2)}
.vr-stack{display:flex;height:22px;border-radius:12px;overflow:hidden;background:var(--mist)}
.vr-stack i{display:block;flex:0 1 0;transition:flex-grow .5s var(--ease)}
.vr-stack .w,.vr-key .w::before{background:var(--c1)}.vr-stack .k,.vr-key .k::before{background:var(--c2)}.vr-stack .r,.vr-key .r::before{background:var(--c4)}
.vr-key{grid-column:2;display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;font-size:14px;color:var(--ink-2)}
.vr-key li::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px}
.vr-key b{color:var(--ink);font-family:var(--mono)}
.t-numbers h2{font-size:clamp(1.8rem,3.6vw,2.5rem)}
.t-table{margin-top:24px;overflow-x:auto;border:1px solid var(--line);border-radius:18px}
.t-table table{width:100%;border-collapse:collapse;font-size:14px;min-width:720px}
.t-table th{text-align:left;padding:12px 14px;background:var(--mist);font-weight:600;color:var(--ink-2);white-space:nowrap}
.t-table td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top}
.t-table tr.note td{border-top:0;padding-top:0;font-size:13px;color:var(--ink-3)}
.t-table code{font:500 13px var(--mono);white-space:nowrap}
.t-table a,.t-sources a{color:var(--volt);font-weight:600}
.t-sources{margin-top:18px;padding-left:20px;font-size:14px;color:var(--ink-2);display:grid;gap:8px}
@media (max-width:900px){.t-tiles{grid-template-columns:1fr 1fr}.t-form{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.t-head{padding:56px 0 100px}.t-card{padding:18px;border-radius:22px}.t-form,.t-form.two{grid-template-columns:1fr}
  .t-li{grid-template-columns:1fr 120px;gap:8px 12px}.t-li .t-bar{grid-column:1/-1;grid-row:2}.t-li.two,.t-li.plan{grid-template-columns:1fr 120px}
  .vr-total{grid-template-columns:1fr}.vr-key{grid-column:1}.t-conv-in{grid-template-columns:1fr 130px}.t-tiles b{font-size:24px}.t-big b{font-size:36px}}
/* article: the tool that answers the article's question */
.tool-cta{display:grid;gap:4px;margin:40px 0 8px;padding:24px 26px;border-radius:22px;background:radial-gradient(80% 140% at 0% 0%,rgba(157,140,255,.4),transparent 60%),var(--night);color:#fff;text-decoration:none!important}
.tool-cta span{font-size:13px;font-weight:600;color:#c9c0ff}
.tool-cta strong{font-size:22px;line-height:1.25;letter-spacing:-.02em}
.tool-cta em{display:flex;align-items:center;gap:8px;margin-top:8px;font-style:normal;font-weight:600}
.tool-cta em svg{transition:transform .3s var(--ease)}.tool-cta:hover em svg{transform:translateX(4px)}

/* side cards in the home briefing: cover on top so the whole image stays readable */
.side .story{display:block}
.side .story .art{aspect-ratio:16/10;min-height:0}
.side .story p{display:none}
/* the large guide in the home grid fills its column: the cover grows instead of leaving white space */
.brief>.story{display:flex;flex-direction:column}
.brief>.story .art{flex:1 1 auto;aspect-ratio:auto;min-height:320px}
@media (max-width:900px){.brief>.story .art{flex:none;aspect-ratio:16/10;min-height:0}}

/* tools hub: the band starts flush under the dark head (a child margin used to collapse through it and show a white strip) */
.tools.hub{padding-top:8px}.tools.hub .tgrid{margin-top:0}

/* ad places: labelled, centred, space reserved so the page does not jump when an ad loads */
.ad{margin:40px auto;max-width:760px;text-align:center}
.ad span{display:block;margin-bottom:6px;font-size:11px;letter-spacing:.04em;color:var(--ink-3)}
.ad ins{min-height:250px;border-radius:14px;background:var(--mist)}
.ad-end{margin-top:56px}

/* model tracker */
.tr-latest{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.tr-new{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:18px;background:var(--mist);transition:background .2s}
.tr-new:hover{background:var(--t1)}
.tr-date{font:600 12px var(--mono);color:var(--volt)}
.tr-new strong{font-size:17px;line-height:1.25;letter-spacing:-.01em}.tr-new em{font-style:normal;font-size:13px;color:var(--ink-2)}
.tr-facts{margin-top:6px;font-size:12px;color:var(--ink-3)}
.tr-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:26px}
.tr-tools input,.tr-tools select{border:0;background:var(--mist);border-radius:12px;padding:10px 14px;font:500 15px var(--sans);color:var(--ink)}
.tr-tools input{flex:1 1 220px}
#tr-table th[data-k]{cursor:pointer}#tr-table th[data-k]:hover{color:var(--volt)}
#tr-table th[aria-sort=ascending]::after{content:" ↑"}#tr-table th[aria-sort=descending]::after{content:" ↓"}
.tr-log{list-style:none;margin-top:20px;display:grid;gap:8px;font-size:15px;color:var(--ink-2)}
.tr-log span{display:inline-block;min-width:110px;font:600 13px var(--mono);color:var(--ink-3)}
@media (max-width:900px){.tr-latest{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.tr-latest{grid-template-columns:1fr}}