/* Scenofy design system v2 (tokens + the components this site uses), concatenated from _ds/ in the Claude Design export. */

/* ---- tokens/fonts.css ---- */
/* Scenofy webfonts — all SIL Open Font License 1.1 (see fonts/OFL.md).
   Variable fonts: Funnel Display 300–800, Onest 100–900. Fragment Mono 400 + italic.
   Subsets: latin + latin-ext. */
@font-face{font-family:'Funnel Display';font-style:normal;font-weight:300 800;font-display:swap;src:url('../fonts/funnel-display-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Funnel Display';font-style:normal;font-weight:300 800;font-display:swap;src:url('../fonts/funnel-display-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/onest-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/onest-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fragment Mono';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/fragment-mono-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fragment Mono';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/fragment-mono-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fragment Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/fragment-mono-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fragment Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/fragment-mono-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}


/* ---- tokens/colors.css ---- */
/* Scenofy color tokens.
   Dark is the default theme (:root). Light theme: add data-theme="light" to <html> or any container.
   Rule: neutral grays + ONE accent; teal for success. Lime #B3FB2C on dark; green #58B502 (fills) / #418601 (text, links, icons) on light. */
:root{
  /* Brand constants (from the logo files) */
  --brand-ink:#111113;
  --brand-lime:#B3FB2C;
  --brand-green:#58B502;
  --brand-green-text:#418601;
  --brand-white:#FFFFFF;

  /* Neutral ramp: faint cool tint taken from brand ink (oklch hue 286, chroma ≤ .0045) */
  --gray-0:#FFFFFF;
  --gray-25:#FAFAFB;
  --gray-50:#F5F5F7;
  --gray-100:#EEEEF0;
  --gray-150:#E4E4E6;
  --gray-200:#D5D5D8;
  --gray-300:#B7B7B9;
  --gray-400:#939396;
  --gray-500:#737375;
  --gray-600:#5A5A5D;
  --gray-700:#454547;
  --gray-750:#38383A;
  --gray-800:#2D2D30;
  --gray-850:#252528;
  --gray-875:#202022;
  --gray-900:#1B1B1D;
  --gray-925:#161618;
  --gray-950:#111113;
  --gray-975:#0D0D0F;
  --gray-1000:#09090B;

  /* Accent: lime (dark surfaces) */
  --lime-300:#C1FF69;
  --lime-400:#B3FB2C;
  --lime-500:#9BE221;
  --lime-600:#81CA00;
  /* Accent: green (light surfaces) */
  --green-500:#58B502;
  --green-600:#4D9E02;
  --green-700:#418601;
  --green-800:#356D01;
  --green-900:#294E05;
  /* Collaborator presence: cursors, avatar rings and other people’s selections. Identity only, never status or decoration. */
  --presence-1:#FF8A4C;
  --presence-2:#3DD9C1;
  --presence-3:#5AA9FF;
  --presence-4:#C792FF;
  --presence-5:#FF6FA3;
  --presence-6:#FFC94D;
  --on-presence:#111113;
  /* Success: teal */
  --teal-300:#64E4CA;
  --teal-400:#20CCB1;
  --teal-500:#00A38F;
  --teal-600:#007D70;
  --teal-700:#00635A;
  /* Functional status only — never decorative */
  --amber-300:#FEC766;
  --amber-400:#FAAB35;
  --amber-600:#B76B1C;
  --amber-700:#995515;
  --red-300:#F98E8B;
  --red-400:#F4595E;
  --red-500:#DE3B40;
  --red-600:#BE222A;
  --red-700:#9B1E20;

  /* Alpha helpers */
  --white-a4:rgba(255,255,255,.04);
  --white-a6:rgba(255,255,255,.06);
  --white-a8:rgba(255,255,255,.08);
  --white-a10:rgba(255,255,255,.10);
  --white-a12:rgba(255,255,255,.12);
  --white-a16:rgba(255,255,255,.16);
  --white-a24:rgba(255,255,255,.24);
  --white-a48:rgba(255,255,255,.48);
  --white-a72:rgba(255,255,255,.72);
  --ink-a4:rgba(17,17,19,.04);
  --ink-a6:rgba(17,17,19,.06);
  --ink-a8:rgba(17,17,19,.08);
  --ink-a12:rgba(17,17,19,.12);
  --ink-a20:rgba(17,17,19,.20);
  --ink-a48:rgba(17,17,19,.48);
  --ink-a64:rgba(9,9,11,.64);
  --ink-a80:rgba(9,9,11,.80);
  --lime-a8:rgba(179,251,44,.08);
  --lime-a12:rgba(179,251,44,.12);
  --lime-a20:rgba(179,251,44,.20);
  --lime-a32:rgba(179,251,44,.32);
  --lime-a48:rgba(179,251,44,.48);
  --green-a8:rgba(88,181,2,.08);
  --green-a12:rgba(88,181,2,.12);
  --green-a20:rgba(88,181,2,.20);
  --green-a40:rgba(88,181,2,.40);
  --teal-a14:rgba(32,204,177,.14);
  --amber-a14:rgba(250,171,53,.14);
  --red-a14:rgba(244,89,94,.14);

  /* ---------- Semantic: dark (default) ---------- */
  color-scheme:dark;
  --bg-backdrop:var(--gray-1000);   /* behind floating editor panels */
  --bg-app:var(--gray-950);         /* page / app background */
  --bg-canvas:var(--gray-975);      /* stage surround in the editor */
  --surface-1:var(--gray-925);      /* panels, cards */
  --surface-2:var(--gray-900);      /* inputs, nested blocks */
  --surface-3:var(--gray-850);      /* menus, popovers, tooltips */
  --surface-4:var(--gray-800);      /* pressed neutral, scrollbar thumb */
  --surface-hover:var(--white-a6);
  --surface-active:var(--white-a10);
  --surface-selected:var(--lime-a12);
  --surface-inverse:var(--gray-50);
  --fill-neutral:var(--white-a8);
  --fill-neutral-hover:var(--white-a12);
  --fill-neutral-pressed:var(--white-a16);
  --surface-raised:var(--gray-750);
  --avatar-bg:var(--gray-750);      /* avatar and workspace-tile fill */
  --surface-overlay:var(--gray-900);
  --thumb:var(--gray-25);
  --switch-thumb:var(--gray-300);
  --tooltip-bg:var(--gray-800);
  --tooltip-text:var(--gray-25);
  --danger-hover:var(--red-500);
  --border-subtle:var(--white-a6);
  --border-default:var(--white-a10);
  --border-strong:var(--white-a16);
  --border-accent:var(--lime-a48);
  --text-primary:var(--gray-25);
  --text-secondary:var(--gray-300);
  --text-tertiary:var(--gray-400);
  --text-disabled:var(--gray-600);
  --text-inverse:var(--gray-950);
  --text-accent:var(--lime-400);
  --text-link:var(--lime-400);
  --text-link-hover:var(--lime-300);
  --icon-primary:var(--gray-100);
  --icon-secondary:var(--gray-400);
  --icon-accent:var(--lime-400);
  --accent:var(--lime-400);
  --accent-hover:var(--lime-300);
  --accent-pressed:var(--lime-500);
  --accent-subtle:var(--lime-a12);
  --accent-muted:var(--lime-a20);
  --on-accent:var(--gray-950);
  --focus-ring:var(--lime-400);
  --selection-bg:var(--lime-a32);
  --success:var(--teal-400);
  --success-text:var(--teal-300);
  --success-subtle:var(--teal-a14);
  --on-success:var(--gray-950);
  --warning:var(--amber-400);
  --warning-text:var(--amber-300);
  --warning-subtle:var(--amber-a14);
  --on-warning:var(--gray-950);
  --danger:var(--red-600);
  --danger-text:var(--red-300);
  --danger-subtle:var(--red-a14);
  --on-danger:var(--gray-0);
  --scrim:var(--ink-a64);
  --logo-ink:var(--gray-0);
  --logo-accent:var(--lime-400);
  /* Editor */
  --timeline-clip:var(--gray-800);
  --timeline-clip-hover:var(--gray-750);
  --timeline-clip-border:var(--white-a10);
  --timeline-playhead:var(--lime-400);
  --keyframe:var(--gray-200);
  --keyframe-selected:var(--lime-400);
  --stage-guide:rgba(179,251,44,.6);
}

/* Re-assert dark inside a light page: <section data-theme="dark"> */
[data-theme="dark"]{
  color-scheme:dark;
  --bg-backdrop:var(--gray-1000);   /* behind floating editor panels */
  --bg-app:var(--gray-950);         /* page / app background */
  --bg-canvas:var(--gray-975);      /* stage surround in the editor */
  --surface-1:var(--gray-925);      /* panels, cards */
  --surface-2:var(--gray-900);      /* inputs, nested blocks */
  --surface-3:var(--gray-850);      /* menus, popovers, tooltips */
  --surface-4:var(--gray-800);      /* pressed neutral, scrollbar thumb */
  --surface-hover:var(--white-a6);
  --surface-active:var(--white-a10);
  --surface-selected:var(--lime-a12);
  --surface-inverse:var(--gray-50);
  --fill-neutral:var(--white-a8);
  --fill-neutral-hover:var(--white-a12);
  --fill-neutral-pressed:var(--white-a16);
  --surface-raised:var(--gray-750);
  --avatar-bg:var(--gray-750);      /* avatar and workspace-tile fill */
  --surface-overlay:var(--gray-900);
  --thumb:var(--gray-25);
  --switch-thumb:var(--gray-300);
  --tooltip-bg:var(--gray-800);
  --tooltip-text:var(--gray-25);
  --danger-hover:var(--red-500);
  --border-subtle:var(--white-a6);
  --border-default:var(--white-a10);
  --border-strong:var(--white-a16);
  --border-accent:var(--lime-a48);
  --text-primary:var(--gray-25);
  --text-secondary:var(--gray-300);
  --text-tertiary:var(--gray-400);
  --text-disabled:var(--gray-600);
  --text-inverse:var(--gray-950);
  --text-accent:var(--lime-400);
  --text-link:var(--lime-400);
  --text-link-hover:var(--lime-300);
  --icon-primary:var(--gray-100);
  --icon-secondary:var(--gray-400);
  --icon-accent:var(--lime-400);
  --accent:var(--lime-400);
  --accent-hover:var(--lime-300);
  --accent-pressed:var(--lime-500);
  --accent-subtle:var(--lime-a12);
  --accent-muted:var(--lime-a20);
  --on-accent:var(--gray-950);
  --focus-ring:var(--lime-400);
  --selection-bg:var(--lime-a32);
  --success:var(--teal-400);
  --success-text:var(--teal-300);
  --success-subtle:var(--teal-a14);
  --on-success:var(--gray-950);
  --warning:var(--amber-400);
  --warning-text:var(--amber-300);
  --warning-subtle:var(--amber-a14);
  --on-warning:var(--gray-950);
  --danger:var(--red-600);
  --danger-text:var(--red-300);
  --danger-subtle:var(--red-a14);
  --on-danger:var(--gray-0);
  --scrim:var(--ink-a64);
  --logo-ink:var(--gray-0);
  --logo-accent:var(--lime-400);
  /* Editor */
  --timeline-clip:var(--gray-800);
  --timeline-clip-hover:var(--gray-750);
  --timeline-clip-border:var(--white-a10);
  --timeline-playhead:var(--lime-400);
  --keyframe:var(--gray-200);
  --keyframe-selected:var(--lime-400);
  --stage-guide:rgba(179,251,44,.6);
}

/* ---------- Semantic: light ---------- */
[data-theme="light"]{
  color-scheme:light;
  --bg-backdrop:var(--gray-150);
  --bg-app:var(--gray-50);
  --bg-canvas:var(--gray-100);
  --surface-1:var(--gray-0);
  --surface-2:var(--gray-50);
  --surface-3:var(--gray-0);
  --surface-4:var(--gray-150);
  --surface-hover:var(--ink-a4);
  --surface-active:var(--ink-a8);
  --surface-selected:var(--green-a12);
  --surface-inverse:var(--gray-950);
  --fill-neutral:var(--ink-a6);
  --fill-neutral-hover:var(--ink-a8);
  --fill-neutral-pressed:var(--ink-a12);
  --surface-raised:var(--gray-0);
  --avatar-bg:var(--gray-150);      /* white surfaces need a visible fill */
  --surface-overlay:var(--gray-0);
  --thumb:var(--gray-0);
  --switch-thumb:var(--gray-0);
  --tooltip-bg:var(--gray-950);
  --tooltip-text:var(--gray-25);
  --danger-hover:var(--red-700);
  --border-subtle:var(--ink-a6);
  --border-default:var(--ink-a12);
  --border-strong:var(--ink-a20);
  --border-accent:var(--green-a40);
  --text-primary:var(--gray-950);
  --text-secondary:var(--gray-600);
  --text-tertiary:var(--gray-500);
  --text-disabled:var(--gray-300);
  --text-inverse:var(--gray-25);
  --text-accent:var(--green-700);
  --text-link:var(--green-700);
  --text-link-hover:var(--green-800);
  --icon-primary:var(--gray-900);
  --icon-secondary:var(--gray-500);
  --icon-accent:var(--green-700);
  --accent:var(--green-500);
  --accent-hover:var(--green-600);
  --accent-pressed:var(--green-700);
  --accent-subtle:var(--green-a12);
  --accent-muted:var(--green-a20);
  --on-accent:var(--gray-950);
  --focus-ring:var(--green-700);
  --selection-bg:var(--green-a20);
  --success:var(--teal-400);
  --success-text:var(--teal-600);
  --success-subtle:var(--teal-a14);
  --warning:var(--amber-400);
  --warning-text:var(--amber-700);
  --warning-subtle:var(--amber-a14);
  --danger:var(--red-600);
  --danger-text:var(--red-600);
  --danger-subtle:var(--red-a14);
  --scrim:rgba(17,17,19,.32);
  --logo-ink:var(--brand-ink);
  --logo-accent:var(--green-500);
  --timeline-clip:var(--gray-0);
  --timeline-clip-hover:var(--gray-50);
  --timeline-clip-border:var(--ink-a12);
  --timeline-playhead:var(--green-500);
  --keyframe:var(--gray-700);
  --keyframe-selected:var(--green-500);
  --stage-guide:rgba(65,134,1,.7);
}


/* ---- tokens/typography.css ---- */
/* Scenofy typography.
   Funnel Display — headings & marketing display (relates to the bold geometric wordmark).
   Onest — all UI and body text; tabular figures for timecodes and numeric fields.
   Fragment Mono — code, CLI, API, file names, raw values. */
:root{
  --font-display:'Funnel Display','Onest',ui-sans-serif,system-ui,sans-serif; /* @kind font */
  --font-sans:'Onest',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; /* @kind font */
  --font-mono:'Fragment Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace; /* @kind font */

  --weight-regular:400; /* @kind other */
  --weight-medium:500; /* @kind other */
  --weight-semibold:600; /* @kind other */
  --weight-bold:700; /* @kind other */
  --weight-extrabold:800; /* @kind other */

  /* Display (Funnel Display) — fluid on marketing, max size noted */
  --display-2xl:clamp(56px,4.2vw + 36px,120px); /* @kind other */  /* hero, 120 max */
  --display-xl:clamp(48px,3vw + 32px,88px); /* @kind other */
  --display-lg:clamp(40px,2vw + 28px,64px); /* @kind other */
  --display-md:clamp(34px,1.2vw + 26px,48px); /* @kind other */
  --display-sm:36px; /* @kind other */
  --heading-lg:28px; /* @kind other */
  --heading-md:22px; /* @kind other */
  --heading-sm:18px; /* @kind other */
  --lh-display-2xl:1.04; /* @kind other */
  --lh-display-xl:.94; /* @kind other */
  --lh-display-lg:.98; /* @kind other */
  --lh-display-md:1.02; /* @kind other */
  --lh-display-sm:1.08; /* @kind other */
  --lh-heading-lg:1.15; /* @kind other */
  --lh-heading-md:1.2; /* @kind other */
  --lh-heading-sm:1.3; /* @kind other */
  --tracking-display-2xl:-.045em; /* @kind other */
  --tracking-display-xl:-.04em; /* @kind other */
  --tracking-display-lg:-.035em; /* @kind other */
  --tracking-display-md:-.03em; /* @kind other */
  --tracking-display-sm:-.025em; /* @kind other */
  --tracking-heading:-.015em; /* @kind other */

  /* Body (Onest) — marketing, docs, long text */
  --body-lg:18px; /* @kind other */
  --body-md:16px; /* @kind other */
  --body-sm:14px; /* @kind other */
  --lh-body:1.55; /* @kind other */
  --lh-body-tight:1.45; /* @kind other */

  /* UI (Onest) — app & editor */
  --ui-lg:14px; /* @kind other */
  --ui-md:13px; /* @kind other */
  --ui-sm:12px; /* @kind other */
  --ui-xs:11px; /* @kind other */
  --ui-2xs:10px; /* @kind other */   /* timeline ruler only */
  --lh-ui-lg:20px; /* @kind other */
  --lh-ui-md:18px; /* @kind other */
  --lh-ui-sm:16px; /* @kind other */
  --lh-ui-xs:14px; /* @kind other */
  --lh-ui-2xs:12px; /* @kind other */
  --tracking-ui:0; /* @kind other */
  --tracking-caps:.06em; /* @kind other */

  /* Mono */
  --mono-md:13px; /* @kind other */
  --mono-sm:12px; /* @kind other */

  /* Semantic */
  --text-hero:var(--display-2xl); /* @kind other */
  --text-body:var(--body-md); /* @kind other */
  --text-app:var(--ui-md); /* @kind other */
  --text-inspector:var(--ui-sm); /* @kind other */
  --text-timecode:var(--ui-md); /* @kind other */
}

/* Text styles — use in plain HTML; components use the tokens directly */
.sc-display-2xl{font:var(--weight-bold) var(--display-2xl)/var(--lh-display-2xl) var(--font-display);letter-spacing:var(--tracking-display-2xl)}
.sc-display-xl{font:var(--weight-bold) var(--display-xl)/var(--lh-display-xl) var(--font-display);letter-spacing:var(--tracking-display-xl)}
.sc-display-lg{font:var(--weight-bold) var(--display-lg)/var(--lh-display-lg) var(--font-display);letter-spacing:var(--tracking-display-lg)}
.sc-display-md{font:var(--weight-bold) var(--display-md)/var(--lh-display-md) var(--font-display);letter-spacing:var(--tracking-display-md)}
.sc-display-sm{font:var(--weight-semibold) var(--display-sm)/var(--lh-display-sm) var(--font-display);letter-spacing:var(--tracking-display-sm)}
.sc-heading-lg{font:var(--weight-semibold) var(--heading-lg)/var(--lh-heading-lg) var(--font-display);letter-spacing:var(--tracking-heading)}
.sc-heading-md{font:var(--weight-semibold) var(--heading-md)/var(--lh-heading-md) var(--font-display);letter-spacing:var(--tracking-heading)}
.sc-heading-sm{font:var(--weight-semibold) var(--heading-sm)/var(--lh-heading-sm) var(--font-sans);letter-spacing:-.005em}
.sc-body-lg{font:var(--weight-regular) var(--body-lg)/var(--lh-body) var(--font-sans)}
.sc-body{font:var(--weight-regular) var(--body-md)/var(--lh-body) var(--font-sans)}
.sc-body-sm{font:var(--weight-regular) var(--body-sm)/var(--lh-body-tight) var(--font-sans)}
.sc-ui-lg{font:var(--weight-regular) var(--ui-lg)/var(--lh-ui-lg) var(--font-sans)}
.sc-ui{font:var(--weight-regular) var(--ui-md)/var(--lh-ui-md) var(--font-sans)}
.sc-ui-sm{font:var(--weight-regular) var(--ui-sm)/var(--lh-ui-sm) var(--font-sans)}
.sc-ui-xs{font:var(--weight-medium) var(--ui-xs)/var(--lh-ui-xs) var(--font-sans)}
.sc-label{font:var(--weight-medium) var(--ui-sm)/var(--lh-ui-sm) var(--font-sans);color:var(--text-secondary)}
.sc-eyebrow{font:var(--weight-semibold) var(--ui-lg)/var(--lh-ui-lg) var(--font-sans);color:var(--text-accent);display:inline-flex;align-items:center;gap:8px}
.sc-eyebrow::before{content:"";width:7px;height:7px;background:currentColor;transform:rotate(45deg);border-radius:1px;flex:none}
.sc-mono{font:var(--weight-regular) var(--mono-md)/1.5 var(--font-mono)}
.sc-timecode{font-family:var(--font-sans);font-weight:var(--weight-medium);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:.01em}
.sc-tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}


/* ---- tokens/spacing.css ---- */
/* Scenofy spacing, sizing & layout. 4px base; 2px and 6px half-steps exist for dense editor UI. */
:root{
  --space-0:0; /* @kind spacing */
  --space-px:1px; /* @kind spacing */
  --space-0-5:2px; /* @kind spacing */
  --space-1:4px; /* @kind spacing */
  --space-1-5:6px; /* @kind spacing */
  --space-2:8px; /* @kind spacing */
  --space-2-5:10px; /* @kind spacing */
  --space-3:12px; /* @kind spacing */
  --space-4:16px; /* @kind spacing */
  --space-5:20px; /* @kind spacing */
  --space-6:24px; /* @kind spacing */
  --space-7:28px; /* @kind spacing */
  --space-8:32px; /* @kind spacing */
  --space-10:40px; /* @kind spacing */
  --space-12:48px; /* @kind spacing */
  --space-14:56px; /* @kind spacing */
  --space-16:64px; /* @kind spacing */
  --space-20:80px; /* @kind spacing */
  --space-24:96px; /* @kind spacing */
  --space-32:128px; /* @kind spacing */
  --space-40:160px; /* @kind spacing */

  /* Control heights */
  --control-2xs:20px; /* @kind spacing */
  --control-xs:24px; /* @kind spacing */   /* editor inspector, timeline */
  --control-sm:28px; /* @kind spacing */   /* editor default */
  --control-md:32px; /* @kind spacing */   /* app default */
  --control-lg:40px; /* @kind spacing */   /* marketing default */
  --control-xl:48px; /* @kind spacing */   /* hero CTA */
  --control-2xl:56px; /* @kind spacing */

  /* Icon sizes */
  --icon-xs:12px; /* @kind spacing */
  --icon-sm:14px; /* @kind spacing */
  --icon-md:16px; /* @kind spacing */
  --icon-lg:20px; /* @kind spacing */
  --icon-xl:24px; /* @kind spacing */

  /* Marketing layout */
  --container-sm:720px; /* @kind spacing */
  --container-md:960px; /* @kind spacing */
  --container-lg:1200px; /* @kind spacing */
  --container-xl:1360px; /* @kind spacing */
  --gutter:clamp(20px,4vw,40px); /* @kind spacing */
  --section-y:clamp(80px,9vw,144px); /* @kind spacing */
  --grid-gap:24px; /* @kind spacing */

  /* App layout */
  --app-topbar:52px; /* @kind spacing */
  --app-sidebar:240px; /* @kind spacing */
  --app-content-pad:32px; /* @kind spacing */

  /* Studio editor layout */
  --editor-toolbar:44px; /* @kind spacing */
  --editor-left:256px; /* @kind spacing */
  --editor-right:288px; /* @kind spacing */
  --editor-timeline:272px; /* @kind spacing */
  --editor-gap:6px; /* @kind spacing */
  --editor-panel-pad:12px; /* @kind spacing */
  --editor-row:28px; /* @kind spacing */
  --timeline-track:30px; /* @kind spacing */
  --timeline-ruler:24px; /* @kind spacing */
  --timeline-header:200px; /* @kind spacing */
}


/* ---- tokens/shape.css ---- */
/* Scenofy shape. Pills echo the two bars of the symbol; the diamond echoes its keyframe. */
:root{
  --radius-0:0; /* @kind radius */
  --radius-2xs:2px; /* @kind radius */
  --radius-xs:4px; /* @kind radius */
  --radius-sm:6px; /* @kind radius */
  --radius-md:8px; /* @kind radius */
  --radius-lg:12px; /* @kind radius */
  --radius-xl:16px; /* @kind radius */
  --radius-2xl:24px; /* @kind radius */
  --radius-3xl:32px; /* @kind radius */
  --radius-pill:999px; /* @kind radius */

  --radius-button:var(--radius-pill); /* @kind radius */
  --radius-icon-button:var(--radius-md); /* @kind radius */
  --radius-control:var(--radius-md); /* @kind radius */
  --radius-panel:var(--radius-lg); /* @kind radius */
  --radius-card:var(--radius-xl); /* @kind radius */
  --radius-media:var(--radius-lg); /* @kind radius */
  --radius-clip:var(--radius-sm); /* @kind radius */
  --radius-menu:var(--radius-lg); /* @kind radius */
  --radius-dialog:var(--radius-2xl); /* @kind radius */
  --radius-keyframe:2px; /* @kind radius */

  --border-width:1px; /* @kind other */
  --border-width-strong:1.5px; /* @kind other */
  --focus-width:2px; /* @kind other */
  --focus-offset:2px; /* @kind other */

  /* The symbol's bars rise at ~21°; use for light trails, motion streaks and slanted masks */
  --angle-slant:-21deg; /* @kind other */
}


/* ---- tokens/effects.css ---- */
/* Scenofy elevation, glows, blur and light/motion gradients.
   Dark UI separates layers with lightness + hairline borders first, shadows second. */
:root{
  --shadow-xs:0 1px 0 rgba(0,0,0,.35); /* @kind shadow */
  --shadow-sm:0 1px 2px rgba(0,0,0,.42),0 1px 1px rgba(0,0,0,.2); /* @kind shadow */
  --shadow-md:0 8px 20px -6px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.3); /* @kind shadow */
  --shadow-lg:0 20px 48px -12px rgba(0,0,0,.65),0 6px 16px -4px rgba(0,0,0,.35); /* @kind shadow */
  --shadow-xl:0 40px 96px -24px rgba(0,0,0,.75),0 12px 32px -8px rgba(0,0,0,.4); /* @kind shadow */
  --inset-highlight:inset 0 1px 0 rgba(255,255,255,.05); /* @kind shadow */
  --inset-border:inset 0 0 0 1px var(--border-default); /* @kind shadow */
  --ring-focus:0 0 0 var(--focus-offset) var(--bg-app),0 0 0 calc(var(--focus-offset) + var(--focus-width)) var(--focus-ring); /* @kind shadow */
  --ring-accent:0 0 0 1px var(--accent); /* @kind shadow */
  --glow-accent:0 0 0 1px var(--lime-a32),0 0 28px -6px var(--lime-a48); /* @kind shadow */
  --glow-accent-strong:0 0 0 1px var(--lime-a48),0 0 48px -8px rgba(179,251,44,.6); /* @kind shadow */

  --blur-sm:8px; /* @kind other */
  --blur-md:16px; /* @kind other */
  --blur-lg:32px; /* @kind other */
  --glass-bg:rgba(22,22,24,.72); /* @kind color */

  /* Light & motion — the only sanctioned gradients */
  --gradient-trail:linear-gradient(90deg,rgba(179,251,44,0) 0%,rgba(179,251,44,.18) 35%,rgba(179,251,44,.75) 82%,#F1FFD6 100%); /* @kind other */
  --gradient-trail-white:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.16) 40%,rgba(255,255,255,.8) 88%,#FFFFFF 100%); /* @kind other */
  --gradient-streak:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.07) 50%,rgba(255,255,255,0)); /* @kind other */
  --gradient-glow:radial-gradient(closest-side,rgba(179,251,44,.26),rgba(179,251,44,.07) 55%,rgba(179,251,44,0)); /* @kind other */
  --gradient-glow-white:radial-gradient(closest-side,rgba(255,255,255,.12),rgba(255,255,255,0)); /* @kind other */
  --gradient-shimmer:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 100%); /* @kind other */
  --gradient-scrim-bottom:linear-gradient(to top,rgba(9,9,11,.85),rgba(9,9,11,0)); /* @kind other */

  --z-base:0; /* @kind other */
  --z-raised:10; /* @kind other */
  --z-sticky:100; /* @kind other */
  --z-dropdown:1000; /* @kind other */
  --z-overlay:1100; /* @kind other */
  --z-modal:1200; /* @kind other */
  --z-toast:1300; /* @kind other */
  --z-tooltip:1400; /* @kind other */
}
[data-theme="dark"]{

  --shadow-xs:0 1px 0 rgba(0,0,0,.35); /* @kind shadow */
  --shadow-sm:0 1px 2px rgba(0,0,0,.42),0 1px 1px rgba(0,0,0,.2); /* @kind shadow */
  --shadow-md:0 8px 20px -6px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.3); /* @kind shadow */
  --shadow-lg:0 20px 48px -12px rgba(0,0,0,.65),0 6px 16px -4px rgba(0,0,0,.35); /* @kind shadow */
  --shadow-xl:0 40px 96px -24px rgba(0,0,0,.75),0 12px 32px -8px rgba(0,0,0,.4); /* @kind shadow */
  --inset-highlight:inset 0 1px 0 rgba(255,255,255,.05); /* @kind shadow */
  --inset-border:inset 0 0 0 1px var(--border-default); /* @kind shadow */
  --ring-focus:0 0 0 var(--focus-offset) var(--bg-app),0 0 0 calc(var(--focus-offset) + var(--focus-width)) var(--focus-ring); /* @kind shadow */
  --ring-accent:0 0 0 1px var(--accent); /* @kind shadow */
  --glow-accent:0 0 0 1px var(--lime-a32),0 0 28px -6px var(--lime-a48); /* @kind shadow */
  --glow-accent-strong:0 0 0 1px var(--lime-a48),0 0 48px -8px rgba(179,251,44,.6); /* @kind shadow */

  --glass-bg:rgba(22,22,24,.72); /* @kind color */
  --gradient-trail:linear-gradient(90deg,rgba(179,251,44,0) 0%,rgba(179,251,44,.18) 35%,rgba(179,251,44,.75) 82%,#F1FFD6 100%); /* @kind other */
  --gradient-streak:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.07) 50%,rgba(255,255,255,0)); /* @kind other */
  --gradient-glow:radial-gradient(closest-side,rgba(179,251,44,.26),rgba(179,251,44,.07) 55%,rgba(179,251,44,0)); /* @kind other */
  --gradient-scrim-bottom:linear-gradient(to top,rgba(9,9,11,.85),rgba(9,9,11,0)); /* @kind other */
}
[data-theme="light"]{
  --inset-border:inset 0 0 0 1px var(--border-default); /* @kind shadow */
  --ring-focus:0 0 0 var(--focus-offset) var(--bg-app),0 0 0 calc(var(--focus-offset) + var(--focus-width)) var(--focus-ring); /* @kind shadow */
  --ring-accent:0 0 0 1px var(--accent); /* @kind shadow */
  --shadow-xs:0 1px 0 rgba(17,17,19,.06); /* @kind shadow */
  --shadow-sm:0 1px 2px rgba(17,17,19,.08),0 0 0 1px rgba(17,17,19,.04); /* @kind shadow */
  --shadow-md:0 8px 20px -6px rgba(17,17,19,.14),0 2px 6px rgba(17,17,19,.06); /* @kind shadow */
  --shadow-lg:0 20px 48px -12px rgba(17,17,19,.2),0 6px 16px -4px rgba(17,17,19,.08); /* @kind shadow */
  --shadow-xl:0 40px 96px -24px rgba(17,17,19,.28),0 12px 32px -8px rgba(17,17,19,.1); /* @kind shadow */
  --inset-highlight:inset 0 1px 0 rgba(255,255,255,.8); /* @kind shadow */
  --glow-accent:0 0 0 1px var(--green-a40),0 0 24px -6px var(--green-a40); /* @kind shadow */
  --glow-accent-strong:0 0 0 1px var(--green-500),0 0 40px -8px rgba(88,181,2,.5); /* @kind shadow */
  --glass-bg:rgba(255,255,255,.76); /* @kind color */
  --gradient-trail:linear-gradient(90deg,rgba(88,181,2,0) 0%,rgba(88,181,2,.16) 35%,rgba(88,181,2,.7) 82%,#B3FB2C 100%); /* @kind other */
  --gradient-streak:linear-gradient(90deg,rgba(17,17,19,0),rgba(17,17,19,.05) 50%,rgba(17,17,19,0)); /* @kind other */
  --gradient-glow:radial-gradient(closest-side,rgba(88,181,2,.18),rgba(88,181,2,.05) 55%,rgba(88,181,2,0)); /* @kind other */
  --gradient-scrim-bottom:linear-gradient(to top,rgba(17,17,19,.55),rgba(17,17,19,0)); /* @kind other */
}


/* ---- tokens/motion.css ---- */
/* Scenofy motion. Things enter fast and settle softly (expo-out), leave quicker than they came,
   and only overshoot on marketing moments. The app never bounces. */
:root{
  --ease-standard:cubic-bezier(.2,0,0,1); /* @kind other */      /* UI state changes */
  --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */          /* enters, reveals, settles */
  --ease-in:cubic-bezier(.7,0,.84,0); /* @kind other */           /* exits */
  --ease-in-out:cubic-bezier(.65,0,.35,1); /* @kind other */      /* A→B moves, loops, camera */
  --ease-overshoot:cubic-bezier(.34,1.56,.64,1); /* @kind other *//* marketing pops, keyframe drop */
  --ease-linear:linear; /* @kind other */                         /* scrubbing, progress, trails */

  --dur-instant:80ms; /* @kind other */
  --dur-fast:140ms; /* @kind other */
  --dur-base:200ms; /* @kind other */
  --dur-moderate:280ms; /* @kind other */
  --dur-slow:420ms; /* @kind other */
  --dur-slower:640ms; /* @kind other */
  --dur-cinematic:960ms; /* @kind other */
  --dur-trail:2400ms; /* @kind other */
  --stagger:40ms; /* @kind other */

  --motion-hover:var(--dur-fast) var(--ease-standard); /* @kind other */
  --motion-press:var(--dur-instant) var(--ease-standard); /* @kind other */
  --motion-popover:var(--dur-base) var(--ease-out); /* @kind other */
  --motion-dialog:var(--dur-moderate) var(--ease-out); /* @kind other */
  --motion-exit:var(--dur-fast) var(--ease-in); /* @kind other */
  --motion-panel:var(--dur-moderate) var(--ease-in-out); /* @kind other */
  --motion-reveal:var(--dur-slower) var(--ease-out); /* @kind other */

  --press-scale:.97; /* @kind other */
  --rise-distance:12px; /* @kind other */
}
@media (prefers-reduced-motion:reduce){
  :root{
    --dur-fast:1ms; /* @kind other */
    --dur-base:1ms; /* @kind other */
    --dur-moderate:1ms; /* @kind other */
    --dur-slow:1ms; /* @kind other */
    --dur-slower:1ms; /* @kind other */
    --dur-cinematic:1ms; /* @kind other */
    --stagger:0ms; /* @kind other */
    --rise-distance:0px; /* @kind other */
    --press-scale:1; /* @kind other */
  }
}
@keyframes sc-fade-in{from{opacity:0}to{opacity:1}}
@keyframes sc-fade-out{from{opacity:1}to{opacity:0}}
@keyframes sc-rise{from{opacity:0;transform:translateY(var(--rise-distance))}to{opacity:1;transform:none}}
@keyframes sc-scale-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes sc-pop{0%{transform:scale(.4) rotate(45deg);opacity:0}70%{opacity:1}100%{transform:scale(1) rotate(45deg);opacity:1}}
@keyframes sc-trail{0%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes sc-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes sc-drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(4%,-3%,0)}}
@keyframes sc-diamond-spin{0%{transform:rotate(45deg) scale(1)}40%{transform:rotate(135deg) scale(.72)}80%,100%{transform:rotate(225deg) scale(1)}}
@keyframes sc-sheen{from{transform:translateX(-150%) skewX(-21deg)}to{transform:translateX(420%) skewX(-21deg)}}
@keyframes sc-indeterminate{0%{left:-35%}100%{left:100%}}
@keyframes sc-tip-in{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
@keyframes sc-menu-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@keyframes sc-blink{0%,100%{opacity:1}50%{opacity:.35}}


/* ---- tokens/base.css ---- */
/* Scenofy base element defaults. Kept minimal so it is safe to ship to every consumer. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg-app);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--body-md);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
[data-theme]{color:var(--text-primary)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-heading);text-wrap:balance;margin:0}
p{text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--motion-hover)}
a:hover{color:var(--text-link-hover);text-decoration:underline}
::selection{background:var(--selection-bg)}
:focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:var(--focus-offset)}
button{font:inherit;color:inherit}
code,kbd,pre,samp{font-family:var(--font-mono)}
img,video,svg{display:block;max-width:100%}
.sc-app{font-size:var(--ui-md);line-height:var(--lh-ui-md)}
.sc-scroll{scrollbar-width:thin;scrollbar-color:var(--surface-4) transparent}
.sc-scroll::-webkit-scrollbar{width:10px;height:10px}
.sc-scroll::-webkit-scrollbar-thumb{background:var(--surface-4);border-radius:999px;border:3px solid transparent;background-clip:content-box}


/* ---- components/actions/actions.css ---- */
/* Button, IconButton */
.sc-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--control-md);padding:0 14px;border:0;border-radius:var(--radius-button);font-family:var(--font-sans);font-size:13px;font-weight:600;line-height:1;letter-spacing:-.005em;white-space:nowrap;cursor:pointer;user-select:none;text-decoration:none;transition:background-color var(--motion-hover),color var(--motion-hover),box-shadow var(--motion-hover),transform var(--motion-press)}
.sc-btn:hover{text-decoration:none}
.sc-btn:active{transform:scale(var(--press-scale))}
.sc-btn:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.sc-btn[disabled],.sc-btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
.sc-btn--xs{height:var(--control-xs);padding:0 10px;font-size:12px;gap:4px}
.sc-btn--sm{height:var(--control-sm);padding:0 12px;font-size:12px;gap:6px}
.sc-btn--lg{height:var(--control-lg);padding:0 18px;font-size:14px;gap:8px}
.sc-btn--xl{height:var(--control-xl);padding:0 24px;font-size:16px;gap:10px}
.sc-btn--full{width:100%}
.sc-btn--primary{background:var(--accent);color:var(--on-accent)}
.sc-btn--primary:hover{background:var(--accent-hover);color:var(--on-accent);box-shadow:var(--glow-accent)}
.sc-btn--primary:active{background:var(--accent-pressed);box-shadow:none}
.sc-btn--secondary{background:var(--fill-neutral);color:var(--text-primary);box-shadow:var(--inset-highlight)}
.sc-btn--secondary:hover{background:var(--fill-neutral-hover);color:var(--text-primary)}
.sc-btn--secondary:active{background:var(--fill-neutral-pressed)}
.sc-btn--outline{background:transparent;color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--border-strong)}
.sc-btn--outline:hover{background:var(--surface-hover);color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--text-tertiary)}
.sc-btn--ghost{background:transparent;color:var(--text-secondary)}
.sc-btn--ghost:hover{background:var(--surface-hover);color:var(--text-primary)}
.sc-btn--ghost:active{background:var(--surface-active)}
.sc-btn--inverse{background:var(--text-primary);color:var(--text-inverse)}
.sc-btn--inverse:hover{color:var(--text-inverse);box-shadow:0 0 0 4px var(--fill-neutral)}
.sc-btn--danger{background:var(--danger);color:var(--on-danger)}
.sc-btn--danger:hover{background:var(--danger-hover);color:var(--on-danger)}
.sc-btn__icon{display:inline-flex;flex:none;margin:0 -2px}
.sc-btn--loading{cursor:progress;pointer-events:none}
.sc-btn--loading .sc-btn__label{opacity:.7}
.sc-btn--primary.sc-btn--lg::after,.sc-btn--primary.sc-btn--xl::after{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:34%;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));transform:translateX(-150%) skewX(-21deg)}
.sc-btn--primary.sc-btn--lg:hover::after,.sc-btn--primary.sc-btn--xl:hover::after{animation:sc-sheen 900ms var(--ease-out) 1}

