/* C1 Design System — Colors, Type, Motion, Spacing
 * Source of truth: design-system/DESIGN.md (C1 2026 rebrand)
 *
 * Usage: @import this file at the top of any artifact.
 * Fonts are loaded via Google Fonts (Anybody + Inter) and a local Geist Mono.
 */

/* vietnamese */
@font-face {
  font-family: 'Anybody';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/anybody-6d970bbb.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Anybody';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/anybody-69579497.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Anybody';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/anybody-49458b1d.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;
}
/* vietnamese */
@font-face {
  font-family: 'Anybody';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/anybody-0fbefc2d.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Anybody';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/anybody-0d7f69a8.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Anybody';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/anybody-d82bdca8.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/inter-4df50499.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/inter-2f0c23df.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/inter-faf7066c.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/inter-1204a7b2.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/inter-8bc5f787.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/inter-8b7c651c.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/inter-fe275e98.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: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/geist-mono-8406ff83.woff2") format('woff2');
}

:root {
  /* ===== Primary — Teal ramp ===== */
  --primary-extra-light: #EFFAFA;
  --primary-light: #D5F1F0;
  --primary-main: #295F65;
  --primary-dark: #1B484D;
  --primary-extra-dark: #00343A;
  --primary-contrast: #FFFFFF;

  /* ===== Secondary — Electric pink ===== */
  --secondary-extra-light: #FFE2FA;
  --secondary-light: #FFBFF4;
  --secondary-main: #FF92EB;
  --secondary-dark: #7A226A;
  --secondary-extra-dark: #38062F;

  /* ===== Neutral greys (warm) ===== */
  --grey-50:  #FEFDFC;
  --grey-100: #F1F0EF;
  --grey-150: #E8E7E6;
  --grey-200: #E1E0DF;
  --grey-300: #C3C1BF;
  --grey-400: #ADAAA7;
  --grey-500: #95928F;
  --grey-600: #7C7976;
  --grey-700: #605D5A;
  --grey-800: #413F3D;
  --grey-900: #2A2826;

  /* ===== Semantic ===== */
  --success-extra-light: #DCF4DC;
  --success-light: #5DC05D;
  --success-main:  #009900;
  --success-dark:  #055205;
  --success-extra-dark: #003300;

  --error-extra-light: #FFEAE5;
  --error-light: #FF9985;
  --error-main:  #E02500;
  --error-dark:  #AD1D00;
  --error-extra-dark: #6B1200;

  --warning-extra-light: #FFECD6;
  --warning-light: #F9B567;
  --warning-main:  #F08000;
  --warning-dark:  #B35F00;
  --warning-extra-dark: #7A4100;

  --info-extra-light: #E1E0DF;
  --info-light: #ADAAA7;
  --info-main:  #7C7976;
  --info-dark:  #605D5A;
  --info-extra-dark: #413F3D;

  /* ===== Brand ===== */
  --brand-white: #F7F7F5;
  --brand-dark-teal: #00343A;
  --brand-charcoal: #231F20;
  --brand-pink: #FF92EB;

  /* ===== Roles (light mode) ===== */
  --bg-default: #FFFFFF;
  --bg-surface: var(--grey-50);
  --bg-hover: var(--grey-150);
  --bg-selected: var(--primary-extra-light);

  --text-primary:   var(--grey-900);
  --text-secondary: var(--grey-700);
  --text-muted:     var(--grey-600);
  --text-disabled:  var(--grey-400);
  --text-on-primary: #FFFFFF;

  --border-subtle:   var(--grey-100);
  --border-primary:  var(--grey-200);
  --border-emphasis: var(--grey-300);

  /* ===== 12-hue icon palette (avatars, tags) ===== */
  --icon-violet:     #7353FF;
  --icon-magenta:    #A1006B;
  --icon-pink:       #D157A1;
  --icon-vermillion: #FD6300;
  --icon-gold:       #FFC62E;
  --icon-fuschia:    #7A226A;
  --icon-chartreuse: #8EAC4E;
  --icon-mint:       #7DBE93;
  --icon-teal:       #00343A;
  --icon-aqua:       #0070FF;
  --icon-eggplant:   #381049;
  --icon-midnight:   #0D2056;

  /* ===== Type ===== */
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Anybody', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'Geist Mono', 'SF Mono', 'Fira Code', monospace;

  /* ===== Spacing (n × 0.3rem) ===== */
  --space-xs:  0.3rem;   /*  4.8px */
  --space-s:   0.6rem;   /*  9.6px */
  --space-m:   0.9rem;   /* 14.4px */
  --space-l:   1.2rem;   /* 19.2px */
  --space-xl:  2.1rem;   /* 33.6px */
  --space-xxl: 3.9rem;   /* 62.4px */

  /* ===== Radii ===== */
  --radius-small:    4px;
  --radius-regular:  6px;   /* default */
  --radius-medium:   8px;
  --radius-large:   10px;
  --radius-extra:   20px;

  /* ===== Elevation ===== */
  --shadow-flat: none;
  --shadow-default: 0px 3px 6px -2px #1018281A;
  --shadow-strong: 0px 2px 8px -2px #10182844, 0px 4px 12px -2px #10182844;
  --shadow-paper-2: 0px 1px 10px rgba(0, 0, 0, 0.06);

  /* ===== Motion ===== */
  --dur-shortest: 150ms; /* @kind other */
  --dur-shorter:  200ms; /* @kind other */
  --dur-short:    250ms; /* @kind other */
  --dur-standard: 300ms; /* @kind other */
  --dur-complex:  375ms; /* @kind other */

  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:    cubic-bezier(0.0, 0, 0.2, 1); /* @kind other */
  --ease-in:     cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --ease-sharp:  cubic-bezier(0.4, 0, 0.6, 1); /* @kind other */

  /* ===== Layout constants ===== */
  --sidebar-width: 210px;
  --sidebar-collapsed: 50px;
  --browse-sidebar-width: 304px;
  --container-xl: 2160px;
  --container-lg: 1300px;
}

