:root{
  --bg-0:#050516;
  --bg-1:#090a1e;
  --bg-2:#0d102c;
  --bg-3:#12163c;
  --bg-4:#171c4d;
  --ink-0:#ffffff;
  --ink-1:#e9edff;
  --ink-2:#c6d0ff;
  --ink-3:#a9b7ff;
  --muted:#93a1d9;
  --muted-2:#7f8ac4;
  --pri:#6b7bff;
  --pri-2:#4d63ff;
  --pri-3:#3f86ff;
  --acc:#00e0ff;
  --acc-2:#70f0ff;
  --ok:#21d190;
  --warn:#ffd166;
  --err:#ff6b81;
  --ring:0 0 0 3px rgba(0,224,255,.28);
  --ring-strong:0 0 0 4px rgba(77,99,255,.35);
  --shadow-1:0 8px 22px rgba(0,0,0,.35);
  --shadow-2:0 14px 36px rgba(0,0,0,.45),0 2px 10px rgba(0,0,0,.35);
  --shadow-3:0 24px 70px rgba(0,0,0,.55),0 4px 14px rgba(0,0,0,.4);
  --rad-3xl:26px;
  --rad-2xl:22px;
  --rad-xl:18px;
  --rad-lg:14px;
  --rad-md:12px;
  --rad-sm:10px;
  --ease-1:cubic-bezier(.22,.61,.36,1);
  --ease-2:cubic-bezier(.16,1,.3,1);
  --t-1:180ms;
  --t-2:260ms;
  --t-3:380ms;
  --glass-a:rgba(18,22,70,.72);
  --glass-b:rgba(18,22,70,.58);
  --glass-line:rgba(107,123,255,.25);
  --glass-line-2:rgba(107,123,255,.18);
  --grad-1:radial-gradient(1200px 800px at 10% -20%, rgba(0,224,255,.12), transparent 60%);
  --grad-2:radial-gradient(1000px 900px at 110% 10%, rgba(77,99,255,.13), transparent 55%);
  --grad-3:linear-gradient(180deg,var(--bg-0),var(--bg-1) 35%,var(--bg-2) 100%);

  --mx:0;   /* normalized [-1..1] by JS */
  --my:0;
  --gx:50vw;/* raw mouse px */
  --gy:50vh;

  --tiltX:calc(var(--my)*-8deg);
  --tiltY:calc(var(--mx)* 8deg);
  --parallax-a-x:calc(var(--mx)*-24px);
  --parallax-a-y:calc(var(--my)*-18px);
  --parallax-b-x:calc(var(--mx)*-36px);
  --parallax-b-y:calc(var(--my)*-26px);
  --z-a:translateZ(-120px);
  --z-b:translateZ(-260px);

  --tab-x:0px;
  --tab-w:0px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth;text-size-adjust:100%}
body{
  margin:0;color:var(--ink-0);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica,Arial,"Noto Sans";
  background:var(--grad-1),var(--grad-2),var(--grad-3);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block}

a{
  color:var(--ink-2);text-decoration:none;
  background:
    linear-gradient(currentColor,currentColor) left 1em bottom/0 2px no-repeat;
  transition:
    color var(--t-1) var(--ease-1),
    background-size .25s var(--ease-1);
}
a:hover{color:#fff;background-size:100% 2px}

.app{position:relative;z-index:1;height:100%;display:block}

.content{
  position:relative;height:100vh;overflow:auto;
  padding:32px clamp(16px,4vw,56px);
  scrollbar-gutter:stable;backface-visibility:hidden;
  perspective:1000px;transform-style:preserve-3d;
  background-image:repeating-linear-gradient(0deg,transparent 0 8px,rgba(255,255,255,.012) 8px 9px);
  animation:scanlines 8s linear infinite;
}
@keyframes scanlines{to{background-position:0 100%}}

.content::-webkit-scrollbar{width:12px}
.content::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#2a2f66,#1d2255);
  border-radius:999px;border:3px solid transparent;background-clip:padding-box
}