.sc-iconbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--control-md);height:var(--control-md);padding:0;border:0;border-radius:var(--radius-icon-button);background:transparent;color:var(--icon-secondary);cursor:pointer;flex:none;transition:background-color var(--motion-hover),color var(--motion-hover),transform var(--motion-press),box-shadow var(--motion-hover)}
.sc-iconbtn:hover{background:var(--surface-hover);color:var(--icon-primary)}
.sc-iconbtn:active{transform:scale(.94);background:var(--surface-active)}
.sc-iconbtn:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.sc-iconbtn[disabled]{opacity:.4;pointer-events:none}
.sc-iconbtn--xs{width:var(--control-xs);height:var(--control-xs);border-radius:var(--radius-sm)}
.sc-iconbtn--sm{width:var(--control-sm);height:var(--control-sm);border-radius:var(--radius-sm)}
.sc-iconbtn--lg{width:var(--control-lg);height:var(--control-lg);border-radius:var(--radius-lg)}
.sc-iconbtn--circle{border-radius:var(--radius-pill)}
.sc-iconbtn--secondary{background:var(--fill-neutral);color:var(--icon-primary);box-shadow:var(--inset-highlight)}
.sc-iconbtn--secondary:hover{background:var(--fill-neutral-hover)}
.sc-iconbtn--outline{color:var(--icon-primary);box-shadow:inset 0 0 0 1px var(--border-default)}
.sc-iconbtn--outline:hover{box-shadow:inset 0 0 0 1px var(--border-strong)}
.sc-iconbtn--primary{background:var(--accent);color:var(--on-accent)}
.sc-iconbtn--primary:hover{background:var(--accent-hover);color:var(--on-accent);box-shadow:var(--glow-accent)}
.sc-iconbtn--active{background:var(--accent-subtle);color:var(--icon-accent)}
.sc-iconbtn--active:hover{background:var(--accent-muted);color:var(--icon-accent)}


