/* ═══════════════════════════════════════════════════════════════════════
   DITHER · TECHNICAL SPECIMEN · REV.0061
   Instrument-panel UI / engineering specimen aesthetic.

   TOC
   01 · Tokens
   02 · Reset & base
   03 · Layout shell
   04 · Header / brand / tabs / actions
   05 · Buttons
   06 · Drop zone
   07 · Workspace + canvas + viewport
   08 · Status bar
   09 · Sidebar + sections
   10 · Form controls (slider, select, input, checkbox, color)
   11 · Tone lock chips
   12 · Algorithm list + categories
   13 · Param container
   14 · Paint tools, brush library, custom brushes
   15 · Modals (export, brush maker, brush picker)
   16 · Misc (rules, dual range, advanced, recon)
   17 · Animations
   18 · Scrollbars
   19 · Responsive
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 01 · TOKENS ──────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --ink-000:        #08080A;
  --ink-050:        #0C0C0F;
  --ink-100:        #111115;
  --ink-200:        #16161B;
  --ink-300:        #1D1D24;
  --ink-400:        #26262E;
  --ink-500:        #2F2F38;

  /* Rules / borders */
  --rule:           rgba(255, 255, 255, 0.055);
  --rule-md:        rgba(255, 255, 255, 0.085);
  --rule-strong:    rgba(255, 255, 255, 0.14);
  --rule-bright:    rgba(255, 255, 255, 0.22);

  /* Typography colors */
  --paper:          #F2F0E8;
  --paper-soft:     #DCDCD2;
  --paper-dim:      #9A9A9F;
  --paper-muted:    #66666C;
  --paper-faint:    #44444A;

  /* PRIMARY SIGNAL — hi-vis safety amber, used SPARINGLY for live/active/key states */
  --signal:         #FF5E1A;
  --signal-bright:  #FF8043;
  --signal-deep:    #D24A0F;
  --signal-glow:    rgba(255, 94, 26, 0.30);
  --signal-tint:    rgba(255, 94, 26, 0.10);
  --signal-tint-strong: rgba(255, 94, 26, 0.18);

  /* SECONDARY SIGNAL — blueprint cyan, for inspection / readouts */
  --cyan:           #6DEDF0;
  --cyan-bright:    #9CF7FA;
  --cyan-glow:      rgba(109, 237, 240, 0.30);
  --cyan-tint:      rgba(109, 237, 240, 0.08);

  /* Per-tab accent (tabs swap which signal drives the sidebar) */
  --tab-dither:     #FF5E1A;
  --tab-grain:      #E84393;
  --tab-paint:      #6DEDF0;

  /* Default tab signal (overridden per tab via body class) */
  --tab-signal:        var(--tab-dither);
  --tab-signal-glow:   var(--signal-glow);
  --tab-signal-tint:   var(--signal-tint);

  /* Status colors */
  --ok:             #4ADE80;
  --warn:           #FFB020;
  --danger:         #FF4D6D;
  --ok-tint:        rgba(74, 222, 128, 0.10);

  /* Geometry */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 10px;

  /* Motion */
  --ease:           cubic-bezier(0.32, 0.72, 0.20, 1.00);
  --ease-snap:      cubic-bezier(0.65, 0.05, 0.36, 1.00);
  /* Spring: gentle overshoot for panel expand, sidebar fold reveal */
  --ease-spring:    cubic-bezier(0.34, 1.18, 0.32, 1);
  --t-fast:         110ms var(--ease);
  --t-base:         180ms var(--ease);
  --t-slow:         320ms var(--ease);

  /* Layout */
  --sidebar-w:      316px;
  --header-h:       58px;
  --status-h:       28px;

  /* Typography */
  --font-mono:      'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;
  --font-sans:      'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', sans-serif;
  --font-display:   'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  /* Shadows */
  --sh-1: 0 1px 0 rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.25);
  --sh-2: 0 6px 18px rgba(0,0,0,0.45), 0 1px 0 rgba(0,0,0,0.6);
  --sh-3: 0 24px 60px rgba(0,0,0,0.65), 0 2px 0 rgba(0,0,0,0.6);

  /* Aliases for legacy code paths */
  --bg:           var(--ink-000);
  --bg-raised:    var(--ink-200);
  --bg-hover:     var(--ink-300);
  --bg-active:    var(--ink-400);
  --bg-sunken:    var(--ink-050);
  --bg-elev:      var(--ink-200);
  --bg-muted:     var(--ink-100);
  --border:       var(--rule);
  --border-light: var(--rule-md);
  --border-strong:var(--rule-strong);
  --text:         var(--paper);
  --text-dim:     var(--paper-dim);
  --text-muted:   var(--paper-muted);
  --accent:       var(--paper);
  --fun:          var(--signal);
  --fun-bright:   var(--signal-bright);
  --fun-dim:      var(--signal-deep);
  --fun-glow:     var(--signal-glow);
  --fun-tint:     var(--signal-tint);
  --gold:         var(--signal);
  --gold-bright:  var(--signal-bright);
  --gold-deep:    var(--signal-deep);
  --gold-glow:    var(--signal-glow);
  --gold-tint:    var(--signal-tint);
  --cyan-tint:    var(--cyan-tint);
  --pink:         var(--tab-grain);
  --pink-tint:    rgba(232,67,147,0.12);
  --alpha-a:      rgba(208, 218, 232, 0.035);
  --alpha-b:      rgba(108, 124, 148, 0.065);
  --alpha-glow:   rgba(150, 177, 207, 0.10);

  --radius-sm: var(--r-1);
  --radius:    var(--r-2);
  --radius-md: var(--r-3);
  --radius-lg: var(--r-4);
  --transition: var(--t-base);
  --transition-fast: var(--t-fast);
  --shadow-sm: var(--sh-1);
  --shadow-md: var(--sh-2);
  --shadow-lg: var(--sh-3);
  --shadow-glow: 0 0 0 2px var(--signal-glow);
}

/* Body classes swap the active accent for the whole sidebar */
body.tab-dither { --tab-signal: var(--tab-dither); --tab-signal-glow: rgba(255,94,26,0.30); --tab-signal-tint: rgba(255,94,26,0.10); }
body.tab-grain  { --tab-signal: var(--tab-grain);  --tab-signal-glow: rgba(232,67,147,0.30); --tab-signal-tint: rgba(232,67,147,0.10); }
body.tab-paintstroke  { --tab-signal: var(--tab-paint);  --tab-signal-glow: rgba(109,237,240,0.30); --tab-signal-tint: rgba(109,237,240,0.08); }

/* Custom pixel-art display face — used for the "image" hero word and a
   handful of other special-moment accents. Pixelated by design, so we
   keep auto kerning off and let the file's bitmap glyphs render crisp. */
@font-face {
  font-family: 'AstheticPixel';
  src: url('fonts/AstheticPixel-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── 02 · RESET & BASE ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--ink-000);
  color: var(--paper);
  font-size: 13px;
  line-height: 1.45;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Intro splash — plays once on load, dithers "DITHER" into existence,
   then fades out to reveal the app. Sits above everything else
   (z-index: 9999) and dismissed on click/keypress. */
.dither-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ink-000);
  display: block;
  cursor: pointer;
  opacity: 1;
  transition: opacity 360ms var(--ease);
}
.dither-intro canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}
.dither-intro.dither-intro-fade { opacity: 0; pointer-events: none; }

/* Cursor-reactive dot field — fixed behind everything, drawn by JS */
#dot-field {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  display: block;
  opacity: 1;
  transition: opacity 480ms var(--ease);
}
/* When workspace is up, dim the dot field WAY down — the canvas is the
   star then. The dots stay there but recede; you'll see them along the
   edges and behind the sidebar. */
body.has-image #dot-field { opacity: 0.32; }

::selection { background: var(--signal); color: #0A0A0A; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
button { background: none; border: none; cursor: pointer; }
button:disabled { cursor: not-allowed; }

a { color: var(--signal); text-decoration: none; }

/* Utility */
.hidden { display: none !important; }

/* ── 03 · LAYOUT SHELL ───────────────────────────────────────────────── */
#app { display: flex; flex-direction: column; height: 100vh; position: relative; z-index: 1; }
main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }

