:root{
  --bg:#0b0716;--bg2:#120a24;--ink:#f6f2ff;--mute:#a79fc4;--line:rgba(255,255,255,.1);
  --pink:#ff4ecd;--violet:#7c5cff;--cyan:#22d3ee;--lime:#c6ff3d;--warn:#ffb020;--bad:#ff5c7a;
  --grad:linear-gradient(115deg,var(--pink),var(--violet) 55%,var(--cyan));
  --glass:rgba(24,16,48,.62);--r:20px;
  --display:'Bricolage Grotesque',system-ui,sans-serif;--body:'Space Grotesk',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--body);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,textarea,select{font:inherit;color:inherit}
[hidden]{display:none!important}
::selection{background:var(--pink);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#2b2150;border-radius:9px}

/* ambience */
.aurora{position:fixed;inset:0;z-index:-3;overflow:hidden;background:radial-gradient(120% 80% at 50% -10%,#1d0f40,var(--bg) 60%)}
.aurora i{position:absolute;width:55vmax;height:55vmax;border-radius:50%;filter:blur(90px);opacity:.38;animation:drift 22s ease-in-out infinite}
.aurora i:nth-child(1){background:var(--pink);left:-15vmax;top:-10vmax}
.aurora i:nth-child(2){background:var(--violet);right:-20vmax;top:10vmax;animation-delay:-7s;animation-duration:28s}
.aurora i:nth-child(3){background:var(--cyan);left:20vmax;bottom:-30vmax;animation-delay:-13s;opacity:.25}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(8vmax,6vmax) scale(1.15)}66%{transform:translate(-6vmax,10vmax) scale(.92)}}
.grain{position:fixed;inset:-50%;z-index:-2;pointer-events:none;opacity:.07;animation:grain 1.2s steps(6) infinite;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.glow{position:fixed;width:520px;height:520px;left:0;top:0;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(255,78,205,.16),transparent 65%);transform:translate(var(--gx,50vw),var(--gy,30vh));transition:transform .12s ease-out}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:200}

/* nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;padding:12px clamp(14px,3vw,34px);
  background:linear-gradient(to bottom,rgba(11,7,22,.85),rgba(11,7,22,.55));backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:8px;font:800 26px var(--display);letter-spacing:-.03em}
.logo-emoji{display:inline-block;font-size:28px;animation:wobble 4s ease-in-out infinite;transform-origin:50% 70%}
.logo:hover .logo-emoji{animation:spin .8s cubic-bezier(.3,1.6,.5,1)}
.logo-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shine 6s linear infinite}
@keyframes wobble{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg) scale(1.08)}}
@keyframes spin{to{transform:rotate(360deg) scale(1.2)}}
@keyframes shine{to{background-position:200% 0}}
.links{display:flex;gap:4px}
.links a{padding:8px 14px;border-radius:999px;color:var(--mute);font-weight:500;transition:.25s;position:relative}
.links a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.links a.active{color:#fff;background:rgba(124,92,255,.28);box-shadow:inset 0 0 0 1px rgba(124,92,255,.5)}
.pill-new{font:700 10px var(--body);padding:2px 6px;border-radius:99px;background:var(--lime);color:#14100a;margin-left:4px;vertical-align:2px}
.search{flex:1;max-width:340px;margin-left:auto}
.search input{width:100%;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);outline:0;transition:.25s}
.search input:focus{border-color:var(--violet);background:rgba(255,255,255,.1);box-shadow:0 0 0 4px rgba(124,92,255,.2)}
.nav-right{display:flex;align-items:center;gap:10px;position:relative}
.bell{position:relative;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.06);display:grid;place-items:center;font-size:18px;transition:.2s}
.bell:hover{background:rgba(255,255,255,.12);transform:rotate(-12deg)}
.bell b{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;border-radius:9px;background:var(--pink);font:700 11px/18px var(--body);text-align:center;padding:0 4px;animation:pop .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes pop{from{transform:scale(0)}}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:800 15px var(--display);color:#fff;text-transform:uppercase;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.15)}
.avatar.sm{width:24px;height:24px;font-size:11px}
.menu{position:absolute;right:0;top:calc(100% + 10px);min-width:220px;max-height:70vh;overflow:auto;padding:8px;border-radius:16px;background:rgba(20,13,40,.96);border:1px solid var(--line);backdrop-filter:blur(20px);box-shadow:0 30px 80px rgba(0,0,0,.6);animation:drop .25s cubic-bezier(.2,1.2,.4,1);z-index:60}
@keyframes drop{from{opacity:0;transform:translateY(-8px) scale(.96)}}
.menu a,.menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border-radius:10px;color:var(--ink);font-size:14px}
.menu a:hover,.menu button:hover{background:rgba(255,255,255,.08)}
.menu .unread{background:rgba(255,78,205,.1)}
.menu small{color:var(--mute);display:block}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:999px;font-weight:600;transition:transform .2s,box-shadow .25s,background .25s;position:relative;overflow:hidden;white-space:nowrap}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--grad);background-size:160% 100%;color:#fff;box-shadow:0 8px 30px -6px rgba(255,78,205,.55);transition:background-position .5s,transform .2s,box-shadow .25s}
.btn-primary:hover:not(:disabled){background-position:100% 0;transform:translateY(-2px);box-shadow:0 14px 40px -8px rgba(124,92,255,.8)}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%)}
.btn-primary:hover::after{transform:translateX(120%);transition:transform .7s}
.btn-ghost{background:rgba(255,255,255,.07);border:1px solid var(--line)}
.btn-ghost:hover:not(:disabled){background:rgba(255,255,255,.13);transform:translateY(-1px)}
.btn-lg{padding:14px 26px;font-size:17px}.btn-sm{padding:7px 13px;font-size:13px}.btn-block{width:100%}
.btn-danger{color:var(--bad)}
.spacer{flex:1}

/* hero */
.view{animation:viewIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes viewIn{from{opacity:0;transform:translateY(14px)}}
.hero{position:relative;text-align:center;padding:clamp(48px,9vw,110px) 20px clamp(36px,6vw,70px);overflow:hidden}
.eyebrow{display:inline-block;font:600 13px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--lime);padding:6px 14px;border:1px solid rgba(198,255,61,.35);border-radius:99px;background:rgba(198,255,61,.07)}
.hero-title{font:800 clamp(44px,9vw,116px)/.95 var(--display);letter-spacing:-.045em;margin:22px 0 18px}
.hero-title .w{display:inline-block;white-space:nowrap}
.hero-title .ch{display:inline-block;opacity:0;transform:translateY(60%) rotate(8deg);animation:letter .7s cubic-bezier(.2,1.4,.4,1) forwards;animation-delay:calc(var(--i)*35ms + 120ms);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:300% 100%;background-position:calc(var(--i)*-8%) 0}
.hero-title .ch:hover{animation:none;opacity:1;transform:translateY(-8px) rotate(-6deg) scale(1.15);transition:.2s}
@keyframes letter{to{opacity:1;transform:none}}
.hero-sub{max-width:560px;margin:0 auto 30px;color:var(--mute);font-size:19px}
.hero-sub em{color:var(--ink);font-style:normal;background:linear-gradient(transparent 60%,rgba(255,78,205,.5) 60%)}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.float{position:absolute;font-size:clamp(28px,4vw,56px);opacity:.9;animation:floaty 7s ease-in-out infinite;filter:drop-shadow(0 10px 20px rgba(0,0,0,.4));user-select:none}
.float:hover{animation:none;transform:scale(1.4) rotate(20deg);transition:.3s}
.f1{left:8%;top:22%}.f2{right:10%;top:18%;animation-delay:-2s}.f3{left:15%;bottom:12%;animation-delay:-4s}
.f4{right:16%;bottom:16%;animation-delay:-1s}.f5{left:3%;top:60%;animation-delay:-5s}.f6{right:3%;top:52%;animation-delay:-3s}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-22px) rotate(8deg)}}
.ticker{overflow:hidden;border-block:1px solid var(--line);background:rgba(255,255,255,.03);padding:12px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:flex;gap:42px;width:max-content;animation:tick 45s linear infinite;font:700 22px var(--display);color:var(--mute);letter-spacing:-.01em}
.ticker-track span{display:flex;gap:42px;align-items:center}
.ticker-track span::after{content:"✦";color:var(--pink)}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}

