:root {
  color-scheme: dark;
  --bg: #0b0d0f;
  --panel: #15191d;
  --panel-strong: #1e2428;
  --text: #f0ece4;
  --muted: #a8a094;
  --line: rgba(240, 236, 228, 0.14);
  --accent: #d6ff5f;
  --accent-2: #ff7043;
  --shadow: rgba(0, 0, 0, 0.42);

  /* =====================================================================
     Category hues — the single source of truth for category colour.
     Every category owns one hue (--cat-*) and one saturation (--cat-*-s, a
     unitless percentage). The floating panel accordions and the homepage /
     studio controls all derive their colour from these tokens via --cat-h /
     --cat-s, so a category reads as one colour everywhere it appears. The
     Shuffle Colors control rewrites both, which is how pastel sets are possible
     (low saturation) as well as vivid ones.
     ===================================================================== */
  --cat-view: 265; --cat-view-s: 82; /* View / Layout — violet */
  --cat-playback: 150; --cat-playback-s: 82; /* Playback — green */
  --cat-edit: 25; --cat-edit-s: 82; /* Edit — orange */
  --cat-creation: 205; --cat-creation-s: 82; /* Creation — blue */
  --cat-persistence: 48; --cat-persistence-s: 82; /* Persistence — gold */
  --cat-community: 320; --cat-community-s: 82; /* Community — pink */
  --cat-presets: 178; --cat-presets-s: 82; /* Presets & Performance — teal */
  --cat-sequence: 95; --cat-sequence-s: 78; /* Sequence & Triggers — lime */
}

/* Bind a category to its hue and saturation. Any element tagged with
   data-category exposes --cat-h and --cat-s to itself and its descendants, and
   every category-aware control shades itself from those two variables. */
[data-category="view"] { --cat-h: var(--cat-view); --cat-s: var(--cat-view-s); }
[data-category="playback"] { --cat-h: var(--cat-playback); --cat-s: var(--cat-playback-s); }
[data-category="edit"] { --cat-h: var(--cat-edit); --cat-s: var(--cat-edit-s); }
[data-category="creation"] { --cat-h: var(--cat-creation); --cat-s: var(--cat-creation-s); }
[data-category="persistence"] { --cat-h: var(--cat-persistence); --cat-s: var(--cat-persistence-s); }
[data-category="community"] { --cat-h: var(--cat-community); --cat-s: var(--cat-community-s); }
[data-category="presets"] { --cat-h: var(--cat-presets); --cat-s: var(--cat-presets-s); }
[data-category="sequence"] { --cat-h: var(--cat-sequence); --cat-s: var(--cat-sequence-s); }

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  font-family: Georgia, "Times New Roman", serif;
  background: transparent;
}

body.is-inverted,
body.is-ultra-safe-invert {
  filter: invert(1) hue-rotate(180deg);
}

/* Ultra-safe's power-saving invert and the manual invert are independent
   toggles, so together they should cancel out (two inversions = the original,
   dark view) rather than fight over the single `filter` property. */
body.is-inverted.is-ultra-safe-invert {
  filter: none;
}

/* Ultra-safe mode: freeze every animation and transition in place so nothing
   on screen moves. GIFs are frozen separately in script.js. */
body.is-ultra-safe *,
body.is-ultra-safe *::before,
body.is-ultra-safe *::after {
  animation-play-state: paused !important;
  transition: none !important;
}

.gif-card.is-inverted img {
  /* True colour inversion for "Invert Selected": no hue-rotate/saturate/contrast
     tweaks, so the foreground is a straight photographic negative
     (e.g. blue inverts to gold) rather than a hue-preserving recolour. */
  filter: invert(1);
}

/* Ambient glow + base gradient, fixed to the viewport so it always fills the
   screen no matter how far the world is scrolled. */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 8%, rgba(214, 255, 95, 0.13), transparent 28rem),
    radial-gradient(circle at 82% 72%, rgba(255, 112, 67, 0.12), transparent 26rem),
    linear-gradient(135deg, #0b0d0f 0%, #111518 58%, #090a0b 100%);
}

/* Grid texture, also fixed to the viewport but tiled edge to edge in every
   direction. Its background-position is nudged by scroll (see script.js) so
   the lines appear anchored to the world — an endless surface that can never
   run out as you scroll past any edge. */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 42px 42px;
  background-position: 0 0;
}

/* The scrollable canvas. Larger than the viewport in both axes and grown
   further by script.js whenever the user reaches an edge. */
.world {
  position: relative;
  z-index: 0;
  width: var(--world-w, 300vw);
  height: var(--world-h, 300vh);
}

.stage {
  position: absolute;
  left: var(--stage-x, 0px);
  top: var(--stage-y, 0px);
  width: min(1160px, calc(100vw - 32px));
  min-height: 100vh;
  padding: clamp(28px, 5vw, 72px) 0;
}

.intro {
  position: relative;
  max-width: 720px;
  padding-right: 60px;
}

.intro[hidden] {
  display: none;
}

