/* EX3D Annotator — modern dark UI */
:root{
  --bg:#121212; --panel:#1e1e1e; --panel2:#232323; --line:#3a3a3a;
  --ink:#f0f0f0; --mut:#aaaaaa; --accent:#888888; --accent2:#bbbbbb;
  --danger:#ff5555; --good:#55ff55; --radius:9px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg); color:var(--ink);
  font:13px/1.45 "Segoe UI", Helvetica, Arial, sans-serif;
  display:flex; flex-direction:column; overflow:hidden; user-select:none;
}
b{font-weight:700}
h3{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);margin:0 0 8px}

/* ---- topbar ---- */
.topbar{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--bg);border-bottom:1px solid var(--line);flex:0 0 auto}
.brand{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px;letter-spacing:.02em}
.brand b{color:var(--accent)}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand .build{font-size:9.5px;font-weight:400;letter-spacing:0;color:var(--mut);font-family:Consolas,monospace;white-space:nowrap}
.dot{width:11px;height:11px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.ws-name{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:7px;padding:6px 10px;width:170px;font-size:13px}
.menus{display:flex;align-items:center;gap:6px;margin-left:auto;flex-wrap:wrap}
.mbtn{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:7px;padding:6px 11px;cursor:pointer;font-size:12.5px}
.mbtn:hover{background:var(--hover);border-color:var(--line2)}
.mbtn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.mbtn.primary:hover{background:var(--accent)}
.divider{width:1px;height:22px;background:var(--line);margin:0 3px}
.scale{display:flex;align-items:center;gap:5px;color:var(--mut);font-size:12px}
.scale select,select.sel{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:4px 6px}

/* ---- layout ---- */
.main{flex:1 1 auto;display:flex;min-height:0}
.left,.right{width:248px;flex:0 0 auto;background:var(--panel);display:flex;flex-direction:column;overflow:hidden}
.left{border-right:1px solid var(--line)}
.right{border-left:1px solid var(--line);width:288px}
.panel{padding:12px;border-bottom:1px solid var(--line);overflow:auto}
.panel.grow{flex:1 1 auto;min-height:0}
.stage{flex:1 1 auto;position:relative;background:var(--bg);overflow:hidden}
.stage.panning{cursor:grab}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.zhint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:rgba(10,14,20,.72);border:1px solid var(--line);color:var(--mut);padding:5px 12px;border-radius:20px;font-size:11.5px;pointer-events:none}