/* ---- components/forms/forms.css ---- */
/* Input, Textarea, Select, ScrubInput */
.sc-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.sc-field__label{font:500 12px/16px var(--font-sans);color:var(--text-secondary)}
.sc-field__hint{font:400 12px/16px var(--font-sans);color:var(--text-tertiary)}
.sc-field__hint--error{color:var(--danger-text)}
.sc-input{position:relative;display:flex;align-items:center;gap:8px;height:var(--control-md);padding:0 10px;font-size:13px;background:var(--surface-2);border-radius:var(--radius-control);box-shadow:inset 0 0 0 1px var(--border-default);color:var(--text-primary);transition:box-shadow var(--motion-hover),background-color var(--motion-hover)}
.sc-input:hover{box-shadow:inset 0 0 0 1px var(--border-strong)}
.sc-input:focus-within{box-shadow:inset 0 0 0 1px var(--accent),0 0 0 3px var(--accent-subtle)}
.sc-input--error,.sc-input--error:hover{box-shadow:inset 0 0 0 1px var(--danger-text)}
.sc-input--error:focus-within{box-shadow:inset 0 0 0 1px var(--danger-text),0 0 0 3px var(--danger-subtle)}
.sc-input--disabled{opacity:.5;pointer-events:none}
.sc-input--sm{height:var(--control-sm);padding:0 8px;font-size:12px;border-radius:var(--radius-sm);gap:6px}
.sc-input--lg{height:var(--control-lg);padding:0 14px;font-size:14px;border-radius:var(--radius-lg)}
.sc-input--xl{height:var(--control-xl);padding:0 18px;font-size:16px;border-radius:var(--radius-xl)}
.sc-input--pill{border-radius:var(--radius-pill);padding:0 14px}
.sc-input--pill.sc-input--xl{padding:0 20px}
.sc-input input,.sc-input select,.sc-input textarea{all:unset;box-sizing:border-box;flex:1;min-width:0;height:100%;font-family:var(--font-sans);font-size:inherit;font-weight:400;line-height:1.2;color:var(--text-primary)}
.sc-input input::placeholder,.sc-input textarea::placeholder{color:var(--text-tertiary)}
.sc-input__icon{display:inline-flex;color:var(--icon-secondary);flex:none}
.sc-input__suffix{flex:none;display:inline-flex;align-items:center;font:500 12px/1 var(--font-sans);color:var(--text-tertiary)}
.sc-input--textarea{height:auto;padding:9px 10px;align-items:stretch}
.sc-input--textarea.sc-input--sm{padding:6px 8px}
.sc-input--textarea.sc-input--lg{padding:12px 14px}
.sc-input--textarea textarea{height:auto;line-height:1.5;white-space:pre-wrap;overflow-wrap:break-word;scrollbar-width:thin;scrollbar-color:var(--surface-4) transparent}
.sc-select__trigger{all:unset;box-sizing:border-box;flex:1;min-width:0;height:100%;display:flex;align-items:center;padding-right:22px;cursor:pointer;font-family:var(--font-sans);font-size:inherit;font-weight:400;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-select__trigger--placeholder{color:var(--text-tertiary)}
.sc-input--open{box-shadow:inset 0 0 0 1px var(--accent),0 0 0 3px var(--accent-subtle)}
.sc-input__chevron{position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--icon-secondary);display:inline-flex;transition:transform var(--dur-fast) var(--ease-out)}
.sc-select__list{max-height:280px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--surface-4) transparent}
.sc-select__list .sc-menu__item{gap:16px;padding:0 8px 0 10px}
.sc-select__list .sc-menu__item:hover{background:transparent}
.sc-select__list .sc-menu__item--active,.sc-select__list .sc-menu__item--active:hover{background:var(--surface-selected);color:var(--text-primary)}
.sc-select__list .sc-menu__item--selected{font-weight:500}
.sc-select__list .sc-menu__check{width:14px;justify-content:center;flex:none}
.sc-select__list--sm{min-width:120px;font-size:12px;line-height:16px}
.sc-select__list--sm .sc-menu__item{height:26px;padding:0 6px 0 8px}