/* ── 04 · HEADER · BRAND · TABS · ACTIONS ────────────────────────────── */
header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
  padding: 0 22px;
  background: rgba(8, 8, 10, 0.72);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--rule);
  position: relative;
  flex-shrink: 0;
  z-index: 10;
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
}

.brand-mark {
  display: grid;
  grid-template-columns: 6px 6px;
  grid-template-rows: 6px 6px;
  gap: 3px;
}
.brand-mark-dot {
  width: 6px; height: 6px;
  background: var(--paper);
  border-radius: 1px;
  transition: background var(--t-base);
}
.brand-mark-dot:nth-child(1) { background: var(--signal); }
.brand-mark-dot:nth-child(2) { background: var(--paper); }
.brand-mark-dot:nth-child(3) { background: var(--paper-muted); }
.brand-mark-dot:nth-child(4) { background: var(--paper); }
body.tab-grain .brand-mark-dot:nth-child(1) { background: var(--tab-grain); }
body.tab-paintstroke .brand-mark-dot:nth-child(1) { background: var(--tab-paint); }

.brand-wordmark { display: flex; align-items: center; line-height: 1; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--paper);
}

/* Tabs — simple Swiss pill row, no LARP indices */
.tab-group {
  display: flex;
  gap: 4px;
  justify-self: center;
  background: rgba(255,255,255,0.04);
  padding: 4px;
  border-radius: var(--r-4);
  border: 1px solid var(--rule);
}

.tab-btn {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 7px 16px;
  color: var(--paper-dim);
  border-radius: var(--r-3);
  position: relative;
  transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.tab-btn:hover { color: var(--paper); }
.tab-btn.active {
  background: var(--paper);
  color: var(--ink-000);
}
body.tab-grain .tab-btn.active        { background: var(--tab-grain);  color: #1a0410; }
body.tab-paintstroke .tab-btn.active  { background: var(--tab-paint);  color: #002022; }

.tab-content { display: contents; }
.tab-content[style*="display: none"], .tab-content[style*="display:none"] { display: none !important; }

/* Header actions */
.header-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-self: end;
}

.undo-redo-group {
  display: flex;
  gap: 2px;
  margin-left: 6px;
  padding-left: 10px;
  border-left: 1px solid var(--rule);
}

/* ── 05 · BUTTONS ────────────────────────────────────────────────────── */
.btn-primary, .btn-secondary, .btn-ghost, .btn-fun, .btn-bake, .btn-icon, .btn-small {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: -0.005em;
  text-transform: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 8px 14px;
  transition:
    background var(--t-fast),
    color var(--t-fast),
    border-color var(--t-fast),
    box-shadow var(--t-fast),
    transform var(--t-fast);
  white-space: nowrap;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
  border: 1px solid transparent;
}

/* Dice — small accent buttons stay mono small-caps for character */
.btn-dice {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: var(--r-1);
  cursor: pointer;
  padding: 4px 8px;
  white-space: nowrap;
  user-select: none;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--paper-muted);
  transition: all var(--t-fast);
}

.btn-glyph {
  font-size: 11px;
  display: inline-block;
  line-height: 1;
}

button:disabled,
.btn-primary:disabled, .btn-secondary:disabled, .btn-ghost:disabled,
.btn-fun:disabled, .btn-bake:disabled, .btn-icon:disabled, .btn-small:disabled {
  opacity: 0.32;
  pointer-events: none;
  filter: saturate(0.4);
}

button:active:not(:disabled) { transform: translateY(1px); }
button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--tab-signal), 0 0 0 4px var(--tab-signal-glow); }

/* Primary (white block — like a primary key on a control panel) */
.btn-primary {
  background: var(--paper);
  color: var(--ink-000);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 -1px 0 rgba(0,0,0,0.12) inset, 0 1px 2px rgba(0,0,0,0.5);
}
.btn-primary:hover:not(:disabled) {
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 -1px 0 rgba(0,0,0,0.15) inset, 0 2px 6px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.15);
}

/* Secondary (outlined) */
.btn-secondary {
  background: var(--ink-200);
  color: var(--paper);
  border: 1px solid var(--rule-md);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--ink-300);
  border-color: var(--rule-strong);
}

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--paper-dim);
  padding: 7px 10px;
}
.btn-ghost:hover:not(:disabled) { color: var(--paper); background: rgba(255,255,255,0.04); }

/* Shuffle — the playful CTA. Lives in the header, has a tiny sparkle
   glyph that spins on hover. */
.btn-fun {
  background: transparent;
  color: var(--signal);
  border: 1px solid var(--signal);
}
.btn-fun .btn-glyph {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  transition: transform 220ms var(--ease);
}
.btn-fun:hover:not(:disabled) {
  background: var(--signal);
  color: var(--ink-000);
}
.btn-fun:hover:not(:disabled) .btn-glyph { animation: shuffle-spin 700ms var(--ease-snap); }
@keyframes shuffle-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Bake (the HOT amber commit action) */
.btn-bake {
  background: var(--signal);
  color: #1a0a02;
  border: 1px solid var(--signal-deep);
  padding-left: 14px;
  padding-right: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    0 1px 2px rgba(0,0,0,0.4),
    0 0 0 0 var(--signal-glow);
  position: relative;
  overflow: hidden;
}
.btn-bake .btn-glyph {
  color: #1a0a02;
  font-size: 9px;
  animation: bake-pulse 2200ms ease-in-out infinite;
}
@keyframes bake-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.85); }
}
.btn-bake:hover:not(:disabled) {
  background: var(--signal-bright);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    0 2px 6px rgba(0,0,0,0.4),
    0 0 0 2px var(--signal-glow),
    0 0 24px var(--signal-glow);
}
.btn-bake::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: translateX(-100%);
  transition: transform 500ms var(--ease);
}
.btn-bake:hover:not(:disabled)::before { transform: translateX(100%); }
.btn-bake:disabled {
  background: var(--ink-200);
  color: var(--paper-muted);
  border: 1px solid var(--rule);
  box-shadow: none;
}
.btn-bake:disabled .btn-glyph { animation: none; color: var(--paper-muted); }

/* Icon button */
.btn-icon {
  background: var(--ink-100);
  color: var(--paper-dim);
  border: 1px solid var(--rule);
  padding: 5px 9px;
  font-size: 10px;
  min-width: 28px;
  justify-content: center;
  letter-spacing: 0.08em;
}
.btn-icon:hover:not(:disabled) {
  color: var(--paper);
  border-color: var(--rule-strong);
  background: var(--ink-300);
}

.btn-dice:hover {
  color: var(--tab-signal);
  border-color: var(--tab-signal);
  background: var(--tab-signal-tint);
}

/* Small (for inline section actions) */
.btn-small {
  background: var(--ink-100);
  color: var(--paper-dim);
  border: 1px solid var(--rule);
  padding: 7px 10px;
  font-size: 10px;
  width: 100%;
  justify-content: center;
  letter-spacing: 0.10em;
}
.btn-small:hover:not(:disabled) {
  color: var(--paper);
  border-color: var(--rule-strong);
  background: var(--ink-300);
}

/* ── 06 · DROP ZONE — the "universal waiting zone" ─────────────────── */
.drop-zone {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  overflow: hidden;
  background: transparent; /* dot field shows through */
  cursor: pointer;
}

/* The whole landing surface is one big drop target. Subtle dragover
   feedback via a hairline ring at the edges, not a fenced box. */
.drop-zone::after {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid transparent;
  pointer-events: none;
  transition: border-color var(--t-base);
}
.drop-zone.dragover::after { border-color: rgba(255,255,255,0.18); }

.drop-zone-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  z-index: 1;
  pointer-events: none; /* clicks pass through to .drop-zone */
}

