[hidden]{display:none!important}
/* YappyChat website. Self-hosted Funnel Display + Instrument Sans (SIL OFL), no external requests.
   Idea: the whole site is a Twitch chat, and Yappy is the one moderating it. Bubbles have a tail corner, names have colours,
   the one big moment is the hero chat you can moderate yourself. */
@font-face{font-family:"Funnel Display";font-weight:300 800;font-display:swap;src:url(/fonts/funnel-display.woff) format("woff")}
@font-face{font-family:"Instrument Sans";font-weight:400 500;font-style:normal;font-display:swap;src:url(/fonts/body-400.woff) format("woff")}
@font-face{font-family:"Instrument Sans";font-weight:600 800;font-style:normal;font-display:swap;src:url(/fonts/body-700.woff) format("woff")}
@font-face{font-family:"Instrument Sans";font-weight:400 500;font-style:italic;font-display:swap;src:url(/fonts/body-400i.woff) format("woff")}

:root{
  --bg:#1b1346;--bg2:#110b2e;--surface:#261a5c;--card:#241a58;--card2:#2f2270;--panel:#241a58;--panel2:#2f2270;
  --line:rgba(255,255,255,.13);--line2:rgba(255,255,255,.24);
  --text:#f6f3ff;--muted:#bdb6e3;--dim:#938cc0;
  --bubble:#fbfaff;--ink:#1b1346;--ink2:#4a4278;
  --yellow:#ffd84a;--green:#2fd47f;--coral:#ff7a66;--sky:#69ccff;--lilac:#b9a0ff;--pink:#ff8fc4;
  --blue:#69ccff;--violet:#b9a0ff;--amber:#ffd84a;--mint:#2fd47f;--red:#ff6b7a;
  --accent:#ffd84a;--accent2:#ffe88f;--ok:#2fd47f;
  --display:"Funnel Display","Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:20px;--tail:20px 20px 20px 6px;--ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:var(--sky);text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;border-radius:6px}
img,svg,video{max-width:100%}img{display:block}
::selection{background:var(--yellow);color:var(--ink)}
code,kbd{font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:.86em;background:rgba(255,255,255,.1);border:1px solid var(--line);padding:1px 7px;border-radius:7px}
kbd{border-bottom-width:2px}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;line-height:1.08;margin:0;font-weight:700}
b,strong{font-weight:700}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.grad{color:inherit;background:none;animation:none}
.skip{position:absolute;left:-999px;top:8px;background:var(--yellow);color:var(--ink);padding:8px 14px;border-radius:10px;z-index:99;font-weight:700}.skip:focus{left:8px}