.sc-scrub{display:flex;align-items:center;height:var(--control-xs);min-width:0;background:var(--surface-2);border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px var(--border-subtle);font:500 12px/1 var(--font-sans);color:var(--text-primary);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;transition:box-shadow var(--motion-hover)}
.sc-scrub:hover{box-shadow:inset 0 0 0 1px var(--border-strong)}
.sc-scrub--sm{height:var(--control-sm)}
.sc-scrub--active,.sc-scrub:focus-within{box-shadow:inset 0 0 0 1px var(--accent)}
.sc-scrub--disabled{opacity:.45;pointer-events:none}
.sc-scrub__label{flex:none;display:flex;align-items:center;justify-content:center;min-width:22px;height:100%;padding:0 4px 0 7px;color:var(--text-tertiary);cursor:ew-resize;user-select:none;touch-action:none;transition:color var(--motion-hover)}
.sc-scrub__label:hover,.sc-scrub--active .sc-scrub__label{color:var(--text-accent)}
.sc-scrub input{all:unset;box-sizing:border-box;flex:1;min-width:0;height:100%;padding:0 2px;font:inherit;font-variant-numeric:tabular-nums;color:inherit;cursor:text}
.sc-scrub__unit{flex:none;padding:0 7px 0 2px;color:var(--text-tertiary)}


