*, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
    /* Default theme inherited from REALMWALK Reality Engine — muted CRT green.
       The override blocks below match frontend/index.html theme list 1:1.
       The tools tool-specific var names are aliased off the main theme vars,
       so each override block only needs to set --green / --green-dim / --bg etc. */
    --green:      #56e87a;
    --green-dim:  #38b057;
    --green-dark: #0d2515;
    --green-faint: rgba(86,232,122,0.07);
    --amber:      #e0a050;
    --red:        #ee6060;
    --bg:         #0a120c;

    --accent:        var(--green);
    --accent-dim:    var(--green-dim);
    --surface:       color-mix(in srgb, var(--green) 4%, var(--bg));
    --surface-deep:  color-mix(in srgb, var(--bg) 92%, var(--green));
    --border:        color-mix(in srgb, var(--green) 14%, transparent);
    --border-hi:     color-mix(in srgb, var(--green) 28%, transparent);
    --muted:         color-mix(in srgb, var(--green) 50%, var(--bg));
    --text:          color-mix(in srgb, var(--green) 80%, var(--bg));
    --text-dim:      color-mix(in srgb, var(--green) 40%, var(--bg));
  }

  /* ── SITE THEME OVERRIDES (activated by html.theme-<name>) ── */
  html.theme-cybermoon { --green:#ff4f1f; --green-dim:#d8392f; --green-dark:#3a1e15; --green-faint:rgba(255,79,31,0.07); --amber:#fff200; --red:#ff3088; --bg:#1a0e08; }
  html.theme-pink   { --green:#ff9cab; --green-dim:#ff7d9a; --green-dark:#3c2731; --green-faint:rgba(255,156,171,0.07); --amber:#fff200; --red:#ff4050; --bg:#151c1c; }
  html.theme-cyan   { --green:#7ee8ff; --green-dim:#4ec0e0; --green-dark:#152d3b; --green-faint:rgba(126,232,255,0.07); --amber:#b084ff; --red:#ff4f9a; --bg:#04101e; }
  html.theme-blue   { --green:#5cb0ff; --green-dim:#3a82d6; --green-dark:#0a1830; --green-faint:rgba(92,176,255,0.07); --amber:#ffce4e; --red:#ff6366; --bg:#050b18; }
  html.theme-neon   { --green:#ff5cf0; --green-dim:#d040c8; --green-dark:#2a0c33; --green-faint:rgba(255,92,240,0.07); --amber:#5cf0ff; --red:#ffba00; --bg:#0a0510; }
  html.theme-amber  { --green:#ffb000; --green-dim:#c47a00; --green-dark:#3a2a0a; --green-faint:rgba(255,176,0,0.07);   --amber:#ff5c1a; --red:#ff3333; --bg:#0e0a04; }
  html.theme-toxic  { --green:#b8ff00; --green-dim:#88c000; --green-dark:#2a3300; --green-faint:rgba(184,255,0,0.07);   --amber:#ff8800; --red:#ff3030; --bg:#0c1003; }
  html.theme-void   { --green:#b8a8ff; --green-dim:#7d6dd6; --green-dark:#1c1b30; --green-faint:rgba(184,168,255,0.07); --amber:#ff8a5c; --red:#ff5577; --bg:#06060c; }

    html, body {
      height: 100%;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Courier New', Courier, monospace;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 48px 20px 64px;
      min-height: 100vh;
    }

    /* ── HEADER ── */
    header {
      text-align: center;
      margin-bottom: 44px;
      user-select: none;
    }

    .site-tag {
      font-size: 10px;
      letter-spacing: 4px;
      color: var(--text-dim);
      margin-bottom: 10px;
      text-transform: uppercase;
    }

    h1 {
      font-size: 26px;
      font-weight: normal;
      letter-spacing: 5px;
      color: var(--accent);
      text-shadow: 0 0 18px var(--green-faint);
    }

    .subtitle {
      font-size: 10px;
      letter-spacing: 4px;
      color: var(--muted);
      margin-top: 8px;
      text-transform: uppercase;
    }

    /* ── MAIN LAYOUT ── */
    .container {
      width: 100%;
      max-width: 680px;
    }

    /* ── FIELD LABEL ── */
    .field-label {
      display: block;
      font-size: 10px;
      letter-spacing: 3px;
      color: var(--accent);
      text-transform: uppercase;
      margin-bottom: 7px;
    }

    /* ── TEXT INPUT ── */
    .input-wrap {
      margin-bottom: 20px;
    }

    #qr-input {
      width: 100%;
      background: var(--surface);
      border: 1px solid var(--border);
      border-left: 2px solid var(--accent);
      color: var(--text);
      font-family: inherit;
      font-size: 14px;
      padding: 12px 14px;
      outline: none;
      transition: border-color 0.15s, background 0.15s;
      caret-color: var(--accent);
    }

    #qr-input:focus {
      border-color: var(--accent);
      background: var(--surface-deep);
    }

    #qr-input::placeholder {
      color: var(--text-dim);
    }

    /* ── MODE SELECT ── */
    .mode-row {
      margin-bottom: 20px;
    }

    /* ── OPTIONS ROW ── */
    .options-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 14px;
      margin-bottom: 20px;
    }
    .options-row > * { min-width: 0; }

    .options-row.two-col {
      grid-template-columns: 1fr 1fr;
    }

    .option-group {}

    /* color swatch + hex */
    .color-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--surface);
      border: 1px solid var(--border);
      padding: 7px 10px;
      cursor: pointer;
      transition: border-color 0.15s;
      height: 46px;          /* line up with selects + number inputs */
      box-sizing: border-box;
    }

    .color-wrap:hover {
      border-color: var(--border-hi);
    }

    input[type="color"] {
      width: 28px;
      height: 28px;
      border: none;
      background: none;
      padding: 0;
      cursor: pointer;
      flex-shrink: 0;
    }

    input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      width: 18px;
      height: 18px;
      min-width: 18px;
      border: 1px solid var(--border-hi);
      background: var(--surface-deep);
      cursor: pointer;
      flex-shrink: 0;
      position: relative;
      transition: border-color 0.15s, background 0.15s;
    }

    input[type="checkbox"]:hover {
      border-color: var(--accent-dim);
    }

    input[type="checkbox"]:checked {
      background: var(--accent);
      border-color: var(--accent);
    }

    input[type="checkbox"]:checked::after {
      content: '';
      position: absolute;
      inset: 3px;
      background: var(--bg);
      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }

    .hex-label {
      font-size: 12px;
      color: var(--muted);
      letter-spacing: 1px;
      flex: 1;
      min-width: 0;
    }

    /* size / direction select */
    .select-wrap {
      position: relative;
    }

    .select-wrap::after {
      content: '▾';
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--accent);
      pointer-events: none;
      font-size: 12px;
    }

    select {
      width: 100%;
      background: var(--surface);
      border: 1px solid var(--border);
      border-left: 2px solid var(--accent);
      color: var(--text);
      font-family: inherit;
      font-size: 12px;
      letter-spacing: 1px;
      padding: 10px 32px 10px 12px;
      outline: none;
      appearance: none;
      -webkit-appearance: none;
      cursor: pointer;
      transition: border-color 0.15s;
      height: 46px;
    }

    select:focus {
      border-color: var(--accent);
    }

    /* ── MODE SECTIONS (gradient/noise/tiled) ── */
    .mode-section {
      display: none;
      margin-bottom: 20px;
      border: 1px solid var(--border);
      border-left: 2px solid var(--accent-dim);
      padding: 14px;
    }

    .mode-section.active {
      display: block;
    }

    /* legacy alias used in tests */
    .gradient-section { /* preserved for selector compatibility */ }

    .mode-section-label {
      font-size: 9px;
      letter-spacing: 3px;
      color: var(--accent-dim);
      text-transform: uppercase;
      margin-bottom: 14px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border);
    }

    .mode-subhead {
      font-size: 9px;
      letter-spacing: 2px;
      color: var(--text-dim);
      text-transform: uppercase;
      margin: 14px 0 8px;
    }

    .mode-subhead:first-child {
      margin-top: 0;
    }

    .gradient-row,
    .mode-grid-3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 14px;
    }

    .mode-grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .mode-grid-4 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 10px;
    }

    /* compact number input that matches our select styling */
    input[type="number"] {
      width: 100%;
      background: var(--surface);
      border: 1px solid var(--border);
      border-left: 2px solid var(--accent);
      color: var(--text);
      font-family: inherit;
      font-size: 12px;
      letter-spacing: 1px;
      padding: 10px 12px;
      outline: none;
      height: 46px;
      box-sizing: border-box;
    }

    input[type="number"]:focus {
      border-color: var(--accent);
    }

    /* Custom number-input wrappers (v1.9 UI polish) — applied at runtime
       to every <input type="number"> on the page. Hides native spinners,
       adds matching themed minus/plus buttons either side of the input. */
    .number-input {
      display: flex;
      align-items: stretch;
      height: 46px;
      width: 100%;
    }
    .number-input input[type="number"] {
      flex: 1;
      min-width: 0;
      border-left: 1px solid var(--border);  /* the bright accent edge moves to the - button */
      border-right: 1px solid var(--border);
      text-align: center;
      -moz-appearance: textfield;
      padding: 10px 4px;
    }
    .number-input input[type="number"]::-webkit-inner-spin-button,
    .number-input input[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    .number-input .number-btn {
      width: 38px;
      flex: 0 0 38px;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--accent);
      font-family: inherit;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      transition: background 0.12s, color 0.12s;
      padding: 0;
      user-select: none;
      box-sizing: border-box;
    }
    .number-input .number-btn.minus {
      border-left: 2px solid var(--accent);
      border-right: none;
    }
    .number-input .number-btn.plus {
      border-right: 1px solid var(--border);
      border-left: none;
    }
    .number-input .number-btn:hover {
      background: var(--accent);
      color: var(--bg);
    }
    .number-input .number-btn:active {
      background: var(--accent-dim);
    }

    /* range slider */
    input[type="range"] {
      width: 100%;
      accent-color: var(--accent);
      cursor: pointer;
    }

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

    .range-row input[type="range"] { flex: 1; }

    .range-val {
      font-size: 12px;
      color: var(--muted);
      letter-spacing: 1px;
      min-width: 48px;
      text-align: right;
    }

    /* preset button chips */
    .preset-chips {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 6px;
    }

    .chip-btn {
      flex: 0 0 auto;
      background: transparent;
      border: 1px solid var(--border);
      color: var(--muted);
      font-family: inherit;
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 6px 10px;
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s;
    }

    .chip-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    /* full-width preset button (cybermoon) */
    .preset-banner-btn {
      width: 100%;
      margin-top: 14px;
      border: 1px dashed var(--accent-dim);
      color: var(--accent);
      background: transparent;
      font-family: inherit;
      font-size: 11px;
      letter-spacing: 3px;
      text-transform: uppercase;
      padding: 12px;
      cursor: pointer;
      transition: background 0.15s;
    }

    .preset-banner-btn:hover {
      background: color-mix(in srgb, var(--green) 6%, transparent);
    }

    /* small inline label above palette pickers */
    .palette-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 8px;
    }

    /* ── QR PREVIEW ── */
    .qr-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 300px;
      max-height: 70vh;
      margin-bottom: 16px;
      position: relative;
      overflow: hidden;
    }

    #qr-container {
      max-width: 100%;
      max-height: 70vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .qr-panel::before {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        color-mix(in srgb, var(--green) 2%, transparent) 3px,
        color-mix(in srgb, var(--green) 2%, transparent) 4px
      );
      pointer-events: none;
    }

    #qr-container canvas,
    #qr-container img {
      display: block;
      max-width: 100%;
      max-height: 70vh;
      width: auto;
      height: auto;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
    }

    #qr-placeholder {
      font-size: 12px;
      letter-spacing: 3px;
      color: var(--text-dim);
      text-align: center;
      z-index: 1;
    }

    /* ── BUTTONS ── */
    .btn-row {
      display: flex;
      gap: 10px;
      margin-bottom: 10px;
    }

    button {
      flex: 1;
      background: transparent;
      border: 1px solid var(--border);
      color: var(--muted);
      font-family: inherit;
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 12px 8px;
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s, background 0.15s;
    }

    button:hover:not(:disabled) {
      border-color: var(--accent);
      color: var(--accent);
    }

    button:disabled {
      opacity: 0.28;
      cursor: not-allowed;
    }

    button.btn-primary {
      border-color: var(--accent-dim);
      color: var(--accent);
    }

    button.btn-primary:hover:not(:disabled) {
      background: var(--accent);
      color: var(--bg);
      border-color: var(--accent);
    }

    /* Amber-accented REROLL banner (lives at the bottom of seeded sections) */
    button.preset-banner-btn.preset-banner-reroll {
      border-style: solid;
      border-color: var(--amber);
      color: var(--amber);
    }
    button.preset-banner-btn.preset-banner-reroll:hover {
      background: color-mix(in srgb, var(--amber) 12%, transparent);
    }

    /* v2.5: persistent shortcut-hint pill, fixed bottom-right of viewport.
       Non-interactive (pointer-events:none) so it never gets in the way. */
    .shortcut-hint {
      position: fixed;
      bottom: 10px;
      right: 12px;
      font-size: 9px;
      letter-spacing: 2px;
      color: var(--text-dim);
      background: var(--surface);
      border: 1px solid var(--border);
      padding: 6px 10px;
      z-index: 50;
      opacity: 0.6;
      pointer-events: none;
      user-select: none;
      text-transform: uppercase;
    }
    .shortcut-hint kbd {
      color: var(--accent);
      font-family: inherit;
      margin: 0 2px;
      padding: 1px 4px;
      border: 1px solid var(--border);
      background: var(--bg);
      letter-spacing: 0;
    }
    @media (max-width: 640px) { .shortcut-hint { display: none; } }

    /* v2.5: inline barcode format error message, sits under the format select */
    .barcode-format-error {
      font-size: 10px;
      letter-spacing: 2px;
      color: var(--red);
      padding: 6px 0 0 0;
      min-height: 14px;
      transition: color 0.15s;
    }
    .barcode-format-error.ok { color: var(--accent-dim); }

    /* PALETTE FROM IMAGE drop-zone (v2.1) */
    .palette-extractor {
      margin-bottom: 20px;
      border: 1px dashed var(--accent-dim);
      padding: 10px 12px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }
    .palette-extractor:hover {
      background: color-mix(in srgb, var(--accent) 6%, transparent);
      border-color: var(--accent);
    }
    .palette-extractor.dragover {
      background: color-mix(in srgb, var(--accent) 14%, transparent);
      border-color: var(--accent);
    }
    .palette-extractor .pe-icon {
      font-size: 22px;
      color: var(--accent);
      flex-shrink: 0;
    }
    .palette-extractor .pe-text {
      flex: 1;
      font-size: 11px;
      letter-spacing: 2px;
      color: var(--muted);
      text-transform: uppercase;
    }
    .palette-extractor .pe-swatches {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
    }
    .palette-extractor .pe-swatch {
      width: 22px;
      height: 22px;
      border: 1px solid var(--border);
      background: var(--surface);
    }

    /* Bright yellow-orange GENERATE banner — main call-to-action,
       lives right under the mode controls so it's adjacent to the
       knobs you just turned (not buried in the action bar).
       v2.5: position: sticky so it stays in view while scrolling long
       mode panels (noise / qr-noise). */
    button.btn-generate-banner {
      width: 100%;
      margin: 14px 0 4px 0;
      border: 2px solid #ffaa1a;
      background: color-mix(in srgb, #ffaa1a 12%, var(--bg));
      color: #ffaa1a;
      font-family: inherit;
      font-size: 14px;
      letter-spacing: 5px;
      text-transform: uppercase;
      padding: 18px;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, transform 0.05s;
      position: sticky;
      top: 8px;
      z-index: 30;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
    button.btn-generate-banner:hover:not(:disabled) {
      background: #ffaa1a;
      color: var(--bg);
    }
    button.btn-generate-banner:active:not(:disabled) {
      transform: translateY(1px);
    }
    button.btn-generate-banner:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    /* Red-accented RANDOMIZE button — universal across modes */
    button.btn-randomize {
      border-color: var(--red);
      color: var(--red);
      border-width: 1px;
      border-left-width: 2px;
      letter-spacing: 3px;
    }
    button.btn-randomize:hover:not(:disabled) {
      background: var(--red);
      color: var(--bg);
      border-color: var(--red);
    }

    /* Collapsible subsections — use <details>/<summary>.
       v1.9 UI polish: summaries now render as obvious clickable button-like
       headers with a tinted background, a chunky chevron, hover/open states,
       and a "[hidden]" hint when collapsed so it's clear there's content
       behind the click. */
    details.collapsible {
      margin: 14px 0 0 0;
    }
    details.collapsible[open] {
      margin-bottom: 0;
    }
    details.collapsible > summary {
      list-style: none;
      cursor: pointer;
      user-select: none;
      outline: none;
    }
    details.collapsible > summary::-webkit-details-marker { display: none; }
    details.collapsible > summary.mode-subhead {
      margin: 0 0 10px 0;
      padding: 12px 14px;
      font-size: 11px;
      letter-spacing: 3px;
      background: color-mix(in srgb, var(--accent) 8%, transparent);
      border: 1px solid var(--border);
      border-left: 4px solid var(--accent);
      transition: background 0.15s, color 0.15s, border-color 0.15s;
      display: flex;
      align-items: center;
      gap: 8px;
      position: relative;
    }
    details.collapsible > summary.mode-subhead::before {
      content: '▼';
      display: inline-block;
      font-size: 12px;
      color: var(--accent);
      width: 14px;
      flex-shrink: 0;
      transition: transform 0.15s;
    }
    details.collapsible:not([open]) > summary.mode-subhead {
      color: var(--text-dim);
      background: transparent;
      border-left-color: var(--accent-dim);
      margin-bottom: 0;
    }
    details.collapsible:not([open]) > summary.mode-subhead::before {
      content: '▶';
      color: var(--accent-dim);
    }
    details.collapsible:not([open]) > summary.mode-subhead::after {
      content: 'CLICK TO EXPAND';
      margin-left: auto;
      font-size: 9px;
      letter-spacing: 2px;
      color: var(--text-dim);
      opacity: 0.6;
    }
    details.collapsible > summary.mode-subhead:hover {
      background: color-mix(in srgb, var(--accent) 16%, transparent);
      color: var(--accent);
      border-color: var(--accent);
    }
    details.collapsible > summary.mode-subhead:hover::before {
      color: var(--accent);
    }
    details.collapsible:not([open]) > summary.mode-subhead:hover::after {
      color: var(--accent);
      opacity: 1;
    }

    /* ── STATUS ── */
    #status-msg {
      text-align: center;
      font-size: 10px;
      letter-spacing: 2px;
      color: transparent;
      height: 14px;
      transition: color 0.2s;
    }

    #status-msg.ok  { color: var(--accent); }
    #status-msg.err { color: var(--red); }

    /* ── FOOTER ── */
    footer {
      margin-top: 64px;
      font-size: 9px;
      letter-spacing: 3px;
      color: var(--text-dim);
      text-align: center;
      text-transform: uppercase;
      user-select: none;
    }

    /* ── BACK-LINKS ── */
    .nav-back {
      position: fixed;
      top: 12px;
      left: 16px;
      display: flex;
      gap: 14px;
      font-size: 10px;
      letter-spacing: 2px;
      z-index: 50;
    }
    .nav-back a {
      color: var(--text-dim);
      text-decoration: none;
      transition: color 0.15s;
    }
    .nav-back a:hover {
      color: var(--accent);
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 480px) {
      .options-row {
        grid-template-columns: 1fr 1fr;
      }

      .option-group:last-child {
        grid-column: 1 / -1;
      }

      .gradient-row {
        grid-template-columns: 1fr 1fr;
      }

      .gradient-row .option-group:last-child {
        grid-column: 1 / -1;
      }
    }