/* ─────────────────────────────────────────────────────────────
   CryptoTok — CryptoTok design system: near-black, warm white type,
   the logo's cyan/pink split on buttons, avatars and the active frame.
   Yellow #FFE16B only for the punch-word captions inside episodes.
   Fonts are self-hosted (OFL): Chakra Petch, Figtree, JetBrains Mono.
   ───────────────────────────────────────────────────────────── */
@font-face{font-family:'Chakra Petch';src:url(vendor/chakrapetch-medium.woff) format('woff');font-weight:500;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url(vendor/chakrapetch-semibold.woff) format('woff');font-weight:600;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url(vendor/chakrapetch-bold.woff) format('woff');font-weight:700;font-display:swap}
@font-face{font-family:'Figtree';src:url(vendor/figtree.woff) format('woff');font-weight:300 900;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(vendor/jetbrainsmono.woff) format('woff');font-weight:100 800;font-display:swap}

/* Layout: nav rail · 9:16 stage + action rail · context panel. Phones collapse to a full-bleed swipe feed with a bottom tab bar. */
:root{
  --bg:#050505; --surface:#0c0c0e; --surface-2:#131316; --surface-3:#1b1b20;
  --line:rgba(243,239,232,.075); --line-2:rgba(243,239,232,.14);
  --fg:#f3efe8; --fg-2:#cfcac1; --muted:#8e8a83; --faint:#5d5a55;
  --cyan:#1fe6f2; --pink:#ff2d5f; --ok:#3ddc97; --warn:#f5b84a;
  --display:'Chakra Petch','Segoe UI',system-ui,sans-serif;
  --body:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --c:7px; --cut:16px; --tab-h:58px; --side:236px; --panel:340px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.45 var(--body);overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;box-shadow:3px 3px 0 0 var(--pink)}
svg{flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.chamfer{clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}

/* ---------- Logo ---------- */
.logo svg{display:block;overflow:visible}
.logo .lc,.logo .lp,.logo .lw{transition:transform .25s ease}
.logo:hover .lc{transform:translate(-1.5px,-1px)}
.logo:hover .lp{transform:translate(1.5px,1px)}
.wordmark{font:700 22px/1 var(--display);letter-spacing:.01em;text-shadow:-1px 0 rgba(31,230,242,.45),1px 0 rgba(255,45,95,.45)}

/* ---------- Buttons (the logo's split: cyan low-left, pink high-right) ---------- */
.btn{position:relative;isolation:isolate;display:inline-flex;height:40px;font-weight:700;font-size:14px;white-space:nowrap}
.btn>span{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:0 18px;clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.btn::before,.btn::after{content:"";position:absolute;inset:0;z-index:-1;clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));transition:transform .18s ease}
.btn>span{background:var(--fg);color:#050505}
.btn::before{background:var(--pink);transform:translate(2px,-2px)}
.btn::after{background:var(--cyan);transform:translate(-2px,2px)}
.btn:not(.ghost):hover::before{transform:translate(3px,-3px)}
.btn:not(.ghost):hover::after{transform:translate(-3px,3px)}
.btn:not(.ghost):active>span{transform:translate(1px,0)}
.btn.ghost>span{background:var(--surface-2);margin:1px;padding:0 17px;color:var(--fg)}
.btn.ghost::before{background:var(--line-2);transform:none}
.btn.ghost::after{display:none}
.btn.ghost:hover::before{background:linear-gradient(100deg,var(--cyan),var(--pink))}
.btn.sm{height:32px;font-size:13px}.btn.sm>span{padding:0 12px}
.btn.xs{height:26px;font-size:12px;--c:5px}.btn.xs>span{padding:0 10px}
.btn.block{display:flex;width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.danger>span{background:var(--pink);color:#fff}
.iconbtn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--fg-2);transition:background .15s,color .15s}
.iconbtn:hover{background:var(--surface-3);color:var(--fg)}

/* ---------- Pills & chips ---------- */
.demo-pill{display:inline-flex;align-items:center;gap:6px;font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--warn);border:1px solid rgba(245,184,74,.35);background:rgba(245,184,74,.08);padding:5px 8px;border-radius:4px}
.demo-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--warn)}
.tag-demo{font:600 9.5px/1 var(--mono);letter-spacing:.06em;color:var(--warn);border:1px solid rgba(245,184,74,.4);padding:3px 5px;border-radius:3px;vertical-align:2px}
.asset-chip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px 0 4px;border-radius:14px;background:rgba(5,5,5,.55);border:1px solid var(--line-2);font:600 12.5px/1 var(--body);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.asset-chip .sym{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:700 9px/1 var(--mono);background:var(--fg);color:#050505}
.asset-chip .v{color:var(--cyan);display:inline-flex}
.asset-chip.unverified{border-style:dashed;border-color:rgba(245,184,74,.5)}
.asset-chip.unverified .sym{background:var(--surface-3);color:var(--warn)}
.asset-chip .note{font-weight:500;color:var(--muted);font-size:11.5px}
.chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:17px;background:var(--surface-2);border:1px solid var(--line);color:var(--fg-2);font-weight:600;font-size:13.5px;white-space:nowrap;transition:border-color .15s,color .15s}
.chip:hover{color:var(--fg);border-color:var(--line-2)}
.chip.on{color:var(--fg);border-color:transparent;background:var(--surface-3);box-shadow:-2px 2px 0 -0.5px var(--cyan),2px -2px 0 -0.5px var(--pink)}
.verified{display:inline-flex;color:var(--cyan);vertical-align:-2px}
.hashtag{color:var(--fg);font-weight:700}
.hashtag:hover{text-decoration:underline;text-decoration-color:var(--cyan);text-underline-offset:3px}

/* ---------- Avatars ---------- */
.av{--s:40px;width:var(--s);height:var(--s);border-radius:50%;display:grid;place-items:center;font:700 calc(var(--s)*.36)/1 var(--display);color:#050505;flex:none;position:relative}
.av.ring{box-shadow:0 0 0 2px var(--bg),-2px 1px 0 2px var(--cyan),2px -1px 0 2px var(--pink)}

/* ---------- Shell ---------- */
.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr) var(--panel);height:100%}
.sidebar{display:flex;flex-direction:column;gap:6px;padding:20px 14px 16px;border-right:1px solid var(--line);min-height:0;overflow-y:auto;scrollbar-width:none}
.brand{display:flex;align-items:center;gap:10px;padding:4px 10px 18px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{position:relative;display:flex;align-items:center;gap:14px;height:44px;padding:0 12px;border-radius:8px;color:var(--fg-2);font-weight:600;font-size:15.5px;transition:background .15s,color .15s}
.nav a:hover{background:var(--surface-2);color:var(--fg)}
.nav a.on{color:var(--fg);background:var(--surface-2)}
.nav a.on::before{content:"";position:absolute;left:-14px;top:12px;bottom:12px;width:3px;background:var(--cyan);box-shadow:3px 0 0 var(--pink)}
.nav a.on svg{filter:drop-shadow(-1.2px .6px 0 rgba(31,230,242,.9)) drop-shadow(1.2px -.6px 0 rgba(255,45,95,.9))}
.nav .badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--pink);color:#fff;font:700 11px/20px var(--mono);text-align:center}
.side-cta{margin:14px 4px 6px}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding-top:14px}
.me{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;border:1px solid var(--line);text-align:left;width:100%}
.me:hover{border-color:var(--line-2)}
.me .n{font-weight:700;font-size:14px;line-height:1.2}.me .u{color:var(--muted);font-size:12.5px}
.keys{color:var(--faint);font-size:11.5px;line-height:1.6;padding:0 8px}
.keys kbd{font:600 10.5px var(--mono);color:var(--muted);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;padding:0 4px}
main{position:relative;min-width:0;min-height:0;overflow:hidden}
.panel{border-left:1px solid var(--line);min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent;position:relative}
.panel-inner{display:flex;flex-direction:column;gap:26px;padding:20px 20px 40px}
.tabbar{display:none}

