:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--f-h);margin:0;text-wrap:balance;letter-spacing:-.01em}
.wrap{max-width:1240px;margin-inline:auto;padding-left:var(--gl);padding-right:var(--gr)}
.muted{color:var(--muted)}
.accent{color:var(--sky)}
.sel{user-select:all}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-m)}
svg.i{width:18px;height:18px;flex:none}
.lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.av{display:grid;place-items:center;border-radius:50%;flex:none;font-family:var(--f-h);font-weight:700;color:#fff;background:linear-gradient(135deg,hsl(var(--h,215) 80% 56%),hsl(calc(var(--h,215) + 30) 65% 28%))}
.page{animation:pageIn .6s var(--ease)}
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}}
body.leaving .page{opacity:0;transform:translateY(-8px);transition:opacity .22s,transform .22s}

.sec{padding-block:clamp(70px,9vw,120px)}
.phead{padding:130px 0 34px;position:relative}
.phead::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 100% at 50% 0%,rgba(47,123,255,.13),transparent 70%)}
.crumb{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.crumb svg{width:12px;height:12px;transform:rotate(-90deg)}
.phead h1{font-size:clamp(30px,4vw,46px);font-weight:700;margin-top:10px}
.phead p{color:var(--muted);max-width:62ch;margin:12px 0 0}

.js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.rm *,.rm *::before,.rm *::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
.rm .rv{opacity:1!important;transform:none!important}

.pv{animation:pvIn .5s var(--ease)}
@keyframes pvIn{from{opacity:0;transform:translateY(12px)}}
.cd{border-radius:16px;background:var(--card);border:1px solid var(--line);padding:20px}
.cd h3{font-size:16px;font-weight:600;margin-bottom:4px}
.cd .sub{color:var(--muted);font-size:13px;margin:0 0 16px}
.cd-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stack{display:grid;gap:14px}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.g2,.g3,.g4{grid-template-columns:1fr}}
.tile{display:flex;gap:14px;align-items:center;padding:16px;border-radius:14px;background:var(--card);border:1px solid var(--line);transition:transform .4s var(--ease),border-color .3s}
.tile:hover{transform:translateY(-3px);border-color:var(--line-2)}
.tile .ti{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--c,var(--sky)) 14%,transparent);color:var(--c,var(--sky))}
.tile .ti svg{width:19px;height:19px}
.tile small{display:block;font-size:12px;color:var(--muted);font-weight:600}
.tile b{font-family:var(--f-h);font-weight:600;font-size:17px;font-variant-numeric:tabular-nums}
.c-g{--c:var(--win)}.c-y{--c:var(--amber)}.c-v{--c:var(--violet)}.c-r{--c:var(--lose)}.c-b{--c:var(--sky)}
.empty{display:grid;justify-items:center;text-align:center;gap:8px;padding:50px 20px;color:var(--muted)}
.empty .ti{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:var(--p-soft);color:var(--sky)}
.empty b{color:var(--text)}
.flash-up{animation:fup .8s var(--ease)}
@keyframes fup{30%{color:var(--win);transform:scale(1.06)}}
.flash-dn{animation:fdn .8s var(--ease)}
@keyframes fdn{30%{color:var(--lose)}}
.cd small.k,small.k{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--sky)}
.stars{display:inline-flex;gap:2px}
.stars svg{width:16px;height:16px;color:rgba(255,255,255,.14)}
.stars svg.on{color:var(--amber)}

.prose{max-width:760px}
.prose h2{font-size:20px;font-weight:700;margin:34px 0 10px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:#c3c9d4;line-height:1.75}
.prose ul{padding-left:20px;display:grid;gap:6px}

.nf{min-height:100svh;display:grid;place-items:center;text-align:center;padding:120px 0 60px}
.nf-code{display:block;font-family:var(--f-h);font-size:clamp(90px,16vw,170px);line-height:1;font-weight:700;background:linear-gradient(180deg,#fff,rgba(140,196,255,.25));-webkit-background-clip:text;background-clip:text;color:transparent}
.nf h1{font-size:clamp(24px,3vw,34px);margin-top:12px}
.nf p{color:var(--muted);margin:10px 0 26px}
.nf-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.av{position:relative;overflow:hidden}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.av:has(img){background:var(--bg-2)}

html,body{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}