body {
  margin: 0;
}
:root {
  /* Brand palette — change these hex values if the logo or brand changes. */
  --brand-blue: #2e1ebc;
  --brand-purple: #cf41f2;
  --brand-orange: #ff5300;
  --brand-green: #41f24b;

  /* Logo paints from these four slots (three chromatics + white).
     Header idle remaps --logo-fill-4 to --panel so white tiles vanish until hover. */
  --logo-fill-1: var(--brand-blue);
  --logo-fill-2: var(--brand-purple);
  --logo-fill-3: var(--brand-orange);
  --logo-fill-4: #ffffff;

  /* Chrome accent — UI highlight. Colour setting remaps this; logo slots stay
     put except Orby, which remaps the three chromatics.
     --brand is the quiet primary (white on dark) so chrome stays behind the artwork.
     --brand-green is toggles only.
     --chrome-fill is the solid plate on active choice buttons; --on-chrome sits on it.
     Piece-edit guides (--piece-guide*) follow --chrome so new UI colours inherit. */
  --chrome: var(--brand-orange);
  --chrome-fill: var(--chrome);
  --glow-blur-tight: 10px;
  --glow-blur-wide: 22px;
  --glow-mix-tight: 22%;
  --glow-mix-wide: 14%;
  --glow-outer:
    0 0 var(--glow-blur-tight)
      color-mix(in srgb, var(--chrome-fill) var(--glow-mix-tight), transparent),
    0 0 var(--glow-blur-wide)
      color-mix(in srgb, var(--chrome-fill) var(--glow-mix-wide), transparent);
  --glow-brand:
    0 0 var(--glow-blur-tight)
      color-mix(in srgb, var(--brand) var(--glow-mix-tight), transparent),
    0 0 var(--glow-blur-wide)
      color-mix(in srgb, var(--brand) var(--glow-mix-wide), transparent);
  --piece-guide: var(--chrome);
  --piece-guide-dropzone: color-mix(in srgb, var(--piece-guide) 75%, transparent);
  --piece-guide-grid: color-mix(in srgb, var(--piece-guide) 25%, transparent);
  --ui-chevron: conic-gradient(
    from 225deg at 50% 50%,
    var(--chrome) 0 90deg,
    transparent 90deg
  );

  --brand: #ffffff;
  --brand-rgb: 255, 255, 255;
  --on-brand: #0f0f0f;
  --on-chrome: var(--on-brand);
  --ink: #ffffff;

  /* Surfaces */
  --bg: #0e0e0e;
  --panel: #131313;
  --panel-border: rgba(255, 255, 255, 0.1);

  /* Type */
  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.45);
  --font-ui:
    "Bitcount Grid Single Variable",
    "Bitcount Grid Single",
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  /* Interactive accents (derived from brand) */
  --accent: var(--brand);
  --accent-dim: rgba(var(--brand-rgb), 0.12);
  --accent-hover: rgba(var(--brand-rgb), 0.2);

  /* Fills that follow --text so the light theme flips them. */
  --fill-faint: color-mix(in srgb, var(--text) 6%, transparent);
  --fill-mid: color-mix(in srgb, var(--text) 15%, transparent);
  --fill-strong: color-mix(in srgb, var(--text) 22%, transparent);
  --fill-stronger: color-mix(in srgb, var(--text) 38%, transparent);
  --glass: rgba(14, 14, 14, 0.53);
  --glass-foot: rgba(14, 14, 14, 0.22);
  --timeline-bg: rgba(0, 0, 0, 0.25);
  --thumb-border: #4d4d4d;
  --scrollbar-thumb: color-mix(in srgb, var(--text) 18%, transparent);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--text) 28%, transparent);
  --scrollbar-track: color-mix(in srgb, var(--text) 10%, transparent);

  --panel-label-size: 16px;
  --control-height: 52px;
  --ui-switch-width: 3.5em;
  --ui-switch-height: 2em;
  --ui-switch-thumb-size: 16px;
  --ui-switch-thumb-inset: 4px;
  --ui-icon-btn-size: 24px;
  --icon-btn-size: 58px;
  --control-radius: 0;
  --settings-label-h: 20px;
  --settings-control-h: 20px;
  --settings-inner-gap: 8px;
  --settings-row-gap: 24px;
  --ui-ease: cubic-bezier(0.32, 0.08, 0.24, 1);
  --panel-slide-duration: 0.45s;
  --panel-slide-ease: cubic-bezier(0.83, 0, 0.17, 1);
  --ui-compact-zoom: 1;
  --ui-panel-width: 420px;
  --ui-chrome-width: var(--ui-panel-width);
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
  --brand: #111111;
  --brand-rgb: 17, 17, 17;
  --on-brand: #ffffff;
  --ink: #111111;
  --logo-fill-4: #111111;
  --bg: #e8e8e8;
  --panel: #ffffff;
  --panel-border: rgba(0, 0, 0, 0.1);
  --text: rgba(17, 17, 17, 0.92);
  --muted: rgba(17, 17, 17, 0.45);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-foot: rgba(255, 255, 255, 0.55);
  --timeline-bg: rgba(255, 255, 255, 0.62);
  --thumb-border: #c8c8c8;
}

html[data-chrome="purple"] {
  --chrome: var(--brand-purple);
}

/* Homage to Orby — https://github.com/stellanjoh2/orby */
html[data-chrome="orby"] {
  --orby-lime: #c4ff00;
  --orby-purple: #3b00ff;
  --orby-pink: #ff00c4;
  --chrome: var(--orby-lime);
  --chrome-fill: var(--orby-lime);
  --brand-green: var(--orby-lime);
  --on-chrome: #0f0f0f;
  --logo-fill-1: var(--orby-purple);
  --logo-fill-2: var(--orby-pink);
  --logo-fill-3: var(--orby-lime);
}

html[data-theme="light"][data-chrome="orby"] {
  /* Lime on white fails as type; purple is the readable Orby chromatic. */
  --chrome: var(--orby-purple);
}

* {
  box-sizing: border-box;
  cursor: inherit;
}

:root {
  --cursor-default: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2048%2048'%20fill='none'%3e%3ccircle%20cx='4'%20cy='4'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='12'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='12'%20cy='12'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='20'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='20'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='28'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='28'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='36'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='36'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='36'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='44'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='44'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3c/svg%3e") 3 3, default;
  --cursor-pointer: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2048%2048'%20fill='none'%3e%3ccircle%20cx='4'%20cy='4'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='12'%20cy='4'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='12'%20cy='12'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='12'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='20'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='20'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='28'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='28'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='12'%20cy='36'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='36'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='36'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='44'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='44'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3c/svg%3e") 3 3, pointer;
  --cursor-grab: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2048%2048'%20fill='none'%3e%3ccircle%20cx='4'%20cy='4'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='4'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='4'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='12'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='12'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='12'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='12'%20cy='20'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='20'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='20'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='44'%20cy='20'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='12'%20cy='28'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='28'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='28'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='36'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3c/svg%3e") 13 19, grab;
  --cursor-grabbing: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2048%2048'%20fill='none'%3e%3ccircle%20cx='12'%20cy='12'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='12'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='12'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='20'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='12'%20cy='20'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='20'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='20'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='20'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='12'%20cy='28'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='28'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='28'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='36'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3c/svg%3e") 13 13, grabbing;
  --cursor-not-allowed: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2048%2048'%20fill='none'%3e%3ccircle%20cx='12'%20cy='4'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='4'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='4'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='12'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='12'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='12'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='20'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='20'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='20'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='28'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='28'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='28'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='12'%20cy='36'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='36'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='36'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3c/svg%3e") 13 13, not-allowed;
  --cursor-text: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2048%2048'%20fill='none'%3e%3ccircle%20cx='4'%20cy='4'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='4'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='4'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='12'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='20'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='28'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='36'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='36'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='36'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3c/svg%3e") 13 13, text;
  --cursor-crosshair: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2048%2048'%20fill='none'%3e%3ccircle%20cx='20'%20cy='4'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='12'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='20'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='12'%20cy='20'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='20'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='20'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='28'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='36'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3c/svg%3e") 13 13, crosshair;
  --cursor-zoom-in: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2048%2048'%20fill='none'%3e%3ccircle%20cx='12'%20cy='4'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='4'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='4'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='12'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='12'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='12'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='20'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='20'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='20'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='28'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='28'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='28'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='12'%20cy='36'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='36'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='36'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='44'%20cy='36'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='44'%20cy='44'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3c/svg%3e") 13 13, zoom-in;
  --cursor-zoom-out: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2048%2048'%20fill='none'%3e%3ccircle%20cx='12'%20cy='4'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='4'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='4'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='12'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='12'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='20'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='20'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='20'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='28'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='28'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='12'%20cy='36'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='36'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='36'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='44'%20cy='36'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3ccircle%20cx='44'%20cy='44'%20r='3.2'%20fill='%23ffffff'%20stroke='%23000000'%20stroke-width='1.6'/%3e%3c/svg%3e") 13 13, zoom-out;
}

