:root{--bg:#0e0e0d;--sf:#181816;--sf2:#222220;--bd:#2e2e2a;--tx:#e8e4d9;--mu:#8a8778;--ac:#c4a04a;--ac2:#5a9a6b;--rd:#e06060;--gr:#60c060;--bl:#6090e0}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--tx);font-family:'DM Mono',monospace;overflow:hidden;height:100vh;height:100dvh}

/* ── Desktop layout (default) ──────────────────────────────────────── */
:root{--pnl-w:340px}
#app{display:grid;grid-template-columns:var(--pnl-w) 1fr;height:100vh;height:100dvh}
.pnl{background:var(--sf);border-right:1px solid var(--bd);overflow-y:auto;display:flex;flex-direction:column;position:relative;min-width:260px;max-width:600px}

/* Drag handle to resize the panel — sits OUTSIDE the panel on the viewport side */
.pnl-resize{position:fixed;top:0;width:6px;height:100%;cursor:col-resize;z-index:20;
  left:var(--pnl-w);margin-left:-1px}
.pnl-resize:hover{background:var(--ac);opacity:.4}
.pnl{user-select:none}
.pnl{padding-right:8px}
.pnl::-webkit-scrollbar{width:6px}.pnl::-webkit-scrollbar-thumb{background:var(--bd);border-radius:3px}
.ph{padding:18px 22px 14px;border-bottom:1px solid var(--bd)}
.ph h1{font-family:'Instrument Serif',serif;font-weight:400;font-size:21px}
.ph-logo{text-decoration:none;color:inherit;display:block;transition:opacity .15s}
.ph-logo:hover{opacity:.75}
.ph .sub{font-size:9px;color:var(--mu);text-transform:uppercase;letter-spacing:2px;margin-top:3px}
/* ── Panel header with avatar ── */
.ph-row{display:flex;align-items:center;justify-content:space-between}
.ph-avatar{width:30px;height:30px;border-radius:50%;background:var(--sf2);border:1px solid var(--bd);
  display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--ac);cursor:pointer;
  position:relative;flex-shrink:0}
.ph-avatar:hover{border-color:var(--ac)}
.ph-avatar-menu{display:none;position:absolute;top:34px;right:0;background:var(--sf);border:1px solid var(--bd);
  border-radius:4px;min-width:120px;z-index:50;overflow:hidden}
.ph-avatar-menu.open{display:block}
.ph-avatar-menu a,.ph-avatar-menu button{display:block;width:100%;text-align:left;padding:8px 14px;font-size:9px;
  color:var(--mu);text-decoration:none;border:none;background:none;font-family:'DM Mono',monospace;
  text-transform:uppercase;letter-spacing:1px;cursor:pointer}
.ph-avatar-menu a:hover,.ph-avatar-menu button:hover{background:var(--sf2);color:var(--tx)}

.readonly-banner{display:flex;align-items:center;gap:8px;padding:8px 22px;background:var(--sf2);
  border-bottom:1px solid var(--bd);font-size:9px;color:var(--mu);text-transform:uppercase;letter-spacing:1px}

/* ── Auth / save section ── */
.save-cta{display:block;text-align:center;text-decoration:none;margin-bottom:6px}
.profile-link{display:block;text-align:center;text-decoration:none;background:var(--sf2);color:var(--mu);border:1px solid var(--bd);margin-top:6px}
.profile-link:hover{border-color:var(--ac);color:var(--tx)}
#saveBtn:disabled{opacity:.5;cursor:default}
.design-name-input{width:100%;padding:8px 10px;background:var(--sf2);border:1px solid var(--bd);border-radius:3px;
  color:var(--tx);font-family:'DM Mono',monospace;font-size:10px;outline:none}
.design-name-input:focus{border-color:var(--ac)}

