@property --p{syntax:'<number>';inherits:false;initial-value:0}
:root{--bg:#070B16;--bg2:#0D1530;--panel:rgba(255,255,255,.06);--panel-s:rgba(255,255,255,.10);--line:rgba(255,255,255,.14);--line-s:rgba(255,255,255,.30);--text:#EAF1FF;--muted:#9FB0D0;--accent:#FFD60A;--accent-2:#FFE766;--on-accent:#0B1226;--link:#9DBBFF;--blue:#5B8CFF;--ring-bg:rgba(255,255,255,.14);--shadow:0 18px 50px rgba(0,0,0,.5);--chrome:linear-gradient(180deg,#fff 0%,#9FB4D6 46%,#E8F1FF 52%,#6F86AD 100%);--blob1:rgba(110,150,255,.55);--blob2:rgba(255,214,10,.30);--blob3:rgba(40,100,255,.50);--radius:20px;--font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
:root[data-theme=light]{--bg:#EEF2FA;--bg2:#E1E8F6;--panel:rgba(255,255,255,.72);--panel-s:rgba(255,255,255,.92);--line:rgba(13,21,48,.14);--line-s:rgba(13,21,48,.34);--text:#0B1226;--muted:#4D5A7A;--accent:#FFD60A;--accent-2:#FFC800;--on-accent:#0B1226;--link:#2447F5;--blue:#2447F5;--ring-bg:rgba(13,21,48,.12);--shadow:0 16px 40px rgba(34,52,110,.18);--chrome:linear-gradient(180deg,#0B1226 0%,#53648F 48%,#1B2850 54%,#0B1226 100%);--blob1:rgba(80,120,255,.22);--blob2:rgba(255,214,10,.28);--blob3:rgba(36,71,245,.14)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;font-family:var(--font);color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased;background:var(--bg);min-height:100vh;position:relative}
body::before{content:"";position:fixed;inset:-20vmax;z-index:-1;pointer-events:none;background:radial-gradient(40vmax 40vmax at 12% 0%,var(--blob1),transparent 60%),radial-gradient(34vmax 34vmax at 100% 18%,var(--blob2),transparent 62%),radial-gradient(46vmax 46vmax at 50% 108%,var(--blob3),transparent 60%);animation:breathe 14s ease-in-out infinite alternate}
@keyframes breathe{from{transform:translate3d(0,0,0) scale(1);opacity:.9}to{transform:translate3d(-2vmax,1.5vmax,0) scale(1.08);opacity:1}}
a{color:var(--link)}
a:hover{text-decoration:none}
img{max-width:100%;height:auto}
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;margin:0}
.wrap{width:min(1140px,92vw);margin-inline:auto}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.glass{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}
.chrome{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.site-header{margin:14px auto 0}
.bar{display:flex;align-items:center;gap:18px;padding:8px 22px;border-radius:999px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--text)}
.brand-mark{display:block;width:76px;height:76px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.brand-name{font-size:clamp(24px,3.4vw,34px);font-weight:800;letter-spacing:-.03em}
.tagline{margin:0 0 0 auto;color:var(--muted);font-size:14px;max-width:300px;line-height:1.35;text-align:right}
.nav-pill{position:sticky;top:10px;z-index:9000;margin:12px auto 0}
.nav-inner{position:relative;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;background:var(--panel-s);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.nav-inner ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;flex:1;min-width:0}
.nav-item{display:block;padding:8px 14px;border-radius:999px;font:700 14px var(--font);color:var(--text);white-space:nowrap;text-decoration:none;border:1px solid transparent}
a.nav-item:hover{background:var(--panel);border-color:var(--line-s)}
.nav-item[aria-current=page]{background:var(--accent);color:var(--on-accent)}
.nav-item.is-soon{color:var(--muted);cursor:default;opacity:.75}
.age{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:30px;padding:0 10px;border:2px solid var(--accent);border-radius:999px;font-weight:800;font-size:14px;color:var(--text);background:transparent}
.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;display:grid;place-items:center;padding:0}
.icon-btn:hover{border-color:var(--line-s)}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn .i-sun{display:none}
:root[data-theme=light] .icon-btn .i-sun{display:block}
:root[data-theme=light] .icon-btn .i-moon{display:none}
.menu-toggle{display:none;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:800 14px var(--font);cursor:pointer}
.menu-toggle .bars{display:inline-block;width:16px;height:2px;background:currentColor;box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor}
.nav-inner .age{margin-left:auto}
main{display:block;padding:26px 0 40px}
.eyebrow{margin:0 0 10px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--link)}
.hero{position:relative;overflow:hidden;display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;padding:clamp(24px,4vw,52px)}
.hero h1{font-size:clamp(36px,6.4vw,72px);margin:0 0 14px}
.lead{margin:0;font-size:clamp(16px,2.2vw,20px);color:var(--muted);max-width:560px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:999px;font-weight:800;font-size:15px;border:1px solid transparent;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s;font-family:var(--font)}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 10px 26px rgba(255,214,10,.28)}
.btn-ghost{background:var(--panel);color:var(--text);border-color:var(--line-s)}
.hero-art{display:grid;place-items:center;min-height:260px;position:relative}
.hero-art .big{width:min(300px,64vw);filter:drop-shadow(0 24px 40px rgba(0,0,0,.45));animation:floaty 7s ease-in-out infinite alternate}
@keyframes floaty{from{transform:translateY(-6px) rotate(-2deg)}to{transform:translateY(8px) rotate(2deg)}}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:22px}
.tile{position:relative;overflow:hidden;padding:22px;transition:transform .2s ease,border-color .2s;transform-style:preserve-3d;will-change:transform}
.tile:hover{border-color:var(--line-s)}
.tile::before{content:"";position:absolute;inset:0;background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),var(--panel-s),transparent 70%);opacity:0;transition:opacity .25s;pointer-events:none}
.tile:hover::before{opacity:1}
.tile h2{font-size:22px;margin:10px 0 6px}
.tile p{margin:0;color:var(--muted)}
.t-a{grid-column:span 2}.t-b{grid-column:span 2}.t-c{grid-column:span 2}.t-wide{grid-column:span 4}.t-side{grid-column:span 2}
.pill{display:inline-block;margin-top:14px;padding:4px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--line-s);font-weight:800;font-size:13px;color:var(--text)}
.ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--accent);color:var(--on-accent)}
.ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sec-head{margin:34px 0 14px}
.sec-head h2{font-size:clamp(24px,3.4vw,34px)}
.sec-head p{margin:6px 0 0;color:var(--muted)}
.passport{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.ring{--v:86;position:relative;width:96px;height:96px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--ring-bg) 0);display:grid;place-items:center;transition:--p 1.4s cubic-bezier(.2,.8,.2,1)}
.ring.in{--p:var(--v)}
.ring::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--bg2)}
.ring b{position:relative;z-index:1;font-size:26px;font-weight:800}
.meters{display:grid;gap:12px}
.meter{display:grid;grid-template-columns:104px 1fr auto;gap:10px;align-items:center;font-size:14px}
.meter .lab{color:var(--muted)}
.bar-t{height:8px;border-radius:99px;background:var(--ring-bg);overflow:hidden}
.bar-t i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--accent));transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.in .bar-t i,.bar-t.in i{width:var(--w)}
.gauge{display:flex;gap:5px}
.gauge i{width:18px;height:10px;border-radius:3px;background:var(--ring-bg)}
.gauge i.on{background:var(--accent)}
.note{margin-top:22px;padding:16px 22px;color:var(--muted)}
.note strong{color:var(--text)}
footer{margin:10px auto 26px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px;padding:28px 30px}
.f-brand p{margin:10px 0 0;color:var(--muted);font-size:15px;max-width:380px}
.f-logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px}
.f-logo img{width:56px;height:56px}
.f-col h3{margin:0 0 10px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--link)}
.f-col ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.f-col a{color:var(--text);text-decoration:none}
.f-col a:hover{color:var(--link)}
.f-col .is-soon{color:var(--muted);cursor:default}
.footer-18{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:16px 26px;font-size:14px;color:var(--muted);border-color:var(--accent)}
.footer-18 p{margin:0;flex:1;min-width:240px}
.footer-18 .age{flex:none;font-size:16px;height:34px;min-width:50px}
.footer-18 .copy{white-space:nowrap}
.crumbs{display:flex;gap:8px;align-items:center;margin:4px 0 14px;font-size:14px;color:var(--muted)}
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
html.js .reveal.in{opacity:1;transform:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:10px}
@media(max-width:1020px){.nav-item{padding:7px 10px;font-size:13px}.t-wide,.t-side{grid-column:span 3}}
@media(max-width:860px){
.hero{grid-template-columns:1fr}.hero-art{order:-1;min-height:200px}.bento{grid-template-columns:1fr}.t-a,.t-b,.t-c,.t-wide,.t-side{grid-column:span 1}
.brand-mark{width:56px;height:56px}.tagline{display:none}.bar{padding:6px 16px}
.menu-toggle{display:inline-flex}
.nav-inner ul{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);flex-direction:column;gap:2px;padding:10px;border-radius:20px;background:var(--bg2);border:1px solid var(--line);box-shadow:var(--shadow)}
.nav-inner ul.open{display:flex}
footer .footer-grid{grid-template-columns:1fr;padding:22px}
.meter{grid-template-columns:88px 1fr auto}
}
@media(prefers-reduced-motion:reduce){body::before,.hero-art .big{animation:none}html.js .reveal{opacity:1!important;transform:none!important;transition:none!important}.ring,.bar-t i{transition:none}.tile,.btn{transition:none}html{scroll-behavior:auto}}

