/* ============================================================
   Lightbox — Norvo Designs
   Chrome stays near-black and neutral. The only colour on the
   page should be the thing the user is making.
   ============================================================ */

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

:root {
  --ink-950: #060608;
  --ink-900: #0a0a0c;
  --ink-850: #0e0e11;
  --ink-800: #131317;
  --ink-750: #17171c;
  --ink-700: #1d1d23;

  --line:        rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.13);

  --text:       #e9e9ee;
  --text-dim:   #93939f;
  --text-faint: #7c7c88;

  --accent-a: #4f6bff;
  --accent-b: #a855f7;
  --accent-grad: linear-gradient(115deg, var(--accent-a), var(--accent-b));
  --focus: #7b8cff;

  --panel-w: 320px;
  --radius-ui: 10px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  color-scheme: dark;
}

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ink-950);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button, input, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

.sr-live {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
}

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  padding: 8px 14px; border-radius: 8px;
  background: var(--ink-800); color: var(--text);
  text-decoration: none; transition: top .16s ease;
}
.skip:focus { top: 8px; }

/* ============================================================
   Layout
   ============================================================ */

.app {
  display: grid;
  grid-template-columns: var(--panel-w) minmax(0, 1fr);
  height: 100%;
}

/* ============================================================
   Control panel
   ============================================================ */

.panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--ink-900);
  border-right: 1px solid var(--line);
}

.sheet-grip { display: none; }

.panel-head {
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line);
  flex: none;
}

.brand { display: flex; align-items: center; gap: 9px; }

.brand-mark {
  width: 17px; height: 17px;
  border-radius: 5px;
  background: var(--accent-grad);
  position: relative;
  flex: none;
}
.brand-mark::after {
  content: "";
  position: absolute; inset: 4px auto auto 4px;
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
}

.brand-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand-sub {
  margin: 5px 0 0 26px;
  font-size: 11.5px;
  color: var(--text-faint);
}

.panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-700) transparent;
}
.panel-scroll::-webkit-scrollbar { width: 9px; }
.panel-scroll::-webkit-scrollbar-thumb {
  background: var(--ink-700); border-radius: 9px;
  border: 3px solid var(--ink-900);
}

