/* YappyChat website. Self-hosted Bricolage Grotesque + 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:"Bricolage Grotesque";font-weight:400 700;font-display:swap;src:url(/fonts/bricolage-700.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:"Bricolage Grotesque","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{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{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}