/* Dark mode overrides — add .dark to root or wrap in media query */
.dark, [data-theme="dark"] {
  --grey-50:  #131414;
  --grey-100: #2B2E2D;
  --grey-150: #2D302F;
  --grey-200: #353837;
  --grey-300: #414443;
  --grey-400: #5F6261;
  --grey-500: #7B7E7E;
  --grey-600: #ABAEAE;
  --grey-700: #C2C5C5;
  --grey-800: #E1E2E3;
  --grey-900: #F0F1F2;

  --primary-extra-light: #1A3032;
  --primary-light: #1F4851;
  --primary-main:  #41B7C2;
  --primary-dark:  #7EDDE1;
  --primary-extra-dark: #C5FCFA;

  --bg-default: var(--grey-50);
  --bg-surface: var(--grey-100);
  --bg-hover: rgba(255,255,255,0.06);
  --bg-selected: rgba(255,255,255,0.10);

  --text-primary:   #FFFFFF;
  --text-secondary: var(--grey-600);
  --text-muted:     var(--grey-500);
  --text-on-primary: #00343A;

  --border-subtle:  var(--grey-100);
  --border-primary: var(--grey-200);
  --border-emphasis:var(--grey-300);
}

/* ===== Base ===== */
html, body {
  background: var(--bg-default);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;        /* 14px base */
  font-weight: 450;       /* body weight */
  line-height: 1.55;
  letter-spacing: 0.001em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===== Type scale ===== */
h1, .h1 {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 600; line-height: 1.22;
  letter-spacing: -0.02em; color: var(--text-primary); margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 600; line-height: 1.28;
  letter-spacing: -0.015em; color: var(--text-primary); margin: 0;
}
h3, .h3 {
  font-family: var(--font-body);
  font-size: 20px; font-weight: 600; line-height: 1.34;
  letter-spacing: -0.008em; color: var(--text-primary); margin: 0;
}
h4, .h4 {
  font-family: var(--font-body);
  font-size: 18px; font-weight: 600; line-height: 1.38;
  letter-spacing: -0.006em; color: var(--text-primary); margin: 0;
}
h5, .h5 {
  font-family: var(--font-body);
  font-size: 16px; font-weight: 600; line-height: 1.42;
  letter-spacing: -0.003em; color: var(--text-primary); margin: 0;
}
h6, .h6 {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 600; line-height: 1.46;
  letter-spacing: 0; color: var(--text-primary); margin: 0;
}

.body1, .body2, p {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 450; line-height: 1.55;
  letter-spacing: 0.001em; color: var(--text-primary); margin: 0;
}
.subtitle1 {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 500; line-height: 1.45;
  letter-spacing: 0.001em; color: var(--text-primary);
}
.subtitle2 {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 500; line-height: 1.44;
  letter-spacing: 0.001em; color: var(--text-primary);
}
.caption {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 400; line-height: 1.42;
  letter-spacing: 0.008em; color: var(--text-secondary);
}
.button-text {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600; line-height: 1.35;
  letter-spacing: 0.004em; text-transform: none;
}
.overline {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 500; line-height: 1.48;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary);
}
.eyebrow {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 500; line-height: 1.45;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary);
}
code, .monospace, pre {
  font-family: var(--font-mono);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

/* ===== Elements ===== */
a { color: var(--primary-main); text-decoration: none; font-weight: 450; }
a:hover { color: var(--primary-dark); }

hr { border: 0; border-top: 1px solid var(--border-primary); margin: var(--space-l) 0; }


/* C1 PRODUCT Design System — canonical entry
 *
 * Consumers link ONLY this file. It pulls in the design-system token
 * source of truth (colors, type, motion, spacing, elevation).
 *
 * Note: marketing/platform-overview.css is a page-specific minified
 * Tailwind build artifact, NOT a token source — it is intentionally
 * not imported here.
 */

/* C1 Design System — Colors, Type, Motion, Spacing
 * Source of truth: design-system/DESIGN.md (C1 2026 rebrand)
 *
 * Usage: @import this file at the top of any artifact.
 * Fonts are loaded via Google Fonts (Anybody + Inter) and a local Geist Mono.
 */

/* vietnamese */
@font-face {
  font-family: 'Anybody';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/anybody-6d970bbb.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Anybody';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/anybody-69579497.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Anybody';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/anybody-49458b1d.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;
}
/* vietnamese */
@font-face {
  font-family: 'Anybody';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/anybody-0fbefc2d.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Anybody';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/anybody-0d7f69a8.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Anybody';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/anybody-d82bdca8.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/inter-4df50499.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/inter-2f0c23df.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/inter-faf7066c.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/inter-1204a7b2.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/inter-8bc5f787.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/inter-8b7c651c.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/inter-fe275e98.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: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/geist-mono-8406ff83.woff2") format('woff2');
}

:root {
  /* ===== Primary — Teal ramp ===== */
  --primary-extra-light: #EFFAFA;
  --primary-light: #D5F1F0;
  --primary-main: #295F65;
  --primary-dark: #1B484D;
  --primary-extra-dark: #00343A;
  --primary-contrast: #FFFFFF;

  /* ===== Secondary — Electric pink ===== */
  --secondary-extra-light: #FFE2FA;
  --secondary-light: #FFBFF4;
  --secondary-main: #FF92EB;
  --secondary-dark: #7A226A;
  --secondary-extra-dark: #38062F;

  /* ===== Neutral greys (warm) ===== */
  --grey-50:  #FEFDFC;
  --grey-100: #F1F0EF;
  --grey-150: #E8E7E6;
  --grey-200: #E1E0DF;
  --grey-300: #C3C1BF;
  --grey-400: #ADAAA7;
  --grey-500: #95928F;
  --grey-600: #7C7976;
  --grey-700: #605D5A;
  --grey-800: #413F3D;
  --grey-900: #2A2826;

  /* ===== Semantic ===== */
  --success-extra-light: #DCF4DC;
  --success-light: #5DC05D;
  --success-main:  #009900;
  --success-dark:  #055205;
  --success-extra-dark: #003300;

  --error-extra-light: #FFEAE5;
  --error-light: #FF9985;
  --error-main:  #E02500;
  --error-dark:  #AD1D00;
  --error-extra-dark: #6B1200;

  --warning-extra-light: #FFECD6;
  --warning-light: #F9B567;
  --warning-main:  #F08000;
  --warning-dark:  #B35F00;
  --warning-extra-dark: #7A4100;

  --info-extra-light: #E1E0DF;
  --info-light: #ADAAA7;
  --info-main:  #7C7976;
  --info-dark:  #605D5A;
  --info-extra-dark: #413F3D;

  /* ===== Brand ===== */
  --brand-white: #F7F7F5;
  --brand-dark-teal: #00343A;
  --brand-charcoal: #231F20;
  --brand-pink: #FF92EB;

  /* ===== Roles (light mode) ===== */
  --bg-default: #FFFFFF;
  --bg-surface: var(--grey-50);
  --bg-hover: var(--grey-150);
  --bg-selected: var(--primary-extra-light);

  --text-primary:   var(--grey-900);
  --text-secondary: var(--grey-700);
  --text-muted:     var(--grey-600);
  --text-disabled:  var(--grey-400);
  --text-on-primary: #FFFFFF;

  --border-subtle:   var(--grey-100);
  --border-primary:  var(--grey-200);
  --border-emphasis: var(--grey-300);

  /* ===== 12-hue icon palette (avatars, tags) ===== */
  --icon-violet:     #7353FF;
  --icon-magenta:    #A1006B;
  --icon-pink:       #D157A1;
  --icon-vermillion: #FD6300;
  --icon-gold:       #FFC62E;
  --icon-fuschia:    #7A226A;
  --icon-chartreuse: #8EAC4E;
  --icon-mint:       #7DBE93;
  --icon-teal:       #00343A;
  --icon-aqua:       #0070FF;
  --icon-eggplant:   #381049;
  --icon-midnight:   #0D2056;

  /* ===== Type ===== */
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Anybody', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'Geist Mono', 'SF Mono', 'Fira Code', monospace;

  /* ===== Spacing (n × 0.3rem) ===== */
  --space-xs:  0.3rem;   /*  4.8px */
  --space-s:   0.6rem;   /*  9.6px */
  --space-m:   0.9rem;   /* 14.4px */
  --space-l:   1.2rem;   /* 19.2px */
  --space-xl:  2.1rem;   /* 33.6px */
  --space-xxl: 3.9rem;   /* 62.4px */

  /* ===== Radii ===== */
  --radius-small:    4px;
  --radius-regular:  6px;   /* default */
  --radius-medium:   8px;
  --radius-large:   10px;
  --radius-extra:   20px;

  /* ===== Elevation ===== */
  --shadow-flat: none;
  --shadow-default: 0px 3px 6px -2px #1018281A;
  --shadow-strong: 0px 2px 8px -2px #10182844, 0px 4px 12px -2px #10182844;
  --shadow-paper-2: 0px 1px 10px rgba(0, 0, 0, 0.06);

  /* ===== Motion ===== */
  --dur-shortest: 150ms; /* @kind other */
  --dur-shorter:  200ms; /* @kind other */
  --dur-short:    250ms; /* @kind other */
  --dur-standard: 300ms; /* @kind other */
  --dur-complex:  375ms; /* @kind other */

  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:    cubic-bezier(0.0, 0, 0.2, 1); /* @kind other */
  --ease-in:     cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --ease-sharp:  cubic-bezier(0.4, 0, 0.6, 1); /* @kind other */

  /* ===== Layout constants ===== */
  --sidebar-width: 210px;
  --sidebar-collapsed: 50px;
  --browse-sidebar-width: 304px;
  --container-xl: 2160px;
  --container-lg: 1300px;
}

/* Dark mode overrides — add .dark to root or wrap in media query */
.dark, [data-theme="dark"] {
  --grey-50:  #131414;
  --grey-100: #2B2E2D;
  --grey-150: #2D302F;
  --grey-200: #353837;
  --grey-300: #414443;
  --grey-400: #5F6261;
  --grey-500: #7B7E7E;
  --grey-600: #ABAEAE;
  --grey-700: #C2C5C5;
  --grey-800: #E1E2E3;
  --grey-900: #F0F1F2;

  --primary-extra-light: #1A3032;
  --primary-light: #1F4851;
  --primary-main:  #41B7C2;
  --primary-dark:  #7EDDE1;
  --primary-extra-dark: #C5FCFA;

  --bg-default: var(--grey-50);
  --bg-surface: var(--grey-100);
  --bg-hover: rgba(255,255,255,0.06);
  --bg-selected: rgba(255,255,255,0.10);

  --text-primary:   #FFFFFF;
  --text-secondary: var(--grey-600);
  --text-muted:     var(--grey-500);
  --text-on-primary: #00343A;

  --border-subtle:  var(--grey-100);
  --border-primary: var(--grey-200);
  --border-emphasis:var(--grey-300);
}

/* ===== Base ===== */
html, body {
  background: var(--bg-default);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;        /* 14px base */
  font-weight: 450;       /* body weight */
  line-height: 1.55;
  letter-spacing: 0.001em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===== Type scale ===== */
h1, .h1 {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 600; line-height: 1.22;
  letter-spacing: -0.02em; color: var(--text-primary); margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 600; line-height: 1.28;
  letter-spacing: -0.015em; color: var(--text-primary); margin: 0;
}
h3, .h3 {
  font-family: var(--font-body);
  font-size: 20px; font-weight: 600; line-height: 1.34;
  letter-spacing: -0.008em; color: var(--text-primary); margin: 0;
}
h4, .h4 {
  font-family: var(--font-body);
  font-size: 18px; font-weight: 600; line-height: 1.38;
  letter-spacing: -0.006em; color: var(--text-primary); margin: 0;
}
h5, .h5 {
  font-family: var(--font-body);
  font-size: 16px; font-weight: 600; line-height: 1.42;
  letter-spacing: -0.003em; color: var(--text-primary); margin: 0;
}
h6, .h6 {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 600; line-height: 1.46;
  letter-spacing: 0; color: var(--text-primary); margin: 0;
}

.body1, .body2, p {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 450; line-height: 1.55;
  letter-spacing: 0.001em; color: var(--text-primary); margin: 0;
}
.subtitle1 {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 500; line-height: 1.45;
  letter-spacing: 0.001em; color: var(--text-primary);
}
.subtitle2 {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 500; line-height: 1.44;
  letter-spacing: 0.001em; color: var(--text-primary);
}
.caption {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 400; line-height: 1.42;
  letter-spacing: 0.008em; color: var(--text-secondary);
}
.button-text {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600; line-height: 1.35;
  letter-spacing: 0.004em; text-transform: none;
}
.overline {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 500; line-height: 1.48;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary);
}
.eyebrow {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 500; line-height: 1.45;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary);
}
code, .monospace, pre {
  font-family: var(--font-mono);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

/* ===== Elements ===== */
a { color: var(--primary-main); text-decoration: none; font-weight: 450; }
a:hover { color: var(--primary-dark); }

hr { border: 0; border-top: 1px solid var(--border-primary); margin: var(--space-l) 0; }



/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/lato-433bd0e6.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/lato-22a8579c.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;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/lato-e505e403.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/lato-3f00bcc4.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;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/lato-cb437393.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/animations/ask-c1-loop/fonts/lato-cfff8961.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;
}



  html,body{margin:0;height:100%;background:transparent;}
  #sr{ -webkit-font-smoothing:antialiased; }
  .slk{font-family:'Lato','Inter',system-ui,sans-serif;}
  @keyframes cblink{0%,46%{opacity:1}47%,96%{opacity:0}100%{opacity:1}}
  #sr .tb svg{width:14px;height:14px;stroke-width:2}
  #sr .lc svg{width:15px;height:15px;stroke-width:2}
  #sr .sd svg{width:16px;height:16px;stroke-width:2.2}
  @media (prefers-reduced-motion:reduce){#sr *,#sr *::before,#sr *::after{animation-play-state:paused!important;transition:none!important}}