.sec{padding:12px 22px;border-bottom:1px solid var(--bd)}
.st{font-size:9px;text-transform:uppercase;letter-spacing:2px;color:var(--ac);margin-bottom:10px}
.c{margin-bottom:10px}
.cr{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}
.c label{font-size:10px;color:var(--mu)}
.c .v{font-size:10px;color:var(--tx);font-weight:500;min-width:44px;text-align:right}
input[type=range]{width:100%;height:6px;-webkit-appearance:none;appearance:none;background:var(--bd);border-radius:3px;outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:12px;border-radius:3px;background:var(--ac);cursor:pointer;border:2px solid var(--bg)}
input[type=range]::-moz-range-thumb{width:16px;height:12px;border-radius:3px;background:var(--ac);cursor:pointer;border:2px solid var(--bg)}
input[type=range]::-moz-range-track{height:6px;background:var(--bd);border-radius:3px}
.to{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:4px}
.tb{background:var(--sf2);border:1px solid var(--bd);padding:6px 2px;text-align:center;font-size:8px;color:var(--mu);cursor:pointer;transition:all .15s;text-transform:uppercase;letter-spacing:.5px;font-family:'DM Mono',monospace}
.tb:hover{border-color:var(--ac);color:var(--tx)}.tb.on{background:var(--ac);color:var(--bg);border-color:var(--ac);font-weight:500}
.pr{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.pb{background:var(--sf2);border:1px solid var(--bd);padding:8px 2px;text-align:center;font-size:8px;color:var(--mu);cursor:pointer;transition:all .15s;font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.5px}
.pb:hover{border-color:var(--ac2);color:var(--tx)}
.clr{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;margin-top:4px}
.cs{width:100%;aspect-ratio:1;border-radius:50%;border:2px solid var(--bd);cursor:pointer;transition:all .12s}
.cs:hover{border-color:var(--tx);transform:scale(1.1)}.cs.on{border-color:var(--ac);box-shadow:0 0 0 1px var(--ac)}
.es{padding:12px 22px;margin-top:auto;border-top:1px solid var(--bd)}
.eb{width:100%;padding:10px;background:var(--ac);color:var(--bg);border:none;font-family:'DM Mono',monospace;font-size:10px;font-weight:500;cursor:pointer;text-transform:uppercase;letter-spacing:2px}
.eb:hover{opacity:.85}
.esu{font-size:8px;color:var(--mu);text-align:center;margin-top:5px}

/* ── .es bottom panel zones ─────────────────────────────────────── */
.es-title{margin-top:12px}
.save-row{display:flex;gap:6px;align-items:stretch}
.save-row .design-name-input{flex:1;padding:8px 10px;background:var(--sf2);border:1px solid var(--bd);border-radius:3px;
  color:var(--tx);font-family:'DM Mono',monospace;font-size:10px;outline:none;min-width:0}
.save-row .design-name-input:focus{border-color:var(--ac)}
.save-btn{flex:0 0 auto;padding:0 16px;background:var(--ac);color:var(--bg);border:none;border-radius:3px;
  font-family:'DM Mono',monospace;font-size:10px;font-weight:500;cursor:pointer;text-transform:uppercase;
  letter-spacing:1.5px;transition:all .2s}
.save-btn:hover{opacity:.85}
.save-btn:disabled{opacity:.5;cursor:default}

.btn-row{display:flex;gap:8px;margin-top:8px}
.act-btn,.nav-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 8px;
  border-radius:3px;font-family:'DM Mono',monospace;font-size:9px;cursor:pointer;text-transform:uppercase;
  letter-spacing:1px;text-decoration:none;transition:all .2s}
.act-btn svg,.nav-btn svg,.foot-learn svg{width:14px;height:14px;flex-shrink:0}

.act-btn{background:rgba(196,160,74,0.15);color:var(--ac);border:1px solid rgba(196,160,74,0.3)}
.act-btn:hover{background:rgba(196,160,74,0.25);border-color:var(--ac)}

.nav-btn{background:transparent;color:var(--mu);border:1px solid rgba(255,255,255,0.06)}
.nav-btn:hover{background:rgba(255,255,255,0.04);color:var(--tx);border-color:rgba(255,255,255,0.12)}

.foot-row{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--bd)}
.foot-user{font-size:11px;color:var(--mu);font-family:'DM Mono',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foot-learn{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:20px;
  color:var(--mu);text-decoration:none;font-family:'DM Mono',monospace;font-size:10px;
  text-transform:uppercase;letter-spacing:1px;transition:all .2s;margin-left:auto}
.foot-learn:hover{background:rgba(196,160,74,0.12);color:var(--ac)}

/* ── Component header Mirror toggle + axis lock bar ─────────────────── */
.comp-mirror{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;font-family:'DM Mono',monospace;
  font-size:9px;font-weight:600;color:var(--mu);background:transparent;border:1px solid var(--bd);
  border-radius:3px;cursor:pointer;transition:all .15s;text-transform:uppercase;letter-spacing:.5px}
.comp-mirror:hover{border-color:var(--ac);color:var(--tx)}
.comp-mirror.on{color:var(--ac);background:rgba(196,160,74,0.15);border-color:rgba(196,160,74,0.4)}
.comp-mirror svg{width:11px;height:11px;flex-shrink:0}

.lock-bar{display:flex;gap:4px;padding:6px 10px;border-top:1px solid var(--bd);align-items:center;
  background:rgba(0,0,0,0.15)}
.lock-bar-label{font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mu);margin-right:4px}
.lock-btn{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;font-family:'DM Mono',monospace;
  font-size:9px;font-weight:600;background:transparent;border:1px solid var(--bd);border-radius:3px;
  cursor:pointer;color:var(--mu);transition:all .15s}
.lock-btn:hover{border-color:var(--ac);color:var(--tx)}
.lock-btn svg{width:9px;height:9px;opacity:.4;transition:opacity .15s}
.lock-btn.locked svg{opacity:1}
.lock-btn.x.locked{color:var(--rd);background:rgba(224,96,96,0.12);border-color:rgba(224,96,96,0.3)}
.lock-btn.y.locked{color:var(--gr);background:rgba(96,192,96,0.12);border-color:rgba(96,192,96,0.3)}
.lock-btn.z.locked{color:var(--bl);background:rgba(96,144,224,0.12);border-color:rgba(96,144,224,0.3)}

/* Collapsible sub-section header with preview value */
.sub-hdr{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;
  font-size:9px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--mu);
  padding:4px 0;margin-top:4px;gap:8px}
