/* =====================================================================
   UTILITIES — home
   Black, with arcs and horizons for light. Sora for display, Inter for
   reading. Discord replicas drawn at Discord's own scale.
   ===================================================================== */
:root{--line:rgba(255,255,255,.07);
  --bg:#0a0a0a;
  --fg:#ffffff;
  --t65:rgba(255,255,255,.65);
  --t50:rgba(255,255,255,.5);
  --t40:rgba(255,255,255,.4);
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.14);
  --acc:#a6e4f5;
  --acc-2:#d9f4fb;
  --display:"Bricolage Grotesque","DM Sans",ui-sans-serif,system-ui,sans-serif;
  --hero:"Poppins","DM Sans",ui-sans-serif,system-ui,sans-serif;
  --sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --text:rgba(237,237,237,.62);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --expo:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(20px,4vw,48px);
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0a0a0a}}
:root[data-theme="dark"]{--bg:#0a0a0a}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-padding-top:90px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
body{margin:0;background:var(--bg);color:#ededed;font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
p,h1,h2,h3,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-family:var(--display);font-weight:600;text-wrap:balance}
p{text-wrap:pretty}
svg{display:block}
code{font-family:var(--mono);font-size:.86em;color:#fff;background:rgba(255,255,255,.08);padding:2px 6px;border-radius:5px}
:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-80px;z-index:200;background:#fff;color:#000;padding:10px 14px;border-radius:999px;font-weight:600}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 10px)}
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}
.wrap--md{max-width:1056px}
.vh-probe{position:fixed;left:0;top:0;width:1px;height:100svh;pointer-events:none;visibility:hidden}
.acc{color:var(--acc)}
/* the gradient: a cool metallic sweep from indigo through pale blue to white and back */
.grad{background:linear-gradient(100deg,#9cdcee 0%,#dff6fc 42%,#ffffff 55%,#b5e8f5 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.04em}



/* ---------- buttons: white for the main action, an outline for the rest ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;border:1px solid transparent;font:600 14.5px/1 var(--sans);letter-spacing:-.005em;white-space:nowrap;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.btn svg{width:17px;height:17px}
.btn .chev{width:14px;height:14px;transition:transform .25s ease}
@media (hover:hover){.btn:hover .chev{transform:translateX(2px)}}
.btn--light{background:#f4f6f7;color:#0a0a0a}
@media (hover:hover){.btn--light:hover{background:#ffffff}}
.btn--ghost{background:transparent;color:#ededed;border-color:rgba(255,255,255,.16)}
@media (hover:hover){.btn--ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.26)}}
.btn--sm{height:40px;padding:0 16px;font-size:14px}
.btn--xs{height:32px;padding:0 14px;font-size:12.5px}
.btn--block{width:100%}

/* ---------- nav ---------- */
.nav{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 14px);z-index:60;display:flex;justify-content:center;padding:0 14px;pointer-events:none}
.nav__pill{pointer-events:auto;display:flex;align-items:center;gap:4px;height:48px;padding:0 8px 0 16px;border-radius:999px;background:rgba(16,16,18,.72);border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 30px -10px rgba(0,0,0,.8);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
.brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.02em;margin-right:12px}
.brand__gear{width:20px;height:20px;fill:currentColor;will-change:transform}
.nav__links{display:flex;gap:2px;margin-right:8px}
.nav__links a{font-size:13px;font-weight:500;color:var(--t50);padding:6px 11px;border-radius:999px;transition:color .2s ease}
@media (hover:hover){.nav__links a:hover{color:#fff}}
.nav__menu{width:36px;height:36px;border-radius:50%;display:none;place-items:center}
.nav__menu svg{width:20px;height:20px}
.sheet{position:fixed;inset:0;z-index:80;background:var(--bg);display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 12px) var(--gutter) calc(env(safe-area-inset-bottom,0px) + 28px);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.sheet.is-open{opacity:1;visibility:visible;transition:opacity .35s ease}

/* ---------- reveal (opacity, rise, blur — 700ms ease-out) ---------- */
.fx .rv{opacity:0;transform:translate3d(0,14px,0);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.fx .rv.in{opacity:1;transform:translate3d(0,0,0)}

/* ---------- light: arcs, a horizon, dotted bands ---------- */
.arc{position:absolute;left:50%;top:0;height:230px;width:92vw;max-width:2400px;transform:translateX(-50%);border-radius:50%;border-top:1px solid rgba(255,255,255,.1);-webkit-mask:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);mask:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);pointer-events:none}
.horizon{position:absolute;left:0;right:0;top:0;height:260px;overflow:hidden;pointer-events:none}
.horizon i{position:absolute;left:50%;top:70px;width:160vw;height:1400px;transform:translateX(-50%);border-radius:50%;border-top:1px solid rgba(190,198,255,.55);box-shadow:0 -24px 60px -28px rgba(150,160,255,.55),inset 0 26px 60px -36px rgba(150,160,255,.35);-webkit-mask:linear-gradient(90deg,transparent 4%,#000 30%,#000 70%,transparent 96%);mask:linear-gradient(90deg,transparent 4%,#000 30%,#000 70%,transparent 96%)}
.dots{position:relative;height:90px;pointer-events:none}
.dots canvas{width:100%;height:100%;display:block}

/* ---------- section headers ---------- */
.h2{font-size:38px;line-height:1.08;letter-spacing:-.035em;font-weight:600;color:#ededed}
.h2--lg{font-size:clamp(32px,3.4vw,42px)}
.sh{max-width:780px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.sh p{color:var(--text);font-size:16px;line-height:26px;max-width:540px;margin-top:16px}
.badge{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin-bottom:22px;background:linear-gradient(#17171b,#0d0d10);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 24px -10px rgba(0,0,0,.9)}
.badge svg{width:21px;height:21px;color:var(--acc)}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:relative;min-height:max(680px,100svh);display:flex;align-items:center;overflow:hidden;background:#06090b}
.hero__smoke{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;animation:smokeIn 2.2s cubic-bezier(.19,1,.22,1) .1s both}
@keyframes smokeIn{from{opacity:0}to{opacity:1}}
.hero__fade{position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.hero__halo{position:absolute;left:0;right:0;bottom:-6px;width:100%;height:clamp(90px,12vw,200px);pointer-events:none;overflow:visible}
.hero__in{position:relative;z-index:2}
.hero__h{font-family:var(--hero);font-size:clamp(46px,min(5.8vw,10svh),86px);line-height:1.02;letter-spacing:-.065em;font-weight:800;color:#ededed}
.hero__h .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hero__h .ln>span{display:inline-block}
.cyc{display:inline-grid!important;vertical-align:top}
.cyc__w{grid-area:1/1;display:inline-block;opacity:0;transform:translateY(42%);filter:blur(8px);visibility:hidden;transition:opacity .4s ease,transform .7s var(--expo),filter .4s ease,visibility 0s linear .7s}
.cyc__w.on{opacity:1;transform:none;filter:none;visibility:visible;transition:opacity .5s ease .2s,transform .8s var(--expo) .2s,filter .5s ease .2s,visibility 0s}
.cyc__w.out{opacity:0;transform:translateY(-42%);filter:blur(8px);visibility:visible;transition:opacity .35s ease,transform .6s var(--expo),filter .35s ease,visibility 0s linear .6s}
.cyc__w.out-down{opacity:0;transform:translateY(42%);filter:blur(8px);visibility:visible;transition:opacity .35s ease,transform .6s var(--expo),filter .35s ease,visibility 0s linear .6s}
.cyc__w.from-top:not(.on){transform:translateY(-42%)}
.cyc__w.reset{transition:none!important}
.cog:focus-visible{outline:none}
.cog:focus-visible .cog__svg{filter:drop-shadow(0 0 0 2px #fff) drop-shadow(0 30px 60px rgba(0,0,0,.6))}
.hero__it{font-weight:300;font-style:italic;letter-spacing:-.055em;color:rgba(237,237,237,.92)}
.hero__p{color:var(--text);font-size:17.5px;line-height:28px;max-width:460px;margin-top:24px}
.hero__p b{color:rgba(237,237,237,.9);font-weight:500}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.ld{animation:ld 1.2s var(--expo) both;animation-delay:var(--d,0s)}
.hero__h .ld{animation-name:ldup}
@keyframes ld{from{opacity:0;transform:translateY(18px);filter:blur(6px)}}
@keyframes ldup{from{transform:translateY(112%)}}

/* =====================================================================
   TICKETS: illustrated cards
   ===================================================================== */
.tix{position:relative;padding:clamp(110px,16vh,170px) 0 clamp(70px,10vh,110px)}
.bento{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:860px;margin:56px auto 0}
.bc{position:relative;display:flex;flex-direction:column;min-height:330px;border-radius:24px;overflow:hidden;background:linear-gradient(180deg,#111214,#0d0e10);border:1px solid rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.bc__txt{padding:24px 26px 26px;position:relative;z-index:2}
.bc h3{font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.01em;color:#c3caff}
.bc p{font-size:14px;line-height:1.6;color:rgba(237,237,237,.72);margin-top:8px;max-width:38ch}
.bc p em{font-style:normal;color:#e8eaff}
.bc__art{position:relative;flex:1;min-height:190px;display:grid;place-items:center;padding:0 24px 26px}
.bc h3{color:#f2f2f2}
.bc p em{color:var(--acc-2)}
.av{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff;flex:none}
.av--bot svg{width:22px;height:22px;fill:#fff}
.av--role{background:#26282d;color:var(--acc)}
/* panels: a small menu, one option lit at a time */
.mini-select{width:min(100%,280px)}
.mini-select__box{display:flex;align-items:center;justify-content:space-between;height:38px;padding:0 12px 0 14px;border-radius:10px 10px 0 0;background:#16171a;border:1px solid rgba(255,255,255,.12);font-size:13px;color:rgba(237,237,237,.6)}
.mini-select__box svg{width:16px;height:16px;color:rgba(237,237,237,.5)}
.mini-select__list{border:1px solid rgba(255,255,255,.12);border-top:0;border-radius:0 0 10px 10px;background:#121315;padding:5px}
.mini-select__list li{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:7px;animation:pick 6s infinite}
.mini-select__list li:nth-child(2){animation-delay:2s}.mini-select__list li:nth-child(3){animation-delay:4s}
@keyframes pick{0%,30%{background:rgba(166,228,245,.1)}34%,100%{background:transparent}}
.mini-select__list svg{width:16px;height:16px;color:var(--acc);flex:none}
.mini-select__list b{display:block;font-size:13px;font-weight:600;color:#f2f2f2;line-height:1.2}
.mini-select__list small{display:block;font-size:11.5px;color:rgba(237,237,237,.5)}
/* transcripts: a page in a browser */
.mini-doc{width:min(100%,290px);border-radius:12px;background:#121315;border:1px solid rgba(255,255,255,.12);overflow:hidden;box-shadow:0 20px 40px -20px rgba(0,0,0,.9)}
.mini-doc__bar{display:flex;align-items:center;gap:5px;height:30px;padding:0 10px;border-bottom:1px solid rgba(255,255,255,.08);background:#17181b}
.mini-doc__bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18)}
.mini-doc__bar span{margin-left:8px;font-size:11px;color:rgba(237,237,237,.5);font-family:var(--mono)}
.mini-doc__body{padding:12px 14px;display:grid;gap:10px}
.mini-doc__row{display:flex;align-items:center;gap:10px}
.mini-doc__row .ln{height:7px;border-radius:4px;background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.06))}
/* claiming: the state flips, a reminder pops */
.mini-claim{position:relative;width:min(100%,290px);padding-bottom:26px}
.mini-claim__card{border-radius:12px;background:#121315;border:1px solid rgba(255,255,255,.12);padding:14px}
.mini-claim__card p{font-size:13.5px;font-weight:600;color:#f2f2f2}
.mini-claim__card .hash{color:rgba(237,237,237,.45);margin-right:4px;font-weight:400}
.mini-claim__state{position:relative;display:grid;margin-top:10px;height:26px}
.st{grid-area:1/1;display:inline-flex;align-items:center;gap:7px;width:max-content;height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:500}
.st .av{width:16px;height:16px;font-size:8px}
.st--open{color:rgba(237,237,237,.6);border:1px dashed rgba(255,255,255,.2);animation:stA 6s infinite}
.st--on{color:#0a0a0a;background:var(--acc);animation:stB 6s infinite}
@keyframes stA{0%,40%{opacity:1}48%,92%{opacity:0}100%{opacity:1}}
@keyframes stB{0%,40%{opacity:0;transform:scale(.94)}48%,92%{opacity:1;transform:none}100%{opacity:0}}
.mini-claim__toast{position:absolute;right:-6px;bottom:0;display:flex;align-items:center;gap:9px;padding:8px 12px 8px 10px;border-radius:12px;background:#1a1b1e;border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 30px -12px rgba(0,0,0,.9);animation:toast 6s infinite}
.mini-claim__toast svg{width:16px;height:16px;color:var(--acc)}
.mini-claim__toast b{display:block;font-size:12px;font-weight:600;color:#f2f2f2;line-height:1.2}
.mini-claim__toast small{display:block;font-size:11px;color:rgba(237,237,237,.5)}
@keyframes toast{0%,55%{opacity:0;transform:translateY(8px)}62%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(8px)}}
/* blacklists: a member list, two rows struck out */
.mini-list{width:min(100%,290px);border-radius:12px;background:#121315;border:1px solid rgba(255,255,255,.12);padding:6px}
.mini-list li{position:relative;display:flex;align-items:center;gap:10px;min-height:38px;padding:0 8px;border-radius:8px;font-size:13px;color:#f2f2f2}
.mini-list li+li::before{content:"";position:absolute;left:8px;right:8px;top:0;height:1px;background:var(--line)}
.mini-list .tag{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11px;color:rgba(237,237,237,.45)}
.mini-list .tag svg{width:12px;height:12px}
.mini-list .tag--block{color:#ff8a8a;background:rgba(255,64,64,.1);border:1px solid rgba(255,64,64,.25);padding:2px 8px;border-radius:999px}
.mini-list li.is-blocked>span:nth-child(2){color:rgba(237,237,237,.45);text-decoration:line-through;text-decoration-color:rgba(255,120,120,.6)}
.pillbtn b{color:var(--acc);font-weight:600}

/* =====================================================================
   TICKETS
   ===================================================================== */
.tk{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;max-width:980px;margin:56px auto 0}
.tkc{position:relative;grid-column:span 3;display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:linear-gradient(180deg,#111214,#0d0e10);border:1px solid rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.tkc--wide{grid-column:span 6;flex-direction:row;align-items:center;min-height:230px}
.tkc--sm{grid-column:span 2}
.tkc__txt{padding:26px 28px 0;position:relative;z-index:2}
.tkc--wide .tkc__txt{flex:0 0 40%;padding:34px 0 34px 36px}
.tkc h3{font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.01em;color:#f2f2f2}
.tkc p{font-size:14px;line-height:1.6;color:rgba(237,237,237,.66);margin-top:8px;max-width:40ch}
.tkc p em{font-style:normal;color:var(--acc-2)}
.tkc__art{flex:1;display:grid;place-items:center;padding:22px 22px 26px;min-height:170px}
/* VoiceMaster interface: the legend, then its ten buttons, five to a row, as the bot posts it. Nothing here moves. */
.tkc--vm .tkc__txt{flex-basis:34%}
.vmi{flex:1;min-width:0;margin:26px 26px 26px 10px;padding:20px 20px 20px;border-radius:16px;background:#0b0c0d;border:1px solid rgba(255,255,255,.08)}
.vmi__legend{list-style:none;margin:0;padding:0;columns:2 250px;column-gap:22px}
.vmi__legend li{display:flex;align-items:center;gap:9px;height:27px;font-size:13px;color:rgba(237,237,237,.66);white-space:nowrap;break-inside:avoid}
.vmi__legend svg{width:16px;height:16px;flex:none;color:rgba(237,237,237,.78)}
.vmi__legend b{font:500 12px/20px var(--mono);color:var(--acc);background:rgba(166,228,245,.08);padding:0 6px;border-radius:5px;margin-right:-3px}
.ctls{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:18px}
.ctl{height:58px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(180deg,#1b1d20,#141517);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 18px -10px rgba(0,0,0,.9)}
.ctl svg{width:25px;height:25px;color:rgba(237,237,237,.82)}
/* setup: a short timeline that fills in */
.steps{list-style:none;margin:0;padding:22px 28px 30px;display:grid;gap:16px;align-content:center;flex:1;position:relative}
.steps li{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(237,237,237,.75);position:relative}
.steps li svg{width:18px;height:18px;color:var(--acc);flex:none}
.steps li:not(.steps__cmd){padding-left:26px}
.steps li:not(.steps__cmd)::before{content:"";position:absolute;left:8px;top:-16px;bottom:50%;width:1px;background:rgba(255,255,255,.12)}
.steps__cmd{height:40px;padding:0 12px;border-radius:10px;background:#17181b;border:1px solid rgba(255,255,255,.1)}
.steps__cmd svg{color:rgba(237,237,237,.6)!important}
.steps__cmd code{background:none;padding:0;font-size:12.5px}
.steps .men,.side .men{color:#c9cdfb;background:rgba(88,101,242,.22);border-radius:3px;padding:0 3px}
.fx .steps li:not(.steps__cmd){opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .6s var(--expo);transition-delay:calc(.4s + var(--i) * .45s)}
.fx .tkc.in .steps li{opacity:1;transform:none}
/* channels: a slice of the sidebar */
.side{margin:20px 22px 26px;padding:10px;border-radius:14px;background:#0b0c0d;border:1px solid rgba(255,255,255,.08);display:grid;gap:2px}
.side__cat{display:flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(237,237,237,.4);padding:8px 6px 4px}
.side__cat svg{width:11px;height:11px}
.side__ch{display:flex;align-items:center;gap:7px;height:30px;padding:0 8px;border-radius:6px;font-size:13px;color:rgba(237,237,237,.55)}
.side__ch .h{font-size:17px;color:rgba(237,237,237,.35);width:14px;text-align:center}
.side__ch .av{width:16px;height:16px;font-size:8px;margin-left:auto}
.side__ch.is-on{background:rgba(255,255,255,.06);color:#f2f2f2}
.side__ch.is-dim{color:rgba(237,237,237,.35)}

/* =====================================================================
   FEATURE ROWS
   ===================================================================== */
.feats{position:relative;padding:clamp(140px,20vh,220px) 0 clamp(120px,18vh,200px)}
.feats__in{width:100%;max-width:1056px;margin-inline:auto;padding-inline:var(--gutter);display:grid;gap:clamp(120px,20vh,176px)}
.frow{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
.frow--flip{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.frow .h2{font-size:clamp(28px,2.7vw,36px)}
@media (min-width:1001px){.frow .h2{white-space:nowrap}}
.frow--flip .frow__txt{order:2;padding-left:32px}
.frow__p{margin-top:16px;max-width:440px;display:grid;gap:12px}
.frow__p p{color:var(--text);font-size:17px;line-height:28px}
.frow__vis{display:flex;justify-content:center}
.tilt{will-change:transform,opacity;backface-visibility:hidden;transform:perspective(1000px) rotateX(-24deg) rotateY(var(--ry,-30deg)) translateY(-40px);opacity:.15}
.float{animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}

/* =====================================================================
   DISCORD, AT DISCORD'S SCALE
   ===================================================================== */
.d{font:400 13px/1.4 "Inter","DM Sans",ui-sans-serif,system-ui,sans-serif;color:rgba(255,255,255,.9);text-align:left}
.d-wrap{width:min(390px,84vw);display:grid;gap:14px}
.d p{margin:0}
.d-msg{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:12px;align-items:start}
.d-msg--cont{margin-top:-6px}
.d-body{display:grid;gap:6px;min-width:0}
.d-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:13px;color:#fff;flex:none;margin-top:2px}
.d-av--bot .g{width:32px;height:32px;fill:#fff}
.d-av--xs{width:16px;height:16px;font-size:8px;margin:0}
.d-name{display:flex;align-items:center;gap:6px;font-weight:600;white-space:nowrap}
.d-app{display:inline-flex;align-items:center;gap:2px;height:16px;padding:0 4px;border-radius:4px;background:#5865f2;font-size:9px;font-weight:700;text-transform:uppercase;line-height:16px}
.d-app .i{width:9px;height:9px}
.d-time{font-size:10px;font-weight:400;color:var(--t40)}
.d-used{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--t50);margin-left:44px;margin-bottom:-6px;white-space:nowrap;position:relative}
.d-used::before{content:"";position:absolute;left:-26px;top:7px;width:20px;height:10px;border:1.5px solid rgba(255,255,255,.22);border-right:0;border-bottom:0;border-top-left-radius:6px}
.d-used b{color:rgba(255,255,255,.85);font-weight:500}
.d-cmd{color:#c9cdfb;background:rgba(88,101,242,.22);border-radius:3px;padding:0 3px}
.d-box{position:relative;border-radius:8px;border:1px solid rgba(255,255,255,.16);background:#111214;padding:11px 12px 12px 15px;display:grid;gap:5px;font-size:12px;line-height:1.45;box-shadow:0 25px 50px -12px rgba(0,0,0,.6)}
.d-box::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;border-radius:8px 0 0 8px;background:var(--bar,rgba(255,255,255,.85))}
.d-box--fit{width:max-content;max-width:100%;padding:7px 11px 7px 14px}
.d-split{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:start}
.d-split>div{display:grid;gap:5px}
.d-split--tx{font-size:11px}
.d-title{font-weight:700;color:#fff;font-size:12.5px}
.d-sub{font-size:10.5px;color:var(--t50)}
.d-sub b{color:rgba(255,255,255,.85);font-weight:600}
.d-thumb{width:46px;height:46px;border-radius:6px;background:#000;display:grid;place-items:center;flex:none}
.d-thumb .g{width:34px;height:34px;fill:#fff}
.d-thumb--av{font-weight:700;font-size:19px;color:#fff}
.d-thumb--sm{width:34px;height:34px;font-size:14px}
.d-men{color:#c9cdfb;background:rgba(88,101,242,.22);border-radius:3px;padding:0 2px;font-weight:500}
.d-link{color:#00a8fc}
.d-chan{color:rgba(255,255,255,.85);background:rgba(255,255,255,.06);border-radius:3px;padding:0 3px}
.d-ref{display:inline-block;background:#000;color:#fff;font-size:9.5px;padding:0 4px;border-radius:3px;margin-right:4px;font-weight:700}
.d-quote{border-left:3px solid #4e5058;border-radius:2px;padding-left:9px;display:grid;gap:1px}
.d-quote b{color:#fff;font-weight:700}
.d-chip{background:#2b2d31;border-radius:3px;padding:0 3px}
.d-code{font-family:var(--mono);font-size:10.5px;background:#0b0b0c;border:1px solid #1f2023;border-radius:4px;padding:6px 8px;color:rgba(255,255,255,.85)}
.d-eph{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--t40)}
.d-eph .i{width:12px;height:12px}
.d-eph a{color:#00a8fc}
.d-select{display:flex;align-items:center;justify-content:space-between;min-height:32px;padding:0 9px 0 11px;border-radius:4px;background:#0e0f11;border:1px solid #232428;color:var(--t50);font-size:12px}
.d-select.is-open{border-color:#3a3c42;border-radius:4px 4px 0 0}
.d-select .i{width:15px;height:15px}
.d-select>span{display:flex;align-items:center;gap:7px}
.d-menu{margin-top:-7px;border-radius:0 0 4px 4px;background:#0e0f11;border:1px solid #3a3c42;border-top:0;padding:3px}
.d-menu p{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:3px}
.d-menu p.on{background:#1f2024}
.d-menu .i{width:15px;height:15px;color:rgba(255,255,255,.7);flex:none}
.d-menu b{display:block;font-size:12px;font-weight:500;color:#fff;line-height:1.25}
.d-menu small{display:block;font-size:10.5px;color:var(--t50)}
.d-btns{display:flex;gap:6px;flex-wrap:wrap}
.d-btn{height:26px;padding:0 10px;border-radius:4px;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;color:#fff;background:#2b2d31;white-space:nowrap}
.d-btn .i{width:13px;height:13px}
.d-btn--red{background:#da373c}.d-btn--green{background:#248046}.d-btn--blurple{background:#5865f2}
.d-btns--icons .d-btn{width:36px;padding:0;justify-content:center}
.d-embed{position:relative;border-radius:4px;background:#111214;border:1px solid rgba(255,255,255,.08);padding:9px 12px 11px 15px;display:grid;gap:6px;font-size:12px;max-width:330px;box-shadow:0 25px 50px -12px rgba(0,0,0,.6)}
.d-embed::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:4px;border-radius:4px 0 0 4px;background:var(--bar)}
.d-embed--img{width:max-content}
.d-author{display:flex;align-items:center;gap:6px;font-weight:600;font-size:11.5px;color:#fff}
.d-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:11.5px}
.d-fields b{display:block;color:#fff;font-size:11.5px}
.d-foot{font-size:10px;color:var(--t50)}
.d-bigav{width:120px;height:120px;border-radius:6px;display:grid;place-items:center;font-size:46px;font-weight:700;color:#fff;background:linear-gradient(135deg,#b48cf0,#6b3fc4)}
.d-sep{height:1px;background:rgba(255,255,255,.07);margin:4px 0}
.d-cfg{display:grid;gap:6px;font-size:11px}
.d-cfg p{display:grid;gap:0}
.d-cfg b{color:#fff;font-size:11.5px;font-weight:700}
.d-cfg span{color:rgba(255,255,255,.72)}
.d-cfg code{font-size:10px;padding:0 3px;background:#2b2d31}
.d-label{font-size:10.5px;font-weight:700;color:#fff;margin-top:4px}
.d-tags{display:flex;gap:4px;flex-wrap:wrap;padding:4px 0}
.d-tags i{font-style:normal;font-size:10.5px;color:#fff;background:#2b2d31;border-radius:3px;padding:1px 5px}
.d-join{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t50);padding-left:8px}
.d-join .i{width:14px;height:14px;color:#23a55a}
.d-join b{color:#fff;font-weight:600}
.d-side{background:#0d0d0f;border-radius:8px;border:1px solid rgba(255,255,255,.08);padding:10px 8px}
.d-cat{display:flex;align-items:center;gap:3px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--t40);padding:0 4px 6px}
.d-cat .i{width:11px;height:11px}
.d-vc{display:flex;align-items:center;gap:7px;height:28px;padding:0 7px;border-radius:4px;font-size:12px;color:var(--t50);white-space:nowrap}
.d-vc .i{width:15px;height:15px;flex:none}
.d-vc.on{background:#1d1e22;color:#fff}

/* =====================================================================
   THE GRID: each card is the reply itself
   ===================================================================== */
.look{position:relative;padding:clamp(120px,18vh,180px) 0 clamp(140px,20vh,192px)}
.lgrid{position:relative;margin-top:64px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.gcol{display:grid;gap:12px;will-change:transform,opacity;backface-visibility:hidden}
.ec{font:400 12px/1.45 "Inter","DM Sans",ui-sans-serif,system-ui,sans-serif;color:rgba(255,255,255,.9);text-align:left;border-radius:8px;border:1px solid rgba(255,255,255,.22);background:#111214;padding:14px 15px;box-shadow:0 25px 50px -12px rgba(0,0,0,.7)}
.ec--sm{padding:12px 14px}
.ec__hd{display:flex;align-items:center;gap:7px;font-size:12px;margin-bottom:8px}
.ec__hd .g{width:15px;height:15px;fill:#fff}
.ec__hd b{font-weight:600}
.ec__t{font-weight:700;font-size:15px;color:#fff;letter-spacing:-.01em}
.ec--sm .ec__t{font-size:13px}
.ec__s{font-size:11px;color:rgba(255,255,255,.5);margin-top:3px}
.ec__s b{color:rgba(255,255,255,.85);font-weight:600}
.ec__div{height:1px;background:rgba(255,255,255,.07);margin:10px 0}
.ec__rows{display:grid;gap:3px;font-size:11.5px;color:rgba(255,255,255,.7)}
.ec__rows b{color:#fff;font-weight:600;margin-right:6px}
.ec__rows .warn{display:flex;align-items:center;gap:5px}
.ec__rows .warn svg{width:12px;height:12px;color:#ffd54e}
.ec__code{margin:0;font-family:var(--mono);font-size:10.5px;line-height:1.65;color:rgba(255,255,255,.88);background:#0b0b0c;border-radius:6px;padding:9px 11px;white-space:pre;overflow:hidden}
.ec__cfg{display:grid;gap:7px;margin-top:8px;font-size:11px}
.ec__cfg p{display:grid}
.ec__cfg b{color:#fff;font-size:11.5px}
.ec__cfg span{color:rgba(255,255,255,.7)}
.ec__cfg code{font-size:10px;padding:0 3px;background:#2b2d31}
.ec .men{font-style:normal;color:#c9cdfb;background:rgba(88,101,242,.22);border-radius:3px;padding:0 2px}
.ec .chan{font-style:normal;color:rgba(255,255,255,.85);background:rgba(255,255,255,.06);border-radius:3px;padding:0 3px}
.ec__btns{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.ec__btns span{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:4px;background:#2b2d31;font-size:10.5px;font-weight:500;color:#fff}
.ec__btns--ic span svg{width:12px;height:12px}
.ec__split{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start}
.ec__q{border-left:3px solid #4e5058;padding-left:9px;margin-top:6px;display:grid;gap:1px;font-size:11px}
.ec__q b{color:#fff}
.ec__thumb{width:40px;height:40px;border-radius:6px;display:grid;place-items:center;font-weight:700;font-size:16px;color:#fff}
.ec .ref{display:inline-block;background:#000;color:#fff;font-size:9.5px;padding:0 4px;border-radius:3px;margin-right:4px}
.ec__line{font-size:12.5px}
.ec__line b{color:#fff}

/* =====================================================================
   PLATFORMS
   ===================================================================== */
.plats{position:relative;padding:clamp(60px,9vh,100px) 0 clamp(60px,9vh,100px)}
.strips{margin-top:56px;display:grid;gap:18px}
.strip{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);padding:4px 0}
.track{display:flex;gap:28px;width:max-content;will-change:transform}
.plat{display:flex;align-items:center;gap:20px;width:350px;height:118px;padding:0 28px;border-radius:22px;border:1px solid rgba(var(--brand),.16);background:radial-gradient(90% 120% at 0% 50%,rgba(var(--brand),.18) 0%,transparent 62%),linear-gradient(160deg,rgba(13,12,30,.42) 0%,rgba(10,10,12,.7) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 22px rgba(0,0,0,.4);flex:none;transition:transform .35s var(--ease),border-color .35s ease}
@media (hover:hover){.plat:hover{transform:translateY(-3px);border-color:rgba(var(--brand),.4)}}
.plat__ic{width:60px;height:60px;flex:none;border-radius:16px;display:grid;place-items:center;border:1px solid rgba(var(--brand),.28);background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.32));box-shadow:0 4px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);color:rgb(var(--brand))}
.plat__ic svg{width:27px;height:27px}
.plat__n{font-family:var(--sans);font-size:20px;font-weight:600;letter-spacing:-.02em;color:rgba(255,255,255,.96)}
.plat__d{font-size:14px;color:rgba(237,237,237,.66);margin-top:2px}
.plat__d em{font-style:normal;color:rgb(var(--brand));filter:brightness(1.15)}

/* =====================================================================
   MORE
   ===================================================================== */
.more{position:relative;padding:clamp(80px,12vh,130px) 0 clamp(120px,18vh,180px)}
.mfs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:56px}
.mf{position:relative;padding:22px 22px 24px;border-radius:16px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));transition:border-color .3s ease,transform .35s var(--ease)}
@media (hover:hover){.mf:hover{border-color:rgba(255,255,255,.14);transform:translateY(-2px)}}
.mf__ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(#1a1a1f,#111114);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.mf__ic .i{width:17px;height:17px;color:var(--acc-2)}
.mf h3{font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.01em;margin-top:18px;color:#f2f2f2}
.mf p{color:var(--text);font-size:14px;line-height:1.55;margin-top:6px}
.more__cta{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:48px}
.more__and{font-family:var(--display);font-size:14px;color:rgba(237,237,237,.5);display:flex;align-items:center;gap:14px}
.more__and::before,.more__and::after{content:"";width:80px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18))}
.more__and::after{transform:scaleX(-1)}

/* =====================================================================
   PREMIUM
   ===================================================================== */
.premium{position:relative;padding:clamp(170px,24vh,240px) 0 clamp(80px,12vh,120px)}
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:56px;align-items:stretch}
.tier{display:flex;flex-direction:column;border-radius:20px;padding:26px 24px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01))}
.tier--top{border-color:rgba(166,228,245,.35);background:radial-gradient(120% 50% at 50% 0%,rgba(166,228,245,.08),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01))}
.tier__top{min-height:162px;display:flex;flex-direction:column}
.tier__name{font-family:var(--sans);font-weight:600;font-size:15px;color:#f2f2f2;display:flex;align-items:center;gap:10px;min-height:22px}
.pill{margin-left:auto;font-size:11px;font-weight:600;color:#0a0a0a;background:var(--acc);border-radius:999px;padding:3px 9px}
.tier__price{font-family:var(--hero);font-size:42px;font-weight:700;letter-spacing:-.05em;line-height:1;margin-top:18px;color:#fff}
.tier__price small{font-family:var(--sans);font-size:14px;color:rgba(237,237,237,.45);font-weight:400;letter-spacing:0;margin-left:7px}
.tier__note{color:var(--text);font-size:14px;line-height:1.5;margin-top:12px}
.tier .btn{margin-top:auto;flex:none}
.tier__top+.btn{margin-top:4px}
.tier__list{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);display:grid;gap:14px}
.tier__list li{position:relative;padding-left:26px}
.tier__list li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;background:rgba(166,228,245,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.4 2.4L11.5 6' fill='none' stroke='%23a6e4f5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.tier__list b{display:block;font-weight:600;color:#f2f2f2;font-size:14px;line-height:1.3}
.tier__list span{display:block;color:rgba(237,237,237,.5);font-size:13px;line-height:1.5;margin-top:2px}
.tier__list code{font-size:11.5px;padding:1px 5px}
.limits{margin-top:14px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.015);overflow:hidden}
.limits summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;height:52px;font-weight:500;font-size:14px;color:rgba(255,255,255,.85);transition:background-color .2s ease}
.limits summary::-webkit-details-marker{display:none}
@media (hover:hover){.limits summary:hover{background:rgba(255,255,255,.03)}}
.limits summary svg{width:17px;height:17px;transition:transform .4s var(--expo)}
.limits[open] summary svg{transform:rotate(180deg)}
.limits__body{overflow-x:auto;border-top:1px solid var(--line)}
.limits table{width:100%;border-collapse:collapse;min-width:540px}
.limits th,.limits td{padding:12px 20px;text-align:left;font-size:14px;border-bottom:1px solid var(--line)}
.limits thead th{font-size:12.5px;font-weight:500;color:var(--t50)}
.limits tbody th{font-weight:500;color:rgba(255,255,255,.85)}
.limits td{color:var(--t50);font-variant-numeric:tabular-nums}
.limits td:last-child,.limits thead th:last-child{color:#fff;background:rgba(166,228,245,.04)}
.limits tbody tr:last-child>*{border-bottom:0}
.buy{margin-top:22px;text-align:center;color:var(--t50);font-size:13.5px;line-height:1.6}
.buy b{color:#fff;font-weight:500}
.buy a{color:rgba(255,255,255,.85);text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:3px}

/* =====================================================================
   CTA
   ===================================================================== */
.cta{position:relative;padding:clamp(60px,10vh,100px) 0 clamp(100px,14vh,150px)}
.cta__card{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;min-height:360px;border-radius:32px;padding:clamp(40px,6vw,72px);background:linear-gradient(180deg,#0f1112,#0b0c0d);border:1px solid rgba(255,255,255,.08)}
.cta__glow{position:absolute;right:-10%;top:50%;width:70%;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(166,228,245,.12),transparent 70%);pointer-events:none}
.cta__txt{position:relative;z-index:2}
.cta__h{font-family:var(--hero);font-weight:700;font-size:clamp(32px,3.8vw,50px);line-height:1.05;letter-spacing:-.05em;color:#f2f2f2}
.cta__txt>p{color:var(--text);font-size:16px;line-height:1.6;max-width:42ch;margin-top:18px}
.cta__act{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.cta__gear{position:relative;justify-self:end;width:min(320px,100%);aspect-ratio:1;margin-right:-6%}
.cta__gear svg{width:100%;height:100%;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));animation:turn 40s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
.fx .cta__gear{opacity:0;transform:translate3d(40%,0,0) rotate(160deg);transition:opacity .8s ease,transform 1.6s cubic-bezier(.16,1,.3,1)}
.fx .cta__gear.in{opacity:1;transform:none}

/* =====================================================================
   FOOTER
   ===================================================================== */
.foot{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.foot__in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding-block:52px 40px}
.foot__c{color:var(--t50);font-size:13.5px;margin-top:12px;max-width:26ch}
.foot h2{font-family:var(--sans);font-size:13px;font-weight:500;color:rgba(237,237,237,.62);margin-bottom:12px}
.foot ul{display:grid;gap:7px}
.foot ul a{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:rgba(255,255,255,.78)}
.foot .ext{width:12px;height:12px;opacity:.6}
@media (hover:hover){.foot ul a:hover{color:#fff}}
.foot__mark{font-family:var(--hero);font-weight:700;font-size:clamp(90px,19vw,270px);line-height:.8;letter-spacing:-.06em;text-align:center;margin:10px 0 -.12em;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 80%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;pointer-events:none}

/* =====================================================================
   THE GEAR
   ===================================================================== */
.cog{position:absolute;left:0;top:0;width:var(--cd,480px);height:var(--cd,480px);z-index:3;will-change:transform;pointer-events:none}
.cog.is-hero{pointer-events:auto;cursor:pointer}
.cog__glow{position:absolute;inset:-40%;border-radius:50%;background:radial-gradient(closest-side,rgba(166,228,245,.12),rgba(166,228,245,.03) 50%,transparent 72%);pointer-events:none}
.cog__rings{position:absolute;inset:0;pointer-events:none;transition:opacity .7s ease}
.cog__rings i{position:absolute;inset:-9%;border-radius:50%;border:1px solid rgba(255,255,255,.08)}
.cog__rings i:nth-child(2){inset:-25%;border-color:rgba(255,255,255,.055)}
.cog__rings i:nth-child(3){inset:-43%;border-color:rgba(255,255,255,.04);border-style:dashed}
.cog__tilt{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.cog__svg{position:absolute;inset:0;width:100%;height:100%;will-change:transform;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}
.cog__icons{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;transition:opacity .4s ease}
.cog__icons svg{grid-area:1/1;width:calc(var(--cd,480px) * .14);height:calc(var(--cd,480px) * .14);color:#fff;opacity:0;transform:scale(.6) rotate(-20deg);transition:opacity .4s ease,transform .7s var(--expo)}
.cog__icons svg.on{opacity:.94;transform:none}
.cog__icons.off{opacity:0}


/* =====================================================================
   SECTIONS: one card language for every feature
   ===================================================================== */
.sec{position:relative;padding:clamp(110px,16vh,170px) 0 clamp(40px,6vh,70px)}
.sec .tk{margin-top:52px}
.tkc h3{color:var(--acc)}
.tkc p em,.tkc p code{font-style:normal;color:#f2f2f2;font-weight:500}
.tkc p code{background:none;padding:0;font-family:var(--sans);font-size:inherit}
.tk--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tk--3 .tkc{grid-column:auto}
.tkc__art--top{place-items:start center}
/* transactions */
.tk--tx{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto}
.tk--tx .tkc{grid-column:auto}
.tk--tx .tkc--tall{grid-row:span 2}
.tk--tx .tkc--wide{grid-column:1/-1}
.rcpt{width:min(100%,330px);display:grid;gap:12px}
.rcpt__cmd{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:10px 12px;border-radius:10px;background:#17181b;border:1px solid rgba(255,255,255,.1);font-size:12px;margin:0!important}
.rcpt__cmd svg{width:16px;height:16px;color:rgba(237,237,237,.55)}
.rcpt__cmd code{background:none;padding:0;font-size:12px}
.opt{display:inline-flex;height:22px;border-radius:5px;overflow:hidden;background:#24262b;font-size:11.5px;color:#e5e5e5}
.opt b{display:flex;align-items:center;padding:0 6px;background:#33363c;font-weight:500}
.opt{padding-right:7px;gap:6px;align-items:center}
.rcpt__card{border-radius:12px;background:#121315;border:1px solid rgba(255,255,255,.12);padding:14px 16px;box-shadow:0 20px 40px -20px rgba(0,0,0,.9)}
.rcpt__top{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#f2f2f2;margin:0!important}
.rcpt__top .ref{background:#000;font-size:10px;padding:1px 5px;border-radius:4px}
.ok{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--acc)}
.ok svg{width:15px;height:15px}
.rcpt dl{margin:12px 0 0;display:grid;gap:8px}
.rcpt dl div{display:flex;justify-content:space-between;align-items:center;font-size:12.5px}
.rcpt dt{color:rgba(237,237,237,.45)}
.rcpt dd{margin:0;color:#f2f2f2;display:flex;align-items:center;gap:6px}
.rcpt dd .av{width:16px;height:16px;font-size:8px}
.rcpt .amt{font-family:var(--hero);font-weight:600;font-size:15px}
.fx .tkc .rcpt__card{opacity:0;transform:translateY(10px);transition:opacity .6s ease .7s,transform .8s var(--expo) .7s}
.fx .tkc.in .rcpt__card{opacity:1;transform:none}
.lb{list-style:none;margin:0;padding:0;width:min(100%,300px);display:grid;gap:8px}
.lb li{display:grid;grid-template-columns:14px 20px auto 1fr auto;align-items:center;gap:8px;font-size:12.5px;color:#f2f2f2}
.lb .rk{color:rgba(237,237,237,.4);font-weight:600}
.lb .av{width:20px;height:20px;font-size:9px}
.lb .nm{color:rgba(237,237,237,.8)}
.lb .bar{height:4px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden}
.lb .bar i{display:block;height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,rgba(166,228,245,.35),var(--acc));transition:width 1.2s var(--expo) .5s}
.tkc.in .lb .bar i,html:not(.fx) .lb .bar i{width:var(--w)}
.lb b{font-family:var(--hero);font-weight:600;font-size:12.5px}
.side--stats{margin:0;width:min(100%,300px)}
.side__ch svg{width:15px;height:15px;color:rgba(237,237,237,.4);flex:none}
.side__mem{display:flex;align-items:center;gap:8px;height:26px;padding-left:30px;font-size:12.5px;color:rgba(237,237,237,.7)}
.side__mem .av{width:18px;height:18px;font-size:8px}
.roles{flex:1;position:relative;padding:40px 44px 56px;min-height:150px}
.roles__track{position:relative;height:6px;border-radius:3px;background:rgba(255,255,255,.07);margin-top:28px}
.roles__fill{position:absolute;left:0;top:0;bottom:0;width:var(--fill,0%);border-radius:3px;background:linear-gradient(90deg,rgba(166,228,245,.3),var(--acc))}

.roles__dot{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;transform:translate(-50%,-50%);background:#0d0e10;border:2px solid rgba(255,255,255,.25)}
.roles__pills span{position:absolute;top:calc(40px + 28px + 22px);transform:translateX(-50%);display:grid;justify-items:center;gap:4px;font-size:12px}
.roles__pills b{color:rgba(237,237,237,.5);font-weight:500}
.roles__pills i{font-style:normal;color:#f2f2f2;background:#17181b;border:1px solid rgba(255,255,255,.12);padding:3px 10px;border-radius:999px}

.tkc--roles .tkc__txt{flex:0 0 36%}
/* messages */
.emb{flex:1;display:grid;justify-items:center;gap:10px;padding:28px 30px}
.emb__tools{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.emb__tools span{height:26px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;font-size:11.5px;color:rgba(237,237,237,.6);background:#16171a;border:1px solid rgba(255,255,255,.1);animation:pick 9s infinite}
.emb__tools span:nth-child(2){animation-delay:1.5s}.emb__tools span:nth-child(3){animation-delay:3s}.emb__tools span:nth-child(4){animation-delay:4.5s}.emb__tools span:nth-child(5){animation-delay:6s}.emb__tools span:nth-child(6){animation-delay:7.5s}
.emb__card{position:relative;width:min(100%,340px);border-radius:6px;background:#121315;border:1px solid rgba(255,255,255,.1);padding:11px 14px 13px 17px;display:grid;gap:6px;font-size:12px;color:rgba(237,237,237,.8)}
.emb__card::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:4px;border-radius:6px 0 0 6px;background:var(--acc)}
.emb__auth{display:flex;align-items:center;gap:6px;font-weight:600;color:#f2f2f2;font-size:11.5px}
.emb__auth .av{width:16px;height:16px;font-size:8px}
.emb__t{font-weight:700;color:#fff;font-size:13px}
.emb__d i,.emb__f i{font-style:normal;color:#c9cdfb;background:rgba(88,101,242,.22);border-radius:3px;padding:0 2px}
.emb__f{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.emb__f b{display:block;color:#fff;font-size:11.5px}
.emb__btns{display:flex;gap:6px;width:min(100%,340px)}
.emb__btns span{height:28px;padding:0 12px;border-radius:5px;display:inline-flex;align-items:center;font-size:11.5px;font-weight:500;color:#fff;background:#2b2d31}
.emb__btns .b1{background:#e9f8fc;color:#0a0a0a}
.ar{width:min(100%,300px);display:grid;gap:10px}
.ar__modes{display:flex;flex-wrap:wrap;gap:5px}
.ar__modes span{height:24px;padding:0 9px;border-radius:999px;display:inline-flex;align-items:center;font-size:11px;color:rgba(237,237,237,.55);border:1px solid rgba(255,255,255,.1)}
.ar__modes .on{color:#0a0a0a;background:var(--acc);border-color:transparent}
.bub{display:flex;align-items:flex-start;gap:8px;margin:0!important}
.bub .av{width:22px;height:22px}
.bub__t{display:grid;gap:6px;padding:7px 11px;border-radius:12px;background:#17181b;border:1px solid rgba(255,255,255,.08);font-size:12.5px;color:#f2f2f2}
.bub--bot .bub__t{border-top-left-radius:4px}
.bub__img{width:80px;height:80px;border-radius:8px;display:grid;place-items:center;font-weight:700;font-size:28px;color:#fff;background:linear-gradient(135deg,#b48cf0,#6b3fc4)}
.fx .tkc .bub--bot{opacity:0;transform:translateY(8px);transition:opacity .5s ease 1s,transform .7s var(--expo) 1s}
.fx .tkc.in .bub--bot{opacity:1;transform:none}
.ev{list-style:none;margin:0;padding:0;width:min(100%,300px);display:grid;gap:8px}
.ev li{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:10px;padding:9px 11px;border-radius:12px;background:#121315;border:1px solid rgba(255,255,255,.08);font-size:12.5px;color:rgba(237,237,237,.75)}
.ev li b{color:#f2f2f2;font-weight:600}
.ev li em{grid-column:2;font-style:normal;font-size:11px;color:rgba(237,237,237,.45)}
.ev__ic{grid-row:span 2;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.05)}
.ev__ic svg{width:15px;height:15px}
.ev__ic--g svg{color:#4ade80}.ev__ic--p svg{color:#f47fff}.ev__ic--r svg{color:#ff8a8a}
.fx .tkc .ev li{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .7s var(--expo);transition-delay:calc(.5s + var(--i) * .35s)}
.fx .tkc.in .ev li{opacity:1;transform:none}
/* one design */
.ec__hd .app{display:inline-flex;align-items:center;height:14px;padding:0 4px;border-radius:3px;background:#5865f2;font-size:8.5px;font-weight:700;color:#fff}
.ec__sel{display:flex;align-items:center;justify-content:space-between;height:30px;padding:0 9px 0 11px;margin-top:10px;border-radius:4px;background:#0e0f11;border:1px solid #232428;color:rgba(255,255,255,.5);font-size:11.5px}
.ec__sel svg{width:14px;height:14px}
.ec__thumb--g{background:#000}
.ec__thumb--g .g{width:30px;height:30px;fill:#fff}
.tk--3 .ec{width:100%;box-shadow:none;border-color:rgba(255,255,255,.14)}
.plats .strips{margin-top:52px}
.plats .track{gap:16px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .viewer{grid-template-columns:1fr}
  .viewer__tabs{grid-template-columns:1fr 1fr;border-right:0;border-bottom:1px solid var(--line)}
  .ebw{grid-template-columns:1fr;gap:16px}
  .ebw__arrow{transform:rotate(90deg)}
  .bento{grid-template-columns:1fr;max-width:520px}
  .tk{grid-template-columns:1fr 1fr}
  .tk--3{grid-template-columns:1fr}
  .tk--tx{grid-template-columns:1fr}
  .tk--tx .tkc--tall{grid-row:auto}
  .roles{padding:30px 28px 60px}
  .tkc,.tkc--sm{grid-column:span 1}
  .tkc--wide{grid-column:1/-1}
  .tkc--vm{flex-direction:column;align-items:stretch}
  .tkc--vm .tkc__txt{flex:none;padding:30px 32px 0}
  .vmi{margin:22px 22px 22px}
  .tkc--sm:last-child{grid-column:1/-1}
  .frow,.frow--flip{grid-template-columns:1fr}
  .cta__card{grid-template-columns:1fr}
  .cta__gear{position:absolute;right:-60px;bottom:-60px;width:220px;opacity:.5;margin:0}
  .nav__links{display:none}
  .nav__menu{display:grid}
  .frow,.frow--flip{grid-template-columns:1fr;gap:44px}
  .frow--flip .frow__txt{order:0;padding-left:0}
  .lgrid{grid-template-columns:1fr 1fr}
  .lgrid .gcol:nth-child(3){grid-column:1/-1;grid-template-columns:1fr 1fr}
  .mfs{grid-template-columns:1fr 1fr}
  .tiers{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .tier--top{order:-1}
  .foot__in{grid-template-columns:1fr 1fr 1fr}
  .foot__brand{grid-column:1/-1}
}

@media (max-width:640px){
  .viewer__tabs{grid-template-columns:1fr}
  .rv-tab span{display:none}
  .viewer__stage{padding:20px 14px;min-height:0}
  .dmsg{padding:12px}
  .ebw{padding:18px 16px 22px}
  .tk{grid-template-columns:1fr}
  .tkc--roles{flex-direction:column;align-items:stretch}
  .tkc--roles .tkc__txt{flex:none}
  .sc{width:260px}
  .tkc--wide{flex-direction:column;align-items:stretch}
  .tkc--wide .tkc__txt{flex:none;padding:26px 24px 0}
  .vmi{margin:18px 12px 12px;padding:14px 12px 12px;border-radius:14px}
  .vmi__legend li{font-size:12.5px;gap:8px}
  .vmi__legend b{font-size:11.5px}
  .ctls{gap:8px;margin-top:14px}
  .ctl{height:52px;border-radius:12px}
  .ctl svg{width:23px;height:23px}
  .tkc--sm:last-child{grid-column:auto}
  .frow .h2{white-space:normal}
  .nav__pill{width:100%;justify-content:space-between}
  .brand{margin-right:0}
  .hero__cta{flex-direction:column;align-items:stretch;width:100%;max-width:340px}
  .lgrid,.lgrid .gcol:nth-child(3){grid-template-columns:1fr}
  .mfs{grid-template-columns:1fr}
  .plat{width:280px;height:100px;padding:0 20px;gap:16px;border-radius:20px}
  .plat__ic{width:50px;height:50px;border-radius:14px}
  .plat__n{font-size:17px}
  .cta__card{border-radius:24px}
  .foot__in{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .tilt{transform:none!important;opacity:1!important}
}

/* socials: the earlier cards, with a coloured keyword and a "Soon" tag */
.plat__tx{min-width:0}
.plat__n{display:flex;align-items:center;gap:10px}
.plat__soon{font-style:normal;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:0;color:rgba(237,237,237,.55);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:2px 8px}
.plats{padding-top:clamp(40px,6vh,70px);padding-bottom:clamp(40px,6vh,70px)}
.plats .track{gap:28px}

/* the embed builder card: words on top, the real reply and a finished embed below */
.tkc--stack{flex-direction:column;align-items:stretch}
.tkc--stack .tkc__txt{flex:none;padding:30px 34px 0}
.tkc--stack .tkc__txt p{max-width:62ch}
.ebw{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);align-items:center;gap:8px;padding:24px 28px 30px}
.ebw__pane{display:grid;gap:10px;align-content:start}
.ebw__lbl{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(237,237,237,.4)}
.ebw__arrow{display:grid;place-items:center;color:rgba(237,237,237,.35)}
.ebw__arrow svg{width:18px;height:18px}

/* Discord, drawn the way your bot actually replies */
.dmsg{font:400 13px/1.4 "Inter","DM Sans",ui-sans-serif,system-ui,sans-serif;color:rgba(255,255,255,.88);border-radius:14px;background:#0b0c0d;border:1px solid rgba(255,255,255,.07);padding:14px 16px}
.dmsg__used{display:flex;align-items:center;gap:6px;font-size:11.5px;color:rgba(255,255,255,.5);margin:0 0 6px 46px;position:relative;white-space:nowrap}
.dmsg__used::before{content:"";position:absolute;left:-28px;top:7px;width:22px;height:10px;border:1.5px solid rgba(255,255,255,.2);border-right:0;border-bottom:0;border-top-left-radius:6px}
.dmsg__used .av{width:16px;height:16px;font-size:8px}
.dmsg__used b{color:rgba(255,255,255,.85);font-weight:500}
.cmdm{color:#c9cdfb;background:rgba(88,101,242,.24);border-radius:4px;padding:0 4px;font-weight:500}
.dmsg__row{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px}
.dmsg__av{width:34px;height:34px}
.dmsg__av svg{width:34px;height:34px}
.dmsg__body{display:grid;gap:7px;min-width:0}
.dmsg__hd{display:flex;align-items:center;gap:6px;white-space:nowrap}
.dmsg__hd b{color:#f2f3f5;font-weight:600;font-size:14px}
.dmsg__hd .app{display:inline-flex;align-items:center;gap:2px;height:16px;padding:0 4px;border-radius:4px;background:#5865f2;color:#fff;font-size:9.5px;font-weight:700}
.dmsg__hd .app svg{width:9px;height:9px}
.dmsg__hd .t{font-size:11px;color:rgba(255,255,255,.4)}
.demb{position:relative;border-radius:5px;background:#131416;border:1px solid rgba(255,255,255,.08);padding:10px 14px 12px;display:grid;gap:6px;font-size:12.5px;line-height:1.45}
.demb--bar{padding-left:17px}
.demb--bar::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:4px;border-radius:5px 0 0 5px;background:var(--acc)}
.demb__t{font-weight:700;color:#fff;font-size:13.5px}
.demb__d{color:rgba(255,255,255,.82)}
.demb__a{display:flex;align-items:center;gap:6px;font-weight:600;font-size:12px;color:#fff}
.demb__a .av{width:18px;height:18px;font-size:8px}
.demb i{font-style:normal;color:#c9cdfb;background:rgba(88,101,242,.22);border-radius:3px;padding:0 2px}
.demb__f{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:12px;color:rgba(255,255,255,.8)}
.demb__f b{display:block;color:#fff}
.demb__ft{font-size:11px;color:rgba(255,255,255,.45)}
.dbtns{display:flex;flex-wrap:wrap;gap:6px}
.dbtns span{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:7px;background:#232428;border:1px solid rgba(255,255,255,.06);font-size:12px;font-weight:500;color:#f2f3f5;white-space:nowrap}
.dbtns span svg{width:14px;height:14px}
.dbtns .pri{background:#e9f8fc;color:#0a0a0a;border-color:transparent}
.dbtns .red{background:#da373c;border-color:transparent}
.dbox{position:relative;border-radius:8px;background:#131416;border:1px solid rgba(255,255,255,.1);padding:12px 14px 13px 17px;display:grid;gap:5px;font-size:12.5px;line-height:1.45}
.dbox::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;border-radius:8px 0 0 8px;background:var(--bar,rgba(255,255,255,.85))}
.dbox--fit{width:max-content;max-width:100%;padding:8px 12px 8px 15px}
.dbox b{color:#fff}
.dbox__h{font-weight:700;font-size:16px;color:#fff;letter-spacing:-.01em}
.dbox__h2{font-weight:700;font-size:13.5px;color:#fff}
.dbox__s{color:rgba(255,255,255,.55);font-size:12px}
.dbox__div{display:block;height:1px;background:rgba(255,255,255,.08);margin:6px 0}
.dbox__rows{display:grid;gap:2px;font-size:12.5px;color:rgba(255,255,255,.8)}
.dbox__rows .warn{display:flex;align-items:center;gap:5px}
.dbox__rows .warn svg{width:13px;height:13px;color:#ffd54e}
.dbox__rows code{font-size:11px;background:#232428;padding:1px 5px}
.dbox__code{margin:0;font-family:var(--mono);font-size:11.5px;line-height:1.7;color:rgba(255,255,255,.9);background:#0b0c0d;border:1px solid #1f2023;border-radius:6px;padding:9px 12px;white-space:pre;overflow:hidden}
.dbox__split{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:start}
.dbox__split>div{display:grid;gap:5px}
.dbox__th{width:52px;height:52px;border-radius:7px;background:#000;display:grid;place-items:center}
.dbox__th .g{width:38px;height:38px;fill:#fff}
.dbox__th--av{background:linear-gradient(135deg,#b48cf0,#6b3fc4);color:#fff;font-weight:700;font-size:20px}
.dq{border-left:3px solid #4e5058;border-radius:2px;padding-left:10px;display:grid;gap:1px;font-size:12.5px}
.men{font-style:normal;color:#c9cdfb;background:rgba(88,101,242,.22);border-radius:3px;padding:0 2px;font-weight:500}
.chip{background:#2b2d31;border-radius:3px;padding:0 4px}
.dbox .ref,.dmsg .ref{display:inline-block;background:#000;color:#fff;font-size:10px;padding:0 5px;border-radius:3px;margin-right:5px;font-weight:700}
.dsel{display:flex;align-items:center;justify-content:space-between;height:36px;padding:0 10px 0 12px;border-radius:6px;background:#0e0f11;border:1px solid #26272b;color:rgba(255,255,255,.5);font-size:12.5px}
.dsel svg{width:16px;height:16px}

/* "one design": pick a reply, see the real thing */
.viewer{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:0;margin-top:52px;border-radius:24px;overflow:hidden;background:linear-gradient(180deg,#111214,#0d0e10);border:1px solid rgba(255,255,255,.07)}
.viewer__tabs{display:grid;align-content:start;gap:6px;padding:18px;border-right:1px solid rgba(255,255,255,.06)}
.rv-tab{position:relative;display:grid;gap:4px;text-align:left;padding:16px 18px;border-radius:16px;border:1px solid transparent;color:inherit;transition:background-color .25s ease,border-color .25s ease;overflow:hidden}
.rv-tab b{font-size:15px;font-weight:600;color:rgba(237,237,237,.7);transition:color .25s ease}
.rv-tab span{font-size:13.5px;line-height:1.5;color:rgba(237,237,237,.45)}
@media (hover:hover){.rv-tab:hover b{color:#f2f2f2}}
.rv-tab.is-on{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.08)}
.rv-tab.is-on b{color:var(--acc)}
.rv-tab.is-on span{color:rgba(237,237,237,.68)}
.rv-tab__bar{position:absolute;left:18px;right:18px;bottom:8px;height:2px;border-radius:1px;background:rgba(255,255,255,.06);overflow:hidden;opacity:0}
.rv-tab__bar::after{content:"";position:absolute;inset:0;background:var(--acc);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.rv-tab.is-on .rv-tab__bar{opacity:1}
.viewer__stage{position:relative;display:grid;align-items:center;padding:34px 36px;min-height:430px;background:radial-gradient(70% 60% at 50% 40%,rgba(166,228,245,.05),transparent 70%)}
.rv-pane{grid-area:1/1;opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .6s var(--expo);pointer-events:none}
.rv-pane.is-on{opacity:1;transform:none;pointer-events:auto}
.rv-pane .dmsg{max-width:470px;margin:0 auto;padding:18px 20px}

/* the logo badge was drawn black on black */
.badge--logo svg{fill:var(--acc);color:var(--acc)}

/* glow that only animates opacity (cheap, and it can't flicker the layout) */
.mini-select__list li,.emb__tools span{animation:none!important;position:relative}
.mini-select__list li::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(166,228,245,.1);opacity:0;animation:pickO 6s infinite;pointer-events:none}
.mini-select__list li:nth-child(2)::after{animation-delay:2s}.mini-select__list li:nth-child(3)::after{animation-delay:4s}
@keyframes pickO{0%,30%{opacity:1}34%,100%{opacity:0}}
/* animations rest while their card is off screen */
.tkc:not(.vis) *,.tkc:not(.vis) *::after{animation-play-state:paused!important}

/* narrow screens (kept after the rules above so they win) */
@media (max-width:1000px){
  .viewer{grid-template-columns:1fr}
  .viewer__tabs{grid-template-columns:1fr 1fr;border-right:0;border-bottom:1px solid var(--line)}
  .ebw{grid-template-columns:1fr;gap:16px}
  .ebw__arrow{transform:rotate(90deg)}
}
@media (max-width:640px){
  .viewer__tabs{grid-template-columns:1fr 1fr;padding:12px;gap:4px}
  .rv-tab{padding:12px 14px}
  .rv-tab b{font-size:14px}
  .rv-tab span{display:none}
  .viewer__stage{padding:18px 12px 22px;min-height:0}
  .rv-pane .dmsg{padding:12px}
  .dmsg__used{margin-left:44px}
  .ebw{padding:18px 16px 22px}
  .plat{width:280px}
}

/* =====================================================================
   BETWEEN SECTIONS: a gear rack that slides as you scroll, dotted bands,
   and a faint dot grid behind each heading
   ===================================================================== */
.dots--slim{height:70px;margin-top:clamp(30px,5vh,60px)}
.sec>.wrap{position:relative}
.sec .sh{position:relative}
.sec .sh>*{position:relative}

/* the bot's own emoji */
.emo{width:18px;height:18px;vertical-align:-3px;margin-right:6px;display:inline-block}
.emo--sm{width:15px;height:15px;margin-right:2px}
.dbox--fb{padding:10px 14px 10px 16px}
.dbox--fb p{display:flex;align-items:center;flex-wrap:wrap;gap:0 4px}
.dbox--fb code{font-size:11px;background:#232428;padding:1px 5px}
.dbox--tier{gap:6px}
.dbox--tier .dbox__h2{display:flex;align-items:center;gap:8px;font-size:14.5px}
.tico{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:#4a4d55}
.tico svg{width:13px;height:13px;color:#fff}
.tico.t1 svg{color:#f6c445}.tico.t2 svg{color:#8fdcf2}
.rv-pane .dmsg__body{gap:8px}

/* tickets: the panel's settings */
.cfg{list-style:none;margin:0;padding:6px;width:min(100%,320px);border-radius:12px;background:#121315;border:1px solid rgba(255,255,255,.1)}
.cfg li{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:38px;padding:0 10px;border-radius:8px;font-size:12.5px}
.cfg li+li::before{content:"";position:absolute;left:10px;right:10px;top:0;height:1px;background:var(--line)}
.cfg__k{display:flex;align-items:center;gap:9px;color:#f2f2f2;font-weight:500}
.cfg__k svg{width:15px;height:15px;color:var(--acc)}
.cfg__v{color:rgba(237,237,237,.6);white-space:nowrap}
.cfg__v code{font-size:11px;background:#232428;padding:1px 6px}
.cfg .men{font-style:normal;color:#c9cdfb;background:rgba(88,101,242,.22);border-radius:3px;padding:0 3px}
.fx .tkc .cfg li{opacity:0;transform:translateX(-6px);transition:opacity .5s ease,transform .6s var(--expo);transition-delay:calc(.3s + var(--i) * .12s)}
.fx .tkc.in .cfg li{opacity:1;transform:none}

/* transactions: a ledger */
.ledger{width:min(100%,340px);border-radius:12px;background:#121315;border:1px solid rgba(255,255,255,.1);overflow:hidden}
.ledger__hd{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 14px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:600;color:#f2f2f2;margin:0!important}
.ledger__tier{font-size:10.5px;font-weight:600;color:#0a0a0a;background:var(--acc);border-radius:999px;padding:2px 8px}
.ledger ul{list-style:none;margin:0;padding:6px}
.ledger li{position:relative;display:grid;grid-template-columns:auto 22px 1fr auto;align-items:center;gap:9px;height:46px;padding:0 8px;border-radius:8px;font-size:12.5px}
.ledger li+li::before{content:"";position:absolute;left:8px;right:8px;top:0;height:1px;background:var(--line)}
.ledger .ref{background:#000;color:#fff;font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px}
.ledger .av{width:22px;height:22px;font-size:9px}
.ledger .who{display:grid;color:#f2f2f2;line-height:1.25}
.ledger .who small{font-size:11px;color:rgba(237,237,237,.45)}
.ledger li b{font-family:var(--hero);font-weight:600;font-size:13px;color:#fff}
.ledger__ft{display:flex;align-items:center;gap:6px;height:48px;padding:0 14px;border-top:1px solid var(--line);margin:0!important}
.pg{width:28px;height:24px;border-radius:5px;display:grid;place-items:center;background:#232428}
.pg svg{width:13px;height:13px;color:#f2f2f2}
.ledger__page{margin-left:auto;font-size:11.5px;color:rgba(237,237,237,.45)}
.fx .tkc .ledger li{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .6s var(--expo);transition-delay:calc(.35s + var(--i) * .1s)}
.fx .tkc.in .ledger li{opacity:1;transform:none}

/* the embed builder: one message, the preview fills in as each button is used */
.tkc--builder{flex-direction:row;align-items:stretch}
.tkc--builder .tkc__txt{flex:0 0 38%;padding:34px 0 34px 36px;display:flex;flex-direction:column}
.tkc--builder .tkc__art{padding:28px 28px 28px 20px}
.bsteps{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:8px;counter-reset:s}
.bsteps li{counter-increment:s;display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(237,237,237,.42);transition:color .3s ease}
.bsteps li::before{content:counter(s);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:600;border:1px solid rgba(255,255,255,.14);transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.bsteps li.done{color:rgba(237,237,237,.7)}
.bsteps li.done::before{background:rgba(166,228,245,.12);border-color:rgba(166,228,245,.35);color:var(--acc)}
.bsteps li.cur{color:#f2f2f2}
.bsteps li.cur::before{background:var(--acc);border-color:var(--acc);color:#0a0a0a}
.dmsg--builder{width:100%;max-width:470px}
.bld{align-content:start;padding-left:17px;transition:border-color .3s ease}
.bld::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:4px;border-radius:5px 0 0 5px;background:#2b2d31;transition:background-color .4s ease}
.bld.has::before{background:var(--acc)}
.bld__ph,.bld__real{grid-area:1/1;display:grid;gap:6px;align-content:start;transition:opacity .35s ease}
.bld.has .bld__ph{opacity:0}
.bld:not(.has) .bld__real{opacity:0}
.bld__p{max-height:0;opacity:0;overflow:hidden;transform:translateY(4px);transition:max-height .5s var(--expo),opacity .4s ease,transform .5s var(--expo)}
.bld__p.on{max-height:120px;opacity:1;transform:none}
.bld__img{border-radius:6px;background:linear-gradient(120deg,#1d3a44,#2a5664 50%,#16262c);position:relative}
.bld__img.on{height:80px}
.bld__img::after{content:"banner.png";position:absolute;left:10px;bottom:8px;font-size:10.5px;color:rgba(255,255,255,.55);font-family:var(--mono)}
.bld__btns span{transition:background-color .25s ease,border-color .25s ease,color .25s ease}

@media (max-width:1000px){
  .tkc--builder{flex-direction:column}
  .tkc--builder .tkc__txt{flex:none;padding:28px 26px 0}
  .tkc--builder .tkc__art{padding:20px 18px 24px}
}
@media (max-width:640px){.bsteps{display:none}}

/* lists: the layout most of the bot's lists share */
.dbox--plain::before{display:none}
.dbox--plain{padding:14px 16px}
.lst__title{display:flex;align-items:center;gap:6px;font-size:15px}
.lst__n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:4px;background:#232428;font-family:var(--mono);font-size:11px;font-weight:500;color:#fff}
.dbox__th--light{background:#e9eaec}
.dbox__th--light .g{fill:#111}
.lst{gap:0}
.lst__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0}
.lst__row p{margin:0}
.lst__row code{font-size:11.5px;background:#232428;padding:1px 5px}
.lst__by{margin-top:3px!important;border-left:3px solid #4e5058;padding-left:9px;font-size:11.5px;color:rgba(255,255,255,.7)}
.lst__by b{color:rgba(255,255,255,.85)}
.lst__eye{width:40px;height:30px;border-radius:7px;display:grid;place-items:center;background:#232428;border:1px solid rgba(255,255,255,.06)}
.lst__eye svg{width:16px;height:16px;color:#f2f3f5}
.lst__up{margin-top:8px!important;font-size:11.5px;color:rgba(255,255,255,.6)}
.lst__pg{font-size:11.5px;color:rgba(255,255,255,.6)}
.rv-pane .dmsg{max-width:480px}
.viewer__stage{min-height:560px}

/* the divider above "Transactions and stats": two meshed gears, a line drawing out of them */
.gdiv__line--l::after{left:0}
/* pill buttons: one light runs round the outline all the time.
   At rest it shows faintly every few seconds; hovering just fades it up, so
   nothing restarts when you move away. */
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
.pillbtn{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:999px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);font-size:14px;font-weight:500;color:#ededed;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .5s ease,background-color .5s ease,box-shadow .5s ease}
.pillbtn svg{width:17px;height:17px;color:rgba(237,237,237,.55);transition:color .4s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.pillbtn>svg:last-child{width:15px;height:15px}
.pillbtn b{color:var(--acc);font-weight:600}
.pillbtn::before,.pillbtn::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--ang),transparent 0deg,transparent 250deg,rgba(166,228,245,.9) 320deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:ang 3s linear infinite;animation-delay:var(--dl,0s)}
.pillbtn::before{animation:ang 3s linear infinite,lap 6s ease-in-out infinite;animation-delay:var(--dl,0s),var(--dl,0s)}
.pillbtn::after{opacity:0;transition:opacity .6s ease}
@media (hover:hover){.pillbtn:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.045);box-shadow:0 10px 24px -18px rgba(166,228,245,.35)}}
@media (hover:hover){.pillbtn:hover::after{opacity:1}}
@media (hover:hover){.pillbtn:hover svg{color:var(--acc)}}
@media (hover:hover){.pillbtn:hover>svg:last-child{transform:translateX(3px)}}
@keyframes ang{to{--ang:360deg}}
@keyframes lap{0%,45%{opacity:0}60%,88%{opacity:.6}100%{opacity:0}}

/* every other button lifts a little too, eased rather than instant */
.btn{transition:transform .4s cubic-bezier(.2,.8,.2,1),background-color .3s ease,border-color .3s ease,color .3s ease,box-shadow .4s ease}
@media (hover:hover){.btn:hover{transform:translateY(-2px)}}
@media (hover:hover){.btn--light:hover{box-shadow:0 12px 28px -12px rgba(166,228,245,.45)}}
@media (hover:hover){.btn--ghost:hover{box-shadow:0 12px 28px -16px rgba(255,255,255,.25)}}
.btn:active{transform:translateY(0) scale(.98)}

/* the nav: a highlight that slides to whatever you point at, and rests on where you are */
.nav__pill{transition:height .35s ease,background-color .35s ease,box-shadow .35s ease}
.nav__links{position:relative}
.nav__links a{position:relative;z-index:1;transition:color .25s ease}
.nav__links a.is-on{color:#fff}
.nav__ind{position:absolute;top:50%;left:0;height:30px;width:0;transform:translate(var(--ix,0px),-50%);border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease;pointer-events:none}
.nav__ind.on{opacity:1}
.nav__cta svg{width:14px;height:14px}
.brand{transition:opacity .2s ease}
@media (hover:hover){.brand:hover{opacity:.85}}

/* confirmations */
.eph{display:flex;align-items:center;gap:6px;font-size:11px;color:rgba(255,255,255,.45)}
.eph svg{width:13px;height:13px}
.eph a{color:#00a8fc}
.dbtns .red{background:#da373c;border-color:transparent}

/* dashboard button in the nav */


/* the nav: brand, links, then the two actions set apart */
.nav__pill{gap:2px;padding:0 6px 0 16px}
.brand__gear{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.brand:hover .brand__gear{transform:rotate(90deg)}}


/* the viewer's side column: tabs, then the colour picker */
.viewer__side{display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.06)}
.viewer__side .viewer__tabs{border-right:0}
.tint{margin:auto 18px 18px;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06)}
.tint__t{font-size:14px;font-weight:600;color:#f2f2f2}
.tint__d{font-size:12.5px;line-height:1.55;color:rgba(237,237,237,.5);margin-top:4px}
.tint__d code{font-size:11px}
.tint__sw{display:flex;gap:10px;margin-top:12px}
.sw{width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(255,255,255,.15);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
@media (hover:hover){.sw:hover{transform:scale(1.12)}}
.sw.is-on{box-shadow:0 0 0 2px #0d0e10,0 0 0 3.5px var(--c)}
.viewer .dbox:not(.dbox--fb)::before{background:var(--gc,rgba(255,255,255,.85));transition:background-color .4s ease}
.viewer .dbox--plain::before{display:block;opacity:0;transition:opacity .4s ease}
.viewer.tinted .dbox--plain::before{opacity:1}
.viewer .dbox--plain{padding-left:17px}
@media (max-width:1000px){.viewer__side{border-right:0;border-bottom:1px solid var(--line)}.tint{margin:0 12px 14px}}

/* the nav: brand on the left, links in the middle, two matching buttons on the right */
.nav__links a{padding:7px 14px;font-size:13.5px;color:rgba(237,237,237,.55)}
.nav__links a.is-on{color:#fff}@media (hover:hover){.nav__links a:hover{color:#fff}}
.nav__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 16px;border-radius:999px;font:600 13.5px/1 var(--sans);white-space:nowrap;border:1px solid transparent;transition:background-color .3s ease,border-color .3s ease,color .3s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.nav__btn svg{width:15px;height:15px}
.nav__btn--line{color:#f2f2f2;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
@media (hover:hover){.nav__btn--line:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24)}}
.nav__btn--solid{color:#0a0a0a;background:#f4f6f7}
@media (hover:hover){.nav__btn--solid:hover{background:#fff}}
@media (hover:hover){.nav__btn:hover{transform:translateY(-1px)}}

/* the divider above Transactions: one gear rolling in along a line, leaving a lit trail */

/* settings preview */
.set__lbl{font-size:11.5px;font-weight:700;color:#fff;margin-top:8px}
.set__v{display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.85)}
.set__v svg{width:15px;height:15px}
.dsel--multi{height:auto;min-height:36px;padding:5px 10px 5px 8px}
.set__tags{display:flex;flex-wrap:wrap;gap:5px}
.set__tags i{font-style:normal;font-size:11.5px;color:#fff;background:#2b2d31;border-radius:4px;padding:2px 7px}

/* the divider above Transactions: the top of a big gear, like a horizon, turning as you scroll */

/* the nav tightens smoothly with the scroll instead of switching state */

/* the divider above Transactions: one white gear, two lines drawing out of it as it arrives */
.gline{position:relative;height:60px;max-width:900px;margin:clamp(50px,7vh,80px) auto 0}
.gline__l,.gline__r{position:absolute;top:50%;height:1px;width:calc(50% - 34px);transform:scaleX(var(--p,0))}
.gline__l{right:calc(50% + 30px);transform-origin:100% 50%;background:linear-gradient(270deg,rgba(166,228,245,.5),rgba(166,228,245,.12) 45%,transparent)}
.gline__r{left:calc(50% + 30px);transform-origin:0 50%;background:linear-gradient(90deg,rgba(166,228,245,.5),rgba(166,228,245,.12) 45%,transparent)}
.gline__g{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px}
.gline__g::before{content:"";position:absolute;inset:-18px;border-radius:50%;background:radial-gradient(closest-side,rgba(166,228,245,.16),transparent 70%)}
.gline__g svg{position:relative;width:100%;height:100%;fill:#f3f6f7;transform:rotate(var(--gr,0deg))}

/* nav: equal space between the three groups, and no tint behind the logo */

/* replies: no accent bar until a colour is picked, as in Discord; statuses always keep theirs */
.viewer .dbox:not(.dbox--fb)::before{display:block;opacity:0;background:var(--gc,transparent);transition:opacity .4s ease,background-color .4s ease}
.viewer.tinted .dbox:not(.dbox--fb)::before{opacity:1}
.dbox__lead{font-size:13.5px;color:rgba(255,255,255,.85)}
.dq--help{font-size:12px;color:rgba(255,255,255,.65);gap:2px}
.dq--help b{color:rgba(255,255,255,.75)}
.dq--help .warn{display:flex;align-items:center;gap:4px}
.dq--help code{font-size:10.5px;background:#232428;padding:1px 5px}
.dbox__code--lg{font-size:13px;padding:10px 12px}

/* keep the top of the hero dark so no tint sits around the nav */
.hero__fade::before{content:"";position:fixed;left:0;right:0;top:0;height:0}
.hero::after{content:"";position:absolute;left:0;right:0;top:0;height:22%;background:linear-gradient(180deg,#06090b 0%,rgba(6,9,11,.6) 45%,transparent);pointer-events:none;z-index:1}

/* =====================================================================
   THE NAV: a compact floating pill. Logo, links on a sliding highlight,
   then the two actions as a matched pair. Tucks away on the way down.
   ===================================================================== */
.nav{transition:transform .5s cubic-bezier(.2,.8,.2,1)}

.nav__pill{position:relative;isolation:isolate;width:auto;max-width:calc(100vw - 28px);display:flex;align-items:center;gap:2px;height:calc(56px - 4px * var(--ns,0));padding:0 7px 0 16px;border-radius:999px;
  background:rgba(13,14,16,.74);backdrop-filter:saturate(1.5) blur(18px);-webkit-backdrop-filter:saturate(1.5) blur(18px);
  border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 50px -22px rgba(0,0,0,.95)}
.nav__pill::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.nav__pill .brand{margin:0 4px 0 0;font-size:15px}
.nav__sep{width:1px;height:20px;background:rgba(255,255,255,.1);margin:0 10px;flex:none}
.nav__links{display:flex;gap:2px;margin:0}
.nav__links a{padding:8px 13px;font-size:13.5px;font-weight:500;color:rgba(237,237,237,.58)}
.nav__ind{height:32px}
.nav__act{display:flex;align-items:center;gap:6px}
.nav__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 17px;border-radius:999px;font:600 13.5px/1 var(--sans);white-space:nowrap;border:1px solid transparent;transition:background-color .3s ease,border-color .3s ease,color .3s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.nav__btn svg{width:15px;height:15px;flex:none}
.nav__btn--line{color:#f2f2f2;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.13)}
@media (hover:hover){.nav__btn--line:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24)}}
.nav__btn--solid{color:#0a0a0a;background:#f4f6f7}
@media (hover:hover){.nav__btn--solid:hover{background:#fff}}
@media (hover:hover){.nav__btn:hover{transform:translateY(-1px)}}
.nav__menu{display:none;width:40px;height:40px;border-radius:50%;place-items:center;margin-left:4px}
@media (max-width:1000px){
  .nav__links,.nav__sep,.nav__btn--line{display:none}
  .nav__menu{display:grid}
  .nav__pill{width:100%;justify-content:space-between;padding:0 6px 0 14px}
  .nav__act{margin-left:auto}
}
@media (max-width:380px){
  .nav__btn--solid span{display:none}
  .nav__btn--solid{width:40px;padding:0}
  .nav__pill .brand span{font-size:14px}
}

/* the horizon at the foot of the hero, fading into the page */
.hero__horizon{position:absolute;left:0;right:0;bottom:0;height:220px;overflow:hidden;pointer-events:none;z-index:1}
.hero__horizon i{position:absolute;left:50%;top:130px;width:170vw;height:1600px;transform:translateX(-50%);border-radius:50%;
  border-top:1px solid rgba(166,228,245,.5);box-shadow:0 -26px 70px -30px rgba(166,228,245,.45),inset 0 30px 70px -44px rgba(166,228,245,.22);
  -webkit-mask:linear-gradient(90deg,transparent 6%,#000 32%,#000 68%,transparent 94%);mask:linear-gradient(90deg,transparent 6%,#000 32%,#000 68%,transparent 94%)}
.hero__horizon::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(180deg,transparent,var(--bg))}

/* every band the same height, like the ones around Socials */
.dots{height:90px}
.dots--slim{height:90px;margin-top:0}

/* =====================================================================
   NARROW SCREENS AND HEAVY ZOOM
   ===================================================================== */
@media (max-width:420px){
  :root{--gutter:16px}
  .hero__h{font-size:clamp(38px,12vw,52px)}
  .hero__p{font-size:16px}
  .h2--lg,.h2{font-size:clamp(26px,8vw,32px)}
  .sh p{font-size:15px}
  .tkc__txt{padding:22px 20px 0}
  .tkc__art{padding:18px 14px 22px}
  .tkc--wide .tkc__txt,.tkc--builder .tkc__txt{padding:22px 20px 0}
  .ledger,.cfg,.mini-claim,.mini-doc,.mini-list,.lb,.ar,.ev,.rcpt{width:100%}
  .side{margin:16px 14px 20px}
  .side--stats{margin:0;width:100%}
  .ledger li{grid-template-columns:auto 22px minmax(0,1fr) auto;gap:7px}
  .roles{padding:28px 18px 64px}
  .roles__pills span{font-size:11px}
  .viewer__tabs{grid-template-columns:1fr}
  .rv-tab{padding:10px 12px}
  .dmsg{padding:10px}
  .dmsg__row{grid-template-columns:28px minmax(0,1fr);column-gap:9px}
  .dmsg__av,.dmsg__av svg{width:28px;height:28px}
  .dmsg__used{margin-left:37px;font-size:10.5px}
  .dmsg__used::before{left:-24px;width:18px}
  .dmsg__hd .t{display:none}
  .dbox{padding:10px 11px 11px 13px}
  .dbox__code,.dbox__code--lg{font-size:11px;white-space:pre-wrap;word-break:break-word}
  .dbtns span{height:28px;padding:0 10px;font-size:11.5px}
  .plat{width:250px;height:96px;padding:0 16px;gap:14px}
  .plat__ic{width:46px;height:46px;border-radius:13px}
  .plat__ic svg{width:22px;height:22px}
  .plat__n{font-size:16px}
  .plat__d{font-size:12.5px}
  .tier{padding:22px 18px}
  .tier__top{min-height:0}
  .tier__price{font-size:36px}
  .limits th,.limits td{padding:10px 12px;font-size:13px}
  .cta__card{padding:32px 20px;border-radius:22px}
  .cta__h{font-size:30px}
  .cta__act .btn{width:100%}
  .foot__in{grid-template-columns:1fr 1fr;gap:26px}
  .foot__mark{font-size:24vw}
  .mfs{gap:10px}
  .mf{padding:18px}
}
@media (max-width:330px){
  .hero__cta .btn{width:100%}
  .foot__in{grid-template-columns:1fr}
  .tk--3,.tk{gap:12px}
  .ebw__lbl,.bsteps{display:none}
}

/* nothing inside a card may push it wider than the screen */
.tkc,.tkc__art,.tkc__txt,.viewer,.viewer__side,.viewer__tabs,.viewer__stage,.rv-pane,.dmsg,.dmsg__body,.ebw__pane{min-width:0}
.tkc__art>*,.rv-pane>*{max-width:100%}
.viewer{max-width:100%}
html,body{overflow-x:clip}

@media (max-width:900px){
  .hero__horizon{height:110px}
  .hero__horizon i{top:62px;width:220vw}
}
@media (max-width:640px){
  .cta__gear{display:none}
  .cta__glow{right:-40%;width:120%}
}

/* swirl dividers: a ribbon of dotted lines that twists as it travels */
.dots--rib{height:150px}

/* real avatars */
.av--img{background:#222;overflow:hidden}
.av--img img,.dbox__th--img img,.ec__thumb--img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.dbox__th--img{background:none;padding:0;overflow:hidden}
.bub__img--pic{background:none;overflow:hidden;padding:0}
.bub__img--pic img{width:100%;height:100%;object-fit:cover;display:block}

/* the feedback buttons sit on one row */
.dbtns--row{flex-wrap:nowrap}
.dbtns--row span{padding:0 10px;font-size:11.5px}
@media (max-width:640px){.dbtns--row{flex-wrap:wrap}}

/* jump to top */
.totop{position:fixed;right:max(18px,env(safe-area-inset-right,0px) + 18px);bottom:max(18px,env(safe-area-inset-bottom,0px) + 18px);z-index:55;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#f2f2f2;
  background:rgba(22,23,26,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);box-shadow:0 14px 34px -14px rgba(0,0,0,.9);
  opacity:0;transform:translateY(14px) scale(.92);pointer-events:none;transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1),background-color .3s ease,border-color .3s ease}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop svg{width:22px;height:22px;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.totop:hover{background:rgba(32,34,38,.92);border-color:rgba(166,228,245,.35)}}
@media (hover:hover){.totop:hover svg{transform:translateY(-2px)}}
.totop__tip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%,4px);white-space:nowrap;font-size:12px;font-weight:600;color:#f2f2f2;background:rgba(30,31,35,.95);border:1px solid rgba(255,255,255,.08);padding:6px 10px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.totop__tip::after{content:"";position:absolute;left:50%;top:100%;width:8px;height:8px;background:inherit;border-right:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);transform:translate(-50%,-4px) rotate(45deg)}
.totop:focus-visible .totop__tip{opacity:1;transform:translate(-50%,0)}@media (hover:hover){.totop:hover .totop__tip{opacity:1;transform:translate(-50%,0)}}
@media (max-width:640px){.totop{width:46px;height:46px}.totop__tip{display:none}}

/* spending roles: each milestone pops when the bar reaches it */
.roles{--mint:#7be8b8}
.roles__dot{display:grid;place-items:center;transition:background-color .35s ease,border-color .35s ease,transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .5s ease}
.roles__dot svg{width:10px;height:10px;fill:none;stroke:#0a0a0a;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:12;stroke-dashoffset:12;transition:stroke-dashoffset .4s ease .1s}
.roles__dot.hit{background:var(--mint);border-color:var(--mint);transform:translate(-50%,-50%) scale(1.45);box-shadow:0 0 0 4px rgba(123,232,184,.16),0 0 18px rgba(123,232,184,.55)}
.roles__dot.hit svg{stroke-dashoffset:0}
.roles__ring{position:absolute;inset:-2px;border-radius:50%;border:1.5px solid var(--mint);opacity:0;pointer-events:none}
.roles__dot.pop .roles__ring{animation:ring .9s cubic-bezier(.2,.7,.2,1)}
@keyframes ring{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(3.4)}}
.roles__pills i{transition:border-color .35s ease,color .35s ease,background-color .35s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.roles__pills span.hit i{border-color:rgba(123,232,184,.6);color:var(--mint);background:rgba(123,232,184,.08);transform:translateY(-2px)}
.roles__pills span.hit b{color:rgba(237,237,237,.8)}
.roles__fx{position:absolute;inset:0;pointer-events:none;overflow:visible}
.conf{position:absolute;width:5px;height:5px;border-radius:1.5px;opacity:0;will-change:transform,opacity}
.roles__spent{margin-top:14px!important;font-size:13px;color:rgba(237,237,237,.5)}
.roles__spent b{font-family:var(--hero);font-weight:600;font-size:16px;color:#fff;margin-left:4px;font-variant-numeric:tabular-nums}

/* illustrations behave like pictures: no selecting or dragging */
.tkc__art,.tkc__art *,.ctls,.steps,.side,.roles,.ledger,.lb,.cfg,.ar,.ev,.emb,.ebw,.dmsg,.viewer__stage,.viewer__stage *,.strips,.strips *,.cog,.hero__horizon,.dots,.mini-select,.mini-doc,.mini-claim,.mini-list,.rcpt{-webkit-user-select:none;user-select:none}
img,svg{-webkit-user-drag:none;user-drag:none}

/* each milestone carries its own label, so the amount and role always sit under their dot */
.roles{padding:44px 48px 92px}
.ms{position:absolute;top:50%;width:0;height:0}
.ms .roles__dot{left:0;top:0}
.ms__lbl{position:absolute;left:0;top:18px;transform:translateX(-50%);display:grid;justify-items:center;gap:5px;font-size:12px;white-space:nowrap}
.ms__lbl b{color:rgba(237,237,237,.5);font-weight:500;transition:color .35s ease}
.ms__lbl i{font-style:normal;color:#f2f2f2;background:#17181b;border:1px solid rgba(255,255,255,.12);padding:3px 10px;border-radius:999px;transition:border-color .35s ease,color .35s ease,background-color .35s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.ms.hit .ms__lbl i{border-color:rgba(123,232,184,.6);color:var(--mint);background:rgba(123,232,184,.08);transform:translateY(-2px)}
.ms.hit .ms__lbl b{color:rgba(237,237,237,.85)}
@media (max-width:640px){.roles{padding:40px 34px 92px}.ms__lbl{font-size:11px}.ms__lbl i{padding:3px 8px}}

/* opening the menu must not nudge anything sideways */
html{scrollbar-gutter:stable}

/* the phone nav: just the logo and a menu button; the two actions live in the menu */
@media (max-width:1000px){
  .nav{padding:0 12px}
  .nav__pill{height:54px;padding:0 6px 0 16px}
  .nav__act{display:none}
  .nav__menu{display:grid;width:42px;height:42px;margin-left:auto;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);transition:background-color .25s ease}
  .nav__menu:active{background:rgba(255,255,255,.12)}
  .nav__menu svg{width:19px;height:19px}
}

/* the menu */
.sheet{padding:calc(env(safe-area-inset-top,0px) + 14px) 12px calc(env(safe-area-inset-bottom,0px) + 18px);background:radial-gradient(120% 50% at 50% 0%,rgba(166,228,245,.05),transparent 60%),#090a0b;transition:opacity .3s ease,visibility 0s linear .3s}
.sheet.is-open{transition:opacity .3s ease}
.sheet__nav{display:grid;margin:22px 4px 0;gap:0}
.sheet__row{display:flex;align-items:center;justify-content:space-between;padding:16px 12px;border-bottom:1px solid var(--line);font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.02em;color:#ededed;opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1),color .2s ease}
.sheet__row:active{color:var(--acc)}
.sheet__ic{width:18px;height:18px;color:rgba(237,237,237,.35)}
.sheet.is-open .sheet__row{opacity:1;transform:none}
.sheet.is-open .sheet__row:nth-child(2){transition-delay:.04s}.sheet.is-open .sheet__row:nth-child(3){transition-delay:.08s}.sheet.is-open .sheet__row:nth-child(4){transition-delay:.12s}.sheet.is-open .sheet__row:nth-child(5){transition-delay:.16s}.sheet.is-open .sheet__row:nth-child(6){transition-delay:.2s}
.sheet__act{margin-top:auto;display:grid;gap:10px;padding:0 4px;opacity:0;transform:translateY(10px);transition:opacity .45s ease .2s,transform .55s cubic-bezier(.2,.8,.2,1) .2s}
.sheet.is-open .sheet__act{opacity:1;transform:none}
.sheet__btn{width:100%;height:52px;font-size:15px}
.sheet__btn svg{width:18px;height:18px}

/* =====================================================================
   PHONES AND TABLETS
   ===================================================================== */
@media (max-width:899px){
  .hero{align-items:flex-start;min-height:100svh;padding:0 0 96px}
  .hero__in{text-align:center;display:flex;flex-direction:column;align-items:center}
  .hero__h{font-size:clamp(40px,11vw,72px)}
  .hero__p{margin-inline:auto;max-width:34ch}
  .hero__cta{justify-content:center}
}
@media (max-width:420px){
  .hero__cta{flex-direction:column;align-items:stretch;width:100%;max-width:340px}
}

/* the reply viewer on small screens: four compact tabs, the progress line inside the active one */
@media (max-width:640px){
  .viewer__tabs{grid-template-columns:1fr 1fr!important;gap:6px;padding:10px}
  .rv-tab{padding:11px 12px 13px;border-radius:12px;border:1px solid rgba(255,255,255,.06);text-align:center}
  .rv-tab b{font-size:13.5px}
  .rv-tab span{display:none}
  .rv-tab__bar{left:12px;right:12px;bottom:5px;height:2px}
  .tint{margin:0 10px 12px;padding:14px}
  .tint__sw{justify-content:center}
  .tint__t,.tint__d{text-align:center}
}

/* light avatars (reqon's) still read as avatars */
.av--img,.dbox__th--img,.ec__thumb--img{box-shadow:0 0 0 1px rgba(255,255,255,.14)}

/* small screens: no dead space in the viewer, nothing running off a card */
@media (max-width:1000px){.viewer__stage{min-height:0;padding:22px 16px 26px}}
@media (max-width:640px){
  .dmsg__used{white-space:normal;flex-wrap:wrap;row-gap:2px}
  .cmdm{word-break:break-word}
  .lb li{grid-template-columns:14px 20px minmax(0,max-content) minmax(18px,1fr) auto;gap:7px;font-size:12px}
  .lb b{font-size:12px}
  .totop{width:42px;height:42px;right:14px;bottom:14px}
  .totop svg{width:19px;height:19px}
}
@media (max-width:340px){
  .lb .bar{display:none}
  .lb li{grid-template-columns:14px 20px 1fr auto}
}
@media (max-width:1000px){.viewer__stage{align-items:start}}

/* =====================================================================
   PHONE MENU: the nav stays where it is; its button becomes a close
   button and the menu opens underneath it
   ===================================================================== */
@media (max-width:1000px){
  .nav{z-index:90}
  .nav__pill{height:54px}                                  /* one height, so opening the menu can't nudge it */
  .nav.menu-open .nav__pill{background:rgba(16,17,19,.98)}
  .nav__menu{position:relative}
  .nav__menu svg{position:absolute;inset:0;margin:auto;transition:opacity .25s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
  .nav__menu-x{opacity:0;transform:rotate(-90deg) scale(.7)}
  .nav.menu-open .nav__menu-o{opacity:0;transform:rotate(90deg) scale(.7)}
  .nav.menu-open .nav__menu-x{opacity:1;transform:none}
}
.sheet{z-index:80;background:#090a0b;padding:calc(env(safe-area-inset-top,0px) + 86px) 12px calc(env(safe-area-inset-bottom,0px) + 18px)}
.sheet__nav{margin:8px 0 0;padding:6px;border-radius:22px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07)}
.sheet__row{gap:14px;justify-content:flex-start;padding:13px 12px;border-bottom:0;border-radius:14px;font-size:18px;transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1),background-color .2s ease,color .2s ease}
.sheet__row+.sheet__row{margin-top:2px}
.sheet__row:active{background:rgba(255,255,255,.05)}
.sheet__chip{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;background:rgba(166,228,245,.08);border:1px solid rgba(166,228,245,.16)}
.sheet__chip svg{width:18px;height:18px;color:var(--acc)}
.sheet__lbl{flex:1}
.sheet__ic{width:16px;height:16px}
.sheet__act{padding:0}

/* the closing card on phones: the gear comes back, small and centred, so the glow has something behind it */
@media (max-width:640px){
  .cta__card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:36px 20px 30px}
  .cta__gear{display:block;position:relative;order:-1;width:76px;height:76px;margin:0 0 20px;opacity:1;right:auto;bottom:auto;justify-self:auto}
  .cta__gear svg{filter:drop-shadow(0 10px 24px rgba(0,0,0,.6))}
  .cta__glow{right:auto;left:50%;top:0;width:150%;height:260px;aspect-ratio:auto;transform:translate(-50%,-38%);background:radial-gradient(closest-side,rgba(166,228,245,.12),transparent 72%)}
  .cta__txt{display:flex;flex-direction:column;align-items:center}
  .cta__txt>p{margin-inline:auto}
  .cta__act{flex-direction:column;align-items:stretch;width:100%}
  .cta__act .btn{width:100%}
}

/* socials: rows you can grab */
.strip{touch-action:pan-y;cursor:grab}
.strip.is-drag{cursor:grabbing}

/* buttons: no glow; on hover they lift and a light runs round the outline */
.btn,.nav__btn{position:relative;isolation:isolate}
@media (hover:hover){.btn--light:hover,.btn--ghost:hover{box-shadow:none}}
.btn::after,.nav__btn::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--ang),transparent 0deg,transparent 230deg,rgba(166,228,245,.95) 315deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:0;transition:opacity .5s ease;animation:ang 2.6s linear infinite}
.btn--light::after,.nav__btn--solid::after{inset:-3px;padding:1.5px}
.btn:focus-visible::after{opacity:1}@media (hover:hover){.btn:hover::after,.nav__btn:hover::after{opacity:1}}

/* the closing card: dark glass, soft colour in the corners, a sprinkle of stars, a horizon behind the buttons */
.cta__card{background:#0b0d0e;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.cta__card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(40% 55% at 6% 0%,rgba(84,150,170,.22),transparent 70%),
    radial-gradient(38% 50% at 100% 100%,rgba(120,200,225,.12),transparent 70%),
    radial-gradient(30% 40% at 0% 100%,rgba(70,120,140,.10),transparent 70%)}
.cta__card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(1px 1px at 12% 22%,rgba(255,255,255,.7),transparent 60%),
    radial-gradient(1px 1px at 28% 68%,rgba(255,255,255,.5),transparent 60%),
    radial-gradient(1px 1px at 46% 14%,rgba(255,255,255,.55),transparent 60%),
    radial-gradient(1px 1px at 58% 82%,rgba(255,255,255,.45),transparent 60%),
    radial-gradient(1px 1px at 72% 30%,rgba(255,255,255,.6),transparent 60%),
    radial-gradient(1px 1px at 86% 58%,rgba(255,255,255,.5),transparent 60%),
    radial-gradient(1px 1px at 94% 16%,rgba(255,255,255,.4),transparent 60%),
    radial-gradient(1px 1px at 36% 40%,rgba(255,255,255,.35),transparent 60%),
    radial-gradient(1px 1px at 8% 86%,rgba(255,255,255,.4),transparent 60%)}
.cta__rim2{position:absolute;left:12%;right:12%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(166,228,245,.55),transparent);pointer-events:none}
.cta__arc{position:absolute;left:50%;top:80%;width:130%;aspect-ratio:2.4;transform:translateX(-50%);border-radius:50%;border-top:1px solid rgba(166,228,245,.2);background:radial-gradient(60% 50% at 50% 0%,rgba(166,228,245,.05),transparent 70%);pointer-events:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);mask:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}
.cta__glow{background:radial-gradient(closest-side,rgba(166,228,245,.14),transparent 70%)}
.cta__txt,.cta__gear{z-index:2}
@media (max-width:640px){
  .cta__arc{top:auto;bottom:-56px;width:200%;aspect-ratio:3}
  .cta__card{padding-bottom:44px}
}
@media (max-width:640px){.cta__arc{display:none}}


/* =====================================================================
   CLOSING CARD: a black box with a slow, blurred fluid moving inside it.
   On a computer the fluid gathers a little toward your cursor.
   ===================================================================== */
.wrap--wide{max-width:1240px}
.cta__card{display:grid!important;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;min-height:440px;padding:clamp(44px,6vw,84px)!important;border-radius:44px;overflow:hidden;isolation:isolate;
  background:#040506!important;border:0!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 50px 120px -50px #000!important}
.cta__card::before,.cta__card::after{display:none!important}
.cta__gear,.cta__glow,.cta__arc,.cta__rim2,.cta__blobs,.cta__kicker,.cta__logo,.cta__ghost,.cta__orb,.cta__fade,.cta__grain{display:none!important}
.cta__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70% 90% at 30% 40%,#0b1013,#040506 70%)}
.cta__fluid{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.6s ease}
.cta__fluid.on{opacity:1}
.cta__stars{position:absolute;inset:0;opacity:0;background-image:
  radial-gradient(1px 1px at 14% 24%,rgba(255,255,255,.6),transparent 60%),radial-gradient(1px 1px at 31% 72%,rgba(255,255,255,.4),transparent 60%),
  radial-gradient(1px 1px at 48% 12%,rgba(255,255,255,.5),transparent 60%),radial-gradient(1px 1px at 62% 84%,rgba(255,255,255,.35),transparent 60%),
  radial-gradient(1px 1px at 77% 28%,rgba(255,255,255,.45),transparent 60%),radial-gradient(1px 1px at 88% 62%,rgba(255,255,255,.4),transparent 60%),
  radial-gradient(1px 1px at 95% 12%,rgba(255,255,255,.35),transparent 60%),radial-gradient(1px 1px at 6% 82%,rgba(255,255,255,.35),transparent 60%),
  radial-gradient(1px 1px at 40% 46%,rgba(255,255,255,.25),transparent 60%),radial-gradient(1px 1px at 69% 52%,rgba(255,255,255,.25),transparent 60%)}
.cta__horizon{position:absolute;left:50%;top:86%;width:110%;aspect-ratio:2.6;transform:translateX(-50%);border-radius:50%;
  border-top:1px solid rgba(255,255,255,.07);background:radial-gradient(50% 40% at 50% 0%,rgba(166,228,245,.05),transparent 70%);
  -webkit-mask:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);mask:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}
.cta__vig{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 90px 10px rgba(0,0,0,.4)}
.cta__txt{position:relative;z-index:2}
.cta__h{font-family:var(--hero);font-weight:700;font-size:clamp(34px,4vw,54px);line-height:1.04;letter-spacing:-.05em;color:#f4f4f6}
.cta__txt>p{color:rgba(232,230,245,.66);font-size:16px;line-height:1.6;max-width:44ch;margin-top:18px}
.cta__act{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.cta__gear2{position:relative;z-index:2;justify-self:end;width:min(300px,100%);aspect-ratio:1;margin-right:2%}
.cta__gear2 svg{width:100%;height:100%;fill:#f3f4f6;animation:turn 40s linear infinite}
.fx .cta__gear2{opacity:0;transform:translate3d(30%,0,0) rotate(120deg);transition:opacity .8s ease,transform 1.6s cubic-bezier(.16,1,.3,1)}
.fx .cta__gear2.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.cta__ghost,.cta__orb,.cta__gear2 svg{animation:none}}
@media (max-width:860px){
  .cta__card{grid-template-columns:1fr;text-align:center;justify-items:center;padding:44px 22px 40px!important;border-radius:28px;min-height:0}
  .cta__gear2{order:-1;justify-self:center;width:84px;margin:0 0 22px}
  .cta__txt{display:flex;flex-direction:column;align-items:center}
  .cta__txt>p{margin-inline:auto}
  .cta__card{border-radius:30px}
  .cta__horizon{display:none}
}
@media (max-width:640px){
  .cta__h{font-size:clamp(30px,9vw,38px)}
  .cta__act{flex-direction:column;align-items:stretch;width:100%}
  .cta__act .btn{width:100%}
}

/* the closing card: no horizon */
.cta__horizon{display:none!important}

/* testing: two closing cards, one under the other */
.cta__test{position:absolute;left:22px;top:18px;z-index:3;font:600 11px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:rgba(237,237,237,.55);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:6px 9px;border-radius:999px}
.cta--b{padding-top:0}
.cta__fluid--mist{inset:-20px;width:calc(100% + 40px);height:calc(100% + 40px);filter:blur(10px)}
/* =====================================================================
   THE CLOSING CARD: mist, and a gentle lean toward the cursor
   ===================================================================== */
.cta__card{background:#040506!important;box-shadow:0 40px 100px -50px #000!important}
.cta__fluid--mist{inset:-20px;width:calc(100% + 40px);height:calc(100% + 40px);filter:blur(10px)}
.st-stage{perspective:1400px;padding:14px;margin:-14px}          /* a still, slightly larger area that reads the pointer */
.cta__card.st-tilt{will-change:transform;backface-visibility:hidden;box-shadow:0 60px 120px -50px #000,0 30px 60px -40px rgba(0,0,0,.8)!important}
.cta__test{display:none}

/* =====================================================================
   PRICING: three cards on one shared grid, so every row lines up across
   them: name, price, note, button, the "includes" label, and each feature
   ===================================================================== */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(10,auto);column-gap:18px;row-gap:0;margin-top:56px;align-items:start}
.tier{grid-row:span 10;display:grid;grid-template-rows:subgrid;row-gap:0;padding:28px 26px 30px;border-radius:24px;border:0!important;
  background:linear-gradient(180deg,#111214,#0c0d0f)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease}
@media (hover:hover){.tier:hover{transform:translateY(-4px)}}
.tier--top{background:radial-gradient(120% 55% at 50% 0%,rgba(166,228,245,.10),transparent 65%),linear-gradient(180deg,#131517,#0c0d0f)!important;box-shadow:inset 0 0 0 1px rgba(166,228,245,.14)}
.tier__top{display:contents}
.tier__name{display:flex;align-items:center;gap:10px;min-height:24px;font-size:15px;font-weight:600;color:#f2f2f2}
.tier .pill{margin-left:auto;font-size:11px;font-weight:600;color:#0a0a0a;background:var(--acc);border-radius:999px;padding:4px 10px}
.tier__price{display:flex;align-items:baseline;gap:8px;margin-top:20px;font-family:var(--hero);font-size:46px;font-weight:700;letter-spacing:-.05em;line-height:1;color:#fff}
.tier__price small{font-family:var(--sans);font-size:14px;font-weight:400;letter-spacing:0;color:rgba(237,237,237,.45)}
.tier__note{margin-top:12px;font-size:14px;line-height:1.5;color:rgba(237,237,237,.6);align-self:start}
.tier .btn{margin-top:24px;align-self:start}
.tier__label{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(237,237,237,.42)}
.tf{position:relative;list-style:none;margin-top:16px;padding-left:30px;align-self:start}
.tf::before{content:"";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:rgba(166,228,245,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.4 2.4L11.5 6' fill='none' stroke='%23a6e4f5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.tf--empty::before{display:none}
.tf b{display:block;font-size:14px;font-weight:600;line-height:1.35;color:#f2f2f2}
.tf span{display:block;margin-top:3px;font-size:13px;line-height:1.5;color:rgba(237,237,237,.52)}
@media (max-width:1000px){
  .tiers{grid-template-columns:1fr;grid-template-rows:none;row-gap:16px;max-width:520px;margin-inline:auto}
  .tier{grid-row:auto;display:flex;flex-direction:column}
  .tier .btn{align-self:stretch}
  .tf--empty{display:none}
  .tier,.tier--top{order:0}                               /* Free, Tier 1, Tier 2: each builds on the one before */
}
@media (max-width:420px){.tier{padding:24px 20px 26px}.tier__price{font-size:40px}}

/* =====================================================================
   PRICING, round two: wider cards so every line fits on one line, a tier
   icon, a cleaner button with its own hover per tier, and a 3D lean
   ===================================================================== */
#premium .wrap--md{max-width:1180px}
.tiers{position:relative;column-gap:20px}
.tier{padding:30px 30px 32px;will-change:transform;transition:box-shadow .5s ease}
@media (hover:hover){.tier:hover{transform:none}}
.tier__name{gap:12px;font-size:16px}
.tier__ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);flex:none}
.tier__ic svg{width:17px;height:17px;color:rgba(237,237,237,.8)}
.tier--t1 .tier__ic{background:rgba(166,228,245,.08);box-shadow:inset 0 0 0 1px rgba(166,228,245,.2)}
.tier--t1 .tier__ic svg{color:var(--acc)}
.tier--top .tier__ic{background:var(--acc)}
.tier--top .tier__ic svg{color:#0a0a0a}
.tier__price{margin-top:24px}
.tier__note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf b,.tf span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf{margin-top:14px}
.tier__label{margin-top:28px}

/* buttons: the button itself stays still; only a light runs round its outline on hover
   (always running underneath, so moving on and off never restarts it) */
.tbtn{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;height:48px;margin-top:26px;border-radius:14px;font:600 14.5px/1 var(--sans);letter-spacing:-.005em;transition:box-shadow .4s ease,background-color .4s ease}
.tbtn::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:0;transition:opacity .5s ease;animation:ang 2.8s linear infinite}
.tbtn:focus-visible::after{opacity:1}@media (hover:hover){.tbtn:hover::after{opacity:1}}
/* Free: a white light, one lap at a calm pace */
.tbtn--free{color:#ededed;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.tbtn--free::after{background:conic-gradient(from var(--ang),transparent 0deg,transparent 250deg,rgba(255,255,255,.85) 320deg,transparent 360deg);animation-duration:3.2s}
/* Tier 1: a cyan light */
.tbtn--t1{color:#e9f8fc;background:rgba(166,228,245,.06);box-shadow:inset 0 0 0 1px rgba(166,228,245,.22)}
.tbtn--t1::after{background:conic-gradient(from var(--ang),transparent 0deg,transparent 230deg,rgba(166,228,245,.95) 315deg,transparent 360deg);animation-duration:2.6s}
/* Tier 2: two cyan lights chasing each other round a ring just outside the white button */
.tbtn--t2{color:#0a0a0a;background:#f4f6f7}
.tbtn--t2::after{inset:-4px;border-radius:17px;padding:1.5px;background:conic-gradient(from var(--ang),transparent 0deg,rgba(166,228,245,.95) 70deg,transparent 140deg,transparent 180deg,rgba(166,228,245,.95) 250deg,transparent 320deg);animation-duration:3.4s}
@media (max-width:1000px){
  .tier__note,.tf b,.tf span{white-space:normal}
}

/* cards, refined: a faint light along the top edge, tier-tinted checks, calmer hover */
.tier{will-change:auto;transform:none!important;overflow:hidden;position:relative}
.tier::before{content:"";position:absolute;left:18%;right:18%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);pointer-events:none}
.tier--t1::before{background:linear-gradient(90deg,transparent,rgba(166,228,245,.35),transparent)}
.tier--top::before{left:10%;right:10%;background:linear-gradient(90deg,transparent,rgba(166,228,245,.7),transparent)}
@media (hover:hover){.tier:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}}
@media (hover:hover){.tier--top:hover{box-shadow:inset 0 0 0 1px rgba(166,228,245,.2)}}
.tier:not(.tier--t1):not(.tier--top) .tf::before{background-color:rgba(255,255,255,.07);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.4 2.4L11.5 6' fill='none' stroke='%23e6e6e6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.tier--top .tf::before{background-color:var(--acc);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.4 2.4L11.5 6' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.tier__price small{margin-left:2px}
.tier__label{color:rgba(237,237,237,.38)}

/* =====================================================================
   TIER COLOURS, taken from the bot's own tier emoji:
   Free white, Tier 1 gold (#f1c40f), Tier 2 sky blue (#7dd3fc)
   ===================================================================== */
.tier--free{--tc:255,255,255}
.tier--t1{--tc:241,196,15}
.tier--top{--tc:125,211,252}
.tier__emo{width:36px;height:36px;border-radius:10px;flex:none;-webkit-user-drag:none;user-select:none}
/* the light along the top edge */
.tier::before,.tier--t1::before,.tier--top::before{background:linear-gradient(90deg,transparent,rgba(var(--tc),.45),transparent)}
.tier--free::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}
/* a faint wash of the tier's colour at the top of the card */
.tier--t1{background:radial-gradient(120% 50% at 50% 0%,rgba(241,196,15,.05),transparent 60%),linear-gradient(180deg,#111214,#0c0d0f)!important}
.tier--top{background:radial-gradient(120% 55% at 50% 0%,rgba(125,211,252,.10),transparent 65%),linear-gradient(180deg,#131517,#0c0d0f)!important;box-shadow:inset 0 0 0 1px rgba(125,211,252,.14)}
@media (hover:hover){.tier--top:hover{box-shadow:inset 0 0 0 1px rgba(125,211,252,.22)}}
.tier--top .pill{background:#7dd3fc;color:#0a0a0a}
/* checks in the tier's colour */
.tier--t1 .tf::before{background-color:rgba(241,196,15,.12);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.4 2.4L11.5 6' fill='none' stroke='%23f1c40f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.tier--top .tf::before{background-color:#7dd3fc}
/* buttons: the outline light takes the tier's colour */
.tbtn--t1{color:#fbf3d0;background:rgba(241,196,15,.06);box-shadow:inset 0 0 0 1px rgba(241,196,15,.24)}
.tbtn--t1::after{background:conic-gradient(from var(--ang),transparent 0deg,transparent 230deg,rgba(241,196,15,.95) 315deg,transparent 360deg)}
.tbtn--t2::after{background:conic-gradient(from var(--ang),transparent 0deg,rgba(125,211,252,.95) 70deg,transparent 140deg,transparent 180deg,rgba(125,211,252,.95) 250deg,transparent 320deg)}
/* Tier 2 checks: the same soft ring as the others, in sky blue */
.tier--top .tf::before{background-color:rgba(125,211,252,.13);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.4 2.4L11.5 6' fill='none' stroke='%237dd3fc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* Tier 2 button: sky blue, in the same tinted style as Tier 1, with its two lights on the outline */
.tbtn--t2{color:#e3f5fe;background:rgba(125,211,252,.08);box-shadow:inset 0 0 0 1px rgba(125,211,252,.3)}
@media (hover:hover){.tbtn--t2:hover{background:rgba(125,211,252,.08)}}
.tbtn--t2::after{inset:-1px;border-radius:inherit;padding:1px}

/* =====================================================================
   MOVING BETWEEN PAGES (see router.js)
   ===================================================================== */
/* router.js fades content out, swaps it, and fades it in. Only opacity and
   transform move, so it stays smooth, and nothing here ever blocks a click. */
#main,.foot,[data-swap]{transition:opacity .18s ease,transform .18s ease}
.swap-out{opacity:0;transform:translateY(-4px);transition:opacity .18s cubic-bezier(.4,0,1,1),transform .18s cubic-bezier(.4,0,1,1)!important}
.swap-in{opacity:0;transform:translateY(14px);transition:none!important}
.swap-run{transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.16,1,.3,1)!important}
.foot.swap-run{transition-delay:.06s!important}
#main.swap-out,#main.swap-in,#main.swap-run,.foot.swap-out,.foot.swap-run{will-change:opacity,transform}

/* links and buttons are buttons: no text selection, no dragging */
a,button,.nav,.sheet,.foot,.legal__tabs{-webkit-user-select:none;user-select:none}
a,img{-webkit-user-drag:none}
.prose a{-webkit-user-select:text;user-select:text}

/* the hero gear stays hidden until the script has put it in place, then fades in */
.cog{opacity:0;transition:opacity .7s ease}
.cog.is-ready{opacity:1}

/* <main> is always its own layer, so nothing inside it can show or hide
   differently while a page is fading (that was the dotted "bleed") */
#main{position:relative;isolation:isolate}

/* The footer always starts just below the bottom of the screen: every page is at least one
   screen tall plus a little, so you scroll to reach the footer. Content that grows or shrinks
   inside a page then never drags the footer (or your scroll) around. */
#main{min-height:calc(100vh + 40px);min-height:calc(100svh + 40px)}

/* the hero headline is artwork: its words are drawn by CSS (data-t), so there's no text
   to select or copy. Screen readers still read the h1's aria-label. */
.hero__h,.hero__h *{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.hero__h [data-t]::before{content:attr(data-t)}

/* =====================================================================
   NAV (final layer). A wide glass bar, not a pill: brand on the left, the
   page links centred, actions on the right. The links share one soft
   highlight that slides to whatever you point at or are on. Buttons are
   small and quiet; "Add to Discord" is the one tinted action, with the
   site's running outline light on hover.
   ===================================================================== */
.nav{top:calc(env(safe-area-inset-top,0px) + 12px)}
.nav__pill{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0;width:min(1140px,calc(100vw - 28px));max-width:none;
  height:calc(62px - 4px * var(--ns,0));padding:0 10px 0 18px;border-radius:18px;
  background:rgba(12,13,14,calc(.55 + .25 * var(--ns,0)));border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 20px 50px -28px rgba(0,0,0,.9)}
.nav__pill::after{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 55%)}
.nav__pill .brand{justify-self:start;margin:0;gap:10px;font-size:16px}
.nav__pill .brand__gear{width:22px;height:22px}
.nav__links{justify-self:center;gap:2px}
.nav__links a{padding:9px 15px;font-size:14px;font-weight:500;color:rgba(237,237,237,.6);letter-spacing:-.005em}
.nav__links a.is-on{color:#fff}@media (hover:hover){.nav__links a:hover{color:#fff}}
.nav__ind{height:36px;border-radius:11px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.nav__act{justify-self:end;display:flex;align-items:center;gap:8px}
.nav__btn{height:40px;padding:0 15px;border-radius:12px;font:600 13.5px/1 var(--sans);border:0;transform:none!important}
.nav__btn--quiet{color:rgba(237,237,237,.75);background:transparent}
@media (hover:hover){.nav__btn--quiet:hover{color:#fff;background:rgba(255,255,255,.05)}}
.nav__btn--cta{position:relative;isolation:isolate;color:#eaf8fc;background:rgba(166,228,245,.1);box-shadow:inset 0 0 0 1px rgba(166,228,245,.24);transition:background-color .25s ease}
.nav__btn--cta svg{width:16px;height:16px;color:var(--acc)}
@media (hover:hover){.nav__btn--cta:hover{background:rgba(166,228,245,.15)}}
.nav__btn--cta::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  background:conic-gradient(from var(--ang),transparent 0deg,transparent 240deg,rgba(166,228,245,.95) 320deg,transparent 360deg);opacity:0;transition:opacity .45s ease;animation:ang 2.8s linear infinite}
@media (hover:hover){.nav__btn--cta:hover::after{opacity:1}}
@media (max-width:1000px){
  .nav__pill{display:flex;justify-content:space-between;width:100%;height:56px;padding:0 7px 0 16px;border-radius:16px}
  .nav__links,.nav__act{display:none}                          /* phones and tablets: logo + menu; everything else is in the menu */
  .nav__menu{display:grid;margin-left:auto}
}

/* =====================================================================
   "SOON": anything that isn't live yet (Dashboard, Docs until their env
   variables are set) is greyed out with a small tag, and can't be clicked.
   The build turns those links into spans (see applySoon in build.mjs).
   ===================================================================== */
.is-soon{display:inline-flex;align-items:center;gap:8px;color:rgba(237,237,237,.42)!important;cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none}
.is-soon svg{opacity:.55}
.is-soon::after{display:none!important}
.btn.is-soon,.nav__btn.is-soon{background:rgba(255,255,255,.025)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)!important;border-color:transparent!important}
.soon-tag{display:inline-grid;place-items:center;height:18px;padding:0 6px;border-radius:5px;font:700 10px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--acc);background:rgba(166,228,245,.1);box-shadow:inset 0 0 0 1px rgba(166,228,245,.2)}
.nav__btn.is-soon{background:transparent!important;box-shadow:none!important;padding:0 10px}

/* NAV, compact: sized to its contents, with the same space between the logo and the links as
   between the links and the Dashboard button, so the three groups sit evenly. */
.nav__pill{display:flex;align-items:center;justify-content:center;gap:26px;width:auto;height:calc(58px - 4px * var(--ns,0));padding:0 8px 0 20px;border-radius:17px}
.nav__pill .brand,.nav__links,.nav__act{justify-self:auto}
.nav__links{margin:0 -14px}                                   /* links carry their own 14px padding: pull it back so the gaps measure true */
.nav__links a{padding:9px 14px}
.nav__btn--dash{gap:8px;height:40px;padding:0 15px 0 13px;border-radius:12px;color:#ededed;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:background-color .25s ease,box-shadow .25s ease}
.nav__btn--dash svg{width:16px;height:16px;color:inherit}
@media (hover:hover){.nav__btn--dash:hover{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}}
.nav__btn--dash.is-soon{color:rgba(237,237,237,.6)!important;background:rgba(255,255,255,.03)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important;padding:0 8px 0 13px}
.nav__btn--dash.is-soon svg{opacity:.6}
@media (max-width:1000px){
  .nav__pill{justify-content:space-between;width:100%;gap:0;padding:0 7px 0 16px}
  .nav__links{margin:0}
}

/* NAV, final sizing: a little smaller all round */
.nav__pill{gap:22px;height:calc(52px - 3px * var(--ns,0));padding:0 7px 0 18px;border-radius:15px}
.nav__pill .brand{font-size:15px;gap:9px}
.nav__pill .brand__gear{width:20px;height:20px}
.nav__links{margin:0 -12px}
.nav__links a{padding:8px 12px;font-size:13.5px}
.nav__ind{height:32px;border-radius:10px}
.nav__btn--dash{position:relative;height:36px;padding:0 13px 0 11px;border-radius:11px;font-size:13px;gap:7px}
.nav__btn--dash svg{width:15px;height:15px}

/* "Soon": a small tilted sticker, like a label stuck on (bleed's idea, in our colours).
   On buttons it sits on the top-right corner; in text (footer) it sits inline. */
.soon-tag{display:inline-grid;place-items:center;height:17px;padding:0 6px;border-radius:5px;font:800 9.5px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:#06232b;
  background:linear-gradient(135deg,#d9f4fb,#a6e4f5 55%,#7dd3fc);box-shadow:0 3px 10px -3px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.6);transform:rotate(-6deg)}
.btn.is-soon,.nav__btn.is-soon{position:relative;overflow:visible}
.btn.is-soon .soon-tag,.nav__btn.is-soon .soon-tag{position:absolute;top:-8px;right:-10px;transform:rotate(8deg)}
.nav__btn--dash.is-soon{color:rgba(237,237,237,.82)!important;background:rgba(255,255,255,.035)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)!important;padding:0 13px 0 11px}
.nav__btn--dash.is-soon svg{opacity:1}
.btn.is-soon{color:rgba(237,237,237,.7)!important}
.is-soon{gap:7px}

/* NAV, steady while scrolling: one fixed height and one background, no per-frame changes
   (the bar used to shrink and darken with the scroll, which made it jitter), and a little
   more room between the logo, the links and the Dashboard button. */
.nav__pill{height:52px;gap:34px;background:rgba(12,13,14,.72);transition:none;will-change:auto}
.nav{transition:none}
@media (max-width:1000px){.nav__pill{height:56px;gap:0}}

/* Compare limits on phones: the whole table fits the card, no sideways swipe. The limit names
   wrap onto two lines if they need to; the three tier columns stay narrow and centred. */
@media (max-width:640px){
  .limits__body{overflow-x:visible}
  .limits table{min-width:0;table-layout:fixed}
  .limits thead th:first-child{width:38%}
  .limits thead th:nth-child(2),.limits thead th:nth-child(3){width:18%}
  .limits thead th:last-child{width:26%}
  .limits th,.limits td{padding:10px 8px;font-size:12.5px;line-height:1.35}
  .limits tbody th{padding-left:14px;overflow-wrap:anywhere}
  .limits td,.limits thead th:not(:first-child){text-align:center}
  .limits td,.limits thead th:not(:first-child){padding-left:4px;padding-right:4px}
}

/* Phone menu: just the icon beside each label (no chip), sized to the text, same filled set
   as the rest of the site. */
.sheet__chip{width:22px;height:22px;border:0;border-radius:0;background:none}
.sheet__chip svg{width:21px;height:21px;color:rgba(237,237,237,.72)}
.sheet__row{gap:14px}

/* Big titles behave like artwork: they can't be selected or dragged across. (Command names and
   the legal pages' section headings stay selectable.) */
h1,.h2,.cta__h,.sp-inc__h{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}

/* The closing card's shadow no longer leans with the card: the card itself has none, and one
   soft, still pool of shade sits under it on the wrapper, so you don't see a dark edge sliding
   around as it tilts. */
.st-stage{position:relative;isolation:isolate}
.st-stage::before{content:"";position:absolute;z-index:-1;left:8%;right:8%;top:22%;bottom:-4%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,.25) 55%,transparent);filter:blur(28px);pointer-events:none}
.cta__card,.cta__card.st-tilt{box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)!important}

/* Footer wordmark: it still sinks off the bottom of the page on purpose, but the tops of the
   letters (the i dots, t and l) now show. The text box is padded up to cover them, because with
   background-clip:text anything outside the box has no fill; the negative margin keeps the word
   where it was. */
.foot__mark{padding-top:.16em;margin-top:calc(clamp(24px,3vw,44px) - .16em);background:linear-gradient(180deg,rgba(255,255,255,.07) .16em,rgba(255,255,255,0) .8em);-webkit-background-clip:text;background-clip:text}

/* The closing card's shadow, take two: still (it never leans with the card) and built in layers
   like a real one. A wide, faint ambient shade, a softer mid layer, and a tight dark contact
   shadow right under the bottom edge that gives the card its lift. */
.st-stage::before{left:4%;right:4%;top:30%;bottom:-9%;border-radius:40px;
  background:radial-gradient(60% 55% at 50% 70%,rgba(0,0,0,.7),rgba(0,0,0,.35) 55%,transparent 100%);filter:blur(40px)}
.st-stage::after{content:"";position:absolute;z-index:-1;left:10%;right:10%;bottom:2px;height:46px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.85),rgba(0,0,0,.4) 60%,transparent);filter:blur(14px);pointer-events:none}

/* "And plenty more" icons: a touch bigger so the filled glyphs don't look squeezed in their tiles */
.mf__ic .i{width:19px;height:19px}

/* Touch devices (phones, tablets). Same design, minus the effects iPhone Safari pays for on every
   frame: frosted-glass blur over content that's scrolling or animating, blur filters on animated
   canvases, the soft shadow under the spinning gear, and blur in the fade-in animations. The panels
   get a little more opaque instead, so they read the same. Desktop is unchanged. */
@media (hover: none), (pointer: coarse) {
  .nav__pill, .sheet, .sheet__in, .totop, [class*="toast"] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .totop { background: rgba(22,23,26,.96) !important; }
  .nav__pill { background: rgba(13,14,16,.94) !important; }
  .cog__svg { filter: none !important; }
  .cta__fluid--mist { filter: none !important; }
  .cyc__w, .cyc__w.out, .cyc__w.out-down { filter: none !important; }
}
@media (hover: none) and (prefers-reduced-motion: no-preference), (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  @keyframes ld { from { opacity: 0; transform: translateY(18px); } }
}

/* Scroll-driven motion on touch devices (html.sda, set by home.js when supported): the browser moves
   the hero gear and spins the nav gear in step with the scroll itself, so nothing trails the finger.
   The numbers come from home.js measure(); the curve matches the script version exactly. */
@supports (animation-timeline: scroll()) {
  html.sda .cog {
    animation-name: cog-roll; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: scroll(root block); animation-range: 0px var(--cog-end, 600px);
  }
  html.sda .cog__tilt {
    animation-name: cog-spin; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: scroll(root block); animation-range: 0px var(--cog-end, 600px);
  }
  html.sda.sda-spin [data-spin] {
    animation-name: nav-spin; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: scroll(root block);
  }
}
/* ease-in (t squared), the same curve as the script: still at first, then rolling away */
@keyframes cog-roll {
  from { transform: translate3d(var(--cog-x0, 0px), var(--cog-y0, 0px), 0); animation-timing-function: cubic-bezier(.11, 0, .5, 0); }
  to   { transform: translate3d(calc(var(--cog-x0, 0px) + var(--cog-dx, 0px)), calc(var(--cog-y0, 0px) + 60px), 0); }
}
@keyframes cog-spin {
  from { transform: rotate(0deg); animation-timing-function: cubic-bezier(.11, 0, .5, 0); }
  to   { transform: rotate(var(--cog-rot, 0deg)); }
}
@keyframes nav-spin { from { transform: rotate(0deg); } to { transform: rotate(var(--spin-end, 0deg)); } }

/* iPhone Safari zooms into any text box whose font is under 16px, and stays zoomed after you're done.
   On touch devices every text box gets 16px, so tapping one never zooms the page. */
@media (hover: none), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  textarea, select { font-size: 16px !important; }
}

/* footer on phones: the copyright as two clean lines lined up under the logo, no stray dash */
.foot__c span { display: inline; }
@media (max-width: 700px) {
  .foot__brand .brand { margin: 0; }
  .foot__c { max-width: none; margin-top: 10px; line-height: 1.55; }
  .foot__c .foot__sep { display: none; }
  .foot__c .foot__c1, .foot__c .foot__c2 { display: block; }
}

/* Embed builder demo: a cursor clicks an edit button, a Discord-style form opens and fills itself
   in, Submit, and the new part slides into the embed. Only transform/opacity animate. */
.tkc--builder .tkc__art{position:relative}
.bshade{position:absolute;inset:0;border-radius:14px;background:rgba(6,7,9,.55);opacity:0;transition:opacity .25s ease;pointer-events:none;z-index:2}
.bmod{position:absolute;left:50%;top:50%;z-index:3;width:min(340px,88%);padding:18px 18px 14px;border-radius:10px;background:#2b2d31;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.06);opacity:0;transform:translate(-50%,-46%) scale(.96);
  transition:opacity .22s ease,transform .32s cubic-bezier(.2,.8,.2,1);pointer-events:none;font-size:12.5px;color:#dbdee1}
.bld-open .bshade{opacity:1}
.bld-open .bmod{opacity:1;transform:translate(-50%,-50%) scale(1)}
.bmod__hd{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px}
.bmod__t{font-size:15px;font-weight:600;color:#f2f3f5}
.bmod__x{width:16px;height:16px;position:relative;opacity:.55}
.bmod__x::before,.bmod__x::after{content:"";position:absolute;left:7px;top:1px;width:1.6px;height:14px;border-radius:1px;background:#b5bac1;transform:rotate(45deg)}
.bmod__x::after{transform:rotate(-45deg)}
.bmod__f{margin:0 0 12px}
.bmod__l{display:block;margin:0 0 6px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#b5bac1}
.bmod__in{display:block;min-height:34px;padding:8px 10px;border-radius:4px;background:#1e1f22;color:#dbdee1;line-height:1.4;word-break:break-word}
.bmod__in.typing::after{content:"";display:inline-block;width:1.5px;height:14px;margin-left:1px;vertical-align:-2px;background:#dbdee1;animation:bcaret 1s steps(1) infinite}
@keyframes bcaret{50%{opacity:0}}
.bmod__ft{display:flex;justify-content:flex-end;gap:8px;margin:4px 0 0}
.bmod__ft span{display:inline-flex;align-items:center;height:32px;padding:0 16px;border-radius:4px;font-size:12.5px;font-weight:500}
.bmod__no{color:#dbdee1}
.bmod__go{background:#5865f2;color:#fff;transition:background-color .15s ease,transform .15s ease}
.bmod__go.hov{background:#4752c4}
.bmod__go.press{background:#3c45a5;transform:scale(.95)}
.bcur{position:absolute;left:0;top:0;z-index:4;width:20px;height:22px;opacity:0;pointer-events:none;
  transform:translate3d(var(--cx,60%),var(--cy,70%),0);transition:transform .3s cubic-bezier(.3,.7,.2,1),opacity .2s ease;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.bcur path{fill:#fff;stroke:#0a0a0a;stroke-width:1.2;stroke-linejoin:round}
.bld-cur .bcur{opacity:1}
.bcur.press{transform:translate3d(var(--cx),var(--cy),0) scale(.86)}
.bld__btns span{transition:background-color .15s ease,transform .15s ease}
.bld__btns span.hov{background:#6d6f78}
.bld__btns span.press{background:#80848e;transform:scale(.95)}
.bld__p.fresh{animation:bfresh 1.1s ease}
@keyframes bfresh{0%{background:rgba(255,255,255,.07)}100%{background:transparent}}
.bld__p{border-radius:4px}
@media (prefers-reduced-motion:reduce){.bshade,.bmod,.bcur{display:none}}

/* Discord puts the name level with the top of the avatar (it had picked up an 8px paragraph margin) */
.dmsg .dmsg__hd{margin:0;line-height:18px}
/* the builder's embed: a design shop's spring drop, in its own colour */
.bld.has::before{background:#a6e4f5}
.av--srv{background:linear-gradient(135deg,#c9f1fb,#5fb6cf);color:#0b1216;font-weight:700}
.demb__f--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.demb__ft{display:flex;align-items:center;gap:6px}
.demb__ft .av{width:16px;height:16px;font-size:8px;flex:none}
.bld__img{background:none;border-radius:6px}
.bld__img::after{content:none}
.bld__img img{display:block;width:100%;height:auto;border-radius:6px}
.bld__img.on{height:auto;max-height:220px}
/* the 1-5 steps: a progress track with a line that fills and ticks for finished steps */
.bsteps{gap:0;margin-top:26px}
.bsteps li{position:relative;height:36px;gap:12px}
.bsteps li::after{content:"";position:absolute;left:9.5px;top:28px;width:1px;height:16px;background:rgba(255,255,255,.12);transition:background-color .35s ease}
.bsteps li:last-child::after{display:none}
.bsteps li.done::after{background:rgba(166,228,245,.55)}
.bsteps li.done::before{content:"\2713";font-size:11px}
.bsteps li.cur{font-weight:500}
.bsteps li.cur::before{box-shadow:0 0 0 4px rgba(166,228,245,.14)}
/* the builder's buttons look like Discord's grey (secondary) buttons: no outline, a click just
   darkens them for a moment, like the real thing */
.bld__btns span{background:#4e5058;border-color:transparent;border-radius:8px;color:#fff;font-weight:500}
/* The builder's chat window: a fixed height (the finished message's height, measured in JS), with the
   message anchored to the bottom like Discord's newest message. As parts are added the embed grows
   upward and the buttons under it stay put. The top fades like scrolled-up chat history. */
.dmsg--builder .dmsg__feed{display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;height:var(--feed,auto);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14px);mask-image:linear-gradient(to bottom,transparent 0,#000 14px)}
.dmsg--builder .dmsg__feed>*{flex:none}
.bld-measure,.bld-measure *{transition:none!important;animation:none!important}
/* the click: a quick ring from the cursor's tip */
.bclick{position:absolute;left:0;top:0;z-index:4;width:26px;height:26px;margin:-11px 0 0 -11px;border-radius:50%;pointer-events:none;opacity:0;
  border:2px solid rgba(255,255,255,.85);transform:translate3d(var(--cx,0),var(--cy,0),0) scale(.3)}
.bclick.go{animation:bclick .42s cubic-bezier(.2,.7,.2,1)}
@keyframes bclick{0%{opacity:.9;transform:translate3d(var(--cx),var(--cy),0) scale(.3)}100%{opacity:0;transform:translate3d(var(--cx),var(--cy),0) scale(1.15)}}
@media (prefers-reduced-motion:reduce){.bclick{display:none}}
/* inside Discord mocks, the embed keeps Discord's own colours and 8px rhythm (the generic .tkc p rule
   was greying the title and author and adding an extra 8px above every line) */
.dmsg .demb p{margin:0}
.dmsg .demb__t{color:#f2f3f5}
.dmsg .demb__a{color:#f2f3f5}
.dmsg .demb__d{color:#dbdee1}
.dmsg .demb__ft{color:#b5bac1}
.dmsg .bld__real{gap:8px}