body::before,
body::after{
  content:"";
  position:fixed;left:0;top:0;pointer-events:none;z-index:0
}
body::before{
  width:42vw;height:42vw;border-radius:50%;
  transform:translate(calc(var(--gx) - 21vw), calc(var(--gy) - 21vw)) translateZ(-200px);
  background:radial-gradient(closest-side, rgba(0,224,255,.38), transparent 62%);
  filter:blur(50px) saturate(1.05);opacity:.18;
  transition:transform 360ms var(--ease-2),opacity 220ms var(--ease-2)
}
body::after{
  width:18vw;height:18vw;border-radius:50%;
  transform:translate(calc(var(--gx) - 9vw), calc(var(--gy) - 9vw)) translateZ(-120px);
  background:
    radial-gradient(closest-side, rgba(112,240,255,.55), rgba(112,240,255,.15) 40%, transparent 65%),
    radial-gradient(closest-side, rgba(107,123,255,.35), transparent 70%);
  filter:blur(24px);opacity:.22;
  transition:transform 300ms var(--ease-2),opacity 200ms var(--ease-2)
}

.toggle,.sidebar{display:none!important}

.bgPattern,
.uiPattern{position:absolute;inset:0;z-index:0;pointer-events:none;will-change:transform}
.bgPattern{transition:transform 340ms var(--ease-2);transform:translate(var(--parallax-a-x), var(--parallax-a-y)) var(--z-a)}
.uiPattern{
  opacity:.18;mix-blend-mode:overlay;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 2px,transparent 2px 14px);
  transition:transform 420ms var(--ease-2);transform:translate(var(--parallax-b-x), var(--parallax-b-y)) var(--z-b)
}
.bgPattern::before,
.bgPattern::after{
  content:"";position:absolute;left:-20%;top:-20%;width:140%;height:140%;
  background-repeat:repeat;opacity:.35
}
.bgPattern::before{
  background-image:radial-gradient(circle at 1px 1px,rgba(100,120,255,.30) 1px,transparent 1.2px);
  background-size:28px 28px;animation:bgA 48s linear infinite
}
.bgPattern::after{
  background-image:radial-gradient(circle at 1px 1px,rgba(0,224,255,.22) 1.1px,transparent 1.3px);
  background-size:44px 44px;opacity:.22;animation:bgB 76s linear infinite
}
@keyframes bgA{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(160px,110px,0)}}
@keyframes bgB{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-180px,-120px,0)}}

.hero{
  position:relative;z-index:1;display:grid;place-items:center;text-align:center;
  padding:8px 0 24px;transform:rotateX(var(--tiltX)) rotateY(var(--tiltY));
  animation:floatY 8s ease-in-out infinite;
}
@keyframes floatY{0%,100%{transform:translateY(0) rotateX(var(--tiltX)) rotateY(var(--tiltY))}50%{transform:translateY(-6px) rotateX(var(--tiltX)) rotateY(var(--tiltY))}}

.logo-big{
  width:96px;height:96px;border-radius:28px;margin-bottom:16px;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(120% 110% at 0% 0%, rgba(0,224,255,.3), transparent 55%),
    linear-gradient(180deg,#2a34c0,#1d237f);
  box-shadow:inset 0 0 14px rgba(0,0,0,.45),0 18px 40px rgba(23,28,92,.56),0 0 0 2px rgba(99,118,255,.25);
  transform:translateZ(40px);animation:breath 5.6s ease-in-out infinite;
}
@keyframes breath{0%,100%{filter:saturate(1)}50%{filter:saturate(1.1)}}

.title{
  margin:0;font-size:clamp(30px,6vw,46px);letter-spacing:.3px;
  background:linear-gradient(90deg,#e9edff,#70f0ff,#a9b7ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;animation:inkshift 12s linear infinite;
}
@keyframes inkshift{to{background-position:200% 0}}

.subtitle{margin:10px 0 0;color:var(--muted);font-size:clamp(13px,3.6vw,16px)}

.top-tabs{
  position:sticky; top:8px; z-index:5;
  display:flex; gap:10px; align-items:center;
  padding:10px; margin:8px auto 12px;
  max-width:min(1120px,95vw);
  border:1px solid var(--glass-line);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(18,22,70,.86),rgba(16,20,60,.8));
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow-1);
  overflow:auto; scrollbar-width:none;
}
.top-tabs::-webkit-scrollbar{display:none}
.top-tabs .nav-btn{
  position:relative;flex:0 0 auto;
  background:linear-gradient(180deg,rgba(18,22,70,.9),rgba(16,19,60,.78));
  color:#fff;border:1px solid var(--glass-line);
  padding:10px 12px;border-radius:12px;display:flex;align-items:center;gap:8px;cursor:pointer;
  font-family:"Chakra Petch",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.6px;
  transition:
    transform 90ms ease,
    border-color var(--t-2),box-shadow var(--t-2),background var(--t-2),filter var(--t-2);
}
.top-tabs .nav-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(107,123,255,.55);
  box-shadow:0 8px 20px rgba(0,0,0,.35),0 0 0 1px rgba(0,224,255,.16) inset;
  filter:saturate(1.04)
}
.top-tabs .nav-btn[aria-selected="true"]{
  background:linear-gradient(180deg,rgba(38,46,150,.98),rgba(34,41,130,.92));
  border-color:rgba(107,123,255,.85);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 10px 24px rgba(0,0,0,.42),0 0 0 2px rgba(99,118,255,.25)
}
.top-tabs::after{
  content:""; position:absolute; left:calc(10px + var(--tab-x)); bottom:6px;
  width:var(--tab-w); height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--pri-3),var(--acc));
  box-shadow:0 0 12px rgba(0,224,255,.45);
  transition:left .35s var(--ease-2), width .35s var(--ease-2), opacity .25s;
  opacity:calc((var(--tab-w) > 0)*1);
}

