:root{
  --bg:#0a0a0c;
  --bg2:#0f0f12;
  --surface:#1a1a1d;
  --surface2:#141417;
  --raise:#222226;
  --border:#28282c;
  --border2:#3a3a40;
  --text:#ececef;
  --sub:#a3a3ab;
  --dim:#6c6c74;
  --red:#b41919;
  --red2:#d42626;
  --green:#64c878;
  --purple:#aa64ff;
  --display:'Bebas Neue',Impact,'Arial Narrow',sans-serif;
  --body:'Inter',system-ui,'Segoe UI',Arial,sans-serif;
  --mono:'JetBrains Mono',Consolas,'Courier New',monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --head:4.2rem;
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;font-size:clamp(14px,.5vw + 8.4px,26px);-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:1rem;line-height:1.6;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
::selection{background:var(--red);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--border2)}

@keyframes viewIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
.page{animation:viewIn .45s var(--ease) both}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.reveal.in{opacity:1;transform:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--body);font-weight:800;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;padding:.85rem 1.4rem;background:var(--surface);border:1px solid var(--border2);color:var(--text);cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform .12s var(--ease);-webkit-user-select:none;user-select:none;white-space:nowrap}
.btn:hover{background:var(--raise);border-color:#4a4a52}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn-red{background:var(--red);border-color:var(--red);color:#fff}
.btn-red:hover{background:var(--red2);border-color:var(--red2)}
.btn-white{background:var(--text);border-color:var(--text);color:var(--bg)}
.btn-white:hover{background:#fff;border-color:#fff}
.btn-big{font-size:1.05rem;padding:1.1rem 2rem}

.wrap{max-width:110rem;margin:0 auto;padding:0 2rem}
.label{display:block;font-weight:800;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:.9rem}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;padding-bottom:.8rem;margin-bottom:1.3rem;border-bottom:1px solid var(--border)}
.sec-head h2{font-family:var(--display);font-weight:400;font-size:3.1rem;line-height:1;letter-spacing:.03em}
.sec-head p{color:var(--sub);font-size:1.02rem;margin-top:.35rem}
.sec-head .more{font-weight:800;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding-bottom:.4rem;white-space:nowrap;transition:color .18s,letter-spacing .25s var(--ease)}
.sec-head .more:hover{color:var(--red2);letter-spacing:.16em}

.foot{border-top:1px solid var(--border);margin-top:5rem}
.foot-in{max-width:110rem;margin:0 auto;padding:2.4rem 2rem 3rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2rem;color:var(--dim);font-size:.9rem}
.foot-in nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.foot a{color:var(--sub);transition:color .18s}
.foot a:hover{color:var(--red2)}
.foot .mono{font-family:var(--mono);font-size:.85rem}

kbd{display:inline-block;font-family:var(--mono);font-size:.82em;font-weight:700;line-height:1.4;padding:.08em .5em;margin:0 .08em;color:#fff;background:var(--raise);border:1px solid var(--border2);border-bottom-width:3px;vertical-align:.08em}
code{font-family:var(--mono);font-size:.86em;font-weight:700;padding:.12em .5em;color:#fff;background:var(--bg2);border:1px solid var(--border2);white-space:nowrap}

#toast{position:fixed;left:50%;bottom:2rem;z-index:300;transform:translate(-50%,1.5rem);opacity:0;pointer-events:none;padding:.9rem 1.5rem;background:var(--surface);border:1px solid var(--border2);font-weight:700;font-size:.95rem;transition:opacity .25s,transform .3s var(--ease);box-shadow:0 12px 30px rgba(0,0,0,.5)}
#toast.on{opacity:1;transform:translate(-50%,0)}
#toast.ok{border-color:var(--green);color:var(--green)}
#toast.bad{border-color:var(--red2);color:#ff7b7b}

@media (max-width:700px){
  html{font-size:15px}
  :root{--head:3.8rem}
  .wrap{padding:0 1rem}
  .sec-head h2{font-size:2.4rem}
  .foot-in{padding:2rem 1rem 2.6rem}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}
.top{position:-webkit-sticky;position:sticky;top:0;z-index:50;height:var(--head);display:flex;align-items:center;gap:1.1rem;padding:0 2rem;background:rgba(10,10,12,.94);border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.brand{display:flex;align-items:baseline;gap:.7rem;flex-shrink:0;transition:opacity .2s}
.brand:hover{opacity:.8}
.brand b{font-family:var(--display);font-weight:400;font-size:2.5rem;letter-spacing:.04em;line-height:1}
.brand span{font-family:var(--display);font-size:1.35rem;letter-spacing:.12em;color:var(--sub);line-height:1;white-space:nowrap}
.links{display:flex;align-items:center;gap:.15rem;margin-left:auto;overflow:visible}
.links a{position:relative;font-weight:600;font-size:.86rem;letter-spacing:.04em;text-transform:uppercase;color:var(--sub);padding:.55rem .75rem;white-space:nowrap;transition:color .18s,background .18s}
.links a:hover{color:var(--text);background:var(--surface)}
.links a.on{color:var(--text);background:var(--surface)}
.ip{display:flex;align-items:center;gap:.75rem;flex-shrink:0;padding:.5rem .95rem;border:1px solid var(--border2);background:var(--surface2);font-family:var(--mono);font-size:.85rem;color:var(--text);cursor:pointer;transition:border-color .18s,background .18s,transform .12s}
.ip em{font-style:normal;font-family:var(--body);font-weight:700;font-size:.72rem;letter-spacing:.1em;color:var(--dim);transition:color .18s}
.ip:hover{border-color:var(--red);background:var(--surface)}
.ip:hover em{color:var(--red2)}
.ip:active{transform:scale(.97)}
.ip.ok,.ip.copied{border-color:var(--green)}
.ip.ok em,.ip.copied em{color:var(--green)}
.join{flex-shrink:0;padding:.62rem 1.1rem;font-size:.82rem}
.menu-toggle{display:none;flex-shrink:0;width:2.9rem;height:2.9rem;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:var(--surface2);border:1px solid var(--border2);cursor:pointer;transition:border-color .18s,background .18s}
.menu-toggle:hover{border-color:var(--text);background:var(--surface)}
.menu-toggle i{display:block;width:1.15rem;height:2px;background:var(--text);transition:transform .25s var(--ease)}
.menu-open .menu-toggle i:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-open .menu-toggle i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mnav{display:none;position:fixed;left:0;right:0;top:var(--head);bottom:0;z-index:60;overflow-y:auto;background:var(--bg);padding:1rem 1.2rem 2rem}
.menu-open .mnav{display:block;animation:mnavIn .28s var(--ease) both}
@keyframes mnavIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.mnav a:not(.btn){display:block;padding:1rem .4rem;font-family:var(--display);font-size:2.1rem;letter-spacing:.05em;line-height:1;color:var(--sub);border-bottom:1px solid var(--border);transition:color .18s,padding .22s var(--ease)}
.mnav a:not(.btn):hover,.mnav a.on{color:var(--text);padding-left:.9rem}
.mnav .ip{width:100%;margin-top:1.4rem;justify-content:space-between;padding:1rem 1.1rem;font-size:1rem}
.mnav .ip em{display:inline}
.mnav .btn{display:flex;width:100%;margin-top:.6rem;padding:1.05rem;font-size:1rem}
body.leaving .page,body.leaving .foot{opacity:0;transform:translateY(8px);transition:opacity .17s ease,transform .17s ease}
@media (max-width:1500px){.top .ip em{display:none}}
@media (max-width:1240px){.links{display:none}.menu-toggle{display:flex}.top .ip{margin-left:auto}}
@media (max-width:700px){
  .top{padding:0 1rem;gap:.55rem}
  .brand span{display:none}
  .top .ip{font-size:.74rem;padding:.45rem .6rem}
  .join{padding:.5rem .65rem;font-size:.68rem;letter-spacing:.04em}
}
@media (max-width:440px){.top .ip{display:none}.join{margin-left:auto}}