/* THE VIGNETTES' LOOK (hero-vignettes.js): Studio's cursor, and the eight-plus moments of the hero studies' wall and carousel. Shared by
   hero-studies.html and the working page (concept-open-hero.html), which uses the cursor and the turn between passes. */
/* ── THE VIGNETTES (hero-vignettes.js): eight moments of Studio, each in Studio's own chrome ── */
.vg{position:relative;overflow:hidden;border-radius:18px;background:#141416;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);color:#ececef;font:13px/1.3 var(--eden-text-ui-family)}
.vg p,.vg h6{margin:0}
.vg::after{content:"";position:absolute;z-index:10;inset:0;border-radius:inherit;background:#141416;opacity:0;pointer-events:none;transition:opacity .3s}
.vg.is-turn::after{opacity:1}
.vg-fill{position:absolute;inset:0}
.vg-fill--pic{background:center/cover no-repeat}
.vg-cur{position:absolute;z-index:9;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#716cff;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 1px 6px rgba(0,0,0,.25);transition:left .62s cubic-bezier(.5,0,.2,1),top .62s cubic-bezier(.5,0,.2,1)}
.vg-cur.is-drag{transition:none}
.vg-cur.is-flip::after{left:auto;right:10px}
.vg-cur::after{content:attr(data-who);position:absolute;left:10px;top:8px;padding:2px 7px;border-radius:9px;background:rgba(15,16,17,.86);color:#f7f8f8;font:500 11px/16px var(--eden-text-ui-family);white-space:nowrap;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.vg-cur.is-press::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px solid #716cff;animation:vg-ping .5s ease-out forwards}
@keyframes vg-ping{from{transform:scale(.4);opacity:1}to{transform:scale(1.7);opacity:0}}
.vg-sel{outline:1.5px solid #716cff;outline-offset:3px}
.vg-tag{position:absolute;padding:3px 8px;border-radius:6px;background:#716cff;color:#fff;font:600 10.5px/1.3 var(--eden-text-ui-family);white-space:nowrap}
.vg-tip{position:absolute;z-index:8;margin:-36px 0 0 14px;padding:3px 8px;border-radius:6px;background:rgba(15,16,17,.86);font:600 11px/1.4 var(--eden-text-ui-family);white-space:nowrap;opacity:0;transition:opacity .2s}
.vg-tip.on{opacity:1}
.vg-canvas{position:absolute;inset:0;background:#101012}
.vg-canvas--dots,.vg-boards{background:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.3px) 0 0/16px 16px,#101012}
.vg-bar{display:block;height:5px;border-radius:3px;background:#3a3a40}
.vg-bar--h{height:9px;background:#5c5c64}
.w20{width:20%}.w30{width:30%}.w50{width:50%}.w70{width:70%}.w90{width:90%}
.vg-pill{display:block;width:40%;height:12px;margin-top:4px;border-radius:999px;background:#ececef}
/* image effects */
.vg-chips{position:absolute;z-index:2;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:3px;padding:4px;border-radius:11px;background:rgba(20,20,22,.88);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);white-space:nowrap}
.vg-chips b{padding:5px 9px;border-radius:7px;font:500 11.5px/1.2 var(--eden-text-ui-family);color:#8b8c92;transition:background .2s,color .2s}
.vg-chips b.on{background:#2c2c32;color:#ececef}
/* component editing */
.vg--card .vg-canvas{--vg-r:8px;--vg-p:8px}
.vg-card{display:flex;flex-direction:column;gap:6px;padding:var(--vg-p);border-radius:var(--vg-r);background:#fff;color:#18181b}
.vg-card i{display:block;aspect-ratio:1;border-radius:calc(var(--vg-r) * .6);background:#ececef center/cover no-repeat}
.vg-card p{display:flex;justify-content:space-between;gap:6px;font:600 11px/1.2 var(--eden-text-ui-family)}
.vg-card s{display:block;height:24px;border-radius:calc(var(--vg-r) * .6);background:#18181b;color:#fff;font:600 10px/24px var(--eden-text-ui-family);text-align:center;text-decoration:none}
.vg-master{position:absolute;left:7%;top:15%;width:36%}
.vg-master .vg-tag{left:0;top:-25px}
.vg-copies{position:absolute;left:51%;bottom:7%;width:43%;display:flex;gap:8px}
.vg-copies .vg-card{flex:1;min-width:0;gap:4px;padding:calc(var(--vg-p) * .7)}
.vg-copies .vg-card p{font-size:8.5px} .vg-copies .vg-card s{height:16px;font-size:7.5px;line-height:16px}
.vg-rail{position:absolute;right:6%;top:8%;width:43%;padding:9px;border-radius:12px;background:#18181b;box-shadow:0 20px 40px -18px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.07)}
.vg-rail h6{margin:0 0 6px;font:600 11.5px/1.3 var(--eden-text-ui-family)}
.vg-rail div{display:flex;justify-content:space-between;margin-top:5px;padding:6px 8px;border-radius:7px;background:#232327;color:#a6a7ab;font-size:11px;transition:box-shadow .2s}
.vg-rail div.on{box-shadow:inset 0 0 0 1.5px #716cff}
.vg-rail em{font-style:normal;color:#ececef}
/* the agent checks its work */
.vg-app{position:absolute;inset:0;display:flex;flex-direction:column}
.vg-app-h{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06)}
.vg-app-h span{width:8px;height:8px;border-radius:50%;background:#2c2c32}
.vg-app-h b{margin-left:6px;font:600 11.5px/1 var(--eden-text-ui-family);color:#8b8c92}
.vg-log{flex:1;display:flex;flex-direction:column;gap:10px;padding:14px}
.vg-q{align-self:flex-end;max-width:85%;min-height:32px;padding:8px 11px;border-radius:12px;background:#26262b;font-size:12.5px;opacity:0;transition:opacity .25s}
.vg-q.on{opacity:1}
.vg-run{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:9px 10px;border-radius:10px;background:#1b1b1f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);font-size:11.5px;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.vg-run.on{opacity:1;transform:none}
.vg-run b{flex:1 1 100%;font-weight:600;color:#a6a7ab}
.vg-run em{padding:3px 9px;border-radius:999px;background:#26262b;color:#6f7076;font-style:normal;transition:color .25s,box-shadow .25s}
.vg-run em::before{content:"○ "} .vg-run em.on{color:#ececef;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)} .vg-run em.on::before{content:"✓ "}
.vg-a{font-size:12.5px;line-height:1.45;color:#c9cacf;opacity:0;transition:opacity .3s}
.vg-a.on{opacity:1}
/* Desktop and Mobile */
.vg-boards{position:absolute;inset:0}
.vg-bd{position:absolute;top:15%}
.vg-bd small{position:absolute;top:-17px;left:0;font:500 10.5px/1 var(--eden-text-ui-family);color:#8b8c92}
.vg-bd--d{left:6%;width:58%;height:50%} .vg-bd--m{left:70%;width:24%;height:72%}
.vg-pg{position:absolute;inset:0;border-radius:6px;background:#1c1c20;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.vg-bd--d .vg-pg{display:flex;gap:8%;align-items:center;padding:7%;overflow:hidden}
.vg-bd--d .vg-txt{flex:1;display:flex;flex-direction:column;gap:6px}
.vg-bd--d .vg-img{flex:1;align-self:stretch;border-radius:4px;background:center/cover}
.vg-bd--m .vg-txt{position:absolute;left:10%;right:10%;top:6%;display:flex;flex-direction:column;gap:5px}
.vg-bd--m .vg-img{position:absolute;left:10%;right:10%;top:50%;height:44%;border-radius:4px;background:center/cover}
.vg-kind{position:absolute;left:6%;bottom:9%;padding:5px 10px;border-radius:8px;background:#18181b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font:500 11px/1.2 var(--eden-text-ui-family);opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.vg-kind.on{opacity:1;transform:none}
/* one canvas, two cursors */
.vg-page{position:absolute;left:14%;right:14%;top:14%;bottom:10%;display:flex;flex-direction:column;gap:9%;padding:5%;border-radius:8px;background:#1c1c20;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.vg-nav{display:flex;justify-content:space-between}
.vg-head{display:flex;flex-direction:column;gap:6px;padding:4px;margin:-4px;border-radius:4px}
.vg-head .vg-bar--h{transition:height .3s,background .3s} .vg-head.is-bold .vg-bar--h{height:14px;background:#ececef}
.vg-row{position:relative;flex:1;display:flex;gap:6%;padding:4px;margin:-4px;border-radius:4px;outline:1.5px dashed rgba(255,255,255,.12);transition:outline-color .3s}
.vg-row.on{outline:1.5px solid #716cff}
.vg-row .vg-tag{z-index:2;left:auto;right:6px;top:6px;opacity:0;transition:opacity .3s} .vg-row.on .vg-tag{opacity:1}
.vg-row i{flex:1;border-radius:4px;background:#fff center/cover no-repeat;opacity:0;transform:scale(.9);transition:opacity .4s,transform .4s}
.vg-row i.on{opacity:1;transform:none}
/* every value is a token */
.vg-sec{--vg-pad:16px;position:absolute;left:12%;right:12%;top:16%;padding:var(--vg-pad) 18px;border-radius:8px;background:#1e1e22;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:padding .16s}
.vg-in{display:flex;flex-direction:column;gap:7px;padding:10px;border-radius:5px;background:#28282d}
.vg-hot{position:absolute;left:0;right:0;height:var(--vg-pad);border-radius:8px;opacity:0;transition:opacity .25s,height .16s;background:repeating-linear-gradient(-45deg,rgba(113,108,255,.4) 0 2px,transparent 2px 6px)}
.vg-hot--t{top:0} .vg-hot--b{bottom:0}
.vg-sec.is-armed .vg-hot{opacity:1}
.vg-val{position:absolute;right:12%;bottom:9%;padding:5px 10px;border-radius:8px;background:#18181b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font:500 11px/1.2 var(--eden-text-ui-family);color:#a6a7ab;opacity:0;transition:opacity .3s}
.vg-val.on{opacity:1} .vg-val em{font-style:normal;color:#ececef}
/* the Foundation */
.vg-fd{--fd-s:#0f0f10;--fd-r:#1d1d20;--fd-t:#f4f4f5;--fd-m:#9a9aa0;--fd-a:#e2412b;position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;padding:14px}
.vg-fd.is-light{--fd-s:#f4f4f5;--fd-r:#ffffff;--fd-t:#18181b;--fd-m:#6b6b72;--fd-a:#c8321f}
.vg-fd-h{display:flex;justify-content:space-between;align-items:center;font:600 12px/1 var(--eden-text-ui-family)}
.vg-seg{display:flex;padding:3px;border-radius:9px;background:#0f0f11;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.vg-seg b{padding:5px 10px;border-radius:6px;font:500 11px/1 var(--eden-text-ui-family);color:#8b8c92;transition:background .2s,color .2s}
.vg-seg b.on{background:#2c2c32;color:#ececef}
.vg-fd-roles{display:flex;gap:6px}
.vg-fd-roles span{flex:1;display:flex;flex-direction:column;gap:5px;font-size:10.5px;color:#8b8c92}
.vg-fd-roles i{display:block;height:28px;border-radius:7px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:background .5s}
.vg-fd-spec{flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:14px;border-radius:10px;background:var(--fd-s);color:var(--fd-t);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:background .5s,color .5s}
.vg-fd-d{font:600 22px/1 var(--eden-text-display-family);letter-spacing:-.01em}
.vg-fd-b{font-size:12px;color:var(--fd-m);transition:color .5s}
.vg-fd-spec s{align-self:flex-start;margin-top:4px;padding:6px 12px;border-radius:999px;background:var(--fd-a);color:#fff;font:600 11px/1 var(--eden-text-ui-family);text-decoration:none;transition:background .5s}

/* Studio's panels inside the moments: the effects studio and the gradient material, with their own sliders */
.vg-pan{position:absolute;z-index:3;right:10px;top:10px;width:min(50%,230px);padding:10px;border-radius:12px;background:rgba(20,20,23,.94);backdrop-filter:blur(12px);box-shadow:0 20px 44px -18px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,255,255,.08);font-size:11px;transition:opacity .35s,transform .35s}
.vg-pan header{margin-bottom:7px;font:600 11.5px/1.3 var(--eden-text-ui-family)}
.vg-pan h6{margin:9px 0 2px;font:600 9.5px/1.2 var(--eden-text-ui-family);letter-spacing:.1em;text-transform:uppercase;color:#6f7076}
.vg-pan--mesh{top:auto;bottom:10px;opacity:0;transform:translateY(8px)}
.vg-pan--mesh.on{opacity:1;transform:none}
.vg-sl{display:grid;grid-template-columns:58px minmax(30px,1fr) auto;align-items:center;gap:8px;height:24px;color:#a6a7ab}
.vg-sl label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.vg-sl em{min-width:22px;font-style:normal;text-align:right;color:#ececef;font-variant-numeric:tabular-nums;white-space:nowrap}
.vg-tr{position:relative;height:3px;border-radius:2px;background:#303036}
.vg-tr i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:#8b8c92}
.vg-tr b{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#ececef;box-shadow:0 1px 3px rgba(0,0,0,.5)}
.vg-sl.on label{color:#ececef} .vg-sl.on .vg-tr i{background:#716cff}
.vg-pre{display:flex;justify-content:space-between;align-items:center;height:28px;padding:0 9px;border-radius:7px;background:#232327;color:#ececef;font-size:11.5px;transition:box-shadow .2s}
.vg-pre.on{box-shadow:inset 0 0 0 1.5px #716cff}
/* sketch */
.vg-mode{position:absolute;left:12px;top:12px;padding:4px 9px;border-radius:7px;background:#1b1b1f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font:500 11px/1.2 var(--eden-text-ui-family)}
.vg-sk{position:absolute;opacity:0;border:1.5px dashed rgba(255,255,255,.45);border-radius:6px;transition:border-color .4s}
.vg-sk.is-real{border-color:transparent}
.vg-real{position:absolute;inset:0;border-radius:6px;opacity:0;transition:opacity .5s}
.vg-sk.is-real .vg-real{opacity:1}
.vg-real--head{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 4%}
.vg-r-k{font:600 9.5px/1.2 var(--eden-text-ui-family);letter-spacing:.12em;text-transform:uppercase;color:#8b8c92}
.vg-r-h{font:500 22px/1.05 var(--eden-text-display-family);letter-spacing:-.01em;color:#f4f4f5}
.vg-real--img{background:center/cover}
.vg-real--buy{display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:10px;background:#1c1c20;font:600 12px/1.2 var(--eden-text-ui-family)}
.vg-r-m{font-weight:400;color:#a6a7ab}
.vg-real--buy s,.vg-out s{display:block;height:26px;padding:0 12px;border-radius:999px;background:#f4f4f5;color:#0c0c0e;font:600 10.5px/26px var(--eden-text-ui-family);text-align:center;text-decoration:none}
.vg-sk-tag{left:12px;bottom:10px;opacity:0;transition:opacity .3s} .vg-sk-tag.on{opacity:1}
/* design and live */
.vg-live-h{position:absolute;z-index:2;left:0;right:0;top:10px;display:flex;justify-content:center}
.vg-page--live,.vg-page--mo{left:8%;right:8%;top:22%;bottom:12%;gap:10px;padding:10px}
.vg-store{display:flex;align-items:center;gap:12px;font:500 10.5px/1 var(--eden-text-ui-family);color:#a6a7ab}
.vg-store b{margin-right:auto;font:700 10.5px/1 var(--eden-text-ui-family);letter-spacing:.08em;text-transform:uppercase;color:#ececef}
.vg-bag em{display:inline-grid;place-items:center;min-width:16px;height:16px;margin-left:3px;border-radius:8px;background:#2c2c32;color:#ececef;font-style:normal}
.vg-bag.is-bump em{background:#f4f4f5;color:#0c0c0e;animation:vg-bump .4s}
@keyframes vg-bump{50%{transform:scale(1.35)}}
.vg-lrow{flex:1;min-height:0;display:flex;gap:8px}
.vg-lc{position:relative;flex:1;display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:7px;background:#fff;color:#18181b;transition:transform .3s,box-shadow .3s,outline-color .3s}
.vg-lc i{flex:1;min-height:0;border-radius:4px;background:#ececef center/cover no-repeat}
.vg-lc p{font:600 10px/1.2 var(--eden-text-ui-family)}
.vg-lc s{position:absolute;left:6px;right:6px;bottom:6px;height:22px;border-radius:999px;background:#18181b;color:#fff;font:600 9.5px/22px var(--eden-text-ui-family);text-align:center;text-decoration:none;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
.vg-page.is-live .vg-lc.is-hover{transform:none;box-shadow:none}
/* the shop card (2026-10-27): the picture's frame clips its fill, which grows on hover; Add to bag sits inside the frame, never over the name */
.vg-lc i{position:relative;overflow:hidden}
.vg-lc i u{position:absolute;inset:0;background:#ececef center/cover no-repeat;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.vg-page.is-live .vg-lc.is-hover i u{transform:scale(1.08)}
.vg-lc-t{display:flex;align-items:baseline;justify-content:space-between;gap:6px;padding:2px 1px 0}
.vg-lc-t p{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg-lc-t em{flex:0 0 auto;color:#52525b;font:500 10px/1.2 var(--eden-text-ui-family);font-style:normal}
.vg-page.is-live .vg-lc.is-hover s{opacity:1;transform:none}
.vg-page.is-live .vg-sel{outline-color:transparent}
.vg-lc-tag{left:0;bottom:-25px;transition:opacity .3s} .vg-page.is-live .vg-lc-tag{opacity:0}
/* notes become pages */
.vg-note{position:absolute;left:7%;top:9%;width:54%;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:10px;background:#1c1c20;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.vg-note small{font:600 9.5px/1 var(--eden-text-ui-family);letter-spacing:.1em;text-transform:uppercase;color:#6f7076}
.vg-note p{min-height:38px;font:13px/1.5 var(--eden-text-body-family);color:#ececef}
.vg-note b{display:inline-block;padding:0 6px;margin:0 1px;border-radius:5px;background:rgba(113,108,255,.24);color:#d4d1ff;font-weight:500;line-height:1.5}
.vg-gen{align-self:flex-start;padding:6px 11px;border-radius:999px;background:#f4f4f5;color:#0c0c0e;font:600 11px/1 var(--eden-text-ui-family);text-decoration:none;transition:box-shadow .2s}
.vg-gen.on{box-shadow:0 0 0 3px rgba(113,108,255,.5)}
.vg-out{position:absolute;right:6%;bottom:8%;width:64%;height:40%;display:flex;gap:10px;padding:10px;border-radius:10px;background:#1c1c20;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 24px 40px -20px rgba(0,0,0,.7);opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s}
.vg-out.on{opacity:1;transform:none}
.vg-out i{flex:1;border-radius:6px;background:#2a2a30 center/cover;opacity:0;transition:opacity .5s}
.vg-out > div{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:5px;opacity:0;transition:opacity .5s .15s}
.vg-out.is-built i,.vg-out.is-built > div{opacity:1}
.vg-out .vg-r-h{font-size:18px}
/* moments */
.vg-chips--top{top:12px;bottom:auto}
.vg-page--mo{overflow:hidden}
.vg-mo-hero{flex:1;min-height:0;border-radius:6px;background:center/cover}
.vg-menu{position:absolute;left:10px;top:34px;width:46%;display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:8px;background:#f4f4f5;color:#18181b;font:500 11px/1.2 var(--eden-text-ui-family);box-shadow:0 16px 30px -12px rgba(0,0,0,.6);opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s}
.vg-menu span{padding:5px 7px;border-radius:5px;transition:background .2s}
.vg-menu span.is-bold{font-weight:700;background:#e4e4e7}
.vg-page.is-menu .vg-menu{opacity:1;transform:none}
.vg-drawer{position:absolute;top:0;right:0;bottom:0;width:50%;display:flex;flex-direction:column;gap:8px;padding:10px;background:#f4f4f5;color:#18181b;font:600 11px/1.3 var(--eden-text-ui-family);box-shadow:-16px 0 30px -16px rgba(0,0,0,.6);transform:translateX(105%);transition:transform .4s cubic-bezier(.6,0,.2,1)}
.vg-page.is-bag .vg-drawer{transform:none}
.vg-drawer div{display:flex;align-items:center;gap:8px;font-weight:500}
.vg-drawer i{flex:none;width:40px;height:40px;border-radius:5px;background:#fff center/cover}
.vg-drawer em{font-style:normal;color:#6b6b72}
.vg-drawer s{margin-top:auto;height:26px;border-radius:999px;background:#18181b;color:#fff;font:600 10.5px/26px var(--eden-text-ui-family);text-align:center;text-decoration:none}


/* THE WALL (hero-vignettes.js wall()): two columns of moments, drifting up, faded at the top and bottom; hover holds it still */
.vg-wall{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:16px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.vg-wall .e-col{display:flex;flex-direction:column;gap:16px;animation:vg-up 105s linear infinite}
.vg-wall .e-col + .e-col{margin-top:-120px;animation-duration:130s}
.vg-wall:hover .e-col{animation-play-state:paused}
.vg-wall .e-col .vg{flex:none}
@keyframes vg-up{to{transform:translateY(calc(-50% - 8px))}}
@media (prefers-reduced-motion:reduce){.vg-wall .e-col{animation:none}}

/* ── the five added 2026-10-15: context in, mood boards, active edges, voice, kits ── */
/* context in, UI out */
.vg-ctx{position:absolute;left:7%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;width:36%}
.vg-ctx span{position:relative;display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:9px;background:#1c1c20;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);font:500 11.5px/1.3 var(--eden-text-ui-family);color:#c2c2c7;transition:box-shadow .3s,color .3s}
.vg-ctx small{color:#6f7076;font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.vg-ctx span.on{color:#f4f4f5;box-shadow:inset 0 0 0 1px rgba(201,183,255,.7)}
.vg-pulse{position:absolute;z-index:4;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:linear-gradient(115deg,#9ee7ff,#c9b7ff,#f6c7e7);box-shadow:0 0 12px rgba(201,183,255,.8);opacity:0}
.vg-gen{position:absolute;right:7%;top:50%;transform:translateY(-50%);width:44%;height:62%;border-radius:10px;background:#1c1c20;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);overflow:visible}
.vg-gen .vg-tag{left:0;top:-23px;opacity:0;transition:opacity .3s} .vg-gen.is-on .vg-tag{opacity:1}
.vg-gen-sk{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:16px;transition:opacity .4s}
.vg-gen.is-built .vg-gen-sk{opacity:0}
.vg-gen-ui{position:absolute;inset:0;display:flex;overflow:hidden;border-radius:10px;background:#0f0f11;opacity:0;transition:opacity .5s}
.vg-gen.is-built .vg-gen-ui{opacity:1}
.vg-gen-ui i{flex:0 0 42%;background:center/cover}
.vg-gen-ui > div{flex:1;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:10px}
.vg-gen-ui .vg-r-h{font-size:15px} .vg-gen-ui s{align-self:flex-start;margin-top:4px;padding:4px 9px;border-radius:999px;background:#f4f4f5;color:#0c0c0e;font:600 9.5px/1 var(--eden-text-ui-family);text-decoration:none}
/* mood boards */
.vg-mb{--mb-acc:15;--mb-ground:#16181e;position:absolute;left:6%;right:6%;top:6%;height:62%;display:grid;grid-template-columns:1.1fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:6px}
.vg-mb > div{border-radius:7px;overflow:hidden;background:var(--mb-ground);transition:background .2s}
.vg-mb-sw{display:flex}
.vg-mb-sw i{flex:1} .vg-mb-sw [data-g]{background:var(--mb-ground);flex:3} .vg-mb-sw [data-i]{background:#e9e7e3;flex:2} .vg-mb-sw [data-a]{background:#c8321f;flex:calc(var(--mb-acc) / 10)}
.vg-mb-type{display:flex;flex-direction:column;justify-content:center;padding:8px;color:#f4f4f5}
.vg-mb-type b{font:500 26px/1 var(--eden-text-display-family)} .vg-mb-type span{font:12px/1.2 var(--eden-text-body-family);color:#a6a7ab}
.vg-mb-img{background:center/cover}
.vg-mb-btn{display:grid;place-items:center}
.vg-mb-btn s{padding:6px 12px;border-radius:999px;background:#c8321f;color:#fff;font:600 10.5px/1 var(--eden-text-ui-family);text-decoration:none;transform:scale(calc(.8 + var(--mb-acc) / 100))}
.vg-mb-words{display:grid;place-items:center;padding:6px;color:#c2c2c7;font:500 11px/1.3 var(--eden-text-ui-family);text-align:center}
.vg-mb-dials{position:absolute;left:8%;right:8%;bottom:7%;display:flex;flex-direction:column;gap:2px}
/* active edges */
.vg-ed{position:absolute;inset:12% 8%;display:flex;flex-direction:column;justify-content:center;gap:12px}
.vg-ed-row{display:flex;gap:8px;align-items:center}
.vg-ed [data-e]{position:relative}
.vg-ed [data-e]::after{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:1.5px;background:linear-gradient(115deg,#f7f8f8,#9ee7ff,#c9b7ff,#f6c7e7,#fff4c2);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s;pointer-events:none}
.vg-ed [data-e].is-lit::after{opacity:1}
.vg-ed-b{padding:8px 14px;border-radius:999px;background:#1f1f23;color:#ececef;font:600 11.5px/1 var(--eden-text-ui-family)}
.vg-ed-b--p{background:#f4f4f5;color:#0c0c0e}
.vg-ed-seg{display:flex;padding:3px;border-radius:9px;background:#0f0f11;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.vg-ed-seg b{padding:5px 10px;border-radius:6px;color:#8b8c92;font:500 11px/1 var(--eden-text-ui-family)}
.vg-ed-seg b.is-lit{color:#ececef}
.vg-ed-in{flex:1;padding:8px 10px;border-radius:8px;background:#0f0f11;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:#6f7076;font:12px/1 var(--eden-text-ui-family)}
.vg-ed-card{display:flex;gap:10px;align-items:center;padding:8px;border-radius:10px;background:#1c1c20}
.vg-ed-card i{width:44px;height:44px;border-radius:6px;background:#fff center/cover}
.vg-ed-card p{margin:0;color:#ececef;font:600 11.5px/1.35 var(--eden-text-ui-family)} .vg-ed-card em{color:#8b8c92;font-style:normal;font-weight:400}
/* voice */
.vg-vo-top{position:absolute;left:8%;right:8%;top:10%;display:flex;align-items:center;gap:14px}
.vg-key{display:grid;place-items:center;width:40px;height:40px;border-radius:9px;background:#1f1f23;box-shadow:inset 0 -2px 0 rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.08);color:#c2c2c7;font:500 18px/1 var(--eden-text-ui-family);transition:transform .15s,box-shadow .15s,color .15s}
.vg-key.down{transform:translateY(1px);color:#f7f8f8;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 0 2px rgba(201,183,255,.6)}
.vg-wave{flex:1;display:flex;align-items:center;gap:3px;height:30px}
.vg-wave i{flex:1;height:3px;border-radius:2px;background:#3a3a40}
.vg-wave.on i{background:linear-gradient(#c9b7ff,#9ee7ff);animation:vg-wave .7s ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes vg-wave{from{height:4px}to{height:26px}}
.vg-vo-said{position:absolute;left:8%;right:8%;top:34%;margin:0;color:#f4f4f5;font:500 15px/1.35 var(--eden-text-body-family);min-height:20px}
.vg-vo-page{position:absolute;left:8%;right:8%;bottom:9%;height:36%}
.vg-vo-hero{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 16px;border-radius:9px;background:#3a3a42;transition:background .8s}
.vg-vo-page.is-done .vg-vo-hero{background:#0c0c0e}
.vg-vo-page .vg-tag{right:0;top:-23px;left:auto;opacity:0;transition:opacity .3s} .vg-vo-page.is-done .vg-tag{opacity:1}
/* UI kits */
.vg-kit{position:absolute;left:6%;top:9%;bottom:9%;width:40%;display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:12px;background:#18181b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.vg-kit header{display:flex;gap:6px;align-items:baseline;padding-bottom:6px;margin-bottom:2px;border-bottom:1px solid rgba(255,255,255,.07);font:600 11.5px/1 var(--eden-text-ui-family);color:#ececef}
.vg-kit header span{color:#8b8c92;font-weight:400}
.vg-kit-p{display:flex;flex-direction:column;gap:1px;padding:7px 9px;border-radius:8px;background:#232327;color:#ececef;font:500 11.5px/1.2 var(--eden-text-ui-family);transition:box-shadow .2s}
.vg-kit-p small{color:#6f7076;font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.vg-kit-p.on{box-shadow:inset 0 0 0 1.5px #716cff}
.vg-kit-card{position:absolute;right:8%;top:50%;transform:translateY(-50%);width:36%;display:flex;flex-direction:column;gap:5px;padding:8px;border-radius:10px;background:#fff;color:#18181b;outline:1.5px dashed rgba(255,255,255,.25);outline-offset:4px}
.vg-kit-card [data-s]{opacity:.12;transition:opacity .35s}
.vg-kit-card [data-s].on{opacity:1}
.vg-kit-card i{display:block;aspect-ratio:1;border-radius:6px;background:#ececef center/cover}
.vg-kit-card p{margin:0;font:600 11px/1.2 var(--eden-text-ui-family)}
.vg-kit-card s{display:block;height:22px;border-radius:999px;background:#18181b;color:#fff;font:600 9.5px/22px var(--eden-text-ui-family);text-align:center;text-decoration:none}

/* ── A FEATURE, UP CLOSE (hero-vignettes.js open()): a moment on the wall opens full screen, in the site's own type ── */
.vg-wall .vg-open{cursor:pointer;transition:transform .25s cubic-bezier(.3,.7,.2,1),box-shadow .25s}
.vg-wall .vg-open:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(201,183,255,.55),0 24px 48px -24px rgba(0,0,0,.8)}
.vg-wall .vg-open:focus-visible{outline:2px solid #c9b7ff;outline-offset:3px}
html.vgm-on{overflow:hidden}
.vgm{position:fixed;inset:0;z-index:1300;display:flex;background:var(--eden-black,#121214);color:var(--eden-ink,#f7f8f8);opacity:0;transform:scale(.985);transition:opacity .35s cubic-bezier(.3,.7,.2,1),transform .35s cubic-bezier(.3,.7,.2,1)}
.vgm.is-open{opacity:1;transform:none}
.vgm[hidden]{display:none}
.vgm-in{flex:1;display:flex;flex-direction:column;gap:24px;width:100%;max-width:1440px;margin:0 auto;padding:28px 40px 40px}
.vgm-top{display:flex;align-items:center;gap:16px}
.vgm-mark{font-family:var(--eden-text-title-family);font-size:var(--eden-text-title-size);font-weight:var(--eden-text-title-weight)}
.vgm-count{margin-left:auto;color:var(--eden-ink-3,#6b6c6e);font:600 12px/1 var(--eden-text-ui-family);letter-spacing:.12em;font-variant-numeric:tabular-nums}
.vgm-x,.vgm-b{appearance:none;margin:0;padding:0;border:0;text-transform:none;cursor:pointer;display:grid;place-items:center;width:44px;height:44px;border-radius:999px;background:var(--eden-surface,#0f1011);color:var(--eden-ink,#f7f8f8);box-shadow:inset 0 0 0 1px var(--eden-line,rgba(255,255,255,.08));transition:box-shadow .2s}
.vgm-x:hover,.vgm-b:hover{box-shadow:inset 0 0 0 1px var(--eden-line-strong,rgba(255,255,255,.22))}
.vgm-x:focus-visible,.vgm-b:focus-visible{outline:2px solid #c9b7ff;outline-offset:2px}
.vgm-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.vgm-words{display:flex;flex-direction:column;gap:20px;max-width:540px}
.vgm-words.is-in > *{animation:vgm-rise .5s cubic-bezier(.3,.7,.2,1) both}
.vgm-words.is-in > :nth-child(2){animation-delay:.05s} .vgm-words.is-in > :nth-child(3){animation-delay:.1s} .vgm-words.is-in > :nth-child(4){animation-delay:.15s}
@keyframes vgm-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.vgm-k{margin:0;color:var(--eden-ink-3,#6b6c6e);font-family:var(--eden-text-label-family);font-size:var(--eden-text-label-size);font-weight:var(--eden-text-label-weight);letter-spacing:var(--eden-text-label-tracking);text-transform:uppercase}
.vgm-h{margin:0;font-family:var(--eden-text-display-family);font-size:var(--eden-text-display-size);font-weight:var(--eden-w-medium,500);line-height:var(--eden-text-display-line-height);letter-spacing:var(--eden-text-display-tracking)}
.vgm-p{margin:0;color:var(--eden-ink-2,#a6a7a7);font:var(--eden-text-body-weight) 18px/1.55 var(--eden-text-body-family)}
.vgm-pts{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.vgm-pts li{position:relative;padding-left:20px;color:var(--eden-ink,#f7f8f8);font:16px/1.45 var(--eden-text-body-family)}
.vgm-pts li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:linear-gradient(115deg,#9ee7ff,#c9b7ff,#f6c7e7,#fff4c2)}
.vgm-nav{display:flex;gap:8px;margin-top:12px}
.vgm-stage{position:relative;height:min(74vh,720px);display:grid;place-items:center;overflow:hidden;border-radius:24px;background:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.3px) 0 0/20px 20px,var(--eden-surface,#0f1011);box-shadow:inset 0 0 0 1px var(--eden-line,rgba(255,255,255,.08))}
.vgm-fit{transform-origin:center}
.vgm-fit .vg{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 40px 80px -40px rgba(0,0,0,.8)}
@media (max-width:767px){.vgm-in{padding:16px 20px 24px}.vgm-body{grid-template-columns:1fr;gap:24px;align-content:start;overflow:auto}.vgm-stage{height:340px;order:-1}.vgm-h{font-size:36px}}
@media (prefers-reduced-motion:reduce){.vgm,.vgm-words.is-in > *{transition:none;animation:none}}
/* active edges, as section edge shapes (2026-10-15) */
.vg-eg{position:absolute;left:6%;top:15%;bottom:12%;width:52%;display:flex;flex-direction:column;border-radius:8px;outline:1.5px solid #716cff;outline-offset:3px}
.vg-eg .vg-tag{left:-4px;top:-26px}
.vg-eg-top{position:relative;flex:0 0 62%;border-radius:8px 8px 0 0;background:#0c0c0e center/cover;overflow:hidden}
.vg-eg-top > div{position:absolute;left:10%;top:22%;display:flex;flex-direction:column;gap:3px}
.vg-eg-top .vg-r-h{font-size:18px}
.vg-eg-cut{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:34%}
.vg-eg-cut path{fill:#e9e7e3}
.vg-eg-low{flex:1;display:flex;gap:6%;padding:6% 8% 8%;border-radius:0 0 8px 8px;background:#e9e7e3}
.vg-eg-low span{flex:1;border-radius:4px;background:#d4d1cb}
.vg-pan--eg{top:50%!important;bottom:auto;transform:translateY(-50%);width:36%}
.vg-fld .vg-fv{grid-column:2/4;display:flex;align-items:center;justify-content:space-between;height:24px;padding:0 8px;border-radius:6px;background:#232327;color:#ececef;transition:box-shadow .2s}
.vg-fld .vg-fv::after{content:"\2304";color:#8b8c92;font-size:11px;line-height:1;margin-top:-4px}
.vg-fld .vg-fv.on{box-shadow:inset 0 0 0 1.5px #716cff}
/* LIGHTER, AND THE IMAGE TWO THIRDS (2026-10-15): quieter type, the Studio canvas larger and edge to edge */
.vgm-in{max-width:none;padding:20px 28px 28px}
.vgm-body{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px}
.vgm-words{gap:14px;max-width:400px;padding-left:12px}
.vgm-h{font-family:var(--eden-text-section-family);font-size:var(--eden-text-section-size);font-weight:var(--eden-w-medium,500);line-height:var(--eden-text-section-line-height);letter-spacing:var(--eden-text-section-tracking)}
.vgm-p{font-size:15px;line-height:1.6}
.vgm-pts{gap:8px}
.vgm-pts li{padding-left:16px;color:var(--eden-ink-2,#a6a7a7);font-size:14px}
.vgm-pts li::before{width:5px;height:5px}
.vgm-nav{margin-top:8px}
.vgm-x,.vgm-b{width:36px;height:36px}
.vgm-stage{height:calc(100vh - 116px);border-radius:16px;background:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1.3px) 0 0/20px 20px,#0b0b0c}
.vgm-fit .sr-st{box-shadow:none;background:transparent}
@media (max-width:767px){.vgm-body{grid-template-columns:1fr}.vgm-stage{height:360px}}
.vgm-fit .vg,.vgm-fit .vg-canvas,.vgm-fit .vg-boards{background:transparent!important;box-shadow:none!important}   /* in the modal a moment sits on the canvas itself, no tile around it */
/* the Foundation, as two inputs and the system they drive (2026-10-15) */
.vg-fd2{--sf:#f3f4f6;--rs:#fff;--ln:#dcdde1;--tx:#18191c;--mt:#6b6d73;--ac:#c8321f;--tn:#f9e2df}
.vg-pan--fd{left:6%;right:auto!important;top:50%!important;transform:translateY(-50%);width:46%}
.vg-pan--fd header{display:flex;gap:6px;align-items:baseline} .vg-fd-sub{color:#8b8c92;font-weight:400}
.vg-fd-in{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;align-items:center}
.vg-fd-in > i{width:20px;height:20px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.vg-fd-in .vg-sl{grid-template-columns:48px minmax(30px,1fr) auto}
.vg-fd-roles2{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.07)}
.vg-fd-roles2 span{display:flex;flex-direction:column;gap:4px;color:#8b8c92;font-size:8.5px;text-align:center;white-space:nowrap;overflow:hidden}
.vg-fd-roles2 i{display:block;height:18px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.vg-fd-page{position:absolute;right:6%;top:50%;transform:translateY(-50%);width:40%;overflow:hidden;border-radius:10px;background:var(--sf);box-shadow:0 20px 40px -20px rgba(0,0,0,.8)}
.vg-fd-bar{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--rs);border-bottom:1px solid var(--ln);color:var(--mt);font:500 9.5px/1 var(--eden-text-ui-family)}
.vg-fd-bar b{margin-right:auto;color:var(--tx);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase}
.vg-fd-card{display:flex;flex-direction:column;margin:10px;overflow:hidden;border-radius:8px;background:var(--rs);box-shadow:inset 0 0 0 1px var(--ln)}
.vg-fd-card > i{display:block;height:84px;background:var(--tn) center/contain no-repeat}
.vg-fd-card > div{display:flex;flex-direction:column;gap:3px;padding:8px}
.vg-fd-card em{align-self:flex-start;padding:2px 6px;border-radius:999px;background:var(--tn);color:var(--ac);font:600 8px/1.3 var(--eden-text-ui-family);font-style:normal;letter-spacing:.08em;text-transform:uppercase}
.vg-fd-card p{margin:0;color:var(--tx);font:600 12px/1.2 var(--eden-text-ui-family)}
.vg-fd-card small{color:var(--mt);font-size:10px}
.vg-fd-row{display:flex;align-items:center;gap:8px;margin-top:5px}
.vg-fd-row s{padding:5px 10px;border-radius:999px;background:var(--ac);color:#fff;font:600 9.5px/1 var(--eden-text-ui-family);text-decoration:none}
.vg-fd-row u{color:var(--ac);font:600 9.5px/1 var(--eden-text-ui-family)}
/* mood boards, from sources to a Foundation (2026-10-15) */
.vg-mb2-src{position:absolute;left:6%;right:6%;top:5%;display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow:hidden}
.vg-mb2-src small{margin-right:2px;color:#6f7076;font:600 9px/1 var(--eden-text-ui-family);letter-spacing:.1em;text-transform:uppercase}
.vg-mb2-src i,.vg-mb2-src b{opacity:.25;transform:translateY(3px);transition:opacity .3s,transform .3s}
.vg-mb2-src i.on,.vg-mb2-src b.on{opacity:1;transform:none}
.vg-mb2-src i{flex:none;width:26px;height:26px;border-radius:6px;background:center/cover}
.vg-mb2-src b{flex:none;padding:5px 8px;border-radius:7px;background:#1c1c20;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:#c2c2c7;font:500 10px/1 var(--eden-text-ui-family);white-space:nowrap}
.vg-mb2{top:17%!important;height:47%!important}
.vg-mb2 > div{opacity:0;transform:scale(.96);transition:opacity .35s,transform .35s,background .2s}
.vg-mb2 > div.on{opacity:1;transform:none}
.vg-mb-type.is-edit b{color:#c8321f;font-weight:700;letter-spacing:-.02em}
.vg-mb2-foot{position:absolute;left:6%;right:6%;bottom:17%;display:flex;align-items:center;gap:12px}
.vg-mb2-foot .vg-mb-dials{position:static;flex:1}
.vg-mb2-use{flex:none;padding:7px 12px;border-radius:999px;background:#f4f4f5;color:#0c0c0e;font:600 10.5px/1 var(--eden-text-ui-family);transition:box-shadow .2s}
.vg-mb2-use.on{box-shadow:0 0 0 3px rgba(201,183,255,.5)}
.vg-mb2-fd{position:absolute;left:6%;right:6%;bottom:4%;display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;background:#18181b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.vg-mb2-fd.on{opacity:1;transform:none}
.vg-mb2-fd small{margin-right:auto;color:#c2c2c7;font:600 10px/1 var(--eden-text-ui-family)}
.vg-mb2-fd i{width:18px;height:18px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.vg-mb2-fd [data-g]{background:var(--mb-ground,#16181e)} .vg-mb2-fd [data-i]{background:#e9e7e3} .vg-mb2-fd [data-a]{background:#c8321f}
.vg-mb2-fd b{padding:3px 7px;border-radius:6px;background:#232327;color:#ececef;font:600 10px/1 var(--eden-text-ui-family)}
/* component editing, simplified to the master and its rail (2026-10-15: "no need to show the smaller cards too") */
.vg--card .vg-master{left:9%;top:52%;transform:translateY(-50%);width:38%}
.vg--card .vg-rail{right:8%;top:50%;transform:translateY(-50%);width:42%}
/* context in, UI out: the generated section stacks, picture on top (Josh, 2026-10-15: "its just too squished. maybe image on top") */
.vg--context .vg-gen{height:76%}
.vg--context .vg-gen-ui{flex-direction:column}
.vg--context .vg-gen-ui i{flex:0 0 54%;background-position:center 60%}
.vg--context .vg-gen-ui > div{justify-content:flex-start;gap:4px;padding:12px 14px}
.vg--context .vg-gen-ui .vg-r-h{font-size:16px;line-height:1.15}
/* the edge at true proportions, and no hairline under it */
.vg-eg-cut{height:auto;aspect-ratio:10 / 1;bottom:-2px;display:block}
.vg-eg-low{margin-top:-1px}
/* Moments: the menu hangs from Shop, no state tabs (2026-10-15) */
.vg--moments .vg-page--mo{top:12%;bottom:10%}   /* it keeps overflow hidden: the closed bag waits just outside it */
.vg-mo-nav{position:relative;padding:3px 6px;margin:-3px -6px;border-radius:6px;transition:background .2s,color .2s}
.vg-mo-nav.on{background:#2c2c32;color:#ececef}
.vg-mo-nav .vg-menu{left:auto;right:-4px;top:calc(100% + 6px);width:auto;min-width:140px;z-index:3;text-transform:none;letter-spacing:0}
.vg-mo-nav .vg-menu::before{content:"";position:absolute;right:16px;top:-5px;width:10px;height:10px;background:#f4f4f5;transform:rotate(45deg);border-radius:2px}
.vg-mo-nav .vg-menu span{position:relative}
.vg--moments .vg-page.is-menu .vg-menu{opacity:1;transform:none}
.vg--moments .vg-drawer{border-radius:0 8px 8px 0}
.vg--moments .vg-page--mo{border-radius:8px}
/* the product picture fills its space, no tint behind it (Josh, 2026-10-15) */
.vg-fd-card > i{background:#e4e4e6 center/cover no-repeat}
/* notes become pages, laid out as a flow: the note, then what it generated (2026-10-15: "not even sure what its supposed to be communicating") */
.vg--prompt .vg-note{left:7%;top:8%;width:62%}
.vg-note-go{align-self:flex-start;padding:6px 11px;border-radius:999px;background:#f4f4f5;color:#0c0c0e;font:600 11px/1 var(--eden-text-ui-family);text-decoration:none;transition:box-shadow .2s}
.vg-note-go.on{box-shadow:0 0 0 3px rgba(113,108,255,.5)}
.vg--prompt .vg-out{left:auto;right:7%;bottom:8%;width:70%;height:42%;overflow:visible}
.vg-out-tag{left:0;top:-24px;opacity:0;transition:opacity .3s}
.vg-out.is-built .vg-out-tag{opacity:1}

/* ACTIVE PROMPTING (2026-10-18): Studio's tool palette with Listen at its foot (lib/active-prompting.js): the icon lit while it is on, its dot
   breathing while it listens and grown when it hears "Eden"; the ask beside it, the words as heard; the selected section the request lands on */
.vg-ap-tools{position:absolute;left:6%;top:10%;bottom:10%;width:40px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;border-radius:12px;background:#161618;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.vg-ap-t{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;color:#8b8b92}
.vg-ap-t svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.vg-ap-sep{flex:1}
.vg-ap-mic svg{opacity:.55;transition:opacity .2s,color .2s} .vg-ap-mic.is-on{color:#f7f8f8} .vg-ap-mic.is-on svg{opacity:1}
.vg-ap-mic::after{content:"";position:absolute;right:4px;top:5px;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:0;transform:scale(.3);transition:opacity .2s,transform .26s}
.vg-ap-mic.st-listening::after{animation:vg-ap-breathe 2.4s ease-in-out infinite;transform:none}
.vg-ap-mic.st-hearing::after{opacity:1;transform:scale(1.5);animation:none;box-shadow:0 0 0 2px rgba(255,255,255,.18)}
@keyframes vg-ap-breathe{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.vg-ap-mic.st-listening::after{animation:none;opacity:1}}
.vg-ap-ask{position:absolute;left:calc(6% + 56px);right:7%;top:10%;display:flex;flex-direction:column;gap:6px}
.vg-ap-state{color:#8b8b92;font:500 11px/1.3 var(--eden-text-label-family);letter-spacing:.08em;text-transform:uppercase}
.vg-ap-ask .vg-vo-said{position:static;left:auto;right:auto;top:auto}
.vg-canvas .vg-ap-tools ~ .vg-vo-page{left:calc(6% + 56px);right:7%}
.vg-vo-page.vg-sel{border-radius:9px}
.vg-vo-page .vg-tag--sel{left:-3px;right:auto;top:-27px;opacity:1} .vg-vo-page.is-done .vg-tag--sel{opacity:0}
.vg-ap-mic.is-on{background:rgba(255,255,255,.08)} .vg-ap-mic::after{width:5px;height:5px}   /* on, as a pressed tool reads in the palette */

/* THE WALL, SIDEWAYS (2026-10-19, [data-vg-dir="row"]): rows of moments drifting left, faded at the left and right; hover holds it still */
.vg-wall--rows{grid-template-columns:none;grid-template-rows:repeat(var(--n,2),minmax(0,1fr));align-items:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.vg-wall--rows .e-row{display:flex;flex-direction:row;align-items:center;gap:16px;width:max-content;animation:vg-left 140s linear infinite}
.vg-wall--rows .e-row + .e-row{margin-left:-240px;animation-duration:170s}
.vg-wall--rows:hover .e-row{animation-play-state:paused}
.vg-wall--rows .e-row .vg{flex:none}
@keyframes vg-left{to{transform:translateX(calc(-50% - 8px))}}
@media (prefers-reduced-motion:reduce){.vg-wall--rows .e-row{animation:none}}

/* THE WALL, TIDIED (Josh, 2026-10-27: "more consistent card sizing here and thinner borders no fills would help... it needs to look tidier
   and cleaner"): sideways, every moment is one size (460 x 320, hero-vignettes.js ROW_H) and drawn as a hairline on the page's own ground,
   no card fill, no drop shadows; Studio's panels inside it are hairlines too. Panels that sit over a picture (.vg-pan, .vg-chips) keep
   their glass, so their words stay readable. */
.vg-wall--rows{--vg-line:rgba(255,255,255,.13)}
.vg-wall--rows .vg{background:transparent;border-radius:14px;box-shadow:inset 0 0 0 .5px var(--vg-line)}
.vg-wall--rows .vg::after{background:var(--eden-black,#19191c)}
.vg-wall--rows .vg-canvas{background:transparent}
.vg-wall--rows .vg-canvas--dots,.vg-wall--rows .vg-boards{background:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.3px) 0 0/16px 16px}
.vg-wall--rows .vg-open:hover{transform:none;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.32)}
.vg-wall--rows :is(.vg-rail,.vg-kit,.vg-pg,.vg-page,.vg-sec,.vg-in,.vg-note,.vg-out,.vg-run,.vg-mb2-fd,.vg-mb2-src b,.vg-ed-card,.vg-ap-tools,.vg-kind,.vg-val,.vg-mode,.vg-real--buy,.vg-seg,.vg-ed-seg,.vg-ed-in,.vg-app-h),
.vg-wall--rows .vg--context .vg-gen{background:transparent;box-shadow:inset 0 0 0 .5px var(--vg-line)}
.vg-wall--rows .vg-app-h{box-shadow:none;border-bottom:.5px solid var(--vg-line)}
.vg-wall--rows :is(.vg-rail div,.vg-kit-p,.vg-ctx span,.vg-pre,.vg-fld .vg-fv,.vg-mb2-fd b){background:transparent}
.vg-wall--rows :is(.vg-rail div,.vg-kit-p,.vg-ctx span,.vg-pre,.vg-fld .vg-fv):not(.on){box-shadow:inset 0 0 0 .5px var(--vg-line)}
.vg-wall--rows .vg-kit header{border-bottom-width:.5px}

/* ── THE SEVEN ADDED 2026-10-27 (hero-vignettes.js drafts, locks, capture, notes, adaptive, sitefd, vector): drawn the tidy way, hairlines on
   the canvas and no grey fills (Josh, the same day: "thinner borders no fills") ── */
.vg{--vg-hl:rgba(255,255,255,.14)}
.vg-cur--b{background:#f6c7e7}
.vg-cur--b.is-press::before{border-color:#f6c7e7}
/* drafts */
.vg-df{position:absolute;left:6%;top:16%;width:54%;bottom:12%;display:flex;gap:12px}
.vg-df-b{position:relative;flex:1;display:flex;flex-direction:column}
.vg-df-b small{position:absolute;top:-17px;left:0;font:500 10.5px/1 var(--eden-text-ui-family);color:#8b8c92}
.vg-df-pg{flex:1;display:flex;flex-direction:column;gap:7px;border-radius:6px;box-shadow:inset 0 0 0 .5px var(--vg-hl);overflow:hidden}
.vg-df-pg > .vg-bar{margin:0 10px} .vg-df-pg > i{flex:1;margin:4px 10px 10px;border-radius:4px;box-shadow:inset 0 0 0 .5px var(--vg-hl)}
.vg-df-hd{display:flex;align-items:center;gap:6px;padding:6px 10px;border-bottom:.5px solid var(--vg-hl);transition:padding .12s;outline-offset:-1px}
.vg-df-hd b{margin-right:auto;font:700 8.5px/1 var(--eden-text-ui-family);letter-spacing:.08em;text-transform:uppercase;color:#ececef}
.vg-df-hd span{width:16px;height:4px;border-radius:2px;background:#3a3a40}
.vg-df-hd.is-draft{outline:1px dashed rgba(201,183,255,.75)}
.vg-df-menu{position:absolute;z-index:4;left:22%;top:34%;display:flex;flex-direction:column;gap:3px;max-width:200px;padding:9px 11px;border-radius:9px;background:rgba(20,20,23,.94);box-shadow:inset 0 0 0 .5px var(--vg-hl),0 16px 32px -16px rgba(0,0,0,.8);opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s;pointer-events:none}
.vg-df-menu.on{opacity:1;transform:none}
.vg-df-menu b{font:600 11.5px/1.2 var(--eden-text-ui-family);color:#ececef} .vg-df-menu span{font:11px/1.35 var(--eden-text-ui-family);color:#8b8c92}
.vg-df-rail{position:absolute;right:6%;top:16%;width:31%;display:flex;flex-direction:column;gap:10px;padding:10px;border-radius:10px;box-shadow:inset 0 0 0 .5px var(--vg-hl);opacity:.35;transition:opacity .3s}
.vg-df-rail.on{opacity:1}
.vg-df-rail header{display:flex;justify-content:space-between;align-items:baseline;font:600 11.5px/1 var(--eden-text-ui-family)} .vg-df-rail header em{font-style:normal;font-weight:500;color:#8b8c92}
.vg-df-rail .vg-sl{grid-template-columns:46px minmax(20px,1fr) auto}
.vg-df-seg{background:transparent;box-shadow:inset 0 0 0 .5px var(--vg-hl)} .vg-df-seg b{flex:1;padding:5px 4px;text-align:center;font-size:10px}
.vg-df-tag{z-index:3;opacity:0;transition:opacity .25s} .vg-df-tag.on{opacity:1}
/* locks */
.vg-lk-card{position:absolute;left:8%;top:14%;width:34%;--vg-r:8px;--vg-p:8px;transition:outline-color .2s}
.vg-lk-card.is-no{animation:vg-no .4s}
@keyframes vg-no{20%,60%{transform:translateX(-3px)}40%,80%{transform:translateX(3px)}}
.vg-lk-rail{position:absolute;right:6%;top:14%;width:42%;display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:10px;box-shadow:inset 0 0 0 .5px var(--vg-hl)}
.vg-lk-rail header{margin-bottom:4px;font:600 11.5px/1 var(--eden-text-ui-family)}
.vg-lk-row{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-radius:7px;box-shadow:inset 0 0 0 .5px var(--vg-hl);font:500 11px/1.2 var(--eden-text-ui-family);color:#a6a7ab;transition:box-shadow .2s,color .2s}
.vg-lk-row.on{color:#ececef;box-shadow:inset 0 0 0 1px rgba(201,183,255,.7)}
.vg-lk-b{display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:5px;background:none;color:#6f7076}
.vg-lk-b svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.3}
.vg-lk-sh{transition:transform .25s;transform-origin:10.5px 7px;transform:rotate(25deg)}
.vg-lk-row.is-locked .vg-lk-b{color:#f7f8f8} .vg-lk-row.is-locked .vg-lk-sh{transform:none}
.vg-lk-note{position:absolute;left:8%;right:8%;bottom:9%;margin:0;padding:8px 10px;border-radius:8px;box-shadow:inset 0 0 0 .5px rgba(217,178,124,.6);color:#e8d3b0;font:500 11px/1.4 var(--eden-text-ui-family);opacity:0;transition:opacity .25s}
.vg-lk-note.on{opacity:1}
/* capture */
.vg-cp-win{position:absolute;left:6%;top:10%;bottom:10%;width:56%;display:flex;flex-direction:column;border-radius:9px;box-shadow:inset 0 0 0 .5px var(--vg-hl);overflow:hidden}
.vg-cp-url{display:flex;align-items:center;gap:4px;padding:7px 9px;border-bottom:.5px solid var(--vg-hl)}
.vg-cp-url span{width:6px;height:6px;border-radius:50%;background:#2c2c32} .vg-cp-url em{margin-left:8px;font:500 10px/1 var(--eden-text-ui-family);font-style:normal;color:#6f7076}
.vg-cp-site{flex:1;display:flex;flex-direction:column;gap:6px;padding:12px}
.vg-cp-row{flex:1;display:flex;gap:6px;margin-top:6px;padding:4px;border-radius:6px;outline:1px solid transparent;transition:outline-color .2s}
.vg-cp-row i{flex:1;border-radius:4px;background:#ececef center/cover no-repeat}
.vg-cp-row.is-hov{outline-color:rgba(158,231,255,.7)}
.vg-cp-bar{position:absolute;left:50%;bottom:10px;transform:translate(-50%,6px);display:flex;gap:4px;padding:4px;border-radius:10px;background:rgba(20,20,23,.94);box-shadow:inset 0 0 0 .5px var(--vg-hl);white-space:nowrap;opacity:0;transition:opacity .25s,transform .25s}
.vg-cp-bar.on{opacity:1;transform:translate(-50%,0)}
.vg-cp-bar b{padding:5px 9px;border-radius:7px;font:500 10.5px/1.2 var(--eden-text-ui-family);color:#a6a7ab} .vg-cp-bar b.on{color:#0c0c0e;background:#f4f4f5}
.vg-cp-out{position:absolute;right:6%;top:10%;bottom:10%;width:28%;display:flex;flex-direction:column;gap:8px}
.vg-cp-out > div{flex:1;display:flex;flex-direction:column;gap:4px;opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s}
.vg-cp-out > div.on{opacity:1;transform:none}
.vg-cp-out small{font:500 9.5px/1 var(--eden-text-ui-family);color:#8b8c92}
.vg-cp-m{flex:1;min-height:0;display:flex;gap:3px;padding:3px;border-radius:5px;box-shadow:inset 0 0 0 .5px var(--vg-hl)}
.vg-cp-m i{flex:1;border-radius:3px;background:#ececef center/cover no-repeat}
.vg-cp-m--ours{box-shadow:inset 0 0 0 1px rgba(201,183,255,.7)} .vg-cp-m--ours i{border-radius:6px}
/* notes */
.vg-nt{position:absolute;left:6%;top:14%;width:44%;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:10px;box-shadow:inset 0 0 0 .5px var(--vg-hl)}
.vg-nt small,.vg-nt-i small{font:600 9px/1 var(--eden-text-ui-family);letter-spacing:.1em;text-transform:uppercase;color:#6f7076}
.vg-nt p{min-height:54px;font:12.5px/1.45 var(--eden-text-body-family);color:#ececef}
.vg-nt s{align-self:flex-start;padding:5px 11px;border-radius:999px;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.3);color:#ececef;font:600 10.5px/1 var(--eden-text-ui-family);text-decoration:none;transition:background .2s,color .2s}
.vg-nt s.on{background:#f4f4f5;color:#0c0c0e}
.vg-nt-hub{position:absolute;right:6%;top:14%;width:38%;display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:10px;box-shadow:inset 0 0 0 .5px var(--vg-hl)}
.vg-nt-hub header{display:flex;gap:6px;align-items:baseline;margin-bottom:2px;font:600 11.5px/1 var(--eden-text-ui-family)} .vg-nt-hub header span{color:#8b8c92;font-weight:400}
.vg-nt-i{display:flex;flex-direction:column;gap:3px;padding:7px 9px;border-radius:7px;box-shadow:inset 0 0 0 .5px var(--vg-hl);color:#c2c2c7;font:500 11px/1.3 var(--eden-text-ui-family)}
.vg-nt-new{opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s,box-shadow .35s} .vg-nt-new.on{opacity:1;transform:none;color:#f4f4f5;box-shadow:inset 0 0 0 1px rgba(201,183,255,.7)}
/* adaptive */
.vg-ad-who{position:absolute;z-index:2;left:50%;top:9%;transform:translateX(-50%);display:flex;gap:8px;align-items:baseline;padding:5px 11px;border-radius:999px;box-shadow:inset 0 0 0 .5px var(--vg-hl);white-space:nowrap;font:500 11px/1.2 var(--eden-text-ui-family)}
.vg-ad-who small{color:#6f7076;font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase} .vg-ad-who b{font-weight:600;color:#ececef}
.vg-ad{left:8%;right:8%;top:24%;bottom:9%;gap:4px;padding:12px;background:transparent;box-shadow:inset 0 0 0 .5px var(--vg-hl)}
.vg-ad .vg-r-h{font-size:17px}
.vg-ad-row{flex:1;min-height:0;display:flex;gap:8px;margin-top:8px}
.vg-ad-row .vg-lc{flex:1}
/* a Foundation from a site */
.vg-sf-site{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;padding:12px;background:center/cover no-repeat}
.vg-sf-site .vg-r-h{font-size:17px} .vg-sf-site s{align-self:flex-start;margin-top:5px;padding:4px 9px;border-radius:4px;background:#c9a24a;color:#0c0c0e;font:600 9.5px/1 var(--eden-text-ui-family);text-decoration:none}
.vg-sf-win{position:absolute}
.vg-sf-scan{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#9ee7ff,#c9b7ff,transparent);box-shadow:0 0 12px rgba(158,231,255,.7);transition:opacity .3s}
.vg-sf-fd{position:absolute;right:6%;top:10%;width:30%;display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:10px;box-shadow:inset 0 0 0 .5px var(--vg-hl)}
.vg-sf-fd header{margin-bottom:2px;font:600 11.5px/1 var(--eden-text-ui-family)}
.vg-sf-r{display:flex;flex-direction:column;gap:4px;padding:6px 8px;border-radius:7px;box-shadow:inset 0 0 0 .5px var(--vg-hl);color:#c2c2c7;font:500 10.5px/1.2 var(--eden-text-ui-family);opacity:.25;transition:opacity .3s}
.vg-sf-r.on{opacity:1} .vg-sf-r small{color:#6f7076;font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.vg-sf-r span{display:flex;gap:4px} .vg-sf-r i{width:14px;height:14px;border-radius:4px;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.2)}
/* vector */
.vg-vx{position:absolute;left:6%;top:8%;width:56%;height:62%;overflow:visible}
.vg-vx-pen{fill:none;stroke:#ececef;stroke-width:1.4;stroke-linecap:round;transition:opacity .3s}
.vg-vx-pts rect{fill:#141416;stroke:#716cff;stroke-width:1;transition:opacity .3s} .vg-vx-pts{transition:opacity .3s}
.vg-vx-b{fill:none;stroke:#ececef;stroke-width:1;transition:opacity .3s} .vg-vx-cut{stroke-dasharray:3 3}
.vg-vx-moon{fill:#ececef;transition:opacity .4s}
.vg-vx-tag{left:12%;top:8%;opacity:0;transition:opacity .25s} .vg-vx-tag.on{opacity:1}
.vg-vx-word{position:absolute;left:8%;bottom:12%;margin:0;color:#f4f4f5;font:600 22px/1 var(--eden-text-display-family);opacity:0;transition:opacity .4s}
.vg-vx-word.on{opacity:1}
.vg-pan--vx{top:auto;bottom:10px;width:min(44%,200px);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s} .vg-pan--vx.on{opacity:1;transform:none}
/* a moment of something not built yet says so on its stage (concept-invite.html [data-iv-soon]) */
[data-iv-vg][data-iv-soon]{position:relative}
[data-iv-vg][data-iv-soon]::after{content:"Coming soon";position:absolute;z-index:12;left:12px;top:12px;padding:4px 9px;border-radius:999px;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.3);background:rgba(20,20,23,.8);color:#c2c2c7;font:600 10px/1.2 var(--eden-text-ui-family);letter-spacing:.1em;text-transform:uppercase;pointer-events:none}

/* ── STUDIO'S OWN, AND NOTHING EXTRA (2026-10-27, hero-vignettes.js "SIMPLER, AND STUDIO'S OWN UI ONLY"). Studio's selection is a 2px
   outline in its selection color (--sel #716cff, .pe-sel), its name above it in that color (.label: 11px/16px, 600, no fill), and its
   size centred under it in a small chip (.chip: 10.5px/16px on --sel); the rails are Studio's captured chrome (.sx-rail), fitted ── */
.vg-sel{outline:2px solid #716cff;outline-offset:0}
.vg .vg-tag{padding:0;border-radius:0;background:none;color:#716cff;font:600 11px/16px var(--eden-text-ui-family);white-space:nowrap}
.vg-chip{position:absolute;left:50%;top:calc(100% + 7px);transform:translateX(-50%);padding:0 5px;border-radius:3px;background:#716cff;color:#fff;font:10.5px/16px var(--eden-text-ui-family);white-space:nowrap;opacity:0;transition:opacity .2s}
.vg-sec.vg-sel .vg-chip{opacity:1}
.vg-sec .vg-tag{left:0;top:-20px;opacity:0;transition:opacity .2s} .vg-sec.vg-sel .vg-tag{opacity:1}
/* Studio's rail, at its own size and zoomed to the moment */
.vg-sx{position:absolute;z-index:3;right:5%;top:8%;width:280px;zoom:.74}
.vg-sx [data-sx-id="instrumentBar"]{position:relative!important;inset:auto!important;width:100%!important;max-height:none!important;box-shadow:none!important}
.vg-sx .stack-item.is-on{background:var(--ib-open,#29292c)}
.vg--card .vg-master{left:6%;width:34%}   /* centred by its own rule above */
.vg--card .vg-master .vg-tag{position:absolute;left:0;top:-20px}
/* image effects: the picture is the idea; the preset's name is a caption, not a control */
.vg-cap{position:absolute;z-index:2;left:14px;bottom:12px;margin:0;color:#f7f8f8;font:600 12px/1.3 var(--eden-text-ui-family);text-shadow:0 1px 8px rgba(0,0,0,.6)}
/* Desktop and Mobile: the boards titled as Studio titles them */
.vg-bd small{color:#6f7076}
/* the Foundation: Studio's own panel (studio-govern.js), kept to Brand, beside a card built on it */
.vg-fd-slot{position:absolute;left:5%;top:9%;width:300px;zoom:.72;pointer-events:none}
.vg-fd-slot .fdock{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;max-height:none!important;transform:none!important;box-shadow:none!important}
.vg-fd-slot .fd-body{display:block!important;height:auto!important;overflow:visible!important}
.vg-fd-slot .fd-nav{width:100%!important;max-height:none!important;overflow:visible!important;border:0!important}
.vg--foundation .vg-fd-card{position:absolute;right:6%;top:50%;transform:translateY(-50%);width:38%;margin:0;box-shadow:inset 0 0 0 .5px var(--ln)}
/* the card at a size it reads at (Josh, 2026-10-27: "make this card larger... it looks crammed"): wider, a taller picture, more room inside
   and type a step up; the panel steps down a little so the two never touch */
/* TIDY (Josh, 2026-10-27: "align the card and the studio ui at the top... more spacing between them... maybe even force the same height on
   the ui : card"): the panel and the card are one row, each 40% wide with 10% between them, their tops and bottoms on the same lines */
.vg--foundation .vg-fd-slot{zoom:.6;left:5%;top:10%;bottom:10%;height:auto}
.vg--foundation .vg-fd-slot > .vg-gv{height:100%}
.vg--foundation .vg-fd-slot .fdock{height:100%!important;box-sizing:border-box}
.vg--foundation .vg-fd-card{left:55%;right:5%;width:auto;top:10%;bottom:10%;transform:none;border-radius:12px}
.vg--foundation .vg-fd-card > i{height:auto;flex:1 1 auto}
.vg--foundation .vg-fd-card > div{gap:6px;padding:12px 14px 14px}
.vg--foundation .vg-fd-card em{padding:3px 8px;font-size:9.5px}
.vg--foundation .vg-fd-card p{font-size:15px}
.vg--foundation .vg-fd-card small{font-size:12px}
.vg--foundation .vg-fd-row{margin-top:4px}
.vg--foundation .vg-fd-row s{padding:7px 14px;font-size:11.5px}
/* context: what the agent reads, as words, then what it builds */
.vg-wall--rows .vg-ctx span,.vg-ctx span{box-shadow:none;padding:4px 0;background:none}
/* mood board: the board alone */
.vg--moodboard .vg-mb2{top:10%;height:80%}
/* edges: Studio's selection on the section */
.vg-eg{outline:2px solid #716cff;outline-offset:0}
.vg-eg .vg-tag{left:0;top:-20px}
/* active prompting: no palette, the words and the selection */
.vg-ap-ask{left:8%}
.vg--voice .vg-vo-page{left:8%;right:8%}
.vg-vo-page .vg-tag--sel{left:0;top:-20px}
/* the Components panel (studio-chrome.js), fitted */
.vg-kit-slot{position:absolute;left:5%;top:7%;bottom:7%;width:300px;zoom:.72;overflow:hidden;pointer-events:none}
.vg-kit-slot .dock{position:relative!important;inset:auto!important;transform:none!important;width:100%!important;height:auto!important;max-height:none!important;box-shadow:none!important}
.vg-kit-slot .is-on{background:var(--ib-open,#29292c)!important}
.vg--kits .vg-kit-card{outline:0}
.vg--kits .vg-kit-card s{opacity:.12;transition:opacity .35s} .vg--kits .vg-kit-card s.on{opacity:1}
/* Design, then Live: Studio's page title row, its name and its Live button */
.vg-pt{position:absolute;z-index:2;left:8%;right:8%;top:9%;display:flex;align-items:center;justify-content:space-between;color:#8b8c92;font:500 11px/1 var(--eden-text-ui-family)}
.vg-pt b{padding:3px 7px;border-radius:5px;background:rgba(255,255,255,.08);color:#ececef;font-weight:600;transition:background .2s,color .2s}
.vg-pt b.on{background:#f4f4f5;color:#0c0c0e}
.vg--live .vg-page--live{top:18%}
/* drafts: Studio's rail beside the two pages */
.vg-sx--df{top:16%}
.vg-df{width:52%}
/* locks: the card and Studio's note */
.vg-lk-card{position:absolute;left:50%;top:12%;width:36%;transform:translateX(-50%)}
.vg-lk-card .vg-card{--vg-r:8px;--vg-p:8px}
.vg-lk-tag{position:absolute;left:0;top:-20px}
/* capture: the site is the point; its address, nothing more */
.vg-cp-url{margin:0;padding:7px 10px;border-bottom:.5px solid var(--vg-hl);color:#6f7076;font:500 10px/1 var(--eden-text-ui-family)}
/* notes: the note, then where it went */
.vg-nt{left:8%;top:18%;width:84%;box-shadow:none;padding:0}
.vg-nt-done{position:absolute;left:8%;bottom:18%;margin:0;color:#8b8c92;font:500 12px/1.3 var(--eden-text-ui-family);opacity:0;transition:opacity .35s}
.vg-nt-done.on{opacity:1;color:#ececef}
/* coming soon ones: plain words, no boxes */
.vg-ad-who{box-shadow:none;padding:0}
.vg-ad{box-shadow:none}
.vg-sf-r{box-shadow:none;padding:4px 0}
.vg-sf-fd{box-shadow:none}

/* ── THE FOUR REWORKED 2026-10-27 (card, live, moodboard, locks): Studio's own parts, drawn with Studio's own rules ── */
/* the master's padlock and its note (index.html .padlock, #instrumentBar .context-meta .mb-lock, .mb-lock-note, .linkbtn) */
.vg-sx .context-meta,.vg-gv-rail .context-meta{position:relative}
.vg-sx .context-meta.has-lock .meta-line,.vg-gv-rail .context-meta.has-lock .meta-line{padding-right:26px}
.vg-mb-lock{position:absolute;top:2px;right:0;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin:0;border-radius:6px;color:var(--ib-label,#696a71)}
.vg-mb-lock.on{color:var(--ib-ink,#f4f4f5)}
.vg-mb-lock svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.vg-gv-rail .mb-lock-note{white-space:normal;max-width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:6px;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.05);font-size:12px;line-height:1.4;color:var(--ib-ink,#f4f4f5)}
.vg-gv-rail .mb-lock-note[hidden]{display:none}
.vg-gv-rail .linkbtn{border:0;background:none;color:var(--ib-ink,#f4f4f5);font:inherit;font-size:12px;padding:0;text-align:left}
.vg-sx .master-save[hidden]{display:none}
/* Studio's rail in a governance state, fitted beside the card */
.vg-lk-slot{position:absolute;right:4%;top:6%;bottom:6%;width:300px;zoom:.66;overflow:hidden;pointer-events:none}
.vg-lk-slot [data-sx-id="instrumentBar"]{position:relative!important;inset:auto!important;width:100%!important;max-height:none!important;box-shadow:none!important}
.vg-lk-slot .stack-panel[hidden]{display:none}
.vg--locks .vg-lk-card{left:6%;top:50%;width:34%;transform:translateY(-50%)}
/* Live: from the canvas to a browser, the same page */
.vg-brw{position:absolute;left:8%;right:8%;top:20%;bottom:10%;border-radius:10px;transition:inset .45s cubic-bezier(.3,.7,.2,1),box-shadow .3s}
.vg-brbar{display:flex;align-items:center;gap:5px;height:0;overflow:hidden;padding:0 10px;opacity:0;transition:height .35s,opacity .3s;background:#1b1b1f;border-radius:10px 10px 0 0}
.vg-brbar span{width:7px;height:7px;border-radius:50%;background:#3a3a40}
.vg-brbar em{flex:1;margin-left:8px;padding:3px 9px;border-radius:6px;background:#0f0f11;color:#8b8c92;font:500 10px/1.2 var(--eden-text-ui-family);font-style:normal}
.vg--live .vg-brw .vg-page--live{position:relative;left:auto;right:auto;top:auto;bottom:auto;height:100%}
.vg-canvas.is-browser .vg-brw{left:4%;right:4%;top:7%;bottom:7%;box-shadow:0 0 0 .5px rgba(255,255,255,.18),0 24px 48px -24px rgba(0,0,0,.8)}
.vg-canvas.is-browser .vg-brbar{height:26px;opacity:1}
.vg-canvas.is-browser .vg--live-h,.vg-canvas.is-browser .vg-pt{opacity:0}
.vg-canvas.is-browser .vg-page--live{height:calc(100% - 26px);border-radius:0 0 10px 10px}
.vg-pt{transition:opacity .3s}
/* mood board: a note (Studio's context card), Studio's link, the board, and the board's foot in the rail */
.vg-note2{position:absolute;left:4%;top:9%;width:30%;padding:30px 9px 9px;border-radius:10px;background:var(--panel-2,#16181b);border:1px solid rgba(255,255,255,.08);box-sizing:border-box}
.vg-note2::before{content:"T\2002 Note";position:absolute;top:11px;left:12px;font:500 10px/1 var(--eden-text-ui-family);color:#a6a7a7}
.vg-note2 p{margin:0;padding:8px 10px;border-radius:6px;background:#0f1011;border:1px solid rgba(255,255,255,.08);color:#f7f8f8;font:400 11px/1.45 var(--eden-text-ui-family)}
.vg-link{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none}
.vg-link-l{fill:none;stroke-width:1.5;stroke-linecap:round}
.vg-link-e{fill:#0f1011;stroke-width:2;opacity:0;transition:opacity .3s}
.vg-link-chip{position:absolute;transform:translate(-50%,-50%);height:16px;padding:0 6px;border-radius:8px;box-sizing:border-box;font:600 10px/14px var(--eden-text-ui-family);letter-spacing:.02em;background:#0f1011;color:#a6a7a7;border:1px solid rgba(255,255,255,.14);white-space:nowrap;opacity:0;transition:opacity .3s}
.vg-canvas.is-linked .vg-link-e,.vg-canvas.is-linked .vg-link-chip{opacity:1}
.vg-mbd{position:absolute;left:53%;right:4%;top:12%;bottom:8%}
.vg-mbd-t{position:absolute;left:0;top:-15px;color:#8b8c92;font:500 10px/1 var(--eden-text-ui-family)}
.vg--moodboard .vg-mbd .vg-mb.vg-mb2{position:absolute;left:0;right:0;top:0;bottom:0;width:auto;height:auto;display:grid;grid-template-columns:1.1fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:5px}
.vg-sx--mb{top:auto;bottom:6%;left:4%;right:auto;width:280px;zoom:.56}
.vg-sx--mb .meta-line{display:none}
.vg-sx--mb .bp-foot{display:flex;flex-direction:column;gap:10px;padding:18px 20px 22px}
.vg-sx--mb .bp-foot[hidden]{display:none}
.vg-sx--mb .bp-primary{all:unset;box-sizing:border-box;text-align:center;padding:10px 12px;font-size:12.5px;font-weight:600;background:#f7f8f8;color:#0f1011}
.vg-sx--mb .bp-primary.is-sent{opacity:.45}
.vg-sx--mb .bp-hint{margin:0;font-size:11.5px;line-height:1.45;color:var(--ib-label,#696a71)}

/* the edges demo (2026-10-27): the picture's bottom edge is a clip in one of three shapes; behind the picture's
   lower half the section's box shows the next section's color, so the slant reveals it */
.vg-eg{left:14%;right:14%;width:auto;background:linear-gradient(to bottom,transparent 20%,#e9e7e3 20%);border-radius:8px}   /* centred on its canvas */
.vg-eg-top{border-radius:8px 8px 0 0}   /* its clip is set by the demo, a polygon per shape */

/* ── STUDIO AS IT DRAWS TODAY (hero-vignettes.js "STUDIO AS IT DRAWS TODAY", 2026-10-27 fidelity pass). Measured from the running Studio:
   the rail #121214 with 1px #272729 between its bands, band labels 600 9px uppercase #696a71, 44px rows (label 11px, value 10.5px #c2c2c7),
   fields #242427, the kind chip 8.5px on #1c1c1f; the selection 1px #716cff with white handles, its name in a filled #716cff chip above and
   its size under it; the adaptive handles' 3px arc and 2.5px bar and their dark tag (600 10px on rgba(17,17,19,.92)). Studio's chrome is
   written at its own size inside .vs-rail-in and scaled by .72 (hero-vignettes.js RZ). Flat: hairlines only, no drop shadows anywhere.
   One frame: every panel, page and board sits 16px in from the moment's edges, so their tops and bottoms line up. ── */
.vg{--vs-sel:#716cff;--vs-p:#121214;--vs-ln:#272729;--vs-f:#242427;--vs-ink:#f4f4f5;--vs-val:#c2c2c7;--vs-lab:#696a71;--vs-ff:var(--eden-text-ui-family,"Source Sans 3",system-ui,sans-serif)}
/* the cursor: your own is Studio's dot with no name; the agent's and a teammate's carry theirs (lib/agent-cursor.js, lib/team-presence.js) */
.vg > .vg-cur{width:8px;height:8px;margin:-4px 0 0 -4px;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.vg > .vg-cur[data-who="You"]::after{display:none}
.vg > .vg-cur::after{box-shadow:none;outline:1px solid rgba(255,255,255,.08);outline-offset:-1px}
.vg > .vg-cur[data-who="Sam"]{background:#c9b7ff}
.vg > .vg-cur[data-who="Sam"]::after{padding-left:16px;background:radial-gradient(circle at 8px 50%,#c9b7ff 3px,transparent 3.5px),rgba(15,16,17,.86)}
.vg > .vg-cur[data-who="Sam"].is-press::before{border-color:#c9b7ff}
/* the canvas */
.vs-cv{position:absolute;inset:0;background:#121214;font-family:var(--vs-ff);transition:background .35s}
.vs-cv--dots{background:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.3px) 0 0/16px 16px,#121214}
html:not([data-scheme="light"]) .vg-wall--rows .vs-cv{background:transparent}
html:not([data-scheme="light"]) .vg-wall--rows .vs-cv--dots{background:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.3px) 0 0/16px 16px}
/* the rail (right) and a dock (left) */
.vs-rail{position:absolute;z-index:4;right:16px;top:16px;bottom:16px;width:204px;box-sizing:border-box;overflow:hidden;border:1px solid var(--vs-ln);border-radius:10px;background:var(--vs-p);pointer-events:none}
.vs-rail--l{right:auto;left:16px}
.vs-rail-in{width:280px;height:calc(100% / .72);transform:scale(.72);transform-origin:0 0;font:13px/1.3 var(--vs-ff);color:var(--vs-ink)}
.vs-rail-in p{margin:0}
.vs-h{padding:14px 16px 16px;border-bottom:1px solid var(--vs-ln)}
.vs-k{display:inline-block;padding:4px 7px;border-radius:6px;background:#1c1c1f;color:#82838a;font-size:8.5px;font-weight:620;line-height:1;letter-spacing:.08em;text-transform:uppercase}
.vs-h .vs-n{margin-top:10px;font-size:13px;font-weight:600;color:#a6a7ad}
.vs-h .vs-hn{margin-top:8px;font-size:10.5px;line-height:1.4;color:#dddddf}
.vs-acts{display:flex;gap:6px;margin-top:12px}
.vs-b{display:grid;place-items:center;height:30px;padding:0 12px;border-radius:8px;background:#1c1c1f;color:#dddddf;font-size:11px;font-weight:600}
.vs-b--w{flex:1;background:#f4f4f5;color:#18181b}
.vs-band{padding:4px 0 6px;border-bottom:1px solid var(--vs-ln)}
.vs-rail-in .vs-bl{margin:12px 16px 8px;font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--vs-lab)}
.vs-r{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;font-size:11px;font-weight:600;color:var(--vs-ink)}
.vs-r + .vs-r{border-top:1px solid var(--vs-ln)}
.vs-r em{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:450;color:var(--vs-val)}
.vs-r i,.vs-f i,.vs-cat i{flex:none;width:5px;height:5px;margin-top:-3px;border-right:1.2px solid #595a60;border-bottom:1.2px solid #595a60;transform:rotate(45deg)}
.vs-sw{flex:none;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.vs-fw{padding:6px 16px 10px}
.vs-rail-in .vs-fl{margin:0 0 7px;font-size:10.5px;font-weight:600;color:var(--vs-ink)}
.vs-seg{display:flex;padding:2px;border-radius:8px;background:var(--vs-f)}
.vs-seg b{flex:1;display:grid;place-items:center;height:26px;border-radius:6px;font-size:10.5px;font-weight:500;color:#a6a7ad}
.vs-seg b.on{background:var(--vs-p);color:var(--vs-ink);font-weight:600;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.vs-fs{display:flex;gap:8px}
.vs-f{flex:1;display:flex;align-items:center;gap:8px;height:28px;padding:0 10px;border-radius:6px;background:var(--vs-f);font-size:11px;color:var(--vs-ink);transition:box-shadow .2s}
.vs-f u{text-decoration:none;color:#82838a;font-size:10px} .vs-f em{font-style:normal} .vs-f i{margin-left:auto}
.vs-f.is-on{box-shadow:inset 0 0 0 1px var(--vs-sel)}
.vs-opt{display:grid;place-items:center;height:34px;margin:0 16px 10px;border-radius:8px;background:var(--vs-f);font-size:11px;font-weight:600;color:var(--vs-ink)}
/* the selection */
.vs-s{position:relative}
.vs-sb{position:absolute;z-index:3;inset:0;outline:1px solid var(--vs-sel);opacity:0;transition:opacity .15s;pointer-events:none}
.vs-s.is-sel > .vs-sb{opacity:1}
.vs-sb i{position:absolute;width:5px;height:5px;margin:-3px 0 0 -3px;background:#fff;box-shadow:inset 0 0 0 1px var(--vs-sel);transition:opacity .15s}
.vs-sb i:nth-child(1){left:0;top:0}.vs-sb i:nth-child(2){left:50%;top:0}.vs-sb i:nth-child(3){left:100%;top:0}.vs-sb i:nth-child(4){left:100%;top:50%}
.vs-sb i:nth-child(5){left:100%;top:100%}.vs-sb i:nth-child(6){left:50%;top:100%}.vs-sb i:nth-child(7){left:0;top:100%}.vs-sb i:nth-child(8){left:0;top:50%}
.vs-s.is-grab > .vs-sb{outline-color:transparent} .vs-s.is-grab > .vs-sb i,.vs-s.is-grab > .vs-sb .vs-zc{opacity:0}
.vs-nc,.vs-zc,.vs-bdg{position:absolute;padding:0 5px;border-radius:3px;background:var(--vs-sel);color:#fff;font:600 8px/13px var(--vs-ff);font-style:normal;letter-spacing:0;text-transform:none;white-space:nowrap}
.vs-nc{left:-1px;bottom:calc(100% + 4px)}
.vs-zc{left:50%;top:calc(100% + 5px);transform:translateX(-50%);font-weight:400;transition:opacity .15s}
.vs-bdg{right:-1px;bottom:calc(100% + 4px);font-weight:700;display:none} .vs-bdg.on{display:block}
/* the adaptive handles and their tag */
.vs-arc{position:absolute;z-index:4;top:0;right:0;width:max(var(--r,6px),7px);height:max(var(--r,6px),7px);box-sizing:border-box;border:2.5px solid var(--vs-sel);border-left:0;border-bottom:0;border-top-right-radius:var(--r,6px);opacity:0;pointer-events:none;transition:opacity .12s}
.vs-pb{position:absolute;z-index:4;border-radius:2px;background:var(--vs-sel);opacity:0;pointer-events:none;transition:opacity .12s}
.vs-arc.on,.vs-pb.on{opacity:1}
.vs-pb--l{left:2px;top:50%;width:2.5px;height:36px;margin-top:-18px}
.vs-pb--b{bottom:2px;left:50%;width:36px;height:2.5px;margin-left:-18px}
.vs-tg{position:absolute;z-index:8;margin:14px 0 0 13px;padding:3px 6px;border-radius:5px;background:rgba(17,17,19,.92);color:#f2f2f4;font:600 8.5px/1.2 var(--vs-ff);white-space:nowrap;opacity:0;transition:opacity .12s;pointer-events:none}
.vs-tg.on{opacity:1}
/* a board and the page on it */
.vs-bd{position:absolute;display:flex;flex-direction:column;gap:6px}
.vs-bt{display:flex;align-items:center;gap:6px;height:14px;flex:none;font:600 9px/1 var(--vs-ff);color:#6f7076;transition:opacity .3s}
.vs-bt span{margin-right:auto}
.vs-bt em{font-style:normal;font-weight:500;color:#55565c}
.vs-live{padding:2px 5px;border-radius:5px;background:var(--vs-f);color:var(--vs-val);font-size:8.5px;font-weight:600;transition:background .2s,color .2s}
.vs-live.on{background:var(--vs-sel);color:#fff}
.vs-pg{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background:#0c0c0e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);transition:border-radius .4s,box-shadow .3s}
.vs-pg p{margin:0}
.vs-nav{display:flex;align-items:center;gap:8px;padding:8px 10px;font:500 6.5px/1 var(--vs-ff);color:#a6a7ad}
.vs-nav b{margin-right:auto;font-size:7px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--vs-ink)}
.vs-hero{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.vs-ey{font:600 5.5px/1.2 var(--vs-ff);letter-spacing:.12em;text-transform:uppercase;color:#8b8c92}
.vs-hl{font:500 13px/1.08 var(--eden-text-display-family,var(--vs-ff));letter-spacing:-.01em;color:var(--vs-ink);transition:font-weight .2s}
.vs-btn{display:inline-block;margin-top:3px;padding:3px 7px;border-radius:999px;background:var(--vs-ink);color:#0c0c0e;font:600 6px/1 var(--vs-ff);text-decoration:none}
.vs-card{display:flex;flex-direction:column;gap:5px;padding:var(--p,8px);border-radius:var(--r,6px);background:#fff;color:#18181b;transition:padding .16s,border-radius .16s}
.vs-card > i{display:block;aspect-ratio:1;border-radius:max(calc(var(--r,6px) - 3px),2px);background:#e4e4e6 center/cover no-repeat;transition:border-radius .16s}
.vs-ct{display:flex;align-items:baseline;justify-content:space-between;gap:4px;font:600 8px/1.2 var(--vs-ff)}
.vs-ct p{margin:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vs-ct em{flex:none;font-style:normal;font-weight:500;color:#52525b}
.vs-card > s{display:block;height:18px;border-radius:max(calc(var(--r,6px) - 3px),3px);background:#18181b;color:#fff;font:600 7.5px/18px var(--vs-ff);text-align:center;text-decoration:none;transition:border-radius .16s}
.vs-row3{display:flex;gap:6px;padding:8px 10px 10px}
.vs-row3 .vs-card{flex:1;min-width:0;--r:3px;--p:3px;gap:3px}
.vs-row3 .vs-ct{font-size:5.5px} .vs-row3 .vs-card > s{display:none}
.vs-bd--fit{left:16px;right:236px;top:16px;bottom:16px}
/* component editing: two copies, then the master on Studio's grey master canvas */
.vs-cv--card{--r:6px;--p:8px}
.vs-cv--card.is-m,html:not([data-scheme="light"]) .vg-wall--rows .vs-cv--card.is-m{background:#cdcdcd}
.vs-copies{position:absolute;left:16px;width:208px;top:50%;transform:translateY(-50%);display:flex;justify-content:center;gap:16px;transition:opacity .3s}
.vs-copies .vs-card{width:88px}
.vs-cv--card.is-m .vs-copies{opacity:0}
.vs-mb{position:absolute;left:28px;width:184px;top:44px;bottom:28px;opacity:0;transition:opacity .3s;pointer-events:none}
.vs-cv--card.is-m .vs-mb{opacity:1}
.vs-mbl{position:absolute;left:0;top:-15px;font:600 8.5px/1 var(--vs-ff);color:var(--vs-sel)}
.vs-mbf{position:absolute;inset:0;display:grid;place-items:center;border:3px solid #a0a0a0;border-radius:10px}
.vs-card--m{width:104px}
/* every value is a token */
.vs-sec{padding:var(--pv,6px) 12px;transition:padding .16s,background .8s}
/* the Foundation dock */
.vs-dh{display:flex;align-items:center;gap:10px;height:54px;box-sizing:border-box;padding:0 18px 0 20px;border-bottom:1px solid var(--vs-ln);font-size:13px}
.vs-dh b{font-weight:600;color:var(--vs-ink)} .vs-dh em{font-style:normal;font-size:11px;color:#55565c}
.vs-x{margin-left:auto;font-style:normal;color:#82838a} .vs-x::before{content:"×";font-size:17px;line-height:1}
.vs-rail-in .vs-dt{padding:13px 20px;font-size:15px;font-weight:600;border-bottom:1px solid var(--vs-ln)}
.vs-fdh{display:flex;align-items:center;gap:7px;height:48px;padding:0 20px;border-bottom:1px solid var(--vs-ln);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#82838a}
.vs-fdh em{margin-right:auto;font-style:normal} .vs-fdh b{font-size:15px;font-weight:400}
.vs-fdr{display:flex;align-items:center;gap:10px;height:48px;padding:0 20px;border-bottom:1px solid var(--vs-ln);font-size:11.5px;color:var(--vs-val);transition:background .2s}
.vs-fdr.on{background:#29292c;color:#dddddf}
.vs-fsw{flex:none;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.vs-hex{font-variant-numeric:tabular-nums} .vs-fdr em{margin-left:auto;font-style:normal;font-size:11px;color:var(--vs-lab)}
.vs-pick{display:none;flex-direction:column;gap:9px;padding:12px 20px;border-bottom:1px solid var(--vs-ln)}
.vs-pick.on{display:flex}
.vs-sv{position:relative;height:76px;border-radius:8px}
.vs-sv::before,.vs-sv::after{content:"";position:absolute;inset:0;border-radius:8px}
.vs-sv::before{background:linear-gradient(90deg,#fff,rgba(255,255,255,0))} .vs-sv::after{background:linear-gradient(0deg,#000,rgba(0,0,0,0))}
.vs-sv i{position:absolute;z-index:1;left:82%;top:30%;width:12px;height:12px;margin:-6px 0 0 -6px;box-sizing:border-box;border-radius:50%;border:2px solid #fff}
.vs-hue{position:relative;height:12px;border-radius:6px;background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.vs-hue i{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;box-sizing:border-box;border-radius:50%;border:2px solid #fff}
.vs-hrow{display:flex;gap:6px} .vs-hrow u{flex:none;width:28px;height:28px;border-radius:6px}
.vs-hex2{flex:1;height:28px;box-sizing:border-box;padding:0 8px;border:1px solid var(--vs-ln);border-radius:6px;font-size:12px;line-height:26px;color:#dddddf;font-variant-numeric:tabular-nums}
.vs-dn{display:flex;justify-content:flex-end;gap:6px} .vs-dn b{display:grid;place-items:center;height:28px;padding:0 12px;border-radius:7px;background:#1c1c1f;color:#dddddf;font-size:11.5px;font-weight:600} .vs-dn b.on{background:var(--vs-ink);color:#18181b}
.vs-fd-card{position:absolute;left:236px;right:16px;top:16px;bottom:16px;width:auto;margin:0;transform:none;border-radius:10px}
.vs-fd-card > i{height:auto;flex:1 1 auto}
.vs-fd-card > div{gap:5px;padding:12px 14px 14px}
.vs-fd-card p{font-size:14px} .vs-fd-card small{font-size:11px}
/* Context and Notes: Studio's note card, its picture card, the Generate frame */
.vs-note,.vs-pic,.vs-gen{position:absolute;box-sizing:border-box;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#16181b}
.vs-nh{display:flex;align-items:center;gap:6px;height:24px;flex:none;padding:0 9px;font:500 8.5px/1 var(--vs-ff);color:#a6a7a7}
.vs-nh span{font-size:8px;color:#6f7076}
.vs-nh b{margin-left:auto;padding:2px 6px;border-radius:7px;border:1px solid rgba(255,255,255,.14);font-size:7.5px;font-weight:600;color:#a6a7a7}
.vs-note > p{margin:0 8px 8px;padding:6px 8px;min-height:44px;border-radius:6px;border:1px solid rgba(255,255,255,.08);background:#0f1011;color:#f7f8f8;font:400 9.5px/1.5 var(--vs-ff)}
.vs-note > p b{padding:0 4px;border-radius:4px;background:#2a2a2e;font-weight:500}
.vs-note--a{left:16px;top:16px;width:150px}
.vs-pic{left:16px;top:146px;bottom:16px;width:150px}
.vs-pic i{position:absolute;left:8px;right:8px;top:26px;bottom:8px;border-radius:6px;background:center/cover}
.vs-gen{left:226px;right:16px;top:16px;bottom:16px;display:flex;flex-direction:column}
.vs-gen-in{position:relative;flex:1;margin:0 8px;border-radius:6px;border:1px solid rgba(255,255,255,.06);background:#0f1011;overflow:hidden}
.vs-gen-e{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:#8a8a92;font:400 9.5px/1.3 var(--vs-ff);transition:opacity .3s}
.vs-gen.is-run .vs-gen-e{opacity:.4}
.vs-gen-ui{position:absolute;inset:0;display:flex;flex-direction:column;background:#0c0c0e;opacity:0;transition:opacity .5s}
.vs-gen.is-built .vs-gen-ui{opacity:1} .vs-gen.is-built .vs-gen-e{opacity:0}
.vs-gen-ui > i{flex:0 0 54%;background:center 60%/cover}
.vs-gen-ui > div{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px}
.vs-gen-ui p{margin:0}
.vs-gen-f{display:flex;align-items:center;gap:8px;padding:8px}
.vs-seg--s{flex:1;padding:2px;border-radius:6px} .vs-seg--s b{height:16px;border-radius:4px;font:500 7.5px/1 var(--vs-ff)} .vs-seg--s b.on{font-weight:600}
.vs-run{flex:none;height:20px;padding:0 11px;border-radius:10px;background:var(--vs-ink);color:#0f1011;font:600 8.5px/20px var(--vs-ff);text-decoration:none;transition:opacity .2s}
.vs-gen.is-run .vs-run{opacity:.6}
.vs-cv .vg-link-e{stroke:#c9b7ff}
.vs-cv.is-linked .vg-link-e{opacity:1}
.vs-note--p{left:16px;top:16px;width:194px}
.vs-note--p > p{min-height:74px}
.vs-at{position:absolute;z-index:3;left:28px;top:96px;width:140px;box-sizing:border-box;padding:4px;border-radius:8px;border:1px solid var(--vs-ln);background:#121214;opacity:0;transition:opacity .15s}
.vs-at.on{opacity:1}
.vs-at p{margin:0;padding:4px 6px;border-radius:5px;font:400 9px/1.2 var(--vs-ff);color:var(--vs-val)}
.vs-at p.on{background:var(--vs-f);color:var(--vs-ink)}
.vs-at .vs-at-h{padding:5px 6px 2px;font-size:7px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--vs-lab)}
.vs-gen--p{left:236px}
.vs-gen-pg .vs-nav{padding:6px 8px}
.vs-gp-h{flex:0 0 46%;display:flex;align-items:flex-end;padding:8px;background:center/cover}
.vs-gp-r{flex:1;display:flex;gap:4px;padding:6px 8px 8px} .vs-gp-r i{flex:1;border-radius:3px;background:#e4e4e6 center/cover}
/* mood boards */
.vs-bd--mb{left:16px;right:236px;top:16px;bottom:16px}
.vs-bt--mb small{display:inline-block;margin-right:5px;padding:1px 4px;border:1px solid #3a3a40;border-radius:4px;font-size:6.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8b8c92;vertical-align:1px}
.vs-mbg{display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:repeat(3,minmax(0,1fr));gap:5px;padding:8px}
.vs-mbt{border-radius:5px;overflow:hidden;background:#1a1b1f;opacity:0;transform:scale(.97);transition:opacity .35s,transform .35s}
.vs-mbt.on{opacity:1;transform:none}
.vs-mbt:first-child{display:flex} .vs-mbt:first-child i{flex:1}
.vs-mbt--type{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:6px 9px;color:var(--vs-ink)}
.vs-mbt--type b{font:500 20px/1 Georgia,"Source Serif 4",serif} .vs-mbt--type span{font:400 7px/1.2 var(--vs-ff);color:#a6a7ad}
.vs-mbt--pic{background:center/cover}
.vs-mbt--btn{display:grid;place-items:center} .vs-mbt--btn s{padding:4px 9px;border-radius:999px;background:#c9a24a;color:#0f1012;font:600 7px/1 var(--vs-ff);text-decoration:none}
.vs-mbt--w{display:grid;place-items:center;font:500 8px/1.3 var(--vs-ff);color:var(--vs-val)}
.vs-diff{padding:6px 16px 12px}
.vs-rail-in .vs-diff .vs-bl{margin:10px 0 6px}
.vs-rail-in .vs-dg{margin:10px 0 4px;font-size:11.5px;font-weight:600;color:var(--vs-val)}
.vs-dr{display:flex;align-items:center;gap:6px;min-height:20px;font-size:11.5px;color:var(--vs-lab)}
.vs-dr u{flex:none;width:14px;height:14px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(127,127,127,.35)} .vs-dr i{font-style:normal;font-size:10px;opacity:.7}
.vs-dr span{flex:1} .vs-dr em{font-style:normal;color:var(--vs-val)}
.vs-foot{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.vs-pri{display:block;padding:10px 12px;background:var(--vs-ink);color:#121214;font-size:12.5px;font-weight:600;text-align:center;transition:opacity .3s}
.vs-pri.is-sent{opacity:.45}
.vs-rail-in .vs-hint{font-size:11.5px;line-height:1.45;color:var(--vs-lab)}
/* the tool palette and Listen at its foot */
.vs-pal{position:absolute;z-index:4;left:16px;top:16px;bottom:16px;width:40px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0;border:1px solid var(--vs-ln);border-radius:10px;background:var(--vs-p)}
.vs-t{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;color:#8b8b92}
.vs-t svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.vs-t.on{background:var(--vs-f);color:var(--vs-ink)}
.vs-pal-sp{flex:1}
.vs-mic svg{opacity:.4} .vs-mic[class*="st-"]{color:var(--vs-ink)} .vs-mic[class*="st-"] svg{opacity:1}
.vs-mic::after{content:"";position:absolute;right:4px;top:5px;width:4px;height:4px;border-radius:50%;opacity:0;transform:scale(1.4);transition:background .2s}
.vs-mic.st-listen::after,.vs-mic.st-heard::after{opacity:1;background:#3fb950}
.vs-mic.st-heard::after{animation:vs-ring .9s ease-out infinite}
.vs-mic.st-send::after{opacity:1;background:#d9b27c}
@keyframes vs-ring{from{outline:1px solid rgba(63,185,80,.7);outline-offset:0}to{outline:1px solid rgba(63,185,80,0);outline-offset:4px}}
.vs-bd--vo{left:72px;right:16px;top:16px;bottom:58px}
.vs-sec--v{background:#2a2b30;margin:0 10px;border-radius:4px}
.vs-sec--v.is-done{background:#050506}
.vs-ask{position:absolute;left:72px;right:16px;bottom:16px;height:32px;box-sizing:border-box;display:flex;align-items:center;padding:0 12px;border:1px solid var(--vs-ln);border-radius:10px;background:var(--vs-p);color:#6f7076;font:400 10px/1 var(--vs-ff);opacity:0;transition:opacity .25s}
.vs-ask.on{opacity:1} .vs-ask.is-typed{color:var(--vs-ink)}
/* the Components dock */
.vs-tabs{display:flex;padding:14px 12px 10px} .vs-tabs b{flex:1;text-align:center;font-size:11px;font-weight:500;color:#82838a} .vs-tabs b.on{color:var(--vs-ink);font-weight:600}
.vs-srch{height:32px;margin:0 12px 8px;box-sizing:border-box;padding:0 12px;border:1px solid #2c2d31;border-radius:4px;font-size:11.5px;line-height:30px;color:var(--vs-lab)}
.vs-seg--d{margin:0 12px 10px}
.vs-cat{display:flex;align-items:center;gap:10px;height:44px;padding:0 20px;border-top:1px solid #222225;font-size:12px;color:#dddddf;transition:background .2s}
.vs-cat em{margin-left:auto;font-style:normal;font-size:10.5px;color:#82838a} .vs-cat i{margin-top:0;transform:rotate(-45deg)}
.vs-cat.open{background:#18181b} .vs-cat.open i{margin-top:-3px;transform:rotate(45deg)}
.vs-cl{display:none;padding:0 0 8px;background:#18181b} .vs-cl.on{display:block}
.vs-rail-in .vs-cl p{height:28px;padding:0 20px;font-size:11px;line-height:28px;color:var(--vs-val);transition:background .2s}
.vs-rail-in .vs-cl p.on{background:#29292c;color:var(--vs-ink)}
.vs-kc{position:absolute;left:236px;right:16px;top:16px;bottom:16px;display:flex;flex-direction:column;gap:6px;padding:8px;box-sizing:border-box;border-radius:8px;background:#fff;color:#18181b}
.vs-kc > i{flex:1;min-height:0;border-radius:5px;background:#e4e4e6 center/cover no-repeat}
.vs-kc .vs-ct{font-size:9.5px}
.vs-drop{height:2px;margin:-4px 0 2px;border-radius:1px;background:var(--vs-sel);opacity:0}
.vs-drop.on{opacity:1}
.vs-kb{display:block;height:24px;border-radius:999px;background:#18181b;color:#fff;font:600 8.5px/24px var(--vs-ff);text-align:center;text-decoration:none;opacity:0;transition:opacity .25s}
.vs-kb.on{opacity:1}
.vs-ghost{position:absolute;z-index:7;margin:6px 0 0 8px;padding:4px 9px;border-radius:999px;background:#18181b;border:1px solid rgba(255,255,255,.2);color:#fff;font:600 8px/1 var(--vs-ff);opacity:0;pointer-events:none}
.vs-ghost.on{opacity:.92}
/* Live: the board, then its page run full window, with Canvas | Browser */
.vs-bd--live{left:16px;right:16px;top:16px;bottom:16px;transition:left .45s cubic-bezier(.3,.7,.2,1),right .45s cubic-bezier(.3,.7,.2,1),top .45s cubic-bezier(.3,.7,.2,1),bottom .45s cubic-bezier(.3,.7,.2,1)}
.vs-bd--live .vs-pg{gap:10px;padding:10px}
.vs-lv.is-live,html:not([data-scheme="light"]) .vg-wall--rows .vs-lv.is-live{background:#121214}
.vs-lv.is-live .vs-bd--live{left:0;right:0;top:-20px;bottom:0}
.vs-lv.is-live .vs-bt{opacity:0}
.vs-lv.is-live .vs-pg{box-shadow:none;background:#121214}
.vs-pg.is-live .vg-lc.is-hover s{opacity:1;transform:none}
.vs-pg.is-live .vg-lc.is-hover i u{transform:scale(1.08)}
.vs-vbar{position:absolute;z-index:5;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:2px;padding:3px;border:1px solid var(--vs-ln);border-radius:8px;background:var(--vs-p);opacity:0;transition:opacity .3s;font:500 8.5px/1 var(--vs-ff)}
.vs-lv.is-live .vs-vbar{opacity:1}
.vs-vbar b{padding:4px 7px;font-weight:500;color:#6f7076} .vs-vbar b.on{color:var(--vs-ink);font-weight:600}
/* Moments: the Moments tag beside the board, the Sequence bar */
.vs-bd--mo{left:52px;right:16px;top:16px;bottom:58px}
.vs-bd--mo .vs-pg{overflow:hidden}
.vs-mo-h{position:relative;z-index:2;display:flex;align-items:center;gap:10px;padding:8px 10px;font:500 7.5px/1 var(--vs-ff);color:#a6a7ad;background:#0c0c0e}
.vs-mo-h b{margin-right:auto;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--vs-ink)}
.vs-mo-menu{position:absolute;left:0;right:0;top:100%;display:flex;gap:14px;padding:10px;background:#f4f4f5;color:#18181b;font:600 8px/1 var(--vs-ff);opacity:0;transition:opacity .25s}
.vs-pg.is-menu .vs-mo-menu{opacity:1}
.vs-mo-menu span.is-bold{text-decoration:underline;text-underline-offset:2px}
.vs-mo-hero{flex:1;margin:0 10px 10px;border-radius:4px;background:center/cover}
.vs-mo-bag{position:absolute;z-index:3;top:0;right:0;bottom:0;width:46%;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;padding:10px;background:#f4f4f5;color:#18181b;font:600 8.5px/1.3 var(--vs-ff);transform:translateX(101%);transition:transform .4s cubic-bezier(.6,0,.2,1)}
.vs-pg.is-bag .vs-mo-bag{transform:none}
.vs-mo-bag div{display:flex;align-items:center;gap:6px;font-weight:500} .vs-mo-bag i{flex:none;width:30px;height:30px;border-radius:4px;background:#fff center/cover}
.vs-mo-bag em{font-style:normal;color:#6b6b72}
.vs-mo-bag s{margin-top:auto;height:20px;border-radius:999px;background:#18181b;color:#fff;font:600 8px/20px var(--vs-ff);text-align:center;text-decoration:none}
.vs-seqt{position:absolute;left:22px;top:36px;width:22px;height:22px;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;border:1px solid #3a3a40;background:var(--vs-p);color:#8b8c92;transition:color .2s,border-color .2s}
.vs-seqt svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.3}
.vs-cv.is-seq .vs-seqt{color:var(--vs-ink);border-color:var(--vs-sel)}
.vs-seq{position:absolute;left:52px;right:16px;bottom:16px;height:32px;box-sizing:border-box;display:flex;align-items:center;gap:2px;padding:0 4px 0 10px;border:1px solid var(--vs-ln);border-radius:10px;background:var(--vs-p);font:500 9px/1 var(--vs-ff);color:#8b8c92;opacity:0;transition:opacity .25s}
.vs-seq.on{opacity:1}
.vs-seq span{margin-right:8px;font-weight:600;color:var(--vs-ink)}
.vs-seq b{padding:6px 7px;border-radius:6px;font-weight:500;transition:background .2s,color .2s} .vs-seq b.on{background:var(--vs-f);color:var(--vs-ink)}
.vs-seq .vs-seq-d{margin-left:auto;background:var(--vs-ink);color:#121214;font-weight:600}
/* Drafts */
.vs-df2{position:absolute;left:16px;right:236px;top:16px;bottom:16px;display:flex;gap:12px}
.vs-bd--df{position:relative;flex:1;min-width:0;gap:22px}
.vs-df-hd{display:flex;align-items:center;gap:6px;padding:var(--pv,3px) 8px;border-bottom:1px solid rgba(255,255,255,.08);font:500 6px/1 var(--vs-ff);color:#a6a7ad;transition:padding .16s}
.vs-df-hd b{margin-right:auto;font-size:6.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--vs-ink)}
.vs-df-b{flex:1;display:flex;flex-direction:column;gap:7px;padding:10px 8px}
.vs-df-b .vs-hl{font-size:11px} .vs-df-b i{flex:1;border-radius:3px;background:#e4e4e6 center/cover}
/* Capture: Browse with its capture palette, the tray's two paths, then the labelled row */
.vs-brw{position:absolute;inset:16px;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--vs-ln);border-radius:10px;background:var(--vs-p);transition:opacity .4s}
.vs-cv.is-row .vs-brw{opacity:0}
.vs-brw-bar{display:flex;align-items:center;gap:8px;height:26px;flex:none;padding:0 10px;border-bottom:1px solid var(--vs-ln);font:500 9px/1 var(--vs-ff);color:#6f7076}
.vs-brw-bar em{flex:1;padding:4px 8px;border-radius:6px;background:#1c1c1f;font-style:normal;color:#a6a7ad} .vs-brw-bar b{font-weight:500}
.vs-brw-b{position:relative;flex:1;display:flex;min-height:0}
.vs-cpal{display:flex;flex-direction:column;gap:3px;padding:6px;border-right:1px solid var(--vs-ln)}
.vs-cpal .vs-t{width:24px;height:24px}
.vs-site{flex:1;display:flex;flex-direction:column;gap:6px;padding:0 12px 12px;background:#0c0c0e}
.vs-site .vs-nav{padding:8px 0} .vs-site .vs-hl{margin:0;font-size:12px}
.vs-site [data-part]{flex:1;min-height:0;padding:3px;border-radius:4px;outline:1.5px solid transparent;transition:outline-color .2s}
.vs-site [data-part].is-hov{outline-color:var(--vs-sel)}
.vs-cp-r{display:flex;gap:4px;height:100%} .vs-cp-r i{flex:1;border-radius:3px;background:#e4e4e6 center/cover}
.vs-cp-r--ours i{border-radius:8px}
.vs-tray{position:absolute;z-index:3;left:50%;bottom:10px;transform:translate(-50%,6px);display:flex;align-items:center;gap:6px;padding:5px 5px 5px 10px;border:1px solid var(--vs-ln);border-radius:10px;background:var(--vs-p);font:500 9px/1 var(--vs-ff);color:var(--vs-val);white-space:nowrap;opacity:0;transition:opacity .25s,transform .25s}
.vs-tray.on{opacity:1;transform:translate(-50%,0)}
.vs-tray span{margin-right:4px} .vs-tray b{padding:5px 8px;border-radius:7px;background:var(--vs-f);color:var(--vs-ink);font-weight:600;transition:background .2s,color .2s} .vs-tray b.on{background:var(--vs-ink);color:#121214}
.vs-cprow{position:absolute;inset:16px;display:flex;gap:12px;opacity:0;transition:opacity .4s;pointer-events:none}
.vs-cv.is-row .vs-cprow{opacity:1}
.vs-cprow > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s}
.vs-cprow > div.on{opacity:1;transform:none}
.vs-cprow p{margin:0;font:600 9.5px/1.2 var(--vs-ff);color:var(--vs-ink)}
.vs-cprow .vs-cp-r{flex:1;min-height:0;height:auto;flex-direction:column;padding:6px;border-radius:6px;background:#0c0c0e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
/* Desktop and Mobile */
.vs-bd--d{left:16px;right:156px;top:16px;bottom:16px}   /* Desktop takes what Mobile leaves, so a wider moment shows a wider Desktop (2026-10-28) */
.vs-bd--m{right:16px;width:124px;top:16px;bottom:16px}
.vs-dsk{flex:1;display:flex;align-items:center;gap:10px;padding:6px 12px 12px}
.vs-dsk > div{flex:1} .vs-dsk > i{flex:1;align-self:stretch;border-radius:4px;background:center/cover}
.vs-dsk .vs-hl{font-size:14px}
.vs-mnav{display:flex;justify-content:space-between;padding:8px;font:700 6.5px/1 var(--vs-ff);letter-spacing:.06em;text-transform:uppercase;color:var(--vs-ink)} .vs-mnav span{color:#a6a7ad}
.vs-mob{flex:1;display:flex;flex-direction:column;gap:10px;padding:4px 8px 10px}
.vs-mt .vs-hl{font-size:11px}
.vs-mi{display:block;height:46%;border-radius:4px;background:center/cover}
/* co-work */
.vs-bd--cw{right:16px}
.vs-cw-h{display:flex;flex-direction:column;gap:3px;padding:10px 12px 4px}
.vs-cw-h.is-bold .vs-hl{font-weight:700}
.vs-bd--cw [data-row] .vs-card{opacity:0;transform:scale(.94);transition:opacity .35s,transform .35s}
.vs-bd--cw [data-row] .vs-card.on{opacity:1;transform:none}
.vs-bd--cw .vs-row3 .vs-ct{font-size:7px}
/* image effects: the preset's name in Studio's dark tag */
.vg-cap{left:16px;bottom:16px;padding:3px 7px;border-radius:5px;background:rgba(17,17,19,.92);color:#f2f2f4;font:600 10px/1.3 var(--vs-ff);text-shadow:none}
/* locks: Studio's governance rail in the moment's rail slot, the copy in the canvas slot */
.vg--locks .vg-lk-slot{right:calc(16px / .66);top:calc(16px / .66);bottom:calc(16px / .66);width:300px;box-sizing:border-box;border:1px solid #272729;border-radius:12px;background:#121214}
.vg--locks .vg-lk-card{left:32px;width:150px;top:50%;transform:translateY(-50%)}
/* a Foundation from a site (coming soon): one frame, flat */
.vg--sitefd .vg-cp-win{left:16px;top:16px;bottom:16px}
.vg--sitefd .vg-sf-fd{top:16px;right:16px}
.vg-sf-scan{box-shadow:none}
/* flat, everywhere (Josh, 2026-10-27: "no dropshadows on the ui") */
.vg-wall .vg-open:hover,html[data-scheme] .vg-wall .vg.vg-open:hover{transform:none;box-shadow:inset 0 0 0 1px rgba(201,183,255,.4)}
.vg-wall--rows .vg-open:hover{box-shadow:inset 0 0 0 .5px rgba(255,255,255,.32)}
.vg-cur{box-shadow:0 0 0 1px rgba(0,0,0,.3)}
/* room for the selection's chips between a section and what follows it */
.vs-bd--fit .vs-row3{padding-top:16px}
.vs-cw-h{padding-top:14px}
/* in Live the page clears the view bar */
.vs-lv.is-live .vs-bd--live .vs-pg{padding-bottom:40px}
/* in the feature modal a moment sits on the canvas itself; the master's grey canvas and Live's black are states, so they stay */
.vgm-fit .vs-cv:not(.is-m):not(.is-live){background:transparent!important}
/* Color modes (hero-vignettes.js modes): the rail's inline option list (Studio's .option rows: 34px, 11px, the meta at 9px on the right, the
   chosen one lit with a check, as the radius list draws them) and a section restyled through the Foundation's Color Schemes roles, per mode:
   background-primary, text primary and secondary, the fill button and the text on it (shopfront/foundation/foundation.json) */
.vs-ol{display:none;padding:2px 8px 10px}
.vs-ol.on{display:block}
.vs-rail-in .vs-o{display:flex;align-items:center;gap:8px;height:34px;margin:3px 0 0;padding:0 9px;box-sizing:border-box;border-radius:6px;font-size:11px;color:#a6a7ac;transition:background .15s}
.vs-o em{margin-left:auto;font-style:normal;font-size:9px;color:#6f7077}
.vs-o.hov{background:var(--vs-f)}
.vs-o.on{background:rgba(255,255,255,.075);color:var(--vs-ink)}
.vs-o.on::after{content:"✓";font-size:10px;color:var(--vs-ink)}
.vs-r.open{background:#29292c} .vs-r.open i{margin-top:3px;transform:rotate(225deg)}
.vs-bd--ms .vs-pg{background:#ffffff}
.vs-bd--ms .vs-nav{color:#6e6e6e} .vs-bd--ms .vs-nav b{color:#000}
.vs-ms{--bg:#ffffff;--h:#000000;--s:#6e6e6e;--b:#000000;--bt:#ffffff;display:flex;align-items:center;gap:12px;margin:0 10px;padding:16px 12px;background:var(--bg);transition:background .35s}
.vs-ms[data-m="brand"]{--bg:#3e107a;--h:#ffffff;--s:#d9c6f0;--b:#ffffff;--bt:#8a38f5}
.vs-ms[data-m="subtle"]{--bg:#f0f0f0;--h:#000000;--s:#6e6e6e;--b:#1a1a1a;--bt:#ffffff}
.vs-ms[data-m="dark"]{--bg:#1a1a1a;--h:#ffffff;--s:#d4d4d4;--b:#ffffff;--bt:#000000}
.vs-ms > div{flex:1.3;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.vs-ms .vs-ey,.vs-ms .vs-ms-b{color:var(--s);transition:color .35s}
.vs-ms .vs-hl{color:var(--h);transition:color .35s}
.vs-ms-b{margin:0;font:400 6.5px/1.4 var(--vs-ff)}
.vs-ms .vs-btn{background:var(--b);color:var(--bt);transition:background .35s,color .35s}
.vs-ms > i{flex:1;align-self:stretch;min-height:84px;border-radius:3px;background:#e4e4e6 center/cover}
.vs-bd--ms .vs-row3{padding-top:18px} .vs-bd--ms .vs-card{box-shadow:inset 0 0 0 1px #e6e6e6} .vs-bd--ms .vs-ct p{color:#000}

/* MOBILE, ITS OWN LAYOUT (2026-10-28): the cards stacked on the Mobile board, then a carousel there only, swiped */
.vs-rfm{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;padding:4px 8px 10px;overflow:hidden}
.vs-rfm .vs-card{flex:none;--r:3px;--p:3px;gap:3px;transition:transform .12s linear}
.vs-rfm .vs-card > i{aspect-ratio:2 / 1}
.vs-rfm.is-car{flex-direction:row;align-items:flex-start}
.vs-rfm.is-car .vs-card{width:80%;transform:translateX(var(--x,0px))}
.vs-rfm.is-car .vs-card > i{aspect-ratio:1}