/* The big Swiss headline. Heavy, tight, generous around. */
.drop-zone-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(72px, 13vw, 168px);
  line-height: 0.88;
  letter-spacing: -0.045em;
  color: var(--paper);
  text-align: center;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.22em;
}
.drop-zone-word { display: inline-block; }
.drop-zone-image {
  display: inline-flex;
  align-items: center;
  /* Height set to optical x/cap height of the surrounding sans so the
     canvas baseline reads with the word. Width is driven by canvas
     aspect-ratio once JS measures the rendered text. */
  height: 0.86em;
}
.drop-zone-image canvas {
  display: block;
  height: 100%;
  width: auto;
  /* Default aspect until JS measures the real one; "image" in
     AstheticPixel is roughly 3.2:1 at the size we render it. */
  aspect-ratio: 3.2 / 1;
  image-rendering: pixelated;
}
/* (legacy .drop-zone-display em removed — hero is rendered by JS into
   #hero-canvas below) */
/* Hint text under the headline — small and quiet */
.drop-zone .drop-zone-hint {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--paper-dim);
  margin: 0;
}

/* Subtle dragover lift */
.drop-zone.dragover .drop-zone-display { transform: translateY(-2px); transition: transform 220ms var(--ease); }

/* ── 07 · WORKSPACE + CANVAS + VIEWPORT ──────────────────────────────── */
.workspace { flex: 1; display: flex; overflow: hidden; min-height: 0; }
.workspace.hidden { display: none; }

.canvas-container { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.canvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 22px;
  border-bottom: 1px solid var(--rule);
  background: rgba(8, 8, 10, 0.5);
  backdrop-filter: blur(8px);
  flex-shrink: 0;
  gap: 24px;
}
.canvas-header-left { display: flex; align-items: center; gap: 14px; min-width: 0; }

.image-info {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--paper-soft);
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zoom-controls { display: flex; align-items: center; gap: 6px; }
.zoom-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--paper);
  min-width: 48px;
  text-align: right;
  padding: 5px 9px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.canvas-wrapper {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  position: relative;
  cursor: default;
}

/* Transparency checker */
.canvas-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-base);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0)),
    linear-gradient(90deg, var(--alpha-a) 25%, transparent 25%, transparent 75%, var(--alpha-a) 75%, var(--alpha-a)),
    linear-gradient(var(--alpha-a) 25%, transparent 25%, transparent 75%, var(--alpha-a) 75%, var(--alpha-a)),
    linear-gradient(90deg, var(--alpha-b) 25%, transparent 25%, transparent 75%, var(--alpha-b) 75%, var(--alpha-b)),
    linear-gradient(var(--alpha-b) 25%, transparent 25%, transparent 75%, var(--alpha-b) 75%, var(--alpha-b));
  background-size: auto, 32px 32px, 32px 32px, 16px 16px, 16px 16px;
  background-position: 0 0, 0 0, 16px 16px, 0 0, 8px 8px;
}
.canvas-wrapper.has-alpha::before { opacity: 1; }
.canvas-wrapper.panning { cursor: grabbing; }

.canvas-wrapper canvas {
  image-rendering: pixelated;
  max-width: none;
  position: absolute;
  transform-origin: 0 0;
  z-index: 3;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.07),
    0 30px 80px rgba(0,0,0,0.7),
    0 10px 30px rgba(0,0,0,0.5);
}

.canvas-alpha-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 4;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(8, 8, 12, 0.86);
  border: 1px solid var(--rule-md);
  color: var(--paper-soft);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
  backdrop-filter: blur(8px);
}

/* ── Canvas-overlay coach prompt ─────────────────────────────────────
   A floating banner anchored to the top of the canvas viewport. Tools
   that need a user action (Pickup marquee, etc.) put their instruction
   here so the user sees it WHERE THEY'RE WORKING, not in the sidebar. */
.canvas-prompt {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translate(-50%, -12px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 16px;
  background: rgba(10, 10, 14, 0.92);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--paper);
  letter-spacing: -0.005em;
  opacity: 0;
  pointer-events: none;
  transition: transform 240ms var(--ease), opacity 200ms var(--ease);
  max-width: min(560px, calc(100% - 60px));
}
.canvas-prompt.canvas-prompt-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  /* Container stays pointer-events: none even when visible so it doesn't
     intercept marquee drags that start under it. Only the action button
     and dismiss × override to accept clicks. */
}
.canvas-prompt-action,
.canvas-prompt-dismiss { pointer-events: auto; }
.canvas-prompt[data-tone="success"] { border-color: rgba(74, 222, 128, 0.45); }
.canvas-prompt[data-tone="info"]    { border-color: var(--rule-strong); }
.canvas-prompt[data-tone="action"]  { border-color: var(--signal); }

/* Animated dithered icon — a tiny 3×3 pixel grid that breathes. The icon
   color tracks the tone variant. */
.canvas-prompt-icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.canvas-prompt-icon::before,
.canvas-prompt-icon::after {
  content: '';
  position: absolute;
  inset: 0;
}
.canvas-prompt[data-icon="pickup"] .canvas-prompt-icon {
  background:
    linear-gradient(currentColor, currentColor) 0 0/3px 3px no-repeat,
    linear-gradient(currentColor, currentColor) 6px 0/3px 3px no-repeat,
    linear-gradient(currentColor, currentColor) 12px 0/3px 3px no-repeat,
    linear-gradient(currentColor, currentColor) 0 6px/3px 3px no-repeat,
    linear-gradient(currentColor, currentColor) 12px 6px/3px 3px no-repeat,
    linear-gradient(currentColor, currentColor) 0 12px/3px 3px no-repeat,
    linear-gradient(currentColor, currentColor) 6px 12px/3px 3px no-repeat,
    linear-gradient(currentColor, currentColor) 12px 12px/3px 3px no-repeat;
  color: var(--signal);
  animation: prompt-pickup-pulse 1.4s steps(4) infinite;
}
.canvas-prompt[data-icon="check"] .canvas-prompt-icon {
  background:
    linear-gradient(currentColor, currentColor) 0 6px/3px 3px no-repeat,
    linear-gradient(currentColor, currentColor) 3px 9px/3px 3px no-repeat,
    linear-gradient(currentColor, currentColor) 6px 6px/3px 3px no-repeat,
    linear-gradient(currentColor, currentColor) 9px 3px/3px 3px no-repeat,
    linear-gradient(currentColor, currentColor) 12px 0/3px 3px no-repeat;
  color: var(--ok);
}
@keyframes prompt-pickup-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(0.92); opacity: 0.55; }
}

.canvas-prompt-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.canvas-prompt-action {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 6px 12px;
  background: var(--paper);
  color: var(--ink-000);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  margin-left: 4px;
  transition: background var(--t-fast), transform var(--t-fast);
}
.canvas-prompt-action:hover { background: #fff; }
.canvas-prompt-action:active { transform: translateY(1px); }

.canvas-prompt-dismiss {
  background: transparent;
  border: none;
  color: var(--paper-muted);
  font-size: 18px;
  line-height: 1;
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  margin-left: 2px;
  transition: color var(--t-fast), background var(--t-fast);
}
.canvas-prompt-dismiss:hover { color: var(--paper); background: rgba(255,255,255,0.06); }
.canvas-alpha-badge.hidden { display: none; }

/* ── 08 · STATUS BAR — removed in favor of a quieter UI ─────────────── */
.canvas-statusbar { display: none; }

/* ── 09 · SIDEBAR + SECTIONS ─────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  border-left: 1px solid var(--rule);
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(8, 8, 10, 0.78);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  min-height: 0;
  position: relative;
}

.sidebar-section {
  /* Bottom padding lives in .sidebar-section-inner so it collapses with the
     body when the section is folded. Section itself only owns the top inset
     and side padding so the section header always has clean breathing room. */
  padding: 14px 22px 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.sidebar-section.collapsed {
  padding-top: 10px;
}

/* Section header: name + optional dice button + chevron toggle */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0; /* gap to body lives on .sidebar-section-inner padding-top */
  gap: 10px;
}

.sidebar-section h2 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  text-transform: none;
}
.sidebar-section.collapsed h2 {
  color: var(--paper-muted);
}

.sidebar-hint {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--paper-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}

.sub-controls { margin-top: 10px; }

/* Collapsible sections ──
   Structure:  .sidebar-section
                 ├─ .section-header
                 └─ .sidebar-section-body  (grid container, animates 1fr↔0fr)
                      └─ .sidebar-section-inner  (single grid child)

   The inner child owns all visible padding-top/bottom; when the body
   collapses, that padding goes with it so collapsed sections shrink to
   just the header. Without the inner wrapper, multiple children would
   spill into implicit auto-rows that don't collapse. */