.intro-close {
  position: absolute;
  top: 2px;
  right: 0;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  background: rgba(21, 25, 29, 0.72);
  font: 700 1.35rem/1 "Courier New", monospace;
  cursor: pointer;
  transition: transform 160ms ease, color 160ms ease, border-color 160ms ease;
}

.intro-close:hover,
.intro-close:focus-visible {
  color: var(--accent);
  border-color: rgba(214, 255, 95, 0.72);
  outline: none;
  transform: rotate(90deg);
}

.kicker {
  margin: 0 0 12px;
  color: var(--accent);
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1 {
  max-width: 10ch;
  margin: 0;
  font-size: clamp(4rem, 13vw, 10.5rem);
  font-weight: 500;
  line-height: 0.82;
}

.lede {
  max-width: 34rem;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.55;
}

.controls {
  position: relative;
  /* Sit above the gallery cards (which reach z-index 999 while dragging) so the
     buttons always stand out in front of the GIFs rather than behind them. */
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: clamp(28px, 5vw, 52px) 0 22px;
}

/* Each control category is a collapsible accordion. The <details> carries the
   data-category binding so its header and buttons shade from the shared hue
   tokens, matching the floating panel category for category. */
.control-acc {
  border: 1px solid hsl(var(--cat-h) calc(var(--cat-s) * 1%) 55% / 0.35);
  border-left: 3px solid hsl(var(--cat-h) calc(var(--cat-s) * 1%) 55% / 0.7);
  border-radius: 12px;
  /* A dark, slightly-blurred backing sits under the category hue tint so the
     controls stay legible and stand out when GIFs pass behind them. */
  background:
    linear-gradient(hsl(220 10% 7% / 0.82), hsl(220 10% 7% / 0.82)),
    hsl(var(--cat-h) calc(var(--cat-s) * 1%) 46% / 0.14);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42);
  overflow: hidden;
}

.control-acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: 0;
  padding: 12px 16px;
  list-style: none;
  cursor: pointer;
  color: hsl(var(--cat-h) calc(var(--cat-s) * 1%) 78%);
  background: linear-gradient(90deg, hsl(var(--cat-h) calc(var(--cat-s) * 1%) 45% / 0.16), transparent 70%);
  font: 700 0.8rem/1.2 "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 160ms ease, background 160ms ease;
  user-select: none;
}

/* Hide the native disclosure triangle across browsers. */
.control-acc-head::-webkit-details-marker { display: none; }
.control-acc-head::marker { content: ""; }

.control-acc-head:hover,
.control-acc-head:focus-visible {
  color: hsl(var(--cat-h) calc(var(--cat-s) * 1%) 88%);
  outline: none;
}

.control-acc-chev {
  transition: transform 200ms ease;
}

.control-acc[open] .control-acc-chev,
.control-acc-head[aria-expanded="true"] .control-acc-chev {
  transform: rotate(180deg);
}

.control-acc-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 16px;
}

/* A short explainer line that sits at the top of a control section. It spans
   the full width of the flex body so the buttons/inputs wrap beneath it. */
.control-hint {
  flex: 1 0 100%;
  margin: 0 0 2px;
  color: var(--muted);
  font: 600 0.78rem/1.4 "Courier New", monospace;
}

.control-hint b {
  color: hsl(var(--cat-h) calc(var(--cat-s) * 1%) 78%);
  font-weight: 700;
}

/* The presets/performance accordion stands on its own (outside .controls),
   so it needs the bottom spacing the flex-column gap gives the others. */
.stage > .control-acc {
  margin: 0 0 22px;
}

.control {
  display: inline-grid;
  place-items: center;
  min-width: 104px;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: rgba(21, 25, 29, 0.72);
  font: 700 0.82rem/1 "Courier New", monospace;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.upload-control input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.control:hover,
.control:focus-visible {
  border-color: rgba(214, 255, 95, 0.72);
  transform: translateY(-2px);
  outline: none;
}

.control.is-active {
  color: #14170c;
  border-color: var(--accent);
  background: var(--accent);
}

/* A selected category control (Grid, Spotlight, the mode/preset toggles…)
   fills with its OWN category colour rather than the global lime accent, so
   the active state stays in step with the shuffled palette instead of always
   reading green. Dark text keeps it legible against the filled hue. */
.control[data-category].is-active {
  color: hsl(var(--cat-h) 45% 12%);
  border-color: hsl(var(--cat-h) calc(var(--cat-s) * 1%) 60%);
  background: hsl(var(--cat-h) calc(var(--cat-s) * 1%) 62%);
}

/* Category-driven control colour. A control's colour comes entirely from
   its category's hue + saturation (--cat-h / --cat-s, resolved from the
   data-category binding above), so the homepage buttons match the floating
   panel category for category. The active-state rule above stays untouched
   via :not(.is-active).
   ===================================================================== */
.control[data-category]:not(.is-active) {
  color: hsl(var(--cat-h) calc(var(--cat-s) * 1%) 74%);
  border-color: hsl(var(--cat-h) calc(var(--cat-s) * 1%) 55% / 0.55);
  background: hsl(var(--cat-h) calc(var(--cat-s) * 1%) 46% / 0.12);
}

.control[data-category]:not(.is-active):hover,
.control[data-category]:not(.is-active):focus-visible {
  border-color: hsl(var(--cat-h) calc(var(--cat-s) * 1%) 62% / 0.9);
  background: hsl(var(--cat-h) calc(var(--cat-s) * 1%) 50% / 0.2);
}

.action-status {
  min-width: 112px;
  color: var(--accent);
  font: 700 0.78rem/1 "Courier New", monospace;
  text-transform: uppercase;
}

.persistence-bar input {
  outline: none;
  transition: border-color 160ms ease;
  font: 700 0.82rem/1 "Courier New", monospace;
}

.persistence-bar input:focus {
  border-color: rgba(214, 255, 95, 0.72);
}

.persistence-bar .control {
  min-height: 38px;
  padding: 8px 14px;
  font-size: 0.78rem;
}

/* Controls whose backing feature is paused read as dimmed and inert. */
.control.is-off,
.control:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* Community library actions (save / share opt-in / browse). */
.community-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font: 700 0.72rem/1 "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.community-share input {
  accent-color: var(--accent);
  cursor: pointer;
}

