/* Control panel (ui.js). Loaded after style.css; every rule is scoped to body.ui2 so the page
   still looks as before if ui.js fails to run. */
body.ui2 {
  --ui-tap: 44px;
  --ui-r: 10px;
  --ui-bg: rgba(14, 12, 10, 0.86);
  --ui-btn: rgba(236, 230, 219, 0.06);
  --ui-btn-h: rgba(236, 230, 219, 0.12);
  --ui-fg2: #b9b1a5;
  --ui-focus: #ffd38a;
}
/* panel */
body.ui2 nav.hud.tr {
  display: flex; flex-direction: column; align-items: stretch; gap: 12px; flex-wrap: nowrap;
  width: 300px; max-width: 300px; padding: 14px; box-sizing: border-box;
  background: var(--ui-bg); border: 1px solid var(--line-strong); border-radius: 14px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  max-height: calc(100vh - 2 * var(--gut) - 96px); overflow: auto; overscroll-behavior: contain;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
body.ui2 .ui-body { display: flex; flex-direction: column; gap: 12px; }
body.ui2 .ui-group { display: flex; flex-direction: column; gap: 8px; }
body.ui2 .ui-group + .ui-group { border-top: 1px solid var(--line); padding-top: 12px; }
body.ui2 .ui-group[hidden] { display: none; }
body.ui2 .ui-gh { margin: 0; font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ui-fg2); }
body.ui2 nav.hud.tr .ui-fold { display: none; }

/* shared button look: chips, icon buttons, bottom bar, read */
body.ui2 nav.hud.tr .chip, body.ui2 nav.hud.tr .icon, body.ui2 .ui-fold,
body.ui2 #btnRollUp, body.ui2 #btnRead {
  min-height: var(--ui-tap); min-width: var(--ui-tap); box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--ui-r);
  background: var(--ui-btn); color: var(--fg); cursor: pointer;
  font: 500 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; font-style: normal;
  transition: background .15s, border-color .15s, color .15s;
}
body.ui2 nav.hud.tr .chip + .chip { border-left: 1px solid var(--line-strong); }
body.ui2 nav.hud.tr .chip:not(.on):hover, body.ui2 nav.hud.tr .icon:hover, body.ui2 #btnRollUp:not(.on):hover, body.ui2 #btnRead:hover, body.ui2 .ui-fold:hover {
  background: var(--ui-btn-h); border-color: var(--fg); color: var(--fg);
}
body.ui2 nav.hud.tr [hidden], body.ui2 nav.hud.tr .chip[hidden] { display: none !important; }

/* icons drawn with a mask so app.js can rewrite the button text freely */
body.ui2 :is(nav.hud.tr button[id], #btnRead, #btnRollUp)::before {
  flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--ui-i) center / contain no-repeat; mask: var(--ui-i) center / contain no-repeat;
}
body.ui2 nav.hud.tr .chip[data-layer]::before, body.ui2 nav.hud.tr button[id]:not([id^=btn]):not([id^=tool]):not([id^=ui])::before { content: none; }
body.ui2 #btnBench svg, body.ui2 #btnShot svg { display: none; }
body.ui2 .icon .ui-lbl { font-family: var(--mono); }

/* layers: a full width segmented control */
body.ui2 .ui-layers .seg[role=tablist] { display: grid; grid-template-columns: 1fr; gap: 6px; border: 0; background: none; backdrop-filter: none; }
body.ui2 .ui-layers .chip { justify-content: flex-start; text-align: left; width: 100%; padding: 0 12px; }
body.ui2 .ui-layers .chip::after { content: attr(aria-keyshortcuts); margin-left: auto; font-size: 10px; color: var(--ui-fg2); border: 1px solid var(--line-strong); border-radius: 4px; padding: 2px 6px; }
body.ui2 .ui-layers .chip.on::after { color: inherit; border-color: currentColor; }
body.ui2 .layer-hint, body.ui2 .layer-why { order: 0; flex-basis: auto; max-width: none; margin: 0; text-align: left; font-size: 11px; line-height: 1.45; color: var(--ui-fg2); }
body.ui2 .layer-why summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; color: var(--fg); }