/* Section fold motion ──
   A snappy custom easing (slight overshoot on expand) on grid height,
   combined with parallel opacity + translateY on the inner content so
   the fold feels like the content is being PUSHED up/down by the chevron,
   not a generic CSS slide. Stepped easing was the wrong move (made it
   laggy). This curve has flair. */
.section-toggle {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--paper-muted);
  margin-left: 8px;
  display: inline-block;
  transition: transform 260ms cubic-bezier(0.34, 1.3, 0.32, 1), color 120ms var(--ease);
  transform-origin: center 55%;
  user-select: none;
  line-height: 1;
}
.sidebar-section .section-header { padding: 4px 0; }
.sidebar-section .section-header:hover .section-toggle { color: var(--tab-signal); }
.sidebar-section.collapsed .section-toggle { transform: rotate(-90deg); color: var(--tab-signal); }

.sidebar-section-body {
  display: grid;
  grid-template-rows: 1fr;
  /* Spring expand; collapse gets a tight decelerate so content doesn't linger. */
  transition: grid-template-rows 320ms var(--ease-spring);
  overflow: hidden;
}
.sidebar-section.collapsed .sidebar-section-body {
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms cubic-bezier(0.55, 0, 0.25, 1);
}
.sidebar-section-body > .sidebar-section-inner {
  min-height: 0;
  overflow: hidden;
  padding-top: 12px;
  padding-bottom: 18px;
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 260ms var(--ease-spring) 40ms,
    transform 320ms var(--ease-spring),
    filter 220ms ease-out;
}
.sidebar-section.collapsed .sidebar-section-body > .sidebar-section-inner {
  opacity: 0;
  transform: translateY(-10px);
  filter: blur(2px);
  pointer-events: none;
  transition:
    opacity 160ms ease-in,
    transform 180ms cubic-bezier(0.55, 0, 0.25, 1),
    filter 160ms ease-in;
}

/* Algorithm search input — sits above the category list */
.algo-search-wrap {
  position: relative;
  margin: 0 0 12px;
}
.algo-search-glyph {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--paper-muted);
  font-size: 13px;
  pointer-events: none;
  font-family: var(--font-mono);
}
.algo-search-input {
  width: 100%;
  padding: 9px 12px 9px 32px;
  background: var(--ink-000);
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  outline: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.algo-search-input::placeholder {
  color: var(--paper-muted);
  letter-spacing: 0.08em;
}
.algo-search-input:focus {
  border-color: var(--tab-signal);
  background: var(--ink-100);
  box-shadow: 0 0 0 1px var(--tab-signal);
}
.algo-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 12px; height: 12px;
  background: var(--paper-muted);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2L10 10M10 2L2 10' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
  cursor: pointer;
}

/* Bayer-dither ripple overlay — a snapshot of the live canvas, dithered
   to 1-bit Bayer, revealed via an expanding clip-path so it reads as the
   algorithm sweeping over the image. JS positions it to match the live
   canvas's transform; the CSS handles the expansion + fade tail. */
.bayer-ripple-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 4;
  clip-path: circle(0% at 50% 50%);
  opacity: 1;
  mix-blend-mode: screen;
  filter: contrast(1.06);
  image-rendering: pixelated;
  transition:
    clip-path 720ms cubic-bezier(0.16, 0.84, 0.20, 1.00),
    opacity 320ms ease-out;
}
.bayer-ripple-open { clip-path: circle(140% at 50% 50%); }
.bayer-ripple-fade { opacity: 0; }

/* ── 10 · FORM CONTROLS ──────────────────────────────────────────────── */
.param-group { margin-bottom: 14px; }
.param-group:last-child { margin-bottom: 0; }

.param-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--paper-dim);
  margin-bottom: 6px;
  text-transform: none;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Range input — flat, technical, with hi-vis thumb */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 3px;
  background: var(--ink-200);
  border-radius: 1px;
  outline: none;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.4);
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(to right,
    var(--tab-signal) 0%, var(--tab-signal) var(--p, 50%),
    var(--ink-200) var(--p, 50%), var(--ink-200) 100%);
  border-radius: 1px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  border-radius: 0;
  background: var(--paper);
  cursor: pointer;
  border: 1px solid var(--ink-000);
  box-shadow: 0 0 0 1px var(--tab-signal), 0 1px 4px rgba(0,0,0,0.6);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
input[type="range"]::-webkit-slider-thumb:hover {
  background: var(--tab-signal);
  box-shadow: 0 0 0 1px var(--tab-signal), 0 0 12px var(--tab-signal-glow), 0 1px 4px rgba(0,0,0,0.6);
  transform: scale(1.15);
}
input[type="range"]:active::-webkit-slider-thumb {
  background: var(--tab-signal);
  box-shadow: 0 0 0 2px var(--tab-signal), 0 0 16px var(--tab-signal-glow);
}
input[type="range"]::-moz-range-track { height: 3px; background: var(--ink-200); border-radius: 1px; }
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  background: var(--paper);
  border: 1px solid var(--ink-000);
  box-shadow: 0 0 0 1px var(--tab-signal);
  cursor: pointer;
  border-radius: 0;
}

/* LCD-style readout next to slider */
.param-value {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--paper);
  min-width: 46px;
  text-align: center;
  padding: 4px 6px 3px;
  background: var(--ink-000);
  border: 1px solid var(--rule);
  border-radius: 1px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  position: relative;
  text-shadow: 0 0 8px rgba(255,255,255,0.05);
}

/* Select — instrument dial */
select {
  width: 100%;
  padding: 8px 28px 8px 10px;
  background: var(--ink-100);
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--paper-dim) 50%),
                    linear-gradient(135deg, var(--paper-dim) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
  transition: border-color var(--t-fast), background var(--t-fast);
}
select option { background: var(--ink-100); color: var(--paper); }
select:hover { border-color: var(--rule-strong); background-color: var(--ink-200); }
select:focus { border-color: var(--tab-signal); box-shadow: 0 0 0 1px var(--tab-signal); }

/* Text/number input */
input[type="text"], input[type="number"] {
  padding: 8px 10px;
  background: var(--ink-100);
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: border-color var(--t-fast);
}
input[type="text"]:focus, input[type="number"]:focus { border-color: var(--tab-signal); box-shadow: 0 0 0 1px var(--tab-signal); }

/* Utility: full-width text input (e.g. export filename) */
.text-input { width: 100%; }

/* Checkbox — square hi-vis checkmark */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 1px;
  background: var(--ink-100);
  cursor: pointer;
  position: relative;
  transition: background var(--t-fast), border-color var(--t-fast);
  flex-shrink: 0;
}
input[type="checkbox"]:checked {
  background: var(--tab-signal);
  border-color: var(--tab-signal);
  box-shadow: 0 0 8px var(--tab-signal-glow);
}
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid var(--ink-000);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:hover:not(:checked) { border-color: var(--paper-dim); }
input[type="checkbox"]:focus-visible { outline: 1px solid var(--tab-signal); outline-offset: 2px; }

/* Color picker */
.color-pair { display: flex; gap: 8px; }
input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 30px;
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
  background: var(--ink-100);
  cursor: pointer;
  padding: 2px;
  transition: border-color var(--t-fast);
}
input[type="color"]:hover { border-color: var(--tab-signal); }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 0; }

/* Palette swatches */
.palette-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
}
.palette-swatch {
  width: 24px;
  height: 24px;
  border: 1px solid var(--rule-strong);
  cursor: pointer;
  transition: transform var(--t-fast), border-color var(--t-fast), z-index 0s;
  position: relative;
}
.palette-swatch:hover {
  transform: scale(1.4);
  border-color: var(--paper);
  z-index: 2;
  box-shadow: 0 0 0 1px var(--paper), 0 4px 12px rgba(0,0,0,0.6);
}

/* Seed input */
.seed-row { display: flex; align-items: center; gap: 8px; }
.seed-input {
  width: 90px;
  padding: 7px 9px;
  background: var(--ink-000);
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  outline: none;
  -moz-appearance: textfield;
}
.seed-input::-webkit-inner-spin-button,
.seed-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.seed-input:focus { border-color: var(--tab-signal); box-shadow: 0 0 0 1px var(--tab-signal); }
.seed-input:disabled { opacity: 0.4; }