.sub-hdr:hover{color:var(--tx)}
.sub-hdr .preview{font-size:10px;color:var(--mu);text-transform:none;letter-spacing:0;font-weight:400;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Locked position slider row — dim with axis color */
.pos-row{margin-bottom:4px}
.pos-row.locked.x{--row-c:224,96,96}
.pos-row.locked.y{--row-c:96,192,96}
.pos-row.locked.z{--row-c:96,144,224}
.pos-row.locked .r-lbl{color:rgb(var(--row-c))}
.pos-row.locked .r-val{color:rgba(var(--row-c),0.8)}
.pos-row.locked input[type=range]{opacity:.5}
.pos-row.locked input[type=range]::-webkit-slider-thumb{background:rgba(var(--row-c),0.7);border-color:var(--bg)}
.pos-row.locked input[type=range]::-moz-range-thumb{background:rgba(var(--row-c),0.7);border-color:var(--bg)}

/* Compact rotation grid */
.rot-grid{display:grid;grid-template-columns:auto 1fr auto;gap:5px 10px;align-items:center;margin-top:2px}
.rot-grid .r-lbl{font-size:10px;color:var(--mu);text-align:right}
.rot-grid .r-val{font-size:10px;font-weight:600;color:var(--tx);width:38px;text-align:right;font-variant-numeric:tabular-nums}
.rot-grid .r-val.hl{color:var(--ac)}
.rot-grid input[type=range]{width:100%}

/* Inline label/value row for makeSlider replacement in position */
.s-row{display:grid;grid-template-columns:70px 1fr 44px;gap:8px;align-items:center;margin-bottom:4px}
.s-row .r-lbl{font-size:10px;color:var(--mu);text-align:right}
.s-row .r-val{font-size:10px;font-weight:600;color:var(--tx);text-align:right;font-variant-numeric:tabular-nums}
.vp{position:relative;background:var(--bg);overflow:hidden;touch-action:none}
.vl{position:absolute;bottom:12px;left:12px;font-size:40px;color:rgba(200,168,78,0.15);text-transform:lowercase;letter-spacing:3px;pointer-events:none;font-style:italic}
.vs{position:absolute;top:12px;right:12px;font-size:9px;color:var(--mu);text-align:right;pointer-events:none;line-height:1.7}
.rh{position:absolute;bottom:12px;right:12px;font-size:8px;color:var(--mu);pointer-events:none;opacity:.4}
.view-btns{position:absolute;top:12px;left:12px;display:flex;gap:4px;z-index:10}
.vb{background:var(--sf);border:1px solid var(--bd);color:var(--mu);font-family:'DM Mono',monospace;
  font-size:8px;padding:4px 8px;cursor:pointer;text-transform:uppercase;letter-spacing:1px;
  border-radius:2px;transition:all .15s}
.vb:hover,.vb:active{border-color:var(--ac);color:var(--tx)}

/* Hidden by default on desktop/tablet */
.mob-view{display:none}
.tab-bar{display:none}
/* ── Slab viewport gizmo (top-center) ─────────────────────────────── */
.gizmo{position:absolute;top:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;z-index:20;font-family:var(--mono,'DM Mono',monospace)}
.gizmo-bar{display:flex;align-items:stretch;background:linear-gradient(180deg,#1c1c1a 0%,#131311 100%);
  border:1px solid #2a2a26;border-radius:5px;padding:4px;
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.4)}
.gizmo-btn{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:3px;cursor:pointer;color:var(--mu);
  transition:color 140ms, background 140ms, box-shadow 140ms}
.gizmo-btn:hover{color:var(--tx);background:rgba(255,255,255,0.03)}
.gizmo-btn.on{color:var(--ac);background:#0c0c0b;
  box-shadow:inset 0 0 0 1px rgba(196,160,74,0.55), inset 0 0 12px rgba(196,160,74,0.18)}
.gizmo-btn.text{width:auto;padding:0 10px;font-size:9px;letter-spacing:1.5px;text-transform:uppercase}
.gizmo-sep{width:1px;background:#2a2a26;margin:4px 4px;align-self:stretch}
.gicon{width:14px;height:14px;flex:0 0 auto}
.gicon path,.gicon line,.gicon polyline,.gicon polygon,.gicon circle,.gicon rect{
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tip{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:#0a0a09;border:1px solid var(--bd);border-radius:3px;padding:5px 8px;
  font-size:9px;color:var(--tx);text-transform:uppercase;letter-spacing:1.5px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity 120ms ease, transform 120ms ease;z-index:30}
.tip::before{content:'';position:absolute;top:-3px;left:50%;width:5px;height:5px;
  background:#0a0a09;border-left:1px solid var(--bd);border-top:1px solid var(--bd);
  transform:translateX(-50%) rotate(45deg)}
.tip .key{color:var(--mu);margin-left:6px}
[data-tip]:hover .tip{opacity:1;transform:translateX(-50%) translateY(2px)}
.axislock{display:flex;align-items:center;gap:1px;background:rgba(0,0,0,0.4);border:1px solid var(--bd);
  border-radius:3px;overflow:hidden;max-width:0;opacity:0;margin-left:0;padding:0;
  transition:max-width 220ms cubic-bezier(.6,.05,.3,1), opacity 160ms ease, margin-left 220ms ease, padding 220ms ease}
.axislock.on{max-width:160px;opacity:1;margin-left:6px;padding:2px}
.axc{width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:2px;cursor:pointer;
  font-family:inherit;font-size:10px;font-weight:500;letter-spacing:1px;color:var(--mu);
  transition:background 120ms, color 120ms}
.axc:hover{background:rgba(255,255,255,0.04);color:var(--tx)}
.axc[data-axis="x"].on{color:var(--rd);background:rgba(224,96,96,0.1)}
.axc[data-axis="y"].on{color:var(--gr);background:rgba(96,192,96,0.1)}
.axc[data-axis="z"].on{color:var(--bl);background:rgba(96,144,224,0.1)}

/* ── Profile editor styles ────────────────────────────────────────── */
.ed-toggle-row{display:flex;justify-content:space-between;align-items:center;cursor:pointer;user-select:none}
.ed-mode{font-size:7px;letter-spacing:1.5px;padding:2px 6px;border-radius:2px;font-weight:500}
.ed-mode.sliders{background:var(--ac);color:var(--bg)}
.ed-mode.manual{background:var(--ac2);color:var(--bg)}
.editors{padding-top:6px}
.ed-label{font-size:7px;color:var(--mu);text-transform:uppercase;letter-spacing:1.5px;margin:6px 0 3px}
.ed-hint{font-size:7px;color:var(--mu);opacity:.5;margin-top:4px;text-align:center}

/* Panel frame around the side + width editors so they read as cards
   matching the section editor's .se-root style. */
#sideEditorContainer,#widthEditorContainer{background:var(--sf);border:1px solid var(--bd);border-radius:4px;padding:8px;margin-bottom:6px}
.pe-svg{display:block;background:#0b0b0a;border:1px solid var(--bd);border-radius:2px;margin-bottom:4px;touch-action:none}
.pe-grid{stroke:var(--bd);stroke-width:.5;opacity:.6}
.pe-center{stroke:var(--mu);stroke-width:.4;stroke-dasharray:3,3;opacity:.4}
.pe-fill{fill:var(--ac);opacity:.05}
.pe-wfill{fill:var(--ac2);opacity:.05}
.pe-curve{fill:none;stroke-width:1.5}
.pe-dorsal{stroke:var(--ac)}
.pe-ventral{stroke:var(--ac2)}
.pe-width{stroke:var(--ac)}
.pe-mirror{opacity:.4;stroke-width:1}
.pe-pt{fill:var(--sf);stroke-width:1.8;cursor:ns-resize;transition:r .1s}
.pe-pt.dorsal{stroke:var(--ac)}
.pe-pt.ventral{stroke:var(--ac2)}
.pe-pt.width{stroke:var(--ac)}
.pe-pt:hover:not(.locked){r:6;fill:var(--sf2)}
.pe-pt.active{r:7;fill:var(--ac)}
.pe-pt.ventral.active{fill:var(--ac2)}
.pe-pt.width.active{fill:var(--ac)}
.pe-zoom{font-family:'DM Mono',monospace;font-size:7px;fill:var(--mu);opacity:.5}
.pe-station-line{stroke:var(--ac);stroke-width:1.2;stroke-dasharray:4,3;opacity:.7}
.pe-station-dot{fill:var(--ac);r:3;opacity:.9}
.pe-resize-handle{height:10px;cursor:ns-resize;background:var(--bd);opacity:.5;transition:opacity .15s;
  border-radius:0 0 3px 3px;position:relative;z-index:10}
.pe-resize-handle:hover,.pe-resize-handle:active{opacity:1;background:var(--ac)}
.pe-html-dot{border-radius:50%;border:2px solid var(--ac);background:var(--sf);box-shadow:0 0 0 1px var(--bg)}
.pe-html-dot.dorsal{border-color:var(--ac)}
.pe-html-dot.ventral{border-color:var(--ac2)}
.pe-html-dot.width{border-color:var(--ac)}
.pe-html-dot.eye{background:#eedd44;border-color:var(--bg)}
.pe-xsec-tick{background:var(--ac2);opacity:.5;border-radius:1px}
.pe-outline-fill{fill:var(--ac);opacity:.08}
.pe-outline-stroke{stroke:var(--ac);stroke-width:1.5;fill:none}

/* Cross-section editor */
.xsec-ref{fill:none;stroke:var(--mu);stroke-width:0.8;stroke-dasharray:3,3;opacity:.4}
.xsec-shape{fill:none;stroke:var(--ac);stroke-width:1.5}
.xsec-fill{fill:var(--ac);opacity:.06}
.xsec-bar{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}
.xsec-range-wrap{width:100%}
.xsec-range-track{position:relative;height:28px;background:var(--sf2);border:1px solid var(--bd);border-radius:3px;cursor:pointer;touch-action:none}
.xsec-range-zone{position:absolute;top:2px;bottom:2px;background:var(--ac);opacity:.15;border-radius:2px;pointer-events:none}
.xsec-range-thumb{position:absolute;top:2px;bottom:2px;width:12px;background:var(--ac);border-radius:2px;cursor:grab;z-index:2;touch-action:none}
.xsec-range-thumb:hover{background:var(--tx)}
.xsec-range-left,.xsec-range-right{position:absolute;top:4px;font-size:10px;color:var(--ac);cursor:ew-resize;
  user-select:none;z-index:3;line-height:20px;touch-action:none}
.xsec-range-left:hover,.xsec-range-right:hover{color:var(--tx)}
.xsec-btns{display:flex;gap:4px;align-items:center}
.xsec-label{font-size:8px;color:var(--mu);min-width:70px}
.xsec-btn{background:var(--sf2);border:1px solid var(--bd);color:var(--mu);font-family:'DM Mono',monospace;
  font-size:8px;padding:3px 8px;cursor:pointer;text-transform:uppercase;letter-spacing:.5px}
.xsec-btn:hover:not(:disabled){border-color:var(--ac);color:var(--tx)}
.xsec-btn:disabled{opacity:.3;cursor:default}
.xsec-toggle.on{background:var(--ac);color:var(--bg)}
.xsec-ghost{fill:none;stroke:var(--mu);stroke-width:0.6;stroke-dasharray:4,3;opacity:.35}
.xsec-ghost-after{stroke:var(--ac2);opacity:.3}

/* ── Tablet (481px — 1024px) ───────────────────────────────────────── */
@media(max-width:1024px){
  #app{grid-template-columns:1fr;grid-template-rows:55vh 45vh;grid-template-rows:55dvh 45dvh}
  .pnl{border-right:none;border-top:1px solid var(--bd);order:2}
  .vp{order:1}
  .editors{display:none} /* collapsed by default on tablet */
  .c{margin-bottom:12px}
  .c label{font-size:11px}
  .c .v{font-size:11px}
  input[type=range]::-webkit-slider-thumb{width:16px;height:16px}
  .tb{padding:8px 2px;font-size:9px}
  .ph h1{font-size:24px}
}

/* ── Phone (max-width: 480px) ──────────────────────────────────────── */
@media(max-width:480px){
  /* Mobile palette: lift the base surfaces ~12-18 lightness so the UI
     reads less murky in bright outdoor / mixed lighting. Brand accents
     (--ac gold, --ac2 green) keep their exact desktop values so the
     hierarchy of "what's tappable / branded" stays intact. */
  :root{
    --bg:#1d1d1a;
    --sf:#26261f;
    --sf2:#2f2f28;
    --bd:#48483f;
    --tx:#f2efe6;
    --mu:#aaa697;
  }
  body{overflow:hidden}
  #app{display:grid;grid-template-columns:1fr;grid-template-rows:60dvh 1fr;height:calc(100dvh - 36px)}

  /* 3D always on top. Bottom panel switches between controls / editors */
  .pnl{border:none;border-top:1px solid var(--bd);overflow-y:auto;display:flex;order:2}
  .vp{order:1}

  /* Profile/Plan editors sit in the bottom grid cell, replacing controls */
  .mob-view{display:none;background:var(--sf);overflow-y:auto;
    border-top:1px solid var(--bd);order:2;
    padding:8px 12px;flex-direction:column}
  .mob-view.active{display:flex}

  .mob-header{font-size:11px;color:var(--ac);text-transform:uppercase;letter-spacing:1.5px;
    margin-bottom:6px;flex-shrink:0}
  .mob-editor-wrap{flex:1;min-height:0;display:flex;flex-direction:column}
  .mob-editor-wrap .pe-svg{flex:1;height:auto !important;min-height:150px}

  /* Tab bar */
  .tab-bar{
    display:flex;position:fixed;bottom:0;left:0;right:0;height:36px;
    background:var(--sf);border-top:1px solid var(--bd);z-index:100;
  }
  .tab{
    flex:1;border:none;background:none;color:var(--mu);
    font-family:'DM Mono',monospace;font-size:9px;text-transform:uppercase;
    letter-spacing:0.5px;cursor:pointer;transition:color .15s;padding:0;
  }
  .tab.on{color:var(--ac);border-top:2px solid var(--ac)}

  .sec{padding:8px 12px}
  .c{margin-bottom:8px}
  .c label{font-size:11px}
  .c .v{font-size:13px}
  input[type=range]{height:6px}
  input[type=range]::-webkit-slider-thumb{width:20px;height:20px;border-width:3px}
  .st{font-size:10px;margin-bottom:12px}
  .tb{padding:10px 2px;font-size:10px}
  .pb{padding:10px 2px;font-size:10px}
  .cs{border-width:3px}
  .eb{padding:14px;font-size:12px}
  .ph h1{font-size:22px}
  .ph .sub{font-size:8px}

  /* Hide non-essential viewport overlays on phone */
  .vl{display:none}
  .vs{font-size:8px;top:8px;right:8px}
  .rh{font-size:7px;bottom:8px;right:8px}

  /* Full-screen editors on phone get larger SVGs */
  .mob-view .pe-svg{height:calc(100dvh - 120px) !important}

  /* XSec mobile: hide the drag-anywhere slider (use prev/next instead) and
     promote the prev/next bar to the top so it's reachable without scrolling. */
  #mobXSec .mob-editor-wrap{overflow:hidden}
  #mobXSec .xsec-bar:not(.xsec-bar-bottom){display:none}
  #mobXSec .xsec-bar-bottom{order:-1;margin-bottom:6px;flex-shrink:0}
  #mobXSec .mob-editor-wrap > div:not(.xsec-bar){flex:1;min-height:0;display:flex}
  #mobXSec .mob-editor-wrap .pe-svg{
    flex:1 !important;width:100% !important;height:100% !important;min-height:0;
  }

  /* Sculpt-editor mobile sizing. The `.se-canvas-wrap` declares
     aspect-ratio: 760/520 + min-height: 280, which when combined with
     the grid row's `align-items: stretch` (forced taller by the rail
     buttons) makes iOS Safari compute WIDTH from the forced height —
     blowing the cell past its grid column and shifting the centered
     SVG so half the section becomes unreachable.

     Drop the aspect-ratio + min-height on mobile and force the grid
     row to fill the available stage height (grid-template-rows: 1fr)
     so the canvas owns the vertical real estate, not the rail's
     natural content height. The SVG's preserveAspectRatio="xMidYMid
     meet" then handles centering inside whatever rectangle it gets. */
  #mobXSec .se-root{flex:1;min-height:0;display:flex;flex-direction:column}
  #mobXSec .se-stage{flex:1;min-height:0;overflow:hidden;grid-template-rows:minmax(0,1fr)}
  #mobXSec .se-canvas-wrap{
    aspect-ratio:auto;
    min-height:0;
    width:auto;
    height:100%;
  }
  /* Rail buttons can scroll inside their column if there are more than
     fit the stage height — keeps the canvas full-height regardless. */
  #mobXSec .se-rail{overflow-y:auto;padding:8px 6px}
  #mobXSec .se-rail .rail-btn{padding:7px 2px;font-size:7.5px}
  #mobXSec .se-rail .rail-btn svg{width:18px;height:18px}

  /* Controls panel — pack the mode picker + brush + strength + ghost
     toggles into a tight row so the section editor stays dominant. */
  #mobXSec .se-controls{padding:6px 10px;gap:10px;flex-shrink:0}
  #mobXSec .se-controls .ctl{min-width:0;flex:1 1 110px}
  #mobXSec .se-controls .ctl input[type=range]{width:100%}
  #mobXSec .se-controls .ctl label{font-size:8.5px}
  #mobXSec .se-controls .ctl-val{font-size:9.5px}
  #mobXSec .se-mode-btn,#mobXSec .se-sym-btn{padding:4px 6px;font-size:8.5px}
  /* Symmetry rarely changes from the Mirror default on phone — hide
     here, expose on desktop. */
  #mobXSec .se-controls .ctl-sym{display:none}
  #mobXSec .se-foot{padding:5px 8px;flex-shrink:0}
  #mobXSec .se-foot .foot-btn{padding:5px 9px;font-size:9px}
  /* When the xsec editor is open, give it more vertical room by shrinking
     the 3D viewport row — square SVG needs the height to be usable. */
  #app:has(#mobXSec.active){grid-template-rows:35dvh 1fr}
  .xsec-btn{min-height:44px;min-width:44px;padding:8px 12px;font-size:12px}
  .xsec-btns{gap:6px}

  /* Profile editor dots — larger on touch */
  .pe-html-dot{min-width:10px;min-height:10px}
}

/* ── Generate Mold CTA ── */
.mold-cta{width:100%;padding:12px 0;font-family:'DM Mono',monospace;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:1.5px;cursor:pointer;border:none;border-radius:3px;
  background:var(--ac2);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .15s}
.mold-cta:hover{background:#6ab87a}
.mold-cta svg{width:16px;height:16px}

/* ── Upgrade prompt modal (Phase 3) ── */
.up-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.65);backdrop-filter:blur(4px);
  z-index:9000;align-items:center;justify-content:center;padding:20px}
.up-overlay.open{display:flex}
.up-modal{background:var(--sf);border:1px solid var(--bd);border-radius:4px;padding:24px;
  max-width:420px;width:100%;animation:up-rise .2s ease}
@keyframes up-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.up-close{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--mu);font-size:16px;cursor:pointer}
.up-close:hover{color:var(--tx)}
.up-title{font-family:'Instrument Serif',serif;font-size:20px;color:var(--tx);margin-bottom:10px}
.up-desc{font-size:11px;color:var(--mu);line-height:1.6;margin-bottom:20px}
.up-actions{display:flex;gap:8px;flex-wrap:wrap}
.up-btn{font-family:'DM Mono',monospace;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:1.2px;
  padding:9px 16px;border-radius:2px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:all .15s;display:inline-block;text-align:center}
.up-btn-gold{background:var(--ac);color:var(--bg);border-color:var(--ac)}
.up-btn-gold:hover{background:#d4b05a}
.up-btn-ghost{background:transparent;color:var(--mu);border-color:var(--bd)}
.up-btn-ghost:hover{color:var(--tx);border-color:var(--ac)}

/* ── Sculpt-based cross-section editor ───────────────── */
.se-root{background:var(--sf);border:1px solid var(--bd);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;font-family:'DM Mono',monospace}
.se-scrub{padding:12px 14px;border-bottom:1px solid var(--bd)}
.se-scrub-label{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--ac);margin-bottom:8px}
.se-scrub-row{display:flex;align-items:center;gap:14px}
.se-scrub-track{flex:1;height:28px;background:var(--sf2);border:1px solid var(--bd);border-radius:2px;position:relative}
.se-tick{position:absolute;top:50%;width:1px;height:8px;transform:translate(-50%,-50%);background:var(--bd);pointer-events:none}
.se-kf-mark{position:absolute;top:0;bottom:0;width:3px;transform:translateX(-1.5px);background:var(--ac);opacity:.7;pointer-events:none;border-radius:1px}
.se-scrub-range{position:absolute;top:0;bottom:0;background:rgba(196,160,74,0.14);border-left:1px solid rgba(196,160,74,0.4);border-right:1px solid rgba(196,160,74,0.4);pointer-events:none}
.se-scrub-edge{position:absolute;top:0;bottom:0;width:8px;transform:translateX(-4px);cursor:ew-resize;background:transparent;z-index:2}
.se-scrub-edge::before{content:'';position:absolute;top:25%;bottom:25%;left:3px;width:2px;background:rgba(196,160,74,0.6)}
.se-scrub-handle{position:absolute;top:50%;transform:translate(-50%,-50%);background:var(--ac);color:var(--bg);font-size:9px;padding:4px 8px;border-radius:2px;display:flex;gap:8px;letter-spacing:.5px;font-weight:600;z-index:3;user-select:none;pointer-events:none}
.se-scrub-meta{font-size:10px;color:var(--mu);font-variant-numeric:tabular-nums;white-space:nowrap;display:flex;gap:14px;align-items:center}
.se-reset{padding:4px 10px;background:var(--sf2);border:1px solid var(--bd);color:var(--mu);font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;cursor:pointer;border-radius:2px;text-transform:uppercase}
.se-reset:hover{color:var(--tx);border-color:var(--ac)}
.se-stage{display:grid;grid-template-columns:88px 1fr;align-items:stretch}
.se-rail{padding:14px 10px;border-right:1px solid var(--bd);display:flex;flex-direction:column;gap:6px;background:rgba(0,0,0,0.18)}
.rail-group{display:flex;flex-direction:column;gap:4px}
.rail-divider{height:1px;background:var(--bd);margin:8px 4px}
.rail-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 4px;background:transparent;border:1px solid transparent;color:var(--mu);font-family:'DM Mono',monospace;font-size:8px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;border-radius:3px}
.rail-btn svg{width:22px;height:22px}
.rail-btn:hover{color:var(--tx);background:var(--sf2)}
.rail-btn.on{color:var(--ac);background:rgba(196,160,74,0.08);border-color:rgba(196,160,74,0.3)}
.se-canvas-wrap{position:relative;background:#0b0b0a;aspect-ratio:760/520;min-height:280px;overflow:hidden}
.se-canvas{display:block;width:100%;height:100%;cursor:none;touch-action:none}
.se-zoom-hint{position:absolute;left:8px;bottom:6px;font-size:8px;color:var(--mu);opacity:0.6;letter-spacing:.5px;pointer-events:none;font-family:'DM Mono',monospace}
.se-controls{display:flex;gap:18px;align-items:center;padding:10px 14px;border-top:1px solid var(--bd);flex-wrap:wrap;background:rgba(0,0,0,0.12)}
.se-controls .ctl{display:flex;flex-direction:column;gap:4px;min-width:140px}
.se-controls .ctl-row{display:flex;justify-content:space-between;align-items:center}
.se-controls .ctl label{font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:var(--mu)}
.se-controls .ctl-val{font-size:10px;color:var(--tx);font-variant-numeric:tabular-nums}
.se-controls .ctl input[type=range]{width:140px}
.se-controls .ctl-hint{font-size:9px;color:var(--mu);letter-spacing:.5px;flex:1;line-height:1.6}
.se-controls .ctl-hint .kbd{color:var(--ac);font-weight:500;text-transform:uppercase;letter-spacing:1px;font-size:8.5px;padding:1px 5px;border:1px solid rgba(196,160,74,0.25);border-radius:2px;margin-right:2px}
.se-sym-row,.se-mode-row{display:flex;gap:4px}
.se-sym-btn,.se-mode-btn{padding:5px 8px;background:var(--sf2);border:1px solid var(--bd);color:var(--mu);font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;border-radius:2px}
.se-sym-btn:hover,.se-mode-btn:hover{color:var(--tx);border-color:var(--ac)}
.se-sym-btn.on,.se-mode-btn.on{color:var(--ac);background:rgba(196,160,74,0.08);border-color:rgba(196,160,74,0.3)}
.se-mode-content{display:flex;gap:18px;align-items:center;flex-wrap:wrap;flex:1}
.ctl-btn{padding:7px 12px;background:var(--sf2);border:1px solid var(--bd);color:var(--mu);font-family:'DM Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:1.5px;cursor:pointer;border-radius:2px}
.ctl-btn:hover{color:var(--tx);border-color:var(--ac)}
.se-foot{display:flex;justify-content:space-between;padding:8px 14px;border-top:1px solid var(--bd)}
.foot-left,.foot-right{display:flex;gap:6px;align-items:center}
.foot-btn{padding:6px 10px;background:var(--sf2);border:1px solid var(--bd);color:var(--mu);font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;border-radius:2px}
.foot-btn:hover{color:var(--tx);border-color:var(--ac)}
.foot-btn.ghost{color:var(--ac);border-color:rgba(196,160,74,0.25)}
.foot-btn.ghost:not(.on){color:var(--mu);border-color:var(--bd);opacity:0.6}
.foot-meta{font-size:9px;color:var(--mu);letter-spacing:1.5px;text-transform:uppercase;margin-left:10px}

/* ── Array Patterns panel ─────────────────────────────────────────── */
.ap-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding:0 2px}
.ap-meta-cnt{font-size:9px;color:var(--mu);letter-spacing:2px;text-transform:uppercase;display:flex;gap:8px;align-items:center}
.ap-meta-cnt.empty::before{display:none}
.ap-meta-cnt::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 3px rgba(196,160,74,0.12)}
.ap-add{padding:5px 10px 5px 8px;font-size:9px;background:transparent;border:1px solid var(--bd);color:var(--mu);
        font-family:'DM Mono',monospace;letter-spacing:1.5px;cursor:pointer;border-radius:2px;
        display:inline-flex;align-items:center;gap:6px;text-transform:uppercase}