/* ---- toolbar ---- */
.toolbar{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tool{display:flex;align-items:center;gap:7px;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:7px 8px;cursor:pointer;text-align:left;font-size:11.5px}
.tool:hover{background:var(--hover)}
.tool.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.tool .ti{font-size:15px;width:18px;text-align:center}
.tool .tl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sticky{display:flex;align-items:center;gap:7px;margin-top:9px;color:var(--mut);font-size:12px;cursor:pointer}

.arrange{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.abtn{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:7px;padding:8px 0;cursor:pointer;font-size:14px}
.abtn:hover{background:var(--hover)}
.abtn.danger:hover{background:#3a2128;border-color:var(--danger);color:var(--danger)}

/* ---- boards ---- */
.board-tools{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.wbtn{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:7px;padding:8px;cursor:pointer;font-size:12px}
.wbtn:hover{background:var(--hover);border-color:var(--line2)}
.boards-list{display:flex;flex-direction:column;gap:6px}
.board-item{display:flex;gap:8px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px;cursor:pointer}
.board-item.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.board-item .binfo{flex:1;min-width:0}
.board-item .bname{font-weight:600;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-item .bmeta{color:var(--mut);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bacts{display:flex;gap:3px}
.mini{background:var(--hover);border:1px solid var(--line);color:var(--mut);border-radius:5px;width:22px;height:22px;cursor:pointer;font-size:11px;padding:0;line-height:1}
.mini:hover{color:var(--ink);background:#2c3647}
.mini.add{width:auto;padding:5px 8px;color:var(--ink)}

/* ---- layers ---- */
.layers{display:flex;flex-direction:column;gap:3px;max-height:180px}
.layer{display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:6px;cursor:default;background:var(--panel2);border:1px solid transparent}
.layer.sel{border-color:var(--accent)}
.layer .lname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;font-size:12px}
.layer:hover{background:var(--hover)}

/* ---- inspector ---- */
.inspector .empty,.hint{color:var(--mut);font-size:12px;line-height:1.6}
.hint{padding:4px 0}
.el-head{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.el-type{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.el-name{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-title{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);margin:12px 0 5px;border-top:1px solid var(--line);padding-top:9px}
.row{display:flex;align-items:center;gap:8px;margin:6px 0}
.row .rlab{flex:0 0 70px;color:var(--mut);font-size:11.5px}
.row>*:not(.rlab){flex:1;min-width:0}
.numbox{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:5px 6px;width:100%;font-size:12px}
.numbox.wide{width:100%}
.range{display:flex;align-items:center;gap:7px}
.range input[type=range]{flex:1;accent-color:var(--accent)}
.range .numbox{flex:0 0 52px}
.txt{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:6px 8px;width:100%;font-size:12px;font-family:inherit}
textarea.txt{min-height:54px;resize:vertical}
.colorctrl{display:flex;gap:6px;align-items:center}
.colorctrl .sel{flex:1}
.colorctrl .pick.grow{flex:1;width:auto}
.colorctrl .mini{flex:0 0 28px;height:28px;font-size:13px}
.colorctrl .mini.on{color:var(--ink);border-color:var(--line2)}
.pick{width:34px;height:28px;border:1px solid var(--line);border-radius:6px;background:none;padding:2px;cursor:pointer}
.pair{display:flex;gap:6px}
.pair>*{flex:1}
/* ---- multi-text rows (label segments) ---- */
.seg-list{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.seg-card{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:6px}
.seg-card .txt{min-height:38px}
.seg-ctr{display:flex;gap:6px}
.seg-ctr .numbox{flex:0 0 52px}
.seg-ctr .sel{flex:1;min-width:0}
.seg-acts{display:flex;gap:4px;justify-content:flex-end}

.legend-items{display:flex;flex-direction:column;gap:6px}
.litem{display:flex;gap:6px;align-items:center}
.litem .colorctrl{flex:0 0 120px}
.litem .txt{flex:1}
.btnrow{display:flex;gap:6px}
.btnrow .mini{flex:1;width:auto;height:26px;font-size:13px}
.linkbar{display:flex;align-items:center;gap:8px;background:rgba(57,217,138,.12);border:1px solid var(--good);border-radius:7px;padding:7px 9px;margin-bottom:8px;font-size:11.5px;color:var(--ink)}
.linkbar span{flex:1;line-height:1.4}
.linkbar .mini{flex:0 0 auto;width:auto;padding:3px 8px;color:var(--ink);border-color:var(--good)}

/* ---- element templates ---- */
.tpl-tools{margin-bottom:8px}
.tpl-list{display:flex;flex-direction:column;gap:6px}
.tpl-list .empty{color:var(--mut);font-size:11.5px;line-height:1.6}
.tpl-item{display:flex;gap:8px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px}
.tpl-item .tinfo{flex:1;min-width:0}
.tpl-item .tname{font-weight:600;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpl-item .tmeta{color:var(--mut);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tacts{display:flex;gap:3px;flex-wrap:wrap;justify-content:flex-end}

/* ---- inline text editor ---- */
.inline-editor{position:absolute;z-index:50;background:rgba(255,255,255,.97);color:#111;border:2px solid var(--accent);border-radius:6px;padding:4px 6px;font-family:Helvetica,Arial,sans-serif;line-height:1.25;resize:none;outline:none;box-shadow:0 6px 24px rgba(0,0,0,.4)}

/* ---- toast ---- */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:#0c1118;border:1px solid var(--accent);color:var(--ink);padding:10px 18px;border-radius:9px;opacity:0;pointer-events:none;transition:.25s;z-index:100;box-shadow:0 8px 30px rgba(0,0,0,.5);max-width:70vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#2a3342;border-radius:6px;border:2px solid var(--panel)}
::-webkit-scrollbar-track{background:transparent}

/* ---- arrange: align + snap subsections ---- */
h3.sub{margin-top:12px;display:flex;align-items:center;gap:6px}
h3.sub .subhint{font-size:9.5px;color:var(--mut);text-transform:none;letter-spacing:0;opacity:.8}
.arrange.align{margin-top:2px}
.snaprow{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.snapchk{display:flex;align-items:center;gap:7px;color:var(--mut);font-size:12px;cursor:pointer}
.snapchk.gridsize{gap:6px}
.snapchk.gridsize .numbox{flex:0 0 56px;width:56px;cursor:text}

/* ---- popover (PDF options) ---- */
.popover{position:fixed;z-index:120;min-width:264px;background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:12px;box-shadow:0 14px 40px rgba(0,0,0,.55);display:none;flex-direction:column;gap:9px}
.popover.show{display:flex}
.popover h4{margin:0 0 2px;font-size:12px;letter-spacing:.04em;color:var(--ink)}
.poprow{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--mut)}
.poprow select{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:5px 7px;font-size:12px}
.poprow.check{flex-direction:row;align-items:center;gap:8px;color:var(--ink);cursor:pointer}
.pophint{margin:2px 0 0;font-size:10.5px;color:var(--mut);line-height:1.5}

/* ---- context menu ---- */
.ctx-menu{position:fixed;z-index:200;min-width:208px;background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:5px;box-shadow:0 16px 44px rgba(0,0,0,.6);display:none;font-size:12.5px}
.ctx-menu.show{display:block}
.ctx-sub{position:absolute;top:-5px;left:100%;min-width:208px;background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:5px;box-shadow:0 16px 44px rgba(0,0,0,.6);display:none}
.ctx-sub.flip{left:auto;right:100%}
.ctx-item.has-sub:hover>.ctx-sub,.ctx-item.has-sub.open>.ctx-sub{display:block}
.ctx-item{position:relative;display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:7px;cursor:pointer;white-space:nowrap;color:var(--ink)}
.ctx-item:hover{background:var(--hover)}
.ctx-item .ci{width:18px;text-align:center;font-size:14px;opacity:.95}
.ctx-item .cl{flex:1}
.ctx-item .ca{color:var(--mut);font-size:11px}
.ctx-item.danger:hover{background:#3a2128;color:var(--danger)}
.ctx-item.disabled{opacity:.38;pointer-events:none}
.ctx-sep{height:1px;background:var(--line);margin:4px 6px}

/* ---- mobile tab bar (hidden on desktop) ---- */
.mobile-tabs{display:none}
.mtab{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;background:none;border:none;color:var(--mut);padding:6px 2px;cursor:pointer;font-size:9.5px;min-width:0}
.mtab .mti{font-size:16px;line-height:1}
.mtab.active{color:var(--accent)}

/* ---- responsive: collapse side panels into a bottom drawer + tabs ---- */
@media (max-width:820px),(max-height:500px) and (pointer:coarse){
  body.is-mobile .main{flex-direction:column}
  body.is-mobile .stage{flex:1 1 auto;min-height:0}
  body.is-mobile .left,body.is-mobile .right{
    position:fixed;left:0;right:0;bottom:56px;width:100%!important;height:48vh;max-height:48vh;
    z-index:60;border:0;border-top:1px solid var(--line);border-radius:16px 16px 0 0;
    box-shadow:0 -12px 34px rgba(0,0,0,.55);
    /* slide up when a tab is open */
    transform:translateY(0);transition:transform .22s ease;
  }
  /* grab-handle affordance at the top of the drawer */
  body.is-mobile .left::before,body.is-mobile .right::before{
    content:"";position:sticky;top:0;display:block;width:40px;height:4px;margin:7px auto 3px;
    border-radius:3px;background:var(--line2);flex:0 0 auto;
  }
  body.is-mobile .panel{border-bottom:1px solid var(--line);padding:12px 14px}
  body.is-mobile .panel.grow{flex:1 1 auto}
  body.is-mobile .mobile-tabs{
    display:flex;position:fixed;left:0;right:0;bottom:0;height:56px;z-index:70;
    background:var(--bg);border-top:1px solid var(--line);align-items:stretch;
    padding-bottom:env(safe-area-inset-bottom,0)
  }
  body.is-mobile .toast{bottom:66px}
  body.is-mobile .zhint{display:none}
  /* roomier touch targets */
  body.is-mobile .abtn{padding:13px 0;font-size:17px}
  body.is-mobile .tool{padding:12px 10px;font-size:13px}
  body.is-mobile .wbtn{padding:11px}
  body.is-mobile .mini{width:30px;height:30px;font-size:13px}
  body.is-mobile .board-item{padding:11px}
  body.is-mobile .layer{padding:9px 10px}
  body.is-mobile .layers{max-height:none}
  /* active mobile tab gets a filled pill so the current panel is obvious */
  body.is-mobile .mtab.active{color:var(--accent)}
  body.is-mobile .mtab.active .mti{transform:translateY(-1px)}
  /* header: keep the brand row tidy and let the action buttons scroll in one
     line instead of wrapping into several rows that eat the canvas. */
  .topbar{gap:8px;flex-wrap:wrap}
  .menus{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding-bottom:2px;scrollbar-width:none}
  .menus::-webkit-scrollbar{display:none}
  .mbtn{flex:0 0 auto}
  .ws-name{width:120px}
}
/* larger controls on true touch devices regardless of width */
@media (pointer:coarse){
  .mtab{padding:8px 2px}
  .ctx-item{padding:10px 12px}
}

/* ---- Bitmap Editor Modal ------------------------------------------------- */
.bmp-modal{
  position:fixed;inset:0;z-index:900;
  background:rgba(5,8,14,.97);
  display:flex;flex-direction:column;
}
.bmp-tb{
  flex:0 0 auto;display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding:9px 14px;background:var(--bg);border-bottom:1px solid var(--line);
}
.bmp-title{font-weight:700;color:var(--ink);font-size:13px;margin-right:2px}
.bmp-sep{width:1px;height:20px;background:var(--line);flex-shrink:0;margin:0 1px}
.bmp-tb-btn{
  background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  border-radius:7px;padding:5px 10px;cursor:pointer;font-size:12px;white-space:nowrap;
}
.bmp-tb-btn:hover{background:var(--hover)}
.bmp-tb-btn.active,.bmp-tb-btn.bmp-commit{
  background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600;
}
.bmp-tb-btn.bmp-done{background:var(--good);border-color:var(--good);color:var(--on-accent);font-weight:600}
.bmp-tb-btn.bmp-cancel:hover{background:var(--danger);border-color:var(--danger)}
.bmp-slider-lbl{
  display:flex;align-items:center;gap:5px;
  color:var(--ink);font-size:12px;white-space:nowrap;
}
.bmp-slider-lbl input[type=range]{width:80px;accent-color:var(--accent)}
.bmp-hint-bar{
  flex:0 0 auto;padding:5px 14px;
  background:#0d1016;color:var(--mut);font-size:11.5px;border-bottom:1px solid var(--line);
}
.bmp-stage{
  flex:1 1 auto;position:relative;overflow:hidden;background:#07090e;
}
.bmp-stage canvas{position:absolute}
#bmp-overlay{cursor:crosshair}

/* ---- board size ---- */
/* Sits under the board tools in the Boards panel. Compact: this is a control
   you reach for occasionally, not a primary surface. */
.bsize{display:grid;gap:6px;margin:10px 0 12px;padding:10px;
  background:var(--panel2);border:1px solid var(--line);border-radius:8px}
.bsize-row{display:flex;align-items:center;gap:6px}
.bsize-row.nums{gap:4px}
.bsize .sel{flex:1 1 auto;min-width:0}
.bsize .numbox{width:72px;background:var(--bg);border:1px solid var(--line);
  color:var(--ink);border-radius:6px;padding:5px 7px;font-size:12.5px}
.bsize .numbox:focus{outline:none;border-color:var(--accent)}
.bsize .bx{color:var(--mut);font-size:12px}
.bsize .bunit{color:var(--mut);font-size:10.5px;margin-left:auto;white-space:nowrap}
.bsize .bsel{display:flex;align-items:center;gap:6px;color:var(--mut);
  font-size:11.5px;flex:1 1 auto;min-width:0}
.bsize .bsel .sel{font-size:12px}
.bsize .bsel select:disabled{opacity:.45}
.bsize-row.apply{margin-top:2px}
.bsize .bsel.all{flex:0 0 auto;cursor:pointer}
.bsize .wbtn.primary{background:var(--accent);border-color:var(--accent);
  color:var(--on-accent);font-weight:600}
.bsize .wbtn.primary:hover{background:var(--accent)}
.bsize .mini{flex:0 0 auto}
.bsize .colbox{width:34px;height:24px;padding:0;border:1px solid var(--line);
  border-radius:5px;background:var(--bg);cursor:pointer}

/* ---- keyboard hint chip ---- */
.kbd{display:inline-block;font-size:9.5px;line-height:1;padding:3px 5px;border-radius:4px;
  border:1px solid var(--line);background:var(--bg);color:var(--mut);letter-spacing:.04em}

/* ---- mobile: fewer chrome pixels, bigger touch targets ----
   The stage is the product; on a phone everything else should get out of its
   way. Panels already collapse into the tab bar, so this trims the top bar to
   what you actually reach for and makes every control thumb-sized (44px is the
   usual minimum for a reliable tap). */
@media (max-width:760px){
  .topbar{gap:6px;padding:6px 8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .topbar::-webkit-scrollbar{display:none}
  .brand{font-size:13px}
  .brand b{display:none}                  /* the dot + "EX3D" is enough */
  .brand .build{font-size:8.5px}
  .ws-name{width:104px;font-size:12px;padding:5px 8px}
  .menus{gap:4px;flex-wrap:nowrap}
  .mbtn{padding:9px 10px;font-size:12px;min-height:38px}
  .divider{display:none}
  /* Hide only what is meaningless on a phone: pointer advice, and a file-naming
     preference whose default is right. Everything else stays reachable — the
     bar scrolls horizontally, which is cheaper than losing a capability with
     nowhere else to get it. */
  .zhint,#name-on-save{display:none}

  .panel{padding:10px}
  .toolbar{grid-template-columns:1fr 1fr;gap:8px}
  .tool{min-height:44px}
  .arrange{gap:8px}
  .abtn,.mini{min-width:40px;min-height:40px}
  .bsize .numbox{width:64px;padding:8px 7px}
  .bsize .sel,.bsize .colbox{min-height:36px}
  .sh-btn,.sh-icon{min-height:40px}
  .sh-grid{gap:12px}
}

/* Coarse pointers get the same generous targets even on a big screen. */
@media (pointer:coarse){
  .mbtn,.wbtn{min-height:38px}
  .abtn,.mini{min-width:38px;min-height:38px}
}

/* The mobile tab bar is position:fixed, so it sits ON TOP of the stage rather
   than below it — the bottom 56px of the canvas (and of any open panel) was
   underneath it. Reserve that space, including the home-indicator inset. */
@media (max-width:820px),(max-height:500px) and (pointer:coarse){
  body.is-mobile .editor{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
}

/* ---- board scale ---- */
.bsize .unit{flex:0 0 auto;width:62px}
.bsize-row.scale2{gap:8px}
.scaleinfo{font-size:10.5px;color:var(--mut);margin-left:auto;text-align:right;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.scaleinfo.set{color:var(--accent)}
/* the calibrate rubber-band readout, pinned near the cursor */
.calib-hint{position:absolute;z-index:60;background:var(--panel);border:1px solid var(--accent);
  color:var(--ink);border-radius:6px;padding:5px 9px;font-size:12px;pointer-events:none;
  white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.5)}

/* ---- ARCHICAD modify commands: the tracker ---- */
.op-hint{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:55;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  background:rgba(16,20,28,.94);border:1px solid #ffc24b;border-radius:8px;
  padding:7px 12px;font-size:12.5px;color:var(--ink);pointer-events:none;max-width:92%}
.op-hint[hidden]{display:none}
.op-hint b{color:#ffc24b;font-weight:600}
.op-hint .op-val{font-variant-numeric:tabular-nums;color:#fff;background:var(--hover);
  border-radius:4px;padding:2px 7px;font-family:Consolas,monospace}
.op-hint .op-keys{color:var(--mut);font-size:11px}

/* ---- shortcut sheet ---- */
.km-sheet{position:fixed;inset:0;z-index:9500;background:rgba(5,8,12,.7);
  display:flex;align-items:center;justify-content:center;padding:24px}
.km-sheet[hidden]{display:none}
.km-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  max-width:980px;width:100%;max-height:86vh;overflow:auto;padding:18px 22px}
.km-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.km-head h2{margin:0;font-size:16px}
.km-cols{column-width:270px;column-gap:28px}
.km-cols section{break-inside:avoid;margin-bottom:16px}
.km-cols h3{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);margin:0 0 6px}
.km-row{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px dashed var(--line);font-size:12.5px}
.km-keys{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.km-keys kbd{font-family:Consolas,monospace;font-size:11px;background:var(--bg);border:1px solid var(--line);
  border-bottom-width:2px;border-radius:4px;padding:1px 6px;color:var(--ink);white-space:nowrap}
.km-note{color:var(--mut);font-size:11.5px;margin:8px 0 0}
.km-flash{outline:2px solid #ffc24b;outline-offset:-2px}

/* architecture tools */
.tool-sep{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);padding:10px 6px 3px;border-top:1px solid var(--line);margin-top:6px}
.mmwrap{display:flex;align-items:center;gap:6px}
.mmwrap .unit{color:var(--mut);font-size:11px}
.readout{font-variant-numeric:tabular-nums}

/* 3D view */
.v3d{position:absolute;top:0;right:0;bottom:0;width:50%;z-index:40;display:flex;flex-direction:column;background:#e9ecef;border-left:1px solid var(--line);box-shadow:-8px 0 24px rgba(0,0,0,.25)}
.v3d.full{width:100%}
.v3d[hidden]{display:none}
.v3d-bar{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--panel);color:var(--ink);font-size:12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.v3d-bar b{letter-spacing:.06em}
.v3d-chk{display:flex;align-items:center;gap:4px;color:var(--mut)}
.v3d-info{color:var(--mut);font-size:11px}
.v3d-sp{flex:1}
.v3d-host{flex:1;position:relative;min-height:0;overflow:hidden}
.v3d-host canvas{display:block;cursor:grab}
.v3d-host canvas:active{cursor:grabbing}
.v3d-help{position:absolute;left:8px;bottom:6px;font-size:10.5px;color:#5b6472;pointer-events:none}
.v3d-btn{font-weight:700}
body.is-mobile .v3d{width:100%;top:auto;height:55%;border-left:0;border-top:1px solid var(--line)}

/* element maker + material maker */
.em-wrap{position:fixed;inset:0;z-index:9400;background:rgba(5,8,12,.66);display:flex;align-items:center;justify-content:center;padding:18px}
.em-wrap[hidden]{display:none}
.em-card{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;width:min(1280px,100%);height:min(860px,100%);display:flex;flex-direction:column;overflow:hidden}
.mm-card{width:min(980px,100%);height:min(700px,100%)}
.em-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.em-head h2{margin:0;font-size:16px}
.em-sub{color:var(--mut);font-size:12px}
.em-sp{flex:1}
.em-body{flex:1;display:flex;min-height:0}
.em-list{width:220px;flex:none;overflow:auto;border-right:1px solid var(--line);padding:8px;display:flex;flex-direction:column;gap:2px}
.em-group{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);margin:10px 4px 4px}
.em-item{display:flex;align-items:center;gap:8px;text-align:left;background:none;border:0;color:var(--ink);padding:6px 8px;border-radius:6px;cursor:pointer;font-size:12.5px}
.em-item:hover{background:rgba(255,255,255,.05)}
.em-item.active{background:var(--accent,var(--accent));color:var(--bg)}
.em-item span:nth-child(2),.em-item span:first-child{flex:1}
.em-count{flex:none!important;color:inherit;opacity:.6;font-size:11px}
.em-new{background:none;border:1px dashed var(--line);color:var(--mut);border-radius:6px;padding:4px;margin:2px 0 6px;cursor:pointer;font-size:12px}
.em-main{flex:1;min-width:0;display:flex;flex-direction:column;padding:10px 14px;gap:8px;overflow:auto}
.em-main.empty{align-items:center;justify-content:center;color:var(--mut)}
.em-row.id{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.em-lab{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--mut)}
.em-used{color:var(--mut);font-size:11.5px}
.em-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.em-tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--mut);padding:6px 10px;cursor:pointer;font-size:12.5px}
.em-tab.active{color:var(--ink);border-bottom-color:var(--accent,var(--accent))}
.em-split{display:grid;grid-template-columns:minmax(0,1fr) 540px;gap:14px;min-height:0;flex:1}
@media (max-width:1100px){.em-split{grid-template-columns:1fr}}
.em-pane{min-width:0;overflow:auto}
.em-preview{display:flex;flex-direction:column;gap:6px}
.em-ptitle{display:flex;align-items:center;gap:8px;font-size:12px}
.em-draw{display:flex;gap:4px}
.em-draw .mini.on{background:var(--accent,var(--accent));color:var(--bg)}
.em-canvas{width:100%;max-width:520px;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:crosshair;touch-action:none}
.em-3d{width:100%;max-width:520px;height:260px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#eef0f3}
.em-tablewrap{overflow-x:auto}
.em-table{border-collapse:collapse;width:100%;font-size:12px}
.em-table th{text-align:left;color:var(--mut);font-weight:500;padding:4px;border-bottom:1px solid var(--line)}
.em-table td{padding:4px;border-bottom:1px dashed var(--line);vertical-align:top}
.em-table input.txt{width:100%;min-width:3em;box-sizing:border-box}
.em-table input.bad{border-color:#e5484d;background:rgba(229,72,77,.12)}
.em-fields{display:flex;flex-wrap:wrap;gap:4px 8px}
.em-f{display:flex;flex-direction:column;font-size:10px;color:var(--mut);width:78px}
.em-f.wide{width:150px}
.em-kind{font-family:Consolas,monospace;font-size:11px;color:var(--mut)}
.mini.danger{color:#ff7a70}
.mm-main{gap:12px}
.mm-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mm-col{display:flex;flex-direction:column;gap:6px}
.mm-field{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:8px;font-size:12px;color:var(--mut)}
.mm-previews{display:flex;gap:14px;flex-wrap:wrap}
.mm-previews > div{display:flex;flex-direction:column;gap:4px;font-size:12px}
.mm-previews canvas{border:1px solid var(--line);border-radius:6px;background:#fff}
.mm-dot{width:12px;height:12px;border-radius:50%;flex:none!important;border:1px solid rgba(0,0,0,.25)}
.hint.warn{color:#ffb14a}
.v3d-cams{max-width:180px}

.em-card canvas{position:static;inset:auto;height:auto}
.em-3d{position:relative}
.em-3d canvas{position:absolute;inset:0;width:100%;height:100%}
.em-draw .mini,.em-row.id .mini{white-space:nowrap;padding:3px 8px;margin-left:2px}

/* Pet Palette */
.pet{position:fixed;z-index:9300;display:flex;align-items:center;gap:3px;padding:4px;background:rgba(16,20,28,.96);border:1px solid var(--line2);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.pet-btn{position:relative;width:34px;height:34px;border-radius:7px;border:1px solid transparent;background:var(--panel2);color:#e8edf5;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pet-btn:hover{border-color:var(--accent);background:#233047}
.pet-ic{font-size:16px;line-height:1}
.pet-n{position:absolute;right:2px;bottom:1px;font-size:8.5px;color:#8b95a5}
.pet-label{position:absolute;left:50%;top:100%;transform:translate(-50%,4px);white-space:nowrap;font-size:10.5px;color:#c9d2de;background:rgba(16,20,28,.9);padding:2px 7px;border-radius:5px;pointer-events:none}

/* tracker + status bar */
.tracker{position:fixed;z-index:9200;pointer-events:none;display:flex;gap:6px;align-items:center;padding:4px 6px;background:rgba(16,20,28,.94);border:1px solid var(--line2);border-radius:6px;font:11.5px/1.2 Consolas,monospace;color:#e8edf5;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.tracker[hidden]{display:none}
.tracker b{font:600 11px system-ui,sans-serif;color:var(--mut);margin-right:2px}
.tk-f{padding:2px 6px;border-radius:4px;background:var(--panel2);min-width:60px}
.tk-f i{font-style:normal;color:#7d8899;margin-right:5px}
.tk-f.on{outline:1px solid var(--accent)}
.tk-f.typed{background:#23406a;color:#fff}
.tk-k{color:#6d7889;font-size:10px}
.statusbar{position:absolute;left:0;right:0;bottom:0;height:26px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;background:rgba(13,16,22,.92);border-top:1px solid var(--line);font-size:11px;color:var(--mut);z-index:30}
.sb-left,.sb-right{display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden}
.sb-chip{background:none;border:1px solid var(--line);color:var(--mut);border-radius:10px;padding:1px 8px;font-size:11px;cursor:pointer}
.sb-chip.on{background:var(--cyan);border-color:var(--cyan);color:#fff}
.sb-sel{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:5px;font-size:11px;padding:0 2px;height:19px}
.sb-xy{font-family:Consolas,monospace;color:var(--ink);white-space:nowrap}
.sb-scale{color:var(--mut)}
.sb-hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.is-mobile .statusbar .sb-sel,body.is-mobile .sb-hint{display:none}

/* ── CAD chrome: menu bar, sheet tabs, sheet setup, layer tree ── */
.menubar{display:flex;align-items:center;gap:1px;margin-left:4px}
.mb-item{background:none;border:0;color:var(--ink);padding:5px 9px;border-radius:5px;font-size:12.5px;cursor:pointer}
.mb-item:hover{background:var(--hover)}
.mb-quick{display:flex;gap:4px;margin-left:auto}
.cad-chrome .topbar{gap:8px;padding:4px 10px}
.cad-chrome .ws-name{max-width:220px}
.board-tabs{display:flex;align-items:flex-end;gap:2px;padding:4px 8px 0;background:var(--bg);border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;flex:0 0 auto;scrollbar-width:thin}
.btab{display:flex;align-items:center;gap:6px;padding:5px 6px 5px 10px;border:1px solid var(--line);border-bottom:0;border-radius:7px 7px 0 0;background:var(--panel2);color:var(--mut);font-size:12px;cursor:pointer;white-space:nowrap;max-width:220px;user-select:none}
.btab:hover{color:var(--ink)}
.btab.active{background:var(--panel);color:var(--ink);border-color:var(--line2);position:relative;top:1px}
.bt-ic{font-size:12px;opacity:.85}
.btab.k-plan .bt-ic{color:var(--accent)}.btab.k-3d .bt-ic{color:var(--cyan)}
.bt-name{overflow:hidden;text-overflow:ellipsis}
.bt-x{background:none;border:0;color:inherit;opacity:0;padding:0 3px;border-radius:4px;cursor:pointer}
.btab:hover .bt-x,.btab.active .bt-x{opacity:.6}
.bt-x:hover{opacity:1;background:#3a2128}
.btab-add{background:none;border:1px dashed var(--line);color:var(--mut);border-radius:6px;margin:0 0 3px 4px;padding:2px 9px;cursor:pointer}
.sheet-dlg{position:fixed;z-index:9000;top:90px;left:260px;width:300px;max-height:calc(100vh - 120px);overflow:auto;background:var(--panel);border:1px solid var(--line2);border-radius:10px;box-shadow:0 16px 44px rgba(0,0,0,.55);padding:8px 10px}
.sheet-dlg[hidden]{display:none}
.sd-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.sd-extra{margin-top:8px;display:flex;gap:6px}
.panel.folded>*:not(h3){display:none}
.panel.folded{flex:0 0 auto!important}
#panel-layers{flex:1 1 auto;min-height:160px}
.lt-tools{display:flex;gap:4px;margin-bottom:6px}
.lt-layer{display:flex;align-items:center;gap:3px;padding:3px 2px;border-radius:5px;font-size:12px;font-weight:600;color:var(--ink);border:1px solid transparent}
.lt-layer.off{opacity:.5}.lt-layer.locked .lt-name{font-style:italic}
.lt-layer.drop{border-color:var(--accent);background:var(--accent-soft)}
.lt-car{background:none;border:0;color:var(--mut);width:16px;cursor:pointer;padding:0}
.lt-btn{background:none;border:0;color:var(--mut);cursor:pointer;padding:0 2px;font-size:11px}
.lt-name{flex:1;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-count{color:var(--mut);font-weight:400;font-size:11px;min-width:16px;text-align:right}
.lt-el{display:flex;align-items:center;gap:3px;padding:2px 2px 2px 26px;border-radius:5px;font-size:11.5px;color:var(--mut)}
.lt-el:hover{background:var(--hover);color:var(--ink)}
.lt-el.sel{background:var(--accent-soft);color:#fff}
.lt-el.off{opacity:.5}
body.is-mobile .menubar .mb-item{padding:5px 6px}

.lt-tools .mini{white-space:nowrap}

/* 3D sheet render bar */
.sheet3d-bar{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:35;display:flex;flex-wrap:wrap;justify-content:center;row-gap:5px;align-items:center;gap:8px;padding:5px 8px;background:rgba(16,20,28,.94);border:1px solid var(--line2);border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.35);font-size:12px;color:var(--ink);white-space:nowrap;max-width:calc(100% - 20px);overflow-x:auto}
.sheet3d-bar[hidden]{display:none}
.s3-title{color:var(--mut);font-weight:600;letter-spacing:.04em}
.s3-seg{display:flex;border:1px solid var(--line2);border-radius:7px;overflow:hidden}
.s3-opt{background:var(--panel2);color:var(--mut);border:0;padding:4px 10px;cursor:pointer;font-size:12px}
.s3-opt.on{background:var(--accent);color:#fff}
.s3-opt:disabled{opacity:.4;cursor:default}
.s3-sel{display:flex;align-items:center;gap:4px;color:var(--mut)}
.s3-sel select{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:5px;font-size:11.5px}
.s3-status{color:var(--accent);font-family:Consolas,monospace;font-size:11px;min-width:90px}
/* layer tree buttons were squeezed to 22px */
.lt-tools .mini{width:auto;height:22px;padding:0 8px;white-space:nowrap}

/* 3D walk joysticks (touch) */
.joy{position:absolute;bottom:40px;width:120px;height:120px;border-radius:50%;background:rgba(16,20,28,.35);border:2px solid rgba(255,255,255,.35);z-index:36;touch-action:none;display:flex;align-items:center;justify-content:center}
.joy[hidden]{display:none}
.joy-left{left:18px}.joy-right{right:18px}
body.is-mobile .joy{bottom:112px}
.walk-btns{position:absolute;right:14px;bottom:130px;z-index:36;display:flex;flex-direction:column;gap:10px;touch-action:none}
.walk-btns[hidden]{display:none}
body.is-mobile .walk-btns{bottom:200px}
.walk-btn{width:54px;height:54px;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:rgba(16,20,28,.45);color:#fff;font-size:22px;line-height:1;touch-action:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.walk-btn.on{background:#7c5cff;border-color:#b9a8ff}
.joy-knob{width:52px;height:52px;border-radius:50%;background:rgba(124,92,255,.85);box-shadow:0 2px 8px rgba(0,0,0,.4);pointer-events:none;transition:transform .05s}
.joy-label{position:absolute;bottom:-18px;font-size:10px;color:#cfd6e2;text-shadow:0 1px 2px #000;pointer-events:none}

/* story bar (plan views) + story manager */
.story-bar{position:absolute;top:10px;left:10px;z-index:35;display:flex;align-items:center;gap:6px;padding:5px 8px;background:rgba(16,20,28,.94);border:1px solid var(--line2);border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.35);font-size:12px;color:var(--ink);white-space:nowrap;max-width:calc(100% - 20px);overflow-x:auto}
.story-bar[hidden]{display:none}
.story-bar select{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:5px;font-size:12px;padding:2px 4px;max-width:220px}
.sb-step{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:5px;width:24px;height:24px;cursor:pointer;font-size:10px}
.sb-step:hover{border-color:var(--accent)}
.st-card{width:min(760px,calc(100vw - 32px));height:auto;max-height:calc(100vh - 60px)}
.st-body{padding:12px 16px;overflow:auto}
.st-table{width:100%;border-collapse:collapse}
.st-table th{text-align:left;color:var(--mut);font-weight:500;padding:4px 6px}
.st-table td{padding:4px 6px;border-top:1px solid var(--line)}
.st-table tr.on td{background:rgba(124,92,255,.12)}
.st-table .txt{width:100%}
.st-actions{display:flex;gap:4px;flex-wrap:wrap}
.st-actions{flex-wrap:nowrap}
.st-actions .mini{width:auto;height:24px;padding:0 7px;white-space:nowrap}
.st-table .numbox.wide{width:80px}

/* 3D view selection panel + opening handles */
.sel3d{position:absolute;right:10px;top:60px;z-index:36;width:260px;max-height:calc(100% - 110px);overflow:auto;background:rgba(16,20,28,.95);border:1px solid var(--line2);border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.35);font-size:12px;color:var(--ink)}
.sel3d[hidden]{display:none}
.sel3d-head{display:flex;align-items:center;gap:4px;padding:6px 8px;border-bottom:1px solid #2b3445}
.sel3d-head .mini{width:auto;height:22px;padding:0 6px}
.sel3d-body{padding:6px 8px;display:flex;flex-direction:column;gap:5px}
.sel3d-row{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--mut)}
.sel3d-row .numbox,.sel3d-row .sel{width:120px}
.sel3d-tf{border-bottom:1px solid var(--line2,#333)}
.sel3d-tfh{text-transform:uppercase;letter-spacing:.06em;font-size:10.5px}
.sel3d-row.tri .numbox{width:62px}.sel3d-row.duo .numbox{width:59px}
.sel3d-row.tri span,.sel3d-row.duo span{flex:1}
.sel3d-sub{color:var(--accent);font-weight:600}
.sel3d .btnrow .mini{width:auto;padding:0 8px}
@media (max-width:700px){.sel3d{top:auto;bottom:44px;right:8px;left:8px;width:auto;max-height:40%}}
.h3d-layer{position:absolute;inset:0;pointer-events:none;z-index:34}
.h3d{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--cyan);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.5);pointer-events:auto;cursor:grab;touch-action:none}
.gz3d{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.gz3d .gz-hit{pointer-events:stroke;cursor:grab}
.gz3d .gz-grip{pointer-events:all;cursor:grab}
.gz3d .gz-read{font:600 11px var(--mono,monospace);fill:#fff;paint-order:stroke;stroke:rgba(0,0,0,.7);stroke-width:3px}
.gz3d .gz-hit,.gz3d .gz-grip{touch-action:none}
.gz3d.touch .gz-read{font-size:15px}
/* the action bar under a 3D selection (js/gizmobar.js) */
.gzbar{position:absolute;left:0;top:0;z-index:2;display:flex;align-items:center;gap:2px;padding:4px;border-radius:14px;background:rgba(12,15,20,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px 16px rgba(0,0,0,.35);pointer-events:auto;touch-action:none;font:600 11px ui-sans-serif,system-ui,sans-serif;color:#e8ecf2;white-space:nowrap}
.gzbar[hidden]{display:none}
.gzbar-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;padding:0 8px 0 6px;color:#aab3c2}
.gzbar button{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:10px;background:transparent;color:inherit;cursor:pointer}
.gzbar button:hover{background:rgba(255,255,255,.1)}
.gzbar button[data-a=del]:hover{background:rgba(229,72,77,.25);color:#ff9592}
.gzbar button.on{background:#f0a830;color:#1a1204}
.gzbar-sep{width:1px;height:20px;margin:0 3px;background:rgba(255,255,255,.14)}
.gzbar .gzbar-t{display:none}
.gzbar.touch .gzbar-t{display:grid}.gzbar.touch i.gzbar-t{display:block}
.gzbar.touch{padding:5px;gap:4px;border-radius:18px;font-size:13px}
.gzbar.touch button{width:44px;height:44px;border-radius:13px}
.gzbar.touch button svg{width:22px;height:22px}
.gzbar .gzbar-m{display:none}
body.is-mobile .gzbar .gzbar-m{display:grid}
body.is-mobile .sel3d:not(.open){display:none}
body.is-mobile .gzbar-name{display:none}
.place3d-mark{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border:2px solid #f5d90a;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.4);pointer-events:none;z-index:35}
.place3d-mark::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;background:#f5d90a;border-radius:50%}
.place3d-mark i{position:absolute;left:30px;top:-2px;white-space:nowrap;font:600 11px var(--sans,sans-serif);color:#fff;text-shadow:0 1px 3px #000;font-style:normal}
#stage.placing3d canvas{cursor:crosshair}
.h3d[hidden]{display:none}
.h3d-j0,.h3d-j1{cursor:ew-resize}
.h3d-lpos{background:#f5d90a}.h3d-ltgt{background:#ff5d5d;border-radius:3px}.h3d-lcone{background:#fff;width:11px;height:11px;margin:-5.5px 0 0 -5.5px}
.h3d-head,.h3d-sill{cursor:ns-resize;background:var(--accent)}

/* material maker: physical, textures, library */
.mm-card{width:min(1100px,100%);height:min(820px,100%)}
.mbtn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.mm-tex{display:flex;flex-direction:column;gap:6px}
.mm-tex .range .numbox{width:90px}
.mm-maps{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.mm-map{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:6px}
.mm-thumb{width:56px;height:56px;flex:none;border-radius:6px;background:#1a2029 center/cover no-repeat;border:1px solid var(--line)}
.mm-map-body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1;font-size:12px}
.mm-map-body .sel{width:100%}
.mm-map-body .mini{width:auto;padding:0 8px}
.mm-libgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.mm-libcard{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:8px;padding:6px;font-size:12px}
.mm-libcard .mini{width:auto;padding:0 6px}
.mm-libsw{height:90px;border-radius:6px;background-size:cover;background-position:center;border:1px solid var(--line)}
.mm-libadd{min-height:90px}
@media (max-width:700px){.mm-cols{grid-template-columns:1fr}}

/* sun & sky popover */
.site-pop{position:absolute;top:58px;left:50%;transform:translateX(-50%);z-index:37;width:min(340px,calc(100% - 20px));background:rgba(16,20,28,.96);border:1px solid var(--line2);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.45);padding:8px 10px;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--ink)}
.site-pop[hidden]{display:none}
.sp-head{display:flex;align-items:center;gap:6px}
.sp-head .mini{width:auto;padding:0 6px}
.sp-row{display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:8px;color:var(--mut)}
.sp-row .numbox,.sp-row .txt{grid-column:2 / span 2;width:100%}
.sp-val{min-width:44px;text-align:right;font-family:Consolas,monospace;color:var(--ink)}
.site-pop .s3-seg{align-self:flex-start}

/* texture tiler frame */
.tiler-wrap{z-index:9600}
.tiler-card{width:min(1500px,100%);height:min(940px,100%)}
.tiler-frame{flex:1;border:0;width:100%;background:#111}
.mm-tilerbtn{width:auto!important;padding:0 10px!important}

/* bulk editing */
input.mixed::placeholder{color:#e0a63a;font-style:italic}
select.mixed{color:#e0a63a}
.bulk-hint{margin:4px 0 8px}

.sel3d-lines,.sel3d-cone{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}

/* render region + renders list */
.rregion{position:absolute;z-index:33;border:2px dashed #ff9d2e;pointer-events:none;touch-action:none}
.rr-label,.rr-x,.rr-h{pointer-events:auto;touch-action:none}
.rr-label{cursor:move}
.rregion[hidden]{display:none}
.rr-label{position:absolute;left:-2px;top:-22px;background:#ff9d2e;color:#1a1206;font:600 11px/18px system-ui,sans-serif;padding:0 6px;border-radius:4px 4px 0 0;white-space:nowrap}
.rr-x{position:absolute;right:-2px;top:-22px;height:18px;border:0;background:#ff9d2e;color:#1a1206;border-radius:4px 4px 0 0;cursor:pointer;font-size:11px;padding:0 6px}
.rr-h{position:absolute;width:12px;height:12px;background:#ff9d2e;border:2px solid #fff;border-radius:2px}
.rr-nw{left:-7px;top:-7px;cursor:nwse-resize}.rr-ne{right:-7px;top:-7px;cursor:nesw-resize}.rr-sw{left:-7px;bottom:-7px;cursor:nesw-resize}.rr-se{right:-7px;bottom:-7px;cursor:nwse-resize}
.rl-card{width:min(1100px,100%);height:min(820px,100%)}
.rl-grid{flex:1;overflow:auto;padding:12px 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;align-content:start}
.rl-item{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:8px;padding:8px}
.rl-img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:6px;background:#0c0f14;cursor:zoom-in}
.rl-item .mini{width:auto;padding:0 8px}
.rl-item .sel{max-width:140px}
.rl-full{position:fixed;inset:0;z-index:9800;background:rgba(0,0,0,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:zoom-out;padding:16px}
.rl-full img{max-width:100%;max-height:calc(100% - 30px);object-fit:contain}
.rl-cap{color:#dfe6ee;font-size:13px}
.site-pop{max-height:calc(100% - 70px);overflow:auto}
.rl-item .mini{white-space:nowrap}

/* camera effects, HDRI picker, render button, performance */
.site-pop{max-height:calc(100% - 70px);overflow:auto}
.sp-group{display:flex;align-items:center;gap:8px;color:var(--mut);margin-top:2px}
.sp-chk input{justify-self:start}
.lens-pop .sel{grid-column:2 / span 2;width:100%}
.s3-go{min-width:78px}
.s3-go.stop{background:#e25563;border-color:#e25563;color:#fff}
.hdri-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.hdri-item{display:flex;flex-direction:column;gap:3px;background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:4px;color:var(--mut);font-size:11px;cursor:pointer;text-align:left}
.hdri-item img{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:4px;display:block}
.hdri-item.on{border-color:var(--accent);color:#fff;box-shadow:0 0 0 1px var(--accent)}
.hdri-wait{display:flex;align-items:center;justify-content:center;aspect-ratio:2/1;background:var(--bg);border-radius:4px;font-size:18px}
.perf-hud{position:absolute;right:10px;bottom:34px;z-index:36;white-space:pre;font:11px/1.35 Consolas,monospace;color:#cfe3ff;background:rgba(10,14,20,.82);border:1px solid var(--line2);border-radius:8px;padding:6px 8px;pointer-events:none}
.perf-hud[hidden]{display:none}
.pf-card{width:min(680px,100%);height:auto;max-height:min(860px,100%)}
.pf-body{padding:12px 16px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.pf-live{margin:0;padding:8px 10px;background:var(--bg);border:1px solid var(--line);border-radius:8px;font:12px/1.45 Consolas,monospace;color:#cfe3ff;white-space:pre-wrap}
.pf-table{border-collapse:collapse;font-size:12.5px}
.pf-table th{text-align:left;color:var(--mut);font-weight:500;padding:3px 12px 3px 0;vertical-align:top;white-space:nowrap}
.pf-table td{padding:3px 0;word-break:break-word}
.pf-row{display:grid;grid-template-columns:190px 1fr;align-items:center;gap:10px;color:var(--mut)}
.pf-log{margin:0;max-height:180px;overflow:auto;padding:8px 10px;background:var(--bg);border:1px solid var(--line);border-radius:8px;font:11px/1.4 Consolas,monospace;color:#ffb4b4;white-space:pre-wrap}
@media (max-width:600px){.pf-row{grid-template-columns:1fr}.hdri-grid{grid-template-columns:repeat(2,1fr)}}

/* material preview */
.mm-pvwrap{flex:1 1 420px;min-width:260px}
.mp{display:flex;flex-direction:column;gap:6px}
.mp-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mp-canvas{width:100%;height:auto;border:1px solid var(--line);border-radius:8px;background:#15171b;cursor:grab;touch-action:none}
.mp-canvas:active{cursor:grabbing}
.mp-controls{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px 12px}
.mp-field{display:grid;grid-template-columns:92px 1fr auto;align-items:center;gap:6px;color:var(--mut);font-size:12px}
.mp-field .sel{grid-column:2 / span 2;width:100%}
.mp-chk{grid-template-columns:auto 1fr}
.mp-go[hidden]{display:none}

.site-pop .pop-group{margin-top:6px;padding-top:6px;border-top:1px solid var(--line2);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.lens-pop{width:min(380px,calc(100% - 20px))}

/* import dialog + model handles */
.imp-card{width:min(1180px,100%);height:min(820px,100%)}
.imp-body{flex:1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:16px;padding:14px 16px;overflow:auto}
.imp-left{min-width:0;display:flex;flex-direction:column}
.imp-right{display:flex;flex-direction:column;gap:7px;min-width:0}
.imp-drop{flex:1;min-height:320px;border:2px dashed var(--line2);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;color:var(--mut)}
.imp-drop.over{border-color:var(--accent);background:rgba(124,92,255,.08)}
.imp-drop-icon{font-size:42px;color:var(--accent)}
.imp-pv .mp-canvas{max-height:52vh;object-fit:contain}
.imp-row{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:8px;color:var(--mut);font-size:12.5px}
.imp-row .txt,.imp-row .sel{width:100%}
.imp-chk{grid-template-columns:auto 1fr}
.imp-stats td{font-family:Consolas,monospace;font-size:12px}
.imp-warn{margin:0;padding:6px 10px 6px 24px;background:rgba(255,176,32,.08);border:1px solid rgba(255,176,32,.35);border-radius:8px;color:#ffcf7a;font-size:12px}
.imp-err{color:#ff8a8a;font-size:12.5px}
.imp-place{flex-wrap:wrap;gap:6px}
.h3d-mv,.h3d-lift{width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:6px;background:var(--cyan);color:#fff;font-size:13px;line-height:18px;text-align:center;cursor:move;user-select:none}
.h3d-lift{background:#12a37f;cursor:ns-resize;font-size:10px}
.h3d-rot{background:#ff9f1c;cursor:alias}
@media (max-width:760px){.imp-body{grid-template-columns:1fr}}
.mp-field input[type=range]{min-width:0;width:100%}
.mp-field{min-width:0}
.imp-pv .mp-controls{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

.imp-lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;overflow:auto;max-height:60vh}
.imp-lib-item{position:relative}
.imp-lib-use{width:100%;display:flex;flex-direction:column;gap:3px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:5px;color:var(--ink);cursor:pointer;text-align:left;font-size:11.5px}
.imp-lib-use:hover{border-color:var(--accent)}
.imp-lib-use img,.imp-lib-none{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:5px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--accent)}
.imp-lib-use span{color:var(--mut);font-size:10.5px}
.imp-lib-del{position:absolute;top:8px;right:8px;width:auto;padding:0 6px;opacity:.75}

/* render tools that stay out of the render's way */
.sheet3d-bar{top:8px;flex-wrap:nowrap;gap:5px;padding:4px 6px;background:rgba(14,18,25,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-color:rgba(90,105,128,.45);box-shadow:0 4px 14px rgba(0,0,0,.25);transition:opacity .2s}
.sheet3d-bar .s3-opt{padding:3px 8px}
.s3-q{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:5px;font-size:11.5px;padding:2px 2px}
.s3-ic{background:transparent;border:1px solid transparent;color:var(--ink);border-radius:6px;min-width:26px;height:26px;padding:0 5px;cursor:pointer;font-size:13.5px;line-height:1}
.s3-ic:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}
.s3-ic.on{background:rgba(124,92,255,.35);border-color:var(--accent)}
.s3-sep{width:1px;align-self:stretch;background:rgba(255,255,255,.12);margin:2px 2px}
.sheet3d-bar .s3-go{padding:3px 10px;min-width:70px;font-size:12px}
.sheet3d-bar .s3-status{min-width:0;max-width:170px;overflow:hidden;text-overflow:ellipsis}
.sheet3d-bar.collapsed{padding:3px 5px}
#stage.orbiting .sheet3d-bar,#stage.orbiting .site-pop,#stage.orbiting .sel3d{opacity:.12;pointer-events:none}
.s3-pill{display:none;position:absolute;top:8px;right:10px;z-index:38;background:rgba(14,18,25,.6);color:var(--ink);border:1px solid rgba(90,105,128,.45);border-radius:14px;padding:3px 10px;font-size:11.5px;cursor:pointer;opacity:.6}
.s3-pill:hover{opacity:1}
#stage.clean3d .sheet3d-bar,#stage.clean3d .site-pop,#stage.clean3d .sel3d,#stage.clean3d .perf-hud,#stage.clean3d .h3d-layer{display:none!important}
#stage.clean3d .s3-pill{display:block}
/* popovers dock at the left edge, translucent, never over the middle of the render */
.site-pop{top:48px;left:10px;transform:none;width:min(310px,calc(100% - 20px));max-height:calc(100% - 96px);background:rgba(14,18,25,.84);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-color:rgba(90,105,128,.45)}
.lens-pop{width:min(330px,calc(100% - 20px))}
.sel3d{top:48px;background:rgba(14,18,25,.84);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@media (max-width:700px){.sheet3d-bar{left:8px;right:8px;transform:none;max-width:none;overflow-x:auto}.site-pop{top:auto;bottom:44px;max-height:45%}}

.hidden-layers-chip{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);z-index:36;display:flex;align-items:center;gap:8px;padding:4px 6px 4px 10px;background:rgba(40,30,10,.9);border:1px solid rgba(255,176,32,.5);border-radius:14px;color:#ffcf7a;font-size:12px}
.hidden-layers-chip[hidden]{display:none}
.hidden-layers-chip .mini{width:auto;padding:0 8px}



/* ---- video players over the canvas (js/media.js) ---- */
#media-layer{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.md-player{position:absolute;pointer-events:auto;overflow:hidden;background:#000;transform-origin:50% 50%}
.md-player video,.md-player iframe{position:static;display:block;width:100%;height:100%;border:0;background:#000;object-fit:contain}
/* a dark app scheme over the embed's light one would paint it an opaque white */
.md-player iframe{color-scheme:normal}
.md-player.md-x,.md-player.md-x iframe{background:transparent}
.md-stop{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.65);color:#fff;font-size:13px;line-height:1;cursor:pointer;opacity:.75}
.md-stop:hover{opacity:1}
.md-dlg{width:min(520px,100%);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.md-dlg h3{font-size:13px;color:var(--ink);letter-spacing:.04em}
.md-lab{display:block;color:var(--mut);font-size:12px;margin:4px 0 6px}
.md-url{width:100%;padding:9px 10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;user-select:text}
.md-hint{min-height:18px;margin:6px 0 10px;color:var(--mut);font-size:12px}
.md-row{display:flex;gap:8px;align-items:center}
.md-grow{flex:1}
.md-row button{padding:7px 12px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font:inherit;cursor:pointer}
.md-row button.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.md-src{word-break:break-all;user-select:text}
/* model editor (js/modeledit.js): the node map of an imported model */
.mx-tree{max-height:300px;overflow:auto;border:1px solid var(--line);border-radius:5px;padding:2px 0;font-size:12px}
.mx-row{display:flex;align-items:center;gap:3px;padding:2px 4px;cursor:pointer;white-space:nowrap}
.mx-row:hover{background:var(--hover)}
.mx-row.on{background:#3a2a1a;color:#ffb070}
.mx-row.off .mx-name{opacity:.45}
.mx-row.del .mx-name{text-decoration:line-through}
.mx-tw{flex:0 0 12px;color:var(--mut);text-align:center}
.mx-name{flex:1;overflow:hidden;text-overflow:ellipsis}
.mx-b{flex:0 0 20px;height:18px;padding:0;border:0;background:none;color:var(--mut);cursor:pointer;font-size:11px}
.mx-b:hover{color:var(--ink)}
.mx-mats summary{cursor:pointer;color:var(--mut);font-size:12px;padding:3px 0}
/* tone curves (js/render/curves.js) in the Post panel */
.cv-host{padding:4px 0}
.cv-wrap{position:relative;width:100%;aspect-ratio:1/1;max-width:260px;margin:0 auto;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#12161f}
.cv-canvas{display:block;position:static;touch-action:none;cursor:crosshair}
.s3-opt.dirty::after{content:'•';margin-left:3px;opacity:.9}
.s3-opt.cv-ch-r.on{color:#ff6b6b}
.s3-opt.cv-ch-g.on{color:#5fd47a}
.s3-opt.cv-ch-b.on{color:#5aa9ff}
.colbox{width:40px;height:22px;padding:0;border:1px solid var(--line);border-radius:4px;background:none}

/* grade a saved render (js/rendergrade.js) */
.rg-card{width:min(1500px,100%);height:min(920px,100%)}
.rg-body{flex:1;display:flex;min-height:0}
.rg-view{flex:1;display:flex;align-items:center;justify-content:center;background:#0b0e13;padding:14px;min-width:0}
.rg-canvas{position:static;max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.rg-side.site-pop{position:static;transform:none;top:auto;left:auto;width:360px;max-height:none;border-radius:0;border-width:0 0 0 1px;overflow:auto;box-shadow:none}
.rl-item .btnrow{flex-wrap:wrap;gap:4px}
.rl-item .btnrow .sel{flex:1 1 100%;min-width:0}
/* public projects (js/cloud/public.js): cards on the Welcome screen and in the library */
.pub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;text-align:left}
.pub-card{position:relative;display:flex;align-items:center;gap:12px;padding:8px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:inherit;font:inherit;cursor:pointer;text-align:left}
.pub-card:hover,.pub-card:focus-visible{border-color:#e8b04a;background:rgba(232,176,74,.08);outline:none}
.pub-thumb{flex:none;width:84px;height:56px;border-radius:6px;overflow:hidden;background:#1d232c;display:grid;place-items:center;color:#556}
.pub-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pub-meta b{display:block;font-size:13px}
.pub-meta small{display:block;color:#9aa4b1;font-size:11px;margin-top:2px}
.pub-copy{position:absolute;top:6px;right:8px;font-size:11px;color:#e8b04a;padding:2px 6px;border-radius:4px;background:rgba(232,176,74,.1)}
.pub-copy:hover{background:rgba(232,176,74,.25)}
.pub-head{margin-top:26px}
.pub-head .sh-sub{color:#8b95a3;font-size:12px}
.sh-chip.pub{background:rgba(232,176,74,.18);color:#e8b04a}
.wl-pub{margin-top:4px}
/* the start screen of a fresh project (js/welcome.js) */
.wl{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:rgba(6,8,12,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:wl-in .25s ease}
@keyframes wl-in{from{opacity:0}to{opacity:1}}
.wl-card{width:min(860px,100%);max-height:100%;overflow:auto;padding:28px 28px 20px;border-radius:16px;background:#12161d;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 64px rgba(0,0,0,.5);color:#e9edf2;font:14px ui-sans-serif,system-ui,sans-serif;text-align:center}
.wl-brand{font:700 12px ui-sans-serif,system-ui,sans-serif;letter-spacing:.14em;color:#e8b04a;text-transform:uppercase}
.wl-brand span{color:#8b95a3;font-weight:600;letter-spacing:.08em}
.wl-card h1{margin:10px 0 22px;font:600 26px ui-sans-serif,system-ui,sans-serif;letter-spacing:-.01em}
.wl-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.wl-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 16px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:inherit;font:inherit;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.wl-opt:hover,.wl-opt:focus-visible{border-color:#e8b04a;background:rgba(232,176,74,.08);transform:translateY(-2px);outline:none}
.wl-ic{color:#e8b04a;display:grid;place-items:center;width:64px;height:64px;border-radius:16px;background:rgba(232,176,74,.1)}
.wl-opt b{font-size:15px}
.wl-opt small{color:#9aa4b1;font-size:12px;line-height:1.45}
.wl-opt kbd{position:absolute;top:10px;right:10px;font:600 10px ui-monospace,monospace;color:#8b95a3;border:1px solid rgba(255,255,255,.14);border-radius:4px;padding:1px 5px}
.wl-cont{position:relative;display:flex;align-items:center;gap:14px;width:100%;margin:0 0 6px;padding:14px 16px;border-radius:12px;border:1px solid #e8b04a;background:rgba(232,176,74,.1);color:inherit;font:inherit;text-align:left;cursor:pointer}
.wl-cont:hover,.wl-cont:focus-visible{background:rgba(232,176,74,.18);outline:none}
.wl-cont b{display:block;font-size:15px}
.wl-cont small{display:block;color:#9aa4b1;font-size:12px;margin-top:2px}
.wl-cont-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:rgba(232,176,74,.2);color:#e8b04a;font-size:20px;flex:none}
.wl-cont kbd{margin-left:auto;font:600 10px ui-monospace,monospace;color:#8b95a3;border:1px solid rgba(255,255,255,.14);border-radius:4px;padding:1px 5px}
.wl-or{margin:14px 0 12px;color:#8b95a3;font-size:12px;text-transform:uppercase;letter-spacing:.1em}
/* the featured project, the centre piece of the start screen */
.wl-hero{display:grid;grid-template-columns:1.35fr 1fr;gap:0;margin:16px 0 8px;border-radius:14px;overflow:hidden;border:1px solid rgba(232,176,74,.35);background:rgba(255,255,255,.03);text-align:left}
.wl-hero[hidden]{display:none}
.wl-hero-img{display:block;padding:0;border:0;background:#0b0e13;cursor:pointer;min-height:220px}
.wl-hero-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.wl-hero-img:hover img{transform:scale(1.03)}
.wl-hero-txt{padding:20px 22px;display:flex;flex-direction:column;gap:8px}
.wl-hero-tag{font:700 10.5px ui-sans-serif,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#e8b04a}
.wl-hero h2{margin:0;font:600 26px ui-sans-serif,system-ui,sans-serif;letter-spacing:-.01em}
.wl-hero-meta{color:#9aa4b1;font-size:12.5px}
.wl-hero p{margin:4px 0 6px;color:#c9d0da;font-size:13px;line-height:1.55}
.wl-hero-go{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.wl-explore{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;font-size:14px}
.wl-explore kbd{font:600 10px ui-monospace,monospace;opacity:.7;border:1px solid rgba(0,0,0,.25);border-radius:4px;padding:0 4px}
.wl-hero-hint{color:#8b95a3;font-size:11.5px}
.wl-card h1{font-size:15px;font-weight:600;color:#9aa4b1;margin:18px 0 10px;text-transform:uppercase;letter-spacing:.08em}
.wl-row .wl-opt{padding:12px 12px 12px;gap:4px}
.wl-row .wl-ic{width:40px;height:40px;border-radius:10px}
.wl-row .wl-ic svg{width:28px;height:28px}
.wl-row .wl-opt b{font-size:13.5px}
.wl-row .wl-opt small{font-size:11px}
@media (max-width:640px){.wl-hero{grid-template-columns:1fr}.wl-hero-img{min-height:180px;max-height:220px}.wl-hero h2{font-size:21px}.wl-hero p{font-size:12.5px}}
.wl-skip{margin-top:18px;background:none;border:0;color:#8b95a3;font:inherit;font-size:12px;cursor:pointer;text-decoration:underline}
.wl-skip:hover{color:#e9edf2}
@media (max-width:640px){.wl-row{grid-template-columns:1fr}.wl-opt{flex-direction:row;text-align:left;padding:14px}.wl-opt small{display:none}.wl-ic{width:48px;height:48px}.wl-card h1{font-size:21px}}
/* quick camera controls over the 3D view (js/camquick.js) */
.cq{position:fixed;right:12px;bottom:58px;z-index:36;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px;max-width:min(560px,calc(100vw - 24px));padding:5px 6px;border-radius:14px;background:rgba(12,15,20,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px 16px rgba(0,0,0,.35);font:600 11px ui-sans-serif,system-ui,sans-serif}
.cq[hidden]{display:none}
.cq-grp{display:flex;align-items:center;gap:2px;padding:0 2px}
.cq-grp+.cq-grp{border-left:1px solid rgba(255,255,255,.12);padding-left:6px}
/* tap to focus / drag the sun for exposure (js/camquick.js) */
.cq-af{--ev:0;--c:#ffd60a;position:absolute;z-index:35;width:0;height:0;pointer-events:none;transition:opacity .4s}
.cq-af[hidden]{display:none}
.cq-af.dim{opacity:.45}
.cq-af-box{position:absolute;left:-38px;top:-38px;width:76px;height:76px;box-sizing:border-box;border:1.5px solid var(--c);pointer-events:auto;touch-action:none;cursor:ns-resize;
  background:linear-gradient(var(--c),var(--c)) 50% 0/1.5px 6px no-repeat,linear-gradient(var(--c),var(--c)) 50% 100%/1.5px 6px no-repeat,linear-gradient(var(--c),var(--c)) 0 50%/6px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 100% 50%/6px 1.5px no-repeat}
.cq-af.pop .cq-af-box{animation:cqpop .35s ease-out}
@keyframes cqpop{0%{transform:scale(1.45);opacity:.2}100%{transform:scale(1);opacity:1}}
.cq-af-sun{position:absolute;left:44px;top:-60px;width:44px;height:120px;pointer-events:auto;touch-action:none;cursor:ns-resize;display:flex;flex-direction:column;align-items:center}
.cq-af-sun b{flex:1;width:1.5px;background:var(--c);opacity:0;transition:opacity .2s}
.cq-af.live .cq-af-sun b{opacity:.9}
.cq-af-sun span{position:absolute;left:50%;top:calc(50% + var(--ev) * 50px);transform:translate(-50%,-50%);color:var(--c);font-size:20px;line-height:1;text-shadow:0 0 3px rgba(0,0,0,.6)}
.cq-af::after{content:attr(data-ev);position:absolute;left:92px;top:-8px;font:600 12px ui-sans-serif,system-ui,sans-serif;color:var(--c);text-shadow:0 0 3px rgba(0,0,0,.7);white-space:nowrap}
.cq-af.lock::before{content:'AE/AF LOCK';position:absolute;left:-44px;top:-64px;padding:3px 7px;border-radius:5px;background:var(--c);color:#1a1400;font:700 10.5px ui-sans-serif,system-ui,sans-serif;letter-spacing:.04em;white-space:nowrap}
body.is-mobile .cq-af-sun{left:46px;width:52px}
.cq-chip{min-width:26px;height:26px;padding:0 7px;border-radius:13px;border:0;background:rgba(255,255,255,.08);color:#e9edf2;font:inherit;cursor:pointer;white-space:nowrap}
.cq-chip:hover{background:rgba(255,255,255,.16)}
.cq-chip.on{background:#ffd60a;color:#1a1a1a}
.cq-chip.lens{min-width:30px}
.cq-chip.lock{font-size:10px;letter-spacing:.02em}
.cq-val{color:#ffd60a;padding:0 4px}
.cq-ev{flex-basis:100%;display:flex;align-items:center;gap:8px;padding:2px 6px 0}
.cq-ev[hidden]{display:none}
.cq-ev input{flex:1;accent-color:#ffd60a}
.cq-lab{color:#ffd60a}
/* the day dial (js/daydial.js) */
.dd{display:flex;flex-direction:column;gap:3px;margin:2px 0}
.dd-head{display:flex;align-items:center;gap:6px;min-height:22px}
.dd-phase{font-weight:600;color:var(--ink);white-space:nowrap}
.dd-time{font:600 12px ui-monospace,monospace;background:none;border:1px solid transparent;border-radius:4px;color:var(--accent,#e8b04a);padding:1px 4px;cursor:text}
.dd-time:hover{border-color:var(--line2)}
.dd-in{width:54px;font:600 12px ui-monospace,monospace;background:rgba(0,0,0,.35);color:var(--ink);border:1px solid var(--accent,#e8b04a);border-radius:4px;padding:1px 4px}
.dd-btn{background:none;border:1px solid var(--line2);border-radius:4px;color:var(--ink);font-size:10px;width:24px;height:20px;cursor:pointer}
.dd-btn:hover{border-color:var(--accent,#e8b04a)}
.dd-pre{display:flex;gap:2px;justify-content:space-between;flex-wrap:wrap}
.dd-p{background:none;border:0;color:var(--mute,#8b95a3);font-size:10px;padding:1px 3px;border-radius:3px;cursor:pointer}
.dd-p:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.dd-svg{width:100%;height:auto;display:block;cursor:ew-resize;touch-action:none;outline:none;border-radius:6px;background:rgba(0,0,0,.18)}
.dd-svg:focus-visible{box-shadow:0 0 0 1px var(--accent,#e8b04a)}
.dd-svg .dd-hor{stroke:rgba(255,255,255,.28);stroke-width:.8}
.dd-svg .dd-hr{stroke:rgba(255,255,255,.35);stroke-width:.8}
.dd-svg .dd-curve{fill:none;stroke:rgba(245,196,107,.85);stroke-width:1.3}
.dd-svg .dd-tick{stroke:#f5c46b;stroke-width:1}
.dd-svg .dd-lab{fill:var(--mute,#8b95a3);font:9px ui-monospace,monospace;text-anchor:middle}
.dd-svg .dd-now-l{stroke:rgba(255,255,255,.18);stroke-width:.8;stroke-dasharray:2 2}
.dd-svg .dd-sun{fill:#ffd27a;stroke:#fff5dc;stroke-width:1.2;filter:drop-shadow(0 0 3px rgba(255,200,110,.8))}
.dd-svg .dd-sun.night{fill:#c9d3e8;stroke:#8c9ab5;filter:drop-shadow(0 0 3px rgba(170,190,230,.6))}
.dd-band{position:relative;height:6px;border-radius:3px;cursor:ew-resize;touch-action:none}
.dd-band i{position:absolute;top:-2px;width:2px;height:10px;margin-left:-1px;background:#fff;border-radius:1px;box-shadow:0 0 2px rgba(0,0,0,.8)}
/* the cabinet maker's module strip (model/cabinet.js) · a system's numbers (model/sysfields.js) */
.sys-info{color:var(--accent,#f0a830);font-variant-numeric:tabular-nums}
.cab-head{margin:8px 0 4px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--mut,#98a2b3)}
.cab-strip{display:flex;gap:2px;height:54px;margin-bottom:6px;padding:3px;border-radius:8px;background:rgba(0,0,0,.25)}
.cab-mod{position:relative;min-width:0;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:4px;background:#2a2f38;color:#cfd6e2;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;font:600 9.5px ui-sans-serif,system-ui,sans-serif}
.cab-mod:hover{border-color:rgba(255,255,255,.45)}
.cab-mod.on{border-color:#f0a830;box-shadow:inset 0 0 0 1px #f0a830;background:#3a3325}
.cab-mod i{position:absolute;inset:4px 4px 16px;border:1px solid rgba(255,255,255,.28);border-radius:2px}
.cab-mod span{padding-bottom:2px;white-space:nowrap}
.cab-mod.f-doors i{background:linear-gradient(90deg,transparent calc(50% - .5px),rgba(255,255,255,.28) calc(50% - .5px) calc(50% + .5px),transparent 0)}
.cab-mod.f-drawers i,.cab-mod.f-hob i{background:linear-gradient(transparent 20%,rgba(255,255,255,.28) 20% calc(20% + 1px),transparent 0 60%,rgba(255,255,255,.28) 60% calc(60% + 1px),transparent 0)}
.cab-mod.f-drawers2 i{background:linear-gradient(transparent calc(50% - .5px),rgba(255,255,255,.28) 0 calc(50% + .5px),transparent 0)}
.cab-mod.f-drawers4 i{background:repeating-linear-gradient(transparent 0 calc(25% - 1px),rgba(255,255,255,.28) calc(25% - 1px) 25%)}
.cab-mod.f-open i{border-style:dashed;background:linear-gradient(transparent calc(50% - .5px),rgba(255,255,255,.2) 0 calc(50% + .5px),transparent 0)}
.cab-mod.f-sink i::after{content:'';position:absolute;left:18%;right:18%;top:-3px;height:5px;border-radius:0 0 3px 3px;background:#9fb4c8}
.cab-mod.f-hob i::after{content:'';position:absolute;left:10%;right:10%;top:-3px;height:3px;background:#111}
.cab-mod.f-oven i{background:linear-gradient(#11141a,#11141a) 50% 70%/78% 55% no-repeat}
.cab-mod.f-fridge i{background:linear-gradient(transparent 38%,rgba(255,255,255,.28) 38% calc(38% + 1px),transparent 0)}
.cab-mod.f-blank i{border-color:transparent;background:rgba(255,255,255,.06)}
.cab-btns{flex-wrap:wrap;gap:4px}

/* sheet hyperlinks (js/links.js) */
canvas.lk-hover{cursor:pointer!important}
.lk-tip{position:fixed;z-index:9000;pointer-events:none;padding:4px 9px;border-radius:6px;background:rgba(13,16,22,.88);color:#f1e3c4;font:600 12px/1.3 ui-sans-serif,system-ui,sans-serif;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.lk-tip[hidden]{display:none}
.lk-back{position:absolute;left:14px;top:14px;z-index:30;padding:8px 14px;border-radius:999px;border:1px solid rgba(232,176,74,.45);background:rgba(13,16,22,.78);color:#f1e3c4;font:600 13px/1 ui-sans-serif,system-ui,sans-serif;cursor:pointer;backdrop-filter:blur(6px)}
.lk-back:hover{background:rgba(13,16,22,.92)}
.lk-back[hidden]{display:none}