/* ---- components/display/display.css ---- */
/* Card, Badge, Tag, Avatar, Kbd */
.sc-card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--surface-1);border:0;border-radius:var(--radius-card);box-shadow:inset 0 0 0 1px var(--border-subtle);color:var(--text-primary);font-family:var(--font-sans);text-align:left;text-decoration:none;overflow:hidden;transition:box-shadow var(--motion-hover),transform var(--dur-moderate) var(--ease-out),background-color var(--motion-hover)}
button.sc-card{width:100%}
.sc-card--outline{background:transparent;box-shadow:inset 0 0 0 1px var(--border-default)}
.sc-card--raised{background:var(--surface-overlay);box-shadow:var(--inset-highlight),inset 0 0 0 1px var(--border-default),var(--shadow-md)}
.sc-card--ghost{background:transparent;box-shadow:none}
.sc-card--r-md{border-radius:var(--radius-md)}
.sc-card--r-lg{border-radius:var(--radius-lg)}
.sc-card--r-2xl{border-radius:var(--radius-2xl)}
.sc-card--interactive{cursor:pointer}
.sc-card--interactive:hover{box-shadow:inset 0 0 0 1px var(--border-strong);color:var(--text-primary);text-decoration:none}
.sc-card--ghost.sc-card--interactive:hover{background:var(--surface-hover);box-shadow:none}
.sc-card--lift:hover{transform:translateY(-2px)}
.sc-card--interactive:active{transform:scale(.99)}
.sc-card--selected,.sc-card--selected:hover{box-shadow:inset 0 0 0 1.5px var(--accent),var(--glow-accent)}
.sc-card:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.sc-card__media{position:relative;aspect-ratio:16/9;margin:6px 6px 0;border-radius:calc(var(--radius-card) - 6px);background:var(--surface-2);overflow:hidden}
.sc-card--r-lg .sc-card__media{border-radius:7px}
.sc-card__media>img,.sc-card__media>video{width:100%;height:100%;object-fit:cover;display:block}
.sc-card__body{display:flex;flex-direction:column;gap:2px;padding:16px}
.sc-card--p-sm .sc-card__body{padding:12px}
.sc-card--p-lg .sc-card__body{padding:24px}
.sc-card--p-none .sc-card__body{padding:0}
.sc-card__media+.sc-card__body{padding:10px 12px 14px}
.sc-card--p-sm .sc-card__media+.sc-card__body{padding:8px 8px 10px}
.sc-card--p-lg .sc-card__media+.sc-card__body{padding:14px 18px 20px}
.sc-card__title{font:600 14px/20px var(--font-sans);color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-card__subtitle{font:400 12px/16px var(--font-sans);color:var(--text-tertiary);font-variant-numeric:tabular-nums}
.sc-card__footer{display:flex;align-items:center;gap:8px;padding:0 16px 16px}
.sc-card--p-sm .sc-card__footer{padding:0 12px 12px}
.sc-card--p-lg .sc-card__footer{padding:0 24px 24px}

.sc-badge{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:var(--radius-pill);font:600 11px/1 var(--font-sans);letter-spacing:.01em;white-space:nowrap;background:var(--fill-neutral);color:var(--text-secondary);font-variant-numeric:tabular-nums}
.sc-badge--sm{height:18px;padding:0 6px;font-size:10px;gap:4px}
.sc-badge--lg{height:24px;padding:0 10px;font-size:12px}
.sc-badge__dot{width:6px;height:6px;border-radius:1px;background:currentColor;transform:rotate(45deg);flex:none}
.sc-badge__dot--pulse{animation:sc-blink 1.4s var(--ease-in-out) infinite}
.sc-badge--accent{background:var(--accent-subtle);color:var(--text-accent)}
.sc-badge--success{background:var(--success-subtle);color:var(--success-text)}
.sc-badge--warning{background:var(--warning-subtle);color:var(--warning-text)}
.sc-badge--danger{background:var(--danger-subtle);color:var(--danger-text)}
.sc-badge--solid.sc-badge--neutral{background:var(--text-primary);color:var(--text-inverse)}
.sc-badge--solid.sc-badge--accent{background:var(--accent);color:var(--on-accent)}
.sc-badge--solid.sc-badge--success{background:var(--success);color:var(--on-success)}
.sc-badge--solid.sc-badge--warning{background:var(--warning);color:var(--on-warning)}
.sc-badge--solid.sc-badge--danger{background:var(--danger);color:var(--on-danger)}
.sc-badge--outline{background:transparent;box-shadow:inset 0 0 0 1px var(--border-strong)}

.sc-tag{display:inline-flex;align-items:center;gap:6px;height:var(--control-sm);padding:0 12px;border:0;border-radius:var(--radius-pill);background:transparent;box-shadow:inset 0 0 0 1px var(--border-default);font:500 12px/1 var(--font-sans);color:var(--text-secondary);white-space:nowrap;user-select:none;transition:background-color var(--motion-hover),color var(--motion-hover),box-shadow var(--motion-hover),transform var(--motion-press)}
.sc-tag--md{height:var(--control-md);font-size:13px;padding:0 14px}
.sc-tag--clickable{cursor:pointer}
.sc-tag--clickable:hover{background:var(--surface-hover);color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--border-strong)}
.sc-tag--clickable:active{transform:scale(var(--press-scale))}
.sc-tag--clickable:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.sc-tag--selected,.sc-tag--selected:hover{background:var(--accent-subtle);color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--border-accent)}
.sc-tag--disabled{opacity:.4;pointer-events:none}
.sc-tag__icon{display:inline-flex;color:var(--icon-secondary)}
.sc-tag--selected .sc-tag__icon{color:var(--icon-accent)}
.sc-tag__remove{all:unset;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:-6px;border-radius:var(--radius-pill);color:var(--icon-secondary);cursor:pointer}
.sc-tag__remove:hover{background:var(--surface-active);color:var(--icon-primary)}