/* navigation: tabs, like the app */
header.nav{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
header.nav .bar{display:flex;align-items:stretch;gap:6px;max-width:1180px;margin:0 auto;padding:0 24px;height:62px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.02em;color:var(--text)}.brand:hover{text-decoration:none}
.brand .logo{width:36px;height:36px;display:block}.brand .logo .yappy-svg{width:36px;height:auto;display:block}
nav.links{display:flex;gap:2px;margin-left:auto;align-items:stretch}
nav.links a{position:relative;display:flex;align-items:center;color:var(--muted);padding:0 15px;font-weight:600;font-size:15px;transition:color .15s,background .15s}
nav.links a:before{content:"";position:absolute;left:10px;right:10px;top:0;height:3px;border-radius:0 0 3px 3px;background:transparent;transition:background .15s}
nav.links a:hover{color:var(--text);background:rgba(255,255,255,.05);text-decoration:none}
nav.links a.on{color:var(--text);background:rgba(255,255,255,.07)}nav.links a.on:before{background:var(--yellow)}
nav.links a.heart{color:var(--pink)}nav.links a.heart:hover,nav.links a.heart.on{color:#fff}
nav.links a.btn{align-self:center;margin-left:8px;padding:8px 16px}nav.links a.btn:before{display:none}
.menu{display:none;margin:auto 0 auto auto;background:none;border:1px solid var(--line2);color:var(--text);border-radius:10px;width:42px;height:42px;cursor:pointer;font:inherit}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:2px solid var(--line2);background:transparent;color:var(--text);padding:10px 20px;border-radius:12px;font-weight:700;font-size:15.5px;cursor:pointer;font-family:inherit;transition:transform .15s var(--ease),background .15s,border-color .15s,box-shadow .15s;white-space:nowrap}
.btn:hover{border-color:var(--text);background:rgba(255,255,255,.07);text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.btn.primary:hover{background:#ffe27a;border-color:#ffe27a;box-shadow:0 5px 0 rgba(0,0,0,.28)}
.btn.heart{background:var(--pink);border-color:var(--pink);color:#3a0f26}.btn.heart:hover{background:#ffa6d0;border-color:#ffa6d0;box-shadow:0 5px 0 rgba(0,0,0,.28)}
.btn.big{padding:14px 26px;font-size:17px;border-radius:14px}.btn.sm{padding:7px 14px;font-size:14px;border-radius:10px}
.btn svg{width:1.1em;height:1.1em}
.btn.off{opacity:.55;pointer-events:none}

/* motion: only the hero chat moves on its own; a few things fade in */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}html{scroll-behavior:auto}.js .reveal{opacity:1;transform:none}}

/* pinned message strip (dismissible, like pins in chat) */
.pinbar{background:var(--bg2);border-bottom:1px solid var(--line)}
.pinbar .in{max-width:1180px;margin:0 auto;padding:9px 24px;display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--muted)}
.pinbar .in>i{display:flex;flex:none;color:var(--yellow)}.pinbar .in>i svg{width:16px;height:16px}
.pinbar b{color:var(--text)}
.pinbar .tx{flex:1;min-width:0}
.pinbar a{font-weight:700;white-space:nowrap}
.pinbar button{flex:none;background:none;border:0;color:var(--dim);cursor:pointer;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font:inherit;font-size:18px;line-height:1}
.pinbar button:hover{color:var(--text);background:rgba(255,255,255,.08)}
.pinbar[hidden]{display:none}

/* chat-channel tag used above inner page titles */
.eyebrow{display:inline-block;font-size:15px;font-weight:700;color:var(--yellow);margin-bottom:12px}
.eyebrow:before{content:"# ";color:var(--dim)}

/* hero */
.hero{padding:64px 0 40px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:56px;align-items:center}
.hero h1{font-size:clamp(46px,6.4vw,92px);line-height:.98;letter-spacing:-.035em;margin:0 0 24px}
.hero .lead{font-size:clamp(18px,1.7vw,21px);color:var(--muted);margin:0 0 30px;max-width:30em;line-height:1.55}
.hero .lead b{color:var(--text)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.fine{color:var(--dim);font-size:14px}
.soon{display:inline-block;font-size:12px;background:rgba(255,255,255,.1);color:var(--muted);padding:1px 9px;border-radius:99px;margin-left:4px;font-weight:700}

/* the hero chat you can moderate */
.chatdemo{position:relative;border-radius:18px;background:#0f0a28;border:2px solid var(--line2);box-shadow:12px 12px 0 var(--yellow);font-size:15px;line-height:1.45}
.cd-tabs{display:flex;align-items:stretch;border-bottom:1px solid var(--line);background:#150e36;border-radius:16px 16px 0 0}
.cd-tab{position:relative;padding:11px 18px 10px;font-weight:700;color:var(--text)}.cd-tab:before{content:"";position:absolute;left:8px;right:8px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--lilac)}
.cd-tab i{font-style:normal;color:var(--green);margin-left:8px;font-size:13px;font-weight:600}
.cd-n{margin-left:auto;padding:11px 16px;color:var(--dim);font-size:13.5px;display:flex;align-items:center;gap:7px}.cd-n b{color:var(--text)}
.cd-pin{display:flex;gap:9px;align-items:center;padding:8px 14px;background:rgba(255,216,74,.1);border-bottom:1px solid rgba(255,216,74,.25);font-size:13.5px;color:#f1e4a8}
.cd-pin i{display:flex;flex:none;color:var(--yellow)}.cd-pin svg{width:14px;height:14px}
.cd-pin span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd-pin button{flex:none;background:none;border:0;color:#f1e4a8;opacity:.7;cursor:pointer;font-size:16px;line-height:1;width:24px;height:24px;border-radius:6px}.cd-pin button:hover{opacity:1;background:rgba(255,255,255,.1)}
.cd-log{list-style:none;margin:0;padding:8px 0;height:360px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.cd-log .m{position:relative;padding:5px 14px 5px 14px;color:#e9e5ff;word-wrap:break-word;transition:background .12s,opacity .3s}
.cd-log .m:hover,.cd-log .m:focus-within,.cd-log .m.sel{background:rgba(255,255,255,.07)}
.cd-log .m:focus-visible{outline-offset:-3px}
.cd-log .ts{color:var(--dim);font-size:12px;margin-right:7px}
.cd-log .nm{font-weight:700;margin-right:1px}
.cd-log .nm:after{content:":";color:#e9e5ff;font-weight:400;margin-right:5px}
.cd-log .bd{display:inline-flex;gap:3px;vertical-align:-3px;margin-right:5px}
.cd-log .bd svg{width:17px;height:17px}
.cd-log img.em{display:inline-block;width:22px;height:22px;vertical-align:-6px;margin:0 1px}
.cd-log .m.new{animation:mIn .35s var(--ease)}
@keyframes mIn{from{opacity:0;transform:translateY(10px)}}
.cd-log .mb{position:absolute;right:10px;top:-14px;display:none;gap:2px;padding:3px;border-radius:10px;background:#2a1f5e;border:1px solid var(--line2);box-shadow:0 6px 0 rgba(0,0,0,.25);z-index:2}
.cd-log .m:hover .mb,.cd-log .m:focus-within .mb,.cd-log .m.sel .mb{display:flex}
.cd-log .mb button{width:32px;height:30px;display:grid;place-items:center;background:none;border:0;border-radius:7px;color:#e9e5ff;cursor:pointer}
.cd-log .mb button svg{width:16px;height:16px}
.cd-log .mb button:hover{background:rgba(255,255,255,.12)}.cd-log .mb button.d:hover{background:var(--red);color:#fff}
.cd-log .m.gone .tx{color:var(--dim);font-style:italic;text-decoration:none}
.cd-log .m.gone .nm{opacity:.55}
.cd-log .m.sys{color:var(--muted);font-size:14px;border-left:3px solid var(--green);margin:3px 0;background:rgba(47,212,127,.07)}
.cd-log .m.sys.ban{border-left-color:var(--red);background:rgba(255,107,122,.08)}
.cd-log .m.sys button{background:none;border:0;color:var(--sky);font:inherit;font-weight:700;cursor:pointer;padding:0 2px;margin-left:6px;text-decoration:underline;text-underline-offset:3px}
.cd-compose{position:relative;display:flex;align-items:center;gap:10px;padding:12px 14px 14px;border-top:1px solid var(--line)}
.cd-in{flex:1;min-width:0;height:var(--bh,40px);border-radius:10px;background:#1b1346;border:1px solid var(--line);padding:0 12px;display:flex;align-items:center;color:var(--dim);font-size:14.5px;white-space:nowrap;overflow:hidden}
.cd-compose .cy{flex:none;width:var(--bh,40px);height:var(--bh,40px);display:grid;place-items:center}
.cd-compose .cy .yappy-svg{width:100%;height:100%;display:block}
.cd-send{flex:none;height:var(--bh,40px);padding:0 16px;border-radius:10px;background:var(--lilac);color:var(--ink);font-weight:700;display:flex;align-items:center;font-size:15px}
.cd-say{position:absolute;right:12px;bottom:calc(100% - 6px);width:min(300px,86%);background:var(--bubble);color:var(--ink);padding:12px 14px;border-radius:16px 16px 4px 16px;font-size:14.5px;line-height:1.4;box-shadow:0 8px 0 rgba(0,0,0,.3);z-index:3;animation:mIn .3s var(--ease)}
.cd-say[hidden]{display:none}
.cd-say b{display:block;margin-bottom:2px}
.cd-say .row{display:flex;gap:8px;margin-top:10px}
.cd-say button{font:inherit;font-weight:700;font-size:13.5px;border-radius:8px;padding:6px 12px;cursor:pointer;border:2px solid var(--ink);background:var(--ink);color:#fff}
.cd-say button.q{background:transparent;color:var(--ink)}
.cd-hint{margin:22px 4px 0;font-size:14.5px;color:var(--muted);display:flex;gap:9px;align-items:center}
.cd-hint svg{width:18px;height:18px;flex:none;color:var(--yellow)}
.cd-count{color:var(--text);font-weight:700}

/* screenshot, with notes from Yappy */
.showcase{padding:30px 0 90px}
.shotwrap{position:relative;max-width:940px;margin:0 auto}
.winframe{border-radius:14px;overflow:hidden;background:#0d0f13;border:2px solid var(--line2);box-shadow:10px 10px 0 var(--lilac)}
.winframe .chrome{display:flex;align-items:center;gap:7px;padding:9px 12px;background:#14171c;border-bottom:1px solid rgba(255,255,255,.08)}
.winframe .chrome i{width:11px;height:11px;border-radius:50%;background:#2b3046}.winframe .chrome span{margin-left:8px;font-size:12.5px;color:#8a93a2;font-weight:600}
.winframe img{width:100%;height:auto;display:block}
.note-b{position:absolute;width:190px;background:var(--bubble);color:var(--ink);padding:10px 14px;border-radius:16px 16px 16px 4px;font-weight:700;font-size:14.5px;line-height:1.3;box-shadow:0 6px 0 rgba(0,0,0,.3)}
.note-b.r{border-radius:16px 16px 4px 16px}
.note-b small{display:block;font-weight:500;color:var(--ink2);font-size:13px;margin-top:2px}

/* sections */
section{padding:92px 0;position:relative}
section h2{font-size:clamp(32px,4.4vw,58px);letter-spacing:-.03em;margin-bottom:16px;max-width:15em}
section .sub{color:var(--muted);font-size:19px;max-width:36em;margin:0 0 44px;line-height:1.55}
.center{text-align:center}.center h2,.center .sub{margin-inline:auto}

/* feature chat log */
.log{display:grid;grid-template-columns:repeat(12,1fr);gap:34px 24px;align-items:start}
.say{grid-column:span 6}.say.w7{grid-column:span 7}.say.w5{grid-column:span 5}.say.w4{grid-column:span 4}.say.w8{grid-column:span 8}
.say .who{display:flex;align-items:center;gap:7px;margin:0 0 7px 6px;font-size:14px;font-weight:700}
.say .who svg{width:17px;height:17px}.say .who time{margin-left:4px;color:var(--dim);font-weight:500;font-size:12.5px}
.say .bb{position:relative;background:var(--bubble);color:var(--ink);border-radius:var(--tail);padding:22px 24px 24px}
.say .bb:after{content:"";position:absolute;left:0;bottom:-11px;width:22px;height:12px;background:inherit;clip-path:polygon(0 0,100% 0,0 100%)}
.say h3{font-size:24px;margin:0 0 8px;color:var(--ink);letter-spacing:-.015em}
.say p{margin:0;color:var(--ink2);font-size:16.5px;line-height:1.55}
.say p b{color:var(--ink)}
.say .pvbox{margin:-6px -6px 18px;pointer-events:none}
.say .pvbox .pv{height:150px;border-radius:12px}
.say.hl .bb{background:var(--yellow)}.say.hl p{color:#3b3250}
.say.hl .bb:after{background:var(--yellow)}
.say .hlt{display:inline-block;font-size:13px;font-weight:800;background:var(--ink);color:var(--yellow);padding:2px 10px;border-radius:99px;margin-left:8px;vertical-align:3px;font-family:var(--body);letter-spacing:0}
.say .emotes{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}.say .emotes img{width:38px;height:38px}
.say .names{display:grid;gap:6px;margin-top:16px;font-weight:700;font-size:15px}.say .names div{display:flex;gap:12px}
.say .names span{padding:2px 0}

/* moderators */
.modband{background:var(--bg2);border-block:1px solid var(--line)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:start}
.two.flip>:first-child{order:2}
.feat{display:grid;gap:4px;margin-top:6px}
.feat .f{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;padding:16px 0;border-top:1px solid var(--line)}
.feat .f:first-child{border-top:0}
.feat .f .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(47,212,127,.15);color:var(--green)}.feat .f .ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feat .f b{display:block;font-size:18px;margin-bottom:2px;font-family:var(--display);font-weight:700;letter-spacing:-.01em}.feat .f span{color:var(--muted);font-size:16px;line-height:1.5}
.stackpv{display:grid;gap:12px;position:sticky;top:90px}
.stackpv .pv{height:150px;border-radius:14px;border:2px solid var(--line2)}
.stackpv .cap{font-size:14px;color:var(--muted);margin:0 4px 10px;font-weight:600}
.stackpv img{border-radius:14px;border:2px solid var(--line2);width:100%;height:auto}

/* video */
.vidwrap{position:relative;border-radius:18px;background:#000;border:2px solid var(--line2);box-shadow:10px 10px 0 var(--coral);overflow:hidden}
.vidwrap video{width:100%;height:auto;display:block;background:#000;aspect-ratio:16/9}
.vidwrap .play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(17,11,46,.35);cursor:pointer;border:0;color:#fff;transition:opacity .25s}
.vidwrap .play span{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);box-shadow:0 7px 0 rgba(0,0,0,.35);transition:transform .15s var(--ease)}
.vidwrap .play:hover span{transform:scale(1.07)}
.vidwrap .play svg{width:34px;height:34px;fill:var(--ink);margin-left:5px}
.vidwrap.playing .play{opacity:0;pointer-events:none}

/* Yappy talks */
.yap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center}
.yap .box{position:relative;display:grid;place-items:center;min-height:420px;padding:20px}
.yap .box .yappy-svg{width:min(300px,76%);height:auto;filter:drop-shadow(0 12px 0 rgba(0,0,0,.28))}
.yap .box .hint{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:14px;color:var(--dim)}
.yap .talk{position:absolute;top:6px;left:50%;transform:translateX(-30%);width:min(320px,92%);background:var(--bubble);color:var(--ink);padding:14px 18px;border-radius:20px 20px 20px 4px;font-weight:600;font-size:16.5px;line-height:1.35;box-shadow:0 7px 0 rgba(0,0,0,.28);z-index:2}
.yap .talk:after{content:"";position:absolute;left:34px;bottom:-12px;width:24px;height:13px;background:var(--bubble);clip-path:polygon(0 0,100% 0,0 100%)}
.moods{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 0}
.moods button{background:transparent;border:2px solid var(--line2);color:var(--text);padding:8px 16px;border-radius:99px;cursor:pointer;font:700 14.5px var(--body);transition:background .15s,border-color .15s,color .15s}
.moods button:hover{border-color:var(--text)}
.moods button.on{background:var(--lilac);border-color:var(--lilac);color:var(--ink)}
.sparks{position:absolute;inset:0;pointer-events:none}.sparks i{position:absolute;color:var(--pink);font-style:normal;opacity:0;animation:rise 3.4s ease-in infinite}
@keyframes rise{0%{transform:translateY(20px) scale(.6);opacity:0}15%{opacity:.9}100%{transform:translateY(-190px) scale(1.2);opacity:0}}
@keyframes y-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes y-hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-14px)}}

/* patch notes */
.notes{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.notes .lh{position:sticky;top:96px}
.notes h2{font-size:clamp(32px,4vw,52px)}
.pn{list-style:none;margin:0;padding:0}
.pn li{display:grid;grid-template-columns:minmax(0,1fr);padding:18px 0;border-top:1px solid var(--line)}
.pn li:first-child{border-top:2px solid var(--yellow)}
.pn b{font-family:var(--display);font-size:20px;letter-spacing:-.01em;margin-bottom:3px}
.pn span{color:var(--muted);font-size:16px;line-height:1.5}
details.older{margin-top:18px;border-top:1px solid var(--line);padding-top:6px}
details.older summary{cursor:pointer;font-weight:700;padding:12px 0;color:var(--sky);list-style:none}
details.older summary::-webkit-details-marker{display:none}
details.older summary:before{content:"+";display:inline-block;width:22px;color:var(--yellow)}details.older[open] summary:before{content:"–"}

/* supporter badges + shine */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:0 0 10px}
.tier{position:relative;overflow:hidden;border-radius:var(--tail);padding:18px 18px 16px;background:var(--card);border:2px solid var(--tc,var(--line2));text-align:left}
.tier b{display:block;font-size:19px;font-family:var(--display);letter-spacing:-.01em}.tier small{color:var(--muted);font-size:14.5px}
.tier .gem{display:block;width:28px;height:28px;border-radius:50%;margin-bottom:10px;background:var(--tg)}
.tier.white{--tc:rgba(255,255,255,.35);--tg:linear-gradient(135deg,#fff,#d8deeb)}
.tier.bronze{--tc:#d98b4a;--tg:linear-gradient(135deg,#f9c99b,#c97a3a 60%,#8e4a1c);--sh:rgba(255,196,140,.5)}
.tier.silver{--tc:#c3ccda;--tg:linear-gradient(135deg,#fff,#c3ccda 55%,#8794a8);--sh:rgba(255,255,255,.55)}
.tier.gold{--tc:#f6c21a;--tg:linear-gradient(135deg,#fff3a8,#f6c21a 55%,#b87d00);--sh:rgba(255,236,150,.6)}
.tier.creator{--tc:#6ee7ff;--tg:linear-gradient(135deg,#e6fdff,#6ee7ff 55%,#7a7dff);--sh:rgba(180,240,255,.6)}
.shine:after{content:"";position:absolute;top:-30%;bottom:-30%;width:42%;left:-70%;background:linear-gradient(100deg,transparent 0%,var(--sh,rgba(255,255,255,.4)) 50%,transparent 100%);opacity:.45;transform:skewX(-22deg);animation:cardshine 5.2s ease-in-out infinite;animation-delay:var(--sd,0s);pointer-events:none;mix-blend-mode:screen}
@keyframes cardshine{0%,55%{left:-70%}100%{left:150%}}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.wcard{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;background:var(--card);border:2px solid var(--tc,var(--line));font-weight:700}
.wcard .gem{flex:none;width:28px;height:28px;border-radius:50%;background:var(--tg,linear-gradient(135deg,#fff,#d8deeb))}
.wcard small{display:block;color:var(--muted);font-weight:500;font-size:13px;text-transform:capitalize}
.wcard.white{--tc:rgba(255,255,255,.25);--tg:linear-gradient(135deg,#fff,#d8deeb)}
.wcard.bronze{--tc:#d98b4a;--tg:linear-gradient(135deg,#f9c99b,#c97a3a 60%,#8e4a1c);--sh:rgba(255,196,140,.5)}
.wcard.silver{--tc:#c3ccda;--tg:linear-gradient(135deg,#fff,#c3ccda 55%,#8794a8);--sh:rgba(255,255,255,.55)}
.wcard.gold{--tc:#f6c21a;--tg:linear-gradient(135deg,#fff3a8,#f6c21a 55%,#b87d00);--sh:rgba(255,236,150,.6)}
.wcard.creator{--tc:#6ee7ff;--tg:linear-gradient(135deg,#e6fdff,#6ee7ff 55%,#7a7dff);--sh:rgba(180,240,255,.6)}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px;vertical-align:middle}
.dot.gold{background:linear-gradient(135deg,#fff3a8,#f6c21a,#b87d00)}.dot.silver{background:linear-gradient(135deg,#fff,#c3ccda,#8794a8)}.dot.bronze{background:linear-gradient(135deg,#f7c293,#c97a3a,#8e4a1c)}.dot.white{background:#e7ebf3}.dot.creator{background:linear-gradient(135deg,#e6fdff,#6ee7ff,#7a7dff)}

/* the message box at the end of the page */
.composer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 28px;align-items:center;border-radius:var(--tail);padding:38px;background:var(--bubble);color:var(--ink)}
.composer h2{color:var(--ink);font-size:clamp(28px,3.6vw,44px);margin:0 0 10px;max-width:none}
.composer p{margin:0;color:var(--ink2);font-size:18px;max-width:34em;line-height:1.5}
.composer .go{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.composer .btn{border-color:var(--ink);color:var(--ink)}.composer .btn:hover{background:rgba(27,19,70,.08);border-color:var(--ink)}
.composer .btn.primary{background:var(--ink);color:#fff}.composer .btn.primary:hover{background:#2c2070;border-color:#2c2070}

/* cards, forms, notes (shared by inner pages) */
.card{background:var(--card);border:2px solid var(--line);border-radius:var(--tail);padding:24px}
.card h3{margin:0 0 8px;font-size:21px}.card p{margin:0;color:var(--muted);font-size:16px}
.g3{grid-template-columns:repeat(3,1fr)!important}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.price{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line);gap:12px}.price:last-child{border:0}.price b{color:var(--yellow)}
.note{background:rgba(185,160,255,.12);border:1px solid rgba(185,160,255,.4);border-left:4px solid var(--lilac);border-radius:6px 14px 14px 6px;padding:14px 18px;margin:18px 0;color:#e4dcff}
.note.warn{background:rgba(255,216,74,.1);border-color:rgba(255,216,74,.4);border-left-color:var(--yellow);color:#fff1b8}
.msgbox{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px;font-family:ui-monospace,Consolas,monospace;color:#d8ceff;overflow:auto}
.steps{counter-reset:s;list-style:none;padding:0}.steps li{counter-increment:s;position:relative;padding:4px 0 18px 54px}.steps li:before{content:counter(s);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:var(--yellow);color:var(--ink);font-weight:800;display:grid;place-items:center;font-family:var(--display)}
table.t{border-collapse:separate;border-spacing:0;width:100%;margin:16px 0;font-size:15.5px;border:2px solid var(--line);border-radius:14px;overflow:hidden}table.t th,table.t td{border-bottom:1px solid var(--line);padding:10px 14px;text-align:left;vertical-align:top}table.t tr:last-child td{border-bottom:0}table.t th{background:rgba(255,255,255,.07)}
label.f{display:block;font-weight:700;font-size:15px;margin:18px 0 7px;color:#e4dcff}
.fi,.ta,.sel{width:100%;background:var(--bg2);color:var(--text);border:2px solid var(--line2);border-radius:12px;padding:12px 15px;font:inherit;transition:border-color .15s,box-shadow .15s}
.fi:focus,.ta:focus,.sel:focus{outline:none;border-color:var(--yellow);box-shadow:0 0 0 4px rgba(255,216,74,.22)}
.ta{min-height:160px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fmsg{margin-top:14px;font-weight:700}.fmsg.ok{color:var(--green)}.fmsg.bad{color:#ff9aa5}
.ok{color:var(--ok)}.bad{color:#ff8b97}

/* inner page heads */
.phead{padding:64px 0 20px}
.phead h1{font-size:clamp(40px,5.8vw,76px);letter-spacing:-.035em;line-height:1;margin:0 0 18px}
.phead p{color:var(--muted);font-size:20px;max-width:36em;margin:0;line-height:1.55}

/* get involved */
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.path{position:relative;border-radius:var(--tail);padding:30px;background:var(--card);border:2px solid var(--pc,var(--line2));overflow:hidden}
.path h3,.path h2.ph{font-size:26px;margin:14px 0 10px}.path p{color:var(--muted);margin:0 0 16px}.path ul{margin:0 0 20px;padding-left:20px;color:#e4dcff}.path li{margin:6px 0}
.path .num{display:inline-block;font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);background:var(--pc,var(--yellow));padding:2px 12px;border-radius:99px}
.band2{border-radius:var(--tail);padding:48px;background:var(--bubble);color:var(--ink);text-align:left}
.band2 .eyebrow{color:var(--ink2)}.band2 .eyebrow:before{color:var(--ink2)}
.band2 h2{margin-bottom:12px;color:var(--ink)}.band2 p{color:var(--ink2);max-width:36em;margin:0 0 24px;font-size:19px}
.band2 .btn{border-color:var(--ink);color:var(--ink)}.band2 .btn.primary{background:var(--ink);color:#fff}

/* contact */
.cgrid{display:grid;grid-template-columns:1.3fr .7fr;gap:26px;align-items:start}
.biz{margin-top:28px;border-radius:var(--tail);padding:26px 28px;background:rgba(255,216,74,.1);border:2px solid rgba(255,216,74,.45);display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.biz h3{font-size:22px;margin-bottom:4px}.biz p{margin:0;color:#f1e4a8;font-size:16px;max-width:34em}
.biz a.mail{font-weight:700;font-size:18px;color:var(--yellow);border-bottom:2px solid rgba(255,216,74,.55);padding-bottom:1px}

/* footer */
footer{position:relative;margin-top:60px;background:var(--bg2);border-top:1px solid var(--line);padding:64px 0 48px;color:var(--muted);font-size:15.5px}
footer .wrap{display:grid;grid-template-columns:1.4fr repeat(3,.7fr);gap:36px}
footer h4,footer h2.fh{margin:0 0 12px;font-family:var(--display);color:var(--text);font-size:17px;font-weight:700}
footer a{color:var(--muted);display:block;padding:3px 0}footer a:hover{color:var(--text)}
footer .legal{grid-column:1/-1;border-top:1px solid var(--line);padding-top:24px;color:var(--dim);font-size:14px;line-height:1.7}
footer .fb{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:23px;color:var(--text);margin-bottom:10px}footer .fb img{width:36px}
.soonrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.soonrow span{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:99px;border:1px dashed var(--line2);font-size:14px;color:var(--muted)}.soonrow span b{font-size:12px;background:rgba(255,255,255,.1);color:var(--muted);padding:1px 8px;border-radius:99px}
.typing{display:flex;align-items:center;gap:4px;margin:18px 0 0;font-size:14px;color:var(--dim);font-style:italic}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--dim);animation:tp 1.2s ease-in-out infinite}.typing i:nth-of-type(2){animation-delay:.15s}.typing i:nth-of-type(3){animation-delay:.3s}
@keyframes tp{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

/* guide */
.doc{display:grid;grid-template-columns:260px 1fr;gap:48px;padding:40px 0 90px;align-items:start}
.toc{position:sticky;top:90px;max-height:calc(100vh - 110px);overflow:auto;padding-right:6px}
.toc a{display:block;color:var(--muted);padding:4px 12px;border-left:3px solid var(--line);font-size:15px}.toc a:hover,.toc a.on{color:var(--text);text-decoration:none;border-color:var(--yellow)}
.toc .grp{font-size:14px;font-weight:700;color:var(--text);margin:20px 0 4px 12px}
.article{min-width:0}
.article h1{font-size:clamp(38px,5vw,62px);margin:0 0 10px;letter-spacing:-.035em;line-height:1}.article .lead{color:var(--muted);font-size:20px;margin-bottom:30px;line-height:1.55}
.article h2{font-size:32px;margin:64px 0 12px;padding-top:14px;border-top:2px solid var(--line);scroll-margin-top:90px;max-width:none}
.article h3{font-size:21px;margin:30px 0 6px;scroll-margin-top:90px}
.article p,.article li{color:#e2dcf8}.article ul,.article ol{padding-left:22px}
figure.shot{margin:22px 0 26px;border-radius:14px;overflow:hidden;background:#0d0f13;border:2px solid var(--line2)}
figure.shot img{width:100%;height:auto}
figure.shot figcaption{font-size:14.5px;color:var(--muted);padding:10px 14px 12px;background:var(--bg2)}
figure.shot.sm{max-width:560px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pair figure.shot{margin:14px 0}

@media (max-width:1020px){
  .g3{grid-template-columns:repeat(2,1fr)!important}
  .hero .wrap,.two,.yap,.cgrid,.notes{grid-template-columns:1fr}
  .two.flip>:first-child{order:0}
  .hero{padding-top:40px}.chatdemo{max-width:560px}
  .stackpv,.notes .lh{position:static}
  .say,.say.w7,.say.w5,.say.w4,.say.w8{grid-column:span 12}
  footer .wrap{grid-template-columns:1fr 1fr}
  .doc{grid-template-columns:1fr}.toc{position:static;max-height:none}
  .pair{grid-template-columns:1fr}.composer{grid-template-columns:1fr;padding:28px}
  .band2{padding:30px 22px}
}
@media (max-width:1300px){.note-b{display:none}}
@media (max-width:760px){
  .g3{grid-template-columns:1fr!important}
  header.nav .bar{position:relative}
  nav.links{position:absolute;left:0;right:0;top:62px;flex-direction:column;align-items:stretch;padding:8px 16px 16px;background:var(--bg);border-bottom:1px solid var(--line2);display:none}
  nav.links.open{display:flex}nav.links a{padding:13px 12px;min-height:46px}nav.links a:before{display:none}nav.links a.btn{margin:8px 0 0;justify-content:center}.menu{display:block}
  section{padding:64px 0}.split2{grid-template-columns:1fr}
  .chatdemo{box-shadow:7px 7px 0 var(--yellow)}.cd-log{height:340px}
  footer .wrap{grid-template-columns:1fr}
  .pinbar .in{padding:9px 16px}.wrap{padding:0 18px}
  .yap .box{min-height:380px}.yap .talk{transform:translateX(-50%)}.yap .talk:after{left:40px}
}


/* ===== 0.13 home layout: flow strip, setup steps, feature blocks, audiences, API map, free, guides ===== */
.btn.ghost{border-color:transparent;color:var(--muted)}.btn.ghost:hover{color:var(--text);border-color:var(--line2)}
.flow{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 28px;padding:0;max-width:34em}
.flow li{position:relative;padding:10px 4px 0;border-top:3px solid var(--line2);transition:border-color .3s}
.flow li b{display:block;font-family:var(--display);font-size:18px;color:var(--muted);transition:color .3s}
.flow li span{display:block;font-size:13px;line-height:1.35;color:var(--dim);margin-top:2px}
.flow li.on{border-top-color:var(--yellow)}.flow li.on b{color:var(--text)}
.flow li.done{border-top-color:var(--green)}
.howband{background:var(--bg2);border-block:1px solid var(--line);padding:76px 0}
.setup{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.setup li{display:flex;gap:16px;align-items:flex-start}
.setup .n{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--ink);font:700 21px var(--display)}
.setup b{display:block;font-family:var(--display);font-size:20px;letter-spacing:-.01em;margin:6px 0 4px}
.setup p{margin:0;color:var(--muted);font-size:16px;line-height:1.5}
.fblock{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center;margin:0 0 96px}
.fblock:last-child{margin-bottom:0}
.fblock.flip .fcopy{order:2}
.ftag{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--c,var(--yellow));margin-bottom:10px}
.ftag:before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c,var(--yellow))}
.fcopy h3{font-size:clamp(28px,3.2vw,40px);letter-spacing:-.025em;margin:0 0 18px}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ticks li{position:relative;padding-left:34px;color:var(--muted);font-size:16.5px;line-height:1.5}
.ticks li b{color:var(--text)}
.ticks li:before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:rgba(47,212,127,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232fd47f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.ticks.small li{font-size:15.5px}
.fvis .say{grid-column:auto}
.fvis .say .emotes{margin-top:16px}
.fvis .stackpv{position:static}
.fvis.yap{display:block}
.fvis.yap .box{min-height:400px}
.fcopy .moods{margin-top:20px}
.benefits{padding-top:40px}
.bcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.bcard{background:var(--card);border:2px solid var(--line);border-radius:var(--tail);padding:26px;display:flex;flex-direction:column}
.bcard h3{font-size:23px;margin:14px 0 8px}
.bcard p{margin:0 0 16px;color:var(--muted);font-size:16px;flex:1}
.bcard a{font-weight:700}
.bico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(185,160,255,.16);color:var(--lilac)}
.bico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.official{background:var(--bg2);border-block:1px solid var(--line)}
.offgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.apimap{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px}
.apimap .node{border-radius:var(--tail);padding:18px 18px;text-align:center;min-width:120px}
.apimap .node b{display:block;font-family:var(--display);font-size:20px}
.apimap .node span{font-size:13px}
.apimap .you{background:var(--bubble);color:var(--ink)}.apimap .you span{color:var(--ink2)}
.apimap .tw{background:var(--lilac);color:var(--ink)}.apimap .tw span{color:#3b3070}
.apimap .links{display:grid;gap:10px}
.apimap .ln{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:700}
.apimap .ln i{flex:1;height:0;border-top:2px dashed var(--line2);position:relative}
.apimap .ln i:after{content:"";position:absolute;right:-2px;top:-6px;border:5px solid transparent;border-left-color:var(--line2)}
.apimap .ln span{flex:none;width:9.5em;line-height:1.25}.apimap .ln small{display:block;font-weight:500;color:var(--dim);font-size:12.5px}
.apimap figcaption{grid-column:1/-1;margin-top:10px;font-size:14px;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.stat{background:var(--card);border:2px solid var(--line);border-radius:var(--tail);padding:24px}
.stat b{display:block;font-family:var(--display);font-size:clamp(44px,5vw,64px);line-height:1;color:var(--yellow);letter-spacing:-.03em}
.stat span{display:block;margin-top:8px;color:var(--muted);font-size:16px}
.rcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rcard{display:block;background:var(--card);border:2px solid var(--line);border-radius:var(--tail);padding:22px;color:var(--text);transition:border-color .15s,transform .15s var(--ease)}
.rcard:hover{text-decoration:none;border-color:var(--yellow);transform:translateY(-2px)}
.rcard b{display:block;font-family:var(--display);font-size:20px;margin-bottom:6px}
.rcard span{color:var(--muted);font-size:15.5px}
.rcard.wide{grid-column:1/-1;background:var(--bubble);border-color:var(--bubble);color:var(--ink)}.rcard.wide span{color:var(--ink2)}
@media (max-width:1020px){
  .setup,.bcards,.rcards{grid-template-columns:1fr}
  .fblock,.offgrid{grid-template-columns:1fr;gap:32px}.fblock.flip .fcopy{order:0}
  .stats{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:760px){
  .flow{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}
  .stats{grid-template-columns:1fr}
  .apimap{grid-template-columns:1fr}.apimap .links{padding:4px 12px}.apimap .ln i{display:none}.apimap .ln span{width:auto}
  .howband{padding:56px 0}
}

/* Yappy mascot (same rules as the app) */
.yappy-svg{--ex:0;--ey:0;--bl:1;--es:1;overflow:visible}
.y-face{transform:translate(calc(var(--ex)*.3px),calc(var(--ey)*.25px));transition:transform .28s cubic-bezier(.2,.8,.3,1)}
.y-eyes{transform:translate(calc(var(--ex)*.7px),calc(var(--ey)*.7px));transition:transform .28s cubic-bezier(.2,.8,.3,1)}
.y-eye{transform-box:fill-box;transform-origin:center;transform:scale(var(--es),var(--bl));transition:transform .09s}
.yappy-svg .m-o,.yappy-svg .m-flat{display:none}
.yappy-svg[data-mood=surprised]{--es:1.18}.yappy-svg[data-mood=surprised] .m-happy{display:none}.yappy-svg[data-mood=surprised] .m-o{display:inline}
.yappy-svg[data-mood=thinking] .m-happy{display:none}.yappy-svg[data-mood=thinking] .m-flat{display:inline}
.yappy-svg[data-mood=wink] .y-eye:last-child{transform:scale(var(--es),.1)}
.yappy-svg[data-mood=excited]{--es:1.1;animation:y-hop .45s ease-in-out 2!important}
.y-love{display:none}.yappy-svg.love .y-eye{display:none}.yappy-svg.love .y-love{display:inline}
.yappy-svg.love .y-heart path{animation:y-hb .9s ease-in-out infinite}.yappy-svg.love .y-heart.d2 path{animation-delay:.15s}
@keyframes y-hb{0%,100%{transform:scale(3.1)}50%{transform:scale(3.5)}}
@media (prefers-reduced-motion:reduce){.yappy-svg.love .y-heart path{animation:none}}

/* ---- perks cart ---- */
.shop{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.shop .cat{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.cart{position:sticky;top:84px}
.cart label{display:block;margin:12px 0 4px;font-size:13.5px;color:var(--muted)}
.cart label.chk{display:flex;gap:8px;align-items:center;color:var(--text);cursor:pointer}
.cart input[type=text],.cart input:not([type]){width:100%;box-sizing:border-box;background:var(--bg2);border:1px solid var(--line2);border-radius:12px;padding:10px 12px;color:var(--text);font:inherit}
.cart input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pick{display:flex;align-items:center;gap:10px;padding:9px 8px;margin:0 -8px;border-radius:10px;border-bottom:1px dashed var(--line);cursor:pointer}
.pick:last-child{border-bottom-color:transparent}
.pick:hover{background:rgba(255,255,255,.04)}
.pick.on{background:rgba(255,216,74,.14)}
.pick span{flex:1}
.pick b{color:var(--yellow)}
.pick input{accent-color:var(--accent);width:17px;height:17px}
.lines{margin:6px 0}
.line{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed var(--line)}
.line span{flex:1}
.line b{color:var(--yellow)}
.line .x{background:none;border:0;color:var(--dim);font-size:18px;line-height:1;cursor:pointer;padding:0 4px}
.line .x:hover{color:var(--red)}
.tot{display:flex;justify-content:space-between;font-size:18px;padding:10px 0 2px}
.tot b{color:var(--text)}
.cart .err{color:var(--red);font-size:13.5px;min-height:18px;margin-top:8px}
.cart .btn[disabled]{opacity:.5;pointer-events:none}
.o-steps{padding-left:20px;margin:10px 0}
.o-steps li{margin-bottom:14px}
.o-steps .code{font-family:ui-monospace,Consolas,monospace;font-size:20px;letter-spacing:.06em;background:var(--bg2);border:1px solid var(--line2);border-radius:12px;padding:10px 14px;margin:6px 0;color:#fff;user-select:all}
.state{border-radius:14px;padding:12px 14px;font-size:14px;margin-top:10px}
.state.wait{background:rgba(185,160,255,.14);border:1px solid rgba(185,160,255,.45);display:flex;gap:10px;align-items:flex-start}
.state.ok{background:rgba(62,207,142,.12);border:1px solid rgba(62,207,142,.4)}
.state.bad{background:rgba(255,93,108,.1);border:1px solid rgba(255,93,108,.4)}
.state .dot{flex:none;width:10px;height:10px;margin-top:5px;border-radius:50%;background:var(--accent);animation:ycpulse 1.4s ease-in-out infinite}
@keyframes ycpulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.state .dot{animation:none}}
@media (max-width:900px){.shop{grid-template-columns:1fr}.cart{position:static}}

.cartbar{display:none}
@media (max-width:900px){.cartbar:not([hidden]){display:flex;justify-content:space-between;align-items:center;position:fixed;left:12px;right:12px;bottom:12px;z-index:30;padding:13px 18px;border-radius:16px;background:var(--yellow);color:var(--ink);font-weight:700;text-decoration:none;box-shadow:0 6px 0 rgba(0,0,0,.35)}}

.pick .pvn{flex:none;font-style:normal;font-weight:700;margin-right:6px;--fx:#ff5da2}.pick .pvn .name{font-style:normal}

/* checkout */
.cart .who{display:flex;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;font-size:14.5px;margin:14px 0 4px;padding:10px 12px;border-radius:10px;background:var(--bg2);border:1px solid var(--line)}
.linkbtn{background:none;border:0;color:var(--sky);font:inherit;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
.cart .paybtn[disabled]{opacity:.5}
.retain{width:100%}
.apibadge{display:inline-flex!important;align-items:center;gap:8px;margin-top:16px;padding:6px 12px!important;border-radius:99px;border:1px solid rgba(47,212,127,.45);color:#bff5d8!important;font-size:13.5px;font-weight:700}
.apibadge:hover{background:rgba(47,212,127,.1)}.apibadge svg{width:16px;height:16px;color:var(--green)}

.composer a{color:#3a4fd6;text-decoration:underline;text-underline-offset:3px}
.benefits h2,.learn h2{margin-bottom:28px}
.hero .fine a{font-weight:700}

/* Cover and Highlight */
.tailor{background:var(--bg2)}
.tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.tcard{background:var(--card);border:2px solid var(--line);border-radius:var(--tail);padding:30px;display:flex;flex-direction:column}
.tcard h3{font-size:26px;margin:2px 0 12px;line-height:1.2}
.tcard>p{color:var(--muted);margin:0 0 20px;font-size:16.5px}
.tcard .ticks{margin-top:20px}
.tdemo{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;font-size:15.5px}
.tdemo .tl{padding:5px 8px;border-radius:8px;border-left:3px solid transparent}
.tdemo .tl b{font-weight:700}
.tdemo .tl.h1{background:rgba(255,216,74,.14);border-left-color:#ffd84a}.tdemo .tl.h2{background:rgba(255,107,214,.14);border-left-color:#ff6bd6}
.tdemo mark{background:none;color:inherit;font-weight:700;text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:3px}
.tdemo .tl.h1{animation:hlpulse 3.4s ease-in-out infinite}.tdemo .tl.h2{animation:hlpulse 3.4s ease-in-out 1.7s infinite}
@keyframes hlpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,216,74,0)}50%{box-shadow:0 0 0 3px rgba(255,216,74,.25)}}
.cv{font:inherit;color:transparent;background:rgba(255,255,255,.28);border:0;border-radius:5px;padding:0 4px;cursor:pointer;text-shadow:0 0 9px rgba(255,255,255,.9);filter:blur(.2px);transition:background .2s,color .2s,text-shadow .2s}
.cv:hover,.cv:focus-visible,.cv[aria-pressed=true]{color:var(--text);background:rgba(255,255,255,.1);text-shadow:none}
.cvn .cv{font-weight:700}
@media (max-width:860px){.tgrid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.tdemo .tl.h1,.tdemo .tl.h2{animation:none}}
/* The wire-mesh Yappy behind the free band */
.free{overflow:hidden}
.free .wrap{position:relative;z-index:1}
.meshy{position:absolute;right:max(-60px,calc(50% - 820px));top:50%;width:820px;height:820px;transform:translateY(-50%);pointer-events:none;z-index:0;opacity:.7;-webkit-mask-image:radial-gradient(closest-side,#000 52%,transparent 100%);mask-image:radial-gradient(closest-side,#000 52%,transparent 100%)}
@media (max-width:860px){.meshy{display:none}}
/* Download on GitHub, under Product in the footer */
footer a.ghbtn{display:inline-flex;align-items:center;gap:9px;margin-top:10px;padding:8px 14px;border:1.5px solid var(--line2);border-radius:10px;color:var(--text);font-weight:700;font-size:14.5px;transition:background .15s,border-color .15s,transform .15s}
footer a.ghbtn:hover{background:rgba(255,255,255,.07);border-color:var(--text);transform:translateY(-1px);text-decoration:none}

/* 0.14.2: the hero shows a few of the app's looks, and the page gets some depth */
.cd-log .m.hl{background:rgba(255,216,74,.12);box-shadow:inset 3px 0 var(--yellow)}
.cd-log .nm[class*=" pl-"]:after{display:none}.cd-log .co{color:#e9e5ff;margin-right:5px}
.cd-log .ttl{margin-right:6px}
.cd-feat{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cd-feat li{font-size:14px;font-weight:600;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--text)}
body{background:radial-gradient(900px 640px at 88% -4%,rgba(185,160,255,.22),transparent 62%),radial-gradient(820px 620px at -6% 34%,rgba(105,204,255,.11),transparent 62%),radial-gradient(900px 700px at 104% 78%,rgba(255,143,196,.11),transparent 62%),var(--bg);background-attachment:fixed}
.hero{position:relative;overflow:hidden;padding-bottom:76px}.hero .wrap{position:relative;z-index:1}
.hero:before{content:"";position:absolute;right:4%;top:0;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(255,216,74,.15),transparent 66%);pointer-events:none}
.hero:after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.11) 1px,transparent 1.6px) 0 0/28px 28px;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 80% 30%,#000,transparent 72%);mask-image:radial-gradient(ellipse 70% 80% at 80% 30%,#000,transparent 72%);pointer-events:none;opacity:.7}
.chatdemo{box-shadow:12px 12px 0 var(--yellow),0 44px 90px -20px rgba(0,0,0,.6)}
.howband,.tailor{background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 38%),var(--bg2);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -40px 80px -50px rgba(0,0,0,.5)}
@media (max-width:640px){.hero:before{width:420px;height:420px}.chatdemo{box-shadow:7px 7px 0 var(--yellow),0 30px 60px -20px rgba(0,0,0,.6)}}
.free{min-height:800px;display:flex;align-items:center}.free .wrap{width:100%}
@media (max-width:860px){.free{min-height:0}}
/* the app, faint behind the hero: 30% at the top fading to 5% at the bottom */
.herobg{position:absolute;inset:0;background:url(/img/hero.webp) center top/cover no-repeat;opacity:.05;-webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.17) 100%);mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.17) 100%);pointer-events:none}

/* hero chat: a frosted glass window */
.chatdemo{background:linear-gradient(160deg,rgba(40,30,92,.62),rgba(15,10,40,.72));-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);border:1px solid rgba(255,255,255,.2);border-radius:20px;box-shadow:0 30px 70px -18px rgba(8,4,30,.75),0 0 0 .5px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.28);overflow:visible}
.cd-tabs{background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.1);border-radius:19px 19px 0 0;padding-left:74px;position:relative}
.cd-tabs:before{content:"";position:absolute;left:18px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#ff5f57;box-shadow:20px 0 0 #febc2e,40px 0 0 #28c840}
.cd-tab:before{left:0;right:0;border-radius:0}
.cd-pin{background:rgba(255,216,74,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.cd-log .m:hover,.cd-log .m:focus-within,.cd-log .m.sel{background:rgba(255,255,255,.08);border-radius:8px}
.cd-log .m{margin:0 6px;padding-left:10px;padding-right:10px}
.cd-compose{border-top:1px solid rgba(255,255,255,.1)}
.cd-in{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cd-send{border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
@media (max-width:520px){.cd-tabs{padding-left:64px}}

/* screenshots: app-store style, a soft brand backdrop with the capture floating on it */
figure.shot{background:radial-gradient(120% 100% at 15% 0%,#5b3fd0 0%,#2a1b73 45%,#150e36 100%);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:clamp(14px,3.2vw,34px) clamp(14px,3.2vw,34px) 0;box-shadow:0 24px 60px -24px rgba(10,5,40,.7)}
figure.shot img{border-radius:12px;box-shadow:0 18px 40px -10px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.14);display:block;margin:0 auto}
figure.shot figcaption{background:none;color:rgba(255,255,255,.78);padding:14px 4px 16px;text-align:center}
figure.shot.sm img{max-width:100%}

/* pinned banner: the details drop down under the line */
.pinbar button.pinmore{width:auto;height:auto;padding:4px 11px;border-radius:99px;border:1px solid var(--line2);font-size:13.5px;font-weight:700;color:var(--text)}
.pinbar button.pinmore:hover{border-color:var(--yellow);background:rgba(255,216,74,.08)}
.pindet{max-width:1180px;margin:0 auto;padding:4px 24px 16px 52px}
.pindet[hidden]{display:none}
.pindet ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px 28px}
.pindet li{font-size:14px;line-height:1.45;color:var(--muted);padding-left:14px;position:relative}
.pindet li:before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--yellow)}
.pindet li b{color:var(--text);margin-right:6px}
@media (max-width:720px){.pindet{padding:4px 16px 14px}.pinbar .tx{font-size:13.5px}}
@media (max-width:720px){.pinbar .in{flex-wrap:wrap;row-gap:6px}.pinbar .tx{flex:1 1 calc(100% - 30px)}.pinbar button.pinmore{margin-left:28px}#pinx{margin-left:auto}}

/* changelog page */
.clnav{display:flex;gap:10px;margin:0 0 10px}.clnav a{padding:6px 14px;border-radius:99px;border:1px solid var(--line2);font-weight:700;font-size:14px}
.clist{list-style:none;padding:0;margin:0 0 30px;display:flex;flex-direction:column;gap:12px}
.clist li{position:relative;padding:14px 18px 14px 40px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);line-height:1.55}
.clist li:before{content:"";position:absolute;left:18px;top:23px;width:8px;height:8px;border-radius:50%;background:var(--yellow)}
#fixed+.clist li:before{background:var(--green)}#changed+.clist li:before{background:var(--sky)}
/* homepage: screenshots inside the three feature blocks */
.fblock>figure.shot{margin:0}
.fblock>figure.shot.sm{justify-self:center;max-width:400px}

/* download page */
.dlcard{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;padding:26px 28px;margin:26px 0 40px;border-radius:20px;border:1px solid var(--line2);background:rgba(255,255,255,.04)}
.dlcard .btn.off{opacity:.6;pointer-events:none}
.dlstarted{margin:18px 0 0;padding:14px 18px;border-radius:14px;border:1px solid rgba(62,224,176,.45);background:rgba(62,224,176,.12);color:var(--text,#fff);line-height:1.5}
.dlstarted a{color:inherit;font-weight:700}
.dlfacts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 22px}
.dlfacts li{display:flex;flex-direction:column}.dlfacts b{font-size:16px}.dlfacts span{color:var(--muted);font-size:14px}
@media (max-width:720px){.dlcard{grid-template-columns:1fr}}

/* headings kept in order (h2) but sized like the old h3s */
h2.h3{font-size:1.17em;margin:0 0 .5em}

/* ===== Motion (motion.js): reading progress, screenshots that tip into place, pointer spotlight on cards. Text never animates in. Off with reduced motion. ===== */
.readbar{position:fixed;left:0;top:0;right:0;height:3px;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--yellow),var(--pink),var(--sky));pointer-events:none}
.js .mv{opacity:0;transform:translateY(22px);transition:opacity .5s var(--ease),transform .65s var(--ease),clip-path .75s var(--ease);transition-delay:var(--d,0s)}
.js .mv.in{opacity:1;transform:none}
.js .mv-tilt{transform:perspective(1400px) rotateX(10deg) translateY(36px) scale(.96);transform-origin:50% 100%}
.js .mv-tilt.in{transform:none}
.spot{position:relative;isolation:isolate}
.spot:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,216,74,.13),transparent 70%)}
.spot:hover:after{opacity:1}
.btn.primary.big,.btn.heart.big{transition:transform .25s var(--ease),background .15s,border-color .15s,box-shadow .15s}
/* ===== Hero demo chat, drawn like the YappyChat app itself (dark app colours, tabs, channel bar, mod buttons beside each line) ===== */
.chatdemo.app{--ya-bg:#18181b;--ya-panel:#1f1f23;--ya-panel2:#26262c;--ya-line:#2f2f35;--ya-text:#efeff1;--ya-muted:#adadb8;--ya-acc:#9147ff;
  background:var(--ya-bg);-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid #2f2f35;border-radius:14px;overflow:hidden;color:var(--ya-text);font-size:14px;box-shadow:12px 12px 0 var(--yellow),0 44px 90px -20px rgba(0,0,0,.6)}
.chatdemo.app .ya-top{display:flex;align-items:center;gap:4px;height:44px;padding:0 10px;background:var(--ya-panel);border-bottom:1px solid var(--ya-line);overflow:hidden;white-space:nowrap}
.chatdemo.app .ya-brand{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14px;margin-right:8px}
.chatdemo.app .ya-brand img{width:22px;height:22px}
.chatdemo.app .ya-tab{position:relative;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:7px;color:var(--cc);font-weight:600;font-size:13px}
.chatdemo.app .ya-tab:before{content:"";position:absolute;left:8px;right:8px;top:-7px;height:2px;border-radius:2px;background:var(--cc);opacity:.7}
.chatdemo.app .ya-tab.on{background:color-mix(in srgb,var(--cc) 14%,transparent);box-shadow:inset 0 -2px var(--cc)}
.chatdemo.app .ya-tab b{color:var(--ya-muted);font-weight:400;font-size:13px}
.chatdemo.app .ya-live{width:5.6px;height:5.6px;border-radius:50%;background:#ff4757}
.chatdemo.app .ya-plus{color:var(--ya-muted);font-size:18px;padding:0 6px}
.chatdemo.app .ya-chan{display:flex;align-items:center;gap:8px;padding:9px 12px 4px;background:var(--ya-panel);font-size:14px;white-space:nowrap;overflow:hidden}
.chatdemo.app .ya-av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ff8a65,#c2185b);color:#fff;font-size:11px;font-weight:700;box-shadow:0 0 0 2px #14b8a6}
.chatdemo.app .ya-cn{color:#14b8a6}
.chatdemo.app .ya-pill{background:#e0245e;color:#fff;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:4px}
.chatdemo.app .ya-title{color:var(--ya-text);overflow:hidden;text-overflow:ellipsis}.chatdemo.app .ya-title em{font-style:normal;color:var(--ya-acc)}
.chatdemo.app .ya-stats{display:flex;gap:14px;padding:3px 12px 9px;background:var(--ya-panel);border-bottom:1px solid var(--ya-line);color:var(--ya-muted);font-size:12px;white-space:nowrap;overflow:hidden}
.chatdemo.app .ya-stats b{color:var(--ya-text);margin-left:3px}
.chatdemo.app .cd-pin{background:rgba(145,71,255,.12);border-bottom:1px solid var(--ya-line);color:var(--ya-text);font-size:13px}
.chatdemo.app .cd-pin i{color:var(--ya-acc)}.chatdemo.app .cd-pin button{color:var(--ya-muted)}
.chatdemo.app .cd-log{height:340px;padding:6px 0}
.chatdemo.app .cd-log .m{margin:0;padding:3px 10px 3px 8px;color:var(--ya-text);border-radius:0;font-size:14px;line-height:1.45}
.chatdemo.app .cd-log .m:hover,.chatdemo.app .cd-log .m:focus-within,.chatdemo.app .cd-log .m.sel{background:rgba(255,255,255,.045);border-radius:0}
.chatdemo.app .cd-log .mb{position:static;display:inline-flex;gap:0;padding:0;margin-right:4px;background:none;border:0;box-shadow:none;vertical-align:-3px}
.chatdemo.app .cd-log .mb button{width:21px;height:22px;border-radius:5px;color:var(--ya-muted);opacity:.7}
.chatdemo.app .cd-log .mb button svg{width:15px;height:15px}
.chatdemo.app .cd-log .mb button:hover{opacity:1;background:rgba(255,255,255,.08);color:var(--ya-text)}
.chatdemo.app .cd-log .mb button.d:hover{background:none;color:#f5a524}
.chatdemo.app .cd-log .mb button[data-a=ban]:hover{color:#ff5d6c}
.chatdemo.app .cd-log .ts{color:var(--ya-muted);font-size:12px;margin-right:6px}
.chatdemo.app .cd-log .nm:after{color:var(--ya-text)}
.chatdemo.app .cd-log .m.hl{background:rgba(145,71,255,.14);box-shadow:inset 3px 0 var(--ya-acc)}
.chatdemo.app .cd-log .m.gone .tx{color:var(--ya-muted)}
.chatdemo.app .cd-log .m.gone .mb{visibility:hidden}
.chatdemo.app .cd-log .m.sys{color:var(--ya-muted);font-size:13px;margin:2px 0;padding-left:12px}
.chatdemo.app .cd-compose{gap:8px;padding:10px 12px;background:var(--ya-panel);border-top:2px solid #14b8a6;background:linear-gradient(90deg,color-mix(in srgb,#14b8a6 22%,var(--ya-panel)),var(--ya-panel) 85%)}
.chatdemo.app .cd-in{height:38px;border-radius:8px;background:var(--ya-panel2);border:1px solid #14b8a6;color:var(--ya-muted);font-size:13.5px;-webkit-backdrop-filter:none;backdrop-filter:none}
.chatdemo.app .cd-in b{color:#14b8a6;margin-left:4px}
.chatdemo.app .ya-ic{margin-left:auto;display:inline-flex;gap:10px;color:var(--ya-muted)}.chatdemo.app .ya-ic svg{width:16px;height:16px}
.chatdemo.app .cd-send{height:38px;border-radius:8px;background:var(--ya-acc);color:#fff;box-shadow:none;padding:0 14px}
.chatdemo.app .cd-compose .cy{width:38px;height:38px}
.chatdemo.app .cd-log .m:not(.sys){padding-left:78px}
.chatdemo.app .cd-log .m:not(.sys) .mb{position:absolute;left:8px;top:3px}
.hero .wrap>div{min-width:0}
.chatdemo.app{min-width:0;max-width:100%}
@media (max-width:560px){.chatdemo.app .ya-brand,.chatdemo.app .ya-ic{display:none}.chatdemo.app .ya-stats span:nth-child(n+4){display:none}.chatdemo.app .cd-log .m:not(.sys){padding-left:72px}}
/* Icons inside buttons sit on the text's centre line */
.btn [data-ico]{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex:none}
.btn [data-ico] svg{display:block}

/* ===== Features page (and the six-card preview on the homepage) ===== */
.featpage{padding:56px 24px 90px}
.fhead{max-width:760px;margin:0 0 34px}
.fhead h1{font-family:var(--display);font-size:clamp(40px,5.2vw,64px);line-height:1.02;letter-spacing:-.025em;margin:0 0 14px}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:30px}
.fcard{display:flex;flex-direction:column;background:var(--card);border:2px solid var(--line);border-radius:var(--tail);overflow:hidden}
.fcard img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#0d0f13;border-bottom:2px solid var(--line)}
.fcard .fc-b{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px;flex:1}
.fcard h3{font-family:var(--display);font-size:21px;line-height:1.15;margin:0;color:var(--text)}
.fcard p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.5;flex:1}
.fcard a{margin-top:6px;font-weight:700;font-size:14.5px;color:var(--sky);align-self:flex-start}
.fcta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}
#features .fcta{margin-bottom:64px}
@media (max-width:980px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.fgrid{grid-template-columns:1fr}.featpage{padding:36px 16px 70px}}
.clnav{flex-wrap:wrap}
.cl-date{font-size:14px;font-weight:500;color:var(--muted);margin-left:8px;letter-spacing:0}
.note .clist{margin:8px 0 4px}

/* ---------- Pick your seat: the three kinds of people in chat, with Yappy showing each one around ---------- */
.seats{background:var(--bg2);border-block:1px solid var(--line)}
.seatgrid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;align-items:start}
.seatpick{display:flex;flex-direction:column;gap:12px}
.seatpick button{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;text-align:left;font:inherit;color:var(--text);background:transparent;border:2px solid var(--line);border-radius:16px;padding:14px 16px;cursor:pointer;transition:border-color .15s,background .15s}
.seatpick button:hover{border-color:var(--line2);background:rgba(255,255,255,.04)}
.seatpick button[aria-selected=true]{border-color:var(--yellow);background:var(--surface)}
.seatpick .sbadge{grid-row:1/3;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:var(--c);color:#fff}
.seatpick b{font-family:var(--display);font-size:21px;line-height:1.15}
.seatpick button>span:last-child{color:var(--muted);font-size:15px;line-height:1.35}
.seatpanes{position:relative;min-height:400px;padding:8px 0 0 112px}
.seatpane{display:block}
.js-seats .seatpane{display:none}.js-seats .seatpane.on{display:block}
.seatpane+.seatpane{margin-top:40px}.js-seats .seatpane+.seatpane{margin-top:0}
.ylines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-width:36em}
.ylines li{background:var(--bubble);color:var(--ink);border-radius:var(--tail);padding:13px 18px;font-size:17px;line-height:1.45;width:fit-content;box-shadow:0 10px 24px -14px rgba(0,0,0,.5)}
.ylines li b{color:var(--ink)}
.ylines code,.ylines kbd{background:rgba(27,19,70,.08);border-color:rgba(27,19,70,.18);color:var(--ink)}
.ylines li:last-child{border-bottom-left-radius:6px}
.js-seats .seatpane.on .ylines li{animation:yline .38s var(--ease) both}
.js-seats .seatpane.on .ylines li:nth-child(2){animation-delay:.12s}
.js-seats .seatpane.on .ylines li:nth-child(3){animation-delay:.24s}
.js-seats .seatpane.on .ylines li:nth-child(4){animation-delay:.36s}
@keyframes yline{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.seatcta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.seatcta .btn.copied{border-color:var(--green);color:var(--green)}
.yseat{position:absolute;left:0;bottom:62px;width:92px;text-align:center}
.yseat b{display:block;color:var(--yellow);font-size:14px;margin-top:4px}
.yseat [data-yappy]{width:92px;height:92px}
@media (max-width:900px){
  .seatgrid{grid-template-columns:1fr;gap:22px}
  .seatpick{flex-direction:row;overflow-x:auto;gap:8px;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none}
  .seatpick button{flex:1 0 auto;grid-template-columns:auto;grid-template-rows:auto;justify-items:center;text-align:center;padding:12px 14px;row-gap:6px}
  .seatpick .sbadge{grid-row:auto;width:38px;height:38px}
  .seatpick b{font-size:17px}.seatpick button>span:last-child{display:none}
  .seatpanes{padding:76px 0 0;min-height:0}
  .yseat{top:0;bottom:auto;display:flex;align-items:center;gap:8px;width:auto}
  .yseat [data-yappy]{width:60px;height:60px}.yseat b{margin:0}
  .ylines li{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.js-seats .seatpane.on .ylines li{animation:none}}

/* ---------- Questions, and an honest side-by-side ---------- */
.faqgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:start}
.qs details{border-bottom:1px solid var(--line)}
.qs details:first-child{border-top:1px solid var(--line)}
.qs summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:18px 2px;font-family:var(--display);font-size:21px;line-height:1.25;font-weight:700}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"";flex:none;width:12px;height:12px;margin-top:6px;border-right:2.5px solid var(--yellow);border-bottom:2.5px solid var(--yellow);transform:rotate(45deg);transition:transform .2s var(--ease)}
.qs details[open] summary::after{transform:rotate(-135deg);margin-top:11px}
.qs details p{margin:0 0 20px;color:var(--muted);max-width:38em}
.vs{margin:0;position:sticky;top:100px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 10px}
.vs figcaption{font-family:var(--display);font-weight:700;font-size:22px;margin-bottom:12px}
.vs table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.4}
.vs th,.vs td{text-align:left;vertical-align:top;padding:11px 10px 11px 0;border-top:1px solid var(--line)}
.vs thead th{border-top:0;font-size:13px;color:var(--dim);font-weight:700;padding-top:0}
.vs thead th:last-child{color:var(--yellow)}
.vs tbody th{color:var(--muted);font-weight:600;width:30%}
.vs td:last-child{color:var(--text);font-weight:600}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:900px){.faqgrid{grid-template-columns:1fr;gap:36px}.vs{position:static}.qs summary{font-size:18px}}
/* Get involved: the streamer kit */
.kit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:30px}
.kitem{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.kitem img{width:100%;max-width:320px;height:auto;border-radius:10px}
.kitem h3{font-size:21px;margin-top:4px}.kitem p{margin:0;color:var(--muted);font-size:15.5px;flex:1}
.kitem .btn{align-self:flex-start}.kitem .btn.copied{border-color:var(--green);color:var(--green)}
.kcode{margin:0;min-height:160px;white-space:pre-wrap;word-break:break-word;font:14px/1.5 ui-monospace,"Cascadia Code",Consolas,monospace;background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:10px;padding:14px;color:var(--text)}
@media (max-width:900px){.kit{grid-template-columns:1fr}.kcode{min-height:0}}
.onphone{background:var(--surface);border:2px solid var(--yellow);border-radius:var(--r);padding:18px 20px;margin:0 0 22px;line-height:1.5}
.onphone .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.onphone .btn.copied{border-color:var(--green);color:var(--green)}
/* "Free" and "safe" side by side */
.freegrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:56px;align-items:start}
.freegrid .safe{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px}
.freegrid .safe h3{font-size:24px;margin:0 0 8px}.freegrid .safe>p{color:var(--muted);margin:0 0 16px;font-size:16px}
@media (max-width:900px){.freegrid{grid-template-columns:1fr;gap:32px}}