/* view: two column grid of icon + label buttons */
body.ui2 .ui-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
body.ui2 .ui-grid .icon { width: auto; height: auto; justify-content: flex-start; }
body.ui2 #btnHelp { display: inline-flex; }

/* destroy: big toggle, then a grid of tools */
body.ui2 .ui-destroy .tear-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; border: 0; background: none; backdrop-filter: none; order: 0; }
body.ui2 #btnTear { grid-column: 1 / -1; }
body.ui2 .ui-destroy .chip { justify-content: flex-start; }
body.ui2 .ui-destroy .chip[aria-keyshortcuts]::after { content: attr(aria-keyshortcuts); margin-left: auto; font-size: 10px; color: var(--ui-fg2); }

/* active state: filled, with a check bar on the left so it does not rely on colour alone */
body.ui2 nav.hud.tr .chip.on, body.ui2 nav.hud.tr [aria-pressed=true], body.ui2 #btnRollUp.on {
  background: var(--ink); border-color: var(--ink); color: #1a1208; box-shadow: inset 4px 0 0 rgba(0,0,0,.35);
}
body.ui2 nav.hud.tr .chip.gpu.on { background: var(--gpu); border-color: var(--gpu); color: #04181b; }
body.ui2 nav.hud.tr .chip.tool.on { background: var(--fg); border-color: var(--fg); color: #14110d; }
body.ui2 nav.hud.tr .chip.on::after, body.ui2 nav.hud.tr [aria-pressed=true]::after { color: inherit; }

/* scrolls */
body.ui2 .ui-scrolls .scroll-pick { margin: 0; }
body.ui2 .ui-scrolls .scroll-pick select { min-height: var(--ui-tap); border-radius: var(--ui-r); max-width: 100%; flex: 1; font-size: 12px; padding: 0 10px; }
body.ui2 .ui-scrolls .scroll-pick .chip, body.ui2 .ui-scrolls .scroll-pick button { min-height: var(--ui-tap); }

/* bottom bar */
body.ui2 footer.hud.bottom { gap: 12px; }
body.ui2 #play { width: 52px; height: 52px; }
body.ui2 .readout .read { margin-top: 8px; }
body.ui2 .scrub { height: 52px; }

/* focus rings everywhere */
body.ui2 :is(button, a, select, summary, input, [tabindex]):focus-visible {
  outline: 3px solid var(--ui-focus); outline-offset: 2px; border-radius: var(--ui-r);
}
body.ui2 .scrub:focus-within .knob { outline: 3px solid var(--ui-focus); }

/* tooltip */
.ui-tip { position: fixed; z-index: 30; max-width: 280px; padding: 8px 10px; border-radius: 8px;
  background: #15120f; color: var(--fg); border: 1px solid var(--line-strong); font-size: 11px; line-height: 1.45;
  letter-spacing: .02em; box-shadow: 0 6px 24px rgba(0,0,0,.6); pointer-events: none; display: flex; gap: 10px; align-items: flex-start; }
.ui-tip[hidden] { display: none; }
.ui-tip kbd { flex: none; color: var(--ink); border-color: var(--ink); }

/* readout and credit never sit under the panel */
body.ui2 .credit { right: calc(var(--gut) + 316px); }

/* small screens: the panel docks above the bottom bar; More controls unfolds View, Destroy and Scrolls */
@media (max-width: 720px), (max-height: 480px) {
  body.ui2 nav.hud.tr {
    top: auto; left: var(--gut); right: var(--gut); bottom: calc(var(--gut) + 76px); width: auto; max-width: none;
    padding: 10px; gap: 8px; max-height: calc(100vh - var(--ui-top-b, 140px) - var(--gut) - 88px);
  }
  body.ui2 .ui-layers .ui-gh, body.ui2 .ui-layers .layer-hint, body.ui2 .ui-layers .layer-why { display: none; }
  body.ui2 .ui-layers .seg[role=tablist] { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  body.ui2 .ui-layers .chip { justify-content: center; text-align: center; padding: 4px 6px; font-size: 10px; letter-spacing: .04em; }
  body.ui2 .ui-layers .chip::after { display: none; }
  body.ui2 nav.hud.tr .ui-fold { display: inline-flex; width: 100%; }
  body.ui2 .ui-fold::after { content: ""; }
  body.ui2 .ui-fold[aria-expanded=true]::before { transform: rotate(180deg); }
  body.ui2 nav.hud.tr:not(.ui-open) .ui-body { display: none; }
  body.ui2 .ui-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  body.ui2 .ui-destroy .tear-seg { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  body.ui2 #btnTear { grid-column: auto; }
  body.ui2 .bl { bottom: calc(var(--gut) + 76px + var(--ui-panel-h, 110px) + 10px); }
  body.ui2 .credit { right: auto; left: var(--gut); top: calc(var(--ui-head-b, 120px) + 8px); bottom: auto; }
  body.ui2 #btnRollUp { padding: 0 10px; font-size: 10px; }
  body.ui2 #play { width: 48px; height: 48px; }
}
@media (pointer: coarse) { body.ui2 #btnHelp { display: none; } }
@media (prefers-reduced-motion: reduce) { body.ui2 * { transition: none !important; } }
body.ui2.shot nav.hud.tr { display: none !important; }
body.ui2 #btnHelp::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M9.5%209.5a2.5%202.5%200%201%201%203.5%202.3c-.6.3-1%20.8-1%201.5v.7M12%2017v.5%22/%3E%3C/svg%3E"); }
body.ui2 #btnOpen::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h6l2%202h10v11H3zM12%2011v6M9%2014h6%22/%3E%3C/svg%3E"); }
body.ui2 #btnBench::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2019V10M10%2019V5M15%2019v-7M20%2019v-4M3%2021h18%22/%3E%3C/svg%3E"); }
body.ui2 #btnInfo::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%2011v6M12%207.5v.5%22/%3E%3C/svg%3E"); }
body.ui2 #btnShot::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208h3l2-3h6l2%203h3v11H4z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%223.5%22/%3E%3C/svg%3E"); }
body.ui2 #uiReset::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012a8%208%200%201%200%202.3-5.6M4%204v4h4%22/%3E%3C/svg%3E"); }
body.ui2 #uiFull::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%209V4h5M20%209V4h-5M4%2015v5h5M20%2015v5h-5%22/%3E%3C/svg%3E"); }
body.ui2 #btnTear::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%203L5%2014h6l-1%207%208-11h-6z%22/%3E%3C/svg%3E"); }
body.ui2 #toolTear::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2013l3-4%203%204%203-4%203%204%203-4%203%204%22/%3E%3C/svg%3E"); }
body.ui2 #btnCrush::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v11M7%209l5%205%205-5M4%2020h16%22/%3E%3C/svg%3E"); }
body.ui2 #toolBurn::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203c3%204%206%206%206%2011a6%206%200%200%201-12%200c0-3%202-4%203-7%201%202%202%203%203%203z%22/%3E%3C/svg%3E"); }
body.ui2 #toolWater::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203c4%205%206%208%206%2011a6%206%200%200%201-12%200c0-3%202-6%206-11z%22/%3E%3C/svg%3E"); }
body.ui2 #btnReset::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2014L4%209l5-5M4%209h10a6%206%200%200%201%200%2012h-3%22/%3E%3C/svg%3E"); }
body.ui2 #btnCrumble::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020h16M7%2017v.5M11%2016v.5M15%2017v.5M9%2012v.5M13%2011v.5M17%2013v.5M11%207v.5%22/%3E%3C/svg%3E"); }
body.ui2 #btnSandbox::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%209h18v6H3z%22/%3E%3C/svg%3E"); }
body.ui2 #btnShake::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012h3l2-5%203%2010%203-10%203%2010%202-5h4%22/%3E%3C/svg%3E"); }
body.ui2 #btnSound::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%209h4l5-4v14l-5-4H4zM17%209a4%204%200%200%201%200%206%22/%3E%3C/svg%3E"); }
body.ui2 #btnRead::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205h6a3%203%200%200%201%203%203v11a2%202%200%200%200-2-2H3zM21%205h-6a3%203%200%200%200-3%203v11a2%202%200%200%201%202-2h7z%22/%3E%3C/svg%3E"); }
body.ui2 #btnRollUp::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2019V5M6%2011l6-6%206%206%22/%3E%3C/svg%3E"); }
body.ui2 #uiFold::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22/%3E%3C/svg%3E"); }

/* settings */
body.ui2 .ui-settings { width: min(420px, calc(100vw - 2 * var(--gut))); inset: var(--gut) auto auto var(--gut); max-height: calc(100vh - 2 * var(--gut)); z-index: 12; }
body.ui2 .ui-form { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 12px; }
body.ui2 .ui-row { display: flex; flex-direction: column; gap: 6px; color: var(--fg); }
body.ui2 .ui-row select { min-height: 44px; background: #15120f; color: var(--fg); border: 1px solid var(--line-strong); border-radius: var(--ui-r); padding: 0 10px; font: inherit; }
body.ui2 .ui-row input[type=range] { min-height: 44px; accent-color: var(--ink); }
body.ui2 .ui-check { flex-direction: row; justify-content: space-between; align-items: center; min-height: 44px; }
body.ui2 .ui-check input { width: 24px; height: 24px; accent-color: var(--ink); }
body.ui2 .ui-settings .chip { min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--ui-r); padding: 0 14px; color: var(--fg); }
body.ui2.ui-nohud .hud.tl, body.ui2.ui-nohud #readout, body.ui2.ui-nohud .credit, body.ui2.ui-nohud .layer-hint, body.ui2.ui-nohud .layer-why { display: none !important; }
body.ui2.ui-nolabels .ui-grid .ui-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body.ui2.ui-nolabels .ui-grid { grid-template-columns: repeat(4, 1fr); }
body.ui2.ui-nolabels .ui-grid .icon { justify-content: center; }
body.ui2.ui-reduced .grain, body.ui2.ui-reduced .play { animation: none !important; }
body.ui2.ui-reduced * { transition: none !important; }
body[data-bg=black] { background: #000; } body[data-bg=slate] { background: #10161d; } body[data-bg=warm] { background: #16100a; }
body.ui2 #btnSettings::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22/%3E%3Cpath%20d%3D%22M12%202v3M12%2019v3M2%2012h3M19%2012h3M4.9%204.9l2.1%202.1M17%2017l2.1%202.1M4.9%2019.1L7%2017M17%207l2.1-2.1%22/%3E%3C/svg%3E"); }
.ui-skip { position: fixed; z-index: 9; left: 50%; bottom: calc(var(--gut) + 76px); transform: translateX(-50%);
  min-height: 44px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(14,12,10,.86); color: var(--fg);
  font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.ui-skip:hover { border-color: var(--ink); color: var(--ink); }
.ui-skip:focus-visible { outline: 3px solid #ffd38a; outline-offset: 2px; }
/* glossary */
a.ui-term { border-bottom: 1px dotted currentColor; text-decoration: none; cursor: help; }
a.ui-term:hover { color: var(--ink); border-bottom-color: var(--ink); }
.ui-gloss summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.ui-gloss input[type=search] { min-height: 44px; background: #15120f; color: var(--fg); border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 10px; font: inherit; }
.ui-gl dt { color: var(--fg); font-weight: 500; margin-top: 12px; scroll-margin: 40px; }
.ui-gl dd { margin: 4px 0 0; }
.ui-gl dt.ui-flash { color: var(--ink); }
.ui-gl [hidden] { display: none; }
/* audit: header never runs under the panel, readout legible, scrubber does not shift */
@media (min-width: 721px) and (min-height: 481px) {
  body.ui2 .hud.tl { max-width: min(560px, calc(100vw - 2 * var(--gut) - 316px)); }
  body.ui2 .hud.tl h1 { font-size: clamp(30px, 4.6vw, 64px); }
  body.ui2 .kicker { white-space: normal; }
}
@media (max-height: 760px) and (min-width: 721px) { body.ui2 .hud.tl .lede { display: none; } }
body.ui2 #readout { background: rgba(10, 9, 8, .78); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.ui2 #btnRollUp { width: 112px; min-width: 112px; flex: none; }
@media (max-width: 720px) { body.ui2 #btnRollUp { width: 92px; min-width: 92px; } body.ui2 #readout { padding: 6px; } }
/* Ink Bench, promoted */
body.ui2 nav.hud.tr .ui-bench { width: 100%; height: auto; justify-content: flex-start; border-color: rgba(94, 240, 255, .55); color: var(--gpu); background: rgba(94, 240, 255, .07); }
body.ui2 nav.hud.tr .ui-bench:hover { background: rgba(94, 240, 255, .16); border-color: var(--gpu); color: var(--gpu); }
body.ui2.ui-nobench #btnBench { display: none; }
.ui-hint { position: fixed; z-index: 15; max-width: 240px; padding: 10px 12px; border-radius: 10px; background: #0d2226; color: #dffbff; border: 1px solid var(--gpu); font-size: 11px; line-height: 1.45; pointer-events: none; }
.hud.tl .lede .ui-bench-link { pointer-events: auto; color: var(--gpu); border-bottom-color: rgba(94,240,255,.5); }
body.ui2 .ui-layers .chip { text-transform: none; letter-spacing: .04em; }
@media (min-width: 721px) and (min-height: 481px) {
  body.ui2 nav.hud.tr { width: 340px; max-width: 340px; }
  body.ui2 .hud.tl { max-width: min(560px, calc(100vw - 2 * var(--gut) - 356px)); }
  body.ui2 .credit { right: calc(var(--gut) + 356px); }
  body.ui2 .ui-grid { grid-template-columns: repeat(3, 1fr); }
  body.ui2 .ui-grid .icon { flex-direction: column; justify-content: center; gap: 4px; padding: 6px 4px; font-size: 10px; letter-spacing: .04em; }
  body.ui2 .ui-destroy .tear-seg { grid-template-columns: repeat(3, 1fr); }
  body.ui2 .ui-destroy .chip { padding: 0 8px; font-size: 10px; gap: 6px; }
  body.ui2 .ui-destroy .chip::after { display: none; }
  body.ui2 .layer-why { display: none; }
}
body.ui2 nav.hud.tr .ui-layers .chip { text-transform: none; }

/* ---------------------------------------------------------------- type and spacing scale
   One scale for every panel. Small screens raise the floor to 14 px. */
:root {
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 26px;
  --lh-tight: 1.2; --lh-body: 1.5; --lh-loose: 1.6;
  --track-label: .04em; --track-kicker: .06em;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --measure: 62ch;
  --btn-gap: 8px; --btn-pad-x: 14px; --btn-fs: var(--fs-sm);
  --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px);
}
@media (max-width: 720px), (max-height: 480px) {
  :root { --fs-xs: 14px; --fs-sm: 14px; --fs-base: 15px; --fs-md: 16px; --fs-xl: 24px; --btn-pad-x: 12px; --btn-fs: 14px; }
}

/* buttons: balanced padding, one icon gap, centered labels, no wide tracking */
body.ui2 nav.hud.tr .chip, body.ui2 nav.hud.tr .icon, body.ui2 nav.hud.tr .ui-fold,
body.ui2 #btnRollUp, body.ui2 #btnRead, body.ui2 .sheet .chip, body.ui2 .ui-skip {
  font-size: var(--btn-fs); letter-spacing: var(--track-label); line-height: var(--lh-tight);
  gap: var(--btn-gap); padding: var(--sp-2) var(--btn-pad-x); align-items: center; text-wrap: balance;
}
body.ui2 :is(nav.hud.tr button, #btnRead, #btnRollUp) .ui-lbl { line-height: var(--lh-tight); }
body.ui2 .ui-gh { font-size: var(--fs-xs); letter-spacing: var(--track-kicker); margin: 0 0 var(--sp-1); }
body.ui2 .ui-layers .chip { letter-spacing: .02em; }
body.ui2 .ui-layers .chip::after, body.ui2 .ui-destroy .chip::after { font-size: var(--fs-xs); letter-spacing: 0; }
@media (min-width: 721px) and (min-height: 481px) {
  body.ui2 .ui-grid .icon, body.ui2 .ui-destroy .chip { font-size: var(--fs-xs); padding: var(--sp-2) var(--sp-1); letter-spacing: .02em; }
}

/* general text */
body.ui2 .mono { letter-spacing: .02em; }
body.ui2 .kicker { font-size: var(--fs-xs); letter-spacing: var(--track-kicker); line-height: var(--lh-body); margin-bottom: var(--sp-3); }
body.ui2 .hud.tl .lede { font-size: var(--fs-base); line-height: var(--lh-body); max-width: 46ch; margin-top: var(--sp-4); letter-spacing: 0; }
body.ui2 #readout { font-size: var(--fs-sm); line-height: var(--lh-body); letter-spacing: .02em; gap: var(--sp-1); }
body.ui2 .layer-hint, body.ui2 .layer-why { font-size: var(--fs-sm); line-height: var(--lh-body); }
body.ui2 .credit { font-size: var(--fs-xs); letter-spacing: .02em; line-height: var(--lh-body); }
body.ui2 .ends { font-size: var(--fs-xs); letter-spacing: .02em; }
body.ui2 .ui-tip { font-size: var(--fs-sm); line-height: var(--lh-body); padding: var(--sp-2) var(--sp-3); }
body.ui2 .ui-hint { font-size: var(--fs-sm); line-height: var(--lh-body); }
body.ui2 .sheet-head { padding: var(--sp-4) var(--sp-5); gap: var(--sp-3); }
body.ui2 .sheet-head h2 { font-size: var(--fs-xl); line-height: var(--lh-tight); margin: var(--sp-1) 0 0; }
body.ui2 .sheet-head .mono { font-size: var(--fs-xs); letter-spacing: var(--track-kicker); }
body.ui2 .about-body { font-size: var(--fs-base); line-height: var(--lh-loose); padding: var(--sp-2) var(--sp-5) var(--sp-5); }
body.ui2 .about-body > * { max-width: var(--measure); }
body.ui2 .about-body p { margin: 0 0 var(--sp-3); }
body.ui2 .about-body h3, body.ui2 .about-body .ui-gh { margin: var(--sp-5) 0 var(--sp-2); }
body.ui2 .about-body .small, body.ui2 .about-body code { font-size: var(--fs-sm); }
body.ui2 .ui-gl dt { margin-top: var(--sp-4); line-height: var(--lh-tight); }
body.ui2 .ui-gl dd { margin: var(--sp-1) 0 0; line-height: var(--lh-body); }
body.ui2 .ui-form { gap: var(--sp-3); }
body.ui2 .ui-row { font-size: var(--fs-base); line-height: var(--lh-body); gap: var(--sp-1); }
body.ui2 .keys { font-size: var(--fs-sm); line-height: var(--lh-body); row-gap: var(--sp-2); }
body.ui2 .sheet-foot { font-size: var(--fs-sm); line-height: var(--lh-body); padding: var(--sp-3) var(--sp-5); }
body.ui2 .bench p, body.ui2 .bench li, body.ui2 .bench dd, body.ui2 .b-private { font-size: var(--fs-sm); line-height: var(--lh-body); letter-spacing: 0; }
body.ui2 .bench .mono { letter-spacing: .02em; }

/* safe areas (notches, home bar) */
body.ui2 .hud.tl { top: calc(var(--gut) + var(--safe-t)); left: calc(var(--gut) + var(--safe-l)); }
body.ui2 footer.hud.bottom { bottom: calc(var(--gut) + var(--safe-b)); left: calc(var(--gut) + var(--safe-l)); right: calc(var(--gut) + var(--safe-r)); }
body.ui2 #readout { left: calc(var(--gut) + var(--safe-l)); }
@media (min-width: 721px) and (min-height: 481px) { body.ui2 nav.hud.tr { top: calc(var(--gut) + var(--safe-t)); right: calc(var(--gut) + var(--safe-r)); } }

/* small portrait: headline and panel sizing */
@media (max-width: 720px) and (min-height: 481px) {
  body.ui2 .hud.tl h1 { font-size: clamp(26px, 8vw, 34px); line-height: 1.05; }
  body.ui2 nav.hud.tr { bottom: calc(var(--gut) + 76px + var(--safe-b)); left: calc(var(--gut) + var(--safe-l)); right: calc(var(--gut) + var(--safe-r)); }
  body.ui2 .ui-layers .chip { font-size: 13px; padding: var(--sp-1) var(--sp-2); }
  body.ui2 .about, body.ui2 .ui-settings, body.ui2 .help { inset: calc(var(--gut) + var(--safe-t)) calc(var(--gut) + var(--safe-r)) calc(var(--gut) + var(--safe-b)) calc(var(--gut) + var(--safe-l)); width: auto; max-height: none; }
}
/* phone landscape: header left, panel as a right column, readout and bar below */
@media (max-height: 480px) and (orientation: landscape) {
  body.ui2 .hud.tl { max-width: calc(100vw - 2 * var(--gut) - 320px - var(--safe-l) - var(--safe-r)); }
  body.ui2 .hud.tl h1 { font-size: 24px; line-height: 1.05; }
  body.ui2 .hud.tl .lede { display: none; }
  body.ui2 nav.hud.tr { top: calc(var(--sp-2) + var(--safe-t)); bottom: calc(var(--gut) + 70px + var(--safe-b)); left: auto; right: calc(var(--gut) + var(--safe-r)); width: 300px; max-width: 300px; max-height: none; }
  body.ui2 .bl { bottom: calc(var(--gut) + 70px + var(--safe-b)); }
  body.ui2 #readout > div { display: none; }
  body.ui2 .credit { top: auto; bottom: calc(var(--gut) + 70px + var(--safe-b)); left: auto; right: calc(var(--gut) + 316px + var(--safe-r)); }
  body.ui2 .about, body.ui2 .ui-settings, body.ui2 .help { inset: var(--sp-2) calc(var(--gut) + var(--safe-r)) var(--sp-2) calc(var(--gut) + var(--safe-l)); width: auto; max-height: none; }
  body.ui2 .sheet-head { padding: var(--sp-2) var(--sp-4); }
}
/* fold only on small screens (declared last so it wins over the shared button rule) */
body.ui2 nav.hud.tr .chip.ui-fold { display: none; }
@media (max-width: 720px), (max-height: 480px) { body.ui2 nav.hud.tr .chip.ui-fold { display: inline-flex; width: 100%; } }
/* layer chips on phones: tight but at least 14 px, wrap between words only */
@media (max-width: 720px) {
  body.ui2 nav.hud.tr .ui-layers .chip { padding: var(--sp-1) var(--sp-2); letter-spacing: 0; line-height: 1.15; white-space: normal; overflow-wrap: normal; word-break: keep-all; box-shadow: none; }
  body.ui2 nav.hud.tr .ui-layers .chip .mu { margin: 0; padding: 0; letter-spacing: 0; }
}
/* very narrow phones: Roll up shows its icon only, so the scrubber labels fit */
@media (max-width: 400px) {
  body.ui2 #btnRollUp { width: 48px; min-width: 48px; padding: 0; font-size: 0; letter-spacing: 0; gap: 0; }
  body.ui2 .ends { font-size: var(--fs-xs); }
}
/* layer chips: the µ span must flow inline with the label, not as its own flex item */
body.ui2 nav.hud.tr .ui-layers .chip { gap: 0; }
body.ui2 nav.hud.tr .ui-layers .chip::after { margin-left: auto; }
@media (max-width: 720px), (max-height: 480px) {
  body.ui2 nav.hud.tr .ui-layers .chip { display: block; text-align: center; padding: var(--sp-1) var(--sp-1); }
  body.ui2 nav.hud.tr .ui-layers .chip .dot { margin-right: 4px; }
}
body.ui2 .scroll-pick label { font-size: var(--fs-xs); }
body.ui2 nav.hud.tr { justify-content: flex-start; }
@media (max-height: 480px) and (orientation: landscape) {
  body.ui2 .credit { top: calc(var(--ui-head-b, 100px) + 4px); bottom: auto; left: calc(var(--gut) + var(--safe-l)); right: auto; }
}
body.ui2 #btnRollUp { white-space: nowrap; }
body.ui2 nav.hud.tr .ui-layers .chip { display: block; text-align: left; line-height: 44px; padding-top: 0; padding-bottom: 0; }
body.ui2 nav.hud.tr .ui-layers .chip::after { float: right; line-height: 1.2; margin-top: 13px; }
@media (max-width: 720px), (max-height: 480px) {
  body.ui2 nav.hud.tr .ui-layers .chip { text-align: center; line-height: 1.2; padding: var(--sp-1); display: block; align-content: center; }
}