.sc-avatar{position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--s,32px);height:var(--s,32px);border-radius:50%;background:var(--avatar-bg);color:var(--text-primary);font-family:var(--font-sans);font-weight:600;font-size:calc(var(--s,32px) * .38);line-height:1;letter-spacing:.01em;box-shadow:inset 0 0 0 1px var(--border-subtle);user-select:none}
.sc-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.sc-avatar--rounded{border-radius:calc(var(--s,32px) * .28)}
.sc-avatar--ring{box-shadow:0 0 0 2px var(--bg-app),0 0 0 3.5px var(--accent)}
.sc-avatar__status{position:absolute;right:-1px;bottom:-1px;width:max(8px,calc(var(--s,32px) * .28));height:max(8px,calc(var(--s,32px) * .28));border-radius:50%;background:var(--success);box-shadow:0 0 0 2px var(--bg-app)}
.sc-avatar__status--away{background:var(--gray-500)}

.sc-kbd{display:inline-flex;align-items:center;gap:3px;vertical-align:middle}
.sc-kbd kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:5px;background:var(--fill-neutral);box-shadow:inset 0 -1px 0 var(--border-default),inset 0 0 0 1px var(--border-subtle);font:500 11px/1 var(--font-sans);color:var(--text-secondary)}
.sc-kbd--sm kbd{min-width:16px;height:16px;padding:0 4px;font-size:10px;border-radius:4px}