/* Presets + performance toggles row. */
.performance-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px 28px;
  margin: 0 0 22px;
}

/* When the presets/performance row is the body of a control accordion, it
   inherits the accordion's padding instead of its own outer margin. */
.control-acc .performance-bar {
  margin: 0;
  padding: 14px 16px 16px;
}

.performance-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.performance-label {
  color: var(--accent);
  font: 700 0.72rem/1 "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.performance-toggles {
  gap: 8px 16px;
}

.performance-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font: 700 0.74rem/1 "Courier New", monospace;
  cursor: pointer;
}

.performance-toggle input {
  accent-color: var(--accent);
  cursor: pointer;
}

.edit-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 16px;
  margin: 0 0 22px;
}

.pixel-studio {
  grid-column: 1 / -1;
  display: grid;
  gap: 16px;
  padding: clamp(16px, 3vw, 24px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(13, 16, 18, 0.94), rgba(30, 36, 40, 0.82)),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 255, 255, 0.035) 18px 19px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

.pixel-head,
.studio-tools,
.pixel-workspace {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pixel-head {
  justify-content: space-between;
}

.studio-kicker {
  margin: 0 0 5px;
  color: var(--accent-2);
  font: 700 0.7rem/1 "Courier New", monospace;
  text-transform: uppercase;
}

.pixel-head h2 {
  margin: 0;
  font-size: clamp(1.6rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 0.9;
}

.studio-actions,
.studio-tools,
.frame-strip {
  flex-wrap: wrap;
}

/* The Make GIF workflow reads left-to-right as the steps you actually take:
   Start a canvas → build Frames → Finish by exporting. Each stage is a labelled
   group so the buttons no longer sit in one undifferentiated row. */
.studio-actions {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.studio-action-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* A hairline divider between stages reinforces the step-by-step flow. */
.studio-action-group + .studio-action-group {
  padding-left: 16px;
  border-left: 1px solid var(--line);
}

.studio-group-label {
  color: var(--accent-2);
  font: 700 0.6rem/1 "Courier New", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}

.studio-group-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Create GIF is the goal of the whole panel, so it gets the accent fill to stand
   out from the neutral step buttons. */
.studio-button.studio-button--primary[data-category] {
  color: #14170c;
  border-color: var(--accent);
  background: var(--accent);
}

.studio-button.studio-button--primary[data-category]:hover,
.studio-button.studio-button--primary[data-category]:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 84%, #ffffff);
}

.studio-button,
.tool-button,
.frame-thumb {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  background: rgba(9, 10, 11, 0.66);
  font: 700 0.74rem/1 "Courier New", monospace;
  cursor: pointer;
}

.studio-button,
.tool-button {
  padding: 9px 12px;
}

.studio-button:hover,
.studio-button:focus-visible,
.tool-button:hover,
.tool-button:focus-visible,
.frame-thumb:hover,
.frame-thumb:focus-visible {
  border-color: rgba(214, 255, 95, 0.72);
  outline: none;
}

.studio-button:disabled {
  color: rgba(240, 236, 228, 0.36);
  border-color: rgba(240, 236, 228, 0.08);
  cursor: not-allowed;
  transform: none;
}

/* Studio actions all belong to the Creation category, so they shade from
   --cat-h just like the panel and the homepage controls. */
.studio-button[data-category] {
  color: hsl(var(--cat-h) calc(var(--cat-s) * 1%) 74%);
  border-color: hsl(var(--cat-h) calc(var(--cat-s) * 1%) 55% / 0.55);
  background: hsl(var(--cat-h) calc(var(--cat-s) * 1%) 46% / 0.12);
}

.studio-button[data-category]:hover,
.studio-button[data-category]:focus-visible {
  border-color: hsl(var(--cat-h) calc(var(--cat-s) * 1%) 62% / 0.9);
  background: hsl(var(--cat-h) calc(var(--cat-s) * 1%) 50% / 0.2);
}

/* Pink tint marks the palette generator; red tint marks the transparency/erase tools. */
.tool-button--invert {
  color: #ff8fbd;
  border-color: rgba(255, 95, 159, 0.55);
  background: rgba(255, 95, 159, 0.12);
}

.tool-button--invert:hover,
.tool-button--invert:focus-visible {
  border-color: rgba(255, 95, 159, 0.9);
  background: rgba(255, 95, 159, 0.2);
}

.tool-button--reset {
  color: #ff9090;
  border-color: rgba(255, 95, 95, 0.55);
  background: rgba(255, 95, 95, 0.12);
}

.tool-button--reset:hover,
.tool-button--reset:focus-visible {
  border-color: rgba(255, 95, 95, 0.9);
  background: rgba(255, 95, 95, 0.2);
}

.tool-button.is-active,
.frame-thumb.is-active {
  color: #14170c;
  border-color: var(--accent);
  background: var(--accent);
}

/* The thumbnail lifts and fades while it is being dragged to a new slot. */
.frame-thumb.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}

/* A bright rail on the leading/trailing edge marks where the frame will
   snap into place when dropped. */
.frame-thumb.drop-before,
.frame-thumb.drop-after {
  position: relative;
}

.frame-thumb.drop-before::before,
.frame-thumb.drop-after::after {
  content: "";
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 3px;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.frame-thumb.drop-before::before {
  left: -6px;
}

.frame-thumb.drop-after::after {
  right: -6px;
}

.color-tool,
.frame-delay,
.magnifier-toggle,
.magnifier-zoom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font: 700 0.72rem/1 "Courier New", monospace;
  text-transform: uppercase;
}

.color-tool input {
  width: 42px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
}

.color-palette {
  flex-wrap: wrap;
}

.color-palette .color-swatch {
  width: 36px;
  cursor: pointer;
}

.color-palette .color-swatch.is-active-swatch {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

.frame-delay input,
.frame-delay select {
  width: 86px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  background: rgba(9, 10, 11, 0.66);
  font: 700 0.82rem/1 "Courier New", monospace;
}

.frame-delay select {
  width: 118px;
}

.magnifier-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.magnifier-zoom input {
  width: 96px;
  accent-color: var(--accent);
}

.pixel-workspace {
  align-items: stretch;
  overflow: visible;
  padding-bottom: 4px;
}

.canvas-magnifier-wrap {
  position: relative;
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
}

.pixel-canvas,
.preview-canvas {
  image-rendering: pixelated;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #101316;
}

.pixel-canvas {
  flex: 0 0 auto;
  max-width: none;
  touch-action: none;
  cursor: crosshair;
}

.magnifier-box {
  position: absolute;
  top: var(--magnifier-panel-y, 0px);
  left: var(--magnifier-panel-x, calc(100% + 14px));
  z-index: 4;
  display: grid;
  gap: 8px;
  width: 220px;
  padding: 10px;
  border: 1px solid rgba(214, 255, 95, 0.76);
  border-radius: 8px;
  background: rgba(9, 10, 11, 0.88);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48);
  touch-action: none;
  user-select: none;
}

.magnifier-box[hidden] {
  display: none;
}

.magnifier-box canvas {
  width: 192px;
  height: 192px;
  image-rendering: pixelated;
  border: 1px solid rgba(240, 236, 228, 0.2);
  border-radius: 5px;
  background: #101316;
  cursor: crosshair;
  touch-action: none;
}

.magnifier-readout {
  color: var(--accent);
  cursor: move;
  font: 700 0.68rem/1 "Courier New", monospace;
  text-align: center;
  text-transform: uppercase;
}

/* When the Pen Tip tool is active the third box becomes a brush designer:
   the magnifier view is swapped out for a large, editable 8×8 checkerboard. */
.pentip-designer {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.pentip-designer[hidden] {
  display: none;
}

.pentip-title {
  color: var(--accent);
  cursor: move;
  font: 700 0.68rem/1 "Courier New", monospace;
  text-align: center;
  text-transform: uppercase;
}

.pentip-canvas {
  width: 192px;
  height: 192px;
  image-rendering: pixelated;
  border: 1px solid rgba(240, 236, 228, 0.2);
  border-radius: 5px;
  background: #101316;
  cursor: crosshair;
  touch-action: none;
}

.pentip-actions {
  display: flex;
  gap: 8px;
  width: 100%;
}

.pentip-actions .tool-button {
  flex: 1 1 0;
  min-width: 0;
}

.preview-canvas {
  flex: 0 0 auto;
  max-width: none;
  align-self: flex-start;
}

.frame-strip {
  display: flex;
  gap: 8px;
}

.frame-thumb {
  width: 42px;
  cursor: grab;
}

.edit-panel[hidden] {
  display: none;
}

.edit-slider {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 112, 67, 0.26), rgba(214, 255, 95, 0.18), rgba(255, 112, 67, 0.22)),
    rgba(13, 16, 18, 0.76);
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.22);
}