html[data-theme="light"] {
  --cursor-default: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2048%2048'%20fill='none'%3e%3ccircle%20cx='4'%20cy='4'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='12'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='12'%20cy='12'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='20'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='20'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='28'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='28'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='36'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='36'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='36'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='44'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='44'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3c/svg%3e") 3 3, default;
  --cursor-pointer: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2048%2048'%20fill='none'%3e%3ccircle%20cx='4'%20cy='4'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='12'%20cy='4'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='12'%20cy='12'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='12'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='20'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='20'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='28'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='28'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='12'%20cy='36'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='36'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='36'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='44'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='44'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3c/svg%3e") 3 3, pointer;
  --cursor-grab: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2048%2048'%20fill='none'%3e%3ccircle%20cx='4'%20cy='4'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='4'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='4'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='12'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='12'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='12'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='12'%20cy='20'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='20'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='20'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='44'%20cy='20'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='12'%20cy='28'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='28'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='28'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='36'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3c/svg%3e") 13 19, grab;
  --cursor-grabbing: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2048%2048'%20fill='none'%3e%3ccircle%20cx='12'%20cy='12'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='12'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='12'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='20'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='12'%20cy='20'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='20'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='20'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='20'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='12'%20cy='28'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='28'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='28'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='36'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3c/svg%3e") 13 13, grabbing;
  --cursor-not-allowed: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2048%2048'%20fill='none'%3e%3ccircle%20cx='12'%20cy='4'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='4'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='4'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='12'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='12'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='12'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='20'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='20'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='20'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='28'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='28'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='28'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='12'%20cy='36'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='36'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='36'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3c/svg%3e") 13 13, not-allowed;
  --cursor-text: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2048%2048'%20fill='none'%3e%3ccircle%20cx='4'%20cy='4'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='4'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='4'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='12'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='20'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='28'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='36'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='36'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='36'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3c/svg%3e") 13 13, text;
  --cursor-crosshair: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2048%2048'%20fill='none'%3e%3ccircle%20cx='20'%20cy='4'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='12'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='20'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='12'%20cy='20'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='20'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='20'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='28'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='36'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3c/svg%3e") 13 13, crosshair;
  --cursor-zoom-in: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2048%2048'%20fill='none'%3e%3ccircle%20cx='12'%20cy='4'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='4'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='4'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='12'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='12'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='12'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='20'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='20'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='20'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='28'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='28'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='28'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='12'%20cy='36'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='36'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='36'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='44'%20cy='36'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='44'%20cy='44'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3c/svg%3e") 13 13, zoom-in;
  --cursor-zoom-out: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2048%2048'%20fill='none'%3e%3ccircle%20cx='12'%20cy='4'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='4'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='4'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='12'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='12'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='20'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='20'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='20'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='4'%20cy='28'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='36'%20cy='28'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='12'%20cy='36'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='20'%20cy='36'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='28'%20cy='36'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='44'%20cy='36'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3ccircle%20cx='44'%20cy='44'%20r='3.2'%20fill='%23000000'%20stroke='%23ffffff'%20stroke-width='1.6'/%3e%3c/svg%3e") 13 13, zoom-out;
}

html.normal-cursor {
  --cursor-default: default;
  --cursor-pointer: pointer;
  --cursor-grab: grab;
  --cursor-grabbing: grabbing;
  --cursor-not-allowed: not-allowed;
  --cursor-text: text;
  --cursor-crosshair: crosshair;
  --cursor-zoom-in: zoom-in;
  --cursor-zoom-out: zoom-out;
}

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

html,
body,
#root {
  height: 100%;
  min-height: 100dvh;
  margin: 0;
  overscroll-behavior: none;
  cursor: var(--cursor-default);
}

button,
label,
select,
summary,
input {
  cursor: inherit;
}

a,
.panel-credit__author {
  cursor: var(--cursor-pointer);
}

button:disabled,
input:disabled,
select:disabled {
  cursor: var(--cursor-not-allowed);
}

input[type="text"],
input[type="number"],
textarea {
  cursor: var(--cursor-text);
}

body:has(.timeline__strip.is-dragging),
body:has(.timeline__strip.is-dragging) * {
  cursor: var(--cursor-grabbing);
}

.mosaic-canvas.is-zoom-in {
  cursor: var(--cursor-zoom-in);
}

.mosaic-canvas.is-zoom-out {
  cursor: var(--cursor-zoom-out);
}

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
}

::selection {
  background: var(--brand-blue);
  color: #ffffff;
}

.app {
  display: grid;
  grid-template-columns: var(--ui-chrome-width) 1fr;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  background: var(--bg);
}

.app-chrome {
  position: relative;
  /* Must stay above .palette-panel (z-index 1) so the shelf slides out from behind. */
  z-index: 2;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: visible;
}

/* Tight windows / 13": 75% zoom, panel occupies 403px. */
@media (min-width: 901px) and (max-width: 1600px) {
  :root {
    --ui-compact-zoom: 0.75;
    --ui-panel-width: 403px;
    --panel-label-size: 17px;
  }

  .app {
    grid-template-columns: var(--ui-chrome-width) 1fr;
  }

  .controls-panel__zoom {
    width: calc(var(--ui-panel-width) / var(--ui-compact-zoom));
    zoom: var(--ui-compact-zoom);
  }

  .palette-panel__inner {
    width: calc(var(--ui-panel-width) / var(--ui-compact-zoom));
    height: calc(100% / var(--ui-compact-zoom));
    zoom: var(--ui-compact-zoom);
  }

  .canvas-view-original-badge,
  .ui-icon-btn {
    font-size: 13px;
  }

  .panel-hint,
  .shortcut-list__keys kbd,
  .export-group__title,
  .export-group__meta,
  .video-import-dialog__fps-label,
  .has-hint::after {
    font-size: 14px;
  }

  .shortcut-list__keys,
  .video-import-dialog__fps-note,
  .color-swatch,
  .rfrct-color-picker__hex,
  .rfrct-color-picker__channel {
    font-size: 16px;
  }

  .controls-panel__tab,
  .shortcut-list__row,
  .panel-btn,
  .button-row button,
  .timeline__controls > button,
  .frame-context-menu__item,
  .app-toast,
  .import-error-dialog__message,
  .reset-canvas-dialog__message,
  .control-row .ui-select__trigger,
  .ui-select__option,
  .rfrct-color-picker__scale-trigger,
  .rfrct-color-picker__scale-option,
  .palette-panel__tab,
  .palette-gallery__label {
    font-size: 17px;
  }

  .panel-section h2,
  .import-error-dialog__title,
  .reset-canvas-dialog__title,
  .palette-panel__title,
  .timeline__frame-index,
  .timeline__blur-note,
  .ui-select.timeline__fps .ui-select__trigger {
    font-size: 19px;
  }

  .ui-select__menu.timeline__fps .ui-select__option {
    font-size: 19px;
  }

  .ui-icon-btn--remove {
    font-size: calc(var(--ui-switch-height) * 0.55);
  }

  .about-overlay__content p {
    font-size: 48px;
  }
}

/* 15" laptop / 1080p: 87.5% zoom, panel occupies 403px. */
@media (min-width: 1601px) and (max-width: 1920px) {
  :root {
    --ui-compact-zoom: 0.875;
    --ui-panel-width: 403px;
    --panel-label-size: 18px;
  }

  .app {
    grid-template-columns: var(--ui-chrome-width) 1fr;
  }

  .controls-panel__zoom {
    width: calc(var(--ui-panel-width) / var(--ui-compact-zoom));
    zoom: var(--ui-compact-zoom);
  }

  .palette-panel__inner {
    width: calc(var(--ui-panel-width) / var(--ui-compact-zoom));
    height: calc(100% / var(--ui-compact-zoom));
    zoom: var(--ui-compact-zoom);
  }

  .canvas-view-original-badge,
  .ui-icon-btn {
    font-size: 14px;
  }

  .panel-hint,
  .shortcut-list__keys kbd,
  .panel-credit,
  .export-group__title,
  .export-group__meta,
  .video-import-dialog__fps-label,
  .has-hint::after {
    font-size: 15px;
  }

  .shortcut-list__keys,
  .video-import-dialog__fps-note,
  .color-swatch,
  .rfrct-color-picker__hex,
  .rfrct-color-picker__channel {
    font-size: 17px;
  }

  .controls-panel__tab,
  .shortcut-list__row,
  .panel-btn,
  .button-row button,
  .timeline__controls > button,
  .frame-context-menu__item,
  .app-toast,
  .import-error-dialog__message,
  .reset-canvas-dialog__message,
  .control-row .ui-select__trigger,
  .ui-select__option,
  .rfrct-color-picker__scale-trigger,
  .rfrct-color-picker__scale-option,
  .palette-panel__tab,
  .palette-gallery__label {
    font-size: 18px;
  }

  .panel-section h2,
  .import-error-dialog__title,
  .reset-canvas-dialog__title,
  .palette-panel__title,
  .timeline__frame-index,
  .timeline__blur-note,
  .ui-select.timeline__fps .ui-select__trigger {
    font-size: 20px;
  }

  .ui-select__menu.timeline__fps .ui-select__option {
    font-size: 20px;
  }

  .ui-icon-btn--remove {
    font-size: calc(var(--ui-switch-height) * 0.55);
  }

  .about-overlay__content p {
    font-size: 48px;
  }
}