.seed-random-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--paper-dim);
  cursor: pointer;
  white-space: nowrap;
  text-transform: uppercase;
}
.seed-random-label input:checked + span { color: var(--tab-signal); }

.seed-random-btn {
  background: var(--ink-100);
  border: 1px solid var(--rule);
  color: var(--paper-dim);
  padding: 5px 10px;
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  text-transform: uppercase;
}
.seed-random-btn:hover { border-color: var(--tab-signal); color: var(--tab-signal); }
.seed-random-btn:active { transform: translateY(1px); }

/* ── 11 · TONE LOCK CHIPS ────────────────────────────────────────────── */
.tone-lock-group { display: flex; gap: 6px; flex-wrap: wrap; }
.tone-lock-label { cursor: pointer; display: flex; align-items: center; }
.tone-lock-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.tone-lock-chip {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
  border: 1px solid var(--rule-md);
  background: var(--ink-100);
  color: var(--paper-dim);
  transition: all var(--t-fast);
  user-select: none;
}
.tone-lock-chip:hover { border-color: var(--rule-strong); color: var(--paper); }
.tone-lock-label input:checked + .tone-lock-chip {
  background: var(--tab-signal);
  border-color: var(--tab-signal);
  color: var(--ink-000);
  box-shadow: 0 0 12px var(--tab-signal-glow);
}
.tone-lock-label input:checked + .tone-lock-chip.shadows    { background: #404048; border-color: #6A6A78; color: var(--paper); }
.tone-lock-label input:checked + .tone-lock-chip.midtones   { background: #6A6A78; border-color: #9A9AA8; color: #fff; }
.tone-lock-label input:checked + .tone-lock-chip.highlights { background: var(--paper-soft); border-color: var(--paper); color: var(--ink-000); }

/* ── 12 · ALGORITHM LIST + CATEGORIES ────────────────────────────────── */
.algo-category { margin-bottom: 4px; }
.algo-category-header {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--paper-muted);
  padding: 12px 0 6px;
  margin-top: 4px;
  border-top: 1px solid var(--rule);
}
.algo-category:first-child .algo-category-header { border-top: none; margin-top: 0; }
.algorithm-list, .grain-type-list { display: flex; flex-direction: column; gap: 1px; }

.algo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: var(--r-1);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
  user-select: none;
  border: 1px solid transparent;
  background: transparent;
}
.algo-item:hover { background: var(--ink-200); border-color: var(--rule); }
.algo-item.selected {
  background: var(--tab-signal-tint);
  border-color: var(--tab-signal);
  box-shadow: inset 0 0 0 1px var(--tab-signal-tint);
}

.algo-checkbox {
  width: 14px;
  height: 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 1px;
  background: var(--ink-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--t-fast);
}
.algo-item.selected .algo-checkbox {
  border-color: var(--tab-signal);
  background: var(--tab-signal);
  box-shadow: 0 0 8px var(--tab-signal-glow);
}
.algo-checkbox svg { opacity: 0; width: 10px; height: 10px; stroke: var(--ink-000); stroke-width: 2.5; transition: opacity var(--t-fast); }
.algo-item.selected .algo-checkbox svg { opacity: 1; }

.algo-name {
  font-family: var(--font-sans);
  font-size: 12px;
  flex: 1;
  color: var(--paper);
  letter-spacing: 0.01em;
}

.algo-order {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  color: var(--tab-signal);
  background: var(--ink-000);
  border: 1px solid var(--tab-signal);
  border-radius: 1px;
  padding: 2px 5px;
  letter-spacing: 0.08em;
  display: none;
}
.algo-item.selected .algo-order { display: inline; }
.algo-drag {
  color: var(--paper-muted);
  cursor: grab;
  display: none;
  font-size: 11px;
  padding: 0 2px;
}
.algo-item.selected .algo-drag { display: block; }

/* ── 13 · PARAM CONTAINER (dynamic algorithm params) ─────────────────── */
.params-container { background: var(--ink-000); }

.param-section {
  padding: 16px 18px 18px;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(255,94,26,0.025) 0%, rgba(255,94,26,0) 60%);
  position: relative;
}
body.tab-grain .param-section { background: linear-gradient(180deg, rgba(232,67,147,0.025) 0%, rgba(232,67,147,0) 60%); }
body.tab-paintstroke .param-section { background: linear-gradient(180deg, rgba(109,237,240,0.025) 0%, rgba(109,237,240,0) 60%); }

.param-section::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--tab-signal);
  opacity: 0.4;
}

.param-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.param-section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--paper);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.param-section-actions { display: flex; gap: 4px; }

/* Inline margin fixes — moved out of HTML */
.btn-extract-ref { margin-top: 4px; }
#stroke-count    { margin-left: 8px; }
.param-section-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--paper-muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  padding: 4px 8px;
  border-radius: var(--r-1);
  text-transform: uppercase;
}
.param-section-btn:hover { color: var(--tab-signal); border-color: var(--tab-signal); background: var(--tab-signal-tint); }

.param-section-divider {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.20em;
  color: var(--paper-muted);
  border-top: 1px solid var(--rule);
  margin: 14px 0 8px;
  padding-top: 10px;
  text-transform: uppercase;
}

.param-hint, .param-hint-inline {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-style: normal;
  color: var(--tab-signal);
  font-weight: 500;
  letter-spacing: 0.06em;
}
.param-hint-inline { margin-left: 4px; }

.param-help {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--paper-muted);
  margin-top: 4px;
  line-height: 1.5;
}

.param-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--paper-dim);
  cursor: pointer;
  margin: 6px 0 0;
  text-transform: none;
}
.param-check:hover { color: var(--paper); }

.param-note {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 500;
  color: var(--tab-signal);
  letter-spacing: 0.08em;
  opacity: 0.9;
  margin-left: 4px;
}

/* ── 14 · PAINT TOOLS, BRUSH LIBRARY, CUSTOM BRUSHES ─────────────────── */
.paint-tool-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.paint-tool-btn {
  padding: 11px 4px;
  background: var(--ink-100);
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--paper-dim);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-transform: none;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  text-align: center;
}
.paint-tool-btn:hover {
  background: var(--ink-200);
  color: var(--paper);
  border-color: var(--rule-strong);
}
.paint-tool-btn:active { transform: translateY(1px); }
.paint-tool-btn.selected {
  background: var(--tab-signal);
  color: var(--ink-000);
  border-color: var(--tab-signal);
  box-shadow: 0 0 14px var(--tab-signal-glow);
}

/* ── Pickup tool source card ─────────────────────────────────────────
   Sits at the top of the Pickup tool options. Shows the captured stamp
   thumbnail, the dimensions, and a prominent Re-sample CTA so the user
   never has to hunt for it. */
.pickup-source {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--ink-100);
  border: 1px solid var(--rule);
  border-radius: var(--r-4);
  margin-bottom: 16px;
  position: relative;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.pickup-source-ready { border-color: rgba(109, 237, 240, 0.45); }
.pickup-source-empty { border-color: var(--rule-md); border-style: dashed; }

.pickup-source-thumb {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-000);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  overflow: hidden;
  flex-shrink: 0;
}
.pickup-source-thumb canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}
.pickup-source-thumb-empty {
  background-image:
    linear-gradient(45deg, var(--rule) 25%, transparent 25%),
    linear-gradient(-45deg, var(--rule) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--rule) 75%),
    linear-gradient(-45deg, transparent 75%, var(--rule) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}