.prose{padding:clamp(22px,4vw,40px);margin-top:8px}
.prose h1{font-size:clamp(30px,5vw,46px);margin-bottom:12px}
.prose h2{font-size:clamp(21px,2.6vw,27px);margin:30px 0 10px}
.prose p,.prose li{max-width:72ch}
.prose ul,.prose ol{padding-left:22px}
.prose .lead{color:var(--muted);font-size:1.08em}
.prose table{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{color:var(--muted);font-weight:600}
.tbl{overflow-x:auto}
.crit{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px;margin:16px 0}
.crit .glass{padding:16px 18px}
.crit b{font-size:28px;display:block;color:var(--accent)}
.passport{grid-template-columns:auto minmax(0,1fr)}
.meters,.meter>*{min-width:0}
.meter{grid-template-columns:minmax(80px,104px) minmax(0,1fr) auto}
.gauge i{flex:1 1 0;max-width:18px}
@media(max-width:860px){.meter{grid-template-columns:76px minmax(0,1fr) auto;gap:8px}.passport{gap:12px}}

/* tools */
.tool{display:grid;gap:14px;margin:18px 0}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px}
.field label{display:block;font-size:14px;color:var(--muted);margin-bottom:4px}
.field input,.field select{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line-s);background:var(--panel-s);color:var(--text);font:inherit;min-height:44px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:12px;margin:6px 0 10px}
.kpi{padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:var(--panel)}
.kpi span{display:block;font-size:13px;color:var(--muted)}
.kpi b{display:block;font-size:22px;margin-top:2px}
.hist{display:flex;align-items:flex-end;gap:4px;height:120px;margin:12px 0;padding:8px;border:1px solid var(--line);border-radius:14px}
.hist i{flex:1;min-width:0;background:linear-gradient(180deg,var(--accent),var(--blue));border-radius:3px 3px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chip{padding:7px 14px;border-radius:999px;border:1px solid var(--line-s);background:var(--panel);color:var(--text);font:inherit;font-size:14px;cursor:pointer;min-height:40px}
.chip[aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.short{padding:16px 20px;margin:14px 0;border:1px solid var(--line-s);border-radius:16px;background:var(--panel)}
.short strong{display:block;margin-bottom:6px}
.gl dt{font-weight:700;margin-top:16px;scroll-margin-top:100px}
.gl dd{margin:4px 0 0;max-width:72ch}
.similar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px;margin:12px 0}
.similar a{display:block;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:var(--panel);text-decoration:none;color:var(--text)}
.similar a:hover{border-color:var(--accent)}
.similar small{display:block;color:var(--muted)}

/* home */
.tile h3{font-size:clamp(18px,2vw,22px);margin:6px 0 8px}
.tile h3 a,.tile h2 a{color:inherit;text-decoration:none}
.tile h3 a:hover,.tile h2 a:hover{text-decoration:underline}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:12px;margin:10px 0 18px}
.card-slot{display:grid;gap:4px;padding:16px 16px 14px;border-radius:18px;border:1px solid var(--line);background:var(--panel);text-decoration:none;color:var(--text);position:relative}
.card-slot:hover{border-color:var(--accent)}
.card-slot[hidden]{display:none}
.card-slot .sc{justify-self:start;padding:3px 11px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:14px}
.card-slot strong{font-size:18px}
.card-slot small{color:var(--muted)}
.crit ol{margin:8px 0 0;padding-left:20px}
.crit li small{color:var(--muted)}
.bento>.tile:not([class*=" t-"]){grid-column:span 2}
.bento>.tile.t-h{grid-column:span 3}
@media(max-width:1020px){.bento>.tile:not([class*=" t-"]){grid-column:span 3}.bento>.tile.t-h{grid-column:span 3}}
@media(max-width:860px){.bento>.tile:not([class*=" t-"]),.bento>.tile.t-h{grid-column:span 1}}