/* A slider dropped inside a control accordion body (a flex row of buttons):
   it spans the whole width so it reads as its own full-width control beneath
   the button grid. */
.control-slider {
  flex: 1 0 100%;
  padding: 10px 14px;
}

.control-slider:has(input:disabled) {
  opacity: 0.5;
}

.workbench {
  display: block;
}

.slider-label,
.slider-value {
  font: 700 0.72rem/1 "Courier New", monospace;
  text-transform: uppercase;
  color: var(--muted);
}

.slider-value {
  color: var(--text);
}

.horizontal-slider {
  width: 100%;
  min-width: 0;
  height: 32px;
  margin: 0;
  accent-color: var(--accent);
  cursor: ew-resize;
}

.gallery {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr);
  gap: clamp(16px, 3vw, 30px);
  align-items: stretch;
  overflow: visible;
  padding: 20px;
  margin: -20px;
}

.gallery:empty {
  min-height: 320px;
  border: 1px dashed var(--line);
  border-radius: 8px;
}

.gif-card {
  position: relative;
  width: var(--card-width, auto);
  height: var(--card-height, auto);
  min-height: 320px;
  aspect-ratio: var(--ratio, 1 / 1);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  box-shadow: 0 28px 80px var(--shadow);
  isolation: isolate;
  touch-action: none;
  user-select: none;
  z-index: var(--z, auto);
  transform:
    translate(var(--x, 0px), var(--y, 0px))
    rotate(var(--rotation, 0deg))
    scale(var(--scale, 1));
  transition: box-shadow 160ms ease, border-color 160ms ease;
  cursor: grab;
}

