:root{--a:#39ff88;--a2:#c4ff4d;--bg:#05080a;--bg2:#0a1014;--fg:#e4ece7;--mut:#8fa39a;--line:rgba(255,255,255,.08);--glass:rgba(255,255,255,.035);--r:18px;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.ac-green{--a:#39ff88;--a2:#c4ff4d}.ac-amber{--a:#ffb547;--a2:#ff7a3d}.ac-cyan{--a:#3ef2ff;--a2:#8b7bff}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:64px}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;
background-image:radial-gradient(1200px 600px at 80% -10%,color-mix(in srgb,var(--a) 9%,transparent),transparent 60%),linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:auto,48px 48px,48px 48px;background-position:0 0,-1px -1px,-1px -1px}
a{color:var(--a)}a:hover{color:var(--a2)}
:focus-visible{outline:2px solid var(--a);outline-offset:3px;border-radius:6px}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:.2em 0 .4em}h2{font-size:clamp(1.6rem,4vw,2.4rem)}h3{font-size:1.2rem}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--bg);padding:.5rem 1rem}
header.site{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:.9rem clamp(1rem,4vw,2.5rem);border-bottom:1px solid var(--line);background:rgba(5,8,10,.7)}
.logo{font-family:var(--mono);color:var(--a);text-decoration:none;font-weight:700;white-space:nowrap;text-shadow:0 0 18px color-mix(in srgb,var(--a) 60%,transparent)}
header.site nav{display:flex;gap:1.1rem;overflow-x:auto;scrollbar-width:none;mask-image:linear-gradient(90deg,#000 85%,transparent)}header.site nav::-webkit-scrollbar{display:none}
header.site nav a{color:var(--mut);text-decoration:none;font-size:.88rem;white-space:nowrap;padding:.3rem 0}header.site nav a:hover,header.site nav a[aria-current]{color:var(--fg)}
main.wrap,.wrap{max-width:780px;margin:0 auto;padding:0 1.25rem}main.wrap{padding-top:1.5rem;padding-bottom:1rem}.wide{max-width:1180px}
.kicker{font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;color:var(--a);margin:0 0 .4rem;text-transform:uppercase}
.term{font-family:var(--mono);color:var(--a)}.note{color:var(--mut);font-size:.88rem}
.card{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.3rem;margin:1rem 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--a);color:#03100a;font-weight:700;text-decoration:none;padding:.8rem 1.3rem;border-radius:999px;box-shadow:0 0 0 1px color-mix(in srgb,var(--a) 50%,#fff),0 10px 40px -8px color-mix(in srgb,var(--a) 70%,transparent);transition:transform .2s}
.btn:hover{color:#03100a;transform:translateY(-2px)}
/* hero */
.hero{position:relative;min-height:min(82vh,720px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;z-index:-2}
.hero-fx{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--bg) 0%,rgba(5,8,10,.85) 35%,rgba(5,8,10,.15) 70%),linear-gradient(0deg,var(--bg) 0%,transparent 40%),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
.hero-fx::after{content:"";position:absolute;left:0;right:0;height:30%;top:-30%;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--a) 10%,transparent),transparent);animation:scan 7s linear infinite}
@keyframes scan{to{top:110%}}
.hero-in{max-width:1180px;width:100%;margin:0 auto;padding:clamp(2rem,8vw,5rem) clamp(1.25rem,4vw,2.5rem)}
.hero h1{font-size:clamp(2.3rem,7vw,4.6rem);max-width:13ch;margin:.1em 0 .25em;background:linear-gradient(100deg,#fff 30%,var(--a) 70%,var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px color-mix(in srgb,var(--a) 25%,transparent))}
.lede{font-size:clamp(1.05rem,2.2vw,1.25rem);max-width:46ch;color:#cfdad4}
.blink{display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--a);margin-right:.6em;box-shadow:0 0 12px var(--a);animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
.stats{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0;margin:1.2rem 0 1.6rem}
.stats li{display:flex;align-items:baseline;gap:.45rem;padding:.45rem .9rem;border:1px solid var(--line);border-radius:999px;background:rgba(0,0,0,.45);font-size:.9rem;color:var(--mut)}
.stats b{color:var(--a);font-family:var(--mono);font-size:1.05rem}
.disc{margin:1.4rem 0 0;padding:.9rem 1.1rem;border-radius:12px;border:1px solid color-mix(in srgb,var(--a) 30%,transparent);background:color-mix(in srgb,var(--a) 6%,transparent);font-size:.86rem;color:#c3d0c9}
/* jump nav */
.jump{position:sticky;top:0;z-index:20;margin-top:1.4rem;background:rgba(5,8,10,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-block:1px solid var(--line)}
.jump-in{max-width:1180px;margin:0 auto;display:flex;gap:.5rem;padding:.6rem 1.25rem;overflow-x:auto;scrollbar-width:none}.jump-in::-webkit-scrollbar{display:none}
.jump a{flex:none;font-size:.82rem;font-family:var(--mono);color:var(--mut);text-decoration:none;padding:.4rem .85rem;border:1px solid var(--line);border-radius:999px;transition:.2s}
.jump a:hover,.jump a.on{color:#03100a;background:var(--a);border-color:var(--a)}
.prose{margin-top:2rem}.prose p{color:#cdd8d2}
.rules .card{border-color:color-mix(in srgb,var(--a2) 35%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--a2) 8%,transparent),transparent 60%)}
.rules .card h2{font-size:1.3rem}.rules .card h2::before{content:"⚠ ";color:var(--a2)}
.sec{padding-top:3.2rem}.sub{color:var(--mut);margin-top:-.2rem}
/* glow border */
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
.glow{position:relative}.glow::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ang),transparent 0 55%,var(--a) 75%,var(--a2) 88%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 5s linear infinite;pointer-events:none}
@keyframes spin{to{--ang:360deg}}
/* picks */
.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem;margin-top:1.2rem}
.pick{background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:22px;padding:1.4rem;display:flex;flex-direction:column;overflow:hidden}
.pick .rank{position:absolute;right:1rem;top:.4rem;font:800 3.6rem/1 var(--mono);color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--a) 45%,transparent)}
.pick-art{width:92px;height:92px;border-radius:24px;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--a) 30%,transparent),transparent 70%),#0b1215;border:1px solid var(--line);color:var(--a);margin-bottom:1rem}
.ico{width:52px;height:52px;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--a) 70%,transparent))}.ico.big{width:58px;height:58px}
.pick-label{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--a2);margin:0}
.pick h3{margin:.3rem 0 .4rem}.pick .does{color:#cdd8d2;flex:1}
.pick-foot{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;margin-top:.8rem}.more{font-size:.88rem;color:var(--mut)}
.cta{display:inline-flex;align-items:center;font-weight:700;font-size:.92rem;text-decoration:none;color:#03100a;background:linear-gradient(90deg,var(--a),var(--a2));padding:.6rem 1.05rem;border-radius:999px;transition:transform .2s,box-shadow .2s}
.cta:hover{color:#03100a;transform:translateY(-2px);box-shadow:0 8px 30px -6px var(--a)}
/* items */
.items{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-top:1.1rem;max-width:920px}
.item{position:relative;display:flex;flex-direction:column;background:var(--glass);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .3s,transform .3s}
.item:hover{border-color:color-mix(in srgb,var(--a) 45%,transparent);transform:translateY(-3px)}
.item-art{position:relative;height:132px;display:grid;place-items:center;color:var(--a);background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--a) 18%,transparent),transparent 62%),linear-gradient(180deg,#0c1417,#070b0d);border-bottom:1px solid var(--line);overflow:hidden}
.item-art::before{content:"";position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--a) 10%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--a) 10%,transparent) 1px,transparent 1px);background-size:22px 22px;mask-image:radial-gradient(circle,#000 30%,transparent 75%)}
.item-art .ico{position:relative;width:64px;height:64px}
.ring{position:absolute;width:104px;height:104px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--a) 50%,transparent);transition:transform 1.2s}
.item:hover .ring{transform:rotate(180deg) scale(1.08)}
.num{position:absolute;left:.9rem;top:.6rem;font:700 .78rem var(--mono);color:var(--mut);letter-spacing:.1em}
.item-body{padding:1.1rem 1.2rem 1.2rem;display:flex;flex-direction:column;flex:1}
.item h3{font-size:1.2rem;margin:0 0 .55rem;color:#fff}
.does{font-weight:500;color:color-mix(in srgb,var(--a) 55%,#fff);margin:0 0 .5rem}.take{color:var(--mut);font-size:.94rem;margin:0 0 1rem;flex:1}
.item-foot{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;justify-content:space-between}
.best{display:inline-flex;flex-wrap:wrap;gap:.45rem;align-items:baseline;align-self:flex-start;font-size:.8rem;line-height:1.3;color:var(--fg);padding:.3rem .7rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--a) 35%,transparent);background:color-mix(in srgb,var(--a) 8%,transparent);margin:0 0 .7rem}.best span{font:700 .62rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--a)}.item .cta{align-self:flex-start}
/* diagrams */
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:1rem;margin-top:1.2rem}
.dcard{margin:0;background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:1rem}.dcard figcaption{color:var(--mut);font-size:.9rem;padding:.4rem .3rem 0}
.dsvg{width:100%;height:auto;display:block}
.dfill{fill:#0c1417;stroke:color-mix(in srgb,var(--a) 40%,transparent);stroke-width:1.5}.dstroke{fill:none;stroke:var(--a);stroke-width:2}
.dt{fill:#cfdad4;font:15px system-ui,sans-serif}.dt.c{text-anchor:middle;fill:var(--mut)}.dn{fill:var(--a);font-weight:800;font-family:var(--mono)}.dh{fill:var(--a);font:700 13px var(--mono);letter-spacing:.2em}
.dleds circle{fill:var(--a);animation:blink 1s infinite}.dbeam{stroke:var(--a);stroke-width:2;stroke-dasharray:6 8;animation:dash 1.2s linear infinite}.dbeam.d2{stroke:var(--a2)}
@keyframes dash{to{stroke-dashoffset:-28}}.dglint{animation:blink 1s infinite}
.droute{fill:none;stroke:var(--a);stroke-width:2;stroke-dasharray:3 7;animation:dash 1.5s linear infinite}
.dring{fill:none;stroke:var(--a2);stroke-width:1.5;transform-origin:240px 88px;animation:pulse 2s ease-out infinite}.dring.r2{animation-delay:1s}
@keyframes pulse{from{transform:scale(.4);opacity:1}to{transform:scale(1.4);opacity:0}}
.dbars rect{fill:var(--a);opacity:.25;animation:bars 2.4s infinite}.dbars rect:nth-child(2){animation-delay:.3s}.dbars rect:nth-child(3){animation-delay:.6s}.dbars rect:nth-child(4){animation-delay:.9s;fill:var(--a2)}
@keyframes bars{30%,70%{opacity:1}}
.flow{display:grid;grid-template-columns:1fr auto 1.15fr auto 1fr;align-items:center;gap:.6rem;margin-top:1.2rem}
.fcol{display:flex;flex-direction:column;gap:.6rem;background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:1rem}
.fcol.core .corebox{display:flex;flex-direction:column;gap:.6rem;padding:.6rem;border-radius:14px;background:color-mix(in srgb,var(--a) 7%,transparent);border:1px solid color-mix(in srgb,var(--a) 40%,transparent);box-shadow:0 0 40px -12px var(--a)}
.fcol.zone{border:1.5px dashed var(--a);background:color-mix(in srgb,var(--a) 5%,transparent)}
.flab{font:700 .7rem var(--mono);letter-spacing:.18em;color:var(--a);margin:0}
.node{display:flex;gap:.7rem;align-items:center;color:var(--a);background:#0b1215;border:1px solid var(--line);border-radius:12px;padding:.55rem .7rem}
.node .nico{width:34px;height:34px;flex:none}.node b{display:block;color:var(--fg);font-size:.92rem}.node small{color:var(--mut);font-size:.78rem}
.fwire{width:44px;height:2px;position:relative;background:color-mix(in srgb,var(--a) 25%,transparent)}
.fwire i{position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--a) 0 8px,transparent 8px 16px);background-size:32px 2px;animation:flow 1s linear infinite;box-shadow:0 0 10px var(--a)}
@keyframes flow{to{background-position:32px 0}}
.calc{margin-top:1rem;padding:1.2rem 1.4rem;border-radius:var(--r);background:linear-gradient(120deg,color-mix(in srgb,var(--a) 12%,transparent),transparent);border:1px solid color-mix(in srgb,var(--a) 35%,transparent)}
.calc .eq{font:600 clamp(1.1rem,3vw,1.6rem) var(--mono);margin:.2rem 0 .5rem}.calc .eq b{color:var(--a)}.calc p{margin:.2rem 0}
/* table */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--glass);margin-top:1rem}
table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:560px}th,td{text-align:left;padding:.65rem .9rem;border-bottom:1px solid var(--line)}
th{font:600 .7rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--a);position:sticky;top:0;background:#0a1014}
td.n{font-family:var(--mono);color:var(--mut)}td a{color:var(--fg);text-decoration:none}td a:hover{color:var(--a)}tbody tr:hover{background:rgba(255,255,255,.03)}
/* manual cards */
.manuals{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1rem;margin-top:1rem}
.manual{position:relative;display:block;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);text-decoration:none;color:var(--fg);background:#0a1014;min-height:250px;isolation:isolate;transition:transform .3s,border-color .3s}
.manual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;z-index:-2;opacity:.95;transition:transform .6s}
.manual::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(5,8,10,.96) 22%,rgba(5,8,10,.1) 75%)}
.manual:hover{transform:translateY(-4px);border-color:var(--a);color:var(--fg)}.manual:hover img{transform:scale(1.05)}
.manual-in{display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-height:250px;padding:1.3rem}
.manual h3,.manual h2{margin:.2rem 0;font-size:1.35rem}.manual-p{color:var(--mut);font-size:.92rem}.manual-go{color:var(--a);font-weight:700;margin-top:.6rem;font-size:.92rem}
/* home */
.homehero{position:relative;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line)}
.homehero .hero-in{min-height:min(70vh,600px);display:flex;flex-direction:column;justify-content:flex-end}
footer.site{border-top:1px solid var(--line);margin-top:3.5rem;padding:1.6rem 1.25rem 2.5rem;color:var(--mut);font-size:.84rem}footer.site>div{max-width:1180px;margin:0 auto}footer .tag{font-family:var(--mono);color:var(--a)}
/* reveal */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.js .rv.in{opacity:1;transform:none}
@media (max-width:860px){.flow{grid-template-columns:1fr}.fwire{width:2px;height:28px;justify-self:center}.fwire i{background:repeating-linear-gradient(180deg,var(--a) 0 8px,transparent 8px 16px);background-size:2px 32px;animation-name:flowv}
@keyframes flowv{to{background-position:0 32px}}}
@media (max-width:560px){body{font-size:16px}.hero{min-height:auto;align-items:stretch;flex-direction:column}.hero-img{position:relative;height:250px;object-position:78% 50%}
.hero-fx{background:linear-gradient(0deg,var(--bg) 0%,rgba(5,8,10,.2) 45%,transparent),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);height:250px}
.hero-in{margin-top:-70px;padding-top:0}.item-art{height:84px}.item-art .ico{width:46px;height:46px}.ring{width:70px;height:70px}.item .cta,.pick .cta{align-self:stretch;justify-content:center}.pick-foot{flex-direction:column;align-items:stretch;text-align:center}header.site{flex-direction:column;align-items:flex-start;gap:.4rem}header.site nav{width:100%}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}.js .rv{opacity:1;transform:none}}
.hero-disc{font-size:.8rem;color:var(--mut);margin:1rem 0 0}.hero-disc a{color:var(--mut)}