/* banners */
.banner{margin:0 0 18px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.banner img{display:block;width:100%;height:auto;aspect-ratio:3/2;max-height:380px;object-fit:cover}
.hero+.banner{margin-top:18px}

/* covers */
.banner.cover{max-width:760px}
.banner.cover img{max-height:none}
.card-slot img{width:100%;height:auto;aspect-ratio:3/2;border-radius:12px;object-fit:cover;margin-bottom:6px;background:var(--panel)}

/* ---- site features: age gate, dock, search, toc, progress, tooltip ---- */
html.lock,html.lock body{overflow:hidden}
.agegate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(4,7,16,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.agegate[hidden],.panel[hidden],.progress[hidden],.dock button[hidden],.tip[hidden]{display:none}
.agegate .box{max-width:460px;width:100%;padding:28px 26px;text-align:center}
.agegate .age{display:inline-flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:20px;line-height:1;padding:8px 16px}
.agegate h2{font-size:26px;margin-bottom:10px}
.agegate p{color:var(--muted);margin:0 0 16px}
.agegate .cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.agegate .ag-no{color:var(--text);margin-top:6px}
.progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;background:transparent}
.progress i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--blue),var(--accent))}
.dock{position:fixed;right:14px;bottom:18px;z-index:55;display:flex;flex-direction:column;gap:8px}
.dock button{width:46px;height:46px;border-radius:14px;border:1px solid var(--line-s);background:var(--panel-s);color:var(--text);display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow)}
.dock button:hover{border-color:var(--accent)}
.dock svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.panel{position:fixed;z-index:70;right:14px;bottom:78px;width:min(360px,calc(100vw - 28px));max-height:min(70vh,520px);overflow:auto;padding:16px 18px;border-radius:18px;border:1px solid var(--line-s);background:var(--bg2);box-shadow:var(--shadow)}
.panel strong{display:block;margin-bottom:8px}
.panel ol,.panel ul{margin:0;padding-left:20px}
.panel ul{list-style:none;padding:0}
.panel li{margin:6px 0}
.panel li small{display:block;color:var(--muted)}
.panel.search input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line-s);background:var(--panel-s);color:var(--text);font:inherit;min-height:46px}
.panel .hint{margin:10px 0 0;color:var(--muted);font-size:14px}
.panel .none{color:var(--muted)}
.tip{position:fixed;z-index:80;padding:10px 12px;border-radius:12px;border:1px solid var(--line-s);background:var(--bg2);box-shadow:var(--shadow);font-size:14px;line-height:1.45;pointer-events:none}
.tip strong{display:block;margin-bottom:2px}
.tip span{color:var(--muted)}
@media(max-width:860px){.dock{right:10px;bottom:12px}.dock button{width:44px;height:44px}.panel{right:10px;bottom:70px}}
@media(prefers-reduced-motion:reduce){.progress i{transition:none}}

