/* projects/design-system/src/styles/index.css */
/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
@layer eduari.tokens, eduari.base, eduari.components, app;
@font-face {
  font-family: "Geist";
  src: url("./media/geist-100.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("./media/geist-200.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("./media/geist-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("./media/geist-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("./media/geist-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("./media/geist-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("./media/geist-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("./media/onest-200.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("./media/onest-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("./media/onest-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("./media/onest-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("./media/onest-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./media/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./media/jetbrains-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@layer eduari.base {
  button,
  [type=button],
  [type=submit],
  [type=reset] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    font: inherit;
  }
}
@layer eduari.tokens {
  :root {
    --space-none: 0;
    --space-3xs: 2px;
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 20px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;
    --space-4xl: 64px;
    --space-5xl: 96px;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-3xl: 28px;
    --radius-pill: 999px;
    --font-sans:
      "Geist",
      -apple-system,
      BlinkMacSystemFont,
      "Inter",
      "Segoe UI",
      system-ui,
      sans-serif;
    --font-display:
      "Onest",
      "Geist",
      -apple-system,
      system-ui,
      sans-serif;
    --font-mono:
      "JetBrains Mono",
      "SF Mono",
      ui-monospace,
      monospace;
    --text-3xs: 10px;
    --text-2xs: 11px;
    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 15px;
    --text-lg: 17px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 30px;
    --text-4xl: 40px;
    --text-5xl: 56px;
    --text-6xl: 72px;
    --weight-thin: 100;
    --weight-extralight: 200;
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 500;
    --weight-bold: 600;
    --lh-tight: 1.1;
    --lh-snug: 1.25;
    --lh-normal: 1.45;
    --lh-relaxed: 1.6;
    --track-display: -0.025em;
    --track-tight: -0.012em;
    --track-normal: 0;
    --track-wide: 0.04em;
    --track-caps: 0.08em;
    --shadow-xs: 0 1px 0 rgba(15, 17, 21, 0.04), 0 1px 2px rgba(15, 17, 21, 0.04);
    --shadow-sm: 0 1px 2px rgba(15, 17, 21, 0.04), 0 2px 6px rgba(15, 17, 21, 0.06);
    --shadow-md: 0 2px 4px rgba(15, 17, 21, 0.04), 0 8px 24px rgba(15, 17, 21, 0.08);
    --shadow-lg: 0 4px 8px rgba(15, 17, 21, 0.06), 0 16px 48px rgba(15, 17, 21, 0.10);
    --shadow-xl: 0 8px 16px rgba(15, 17, 21, 0.08), 0 32px 80px rgba(15, 17, 21, 0.14);
    --shadow-button-resting: inset 0 0 0 1px var(--ds-btn-bd), var(--shadow-xs);
    --shadow-button-neutral:
      inset 0 0 0 1px var(--ds-btn-bd),
      inset 0 1px 0 var(--color-surface-highlight),
      var(--shadow-xs);
    --shadow-button-neutral-hover: inset 0 0 0 1px var(--color-border-strong), var(--shadow-sm);
    --shadow-button-primary: 0 1px 2px rgba(0, 0, 0, 0.10), 0 3px 8px -2px rgba(0, 0, 0, 0.12);
    --shadow-button-primary-hover: 0 2px 4px rgba(0, 0, 0, 0.12), 0 8px 20px -6px rgba(0, 0, 0, 0.20);
    --shadow-button-tertiary: 0 1px 2px rgba(0, 0, 0, 0.10), 0 3px 8px -2px rgba(0, 0, 0, 0.12);
    --shadow-button-secondary: 0 1px 2px rgba(0, 0, 0, 0.10), 0 3px 8px -2px rgba(0, 0, 0, 0.12);
    --shadow-button-secondary-soft:
      inset 0 0 0 1px rgba(94, 44, 50, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.6),
      0 1px 2px rgba(70, 31, 36, 0.06);
    --shadow-button-secondary-soft-hover:
      inset 0 0 0 1px rgba(94, 44, 50, 0.30),
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      0 6px 20px -8px rgba(94, 44, 50, 0.30);
    --shadow-button-danger: 0 1px 2px rgba(0, 0, 0, 0.10), 0 3px 8px -2px rgba(0, 0, 0, 0.12);
    --shadow-button-danger-outline: inset 0 0 0 1px var(--color-danger-default), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --shadow-button-danger-outline-hover: inset 0 0 0 1px var(--color-danger-strong), 0 2px 6px -2px rgba(149, 68, 47, 0.18);
    --blur-sm: 4px;
    --blur-md: 8px;
    --blur-lg: 16px;
    --blur-xl: 24px;
    --soft-alpha: 0.18;
    --glass-fx-alpha: 0.06;
    --glass-fx-blur: 14px;
    --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-instant: 80ms;
    --dur-fast: 120ms;
    --dur-base: 220ms;
    --dur-slow: 360ms;
    --dur-slower: 520ms;
  }
}
@layer eduari.tokens {
  .dark {
    --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.30), 0 8px 24px rgba(0, 0, 0, 0.50);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.40), 0 16px 48px rgba(0, 0, 0, 0.60);
    --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.50), 0 32px 80px rgba(0, 0, 0, 0.70);
    --shadow-button-resting: inset 0 0 0 1px var(--ds-btn-bd), var(--shadow-xs);
    --shadow-button-neutral:
      inset 0 0 0 1px var(--ds-btn-bd),
      inset 0 1px 0 var(--color-surface-highlight),
      var(--shadow-xs);
    --shadow-button-neutral-hover: inset 0 0 0 1px var(--color-border-strong), var(--shadow-sm);
    --shadow-button-primary:
      inset 0 0 0 1px rgba(255, 255, 255, 0.06),
      0 1px 2px rgba(0, 0, 0, 0.45),
      0 3px 10px -2px rgba(0, 0, 0, 0.55);
    --shadow-button-primary-hover:
      inset 0 0 0 1px rgba(255, 255, 255, 0.09),
      0 2px 6px rgba(0, 0, 0, 0.50),
      0 10px 24px -8px rgba(0, 0, 0, 0.62);
    --shadow-button-tertiary:
      inset 0 0 0 1px rgba(255, 255, 255, 0.06),
      0 1px 2px rgba(0, 0, 0, 0.45),
      0 3px 10px -2px rgba(0, 0, 0, 0.55);
    --shadow-button-secondary:
      inset 0 0 0 1px rgba(255, 255, 255, 0.06),
      0 1px 2px rgba(0, 0, 0, 0.45),
      0 3px 10px -2px rgba(0, 0, 0, 0.55);
    --shadow-button-secondary-soft:
      inset 0 0 0 1px rgba(94, 44, 50, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-button-secondary-soft-hover:
      inset 0 0 0 1px rgba(94, 44, 50, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 6px 20px -8px rgba(0, 0, 0, 0.45);
    --shadow-button-danger:
      inset 0 0 0 1px rgba(255, 255, 255, 0.06),
      0 1px 2px rgba(0, 0, 0, 0.45),
      0 3px 10px -2px rgba(0, 0, 0, 0.55);
    --shadow-button-danger-outline: inset 0 0 0 1px var(--color-danger-default), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --shadow-button-danger-outline-hover: inset 0 0 0 1px var(--color-danger-strong), 0 2px 6px -2px rgba(0, 0, 0, 0.40);
  }
}
@layer eduari.tokens {
  [data-profile=base],
  :root {
    --neutral-0: #fefbf2;
    --neutral-25: #fcf6e6;
    --neutral-50: #f8ecd6;
    --neutral-75: #f4e6c9;
    --neutral-100: #efe0bb;
    --neutral-150: #dfd4bc;
    --neutral-200: #cfc2a4;
    --neutral-300: #ac9f8c;
    --neutral-400: #897c68;
    --neutral-500: #675c4a;
    --neutral-600: #4a4540;
    --neutral-700: #36322e;
    --neutral-800: #252220;
    --neutral-850: #1e1b17;
    --neutral-900: #16140f;
    --neutral-950: #110f0c;
    --neutral-1000: #0c0b09;
    --primary-0: #f2eee3;
    --primary-25: #f0e9d5;
    --primary-50: #e9e0c8;
    --primary-75: #eddbba;
    --primary-100: #f2d6ad;
    --primary-150: #eac895;
    --primary-200: #e3b97d;
    --primary-300: #d29a53;
    --primary-400: #b6783a;
    --primary-500: #7a4d20;
    --primary-600: #623c18;
    --primary-700: #4d2e12;
    --primary-800: #37200c;
    --primary-850: #301d0a;
    --primary-900: #2a1a08;
    --primary-950: #1f1103;
    --primary-1000: #140800;
    --secondary-0: #f7efef;
    --secondary-25: #f6e8e8;
    --secondary-50: #efdede;
    --secondary-75: #ead1d2;
    --secondary-100: #e4c4c8;
    --secondary-150: #dbb2b8;
    --secondary-200: #d2a0a8;
    --secondary-300: #bd7e89;
    --secondary-400: #a66470;
    --secondary-500: #90505a;
    --secondary-600: #75414a;
    --secondary-700: #5e2c32;
    --secondary-800: #461f24;
    --secondary-850: #3c1a1e;
    --secondary-900: #331619;
    --secondary-950: #260c0f;
    --secondary-1000: #1a0406;
    --tertiary-0: #f4f7f8;
    --tertiary-25: #edf2f5;
    --tertiary-50: #e3e9ed;
    --tertiary-75: #d5dee4;
    --tertiary-100: #c6d4db;
    --tertiary-150: #b1c5ce;
    --tertiary-200: #9db6c1;
    --tertiary-300: #7295a4;
    --tertiary-400: #4f7787;
    --tertiary-500: #3a5e6d;
    --tertiary-600: #2f4b57;
    --tertiary-700: #243a43;
    --tertiary-800: #1a2a31;
    --tertiary-850: #162329;
    --tertiary-900: #121d22;
    --tertiary-950: #0b1519;
    --tertiary-1000: #050d10;
    --success-0: #fffbeb;
    --success-25: #f8efd6;
    --success-50: #efe3c0;
    --success-75: #e1e1bf;
    --success-100: #d3dfc1;
    --success-150: #c6d4b3;
    --success-200: #b9c8a5;
    --success-300: #9fb28a;
    --success-400: #859d70;
    --success-500: #6b8857;
    --success-600: #5c794a;
    --success-700: #4d6a3e;
    --success-800: #304a22;
    --success-850: #223a15;
    --success-900: #152b07;
    --success-950: #091d00;
    --success-1000: #011000;
    --warning-0: #fffaf4;
    --warning-25: #fdf7ed;
    --warning-50: #fcf3e5;
    --warning-75: #faead1;
    --warning-100: #f8e0bd;
    --warning-150: #f4d7af;
    --warning-200: #f0cea1;
    --warning-300: #e8bb84;
    --warning-400: #e0a868;
    --warning-500: #d9954a;
    --warning-600: #bd7f36;
    --warning-700: #a26a22;
    --warning-800: #754c18;
    --warning-850: #5f3d13;
    --warning-900: #4a2f0e;
    --warning-950: #301900;
    --warning-1000: #180600;
    --danger-0: #fffaf7;
    --danger-25: #fdf3ef;
    --danger-50: #fbede7;
    --danger-75: #f8dfd5;
    --danger-100: #f5d2c2;
    --danger-150: #f0c5b3;
    --danger-200: #eab8a4;
    --danger-300: #df9e88;
    --danger-400: #d4846d;
    --danger-500: #c76954;
    --danger-600: #ae5641;
    --danger-700: #95442f;
    --danger-800: #6e2613;
    --danger-850: #5c1705;
    --danger-900: #490700;
    --danger-950: #380000;
    --danger-1000: #260000;
    --color-surface-overlay: rgb(from var(--color-surface-3) r g b / var(--glass-fx-alpha));
    --color-phase-entry: #d9b156;
    --color-phase-input: #6a8fb3;
    --color-phase-practice: #6fa678;
    --color-phase-secure: #927fae;
    --color-phase-reflection: #95a0ab;
    --color-phase-transfer: #d17a52;
    --color-unit-assignment: #c99346;
    --color-unit-practice: #5a9f87;
    --color-unit-presentation: #7b7dc0;
    --color-social-plenum: #c76a86;
    --color-social-individual: #4d9d94;
    --color-social-pair: #c97a4e;
    --color-social-group: #5095b5;
    --color-subject-default: #5f9e84;
    --color-track-content: #6a8fb3;
    --color-track-process: #9a86c0;
    --color-school-type-elementary: #e8a861;
    --color-school-type-lower-secondary: #8a9856;
    --color-school-type-intermediate-secondary: #6f95c0;
    --color-school-type-academic-secondary: #8f76b5;
    --color-school-type-comprehensive-secondary: #5f8e96;
    --color-school-type-community-secondary: #ca7a98;
    --color-school-type-upper-secondary: #7b68a8;
    --color-school-type-vocational: #b8784a;
    --color-school-type-vocational-college: #a66339;
    --color-school-type-technical-upper-secondary: #5483a8;
    --color-school-type-specialized-gymnasium: #9a6fae;
    --color-school-type-evening-academic-secondary: #5c6e96;
    --color-school-type-special-needs: #d9994e;
    --color-school-type-waldorf: #b68b6c;
    --color-school-type-montessori: #7aa177;
    --color-school-type-international: #48a09a;
    --color-school-type-custom: #8b8678;
    --color-agent-domain-lesson-architect: #16a085;
    --color-agent-domain-school-structure: #3b82c4;
    --color-agent-domain-assistant: rgba(0, 0, 0, 0);
    --color-contrast-on-bright: #1a1a1a;
    --color-tone-neutral-surface: var(--neutral-100);
    --color-tone-neutral-soft: var(--neutral-50);
    --color-tone-neutral-fg: var(--neutral-1000);
    --color-tone-neutral-border: var(--neutral-300);
    --color-tone-primary-surface: var(--primary-300);
    --color-tone-primary-soft: var(--primary-50);
    --color-tone-primary-fg: var(--primary-850);
    --color-tone-primary-border: var(--primary-500);
    --color-tone-secondary-surface: var(--secondary-300);
    --color-tone-secondary-soft: var(--secondary-50);
    --color-tone-secondary-fg: var(--secondary-850);
    --color-tone-secondary-border: var(--secondary-500);
    --color-tone-tertiary-surface: var(--tertiary-300);
    --color-tone-tertiary-soft: var(--tertiary-50);
    --color-tone-tertiary-fg: var(--tertiary-850);
    --color-tone-tertiary-border: var(--tertiary-500);
    --color-tone-success-surface: var(--success-500);
    --color-tone-success-soft: var(--success-50);
    --color-tone-success-fg: var(--success-1000);
    --color-tone-success-border: var(--success-700);
    --color-tone-warning-surface: var(--warning-500);
    --color-tone-warning-soft: var(--warning-50);
    --color-tone-warning-fg: var(--warning-1000);
    --color-tone-warning-border: var(--warning-700);
    --color-tone-danger-surface: var(--danger-500);
    --color-tone-danger-soft: var(--danger-50);
    --color-tone-danger-fg: var(--danger-1000);
    --color-tone-danger-border: var(--danger-700);
    --color-surface-0: var(--neutral-25);
    --color-surface-1: var(--neutral-50);
    --color-surface-2: var(--neutral-75);
    --color-surface-3: var(--neutral-150);
    --color-surface-inset: var(--neutral-100);
    --color-surface-inverse: var(--primary-1000);
    --color-surface-header: var(--neutral-100);
    --color-text-primary: var(--primary-1000);
    --color-text-body: var(--neutral-700);
    --color-text-secondary: var(--neutral-500);
    --color-text-tertiary: var(--neutral-400);
    --color-text-on-accent: var(--neutral-25);
    --color-border-subtle: var(--neutral-150);
    --color-border-default: var(--neutral-200);
    --color-border-strong: var(--neutral-300);
    --color-focus-ring: var(--primary-500);
    --color-interactive-primary: var(--primary-500);
    --color-interactive-primary-hover: var(--primary-600);
    --color-interactive-primary-active: var(--primary-700);
    --color-interactive-primary-bright: var(--primary-400);
    --color-secondary-default: var(--secondary-500);
    --color-secondary-hover: var(--secondary-700);
    --color-tertiary-default: var(--tertiary-500);
    --color-tertiary-strong: var(--tertiary-700);
    --color-success-default: var(--success-500);
    --color-success-strong: var(--success-700);
    --color-warning-default: var(--warning-500);
    --color-warning-strong: var(--warning-700);
    --color-danger-default: var(--danger-500);
    --color-danger-strong: var(--danger-700);
    --color-afb-1: var(--success-500);
    --color-afb-2: var(--warning-500);
    --color-afb-3: var(--danger-500);
    --color-text-link: var(--color-interactive-primary);
    --color-border-focus: var(--color-focus-ring);
  }
}
@layer eduari.tokens {
  [data-profile=base].dark,
  .dark {
    --color-tone-neutral-surface: var(--neutral-800);
    --color-tone-neutral-soft: var(--neutral-900);
    --color-tone-neutral-fg: var(--neutral-50);
    --color-tone-neutral-border: var(--neutral-700);
    --color-tone-primary-surface: var(--primary-200);
    --color-tone-primary-soft: var(--primary-900);
    --color-tone-primary-fg: var(--primary-850);
    --color-tone-primary-border: var(--primary-400);
    --color-tone-secondary-surface: var(--secondary-200);
    --color-tone-secondary-soft: var(--secondary-900);
    --color-tone-secondary-fg: var(--secondary-850);
    --color-tone-secondary-border: var(--secondary-400);
    --color-tone-tertiary-surface: var(--tertiary-200);
    --color-tone-tertiary-soft: var(--tertiary-900);
    --color-tone-tertiary-fg: var(--tertiary-850);
    --color-tone-tertiary-border: var(--tertiary-400);
    --color-tone-success-surface: var(--success-500);
    --color-tone-success-soft: var(--success-700);
    --color-tone-success-fg: var(--success-1000);
    --color-tone-success-border: var(--success-700);
    --color-tone-warning-surface: var(--warning-500);
    --color-tone-warning-soft: var(--warning-900);
    --color-tone-warning-fg: var(--warning-1000);
    --color-tone-warning-border: var(--warning-700);
    --color-tone-danger-surface: var(--danger-500);
    --color-tone-danger-soft: var(--danger-700);
    --color-tone-danger-fg: var(--danger-1000);
    --color-tone-danger-border: var(--danger-700);
    --color-surface-0: var(--neutral-900);
    --color-surface-1: var(--neutral-800);
    --color-surface-2: var(--neutral-700);
    --color-surface-3: var(--neutral-600);
    --color-surface-inset: var(--neutral-1000);
    --color-surface-inverse: var(--neutral-25);
    --color-surface-header: var(--neutral-700);
    --color-text-primary: var(--neutral-25);
    --color-text-body: var(--neutral-200);
    --color-text-secondary: var(--neutral-300);
    --color-text-tertiary: var(--neutral-400);
    --color-text-on-accent: var(--neutral-25);
    --color-border-subtle: var(--neutral-700);
    --color-border-default: var(--neutral-600);
    --color-border-strong: var(--neutral-500);
    --color-focus-ring: var(--primary-400);
    --color-interactive-primary: var(--primary-400);
    --color-interactive-primary-hover: var(--primary-300);
    --color-interactive-primary-active: var(--primary-200);
    --color-interactive-primary-bright: var(--primary-300);
    --color-secondary-default: var(--secondary-300);
    --color-secondary-hover: var(--secondary-200);
    --color-tertiary-default: var(--tertiary-500);
    --color-tertiary-strong: var(--tertiary-100);
    --color-success-default: var(--success-500);
    --color-success-strong: var(--success-100);
    --color-warning-default: var(--warning-500);
    --color-warning-strong: var(--warning-100);
    --color-danger-default: var(--danger-500);
    --color-danger-strong: var(--danger-100);
    --color-text-link: var(--color-interactive-primary);
    --color-border-focus: var(--color-focus-ring);
  }
}
@layer eduari.components {
  :root {
    --color-interactive-primary-tint: rgb( from var(--color-interactive-primary) r g b / var(--soft-alpha) );
    --color-secondary-tint: rgb( from var(--color-secondary-default) r g b / var(--soft-alpha) );
    --color-success-tint: rgb( from var(--color-success-default) r g b / var(--soft-alpha) );
    --color-warning-tint: rgb( from var(--color-warning-default) r g b / var(--soft-alpha) );
    --color-danger-tint: rgb( from var(--color-danger-default) r g b / var(--soft-alpha) );
  }
  :root {
    --ds-accent: var(--color-interactive-primary);
    --ds-glass-tint: 255 255 255;
  }
  html.dark {
    --ds-glass-tint: 0 0 0;
  }
  .ds-v--solid {
    --ds-recipe-bg: var(--ds-tone-active-surface);
    --ds-recipe-fg: var(--ds-tone-active-fg);
    --ds-recipe-border: transparent;
  }
  .ds-v--soft {
    --ds-recipe-bg: var(--ds-tone-active-soft);
    --ds-recipe-fg: var(--color-text-primary);
    --ds-recipe-border: transparent;
  }
  .ds-v--outline {
    --ds-recipe-bg: transparent;
    --ds-recipe-fg: var(--ds-tone-active-border);
    --ds-recipe-border: var(--ds-tone-active-border);
  }
  .ds-v--ghost {
    --ds-recipe-bg: transparent;
    --ds-recipe-fg: var(--ds-tone-active-fg);
    --ds-recipe-border: transparent;
  }
  :root {
    --overlay-tint: 15 17 21;
    --highlight-tint: 255 255 255;
    --secondary-edge-alpha: 0.18;
    --glass-stroke-alpha: 0.1;
    --glass-highlight-alpha: 0.4;
    --state-hover-alpha: 0.05;
    --state-active-alpha: 0.08;
    --hairline-alpha: 0.08;
    --shelf-alpha: 0.02;
    --surface-highlight-alpha: 0.6;
    --scrim-alpha: 0.32;
    --color-glass-thin: rgb( var(--ds-glass-tint) / calc(var(--glass-fx-alpha) * 0.33) );
    --color-glass-regular: rgb( var(--ds-glass-tint) / calc(var(--glass-fx-alpha) * 0.83) );
    --color-glass-thick: rgb( var(--ds-glass-tint) / calc(var(--glass-fx-alpha) * 2.5) );
    --color-glass-stroke: rgb(var(--overlay-tint) / var(--glass-stroke-alpha));
    --color-glass-highlight: rgb(255 255 255 / var(--glass-highlight-alpha));
    --color-scrim: rgb(0 0 0 / var(--scrim-alpha));
    --color-state-hover: rgb(var(--overlay-tint) / var(--state-hover-alpha));
    --color-state-active: rgb(var(--overlay-tint) / var(--state-active-alpha));
    --color-border-hairline: rgb(var(--overlay-tint) / var(--hairline-alpha));
    --color-surface-highlight: rgb( var(--highlight-tint) / var(--surface-highlight-alpha) );
    --color-surface-shelf: rgb(var(--overlay-tint) / var(--shelf-alpha));
    --color-secondary-edge: rgb( from var(--color-secondary-default) r g b / var(--secondary-edge-alpha) );
  }
  html.dark {
    --overlay-tint: 255 255 255;
    --highlight-tint: 229 196 120;
    --secondary-edge-alpha: 0.3;
    --glass-stroke-alpha: 0.14;
    --glass-highlight-alpha: 0.16;
    --state-hover-alpha: 0.06;
    --state-active-alpha: 0.1;
    --hairline-alpha: 0.1;
    --shelf-alpha: 0.03;
    --surface-highlight-alpha: 0.05;
    --scrim-alpha: 0.48;
  }
  :root {
    --grad-lighten: 14%;
    --grad-darken: 12%;
    --gradient-tone:
      linear-gradient(
        
        180deg,
        var(--grad-c, var(--color-tone-neutral-surface)),
        var(--grad-c, var(--color-tone-neutral-surface)),
        var(--grad-c, var(--color-tone-neutral-surface)) );
    --color-tone-neutral-gradient:
      linear-gradient(
        
        180deg,
        var(--color-tone-neutral-surface),
        var(--color-tone-neutral-surface),
        var(--color-tone-neutral-surface) );
    --color-tone-primary-gradient:
      linear-gradient(
        
        180deg,
        var(--color-tone-primary-surface),
        var(--color-tone-primary-surface),
        var(--color-tone-primary-surface) );
    --color-tone-secondary-gradient:
      linear-gradient(
        
        180deg,
        var(--color-tone-secondary-surface),
        var(--color-tone-secondary-surface),
        var(--color-tone-secondary-surface) );
    --color-tone-tertiary-gradient:
      linear-gradient(
        
        180deg,
        var(--color-tone-tertiary-surface),
        var(--color-tone-tertiary-surface),
        var(--color-tone-tertiary-surface) );
    --color-tone-success-gradient:
      linear-gradient(
        
        180deg,
        var(--color-tone-success-surface),
        var(--color-tone-success-surface),
        var(--color-tone-success-surface) );
    --color-tone-warning-gradient:
      linear-gradient(
        
        180deg,
        var(--color-tone-warning-surface),
        var(--color-tone-warning-surface),
        var(--color-tone-warning-surface) );
    --color-tone-danger-gradient:
      linear-gradient(
        
        180deg,
        var(--color-tone-danger-surface),
        var(--color-tone-danger-surface),
        var(--color-tone-danger-surface) );
  }
  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --gradient-tone:
        linear-gradient(
          
          180deg,
          color-mix( in srgb, var(--grad-c, var(--color-tone-neutral-surface)) calc(100% - var(--grad-lighten)), #fff ),
          var(--grad-c, var(--color-tone-neutral-surface)),
          color-mix( in srgb, var(--grad-c, var(--color-tone-neutral-surface)) calc(100% - var(--grad-darken)), #000 ) );
    }
  }
  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-tone-neutral-gradient:
        linear-gradient(
          
          180deg,
          color-mix( in srgb, var(--color-tone-neutral-surface) calc(100% - var(--grad-lighten)), #fff ),
          var(--color-tone-neutral-surface),
          color-mix( in srgb, var(--color-tone-neutral-surface) calc(100% - var(--grad-darken)), #000 ) );
    }
  }
  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-tone-primary-gradient:
        linear-gradient(
          
          180deg,
          color-mix( in srgb, var(--color-tone-primary-surface) calc(100% - var(--grad-lighten)), #fff ),
          var(--color-tone-primary-surface),
          color-mix( in srgb, var(--color-tone-primary-surface) calc(100% - var(--grad-darken)), #000 ) );
    }
  }
  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-tone-secondary-gradient:
        linear-gradient(
          
          180deg,
          color-mix( in srgb, var(--color-tone-secondary-surface) calc(100% - var(--grad-lighten)), #fff ),
          var(--color-tone-secondary-surface),
          color-mix( in srgb, var(--color-tone-secondary-surface) calc(100% - var(--grad-darken)), #000 ) );
    }
  }
  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-tone-tertiary-gradient:
        linear-gradient(
          
          180deg,
          color-mix( in srgb, var(--color-tone-tertiary-surface) calc(100% - var(--grad-lighten)), #fff ),
          var(--color-tone-tertiary-surface),
          color-mix( in srgb, var(--color-tone-tertiary-surface) calc(100% - var(--grad-darken)), #000 ) );
    }
  }
  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-tone-success-gradient:
        linear-gradient(
          
          180deg,
          color-mix( in srgb, var(--color-tone-success-surface) calc(100% - var(--grad-lighten)), #fff ),
          var(--color-tone-success-surface),
          color-mix( in srgb, var(--color-tone-success-surface) calc(100% - var(--grad-darken)), #000 ) );
    }
  }
  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-tone-warning-gradient:
        linear-gradient(
          
          180deg,
          color-mix( in srgb, var(--color-tone-warning-surface) calc(100% - var(--grad-lighten)), #fff ),
          var(--color-tone-warning-surface),
          color-mix( in srgb, var(--color-tone-warning-surface) calc(100% - var(--grad-darken)), #000 ) );
    }
  }
  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-tone-danger-gradient:
        linear-gradient(
          
          180deg,
          color-mix( in srgb, var(--color-tone-danger-surface) calc(100% - var(--grad-lighten)), #fff ),
          var(--color-tone-danger-surface),
          color-mix( in srgb, var(--color-tone-danger-surface) calc(100% - var(--grad-darken)), #000 ) );
    }
  }
  :root {
    --color-tone-neutral-hover: var(--color-tone-neutral-surface);
    --color-tone-neutral-active: var(--color-tone-neutral-surface);
    --color-tone-primary-hover: var(--color-tone-primary-surface);
    --color-tone-primary-active: var(--color-tone-primary-surface);
    --color-tone-secondary-hover: var(--color-tone-secondary-surface);
    --color-tone-secondary-active: var(--color-tone-secondary-surface);
    --color-tone-tertiary-hover: var(--color-tone-tertiary-surface);
    --color-tone-tertiary-active: var(--color-tone-tertiary-surface);
    --color-tone-success-hover: var(--color-tone-success-surface);
    --color-tone-success-active: var(--color-tone-success-surface);
    --color-tone-warning-hover: var(--color-tone-warning-surface);
    --color-tone-warning-active: var(--color-tone-warning-surface);
    --color-tone-danger-hover: var(--color-tone-danger-surface);
    --color-tone-danger-active: var(--color-tone-danger-surface);
  }
  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-tone-neutral-hover: color-mix( in srgb, var(--color-tone-neutral-surface) 92%, #000 );
    }
  }
  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-tone-neutral-active: color-mix( in srgb, var(--color-tone-neutral-surface) 86%, #000 );
    }
  }
  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-tone-primary-hover: color-mix( in srgb, var(--color-tone-primary-surface) 92%, #000 );
    }
  }
  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-tone-primary-active: color-mix( in srgb, var(--color-tone-primary-surface) 86%, #000 );
    }
  }
  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-tone-secondary-hover: color-mix( in srgb, var(--color-tone-secondary-surface) 92%, #000 );
    }
  }
  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-tone-secondary-active: color-mix( in srgb, var(--color-tone-secondary-surface) 86%, #000 );
    }
  }
  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-tone-tertiary-hover: color-mix( in srgb, var(--color-tone-tertiary-surface) 92%, #000 );
    }
  }
  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-tone-tertiary-active: color-mix( in srgb, var(--color-tone-tertiary-surface) 86%, #000 );
    }
  }
  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-tone-success-hover: color-mix( in srgb, var(--color-tone-success-surface) 92%, #000 );
    }
  }
  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-tone-success-active: color-mix( in srgb, var(--color-tone-success-surface) 86%, #000 );
    }
  }
  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-tone-warning-hover: color-mix( in srgb, var(--color-tone-warning-surface) 92%, #000 );
    }
  }
  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-tone-warning-active: color-mix( in srgb, var(--color-tone-warning-surface) 86%, #000 );
    }
  }
  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-tone-danger-hover: color-mix( in srgb, var(--color-tone-danger-surface) 92%, #000 );
    }
  }
  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --color-tone-danger-active: color-mix( in srgb, var(--color-tone-danger-surface) 86%, #000 );
    }
  }
  .ds-input {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: var(--ds-input-font-size, var(--text-sm));
    line-height: 1;
    width: 100%;
    height: var(--ds-input-height, 32px);
    padding: 0 var(--ds-input-padding-x, var(--space-sm));
    background: var(--ds-input-bg, var(--color-surface-1));
    backdrop-filter: var(--ds-input-backdrop-filter, none);
    -webkit-backdrop-filter: var(--ds-input-backdrop-filter, none);
    border: none;
    border-radius: var(--ds-input-radius, var(--radius-md));
    color: var(--ds-input-fg, var(--color-text-primary));
    box-shadow:
      inset 0 0 0 1px var(--ds-input-border, var(--color-border-subtle)),
      inset 0 1px 0 var(--color-surface-highlight),
      var(--shadow-xs);
    transition: box-shadow var(--dur-base) var(--ease-emphasis), background var(--dur-base) var(--ease-emphasis);
    box-sizing: border-box;
  }
  .ds-input::placeholder {
    color: var(--ds-input-placeholder, var(--color-text-tertiary));
  }
  .ds-input:focus,
  .ds-input:focus-visible {
    outline: none;
    background: var(--color-surface-1);
    box-shadow:
      inset 0 0 0 1px var(--ds-input-border-focus, var(--color-border-focus)),
      0 0 0 2px var(--color-surface-0),
      0 0 0 4px var(--ds-input-ring, var(--color-interactive-primary));
  }
  @supports (color: color-mix(in lab, red, red)) {
    .ds-input:focus,
    .ds-input:focus-visible {
      box-shadow:
        inset 0 0 0 1px var(--ds-input-border-focus, var(--color-border-focus)),
        0 0 0 2px var(--color-surface-0),
        0 0 0 4px color-mix(in srgb, var(--ds-input-ring, var(--color-interactive-primary)) 30%, transparent);
    }
  }
  .ds-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  .ds-input[aria-invalid=true] {
    box-shadow:
      inset 0 0 0 1px var(--ds-input-border-error, var(--color-danger-default)),
      inset 0 1px 0 var(--color-surface-highlight),
      var(--shadow-xs);
  }
  .ds-input[aria-invalid=true]:focus,
  .ds-input[aria-invalid=true]:focus-visible {
    box-shadow:
      inset 0 0 0 1px var(--ds-input-border-error, var(--color-danger-default)),
      0 0 0 2px var(--color-surface-0),
      0 0 0 4px var(--ds-input-border-error, var(--color-danger-default));
  }
  @supports (color: color-mix(in lab, red, red)) {
    .ds-input[aria-invalid=true]:focus,
    .ds-input[aria-invalid=true]:focus-visible {
      box-shadow:
        inset 0 0 0 1px var(--ds-input-border-error, var(--color-danger-default)),
        0 0 0 2px var(--color-surface-0),
        0 0 0 4px color-mix(in srgb, var(--ds-input-border-error, var(--color-danger-default)) 30%, transparent);
    }
  }
  textarea.ds-input {
    height: auto;
    min-height: 80px;
    padding: var(--ds-input-textarea-padding-y, var(--space-xs)) var(--ds-input-padding-x, var(--space-sm));
    line-height: 1.5;
    resize: vertical;
  }
  .ds-input--sm {
    width: 2.1rem;
    height: auto;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    font-size: var(--ds-input-sm-font-size, var(--text-xs));
    font-weight: var(--weight-medium);
    text-align: right;
    -moz-appearance: textfield;
    appearance: textfield;
  }
  .ds-input--sm::-webkit-outer-spin-button,
  .ds-input--sm::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .ds-input--sm:focus,
  .ds-input--sm:focus-visible {
    outline: none;
    background: transparent;
    box-shadow: none;
  }
  .ds-input--sm:disabled {
    opacity: 0.65;
    cursor: default;
  }
  .ds-form-field__leading {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    color: var(--color-text-secondary);
    pointer-events: none;
    z-index: 1;
    transition: color var(--dur-fast) var(--ease-emphasis);
  }
  .ds-form-field__control:has(.ds-form-field__leading) .ds-input {
    padding-left: 36px;
  }
  .ds-form-field__control:has(.ds-input:focus) .ds-form-field__leading,
  .ds-form-field__control:has(.ds-input:focus-visible) .ds-form-field__leading {
    color: var(--color-text-primary);
  }
  @keyframes ds-dialog__backdrop-in {
    from {
      opacity: 0;
      backdrop-filter: blur(0);
      -webkit-backdrop-filter: blur(0);
    }
    to {
      opacity: 1;
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
    }
  }
  @keyframes ds-dialog__backdrop-out {
    from {
      opacity: 1;
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
    }
    to {
      opacity: 0;
      backdrop-filter: blur(0);
      -webkit-backdrop-filter: blur(0);
    }
  }
  @keyframes ds-dialog__panel-in {
    from {
      opacity: 0;
      transform: scale(0.97) translateY(4px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
  @keyframes ds-dialog__panel-out {
    from {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
    to {
      opacity: 0;
      transform: scale(0.97) translateY(4px);
    }
  }
  .ds-dialog__backdrop--leaving {
    animation: ds-dialog__backdrop-out var(--dur-base) cubic-bezier(0.4, 0, 1, 1) forwards !important;
  }
  .ds-dialog__panel--leaving ds-dialog-shell {
    animation: ds-dialog__panel-out var(--dur-base) cubic-bezier(0.4, 0, 1, 1) forwards !important;
  }
  .ds-dialog__backdrop {
    background:
      radial-gradient(
        circle at 18% 30%,
        var(--ds-dialog-backdrop-1, rgba(107, 136, 87, 0.22)),
        transparent 55%),
      radial-gradient(
        circle at 80% 22%,
        var(--ds-dialog-backdrop-2, rgba(161, 117, 96, 0.2)),
        transparent 55%),
      radial-gradient(
        circle at 60% 90%,
        var(--ds-dialog-backdrop-3, rgba(229, 203, 133, 0.45)),
        transparent 60%),
      linear-gradient(
        180deg,
        var(--ds-dialog-backdrop-scrim-top, rgba(58, 48, 28, 0.16)) 0%,
        var(--ds-dialog-backdrop-scrim-bottom, rgba(58, 48, 28, 0.2)) 100%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: ds-dialog__backdrop-in var(--dur-base) var(--ease-emphasis);
  }
  .dark .ds-dialog__backdrop {
    background:
      radial-gradient(
        circle at 18% 30%,
        var(--ds-dialog-backdrop-1, rgba(140, 175, 110, 0.32)),
        transparent 55%),
      radial-gradient(
        circle at 80% 22%,
        var(--ds-dialog-backdrop-2, rgba(200, 145, 115, 0.3)),
        transparent 55%),
      radial-gradient(
        circle at 60% 90%,
        var(--ds-dialog-backdrop-3, rgba(229, 203, 133, 0.25)),
        transparent 60%),
      var(--ds-dialog-backdrop-scrim, rgba(0, 0, 0, 0.4));
  }
  .ds-dialog__panel {
    display: contents;
  }
  .ds-dialog__panel ds-dialog-shell {
    animation: ds-dialog__panel-in var(--dur-base) var(--ease-emphasis);
  }
  .ds-menu__item {
    display: flex;
    align-items: center;
    gap: var(--ds-menu-item-gap, var(--space-xs));
    padding: var(--ds-menu-item-padding-y, var(--space-xs)) var(--ds-menu-item-padding-x, var(--space-sm));
    border-radius: var(--ds-menu-item-radius, var(--radius-sm));
    background: transparent;
    border: none;
    color: var(--ds-menu-item-fg, var(--color-text-body));
    font-family: var(--font-sans);
    font-size: var(--ds-menu-item-font-size, var(--text-sm));
    letter-spacing: -0.005em;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background var(--dur-fast) var(--ease-emphasis), color var(--dur-fast) var(--ease-emphasis);
  }
  .ds-menu__item:hover,
  .ds-menu__item:focus,
  .ds-menu__item:focus-visible {
    background: var(--ds-menu-item-hover-bg, var(--color-state-hover));
    color: var(--ds-menu-item-hover-fg, var(--color-text-primary));
    outline: none;
  }
  .ds-menu__item[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .ds-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font-sans);
    font-size: var(--ds-table-font-size, var(--text-sm));
    color: var(--ds-table-fg, var(--color-text-body));
  }
  .ds-table__header {
    text-align: left;
    font-weight: 500;
    font-size: var(--ds-table-header-font-size, var(--text-2xs));
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ds-table-header-fg, var(--color-text-secondary));
    padding: var(--ds-table-cell-padding-y, var(--space-xs)) var(--ds-table-cell-padding-x, var(--space-sm));
    border-bottom: 1px solid var(--ds-table-border, var(--color-border-subtle));
    background: var(--ds-table-header-bg, var(--color-surface-header));
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .ds-table__cell {
    padding: var(--ds-table-cell-padding-y, var(--space-xs)) var(--ds-table-cell-padding-x, var(--space-sm));
    border-bottom: 1px solid var(--ds-table-border, var(--color-border-subtle));
    color: var(--ds-table-cell-fg, var(--color-text-primary));
  }
  .ds-table__row:hover .ds-table__cell {
    background: var(--ds-table-row-hover-bg, var(--color-state-hover));
  }
  .ds-table__row:last-child .ds-table__cell {
    border-bottom: none;
  }
  [dsSidebarBrand] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 16px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
  }
  [dsSidebarSchoolPin] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -8px 0 12px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--color-text-secondary);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-emphasis), color var(--dur-fast) var(--ease-emphasis);
  }
  [dsSidebarSchoolPin] > :first-child {
    flex: none;
    color: var(--color-text-tertiary);
  }
  [dsSidebarSchoolPin] > span {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  [dsSidebarSchoolPin]:hover {
    background: var(--color-state-hover);
    color: var(--color-text-primary);
  }
  [dsSidebarSchoolPin].ds-sidebar-school-pin--active {
    background: var(--color-interactive-primary-tint);
    color: var(--color-interactive-primary-hover);
    font-weight: 600;
  }
  [dsSidebarSchoolPin].ds-sidebar-school-pin--active > :first-child {
    color: var(--color-interactive-primary);
  }
  [dsSidebarSection] {
    display: block;
    margin: 14px 8px 4px;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    font-weight: 500;
  }
  a[dsSidebarSection],
  button[dsSidebarSection] {
    background: none;
    border: none;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    border-radius: 4px;
    padding: 2px 4px;
    margin-left: 4px;
    transition: color var(--dur-fast) var(--ease-emphasis), background var(--dur-fast) var(--ease-emphasis);
  }
  a[dsSidebarSection]:hover,
  button[dsSidebarSection]:hover {
    color: var(--color-text-secondary);
    background: var(--color-state-hover);
  }
  a[dsSidebarSection]:focus-visible,
  button[dsSidebarSection]:focus-visible {
    outline: 2px solid var(--color-interactive-primary);
    outline-offset: 1px;
  }
  [dsSidebarFooter] {
    margin-top: auto;
    padding: 10px 6px 6px;
    border-top: 1px solid var(--color-border-subtle);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .ds-sidebar--compact [dsSidebarSection],
  .ds-sidebar--compact [dsSidebarBrand] > :not(:first-child),
  .ds-sidebar--compact [dsSidebarFooter] > :not(:first-child),
  .ds-sidebar--compact [dsSidebarSchoolPin] > span {
    display: none;
  }
  .ds-sidebar--compact [dsSidebarSchoolPin] {
    justify-content: center;
    padding: 6px 4px;
  }
  .ds-glass {
    background: var(--color-glass-regular);
    backdrop-filter: blur(var(--blur-sm, 4px));
    -webkit-backdrop-filter: blur(var(--blur-sm, 4px));
    border-radius: 14px;
    box-shadow:
      inset 0 1px 0 var(--color-glass-highlight),
      inset 0 0 0 1px var(--color-glass-stroke),
      var(--shadow-md);
  }
  .ds-glass--thin {
    background: var(--color-glass-thin);
  }
  .ds-glass--thick {
    background: var(--color-glass-thick);
  }
  .ds-glass--blur-sm {
    backdrop-filter: blur(var(--blur-sm, 4px));
    -webkit-backdrop-filter: blur(var(--blur-sm, 4px));
  }
  .ds-glass--blur-md {
    backdrop-filter: blur(var(--blur-md, 8px));
    -webkit-backdrop-filter: blur(var(--blur-md, 8px));
  }
  .ds-glass--blur-lg {
    backdrop-filter: blur(var(--blur-lg, 16px));
    -webkit-backdrop-filter: blur(var(--blur-lg, 16px));
  }
  ds-card.ds-glass {
    background: var(--color-glass-regular);
    box-shadow: inset 0 0 0 1px var(--color-glass-stroke), var(--shadow-sm);
  }
  ds-card.ds-glass.ds-glass--thin {
    background: var(--color-glass-thin);
  }
  ds-card.ds-glass.ds-glass--thick {
    background: var(--color-glass-thick);
  }
  :root {
    --ds-atmosphere-aurora:
      radial-gradient(
        
        circle at 18% 30%,
        rgba(107, 136, 87, 0.2),
        transparent 55% ),
      radial-gradient(
        
        circle at 80% 22%,
        rgba(161, 117, 96, 0.18),
        transparent 55% ),
      radial-gradient(
        
        circle at 60% 90%,
        rgba(229, 203, 133, 0.55),
        transparent 60% );
    --ds-atmosphere-sky:
      radial-gradient(
        
        circle at 20% 25%,
        rgba(107, 136, 87, 0.18),
        transparent 55% ),
      radial-gradient(
        
        circle at 80% 80%,
        rgba(107, 136, 87, 0.08),
        transparent 55% );
    --ds-atmosphere-bloom:
      radial-gradient(
        
        circle at 25% 30%,
        rgba(161, 117, 96, 0.22),
        transparent 55% ),
      radial-gradient(
        circle at 75% 75%,
        rgba(161, 117, 96, 0.1),
        transparent 55%);
    --ds-atmosphere-parchment:
      radial-gradient(
        
        circle at 25% 30%,
        rgba(217, 149, 74, 0.2),
        transparent 55% ),
      radial-gradient(
        
        circle at 80% 75%,
        rgba(217, 149, 74, 0.08),
        transparent 55% );
    --ds-atmosphere-meadow:
      radial-gradient(
        
        circle at 22% 30%,
        rgba(90, 141, 110, 0.22),
        transparent 55% ),
      radial-gradient(
        circle at 78% 75%,
        rgba(90, 141, 110, 0.1),
        transparent 55%);
    --ds-atmosphere-sunset:
      radial-gradient(
        
        circle at 25% 30%,
        rgba(199, 105, 84, 0.18),
        transparent 55% ),
      radial-gradient(
        
        circle at 75% 75%,
        rgba(199, 105, 84, 0.08),
        transparent 55% );
    --ds-atmosphere-paper:
      radial-gradient(
        circle at 25% 25%,
        rgba(46, 38, 24, 0.05),
        transparent 55%),
      radial-gradient(
        circle at 80% 80%,
        rgba(46, 38, 24, 0.03),
        transparent 55%);
    --ds-atmosphere-horizon:
      linear-gradient(
        
        135deg,
        #f3ead0 0%,
        #e5d5b5 50%,
        #c5a37c 100% );
    --ds-atmosphere-twilight:
      linear-gradient(
        
        135deg,
        #f4ebe5 0%,
        #e9d5cc 60%,
        #c8a697 100% );
  }
  .ds-atmosphere--aurora {
    background:
      var(--ds-atmosphere-aurora),
      linear-gradient(
        180deg,
        #fffbef 0%,
        #faf3df 100%);
  }
  .ds-atmosphere--sky {
    background:
      var(--ds-atmosphere-sky),
      linear-gradient(
        180deg,
        #f8f4e0 0%,
        #f3ead0 100%);
  }
  .ds-atmosphere--bloom {
    background:
      var(--ds-atmosphere-bloom),
      linear-gradient(
        180deg,
        #faefe5 0%,
        #f4e1d2 100%);
  }
  .ds-atmosphere--parchment {
    background:
      var(--ds-atmosphere-parchment),
      linear-gradient(
        180deg,
        #fdf5dc 0%,
        #f5e2b5 100%);
  }
  .ds-atmosphere--meadow {
    background:
      var(--ds-atmosphere-meadow),
      linear-gradient(
        180deg,
        #f2f7ee 0%,
        #e5efda 100%);
  }
  .ds-atmosphere--sunset {
    background:
      var(--ds-atmosphere-sunset),
      linear-gradient(
        180deg,
        #fdf1e8 0%,
        #f9e2d0 100%);
  }
  .ds-atmosphere--paper {
    background:
      var(--ds-atmosphere-paper),
      linear-gradient(
        180deg,
        #fffbef 0%,
        #f9eed1 100%);
  }
  .ds-atmosphere--horizon {
    background: var(--ds-atmosphere-horizon);
  }
  .ds-atmosphere--twilight {
    background: var(--ds-atmosphere-twilight);
  }
  html.dark {
    --ds-atmosphere-aurora:
      radial-gradient(
        
        circle at 18% 30%,
        rgba(107, 136, 87, 0.18),
        transparent 55% ),
      radial-gradient(
        
        circle at 80% 22%,
        rgba(161, 117, 96, 0.16),
        transparent 55% ),
      radial-gradient(
        
        circle at 60% 90%,
        rgba(229, 203, 133, 0.1),
        transparent 60% );
    --ds-atmosphere-sky:
      radial-gradient(
        
        circle at 20% 25%,
        rgba(107, 136, 87, 0.14),
        transparent 55% );
    --ds-atmosphere-bloom:
      radial-gradient(
        
        circle at 25% 30%,
        rgba(161, 117, 96, 0.18),
        transparent 55% );
    --ds-atmosphere-parchment:
      radial-gradient(
        
        circle at 25% 30%,
        rgba(217, 149, 74, 0.14),
        transparent 55% );
    --ds-atmosphere-meadow:
      radial-gradient(
        
        circle at 22% 30%,
        rgba(90, 141, 110, 0.18),
        transparent 55% );
    --ds-atmosphere-sunset:
      radial-gradient(
        
        circle at 25% 30%,
        rgba(199, 105, 84, 0.16),
        transparent 55% );
    --ds-atmosphere-paper: none;
    --ds-atmosphere-horizon:
      linear-gradient(
        
        135deg,
        rgba(107, 136, 87, 0.2),
        rgba(107, 136, 87, 0.08) );
    --ds-atmosphere-twilight:
      linear-gradient(
        
        135deg,
        rgba(161, 117, 96, 0.22),
        rgba(161, 117, 96, 0.08) );
  }
  .dark .ds-atmosphere--aurora {
    background: var(--ds-atmosphere-aurora), var(--color-surface-0);
  }
  .dark .ds-atmosphere--sky {
    background: var(--ds-atmosphere-sky), var(--color-surface-0);
  }
  .dark .ds-atmosphere--bloom {
    background: var(--ds-atmosphere-bloom), var(--color-surface-0);
  }
  .dark .ds-atmosphere--parchment {
    background: var(--ds-atmosphere-parchment), var(--color-surface-0);
  }
  .dark .ds-atmosphere--meadow {
    background: var(--ds-atmosphere-meadow), var(--color-surface-0);
  }
  .dark .ds-atmosphere--sunset {
    background: var(--ds-atmosphere-sunset), var(--color-surface-0);
  }
  .dark .ds-atmosphere--paper {
    background: var(--ds-atmosphere-paper), var(--color-surface-0);
  }
  .dark .ds-atmosphere--horizon {
    background: var(--ds-atmosphere-horizon), var(--color-surface-0);
  }
  .dark .ds-atmosphere--twilight {
    background: var(--ds-atmosphere-twilight), var(--color-surface-0);
  }
  .ds-popover__panel {
    background: var(--ds-popover-bg, var(--color-surface-overlay));
    -webkit-backdrop-filter: blur(var(--glass-fx-blur));
    backdrop-filter: blur(var(--glass-fx-blur));
    border-radius: var(--ds-popover-radius, var(--radius-lg));
    box-shadow: inset 0 0 0 1px var(--ds-popover-border, var(--color-border-subtle)), var(--shadow-lg);
    padding: var(--ds-popover-padding-y, var(--space-sm)) var(--ds-popover-padding-x, var(--space-md));
    min-width: 220px;
    max-width: 320px;
    font-family: var(--font-sans);
    font-size: var(--ds-popover-font-size, var(--text-sm));
    color: var(--ds-popover-fg, var(--color-text-primary));
    line-height: 1.45;
  }
  .ds-popover__panel .ds-popover__eyebrow {
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ds-popover-eyebrow-fg, var(--color-secondary-default));
    margin: 0 0 6px;
    font-weight: 500;
    font-family: var(--font-mono, ui-monospace, monospace);
  }
  .ds-popover__panel h4 {
    margin: 0 0 6px;
    font-size: var(--ds-popover-title-font-size, var(--text-base));
    font-weight: 600;
  }
  .ds-popover__panel p {
    margin: 0;
    color: var(--ds-popover-body-fg, var(--color-text-body));
  }
  .ds-popover__backdrop {
    background: transparent;
  }
  .ds-rich-select__panel {
    background: var(--ds-rich-select-panel-bg, var(--color-surface-overlay));
    -webkit-backdrop-filter: blur(var(--glass-fx-blur));
    backdrop-filter: blur(var(--glass-fx-blur));
    border-radius: var(--ds-rich-select-panel-radius, var(--radius-md));
    box-shadow: inset 0 0 0 1px var(--ds-rich-select-panel-border, var(--color-border-subtle)), var(--shadow-lg);
    padding: var(--ds-rich-select-panel-padding-x, var(--space-2xs));
    min-width: 160px;
    max-height: 320px;
    overflow-y: auto;
  }
  .ds-rich-select__panel--glass {
    background: var(--color-glass-thick);
    -webkit-backdrop-filter: blur(var(--blur-md, 12px)) saturate(1.05);
    backdrop-filter: blur(var(--blur-md, 12px)) saturate(1.05);
    box-shadow: inset 0 0 0 1px var(--color-glass-stroke), var(--shadow-lg);
  }
  .ds-rich-select__backdrop {
    background: transparent;
  }
  .ds-select__backdrop {
    background: transparent;
  }
  .ds-no-select {
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
  }
  .ds-selectable {
    user-select: text;
    -webkit-user-select: text;
    cursor: auto;
  }
}
@layer eduari.components {
  .ds-hatch {
    background-image:
      repeating-linear-gradient(
        var(--ds-hatch-angle, -45deg),
        var(--ds-hatch-base, transparent) 0,
        var(--ds-hatch-base, transparent) var(--ds-hatch-size, 7px),
        var(--ds-hatch-color, currentColor) var(--ds-hatch-size, 7px),
        var(--ds-hatch-color, currentColor) calc(var(--ds-hatch-size, 7px) * 2));
  }
  @supports (color: color-mix(in lab, red, red)) {
    .ds-hatch {
      background-image:
        repeating-linear-gradient(
          var(--ds-hatch-angle, -45deg),
          var(--ds-hatch-base, transparent) 0,
          var(--ds-hatch-base, transparent) var(--ds-hatch-size, 7px),
          color-mix(in srgb, var(--ds-hatch-color, currentColor) var(--ds-hatch-strength, 7%), var(--ds-hatch-base, transparent)) var(--ds-hatch-size, 7px),
          color-mix(in srgb, var(--ds-hatch-color, currentColor) var(--ds-hatch-strength, 7%), var(--ds-hatch-base, transparent)) calc(var(--ds-hatch-size, 7px) * 2));
    }
  }
}

/* projects/playground/src/styles.scss */
html {
  height: 100%;
  color-scheme: light;
}
html.dark {
  color-scheme: dark;
}
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background-color: var(--color-surface-0);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
}
app-root {
  display: block;
  height: 100%;
  min-height: 0;
}

/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */