/* Redesign v2 — strict black & white, minimal. Inter body; Doto only for wordmark + rank numbers. Fonts self-hosted (OFL). */
@font-face{font-family:Doto;src:url(/assets/fonts/doto.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
/* ===== theme palette (scripts/theme_vars.py: light = the original greys, dark = prefers-color-scheme) ===== */
:root{--k-000:#000000;--k-0c0c0c:#0c0c0c;--k-111:#111111;--k-262626:#262626;--k-2b2b2b:#2b2b2b;--k-333:#333333;--k-3a3a3a:#3a3a3a;--k-3d3d3d:#3d3d3d;--k-444:#444444;--k-555:#555555;--k-666:#666666;--k-777:#777777;--k-888:#888888;--k-8a8a8a:#8a8a8a;--k-999:#999999;--k-9a9a9a:#9a9a9a;--k-a8a8a8:#a8a8a8;--k-aaa:#aaaaaa;--k-bbb:#bbbbbb;--k-c8c8c8:#c8c8c8;--k-ccc:#cccccc;--k-cfcfcf:#cfcfcf;--k-d6d6d6:#d6d6d6;--k-dcdcdc:#dcdcdc;--k-ddd:#dddddd;--k-e0e0e0:#e0e0e0;--k-e3e3e3:#e3e3e3;--k-e6e6e6:#e6e6e6;--k-f1f1f1:#f1f1f1;--k-f2f2f2:#f2f2f2;--k-f4f4f4:#f4f4f4;--k-f5f5f5:#f5f5f5;--k-f6f6f6:#f6f6f6;--k-fff:#ffffff}
@media all{/*th-a forced dark*/:root{color-scheme:dark;--k-000:#ededed;--k-0c0c0c:#e3e3e3;--k-111:#dedede;--k-262626:#cccccc;--k-2b2b2b:#c8c8c8;--k-333:#c1c1c1;--k-3a3a3a:#bbbbbb;--k-3d3d3d:#b8b8b8;--k-444:#b2b2b2;--k-555:#a4a4a4;--k-666:#959595;--k-777:#868686;--k-888:#787878;--k-8a8a8a:#767676;--k-999:#696969;--k-9a9a9a:#686868;--k-a8a8a8:#5c5c5c;--k-aaa:#5a5a5a;--k-bbb:#4c4c4c;--k-c8c8c8:#404040;--k-ccc:#3d3d3d;--k-cfcfcf:#3a3a3a;--k-d6d6d6:#343434;--k-dcdcdc:#2f2f2f;--k-ddd:#2e2e2e;--k-e0e0e0:#2c2c2c;--k-e3e3e3:#292929;--k-e6e6e6:#272727;--k-f1f1f1:#1d1d1d;--k-f2f2f2:#1c1c1c;--k-f4f4f4:#1a1a1a;--k-f5f5f5:#1a1a1a;--k-f6f6f6:#191919;--k-fff:#111111}}
/* ===== end theme palette ===== */
:root{--bg:var(--k-000);--card:var(--k-0c0c0c);--line:var(--k-262626);--line2:var(--k-3d3d3d);--tx:var(--k-f2f2f2);--mu:var(--k-a8a8a8);--inv:var(--k-fff);
--sans:Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;--dot:Doto,ui-monospace,monospace;--r:6px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--inv);outline-offset:2px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}.row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.muted{color:var(--mu)}
/* nav */
.nav{position:sticky;top:0;z-index:5;background:var(--k-000);border-bottom:1px solid var(--line)}.nav .row{height:60px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}.logo img{width:28px;height:28px;border-radius:50%;display:block}
.wm{font:800 22px/1 var(--dot);text-transform:uppercase}
.nav nav{display:flex;align-items:center;gap:24px}.nav nav a{text-decoration:none;color:var(--mu);font-size:15px}.nav nav a:hover{color:var(--tx)}
.btn{display:inline-block;background:var(--inv);color:var(--k-000)!important;border:1px solid var(--inv);border-radius:var(--cr);padding:11px 20px;font:600 15px/1 var(--sans);cursor:pointer;text-decoration:none}
.btn:hover{background:var(--k-000);color:var(--inv)!important}.btn.sm{padding:9px 16px;font-size:14px}
/* hero: short */
.hero{padding:40px 24px 8px}
h1{font-weight:650;font-size:clamp(30px,4.4vw,48px);line-height:1.1;letter-spacing:-.035em;margin:0 0 10px}
.sub{color:var(--mu);margin:0 0 22px;font-size:17px}.sub a{color:var(--tx)}
.search input{width:100%;max-width:640px;padding:14px 16px;border-radius:var(--r);border:1px solid var(--line2);background:var(--card);color:var(--tx);font:16px var(--sans)}
.search input::placeholder{color:var(--k-8a8a8a)}.search input:focus{outline:2px solid var(--inv);outline-offset:1px;border-color:var(--inv)}
/* sections */
h2{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:56px 0 16px}
.cat{border-top:1px solid var(--line);margin-top:28px}.cat h2{margin:24px 0 16px;display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.cat h2 a{text-decoration:none}.cat h2 a:hover{text-decoration:underline}
.cat h2 .all{font-size:15px;font-weight:500;color:var(--mu);letter-spacing:0;white-space:nowrap}
.home #rankings .cat:first-child{margin-top:20px}
.answer{color:var(--mu);max-width:820px;margin:0 0 24px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:8px}
.card:hover{border-color:var(--line2)}.card.top{border-color:var(--k-8a8a8a)}
.rk{display:flex;align-items:center;justify-content:space-between;width:100%}.rn{font:800 26px/1 var(--dot)}
.badge{font:600 12px/1 var(--sans);background:var(--inv);color:var(--k-000);padding:4px 8px;border-radius:var(--cr)}
.card h3{margin:2px 0 0;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.3}.card h3 a{text-decoration:none}.card h3 a:hover{text-decoration:underline}
.v{margin:0;color:var(--k-d6d6d6);font-size:15px}
dl.meta{margin:4px 0 0;display:grid;grid-template-columns:1fr;gap:2px;font-size:15px;color:var(--mu);border-top:1px solid var(--line);padding-top:10px}
dl.meta dt{color:var(--tx);font-weight:600;font-size:13px;margin-top:6px}dl.meta dd{margin:0}
.src{color:var(--mu);margin:auto 0 0;padding-top:8px;font-size:13px}.src a{color:var(--mu)}
/* home: compact cards (details live on category page) */
.home .card dl.meta{display:none}
.tag{padding:2px 6px;border-radius:var(--cr);border:1px solid var(--line2);color:var(--tx);font-size:12px}
/* releases: dated list */
.rel{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.ri{display:grid;grid-template-columns:110px 1fr auto;gap:2px 24px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.ri time{color:var(--mu);font-size:15px;font-variant-numeric:tabular-nums}.ri h3{margin:0;font-size:16px;font-weight:600}.ri .meta{grid-column:2;margin:0;font-size:15px;color:var(--mu)}
.ri .src{grid-row:1;grid-column:3;padding:0;margin:0}
/* sponsor: one labeled slot, outside rankings */
.sponsor{margin:48px 0 0;padding:18px 20px;border:1px dashed var(--line2);border-radius:var(--r);display:flex;gap:16px;align-items:baseline}
.sponsor p{margin:0;color:var(--mu);font-size:15px}.slbl{flex:none;font-size:13px;font-weight:600;border:1px solid var(--mu);border-radius:var(--cr);padding:2px 10px}
/* digest inline */
.digest{margin:48px 0 64px;padding:32px;border:1px solid var(--line2);border-radius:var(--r);display:flex;gap:24px 32px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.digest h2{margin:0 0 4px;font-size:24px}.digest p{margin:0}
.digest form{display:flex;gap:8px;flex-wrap:wrap}.digest input{padding:11px 16px;border-radius:var(--cr);border:1px solid var(--line2);background:var(--k-000);color:var(--tx);min-width:260px;font:16px var(--sans)}
.digest input:focus{outline:2px solid var(--inv);outline-offset:1px}
.digest small{width:100%;color:var(--mu);font-size:14px}
.foot{border-top:1px solid var(--line);padding:32px 24px 48px;font-size:15px;color:var(--mu)}.foot b{color:var(--tx)}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:var(--k-fff);color:var(--k-000);padding:8px;z-index:9}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* category page */
.page{padding-top:28px;padding-bottom:20px}.crumbs,.updated{color:var(--mu);font-size:15px}.crumbs a{color:var(--mu)}.updated a{color:var(--tx)}
.page h1{margin:8px 0 4px}.updated{margin:0 0 24px}
.pick{border:1px solid var(--inv);border-radius:var(--r);padding:28px 32px}
.plbl{margin:0;font-size:14px;font-weight:600;color:var(--mu)}
.pick h2{margin:4px 0 8px;font-size:clamp(28px,4vw,40px);letter-spacing:-.03em}.pick h2 a{text-decoration:none}
.why{font-size:19px;margin:0 0 6px;max-width:760px}.pmeta{color:var(--mu);margin:0 0 20px}
.also h2,.cmp h2{margin:40px 0 12px;font-size:20px}
.also ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.also li{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.also li a{font-weight:600}.also li span{color:var(--mu);font-size:15px}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;min-width:760px;font-size:15px}
th,td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line)}tbody tr:last-child>*{border-bottom:0}
thead th{font-size:13px;color:var(--mu);font-weight:600;background:var(--card)}
tbody th{font-weight:600;white-space:nowrap}tbody th a{text-decoration:none}tbody th a:hover{text-decoration:underline}
.tn{font:800 15px var(--dot);margin-right:10px;color:var(--mu)}td{color:var(--k-d6d6d6)}.nw{white-space:nowrap;color:var(--mu)}
.page .cat h2{font-size:20px}
.center{text-align:center;padding:120px 24px}[hidden]{display:none!important}
@media(max-width:900px){.also ul{grid-template-columns:1fr}}
@media(max-width:640px){.wrap{padding:0 16px}.hero{padding:24px 16px 4px}.nav nav a:not(.btn){display:none}
 h1{font-size:28px}.sub{font-size:16px;margin-bottom:16px}
 .grid{grid-template-columns:1fr;gap:8px}.home .card{padding:14px 16px;gap:4px}
 .home .card .src{display:none}.home .rn{font-size:20px}
 .home #rankings:not(.is-filtered) .card:nth-child(n+4){display:none}
 .ri{grid-template-columns:1fr}.ri .meta,.ri .src{grid-column:1;grid-row:auto}
 .digest{padding:22px}.digest input{min-width:0;flex:1}h2{font-size:22px;margin-top:44px}
 .pick{padding:22px}.why{font-size:17px}.sponsor{flex-direction:column;gap:8px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* v2 fixes after screenshot review */
.home .card .src{display:none}
.page .grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
thead th:nth-child(2){width:24%}thead th:nth-child(3){width:24%}thead th:nth-child(4){width:30%}
@media(max-width:640px){
 .tw{border:0;overflow:visible}table{min-width:0}thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 table,tbody,tr,th,td{display:block}tr{border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;padding:12px 14px}
 th,td{padding:4px 0;border:0}tbody th{font-size:17px;white-space:normal;margin-bottom:4px}
 td:before{content:attr(data-l);display:block;font-size:13px;font-weight:600;color:var(--tx)}
 .home .card{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:baseline}
 .home .card .rk{grid-row:1/3;width:auto;flex-direction:column;align-items:flex-start;gap:6px}.home .card h3,.home .card .v{grid-column:2}
}
@media(max-width:640px){
 .home .card .rk{display:contents}.home .card .rn{grid-row:1/4;grid-column:1}.home .card .badge{grid-column:2;justify-self:start;margin-bottom:2px}
 .page .cat dl.meta{display:none}
}
@media(max-width:640px){.home .card .badge{grid-row:1}.home .card h3{grid-row:2;grid-column:2}.home .card .v{grid-row:3;grid-column:2}.home .card:not(.top) h3{grid-row:1}.home .card:not(.top) .v{grid-row:2}}
@media(max-width:640px){.home .card>.row{display:contents}}
/* ---- Numptr production pass ---- */
.wm{font:800 24px/1 var(--dot);text-transform:none;letter-spacing:.01em;font-variation-settings:"ROND" 100}
.logo img{border-radius:0}
.rn,.tn{font-variation-settings:"ROND" 100}.rn.sm{font-size:18px;margin-right:2px}
.page .answer{font-size:17px;margin:0 0 24px}
.pick .badge{font-size:13px;padding:5px 10px}
dl.pf{display:grid;grid-template-columns:110px 1fr;gap:6px 16px;margin:16px 0 22px;max-width:820px;font-size:15px}
dl.pf dt{font-weight:600}dl.pf dd{margin:0;color:var(--k-d6d6d6)}
.acts{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin:0}.lnk{color:var(--tx);font-size:15px}.acts .nw{font-size:14px}
.hint{margin:-4px 0 12px;font-size:14px}
.tbl{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.th,.tr summary{display:grid;grid-template-columns:44px minmax(150px,1.1fr) 1.6fr 1.3fr 20px;gap:14px;align-items:baseline;padding:13px 16px}
.th{font-size:13px;font-weight:600;color:var(--mu);background:var(--card);border-bottom:1px solid var(--line)}
.tr{border-bottom:1px solid var(--line)}.tr:last-child{border-bottom:0}
.tr summary{cursor:pointer;list-style:none;font-size:15px}.tr summary::-webkit-details-marker{display:none}
.tr summary:hover{background:var(--card)}.nm{font-weight:600}.bf,.pr{color:var(--k-d6d6d6)}
.chev{width:9px;height:9px;border-right:1.5px solid var(--mu);border-bottom:1.5px solid var(--mu);transform:rotate(45deg);align-self:center;justify-self:end;transition:transform .15s}
.tr[open] .chev{transform:rotate(-135deg)}.tr[open] summary{background:var(--card)}
.more{padding:6px 16px 18px 74px;background:var(--card)}.more .v{margin:0 0 10px}
.more dl{display:grid;grid-template-columns:100px 1fr;gap:4px 16px;margin:0 0 14px;font-size:15px}.more dt{font-weight:600}.more dd{margin:0;color:var(--k-d6d6d6)}.more dd a{color:var(--mu)}
.how{margin:0 0 64px}.how ol{margin:0;padding-left:20px;color:var(--mu);max-width:820px}.how li{margin:6px 0}.how b{color:var(--tx)}
.sponsor a{color:var(--tx)}
/* tool page */
.lead{font-size:19px;max-width:760px;margin:0 0 20px}
dl.facts{display:grid;grid-template-columns:200px 1fr;gap:10px 20px;border-top:1px solid var(--line);padding-top:16px;margin:0 0 8px;max-width:900px}
dl.facts dt{font-weight:600}dl.facts dd{margin:0;color:var(--k-d6d6d6);overflow-wrap:anywhere}dl.facts a{color:var(--tx)}
article ul{padding-left:20px}article li{margin:4px 0}
.page>p a,article p a{color:var(--tx)}
@media(max-width:640px){
 .wm{font-size:21px}
 .th{display:none}
 .tr summary{grid-template-columns:30px 1fr 14px;gap:2px 10px;padding:14px}
 .tr .tn{grid-row:1/3}.tr .nm{grid-column:2}.tr .bf{display:none}.tr .pr{grid-column:2;grid-row:2;font-size:14px;color:var(--mu)}.tr .chev{grid-column:3;grid-row:1/3}
 .more{padding:4px 14px 16px 54px}.more dl{grid-template-columns:1fr;gap:0}.more dd{margin-bottom:8px}
 dl.pf,dl.facts{grid-template-columns:1fr;gap:2px}dl.pf dd,dl.facts dd{margin-bottom:10px}
 .lead{font-size:17px}
}
/* guides + sponsor (.lp) */
.lp{max-width:780px;margin:0 auto;padding:28px 24px 64px}.lp h1{margin:8px 0 8px}.lp h2{font-size:22px;margin:44px 0 12px}.lp h3{font-size:17px;margin:24px 0 4px}
.lp p,.lp li{color:var(--k-d6d6d6)}.lp b{color:var(--tx)}.lp a{color:var(--tx)}.lp ul,.lp ol{padding-left:20px}.lp li{margin:6px 0}
.lp table{width:100%;min-width:640px;border-collapse:collapse;font-size:14px}.lp th,.lp td{border-bottom:1px solid var(--line);padding:10px;text-align:left;vertical-align:top}
.lp thead th{background:var(--card);color:var(--mu);font-size:13px}.lp .tblwrap,.lp table{display:block;overflow-x:auto}
.lp .box{border:1px solid var(--inv);border-radius:var(--r);padding:24px;margin:20px 0}.lp .box p{margin:0}.lp .box .muted{margin:6px 0 16px}.fine{font-size:13px;color:var(--mu)!important;margin-top:12px!important}
.unc{border-left:2px solid var(--line2);padding:4px 0 4px 14px;color:var(--mu)!important;font-size:14px}
.btn.is-soon{background:transparent;color:var(--mu)!important;border-color:var(--line2);cursor:not-allowed}.btn.is-soon:hover{background:transparent;color:var(--mu)!important}
.box .lnk{margin-left:14px}
.tag.spon,.tag.feat{border-color:var(--mu);color:var(--tx)}
.glist{list-style:none;padding:0!important;border-top:1px solid var(--line)}.glist li{margin:0;padding:16px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.glist a{font-weight:600;font-size:18px;text-decoration:none}.glist a:hover{text-decoration:underline}.glist span{color:var(--mu);font-size:15px}
/* sponsor bar (render only when a sponsor is booked) */
.sponbar{position:sticky;bottom:0;z-index:4;display:flex;gap:12px;align-items:center;justify-content:center;padding:10px 16px;background:var(--k-000);border-top:1px solid var(--line2);font-size:14px}
.sponbar a{color:var(--tx);text-decoration:none}.sponbar a:hover{text-decoration:underline}.sponbar .tag{flex:none}
.fl a{color:var(--mu)}
.wm{font-weight:900}
@media(max-width:640px){.lp{padding:20px 16px 48px}.nav nav{gap:14px}.nav nav a:not(.btn){display:none}.box .lnk{display:block;margin:12px 0 0}.sponbar{justify-content:flex-start}}
@media(max-width:640px){.lp table{min-width:0;overflow-x:visible}.lp td{white-space:normal;overflow-wrap:anywhere}.lp tbody tr{border:1px solid var(--line)}}
/* whole-card links (stretched link) */
.card,.pick{position:relative;transition:border-color .15s,background-color .15s}
.card a.stretch::after,.pick a.stretch::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r)}
.card .src a,.pick .acts a,.pick dl a{position:relative;z-index:2}
.card:hover,.pick:hover{border-color:var(--inv);background:var(--card);cursor:pointer}
.card:hover h3 a,.pick:hover h2 a{text-decoration:underline}
.card:focus-within,.pick:focus-within{outline:2px solid var(--inv);outline-offset:2px}
.card a.stretch:focus-visible,.pick a.stretch:focus-visible{outline:none}
/* ---- Numptr says (personality layer) ---- */
.ns{border-left:2px solid var(--inv);padding:6px 0 6px 12px;margin:2px 0}
.ns p{margin:0}.nsv{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--mu);text-transform:uppercase;letter-spacing:.06em}
.ns .sc{color:var(--tx);font-weight:700;font-size:18px;letter-spacing:0;text-transform:none}.ns .sc small{font-size:12px;color:var(--mu);font-weight:500}
.ns .sc.na{font-size:13px;font-weight:600}
.nsb{font-weight:600;color:var(--tx);font-size:15px;line-height:1.35}.nsr{color:var(--mu);font-size:14px;line-height:1.4}
.ns.big{margin:0 0 22px;max-width:760px}.ns.big .nsb{font-size:18px}.ns.big .sc{font-size:24px}
.more .ns,.pick .ns{margin:0 0 12px}
.kick{margin:-4px 0 14px;color:var(--mu);font-size:15px}
.signoff{margin-top:6px}
@media(max-width:640px){.home .card .ns,.home .card dl.meta,.home .card .src{grid-column:1/-1}}
/* ---- homepage (approved mockup) ---- */
.home{background:var(--k-fff);color:var(--k-000);background-image:radial-gradient(color-mix(in srgb,var(--k-000) 5.9%,transparent) 1px,transparent 1px);background-size:14px 14px}
.home main a{color:var(--k-000)}.home .muted,.home .sub{color:var(--k-444)}.home .kick{color:var(--k-777)}
.hp-hero{text-align:center;padding:28px 24px 12px}
.hp-hero .kick{font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin:14px 0 0}
.blob{width:min(260px,58vw);margin:0 auto;transform-origin:50% 85%;animation:hp-in 1.2s cubic-bezier(.22,.61,.36,1) both,hp-breathe 7s ease-in-out 2.6s 3}
.blob img{width:100%;height:auto;display:block;transform-origin:50% 40%;transition:transform .8s cubic-bezier(.22,.61,.36,1);animation:hp-wink 1.1s ease-in-out 1.4s 1}
.blob:hover img{transform:scale(1.025) rotate(-1deg)}
@keyframes hp-wink{45%{transform:scale(1.01,.975) rotate(-1deg)}}
@keyframes hp-breathe{50%{transform:translateY(-4px) scale(1.012,.994)}}
@keyframes hp-in{from{opacity:0;transform:translateY(8px) scale(.98)}}
.hp-hero h1{font:900 clamp(36px,5.4vw,76px)/1 var(--dot);letter-spacing:.01em;margin:14px auto 14px;max-width:1000px}
.hp-hero .sub{max-width:600px;margin:0 auto 22px}
.hp-hero .search input{background:var(--k-fff);color:var(--k-000);border:2px solid var(--k-000);border-radius:var(--cr);margin:0 auto;display:block}
.hp-hero .search input:focus{outline-color:var(--k-000)}
.flick{animation:hp-fade 1s cubic-bezier(.22,.61,.36,1) .25s both}
@keyframes hp-fade{from{opacity:0;letter-spacing:.04em}}
.hp-sec{border-top:1px solid var(--k-000);padding:44px 0 8px;margin-top:36px}
.hp-h{font:900 clamp(30px,4.2vw,50px)/1 var(--dot);margin:0 0 8px}

.hp-opt{font:700 16px var(--sans);background:var(--k-fff);color:var(--k-000);border:2px solid var(--k-000);border-radius:var(--cr);padding:20px 8px;cursor:pointer;transition:transform .35s ease,box-shadow .35s ease}
.hp-opt:hover{transform:translateY(-2px);box-shadow:none}.hp-opt.on{background:var(--k-000);color:var(--k-fff)}



@keyframes hp-pop{from{opacity:0;transform:translateY(4px)}}



.mono{width:42px;height:42px;flex:none;border-radius:var(--cr);background:var(--k-000);color:var(--k-fff);display:grid;place-items:center;font:900 21px/1 var(--dot)}
.hp-two{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:start}
.lt{background:var(--k-000);color:var(--k-fff);border-radius:var(--cr);padding:24px 24px 16px;margin-top:20px}
.lt-hd{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--k-aaa);padding-bottom:10px;border-bottom:1px dashed var(--k-555)}
.lt-list{list-style:none;margin:0;padding:0}
.lt-row{position:relative;display:grid;grid-template-columns:48px 1fr 44px 60px;align-items:center;gap:10px;padding:13px 0;border-bottom:1px dashed var(--k-333)}
.lt-row:hover{background:var(--k-111)}
.lt-pos{font:900 36px/1 var(--dot)}.lt-nm a{color:var(--k-fff)!important;font-weight:700;font-size:17px;text-decoration:none}.lt-nm small{display:block;color:var(--k-aaa);font-size:13px}
.lt-row a.stretch::after{content:"";position:absolute;inset:0}
.lt-pts{font:900 30px/1 var(--dot);text-align:right}.lt-mv{font-size:13px;font-weight:700;text-align:right}
.lt-mv.up::before{content:"^ ";content:"^ "/"up "}.lt-mv.dn::before{content:"v ";content:"v "/"down "}.lt-mv.dn{color:var(--k-999)}.lt-mv.eq::before{content:"—"}
.lt-note{font-size:12px;color:var(--k-aaa);margin:12px 0 0}
.hp-stick{padding-top:40px}
.sticker{position:relative;background:var(--k-fff);border:2.5px solid var(--k-000);border-radius:var(--cr);padding:42px 30px;text-align:center;transform:rotate(-7deg);box-shadow:none}
.sticker::after{content:"";position:absolute;top:-14px;left:40%;width:90px;height:26px;background:color-mix(in srgb,var(--k-fff) 80%,transparent);border:1px solid var(--k-bbb);transform:rotate(9deg)}
.sticker .kick{font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin:0}.st-n{font:900 44px/1 var(--dot);margin:8px 0}
.home .btn{background:var(--k-000);color:var(--k-fff)!important;border-color:var(--k-000)}.home .btn:hover{background:var(--k-fff);color:var(--k-000)!important}
.home .lt .btn,.home .digest .btn{background:var(--k-fff);color:var(--k-000)!important}
.hp-lot{padding-bottom:0}
.home #rankings .cat{border-top:1px solid var(--k-ddd)}.home .cat h2 a{color:var(--k-000)}.home .cat h2 .all{color:var(--k-555)}
.home #rankings .grid{grid-template-columns:repeat(4,1fr);gap:10px}
.card.mini{position:relative;flex-direction:row;align-items:flex-start;gap:12px;padding:14px;background:var(--k-fff);border:1.5px solid var(--k-000);border-radius:var(--cr);color:var(--k-000)}
.card.mini:hover,.card.panel.tap:hover{background:var(--k-000);color:var(--k-fff)}.card.mini:hover a,.card.panel.tap:hover a,.card.panel.tap:hover{color:var(--k-fff)!important}.card.mini:hover .mono{background:var(--k-fff);color:var(--k-000)}.card.mini:hover .v{color:var(--k-ccc)}
.card.mini .mono{width:34px;height:34px;font-size:17px;border-radius:var(--cr)}
.card.mini h3{margin:0;font-size:15px}.card.mini h3 a{text-decoration:none}.card.mini .v{margin:2px 0 0;font-size:13px;color:var(--k-444)}
.home .rel,.home #releases,.home .sponsor,.home .digest,.home .how{color:var(--k-000)}
.home .digest,.home .sponsor{background:var(--k-000);color:var(--k-fff);border-radius:var(--cr)}.home .digest a,.home .sponsor a,.home .digest .muted,.home .sponsor p{color:var(--k-ddd)!important}
.home .digest input{background:var(--k-fff);color:var(--k-000)}
.home .ri,.home .how li{border-color:var(--k-ddd)}.home .ri .meta,.home .ri a.src{color:var(--k-444)}
.home .foot{color:var(--k-444)}.home .foot a{color:var(--k-000)}.home .foot .muted{color:var(--k-555)}.home .tag{color:var(--k-000);border-color:var(--k-999)}
@media(max-width:900px){.hp-two{grid-template-columns:1fr}.home #rankings .grid{grid-template-columns:repeat(2,1fr)}.sticker{max-width:420px;margin:0 auto}}
@media(max-width:560px){.home #rankings .grid{grid-template-columns:1fr}.lt{padding:16px}.lt-row{grid-template-columns:34px 1fr 38px 46px;gap:8px}.lt-pos{font-size:26px}.lt-pts{font-size:22px}.sticker{margin:0 12px}}
@media(prefers-reduced-motion:reduce){.blob,.blob img,.flick{animation:none!important;opacity:1;transition:none!important}.hp-opt{transition:none}}
.home .card.mini{display:flex;flex-direction:row;padding:14px}
.home{--tx:var(--k-000);--mu:var(--k-555);--line:var(--k-ddd);--line2:var(--k-999)}.home .nav{--tx:var(--k-f2f2f2);--mu:var(--k-a8a8a8);--line:var(--k-262626)}.home .digest,.home .sponsor{--tx:var(--k-fff);--mu:var(--k-ccc)}

/* ---- site-wide light theme (matches homepage) ---- */
:root{--bg:var(--k-fff);--card:var(--k-f5f5f5);--line:var(--k-dcdcdc);--line2:var(--k-000);--tx:var(--k-000);--mu:var(--k-555);--inv:var(--k-000);--r:14px}
body{background:var(--k-fff);color:var(--k-000);background-image:radial-gradient(color-mix(in srgb,var(--k-000) 5.9%,transparent) 1px,transparent 1px);background-size:14px 14px}
.nav{background:var(--k-fff);border-bottom:1px solid var(--k-000)}.nav nav a{color:var(--k-333)}.nav nav a:hover{color:var(--k-000)}.logo{color:var(--k-000)}
.btn{background:var(--k-000);color:var(--k-fff)!important;border:1.5px solid var(--k-000)}.btn:hover{background:var(--k-fff);color:var(--k-000)!important}
.badge{background:var(--k-000);color:var(--k-fff)}
.v,.bf,.pr,td,dl.pf dd,dl.facts dd,.more dd,.lp p,.lp li{color:var(--k-333)}
.page h1,.lp h1{font:900 clamp(34px,4.6vw,60px)/1.02 var(--dot);letter-spacing:.01em}
.page h1{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.page h2,.lp h2{font-family:var(--dot);font-weight:900;letter-spacing:.01em}
.pick{border:2px solid var(--k-000);border-radius:var(--cr);background:var(--k-fff);box-shadow:none}
.pick h2{font:900 clamp(30px,4vw,46px)/1 var(--dot);display:flex;align-items:center;gap:14px}
.pick:hover{background:var(--k-fff);border-color:var(--k-000)}
.card{background:var(--k-fff);border:1.5px solid var(--k-000);border-radius:var(--cr)}.card:hover{background:var(--k-fff);border-color:var(--k-000)}
.tbl,.tw{border:1.5px solid var(--k-000);border-radius:var(--cr);background:var(--k-fff)}
.th{background:var(--k-000);color:var(--k-fff);border-bottom:0}.tr{border-bottom:1px dashed var(--k-bbb)}
.tr summary:hover,.tr[open] summary,.more{background:var(--k-f5f5f5)}
.nm{display:flex;align-items:center;gap:10px}
thead th,.lp thead th{background:var(--k-000);color:var(--k-fff)}
.lp .tblwrap,.lp table{background:var(--k-fff)}
.lp .box{border:2px solid var(--k-000);border-radius:var(--cr);box-shadow:none;background:var(--k-fff)}
.mono{width:42px;height:42px;flex:none;border-radius:var(--cr);background:var(--k-000);color:var(--k-fff);display:inline-grid;place-items:center;font:900 21px/1 var(--dot)}
.mono.lg{width:64px;height:64px;font-size:34px;border-radius:var(--cr)}.mono.xs{width:26px;height:26px;font-size:14px;border-radius:var(--cr)}
.ns{border:2px solid var(--k-000);border-left-width:2px;border-radius:var(--cr);padding:16px 18px;background:var(--k-fff)}
.ns.big{box-shadow:none}.nsv{color:var(--k-555)}.ns .sc{font:900 26px/1 var(--dot)}.ns.big .sc{font-size:34px}
.digest,.sponsor{background:var(--k-000);color:var(--k-fff);border:0;border-radius:var(--cr);--tx:var(--k-fff);--mu:var(--k-ccc)}
.digest a,.sponsor a,.sponsor p,.digest .muted{color:var(--k-ddd)!important}.slbl{border-color:var(--k-ccc)}
.digest .btn{background:var(--k-fff);color:var(--k-000)!important;border-color:var(--k-fff)}.digest input{background:var(--k-fff);color:var(--k-000);border-color:var(--k-fff)}
.foot{border-top:1px solid var(--k-000);color:var(--k-444)}.foot a,.fl a{color:var(--k-000)}
.sponbar{background:var(--k-fff);border-top:1px solid var(--k-000)}
.chev{border-color:var(--k-000)}
.glist{border-top:1px solid var(--k-000)}.glist li{border-bottom:1px dashed var(--k-bbb)}
.center h1{font:900 clamp(40px,7vw,90px)/1 var(--dot)}
input[type=number]{background:var(--k-fff)!important;color:var(--k-000)!important;border:1.5px solid var(--k-000)!important;border-radius:var(--cr)}
.btn.is-soon{background:var(--k-fff);color:var(--k-777)!important;border-color:var(--k-bbb)}
.tag,.tag.spon,.tag.feat{color:var(--k-000);border-color:var(--k-777)}
@media(max-width:640px){.tbl{border:0;background:transparent}.page h1{font-size:34px}}
main.page>article>ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
main.page>article>ul li{margin:0}main.page>article>ul a{display:block;border:1.5px solid var(--k-000);border-radius:var(--cr);padding:10px 14px;background:var(--k-fff);text-decoration:none;font-weight:600;transition:background .3s,color .3s}
main.page>article>ul a:hover{background:var(--k-000);color:var(--k-fff)}
.glinks{list-style:none;padding:0!important;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}.glinks li{margin:0!important}
.glinks a{display:block;border:1.5px solid var(--k-000);border-radius:var(--cr);padding:10px 14px;background:var(--k-fff);text-decoration:none;font-weight:600;transition:background .3s,color .3s}.glinks a:hover{background:var(--k-000);color:var(--k-fff)!important}
.srcs{font-size:14px;overflow-wrap:anywhere}.cta .lnk{margin-left:14px}
/* ---- uniform card system ---- */
:root{--cr:14px;--cb:1.5px solid var(--k-000);--cp:14px 16px;--cg:12px;--logo:40px}
.grid,.home #rankings .grid,.glinks,main.page>article>ul{gap:var(--cg)!important;grid-auto-rows:1fr}
/* one card look: homepage ranked cards (.card.mini) and every other box (.card.panel; add .tap when the whole box is clickable) */
.card.mini,.card.panel,.lp .box,.tbl{border:var(--cb)!important;border-radius:var(--cr)!important;box-shadow:none!important}
.card.panel{background:var(--k-fff);color:var(--k-000);padding:var(--cp)!important;display:block;transition:background-color .15s,color .15s,border-color .15s}
.card.panel:not(.tap):hover{background:var(--k-fff);border-color:var(--k-000);cursor:auto}
.card.panel.tap{cursor:pointer}
.card.mini{height:104px;padding:var(--cp)!important;gap:12px;align-items:flex-start;overflow:hidden}
.card.mini>div{min-width:0}
.card.mini h3{font-size:15px!important;line-height:1.3;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.mini .v,.glist li span,.lt-nm small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px!important;line-height:1.4}
.mono,.card.mini .mono{width:var(--logo)!important;height:var(--logo)!important;border-radius:var(--cr)!important;font-size:19px!important;flex:none}
.mono.xs{width:26px!important;height:26px!important;font-size:14px!important;border-radius:var(--cr)!important}
.mono.lg{width:64px!important;height:64px!important;font-size:32px!important;border-radius:var(--cr)!important}


.glinks a,main.page>article>ul a{height:48px;padding:0 16px!important;display:flex!important;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
.glist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--cg);border-top:0!important}
.glist li{height:112px;padding:var(--cp)!important;background:var(--k-fff);overflow:hidden;border-bottom:var(--cb)!important}
.glist li a{font-size:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.lp .box{padding:24px!important}
.digest,.sponsor{border-radius:var(--cr)!important}
.lt-row{min-height:72px}
@media(max-width:560px){.card.mini{height:96px}.glist{grid-template-columns:1fr}}
.tr summary{height:60px;align-items:center!important;padding-top:0!important;padding-bottom:0!important}
.tr summary>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr .nm{overflow:hidden}.tr .nm>span:not(.mono){overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){.tr summary{height:72px;align-content:center}}
.nmt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nsl{color:inherit;text-decoration:underline;text-decoration-style:dotted}
.hws th:nth-child(1){width:26%!important}.hws th:nth-child(2){width:14%!important}.hws th:nth-child(3){width:60%!important}.lp table.hws{display:table}
.mono.has-logo{background:var(--k-fff)!important;border:1.5px solid var(--k-000);padding:5px;overflow:hidden}
.mono.has-logo img{width:100%;height:100%;object-fit:contain;display:block;filter:grayscale(1) contrast(1.1);transition:filter .4s ease}
.card:hover .mono.has-logo img,.pick:hover .mono.has-logo img,.tr summary:hover .mono.has-logo img,main.page h1:hover .mono.has-logo img{filter:none}
.card.mini:hover .mono.has-logo{background:var(--k-fff)!important}
.mono.xs.has-logo{padding:3px}.mono.lg.has-logo{padding:8px}
/* builder picker cards */





.specs{list-style:none;margin:auto 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.specs li{border:1px solid var(--k-000);border-radius:var(--cr);padding:4px 8px;font-size:12px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--k-fff)}
.specs li span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--k-666)}
.specs li:last-child{grid-column:1/-1}


.specs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.specs li{min-width:0;padding:3px 7px}.specs li:first-child{grid-column:1/-1}.specs li:last-child{grid-column:1/-1}



.lp .glist{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;list-style:none;padding:0}
.lp .glist>li{min-width:0;height:150px;overflow:hidden;margin:0}
@media(max-width:1000px){.lp .glist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.lp .glist{grid-template-columns:minmax(0,1fr)}}
.lp:has(.glist){max-width:1080px}
.lp .glist>li{height:140px}
.lp .glist>li a>*:first-child,.lp .glist>li b,.lp .glist>li h3,.lp .glist>li strong{white-space:normal!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lp .glist>li p,.lp .glist>li span{-webkit-line-clamp:3!important}
/* tool pages: boxes grow to fit, equal height via grid stretch */
main.page .glinks,main.page .related{align-items:stretch}
main.page .glinks a,main.page .related a,main.page .glinks li,main.page .related li{height:auto!important;min-height:48px;white-space:normal!important;text-overflow:clip!important;overflow:visible!important;-webkit-line-clamp:unset!important;display:flex;align-items:center}
main.page .glinks a *,main.page .related a *{white-space:normal!important;text-overflow:clip!important;overflow:visible!important;-webkit-line-clamp:unset!important}
main.page dd,main.page dt,main.page p,main.page li,main.page td,main.page th{overflow-wrap:anywhere}
main.page .tblwrap,main.page .facts{overflow-x:auto;max-width:100%}
main.page ul li>a{white-space:normal!important;text-overflow:clip!important;overflow:visible!important;height:auto!important}
/* blob expressions */
.hp-hero .blob{position:relative}
.hp-hero .blob .b-ex{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .35s ease}
.hp-hero .blob .b-mood{transition:opacity .35s ease}


.lt-smug{width:22px;height:22px;vertical-align:-5px;margin-right:6px;display:inline-block}
.b-404{display:block;margin:0 auto 12px;width:160px;height:160px}
.b-empty{display:block;margin:0 auto 8px;width:64px;height:64px}
#empty:not([hidden]){text-align:center}
@media(prefers-reduced-motion:reduce){.hp-hero .blob .b-ex,.hp-hero .blob .b-mood{transition:none}}
.lt .lt-smug{filter:invert(1)}

/* compact newsletter box (non-home pages) */
.digest.sm{margin:40px 0 8px;padding:20px 24px;gap:12px 24px}.digest.sm h2{font-size:18px;margin:0 0 2px}.digest.sm p{font-size:14px}.digest.sm input{min-width:220px;padding:9px 14px;font-size:15px}.digest.sm .btn{padding:9px 16px}
@media(max-width:560px){.digest.sm{padding:18px}.digest.sm form{width:100%}.digest.sm input{min-width:0;flex:1}}


.filter-line{margin:14px 0 0;font-size:14px;color:var(--mu)}.filter-line a{color:inherit;text-decoration:underline}
.hp-lot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap}
.hp-lot .lot-hd{flex:1 1 320px;min-width:0}.hp-lot .lot-hd .muted{margin:0}
.hp-lot .search{flex:0 1 341px;margin:0 21px}/* left edge = the weekly box email row above: 1px border + 20px --fr-pad inset, 341px = .digest.sm form width */.hp-lot .search input{max-width:none;padding:11px 18px;border:2px solid var(--k-000);border-radius:var(--cr);background:var(--k-fff);color:var(--k-000);font-size:15px}
.hp-lot .search input:focus{outline:2px solid var(--k-000);outline-offset:2px}
@media (max-width:640px){.hp-lot .search{flex:1 1 100%}}
@media (min-width:641px) and (max-width:834px){.hp-lot .lot-hd{flex-basis:100%}}/* weekly box above stacks its email row under the text below 835px; drop the search under the heading at the same width so the two left edges stay level */
/* hero fits above the fold: compact on mobile, blob beside text on desktop */
.hp-hero{padding:20px 16px 4px}
.hp-hero .blob{width:min(132px,34vw)}
.hp-hero .kick{margin:8px 0 0;font-size:11px}
.hp-hero h1{font-size:clamp(30px,8.4vw,40px);margin:10px auto 12px}
.hp-hero .sub{margin:0 auto 8px;font-size:16px;line-height:1.45}
.hp-hero + .hp-sec{margin-top:16px;padding-top:28px}
@media(min-width:900px){
 .hp-hero{display:grid;grid-template-columns:auto minmax(0,720px);justify-content:center;column-gap:56px;align-items:center;text-align:left;padding:40px 24px 8px}
 .hp-hero .blob{grid-row:1/4;width:clamp(170px,17vw,230px);margin:0}
 .hp-hero .kick{margin:0}
 .hp-hero h1{font-size:clamp(44px,4.4vw,64px);margin:12px 0 14px}
 .hp-hero .sub{margin:0;max-width:600px;font-size:18px}
 .hp-hero + .hp-sec{margin-top:28px;padding-top:36px}
}
/* full-height hero: one screen minus the 61px header, content centred, calm scroll cue */
.hp-hero{position:relative;box-sizing:border-box;min-height:calc(100vh - 61px);min-height:calc(100svh - 61px);display:flex;flex-direction:column;justify-content:center;align-items:center;padding-bottom:64px}
.hp-cue{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--k-777)!important;text-decoration:none;white-space:nowrap}
.hp-cue svg,.hp-cue .cue-v{animation:hp-bob 3.2s ease-in-out 3}
.hp-cue .cue-v{display:block;font:700 15px/1 var(--mono);letter-spacing:0;font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0}   /* the ASCII down arrow, like the site's "->" */
.hp-cue:hover{color:var(--k-000)!important}
@keyframes hp-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){.hp-cue svg,.hp-cue .cue-v{animation:none}}
@media(min-width:900px){.hp-hero{display:grid;align-content:center;padding-bottom:72px}}
.hp-hero + .hp-sec{margin-top:0}
@media(max-height:500px){.hp-hero{min-height:0;padding-bottom:12px}.hp-cue{position:static;transform:none;margin-top:16px}.hp-hero .hp-cue{grid-column:1/-1;justify-self:center}}
/* Main CTAs (Get the weekly, newsletter submit, sponsor Stripe) use the card box: same border, radius, calm slow hover */
.nav .btn,.digest button[type=submit],#buy{border-width:1.5px;border-style:solid;border-radius:var(--cr);transition:background-color .5s ease,color .5s ease,border-color .5s ease}
.nav .btn,#buy{border-color:var(--k-000)}.digest button[type=submit]{border-color:var(--k-fff)}
/* price sheet */
.ps-link{margin:28px 0 0;padding:14px 18px;border:1.5px solid var(--k-000);border-radius:var(--cr);background:var(--k-fff);font-size:15px}
.ps .hp-opt{padding:10px 16px;font-size:14px}
.ps-f{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 14px}
#ps th button{all:unset;cursor:pointer;font:inherit;text-decoration:underline dotted;text-underline-offset:3px}
#ps th[aria-sort=ascending] button:after{content:" ^";content:" ^"/""}#ps th[aria-sort=descending] button:after{content:" v";content:" v"/""}
#ps td.c{white-space:nowrap;font-variant-numeric:tabular-nums}
.ps .small{font-size:13px;margin-top:10px}.ps-tips li{margin:0 0 10px}
@media(max-width:640px){#ps td.c{white-space:normal}}
main.ps{max-width:1120px}
.ps-sort{display:none;font-size:14px;margin:0 0 12px}.ps-sort select{font:inherit;padding:8px 10px;border:1.5px solid var(--k-000);border-radius:var(--cr);background:var(--k-fff);margin-left:6px}
@media(max-width:640px){.ps-sort{display:block}#ps td:empty{display:none}.ps-f .hp-opt{padding:8px 12px;font-size:13px}}
@media(min-width:641px){.ps #ps{display:table;table-layout:auto;width:100%;min-width:900px}
 .ps #ps th:nth-child(5),.ps #ps td:nth-child(5){width:36%}.ps #ps td:nth-child(1){min-width:120px}
 .ps #ps td:nth-child(8),.ps #ps th:nth-child(8){white-space:nowrap}.ps .tw{overflow-x:auto}}
@media(min-width:641px){.ps #ps{table-layout:fixed}
 .ps #ps th:nth-child(1){width:14%}.ps #ps th:nth-child(2){width:13%}.ps #ps th:nth-child(3){width:10%}.ps #ps th:nth-child(4){width:8%}
 .ps #ps th:nth-child(5){width:31%}.ps #ps th:nth-child(6){width:6%}.ps #ps th:nth-child(7){width:6%}.ps #ps th:nth-child(8){width:12%}}
/* #1 in each homepage section: small badge sitting on the card's top border (no height change) */
.home .card.mini{position:relative;overflow:visible}
.home .card.mini .badge.tp{position:absolute;top:-9px;left:14px;font:600 11px/1 var(--sans);padding:4px 8px;border-radius:var(--cr);background:var(--k-000);color:var(--k-fff);letter-spacing:.02em;pointer-events:none}
/* pick badge: tiny Numpty blob + text, white pill with the card border */
.badge.tp{display:inline-flex;align-items:center;gap:5px;background:var(--k-fff);color:var(--k-000);border:1.5px solid var(--k-000);border-radius:var(--cr);font:600 11px/1 var(--sans);padding:2px 9px 2px 4px;letter-spacing:.02em}
.badge.tp img{width:14px;height:14px;display:block;flex:none}
.home .card.mini .badge.tp{top:-11px;background:var(--k-fff);color:var(--k-000)}
.pick .badge.tp{font-size:12px;padding:3px 10px 3px 5px}.pick .badge.tp img{width:16px;height:16px}
/* tool of the week: card-size logo inline with the name, no extra height */
.st-n{display:flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;font-size:clamp(26px,3.2vw,40px);min-height:44px}
.st-n .mono{flex:none;width:40px;height:40px;margin:0}
.st-n .mono img{width:28px;height:28px}
.sticker .st-n+p{min-height:2lh;display:flex;align-items:center;justify-content:center}

/* lowercase brand style: UI labels show their source casing (no forced caps) */
.hp-hero .kick,.sticker .kick,.lt-hd,.nsv,.specs li span,.hp-cue{text-transform:none}

/* card.box layout bits (look comes from the shared card rules above) */
.glinks a.card.panel,main.page>article>ul a.card.panel{display:flex!important;align-items:center;height:auto;min-height:48px;white-space:normal}
.glinks a.card.panel,main.page>article>ul a.card.panel{overflow:hidden;line-height:1.3}
.glist li.card.panel{height:112px}
.ps-tips{list-style:none;padding:0}.ps-tips li.card.panel{margin:0 0 var(--cg)}
.ps-link.card.panel{margin:28px 0 0}
main .tblwrap.card.panel{padding:var(--cp)!important;margin:16px 0}
.ns.card.panel,.pick.card.panel{background:var(--k-fff)}
.card.panel.tap:hover span,.card.panel.tap:hover .muted{color:var(--k-ccc)!important}
.glinks li,main.page>article>ul li{display:flex}
.glinks a.card.panel,main.page>article>ul a.card.panel{flex:1;justify-content:flex-start;text-align:left;min-height:64px}

/* header logo animation (inline svg, see redesign.py LOGO_SVG): squash on load, round-eye wink on load + hover. Rest frame = static logo. */
.logo .np{width:28px;height:28px;display:block;overflow:visible}
.np-body{transform-box:view-box;transform-origin:256px 477px}
.np-lid{transform-box:fill-box;transform:scaleY(0)}
.np-lid-t{transform-origin:50% 0}.np-lid-b{transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){.np-body{animation:np-settle 1.1s cubic-bezier(.33,0,.25,1) .1s backwards}.np-load{animation:np-wink .3s ease-in-out 1.15s backwards}.logo:hover .np-hover,.logo:focus-visible .np-hover{animation:np-wink .28s ease-in-out}}
@keyframes np-settle{0%{transform:scale(1,1)}28%{transform:scale(1.035,.955)}58%{transform:scale(.99,1.012)}80%{transform:scale(1.004,.997)}100%{transform:scale(1,1)}}
@keyframes np-wink{0%,100%{transform:scaleY(0)}40%,60%{transform:scaleY(1)}}
/* /badges/ page: rank badge previews + copy-paste HTML (built by badges.py). Copy controls are plain links, not buttons. */
.bdgs .bdg-hero img,.bdg-img img{display:block;max-width:100%;height:auto}
.bdg-rules{padding-left:20px}.bdg-rules li{margin:4px 0}
.bdg-search{margin:8px 0 4px}.bdg-tip{font-size:15px}
.bdg-cat h2{margin:32px 0 12px}
.bdg-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--cg)}
.bdg-item{border:var(--cb);border-radius:var(--cr);padding:var(--cp);background:var(--k-fff);display:flex;flex-direction:column;gap:10px;min-width:0;scroll-margin-top:80px}
.bdg-item.is-target{box-shadow:none;outline:1.5px solid var(--k-000);outline-offset:3px}
.bdg-item p{margin:0}.bdg-item .bdg-img{padding:8px 0 6px}.bdg-nm a{font-weight:600;color:var(--k-000)}.bdg-nm .muted{font-size:14px}
.bdg-code{margin:0;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--card);border:1px solid var(--line);border-radius:var(--cr);padding:8px 10px;white-space:pre-wrap;word-break:normal;overflow-wrap:anywhere}
.bdg-cp{font-size:14px}.bdg-copy{color:var(--k-000)}

/* fresh out the oven: "see more launches" plain link under the homepage list; /new/ date groups */
.rel-more{margin:14px 0 0;font-size:15px}.rel-more a{font-weight:600}
.nl .rel{color:var(--k-000)}.nl .ri{border-color:var(--k-ddd)}.nl .ri .meta,.nl .ri a.src{color:var(--k-444)}
.nl .nl-sub{margin:0 0 18px}

/* picker: project / expert mode switch (homepage.py, app.js). a control, not a CTA: small, boxed, black-on-white */








.specs li.w{grid-column:1/-1;white-space:normal}





/* expert picker: chips sit straight under the why line; any spare height goes at the bottom of the card */


/* picker v3: every card the same box in both modes (top, why, chips); expert cards carry 1-2 key chips and open a full spec sheet.
   job choices and the mode switch are plain text tabs (see below) */










/* picker tabs: job choices and the mode switch are text, not boxes. muted #555, selected black + 2px underline, hover is colour only */











/* ---------- brand pass (voice-pass): one radius, one border, one muted grey, one heading weight ---------- */
:root{--mu:var(--k-555)}
.muted,.sub,.hint,.updated,.home .muted,.home .sub,.home .kick,.specs li span,.meta,.crumbs{color:var(--k-555)}
main h3,.card h3{font-weight:600!important}
/* buttons are for the main CTAs only (get the weekly, subscribe, book a week): same 14px radius as the cards everywhere */
.btn,.btn.sm,.nav .btn{border-radius:var(--cr)!important}
.digest input,.search input,input[type=email],input[type=search],input[type=text]:not(.sr),input[type=number],select,textarea{border-radius:var(--cr)!important;font-family:var(--sans)}
.search input{border:var(--cb)!important}
select,input[type=number]{font:inherit}
/* plain links that used to be buttons */
.lnk,.mk-cta,.pt-cta{font:600 15px/1.4 var(--sans);color:var(--k-000);text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0}
.lnk:hover,.mk-cta:hover,.pt-cta:hover{text-decoration-thickness:2px}
.sticker .lnk{display:inline-block;margin:6px 0 0;font-size:14px}
/* functional copy buttons on the badge pages: text, not boxes */
button.cp,.bdg-copy,.bdg-item button{all:unset;cursor:pointer;font:600 14px/1.4 var(--sans);color:var(--k-000);text-decoration:underline;text-underline-offset:3px}
button.cp:hover,.bdg-item button:hover{text-decoration-thickness:2px}
button.cp:focus-visible,.bdg-item button:focus-visible{outline:2px solid var(--k-000);outline-offset:3px;border-radius:var(--cr)}
/* code boxes and previews share the card radius */
.bdg-code,textarea.snip,.snip,figure{border-radius:var(--cr)!important}
textarea.snip,.bdg-code{border:var(--cb)!important}
/* job / filter choices outside the homepage picker (price sheet) use the same text tabs as the picker */

.hp-opt:not(#picker .hp-opt){all:unset;box-sizing:border-box;cursor:pointer;font:600 15px/1.3 var(--sans);color:var(--k-555);padding:6px 0 4px;border-bottom:2px solid transparent;transition:color .15s ease;white-space:nowrap}
.hp-opt:not(#picker .hp-opt):hover{color:var(--k-000)}
.hp-opt.on:not(#picker .hp-opt){color:var(--k-000);border-bottom-color:var(--k-000)}
.hp-opt:not(#picker .hp-opt):focus-visible{outline:2px solid var(--k-000);outline-offset:3px}
/* picker: key chips sit under the why line on every card; "full specs" at the foot of every card */

/* the weekly is a name: same Doto heading on every page, big or slim */
.digest h2,.digest.sm h2{font-family:var(--dot)!important;font-weight:900!important;letter-spacing:0;font-size:22px!important;line-height:1.1}
.ps-f{display:flex!important;flex-wrap:wrap;gap:6px 22px!important;margin:18px 0 14px}

/* tool pages: full specs (#specs), every chip we have, in the card chip style; anchor clears the sticky nav */
#specs{scroll-margin-top:84px;margin:28px 0 8px}
#specs h2{margin:0 0 4px}#specs .muted{margin:0 0 12px}
#specs .specs{grid-template-columns:repeat(3,minmax(0,1fr))!important;margin:0;gap:8px}
#specs .specs li{white-space:normal!important;overflow:visible!important;grid-column:auto!important;margin:0!important;padding:5px 9px;font-size:13px}
#specs .specs li span{font-size:11px;color:var(--k-555)}
@media(max-width:700px){#specs .specs{grid-template-columns:minmax(0,1fr)!important}}

/* tool pages: #specs is one spec-sheet card. label (small, #555) over value (Inter, black), hairlines between rows,
   two columns of rows on desktop, one on mobile; long rows span both columns; verified sits as the card's footer line */
#specs{scroll-margin-top:84px;margin:24px 0 8px}
#specs .sheet{background:var(--k-fff);border:var(--cb);border-radius:var(--cr);padding:4px 20px 0;max-width:none}
#specs .sheet dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;margin:0;grid-auto-flow:row dense}
#specs .srow{padding:11px 0 10px;border-bottom:1px solid var(--k-e6e6e6);min-width:0}
#specs .srow.w{grid-column:1/-1}
#specs .srow dt{font:400 12px/1.3 var(--sans);color:var(--k-555);margin:0 0 3px}
#specs .srow dd{margin:0;font:400 15px/1.45 var(--sans);color:var(--k-000);overflow-wrap:anywhere}
#specs .srow dd a{color:var(--k-000)}
#specs .sheet-ft{margin:0;padding:10px 0 12px;font-size:12px;color:var(--k-555)}
@media(max-width:700px){#specs .sheet{padding:2px 16px 0}#specs .sheet dl{grid-template-columns:minmax(0,1fr)}}
/* picker cards: key specs as label/value rows with a hairline, like the spec sheet, not mini-boxes */





/* ---------- tool-page spec sheet, terminal edition (spec-terminal) ----------
   one mono card; title set into the top border; fixed label column; ─ dashed rules between rows; verified footer.
   corners: sharp by default. For the rounded version set --sheet-r:var(--cr) (14px) on :root. */
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/jetbrains-mono.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--sheet-r:0px}
#specs{max-width:760px;margin:28px 0 8px}
#specs .specs-in{margin:0 0 18px}
#specs .sheet{position:relative;font-family:var(--mono);background:var(--k-fff);border:var(--cb);border-radius:var(--sheet-r);padding:22px 22px 0;margin-top:10px}
#specs .sheet-t{position:absolute;top:0;left:16px;transform:translateY(-55%);margin:0;padding:0 8px;background:var(--k-fff);font:600 15px/1.2 var(--mono)!important;letter-spacing:0;color:var(--k-000);text-transform:none}
#specs .sheet dl{display:block;margin:0}
#specs .srow{display:grid;grid-template-columns:17ch minmax(0,1fr);column-gap:2ch;padding:9px 0;border:0!important;border-bottom:1px dashed var(--k-9a9a9a)!important}
#specs .srow:last-child{border-bottom:0!important}
#specs .srow dt{font:400 13px/1.55 var(--mono);color:var(--k-555);margin:0}
#specs .srow dd{font:400 13.5px/1.55 var(--mono);color:var(--k-000);margin:0;overflow-wrap:anywhere}
#specs .srow dd a{color:var(--k-000);text-decoration:underline;text-underline-offset:3px}
#specs .sheet-ft{margin:0;padding:18px 0 16px;font:400 12px/1.5 var(--mono);color:var(--k-555)}
@media(max-width:560px){#specs .sheet{padding:20px 16px 0}#specs .srow{grid-template-columns:minmax(0,1fr);row-gap:2px}#specs .srow dt{font-size:12px}}

/* ---------- spec sheet, code edition (spec-code) ----------
   editor look: file-name legend, $ prompt with a block cursor, grey gutter with line numbers (CSS counter),
   grey keys + colon, black values, numbers and yes/no in bold, CLI flags as inline code, a blank line, then # comment lines.
   --acc is the one optional accent (prompt + cursor); monochrome by default. Rows carry no vertical padding so the
   gutter rule (each line's ::before border) runs unbroken; spacing lives inside the cells. */
#specs{--acc:var(--k-000);--gw:5ch;--kw:24ch}
#specs .sheet.code{counter-reset:ln;padding:22px 22px 10px 0;background:var(--k-fff)}
#specs .sheet.code .sheet-t{font:600 14px/1.2 var(--mono)!important}
#specs .cl{display:grid;grid-template-columns:var(--gw) var(--kw) minmax(0,1fr);margin:0;padding:0;font:400 13.5px/1.6 var(--mono);color:var(--k-000)}
#specs .cl::before{counter-increment:ln;content:counter(ln);grid-column:1;grid-row:1;align-self:stretch;box-sizing:border-box;text-align:right;padding:7px 1.2ch 0 0;color:var(--k-aaa);font:400 12px/1.75 var(--mono);user-select:none;border-right:1px solid var(--k-e3e3e3)}
#specs .sheet-cmd,#specs .sheet-cm,#specs .sheet-ft,#specs .blank{grid-template-columns:var(--gw) minmax(0,1fr)}
#specs .sheet-cmd>span.ln-x{display:none}
#specs .sheet-cmd .txt,#specs .sheet-cm .txt,#specs .sheet-ft .txt{grid-column:2;padding:7px 0 0 1.8ch}
#specs .sheet-cmd .txt{padding-bottom:10px}
#specs .sheet-cmd .pr{color:var(--acc);font-weight:700}
#specs .sheet-cmd code{font:600 13.5px/1.6 var(--mono);background:none;padding:0;border:0;color:var(--k-000)}
@keyframes np-blink{50%{opacity:0}}
#specs .sheet.code dl{display:block;margin:0}
#specs .sheet.code .srow{padding:0!important;border:0!important;background:none!important;column-gap:0!important;gap:0!important}
#specs .sheet.code .srow dt,#specs .sheet.code .srow dd{padding:7px 0;margin:0;border-bottom:1px dashed var(--k-c8c8c8)}
#specs .sheet.code .srow:last-child dt,#specs .sheet.code .srow:last-child dd{border-bottom:0}
#specs .sheet.code .srow dt{grid-column:2;padding-left:1.8ch;font:400 13px/1.6 var(--mono);color:var(--k-666)}
#specs .sheet.code .srow dt .co{color:var(--k-aaa)}
#specs .sheet.code .srow dd{grid-column:3;font:400 13.5px/1.6 var(--mono);color:var(--k-000);overflow-wrap:anywhere;padding-right:4px;padding-left:1ch}
#specs .sheet.code .num,#specs .sheet.code .kw{font-weight:700;color:var(--k-000)}
#specs .sheet.code dd code{font:500 12.5px/1.4 var(--mono);background:var(--k-f1f1f1);border:1px solid var(--k-e0e0e0);border-radius:var(--cr);padding:0 4px;color:var(--k-000);white-space:nowrap}
#specs .blank::before{padding-top:7px}#specs .blank::after{content:"";grid-column:2;height:1.6em}
#specs .sheet-cm .txt,#specs .sheet-ft .txt{color:var(--k-666);font:400 12.5px/1.6 var(--mono)}
#specs .sheet-ft .txt{padding-bottom:4px}
@media(max-width:560px){
 #specs .sheet.code{padding:22px 16px 10px}
 #specs .cl{grid-template-columns:minmax(0,1fr)!important}
 #specs .cl::before{display:none}
 #specs .sheet.code .srow dt,#specs .sheet.code .srow dd,#specs .cl .txt{grid-column:1;padding-left:0}
 #specs .sheet.code .srow dt{border-bottom:0;padding-bottom:0}
 #specs .sheet.code .srow dd code{white-space:normal}
 #specs .blank::after{grid-column:1;height:.6em}
}
/* ---------- code look outside the spec sheet (code_look.py): 404.log, <slug>.badge.html, prices.diff ----------
   same parts as the spec sheet: JetBrains Mono, sharp 1.5px border, legend file name, grey gutter numbers, grey # comments. */
.cc{position:relative;counter-reset:cc;font-family:var(--mono);background:var(--k-fff);border:var(--cb);border-radius:0;padding:20px 18px 12px 0;margin:22px 0 12px;text-align:left;color:var(--k-000)}
.cc-t{position:absolute;top:0;left:14px;transform:translateY(-50%);margin:0;padding:0 8px;background:var(--k-fff);font:600 13px/1.2 var(--mono);color:var(--k-000);white-space:nowrap;max-width:calc(100% - 28px);overflow:hidden;text-overflow:ellipsis}
.cc-l{display:grid;grid-template-columns:4.5ch minmax(0,1fr);margin:0;font:400 13.5px/1.6 var(--mono);color:var(--k-000)}
.cc-l::before{counter-increment:cc;content:counter(cc);text-align:right;padding:3px 1.1ch 3px 0;color:var(--k-aaa);font:400 12px/1.75 var(--mono);border-right:1px solid var(--k-e3e3e3);user-select:none}
.cc-l>.x{padding:3px 0 3px 1.6ch;overflow-wrap:anywhere;min-width:0}
.cc .pr{font-weight:700}
.cc-c>.x{color:var(--k-666);font-size:12.5px}.cc-c a{color:var(--k-666)}
.cc-404{max-width:640px;margin:26px auto 18px}
.cc-404 .cc-err b{font-weight:700}
/* badge frames: the <pre> is the numbered line; copy link stays below, plain */
.cc-bdg{margin:20px 0 8px;padding:16px 12px 8px 0}
.cc-bdg pre.bdg-code.cc-l{background:none!important;border:0!important;border-radius:0!important;padding:0;white-space:normal}
.cc-bdg pre.bdg-code>code.x{display:block;white-space:pre-wrap;word-break:normal;overflow-wrap:anywhere;font:400 12px/1.6 var(--mono)}
/* prices.diff */
.pdiff{max-width:760px;margin:26px 0}
.cc-del>.x,.cc-add>.x{display:flex;gap:1.2ch}
.cc-del>.x{color:var(--k-666)}.cc-del s{text-decoration-thickness:1px}
.cc-add>.x{font-weight:700}
.cc .sg{flex:none;width:1ch}
@media(max-width:560px){
 .cc{padding:18px 14px 10px}
 .cc-l{grid-template-columns:minmax(0,1fr)}
 .cc-l::before{display:none}
 .cc-l>.x{padding-left:0}
}
.cc-b>.x{min-height:1.6em}
@media(max-width:560px){.cc-b{display:none}}
/* ---------- code look, round 2 (code_look.py late): homepage, guides, partners ----------
   same .cc parts. .cc-cmdc: a small command card heading a list. .cc-kv: grey key / black value / grey # comment, like the spec sheet. */
.cc-cmdc{max-width:640px;margin:14px 0 18px;padding:16px 18px 8px 0}
#releases .cc-cmdc{margin:10px 0 16px}
.cc-out>.x{font-weight:700}
.cc-kv>.x{display:grid;grid-template-columns:var(--kw,17ch) minmax(0,1fr);column-gap:1.5ch}
.cc-kv .k{color:var(--k-666)}
.cc-kv .v{color:var(--k-000);min-width:0}.cc-kv .v>b{font-weight:400}.cc-menu .v>b{font-weight:700}
.cc-kv .cm{color:var(--k-666);font-size:12.5px}
.how .cc-how{max-width:820px;margin:8px 0 16px;--kw:16ch}
.cc-menu{max-width:820px;margin:8px 0 22px;--kw:22ch}
.cc-toc-c{max-width:none;margin:22px 0 8px}
.lp h2[id]{scroll-margin-top:76px}
.cc-toc .hh{color:var(--k-aaa)}
.cc-toc a{color:var(--k-000);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.lp .cc p,.lp .cc li{color:inherit;margin:0}
.lp .cc-c>.x{color:var(--k-666)}
@media(max-width:560px){
 .cc-kv>.x{display:block}
 .cc-kv .cm{display:block}
 .cc-kv .k{margin-right:1ch}
 .cc-cmdc{padding:16px 14px 8px}
}

/* =====================================================================================================
   BRAND: the code look, everywhere (code-look-3). This is the last layer and the one to edit.
   Tokens: one frame (1.5px black, square corners), one mono (JetBrains Mono) for labels/meta/tags/buttons,
   Doto for big display headings, Inter for body copy and table rows. Black and white only.
   Shared classes (any page can use them):
     .cframe        a framed box; put <p class="cc-t">name.ext</p> first inside it for a mono legend in the top border
     .btn           primary button: mono, thin outline, white; fills black only on hover/focus
     .lnk/.mk-cta/.pt-cta/.hp-more   secondary: mono text link, underlined
     .tag/.badge/.slbl/.pill        mono, square, thin outline
   ===================================================================================================== */
:root{--r:0px;--cr:0px;--sheet-r:0px;--cb:1.5px solid var(--k-000);--fr-pad:20px 20px 18px;--lbl:600 12px/1.4 var(--mono);--lbl-s:400 12px/1.5 var(--mono);--btn:600 13.5px/1 var(--mono)}

/* --- frames: every card, box, panel and callout --- */
:root :is(.card,.card.mini,.card.panel,.pick,.lp .box,.box,.tbl,.tw,.tblwrap.card.panel,.ns,.ns.big,.glist li,.glinks a,.also li,
  main.page>article>ul a,.bdg-item,.bdg-code,.ps-link,.digest,.digest.sm,.sponsor,.lt,.sticker,.mk-kpis div,.cframe,.unc,figure,.snip,textarea.snip){
  border:var(--cb)!important;border-radius:0!important;box-shadow:none!important}
:root .cframe,:root .digest,:root .sponsor,:root .lt,:root .sticker,:root .pick,:root .ns.big{position:relative}
.card a.stretch::after,.pick a.stretch::after{border-radius:0!important}
/* legends: the .cc-t from code_look.py, usable on any framed box */
:root :is(.cframe,.digest,.lt,.sticker,.pick,.sponsor,.foot-disc)>.cc-t{position:absolute;top:0;left:14px;transform:translateY(-50%);margin:0;padding:0 8px;background:var(--k-fff);
  font:600 13px/1.2 var(--mono)!important;color:var(--k-000)!important;letter-spacing:0;text-transform:none;white-space:nowrap;max-width:calc(100% - 28px);overflow:hidden;text-overflow:ellipsis;z-index:2}
/* hover on clickable boxes: no fill flip, the title underlines and the frame thickens a hair */
:root :is(.card.mini,.card.panel.tap,.glinks a,main.page>article>ul a,.pick,.glist li):hover{background:var(--k-fff)!important;color:var(--k-000)!important;box-shadow:inset 0 0 0 1px var(--k-000)!important}
:root :is(.card.mini,.card.panel.tap,.glinks a,main.page>article>ul a,.glist li):hover :is(a,span,.muted,.v){color:inherit!important}
:root .card.mini:hover .v,:root .card.panel.tap:hover span,:root .card.panel.tap:hover .muted{color:var(--k-444)!important}
:root :is(.card.mini,.card.panel.tap,.pick):hover :is(h2 a,h3 a,a.stretch){text-decoration:underline}
:root .glinks a:hover,:root main.page>article>ul a:hover{text-decoration:underline}
.card.mini:hover .mono{background:var(--k-fff);color:var(--k-000)}

/* dark blocks go white: newsletter, sponsor slot, league table, sponsor bar */
:root :is(.digest,.home .digest,.sponsor,.home .sponsor){background:var(--k-fff)!important;color:var(--k-000)!important;--tx:var(--k-000);--mu:var(--k-555)}
:root :is(.digest,.sponsor) :is(a,p,.muted,small){color:var(--k-000)!important}
:root :is(.digest,.sponsor) .muted,:root .digest small{color:var(--k-555)!important}
:root .digest{padding:28px 24px 22px!important;margin:48px 0 56px}
:root .digest.sm{padding:24px 20px 18px!important;margin:44px 0 8px}
:root .digest input,:root .home .digest input{background:var(--k-fff)!important;color:var(--k-000)!important;border:var(--cb)!important}
:root .sponsor{border-style:dashed!important;padding:16px 18px}
:root .sponbar{background:var(--k-fff);color:var(--k-000);border-top:var(--cb)}:root .sponbar a{color:var(--k-000)}
:root .lt{background:var(--k-fff)!important;color:var(--k-000)!important;padding:24px 22px 14px!important}
:root .lt-hd{color:var(--k-555);border-bottom:1px dashed var(--k-9a9a9a);font:var(--lbl)!important;letter-spacing:0}
:root .lt-row{border-bottom:1px dashed var(--k-c8c8c8)}:root .lt-row:hover{background:var(--k-f4f4f4)}
:root .lt-nm a{color:var(--k-000)!important}:root .lt-nm small,:root .lt-note{color:var(--k-555)!important}:root .lt-note a{color:var(--k-000)}
:root .lt .lt-smug{filter:none}
:root .lt-mv{font:var(--lbl)!important}
/* tool of the week: a straight frame, not a tilted sticker */
:root .sticker{transform:none!important;background:var(--k-fff);padding:30px 24px 22px!important;text-align:left}
:root .sticker::after{display:none!important}
:root .sticker .st-n{justify-content:flex-start;font-size:clamp(24px,2.6vw,34px)}
:root .sticker .st-n+p{justify-content:flex-start;min-height:0}
:root .hp-stick{padding-top:56px}

/* --- tables: frame and header row match; rows stay Inter for scanning --- */
:root :is(thead th,.lp thead th,.th){background:var(--k-fff)!important;color:var(--k-555)!important;font:var(--lbl)!important;letter-spacing:0;text-transform:none;border-bottom:var(--cb)!important}
:root .tr{border-bottom:1px dashed var(--k-c8c8c8)}
:root .tr summary:hover,:root .tr[open] summary,:root .more{background:var(--k-f6f6f6)}
:root .lp .tblwrap{border:var(--cb);background:var(--k-fff)}
:root .lp .tblwrap.card.panel{padding:0!important}
:root .lp th,:root .lp td{border-bottom:1px dashed var(--k-c8c8c8)}
@media(max-width:640px){
 :root tr{border:var(--cb)!important;border-radius:0!important}
 :root .lp tbody tr{border:var(--cb)!important}
 :root td:before{font:var(--lbl)!important;color:var(--k-555)}
 :root .lp .tblwrap,:root .tw{border:0!important;background:transparent}
}

/* --- mono for labels, meta, small text, tags, pills --- */
:root :is(.kick,.crumbs,.updated,.plbl,.pt-k,.nsv,.hint,.fine,.lt-hd,.specs li span,#specs .srow dt,.ri time,.ri .src,.ri a.src,.src,
  .hp-cue,.fl,.signoff,.mk-small,.mk-conf,.mk-bl,.mk-pr .u,.pt-pr .u,.mk-kpis span,.digest small,.bdg-nm .muted,.rel-more,.filter-line,.sheet-ft,
  .nav nav a,.cat h2 .all,.lt-mv,.nsr,.ns .sc small){font-family:var(--mono)!important;letter-spacing:0!important}
:root :is(.kick,.plbl,.pt-k,.hp-hero .kick,.sticker .kick){font:var(--lbl)!important;text-transform:none!important;color:var(--k-555)!important}
:root :is(.crumbs,.updated,.hint,.fine,.ri time,.src,.ri a.src,.fl,.signoff,.rel-more,.filter-line){font-size:13px!important}
:root .nsr{font-size:12.5px!important}
:root .nav nav a{font-size:14px}
:root .ri time{color:var(--k-555)}
:root :is(.tag,.tag.spon,.tag.feat,.slbl,.badge,.badge.tp,.home .card.mini .badge.tp,.pick .badge.tp,.pill,.vtick+.tag,.mk-prev .tag){
  font:500 11.5px/1.2 var(--mono)!important;letter-spacing:0;text-transform:none;background:var(--k-fff)!important;color:var(--k-000)!important;border:1px solid var(--k-000)!important;border-radius:0!important;padding:2px 6px!important}
:root :is(.badge.tp,.home .card.mini .badge.tp,.pick .badge.tp){display:inline-flex;align-items:center;gap:4px;padding:2px 6px 2px 4px!important}
:root .home .card.mini .badge.tp{top:-10px}
:root .mk-prev .tag{background:var(--k-000)!important;color:var(--k-fff)!important}
/* logo / initial tiles: square, outlined */
:root .mono,:root .mono.lg,:root .mono.xs,:root .card.mini .mono{border-radius:0!important}
:root .mono:not(.has-logo){background:var(--k-fff)!important;color:var(--k-000)!important;border:var(--cb)}

/* --- buttons: one primary (.btn), one secondary (text link). mono, thin, plain --- */
:root :is(.btn,.btn.sm,.nav .btn,.home .btn,.home .lt .btn,.home .digest .btn,.digest .btn,.digest button[type=submit],#buy){
  display:inline-flex;align-items:center;justify-content:center;gap:6px;font:var(--btn)!important;letter-spacing:0;background:var(--k-fff)!important;color:var(--k-000)!important;
  border:var(--cb)!important;border-radius:0!important;padding:10px 14px!important;box-shadow:none!important;text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s}
:root :is(.btn,.digest button[type=submit],#buy):is(:hover,:focus-visible){background:var(--k-000)!important;color:var(--k-fff)!important}
:root :is(.btn.sm,.nav .btn){padding:8px 12px!important;font-size:13px!important}
:root .btn.is-soon,:root .btn.is-soon:hover{background:var(--k-fff)!important;color:var(--k-777)!important;border-color:var(--k-bbb)!important;cursor:not-allowed}
:root :is(.lnk,.mk-cta,.pt-cta,.bdg-copy,button.cp,.bdg-item button){font:600 13.5px/1.4 var(--mono)!important;color:var(--k-000)!important;text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0}
:root :is(.lnk,.mk-cta,.pt-cta,.bdg-copy,button.cp):hover{text-decoration-thickness:2px}
/* picker tabs and mode switch: same words, mono */
:root .hp-opt:not(#picker .hp-opt){font-family:var(--mono)!important;font-size:13.5px!important;letter-spacing:0}


/* --- forms --- */
:root :is(input[type=email],input[type=search],input[type=text]:not(.sr),input[type=number],select,textarea,.search input,.hp-lot .search input,.hp-hero .search input,#bt,.calc input[type=number],.ps-sort select){
  font-family:var(--mono)!important;font-size:14px;border:var(--cb)!important;border-radius:0!important;background:var(--k-fff)!important;color:var(--k-000)!important;box-shadow:none}
:root :is(input,select,textarea):focus{outline:2px solid var(--k-000)!important;outline-offset:2px}
:root .snip,:root textarea.snip{font:12.5px/1.55 var(--mono)!important;background:var(--k-fff)!important;color:var(--k-000)!important}
:root .bdg-code{background:var(--k-fff)!important}

/* --- callouts --- */
:root .unc{padding:10px 14px!important;color:var(--k-333)!important;background:var(--k-fff)}

:root .ns{padding:14px 16px!important;background:var(--k-fff)}
:root .ns.big{padding:16px 18px!important}
:root .bdg-item.is-target{box-shadow:none!important;outline:1.5px solid var(--k-000);outline-offset:3px}
:root .mk-bars i{border-radius:0!important}
:root .mk-col li:before{border-radius:0!important}

:root .hp-opt:hover{box-shadow:none!important;transform:none!important}

/* --- footer: disclosure sits in a disclosure.txt frame --- */
:root .foot-disc{position:relative;border:var(--cb);background:var(--k-fff);padding:22px 20px 14px;margin:8px 0 18px}
:root .foot-disc p{margin:0;font-size:14px;color:var(--k-333)}
:root .foot{border-top:0!important;padding-top:20px}
:root .digest.sm{margin-bottom:28px!important}

/* --- generic framed box padding when it carries a legend --- */
:root .cframe{background:var(--k-fff);padding:var(--fr-pad)}
:root .pick>.cc-t~*:first-of-type{margin-top:4px}
:root .lt>.cc-t{background:var(--k-fff)}

/* --- category header card, launches log, scoring.yml --- */
.cc-rank{max-width:760px;margin:6px 0 22px}
.glog{margin:6px 0 10px}
.glog-day{margin:0 0 26px}
.glog-h{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin:0 0 4px;padding:0 0 8px;font:600 14px/1.4 var(--mono)!important;letter-spacing:0;border-bottom:1px dashed var(--k-9a9a9a)}
.glog-h .cm{color:var(--k-666);font-weight:400;font-size:12.5px}
.glog .rel{border-top:0;margin-left:7px;border-left:1.5px solid var(--k-000)}
.glog .ri{grid-template-columns:minmax(0,1fr) auto;padding:12px 0 12px 22px;position:relative;border-bottom:1px dashed var(--k-ddd)}
.glog .ri::before{content:"";position:absolute;left:-4.75px;top:19px;width:8px;height:8px;background:var(--k-000);outline:3px solid var(--k-fff)}
.glog-cmd{margin:0 0 14px;font:600 13.5px/1.5 var(--mono)}.glog-cmd .pr{font-weight:700}
.glog .ri time{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.glog .ri h3,.glog .ri .meta{grid-column:1}.glog .ri .src{grid-column:2;grid-row:1}
@media(max-width:640px){.glog .ri{grid-template-columns:minmax(0,1fr)}.glog .ri .src{grid-column:1;grid-row:auto}}
.cc-score{max-width:820px;margin:10px 0 18px;--kw:23ch}
.cc-score .v>b{font-weight:700}
.cc-score .cm{display:block;color:var(--k-555);font-size:13px}


@media(max-width:900px){:root .hp-stick{padding-top:28px}:root .sticker{margin:0!important;max-width:none}}
@media(max-width:640px){
 :root .lp .tblwrap.card.panel,:root main .tblwrap.card.panel{border:0!important;padding:0!important;background:transparent}
 :root .lp tbody tr{padding:10px 14px!important;margin-bottom:10px}
 :root .lp td{border-bottom:0!important;padding:3px 0!important}
 :root .lp tbody td:first-child:not([data-l]){font:var(--lbl);color:var(--k-000);padding-bottom:6px!important}
 :root td[data-l]:before{margin-top:4px}
}
:root #specs .sheet.code dd code,:root code{border-radius:0!important}
/* round 4: badge cards keep the copy link on the bottom edge so a row lines up */
:root .bdg-item .bdg-cp{margin-top:auto}

/* ===== round 4 uniformity sweep =====
   one box system, three padding sizes, two rule tokens:
   - plain cards (tool cards, picker cards, guide link cards, the pick, numptr says, callouts, sponsor): --cp
   - legend-framed boxes (cframe, subscribe.sh, league-table.txt, tool-of-the-week.md): --fr-pad
   - code cards with a line-number gutter (.cc, .cc-cmdc, the .specs sheet): --cc-pad (0 on the left: the gutter is the padding)
   - big homepage sections (.hp-sec, releases, how we rank): 1px solid black on top, same spacing.
   - --rule: sub-section and header dividers, black dashed. --rule-row: row lines inside a box or list, the spec-sheet light dash. */
:root{--fr-pad:20px 20px 18px;--cc-pad:20px 18px 12px 0;--rule:1px dashed var(--k-000);--rule-row:1px dashed var(--k-c8c8c8)}
@media(max-width:640px){:root{--fr-pad:18px 14px 14px;--cc-pad:18px 14px 10px;--cp:12px 14px}}
:root :is(.digest,.lt,.sticker,.cframe){padding:var(--fr-pad)!important}
:root :is(.cc,.cc-cmdc,#specs .sheet.code){padding:var(--cc-pad)!important}
:root :is(.card,.card.mini,.card.panel,.pick,.ns,.ns.big,.box,.lp .box,aside.box.cta,.sponsor,.ps-link,.bdg-item){padding:var(--cp)!important}
:root :is(.tblwrap.card.panel,.tbl){padding:0!important}
/* dividers: homepage category sections, related lists, launch rows, picker specs, league rows, tables, spec rows */
:root .home #rankings .cat,:root .cat{border-top:var(--rule)!important}
:root .home ul.rel,:root .nl ul.rel{border:0!important;border-top:var(--rule-row)!important}
:root .lt-hd,:root .glog-h{border-bottom:var(--rule)!important;color:var(--k-000)}
:root :is(.ri,.home .ri,.nl .ri,.glog .ri,.lt-row,.tr,.lp td,td,#specs .sheet.code .srow dt,#specs .sheet.code .srow dd){border-bottom:var(--rule-row)!important}
:root .home .how li{border-top:var(--rule-row)!important;border-color:var(--k-c8c8c8)!important}
:root .home .how li{border-top:0!important;border-bottom:var(--rule-row)!important}
/* homepage section heads all in the display face: fresh out the oven, how we rank, and the per-category heads */
:root .home :is(#rl,#hw){font:900 clamp(30px,4.2vw,50px)/1 var(--dot)!important;letter-spacing:.01em;margin:0 0 22px}
:root .home .cat h2{font-family:var(--dot)!important;font-weight:900!important;letter-spacing:.01em}
:root .home .cat h2 .all{font-family:var(--mono)!important;font-weight:600;font-size:13px}
:root .home :is(#releases,#how-we-rank){border-top:1px solid var(--k-000);padding:44px 0 8px;margin-top:36px}
:root .home #digest{margin-top:36px}
/* guides: link cards left-aligned like every other card; tables fill their frame; the closing "more guides" link is a plain mono link */
:root :is(main.page,main.lp) .glinks a.card.panel,:root main.page>article>ul a.card.panel{flex-direction:column;justify-content:center!important;align-items:flex-start!important;text-align:left!important}
@media(min-width:641px){:root .tblwrap table{display:table;width:100%}}
:root main.page p>a[href="/guides/"]:only-child{font:var(--btn);text-decoration:underline;text-underline-offset:3px;color:var(--k-000)}
/* inline code in prose: on-token light dash instead of the old grey solid box */
:root :not(pre)>code,:root #specs .sheet.code dd code{border:var(--rule-row)!important;background:none!important;padding:0 4px}
:root .cc-l>code,:root .cc-cmd code,:root .sheet-cmd code,:root #specs .sheet.code .srow:first-child code{border:0!important;padding:0}
/* privacy · terms, next to the disclosure inside disclosure.txt */
:root .foot-disc .foot-legal{margin:8px 0 0;font:var(--lbl);color:var(--k-555)}
:root .foot-disc .foot-legal a{color:var(--k-000);text-decoration:underline;text-underline-offset:3px}

/* ===== clickable boxes (stretched link): .hit card, one a.stretch whose ::after covers the card =====
   other links, buttons, form bits and the badge code sit above the overlay, so they keep their own targets and stay selectable */
:root .hit{position:relative;cursor:pointer}
:root .hit a.stretch::after{content:"";position:absolute;inset:0;z-index:1}
:root .hit :is(a:not(.stretch),button,pre,.cc,input,select,textarea,label){position:relative;z-index:2}
:root .hit .cc{cursor:text}
:root .hit:not(.lt-row,.ri):hover{box-shadow:inset 0 0 0 1px var(--k-000)!important}
:root .hit:hover a.stretch{text-decoration:underline}
:root .hit:has(a.stretch:focus-visible),:root a.card.panel.tap:focus-visible{outline:2px solid var(--k-000);outline-offset:3px}
:root .hit a.stretch:focus-visible{outline:none}
:root .hit:focus-within:not(:has(a.stretch:focus-visible)){outline:none}
:root a.card.panel.tap{cursor:pointer}

/* ===== QA pass 2026-10-16 ===== */
/* guide cards: titles wrap (two lines max) instead of being cut off mid-word with an ellipsis */
:root .glist li a{white-space:normal!important;overflow:hidden;text-overflow:clip;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.3}
/* search box clear button: black, not the browser's blue */
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;height:14px;width:14px;cursor:pointer;
  background:linear-gradient(45deg,transparent 43%,var(--k-000) 43%,var(--k-000) 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,var(--k-000) 43%,var(--k-000) 57%,transparent 57%)}
/* form labels and status lines are mono, like every other label */
:root main label:not(.sr),:root .ps-sort,:root #digest-msg{font-family:var(--mono)}

/* --- mobile menu (mobile-menu branch): under 700px the header nav folds into a plain mono "menu" toggle that opens
   nav.txt, a full-width framed panel. <details>/<summary> so it works without JS; the panel overlays the page
   (absolute under the sticky header), so opening it never shifts layout. desktop is untouched. --- */
.mm{display:none}
@media (max-width:699.98px){
 .nav .row>nav{display:none}
 .mm{display:block}
 .mm-t{list-style:none;cursor:pointer;font:600 14px/1 var(--mono);color:var(--k-000);padding:10px 0 10px 12px;margin-right:-2px;user-select:none;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
 .mm-t::-webkit-details-marker{display:none}
 .mm-t::marker{content:""}
 .mm-t:focus-visible{outline:2px solid var(--k-000);outline-offset:2px}
 .mm-x,.mm[open] .mm-o{display:none}
 .mm[open] .mm-x{display:inline}
 .mm-p{position:absolute;left:0;right:0;top:100%;background:var(--k-fff);padding:22px 16px 18px;border-bottom:1px solid var(--k-000);max-height:calc(100vh - 60px);max-height:calc(100dvh - 60px);overflow:auto}
 .mm-f{position:relative;border:1.5px solid var(--k-000);border-radius:0;padding:14px 14px 6px}
 :root .nav .mm-f nav{display:block}
 .mm-f ul{list-style:none;margin:0;padding:0}
 .mm-f li+li{border-top:1px solid var(--k-000)}
 :root .nav .mm-f nav a{display:flex!important;font-size:15px;justify-content:space-between;align-items:center;min-height:48px;padding:0 2px;color:var(--k-000);text-decoration:none;font:500 15px/1.2 var(--mono)}
 :root .nav .mm-f nav a:hover,:root .nav .mm-f nav a:focus-visible{background:var(--k-000);color:var(--k-fff);outline:0;padding:0 8px;margin:0 -6px}
 .mm-f a[aria-current]{text-decoration:underline;text-underline-offset:4px}
}
/* mobile menu: a closed <details> keeps its panel out of layout entirely (Chrome lays out closed details content) */
.mm:not([open]) .mm-p{display:none}
/* desktop nav: current section (set by community/lib/layout.js on /community/, /u/, /b/ pages). plain underline, same black-and-white look */
:root .nav nav a[aria-current]:not(.btn){color:var(--k-000);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}

/* ===== ANIM layer (anim-polish, anim.py + app.js). little and calm; everything stops for prefers-reduced-motion =====
   1 cursor: ONE class, .cc-cur (#specs .cur is the old spec-sheet name, kept as an alias). anim.py leaves one per page,
     on the first $ prompt, so only one thing ever blinks. solid block, no blink, for reduced motion.
   2 the $ prompt is black everywhere (the price column's .pr shares the class name, and its #333 leaked onto every prompt)
   3 clickable boxes: one hover, the frame thickens 1.5px over .15s; every hover transition is .15s
   4 count-up (app.js, on scroll into view): tabular nums, so the width never moves
   5 'pouring a pint...': three dots typed in steps (calculator; community buttons have their own copy in community.css)
   6 homepage only: `numptr --latest` types itself once, then the cursor blinks */
:root :is(.cc-cur,#specs .cur){display:inline-block;width:.62em;height:1.1em;margin-left:.35ch;background:var(--k-000);vertical-align:-.2em}
:root .pr+:is(.cc-cur,#specs .cur){margin-left:0}
@media (prefers-reduced-motion:no-preference){:root :is(.cc-cur,#specs .cur){animation:np-blink 1.05s steps(1) infinite}}
:root span.pr[aria-hidden="true"]{color:var(--k-000)}
:root :is(.card.mini,.card.panel.tap,.glinks a,main.page>article>ul a,.pick,.glist li,.hit:not(.lt-row,.ri)){
  box-shadow:inset 0 0 0 0 var(--k-000)!important;transition:box-shadow .15s ease,background-color .15s ease,color .15s ease}
:root :is(.card.mini,.card.panel.tap,.glinks a,main.page>article>ul a,.pick,.glist li,.hit:not(.lt-row,.ri)):hover{box-shadow:inset 0 0 0 1.5px var(--k-000)!important}
:root :is(.blob img,.hp-hero .blob .b-ex,.hp-hero .blob .b-mood,.mono.has-logo img,.chev){transition-duration:.15s}
:root :is(.hp-opt,.nav .btn,.digest button[type=submit],#buy){transition-duration:.15s}
:root :is(.lt-pts,[data-count]){font-variant-numeric:tabular-nums}
.pint{font:600 12.5px/1.5 var(--mono);color:var(--k-555);white-space:nowrap;visibility:hidden}
.pint.on{visibility:visible}
/* the calculator's indicator sits at the right end of the first row, out of the flow: no blank row under the form on phones */
:root form.calc{position:relative}
:root form.calc .pint{position:absolute;top:0;right:0;line-height:36px}
.pint::after{content:"...";display:inline-block;width:3ch;overflow:hidden;white-space:nowrap;vertical-align:top;text-align:left}
.cc-type{display:inline-block;width:15ch;overflow:hidden;white-space:nowrap;vertical-align:top}
@media (prefers-reduced-motion:no-preference){
 .pint.on::after{animation:np-dots 1.2s steps(4,jump-none) infinite}
 .cc-type.cc-wait{width:0}
 .cc-type.cc-go{animation:np-type .8s steps(15,end) both}
 .cc-type:is(.cc-wait,.cc-go):not(.cc-typed)+.cc-cur{animation:none}
}
@keyframes np-dots{from{width:0}to{width:3ch}}
@keyframes np-type{from{width:0}to{width:15ch}}

/* ===== full-width boxes: framed boxes run to the edge of the content column so stacked right edges line up;
   the words inside keep a readable measure (~70ch). grids of cards (league table + tool of the week, offer boxes, rankings) untouched.
   desktop only: under 641px every box is already full width. ===== */
@media(min-width:641px){
 :root :is(.cc-cmdc,.cc-how,.how .cc-how,.cc-menu,.cc-rank,.cc-score,.cc-toc-c,.pdiff,#specs,.ns.big){max-width:none}
 /* inner measure */
 :root :is(.cc-cmdc,.cc-how,.cc-menu,.cc-rank,.cc-score,.cc-toc-c,.pdiff) .cc-l>.x{max-width:72ch}
 :root :is(.cc-cmdc,.cc-how,.cc-menu,.cc-rank,.cc-score,.cc-toc-c,.pdiff) .cc-kv>.x{max-width:calc(var(--kw,17ch) + 1.5ch + 72ch)}
 :root .ns.big>*{max-width:70ch}
 :root #specs .sheet .srow{max-width:calc(var(--gw,5ch) + var(--kw,24ch) + 74ch)}
 :root #specs .sheet>p{max-width:calc(var(--gw,5ch) + 96ch)}
}

/* ===== growth starters (growth_starters.py): compact weekly box (weekly.sh) and the numptr stack (/stack/) ===== */
:root .wk-mini{margin:36px 0 28px}
:root .wk-mini .muted a{color:var(--k-000)!important;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.home .wk-mini{margin:28px 0 8px}
.stk{position:relative;border:var(--cb,1px solid var(--k-000));padding:26px 22px 14px;margin:26px 0 18px;font-family:var(--mono)}
.stk-cmd{margin:0 0 8px;font:500 14px/1.5 var(--mono)}
.stk-list{list-style:none;margin:0;padding:0}
.stk-row{display:grid;grid-template-columns:19ch 1fr;gap:2px 20px;padding:14px 8px;border-top:1px dashed var(--k-999);transition:background-color .3s ease}
.stk-row:hover{background:var(--k-f4f4f4)}
.stk-row p{margin:0}
.stk-job{font:600 13px/1.6 var(--mono);grid-row:span 3}
.stk-nm{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:600 18px/1.3 var(--sans)}
.stk-nm a{color:var(--k-000);text-decoration:none}.stk-row:hover .stk-nm a{text-decoration:underline}
.stk-sc{font:600 16px var(--mono);white-space:nowrap}.stk-sc small{font-size:12px;color:var(--k-555)}
.stk-why{font:14px/1.5 var(--sans);color:var(--k-333)}
.stk-kv{display:grid;grid-template-columns:10ch 1fr;gap:2px 10px;margin:6px 0 0;font:12.5px/1.5 var(--mono)}
.stk-kv div{display:contents}.stk-kv dt{color:var(--k-666);white-space:nowrap}.stk-kv dt::after{content:":"}.stk-kv dd{margin:0}
.stk-note{margin:10px 0 0;padding-top:10px;border-top:1px dashed var(--k-999);font:12px/1.5 var(--mono);color:var(--k-555)}
.stk-dl{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:8px 0 18px}
.stk-dl .btn{font-family:var(--mono)}
@media(max-width:640px){.stk{padding:22px 12px 10px}.stk-row{grid-template-columns:1fr;padding:12px 4px}.stk-job{grid-row:auto}.stk-kv{grid-template-columns:11ch 1fr}}

/* ===== hero options (LOCAL MOCK-UP, branch hero-mock; redesign.py HERO=1|2|3). same black-and-white terminal look =====
   .hp-cmd: a `$` prompt line above the headline (option 2 types `numptr --prices` once via the .cc-type/app.js pieces)
   .hp-cmt: `#` comment-style sub lines, grey mono like the code cards' # lines
   .hp-wk: one small outlined secondary link, "get the weekly", to the #digest box
   the cursor in the h1 (option 1) is the page's one .cc-cur, sized down to sit with the headline */
.hp-hero .hp-cmd{font:600 14px/1.5 var(--mono);margin:14px 0 0;color:var(--k-000)}
.hp-hero .hp-cmd .pr{margin-right:.2ch}
.hp-hero h1 .cc-cur{width:.42em;height:.78em;margin-left:.18em;vertical-align:-.04em}
.hp-hero .hp-cmt{max-width:640px;margin:0 auto 8px;font:400 13.5px/1.6 var(--mono);color:var(--k-666)}
.hp-hero .hp-cmt .hp-hash{color:var(--k-aaa)}
.hp-hero .hp-cmt a{color:var(--k-000)}
.hp-hero .hp-cmt-list{color:var(--k-333)}
.hp-hero .hp-cmt:last-of-type{margin-bottom:18px}
.hp-hero .hp-act{margin:4px 0 22px}
:root .hp-hero a.hp-wk{display:inline-block;border:1.5px solid var(--k-000)!important;padding:8px 12px!important;text-decoration:none!important;font:600 13px/1 var(--mono);color:var(--k-000);text-decoration:none;transition:background-color .15s ease,color .15s ease}
:root .hp-hero a.hp-wk:hover{background:var(--k-000);color:var(--k-fff)!important}
.hp-v-1 .sub,.hp-v-2 .sub{margin-bottom:10px}
@media(max-width:640px){.hp-hero .hp-cmt{font-size:12.5px}}
.hp-hero h1 .hp-ln{display:inline-block}   /* option 3: a beat never splits; lines break between beats */
@media(max-width:640px){.hp-v-3 h1{font-size:clamp(26px,7vw,36px)}}   /* option 3 on phones: 'a weekly round-up.' fits one line at 360px+ */
@media(min-width:900px){
 :is(.hp-v-1,.hp-v-2,.hp-v-3) .blob{grid-row:1/span 5}
 :is(.hp-v-1,.hp-v-2,.hp-v-3)>:not(.blob,.hp-cue){grid-column:2}
 .hp-hero .hp-cmd{margin:0}
 .hp-hero .sub+.hp-cmt,.hp-hero h1+.hp-cmt{margin-top:0}
 .hp-hero .sub+.hp-cmt{margin-top:14px}
 .hp-hero .hp-cmt{margin:0 0 4px;max-width:none}
 .hp-hero .hp-cmt:last-of-type{margin-bottom:0}
 .hp-hero .hp-act{margin:14px 0 0}
 .hp-hero h1 .hp-ln{display:block}   /* option 3: one beat per line on desktop */
}

/* ===== hero option 4 (LOCAL MOCK-UP, HERO=4): terminal session. copy left, a session.log window right with Numpty perched
   on its frame. the command types once (CSS steps, ~1.1s), the output lines drop in one by one, the headline lands after
   the command, the last line is a waiting `$ ▌` (the page's one cursor). pure CSS: no JS needed, every line's space is
   reserved from the first paint (no layout shift), and prefers-reduced-motion shows the finished session straight away. */
.hp-hero.hp-v-4{--t4-bl:84px;display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:22px}
.hp-v-4 .t4-copy{order:2}
.hp-v-4 .t4-term{order:1;position:relative;padding-top:calc(var(--t4-bl)*.7)}
.hp-v-4 .t4-term .blob{position:absolute;top:0;right:18px;width:var(--t4-bl);margin:0;z-index:2}
.hp-v-4 .t4-win{--cc-pad:0 0 10px;margin:0;overflow:hidden}   /* --cc-pad: the shared code-card padding rule is !important */
.hp-v-4 .t4-l{padding-right:14px}
.hp-v-4 .t4-term .blob{mix-blend-mode:multiply}   /* the svg's white square drops out: Numpty's drips melt into the title bar */
.hp-v-4 .t4-l>.x{white-space:nowrap;overflow:hidden;text-overflow:clip}
.hp-v-4 .t4-l.t4-o:not(.t4-top)>.x{white-space:normal}
.hp-v-4 .t4-l .pr{font-weight:700;color:var(--k-000)}
.hp-v-4 .t4-tw{display:inline-block;vertical-align:top;overflow:hidden;white-space:nowrap;width:calc(var(--n)*1ch)}
.hp-v-4 .t4-top>.x{font-size:15px}
.hp-v-4 .t4-top a{color:var(--k-000);text-decoration:none}.hp-v-4 .t4-top a:hover{text-decoration:underline}
.hp-v-4 .t4-rk{display:inline-block;background:var(--k-000);color:var(--k-fff);padding:0 .5ch;margin-right:.4ch;font-weight:700}
.hp-v-4 .t4-sc{color:var(--k-555);margin-left:.6ch}
.hp-v-4 .t4-pz{font-weight:700}
.hp-v-4 .t4-ok{color:var(--k-555);margin-left:.6ch}
.hp-v-4 .t4-h{font:900 clamp(34px,9vw,44px)/1.02 var(--dot);letter-spacing:.01em;margin:0 0 14px}
.hp-v-4 .hp-cmt{margin:0 0 4px;max-width:none;text-align:left}
.hp-v-4 .hp-cmt:last-of-type{margin-bottom:0}
.hp-v-4 .t4-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:18px 0 0}
.hp-v-4 .t4-more{font:600 13.5px/1 var(--mono);color:var(--k-000)}
:root .hp-v-4 .t4-win>.cc-t{position:static;transform:none;display:flex;align-items:center;gap:10px;max-width:none;margin:0 0 10px;padding:9px 14px;background:var(--k-000);color:var(--k-fff);font:600 12.5px/1.2 var(--mono)}
.hp-v-4 .t4-win>.cc-t::before{content:"";width:9px;height:9px;border:1.5px solid var(--k-fff);box-shadow:15px 0 0 -1.5px var(--k-000),15px 0 0 0 var(--k-fff),30px 0 0 -1.5px var(--k-000),30px 0 0 0 var(--k-fff);margin-right:36px;flex:none}
@media(max-width:640px){.hp-v-4 .t4-l{font-size:12px;padding-left:12px}.hp-v-4 .t4-top>.x{font-size:13.5px}.hp-v-4 .t4-l{padding-right:10px}}
@media(min-width:900px){
 .hp-hero.hp-v-4{--t4-bl:112px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);column-gap:56px;align-items:center;max-width:1200px;margin:0 auto}
 .hp-v-4 .t4-copy{order:0;grid-column:1;grid-row:1}
 .hp-v-4 .t4-term{order:0;grid-column:2;grid-row:1;width:auto}
 .hp-v-4 .t4-term .blob{grid-row:auto;width:var(--t4-bl);right:26px}
 .hp-v-4 .t4-h{font-size:clamp(48px,5vw,68px);margin-bottom:18px}
 .hp-v-4 .t4-l{padding-right:18px}
 .hp-v-4 .t4-l{font-size:14px}
}
@media (prefers-reduced-motion:no-preference){
 .hp-v-4 .t4-tw{animation:t4-type 1.1s steps(var(--n),end) .35s both}
 .hp-v-4 .t4-o{animation:t4-show .01s linear var(--d) both}   /* linear: visibility flips the moment it starts; steps(1) could stall a hair short of the end */
 .hp-v-4 .t4-h{animation:t4-land .5s cubic-bezier(.2,1.5,.45,1) 1.5s both}
 .hp-v-4 .t4-top .t4-rk{animation:t4-flash .6s steps(2,end) 2.05s 2 both}
 .hp-v-4 .t4-term .blob{animation:t4-peek .45s cubic-bezier(.2,1.5,.45,1) 2.95s both}
}
@keyframes t4-type{from{width:0}}
@keyframes t4-show{from{visibility:hidden}}
@keyframes t4-land{from{opacity:0;transform:translateY(-22px)}}
@keyframes t4-flash{50%{background:var(--k-fff);color:var(--k-000)}}
@keyframes t4-peek{50%{transform:translateY(-8px) rotate(-4deg)}}

/* ===== hero option 5 (LOCAL MOCK-UP, HERO=5): big split league table. giant headline left with smug Numpty; right, a black
   league-table card with the #1 pick of six jobs (data/tools.json): rows slide in one after another, each score counts up from
   0.0 (app.js counter, data-delay staggers it), logos go grey to colour once the table has landed, the leader row gets a white
   flash, and a beer-mat "not for sale" stamp thunks onto the corner. no cursor in this hero. no JS: final numbers are in the
   HTML; reduced motion: everything static and finished. */
.hp-hero.hp-v-5{display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:30px}
.hp-v-5 .t5-blob{width:64px;margin:0 0 10px;mix-blend-mode:multiply}
.hp-v-5 .t5-h{font:900 clamp(40px,11vw,52px)/.98 var(--dot);letter-spacing:.005em;margin:0 0 16px}
.hp-v-5 .t5-sub{margin:0;max-width:52ch;font-size:16px;line-height:1.5;color:var(--k-333)}
.hp-v-5 .t5-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:20px 0 0}
.hp-v-5 .t5-more{font:600 13.5px/1 var(--mono);color:var(--k-000)}
.hp-v-5 .t5-board{position:relative}
.hp-v-5 .t5-card{background:var(--k-000);color:var(--k-fff);border:1.5px solid var(--k-000);padding:0 0 6px;box-shadow:8px 8px 0 0 color-mix(in srgb,var(--k-000) 14%,transparent)}
.hp-v-5 .t5-hd{display:flex;justify-content:space-between;gap:12px;margin:0;padding:11px 16px;border-bottom:1px dashed var(--k-444);font:600 12px/1.2 var(--mono);color:var(--k-fff)}
.hp-v-5 .t5-hd span+span{color:var(--k-8a8a8a);font-weight:400}
.hp-v-5 .t5-list{list-style:none;margin:0;padding:0}
.hp-v-5 .t5-row{position:relative;display:grid;grid-template-columns:2.6ch 38px minmax(0,1fr) auto;align-items:center;gap:0 12px;height:66px;padding:0 16px;border-bottom:1px dashed var(--k-333)}
.hp-v-5 .t5-row:last-child{border-bottom:0}
.hp-v-5 .t5-no{font:700 12px/1 var(--mono);color:var(--k-8a8a8a)}   /* every row is the #1 of its own job, not a cross-job ranking */
.hp-v-5 .t5-logo{display:grid;place-items:center;width:38px;height:38px;background:var(--k-fff)}
.hp-v-5 .t5-logo img{width:26px;height:26px;object-fit:contain;display:block}
.hp-v-5 .t5-nm{display:flex;flex-direction:column;min-width:0;gap:2px}
.hp-v-5 .t5-nm small{font:400 11px/1.2 var(--mono);color:var(--k-8a8a8a)}
.hp-v-5 .t5-nm a{font:700 16px/1.15 var(--sans);color:var(--k-fff);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-v-5 .t5-nm a::after{content:"";position:absolute;inset:0}   /* the whole row is the link */
.hp-v-5 .t5-row:hover{background:var(--k-111)}
.hp-v-5 .t5-pz{font:400 11.5px/1.2 var(--mono);color:var(--k-bbb);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-v-5 .t5-sc{font:900 34px/1 var(--dot);color:var(--k-fff);font-variant-numeric:tabular-nums;min-width:2.6ch;text-align:right}
.hp-v-5 .t5-mat{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:150px;height:150px;margin:-34px 0 0 auto;
  border-radius:50%;background:var(--k-fff);border:2px solid var(--k-000);box-shadow:inset 0 0 0 6px var(--k-fff),inset 0 0 0 7.5px var(--k-000);padding:20px;box-sizing:border-box;text-align:center;transform:rotate(-9deg);
  font:600 11px/1.35 var(--mono);color:var(--k-000);z-index:2}
.hp-v-5 .t5-mat a{font:700 11px/1 var(--mono);color:var(--k-000)}
@media(min-width:900px){
 .hp-hero.hp-v-5{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);column-gap:64px;align-items:center;max-width:1200px;margin:0 auto}
 .hp-v-5 .t5-copy{grid-column:1;grid-row:1}
 .hp-v-5 .t5-board{grid-column:2;grid-row:1}
 .hp-v-5 .t5-blob{width:86px;margin-bottom:14px}
 .hp-v-5 .t5-h{font-size:clamp(60px,6.6vw,92px);margin-bottom:22px}
 .hp-v-5 .t5-sub{font-size:17px}
 .hp-v-5 .t5-mat{position:absolute;left:-62px;top:-84px;margin:0}
 .hp-v-5 .t5-hd{padding-left:104px}   /* clear of the beer mat on the card's top-left corner */
 .hp-v-5 .t5-row{height:70px}
}
@media(max-width:640px){.hp-v-5 .t5-row{grid-template-columns:2.2ch 34px minmax(0,1fr) auto;gap:0 10px;padding:0 12px;height:62px}.hp-v-5 .t5-logo{width:34px;height:34px}.hp-v-5 .t5-sc{font-size:30px}
 .hp-v-5 .t5-hd{padding:10px 12px}.hp-v-5 .t5-ck{display:none}.hp-v-5 .t5-mat{width:132px;height:132px;padding:16px;font-size:10.5px;margin-top:-26px;margin-right:-4px}}
@media (prefers-reduced-motion:no-preference){
 .hp-v-5 .t5-row{animation:t5-in .5s cubic-bezier(.2,1.25,.4,1) var(--d) both}
 .hp-v-5 .t5-logo img{animation:t5-col .5s ease calc(1.25s + var(--i)*80ms) both}
 .hp-v-5 .t5-row:first-child{animation:t5-in .5s cubic-bezier(.2,1.25,.4,1) var(--d) both,t5-lead .9s ease 1.9s both}
 .hp-v-5 .t5-mat{animation:t5-thunk .45s cubic-bezier(.3,1.6,.5,1) 2.1s both}
}
@keyframes t5-in{from{opacity:0;transform:translateX(56px)}}
@keyframes t5-col{from{filter:grayscale(1)}}
@keyframes t5-lead{0%,100%{background:var(--k-000)}30%{background:var(--k-fff);color:var(--k-000)}}
@keyframes t5-thunk{from{opacity:0;transform:rotate(-30deg) scale(1.7)}}

/* ===== hero option 6 (LOCAL MOCK-UP, HERO=6): command palette. centred: big "what's your poison?", then a wide Cmd-K style
   palette (Numpty leaning on its right edge) that types a job, shows that job's real top three with the #1 selected, holds,
   backspaces and moves on (app.js). job chips under it (links to each category; hover previews). the palette caret is the
   page's one cursor. panels share one grid cell: fixed height, no layout shift. no JS / reduced motion: coding, static. */
.hp-hero.hp-v-6{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
.hp-v-6 .t6-h{font:900 clamp(44px,12.5vw,60px)/1 var(--dot);margin:0 0 14px;letter-spacing:.01em}
.hp-v-6 .t6-sub{max-width:60ch;margin:0 auto 26px;font-size:16px;line-height:1.5;color:var(--k-333)}
.hp-v-6 .t6-stage{position:relative;width:100%;max-width:760px}
.hp-v-6 .t6-blob{position:absolute;right:10px;top:-52px;width:72px;margin:0;z-index:0;mix-blend-mode:multiply}   /* phones: Numpty peers over the palette */
.hp-v-6 .t6-stage{margin-top:40px}
.hp-v-6 .t6-pal{position:relative;z-index:1;background:var(--k-fff);border:2px solid var(--k-000);box-shadow:10px 10px 0 0 var(--k-000);text-align:left}
.hp-v-6 .t6-in{display:flex;align-items:center;margin:0;height:62px;padding:0 16px;border-bottom:2px solid var(--k-000);font:500 19px/1 var(--mono);white-space:nowrap;overflow:hidden}
.hp-v-6 .t6-ic{font-size:22px;margin-right:12px}
.hp-v-6 .t6-fix{color:var(--k-888)}
.hp-v-6 .t6-q{color:var(--k-000);font-weight:700;margin-left:.6ch}
.hp-v-6 .t6-in .cc-cur{margin-left:2px;height:1.05em}
.hp-v-6 .t6-typing .cc-cur{animation:none!important}
.hp-v-6 .t6-kbd{margin-left:auto;padding:5px 8px;border:1.5px solid var(--k-000);border-bottom-width:3px;font:700 12px/1 var(--mono);color:var(--k-000);background:var(--k-fff)}
.hp-v-6 .t6-ps{display:grid}
.hp-v-6 .t6-p{grid-area:1/1;visibility:hidden}
.hp-v-6 .t6-p.on{visibility:visible}
.hp-v-6 .t6-list{list-style:none;margin:0;padding:8px}
.hp-v-6 .t6-r{position:relative;display:grid;grid-template-columns:2ch 30px minmax(0,auto) minmax(0,1fr) auto 2ch;align-items:center;gap:0 12px;height:52px;padding:0 12px;font:400 13px/1.2 var(--mono);color:var(--k-000)}
.hp-v-6 .t6-n{color:var(--k-999);font-size:12px}
.hp-v-6 .t6-logo{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--k-ddd);background:var(--k-fff)}
.hp-v-6 .t6-logo img{width:22px;height:22px;object-fit:contain}
.hp-v-6 .t6-nm{font:700 16px/1.1 var(--sans);color:inherit;text-decoration:none;white-space:nowrap}
.hp-v-6 .t6-nm::after{content:"";position:absolute;inset:0}
.hp-v-6 .t6-pz{color:var(--k-555);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-v-6 .t6-sc{font:900 22px/1 var(--dot)}
.hp-v-6 .t6-enter{font-weight:700;text-align:right}
.hp-v-6 .t6-top{background:var(--k-000);color:var(--k-fff)}
.hp-v-6 .t6-top .t6-n,.hp-v-6 .t6-top .t6-pz{color:var(--k-bbb)}
.hp-v-6 .t6-r:not(.t6-top):hover{background:var(--k-f2f2f2)}
.hp-v-6 .t6-ft{display:flex;justify-content:space-between;gap:12px;margin:0;padding:10px 20px;border-top:1px dashed var(--k-000);font:400 11.5px/1.2 var(--mono);color:var(--k-777)}
.hp-v-6 .t6-ft a{color:var(--k-000);font-weight:700}
.hp-v-6 .t6-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:28px 0 0;max-width:none}
.hp-v-6 .t6-chip{padding:7px 11px;border:1.5px solid var(--k-000);font:600 12.5px/1 var(--mono);color:var(--k-000);text-decoration:none;background:var(--k-fff);transition:background-color .15s,color .15s}
.hp-v-6 .t6-chip.on,.hp-v-6 .t6-chip:hover{background:var(--k-000);color:var(--k-fff)}
.hp-v-6 .t6-act{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 22px;margin:22px 0 0}
.hp-v-6 .t6-pint{font:400 13px/1.5 var(--mono);color:var(--k-666)}.hp-v-6 .t6-pint a{color:var(--k-000)}.hp-v-6 .t6-pint .hp-hash{color:var(--k-aaa)}
@media(max-width:640px){
 .hp-v-6 .t6-in{height:54px;font-size:15px;padding:0 12px}.hp-v-6 .t6-ic{font-size:18px;margin-right:8px}.hp-v-6 .t6-kbd{display:none}
 .hp-v-6 .t6-list{padding:6px}
 .hp-v-6 .t6-r{grid-template-columns:28px minmax(0,1fr) auto;grid-template-rows:auto auto;align-content:center;height:56px;padding:0 10px;gap:3px 10px}
 .hp-v-6 .t6-n,.hp-v-6 .t6-enter,.hp-v-6 .t6-ck{display:none}
 .hp-v-6 .t6-logo{grid-row:1/3;width:28px;height:28px}
 .hp-v-6 .t6-nm{grid-column:2;grid-row:1;font-size:15px;overflow:hidden;text-overflow:ellipsis}
 .hp-v-6 .t6-pz{grid-column:2;grid-row:2;font-size:11.5px}
 .hp-v-6 .t6-sc{grid-column:3;grid-row:1/3}
 .hp-v-6 .t6-ft span{display:none}.hp-v-6 .t6-ft{justify-content:flex-end;padding:9px 14px}
 .hp-v-6 .t6-pal{box-shadow:6px 6px 0 0 var(--k-000)}
 .hp-v-6 .t6-chips{margin-top:22px;gap:6px}.hp-v-6 .t6-chip{font-size:11.5px;padding:6px 9px}
}
@media(min-width:900px){
 .hp-v-6 .t6-h{font-size:clamp(72px,8vw,112px);margin-bottom:18px}
 .hp-v-6 .t6-sub{font-size:17px;margin-bottom:34px}
 .hp-v-6 .t6-stage{margin-top:0}
 .hp-v-6 .t6-blob{top:auto;right:-128px;bottom:-30px;width:150px;z-index:2}   /* desktop: leaning on the palette's right edge */
}
@media (prefers-reduced-motion:no-preference){
 .hp-v-6 .t6-p.on .t6-r{animation:t6-row .28s cubic-bezier(.2,1.2,.4,1) calc(var(--i)*60ms) both}
 .hp-v-6 .t6-p.on .t6-top{animation:t6-row .28s cubic-bezier(.2,1.2,.4,1) both,t6-sel .3s steps(2,end) .25s both}
}
@keyframes t6-row{from{opacity:0;transform:translateY(-8px)}}
@keyframes t6-sel{from{background:var(--k-fff);color:var(--k-000)}}

/* ===== hero option 7 (LOCAL MOCK-UP, HERO=7): Numpty is the star. a big Numpty (left on desktop, top on phones) bobs, flaps his
   mouth while he "talks" (the excited face toggles on and off) and blinks a few times (the sleepy face for a frame); a square
   speech bubble pops out of him and fills with `>` lines one by one, ending on `> ▌` (the page's one cursor). pure CSS, every
   line's space reserved, final state without JS, nothing moves for reduced motion. */
.hp-hero.hp-v-7{display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:0}
.hp-v-7 .t7-char{position:relative;width:150px;margin:0 auto 6px}
.hp-v-7 .t7-blob{width:100%;margin:0;mix-blend-mode:multiply}
.hp-v-7 .t7-blob :is(.t7-talk,.t7-blink){position:absolute;inset:0;width:100%;height:100%;opacity:0}
.hp-v-7 .t7-shadow{display:block;width:62%;height:10px;margin:2px auto 0;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--k-000) 18%,transparent),transparent)}
.hp-v-7 .t7-h{font:900 clamp(38px,10.5vw,50px)/1 var(--dot);margin:0 0 18px;letter-spacing:.01em;text-align:center}
.hp-v-7 .t7-bub{position:relative;background:var(--k-fff);border:3px solid var(--k-000);padding:14px 16px 12px;transform-origin:50% -10px}
.hp-v-7 .t7-bub::before{content:"";position:absolute;left:50%;top:-14px;width:22px;height:22px;margin-left:-11px;background:var(--k-fff);border-left:3px solid var(--k-000);border-top:3px solid var(--k-000);transform:rotate(45deg)}
.hp-v-7 .t7-l{margin:0 0 7px;padding-left:2ch;text-indent:-2ch;font:400 14px/1.5 var(--mono);color:var(--k-000)}   /* wrapped lines hang under the text, not the > */
.hp-v-7 .t7-l:last-child{margin:0}
.hp-v-7 .t7-gt{font-weight:700;margin-right:.2ch}
.hp-v-7 .t7-l b{font-weight:700}
.hp-v-7 .t7-l a{color:var(--k-000)}
.hp-v-7 .t7-pick{text-indent:0;display:inline-flex;align-items:center;gap:5px;padding:1px 6px 1px 3px;border:1.5px solid var(--k-000);font-weight:700;text-decoration:none;vertical-align:baseline}
.hp-v-7 .t7-pick img{width:16px;height:16px;object-fit:contain}
.hp-v-7 .t7-pick:hover{background:var(--k-000);color:var(--k-fff)}
.hp-v-7 .t7-end .cc-cur{margin-left:.5ch}
.hp-v-7 .t7-act{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 20px;margin:22px 0 0}
.hp-v-7 .t7-more{font:600 13.5px/1 var(--mono);color:var(--k-000)}
@media(max-width:899px){.hp-v-7 .t7-copy{display:contents}.hp-v-7 .t7-h{order:-1}.hp-v-7 .t7-char{margin-top:2px}}   /* phones: headline, then Numpty, then his bubble right under him */
@media(min-width:900px){
 .hp-hero.hp-v-7{display:grid;grid-template-columns:380px minmax(0,640px);justify-content:center;align-items:center;column-gap:44px}
 .hp-v-7 .t7-char{width:380px;margin:0;align-self:end}
 .hp-v-7 .t7-h{font-size:clamp(56px,5.6vw,80px);text-align:left;margin-bottom:24px}
 .hp-v-7 .t7-bub{padding:20px 24px 16px;transform-origin:-20px 62%}
 .hp-v-7 .t7-bub::before{left:-14px;top:58%;margin:0;border-top:0;border-bottom:3px solid var(--k-000)}
 .hp-v-7 .t7-l{font-size:15px}
 .hp-v-7 .t7-act{justify-content:flex-start}
}
@media (prefers-reduced-motion:no-preference){
 .hp-v-7 .t7-char{animation:t7-bob 2.6s ease-in-out .3s 2}
 .hp-v-7 .t7-blob .t7-talk{animation:t7-flap .3s steps(1,end) .95s 11}
 .hp-v-7 .t7-blob .t7-blink{animation:t7-blink 3.4s linear 4.6s 3}
 .hp-v-7 .t7-bub{animation:t7-pop .45s cubic-bezier(.2,1.6,.4,1) .5s both}
 .hp-v-7 .t7-l{animation:t7-line .3s ease var(--d) both}
}
@keyframes t7-bob{50%{transform:translateY(-12px)}}
@keyframes t7-flap{0%{opacity:1}50%{opacity:0}}
@keyframes t7-blink{0%,3.5%{opacity:1}3.6%,100%{opacity:0}}
@keyframes t7-pop{from{opacity:0;transform:scale(.3)}}
@keyframes t7-line{from{opacity:0;transform:translateY(6px)}}

/* ===== hero option 8 (LOCAL MOCK-UP, HERO=8): pub board + price ticker. "what's on tap today?" left; a black "today's specials"
   board right with the #1 pick per job, menu-style dot leaders to the price, each line chalked on with a stepped wipe; a
   full-bleed black ticker along the bottom scrolls the latest price check (data/price_check) plan by plan, with Numpty sat on
   it. the ticker is the only loop: it pauses on hover and stands still (scrollable) for reduced motion. no cursor in this hero.
   pure CSS, no JS needed; space reserved, no layout shift. */
.hp-hero.hp-v-8{display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:26px;padding-bottom:0}
.hp-v-8 .hp-cue{display:none}   /* the ticker is the bottom edge of this hero */
.hp-v-8 .t8-h{font:900 clamp(42px,12vw,56px)/1 var(--dot);margin:0 0 14px;letter-spacing:.01em}
.hp-v-8 .t8-sub{margin:0;max-width:50ch;font-size:16px;line-height:1.5;color:var(--k-333)}
.hp-v-8 .t8-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:20px 0 0}
.hp-v-8 .t8-more{font:600 13.5px/1 var(--mono);color:var(--k-000)}
.hp-v-8 .t8-board{position:relative;background:var(--k-000);color:var(--k-f2f2f2);border:8px solid var(--k-000);outline:1.5px dashed color-mix(in srgb,var(--k-fff) 45%,transparent);outline-offset:-14px;padding:22px 24px 18px;box-shadow:0 0 0 1.5px var(--k-000),10px 10px 0 0 color-mix(in srgb,var(--k-000) 15%,transparent)}
.hp-v-8 .t8-bh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 12px;padding-bottom:10px;border-bottom:2px solid var(--k-f2f2f2)}
.hp-v-8 .t8-bt{font:900 30px/1 var(--dot);letter-spacing:.02em}
.hp-v-8 .t8-bd{font:400 12px/1 var(--mono);color:var(--k-9a9a9a)}
.hp-v-8 .t8-list{list-style:none;margin:0;padding:0}
.hp-v-8 .t8-it{position:relative;padding:9px 0;border-bottom:1px dashed var(--k-3a3a3a)}
.hp-v-8 .t8-it:last-child{border-bottom:0}
.hp-v-8 .t8-row,.hp-v-8 .t8-row2{display:flex;align-items:baseline;gap:8px;white-space:nowrap;overflow:hidden}
.hp-v-8 .t8-row{height:24px}.hp-v-8 .t8-row2{height:19px}.hp-v-8 .t8-bh{height:42px;box-sizing:border-box}   /* fixed line boxes: the web fonts swapping in can't reflow the board */
.hp-v-8 .t8-job{font:600 13px/1.2 var(--mono);color:var(--k-f2f2f2)}
.hp-v-8 .t8-dots{flex:1;min-width:16px;border-bottom:2px dotted var(--k-8a8a8a);transform:translateY(-3px)}
.hp-v-8 .t8-pz{font:900 22px/1 var(--dot);white-space:nowrap}
.hp-v-8 .t8-row2{justify-content:space-between;margin-top:4px}
.hp-v-8 .t8-row2 a{font:700 15px/1.2 var(--sans);color:var(--k-fff);text-decoration:none}
.hp-v-8 .t8-row2 a::after{content:"";position:absolute;inset:0}
.hp-v-8 .t8-it:hover .t8-row2 a{text-decoration:underline}
.hp-v-8 .t8-meta{font:400 11.5px/1.2 var(--mono);color:var(--k-9a9a9a);white-space:nowrap}
.hp-v-8 .t8-bf{margin:12px 0 0;padding-top:10px;border-top:2px solid var(--k-f2f2f2);font:400 12.5px/1.5 var(--mono);color:var(--k-cfcfcf)}
.hp-v-8 .t8-bf a{color:var(--k-fff)}
.hp-v-8 .t8-strip{position:relative;width:100vw;margin:22px 0 0 calc(50% - 50vw);padding-top:0}
.hp-v-8 .t8-tick{background:var(--k-000);color:var(--k-fff);height:44px;overflow:hidden;display:flex;align-items:center;border-top:1.5px solid var(--k-000)}
.hp-v-8 .t8-run{display:flex;width:max-content}
.hp-v-8 .t8-seg{display:flex;flex:none}
.hp-v-8 .t8-tk{flex:none;font:400 13px/44px var(--mono);white-space:nowrap;padding:0 18px}
.hp-v-8 .t8-tk::after{content:"■";font-size:8px;vertical-align:2px;margin-left:36px;color:var(--k-777)}
.hp-v-8 .t8-tk b{font-weight:700}
.hp-v-8 .t8-tk-hd{font-weight:700;background:var(--k-fff);color:var(--k-000);padding:0 18px;margin-right:18px}
.hp-v-8 .t8-tk-hd::after{content:none}
.hp-v-8 .t8-ok{color:var(--k-9a9a9a)}
.hp-v-8 .t8-blob{position:absolute;left:max(16px,calc(50vw - 590px));bottom:26px;width:84px;margin:0;z-index:2;mix-blend-mode:multiply}
@media(max-width:899px){.hp-v-8 .t8-strip{order:-1;margin:-20px 0 0 calc(50% - 50vw)}.hp-v-8 .t8-tick{height:38px}.hp-v-8 .t8-tk{line-height:38px;font-size:12px}}   /* phones: the ticker runs along the top, so it's on screen */
@media(max-width:640px){.hp-v-8 .t8-board{padding:18px 16px 14px;border-width:6px;outline-offset:-11px}.hp-v-8 .t8-bt{font-size:24px}.hp-v-8 .t8-pz{font-size:19px}.hp-v-8 .t8-meta{font-size:10.5px}.hp-v-8 .t8-blob{width:60px;left:auto;right:14px;bottom:auto;top:calc(100% + 18px)}}
@media(min-width:900px){
 .hp-hero.hp-v-8{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);column-gap:64px;row-gap:0;align-items:center;align-content:center;max-width:1200px;margin:0 auto}
 .hp-v-8 .t8-copy{grid-column:1;grid-row:1}
 .hp-v-8 .t8-board{grid-column:2;grid-row:1}
 .hp-v-8 .t8-strip{grid-column:1/-1;grid-row:2;margin-top:64px}
 .hp-v-8 .t8-h{font-size:clamp(64px,7vw,100px);margin-bottom:20px}
 .hp-v-8 .t8-sub{font-size:17px}
 .hp-v-8 .t8-blob{width:110px;bottom:26px}
}
@media (prefers-reduced-motion:no-preference){
 .hp-v-8 .t8-bt{animation:t8-chalk .6s steps(10,end) .3s both}
 .hp-v-8 .t8-it{animation:t8-chalk .55s steps(12,end) calc(.75s + var(--i)*.22s) both}
 .hp-v-8 .t8-bf{animation:t8-chalk .5s steps(10,end) 2.2s both}
 .hp-v-8 .t8-run{animation:t8-tick 75s linear .6s infinite}
 .hp-v-8 .t8-tick:hover .t8-run{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){.hp-v-8 .t8-tick{overflow-x:auto}.hp-v-8 .t8-seg[aria-hidden]{display:none}}
@keyframes t8-chalk{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes t8-tick{to{transform:translateX(-50%)}}

/* ===== hero options 7a/7b/7c (LOCAL MOCK-UP, HERO=7a|7b|7c): option 7 with "asking Numpty" made real. the section also carries
   .hp-v-7, so Numpty, the bubble and the intro come from option 7's block above. answers are pre-rendered from data/tools.json and
   stacked in one grid cell (hidden ones keep their size), so switching answers never moves the page; 7c's thread has a fixed
   height and scrolls inside itself. app.js types the answers and changes Numpty's face; without JS the default answer shows and
   every chip is a plain link. reduced motion: no typing, no face changes, no hops. */
.hp-v-7x .t7-h{font-size:clamp(34px,9.4vw,46px)}
.hp-v-7x .t7-bub{padding:12px 14px 14px}
.hp-v-7x .np-ans{display:grid;margin-top:8px}
.hp-v-7x .np-a{grid-area:1/1;min-width:0}
.hp-v-7x .np-a.np-off{visibility:hidden}   /* not [hidden]: the site's [hidden] rule is display:none, and these must keep their size */
.hp-v-7x .np-l{margin:0 0 5px}
.hp-v-7x .np-a .np-l:last-child{margin:0}
.hp-v-7x .np-cat{font-weight:700;white-space:nowrap}
.hp-v-7x .np-chips{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:14px 0 0;padding-top:12px;border-top:1.5px dashed var(--k-000)}
.hp-v-7x .np-lab{font:400 12.5px/1 var(--mono);color:var(--k-555);margin-right:2px}
.hp-v-7x .np-chip{font:600 12.5px/1 var(--mono);color:var(--k-000);background:var(--k-fff);border:1.5px solid var(--k-000);padding:7px 9px;text-decoration:none;cursor:pointer;transition:background .12s,color .12s}
.hp-v-7x .np-chip:focus-visible,.hp-v-7x .np-chip[aria-pressed=true]{background:var(--k-000);color:var(--k-fff)}
@media(hover:hover){.hp-v-7x .np-chip:hover{background:var(--k-000);color:var(--k-fff)}}   /* no sticky hover after a tap on phones */
.hp-v-7x .np-chips.np-nudge .np-chip{animation:np-nudge .5s ease 2}
.hp-v-7x .np-fine{font:400 12.5px/1.55 var(--mono);color:var(--k-000);margin:14px 0 0;max-width:62ch}
.hp-v-7x .np-fine.np-pint{margin-top:4px}
.hp-v-7x .np-fine a{color:var(--k-000)}
.hp-v-7x .t7-act{margin-top:16px}
.hp-v-7x .np-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp-v-7x .np-form{display:flex;align-items:stretch;border:2px solid var(--k-000);margin:12px 0 2px;background:var(--k-fff)}
.hp-v-7x .np-pr{font:700 15px/1 var(--mono);padding:0 0 0 10px;align-self:center}
.hp-v-7x .np-form input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:400 16px/1 var(--mono);color:var(--k-000);padding:10px 8px;border-radius:0}
.hp-v-7x .np-form input::placeholder{color:var(--k-777)}
.hp-v-7x .np-form:focus-within{box-shadow:3px 3px 0 var(--k-000)}
.hp-v-7x .np-form button{font:700 13px/1 var(--mono);background:var(--k-000);color:var(--k-fff);border:0;padding:0 16px;cursor:pointer;border-radius:0}
.hp-v-7x .np-form button:hover{background:var(--k-333)}
/* 7c chat: fixed-height thread, newest at the bottom, fades out at the top edge */
.hp-v-7x .np-thread{height:310px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:4px 2px 2px 0;scrollbar-width:thin;overscroll-behavior:contain;
 -webkit-mask-image:linear-gradient(transparent,var(--k-000) 22px);mask-image:linear-gradient(transparent,var(--k-000) 22px)}
.hp-v-7x .np-m{margin:0;flex:none}
.hp-v-7x .np-m:first-child{margin-top:auto}
.hp-v-7x .np-v{align-self:flex-end;max-width:82%;text-align:right}
.hp-v-7x .np-v span{display:inline-block;background:var(--k-000);color:var(--k-fff);font:600 13.5px/1.4 var(--mono);padding:6px 10px;text-align:left}
.hp-v-7x .np-chat .np-chips{margin-top:10px}
/* faces: every expression is a stacked copy of Numpty; data-face picks the one on show */
.np-blob .np-f{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .18s ease}
.np-blob[data-face=wink] .np-f-wink,.np-blob[data-face=smug] .np-f-smug,.np-blob[data-face=excited] .np-f-excited,
.np-blob[data-face=worried] .np-f-worried,.np-blob[data-face=unimpressed] .np-f-unimpressed,.np-blob[data-face=sleepy] .np-f-sleepy{opacity:1}
.np-blob.np-snap .np-f{transition:none}
.np-blob.np-blink .t7-blink{opacity:1!important;animation:none!important}
.np-live .t7-blob .t7-talk{animation:none!important;opacity:0!important}
.np-live .np-a .t7-l{animation:none!important}
.hp-v-7x :is(.np-a,.np-thread) .cc-cur{position:absolute;margin-top:.2em}   /* out of flow: it takes no room and adds no line-break point, so moving it never re-wraps a line */
.np-typing .cc-cur{animation:none!important}
.np-ghost{visibility:hidden}   /* the untyped rest of a reply holds its space while he types */
@media(max-width:899px){   /* phones: headline and Numpty side by side, so the answer and the chips sit higher up the screen */
 .hp-hero.hp-v-7x{display:grid;grid-template-columns:minmax(0,1fr) 124px;column-gap:8px;align-items:center}
 .hp-v-7x>*,.hp-v-7x .t7-copy>*{grid-column:1/-1}
 .hp-v-7x .t7-copy>.t7-h{grid-column:1;grid-row:1;text-align:left;margin:0;font-size:clamp(28px,7.9vw,40px);line-height:1.04}
 .hp-v-7x>.t7-char{grid-column:2;grid-row:1;width:124px;margin:0}
 .hp-v-7x .t7-bub{margin-top:16px}
 .hp-v-7x .t7-bub::before{left:auto;right:50px;margin:0}
 .hp-v-7x .t7-act{justify-content:flex-start}
}
@media(min-width:900px){
 .hp-v-7x .t7-h{font-size:clamp(46px,4.3vw,60px);margin-bottom:20px}
 .hp-v-7x .t7-bub{padding:16px 22px 16px}
 .hp-v-7x .np-thread{height:290px}
}
@media (prefers-reduced-motion:no-preference){
 .hp-v-7x .np-thread>:nth-child(1){--d:.6s}.hp-v-7x .np-thread>:nth-child(2){--d:1.3s}.hp-v-7x .np-thread>:nth-child(3){--d:1.9s}
 .hp-v-7x .np-thread .np-v{animation:t7-line .3s ease var(--d,0s) both}
 .hp-v-7x .np-thread .np-n .t7-l{animation:t7-line .3s ease var(--d,0s) both}
 .np-live .np-thread .np-v,.np-live .np-thread .np-n .t7-l{animation-delay:0s}
 .hp-v-7x .t7-char.np-hop{animation:np-hop .45s cubic-bezier(.3,1.6,.5,1)}
}
@media (prefers-reduced-motion:reduce){.np-blob .np-f{transition:none}.hp-v-7x .np-thread{-webkit-mask-image:none;mask-image:none}}
@keyframes np-hop{40%{transform:translateY(-10px) scale(1.02,.98)}}
@keyframes np-nudge{50%{transform:translateY(-3px)}}
.hp-v-7b .np-ans{margin-top:0;align-items:end}   /* 7b: his lines sit right on top of the input; the space for the longest answer opens above them */
/* ASCII arrows (arrows.py): link and button arrows are a literal "->" in an aria-hidden span. JetBrains Mono would join it into
   a ligature arrow, so ligatures are off there */
.crumbs .cr-sep{margin:0 .35em}
:is(a,button,summary) [aria-hidden="true"],.crumbs .cr-sep,.lt-mv,#ps th button{font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0}

/* ===== live hero (7b): one-piece search box + fit the hero to the viewport =====
   the box: one 2px frame; "$", the text and "ask" share its full height and centre line; the site-wide input border (whose :is() list carries an id, hence #np-q here),
   background and focus outline are switched off inside it, and the whole box takes the focus style instead.
   the fit: the hero already fills 100svh under the nav; on desktop the type, Numpty, bubble padding and line spacing scale
   with the viewport height (clamp + svh) so headline -> buttons (and the scroll cue) sit above the fold from 1280x720 up.
   the answer area still reserves the longest answer's height, so nothing moves when he answers. */
.hp-v-7x .np-form{--np-h:44px;height:var(--np-h);box-sizing:border-box;display:flex;align-items:stretch;border:2px solid var(--k-000);background:var(--k-fff);margin:12px 0 0;padding:0;box-shadow:none;transition:box-shadow .12s ease}
.hp-v-7x .np-pr{display:flex;align-items:center;align-self:stretch;padding:0 2px 0 12px;font:700 15px/1 var(--mono);color:var(--k-000)}
:root .hp-v-7x .np-form #np-q{flex:1;min-width:0;height:100%;box-sizing:border-box;margin:0;padding:0 10px 0 8px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:none!important;
 font:400 16px/normal var(--mono)!important;color:var(--k-000)!important;-webkit-appearance:none;appearance:none}
.hp-v-7x .np-form button{align-self:stretch;height:auto;margin:0;border:0;border-radius:0;padding:0 18px;background:var(--k-000);color:var(--k-fff);font:700 13px/1 var(--mono);letter-spacing:.02em;cursor:pointer}
.hp-v-7x .np-form button:hover{background:var(--k-2b2b2b)}
.hp-v-7x .np-form:focus-within{box-shadow:4px 4px 0 var(--k-000)}
.hp-v-7x .np-form button:focus-visible{outline:2px solid var(--k-fff);outline-offset:-6px}
@media(prefers-reduced-motion:reduce){.hp-v-7x .np-form{transition:none}}
.hp-v-7x .np-l{line-height:1.42}
.hp-v-7x .np-fine{max-width:none}
@media(min-width:900px){
 .hp-v-7x .np-form{--np-h:clamp(38px,5.4svh,44px)}
 :root .hp-v-7x .np-form #np-q{font-size:15px!important}
 .hp-hero.hp-v-7x{--np-char:clamp(250px,min(27vw,44svh),380px);grid-template-columns:var(--np-char) minmax(0,640px);column-gap:clamp(28px,3vw,44px);
  padding-top:clamp(12px,3svh,40px);padding-bottom:clamp(54px,8.5svh,72px)}
 .hp-v-7x>.t7-char{width:var(--np-char)}
 .hp-v-7x .t7-h{font-size:clamp(38px,min(4.3vw,6.5svh),60px);margin-bottom:clamp(10px,1.8svh,20px)}
 .hp-v-7x .t7-bub{padding:clamp(10px,1.8svh,16px) 22px clamp(10px,1.8svh,16px)}
 .hp-v-7x .t7-l{font-size:clamp(13.5px,1.9svh,15px)}
 .hp-v-7x .np-l{margin-bottom:clamp(2px,.5svh,5px)}
 .hp-v-7x .np-chips{gap:6px;margin-top:clamp(8px,1.4svh,14px);padding-top:clamp(8px,1.3svh,12px)}
 .hp-v-7x .np-chip{font-size:12px;padding:6px 8px}
 .hp-v-7x .np-fine{font-size:12.5px;line-height:1.45;margin-top:clamp(8px,1.4svh,14px)}
 .hp-v-7x .t7-act{margin-top:clamp(10px,1.6svh,16px)}
 .hp-v-7x .t7-act .btn{padding-top:9px;padding-bottom:9px}
}
/* phones: a touch smaller on short screens so the headline, Numpty, bubble and input are on screen */
@media(max-width:899px) and (max-height:900px){
 .hp-hero.hp-v-7x{grid-template-columns:minmax(0,1fr) 104px;padding-top:12px}
 .hp-v-7x>.t7-char{width:104px}
 .hp-v-7x .t7-copy>.t7-h{font-size:clamp(26px,7.4vw,34px)}
 .hp-v-7x .t7-bub{margin-top:12px;padding:10px 12px 12px}
 .hp-v-7x .t7-l{font-size:13.5px}
 .hp-v-7x .np-l{margin-bottom:3px}
 .hp-v-7x .np-form{--np-h:42px;margin-top:10px}
 .hp-v-7x .np-chips{margin-top:10px;padding-top:10px;gap:6px}
 .hp-v-7x .np-chip{padding:6px 8px}
}
@media(max-width:899px) and (max-height:900px){
 .hp-v-7x .np-fine{font-size:12px;line-height:1.45;margin-top:10px}
 .hp-v-7x .np-fine.np-pint{margin-top:2px}
 .hp-v-7x .t7-act{margin-top:12px}
 .hp-hero.hp-v-7x{padding-bottom:56px}
}

/* ===== hero round 9 (LOCAL MOCK-UP, HERO=9a|9b|9c|9d, branch hero-minimal): 7b with less around it. Numpty and the whole bubble
   (his lines, the one-piece $ box, the answers, the chips) are 7b's, untouched; this block only trims and lays out what's around them.
   9a/9b/9c drop the scroll cue (the small rankings link does its job), so the hero needs less padding at the bottom. */
.hp-v-9 .n9-more{margin:clamp(10px,1.8svh,16px) 0 0;font:400 12.5px/1.6 var(--mono);color:var(--k-777)}
.hp-v-9 .n9-rank{font:600 13px/1 var(--mono);color:var(--k-000);text-decoration:none;border-bottom:1.5px solid var(--k-000);padding-bottom:2px;white-space:nowrap}
@media(hover:hover){.hp-v-9 .n9-rank:hover{background:var(--k-000);color:var(--k-fff)}}
.hp-v-9 .n9-quiet a:not(.n9-rank){color:var(--k-777)}
.hp-v-9 .n9-dot{margin:0 1ch;color:var(--k-bbb)}
.hp-v-9 .n9-row{display:flex;flex-wrap:wrap;gap:10px 24px}
.hp-hero:is(.hp-v-9a,.hp-v-9b,.hp-v-9c){padding-bottom:clamp(20px,4svh,40px)}   /* only 9a/9b/9c drop the scroll cue; the rest keep its room */
@media(max-width:899px){   /* phones (9a/9b/9c): Numpty centred on top, his bubble pointing up at him, the link centred under it */
 .hp-hero.hp-v-9:not(.hp-v-9d){display:flex;flex-direction:column;align-items:stretch;justify-content:center;padding-top:8px}
 .hp-v-9:not(.hp-v-9d)>.t7-char{width:132px;margin:0 auto 2px}
 .hp-v-9:not(.hp-v-9d) .t7-bub::before{left:50%;right:auto;margin-left:-11px}
 .hp-v-9:not(.hp-v-9d) .n9-more{text-align:center}
 .hp-v-9c .t7-copy>.n9-h{order:-1;text-align:center;margin:0 0 10px;font-size:clamp(28px,8.2vw,36px)}
 .hp-v-9d .t7-copy>.n9-h{font-size:clamp(22px,6.6vw,28px)}
}
@media(min-width:900px){
 .hp-v-9a .n9-more,.hp-v-9b .n9-more{margin-top:clamp(12px,2svh,18px)}
 /* 9c: one centred column. headline, Numpty, then the bubble pointing up at him */
 .hp-hero.hp-v-9c{display:flex;flex-direction:column;align-items:center;justify-content:center}
 .hp-v-9c .t7-copy{display:contents}
 .hp-v-9c .n9-h{order:-1;text-align:center;font-size:clamp(34px,5.6svh,48px);margin:0 0 clamp(4px,1svh,10px)}
 .hp-v-9c>.t7-char{width:clamp(120px,22svh,190px);align-self:center;margin:0 0 2px}
 .hp-v-9c .t7-bub{width:min(640px,100%);box-sizing:border-box;margin-top:14px;transform-origin:50% -10px}
 .hp-v-9c .t7-bub::before{left:50%;top:-14px;margin-left:-11px;border-top:3px solid var(--k-000);border-bottom:0}
 .hp-v-9c .n9-more{text-align:center}
 /* 9d: today's layout, a smaller headline */
 .hp-v-9d .n9-h{font-size:clamp(32px,min(3.4vw,5.4svh),46px)}
}
@media(max-width:899px){.hp-hero.hp-v-9d{align-content:center}.hp-v-9d .n9-more{margin-top:14px}}   /* 9d phones: the rows hug the content, no gap opens above the links */

/* ===== hero 9f / 9g (LOCAL MOCK-UP, hero-tagline): one small line saying what numptr is ===== */
.hp-v-9 .n9-tag,.hp-hero .n9-h1{font:400 13px/1.45 var(--mono);color:var(--k-666);letter-spacing:0;text-align:center;margin:0 0 clamp(8px,2svh,22px)}
.hp-hero .n9-h1{margin:0 0 clamp(8px,1.6svh,14px)}
@media(max-width:899px){.hp-v-9g .t7-copy>.n9-h1{order:-1;font-size:clamp(11px,3.2vw,12.5px);margin:0 auto 8px;max-width:none;text-wrap:balance}.hp-v-9f .n9-tag{font-size:12.5px;margin:0 auto 6px;max-width:30ch;text-wrap:balance}}
@media(min-width:900px){
 .hp-v-9f .n9-tag{grid-column:1/-1;justify-self:center}
 .hp-v-9g .n9-h1{text-align:left;font-size:12px;text-wrap:balance}   /* one line on desktop (900px up); balanced, never overflows */
}
/* phones: the whole "what do you need ai for?" placeholder shows from 360px up. a touch less padding beside the text and on
   "ask", and the placeholder (only the placeholder) steps down from 16px on the narrowest screens; what you type stays 16px,
   so iOS never zooms in on focus */
@media(max-width:899px){
 :root .hp-v-7x .np-form #np-q{padding:0 6px 0 6px!important}
 .hp-v-7x .np-pr{padding:0 2px 0 9px}
 .hp-v-7x .np-form button{padding:0 12px}
 :root .hp-v-7x .np-form #np-q::placeholder{font-size:min(16px,calc((100vw - 150px)/15))}
}

/* phones: the whole "search tools: postgres, voice, 3d" placeholder on the lot search shows from 360px up (same approach as the
   hero, 0b7e013b): a touch less side padding, and only the placeholder steps down from 14px under ~387px (12.4px at 360, sized so glyph-advance rounding at 2x/3x still fits); the clear-x, invisible while empty, gives its reserved space back until you type. what you type is 16px
   here so iOS doesn't zoom in on focus. left edge still level with the weekly email row above */
@media(max-width:480px){
 :root .hp-lot .search #q{font-size:16px;padding:9.5px 12px}
 :root .hp-lot .search #q::placeholder{font-size:min(14px,calc((100vw - 110px)/19.8))}
 :root .hp-lot .search #q:placeholder-shown::-webkit-search-cancel-button{display:none}
}
@media(max-width:364px){:root .hp-lot .search #q::placeholder{font-size:min(12.4px,calc((100vw - 110px)/19.8))}}/* renderers that round glyph advances to whole px push 12.5-13px up to 14px widths; hold under that here */

/* ===== visual polish (visual-polish batch, polish.py + this block). later rules win; ":root:root" outranks the older layers.
   1 left edges: every page's content starts under the header logo (.wrap: 1160px, 24px gutters -> 1112px of content, x=84 at 1280).
     .lp pages (guides, /stack/, /privacy/, /terms/, how-we-score, sponsor...) were a centred 780px box; now the box is the .wrap and
     reading pages keep their ~732px column, left-aligned in it. the price sheet and /guides/ use the full 1112. */
:root:root main.lp{max-width:1160px!important;margin-left:auto!important;margin-right:auto!important}
:root:root main.lp:not(.ps):not(:has(.glist))>*:not(script){max-width:732px!important;margin-left:0;margin-right:0}
:root:root main.lp:not(.ps):not(:has(.glist))>.cc{width:auto}
:root:root main.page.center{text-align:left}
:root:root main.page.center>*{max-width:732px;margin-left:0;margin-right:0}
/* footer: the "(c) 2026 numptr" item never sits on a line of its own; every link wraps as one unit */
:root:root .fl .nw,:root:root .crumbs a,:root:root .crumbs .cr-cur,:root:root .updated .nw{white-space:nowrap}

/* 2 homepage: (v2) left as live - tool of the week beside the league table, the whole lot as cards with the pick tab      cards after #1 carry their rank as a grey mono line number in the top-right corner (polish.py .rkn) */
:root:root .home .card.mini .rkn{position:absolute;top:6px;right:8px;font:500 11px/1 var(--mono);color:var(--k-777);font-variant-numeric:tabular-nums;letter-spacing:0;pointer-events:none}
:root:root .home .card.mini:has(.rkn) h3{padding-right:18px}

/* 3 tool pages: alternatives = top 3 (polish.py) in one row; guide cards the same height in a row, titles clamp at two lines;
     spec rows run the full width of the sheet */
:root:root main.page>article>ul.alt3{grid-template-columns:repeat(3,minmax(0,1fr))}
:root:root main.page .glinks{align-items:stretch;grid-auto-rows:1fr}
:root:root main.page .glinks li{display:flex}
:root:root main.page .glinks a.card.panel{display:flex!important;align-items:center;min-height:64px;height:auto!important}
:root:root main.page .glinks a.card.panel{overflow:hidden!important}
:root:root main.page .glinks a.card.panel{padding-top:10px!important;padding-bottom:10px!important;line-height:1.3}
:root:root main.page .glinks a .gl-t{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2!important;line-clamp:2;overflow:hidden!important}
:root:root main.page .glinks li{align-items:stretch!important}
:root:root #specs .sheet .srow,:root:root #specs .sheet>p{max-width:none}

/* 4 price sheet on phones: one compact block per plan, grouped under the tool's name (polish.py marks follow-on rows
     .ps-cont): "plan  $20 ($17/mo yearly)", the limits, then "free: no · byo: yes · checked 2026-10-17". empty cells hide.
     one rule between plans, one heavier rule between tools, no boxes. desktop table unchanged. */
@media(max-width:640px){
 :root:root .ps .tw{border:0!important;padding:0!important;background:transparent!important}
 :root:root .ps #ps tbody{border-bottom:1.5px solid var(--k-000)}
 :root:root .ps #ps tbody tr{display:flex!important;flex-wrap:wrap;align-items:baseline;column-gap:8px;border:0!important;border-top:1.5px solid var(--k-000)!important;border-radius:0!important;margin:0!important;padding:10px 0 10px!important;background:transparent!important;box-shadow:none!important}
 :root:root .ps #ps tbody tr.ps-cont{border-top:1px dashed var(--k-c8c8c8)!important}
 :root:root .ps #ps tbody tr[hidden]{display:none!important}
 :root:root .ps #ps td{display:block;padding:0!important;border:0!important;margin:0}
 :root:root .ps #ps td:before{content:none;display:none}
 :root:root .ps #ps td:empty{display:none!important}
 :root:root .ps #ps td[data-l="tool"]{flex:0 0 100%;font:700 15px/1.35 var(--sans);margin:0 0 6px}
 :root:root .ps #ps tr.ps-cont td[data-l="tool"]{display:none}
 :root:root .ps #ps td[data-l="plan"]{flex:1 1 auto;font:600 14px/1.4 var(--mono);color:var(--k-000)}
 :root:root .ps #ps td[data-l="monthly"]{flex:0 0 auto;margin-left:auto;font:700 14px/1.4 var(--mono);color:var(--k-000);white-space:nowrap}
 :root:root .ps #ps td[data-l="annual"]{flex:0 0 auto;font:400 12.5px/1.4 var(--mono);color:var(--k-555);white-space:nowrap}
 :root:root .ps #ps td[data-l="annual"]:before{content:"(";display:inline}
 :root:root .ps #ps td[data-l="annual"]:after{content:" yearly)"}
 :root:root .ps #ps td[data-l="annual"][data-t]:after{content:" " attr(data-t) ")"}
 :root:root .ps #ps td[data-l="limits"]{flex:0 0 100%;font:400 14px/1.45 var(--sans);color:var(--k-333);margin-top:2px}
 :root:root .ps #ps :is(td[data-l="free tier"],td[data-l="BYO key"],td[data-l="checked"]){flex:0 0 auto;font:400 12px/1.5 var(--mono);color:var(--k-555);margin-top:4px}
 :root:root .ps #ps :is(td[data-l="free tier"],td[data-l="BYO key"],td[data-l="checked"]):before{display:inline;margin:0;font:inherit;color:inherit}
 :root:root .ps #ps td[data-l="free tier"]:before{content:"free: "}
 :root:root .ps #ps td[data-l="BYO key"]:before{content:"· byo: "}
 :root:root .ps #ps td[data-l="checked"]:before{content:"· checked "}
 :root:root .ps #ps td[data-l="checked"] a{color:var(--k-555)}
}

/* 5 tap targets on phones (<=600px): everything you'd tap is at least 44px tall */
@media(max-width:600px){
 :root:root .fl{line-height:1.2}
 :root:root .fl a,:root:root .foot-legal a{display:inline-flex;align-items:center;min-height:44px}
 :root:root .crumbs{line-height:1.25;margin-top:-6px}
 :root:root .crumbs a{display:inline-flex;align-items:center;min-height:44px;vertical-align:middle}
 :root:root .crumbs .cr-sep{vertical-align:middle}
 :root:root main .updated{margin-top:16px}
 :root:root main.page>article>ul.alt3{grid-template-columns:minmax(0,1fr)}
 :root:root .np-chips .np-chip{min-height:36px;display:inline-flex;align-items:center;position:relative}
 :root:root .np-chips .np-chip:after{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}
 :root:root .np-chips{row-gap:8px}
 /* inline-flex drops the space before the "->" span, so the gap puts it back (one mono space) */
 :root:root .cat h2 .all,:root:root a.lnk,:root:root .rel-more a,:root:root .src a,:root:root a.src{display:inline-flex;align-items:center;min-height:44px;column-gap:1ch}
 :root:root .cc-toc a,:root:root .cc-toc-c a{display:inline-flex;align-items:center;min-height:44px;column-gap:1ch}
 :root:root .cc-toc-c .cc-l{line-height:1.2}
 :root:root .mm-t{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
 :root:root .digest input[type=email],:root:root .digest-form input,:root:root #digest-form input{font-size:16px!important}
}

/* small: category tables wrap 'best for' / 'from' instead of cutting them off */
:root:root .tr summary>span.bf,:root:root .tr summary>span.pr{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.4}
:root:root .tr summary{height:auto;min-height:60px;padding-top:8px!important;padding-bottom:8px!important;box-sizing:border-box}
/* one H2 style for inner pages: Doto 900 22px (the price sheet / guide / privacy one). filename legends, git-log heads and the
   homepage's big section heads keep their own look */
:root:root body:not(.home) main h2:not(.cc-t):not(.sheet-t):not(.glog-h):not(.hp-h):not(.sr):not(.stk-h):not(#pk){font:900 22px/1.2 var(--dot)!important;letter-spacing:.01em}
/* desktop hero: a little less air above and below (the bubble and Numpty are untouched) */
@media(min-width:900px){:root:root .hp-hero{min-height:calc(100vh - 61px - 9vh);min-height:calc(100svh - 61px - 9svh);padding-bottom:56px}}
/* ===== end visual polish ===== */

/* ===== elite touches (elite.py markup, app.js behaviour) ===== */
/* 1. status line: the last line of every footer, real numbers from the newest price check */
.sl{display:flex;align-items:stretch;margin:22px 0 0;border:1.5px solid var(--k-000);font:500 12.5px/1 var(--mono);color:var(--k-000);background:var(--k-fff);font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0}
.sl>*{padding:7px 1.2ch;white-space:nowrap}
.sl .sl-m{background:var(--k-000);color:var(--k-fff);font-weight:700}
.sl b{font-weight:700;color:inherit}
.sl .sl-b{border-right:1px solid var(--k-000)}
.sl .sl-sp{flex:1 1 auto;padding:0}
.sl .sl-r{border-left:1px solid var(--k-000)}
.sl .sl-k{font:inherit;color:var(--k-000);background:var(--k-fff);border:0;border-left:1px solid var(--k-000);border-radius:0;cursor:pointer}
.sl .sl-k:hover{background:var(--k-000);color:var(--k-fff)}
.sl .sl-k:focus-visible{outline:2px solid var(--k-000);outline-offset:2px}
.sl kbd{font:inherit;font-weight:700}
@media(max-width:700px){
 .sl{display:grid;grid-template-columns:auto 1fr auto;font-size:12px}
 .sl>*{padding:9px 1.2ch}
 .sl .sl-sp,.sl .sl-lg{display:none}
 .sl .sl-m{grid-row:1;grid-column:1}.sl .sl-b{grid-row:1;grid-column:2/4;border-right:0}
 .sl .sl-r{grid-row:2;grid-column:1/3;border-left:0;border-top:1px solid var(--k-000)}
 .sl .sl-k{grid-row:2;grid-column:3;border-top:1px solid var(--k-000);min-height:44px}
 .sl:not(:has(.sl-k:not([hidden]))) .sl-r{grid-column:1/4}}
@media(hover:none) and (pointer:coarse){.sl .sl-k{display:none!important}.sl .sl-r{grid-column:1/4}}
/* 3. tool pages as a man page: header + footer line, 'see also' over the alternatives (all aria-hidden) */
.man{display:flex;justify-content:space-between;gap:2ch;margin:16px 0 18px;padding:0 0 6px;border-bottom:1px dashed var(--k-9a9a9a);font:600 12.5px/1.4 var(--mono);color:var(--k-000);font-variant-ligatures:none;max-width:none}
.man.ft{margin:34px 0 0;padding:6px 0 0;border-bottom:0;border-top:1px dashed var(--k-9a9a9a);font-weight:500;color:var(--k-555)}
.man .mid{color:var(--k-555);font-weight:500}
.man-sa{font:700 13px/1.4 var(--mono);letter-spacing:.04em;margin:44px 0 4px;color:var(--k-000)}
.man-sa+h2{margin-top:0!important}
@media(max-width:560px){.man .r{display:none}.man{font-size:12px}}
/* 4. 404: the typed path and close matches (app.js) */
.cc-404 .nf-path{font-weight:700;word-break:break-all}
.cc-404 .nf-dym,.cc-404 .nf-dym *{font-variant-ligatures:none!important;font-feature-settings:"liga" 0,"calt" 0!important}
.cc-404 .nf-l .x{white-space:pre-wrap}
.cc-404 .nf-l a{color:var(--k-000);font-weight:700;word-break:break-all}
@media(max-width:600px){.cc-404 .nf-l a{display:inline-flex;align-items:center;min-height:44px}}
/* 2. keyboard: j/k row highlight + the numptr --help sheet (a native <dialog>) */
.kf-row{background:var(--k-f2f2f2)!important}
.kf-row a:focus-visible{outline:2px solid var(--k-000);outline-offset:3px}
dialog.kh{border:0;padding:0;background:transparent;color:var(--k-000);width:min(560px,calc(100vw - 32px));max-width:none;overflow:visible}
dialog.kh::backdrop{background:color-mix(in srgb,var(--k-fff) 82%,transparent)}
dialog.kh .cc{position:relative;margin:14px 0 0;background:var(--k-fff);box-shadow:6px 6px 0 var(--k-000);font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0}
.kh .k{font:inherit;font-weight:700}
.kh .kr>.x{display:grid!important;grid-template-columns:8ch 1fr;column-gap:1ch}
.kh .cc-l>.x{white-space:pre-wrap}
.kh .kh-x{position:absolute;top:0;right:14px;transform:translateY(-50%);background:var(--k-fff);border:0;border-radius:0;padding:0 8px;font:600 13px/1.2 var(--mono);color:var(--k-000);cursor:pointer}
.kh .kh-x:hover{text-decoration:underline}.kh .kh-x:focus-visible{outline:2px solid var(--k-000);outline-offset:2px}
/* 5. dark mode follows the system (no toggle). every grey is a --k-* palette var (theme palette block, top of file);
   these are the few things that must not simply swap: */
.np [fill="#000"],.vtick [fill="#000"]{fill:currentColor}   /* inline Numpty + verified tick follow the text colour */
.vtick{color:var(--k-000)}.vtick [stroke="#fff"]{stroke:var(--k-fff)}
/* theme: fixed colours (theme_vars.py leaves this block alone) */
@media all{/*th-a forced dark*/
 /* tool logos keep their own colours on a light tile */
 :root:root .mono.has-logo,:root:root .card.mini:hover .mono.has-logo{background:#fff!important;border-color:var(--k-bbb)}
 /* Numpty (svg files with a white square behind a black blob): flip him white and let the square drop out */
 :root:root img[src^="/assets/brand/blob-"]{filter:invert(1)!important;mix-blend-mode:screen!important}
 /* the black Numpty on the 'pick' tab (logo.svg, transparent) flips white with the tab text */
 :root:root .badge.tp img[src^="/assets/brand/logo.svg"]{filter:invert(1)}
 /* the hero stacks several faces in one box: the box does the screen blend, the faces inside just flip */
 :root:root [class*="blob"]:has(>img[src^="/assets/brand/blob-"]){mix-blend-mode:screen!important}
 :root:root [class*="blob"]:has(>img[src^="/assets/brand/blob-"])>img{mix-blend-mode:normal!important}
 /* badge previews are the real embeddable badges (light); give them a light mat so they read as images */
 :root:root img[src^="/badges/"],:root:root img[src^="/badge/"]{background:#fff;outline:4px solid #fff}
 /* /badge/ shows each badge on a light and a dark backdrop on purpose: those two stay put */
 :root:root .bdg-prev figure{background:#fff;color:#000}:root:root .bdg-prev figure figcaption{color:#000}
 :root:root .bdg-prev figure.dk{background:#000}:root:root .bdg-prev figure.dk figcaption{color:#fff}
 :root:root .bdg-prev figure img{background:none;outline:0}
}
/* theme: end fixed */
/* ===== logo fit (scripts/logo_fit.py, generated: do not hand-edit) ===== */
.mono.has-logo img[src^="/logos/amazon-nova-2-5-sonic.png"]{transform:scale(0.91)}
.mono.has-logo img[src^="/logos/bolt-new.png"]{transform:scale(0.91)}
.mono.has-logo img[src^="/logos/cartesia.png"]{transform:scale(0.91)}
.mono.has-logo img[src^="/logos/claude-agent-sdk.png"]{transform:scale(0.91)}
.mono.has-logo img[src^="/logos/deepgram.png"]{transform:scale(0.91)}
.mono.has-logo img[src^="/logos/devin-desktop.png"]{transform:scale(0.91)}
.mono.has-logo img[src^="/logos/dify.png"]{transform:scale(1.51)}
.mono.has-logo img[src^="/logos/elevenlabs.png"]{transform:scale(2.0)}
.mono.has-logo img[src^="/logos/genkit-dart.png"]{transform:scale(0.91)}
.mono.has-logo img[src^="/logos/heygen-voice.png"]{transform:scale(2.0)}
.mono.has-logo img[src^="/logos/ideogram.png"]{transform:scale(0.91)}
.mono.has-logo img[src^="/logos/kling-4-0.png"]{transform:scale(0.8)}
.mono.has-logo img[src^="/logos/langgraph.png"]{transform:scale(0.91)}
.mono.has-logo img[src^="/logos/meshy.png"]{transform:scale(0.91)}
.mono.has-logo img[src^="/logos/midjourney.png"]{transform:scale(1.25)}
.mono.has-logo img[src^="/logos/n8n.png"]{transform:scale(1.42)}
.mono.has-logo img[src^="/logos/neon.png"]{transform:scale(0.91)}
.mono.has-logo img[src^="/logos/opencode.png"]{transform:scale(0.8)}
.mono.has-logo img[src^="/logos/openrouter.png"]{transform:scale(0.91)}
.mono.has-logo img[src^="/logos/pika.png"]{transform:scale(1.19)}
.mono.has-logo img[src^="/logos/runway.png"]{transform:scale(0.91)}
.mono.has-logo img[src^="/logos/scenario.png"]{transform:scale(0.91)}
.mono.has-logo img[src^="/logos/supabase.png"]{transform:scale(0.91)}
.mono.has-logo img[src^="/logos/tripo.png"]{transform:scale(0.91)}
.mono.has-logo img[src^="/logos/v0-by-vercel.png"]{transform:scale(0.91)}
.mono.has-logo img[src^="/logos/vercel-ai-sdk.png"]{transform:scale(0.91)}
.mono.has-logo img[src^="/logos/vercel.png"]{transform:scale(0.91)}
/* ===== end logo fit ===== */

/* ===== big hero Numpty: one calm motion (hero-numpty-fix, 2026-10-17). before this, four animations from three eras stacked on
   him at once: .blob's hp-in/hp-breathe (squash-scale about 50% 85%), hp-wink on every face <img> (squash + tilt about 50% 40%),
   t7-bob on .t7-char (12px, shadow and all) and np-hop (squash), plus a big-grin talk flap and a sleepy-face "blink". now the
   whole face stack (.t7-blob: body + every face layer) moves as ONE element with a plain vertical translate, so face and body
   can't part or warp; the ground shadow stays put and only tightens a touch as he rises. the answer hop is a plain translate
   too, on `transform`, so it adds to the breathe (on `translate`) instead of restarting it. faces swap instantly (no cross-fade:
   stacked faces fading through each other showed two faces at once). reduced motion: he stands still. */
.hp-hero.hp-v-7 .t7-char{animation:none}
.hp-hero.hp-v-7 .t7-blob{animation:none;transform:none;transform-origin:50% 100%;--np-bob:-6px}
.hp-hero.hp-v-7 .t7-blob img,.hp-hero.hp-v-7 .t7-blob:hover img{animation:none;transform:none;transition:none}
.hp-hero.hp-v-7 .t7-shadow{transform-origin:50% 50%}
@media(max-width:899px){.hp-hero.hp-v-7 .t7-blob{--np-bob:-3px}}
@media (prefers-reduced-motion:no-preference){
 .hp-hero.hp-v-7 .t7-char{animation:np-in .5s ease-out both}
 .hp-hero.hp-v-7 .t7-blob{animation:np-breathe 5s ease-in-out .5s infinite}
 .hp-hero.hp-v-7 .t7-shadow{animation:np-shadow 5s ease-in-out .5s infinite}
 .hp-hero.hp-v-7 .t7-char.np-hop{animation:none}
 .hp-hero.hp-v-7 .t7-char.np-hop .t7-blob{animation:np-breathe 5s ease-in-out .5s infinite,np-hop-y .38s ease-out}
 .hp-hero.hp-v-7.np-away :is(.t7-blob,.t7-shadow){animation-play-state:paused}
}
@keyframes np-in{from{opacity:0}}
@keyframes np-breathe{0%,100%{translate:0 0}50%{translate:0 var(--np-bob)}}
@keyframes np-shadow{0%,100%{transform:none;opacity:1}50%{transform:scaleX(.92);opacity:.8}}
@keyframes np-hop-y{40%{transform:translateY(-7px)}}

/* ===== full-screen hero (homepage) =====
   the hero fills the screen under the sticky 61px nav, so nothing from the next section shows until you scroll.
   100svh = the screen with Safari's toolbars showing (100vh fallback). iOS 26 Safari draws the page behind its floating
   glass toolbar, so a 100svh hero leaves the next section showing through under the bar: the hero paints down to 100lvh,
   and --hp-tb (lvh - svh, the toolbar strip; 0 on desktop) is added to the bottom padding so Numpty, the box and the
   'v' cue stay centred / near the bottom of the part of the screen you can actually see. taller content just grows. */
.hp-hero{--hp-tb:0px;min-height:calc(100vh - 61px);min-height:calc(100svh - 61px)}
@supports (height:100lvh){.hp-hero{--hp-tb:calc(100lvh - 100svh);min-height:calc(100lvh - 61px)}}
:root:root .hp-hero{padding-bottom:calc(64px + var(--hp-tb))}
@media(max-width:899px) and (max-height:900px){:root:root .hp-hero{padding-bottom:calc(56px + var(--hp-tb))}}
.hp-cue{bottom:calc(14px + var(--hp-tb))}
@media(min-width:900px){:root:root .hp-hero{min-height:calc(100vh - 61px);min-height:calc(100svh - 61px);padding-bottom:calc(72px + var(--hp-tb))}
 @supports (height:100lvh){:root:root .hp-hero{min-height:calc(100lvh - 61px)}}}
/* short landscape screens: content is taller than the screen, so the hero just grows and the cue sits under the box */
@media(max-height:500px){:root:root .hp-hero{min-height:calc(100vh - 61px);min-height:calc(100svh - 61px);padding-bottom:12px}}
/* ===== end full-screen hero ===== */

/* ===== phone declutter (<=480px only; desktop and tablets unchanged) =====
   fewer things competing per screen: no dot grid behind the page, the "# ..." comment lines and small print under the
   headings go, more room between sections. kept as is: the hero (Numpty, his box and everything in it, the cue), tool of
   the week, the small cards in 'the whole lot' with the pick tab and grey rank numbers, 5 launches + 'see more launches'. */
@media(max-width:480px){
 /* the page: plain background, no dot grid */
 body,.home{background-image:none}
 /* terminal boxes keep their filename and $ command; the "# ..." comment under it goes (not in the hero box) */
 :root:root .cc .cc-l.cc-c,:root:root .cm-bar-n,:root:root .glog-h .cm{display:none}
 /* secondary meta lines: the man-page header, 'tap a row ...', the table footnote, the 'level' tag next to tied scores.
    the 'last updated / rank / USD, before tax' line (p.updated) stays on phones (audit 2026-10-20): it carries the date and
    the price caveat; themes/a3.css sets it as a wrapped mono meta line */
 :root:root p.man,:root:root .cmp .hint,:root:root .lt-note,:root:root .lt-mv,
 :root:root .specs-in,:root:root #specs .sheet-cm,:root:root .cm-side p.muted.sm{display:none}
 /* league table: with 'level' gone the name takes its column and the score stays in the last one, right-aligned to the box edge */
 :root:root .lt-row>.lt-nm{grid-column:2/4}
 :root:root .lt-row>.lt-pts{grid-column:4}
 /* homepage 'the whole lot': the one-line blurb under each job heading goes; the cards stay */
 :root:root .home #rankings .cat>p.kick{display:none}
 :root:root .cat h2{flex-wrap:wrap}   /* 320px: 'see the whole lot ->' wraps instead of pushing the page sideways */
 /* homepage 'fresh out the oven': still 5 launches, each blurb cut to 3 lines */
 :root:root #releases .rel .meta{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
 /* footer: the status line (n checked · n changed · last check) goes; the links and copyright stay */
 :root:root footer .sl{display:none}
 /* with the meta line gone, the page title keeps its room above the first box */
 :root:root main h1:has(+p.updated){margin-bottom:22px}
 /* more air between sections */
 :root:root .home main>.wrap>:is(section,div,aside)+:is(section,div,aside){margin-top:48px}
}
/* ===== end phone declutter ===== */

/* ===== phones show less (MOCK, branch mobile-less-info; mobile_less.py adds the links) =====
   same look, fewer things: nothing here restyles a box, font, border, card or tab, it only hides items or cuts text to
   fewer lines (the same line-clamp the league table blurbs already use). above 480px nothing changes. */
.mob-more{display:none}
@media(max-width:480px){
 .mob-more{display:block}
 /* homepage league table: top 3, then 'see the full table ->'; each blurb one line */
 :root:root .lt-list>.lt-row:nth-child(n+4){display:none}
 :root:root .lt-nm small{-webkit-line-clamp:1;line-clamp:1}
 /* small cards: left as they are (a one-line blurb left the fixed-height cards half empty, which changed the look) */
 /* homepage tool of the week: hidden on phones (the league table above already leads with the same #1); tablet/desktop keep it */
 :root:root .home #league>.hp-stick{display:none}
 :root:root .home #league+#digest{margin-top:82px}   /* without it, the league table box sits 90px above the weekly box (the section keeps 8px under it), like the ~90px between other sections */
 /* fresh out the oven (homepage) and /new/: each launch is its date + title (the title links to the maker's post) */
 :root:root :is(#releases,.nl) .ri>:is(.meta,.src){display:none}
 /* homepage 'how we rank': heading + 'how we score, in full ->' (the rules are on that page) */
 :root:root .home #how-we-rank .cc-how{display:none}
 :root:root .home #how-we-rank{margin-bottom:38px}   /* without the box, the gap to the footer matches the ~90px between sections */
 /* tool pages: key spec rows only until 'more specs v'; guides list top 3 + 'all guides ->' */
 :root:root #specs:not(:target) .sheet dl>.srow:not(.sk){display:none}
 :root:root #specs:target .mob-more{display:none}
 :root:root #tool-guides .glinks>li:nth-child(n+4){display:none}
 /* category pages: intro cut to 3 lines; the pick keeps its one-line verdict and price; then rows 02-05 until 'show all v' */
 :root:root main>p.answer{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
 :root:root section.pick>p.why{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden}
 :root:root section.pick dl.pf>:is(dt,dd):not(:nth-last-of-type(1)){display:none}
 :root:root .tbl:not(:target)>details.tr:nth-of-type(n+5){display:none}
 :root:root .tbl:target+.mob-more{display:none}
}
/* ===== end phones show less ===== */

/* ===== design a: terminal / ide (preview only). loaded after style.css; the dark palette is forced by themes/theme.py ===== */
@property --vx-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
:root{--vx-bg:#0b0b0b;--vx-bg2:#121212;--vx-hl:rgba(255,255,255,.045);--vx-glow:rgba(255,255,255,.55);--k-fff:#0b0b0b;--k-f5f5f5:#141414;--k-f6f6f6:#141414;--k-f4f4f4:#151515}
html{background:var(--vx-bg)}
body.th-a{background:
  radial-gradient(1200px 600px at 50% -10%,rgba(255,255,255,.06),transparent 60%),
  var(--vx-bg);position:relative}
/* film grain, very faint (static svg noise) */
body.th-a::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.th-a .nav{background:rgba(11,11,11,.82);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid #262626}
.th-a .nav .logo .np{filter:drop-shadow(0 0 10px rgba(255,255,255,.18))}

/* --- editor tabs under the header --- */
.vx-tabs{height:34px;border-bottom:1px solid #222;background:#0f0f0f;font:500 12px/34px var(--mono);color:#7a7a7a;position:relative;z-index:4}
.vx-tabs .wrap{display:flex;align-items:stretch;height:100%;gap:0;white-space:nowrap;overflow:hidden}
.vx-tab{display:inline-flex;align-items:center;gap:8px;padding:0 14px;border-right:1px solid #222;color:#7a7a7a;text-decoration:none;position:relative;transition:color .2s,background .2s}
.vx-tab:first-child{border-left:1px solid #222}
.vx-tab:hover{color:#ededed;background:#151515}
.vx-tab.on{background:var(--vx-bg);color:#ededed}
.vx-tab.on::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:#ededed;box-shadow:0 0 12px var(--vx-glow)}
.vx-tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--vx-bg)}
.vx-tab i{width:7px;height:7px;border-radius:50%;background:#ededed;box-shadow:0 0 8px var(--vx-glow)}
.vx-tab b{font-weight:500;color:#555;margin-left:4px}
.vx-path{margin-left:auto;color:#555;padding-left:16px}
.vx-tabs.vx-home{position:absolute;left:0;right:0;top:61px;background:rgba(15,15,15,.6)}
@media(max-width:640px){.vx-path,.vx-tab:not(.on){display:none}.vx-tab:first-child{border-left:0}.vx-tabs .wrap{padding:0}}

/* --- line-number gutter + current line (desktop, fine pointers) --- */
.vx-gutter,.vx-line{display:none}
@media(min-width:1180px){
 .vx-gutter{display:block;position:absolute;left:0;top:0;width:48px;padding-right:10px;box-sizing:border-box;text-align:right;
   font:400 11px/24px var(--mono);color:#3a3a3a;white-space:pre;pointer-events:none;z-index:3;border-right:1px solid #1c1c1c;overflow:hidden;
   -webkit-user-select:none;user-select:none}
 .vx-line{display:block;position:absolute;left:0;right:0;height:24px;pointer-events:none;z-index:1;background:var(--vx-hl);opacity:0;transition:opacity .2s}
 .vx-line.on{opacity:1}
 .vx-line b{position:absolute;left:0;width:38px;text-align:right;font:500 11px/24px var(--mono);color:#ededed}
}

/* --- hero: ghost terminal, spotlight, glowing ring round the box (the box itself is untouched) --- */
.th-a .hp-hero{isolation:isolate}
.th-a .hp-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(520px 380px at var(--mx,62%) var(--my,46%),rgba(255,255,255,.075),transparent 70%)}
.th-a .hp-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent)}
.vx-ghost{position:absolute;inset:0;z-index:-1;margin:0;overflow:hidden;pointer-events:none;padding:56px 24px 24px;box-sizing:border-box;
  font:400 12px/20px var(--mono);color:#ededed;opacity:.13;white-space:pre;
  -webkit-mask-image:radial-gradient(ellipse 46% 42% at 62% 50%,transparent 55%,#000 100%);mask-image:radial-gradient(ellipse 46% 42% at 62% 50%,transparent 55%,#000 100%)}
.vx-ghost .c{color:#8a8a8a}
.vx-ghost .k{display:inline-block;width:.6em;height:1.1em;vertical-align:-.2em;background:#ededed;animation:vx-blink 1s steps(1) infinite}
@media(max-width:899px){.vx-ghost{display:none}}
.th-a .t7-bub{box-shadow:0 0 0 1px rgba(255,255,255,.04),0 30px 80px -20px rgba(255,255,255,.12),0 0 60px rgba(255,255,255,.05)}
.th-a .t7-bub::after{content:"";position:absolute;inset:-9px;pointer-events:none;padding:1px;
  background:conic-gradient(from var(--vx-ang),transparent 0 62%,rgba(255,255,255,.08) 70%,#fff 86%,rgba(255,255,255,.08) 94%,transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:vx-spin 6s linear infinite;filter:drop-shadow(0 0 6px rgba(255,255,255,.6))}
@keyframes vx-spin{to{--vx-ang:360deg}}
.th-a .hp-hero .t7-shadow{opacity:.5}
.th-a .t7-blob{filter:drop-shadow(0 0 34px rgba(255,255,255,.14))}
.th-a .n9-h1{text-shadow:0 0 18px rgba(255,255,255,.18)}

/* --- '$' prompts before section headings, '#' before page titles --- */
.th-a :is(.hp-h,#rl,#hw,.cmp>h2,#wk-h1)::before{content:"$";display:inline-block;font:600 .46em/1 var(--mono);color:#777;margin-right:.55em;vertical-align:.38em;text-shadow:none}
@media(max-width:640px){.th-a main.page>h1::before{display:none!important}}
.th-a main.page>h1:not(:has(.mono))::before{content:"#";font:600 .42em/1 var(--mono);color:#555;margin-right:.6em;vertical-align:.45em}
.th-a :is(.hp-h,#rl,#hw,.cmp>h2,main.page>h1){text-shadow:0 0 22px rgba(255,255,255,.12)}
html.vx-m .vx-pre{clip-path:inset(0 100% 0 0)}
html.vx-m .vx-pre.vx-in{animation:vx-type .9s steps(26,end) forwards}
html.vx-m .vx-pre.vx-in::after{content:"";display:inline-block;width:.42em;height:.8em;margin-left:.15em;vertical-align:-.05em;background:currentColor;animation:vx-blink .5s steps(1) 4 forwards}
@keyframes vx-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -1em 0 0)}}
@keyframes vx-blink{50%{opacity:0}}

/* --- entrance: blocks rise in as you scroll --- */
html.vx-m .vx-r{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*45ms)}
html.vx-m .vx-r.vx-in{opacity:1;transform:none}

/* --- frames: hairline glow, label like an open file --- */
.th-a :is(.cframe,.lt,.sticker,.digest,.foot-disc,.sheet,.pick,.tbl,.cc){box-shadow:0 0 0 1px rgba(255,255,255,.02),0 20px 60px -30px rgba(255,255,255,.08)}
.th-a .cc-t{letter-spacing:.02em}
.th-a .cc-t::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#ededed;margin-right:7px;vertical-align:1px;box-shadow:0 0 6px var(--vx-glow)}
/* selected-line hover on rows and cards */
.th-a :is(.lt-row,.ri,.card.mini,.tr){transition:background .18s,box-shadow .18s,transform .18s}
.th-a .lt-row:hover,.th-a .ri:hover{background:var(--vx-hl);box-shadow:inset 2px 0 0 #ededed}
.th-a .card.mini:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px #ededed,0 0 24px rgba(255,255,255,.12)!important}
.th-a .lt-pts{text-shadow:0 0 14px rgba(255,255,255,.35)}
.th-a .btn{transition:box-shadow .2s,transform .2s}
.th-a .btn:hover{box-shadow:0 0 0 1px #ededed,0 0 22px rgba(255,255,255,.3);transform:translateY(-1px)}
.th-a .cc-cur{box-shadow:0 0 10px rgba(255,255,255,.7)}
.th-a a.lnk:hover{text-shadow:0 0 12px rgba(255,255,255,.5)}

/* --- status bar: fixed along the bottom on desktop, last line of the page on phones --- */
.vx-status{display:flex;gap:0;font:500 11px/24px var(--mono);color:#0b0b0b;background:#d8d8d8;white-space:nowrap;overflow:hidden}
.vx-status>span{padding:0 10px;border-right:1px solid rgba(0,0,0,.18)}
.vx-status .vx-mode{background:#0b0b0b;color:#ededed;font-weight:700;letter-spacing:.06em;box-shadow:inset 0 0 0 1px #d8d8d8}
.vx-status .vx-sp{flex:1;border:0}
.vx-status>span:last-child{border-right:0}
@media(min-width:900px){.vx-status{position:fixed;left:0;right:0;bottom:0;z-index:20}body.th-a{padding-bottom:24px}}
@media(max-width:899px){.vx-status>span:nth-child(n+6):not(.vx-pct),.vx-status>span:nth-child(2){display:none}}

@media(prefers-reduced-motion:reduce){
 .th-a .t7-bub::after,.vx-ghost .k{animation:none}
 html.vx-m .vx-r{opacity:1;transform:none;transition:none}
 html.vx-m .vx-pre{clip-path:none;animation:none}
}

@media(min-width:900px){.th-a .hp-cue{transform:translateY(-22px)}}

/* ===== shared by a1 / a2 / a3 (preview only) ===== */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the footer status line's '? keys' button ran 9px off the side at tablet widths (also on main); it hides there, the '?' key still works */
@media (max-width:899.98px){.foot .sl .sl-k{display:none!important}}
/* phones keep main's declutter even where a layout layer restyles the items (same rules, made to win) */
@media (max-width:640px){
 :root:root:root .home #rankings:not(.is-filtered) .card:nth-child(n+4){display:none!important}
 :root:root:root .tr .bf{display:none!important}
}
@media (max-width:480px){
 :root:root:root .lt-list>.lt-row:nth-child(n+4){display:none!important}
 :root:root:root .home #rankings .cat>p.kick{display:none!important}
 :root:root:root .home #league>.hp-stick{display:none!important}
 :root:root:root :is(#releases,.nl) .ri>:is(.meta,.src){display:none!important}
 :root:root:root .home #how-we-rank .cc-how{display:none!important}
 :root:root:root #specs:not(:target) .sheet dl>.srow:not(.sk){display:none!important}
 :root:root:root #tool-guides .glinks>li:nth-child(n+4){display:none!important}
 :root:root:root .tbl:not(:target)>details.tr:nth-of-type(n+5){display:none!important}
}

/* ===== a3 'mission control': bordered panes, labels in the border, htop meters ===== */
.th-a3{--a3-ln:#2b2b2b;--a3-dim:#6f6f6f;--a3-gap:22px}
/* the pane */
:root:root body.th-a3 .a3-p{position:relative;border:1px solid var(--a3-ln)!important;border-radius:6px!important;background:#0d0d0d!important;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 14px 40px -24px rgba(0,0,0,.9)!important;padding:28px 22px 20px!important;margin:0!important;min-width:0;max-width:none!important;transform:none!important}
:root:root body.th-a3 .a3-p:hover,:root:root body.th-a3 .a3-p:focus-within{border-color:#4a4a4a!important}
.th-a3 .a3-lb{position:absolute;top:0;left:12px;right:12px;transform:translateY(-50%);display:flex;align-items:center;gap:10px;margin:0;
  font:600 12px/1.2 var(--mono);color:#e6e6e6;pointer-events:none;white-space:nowrap;z-index:2}
.th-a3 .a3-lb>*{background:var(--k-fff)}
.th-a3 .a3-lb{background:none}
.th-a3 .a3-lb::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--a3-lw,0px));}
.th-a3 .a3-p>.a3-lb{padding:0}
.th-a3 .a3-p>.a3-lb .a3-dot,.th-a3 .a3-hlb .a3-dot{width:7px;height:7px;border-radius:50%;background:#ededed;box-shadow:0 0 0 4px var(--k-fff),0 0 8px var(--vx-glow);flex:none}
.th-a3 .a3-lb{text-shadow:0 0 0 transparent}
.th-a3 .a3-lb{-webkit-box-decoration-break:clone}
/* label text sits on a strip of page colour so the border breaks around it */
.th-a3 .a3-lb{color:#e6e6e6}
.th-a3 .a3-p>.a3-lb{font-size:12px}
.th-a3 .a3-p>.a3-lb{left:10px}
.th-a3 .a3-p>.a3-lb::after{content:none}
.th-a3 .a3-p>.a3-lb{padding:0 8px 0 6px;right:auto;max-width:calc(100% - 20px);background:var(--k-fff)}
.th-a3 .a3-hr{color:var(--a3-dim);font-weight:500;padding-left:10px;border-left:1px solid #333;margin-left:2px}
.th-a3 .a3-live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#ededed;margin-right:6px;vertical-align:1px}
html.vx-m .th-a3 .a3-live::before{animation:a3-blink 1.6s steps(2,start) infinite}
@keyframes a3-blink{50%{opacity:.15}}
/* inner boxes are redundant inside a pane */
:root:root:root body.th-a3 .a3-p :is(.lt,.sticker,.cc,.sheet,.tbl,.cframe,.ns,.digest){border:0!important;box-shadow:none!important;background:none!important;padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important;border-radius:0!important}
:root:root:root body.th-a3 .a3-p :is(.lt,.sticker,.sheet,.cframe,.pick,.digest,.sponsor,.cc)>.cc-t,
:root:root:root body.th-a3 .a3-p>.cc-t,:root:root:root body.th-a3 .a3-p .sheet-t:not(.sr){display:none!important}
:root:root:root body.th-a3 .a3-p .lt{padding-top:6px!important}
.th-a3 .a3-p :is(h2,h3):first-of-type{margin-top:0}
/* the dashboard grid */
.th-a3 .a3-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:calc(var(--a3-gap) + 6px) var(--a3-gap);align-items:stretch}
.th-a3.home .a3-grid{padding-top:30px;margin-bottom:56px}
.th-a3 .a3-dc{display:contents!important}
.th-a3 .a3-grid>*,.th-a3 .a3-grid>.a3-dc>*{grid-column:1/-1;min-width:0}
@media(min-width:1100px){
 .th-a3 .a3-w-lg{grid-column:span 8!important}.th-a3 .a3-w-tw{grid-column:span 4!important}
 .th-a3 .a3-w-rl{grid-column:span 7!important}.th-a3 .a3-w-pr{grid-column:span 5!important}
 .th-a3 .a3-w-cg{grid-column:span 5!important}.th-a3 .a3-w-dg{grid-column:span 7!important}
 .th-a3 .a3-tg .a3-w-vd{grid-column:span 5!important}.th-a3 .a3-tg .a3-w-pc{grid-column:span 7!important}
 .th-a3 .a3-tg .a3-w-al{grid-column:span 5!important}.th-a3 .a3-tg .a3-w-gd{grid-column:span 7!important}
 .th-a3 .a3-tg .a3-w-dg{grid-column:1/-1!important}
 .th-a3 .a3-cg .a3-w-sm{grid-column:span 7!important}.th-a3 .a3-cg .a3-w-pk{grid-column:span 5!important}
 .th-a3 .a3-cg .a3-w-dg{grid-column:span 8!important}.th-a3 .a3-cg .a3-w-spn{grid-column:span 4!important}
}
@media(min-width:700px) and (max-width:1099.98px){
 .th-a3 .a3-w-tw{grid-column:span 5!important}.th-a3 .a3-w-rl{grid-column:span 7!important}
 .th-a3 .a3-w-cg{grid-column:span 6!important}.th-a3 .a3-w-dg{grid-column:span 6!important}
 .th-a3 .a3-tg .a3-w-vd{grid-column:span 5!important}.th-a3 .a3-tg .a3-w-pc{grid-column:span 7!important}
 .th-a3 .a3-tg .a3-w-al,.th-a3 .a3-tg .a3-w-gd,.th-a3 .a3-tg .a3-w-dg,.th-a3 .a3-cg .a3-w-dg{grid-column:1/-1!important}
}
@media(max-width:699.98px){
 .th-a3 .a3-grid{gap:30px 0}.th-a3 .a3-dt{display:none!important}
 :root:root body.th-a3 .a3-p{padding:26px 14px 16px!important}
}
/* homepage section spacing inside panes */
:root:root body.th-a3 .a3-p:is(#league>*,#releases,#digest,#how-we-rank,.a3-w-lot){margin:0!important}
:root:root body.th-a3 #league>aside.hp-stick{padding-top:28px!important}
.th-a3 .a3-w-lot .hp-lot{margin-top:0;padding-top:0}
.th-a3 .a3-p .hp-h{margin-top:0}
/* top htop pane */
.th-a3 .a3-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:6px 40px;font:500 13px/1.75 var(--mono);color:#bdbdbd}
.th-a3 .a3-top p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-a3 .a3-top b{color:#fff;font-weight:700}
.th-a3 .a3-mk{color:var(--a3-dim);display:inline-block;min-width:6.5ch}
.th-a3 .a3-mr{display:flex;align-items:center}
.th-a3 .a3-mr b,.th-a3 .a3-bar b{letter-spacing:-.5px;color:#f2f2f2;text-shadow:0 0 6px var(--vx-glow);font-weight:700}
.th-a3 .a3-mr i,.th-a3 .a3-bar i{font-style:normal;letter-spacing:-.5px}
.th-a3 .a3-mr em,.th-a3 .a3-bar em{font-style:normal;color:#9a9a9a;margin-left:6px}
.th-a3 .a3-mr{white-space:nowrap}
@media(max-width:699.98px){.th-a3 .a3-top{grid-template-columns:1fr;font-size:12px}.th-a3 .a3-mt p:not(:last-child){display:none}}
/* meters in rows */
.th-a3 .a3-bar{font:500 12px/1 var(--mono);color:#555;white-space:nowrap}
:root:root .th-a3 .a3-p .lt-row{display:grid!important;grid-template-columns:4ch minmax(0,1fr) auto auto 4.5ch!important;column-gap:14px}
:root:root .th-a3 .a3-p .lt-row>*{grid-row:1!important}
:root:root .th-a3 .a3-p .lt-row>.lt-pos{grid-column:1!important}:root:root .th-a3 .a3-p .lt-row>.lt-nm{grid-column:2!important}
:root:root .th-a3 .a3-p .lt-row>.lt-mv{grid-column:3!important}:root:root .th-a3 .a3-p .lt-row>.a3-bar{grid-column:4!important}
:root:root .th-a3 .a3-p .lt-row>.lt-pts{grid-column:5!important}
.th-a3 .lt-row .a3-bar em{display:none}
@media(max-width:699.98px){:root:root .th-a3 .a3-p .lt-row{grid-template-columns:3ch minmax(0,1fr) auto 3.5ch!important;column-gap:10px}
 :root:root .th-a3 .a3-p .lt-row>.lt-mv{display:none!important}:root:root .th-a3 .a3-p .lt-row>.a3-bar{grid-column:3!important}:root:root .th-a3 .a3-p .lt-row>.lt-pts{grid-column:4!important}
 .th-a3 .lt-row .a3-bar{font-size:10px}}
/* launches log pane: the reel (a3.js) is a fixed-height scroll box showing whole entries only */
.th-a3 .a3-w-rl>h2{margin-top:0}
.th-a3 .a3-scr{position:relative;overflow:hidden auto;overscroll-behavior:auto;scroll-snap-type:y mandatory;scrollbar-width:thin;scrollbar-color:var(--a3-ln) transparent}
.th-a3 .a3-scr.a3-anim{scroll-snap-type:none}
.th-a3 .a3-scr>.a3-tr>.rel>li{scroll-snap-align:start}
/* the list's top rule moves onto the box, so the copy used for the loop starts exactly one list-height down */
:root:root:root:root body.th-a3 #releases .a3-scr{border-top:var(--rule-row)}
:root:root:root:root body.th-a3 #releases .a3-scr>.a3-tr>ul.rel{border-top:0!important}
/* entries in the reel don't do the scroll-in reveal (its 14px offset moved the snap points, and the loop copy never got revealed) */
html.vx-m body.th-a3 #releases .a3-scr .vx-r{opacity:1;transform:none;transition:none}
.th-a3 .a3-scr:focus-visible{outline:2px solid #ededed;outline-offset:3px}
/* prices.csv */
:root:root .th-a3 .a3-prices table{width:100%!important;min-width:0!important;border-collapse:collapse;table-layout:fixed;font:500 12.5px/1.4 var(--mono)}
.th-a3 .a3-prices th{text-align:left;color:var(--a3-dim);font-weight:500;padding:0 8px 8px 0;border-bottom:1px solid #2a2a2a}
.th-a3 .a3-prices td{padding:8px 8px 8px 0;border-bottom:1px dashed #222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#cfcfcf}
.th-a3 .a3-prices th:nth-child(1){width:34%}.th-a3 .a3-prices th:nth-child(3){width:11ch}
.th-a3 .a3-prices small{display:block;color:#8a8a8a;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.th-a3 .a3-prices td{vertical-align:top}
.th-a3 .a3-prices a{color:#ededed;text-decoration:none}.th-a3 .a3-prices a:hover{text-decoration:underline}
.th-a3 .a3-prices td.a3-ck{color:#777}
.th-a3 .a3-prices tr:hover td{background:var(--vx-hl)}
/* categories/ */
.th-a3 .a3-cats ul{list-style:none;margin:0;padding:0;font:500 13px/1.3 var(--mono)}
.th-a3 .a3-cats a{display:grid;grid-template-columns:minmax(0,15ch) minmax(0,1fr) 3ch;gap:12px;align-items:center;padding:7px 4px;color:#d6d6d6;text-decoration:none;border-bottom:1px dashed #1f1f1f}
.th-a3 .a3-cats a:hover{background:var(--vx-hl);color:#fff}
.th-a3 .a3-cn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-a3 .a3-cb{height:8px;background:repeating-linear-gradient(90deg,#1f1f1f 0 6px,transparent 6px 8px)}
.th-a3 .a3-cb b{display:block;height:100%;background:repeating-linear-gradient(90deg,#ededed 0 6px,transparent 6px 8px);box-shadow:0 0 8px rgba(255,255,255,.18);transform-origin:left}
html.vx-m .th-a3 .a3-cats.a3-in .a3-cb b{animation:a3-grow .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes a3-grow{from{transform:scaleX(0)}}
.th-a3 .a3-cc{text-align:right;color:#9a9a9a}
/* hero = pane 1 */
.th-a3 .a3-hlb{position:absolute;left:24px;right:24px;bottom:18px;margin:0;display:flex;gap:10px;align-items:center;font:600 11.5px/1.2 var(--mono);color:#8a8a8a;pointer-events:none;z-index:1}
.th-a3 .a3-hlb .a3-hr{margin-left:auto;border:0}
@media(max-width:699.98px){.th-a3 .a3-hlb{display:none}}
/* tool pages */
.th-a3 .a3-tg{margin-top:34px;margin-bottom:34px}
:root:root body.th-a3 .a3-w-vd .ns{margin:0!important;padding:0!important}
.th-a3 .a3-vbar{margin:14px 0 0;font:500 13px/1 var(--mono)}
.th-a3 .a3-vbar .a3-bar{font-size:13px}
:root:root body.th-a3 .a3-prs dl{margin:0}
:root:root body.th-a3 .a3-p .srow{display:grid}
.th-a3 .a3-w-al>h2,.th-a3 .a3-w-gd>h2{margin-top:0!important}
:root:root body.th-a3 .a3-w-al .man-sa{margin-top:0}
:root:root body.th-a3 .a3-w-ps{margin-top:28px!important}
:root:root body.th-a3 .a3-w-ps>p{border:0!important;background:none!important;box-shadow:none!important;margin:0!important;padding:0!important}
:root:root body.th-a3 .a3-w-spn>aside{border:0!important;background:none!important;padding:0!important;margin:0!important}
/* category pages */
.th-a3 .a3-cg{margin-top:30px;margin-bottom:30px}
:root:root body.th-a3 .a3-w-sm .cc-rank{padding-top:0!important;margin-top:0!important}
:root:root body.th-a3 .a3-w-sm .answer{margin-bottom:0}
:root:root body.th-a3 .a3-w-pk .plbl{display:none}
@media(min-width:700px){:root:root .th-a3 .a3-w-cmp .tbl :is(.th,.tr summary){grid-template-columns:44px minmax(150px,1.1fr) 1.5fr 1.2fr 13ch 20px!important}}
@media(max-width:699.98px){.th-a3 .a3-w-cmp .a3-bar,.th-a3 .a3-mh{display:none}}
.th-a3 .a3-mh{font-family:var(--mono)}
.th-a3 .a3-ns{color:#666;font-size:11px}
/* /new/ histogram */
.th-a3 .a3-hs{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:6px}
.th-a3 .a3-hc{flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:6px;text-decoration:none;color:#888;font:500 11px/1 var(--mono);min-width:0}
.th-a3 .a3-hb{flex:1 1 0;min-height:0;width:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;padding-top:17px;box-sizing:border-box}
.th-a3 .a3-hb>*,.th-a3 .a3-hd{flex:none}
.th-a3 .a3-hc b{display:block;width:100%;max-width:38px;background:repeating-linear-gradient(0deg,#ededed 0 5px,transparent 5px 7px);box-shadow:0 0 10px rgba(255,255,255,.15);transform-origin:bottom}
.th-a3 .a3-hc:hover b{background:repeating-linear-gradient(0deg,#fff 0 5px,transparent 5px 7px)}
.th-a3 .a3-hn{color:#ddd}
html.vx-m .th-a3 .a3-hist.a3-in .a3-hc b{animation:a3-rise .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes a3-rise{from{transform:scaleY(0)}}
@media(max-width:480px){.th-a3 .a3-hs{gap:3px;height:110px}.th-a3 .a3-hd{font-size:9px;writing-mode:vertical-rl;transform:rotate(180deg)}}
.th-a3 .nl .a3-w-hg{margin:26px 0 30px!important}
/* generic pages: one pane around the content */
:root:root body.th-a3 .a3-w-pg{margin:36px 0 34px!important}
@media(max-width:699.98px){:root:root body.th-a3 .a3-w-pg{border-left:0!important;border-right:0!important;border-radius:0!important;padding-left:0!important;padding-right:0!important;background:none!important;box-shadow:none!important}}
.th-a3 .a3-sb .a3-clk{color:inherit}  /* 2026-10-21: was #ededed on the light bar; now the bar's own dark text */
@media(prefers-reduced-motion:reduce){.th-a3 *{animation:none!important;transition:none!important}}

/* big section heads shrink a notch inside panes */
@media(min-width:700px){:root:root body.th-a3 .a3-grid .a3-p :is(.hp-h,#releases>h2,#how-we-rank h2,.hp-lot h2){font-size:clamp(28px,3vw,38px)!important;line-height:1.1!important}}
:root:root body.th-a3 #releases .cc-cmdc{margin:10px 0 6px!important}
@media(max-width:1099.98px){.th-a3 .a3-live{display:none}}
:root:root body.th-a3 .a3-w-dg.digest{align-content:center!important}
:root:root body.th-a3 .a3-prs .srow{display:grid!important;grid-template-columns:13ch minmax(0,1fr);gap:4px 16px;padding:9px 0;border-bottom:1px dashed #232323;font:500 13px/1.6 var(--mono)}
:root:root body.th-a3 .a3-prs .srow:last-child{border-bottom:0}
:root:root body.th-a3 .a3-prs dt{color:#7a7a7a;font:500 12.5px/1.6 var(--mono)}
:root:root body.th-a3 .a3-prs dd{margin:0;color:#e2e2e2}
:root:root body.th-a3 .a3-prs .srow:first-child dd{color:#fff;font-weight:600}
@media(max-width:480px){:root:root body.th-a3 .a3-prs .srow{grid-template-columns:1fr}}
:root:root body.th-a3 .nl .a3-w-gl{margin-top:34px!important}
:root:root body.th-a3 .nl .a3-w-hg{margin-bottom:0!important}
@media(max-width:480px){.th-a3 .a3-sb{display:none}}

/* ===================== a3 v2: calm mission control ===================== */
.th-a3 .vx-gutter,.th-a3 .vx-line{display:none!important}
.th-a3{--a3-ln:#1f1f1f}
:root:root body.th-a3 .a3-p{border-radius:10px!important;background:#0c0c0c!important;box-shadow:none!important;padding:38px 32px 30px!important}
:root:root body.th-a3 .a3-p:hover,:root:root body.th-a3 .a3-p:focus-within{border-color:#333!important}
.th-a3 .a3-p>.a3-lb{font-size:11.5px;color:#bdbdbd;letter-spacing:.02em}
.th-a3 .a3-p>.a3-lb .a3-dot{width:5px;height:5px;box-shadow:0 0 0 4px var(--k-fff)}
.th-a3 .a3-hr{color:#5c5c5c;border-left-color:#262626}
@media(min-width:1100px){
 .th-a3.home .a3-grid{gap:44px 28px;padding-top:56px}
 .th-a3 .a3-w-sc{grid-column:1/-1!important}
 .th-a3 .a3-w-pr{grid-column:span 7!important}.th-a3 .a3-w-rl{grid-column:span 5!important}
 .th-a3 .a3-w-dg{grid-column:1/-1!important}
}
@media(min-width:700px) and (max-width:1099.98px){.th-a3 .a3-w-pr,.th-a3 .a3-w-rl{grid-column:1/-1!important}}
@media(max-width:699.98px){:root:root body.th-a3 .a3-p{padding:30px 18px 22px!important}.th-a3.home .a3-grid{gap:38px 0;padding-top:34px}}
:root:root body.th-a3 #league>aside.hp-stick{display:flex!important;flex-direction:column;justify-content:center}
/* ---- readout ---- */
.a3-ro{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.6fr);border-top:1px solid #1c1c1c;border-bottom:1px solid #1c1c1c}
.a3-ro-i{padding:26px 22px 24px;border-left:1px solid #1c1c1c;min-width:0;display:flex;flex-direction:column;gap:10px}
.a3-ro-i:first-child{border-left:0;padding-left:0}
.a3-ro-i b{font:400 clamp(34px,4vw,52px)/1 Doto,var(--mono);color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-shadow:0 0 24px rgba(255,255,255,.18)}
.a3-ro-i span{font:500 11.5px/1.3 var(--mono);color:#6a6a6a;letter-spacing:.03em}
/* 2026-10-21 (Andrew): the clock's numbers match the counts to its left (same Doto face, size, weight, spacing and glow as .a3-ro-i b) */
.a3-ro-ck b{margin-top:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 2026-10-21 (Andrew): no dot before the clock; its digits start at the left of the cell like the other counts */
@media(max-width:899.98px){.a3-ro{grid-template-columns:repeat(2,minmax(0,1fr))}.a3-ro-i{border-left:0;padding:20px 0;border-top:1px solid #1c1c1c}.a3-ro-i:nth-child(-n+2){border-top:0}.a3-ro-i:nth-child(even){padding-left:18px;border-left:1px solid #1c1c1c}.a3-ro-ck{grid-column:1/-1;padding-left:0!important;border-left:0!important}}
/* ---- segmented score bars ---- */
.a3-sg{position:relative;display:block;height:6px;min-width:60px;align-self:center;background:repeating-linear-gradient(90deg,#1f1f1f 0 calc(10% - 2px),transparent calc(10% - 2px) 10%)}
.a3-sg i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v,0)*100%);background:#bdbdbd;transform-origin:left center;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(100%/var(--v,1)/10 - 2px),transparent 0 calc(100%/var(--v,1)/10));mask:repeating-linear-gradient(90deg,#000 0 calc(100%/var(--v,1)/10 - 2px),transparent 0 calc(100%/var(--v,1)/10))}
html.vx-m .a3-w-lg:not(.a3-in) .a3-sg i{transform:scaleX(0)}
html.vx-m .a3-w-lg.a3-in .a3-sg i{animation:a3-fill 1.3s cubic-bezier(.16,.84,.24,1) both;animation-delay:calc(.15s + var(--r,0)*110ms)}
@keyframes a3-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* league rows as a scoreboard */
.th-a3 .a3-w-lg .a3-bar{display:none!important}
:root:root .th-a3 .a3-w-lg .lt-row{display:grid!important;grid-template-columns:3ch minmax(0,1fr) 6ch minmax(110px,28%) 5ch!important;grid-template-rows:auto!important;column-gap:20px;align-items:center;padding:18px 0!important;border-bottom:1px solid #161616!important}
:root:root .th-a3 .a3-w-lg .lt-row>*{grid-row:1!important}
:root:root .th-a3 .a3-w-lg .lt-row>.lt-pos{grid-column:1!important}:root:root .th-a3 .a3-w-lg .lt-row>.lt-nm{grid-column:2!important}:root:root .th-a3 .a3-w-lg .lt-row>.lt-mv{grid-column:3!important;text-align:right}
:root:root .th-a3 .a3-w-lg .lt-row>.a3-sg{grid-column:4!important}:root:root .th-a3 .a3-w-lg .lt-row>.lt-pts{grid-column:5!important;text-align:right}
.th-a3 .a3-w-lg .lt-pos{font:500 13px/1 var(--mono)!important;color:#555!important}
.th-a3 .a3-w-lg .lt-pts{font:500 15px/1 var(--mono)!important;color:#9a9a9a}
.th-a3 .a3-w-lg .lt-row:first-child .lt-pos{color:#fff!important}
.th-a3 .a3-w-lg .lt-row:first-child .lt-nm a{font-size:19px!important}
.th-a3 .a3-w-lg .lt-row:first-child .lt-pts{font:400 36px/1 Doto,var(--mono)!important;color:#fff;text-shadow:0 0 22px rgba(255,255,255,.35)}
.th-a3 .a3-w-lg .lt-row:first-child .a3-sg{height:8px}
.th-a3 .a3-w-lg .lt-row:first-child .a3-sg i{background:#fff;box-shadow:0 0 14px rgba(255,255,255,.3)}
@media(max-width:699.98px){
 :root:root .th-a3 .a3-w-lg .lt-row{grid-template-columns:3ch minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;row-gap:10px;column-gap:12px}
 :root:root .th-a3 .a3-w-lg .lt-row>.lt-mv{display:none!important}
 :root:root .th-a3 .a3-w-lg .lt-row>.lt-pts{grid-column:3!important}
 :root:root .th-a3 .a3-w-lg .lt-row>.a3-sg{grid-column:2/4!important;grid-row:2!important}
 .th-a3 .a3-w-lg .lt-row:first-child .lt-pts{font-size:28px!important}
}
/* ---- prices.csv ---- */
:root:root .th-a3 .a3-prices table{border-collapse:collapse;table-layout:fixed}
.th-a3 .a3-prices th{font:500 11px/1 var(--mono);color:#5c5c5c;text-align:left;padding:0 12px 12px 0;border-bottom:1px solid #1c1c1c;letter-spacing:.04em}
.th-a3 .a3-prices th:nth-child(1){width:30%}.th-a3 .a3-prices th:nth-child(2){width:27%}
.th-a3 .a3-prices td{padding:13px 12px 13px 0;border-bottom:1px solid #141414;vertical-align:top;font:500 13px/1.45 var(--mono)}
.th-a3 .a3-prices tr:last-child td{border-bottom:0}
.th-a3 .a3-prices .a3-pc a{color:#8a8a8a;text-decoration:none}.th-a3 .a3-prices .a3-pt a{color:#ededed;text-decoration:none;font-weight:600}
.th-a3 .a3-prices tr:hover .a3-pc a{color:#cfcfcf}
.th-a3 .a3-prices .a3-pp b{display:block;color:#fff;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th-a3 .a3-prices .a3-pp small{display:block;color:#5f5f5f;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
/* ---- first-visit intro ---- */
html.a3-i body::after{content:"";position:fixed;inset:0;z-index:9998;background:#0b0b0b;animation:a3-cov .3s 3.2s forwards;pointer-events:none}
@keyframes a3-cov{to{opacity:0;visibility:hidden}}
.a3-intro{position:fixed;inset:0;z-index:9999;background:#0b0b0b;color:#ededed;font-family:var(--mono);display:flex;flex-direction:column;justify-content:center;padding:0 max(24px,6vw);box-sizing:border-box;transition:opacity .5s ease;cursor:pointer}
.a3-intro.a3-x{opacity:0;pointer-events:none}
.a3-ih{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font:500 13px/1.4 var(--mono);color:#9a9a9a;margin-bottom:28px}
.a3-ih b{color:#fff;font-weight:500}
.a3-ic{font:400 clamp(22px,3vw,34px)/1 Doto,var(--mono);color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.a3-ic small{font:500 11.5px var(--mono);color:#6a6a6a;margin-left:8px}
.a3-iv{position:relative;height:min(62vh,600px);width:100%;max-width:1160px;margin:0 auto}.a3-iv canvas{position:absolute;inset:0;display:block}
.a3-intro.a3-dn{opacity:0}
.a3-if{margin-top:34px;display:flex;justify-content:space-between;gap:16px;font:500 12px/1.4 var(--mono);color:#6a6a6a}
.a3-if b{color:#fff;font-weight:600}
.a3-skip{all:unset;cursor:pointer;color:#8a8a8a;border-bottom:1px solid #444}
.a3-skip:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:699.98px){.a3-if{margin-top:22px}.a3-iv{height:min(60vh,420px)}.a3-ih{flex-direction:column;gap:12px;margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){.a3-intro,html.a3-i body::after{display:none!important}.a3-sg i,.a3-cbar,.a3-ch .a3-lg{animation:none!important;transform:none!important}}
.th-a3 .vx-ghost:not(.a3-gh){display:none!important}
/* fixes: launches in a narrow pane, totw centred, board slots, leader score room */
:root:root body.th-a3 #releases .ri{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto!important;column-gap:16px;row-gap:6px;padding:16px 0!important;border-bottom:1px solid #151515!important}
:root:root body.th-a3 #releases .ri>*{grid-column:1/-1!important;grid-row:auto!important;margin:0!important;min-width:0}
:root:root body.th-a3 #releases .ri>time{grid-column:1!important;grid-row:1!important;font:500 11.5px/1.4 var(--mono)!important;color:#6a6a6a!important}
:root:root body.th-a3 #releases .ri>.src{grid-column:2!important;grid-row:1!important;font-size:11.5px!important;justify-self:end}
:root:root body.th-a3 #releases .ri>h3{font:600 15px/1.35 var(--sans,inherit)!important}
:root:root body.th-a3 #releases .ri>.meta{font-size:13px!important;line-height:1.55!important;color:#8a8a8a!important;display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
:root:root body.th-a3 .a3-w-tw .sticker{position:static!important;margin:auto 0!important;top:auto!important}
@media(min-width:700px){:root:root .th-a3 .a3-w-lg .lt-row{grid-template-columns:3ch minmax(0,1fr) 6ch minmax(110px,26%) 6.5ch!important}}
.th-a3 .a3-vbar{display:flex;align-items:center;gap:16px;max-width:460px;margin:16px 0 4px}
.th-a3 .a3-sgb{flex:1;height:8px}.th-a3 .a3-sgb i{background:#ededed;box-shadow:0 0 12px rgba(255,255,255,.25)}
.th-a3 .a3-vbar em{font:400 30px/1 Doto,var(--mono);font-style:normal;color:#fff}.th-a3 .a3-vbar small{font:500 12px var(--mono);color:#666;margin-left:2px}
.th-a3 .a3-rs{display:flex;align-items:center;gap:10px;min-width:0;font:500 12.5px/1 var(--mono);color:#9a9a9a}
.th-a3 .a3-rs .a3-sg{flex:1;height:5px;min-width:40px}.th-a3 .a3-rs em{font-style:normal;width:3ch;text-align:right}
.th-a3 .a3-rs.a3-ns em{width:auto;color:#555}
@media(max-width:699.98px){.th-a3 .a3-w-cmp .a3-rs{display:none}}
:root:root .th-a3 .a3-pdd{grid-column:1/-1!important}
:root:root .th-a3 .a3-prs .srow:has(.a3-pdd){display:block!important}
:root:root .th-a3 .a3-prs .srow:has(.a3-pdd) dt{margin-bottom:10px}
@media(max-width:480px){.th-a3 .a3-plans li:last-child:nth-child(odd){grid-column:1/-1}}

/* plan cards, same treatment as a2 */
.th-a3 .a3-plans{list-style:none;margin:6px 0 2px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:1px;background:#222;border:1px solid #222;border-radius:6px;overflow:hidden}
.th-a3 .a3-plans li{background:#0b0b0b;padding:14px 14px 13px;margin:0;font:400 12.5px/1.5 var(--mono);color:#9a9a9a;min-width:0;overflow-wrap:anywhere;transition:background .2s}
.th-a3 .a3-plans li:hover{background:#121212}
.th-a3 .a3-plans li .num:first-of-type{font:700 16px/1.3 var(--mono);color:#fff;letter-spacing:-.01em}
.th-a3 .a3-plans li:first-child{box-shadow:inset 0 2px 0 #ededed}
.th-a3 .a3-plans{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
@media(max-width:480px){.th-a3 .a3-plans{grid-template-columns:1fr 1fr}}
.th-a3 .a3-plans{display:flex!important;flex-wrap:wrap}
.th-a3 .a3-plans li{flex:1 1 140px}
.a3-intro,.a3-intro *{font-variant-ligatures:none;font-feature-settings:"calt" 0,"liga" 0}
:root:root body.th-a3 #league>aside.hp-stick{justify-content:flex-start!important}
:root:root body.th-a3 .a3-w-tw .sticker{position:sticky!important;top:110px!important;margin:18px 0 0!important}
/* hero dot field: the scores cloud, faint, behind everything */
.th-a3 .a3-hero{position:relative;isolation:isolate}
.a3-fld{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;opacity:0;transition:opacity 1.2s ease;
  -webkit-mask-image:radial-gradient(ellipse 75% 80% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 75% 80% at 50% 50%,#000 55%,transparent 100%)}
.a3-fld.a3-on{opacity:1}
@media(prefers-reduced-motion:reduce){.a3-fld{transition:none}}

/* ===== v2: a1's editor tabs as the nav ===== */
.th-a3{--ax-tabh:40px}
.th-a3 .ax-hd{display:flex;align-items:center;gap:12px}
.th-a3 .ax-hd .btn.sm{height:38px;box-sizing:border-box;display:inline-flex;align-items:center;padding:0 16px}
@media (max-width:699.98px){
 .th-a3 .ax-hd{display:none}
 .th-a3 .ax-mm>summary.mm-t{box-sizing:border-box;width:44px;height:44px;display:inline-flex!important;align-items:center;justify-content:center;border:1px solid #2c2c2c;border-radius:8px;padding:0!important;background:#111;text-decoration:none!important}
 .th-a3 .ax-mm>summary .mm-o{font:700 15px/1 var(--mono);letter-spacing:.06em;color:#ededed;transform:translateY(-3px)}
 .th-a3 .ax-mm>summary .mm-x{font:600 14px/1 var(--mono);color:#ededed}
 .th-a3 .nav .row{gap:0}
}
.th-a3 .ax-tabs{position:relative;z-index:4;height:var(--ax-tabh);border-bottom:1px solid #1d1d1d;background:rgba(13,13,13,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:500 12.5px/1 var(--mono)}
.th-a3.home .ax-tabs{margin-bottom:calc(-1*var(--ax-tabh));background:rgba(13,13,13,.5)}
.th-a3 .ax-tw{display:flex;align-items:stretch;height:100%;max-width:1160px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.th-a3 .ax-ts{display:flex;align-items:stretch;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.th-a3 .ax-ts::-webkit-scrollbar{display:none}
.th-a3 .ax-tab{flex:none;display:inline-flex;align-items:center;gap:8px;padding:0 15px;color:#727272;text-decoration:none;border-right:1px solid #1d1d1d;position:relative;white-space:nowrap;transition:color .2s,background .2s}
.th-a3 .ax-tab:first-child{border-left:1px solid #1d1d1d}
.th-a3 .ax-tab:hover{color:#ededed;background:#141414}
.th-a3 .ax-tab:focus-visible{outline:2px solid #ededed;outline-offset:-2px}
.th-a3 .ax-tab i{width:6px;height:6px;border-radius:50%;background:#333;transition:background .2s,box-shadow .2s}
.th-a3 .ax-tab b{font-weight:500;color:#444;margin-left:2px;opacity:0;transition:opacity .2s}
.th-a3 .ax-tab:hover b,.th-a3 .ax-tab.on b{opacity:1}
.th-a3 .ax-tab.on{background:var(--vx-bg);color:#ededed}
.th-a3 .ax-tab.on i{background:#ededed;box-shadow:0 0 8px var(--vx-glow)}
.th-a3 .ax-tab.on::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:#ededed;box-shadow:0 0 12px var(--vx-glow)}
.th-a3 .ax-tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--vx-bg)}
.th-a3 .ax-tab.par{color:#bdbdbd}.th-a3 .ax-tab.par i{background:#8a8a8a}
.th-a3 .ax-file em{font-style:italic}
.th-a3 .ax-path{flex:1 1 0;margin-left:auto;padding-left:16px;color:#4a4a4a;display:block;line-height:var(--ax-tabh);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:899.98px){.th-a3 .ax-path{display:none}}
@media (max-width:699.98px){
 .th-a3{--ax-tabh:42px}
 .th-a3 .ax-tw{padding:0}
 .th-a3 .ax-ts{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:24px}
 .th-a3 .ax-ts{flex:1 1 auto}   /* plat-fixes-2: the strip runs to the screen edge, so its 28px fade sits past the last tab, not on it */
 .th-a3 .ax-tab{padding:0 11px}   /* plat-fixes-2: 11px (was 13) so home / community / partners fit at 390px */
 .th-a3 .ax-tab:first-child{border-left:0}
 .th-a3 .ax-tab b{display:none}
}
@media (min-width:700px){.th-a3 .ax-tabs{position:sticky;top:61px}}

/* ===== v2: hero = ghost terminal above, score horizon below ===== */
.th-a3 .vx-ghost.a3-gh{bottom:min(13vh,120px);padding:64px 24px 0 max(24px,calc((100% - 1160px)/2 + 24px));opacity:.11;
  -webkit-mask-image:radial-gradient(ellipse 44% 46% at 64% 54%,transparent 58%,#000 100%),linear-gradient(#000 55%,transparent);-webkit-mask-composite:source-in;
  mask-image:radial-gradient(ellipse 44% 46% at 64% 54%,transparent 58%,#000 100%),linear-gradient(#000 55%,transparent);mask-composite:intersect}

/* ===== v2: the scores board (the star of the homepage) ===== */
.th-a3 .a3-sbh{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin:0 0 30px}
:root:root body.th-a3 .a3-sbh h2{margin:0!important}
:root:root body.th-a3 .a3-sbh form.search{margin:0!important;flex:0 1 340px;max-width:none}
.a3-lg{display:block;flex:none;width:24px;height:24px;border-radius:6px;overflow:hidden;background:#151515}
.a3-lg img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);opacity:.8;transition:filter .3s,opacity .3s}
.a3-mono{display:grid;place-items:center;font:700 12px/1 var(--mono);color:#ededed;box-shadow:inset 0 0 0 1px #333}
.th-a3 .a3-scores #empty{margin:22px 0 0}
@keyframes a3-pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:699.98px){
 :root:root body.th-a3 .a3-sbh form.search{display:none!important}
 .th-a3 .a3-sbh{margin-bottom:18px}
}
/* ----- alt 5: latent space ----- */
@property --u{syntax:"<length>";inherits:true;initial-value:1px}
@property --cx{syntax:"<number>";inherits:true;initial-value:50}
@property --cy{syntax:"<number>";inherits:true;initial-value:50}
.ls-g{position:relative;height:800px;--u:1px;border-radius:12px;overflow:hidden;
 background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(255,255,255,.035),transparent 70%),radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1.2px) 0 0/28px 28px,#080808;
 box-shadow:inset 0 0 0 1px #1a1a1a}
.ls-cs{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.ls-c{position:absolute;inset:0;margin:0;pointer-events:none;transition:--cx .9s cubic-bezier(.6,0,.2,1),--cy .9s cubic-bezier(.6,0,.2,1),--u .9s cubic-bezier(.6,0,.2,1),opacity .5s}
.ls-c>*{pointer-events:auto}
.ls-ns{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none}
.ls-ns>li>*{pointer-events:auto}
.ls-ns>li>.ls-wn{pointer-events:none}
html.vx-m .ls-g.a3-in .ls-ns{animation:ls-fl var(--du) ease-in-out calc(var(--i)*-1.7s) infinite alternate}
@keyframes ls-fl{0%{transform:translate(-4px,3px)}50%{transform:translate(3px,-4px)}100%{transform:translate(5px,4px)}}
.ls-ps .ls-ns,.ls-ps .ls-n a{animation-play-state:paused!important}
/* desktop-check 1023: the drift holds still while the pointer is on the board and while a cluster is zoomed (it resumes from
   where it stopped, so nothing jumps). reduced motion has no drift at all (no vx-m, and the reduce block below). */
.ls-g.ls-zm .ls-ns{animation-play-state:paused!important}
@media(hover:hover){.ls-g:hover .ls-ns{animation-play-state:paused!important}}
.ls-n{position:absolute;margin:0;left:calc(var(--cx)*1% + var(--dx)*var(--u));top:calc(var(--cy)*1% + var(--dy)*var(--u));width:0;height:0;z-index:1}
.ls-n::before{content:"";position:absolute;left:0;top:0;height:1px;width:calc(var(--r)*var(--u));transform-origin:0 50%;transform:rotate(var(--an));
 background:linear-gradient(90deg,rgba(255,255,255,calc(.03 + var(--g)*.1)),rgba(255,255,255,.14));transition:opacity .3s,background .3s}
.ls-n a{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:block;border-radius:50%;outline:none;
 box-shadow:0 0 0 1px rgba(255,255,255,calc(.08 + var(--g)*.3)),0 0 calc(4px + var(--g)*14px) rgba(255,255,255,calc(var(--g)*.16));transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s,box-shadow .3s}
.ls-n .a3-lg{width:calc(20px + var(--g)*10px);height:calc(20px + var(--g)*10px);border-radius:50%;transition:width .5s,height .5s}
.ls-n .a3-lg img{opacity:calc(.35 + var(--g)*.65)}
.ls-ld{z-index:2}
.ls-ld a{box-shadow:0 0 0 1.5px rgba(255,255,255,.85),0 0 34px rgba(255,255,255,.3)}
.ls-ld .a3-lg{width:46px;height:46px}.ls-ld .a3-lg img{opacity:1}
.ls-cr{position:absolute;left:50%;top:-14px;transform:translateX(-50%);line-height:0;color:#fff;filter:drop-shadow(0 0 6px rgba(255,255,255,.6));z-index:2}
.ls-cr svg{width:18px;height:13px;fill:currentColor}
.ls-wn{position:absolute;left:0;top:32px;transform:translateX(-50%);white-space:nowrap;padding:3px 7px;border-radius:999px;background:rgba(8,8,8,.78);font:600 12.5px/1 var(--sans,inherit);color:#fff;text-shadow:0 0 12px #000,0 0 4px #000;pointer-events:none;transition:opacity .3s}
.ls-wn b{font:500 11px/1 var(--mono);color:#bdbdbd;margin-left:4px}
.ls-un a{box-shadow:none;outline:1px dashed #555;outline-offset:2px}
/* category labels sit just clear of the cluster's topmost logo (phones' dot overview: just below the lowest dot), above the logos */
.ls-c h3{position:absolute;left:calc(var(--cx)*1%);top:calc(var(--cy)*1% + 73px);transform:translate(-50%,-50%);margin:0!important;z-index:3}
.ls-z{all:unset;cursor:pointer;font:500 11px/1 var(--mono);letter-spacing:.03em;color:#7a7a7a;padding:4px 8px;border-radius:999px;background:rgba(8,8,8,.82);white-space:nowrap;transition:color .2s,background .2s}
.ls-z:hover,.ls-c.ls-on .ls-z{color:#fff;background:#1c1c1c}
.ls-z:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* hover: the rest of the space dims, this cluster's spokes light */
.ls-hv .ls-c:not(.ls-on) .ls-n a,.ls-hv .ls-c:not(.ls-on) .ls-wn{opacity:.3}
.ls-hv .ls-c:not(.ls-on) .ls-n::before{opacity:.25}
.ls-c.ls-on .ls-n::before{background:linear-gradient(90deg,rgba(255,255,255,.25),rgba(255,255,255,.5))}
.ls-n.ls-on{z-index:4}
.ls-n.ls-on a{transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 0 1.5px #fff,0 0 30px rgba(255,255,255,.45)}
.ls-n.ls-on .a3-lg img,.ls-n a:focus-visible .a3-lg img{filter:none;opacity:1}
.ls-n a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.a3-flt .ls-n a.a3-dim{opacity:.08}
/* zoom: the chosen cluster flies to the middle and grows, the rest fade */
.ls-c.ls-f{--cx:50!important;--cy:52!important;--u:1.55px;z-index:5}
.ls-c.ls-o{opacity:0;pointer-events:none}
.ls-c.ls-o *{pointer-events:none}
.ls-f .ls-n .a3-lg{width:calc(28px + var(--g)*14px);height:calc(28px + var(--g)*14px)}
.ls-f .ls-ld .a3-lg{width:60px;height:60px}
.ls-f .ls-wn{top:42px;font-size:14px}
/* desktop-check 1023: the winner's name tag sat over 2-3 of its own cluster's logos. on the desktop board it drops to the
   nearest spot clear of them (--wx/--wy from v_a3.py _wn_place), and from 700px up it sits a layer under the logos, so
   where a little overlap is left (ai coding agents; the tablet board) the logos stay whole. zoomed clusters keep theirs. */
@media(min-width:1024px){.ls-c:not(.ls-f) .ls-wn{left:var(--wx,0px);top:var(--wy,32px)}}
@media(min-width:700px){.ls-c:not(.ls-f) .ls-ld:not(.ls-on){z-index:auto}.ls-c:not(.ls-f) .ls-ld>a{z-index:2}.ls-c:not(.ls-f) .ls-wn{z-index:0}}
.ls-bar{display:flex;align-items:center;gap:16px;margin:14px 0 0;min-height:30px;font:500 11.5px/1 var(--mono)}
.ls-back{all:unset;cursor:pointer;white-space:nowrap;padding:7px 11px;border-radius:999px;background:#ededed;color:#0b0b0b}
.ls-back:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ls-ax{margin-left:auto;color:#3e3e3e}
/* 2026-10-21: zoomed, the way back lives inside the board at its top (a3.js keeps it under the sticky header while any of
   the board shows, and lays the cluster out below it). blank board space zooms out too, hence the cursor */
.ls-zb{position:absolute;left:12px;right:12px;top:12px;z-index:35;display:flex;align-items:center;justify-content:space-between;gap:16px;font:500 11.5px/1 var(--mono);pointer-events:none}
.ls-zb[hidden]{display:none}
.ls-zb>*{pointer-events:auto}
.ls-zb .ls-back{box-shadow:0 4px 18px rgba(0,0,0,.55)}
.ls-g.ls-zm{cursor:zoom-out}
/* plat-fixes-5: the instant reset to the overview (a3.js ovw: back-forward cache restore, leaving the page) doesn't glide */
.ls-g.ls-nt .ls-c,.ls-g.ls-nt .ls-c *{transition:none!important}
/* arrive: the cloud condenses out of nothing */
html.vx-m .ls-g:not(.a3-in) .ls-n a{opacity:0;transform:translate(-50%,-50%) scale(.3)}
html.vx-m .ls-g.a3-in .ls-n a{animation:ls-in 1s cubic-bezier(.16,.84,.24,1) both;animation-delay:calc(var(--i)*70ms + var(--k)*45ms)}
html.vx-m .ls-g:not(.a3-in) .ls-n::before{opacity:0}
.ls-n::before{transition:opacity 1.2s .6s}
@keyframes ls-in{from{opacity:0;transform:translate(-50%,-50%) scale(.3)}}
/* readout */
.ls-rd{position:relative;margin:12px 0 0;border-top:1px solid #1d1d1d;padding-top:12px}
.ls-rd0{margin:0;font:500 12px/1.6 var(--mono);color:#5e5e5e;max-width:880px}.ls-rd0 b{color:#bdbdbd;font-weight:500}.ls-d2{display:none}
.a3-scores.ls{position:relative}
.ls-tip{position:absolute;left:0;top:0;z-index:30;width:300px;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .16s,transform .16s,visibility 0s .16s}
.ls-tip.on{opacity:1;visibility:visible;transform:none;transition:opacity .16s,transform .16s}
/* the card is a link to the tool's page: clickable once open, styled exactly as the old div, with an invisible bridge
   over the gap back to its node so the mouse can travel from the dot into the card */
a.ls-tip{display:block;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:none}
.ls-tip.on{pointer-events:auto;cursor:pointer}
.ls-tip::before{content:"";position:absolute}
.ls-tip[data-s=r]::before{right:100%;top:0;bottom:0;width:18px}.ls-tip[data-s=l]::before{left:100%;top:0;bottom:0;width:18px}
.ls-tip[data-s=t]::before{top:100%;left:0;right:0;height:18px}.ls-tip[data-s=b]::before{bottom:100%;left:0;right:0;height:18px}
.ls-rd1{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:'l t s' 'p p p';align-items:center;gap:6px 12px;padding:12px 14px;border-radius:10px;
 background:rgba(14,14,14,.94);box-shadow:0 0 0 1px #333,0 18px 40px rgba(0,0,0,.6),0 0 28px rgba(255,255,255,.05);backdrop-filter:blur(6px)}
.ls-rl{grid-area:l}.ls-rt{grid-area:t}.ls-rs{grid-area:s}.ls-rd1 .p{grid-area:p;white-space:normal!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;border-top:1px solid #222;padding-top:7px;margin-top:2px}
.ls-rl .a3-lg{width:38px;height:38px;border-radius:50%;box-shadow:0 0 0 1px #3a3a3a}.ls-rl .a3-lg img{filter:none;opacity:1}
.ls-rt{display:flex;flex-direction:column;gap:5px;min-width:0}
.ls-rt .n{font-weight:600;font-size:15px;line-height:1.15;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-rt .c{font:500 11.5px/1.2 var(--mono);color:#6a6a6a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-rs{white-space:nowrap}.ls-rs b{font:400 28px/1 Doto,var(--mono);color:#fff;text-shadow:0 0 18px rgba(255,255,255,.28)}.ls-rs small{font:500 11px/1 var(--mono);color:#505050;margin-left:2px}
.ls-rd1.ls-nos .ls-rs b{font:500 13px/1 var(--mono);text-shadow:none;color:#8a8a8a}.ls-rd1.ls-nos .ls-rs small{display:none}
.ls-rd1 .p{font:500 12px/1.4 var(--mono);color:#8a8a8a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 2026-10-21: 'full breakdown ->', the card's last line (the card is a link to the tool page) */
.ls-rd1{grid-template-areas:'l t s' 'p p p' 'm m m'}
.ls-rd1 .ls-mo{grid-area:m;font:500 11.5px/1.2 var(--mono);color:#6a6a6a;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:color .15s,text-decoration-color .15s}
a.ls-tip .ls-rd1{transition:box-shadow .15s}
@media(hover:hover){a.ls-tip:hover .ls-rd1{box-shadow:0 0 0 1px #555,0 18px 40px rgba(0,0,0,.6),0 0 28px rgba(255,255,255,.07)}a.ls-tip:hover .ls-mo{color:#fff;text-decoration-color:currentColor}}
@media(prefers-reduced-motion:reduce){.ls-tip,.ls-ns,.ls-n a,.ls-c,.ls-n::before{animation:none!important;transition:none!important}}
@media(max-width:1023.98px){.ls-g{height:640px;--u:.72px}.ls-n .a3-lg{width:calc(16px + var(--g)*6px);height:calc(16px + var(--g)*6px)}.ls-wn{font-size:11px;top:28px}.ls-ld .a3-lg{width:38px;height:38px}.ls-c h3{top:calc(var(--cy)*1% + 68.5px)}.ls-c.ls-f{--u:1.4px}}
@media(max-width:699.98px){
 .ls-c:not(.ls-f){--cx:var(--qx)!important;--cy:var(--qy)!important}   /* board-labels-1024-d: phone spots (v_a3.py PHONE_POS) */
 .ls-g{height:420px;--u:.34px;background-size:auto,20px 20px,auto;margin:0 -6px}
 .ls-n .a3-lg{width:7px;height:7px}
 .ls-n .a3-lg img{opacity:0}
 .ls-n .a3-lg,.ls-n .a3-lg.a3-lgl{background:rgba(255,255,255,calc(.25 + var(--g)*.6))!important}
 .ls-ld .a3-lg{width:26px;height:26px}.ls-ld .a3-lg img{opacity:1}
 .ls-ld .a3-lg.a3-lgl{background:#e4e4e4!important}.ls-ld .a3-lg:not(.a3-lgl){background:#151515!important}
 .ls-cr{top:-11px}.ls-cr svg{width:13px;height:10px}
 .ls-wn{display:none}
 .ls-c h3{top:calc(var(--cy)*1% + 37px)}   /* board-labels-1024-d: one baseline under every cluster (v_a3.py _LBL) */
 .ls-z{font-size:10px;padding:3px 5px;color:#7a7a7a}
 .ls-c.ls-f{--cx:50!important;--cy:50!important;--u:1px}
 .ls-f .ls-n .a3-lg{width:calc(22px + var(--g)*8px);height:calc(22px + var(--g)*8px)}
 .ls-f .ls-n .a3-lg img{opacity:calc(.45 + var(--g)*.55)}
 .ls-f .ls-n .a3-lg:not(.a3-lgl){background:#151515!important}.ls-f .ls-n .a3-lg.a3-lgl{background:#e4e4e4!important}
 .ls-f .ls-ld .a3-lg{width:40px;height:40px}
 .ls-f .ls-wn{display:block;top:32px;font-size:12px}
 .ls-f h3{top:calc(var(--cy)*1% - 46px)}
 .ls-ax{display:none}
 .ls-bar{margin-top:10px;min-height:28px;gap:12px;font-size:11px}
 .ls-bar{display:none}
 .ls-zb{left:8px;right:8px;top:8px;gap:10px;font-size:11px}
 .ls-rd{margin-top:10px;padding-top:10px}
 .ls-d1{display:none}.ls-d2{display:inline}
 .ls-tip{width:min(280px,calc(100vw - 24px))}.ls-rd1{padding:10px 12px}.ls-rd1 .p{font-size:11px}
 .ls-rl .a3-lg{width:32px;height:32px}.ls-rt .n{font-size:14.5px}.ls-rt .c{font-size:10.5px}.ls-rs b{font-size:26px}
}

/* ===== go-live polish ===== */
/* tabs stay visible under the sticky header on every screen; phones and tablets keep the main tabs in view (no file tab) */
.th-a3 .ax-tabs{position:sticky!important;top:61px}
@media (max-width:1099.98px){.th-a3 .ax-file{display:none}}
/* dark logos read at rest: light tile */
.a3-lg.a3-lgl{background:#e4e4e4!important}
.a3-lg.a3-lgl img{opacity:1}
/* the background terminal lives in the band above Numpty and left of the bubble (sized by a3.js), fading at its edges */
.th-a3 .vx-ghost.a3-gh{inset:0 auto auto 0;bottom:auto;width:var(--gw,40%);height:var(--gh,0px);padding:56px 0 0 var(--gp,24px);opacity:.12;
  -webkit-mask-image:linear-gradient(90deg,#000 72%,transparent),linear-gradient(#000 62%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 72%,transparent),linear-gradient(#000 62%,transparent);mask-composite:intersect}
/* one-column hero: the terminal sits in the short band above the headline, so it starts just under the tabs and fades out later */
.th-a3 .vx-ghost.a3-gh.gh-top{padding-top:48px;text-align:left;
  -webkit-mask-image:linear-gradient(90deg,#000 72%,transparent),linear-gradient(#000 78%,transparent);
  mask-image:linear-gradient(90deg,#000 72%,transparent),linear-gradient(#000 78%,transparent)}
/* big hero numpty: same column, same layout. Oct 18: another ~13% smaller everywhere; on wide screens the column
   shrinks with it (--np-char), so the numpty + ask box group re-centres instead of leaving a gap */
@media (min-width:900px){:root:root .th-a3 .hp-hero.hp-v-7x{--np-char:calc(clamp(250px,min(27vw,44svh),380px)*.87)}
 :root:root .th-a3 .hp-v-7x>.t7-char{width:calc(var(--np-char)*.83);justify-self:center}}
@media (max-width:899.98px){:root:root .th-a3 .hp-v-9:not(.hp-v-9d)>.t7-char{width:100px}}
:root:root .th-a3 .hp-hero .t7-char>.t7-shadow{height:9px}
/* community pages: the signed-in / sign-in link the community app adds next to the weekly button */
.th-a3 .ax-hd>a:not(.btn){font:500 13px/1 var(--mono);color:#bdbdbd;text-decoration:none}
.th-a3 .ax-hd>a:not(.btn):hover{color:#fff}

/* round 1: tool of the week logo = scores-board tile, filled, grey -> colour on hover/focus */
.a3-w-tw .st-n .a3-twl{width:56px;height:56px;border-radius:12px;box-shadow:0 0 0 1px #2a2a2a;background:#1a1a1a;transition:box-shadow .3s}
.a3-w-tw .st-n .a3-twl img{opacity:.9}
.a3-w-tw .sticker:is(:hover,:focus-within) .a3-twl{box-shadow:0 0 0 1px #8a8a8a,0 0 14px rgba(255,255,255,.18)}
.a3-w-tw .sticker:is(:hover,:focus-within) .a3-twl img{filter:none;opacity:1}
@media (max-width:699.98px){.a3-w-tw .st-n .a3-twl{width:48px;height:48px;border-radius:10px}}
/* round 3 audit: one box language. legend boxes outside the panes (subscribe, disclosure, 404 log, community frames) use the pane tokens */
:root:root:root body.th-a3 :is(.digest.sm,.foot-disc,.cc-404,.cframe):not(.a3-p):not(.a3-p *){border:1px solid var(--a3-ln)!important;border-radius:10px!important;background:#0c0c0c!important;box-shadow:none!important;transition:border-color .3s}
:root:root:root body.th-a3 :is(.digest.sm,.foot-disc,.cc-404,.cframe):not(.a3-p):not(.a3-p *):is(:hover,:focus-within){border-color:#333!important}
:root:root:root body.th-a3 :is(.digest.sm,.foot-disc,.cc-404,.cframe):not(.a3-p):not(.a3-p *)>.cc-t{left:10px!important;top:0!important;transform:translateY(-50%);padding:0 8px 0 6px!important;font-size:11.5px!important;line-height:1.2!important;color:#bdbdbd!important;letter-spacing:.02em;background:var(--k-fff)!important;display:flex!important;align-items:center;gap:10px;margin:0!important}
:root:root:root body.th-a3 :is(.digest.sm,.foot-disc,.cc-404,.cframe):not(.a3-p):not(.a3-p *)>.cc-t::before{width:5px!important;height:5px!important;margin:0!important;box-shadow:0 0 0 4px var(--k-fff)!important;position:static!important;flex:none}
/* nested cards inside panes and frames: quiet hairline, soft corner, brighten on hover */
:root:root:root body.th-a3 :is(.card.panel,.card.mini,.lp .box,.glinks a,.glist>li,.cm-tap,.alt3 a):not(.ns,.sticker,.lt,.cc,.sheet,.tbl,.digest,.cframe){border:1px solid #2a2a2a!important;border-radius:6px!important;background:#101010!important;box-shadow:none!important;transition:border-color .25s,background .25s}
:root:root:root body.th-a3 :is(.card.panel,.card.mini,.glinks a,.glist>li,.cm-tap,.alt3 a):not(.ns,.sticker,.lt,.cc,.sheet,.tbl,.digest,.cframe):is(:hover,:focus-within){border-color:#6a6a6a!important;background:#141414!important;color:var(--tx)!important}
:root:root body.th-a3 .alt3{list-style:none!important;padding-left:0!important}
:root:root body.th-a3 .alt3>li{margin:0 0 8px!important}
/* long pages (guides, terms, privacy): the pane spans the grid like every other page; prose keeps a reading measure */
:root:root:root body.th-a3 main.lp:not(.ps):not(:has(.glist))>.a3-w-pg{max-width:none!important}
:root:root:root body.th-a3 main.lp:not(.ps):not(:has(.glist))>.a3-w-pg>:is(h1,h2,h3,p:not(.a3-lb),ul,ol,dl,.box,blockquote,.lp-meta){max-width:760px}
/* headings never leave one word on its own line */
.th-a3 :is(h1,h2,h3){text-wrap:balance}
/* hero pick chip sits on the text baseline; its logo is greyscale until hover like every other logo */
:root:root .th-a3 .t7-pick{display:inline-block!important;line-height:1.25;vertical-align:baseline!important}
:root:root .th-a3 .t7-pick img{display:inline-block!important;vertical-align:-2px;margin-right:5px;filter:grayscale(1) contrast(1.05);opacity:.9;transition:filter .3s,opacity .3s}
:root:root .th-a3 .t7-pick:is(:hover,:focus-visible) img{filter:none;opacity:1}
/* 404: '#' stays on the heading line and the heading fits two lines */
:root:root body.th-a3 main.center>h1{flex-direction:row!important;flex-wrap:nowrap!important;align-items:baseline!important;font-size:clamp(34px,6.4vw,76px)!important;line-height:1.05!important}
/* footer links: separators drawn by css, the one at a line end is hidden (js marks it) */
.th-a3 .fl.a3-fl{display:flex;flex-wrap:wrap;row-gap:4px}
.th-a3 .fl.a3-fl>.nw{position:relative;padding-right:22px}
.th-a3 .fl.a3-fl>.nw::after{content:"\00b7";position:absolute;right:8px;top:50%;transform:translateY(-50%);line-height:1;color:#6a6a6a}
.th-a3 .fl.a3-fl>.nw.a3-le{padding-right:22px}
.th-a3 .fl.a3-fl>.nw.a3-le::after,.th-a3 .fl.a3-fl>.nw:last-child::after{content:none}
/* tool of the week: pick facts fill the pane, review link sits at the foot */
.a3-w-tw .sticker{display:flex!important;flex-direction:column;height:100%}
.a3-w-tw .a3-tf{margin:18px 0 0!important;padding:0;list-style:none;font:12.5px/1.5 "JetBrains Mono",ui-monospace,monospace;color:#bdbdbd}
.a3-w-tw .a3-tf>li{display:grid;grid-template-columns:9ch minmax(0,1fr);gap:12px;padding:9px 0;border-top:1px dashed #262626;margin:0}
.a3-w-tw .a3-tf>li:last-child{border-bottom:1px dashed #262626}
.a3-w-tw .a3-tf>li>span{color:#7a7a7a}
.a3-w-tw .a3-tf>li>b{color:#ededed;font-weight:600}
.a3-w-tw .a3-tf .a3-tfb{display:block;height:6px;margin-top:8px;background:repeating-linear-gradient(90deg,#ededed 0 calc(10% - 3px),transparent calc(10% - 3px) 10%);-webkit-mask:linear-gradient(90deg,#000 var(--s),rgba(0,0,0,.18) var(--s));mask:linear-gradient(90deg,#000 var(--s),rgba(0,0,0,.18) var(--s))}
.a3-w-tw .sticker>.lnk{margin-top:auto!important;padding-top:22px;align-self:flex-start}
@media (max-width:699.98px){.a3-w-tw .a3-tf{display:none}}
/* tablet: tool of the week and the weekly no longer sit alone at half width; the pick reads across two columns */
@media(min-width:700px) and (max-width:1099.98px){
 .th-a3 .a3-grid>.a3-dc>.a3-w-tw,.th-a3 .a3-grid .a3-w-tw,.th-a3 .a3-grid>.a3-w-dg{grid-column:1/-1!important}
 .a3-w-tw .sticker{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;align-content:start}
 .a3-w-tw .sticker>:not(.a3-tf){grid-column:1}
 .a3-w-tw .sticker>.a3-tf{grid-column:2;grid-row:1/span 4;margin:0!important;align-self:start}
 .a3-w-tw .sticker>.lnk{margin-top:6px!important;padding-top:0}
}
:root:root:root body.th-a3 .a3-p p.unc{border:1px solid #2a2a2a!important;border-radius:6px!important;background:#101010!important;box-shadow:none!important}
@media(max-width:640px){:root:root:root body.th-a3 .lp .a3-p tbody tr{border:1px solid #2a2a2a!important;border-radius:6px!important;background:#101010!important}}
@media(min-width:641px){
 :root:root body.th-a3 .lp .a3-p td[data-l="checked"]{white-space:nowrap}
 /* price sheet tool cells wrap: the score sits in that cell, and nowrap painted it over the plan */
 :root:root body.th-a3 .lp:not(.ps) .a3-p td[data-l="tool"]{white-space:nowrap}
}
:root:root body.th-a3 main.center>h1{font-size:clamp(34px,4.6vw,60px)!important}
/* outer frames line their text up with the pane content edge */
@media(min-width:700px){:root:root:root body.th-a3 :is(.digest.sm,.foot-disc):not(.a3-p):not(.a3-p *){padding-left:32px!important;padding-right:32px!important}}
/* pick verdict: two lines on phones instead of a one-line cut */
:root:root:root body.th-a3 section.pick>p.why{-webkit-line-clamp:2;line-clamp:2}
:root:root:root:root body.th-a3 .a3-w-ps>p{border:0!important;background:none!important;padding:0!important;border-radius:0!important}
/* stacked hero on tablets: the ask box lines up with the panes below (24px gutter, not the 16px phone one) */
@media(min-width:641px) and (max-width:899.98px){:root:root body.th-a3 section.hero{padding-left:24px!important;padding-right:24px!important}}
.th-a3 :is(.glist>li>a,.glinks a,.alt3 a,.cm-tap h3,.lt-nm>a){text-wrap:balance}
/* prices are never cut off: price cells wrap at word boundaries (no ellipsis), columns give the price the room */
:root:root body.th-a3 .a3-prices td,:root:root body.th-a3 .a3-prices small{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:normal;word-break:normal}
:root:root body.th-a3 .a3-prices th:nth-child(1){width:25%!important}
:root:root body.th-a3 .a3-prices th:nth-child(2){width:24%!important}
:root:root body.th-a3 .a3-prices th:nth-child(3){width:auto!important}
:root:root body.th-a3 .a3-prices .a3-pp b{display:block;font-weight:600;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
:root:root body.th-a3 .a3-prices .a3-pp small{margin-top:3px;line-height:1.45}
:root:root body.th-a3 .a3-prices .a3-pm{color:#bdbdbd;white-space:nowrap;text-decoration:underline;text-decoration-color:#444;text-underline-offset:2px}
:root:root body.th-a3 .a3-prices .a3-pm:hover{color:#fff;text-decoration-color:#fff}
@media(max-width:899.98px){:root:root body.th-a3 .a3-prices th:nth-child(1){width:28%!important}:root:root body.th-a3 .a3-prices th:nth-child(2){width:26%!important}}
/* league table one-liners carry prices too: show them whole */
:root:root:root body.th-a3 .lt-nm small{display:block!important;-webkit-line-clamp:unset!important;line-clamp:none!important;overflow:visible!important}
/* space cloud hover card: the price line wraps in full (the card re-measures before it flips) */
:root:root body.th-a3 .ls-rd1 .p{display:block!important;-webkit-line-clamp:unset!important;line-clamp:none!important;overflow:visible!important;text-overflow:clip!important;white-space:normal!important}

/* price sheet (#ps). the score is the muted number in the tool cell. a fixed 14% column plus
   nowrap let that number paint over the plan (Fable 5.1, Mythos 5.1). from 1000px up the sheet
   stays a table: names wrap inside their cells, and price / free / byo / checked columns are as
   wide as their text so a price is never clipped. below that, the same stacked rows as phones,
   so a column is never scrolled off the edge. */
@media(max-width:999.98px){
 :root:root body.th-a3 .ps .tw{overflow:visible!important;border:0!important;padding:0!important;background:transparent!important}
 :root:root body.th-a3 .ps #ps{display:block!important;width:100%!important;min-width:0!important;table-layout:auto!important}
 :root:root body.th-a3 .ps #ps thead{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
 :root:root body.th-a3 .ps #ps tbody{border-bottom:1.5px solid var(--k-000)}
 :root:root body.th-a3 .ps #ps tbody tr{display:flex!important;flex-wrap:wrap;align-items:baseline;column-gap:8px;border:0!important;border-top:1.5px solid var(--k-000)!important;border-radius:0!important;margin:0!important;padding:10px 0!important;background:transparent!important;box-shadow:none!important;width:auto!important}
 :root:root body.th-a3 .ps #ps tbody tr.ps-cont{border-top:1px dashed var(--k-c8c8c8)!important}
 :root:root body.th-a3 .ps #ps tbody tr[hidden]{display:none!important}
 :root:root body.th-a3 .ps #ps td{display:block;width:auto!important;min-width:0!important;max-width:none!important;padding:0!important;border:0!important;margin:0;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
 :root:root body.th-a3 .ps #ps td:before{content:none;display:none}
 :root:root body.th-a3 .ps #ps td:empty{display:none!important}
 :root:root body.th-a3 .ps #ps td[data-l="tool"]{flex:0 0 100%;font:700 15px/1.35 var(--sans);margin:0 0 6px;overflow-wrap:break-word}
 :root:root body.th-a3 .ps #ps tr.ps-cont td[data-l="tool"]{display:none}
 :root:root body.th-a3 .ps #ps td[data-l="plan"]{flex:1 1 auto;min-width:0;font:600 14px/1.4 var(--mono);color:var(--k-000);overflow-wrap:break-word}
 :root:root body.th-a3 .ps #ps td[data-l="monthly"]{flex:0 0 auto;margin-left:auto;font:700 14px/1.4 var(--mono);color:var(--k-000);white-space:nowrap!important}
 :root:root body.th-a3 .ps #ps td[data-l="annual"]{flex:0 0 auto;font:400 12.5px/1.4 var(--mono);color:var(--k-555);white-space:nowrap!important}
 :root:root body.th-a3 .ps #ps td[data-l="annual"]:before{content:"(";display:inline}
 :root:root body.th-a3 .ps #ps td[data-l="annual"]:after{content:" yearly)"}
 :root:root body.th-a3 .ps #ps td[data-l="annual"][data-t]:after{content:" " attr(data-t) ")"}
 :root:root body.th-a3 .ps #ps td[data-l="limits"]{flex:0 0 100%;font:400 14px/1.45 var(--sans);color:var(--k-333);margin-top:2px;overflow-wrap:anywhere}
 :root:root body.th-a3 .ps #ps :is(td[data-l="free tier"],td[data-l="BYO key"],td[data-l="checked"]){flex:0 0 auto;font:400 12px/1.5 var(--mono);color:var(--k-555);margin-top:4px;white-space:nowrap!important}
 :root:root body.th-a3 .ps #ps :is(td[data-l="free tier"],td[data-l="BYO key"],td[data-l="checked"]):before{display:inline;margin:0;font:inherit;color:inherit}
 :root:root body.th-a3 .ps #ps td[data-l="free tier"]:before{content:"free: "}
 :root:root body.th-a3 .ps #ps td[data-l="BYO key"]:before{content:"· byo: "}
 :root:root body.th-a3 .ps #ps td[data-l="checked"]:before{content:"· checked "}
 :root:root body.th-a3 .ps #ps td[data-l="checked"] a{color:var(--k-555)}
}
@media(min-width:1000px){
 :root:root body.th-a3 .ps .tw{overflow:visible!important}
 :root:root body.th-a3 .ps #ps{display:table!important;table-layout:auto!important;width:100%!important;min-width:0!important}
 :root:root body.th-a3 .ps #ps :is(th,td){width:auto!important;overflow:visible!important;text-overflow:clip!important}
 /* 190px fits "Anthropic Claude API" plus its score on one line at the sheet's 14px */
 :root:root body.th-a3 .ps #ps :is(th,td):nth-child(1){width:22%!important;min-width:190px;white-space:normal!important;overflow-wrap:break-word}
 :root:root body.th-a3 .ps #ps :is(th,td):nth-child(2){width:16%!important;min-width:8.5em;white-space:normal!important;overflow-wrap:break-word}
 :root:root body.th-a3 .ps #ps :is(th,td):nth-child(5){width:34%!important;min-width:10em;white-space:normal!important;overflow-wrap:break-word}
 :root:root body.th-a3 .ps #ps :is(th,td):is(:nth-child(3),:nth-child(4),:nth-child(6),:nth-child(7),:nth-child(8)){width:1%!important;white-space:nowrap!important}
}

/* ===== hero idea 1: info stack on the live background =====
   headline, then numpty, then his lines and the ask box, on one centre axis.
   the dot field, the ghost terminal, their brightness and their motion are the live ones. this block does not touch them. */
:root:root .th-a3 .a3-hero.hp-hero{display:flex!important;flex-direction:column;align-items:center;justify-content:safe center;text-align:center;gap:0;padding-top:calc(var(--ax-tabh,40px) + 8px)!important}
:root:root .th-a3 .a3-hero>.t7-copy{order:3;position:relative;z-index:1;width:min(600px,100%);display:flex!important;flex-direction:column;align-items:stretch;align-self:center;margin:0 auto!important}
:root:root .th-a3 .a3-hero h1.n9-h1{order:1;position:relative;z-index:1;max-width:min(980px,100%);margin:0 0 12px!important;text-align:center;text-wrap:wrap;font:900 clamp(48px,5vw,68px)/1.05 var(--dot)!important;letter-spacing:.01em;color:#ededed}
:root:root .th-a3 .a3-hero h1.n9-h1 .a3-lead{display:block}
:root:root .th-a3 .a3-hero h1.n9-h1 .a3-q{white-space:nowrap}
:root:root .th-a3 .a3-hero h1.n9-h1 .a3-sub{display:block;max-width:40em;margin:12px auto 0;font:500 clamp(14px,1.15vw,16px)/1.4 var(--dot)!important;letter-spacing:0;color:#8a8a8a;text-shadow:none;text-wrap:balance}
:root:root .th-a3 .a3-hero>.t7-char{order:2;position:relative;z-index:1;flex:none;align-self:center!important;margin:0 0 12px!important}
/* no glow and no light pool on numpty. the live spotlight behind the hero stays. */
:root:root .th-a3 .a3-hero .t7-blob{filter:none!important;margin-bottom:0}
:root:root .th-a3 .a3-hero .t7-char>.t7-shadow{display:none!important}
:root:root .th-a3 .a3-hero .t7-bub{order:3;position:relative;z-index:1;width:min(600px,100%)!important;max-width:none!important;box-sizing:border-box!important;align-self:center;margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;text-align:left;animation:none!important}
:root:root .th-a3 .a3-hero .t7-bub::before,:root:root .th-a3 .a3-hero .t7-bub::after{content:none!important;display:none!important;animation:none!important}
:root:root .th-a3 .a3-hero .np-ans,:root:root .th-a3 .a3-hero .np-form{width:100%!important;max-width:none!important;box-sizing:border-box!important;margin-left:0!important;margin-right:0!important}
:root:root .th-a3 .a3-hero .np-ans{display:block!important;margin-top:0!important;align-items:start!important}
:root:root .th-a3 .a3-hero .np-a.is-on{position:relative}
:root:root .th-a3 .a3-hero .np-a.np-off{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}
:root:root .th-a3 .a3-hero .t7-l{color:#8a8a8a;margin:0 0 8px}
:root:root .th-a3 .a3-hero .t7-l:last-child{margin-bottom:0}
:root:root .th-a3 .a3-hero .t7-gt{color:#bdbdbd}
:root:root .th-a3 .a3-hero .t7-l b,:root:root .th-a3 .a3-hero .t7-l a{color:#ededed}
:root:root .th-a3 .a3-hero .np-form{margin-top:12px!important}
:root:root .th-a3 .a3-hero .np-chips{border-top:0;padding-top:0;margin-top:12px;justify-content:flex-start}
/* hero tags: two groups (label + 3 tags, then 4) laid out like the row itself; they share one row when it fits, else break 3 + 4 */
:root:root .th-a3 .a3-hero .np-grp{display:flex;flex-wrap:wrap;align-items:center;gap:inherit}
@media(min-width:900px){
 :root:root .th-a3 .a3-hero.hp-v-7x>.t7-char{width:calc(var(--np-char)*.83*.52)!important}
 :root:root .th-a3 .a3-hero h1.n9-h1 .a3-lead{white-space:nowrap}
 /* the cue's lift above the status bar on short screens (or no cue, if there's no room) is a3.js's (desktop-check 1023) */
 :root:root .th-a3 .a3-hero .hp-cue{left:50%;width:min(600px,100%);bottom:14px;transform:translate(-50%,-36px);box-sizing:border-box}
}
@media(max-width:899.98px){
 /* sizes stay at the 50882c0f phone: 64px numpty, headline clamp(32px, 9.2vw, 40px).
    one 8px step between headline, subline, numpty, the lines and the ask box.
    the try: row is gone and that band stays empty, down to the cue. */
 :root:root .th-a3 .a3-hero.hp-hero{justify-content:flex-start!important;padding-top:calc(var(--ax-tabh,40px) + 86px)!important;padding-bottom:8px!important;--a3-step:8px}
 :root:root .th-a3 .a3-hero .a3-date{white-space:nowrap}
 :root:root .th-a3 .a3-hero>.t7-copy{width:100%!important;align-self:stretch;margin:0!important}
 :root:root .th-a3 .a3-hero h1.n9-h1{width:100%;max-width:100%;align-self:stretch;font-size:clamp(32px,9.2vw,40px)!important;margin:0 0 var(--a3-step)!important;line-height:1.05!important}
 :root:root .th-a3 .a3-hero h1.n9-h1 .a3-q,:root:root .th-a3 .a3-hero h1.n9-h1 .a3-punch{display:block}
 :root:root .th-a3 .a3-hero h1.n9-h1 .a3-sub{font-size:13px!important;line-height:1.35;margin-top:var(--a3-step)}
 :root:root .th-a3 .a3-hero>.t7-char,:root:root .th-a3 .a3-hero.hp-v-9:not(.hp-v-9d)>.t7-char{width:64px!important;margin:0 0 var(--a3-step)!important}
 :root:root .th-a3 .a3-hero .t7-bub{width:100%!important;align-self:stretch}
 :root:root .th-a3 .a3-hero .t7-l{font-size:13.5px;animation:none!important;opacity:1!important;transform:none!important}
 :root:root .th-a3 .a3-hero .np-form{margin-top:var(--a3-step)!important}
 :root:root .th-a3 .a3-hero .np-chips,:root:root .th-a3 .a3-hero .a3-or{display:none!important}
 :root:root .th-a3 .a3-hero .hp-cue{left:16px;right:16px;bottom:14px;width:auto;transform:none!important;text-align:center}
}
/* desktop column: the lines, the ask box and the try row share one width, the headline's
   ink width (--a3-col, set from the measured dots). centred by the flex column, not by a
   transform, so it cannot slide in after load. before the script runs the fallback is that ink estimated from the h1 size
   (about 13.2em of it, capped at the old 836px, which is right at 1280), so the answer lines wrap the same and nothing
   shifts when --a3-col lands (was a flat 836px: CLS at 1024). */
@media(min-width:1000px){
 :root:root .th-a3 .a3-hero>.t7-copy,:root:root .th-a3 .a3-hero .t7-bub{width:var(--a3-col,min(836px,calc(clamp(48px,5vw,68px)*13.2)))!important;max-width:100%!important}
}
/* ---- vs guides (seo_guides.py vs block -> v_a3._vs): an 'X vs Y' guide opens with a pane grid (answer.txt, one pane
   per tool, who-wins.txt, diff.csv, neither.txt, links/), then the guide prose in its own page pane. same panes, labels,
   greys and type as the tool pages; nothing here is new colour. widths: 12-col grid, tools and the last two side by side. */
.th-a3 .a3-vg{margin:34px 0 0}
.th-a3 .a3-vg>.vs-6{grid-column:span 6!important}
.th-a3 .a3-vg>.vs-12{grid-column:1/-1!important}
.th-a3 .a3-vg h2{margin-top:0!important}
.th-a3 .a3-vg .vs-q{font-family:'JetBrains Mono',monospace;font-size:13px;color:#8a8a8a;margin:0 0 6px}
.th-a3 .a3-vg .vs-q .pr{color:#ededed}
.th-a3 .a3-vg .vs-ans{font-family:Inter,system-ui,sans-serif;font-size:clamp(20px,2.2vw,26px);line-height:1.4;color:#ededed;margin:6px 0 4px;font-weight:600;letter-spacing:-.01em;max-width:none}
.th-a3 .a3-vg .vs-ans b{color:#fff;border-bottom:1px solid #6f6f6f}
.th-a3 .a3-vg .vs-sub{margin:10px 0 0}
.th-a3 .a3-vg .vs-rk{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:#8a8a8a;margin:0 0 6px}
.th-a3 .a3-vg h2.vs-tn{display:flex;align-items:center;gap:12px;margin:0 0 14px!important}
.th-a3 .a3-vg .vs-tn .mono{margin:0}
.th-a3 .a3-vg .vs-tn .mono img{width:36px;height:36px;border-radius:6px;filter:grayscale(1);transition:filter .25s}
.th-a3 .a3-vg .vs-p:is(:hover,:focus-within) .vs-tn .mono img{filter:none}
.th-a3 .a3-vg .vs-dl{display:grid;grid-template-columns:11ch 1fr;gap:8px 14px;margin:14px 0 0;font-size:15px}
.th-a3 .a3-vg .vs-dl dt{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:#8a8a8a;padding-top:2px}
.th-a3 .a3-vg .vs-dl dd{margin:0;color:#cfcfcf}
.th-a3 .a3-vg .vs-go{margin:16px 0 0}
.th-a3 .a3-vg .vs-rows{margin:6px 0 0}
.th-a3 .a3-vg .vs-r{display:grid;grid-template-columns:30% 1fr;gap:6px 18px;padding:13px 0;border-top:1px dashed #262626}
.th-a3 .a3-vg .vs-r:first-child{border-top:0}
.th-a3 .a3-vg .vs-r3{grid-template-columns:22% 1fr 1fr}
.th-a3 .a3-vg .vs-r p{margin:0}
.th-a3 .a3-vg .vs-k{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:#8a8a8a;padding-top:3px}
.th-a3 .a3-vg .vs-v{color:#cfcfcf;font-size:15px;line-height:1.5}
.th-a3 .a3-vg .vs-hd{border-bottom:1px solid #2b2b2b}
.th-a3 .a3-vg .vs-hd .vs-v{font-family:'JetBrains Mono',monospace;color:#ededed;font-weight:600;font-size:13px}
.th-a3 .a3-vg .vs-mh{display:none}
.th-a3 .a3-vg .vs-win{margin:0 0 2px!important;font-family:'JetBrains Mono',monospace;font-weight:700;color:#ededed}
.th-a3 .a3-vg .vs-win:before{content:"-> ";color:#6f6f6f}
.th-a3 .a3-vg .vs-note{font-family:'JetBrains Mono',monospace;font-size:12px;color:#6f6f6f;margin:10px 0 0}
.th-a3 .a3-vg .vs-nei a{display:block}
.th-a3 .a3-vg .vs-ns{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:#8a8a8a;margin-left:6px}
.th-a3 .a3-vg .vs-nb{display:block;font-size:14px;margin-top:4px}
.th-a3 .a3-vg :is(.vs-q,.vs-rk,.vs-k,.vs-win,.vs-note,.vs-dl dt,.vs-ns){font-variant-ligatures:none;font-feature-settings:'liga' 0,'calt' 0}
.th-a3 main.lp>.a3-vg+.a3-w-pg{margin-top:44px!important}
@media(max-width:760px){
 .th-a3 .a3-vg>.vs-6{grid-column:1/-1!important}
 .th-a3 .a3-vg .vs-r{grid-template-columns:1fr}
 .th-a3 .a3-vg .vs-r3{grid-template-columns:1fr 1fr}
 .th-a3 .a3-vg .vs-r3 .vs-k{grid-column:1/-1}
 .th-a3 .a3-vg .vs-hd{display:none!important}
 .th-a3 .a3-vg .vs-mh{display:block;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#6f6f6f;margin-bottom:2px}
 .th-a3 .a3-vg .vs-dl{grid-template-columns:9ch 1fr}
}
:root:root:root body.th-a3 main.lp>.a3-vg{max-width:none!important}
:root:root:root body.th-a3 main.lp>h1.vs-h1{max-width:none!important;display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
.th-a3 main.lp>h1.vs-h1 .mono{margin:0}
.th-a3 main.lp>h1.vs-h1 .vs-vs{font-family:'JetBrains Mono',monospace;color:#6f6f6f;font-size:.55em;font-weight:500}
.th-a3 .a3-vg .vs-nei a .vs-ns{display:inline-block}
.th-a3 .a3-vg .vs-nei a .vs-nb{display:inline-block;width:100%}
@media(max-width:760px){.th-a3 main.lp>h1.vs-h1 .mono img{width:30px;height:30px}}
/* long pricing-source urls (developers.openai.com/codex/pricing) must wrap, not widen the page on phones */
.th-a3 .a3-vg .vs-r{grid-template-columns:30% minmax(0,1fr)}
.th-a3 .a3-vg .vs-r3{grid-template-columns:22% minmax(0,1fr) minmax(0,1fr)}
.th-a3 .a3-vg .vs-v{overflow-wrap:anywhere}
@media(max-width:760px){.th-a3 .a3-vg .vs-r{grid-template-columns:minmax(0,1fr)}.th-a3 .a3-vg .vs-r3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* x-link: the X mark at the right end of the top bar (every size). one icon, no box: #ededed, white + soft glow on hover/focus */
.th-a3 .nav .row>.ax-x{display:inline-flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;margin-left:4px;color:#ededed;text-decoration:none;transition:color .15s,filter .15s}
.th-a3 .nav .row>.ax-hd{margin-left:auto}
.th-a3 .nav .row>.ax-x svg{display:block;width:15px;height:15px}
.th-a3 .nav .row>.ax-x:hover,.th-a3 .nav .row>.ax-x:focus-visible{color:#fff;filter:drop-shadow(0 0 6px rgba(255,255,255,.45))}
.th-a3 .nav .row>.ax-x:focus-visible{outline:2px solid #ededed;outline-offset:2px}
@media (max-width:699.98px){
 .th-a3 .nav .row>.ax-x{width:44px;height:44px;margin:0 4px 0 auto}
 /* phone footer: every footer link, wrapped (2026-10-20: the '...' menu now mirrors the desktop nav only, so the footer
    is where new launches, badges, makers, sponsor, how we score, llms.txt and sitemap live on phones too) */
 .th-a3 .fl.a3-fl{margin:0}
 .th-a3 .foot .foot-disc{margin-bottom:4px}
 .th-a3 .fl.a3-fl>.nw{padding-right:18px}
 .th-a3 .fl.a3-fl>.nw::after{right:6px}
 .th-a3 .fl.a3-fl>.nw:last-child{padding-right:0}
 .th-a3 .foot .signoff{margin-top:6px}
}
@media (prefers-reduced-motion:reduce){.th-a3 .nav .row>.ax-x{transition:none}}

/* ===================== spacing tidy (oct 19): one rhythm, one scale (4/8/12/16/24/32/48/64/96/120) =====================
   spacing and type size only; looks, fonts, borders, copy and the homepage first screen are untouched.
   section gap: 96 between sections everywhere (64 phones), side-by-side 24 (Andrew, Oct 20 6:14 PM ET). homepage uses
   --sp-sec, every other page (vs guides and /community/ included) --sp-pg; both are 96/64. side-by-side --sp-col;
   box heading -> body 24 (phone 16);
   box padding 32 (phone 24/20); homepage secondary copy 15/24; guide reading column 640. */
.th-a3{--sp-sec:96px;--sp-pg:96px;--sp-col:24px;--sp-hd:24px;--sp-top:48px}
@media(max-width:699.98px){.th-a3{--sp-sec:64px;--sp-pg:64px;--sp-col:0px;--sp-hd:16px;--sp-top:32px}}

/* 1. section gaps */
:root:root:root:root body.th-a3.home .a3-grid{row-gap:var(--sp-sec)!important;column-gap:var(--sp-col)!important;padding-top:var(--sp-sec)!important;margin-bottom:var(--sp-sec)!important}
:root:root:root:root body.th-a3:not(.home) .a3-grid{row-gap:var(--sp-pg)!important;column-gap:var(--sp-col)!important;margin-top:var(--sp-top)!important;margin-bottom:0!important}
:root:root:root:root body.th-a3 .a3-w-pg{margin-top:var(--sp-top)!important;margin-bottom:0!important}
:root:root:root:root body.th-a3 main.lp>.a3-vg+.a3-w-pg{margin-top:var(--sp-pg)!important}
:root:root:root:root body.th-a3 .foot{padding-top:var(--sp-pg)!important}
:root:root:root:root body.th-a3.home .foot{padding-top:0!important}

/* 2. one gap under every box heading */
:root:root:root:root body.th-a3 .a3-p :is(h2,.a3-sbh){margin-bottom:var(--sp-hd)!important}
:root:root:root:root body.th-a3 .a3-p :is(h2,.a3-sbh)+*{margin-top:0!important}
:root:root:root:root body.th-a3 .a3-p :is(h2,.a3-sbh)+.cc{padding-top:0!important}
:root:root:root:root body.th-a3 .a3-p .a3-sbh h2{margin-bottom:0!important}
:root:root:root:root body.th-a3 .a3-p :is(h2,h3):first-of-type{margin-top:0!important}
:root:root:root:root body.th-a3 .a3-w-pg>h2{margin-top:64px!important}
:root:root:root:root body.th-a3 .a3-w-pg>h2+:is(p,ul,ol,.box,.tblwrap){margin-top:0!important}
@media(max-width:699.98px){:root:root:root:root body.th-a3 .a3-w-pg>h2{margin-top:48px!important}}
:root:root:root:root body.th-a3 main>h1{margin:0 0 16px!important}
:root:root:root:root body.th-a3 main>h1+p.updated{margin:0!important}
@media(max-width:699.98px){:root:root:root:root body.th-a3 main>h1{margin-bottom:12px!important}}

/* 3. even box padding */
:root:root:root:root body.th-a3 :is(.a3-p,.digest.sm,.foot-disc,.cframe){padding:32px!important}
@media(max-width:699.98px){
 :root:root:root:root body.th-a3 :is(.a3-p,.digest.sm,.foot-disc,.cframe){padding:24px 20px!important}
 /* 20px box sides and a 12px page edge keep 324px of text at 390 */
 :root:root:root:root body.th-a3 main.wrap,:root:root:root:root body.th-a3 main>.wrap:not(.hp-hero),:root:root:root:root body.th-a3 .wrap.foot{padding-left:12px!important;padding-right:12px!important}
}

/* 4. snap the leftovers to the scale */
:root:root:root:root body.th-a3 .a3-ro-i{padding:24px!important}
:root:root:root:root body.th-a3 .a3-ro-i:first-child{padding-left:0!important}
@media(max-width:899.98px){:root:root:root:root body.th-a3 .a3-ro-i{padding:24px 0!important}:root:root:root:root body.th-a3 .a3-ro-i:nth-child(even){padding-left:24px!important}}
:root:root:root:root body.th-a3 .cc{padding-top:16px!important;padding-bottom:12px!important}
:root:root:root:root body.th-a3 #releases .cc-cmdc{margin:0 0 8px!important}
:root:root:root:root body.th-a3 .a3-w-pg .cc-toc-c{margin:24px 0!important}
:root:root:root:root body.th-a3 :is(.card.panel.tap,.cm-tap,.ps-link.card.panel,.glinks a){padding:12px 16px!important}
:root:root:root:root body.th-a3 :is(.glinks,.glist,.alt3){gap:8px!important}
:root:root:root:root body.th-a3 .a3-w-pg>:is(p:not(.a3-lb):not(.updated),ul,ol){margin-top:16px;margin-bottom:16px}
:root:root:root:root body.th-a3 .a3-p .a3-tbl td,:root:root:root:root body.th-a3 .a3-prices td{padding-top:12px!important;padding-bottom:12px!important}
:root:root:root:root body.th-a3 .lt-row{padding-top:16px!important;padding-bottom:16px!important}
:root:root:root:root body.th-a3 #releases .ri{padding-top:16px!important;padding-bottom:16px!important}
:root:root:root:root body.th-a3 .foot .foot-disc{margin:0 0 16px!important}
:root:root:root:root body.th-a3 .foot .fl{margin:16px 0 8px!important}
:root:root:root:root body.th-a3 .foot .signoff{margin:8px 0 24px!important}

/* 5. homepage secondary copy 13/20 -> 15/24; guide reading column 640 */
:root:root:root:root body.th-a3.home :is(#releases .ri p.meta,.lt-nm small,.lt-note,#digest p.muted){font-size:15px!important;line-height:24px!important}
:root:root:root:root body.th-a3 main.lp:not(.ps):not(:has(.glist))>.a3-w-pg>:is(h2,h3,p:not(.a3-lb),ul,ol,dl,.box,blockquote,.lp-meta){max-width:640px!important}
/* desktop-check 1023: the reading column stays 640, but the h1 takes the card's full width (it wrapped to 5-6 lines in the left
   half with the right half empty, pushing the quick answer under the fold at 1280x800) */
:root:root:root:root body.th-a3 main.lp:not(.ps):not(:has(.glist))>.a3-w-pg>h1{max-width:none!important}
/* spacing tidy, round 2: fixes after measuring */
:root:root:root:root body.th-a3 #league>aside.hp-stick{padding:32px!important}
@media(max-width:699.98px){:root:root:root:root body.th-a3 #league>aside.hp-stick{padding:24px 20px!important}}
:root:root:root:root:root body.th-a3 .a3-p :is(h2,.a3-sbh)+.cc{padding-top:0!important}
:root:root:root:root body.th-a3 .digest :is(h2,h3){margin:0 0 var(--sp-hd)!important}
:root:root:root:root body.th-a3 .digest :is(h2,h3)+p{margin-top:0!important}
:root:root:root:root body.th-a3 section.pick.card.panel{padding:32px!important}
@media(max-width:699.98px){:root:root:root:root body.th-a3 section.pick.card.panel{padding:24px 20px!important}}
:root:root:root:root body.th-a3 main>h1.cw-line{margin:0!important}
/* pages: the bits after main (weekly box, footer) sit one section gap apart */
:root:root:root:root body.th-a3:not(.home) main{padding-bottom:0!important;margin-bottom:0!important}
:root:root:root:root body.th-a3:not(.home) main~.wrap>.digest{margin:var(--sp-pg) 0 0!important}
@media(max-width:699.98px){
 :root:root:root:root body.th-a3 :is(main.lp,main.wrap,main>.wrap:not(.hp-hero),body>.wrap,.wrap.foot){padding-left:12px!important;padding-right:12px!important}
}
:root:root:root:root body.th-a3:not(.home) :is(main,article)>.a3-grid+:is(p,.man){margin-top:var(--sp-hd)!important;margin-bottom:0!important}
:root:root:root:root body.th-a3:not(.home) main>.a3-w-ps{margin-top:var(--sp-pg)!important}
/* round 4: card titles inside a box are not box headings; keep them tight */
:root:root:root:root body.th-a3 .a3-p .card :is(h2,h3){margin-bottom:8px!important}
/* round 5 (oct 19, pre-live): /new/ header on the scale, and no double gap under box headings */
/* /new/ (Andrew, pre-live): title + sub sit in a new.md page pane like guides.md / partners.md; then the chart and
   launches.log panes one inner-page section gap apart (96, phone 64); 'see the rankings' 24 (16) under the log.
   inside the log: the `$ git log --launches` card is the /guides/ command card; scale gaps 8/16/24 */
:root:root:root:root body.th-a3 .nl>.a3-w-nh{margin-top:var(--sp-top)!important;margin-bottom:0!important}
:root:root:root:root body.th-a3 .nl .a3-w-nh .nl-sub{margin-bottom:0!important}
:root:root:root:root body.th-a3 .nl .a3-w-hg{margin:var(--sp-pg) 0 0!important}
:root:root:root:root body.th-a3 .nl .a3-w-gl{margin-top:var(--sp-pg)!important}
:root:root:root:root body.th-a3 .nl .glog{margin:0!important;padding:0!important}
:root:root:root:root body.th-a3 .nl .glog>.cc-gl{margin:0 0 24px!important}
:root:root:root:root body.th-a3 .nl .glog-day{margin:0 0 24px!important}
:root:root:root:root body.th-a3 .nl .glog-day:last-child{margin-bottom:0!important}
:root:root:root:root body.th-a3 .nl .rel-more{margin:var(--sp-hd) 0 0!important}
:root:root:root:root body.th-a3 .nl .a3-w-nh .nl-sub{color:#c1c1c1!important}
/* log entries read like guide body text (16/25.6 #c1c1c1); day headings are row-group labels, so they stay tight like card titles */
:root:root:root:root body.th-a3 .nl .glog .ri .meta{font-size:16px!important;line-height:25.6px!important;color:#c1c1c1!important}
:root:root:root:root body.th-a3 .nl .glog .glog-h{margin-bottom:4px!important}
/* elements with their own top padding straight under a box heading start flush, so heading -> content reads 24 (phone 16).
   (#a3-x never exists: it only lifts these over the old ':root :is(.cc,...,#specs ...)' padding rule, which carries an id) */
:root:root:root:root body.th-a3 .a3-p :is(h2,.a3-sbh)+:is(.cc,#a3-x){padding-top:0!important}
:root:root:root:root body.th-a3 .a3-p :is(h2,.a3-sbh)+.ns.big{padding-top:0!important}
:root:root:root:root body.th-a3 .a3-p :is(h2,.a3-sbh)+.vs-rows>.vs-r:first-child{padding-top:0!important}
:root:root:root:root body.th-a3 .a3-p :is(h2,.a3-sbh)+table>:is(thead,tbody):first-child>tr:first-child>:is(th,td){padding-top:0!important}
/* theme audit (oct 19): every inner page gets the /guides/ + /partners/ structure. crumbs, then the title in a <page>.md
   page pane (tool, category, vs guide, 404, community now too), then the content panes one inner-page gap apart (96 / 64),
   then the weekly box and the footer at the same gap. spacing and structure only; copy and data unchanged. */
:root:root:root:root body.th-a3:not(.home) :is(main,article)>.a3-w-ttl+.a3-grid{margin-top:var(--sp-pg)!important}
:root:root:root:root body.th-a3:not(.home) :is(main,article)>.a3-p+.a3-p{margin-top:var(--sp-pg)!important}
:root:root:root:root body.th-a3:not(.home) main>article>.a3-w-ttl{margin-top:var(--sp-top)!important;margin-bottom:0!important}
:root:root:root:root:root body.th-a3:not(.home) main>section#digest.a3-w-dg{margin:var(--sp-pg) 0 0!important}
/* the title pane reads like guides.md: h1 at the guide size, meta line 8 under it, no old h1/man margins */
:root:root:root:root body.th-a3 .a3-w-ttl>h1{margin:0!important}
:root:root:root:root body.th-a3 .a3-w-ttl>p.man{margin:0 0 24px!important}
:root:root:root:root body.th-a3 .a3-w-ttl>h1+p.updated{margin:8px 0 0!important;color:#c1c1c1!important}
@media(max-width:699.98px){:root:root:root:root body.th-a3 .a3-w-ttl>p.man{margin-bottom:16px!important}}
/* phones: the 'last updated / rank / USD, before tax' meta line is shown again (audit 2026-10-20; style.css used to hide it at
   <=480px). mono 12px/20px like the hero line; balanced wrapping so a lone 'is this your tool?' doesn't hang on its own */
@media(max-width:480px){:root:root:root:root body.th-a3 main p.updated{display:block!important;font-family:var(--mono)!important;font-size:12px!important;line-height:20px!important;text-wrap:pretty}}
/* prices.md now sits inside the tool / category grid: full width on tools, next to sponsor.txt on categories */
:root:root:root:root body.th-a3 .a3-grid>.a3-w-ps{margin-top:0!important}
:root:root:root:root body.th-a3 .a3-tg>.a3-w-ps{grid-column:1/-1!important}
:root:root:root:root body.th-a3 .a3-cg>.a3-w-ps{grid-column:span 8!important}
@media(max-width:1099.98px){:root:root:root:root body.th-a3 .a3-cg>.a3-w-ps{grid-column:span 6!important}:root:root:root:root body.th-a3 .a3-cg>.a3-w-spn{grid-column:span 6!important}}
@media(max-width:699.98px){:root:root:root:root body.th-a3 .a3-cg>:is(.a3-w-ps,.a3-w-spn){grid-column:1/-1!important}}
/* one sub colour on every page pane (guides.md's #c1c1c1; partners, makers and badges were #a4a4a4) */
:root:root:root:root body.th-a3:not(.home) .a3-w-pg>p.sub{color:#c1c1c1!important}
/* 404: the pane is centred copy like before, on the scale */
:root:root:root:root body.th-a3 .a3-w-404>.b-404{display:block;margin:0 auto 24px!important}
:root:root:root:root body.th-a3 .a3-w-404{text-align:center}
:root:root:root:root body.th-a3 .a3-w-404>.cc-404{text-align:left}
:root:root:root:root body.th-a3 .a3-w-404>h1{text-wrap:balance;margin:0 0 24px!important;font-size:clamp(34px,4.6vw,60px)!important;line-height:1.02!important}
:root:root:root:root body.th-a3 .a3-w-404>.cc-404{margin:0 auto!important}
:root:root:root:root body.th-a3 .a3-w-404>.cc-404+p{margin:24px 0 0!important}
/* crumbs sit the same distance under the tabs on every inner page (phones: main.page had -6, main.lp 14; guides wins) */
@media(min-width:700px){:root:root:root:root body.th-a3:not(.home) main:is(.lp,.page){padding-top:28px!important}}
@media(max-width:699.98px){:root:root:root:root body.th-a3:not(.home) main:is(.lp,.page){padding-top:20px!important}}
/* long source urls in guide prose wrap instead of pushing the page sideways at 320 */
:root:root:root:root body.th-a3 .a3-w-pg :is(p,li,td,dd) a{overflow-wrap:anywhere}
/* long pane labels (guides/<long-slug>.md) trail off on phones instead of pushing the page sideways */
@media(max-width:699px){:root:root body.th-a3 .a3-p>.a3-lb{display:block;overflow:hidden;text-overflow:ellipsis;left:6px;right:auto;max-width:calc(100% - 18px);box-sizing:border-box;padding:0 0 0 4px;line-height:15px}
:root:root body.th-a3 .a3-p>.a3-lb .a3-dot{display:inline-block;vertical-align:1px;margin-right:10px}
:root:root body.th-a3 .a3-p>.a3-lb .a3-hr{margin-left:10px}}

/* 2026-10-20 homepage polish (Andrew): league table condensed + centred, tool of the week gone, prices.csv capped with a
   'see every price ->' link, fresh out the oven fills its pane next to the prices */
/* league.txt: full width, one centred reading column; rows are rank, tool, score */
@media(min-width:1100px){:root:root:root body.th-a3 .a3-grid .a3-w-lg.a3-lgc{grid-column:1/-1!important}}
:root:root:root body.th-a3 .a3-w-lg.a3-lgc>:not(.a3-lb){max-width:720px;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box}
:root:root:root body.th-a3 .a3-w-lg.a3-lgc>.lt{width:100%}
:root:root:root:root body.th-a3 .a3-w-lg.a3-lgc .lt-row{grid-template-columns:3ch minmax(0,1fr) auto!important;grid-template-rows:auto!important;column-gap:20px;padding:16px 0!important}
:root:root:root:root body.th-a3 .a3-w-lg.a3-lgc .lt-row>.lt-pts{grid-column:3!important;grid-row:1!important}
:root:root:root:root body.th-a3 .a3-w-lg.a3-lgc .lt-row:first-child .lt-pts{font-size:30px!important}
:root:root:root body.th-a3 .a3-w-lg.a3-lgc .a3-lt-more{display:block!important;margin:22px 0 0!important}
/* prices.csv: capped rows, then the link */
:root:root:root body.th-a3 .a3-prices .a3-pr-more{margin:20px 0 0!important}
/* 'see every price ->' is underlined like 'see the full rankings ->' and 'see more launches ->' (the prices.csv link rule
   above, text-decoration:none, was hiding that it's a link) */
:root:root:root:root body.th-a3 .a3-prices .a3-pr-more a.lnk{text-decoration:underline}
/* fresh out the oven (wide screens): the pane stretches to the prices pane beside it and the reel's box fills it */
@media(min-width:1100px){
 :root:root:root body.th-a3.home .a3-w-rl{display:flex!important;flex-direction:column}
 :root:root:root body.th-a3.home .a3-w-rl>.a3-scr{flex:1 1 0;min-height:260px;max-height:none}
 :root:root:root body.th-a3.home .a3-w-rl>.rel-more{margin-top:auto!important;padding-top:14px}
}
/* 2026-10-20 (Andrew: "fresh out the oven doesn't fit its box"): inside the reel every entry is the same height, so the
   box always shows whole entries: the title stays on one line, the summary keeps --ri-l lines (3, more when a wide pane
   has room) and each entry is --ri-h tall (both set by a3.js, which fits k whole entries to the box). */
:root:root:root:root body.th-a3 #releases .a3-scr .ri{height:var(--ri-h,auto);box-sizing:border-box;align-content:start}
:root:root:root:root body.th-a3 #releases .a3-scr .ri>h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root:root:root:root body.th-a3 #releases .a3-scr .ri>.meta{-webkit-line-clamp:var(--ri-l,3);line-clamp:var(--ri-l,3);min-height:calc(var(--ri-l,3) * 1lh)}

/* 2026-10-20 (Andrew: "the prices info doesn't fill the box it's in"): prices.csv is two columns. the pick sits over its
   category (bold line + grey small line, same rhythm as the price cell), so both sides of a row are filled and the price
   column gets the width back. on wide screens the pane is a flex column and 'see every price ->' sits on the bottom edge,
   level with 'see more launches ->' next door */
:root:root:root:root body.th-a3 .a3-prices th:nth-child(1){width:34%!important}
:root:root:root:root body.th-a3 .a3-prices th:nth-child(2){width:auto!important}
:root:root:root:root body.th-a3 .a3-prices .a3-th2{color:#5c5c5c}
:root:root:root:root body.th-a3 .a3-prices .a3-pk a{display:block;text-decoration:none}
:root:root:root:root body.th-a3 .a3-prices .a3-pk .a3-pt{color:#ededed;font-weight:600}
:root:root:root:root body.th-a3 .a3-prices .a3-pk .a3-pc{color:#8a8a8a;font:500 11.5px/1.45 var(--mono);margin-top:3px}
:root:root:root:root body.th-a3 .a3-prices tr:hover .a3-pk .a3-pc{color:#cfcfcf}
:root:root:root:root body.th-a3 .a3-prices .a3-pk a:hover{text-decoration:underline}
@media(max-width:899.98px){:root:root:root:root body.th-a3 .a3-prices th:nth-child(1){width:32%!important}}
@media(min-width:1100px){
 :root:root:root:root body.th-a3.home .a3-w-pr{display:flex!important;flex-direction:column}
 :root:root:root:root body.th-a3.home .a3-w-pr>table{flex:0 0 auto}
 :root:root:root:root body.th-a3.home .a3-w-pr>.a3-pr-more{margin:auto 0 0!important;padding-top:14px}
}
/* how we rank: one quiet line under the league table's subtitle (the old full-width how-we-rank.md pane is gone) */
:root:root:root:root body.th-a3 .a3-w-lg .a3-lt-how{font:500 12.5px/1.6 var(--mono);color:#8a8a8a;margin:10px auto 0!important;padding:0!important;border:0!important;scroll-margin-top:120px}
:root:root:root:root body.th-a3 .a3-w-lg .a3-lt-how .lnk{font-size:12.5px;white-space:nowrap;margin-left:4px}
/* vs guides (Andrew, Oct 20 6 PM ET): the same inner-page gap as every other page (--sp-pg, 96, phones 64) between every
   box, title pane -> answer.txt -> tool panes -> ... -> full-guide.md -> weekly -> footer, and --sp-col (24) between
   side-by-side panes. the title pane is full width like every other box, and on phones the title and full-guide panes get
   the same full border and 24/20 padding as the boxes around them. */
:root:root:root:root:root body.th-a3:not(.home) main>.a3-w-vt+.a3-grid.a3-vg{margin-top:var(--sp-pg)!important;row-gap:var(--sp-pg)!important;column-gap:var(--sp-col)!important}
:root:root:root:root:root body.th-a3:not(.home) main>.a3-vg+.a3-w-pg{margin-top:var(--sp-pg)!important}
:root:root:root:root:root body.th-a3:not(.home):has(main>.a3-w-vt) main~.wrap>.digest{margin:var(--sp-pg) 0 0!important}
:root:root:root:root:root body.th-a3:not(.home):has(main>.a3-w-vt) .foot{padding-top:var(--sp-pg)!important}
/* whole-site audit (Andrew, Oct 20 6:20 PM ET: every box meets the standard). page / title panes (<page>.md: tool,
   category, guides, how-we-score, stack, legal, 404, community...) were borderless with no side padding on phones; they
   now get the same full border and 24/20 padding as every other box (was vs guides only) */
@media(max-width:699.98px){
 :root:root:root:root:root:root body.th-a3 .a3-p.a3-w-pg{border-left:1px solid var(--a3-ln)!important;border-right:1px solid var(--a3-ln)!important;padding:24px 20px!important}
}
/* box heading -> body is --sp-hd (24, phones 16): the intro line under a page h1, the body under the 'updated' meta line,
   the 404 heading */
:root:root:root:root:root body.th-a3 .a3-w-pg>h1+p.sub{margin-top:var(--sp-hd)!important}
:root:root:root:root:root body.th-a3 .a3-w-pg>p.updated{margin-bottom:var(--sp-hd)!important}
:root:root:root:root:root body.th-a3 .a3-w-pg>p.updated:last-child{margin-bottom:0!important}
:root:root:root:root:root body.th-a3 .a3-w-pg>p.updated+:is(p,ul,ol,div,section,nav){margin-top:0!important}
:root:root:root:root:root body.th-a3 .a3-w-404>h1{margin-bottom:var(--sp-hd)!important}
/* box padding is the whole inset (32, phones 24/20): the first thing in a box has no top margin and the last thing no
   bottom margin, so an h1's 8px or a closing paragraph's 16px no longer pads the box out (audit: title panes were 40/48
   inside, prose panes 48 at the bottom). the pane label (.a3-lb) sits on the border and doesn't count */
:root:root:root:root:root:root body.th-a3 :is(.a3-p,.digest.sm)>:is(:first-child:not(.a3-lb),.a3-lb:first-child+*){margin-top:0!important}
:root:root:root:root:root:root body.th-a3 :is(.a3-p,.digest.sm)>:last-child{margin-bottom:0!important}
:root:root:root:root:root:root body.th-a3 :is(.a3-p,.digest.sm)>:last-child>:last-child{margin-bottom:0!important}
/* specs pane on phones: the intro line is hidden there, so the sheet is the first thing in the box */
@media(max-width:480px){:root:root:root:root:root:root body.th-a3 .a3-p>.specs-in+.sheet{margin-top:0!important}}
/* a half-width pane whose partner isn't on the page spans the row (full width): alternatives/ without guides/ on tool
   pages, sponsor.txt without prices.md on category pages, and the reverse */
:root:root:root:root:root body.th-a3 .a3-tg:not(:has(>.a3-w-gd))>.a3-w-al,
:root:root:root:root:root body.th-a3 .a3-tg:not(:has(>.a3-w-al))>.a3-w-gd,
:root:root:root:root:root body.th-a3 .a3-cg:not(:has(>.a3-w-spn))>.a3-w-ps,
:root:root:root:root:root body.th-a3 .a3-cg:not(:has(>.a3-w-ps))>.a3-w-spn{grid-column:1/-1!important}
:root:root:root:root:root:root:root body.th-a3 main.lp>.a3-w-pg.a3-w-vt>:is(h1,p.updated){max-width:none!important}
:root:root:root:root:root body.th-a3 main>.a3-w-vt>h1.vs-h1{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
.th-a3 main>.a3-w-vt>h1.vs-h1 .mono{margin:0}
.th-a3 main>.a3-w-vt>h1.vs-h1 .vs-vs{font-family:'JetBrains Mono',monospace;color:#6f6f6f;font-size:.55em;font-weight:500}
:root:root:root:root:root:root:root body.th-a3 main.lp>.a3-w-pg.a3-w-vt>h1{text-wrap:wrap}
.th-a3 main>.a3-w-vt>h1.vs-h1 .vs-sd{display:inline-flex;align-items:center;gap:14px}
@media(max-width:760px){
 .th-a3 main>.a3-w-vt>h1.vs-h1 .vs-sd{gap:10px}
 :root:root:root body.th-a3 main>.a3-w-vt>h1.vs-h1 .mono.lg{width:40px!important;height:40px!important;padding:5px!important}
}
/* ===== hero-box-b (Andrew, Oct 22: "put the search hero ... in a box, like the platinum windows"): numpty's lines, the ask box
   and the try: row are one window (v_a3._home: pane(.t7-copy, "ask.sh", "a3-w-ask")), the same .a3-p frame, bevel, offset
   shadow, title bar and 32px inset (phones 24/20) as rankings.txt and the other homepage windows. the headline, subline,
   numpty, the dot field and the ghost terminal stay open on the page. the window keeps the live column's outer width (the
   headline's ink width on desktop, --a3-col), so its frame lines up under the headline's first and last dots; one 24px
   step (phones 16) between numpty and the window so the title bar has room */
:root:root:root:root:root:root body.th-a3 .a3-hero>.t7-copy.a3-w-ask{box-sizing:border-box}
:root:root:root:root:root:root body.th-a3 .a3-hero>.t7-copy.a3-w-ask .t7-bub{width:100%!important}
:root:root:root:root:root:root body.th-a3 .a3-hero>.t7-char{margin-bottom:var(--sp-hd,24px)!important}
@media(max-width:899.98px){
 :root:root:root:root:root:root body.th-a3 .a3-hero>.t7-char,:root:root:root:root:root:root body.th-a3 .a3-hero.hp-v-9:not(.hp-v-9d)>.t7-char{margin-bottom:16px!important}
}
/* phones: the hero's side padding is the page's 12px edge (was 16), so the window lines up with the board's windows below
   and keeps their 324px of text at 390 (the ask box's placeholder fits in full) */
@media(max-width:699.98px){
 :root:root:root:root:root:root body.th-a3 section.a3-hero.hp-hero:has(>.a3-w-ask){padding-left:12px!important;padding-right:12px!important}
}
/* the window adds its title bar and 32px inset to the stack, so on short laptop screens (1024x768) the stack outgrew the
   hero and ran into the tab strip and the 'scroll for the good stuff' cue: the hero keeps a 24px gap under the tab strip
   and clears the cue (it grows past the screen height when it has to; tall screens are unchanged, the stack is centred) */
@media(min-width:900px){
 :root:root:root:root:root:root body.th-a3 section.a3-hero.hp-hero:has(>.a3-w-ask){padding-top:calc(var(--ax-tabh,40px) + 24px)!important;padding-bottom:104px!important}
}
/* the ghost terminal types in the band above the headline and hides itself when fewer than 3 lines fit (a3.js fit()). the
   window makes the stack taller, so on desktop screens 780px tall or more the hero keeps a band of four terminal lines above
   the headline ('$ numptr rank ...' and its top three, as live shows at 1280x800); shorter screens: no terminal, as live at 768 */
@media(min-width:900px) and (min-height:780px){
 :root:root:root:root:root:root body.th-a3 section.a3-hero.hp-hero:has(>.a3-w-ask){padding-top:136px!important}
}

/* platinum / plat-grade-b: the site skin (themes/warm.py, switched by themes/ACTIVE). mirror 1. style.css */
:root{--k-000:#e4ddcf;--k-0c0c0c:#ebe5d6;--k-111:#e7e1d2;--k-262626:#cbc5b7;--k-2b2b2b:#c4beb0;--k-333:#b7b1a5;--k-3a3a3a:#b0aa9e;--k-3d3d3d:#aea89c;--k-444:#a6a196;--k-555:#959087;--k-666:#4f4e4f;--k-777:#4f4e4f;--k-888:#4c4b4d;--k-8a8a8a:#4b4a4c;--k-999:#48474a;--k-9a9a9a:#474649;--k-a8a8a8:#434246;--k-aaa:#424145;--k-bbb:#39393e;--k-c8c8c8:#333439;--k-ccc:#313237;--k-cfcfcf:#303136;--k-d6d6d6:#2a2c32;--k-dcdcdc:#26272e;--k-ddd:#25272d;--k-e0e0e0:#23252b;--k-e3e3e3:#212229;--k-e6e6e6:#1f2026;--k-f1f1f1:#181a1f;--k-f2f2f2:#17191e;--k-f4f4f4:#16181c;--k-f5f5f5:#16181c;--k-f6f6f6:#15171b;--k-fff:#111216}
@media all{:root{--k-000:#1a1b21;--k-0c0c0c:#212229;--k-111:#24262c;--k-262626:#313237;--k-2b2b2b:#333439;--k-333:#36373b;--k-3a3a3a:#39393e;--k-3d3d3d:#3b3b3f;--k-444:#3e3e42;--k-555:#454447;--k-666:#49484b;--k-777:#4c4b4d;--k-888:#4f4e4f;--k-8a8a8a:#4f4e4f;--k-999:#4f4e4f;--k-9a9a9a:#4f4e4f;--k-a8a8a8:#908b83;--k-aaa:#918c84;--k-bbb:#9e998f;--k-c8c8c8:#aba599;--k-ccc:#aea89c;--k-cfcfcf:#b0aa9e;--k-d6d6d6:#b6b0a4;--k-dcdcdc:#beb7ab;--k-ddd:#c0b9ac;--k-e0e0e0:#c3bcaf;--k-e3e3e3:#c7c1b3;--k-e6e6e6:#cac4b6;--k-f1f1f1:#d6d0c2;--k-f2f2f2:#d8d1c3;--k-f4f4f4:#dbd4c6;--k-f5f5f5:#dbd4c6;--k-f6f6f6:#dcd5c7;--k-fff:#e7e1d2}}
body{background-image:none;background-color:var(--bg);color:var(--tx)}
a{color:inherit}
:focus-visible{outline-color:var(--inv)}
.muted{color:var(--mu)}
.nav{background-image:none;background-color:var(--k-000)}
.logo{text-decoration-color:currentcolor}
.nav nav a{text-decoration-color:currentcolor;color:var(--mu)}
.nav nav a:hover{color:var(--tx)}
.btn{background-image:none;background-color:var(--inv);color:var(--k-000)!important;border-color:var(--inv);text-decoration-color:currentcolor}
.btn:hover{background-image:none;background-color:var(--k-000);color:var(--inv)!important}
.sub{color:var(--mu)}
.sub a{color:var(--tx)}
.search input{border-color:var(--line2);background-image:none;background-color:var(--card);color:var(--tx)}
.search input::placeholder{color:var(--k-8a8a8a)}
.search input:focus{outline-color:var(--inv);border-color:var(--inv)}
.cat h2 a{text-decoration-color:currentcolor}
.cat h2 a:hover{text-decoration-color:currentcolor}
.cat h2 .all{color:var(--mu)}
.answer{color:var(--mu)}
.card{background-image:none;background-color:var(--bg);border-color:var(--line)}
.card:hover{border-color:var(--line2)}
.card.top{border-color:var(--k-8a8a8a)}
.badge{background-image:none;background-color:var(--inv);color:var(--k-000)}
.card h3 a{text-decoration-color:currentcolor}
.card h3 a:hover{text-decoration-color:currentcolor}
.v{color:var(--k-d6d6d6)}
dl.meta{color:var(--mu)}
dl.meta dt{color:var(--tx)}
.src{color:var(--mu)}
.src a{color:var(--mu)}
.tag{border-color:var(--line2);color:var(--tx)}
.ri time{color:var(--mu)}
.ri .meta{color:var(--mu)}
.sponsor{border-color:var(--line2)}
.sponsor p{color:var(--mu)}
.slbl{border-color:var(--mu)}
.digest{border-color:var(--line2)}
.digest input{border-color:var(--line2);background-image:none;background-color:var(--k-000);color:var(--tx)}
.digest input:focus{outline-color:var(--inv)}
.digest small{color:var(--mu)}
.foot{color:var(--mu)}
.foot b{color:var(--tx)}
.skip:focus{background-image:none;background-color:var(--k-fff);color:var(--k-000)}
.crumbs,.updated{color:var(--mu)}
.crumbs a{color:var(--mu)}
.updated a{color:var(--tx)}
.pick{border-color:var(--inv)}
.plbl{color:var(--mu)}
.pick h2 a{text-decoration-color:currentcolor}
.pmeta{color:var(--mu)}
.also li{border-color:var(--line)}
.also li span{color:var(--mu)}
.tw{border-color:var(--line)}
thead th{color:var(--mu);background-image:none;background-color:var(--card)}
tbody th a{text-decoration-color:currentcolor}
tbody th a:hover{text-decoration-color:currentcolor}
.tn{color:var(--mu)}
td{color:var(--k-d6d6d6)}
.nw{color:var(--mu)}
@media(max-width:640px){.tw{border-color:currentcolor}
tr{border-color:var(--line)}
th,td{border-color:currentcolor}
td:before{color:var(--tx)}}
dl.pf dd{color:var(--k-d6d6d6)}
.lnk{color:var(--tx)}
.tbl{border-color:var(--line)}
.th{color:var(--mu);background-image:none;background-color:var(--card)}
.tr summary:hover{background-image:none;background-color:var(--card)}
.bf,.pr{color:var(--k-d6d6d6)}
.tr[open] summary{background-image:none;background-color:var(--card)}
.more{background-image:none;background-color:var(--card)}
.more dd{color:var(--k-d6d6d6)}
.more dd a{color:var(--mu)}
.how ol{color:var(--mu)}
.how b{color:var(--tx)}
.sponsor a{color:var(--tx)}
dl.facts dd{color:var(--k-d6d6d6)}
dl.facts a{color:var(--tx)}
.page>p a,article p a{color:var(--tx)}
@media(max-width:640px){.tr .pr{color:var(--mu)}}
.lp p,.lp li{color:var(--k-d6d6d6)}
.lp b{color:var(--tx)}
.lp a{color:var(--tx)}
.lp thead th{background-image:none;background-color:var(--card);color:var(--mu)}
.lp .box{border-color:var(--inv)}
.fine{color:var(--mu)!important}
.unc{color:var(--mu)!important}
.btn.is-soon{background-image:none;background-color:transparent;color:var(--mu)!important;border-color:var(--line2)}
.btn.is-soon:hover{background-image:none;background-color:transparent;color:var(--mu)!important}
.tag.spon,.tag.feat{border-color:var(--mu);color:var(--tx)}
.glist a{text-decoration-color:currentcolor}
.glist a:hover{text-decoration-color:currentcolor}
.glist span{color:var(--mu)}
.sponbar{background-image:none;background-color:var(--k-000)}
.sponbar a{color:var(--tx);text-decoration-color:currentcolor}
.sponbar a:hover{text-decoration-color:currentcolor}
.fl a{color:var(--mu)}
@media(max-width:640px){.lp tbody tr{border-color:var(--line)}}
.card:hover,.pick:hover{border-color:var(--inv);background-image:none;background-color:var(--card)}
.card:hover h3 a,.pick:hover h2 a{text-decoration-color:currentcolor}
.card:focus-within,.pick:focus-within{outline-color:var(--inv)}
.card a.stretch:focus-visible,.pick a.stretch:focus-visible{outline-color:currentcolor}
.nsv{color:var(--mu)}
.ns .sc{color:var(--tx)}
.ns .sc small{color:var(--mu)}
.nsb{color:var(--tx)}
.nsr{color:var(--mu)}
.kick{color:var(--mu)}
.home{background-image:none;background-color:var(--k-fff);color:var(--k-000);background-image:radial-gradient(color-mix(in srgb,var(--k-000) 5.9%,transparent) 1px,transparent 1px)}
.home main a{color:var(--k-000)}
.home .muted,.home .sub{color:var(--k-444)}
.home .kick{color:var(--k-777)}
.hp-hero .search input{background-image:none;background-color:var(--k-fff);color:var(--k-000);border-color:var(--k-000)}
.hp-hero .search input:focus{outline-color:var(--k-000)}
.hp-opt{background-image:none;background-color:var(--k-fff);color:var(--k-000);border-color:var(--k-000)}
.hp-opt:hover{box-shadow:none}
.hp-opt.on{background-image:none;background-color:var(--k-000);color:var(--k-fff)}
.mono{background-image:none;background-color:var(--k-000);color:var(--k-fff)}
.lt{background-image:none;background-color:var(--k-000);color:var(--k-fff)}
.lt-hd{color:var(--k-aaa)}
.lt-row:hover{background-image:none;background-color:var(--k-111)}
.lt-nm a{color:var(--k-fff)!important;text-decoration-color:currentcolor}
.lt-nm small{color:var(--k-aaa)}
.lt-mv.dn{color:var(--k-999)}
.lt-note{color:var(--k-aaa)}
.sticker{background-image:none;background-color:var(--k-fff);border-color:var(--k-000);box-shadow:none}
.sticker::after{background-image:none;background-color:transparent;border-color:var(--k-bbb)}
.home .btn{background-image:none;background-color:var(--k-000);color:var(--k-fff)!important;border-color:var(--k-000)}
.home .btn:hover{background-image:none;background-color:var(--k-fff);color:var(--k-000)!important}
.home .lt .btn,.home .digest .btn{background-image:none;background-color:var(--k-fff);color:var(--k-000)!important}
.home .cat h2 a{color:var(--k-000)}
.home .cat h2 .all{color:var(--k-555)}
.card.mini{background-image:none;background-color:var(--k-fff);border-color:var(--k-000);color:var(--k-000)}
.card.mini:hover,.card.panel.tap:hover{background-image:none;background-color:var(--k-000);color:var(--k-fff)}
.card.mini:hover a,.card.panel.tap:hover a,.card.panel.tap:hover{color:var(--k-fff)!important}
.card.mini:hover .mono{background-image:none;background-color:var(--k-fff);color:var(--k-000)}
.card.mini:hover .v{color:var(--k-ccc)}
.card.mini h3 a{text-decoration-color:currentcolor}
.card.mini .v{color:var(--k-444)}
.home .rel,.home #releases,.home .sponsor,.home .digest,.home .how{color:var(--k-000)}
.home .digest,.home .sponsor{background-image:none;background-color:var(--k-000);color:var(--k-fff)}
.home .digest a,.home .sponsor a,.home .digest .muted,.home .sponsor p{color:var(--k-ddd)!important}
.home .digest input{background-image:none;background-color:var(--k-fff);color:var(--k-000)}
.home .ri,.home .how li{border-color:var(--k-ddd)}
.home .ri .meta,.home .ri a.src{color:var(--k-444)}
.home .foot{color:var(--k-444)}
.home .foot a{color:var(--k-000)}
.home .foot .muted{color:var(--k-555)}
.home .tag{color:var(--k-000);border-color:var(--k-999)}
body{background-image:none;background-color:var(--k-fff);color:var(--k-000);background-image:radial-gradient(color-mix(in srgb,var(--k-000) 5.9%,transparent) 1px,transparent 1px)}
.nav{background-image:none;background-color:var(--k-fff)}
.nav nav a{color:var(--k-333)}
.nav nav a:hover{color:var(--k-000)}
.logo{color:var(--k-000)}
.btn{background-image:none;background-color:var(--k-000);color:var(--k-fff)!important;border-color:var(--k-000)}
.btn:hover{background-image:none;background-color:var(--k-fff);color:var(--k-000)!important}
.badge{background-image:none;background-color:var(--k-000);color:var(--k-fff)}
.v,.bf,.pr,td,dl.pf dd,dl.facts dd,.more dd,.lp p,.lp li{color:var(--k-333)}
.pick{border-color:var(--k-000);background-image:none;background-color:var(--k-fff);box-shadow:none}
.pick:hover{background-image:none;background-color:var(--k-fff);border-color:var(--k-000)}
.card{background-image:none;background-color:var(--k-fff);border-color:var(--k-000)}
.card:hover{background-image:none;background-color:var(--k-fff);border-color:var(--k-000)}
.tbl,.tw{border-color:var(--k-000);background-image:none;background-color:var(--k-fff)}
.th{background-image:none;background-color:var(--k-000);color:var(--k-fff)}
.tr summary:hover,.tr[open] summary,.more{background-image:none;background-color:var(--k-f5f5f5)}
thead th,.lp thead th{background-image:none;background-color:var(--k-000);color:var(--k-fff)}
.lp .tblwrap,.lp table{background-image:none;background-color:var(--k-fff)}
.lp .box{border-color:var(--k-000);box-shadow:none;background-image:none;background-color:var(--k-fff)}
.mono{background-image:none;background-color:var(--k-000);color:var(--k-fff)}
.ns{border-color:var(--k-000);background-image:none;background-color:var(--k-fff)}
.ns.big{box-shadow:none}
.nsv{color:var(--k-555)}
.digest,.sponsor{background-image:none;background-color:var(--k-000);color:var(--k-fff);border-color:currentcolor}
.digest a,.sponsor a,.sponsor p,.digest .muted{color:var(--k-ddd)!important}
.slbl{border-color:var(--k-ccc)}
.digest .btn{background-image:none;background-color:var(--k-fff);color:var(--k-000)!important;border-color:var(--k-fff)}
.digest input{background-image:none;background-color:var(--k-fff);color:var(--k-000);border-color:var(--k-fff)}
.foot{color:var(--k-444)}
.foot a,.fl a{color:var(--k-000)}
.sponbar{background-image:none;background-color:var(--k-fff)}
.chev{border-color:var(--k-000)}
input[type=number]{background-image:none!important;background-color:var(--k-fff)!important;color:var(--k-000)!important;border-color:var(--k-000)!important}
.btn.is-soon{background-image:none;background-color:var(--k-fff);color:var(--k-777)!important;border-color:var(--k-bbb)}
.tag,.tag.spon,.tag.feat{color:var(--k-000);border-color:var(--k-777)}
@media(max-width:640px){.tbl{border-color:currentcolor;background-image:none;background-color:transparent}}
main.page>article>ul a{border-color:var(--k-000);background-image:none;background-color:var(--k-fff);text-decoration-color:currentcolor}
main.page>article>ul a:hover{background-image:none;background-color:var(--k-000);color:var(--k-fff)}
.glinks a{border-color:var(--k-000);background-image:none;background-color:var(--k-fff);text-decoration-color:currentcolor}
.glinks a:hover{background-image:none;background-color:var(--k-000);color:var(--k-fff)!important}
.card.mini,.card.panel,.lp .box,.tbl{border-color:var(--cb)!important;box-shadow:none!important}
.card.panel{background-image:none;background-color:var(--k-fff);color:var(--k-000)}
.card.panel:not(.tap):hover{background-image:none;background-color:var(--k-fff);border-color:var(--k-000)}
.glist li{background-image:none;background-color:var(--k-fff)}
.nsl{color:inherit;text-decoration-color:currentcolor}
.mono.has-logo{background-image:none!important;background-color:var(--k-fff)!important;border-color:var(--k-000)}
.mono.has-logo img{filter:grayscale(1) contrast(1.1)}
.card:hover .mono.has-logo img,.pick:hover .mono.has-logo img,.tr summary:hover .mono.has-logo img,main.page h1:hover .mono.has-logo img{filter:none}
.card.mini:hover .mono.has-logo{background-image:none!important;background-color:var(--k-fff)!important}
.specs li{border-color:var(--k-000);background-image:none;background-color:var(--k-fff)}
.specs li span{color:var(--k-666)}
.lt .lt-smug{filter:invert(1)}
.filter-line{color:var(--mu)}
.filter-line a{color:inherit;text-decoration-color:currentcolor}
.hp-lot .search input{border-color:var(--k-000);background-image:none;background-color:var(--k-fff);color:var(--k-000)}
.hp-lot .search input:focus{outline-color:var(--k-000)}
.hp-cue{color:var(--k-777)!important;text-decoration-color:currentcolor}
.hp-cue:hover{color:var(--k-000)!important}
.nav .btn,#buy{border-color:var(--k-000)}
.digest button[type=submit]{border-color:var(--k-fff)}
.ps-link{border-color:var(--k-000);background-image:none;background-color:var(--k-fff)}
#ps th button{text-decoration-color:currentcolor}
.ps-sort select{border-color:var(--k-000);background-image:none;background-color:var(--k-fff)}
.home .card.mini .badge.tp{background-image:none;background-color:var(--k-000);color:var(--k-fff)}
.badge.tp{background-image:none;background-color:var(--k-fff);color:var(--k-000);border-color:var(--k-000)}
.home .card.mini .badge.tp{background-image:none;background-color:var(--k-fff);color:var(--k-000)}
.ns.card.panel,.pick.card.panel{background-image:none;background-color:var(--k-fff)}
.card.panel.tap:hover span,.card.panel.tap:hover .muted{color:var(--k-ccc)!important}
.bdg-item{border-color:var(--cb);background-image:none;background-color:var(--k-fff)}
.bdg-item.is-target{box-shadow:none;outline-color:var(--k-000)}
.bdg-nm a{color:var(--k-000)}
.bdg-code{background-image:none;background-color:var(--card);border-color:var(--line)}
.bdg-copy{color:var(--k-000)}
.nl .rel{color:var(--k-000)}
.nl .ri{border-color:var(--k-ddd)}
.nl .ri .meta,.nl .ri a.src{color:var(--k-444)}
.muted,.sub,.hint,.updated,.home .muted,.home .sub,.home .kick,.specs li span,.meta,.crumbs{color:var(--k-555)}
.search input{border-color:var(--cb)!important}
.lnk,.mk-cta,.pt-cta{color:var(--k-000);text-decoration-color:currentcolor;background-image:none;background-color:transparent;border-color:currentcolor}
button.cp,.bdg-copy,.bdg-item button{color:var(--k-000);text-decoration-color:currentcolor}
button.cp:focus-visible,.bdg-item button:focus-visible{outline-color:var(--k-000)}
textarea.snip,.bdg-code{border-color:var(--cb)!important}
.hp-opt:not(#picker .hp-opt){color:var(--k-555)}
.hp-opt:not(#picker .hp-opt):hover{color:var(--k-000)}
.hp-opt.on:not(#picker .hp-opt){color:var(--k-000);border-bottom-color:var(--k-000)}
.hp-opt:not(#picker .hp-opt):focus-visible{outline-color:var(--k-000)}
#specs .specs li span{color:var(--k-555)}
#specs .sheet{background-image:none;background-color:var(--k-fff);border-color:var(--cb)}
#specs .srow dt{color:var(--k-555)}
#specs .srow dd{color:var(--k-000)}
#specs .srow dd a{color:var(--k-000)}
#specs .sheet-ft{color:var(--k-555)}
#specs .sheet{background-image:none;background-color:var(--k-fff);border-color:var(--cb)}
#specs .sheet-t{background-image:none;background-color:var(--k-fff);color:var(--k-000)}
#specs .srow{border-color:currentcolor!important}
#specs .srow dt{color:var(--k-555)}
#specs .srow dd{color:var(--k-000)}
#specs .srow dd a{color:var(--k-000);text-decoration-color:currentcolor}
#specs .sheet-ft{color:var(--k-555)}
#specs .sheet.code{background-image:none;background-color:var(--k-fff)}
#specs .cl{color:var(--k-000)}
#specs .cl::before{color:var(--k-aaa)}
#specs .sheet-cmd .pr{color:var(--acc)}
#specs .sheet-cmd code{background-image:none;background-color:transparent;border-color:currentcolor;color:var(--k-000)}
#specs .sheet.code .srow{border-color:currentcolor!important;background-image:none!important;background-color:transparent!important}
#specs .sheet.code .srow dt{color:var(--k-666)}
#specs .sheet.code .srow dt .co{color:var(--k-aaa)}
#specs .sheet.code .srow dd{color:var(--k-000)}
#specs .sheet.code .num,#specs .sheet.code .kw{color:var(--k-000)}
#specs .sheet.code dd code{background-image:none;background-color:var(--k-f1f1f1);border-color:var(--k-e0e0e0);color:var(--k-000)}
#specs .sheet-cm .txt,#specs .sheet-ft .txt{color:var(--k-666)}
.cc{background-image:none;background-color:var(--k-fff);border-color:var(--cb);color:var(--k-000)}
.cc-t{background-image:none;background-color:var(--k-fff);color:var(--k-000)}
.cc-l{color:var(--k-000)}
.cc-l::before{color:var(--k-aaa)}
.cc-c>.x{color:var(--k-666)}
.cc-c a{color:var(--k-666)}
.cc-bdg pre.bdg-code.cc-l{background-image:none!important;background-color:transparent!important;border-color:currentcolor!important}
.cc-del>.x{color:var(--k-666)}
.cc-kv .k{color:var(--k-666)}
.cc-kv .v{color:var(--k-000)}
.cc-kv .cm{color:var(--k-666)}
.cc-toc .hh{color:var(--k-aaa)}
.cc-toc a{color:var(--k-000);text-decoration-color:currentcolor}
.lp .cc p,.lp .cc li{color:inherit}
.lp .cc-c>.x{color:var(--k-666)}
:root :is(.card,.card.mini,.card.panel,.pick,.lp .box,.box,.tbl,.tw,.tblwrap.card.panel,.ns,.ns.big,.glist li,.glinks a,.also li,
  main.page>article>ul a,.bdg-item,.bdg-code,.ps-link,.digest,.digest.sm,.sponsor,.lt,.sticker,.mk-kpis div,.cframe,.unc,figure,.snip,textarea.snip){border-color:var(--cb)!important;box-shadow:none!important}
:root :is(.cframe,.digest,.lt,.sticker,.pick,.sponsor,.foot-disc)>.cc-t{background-image:none;background-color:var(--k-fff);color:var(--k-000)!important}
:root :is(.card.mini,.card.panel.tap,.glinks a,main.page>article>ul a,.pick,.glist li):hover{background-image:none!important;background-color:var(--k-fff)!important;color:var(--k-000)!important;box-shadow:inset 0 0 0 1px var(--k-000)!important}
:root :is(.card.mini,.card.panel.tap,.glinks a,main.page>article>ul a,.glist li):hover :is(a,span,.muted,.v){color:inherit!important}
:root .card.mini:hover .v,:root .card.panel.tap:hover span,:root .card.panel.tap:hover .muted{color:var(--k-444)!important}
:root :is(.card.mini,.card.panel.tap,.pick):hover :is(h2 a,h3 a,a.stretch){text-decoration-color:currentcolor}
:root .glinks a:hover,:root main.page>article>ul a:hover{text-decoration-color:currentcolor}
.card.mini:hover .mono{background-image:none;background-color:var(--k-fff);color:var(--k-000)}
:root :is(.digest,.home .digest,.sponsor,.home .sponsor){background-image:none!important;background-color:var(--k-fff)!important;color:var(--k-000)!important}
:root :is(.digest,.sponsor) :is(a,p,.muted,small){color:var(--k-000)!important}
:root :is(.digest,.sponsor) .muted,:root .digest small{color:var(--k-555)!important}
:root .digest input,:root .home .digest input{background-image:none!important;background-color:var(--k-fff)!important;color:var(--k-000)!important;border-color:var(--cb)!important}
:root .sponbar{background-image:none;background-color:var(--k-fff);color:var(--k-000)}
:root .sponbar a{color:var(--k-000)}
:root .lt{background-image:none!important;background-color:var(--k-fff)!important;color:var(--k-000)!important}
:root .lt-hd{color:var(--k-555)}
:root .lt-row:hover{background-image:none;background-color:var(--k-f4f4f4)}
:root .lt-nm a{color:var(--k-000)!important}
:root .lt-nm small,:root .lt-note{color:var(--k-555)!important}
:root .lt-note a{color:var(--k-000)}
:root .lt .lt-smug{filter:none}
:root .sticker{background-image:none;background-color:var(--k-fff)}
:root :is(thead th,.lp thead th,.th){background-image:none!important;background-color:var(--k-fff)!important;color:var(--k-555)!important}
:root .tr summary:hover,:root .tr[open] summary,:root .more{background-image:none;background-color:var(--k-f6f6f6)}
:root .lp .tblwrap{border-color:var(--cb);background-image:none;background-color:var(--k-fff)}
@media(max-width:640px){:root tr{border-color:var(--cb)!important}
:root .lp tbody tr{border-color:var(--cb)!important}
:root td:before{color:var(--k-555)}
:root .lp .tblwrap,:root .tw{border-color:currentcolor!important;background-image:none;background-color:transparent}}
:root :is(.kick,.plbl,.pt-k,.hp-hero .kick,.sticker .kick){color:var(--k-555)!important}
:root .ri time{color:var(--k-555)}
:root :is(.tag,.tag.spon,.tag.feat,.slbl,.badge,.badge.tp,.home .card.mini .badge.tp,.pick .badge.tp,.pill,.vtick+.tag,.mk-prev .tag){background-image:none!important;background-color:var(--k-fff)!important;color:var(--k-000)!important;border-color:var(--k-000)!important}
:root .mk-prev .tag{background-image:none!important;background-color:var(--k-000)!important;color:var(--k-fff)!important}
:root .mono:not(.has-logo){background-image:none!important;background-color:var(--k-fff)!important;color:var(--k-000)!important;border-color:var(--cb)}
:root :is(.btn,.btn.sm,.nav .btn,.home .btn,.home .lt .btn,.home .digest .btn,.digest .btn,.digest button[type=submit],#buy){background-image:none!important;background-color:var(--k-fff)!important;color:var(--k-000)!important;border-color:var(--cb)!important;box-shadow:none!important;text-decoration-color:currentcolor}
:root :is(.btn,.digest button[type=submit],#buy):is(:hover,:focus-visible){background-image:none!important;background-color:var(--k-000)!important;color:var(--k-fff)!important}
:root .btn.is-soon,:root .btn.is-soon:hover{background-image:none!important;background-color:var(--k-fff)!important;color:var(--k-777)!important;border-color:var(--k-bbb)!important}
:root :is(.lnk,.mk-cta,.pt-cta,.bdg-copy,button.cp,.bdg-item button){color:var(--k-000)!important;text-decoration-color:currentcolor;background-image:none;background-color:transparent;border-color:currentcolor}
:root :is(input[type=email],input[type=search],input[type=text]:not(.sr),input[type=number],select,textarea,.search input,.hp-lot .search input,.hp-hero .search input,#bt,.calc input[type=number],.ps-sort select){border-color:var(--cb)!important;background-image:none!important;background-color:var(--k-fff)!important;color:var(--k-000)!important;box-shadow:none}
:root :is(input,select,textarea):focus{outline-color:var(--k-000)!important}
:root .snip,:root textarea.snip{background-image:none!important;background-color:var(--k-fff)!important;color:var(--k-000)!important}
:root .bdg-code{background-image:none!important;background-color:var(--k-fff)!important}
:root .unc{color:var(--k-333)!important;background-image:none;background-color:var(--k-fff)}
:root .ns{background-image:none;background-color:var(--k-fff)}
:root .bdg-item.is-target{box-shadow:none!important;outline-color:var(--k-000)}
:root .hp-opt:hover{box-shadow:none!important}
:root .foot-disc{border-color:var(--cb);background-image:none;background-color:var(--k-fff)}
:root .foot-disc p{color:var(--k-333)}
:root .cframe{background-image:none;background-color:var(--k-fff)}
:root .lt>.cc-t{background-image:none;background-color:var(--k-fff)}
.glog-h .cm{color:var(--k-666)}
.glog .ri::before{background-image:none;background-color:var(--k-000);outline-color:var(--k-fff)}
.cc-score .cm{color:var(--k-555)}
@media(max-width:640px){:root .lp .tblwrap.card.panel,:root main .tblwrap.card.panel{border-color:currentcolor!important;background-image:none;background-color:transparent}
:root .lp tbody td:first-child:not([data-l]){color:var(--k-000)}}
:root .home ul.rel,:root .nl ul.rel{border-color:currentcolor!important}
:root .lt-hd,:root .glog-h{color:var(--k-000)}
:root .home .how li{border-color:var(--k-c8c8c8)!important}
:root main.page p>a[href="/guides/"]:only-child{text-decoration-color:currentcolor;color:var(--k-000)}
:root :not(pre)>code,:root #specs .sheet.code dd code{border-color:var(--rule-row)!important;background-image:none!important;background-color:transparent!important}
:root .cc-l>code,:root .cc-cmd code,:root .sheet-cmd code,:root #specs .sheet.code .srow:first-child code{border-color:currentcolor!important}
:root .foot-disc .foot-legal{color:var(--k-555)}
:root .foot-disc .foot-legal a{color:var(--k-000);text-decoration-color:currentcolor}
:root .hit:not(.lt-row,.ri):hover{box-shadow:inset 0 0 0 1px var(--k-000)!important}
:root .hit:hover a.stretch{text-decoration-color:currentcolor}
:root .hit:has(a.stretch:focus-visible),:root a.card.panel.tap:focus-visible{outline-color:var(--k-000)}
:root .hit a.stretch:focus-visible{outline-color:currentcolor}
:root .hit:focus-within:not(:has(a.stretch:focus-visible)){outline-color:currentcolor}
input[type=search]::-webkit-search-cancel-button{background-image:linear-gradient(45deg,transparent 43%,var(--k-000) 43%,var(--k-000) 57%,transparent 57%), linear-gradient(-45deg,transparent 43%,var(--k-000) 43%,var(--k-000) 57%,transparent 57%);background-color:transparent}
@media (max-width:699.98px){.mm-t{color:var(--k-000);text-decoration-color:currentcolor}
.mm-t:focus-visible{outline-color:var(--k-000)}
.mm-p{background-image:none;background-color:var(--k-fff)}
.mm-f{border-color:var(--k-000)}
:root .nav .mm-f nav a{color:var(--k-000);text-decoration-color:currentcolor}
:root .nav .mm-f nav a:hover,:root .nav .mm-f nav a:focus-visible{background-image:none;background-color:var(--k-000);color:var(--k-fff);outline-color:currentcolor}
.mm-f a[aria-current]{text-decoration-color:currentcolor}}
:root .nav nav a[aria-current]:not(.btn){color:var(--k-000);text-decoration-color:currentcolor}
:root :is(.cc-cur,#specs .cur){background-image:none;background-color:var(--k-000)}
:root span.pr[aria-hidden="true"]{color:var(--k-000)}
:root :is(.card.mini,.card.panel.tap,.glinks a,main.page>article>ul a,.pick,.glist li,.hit:not(.lt-row,.ri)){box-shadow:inset 0 0 0 0 var(--k-000)!important}
:root :is(.card.mini,.card.panel.tap,.glinks a,main.page>article>ul a,.pick,.glist li,.hit:not(.lt-row,.ri)):hover{box-shadow:inset 0 0 0 1.5px var(--k-000)!important}
.pint{color:var(--k-555)}
:root .wk-mini .muted a{color:var(--k-000)!important;text-decoration-color:currentcolor}
.stk{border-color:currentcolor}
.stk-row:hover{background-image:none;background-color:var(--k-f4f4f4)}
.stk-nm a{color:var(--k-000);text-decoration-color:currentcolor}
.stk-row:hover .stk-nm a{text-decoration-color:currentcolor}
.stk-sc small{color:var(--k-555)}
.stk-why{color:var(--k-333)}
.stk-kv dt{color:var(--k-666)}
.stk-note{color:var(--k-555)}
.hp-hero .hp-cmd{color:var(--k-000)}
.hp-hero .hp-cmt{color:var(--k-666)}
.hp-hero .hp-cmt .hp-hash{color:var(--k-aaa)}
.hp-hero .hp-cmt a{color:var(--k-000)}
.hp-hero .hp-cmt-list{color:var(--k-333)}
:root .hp-hero a.hp-wk{border-color:var(--k-000)!important;text-decoration-color:currentcolor!important;color:var(--k-000);text-decoration-color:currentcolor}
:root .hp-hero a.hp-wk:hover{background-image:none;background-color:var(--k-000);color:var(--k-fff)!important}
.hp-v-4 .t4-l .pr{color:var(--k-000)}
.hp-v-4 .t4-top a{color:var(--k-000);text-decoration-color:currentcolor}
.hp-v-4 .t4-top a:hover{text-decoration-color:currentcolor}
.hp-v-4 .t4-rk{background-image:none;background-color:var(--k-000);color:var(--k-fff)}
.hp-v-4 .t4-sc{color:var(--k-555)}
.hp-v-4 .t4-ok{color:var(--k-555)}
.hp-v-4 .t4-more{color:var(--k-000)}
:root .hp-v-4 .t4-win>.cc-t{background-image:none;background-color:var(--k-000);color:var(--k-fff)}
.hp-v-4 .t4-win>.cc-t::before{border-color:var(--k-fff);box-shadow:15px 0 0 -1.5px var(--k-000),15px 0 0 0 var(--k-fff),30px 0 0 -1.5px var(--k-000),30px 0 0 0 var(--k-fff)}
.hp-v-5 .t5-sub{color:var(--k-333)}
.hp-v-5 .t5-more{color:var(--k-000)}
.hp-v-5 .t5-card{background-image:none;background-color:var(--k-000);color:var(--k-fff);border-color:var(--k-000);box-shadow:8px 8px 0 0 color-mix(in srgb,var(--k-000) 14%,transparent)}
.hp-v-5 .t5-hd{color:var(--k-fff)}
.hp-v-5 .t5-hd span+span{color:var(--k-8a8a8a)}
.hp-v-5 .t5-no{color:var(--k-8a8a8a)}
.hp-v-5 .t5-logo{background-image:none;background-color:var(--k-fff)}
.hp-v-5 .t5-nm small{color:var(--k-8a8a8a)}
.hp-v-5 .t5-nm a{color:var(--k-fff);text-decoration-color:currentcolor}
.hp-v-5 .t5-row:hover{background-image:none;background-color:var(--k-111)}
.hp-v-5 .t5-pz{color:var(--k-bbb)}
.hp-v-5 .t5-sc{color:var(--k-fff)}
.hp-v-5 .t5-mat{background-image:none;background-color:var(--k-fff);border-color:var(--k-000);box-shadow:inset 0 0 0 6px var(--k-fff),inset 0 0 0 7.5px var(--k-000);color:var(--k-000)}
.hp-v-5 .t5-mat a{color:var(--k-000)}
.hp-v-6 .t6-sub{color:var(--k-333)}
.hp-v-6 .t6-pal{background-image:none;background-color:var(--k-fff);border-color:var(--k-000);box-shadow:10px 10px 0 0 var(--k-000)}
.hp-v-6 .t6-fix{color:var(--k-888)}
.hp-v-6 .t6-q{color:var(--k-000)}
.hp-v-6 .t6-kbd{border-color:var(--k-000);color:var(--k-000);background-image:none;background-color:var(--k-fff)}
.hp-v-6 .t6-r{color:var(--k-000)}
.hp-v-6 .t6-n{color:var(--k-999)}
.hp-v-6 .t6-logo{border-color:var(--k-ddd);background-image:none;background-color:var(--k-fff)}
.hp-v-6 .t6-nm{color:inherit;text-decoration-color:currentcolor}
.hp-v-6 .t6-pz{color:var(--k-555)}
.hp-v-6 .t6-top{background-image:none;background-color:var(--k-000);color:var(--k-fff)}
.hp-v-6 .t6-top .t6-n,.hp-v-6 .t6-top .t6-pz{color:var(--k-bbb)}
.hp-v-6 .t6-r:not(.t6-top):hover{background-image:none;background-color:var(--k-f2f2f2)}
.hp-v-6 .t6-ft{color:var(--k-777)}
.hp-v-6 .t6-ft a{color:var(--k-000)}
.hp-v-6 .t6-chip{border-color:var(--k-000);color:var(--k-000);text-decoration-color:currentcolor;background-image:none;background-color:var(--k-fff)}
.hp-v-6 .t6-chip.on,.hp-v-6 .t6-chip:hover{background-image:none;background-color:var(--k-000);color:var(--k-fff)}
.hp-v-6 .t6-pint{color:var(--k-666)}
.hp-v-6 .t6-pint a{color:var(--k-000)}
.hp-v-6 .t6-pint .hp-hash{color:var(--k-aaa)}
@media(max-width:640px){.hp-v-6 .t6-pal{box-shadow:6px 6px 0 0 var(--k-000)}}
.hp-v-7 .t7-shadow{background-image:radial-gradient(closest-side,color-mix(in srgb,var(--k-000) 18%,transparent),transparent);background-color:transparent}
.hp-v-7 .t7-bub{background-image:none;background-color:var(--k-fff);border-color:var(--k-000)}
.hp-v-7 .t7-bub::before{background-image:none;background-color:var(--k-fff)}
.hp-v-7 .t7-l{color:var(--k-000)}
.hp-v-7 .t7-l a{color:var(--k-000)}
.hp-v-7 .t7-pick{border-color:var(--k-000);text-decoration-color:currentcolor}
.hp-v-7 .t7-pick:hover{background-image:none;background-color:var(--k-000);color:var(--k-fff)}
.hp-v-7 .t7-more{color:var(--k-000)}
.hp-v-8 .t8-sub{color:var(--k-333)}
.hp-v-8 .t8-more{color:var(--k-000)}
.hp-v-8 .t8-board{background-image:none;background-color:var(--k-000);color:var(--k-f2f2f2);border-color:var(--k-000);outline-color:currentcolor;box-shadow:0 0 0 1.5px var(--k-000),10px 10px 0 0 color-mix(in srgb,var(--k-000) 15%,transparent)}
.hp-v-8 .t8-bd{color:var(--k-9a9a9a)}
.hp-v-8 .t8-job{color:var(--k-f2f2f2)}
.hp-v-8 .t8-row2 a{color:var(--k-fff);text-decoration-color:currentcolor}
.hp-v-8 .t8-it:hover .t8-row2 a{text-decoration-color:currentcolor}
.hp-v-8 .t8-meta{color:var(--k-9a9a9a)}
.hp-v-8 .t8-bf{color:var(--k-cfcfcf)}
.hp-v-8 .t8-bf a{color:var(--k-fff)}
.hp-v-8 .t8-tick{background-image:none;background-color:var(--k-000);color:var(--k-fff)}
.hp-v-8 .t8-tk::after{color:var(--k-777)}
.hp-v-8 .t8-tk-hd{background-image:none;background-color:var(--k-fff);color:var(--k-000)}
.hp-v-8 .t8-ok{color:var(--k-9a9a9a)}
.hp-v-7x .np-lab{color:var(--k-555)}
.hp-v-7x .np-chip{color:var(--k-000);background-image:none;background-color:var(--k-fff);border-color:var(--k-000);text-decoration-color:currentcolor}
.hp-v-7x .np-chip:focus-visible,.hp-v-7x .np-chip[aria-pressed=true]{background-image:none;background-color:var(--k-000);color:var(--k-fff)}
@media(hover:hover){.hp-v-7x .np-chip:hover{background-image:none;background-color:var(--k-000);color:var(--k-fff)}}
.hp-v-7x .np-fine{color:var(--k-000)}
.hp-v-7x .np-fine a{color:var(--k-000)}
.hp-v-7x .np-form{border-color:var(--k-000);background-image:none;background-color:var(--k-fff)}
.hp-v-7x .np-form input{border-color:currentcolor;outline-color:currentcolor;background-image:none;background-color:transparent;color:var(--k-000)}
.hp-v-7x .np-form input::placeholder{color:var(--k-777)}
.hp-v-7x .np-form:focus-within{box-shadow:3px 3px 0 var(--k-000)}
.hp-v-7x .np-form button{background-image:none;background-color:var(--k-000);color:var(--k-fff);border-color:currentcolor}
.hp-v-7x .np-form button:hover{background-image:none;background-color:var(--k-333)}
.hp-v-7x .np-v span{background-image:none;background-color:var(--k-000);color:var(--k-fff)}
.hp-v-7x .np-form{border-color:var(--k-000);background-image:none;background-color:var(--k-fff);box-shadow:none}
.hp-v-7x .np-pr{color:var(--k-000)}
:root .hp-v-7x .np-form #np-q{border-color:currentcolor!important;background-image:none!important;background-color:transparent!important;box-shadow:none!important;outline-color:currentcolor!important;color:var(--k-000)!important}
.hp-v-7x .np-form button{border-color:currentcolor;background-image:none;background-color:var(--k-000);color:var(--k-fff)}
.hp-v-7x .np-form button:hover{background-image:none;background-color:var(--k-2b2b2b)}
.hp-v-7x .np-form:focus-within{box-shadow:4px 4px 0 var(--k-000)}
.hp-v-7x .np-form button:focus-visible{outline-color:var(--k-fff)}
.hp-v-9 .n9-more{color:var(--k-777)}
.hp-v-9 .n9-rank{color:var(--k-000);text-decoration-color:currentcolor}
@media(hover:hover){.hp-v-9 .n9-rank:hover{background-image:none;background-color:var(--k-000);color:var(--k-fff)}}
.hp-v-9 .n9-quiet a:not(.n9-rank){color:var(--k-777)}
.hp-v-9 .n9-dot{color:var(--k-bbb)}
.hp-v-9 .n9-tag,.hp-hero .n9-h1{color:var(--k-666)}
:root:root .home .card.mini .rkn{color:var(--k-777)}
@media(max-width:640px){:root:root .ps .tw{border-color:currentcolor!important;background-image:none!important;background-color:transparent!important}
:root:root .ps #ps tbody tr{border-color:currentcolor!important;background-image:none!important;background-color:transparent!important;box-shadow:none!important}
:root:root .ps #ps td{border-color:currentcolor!important}
:root:root .ps #ps td[data-l="plan"]{color:var(--k-000)}
:root:root .ps #ps td[data-l="monthly"]{color:var(--k-000)}
:root:root .ps #ps td[data-l="annual"]{color:var(--k-555)}
:root:root .ps #ps td[data-l="limits"]{color:var(--k-333)}
:root:root .ps #ps :is(td[data-l="free tier"],td[data-l="BYO key"],td[data-l="checked"]){color:var(--k-555)}
:root:root .ps #ps :is(td[data-l="free tier"],td[data-l="BYO key"],td[data-l="checked"]):before{color:inherit}
:root:root .ps #ps td[data-l="checked"] a{color:var(--k-555)}}
.sl{border-color:var(--k-000);color:var(--k-000);background-image:none;background-color:var(--k-fff)}
.sl .sl-m{background-image:none;background-color:var(--k-000);color:var(--k-fff)}
.sl b{color:inherit}
.sl .sl-k{color:var(--k-000);background-image:none;background-color:var(--k-fff);border-color:currentcolor}
.sl .sl-k:hover{background-image:none;background-color:var(--k-000);color:var(--k-fff)}
.sl .sl-k:focus-visible{outline-color:var(--k-000)}
.man{color:var(--k-000)}
.man.ft{color:var(--k-555)}
.man .mid{color:var(--k-555)}
.man-sa{color:var(--k-000)}
.cc-404 .nf-l a{color:var(--k-000)}
.kf-row{background-image:none!important;background-color:var(--k-f2f2f2)!important}
.kf-row a:focus-visible{outline-color:var(--k-000)}
dialog.kh{border-color:currentcolor;background-image:none;background-color:transparent;color:var(--k-000)}
dialog.kh::backdrop{background-image:none;background-color:transparent}
dialog.kh .cc{background-image:none;background-color:var(--k-fff);box-shadow:6px 6px 0 var(--k-000)}
.kh .kh-x{background-image:none;background-color:var(--k-fff);border-color:currentcolor;color:var(--k-000)}
.kh .kh-x:hover{text-decoration-color:currentcolor}
.kh .kh-x:focus-visible{outline-color:var(--k-000)}
.np [fill="#000"],.vtick [fill="#000"]{fill:currentColor}
.vtick{color:var(--k-000)}
.vtick [stroke="#fff"]{stroke:var(--k-fff)}
@media all{:root:root .mono.has-logo,:root:root .card.mini:hover .mono.has-logo{background-image:none!important;background-color:#131519!important;border-color:var(--k-bbb)}
:root:root img[src^="/assets/brand/blob-"]{filter:invert(1)!important}
:root:root .badge.tp img[src^="/assets/brand/logo.svg"]{filter:invert(1)}
:root:root img[src^="/badges/"],:root:root img[src^="/badge/"]{background-image:none;background-color:#131519;outline-color:#131519}
:root:root .bdg-prev figure{background-image:none;background-color:#131519;color:#f4eee0}
:root:root .bdg-prev figure figcaption{color:#f4eee0}
:root:root .bdg-prev figure.dk{background-image:none;background-color:#e4ddcf}
:root:root .bdg-prev figure.dk figcaption{color:#111216}
:root:root .bdg-prev figure img{background-image:none;background-color:transparent;outline-color:currentcolor}}
@media(max-width:480px){body,.home{background-image:none}}
/* mirror 2. theme-a3.css */
:root{--vx-bg:#e9e3d4;--vx-bg2:#e5dfd0;--vx-hl:rgba(26,27,33,0.041);--vx-glow:rgba(26,27,33,0.248);--k-fff:#e9e3d4;--k-f5f5f5:#e2dbcd;--k-f6f6f6:#e2dbcd;--k-f4f4f4:#e1dacc}
html{background-image:none;background-color:var(--vx-bg)}
body.th-a{background-image:radial-gradient(1200px 600px at 50% -10%,rgba(26,27,33,0.054),transparent 60%), none;background-color:var(--vx-bg)}
body.th-a::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.th-a .nav{background-image:none;background-color:rgba(244,238,224,.82)}
.th-a .nav .logo .np{filter:drop-shadow(0 0 10px rgba(26,27,33,0.081))}
.vx-tabs{background-image:none;background-color:#eae3d5;color:#4f4e4f}
.vx-tab{color:#4f4e4f;text-decoration-color:currentcolor}
.vx-tab:hover{color:#1a1b21;background-image:none;background-color:#e1dacc}
.vx-tab.on{background-image:none;background-color:var(--vx-bg);color:#1a1b21}
.vx-tab.on::before{background-image:none;background-color:#1a1b21;box-shadow:0 0 12px var(--vx-glow)}
.vx-tab.on::after{background-image:none;background-color:var(--vx-bg)}
.vx-tab i{background-image:none;background-color:#1a1b21;box-shadow:0 0 8px var(--vx-glow)}
.vx-tab b{color:#504f50}
.vx-path{color:#504f50}
.vx-tabs.vx-home{background-image:none;background-color:rgba(244,238,224,.6)}
@media(min-width:1180px){.vx-gutter{color:#515051}
.vx-line{background-image:none;background-color:var(--vx-hl)}
.vx-line b{color:#1a1b21}}
.th-a .hp-hero::before{background-image:radial-gradient(520px 380px at var(--mx,62%) var(--my,46%),rgba(26,27,33,0.068),transparent 70%);background-color:transparent}
.th-a .hp-hero::after{background-image:linear-gradient(90deg,transparent,rgba(26,27,33,0.315),transparent);background-color:transparent}
.vx-ghost{color:#1a1b21}
.vx-ghost .c{color:#4b4a4c}
.vx-ghost .k{background-image:none;background-color:#1a1b21}
.th-a .t7-bub{box-shadow:0 0 0 1px rgba(26,27,33,0.018),0 30px 80px -20px rgba(26,27,33,0.054),0 0 60px rgba(26,27,33,0.023)}
.th-a .t7-bub::after{background-image:conic-gradient(from var(--vx-ang),transparent 0 62%,rgba(26,27,33,0.072) 70%,#131519 86%,rgba(26,27,33,0.072) 94%,transparent);background-color:transparent;filter:drop-shadow(0 0 6px rgba(26,27,33,0.270))}
.th-a .t7-blob{filter:drop-shadow(0 0 34px rgba(26,27,33,0.063))}
.th-a .n9-h1{text-shadow:0 0 18px rgba(26,27,33,0.081)}
.th-a :is(.hp-h,#rl,#hw,.cmp>h2,#wk-h1)::before{color:#4f4e4f;text-shadow:none}
.th-a main.page>h1:not(:has(.mono))::before{color:#504f50}
.th-a :is(.hp-h,#rl,#hw,.cmp>h2,main.page>h1){text-shadow:0 0 22px rgba(26,27,33,0.054)}
html.vx-m .vx-pre.vx-in::after{background-image:none;background-color:currentColor}
.th-a :is(.cframe,.lt,.sticker,.digest,.foot-disc,.sheet,.pick,.tbl,.cc){box-shadow:0 0 0 1px rgba(26,27,33,0.009),0 20px 60px -30px rgba(26,27,33,0.036)}
.th-a .cc-t::before{background-image:none;background-color:#1a1b21;box-shadow:0 0 6px var(--vx-glow)}
.th-a .lt-row:hover,.th-a .ri:hover{background-image:none;background-color:var(--vx-hl);box-shadow:inset 2px 0 0 #1a1b21}
.th-a .card.mini:hover{box-shadow:inset 0 0 0 1px #1a1b21,0 0 24px rgba(26,27,33,0.054)!important}
.th-a .lt-pts{text-shadow:0 0 14px rgba(26,27,33,0.158)}
.th-a .btn:hover{box-shadow:0 0 0 1px #1a1b21,0 0 22px rgba(26,27,33,0.135)}
.th-a .cc-cur{box-shadow:0 0 10px rgba(26,27,33,0.315)}
.th-a a.lnk:hover{text-shadow:0 0 12px rgba(26,27,33,0.225)}
.vx-status{color:#f4eee0;background-image:none;background-color:#2b2d33}
.vx-status .vx-mode{background-image:none;background-color:#e9e3d4;color:#1a1b21;box-shadow:inset 0 0 0 1px #2b2d33}
.vx-status .vx-sp{border-color:currentcolor}
.th-a3{--a3-ln:#c4beb0;--a3-dim:#4f4e4f}
:root:root body.th-a3 .a3-p{border-color:var(--a3-ln)!important;background-image:none!important;background-color:#ece6d7!important;box-shadow:0 0 0 1px rgba(30,31,37,0.180),0 14px 40px -24px rgba(30,31,37,0.270)!important}
:root:root body.th-a3 .a3-p:hover,:root:root body.th-a3 .a3-p:focus-within{border-color:#a09b90!important}
.th-a3 .a3-lb{color:#1f2026}
.th-a3 .a3-lb>*{background-image:none;background-color:var(--k-fff)}
.th-a3 .a3-lb{background-image:none;background-color:transparent}
.th-a3 .a3-p>.a3-lb .a3-dot,.th-a3 .a3-hlb .a3-dot{background-image:none;background-color:#1a1b21;box-shadow:0 0 0 4px var(--k-fff),0 0 8px var(--vx-glow)}
.th-a3 .a3-lb{text-shadow:0 0 0 transparent}
.th-a3 .a3-lb{color:#1f2026}
.th-a3 .a3-p>.a3-lb{background-image:none;background-color:var(--k-fff)}
.th-a3 .a3-hr{color:var(--a3-dim)}
.th-a3 .a3-live::before{background-image:none;background-color:#1a1b21}
:root:root:root body.th-a3 .a3-p :is(.lt,.sticker,.cc,.sheet,.tbl,.cframe,.ns,.digest){border-color:currentcolor!important;box-shadow:none!important;background-image:none!important;background-color:transparent!important}
.th-a3 .a3-top{color:#38383d}
.th-a3 .a3-top b{color:#111216}
.th-a3 .a3-mk{color:var(--a3-dim)}
.th-a3 .a3-mr b,.th-a3 .a3-bar b{color:#17191e;text-shadow:0 0 6px var(--vx-glow)}
.th-a3 .a3-mr em,.th-a3 .a3-bar em{color:#474649}
.th-a3 .a3-bar{color:#504f50}
.th-a3 .a3-scr{scrollbar-color:var(--a3-ln) transparent}
.th-a3 .a3-scr:focus-visible{outline-color:#1a1b21}
.th-a3 .a3-prices th{color:var(--a3-dim)}
.th-a3 .a3-prices td{color:#303136}
.th-a3 .a3-prices small{color:#4b4a4c}
.th-a3 .a3-prices a{color:#1a1b21;text-decoration-color:currentcolor}
.th-a3 .a3-prices a:hover{text-decoration-color:currentcolor}
.th-a3 .a3-prices td.a3-ck{color:#4f4e4f}
.th-a3 .a3-prices tr:hover td{background-image:none;background-color:var(--vx-hl)}
.th-a3 .a3-cats a{color:#2a2c32;text-decoration-color:currentcolor}
.th-a3 .a3-cats a:hover{background-image:none;background-color:var(--vx-hl);color:#111216}
.th-a3 .a3-cb{background-image:repeating-linear-gradient(90deg,#d4cdbf 0 6px,transparent 6px 8px);background-color:transparent}
.th-a3 .a3-cb b{background-image:repeating-linear-gradient(90deg,#1a1b21 0 6px,transparent 6px 8px);background-color:transparent;box-shadow:0 0 8px rgba(26,27,33,0.081)}
.th-a3 .a3-cc{color:#474649}
.th-a3 .a3-hlb{color:#4b4a4c}
.th-a3 .a3-hlb .a3-hr{border-color:currentcolor}
:root:root body.th-a3 .a3-w-ps>p{border-color:currentcolor!important;background-image:none!important;background-color:transparent!important;box-shadow:none!important}
:root:root body.th-a3 .a3-w-spn>aside{border-color:currentcolor!important;background-image:none!important;background-color:transparent!important}
.th-a3 .a3-ns{color:#4f4e4f}
.th-a3 .a3-hc{text-decoration-color:currentcolor;color:#4c4b4d}
.th-a3 .a3-hc b{background-image:repeating-linear-gradient(0deg,#1a1b21 0 5px,transparent 5px 7px);background-color:transparent;box-shadow:0 0 10px rgba(26,27,33,0.068)}
.th-a3 .a3-hc:hover b{background-image:repeating-linear-gradient(0deg,#131519 0 5px,transparent 5px 7px);background-color:transparent}
.th-a3 .a3-hn{color:#25272d}
@media(max-width:699.98px){:root:root body.th-a3 .a3-w-pg{background-image:none!important;background-color:transparent!important;box-shadow:none!important}}
.th-a3 .a3-sb .a3-clk{color:inherit}
:root:root body.th-a3 .a3-prs dt{color:#4f4e4f}
:root:root body.th-a3 .a3-prs dd{color:#222329}
:root:root body.th-a3 .a3-prs .srow:first-child dd{color:#111216}
.th-a3{--a3-ln:#d4cdbf}
:root:root body.th-a3 .a3-p{background-image:none!important;background-color:#ebe5d6!important;box-shadow:none!important}
:root:root body.th-a3 .a3-p:hover,:root:root body.th-a3 .a3-p:focus-within{border-color:#b7b1a5!important}
.th-a3 .a3-p>.a3-lb{color:#38383d}
.th-a3 .a3-p>.a3-lb .a3-dot{box-shadow:0 0 0 4px var(--k-fff)}
.th-a3 .a3-hr{color:#504f50;border-left-color:#cbc5b7}
.a3-ro-i b{color:#111216;text-shadow:0 0 24px rgba(26,27,33,0.081)}
.a3-ro-i span{color:#4f4e4f}
.a3-sg{background-image:repeating-linear-gradient(90deg,#d4cdbf 0 calc(10% - 2px),transparent calc(10% - 2px) 10%);background-color:transparent}
.a3-sg i{background-image:none;background-color:#3f3f43}
.th-a3 .a3-w-lg .lt-pos{color:#504f50!important}
.th-a3 .a3-w-lg .lt-pts{color:#474649}
.th-a3 .a3-w-lg .lt-row:first-child .lt-pos{color:#111216!important}
.th-a3 .a3-w-lg .lt-row:first-child .lt-pts{color:#111216;text-shadow:0 0 22px rgba(26,27,33,0.158)}
.th-a3 .a3-w-lg .lt-row:first-child .a3-sg i{background-image:none;background-color:#131519;box-shadow:0 0 14px rgba(26,27,33,0.135)}
.th-a3 .a3-prices th{color:#504f50}
.th-a3 .a3-prices .a3-pc a{color:#4b4a4c;text-decoration-color:currentcolor}
.th-a3 .a3-prices .a3-pt a{color:#1a1b21;text-decoration-color:currentcolor}
.th-a3 .a3-prices tr:hover .a3-pc a{color:#303136}
.th-a3 .a3-prices .a3-pp b{color:#111216}
.th-a3 .a3-prices .a3-pp small{color:#504f50}
html.a3-i body::after{background-image:none;background-color:#e9e3d4}
.a3-intro{background-image:none;background-color:#e9e3d4;color:#1a1b21}
.a3-ih{color:#474649}
.a3-ih b{color:#111216}
.a3-ic{color:#111216}
.a3-ic small{color:#4f4e4f}
.a3-if{color:#4f4e4f}
.a3-if b{color:#111216}
.a3-skip{color:#4b4a4c}
.a3-skip:focus-visible{outline-color:#131519}
:root:root body.th-a3 #releases .ri>time{color:#4f4e4f!important}
:root:root body.th-a3 #releases .ri>.meta{color:#4b4a4c!important}
.th-a3 .a3-sgb i{background-image:none;background-color:#1a1b21;box-shadow:0 0 12px rgba(26,27,33,0.113)}
.th-a3 .a3-vbar em{color:#111216}
.th-a3 .a3-vbar small{color:#4f4e4f}
.th-a3 .a3-rs{color:#474649}
.th-a3 .a3-rs.a3-ns em{color:#504f50}
.th-a3 .a3-plans{background-image:none;background-color:#d0c9bb;border-color:#d0c9bb}
.th-a3 .a3-plans li{background-image:none;background-color:#e9e3d4;color:#474649}
.th-a3 .a3-plans li:hover{background-image:none;background-color:#e5dfd0}
.th-a3 .a3-plans li .num:first-of-type{color:#111216}
.th-a3 .a3-plans li:first-child{box-shadow:inset 0 2px 0 #1a1b21}
@media (max-width:699.98px){.th-a3 .ax-mm>summary.mm-t{border-color:#c3bcaf;background-image:none;background-color:#e7e1d2;text-decoration-color:currentcolor!important}
.th-a3 .ax-mm>summary .mm-o{color:#1a1b21}
.th-a3 .ax-mm>summary .mm-x{color:#1a1b21}}
.th-a3 .ax-tabs{background-image:none;background-color:rgba(244,238,224,.9)}
.th-a3.home .ax-tabs{background-image:none;background-color:rgba(244,238,224,.5)}
.th-a3 .ax-tab{color:#4f4e4f;text-decoration-color:currentcolor}
.th-a3 .ax-tab:hover{color:#1a1b21;background-image:none;background-color:#e2dbcd}
.th-a3 .ax-tab:focus-visible{outline-color:#1a1b21}
.th-a3 .ax-tab i{background-image:none;background-color:#b7b1a5}
.th-a3 .ax-tab b{color:#504f50}
.th-a3 .ax-tab.on{background-image:none;background-color:var(--vx-bg);color:#1a1b21}
.th-a3 .ax-tab.on i{background-image:none;background-color:#1a1b21;box-shadow:0 0 8px var(--vx-glow)}
.th-a3 .ax-tab.on::before{background-image:none;background-color:#1a1b21;box-shadow:0 0 12px var(--vx-glow)}
.th-a3 .ax-tab.on::after{background-image:none;background-color:var(--vx-bg)}
.th-a3 .ax-tab.par{color:#38383d}
.th-a3 .ax-tab.par i{background-image:none;background-color:#6a6765}
.th-a3 .ax-path{color:#504f50}
.a3-lg{background-image:none;background-color:#e1dacc}
.a3-lg img{filter:grayscale(1) contrast(1.05)}
.a3-mono{color:#1a1b21;box-shadow:inset 0 0 0 1px #b7b1a5}
.ls-g{background-image:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(26,27,33,0.032),transparent 70%), radial-gradient(circle,rgba(26,27,33,0.063) 1px,transparent 1.2px), none;background-color:#e7e1d2;box-shadow:inset 0 0 0 1px #dbd4c6}
.ls-n::before{background-image:linear-gradient(90deg,rgba(26,27,33,calc(((.03 + var(--g)*.1)) * 0.9)),rgba(26,27,33,0.126));background-color:transparent}
.ls-n a{outline-color:currentcolor;box-shadow:0 0 0 1px rgba(26,27,33,calc(((.08 + var(--g)*.3)) * 0.45)),0 0 calc(4px + var(--g)*14px) rgba(26,27,33,calc(((var(--g)*.16)) * 0.45))}
.ls-ld a{box-shadow:0 0 0 1.5px rgba(26,27,33,0.383),0 0 34px rgba(26,27,33,0.135)}
.ls-cr{color:#111216;filter:drop-shadow(0 0 6px rgba(26,27,33,0.270))}
.ls-cr svg{fill:currentColor}
.ls-wn{background-image:none;background-color:rgba(244,238,224,.78);color:#111216;text-shadow:0 0 12px #e4ddcf,0 0 4px #e4ddcf}
.ls-wn b{color:#38383d}
.ls-un a{box-shadow:none;outline-color:#959087}
.ls-z{color:#4f4e4f;background-image:none;background-color:rgba(244,238,224,.82)}
.ls-z:hover,.ls-c.ls-on .ls-z{color:#111216;background-image:none;background-color:#d8d1c3}
.ls-z:focus-visible{outline-color:#131519}
.ls-c.ls-on .ls-n::before{background-image:linear-gradient(90deg,rgba(26,27,33,0.225),rgba(26,27,33,0.450));background-color:transparent}
.ls-n.ls-on a{box-shadow:0 0 0 1.5px #131519,0 0 30px rgba(26,27,33,0.203)}
.ls-n.ls-on .a3-lg img,.ls-n a:focus-visible .a3-lg img{filter:none}
.ls-n a:focus-visible{outline-color:#131519}
.ls-back{background-image:none;background-color:#1a1b21;color:#f4eee0}
.ls-back:focus-visible{outline-color:#131519}
.ls-ax{color:#504f50}
.ls-zb .ls-back{box-shadow:0 4px 18px rgba(30,31,37,0.165)}
.ls-rd0{color:#504f50}
.ls-rd0 b{color:#38383d}
a.ls-tip{color:inherit;text-decoration-color:currentcolor;outline-color:currentcolor}
.ls-rd1{background-image:none;background-color:rgba(244,238,224,.94);box-shadow:0 0 0 1px #b7b1a5,0 18px 40px rgba(30,31,37,0.180),0 0 28px rgba(26,27,33,0.023)}
.ls-rl .a3-lg{box-shadow:0 0 0 1px #b0aa9e}
.ls-rl .a3-lg img{filter:none}
.ls-rt .n{color:#111216}
.ls-rt .c{color:#4f4e4f}
.ls-rs b{color:#111216;text-shadow:0 0 18px rgba(26,27,33,0.126)}
.ls-rs small{color:#504f50}
.ls-rd1.ls-nos .ls-rs b{text-shadow:none;color:#4b4a4c}
.ls-rd1 .p{color:#4b4a4c}
.ls-rd1 .ls-mo{color:#4f4e4f;text-decoration-color:currentcolor;text-decoration-color:transparent}
@media(hover:hover){a.ls-tip:hover .ls-rd1{box-shadow:0 0 0 1px #959087,0 18px 40px rgba(30,31,37,0.180),0 0 28px rgba(26,27,33,0.032)}
a.ls-tip:hover .ls-mo{color:#111216;text-decoration-color:currentColor}}
@media(max-width:699.98px){.ls-n .a3-lg,.ls-n .a3-lg.a3-lgl{background-image:none!important;background-color:rgba(26,27,33,calc(((.25 + var(--g)*.6)) * 0.9))!important}
.ls-ld .a3-lg.a3-lgl{background-image:none!important;background-color:#212329!important}
.ls-ld .a3-lg:not(.a3-lgl){background-image:none!important;background-color:#e1dacc!important}
.ls-z{color:#4f4e4f}
.ls-f .ls-n .a3-lg:not(.a3-lgl){background-image:none!important;background-color:#e1dacc!important}
.ls-f .ls-n .a3-lg.a3-lgl{background-image:none!important;background-color:#212329!important}}
.a3-lg.a3-lgl{background-image:none!important;background-color:#212329!important}
.th-a3 .ax-hd>a:not(.btn){color:#38383d;text-decoration-color:currentcolor}
.th-a3 .ax-hd>a:not(.btn):hover{color:#111216}
.a3-w-tw .st-n .a3-twl{box-shadow:0 0 0 1px #c6c0b2;background-image:none;background-color:#dbd4c6}
.a3-w-tw .sticker:is(:hover,:focus-within) .a3-twl{box-shadow:0 0 0 1px #6a6765,0 0 14px rgba(26,27,33,0.081)}
.a3-w-tw .sticker:is(:hover,:focus-within) .a3-twl img{filter:none}
:root:root:root body.th-a3 :is(.digest.sm,.foot-disc,.cc-404,.cframe):not(.a3-p):not(.a3-p *){border-color:var(--a3-ln)!important;background-image:none!important;background-color:#ebe5d6!important;box-shadow:none!important}
:root:root:root body.th-a3 :is(.digest.sm,.foot-disc,.cc-404,.cframe):not(.a3-p):not(.a3-p *):is(:hover,:focus-within){border-color:#b7b1a5!important}
:root:root:root body.th-a3 :is(.digest.sm,.foot-disc,.cc-404,.cframe):not(.a3-p):not(.a3-p *)>.cc-t{color:#38383d!important;background-image:none!important;background-color:var(--k-fff)!important}
:root:root:root body.th-a3 :is(.digest.sm,.foot-disc,.cc-404,.cframe):not(.a3-p):not(.a3-p *)>.cc-t::before{box-shadow:0 0 0 4px var(--k-fff)!important}
:root:root:root body.th-a3 :is(.card.panel,.card.mini,.lp .box,.glinks a,.glist>li,.cm-tap,.alt3 a):not(.ns,.sticker,.lt,.cc,.sheet,.tbl,.digest,.cframe){border-color:#c6c0b2!important;background-image:none!important;background-color:#e8e2d3!important;box-shadow:none!important}
:root:root:root body.th-a3 :is(.card.panel,.card.mini,.glinks a,.glist>li,.cm-tap,.alt3 a):not(.ns,.sticker,.lt,.cc,.sheet,.tbl,.digest,.cframe):is(:hover,:focus-within){border-color:#84807a!important;background-image:none!important;background-color:#e2dbcd!important;color:var(--tx)!important}
:root:root .th-a3 .t7-pick img{filter:grayscale(1) contrast(1.05)}
:root:root .th-a3 .t7-pick:is(:hover,:focus-visible) img{filter:none}
.th-a3 .fl.a3-fl>.nw::after{color:#4f4e4f}
.a3-w-tw .a3-tf{color:#38383d}
.a3-w-tw .a3-tf>li>span{color:#4f4e4f}
.a3-w-tw .a3-tf>li>b{color:#1a1b21}
.a3-w-tw .a3-tf .a3-tfb{background-image:repeating-linear-gradient(90deg,#1a1b21 0 calc(10% - 3px),transparent calc(10% - 3px) 10%);background-color:transparent}
:root:root:root body.th-a3 .a3-p p.unc{border-color:#c6c0b2!important;background-image:none!important;background-color:#e8e2d3!important;box-shadow:none!important}
@media(max-width:640px){:root:root:root body.th-a3 .lp .a3-p tbody tr{border-color:#c6c0b2!important;background-image:none!important;background-color:#e8e2d3!important}}
:root:root:root:root body.th-a3 .a3-w-ps>p{border-color:currentcolor!important;background-image:none!important;background-color:transparent!important}
:root:root body.th-a3 .a3-prices .a3-pm{color:#38383d;text-decoration-color:currentcolor;text-decoration-color:#a6a196}
:root:root body.th-a3 .a3-prices .a3-pm:hover{color:#111216;text-decoration-color:#131519}
@media(max-width:999.98px){:root:root body.th-a3 .ps .tw{border-color:currentcolor!important;background-image:none!important;background-color:transparent!important}
:root:root body.th-a3 .ps #ps thead{border-color:currentcolor!important}
:root:root body.th-a3 .ps #ps tbody tr{border-color:currentcolor!important;background-image:none!important;background-color:transparent!important;box-shadow:none!important}
:root:root body.th-a3 .ps #ps td{border-color:currentcolor!important}
:root:root body.th-a3 .ps #ps td[data-l="plan"]{color:var(--k-000)}
:root:root body.th-a3 .ps #ps td[data-l="monthly"]{color:var(--k-000)}
:root:root body.th-a3 .ps #ps td[data-l="annual"]{color:var(--k-555)}
:root:root body.th-a3 .ps #ps td[data-l="limits"]{color:var(--k-333)}
:root:root body.th-a3 .ps #ps :is(td[data-l="free tier"],td[data-l="BYO key"],td[data-l="checked"]){color:var(--k-555)}
:root:root body.th-a3 .ps #ps :is(td[data-l="free tier"],td[data-l="BYO key"],td[data-l="checked"]):before{color:inherit}
:root:root body.th-a3 .ps #ps td[data-l="checked"] a{color:var(--k-555)}}
:root:root .th-a3 .a3-hero h1.n9-h1{color:#1a1b21}
:root:root .th-a3 .a3-hero h1.n9-h1 .a3-sub{color:#4b4a4c;text-shadow:none}
:root:root .th-a3 .a3-hero .t7-blob{filter:none!important}
:root:root .th-a3 .a3-hero .t7-bub{background-image:none!important;background-color:transparent!important;border-color:currentcolor!important;box-shadow:none!important}
:root:root .th-a3 .a3-hero .t7-l{color:#4b4a4c}
:root:root .th-a3 .a3-hero .t7-gt{color:#38383d}
:root:root .th-a3 .a3-hero .t7-l b,:root:root .th-a3 .a3-hero .t7-l a{color:#1a1b21}
.th-a3 .a3-vg .vs-q{color:#4b4a4c}
.th-a3 .a3-vg .vs-q .pr{color:#1a1b21}
.th-a3 .a3-vg .vs-ans{color:#1a1b21}
.th-a3 .a3-vg .vs-ans b{color:#111216}
.th-a3 .a3-vg .vs-rk{color:#4b4a4c}
.th-a3 .a3-vg .vs-tn .mono img{filter:grayscale(1)}
.th-a3 .a3-vg .vs-p:is(:hover,:focus-within) .vs-tn .mono img{filter:none}
.th-a3 .a3-vg .vs-dl dt{color:#4b4a4c}
.th-a3 .a3-vg .vs-dl dd{color:#303136}
.th-a3 .a3-vg .vs-k{color:#4b4a4c}
.th-a3 .a3-vg .vs-v{color:#303136}
.th-a3 .a3-vg .vs-hd .vs-v{color:#1a1b21}
.th-a3 .a3-vg .vs-win{color:#1a1b21}
.th-a3 .a3-vg .vs-win:before{color:#4f4e4f}
.th-a3 .a3-vg .vs-note{color:#4f4e4f}
.th-a3 .a3-vg .vs-ns{color:#4b4a4c}
@media(max-width:760px){.th-a3 .a3-vg .vs-mh{color:#4f4e4f}}
.th-a3 main.lp>h1.vs-h1 .vs-vs{color:#4f4e4f}
.th-a3 .nav .row>.ax-x{color:#1a1b21;text-decoration-color:currentcolor}
.th-a3 .nav .row>.ax-x:hover,.th-a3 .nav .row>.ax-x:focus-visible{color:#111216;filter:drop-shadow(0 0 6px rgba(26,27,33,0.203))}
.th-a3 .nav .row>.ax-x:focus-visible{outline-color:#1a1b21}
:root:root:root:root body.th-a3 .nl .a3-w-nh .nl-sub{color:#36373b!important}
:root:root:root:root body.th-a3 .nl .glog .ri .meta{color:#36373b!important}
:root:root:root:root body.th-a3 .a3-w-ttl>h1+p.updated{color:#36373b!important}
:root:root:root:root body.th-a3:not(.home) .a3-w-pg>p.sub{color:#36373b!important}
:root:root:root:root body.th-a3 .a3-prices .a3-pr-more a.lnk{text-decoration-color:currentcolor}
:root:root:root:root body.th-a3 .a3-prices .a3-th2{color:#504f50}
:root:root:root:root body.th-a3 .a3-prices .a3-pk a{text-decoration-color:currentcolor}
:root:root:root:root body.th-a3 .a3-prices .a3-pk .a3-pt{color:#1a1b21}
:root:root:root:root body.th-a3 .a3-prices .a3-pk .a3-pc{color:#4b4a4c}
:root:root:root:root body.th-a3 .a3-prices tr:hover .a3-pk .a3-pc{color:#303136}
:root:root:root:root body.th-a3 .a3-prices .a3-pk a:hover{text-decoration-color:currentcolor}
:root:root:root:root body.th-a3 .a3-w-lg .a3-lt-how{color:#4b4a4c;border-color:currentcolor!important}
.th-a3 main>.a3-w-vt>h1.vs-h1 .vs-vs{color:#4f4e4f}
/* mirror 3. community.css (community/lib/style.css.js) */
.cm a{color:var(--k-000)}
.cm .muted{color:var(--k-555)}
.sr{border-color:currentcolor!important}
.cm-tap a.stretch{text-decoration-color:currentcolor}
.cm-tap:hover a.stretch{text-decoration-color:currentcolor}
.cm-tap a.stretch:focus-visible{outline-color:currentcolor}
.cm-tap:focus-within{outline-color:var(--k-000)}
.cm-av{border-color:var(--b);background-image:none;background-color:var(--k-fff)}
.cm-rows a.stretch{color:var(--k-000)}
.cm-feed .when{color:var(--k-555)}
.cm-chat-h{color:var(--k-555)}
.cm-chat-h .cm-dot{background-image:none;background-color:var(--k-000)}
.cm-chat-h .cm-live.off .cm-dot{background-image:none;background-color:var(--k-fff);border-color:var(--k-000)}
.cm-msg .cm-meta{color:var(--k-555)}
.cm-msg .cm-meta a{color:var(--k-000)}
.cm-msg .cm-meta .bdr{border-color:var(--k-000);color:var(--k-000)}
.cm-msg .cm-meta .rp{background-image:none;background-color:var(--k-fff)}
.cm-empty{color:var(--k-555)}
.cm-compose small{color:var(--k-555)}
.cm-link{background-image:none;background-color:transparent;border-color:currentcolor;color:var(--k-555);text-decoration-color:currentcolor}
.cm-link:hover{color:var(--k-000)}
.cm-rep{color:var(--k-555)}
.cm-kv .k{color:var(--cm-mu)}
.cm-kv a{color:#1a1b21}
.cm-flag{border-color:var(--b);background-image:none;background-color:var(--k-fff)}
.cm-err{border-color:var(--b)}
.cm .hint{color:var(--k-555)}
.cm-form fieldset{border-color:var(--b)}
.cm-trow.hd span{color:var(--k-555)}
.cm-chk input{accent-color:var(--k-000)}
.cm-faces input:focus-visible+img{outline-color:var(--k-000)}
.cm-faces img{border-color:var(--k-000);background-image:none;background-color:var(--k-fff)}
.cm-faces input:checked+img{outline-color:var(--k-000)}
.cm .btn[disabled]{background-image:none!important;background-color:var(--k-fff)!important;color:var(--k-777)!important;border-color:var(--k-bbb)!important}
.cm section.c{border-color:var(--b)}
.cm-q th{color:var(--k-555)}
.cm-bwbox li a{color:var(--k-000)}
.cm-bwbox li:hover{background-image:none;background-color:var(--k-f6f6f6)}
@media(max-width:640px){.cm-q td{border-color:currentcolor!important}}
.cm .cm-thumb{border-color:var(--k-000);background-image:none;background-color:var(--k-f4f4f4)}
.cm-shots img{border-color:var(--k-000);background-image:none;background-color:var(--k-f4f4f4)}
.cm-shots .cm-cap{color:var(--k-555)}
.cm-upd-h time{border-color:var(--k-000)}
.cm-msg .cm-re{color:var(--k-555)}
.cm-msg .rpl{color:var(--k-555)}
.cm-reply .cm-meta .rp{background-image:none;background-color:transparent}
.cm-msg .rpl:hover{color:var(--k-000)}
.cm-feed li.cm-new{background-image:none;background-color:var(--k-f4f4f4)}
.cm-inote{color:var(--k-333)}
:root .cm span.pr[aria-hidden="true"],:root .cm-bar-p .pr{color:var(--k-000)}
.cm-bw0-l{color:var(--k-000)}
.cm-bw0-l .cm-mono{color:var(--k-555)}
.cm{--cm-ln:#c6c0b2;--cm-mu:#4b4a4c;--cm-dim:#4f4e4f}
.cm .a3-p>.a3-lb .a3-hr{color:var(--cm-dim)}
.cm .a3-p>.a3-lb .a3-hr::before{color:#504f50}
.cm-pn{color:var(--cm-mu)}
.cm-hd .cm-av.hd{border-color:#b7b1a5;background-image:none;background-color:#e1dacc}
.cm-meta-l{color:#454447}
.cm-meta-l a{color:#1a1b21}
.cm-bar{background-image:none;background-color:rgba(244,238,224,.9)}
.cm-bar-p{color:#1a1b21}
.cm-bar nav a,.cm-bar nav button{color:#454447;text-decoration-color:currentcolor;background-image:none;background-color:transparent;border-color:currentcolor}
.cm-bar nav a:hover,.cm-bar nav button:hover{color:#111216}
.cm-bar nav a[aria-current]{color:#1a1b21;text-decoration-color:currentcolor}
.cm-fn{color:var(--cm-dim)}
.cm-tl{color:#36373b}
.cm-more{color:var(--cm-mu)}
.cm .cm-thumb{border-color:var(--cm-ln);background-image:none;background-color:#e1dacc}
.cm-chip{color:#1a1b21;background-image:none;background-color:#e9e3d4;border-color:#1a1b21;text-decoration-color:currentcolor}
a.cm-chip:focus-visible{background-image:none;background-color:#1a1b21;color:#f4eee0}
@media(hover:hover){a.cm-chip:hover{background-image:none;background-color:#1a1b21;color:#f4eee0}}
.cm-chip0{color:var(--cm-mu);border-color:#b7b1a5}
.cm .a3-mono.cm-lg.xs{box-shadow:inset 0 0 0 1px #a6a196}
.cm-tap:is(:hover,:focus-within) .a3-lg img,a.cm-chip:is(:hover,:focus-visible) .a3-lg img,span.cm-chip:hover .a3-lg img{filter:none}
.cm .cm-trw{border-color:var(--cm-ln);background-image:none;background-color:#e8e2d3}
.cm .cm-trw.cm-tap:hover{border-color:#a09b90}
.cm-tn a,.cm-tn b{color:#1a1b21;text-decoration-color:currentcolor}
.cm-tn small{color:var(--cm-mu)}
.cm-trw.cm-tap:hover .cm-tn a{text-decoration-color:currentcolor}
.cm-sc{color:#1a1b21}
.cm-sc small{color:var(--cm-dim)}
.cm-sc0{color:var(--cm-dim)}
.cm-tr{color:var(--cm-mu)}
.cm-tot{color:#1a1b21}
.cm-tot small{color:var(--cm-dim)}
.cm-rows a.stretch{color:#1a1b21}
.cm-rows .when{color:var(--cm-mu)}
.cm-feed p{color:#36373b}
.cm-feed p a{color:#1a1b21}
.cm-feed li.cm-new{background-image:none;background-color:transparent}
.cm-feed li.cm-new p::before{color:#1a1b21}
.cm-av{border-color:#b7b1a5;background-image:none;background-color:#e1dacc}
:root .cm :is(.btn.on,#cm-on){background-image:none!important;background-color:var(--k-000)!important;color:var(--k-fff)!important;border-color:var(--k-000)!important}
.cm-prose p{color:#36373b}
.cm-note p{color:#36373b}
.cm-tips{color:#36373b}
.cm-rep{color:var(--cm-mu)}
.cm-kv .k{color:var(--cm-mu)}
.cm-kv a{color:#1a1b21}
.cm-flag{border-color:var(--cm-ln);background-image:none;background-color:#e8e2d3;color:#36373b}
.cm-flag::before{color:#1a1b21}
.cm-flag.err{color:#1a1b21}
.cm-err{border-color:#4b3c43}
.cm-form fieldset{border-color:var(--cm-ln)}
.cm-legal p,.cm-legal li{color:#36373b}
.cm-br::before,.cm-trw.cm-tap::before,.cm-feed>li::before{background-image:none;background-color:transparent}
.cm-br:is(:hover,:focus-within)::before,.cm-trw.cm-tap:is(:hover,:focus-within)::before,.cm-feed>li:is(:hover,:focus-within)::before{background-image:none;background-color:rgba(26,27,33,0.041)}
:root:root:root:root:root body.th-a3 .cm :is(.cm-br,.cm-trw,.cm-feed>li){border-color:currentcolor!important;background-image:none!important;background-color:transparent!important;box-shadow:none!important}
:root:root:root:root:root body.th-a3 .cm :is(.cm-br,.cm-trw,.cm-feed>li):focus-within{outline-color:#1a1b21}
.cm-br .cm-thumb{border-color:#c6c0b2}
.cm-rk{color:#4f4e4f}
.cm-br .cm-fn{color:#4f4e4f}
.cm-br .cm-fn .cm-by{color:#454447;text-decoration-color:currentcolor}
.cm-br .cm-fn .cm-by:hover,.cm-br .cm-fn .cm-by:focus-visible{color:#1a1b21;text-decoration-color:currentcolor}
.cm .cm-br h3{color:#1a1b21}
.cm-br h3 a{color:#1a1b21;text-decoration-color:currentcolor}
.cm-br .cm-tl{color:#454447}
.cm-bs b{color:#1a1b21}
.cm-blist>.cm-br-n:first-child .cm-bs b{color:#111216;text-shadow:0 0 18px rgba(26,27,33,0.081)}
.cm-blist>.cm-br-n:first-child .cm-rk{color:#1a1b21}
.cm-bs small{color:#4f4e4f}
.cm-bs .cm-cost{color:#4f4e4f}
.cm-ci .cm-inote{color:#454447}
.cm-chip{color:#38383d;background-image:none;background-color:transparent;border-color:#c6c0b2}
a.cm-chip:focus-visible{background-image:none;background-color:transparent;color:#1a1b21;border-color:#84807a}
@media(hover:hover){a.cm-chip:hover{background-image:none;background-color:transparent;color:#1a1b21;border-color:#84807a}}
.cm-chip0{color:#4f4e4f}
.cm-more{color:#4f4e4f}
.cm .tag,.cm-bar .tag{border-color:#aba599!important;color:#38383d!important;background-image:none!important;background-color:transparent!important}
.cm-upd-h time{border-color:#aba599;color:#38383d}
.cm-tn small{color:#4f4e4f}
.cm-sc small{color:#4f4e4f}
.cm-sc0{color:#4f4e4f}
.cm-tr{color:#4f4e4f}
.cm .a3-lg.cm-lgd img{filter:grayscale(1) invert(1) brightness(.85)}
.cm .a3-lg.cm-lgb img{filter:grayscale(1) brightness(.7)}
.cm-tap:is(:hover,:focus-within) .a3-lg.cm-lgd img,a.cm-chip:is(:hover,:focus-visible) .a3-lg.cm-lgd img{filter:invert(1)}
.cm .cm-feed p{color:#454447}
.cm .cm-feed p a,.cm .cm-feed p b{color:#1a1b21}
.cm-feed .when{color:#4f4e4f}
.cm-kv li,.cm-rows li,.cm-upd,.cm .cm-q td,.cm .cm-q th{border-bottom-color:#aba599}
.cm-msg{border-bottom-color:#aba599}
.cm-msg .cm-meta .bdr{border-color:#aba599;color:#38383d}
.cm-msg .cm-meta a{color:#1a1b21}
.cm-msg p{color:#38383d}
.cm-msg .cm-re{color:#4f4e4f}
.cm-repp .cm-rep{color:#454447}
.cm-repp .cm-rep a{color:#1a1b21}
.cm-repp .cm-link{color:#454447}
.cm-form input[type=url],.cm-form input[type=email]{background-image:none!important;background-color:#e9e3d4!important;color:#1a1b21!important}
.cm-faces img{border-color:#c6c0b2;background-image:none;background-color:#e1dacc}
.cm-faces label:hover img{border-color:#84807a}
.cm-faces input:checked+img{border-color:#84807a;outline-color:#1a1b21}
.cm-faces input:focus-visible+img{outline-color:#1a1b21}
@media(max-width:640px){.cm .cm-q tr{border-color:#c6c0b2!important;background-image:none;background-color:#e8e2d3}}
@media(max-width:699.98px){.cm-br .cm-bs b,.cm-blist>.cm-br-n:first-child .cm-bs b{color:#1a1b21;text-shadow:none}
.cm-br .cm-bs .cm-cost::before{color:#504f50}}
.cm .cm-au h1{color:#1a1b21;text-shadow:0 0 22px rgba(26,27,33,0.054)}
.cm .cm-au .sub{color:#454447}
.cm-au-q{color:#4b4a4c}
.cm-au-lines p{color:#38383d}
.cm-au-lines p>span{color:#1a1b21}
.cm .cm-si .cm-err{border-color:#a09b90;background-image:none;background-color:#e8e2d3;color:#1a1b21}
.cm-si-fine{color:#4b4a4c}
.cm-si-fine a{color:#1a1b21}
:root .cm-si-tb :is(.btn.sm.on,#cm-si-on){background-image:none!important;background-color:var(--k-000)!important;color:var(--k-fff)!important;border-color:var(--k-000)!important}
.cm-nudge{background-image:none;background-color:#ece6d7}
.cm-nudge p{color:#454447}
.cm-nudge p>span{color:#4f4e4f}
.cm-nudge button{color:#4b4a4c;background-image:none;background-color:transparent;border-color:currentcolor;text-decoration-color:currentcolor}
.cm-nudge button:hover{color:#111216}
:root:root .cm-si-f input[type=password]{border-color:#1a1b21;background-image:none;background-color:#e9e3d4;color:#1a1b21;box-shadow:none}
:root:root .cm-si-f input[type=password]:focus-visible{outline-color:#1a1b21}
.cm-form :is(input[type=text],input[type=email],input[type=url],select,textarea){border-color:#1a1b21!important;background-image:none!important;background-color:#e9e3d4!important;color:#1a1b21!important}
.cm-form :is(input[type=text],input[type=email],input[type=url],textarea)::placeholder{color:#4f4e4f}
.cm-form :is(input,select,textarea):focus,.cm-form :is(input,select,textarea):focus-visible{outline-color:#1a1b21!important;box-shadow:none!important}
.cm-k{color:#4b4a4c}
.cm-sep{color:#504f50}
.cm-big{color:#1a1b21;text-shadow:0 0 18px rgba(26,27,33,0.068)}
.cm-sr .cm-rk{color:#4f4e4f}
.cm-srows>.cm-sr-n:first-child .cm-rk{color:#1a1b21}
.cm-shp-t{color:#1a1b21}
.cm-shp-b{color:#4f4e4f}
.cm-shp-b a{color:#38383d}
span.cm-sl{color:var(--cm-mu)}
.cm-mrows .cm-rk{color:#4f4e4f}
.cm-mrows li:first-child .cm-rk{color:#1a1b21}
.cm-mn a{color:#1a1b21;text-decoration-color:currentcolor}
.cm-mn small{color:#4f4e4f}
.cm-ml{color:#1a1b21}
.cm-upd-ms .cm-upd-h .cm-k{color:#38383d}
.cm-upd-n small{color:#4f4e4f}
.cm-gl{color:#38383d}
.cm-gl .cm-k{color:#1a1b21}
.cm-check.cm-rb{border-color:#c6c0b2;background-image:none;background-color:#e8e2d3}
.cm-check.cm-rb p{color:#454447}
.cm-draft{border-color:#aba599;background-image:none;background-color:#e8e2d3}
.cm-draft h3{color:#1a1b21}
.cm-actr .cm-feed .when{color:#4f4e4f}
.cm-nudge{border-color:#aba599}
.cm-at{border-color:#1a1b21;color:#4b4a4c}
.cm-bwp .cm-bwi{color:#454447}
.cm-bwp .cm-bwk small{color:#4b4a4c}
.cm-bwp .cm-bwn{color:#1a1b21}
.cm-bwp .cm-bwt{color:#1a1b21;text-decoration-color:currentcolor}
.cm-bwp .cm-bwt:hover,.cm-bwp .cm-bwt:focus-visible{text-decoration-color:currentcolor}
.cm-bwp .cm-bwm small{color:#4f4e4f}
.cm-bwp .cm-bwm small:first-of-type{color:#454447}
.cm-bwp .cm-bws b{color:#1a1b21}
.cm-bwp .cm-bws small{color:#4f4e4f}
.cm-bwp .cm-bwa{border-color:#c6c0b2;color:#38383d;text-decoration-color:currentcolor}
.cm-bwp .cm-bwa:hover,.cm-bwp .cm-bwa:focus-visible{border-color:#1a1b21;color:#1a1b21}
.cm{--cm-t2:#36373b;--cm-bg2:#e8e2d3}
.cm-more-l .cm-sep,.cm-sep{color:var(--cm-dim)}
.cm-tabs{border-color:currentcolor}
:root:root:root:root:root:root body .cm .cm-hs-hd>.sub{color:var(--cm-t2)}
.cm-hs-empty{color:var(--cm-mu)}
.cm-hs-stats b{color:var(--tx)}
.cm-hs-stats dt{color:var(--cm-mu)}
.cm-hs-idle .cm-pn{color:var(--cm-t2)}
.cm-hs-ct a{text-decoration-color:currentcolor;color:var(--tx)}
.cm-hs-ct a:hover,.cm-hs-ct a:focus-visible{background-image:none;background-color:var(--cm-bg2)}
.cm-hs-rk{color:var(--cm-dim)}
.cm-hs-ct li:first-child .cm-hs-rk{color:var(--tx)}
.cm-hs-cm{color:var(--cm-mu)}
.cm-hs-ro{outline-color:currentcolor}
.cm-hs-cmd{color:var(--cm-mu)}
.cm-hs-ro h3 a{color:var(--tx);text-decoration-color:currentcolor}
.cm-hs-ro h3 a:hover,.cm-hs-ro h3 a:focus-visible{text-decoration-color:currentcolor}
.cm-hs-by{color:var(--cm-mu)}
.cm-hs-g{color:var(--cm-t2)}
.cm-hs-rd dd{color:var(--tx)}
.cm-hs-rd dt,.cm-hs-k{color:var(--cm-mu)}
.cm-hs-stk li{color:var(--cm-t2)}
.cm-hs-stk .a3-lg img,.cm-hs-cmp .a3-lg img{filter:none!important}
.cm-hs-none{color:var(--cm-mu)}
.cm-hs-u{color:var(--cm-mu)}
.cm-hs-vn b{color:var(--tx)}
.cm-hs-vn span{color:var(--cm-mu)}
:root:root:root body .cm table.cm-hs-cmp{color:var(--cm-t2)}
.cm-hs-cmp th{color:var(--cm-mu)}
.cm-hs-cmp td i{background-image:none;background-color:var(--a3-ln)}
.cm-hs-cmp td.y i{background-image:none;background-color:var(--tx)}
.cm-hs-cmp tr.both td:first-child{color:var(--tx)}
.cm-cdw{color:var(--cm-mu)}
.cm-cd{color:var(--tx)}
.cm-hb-w .cm-wnone{color:var(--cm-mu)}
.cm-spot{border-color:var(--cm-ln);background-image:none;background-color:var(--cm-bg2)}
.cm-spot-n{color:var(--tx)}
.cm-spot-k{color:var(--cm-mu)}
.cm-spot-t{color:var(--tx)}
.cm-spot-l small{color:var(--cm-mu)}
.cm-shp-b{color:var(--cm-mu)}
:root:root:root:root body .cm .cm-home .cm-wkb .cm-rk{color:var(--cm-dim)!important}
.cm-home .cm-wkb .cm-shp-t .cm-k{color:var(--cm-t2)}
.cm-bcards>.cm-bc:focus-within{outline-color:var(--tx)}
span.cm-bm{border-color:var(--a3-ln);background-image:radial-gradient(circle,rgba(26,27,33,0.081) 1px,transparent 1.3px), none;background-color:var(--cm-bg2);color:var(--tx)}
.cm-bcards h3 a{color:var(--tx);text-decoration-color:currentcolor}
.cm-bc-by{color:var(--cm-mu)}
.cm-bc-g{color:var(--cm-t2)}
.cm-bc-u{color:var(--cm-mu)}
.cm-htm{color:var(--cm-mu)}
.cm-bcards>.cm-bc:is(:hover,:focus-within) .a3-lg img{filter:none!important}
.cm-hl{color:var(--cm-mu)}
.cm-hl b{color:var(--tx)}
:root:root:root:root body .cm .cm-home .cm-dbars>li.cm-db{border-color:currentcolor!important;background-image:none!important;background-color:transparent!important}
.cm-db>a{color:var(--tx);text-decoration-color:currentcolor}
.cm-dots i{background-image:none;background-color:var(--a3-ln)}
.cm-dots i.on{background-image:none;background-color:var(--cm-t2)}
.cm-db:first-child .cm-dots i.on,.cm-db:is(:hover,:focus-within) .cm-dots i.on{background-image:none;background-color:var(--tx)}
.cm-dn{color:var(--cm-mu)}
.cm-dn b{color:var(--tx)}
.cm-hb-a .cm-feed .when{color:var(--cm-mu)}
.cm-log .cm-day{color:var(--cm-dim)}
.cm-ltag{color:var(--cm-t2)}
.cm-log>li.cm-new .cm-ltag{color:var(--tx)}
@media(max-width:699.98px){.cm-hs-ro{background-image:none;background-color:var(--k-fff);box-shadow:0 -16px 48px rgba(30,31,37,0.210)}
.cm-hs-ro::before{background-image:none;background-color:#b0aa9e}}
.cm-crest b{color:var(--ci)}
.cm-pcard{background-image:none;background-color:#fdf7ea;border-color:#16181f;box-shadow:2px 2px 0 #16181f}
.cm-pcard:hover{box-shadow:3px 3px 0 #16181f}
.cm-pcard-pv{background-image:none;background-color:#e8e2d2}
.cm-pv0{color:#16181f;background-image:radial-gradient(120% 90% at 100% 0,rgba(200,83,15,.18),transparent 60%), none;background-color:#efe8d9}
.cm-pcard-pv .cm-rk{color:#16181f;background-image:none;background-color:#fdf7ea;border-color:#16181f}
.cm-st{border-color:#16181f;background-image:none;background-color:#fdf7ea;color:#16181f}
.cm-st-live{background-image:none;background-color:#1f7a4d;color:#111216;border-color:#1f7a4d}
.cm-st-building{background-image:none;background-color:#f3e7d7;color:#7a2e05}
.cm-pcard h3 a{color:#16181f;text-decoration-color:currentcolor}
.cm-pcard .cm-tl{color:#3d3f43}
.cm-pcard-0{color:#525354}
.cm-pcard-l{color:#16181f;text-decoration-color:currentcolor;text-decoration-color:#c8530f}
.cm-pcard .cm-by{color:#16181f;text-decoration-color:currentcolor}
.cm-nc{color:#525354}
.cm-nc b{color:#16181f}
.cm-pc{--cc:#667062}
.cm-pc-k{color:#525354}
.cm-pc-st{border-color:#16181f;background-image:none;background-color:#16181f}
.cm-pc-st dt{color:rgba(253,247,234,.72)}
.cm-pc-st dd{color:#fdf7ea}
.cm-pc-st dd small{color:rgba(253,247,234,.72)}
.cm-fm i{background-image:none;background-color:rgba(253,247,234,.14);color:#fdf7ea}
.cm-fm .cm-f-s{background-image:none;background-color:#2f9a62}
.cm-fm .cm-f-n{background-image:none;background-color:#c8530f}
.cm-lt .cm-fm i,.cm-ladder .cm-fm i{background-image:none;background-color:#e1dacb;color:#16181f}
.cm-lt .cm-fm .cm-f-s{background-image:none;background-color:#2f9a62;color:#111216}
.cm-lt .cm-fm .cm-f-n{background-image:none;background-color:#c8530f;color:#111216}
.cm-zone{border-color:rgba(22,24,31,.18);background-image:none;background-color:#f4edde}
.cm-zone-up{background-image:none;background-color:#eeeee0;border-color:#1f7a4d}
.cm-zone-dn{background-image:none;background-color:#f2e5d9;border-color:#b42318}
.cm-lt caption{color:#525354}
.cm-lt th{color:#525354;background-image:none;background-color:transparent}
.cm-lt td{background-image:none;background-color:transparent}
.cm-lt td a{color:#16181f;text-decoration-color:currentcolor}
.cm-lt tr.on td{background-image:none;background-color:#f3e7d7}
.cm-lt tr.on td:first-child{box-shadow:inset 3px 0 0 #c8530f}
.cm-lt-div th{color:#16181f}
.cm-lt-div th small{color:#525354}
.cm-lt-empty{color:#3d3f43}
.cm-zt.up{background-image:none;background-color:#eeeee0;color:#14532d}
.cm-zt.dn{background-image:none;background-color:#f2e5d9;color:#8a1c12}
.cm-pc-f{color:#3d3f43}
.cm-soon{color:#525354}
.cm-pc-note{color:#525354}
.cm-empty .cm-note{color:#3d3f43}
body .cm-lt td,body .cm-lt th,body .cm-ladder td,body .cm-ladder th{box-shadow:none}
body .cm-lt td.n,body .cm-ladder td.n{color:#16181f}
body .cm-lt tr.on td:first-child{box-shadow:inset 3px 0 0 #c8530f!important}
body .cm-lt,body .cm-ladder{border-color:currentcolor!important;background-image:none!important;background-color:transparent!important}
body .cm-nodb{background-image:none;background-color:#fdf7ea}
.cm-hx-demo{border-color:currentColor}
.cm-hx-demo{border-color:currentColor}
:root:root:root:root body .cm .cm-hx-hero #hs-h{color:var(--bc-ink,#13151c)!important}
.cm-hx-hero .cm-hx-p{color:var(--bc-or)}
:root:root:root:root body .cm .cm-hx-hero .cm-hx-sub{color:var(--bc-ink-2,#292d39)}
:root:root:root:root body .cm .cm-hx .cm-hx-empty{color:var(--bc-ink-2,#393b44)}
/* mirror 4. waitlist inline css (community/lib/waitlist.js) */
body.cw-page .cw-pg .cw-msg{color:#454447}
body.cw-page .cw-pg .cw-si{color:#454447}
body.cw-page .cw-dk .cd{border-color:currentcolor;background-image:none;background-color:transparent;box-shadow:none}
/* mirror 5. desk.css (site/assets/community/desk.css) */
.cd{border-color:#d4cdbf;background-image:none;background-color:#ebe5d6;box-shadow:0 40px 90px -40px rgba(26,27,33,0.041),0 0 0 1px rgba(30,31,37,0.180)}
.cd button{color:inherit}
.cd :focus-visible{outline-color:#1a1b21}
.cd-screen{color:#1a1b21;background-image:radial-gradient(760px 420px at 72% 18%,rgba(26,27,33,0.059),transparent 62%), radial-gradient(620px 380px at 12% 96%,rgba(26,27,33,0.032),transparent 60%), none;background-color:#e6dfd1;box-shadow:inset 0 0 0 1px #dbd4c6}
.cd-hint{color:#504f50}
.cd-bar{background-image:none;background-color:rgba(244,238,224,.6)}
.cd-mb{border-color:currentcolor;background-image:none;background-color:transparent;color:#282a30}
.cd-mb[aria-expanded="true"]{background-image:none;background-color:rgba(26,27,33,0.117);color:#111216}
.cd-an{color:#111216}
.cd-menu{background-image:none;background-color:rgba(219,212,198,.94);border-color:rgba(26,27,33,0.090);box-shadow:0 18px 40px -8px rgba(30,31,37,0.255)}
.cd-menu button{border-color:currentcolor;background-image:none;background-color:transparent;color:#202228}
.cd-menu button:focus-visible{background-image:none;background-color:#1a1b21;color:#f4eee0;outline-color:currentcolor}
.cd-menu hr{border-color:currentcolor;background-image:none;background-color:rgba(26,27,33,0.090)}
.cd-sys{color:#282a30}
.cd-clk{color:#1a1b21}
.cd-sf{background-image:none;background-color:#e5dfd0}
.cd-ib{border-color:currentcolor;background-image:none;background-color:transparent;color:#38383d}
.cd-ib:disabled{color:#504f50}
.cd-addr{background-image:none;background-color:#d9d2c4;border-color:#cbc5b7}
.cd-url{color:#2c2d33}
.cd-lock{color:#4b4a4c}
.cd-rl{color:#4b4a4c}
.cd-load{background-image:none;background-color:#1a1b21;box-shadow:0 0 6px rgba(26,27,33,0.248)}
.cd-win{background-image:none;background-color:#ebe5d6;border-color:#c6c0b2;box-shadow:0 34px 80px -24px rgba(30,31,37,0.285),0 0 0 1px rgba(30,31,37,0.150),inset 0 1px 0 rgba(26,27,33,0.018)}
.cd-tb{background-image:none;background-color:#e8e2d3}
.cd-tt{color:#4b4a4c}
.cd-li{border-color:currentcolor;background-image:none;background-color:#ff5f57;box-shadow:inset 0 0 0 .5px rgba(30,31,37,0.105);color:rgba(30,31,37,0.180)}
.cd-li.cd-y{background-image:none;background-color:#febc2e}
.cd-li.cd-g{background-image:none;background-color:#28c840}
.cd-screen:not(.win-focus) .cd-win .cd-li,.cd-term:not(.is-front) .cd-li{background-image:none;background-color:#b0aa9e}
.cd-term{background-image:none;background-color:rgba(244,238,224,.9);border-color:#c6c0b2;box-shadow:0 30px 70px -20px rgba(30,31,37,0.285)}
.cd-term .cd-tb{background-image:none;background-color:#e2dbcd}
.cd-tx{color:#1a1b21}
.cd-pr{color:#4b4a4c}
.cd-cur{background-image:none;background-color:#1a1b21}
.cd-go{border-color:currentcolor;background-image:none;background-color:transparent;color:#111216}
.cd-toast{background-image:none;background-color:rgba(213,206,192,.9);border-color:rgba(26,27,33,0.108);box-shadow:0 22px 50px -12px rgba(30,31,37,0.270)}
.cd-ti{background-image:none;background-color:#e9e3d4;border-color:#c6c0b2}
.cd-toast p{color:#26272e}
.cd-toast b{color:#111216}
.cd-tx-x{border-color:currentcolor;background-image:none;background-color:transparent;color:#4b4a4c!important}
.cd-tx-x:hover{color:#111216!important}
.cd-tip{background-image:none;background-color:rgba(213,206,192,.94);border-color:rgba(26,27,33,0.108);color:#1a1b21}
.cd-dock ul{background-image:none;background-color:rgba(244,238,224,.72);border-color:#d4cdbf;box-shadow:inset 0 1px 0 rgba(26,27,33,0.018),0 10px 30px -10px rgba(30,31,37,0.240)}
.cd-di{border-color:currentcolor;background-image:none;background-color:transparent}
.cd-di svg{filter:drop-shadow(0 2px 3px rgba(30,31,37,0.165)) brightness(.86)}
.cd-di:focus-visible svg,.cd-di.on svg{filter:drop-shadow(0 2px 3px rgba(30,31,37,0.165)) brightness(.94)}
.cd-dot{background-image:none;background-color:#1a1b21}
.cd-dl{background-image:none;background-color:rgba(213,206,192,.94);border-color:rgba(26,27,33,0.108);color:#1a1b21}
.cd-ps{color:#1a1b21}
.cd-ps>span[aria-hidden]{color:#4f4e4f}
.cd-dmo{color:#4f4e4f}
.cd-nav button{border-color:currentcolor;background-image:none;background-color:transparent;color:#4b4a4c}
.cd-nav button[aria-current]{color:#1a1b21;text-decoration-color:currentcolor}
.cd-body{scrollbar-color:#c6c0b2 transparent}
.cd-view:focus{outline-color:currentcolor}
.cd kbd{border-color:#c6c0b2;color:#454447}
.cd-k{color:#4f4e4f}
.cd-sep{color:#504f50}
.cd-who{border-color:currentcolor;background-image:none;background-color:transparent;color:#454447}
.cd-lk{border-color:currentcolor;background-image:none;background-color:transparent;color:#1a1b21;text-decoration-color:currentcolor;text-decoration-color:#a09b90}
.cd-bt{color:#38383d}
.cd-bt::before{background-image:none;background-color:#1a1b21;box-shadow:0 0 6px rgba(26,27,33,0.248)}
.cd-bn2{color:#4f4e4f}
.cd-lg{background-image:none;background-color:#e0d9cb;box-shadow:inset 0 0 0 1px #cbc5b7}
.cd-lg img{filter:grayscale(1) brightness(.95)}
.cd-lt{color:#38383d}
.cd-n{color:#1a1b21}
.cd-n small{color:#4b4a4c}
.cd-c{color:#2c2d33}
.cd-ty button,.cd-so button{border-color:currentcolor;background-image:none;background-color:transparent;color:#4f4e4f}
.cd-ty button[aria-pressed="true"],.cd-so button[aria-pressed="true"]{color:#1a1b21}
.cd-ty button[aria-pressed="true"]::after{background-image:none;background-color:#1a1b21;box-shadow:0 0 8px rgba(26,27,33,0.225)}
.cd-tc{color:#504f50}
.cd-ty button[aria-pressed="true"] .cd-tc{color:#4b4a4c}
.cd-tf{border-color:#aba599;background-image:none;background-color:transparent;color:#4b4a4c}
.cd-tf.on{border-color:#84807a;color:#1a1b21}
.cd-clr{border-color:currentcolor;background-image:none;background-color:transparent;color:#4b4a4c}
.cd-cnt2{color:#4f4e4f}
.cd-tp{background-image:none;background-color:rgba(244,238,224,.97);border-color:#c6c0b2;box-shadow:0 24px 50px -16px rgba(30,31,37,0.285)}
.cd-tl3,.cd-sl{scrollbar-color:#c6c0b2 transparent}
.cd-og{color:#504f50}
.cd-op{color:#2c2d33}
.cd-op[aria-selected="true"]{background-image:none;background-color:#cec7b9;color:#111216}
.cd-op[aria-selected="true"] .cd-lg img{filter:none}
.cd-on2 small{color:#4f4e4f}
.cd-oc{color:#4f4e4f}
.cd-ro{border-color:currentcolor;background-image:none;background-color:transparent;color:#1a1b21}
.cd-ro:focus-visible{outline-color:currentcolor}
.cd-row:has(.cd-ro:focus-visible){background-image:linear-gradient(90deg,rgba(26,27,33,0.032),transparent 70%);background-color:transparent;box-shadow:-10px 0 0 -8px #1a1b21}
.cd-rx{color:#434246}
.cd-rm{color:#4f4e4f}
.cd-rm .cd-who{color:#454447}
.cd-pinr .cd-k{color:#454447}
.cd-rk{color:#504f50}
.cd-new2{color:#1a1b21}
.cd-dm{color:#4b4a4c}
.cd-dp{color:#1a1b21}
.cd-diff span:not([aria-hidden]){color:#4f4e4f}
.cd-none{color:#454447}
.cd-cl>span[aria-hidden]{color:#4f4e4f}
.cd-kb{color:#504f50}
.cd-kb kbd{color:#4f4e4f}
.cd-mini .cd-lk{text-decoration-color:currentcolor;color:#2c2d33}
.cd-rk2{color:#504f50}
.cd-hv2{color:#4f4e4f}
.cd-rs{color:#504f50}
.cd-rs .cd-lk{color:#454447}
.cd-back{border-color:currentcolor;background-image:none;background-color:transparent;color:#454447}
.cd-fn2{color:#504f50}
.cd-pt{color:#1a1b21;text-shadow:0 0 22px rgba(26,27,33,0.045)}
.cd-qt{color:#1a1b21}
.cd-tl{color:#38383d}
.cd-pin2{color:#4b4a4c}
.cd-like{border-color:#c6c0b2;background-image:none;background-color:transparent;color:#454447}
.cd-like[aria-pressed="true"]{border-color:#1a1b21;color:#111216}
.cd-bd{color:#35363a}
.cd-sn2 b{color:#1a1b21}
.cd-sn2 small{color:#4f4e4f}
.cd-tl2{color:#1a1b21;text-decoration-color:currentcolor;text-decoration-color:#a09b90}
.cd-fb{border-color:currentcolor;background-image:none;background-color:transparent;color:#4f4e4f}
button.cd-fb{text-decoration-color:#a09b90}
.cd-fb0{color:#504f50}
.cd-tot{color:#4b4a4c}
.cd-log li::before{background-image:none;background-color:#ebe5d6;box-shadow:inset 0 0 0 1.5px #84807a}
.cd-log li:first-child::before{box-shadow:inset 0 0 0 1.5px #1a1b21,0 0 8px rgba(26,27,33,0.158)}
.cd-log time{color:#4f4e4f}
.cd-log p{color:#2c2d33}
.cd-log b{color:#1a1b21}
.cd-log .cd-ld{color:#474649}
.cd-of{color:#4b4a4c}
.cd-tgb{border-color:#aba599;background-image:none;background-color:transparent;color:#38383d}
.cd-cm .cd-who{color:#1a1b21}
.cd-bdr{color:#4f4e4f}
.cd-ct2{color:#38383d}
.cd-ct3 .cd-lk{color:#454447}
.cd-quiet{color:#4f4e4f}
.cd-say{border-color:#aba599;background-image:none;background-color:transparent;color:#4b4a4c}
.cd-note2{color:#4f4e4f}
.cd-rules{color:#38383d}
.cd-steps li{color:#504f50}
.cd-steps li::before{color:#504f50}
.cd-steps li.done{color:#4b4a4c}
.cd-steps li.done::before{color:#4b4a4c}
.cd-steps li[aria-current]{color:#1a1b21}
.cd-steps li[aria-current]::before{color:#454447}
.cd-q{color:#1a1b21}
.cd-in:focus-within{border-bottom-color:#1a1b21}
.cd .cd-in input:focus,.cd .cd-in textarea:focus,.cd .cd-ri:focus,.cd .cd-ci:focus,.cd .cd-in input:focus-visible,.cd .cd-in textarea:focus-visible{outline-color:currentcolor!important;box-shadow:none!important}
.cd-in:focus-within{box-shadow:0 1px 0 #1a1b21}
.cd-in input,.cd-in textarea,.cd-ri,.cd-ci{border-color:currentcolor;background-image:none;background-color:transparent;color:#1a1b21;outline-color:currentcolor}
.cd-in input::placeholder,.cd-in textarea::placeholder,.cd-ri::placeholder,.cd-ci::placeholder{color:#504f50}
.cd-pre{color:#4f4e4f}
.cd-msg{color:#4f4e4f}
.cd-msg.good{color:#38383d}
.cd-msg.bad{color:#2c2d33}
.cd-act .cd-lk{color:#4b4a4c;text-decoration-color:currentcolor}
.cd-screen .cd-go2{border-color:#1a1b21;background-image:none;background-color:#1a1b21;color:#f4eee0}
.cd-sl{background-image:none;background-color:rgba(244,238,224,.98);border-color:#c6c0b2;box-shadow:0 20px 40px -14px rgba(30,31,37,0.285)}
.cd-ri:focus{border-bottom-color:#6a6765}
.cd-cw{color:#4b4a4c}
.cd-ci:focus{border-bottom-color:#6a6765}
.cd-x{border-color:currentcolor;background-image:none;background-color:transparent;color:#4f4e4f}
.cd-endn{color:#4b4a4c}
.cd-keys{background-image:none;background-color:rgba(244,238,224,.97);border-color:#c6c0b2;box-shadow:0 24px 50px -16px rgba(30,31,37,0.285)}
.cd-keys dd{color:#454447}
.cd-keys .cd-lk{color:#4b4a4c;text-decoration-color:currentcolor}
@media (hover:hover){.cd-ib:not(:disabled):hover{background-image:none;background-color:rgba(26,27,33,0.072);color:#1a1b21}
.cd-mb:hover{background-image:none;background-color:rgba(26,27,33,0.117);color:#111216}
.cd-menu button:hover{background-image:none;background-color:#1a1b21;color:#f4eee0}
.cd-nav button:hover,.cd-ty button:hover,.cd-so button:hover,.cd-back:hover,.cd-clr:hover,.cd-x:hover,.cd-act .cd-lk:hover,.cd-keys .cd-lk:hover{color:#1a1b21}
.cd-row:hover{background-image:linear-gradient(90deg,rgba(26,27,33,0.023),transparent 75%);background-color:transparent}
.cd-row:hover .cd-lg img,.cd-stack li:hover .cd-lg img,.cd-mini li:hover .cd-lg img,.cd-tgb:hover .cd-lg img{filter:none}
.cd-who:hover,.cd-lk:hover,.cd-tl2:hover,button.cd-fb:hover{color:#111216;text-decoration-color:currentcolor;text-decoration-color:#1a1b21}
.cd-mini .cd-lk:hover{text-decoration-color:currentcolor}
.cd-tf:hover,.cd-tgb:hover,.cd-say:hover{border-color:#6a6765;color:#1a1b21}
.cd-like:hover{border-color:#84807a;color:#1a1b21}
.cd-like[aria-pressed="true"]:hover{border-color:#1a1b21;color:#111216}
.cd-go2:hover{background-image:none;background-color:#131519}
.cd-di:hover svg{filter:drop-shadow(0 2px 3px rgba(30,31,37,0.165)) brightness(.94)}
.cd-li.cd-r:hover{filter:brightness(1.08)}}
.cd-vl button[aria-pressed="true"]{border-left-color:#1a1b21}
.cd-so.cd-vl button{border-color:currentcolor}
.cd-wk2 .cd-lk{text-decoration-color:currentcolor;color:#1a1b21}
.cd-sh2{color:#4f4e4f}
.cd-mini a.cd-lk{text-decoration-color:currentcolor;color:#2c2d33}
.cd-mini .cd-lk small{color:#4f4e4f}
/* hand 1. themes/a3-warm.css */
/* ===== retro-platinum (Oct 21 2026, Andrew: retro-tech options on an off-white base). (site-wide since brand-platinum: themes/warm.py builds it into /theme-a3-plat.css, scoped to body.th-plat) =====
   a late-80s desktop: warm platinum page #e9e3d4, window panes #f4eee0 with a 1px ink #1a1b21 frame, a bevel and a crisp
   offset shadow, pinstriped title bars with a close box, a 1-bit dither on the board and under the hover window, ink text
   #1a1b21 with greys down to #515051 (5.8:1 or better), and one orange #a83f0b used sparingly: 'sorted.', crowns and
   leaders, links and 'full breakdown ->'. colours and textures only: fonts, box shapes and layout are the live ones. */
:root:has(>body.th-a3.th-plat),body.th-a3.th-plat{--w-bg0:#e9e3d4;--w-pane:#f4eee0;--w-pane-rgb:244,238,224;--w-board:#f0e9db;--w-ln:#1a1b21;--w-tx:#1a1b21;--w-hi:#111216;--w-raise:#e1dacc;
  --w-acc:#a83f0b;--w-acc2:#7d2e06;--w-acc-rgb:168,63,11;--w-on-acc:#fff8e9;--w-sig:#c8530f;--w-sig-rgb:200,83,15;
  --w-ink-rgb:26,27,33;--w-glow-rgb:255,253,240;--w-top-a:0;--w-spot-a:.0;--w-h1-shadow:none;--w-punch-glow:0;
  --w-dot-rgb:26,27,33;--w-dot-a:.12;--w-board-glow-a:0;--w-lead-glow:.18;
  --w-shadow-rgb:26,27,33;--w-shadow-a:.0;--w-tip-rgb:244,238,224;--w-tip-ln:#1a1b21;
  --w-tile:#1a1b21;--w-lgl:#fffbee;--w-lgl-ring:#959087;--w-blob-filter:none;--w-blob-blend:multiply;
  --w-dith:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='1' height='1' fill='%231a1b21' fill-opacity='.17'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%231a1b21' fill-opacity='.17'/%3E%3C/svg%3E");
  --w-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Crect width='1' height='1' fill='%231a1b21'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%231a1b21'/%3E%3C/svg%3E");
  --w-pin:repeating-linear-gradient(180deg,#817e78 0 1px,transparent 1px 2px);
  --w-bevel:inset 1px 1px 0 #fffdf0,inset -1px -1px 0 #c5bfb1;
  --a3-dot:26,27,33;--a3-lead:168,63,11;--a3-ink:244,238,224;--a3-lab:81,80,81}
/* the shared warm layer (same rules on every warm option; the option's own tokens are set in the block above) */
:root:has(>body.th-a3.th-plat){--vx-bg:var(--w-bg0);--k-fff:var(--w-bg0);background:var(--w-bg0)}
body.th-a3.th-plat ::selection{background:rgba(var(--w-acc-rgb),.32);color:var(--w-hi)}
body.th-a.th-a3.th-plat{background:radial-gradient(1200px 600px at 50% -10%,rgba(var(--w-glow-rgb),var(--w-top-a,.07)),transparent 60%),var(--w-page,var(--vx-bg))}
body.th-a.th-plat .hp-hero::before{background:radial-gradient(520px 380px at var(--mx,62%) var(--my,46%),rgba(var(--w-glow-rgb),var(--w-spot-a,.08)),transparent 70%)}
body.th-a.th-plat .hp-hero::after{background:linear-gradient(90deg,transparent,rgba(var(--w-acc-rgb),.35),transparent)}
body.th-a.th-plat .n9-h1{text-shadow:var(--w-h1-shadow,0 0 18px rgba(var(--w-glow-rgb),.16))}
:root:root:root body.th-a3.th-plat .a3-hero h1.n9-h1 .a3-punch{color:var(--w-acc);text-shadow:0 0 22px rgba(var(--w-acc-rgb),var(--w-punch-glow,.32))}
:root:root:root body.th-a3.th-plat img[src^="/assets/brand/blob-"]{filter:var(--w-blob-filter)!important;mix-blend-mode:var(--w-blob-blend,screen)!important}
:root:root:root body.th-a3.th-plat .a3-hero .t7-l a:hover{color:var(--w-acc)}
:root:root:root body.th-a3.th-plat .t7-pick:is(:hover,:focus-visible){border-color:var(--w-acc)!important;box-shadow:0 0 14px rgba(var(--w-acc-rgb),.25)!important}
:root:root:root body.th-a3.th-plat .np-chip:is(:hover,:focus-visible){border-color:var(--w-acc)!important;color:var(--w-acc)!important;background:rgba(var(--w-acc-rgb),.08)!important}
:root:root:root body.th-a3.th-plat .np-form:focus-within{border-color:var(--w-acc)!important;box-shadow:0 0 0 3px rgba(var(--w-acc-rgb),.16)!important}
:root:root:root body.th-a.th-a3.th-plat :is(.btn,#plat-btn):hover{box-shadow:0 0 0 1px var(--w-acc),0 0 22px rgba(var(--w-acc-rgb),.3)!important;border-color:var(--w-acc)!important}
:root:root:root body.th-a3.th-plat .digest input[type=email]:focus{border-color:var(--w-acc)!important;outline-color:var(--w-acc)!important}
:root:root:root:root:root body.th-a3.th-plat a.lnk{color:var(--w-acc)!important;text-decoration-color:rgba(var(--w-acc-rgb),.5)!important}
:root:root:root:root:root body.th-a3.th-plat a.lnk:hover{color:var(--w-acc2)!important;text-decoration-color:currentColor!important;text-shadow:0 0 12px rgba(var(--w-acc-rgb),.4)!important}
:root:root:root body.th-a3.th-plat .wk-stk a{color:var(--w-acc)!important;text-decoration-color:rgba(var(--w-acc-rgb),.5)!important}
:root:root:root body.th-a3.th-plat .wk-stk a:hover{color:var(--w-acc2)!important;text-decoration-color:currentColor!important}
:root:root:root body.th-a3.th-plat .hp-cue:hover{color:var(--w-acc)!important}
:root:root:root body.th-a3.th-plat :is(a,button,input,summary):focus-visible{outline-color:var(--w-acc)!important}
body.th-a3.th-plat .ax-tab.on::before{background:var(--w-acc);box-shadow:0 0 12px rgba(var(--w-acc-rgb),.5)}
body.th-a3.th-plat .ax-tab.on i{background:var(--w-acc);box-shadow:0 0 8px rgba(var(--w-acc-rgb),.6)}
body.th-a3.th-plat .ax-tab:hover{color:var(--w-hi);background:var(--w-raise)}
body.th-a3.th-plat .nav .row>.ax-x:is(:hover,:focus-visible){color:var(--w-acc);filter:drop-shadow(0 0 6px rgba(var(--w-acc-rgb),.45))}
:root:root:root body.th-a3.th-plat .a3-p{background-color:var(--w-pane)!important}
:root:root:root body.th-a3.th-plat .a3-p:is(:hover,:focus-within){border-color:rgba(var(--w-acc-rgb),.35)!important}
body.th-a3.th-plat .a3-ro-i b{text-shadow:0 0 24px rgba(var(--w-glow-rgb),.16)}
body.th-a3.th-plat .a3-w-lg .lt-row:first-child .lt-pos{color:var(--w-acc)!important}
:root:root:root body.th-a3.th-plat .a3-w-lg .lt-row:first-child .lt-pts{color:var(--w-acc)!important;text-shadow:0 0 22px rgba(var(--w-acc-rgb),var(--w-punch-glow,.35))!important}
body.th-a.th-plat .lt-row:hover,body.th-a.th-plat .ri:hover{background:rgba(var(--w-acc-rgb),.05);box-shadow:inset 2px 0 0 var(--w-acc)}
:root:root:root:root body.th-a3.th-plat .a3-prices tr:hover td{background:rgba(var(--w-acc-rgb),.05)}
:root:root:root:root body.th-a3.th-plat .a3-prices .a3-pk a.a3-pt:hover{color:var(--w-acc)}
:root:root:root:root body.th-a3.th-plat .a3-prices .a3-pm:hover{color:var(--w-acc);text-decoration-color:var(--w-acc)}
/* ---- the space cloud ---- */
body.th-a3.th-plat .ls-g{background-image:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(var(--w-board-glow-rgb,var(--w-acc-rgb)),var(--w-board-glow-a,.045)),transparent 70%),radial-gradient(circle,rgba(var(--w-dot-rgb),var(--w-dot-a,.075)) 1px,transparent 1.2px);background-color:var(--w-board);box-shadow:inset 0 0 0 1px var(--w-ln)}
body.th-a3.th-plat .ls-ld a{box-shadow:0 0 0 1.5px rgba(var(--w-acc-rgb),.9),0 0 34px rgba(var(--w-acc-rgb),var(--w-lead-glow,.3))}
body.th-a3.th-plat .ls-cr{color:var(--w-acc);filter:drop-shadow(0 0 6px rgba(var(--w-acc-rgb),.6))}
body.th-a3.th-plat .ls-wn b{color:var(--w-acc)}
body.th-a3.th-plat .ls-c.ls-on .ls-n::before{background:linear-gradient(90deg,rgba(var(--w-acc-rgb),.25),rgba(var(--w-acc-rgb),.55))}
body.th-a3.th-plat .ls-n.ls-on a{box-shadow:0 0 0 1.5px var(--w-acc),0 0 30px rgba(var(--w-acc-rgb),.42)}
body.th-a3.th-plat .ls-n a:focus-visible{outline-color:var(--w-acc)}
body.th-a3.th-plat .ls-z:hover,body.th-a3.th-plat .ls-c.ls-on .ls-z{color:var(--w-acc);background:var(--w-raise)}
body.th-a3.th-plat .ls-z:focus-visible{outline-color:var(--w-acc)}
body.th-a3.th-plat .ls-back{background:var(--w-tx);color:var(--w-bg0)}
body.th-a3.th-plat .ls-back:hover{background:var(--w-acc);color:var(--w-on-acc)}
:where(body.th-a3.th-plat) .a3-lg img{filter:var(--w-logo-filter,grayscale(1) contrast(1.05))}
body.th-a3.th-plat .ls-rd1{background:rgba(var(--w-tip-rgb),.96);box-shadow:0 0 0 1px var(--w-tip-ln),0 18px 40px rgba(var(--w-shadow-rgb),var(--w-shadow-a,.6)),0 0 28px rgba(var(--w-acc-rgb),.06)}
body.th-a3.th-plat .ls-rd1 .ls-mo{color:var(--w-acc)}
body.th-a3.th-plat .ls-rs b{text-shadow:0 0 18px rgba(var(--w-acc-rgb),.3)}
@media(hover:hover){
 body.th-a3.th-plat a.ls-tip:hover .ls-rd1{box-shadow:0 0 0 1px rgba(var(--w-acc-rgb),.6),0 18px 40px rgba(var(--w-shadow-rgb),var(--w-shadow-a,.6)),0 0 28px rgba(var(--w-acc-rgb),.1)}
 body.th-a3.th-plat a.ls-tip:hover .ls-mo{color:var(--w-acc2);text-decoration-color:currentColor}
}
html.a3-i body.th-a3.th-plat::after{background:var(--w-bg0)}
body.th-a3.th-plat .a3-intro{background:var(--w-bg0)}
body.th-a3.th-plat .a3-ih b,body.th-a3.th-plat .a3-if b{color:var(--w-acc)}
body.th-a3.th-plat .vx-status .vx-mode{background:var(--w-acc);color:var(--w-on-acc);box-shadow:none}
/* ---- the light (paper) layer every retro option shares, from warm-paper ---- */
/* logos keep the live dark tiles (ink discs), so every logo reads exactly as it does live; logos that need a light tile
   keep a light one with an ink ring */
:root:root body.th-a3.th-plat .a3-lg:not(.a3-lgl){background:var(--w-tile)!important}
:root:root body.th-a3.th-plat .a3-lg.a3-lgl{background:var(--w-lgl)!important;box-shadow:inset 0 0 0 1px var(--w-lgl-ring)}
:root:root body.th-a3.th-plat .a3-mono{color:var(--w-bg0)!important}
body.th-a3.th-plat .ls-n a{box-shadow:0 0 0 1px rgba(var(--w-ink-rgb),calc(.12 + var(--g)*.3)),0 2px calc(4px + var(--g)*8px) rgba(var(--w-shadow-rgb),calc(var(--g)*.22))}
body.th-a3.th-plat .ls-n::before{background:linear-gradient(90deg,rgba(var(--w-ink-rgb),calc(.08 + var(--g)*.14)),rgba(var(--w-ink-rgb),.22))}
body.th-a3.th-plat .ls-ld a{box-shadow:0 0 0 2px rgba(var(--w-sig-rgb),.95),0 4px 14px rgba(var(--w-shadow-rgb),.22)}
body.th-a3.th-plat .ls-cr{filter:none;color:var(--w-sig)}
body.th-a3.th-plat .ls-n.ls-on a{box-shadow:0 0 0 2px var(--w-sig),0 6px 18px rgba(var(--w-shadow-rgb),.28)}
body.th-a3.th-plat .ls-c.ls-on .ls-n::before{background:linear-gradient(90deg,rgba(var(--w-sig-rgb),.3),rgba(var(--w-sig-rgb),.65))}
body.th-a3.th-plat .ls-wn{color:var(--w-tx);text-shadow:none;background:rgba(var(--w-pane-rgb),.92)}
body.th-a3.th-plat .ls-z{background:rgba(var(--w-pane-rgb),.92)}
@media(max-width:699.98px){
 /* phone overview: the non-winners are ink dots again (the dark tile above is for logos) */
 :root:root:root body.th-a3.th-plat .ls-c:not(.ls-f) .ls-n:not(.ls-ld) .a3-lg{background:rgba(var(--w-ink-rgb),calc(.3 + var(--g)*.6))!important}
}
body.th-a3.th-plat .lt-pts{text-shadow:none}
/* plat-fixes-1 (Andrew, Oct 22: "should this be like the font we used to have?"): the status strip's counts and price-check clock
   keep the dark look's rendering exactly (same Doto 400, size, spacing, and its 24px .18 glow from themes/a3.css), in ink */
body.th-a3.th-plat .a3-ro-i b{text-shadow:0 0 24px rgba(var(--w-ink-rgb),.18)}
:root:root:root body.th-a3.th-plat .a3-w-lg .lt-row:first-child .lt-pts{text-shadow:none!important}
body.th-a3.th-plat .ls-rs b{text-shadow:none}
body.th-a3.th-plat .vx-ghost{opacity:.16}
body.th-a.th-a3.th-plat::after{opacity:.05}
/* ---- platinum only ---- */
/* page: flat platinum, no glows */
body.th-a.th-a3.th-plat{background:var(--w-bg0)}
body.th-a.th-plat .hp-hero::before{background:none}
body.th-a.th-plat .hp-hero::after{background:linear-gradient(90deg,transparent,rgba(26,27,33,.35),transparent)}
/* menu bar and tab strip */
:root:root body.th-a3.th-plat header.nav{background:var(--w-pane)!important;box-shadow:inset 0 -1px 0 #1a1b21,inset 0 1px 0 #fffdf0}
:root:root body.th-a3.th-plat .ax-tabs{background:var(--w-bg0)!important;border-bottom:1px solid #1a1b21!important}
:root:root body.th-a3.th-plat .ax-tab{border-color:#b8b2a6!important}
:root:root body.th-a3.th-plat .ax-tab.on{background:var(--w-pane)!important;color:#1a1b21!important;box-shadow:var(--w-bevel)}
body.th-a3.th-plat .ax-tab.on::before{background:var(--w-acc);box-shadow:none}
body.th-a3.th-plat .ax-tab.on i{background:var(--w-acc);box-shadow:none}
/* windows: an ink frame, a 1px bevel and the hard offset shadow */
:root:root:root body.th-a3.th-plat .a3-p{border-color:#1a1b21!important;background-color:var(--w-pane)!important;box-shadow:var(--w-bevel),3px 3px 0 #1a1b21!important}
:root:root:root body.th-a3.th-plat .a3-p:is(:hover,:focus-within){border-color:#1a1b21!important}
/* title bars (desktop and tablet): the pane label becomes the window's title bar, inside the top of the pane's padding: a
   close box, pinstripes either side, the title on plain platinum. the count (.a3-hr) rides at the right end, past the
   right stripes, so a long label never squeezes the stripes to stubs; both stripe runs keep a floor */
@media(min-width:700px){
 :root:root:root body.th-a3.th-plat .a3-p>.a3-lb{top:0;left:0;right:0;max-width:none;height:21px;transform:none;padding:0 8px!important;gap:0;
   border-radius:9px 9px 0 0;background:var(--w-pane);box-shadow:0 1px 0 #1a1b21,inset 0 1px 0 #fffdf0;color:#1a1b21;line-height:21px}
 :root:root:root body.th-a3.th-plat .a3-p>.a3-lb::after{content:"";flex:1 1 0;min-width:28px;height:11px;margin-left:8px;background:var(--w-pin) 0 1px/100% 9px no-repeat}
 :root:root:root body.th-a3.th-plat .a3-p>.a3-lb>*{background:transparent}
 :root:root:root body.th-a3.th-plat .a3-p>.a3-lb>.a3-dot{flex:1 1 0;min-width:52px;width:auto;height:11px;padding:0;margin:0 8px 0 0!important;border-radius:0;
   background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' shape-rendering='crispEdges'%3E%3Crect x='.5' y='.5' width='10' height='10' fill='%23f4eee0' stroke='%231a1b21'/%3E%3Cpath d='M1.5 9.5V1.5H9.5' fill='none' stroke='%23fffdf0'/%3E%3C/svg%3E") 8px 0/11px 11px no-repeat,
    linear-gradient(90deg,var(--w-pane) 0 calc(8px + 11px + 4px),transparent 0) 0 0/100% 100% no-repeat,var(--w-pin) 0 1px/100% 9px no-repeat;box-shadow:none!important}
 :root:root:root body.th-a3.th-plat .a3-p>.a3-lb .a3-hr{order:1;flex:none;margin-left:8px!important;border-left-color:#b8b2a6!important;color:#515051}
}
/* phones: the label keeps live's exact place and size on the frame, just in platinum: ink text on a plate that is page
   above the frame line and pane below it, and an ink dot. no stripes, no close box */
@media(max-width:699.98px){
 :root:root:root body.th-a3.th-plat .a3-p>.a3-lb{background:linear-gradient(180deg,var(--w-bg0) 50%,var(--w-pane) 50%);color:#1a1b21;text-shadow:none}
 :root:root:root body.th-a3.th-plat .a3-p>.a3-lb>*{background:transparent}
 :root:root:root body.th-a3.th-plat .a3-p>.a3-lb>.a3-dot{background:#1a1b21;box-shadow:none!important}
 :root:root:root body.th-a3.th-plat .a3-p>.a3-lb .a3-hr{border-left-color:#b8b2a6!important;color:#515051}
}
/* the board is the desktop: a 1-bit dither, sunk into the window */
body.th-a3.th-plat .ls-g{background:var(--w-dith) 0 0/4px 4px,var(--w-board)!important;box-shadow:inset 0 0 0 1px #1a1b21,inset 2px 2px 0 #c5bfb1}
body.th-a3.th-plat .ls-wn{background:var(--w-pane);box-shadow:0 0 0 1px #1a1b21}
body.th-a3.th-plat .ls-z{background:var(--w-pane);box-shadow:0 0 0 1px #959087;color:#38383d}
body.th-a3.th-plat .ls-z:hover,body.th-a3.th-plat .ls-c.ls-on .ls-z{background:#1a1b21;color:var(--w-pane);box-shadow:0 0 0 1px #1a1b21}
/* the hover box is a little system window: an ink frame, a pinstriped title band with a close box, a dithered shadow */
body.th-a3.th-plat .ls-tip .ls-rd1{-webkit-backdrop-filter:none;backdrop-filter:none;background:
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' shape-rendering='crispEdges'%3E%3Crect x='.5' y='.5' width='10' height='10' fill='%23f4eee0' stroke='%231a1b21'/%3E%3C/svg%3E") 12px 5px/11px 11px no-repeat,
   var(--w-pin) 30px 6px/calc(100% - 42px) 9px no-repeat,var(--w-pane);
   padding-top:24px;box-shadow:0 0 0 1px #1a1b21,inset 0 20px 0 -19px #1a1b21,var(--w-bevel)}
body.th-a3.th-plat .ls-tip .ls-rd1::after{content:"";position:absolute;inset:4px -4px -4px 4px;z-index:-1;border-radius:10px;background:var(--w-check) 0 0/2px 2px;opacity:.55}
@media(hover:hover){body.th-a3.th-plat a.ls-tip:hover .ls-rd1{box-shadow:0 0 0 1px #1a1b21,inset 0 20px 0 -19px #1a1b21,var(--w-bevel)}}
body.th-a3.th-plat .ls-rd1 .p{border-top-color:#b8b2a6}
/* Numpty's shadow: a dithered ellipse */
body.th-a.th-plat .hp-hero .t7-shadow{opacity:.6;background:var(--w-check) 0 0/2px 2px;-webkit-mask:radial-gradient(closest-side,#000 70%,transparent 72%);mask:radial-gradient(closest-side,#000 70%,transparent 72%)}
/* push buttons and the text field. :is(.btn,#plat-btn) only matches .btn; the dummy id gives it id weight, because style.css's
   button reset ":root :is(.btn,...,#buy)" carries #buy's id weight and beat the plain .btn rule (header "get the weekly" showed the page fill, flat) */
:root:root:root body.th-a3.th-plat :is(.btn,#plat-btn){background:var(--w-pane)!important;color:#1a1b21!important;border-color:#1a1b21!important;box-shadow:inset -1px -1px 0 #b8b2a6,inset 1px 1px 0 #fffdf0,1px 1px 0 #1a1b21!important}
:root:root:root body.th-a3.th-plat .np-form button{background:var(--w-pane)!important;color:#1a1b21!important;box-shadow:inset 1px 0 0 #1a1b21,inset -1px -1px 0 #b8b2a6,inset 2px 1px 0 #fffdf0!important}
:root:root:root body.th-a.th-a3.th-plat :is(.btn,#plat-btn):hover{background:#1a1b21!important;color:var(--w-pane)!important;box-shadow:1px 1px 0 #1a1b21!important}
:root:root:root body.th-a3.th-plat :is(.btn.on,#plat-btn.on){background:#1a1b21!important;color:var(--w-pane)!important;box-shadow:1px 1px 0 #1a1b21!important}
:root:root:root body.th-a.th-a3.th-plat .np-form button:hover{background:#1a1b21!important;color:var(--w-pane)!important;box-shadow:none!important}
:root:root:root body.th-a3.th-plat .np-form{border-color:#1a1b21!important;background:#fffbee!important;box-shadow:inset 1px 1px 0 #b8b2a6,1px 1px 0 #1a1b21!important}
:root:root:root body.th-a3.th-plat .np-form:focus-within{box-shadow:inset 1px 1px 0 #b8b2a6,0 0 0 2px var(--w-acc)!important}
:root:root:root body.th-a3.th-plat .digest input[type=email]{background:#fffbee!important;border-color:#1a1b21!important;box-shadow:inset 1px 1px 0 #b8b2a6!important}
:root:root:root body.th-a3.th-plat .np-chip{background:var(--w-pane)!important;border-color:#1a1b21!important;box-shadow:var(--w-bevel)!important;color:#1a1b21!important}
/* readout and footer strip */
body.th-a3.th-plat .a3-ro,body.th-a3.th-plat .a3-ro-i{border-color:#b8b2a6!important}
:root:root body.th-a3.th-plat footer .sl{background:var(--w-pane)!important;border-color:#1a1b21!important;box-shadow:var(--w-bevel),2px 2px 0 #1a1b21}
:root:root body.th-a3.th-plat footer .sl>*{border-color:#b8b2a6!important}
:root:root body.th-a3.th-plat footer .sl>.sl-m{background:#1a1b21!important;color:var(--w-pane)!important}
:root:root body.th-a3.th-plat footer .sl-sp{background:var(--w-pin) 0 50%/100% 9px no-repeat}
/* status bar: the menu bar again, ink on platinum */
body.th-a3.th-plat .vx-status{background:var(--w-pane);color:#1a1b21;box-shadow:inset 0 1px 0 #1a1b21,inset 0 2px 0 #fffdf0}
body.th-a3.th-plat .vx-status>span{border-right-color:#b8b2a6}
body.th-a3.th-plat .vx-status .vx-mode{background:#1a1b21;color:var(--w-pane)}
/* ---- shared fixes (Oct 22) ---- */
/* the hover score: Doto's dot matrix reads light on platinum, so the digits get full ink and a hair of stroke */
body.th-a3.th-plat .ls-rs b{color:#111216;-webkit-text-stroke:.55px #111216;paint-order:stroke fill}
body.th-a3.th-plat .ls-rs small{color:#515051}
/* the board's cluster decorations (each version's .ls-c::before / ::after) paint under the tools: the tool list is lifted
   one step (it is already its own layer whenever it drifts, so the tools' stacking among themselves is unchanged) */
:root:root body.th-a3.th-plat .ls-c>.ls-ns{z-index:1}

/* hand 2. themes/a3-plat-min-a.css */
/* ===== plat-min-a (Oct 22 2026, Andrew on plat-classic: "the circles around the rankings pages dont really look good ...
   mock up a few others keeping in theme with a minimal design. also work something in with color grading"). site-wide since brand-platinum =====
   plat-classic's warm platinum desktop and windows, graded warm-to-cool (warm.py GRADES: paper keeps a warm ivory cast, the
   inks and shadows lean cool graphite; the oranges are untouched), with a soft lens wash over the page. the rankings board
   loses every ring: each cluster is held together by spacing and a soft pool of shade under it, spokes are single solid
   hairlines, tools sit on a soft contact shadow. orange only for crowns, the winner's ring and the hovered cluster.
   colours and textures only. */
:root:root body.th-a3.th-plat{
 --pc-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Crect width='1' height='1' fill='%231a1b21' fill-opacity='.04'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%231a1b21' fill-opacity='.04'/%3E%3C/svg%3E");
 --pm-ink:26,27,33;--pm-cool:44,50,63}
/* the grade's lens: warm light from the top, a cool fall-off toward the bottom and the corners, over everything */
body.th-a3.th-plat::before{content:"";position:fixed;inset:0;z-index:9990;pointer-events:none;mix-blend-mode:soft-light;
 background:radial-gradient(ellipse 120% 85% at 50% 18%,rgba(249,238,217,.38),rgba(249,238,217,0) 62%),
  linear-gradient(180deg,rgba(250,240,220,.25) 0%,rgba(124,124,123,0) 40%,rgba(49,57,75,.42) 100%),
  radial-gradient(ellipse 110% 100% at 50% 45%,rgba(0,0,0,0) 58%,rgba(32,38,53,.42) 100%)}
/* windows: the hard ink shadow keeps, with a soft cool fall-off under it; panes catch a faint light at the top */
:root:root:root body.th-a3.th-plat .a3-p{box-shadow:var(--w-bevel),3px 3px 0 #1a1b21,8px 10px 24px rgba(var(--pm-cool),.16)!important;
 background-image:linear-gradient(180deg,rgba(255,253,240,0) 21px,rgba(255,253,240,.55) 22px,rgba(255,253,240,0) 240px)!important}
:root:root:root body.th-a3.th-plat .a3-p.a3-w-sc{box-shadow:var(--w-bevel),5px 5px 0 #1a1b21,12px 16px 34px rgba(var(--pm-cool),.2)!important}

/* ---- the board: a soft lit well, no grid, no rings ---- */
:root:root body.th-a3.th-plat .ls-g{background:
  radial-gradient(ellipse 70% 60% at 40% 32%,rgba(255,250,234,.75),rgba(255,250,234,0) 72%),
  radial-gradient(ellipse 70% 60% at 78% 92%,rgba(var(--pm-cool),.09),rgba(var(--pm-cool),0) 70%),
  var(--pc-grain) 0 0/2px 2px,#e7e1d2!important;
 box-shadow:inset 0 0 0 1px #1a1b21,inset 2px 2px 0 1px #ada89d,inset -1px -1px 0 1px #fffdf0,inset 0 0 120px rgba(var(--pm-cool),.14),inset 0 0 26px rgba(var(--pm-cool),.07)!important}
/* every cluster: a soft pool of shade under the group, a touch below centre like a shadow; nothing else */
:root:root body.th-a3.th-plat .ls-c::before{content:none}
:root:root body.th-a3.th-plat .ls-c::after{content:"";position:absolute;left:calc(var(--cx)*1%);top:calc(var(--cy)*1%);transform:translate(-50%,-47%);
 width:calc(var(--u)*250);height:calc(var(--u)*220);border-radius:50%;pointer-events:none;z-index:0;opacity:1;transition:opacity .4s,background .4s;
 background:radial-gradient(closest-side,rgba(var(--pm-cool),.2),rgba(var(--pm-cool),.12) 38%,rgba(var(--pm-cool),.04) 70%,rgba(var(--pm-cool),0))}
:root:root body.th-a3.th-plat .ls-c.ls-on::after{background:radial-gradient(closest-side,rgba(168,63,11,.16),rgba(168,63,11,.085) 38%,rgba(168,63,11,.025) 70%,rgba(168,63,11,0))}
.ls-hv .ls-c:not(.ls-on)::after{opacity:.45}
/* spokes: one solid hairline, a little stronger for the stronger tools; the hovered cluster's turn orange */
:root:root body.th-a3.th-plat .ls-n::before{background:rgba(var(--pm-ink),calc(.13 + var(--g)*.17))}
:root:root body.th-a3.th-plat .ls-c.ls-on .ls-n::before{background:linear-gradient(90deg,rgba(168,63,11,.3),rgba(168,63,11,.7))}
/* tools: no ring, a soft contact shadow; the winner keeps a platinum gap and a fine orange ring */
:root:root body.th-a3.th-plat .ls-n a{box-shadow:0 1px 1px rgba(var(--pm-ink),.18),0 3px 8px rgba(var(--pm-cool),calc(.08 + var(--g)*.12))}
:root:root body.th-a3.th-plat .ls-ld a{box-shadow:0 0 0 2.5px #f7f0e2,0 0 0 4px #a83f0b,0 6px 16px rgba(var(--pm-cool),.26),0 2px 3px rgba(var(--pm-ink),.18)}
:root:root body.th-a3.th-plat .ls-n.ls-on a{box-shadow:0 0 0 2px #f7f0e2,0 0 0 3.5px #a83f0b,0 8px 18px rgba(var(--pm-cool),.28)}
:root:root body.th-a3.th-plat .ls-un a{box-shadow:none;outline-color:#515051}
:root:root body.th-a3.th-plat .ls-cr{color:#a83f0b;filter:drop-shadow(0 1px 1px rgba(26,27,33,.35))}
/* winner tags and cluster labels: the same little plates, a fine frame and a soft shadow; the hovered / zoomed label inverts */
:root:root body.th-a3.th-plat .ls-wn{background:#f7f0e2;color:#1a1b21;text-shadow:none;box-shadow:0 0 0 1px rgba(var(--pm-ink),.8),0 3px 8px rgba(var(--pm-cool),.16)}
:root:root body.th-a3.th-plat .ls-wn b{color:#a83f0b}
:root:root body.th-a3.th-plat .ls-z{background:#f7f0e2;color:#303136;box-shadow:0 0 0 1px rgba(var(--pm-ink),.45),0 2px 6px rgba(var(--pm-cool),.12)}
:root:root body.th-a3.th-plat .ls-z:hover,:root:root body.th-a3.th-plat .ls-c.ls-on .ls-z{background:#1a1b21;color:#f4eee0;box-shadow:0 0 0 1px #1a1b21,0 3px 10px rgba(168,63,11,.25)}
/* zoomed: the pool opens out into a soft field round the winner, still no lines */
:root:root body.th-a3.th-plat .ls-c.ls-f::after{width:calc(var(--u)*380);height:calc(var(--u)*340);transform:translate(-50%,-48%);
 background:radial-gradient(closest-side,rgba(255,252,238,.6),rgba(255,252,238,.2) 40%,rgba(var(--pm-ink),.05) 75%,rgba(var(--pm-ink),0))}
:root:root body.th-a3.th-plat .ls-f .ls-n::before{background:rgba(var(--pm-ink),calc(.16 + var(--g)*.18))}
:root:root body.th-a3.th-plat .ls-zb .ls-back{background:#f7f0e2;color:#1a1b21;box-shadow:0 0 0 1px #1a1b21,inset 1px 1px 0 #fffdf0,inset -1px -1px 0 #b8b2a6,0 3px 8px rgba(var(--pm-cool),.18)}
:root:root body.th-a3.th-plat .ls-zb .ls-back:hover{background:#1a1b21;color:#f4eee0}
/* the hover window: plat-classic's ink frame, with a soft cool shadow in place of the dither */
:root:root body.th-a3.th-plat .ls-tip .ls-rd1{box-shadow:0 0 0 1px #1a1b21,inset 0 20px 0 -19px #1a1b21,var(--w-bevel),0 14px 34px rgba(var(--pm-cool),.24),0 3px 8px rgba(var(--pm-ink),.12)}
:root:root body.th-a3.th-plat .ls-tip .ls-rd1::after{content:none}
@media(hover:hover){:root:root body.th-a3.th-plat a.ls-tip:hover .ls-rd1{box-shadow:0 0 0 1px #1a1b21,0 0 0 2px #a83f0b,inset 0 20px 0 -19px #1a1b21,var(--w-bevel),0 14px 34px rgba(var(--pm-cool),.26)}}
:root:root body.th-a3.th-plat .ls-rl .a3-lg{box-shadow:0 0 0 1px rgba(var(--pm-ink),.7),0 2px 5px rgba(var(--pm-cool),.18)}
@media(max-width:699.98px){
 :root:root:root body.th-a3.th-plat .a3-p{background-image:none!important}
 :root:root body.th-a3.th-plat .ls-c:not(.ls-f)::after{width:calc(var(--u)*330);height:calc(var(--u)*300)}
 :root:root body.th-a3.th-plat .ls-c:not(.ls-f) .ls-n:not(.ls-ld) a{box-shadow:none}
 :root:root body.th-a3.th-plat .ls-g{box-shadow:inset 0 0 0 1px #1a1b21,inset 2px 2px 0 1px #ada89d,inset -1px -1px 0 1px #fffdf0,inset 0 0 50px rgba(var(--pm-cool),.16)!important}
 :root:root body.th-a3.th-plat .ls-g{background-size:auto,auto,0 0,auto!important}
}

/* hand 3. themes/a3-plat-grade-b.css */
/* ===== plat-grade-b: depth (Oct 22 2026, Andrew on plat-min-a: "any other color branding on the home page? needs to be
   subtle" ... "keep it in line with number 1. color scheme" ... "just subtle grading"). site-wide since brand-platinum =====
   plat-min-a exactly (this sheet is added after themes/a3-plat-min-a.css, warm.py BASES), re-graded inside its own palette:
   the same ivory / graphite split tone on a slightly richer curve (warm.py GRADES: the mids and inks sit a touch deeper),
   a deeper graphite vignette (the lens) round the page edges and inside the board well, and a gentle top-to-bottom tone across every
   window pane (lit under the title bar, a breath of graphite at the foot). no new hue; colours only. */
body.th-a3.th-plat::before{
 background:linear-gradient(180deg,rgba(124,124,123,0) 36%,rgba(49,57,75,.5) 100%),
  radial-gradient(ellipse 105% 96% at 50% 46%,rgba(0,0,0,0) 50%,rgba(32,38,53,.56) 100%)}
body.th-a.th-a3.th-plat{background:radial-gradient(ellipse 115% 75% at 50% 0%,rgba(255,250,234,.5),rgba(255,250,234,0) 68%) fixed,var(--w-bg0)}
:root:root:root body.th-a3.th-plat .a3-p{background-image:
  linear-gradient(180deg,rgba(255,253,240,0) 21px,rgba(255,253,240,.6) 22px,rgba(255,253,240,0) 240px),
  linear-gradient(180deg,rgba(var(--pm-cool),0) 45%,rgba(var(--pm-cool),.055) 100%)!important}
:root:root body.th-a3.th-plat .ls-g{box-shadow:inset 0 0 0 1px #1a1b21,inset 2px 2px 0 1px #ada89d,inset -1px -1px 0 1px #fffdf0,inset 0 0 150px rgba(var(--pm-cool),.22),inset 0 0 34px rgba(var(--pm-cool),.1)!important}
@media(max-width:699.98px){
 :root:root:root body.th-a3.th-plat .a3-p{background-image:linear-gradient(180deg,rgba(var(--pm-cool),0) 50%,rgba(var(--pm-cool),.05) 100%)!important}
 :root:root body.th-a3.th-plat .ls-g{box-shadow:inset 0 0 0 1px #1a1b21,inset 2px 2px 0 1px #ada89d,inset -1px -1px 0 1px #fffdf0,inset 0 0 64px rgba(var(--pm-cool),.24)!important}
}

/* hand 4. themes/a3-plat-site.css (every page) */
/* ===== platinum, site-wide (brand-platinum, Oct 22 2026, Andrew: "go make the changes ... a preview of the whole site").
   the homepage layers above (a3-warm, plat-min-a, plat-grade-b) were written for index.html; on every other page the
   build-time mirror does the colour swap and this sheet fixes what the swap can't know. colours only: no fonts, box shapes,
   sizes or positions. ===== */
/* logo tiles: the logos are drawn for the dark look's white tile, so they keep a white tile (the swap made it ink) */
:root:root:root body.th-plat .mono.has-logo,:root:root:root body.th-plat .card.mini:hover .mono.has-logo{background:#fff!important;border-color:#959087}
/* code-block punctuation (toc '##', spec-sheet ':'): the swapped grey was 2.9:1 on the pane; full muted ink */
body.th-plat .cc-toc .hh,body.th-plat #specs .sheet.code .srow dt .co{color:#515051}
/* the framed boxes that aren't panes (the small newsletter box section.digest.sm, the footer disclosure, the 404 code box,
   code frames .cframe; the dark look draws them exactly like a pane): the same window as every pane, ink frame, pane,
   bevel, hard ink shadow with the soft cool fall-off, the depth tone down the pane. their legend (.cc-t) is a little plate
   on the frame line, half page, half pane, like the panes' labels on phones; on desktop / tablet the newsletter box's legend
   becomes the pinstriped title bar inside the top of its 32px padding, like the panes' */
:root:root:root:root body.th-plat :is(.digest.sm,.foot-disc,.cc-404,.cframe):not(.a3-p):not(.a3-p *){border-color:#1a1b21!important;background-color:var(--w-pane)!important;
 background-image:linear-gradient(180deg,rgba(255,253,240,0) 21px,rgba(255,253,240,.6) 22px,rgba(255,253,240,0) 240px),
  linear-gradient(180deg,rgba(var(--pm-cool),0) 45%,rgba(var(--pm-cool),.055) 100%)!important;
 box-shadow:var(--w-bevel),3px 3px 0 #1a1b21,8px 10px 24px rgba(var(--pm-cool),.16)!important}
:root:root:root:root body.th-plat :is(.digest.sm,.foot-disc,.cc-404,.cframe):not(.a3-p):not(.a3-p *):is(:hover,:focus-within){border-color:#1a1b21!important}
:root:root:root:root body.th-plat :is(.digest.sm,.foot-disc,.cc-404,.cframe):not(.a3-p):not(.a3-p *)>.cc-t{background:linear-gradient(180deg,var(--w-bg0) 50%,var(--w-pane) 50%)!important;color:#1a1b21!important}
:root:root:root:root body.th-plat :is(.digest.sm,.foot-disc,.cc-404,.cframe):not(.a3-p):not(.a3-p *)>.cc-t::before{background:#1a1b21!important;box-shadow:none!important}
@media(min-width:700px){
 :root:root:root:root:root body.th-plat section.digest.sm:not(.a3-p):not(.a3-p *)>.cc-t{top:0!important;left:0!important;right:0!important;max-width:none!important;width:auto!important;height:21px;padding:0 8px!important;gap:0;justify-content:center;transform:none!important;
   border-radius:9px 9px 0 0;background:var(--w-pane)!important;box-shadow:0 1px 0 #1a1b21,inset 0 1px 0 #fffdf0;color:#1a1b21!important;line-height:21px!important}
 :root:root:root:root:root body.th-plat section.digest.sm:not(.a3-p):not(.a3-p *)>.cc-t::before{flex:1 1 0!important;min-width:52px;width:auto!important;height:11px!important;margin:0 8px 0 0!important;border-radius:0!important;
   background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' shape-rendering='crispEdges'%3E%3Crect x='.5' y='.5' width='10' height='10' fill='%23f4eee0' stroke='%231a1b21'/%3E%3Cpath d='M1.5 9.5V1.5H9.5' fill='none' stroke='%23fffdf0'/%3E%3C/svg%3E") 8px 0/11px 11px no-repeat,
    linear-gradient(90deg,var(--w-pane) 0 calc(8px + 11px + 4px),transparent 0) 0 0/100% 100% no-repeat,var(--w-pin) 0 1px/100% 9px no-repeat!important;box-shadow:none!important}
 :root:root:root:root:root body.th-plat section.digest.sm:not(.a3-p):not(.a3-p *)>.cc-t::after{content:"";flex:1 1 0;min-width:28px;height:11px;margin-left:8px;background:var(--w-pin) 0 1px/100% 9px no-repeat}
}
@media(max-width:699.98px){
 :root:root:root:root body.th-plat :is(.digest.sm,.foot-disc,.cc-404,.cframe):not(.a3-p):not(.a3-p *){background-image:linear-gradient(180deg,rgba(var(--pm-cool),0) 50%,rgba(var(--pm-cool),.05) 100%)!important}
}
/* hovered / focused cards: the swap's raised step was a hair too deep for the orange links in them (4.49:1); one step lighter */
:root:root:root:root body.th-plat :is(.card.panel,.card.mini,.glinks a,.glist>li,.cm-tap,.alt3 a):not(.ns,.sticker,.lt,.cc,.sheet,.tbl,.digest,.cframe):is(:hover,:focus-within){background:#e5dfd0!important}
/* plat-fixes-1 (Andrew, Oct 22): one logo treatment on the scores board. every node (winners too, and the hover card's copy)
   shows the background-free ink glyph from themes/logo_discs.py in the same small paper circle with a thin ink ring; baked-in
   black/white plates are gone, so nothing clashes. sizes, positions and the phone overview's dots are unchanged */
:root:root:root body.th-a3.th-plat .a3-lg.a3-lgd{background:#f4eddd!important;box-shadow:inset 0 0 0 1px #16181f}
:root:root:root body.th-a3.th-plat .a3-lg.a3-lgd img{object-fit:contain;filter:none!important}
:root:root:root body.th-a3.th-plat .ls-n .a3-lg.a3-lgd img{opacity:calc(.55 + var(--g)*.45)}
:root:root:root body.th-a3.th-plat .ls-ld .a3-lg.a3-lgd img,:root:root:root body.th-a3.th-plat .ls-n.ls-on .a3-lg.a3-lgd img,:root:root:root body.th-a3.th-plat .ls-n a:focus-visible .a3-lg.a3-lgd img,:root:root:root body.th-a3.th-plat .ls-rl .a3-lg.a3-lgd img{opacity:1}
:root:root:root body.th-a3.th-plat .ls-rl .a3-lg.a3-lgd{box-shadow:inset 0 0 0 1px #16181f,0 2px 5px rgba(var(--pm-cool),.18)}
@media(max-width:699.98px){
 :root:root:root:root body.th-a3.th-plat .ls-c:not(.ls-f) .ls-n:not(.ls-ld) .a3-lg.a3-lgd{box-shadow:none}
 :root:root:root:root body.th-a3.th-plat .ls-c:not(.ls-f) .ls-n:not(.ls-ld) .a3-lg.a3-lgd img{opacity:0}
}
/* plat-fixes-2 (Oct 22). badges: the dark look's white plate behind every badge (a 4px #fff outline) mirrored to near-black
   #101218. the badges are already paper with a thin ink ring, so they sit on nothing; the /badge/ preview tiles are
   platinum windows (#f4eddd) with a thin ink border and ink captions */
:root:root:root body.th-plat img[src^="/badges/"],:root:root:root body.th-plat img[src^="/badge/"]{background:none!important;outline:0!important}
:root:root:root body.th-plat .bdg-prev figure,:root:root:root body.th-plat .bdg-prev figure.dk{background:#f4eddd!important;border:1px solid #16181f!important;color:#16181f!important}
:root:root:root body.th-plat .bdg-prev figure figcaption,:root:root:root body.th-plat .bdg-prev figure.dk figcaption{color:#16181f!important}
/* hero subtitle ("plus the weekly. not for sale."): the dark look set it in plain Doto 500 #878684 with no glow (themes/a3.css),
   so nothing to restore; Doto's dots read thinner on paper, so a slightly darker ink (was #44464c). font unchanged */
:root:root:root body.th-a3.th-plat .a3-hero h1.n9-h1 .a3-sub{color:#2e313b}
/* plat-fixes-3 (Andrew, Oct 22): the board's zoom buttons ('<- back to the cloud', 'open <cluster> ->') and the phone header's
   '...' menu button are numptr's platinum button, like .btn and the try: chips: square corners, paper fill, ink border,
   1px bevel. the cluster label chips and the tools' name tags stay as they are (they're part of the board's look) */
:root:root:root body.th-a3.th-plat .ls-zb .ls-back{border-radius:0;background:#f4eddd;color:#16181f;box-shadow:0 0 0 1px #16181f,inset 1px 1px 0 #fffdf0,inset -1px -1px 0 #b8b2a6,1px 1px 0 1px #16181f}
@media(hover:hover){:root:root:root body.th-a3.th-plat .ls-zb .ls-back:hover{background:#16181f;color:#f4eddd;box-shadow:0 0 0 1px #16181f,1px 1px 0 1px #16181f}}
:root:root:root body.th-a3.th-plat .ls-zb .ls-back:focus-visible{outline:2px solid #a83f0b;outline-offset:3px}
@media(max-width:699.98px){
 :root:root:root body.th-a3.th-plat .ax-mm>summary.mm-t{border-radius:0;border-color:#16181f!important;background-color:#f4eddd!important;box-shadow:inset 1px 1px 0 #fffdf0,inset -1px -1px 0 #b8b2a6,1px 1px 0 #16181f}
}
/* plat-fixes-5 (Andrew, Oct 22: every button / pill on the cloud square like the site's buttons): the cluster label chips,
   the winners' name + score tags and the tool card are square-cornered too, in overview, zoom and on phones. colours, borders
   and sizes unchanged. the logo discs stay round (they're icons, not buttons) */
:root:root:root body.th-a3.th-plat .ls-z,:root:root:root body.th-a3.th-plat .ls-wn,:root:root:root body.th-a3.th-plat .ls-tip .ls-rd1,
:root:root:root body.th-a3.th-plat .ls-tip .ls-rd1::after,:root:root:root body.th-a3.th-plat .a3-skip{border-radius:0}
/* plat-fixes-5 (Andrew, Oct 22: the stats strip's numbers look thinner than the dark version's): same Doto, size, spacing,
   alignment and ink glow, one step up Doto's weight axis (the woff2 is the variable 100-900 font, so no new file). dark ink
   on paper reads lighter than white dots on black at the same weight; at 500 the dots cover ~1.1x what the dark strip's did
   (fixes5/stats.py), so the counts and the h/m clock read as heavy as they used to. Doto is monospaced: widths unchanged */
:root:root:root body.th-a3.th-plat .a3-ro-i b{font-weight:500}
/* plat-fixes-6 (Andrew, Oct 22 9:23pm: still not heavy enough, lean bolder): Doto 700 (same variable file, 100-900 wght axis).
   ink coverage ~1.85x the dark strip's (500 was ~1.15x), so the dark-on-paper dots read as chunky as the dark version's white
   ones with their glow. Doto is monospaced: the same digit widths and left edges at 700 (checked in chromium and webkit) */
:root:root:root:root body.th-a3.th-plat .a3-ro-i b{font-weight:700}
/* plat-fixes-6 (Andrew, Oct 22 8:20pm: the category labels shouldn't look like buttons at all): plain ink text, same mono
   face and size, no fill, border, shadow or box, in the overview, the zoomed header and while a cluster is hovered. still the
   zoom button (click / tap / keys): pointer cursor, underlined on hover and on keyboard focus. the padding stays as an
   invisible tap area. a tight halo in the board's own paper colour keeps the words readable over spokes and logos */
:root:root:root:root body.th-a3.th-plat .ls-c .ls-z,:root:root:root:root body.th-a3.th-plat .ls-c .ls-z:hover,
:root:root:root:root body.th-a3.th-plat .ls-c.ls-on .ls-z,:root:root:root:root body.th-a3.th-plat .ls-c .ls-z:focus-visible{
 background:none!important;box-shadow:none!important;border:0!important;border-radius:0;outline:none;color:#1a1b21!important;cursor:pointer;
 text-decoration:none;text-underline-offset:3px;text-decoration-thickness:1px;
 text-shadow:0 0 2px #e7e1d2,0 0 2px #e7e1d2,0 0 4px #e7e1d2,1px 0 0 #e7e1d2,-1px 0 0 #e7e1d2,0 1px 0 #e7e1d2,0 -1px 0 #e7e1d2;transition:none}
@media(hover:hover){:root:root:root:root body.th-a3.th-plat .ls-c .ls-z:hover{text-decoration:underline}}
:root:root:root:root body.th-a3.th-plat .ls-c .ls-z:focus-visible{text-decoration:underline;text-decoration-thickness:2px}
/* plat-fixes-6 (Andrew, Oct 22 9:12pm: the board's grading and shadows are too dark and don't fit the site): the board well
   stays in the page's warm paper family. the ivory-to-graphite grade (plat-min-a + plat-grade-b's lens) becomes a light
   warm one: paper #ece5d6, the same lit patch top-left, a faint warm shade bottom-right, and an inset vignette in warm ink
   (122,100,70) instead of graphite, smaller and lighter, so the darkest corner is a light warm grey (no darker than ~#d3cdbe).
   the ink frame line stays (every pane has one); its inner bevel is lighter. the clusters' shade pools, the logo discs', name
   tags' and card's drop shadows are smaller, lower and warm ink, not graphite. lines, discs, labels, tags unchanged */
body.th-a3.th-plat{--pf-sh:104,97,89}
:root:root:root:root body.th-a3.th-plat .ls-g{background:
  radial-gradient(ellipse 70% 60% at 40% 32%,rgba(255,252,238,.7),rgba(255,252,238,0) 72%),
  radial-gradient(ellipse 70% 60% at 78% 92%,rgba(var(--pf-sh),.045),rgba(var(--pf-sh),0) 70%),
  var(--pc-grain) 0 0/2px 2px,#ece5d6!important;
 box-shadow:inset 0 0 0 1px #1a1b21,inset 2px 2px 0 1px #d0c9ba,inset -1px -1px 0 1px #fffdf0,inset 0 0 80px rgba(var(--pf-sh),.08),inset 0 0 20px rgba(var(--pf-sh),.04)!important}
:root:root:root:root body.th-a3.th-plat .ls-c::after{background:radial-gradient(closest-side,rgba(var(--pf-sh),.12),rgba(var(--pf-sh),.07) 38%,rgba(var(--pf-sh),.02) 70%,rgba(var(--pf-sh),0))}
:root:root:root:root body.th-a3.th-plat .ls-c.ls-on::after{background:radial-gradient(closest-side,rgba(168,63,11,.12),rgba(168,63,11,.06) 38%,rgba(168,63,11,.02) 70%,rgba(168,63,11,0))}
:root:root:root:root body.th-a3.th-plat .ls-n a{box-shadow:0 1px 1px rgba(var(--pm-ink),.12),0 2px 5px rgba(var(--pf-sh),calc(.06 + var(--g)*.06))}
:root:root:root:root body.th-a3.th-plat .ls-ld a{box-shadow:0 0 0 2.5px #f7f0e2,0 0 0 4px #a83f0b,0 3px 8px rgba(var(--pf-sh),.18),0 1px 2px rgba(var(--pm-ink),.12)}
:root:root:root:root body.th-a3.th-plat .ls-n.ls-on a{box-shadow:0 0 0 2px #f7f0e2,0 0 0 3.5px #a83f0b,0 4px 10px rgba(var(--pf-sh),.2)}
:root:root:root:root body.th-a3.th-plat .ls-un a{box-shadow:none}
:root:root:root:root body.th-a3.th-plat .ls-wn{box-shadow:0 0 0 1px rgba(var(--pm-ink),.8),0 2px 4px rgba(var(--pf-sh),.12)}
:root:root:root:root body.th-a3.th-plat .ls-tip .ls-rd1{box-shadow:0 0 0 1px #1a1b21,inset 0 20px 0 -19px #1a1b21,var(--w-bevel),0 8px 20px rgba(var(--pf-sh),.16),0 2px 4px rgba(var(--pm-ink),.08)}
@media(hover:hover){:root:root:root:root body.th-a3.th-plat a.ls-tip:hover .ls-rd1{box-shadow:0 0 0 1px #1a1b21,0 0 0 2px #a83f0b,inset 0 20px 0 -19px #1a1b21,var(--w-bevel),0 8px 20px rgba(var(--pf-sh),.18)}}
:root:root:root:root body.th-a3.th-plat .ls-rl .a3-lg{box-shadow:0 0 0 1px rgba(var(--pm-ink),.7),0 1px 3px rgba(var(--pf-sh),.14)}
@media(max-width:699.98px){
 :root:root:root:root body.th-a3.th-plat .ls-g{box-shadow:inset 0 0 0 1px #1a1b21,inset 2px 2px 0 1px #d0c9ba,inset -1px -1px 0 1px #fffdf0,inset 0 0 40px rgba(var(--pf-sh),.08)!important;background-size:auto,auto,0 0,auto!important}
 :root:root:root:root body.th-a3.th-plat .ls-c:not(.ls-f) .ls-n:not(.ls-ld) a{box-shadow:none}
}
/* the labels' halo follows the lighter paper */
:root:root:root:root body.th-a3.th-plat .ls-c .ls-z,:root:root:root:root body.th-a3.th-plat .ls-c .ls-z:hover,:root:root:root:root body.th-a3.th-plat .ls-c.ls-on .ls-z,:root:root:root:root body.th-a3.th-plat .ls-c .ls-z:focus-visible{
 text-shadow:0 0 2px #ece5d6,0 0 2px #ece5d6,0 0 4px #ece5d6,1px 0 0 #ece5d6,-1px 0 0 #ece5d6,0 1px 0 #ece5d6,0 -1px 0 #ece5d6}
/* desktop-check 1023 (Bert): the 13px floor now holds at every width, not just on phones (it was inside the phone block
   above). same list plus what the desktop check found under 13px: price cells, +2 more, primary source links, try chips, tab
   names and path, plan list, spec labels, checked-by lines, table headers, the /new/ chart, the footer and status bar. the
   board's cluster names and winner tags are 13px on desktop, 12px on the tablet board and phones (13px there fails _board_fit). the share cards (.cd) still skip it.
   it sits before the phone block so the phone's 14px plan list and spec values still win there */
 :root:root:root:root:root body.th-a3.th-plat :is(.a3-lb,.a3-hr,.ri time,#releases .ri>time,.cc-t,.ls-mo,.a3-ro-i>span,.a3-lt-how,.ls-rd0,.ls-rd0 b,.ls-d2,.lt-hd span,.hp-cue>span,main p.updated,main p.updated .nw,main th,.ax-tab,.sheet-ft .txt,.srow dt,.slbl,.vx-status>span,.cm-ltag,.when,.cm-hs-cm,.cm-hl small,.cm-dn small,.cm-spot-k,.cm-spot-l small,.cm-day>span,.cm-bc-u,.ax-tab>b,.ax-tab>em,.ax-path,td.a3-pp small,.a3-pc,.a3-pm,.a3-pm>span,.ri a.src,.ri a.src>span,.np-chip,.np-lab,.sheet-cm .txt,.srow dt .co,ul.a3-plans li,.a3-hd,.a3-hn,.tbl .th>span,.a3-th2,.ls-ax,.ls-rd0 .ls-d1,.cc-l .x,.cc-l .x .cm,.glog-h .cm,.pt-k,.nsv .sc small,.a3-vbar small,.a3-rs em,.man>span,.foot .sl,.foot .sl *,.vx-status span):not(.cd *){font-size:13px!important}
@media(min-width:700px){:root:root:root:root:root body.th-a3.th-plat :is(.srow dd code,ul.a3-plans li .num){font-size:13px!important}}
@media(min-width:1024px){:root:root:root:root:root body.th-a3.th-plat :is(.ls-c .ls-z,.ls-wn,.ls-wn b){font-size:13px!important}}
@media(min-width:700px) and (max-width:1023.98px){:root:root:root:root:root body.th-a3.th-plat :is(.ls-c .ls-z,.ls-wn,.ls-wn b){font-size:12px!important}}
/* phone-fixes-1023 (mobile check, Oct 23 2026). phones only (<=699.98px); desktop and tablet are untouched.
   1. hero: the ask.sh row sat at y=633 on a 393x659 iPhone 15/14 viewport, so the input's bottom and 'ask' fell under the fold.
      46px less above the h1 (tab bar + 86px -> + 40px) and numpty 64px -> 52px, so with the 15px answer lines (1.4 line height,
      6px apart) the whole row clears 659px. the form is 48px: a 44px input inside its 2px frame.
   2. numpty's answer lines 13.5px -> 15px. 3. the 'plus the weekly' sub line 13px Doto -> 15px JetBrains Mono (Doto's dots
   go faint at phone size). 4. board labels 10px -> 12px, still plain text (themes/v_a3.py _board_fit's phone estimate matches);
   zoomed tools get a 40px invisible tap area. 5. community buttons / links 44px tall, build updates wrap to 2 lines.
   6. a 13px floor for mono meta and pane labels; Muse Code-style price lines 14px; 6px more tap height on the logo and launch
   links (no layout change). the pick share cards (pick_share.py, .cd) render at 600px, so the floor skips them. */
@media(max-width:699.98px){
 :root:root:root:root:root body.th-a3.th-plat .a3-hero.hp-hero{padding-top:calc(var(--ax-tabh,40px) + 40px)!important}
 :root:root:root:root:root body.th-a3.th-plat .a3-hero>.t7-char,:root:root:root:root:root body.th-a3.th-plat .a3-hero.hp-v-9:not(.hp-v-9d)>.t7-char{width:52px!important}
 :root:root:root:root:root body.th-a3.th-plat .a3-hero .np-form{--np-h:48px!important;height:48px!important}
 :root:root:root:root:root body.th-a3.th-plat .a3-hero .np-form input{height:100%!important}
 :root:root:root:root:root body.th-a3.th-plat .a3-hero .t7-l{font-size:15px!important;line-height:1.4!important;margin-bottom:6px!important}
 :root:root:root:root:root body.th-a3.th-plat .a3-hero .t7-l:last-child{margin-bottom:0!important}
 :root:root:root:root:root body.th-a3.th-plat .a3-hero h1.n9-h1 .a3-sub{font:500 15px/1.4 var(--mono)!important;letter-spacing:0}
 :root:root:root:root:root body.th-a3.th-plat .ls-c.ls-f .ls-n a::after{content:"";position:absolute;left:50%;top:50%;width:40px;height:40px;transform:translate(-50%,-50%);border-radius:50%;background:none}
 :root:root:root:root:root body.th-a3.th-plat :is(.cm-acts .btn,.cm-wkq-in .btn,.cm-more-l .lnk){min-height:44px;display:inline-flex;align-items:center;box-sizing:border-box}
 /* the waitlist page draws the community inside a demo window at zoom .75 (.cd-nh .cw-demo, desk.css), so 44px there is 33px on screen */
 :root:root:root:root:root body.th-a3.th-plat .cd-nh .cw-demo :is(.cm-acts .btn,.cm-wkq-in .btn,.cm-more-l .lnk){min-height:calc(44px / .75)}
 :root:root:root:root:root body.th-a3.th-plat .cm-bc-u{white-space:normal!important;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
 :root:root:root:root:root body.th-a3.th-plat :is(ul.a3-plans li,.srow dd):not(.cd *){font-size:14px!important}
 :root:root:root:root:root body.th-a3.th-plat :is(a.logo,.ri a){padding-block:6px}
 /* phone-leftovers-1023. 1. /new/ chart: the day and bar labels are 13px (the floor above); the days already stand on end
    under 480px, so the 17 columns still fit the pane and the chart is just taller for the longer labels.
    2. the top bar stays put; the tab row (home.md / community.md / partners.md) scrolls away with the page (61px + 42px of a
    659px screen were pinned). 3. the try: row is back: its first group (try: chat, coding, images), one row that scrolls
    sideways if it must, 40px tall chips. it sits under the ask box, so on a 393x659 iPhone 15 it starts just below the fold
    (the ask row ends at 656px and the home tab row overlays the hero, so pinning it or not frees nothing above the fold). */
 :root:root:root:root:root body.th-a3.th-plat .ax-tabs{position:relative!important;top:auto!important}
 :root:root:root:root:root body.th-a3.th-plat .a3-hs{height:130px!important}
}
/* board labels 12px from 360px phones up (the 336px board, checked by _board_fit); under 360px they stay 10px, so the 266px
   board is exactly as it was. no letter-spacing at 12px (the .03em made 'coding agents' and 'chat assistants' run together) */
@media(min-width:360px) and (max-width:699.98px){:root:root:root:root:root body.th-a3.th-plat .ls-c .ls-z{font-size:12px!important;letter-spacing:0!important}}

/* board-labels-1024-d: 13px floor for the board's names and winner tags on every layout (names: no letter-spacing on phones) */
:root:root:root:root:root:root body.th-a3.th-plat .ls-c .ls-z,:root:root:root:root:root:root body.th-a3.th-plat :is(.ls-wn,.ls-wn b){font-size:13px!important}
@media(max-width:699.98px){:root:root:root:root:root:root body.th-a3.th-plat .ls-c .ls-z{letter-spacing:0!important}}

/* ==========================================================================================================
   numptr broadcast system (v6). the one place the look is written down: tokens first, then the components.
   loads after the platinum skin on every page (layers/bc.py links it, graded with the skin's own colour grade
   so it sits in the same palette). :root:root:root:root:root:root:root body.bc = the page scope, expanded by bc.py to beat the a3 / platinum layers.
   faces: Doto (dot matrix) for headlines, numbers and scoreboard moments only; Inter for everything you read;
   JetBrains Mono survives only inside real code (code, pre, kbd).
   ========================================================================================================== */
:root:root:root:root:root:root:root{
  /* type */
  --bc-text:Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --bc-disp:Doto,ui-monospace,monospace;
  --bc-code:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --mono:var(--bc-text);                       /* the a3 layers set most labels in mono: they read in Inter now */
  --fs-1:13px; --fs-2:14px; --fs-3:16px; --fs-4:18px; --fs-5:22px; --fs-6:28px;
  --fs-7:clamp(30px,3.6vw,40px); --fs-8:clamp(36px,5.4vw,60px);
  --lh-tight:1.08; --lh-snug:1.3; --lh-body:1.6;
  /* space: 4/8 grid */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --gutter:clamp(16px,4vw,32px); --measure:68ch;
  /* shape */
  --r-1:6px; --r-2:10px; --r-3:14px; --r-pill:999px;
  --bw:1px; --bd:1px solid var(--bc-ink); --hair:1px solid var(--bc-line);
  --sh-1:2px 2px 0 var(--bc-ink); --sh-2:3px 3px 0 var(--bc-ink); --sh-soft:0 1px 0 rgba(22,24,31,.06),0 8px 24px -12px rgba(22,24,31,.18);
  /* colour: the platinum skin, orange accents */
  --bc-bg:#e8e2d2; --bc-paper:#fdf7ea; --bc-paper2:#f4edde; --bc-ink:#16181f; --bc-ink2:#333640; --bc-mut:#525354;
  --bc-line:rgba(22,24,31,.14); --bc-or:#c8530f; --bc-or-text:#a7440b; --bc-or-soft:#f3e7d7; --bc-up:#1f7a4d; --bc-down:#b42318;
  /* motion */
  --t-1:.12s; --t-2:.2s; --t-3:.35s; --t-4:.6s; --ez:cubic-bezier(.2,.8,.2,1); --ez-io:cubic-bezier(.65,0,.35,1);
}

/* ---------- base: one text face, calm rhythm ---------- */
:root:root:root:root:root:root:root body.bc{font:400 var(--fs-3)/var(--lh-body) var(--bc-text);color:var(--bc-ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:root:root:root:root:root:root:root body.bc :is(code,pre,kbd,samp){font-family:var(--bc-code)!important;font-size:.9em}
:root:root:root:root:root:root:root body.bc :is(.num,.sc,.rn,td,.price,[data-count],.rk-sc,.rk-pos){font-variant-numeric:tabular-nums}
:root:root:root:root:root:root:root body.bc main :is(p,li,dd){font-family:var(--bc-text)}
:root:root:root:root:root:root:root body.bc main p{max-width:var(--measure)}
:root:root:root:root:root:root:root body.bc :is(h1,h2,h3,h4){text-wrap:balance}
:root:root:root:root:root:root:root body.bc main p,:root:root:root:root:root:root:root body.bc main li{text-wrap:pretty}

/* headlines: Doto for h1 and h2, Inter for the rest */
:root:root:root:root:root:root:root body.bc main h1{font:700 var(--fs-8)/var(--lh-tight) var(--bc-disp)!important;letter-spacing:-.01em!important;margin:0 0 var(--s-4)!important;color:var(--bc-ink)}
:root:root:root:root:root:root:root body.bc main h2{font:700 var(--fs-6)/1.15 var(--bc-disp)!important;letter-spacing:0!important;margin:0 0 var(--s-4)!important;color:var(--bc-ink)}
:root:root:root:root:root:root:root body.bc main h3{font:650 var(--fs-4)/var(--lh-snug) var(--bc-text)!important;letter-spacing:-.005em!important;margin:0 0 var(--s-2)!important}
@media(max-width:699.98px){:root:root:root:root:root:root:root body.bc main h2{font-size:var(--fs-5)!important}}

/* ---------- the editor furniture goes (bc.py takes the markup out; this catches what scripts add) ---------- */
:root:root:root:root:root:root:root body.bc :is(.vx-status,.vx-ghost,.a3-gh,.cc-cur,.ax-path,.man,.man-sa,.sheet-cmd,.co,.np-pr,span.pr[aria-hidden]){display:none!important}
:root:root:root:root:root:root:root body.bc{padding-bottom:0!important}

/* ---------- nav: a calm broadcast top bar and a tab row with an orange "on air" underline ---------- */
:root:root:root:root:root:root:root body.bc header.nav{background:var(--bc-paper)!important;box-shadow:none!important;border-bottom:var(--hair)!important}
:root:root:root:root:root:root:root body.bc header.nav .wm{font-family:var(--bc-disp)!important;font-weight:700}
:root:root:root:root:root:root:root body.bc .ax-tabs{background:var(--bc-paper)!important;border-bottom:var(--bd)!important}
:root:root:root:root:root:root:root body.bc .ax-tabs .ax-tab{border:0!important;background:none!important;box-shadow:none!important;color:var(--bc-mut)!important;font:600 var(--fs-2)/1 var(--bc-text)!important;
  min-height:44px;display:inline-flex!important;align-items:center;gap:var(--s-2);padding:0 var(--s-4)!important;position:relative;text-decoration:none!important}
:root:root:root:root:root:root:root body.bc .ax-tabs .ax-tab i{display:none!important}
:root:root:root:root:root:root:root body.bc .ax-tabs .ax-tab:hover{color:var(--bc-ink)!important}
:root:root:root:root:root:root:root body.bc .ax-tabs .ax-tab.on,:root:root:root:root:root:root:root body.bc .ax-tabs .ax-tab.par,:root:root:root:root:root:root:root body.bc .ax-tabs .ax-tab[aria-current]{color:var(--bc-ink)!important}
:root:root:root:root:root:root:root body.bc .ax-tabs .ax-tab.on::after,:root:root:root:root:root:root:root body.bc .ax-tabs .ax-tab.par::after,:root:root:root:root:root:root:root body.bc .ax-tabs .ax-tab[aria-current]::after{content:"";position:absolute;left:var(--s-4);right:var(--s-4);bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--bc-or)}

/* ---------- panes: paper cards with one hard shadow; the label is a quiet broadcast slug, not a title bar ---------- */
:root:root:root:root:root:root:root body.bc .a3-p{background:var(--bc-paper)!important;background-image:none!important;border:var(--bd)!important;border-radius:var(--r-3)!important;box-shadow:var(--sh-2)!important}
:root:root:root:root:root:root:root body.bc .a3-p>.a3-lb,:root:root:root:root:root:root:root body.bc :is(.cframe,.digest.sm,.foot-disc,.cc-404)>.cc-t{position:static!important;display:flex!important;align-items:center;gap:var(--s-2);width:auto!important;max-width:none!important;height:auto!important;
  margin:0 0 var(--s-4)!important;padding:0!important;transform:none!important;background:none!important;border:0!important;box-shadow:none!important;
  font:650 var(--fs-1)/1.2 var(--bc-text)!important;letter-spacing:.01em!important;text-transform:none!important;color:var(--bc-mut)!important;justify-content:flex-start!important}
:root:root:root:root:root:root:root body.bc .a3-p>.a3-lb::before,:root:root:root:root:root:root:root body.bc .a3-p>.a3-lb::after,:root:root:root:root:root:root:root body.bc :is(.cframe,.digest.sm,.foot-disc,.cc-404)>.cc-t::before,:root:root:root:root:root:root:root body.bc :is(.cframe,.digest.sm,.foot-disc,.cc-404)>.cc-t::after{content:none!important;display:none!important}
:root:root:root:root:root:root:root body.bc .a3-p>.a3-lb .a3-dot{display:inline-block!important;min-width:0!important;max-width:7px!important;flex:0 0 7px!important;width:7px!important;height:7px!important;border-radius:50%!important;background:var(--bc-or)!important;box-shadow:none!important;margin:0!important;flex:none}
:root:root:root:root:root:root:root body.bc :is(.cframe,.digest.sm,.foot-disc,.cc-404)>.cc-t::before{content:""!important;display:inline-block!important;width:7px!important;height:7px!important;min-width:0!important;flex:none!important;border-radius:50%!important;background:var(--bc-or)!important;margin:0!important}
:root:root:root:root:root:root:root body.bc .a3-p>.a3-lb .a3-hr{margin-left:auto!important;color:var(--bc-mut)!important;font:500 var(--fs-1)/1.2 var(--bc-text)!important;background:none!important}
:root:root:root:root:root:root:root body.bc :is(.cframe,.digest.sm,.foot-disc,.cc-404){background:var(--bc-paper)!important;background-image:none!important;border:var(--bd)!important;border-radius:var(--r-3)!important;box-shadow:var(--sh-2)!important}

/* ---------- spec sheets and key/value lists: the table-row component ---------- */
:root:root:root:root:root:root:root body.bc .sheet.code:not(.a3-p){background:none!important;border:0!important;box-shadow:none!important;padding:0!important;font-family:var(--bc-text)!important}
:root:root:root:root:root:root:root body.bc .sheet.code .sheet-t{font:650 var(--fs-4)/var(--lh-snug) var(--bc-text)!important;margin:0 0 var(--s-3)!important}
:root:root:root:root:root:root:root body.bc .sheet.code dl{margin:0!important;border-top:var(--hair)}
:root:root:root:root:root:root:root body.bc .sheet.code dl>div,:root:root:root:root:root:root:root body.bc .sheet.code .srow{display:grid!important;grid-template-columns:minmax(120px,200px) minmax(0,1fr);gap:var(--s-4);padding:var(--s-3) 0!important;border-bottom:var(--hair);margin:0!important}
:root:root:root:root:root:root:root body.bc .sheet.code dt{font:600 var(--fs-2)/1.45 var(--bc-text)!important;color:var(--bc-mut)!important;text-transform:none!important;letter-spacing:0!important}
:root:root:root:root:root:root:root body.bc .sheet.code dd{margin:0!important;font:400 var(--fs-3)/1.5 var(--bc-text)!important;color:var(--bc-ink)!important}
:root:root:root:root:root:root:root body.bc .sheet.code .cl:not(.srow){padding:var(--s-2) 0 0!important;font:400 var(--fs-1)/1.5 var(--bc-text)!important;color:var(--bc-mut)!important}
@media(max-width:599.98px){:root:root:root:root:root:root:root body.bc .sheet.code dl>div,:root:root:root:root:root:root:root body.bc .sheet.code .srow{grid-template-columns:1fr;gap:var(--s-1)}}

/* ---------- buttons, links, chips ---------- */
:root:root:root:root:root:root:root body.bc .btn,:root:root:root:root:root:root:root body.bc button.btn,:root:root:root:root:root:root:root body.bc a.btn{display:inline-flex!important;align-items:center;justify-content:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-5)!important;
  border:var(--bd)!important;border-radius:var(--r-2)!important;background:var(--bc-ink)!important;color:var(--bc-paper)!important;box-shadow:var(--sh-1)!important;
  font:650 var(--fs-2)/1 var(--bc-text)!important;letter-spacing:0!important;text-transform:none!important;text-decoration:none!important;transition:transform var(--t-1) var(--ez),box-shadow var(--t-1) var(--ez),background var(--t-2)}
:root:root:root:root:root:root:root body.bc .btn:hover{background:var(--bc-or)!important;border-color:var(--bc-ink)!important}
:root:root:root:root:root:root:root body.bc .btn:active{transform:translate(1px,1px);box-shadow:none!important}
:root:root:root:root:root:root:root body.bc .btn.sm{min-height:36px;padding:0 var(--s-4)!important}
:root:root:root:root:root:root:root body.bc .digest .btn{background:var(--bc-or)!important;color:#fff!important}
:root:root:root:root:root:root:root body.bc :is(.lnk,a.lnk){font:650 var(--fs-2)/1.4 var(--bc-text)!important;color:var(--bc-ink)!important;text-decoration:underline!important;text-decoration-thickness:1.5px!important;text-underline-offset:3px!important;text-decoration-color:var(--bc-or)!important}
:root:root:root:root:root:root:root body.bc main a:not(.btn):not(.card):not(.tap):not(.lnk):not([class*="rk-"]):not([class*="gl-"]){text-decoration-color:rgba(200,83,15,.55);text-underline-offset:2px}
:root:root:root:root:root:root:root body.bc :is(.chip,.tag){display:inline-flex;align-items:center;gap:var(--s-1);min-height:28px;padding:0 var(--s-3);border:var(--hair);border-radius:var(--r-pill);background:var(--bc-paper2);font:600 var(--fs-1)/1 var(--bc-text);color:var(--bc-ink2)}

/* ---------- cards (alternatives, guides lists) ---------- */
:root:root:root:root:root:root:root body.bc a.card.panel.tap{display:flex!important;align-items:center;min-height:52px;padding:var(--s-3) var(--s-4)!important;border:var(--bd)!important;border-radius:var(--r-2)!important;background:var(--bc-paper)!important;box-shadow:var(--sh-1)!important;
  font:650 var(--fs-3)/1.3 var(--bc-text)!important;color:var(--bc-ink)!important;text-decoration:none!important;transition:transform var(--t-1) var(--ez),box-shadow var(--t-1) var(--ez)}
:root:root:root:root:root:root:root body.bc a.card.panel.tap:hover{transform:translate(-1px,-1px);box-shadow:var(--sh-2)!important}

/* ---------- crumbs, meta lines, muted copy ---------- */
:root:root:root:root:root:root:root body.bc .crumbs{font:500 var(--fs-1)/1.5 var(--bc-text)!important;color:var(--bc-mut)!important;margin:var(--s-5) 0 var(--s-4)!important}
:root:root:root:root:root:root:root body.bc .crumbs a{color:var(--bc-ink2)!important}
:root:root:root:root:root:root:root body.bc :is(.muted,.updated,.specs-in){color:var(--bc-mut)!important;font-family:var(--bc-text)!important}
:root:root:root:root:root:root:root body.bc .updated{font-size:var(--fs-2)!important;line-height:1.6!important}

/* ---------- footer ---------- */
:root:root:root:root:root:root:root body.bc footer.foot{font:400 var(--fs-2)/1.6 var(--bc-text)!important;color:var(--bc-mut)!important;padding:var(--s-7) 0 var(--s-8)!important}
:root:root:root:root:root:root:root body.bc footer.foot a{color:var(--bc-ink)!important}
:root:root:root:root:root:root:root body.bc footer .sl{font:500 var(--fs-1)/1.5 var(--bc-text)!important;background:none!important;border:0!important;box-shadow:none!important;color:var(--bc-mut)!important}

/* ---------- focus: one visible ring everywhere ---------- */
:root:root:root:root:root:root:root body.bc :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--bc-or)!important;outline-offset:2px!important;border-radius:4px}

@media(prefers-reduced-motion:reduce){:root:root:root:root:root:root:root body.bc *,:root:root:root:root:root:root:root body.bc *::before,:root:root:root:root:root:root:root body.bc *::after{transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---------- page ground: one flat platinum, no seam where the first screen's wash ends ---------- */
:root:root:root:root:root:root:root body.bc,:root:root:root:root:root:root:root html{background:var(--bc-bg)!important}
:root:root:root:root:root:root:root body.bc{background-image:none!important}
:root:root:root:root:root:root:root body.bc::before,:root:root:root:root:root:root:root body.bc::after{background-image:none!important}

/* ---------- the scoreboard band: score, position, movement, form ---------- */
:root:root:root:root:root:root:root body.bc .bc-sb{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;margin:var(--s-5) 0 var(--s-4);border:var(--bd);border-radius:var(--r-2);background:var(--bc-ink);color:var(--bc-paper);overflow:hidden}
:root:root:root:root:root:root:root body.bc .bc-sb-c{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-3) var(--s-4);border-left:1px solid rgba(253,247,234,.16);min-width:0}
:root:root:root:root:root:root:root body.bc .bc-sb-c:first-child{border-left:0}
:root:root:root:root:root:root:root body.bc .bc-sb-k{font:600 var(--fs-1)/1.2 var(--bc-text);color:rgba(253,247,234,.72)}
:root:root:root:root:root:root:root body.bc .bc-sb-v{font:700 var(--fs-6)/1 var(--bc-disp);font-variant-numeric:tabular-nums;color:var(--bc-paper);white-space:nowrap}
:root:root:root:root:root:root:root body.bc .bc-sb-main .bc-sb-v{font-size:40px;color:#ff8a3d}
:root:root:root:root:root:root:root body.bc .bc-sb-v small{font:600 var(--fs-2)/1 var(--bc-text);color:rgba(253,247,234,.72);margin-left:2px}
:root:root:root:root:root:root:root body.bc a.bc-sb-s,:root:root:root:root:root:root:root body.bc .bc-sb-s{font:500 var(--fs-1)/1.3 var(--bc-text);color:rgba(253,247,234,.86)!important;text-decoration-color:rgba(255,138,61,.7)!important}
:root:root:root:root:root:root:root body.bc .bc-sb .bc-mv{font:650 var(--fs-4)/1.2 var(--bc-text)}
:root:root:root:root:root:root:root body.bc .bc-sb .bc-up{color:#6fdc9c}:root:root:root:root:root:root:root body.bc .bc-sb .bc-dn{color:#ff8b7a}:root:root:root:root:root:root:root body.bc .bc-sb .bc-eq{color:rgba(253,247,234,.86)}:root:root:root:root:root:root:root body.bc .bc-sb .bc-new{color:#ff8a3d}
:root:root:root:root:root:root:root body.bc .bc-form{display:inline-flex;gap:4px}
:root:root:root:root:root:root:root body.bc .bc-form i{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:4px;font:700 var(--fs-1)/1 var(--bc-text);font-style:normal;background:rgba(253,247,234,.14);color:var(--bc-paper)}
:root:root:root:root:root:root:root body.bc .bc-form .bc-f-u{background:#2f9a62}:root:root:root:root:root:root:root body.bc .bc-form .bc-f-d{background:#c4442f}:root:root:root:root:root:root:root body.bc .bc-form .bc-f-n{background:var(--bc-or)}
@media(max-width:699.98px){:root:root:root:root:root:root:root body.bc .bc-sb{grid-template-columns:1fr 1fr}:root:root:root:root:root:root:root body.bc .bc-sb-c:nth-child(3){border-left:0}:root:root:root:root:root:root:root body.bc .bc-sb-c:nth-child(n+3){border-top:1px solid rgba(253,247,234,.16)}:root:root:root:root:root:root:root body.bc .bc-sb-main .bc-sb-v{font-size:34px}}

/* ---------- the table component (league rows) ---------- */
:root:root:root:root:root:root:root body.bc .bc-tw{overflow-x:auto;margin:0 calc(-1 * var(--s-2))}
:root:root:root:root:root:root:root body.bc .bc-tbl table,:root:root:root:root:root:root:root body.bc table.bc-t{width:100%;border-collapse:collapse;font:400 var(--fs-2)/1.4 var(--bc-text);font-variant-numeric:tabular-nums}
:root:root:root:root:root:root:root body.bc .bc-tbl th{font:600 var(--fs-1)/1.2 var(--bc-text);color:var(--bc-mut);text-align:left;padding:0 var(--s-2) var(--s-2);border-bottom:var(--bd)}
:root:root:root:root:root:root:root body.bc .bc-tbl td{padding:0 var(--s-2);height:48px;border-bottom:var(--hair);vertical-align:middle}
:root:root:root:root:root:root:root body.bc .bc-tbl tr:last-child td{border-bottom:0}
:root:root:root:root:root:root:root body.bc .bc-tbl .bc-pos{width:44px;font:700 var(--fs-4)/1 var(--bc-disp)}
:root:root:root:root:root:root:root body.bc .bc-tbl .bc-num{font:700 var(--fs-4)/1 var(--bc-disp);width:64px}
:root:root:root:root:root:root:root body.bc .bc-tbl .bc-tool a{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;font-weight:650;color:var(--bc-ink)!important;text-decoration:none!important}
:root:root:root:root:root:root:root body.bc .bc-tbl .bc-tool a:hover span{text-decoration:underline;text-decoration-color:var(--bc-or);text-underline-offset:3px}
:root:root:root:root:root:root:root body.bc .bc-tbl .bc-tool img{border-radius:5px;flex:none}
:root:root:root:root:root:root:root body.bc .bc-tbl .bc-pr{color:var(--bc-mut);white-space:nowrap}
:root:root:root:root:root:root:root body.bc .bc-tbl tr.bc-on td{background:var(--bc-or-soft)}
:root:root:root:root:root:root:root body.bc .bc-tbl tr.bc-on td:first-child{box-shadow:inset 3px 0 0 var(--bc-or)}
:root:root:root:root:root:root:root body.bc .bc-mv{font-weight:650;white-space:nowrap}
:root:root:root:root:root:root:root body.bc .bc-up{color:var(--bc-up)}:root:root:root:root:root:root:root body.bc .bc-dn{color:var(--bc-down)}:root:root:root:root:root:root:root body.bc .bc-eq{color:var(--bc-mut)}:root:root:root:root:root:root:root body.bc .bc-new{color:var(--bc-or-text)}
:root:root:root:root:root:root:root body.bc .bc-tf{margin:var(--s-3) 0 0!important}
@media(max-width:599.98px){:root:root:root:root:root:root:root body.bc .bc-tbl .bc-pr,:root:root:root:root:root:root:root body.bc .bc-tbl th:nth-child(5){display:none}}
:root:root:root:root:root:root:root body.bc .bc-tbl table{display:table!important}:root:root:root:root:root:root:root body.bc .bc-tbl thead{display:table-header-group!important}:root:root:root:root:root:root:root body.bc .bc-tbl tbody{display:table-row-group!important}
:root:root:root:root:root:root:root body.bc .bc-tbl tr{display:table-row!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}
:root:root:root:root:root:root:root body.bc .bc-tbl :is(td,th){display:table-cell!important;background:none;border-left:0!important;border-right:0!important;border-top:0!important;border-bottom-style:solid!important;width:auto;float:none!important;position:static!important}
:root:root:root:root:root:root:root body.bc .bc-tbl th{background:none!important;border-bottom:var(--bd)!important;height:auto}
:root:root:root:root:root:root:root body.bc .bc-tbl td{border-bottom:var(--hair)!important}
:root:root:root:root:root:root:root body.bc .bc-tbl tr.bc-on td{background:var(--bc-or-soft)!important}
:root:root:root:root:root:root:root body.bc .bc-tbl td::before,:root:root:root:root:root:root:root body.bc .bc-tbl td::after{content:none!important}
@media(max-width:599.98px){:root:root:root:root:root:root:root body.bc .bc-tbl :is(td,th):nth-child(5){display:none!important}}

/* ---------- vertical rhythm: one gap between stacked panes ---------- */
:root:root:root:root:root:root:root body.bc main article>*+*,:root:root:root:root:root:root:root body.bc main>.wrap>*+*{margin-top:var(--s-6)!important}
:root:root:root:root:root:root:root body.bc .a3-grid{gap:var(--s-5)!important}
:root:root:root:root:root:root:root body.bc .sheet.code.a3-p{background:var(--bc-paper)!important;border:var(--bd)!important;box-shadow:var(--sh-2)!important;padding:var(--s-5)!important;border-radius:var(--r-3)!important}
:root:root:root:root:root:root:root body.bc .sheet.code .cl{padding-left:0!important;counter-increment:none!important}
:root:root:root:root:root:root:root body.bc .sheet.code .cl::before,:root:root:root:root:root:root:root body.bc .sheet.code .srow::before{content:none!important;display:none!important}
:root:root:root:root:root:root:root body.bc .sheet.code dl>div,:root:root:root:root:root:root:root body.bc .sheet.code .srow{border-bottom:var(--hair)!important;border-top:0!important;background:none!important}

/* ---------- on the move this week: the power rankings' movers strip and three hero cards, as a broadcast segment ---------- */
:root:root:root:root:root:root:root body.bc .bc-otm h2{margin-bottom:var(--s-1)!important}
:root:root:root:root:root:root:root body.bc .bc-otm-sub{margin:0 0 var(--s-5)!important;color:var(--bc-mut);font-size:var(--fs-2)}
:root:root:root:root:root:root:root body.bc .bc-otm .rk-mvk{display:none}
:root:root:root:root:root:root:root body.bc .bc-otm-g.rk-pg{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-5)}
:root:root:root:root:root:root:root body.bc .bc-otm-g .rk-pb{display:flex!important;flex-direction:column;opacity:1!important;transform:none!important}
:root:root:root:root:root:root:root body.bc .bc-otm-g .rk-pf{margin-top:auto}
@media(max-width:899.98px){:root:root:root:root:root:root:root body.bc .bc-otm-g.rk-pg{grid-template-columns:1fr}}
:root:root:root:root:root:root:root body.bc .gl-echo-c{display:flex!important;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:52px;padding:var(--s-3) var(--s-5)!important;border:var(--bd)!important;border-radius:var(--r-2)!important;background:var(--bc-paper)!important;box-shadow:var(--sh-1)!important;font:500 var(--fs-2)/1.4 var(--bc-text)!important;color:var(--bc-ink)!important;text-decoration:none!important}
:root:root:root:root:root:root:root body.bc .gl-echo-c b{white-space:nowrap;color:var(--bc-or-text)}
:root:root:root:root:root:root:root body.bc .bc-otm-g .rk-ph{grid-template-columns:auto 56px minmax(0,1fr)!important;grid-template-areas:"r lg s" "m m m"!important;grid-row:auto!important;row-gap:var(--s-3)!important;column-gap:var(--s-3)!important;padding:var(--s-4)!important;border-right:0!important;flex:1}
:root:root:root:root:root:root:root body.bc .bc-otm-g .rk-phr{grid-area:r;font-size:48px!important}
:root:root:root:root:root:root:root body.bc .bc-otm-g .rk-ph>.rk-lg{grid-area:lg}
:root:root:root:root:root:root:root body.bc .bc-otm-g .rk-phm{grid-area:m}
:root:root:root:root:root:root:root body.bc .bc-otm-g .rk-phs{grid-area:s;justify-self:end;align-self:center}
:root:root:root:root:root:root:root body.bc .bc-otm-g .rk-phn{font-size:var(--fs-5)!important;line-height:1.1!important}
:root:root:root:root:root:root:root body.bc .bc-otm-g .rk-phw{-webkit-line-clamp:2!important}

/* ---------- leftovers of the terminal look on the homepage and the footer ---------- */
:root:root:root:root:root:root:root body.bc :is(.hp-h,#rl,#hw,.cmp>h2,#wk-h1,h1,h2)::before{content:none!important;display:none!important}
:root:root:root:root:root:root:root body.bc :is(.hp-h,#rl,#hw,.cmp>h2,#wk-h1,h1,h2)::after{content:none!important}
:root:root:root:root:root:root:root body.bc .cc.cc-cmdc{display:none!important}
:root:root:root:root:root:root:root body.bc #digest>.cc-t{display:none!important}
:root:root:root:root:root:root:root body.bc #releases,:root:root:root:root:root:root:root body.bc #digest{grid-column:1/-1!important}
@media(min-width:900px){:root:root:root:root:root:root:root body.bc #releases ul.rel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s-6)}}
:root:root:root:root:root:root:root body.bc #digest{display:grid!important;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s-5) var(--s-7);align-items:end}
:root:root:root:root:root:root:root body.bc #digest>.a3-lb{grid-column:1/-1;margin-bottom:0!important}
@media(max-width:799.98px){:root:root:root:root:root:root:root body.bc #digest{grid-template-columns:1fr}}
:root:root:root:root:root:root:root body.bc .digest-form{display:flex!important;gap:var(--s-2);flex-wrap:wrap}
:root:root:root:root:root:root:root body.bc .digest-form input[type=email]{flex:1 1 200px;min-height:44px;padding:0 var(--s-4)!important;border:var(--bd)!important;border-radius:var(--r-2)!important;background:var(--bc-paper)!important;font:400 var(--fs-3)/1 var(--bc-text)!important;box-shadow:none!important}
:root:root:root:root:root:root:root body.bc footer .sl{display:flex!important;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);margin-top:var(--s-4)!important;padding:var(--s-3) 0 0!important;border-top:var(--hair)!important;position:static!important}
:root:root:root:root:root:root:root body.bc footer .sl-m{background:none!important;color:var(--bc-ink)!important;padding:0!important;font-weight:650}
:root:root:root:root:root:root:root body.bc footer .sl-sp{display:none!important}
:root:root:root:root:root:root:root body.bc footer .sl :is(.sl-b,.sl-r){border:0!important;padding:0!important;background:none!important}
:root:root:root:root:root:root:root body.bc footer .sl button{min-height:32px;border:var(--hair)!important;border-radius:var(--r-pill)!important;padding:0 var(--s-3)!important;background:none!important;font:600 var(--fs-1)/1 var(--bc-text)!important}

/* ---------- the match report scoreboard (guides): two sides, the leader lit ---------- */
:root:root:root:root:root:root:root body.bc .bc-vsb{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;margin:var(--s-5) 0 var(--s-2);border:var(--bd);border-radius:var(--r-2);background:var(--bc-ink);color:var(--bc-paper);overflow:hidden}
:root:root:root:root:root:root:root body.bc .bc-vs-s{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-4) var(--s-5);min-width:0}
:root:root:root:root:root:root:root body.bc .bc-vs-s:last-child{align-items:flex-end;text-align:right}
:root:root:root:root:root:root:root body.bc .bc-vs-n{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;font:650 var(--fs-4)/1.2 var(--bc-text);color:var(--bc-paper)!important;text-decoration:none!important}
:root:root:root:root:root:root:root body.bc .bc-vs-n img{border-radius:6px;background:#fff}
:root:root:root:root:root:root:root body.bc .bc-vs-v{font:700 48px/1 var(--bc-disp);font-variant-numeric:tabular-nums;color:rgba(253,247,234,.86)}
:root:root:root:root:root:root:root body.bc .bc-vs-lead .bc-vs-v{color:#ff8a3d}
:root:root:root:root:root:root:root body.bc .bc-vs-m{display:inline-flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;font:500 var(--fs-1)/1.4 var(--bc-text);color:rgba(253,247,234,.78)}
:root:root:root:root:root:root:root body.bc .bc-vs-s:last-child .bc-vs-m{justify-content:flex-end}
:root:root:root:root:root:root:root body.bc .bc-vsb .bc-mv{font-size:var(--fs-1)}
:root:root:root:root:root:root:root body.bc .bc-vs-x{display:grid;place-items:center;padding:0 var(--s-4);font:700 var(--fs-6)/1 var(--bc-disp);color:rgba(253,247,234,.5);border-left:1px solid rgba(253,247,234,.16);border-right:1px solid rgba(253,247,234,.16)}
@media(max-width:599.98px){:root:root:root:root:root:root:root body.bc .bc-vs-s{padding:var(--s-3)}:root:root:root:root:root:root:root body.bc .bc-vs-v{font-size:34px}:root:root:root:root:root:root:root body.bc .bc-vs-x{padding:0 var(--s-2);font-size:var(--fs-4)}:root:root:root:root:root:root:root body.bc .bc-vs-n{font-size:var(--fs-2)}:root:root:root:root:root:root:root body.bc .bc-vs-m .bc-form{display:none}}

/* ---------- every content table reads as the table component ---------- */
:root:root:root:root:root:root:root body.bc main table:not(.bc-t):not([class*="rk-"]){border-collapse:collapse;font:400 var(--fs-2)/1.45 var(--bc-text);font-variant-numeric:tabular-nums}
:root:root:root:root:root:root:root body.bc main table:not([class*="rk-"]) th{font:600 var(--fs-1)/1.3 var(--bc-text)!important;color:var(--bc-mut)!important;text-transform:none!important;letter-spacing:0!important;background:none!important;border-bottom:var(--bd)!important}
:root:root:root:root:root:root:root body.bc main table:not([class*="rk-"]) td{border-bottom:var(--hair)!important;border-top:0!important;border-style:solid}
/* one rhythm between stacked blocks on every page: 32px, 24px inside grids */
:root:root:root:root:root:root:root body.bc main.a3-main>*+*,:root:root:root:root:root:root:root body.bc main.a3-main>.wrap>*+*,:root:root:root:root:root:root:root body.bc main.a3-main article>*+*{margin-top:var(--s-6)!important}
:root:root:root:root:root:root:root body.bc main .a3-grid,:root:root:root:root:root:root:root body.bc main .vsb,:root:root:root:root:root:root:root body.bc main .a3-grid.a3-vg{row-gap:var(--s-5)!important;column-gap:var(--s-5)!important}
:root:root:root:root:root:root:root body.bc main.a3-main>.a3-grid>*,:root:root:root:root:root:root:root body.bc main .vsb>*{margin-top:0!important}
@media(max-width:699.98px){:root:root:root:root:root:root:root body.bc main.a3-main>*+*,:root:root:root:root:root:root:root body.bc main.a3-main article>*+*{margin-top:var(--s-5)!important}:root:root:root:root:root:root:root body.bc main .a3-grid,:root:root:root:root:root:root:root body.bc main .vsb{row-gap:var(--s-4)!important}}
/* code cards (.cc): the sample-email header and summaries read as a plain key/value card. no prompt line, no line numbers */
:root:root:root:root:root:root:root body.bc .cc{counter-reset:none!important;background:var(--bc-paper)!important;border:1px solid var(--bc-line)!important;border-radius:var(--r-3)!important;padding:var(--s-4) var(--s-5)!important;box-shadow:none!important;font-family:var(--bc-text)!important}
:root:root:root:root:root:root:root body.bc .cc .cc-cmd,:root:root:root:root:root:root:root body.bc .cc-cmdc{display:none!important}
:root:root:root:root:root:root:root body.bc .cc .cc-l{padding-left:0!important;margin:0!important;font-size:var(--fs-2)!important;line-height:var(--lh-2)!important}
:root:root:root:root:root:root:root body.bc .cc .cc-l::before,:root:root:root:root:root:root:root body.bc .cc .cc-l::after{content:none!important;display:none!important}
:root:root:root:root:root:root:root body.bc .cc .cc-l+.cc-l{margin-top:var(--s-2)!important}
:root:root:root:root:root:root:root body.bc .cc .cc-kv{display:block!important}:root:root:root:root:root:root:root body.bc .cc .cc-kv .x{display:block!important;white-space:normal!important}:root:root:root:root:root:root:root body.bc .cc .cc-kv .k{display:inline-block!important;min-width:7.5em;width:auto!important}:root:root:root:root:root:root:root body.bc .cc .cc-kv .v{display:inline!important;width:auto!important}
:root:root:root:root:root:root:root body.bc .cc .k{color:var(--bc-mut)!important}
:root:root:root:root:root:root:root body.bc .cc .cc-c,:root:root:root:root:root:root:root body.bc .cc .cm{color:var(--bc-mut)!important;font-size:var(--fs-1)!important}
:root:root:root:root:root:root:root body.bc .cc>.cc-t{display:block!important;font:600 var(--fs-1)/1 var(--bc-text)!important;color:var(--bc-mut)!important;margin:0 0 var(--s-3)!important;padding:0!important;background:none!important;border:0!important}
/* /new/ launches: no frame inside the pane, dated headings as broadcast labels */
:root:root:root:root:root:root:root body.bc .cframe.glog{border:0!important;padding:0!important;background:none!important;box-shadow:none!important;margin:0!important}
:root:root:root:root:root:root:root body.bc .cframe.glog>.cc-t{display:none!important}
:root:root:root:root:root:root:root body.bc .glog-h{display:flex!important;align-items:baseline;gap:var(--s-3);font:900 var(--fs-5)/1.1 var(--bc-disp)!important;margin:var(--s-6) 0 var(--s-3)!important;padding:0 0 var(--s-2)!important;border-bottom:2px solid var(--bc-ink)!important}
:root:root:root:root:root:root:root body.bc .glog-day:first-of-type .glog-h{margin-top:var(--s-2)!important}
:root:root:root:root:root:root:root body.bc .glog-h .cm{font:600 var(--fs-1)/1 var(--bc-text)!important;color:var(--bc-mut)!important}
:root:root:root:root:root:root:root body.bc .cc .cc-l,:root:root:root:root:root:root:root body.bc .cc .cc-l .x{display:block!important;width:auto!important;max-width:none!important;white-space:normal!important}
:root:root:root:root:root:root:root body.bc .cc .cc-l.cc-kv .k{display:inline-block!important}
@media(max-width:699.98px){:root:root:root:root:root:root:root body.bc .cc .cc-l.cc-kv .k{display:block!important;min-width:0}:root:root:root:root:root:root:root body.bc .cc .cc-l.cc-kv .v{display:block!important}}
:root:root:root:root:root:root:root body.bc .cc .cc-l.cc-cmd{display:none!important}
:root:root:root:root:root:root:root body.bc .cc-404 .cc-err{font-size:var(--fs-3)!important}
/* footer: the gutter on phones, links wrap as tap targets */
:root:root:root:root:root:root:root body.bc footer.foot{padding-left:var(--gutter)!important;padding-right:var(--gutter)!important}
:root:root:root:root:root:root:root body.bc footer.foot .a3-fl{display:flex!important;flex-wrap:wrap;gap:0 var(--s-4)}
:root:root:root:root:root:root:root body.bc footer.foot .a3-fl a{display:inline-flex;align-items:center;min-height:44px}
:root:root:root:root:root:root:root body.bc footer.foot .a3-fl .nw+.nw::before{content:none!important}
/* on the move: the movers as a tidy grid of up to 8, never a clipped scroller */
:root:root:root:root:root:root:root body.bc .bc-otm .rk-mv{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:var(--s-3)!important;overflow:visible!important;padding:0!important;scroll-snap-type:none!important;mask-image:none!important;-webkit-mask-image:none!important}
:root:root:root:root:root:root:root body.bc .bc-otm .rk-mc{min-width:0!important;width:auto!important;flex:none!important}
:root:root:root:root:root:root:root body.bc .bc-otm .rk-mc:nth-child(n+9){display:none!important}
:root:root:root:root:root:root:root body.bc .bc-otm .rk-mcm b{white-space:normal!important}
@media(max-width:1023.98px){:root:root:root:root:root:root:root body.bc .bc-otm .rk-mv{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:559.98px){:root:root:root:root:root:root:root body.bc .bc-otm .rk-mv{grid-template-columns:minmax(0,1fr)!important}:root:root:root:root:root:root:root body.bc .bc-otm .rk-mc:nth-child(n+5){display:none!important}}
/* AA: small orange text uses the darker text orange */
:root:root:root:root:root:root:root body.bc .gl-banner .gl-bp,:root:root:root:root:root:root:root body.bc .rk-newb,:root:root:root:root:root:root:root body.bc .bc-otm .rk-mck.n{color:#9a3f0a!important}
/* the 13px floor: guide comparison furniture, small print, table cells */
:root:root:root:root:root:root:root body.bc main :is(.vs-rk,.vs-k,.vs-mh,.vs-note,.vs-ns,small,td,dt,.tag){font-size:max(13px,1em)!important}
:root:root:root:root:root:root:root body.bc main :is(.vs-rk,.vs-k,.vs-mh,.vs-note,.vs-ns,td,dt){font-size:max(13px,.8125rem)!important}
/* the table's quiet filler rows on short tabs: same height as a row, a faint rule, nothing to read */
:root:root:root:root:root:root:root body.bc .glrk .rk-rows>li.rk-fill{min-height:60px;border-top:1px dashed var(--bc-line);background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(22,24,31,.025) 6px 12px);list-style:none;pointer-events:none}
@media(max-width:699.98px){:root:root:root:root:root:root:root body.bc .glrk .rk-rows>li.rk-fill{min-height:64px}}
/* footer: no dot separators (they orphaned at line ends on phones); the gap does the separating */
:root:root:root:root:root:root:root body.bc footer.foot .a3-fl>.nw::after,:root:root:root:root:root:root:root body.bc footer.foot .a3-fl>.nw::before{content:none!important;display:none!important}
:root:root:root:root:root:root:root body.bc footer.foot .a3-fl>.nw{padding-right:0!important;position:static!important}
:root:root:root:root:root:root:root body.bc footer.foot .a3-fl{gap:0 var(--s-5)!important}
/* 404: one card. the explanation sits in the page card, no box inside the box */
:root:root:root:root:root:root:root body.bc .cc.cc-404{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important;margin:var(--s-5) auto 0!important;max-width:34em;text-align:center}
:root:root:root:root:root:root:root body.bc .cc.cc-404>.cc-t{display:none!important}
:root:root:root:root:root:root:root body.bc .cc.cc-404 .cc-err{font-weight:400}
:root:root:root:root:root:root:root body.bc .cc.cc-404 .nf-dym .cc-l a{display:inline-flex;min-height:44px;align-items:center}
:root:root:root:root:root:root:root body.bc .a3-w-404{text-align:center}
/* hero ask: the answer lines arrive quickly, so the box never sits empty above the input */
:root:root:root:root:root:root:root body.bc .a3-w-ask .np-ans .np-l{animation-delay:calc(var(--d,0s) * .3)!important;animation-duration:.35s!important}
:root:root:root:root:root:root:root body.bc .a3-w-ask{padding-top:var(--s-5)!important;padding-bottom:var(--s-5)!important}
:root:root:root:root:root:root:root body.bc .a3-w-ask .t7-bub{gap:var(--s-3)!important}
/* tool page on phone: the guide's rhythm. the scoreboard and the table stay as cards, then one flowing column of
   sections, each with a clear header and a rule above it, instead of a stack of similar cards */
:root:root:root:root:root:root:root body.bc .ps-link.ps-in:not(#z){margin:var(--s-4) 0 0!important;padding:var(--s-3) 0 0!important;border:0!important;border-top:1px solid var(--bc-line)!important;border-radius:0!important;background:none!important;box-shadow:none!important;font-size:14px}
@media(max-width:699.98px){
:root:root:root:root:root:root:root body.bc .a3-tg{gap:0!important;margin-top:var(--s-6)!important;background:var(--bc-paper);border:var(--bd);border-radius:var(--r-3);box-shadow:var(--sh-2);padding:0 var(--s-4)}
:root:root:root:root:root:root:root body.bc .a3-tg>*:not(#z){background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;margin:0!important;padding:var(--s-6) 0!important}
:root:root:root:root:root:root:root body.bc .a3-tg>*:not(#z)+*{border-top:2px solid var(--bc-ink,#16181f)!important}
:root:root:root:root:root:root:root body.bc .a3-tg>*:not(#z):not(.a3-w-sp):has(h2)>.a3-lb,:root:root:root:root:root:root:root body.bc .a3-tg>*:not(#z):has(h2) .gl-eyebrow:not(:only-child){display:none!important}
:root:root:root:root:root:root:root body.bc .a3-tg>.a3-w-sp:not(#z)>.a3-lb,:root:root:root:root:root:root:root body.bc .a3-tg>*:not(#z):not(:has(h2))>.a3-lb{display:block!important;margin:0 0 var(--s-4)!important;font:900 22px/1.2 var(--dot,Doto),ui-monospace,monospace!important;color:var(--bc-ink,#16181f)!important;letter-spacing:0!important;text-transform:lowercase}
:root:root:root:root:root:root:root body.bc .a3-tg>.a3-w-sp:not(#z)>.a3-lb .a3-dot,:root:root:root:root:root:root:root body.bc .a3-tg>*:not(#z):not(:has(h2))>.a3-lb .a3-dot{display:none!important}
:root:root:root:root:root:root:root body.bc .a3-tg h2{font-size:22px!important;line-height:1.2!important;margin:0 0 var(--s-4)!important}
:root:root:root:root:root:root:root body.bc .a3-tg .gl-dev2{display:flex!important;flex-direction:column!important;gap:var(--s-4)!important}
:root:root:root:root:root:root:root body.bc .a3-tg .gl-dev2 .gl-eyebrow{font:900 22px/1.2 var(--dot,Doto),ui-monospace,monospace!important;color:var(--bc-ink,#16181f)!important;margin:0 0 var(--s-3)!important}
:root:root:root:root:root:root:root body.bc .a3-tg .gl-dev2 .gl-devs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:var(--s-3)!important}
:root:root:root:root:root:root:root body.bc .a3-tg .gl-dev2 .gl-devm,:root:root:root:root:root:root:root body.bc .a3-tg .gl-dev2 .gl-rate{width:auto!important;max-width:none!important}
:root:root:root:root:root:root:root body.bc .a3-tg .gl-dev2 .gl-echo{display:flex!important;width:100%!important;justify-content:space-between;margin-top:var(--s-4)!important;min-height:44px;align-items:center}
:root:root:root:root:root:root:root body.bc .a3-tg .a3-w-al .btn,:root:root:root:root:root:root:root body.bc .a3-tg .a3-w-al a.card{min-height:44px}
:root:root:root:root:root:root:root body.bc .a3-w-dg{margin-top:var(--s-6)!important}
}

/* ===================== v6 polish batch (preview) ===================== */
/* 1. fewer boxes: the heavy outlined card + shadow is kept for hero components only (title scoreboard, league tables,
   the pick card, the ask box, build and player cards, the community band). every other panel is a flat full-width
   band: a top rule, the kicker + header pattern, no fill, no shadow */
:root:root:root:root:root:root:root body.bc main :is(.a3-p,.cm-p):not(.a3-w-ttl):not(.bc-tbl):not(.a3-w-sc):not(.a3-w-cmp):not(.a3-w-pk):not(.a3-w-ask):not(.cm-pc):not(.cm-hx-band):not(.cc-404):not(#z){background:none!important;background-image:none!important;border:0!important;border-top:2px solid var(--bc-ink,#13151c)!important;border-radius:0!important;box-shadow:none!important;padding:var(--s-5) 0 var(--s-6)!important}
:root:root:root:root:root:root:root body.bc main :is(.a3-p,.cm-p):not(.a3-w-ttl):not(.bc-tbl):not(.a3-w-sc):not(.a3-w-cmp):not(.a3-w-pk):not(.a3-w-ask):not(.cm-pc):not(.cm-hx-band):not(.cc-404):not(#z)::before{display:none!important}
:root:root:root:root:root:root:root body.bc main .a3-w-pg:not(.a3-w-ttl):not(#z){border-top:0!important;padding-top:0!important}
:root:root:root:root:root:root:root body.bc main .a3-w-404:not(#z){border-top:0!important}
/* the tool page on phone: no wrapper card now that its sections are bands */
@media(max-width:699.98px){:root:root:root:root:root:root:root body.bc .a3-tg:not(#z){background:none!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important}}
/* community home: build cards are hero components, so they keep their card inside the (now flat) panels */
:root:root:root:root:root:root:root body.bc .cm :is(.cm-hx,.cm-home) .cm-pcards{gap:16px!important}
:root:root:root:root:root:root:root body.bc .cm :is(.cm-hx,.cm-home) .cm-pcard:not(#z){border:var(--bd)!important;border-radius:12px!important;box-shadow:var(--sh-2)!important;background:var(--bc-paper)!important;padding:0!important}
:root:root:root:root:root:root:root body.bc .cm :is(.cm-hx,.cm-home) .cm-pcard:not(#z)>*{padding-left:16px;padding-right:16px}
:root:root:root:root:root:root:root body.bc .cm :is(.cm-hx,.cm-home) .cm-pcard-v:not(#z){margin:0!important;border-radius:0!important;padding:0!important}

/* 2. category league table: #1 is back at the top with the crown, so the table starts at 01 */
:root:root:root:root:root:root:root body.bc .a3-w-cmp .tr.tr-1>summary{background:var(--bc-or-soft,#f3e7d7)!important;box-shadow:inset 4px 0 0 var(--bc-or)}
:root:root:root:root:root:root:root body.bc .a3-w-cmp .tr.tr-1 .tn{color:var(--bc-or-text,#a7440b)!important;font-weight:900}
:root:root:root:root:root:root:root body.bc .a3-w-cmp .tr.tr-1 .nmt::after{content:"";display:inline-block;width:16px;height:13px;margin-left:8px;vertical-align:-1px;background:var(--bc-or);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 13'%3E%3Cpath d='M1 3l3.5 3L8 1l3.5 5L15 3l-1.5 9h-11z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 13'%3E%3Cpath d='M1 3l3.5 3L8 1l3.5 5L15 3l-1.5 9h-11z'/%3E%3C/svg%3E") center/contain no-repeat}

/* 5. phone homepage: the movers swipe sideways, three launches then 'see all', a compact weekly */
@media(max-width:699.98px){
:root:root:root:root:root:root:root body.bc .bc-otm .rk-mv:not(#z){display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;scroll-snap-type:x mandatory;gap:12px!important;padding:2px 2px 10px!important;margin:0 -12px 0 0!important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
:root:root:root:root:root:root:root body.bc .bc-otm .rk-mv::-webkit-scrollbar{display:none}
:root:root:root:root:root:root:root body.bc .bc-otm .rk-mv>.rk-mc:not(#z){display:flex!important;flex:0 0 72%!important;scroll-snap-align:start}
:root:root:root:root:root:root:root body.bc .a3-w-rl .rel>li:nth-child(n+4){display:none!important}
:root:root:root:root:root:root:root body.bc .a3-w-dg .wk-stk,:root:root:root:root:root:root:root body.bc .a3-w-dg .cc-t{display:none!important}
:root:root:root:root:root:root:root body.bc .a3-w-dg:not(#z){padding-top:var(--s-4)!important;padding-bottom:var(--s-4)!important}
:root:root:root:root:root:root:root body.bc .a3-w-dg h2{font-size:22px!important;margin-bottom:6px!important}
:root:root:root:root:root:root:root body.bc .a3-w-dg .muted{margin:0 0 10px!important}
}

/* 6. footer: one plain line */
:root:root:root:root:root:root:root body.bc .sl-plain{margin:var(--s-4) 0 0;padding-top:var(--s-3);border-top:1px solid var(--bc-line);font:400 13px/1.5 var(--sans,Inter),system-ui,sans-serif!important;color:var(--bc-ink-2,#393b44)}
:root:root:root:root:root:root:root body.bc .sl-plain time{font:inherit!important;color:inherit}

/* 7. guides: every table after the key one folds into a section; content stays in the html */
:root:root:root:root:root:root:root body.bc details.g-fold{margin:var(--s-5) 0;border-top:2px solid var(--bc-ink,#13151c);border-bottom:1px solid var(--bc-line)}
:root:root:root:root:root:root:root body.bc details.g-fold>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;cursor:pointer;font:700 16px/1.3 var(--sans,Inter),system-ui,sans-serif;color:var(--bc-ink,#13151c)}
:root:root:root:root:root:root:root body.bc details.g-fold>summary::-webkit-details-marker{display:none}
:root:root:root:root:root:root:root body.bc details.g-fold>summary:focus-visible{outline:2px solid var(--bc-or);outline-offset:2px}
:root:root:root:root:root:root:root body.bc details.g-fold>summary .g-fold-a{font:700 14px/1 var(--mono,ui-monospace),monospace;transition:transform .15s}
:root:root:root:root:root:root:root body.bc details.g-fold[open]>summary .g-fold-a{transform:rotate(180deg)}
:root:root:root:root:root:root:root body.bc details.g-fold>.tblwrap{margin:0 0 var(--s-4)!important}

/* 8. one button system. primary: solid ink (on the accent band: solid paper). secondary: outline. text link: label + "->".
   44px minimum tap target, 10px radius, 14px/650, the same hover, focus-visible and active states everywhere */
:root:root:root:root:root:root:root body.bc :is(.btn,.gl-btn,.gl-rpl,.np-form button,.digest-form button,.np-chip,.rk-lay [role=tab],.cm-tabs .btn,.cm-si-tb .btn,.gl-lay [role=tab]):not(#z){box-sizing:border-box;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;min-height:44px!important;padding:0 18px!important;border-radius:10px!important;font:650 14px/1.1 var(--sans,Inter),system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important;text-decoration:none!important;cursor:pointer;transition:background-color .12s,color .12s,border-color .12s,transform .06s,box-shadow .12s;box-shadow:none!important}
/* primary */
:root:root:root:root:root:root:root body.bc :is(.btn,.gl-btn.pri,.np-form button,.digest-form button):not(.ghost):not(.on):not(#z){background:var(--bc-ink,#13151c)!important;color:var(--bc-paper,#fef7e7)!important;border:1.5px solid var(--bc-ink,#13151c)!important}
:root:root:root:root:root:root:root body.bc :is(.btn,.gl-btn.pri,.np-form button,.digest-form button):not(.ghost):not(.on):not(#z):hover{background:var(--bc-or)!important;border-color:var(--bc-or)!important;color:#fff8e9!important}
/* the band's primary is paper on red */
:root:root:root:root:root:root:root body.bc .cm-hx-band .btn:not(#z){background:var(--bc-paper,#fef7e7)!important;color:var(--bc-ink,#13151c)!important;border-color:var(--bc-ink,#13151c)!important}
:root:root:root:root:root:root:root body.bc .cm-hx-band .btn:not(#z):hover{background:var(--bc-ink,#13151c)!important;color:#fff8e9!important}
/* secondary: outline */
:root:root:root:root:root:root:root body.bc :is(.gl-btn.ghost,.gl-btn:not(.pri),.gl-rpl,.np-chip,.btn.sm.ghost,.rk-lay [role=tab],.gl-lay [role=tab],.cm-tabs .btn,.cm-si-tb .btn):not(.on):not(.x-a):not(.x-b):not(#z){background:transparent!important;color:var(--bc-ink,#13151c)!important;border:1.5px solid var(--bc-ink,#13151c)!important}
:root:root:root:root:root:root:root body.bc :is(.gl-btn.ghost,.gl-btn:not(.pri),.gl-rpl,.np-chip,.btn.sm.ghost,.rk-lay [role=tab],.gl-lay [role=tab],.cm-tabs .btn,.cm-si-tb .btn):not(.on):not(.x-a):not(.x-b):not(#z):hover{background:var(--bc-or-soft,#f3e7d7)!important;border-color:var(--bc-or)!important}
/* selected tabs and chips read as primary */
:root:root:root:root:root:root:root body.bc :is(.rk-lay,.gl-lay) [role=tab][aria-selected=true][role][type]:not(.x-a):not(.x-b):not(#z),:root:root:root:root:root:root:root body.bc :is(.cm-tabs,.cm-si-tb) .btn.on.on.on.on:not(#z){background:var(--bc-ink,#13151c)!important;color:var(--bc-paper,#fef7e7)!important;border-color:var(--bc-ink,#13151c)!important}
/* shared states */
/* (qa fix, Oct 26) a two-line button label (the /new/ fixture button at 393) centres like its one-line neighbours, and its
   '->' never splits across lines */
:root:root:root:root:root:root:root body.bc .gl-btn:not(#z){text-align:center}
:root:root:root:root:root:root:root body.bc .gl-btn .gl-bl:not(#z){min-width:0}
:root:root:root:root:root:root:root body.bc .gl-btn .gl-nw:not(#z){white-space:nowrap}
:root:root:root:root:root:root:root body.bc :is(.btn,.gl-btn,.gl-rpl,.np-form button,.digest-form button,.np-chip,[role=tab]):not(#z):focus-visible{outline:3px solid var(--bc-or)!important;outline-offset:2px!important}
:root:root:root:root:root:root:root body.bc :is(.btn,.gl-btn,.gl-rpl,.np-form button,.digest-form button,.np-chip,[role=tab]):not(#z):active{transform:translateY(1px)}
:root:root:root:root:root:root:root body.bc :is(.btn,.gl-btn,.np-form button,.digest-form button)[disabled]:not(#z){opacity:.5;cursor:not-allowed}
/* text link with arrow: one weight, one underline, the arrow nudges on hover */
:root:root:root:root:root:root:root body.bc main a.lnk:not(#z),:root:root:root:root:root:root:root body.bc .cm a.lnk:not(#z){display:inline-flex;align-items:center;gap:6px;min-height:44px;font:650 14px/1.2 var(--sans,Inter),system-ui,sans-serif!important;color:var(--bc-ink,#13151c)!important;text-decoration:underline!important;text-decoration-color:var(--bc-or)!important;text-decoration-thickness:2px!important;text-underline-offset:4px}
:root:root:root:root:root:root:root body.bc main a.lnk:not(#z) span[aria-hidden],:root:root:root:root:root:root:root body.bc .cm a.lnk:not(#z) span[aria-hidden]{display:inline-block;text-decoration:none;transition:transform .12s}
:root:root:root:root:root:root:root body.bc main a.lnk:not(#z):hover span[aria-hidden],:root:root:root:root:root:root:root body.bc .cm a.lnk:not(#z):hover span[aria-hidden]{transform:translateX(3px)}
:root:root:root:root:root:root:root body.bc a.lnk:not(#z):focus-visible{outline:3px solid var(--bc-or);outline-offset:2px;border-radius:4px}
/* the header's 'get the weekly' sits in the bar: primary, a touch tighter */
:root:root:root:root:root:root:root body.bc header .btn.sm:not(#z){min-height:44px!important;padding:0 16px!important}
/* the ask box: the button is flush with its input */
:root:root:root:root:root:root:root body.bc .np-form button:not(#z){border-radius:0 10px 10px 0!important}
/* community band: its kicker (and the demo tag) sit in the band, not on its edge; the primary is paper on red */
:root:root:root:root:root:root:root body.bc .cm-hx-band>.a3-lb.cm-hx-lb:not(#z){position:static!important;transform:none!important;background:none!important;padding:0!important;margin:0!important;color:#fff8e9!important;display:flex!important;gap:8px;font:600 13px/1.3 var(--sans,Inter),system-ui,sans-serif!important}
:root:root:root:root:root:root:root body.bc .cm-hx-band .btn.btn.btn:not(.on):not(#z){background:var(--bc-paper,#fef7e7)!important;color:var(--bc-ink,#13151c)!important;border-color:var(--bc-ink,#13151c)!important}
:root:root:root:root:root:root:root body.bc .cm-hx-band .btn.btn.btn:not(.on):not(#z):hover{background:var(--bc-ink,#13151c)!important;color:#fff8e9!important}
/* phone: the latest builds swipe sideways instead of stacking four tall cards */
@media(max-width:699.98px){
:root:root:root:root:root:root:root body.bc .cm .cm-hx-cards:not(#z){display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px!important;padding:2px 2px 12px;scrollbar-width:none}
:root:root:root:root:root:root:root body.bc .cm .cm-hx-cards>.cm-pcard:not(#z){flex:0 0 80%;scroll-snap-align:start}
:root:root:root:root:root:root:root body.bc .cm .cm-pcard-v:not(#z){height:120px!important;min-height:0!important;aspect-ratio:auto!important}
}
:root:root:root:root:root:root:root body.bc .cm-hx-band .cm-hx-demo:not(#z){background:none!important;color:#fff8e9!important;border:1px solid #fff8e9!important}
@media(max-width:699.98px){
:root:root:root:root:root:root:root body.bc .cm .cm-hb-b .cm-pcards:not(#z){display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px!important;padding:2px 2px 12px;scrollbar-width:none}
:root:root:root:root:root:root:root body.bc .cm .cm-hb-b .cm-pcards>.cm-pcard:not(#z){flex:0 0 80%;scroll-snap-align:start}
}

/* the board's category tabs keep their broadcast strip (light text on ink); only the tap target is shared */
:root:root:root:root:root:root:root body.bc .rk-tabs [role=tab]:not(#z){min-height:44px}
:root:root:root:root:root:root:root body.bc .rk-tabs [role=tab]:not(#z):focus-visible{outline:3px solid var(--bc-or)!important;outline-offset:-3px!important}
/* with example skills off, the tools/skills switch has one option: hide it */
:root:root:root:root:root:root:root body.bc .rk-lay:not(:has(>[role=tab]+[role=tab])){display:none!important}

/* cls: the hero's ghost terminal is drawn by script before the h1; it's absolutely placed, so it must not
   give the h1 the stack gap (that pushed the hero down 32px after first paint) */
:root:root:root:root:root:root:root body.bc main .hp-hero > .vx-ghost + h1.n9-h1:not(#z){margin-top:0!important}
/* cls: the intro script sits inline after the h1 and pauses the parser, so the first paint can land with only
   the h1 in the hero; centring then threw it 214px down and back. the hero is taller than the screen anyway,
   so top-aligning looks the same once loaded and stops the jump */
:root:root:root:root:root:root:root body.bc main section.hp-hero.a3-hero:not(#z){justify-content:flex-start!important}

/* ---------- the page end: read more, the weekly, then the footer. one block, the same on every page (layers/pageend.py) ----------
   it sits in the site wrap, so its edges are the main column's edges on every page at every width */
:root:root:root:root:root:root:root body.bc .pe:not(#z){display:flex!important;flex-direction:column!important;gap:0!important;margin:var(--s-8,64px) auto 0!important}
:root:root:root:root:root:root:root body.bc .pe>section:not(#z){margin:0!important;padding:var(--s-6,32px) 0!important;border:0!important;border-top:1.5px solid var(--bc-ink,#13151c)!important;border-radius:0!important;background:none!important;box-shadow:none!important;max-width:none!important;width:auto!important}
:root:root:root:root:root:root:root body.bc .pe .a3-lb:not(#z){position:static!important;margin:0 0 10px!important}
:root:root:root:root:root:root:root body.bc .pe h2:not(#z){margin:0!important;font:700 clamp(24px,2.4vw,32px)/1.1 var(--bc-disp)!important;letter-spacing:0!important}
:root:root:root:root:root:root:root body.bc .pe-rm-0:not(#z){padding:0!important;border-top:0!important;min-height:0}
:root:root:root:root:root:root:root body.bc .pe-rm-hd:not(#z){display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 var(--s-4,16px)}
:root:root:root:root:root:root:root body.bc .pe-rm-hd .lnk:not(#z){display:inline-flex;align-items:center;min-height:44px;font-size:14px}
:root:root:root:root:root:root:root body.bc .pe-rl:not(#z){list-style:none!important;margin:0!important;padding:0!important;display:block!important;max-width:none!important}
:root:root:root:root:root:root:root body.bc .pe-rl li:not(#z){display:grid!important;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4px 24px;align-items:baseline;margin:0!important;padding:12px 0!important;border:0!important;border-bottom:1px solid var(--bc-line)!important;background:none!important;box-shadow:none!important}
:root:root:root:root:root:root:root body.bc .pe-rl li:last-child:not(#z){border-bottom:0!important}
:root:root:root:root:root:root:root body.bc .pe-rl a:not(#z){font:650 16px/1.35 var(--bc-text)!important;color:var(--bc-ink,#13151c)!important;text-decoration:underline;text-decoration-color:var(--bc-or);text-underline-offset:3px;text-decoration-thickness:1.5px;min-height:0;padding:0}
:root:root:root:root:root:root:root body.bc .pe-rl a:hover:not(#z){color:var(--bc-or)!important}
:root:root:root:root:root:root:root body.bc .pe-h:not(#z){font:400 15px/1.45 var(--bc-text);color:var(--bc-ink2)}
:root:root:root:root:root:root:root body.bc .pe-dg:not(#z){display:grid!important;grid-template-columns:minmax(0,5fr) minmax(0,7fr)!important;gap:16px 24px!important;align-items:end!important}
:root:root:root:root:root:root:root body.bc .pe-dg-c:not(#z){display:block}
:root:root:root:root:root:root:root body.bc .pe-dg-p:not(#z){margin:10px 0 0!important;font:400 15px/1.5 var(--bc-text)!important;color:var(--bc-ink2)!important;max-width:52ch!important}
:root:root:root:root:root:root:root body.bc .pe-dg-s:not(#z){margin:6px 0 0!important}
:root:root:root:root:root:root:root body.bc .pe-dg-s .lnk:not(#z){display:inline-flex;align-items:center;min-height:44px;font-size:14px}
:root:root:root:root:root:root:root body.bc .pe-dg .digest-form:not(#z){display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin:0!important;max-width:none!important;width:100%;border:0!important;background:none!important;box-shadow:none!important;padding:0!important}
:root:root:root:root:root:root:root body.bc .pe-dg .digest-form input[type=email]:not(#z){min-height:48px;box-sizing:border-box;width:100%;padding:0 14px;font:400 16px/1 var(--bc-text);border:1.5px solid var(--bc-ink,#13151c)!important;border-radius:10px;background:var(--bc-paper,#fef7e7)}
:root:root:root:root:root:root:root body.bc .pe-dg .digest-form .btn:not(#z){min-height:48px!important}
:root:root:root:root:root:root:root body.bc .pe-dg .digest-msg:not(#z){grid-column:1/-1;font-size:13px}
:root:root:root:root:root:root:root body.bc .pe::after{content:"";display:block;border-top:1.5px solid var(--bc-ink,#13151c)}
:root:root:root:root:root:root:root body.bc .pe+footer.foot.wrap:not(#z){margin-top:0!important;border-top:0!important;padding-left:24px!important;padding-right:24px!important}
@media (max-width:699.98px){
  :root:root:root:root:root:root:root body.bc .pe:not(#z){margin-top:var(--s-7,48px)!important}
  :root:root:root:root:root:root:root body.bc .pe-rl li:not(#z){grid-template-columns:1fr}
  :root:root:root:root:root:root:root body.bc .pe-dg:not(#z){grid-template-columns:1fr!important}
  :root:root:root:root:root:root:root body.bc .pe+footer.foot.wrap:not(#z){padding-left:12px!important;padding-right:12px!important}
}
/* the guides index: grouped plain rows, the read-more row style */
:root:root:root:root:root:root:root body.bc .gi:not(#z){display:flex;flex-direction:column;gap:0;margin-top:var(--s-6,32px)}
:root:root:root:root:root:root:root body.bc .gi-g:not(#z){padding:var(--s-6,32px) 0 var(--s-4,16px);border-top:1.5px solid var(--bc-ink,#13151c)}
:root:root:root:root:root:root:root body.bc .gi-g h2:not(#z){margin:0!important;font:700 clamp(24px,2.4vw,32px)/1.1 var(--bc-disp)!important}
:root:root:root:root:root:root:root body.bc .gi-n:not(#z){font:600 14px/1 var(--bc-text);color:var(--bc-mut);vertical-align:middle;margin-left:6px}
:root:root:root:root:root:root:root body.bc .gi-sub:not(#z){margin:0!important;font:400 15px/1.4 var(--bc-text);color:var(--bc-ink2)}
:root:root:root:root:root:root:root body.bc .gi .pe-rl:not(#z),:root:root:root:root:root:root:root body.bc .gi .pe-rl li:not(#z){max-width:none!important}

/* ---------- ink rule (one rule, written once): solid ink is only for score panels (match day, the guide match report,
   the tool page scoreboard, the player card stat strip), the primary button and the active tab strip. everything else
   sits on paper. --bc-ink-panel is the panel fill; anything dark outside that list is a bug ---------- */
:root:root:root:root:root:root:root body.bc{--bc-ink-panel:var(--bc-ink,#13151c)}
/* on the move: was a dark strip of dark cards. now paper cards on the page, the moves in up/down colours */
:root:root:root:root:root:root:root body.bc .rk-mvw:not(#z){background:transparent!important;box-shadow:none!important;padding:4px 0 8px!important}
:root:root:root:root:root:root:root body.bc .rk-mvw .rk-mc:not(#z){background:var(--bc-paper,#fef7e7)!important;border:1.5px solid var(--bc-ink,#13151c)!important;color:var(--bc-ink)!important}
:root:root:root:root:root:root:root body.bc .rk-mvw .rk-mc.rk-mcl:not(#z){background:var(--bc-or-soft,#f3e7d7)!important;border-color:var(--bc-or)!important}
:root:root:root:root:root:root:root body.bc .rk-mvw :is(.rk-mcm b,.rk-mcs b,.rk-mck):not(#z){color:var(--bc-ink)!important}
:root:root:root:root:root:root:root body.bc .rk-mvw :is(.rk-mcm small,.rk-mcs small):not(#z){color:var(--bc-mut)!important}
:root:root:root:root:root:root:root body.bc .rk-mvw .rk-mck.u:not(#z){color:var(--bc-up)!important}:root:root:root:root:root:root:root body.bc .rk-mvw .rk-mck.d:not(#z){color:var(--bc-down)!important}:root:root:root:root:root:root:root body.bc .rk-mvw .rk-mck.n:not(#z){color:var(--bc-or-text,var(--bc-or))!important}
:root:root:root:root:root:root:root body.bc .rk-mvw .rk-mc .rk-lg:not(#z){border-color:var(--bc-line)!important}
/* the category leaders' heads: paper with a rule, not ink bars */
:root:root:root:root:root:root:root body.bc .rk-pbh:not(#z){background:transparent!important;color:var(--bc-ink)!important;border-bottom:1.5px solid var(--bc-ink)!important}
:root:root:root:root:root:root:root body.bc .rk-pbh :is(.rk-h3,span,small,b):not(#z){color:var(--bc-ink)!important}
/* match day is a score panel: ink, like the tool page scoreboard and the guide match report */
:root:root:root:root:root:root:root body.bc section.gl-sb:not(#z){background:var(--bc-ink-panel)!important;color:var(--bc-paper)!important;border-color:var(--bc-ink-panel)!important}
:root:root:root:root:root:root:root body.bc section.gl-sb :is(.gl-sbtt,.gl-sbn,.gl-cnt,.gl-tiles b,.gl-sbm,.gl-sbid div):not(#z){color:var(--bc-paper)!important}
:root:root:root:root:root:root:root body.bc section.gl-sb :is(.gl-sbd,.gl-sbo,.gl-sbk,.gl-tiles span):not(#z){color:color-mix(in srgb,var(--bc-paper) 72%,transparent)!important}
:root:root:root:root:root:root:root body.bc section.gl-sb .gl-tiles li:not(#z){border-color:color-mix(in srgb,var(--bc-paper) 22%,transparent)!important}
:root:root:root:root:root:root:root body.bc section.gl-sb .gl-sbt:not(#z){border-color:color-mix(in srgb,var(--bc-paper) 22%,transparent)!important}
:root:root:root:root:root:root:root body.bc section.gl-sb .gl-btn.pri.pri:not(#z):not(#y):not(#x){background:var(--bc-paper)!important;color:var(--bc-ink)!important;border-color:var(--bc-paper)!important}
:root:root:root:root:root:root:root body.bc section.gl-sb :is(.gl-btn.ghost,.gl-rpl):not(.on):not(.x-a):not(.x-b):not(#z):not(#y):not(#x){color:var(--bc-paper)!important;border-color:var(--bc-paper)!important;background:transparent!important}
:root:root:root:root:root:root:root body.bc section.gl-sb :is(.gl-btn.ghost,.gl-rpl):not(.on):not(.x-a):not(.x-b):not(#z):not(#y):not(#x):hover{background:color-mix(in srgb,var(--bc-paper) 12%,transparent)!important}
:root:root:root:root:root:root:root body.bc section.gl-sb .gl-live:not(#z){color:var(--bc-or)!important}
/* the leader panel (category pages, best-of guides): the same ink score panel as the tool page */
:root:root:root:root:root:root:root body.bc .bc-ld:not(#z){margin-top:var(--s-5,24px)!important}
:root:root:root:root:root:root:root body.bc .bc-ld .bc-ld-n:not(#z){display:inline-flex;align-items:center;gap:10px;color:var(--bc-paper)!important;text-decoration:none;font:700 clamp(20px,2vw,26px)/1.15 var(--bc-disp)}
:root:root:root:root:root:root:root body.bc .bc-ld .bc-ld-n img:not(#z){width:28px;height:28px;border-radius:6px;background:#fff}
:root:root:root:root:root:root:root body.bc .bc-ld .bc-ld-n:hover span:not(#z){text-decoration:underline;text-decoration-color:var(--bc-or)}
/* the share card (and the image X shows) is a score panel too: ink */
:root:root:root:root:root:root:root body.bc .gl-ogc.gl-ogr:not(#z),:root:root:root:root:root:root:root body.bc .gl-ogc.gl-ogr :is(.gl-rb,.gl-rbh):not(#z){background:var(--bc-ink-panel)!important;color:var(--bc-paper)!important;border-color:var(--bc-ink-panel)!important}
:root:root:root:root:root:root:root body.bc .gl-ogc.gl-ogr :is(.gl-rbn,.gl-rbbig,b,h2):not(#z){color:var(--bc-paper)!important}
:root:root:root:root:root:root:root body.bc .gl-ogc.gl-ogr :is(.gl-sbk,.gl-sbo,.gl-sbd,small,em,span:not(.gl-live)):not(#z){color:color-mix(in srgb,var(--bc-paper) 72%,transparent)!important}
:root:root:root:root:root:root:root body.bc .gl-ogc.gl-ogr .gl-live:not(#z){color:var(--bc-or)!important}

/* match day fixture on the homepage: one tool v tool panel (an ink score panel), numptr's call, an honest vote slot (no tally) */
:root:root:root:root:root:root:root body.bc .bc-fx-sub:not(#z){margin:var(--s-1) 0 0;color:var(--bc-mut);font-size:var(--fs-2)}
:root:root:root:root:root:root:root body.bc .bc-fx-sb:not(#z){margin:var(--s-4) 0 var(--s-4)}
:root:root:root:root:root:root:root body.bc .bc-fx-call:not(#z){margin:0 0 var(--s-4);max-width:72ch;font-size:var(--fs-2);line-height:1.55}
:root:root:root:root:root:root:root body.bc .bc-fx-vote:not(#z){display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);padding:var(--s-3) 0;border-top:1px solid var(--bc-line);border-bottom:1px solid var(--bc-line)}
:root:root:root:root:root:root:root body.bc .bc-fx-q:not(#z){margin:0;font:650 var(--fs-3)/1.3 var(--bc-text)}
:root:root:root:root:root:root:root body.bc .bc-fx-b:not(#z){display:flex;gap:var(--s-2);flex-wrap:wrap}
:root:root:root:root:root:root:root body.bc .bc-fx-b .btn:not(#z):not(#y):not(#x){min-height:44px;background:var(--bc-paper)!important;color:var(--bc-ink)!important}
:root:root:root:root:root:root:root body.bc .bc-fx-b .btn.on:not(#z):not(#y):not(#x){background:var(--bc-ink)!important;color:var(--bc-paper)!important}
:root:root:root:root:root:root:root body.bc .bc-fx-note:not(#z){margin:0;flex-basis:100%;font-size:13px;color:var(--bc-mut)}
:root:root:root:root:root:root:root body.bc .bc-fx-go:not(#z){margin:var(--s-3) 0 0}
/* match day strip (phone, collapsed): text on the ink panel reads in paper */
:root:root:root:root:root:root:root body.bc section.gl-sb .gl-strip :is(.gl-stn,.gl-sts,.gl-sts b,.gl-sts em,.gl-live):not(#z):not(#y){color:var(--bc-paper)!important}
:root:root:root:root:root:root:root body.bc section.gl-sb .gl-strip .gl-sts small:not(#z):not(#y){color:rgba(253,247,234,.7)!important}
/* homepage 'try:' tags: four, one row at every width; a phone that runs short scrolls the row sideways, no scrollbar */
/* 13px floor (final check): the last few small bits across tags, notes, code, captions and the build chat line */
:root:root:root:root:root:root:root body.bc :is(.stk-note,.cm-meta a,.cm-meta .bdr,.cm-rep,.cm-upd-h time,.cm-side .cm-q,.cm-repp .cm-link,.cm-hs-cm,.tag,.cm-tr,.cm-inote,.cm-au-q,.cm-si-fine,.cm-by,.cm-chat-h,.cm-chat-h a,.cm-chat-h span,main code,figcaption,main dd,main time,.plbl,.nsr,textarea.snip):not(#z):not(#y){font-size:13px!important}
/* long code tokens wrap instead of pushing the phone page sideways */
:root:root:root:root:root:root:root body.bc main :is(p,li,td) code:not(#z){overflow-wrap:anywhere;word-break:break-word}
/* fixture: a brighter v; the spec sheet paints at once (it holds its height, no fade in while you scroll to it) */
:root:root:root:root:root:root:root body.bc .bc-fx-sb .bc-vs-x:not(#z){color:rgba(253,247,234,.92)!important;border-color:rgba(253,247,234,.28)!important}
:root:root:root:root:root:root:root body.bc #specs .vx-r:not(#z){opacity:1!important;transform:none!important;transition:none!important}
/* real iPhone Safari QA (Oct 25) */
/* the sticky header paints up into the status bar, so nothing scrolls through above it (iOS draws the page under the clock) */
:root:root:root:root:root:root:root body.bc header.nav:not(#z):not(#y){box-shadow:0 -160px 0 0 var(--bc-paper)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* ask lines: wrapped lines start flush, no hanging indent */
:root:root:root:root:root:root:root body.bc .hp-v-7 .t7-l:not(#z){padding-left:0!important;text-indent:0!important}
/* phones: the hero is as tall as its content, the cue sits under the ask card (no overlap), the board follows */
@media(max-width:699.98px){
:root:root:root:root:root:root:root body.bc section.hp-hero:not(#z):not(#y){min-height:0!important;padding-bottom:0!important}
:root:root:root:root:root:root:root body.bc section.hp-hero .hp-cue:not(#z):not(#y){position:static!important;transform:none!important;margin:20px auto 0!important;order:9!important;align-self:center!important}
:root:root:root:root:root:root:root body.bc #rankings .rk-rp:not(#z){display:none!important}
:root:root:root:root:root:root:root body.bc section.hp-hero+.wrap:not(#z):not(#y){margin-top:0!important}:root:root:root:root:root:root:root body.bc section.hp-hero+.wrap>.a3-grid:not(#z):not(#y){padding-top:20px!important}
}
/* a label that keeps only its count (its words repeated the heading) */
:root:root:root:root:root:root:root body.bc .a3-p>.a3-lb.a3-lb-x .a3-hr:not(#z){margin-left:0!important;padding-left:0!important;border-left:0!important}
/* match day strip: say where the new entry sits, so it never reads as the top of the board */
:root:root:root:root:root:root:root body.bc .gl-stn .gl-stw:not(#z){display:block;margin-top:3px;font:500 13px/1.25 var(--bc-text,Inter,system-ui,sans-serif)!important;color:rgba(253,247,234,.74)!important;white-space:normal;letter-spacing:0;text-transform:none}
html.gl-lt .gl-stn .gl-stw{color:var(--bc-mut)!important}
:root:root:root:root:root:root:root body.bc .gl-rbft .gl-rbft-d:not(#z){font:700 15px/1.2 var(--mono)!important;color:inherit}
/* match day: the whole fixture scoreboard is the link to the head to head */
:root:root:root:root:root:root:root body.bc a.bc-fx-go-sb:not(#z){color:inherit!important;text-decoration:none!important;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,box-shadow .12s ease}
:root:root:root:root:root:root:root body.bc a.bc-fx-go-sb:not(#z) *{text-decoration:none!important}
:root:root:root:root:root:root:root body.bc a.bc-fx-go-sb:not(#z):hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--o,#c8530f)!important}
:root:root:root:root:root:root:root body.bc a.bc-fx-go-sb:not(#z):active{transform:translate(1px,1px);box-shadow:none!important}
:root:root:root:root:root:root:root body.bc a.bc-fx-go-sb:not(#z):focus-visible{outline:3px solid var(--o,#c8530f)!important;outline-offset:3px}
@media(prefers-reduced-motion:reduce){:root:root:root:root:root:root:root body.bc a.bc-fx-go-sb:not(#z){transition:none}}
/* match page (/match/<a>-v-<b>/): the fixture's scoreboard, your weighting, the tape, form, the call, the vote */
:root:root:root:root:root:root:root body.bc .mt-page .a3-p:not(#z){margin-bottom:var(--s-4)}
:root:root:root:root:root:root:root body.bc .mt-page h1#mt-h:not(#z){margin:var(--s-1) 0 0}
:root:root:root:root:root:root:root body.bc .mt-note:not(#z){margin:var(--s-1) 0 var(--s-3);color:var(--bc-mut);font-size:var(--fs-2);max-width:64ch}
:root:root:root:root:root:root:root body.bc .mt-chips:not(#z){display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--s-3)}
:root:root:root:root:root:root:root body.bc .mt-chip:not(#z){min-height:44px;padding:0 14px;border:1.5px solid var(--bc-ink);border-radius:999px;background:var(--bc-paper);color:var(--bc-ink);font:600 15px/1 var(--bc-text);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:root:root:root:root:root:root:root body.bc .mt-chip:not(#z)[aria-pressed=true]{background:var(--bc-or-soft);border-color:var(--bc-or);color:var(--bc-or-text);box-shadow:inset 0 0 0 1px var(--bc-or)}
:root:root:root:root:root:root:root body.bc .mt-chip:not(#z)[aria-pressed=true]::before{content:"+ ";font-weight:700}
:root:root:root:root:root:root:root body.bc .mt-chip:not(#z):focus-visible{outline:3px solid var(--bc-or);outline-offset:2px}
:root:root:root:root:root:root:root body.bc .mt-bar:not(#z){--p:50%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;font:600 13px/1.2 var(--bc-text);color:var(--bc-mut)}
:root:root:root:root:root:root:root body.bc .mt-bar i:not(#z){position:relative;height:10px;border-radius:999px;background:var(--bc-line);overflow:hidden}
:root:root:root:root:root:root:root body.bc .mt-bar i:not(#z)::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);background:var(--bc-or);border-radius:999px;transition:width .25s ease}
:root:root:root:root:root:root:root body.bc .mt-pick:not(.mt-on) .mt-bar i:not(#z)::before{background:#c6c0b3}
@media(prefers-reduced-motion:reduce){:root:root:root:root:root:root:root body.bc .mt-bar i:not(#z)::before{transition:none}}
:root:root:root:root:root:root:root body.bc .mt-out:not(#z){min-height:3.2em;margin:var(--s-2) 0 0;font-size:var(--fs-3);line-height:1.45}
:root:root:root:root:root:root:root body.bc .mt-out span:not(#z){display:block;color:var(--bc-mut);font-size:var(--fs-1)}
:root:root:root:root:root:root:root body.bc .mt-tw:not(#z){overflow-x:auto}
:root:root:root:root:root:root:root body.bc table.mt-t:not(#z){display:table!important;width:100%;border-collapse:collapse;font-size:var(--fs-2)}
:root:root:root:root:root:root:root body.bc .mt-t :is(thead,tbody):not(#z){display:revert!important}:root:root:root:root:root:root:root body.bc .mt-t tr:not(#z){display:table-row!important}:root:root:root:root:root:root:root body.bc .mt-t :is(th,td):not(#z){display:table-cell!important}
:root:root:root:root:root:root:root body.bc .mt-t :is(th,td):not(#z){padding:10px 8px;border-bottom:1px solid var(--bc-line);text-align:left;vertical-align:top}
:root:root:root:root:root:root:root body.bc .mt-t td::before:not(#z){content:none!important}
:root:root:root:root:root:root:root body.bc .mt-t thead th:not(#z){font:650 13px/1.2 var(--bc-text);color:var(--bc-mut)}
:root:root:root:root:root:root:root body.bc .mt-t tbody th:not(#z){font-weight:650;width:28%}
:root:root:root:root:root:root:root body.bc .mt-t tbody th small:not(#z){display:block;margin-top:3px;font:400 13px/1.35 var(--bc-text);color:var(--bc-mut)}
:root:root:root:root:root:root:root body.bc .mt-t td.mt-w:not(#z){color:var(--bc-or-text);font-weight:700;background:var(--bc-or-soft)}
:root:root:root:root:root:root:root body.bc .mt-t td.mt-r:not(#z){font-size:13px;color:var(--bc-mut);white-space:nowrap}
:root:root:root:root:root:root:root body.bc .mt-key:not(#z){margin:var(--s-2) 0 0;font-size:13px;color:var(--bc-mut)}
:root:root:root:root:root:root:root body.bc .mt-fms:not(#z){display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
:root:root:root:root:root:root:root body.bc .mt-fm p:not(#z){margin:0 0 6px}
:root:root:root:root:root:root:root body.bc .mt-fn:not(#z){font-weight:700}
:root:root:root:root:root:root:root body.bc .mt-fr:not(#z){display:flex;gap:4px;list-style:none;margin:8px 0 0;padding:0}
:root:root:root:root:root:root:root body.bc .mt-fr li:not(#z){flex:1;display:grid;justify-items:center;gap:2px;padding:6px 2px;border:1px solid var(--bc-line);border-radius:6px;background:var(--bc-paper2);font-size:13px}
:root:root:root:root:root:root:root body.bc .mt-fr li span:not(#z){color:var(--bc-mut)}
:root:root:root:root:root:root:root body.bc .mt-go:not(#z){margin:var(--s-3) 0 0}
@media(max-width:599.98px){:root:root:root:root:root:root:root body.bc .mt-t :is(th,td):last-child:not(#z){display:none!important}:root:root:root:root:root:root:root body.bc .mt-fms:not(#z){grid-template-columns:1fr}:root:root:root:root:root:root:root body.bc .mt-t :is(th,td):not(#z){padding:9px 5px}:root:root:root:root:root:root:root body.bc .mt-t tbody th:not(#z){width:30%}}
/* partners: the sponsored fixture mock */
/* partner links: the label, and the money note on tool and match pages */
:root:root:root:root:root:root:root body.bc .pl-tag:not(#z){display:inline-block;margin-left:6px;padding:0 6px;border:1px solid var(--bc-line);border-radius:999px;font:600 13px/1.5 var(--bc-text);color:var(--bc-mut);vertical-align:1px}
:root:root:root:root:root:root:root body.bc .mt-tl:not(#z){margin:var(--s-4) 0 0;font-size:var(--fs-2)}
/* uniformity gate (oct 25): one card radius, one button height, one section heading size, one phone edge */
:root:root:root:root:root:root:root body.bc main .card.panel:not(#z):not(#y),:root:root:root:root:root:root:root body.bc main a.card.panel.tap:not(#z):not(#y),:root:root:root:root:root:root:root body.bc main .tblwrap.card.panel:not(#z):not(#y){border-radius:14px!important}
:root:root:root:root:root:root:root body.bc main .gl-btn:not(#z):not(#y),:root:root:root:root:root:root:root body.bc main .btn.sm:not(#z):not(#y),:root:root:root:root:root:root:root body.bc main .btn:not(#z):not(#y),:root:root:root:root:root:root:root body.bc .pe .btn:not(#z):not(#y){min-height:48px!important;border-radius:10px!important}
:root:root:root:root:root:root:root body.bc main .bc-fx h2:not(#z):not(#y),:root:root:root:root:root:root:root body.bc main .bc-otm h2:not(#z):not(#y),:root:root:root:root:root:root:root body.bc main .pick.card.panel h2:not(#z):not(#y),:root:root:root:root:root:root:root body.bc main h2.gl-sbn:not(#z):not(#y){font-size:22px!important}
@media (max-width:640px){:root:root:root:root:root:root:root body.bc main h2.hp-h:not(#z):not(#y){font-size:30px!important}:root:root:root:root:root:root:root body.bc header.nav .wrap:not(#z):not(#y){padding-left:12px!important;padding-right:12px!important}}
:root:root:root:root:root:root:root body.bc main .np-form button[type=submit]:not(#z):not(#y),:root:root:root:root:root:root:root body.bc main .np-form input:not(#z):not(#y){min-height:48px!important}

:root:root:root:root:root:root:root body.bc .bc-fx-spn:not(#z){margin:6px 0 0;font-size:13px;color:var(--bc-mut)}
/* match page: the tape gets real column widths once there's room (Oct 25) */
@media(min-width:600px){:root:root:root:root:root:root:root body.bc table.mt-t:not(#z){table-layout:fixed}:root:root:root:root:root:root:root body.bc .mt-t thead th:first-child:not(#z),:root:root:root:root:root:root:root body.bc .mt-t tbody th:not(#z){width:26%}:root:root:root:root:root:root:root body.bc .mt-t :is(th,td):last-child:not(#z){width:14%}}
/* the tool makers page (layers/partnerpage.py): three offers, one repeated block: example, you get, you never get */
:root:root:root:root:root:root:root body.bc .pt-v3 .pt-sub:not(#z){margin:var(--s-2) 0 0;max-width:62ch}
:root:root:root:root:root:root:root body.bc .pt-row:not(#z){display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4);align-items:start}
@media(min-width:900px){:root:root:root:root:root:root:root body.bc .pt-row:not(#z){grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--s-5)}}
:root:root:root:root:root:root:root body.bc .pt-ex:not(#z){min-width:0;padding:12px;border:1px solid var(--bc-line);border-radius:14px;background:var(--bc-paper)}
:root:root:root:root:root:root:root body.bc .pt-ex .bc-fx-sb:not(#z){margin:6px 0 0!important}
:root:root:root:root:root:root:root body.bc .pt-ex .bc-fx-spn:not(#z){margin:0}
:root:root:root:root:root:root:root body.bc .pt-exn:not(#z){margin:8px 0 0;font-size:13px;color:var(--bc-mut)}
:root:root:root:root:root:root:root body.bc .pt-ex .pt-sheet:not(#z){margin:0}
:root:root:root:root:root:root:root body.bc .pt-lk:not(#z){text-decoration:underline;text-underline-offset:3px}
:root:root:root:root:root:root:root body.bc .pt-wk:not(#z){display:block;border-radius:10px;overflow:hidden}
:root:root:root:root:root:root:root body.bc .pt-gn:not(#z){margin:0}
:root:root:root:root:root:root:root body.bc .pt-gn>div+div:not(#z){margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--bc-line)}
:root:root:root:root:root:root:root body.bc .pt-gn dt:not(#z){font:650 13px/1.3 var(--bc-text);color:var(--bc-mut)}
:root:root:root:root:root:root:root body.bc .pt-gn dd:not(#z){margin:4px 0 0;font-size:var(--fs-2)}
:root:root:root:root:root:root:root body.bc .pt-rc:not(#z){padding:var(--s-4)!important}
:root:root:root:root:root:root:root body.bc .pt-rc p:not(#z){margin:0 0 var(--s-2)}
:root:root:root:root:root:root:root body.bc .pt-rc ul:not(#z){margin:var(--s-2) 0 0;padding-left:18px}
:root:root:root:root:root:root:root body.bc .pt-rc li+li:not(#z){margin-top:6px}
:root:root:root:root:root:root:root body.bc .pt-cta:not(#z){display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:var(--s-4) 0 0}
:root:root:root:root:root:root:root body.bc .pt-mail:not(#z){font-size:var(--fs-2);color:var(--bc-mut)}
:root:root:root:root:root:root:root body.bc .mt-t :is(th,td):not(#z):not(#y){white-space:normal!important;overflow-wrap:anywhere;border-left:0!important;border-right:0!important;border-top:0!important}
:root:root:root:root:root:root:root body.bc .mt-t td.mt-w:not(#z):not(#y){box-shadow:inset 3px 0 0 var(--bc-or)}
:root:root:root:root:root:root:root body.bc .pt-sheet:not(#z):not(#y),:root:root:root:root:root:root:root body.bc .pt-sheet *:not(#z){opacity:1!important;transform:none!important}
/* match day vote (Oct 25): one counted vote per device; your pick with a change link */
:root:root:root:root:root:root:root body.bc .bc-fx-vote [hidden]:not(#z):not(#y){display:none!important}
:root:root:root:root:root:root:root body.bc .bc-fx-mine:not(#z){display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s-2);margin:var(--s-2) 0 0;font-size:var(--fs-2);line-height:1.45}
:root:root:root:root:root:root:root body.bc button.bc-fx-chg:not(#z):not(#y){display:inline-flex;align-items:center;min-height:44px;padding:0 4px;margin:0;border:0;background:none;font:inherit;font-weight:650;color:var(--bc-ink);text-decoration:underline;text-decoration-color:var(--bc-or);text-underline-offset:4px;cursor:pointer}
:root:root:root:root:root:root:root body.bc button.bc-fx-chg:not(#z):focus-visible{outline:3px solid var(--bc-or);outline-offset:2px;border-radius:4px}

/* ---------- one type scale (Oct 25, live): every page type uses the same h1, section h2, h3 and section label ----------
   h1: Doto 700, 36px phone / 60px desktop (fs-8), -.01em. section heading (every h2, in main and the page end, and the
   tool-page labels that stand in for one): Doto 700, 22px under 700px / 28px from 700px, letter-spacing 0. h3 (card and
   item titles): Inter 650 18px, -.005em. the small eyebrow label (.a3-lb) stays its own level. checked by type.py. */
:root:root:root:root:root:root:root body.bc :is(main,.pe) h1:not(.sr):not(#z):not(#y):not(#x):not(#w){font-family:var(--bc-disp)!important;font-weight:700!important;font-size:var(--fs-8)!important;letter-spacing:-.01em!important;line-height:var(--lh-tight)!important}
:root:root:root:root:root:root:root body.bc :is(main,.pe) h2:not(.sr):not(#z):not(#y):not(#x):not(#w),
:root:root:root:root:root:root:root body.bc .a3-tg>.a3-w-sp:not(#z):not(#y):not(#x):not(#w)>.a3-lb,:root:root:root:root:root:root:root body.bc .a3-tg>*:not(#z):not(#y):not(#x):not(#w):not(:has(h2))>.a3-lb,
:root:root:root:root:root:root:root body.bc .a3-tg .gl-dev2 .gl-eyebrow:not(#z):not(#y):not(#x):not(#w){font-family:var(--bc-disp)!important;font-weight:700!important;font-size:var(--fs-6)!important;letter-spacing:0!important;line-height:1.15!important}
@media(max-width:699.98px){
:root:root:root:root:root:root:root body.bc :is(main,.pe) h2:not(.sr):not(#z):not(#y):not(#x):not(#w),
:root:root:root:root:root:root:root body.bc .a3-tg>.a3-w-sp:not(#z):not(#y):not(#x):not(#w)>.a3-lb,:root:root:root:root:root:root:root body.bc .a3-tg>*:not(#z):not(#y):not(#x):not(#w):not(:has(h2))>.a3-lb,
:root:root:root:root:root:root:root body.bc .a3-tg .gl-dev2 .gl-eyebrow:not(#z):not(#y):not(#x):not(#w){font-size:var(--fs-5)!important}}
:root:root:root:root:root:root:root body.bc :is(main,.pe) h3:not(.sr):not(#z):not(#y):not(#x):not(#w){font-family:var(--bc-text)!important;font-weight:650!important;font-size:var(--fs-4)!important;letter-spacing:-.005em!important}

/* ---------- the footer (Oct 25, live): one short broadcast footer on every page. a hard ink rule with an orange tab,
   the seven links on one line (two columns on phones), then the copyright line. ---------- */
:root:root:root:root:root:root:root body.bc footer.foot.bc-foot:not(#z):not(#y){display:block!important;margin:0 auto!important;padding:var(--s-6) var(--gutter,24px) var(--s-7)!important;border-top:2px solid var(--bc-ink)!important;position:relative;background:none!important;font:400 var(--fs-2)/1.5 var(--bc-text)!important;color:var(--bc-mut)!important;text-align:left!important}
:root:root:root:root:root:root:root body.bc footer.foot.bc-foot:not(#z):not(#y)::before{content:""!important;display:block!important;position:absolute;top:-2px;left:var(--gutter,24px);width:56px;height:4px;background:var(--bc-or)!important}
:root:root:root:root:root:root:root body.bc footer.bc-foot .bc-fl:not(#z){list-style:none!important;margin:0!important;padding:0!important;display:flex!important;flex-wrap:wrap;gap:0 var(--s-6)}
:root:root:root:root:root:root:root body.bc footer.bc-foot .bc-fl li:not(#z){margin:0!important;padding:0!important}
:root:root:root:root:root:root:root body.bc footer.bc-foot .bc-fl li:not(#z)::before,:root:root:root:root:root:root:root body.bc footer.bc-foot .bc-fl li:not(#z)::after{content:none!important}
:root:root:root:root:root:root:root body.bc footer.bc-foot .bc-fl a:not(#z):not(#y){display:inline-flex;align-items:center;min-height:44px;font:650 var(--fs-3)/1.2 var(--bc-text)!important;color:var(--bc-ink)!important;text-decoration:none!important}
:root:root:root:root:root:root:root body.bc footer.bc-foot .bc-fl a:not(#z):hover{text-decoration:underline!important;text-decoration-color:var(--bc-or)!important;text-underline-offset:4px}
:root:root:root:root:root:root:root body.bc footer.bc-foot .bc-fl a:not(#z):focus-visible{outline:3px solid var(--bc-or);outline-offset:2px;border-radius:4px}
:root:root:root:root:root:root:root body.bc footer.bc-foot .bc-fc:not(#z){margin:var(--s-4) 0 0!important;font:400 var(--fs-1)/1.5 var(--bc-text)!important;color:var(--bc-mut)!important;max-width:none!important}
@media(max-width:699.98px){
:root:root:root:root:root:root:root body.bc footer.foot.bc-foot:not(#z):not(#y){padding:var(--s-5) 12px var(--s-6)!important}
:root:root:root:root:root:root:root body.bc footer.foot.bc-foot:not(#z):not(#y)::before{left:12px}
:root:root:root:root:root:root:root body.bc footer.bc-foot .bc-fl:not(#z){display:grid!important;grid-template-columns:1fr 1fr;gap:0 var(--s-4)}}
/* the small eyebrow label: one style for the card label (.a3-lb) and the terminal-card label (.cc-t) */
:root:root:root:root:root:root:root body.bc .a3-p>.a3-lb:not(#z):not(#y):not(#x),:root:root:root:root:root:root:root body.bc :is(.cframe,.digest.sm,.foot-disc,.cc-404,.cc)>.cc-t:not(#z):not(#y):not(#x){font-family:var(--bc-text)!important;font-weight:650!important;font-size:13px!important;letter-spacing:.02em!important}

/* ---------- the home search (Oct 25, live): the ask button fits the bar. one 2px ink box with a 12px radius; the input
   and the button fill it edge to edge at 48px (no overhang), the button flush right and clipped to the box's corners. ---------- */
:root:root:root:root:root:root:root body.bc form.np-form:not(#z):not(#y):not(#x){display:flex!important;align-items:stretch!important;flex-wrap:nowrap!important;box-sizing:border-box!important;height:auto!important;min-height:0!important;padding:0!important;border:2px solid var(--bc-ink)!important;border-radius:12px!important;overflow:hidden!important;background:var(--bc-paper)!important;box-shadow:none!important}
:root:root:root:root:root:root:root body.bc form.np-form:not(#z):not(#y):not(#x):focus-within{box-shadow:0 0 0 3px rgba(207,90,20,.28)!important}
:root:root:root:root:root:root:root body.bc form.np-form input:not([type=hidden]):not(#z):not(#y):not(#x){flex:1 1 auto!important;min-width:0!important;width:auto!important;height:48px!important;min-height:48px!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;outline:0!important;background:transparent!important}
:root:root:root:root:root:root:root body.bc form.np-form button:not(#z):not(#y):not(#x){flex:none!important;align-self:stretch!important;height:48px!important;min-height:48px!important;min-width:68px!important;margin:0!important;padding:0 18px!important;border:0!important;border-left:2px solid var(--bc-ink)!important;border-radius:0!important;box-shadow:none!important;white-space:nowrap!important;transform:none!important}

/* ---------- phone footer, compact (Oct 25, live: "too busy on phone"): the same seven links inline at 14px regular,
   wrapping onto two lines with 18px between, each with a 44px tap area; the copyright line under it, smaller ---------- */
@media(max-width:699.98px){
:root:root:root:root:root:root:root body.bc footer.foot.bc-foot:not(#z):not(#y){padding:var(--s-4) 12px var(--s-5)!important}
:root:root:root:root:root:root:root body.bc footer.bc-foot .bc-fl:not(#z):not(#y){display:flex!important;flex-wrap:wrap;gap:0 18px!important;line-height:1}
:root:root:root:root:root:root:root body.bc footer.bc-foot .bc-fl li:not(#z):not(#y){display:inline-flex;align-items:center}
:root:root:root:root:root:root:root body.bc footer.bc-foot .bc-fl a:not(#z):not(#y){position:relative;min-height:32px!important;font:400 14px/1.2 var(--bc-text)!important;color:var(--bc-ink)!important}
:root:root:root:root:root:root:root body.bc footer.bc-foot .bc-fl a:not(#z):not(#y)::after{content:""!important;position:absolute;left:-4px;right:-4px;top:-6px;bottom:-6px}
:root:root:root:root:root:root:root body.bc footer.bc-foot .bc-fc:not(#z):not(#y){margin:var(--s-2) 0 0!important;font-size:13px!important;line-height:1.4!important}}

/* ---------- the weekly signup (Oct 25, live): the same box as the home search. one 2px ink box with a 12px radius, the
   email input and the subscribe button 48px tall edge to edge, the button flush right; the status line sits under the box ---------- */
:root:root:root:root:root:root:root body.bc form.digest-form:not(#z):not(#y):not(#x){display:flex!important;flex-wrap:nowrap!important;align-items:stretch!important;position:relative;box-sizing:border-box!important;gap:0!important;padding:0!important;border:2px solid var(--bc-ink)!important;border-radius:12px!important;background:var(--bc-paper)!important;box-shadow:none!important;height:auto!important;min-height:0!important}
:root:root:root:root:root:root:root body.bc form.digest-form:not(#z):not(#y):not(#x):focus-within{box-shadow:0 0 0 3px rgba(207,90,20,.28)!important}
:root:root:root:root:root:root:root body.bc form.digest-form input[type=email]:not(#z):not(#y):not(#x){flex:1 1 auto!important;min-width:0!important;width:auto!important;height:48px!important;min-height:48px!important;margin:0!important;padding:0 14px!important;border:0!important;border-radius:10px 0 0 10px!important;box-shadow:none!important;outline:0!important;background:transparent!important}
:root:root:root:root:root:root:root body.bc form.digest-form button:not(#z):not(#y):not(#x){flex:none!important;height:48px!important;min-height:48px!important;margin:0!important;padding:0 18px!important;border:0!important;border-left:2px solid var(--bc-ink)!important;border-radius:0 10px 10px 0!important;box-shadow:none!important;white-space:nowrap!important;transform:none!important}
:root:root:root:root:root:root:root body.bc form.digest-form .digest-msg:not(#z):not(#y){position:absolute;left:0;top:calc(100% + 6px);margin:0!important}

/* ==========================================================================================================
   home rhythm, one card, type scale v2 (Oct 25, preview: home-spacing). research notes: /workspace/home-spacing/
   - one section gap, --sec: 96px from 700px, 64px under. it is the distance from the end of one homepage section's content
     to the start of the next one's, every time. a band's 2px ink rule sits --sec-in (24px) above its content.
   - one card: 1px ink border, 12px radius, flat (no hard drop shadow), on every page. hover changes the border, not depth.
   - type: h1 36 -> 60 (unchanged), section h2 24 -> 32, h3 18 -> 20, body 16, meta 14 (the reading floor). fine print
     (the footer copyright) stays 13. numbers in scores, ranks and prices use fixed-width digits.
   ========================================================================================================== */
:root:root:root:root:root:root:root{--sec:96px;--sec-in:var(--s-5);--r-card:12px;--fs-1:14px;
  --fs-h2:clamp(24px,calc(1.12vw + 16px),32px);--fs-h3:clamp(18px,calc(.4vw + 14.5px),20px);--fs-meta:14px}
@media(max-width:699.98px){:root:root:root:root:root:root:root{--sec:64px}}

/* ---- home: the hero. numpty is a small mark above the headline; the stats strip sits under the sub-line ---- */
:root:root:root:root:root:root:root body.bc.home .a3-hero.hp-hero:not(#z):not(#y):not(#x){min-height:0!important;padding-top:calc(var(--ax-tabh,40px) + var(--sec))!important;padding-bottom:0!important;justify-content:flex-start!important}
:root:root:root:root:root:root:root body.bc.home .hp-hero:not(#z):not(#y)::after{display:none!important;content:none!important}
:root:root:root:root:root:root:root body.bc.home .a3-hero .t7-char:not(#z):not(#y):not(#x){width:64px!important;height:64px!important;margin:0 auto var(--s-4)!important;flex:none!important;position:relative!important;left:auto!important;top:auto!important;right:auto!important;transform:none!important}
:root:root:root:root:root:root:root body.bc.home .a3-hero .t7-char .t7-blob:not(#z):not(#y):not(#x),:root:root:root:root:root:root:root body.bc.home .a3-hero .t7-char .t7-blob img:not(#z):not(#y):not(#x){width:64px!important;height:64px!important;max-width:none!important}
:root:root:root:root:root:root:root body.bc.home .a3-hero .t7-shadow:not(#z):not(#y){display:none!important}
:root:root:root:root:root:root:root body.bc.home .a3-hero>.t7-char:not(#z):not(#y):not(#x){order:0!important}:root:root:root:root:root:root:root body.bc.home .a3-hero>h1:not(#z):not(#y):not(#x){order:1!important}
:root:root:root:root:root:root:root body.bc.home .a3-hero>.bc-stats:not(#z):not(#y):not(#x){order:2!important}:root:root:root:root:root:root:root body.bc.home .a3-hero>.a3-w-ask:not(#z):not(#y):not(#x){order:3!important}
:root:root:root:root:root:root:root body.bc.home .a3-hero h1.n9-h1:not(#z):not(#y):not(#x):not(#w){margin:0!important}
:root:root:root:root:root:root:root body.bc.home .a3-hero .bc-stats:not(#z):not(#y){margin:var(--s-3) auto 0!important;max-width:none;font:500 var(--fs-meta)/1.4 var(--bc-text);color:var(--bc-mut);font-variant-numeric:tabular-nums;text-align:center}
:root:root:root:root:root:root:root body.bc.home .a3-hero .bc-stats span:not(#z){margin:0 6px;color:var(--bc-mut)}
:root:root:root:root:root:root:root body.bc.home .a3-hero .a3-w-ask:not(#z):not(#y):not(#x){margin-top:var(--s-6)!important}
@media(max-width:699.98px){
:root:root:root:root:root:root:root body.bc.home .a3-hero.hp-hero:not(#z):not(#y):not(#x){padding-top:calc(var(--ax-tabh,40px) + var(--s-6))!important}
:root:root:root:root:root:root:root body.bc.home .a3-hero .t7-char:not(#z):not(#y):not(#x),:root:root:root:root:root:root:root body.bc.home .a3-hero .t7-char .t7-blob:not(#z):not(#y):not(#x),:root:root:root:root:root:root:root body.bc.home .a3-hero .t7-char .t7-blob img:not(#z):not(#y):not(#x){width:48px!important;height:48px!important}
:root:root:root:root:root:root:root body.bc.home .a3-hero .t7-char:not(#z):not(#y):not(#x){margin-bottom:var(--s-3)!important}
:root:root:root:root:root:root:root body.bc.home .a3-hero .a3-w-ask:not(#z):not(#y):not(#x){margin-top:var(--s-5)!important}}

/* ---- home: one gap between every section ---- */
:root:root:root:root:root:root:root body.bc.home main>.wrap:not(#z):not(#y){margin-top:0!important}
:root:root:root:root:root:root:root body.bc.home .a3-grid:not(#z):not(#y):not(#x):not(#w){padding-top:var(--sec)!important;row-gap:calc(var(--sec) - var(--sec-in))!important;margin-bottom:calc(var(--sec) - var(--sec-in))!important}
:root:root:root:root:root:root:root body.bc.home .a3-grid>section.a3-p:not(.a3-w-sc):not(#z):not(#y):not(#x):not(#w){padding:var(--sec-in) 0 0!important;border-top:2px solid var(--bc-ink)!important;margin:0!important}
:root:root:root:root:root:root:root body.bc.home .pe>section:not(#z):not(#y):not(#x){padding-top:var(--sec-in)!important;padding-bottom:0!important;border-top:2px solid var(--bc-ink)!important;margin-top:0!important}
:root:root:root:root:root:root:root body.bc.home .pe>section+section:not(#z):not(#y):not(#x){margin-top:calc(var(--sec) - var(--sec-in))!important}
:root:root:root:root:root:root:root body.bc.home footer.foot.bc-foot:not(#z):not(#y):not(#x){margin-top:calc(var(--sec) - var(--sec-in))!important}
:root:root:root:root:root:root:root body.bc.home .wrap.pe:not(#z):not(#y):not(#x){margin-top:0!important;padding-top:0!important}
:root:root:root:root:root:root:root body.bc.home .wrap.pe:not(#z):not(#y)::after{display:none!important}
/* the last thing in each section ends flush, so the gap is only --sec */
:root:root:root:root:root:root:root body.bc.home .a3-grid>section>:last-child:not(#z):not(#y),:root:root:root:root:root:root:root body.bc.home .pe>section>:last-child:not(#z):not(#y){margin-bottom:0!important;padding-bottom:0!important}
:root:root:root:root:root:root:root body.bc.home #rankings .gl-echo-c:not(#z):not(#y){margin-bottom:0!important}
:root:root:root:root:root:root:root body.bc.home #rankings .ls-bar:not(#z):not(#y):not(#x){display:none!important}
/* heading rhythm in a section: label 8px, h2, 8px to a sub-line or 16px to content, 24px from a sub-line to content */
:root:root:root:root:root:root:root body.bc.home .a3-grid>section>.a3-lb:not(#z):not(#y):not(#x){margin:0 0 var(--s-2)!important}
:root:root:root:root:root:root:root body.bc.home .a3-grid>section>h2:not(#z):not(#y):not(#x):not(#w),:root:root:root:root:root:root:root body.bc.home .pe h2:not(#z):not(#y):not(#x):not(#w){margin:0 0 var(--s-4)!important}
:root:root:root:root:root:root:root body.bc.home .a3-grid>section>h2:has(+p[class$="-sub"]):not(#z):not(#y):not(#x):not(#w){margin-bottom:var(--s-2)!important}
:root:root:root:root:root:root:root body.bc.home .a3-grid>section>p[class$="-sub"]:not(#z):not(#y):not(#x){margin:0 0 var(--s-5)!important}
:root:root:root:root:root:root:root body.bc.home .bc-fx .bc-fx-sb:not(#z):not(#y):not(#x){margin-top:0!important}
:root:root:root:root:root:root:root body.bc.home .pe-rm-hd:not(#z):not(#y){margin-bottom:var(--s-2)!important}
:root:root:root:root:root:root:root body.bc.home .pe-rm-hd h2:not(#z):not(#y):not(#x):not(#w){margin:0!important}

/* ---- home: on the move. the leader cards are gone; their category links are one 'every table' line ---- */
:root:root:root:root:root:root:root body.bc.home .bc-otm-cats:not(#z):not(#y){display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s-2);margin:var(--s-4) 0 0!important;max-width:none;font:400 var(--fs-meta)/1.3 var(--bc-text);color:var(--bc-mut)}
:root:root:root:root:root:root:root body.bc.home .bc-otm-cats a:not(#z):not(#y){display:inline-flex;align-items:center;min-height:44px;color:var(--bc-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--bc-or);text-underline-offset:4px;white-space:nowrap}
:root:root:root:root:root:root:root body.bc.home .bc-otm-cats>span:first-child:not(#z){font-weight:650;margin-right:var(--s-1)}
@media(max-width:699.98px){
:root:root:root:root:root:root:root body.bc.home .bc-otm-cats:not(#z):not(#y){flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-12px!important;padding-right:12px;-webkit-overflow-scrolling:touch}
:root:root:root:root:root:root:root body.bc.home .bc-otm-cats::-webkit-scrollbar{display:none}
:root:root:root:root:root:root:root body.bc.home .bc-otm-cats>*:not(#z){flex:none}}

/* ---- home on phones: the table shows its top five (the full category link sits under it), launches are date + title ---- */
@media(max-width:699.98px){
:root:root:root:root:root:root:root body.bc.home #rankings .rk-body:not(:has([data-t="all"][aria-selected="true"])) .rk-rows>li:nth-child(n+6):not(#z):not(#y){display:none!important}
:root:root:root:root:root:root:root body.bc.home #releases .ri .meta:not(#z):not(#y),:root:root:root:root:root:root:root body.bc.home #releases .ri .src:not(#z):not(#y){display:none!important}
:root:root:root:root:root:root:root body.bc.home #releases .ri:not(#z):not(#y):not(#x){height:auto!important;padding:var(--s-3) 0!important}
:root:root:root:root:root:root:root body.bc.home #releases .a3-scr:not(#z):not(#y):not(#x){min-height:0!important;max-height:none!important;height:auto!important;overflow:visible!important}
:root:root:root:root:root:root:root body.bc.home #releases .a3-scr ul.rel.a3-cl:not(#z):not(#y){display:none!important}
:root:root:root:root:root:root:root body.bc.home #releases .rel>li:nth-child(n+4):not(#z):not(#y):not(#x){display:none!important}
:root:root:root:root:root:root:root body.bc.home #rankings .gl-echo-c:not(#z):not(#y):not(#x){padding:var(--s-3) var(--s-4)!important;min-height:0!important}}

/* ---- one card, every page: 1px ink, 12px, flat ---- */
:root:root:root:root:root:root:root body.bc :is(.a3-p.a3-w-ttl,.a3-p.a3-w-sc,.a3-p.a3-w-cmp,.a3-p.a3-w-pk,.a3-p.a3-w-ask,.a3-p.bc-tbl,.card.panel:not(.a3-p),a.card.panel.tap,.gl-echo-c,.gl-sb,.bc-sb,.bc-vsb,.rk-mc,.rk-pb,.pt-ex,.cframe,.digest.sm,.foot-disc,.cc-404,.cm-pcard,.a3-plans):not(#z):not(#y):not(#x):not(#w){border-radius:var(--r-card)!important;box-shadow:none!important}
:root:root:root:root:root:root:root body.bc :is(.a3-p.a3-w-ttl,.a3-p.a3-w-sc,.a3-p.a3-w-cmp,.a3-p.a3-w-pk,.a3-p.a3-w-ask,.a3-p.bc-tbl,.card.panel:not(.a3-p),a.card.panel.tap,.gl-echo-c,.bc-sb,.rk-mc,.rk-pb,.pt-ex,.cframe,.digest.sm,.foot-disc,.cc-404,.cm-pcard):not(#z):not(#y):not(#x):not(#w){border-color:var(--bc-ink)!important}
:root:root:root:root:root:root:root body.bc :is(a.card.panel.tap,.gl-echo-c,a.rk-mc,a.bc-fx-go-sb,.rk-pb):not(#z):not(#y):not(#x):not(#w):hover{box-shadow:none!important;transform:none!important;border-color:var(--bc-or)!important}
:root:root:root:root:root:root:root body.bc .rk-tw.rk-bon:not(#z):not(#y):not(#x),:root:root:root:root:root:root:root body.bc .rk-tw:not(#z):not(#y):not(#x){box-shadow:none!important}

/* ---- type scale v2: the steps (same faces and weights as the oct 25 scale, bigger section heads, a 14px reading floor) ---- */
:root:root:root:root:root:root:root body.bc :is(main,.pe) h2:not(.sr):not(#z):not(#y):not(#x):not(#w):not(#v),
:root:root:root:root:root:root:root body.bc .a3-tg>.a3-w-sp:not(#z):not(#y):not(#x):not(#w):not(#v)>.a3-lb,:root:root:root:root:root:root:root body.bc .a3-tg>*:not(#z):not(#y):not(#x):not(#w):not(#v):not(:has(h2))>.a3-lb,
:root:root:root:root:root:root:root body.bc .a3-tg .gl-dev2 .gl-eyebrow:not(#z):not(#y):not(#x):not(#w):not(#v){font-size:var(--fs-h2)!important;line-height:1.15!important}
:root:root:root:root:root:root:root body.bc :is(main,.pe) h3:not(.sr):not(#z):not(#y):not(#x):not(#w):not(#v){font-size:var(--fs-h3)!important;line-height:1.3!important}
:root:root:root:root:root:root:root body.bc .a3-p>.a3-lb:not(#z):not(#y):not(#x):not(#w),:root:root:root:root:root:root:root body.bc :is(.cframe,.digest.sm,.foot-disc,.cc-404,.cc)>.cc-t:not(#z):not(#y):not(#x):not(#w){font-size:var(--fs-meta)!important}
/* meta text people read: never under 14px (was 13px) */
:root:root:root:root:root:root:root body.bc :is(main,.pe,nav.crumbs,.ax-ts) :is(.rk-tabs button,.rk-tabs button small,.bc-fx-note,.rk-mck,.rk-pht span,.rk-pf,.ri time,.ri .src,.bc-vs-m,.rk-cap span,.rk-capl,.rk-meta span,.gl-stw,.gl-sbd,.rk-pbn,.rk-tfoot,.rk-mo b,dl dd,dl dt,dd a,dd code,.bc-sb-k,.bc-sb-s,.cr-cur,.updated,.updated *,.nw,.nw *,.srow dd,.srow dt,.a3-plans li,.sheet-ft .txt,.sheet-cm .txt,th,td,th small,td small,.nsl,.claim,.bdg-get,.mt-key,.mt-r,.pt-exn,.bc-fx-spn,.bc-fx-spn b,.pt-lk,.pl-tag,.hint,.bc-mv,.bc-num,.bc-pr,.sc small,.mt-fr li,.mt-out span,.mt-bar,.a3-hr,.rk-th span,.rk-tag,.rk-leg span,.ls-mo,.gl-sbtt,.gl-sbk,.gl-sbt .gl-live,.rk-brk span,.src span,em small,.th span,.a3-mh,.a3-rs em,.gl-band li span):not(#z):not(#y):not(#x):not(#w){font-size:var(--fs-meta)!important}
:root:root:root:root:root:root:root body.bc .ax-ts a.ax-tab:not(#z):not(#y):not(#x),:root:root:root:root:root:root:root body.bc nav.crumbs a:not(#z):not(#y),:root:root:root:root:root:root:root body.bc nav.crumbs:not(#z):not(#y){font-size:var(--fs-meta)!important}

/* ---- fixed-width digits wherever numbers line up: scores, ranks, prices, dates, tables ---- */
:root:root:root:root:root:root:root body.bc :is(.rk-sc,.rk-pos,.rk-phs,.rk-phr,.rk-mcs,.rk-mck,.bc-vs-v,.bc-vs-m,.bc-sb-v,.bc-sb-c,.gl-sbs,.gl-stn,.gl-sb,.num,.price,.bc-num,.bc-pr,.tn,.rn,.sc,.a3-plans,.mt-t,table,time,.bc-stats,.rk-cap,.rk-pbn,.rk-ph):not(#z){font-variant-numeric:tabular-nums lining-nums!important}
/* read more rows: the link's tap area is the full 44px row height, the row looks the same */
:root:root:root:root:root:root:root body.bc .pe-rl li>a:first-child:not(#z):not(#y){display:inline-flex!important;align-items:center;min-height:44px;margin:-11px 0!important}

/* ---------- sideways rows snap gently on phones (Oct 25): proximity, never mandatory, and only on the x axis. each row's
   first item rests on the page gutter line (the row's own inline padding); the tab row keeps its 40px so the active tab clears
   the fade. no vertical or page snapping anywhere; smooth scrolling is untouched; off for reduced motion. ---------- */
@media(max-width:699.98px){
:root:root:root:root:root:root:root body.bc .rk-mv:not(#z):not(#y):not(#x),:root:root:root:root:root:root:root body.bc .bc-otm .rk-mv:not(#z):not(#y):not(#x):not(#w){scroll-snap-type:x proximity!important;scroll-padding-inline:2px!important}
:root:root:root:root:root:root:root body.bc .bc-otm-cats:not(#z):not(#y):not(#x){scroll-snap-type:x proximity!important;scroll-padding-inline:0!important}
:root:root:root:root:root:root:root body.bc .rk-tabs:not(#z):not(#y):not(#x){scroll-snap-type:x proximity!important;scroll-padding-inline:40px!important}
:root:root:root:root:root:root:root body.bc :is(.rk-mv>*,.bc-otm-cats>a,.rk-tabs>button):not(#z):not(#y):not(#x):not(#w){scroll-snap-align:start!important}}
@media(prefers-reduced-motion:reduce){:root:root:root:root:root:root:root body.bc :is(.rk-mv,.bc-otm-cats,.rk-tabs):not(#z):not(#y):not(#x):not(#w):not(#v){scroll-snap-type:none!important}}
/* ---------- tool logos in colour on hover (logo-colour-hover, preview): on a mouse or trackpad every tool logo stays grey
   and turns full colour in 150ms when the logo or its row, card or link is hovered or keyboard-focused; on touch screens
   logos are always in colour. one rule for all of them, so the board widgets, the match panel and the tool-page links
   that showed in colour before are grey at rest too. no transition with reduced motion. the community's dark-mono marks (.cm-lgd: black marks
   inverted for dark tiles, .cm-lgb) keep their mono filter, since in colour they'd vanish into their tile. ---------- */
@media (hover:hover) and (pointer:fine){
:root:root:root:root:root:root:root body.bc :is(img[src*="/logos/"],.a3-lg img,.mono.has-logo img,.gl-lg,.t7-pick img,.cd-lg img,.a3-twl img):not(.cm-lgd img):not(.cm-lgb img):not(#z){filter:grayscale(1)!important;transition:filter .15s ease,opacity .15s ease!important}
/* logo-hover-fix (Oct 26): the round board discs (/logos/disc/, themes/logo_discs.py) were baked as ink-only glyphs, so the
   hover had no colour to show on the leaderboard, category leaders, tool-page table and match panel. the discs now keep
   their brand colour; at rest on a mouse they're drawn in ink exactly as before (black, lifted 10% = the #16181f ink),
   and the hover / focus rules below (two ids, more classes) still take them to full colour */
/* (qa fix, Oct 26) not on the dark scoreboards: the match panel names (.bc-vs-n: homepage fixture, /match/, vs guides, /partners/)
   and the category 'top of the table' strip (.bc-ld-n) sit the disc on a white tile, and the ink filter blacked out the tile too,
   so they showed as black squares until hover. there they take the plain grey-at-rest rule above, and colour on hover as before */
:root:root:root:root:root:root:root body.bc img[src*="/logos/disc/"]:not(.cm-lgd img):not(.cm-lgb img):not(.bc-vs-n img):not(.bc-ld-n img):not(#z):not(#y){filter:brightness(0) invert(.1)!important}
:root:root:root:root:root:root:root body.bc :is(a,tr,article,summary,.card,.pick,.sticker,.cd-row,.gl-r,.gl-row,.gl-sbid,.rk-row,.rk-ra,.rk-mc,.rk-ph,.bc-vs-s,.lt-row,.ri,.bdg-item,.cm-bc,.cm-chip,.cm-tap,.vs-p,li:not(:has(li))):is(:hover,:focus-visible,:focus-within) :is(img[src*="/logos/"],.a3-lg img,.mono.has-logo img,.gl-lg,.t7-pick img,.cd-lg img,.a3-twl img):not(.cm-lgd img):not(.cm-lgb img):not(#z):not(#y),
:root:root:root:root:root:root:root body.bc :is(img[src*="/logos/"],.a3-lg img,.mono.has-logo img,.gl-lg,.t7-pick img,.cd-lg img):not(.cm-lgd img):not(.cm-lgb img):hover:not(#z):not(#y),
:root:root:root:root:root:root:root body.bc :is(.a3-lg,.mono.has-logo,.cd-lg):hover img:not(#z):not(#y){filter:none!important;opacity:1!important}}
@media (hover:none){
:root:root:root:root:root:root:root body.bc :is(img[src*="/logos/"],.a3-lg img,.mono.has-logo img,.gl-lg,.t7-pick img,.cd-lg img,.a3-twl img):not(.cm-lgd img):not(.cm-lgb img):not(#z):not(#y){filter:none!important;opacity:1!important}}
@media (prefers-reduced-motion:reduce){
:root:root:root:root:root:root:root body.bc :is(img[src*="/logos/"],.a3-lg img,.mono.has-logo img,.gl-lg,.t7-pick img,.cd-lg img,.a3-twl img):not(#z):not(#y){transition:none!important}}
/* the match day split (Oct 25, tally): a two-sided bar (orange for the first tool, ink for the second) with the words under it */
:root:root:root:root:root:root:root body.bc .bc-fx-split:not(#z){margin:var(--s-3) 0 0}
:root:root:root:root:root:root:root body.bc .bc-fx-bar:not(#z){display:flex;height:12px;border:2px solid var(--bc-ink);border-radius:999px;overflow:hidden;background:var(--bc-ink)}
:root:root:root:root:root:root:root body.bc .bc-fx-bar-a:not(#z){display:block;height:100%;width:50%;background:var(--bc-or);border-right:2px solid var(--bc-paper);transition:width .4s ease}
@media (prefers-reduced-motion:reduce){:root:root:root:root:root:root:root body.bc .bc-fx-bar-a:not(#z){transition:none}}
:root:root:root:root:root:root:root body.bc .bc-fx-st:not(#z){margin:var(--s-2) 0 0!important;font-size:var(--fs-2);line-height:1.45}
:root:root:root:root:root:root:root body.bc .bc-fx-ft .bc-fx-st:not(#z){font-weight:650;color:var(--bc-ink)}