/* Above 2560: scale the 420px chrome so it keeps the same share as 2560.
   3840×2160 → 1.5×. Height cap keeps ultrawide from overflowing. */
@media (min-width: 2561px) {
  :root {
    --ui-compact-zoom: min(100vw / 2560px, 100dvh / 1440px);
    --ui-chrome-width: calc(var(--ui-panel-width) * var(--ui-compact-zoom));
  }

  .app {
    grid-template-columns: var(--ui-chrome-width) 1fr;
  }

  .controls-panel__zoom {
    width: var(--ui-panel-width);
    zoom: var(--ui-compact-zoom);
  }

  .palette-panel__inner {
    width: var(--ui-panel-width);
    height: calc(100% / var(--ui-compact-zoom));
    zoom: var(--ui-compact-zoom);
  }
}

.workspace {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.app:fullscreen,
.app:-webkit-full-screen {
  grid-template-columns: 1fr;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  background: var(--bg);
}

.workspace.is-fullscreen,
.app:fullscreen .workspace,
.app:-webkit-full-screen .workspace {
  height: 100%;
  min-height: 0;
}

.canvas-stage {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  padding: 28px;
  min-height: 0;
  overflow: hidden;
  transition: padding 0.4s var(--ui-ease);
}

.canvas-stage__frame {
  display: contents;
}

.mosaic-canvas-stack {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.mosaic-overlay {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.mosaic-canvas.is-piece-select {
  cursor: var(--cursor-pointer);
  touch-action: none;
}

.mosaic-canvas.is-grab-piece {
  cursor: var(--cursor-grab);
  touch-action: none;
}

.mosaic-canvas.is-grabbing-piece {
  cursor: var(--cursor-grabbing);
  touch-action: none;
}

.canvas-stage-controls {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}

.canvas-stage-control-icon {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.canvas-stage.is-fullscreen .canvas-stage-controls {
  right: 20px;
  top: 20px;
}

.canvas-stage.is-inspecting {
  padding: 0;
  place-items: stretch;
}

.canvas-stage.is-inspecting .canvas-stage__frame {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 28px;
}

.canvas-stage.is-inspecting .mosaic-canvas {
  flex-shrink: 0;
}

.canvas-stage.is-fullscreen {
  padding: 0;
}

.mosaic-canvas {
  display: block;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.22);
  transition: box-shadow 0.4s var(--ui-ease);
}

.canvas-view-original-badge {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 2;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  pointer-events: none;
}

.canvas-stage.is-fullscreen .canvas-view-original-badge {
  right: 20px;
  top: 20px;
}

.canvas-shortcut-legend {
  right: auto;
  top: 16px;
  left: 16px;
  bottom: auto;
  background: var(--bg);
  color: var(--chrome);
  animation: canvas-shortcut-legend-fade 1.15s var(--ui-ease) forwards;
}

.canvas-stage.is-fullscreen .canvas-shortcut-legend {
  right: auto;
  top: 20px;
  left: 20px;
  bottom: auto;
}

@keyframes canvas-shortcut-legend-fade {
  0%,
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.canvas-stage.is-fullscreen .mosaic-canvas {
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .canvas-stage,
  .mosaic-canvas {
    transition: none;
  }

  .canvas-shortcut-legend {
    animation-duration: 1s;
    animation-timing-function: step-end;
  }

  .panel-btn:hover:not(:disabled)::before,
  .button-row button:hover:not(:disabled)::before,
  .timeline__controls > button:hover:not(:disabled)::before,
  .canvas-stage-control-btn:hover:not(:disabled)::before,
  .frame-context-menu__item:hover:not(:disabled)::before,
  .ui-icon-btn:hover::before,
  .palette-panel__close:hover::before {
    animation: none;
    opacity: 1;
  }

  .palette-gallery__item:hover .palette-gallery__label {
    animation: none;
    opacity: 1;
  }

  .timeline-thumb:hover:not(.is-active) {
    animation: none;
    border-color: var(--ink);
  }

  .color-swatch:hover:not(:disabled) .color-swatch__hex {
    animation: none;
    opacity: 1;
  }
}

html.normal-hover .panel-btn:hover:not(:disabled)::before,
html.normal-hover .button-row button:hover:not(:disabled)::before,
html.normal-hover .timeline__controls > button:hover:not(:disabled)::before,
html.normal-hover .canvas-stage-control-btn:hover:not(:disabled)::before,
html.normal-hover .frame-context-menu__item:hover:not(:disabled)::before,
html.normal-hover .ui-icon-btn:hover::before,
html.normal-hover .palette-panel__close:hover::before {
  animation: none;
  opacity: 1;
}

html.normal-hover .palette-gallery__item:hover .palette-gallery__label {
  animation: none;
  opacity: 1;
}

html.normal-hover .controls-panel__tab:hover:not(.is-active),
html.normal-hover .headline-disclosure:hover,
html.normal-hover .panel-credit__author:hover,
html.normal-hover .panel-credit__source:hover,
html.normal-hover .panel-credit__social a:hover {
  animation: none;
  opacity: 1;
}

html.normal-hover .palette-panel__tab:hover:not(.is-active) {
  animation: none;
}

html.normal-hover .timeline-thumb:hover:not(.is-active) {
  animation: none;
  border-color: var(--ink);
}

html.normal-hover .color-swatch:hover:not(:disabled) .color-swatch__hex {
  animation: none;
  opacity: 1;
}

.controls-panel {
  position: relative;
  z-index: 3;
  background: var(--panel);
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: none;
  scrollbar-gutter: stable;
  height: 100%;
}

.controls-panel__zoom {
  box-sizing: border-box;
  padding: 0 20px 48px;
}

.controls-panel__head {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

.controls-panel__tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 0 -20px;
  padding: 0 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--panel-border);
}

.controls-panel__tab {
  appearance: none;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  padding: 16px 0 14px;
  cursor: var(--cursor-default);
  position: relative;
}

.controls-panel__tab:hover:not(.is-active) {
  color: var(--text);
  animation: hover-plate-blink calc(4s / 30) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .controls-panel__tab:hover:not(.is-active) {
    animation: none;
  }
}

.controls-panel__tab:focus-visible {
  outline: 1px solid var(--brand);
  outline-offset: -1px;
}

.controls-panel__tab.is-active {
  color: var(--chrome);
  cursor: var(--cursor-default);
}

.controls-panel__tab-line {
  position: absolute;
  left: 20px;
  bottom: -1px;
  width: calc((100% - 40px) / 3);
  height: 2px;
  background: var(--chrome);
  pointer-events: none;
}

.controls-panel__tabs + .panel-section {
  margin-top: 0;
  border-top: none;
}

.controls-panel__logo {
  display: block;
  width: 100%;
  height: auto;
  cursor: var(--cursor-default);
}

.controls-panel__logo:not(:hover):not(:focus-visible) {
  --logo-fill-4: var(--panel);
}

.controls-panel__logo svg {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.panel-section {
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid var(--panel-border);
}

.panel-section h2 {
  margin: 0 0 var(--settings-row-gap);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--brand);
  transition: color 0.18s var(--ui-ease);
}

.panel-section.is-off h2,
.panel-section.is-off .headline-toggle h2,
.panel-section.is-off .headline-toggle h3,
.panel-section.is-off .headline-toggle-with-pause h2,
.panel-section.is-off .headline-toggle-with-pause h3 {
  color: var(--muted);
}

.collapsible-controls {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    grid-template-rows var(--panel-slide-duration) var(--panel-slide-ease),
    opacity 0.22s var(--panel-slide-ease),
    visibility 0s linear var(--panel-slide-duration);
}

.collapsible-controls.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    grid-template-rows var(--panel-slide-duration) var(--panel-slide-ease),
    opacity 0.28s var(--panel-slide-ease) 0.06s,
    visibility 0s;
}

.collapsible-controls__inner {
  min-height: 0;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .collapsible-controls,
  .collapsible-controls.is-open {
    transition: none;
  }
}

.panel-hint {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.shortcut-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.shortcut-list__row {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: 15px;
  line-height: 1.4;
}

.shortcut-list__keys {
  margin: 0;
  color: var(--chrome);
  font-size: 14px;
  letter-spacing: 0.02em;
}

.shortcut-list__keys kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--fill-faint);
  border: 1px solid var(--panel-border);
  font: inherit;
  font-size: 13px;
  text-align: center;
  text-transform: uppercase;
}

.shortcut-list__desc {
  margin: 0;
  color: var(--muted);
}

.panel-credit {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--panel-border);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
}

.panel-credit p {
  margin: 0;
}

.panel-credit__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.panel-credit__social a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: inherit;
  text-decoration: none;
}

.panel-credit__social a::before {
  content: "";
  position: absolute;
  inset: -12px;
}

