:root{--bg:#0A0F0C;--bg2:#131B16;--tx:#E9F1EC;--mut:#8FA397;--ac:#4ED396;--acx:#0A0F0C;--bd:rgba(233,241,236,.14);--r:12px;--out:cubic-bezier(.16,1,.3,1);--io:cubic-bezier(.65,0,.35,1);box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
:root[data-theme="light"]{--bg:#F4F7F2;--bg2:#E8EEE6;--tx:#0F1A13;--mut:#53685A;--ac:#157A4B;--acx:#F4F7F2;--bd:rgba(15,26,19,.2)}
*{box-sizing:border-box;margin:0}
html{scrollbar-width:thin;scrollbar-color:var(--bd) transparent;scroll-padding-top:calc(72px + env(safe-area-inset-top,0px))}
body{background:var(--bg);color:var(--tx);font:400 16px/1.6 Inter,system-ui,sans-serif;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:60}
h1,h2,h3,.d{font-family:Outfit,system-ui,sans-serif;letter-spacing:-.04em;line-height:.95}
a{color:inherit;text-decoration:none}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.k{font:500 12px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ac)}
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px;border-radius:var(--r);font:600 15px Inter,sans-serif;border:1px solid var(--bd);background:transparent;color:var(--tx);cursor:pointer;transition:transform 200ms var(--out),border-color 200ms}
.btn:hover{border-color:var(--tx);transform:translateY(-2px)}.btn.p{background:var(--ac);color:var(--acx);border-color:var(--ac)}
a:focus-visible,button:focus-visible{outline:2px solid var(--ac);outline-offset:3px}

nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;border-bottom:1px solid transparent;transition:background .38s var(--io),border-color .38s}
nav.on{background:var(--bg);border-color:var(--bd)}
nav .wrap{display:flex;align-items:center;gap:26px;height:64px}
.logo{font:700 24px Outfit,sans-serif;display:flex;align-items:center;gap:10px;margin-right:auto;letter-spacing:-.03em}.logo svg{width:26px;height:26px;stroke:var(--ac)}
nav .l{font-size:14px;color:var(--mut);transition:color .15s}nav .l:hover{color:var(--tx)}
.ib{all:unset;cursor:pointer;width:36px;height:36px;display:grid;place-items:center;color:var(--mut)}.ib:hover{color:var(--tx)}
@media(max-width:700px){nav .l{display:none}}

/* hero: oversized numeral behind, headline stepping off the grid */
.hero{position:relative;padding-top:104px;overflow:hidden}
.num{font:800 clamp(120px,30vw,420px)/.8 Outfit,sans-serif;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px var(--bd);margin-left:-1.2vw;white-space:nowrap}
.num span{color:var(--ac);-webkit-text-stroke:0;font-variant-numeric:tabular-nums}
.hero .in{position:relative;margin-top:calc(-1 * clamp(40px,9vw,150px));display:grid;grid-template-columns:7fr 4fr;gap:40px;align-items:end}
h1{font-size:clamp(46px,8vw,118px);font-weight:700;text-shadow:0 0 30px var(--bg)}
h1 em{font-style:normal;color:var(--ac)}
.side{padding-bottom:12px}.side p{color:var(--mut);font-size:18px;margin-bottom:24px}
@media(max-width:860px){.hero .in{grid-template-columns:1fr}}
.mq{margin-top:72px;display:flex;flex-direction:column;gap:14px;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.row{display:flex;gap:14px;width:max-content;animation:sl 70s linear infinite}
.mq .row:nth-child(2){animation-direction:reverse;animation-duration:85s;margin-left:-120px}
.mq:hover .row{animation-play-state:paused}
@keyframes sl{to{transform:translateX(-50%)}}
.tile{display:flex;align-items:center;gap:14px;width:250px;border:1px solid var(--bd);border-radius:var(--r);background:var(--bg2);padding:14px 16px;transition:border-color .2s}
.tile:hover{border-color:var(--ac)}
.tile i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--bd);font:600 18px Outfit,sans-serif;font-style:normal;color:var(--ac)}
.tile b{display:block;font:600 15px Outfit,sans-serif;line-height:1.2}.tile span{color:var(--mut);font-size:12.5px;line-height:1.3;display:block}

section{padding:130px 0 0}
h2{font-size:clamp(38px,6vw,84px);font-weight:700;max-width:10em}
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--io),transform .7s var(--out)}.rv.in{opacity:1;transform:none}