.pickup-source-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pickup-source-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--paper-dim);
  letter-spacing: -0.005em;
  text-transform: none;
}
.pickup-source-dims {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.pickup-source-hint {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--paper-muted);
  letter-spacing: -0.005em;
}
.pickup-source-x { color: var(--paper-muted); }
.pickup-source-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan-glow);
  animation: status-pulse 1800ms ease-in-out infinite;
}
@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.pickup-source-resample {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 7px 12px;
  border: 1px solid var(--tab-signal);
  background: var(--tab-signal-tint);
  color: var(--tab-signal);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.pickup-source-resample:hover {
  background: var(--tab-signal);
  color: var(--ink-000);
}
.pickup-source-resample:active { transform: translateY(1px); }
.pickup-source-empty .pickup-source-resample {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--ink-000);
}
.pickup-source-empty .pickup-source-resample:hover { background: #fff; }

/* Pickup presets */
.pickup-preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 4px;
}
.pickup-preset-btn {
  padding: 7px 4px;
  background: var(--ink-100);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  color: var(--paper-dim);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
  cursor: pointer;
  transition: all var(--t-fast);
}
.pickup-preset-btn:hover {
  background: var(--tab-signal-tint);
  color: var(--tab-signal);
  border-color: var(--tab-signal);
}
.pickup-preset-btn:active { transform: translateY(1px); }

/* Brush preview row */
.brush-preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
#brush-preview {
  width: 48px;
  height: 48px;
  border: 1px solid var(--rule-md);
  border-radius: var(--r-1);
  background: var(--ink-000);
  image-rendering: pixelated;
}

.brush-library-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.brush-thumb {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--rule);
  border-radius: 1px;
  background-size: cover;
  background-position: center;
  background-color: var(--ink-100);
  cursor: pointer;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.brush-thumb:hover { border-color: var(--rule-strong); transform: translateY(-1px); }
.brush-thumb.selected {
  border-color: var(--tab-signal);
  box-shadow: 0 0 0 1px var(--tab-signal), 0 0 16px var(--tab-signal-glow);
}

/* Brush cursor (over the canvas) */
.brush-cursor {
  position: fixed;
  pointer-events: none;
  z-index: 100;
  display: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
.brush-cursor img {
  width: 100%; height: 100%;
  display: block;
  image-rendering: pixelated;
}
.brush-outline {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.92);
  box-sizing: border-box;
}

/* Custom brushes panel */
.cb-panel {
  background: var(--ink-100);
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
  padding: 10px !important;
  margin-top: 4px;
}
.cb-master { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cb-master-label {
  color: var(--tab-signal);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 0 6px !important;
}
.cb-master-hint {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--paper-muted);
  margin-left: auto;
  letter-spacing: 0.08em;
}
.cb-body { margin-top: 10px; transition: opacity 150ms; }
.cb-body.cb-disabled { pointer-events: none; }
.cb-body.cb-disabled .cb-slot-title,
.cb-body.cb-disabled .cb-slot-desc,
.cb-body.cb-disabled .cb-slot-minis,
.cb-body.cb-disabled .cb-thresholds { opacity: 0.55; }
.cb-thresholds {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--rule);
  margin-bottom: 10px;
}
.cb-row { display: flex; flex-direction: column; gap: 2px; }
.cb-row .param-label { font-size: 9px; }
.cb-edge-row { gap: 4px; }
.cb-dim { opacity: 0.4; pointer-events: none; }
.param-group.param-cb-override { opacity: 0.55; }
.param-group.param-cb-override select { cursor: not-allowed; background: var(--ink-200); }

.cb-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cb-slot {
  background: var(--ink-050);
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cb-slot-head { display: flex; align-items: center; gap: 6px; }
.cb-slot-swatch {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
}
.cb-slot-title {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--paper);
}
.cb-slot-thumb {
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: 1px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.cb-slot-thumb:hover {
  border-color: var(--tab-signal);
  box-shadow: 0 0 0 1px var(--tab-signal), 0 0 12px var(--tab-signal-glow);
  transform: translateY(-1px);
}
.cb-slot-thumb img {
  width: 100%; height: 100%; object-fit: contain;
  display: block;
  filter: invert(1);
}
.cb-slot-empty { color: var(--paper-muted); font-size: 18px; }
.cb-slot-desc {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--paper-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.06em;
}
.cb-slot-minis { display: flex; flex-direction: column; gap: 3px; }
.cb-mini {
  display: grid;
  grid-template-columns: 54px 1fr 40px;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--paper-dim);
  cursor: pointer;
  letter-spacing: 0.04em;
}
.cb-mini > span:first-child { white-space: nowrap; }
.cb-mini input[type="range"] { height: 14px; min-width: 0; }
.cb-mini-val {
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--paper);
  font-weight: 700;
}
.cb-mini-hint {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--paper-muted);
  grid-column: 1 / -1;
  padding-left: 60px;
  letter-spacing: 0.04em;
}

/* CB picker (modal grid + draw + sample) */
.cb-modal-overlay .cb-modal { width: 780px; max-width: 96vw; }
.cb-picker-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 14px;
}
.cb-picker-tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  padding: 9px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-dim);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  border-radius: 1px 1px 0 0;
}
.cb-picker-tab:hover { background: var(--ink-200); color: var(--paper); }
.cb-picker-tab.active {
  background: var(--ink-000);
  color: var(--tab-signal);
  border-color: var(--rule);
  border-bottom-color: var(--ink-000);
  position: relative;
  top: 1px;
}
.cb-picker-body { min-height: 360px; }
.cb-picker-empty {
  color: var(--paper-muted);
  padding: 40px 12px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.cb-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}
.cb-picker-cell {
  background: var(--ink-050);
  border: 1px solid var(--rule-md);
  border-radius: var(--r-1);
  padding: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: border-color var(--t-fast), transform var(--t-fast);
  position: relative;
}
.cb-picker-cell:hover {
  border-color: var(--tab-signal);
  box-shadow: 0 0 0 1px var(--tab-signal), 0 0 12px var(--tab-signal-glow);
  transform: translateY(-1px);
}
.cb-picker-cell.selected {
  border-color: var(--tab-signal);
  box-shadow: 0 0 0 1px var(--tab-signal), inset 0 0 0 1px var(--tab-signal-tint);
}
.cb-picker-cell img { width: 64px; height: 64px; object-fit: contain; filter: invert(1); }
.cb-picker-name {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--paper-muted);
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0.06em;
  max-width: 82px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-picker-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--tab-signal);
  color: var(--ink-000);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 1px;
  letter-spacing: 0.06em;
}
.cb-picker-libcell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cb-picker-libcell.selected .cb-picker-libthumb {
  border-color: var(--tab-signal);
  box-shadow: 0 0 0 1px var(--tab-signal);
}
.cb-picker-libname {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--paper-muted);
  text-align: center;
  margin-top: 2px;
  letter-spacing: 0.06em;
  max-width: 82px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-picker-libdel {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  background: var(--ink-200);
  color: var(--paper-dim);
  font-size: 12px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}
.cb-picker-libcell:hover .cb-picker-libdel { display: flex; }
.cb-picker-libdel:hover { border-color: var(--danger); color: var(--danger); background: rgba(255,77,109,0.10); }

/* Draw/sample panes */
.cb-draw-top, .cb-sample-top { display: flex; gap: 14px; align-items: flex-start; }
.cb-draw-stage, .cb-sample-stage {
  background: var(--ink-050);
  border: 1px solid var(--rule-md);
  border-radius: var(--r-1);
  padding: 2px;
  flex-shrink: 0;
}
.cb-draw-canvas {
  display: block;
  width: 260px;
  height: 260px;
  cursor: crosshair;
  touch-action: none;
  image-rendering: pixelated;
}
.cb-draw-controls, .cb-sample-controls {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cb-draw-controls .cb-mini, .cb-sample-controls .cb-mini {
  grid-template-columns: 92px 1fr 42px;
  font-size: 10px;
}
.cb-draw-controls input[type="text"], .cb-sample-controls input[type="text"] {
  background: var(--ink-000);
  border: 1px solid var(--rule);
  border-radius: 1px;
  color: var(--paper);
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  grid-column: 2 / 4;
}
.cb-draw-vel, .cb-draw-erase-wrap { grid-template-columns: auto 1fr; }
.cb-draw-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 4px;
}
.cb-hint {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--paper-muted);
  line-height: 1.6;
  margin: 4px 0 0;
  letter-spacing: 0.04em;
}
.cb-draw-preview-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--rule);
}
.cb-draw-preview-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--paper-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.cb-draw-preview, .cb-sample-preview {
  width: 96px;
  height: 96px;
  border: 1px solid var(--rule-md);
  border-radius: var(--r-1);
  image-rendering: pixelated;
}
.cb-sample-stage {
  position: relative;
  overflow: hidden;
}
.cb-sample-stage canvas {
  display: block;
  position: absolute;
  top: 2px; left: 2px;
  image-rendering: pixelated;
  max-width: calc(100% - 4px);
}
.cb-sample-canvas { z-index: 0; }
.cb-sample-overlay { z-index: 1; touch-action: none; }

