/* Reset, design tokens (colours, type, spacing, shadows) and the dark theme. */
/* Frame Bench styles. Light theme first; dark theme tokens follow. */
html,
body {
  margin: 0;
}
[hidden] {
  display: none !important;
}
/* Layout: web motion-editor shell. Dark tool bar on top; a light canvas with floating rounded panels
   (Frames left, Inspector right, pill tabs above it); a white timeline docked at the bottom with named rows,
   a dotted ruler, dark hold bars and a coral playhead badge. Light-first, with a matching dark theme. */
:root {
  --canvas: #e8e8eb;
  --panel: #ffffff;
  --panel-2: #f4f4f5;
  --panel-3: #eaeaec;
  --seg-on: #ffffff;
  --line: #ededef;
  --line-2: #dcdce0;
  --text: #18181b;
  --text-2: #5e5f67;
  --text-3: #94959d;
  --bar: #1c1c1f;
  --bar-2: #2a2a2e;
  --bar-3: #38383d;
  --bar-text: #f4f4f5;
  --bar-dim: #a1a1aa;
  --toast-bg: #1c1c1f;
  --toast-edge: rgba(255, 255, 255, 0.1);
  --toast-accent: #8e9bff;
  --accent: #5468ff;
  --accent-2: #4356f2;
  --accent-soft: #eceeff;
  --accent-text: #4356f2;
  --on-accent: #ffffff;
  --play: #f2584b;
  --hold: #1e9e74;
  --cut: #e0457b;
  --region: #ef8a1f;
  --graph: #3b3c43;
  --clipbar: #2a2a2e;
  --lane: #fafafb;
  --lane-2: #f5f5f7;
  --shadow: 0 0 0 1px rgba(16, 16, 24, 0.05), 0 2px 6px rgba(16, 16, 24, 0.04),
    0 10px 28px rgba(16, 16, 24, 0.06);
  --shadow-pop: 0 0 0 1px rgba(16, 16, 24, 0.07), 0 14px 36px rgba(16, 16, 24, 0.16);
  --lift: 0 1px 2px rgba(16, 16, 24, 0.12), 0 0 0 0.5px rgba(16, 16, 24, 0.06);
  --f-brand: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --f-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --gl: max(16px, env(safe-area-inset-left, 0px));
  --gr: max(16px, env(safe-area-inset-right, 0px));
  --lw: 252px;
  --rw: 304px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --canvas: #161618;
    --panel: #222225;
    --panel-2: #2b2b2f;
    --panel-3: #35353a;
    --seg-on: #3b3b41;
    --line: #2e2e33;
    --line-2: #3b3b41;
    --text: #ededef;
    --text-2: #a6a7af;
    --text-3: #75767e;
    --bar: #0f0f11;
    --toast-bg: #2b2b30;
    --toast-edge: rgba(255, 255, 255, 0.12);
    --toast-bg: #2b2b30;
    --toast-edge: rgba(255, 255, 255, 0.12);
    --bar-2: #1e1e21;
    --bar-3: #2c2c30;
    --accent: #6c7cff;
    --accent-2: #7d8bff;
    --accent-soft: rgba(108, 124, 255, 0.16);
    --accent-text: #93a0ff;
    --on-accent: #ffffff;
    --play: #ff6a5d;
    --hold: #34c08f;
    --cut: #ff5e95;
    --region: #ffa247;
    --graph: #c9cad2;
    --clipbar: #d4d5db;
    --lane: #26262a;
    --lane-2: #2a2a2e;
    --shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 10px 28px rgba(0, 0, 0, 0.35);
    --shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 16px 40px rgba(0, 0, 0, 0.5);
    --lift: 0 1px 2px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --canvas: #161618;
  --panel: #222225;
  --panel-2: #2b2b2f;
  --panel-3: #35353a;
  --seg-on: #3b3b41;
  --line: #2e2e33;
  --line-2: #3b3b41;
  --text: #ededef;
  --text-2: #a6a7af;
  --text-3: #75767e;
  --bar: #0f0f11;
  --bar-2: #1e1e21;
  --bar-3: #2c2c30;
  --accent: #6c7cff;
  --accent-2: #7d8bff;
  --accent-soft: rgba(108, 124, 255, 0.16);
  --accent-text: #93a0ff;
  --on-accent: #ffffff;
  --play: #ff6a5d;
  --hold: #34c08f;
  --cut: #ff5e95;
  --region: #ffa247;
  --graph: #c9cad2;
  --clipbar: #d4d5db;
  --lane: #26262a;
  --lane-2: #2a2a2e;
  --shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 10px 28px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 16px 40px rgba(0, 0, 0, 0.5);
  --lift: 0 1px 2px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html,
body {
  background: var(--canvas);
  color: var(--text);
}
body {
  font-family: var(--f-ui);
  font-size: 12.5px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv05', 'cv11';
  letter-spacing: -0.003em;
}
button,
input,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
button {
  cursor: pointer;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
svg.i {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.grow {
  flex: 1;
}
/* Type rule: the monospace font is only for timecodes, hex codes and key caps. Every other word or number
   uses the UI font with tabular digits, so text on one line shares a baseline and counters don't jiggle. */
.mono {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}