/* swaps: staggered, each row pushed further right */
.sws{margin-top:56px}
.sw{display:grid;grid-template-columns:minmax(120px,1fr) auto minmax(0,2fr);gap:24px;align-items:baseline;padding:20px 0;border-top:1px solid var(--bd);transition:background .25s}
.sw:last-child{border-bottom:1px solid var(--bd)}
.sw s{font:500 22px Outfit,sans-serif;color:var(--mut);text-decoration-color:var(--bd);text-decoration-thickness:2px;transition:text-decoration-color .2s}
.sw:hover s{text-decoration-color:var(--ac)}
.sw svg{color:var(--ac);transition:transform .3s var(--out)}.sw:hover svg{transform:translateX(8px)}
.sw div{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;transition:transform .3s var(--out)}
.sw b{font:700 clamp(34px,5.5vw,72px)/1 Outfit,sans-serif;letter-spacing:-.04em}
.sw span{color:var(--mut);font-size:14px}
.sw:nth-child(2){margin-left:6%}.sw:nth-child(3){margin-left:12%}.sw:nth-child(4){margin-left:6%}.sw:nth-child(5){margin-left:14%}.sw:nth-child(6){margin-left:4%}.sw:nth-child(7){margin-left:10%}
@media(max-width:720px){.sw{grid-template-columns:1fr auto;margin-left:0!important}.sw div{grid-column:1/-1}}

/* install: big OS names left, terminal overlapping right */
.inst{position:relative;display:grid;grid-template-columns:5fr 6fr;gap:0;align-items:center;margin-top:48px}
.os{display:flex;flex-direction:column;gap:6px}
.os button{all:unset;cursor:pointer;font:700 clamp(52px,9vw,128px)/.95 Outfit,sans-serif;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--bd);transition:color .25s,-webkit-text-stroke-color .25s,transform .35s var(--out)}
.os button:hover{-webkit-text-stroke-color:var(--tx)}.os button.on{color:var(--tx);-webkit-text-stroke:0;transform:translateX(24px)}
.os small{font:400 12px 'JetBrains Mono',monospace;letter-spacing:0;color:var(--ac);margin-left:14px;vertical-align:middle;opacity:0}.os .me small{opacity:1}
.term{margin-left:-6vw;position:relative;z-index:2;border:1px solid var(--bd);border-radius:var(--r);background:var(--bg2);transform:rotate(1.5deg)}
.term .tb{display:flex;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--bd);color:var(--mut);font:400 12.5px 'JetBrains Mono',monospace}
.term pre{padding:28px 24px;min-height:220px;font:400 15px/1.9 'JetBrains Mono',monospace;white-space:pre-wrap;word-break:break-word}
.pr,.ok{color:var(--ac)}.caret{display:inline-block;width:9px;height:1.1em;background:var(--ac);vertical-align:-3px;animation:bl 1s steps(1) infinite}@keyframes bl{50%{opacity:0}}
@media(max-width:860px){.inst{grid-template-columns:1fr;gap:28px}.term{margin-left:0;transform:none}}

/* sources: overlapping discs */
.discs{position:relative;height:min(62vw,560px);margin-top:48px}
.disc{position:absolute;border:1px solid var(--bd);border-radius:50%;display:grid;place-content:center;text-align:center;padding:20px;transition:border-color .25s,background .25s;background:color-mix(in srgb,var(--bg) 70%,transparent)}
.disc:hover{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 9%,var(--bg))}
.disc h3{font-size:clamp(26px,4vw,52px);font-weight:700}.disc p{color:var(--mut);font-size:13px;max-width:14em;margin:8px auto 0}
.d1{left:2%;top:0;width:min(58vw,520px);height:min(58vw,520px)}.d2{left:34%;top:22%;width:min(42vw,380px);height:min(42vw,380px)}.d3{left:62%;top:2%;width:min(28vw,260px);height:min(28vw,260px)}
@media(max-width:700px){.discs{height:auto;display:flex;flex-direction:column;gap:12px}.disc{position:static;width:100%!important;height:auto!important;border-radius:var(--r)}}

.end{padding:150px 0 56px}
.end h2{font-size:clamp(52px,11vw,170px);font-weight:800;max-width:9em}.end em{font-style:normal;color:var(--ac)}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:90px;padding-top:24px;border-top:1px solid var(--bd);color:var(--mut);font-size:13px}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:var(--bd);border-radius:8px}::-webkit-scrollbar-track{background:transparent}
.pgb{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:2px;z-index:70}.pgb i{display:block;height:100%;width:0;background:var(--ac)}
.hud{position:fixed;left:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:40;font:500 11px 'JetBrains Mono',monospace;letter-spacing:.14em;color:var(--mut);display:flex;gap:10px;align-items:center}
.hud::before{content:"";width:28px;height:1px;background:var(--bd)}.hud em{font-style:normal;color:var(--ac)}
.num,.mq{will-change:transform}
@media(max-width:700px){.hud{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:1ms!important}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}