.panel-foot {
  flex: none;
  padding: 11px 18px 13px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.foot-link {
  color: var(--text-dim);
  font-size: 11.5px;
  text-decoration: none;
  width: fit-content;
}
.foot-link:hover { color: var(--text); }
.foot-dim { color: var(--text-faint); font-size: 11px; }

/* ---------- Presets ---------- */

/* Pinned above the scroll area — presets are the first thing you
   reach for, and they shouldn't scroll away with the sliders. */
.presets {
  flex: none;
  padding: 14px 14px 13px;
  border-bottom: 1px solid var(--line);
}
.presets-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.chip {
  border: 1px solid var(--line-strong);
  background: var(--ink-800);
  color: var(--text-dim);
  padding: 4.5px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.chip:hover { color: var(--text); border-color: rgba(255,255,255,.22); }
.chip.is-on {
  color: #fff;
  border-color: transparent;
  background: var(--accent-grad);
}

/* ---------- Control groups ---------- */

.group { border-bottom: 1px solid var(--line); }

.group-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.group-num {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  width: 12px;
}
.group-title {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
  flex: 1;
}
.group-head .chev {
  width: 13px; height: 13px;
  color: var(--text-faint);
  transition: transform .18s ease;
}
.group.is-closed .group-head .chev { transform: rotate(-90deg); }
.group.is-closed .group-body { display: none; }

.group-body { padding: 0 14px 14px; }

.row { margin-bottom: 11px; }
.row:last-child { margin-bottom: 0; }

.row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.row-label {
  font-size: 11.5px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* number box */
.num {
  width: 62px;
  flex: none;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 3px 5px 3px 7px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-align: right;
  -moz-appearance: textfield;
}
.num::-webkit-outer-spin-button,
.num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.num:hover { border-color: var(--line-strong); }
.num:focus { border-color: var(--focus); outline: none; }

.unit {
  font-size: 10.5px;
  color: var(--text-faint);
  width: 14px;
  flex: none;
  text-align: left;
}
.row-num { display: flex; align-items: center; gap: 4px; }

/* ---------- Range slider ---------- */

.rng {
  --fill: 50;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 16px;
  background: none;
  cursor: pointer;
  display: block;
}
.rng::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 3px;
  background:
    linear-gradient(90deg, var(--accent-a), var(--accent-b))
      0 / calc(var(--fill) * 1%) 100% no-repeat,
    rgba(255, 255, 255, 0.10);
}
.rng::-moz-range-track {
  height: 3px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.10);
}
.rng::-moz-range-progress {
  height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
}
.rng::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px; height: 13px;
  margin-top: -5px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  transition: transform .12s ease;
}
.rng::-moz-range-thumb {
  width: 13px; height: 13px;
  border-radius: 50%; background: #fff; border: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.rng:hover::-webkit-slider-thumb { transform: scale(1.14); }
.rng:active::-webkit-slider-thumb { transform: scale(1.14); }

/* ---------- Colour ---------- */

.row-color { display: flex; align-items: center; gap: 6px; }
.swatch {
  -webkit-appearance: none;
  appearance: none;
  width: 26px; height: 22px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
.swatch::-webkit-color-swatch-wrapper { padding: 2px; }
.swatch::-webkit-color-swatch { border: 0; border-radius: 4px; }
.swatch::-moz-color-swatch { border: 0; border-radius: 4px; }

.hex {
  width: 76px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 3px 7px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text);
}
.hex:focus { border-color: var(--focus); outline: none; }

/* ---------- Toggle ---------- */

.tgl {
  -webkit-appearance: none;
  appearance: none;
  width: 34px; height: 19px;
  border-radius: 999px;
  background: var(--ink-700);
  border: 1px solid var(--line);
  position: relative;
  cursor: pointer;
  flex: none;
  transition: background .16s ease;
}
.tgl::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #b9b9c4;
  transition: transform .16s ease, background .16s ease;
}
.tgl:checked { background: var(--accent-grad); border-color: transparent; }
.tgl:checked::after { transform: translateX(15px); background: #fff; }

/* ---------- Segmented / select ---------- */

.seg {
  display: inline-flex;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.seg-btn {
  border: 0;
  background: none;
  color: var(--text-faint);
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: color .14s ease, background .14s ease;
}
.seg-btn:hover { color: var(--text-dim); }
.seg-btn.is-on { color: #fff; background: var(--ink-700); }

.bg-modes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: 10px;
}
.bg-mode {
  border: 1px solid var(--line);
  background: var(--ink-800);
  color: var(--text-faint);
  font-size: 10.5px;
  padding: 5px 2px;
  border-radius: 7px;
  cursor: pointer;
  transition: color .14s, border-color .14s;
}
.bg-mode:hover { color: var(--text-dim); }
.bg-mode.is-on { color: #fff; border-color: rgba(255,255,255,.28); background: var(--ink-700); }

.grad-swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}
.grad-swatch {
  aspect-ratio: 1;
  border-radius: 7px;
  border: 1px solid var(--line);
  cursor: pointer;
  padding: 0;
  transition: transform .12s ease, box-shadow .12s ease;
}
.grad-swatch:hover { transform: translateY(-1px); }
.grad-swatch.is-on {
  box-shadow: 0 0 0 2px var(--ink-900), 0 0 0 3.5px var(--accent-a);
}

.file-btn {
  display: block;
  width: 100%;
  text-align: center;
  border: 1px dashed var(--line-strong);
  background: var(--ink-800);
  color: var(--text-dim);
  border-radius: 8px;
  padding: 9px;
  font-size: 11.5px;
  cursor: pointer;
}
.file-btn:hover { color: var(--text); border-color: rgba(255,255,255,.25); }
.file-input { display: none; }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: rgba(20, 20, 24, 0.72);
  color: var(--text-dim);
  padding: 6px 11px;
  font-size: 11.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.btn:hover { color: var(--text); border-color: rgba(255,255,255,.24); }
.btn .ic { width: 14px; height: 14px; flex: none; }
.btn-icon { padding: 6px; }

.btn-primary {
  border: 0;
  background: var(--accent-grad);
  color: #fff;
  font-weight: 500;
  padding: 6px 14px;
}
.btn-primary:hover { color: #fff; filter: brightness(1.09); }

.btn.is-done {
  color: #7ee0a8;
  border-color: rgba(126, 224, 168, .35);
  background: rgba(126, 224, 168, .09);
}
.btn-primary.is-done {
  background: rgba(126, 224, 168, .16);
  color: #7ee0a8;
  box-shadow: inset 0 0 0 1px rgba(126, 224, 168, .38);
}

/* ============================================================
   Stage
   ============================================================ */

.stage-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--ink-950);
}

.stage-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  pointer-events: none;
}
.stage-bar-left, .stage-bar-right {
  display: flex; gap: 6px; pointer-events: auto;
}
.stage-bar .btn { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/*  The stage is the backdrop root. Nothing above it in the tree
    may carry opacity or a filter, or backdrop-filter dies silently. */
.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  touch-action: none;

  /* ---- glass ---- */
  --blur: 18;
  --sat: 170;
  --bright: 104;
  --tint-rgb: 255, 255, 255;
  --tint-a: 0.10;
  --radius: 28;
  --bw: 1.5;
  --border-rgb: 255, 255, 255;
  --border-a: 0.38;

  /* ---- light ---- */
  --lx: 26;
  --ly: 18;
  --light-rgb: 255, 255, 255;

  /* ---- card ---- */
  --cx: 56;
  --cy: 48;
  --cw: 380;
  --ch: 250;

  /* ---- shadow stack (computed in app.js) ---- */
  --shadow-rgb: 5, 6, 15;
  --sh1x: 0;  --sh1y: 2;  --sh1b: 5;   --sh1s: -1; --sh1a: 0.26;
  --sh2x: 0;  --sh2y: 8;  --sh2b: 18;  --sh2s: -3; --sh2a: 0.18;
  --sh3x: 0;  --sh3y: 20; --sh3b: 44;  --sh3s: -6; --sh3a: 0.13;
  --sh4x: 0;  --sh4y: 40; --sh4b: 92;  --sh4s: -12; --sh4a: 0.08;

  /* ---- rims ---- */
  --rimx: 3;  --rimy: 3;  --rimb: 9;  --rims: -6; --rima: 0.55;
  --crimx: -3; --crimy: -3; --crimb: 11; --crims: -7; --crima: 0.22;
  --ambb: 44; --amba: 0.06;
  --frx: 1; --fry: 1; --fringe-a: 0;

  /* ---- specular blob ---- */
  --spec-x: 18; --spec-y: 14; --spec-size: 62; --spec-a: 0.20;

  /* ---- texture ---- */
  --grain-a: 0.14;

  /* ---- background ---- */
  --bg-solid: #0b0b12;
  --blob-1: #4f6bff;
  --blob-2: #a855f7;
  --blob-3: #22d3ee;
  --blob-4: #f472b6;
  --bg-image: none;
}