/* ---- batch 1 features ---- */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
.dock button[hidden]{display:none}
.h-copy{margin-left:10px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:.7em;cursor:pointer;opacity:0;transition:opacity .15s}
.prose h2:hover .h-copy,.h-copy:focus-visible{opacity:1}
@media(hover:none){.h-copy{opacity:.55}}
.acts{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.acts[hidden]{display:none}
.acts button{width:100%;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:inherit;cursor:pointer;min-height:44px}
.acts button:hover{border-color:var(--accent)}
.mini{position:fixed;left:14px;bottom:18px;z-index:54;max-width:min(720px,calc(100vw - 86px));display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center;padding:10px 16px;border-radius:16px;border:1px solid var(--line-s);background:var(--bg2);box-shadow:var(--shadow);font-size:14px}
.mini[hidden]{display:none}
.mini b{font-size:15px}
.mini .sc{padding:2px 10px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:700}
.mini span{color:var(--muted)}
@media(max-width:860px){.mini{left:10px;bottom:12px;padding:8px 12px;font-size:13px}.mini .m-hide{display:none}}
.rtp-demo{margin:18px 0;padding:18px 20px;border-radius:18px;border:1px solid var(--line-s);background:var(--panel)}
.rtp-demo h3{margin:0 0 6px;font-size:18px}
.rtp-demo .rtp-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:10px 0}
.rtp-demo input[type=range]{flex:1 1 220px;accent-color:var(--accent);min-height:32px}
.rtp-demo .rtp-val{min-width:70px;font-weight:700;font-size:20px}
.rtp-demo .btns{display:flex;gap:8px;flex-wrap:wrap}
.rtp-demo .btns button{padding:6px 12px;border-radius:999px;border:1px solid var(--line-s);background:var(--panel-s);color:var(--text);font:inherit;font-size:14px;cursor:pointer;min-height:36px}
.rtp-demo .rtp-out{margin:6px 0 0;color:var(--text)}
.th-sort{all:unset;cursor:pointer;display:inline-flex;gap:6px;align-items:center;color:var(--muted);font-weight:600}
.th-sort:hover,.th-sort:focus-visible{color:var(--text)}
th[aria-sort=ascending] .th-sort::after{content:"▲";font-size:.7em}
th[aria-sort=descending] .th-sort::after{content:"▼";font-size:.7em}
.tg{display:inline-flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tg i{font-style:normal;font-size:12px;padding:2px 9px;border-radius:999px;border:1px solid var(--line-s);color:var(--muted)}
.verify{list-style:none;margin:12px 0;padding:0;display:grid;gap:8px}
.verify li{display:flex;gap:10px;align-items:baseline;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:var(--panel)}
.verify .ok{color:var(--accent);font-weight:800}
.verify .part{color:var(--blue);font-weight:800}
.verify small{color:var(--muted)}
.log{margin:12px 0;padding-left:20px}
.news{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.news li{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:var(--panel)}
.news time{color:var(--muted);font-size:14px;min-width:100px}
.news small{color:var(--muted)}
.cta .btn svg{width:18px;height:18px;margin-right:6px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
@supports (animation-timeline:view()){
@media(prefers-reduced-motion:no-preference){
@keyframes parallax{from{transform:translateY(-22px) scale(1.06)}to{transform:translateY(22px) scale(1.06)}}
.banner img{animation:parallax linear both;animation-timeline:view()}
@keyframes spin3d{from{transform:perspective(900px) rotateY(-16deg)}to{transform:perspective(900px) rotateY(16deg)}}
.hero-art .big{animation:floaty 6s ease-in-out infinite,spin3d linear both;animation-timeline:auto,scroll(root)}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
html:not(.js) .progress i{animation:grow linear both;animation-timeline:scroll(root)}
}}

/* ---- batch 2: favourites, quiz, trainer, radar, sim canvas ---- */
.dock a.dock-fav{position:relative;width:46px;height:46px;border-radius:14px;border:1px solid var(--line-s);background:var(--panel-s);color:var(--text);display:grid;place-items:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow)}
.dock a.dock-fav:hover{border-color:var(--accent)}
.dock a.dock-fav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dock .cnt{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:800;display:grid;place-items:center}
.dock .cnt[hidden]{display:none}
@media(max-width:860px){.dock a.dock-fav{width:44px;height:44px}}
.card-wrap{position:relative}
.card-wrap[hidden]{display:none}
.fav{width:40px;height:40px;border-radius:12px;border:1px solid var(--line-s);background:var(--panel-s);color:var(--text);font-size:20px;line-height:1;cursor:pointer}
.fav[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}
.card-wrap>.fav{position:absolute;top:10px;right:10px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
td .fav{width:36px;height:36px;font-size:18px}
.fav-btn{padding:8px 16px;border-radius:999px;border:1px solid var(--line-s);background:var(--panel-s);color:var(--text);font:inherit;cursor:pointer;min-height:42px}
.fav-btn[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.lcard{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.lcard a{display:block;text-decoration:none;color:var(--text)}
.lcard small{display:block;color:var(--muted)}
.field input[type=range]{margin-top:8px;accent-color:var(--accent);padding:0;min-height:30px}
.selrow{display:flex;gap:8px;align-items:center}
.selrow select{flex:1}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}
.radar{display:grid;gap:8px;justify-items:center;margin:12px 0}
.radar svg{width:min(100%,380px);height:auto}
.legend{list-style:none;margin:0;padding:0;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
#s-paths{width:100%;height:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.qstage{padding:18px 20px;border:1px solid var(--line);border-radius:18px;background:var(--panel);margin:8px 0}
.qstage h2,.qstage h3{margin:6px 0 12px}
.q-step{color:var(--muted);font-size:14px;margin:0}
.q-note{color:var(--muted);font-size:14px}
.opts{display:grid;gap:10px;margin:10px 0}
.opts.row{display:flex;gap:8px;flex-wrap:wrap}
.opt{padding:12px 16px;border-radius:14px;border:1px solid var(--line-s);background:var(--panel-s);color:var(--text);font:inherit;text-align:left;cursor:pointer;min-height:46px}
.opts.row .opt{text-align:center;min-width:64px}
.opt:hover:not(:disabled){border-color:var(--accent)}
.opt.good{border-color:#4ade80;background:rgba(74,222,128,.16)}
.opt.bad{border-color:#f87171;background:rgba(248,113,113,.14)}
.opt:disabled{cursor:default;opacity:.95}
.g-res{margin:10px 0 0}
.g-sc{color:var(--muted);margin:6px 0 0;font-size:14px}
.qstage svg{width:100%;height:auto;max-width:520px;display:block;margin:8px 0}
.tool{grid-template-columns:minmax(0,1fr)}
.tool>*{min-width:0}
.prose,.qstage{min-width:0}
.radar svg{max-width:100%}

/* ---- batch 3: reading mode, print, install ---- */
.read-bar{position:fixed;top:0;left:50%;transform:translateX(-50%);width:min(780px,100%);z-index:62;display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;padding:10px 14px;border:1px solid var(--line-s);border-radius:0 0 16px 16px;background:var(--bg2);box-shadow:var(--shadow)}
.read-bar[hidden]{display:none}
.read-bar button{padding:6px 14px;border-radius:12px;border:1px solid var(--line-s);background:var(--panel-s);color:var(--text);font:inherit;cursor:pointer;min-height:40px}
.read-bar button:hover{border-color:var(--accent)}
.read-bar .rs{min-width:54px;text-align:center;color:var(--muted);font-size:14px}
.dock button[data-act=read][aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
html.reading body::before{display:none}
html.reading .site-header,html.reading .nav-pill,html.reading footer,html.reading .banner,html.reading .mini,html.reading .crumbs,html.reading .similar,html.reading .h-copy,html.reading .fav-btn,html.reading .tg,html.reading .progress{display:none!important}
html.reading .dock>*:not([data-act=read]):not([data-act=top]){display:none}
html.reading main{max-width:780px;margin:0 auto;padding-top:70px}
html.reading .prose{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:10px 4px 70px;font-size:var(--read-fs,19px);line-height:1.85}
html.reading .prose h1{font-size:clamp(28px,5vw,40px);margin:18px 0 14px}
html.reading .prose h2{font-size:1.35em;margin:1.8em 0 .5em}
html.reading .prose p,html.reading .prose li{max-width:none}
html.reading .prose .tbl,html.reading .prose .passport,html.reading .prose .rtp-demo{font-size:.85em}
.dock a.dock-fav,.dock button{transition:none}
.linkbtn{all:unset;cursor:pointer;color:var(--link);text-decoration:underline}
.linkbtn:hover{text-decoration:none}
.linkbtn[hidden]{display:none}
#install{bottom:auto;top:90px;right:14px}
@media print{
:root,:root[data-theme=light]{--bg:#fff;--bg2:#fff;--panel:#fff;--panel-s:#fff;--line:#bbb;--line-s:#888;--text:#000;--muted:#333;--link:#000;--accent:#000}
html,body{background:#fff!important;color:#000!important}
body::before,.site-header,.nav-pill,footer,.dock,.panel,.progress,.agegate,.mini,.read-bar,.fav,.fav-btn,.h-copy,.banner,.hero-art,.cta,.chips,.tg,.rtp-demo,#s-paths,.similar{display:none!important}
.glass,.prose{background:#fff!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;padding:0!important}
.prose{font-size:12pt;line-height:1.5}
.prose h1,.prose h2,.prose h3{break-after:avoid;color:#000!important;-webkit-text-fill-color:#000!important;background:none!important}
.prose a{text-decoration:underline;color:#000}
.prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em}
.tbl{overflow:visible}
table,tr,li,.verify li{break-inside:avoid}
.passport .ring{border:2px solid #000}
}

@media(max-width:560px){.read-bar{gap:6px;padding:8px 8px}.read-bar button{padding:6px 10px}.read-bar .rs{min-width:44px;font-size:13px}html.reading main{padding-top:64px}}

/* slim home banner */
.hero+.banner{margin-top:16px}
.hero+.banner img{height:clamp(120px,14vw,210px);max-height:none;aspect-ratio:auto;object-fit:cover;object-position:center 42%}
@media(max-width:860px){.hero+.banner img{height:130px}}
.banner img{max-height:300px}