/* ─── 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:6px 8px;background:linear-gradient(180deg,#EBCDA6,#C9A27A 55%,#8E6C4D);-webkit-mask:url('../site/img/eiffel-mark.svg') center/contain no-repeat;mask:url('../site/img/eiffel-mark.svg') center/contain no-repeat}
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-group{display:flex;align-items:center;gap:6px;width:100%;height:28px;margin-top:6px;padding:0 8px;border:0;background:none;color:var(--mut);cursor:pointer;text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.st-group b{flex:1;font-weight:600;color:var(--ink)}
.st-group small{opacity:.7}
.st-group:hover{color:var(--ink)}
.st-sheet.grouped{padding-left:16px}
.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-cf{display:grid;grid-template-columns:11px 1fr 11px;grid-template-rows:11px 1fr 11px;background:rgba(28,32,38,.94)}
.nh-cf:hover{background:rgba(28,32,38,.94);color:var(--mut);border-color:var(--line2)}
.nh-hs{margin:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;min-width:0;min-height:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.nh-hs:hover{background:var(--accent);color:var(--on-accent)}
.nh-hs-c{font:600 8.5px var(--sans);letter-spacing:.06em}
.nh-ring{position:absolute;left:-20px;top:-20px;width:92px;height:92px;border-radius:50%;border:5px solid rgba(120,130,145,.35);box-sizing:border-box;pointer-events:none;transform-origin:46px 46px}
.nh-nesw{position:absolute;width:14px;height:14px;padding:0;border:0;border-radius:50%;background:rgba(26,30,35,.92);color:var(--mut);font:700 8px var(--sans);cursor:pointer;pointer-events:auto}
.nh-nesw:hover{background:var(--accent);color:var(--on-accent)}
.nh-turn{position:absolute;top:-4px;width:16px;height:16px;padding:0;border:0;background:transparent;color:var(--mut);font:600 12px var(--sans);cursor:pointer;opacity:.75}
.nh-turn:hover{color:var(--accent);opacity:1}
.nh-turn-l{left:-14px}.nh-turn-r{right:-14px}
.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-tag.project,.lens-pop .rp-tag.device,.lens-pop .rp-tag.view{color:var(--mut)}
.lens-pop .rp-tag.device{border-style:dashed}
.lens-pop .sp-row .rp-reset{flex:none;width:20px;height:20px;padding:0;margin-left:2px;border:0;border-radius:5px;background:none;color:var(--accent,#d8a55a);cursor:pointer;font-size:13px;line-height:20px}
.lens-pop .sp-row .rp-reset:hover{background:var(--accent-soft)}
.lens-pop .sp-row .rp-reset[hidden]{visibility:hidden;display:inline-block}
.lens-pop .rp-fold{margin:6px 0 2px;border:1px solid var(--line);border-radius:8px;padding:0 8px}
.lens-pop .rp-fold>summary{cursor:pointer;list-style:none;padding:7px 0;font-size:11.5px;color:var(--mut);user-select:none;display:flex;align-items:center;gap:6px}
.lens-pop .rp-fold>summary::-webkit-details-marker{display:none}
.lens-pop .rp-fold>summary::before{content:"";width:0;height:0;border:4px solid transparent;border-left:5px solid currentColor;transition:transform .15s}
.lens-pop .rp-fold[open]>summary::before{transform:rotate(90deg) translate(2px,0)}
.lens-pop .rp-fold>summary:hover{color:var(--ink)}
.lens-pop .rp-fold[open]{padding-bottom:6px}
.lens-pop .rp-lit{flex:1;align-self:center;font-size:12px;color:var(--ink,inherit)}
.lens-pop .sp-row.rp-flash,.site-pop .sp-row.rp-flash{animation:rpFlash 1.6s ease-out}
@keyframes rpFlash{0%,35%{background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent-soft)}100%{background:transparent;box-shadow:none}}
.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}
/* copy / instance chip after a duplicate or paste (js/copyinst.js) */
.ci-chip{position:fixed;left:50%;bottom:72px;transform:translateX(-50%);z-index:880;display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border-radius:12px;
  background:var(--panel,#141922);border:1px solid var(--line2,var(--line));box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:12.5px;max-width:calc(100vw - 32px);flex-wrap:wrap}
.ci-chip .ci-act{padding:5px 10px;border-radius:8px;border:1px solid var(--accent,#d8a55a);background:transparent;color:inherit;font-weight:600;cursor:pointer}
.ci-chip .ci-pref{font-size:11.5px;padding:3px 4px;border-radius:6px;background:transparent;color:var(--mut);border:1px solid var(--line)}
.ci-chip .ci-x{border:0;background:transparent;color:var(--mut);font-size:16px;padding:0 6px;cursor:pointer}
/* Multiply palette (js/multiply.js) */
.mul-pal{position:fixed;left:50%;top:64px;transform:translateX(-50%);z-index:870;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 10px;border-radius:12px;
  background:var(--panel,#141922);border:1px solid var(--line2,var(--line));box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:12.5px;max-width:calc(100vw - 32px)}
.mul-pal .mul-t{font-weight:600}
.mul-pal .mul-seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.mul-pal .mul-seg button{border:0;background:transparent;color:inherit;padding:4px 10px;cursor:pointer;font:inherit}
.mul-pal .mul-seg button.on{background:var(--accent,#d8a55a);color:#111}
.mul-pal .mul-num input{width:56px;padding:3px 4px;border-radius:6px;border:1px solid var(--line);background:transparent;color:inherit;font:inherit}
.mul-pal .mul-meth{padding:3px 4px;border-radius:6px;border:1px solid var(--line);background:transparent;color:inherit;font:inherit}
.mul-pal .mul-tip{color:var(--mut);font-size:11.5px}

/* ════ 3D views: the view owns the whole width between the two rails; the side menus float over it ════
   (body.ov3d is set by Scene.enter for a 3D view). Opening or closing a menu never changes the view's size - so the camera
   is never disturbed - and the menus are a little see-through and slide in from their own side. */
:root{--panel-l-w:272px;--panel-r-w:304px}
body.studio.ov3d:not(.focus-left):not(.focus-right):not(.showcase):not(.is-mobile) .main{position:relative;overflow:hidden;grid-template-columns:var(--rail-l) minmax(0,1fr) var(--rail-r);grid-template-areas:"lrail stage rrail"}
body.studio.ov3d:not(.focus-left):not(.focus-right):not(.showcase):not(.is-mobile) .left,
body.studio.ov3d:not(.focus-left):not(.focus-right):not(.showcase):not(.is-mobile) .right{position:absolute;top:0;bottom:0;z-index:35;grid-area:auto;border:0;
  background:color-mix(in srgb,var(--panel) 82%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);
  box-shadow:0 0 36px rgba(0,0,0,.28);transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .26s ease,visibility 0s}
body.studio.ov3d:not(.focus-left):not(.focus-right):not(.showcase):not(.is-mobile) .left{left:var(--rail-l);width:var(--panel-l-w);border-right:1px solid var(--line)}
body.studio.ov3d:not(.focus-left):not(.focus-right):not(.showcase):not(.is-mobile) .right{right:var(--rail-r);width:var(--panel-r-w);border-left:1px solid var(--line)}
/* panel headers keep their own (opaque) strip so titles stay readable over the picture */
body.studio.ov3d:not(.focus-left):not(.focus-right):not(.showcase):not(.is-mobile) .left>.panel>h3,
body.studio.ov3d:not(.focus-left):not(.focus-right):not(.showcase):not(.is-mobile) .right>.panel>h3{background:color-mix(in srgb,var(--panel) 70%,transparent)}
/* closed: slid out to its own side, then hidden (the delay keeps it visible while it slides) */
body.studio.ov3d.st-left-closed:not(.focus-left):not(.focus-right):not(.showcase):not(.is-mobile) .left{transform:translateX(-106%);opacity:0;pointer-events:none;visibility:hidden;overflow:hidden;border-right:1px solid var(--line);transition:transform .3s cubic-bezier(.4,0,.8,.4),opacity .24s ease,visibility 0s linear .3s}
body.studio.ov3d.st-right-closed:not(.focus-left):not(.focus-right):not(.showcase):not(.is-mobile) .right{transform:translateX(106%);opacity:0;pointer-events:none;visibility:hidden;overflow:hidden;border-left:1px solid var(--line);transition:transform .3s cubic-bezier(.4,0,.8,.4),opacity .24s ease,visibility 0s linear .3s}
@media (prefers-reduced-motion:reduce){body.studio.ov3d .left,body.studio.ov3d .right{transition:none!important}}

/* ── 3D views: the floating controls and the status bar keep clear of whichever side menus are open ── */
body.studio.ov3d:not(.focus-left):not(.focus-right):not(.showcase):not(.is-mobile){--ovl:var(--panel-l-w);--ovr:var(--panel-r-w)}
body.studio.ov3d.st-left-closed:not(.focus-left):not(.focus-right):not(.showcase):not(.is-mobile){--ovl:0px}
body.studio.ov3d.st-right-closed:not(.focus-left):not(.focus-right):not(.showcase):not(.is-mobile){--ovr:0px}
body.studio.ov3d:not(.focus-left):not(.focus-right):not(.showcase):not(.is-mobile) #stage{--slide:left .32s cubic-bezier(.2,.8,.2,1),right .32s cubic-bezier(.2,.8,.2,1)}
body.studio.ov3d:not(.focus-left):not(.focus-right):not(.showcase):not(.is-mobile) #stage .nh-size,
body.studio.ov3d:not(.focus-left):not(.focus-right):not(.showcase):not(.is-mobile) #stage .nh-hint,
body.studio.ov3d:not(.focus-left):not(.focus-right):not(.showcase):not(.is-mobile) #stage>.rp-chip{left:calc(12px + var(--ovl,0px));transition:var(--slide)}
body.studio.ov3d:not(.focus-left):not(.focus-right):not(.showcase):not(.is-mobile) #stage .nh-cluster{right:calc(12px + var(--ovr,0px));transition:var(--slide)}
body.studio.ov3d:not(.focus-left):not(.focus-right):not(.showcase):not(.is-mobile) #stage .nh-cube3d{right:calc(26px + var(--ovr,0px));transition:var(--slide)}
body.studio.ov3d:not(.focus-left):not(.focus-right):not(.showcase):not(.is-mobile) #stage .statusbar{left:var(--ovl,0px);right:var(--ovr,0px);transition:var(--slide)}

/* ── side panels (js/sidepanels.js): File, Import, Collaborate ── */
.sp-body{overflow:auto;min-height:0;flex:1 1 auto;padding:0 6px 14px}
.sp-panel.st-on{display:flex;flex-direction:column}
.sp-label{position:sticky;top:0;z-index:1;background:var(--panel)}
body.studio.ov3d .sp-label{background:color-mix(in srgb,var(--panel) 92%,transparent)}
.sp-sec{display:flex;flex-direction:column;gap:6px;padding:0 2px 4px}
.sp-note{margin:2px 4px;color:var(--mut);font-size:11.5px;line-height:1.45}
.sp-row{display:flex;flex-wrap:wrap;gap:6px;padding:2px 4px}
.sp-proj{display:flex;flex-direction:column;padding:6px 8px 8px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.sp-proj b{font-weight:500;color:var(--ink);font-size:13.5px}
.sp-proj small{color:var(--mut);font-size:11px}
.sp-card{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border-radius:10px;border:1px dashed var(--line2);background:none;color:var(--ink);cursor:pointer;text-align:left}
.sp-card:hover{border-color:var(--accent);background:var(--accent-soft)}
.sp-card svg.st-i{width:22px;height:22px;flex:0 0 auto;color:var(--accent)}
.sp-card b{display:block;font-weight:500}
.sp-card small{display:block;color:var(--mut);font-size:11px;line-height:1.35}
.sp-panel.sp-drop{outline:2px dashed var(--accent);outline-offset:-6px}
.sp-asset{border:1px solid var(--line);border-radius:9px;background:var(--panel2)}
.sp-asset>summary{cursor:pointer;list-style:none;padding:7px 9px;display:flex;flex-direction:column;gap:1px}
.sp-asset>summary::-webkit-details-marker{display:none}
.sp-asset>summary b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-asset>summary small{color:var(--mut);font-size:11px}
.sp-asset[open]>summary{border-bottom:1px solid var(--line)}
.sp-asset-body{padding:6px 6px 8px;display:flex;flex-direction:column;gap:6px}
.sp-live{display:flex;align-items:center;gap:8px;padding:4px 6px;color:var(--mut);font-size:12px}
.sp-live .live-dot{position:static}
.sp-peer{display:flex;align-items:center;gap:8px;width:100%;padding:5px 6px;border:0;border-radius:8px;background:none;color:var(--ink);text-align:left;font:inherit}
button.sp-peer{cursor:pointer}
button.sp-peer:hover{background:var(--hover)}
.sp-peer.follow{background:var(--accent-soft)}
.sp-peer .peer{flex:0 0 auto}
.sp-pt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.sp-dock{display:flex;flex-direction:column}
.sp-dock[hidden]{display:none}
/* chat + call docked in the panel: in the flow, no close button */
.live-chat.docked,.live-call.docked{position:static;transform:none;left:auto;right:auto;bottom:auto;width:auto;max-width:none;z-index:auto;box-shadow:none;border-radius:10px}
.live-chat.docked{height:380px;max-height:none}
.live-chat.docked .lc-x,.live-call.docked .lcl-x{display:none}
.live-call.docked .lcl-tiles{flex-wrap:wrap}
.live-call.docked .lcl-bar{flex-wrap:wrap}
/* the IFC import, drawn inside the Import panel (js/ifcimport.js) */
.sp-ifc{display:flex;flex-direction:column;gap:8px;padding:6px 2px 12px}
.sp-ifc[hidden]{display:none}
.sp-ifc h4{margin:6px 2px 0;font:500 13.5px var(--sans);color:var(--ink)}
.ifp-cat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:9px;background:var(--panel2)}
.ifp-cat b{font-weight:500;font-size:12.5px}
.ifp-cat select{grid-row:span 2;max-width:150px}
.ifp-cat small{color:var(--mut);font-size:11px;line-height:1.35}
.ifp-cat.off{opacity:.55}
.ifp-why{grid-column:1 / -1;color:var(--dim);font-size:10.5px;line-height:1.35}
.ifp-sum{display:flex;flex-wrap:wrap;gap:4px 10px;color:var(--mut);font-size:11.5px;padding:0 4px}
.ifp-sum b{color:var(--ink);font-weight:500}
.ifp-bar{position:sticky;bottom:0;display:flex;gap:6px;padding:8px 2px 2px;background:var(--panel)}
/* level of detail (render/assetlod.js) */
.lod-levels{display:flex;flex-direction:column;gap:4px}
.lod-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:6px;align-items:center;font-size:12px}
.lod-row .numbox{width:64px}
.lod-row select{max-width:120px}
.lod-tag{font:500 10.5px var(--mono);color:var(--accent);min-width:22px}
.lod-head{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:12px;color:var(--mut)}
.lod-head b{color:var(--ink);font-weight:500}
.lod-panel{display:flex;flex-direction:column;gap:6px}
.lod-panel>select.sel{width:100%}
.lod-row select.sel{width:100%;max-width:none}
.lod-row.lod-cols{color:var(--dim);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em}
.lod-panel .imp-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px}
.lt-note{padding:2px 8px 6px;color:var(--mut);font-size:11px}
.lt-more{display:block;width:100%;margin:2px 0 6px;padding:4px 8px;border:1px dashed var(--line2);border-radius:7px;background:none;color:var(--mut);font-size:11px;cursor:pointer;text-align:left}
.lt-more:hover{color:var(--ink);border-color:var(--accent)}
/* the Plan panel (planstyle.js): overrides per kind of element */
.ps-host{padding:0 8px 16px}
.ps-host>.btnrow{display:flex;flex-wrap:wrap;gap:6px;padding:6px 2px}
.ps-host>.mini{margin:4px 2px}
.ps-cat{border:1px solid var(--line);border-radius:9px;background:var(--panel2);margin:4px 0}
.ps-cat>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:6px 9px;font-size:12.5px}
.ps-cat>summary::-webkit-details-marker{display:none}
.ps-cat>summary b{font-weight:500}
.ps-cat>summary small{color:var(--mut);font-size:11px}
.ps-cat.on>summary small{color:var(--accent)}
.ps-cat.off{opacity:.6}
.ps-cat .ps-body{padding:2px 9px 8px;border-top:1px solid var(--line)}
.ps-cat .sp-row input[type=color]{width:28px;height:22px;padding:0;border:0;background:none;margin-left:4px}
/* plan views: snapping and guides live in the Plan panel */
body[data-bkind="plan"] .statusbar .sb-left{display:none}
.ps-host .sp-row{display:grid;grid-template-columns:112px minmax(0,1fr) auto;align-items:center;gap:8px;padding:3px 2px;font-size:12px;color:var(--mut)}
.ps-host .sp-row select.sel,.ps-host .sp-row .numbox{width:100%;min-width:0}
.ps-host .sp-row input[type=checkbox]{justify-self:start}
.ps-host .pop-group{margin-top:12px}
.ps-host>.mini{display:block;width:100%;margin:6px 0;padding:6px 8px;text-align:left;white-space:normal}
.ps-host .pop-group{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ps-host .pop-group .rp-tag{margin-left:auto}
.ps-cat .ps-body>.mini{display:block;margin-top:6px;white-space:nowrap}

/* ── two windows (js/splitview.js): the active stage + a live pane sharing the stage's grid area; not on phones ── */
.sv-pane{display:none}
body.split-on:not(.is-mobile) .main>.sv-pane{display:block;position:relative;grid-area:stage;justify-self:end;align-self:stretch;width:var(--svp,50%);min-width:0;min-height:0;overflow:hidden;background:#11151c;border-left:1px solid var(--line);z-index:4}
body.split-on:not(.is-mobile) #stage{margin-right:var(--svp,50%)}
body.split-on.split-v:not(.is-mobile) .main>.sv-pane{justify-self:stretch;align-self:end;width:auto;height:var(--svp,50%);border-left:0;border-top:1px solid var(--line)}
body.split-on.split-v:not(.is-mobile) #stage{margin-right:0;margin-bottom:var(--svp,50%)}
body.split-on:not(.is-mobile) #stage::after{content:'';position:absolute;inset:0;border:2px solid var(--accent);pointer-events:none;z-index:60}
.sv-cv{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none}
.sv-pane[data-kind="3d"] .sv-cv{cursor:pointer}
.sv-head{position:absolute;top:8px;right:10px;display:flex;gap:6px;z-index:2}
.sv-pick,.sv-b{height:30px;border-radius:8px;background:rgba(20,24,31,.82);color:#e7ebf0;border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:12.5px var(--sans)}
.sv-pick{max-width:240px;padding:0 8px}
.sv-b{width:30px;cursor:pointer}.sv-b:hover,.sv-pick:hover{border-color:var(--accent)}
.sv-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:5px 11px;border-radius:12px;background:rgba(20,24,31,.78);color:#cfd6de;font:12px var(--sans);opacity:0;transition:opacity .2s;pointer-events:none;z-index:2}
.sv-pane:hover .sv-hint{opacity:1}
.sv-gut{position:absolute;left:-1px;top:0;bottom:0;width:8px;cursor:col-resize;z-index:3}
.sv-gut::after{content:'';position:absolute;left:2px;top:50%;width:4px;height:44px;margin-top:-22px;border-radius:2px;background:rgba(255,255,255,.25)}
.sv-gut:hover::after{background:var(--accent)}
body.split-v .sv-gut{left:0;right:0;top:-1px;bottom:auto;width:auto;height:8px;cursor:row-resize}
body.split-v .sv-gut::after{left:50%;top:2px;width:44px;height:4px;margin:0 0 0 -22px}
.st-split.on{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
/* the pane on the left / top: the active window was clicked in place (splitview.js activate) */
body.split-on.split-flip:not(.is-mobile) #stage{margin-right:0;margin-left:var(--svp,50%)}
body.split-on.split-flip:not(.is-mobile) .main>.sv-pane{justify-self:start;border-left:0;border-right:1px solid var(--line)}
body.split-flip .sv-gut{left:auto;right:-1px}
body.split-on.split-v.split-flip:not(.is-mobile) #stage{margin-left:0;margin-bottom:0;margin-top:var(--svp,50%)}
body.split-on.split-v.split-flip:not(.is-mobile) .main>.sv-pane{justify-self:stretch;align-self:start;border-right:0;border-top:0;border-bottom:1px solid var(--line)}
body.split-v.split-flip .sv-gut{left:0;right:0;top:auto;bottom:-1px}
/* four windows (3ds Max's layout: Top · Front over Left · Perspective) — splitview.js openQuad sets each quadrant inline */
body.split-quad .sv-gut{display:none}
body.split-quad .sv-pick{max-width:42%}
body.split-quad.split-on:not(.is-mobile) .main>.sv-pane{border:1px solid var(--line)}
.sv-label{position:absolute;top:12px;left:12px;z-index:2;font:600 11.5px var(--sans);color:#e7ebf0;text-shadow:0 1px 2px rgba(0,0,0,.6);pointer-events:none}
.sv-label:empty{display:none}

/* ── modeler: curve sketcher dialog (js/modeler/sketcher.js) ── */
.csk-back { position: fixed; inset: 0; z-index: 2000; background: rgba(8, 10, 14, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.csk { background: var(--panel, #20242c); color: var(--ink, #e3e6e9); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 12px; width: min(600px, 100%); max-height: 100%; overflow: auto; box-shadow: 0 12px 40px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 8px; }
.csk-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.csk-head .btnrow { flex: 1; }
.csk-opts { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 12px; }
.csk-o { display: inline-flex; align-items: center; gap: 4px; }

/* ── material panel, MuTracer-style (materialmaker.js buildEditor): head, looks grid, OpenPBR sections with their weights ── */
.mm-panel .mm-head{display:flex;flex-direction:column;gap:3px;margin:2px 0 8px}
.mm-panel .mm-head .mm-name{height:30px;font-size:13px;font-weight:600;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:0 10px;color:var(--ink)}
.mm-panel .mm-meta{font-size:11px;color:var(--mut);padding-left:2px}
.mm-panel .mm-looks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-bottom:6px}
.mm-panel .mm-look{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px 5px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--mut);font-size:10px;cursor:pointer;min-width:0}
.mm-panel .mm-look:hover{border-color:var(--line2);color:var(--ink)}
.mm-panel .mm-look span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-lb{width:30px;height:30px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 30%,#fff) 0,var(--c) 38%,color-mix(in srgb,var(--c) 45%,#000) 100%);box-shadow:inset 0 -2px 4px rgba(0,0,0,.35)}
.mm-lb-matte{background:radial-gradient(circle at 40% 35%,color-mix(in srgb,var(--c) 85%,#fff) 0,var(--c) 55%,color-mix(in srgb,var(--c) 60%,#000) 100%)}
.mm-lb-gloss,.mm-lb-coat{background:radial-gradient(circle at 34% 28%,#fff 0 6%,color-mix(in srgb,var(--c) 70%,#fff) 9%,var(--c) 40%,color-mix(in srgb,var(--c) 35%,#000) 100%)}
.mm-lb-coat{box-shadow:inset 0 -2px 4px rgba(0,0,0,.35),inset 0 0 0 1.5px rgba(255,255,255,.18)}
.mm-lb-metal{background:radial-gradient(circle at 35% 28%,#fff 0 7%,#9aa0a6 18%,#3c4045 55%,#c7ccd2 80%,#55595e 100%)}
.mm-lb-brushed{background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 1px,transparent 1px 3px),radial-gradient(circle at 35% 28%,#f2f2f2 0 6%,#9aa0a6 20%,#45494e 60%,#b9bec4 100%)}
.mm-lb-glass{background:radial-gradient(circle at 32% 26%,#fff 0 7%,rgba(200,230,240,.35) 12%,rgba(120,160,180,.25) 55%,rgba(230,245,250,.6) 85%,rgba(90,120,140,.5) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.mm-lb-fuzz{background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--c) 70%,#000) 0,var(--c) 60%,color-mix(in srgb,var(--c) 55%,#fff) 92%,color-mix(in srgb,var(--c) 40%,#fff) 100%)}
.mm-lb-sss{background:radial-gradient(circle at 38% 32%,#fff3ea 0 5%,var(--c) 30%,color-mix(in srgb,var(--c) 70%,#c0503a) 100%)}
.mm-lb-film{background:conic-gradient(from 200deg,#ffb3d9,#b3e5ff,#c8ffb3,#fff2b3,#ffb3d9);opacity:.85;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.mm-panel .mm-sec>summary{gap:8px}
.mm-panel .mm-secw{margin-left:auto;font:500 11px var(--mono);letter-spacing:0;text-transform:none;color:var(--dim)}
.mm-panel .mm-secw.on{color:var(--accent)}
.mm-panel .mm-sec>summary::after{margin-left:6px}
.mm-panel .mm-crow .colbox{width:22px;height:22px;border-radius:5px;overflow:hidden;flex:none}
.mm-panel .mm-crow .mm-hex{flex:none;font:500 11px var(--mono);color:var(--mut)}
.mm-panel .mm-crow .sel{height:24px;font-size:11px;max-width:60%}
.mm-panel .mm-texbtns{display:flex;flex-wrap:wrap;gap:4px}
@media (max-width:420px){.mm-panel .mm-looks{grid-template-columns:repeat(4,minmax(0,1fr))}}