/* ---------- Background layer ---------- */

.bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--bg-solid);
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
}

.bg-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: none;
}
.stage[data-bg="image"] .bg-img { display: block; }

.blobs { position: absolute; inset: -12%; display: none; }
.stage[data-bg="blobs"] .blobs { display: block; }

.blob {
  position: absolute;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(64px);
  will-change: transform;
}
.blob-1 { left: 4%;  top: 2%;   background: var(--blob-1); animation: drift-1 27s ease-in-out infinite alternate; }
.blob-2 { right: 2%; top: 12%;  background: var(--blob-2); animation: drift-2 33s ease-in-out infinite alternate; }
.blob-3 { left: 16%; bottom: 0%; background: var(--blob-3); animation: drift-3 24s ease-in-out infinite alternate; }
.blob-4 { right: 12%; bottom: 4%; background: var(--blob-4); animation: drift-4 38s ease-in-out infinite alternate; }

@keyframes drift-1 { from { transform: translate3d(0,0,0) scale(1); }    to { transform: translate3d(38%, 26%, 0) scale(1.22); } }
@keyframes drift-2 { from { transform: translate3d(0,0,0) scale(1.12); } to { transform: translate3d(-32%, 34%, 0) scale(0.92); } }
@keyframes drift-3 { from { transform: translate3d(0,0,0) scale(0.95); } to { transform: translate3d(34%, -30%, 0) scale(1.25); } }
@keyframes drift-4 { from { transform: translate3d(0,0,0) scale(1.18); } to { transform: translate3d(-30%, -22%, 0) scale(0.96); } }