/* feed */
.feed-head{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:30px clamp(14px,3vw,34px) 8px;scroll-margin-top:70px}
.filter-banner{flex-basis:100%;display:flex;align-items:center;gap:12px;font:800 clamp(26px,4vw,42px) var(--display);letter-spacing:-.03em}
.filter-banner button{font:600 13px var(--body);padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.1)}
.tabs{display:flex;gap:6px;padding:4px;border-radius:99px;background:rgba(255,255,255,.06)}
.tab{padding:8px 16px;border-radius:99px;font-weight:600;color:var(--mute);transition:.25s}
.tab.active{background:var(--grad);color:#fff;box-shadow:0 6px 20px -6px var(--pink)}
.trend{display:flex;gap:8px;flex-wrap:wrap}
.hash{padding:6px 12px;border-radius:99px;font-size:13px;background:rgba(124,92,255,.15);color:#cfc4ff;border:1px solid rgba(124,92,255,.3);transition:.2s}
.hash:hover{background:var(--violet);color:#fff;transform:translateY(-2px) rotate(-2deg)}
.grid{columns:4 260px;column-gap:18px;padding:16px clamp(14px,3vw,34px) 40px}
.card{break-inside:avoid;margin-bottom:18px;border-radius:var(--r);position:relative;overflow:hidden;cursor:pointer;background:#1a1135;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,30px)) scale(var(--sc,.96));opacity:0;
  transition:transform .25s ease-out,opacity .6s,box-shadow .3s;box-shadow:0 10px 40px -16px rgba(0,0,0,.8)}
.card.in{opacity:1;--ty:0px;--sc:1;transition-delay:calc(var(--i,0)*45ms),calc(var(--i,0)*45ms),0s}
.card.in.tilting{transition-delay:0s}
.card:hover{--sc:1.02;box-shadow:0 30px 70px -20px rgba(124,92,255,.55),0 0 0 1px rgba(255,255,255,.14)}
.card img,.card video{display:block;width:100%;height:auto;background:#1a1135}
.card .shade{position:absolute;inset:auto 0 0;padding:60px 14px 12px;background:linear-gradient(transparent,rgba(8,4,20,.92));transform:translateY(30%);opacity:0;transition:.3s}
.card:hover .shade{transform:none;opacity:1}
.card .cap{font-weight:500;font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px;color:var(--mute)}
.card .meta .spacer{flex:1}
.badge{position:absolute;top:10px;left:10px;padding:4px 9px;border-radius:99px;font:700 11px var(--body);background:rgba(8,4,20,.7);backdrop-filter:blur(6px);display:flex;gap:4px}
.badge.r{left:auto;right:10px}
.heart{color:var(--pink)}
.more{text-align:center;padding:0 0 50px}
.empty{text-align:center;padding:70px 20px}
.empty-emoji{font-size:72px;animation:floaty 4s ease-in-out infinite}
.empty h3{font:800 32px var(--display);margin:8px 0}.empty p{color:var(--mute);margin-bottom:18px}
.skel{break-inside:avoid;margin-bottom:18px;border-radius:var(--r);background:linear-gradient(100deg,#1a1135 30%,#271a4d 50%,#1a1135 70%);background-size:300% 100%;animation:skel 1.3s linear infinite}
@keyframes skel{to{background-position:-300% 0}}

/* studio */
.studio{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:22px;padding:22px clamp(14px,3vw,34px) 40px;align-items:start}
.stage-wrap{border-radius:26px;padding:10px;background:linear-gradient(135deg,rgba(255,78,205,.35),rgba(124,92,255,.3),rgba(34,211,238,.35));position:relative}
.stage{position:relative;border-radius:18px;background:#0e0820;min-height:min(70vh,640px);display:grid;place-items:center;overflow:hidden}
.stage-empty{text-align:center;padding:40px;max-width:420px}
.stage-empty h3{font:800 28px var(--display);margin:18px 0 6px}.stage-empty p{color:var(--mute);margin-bottom:16px}
.orb{width:96px;height:96px;margin:0 auto;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff 0,var(--pink) 25%,var(--violet) 60%,transparent 72%);filter:blur(1px);animation:orb 4s ease-in-out infinite}
@keyframes orb{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.14) translateY(-8px);filter:blur(3px) hue-rotate(40deg)}}
.stage-media{position:relative;display:grid;place-items:center;width:100%;max-height:78vh;overflow:hidden;animation:reveal .8s cubic-bezier(.2,.8,.2,1)}
@keyframes reveal{from{clip-path:inset(0 0 100% 0);filter:blur(20px) saturate(2)}to{clip-path:inset(0);filter:none}}
.stage-media img,.stage-media video{max-width:100%;max-height:78vh;display:block;transition:filter .15s,transform .3s}
.mt{position:absolute;left:0;right:0;text-align:center;font:400 var(--mfs,44px)/1.05 Anton,Impact,sans-serif;color:#fff;text-transform:uppercase;-webkit-text-stroke:calc(var(--mfs,44px)/11) #000;paint-order:stroke fill;letter-spacing:.01em;padding:0 4%;pointer-events:none;word-break:break-word}
.mt.top{top:3%}.mt.bot{bottom:3%}
.loader{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;background:rgba(11,7,22,.82);backdrop-filter:blur(8px);z-index:3;text-align:center;padding:20px}
.loader p{font:700 20px var(--display);max-width:320px;animation:fadeMsg .5s}
.loader small{color:var(--mute);font-variant-numeric:tabular-nums}
@keyframes fadeMsg{from{opacity:0;transform:translateY(6px)}}
.scan{position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 30px 8px rgba(34,211,238,.5);animation:scan 2.2s ease-in-out infinite}
@keyframes scan{0%,100%{top:5%}50%{top:95%}}
.spinner{display:flex;gap:8px}.spinner i{width:16px;height:16px;border-radius:50%;background:var(--grad);animation:bounce 1s ease-in-out infinite}
.spinner i:nth-child(2){animation-delay:.15s}.spinner i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,80%,100%{transform:scale(.5) translateY(0);opacity:.5}40%{transform:scale(1.2) translateY(-14px);opacity:1}}
.stage-bar{display:flex;flex-wrap:wrap;gap:8px;padding:12px 4px 2px;align-items:center}
.history{display:flex;gap:10px;overflow-x:auto;padding:14px 2px}
.history button{flex:none;width:72px;height:72px;border-radius:14px;overflow:hidden;border:2px solid transparent;transition:.2s;position:relative;animation:pop .4s cubic-bezier(.3,1.8,.5,1)}
.history button.on{border-color:var(--pink);transform:translateY(-4px)}
.history img{width:100%;height:100%;object-fit:cover;display:block}
.history .vid{position:absolute;right:4px;bottom:4px;font-size:14px}
.glass{background:var(--glass);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:26px}
.panel{padding:14px 16px 18px;position:sticky;top:78px;max-height:calc(100vh - 92px);overflow:auto}
.ptabs{display:grid;grid-template-columns:repeat(4,1fr);position:relative;padding:4px;background:rgba(255,255,255,.06);border-radius:99px;margin-bottom:14px}
.ptab{position:relative;z-index:1;padding:8px 0;border-radius:99px;font-size:13px;font-weight:600;color:var(--mute);transition:color .25s}
.ptab.active{color:#fff}
.ptab-ink{position:absolute;top:4px;bottom:4px;left:4px;width:calc(25% - 2px);border-radius:99px;background:var(--grad);transition:transform .4s cubic-bezier(.3,1.3,.5,1);box-shadow:0 6px 18px -6px var(--pink)}
.pane{display:flex;flex-direction:column;gap:8px;animation:viewIn .35s}
.lbl{font:600 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-top:6px;display:flex;justify-content:space-between}
.lbl small{text-transform:none;letter-spacing:0;font-weight:400}.lbl output{color:var(--lime)}
textarea,input[type=text],input[type=number],input[type=password]{width:100%;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--line);outline:0;resize:vertical;transition:.2s}
textarea:focus,input[type=text]:focus,input[type=number]:focus,input[type=password]:focus{border-color:var(--violet);box-shadow:0 0 0 4px rgba(124,92,255,.2);background:rgba(255,255,255,.09)}
input[type=range]{width:100%;accent-color:var(--pink);height:24px}
.hint{color:var(--mute);font-size:13px}.hint.split{display:flex;justify-content:space-between;margin-top:-6px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip-btn{padding:7px 12px;border-radius:99px;background:rgba(255,255,255,.07);border:1px solid var(--line);font-size:13px;font-weight:500;transition:.2s}
.chip-btn:hover{background:rgba(255,78,205,.2);border-color:var(--pink);transform:translateY(-2px)}
.ideas,.chips{display:flex;flex-direction:column;gap:6px}
.chips{flex-direction:row;flex-wrap:wrap}
.ideas button{text-align:left;padding:9px 12px;border-radius:12px;background:rgba(124,92,255,.12);border:1px solid rgba(124,92,255,.25);font-size:13px;animation:viewIn .4s backwards;animation-delay:calc(var(--i)*60ms);transition:.2s}
.ideas button:hover{background:rgba(124,92,255,.3);transform:translateX(4px)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.seg button{padding:9px 6px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:12.5px;font-weight:600;transition:.2s;display:flex;flex-direction:column;align-items:center;gap:5px}
.seg button.on{background:rgba(124,92,255,.35);border-color:var(--violet);box-shadow:0 0 20px -4px var(--violet)}
.seg button:hover{transform:translateY(-2px)}
.ar{display:block;border:2px solid currentColor;border-radius:3px}.ar-sq{width:16px;height:16px}.ar-po{width:12px;height:18px}.ar-la{width:20px;height:14px}.ar-wi{width:24px;height:12px}
.adv{border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.adv summary{cursor:pointer;font-weight:600;color:var(--mute);font-size:14px}
.adv[open] summary{margin-bottom:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sliders{display:grid;gap:2px}
.credits{margin-top:14px;font-size:12px;color:var(--mute);text-align:center}
.credits b{color:var(--lime)}

/* modal */
.modal-root{position:fixed;inset:0;z-index:100;pointer-events:none}
.backdrop{position:absolute;inset:0;background:rgba(6,3,14,.78);backdrop-filter:blur(10px);pointer-events:auto;animation:fade .3s;display:grid;place-items:center;padding:clamp(8px,2vw,28px);overflow:auto}
@keyframes fade{from{opacity:0}}
.modal{position:relative;width:min(1100px,100%);max-height:calc(100vh - 30px);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr);background:#140c2b;border:1px solid var(--line);border-radius:26px;overflow:hidden;animation:zoom .45s cubic-bezier(.2,1.2,.4,1);box-shadow:0 50px 120px rgba(0,0,0,.7)}
.modal.narrow{grid-template-columns:1fr;width:min(420px,100%);padding:26px}
.modal.post{grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr)}
@keyframes zoom{from{opacity:0;transform:scale(.86) translateY(30px)}}
.modal .x{position:absolute;top:12px;right:12px;z-index:5;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.5);font-size:18px;transition:.2s}
.modal .x:hover{background:var(--pink);transform:rotate(90deg)}
.m-media{position:relative;background:#07030f;display:grid;place-items:center;min-height:300px;overflow:hidden}
.m-media .pic{position:relative;line-height:0;max-width:100%}
.m-media img,.m-media video{max-width:100%;max-height:calc(100vh - 60px);display:block}
.m-side{display:flex;flex-direction:column;padding:22px;gap:12px;min-height:0;max-height:calc(100vh - 30px);overflow:auto}
.m-author{display:flex;align-items:center;gap:10px;font-weight:600}
.m-author small{display:block;color:var(--mute);font-weight:400}
.m-cap{font:600 20px/1.3 var(--display)}
.m-prompt{font-size:13px;color:var(--mute);padding:10px 12px;border-left:3px solid var(--violet);background:rgba(124,92,255,.08);border-radius:0 10px 10px 0}
.m-actions{display:flex;gap:8px;flex-wrap:wrap}
.like.on{background:rgba(255,78,205,.25);border-color:var(--pink)}
.like.on .hrt{animation:beat .5s}
@keyframes beat{40%{transform:scale(1.7)}}
.comments{display:flex;flex-direction:column;gap:10px;flex:1;min-height:60px}
.comment{display:flex;gap:9px;font-size:14px;animation:viewIn .3s}
.comment b{font-weight:600}
.comment-form{display:flex;gap:8px}
.comment-form input{flex:1}
.tagged-list{display:flex;flex-wrap:wrap;gap:6px}
.tagged-list a{font-size:13px;padding:4px 10px;border-radius:99px;background:rgba(34,211,238,.14);color:#9eefff;border:1px solid rgba(34,211,238,.3)}
.pin{position:absolute;transform:translate(-50%,-50%);z-index:2;line-height:1}
.pin i{display:block;width:18px;height:18px;border-radius:50%;background:var(--cyan);border:3px solid #fff;box-shadow:0 0 0 0 rgba(34,211,238,.7);animation:ping 1.8s infinite}
@keyframes ping{70%{box-shadow:0 0 0 14px rgba(34,211,238,0)}100%{box-shadow:0 0 0 0 rgba(34,211,238,0)}}
.pin span{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);padding:4px 10px;border-radius:99px;background:rgba(8,4,20,.92);font:600 12px var(--body);white-space:nowrap;color:#fff;animation:viewIn .3s;line-height:1.4}
.pin.edit{cursor:pointer}.pin.edit:hover i{background:var(--bad)}
.pins-off .pin{display:none}
.tagbox{position:absolute;z-index:4;width:220px;padding:8px;border-radius:14px;background:rgba(20,13,40,.97);border:1px solid var(--violet);box-shadow:0 20px 60px rgba(0,0,0,.7);animation:drop .2s;line-height:1.4}
.tagbox input{padding:8px 10px;font-size:14px}
.tagbox .sug{display:flex;flex-direction:column;margin-top:6px}
.tagbox .sug button{display:flex;gap:8px;align-items:center;padding:7px 8px;border-radius:9px;text-align:left;font-size:14px}
.tagbox .sug button:hover{background:rgba(255,255,255,.1)}
.crosshair{cursor:crosshair}
.modal .tabs-title{font:800 26px var(--display);letter-spacing:-.02em}
.modal form{display:flex;flex-direction:column;gap:10px}
.cap-sugs{display:flex;flex-direction:column;gap:6px}
.cap-sugs button{text-align:left;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.06);font-size:14px;transition:.2s;animation:viewIn .3s backwards;animation-delay:calc(var(--i)*60ms)}
.cap-sugs button:hover{background:rgba(255,78,205,.2)}
.seg2{display:flex;gap:6px;margin-bottom:6px}
.seg2 button{flex:1;padding:9px;border-radius:99px;background:rgba(255,255,255,.06);font-weight:600}
.seg2 button.on{background:var(--grad)}
.err{color:var(--bad);font-size:13px;min-height:18px}

/* toasts + footer */
.toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{padding:12px 20px;border-radius:99px;background:rgba(24,16,48,.96);border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.6);animation:toast .5s cubic-bezier(.2,1.5,.4,1);font-weight:500;max-width:92vw}
.toast.err{border-color:var(--bad)}.toast.ok{border-color:var(--lime)}
.toast.out{animation:toastOut .3s forwards}
@keyframes toast{from{opacity:0;transform:translateY(30px) scale(.8)}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px) scale(.95)}}
.foot{text-align:center;color:var(--mute);font-size:13px;padding:30px 20px 40px;border-top:1px solid var(--line)}

@media(max-width:960px){
  .studio{grid-template-columns:1fr}.panel{position:static;max-height:none}
  .search{display:none}.links a{padding:8px 10px}
  .modal,.modal.post{grid-template-columns:1fr;max-height:none}.m-side{max-height:none}
  .m-media img,.m-media video{max-height:60vh}
}
@media(max-width:520px){.nav{gap:8px}.logo-text{display:none}.hero-sub{font-size:16px}.grid{columns:2 150px;column-gap:10px}.card{margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}