.gif-card.is-size-locked {
  min-height: var(--card-height);
}

.gif-card.is-overlay {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: var(--z, 3);
}

.gif-card.is-dragging {
  border-color: rgba(214, 255, 95, 0.72);
  box-shadow: 0 38px 100px rgba(0, 0, 0, 0.58);
  cursor: grabbing;
  z-index: 999;
}

.gif-card.is-selected {
  border-color: var(--accent);
  box-shadow:
    0 0 0 2px rgba(214, 255, 95, 0.2),
    0 38px 100px rgba(0, 0, 0, 0.58);
}

.gif-card::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.46), transparent 34%);
  z-index: 1;
}

.gif-card img,
.pause-frame,
.slow-frame,
.seq-freeze {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: contain;
  filter: saturate(0.86) contrast(1.08);
  background: transparent;
}

.pause-frame,
.slow-frame,
.seq-freeze {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* While a card is in slow motion the native GIF keeps looping at full speed
   underneath, so hide it and let the overlay canvas drive playback. */
.gif-card.is-slowed > img:first-of-type {
  visibility: hidden;
}

/* Sequencer states. A GIF that is waiting for its trigger is shown as a faint
   ghost placeholder (so proximity targets have something to aim at), while the
   GIF the sequence is actively playing gets a lime highlight. */
.gif-card.is-seq-hidden {
  opacity: 0.08;
  outline: 1px dashed hsl(var(--cat-sequence) calc(var(--cat-sequence-s) * 1%) 60% / 0.55);
  outline-offset: -4px;
  transition: opacity 220ms ease;
}

.gif-card.is-seq-active {
  border-color: hsl(var(--cat-sequence) calc(var(--cat-sequence-s) * 1%) 60%);
  box-shadow:
    0 0 0 2px hsl(var(--cat-sequence) calc(var(--cat-sequence-s) * 1%) 60% / 0.35),
    0 38px 100px rgba(0, 0, 0, 0.58);
}

.gif-card:nth-child(2) {
  min-height: 260px;
  margin-top: 68px;
}

.gif-meta {
  position: absolute;
  right: 18px;
  bottom: 16px;
  left: 18px;
  z-index: 2;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  color: var(--text);
  font-family: "Courier New", monospace;
}

.gif-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.gif-size {
  color: var(--accent);
  font-size: 0.72rem;
  white-space: nowrap;
}

.gallery[data-mode="spotlight"] {
  grid-template-columns: 1fr;
}

.gallery[data-mode="spotlight"] .gif-card {
  min-height: min(72vh, 720px);
}

.gallery[data-mode="spotlight"] .gif-card:nth-child(2) {
  min-height: 280px;
  margin-top: 0;
}

.gallery[data-mode="stack"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}

.gallery[data-mode="stack"] .gif-card {
  min-height: clamp(300px, 44vw, 560px);
}

.gallery[data-mode="stack"] .gif-card:nth-child(2) {
  margin-top: 0;
  --stack-x: -34px;
  --stack-rotation: 2.5deg;
  transform:
    translate(calc(var(--x, 0px) + var(--stack-x)), var(--y, 0px))
    rotate(calc(var(--rotation, 0deg) + var(--stack-rotation)))
    scale(var(--scale, 1));
}

.gallery[data-mode="stack"] .gif-card:first-child {
  --stack-x: 20px;
  --stack-rotation: -1.5deg;
  transform:
    translate(calc(var(--x, 0px) + var(--stack-x)), var(--y, 0px))
    rotate(calc(var(--rotation, 0deg) + var(--stack-rotation)))
    scale(var(--scale, 1));
}

@media (max-width: 760px) {
  .stage {
    width: min(100vw - 24px, 520px);
  }

  .edit-panel {
    grid-template-columns: 1fr;
  }

  .pixel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .studio-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* Stacked on mobile: the stage divider moves to the top edge. */
  .studio-action-group + .studio-action-group {
    padding-left: 0;
    padding-top: 12px;
    border-left: none;
    border-top: 1px solid var(--line);
  }

  .pixel-workspace {
    flex-wrap: wrap;
  }

  .magnifier-box {
    top: var(--magnifier-panel-y, 10px);
    left: var(--magnifier-panel-x, 10px);
  }

  .edit-slider {
    grid-template-columns: 1fr auto;
  }

  .edit-slider .slider-label {
    grid-column: 1 / -1;
  }

  .gallery,
  .gallery[data-mode="stack"] {
    grid-template-columns: 1fr;
  }

  .gif-card,
  .gallery[data-mode="spotlight"] .gif-card,
  .gallery[data-mode="stack"] .gif-card {
    min-height: 360px;
  }

  .gif-card:nth-child(2),
  .gallery[data-mode="stack"] .gif-card:nth-child(2),
  .gallery[data-mode="stack"] .gif-card:first-child {
    margin-top: 0;
    --stack-x: 0px;
    --stack-rotation: 0deg;
  }

}

/* =====================================================================
   Floating control panel + community library + screensaver
   ===================================================================== */
.ga-panel {
  --ga-btn-min: 12ch;
  /* Neutral hue fallback for the panel; each accordion overrides --cat-h /
     --cat-s via its data-category binding, so this only shows if a category
     has no hue. */
  --cat-h: 90;
  --cat-s: 82;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 40;
  width: 320px;
  max-width: calc(100vw - 24px);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(214, 255, 95, 0.4);
  border-radius: 10px;
  background: rgba(13, 16, 18, 0.94);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  font-family: "Courier New", monospace;
  color: var(--text);
  overflow: hidden;
}

.ga-panel.is-collapsed .ga-panel-body,
.ga-panel.is-collapsed .ga-resize {
  display: none;
}

.ga-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  cursor: move;
  background: linear-gradient(90deg, rgba(214, 255, 95, 0.18), rgba(255, 112, 67, 0.14));
  border-bottom: 1px solid var(--line);
  touch-action: none;
  user-select: none;
}