/* SourceBadge, AvatarGroup */
.sc-source{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 7px;border-radius:var(--radius-pill);background:var(--fill-neutral);color:var(--text-secondary);font:500 11px/1 var(--font-sans);white-space:nowrap}
.sc-source>:first-child{color:var(--icon-secondary)}
.sc-source--sm{gap:4px;height:20px;padding:0 7px 0 6px;font-size:10px}
.sc-source--overlay{background:rgba(17,17,19,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#FFFFFF}
.sc-source--overlay>:first-child{color:rgba(255,255,255,.8)}
.sc-avgroup{display:inline-flex;align-items:center;padding-left:6px}
.sc-avgroup>.sc-avatar{margin-left:-6px;box-shadow:0 0 0 2px var(--bg-app)}
.sc-avgroup>.sc-avgroup__ring{box-shadow:0 0 0 2px var(--bg-app),0 0 0 3.5px var(--ring)}
.sc-avgroup__more{background:var(--fill-neutral);color:var(--text-secondary);font:600 10px/1 var(--font-sans)}


/* ---- components/brand/brand.css ---- */
/* Logo, Icon */
.sc-icon{display:inline-flex;flex:none;align-items:center;justify-content:center;line-height:0;vertical-align:middle}
.sc-icon svg{width:100%;height:100%;display:block}


/* ---- components/feedback/feedback.css ---- */
/* Tooltip, Toast, Progress, Spinner */
.sc-tip-wrap{position:relative;display:inline-flex}
.sc-tip{position:absolute;z-index:var(--z-tooltip);pointer-events:none;display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:var(--radius-sm);background:var(--tooltip-bg);color:var(--tooltip-text);font:500 12px/16px var(--font-sans);white-space:nowrap;box-shadow:inset 0 0 0 1px var(--border-subtle),var(--shadow-md);animation:sc-tip-in var(--dur-fast) var(--ease-out)}
.sc-tip--top{bottom:calc(100% + 6px);left:50%;translate:-50% 0}
.sc-tip--bottom{top:calc(100% + 6px);left:50%;translate:-50% 0}
.sc-tip--left{right:calc(100% + 6px);top:50%;translate:0 -50%}
.sc-tip--right{left:calc(100% + 6px);top:50%;translate:0 -50%}
.sc-tip .sc-kbd kbd{background:rgba(255,255,255,.1);box-shadow:none;color:var(--gray-300)}

.sc-toast{position:relative;display:flex;gap:12px;align-items:flex-start;width:360px;max-width:100%;padding:12px 10px 12px 14px;border-radius:var(--radius-lg);background:var(--surface-3);box-shadow:var(--inset-highlight),inset 0 0 0 1px var(--border-default),var(--shadow-lg);color:var(--text-primary);font-family:var(--font-sans);overflow:hidden;animation:sc-rise var(--dur-moderate) var(--ease-out)}
.sc-toast__icon{flex:none;margin-top:1px;display:inline-flex;color:var(--icon-secondary)}
.sc-toast--success .sc-toast__icon{color:var(--success-text)}
.sc-toast--danger .sc-toast__icon{color:var(--danger-text)}
.sc-toast--warning .sc-toast__icon{color:var(--warning-text)}
.sc-toast--accent .sc-toast__icon{color:var(--icon-accent)}
.sc-toast__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sc-toast__title{font:600 13px/18px var(--font-sans);font-variant-numeric:tabular-nums}
.sc-toast__desc{font:400 12px/16px var(--font-sans);color:var(--text-secondary);font-variant-numeric:tabular-nums}
.sc-toast__actions{display:flex;gap:2px;align-items:center;margin:-4px 0 -4px 0}
.sc-toast__progress{position:absolute;left:0;right:0;bottom:0}

.sc-progress{display:flex;flex-direction:column;gap:6px;width:100%;min-width:0}
.sc-progress__head{display:flex;justify-content:space-between;gap:12px;font:500 12px/16px var(--font-sans);color:var(--text-secondary)}
.sc-progress__head>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-progress__value{font-variant-numeric:tabular-nums;color:var(--text-primary)}
.sc-progress__track{position:relative;height:4px;border-radius:var(--radius-pill);background:var(--fill-neutral);overflow:hidden}
.sc-progress--xs .sc-progress__track{height:2px}
.sc-progress--md .sc-progress__track{height:6px}
.sc-progress--lg .sc-progress__track{height:8px}
.sc-progress__fill{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:var(--accent);overflow:hidden;transition:width var(--dur-moderate) var(--ease-out)}
.sc-progress--success .sc-progress__fill{background:var(--success)}
.sc-progress--neutral .sc-progress__fill{background:var(--text-secondary)}
.sc-progress__fill--trail::after{content:"";position:absolute;inset:0;background:var(--gradient-shimmer);animation:sc-shimmer 1.4s linear infinite}
.sc-progress__fill--indeterminate{width:35%;animation:sc-indeterminate 1.3s var(--ease-in-out) infinite}

.sc-spinner{display:inline-flex;align-items:center;justify-content:center;width:var(--s,16px);height:var(--s,16px);flex:none}
.sc-spinner::before{content:"";width:calc(var(--s,16px) * .56);height:calc(var(--s,16px) * .56);border-radius:calc(var(--s,16px) * .1);background:var(--accent);animation:sc-diamond-spin 1.1s var(--ease-in-out) infinite}
.sc-spinner--current::before{background:currentColor}

/* Banner, EmptyState, UsageMeter */
.sc-banner{display:flex;align-items:center;gap:12px;min-height:44px;box-sizing:border-box;padding:6px 6px 6px 14px;border-radius:var(--radius-lg);background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--border-subtle);font:400 13px/18px var(--font-sans);color:var(--text-secondary)}
.sc-banner__icon{display:inline-flex;flex:none;color:var(--icon-secondary)}
.sc-banner__text{flex:1;min-width:0;padding:6px 0;text-wrap:pretty}
.sc-banner__title{margin-right:6px;font-weight:600;color:var(--text-primary)}
.sc-banner__action{display:flex;gap:6px;flex:none}
.sc-banner__close{all:unset;display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:var(--radius-md);color:var(--icon-secondary);cursor:pointer}
.sc-banner__close:hover{background:var(--surface-hover);color:var(--icon-primary)}
.sc-banner__close:focus-visible{box-shadow:var(--ring-focus)}
.sc-banner--accent{background:var(--accent-subtle);box-shadow:inset 0 0 0 1px var(--border-accent)}
.sc-banner--accent .sc-banner__icon{color:var(--icon-accent)}
.sc-banner--success{background:var(--success-subtle);box-shadow:none}
.sc-banner--success .sc-banner__icon{color:var(--success-text)}
.sc-banner--warning{background:var(--warning-subtle);box-shadow:none}
.sc-banner--warning .sc-banner__icon{color:var(--warning-text)}
.sc-banner--danger{background:var(--danger-subtle);box-shadow:none}
.sc-banner--danger .sc-banner__icon{color:var(--danger-text)}
.sc-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:40px 24px;text-align:center}
.sc-empty--sm{padding:24px 16px}
.sc-empty--bordered{border-radius:var(--radius-lg);box-shadow:inset 0 0 0 1px var(--border-subtle)}
.sc-empty__tile{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:10px;border-radius:12px;background:var(--surface-2);box-shadow:var(--inset-highlight);color:var(--icon-secondary)}
.sc-empty--sm .sc-empty__tile{width:36px;height:36px;margin-bottom:8px;border-radius:10px}
.sc-empty__title{margin:0;font:700 17px/22px var(--font-display);letter-spacing:-.01em;color:var(--text-primary)}
.sc-empty--sm .sc-empty__title{font-size:15px;line-height:20px}
.sc-empty__desc{max-width:40ch;margin:0;font:400 13px/18px var(--font-sans);color:var(--text-tertiary);text-wrap:pretty}
.sc-empty__actions{display:flex;gap:8px;margin-top:14px}
.sc-meter{display:flex;flex-direction:column;gap:8px;font:400 12px/16px var(--font-sans);color:var(--text-tertiary);font-variant-numeric:tabular-nums}
.sc-meter__top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.sc-meter__label{font:500 13px/18px var(--font-sans);color:var(--text-primary)}
.sc-meter__num{flex:none;white-space:nowrap}
.sc-meter__num b{font-weight:600;color:var(--text-primary)}
.sc-meter__track{display:flex;gap:2px;height:6px;border-radius:var(--radius-pill);background:var(--fill-neutral);overflow:hidden}
.sc-meter__seg{display:block;height:100%;background:var(--accent);transition:width var(--dur-moderate, 280ms) var(--ease-out)}
.sc-meter__seg--alt,.sc-meter__key--alt{background:color-mix(in oklab,var(--accent) 50%,var(--surface-1))}
.sc-meter--warn .sc-meter__seg{background:var(--warning)}
.sc-meter__foot{display:flex;justify-content:space-between;gap:8px}
.sc-meter--warn .sc-meter__note{color:var(--warning-text)}
.sc-meter__legend{display:flex;flex-wrap:wrap;gap:4px 14px}
.sc-meter__legend span{display:inline-flex;align-items:center;gap:6px}
.sc-meter__key{width:6px;height:6px;border-radius:1px;background:var(--accent);transform:rotate(45deg)}
.sc-meter--compact{gap:6px;font-size:11px;line-height:14px}
.sc-meter--compact .sc-meter__label{font:500 11px/14px var(--font-sans);color:var(--text-tertiary)}
.sc-meter--compact .sc-meter__track{height:4px}


