/* site.css — shared chrome for the marketing pages (landing + gallery).
   Reuses the editor's token palette so the site and the app read as one
   product. Dark-first; preview "skins" set their own surface colors. */
:root{color-scheme:dark;
--bg:#0e0d15;--bg-2:#1a1830;--chrome:#12111b;--panel:#171622;--panel2:#201f2d;--panel-3:#252333;
--ink:#e9e7f5;--ink-2:#d8d5e7;--ink-3:#bab6cf;--muted:#9290aa;--muted-2:#77738c;
--lav:#c8bfff;--lav-2:#b2a8ff;
--line:#2c2a3e;--line-2:#3a374c;--line-p:#4a4079;
--purple:#8b75ff;--purple-2:#7b6cf2;--purple-d:#8b75ff22;
--mint:#62e0bb;--mint-dim:#2e5a4b;--mint-bg:#1c2b26;--on-mint:#10131a;
--gold:#ffd36e;--paper:#faf9ff;--red:#ff9a8a;
--maxw:1120px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 'DM Sans',system-ui,sans-serif;
background-image:radial-gradient(1100px 500px at 75% -10%,#221f45 0,transparent 60%),radial-gradient(900px 480px at 10% 30%,#15203a 0,transparent 55%)}
a{color:var(--lav);text-decoration:none}
a:hover{color:#fff}
button{font:inherit;cursor:pointer;color:inherit}
code,pre{font:12.5px/1.6 'DM Mono',ui-monospace,monospace}
h1,h2,h3{letter-spacing:-.02em;line-height:1.12;margin:0}
img,svg{max-width:100%}

/* ---- top nav ---- */
.site-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:26px;
padding:14px 28px;border-bottom:1px solid var(--line);
background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px)}
.site-nav .brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;color:var(--ink)}
.site-nav .brand b{color:var(--lav);font-size:21px;line-height:0}
.site-nav .links{display:flex;gap:22px;font-size:13.5px}
.site-nav .links a{color:var(--muted)}
.site-nav .links a:hover{color:var(--ink)}
.site-nav .links a[aria-current]{color:var(--ink);font-weight:600}
.site-nav .cta{margin-left:auto}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:9px;padding:11px 18px;
font-weight:600;font-size:14px;border:1px solid var(--line-2);background:var(--panel2);color:var(--ink)}
.btn:hover{border-color:var(--purple);color:#fff;background:var(--panel-3)}
.btn.primary{background:var(--purple-2);border-color:var(--purple-2);color:#fff}
.btn.primary:hover{background:var(--purple);border-color:var(--purple)}
.btn.ghost{background:transparent}
.btn.small{padding:7px 12px;font-size:12.5px;border-radius:7px}

/* ---- layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
section{padding:84px 0}
.eyebrow{font:11px 'DM Mono';text-transform:uppercase;letter-spacing:2px;color:var(--purple);margin-bottom:14px}
.h-xl{font-size:clamp(34px,5.4vw,58px);font-weight:800}
.h-lg{font-size:clamp(26px,3.4vw,38px);font-weight:750}
.sub{color:var(--muted);font-size:clamp(15px,1.7vw,18px);max-width:640px}

/* ---- hero ---- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:96px 0 72px}
.hero .cta-row{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.hero .note{margin-top:16px;font-size:12.5px;color:var(--muted-2)}
.hero .note b{color:var(--mint);font-weight:600}
.stage-card{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;
background:linear-gradient(160deg,#faf9ff,#e9e6f6);box-shadow:0 30px 80px #0007,0 0 0 1px #ffffff10 inset}
.stage-card .stage-hint{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;
align-items:center;padding:10px 14px;font:11px 'DM Mono';color:#4a4464;background:linear-gradient(transparent,#faf9ffd9 40%)}
.stage-card .stage-hint i{font-style:normal;color:#7b6cf2}
.hero-mount{aspect-ratio:5/4;display:grid;place-items:center;cursor:pointer}
.hero-mount svg{width:100%;height:100%}

/* ---- problem/solution compare ---- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.compare>div{padding:30px 32px}
.compare .old{background:var(--panel);border-right:1px solid var(--line)}
.compare .new{background:linear-gradient(150deg,#1e1a3a,#171624)}
.compare h3{font-size:13px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted-2);margin-bottom:18px;font-family:'DM Mono'}
.compare .new h3{color:var(--mint)}
.compare ul{list-style:none;margin:0;padding:0;display:grid;gap:13px;font-size:14px}
.compare li{display:flex;gap:10px;color:var(--ink-3)}
.compare .new li{color:var(--ink-2)}
.compare li::before{content:'✕';color:var(--red);font-size:12px;margin-top:2px}
.compare .new li::before{content:'✓';color:var(--mint)}

/* ---- bento grid ---- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.bento .cell{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;min-height:150px;
display:flex;flex-direction:column;gap:8px;transition:border-color .15s,transform .15s}
.bento .cell:hover{border-color:var(--line-p);transform:translateY(-2px)}
.bento .cell.wide{grid-column:span 4}.bento .cell.mid{grid-column:span 3}.bento .cell.sm{grid-column:span 2}
.bento .cell h3{font-size:16.5px}
.bento .cell p{margin:0;color:var(--muted);font-size:13.5px}
.bento .cell .ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:16px;
background:var(--purple-d);color:var(--lav);margin-bottom:6px}
.bento .cell code{color:var(--mint);background:#0d0c14;padding:2px 6px;border-radius:5px;font-size:11.5px}

/* ---- code strip ---- */
.code-strip{border:1px solid var(--line);border-radius:14px;background:#0b0a12;overflow:hidden}
.code-strip .bar{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line);
font:11px 'DM Mono';color:var(--muted)}
.code-strip .bar i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.code-strip pre{margin:0;padding:20px 24px;color:var(--ink-3);overflow:auto}
.code-strip .k{color:var(--purple)}.code-strip .s{color:var(--mint)}.code-strip .c{color:var(--muted-2)}
.code-strip .f{color:var(--gold)}

/* ---- quotes ---- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.quote{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;font-size:13.5px;color:var(--ink-3)}
.quote footer{margin-top:14px;font:11px 'DM Mono';color:var(--muted-2)}

/* ---- final cta / footer ---- */
.final{text-align:center;padding:96px 0}
.final .sub{margin:16px auto 0}
.site-footer{border-top:1px solid var(--line);padding:34px 0;color:var(--muted-2);font-size:12.5px}
.site-footer .wrap{display:flex;gap:26px;align-items:center}
.site-footer .spacer{flex:1}

/* ---- gallery ---- */
.gal-head{padding:64px 0 30px}
.chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px}
.chip{border:1px solid var(--line-2);background:var(--panel);border-radius:20px;padding:7px 15px;font-size:12.5px;color:var(--muted)}
.chip:hover{color:var(--ink);border-color:var(--purple)}
.chip.on{background:var(--purple-d);border-color:var(--purple);color:var(--lav)}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;padding:10px 0 90px}
.gal-card{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:var(--panel);cursor:pointer;
transition:border-color .15s,transform .15s,box-shadow .15s;text-align:left;padding:0}
.gal-card:hover{border-color:var(--purple);transform:translateY(-3px);box-shadow:0 16px 40px #0006}
.gal-card .thumb{aspect-ratio:5/4;background:linear-gradient(160deg,#faf9ff,#e9e6f6);display:grid;place-items:center;position:relative}
.gal-card .thumb svg{width:100%;height:100%}
.gal-card .thumb .live{position:absolute;top:10px;right:10px;font:9.5px 'DM Mono';letter-spacing:.8px;
background:#10131ad9;color:var(--mint);padding:3px 8px;border-radius:11px}
.gal-card .meta{padding:14px 16px 16px}
.gal-card .meta h3{font-size:15px;margin-bottom:4px}
.gal-card .meta p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.45}
.gal-card .meta .cat{display:inline-block;margin-top:10px;font:10px 'DM Mono';text-transform:uppercase;letter-spacing:1px;
color:var(--purple);border:1px solid var(--line-p);border-radius:11px;padding:2px 8px}
.gal-sub{border-top:1px solid var(--line);padding-top:44px}
.gal-sub-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.gal-sub .h-md{font-size:clamp(19px,2.2vw,26px);font-weight:700;margin:0}
.gal-sub .gal-grid{padding-bottom:56px}
.gal-card .meta .tags{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;align-items:center}
.gal-card .meta .tags .cat{margin-top:0}
.gal-card .meta .lvl{font:10px 'DM Mono';text-transform:uppercase;letter-spacing:1px;border-radius:11px;padding:2px 8px}
.lvl-starter{color:var(--mint);border:1px solid var(--mint-dim)}
.lvl-builder{color:var(--lav);border:1px solid var(--line-p)}
.lvl-advanced{color:var(--gold);border:1px solid var(--gold)}
.gal-card .meta .start{font:10px 'DM Mono';letter-spacing:.8px;text-transform:uppercase;
color:var(--on-mint);background:var(--mint);border-radius:11px;padding:2px 8px}
.gal-card .meta .made{font:10px 'DM Mono';letter-spacing:.8px;text-transform:uppercase;
color:var(--lav);background:#8b75ff1f;border:1px solid #8b75ff55;border-radius:11px;padding:2px 8px}

/* ---- detail modal ---- */
.gal-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:28px;
background:#080710c9;backdrop-filter:blur(8px)}
.gal-modal[hidden]{display:none}
.gal-dialog{width:min(1060px,96vw);max-height:92vh;overflow:auto;background:var(--bg-2);
border:1px solid var(--line-2);border-radius:18px;display:grid;grid-template-columns:1.25fr .75fr}
.gal-stage{display:flex;flex-direction:column;min-width:0}
.skin-bar{display:flex;gap:8px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.skin-bar .lbl{font:10px 'DM Mono';text-transform:uppercase;letter-spacing:1px;color:var(--muted-2);margin-right:4px}
.skin-btn{border:1px solid var(--line-2);background:var(--panel);border-radius:7px;padding:6px 11px;font-size:11.5px;color:var(--muted)}
.skin-btn:hover{color:var(--ink);border-color:var(--purple)}
.skin-btn.on{background:var(--purple-d);border-color:var(--purple);color:var(--lav)}
.preview-zone{flex:1;display:grid;place-items:center;padding:28px;min-height:380px;transition:background .2s}
.preview-zone.light{background:#eceaf4}.preview-zone.dark{background:#0d0c14}
.preview-zone.grid{background-color:#14131e;background-image:radial-gradient(var(--line-2) 1px,transparent 1px);background-size:18px 18px}
.device{transition:all .2s;display:grid;place-items:center}
.device svg{width:100%;height:100%;display:block}
.device.iso{width:min(560px,100%);aspect-ratio:5/4}
.device.desktop{width:min(560px,100%);aspect-ratio:5/4;border-radius:0 0 12px 12px;overflow:hidden;
border:1px solid var(--line-2);border-top:0;box-shadow:0 18px 50px #0008;position:relative}
.device.desktop::before{content:'';position:absolute;inset:0 0 auto 0;height:26px;
background:linear-gradient(#26233a,#1d1b2e);border-bottom:1px solid var(--line-2)}
.device.desktop::after{content:'● ● ●';position:absolute;top:6px;left:12px;font-size:8px;letter-spacing:3px;color:var(--muted-2)}
.device.desktop svg{margin-top:26px;height:calc(100% - 26px)}
.device.mobile{width:230px;aspect-ratio:9/18.5;border-radius:34px;border:7px solid #26233a;overflow:hidden;
box-shadow:0 18px 50px #0009;position:relative;background:#faf9ff}
.device.mobile svg{height:100%}
.gal-side{border-left:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:18px;min-width:250px}
.gal-side h2{font-size:20px}
.gal-side .blurb{color:var(--muted);font-size:13px;margin:0}
.method-list{display:flex;flex-direction:column;gap:8px}
.method-btn{display:flex;align-items:center;gap:9px;border:1px solid var(--line-2);background:var(--panel);
border-radius:8px;padding:9px 12px;font:12.5px 'DM Mono';color:var(--ink-2);text-align:left}
.method-btn:hover{border-color:var(--mint);color:#fff}
.method-btn .dot{width:6px;height:6px;border-radius:50%;background:var(--mint);flex:none}
.method-btn kbd{margin-left:auto;font:10px 'DM Mono';color:var(--muted-2)}
.gal-close{position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:9px;border:1px solid var(--line-2);
background:var(--panel);color:var(--muted);font-size:16px}
.gal-close:hover{color:#fff;border-color:var(--purple)}
.gal-dialog{position:relative}
.gal-side .sec-lbl{font:10px 'DM Mono';text-transform:uppercase;letter-spacing:1.2px;color:var(--muted-2)}
.gal-side .remix{margin-top:auto;display:flex;flex-direction:column;gap:10px}

/* ---- char studio: mini world stages + AI director ---- */
.wmini{position:relative;width:100%;height:100%;overflow:hidden;
background:linear-gradient(180deg,transparent 62%,#00000014 62.5%,#0000000a 100%)}
.wmini-ent{position:absolute;transform:translate(-50%,-100%);display:grid;place-items:end center}
.wmini-ent svg{width:100%;display:block;transform:scaleX(var(--face,1));transition:transform .25s}
.wmini-ent.moving svg{animation:mf-wgait .34s ease-in-out infinite}
@keyframes mf-wgait{
  0%,100%{transform:scaleX(var(--face,1)) translateY(0) rotate(-1.4deg)}
  50%{transform:scaleX(var(--face,1)) translateY(-4%) rotate(1.4deg)}
}
/* single-scene item stage — the .stage-host wrapper lets loco methods carry
   the character across the stage (travelStage in chars-preview.js) */
.stage-host{width:100%;height:100%;display:grid;place-items:center;will-change:transform}
.stage-host.moving svg{animation:mf-wgait .34s ease-in-out infinite}
.wstage{position:relative;width:min(620px,100%);aspect-ratio:16/9;border-radius:12px;overflow:hidden;
border:1px solid var(--line-2);background:linear-gradient(180deg,#e8ecf7 55%,#dfe5d8 55.5%,#d6dcc9 100%)}
.preview-zone.dark .wstage{background:linear-gradient(180deg,#1a1830 55%,#141826 55.5%,#10141f 100%)}
.preview-zone.grid .wstage{background-color:#14131e}
.wstage .wmini-ent{filter:drop-shadow(0 8px 10px #0002)}
.wmini-ent.draggable{cursor:grab;touch-action:none}
.wmini-ent.draggable:active{cursor:grabbing}
.wmini-hint{position:absolute;left:10px;bottom:8px;font:10px 'DM Mono';letter-spacing:.4px;
color:var(--muted);background:#ffffffcc;border:1px solid var(--line-2);border-radius:9px;
padding:3px 8px;pointer-events:none;backdrop-filter:blur(3px)}
.preview-zone.dark .wmini-hint{color:#cfc9e8;background:#1c1933cc;border-color:#ffffff1f}
.device .wstage{width:100%;height:100%;aspect-ratio:auto}
.gal-card .thumb .wmini-ent svg{max-height:130px}
.sim-say{position:absolute;left:50%;bottom:104%;transform:translateX(-50%);white-space:nowrap;
background:#fff;color:#241f3d;font:600 11.5px 'DM Sans';padding:5px 10px;border-radius:11px;
border:1.5px solid #241f3d22;box-shadow:0 6px 16px #0003;opacity:1;transition:opacity .35s,translate .35s;pointer-events:none;z-index:5}
.sim-say.out{opacity:0;translate:0 -6px}
.sim-badge{display:inline-block;margin-left:8px;font:9px 'DM Mono';letter-spacing:.6px;text-transform:uppercase;
color:var(--gold);border:1px solid #ffd36e55;border-radius:9px;padding:1px 7px;vertical-align:1px}
.sim-btn{display:block;width:100%;text-align:left;border:1px solid var(--line-2);background:var(--panel);
border-radius:10px;padding:10px 12px;margin-top:8px}
.sim-btn:hover{border-color:var(--gold)}
.sim-btn .sim-thought{display:block;font-size:11.5px;color:var(--muted);font-style:italic;line-height:1.4}
.sim-btn .sim-label{display:block;margin-top:5px;font:11.5px 'DM Mono';color:var(--gold)}
.sim-note{margin:0 0 4px;font-size:11.5px;color:var(--muted-2);line-height:1.45}
.sim-status{margin-top:8px;font:11px 'DM Mono';color:var(--mint)}
.sim-cmdrow{display:flex;gap:7px;margin-top:8px}
.sim-cmd{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line-2);color:var(--ink);
border-radius:9px;padding:8px 10px;font:12px 'DM Sans';outline:none}
.sim-cmd:focus{border-color:var(--gold)}
.sim-go{border:1px solid var(--line-2);background:var(--panel);color:var(--gold);border-radius:9px;
padding:8px 12px;font:12px 'DM Mono';cursor:pointer}
.sim-go:hover{border-color:var(--gold)}
.sim-direct{border-color:#8b75ff66;background:linear-gradient(180deg,#8b75ff14,transparent)}
.ent-group{margin-bottom:14px}
.ent-name{font:11px 'DM Mono';letter-spacing:.8px;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.ent-name em{font-style:normal;color:var(--muted-2);text-transform:none}

@media (max-width:880px){
  .hero{grid-template-columns:1fr;padding:60px 0 50px;gap:36px}
  .compare{grid-template-columns:1fr}.compare .old{border-right:0;border-bottom:1px solid var(--line)}
  .bento .cell.wide,.bento .cell.mid,.bento .cell.sm{grid-column:span 6}
  .quotes{grid-template-columns:1fr}
  .gal-dialog{grid-template-columns:1fr;max-height:94vh}
  .gal-side{border-left:0;border-top:1px solid var(--line)}
  .site-nav .links{display:none}
}

/* Share popover — anchored mini card (gallery modal + item pages) */
.share-pop{position:fixed;min-width:190px;padding:12px;border:1px solid var(--line-2);
  border-radius:12px;background:var(--panel2);box-shadow:0 18px 50px rgba(0,0,0,.5)}
.share-pop-lbl{font:10px 'DM Mono';text-transform:uppercase;letter-spacing:1.2px;color:var(--muted-2);margin-bottom:8px}
.share-pop-lbl.sub{margin:12px 0 7px;color:var(--muted)}
.share-copy,.share-m{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);
  background:var(--panel);color:var(--ink-2);border-radius:8px;padding:7px 11px;font-size:12.5px;
  font-family:inherit;cursor:pointer;transition:border-color .15s,color .15s}
.share-copy{width:100%;justify-content:center}
.share-copy:hover,.share-m:hover{border-color:var(--mint);color:#fff}
.share-copy.copied,.share-m.copied{border-color:var(--mint);color:var(--mint)}
.share-methods{display:flex;gap:6px;flex-wrap:wrap}
.share-m{font-family:'DM Mono',monospace;font-size:11px;padding:5px 9px}

/* Asset card quick actions — ↗ share / ⬇ .svg / ⬦ export bundle */
.asset-acts{display:flex;gap:6px;margin-top:11px}
.a-act{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  border:1px solid var(--line-2);background:var(--panel);color:var(--muted);border-radius:7px;
  padding:6px 8px;font-size:11px;font-family:inherit;cursor:pointer;transition:border-color .15s,color .15s}
.a-act:hover{border-color:var(--mint);color:#fff}
/* export-bundle popover (shares the .share-pop chrome) */
.pack-plats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.pack-plat{border:1px solid var(--line-2);background:var(--panel);color:var(--muted);
  border-radius:8px;padding:5px 10px;font:11px 'DM Mono',monospace;cursor:pointer;transition:border-color .15s,color .15s}
.pack-plat:hover{color:var(--ink)}
.pack-plat.on{border-color:var(--mint);color:var(--mint)}
.pack-plat.on::before{content:'✓ '}
.pack-note{font:10px 'DM Mono',monospace;color:var(--muted-2);margin-top:8px;text-align:center}

/* Landing hero — gallery-item-style demo (methods + share + export row) */
.hero-item{display:flex;flex-direction:column;gap:12px;min-width:0}
.hero-panel{display:flex;flex-direction:column;gap:10px}
.hero-methods{display:flex;flex-direction:column;gap:6px}
.hm-lbl{font:10px 'DM Mono';text-transform:uppercase;letter-spacing:1.2px;color:var(--muted-2)}
.hm-btn{display:flex;align-items:center;gap:9px;border:1px solid var(--line-2);background:var(--panel);
  color:var(--ink-2);border-radius:8px;padding:8px 12px;font:12px 'DM Mono';cursor:pointer;
  font-family:inherit;text-align:left;transition:border-color .15s,color .15s}
.hm-btn:hover{border-color:var(--mint);color:#fff}
.hm-btn .dot{width:6px;height:6px;border-radius:50%;background:var(--mint);flex:none}
.hero-actions{display:flex;gap:8px}
.ha-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line-2);background:transparent;color:var(--muted);border-radius:8px;
  padding:7px 10px;font-size:12px;font-family:inherit;text-decoration:none;cursor:pointer;
  transition:border-color .15s,color .15s}
.ha-btn:hover{border-color:var(--purple);color:#fff}
.hero-gallink{font:11px 'DM Mono';color:var(--muted-2);text-decoration:none;letter-spacing:.4px;text-align:center}
.hero-gallink:hover{color:var(--lav)}

/* ---- site-nav: Studios dropdown (built by js/site/nav.js) ---- */
.studios-menu{position:relative}
.studios-btn{background:none;border:0;color:var(--muted);font:inherit;font-size:13.5px;cursor:pointer;padding:0}
.studios-btn:hover{color:var(--ink)}
.studios-btn[aria-current]{color:var(--ink);font-weight:600}
.studios-btn .caret{font-size:9px;opacity:.7}
.studios-btn[aria-expanded="true"]{color:var(--ink)}
.studios-btn[aria-expanded="true"] .caret{display:inline-block;transform:rotate(180deg)}
.studios-pop{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);z-index:60;
  min-width:280px;background:var(--panel);border:1px solid var(--line-2);border-radius:14px;
  padding:8px;box-shadow:0 18px 50px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:2px}
.studios-pop[hidden]{display:none}
.studios-pop::before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:11px;height:11px;background:var(--panel);border-left:1px solid var(--line-2);border-top:1px solid var(--line-2)}
.studio-card{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;text-decoration:none}
.studio-card:hover{background:var(--panel-3)}
.studio-ico{font-size:20px;width:26px;text-align:center}
.studio-tx{display:flex;flex-direction:column;gap:1px}
.studio-tx b{color:var(--ink);font-size:13px;font-weight:600}
.studio-tx b sup{color:#f2b84b;font-size:8px}
.studio-tx em{color:var(--muted);font-size:11.5px;font-style:normal}

/* ---- studio launcher modal (Start Animating Free → pick a studio) ---- */
.launch-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(6,9,16,.66);backdrop-filter:blur(4px)}
.launch-modal[hidden]{display:none}
.launch-card{position:relative;width:min(640px,92vw);background:var(--panel);border:1px solid var(--line-2);
  border-radius:18px;padding:30px 30px 22px;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.launch-card h2{margin:0 0 20px;font-size:20px;letter-spacing:-.3px;color:var(--ink)}
.launch-x{position:absolute;top:14px;right:14px;background:none;border:0;color:var(--muted);font-size:14px;cursor:pointer}
.launch-x:hover{color:var(--ink)}
.launch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.launch-studio{display:flex;flex-direction:column;gap:8px;padding:18px 16px;border:1px solid var(--line-2);
  border-radius:12px;text-decoration:none;background:var(--panel-3);transition:border-color .15s,transform .15s}
.launch-studio:hover{border-color:var(--purple);transform:translateY(-2px)}
.launch-ico{font-size:26px}
.launch-studio b{color:var(--ink);font-size:14px}
.launch-studio em{color:var(--muted);font-size:11.5px;font-style:normal;line-height:1.45}
.launch-alt{margin-top:18px;font-size:12.5px;color:var(--muted);text-align:center}
.launch-alt a{color:var(--lav)}
.launch-note{margin-top:10px;text-align:center;font:10.5px 'DM Mono';color:var(--muted-2);letter-spacing:.3px}
@media(max-width:620px){.launch-grid{grid-template-columns:1fr}}

/* Gumroad overlay: gumroad.js injects branded .gumroad-button styles —
   keep our look (CSP frame-src allows the checkout iframe). */
a.gumroad-button{display:inline!important;background:none!important;border:none!important;
  padding:0!important;color:var(--lav)!important;font:inherit!important;height:auto!important;line-height:inherit!important}
a.gumroad-button.btn{display:inline-flex!important;align-items:center;gap:8px;border-radius:9px!important;
  padding:11px 18px!important;border:1px solid var(--line-2)!important;color:var(--ink)!important;background:var(--panel-2)!important}
a.gumroad-button.btn:hover{border-color:var(--purple)!important;color:#fff!important;background:var(--panel-3)!important}