/* ── 15 · MODALS ─────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 8, 0.70);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  animation: modalFadeIn 180ms var(--ease);
}
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-overlay.hidden { display: none; }

.modal {
  background: var(--ink-100);
  border: 1px solid var(--rule-md);
  border-radius: var(--r-2);
  width: 460px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--sh-3), inset 0 1px 0 rgba(255,255,255,0.04);
  animation: modalSlideIn 220ms var(--ease);
  position: relative;
}
.modal.modal-wide { width: 760px; }
.modal::before, .modal::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--paper-muted);
  pointer-events: none;
  opacity: 0.5;
}
.modal::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.modal::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--rule);
}
.modal-header h2 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--paper);
}
.modal-close {
  background: transparent;
  border: 1px solid transparent;
  color: var(--paper-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 8px;
  line-height: 1;
  border-radius: 1px;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.modal-close:hover { color: var(--signal); border-color: var(--signal); background: var(--signal-tint); }

.modal-body { padding: 16px 22px; }
.modal-layout { display: flex; gap: 0; min-height: 320px; }

.export-preview-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--ink-000);
  border-right: 1px solid var(--rule);
  position: relative;
  min-width: 0;
  padding: 20px;
}
.export-preview-pane canvas {
  max-width: 100%;
  max-height: 360px;
  image-rendering: pixelated;
  border-radius: 1px;
  box-shadow: 0 0 0 1px var(--rule-md), 0 16px 40px rgba(0,0,0,0.6);
}
.export-preview-info {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-muted);
  background: rgba(10,10,10,0.85);
  padding: 4px 10px;
  border-radius: 1px;
  white-space: nowrap;
  border: 1px solid var(--rule);
}
.export-settings-pane {
  width: 320px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 18px 22px;
  background: var(--ink-050);
}

.modal-section { margin-bottom: 18px; }
.modal-section:last-child { margin-bottom: 0; }
.modal-section h3 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--paper);
  margin-bottom: 10px;
}
.modal-hint {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--paper-muted);
  margin-bottom: 10px;
  line-height: 1.5;
}
.modal-dim-readout {
  margin-top: 10px;
  margin-bottom: 0;
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

.export-scale-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.export-scale-btn {
  background: var(--ink-000);
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  padding: 12px 8px;
  cursor: pointer;
  transition: all var(--t-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  letter-spacing: 0.06em;
}
.export-scale-btn:hover {
  border-color: var(--rule-strong);
  background: var(--ink-200);
}
.export-scale-btn.selected {
  border-color: var(--signal);
  background: var(--signal-tint);
  color: var(--signal);
  box-shadow: 0 0 0 1px var(--signal), inset 0 0 12px var(--signal-tint);
}
.export-scale-btn .scale-sub {
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-muted);
}
.export-scale-btn.selected .scale-sub { color: var(--signal-bright); }
.export-scale-btn.disabled { opacity: 0.3; pointer-events: none; }

.export-upscale-mode {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--ink-100);
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
}

.export-progress-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5,5,5,0.90);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 10;
  border-radius: var(--r-2);
}
.export-progress-overlay .processing-spinner { width: 36px; height: 36px; }
.export-progress-text {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--paper);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.export-progress-detail {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--paper-muted);
  letter-spacing: 0.08em;
}

.export-format-row { display: flex; gap: 18px; }
.export-format-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--paper);
  cursor: pointer;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--rule);
  background: var(--ink-050);
}
.export-file-estimate {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--paper-muted);
  margin-right: auto;
  letter-spacing: 0.10em;
}
.modal-footer .btn-primary { padding: 9px 26px; }

input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: var(--ink-100);
  cursor: pointer;
  position: relative;
  transition: border-color var(--t-fast);
  flex-shrink: 0;
}
input[type="radio"]:checked { border-color: var(--signal); }
input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 6px; height: 6px;
  background: var(--signal);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--signal-glow);
}

/* Brush maker modal */
.modal-panel {
  background: var(--ink-100);
  border: 1px solid var(--rule-md);
  border-radius: var(--r-2);
  padding: 26px;
  width: 360px;
  max-width: 90vw;
  box-shadow: var(--sh-3);
  animation: modalSlideIn 220ms var(--ease);
  position: relative;
}
.modal-panel::before, .modal-panel::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--paper-muted);
  pointer-events: none;
  opacity: 0.5;
}
.modal-panel::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.modal-panel::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.modal-panel-wide { width: 680px; max-width: 95vw; }
.modal-panel h3 {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
}

.brush-maker-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  margin-bottom: 20px;
}
.brush-maker-left, .brush-maker-right { display: flex; flex-direction: column; gap: 14px; }
.brush-test-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.brush-test-pad {
  position: relative;
  border-radius: var(--r-1);
  overflow: hidden;
  border: 1px solid var(--rule-md);
}
.brush-test-pad canvas { display: block; width: 100%; height: auto; image-rendering: auto; }
.brush-test-label {
  position: absolute;
  top: 6px; right: 8px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  pointer-events: none;
  font-weight: 600;
}
.brush-test-light .brush-test-label {
  color: rgba(0,0,0,0.5);
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
}
.brush-import-preview {
  background:
    repeating-conic-gradient(rgba(255,255,255,0.04) 0% 25%, transparent 0% 50%) 0 0 / 12px 12px,
    var(--ink-050);
  border-radius: var(--r-1);
  border: 1px solid var(--rule-md);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin-bottom: 4px;
}
#brush-maker-canvas { display: block; border-radius: 1px; image-rendering: pixelated; }
#brush-import-canvas { width: 128px; height: 128px; image-rendering: pixelated; }
.brush-import-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.brush-import-controls label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.brush-import-controls input[type="range"] { flex: 1; }
.brush-import-controls span {
  width: 30px;
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--paper);
  font-weight: 700;
}
.brush-import-check { margin-top: 4px; }
.brush-import-check input[type="checkbox"], .param-check input[type="checkbox"] { accent-color: var(--signal); }
.brush-import-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.modal-panel .btn-secondary { font-size: 11px; padding: 9px 18px; }
.modal-panel .btn-primary { font-size: 11px; padding: 9px 18px; }

/* ── 16 · MISC (rules, dual range, advanced, recon) ──────────────────── */

/* If/Then rules panel */
.rules-panel {
  padding: 10px;
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
  background: var(--ink-100);
}
.rules-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.rules-add {
  background: var(--tab-signal);
  color: var(--ink-000);
  border: none;
  padding: 5px 11px;
  border-radius: 1px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  transition: filter var(--t-fast);
}
.rules-add:hover { filter: brightness(1.1); }
.rules-empty {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--paper-muted);
  padding: 10px 4px;
  letter-spacing: 0.06em;
}
.rules-list { display: flex; flex-direction: column; gap: 6px; }
.rule-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  background: var(--ink-050);
  border: 1px solid var(--rule);
  border-radius: 1px;
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
}
.rule-row select {
  background: var(--ink-100);
  color: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 1px;
  padding: 3px 6px;
  font-size: 10px;
  cursor: pointer;
}
.rule-row .rule-arrow { color: var(--tab-signal); font-weight: 700; }
.rule-row .rule-kw {
  opacity: 0.5;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 0 2px;
}
.rule-row .rule-state, .rule-row .rule-modifier { min-width: 88px; }
.rule-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--paper-dim);
}
.rule-mini input[type=range] { width: 60px; }
.rule-mini-val {
  font-variant-numeric: tabular-nums;
  color: var(--paper);
  min-width: 22px;
  text-align: right;
}
.rule-color {
  width: 22px; height: 22px;
  border: 1px solid var(--rule);
  border-radius: 1px;
  cursor: pointer;
  padding: 0;
  background: none;
}
.rule-enable input { cursor: pointer; }
.rule-delete {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--paper-dim);
  width: 22px; height: 22px;
  line-height: 1;
  padding: 0;
  border-radius: 1px;
  cursor: pointer;
  font-size: 14px;
}
.rule-delete:hover { border-color: var(--danger); color: var(--danger); }