/* ---------- The glass ---------- */

.glass {
  position: absolute;
  z-index: 2;
  left:  calc(var(--cx) * 1% - var(--cw) * 0.5px);
  top:   calc(var(--cy) * 1% - var(--ch) * 0.5px);
  width:  calc(var(--cw) * 1px);
  height: calc(var(--ch) * 1px);
  border-radius: calc(var(--radius) * 1px);

  background: rgba(var(--tint-rgb), var(--tint-a));
  border: calc(var(--bw) * 1px) solid rgba(var(--border-rgb), var(--border-a));

  -webkit-backdrop-filter:
    blur(calc(var(--blur) * 1px))
    saturate(calc(var(--sat) * 1%))
    brightness(calc(var(--bright) * 1%));
  backdrop-filter:
    blur(calc(var(--blur) * 1px))
    saturate(calc(var(--sat) * 1%))
    brightness(calc(var(--bright) * 1%));

  box-shadow:
    calc(var(--sh1x) * 1px) calc(var(--sh1y) * 1px) calc(var(--sh1b) * 1px) calc(var(--sh1s) * 1px) rgba(var(--shadow-rgb), var(--sh1a)),
    calc(var(--sh2x) * 1px) calc(var(--sh2y) * 1px) calc(var(--sh2b) * 1px) calc(var(--sh2s) * 1px) rgba(var(--shadow-rgb), var(--sh2a)),
    calc(var(--sh3x) * 1px) calc(var(--sh3y) * 1px) calc(var(--sh3b) * 1px) calc(var(--sh3s) * 1px) rgba(var(--shadow-rgb), var(--sh3a)),
    calc(var(--sh4x) * 1px) calc(var(--sh4y) * 1px) calc(var(--sh4b) * 1px) calc(var(--sh4s) * 1px) rgba(var(--shadow-rgb), var(--sh4a)),
    inset calc(var(--rimx) * 1px) calc(var(--rimy) * 1px) calc(var(--rimb) * 1px) calc(var(--rims) * 1px) rgba(var(--light-rgb), var(--rima)),
    inset calc(var(--crimx) * 1px) calc(var(--crimy) * 1px) calc(var(--crimb) * 1px) calc(var(--crims) * 1px) rgba(255, 255, 255, var(--crima)),
    inset 0 0 calc(var(--ambb) * 1px) 0 rgba(var(--light-rgb), var(--amba)),
    inset calc(var(--frx) * 1px) calc(var(--fry) * 1px) 0 0 rgba(110, 220, 255, var(--fringe-a)),
    inset calc(var(--frx) * -1px) calc(var(--fry) * -1px) 0 0 rgba(255, 110, 200, var(--fringe-a));

  display: flex;
  align-items: center;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.glass.is-dragging { cursor: grabbing; }

.glass-spec {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse calc(var(--spec-size) * 1%) calc(var(--spec-size) * 1.1%)
      at calc(var(--spec-x) * 1%) calc(var(--spec-y) * 1%),
      rgba(var(--light-rgb), var(--spec-a)) 0%,
      rgba(var(--light-rgb), 0) 68%
    );
}

.glass-content {
  position: relative;
  z-index: 1;
  padding: 26px 28px;
  pointer-events: none;
}
.glass-title {
  margin: 0 0 7px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.28);
}
.glass-body {
  margin: 0 0 16px;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 30ch;
  text-shadow: 0 1px 9px rgba(0, 0, 0, 0.26);
}
.glass-btn {
  pointer-events: auto;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 11.5px;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.glass-btn:hover { background: rgba(255, 255, 255, 0.24); }

.glass-resize {
  position: absolute;
  right: 0; bottom: 0;
  width: 22px; height: 22px;
  cursor: nwse-resize;
  touch-action: none;
}
.glass-resize::after {
  content: "";
  position: absolute;
  right: 5px; bottom: 5px;
  width: 8px; height: 8px;
  border-right: 1.5px solid rgba(255, 255, 255, 0.55);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.55);
  border-bottom-right-radius: 3px;
}