.ga-panel-title {
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ga-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ga-panel-chev {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1;
  transition: transform 160ms ease;
  pointer-events: none;
}

.ga-panel.is-collapsed .ga-panel-chev {
  transform: rotate(-90deg);
}

.ga-icon-btn {
  min-width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(9, 10, 11, 0.6);
  color: var(--text);
  font: 700 1rem/1 "Courier New", monospace;
  cursor: pointer;
}

.ga-icon-btn:hover {
  border-color: rgba(214, 255, 95, 0.72);
}

.ga-panel-body {
  overflow-y: auto;
  max-height: 70vh;
  padding: 6px;
}

.ga-resize {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 45%, rgba(214, 255, 95, 0.7) 45% 55%, transparent 55%);
  touch-action: none;
}

.ga-acc {
  border-bottom: 1px solid var(--line);
  border-left: 3px solid hsl(var(--cat-h) calc(var(--cat-s) * 1%) 55% / 0.55);
}

.ga-acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 8px;
  border: 0;
  background: linear-gradient(90deg, hsl(var(--cat-h) calc(var(--cat-s) * 1%) 45% / 0.16), transparent 70%);
  color: hsl(var(--cat-h) calc(var(--cat-s) * 1%) 74%);
  font: 700 0.72rem/1.2 "Courier New", monospace;
  text-transform: uppercase;
  cursor: pointer;
}

.ga-acc-head:hover {
  color: hsl(var(--cat-h) calc(var(--cat-s) * 1%) 82%);
}

.ga-acc-head[aria-expanded="true"] .ga-acc-chev {
  transform: rotate(180deg);
}

.ga-acc-chev {
  transition: transform 160ms ease;
}

.ga-acc-body {
  padding: 4px 8px 12px;
  display: grid;
  gap: 8px;
}

/* The [hidden] attribute drives accordion collapse (see panel.js). Its
   default `display: none` is otherwise out-specified by the grid rule above,
   which would leave category sections permanently open. */
.ga-acc-body[hidden] {
  display: none;
}

.ga-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ga-btn {
  flex: 1 1 var(--ga-btn-min);
  min-width: var(--ga-btn-min);
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(9, 10, 11, 0.66);
  color: var(--text);
  font: 700 0.7rem/1.15 "Courier New", monospace;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, opacity 140ms ease;
}

.ga-btn:hover {
  border-color: rgba(214, 255, 95, 0.72);
}

/* =====================================================================
   Category-driven shading. A button's colour comes from its category's
   hue (--cat-h), and --shade (0..5, set per button in panel.js) walks the
   lightness/opacity so each category renders as a graded ramp of one hue.
   These live-inside-accordion selectors intentionally out-specify any older
   per-function tint so the category is the single source of colour.
   ===================================================================== */