.crumbs{max-width:min(1120px,95vw);margin:0 auto 18px}
.crumbs ol{display:flex;gap:8px;list-style:none;margin:0;padding:0;font-size:13px;color:var(--muted)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:#fff}

.tabs{position:relative;z-index:1;display:grid;gap:22px;max-width:min(1120px,95vw);margin:0 auto 96px}
.tab{display:none;will-change:opacity,transform}
.tab.active{display:block;animation:enter var(--t-2) var(--ease-2)}
@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.discord-card{
  position:relative;overflow:hidden;border-radius:var(--rad-3xl);
  background:
    radial-gradient(140% 120% at 100% 0%, rgba(0,224,255,.10), transparent 40%),
    linear-gradient(180deg,rgba(18,22,70,.92),rgba(14,18,58,.9));
  border:1px solid var(--glass-line);
  box-shadow:var(--shadow-3);
  transform:translateZ(0);
  transition:transform 260ms var(--ease-2),box-shadow 260ms var(--ease-2),border-color 260ms var(--ease-2)
}
.discord-card:hover{
  transform:translateZ(28px) rotateX(calc(var(--my)*-2deg)) rotateY(calc(var(--mx)*2deg));
  box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 0 1px rgba(112,240,255,.15) inset
}
.discord-card::after{
  content:"";position:absolute;inset:-40% -40%;
  background:radial-gradient(18% 18% at calc(50% + var(--mx)*20%) calc(50% + var(--my)*20%), rgba(112,240,255,.22), transparent 60%);
  transform:translateZ(50px);
  mix-blend-mode:screen;opacity:.35;pointer-events:none;
  transition:opacity .25s var(--ease-1)
}
.discord-card:hover::after{opacity:.55}
.discord-card.featured{outline:1px solid rgba(120,150,255,.28)}
.discord-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.85;
  background:
    linear-gradient(120deg,rgba(255,255,255,.06),transparent 30%),
    radial-gradient(120% 100% at -10% 0%, rgba(63,134,255,.12), transparent 60%)
}
.discord-card .bar{position:absolute;left:0;top:0;bottom:0;width:8px;background:linear-gradient(180deg,var(--pri-2),var(--pri))}
.discord-body{padding:20px 20px 22px;display:grid;gap:14px}
.discord-title{font-size:20px;margin:0;font-weight:900;letter-spacing:.2px}