/* ---------- Light handle ---------- */

.light {
  position: absolute;
  z-index: 4;
  left: calc(var(--lx) * 1%);
  top:  calc(var(--ly) * 1%);
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
}
.light::before {
  content: "";
  position: absolute;
  inset: -46px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--light-rgb), 0.34) 0%,
    rgba(var(--light-rgb), 0.12) 34%,
    rgba(var(--light-rgb), 0) 70%
  );
  pointer-events: none;
}
.light::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: rgb(var(--light-rgb));
  box-shadow:
    0 0 0 1.5px rgba(0, 0, 0, 0.28),
    0 0 14px 3px rgba(var(--light-rgb), 0.85);
  transition: inset .14s ease;
}
.light:hover::after, .light:focus-visible::after, .light.is-dragging::after { inset: 5px; }
.light.is-dragging { cursor: grabbing; }

/* ---------- Grain ---------- */

.grain {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: var(--grain-a);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ============================================================
   Code drawer
   ============================================================ */

.drawer {
  flex: none;
  border-top: 1px solid var(--line);
  background: var(--ink-900);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  flex: none;
}
.drawer-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 2px 0;
}
.drawer-toggle:hover { color: var(--text); }
.drawer-toggle .chev { width: 14px; height: 14px; transition: transform .18s ease; }
.drawer.is-closed .drawer-toggle .chev { transform: rotate(-90deg); }
.drawer.is-closed .drawer-body { display: none; }

.drawer-actions { display: flex; align-items: center; gap: 7px; }

.drawer-body {
  overflow: auto;
  max-height: 236px;
  border-top: 1px solid var(--line);
  background: var(--ink-950);
  scrollbar-width: thin;
  scrollbar-color: var(--ink-700) transparent;
}
.drawer-body::-webkit-scrollbar { width: 9px; height: 9px; }
.drawer-body::-webkit-scrollbar-thumb {
  background: var(--ink-700); border-radius: 9px;
  border: 3px solid var(--ink-950);
}

.code {
  margin: 0;
  padding: 14px 16px 18px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: #c8c8d4;
  tab-size: 2;
  white-space: pre;
}
.t-com  { color: #6f6f80; font-style: italic; }
.t-sel  { color: #d9d9e6; }
.t-prop { color: #7aa2f7; }
.t-num  { color: #d3a8ff; }
.t-unit { color: #9f7fd4; }
.t-fn   { color: #7ddcc0; }
.t-str  { color: #e0af68; }
.t-col  { color: #f0a5c8; }
.t-kw   { color: #9aa0b4; }
.t-pun  { color: #6a6a7c; }
.t-cls  { color: #7ddcc0; }

/* ============================================================
   Responsive — panel becomes a bottom sheet
   ============================================================ */

@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
  }
  .stage-wrap { grid-row: 1; }

  .panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 20;
    max-height: 74vh;
    border-right: 0;
    border-top: 1px solid var(--line-strong);
    border-radius: 16px 16px 0 0;
    background: rgba(10, 10, 12, 0.94);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.5);
    transform: translateY(calc(100% - 46px));
    transition: transform .26s cubic-bezier(.32, .72, 0, 1);
  }
  .panel.is-open { transform: translateY(0); }

  .sheet-grip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
    height: 46px;
    padding: 8px 0 0;
    background: none;
    border: 0;
    cursor: pointer;
    flex: none;
  }
  .sheet-grip-bar {
    width: 36px; height: 4px; border-radius: 4px;
    background: rgba(255, 255, 255, 0.22);
  }
  .sheet-grip-label {
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-faint);
  }

  .panel-head { display: none; }
  .panel-scroll { max-height: 54vh; }
  .drawer-body { max-height: 168px; }
  .stage-bar .btn span[data-label] { display: none; }
  .stage-bar .btn { padding: 7px; }
  .panel-foot { padding-bottom: calc(13px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   Motion preferences
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none !important; }
  * { transition-duration: .01ms !important; }
}
.stage[data-motion="off"] .blob { animation: none; }