/* did you know */
.dyk{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1rem;margin-top:1.1rem}
.dyk-tile{background:linear-gradient(160deg,color-mix(in srgb,var(--a) 12%,transparent),rgba(255,255,255,.02));border:1px solid color-mix(in srgb,var(--a) 40%,transparent);border-radius:var(--r);padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.55rem}
.dyk-stat{font-size:clamp(1.15rem,2.4vw,1.45rem);font-weight:800;line-height:1.2;margin:0;color:#fff;letter-spacing:-.01em}
.dyk-detail{color:#cdd8d2;font-size:.92rem;margin:0;flex:1}
.src{font:600 .78rem var(--mono);color:var(--a);text-decoration:none}.src:hover{color:var(--a2)}
.srcline{margin:.2rem 0 1rem}

/* 3-beat */
.beats{display:flex;flex-direction:column;gap:.7rem;margin:0 0 .6rem}
.beat{margin:0;padding:.75rem .9rem;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.25)}
.beat .blab{display:block;font:700 .66rem var(--mono);letter-spacing:.16em;text-transform:uppercase;margin-bottom:.35rem}
.beat.threat{border-color:color-mix(in srgb,#ff5a5a 45%,transparent);background:linear-gradient(135deg,rgba(255,60,60,.1),transparent 70%)}
.beat.threat .blab{color:#ff8a8a}
.beat.fix{border-color:color-mix(in srgb,var(--a) 40%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--a) 10%,transparent),transparent 70%)}
.beat.fix .blab{color:var(--a)}
.beat.why{border-color:color-mix(in srgb,var(--a2) 40%,transparent)}
.beat.why .blab{color:var(--a2)}
.bhook{font-weight:800;font-size:1.05rem;color:#fff;margin:0 0 .35rem;line-height:1.25}
.beat p{margin:0;color:#cdd8d2;font-size:.92rem}
.pick-threat{color:var(--mut);font-size:.88rem;margin:.2rem 0 .6rem}

/* product images */
.item-art.has-img,.pick-art.has-img{padding:0;height:auto;aspect-ratio:4/3;background:#070b0d;overflow:hidden}
.item-art.has-img img,.pick-art.has-img img{width:100%;height:100%;object-fit:cover;display:block}
.item-art.has-img .num{z-index:2;background:rgba(0,0,0,.55);padding:.15rem .4rem;border-radius:6px}
.illu{position:absolute;right:.55rem;bottom:.45rem;z-index:2;font:600 .62rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7);background:rgba(0,0,0,.55);padding:.2rem .45rem;border-radius:6px}
.pick-art.has-img{width:100%;height:auto;margin-bottom:1rem;border-radius:16px;position:relative}
.item{display:grid;grid-template-columns:minmax(200px,280px) 1fr;gap:0}
.item-art{border-radius:0;border-bottom:0;border-right:1px solid var(--line);min-height:100%}
.item-body{padding:1.15rem 1.25rem 1.3rem}
@media (max-width:700px){.item{grid-template-columns:1fr}.item-art{border-right:0;border-bottom:1px solid var(--line);aspect-ratio:16/10;min-height:0}}