.grid.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tile{
  display:grid;place-items:center;height:84px;border-radius:20px;
  background:linear-gradient(180deg,rgba(22,27,84,.92),rgba(18,22,64,.86));
  border:1px solid var(--glass-line);box-shadow:var(--shadow-2);
  font-weight:800;letter-spacing:.22px;color:var(--ink-2);
  transform:translateZ(0);
  transition:transform 240ms var(--ease-2),border-color var(--t-2),box-shadow var(--t-2),filter var(--t-2)
}
.tile:hover{
  transform:translateZ(22px) rotateX(calc(var(--my)*-3deg)) rotateY(calc(var(--mx)*3deg));
  border-color:rgba(107,123,255,.75);
  box-shadow:0 18px 42px rgba(0,0,0,.5),0 0 0 2px rgba(0,224,255,.16);
  filter:saturate(1.06)
}
.tile::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.08) 45%,transparent 60%);
  transform:translateX(-120%); transition:transform .8s var(--ease-2);
}
.tile:hover::after{transform:translateX(120%)}

.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:2px}
.btn{
  appearance:none;border:1px solid rgba(107,123,255,.55);color:#fff;cursor:pointer;
  padding:12px 16px;border-radius:16px;font-weight:900;letter-spacing:.28px;
  background:
    radial-gradient(120% 120% at -10% 0%, rgba(0,224,255,.18), transparent 60%),
    linear-gradient(180deg,var(--pri),#3d4bff);
  box-shadow:0 12px 30px rgba(63,134,255,.28);
  display:inline-flex;align-items:center;gap:10px;
  transform:translateZ(0);
  transition:transform 180ms var(--ease-2),filter var(--t-2),box-shadow var(--t-2),border-color var(--t-2)
}
.btn:hover{
  transform:translateZ(14px) translateY(-1px) rotateX(calc(var(--my)*-1.5deg)) rotateY(calc(var(--mx)*1.5deg));
  filter:brightness(1.05);border-color:rgba(107,123,255,.9);
  box-shadow:0 18px 40px rgba(63,134,255,.36)
}
.btn:active{transform:translateZ(6px) translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:var(--ring-strong),0 16px 36px rgba(63,134,255,.35)}
.btn.ghost{
  background:linear-gradient(180deg,rgba(20,24,70,.9),rgba(18,22,64,.82));
  border:1px solid var(--glass-line);box-shadow:var(--shadow-1)
}
.btn.sm{padding:9px 12px;border-radius:12px;font-weight:800}

.btn{position:relative;overflow:hidden}
.btn::before{
  content:""; position:absolute; left:var(--gx); top:var(--gy);
  width:0; height:0; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.35), transparent 60%);
  opacity:0; pointer-events:none;
}
.btn:active::before{
  animation:ripple .6s ease-out forwards;
}
@keyframes ripple{
  0%{opacity:.35;width:0;height:0}
  100%{opacity:0;width:360px;height:360px}
}

.codebox{
  background:linear-gradient(180deg,rgba(14,18,58,.96),rgba(12,16,50,.96));
  border:1px solid var(--glass-line);border-radius:18px;padding:16px;position:relative;
  box-shadow:var(--shadow-1);transform:translateZ(10px)
}
.codebox pre{margin:0;overflow:auto}
.codebox code{color:#e1ebff;font-size:13.5px}
.copy{position:absolute;top:12px;right:12px}

.steps,.bullets{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--ink-1)}

.accordion .acc{
  width:100%;text-align:left;border:1px solid var(--glass-line);border-radius:16px;
  background:linear-gradient(180deg,rgba(22,27,84,.94),rgba(18,22,64,.86));
  padding:14px;cursor:pointer;font-weight:900;letter-spacing:.22px;
  transition:transform 100ms var(--ease-1),border-color var(--t-2),box-shadow var(--t-2),filter var(--t-2)
}
.accordion .acc:hover{
  transform:translateY(-1px);
  border-color:rgba(107,123,255,.7);
  box-shadow:0 12px 24px rgba(0,0,0,.45),0 0 0 2px rgba(0,224,255,.14);
  filter:saturate(1.04)
}
.accordion .acc:focus-visible{outline:none;box-shadow:var(--ring)}
.accordion .pan{
  max-height:0;overflow:hidden;
  transition:max-height 360ms var(--ease-2),opacity 220ms var(--ease-1),padding 220ms var(--ease-1);
  opacity:.66;padding:0 8px
}
.accordion .pan.open{opacity:1;padding:12px 8px}

