/* ─── studio.css — the studio look (tokens, type, controls) and the rails layout.
 *
 *   Loaded after app.css and shell.css, so the tokens here win. js/studio.js adds
 *   body.studio and builds the rails; everything layout-specific is scoped to it.
 *   Modes: body.showcase (no menus, the view owns the screen) and
 *   body.focus-left / body.focus-right (one panel across the work area).
 *   Mockup: docs/mockups/ex3d-studio-ui.html
 */
/* IBM Plex, bundled (vendor/fonts, SIL OFL) so the app keeps its type offline */
@font-face{font-family:"IBM Plex Sans";src:url(../vendor/fonts/plex-sans-latin.woff2) format("woff2");font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../vendor/fonts/plex-mono-400-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../vendor/fonts/plex-mono-500-latin.woff2) format("woff2");font-weight:500 700;font-style:normal;font-display:swap}
:root{
  --bg:#0B0D10; --panel:#13161A; --panel2:#1A1E23; --hover:#21262C;
  --line:#262B31; --line2:#323841;
  --ink:#E3E6E9; --mut:#7C848E; --dim:#565D66;
  --accent:#D6A461; --accent2:#E6BD85; --accent-soft:rgba(214,164,97,.14); --on-accent:#1B1408;
  --cyan:#58C4DC; --good:#6FCF97; --danger:#E5484D; --radius:9px;
  --sans:"IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --mono:"IBM Plex Mono", Consolas, ui-monospace, "SF Mono", monospace;
  --rail-l:56px; --panel-l:272px; --panel-r:304px; --rail-r:60px;
  color-scheme:dark;
}
body{font-family:var(--sans);font-size:13px;-webkit-font-smoothing:antialiased}
h3{font:500 10.5px var(--sans);letter-spacing:.08em;color:var(--dim)}
.numbox,.sb-xy,.s3-status,.brand .build,kbd,.kbd{font-family:var(--mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:1.5px solid var(--accent);outline-offset:1px}
::selection{background:rgba(214,164,97,.35)}
*{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}

/* ── shared controls ── */
.mbtn,.wbtn,.abtn,.tool,.mini,.sel,select.sel,.numbox,.txt{border-radius:8px;border-color:var(--line)}
.wbtn,.mbtn{background:var(--panel2)}
.wbtn:hover,.mbtn:hover,.abtn:hover,.tool:hover{background:var(--hover);border-color:var(--line2)}
.mbtn.primary,.wbtn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.mbtn.primary:hover,.wbtn.primary:hover{background:var(--accent2)}
.mini:hover{background:var(--hover)}
.numbox,.txt,select.sel,.sel{background:var(--bg)}
.tool{background:none;border-color:transparent;height:34px;font-size:12px}
.tool.active{background:var(--accent-soft);border-color:transparent;color:var(--accent);font-weight:500;box-shadow:inset 2px 0 0 var(--accent)}
.toolbar{gap:2px;grid-template-columns:minmax(0,1fr)}   /* one column in the rail: long names cropped the second */
.ctx-menu,.popover{background:var(--panel);border-color:var(--line2);border-radius:11px;box-shadow:0 18px 48px rgba(0,0,0,.55)}
.ctx-item{border-radius:7px}
.ctx-item:hover{background:var(--hover)}
.toast{background:var(--panel2);border-color:var(--line2);border-radius:10px}
.em-card{background:var(--panel);border-color:var(--line2);border-radius:14px}
.em-wrap{background:rgba(6,8,10,.72);backdrop-filter:blur(3px)}
.statusbar{background:rgba(11,13,16,.9);border-top:1px solid var(--line)}
.sb-chip.on{color:#06161B}
.sheet3d-bar{background:rgba(19,22,26,.9);border-color:var(--line);border-radius:12px;backdrop-filter:blur(8px)}
.s3-opt{background:transparent}
.s3-opt.on{background:var(--panel2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
.s3-status{color:var(--accent)}
.zhint{background:rgba(19,22,26,.86);border-color:var(--line);backdrop-filter:blur(8px)}

/* scrub field (inspector.js rangeCtrl): drag sideways, click to type */
.scrub{position:relative;flex:1;height:30px;display:flex;align-items:center;gap:8px;padding:0 10px;border-radius:8px;
  background:var(--bg);border:1px solid var(--line);cursor:ew-resize;overflow:hidden;user-select:none;touch-action:none}
.scrub::before{content:"";position:absolute;inset:0 auto 0 0;width:calc(min(1,max(0,var(--f,0))) * 100%);background:var(--panel2);border-right:1px solid var(--line2);pointer-events:none}
.scrub:hover{border-color:var(--line2)}
.scrub.drag,.scrub:focus-visible{border-color:var(--accent);outline:0}
.scrub.drag::before{border-right-color:var(--accent)}
.scrub .sc-lab,.scrub .sc-val{position:relative;pointer-events:none;white-space:nowrap}
.scrub .sc-lab{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--ink);font-size:12px}
.scrub .sc-val{font:500 12px var(--mono);font-variant-numeric:tabular-nums}
.scrub .sc-input{position:absolute;inset:0;width:100%;border:0;border-radius:7px;background:var(--bg);color:var(--ink);padding:0 10px;text-align:right;font:500 12px var(--mono);outline:none}
.scrub.typing{cursor:text}
.row:has(> .scrub){margin:5px 0}

/* ════════════════════════════════════════════════════════════════════════
   Studio layout (body.studio, desktop only — mobile keeps its bottom drawer)
   ════════════════════════════════════════════════════════════════════════ */
body.studio .board-tabs,body.studio .menubar,body.studio .mb-quick{display:none}

/* top bar: status and the few constant actions */
body.studio .topbar{height:52px;gap:10px;padding:0 12px 0 10px;background:var(--bg);border-bottom:1px solid var(--line)}
body.studio .brand{gap:10px}
body.studio .brand .dot{width:34px;height:34px;border-radius:9px;background:var(--panel2);border:1px solid var(--line);position:relative}
body.studio .brand .dot::after{content:"";position:absolute;inset:9px;border:1.6px solid var(--accent);transform:rotate(45deg) scale(.78);border-radius:2px}
body.studio .brand-name{display:none}
body.studio .brand .build{font-size:10px;color:var(--dim)}
body.studio .ws-name{background:transparent;border:1px solid transparent;font:600 14px var(--sans);padding:3px 6px;margin-left:-6px;width:210px}
body.studio .ws-name:hover{border-color:var(--line)}
body.studio .ws-name:focus{border-color:var(--accent);background:var(--panel)}
.st-proj{display:flex;flex-direction:column;min-width:0}
.st-crumb{display:flex;align-items:center;gap:7px;height:34px;padding:0 10px;border-radius:9px;border:1px solid var(--line);background:none;color:var(--ink);cursor:pointer;white-space:nowrap;max-width:260px}
.st-crumb:hover{background:var(--panel2)}
.st-crumb .st-k{color:var(--accent)}
.st-crumb .st-n{flex:0 1 auto;max-width:170px;overflow:hidden;text-overflow:ellipsis}
.st-crumb .st-sub{flex:0 100 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--mut)}
.st-ib{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;border:0;background:none;color:var(--mut);cursor:pointer;font-size:16px}
.st-ib:hover{background:var(--panel2);color:var(--ink)}
.st-grow{flex:1}
.st-btn{display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:none;color:var(--mut);cursor:pointer;white-space:nowrap;font:500 12.5px var(--sans)}
.st-btn:hover{color:var(--ink);border-color:var(--line2)}
.st-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.st-btn.primary:hover{background:var(--accent2)}
.st-btn kbd{font-size:10px;color:var(--dim);border:1px solid var(--line2);border-radius:4px;padding:0 4px}
svg.st-i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* rails */
body.studio .main{display:grid;grid-template-columns:var(--rail-l) var(--panel-l) minmax(0,1fr) var(--panel-r) var(--rail-r);grid-template-areas:"lrail left stage right rrail"}
.st-rail{display:none}
body.studio .st-rail{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0;background:var(--bg);min-height:0;overflow:auto}
body.studio .st-rail.l{grid-area:lrail;border-right:1px solid var(--line)}
body.studio .st-rail.r{grid-area:rrail;border-left:1px solid var(--line)}
.st-rb{width:48px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 6px;border-radius:9px;border:0;background:none;color:var(--mut);font:10px var(--sans);cursor:pointer}
.st-rb svg.st-i{width:18px;height:18px}
.st-rb:hover{color:var(--ink);background:var(--panel)}
.st-rb.on{color:var(--accent);background:var(--accent-soft)}
.st-rail .st-push{margin-top:auto}
body.studio .left{grid-area:left;width:auto;border-right:1px solid var(--line)}
body.studio .right{grid-area:right;width:auto;border-left:1px solid var(--line)}
body.studio .stage{grid-area:stage}
body.studio .left,body.studio .right{background:var(--panel);min-width:0}
body.studio:not(.is-mobile) .left>.panel:not(.st-on){display:none!important}
body.studio:not(.is-mobile) .left>.panel.st-on{flex:1 1 auto;min-height:0}
body.studio:not(.is-mobile) .right>.panel:not(.st-on){display:none!important}
body.studio:not(.is-mobile) .right>.panel.st-on{flex:1 1 auto;min-height:0}
body.studio .panel{padding:0 10px 14px;border-bottom:0}
body.studio .panel>h3{display:flex;align-items:center;gap:8px;margin:0 -10px 6px;padding:14px 14px 8px;font:600 15px var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);position:sticky;top:0;background:var(--panel);z-index:3}
body.studio .panel>h3 .st-h3-t{flex:1}
body.studio .panel>h3 .st-ib{width:28px;height:28px;font-size:14px}
body.studio .sticky{margin:10px 4px 0}
body.studio .panel.folded>*:not(h3){display:revert}

/* sheets list */
.st-sheet{display:flex;align-items:center;gap:10px;width:100%;height:46px;padding:0 8px;border:0;border-radius:8px;background:none;color:var(--ink);cursor:pointer;text-align:left}
.st-sheet:hover{background:var(--panel2)}
.st-sheet.on{background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent)}
.st-sheet .st-kind{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;background:var(--panel2);border:1px solid var(--line);color:var(--mut);flex:none}
.st-sheet.on .st-kind{color:var(--accent);border-color:rgba(214,164,97,.4)}
.st-sheet .st-t{flex:1;min-width:0}
.st-sheet .st-t b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-sheet .st-t small{display:block;color:var(--mut);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-label{font:500 10.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding:14px 6px 6px;display:flex;justify-content:space-between}

/* project + library panels reuse the context-menu items, laid flat */
.st-menu{display:flex;flex-direction:column}
.st-menu .ctx-item{padding:6px 8px}
.st-menu .ctx-sep{margin:4px 6px}
.st-menu .ctx-item.has-sub{flex-wrap:wrap}
.st-menu .ctx-sub,.st-menu .ctx-item.has-sub:hover>.ctx-sub{display:none}
.st-menu .ctx-item.has-sub.open>.ctx-sub{display:block;position:static;flex-basis:100%;margin:4px 0 2px 18px;padding:0;min-width:0;background:none;border:0;border-left:1px solid var(--line);border-radius:0;box-shadow:none}
.st-menu .ctx-item.has-sub.open,.st-menu .ctx-item.has-sub.open:hover{background:none}
.st-menu .ctx-item.has-sub.open>.ca{transform:rotate(90deg)}
.st-card{display:flex;align-items:center;gap:10px;width:100%;padding:10px;margin:0 0 6px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);cursor:pointer;text-align:left}
.st-card:hover{border-color:var(--line2)}
.st-card b{display:block;font-weight:500}
.st-card small{display:block;color:var(--mut);font-size:11px}
.st-card .st-kind{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line);color:var(--accent);flex:none}