/* ---------- Search ---------- */
.search{position:relative}
.search .field{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:22px;background:var(--surface-2);border:1px solid var(--line);transition:border-color .15s}
.search .field:focus-within{border-color:var(--line-2);box-shadow:-2px 2px 0 -1px var(--cyan),2px -2px 0 -1px var(--pink)}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:14.5px}
.search input::placeholder{color:var(--muted)}
.search .drop{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:10px;box-shadow:0 24px 60px rgba(0,0,0,.6);max-height:min(70vh,560px);overflow-y:auto}
.drop h6{margin:8px 8px 6px;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.drop h6 button{font:600 11px var(--body);letter-spacing:0;text-transform:none;color:var(--cyan)}
.drop .row{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border-radius:8px;text-align:left;font-size:14px}
.drop .row:hover,.drop .row.kb{background:var(--surface-2)}
.drop .row .sub{color:var(--muted);font-size:12.5px}
.drop .row .ic{width:32px;height:32px;border-radius:50%;background:var(--surface-3);display:grid;place-items:center;flex:none;color:var(--fg-2)}
.drop .thumbmini{width:32px;height:44px;border-radius:4px;object-fit:cover;flex:none;background:var(--surface-3)}
.drop .empty{padding:14px 8px;color:var(--muted);font-size:13.5px}

/* ---------- Panel sections ---------- */
.intro{padding:18px;border:1px solid var(--line);border-radius:14px;background:radial-gradient(120% 80% at 0% 0%,rgba(31,230,242,.07),transparent 60%),radial-gradient(120% 80% at 100% 100%,rgba(255,45,95,.07),transparent 60%),var(--surface)}
.intro h2{margin:0;font:700 22px/1.08 var(--display);letter-spacing:.01em;text-wrap:balance}
.intro h2 span{display:block;color:var(--muted)}
.intro p{margin:10px 0 16px;color:var(--fg-2);font-size:14px}
.intro .row{display:flex;gap:10px;flex-wrap:wrap}
.sec h3{margin:0 0 12px;display:flex;align-items:center;justify-content:space-between;font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sec h3 a,.sec h3 button{font:600 12.5px var(--body);letter-spacing:0;text-transform:none;color:var(--fg-2)}
.sec h3 a:hover,.sec h3 button:hover{color:var(--cyan)}
.list{display:flex;flex-direction:column}
.trow{display:flex;align-items:center;gap:12px;padding:9px 6px;margin:0 -6px;border-radius:8px;text-align:left;width:calc(100% + 12px)}
.trow:hover{background:var(--surface-2)}
.trow .rk{width:18px;font:600 12px var(--mono);color:var(--faint)}
.trow .t{flex:1;min-width:0}
.trow .t b{display:block;font-size:14.5px;line-height:1.25}
.trow .t small{color:var(--muted);font-size:12.5px}
.trow .spark{width:56px;height:22px}
.coin{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 11px/1 var(--mono);flex:none}
.hl{font:600 11.5px var(--mono);color:var(--ok)}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--faint);font-size:12px}
.foot-links a:hover{color:var(--fg-2)}
.fineprint{color:var(--faint);font-size:12px;line-height:1.5}

