@font-face{font-family:"Mona Sans";src:url(/fonts/monasans.woff2) format("woff2");font-weight:200 900;font-stretch:75% 125%;font-display:swap}
@font-face{font-family:"Martian Mono";src:url(/fonts/martian.woff2) format("woff2");font-weight:100 800;font-display:swap}
:root{--bg:#0C0D0B;--p1:#141612;--p2:#1C1F19;--line:#2A2D26;--tx:#E9EAE2;--dim:#8C8F84;--lime:#D4FF3A;--red:#FF4A3D;
--sans:"Mona Sans",system-ui,sans-serif;--mono:"Martian Mono",ui-monospace,monospace;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:70px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--tx);font:400 16px/1.55 var(--sans);font-stretch:100%;padding-bottom:78px;overflow-x:hidden}
body::before{content:"";position:fixed;inset:-50%;z-index:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-1%,3%)}}
main,header,footer{position:relative;z-index:1}
a{color:inherit;text-underline-offset:3px}a:hover{color:var(--lime)}button{font:inherit;color:inherit;cursor:pointer}img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--lime);color:#000;padding:8px 14px;z-index:99}.skip:focus{left:8px}
.sec-in,.hero-in,.top-in,.foot-in{width:min(1320px,100% - 36px);margin:0 auto}.narrow{width:min(780px,100% - 36px)}
.kick{font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lime);margin:0 0 16px}
em{font-style:normal;color:var(--lime)}
/* header */
.top{position:sticky;top:0;z-index:30;background:rgba(12,13,11,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:20px;height:58px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 18px/1 var(--sans);font-stretch:112%;letter-spacing:-.02em}.brand b{color:var(--lime);font-weight:800}.lg{width:28px;height:28px}
.status{flex:1;min-width:0;margin:0;font:400 10.5px/1 var(--mono);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:8px}
.status i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);flex:none;animation:blink 2s infinite}@keyframes blink{50%{opacity:.3}}
.nav{display:flex;gap:2px}.nav a{font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;padding:9px 10px;border:1px solid transparent;border-radius:4px;white-space:nowrap}
.nav a:hover,.nav a[aria-current]{border-color:var(--lime);color:var(--lime)}
@media(max-width:900px){.status{display:none}.nav{margin-left:auto;overflow-x:auto;scrollbar-width:none}.brand span{display:none}}
/* hero */
.hero{padding:clamp(34px,6vw,80px) 0 40px}
.h1{font:800 clamp(50px,10vw,172px)/.86 var(--sans);font-stretch:90%;letter-spacing:-.035em;text-transform:uppercase;margin:0 0 30px}
.h1>span{display:block;transition:font-variation-settings .5s var(--ease)}
.h1.sm{font-size:clamp(40px,6.6vw,104px);line-height:.9}
.scan{position:relative;height:clamp(140px,20vw,230px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 26px}
#scan{width:100%;height:100%;display:block;cursor:crosshair}
.scan-k{position:absolute;left:0;right:0;top:8px;display:flex;justify-content:space-between;font:400 10px/1 var(--mono);color:var(--dim);margin:0;pointer-events:none}
.scan-k span{background:rgba(12,13,11,.8);padding:2px 4px}@media(max-width:640px){.scan-k span:last-child{display:none}}
.scan-tip{position:absolute;top:28px;left:0;margin:0;background:var(--lime);color:#000;font:600 11px/1.2 var(--mono);padding:6px 8px;border-radius:3px;opacity:0;pointer-events:none;transition:opacity .15s;max-width:260px}.scan-tip.on{opacity:1}
.hero-b{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:end}@media(max-width:860px){.hero-b{grid-template-columns:1fr}}
.lede{font-size:clamp(17px,1.5vw,21px);line-height:1.5;margin:0;max-width:60ch;color:#CFD1C6}
.ctas{display:flex;flex-wrap:wrap;gap:10px}.hero-b .ctas{justify-content:flex-end}@media(max-width:860px){.hero-b .ctas{justify-content:flex-start}}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--lime);color:#0A0A0A;border:1px solid var(--lime);padding:14px 20px;border-radius:4px;font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;transition:transform .2s var(--ease),background .2s,color .2s}
.btn:hover{transform:translateY(-2px);background:#E8FF8A;color:#000}.btn.ghost{background:transparent;color:var(--tx);border-color:var(--line)}.btn.ghost:hover{border-color:var(--lime);color:var(--lime)}
.btn.sm{padding:10px 14px;font-size:11px}
.lnk{background:none;border:0;padding:0;color:var(--lime);text-decoration:underline;text-underline-offset:3px;font:inherit}
/* sections */
.finder,.rulesec,.cases,.faqs,.gen,.prose,.pagehead{padding:clamp(48px,7vw,100px) 0;border-top:1px solid var(--line)}
.pagehead{border-top:0}.pagehead .ctas{margin-top:24px}
.sec-h{margin-bottom:30px}.sec-h h2{font:800 clamp(34px,5vw,74px)/.92 var(--sans);font-stretch:86%;letter-spacing:-.03em;text-transform:uppercase;margin:0}
/* finder gates */
.gates{display:grid;grid-template-columns:repeat(12,1fr);gap:10px;margin-bottom:24px}
.gate{grid-column:span 12;border:1px solid var(--line);border-radius:8px;padding:16px;margin:0;background:var(--p1)}
.gate legend,.g4-k{font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--dim);padding:0 6px;margin:0}
.gate legend span,.g4-k span{color:#000;background:var(--lime);padding:3px 5px;border-radius:2px;margin-right:6px}
.gate:nth-child(2),.gate:nth-child(3){grid-column:span 4}.g4{grid-column:span 4;display:flex;flex-direction:column;gap:10px;justify-content:space-between}
@media(max-width:900px){.gate:nth-child(2),.gate:nth-child(3),.g4{grid-column:span 12}}
.uses{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:12px}@media(max-width:1000px){.uses{grid-template-columns:repeat(3,1fr)}}@media(max-width:560px){.uses{grid-template-columns:repeat(2,1fr)}}
.use{position:relative}.use input,.seg input,.slip-use input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.use>span{display:grid;gap:6px;height:100%;padding:14px;border:1px solid var(--line);border-radius:6px;background:var(--p2);transition:border-color .2s,background .2s}
.use svg{width:26px;height:26px;color:var(--dim)}.use b{font:700 15px/1.1 var(--sans);font-stretch:95%}.use small{font-size:12px;color:var(--dim);line-height:1.3}
.use:hover>span{border-color:#55594E}.use input:checked+span{border-color:var(--lime);background:#20260F}.use input:checked+span svg{color:var(--lime)}
.use input:focus-visible+span,.seg input:focus-visible+span,.slip-use input:focus-visible+span{outline:2px solid var(--lime);outline-offset:2px}
.seg{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.seg label{position:relative}
.seg span{display:block;padding:9px 12px;border:1px solid var(--line);border-radius:4px;font:500 12px/1 var(--mono);background:var(--p2)}
.seg input:checked+span{background:var(--lime);color:#000;border-color:var(--lime)}
.count{margin:0;font:400 14px/1.3 var(--mono);color:var(--dim)}.count b{display:block;font:800 54px/1 var(--sans);font-stretch:80%;color:var(--lime)}
/* track rows */
.tks{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tks.wipe{animation:wipe .6s var(--ease)}@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.tk{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:10px;align-items:center;border-bottom:1px solid var(--line);padding:0 6px}
.tk-p{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:16px;align-items:center;background:none;border:0;padding:12px 0;text-align:left;min-width:0;cursor:pointer}
.tk-bars{display:flex;align-items:flex-end;gap:2px;height:26px}.tk-bars i{flex:1;height:calc(var(--h)*100%);background:#3B4034;border-radius:1px;transition:background .2s}
.tk-p:hover .tk-bars i,.tk.on .tk-bars i{background:var(--lime)}.tk.on .tk-p.now .tk-bars i{animation:bar 1s ease-in-out infinite alternate}.tk-bars i:nth-child(3n){animation-delay:-.3s}.tk-bars i:nth-child(2n){animation-delay:-.6s}
@keyframes bar{to{transform:scaleY(.4)}}.tk-bars i{transform-origin:bottom}
.tk-t{display:grid;min-width:0}.tk-t b{font:700 17px/1.2 var(--sans);font-stretch:95%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tk-t span{font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk.on .tk-t b{color:var(--lime)}.tk-d{font:400 12px var(--mono);color:var(--dim)}
.tk-ok{font:600 10px/1 var(--mono);letter-spacing:.06em;color:var(--lime);border:1px solid var(--lime);padding:5px 6px;border-radius:2px;transform:rotate(-4deg);opacity:.35}.tk.ok .tk-ok{opacity:1;background:var(--lime);color:#000}
.tk-c,.tk-dl{font:500 11px/1 var(--mono);text-transform:uppercase;padding:9px 10px;border:1px solid var(--line);border-radius:4px;background:none;text-decoration:none}.tk-c:hover,.tk-dl:hover{border-color:var(--lime);color:var(--lime)}
@media(max-width:640px){.tk{grid-template-columns:minmax(0,1fr) auto auto}.tk-ok,.tk-d{display:none}.tk-p{grid-template-columns:46px minmax(0,1fr) auto;gap:10px}.tk-bars{height:20px}}
.tks .none{padding:24px 6px;color:var(--dim)}
.more{margin:18px 0 0;font:400 12px var(--mono);color:var(--dim)}
/* rules */
.rules{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}@media(max-width:1000px){.rules{grid-template-columns:1fr 1fr}}@media(max-width:560px){.rules{grid-template-columns:1fr}}
.rule{border:1px solid var(--line);border-radius:8px;padding:20px;background:var(--p1)}.rule h3{font:800 24px/1 var(--sans);font-stretch:85%;text-transform:uppercase;margin:0 0 10px}.rule p{margin:0;font-size:15px;color:#C9CBC0}
.r-k{font:500 11px/1 var(--mono)!important;color:var(--lime)!important;margin:0 0 14px!important}.rule.n{border-color:#5A2420;background:#1A0F0D}.rule.n .r-k{color:var(--red)!important}
.rules.mini{grid-template-columns:1fr;margin-top:20px}.rules.mini .rule{padding:14px}.rules.mini h3{font-size:17px}
/* cases */
.cs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cs a{display:grid;grid-template-columns:60px 1.2fr 1fr 40px;gap:20px;align-items:center;padding:22px 6px;border-bottom:1px solid var(--line);text-decoration:none;transition:background .25s,padding .3s var(--ease)}
.cs a:hover{background:var(--lime);color:#000;padding-left:20px}.cs-n{font:400 12px var(--mono);color:var(--dim)}.cs a:hover .cs-n{color:#000}
.cs b{font:800 clamp(22px,2.6vw,38px)/1 var(--sans);font-stretch:85%;text-transform:uppercase;letter-spacing:-.02em}.cs span{color:var(--dim)}.cs a:hover span{color:#000}.cs-go{font-size:26px;text-align:right}
@media(max-width:700px){.cs a{grid-template-columns:40px 1fr 30px}.cs a>span:nth-child(3){display:none}}
/* faq */
.faq details{border-top:1px solid var(--line)}.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:18px;align-items:baseline;padding:20px 0;font:700 clamp(18px,1.8vw,24px)/1.25 var(--sans);font-stretch:95%}.faq summary::-webkit-details-marker{display:none}
.faq summary span{font:400 11px var(--mono);color:var(--lime)}.faq summary:hover{color:var(--lime)}.faq p{margin:0 0 20px 40px;max-width:70ch;color:#C9CBC0}
/* use-case pages */
.case-g{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:40px;align-items:start}@media(max-width:900px){.case-g{grid-template-columns:1fr}}
.tips{position:sticky;top:80px;border:1px solid var(--line);border-radius:8px;padding:22px;background:var(--p1)}.tips ol{margin:0;padding-left:20px}.tips li{margin:8px 0;font-size:15px}
/* explainer */
.vs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}@media(max-width:760px){.vs{grid-template-columns:1fr}}
.vs li{border:1px solid var(--line);border-radius:8px;padding:24px;background:var(--p1)}.vs h2{font:800 30px/1 var(--sans);font-stretch:85%;text-transform:uppercase;margin:0 0 10px}.vs-e{color:var(--dim);font-size:14px}
.prose h2{font:800 clamp(26px,3vw,40px)/1 var(--sans);font-stretch:88%;text-transform:uppercase;margin:40px 0 12px}.prose .narrow h2:first-child{margin-top:0}.prose p,.prose li{color:#CFD1C6;max-width:68ch}
/* generator */
.gen-g{display:grid;grid-template-columns:1fr 1.2fr;gap:24px}@media(max-width:860px){.gen-g{grid-template-columns:1fr}}
.fld{display:grid;gap:8px;font:500 11px var(--mono);text-transform:uppercase;color:var(--dim)}
.fld select,.fld input{font:400 15px var(--sans);text-transform:none;background:var(--p2);color:var(--tx);border:1px solid var(--line);border-radius:4px;padding:12px}
.search{max-width:420px;margin-top:24px}
.gen-u{margin-top:16px}
/* slip */
.slip-use{display:flex;flex-wrap:wrap;gap:6px}.slip-use label{position:relative}
.slip-use span{display:flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid var(--line);border-radius:4px;font:500 11px/1 var(--mono);background:var(--p2)}.slip-use svg{width:16px;height:16px}
.slip-use input:checked+span{background:var(--lime);color:#000;border-color:var(--lime)}
.slip-where{font:400 12px var(--mono);color:var(--dim);margin:14px 0 8px}
.slip-txt{white-space:pre-wrap;word-break:break-word;font:400 13px/1.6 var(--mono);background:#050605;border:1px dashed #4A4E42;border-radius:6px;padding:14px;margin:0 0 14px;color:var(--tx)}
.slip{position:fixed;right:16px;bottom:86px;z-index:45;width:min(460px,100% - 32px);max-height:calc(100vh - 120px);overflow:auto;background:var(--p1);border:1px solid var(--lime);border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.6);transform:translateY(20px) scale(.98);opacity:0;transition:transform .35s var(--ease),opacity .25s}
.slip.open{transform:none;opacity:1}.slip-in{padding:18px;position:relative;overflow:hidden}
.slip-h{display:flex;justify-content:space-between;align-items:center;font:600 11px var(--mono);color:var(--lime)}.slip-x{background:none;border:1px solid var(--line);border-radius:4px;width:32px;height:32px;font-size:18px}
.slip-tr{font:800 22px/1.1 var(--sans);font-stretch:90%;margin:12px 0 14px}
.slip-ctl{display:flex;align-items:center;gap:16px}
.hold{position:relative;overflow:hidden;flex:1;background:var(--p2);border:1px solid var(--lime);border-radius:4px;padding:15px;font:600 12px/1 var(--mono);text-transform:uppercase;color:var(--lime);--p:0}
.hold-f{position:absolute;inset:0;background:var(--lime);transform-origin:left;transform:scaleX(var(--p))}.hold-l{position:relative;mix-blend-mode:difference}
.slip-rules{font-size:12.5px;color:var(--dim);margin:14px 0 0}
.stamp{position:absolute;right:16px;top:60px;font:800 44px/1 var(--sans);font-stretch:75%;color:var(--lime);border:4px solid var(--lime);padding:4px 12px;border-radius:6px;transform:rotate(-12deg) scale(2.2);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .2s}
.slip.done .stamp{opacity:.95;transform:rotate(-12deg) scale(1)}
@media(max-width:640px){.slip{right:8px;left:8px;width:auto;bottom:74px}}
/* custom cursor label */
.cur{position:fixed;left:0;top:0;z-index:60;pointer-events:none;background:var(--lime);color:#000;font:700 10px/1 var(--mono);padding:6px 8px;border-radius:2px;opacity:0;transition:opacity .15s}.cur.on{opacity:1}
/* albums */
.alb{margin-bottom:34px}.alb-h{display:flex;align-items:center;gap:14px;margin-bottom:10px}.alb-h img{width:48px;height:48px;aspect-ratio:1/1;object-fit:cover;flex:none;border-radius:4px}.alb-h h2{margin:0;font:800 24px/1 var(--sans);font-stretch:88%;text-transform:uppercase}.alb-h p{margin:2px 0 0;font:400 11px var(--mono);color:var(--dim)}.alb-h .btn{margin-left:auto}
/* footer */
.foot{border-top:1px solid var(--line);padding:50px 0 30px}
.foot-big{font:800 clamp(80px,19vw,300px)/.8 var(--sans);font-stretch:75%;letter-spacing:-.04em;margin:0 0 30px;color:#1E211B;display:flex;align-items:flex-start}
.foot-big span{color:var(--lime);font-size:.4em;margin-left:.1em}
.foot-g{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.foot h2{font:500 11px var(--mono);text-transform:uppercase;color:var(--lime);margin:0 0 10px}.foot ul{list-style:none;margin:0;padding:0}.foot li{margin:5px 0}
.fine{font-size:12px;color:var(--dim);margin-top:30px;max-width:100ch}@media(max-width:640px){.foot-g{grid-template-columns:1fr 1fr}}
/* player */
.pbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:48px minmax(0,1fr) minmax(0,1.3fr) auto auto auto auto auto;gap:14px;align-items:center;padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:#070806;border-top:1px solid var(--lime)}
.pp{width:48px;height:48px;border-radius:4px;background:var(--lime);border:0;color:#000;display:grid;place-items:center}.pp svg{width:16px;height:16px;fill:currentColor}
.pb-txt{display:grid;min-width:0;line-height:1.2}.pb-k{font:500 9.5px var(--mono);color:var(--lime);letter-spacing:.06em}.pb-txt b{font:700 15px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pb-txt span:last-child{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-wave{grid-column:3;grid-row:1;height:24px;background:repeating-linear-gradient(90deg,#2A2D26 0 2px,transparent 2px 4px);position:relative;-webkit-mask:linear-gradient(#000,#000)}
.pb-wave i{position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--lime) 0 2px,transparent 2px 4px);transform-origin:left;transform:scaleX(0)}
.pb-seek{grid-column:3;grid-row:1;opacity:0;width:100%;height:24px;cursor:pointer;margin:0}
.pb-time{font:400 11px var(--mono);color:var(--dim);white-space:nowrap}
.ib{width:38px;height:38px;border:1px solid var(--line);border-radius:4px;background:none;font:400 13px/1 system-ui,sans-serif;letter-spacing:-3px;padding:0 3px 0 0}.ib:hover{border-color:var(--lime);color:var(--lime)}
.pb-cr,.pb-dl{font:600 11px/1 var(--mono);text-transform:uppercase;padding:12px;border:1px solid var(--lime);border-radius:4px;background:none;color:var(--lime);text-decoration:none;white-space:nowrap}.pb-dl{border-color:var(--line);color:var(--tx)}
@media(max-width:860px){.pbar{grid-template-columns:44px minmax(0,1fr) auto auto;gap:10px}.pb-wave,.pb-seek,.pb-time,.ib[data-pc=prev],.pb-dl{display:none}.pp{width:44px;height:44px}}
.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,16px);background:var(--lime);color:#000;font:600 12px var(--mono);padding:10px 14px;border-radius:4px;opacity:0;pointer-events:none;transition:.3s var(--ease);z-index:70}.toast.show{opacity:1;transform:translate(-50%,0)}
.pcnav-busy main{opacity:.5;transition:opacity .2s}.nf{min-height:60vh}