.ga-acc-body .ga-btn {
  --shade: 0;
  color: hsl(var(--cat-h) calc(var(--cat-s) * 1%) calc(72% + var(--shade) * 3%));
  border-color: hsl(var(--cat-h) calc(var(--cat-s) * 1%) 55% / calc(0.45 + var(--shade) * 0.04));
  background: hsl(var(--cat-h) calc(var(--cat-s) * 1%) 46% / calc(0.1 + var(--shade) * 0.03));
}

.ga-acc-body .ga-btn:hover {
  border-color: hsl(var(--cat-h) calc(var(--cat-s) * 1%) 62% / 0.95);
  background: hsl(var(--cat-h) calc(var(--cat-s) * 1%) 50% / calc(0.22 + var(--shade) * 0.03));
}

/* Checkboxes and hints pick up the category hue too, so the whole section
   reads as one colour band rather than just the buttons. They stay softer
   than the buttons by scaling saturation down from the category's own. */
.ga-acc-body .ga-check {
  color: hsl(var(--cat-h) calc(var(--cat-s) * 0.5 * 1%) 74%);
}

.ga-acc-body .ga-check input {
  accent-color: hsl(var(--cat-h) calc(var(--cat-s) * 1%) 58%);
}

.ga-acc-body .ga-hint {
  color: hsl(var(--cat-h) calc(var(--cat-s) * 0.4 * 1%) 66%);
}

.ga-btn.is-off {
  opacity: 0.4;
  cursor: not-allowed;
}

.ga-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--muted);
}

.ga-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.ga-hint {
  margin: 2px 0 0;
  font-size: 0.68rem;
  line-height: 1.4;
  color: var(--muted);
}

/* Full-width mirror slider inside a panel accordion (e.g. Resize All). */
.ga-slider-row {
  display: grid;
  grid-template-columns: auto minmax(70px, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
}

.ga-slider-label,
.ga-slider-value {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: hsl(var(--cat-h) calc(var(--cat-s) * 0.5 * 1%) 74%);
}

.ga-slider {
  width: 100%;
  min-width: 0;
  margin: 0;
  accent-color: hsl(var(--cat-h) calc(var(--cat-s) * 1%) 58%);
  cursor: ew-resize;
}

/* Text input used inside the panel (e.g. the local page name). */
.ga-input {
  width: 100%;
  box-sizing: border-box;
  margin: 4px 0;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(9, 10, 11, 0.66);
  color: var(--text);
  font: 700 0.72rem/1.15 "Courier New", monospace;
}

.ga-input::placeholder {
  color: var(--muted);
}

.ga-input:focus-visible {
  outline: none;
  border-color: rgba(214, 255, 95, 0.72);
}

/* Destructive action (e.g. deleting a saved local page). */
.ga-btn--danger {
  color: #ff8a80;
  border-color: rgba(255, 91, 82, 0.5);
}

.ga-btn--danger:hover {
  border-color: rgba(255, 91, 82, 0.9);
  background: rgba(255, 91, 82, 0.14);
}

.ga-field {
  display: grid;
  gap: 4px;
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
}

.ga-select,
.ga-num {
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(9, 10, 11, 0.66);
  color: var(--text);
  font: 700 0.74rem/1 "Courier New", monospace;
}

/* ---- Library modal ---- */
.ga-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 5, 6, 0.72);
  backdrop-filter: blur(4px);
}

.ga-modal-card {
  width: min(920px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: 18px;
  border: 1px solid rgba(214, 255, 95, 0.4);
  border-radius: 12px;
  background: rgba(13, 16, 18, 0.97);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  font-family: "Courier New", monospace;
  color: var(--text);
}

.ga-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ga-modal-head h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 500;
}

.ga-lib-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.ga-custom {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ga-custom .ga-num {
  width: 84px;
}

.ga-lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.ga-lib-card {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(9, 10, 11, 0.5);
}

.ga-lib-thumb {
  width: 100%;
  height: 120px;
  object-fit: contain;
  border-radius: 6px;
  background: #101316;
  image-rendering: auto;
}

.ga-lib-noimg {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.7rem;
  text-transform: uppercase;
}

.ga-lib-card figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.72rem;
}

.ga-lib-dim {
  color: var(--accent);
  white-space: nowrap;
}

/* "shared" flag on owned-library cards. */
.ga-lib-badge {
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bg, #090a0b);
  background: var(--accent);
  white-space: nowrap;
}

/* ---- Cinematic screensaver ---- */
.ga-saver {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 40%, #0d1012, #050607 70%);
  opacity: 0;
  transition: opacity 600ms ease;
  cursor: none;
}

.ga-saver.is-visible {
  opacity: 1;
}

.ga-saver-img {
  max-width: 70vw;
  max-height: 70vh;
  object-fit: contain;
  filter: saturate(0.9) contrast(1.05) drop-shadow(0 30px 90px rgba(0, 0, 0, 0.7));
  transform: translate(0, 0) rotate(0deg) scale(1);
}

.ga-saver-img.is-drifting {
  animation: ga-drift 7s ease-in-out forwards;
}