.panel-credit__author,
.panel-credit__source {
  appearance: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: inherit;
  line-height: inherit;
  color: var(--chrome);
  background: none;
  cursor: var(--cursor-pointer);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--chrome) 45%, transparent);
  text-underline-offset: 2px;
  transition: color 0.1s linear;
}

.panel-credit__author:hover,
.panel-credit__source:hover {
  color: #fff;
  text-decoration-color: #fff;
  animation: hover-plate-blink calc(4s / 30) linear infinite;
}

.panel-credit svg,
.panel-credit__icon {
  display: block;
  width: 24px;
  height: 24px;
}

.panel-credit__icon--x {
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3csvg%20width='1200'%20height='1227'%20viewBox='0%200%201200%201227'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M714.163%20519.284L1160.89%200H1055.03L667.137%20450.887L357.328%200H0L468.492%20681.821L0%201226.37H105.866L515.491%20750.218L842.672%201226.37H1200L714.137%20519.284H714.163ZM569.165%20687.828L521.697%20619.934L144.011%2079.6944H306.615L611.412%20515.685L658.88%20583.579L1055.08%201150.3H892.476L569.165%20687.854V687.828Z'%20fill='white'/%3e%3c/svg%3e");
  mask-image: url("data:image/svg+xml,%3csvg%20width='1200'%20height='1227'%20viewBox='0%200%201200%201227'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M714.163%20519.284L1160.89%200H1055.03L667.137%20450.887L357.328%200H0L468.492%20681.821L0%201226.37H105.866L515.491%20750.218L842.672%201226.37H1200L714.137%20519.284H714.163ZM569.165%20687.828L521.697%20619.934L144.011%2079.6944H306.615L611.412%20515.685L658.88%20583.579L1055.08%201150.3H892.476L569.165%20687.854V687.828Z'%20fill='white'/%3e%3c/svg%3e");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.panel-credit__social a:hover {
  color: var(--text);
  animation: hover-plate-blink calc(4s / 30) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .panel-credit__author:hover,
  .panel-credit__source:hover,
  .panel-credit__social a:hover {
    animation: none;
  }
}

.import-file-input {
  display: none;
}

@keyframes hover-plate-blink {
  0%,
  50% {
    opacity: 1;
  }
  50.001%,
  100% {
    opacity: 0;
  }
}

@keyframes hover-border-blink {
  0%,
  50% {
    border-color: var(--ink);
  }
  50.001%,
  100% {
    border-color: var(--thumb-border);
  }
}

.panel-btn,
.button-row button,
.timeline__controls > button,
.canvas-stage-control-btn,
.frame-context-menu__item {
  --hover-plate-on: var(--accent-hover);
  --hover-plate-off: var(--fill-faint);
  position: relative;
  isolation: isolate;
  appearance: none;
  border: none;
  background: var(--hover-plate-off);
  color: var(--chrome);
  border-radius: var(--control-radius);
  box-sizing: border-box;
  min-height: var(--control-height);
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: var(--cursor-default);
  transition: background 0.1s linear;
}

.panel-btn::before,
.button-row button::before,
.timeline__controls > button::before,
.canvas-stage-control-btn::before,
.frame-context-menu__item::before,
.ui-icon-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hover-plate-on);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s linear;
}

.panel-btn {
  width: 100%;
  margin-bottom: 20px;
}

a.panel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.panel-btn:hover:not(:disabled)::before,
.button-row button:hover:not(:disabled)::before,
.timeline__controls > button:hover:not(:disabled)::before,
.canvas-stage-control-btn:hover:not(:disabled)::before,
.frame-context-menu__item:hover:not(:disabled)::before,
.ui-icon-btn:hover:not(:disabled)::before,
.palette-panel__close:hover::before {
  animation: hover-plate-blink calc(4s / 30) linear infinite;
}

.panel-btn:hover:not(:disabled),
.button-row button:hover:not(:disabled):not(.is-active),
.timeline__controls > button:hover:not(:disabled):not(.is-active),
.canvas-stage-control-btn:hover:not(:disabled):not(.is-active),
.frame-context-menu__item:hover:not(:disabled) {
  color: var(--brand);
}

.panel-btn:active:not(:disabled),
.button-row button:active:not(:disabled):not(.is-active),
.timeline__controls > button:active:not(:disabled):not(.is-active),
.canvas-stage-control-btn:active:not(:disabled):not(.is-active),
.frame-context-menu__item:active:not(:disabled) {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: var(--glow-brand);
  transition:
    background 0s,
    color 0s;
}

.panel-btn:active:not(:disabled)::before,
.button-row button:active:not(:disabled):not(.is-active)::before,
.timeline__controls > button:active:not(:disabled):not(.is-active)::before,
.canvas-stage-control-btn:active:not(:disabled):not(.is-active)::before,
.frame-context-menu__item:active:not(:disabled)::before {
  animation: none;
  opacity: 0;
  transition: none;
}

.button-row button:disabled,
.panel-btn:disabled,
.frame-context-menu__item:disabled {
  opacity: 0.35;
  cursor: var(--cursor-not-allowed);
}

.export-group {
  margin-top: 16px;
}

.export-group + .export-group {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--panel-border);
}

.export-group__title {
  margin: 0 0 var(--settings-row-gap);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--text);
  transition: color 0.18s var(--ui-ease);
}

.export-group.is-off .export-group__title {
  color: var(--muted);
}

.export-group__meta {
  margin: -4px 0 20px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

.export-group__meta.is-warn {
  color: var(--chrome);
}

.app-toast {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 15px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  border: 1px solid var(--panel-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  zoom: var(--ui-compact-zoom);
}

.import-error-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
}

.import-error-dialog {
  width: min(100%, 360px);
  padding: 20px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  zoom: calc(var(--ui-compact-zoom) * 1.2);
}

.import-error-dialog__title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.import-error-dialog__message {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

.import-error-dialog__button {
  width: 100%;
}

.modal-backdrop,
.reset-canvas-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  isolation: isolate;
  transition: background 0.2s var(--ui-ease);
}

.modal-backdrop.is-open,
.reset-canvas-backdrop.is-open {
  background: rgba(0, 0, 0, 0.48);
  pointer-events: auto;
}

.modal-backdrop.is-open::before,
.reset-canvas-backdrop.is-open::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.modal-dialog,
.reset-canvas-dialog {
  position: relative;
  isolation: isolate;
  width: min(100%, 360px);
  padding: 20px;
  border-radius: var(--control-radius);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition:
    opacity 0.35s var(--ui-ease),
    transform 0.4s var(--ui-ease);
  zoom: calc(var(--ui-compact-zoom) * 1.2);
}

@keyframes modal-blink-reveal {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.975);
    background-color: #fff;
  }
  16% {
    opacity: 1;
    transform: translateY(9px) scale(0.985);
    background-color: color-mix(in srgb, #fff 45%, var(--panel));
  }
  34% {
    opacity: 0.42;
    transform: translateY(11px) scale(0.982);
    background-color: color-mix(in srgb, #fff 72%, var(--panel));
  }
  52% {
    opacity: 1;
    transform: translateY(5px) scale(0.992);
    background-color: color-mix(in srgb, #fff 25%, var(--panel));
  }
  100% {
    opacity: 1;
    transform: none;
    background-color: var(--panel);
  }
}

.modal-backdrop.is-open .modal-dialog,
.modal-backdrop.is-open .reset-canvas-dialog,
.reset-canvas-backdrop.is-open .reset-canvas-dialog,
.reset-canvas-backdrop.is-open .modal-dialog {
  opacity: 1;
  transform: none;
  animation: modal-blink-reveal 300ms steps(5, end) both;
}

.reset-canvas-dialog__title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--text);
  text-transform: uppercase;
}

.reset-canvas-dialog__message {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

.reset-canvas-dialog__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.reset-canvas-dialog__actions .panel-btn {
  margin-bottom: 0;
}

.typewriter-reveal__caret {
  display: inline-block;
  width: 0.55em;
  height: 0.9em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: -0.12em;
  animation: typewriter-reveal-caret-blink 0.64s steps(1) infinite;
}

.typewriter-reveal {
  position: relative;
  display: block;
}

.typewriter-reveal__ghost {
  visibility: hidden;
  pointer-events: none;
  white-space: pre-wrap;
}

.typewriter-reveal__live {
  position: absolute;
  inset: 0;
  white-space: pre-wrap;
}

@keyframes typewriter-reveal-caret-blink {
  50% {
    opacity: 0;
  }
}

.video-import-dialog {
  width: min(100%, 420px);
}

.video-import-dialog__file {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-weight: 500;
  word-break: break-all;
}

.video-import-dialog__meta,
.video-import-dialog__note {
  display: block;
}

.video-import-dialog__note {
  margin-top: 8px;
  color: var(--text);
}

.video-import-dialog__fps {
  margin-bottom: 16px;
}

.video-import-dialog__fps-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.video-import-dialog__fps-row {
  margin-bottom: 8px;
}

.video-import-dialog__fps-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
}

.about-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  overflow: visible;
  padding: 0;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background 0.2s var(--ui-ease);
}

