@property --sc {
      syntax: '<color>';
      inherits: false;
      initial-value: #4de8ff;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg:     #030609;
      --cyan:   #4de8ff;
      --orange: #ff8c2a;
      --text:   #e8f4ff;
      --muted:  #5f7e9e;
      --panel: rgba(7, 12, 20, .72);
      --panel-border: rgba(255,255,255,.08);
      --surface: rgba(255,255,255,.028);
      --surface-border: rgba(255,255,255,.05);
      --soft-text: rgba(232,244,255,.78);
      --track: rgba(11, 19, 30, .92);
      --tick: rgba(255,255,255,.06);
    }
    html, body {
      width: 100%; height: 100%;
      background: var(--bg);
      color: var(--text);
      font-family: 'Manrope', sans-serif;
      overflow: hidden;
    }

    /* ── SCAN BAR ─────────────────────────────────────────────────────── */
    #scanBar {
      position: fixed; top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(77,232,255,.55) 12%,
        rgba(255,140,42,.45) 38%,
        rgba(77,232,255,.65) 62%,
        rgba(255,140,42,.4) 85%,
        transparent 100%);
      z-index: 400; pointer-events: none;
    }

    /* ── TRON GRID LAYERS ─────────────────────────────────────────────── */
    .glayer {
      position: fixed;
      top: -30%; left: -30%; width: 160%; height: 160%;
      pointer-events: none; will-change: transform;
    }
    #gFar {
      background-image:
        linear-gradient(rgba(77,232,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(77,232,255,.022) 1px, transparent 1px);
      background-size: 22px 22px;
      z-index: 0;
    }
    #gMid {
      background-image:
        linear-gradient(rgba(77,232,255,.044) 1px, transparent 1px),
        linear-gradient(90deg, rgba(77,232,255,.044) 1px, transparent 1px);
      background-size: 88px 88px;
      z-index: 0;
    }
    #gNear {
      background-image:
        linear-gradient(rgba(77,232,255,.065) 1px, transparent 1px),
        linear-gradient(90deg, rgba(77,232,255,.065) 1px, transparent 1px);
      background-size: 264px 264px;
      z-index: 0;
    }

    /* ── THREE.JS CANVAS ──────────────────────────────────────────────── */
    #scene-canvas {
      position: fixed;
      inset: 0; width: 100%; height: 100%;
      z-index: 1;
      display: block;
    }

    /* ── NAV ──────────────────────────────────────────────────────────── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; height: 52px;
      display: flex; align-items: center;
      justify-content: space-between;
      padding: 0 clamp(16px,4vw,48px);
      backdrop-filter: blur(18px) saturate(160%);
      background: rgba(3,6,9,.58);
      border-bottom: 1px solid rgba(77,232,255,.07);
      z-index: 200;
    }
    .brand {
      display: flex; align-items: center; gap: 10px;
      font-family: 'Orbitron', sans-serif; font-weight: 700;
      font-size: 13px; letter-spacing: .06em;
      color: var(--text); text-decoration: none; line-height: 1;
    }
    .brand-sep { color: rgba(77,232,255,.35); margin: 0 2px; font-weight: 400; }
    .brand-page { color: var(--cyan); font-size: 12px; letter-spacing: .14em; }

    @keyframes wisp-rise {
      0%   { transform: translateY(0);     opacity: 0; }
      14%  { opacity: var(--peak-op, .75); }
      100% { transform: translateY(-13px); opacity: 0; }
    }
    @keyframes spark-pop {
      0%,100% { transform: scale(0) rotate(0deg);  opacity: 0; }
      40%,60% { transform: scale(1) rotate(18deg); opacity: 1; }
    }
    @keyframes body-pulse {
      0%,100% { filter: var(--glow-lo); }
      50%     { filter: var(--glow-hi); }
    }
    .brand .cup-body {
      animation: body-pulse 2.8s ease-in-out infinite;
      --glow-lo: drop-shadow(0 0 2px rgba(196,181,253,.3));
      --glow-hi: drop-shadow(0 0 14px rgba(196,181,253,.9)) drop-shadow(0 0 36px rgba(196,181,253,.18));
    }
    .brand .wisp { animation: wisp-rise var(--dur, 2.3s) ease-in infinite; }
    .brand .wisp.d2 { animation-delay: calc(var(--dur, 2.3s) * .35); }
    .brand .wisp.d3 { animation-delay: calc(var(--dur, 2.3s) * .70); }
    .brand .spark { transform-box: fill-box; transform-origin: center; animation: spark-pop 2.5s ease-in-out infinite; }
    .brand .spark.d2 { animation-delay: .85s; }
    .brand .spark.d3 { animation-delay: 1.7s; }

    .nav-links { display: flex; gap: 18px; align-items: center; }
    .nav-links a {
      color: var(--muted); text-decoration: none;
      font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
      transition: color .18s;
    }
    .nav-links a:hover { color: var(--text); }

    /* ── LAB TITLE (top-left below nav) ──────────────────────────────── */
    .lab-header {
      position: fixed;
      top: 72px; left: clamp(20px,4vw,48px);
      z-index: 10; pointer-events: none;
      max-width: 380px;
    }
    .eyebrow {
      color: var(--cyan); font-size: 9px;
      letter-spacing: .28em; text-transform: uppercase;
      margin-bottom: 10px; opacity: .75;
    }
    .lab-header h1 {
      font-family: 'Orbitron', sans-serif; font-weight: 900;
      font-size: clamp(28px, 5vw, 48px);
      line-height: .95; letter-spacing: -.01em;
      text-shadow: 0 0 60px rgba(77,232,255,.2);
    }
    .lab-header .lede {
      margin-top: 12px;
      color: var(--muted); font-size: 12px;
      line-height: 1.7; letter-spacing: .01em;
    }

    /* Loading overlay */
    #loading {
      position: fixed; inset: 0; z-index: 300;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      background: var(--bg);
      gap: 18px;
      transition: opacity .6s;
    }
    #loading.fade-out { opacity: 0; pointer-events: none; }
    .spinner {
      width: 40px; height: 40px;
      border: 2px solid rgba(77,232,255,.15);
      border-top-color: var(--cyan);
      border-radius: 50%;
      animation: spin .8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    #loading p {
      font-size: 11px; letter-spacing: .18em;
      text-transform: uppercase; color: var(--muted);
    }

    /* ── DOCK PANEL ───────────────────────────────────────────────────── */
    .dock {
      position: fixed;
      right: 24px; bottom: 24px;
      width: min(392px, calc(100vw - 40px));
      z-index: 100;
      border-radius: 26px;
      padding: 18px;
      background: var(--panel);
      border: 1px solid var(--panel-border);
      backdrop-filter: blur(22px) saturate(170%);
      /* Soft drop shadow + subtle cyan rim glow (smoother edges) */
      box-shadow:
        0 28px 72px rgba(0,0,0,.42),
        0 0 0 1px rgba(74,220,255,.06),
        0 0 28px rgba(74,220,255,.10),
        inset 0 1px 0 rgba(255,255,255,.05);
      display: grid; gap: 12px;
      overflow: visible;
      /* Simultaneous morph: contents fade and dock scales together. The dock
         keeps its own background/border/glow — no inner pill element is drawn
         on top, so only one boundary is ever visible. */
      --collapse-scale-x: 0.225;
      --collapse-scale-y: 0.10;
      transform-origin: 100% 100%;
      transform: scale(1, 1);
      transition: transform 0.45s cubic-bezier(0.34, 0, 0.22, 1);
    }
    .dock > :not(.console-row),
    .console-row > :not(.console-side-btns),
    .console-side-btns > :not(.light-btn--hide),
    .light-btn--hide .hide-label {
      transition: opacity 0.45s cubic-bezier(0.34, 0, 0.22, 1);
    }
    .dock.dock--collapsed {
      transform: scale(var(--collapse-scale-x), var(--collapse-scale-y));
    }
    .dock.dock--collapsed > :not(.console-row),
    .dock.dock--collapsed .console-row > :not(.console-side-btns),
    .dock.dock--collapsed .console-side-btns > :not(.light-btn--hide),
    .dock.dock--collapsed .light-btn--hide .hide-label {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.45s cubic-bezier(0.34, 0, 0.22, 1);
    }
    .dock.dock--collapsed .light-btn--hide .hide-pill-icon {
      opacity: 1;
      transition: opacity 0.45s cubic-bezier(0.34, 0, 0.22, 1);
    }
    /* In collapsed state the row/grid become full-bleed invisible containers
       so the hide button can stretch to fill the dock — its icon then centers
       inside the morphed 88×44 pill. The button itself draws no border or
       background; the dock’s own styling is the only visible boundary. */
    .dock.dock--collapsed .console-row {
      display: block;
      width: 100%;
      height: 100%;
    }
    .dock.dock--collapsed .console-side-btns {
      display: block;
      width: 100%;
      height: 100%;
    }
    .dock.dock--collapsed .light-btn--hide {
      position: absolute;
      inset: 0;
      width: auto;
      height: auto;
      padding: 0;
      border: none;
      background: transparent;
      box-shadow: none;
      color: #4adcff;
    }
    /* Subtle press feedback: nudge the morphed dock slightly larger when
       pressing/touching the collapsed pill. */
    .dock.dock--collapsed:active,
    .dock.dock--collapsed:focus-within {
      transform: scale(
        calc(var(--collapse-scale-x) * 1.06),
        calc(var(--collapse-scale-y) * 1.06)
      );
    }
    /* Parent dock is anisotropically scaled (~0.225 x 0.10). Counter-scale the
       icon wrapper so its local coordinate space matches the screen 1:1, then
       size the SVG in normal pixels — eye renders proportionally crisp. */
    .dock.dock--collapsed .light-btn--hide .hide-pill-icon {
      transform: scale(calc(1 / var(--collapse-scale-x)), calc(1 / var(--collapse-scale-y)));
      transform-origin: 50% 50%;
    }

    .dock-header {}
    .dock h2 {
      font-family: 'Orbitron', sans-serif; font-size: 16px;
      letter-spacing: .08em; font-weight: 700;
      color: var(--text);
    }
    .dock-sub {
      margin-top: 4px; font-size: 11px;
      color: var(--soft-text); letter-spacing: .01em;
      line-height: 1.45;
    }

    /* Color section */
    .color-section {
      padding: 12px 14px;
      border-radius: 18px;
      background: var(--surface);
      border: 1px solid var(--surface-border);
      display: grid; gap: 8px;
    }
    .section-label {
      font-size: 9px; letter-spacing: .18em;
      text-transform: uppercase; color: rgba(232,244,255,.68);
      font-weight: 600;
    }

    .exact-picker-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      align-items: start;
    }
    .picker-side {
      display: grid;
      gap: 8px;
      min-width: 0;
    }
    .side-title {
      font-size: 9px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(232,244,255,.82);
      font-weight: 700;
    }
    .picker-caption {
      font-size: 9px;
      color: rgba(232,244,255,.54);
      line-height: 1.45;
      overflow-wrap: anywhere;
    }
    .slider-stack {
      display: grid;
      gap: 10px;
    }
    .slider-row {
      display: flex;
      align-items: center;
      gap: 8px;
      --channel-rgb: 77, 232, 255;
      --channel-tint: rgba(var(--channel-rgb), .18);
      --channel-glow: rgba(var(--channel-rgb), .34);
      --channel-edge: rgba(var(--channel-rgb), .56);
    }
    .slider-row .slider-name {
      min-width: 18px;
      font-family: 'Orbitron', sans-serif;
      font-size: 10px;
      letter-spacing: .08em;
      color: rgba(232,244,255,.88);
    }
    .slider-row .slider-value {
      min-width: 22px;
      font-family: monospace;
      font-size: 10px;
      color: rgba(232,244,255,.72);
      text-align: right;
    }
    .slider-row.channel-red   { --channel-rgb: 255, 99, 99; }
    .slider-row.channel-green { --channel-rgb:  83, 219, 142; }
    .slider-row.channel-blue  { --channel-rgb:  94, 152, 255; }
    .slider-row.channel-pick  { --channel-rgb:  77, 232, 255; }
    .slider-row input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      flex: 1;
      height: 24px;
      font-size: 16px; /* prevent Safari iOS auto-zoom on focus */
      padding: 0 3px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.08);
      background-color: var(--track);
      background-image:
        linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
        var(--value-gradient, linear-gradient(90deg, var(--channel-tint), rgba(var(--channel-rgb), .02))),
        linear-gradient(90deg, transparent calc(100% - 1px), var(--tick) calc(100% - 1px));
      background-size: 100% 100%, 100% 100%, calc(100% / 16) 100%;
      background-repeat: no-repeat, no-repeat, repeat-x;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 0 0 1px rgba(255,255,255,.015);
      outline: none;
      transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }
    .slider-row input[type="range"]:hover {
      border-color: rgba(255,255,255,.14);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 4px rgba(var(--channel-rgb), .06);
    }
    .slider-row input[type="range"]:focus-visible {
      border-color: rgba(255,255,255,.18);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 4px rgba(var(--channel-rgb), .09);
    }
    .slider-row input[type="range"]::-webkit-slider-runnable-track {
      height: 18px;
      border-radius: 999px;
      background: transparent;
    }
    .slider-row input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 14px;
      height: 14px;
      margin-top: 2px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.72);
      background:
        radial-gradient(circle at 35% 35%, rgba(255,255,255,.98), rgba(247,250,255,.92) 60%, rgba(233,240,248,.88) 100%);
      box-shadow: 0 1px 6px rgba(0,0,0,.26), 0 0 0 5px rgba(var(--channel-rgb), .08);
      cursor: pointer;
      transition: transform .16s ease, box-shadow .16s ease;
    }
    .slider-row input[type="range"]:hover::-webkit-slider-thumb,
    .slider-row input[type="range"]:focus-visible::-webkit-slider-thumb {
      transform: scale(1.06);
      box-shadow: 0 2px 10px rgba(0,0,0,.28), 0 0 0 6px rgba(var(--channel-rgb), .10);
    }
    .slider-row input[type="range"]::-moz-range-track {
      height: 18px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.08);
      background-color: var(--track);
      background-image:
        linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
        var(--value-gradient, linear-gradient(90deg, var(--channel-tint), rgba(var(--channel-rgb), .02)));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    }
    .slider-row input[type="range"]::-moz-range-thumb {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.72);
      background: rgba(255,255,255,.95);
      box-shadow: 0 1px 6px rgba(0,0,0,.26), 0 0 0 5px rgba(var(--channel-rgb), .08);
      cursor: pointer;
    }
    .tail-grid {
      display: grid;
      gap: 6px;
      padding: 10px;
      border-radius: 12px;
      background: rgba(255,255,255,.025);
      border: 1px solid rgba(255,255,255,.06);
    }
    .tail-grid { grid-template-columns: repeat(4, 1fr); min-height: 82px; }
    .tail-cell {
      appearance: none;
      border: 1px solid rgba(255,255,255,.08);
      cursor: pointer;
      font-family: 'Manrope', sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .tail-cell {
      font-family: 'Orbitron', sans-serif !important;
      font-weight: 900;
      font-size: 12px;
      line-height: 1;
    }
    @media (hover: hover) and (pointer: fine) {
      .tail-cell:hover {
        transform: translateY(-1px) scale(1.02);
        box-shadow: 0 0 0 1px var(--tc-light, rgba(128,240,255,.62)), 0 6px 12px rgba(0,0,0,.18);
        filter: saturate(1.03);
      }
    }
    .tail-cell:active {
      animation: tail-cell-tap .24s ease-out;
    }
    .tail-cell.active {
      box-shadow: 0 0 0 2px var(--tc-light, rgba(128,240,255,.72)), 0 0 0 4px rgba(77,232,255,.28);
      font-size: 11px;
      letter-spacing: .01em;
    }
    .tail-cell {
      min-height: 28px;
      border-radius: 7px;
      background: var(--tc, #4de8ff);
      transition: transform .2s ease, box-shadow .22s ease, filter .22s ease;
    }
    .picker-mini-pair {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .picker-mini {
      display: grid;
      gap: 5px;
    }
    .picker-mini-label {
      font-size: 8px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(232,244,255,.54);
    }
    .picker-mini-swatch {
      height: 20px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.08);
      background: var(--sc, #4de8ff);
      transition: --sc 80ms ease-out, box-shadow .24s ease;
    }
    .dragging .picker-mini-swatch,
    .dragging .swatch-preview {
      transition: --sc 0ms, box-shadow .24s ease;
    }

    /* Channel row */
    .channel-row {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    }
    .channel-chip {
      display: flex; flex-direction: column; align-items: center; gap: 3px;
      padding: 8px 6px; border-radius: 12px;
      background: rgba(77,232,255,.04);
      border: 1px solid rgba(77,232,255,.1);
    }
    .ch-label {
      font-size: 8px; letter-spacing: .16em; text-transform: uppercase;
      color: var(--muted); font-weight: 600;
    }
    .ch-val {
      font-family: 'Orbitron', sans-serif;
      font-size: 18px; font-weight: 700;
      color: var(--text); line-height: 1;
    }

    /* Config snippet */
    .config-line {
      font-family: monospace;
      font-size: 10px; letter-spacing: .03em;
      color: rgba(232,244,255,.78);
      padding: 8px 10px;
      border-radius: 10px;
      background: rgba(255,255,255,.025);
      border: 1px solid rgba(255,255,255,.06);
      word-break: break-all;
      line-height: 1.55;
      user-select: all;
    }

    .console-row {
      display: flex;
      gap: 8px;
      align-items: stretch;
    }
    .console-config {
      /* Same visual card as .color-section */
      padding: 12px 14px;
      border-radius: 18px;
      background: var(--surface);
      border: 1px solid var(--surface-border);
      display: grid;
      gap: 8px;
      /* Fixed pixel width — avoids % flex-basis Safari bug in grid containers */
      flex: 0 0 160px;
      min-width: 0;
    }
    .console-row .config-line {
      font-size: 9px;
    }
    .console-side-btns {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 6px;
      flex: 1;
      min-width: 0;
    }
    .console-side-btns .light-btn {
      flex: unset;
      padding: 6px 4px;
      font-size: 10px;
      letter-spacing: .08em;
      min-width: 0;
      min-height: 30px;
    }

    /* "Hide UI" button — 4th cell of 2x2 lighting grid. Expanded shows label
       only (text-clean, matches siblings). Collapsed: parent dock scales to a
       small pill, button content swaps to icon-only via opacity timing. */
    .light-btn--hide {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: rgba(232,244,255,.72);
      border-color: rgba(255,255,255,.12);
      white-space: nowrap;
      position: relative;
    }
    .light-btn--hide .hide-label {
      display: inline;
      transition: opacity 0.45s cubic-bezier(0.34, 0, 0.22, 1);
    }
    .light-btn--hide .hide-pill-icon {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.45s cubic-bezier(0.34, 0, 0.22, 1);
    }
    .light-btn--hide .hide-pill-icon svg {
      width: 22px;
      height: 22px;
      stroke: #4adcff;
      stroke-width: 1.6;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 3px rgba(74,220,255,.8));
    }
    .light-btn--hide:hover {
      background: rgba(74,220,255,.08);
      color: #4adcff;
      border-color: rgba(74,220,255,.3);
    }
    /* Divider line between sections (reinstated — was orphaned before) */
    .divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    }

    /* Swatches row */
    .swatches-row {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    }
    .swatch-card {
      padding: 10px;
      border-radius: 16px;
      background: var(--surface);
      border: 1px solid var(--surface-border);
      display: grid; gap: 6px;
      transition: border-color .14s ease, box-shadow .14s ease, transform .1s ease;
    }
    .swatch-card:hover {
      border-color: rgba(77, 232, 255, .36);
      box-shadow: 0 0 0 1px rgba(77, 232, 255, .08) inset;
    }
    .swatch-card:active {
      transform: translateY(1px);
    }
    .swatch-card.copied {
      border-color: rgba(77, 232, 255, .62);
      box-shadow: 0 0 0 1px rgba(77, 232, 255, .24) inset, 0 0 14px rgba(77, 232, 255, .24);
    }
    .swatch-preview {
      width: 100%; height: 24px;
      border-radius: 10px;
      background: var(--sc, #4de8ff);
      transition: --sc 80ms ease-out, box-shadow .24s ease;
    }

    @keyframes tail-cell-tap {
      0%   { transform: scale(1); }
      45%  { transform: scale(0.96); }
      100% { transform: scale(1); }
    }
    .swatch-meta {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 6px;
      flex-wrap: nowrap;
    }
    .swatch-name {
      font-size: 9px; letter-spacing: .12em;
      text-transform: uppercase; color: rgba(232,244,255,.54);
    }
    .hex-label {
      font-family: monospace; font-size: 11px;
      color: var(--text); letter-spacing: .04em;
    }

    /* Copy button */
    .light-btn {
      flex: 1; padding: 7px 4px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      color: rgba(232,244,255,.60);
      font-size: 9px; letter-spacing: .10em;
      text-transform: uppercase; font-weight: 700;
      cursor: pointer;
      transition: background .18s, border-color .18s, color .18s;
      font-family: 'Manrope', sans-serif;
    }
    .light-btn:hover { background: rgba(255,255,255,.07); color: rgba(232,244,255,.88); }
    .light-btn.active {
      background: rgba(74,220,255,.12);
      border-color: rgba(74,220,255,.35);
      color: #4adcff;
    }
    .copy-btn {
      width: 100%; padding: 11px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      color: rgba(232,244,255,.88);
      font-size: 10px; letter-spacing: .12em;
      text-transform: uppercase; font-weight: 700;
      cursor: pointer;
      transition: background .18s ease, border-color .18s ease, transform .12s ease, color .18s ease;
      font-family: 'Manrope', sans-serif;
    }
    .copy-btn:hover {
      background: rgba(255,255,255,.05);
      border-color: rgba(255,255,255,.16);
    }
    .copy-btn:active { transform: scale(.97); }
    .copy-btn.copied {
      background: rgba(255,255,255,.08);
      color: var(--text);
    }

    /* Status bar */
    .status {
      font-size: 10px;
      color: rgba(232,244,255,.62);
      padding: 8px 10px;
      border-radius: 12px;
      background: rgba(255,255,255,.02);
      border: 1px solid rgba(255,255,255,.04);
      line-height: 1.45;
    }

    @media (max-height: 940px) {
      .dock {
        padding: 14px;
        gap: 8px;
        width: min(376px, calc(100vw - 36px));
      }
      .color-section { padding: 9px 11px; gap: 6px; }
      .tail-grid { min-height: 60px; gap: 4px; }
      .tail-cell { min-height: 22px; }
      .swatch-preview { height: 18px; }
      .slider-row { padding: 6px 8px; }
      .slider-stack { gap: 6px; }
      .console-row { gap: 8px; }
    }

    @media (max-height: 820px) {
      .dock {
        width: min(352px, calc(100vw - 28px));
        padding: 12px;
        gap: 7px;
      }
      .dock h2 { font-size: 14px; }
      .dock-sub, .picker-caption, .status, .config-line { font-size: 9px; }
      .color-section { padding: 7px 9px; gap: 5px; }
      .tail-grid { min-height: 52px; }
      .tail-cell { min-height: 20px; font-size: 10px; }
      .slider-stack { gap: 5px; }
      .slider-row { padding: 5px 7px; }
      .swatch-card { padding: 7px; }
      .dock-camera-toggle { height: 30px; font-size: 9px; }
      .dock-camera-toggle .toggle-icon { width: 18px; height: 18px; }
    }

    /* Mobile */
    @media (max-width: 680px) {
      .lab-header { display: none; }
      .nav-links { display: none; }
      .dock-header { display: none; }
      nav .brand > svg {
        width: 40px !important;
        height: 40px !important;
      }
      .dock {
        left: 10px;
        right: 10px;
        width: auto;
        bottom: 10px;
        border-radius: 22px;
        padding: 10px;
        gap: 6px;
      }
      .dock h2 { font-size: 14px; }
      .dock-sub, .picker-caption, .status, .config-line { font-size: 9px; }
      .color-section { padding: 8px 10px; gap: 6px; }
      .tail-grid { min-height: 56px; gap: 4px; }
      .tail-cell { min-height: 22px; font-size: 10px; }
      .exact-picker-grid { grid-template-columns: 1fr; }
      .tail-grid { grid-template-columns: repeat(4, 1fr); }
      .swatches-row { gap: 6px; }
      .swatch-card { padding: 7px; }
      .swatch-preview { height: 16px; }
      .copy-btn { padding: 8px 10px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .tail-cell,
      .tail-cell:hover,
      .tail-cell:active,
      .picker-mini-swatch,
      .swatch-preview {
        animation: none !important;
        transition: none !important;
        transform: none !important;
      }
    }