/* ---- components/editor/editor.css ---- */
/* Panel, PropertyRow, Timecode, Keyframe, TimelineClip */
.sc-panel{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--surface-1);border-radius:var(--radius-panel);box-shadow:inset 0 0 0 1px var(--border-subtle);color:var(--text-primary);font-family:var(--font-sans);overflow:hidden}
.sc-panel--section{flex:none;background:transparent;border-radius:0;box-shadow:inset 0 1px 0 var(--border-subtle);overflow:visible}
.sc-panel--section:first-child{box-shadow:none}
.sc-panel__head{flex:none;display:flex;align-items:center;gap:6px;height:36px;padding:0 6px 0 12px}
.sc-panel__title{all:unset;box-sizing:border-box;flex:1;min-width:0;display:flex;align-items:center;gap:6px;font:600 12px/16px var(--font-sans);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
button.sc-panel__title{cursor:pointer}
button.sc-panel__title:focus-visible{box-shadow:var(--ring-focus);border-radius:var(--radius-xs)}
.sc-panel__chev{display:inline-flex;color:var(--icon-secondary);transition:transform var(--dur-base) var(--ease-out)}
.sc-panel--collapsed .sc-panel__chev{transform:rotate(-90deg)}
.sc-panel__actions{flex:none;display:flex;gap:2px;align-items:center}
.sc-panel__body{flex:1;min-height:0;display:flex;flex-direction:column}
.sc-panel__body--scroll{overflow:auto;scrollbar-width:thin;scrollbar-color:var(--surface-4) transparent}
.sc-panel--p-sm .sc-panel__body{padding:0 6px 6px}
.sc-panel--p-md .sc-panel__body{padding:0 12px 12px}
.sc-panel__foot{flex:none;padding:8px 12px;box-shadow:inset 0 1px 0 var(--border-subtle)}

.sc-prop{display:grid;grid-template-columns:16px var(--lw,72px) minmax(0,1fr);align-items:center;gap:6px;min-height:var(--editor-row);font:400 12px/16px var(--font-sans)}
.sc-prop--nokf{grid-template-columns:var(--lw,72px) minmax(0,1fr)}
.sc-prop__label{color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-prop__controls{display:flex;gap:4px;align-items:center;min-width:0}
.sc-prop__controls>*{flex:1 1 0;min-width:0}
.sc-prop__controls>.sc-iconbtn{flex:none}

.sc-tc{display:inline-flex;align-items:baseline;font-family:var(--font-sans);font-size:13px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:.01em;color:var(--text-primary);white-space:nowrap}
.sc-tc--sm{font-size:11px}
.sc-tc--lg{font-size:20px}
.sc-tc--xl{font-size:32px;letter-spacing:0}
.sc-tc--secondary{color:var(--text-secondary)}
.sc-tc--accent{color:var(--text-accent)}
.sc-tc__sep{color:var(--text-tertiary);padding:0 .03em}
.sc-tc__total{color:var(--text-tertiary);margin-left:.45em}

.sc-kf{all:unset;box-sizing:border-box;position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--s,10px);height:var(--s,10px);color:var(--keyframe);cursor:pointer}
.sc-kf::before{content:"";width:calc(var(--s,10px) * .72);height:calc(var(--s,10px) * .72);border-radius:var(--radius-keyframe);background:currentColor;transform:rotate(45deg);transition:transform var(--dur-fast) var(--ease-out),background-color var(--motion-hover),box-shadow var(--motion-hover)}
.sc-kf:hover{color:var(--text-primary)}
.sc-kf:hover::before{transform:rotate(45deg) scale(1.18)}
.sc-kf--ease::before{border-radius:42%}
.sc-kf--hold::before{transform:none;width:calc(var(--s,10px) * .64);height:calc(var(--s,10px) * .64)}
.sc-kf--hold:hover::before{transform:scale(1.15)}
.sc-kf--selected,.sc-kf--selected:hover{color:var(--keyframe-selected)}
.sc-kf--selected::before{box-shadow:0 0 8px var(--lime-a48)}
.sc-kf--hollow::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.sc-kf--hollow{color:var(--text-tertiary)}
.sc-kf--hollow.sc-kf--selected{color:var(--keyframe-selected)}
.sc-kf:focus-visible{outline:none}
.sc-kf:focus-visible::before{box-shadow:0 0 0 2px var(--focus-ring)}

.sc-clip{position:absolute;top:2px;bottom:2px;display:flex;align-items:center;gap:6px;min-width:14px;padding:0 10px;border-radius:var(--radius-clip);background:var(--timeline-clip);box-shadow:inset 0 0 0 1px var(--timeline-clip-border);font:500 11px/14px var(--font-sans);color:var(--text-secondary);overflow:hidden;cursor:grab;user-select:none;transition:background-color var(--motion-hover),box-shadow var(--motion-hover),color var(--motion-hover)}
.sc-clip--static{position:relative;top:auto;bottom:auto;height:26px}
.sc-clip:hover{background:var(--timeline-clip-hover);color:var(--text-primary)}
.sc-clip--selected,.sc-clip--selected:hover{background:var(--timeline-clip-hover);color:var(--text-primary);box-shadow:inset 0 0 0 1.5px var(--accent)}
.sc-clip--muted{opacity:.45}
.sc-clip--scene{background:var(--fill-neutral);box-shadow:inset 0 0 0 1px var(--border-subtle);font-weight:600}
.sc-clip__icon{display:inline-flex;flex:none;color:var(--icon-secondary)}
.sc-clip--selected .sc-clip__icon{color:var(--icon-accent)}
.sc-clip__label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-clip__meta{flex:none;color:var(--text-tertiary);font-variant-numeric:tabular-nums}
.sc-clip__handle{position:absolute;top:0;bottom:0;width:6px;display:flex;align-items:center;justify-content:center;background:var(--accent);cursor:ew-resize;opacity:0;transition:opacity var(--motion-hover)}
.sc-clip__handle::before{content:"";width:2px;height:10px;border-radius:2px;background:var(--on-accent);opacity:.7}
.sc-clip__handle--l{left:0}
.sc-clip__handle--r{right:0}
.sc-clip--selected .sc-clip__handle{opacity:1}
.sc-clip--selected .sc-clip__icon:first-child{margin-left:2px}

/* TimelineMarker: flag on a pole (never a diamond) */
.sc-marker{position:absolute;top:0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;cursor:default}
.sc-marker[role="button"]{cursor:pointer}
.sc-marker__flag{height:16px;padding:0 6px;border-radius:4px 4px 4px 0;background:var(--marker,var(--text-secondary));color:var(--bg-app);font:600 10px/16px var(--font-sans);white-space:nowrap}
.sc-marker__stem{width:1px;height:var(--stem,24px);background:var(--marker,var(--text-secondary));opacity:.7}
.sc-marker--selected .sc-marker__flag{box-shadow:0 0 0 1.5px var(--bg-app),0 0 0 3px var(--accent)}
.sc-marker:focus-visible{outline:none}
.sc-marker:focus-visible .sc-marker__flag{box-shadow:var(--ring-focus)}