.about-overlay.is-open {
  /* Tint + blur on this node. A ::before child only frosts the overlay fill. */
  background: rgba(0, 0, 0, 0.48);
  pointer-events: auto;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.about-overlay__scroll {
  position: relative;
  isolation: isolate;
  width: min(100%, 1056px);
  max-height: 100%;
  margin: auto;
  overflow-y: auto;
  padding: 64px 32px;
  text-align: left;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.35s var(--ui-ease),
    transform 0.4s var(--ui-ease);
}

.about-overlay.is-open .about-overlay__scroll {
  opacity: 1;
  transform: none;
}

.about-overlay__content p {
  margin: 0 0 1.15em;
  font-size: 48px;
  line-height: 1.35;
  font-weight: 400;
  color: #ffffff;
}

.about-overlay__content p:last-child {
  margin-bottom: 0;
}

.about-overlay__content p.about-overlay__links {
  margin-top: 0.5em;
  font-size: calc(48px * 2 / 3);
}

.about-overlay__ok {
  width: auto;
  min-width: 8em;
  margin: 1.6em 0 0;
  font-size: calc(15px * 1.5);
  min-height: calc(var(--control-height) * 1.5);
  padding: calc(10px * 1.5) calc(18px * 1.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.about-overlay__ok.is-in {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.about-overlay__ok .typewriter-reveal {
  display: inline-block;
}

.about-overlay__content a {
  color: inherit;
  text-underline-offset: 0.12em;
}

.about-overlay__content a:hover {
  animation: hover-plate-blink calc(4s / 30) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .about-overlay__content a:hover {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-overlay,
  .about-overlay__scroll {
    transition-duration: 0.01ms;
  }

  .about-overlay__scroll {
    transform: none;
  }
}

@media (max-width: 720px) {
  .about-overlay__scroll {
    padding: 48px 20px;
  }

  .about-overlay__content p {
    font-size: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop,
  .modal-dialog,
  .reset-canvas-backdrop,
  .reset-canvas-dialog {
    transition-duration: 0.01ms;
  }

  .modal-dialog,
  .reset-canvas-dialog {
    transform: none;
    animation: none;
  }
}

.timeline__controls > button:disabled {
  opacity: 0.35;
  cursor: var(--cursor-not-allowed);
}

.button-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: var(--settings-row-gap);
}

.button-row--3 {
  grid-template-columns: repeat(3, 1fr);
}

.button-row--choice button.is-active {
  cursor: var(--cursor-default);
}

.button-row--choice button.is-active:hover::before {
  animation: none;
  opacity: 0;
}

html.normal-hover .button-row--choice button.is-active:hover::before {
  opacity: 0;
}

.button-row--shape-icons button.is-active.is-sole,
.button-row--shape-icons .shape-slot--custom.is-active.is-sole {
  cursor: var(--cursor-default);
}

.button-row--shape-icons button.is-active.is-sole:hover::before,
.button-row--shape-icons .shape-slot--custom.is-active.is-sole:hover::before {
  animation: none;
  opacity: 0;
}

html.normal-hover .button-row--shape-icons button.is-active.is-sole:hover::before,
html.normal-hover
  .button-row--shape-icons
  .shape-slot--custom.is-active.is-sole:hover::before {
  opacity: 0;
}

.button-row--4 {
  grid-template-columns: repeat(4, 1fr);
}

.button-row--shape-icons + .button-row--shape-icons {
  margin-top: calc(8px - var(--settings-row-gap));
}

.button-row--shape-icons > button,
.button-row--shape-icons .shape-slot-wrap > .shape-slot--custom {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  min-height: 0;
  height: auto;
  width: 100%;
}

.button-row--shape-icons .shape-slot-wrap {
  position: relative;
  min-width: 0;
}

.button-row--shape-icons .shape-slot-wrap .ui-icon-btn--remove {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 2;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  border-radius: 0;
  background: var(--chrome);
  color: var(--on-chrome);
  text-shadow: none;
}

.button-row--shape-icons .shape-slot-wrap .ui-icon-btn--remove:hover {
  color: var(--on-chrome);
  background: var(--chrome);
}

.button-row--shape-icons .shape-slot--custom.is-active {
  /* Photos: active = accent stroke only, no chrome plate glow. */
  background: var(--hover-plate-off);
  color: var(--chrome);
  box-shadow: none;
}

.button-row--shape-icons .shape-icon {
  width: calc(100% * 2 / 3);
  height: calc(100% * 2 / 3);
  display: block;
  flex-shrink: 0;
}

.button-row button:not(.is-active) svg,
.canvas-stage-control-btn:not(.is-active) svg,
.timeline__controls > button:not(.is-active) svg,
.palette-panel__close svg,
.ui-icon-btn svg {
  filter:
    drop-shadow(
      0 0 calc(var(--glow-blur-tight) * 0.75)
        color-mix(in srgb, currentColor var(--glow-mix-tight), transparent)
    )
    drop-shadow(
      0 0 calc(var(--glow-blur-wide) * 0.75)
        color-mix(in srgb, currentColor var(--glow-mix-wide), transparent)
    );
}

.button-row button.is-active,
.timeline__controls > button.is-active,
.canvas-stage-control-btn.is-active {
  --hover-plate-on: var(--brand);
  --hover-plate-off: var(--chrome-fill);
  background: var(--chrome-fill);
  color: var(--on-chrome);
  box-shadow: var(--glow-outer);
  transition:
    background 0s,
    color 0s;
}

.panel-btn.is-pressed:not(:disabled),
.button-row button.is-pressed:not(:disabled):not(.is-active),
.timeline__controls > button.is-pressed:not(:disabled),
.canvas-stage-control-btn.is-pressed:not(:disabled),
.frame-context-menu__item.is-pressed:not(:disabled) {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: var(--glow-brand);
  transition:
    background 0s,
    color 0s;
}

.panel-btn.is-pressed:not(:disabled)::before,
.button-row button.is-pressed:not(:disabled):not(.is-active)::before,
.timeline__controls > button.is-pressed:not(:disabled)::before,
.canvas-stage-control-btn.is-pressed:not(:disabled)::before,
.frame-context-menu__item.is-pressed:not(:disabled)::before {
  animation: none;
  opacity: 0;
  transition: none;
}

.canvas-stage-control-btn {
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  min-height: var(--icon-btn-size);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-row {
  display: grid;
  grid-template-rows:
    minmax(var(--settings-label-h), auto)
    minmax(var(--settings-control-h), auto);
  gap: var(--settings-inner-gap);
  margin-bottom: var(--settings-row-gap);
  align-items: start;
  transition: opacity 0.18s var(--ui-ease);
}

.panel-section > :last-child,
.collapsible-controls__inner > :last-child {
  margin-bottom: 0;
}

.panel-section > .color-swatch-wrap:last-child .panel-btn {
  margin-bottom: 0;
}

.control-row__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--settings-label-h);
  font-size: var(--panel-label-size);
  line-height: 1.2;
  color: var(--muted);
}

.control-row__value {
  color: var(--text);
}

/* Fill is painted on the input itself — WebKit does not pass custom
   properties into ::-webkit-slider-runnable-track. Input height matches
   the thumb so the 4px fill and the ball share the same vertical center. */
.control-row input[type="range"] {
  --val: 0;
  --origin: 0;
  --pos: calc(var(--val) * 1%);
  --orig: calc(var(--origin) * 1%);
  --fill: var(--chrome);
  --empty: var(--fill-mid);
  --thumb: 14px;
  --track: 4px;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--thumb);
  margin: 0;
  background: linear-gradient(
    to right,
    var(--empty) 0%,
    var(--empty) min(var(--orig), var(--pos)),
    var(--fill) min(var(--orig), var(--pos)),
    var(--fill) max(var(--orig), var(--pos)),
    var(--empty) max(var(--orig), var(--pos)),
    var(--empty) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% var(--track);
  background-position: center;
  cursor: var(--cursor-default);
}

.control-row input[type="range"]:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

.control-row input[type="range"]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 14px;
  background: transparent;
  border: none;
}

.control-row input[type="range"]::-moz-range-track {
  height: 4px;
  background: transparent;
  border: none;
}

.control-row input[type="range"]::-moz-range-progress {
  background: transparent;
}

.control-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: 0;
  border: none;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px var(--panel);
  cursor: var(--cursor-default);
}

.control-row input[type="range"]::-moz-range-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px var(--panel);
  cursor: var(--cursor-default);
}

.control-row input[type="range"]:active::-webkit-slider-thumb {
  border-radius: 0;
}

.control-row input[type="range"]:active::-moz-range-thumb {
  border-radius: 0;
}

.control-row--muted {
  opacity: 0.4;
}

.control-row--muted input[type="range"],
.control-row--muted input[type="checkbox"],
.control-row--muted .ui-select,
.control-row--muted .color-swatch {
  pointer-events: none;
}

.color-swatch:disabled {
  cursor: var(--cursor-not-allowed);
}

.control-row__label--solo {
  margin-bottom: var(--settings-row-gap);
}

.control-row__label--with-action {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.text-action-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: var(--cursor-pointer);
  color: var(--chrome);
}

.text-action-btn:disabled {
  opacity: 0.35;
  cursor: var(--cursor-not-allowed);
}

.button-row--shape-icons .shape-icon--custom {
  width: 100%;
  height: 100%;
  /* Opaque photos fill the slot; cutouts opt into contain via fit. */
  object-fit: cover;
  box-sizing: border-box;
  border: 0;
  outline: none;
  /* Photos must not pick up the inactive SVG icon glow. */
  filter: none;
  box-shadow: none;
  pointer-events: none;
}

.button-row--shape-icons .shape-icon--custom-contain {
  object-fit: contain;
}

.button-row--shape-icons .shape-slot--custom.is-active .shape-icon--custom {
  box-shadow: inset 0 0 0 2px var(--chrome);
}

.button-row--shape-icons .shape-slot-placeholder {
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1;
  color: currentColor;
}

.has-hint {
  position: relative;
  cursor: var(--cursor-default);
}

.has-hint::after {
  content: attr(data-hint);
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  width: max-content;
  max-width: 240px;
  padding: 8px 10px;
  border-radius: 4px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.15s var(--ui-ease),
    transform 0.15s var(--ui-ease);
}

.has-hint:hover::after,
.has-hint:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.075s var(--ui-ease),
    transform 0.075s var(--ui-ease);
}

