/* Powder Web UI. One dark theme, one accent. The world fills the window; the controls are slim bars along its edges that fade
   back while the pointer is elsewhere. ui.js writes layout variables measured from the DOM: --top-h, --dock-h and the world's
   frame box --fx --fy --fw --fh. Per-element swatch colour is --c ("r, g, b"). No external assets. */

:root {
  color-scheme: dark;
  --bg: #0b0d12;
  --panel: #13161d;
  --raised: #1a1e28;
  --well: #0e1016;
  --line: #242938;
  --line-strong: #343b4f;
  --text: #e8ebf2;
  --text-2: #b6bccc;
  --muted: #8b93a7;
  --accent: #6ea8ff;
  --accent-rgb: 110, 168, 255;
  --accent-ink: #07101f;
  --accent-soft: rgba(110, 168, 255, .15);
  --accent-line: rgba(110, 168, 255, .55);
  --hover: rgba(255, 255, 255, .06);
  --ok: #4ed8a0;
  --warn: #f5b84b;
  --danger: #ff6b7f;
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 10px;
  --h: 32px;
  --shadow: 0 10px 28px rgba(0, 0, 0, .4);
  --font: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  --gap: 8px;
  --bar: rgba(17, 20, 27, .88);
  --bar-idle: .8;
  --top-h: 48px;
  --dock-h: 108px;
  --fx: 160px; --fy: 56px; --fw: 800px; --fh: 450px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 13px/1.45 var(--font);
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
[hidden] { display: none !important; }
kbd {
  display: inline-block;
  font: 500 11px/1.5 var(--mono);
  padding: 0 5px;
  min-width: 18px;
  text-align: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--raised);
  color: var(--text-2);
}
kbd + kbd { margin-left: 2px; }
.muted { color: var(--muted); }
svg.ic { width: 18px; height: 18px; flex: none; fill: none; }
svg.ic.sm { width: 16px; height: 16px; }
svg.ic.chev { transition: transform .2s var(--ease); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#stage:focus, #stage:focus-visible { outline: none; }

/* ---------- Stage and the world's frame ---------- */
.stage { position: fixed; inset: 0; touch-action: none; overflow: hidden; z-index: 0; cursor: crosshair; }
/* (the space between the rail and the side column: the world sits centred in it, its own border round it) */
.world-back { display: none; }
.frame {
  position: absolute;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: #000;
  box-shadow: 0 0 0 1px var(--line-strong), 0 8px 24px rgba(0, 0, 0, .45);
}
.frame canvas { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; image-rendering: pixelated; }
#overlay { pointer-events: none; }

/* ---------- Panels and controls ---------- */
.panel {
  position: fixed;
  z-index: 10;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: var(--h); padding: 0 12px;
  border-radius: var(--r);
  border: 1px solid var(--line-strong);
  background: var(--raised);
  font-size: 13px; font-weight: 500; line-height: 1;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: #222737; border-color: #434b62; }
.btn:active { background: #1b1f2b; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.primary:hover { background: #8ab9ff; border-color: #8ab9ff; }
.btn .ic { width: 16px; height: 16px; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: var(--h); height: var(--h); padding: 0; border-radius: var(--r);
  border: 1px solid transparent; background: transparent; color: var(--text-2);
  transition: background .12s, color .12s, border-color .12s;
}
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn:active { background: rgba(255, 255, 255, .1); }
.icon-btn:disabled { opacity: .35; cursor: default; background: transparent; color: var(--text-2); }
.icon-btn.danger:hover:not(:disabled) { color: var(--danger); background: rgba(255, 107, 127, .12); }

/* Tool rail button: same size, an accent tint when active. */
.rb {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border-radius: var(--r);
  border: 1px solid transparent;
  background: transparent; color: var(--text-2);
  transition: background .12s, color .12s, border-color .12s;
}
.rb:hover { background: var(--hover); color: var(--text); }
.rb[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }

.seg {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1px;
  padding: 1px; height: var(--h);
  background: var(--well); border: 1px solid var(--line); border-radius: var(--r);
}
.seg button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 0; padding: 0 10px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-2); font-size: 13px;
  transition: background .12s, color .12s;
}
.seg button:hover { color: var(--text); background: var(--hover); }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); }
.seg3 { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 20px; margin: 0; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--line-strong); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line-strong); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--accent); border: 2px solid var(--panel); }
input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--panel); }
input[type="range"]:disabled { opacity: .4; cursor: default; }

.select {
  width: 100%; height: var(--h); padding: 0 30px 0 10px;
  -webkit-appearance: none; appearance: none;
  background: var(--well) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5 12 15l5.5-5.5'/%3E%3C/svg%3E") no-repeat right 8px center / 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r); color: var(--text); font-size: 13px;
}
.select option { background: var(--panel); color: var(--text); }

.switch {
  display: inline-flex; align-items: center; gap: 10px; height: var(--h); padding: 0; border: 0; background: transparent; color: var(--text); font-size: 13px;
}
.switch-track { position: relative; width: 34px; height: 20px; border-radius: 10px; background: var(--line-strong); transition: background .15s; flex: none; }
.switch-track i { position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-2); transition: transform .15s var(--ease), background .15s; }
.switch[aria-checked="true"] .switch-track { background: var(--accent); }
.switch[aria-checked="true"] .switch-track i { transform: translateX(14px); background: var(--accent-ink); }

.field { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text); font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.field.sub { margin: 10px 0 2px; font-weight: 400; color: var(--text-2); }
.field output { font: 500 12px var(--mono); color: var(--text-2); }
.field label { cursor: default; }
.note { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.row .btn { padding: 0 8px; }

.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; gap: 6px; }
.btn.quiet { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.quiet:hover { background: var(--hover); color: var(--text); }
.btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.vb {
  height: 26px; min-width: 28px; padding: 0 8px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-2); font: 500 12px var(--mono); cursor: pointer;
  transition: background .12s, color .12s;
}
.vb:hover { color: var(--text); background: var(--hover); }
.vb-val { min-width: 56px; }

/* ---------- Bars: slim, translucent, quieter while the pointer is elsewhere ---------- */
.bar {
  position: fixed; z-index: 10;
  background: var(--bar);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: var(--bar-idle);
  transition: opacity .16s var(--ease);
}
.bar:hover, .bar:focus-within, body.pop-open .bar { opacity: 1; }