/* layers (chrome.js tree) */
body.studio .lt-layer{height:30px;padding:0 4px;border-radius:7px;font-weight:500}
body.studio .lt-layer:hover{background:var(--panel2)}
body.studio .lt-el{height:28px;border-radius:7px}
body.studio .lt-el.sel{background:var(--accent-soft);color:var(--ink);box-shadow:inset 2px 0 0 var(--accent)}
body.studio .lt-count{font-family:var(--mono);color:var(--dim)}

/* inspector */
body.studio .sec-title{font:500 10.5px var(--sans);letter-spacing:.08em;color:var(--mut);border-top-color:var(--line);margin-top:14px;padding-top:12px}
body.studio .el-type{color:var(--accent)}
body.studio .row .rlab{color:var(--mut)}

/* ════ modes ════ */
body.studio .main,body.studio .topbar{transition:grid-template-columns .25s ease}
/* Showcase: every menu collapses; the view owns the screen */
body.showcase .topbar{display:none!important}
body.showcase .main{grid-template-columns:0 0 minmax(0,1fr) 0 0!important}
body.showcase .st-rail,body.showcase .left,body.showcase .right{visibility:hidden;overflow:hidden;border:0}
.st-showbar{display:none}
body.showcase .st-showbar{display:flex;position:absolute;z-index:60;top:12px;right:12px;align-items:center;gap:8px;padding:4px 4px 4px 12px;border-radius:11px;background:rgba(19,22,26,.88);border:1px solid var(--line);backdrop-filter:blur(8px);transition:opacity .5s}
.st-showbar b{font-weight:600;white-space:nowrap}
.st-showbar small{color:var(--mut);white-space:nowrap}
body.showcase.st-idle .st-showbar,body.showcase.st-idle .statusbar,body.showcase.st-idle .sheet3d-bar,body.showcase.st-idle .zhint,body.showcase.st-idle .story-bar{opacity:0;transition:opacity .6s}
/* Focus: one side panel spreads across the work area; the rails stay */
body.focus-left .main{grid-template-columns:var(--rail-l) minmax(0,1fr) 0 0 var(--rail-r)!important}
body.focus-right .main{grid-template-columns:var(--rail-l) 0 0 minmax(0,1fr) var(--rail-r)!important}
body.focus-left .stage,body.focus-left .right,body.focus-right .stage,body.focus-right .left{visibility:hidden;overflow:hidden;border:0}
body.focus-left .left>.panel.st-on,body.focus-right .right>.panel.st-on{padding:0 28px 28px}
body.focus-left .panel>h3,body.focus-right .panel>h3{margin:0 -28px 10px;padding:18px 28px 12px;font-size:18px}
body.focus-left .toolbar{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
body.focus-left .tpl-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
body.focus-right .inspector{columns:2 340px;column-gap:28px}
body.focus-right .inspector>*{break-inside:avoid}
.st-focus-note{display:none;font:400 12px var(--sans);color:var(--mut)}
body.focus-left .left .st-focus-note,body.focus-right .right .st-focus-note{display:inline}

/* mobile: the rails and modes step aside for the bottom drawer */
body.is-mobile .st-rail,body.is-mobile .st-hide-m{display:none!important}
body.studio.is-mobile .main{display:flex}
@media (prefers-reduced-motion:reduce){body.studio .main{transition:none}}

/* ════ view helpers (js/navhelpers.js) ════ */
.nh{display:none}
body.studio .nh{display:block;position:absolute;inset:0;pointer-events:none;z-index:34}
.nh-float{position:absolute;display:flex;align-items:center;gap:2px;padding:4px;border-radius:11px;background:rgba(19,22,26,.88);border:1px solid var(--line);backdrop-filter:blur(8px);pointer-events:auto;transition:opacity .25s}
.nh-float[hidden],.nh-cube[hidden]{display:none}
.nh-size{top:12px;left:12px;padding:6px 10px;font:500 11.5px var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.nh-size em{font-style:normal;color:var(--dim);margin:0 4px}
.nh-hint{left:12px;bottom:38px;gap:12px;padding:6px 12px;font-size:11px;color:var(--mut);pointer-events:none}
.nh-hint b{color:var(--ink);font-weight:500}
.nh-cluster{right:12px;bottom:38px}
.nh-b{width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:8px;background:none;color:var(--mut);cursor:pointer}
.nh-b:hover{background:var(--panel2);color:var(--ink)}
.nh-b.on{color:var(--accent);background:var(--accent-soft)}
.nh-sep{width:1px;height:18px;background:var(--line2);margin:0 3px}
/* the view cube: three skewed faces + an ISO chip */
.nh-cube{position:absolute;right:16px;bottom:88px;width:78px;height:92px;pointer-events:auto}
.nh-face,.nh-iso{position:absolute;border:1px solid var(--line2);background:rgba(26,30,35,.92);color:var(--mut);font:600 9px var(--sans);letter-spacing:.06em;display:grid;place-items:center;cursor:pointer;padding:0}
.nh-face:hover,.nh-iso:hover{color:var(--accent);border-color:var(--accent);z-index:1}
.nh-top{left:19px;top:2px;width:40px;height:23px;transform:skewX(-30deg);border-radius:3px}
.nh-front{left:7px;top:26px;width:32px;height:38px;transform:skewY(30deg);border-radius:3px}
.nh-right{left:39px;top:26px;width:32px;height:38px;transform:skewY(-30deg);border-radius:3px}
.nh-iso{left:19px;top:72px;width:40px;height:18px;border-radius:9px}
.nh[data-kind="3d"] ~ .zhint,body.studio #stage>.zhint{display:none}
/* the render bar moves to the top-right; its fold pill follows */
body.studio .sheet3d-bar{left:auto;right:12px;top:12px;transform:none;max-width:calc(100% - 200px);gap:4px;padding:4px}
body.studio .sheet3d-bar .s3-ic{width:30px;height:30px;min-width:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:3px;color:var(--mut)}
body.studio .sheet3d-bar .s3-ic:hover{background:var(--panel2);color:var(--ink);border-color:transparent}
body.studio .sheet3d-bar .s3-ic.on{background:var(--accent-soft);color:var(--accent);border-color:transparent}
body.studio .sheet3d-bar .st-count{font:500 10px var(--mono)}
body.studio .sheet3d-bar .s3-sep{background:var(--line2);margin:4px 3px}
body.studio .s3-seg{border:0;gap:2px;padding:0;background:none}
body.studio .s3-opt{border-radius:8px;height:30px;padding:0 12px;font:500 11.5px var(--sans);letter-spacing:.03em;text-transform:uppercase}
body.studio .s3-q{height:30px;border-radius:8px;background:var(--bg)}
body.studio .sheet3d-bar .s3-go{height:30px;border-radius:8px}
body.studio .s3-go.stop{background:var(--danger);border-color:var(--danger)}
/* showcase: helpers fade with the rest when idle; the hint row steps aside */
body.showcase .nh-hint{display:none}
body.showcase .nh-cluster,body.showcase .nh-cube{bottom:14px}
body.showcase .nh-cube{bottom:62px}
body.showcase .st-showbar{right:auto;left:50%;transform:translateX(-50%)}
body.showcase.st-idle .nh-float,body.showcase.st-idle .nh-cube{opacity:0;transition:opacity .6s}
body.is-mobile .nh-hint,body.is-mobile .nh-cube{display:none}
/* narrow view: the size chip drops to sit above the hints, clear of the render bar */
body.studio #stage{container-type:inline-size;container-name:stage}
@container stage (max-width:820px){
  .nh-size{top:auto;bottom:38px}
  .nh-hint{display:none}
}

/* ════ Library sidebar (js/catalog.js) ════ */
.cat-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:3px;margin:0 0 8px;border-radius:9px;background:var(--bg);border:1px solid var(--line)}
.cat-tabs button{height:28px;border:0;border-radius:6px;background:none;color:var(--mut);font:500 11.5px var(--sans);cursor:pointer;padding:0}
.cat-tabs button:hover{color:var(--ink)}
.cat-tabs button.on{background:var(--panel2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
.cat-search{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;margin-bottom:6px;border-radius:8px;background:var(--bg);border:1px solid var(--line);color:var(--dim)}
.cat-search:focus-within{border-color:var(--accent)}
.cat-search input{all:unset;flex:1;min-width:0;color:var(--ink);font-size:12px}
.cat-apply{margin:4px 0 2px;padding:8px;border-radius:10px;background:var(--accent-soft);border:1px solid rgba(214,164,97,.35);display:flex;flex-direction:column;gap:6px}
.cat-apply.idle{background:none;border:1px dashed var(--line2)}
.cat-apply-t{font-size:11.5px;color:var(--ink);line-height:1.35}
.cat-apply.idle .cat-apply-t{color:var(--mut)}
.cat-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:2px;border-radius:7px;background:var(--bg)}
.cat-seg button{height:24px;border:0;border-radius:5px;background:none;color:var(--mut);font:500 11px var(--sans);cursor:pointer;padding:0}
.cat-seg button.on{background:var(--accent);color:var(--on-accent)}
.cat-slot{height:26px;font-size:11.5px}
.cat-n{font-family:var(--mono);letter-spacing:0}
.cat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.cat-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 8px;border-radius:10px;border:1px solid var(--line);background:var(--bg);cursor:pointer;min-width:0;user-select:none}
.cat-tile:hover{border-color:var(--line2);background:var(--panel2)}
.cat-tile:focus-visible{outline:1.5px solid var(--accent)}
.cat-tile.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.cat-tile[draggable="true"]:active{cursor:grabbing}
.cat-cap{width:100%;text-align:center;min-width:0}
.cat-cap b{display:block;font-weight:500;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-cap small{display:block;font:10px var(--mono);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-ball{width:58px;height:58px;border-radius:50%;background-size:cover;background-position:center;box-shadow:inset -8px -10px 18px rgba(0,0,0,.5),inset 6px 7px 12px rgba(255,255,255,.22),0 6px 10px -6px rgba(0,0,0,.7)}
.cat-ball.metal{box-shadow:inset -8px -10px 16px rgba(0,0,0,.6),inset 8px 8px 10px rgba(255,255,255,.55),0 6px 10px -6px rgba(0,0,0,.7)}
.cat-ball.glass{opacity:.55;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 8px 8px 12px rgba(255,255,255,.4)}
.cat-sym{position:static;inset:auto;width:64px;height:64px;border-radius:8px;background:rgba(255,255,255,.02)}
.cat-model{width:64px;height:58px;display:grid;place-items:center;border-radius:8px;background:var(--panel2);color:var(--dim);overflow:hidden}
.cat-model img{width:100%;height:100%;object-fit:cover}
.cat-model svg.st-i{width:26px;height:26px}
.cat-badge{position:absolute;top:5px;left:6px;font:600 9.5px var(--mono);color:var(--accent);letter-spacing:.04em}
.cat-edit{position:absolute;top:4px;right:4px;width:24px;height:24px;border:0;border-radius:6px;background:var(--panel2);color:var(--mut);cursor:pointer;opacity:0;font-size:12px}
.cat-tile:hover .cat-edit,.cat-tile:focus-within .cat-edit{opacity:1}
.cat-edit:hover{color:var(--accent)}
.cat-edit.cat-del{top:30px}
.cat-del:hover{color:#ff6b6b}
.cat-ies{color:var(--mut)}
.cat-ies img{width:100%;height:100%;object-fit:cover}
.cat-ies-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 8px}
.cat-ies-hint{font-size:10.5px;color:var(--mut);flex:1 1 100%}
.ies-card{display:flex;gap:10px;align-items:center;margin:8px 0;padding:8px;border:1px solid var(--line,#333);border-radius:8px;color:var(--mut,#999)}
.ies-card b{display:block;color:var(--ink,#eee);font-size:12px}
.ies-card small{display:block;font-size:10.5px;line-height:1.35}
.ies-plot{flex:none}
.cat-new{min-height:96px;border:1px dashed var(--line2);border-radius:10px;background:none;color:var(--mut);cursor:pointer;font:500 11.5px var(--sans)}
.cat-new:hover{color:var(--ink);border-color:var(--accent)}
.cat-new.wide{width:100%;min-height:36px;margin-top:10px}
.cat-import{display:flex;align-items:center;gap:10px;width:100%;padding:10px;margin:4px 0;border-radius:10px;border:1px dashed var(--line2);background:none;color:var(--ink);cursor:pointer;text-align:left}
.cat-import:hover{border-color:var(--accent)}
.cat-import svg.st-i{width:22px;height:22px;color:var(--accent)}
.cat-import b{display:block;font-weight:500}
.cat-import small{display:block;color:var(--mut);font-size:11px}
.cat-busy{font-size:11.5px;color:var(--accent);padding:4px 2px}
.cat-busy[hidden]{display:none}
.cat-body.cat-drop{outline:1.5px dashed var(--accent);outline-offset:4px;border-radius:10px}
#stage.cat-drop{box-shadow:inset 0 0 0 2px var(--accent)}
.cat-tpl .tpl-tools{margin:6px 0}
body.focus-left .cat-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
body.focus-left .cat-ball{width:84px;height:84px}
body.focus-left .cat-sym,body.focus-left .cat-model{width:90px;height:90px}
body.focus-left .cat-tabs,body.focus-left .cat-search{max-width:520px}
body.focus-left .cat-apply{max-width:720px}

/* ════ Material panel (materialmaker.js renderPanel) ════ */
.mm-panel{display:flex;flex-direction:column}
.mm-panelhead{display:flex;gap:6px;align-items:center;margin-bottom:8px}
.mm-panelhead .mm-pick{flex:1;min-width:0;height:30px}
.mm-panelhead .mini.add{height:30px;padding:0 10px}
.mm-sticky{position:sticky;top:50px;z-index:4;background:var(--panel);padding-bottom:8px}
.mm-sticky .mp{display:flex;flex-direction:column;gap:6px}
.mm-sticky .mp-canvas{position:static;width:100%;height:auto;aspect-ratio:3/2;border-radius:10px;border:1px solid var(--line);background:#101317;display:block;cursor:grab}
.mm-sticky .mp-bar{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.mm-sticky .mp-bar .s3-seg{display:flex;gap:2px;padding:2px;border-radius:8px;background:var(--bg);border:1px solid var(--line)}
.mm-sticky .mp-bar .s3-opt{height:24px;padding:0 8px;border-radius:6px;font-size:11px;border:0;color:var(--mut)}
.mm-sticky .mp-bar .s3-opt.on{background:var(--panel2);color:var(--ink)}
.mm-sticky .mp-controls{display:none}
.mm-panel .st-sec{border-top:1px solid var(--line);padding:2px 0}
.mm-panel .st-sec>summary{list-style:none;cursor:pointer;height:34px;display:flex;align-items:center;font:500 10.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.mm-panel .st-sec>summary::-webkit-details-marker{display:none}
.mm-panel .st-sec>summary::after{content:"";margin-left:auto;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.mm-panel .st-sec[open]>summary::after{transform:rotate(45deg)}
.mm-panel .st-sec>summary:hover{color:var(--ink)}
.st-sec-body{display:flex;flex-direction:column;gap:6px;padding:0 0 10px}
.mm-panel .mm-field{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--mut);text-align:left}
.mm-panel .mm-crow{display:flex;align-items:center;gap:10px;height:30px;padding:0 4px 0 10px;border-radius:8px;background:var(--bg);border:1px solid var(--line);font-size:12px;color:var(--ink)}
.mm-panel .mm-crow span{flex:1}
.mm-panel .mm-crow .colbox{width:40px;height:22px;border:0;padding:0;background:none;cursor:pointer}
.mm-panel .mm-maps{display:flex;flex-direction:column;gap:6px}
.mm-panel .mm-map{display:flex;gap:8px;align-items:center;padding:6px;border-radius:9px;border:1px solid var(--line);background:var(--bg)}
.mm-panel .mm-thumb{width:44px;height:44px;flex:none;border-radius:6px;background:var(--panel2) center/cover}
.mm-panel .mm-map-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mm-panel .mm-map-body .sel{height:24px;font-size:11px}
.mm-panel .mm-cutwrap canvas{position:static;width:100%;height:auto;border-radius:8px;border:1px solid var(--line)}
.mm-panel .mm-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border-top:1px solid var(--line);padding-top:10px}
.mm-panel .em-used{flex:1;font-size:11px;color:var(--mut)}
.mm-panel .hint{font-size:11px;color:var(--dim);margin:0}
/* focus-right: the preview grows on the left, settings flow on the right */
body.focus-right .mm-panel{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.6fr);gap:0 28px;align-items:start}
body.focus-right .mm-panelhead{grid-column:1}
body.focus-right .mm-sticky{grid-column:1;grid-row:2 / span 20;top:70px}
body.focus-right .mm-sticky .mp-controls{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:11px;color:var(--mut)}
body.focus-right .mm-panel>.st-sec,body.focus-right .mm-panel>.mm-actions{grid-column:2}

/* ════ closed sides: click the active rail icon to give the view the space ════ */
body.st-left-closed{--panel-l:0px}
body.st-right-closed{--panel-r:0px}
body.st-left-closed:not(.is-mobile) .left,body.st-right-closed:not(.is-mobile) .right{visibility:hidden;overflow:hidden;border:0}
body.st-right-closed.focus-right .right,body.st-left-closed.focus-left .left{visibility:visible}
.st-rb.st-dot{position:relative}
.st-rb.st-dot::after{content:"";position:absolute;top:7px;right:12px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg)}

/* ════ docked panels (js/dock.js) ════ */
.st-dock-host:empty{display:none}
/* the 3D selection editor inside Properties; the 2D inspector steps aside while it shows */
.st-docked.sel3d{position:static;inset:auto;width:auto;max-height:none;overflow:visible;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;opacity:1;pointer-events:auto}
#panel-inspector:has(.st-docked.sel3d:not([hidden])) #inspector-body{display:none}
.st-docked.sel3d .sel3d-head{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:0 0 10px;margin-bottom:6px;border-bottom:1px solid var(--line);background:none}
.st-docked.sel3d .sel3d-head b{font-size:13px;font-weight:600;color:var(--accent);flex-basis:100%;margin-bottom:4px}
.st-docked.sel3d .sel3d-head .em-sp{display:none}
.st-docked.sel3d .sel3d-head .mini{width:auto;height:26px;padding:0 9px}
.st-docked.sel3d .sel3d-body{padding:0;display:flex;flex-direction:column;gap:6px}
.st-docked.sel3d .sel3d-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:center;gap:8px;font-size:12px;color:var(--mut)}
.st-docked.sel3d .sel3d-row input,.st-docked.sel3d .sel3d-row select{width:100%;height:30px;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:0 8px;font-family:var(--mono);font-size:12px}
.st-docked.sel3d .sel3d-row select{font-family:var(--sans)}
.st-docked.sel3d .sel3d-row.tri{grid-template-columns:minmax(0,1fr) repeat(3,minmax(0,.62fr))}
.st-docked.sel3d .sel3d-row.duo{grid-template-columns:minmax(0,1fr) repeat(2,minmax(0,.65fr))}
.st-docked.sel3d .sel3d-row.tri input,.st-docked.sel3d .sel3d-row.duo input{padding:0 4px}
.st-docked.sel3d .sel3d-sub{font-size:11px;color:var(--dim);padding:2px 0}
/* sun & sky, lens and renderer settings, laid flat in their panels */
.st-docked.site-pop{position:static;inset:auto;transform:none;width:auto;max-height:none;overflow:visible;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;opacity:1;pointer-events:auto}
.st-dock-host:has(> .st-docked.site-pop[hidden])::before{content:"Open a 3D view to use these settings.";display:block;font-size:12px;color:var(--mut);padding:6px 2px}
.st-docked.site-pop input[type=range]{accent-color:var(--accent)}
.st-docked.site-pop select,.st-docked.site-pop input[type=number],.st-docked.site-pop input[type=text],.st-docked.site-pop input[type=date],.st-docked.site-pop input[type=time]{background:var(--bg);border:1px solid var(--line);border-radius:7px;color:var(--ink)}
/* maker dialogs: the Editor panel, spread across the work area */
#panel-dock>h3{display:none}
#panel-dock.st-on{padding:0!important;overflow:hidden;display:flex;flex-direction:column}
#panel-dock .st-dock-host{flex:1;min-height:0;display:flex;flex-direction:column}
.st-docked.em-wrap{position:static;inset:auto;z-index:auto;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;flex:1;min-height:0;display:flex;align-items:stretch;justify-content:stretch}
.st-docked.em-wrap[hidden]{display:none}
.st-docked.em-wrap>.em-card{width:100%;max-width:none;height:auto;max-height:none;flex:1;min-height:0;border:0;border-radius:0;box-shadow:none}
body.focus-right #panel-dock.st-on{padding:0!important}
.st-docked.em-wrap>.em-card{overflow:auto}

/* ════ command search (js/commands.js) ════ */
.st-cmd-slot{display:none}
.cmd{position:relative;flex:0 1 360px;min-width:180px}
.cmd-field{display:flex;align-items:center;gap:8px;height:34px;padding:0 8px 0 12px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--dim);cursor:text}
.cmd-field:hover{border-color:var(--line2)}
.cmd-field:focus-within{border-color:var(--accent);color:var(--mut)}
.cmd-field input{all:unset;flex:1;min-width:0;color:var(--ink);font:400 12.5px var(--sans)}
.cmd-field input::placeholder{color:var(--mut)}
.cmd-hint{font:500 10px var(--mono);color:var(--dim);border:1px solid var(--line2);border-radius:4px;padding:1px 5px;white-space:nowrap}
.cmd.open .cmd-hint{display:none}
.cmd-list{display:none;position:absolute;left:0;right:0;top:40px;z-index:9500;max-height:min(460px,70vh);overflow:auto;padding:5px;border-radius:12px;background:var(--panel);border:1px solid var(--line2);box-shadow:0 22px 50px rgba(0,0,0,.6)}
.cmd.open .cmd-list{display:block}
.cmd-head{font:500 10px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding:6px 8px 4px}
.cmd-row{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:10px;height:32px;padding:0 8px;border-radius:7px;cursor:pointer}
.cmd-row.on{background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent)}
.cmd-group{font:500 10px var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmd-row.on .cmd-group{color:var(--accent)}
.cmd-label{font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmd-keys{font:500 10px var(--mono);color:var(--mut);border:1px solid var(--line2);border-radius:4px;padding:1px 5px;white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.cmd-empty{padding:14px 10px;color:var(--mut);font-size:12px}
@media (max-width:1100px){.cmd{flex-basis:240px}.cmd-hint{display:none}}
body.is-mobile .cmd{display:none}

/* ════ Element Maker: the full 3D preview (MatPreview subject) ════ */
#em-3d.mp{height:auto;max-width:none;border:0;border-radius:0;background:none;overflow:visible;display:flex;flex-direction:column;gap:6px}
#em-3d .mp-canvas{position:static;width:100%;height:auto;aspect-ratio:4/3;border-radius:10px;border:1px solid var(--line);background:#101317;display:block;cursor:grab}
#em-3d .mp-bar{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
#em-3d .mp-bar .s3-seg{display:flex;gap:2px;padding:2px;border-radius:8px;background:var(--bg);border:1px solid var(--line)}
#em-3d .mp-bar .s3-opt{height:24px;padding:0 8px;border-radius:6px;font-size:11px;border:0;color:var(--mut)}
#em-3d .mp-bar .s3-opt.on{background:var(--panel2);color:var(--ink)}
#em-3d .mp-controls{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px;font-size:11px;color:var(--mut)}
.em-preview.big3d #em-2d,.em-preview.big3d>.em-ptitle:first-child{display:none}
.em-preview.big3d #em-3d .mp-canvas{aspect-ratio:auto;height:min(64vh,720px)}
.em-ptitle{display:flex;align-items:center;gap:6px}
.em-fields .em-f select.sel{min-width:0;max-width:100%}

/* ════ 3D view cube (navhelpers.js): real faces, turned by the camera ════ */
.nh-cube{display:none!important}
.nh-cube3d{position:absolute;right:26px;top:64px;width:52px;height:78px;pointer-events:auto;perspective:none}
.nh-cube3d[hidden]{display:none}
.nh-cube-body{position:absolute;left:0;top:0;width:52px;height:52px;transform-style:preserve-3d;transition:none}
.nh-cf{position:absolute;left:0;top:0;width:52px;height:52px;margin:0;padding:0;box-sizing:border-box;display:grid;place-items:center;
  font:600 8.5px var(--sans);letter-spacing:.06em;color:var(--mut);background:rgba(28,32,38,.94);border:1px solid var(--line2);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;cursor:pointer;transform-origin:50% 50%}
.nh-cf:hover{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}
.nh-cf-top,.nh-cf-bottom{background:rgba(36,41,48,.96)}
.nh-cube3d .nh-iso{position:absolute;left:8px;top:62px;width:36px;height:16px;border-radius:8px;border:1px solid var(--line2);background:rgba(26,30,35,.92);color:var(--mut);font:600 8.5px var(--sans);letter-spacing:.06em;cursor:pointer;padding:0}
.nh-cube3d .nh-iso:hover{color:var(--accent);border-color:var(--accent)}
body.studio .sheet3d-bar~#nav-helpers .nh-cube3d,#stage .nh .nh-cube3d{top:64px}
body.showcase.st-idle .nh-cube3d{opacity:0;transition:opacity .6s}
body.is-mobile .nh-cube3d{display:none}
/* the performance HUD sits clear of the navigation cluster */
body.studio .perf-hud{bottom:84px;right:12px;border-radius:10px;background:rgba(11,13,16,.86);border-color:var(--line)}

/* top-left: size + the linked camera */
.nh-tl{position:absolute;left:12px;top:12px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none}
.nh-tl .nh-float{position:static;pointer-events:auto}
.nh-cam{gap:8px;padding:4px 4px 4px 10px;font-size:12px;color:var(--ink)}
.nh-cam[hidden]{display:none}
.nh-cam-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.nh-cam-x{height:24px;padding:0 9px;border-radius:7px;border:1px solid var(--line2);background:none;color:var(--mut);cursor:pointer;font:500 11px var(--sans)}
.nh-cam-x:hover{color:var(--ink);border-color:var(--accent)}
@container stage (max-width:820px){ .nh-tl{top:auto;bottom:74px} .nh-tl .nh-size{bottom:auto} }

/* editors docked inside the Library take the panel while open */
#panel-templates:has(#st-dock-left>.em-wrap:not([hidden]))>:not(h3):not(#st-dock-left){display:none!important}
#panel-templates:has(#st-dock-left>.em-wrap:not([hidden]))>h3{display:none}
#panel-templates:has(#st-dock-left>.em-wrap:not([hidden])){padding:0!important;overflow:hidden;display:flex;flex-direction:column}
#st-dock-left{flex:1;min-height:0;display:flex;flex-direction:column}

/* ════ Render + Camera panels (js/renderpanel.js) ════ */
.lens-pop .rp-head{position:sticky;top:0;z-index:2;margin:0 -2px 8px;padding:8px 2px 10px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.lens-pop .rp-seg{display:flex;width:100%}
.lens-pop .rp-seg .s3-opt{flex:1}
.lens-pop .rp-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lens-pop .rp-q{flex:1 1 110px;min-width:0;height:30px}
.lens-pop .rp-go{height:30px;padding:0 12px;border-radius:8px;white-space:nowrap}
.lens-pop .rp-auto{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--mut);cursor:pointer;white-space:nowrap}
.lens-pop .rp-auto input{accent-color:var(--accent);margin:0}
.lens-pop .rp-prog{height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.lens-pop .rp-prog>i{display:block;height:100%;width:0;background:var(--accent);transition:width .35s}
.lens-pop .pop-group{display:flex;align-items:center;gap:6px}
.lens-pop .rp-tag{margin-left:auto;font-size:9.5px;letter-spacing:.02em;text-transform:none;padding:1px 6px;border-radius:6px;border:1px solid var(--line);color:var(--mut);white-space:nowrap}
.lens-pop .rp-tag.restart{color:var(--accent2);border-color:var(--accent-soft);background:var(--accent-soft)}
.lens-pop .rp-dev>span:first-child::after{content:" · device";color:var(--mut);font-size:10px}
.lens-pop .rp-status{font:500 11px var(--mono);color:var(--mut);min-height:14px}
.lens-pop .rp-btns{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
.lens-pop .rp-btns .mini.on{color:var(--accent);border-color:var(--accent)}
.lens-pop .rp-list{display:flex;flex-direction:column;gap:2px;margin:2px 0 10px}
.lens-pop .rp-sub{font-size:11px;color:var(--dim);padding:6px 4px 2px;text-transform:uppercase;letter-spacing:.06em}
.lens-pop .rp-item{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px;border:0;border-radius:7px;background:none;color:var(--ink);font:500 12.5px var(--sans);text-align:left;cursor:pointer}
.lens-pop .rp-bake{display:flex;align-items:center;gap:4px;border-radius:8px}
.lens-pop .rp-bake.on{background:var(--accent-soft)}
.lens-pop .rp-bake .rp-item{flex:1;height:auto;min-height:34px;padding:4px 8px}
.lens-pop .rp-bake .rp-item b{display:block;font-weight:600}
.lens-pop .rp-bake .rp-item small{display:block;color:var(--mut);font-size:10.5px}
.lens-pop .rp-bake .mini{flex:none;width:24px;padding:0}
.lens-pop .rp-item.in{padding-left:18px}
.lens-pop .rp-item:hover:not(:disabled){background:var(--panel2)}
.lens-pop .rp-item:disabled{opacity:.45;cursor:default}
.lens-pop .rp-ic{width:16px;text-align:center;color:var(--mut)}
.rp-chip{position:static;pointer-events:auto;display:flex;align-items:center;gap:8px;height:28px;padding:0 10px;border-radius:9px;border:1px solid var(--line);background:rgba(19,22,26,.88);backdrop-filter:blur(8px);color:var(--ink);font:500 11.5px var(--sans);cursor:pointer;position:relative;overflow:hidden}
#stage>.rp-chip{position:absolute;left:12px;top:52px;z-index:30}
.rp-chip[hidden]{display:none}
.rp-chip b{font-weight:600;color:var(--accent)}
.rp-chip span{font-family:var(--mono);color:var(--mut)}
.rp-chip i{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line)}
.rp-chip u{display:block;height:100%;width:0;background:var(--accent);transition:width .35s}
body.showcase.st-idle .rp-chip{opacity:0;transition:opacity .6s}
.st-docked.lens-pop>.sp-head{display:none}
.lens-pop .rp-btns .mini{width:auto;min-width:0;height:28px;padding:0 10px;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;font-size:12px}
.lens-pop>.mini{width:auto;margin-top:6px}
.lens-pop .rp-item.on{color:var(--accent)}
.lens-pop .sp-row{grid-template-columns:92px minmax(0,1fr) auto}
.lens-pop .sp-row input[type=range]{min-width:0;width:100%}
.lens-pop .sp-val{min-width:52px;white-space:nowrap;font:500 11px var(--mono)}
.cat-light{background:#0d0f12}

/* ════ Sun & sky: physical atmosphere (js/sitepanel.js) ════ */
.site-pop .sp-skybox{position:sticky;top:0;z-index:2;background:var(--panel);padding:6px 0 8px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.site-pop .sp-sky{position:static;display:block;width:100%;height:auto;aspect-ratio:4/1;border-radius:8px;border:1px solid var(--line);image-rendering:auto}
.site-pop .sp-lux{margin:6px 0 0;font:500 11px var(--mono);color:var(--mut)}
.site-pop .sp-rgb{display:flex;gap:4px;min-width:0}
.site-pop .sp-rgb .numbox{width:100%;min-width:0;padding:0 4px}
.site-pop .sp-row:has(.sp-rgb){grid-template-columns:96px minmax(0,1fr)}
.site-pop .sp-row{grid-template-columns:96px minmax(0,1fr) auto}
.site-pop .sp-row .numbox{width:100%;min-width:0}
.site-pop .sp-row>.sp-val{white-space:nowrap;font:500 11px var(--mono)}
.site-pop .sp-row:has(>.sp-val)>.numbox{grid-column:2}
.lens-pop .rp-btns .mini.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
/* showcase slides: pager in the bar, arrows on the edges, a short slide-in */
.st-pager{display:flex;align-items:center;gap:2px;margin-left:4px;padding-left:8px;border-left:1px solid var(--line)}
.st-count{min-width:44px;text-align:center;font-variant-numeric:tabular-nums}
.st-pager .st-ib:disabled,.st-slide-arrow:disabled{opacity:.25;cursor:default}
.st-slide-arrow{display:none}
body.showcase .st-slide-arrow{display:flex;align-items:center;justify-content:center;position:absolute;z-index:59;top:50%;width:48px;height:72px;margin-top:-36px;border:0;border-radius:12px;background:rgba(19,22,26,.55);color:#fff;cursor:pointer;backdrop-filter:blur(6px);transition:opacity .5s,background .2s}
body.showcase .st-slide-arrow:hover:not(:disabled){background:rgba(19,22,26,.85)}
body.showcase .st-slide-arrow svg{width:26px;height:26px}
body.showcase .st-slide-arrow.st-prev{left:14px}
body.showcase .st-slide-arrow.st-next{right:14px}
body.showcase .st-slide-arrow:disabled{opacity:0;pointer-events:none}
body.showcase.st-idle .st-slide-arrow{opacity:0}
body.st-one-slide .st-slide-arrow,body.st-one-slide .st-pager{display:none!important}
@keyframes st-in-r{from{transform:translateX(7%);opacity:0}to{transform:none;opacity:1}}
@keyframes st-in-l{from{transform:translateX(-7%);opacity:0}to{transform:none;opacity:1}}
.stage.st-slide-in-r>canvas,.stage.st-slide-in-r>#media-layer{animation:st-in-r .42s cubic-bezier(.2,.7,.2,1)}
.stage.st-slide-in-l>canvas,.stage.st-slide-in-l>#media-layer{animation:st-in-l .42s cubic-bezier(.2,.7,.2,1)}

/* ── morphedit.js: a morph's mesh while editing it in 3D ── */
.me3d{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.me3d .me-w{stroke:rgba(255,255,255,.55);stroke-width:1}
.me3d .me-f{fill:rgba(62,142,247,.28);stroke:#3e8ef7;stroke-width:2}
.me3d .me-e{stroke:#f5d90a;stroke-width:3.5;stroke-linecap:round}
.me3d .me-v{fill:#fff;stroke:#3e8ef7;stroke-width:1.2}
.me3d .me-vp{fill:#f5d90a;stroke:#1b1f27;stroke-width:1.2}
.me-modes .mini.on{background:var(--accent,#d8a55a);color:#111;border-color:var(--accent,#d8a55a)}

/* ── copyinst.js: "Instance or copy?" ── */
.ci-scrim{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center}
.ci-box{width:min(360px,calc(100vw - 32px));padding:16px;border-radius:16px;background:var(--panel,#141922);border:1px solid var(--line2,var(--line));
  box-shadow:0 18px 50px rgba(0,0,0,.55);color:var(--ink);display:flex;flex-direction:column;gap:8px}
.ci-t{font-weight:600;font-size:14px;margin-bottom:2px}
.ci-b{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 44px 10px 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;font-size:13px}
.ci-b span{color:var(--mut);font-size:11.5px}
.ci-b kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%);font:600 11px var(--mono,monospace);padding:2px 6px;border-radius:5px;border:1px solid var(--line);color:var(--mut)}
.ci-b:hover,.ci-b:focus{border-color:var(--accent,#d8a55a);outline:none}
.ci-rem{font-size:11.5px;color:var(--mut);display:flex;align-items:center;gap:4px;margin-top:2px}

/* ── render/bakeinfo.js: bake & probe debugging ── */
.bki{position:absolute;top:10px;right:10px;z-index:45;width:min(340px,calc(100% - 20px));max-height:calc(100% - 20px);display:flex;flex-direction:column;
  background:rgba(16,20,28,.95);border:1px solid var(--line2,var(--line));border-radius:14px;box-shadow:0 12px 34px rgba(0,0,0,.5);color:var(--ink);font-size:12px}
.bki[hidden]{display:none}
.bki-head{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-bottom:1px solid var(--line)}
.bki-body{overflow-y:auto;padding:8px 12px 12px;display:flex;flex-direction:column;gap:6px}
.bki-sec{margin-top:6px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.bki-kv{display:flex;justify-content:space-between;gap:10px}
.bki-kv span{color:var(--mut)}
.bki-kv b{font-weight:500;text-align:right}
.bki-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bki-ctl{display:flex;align-items:center;gap:5px;color:var(--mut)}
.bki-ctl .sel{padding:3px 6px;font-size:12px}
.bki-probes{display:flex;flex-direction:column;gap:3px}
.bki-probe{display:flex;gap:8px;align-items:center;text-align:left;padding:5px 7px;border-radius:9px;border:1px solid transparent;background:none;color:var(--ink);cursor:pointer}
.bki-probe:hover{background:rgba(255,255,255,.05)}
.bki-probe.on{border-color:#2fb3d6;background:rgba(47,179,214,.1)}
.bki-probe small{display:block;color:var(--mut);font-size:11px}
.bki-dot{flex:0 0 20px;height:20px;border-radius:50%;background:#2fb3d6;color:#081018;font-weight:700;font-size:11px;display:flex;align-items:center;justify-content:center}
.bki-cube canvas{width:100%;image-rendering:pixelated;border-radius:8px;display:block}
.bki3d{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.bki3d .bk-e{stroke:#2fb3d6;stroke-width:1.2;stroke-dasharray:5 4}
.bki3d .bk-e.sel{stroke-width:2.2;stroke-dasharray:none}
.bki3d .bk-stem{stroke:#2fb3d6;stroke-width:1}
.bki3d .bk-p{fill:#2fb3d6;stroke:#081018;stroke-width:1.5}
.bki3d .bk-p.sel{fill:#f5d90a}
.bki3d .dim{opacity:.25}
.bki3d .bk-n{fill:#081018;font:700 9px sans-serif;text-anchor:middle}
.bki .bki-btn{width:auto;height:auto;padding:5px 10px;font-size:12px;color:var(--ink);align-self:flex-start;border-radius:8px}
.bki3d .pb-lab{fill:#2fb3d6;font:600 11px sans-serif;text-anchor:middle;paint-order:stroke;stroke:#081018;stroke-width:3px}