.has-hint:focus-visible {
  outline: none;
}

.control-row .ui-select {
  width: 100%;
}

.control-row .ui-select__trigger {
  appearance: none;
  width: 100%;
  box-sizing: border-box;
  min-height: var(--control-height);
  background-color: var(--fill-faint);
  background-image: var(--ui-chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 8px 8px;
  border: 1px solid var(--panel-border);
  color: var(--chrome);
  border-radius: 0;
  padding: 8px 32px 8px 10px;
  font: inherit;
  font-size: 16px;
  line-height: 1.2;
  text-align: left;
  cursor: var(--cursor-default);
}

.control-row .ui-select__trigger:disabled {
  cursor: var(--cursor-not-allowed);
}

.control-row .ui-select__trigger:focus,
.control-row .ui-select__trigger:focus-visible {
  outline: none;
}

.control-row .button-row {
  margin-bottom: 0;
}

.ui-select__menu {
  position: fixed;
  z-index: 120;
  margin: 0;
  padding: 4px 0;
  box-sizing: border-box;
  max-height: min(360px, calc(100dvh - 16px));
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 0;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  user-select: none;
  zoom: var(--ui-compact-zoom);
}

.ui-select__option {
  --hover-plate-on: var(--accent-hover);
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  cursor: var(--cursor-default);
}

.ui-select__option::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hover-plate-on);
  opacity: 0;
  pointer-events: none;
}

.ui-select__option.is-selected {
  color: var(--chrome);
}

.ui-select__option.is-active:not(.is-disabled)::before {
  animation: hover-plate-blink calc(4s / 30) linear infinite;
}

.ui-select__option.is-active:not(.is-disabled) {
  color: var(--brand);
}

.ui-select__option.is-disabled {
  opacity: 0.35;
  cursor: var(--cursor-not-allowed);
}

.ui-select__option:focus,
.ui-select__option:focus-visible {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .ui-select__option.is-active:not(.is-disabled)::before {
    animation: none;
    opacity: 1;
  }
}

html.normal-hover .ui-select__option.is-active:not(.is-disabled)::before {
  animation: none;
  opacity: 1;
}

.control-row--toggle {
  grid-template-columns: 1fr auto;
  grid-template-rows: minmax(var(--settings-label-h), auto);
  align-items: center;
}

.control-row--toggle .control-row__label {
  grid-row: 1;
  grid-column: 1;
}

.control-row--toggle .ui-switch {
  grid-row: 1;
  grid-column: 2;
}

.headline-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 var(--settings-row-gap);
  transition: margin-bottom var(--panel-slide-duration) var(--panel-slide-ease);
}

.headline-toggle.is-off {
  margin-bottom: 0;
}

.headline-disclosure {
  appearance: none;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: var(--cursor-default);
}

.headline-disclosure:focus {
  outline: none;
}

.headline-disclosure:focus-visible h2 {
  color: var(--chrome);
}

.headline-disclosure__caret {
  display: block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  background: var(--ui-chevron);
  transform: rotate(-90deg);
  transition: transform var(--panel-slide-duration) var(--panel-slide-ease);
}

.headline-disclosure.is-off .headline-disclosure__caret {
  transform: rotate(90deg);
}

.headline-disclosure:hover {
  animation: hover-plate-blink calc(4s / 30) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .headline-toggle,
  .headline-disclosure__caret {
    transition: none;
  }

  .headline-disclosure:hover {
    animation: none;
  }
}

.headline-toggle--sub {
  margin: 0 0 var(--settings-row-gap);
}

.headline-toggle h2,
.headline-toggle h3 {
  margin: 0;
  transition: color 0.18s var(--ui-ease);
}

.headline-toggle.is-off h2,
.headline-toggle.is-off h3 {
  color: var(--muted);
}

.headline-disclosure:hover h2,
.panel-section.is-off .headline-disclosure:hover h2 {
  color: var(--brand);
}

.headline-disclosure:hover .headline-disclosure__caret {
  background: conic-gradient(
    from 225deg at 50% 50%,
    var(--brand) 0 90deg,
    transparent 90deg
  );
}

.ui-icon-btn {
  --hover-plate-on: var(--accent-hover);
  --hover-plate-off: rgba(0, 0, 0, 0.5);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  font-size: 12px;
  width: var(--ui-icon-btn-size);
  min-width: var(--ui-icon-btn-size);
  height: var(--ui-icon-btn-size);
  min-height: var(--ui-icon-btn-size);
  border: none;
  border-radius: 0;
  background: var(--hover-plate-off);
  cursor: var(--cursor-default);
  padding: 0;
}

.ui-icon-btn--pause {
  color: #fff;
  opacity: 0.28;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.ui-icon-btn--pause.has-hint::after {
  left: auto;
  right: calc(-1 * var(--ui-icon-btn-size) - 8px);
  max-width: 216px;
}

.ui-icon-btn--pause:hover:not(:disabled) {
  opacity: 0.85;
}

.ui-icon-btn--pause.is-locked {
  opacity: 1;
  color: #ff3b3b;
  background: rgba(0, 0, 0, 0.72);
}

.ui-icon-btn--pause.is-locked:hover:not(:disabled) {
  opacity: 1;
}

.ui-icon-btn--pause:disabled {
  cursor: var(--cursor-not-allowed);
}

.ui-icon-btn--remove {
  color: rgba(255, 255, 255, 0.92);
  font-size: calc(var(--ui-icon-btn-size) * 0.55);
  line-height: 1;
  text-shadow:
    0 0 var(--glow-blur-tight)
      color-mix(in srgb, currentColor var(--glow-mix-tight), transparent),
    0 0 var(--glow-blur-wide)
      color-mix(in srgb, currentColor var(--glow-mix-wide), transparent);
}

.ui-icon-btn svg {
  width: calc(var(--ui-icon-btn-size) * 0.55);
  height: calc(var(--ui-icon-btn-size) * 0.55);
}

.ui-icon-btn--remove:hover {
  color: #fff;
}

.control-row-with-pause {
  display: grid;
  grid-template-columns: var(--ui-icon-btn-size) 1fr;
  gap: 8px;
  align-items: start;
  margin-bottom: var(--settings-row-gap);
  transition: opacity 0.18s var(--ui-ease);
}

.control-row-with-pause > .control-row {
  margin-bottom: 0;
  grid-column: 2;
}

.control-row-with-pause > .ui-icon-btn {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  margin-top: calc(var(--settings-label-h) + var(--settings-inner-gap));
}

.control-row-with-pause--toggle > .ui-icon-btn {
  grid-row: 1;
  align-self: center;
  margin-top: 0;
}

.control-row-with-pause--toggle {
  /* Align pause + switch on the same row. */
  display: grid;
  grid-template-columns: var(--ui-icon-btn-size) 1fr;
  align-items: center;
}

.control-row-with-pause--toggle > .control-row {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: 0;
}

.control-row-with-pause--toggle > .ui-icon-btn {
  position: static;
  grid-column: 1;
  grid-row: 1;
  transform: none;
  right: auto;
  top: auto;
}

.control-row-with-pause--muted {
  opacity: 0.4;
}

.control-row-with-pause--muted .control-row input[type="range"],
.control-row-with-pause--muted .ui-icon-btn {
  pointer-events: none;
}

.headline-toggle-with-pause {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--settings-row-gap);
}

.headline-toggle-with-pause--sub {
  margin: 0 0 var(--settings-row-gap);
}