/* ---------- Feed ---------- */
.feed{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain;outline:0}
.feed::-webkit-scrollbar{display:none}
.slide{height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;padding:18px 24px;position:relative}
.stage{position:relative;isolation:isolate;height:100%;max-height:900px;aspect-ratio:9/16;max-width:calc(100% - 84px)}
.stage::before,.stage::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s ease,transform .4s ease;clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}
.stage::before{background:var(--pink)}
.stage::after{background:var(--cyan)}
.slide.active .stage::before{opacity:.85;transform:translate(3px,-3px)}
.slide.active .stage::after{opacity:.85;transform:translate(-3px,3px)}
.screen{position:absolute;inset:0;overflow:hidden;background:#0a0a0c;clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}
.slide.active .screen{box-shadow:0 0 80px rgba(31,230,242,.06)}
.screen canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.screen .tap{position:absolute;inset:0;z-index:1;cursor:pointer}
.glow{position:absolute;inset:10% 0;z-index:-2;pointer-events:none;background:radial-gradient(40% 50% at 45% 50%,rgba(31,230,242,.08),transparent 70%),radial-gradient(40% 50% at 58% 55%,rgba(255,45,95,.07),transparent 70%);opacity:0;transition:opacity .6s}
.slide.active .glow{opacity:1}
.meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:70px 18px 20px;background:linear-gradient(transparent,rgba(0,0,0,.35) 30%,rgba(0,0,0,.82));pointer-events:none}
.meta>*{pointer-events:auto}
.who{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15.5px}
.who a{font-weight:800}
.who .time{color:rgba(243,239,232,.6);font-size:13px}
.cap{margin:6px 0 0;font-size:14.5px;line-height:1.42;color:#f6f3ee;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.cap.open{display:block;-webkit-line-clamp:unset;max-height:40vh;overflow-y:auto}
.more{font-weight:700;font-size:13.5px;color:var(--fg);margin-top:2px}
.meta .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
.audio{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:rgba(243,239,232,.85);overflow:hidden;white-space:nowrap}
.audio .mq{overflow:hidden;flex:1;min-width:0;mask-image:linear-gradient(90deg,#000 80%,transparent)}
.audio .mq span{display:inline-block;padding-right:40px}
.slide.active.playing .audio .mq span{animation:mq 9s linear infinite}
@keyframes mq{to{transform:translateX(-100%)}}
.catlabel{position:absolute;left:14px;top:14px;z-index:2;display:flex;gap:6px;align-items:center;font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:6px 8px;border-radius:4px;background:rgba(5,5,5,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--fg-2)}
.catlabel.news{color:var(--warn)}
.sound{position:absolute;right:12px;top:10px;z-index:3;display:flex;align-items:center;gap:4px;padding:4px;border-radius:20px;transition:background .2s}
.sound .iconbtn{color:#fff;background:rgba(5,5,5,.45);width:36px;height:36px}
.sound input{width:0;opacity:0;transition:width .2s,opacity .2s;accent-color:var(--cyan)}
.sound:hover,.sound:focus-within{background:rgba(5,5,5,.55)}
.sound:hover input,.sound:focus-within input{width:84px;opacity:1;margin-right:8px}
.center-ic{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);pointer-events:none;display:grid;place-items:center;width:78px;height:78px;border-radius:50%;background:rgba(5,5,5,.45);opacity:0;transition:opacity .2s,transform .2s}
.slide.paused .center-ic{opacity:1}
.loading-ov{position:absolute;inset:0;z-index:3;display:none;place-items:center;background:rgba(5,5,5,.35)}
.slide.loading .loading-ov{display:grid}
.err-ov{position:absolute;inset:0;z-index:4;display:none;place-items:center;text-align:center;padding:24px;background:rgba(5,5,5,.86)}
.slide.errored .err-ov{display:grid}
.err-ov h4{margin:12px 0 6px;font:700 18px var(--display)}
.err-ov p{margin:0 0 16px;color:var(--fg-2);font-size:14px}
.prog{position:absolute;left:0;right:0;bottom:0;z-index:4;height:16px;display:flex;align-items:flex-end;cursor:pointer;touch-action:none}
.prog .tr{position:relative;width:100%;height:3px;background:rgba(255,255,255,.18);transition:height .15s}
.prog:hover .tr,.prog.drag .tr{height:6px}
.prog .fi{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--cyan);box-shadow:2px 0 0 var(--pink)}
.prog .kn{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:var(--fg);transform:translate(-50%,-50%) scale(0);transition:transform .15s;box-shadow:-2px 1px 0 var(--cyan),2px -1px 0 var(--pink)}
.prog:hover .kn,.prog.drag .kn{transform:translate(-50%,-50%) scale(1)}
.prog .tt{position:absolute;right:10px;bottom:10px;font:600 11px var(--mono);color:rgba(255,255,255,.8);opacity:0;transition:opacity .15s}
.prog:hover .tt,.prog.drag .tt{opacity:1}

.rail{display:flex;flex-direction:column;align-items:center;gap:14px;align-self:flex-end;margin-left:18px;padding-bottom:10px;width:56px;flex:none}
.rail .avw{position:relative;margin-bottom:8px}
.rail .avw .plus{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--fg);color:#050505;box-shadow:-1.5px 1px 0 var(--cyan),1.5px -1px 0 var(--pink);transition:transform .2s}
.rail .avw .plus:hover{transform:translateX(-50%) scale(1.1)}
.rail .avw .plus.done{background:var(--surface-3);color:var(--ok)}
.act{display:flex;flex-direction:column;align-items:center;gap:5px;font:600 12px/1 var(--mono);color:var(--fg-2)}
.act .b{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);color:var(--fg);transition:background .15s,border-color .15s,transform .12s}
.act:hover .b{background:var(--surface-3);border-color:var(--line-2)}
.act:active .b{transform:scale(.92)}
.act.on.like .b{color:var(--pink)}
.act.on.like svg{fill:var(--pink);filter:drop-shadow(-1.5px 1px 0 var(--cyan))}
.act.on.save .b{color:var(--cyan)}
.act.on.save svg{fill:var(--cyan);filter:drop-shadow(1.5px -1px 0 var(--pink))}
.act.pop .b{animation:pop .35s ease}
@keyframes pop{40%{transform:scale(1.18)}}
.feed-top{position:absolute;left:0;top:0;z-index:20;display:flex;flex-direction:column;align-items:flex-start;gap:14px;pointer-events:none;padding:22px 20px}
.feed-top>*{pointer-events:auto}
.feed-top .seg{display:none}
.seg{display:flex;flex-direction:column;gap:2px;padding:4px;border-radius:14px;background:rgba(12,12,14,.8);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.seg a{padding:8px 14px;border-radius:10px;font-weight:700;font-size:13.5px;color:var(--muted)}
.seg a.on{background:var(--surface-3);color:var(--fg)}
.seg a:hover{color:var(--fg)}

.feed-top .mob-search{display:none}
.nudge{position:absolute;right:22px;bottom:22px;z-index:20;display:flex;flex-direction:column;gap:8px}
.nudge .iconbtn{background:var(--surface-2);border:1px solid var(--line)}
.news-note{position:absolute;left:50%;top:64px;transform:translateX(-50%);z-index:19;max-width:min(520px,calc(100% - 32px));display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:rgba(20,17,10,.9);border:1px solid rgba(245,184,74,.3);color:#f1dfb8;font-size:13px;backdrop-filter:blur(8px)}
.news-note svg{color:var(--warn);margin-top:1px}
.news-note button{margin-left:auto;color:var(--muted)}

/* ---------- Page scaffolding ---------- */
.page{height:100%;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}
.wrap{max-width:1040px;margin:0 auto;padding:28px 28px 80px}
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.ph h1{margin:0;font:700 34px/1.05 var(--display);letter-spacing:.005em;text-wrap:balance}
.ph p{margin:6px 0 0;color:var(--muted)}
.eyebrow{font:600 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;display:flex;gap:8px;align-items:center}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:3px 3px 6px;margin:0 -3px}
.chips::-webkit-scrollbar{display:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
.thumb{position:relative;display:block;aspect-ratio:9/16;border-radius:8px;overflow:hidden;background:var(--surface-2);isolation:isolate;text-align:left;width:100%}
.thumb img,.thumb canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.thumb::after{content:"";position:absolute;inset:0;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none;transition:box-shadow .2s}
.thumb:hover::after{box-shadow:inset 0 0 0 1px rgba(243,239,232,.25),inset 3px -3px 0 -1px rgba(255,45,95,.7),inset -3px 3px 0 -1px rgba(31,230,242,.7)}
.thumb .ov{position:absolute;left:0;right:0;bottom:0;padding:30px 10px 9px;background:linear-gradient(transparent,rgba(0,0,0,.8));font-size:12.5px;z-index:1}
.thumb .ov .c{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:600;line-height:1.3;margin-bottom:5px}
.thumb .ov .s{display:flex;align-items:center;gap:5px;color:rgba(243,239,232,.8);font:600 11.5px var(--mono)}
.thumb .rank{position:absolute;left:8px;top:8px;z-index:1;font:700 26px/1 var(--display);text-shadow:-2px 1px 0 var(--cyan),2px -1px 0 var(--pink)}
.thumb .lock{position:absolute;right:8px;top:8px;z-index:1;padding:4px;border-radius:4px;background:rgba(5,5,5,.6)}
.shelf{margin-top:34px}
.shelf h2{margin:0 0 14px;font:700 20px var(--display);display:flex;align-items:center;justify-content:space-between;gap:12px}
.shelf h2 a{font:600 13.5px var(--body);color:var(--muted)}
.shelf h2 a:hover{color:var(--fg)}
.hscroll{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,176px);gap:14px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.hscroll::-webkit-scrollbar{display:none}
.bigsearch .field{height:56px;border-radius:28px;padding:0 20px;font-size:16px}
.bigsearch input{font-size:16.5px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px}
.empty-state{display:grid;place-items:center;text-align:center;padding:60px 24px;gap:6px;color:var(--muted)}
.empty-state h3{margin:12px 0 0;color:var(--fg);font:700 20px var(--display)}
.empty-state p{margin:0 0 14px;max-width:380px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:26px 0 18px}
.tabs button{position:relative;padding:12px 18px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:6px}
.tabs button.on{color:var(--fg)}
.tabs button.on::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--fg);box-shadow:-2px 1px 0 var(--cyan),2px -1px 0 var(--pink)}

/* ---------- Profile ---------- */
.prof{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
.prof .av{--s:124px}
.prof h1{margin:0;font:700 30px/1.1 var(--display);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.prof .handle{color:var(--muted);margin-top:4px;font-size:15px}
.prof .bio{margin:12px 0 0;color:var(--fg-2);max-width:520px}
.stats{display:flex;gap:26px;margin-top:14px;flex-wrap:wrap}
.stats div b{font:700 18px var(--mono);display:block;line-height:1.1}
.stats div span{color:var(--muted);font-size:13px}
.prof .acts{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.linked{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font:600 12px var(--mono);color:var(--fg-2);padding:5px 9px;border-radius:6px;border:1px solid var(--line)}

/* ---------- Asset page ---------- */
.asset-h{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.asset-h .coin{width:76px;height:76px;font-size:20px}
.asset-h h1{margin:0;font:700 34px/1 var(--display);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.asset-h h1 small{font:600 16px var(--mono);color:var(--muted)}
.vbadge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:13px;font:600 12px var(--body);border:1px solid rgba(31,230,242,.35);color:var(--cyan);background:rgba(31,230,242,.06)}
.vbadge.warn{border-color:rgba(245,184,74,.4);color:var(--warn);background:rgba(245,184,74,.07)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:22px}
.facts div{background:var(--surface);padding:14px 16px}
.facts dt{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:6px 0 0;font-weight:700;font-size:16px}
.notice{display:flex;gap:12px;padding:14px 16px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);font-size:14px;color:var(--fg-2);margin-top:18px}
.notice.warn{border-color:rgba(245,184,74,.35);background:rgba(245,184,74,.05)}
.notice svg{color:var(--muted);margin-top:2px}
.notice.warn svg{color:var(--warn)}
.creators-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.ccard{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);text-align:left}
.ccard:hover{border-color:var(--line-2)}
.ccard .t{flex:1;min-width:0}.ccard b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ccard small{color:var(--muted)}

/* ---------- Comments ---------- */
.cpanel{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;background:var(--surface);animation:slin .28s cubic-bezier(.2,.8,.2,1)}
@keyframes slin{from{transform:translateX(24px);opacity:0}}
.cpanel header{display:flex;align-items:center;gap:10px;padding:16px 16px 12px 20px;border-bottom:1px solid var(--line)}
.cpanel header h3{margin:0;font:700 17px var(--display);flex:1}
.cpanel header h3 span{color:var(--muted);font-family:var(--mono);font-size:14px;margin-left:6px}
.sort{display:flex;gap:2px;padding:3px;border-radius:8px;background:var(--surface-2)}
.sort button{padding:5px 10px;border-radius:6px;font-weight:700;font-size:12.5px;color:var(--muted)}
.sort button.on{background:var(--surface-3);color:var(--fg)}
.clist{flex:1;overflow-y:auto;padding:8px 20px 20px;scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}
.cm{display:grid;grid-template-columns:36px 1fr 34px;gap:10px;padding:12px 0}
.cm .av{--s:36px}
.cm .nm{font-weight:700;font-size:13.5px;color:var(--fg-2);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cm .nm .op{font:600 10px var(--mono);color:var(--cyan);border:1px solid rgba(31,230,242,.4);padding:1px 4px;border-radius:3px}
.cm .tx{margin:3px 0 5px;font-size:14.5px;line-height:1.45;overflow-wrap:anywhere}
.cm .ln{display:flex;gap:14px;color:var(--muted);font-size:12.5px;font-weight:600;align-items:center}
.cm .ln button:hover{color:var(--fg)}
.cm .lk{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);font:600 11px var(--mono);padding-top:4px}
.cm .lk.on{color:var(--pink)}.cm .lk.on svg{fill:var(--pink)}
.cm .replies{grid-column:2/4}
.cm .replies .cm{grid-template-columns:28px 1fr 34px}
.cm .replies .av{--s:28px}
.showrep{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;font-weight:700;margin-top:2px}
.showrep::before{content:"";width:22px;height:1px;background:var(--line-2)}
.cmenu{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 4px);z-index:50;min-width:180px;padding:6px;border-radius:10px;background:var(--surface-3);border:1px solid var(--line-2);box-shadow:0 20px 50px rgba(0,0,0,.6)}
.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:6px;font-size:14px;font-weight:600;text-align:left;color:var(--fg-2)}
.menu button:hover{background:rgba(255,255,255,.06);color:var(--fg)}
.menu button.bad{color:#ff7a95}
.cform{display:flex;gap:10px;align-items:center;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.cform .in{flex:1;display:flex;align-items:center;height:42px;border-radius:21px;background:var(--surface-2);border:1px solid var(--line);padding:0 6px 0 16px}
.cform .in:focus-within{border-color:var(--line-2)}
.cform input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:14.5px}
.cform .replying{font-size:12.5px;color:var(--muted);padding:0 16px 8px;display:flex;justify-content:space-between}
.scrim{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.6);display:none}
.sheet-host{position:fixed;z-index:61;right:0;top:0;bottom:0;width:min(420px,100%);display:none}
.sheet-host .cpanel{border-left:1px solid var(--line)}

/* ---------- Modals & toasts ---------- */
.modal-host{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.66);animation:fade .2s}
@keyframes fade{from{opacity:0}}
.modal{position:relative;width:min(440px,100%);max-height:calc(100% - 32px);overflow-y:auto;background:var(--surface);border:1px solid var(--line-2);border-radius:16px;padding:26px;box-shadow:0 40px 100px rgba(0,0,0,.7);animation:rise .25s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{transform:translateY(14px);opacity:0}}
.modal h2{margin:0 0 6px;font:700 24px/1.1 var(--display);text-wrap:balance}
.modal .lead{margin:0 0 18px;color:var(--fg-2);font-size:14.5px}
.modal .x{position:absolute;right:12px;top:12px}
.field-l{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field-l label,.lbl{font-weight:700;font-size:13px;color:var(--fg-2)}
.inp{height:44px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line-2);padding:0 14px;outline:0;width:100%}
textarea.inp{height:auto;min-height:96px;padding:12px 14px;resize:vertical;line-height:1.45}
.inp:focus{border-color:rgba(243,239,232,.3);box-shadow:-2px 2px 0 -1px var(--cyan),2px -2px 0 -1px var(--pink)}
.or{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12px;margin:16px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.stack{display:flex;flex-direction:column;gap:10px}
.soon{margin-left:auto;font:600 10px var(--mono);color:var(--muted);letter-spacing:.06em;border:1px solid var(--line-2);padding:2px 5px;border-radius:3px}
.radio{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;border:1px solid var(--line);cursor:pointer;font-weight:600;font-size:14.5px}
.radio:hover{border-color:var(--line-2)}
.radio input{accent-color:var(--cyan);width:16px;height:16px}
.radio:has(input:checked){border-color:rgba(31,230,242,.45);background:rgba(31,230,242,.04)}
.radio small{display:block;color:var(--muted);font-weight:500;font-size:12.5px}
.share-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:6px}
.share-grid a,.share-grid button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 4px;border-radius:12px;border:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--fg-2)}
.share-grid a:hover,.share-grid button:hover{border-color:var(--line-2);color:var(--fg)}
.share-grid .ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);color:var(--fg)}
.urlbox{display:flex;gap:8px;align-items:center;margin-top:16px;padding:6px 6px 6px 14px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line)}
.urlbox code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 13px var(--mono);color:var(--fg-2);user-select:all}
.toast{position:fixed;left:50%;width:max-content;bottom:28px;z-index:90;transform:translate(-50%,20px);opacity:0;pointer-events:none;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:10px;background:var(--fg);color:#050505;font-weight:700;font-size:14px;box-shadow:-3px 3px 0 var(--cyan),3px -3px 0 var(--pink);transition:opacity .2s,transform .2s;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Create ---------- */
.stepper{display:flex;gap:6px;margin:4px 0 26px;flex-wrap:wrap}
.stepper .st{display:flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;border-radius:20px;border:1px solid var(--line);color:var(--muted);font-weight:700;font-size:13px}
.stepper .st i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--surface-3);font:600 11px/1 var(--mono);font-style:normal}
.stepper .st.on{color:var(--fg);border-color:var(--line-2)}
.stepper .st.on i{background:var(--fg);color:#050505;box-shadow:-1.5px 1px 0 var(--cyan),1.5px -1px 0 var(--pink)}
.stepper .st.done{color:var(--fg-2)}
.stepper .st.done i{background:rgba(61,220,151,.15);color:var(--ok)}
.cgrid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:32px;align-items:start}
.drop-zone{display:grid;place-items:center;text-align:center;gap:6px;padding:48px 24px;border-radius:18px;border:1.5px dashed var(--line-2);background:radial-gradient(60% 60% at 30% 20%,rgba(31,230,242,.05),transparent),radial-gradient(60% 60% at 70% 80%,rgba(255,45,95,.05),transparent),var(--surface);cursor:pointer;transition:border-color .2s}
.drop-zone:hover,.drop-zone.over{border-color:rgba(243,239,232,.35)}
.drop-zone h3{margin:14px 0 0;font:700 22px var(--display)}
.drop-zone p{margin:0 0 16px;color:var(--muted)}
.reqs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:16px}
.req{padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:13px;color:var(--muted)}
.req b{display:block;color:var(--fg);font-size:14px;margin-bottom:2px}
.checks{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.checks div{display:flex;align-items:center;gap:10px;font-size:14px}
.checks .ok{color:var(--ok)}.checks .bad{color:var(--pink)}.checks .pend{color:var(--muted)}
.pv{position:relative;width:100%;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#000;border:1px solid var(--line)}
.pv canvas,.pv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pv.fit video,.pv.fit canvas{object-fit:contain}
.pv .crop{position:absolute;border:1.5px solid var(--fg);box-shadow:0 0 0 999px rgba(0,0,0,.55);pointer-events:none;left:0;right:0;top:50%;transform:translateY(-50%)}
.opt-row{display:flex;gap:8px;flex-wrap:wrap}
.filmstrip{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:10px}
.filmstrip button{aspect-ratio:9/16;border-radius:6px;overflow:hidden;position:relative;border:1px solid var(--line)}
.filmstrip button img{width:100%;height:100%;object-fit:cover;display:block}
.filmstrip button.on{outline:2px solid var(--fg);outline-offset:1px;box-shadow:-3px 3px 0 var(--cyan),3px -3px 0 var(--pink)}
.tagbox{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:44px;padding:6px 10px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line-2)}
.tagbox input{flex:1;min-width:120px;background:none;border:0;outline:0;height:30px}
.tagbox .t{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 6px 0 10px;border-radius:14px;background:var(--surface-3);font-weight:700;font-size:13px}
.tagbox .t button{color:var(--muted);display:grid;place-items:center}
.counter{font:500 11.5px var(--mono);color:var(--muted);text-align:right;margin-top:4px}
.sw{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.sw b{display:block;font-size:14.5px}.sw small{color:var(--muted);font-size:12.5px}
.toggle{position:relative;width:44px;height:26px;border-radius:13px;background:var(--surface-3);border:1px solid var(--line-2);flex:none;transition:background .2s}
.toggle::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform .2s,background .2s}
.toggle[aria-checked="true"]{background:rgba(31,230,242,.2);border-color:rgba(31,230,242,.5)}
.toggle[aria-checked="true"]::after{transform:translateX(18px);background:var(--fg);box-shadow:-1.5px 1px 0 var(--cyan),1.5px -1px 0 var(--pink)}
.cnav{display:flex;justify-content:space-between;gap:10px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.pipeline{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.pipeline div{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--muted)}
.pipeline div.on{color:var(--fg)}
.pipeline div.done{color:var(--fg-2)}
.pipeline .d{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;flex:none}
.pipeline .on .d{border-color:var(--cyan);border-top-color:var(--pink);animation:spin .8s linear infinite}
.pipeline .done .d{background:rgba(61,220,151,.15);border-color:transparent;color:var(--ok)}
@keyframes spin{to{transform:rotate(360deg)}}
.asset-pick{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.asset-pick button{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);text-align:left;font-size:14px}
.asset-pick button:hover{border-color:var(--line-2)}
.asset-pick .coin{width:28px;height:28px;font-size:9.5px}

/* ---------- Inbox ---------- */
.nt{display:flex;gap:14px;align-items:center;padding:14px 12px;border-radius:12px;margin:0 -12px}
.nt:hover{background:var(--surface)}
.nt .t{flex:1;min-width:0;font-size:14.5px;line-height:1.4}
.nt .t small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.nt .t .q{color:var(--fg-2)}
.nt img{width:44px;height:60px;border-radius:6px;object-fit:cover;flex:none}
.nt .kind{position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--bg)}
.nt.unread .t::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:2px -1px 0 var(--pink);margin-right:8px;vertical-align:2px}
.group-h{font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:26px 0 6px}