.tile i{position:relative}.tile i img{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);object-fit:contain;background:var(--bg2);border-radius:8px}
a.sw{color:inherit}

/* inner pages */
.page{padding-top:110px;padding-bottom:80px;min-height:100vh}
.ph{font-size:clamp(36px,6vw,72px);font-weight:700;margin-bottom:28px}.ph span{color:var(--ac);font-size:.4em;letter-spacing:0;font-family:'JetBrains Mono',monospace;margin-left:10px}
.tools{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:10px;margin-bottom:28px;align-items:center}
.tools input,.tools select{height:48px;border-radius:var(--r);border:1px solid var(--bd);background:var(--bg2);color:var(--tx);padding:0 14px;font:400 15px Inter,sans-serif;min-width:0}
.tools input:focus,.tools select:focus{outline:2px solid var(--ac);outline-offset:2px}
.chk{font-size:14px;color:var(--mut);display:flex;gap:8px;align-items:center;white-space:nowrap}
@media(max-width:900px){.tools{grid-template-columns:1fr 1fr}.tools input{grid-column:1/-1}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.card{display:flex;flex-direction:column;gap:12px;border:1px solid var(--bd);border-radius:var(--r);background:var(--bg2);padding:18px;transition:border-color .2s,transform .3s var(--out)}
.card:hover{border-color:var(--ac);transform:translateY(-3px)}
.card .top{display:flex;gap:14px;align-items:center}
.ic{flex:none;position:relative;width:52px;height:52px;border-radius:12px;border:1px solid var(--bd);display:grid;place-items:center;font:600 22px Outfit,sans-serif;color:var(--ac);overflow:hidden}
.ic img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:contain;background:var(--bg2)}
.card h3{font:600 18px Outfit,sans-serif;letter-spacing:-.02em;line-height:1.2}
.card p{color:var(--mut);font-size:14px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;font:400 12px 'JetBrains Mono',monospace;color:var(--mut)}
.tag{border:1px solid var(--bd);border-radius:6px;padding:2px 8px}
.sk{border-radius:var(--r);background:linear-gradient(90deg,var(--bg2) 25%,var(--bd) 50%,var(--bg2) 75%);background-size:200% 100%;animation:sh 1.4s ease-in-out infinite}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.empty{grid-column:1/-1;border:1px dashed var(--bd);border-radius:var(--r);padding:60px 20px;text-align:center;color:var(--mut)}
.more{display:flex;justify-content:center;margin-top:32px}
/* detail */
.hd{display:flex;gap:24px;align-items:center;flex-wrap:wrap}.hd .ic{width:96px;height:96px;font-size:40px;border-radius:20px}
.hd h1{font-size:clamp(34px,5vw,64px);font-weight:700}.hd p{color:var(--mut);font-size:18px;max-width:34em}
.facts{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 0}
.cols{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:48px;margin-top:48px;align-items:start}
@media(max-width:900px){.cols{grid-template-columns:minmax(0,1fr);gap:28px}.panel{order:-1;position:static;max-height:none}}
.shots{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;margin-bottom:28px}.shots img{height:260px;width:auto;border-radius:var(--r);border:1px solid var(--bd);flex:none}
.desc p{color:var(--mut);margin-bottom:14px;max-width:44em}
h2.s{font-size:22px;font-weight:600;margin:28px 0 12px}
.panel{border:1px solid var(--bd);border-radius:var(--r);background:var(--bg2);padding:20px;position:sticky;top:90px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.tabs button{all:unset;cursor:pointer;padding:6px 12px;border-radius:8px;border:1px solid var(--bd);font:500 13px Inter,sans-serif;color:var(--mut)}
.tabs button.on{background:var(--ac);color:var(--acx);border-color:var(--ac)}.tabs button:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.m{border-top:1px solid var(--bd);padding:14px 0}.m:first-of-type{border-top:0}.m b{font:600 15px Inter,sans-serif}.m small{display:block;color:var(--mut);font-size:13px;margin:4px 0 10px}
.cmd{display:flex;gap:8px;align-items:stretch}.cmd code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;border:1px solid var(--bd);border-radius:8px;padding:10px 12px;font:400 13px 'JetBrains Mono',monospace;background:var(--bg)}
.cmd button{all:unset;cursor:pointer;border:1px solid var(--bd);border-radius:8px;padding:0 12px;font:500 13px Inter,sans-serif;display:grid;place-items:center}.cmd button:hover{border-color:var(--ac);color:var(--ac)}
.rep{display:flex;gap:8px;flex-wrap:wrap}.rep a{border:1px solid var(--bd);border-radius:8px;padding:4px 10px;font-size:14px}.rep a:hover{border-color:var(--ac)}
.links{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}