.headline-toggle-with-pause > .headline-toggle {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.headline-toggle-with-pause > .ui-icon-btn {
  position: static;
  right: auto;
  top: auto;
  transform: none;
  margin: 0;
}

.headline-toggle-with-pause.is-off .headline-toggle h2,
.headline-toggle-with-pause.is-off .headline-toggle h3 {
  color: var(--muted);
}

/* Switch adapted from nikk7007/smooth-fox-6 (MIT), scaled down, square. */
.ui-switch {
  --ui-switch-on: var(--brand-green);
  --ui-switch-travel: calc(
    var(--ui-switch-width) - var(--ui-switch-thumb-size) - 2 *
      var(--ui-switch-thumb-inset)
  );
  font-size: 12px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: var(--ui-switch-width);
  height: var(--ui-switch-height);
}

.ui-switch input {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: var(--cursor-default);
}

.ui-switch__track {
  position: absolute;
  inset: 0;
  background-color: var(--fill-mid);
  border-radius: 0;
  transition: 0.4s;
  pointer-events: none;
}

.ui-switch__track::before {
  position: absolute;
  content: "";
  height: var(--ui-switch-thumb-size);
  width: var(--ui-switch-thumb-size);
  left: var(--ui-switch-thumb-inset);
  top: var(--ui-switch-thumb-inset);
  background-color: var(--panel);
  border-radius: 0;
  transition: 0.4s;
}

.ui-switch__track::after {
  position: absolute;
  content: "";
  height: var(--ui-switch-thumb-size);
  width: var(--ui-switch-thumb-size);
  left: var(--ui-switch-thumb-inset);
  top: var(--ui-switch-thumb-inset);
  background: var(--ink);
  opacity: 0;
  border-radius: 0;
  pointer-events: none;
  transition:
    transform 0.4s,
    opacity 0.1s linear;
}

.ui-switch input:checked + .ui-switch__track {
  background-color: var(--ui-switch-on);
  box-shadow:
    0 0 var(--glow-blur-tight)
      color-mix(in srgb, var(--ui-switch-on) var(--glow-mix-tight), transparent),
    0 0 var(--glow-blur-wide)
      color-mix(in srgb, var(--ui-switch-on) var(--glow-mix-wide), transparent);
}

.ui-switch input:focus-visible + .ui-switch__track {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

.ui-switch input:checked + .ui-switch__track::before,
.ui-switch input:checked + .ui-switch__track::after {
  transform: translateX(var(--ui-switch-travel));
}

.ui-switch:hover .ui-switch__track::after {
  animation: hover-plate-blink calc(4s / 30) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ui-switch__track,
  .ui-switch__track::before,
  .ui-switch__track::after {
    transition: none;
  }

  .ui-switch:hover .ui-switch__track::after {
    animation: none;
    opacity: 1;
  }
}

html.normal-hover .ui-switch:hover .ui-switch__track::after {
  animation: none;
  opacity: 1;
}

.palette-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 10px;
  margin-bottom: 24px;
}

.palette-gallery--stack {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-bottom: 0;
}

.palette-gallery--stack .palette-gallery__swatch {
  height: calc(var(--control-height) * 2);
}

.palette-panel-backdrop {
  display: none;
}

.palette-panel {
  /* Portaled to body. Do not nest this in .app-chrome — overflow/zoom/isolation
     there make backdrop-filter sample empty chrome instead of the mosaic. */
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: var(--ui-chrome-width);
  background: var(--glass);
  backdrop-filter: blur(36px);
  -webkit-backdrop-filter: blur(36px);
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.28);
  transition: left var(--panel-slide-duration) var(--panel-slide-ease);
  pointer-events: none;
}

.palette-panel__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.palette-panel.is-open {
  left: var(--ui-chrome-width);
  pointer-events: auto;
}

.palette-panel__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
}

.palette-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 24px 20px 16px;
}

.palette-panel__tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  flex-shrink: 0;
  margin: 0;
  padding: 0 20px;
  border-bottom: 1px solid var(--panel-border);
}

.palette-panel__tab {
  appearance: none;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  padding: 16px 0 14px;
  cursor: var(--cursor-default);
  position: relative;
}

.palette-panel__tab:hover:not(.is-active) {
  color: var(--text);
  animation: hover-plate-blink calc(4s / 30) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .palette-panel__tab:hover:not(.is-active) {
    animation: none;
  }
}

.palette-panel__tab:focus-visible {
  outline: 1px solid var(--brand);
  outline-offset: -1px;
}

.palette-panel__tab.is-active {
  color: var(--chrome);
  cursor: var(--cursor-default);
}

.palette-panel__tab-line {
  position: absolute;
  left: 20px;
  bottom: -1px;
  width: calc((100% - 40px) / 3);
  height: 2px;
  background: var(--chrome);
  pointer-events: none;
}

.palette-panel__title {
  margin: 0;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}

.palette-panel__close {
  --hover-plate-on: var(--accent-hover);
  --hover-plate-off: var(--fill-faint);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 0;
  background: var(--hover-plate-off);
  color: var(--chrome);
  cursor: var(--cursor-default);
  padding: 0;
}

.palette-panel__close::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hover-plate-on);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s linear;
}

.palette-panel__close:hover::before {
  animation: hover-plate-blink calc(4s / 30) linear infinite;
}

.palette-panel__close svg {
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
}

.palette-panel__foot {
  flex-shrink: 0;
  padding: 0 20px 24px;
  border-top: 1px solid var(--panel-border);
  background: var(--glass-foot);
}

.palette-panel__foot .panel-btn {
  margin-bottom: 0;
  margin-top: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .palette-panel {
    transition-duration: 0.01ms;
  }
}

.palette-gallery__item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: var(--cursor-default);
  text-align: left;
}

.palette-gallery__swatch {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: var(--control-height);
  overflow: hidden;
  border-radius: 0;
  transition: transform 0.15s var(--ui-ease);
}

.palette-gallery__swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: none;
  transition: box-shadow 0.15s var(--ui-ease);
}

.palette-gallery__band {
  flex: 1 1 0;
  min-height: 0;
}

.palette-gallery__label {
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--muted);
  transition: color 0.15s var(--ui-ease);
}

.palette-gallery__item:hover .palette-gallery__label {
  color: var(--text);
  animation: hover-plate-blink calc(4s / 30) linear infinite;
}

.palette-gallery__item.is-active .palette-gallery__swatch::after {
  box-shadow: inset 0 0 0 2px var(--chrome);
}

.palette-gallery__item.is-active .palette-gallery__label {
  color: var(--text);
  animation: none;
}

.palette-gallery__item:focus-visible .palette-gallery__swatch::after {
  box-shadow: inset 0 0 0 2px var(--brand-blue);
}

.color-list {
  display: flex;
  flex-direction: column;
}

.color-row {
  display: grid;
  grid-template-rows: 1fr;
}

.color-row__inner {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--settings-row-gap);
  padding-bottom: var(--settings-row-gap);
}

.color-row.is-adding {
  animation: color-row-expand var(--panel-slide-duration) var(--panel-slide-ease)
    both;
}

.color-row.is-removing {
  animation: color-row-collapse var(--panel-slide-duration) var(--panel-slide-ease)
    both;
}

.color-row.is-adding .color-row__inner,
.color-row.is-removing .color-row__inner {
  overflow: hidden;
}

@keyframes color-row-expand {
  from {
    grid-template-rows: 0fr;
  }
  to {
    grid-template-rows: 1fr;
  }
}