@keyframes ga-drift {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0.2;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform:
      translate(var(--saver-dx, 0), var(--saver-dy, 0))
      rotate(var(--saver-rot, 0deg))
      scale(1.08);
    opacity: 1;
  }
}

.ga-saver-tag {
  position: absolute;
  bottom: 28px;
  color: var(--muted);
  font: 700 0.72rem/1 "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .ga-saver-img.is-drifting {
    animation: none;
  }
}

@media (max-width: 760px) {
  .ga-panel {
    top: auto;
    bottom: 12px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

/* =====================================================================
   Live performance monitor HUD
   A compact floating readout with two text-drawn usage bars. Each bar is a
   run of block glyphs; filled cells shade green → amber → red the further
   right (higher) they sit, empty cells stay dim so the track is visible.
   ===================================================================== */
.ga-perf {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 45;
  min-width: 340px;
  max-width: calc(100vw - 40px);
  padding: 10px 12px 8px;
  border: 1px solid rgba(214, 255, 95, 0.4);
  border-radius: 10px;
  background: rgba(9, 11, 13, 0.94);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  color: var(--text);
  font-family: "Courier New", monospace;
}

.ga-perf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.ga-perf-title {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.ga-perf-close {
  min-width: 22px;
  height: 22px;
  font-size: 0.85rem;
  line-height: 1;
}

.ga-perf-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 3px 0;
  font-size: 0.74rem;
  white-space: nowrap;
}

.ga-perf-name {
  width: 3ch;
  font-weight: 700;
  color: var(--muted);
}

.ga-perf-bar {
  letter-spacing: -0.5px;
  line-height: 1;
}

.ga-perf-cell.is-low {
  color: #7ee081; /* green — comfortable range */
}

.ga-perf-cell.is-mid {
  color: #ffcf5c; /* amber — getting busy */
}

.ga-perf-cell.is-high {
  color: #ff5b52; /* red — the higher cells */
}

/* Declared after the zone colours so an empty cell that happens to sit in a
   coloured zone still reads as dim track rather than a lit cell. */
.ga-perf-cell.is-empty {
  color: rgba(240, 236, 228, 0.16);
}

.ga-perf-bar.is-na .ga-perf-cell {
  color: rgba(240, 236, 228, 0.16);
}

.ga-perf-val {
  min-width: 6ch;
  font-weight: 700;
  text-align: right;
  color: var(--text);
}

.ga-perf-top {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: 0.68rem;
}

.ga-perf-foot {
  margin: 6px 0 0;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(178 40% 60%);
}

@media (max-width: 760px) {
  .ga-perf {
    left: 12px;
    right: 12px;
    bottom: 12px;
    min-width: 0;
  }
}
/* =====================================================================
   Sequence & Triggers (sequencer.js)
   The section body is the shared flex control-acc-body, so the transport
   bar and step list each claim the full row and stack their own contents.
   ===================================================================== */
[data-sequencer] {
  flex-direction: column;
  align-items: stretch;
}

.seq-transport {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.seq-transport .control {
  min-width: 120px;
}

.seq-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.seq-empty {
  margin: 4px 0 0;
}

.seq-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid hsl(var(--cat-h) calc(var(--cat-s) * 1%) 55% / 0.35);
  border-left: 3px solid hsl(var(--cat-h) calc(var(--cat-s) * 1%) 55% / 0.7);
  border-radius: 8px;
  background: hsl(var(--cat-h) calc(var(--cat-s) * 1%) 46% / 0.1);
}

.seq-step-head {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.seq-badge {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: hsl(var(--cat-h) calc(var(--cat-s) * 1%) 62%);
  color: hsl(var(--cat-h) 45% 12%);
  font: 800 0.8rem/1 "Courier New", monospace;
}

.seq-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.seq-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 130px;
  min-width: 110px;
}

.seq-step-head .seq-field {
  flex: 1 1 auto;
}

.seq-field-label {
  font: 700 0.68rem/1 "Courier New", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--cat-h) calc(var(--cat-s) * 1%) 74%);
}

.seq-select,
.seq-num {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid hsl(var(--cat-h) calc(var(--cat-s) * 1%) 55% / 0.5);
  border-radius: 6px;
  background: rgba(9, 10, 11, 0.66);
  color: var(--text);
  font: 700 0.82rem/1 "Courier New", monospace;
}

.seq-select:focus-visible,
.seq-num:focus-visible {
  outline: none;
  border-color: hsl(var(--cat-h) calc(var(--cat-s) * 1%) 66%);
  box-shadow: 0 0 0 2px hsl(var(--cat-h) calc(var(--cat-s) * 1%) 55% / 0.3);
}

.seq-remove {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid hsl(0 70% 60% / 0.5);
  border-radius: 6px;
  background: hsl(0 70% 50% / 0.14);
  color: hsl(0 80% 78%);
  font: 800 1.1rem/1 "Courier New", monospace;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.seq-remove:hover,
.seq-remove:focus-visible {
  background: hsl(0 70% 50% / 0.28);
  border-color: hsl(0 80% 66%);
}