/* ---------- Splash / loader ---------- */
#splash{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--bg);transition:opacity .35s ease .1s}
#splash.out{opacity:0;pointer-events:none}
#splash .lc{animation:spc .75s cubic-bezier(.2,.9,.2,1) both}
#splash .lp{animation:spp .75s cubic-bezier(.2,.9,.2,1) both}
#splash .lw{animation:spw .75s ease both}
@keyframes spc{0%{transform:translate(-16px,0);opacity:0}55%{transform:translate(-5px,-1px);opacity:1}80%{transform:translate(-1px,0)}100%{transform:translate(-2.5px,-1.5px)}}
@keyframes spp{0%{transform:translate(16px,0);opacity:0}55%{transform:translate(5px,1px);opacity:1}80%{transform:translate(1px,0)}100%{transform:translate(2.5px,1.5px)}}
@keyframes spw{0%{opacity:0}40%{opacity:1}}
.loader .lc{animation:lc 1s ease-in-out infinite}
.loader .lp{animation:lp 1s ease-in-out infinite}
@keyframes lc{50%{transform:translate(-6px,-1px)}}
@keyframes lp{50%{transform:translate(6px,1px)}}

/* ---------- Responsive ---------- */
@media (max-width:1240px){ :root{--panel:300px;--side:212px} }
@media (max-width:1100px){
  .app{grid-template-columns:76px minmax(0,1fr)}
  .panel{display:none}
  .sidebar{padding:18px 10px;align-items:center}
  .brand{padding:4px 0 16px}.brand .wordmark{display:none}
  .nav a{width:52px;justify-content:center;padding:0}
  .nav a span.lb,.me .t,.keys,.side-cta .lb{display:none}
  .nav a.on::before{left:-10px}
  .nav .badge{position:absolute;top:4px;right:2px;min-width:16px;height:16px;line-height:16px;font-size:10px;padding:0 4px}
  .side-cta .btn{width:52px}.side-cta .btn>span{padding:0}
  .me{border:0;padding:0;justify-content:center}
  .side-foot .lb{display:none}.side-foot .btn{width:52px}.side-foot .btn>span{padding:0}
  .sheet-host.open,.scrim.open{display:block}
}
@media (min-width:1101px){ .scrim,.sheet-host{display:none!important} }
@media (max-width:720px){
  body{font-size:14.5px}
  .app{grid-template-columns:1fr;height:calc(100% - var(--tab-h) - env(safe-area-inset-bottom,0px))}
  .sidebar{display:none}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;height:calc(var(--tab-h) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:#050505;border-top:1px solid var(--line)}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;font-weight:700;color:var(--muted);position:relative}
  .tabbar a.on{color:var(--fg)}
  .tabbar a.on svg{filter:drop-shadow(-1px .5px 0 rgba(31,230,242,.9)) drop-shadow(1px -.5px 0 rgba(255,45,95,.9))}
  .tabbar .plus{flex:1;display:grid;place-items:center}
  .tabbar .plus span{display:grid;place-items:center;width:48px;height:32px;border-radius:9px;background:var(--fg);color:#050505;box-shadow:-3px 0 0 var(--cyan),3px 0 0 var(--pink)}
  .tabbar .dot{position:absolute;top:6px;left:calc(50% + 6px);min-width:16px;height:16px;border-radius:8px;background:var(--pink);color:#fff;font:700 10px/16px var(--mono);text-align:center;padding:0 4px}
  .slide{padding:0}
  .stage{height:100%;width:100%;max-width:none;max-height:none;aspect-ratio:auto}
  .screen{clip-path:none}
  .stage::before,.stage::after,.glow{display:none}
  .rail{position:absolute;right:6px;bottom:96px;z-index:5;margin:0;padding:0;gap:16px;width:58px}
  .act{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);font-size:12px}
  .act .b{background:transparent;border:0;width:44px;height:40px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
  .act:hover .b{background:transparent}
  .act .b svg{width:30px;height:30px}
  .meta{padding:60px 76px 18px 14px}
  .catlabel{top:calc(62px + env(safe-area-inset-top,0px))}
  .sound{top:calc(58px + env(safe-area-inset-top,0px));right:8px}
  .sound input{display:none}
  .feed-top{right:0;flex-direction:row;justify-content:center;align-items:center;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px;background:linear-gradient(rgba(0,0,0,.45),transparent)}
  .feed-top .seg{display:flex;flex-direction:row}
  .feed-top .seg{background:transparent;border:0;backdrop-filter:none}
  .feed-top .seg a{color:rgba(243,239,232,.65);font-size:15.5px;padding:6px 10px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
  .feed-top .seg a.on{background:none;color:#fff;box-shadow:inset 0 -2px 0 #fff}
  .feed-top .demo-pill{display:none}
  .feed-top .mob-search{display:grid;position:absolute;right:8px;top:calc(8px + env(safe-area-inset-top,0px));color:#fff}
  .nudge{display:none}
  .news-note{top:calc(104px + env(safe-area-inset-top,0px))}
  .wrap{padding:18px 16px 60px}
  .ph h1{font-size:27px}
  .grid{grid-template-columns:repeat(3,1fr);gap:4px}
  .grid .thumb{border-radius:4px}
  .grid .thumb .ov .c{display:none}
  .grid .thumb .ov{padding:20px 6px 6px}
  .hscroll{grid-auto-columns:132px;gap:8px}
  .prof{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px}
  .prof .av{--s:96px}
  .prof h1{justify-content:center;font-size:24px}
  .prof .bio{margin-inline:auto}
  .stats,.prof .acts{justify-content:center}
  .cgrid{grid-template-columns:1fr}
  .cgrid .pv{max-width:260px;margin:0 auto}
  .stepper .st span{display:none}
  .stepper .st{padding:6px}
  .sheet-host{top:auto;left:0;width:100%;height:72%;border-radius:16px 16px 0 0;overflow:hidden}
  .sheet-host .cpanel{border:0;animation:sup .3s cubic-bezier(.2,.8,.2,1)}
  @keyframes sup{from{transform:translateY(40px);opacity:0}}
  .sheet-host.open,.scrim.open{display:block}
  .toast{bottom:calc(var(--tab-h) + 18px + env(safe-area-inset-bottom,0px))}
  .modal{padding:22px 18px}
  .modal-host{align-items:end;padding:0}
  .modal-host .modal{width:100%;border-radius:18px 18px 0 0;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}
  .share-grid{grid-template-columns:repeat(4,1fr);gap:6px}
}
.mintro{display:none}
@media (max-width:720px){.mintro{display:flex;position:absolute;left:10px;right:10px;top:calc(56px + env(safe-area-inset-top,0px));z-index:21;gap:8px;align-items:center;padding:10px 6px 10px 14px;border-radius:12px;background:rgba(12,12,14,.85);border:1px solid var(--line-2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.mintro .t{flex:1;min-width:0}.mintro b{display:block;font:700 12.5px/1.2 var(--display);letter-spacing:.02em}.mintro .t span{display:block;color:var(--muted);font-size:12px;margin-top:2px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ═════════════════════════════ CryptoTok additions ═════════════════════════════ */
[hidden]{display:none!important}
:root{--cap-yellow:#FFE16B;--up:var(--ok);--down:var(--pink)}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:.005em;line-height:1.08;margin:0}
p{margin:0}
.muted{color:var(--muted)}
.small{font-size:13px}
.center{text-align:center}
.up{color:var(--ok)}.down{color:var(--pink)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pad{padding:40px 24px}
.boot{display:grid;place-items:center;height:100%;gap:14px;color:var(--muted);font:600 14px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.tk{font:700 12.5px var(--mono);color:var(--cyan)}
.mono-ish{font:500 13px var(--mono);word-break:break-all;color:var(--fg-2)}
.linkish{color:var(--cyan);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ext{color:var(--fg-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.ext:hover{color:var(--fg);text-decoration-color:var(--cyan)}

/* buttons without the primary/ghost word are primary; size aliases */
.btn.small{height:32px;font-size:13px}.btn.small>span{padding:0 12px}
.btn.big{height:48px;font-size:15.5px}.btn.big>span{padding:0 24px}
a.btn{cursor:pointer}
label.btn{cursor:pointer}
.btn:disabled{opacity:.45;pointer-events:none}

/* brand */
.brand .logo svg .ls{transition:transform .25s ease}
.brand:hover .logo .lc{transform:translate(-1.5px,-1px)}
.brand:hover .logo .lp{transform:translate(1.5px,1px)}
.brand .wordmark{letter-spacing:.06em}
.side-wallet{display:flex;flex-direction:column;gap:8px}
.wallet-addr{font:500 12px var(--mono);color:var(--muted);padding:0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* avatars with a picture */
.av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.av.ph{background:linear-gradient(135deg,var(--surface-3),var(--surface-2));color:var(--fg)}
.av.sq,.av.sq img{border-radius:10px}

/* ── the episode player inside a feed slide ── */
.screen .player-frame{position:absolute;inset:0;background:#000}
.player-frame .pvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .12s;background:#000}
.player-frame .pvid.on{opacity:1}
.still{position:absolute;inset:0;opacity:0;overflow:hidden;background:radial-gradient(70% 50% at 40% 40%,rgba(31,230,242,.12),transparent),radial-gradient(70% 50% at 60% 60%,rgba(255,45,95,.1),transparent),#0a0a0c}
.still.on{opacity:1}
.still img{width:100%;height:100%;object-fit:cover}
.still.on img{animation:kenburns 9s ease-out both}
.still.empty img{display:none}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.14) translate(-2%,-3%)}}
.subs{position:absolute;left:7%;right:7%;bottom:30%;display:grid;justify-items:center;gap:5px;text-align:center;pointer-events:none;z-index:1}
.subs .sub-who{font:600 11px var(--mono);letter-spacing:.1em;color:var(--cyan);text-transform:uppercase;text-shadow:0 1px 4px rgba(0,0,0,.9)}
.subs .sub-line{background:var(--fg);color:#050505;padding:5px 11px;border-radius:6px;font-weight:800;line-height:1.3;font-size:clamp(13px,1.9vw,16px);box-shadow:-2px 2px 0 var(--cyan),2px -2px 0 var(--pink)}
.nate-cap{position:absolute;left:4%;right:4%;top:56%;z-index:1;text-align:center;pointer-events:none;font:700 clamp(30px,5.5vw,54px)/.95 var(--display);color:var(--cap-yellow);text-transform:uppercase;letter-spacing:.01em;-webkit-text-stroke:7px #050505;paint-order:stroke fill;text-shadow:0 6px 0 #050505,0 10px 26px rgba(0,0,0,.55);opacity:0}
.nate-cap.pop{animation:cappop .34s cubic-bezier(.2,1.6,.4,1) both}
@keyframes cappop{0%{opacity:0;transform:scale(.4) rotate(-4deg)}100%{opacity:1;transform:scale(1) rotate(-2deg)}}
.player-frame .bug{position:absolute;left:14px;top:14px;z-index:2;font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:6px 8px;border-radius:4px;background:rgba(5,5,5,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--fg-2);pointer-events:none}
.player-frame .bug span{color:var(--fg)}
.player-frame .sb-tag{position:absolute;left:14px;top:42px;z-index:2;font:600 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--warn);border:1px solid rgba(245,184,74,.4);background:rgba(5,5,5,.6);padding:5px 7px;border-radius:4px;pointer-events:none}
.player-frame .tap-sound{display:none}
.veil{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:linear-gradient(rgba(5,5,5,.35),rgba(5,5,5,.85))}
.veil-in{display:grid;justify-items:center;gap:10px;text-align:center;padding:24px}
.veil-in b{font:700 18px var(--display)}
.veil-in span:not(.spin){color:var(--fg-2);font-size:13.5px}
.spin{display:inline-block;width:26px;height:26px;border-radius:50%;border:2.5px solid var(--line-2);border-top-color:var(--cyan);border-right-color:var(--pink);animation:spin .8s linear infinite;vertical-align:middle;flex:none}
.spin.sm{width:15px;height:15px;border-width:2px}
.slide .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.8)}
.slide.active .poster{display:none}
.slide .studio-tag{position:absolute;left:14px;top:14px;z-index:3;display:flex;align-items:center;gap:8px;font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:7px 9px;border-radius:4px;background:rgba(5,5,5,.7);color:var(--cyan)}
.who .tick{font:700 12.5px var(--mono);color:var(--cyan)}
.who .epn{font:600 11px var(--mono);color:var(--fg-2);border:1px solid var(--line-2);padding:3px 6px;border-radius:4px}
.who .newc{font:600 10px var(--mono);letter-spacing:.06em;color:#050505;background:var(--cyan);padding:3px 6px;border-radius:4px;box-shadow:2px -2px 0 var(--pink)}
.cap b{font-weight:800}
.asset-chip .sym img{width:20px;height:20px;border-radius:50%;object-fit:cover}
.asset-chip .up,.asset-chip .down{font:600 11px var(--mono)}
.prog{cursor:default}
.slide.studio .rail{opacity:.4;pointer-events:none}
.feed-empty{height:100%;display:grid;place-items:center;text-align:center;padding:24px}
.feed-empty .stage{display:grid;place-items:center}
.nudge{right:22px}

/* ── details panel (vote / script / cast) — panel on wide screens, sheet on small ── */
.cpanel .ctabs{display:flex;gap:2px;padding:3px;border-radius:8px;background:var(--surface-2)}
.cpanel .ctabs button{padding:5px 10px;border-radius:6px;font-weight:700;font-size:12.5px;color:var(--muted)}
.cpanel .ctabs button.on{background:var(--surface-3);color:var(--fg)}
.cbody{flex:1;overflow-y:auto;padding:16px 20px 24px;scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}
.cbody h4{margin:18px 0 8px;font:600 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cbody h4:first-child{margin-top:0}
.ep-head h2{font:700 21px/1.1 var(--display)}
.ep-head p{margin-top:6px;color:var(--fg-2);font-size:14px}
.ep-head .plot{color:var(--cyan);font-weight:600;font-size:13.5px}

/* vote */
.vote-options{display:grid;gap:8px}
.vote-opt{position:relative;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;text-align:left;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:13px 14px;overflow:hidden;font-weight:600;font-size:14px;line-height:1.35;width:100%;transition:border-color .15s}
.vote-opt:hover:not(:disabled){border-color:var(--line-2)}
.vote-opt:disabled{cursor:default}
.vo-bar{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,rgba(31,230,242,.13),rgba(255,45,95,.1));transition:width .6s ease}
.vo-text,.vo-count{position:relative}
.vo-count{font:700 13px var(--mono);color:var(--fg);display:grid;justify-items:end}
.vo-count em{font-style:normal;font-size:11px;color:var(--muted);font-weight:600}
.vote-opt.mine{border-color:transparent;box-shadow:-2px 2px 0 -.5px var(--cyan),2px -2px 0 -.5px var(--pink)}
.vote-opt.won{border-color:rgba(61,220,151,.5)}
.vote-opt.busy{opacity:.6}
.vote-sub{color:var(--fg-2);font-size:13.5px;margin:0 0 12px}
.vote-note{color:var(--faint);font-size:12px;margin-top:10px;line-height:1.5}

/* script */
.script{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.scene{display:grid;gap:6px;padding:12px 0;border-top:1px solid var(--line)}
.scene:first-child{border-top:0;padding-top:0}
.scene-h{font:600 11.5px var(--mono);color:var(--muted);letter-spacing:.04em}
.sl{font-size:14px;line-height:1.45}
.sl b{color:var(--fg);margin-right:4px}
.sl em{color:var(--muted);font-size:12px;font-style:normal;font-family:var(--mono)}
.sc{justify-self:start;font:700 14px var(--display);color:var(--cap-yellow);text-transform:uppercase;letter-spacing:.04em;background:#050505;border:1px solid var(--line-2);padding:3px 9px;border-radius:5px}

/* cast rows + credits */
.cast-list{display:flex;flex-direction:column}
.cast-row{display:flex;align-items:center;gap:12px;padding:8px 6px;margin:0 -6px;border-radius:8px}
a.cast-row:hover{background:var(--surface-2)}
.cr-main{flex:1;min-width:0;display:grid}
.cr-name{font-weight:700;font-size:14.5px}
.cr-persona{color:var(--muted);font-size:12.5px}
.cr-stats{font:600 12px var(--mono);color:var(--fg-2);text-align:right}
.host-tag{font:600 10px var(--mono);color:var(--muted);border:1px solid var(--line-2);padding:2px 5px;border-radius:3px;margin-left:4px}
.bb{padding:10px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--fg-2)}
.bb:first-child{border-top:0}
.bb a:not(.ext){color:var(--fg);font-weight:700}
.dl-row{display:flex;gap:8px;flex-wrap:wrap}

/* studio box (panel) */
.studio{display:grid;gap:5px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.studio b{display:flex;align-items:center;gap:9px;font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.studio.idle{border-style:dashed}
.studio.idle span{color:var(--muted);font-size:13.5px}
.studio.idle a{color:var(--cyan);font-weight:700}
.st-title{font-weight:700;font-size:14.5px}
.st-prog{color:var(--cyan);font:600 12px var(--mono)}
.st-q{color:var(--muted);font-size:12.5px}
.ca-chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:16px;border:1px dashed var(--line-2);font:600 12px var(--mono);color:var(--cyan);background:none}
.ca-chip:hover{border-color:var(--cyan)}
.x-link{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--line-2);color:var(--fg)}

/* page scaffolding */
.page .wrap.wide{max-width:1180px}
.page-head{margin-bottom:22px}
.page-head h1{font:700 34px/1.05 var(--display)}
.page-head p{margin-top:8px;color:var(--muted);max-width:640px}
.lede{color:var(--fg-2);font-size:15px;margin-top:10px;max-width:620px}
.empty-page{text-align:center;padding:80px 20px;display:grid;gap:16px;justify-items:center}
.empty-page h1{font:700 30px var(--display)}
.note{display:flex;gap:10px;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);font-size:14px;color:var(--fg-2);margin-top:12px}
.note.bad{border-color:rgba(255,45,95,.45);background:rgba(255,45,95,.06)}
.note b{color:var(--fg)}

/* forms (casting, admin, modals) */
.field{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
.field>span{font-weight:700;font-size:13px;color:var(--fg-2)}
.field em{font-style:normal;color:var(--muted);font-weight:500}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),textarea{width:100%;height:44px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line-2);padding:0 14px;outline:0;color:var(--fg)}
textarea{height:auto!important;min-height:84px;padding:12px 14px!important;resize:vertical;line-height:1.45}
input:focus,textarea:focus{border-color:rgba(243,239,232,.3)!important;box-shadow:-2px 2px 0 -1px var(--cyan),2px -2px 0 -1px var(--pink)}
input::placeholder,textarea::placeholder{color:var(--faint)}
input.upper{text-transform:uppercase}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check{display:flex;gap:10px;align-items:center;margin:4px 0 14px;font-weight:600;font-size:14px}
.check input{accent-color:var(--cyan);width:16px;height:16px}
.form-err{color:#ff7a95;font-weight:700;font-size:14px;margin-bottom:12px}

/* cast grid */
.cast-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.cast-card{position:relative;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:var(--surface);border:1px solid var(--line);isolation:isolate;transition:border-color .2s}
a.cast-card:hover{border-color:var(--line-2);box-shadow:-3px 3px 0 -1px var(--cyan),3px -3px 0 -1px var(--pink)}
.cast-card img,.cast-card .card-ph{width:100%;aspect-ratio:1;object-fit:cover}
.card-ph{display:grid;place-items:center;background:radial-gradient(70% 70% at 30% 30%,rgba(31,230,242,.1),transparent),radial-gradient(70% 70% at 70% 70%,rgba(255,45,95,.1),transparent),var(--surface-2);font:700 54px var(--display);color:var(--fg-2)}
.cc-body{display:grid;gap:3px;padding:12px 14px 14px}
.cc-name{font:700 17px var(--display)}
.cc-coin{font:700 12.5px var(--mono);color:var(--cyan)}
.cc-mc{color:var(--fg-2);font-weight:600}
.cc-meta{color:var(--muted);font-size:12.5px}
.cc-status{font:600 11px var(--mono);color:var(--warn)}
.hosts-h{margin:36px 0 14px;font:700 20px var(--display)}
.empty{grid-column:1/-1;display:grid;gap:14px;justify-items:start;padding:28px;border:1.5px dashed var(--line-2);border-radius:14px;color:var(--fg-2)}

/* episodes grid (thumbs) */
.thumb img{transition:transform .4s}
.thumb:hover img{transform:scale(1.04)}
.thumb .ov .cast{color:rgba(243,239,232,.7);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.thumb .no{position:absolute;left:8px;top:8px;z-index:1;font:700 22px/1 var(--display);text-shadow:-2px 1px 0 var(--cyan),2px -1px 0 var(--pink)}
.thumb .ph-in{position:absolute;inset:0;background:radial-gradient(60% 50% at 40% 40%,rgba(31,230,242,.12),transparent),radial-gradient(60% 50% at 60% 60%,rgba(255,45,95,.1),transparent),var(--surface-2)}
.grid .group-h{grid-column:1/-1;margin:14px 0 0}
.grid .group-h:first-child{margin-top:0}

/* character (profile) page */
.prof .av{--s:132px}
.prof .av.big{--s:160px}
.prof h1 .tick{font:700 18px var(--mono);color:var(--cyan)}
.prof blockquote{margin:12px 0 0;font:700 18px/1.25 var(--display);color:var(--fg)}
.prof blockquote::before{content:"“";color:var(--pink)}.prof blockquote::after{content:"”";color:var(--cyan)}
.coin-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.creator-box{margin-top:22px;padding:18px;border-radius:14px;background:var(--surface);border:1px solid var(--line-2);display:grid;gap:10px}
.creator-box h2{font:700 18px var(--display)}
.manage-line{margin-top:16px;color:var(--muted);font-size:13.5px}
.bb-list .bb{border-top:1px solid var(--line)}

/* casting */
.cast-room{display:grid;grid-template-columns:minmax(260px,380px) minmax(0,1fr);gap:32px;align-items:start}
.cr-stage{position:sticky;top:0}
.pic-stage{position:relative;aspect-ratio:1;border-radius:18px;overflow:hidden;border:1.5px dashed var(--line-2);background:radial-gradient(60% 60% at 30% 20%,rgba(31,230,242,.06),transparent),radial-gradient(60% 60% at 70% 80%,rgba(255,45,95,.06),transparent),var(--surface)}
.pic-stage:has(img){border-style:solid;border-color:var(--line);box-shadow:-3px 3px 0 var(--cyan),3px -3px 0 var(--pink)}
.pic-stage img{width:100%;height:100%;object-fit:cover}
.pic-empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;padding:30px;color:var(--muted);font-size:14px}
.pic-empty b{font:700 22px var(--display);color:var(--fg)}
.cr-stage-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.cr-name-preview{font:700 18px var(--display)}
fieldset{border:0;border-top:1px solid var(--line);margin:0;padding:22px 0 24px;min-width:0}
legend{font:700 20px var(--display);display:flex;align-items:center;gap:10px;padding:0 0 14px;float:left;width:100%}
legend+*{clear:both}
.step{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--fg);color:#050505;font:600 12px/1 var(--mono);box-shadow:-1.5px 1px 0 var(--cyan),1.5px -1px 0 var(--pink)}
.photo-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:-4px 0 16px}
.lbl-row{display:grid;gap:8px;margin:0 0 16px}
.lbl-row .chips{flex-wrap:wrap;overflow:visible}
.draw-note{margin-top:10px}
.cost{font-size:15px}
.cost b{color:var(--cyan)}
.facts-list{color:var(--fg-2);padding-left:20px;margin:12px 0 20px;display:grid;gap:6px;font-size:14px}
.progress{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:12px;color:var(--muted)}
.progress li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px}
.progress li::before{content:"";width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);flex:none;margin-top:1px}
.progress li.now{color:var(--fg);font-weight:700}
.progress li.now::before{border-color:var(--cyan);border-top-color:var(--pink);animation:spin .8s linear infinite}
.progress li.done{color:var(--fg-2)}
.progress li.done::before{background:rgba(61,220,151,.18);border-color:transparent}
.progress li span{display:block;color:var(--muted);font-weight:400;font-size:12.5px}
.progress li.big{color:var(--fg)}
.progress li.big a{color:var(--cyan)}
.pay-box{margin-top:18px;padding:18px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface);display:grid;gap:12px}
.pay-box h3{font:700 20px var(--display)}
.pay-box h3 b{color:var(--cyan)}
.pay-addr{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pay-addr code{flex:1 1 260px;min-width:0;word-break:break-all;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:500 13px/1.4 var(--mono)}
.key-box{border-top:1px dashed var(--line-2);padding-top:12px;display:grid;gap:10px}
.key-box b{color:var(--cyan)}
.key-box.first{border-top:0;padding-top:0}

/* how it works */
.how-steps{list-style:none;counter-reset:s;padding:0;margin:0 0 28px;display:grid;max-width:760px}
.how-steps li{counter-increment:s;display:grid;grid-template-columns:52px 1fr;padding:20px 0;border-top:1px solid var(--line)}
.how-steps li::before{content:counter(s);font:700 30px/1 var(--display);text-shadow:-2px 1px 0 var(--cyan),2px -1px 0 var(--pink)}
.how-steps h2{grid-column:2;margin-bottom:6px;font-size:19px}
.how-steps p{grid-column:2;color:var(--fg-2);font-size:14.5px}
.fine{color:var(--faint);max-width:62ch;margin-bottom:22px;font-size:12.5px;line-height:1.5}
.admin-form{max-width:560px}
.treasury,.studio-admin{margin-bottom:12px}

/* dialogs */
dialog.modal{margin:auto;color:var(--fg);padding:0}
dialog.modal::backdrop{background:rgba(0,0,0,.66)}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:22px 22px 4px}
.modal-head h2{margin:0;font:700 22px/1.1 var(--display)}
.modal-body{padding:10px 22px 24px;display:grid;gap:14px;font-size:14.5px}
.modal-body .muted{font-size:14px}
.wallet-list{display:grid;gap:8px}
.wallet-opt{display:flex;align-items:center;gap:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-weight:700;text-align:left;width:100%}
.wallet-opt:hover{border-color:var(--line-2)}
.wallet-opt img,.wicon{width:28px;height:28px;border-radius:8px;background:var(--surface-3)}
.wallet-opt.dim{opacity:.7}

/* toasts (stack) */
.toasts{position:fixed;left:50%;bottom:28px;z-index:90;transform:translateX(-50%);display:grid;gap:8px;justify-items:center;width:max-content;max-width:calc(100% - 32px);pointer-events:none}
.toasts .toast{position:static;transform:none;opacity:1;pointer-events:auto;width:auto;max-width:100%;animation:rise .25s cubic-bezier(.2,.8,.2,1)}
.toasts .toast.out{opacity:0;transform:translateY(8px)}
.toasts .toast b{font-weight:800}
.toasts .toast.bad{box-shadow:-3px 3px 0 var(--pink),3px -3px 0 var(--pink)}
.toasts .toast.good{box-shadow:-3px 3px 0 var(--ok),3px -3px 0 var(--cyan)}

/* mobile */
@media (max-width:1100px){
  .side-wallet .wallet-addr{display:none}
}
@media (max-width:720px){
  .toasts{bottom:calc(var(--tab-h) + 18px + env(safe-area-inset-bottom,0px))}
  .cast-room{grid-template-columns:1fr}
  .cr-stage{position:static}
  .pic-stage{max-width:320px;margin:0 auto;width:100%}
  .two{grid-template-columns:1fr}
  .cast-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .page-head h1{font-size:27px}
  .subs{bottom:34%}
  .nate-cap{font-size:40px}
  dialog.modal{margin:auto 0 0;width:100%;max-width:100%;border-radius:18px 18px 0 0}
  .prof .coin-links{justify-content:center}
}
.logo .lc{transform:translate(-3px,-2px)}.logo .lp{transform:translate(3px,2px)}
.brand:hover .logo .lc{transform:translate(-4.5px,-2.5px)}.brand:hover .logo .lp{transform:translate(4.5px,2.5px)}
.search .field{flex-direction:row;margin:0;cursor:text}
.search .field svg{color:var(--muted)}
.search .field input{border:0!important;background:none!important;height:auto!important;padding:0!important;box-shadow:none!important}
.drop a.row{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.screen .player-frame .bug{display:none}
.screen .player-frame .sb-tag{top:14px}
.thumb .ov{display:block}.thumb .ov .cast{display:block}
.thumb .ov .s{display:flex}
#app{height:100%}
.panel-inner .dyn{display:flex;flex-direction:column;gap:26px}
@media (max-width:720px){.screen .player-frame .sb-tag{top:calc(62px + env(safe-area-inset-top,0px))}}
.fund-line{display:flex;align-items:baseline;gap:8px;margin-top:8px;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.fund-line b{font:700 13px var(--mono);color:var(--fg)}
.fund-line em{font-style:normal;margin-left:auto;font:600 11.5px var(--mono);color:var(--cyan)}
.admin .note{display:block;line-height:1.6}
.fund-line>span,.fund-line b{white-space:nowrap}

.logo{display:inline-grid;place-items:center;flex:none}
.logo img{display:block;object-fit:contain;transition:transform .25s ease,filter .25s ease}
.brand:hover .logo img{transform:scale(1.06) rotate(-3deg);filter:drop-shadow(-2px 1px 0 rgba(31,230,242,.35)) drop-shadow(2px -1px 0 rgba(255,45,95,.35))}
.loader img{animation:logopulse 1s ease-in-out infinite}
@keyframes logopulse{50%{transform:scale(.9);opacity:.7}}
/* CA chip + X link */
.ca-chip{cursor:pointer;gap:6px;white-space:nowrap}
.ca-chip b{font-weight:700;color:var(--fg)}
.ca-chip svg{color:var(--muted)}
.ca-chip.soon{cursor:default;color:var(--muted);border-style:dashed}
.ca-chip.soon:hover{border-color:var(--line-2)}
.x-link:hover{border-color:var(--fg);box-shadow:-2px 2px 0 -1px var(--cyan),2px -2px 0 -1px var(--pink)}
.side-social{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 4px}
.side-social .ca-chip{flex:1;min-width:0;justify-content:center;overflow:hidden;text-overflow:ellipsis}
.ft-social{display:none;align-items:center;gap:8px}
.x-link.sm{width:32px;height:32px;background:rgba(5,5,5,.55)}
.ft-social .ca-chip{background:rgba(5,5,5,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media (max-width:1100px){
  .side-social .ca-chip{display:none}
  .side-social{justify-content:center;padding:0}
  .ft-social{display:flex}
}
@media (max-width:720px){
  .feed-top .ft-social{position:absolute;left:12px;top:calc(54px + env(safe-area-inset-top,0px))}
  .screen .player-frame .sb-tag{top:calc(96px + env(safe-area-inset-top,0px))}
}