.contact .row{display:grid;gap:8px;margin-bottom:12px}
.contact input,.contact textarea{
  border:1px solid var(--glass-line);
  background:linear-gradient(180deg,rgba(18,22,64,.9),rgba(16,20,58,.84));
  color:#fff;border-radius:14px;padding:12px 14px;transition:box-shadow var(--t-1) var(--ease-1)
}
.contact input:focus-visible,.contact textarea:focus-visible{
  outline:none;box-shadow:var(--ring); caret-color:var(--acc);
  text-shadow:0 0 6px rgba(112,240,255,.25);
}
.note{font-size:13px;color:var(--muted)}

.site-foot{
  max-width:min(1120px,95vw);margin:36px auto 54px;
  display:flex;justify-content:space-between;align-items:center;color:var(--muted);gap:10px
}
.foot-links{display:flex;gap:12px;align-items:center}
.foot-links a{color:var(--ink-3);transition:color var(--t-1) var(--ease-1)}
.foot-links a:hover{color:#ffffff}

:where(button,.btn,.nav button,.acc){outline-offset:2px}
:where(button,.btn,.nav button,.acc):disabled{opacity:.6;cursor:not-allowed}

kbd{
  display:inline-block;min-width:1.6ch;text-align:center;padding:.2em .5em;border-radius:.45rem;
  border:1px solid var(--glass-line);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;color:var(--ink-2)
}

.table{
  width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--glass-line);
  border-radius:16px;overflow:hidden;background:linear-gradient(180deg,rgba(18,22,70,.92),rgba(16,20,60,.9))
}
.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--glass-line);color:var(--ink-1)}
.table th{background:linear-gradient(180deg,rgba(37,44,120,.5),rgba(34,40,110,.45));text-align:left;color:#fff}
.table tr:last-child td{border-bottom:0}
.table tr:hover td{background:linear-gradient(180deg,rgba(28,34,96,.6),rgba(24,30,86,.55))}

.badge{
  display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:12px;
  padding:6px 10px;border-radius:999px;border:1px solid var(--glass-line);
  background:linear-gradient(180deg,rgba(24,28,86,.8),rgba(20,24,76,.75));color:var(--ink-2)
}
.badge.ok{border-color:rgba(33,209,144,.45);color:#a8ffd9}
.badge.warn{border-color:rgba(255,209,102,.45);color:#fff0c2}
.badge.err{border-color:rgba(255,107,129,.45);color:#ffd3db}

.card-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:960px){.card-row{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.card-row{grid-template-columns:1fr}}

.callout{
  border:1px solid var(--glass-line);border-radius:16px;padding:14px;
  background:linear-gradient(180deg,rgba(22,27,84,.9),rgba(18,22,64,.84));
  box-shadow:var(--shadow-1);display:flex;gap:12px;align-items:flex-start
}
.callout .dot{width:10px;height:10px;border-radius:50%}
.callout.ok .dot{background:var(--ok)}
.callout.warn .dot{background:var(--warn)}
.callout.err .dot{background:var(--err)}

.tag{
  display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:10px;
  border:1px solid var(--glass-line);background:linear-gradient(180deg,rgba(18,22,70,.8),rgba(14,18,58,.75));
  font-weight:700;font-size:.85rem;color:var(--ink-3)
}

.progress{position:relative;height:10px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;border:1px solid var(--glass-line)}
.progress .bar{position:absolute;inset:0 auto 0 0;width:38%;background:linear-gradient(90deg,var(--pri-3),var(--acc));box-shadow:0 6px 18px rgba(0,224,255,.28);border-radius:999px;animation:slideGlow 3.2s var(--ease-2) infinite}
@keyframes slideGlow{0%{filter:saturate(1)}50%{filter:saturate(1.2)}100%{filter:saturate(1)}}

.toast{
  position:fixed;right:18px;bottom:18px;z-index:60;display:grid;gap:10px;min-width:240px
}
.toast .item{
  border:1px solid var(--glass-line);border-radius:16px;padding:12px 14px;
  background:linear-gradient(180deg,rgba(18,22,70,.92),rgba(16,20,60,.88));
  box-shadow:var(--shadow-2);display:flex;gap:10px;align-items:flex-start
}

.input{
  border:1px solid var(--glass-line);
  background:linear-gradient(180deg,rgba(18,22,64,.92),rgba(16,20,58,.86));
  color:#fff;border-radius:14px;padding:12px 14px;width:100%
}

.util-stack-xs{display:grid;gap:6px}
.util-stack-sm{display:grid;gap:10px}
.util-stack-md{display:grid;gap:14px}
.util-stack-lg{display:grid;gap:18px}
.util-inline{display:inline-flex;gap:8px;align-items:center}
.util-center{display:grid;place-items:center}
.util-hidden{display:none}
.util-muted{color:var(--muted)}
.util-ink2{color:var(--ink-2)}
.util-ink3{color:var(--ink-3)}
.util-hr{height:1px;background:var(--glass-line)}
.util-pad{padding:14px}
.util-pad-lg{padding:20px}
.util-round{border-radius:16px}
.util-glow{box-shadow:0 12px 40px rgba(0,224,255,.18)}
.util-border{border:1px solid var(--glass-line)}

.modal{position:fixed;inset:0;background:rgba(3,5,15,.6);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:80}
.modal.open{display:flex;animation:fadeIn var(--t-2) var(--ease-2)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal .panel{
  width:min(720px,92vw);border:1px solid var(--glass-line);border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,rgba(18,22,70,.96),rgba(16,20,60,.94))
}
.modal .head{padding:14px 16px;border-bottom:1px solid var(--glass-line);display:flex;align-items:center;justify-content:space-between}
.modal .body{padding:16px}

.tooltip{position:relative}
.tooltip[data-tip]:hover::after{
  content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  background:rgba(10,12,40,.98);color:#fff;padding:8px 10px;border-radius:10px;border:1px solid var(--glass-line);
  white-space:nowrap;box-shadow:var(--shadow-1);font-size:12.5px
}
.tooltip[data-tip]:hover::before{
  content:"";position:absolute;left:50%;bottom:100%;transform:translateX(-50%);width:10px;height:10px;background:rgba(10,12,40,.98);
  border-left:1px solid var(--glass-line);border-top:1px solid var(--glass-line);transform-origin:center;rotate:45deg
}

.code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;
  background:linear-gradient(180deg,rgba(10,12,40,.7),rgba(10,12,40,.6));
  border:1px solid var(--glass-line);color:#e8efff;border-radius:10px;padding:.2rem .45rem
}

pre.pretty{
  background:linear-gradient(180deg,rgba(14,18,58,.96),rgba(12,16,50,.96));
  border:1px solid var(--glass-line);border-radius:16px;padding:16px;overflow:auto;color:#e1ebff
}
pre.pretty code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

hr.sep{height:1px;border:0;background:var(--glass-line);margin:8px 0}

.wave{
  position:absolute;inset:auto -20% -60% -20%;height:300px;pointer-events:none;opacity:.22;
  background:radial-gradient(60% 60% at 50% 40%, rgba(0,224,255,.35), transparent 60%)
}
.wave.alt{inset:-40% -10% auto -10%;height:260px;background:radial-gradient(60% 60% at 40% 50%, rgba(77,99,255,.35), transparent 60%)}

.marquee{
  position:relative;overflow:hidden;border:1px solid var(--glass-line);border-radius:14px;
  background:linear-gradient(180deg,rgba(22,27,84,.92),rgba(18,22,64,.86))
}
.marquee .track{
  display:flex;gap:18px;align-items:center;padding:10px 14px;white-space:nowrap;
  animation:mq 18s linear infinite
}
@keyframes mq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.skeleton{
  position:relative;overflow:hidden;background:rgba(255,255,255,.06);border-radius:12px
}
.skeleton::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  animation:sk 1.6s ease-in-out infinite
}
@keyframes sk{100%{transform:translateX(100%)}}

.btn.alt{
  background:linear-gradient(180deg,#0abfd4,#0499ff);
  border:1px solid rgba(10,191,212,.55);
  box-shadow:0 12px 30px rgba(10,191,212,.28)
}
.btn.alt:hover{box-shadow:0 18px 40px rgba(10,191,212,.36)}
.btn.flat{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.04));
  border:1px solid var(--glass-line);box-shadow:none
}

.h1{font-size:clamp(26px,5.6vw,44px);font-weight:900;letter-spacing:.2px;margin:0}
.h2{font-size:clamp(20px,4vw,28px);font-weight:900;margin:0}
.h3{font-size:clamp(18px,3.2vw,22px);font-weight:800;margin:0}
.p{line-height:1.65;color:var(--ink-1)}
.small{font-size:.92rem;color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.center{text-align:center}

.flow>*+*{margin-top:10px}
.flow-lg>*+*{margin-top:14px}

.focus-ring:focus-visible{outline:none;box-shadow:var(--ring)}

form .error{color:#ff9aa9;font-weight:700}
form .success{color:#a8ffd9;font-weight:700}

@media (prefers-reduced-motion:reduce){
  .tab.active,.accordion .pan,.icon-btn,.btn,.tile,.marquee .track,
  .progress .bar,.bgPattern,.uiPattern,body::before,body::after,
  .discord-card,.hero,.logo-big,.content{transition:none!important;animation:none!important;transform:none!important}
}

@media (min-width:1200px){
  .content{
    padding-left:max(56px,calc((100vw - 1120px)/2 + 32px));
    padding-right:max(56px,calc((100vw - 1120px)/2 + 32px))
  }
}

.glare{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.25;
  background:
    radial-gradient(40% 40% at 10% 10%, rgba(0,224,255,.35), transparent 60%),
    radial-gradient(45% 45% at 90% 20%, rgba(77,99,255,.35), transparent 60%)
}
.card-cta{display:grid;gap:10px;align-items:center;grid-template-columns:1fr auto}
.card-cta .aside{opacity:.85}

.banner{
  position:relative;border:1px solid var(--glass-line);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,rgba(18,22,70,.94),rgba(16,20,60,.9));
  box-shadow:var(--shadow-2);transform:translateZ(18px)
}
.banner .inner{padding:16px;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.banner .cta{display:flex;gap:10px;align-items:center}

.pulse{
  position:absolute;inset:auto 18px 18px auto;width:10px;height:10px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 0 0 rgba(0,224,255,.35);animation:pulse 2.4s cubic-bezier(.66,0,0,1) infinite
}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,224,255,.35)}70%{box-shadow:0 0 0 18px rgba(0,224,255,0)}100%{box-shadow:0 0 0 0 rgba(0,224,255,0)}}

.hero .spark{
  position:absolute;inset:auto auto 6% 8%;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,224,255,.18), transparent 65%);
  filter:blur(16px)
}