@keyframes color-row-collapse {
  from {
    grid-template-rows: 1fr;
  }
  to {
    grid-template-rows: 0fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .color-row.is-adding,
  .color-row.is-removing {
    animation: none;
  }
}

.color-swatch-wrap {
  position: relative;
  display: grid;
  width: 100%;
}

.color-swatch-wrap .panel-btn {
  min-width: 0;
}

.color-swatch-wrap:has(.color-swatch__actions) .panel-btn {
  padding-right: calc(2 * var(--ui-icon-btn-size) + 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
}

.color-swatch {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--control-height);
  border: 2px solid var(--panel-border);
  border-radius: 0;
  cursor: var(--cursor-default);
  padding: 0 40px;
  font: inherit;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.color-swatch:hover:not(:disabled) .color-swatch__hex {
  animation: hover-plate-blink calc(4s / 30) linear infinite;
}

.color-row.is-adding,
.color-row.is-removing {
  pointer-events: none;
}

.color-row.is-removing .color-swatch {
  border-color: #ff3b3b;
}

.color-row.is-adding .color-swatch {
  border-color: var(--brand-green);
}

.color-row.is-removing .color-swatch-wrap::after,
.color-row.is-adding .color-swatch-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  animation: timeline-flood 0.25s linear both;
}

.color-row.is-removing .color-swatch-wrap::after {
  background: #ff3b3b;
}

.color-row.is-adding .color-swatch-wrap::after {
  background: var(--brand-green);
}

.color-swatch__actions {
  /* Position icons inset symmetrically from the swatch stroke. */
  position: absolute;
  z-index: 1;
  top: 8px;
  bottom: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.color-swatch__actions .ui-icon-btn--pause.has-hint::after {
  left: auto;
  right: calc(-1 * var(--ui-icon-btn-size) - 12px);
  max-width: 216px;
}

.timeline {
  position: relative;
  min-width: 0;
  border-top: 1px solid var(--panel-border);
  background: var(--timeline-bg);
  padding: 16px 16px 12px;
}

.timeline__toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 0;
}

/* Gap above the strip lives inside the collapsible so it retracts with it. */
.timeline > .collapsible-controls > .collapsible-controls__inner {
  padding-top: 16px;
}

.timeline__frame-index,
.timeline__controls,
.timeline__playback-status {
  zoom: var(--ui-compact-zoom);
}

.timeline__frame-index {
  margin: 0;
  justify-self: start;
  color: var(--chrome);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: var(--icon-btn-size);
  text-transform: uppercase;
  user-select: none;
}

.timeline__playback-status {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
}

.timeline__blur-note {
  margin: 0;
  color: var(--chrome);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: var(--icon-btn-size);
  text-transform: uppercase;
  user-select: none;
  white-space: nowrap;
}

.timeline__phase-orb {
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  display: grid;
  place-items: center;
  pointer-events: none;
}

.phase-orb {
  --phase-orb-dot: 7px;
  --phase-orb-gap: 5px;
  display: grid;
  grid-template-columns: repeat(5, var(--phase-orb-dot));
  grid-template-rows: repeat(5, var(--phase-orb-dot));
  gap: var(--phase-orb-gap);
  color: var(--chrome);
}

.phase-orb__dot {
  width: var(--phase-orb-dot);
  height: var(--phase-orb-dot);
  border-radius: 50%;
  background: currentColor;
  opacity: 0.08;
}

.phase-orb__dot.is-corner {
  visibility: hidden;
  opacity: 0;
}

.crt-glide__dot {
  width: var(--crt-glide-dot);
  height: var(--crt-glide-dot);
  border-radius: 50%;
  background: currentColor;
  opacity: 0.08;
}

.video-import-overlay {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  pointer-events: all;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.crt-glide {
  --crt-glide-dot: 28px;
  --crt-glide-gap: 20px;
  display: grid;
  grid-template-columns: repeat(5, var(--crt-glide-dot));
  grid-template-rows: repeat(5, var(--crt-glide-dot));
  gap: var(--crt-glide-gap);
  color: var(--chrome);
}

.timeline__controls {
  display: flex;
  gap: 8px;
  justify-content: center;
  justify-self: center;
  margin-bottom: 0;
}

.timeline__controls .timeline__btn {
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  min-height: var(--icon-btn-size);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline__controls .timeline__btn svg {
  display: block;
  width: 24px;
  height: 24px;
}

.ui-select.timeline__fps {
  display: block;
  width: 152px;
  flex: 0 0 auto;
}

.ui-select.timeline__fps .ui-select__trigger {
  display: block;
  width: 100%;
  height: var(--icon-btn-size);
  box-sizing: border-box;
  margin: 0;
  padding: 0 36px 0 14px;
  background-color: var(--fill-faint);
  background-image: var(--ui-chevron);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 9px 9px;
  border: 1px solid var(--panel-border);
  border-radius: 0;
  color: var(--chrome);
  font: inherit;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: calc(var(--icon-btn-size) - 2px);
  text-align: left;
  text-transform: uppercase;
  cursor: var(--cursor-default);
}

.ui-select.timeline__fps .ui-select__trigger:focus,
.ui-select.timeline__fps .ui-select__trigger:focus-visible {
  outline: none;
}

.ui-select__menu.timeline__fps .ui-select__option {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}

.timeline__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.timeline__scroll::-webkit-scrollbar {
  display: none;
}

.timeline__scrollbar {
  position: relative;
  height: 10px;
  margin-top: 8px;
  cursor: var(--cursor-default);
  touch-action: none;
  user-select: none;
}

.timeline__scrollbar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  height: 4px;
  background: var(--scrollbar-track);
}

.timeline__scrollbar-thumb {
  position: absolute;
  top: 3px;
  height: 4px;
  background: var(--brand-orange);
}

.timeline__strip {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: max-content;
  min-width: 100%;
  justify-content: safe center;
}

.timeline__strip.is-dragging {
  cursor: var(--cursor-grabbing);
  user-select: none;
}

.timeline__strip.is-dragging .timeline-strip-item {
  position: relative;
  z-index: 1;
}

.timeline-strip-item {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
}

.timeline-strip-item.is-removing {
  overflow: hidden;
  pointer-events: none;
}

.timeline-insert-slot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.timeline-thumb-cell {
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  line-height: 0;
}

.timeline-insert-line {
  width: 2px;
  height: calc(100% - 4px);
  border-radius: 1px;
  background: var(--accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent);
  animation: hover-plate-blink calc(4s / 30) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .timeline-insert-line {
    animation: none;
  }
}

.timeline-drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  pointer-events: none;
  border-radius: 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.48);
  will-change: transform;
}

.timeline-drag-ghost .timeline-thumb {
  cursor: var(--cursor-grabbing);
  transform: scale(1.05);
  border-color: var(--fill-stronger);
}

.timeline-thumb {
  display: block;
  position: relative;
  flex: 0 0 auto;
  padding: 0;
  border: 2px solid var(--thumb-border);
  border-radius: 0;
  background: transparent;
  cursor: var(--cursor-grab);
  overflow: hidden;
  opacity: 0.5;
  touch-action: none;
  transition:
    opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.1s linear,
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.timeline-thumb:active {
  cursor: var(--cursor-grabbing);
}

.timeline-thumb:hover:not(.is-active) {
  transition: none;
  animation: hover-border-blink calc(4s / 30) linear infinite;
}

.timeline-thumb.is-active {
  border-color: var(--chrome);
  opacity: 1;
  transition:
    opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0s,
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.timeline-strip-item.is-removing .timeline-thumb,
.timeline-thumb.is-adding {
  transition: none;
  pointer-events: none;
}

.timeline-strip-item.is-removing .timeline-thumb {
  border-color: #ff3b3b;
}

.timeline-thumb.is-adding {
  border-color: var(--brand-green);
}

.timeline-strip-item.is-removing .timeline-thumb::after,
.timeline-thumb.is-adding::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  animation: timeline-flood 0.25s linear both;
}

.timeline-strip-item.is-removing .timeline-thumb::after {
  background: #ff3b3b;
}

.timeline-thumb.is-adding::after {
  background: var(--brand-green);
}

.timeline-thumb__drop-flash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: #fff;
  animation: timeline-drop-flash 0.5s linear forwards;
}

@keyframes timeline-drop-flash {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes timeline-flood {
  0%,
  24.9% {
    opacity: 1;
  }
  25%,
  49.9% {
    opacity: 0;
  }
  50%,
  74.9% {
    opacity: 1;
  }
  75%,
  100% {
    opacity: 0;
  }
}

.timeline-thumb.is-hidden {
  opacity: 0;
}

.timeline__strip.is-dragging .timeline-thumb:not(.is-hidden) {
  cursor: var(--cursor-grabbing);
}

.timeline-thumb canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.frame-context-menu {
  position: fixed;
  z-index: 220;
  display: flex;
  flex-direction: column;
  min-width: 260px;
  height: 0;
  overflow: hidden;
  background: var(--glass);
  backdrop-filter: blur(36px);
  -webkit-backdrop-filter: blur(36px);
  border: 1px solid var(--panel-border);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  user-select: none;
  zoom: var(--ui-compact-zoom);
}

.frame-context-menu__item {
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 10px 14px;
  text-align: left;
  white-space: nowrap;
}

.frame-context-menu__item:focus-visible {
  outline: 1px solid var(--chrome);
  outline-offset: -1px;
}

.frame-context-menu__rule {
  flex: 0 0 1px;
  height: 1px;
  margin: 4px 10px;
  background: var(--panel-border);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .frame-context-menu {
    height: auto;
  }
}

/* Phones and tablets — desktop layouts are unchanged. */
.mobile-gate {
  display: none;
}

@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  .controls-panel,
  .timeline,
  .app-toast {
    display: none;
  }

  .canvas-stage {
    padding: 0;
    place-items: stretch;
  }

  .canvas-stage__frame {
    display: block;
    width: 100%;
    height: 100%;
  }

  .mosaic-canvas-stack {
    width: 100% !important;
    height: 100% !important;
  }

  .mosaic-canvas {
    width: 100% !important;
    height: 100% !important;
    box-shadow: none;
  }

  .mosaic-overlay {
    width: 100% !important;
    height: 100% !important;
  }

  .mobile-gate {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(56px, 10vh, 88px);
    padding: clamp(32px, 6vw, 56px);
    background: var(--glass);
    user-select: none;
  }

  .mobile-gate__logo {
    width: min(78vw, 280px);
    cursor: var(--cursor-default);
    pointer-events: auto;
  }

  .mobile-gate__mark {
    display: block;
    width: 100%;
    height: auto;
  }

  .mobile-gate__mark svg {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
  }

  .mobile-gate__copy {
    margin: 0;
    max-width: 22em;
    text-align: center;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text);
  }
}

@media (min-width: 600px) and (max-width: 900px) {
  .mobile-gate__logo {
    width: min(52vw, 420px);
  }

  .mobile-gate__copy {
    max-width: 26em;
    font-size: 16px;
    letter-spacing: 0.035em;
  }
}