/* ---------- Top bar: run controls, the current pick, time dial, brush, grid and zoom; scenes and the menu on the right ---------- */
.titlebar {
  left: var(--gap); right: var(--gap); top: var(--gap); min-height: 40px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
  padding: 4px 5px;
}
.titlebar .icon-btn { width: 30px; height: 30px; }
.tb-group { display: flex; align-items: center; gap: 1px; flex: none; }
.tb-right { display: flex; align-items: center; gap: 2px; margin-left: auto; flex: none; }
.tb-right .btn { height: 30px; padding: 0 10px; }
.tb-sep { flex: none; width: 1px; height: 18px; margin: 0 2px; background: var(--line); }
.logo { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 16px; height: 16px; flex: none; margin: 0 4px 0 6px; }
.logo i { display: block; border-radius: 2px; background: #e5b866; }
.logo i:nth-child(2) { background: #5b95e6; }
.logo i:nth-child(3) { background: #e8683c; }
.logo i:nth-child(4) { background: #5a6176; }
.logo.big { width: 52px; height: 52px; gap: 4px; margin: 0; }
.logo.big i { border-radius: 5px; }
.only-narrow { display: none; }

/* The current pick and the other two mouse buttons, in one pill */
.pick-pill {
  display: flex; align-items: center; min-width: 0; height: 30px; padding: 0 2px 0 3px; flex: 0 1 auto;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--well);
}
.pp-main { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 0 9px 0 0; }
.pp-main b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.pp-kind { color: var(--muted); font-size: 11px; white-space: nowrap; }
.slot-chip {
  display: flex; align-items: center; gap: 5px; min-width: 0; height: 20px; padding: 0 8px;
  border-left: 1px solid var(--line); font-size: 12px; white-space: nowrap;
}
.slot-chip .sc-key { font: 500 10px var(--mono); color: var(--muted); }
.slot-chip .swatch.sm { width: 16px; height: 16px; border-radius: 4px; }
.slot-chip b { font-weight: 500; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 84px; }

/* The time dial, always visible */
.speed { flex: none; height: 30px; }
.speed button { min-width: 0; padding: 0 8px; font: 500 12px var(--mono); font-variant-numeric: tabular-nums; }

/* Brush size, grid and zoom: label, control, value */
.tb-field { display: flex; align-items: center; gap: 4px; flex: none; height: 30px; color: var(--text-2); }
.tb-field .lbl { font-size: 12px; color: var(--muted); padding: 0 2px 0 4px; }
.tb-field .num { font: 500 12px var(--mono); color: var(--text); white-space: nowrap; }
.brush-opt input[type="range"] { width: 96px; }
.brush-opt .num { min-width: 82px; }
.stepper { padding: 0 2px; border: 1px solid var(--line); border-radius: var(--r); background: var(--well); gap: 0; }
.stepper .vb { height: 26px; min-width: 24px; padding: 0 6px; font-size: 13px; }
.stepper .vb:disabled { opacity: .35; cursor: default; background: transparent; }
.stepper .num { min-width: 46px; text-align: center; }
.stepper .vb-txt { font: 500 11.5px var(--font); padding: 0 8px; margin-left: 4px; }
.stepper .vb-ic { display: grid; place-items: center; padding: 0 5px; }
.stepper .vb-val { min-width: 50px; }
.vb[aria-pressed="true"], .vb-val.on { background: var(--accent-soft); color: var(--accent); }

/* ---------- Left rail: the full height beside the world; every tool and view, two columns, labelled ----------
   ui.js sizes the buttons from the height available (--rb-h, --rb-w): big at 1080p, tighter at 720p, never scrolling. */
.rail {
  --rb-h: 40px; --rb-w: 50px;
  left: var(--gap); top: calc(var(--top-h) + var(--gap));
  width: calc(var(--rb-w) * 2 + 3px + 14px); padding: 7px 7px 7px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.rail-cap { flex: none; height: 22px; display: flex; align-items: flex-end; padding: 0 3px 4px; margin: 0; color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.1; white-space: nowrap; border-top: 1px solid var(--line); }
.rail-cap:first-child { border-top: 0; height: 16px; padding-top: 0; }
.rail-grid { display: grid; grid-template-columns: repeat(2, var(--rb-w)); grid-auto-rows: var(--rb-h); gap: 3px; justify-content: center; margin-bottom: 4px; }
.rail .rb {
  width: auto; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 10.5px; line-height: 1.1; color: var(--text-2);
}
.rail .rb svg.ic { width: 19px; height: 19px; }
.rail .rb span { white-space: nowrap; }
.rail .rb:hover { color: var(--text); }
.rail .rb[aria-pressed="true"] { color: var(--accent); }
.rail .rb.warm[aria-pressed="true"] { color: #ff9a5c; border-color: rgba(255, 154, 92, .55); background: rgba(255, 154, 92, .14); }
.rail .rb.cool[aria-pressed="true"] { color: #7cc2ff; }
.rail.compact .rb span { display: none; }

/* ---------- Popovers: the menu and Settings ---------- */
.pop, .flyout {
  position: fixed; left: 0; top: 0; z-index: 30;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain;
  animation: rise .16s var(--ease) both;
}
.menu { padding: 4px; }
.menu > button {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 32px; padding: 0 10px;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text); font-size: 13px; text-align: left; white-space: nowrap;
  transition: background .12s, color .12s;
}
.menu > button:hover { background: var(--hover); }
.menu > button span { flex: 1; }
.menu > button kbd { font-size: 10.5px; }
.menu > button svg { color: var(--text-2); }
.menu-sep { display: block; height: 1px; margin: 4px 6px; background: var(--line); }
.main-menu { width: 230px; }
#menuSound[aria-checked="false"] svg { opacity: 0; }

.flyout { width: 300px; display: flex; flex-direction: column; overflow: hidden; }
.fly-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line); flex: none; }
.fly-head h2 { font-size: 14px; font-weight: 600; }
.fly-body { overflow-y: auto; padding: 4px 16px 12px; scrollbar-width: thin; overscroll-behavior: contain; }
.fly-sec { padding: 14px 0; border-bottom: 1px solid var(--line); }
.fly-sec:last-child { border-bottom: 0; padding-bottom: 4px; }
.fly-sec .btn { width: 100%; }
.fly-sec .row .btn { width: auto; }

/* Element icon: a drawn material tile (set from ui.js as a background image), with rounded corners. Tool picks show a line icon instead. */
.swatch {
  display: inline-block; flex: none;
  width: 28px; height: 28px; border-radius: 7px;
  background: #2a3042 center / 100% 100% no-repeat;
}
.swatch canvas { display: block; width: 100%; height: 100%; border-radius: inherit; }
.swatch.sm { width: 20px; height: 20px; border-radius: 5px; }
.swatch.tool { display: inline-grid; place-items: center; background: var(--well); box-shadow: inset 0 0 0 1px var(--line-strong); }
.swatch.tool .ic { width: 18px; height: 18px; }
.swatch.sm.tool .ic { width: 14px; height: 14px; }

/* ---------- Element picker: the section tabs on top (plain text, underlined when chosen), and under them the section's elements
   as an even grid of tiles led by their material swatch. Two kinds of thing, two looks: words choose a section, swatches pick. */
.dock {
  left: var(--gap); right: var(--gap); bottom: var(--gap);
  padding: 2px 8px 7px;
  display: flex; flex-direction: column; gap: 5px;
  transition: opacity .16s var(--ease), transform .18s var(--ease);
}
.dock-bar { order: -1; }
.dock-cat-wrap { position: relative; height: 62px; min-width: 0; }
.dock-cat-wrap::before, .dock-cat-wrap::after {
  content: ""; position: absolute; left: 0; right: 0; height: 14px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .15s;
}
.dock-cat-wrap::before { top: 0; background: linear-gradient(180deg, var(--panel), rgba(19, 22, 29, 0)); }
.dock-cat-wrap::after { bottom: 0; background: linear-gradient(0deg, var(--panel), rgba(19, 22, 29, 0)); }
.dock-cat-wrap.fade-l::before, .dock-cat-wrap.fade-r::after { opacity: 1; }
.dock-cat {
  height: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); grid-auto-rows: 30px; gap: 2px 4px;
  align-content: start; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain;
}
.dock-cat::-webkit-scrollbar { display: none; }
.gchip {
  min-width: 0; height: 30px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 8px 0 4px; border-radius: 7px;
  border: 1px solid transparent; background: transparent;
  color: var(--text-2); font-size: 12px; line-height: 1.15; text-align: left;
  transition: background .12s, border-color .12s, color .12s;
}
.gchip .swatch { flex: none; width: 22px; height: 22px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.gchip .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gchip:hover { background: var(--hover); color: var(--text); }
.gchip[aria-selected="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--text); }
.gchip[aria-selected="true"] .swatch { box-shadow: 0 0 0 1.5px var(--accent); }
.gf-empty { grid-column: 1 / -1; padding: 8px 6px; color: var(--muted); }
.dock-bar { display: flex; align-items: flex-start; gap: 6px; min-width: 0; padding-top: 4px; border-bottom: 1px solid var(--line); }
.dock-tabs { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 2px; }
.tab {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 31px; padding: 0 11px 0 8px; margin-bottom: -1px; border: 0; border-radius: 7px 7px 0 0; background: transparent;
  box-shadow: inset 0 -2px 0 transparent;
  color: var(--text-2); font-size: 12.5px; font-weight: 500; white-space: nowrap;
  transition: color .12s, background .12s, box-shadow .12s;
}
.tab .swatch { width: 18px; height: 18px; border-radius: 4px; opacity: .85; }
.tab:hover { color: var(--text); background: var(--hover); }
.tab[aria-selected="true"] { color: var(--text); background: rgba(255, 255, 255, .035); box-shadow: inset 0 -2px 0 var(--accent); }
.tab[aria-selected="true"] .swatch { opacity: 1; }
.tab.empty { display: none; }
.tabs-tight .tab { padding: 0 8px 0 6px; gap: 5px; }
.dock .dock-search { order: -1; flex: 0 0 auto; box-sizing: border-box; width: 136px; height: 28px; margin-top: 1px; }   /* (search first, at the left end of the tabs) */
.dock.tabs-tight .dock-search { width: 116px; }
.dock-cap { display: none; }
.dock-sep { flex: none; width: 1px; height: 18px; background: var(--line); }
.dock-recent { flex: none; display: flex; align-items: center; gap: 3px; }
.rchip {
  width: 26px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: 7px;
  background: transparent; display: grid; place-items: center;
  transition: background .12s, border-color .12s;
}
.rchip .swatch { width: 20px; height: 20px; border-radius: 5px; }
.rchip:hover { background: var(--hover); }
.rchip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); }
.dock-recent .rchip:nth-child(n+7) { display: none; }
.dock-search {
  flex: 0 0 150px; height: 26px; display: flex; align-items: center; gap: 6px;
  padding: 0 9px; border-radius: 7px;
  background: var(--well); border: 1px solid var(--line); color: var(--muted);
}
.dock-search:focus-within { border-color: var(--accent-line); color: var(--text); }
.dock-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 12.5px; color: var(--text); }
.dock-search input::placeholder { color: var(--muted); opacity: 1; }
.dock-search input::-webkit-search-cancel-button { display: none; }
.dock-toggle { flex: none; width: 28px; height: 28px; }

/* ---------- Side column beside the world: status, the current pick, the lesson. Thin separators, no cards. ---------- */
.side {
  position: fixed; z-index: 12;
  display: flex; flex-direction: column; gap: 0; min-height: 0;
  background: var(--bar); border: 1px solid var(--line); border-radius: var(--r-lg);
  opacity: var(--bar-idle); transition: opacity .16s var(--ease);
  overflow: hidden;
}
.side:hover, .side:focus-within { opacity: 1; }
.status { flex: none; padding: 9px 12px 9px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.st-line { display: flex; align-items: center; gap: 8px; white-space: nowrap; min-width: 0; }
.st-line b { font-weight: 600; color: var(--text); }
.st-sub { margin-top: 2px; gap: 12px; }
.st-sub b { font: 500 12px var(--mono); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.live-dot.paused { background: var(--warn); }
.hud-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.hud-flag { padding: 1px 7px; border-radius: 999px; font-size: 11px; color: var(--warn); border: 1px solid rgba(245, 184, 75, .4); white-space: nowrap; }
.hud-fig { margin-top: 8px; font-size: 12px; color: var(--muted); }
.hf-rows { display: flex; flex-direction: column; gap: 6px; }
.hf-row {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "sw name kills" "sw held bar";
  gap: 1px 8px; align-items: center; min-width: 0;
}
.hf-row[hidden] { display: none; }
.hf-row.down { opacity: .6; }
.hf-sw { grid-area: sw; align-self: center; }
.hf-name { grid-area: name; color: var(--text); font-weight: 600; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-kills { grid-area: kills; color: var(--text); font: 500 11px var(--mono); white-space: nowrap; }
.hf-held { grid-area: held; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.hf-bar { grid-area: bar; width: 56px; height: 5px; border-radius: 3px; background: var(--well); overflow: hidden; justify-self: end; }
.hf-bar i { display: block; height: 100%; width: 0; border-radius: 3px; transition: width .15s linear; }

.readout { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); }
.rd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.rd-head b { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-last { flex: none; font-size: 10.5px; color: var(--muted); padding: 0 6px; border: 1px solid var(--line); border-radius: 999px; }
.rd-grid { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0 0; font-size: 12px; }
.rd-grid dt { color: var(--muted); }
.rd-grid dd { margin: 0; text-align: right; font: 500 12px var(--mono); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.readout.stale .rd-grid dd, .readout.stale .rd-head b { color: var(--text-2); }
/* the journal: what has happened in this world, newest first, with its real numbers; folded by default */
.journal { flex: none; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.journal summary { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; }
.journal summary::-webkit-details-marker { display: none; }
.journal summary b { font-size: 12px; font-weight: 600; color: var(--text); }
.journal summary small { font-size: 10.5px; color: var(--muted); }
.journal.fresh summary small { color: var(--accent, #6cb6ff); }
.j-list { margin: 6px 0 0; padding: 0; list-style: none; max-height: 160px; overflow-y: auto; }
.j-list li { display: grid; grid-template-columns: 44px 1fr; gap: 6px; font-size: 11.5px; line-height: 1.4; color: var(--text-2); padding: 2px 0; }
.j-list li time { font: 500 10.5px var(--mono); color: var(--muted); text-align: right; }
body.side-float .journal { display: none; }
/* the journal's two views: its Log and the Discovery Codex (what the player has found out by making it happen; src/codex.js) */
.j-tabs { --h: 24px; display: grid; width: 100%; margin-top: 7px; }
.j-tabs button { font-size: 11.5px; padding: 0 6px; gap: 5px; }
.j-tabs button small { font: 500 10px var(--mono); color: var(--muted); white-space: nowrap; }
.j-tabs button { white-space: nowrap; }
.j-tabs button[aria-pressed="true"] small { color: inherit; opacity: .8; }
.cx-list { margin: 6px 0 0; padding: 0; list-style: none; max-height: 160px; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.cx-item { padding: 5px 4px; border-radius: 4px; font-size: 11.5px; line-height: 1.45; color: var(--text-2); user-select: text; }
.cx-item + .cx-item { border-top: 1px solid var(--line); }
.cx-item b { display: block; font-size: 12px; font-weight: 600; color: var(--text); }
.cx-item.cx-unk { padding: 2px 4px; border-top: 0; color: var(--muted); opacity: .75; }
.cx-item.flash { animation: cx-flash 1.8s var(--ease) both; }
@keyframes cx-flash { from { background: var(--accent-soft); } to { background: transparent; } }
.cx-reset { margin: 6px 0 0; padding: 0; border: 0; background: none; font-size: 10.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.cx-reset:hover { color: var(--text-2); }
/* a discovery's card: inside the world's bottom-left corner, one at a time, eased in and out (ui.js cxPump) */
.cx-toast {
  position: fixed; z-index: 17; left: calc(var(--fx) + 10px); top: calc(var(--fy) + var(--fh) - 10px);
  display: block; width: min(330px, calc(var(--fw) - 20px)); padding: 8px 12px 9px; text-align: left;
  background: rgba(13, 15, 21, .86); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--text); cursor: pointer;
  opacity: 0; transform: translateY(calc(-100% + 8px)); pointer-events: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.cx-toast.on { opacity: 1; transform: translateY(-100%); pointer-events: auto; }
.cx-toast:hover { border-color: var(--accent-line); }
.cx-t-head { display: flex; align-items: baseline; gap: 6px; font-size: 12px; line-height: 1.35; }
.cx-t-kind { flex: none; color: var(--accent); font-weight: 500; }
.cx-t-kind::after { content: "\00b7"; margin-left: 6px; color: var(--muted); }
.cx-t-title { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.cx-t-n { flex: none; font: 500 10.5px var(--mono); color: var(--muted); }
.cx-t-text { display: block; margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--text-2); }
body.ui-hidden .cx-toast { display: none; }
/* what the sim measured where the discovery happened (ui.js cxMeasure): one quiet line of real numbers above the science */
.cx-t-live { display: block; margin-top: 4px; font: 500 11px/1.4 var(--mono); color: var(--text); opacity: .82; overflow-wrap: anywhere; }
/* the Codex view's suggestion: an undiscovered entry whose makings can all be painted now (ui.js nextNode) */
.cx-next { display: flex; align-items: baseline; gap: 8px; margin-top: 7px; font-size: 11.5px; line-height: 1.4; }
.cx-next-q { flex: 1; min-width: 0; padding: 0; border: 0; background: none; text-align: left; color: var(--text-2); }
.cx-next-q:hover { color: var(--text); }
.cx-next-k { margin-right: 6px; color: var(--accent); font-weight: 500; }
.cx-next-more { flex: none; padding: 0; border: 0; background: none; font-size: 10.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.cx-next-more:hover { color: var(--text-2); }
.cx-item { cursor: pointer; }
.cx-item:hover { background: var(--hover); }
/* the pages (ui.js pgOpen): an element's or an entry's, inside the world's top-right corner, every name a link */
.pg {
  position: fixed; z-index: 18; top: calc(var(--fy) + 10px); left: calc(var(--fx) + var(--fw) - 10px - min(330px, var(--fw) - 20px));
  width: min(330px, calc(var(--fw) - 20px)); max-height: calc(var(--fh) - 20px); display: flex; flex-direction: column;
  background: rgba(13, 15, 21, .9); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--text); user-select: text;
  opacity: 0; transform: translateY(-4px); transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.pg.on { opacity: 1; transform: none; }
.pg-head { flex: none; display: flex; align-items: center; gap: 4px; padding: 4px 4px 0; }
.pg-head .pg-x { margin-left: auto; }
.pg-btn { width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); font-size: 17px; line-height: 1; }
.pg-btn:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.pg-btn:disabled { opacity: .3; cursor: default; }
.pg-crumb { flex: none; min-width: 0; padding: 0 4px; border: 0; background: none; text-align: left; font: 500 10.5px var(--mono); color: var(--muted); }
.pg-crumb:hover { color: var(--text-2); }
.pg-body { min-height: 0; overflow-y: auto; padding: 2px 12px 10px; scrollbar-width: thin; overscroll-behavior: contain; }
.pg-title { display: flex; align-items: center; gap: 9px; margin: 2px 0 6px; }
.pg-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pg-name b { font-size: 14px; font-weight: 600; }
.pg-name small { font-size: 11px; color: var(--muted); }
.pg-title.pg-name { flex-direction: column; align-items: flex-start; gap: 0; }
.pg-text { font-size: 12px; line-height: 1.5; color: var(--text-2); }
.pg-live { margin-bottom: 6px; font: 500 11px/1.45 var(--mono); color: var(--text); opacity: .82; }
.pg-data { margin-top: 8px; }
.pg-sec { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.pg-sec h4 { margin: 0 0 3px; font-size: 10.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pg-li { font-size: 12px; line-height: 1.55; color: var(--text-2); }
.pg-more { color: var(--muted); }
.pg-links { margin-top: 8px; }
.pg-sec .pg-links { margin-top: 0; }
.pg-link { display: inline; padding: 0; border: 0; background: none; font: inherit; color: var(--accent); text-decoration: none; }
.pg-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.pg-link.unk { color: var(--muted); text-align: left; }
.pg-link.q { font-family: var(--mono); padding: 0 2px; }
.pg-hints { margin: 4px 0 0; padding: 0; list-style: none; }
.pg-hints li { display: grid; grid-template-columns: 44px 1fr; gap: 6px; padding: 3px 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.pg-hints li::before { content: attr(data-tier); font-size: 10.5px; color: var(--muted); padding-top: 1px; }
.pg-hints li.on { color: var(--text); }
.pg-ask { margin: 6px 0 0 50px; padding: 3px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: none; font-size: 11.5px; color: var(--text-2); }
.pg-ask:hover:not(:disabled) { border-color: var(--accent-line); color: var(--text); }
.pg-ask:disabled { cursor: default; color: var(--muted); border-color: var(--line); font-variant-numeric: tabular-nums; }
.pg-index { margin: 8px 0 0; padding: 0; list-style: none; font-size: 12px; line-height: 1.6; }
.pi-more { --h: 24px; margin-left: auto; color: var(--muted); }
#rdName.pg-able { cursor: pointer; }
#rdName.pg-able:hover { text-decoration: underline; text-underline-offset: 2px; }
body.ui-hidden .pg { display: none; }
/* Goals (ui.js glRender): science challenges in the player's own world, three small medals each, one attempt at a time */
.gl-view { margin-top: 6px; max-height: 220px; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.gl-list { margin: 0; padding: 0; list-style: none; }
.gl-item { padding: 6px 4px; border-radius: 4px; }
.gl-item + .gl-item { border-top: 1px solid var(--line); }
.gl-item.on { background: rgba(255, 255, 255, .03); }
.gl-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.gl-head b { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-best { flex: none; font: 500 10.5px var(--mono); color: var(--muted); }
.gl-medals { flex: none; display: inline-flex; gap: 3px; }
.gl-m { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--line-strong); }
.gl-m.got.m1 { background: #b9805a; border-color: #b9805a; }
.gl-m.got.m2 { background: #b7bfcc; border-color: #b7bfcc; }
.gl-m.got.m3 { background: #dfbd5a; border-color: #dfbd5a; }
.gl-task { margin-top: 2px; font-size: 11.5px; line-height: 1.4; color: var(--text-2); }
.gl-foot { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; }
.gl-tiers, .gl-live { flex: 1; min-width: 0; font: 500 10.5px/1.4 var(--mono); color: var(--muted); }
.gl-live { color: var(--text); }
.gl-live.off { color: var(--warn); font-family: var(--font); }
.gl-btn { flex: none; padding: 0; border: 0; background: none; font-size: 11px; color: var(--accent); }
.gl-btn:hover { text-decoration: underline; text-underline-offset: 2px; }
.gl-tip { margin-top: 3px; font-size: 11px; line-height: 1.4; color: var(--muted); }
.pg .gl-box { margin-top: 2px; }
.pg-crumb2 { flex: none; }
/* the Property tool's value */
.prop-val { flex: 1; min-width: 0; height: 26px; padding: 0 6px; font: 500 12px var(--mono, ui-monospace, monospace); color: var(--text); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 4px; outline: none; }
.prop-val.bad { border-color: #e06070; }
#propField { flex: 1; min-width: 0; }
/* the console (`) */
.pw-console { position: fixed; left: 0; right: 0; top: 0; z-index: 80; height: 40vh; display: flex; flex-direction: column; background: rgba(6, 8, 12, 0.95); border-bottom: 1px solid var(--line); font: 500 12px var(--mono, ui-monospace, monospace); }
.pc-log { flex: 1; overflow-y: auto; padding: 8px 12px; color: #cfd8e6; white-space: pre-wrap; word-break: break-all; }
.pc-log .pc-cmd { color: #8fb8ff; } .pc-log .pc-err { color: #ff8a96; } .pc-log .pc-note { color: #7a8494; }
.pc-in { height: 30px; padding: 0 12px; color: #eef2f8; background: rgba(255, 255, 255, 0.05); border: 0; border-top: 1px solid var(--line); outline: none; font: inherit; }
/* decoration: colour, quick swatches and the modes */
.deco-box { flex: none; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.deco-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.deco-row input[type="color"] { width: 34px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: none; cursor: pointer; flex: none; }
.deco-sw { display: flex; flex-wrap: wrap; gap: 3px; }
.deco-sw button { width: 15px; height: 15px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 3px; cursor: pointer; }
.deco-modes { display: flex; gap: 3px; margin-top: 6px; }
.deco-modes button { flex: 1; padding: 3px 0; font-size: 11px; color: var(--text-2); background: transparent; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
.deco-modes button[aria-pressed="true"] { color: var(--text); border-color: rgba(255, 150, 220, 0.8); background: rgba(255, 150, 220, 0.12); }
/* the sign editor: a text box over the world */
.sign-ed { position: absolute; z-index: 30; width: 240px; height: 26px; padding: 0 8px; font: 500 12px var(--mono, ui-monospace, monospace); color: var(--text, #eef2f8); background: rgba(10, 12, 18, 0.94); border: 1px solid rgba(255, 214, 120, 0.8); border-radius: 4px; outline: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); }
/* probes: a row each, the probe's number in its colour, what it reads, a graph of the last half minute */
.probe-box { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); }
.pb-row { display: grid; grid-template-columns: 16px 1fr auto; gap: 2px 8px; align-items: center; margin-top: 5px; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.pb-row:hover { background: rgba(127, 140, 160, 0.10); }
.pb-n { width: 16px; height: 16px; border-radius: 50%; font: 600 10px/16px var(--mono); text-align: center; color: #0b0e14; background: var(--pc); }
.pb-what { font-size: 11.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-val { font: 500 12px var(--mono); color: var(--text); text-align: right; white-space: nowrap; }
.pb-graph { grid-column: 1 / 4; width: 100%; height: 22px; display: block; }
/* the colour key of the heat, pressure and air-flow views: the renderer's own ramp, ticks in real units */
.view-key { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); }
.vk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vk-head b { font-size: 12px; font-weight: 600; color: var(--text); }
.vk-head small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.vk-bar { display: block; width: 100%; height: 10px; margin-top: 6px; border-radius: 3px; }
.vk-ticks { position: relative; height: 14px; margin-top: 3px; font: 500 10px var(--mono); color: var(--text-2); }
.vk-ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.vk-ticks span:first-child { transform: none; }
.vk-ticks span:last-child { transform: translateX(-100%); }
body.side-float .readout { display: none; }
.pick-info { flex: none; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.pi-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pi-head .swatch { width: 30px; height: 30px; }
.pi-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pi-name b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-name small { font-size: 11px; color: var(--muted); }
.pi-desc { margin-top: 7px; font-size: 12px; line-height: 1.45; color: var(--text-2); user-select: text; }
.pi-desc:empty { display: none; }
.pi-data { margin-top: 7px; }
.pi-data:empty { display: none; }

.world-box { flex: none; padding: 10px 12px 8px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 7px; }
.wb-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); text-align: left; }
.wb-chev { opacity: .6; transition: transform .15s; }
/* folded (while a lesson card is open, unless opened): only the header shows */
.world-box.folded > :not(.wb-head) { display: none; }
.world-box.folded .wb-chev { transform: rotate(-90deg); }
.wb-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 8px; }
.wb-lbl { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.wb-lbl kbd { display: none; }
.wb-row .seg { --h: 26px; }
.wb-row .seg button { padding: 0 2px; gap: 3px; font-size: 11.5px; }
.wb-row .seg button .ic { width: 13px; height: 13px; }
.wb-row .select { --h: 26px; height: 26px; font-size: 12px; }
.wb-sw { display: flex; flex-direction: column; gap: 0; }
.wb-sw .switch { height: 26px; font-size: 12px; color: var(--text-2); gap: 8px; }
.wb-sw .switch[aria-checked="true"] { color: var(--text); }
.fly-body .world-box { padding: 4px 0 12px; }
.lesson-card { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; animation: fade .18s both; }
.lc-head { flex: none; }
.lc-toggle {
  display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 9px 10px 9px 12px;
  border: 0; background: transparent; color: var(--text); text-align: left;
  transition: background .12s;
}
.lc-toggle:hover { background: var(--hover); }
.lc-step { flex: none; font-size: 11px; font-weight: 500; line-height: 18px; padding: 0 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); white-space: nowrap; }
.lc-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; line-height: 20px; }
.lc-toggle .chev { flex: none; margin-top: 2px; color: var(--muted); transform: rotate(180deg); transition: transform .16s var(--ease); }
.lesson-card.minimised .lc-toggle .chev { transform: none; }
.lc-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 12px 2px; scrollbar-width: thin; overscroll-behavior: contain; }
.lc-body p { margin: 0 0 8px; color: var(--text); font-size: 12.5px; line-height: 1.5; user-select: text; }
.lc-try { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.lc-try h4 { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.lc-try ul { margin: 0; padding-left: 17px; font-size: 12.5px; line-height: 1.45; user-select: text; }
.lc-try li { margin-bottom: 3px; }
/* a goal that checks itself: a ring before it, a tick once done */
.lc-try li.goal { list-style: none; position: relative; margin-left: -17px; padding-left: 20px; }
.lc-try li.goal::before { content: ''; position: absolute; left: 1px; top: 3px; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--muted); box-sizing: border-box; }
.lc-try li.goal.done { color: var(--text-2); }
.lc-try li.goal.done::before { border-color: #5bd08a; background: #5bd08a; }
.lc-try li.goal.done::after { content: ''; position: absolute; left: 4.5px; top: 5px; width: 3px; height: 6px; border: solid #0b0e14; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.lc-status { display: block; margin-top: 8px; font-size: 11.5px; }
.lc-status:empty { display: none; }
.lc-foot { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 10px; border-top: 1px solid var(--line); }
.lesson-card.minimised .lc-content, .lesson-card.minimised .lc-foot { display: none; }

/* No room beside the world: the column dissolves; the status sits on the world's top-left corner, the lesson on its top-right. */
body.side-float .side { display: contents; }
body.side-float .pick-info { display: none; }
body.side-float .status {
  position: fixed; z-index: 15; left: calc(var(--fx) + 9px); top: calc(var(--fy) + 7px); max-width: calc(var(--fw) - 18px);
  padding: 0; border: 0; pointer-events: none;
  font: 400 11px/1.35 var(--mono); color: rgba(232, 235, 242, .6); text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
}
body.side-float .status .st-line { display: inline-flex; margin: 0 10px 0 0; }
body.side-float .status b { color: rgba(232, 235, 242, .85); font: 500 11px var(--mono); }
body.side-float .live-dot { width: 6px; height: 6px; }
body.side-float .hud-fig { width: 230px; padding: 6px 8px; border-radius: var(--r); background: rgba(10, 12, 18, .7); text-shadow: none; font-family: var(--font); }
body.side-float .hud-flag { background: rgba(10, 12, 18, .7); text-shadow: none; font-family: var(--font); }
body.side-float .lesson-card {
  position: fixed; z-index: 16;
  right: calc(100vw - var(--fx) - var(--fw) + 8px); top: calc(var(--fy) + 8px);
  width: min(318px, calc(var(--fw) - 16px));
  background: rgba(19, 22, 29, .95); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow);
}
body.side-float .lesson-card.minimised { width: auto; max-width: min(318px, calc(var(--fw) - 16px)); }

.cell-tag {
  position: fixed; left: 0; top: 0; z-index: 25; pointer-events: none;
  display: flex; flex-direction: column; gap: 1px; max-width: 280px;
  padding: 5px 8px 5px; border-radius: 7px;
  background: rgba(10, 12, 18, .84); border: 1px solid var(--line-strong);
  font-size: 12px; line-height: 1.3; white-space: nowrap;
}
.cell-tag b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ct-line { display: flex; gap: 10px; font: 500 11px var(--mono); color: var(--text); }
.ct-pos { font: 400 10.5px var(--mono); color: var(--muted); }

/* ---------- Tooltip ---------- */
.tip {
  position: fixed; left: 0; top: 0; z-index: 70;
  max-width: 300px; padding: 8px 10px; border-radius: var(--r);
  background: #0a0c11; border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  font-size: 12px; line-height: 1.4; pointer-events: none;
  opacity: 0; transform: translate(var(--x, 0), var(--y, 0));
  transition: opacity .1s;
}
.tip.show { opacity: 1; }
.tip-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tip-head { display: flex; align-items: center; gap: 10px; }
.tip-head .tip-key { margin-left: auto; }
.tip-sw { width: 24px; height: 24px; }
.tip-text { font-size: 13px; font-weight: 600; }
.tip-key:empty { display: none; }
.tip-desc { color: var(--text-2); white-space: normal; }
.tip-meta { font: 400 11px/1.35 var(--mono); color: var(--muted); }

/* ---------- Toasts ---------- */
.toasts {
  position: fixed; left: 0; right: 0; top: calc(var(--top-h) + 14px); z-index: 80;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  max-width: min(460px, 92vw);
  padding: 9px 14px 9px 12px; border-radius: var(--r);
  background: var(--panel); border: 1px solid var(--line-strong); box-shadow: var(--shadow);
  font-size: 13px;
  animation: toast-in .2s var(--ease) both;
  transition: opacity .3s, transform .3s var(--ease);
}
.toast.out { opacity: 0; transform: translateY(-6px); }
.toast svg.ic { width: 18px; height: 18px; color: var(--ok); }
.toast.error svg.ic { color: var(--danger); }
.toast.info svg.ic { color: var(--accent); }

/* ---------- Scrims, cards, palette, gallery ---------- */
.scrim {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center; padding: 16px;
  background: rgba(5, 7, 12, .66);
  animation: fade .15s both;
}
.scrim.top { place-items: start center; padding-top: 12vh; }
.scrim .card.panel { position: relative; z-index: auto; box-shadow: var(--shadow); }
.scrim .card {
  width: min(620px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  padding: 20px; animation: rise .2s var(--ease) both;
}
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-head h2 { font-size: 18px; font-weight: 600; margin-bottom: 2px; }
.welcome-card { width: min(520px, 100%); text-align: center; }
.welcome-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 18px; }
.welcome-hero h1 { font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.welcome-hero p { color: var(--text-2); max-width: 44ch; font-size: 14px; line-height: 1.5; }
.steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; text-align: left; }
.steps li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r); background: var(--raised); border: 1px solid var(--line); }
.step-n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); font: 600 12px var(--mono); }
.steps b { display: block; font-size: 14px; font-weight: 600; }
.steps small { display: block; margin-top: 2px; color: var(--text-2); font-size: 13px; }
.welcome-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.welcome-actions .btn { height: 38px; padding: 0 16px; }
.check { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; color: var(--muted); font-size: 13px; cursor: pointer; }
.scrim .gallery-card { width: min(780px, 100%); }
.scrim .hints-card { width: min(980px, 100%); }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; max-height: min(60vh, 560px); overflow-y: auto; }
.preset-card {
  display: flex; flex-direction: column; gap: 6px; padding: 8px;
  border-radius: var(--r); border: 1px solid var(--line); background: var(--raised);
  color: var(--text); text-align: left;
  transition: border-color .12s, background .12s;
}
.preset-card:hover { border-color: var(--accent-line); background: #1f2430; }
.preset-card canvas.thumb { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: var(--r-sm); background: #000; image-rendering: pixelated; }
.preset-card b { font-size: 13px; font-weight: 600; padding: 0 2px; }
.preset-card small { padding: 0 2px 2px; color: var(--muted); font-size: 12px; line-height: 1.35; }

.palette { position: relative; z-index: auto; width: min(600px, 100%); padding: 0; overflow: hidden; animation: rise .18s var(--ease) both; }
.pal-input { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--muted); }
.pal-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; color: var(--text); }
.pal-list { list-style: none; margin: 0; padding: 6px; max-height: min(52vh, 430px); overflow-y: auto; scrollbar-width: thin; }
.pal-group { padding: 8px 10px 4px; font-size: 12px; font-weight: 500; color: var(--muted); }
.pal-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r); cursor: pointer; }
.pal-item[aria-selected="true"] { background: var(--accent-soft); }
.pal-item .swatch { width: 22px; height: 22px; }
.pal-item .ic-box { display: grid; place-items: center; width: 22px; height: 22px; color: var(--text-2); }
.pal-item .ic-box svg.ic { width: 18px; height: 18px; }
.pal-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-label mark { background: none; color: var(--accent); font-weight: 600; }
.pal-meta { color: var(--muted); font-size: 12px; white-space: nowrap; }
.pal-foot { display: flex; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.pal-empty { padding: 22px; text-align: center; color: var(--muted); list-style: none; }

.keys-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.keys-wrap h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; align-items: center; }
.keys dt { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.keys dd { margin: 0; font-size: 13px; color: var(--text-2); }
.build-tag { margin-left: 8px; white-space: nowrap; }

.gal-tabs { display: inline-flex; padding: 2px; margin-bottom: 12px; border-radius: var(--r); background: var(--well); border: 1px solid var(--line); }
.gal-tab { height: 30px; padding: 0 16px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font-size: 13px; }
.gal-tab:hover { color: var(--text); background: var(--hover); }
.gal-tab[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); }
.gal-progress { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.lesson-dots { display: flex; flex-wrap: wrap; gap: 5px; }
.ldot { width: 9px; height: 9px; border-radius: 50%; background: transparent; border: 1px solid var(--line-strong); }
.ldot.done { background: var(--ok); border-color: var(--ok); }
.ldot.now { box-shadow: 0 0 0 2px var(--accent); }
.gal-learn { display: flex; flex-direction: column; gap: 6px; max-height: min(58vh, 520px); overflow-y: auto; padding: 2px; }
.lesson-item {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px; text-align: left;
  border-radius: var(--r); border: 1px solid var(--line); background: var(--raised); color: var(--text);
  transition: border-color .12s, background .12s;
}
.lesson-item:hover { border-color: var(--line-strong); background: #1f2430; }
.lesson-item.now { border-color: var(--accent-line); background: var(--accent-soft); }
.lesson-n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm); font: 600 12px var(--mono); background: var(--well); border: 1px solid var(--line); color: var(--text-2); }
.lesson-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.lesson-meta b { font-size: 13px; font-weight: 600; }
.lesson-meta small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.lesson-state { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--line-strong); }
.lesson-state.done { background: var(--ok); border-color: var(--ok); }
.gal-empty { padding: 26px 10px; text-align: center; color: var(--muted); }

/* ---------- Life patterns: float over the top of the canvas, so choosing a Life rule never resizes it ---------- */
.stampbar {
  left: calc(var(--fx) + 10px); top: calc(var(--fy) + 10px);
  max-width: calc(var(--fw) - 20px);
  height: 40px; padding: 0 10px;
  display: flex; align-items: center; gap: 6px;
  z-index: 21; overflow-x: auto; scrollbar-width: none;
}
.stampbar::-webkit-scrollbar { display: none; }
.sb-title { font-size: 12px; font-weight: 500; color: var(--muted); padding-right: 4px; white-space: nowrap; }
.sb-chip {
  flex: none; height: 28px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--raised); color: var(--text);
  font-size: 13px; white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.sb-chip:hover { background: #222737; }
.sb-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.sb-hint { flex: none; margin-left: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }

.stamp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 60vh; overflow: auto; padding: 2px; }
.stamp-card { display: flex; flex-direction: column; gap: 6px; padding: 6px; text-align: left; border-radius: var(--r); border: 1px solid var(--line); background: var(--raised); color: var(--text); font-size: 12px; }
.stamp-card:hover { border-color: var(--accent-line); }
.stamp-card canvas { width: 100%; height: auto; aspect-ratio: 16 / 11; border-radius: var(--r-sm); image-rendering: pixelated; }

/* ---------- On-screen stickman pads ---------- */
.stick-pads { position: fixed; right: 14px; bottom: calc(var(--dock-h) + 28px); z-index: 18; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.stick-pad { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: var(--r-lg); background: rgba(19, 22, 29, .82); border: 1px solid var(--line-strong); }
.sp-tag { font-size: 12px; color: var(--muted); padding: 0 6px; white-space: nowrap; }
.sp-btn {
  min-width: 46px; height: 40px; padding: 0 10px; border-radius: var(--r); touch-action: none; user-select: none; -webkit-user-select: none;
  border: 1px solid var(--line-strong); background: var(--raised); color: var(--text); font-size: 13px; font-weight: 500;
}
.sp-btn:hover { background: #222737; }
.sp-btn.held { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.sp-btn.sp-use { min-width: 64px; font-weight: 600; }

/* ---------- Motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Layout states ---------- */
body.ui-hidden .bar, body.ui-hidden .pop, body.ui-hidden .flyout, body.ui-hidden .side, body.ui-hidden .status,
body.ui-hidden .cell-tag, body.ui-hidden .lesson-card, body.ui-hidden .stampbar, body.ui-hidden .stick-pads { display: none; }

/* The Life pattern bar floats over the top middle of the world. */
.stampbar { left: calc(var(--fx) + var(--fw) / 2); top: calc(var(--fy) + 8px); transform: translateX(-50%); max-width: calc(var(--fw) - 16px); height: 36px; }

@media (max-width: 1700px) {
  .slot-chip b { display: none; }
  .pp-kind { display: none; }
}
@media (max-width: 1500px) {
  .dock-recent .rchip:nth-child(n+5) { display: none; }
}
@media (max-width: 1400px) {
  .logo { display: none; }
  .brush-opt input[type="range"] { width: 72px; }
  .brush-opt .lbl { display: none; }
  .tb-right .btn-label { display: none; }
  .tb-right .btn { width: 30px; padding: 0; }
  .dock-recent .rchip:nth-child(n+4) { display: none; }
}

/* Narrow: the picker's tabs move above its rows (so it can collapse to them), and the rail gets slimmer. */
@media (max-width: 860px) {
  :root { --gap: 6px; }
  .only-narrow { display: inline-grid; }
  .titlebar { padding: 3px; }
  .tb-sep { display: none; }
  .pp-main b { max-width: 96px; }
  .dock { padding: 5px 6px calc(5px + env(safe-area-inset-bottom)); }
  .dock-bar { order: -1; }
  body.dock-collapsed .dock { transform: translateY(calc(100% - 40px)); }
  .dock-search { flex: 0 1 120px; min-width: 70px; }
  .dock-tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); padding-right: 16px; }
  .rail { width: 46px; padding: 4px; overflow-y: auto; scrollbar-width: none; }
  .rail-grid { grid-template-columns: 36px; grid-auto-rows: 32px; margin-bottom: 2px; }
  .rail .rb span { display: none; }
  .rail-cap { font-size: 0; height: 5px; padding: 0; margin-top: 3px; }
  .rail-cap:first-child { display: none; }
  .flyout { width: min(300px, calc(100vw - 12px)); }
  .toasts { top: calc(var(--top-h) + 10px); }
  .scrim .card { padding: 16px; }
  .keys-wrap { grid-template-columns: 1fr; }
  .stick-pads { right: 8px; }
}
@media (max-width: 860px) and (min-height: 600px) {
  .dock-cat-wrap { height: 92px; }
}
@media (max-width: 600px) {
  .slot-chip { display: none; }
  .dock-recent, .dock-sep { display: none; }
  .sp-tag { display: none; }
}

/* Touch-first sizing: larger targets. */
@media (pointer: coarse) {
  :root { --h: 40px; }
  .seg button { min-width: 36px; }
  input[type="range"] { height: 28px; }
  input[type="range"]::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -8px; }
}

/* Respect reduced motion: keep state changes, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ---------- Section column (wide windows): search on top, the element sections as a vertical list, recent picks at the foot ---------- */
.catcol { display: flex; flex-direction: column; padding: 8px 6px; overflow: hidden; }
.catcol .dock-bar { flex: 1 1 auto; min-height: 0; flex-direction: column; align-items: stretch; gap: 8px; padding: 0; border: 0; }
.catcol .dock-search { order: -1; flex: none; width: auto; height: 30px; margin: 0; }
.catcol .dock-tabs { flex: 1 1 auto; min-height: 0; flex-direction: column; flex-wrap: nowrap; gap: 1px; overflow-y: auto; scrollbar-width: none; }
.catcol .dock-tabs::-webkit-scrollbar { display: none; }
.catcol .tab { flex: none; width: 100%; height: 31px; margin: 0; padding: 0 8px; border-radius: 7px; box-shadow: none; transition: color .12s; }   /* (the highlight snaps: it marks where you are) */
.catcol .tab:hover { background: var(--hover); }
.catcol .tab[aria-selected="true"] { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.catcol .dock-recent { flex: none; flex-wrap: wrap; justify-content: center; padding-top: 6px; border-top: 1px solid var(--line); }
.catcol .dock-recent:empty { display: none; }
.catcol .dock-sep, .catcol .dock-toggle { display: none; }
.cat-col .dock .dock-cat-wrap { flex: 1 1 auto; height: auto; min-height: 62px; }

/* ---------- The journal as a popup under the top bar (from its button there) ---------- */
.journal.popup { position: fixed; z-index: 30; top: calc(var(--top-h) + 6px); right: var(--gap); width: min(380px, calc(100vw - 2 * var(--gap)));
  max-height: calc(100vh - var(--top-h) - 24px); overflow-y: auto; padding: 10px 12px 12px;
  background: var(--panel, var(--bar)); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
.journal.popup:not([open]) { display: none; }
.journal.popup > summary { pointer-events: none; margin-bottom: 6px; }
body.side-float .journal.popup { display: block; }
body.side-float .journal.popup:not([open]) { display: none; }
.j-btn { position: relative; }
.j-badge { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: 10px; line-height: 16px; text-align: center;
  background: var(--well); color: var(--muted); margin-left: 2px; }
.j-badge.fresh { background: var(--accent-soft); color: var(--accent); }

/* ================= Sketch theme (dark): chalk on charcoal paper, after designprompts.dev/sketch. Hand-drawn fonts (Kalam for titles,
   Patrick Hand for text), ink lines 2px with uneven corners, hard offset shadows, a dot-grid paper, red for what is chosen. The world
   itself is not touched. ================= */
:root {
  --bg: #19191b; --panel: #1f1f22; --raised: #26262a; --well: #151517;
  --ink: #ece8de; --ink-rgb: 236, 232, 222;
  --line: rgba(236, 232, 222, .2); --line-strong: rgba(236, 232, 222, .45);
  --text: #ece8de; --text-2: #cdc8bc; --muted: #928d82;
  --accent: #ff5c5c; --accent-rgb: 255, 92, 92; --accent-ink: #19191b;
  --accent-soft: rgba(255, 92, 92, .14); --accent-line: rgba(255, 92, 92, .7);
  --hover: rgba(236, 232, 222, .07);
  --bar: rgba(31, 31, 34, .97); --bar-idle: 1;
  --font: "Patrick Hand", "Segoe Print", "Comic Sans MS", cursive;
  --title: "Kalam", "Patrick Hand", cursive;
  --wob: 255px 15px 225px 15px / 15px 225px 15px 255px;      /* a hand-drawn rounded box */
  --wob-card: 18px 10px 22px 12px / 12px 22px 10px 18px;      /* the same, for big panels */
  --sk-shadow: 4px 4px 0 rgba(236, 232, 222, .14);
  --shadow: var(--sk-shadow);
}
body {
  font-size: 14.5px; letter-spacing: .01em;
  background-color: var(--bg);
  background-image: radial-gradient(rgba(236, 232, 222, .075) 1px, transparent 1.2px);
  background-size: 22px 22px;
}
/* panels: chalk outlines with uneven corners and a pen-stroke shadow */
.bar, .side, .pop, .flyout, .journal.popup, .scrim .card {
  background: var(--bar); border: 2px solid rgba(236, 232, 222, .55); border-radius: var(--wob-card);
  box-shadow: var(--sk-shadow); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.frame { border-radius: 6px 3px 7px 4px / 4px 7px 3px 6px; box-shadow: 0 0 0 2px rgba(236, 232, 222, .6), 5px 5px 0 2px rgba(236, 232, 222, .12); }
/* titles in Kalam */
.rail-cap, .journal summary b, .wb-head, .pi-name b, h1, h2, h3, .catcol .tab[aria-selected="true"], .wordmark { font-family: var(--title); }
.rail-cap { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.wordmark { font-weight: 700; font-size: 18px; letter-spacing: .02em; margin: 0 8px 0 2px; color: var(--ink); }
/* buttons: hand-drawn boxes; chosen = chalk box with a red pen shadow */
.btn, .icon-btn, .rb, .tab, .gchip, .rchip, .seg button, .dock-search, .select, input[type="search"], input[type="text"] {
  border-radius: var(--wob); font-family: var(--font);
}
.btn, .select, .dock-search { border: 2px solid rgba(236, 232, 222, .5); background: transparent; }
.btn:hover, .icon-btn:hover, .rb:hover, .tab:hover, .gchip:hover { background: var(--hover); border-color: rgba(236, 232, 222, .55); }
.rb, .tab, .gchip, .icon-btn, .seg button { border: 2px solid transparent; }
.rb[aria-pressed="true"], .tab[aria-selected="true"], .gchip[aria-selected="true"], .seg button[aria-pressed="true"], .rchip[aria-pressed="true"],
.catcol .tab[aria-selected="true"] {
  color: var(--ink); background: rgba(236, 232, 222, .07); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--accent);
}
.gchip[aria-selected="true"] .swatch { box-shadow: 0 0 0 1.5px var(--ink); }
.tab[aria-selected="true"] .swatch { opacity: 1; }
.dock-bar { border-bottom: 2px dashed rgba(236, 232, 222, .2); }
.catcol .dock-recent { border-top: 2px dashed rgba(236, 232, 222, .2); }
.journal.fresh summary small, .j-badge.fresh { color: var(--accent); }
.j-badge { border-radius: var(--wob); border: 1.5px solid rgba(236, 232, 222, .4); background: transparent; }
.j-badge.fresh { border-color: var(--accent); background: var(--accent-soft); }
.switch-track { border: 2px solid rgba(236, 232, 222, .5); background: transparent; border-radius: var(--wob); }
.switch-track i { top: 1px; left: 1px; background: var(--ink); }
.switch[aria-checked="true"] .switch-track { background: var(--accent); border-color: var(--ink); }
.switch[aria-checked="true"] .switch-track i { background: var(--ink); }
/* separators drawn as dashed pen lines */
.side > * + *, .rail-cap { border-top-style: dashed; }

/* ---------- Scenes gallery (sketch): picture cards laid a little askew, real renders as thumbnails ---------- */
.gallery-card { width: min(1080px, calc(100vw - 32px)); max-height: calc(100vh - 48px); display: flex; flex-direction: column; }
.gallery-card .card-head h2 { font-family: var(--title); font-size: 28px; font-weight: 700; margin: 0; }
.gal-tabs { border: 0; background: transparent; padding: 0; gap: 8px; margin: 6px 0 14px; }
.gal-tab { height: 34px; padding: 0 18px; border: 2px solid rgba(236, 232, 222, .35); border-radius: var(--wob); font-family: var(--title); font-size: 16px; color: var(--text-2); }
.gal-tab[aria-selected="true"] { color: var(--ink); border-color: var(--ink); background: rgba(236, 232, 222, .07); box-shadow: 3px 3px 0 var(--accent); }
.gal-learn, .gallery-grid { max-height: none; overflow-y: auto; flex: 1 1 auto; min-height: 0; padding: 4px 8px 12px 4px; display: block; }
.gal-progress { display: flex; align-items: center; gap: 12px; margin: 0 2px 14px; font-family: var(--title); }
.gal-progress small { color: var(--text-2); font-size: 14px; white-space: nowrap; }
.gal-bar { flex: 1; height: 10px; border: 2px solid rgba(236, 232, 222, .45); border-radius: var(--wob); overflow: hidden; }
.gal-bar i { display: block; height: 100%; background: var(--accent); }
.scene-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 20px 18px; }
.scene-card { display: flex; flex-direction: column; gap: 4px; padding: 8px 8px 10px; text-align: left; color: var(--text);
  background: var(--raised); border: 2px solid rgba(236, 232, 222, .55); border-radius: var(--wob-card);
  box-shadow: 4px 4px 0 rgba(236, 232, 222, .12); transform: rotate(var(--tilt, 0deg)); transition: transform .14s var(--ease), box-shadow .14s; }
.scene-card:hover { transform: rotate(0deg) translate(-2px, -2px); box-shadow: 6px 6px 0 var(--accent); border-color: var(--ink); }
.scene-card.now { border-color: var(--accent); }
.sc-fig { position: relative; display: block; border: 2px solid rgba(236, 232, 222, .35); border-radius: 10px 6px 12px 7px / 7px 12px 6px 10px; overflow: hidden; background: #05070b; aspect-ratio: 16 / 9; margin-bottom: 4px; }
.sc-fig .thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
.sc-num { position: absolute; left: 6px; top: 6px; min-width: 26px; height: 26px; padding: 0 6px; display: grid; place-items: center; font-family: var(--title); font-weight: 700; font-size: 15px;
  color: var(--ink); background: rgba(25, 25, 27, .85); border: 2px solid var(--ink); border-radius: var(--wob); }
.sc-done { position: absolute; right: 6px; top: 4px; font-family: var(--title); font-size: 26px; font-weight: 700; color: var(--accent); text-shadow: 2px 2px 0 rgba(0, 0, 0, .6); }
.scene-card.done .sc-fig { border-color: rgba(255, 92, 92, .55); }
.scene-card b { font-family: var(--title); font-size: 18px; font-weight: 700; line-height: 1.15; padding: 0 2px; }
.scene-card small { color: var(--text-2); font-size: 14px; line-height: 1.3; padding: 0 2px; }

/* ---------- the section column holds only the sections; the picker's bar (search first, then the recent picks) sits over the grid ---------- */
.catcol > .dock-tabs { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 1px; overflow-y: auto; scrollbar-width: none; }
.catcol > .dock-tabs::-webkit-scrollbar { display: none; }
.catcol > .dock-tabs .tab { flex: none; width: 100%; height: 31px; margin: 0; padding: 0 8px; }
.cat-col .dock .dock-bar { display: flex; align-items: center; gap: 8px; padding: 4px 0 6px; border-bottom: 2px dashed rgba(236, 232, 222, .2); }
.cat-col .dock .dock-search { order: 0; width: 220px; flex: 0 0 auto; }
.cat-col .dock .dock-recent { order: 1; flex: 1 1 auto; justify-content: flex-start; }
.cat-col .dock .dock-sep { display: none; }
/* a smaller left rail: icons and labels scaled down */
.rail .rb svg.ic { width: 16px; height: 16px; }
.rail .rb span { font-size: 11px; }
.rail-cap { font-size: 11.5px; height: 18px; }