.banner.notice{border-color:rgba(255,209,102,.4)}
.banner.notice .inner{background:linear-gradient(180deg,rgba(28,22,6,.35),rgba(24,18,5,.25))}
.banner.positive{border-color:rgba(33,209,144,.4)}
.banner.positive .inner{background:linear-gradient(180deg,rgba(6,28,22,.35),rgba(5,24,18,.25))}
.banner.negative{border-color:rgba(255,107,129,.4)}
.banner.negative .inner{background:linear-gradient(180deg,rgba(28,6,12,.35),rgba(24,5,10,.25))}

.list-row{display:grid;gap:10px}
.list-row .row{
  display:flex;align-items:center;justify-content:space-between;border:1px solid var(--glass-line);
  border-radius:14px;padding:10px 12px;background:linear-gradient(180deg,rgba(18,22,70,.9),rgba(16,20,60,.86))
}
.list-row .row:hover{box-shadow:0 10px 26px rgba(0,0,0,.4)}

.metric{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border:1px solid var(--glass-line);
  border-radius:16px;padding:12px;background:linear-gradient(180deg,rgba(18,22,70,.92),rgba(16,20,60,.9));transform:translateZ(10px)
}
.metric .k{font-size:22px;font-weight:900}
.metric .d{font-size:12.5px;color:var(--muted)}

