@font-face{font-family:"Sora";src:url(../fonts/sora.woff2) format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter.woff2) format("woff2");font-weight:400 600;font-display:swap}
:root{--bg:#0c0a14;--p1:#15121f;--p2:#1d1830;--line:#2b2440;--ink:#efedf6;--mut:#a8a3bd;--g:#39f28b;--v:#a98bff;--hd:"Sora","Segoe UI",system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 "Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-text-size-adjust:100%}
a{color:var(--g);text-underline-offset:3px}
a:hover{color:#8dffbf}
:focus-visible{outline:2px solid var(--g);outline-offset:3px}
img{max-width:100%}
h1,h2,h3,h4{font-family:var(--hd);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.w{max-width:1240px;margin:0 auto;padding:0 24px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--g);color:#06120b;padding:8px 14px;border-radius:8px;z-index:20;font-weight:600}
.skip:focus{top:10px}
.kicker,.mono{font:600 11.5px/1.4 var(--hd);text-transform:uppercase;letter-spacing:.14em;color:var(--v)}
/* header: dark sticky bar with chips */
.hd{position:sticky;top:0;z-index:10;background:rgba(12,10,20,.94);border-bottom:1px solid var(--line)}
@supports (backdrop-filter:blur(8px)){.hd{background:rgba(12,10,20,.82);backdrop-filter:blur(8px)}}
.hd-in{display:flex;align-items:center;gap:22px;min-height:62px}
.logo{font:700 21px/1 var(--hd);color:var(--ink);text-decoration:none;letter-spacing:-.04em}
.logo em{font-style:normal;color:var(--v)}
.logo span{color:var(--g)}
.chips{margin-left:auto}
.chips ul{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.chips a{display:block;padding:6px 13px;border:1px solid var(--line);border-radius:999px;color:var(--mut);text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap}
.chips a:hover{color:var(--ink);border-color:var(--v)}
.chips a.on{background:var(--g);border-color:var(--g);color:#06120b;font-weight:600}
.find-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--p1);color:var(--ink);cursor:pointer}
.find-btn[aria-expanded="true"]{background:var(--g);color:#06120b;border-color:var(--g)}
.find-btn[hidden]{display:none}
.find{border-top:1px solid var(--line);background:var(--p1);padding:14px 0 16px}
.find-f{max-width:640px;margin-left:auto}
.find-f label{display:block;font-size:13px;color:var(--mut);margin-bottom:4px}
.find-f input{width:100%;font:inherit;font-size:16px;padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.find-r{list-style:none;margin:8px 0 0;padding:0}
.find-r a{display:block;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--ink)}
.find-r a:hover,.find-r a:focus{background:var(--p2)}
.find-r small{display:block;color:var(--v);font-size:12px}
.find-s{margin:6px 0 0;font-size:13px;color:var(--mut)}
/* home */
.intro{display:grid;grid-template-columns:1.35fr 1fr;gap:44px;align-items:end;padding:44px 0 26px}
.intro h1{font-size:clamp(32px,4.6vw,50px);line-height:1.06;margin:8px 0 0;letter-spacing:-.035em}
.intro h1 span{color:var(--g)}
.intro p{margin:0;color:var(--mut);font-size:17.5px}
/* carousel with thumbnail nav */
.fx{margin:6px 0 46px}
.fx-view{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--p1)}
.fx-reel{display:flex;list-style:none;margin:0;padding:0;overflow-x:auto;scroll-snap-type:x mandatory}
.fx-slide{flex:0 0 100%;scroll-snap-align:start;position:relative}
.fx-slide a{display:block;color:var(--ink);text-decoration:none}
.fx-slide img{display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:560px;object-fit:cover}
.fx-cap{position:absolute;left:0;right:0;bottom:0;padding:70px 32px 28px;background:linear-gradient(180deg,transparent,rgba(8,6,14,.92) 62%);display:flex;flex-direction:column;gap:6px}
.fx-cap .kicker{color:var(--g)}
.fx-t{font:700 clamp(22px,3vw,36px)/1.15 var(--hd);letter-spacing:-.03em;max-width:24ch}
.fx-d{color:#d6d2e4;max-width:58ch;font-size:15.5px}
.fx-slide a:hover .fx-t,.fx-slide a:focus .fx-t{text-decoration:underline;text-decoration-color:var(--g)}
.fx-bar{display:none}
.js .fx-reel{overflow:visible;scroll-snap-type:none;transition:transform .55s cubic-bezier(.3,.7,.2,1)}
.js .fx-bar{display:flex;align-items:center;gap:10px;margin-top:12px}
.fx-step,.fx-play{flex:none;height:44px;min-width:44px;border-radius:10px;border:1px solid var(--line);background:var(--p1);color:var(--ink);font:600 14px var(--hd);cursor:pointer}
.fx-step span{font-size:26px;line-height:1}
.fx-play{padding:0 14px}
.fx-step:hover,.fx-play:hover{border-color:var(--g)}
.fx-thumbs{display:flex;gap:8px;list-style:none;margin:0;padding:0;flex:1;min-width:0}
.fx-thumbs li{flex:1;min-width:0}
.fx-th{display:block;width:100%;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:none;cursor:pointer;opacity:.55}
.fx-th img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.fx-th:hover{opacity:.85}
.fx-th[aria-current="true"]{opacity:1;border-color:var(--g)}
.fx-n{margin:0;font:600 13px var(--hd);color:var(--mut);min-width:42px;text-align:right}
@media (prefers-reduced-motion:reduce){.js .fx-reel{transition:none}}
/* latest + side */
.hgrid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:48px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);margin-bottom:18px}
.sec-h h2{margin:0 0 10px;font-size:24px}
.more{font-size:14px}
.lr-list{list-style:none;margin:0;padding:0}
.lr{display:grid;grid-template-columns:220px minmax(0,1fr);gap:22px;padding:18px 0;border-bottom:1px solid var(--line)}
.lr:first-child{padding-top:4px}
.lr-th{display:block;border-radius:12px;overflow:hidden;align-self:start}
.lr-th img,.glyph{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.glyph{display:grid;place-items:center;font:700 26px var(--hd);letter-spacing:.04em;color:#06120b}
.g-guides{background:linear-gradient(135deg,var(--g),#b8f7d3)}
.g-apps{background:linear-gradient(135deg,var(--v),#d9ccff)}
.g-games{background:linear-gradient(135deg,#ffcf5a,#ffe9b0)}
.lr-k{margin:0;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.lr-k span[class^="sec-"]{font-size:12.5px;color:var(--mut)}
.lr h3{font-size:20px;margin:4px 0 6px}
.lr h3 a{color:var(--ink);text-decoration:none}
.lr h3 a:hover{color:var(--g)}
.lr-b>p:last-child{margin:0;color:var(--mut);font-size:15px;line-height:1.55}
.hside>section{background:var(--p1);border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin-bottom:22px}
.hside h2{font-size:18px;margin:0 0 12px}
.cloud ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.cloud a{text-decoration:none;color:var(--mut)}
.cloud a:hover{color:var(--g)}
.cloud .w1{font-size:14px}
.cloud .w2{font-size:17px;color:#d6d2e4}
.cloud .w3{font:600 21px var(--hd);color:var(--ink)}
.sp-i{margin:-6px 0 12px;color:var(--mut);font-size:14px}
.sp-card{border-top:1px solid var(--line);padding:12px 0 6px}
.sp-card h3{font-size:15.5px;margin:0 0 8px}
.sp-card h3 a{color:var(--ink)}
.sp-card dl{margin:0;display:grid;gap:6px}
.sp-card dl div{display:grid;grid-template-columns:78px 1fr;gap:8px;font-size:14px;line-height:1.45}
.sp-card dt{font:600 11px/1.6 var(--hd);text-transform:uppercase;letter-spacing:.1em;color:var(--g)}
.sp-card dd{margin:0}
/* masonry */
.mz-wrap{margin:40px 0 70px}
.mz{columns:3 300px;column-gap:18px}
.mz>*{break-inside:avoid;margin:0 0 18px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--p1)}
.mz-pic a{display:block;color:var(--ink);text-decoration:none}
.mz-pic img{display:block;width:100%;height:auto}
.mz-pic:nth-child(3) img{aspect-ratio:3/4;object-fit:cover}
.mz-pic figcaption{padding:12px 16px 14px;color:var(--mut);font-size:14.5px}
.mz-pic b{display:block;font:700 18px var(--hd);color:var(--ink)}
.mz-pic a:hover b{color:var(--g)}
.mz-txt{padding:20px 22px}
.mz-txt h3{margin:0 0 8px;font-size:18px}
.mz-txt h3 a{color:var(--ink)}
.mz-txt p{margin:0;color:var(--mut);font-size:15px}
.mz-note{background:var(--p2);border-color:#4a3c78}
/* hub and article pages */
.art{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;margin:40px auto 72px}
.art>article{min-width:0;max-width:760px}
.art h1{font-size:clamp(30px,4vw,44px);line-height:1.1;margin:8px 0 16px;letter-spacing:-.035em}
.art .lede{font-size:19px;color:#d6d2e4}
.t-article .art article{counter-reset:st}
.t-article .art h2{counter-increment:st;display:flex;gap:14px;align-items:baseline;font-size:25px;margin-top:1.9em}
.t-article .art h2::before{content:counter(st,decimal-leading-zero);flex:none;font:700 13px/1 var(--hd);color:#06120b;background:var(--g);border-radius:6px;padding:6px 7px;transform:translateY(-3px)}
.art h2{font-size:25px;margin-top:1.8em}
.art h3{font-size:19px;color:var(--v)}
.art ol{padding-left:0;list-style:none;counter-reset:li}
.art ol>li{counter-increment:li;position:relative;padding-left:44px;margin:12px 0}
.art ol>li::before{content:counter(li);position:absolute;left:0;top:1px;width:28px;height:28px;border-radius:50%;border:2px solid var(--g);display:grid;place-items:center;font:700 13px/1 var(--hd);color:var(--g)}
.art ul li{margin:6px 0}
.art ul li::marker{color:var(--g)}
.art table{width:100%;border-collapse:collapse;font-size:15px;margin:1.3em 0}
.art th{font:600 11.5px var(--hd);text-transform:uppercase;letter-spacing:.1em;color:var(--g);text-align:left;border-bottom:2px solid var(--line);padding:8px}
.art td{border-bottom:1px solid var(--line);padding:10px 8px;vertical-align:top}
.art tbody tr:nth-child(odd) td{background:rgba(255,255,255,.02)}
.art blockquote{margin:1.7em 0;border-left:4px solid var(--g);background:var(--p1);border-radius:0 14px 14px 0;padding:8px 22px}
.art blockquote p:first-child strong{font:700 12px var(--hd);text-transform:uppercase;letter-spacing:.12em;color:var(--g)}
.spec{background:var(--p1);border:1px solid var(--line);border-radius:16px;padding:0 20px 18px;position:sticky;top:84px;align-self:start;font-size:14.5px;overflow:hidden}
.spec h4{margin:0 -20px 6px;padding:12px 20px;background:var(--g);color:#06120b;font-size:13px;text-transform:uppercase;letter-spacing:.12em}
.spec h4+ul{margin-top:8px}
.spec h4[style]{background:none;color:var(--ink);padding:0;margin:18px 0 4px;text-transform:none;letter-spacing:0;font-size:15px}
.spec dl{margin:0}
.spec dt{font:600 11px var(--hd);text-transform:uppercase;letter-spacing:.12em;color:var(--v);margin-top:12px}
.spec dd{margin:2px 0 0}
.spec ul{padding-left:18px;margin:6px 0 0}
.spec li{margin:5px 0}
.t-hub .art .list{counter-reset:h;display:block;margin:24px 0 34px;border-top:1px solid var(--line)}
.t-hub .tile{counter-increment:h;display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:16px;padding:18px 4px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.t-hub .tile::before{content:counter(h,decimal-leading-zero);grid-row:1/4;font:700 26px/1 var(--hd);color:var(--line);padding-top:4px}
.t-hub .tile:hover::before{color:var(--g)}
.t-hub .tile h3{margin:4px 0;font-size:20px;color:var(--ink)}
.t-hub .tile:hover h3{color:var(--g)}
.t-hub .tile p{margin:0;color:var(--mut);font-size:15px;line-height:1.55}
.t-hub .tile .kicker,.t-hub .tile h3,.t-hub .tile p{grid-column:2}
.by{color:var(--mut);font-size:14px;border-top:1px solid var(--line);margin-top:40px;padding-top:12px}
picture{display:block}
.pic{margin:1.2rem 0 1.8rem}
.pic img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:16px;border:1px solid var(--line);background:var(--p1)}
.pic.wide img{aspect-ratio:21/9}
.prose{max-width:720px;margin:60px 0 80px}
/* forms */
form.f{background:var(--p1);border:1px solid var(--line);border-radius:16px;padding:22px;margin:16px 0 22px}
form.f label{display:block;font-size:14px;font-weight:600;color:var(--ink)}
form.f input,form.f textarea,form.f select{width:100%;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:inherit;margin:5px 0 14px}
form.f button{background:var(--g);color:#06120b;border:0;border-radius:10px;padding:11px 24px;font:700 15px var(--hd);cursor:pointer}
.form-error{color:#ff8a80;font-size:14px;margin:4px 0 10px;min-height:1em}
[aria-invalid="true"]{border-color:#ff8a80!important}
/* footer with tag index */
.ft{border-top:1px solid var(--line);background:#08070e;color:var(--mut);font-size:14.5px;padding:44px 0 28px}
.ft-in{display:grid;grid-template-columns:1.4fr .8fr .8fr 1.6fr;gap:32px}
.ft h2{font:600 12px var(--hd);text-transform:uppercase;letter-spacing:.14em;color:var(--ink);margin:4px 0 12px}
.ft ul{list-style:none;margin:0;padding:0}
.ft-col li{margin:0 0 6px}
.ft a{color:#d6d2e4;text-decoration:none}
.ft a:hover{color:var(--g);text-decoration:underline}
.ft-brand p{margin:12px 0 0;max-width:34ch}
.ft-tags ul{display:flex;flex-wrap:wrap;gap:6px}
.ft-tags a{display:block;font-size:13px;padding:3px 10px;border:1px solid var(--line);border-radius:6px}
.ft-legal{grid-column:1/-1;margin:8px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:13px}
/* responsive */
@media (max-width:1000px){.hgrid,.art{grid-template-columns:minmax(0,1fr)}.spec{position:static}.intro{grid-template-columns:1fr;gap:16px}.ft-in{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
 .w{padding:0 18px}
 .hd-in{flex-wrap:wrap;gap:0 12px;min-height:0;padding-top:12px}
 .find-btn{margin-left:auto}
 .chips{order:3;flex:0 0 calc(100% + 36px);margin:10px -18px 0;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
 .chips::-webkit-scrollbar{display:none}
 .chips ul{padding:0 18px 12px;width:max-content}
 .chips li{scroll-snap-align:start}
 .fx-cap{position:static;background:var(--p1);padding:16px 18px 18px}
 .fx-d{display:none}
 .fx-thumbs{display:none}
 .js .fx-bar{justify-content:flex-start}
 .fx-n{margin-left:auto}
 .lr{grid-template-columns:120px minmax(0,1fr);gap:14px}
 .lr h3{font-size:17px}
 .lr-b>p:last-child{display:none}
 .glyph{font-size:16px}
 .ft-in{grid-template-columns:1fr}
 .art table{display:block;overflow-x:auto}
 .t-article .art h2{font-size:22px}
}
@media (max-width:420px){.lr{grid-template-columns:96px minmax(0,1fr)}}