.back{display:inline-block;margin-bottom:20px;color:var(--mut);font-size:14px;transition:color .15s}.back:hover{color:var(--ac)}
.wide{width:100%;justify-content:center;margin-bottom:10px}.panel{scroll-margin-top:100px}

.vote{display:inline-flex;align-items:center;border:1px solid var(--bd);border-radius:var(--r);height:52px}
.vote button{all:unset;cursor:pointer;width:46px;height:100%;display:grid;place-items:center;color:var(--mut);transition:color .15s}
.vote button:hover{color:var(--tx)}.vote button.on{color:var(--ac)}.vote button:focus-visible{outline:2px solid var(--ac);outline-offset:-2px;border-radius:var(--r)}
.vote span{min-width:30px;text-align:center;font:500 14px 'JetBrains Mono',monospace}.vote span[hidden]{display:none}
dialog{border:1px solid var(--bd);border-radius:var(--r);background:var(--bg2);color:var(--tx);padding:24px;max-width:340px;width:calc(100% - 32px);margin:auto}
dialog::backdrop{background:rgba(0,0,0,.65)}dialog canvas{display:block;width:100%;border:1px solid var(--bd);border-radius:8px;background:var(--bg)}

[hidden]{display:none!important}

.cols>*{min-width:0}
.shots{max-width:100%;scroll-snap-type:x proximity;overscroll-behavior-x:contain}.shots a{flex:none;scroll-snap-align:start}
.panel{max-height:calc(100vh - 110px);overflow-y:auto}

/* alternatives */
.lede2{color:var(--mut);font-size:18px;max-width:34em;margin:-8px 0 28px}
.alt-tools{grid-template-columns:1fr auto}@media(max-width:700px){.alt-tools{grid-template-columns:1fr}}
.seg{display:flex;border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;height:48px}
.seg button{all:unset;cursor:pointer;padding:0 20px;display:grid;place-items:center;font:500 14px Inter,sans-serif;color:var(--mut);transition:background .2s,color .2s}
.seg button.on{background:var(--ac);color:var(--acx)}.seg button:focus-visible{outline:2px solid var(--ac);outline-offset:-2px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.chips button{all:unset;cursor:pointer;border:1px solid var(--bd);border-radius:8px;padding:5px 12px;font:500 13px Inter,sans-serif;color:var(--mut);transition:border-color .2s,color .2s}
.chips button:hover{color:var(--tx)}.chips button.on{border-color:var(--ac);color:var(--ac)}.chips button:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.ar{display:grid;grid-template-columns:minmax(150px,1fr) 28px minmax(0,2.2fr);gap:20px;align-items:center;padding:18px 0;border-top:1px solid var(--bd);transition:background .2s,padding-left .3s var(--out)}
.ar:last-child{border-bottom:1px solid var(--bd)}.ar:hover{background:var(--bg2);padding-left:14px}
.ar .old s{font:600 24px Outfit,sans-serif;letter-spacing:-.03em;text-decoration-color:var(--bd);text-decoration-thickness:2px;transition:text-decoration-color .2s}
.ar:hover .old s{text-decoration-color:var(--ac)}.ar .old small{display:block;color:var(--mut);font:400 12px 'JetBrains Mono',monospace;margin-top:4px}
.ar>svg{color:var(--ac)}
.alts{display:flex;gap:8px;flex-wrap:wrap}
.achip{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--bd);border-radius:10px;padding:6px 14px 6px 6px;font:600 15px Outfit,sans-serif;transition:border-color .2s,transform .25s var(--out)}
.achip:hover{border-color:var(--ac);transform:translateY(-2px)}
.ic.s{width:30px;height:30px;border-radius:8px;font-size:14px}.ic.s img{inset:2px;width:calc(100% - 4px);height:calc(100% - 4px)}
@media(max-width:700px){.ar{grid-template-columns:1fr;gap:10px}.ar>svg{display:none}}