/* Dual range slider */
.dual-range {
  position: relative;
  height: 30px;
  display: flex;
  align-items: center;
  margin: 4px 0;
}
.dual-range-track {
  position: absolute;
  left: 0; right: 0;
  height: 6px;
  background: linear-gradient(to right, #000, var(--paper));
  border-radius: 1px;
  border: 1px solid var(--rule);
  overflow: hidden;
}
.dual-range-fill {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--tab-signal-tint);
  border-left: 1px solid var(--tab-signal);
  border-right: 1px solid var(--tab-signal);
}
.dual-range input[type="range"] {
  position: absolute;
  width: 100%;
  height: 6px;
  background: transparent;
  pointer-events: none;
  margin: 0;
}
.dual-range input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 20px;
  border-radius: 1px;
  background: var(--paper);
  cursor: pointer;
  border: 1px solid var(--ink-000);
  box-shadow: 0 0 0 1px var(--tab-signal);
  position: relative;
  z-index: 2;
}
.dual-range input[type="range"]:active::-webkit-slider-thumb { background: var(--tab-signal); }
.dual-range-labels { display: flex; justify-content: space-between; margin-top: 4px; }
.dual-range-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--paper-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

/* Advanced toggle */
.btn-advanced-toggle {
  background: var(--ink-100);
  border: 1px solid var(--rule);
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 10px;
  border-radius: var(--r-1);
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.btn-advanced-toggle:hover {
  color: var(--tab-signal);
  border-color: var(--tab-signal);
  background: var(--tab-signal-tint);
}
.advanced-arrow {
  display: inline-block;
  width: 0; height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent currentColor;
  transition: transform 150ms var(--ease);
  flex-shrink: 0;
}
.advanced-arrow.open { transform: rotate(90deg); }
.advanced-controls {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--tab-signal-tint);
  border-radius: var(--r-1);
  border: 1px solid var(--rule);
}
.tone-response-label { margin-bottom: 3px; }

/* Recon (reconstructive algorithm scaffolds) */
.recon-step-group, .recon-layer-panel {
  background: var(--ink-100);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--ok);
  border-radius: var(--r-1);
  padding: 10px;
}
.recon-step-head, .recon-layer-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.recon-step-head .param-label { margin: 0; }
.recon-step-current, .recon-layer-head strong {
  font-family: var(--font-mono);
  color: var(--paper);
  font-size: 11px;
  font-weight: 700;
  text-align: right;
  letter-spacing: 0.06em;
}
.recon-step-ticks {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-top: 7px;
}
.recon-step-ticks span {
  height: 4px;
  border-radius: 0;
  background: var(--rule-md);
  text-indent: -999px;
  overflow: hidden;
}
.recon-step-ticks span.active {
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok-tint);
}
.recon-layer-panel { margin-top: -2px; }
.recon-layer-kicker {
  color: var(--ok);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.recon-layer-note {
  color: var(--paper-muted);
  font-size: 10px;
  line-height: 1.4;
  margin: 0 0 8px;
}
.recon-layer-row { display: block; margin-top: 7px; }
.recon-layer-label {
  display: block;
  font-family: var(--font-mono);
  color: var(--paper-dim);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.recon-layer-divider {
  height: 1px;
  background: var(--rule);
  margin: 14px 0 10px;
  opacity: 0.6;
}
.recon-layer-subhead {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--paper-dim);
  margin-bottom: 6px;
}
.recon-layer-subnote {
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.55;
  font-size: 9.5px;
  margin-left: 4px;
}
select.recon-layer-input {
  width: 100%;
  background: var(--ink-100);
  color: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 1px;
  padding: 5px 8px;
  font-size: 10px;
}
select.recon-layer-input:focus {
  border-color: var(--tab-signal);
  outline: none;
}

/* ── 17 · ANIMATIONS / PROCESSING OVERLAY ────────────────────────────── */
.processing-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(8,8,12,0.66);
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  z-index: 12;
  pointer-events: auto;
  cursor: progress;
  animation: processing-enter 160ms var(--ease);
}
@keyframes processing-enter {
  from {
    background: rgba(8,8,12,0);
    backdrop-filter: blur(0) saturate(100%);
    -webkit-backdrop-filter: blur(0) saturate(100%);
  }
}
.processing-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid transparent;
  border-top-color: var(--signal);
  border-right-color: var(--signal-bright);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  box-shadow: 0 0 26px var(--signal-glow);
}
.processing-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--paper-dim);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
body.processing #btn-bake,
body.processing #btn-apply-algorithm {
  opacity: 0.45;
  pointer-events: none;
  filter: saturate(0.4);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Selection marquee — color fully owned here; inline style carries only
   structural attributes (display, position, pointer-events, z-index). */
#brush-marquee {
  border: 2px dashed var(--tab-signal);
  background: var(--tab-signal-tint);
}

/* ── 18 · SCROLLBARS ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--rule-md);
  border-radius: 0;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--rule-strong); background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-corner { background: transparent; }

/* ── Motion character · button "dither-flash" press feedback ─────────
   Every clickable button gets a stepped pixel-ring radiating from the
   exact click point. The ring uses currentColor so it tints to whatever
   the button is rendering — amber on Bake, cyan on Pickup, paper on
   primary, etc. Stepped animation (8 frames) keeps the cadence
   digital — no soft fade. JS sets --cx / --cy at click time. */
button {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
button::after {
  content: '';
  position: absolute;
  left: var(--cx, 50%);
  top: var(--cy, 50%);
  width: 8px;
  height: 8px;
  background:
    radial-gradient(circle,
      currentColor 0%,
      currentColor 28%,
      transparent 30%,
      transparent 50%,
      currentColor 52%,
      currentColor 58%,
      transparent 60%,
      transparent 78%,
      currentColor 80%,
      currentColor 86%,
      transparent 88%);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
button.dither-flash::after {
  animation: btn-dither-flash 280ms steps(7) forwards;
}
@keyframes btn-dither-flash {
  0%   { transform: translate(-50%, -50%) scale(0);  opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(12); opacity: 0; }
}

/* On dark buttons the ring would disappear with screen-blend — so a
   little extra emphasis for dark-backgrounded buttons via a brightness
   bump. Doesn't apply to white primary buttons (which are already light). */
.btn-secondary.dither-flash::after,
.btn-ghost.dither-flash::after,
.btn-icon.dither-flash::after,
.tab-btn.dither-flash::after,
.paint-tool-btn.dither-flash::after,
.btn-small.dither-flash::after,
.btn-dice.dither-flash::after {
  filter: brightness(1.4);
}

/* Slider thumb commit pulse — a tiny dither sparkle at the thumb's
   horizontal position when the value lands. Sits in a wrapper element
   we add via JS so it doesn't have to be added to every slider markup. */
.slider-row { position: relative; }
.slider-row .slider-pulse {
  position: absolute;
  pointer-events: none;
  top: 50%;
  left: var(--p, 50%);
  width: 6px;
  height: 6px;
  background:
    radial-gradient(circle,
      var(--tab-signal) 0%,
      var(--tab-signal) 30%,
      transparent 32%,
      transparent 52%,
      var(--tab-signal) 54%,
      var(--tab-signal) 60%,
      transparent 62%);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.9;
  mix-blend-mode: screen;
  animation: slider-pulse 320ms steps(6) forwards;
}
@keyframes slider-pulse {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(7); opacity: 0; }
}

/* ── 19 · RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .brand-wordmark { display: none; }
}
@media (max-width: 740px) {
  header { grid-template-columns: auto 1fr; gap: 12px; }
  .header-actions { display: none; }
  .tab-group { grid-column: 1 / -1; justify-self: stretch; }
}
@media (max-width: 480px) {
  .workspace { flex-direction: column; }
  .sidebar {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--rule);
    max-height: 50vh;
  }
  .cb-draw-top, .cb-sample-top { flex-direction: column; }
  .cb-slots { grid-template-columns: 1fr; }
  .drop-zone-display { font-size: 44px; }
  .drop-zone-display em { font-size: 64px; }
}