.split{
  display:grid;grid-template-columns:1.35fr .65fr;gap:14px;align-items:start
}
@media(max-width:980px){.split{grid-template-columns:1fr}}

.switch{
  --h:22px;position:relative;width:44px;height:var(--h);border-radius:999px;border:1px solid var(--glass-line);
  background:linear-gradient(180deg,rgba(18,22,70,.96),rgba(16,20,60,.92));cursor:pointer;transition:box-shadow var(--t-1) var(--ease-1)
}
.switch .dot{
  position:absolute;top:2px;left:2px;width:calc(var(--h) - 4px);height:calc(var(--h) - 4px);border-radius:50%;
  background:linear-gradient(180deg,#2a34c0,#1d237f);box-shadow:0 6px 14px rgba(0,0,0,.35);
  transition:left var(--t-2) var(--ease-2),background var(--t-2) var(--ease-1)
}
.switch.active{box-shadow:var(--ring)}
.switch.active .dot{left:calc(100% - var(--h) + 2px);background:linear-gradient(180deg,#00bbe0,#0499ff)}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:6px 10px;border-radius:12px;border:1px solid var(--glass-line);
  background:linear-gradient(180deg,rgba(18,22,70,.9),rgba(16,20,60,.86));
  font-weight:700;font-size:12.5px;color:var(--ink-2)
}
.chip.sel{border-color:rgba(107,123,255,.75);color:#fff}

.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}

blockquote{
  margin:0;padding:10px 12px;border-left:3px solid var(--pri-3);
  background:linear-gradient(180deg,rgba(18,22,70,.7),rgba(16,20,60,.65));color:var(--ink-1);border-radius:0 12px 12px 0
}

.alert{
  border-radius:16px;border:1px solid var(--glass-line);padding:12px 14px;
  background:linear-gradient(180deg,rgba(18,22,70,.94),rgba(16,20,60,.9));display:flex;gap:10px;align-items:flex-start
}
.alert.ok{border-color:rgba(33,209,144,.45)}
.alert.warn{border-color:rgba(255,209,102,.45)}
.alert.err{border-color:rgba(255,107,129,.45)}

.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:1100px){.stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:580px){.stat-grid{grid-template-columns:1fr}}

.pill{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1px solid var(--glass-line);
  background:linear-gradient(180deg,rgba(18,22,70,.86),rgba(16,20,60,.82));font-weight:800
}

.hr{height:1px;background:var(--glass-line);border:0}

.key-section{
  margin-top:12px;
  padding:16px;
  border-radius:16px;
  border:1px solid var(--glass-line);
  background:linear-gradient(180deg,rgba(18,22,70,.94),rgba(16,20,60,.9));
  box-shadow:var(--shadow-2);
  display:grid;
  gap:12px;
  transform:translateZ(12px);
}

.key-section h3{
  margin:0 0 4px;
  font-family:"Chakra Petch",system-ui,sans-serif;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-weight:900;
  background:linear-gradient(90deg,var(--ink-1),var(--acc-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.key-section h4{
  margin:8px 0 4px;
  font-weight:900;
  color:#fff;
}

.key-section code{
  display:inline-block;
  padding:4px 8px;
  border-radius:10px;
  border:1px solid var(--glass-line);
  background:linear-gradient(180deg,rgba(10,12,40,.7),rgba(10,12,40,.6));
  color:var(--ink-2);
  font-size:.92rem;
}

.key-section blockquote{
  border-left:3px solid var(--pri-3);
  background:linear-gradient(180deg,rgba(18,22,70,.78),rgba(16,20,60,.72));
  border-radius:0 14px 14px 0;
  padding:10px 12px;
  margin-top:6px;
}

.key-section blockquote p{ margin:0; }

.key-section blockquote a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(107,123,255,.55);
  background:
    radial-gradient(120% 120% at -10% 0%, rgba(0,224,255,.18), transparent 60%),
    linear-gradient(180deg,var(--pri),#3d4bff);
  color:#fff;
  font-weight:900;
  letter-spacing:.22px;
  box-shadow:0 12px 30px rgba(63,134,255,.28);
  transition:
    transform 160ms var(--ease-2),
    filter var(--t-2),
    box-shadow var(--t-2),
    border-color var(--t-2);
}

.key-section blockquote a:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
  border-color:rgba(107,123,255,.9);
  box-shadow:0 18px 40px rgba(63,134,255,.36);
}

.key-section blockquote a:focus-visible{
  outline:none;
  box-shadow:var(--ring-strong),0 16px 36px rgba(63,134,255,.35);
}

.key-section h4 + p{ margin-top:2px; }
.key-section p + blockquote{ margin-top:6px; }
.key-section blockquote + h4{ margin-top:12px; }

@media (max-width:600px){
  .key-section{ padding:14px; }
  .key-section blockquote a{ padding:10px 12px; }
}