.ap-add:hover{color:var(--ac);border-color:rgba(196,160,74,0.22);background:rgba(196,160,74,0.10)}
.ap-add svg{width:10px;height:10px}

.ap-empty{font-size:9px;color:var(--mu);opacity:0.7;text-align:center;padding:8px 4px;line-height:1.5}

.ap-card{background:var(--sf2);border:1px solid var(--bd);border-radius:4px;overflow:hidden;margin-bottom:6px}
.ap-hdr{display:flex;align-items:center;gap:8px;padding:9px 10px 9px 12px;border-bottom:1px solid #23231f;cursor:pointer;user-select:none}
.ap-hdr .arrow{color:#5a5851;font-size:8px;width:8px}
.ap-hdr .nm{flex:1;font-size:10.5px;color:var(--tx);font-weight:500;letter-spacing:.5px}
.ap-hdr .nm.off{color:var(--mu)}
.ap-hdr-actions{display:flex;gap:3px}

.ap-ic{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
       background:transparent;border:1px solid transparent;color:var(--mu);
       cursor:pointer;border-radius:2px;line-height:1;padding:0;font-family:inherit}
.ap-ic:hover{color:var(--tx);background:#23231f;border-color:var(--bd)}
.ap-ic.on{color:var(--ac)}
.ap-ic svg{width:12px;height:12px}

.ap-body{padding:4px 0 6px}
.ap-grp{padding:8px 14px 6px}
.ap-grp + .ap-grp{border-top:1px dashed #23231f}
.ap-grp-title{font-size:8px;letter-spacing:2.5px;text-transform:uppercase;color:#5a5851;
              margin-bottom:7px;display:flex;align-items:center;gap:8px}
.ap-grp-title::after{content:'';flex:1;height:1px;background:linear-gradient(to right, #23231f, transparent)}

.ap-row{display:grid;grid-template-columns:50px 1fr 38px;align-items:center;gap:10px;padding:3px 0}
.ap-row .lbl{color:var(--mu);font-size:9px;letter-spacing:1.2px;text-transform:uppercase}
.ap-row .v{color:var(--ac);text-align:right;font-size:10px;font-variant-numeric:tabular-nums;letter-spacing:.5px}

/* slider: 2px track, gold fill to left of thumb (via --p), 10px round thumb */
.ap-row input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:18px;
  background:transparent;cursor:pointer;margin:0;
}
.ap-row input[type=range]::-webkit-slider-runnable-track{
  height:2px;border-radius:2px;
  background:linear-gradient(to right, var(--ac) 0, var(--ac) var(--p,0%), #26241f var(--p,0%), #26241f 100%);
}
.ap-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:10px;height:10px;border-radius:50%;
  background:var(--ac);margin-top:-4px;border:none;
  box-shadow:0 0 0 3px rgba(196,160,74,0.10);
}
.ap-row input[type=range]::-moz-range-track{
  height:2px;border-radius:2px;background:#26241f;
}
.ap-row input[type=range]::-moz-range-progress{height:2px;border-radius:2px;background:var(--ac)}
.ap-row input[type=range]::-moz-range-thumb{
  width:10px;height:10px;border:none;border-radius:50%;
  background:var(--ac);box-shadow:0 0 0 3px rgba(196,160,74,0.10);
}

/* Touch hit area: bump the input height + thumb size so finger taps on
   the array-pattern sliders land reliably. Native range inputs only
   start a drag when the initial touch falls inside the input's box —
   the desktop 18px-tall strip + 10px thumb is unreachable for typical
   finger contact patches. Visible track stays 2px; the thumb gets
   bumped to 18px and re-centered. */
@media (hover: none) and (pointer: coarse) {
  .ap-row input[type=range]{height:38px}
  .ap-row input[type=range]::-webkit-slider-thumb{
    width:18px;height:18px;margin-top:-8px;
    box-shadow:0 0 0 4px rgba(196,160,74,0.14);
  }
  .ap-row input[type=range]::-moz-range-thumb{
    width:18px;height:18px;
    box-shadow:0 0 0 4px rgba(196,160,74,0.14);
  }
  /* The grid label/value columns squeeze the slider — give it more room
     since the visible slider is now the dominant element of the row. */
  .ap-row{grid-template-columns:46px 1fr 36px;gap:8px;padding:2px 0}
  /* Segmented buttons get the same treatment — 5px padding on a 9px font
     is also under the touch target. */
  .ap-seg button{padding:9px 6px;font-size:10px;min-height:36px}
}

/* segmented control: bordered shell, gold-wash active, no per-button gold fill */
.ap-seg{display:flex;background:transparent;border:1px solid var(--bd);border-radius:2px;overflow:hidden}
.ap-seg button{
  flex:1;padding:5px 6px;font-size:9px;letter-spacing:1.5px;
  background:transparent;color:var(--mu);border:none;
  border-right:1px solid var(--bd);cursor:pointer;font-family:'DM Mono',monospace;text-transform:uppercase;
}
.ap-seg button:last-child{border-right:none}
.ap-seg button:hover{color:var(--tx)}
.ap-seg button.on{background:rgba(196,160,74,0.10);color:var(--ac);position:relative}
.ap-seg button.on::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ac);
}