@layer eduari.tokens, eduari.base, eduari.components, app;
@import "https://fonts.googleapis.com/css2?family=Geist:wght@100;200;300;400;500;600;700&family=Onest:wght@200;300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap";

/* projects/design-system/src/styles/index.css */
/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
@font-face {
  font-family: "Jost";
  src: url("./media/jost-v20-latin-300.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("./media/jost-v20-latin-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("./media/jost-v20-latin-500.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("./media/jost-v20-latin-600.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("./media/jost-v20-latin-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("./media/Jost-Italic-VariableFont_wght.ttf") format("truetype-variations"), url("./media/Jost-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@layer eduari.tokens {
  :root {
    --space-0: 0;
    --space-1: 2px;
    --space-2: 4px;
    --space-3: 8px;
    --space-4: 12px;
    --space-5: 16px;
    --space-6: 20px;
    --space-7: 24px;
    --space-8: 32px;
    --space-9: 48px;
    --space-10: 64px;
    --space-11: 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-secondary:
      inset 0 0 0 1px var(--ds-btn-bd),
      inset 0 1px 0 var(--color-surface-highlight),
      var(--shadow-xs);
    --shadow-button-secondary-hover: inset 0 0 0 1px var(--color-button-border-strong), var(--shadow-sm);
    --shadow-button-primary:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 0 0 1px rgba(11, 29, 68, 0.25),
      0 1px 2px rgba(17, 43, 98, 0.20),
      0 6px 18px -6px rgba(47, 92, 83, 0.45);
    --shadow-button-primary-hover:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 0 0 1px rgba(11, 29, 68, 0.35),
      0 2px 6px rgba(17, 43, 98, 0.24),
      0 12px 26px -8px rgba(47, 92, 83, 0.55);
    --shadow-button-info:
      inset 0 1px 0 rgba(255, 255, 255, 0.15),
      inset 0 0 0 1px rgba(11, 29, 68, 0.30),
      0 1px 2px rgba(17, 43, 98, 0.18),
      0 4px 12px -4px rgba(31, 60, 53, 0.40);
    --shadow-button-agent:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 0 0 1px rgba(94, 44, 50, 0.35),
      0 1px 2px rgba(70, 31, 36, 0.18),
      0 6px 18px -6px rgba(94, 44, 50, 0.45);
    --shadow-button-agent-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-agent-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:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 0 0 1px rgba(150, 50, 30, 0.40),
      0 1px 2px rgba(149, 68, 47, 0.20),
      0 6px 18px -6px rgba(149, 68, 47, 0.50);
    --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-secondary:
      inset 0 0 0 1px var(--ds-btn-bd),
      inset 0 1px 0 var(--color-surface-highlight),
      var(--shadow-xs);
    --shadow-button-secondary-hover: inset 0 0 0 1px var(--color-button-border-strong), var(--shadow-sm);
    --shadow-button-primary:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      inset 0 0 0 1px rgba(11, 29, 68, 0.30),
      0 1px 2px rgba(0, 0, 0, 0.40),
      0 6px 18px -6px rgba(0, 0, 0, 0.55);
    --shadow-button-primary-hover:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      inset 0 0 0 1px rgba(11, 29, 68, 0.40),
      0 2px 6px rgba(0, 0, 0, 0.45),
      0 12px 26px -8px rgba(0, 0, 0, 0.60);
    --shadow-button-info:
      inset 0 1px 0 rgba(255, 255, 255, 0.10),
      inset 0 0 0 1px rgba(11, 29, 68, 0.35),
      0 1px 2px rgba(0, 0, 0, 0.40),
      0 4px 12px -4px rgba(0, 0, 0, 0.50);
    --shadow-button-agent:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      inset 0 0 0 1px rgba(94, 44, 50, 0.40),
      0 1px 2px rgba(0, 0, 0, 0.40),
      0 6px 18px -6px rgba(0, 0, 0, 0.55);
    --shadow-button-agent-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-agent-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 1px 0 rgba(255, 255, 255, 0.12),
      inset 0 0 0 1px rgba(150, 50, 30, 0.45),
      0 1px 2px rgba(0, 0, 0, 0.40),
      0 6px 18px -6px 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-25: #fcf6e6;
    --neutral-50: #f8ecd6;
    --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-900: #16140f;
    --neutral-1000: #141311;
    --primary-25: #f0e9d5;
    --primary-50: #e9e0c8;
    --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-900: #2a1a08;
    --primary-1000: #1c0f02;
    --secondary-25: #f6e8e8;
    --secondary-50: #efdede;
    --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-900: #331619;
    --secondary-1000: #240b0e;
    --tertiary-25: #edf2f5;
    --tertiary-50: #e3e9ed;
    --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-900: #121d22;
    --tertiary-1000: #081115;
    --success-50: #efe3c0;
    --success-100: #d3dfc1;
    --success-500: #6b8857;
    --success-700: #4d6a3e;
    --warning-50: #fcf3e5;
    --warning-100: #f8e0bd;
    --warning-500: #d9954a;
    --warning-700: #a26a22;
    --danger-50: #fbede7;
    --danger-100: #f5d2c2;
    --danger-500: #c76954;
    --danger-700: #95442f;
    --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-surface-canvas: var(--neutral-25);
    --color-surface-app: var(--neutral-25);
    --color-surface-card: var(--neutral-50);
    --color-surface-raised: var(--neutral-50);
    --color-surface-sunken: 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-text-link: var(--primary-600);
    --color-border-subtle: var(--neutral-150);
    --color-border-default: var(--neutral-200);
    --color-border-strong: var(--neutral-300);
    --color-border-focus: var(--primary-500);
    --color-focus-ring: var(--primary-500);
    --color-action-primary: var(--primary-500);
    --color-action-primary-hover: var(--primary-600);
    --color-action-primary-active: var(--primary-700);
    --color-button-surface: var(--neutral-50);
    --color-button-surface-hover: var(--neutral-100);
    --color-button-foreground: var(--primary-1000);
    --color-button-border: var(--neutral-200);
    --color-button-border-strong: var(--neutral-300);
    --color-button-primary-from: var(--primary-400);
    --color-button-primary-via: var(--primary-500);
    --color-button-primary-to: var(--primary-600);
    --color-button-primary-hover-from: var(--primary-500);
    --color-button-primary-hover-via: var(--primary-600);
    --color-button-primary-hover-to: var(--primary-700);
    --color-button-info-from: var(--primary-500);
    --color-button-info-via: var(--primary-600);
    --color-button-info-to: var(--primary-700);
    --color-button-info-hover-from: var(--primary-600);
    --color-button-info-hover-via: var(--primary-700);
    --color-button-info-hover-to: var(--primary-800);
    --color-button-agent-from: var(--secondary-500);
    --color-button-agent-to: var(--secondary-700);
    --color-button-agent-soft-from: var(--secondary-50);
    --color-button-agent-soft-to: var(--secondary-100);
    --color-button-agent-soft-text: var(--secondary-700);
    --color-button-danger-from: var(--danger-500);
    --color-button-danger-to: var(--danger-700);
    --color-button-danger-outline-text: var(--danger-700);
    --color-button-danger-outline-hover-bg: var(--danger-50);
    --color-agent-default: var(--secondary-500);
    --color-agent-hover: var(--secondary-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-parchment-bg: var(--primary-50);
    --color-parchment-card: var(--primary-150);
    --color-parchment-edge: var(--primary-300);
    --color-parchment-text: var(--primary-500);
    --color-afb-1: var(--success-500);
    --color-afb-2: var(--warning-500);
    --color-afb-3: var(--danger-500);
  }
}
@layer eduari.tokens {
  [data-profile=base].dark,
  .dark {
    --color-surface-canvas: var(--neutral-1000);
    --color-surface-app: var(--neutral-900);
    --color-surface-card: var(--neutral-800);
    --color-surface-raised: var(--neutral-700);
    --color-surface-sunken: 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-text-link: var(--primary-300);
    --color-border-subtle: var(--neutral-700);
    --color-border-default: var(--neutral-600);
    --color-border-strong: var(--neutral-500);
    --color-border-focus: var(--primary-400);
    --color-focus-ring: var(--primary-400);
    --color-action-primary: var(--primary-400);
    --color-action-primary-hover: var(--primary-300);
    --color-action-primary-active: var(--primary-200);
    --color-button-surface: var(--neutral-800);
    --color-button-surface-hover: var(--neutral-700);
    --color-button-foreground: var(--neutral-25);
    --color-button-border: var(--neutral-600);
    --color-button-border-strong: var(--neutral-500);
    --color-button-primary-from: var(--primary-300);
    --color-button-primary-via: var(--primary-400);
    --color-button-primary-to: var(--primary-500);
    --color-button-primary-hover-from: var(--primary-400);
    --color-button-primary-hover-via: var(--primary-500);
    --color-button-primary-hover-to: var(--primary-600);
    --color-button-info-from: var(--primary-400);
    --color-button-info-via: var(--primary-500);
    --color-button-info-to: var(--primary-600);
    --color-button-info-hover-from: var(--primary-500);
    --color-button-info-hover-via: var(--primary-600);
    --color-button-info-hover-to: var(--primary-700);
    --color-button-agent-from: var(--secondary-400);
    --color-button-agent-to: var(--secondary-600);
    --color-button-agent-soft-from: var(--secondary-800);
    --color-button-agent-soft-to: var(--secondary-700);
    --color-button-agent-soft-text: var(--secondary-200);
    --color-button-danger-from: var(--danger-500);
    --color-button-danger-to: var(--danger-700);
    --color-button-danger-outline-text: var(--danger-100);
    --color-button-danger-outline-hover-bg: var(--danger-700);
    --color-agent-default: var(--secondary-300);
    --color-agent-hover: var(--secondary-200);
    --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-parchment-bg: var(--primary-900);
    --color-parchment-card: var(--primary-800);
    --color-parchment-edge: var(--primary-700);
    --color-parchment-text: var(--primary-200);
  }
}
@layer eduari.components {
  :root {
    --color-action-primary-soft: rgb(from var(--color-action-primary) r g b / var(--soft-alpha));
    --color-agent-soft: rgb(from var(--color-agent-default) r g b / var(--soft-alpha));
    --color-success-soft: rgb(from var(--color-success-default) r g b / var(--soft-alpha));
    --color-warning-soft: rgb(from var(--color-warning-default) r g b / var(--soft-alpha));
    --color-danger-soft: rgb(from var(--color-danger-default) r g b / var(--soft-alpha));
  }
  :root {
    --ds-accent: var(--color-action-primary);
    --ds-glass-tint: 255 255 255;
  }
  html.dark {
    --ds-glass-tint: 0 0 0;
  }
  :root {
    --overlay-tint: 15 17 21;
    --highlight-tint: 255 255 255;
    --agent-edge-alpha: 0.18;
    --glass-stroke-alpha: 0.10;
    --glass-highlight-alpha: 0.40;
    --state-hover-alpha: 0.05;
    --state-active-alpha: 0.08;
    --hairline-alpha: 0.08;
    --shelf-alpha: 0.02;
    --surface-highlight-alpha: 0.60;
    --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-agent-edge: rgb(from var(--color-agent-default) r g b / var(--agent-edge-alpha));
  }
  html.dark {
    --overlay-tint: 255 255 255;
    --highlight-tint: 229 196 120;
    --agent-edge-alpha: 0.30;
    --glass-stroke-alpha: 0.14;
    --glass-highlight-alpha: 0.16;
    --state-hover-alpha: 0.06;
    --state-active-alpha: 0.10;
    --hairline-alpha: 0.10;
    --shelf-alpha: 0.03;
    --surface-highlight-alpha: 0.05;
    --scrim-alpha: 0.48;
  }
  .ds-input {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 13px;
    line-height: 1;
    width: 100%;
    height: 32px;
    padding: 0 12px;
    background: var(--ds-input-bg, var(--color-surface-card));
    backdrop-filter: var(--ds-input-backdrop-filter, none);
    -webkit-backdrop-filter: var(--ds-input-backdrop-filter, none);
    border: none;
    border-radius: 10px;
    color: var(--color-text-primary);
    box-shadow:
      inset 0 0 0 1px var(--ds-input-border-color, 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(--color-text-tertiary);
  }
  .ds-input:focus,
  .ds-input:focus-visible {
    outline: none;
    background: var(--color-surface-card);
    box-shadow:
      inset 0 0 0 1px var(--color-border-focus),
      0 0 0 2px var(--color-surface-app),
      0 0 0 4px var(--color-action-primary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .ds-input:focus,
    .ds-input:focus-visible {
      box-shadow:
        inset 0 0 0 1px var(--color-border-focus),
        0 0 0 2px var(--color-surface-app),
        0 0 0 4px color-mix(in srgb, var(--color-action-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(--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(--color-danger-default),
      0 0 0 2px var(--color-surface-app),
      0 0 0 4px 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(--color-danger-default),
        0 0 0 2px var(--color-surface-app),
        0 0 0 4px color-mix(in srgb, var(--color-danger-default) 30%, transparent);
    }
  }
  textarea.ds-input {
    height: auto;
    min-height: 80px;
    padding: 10px 12px;
    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: 12px;
    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%,
        rgba(107, 136, 87, 0.22),
        transparent 55%),
      radial-gradient(
        circle at 80% 22%,
        rgba(161, 117, 96, 0.20),
        transparent 55%),
      radial-gradient(
        circle at 60% 90%,
        rgba(229, 203, 133, 0.45),
        transparent 60%),
      linear-gradient(
        180deg,
        rgba(58, 48, 28, 0.16) 0%,
        rgba(58, 48, 28, 0.20) 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%,
        rgba(140, 175, 110, 0.32),
        transparent 55%),
      radial-gradient(
        circle at 80% 22%,
        rgba(200, 145, 115, 0.30),
        transparent 55%),
      radial-gradient(
        circle at 60% 90%,
        rgba(229, 203, 133, 0.25),
        transparent 60%),
      rgba(0, 0, 0, 0.40);
  }
  .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: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--color-text-body);
    font-family: var(--font-sans);
    font-size: 13px;
    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(--color-state-hover);
    color: 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: 13px;
    color: var(--color-text-body);
  }
  .ds-table__header {
    text-align: left;
    font-weight: 500;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-surface-header);
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .ds-table__cell {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border-subtle);
    color: var(--color-text-primary);
  }
  .ds-table__row:hover .ds-table__cell {
    background: 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-action-primary-soft);
    color: var(--color-action-primary-hover);
    font-weight: 600;
  }
  [dsSidebarSchoolPin].ds-sidebar-school-pin--active > :first-child {
    color: var(--color-action-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-action-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);
  }
  .ds-atmosphere--aurora {
    background:
      radial-gradient(
        circle at 18% 30%,
        rgba(107, 136, 87, 0.20),
        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%),
      linear-gradient(
        180deg,
        #FFFBEF 0%,
        #FAF3DF 100%);
  }
  .ds-atmosphere--sky {
    background:
      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%),
      linear-gradient(
        180deg,
        #F8F4E0 0%,
        #F3EAD0 100%);
  }
  .ds-atmosphere--bloom {
    background:
      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.10),
        transparent 55%),
      linear-gradient(
        180deg,
        #FAEFE5 0%,
        #F4E1D2 100%);
  }
  .ds-atmosphere--parchment {
    background:
      radial-gradient(
        circle at 25% 30%,
        rgba(217, 149, 74, 0.20),
        transparent 55%),
      radial-gradient(
        circle at 80% 75%,
        rgba(217, 149, 74, 0.08),
        transparent 55%),
      linear-gradient(
        180deg,
        #FDF5DC 0%,
        #F5E2B5 100%);
  }
  .ds-atmosphere--meadow {
    background:
      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.10),
        transparent 55%),
      linear-gradient(
        180deg,
        #F2F7EE 0%,
        #E5EFDA 100%);
  }
  .ds-atmosphere--sunset {
    background:
      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%),
      linear-gradient(
        180deg,
        #FDF1E8 0%,
        #F9E2D0 100%);
  }
  .ds-atmosphere--paper {
    background:
      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%),
      linear-gradient(
        180deg,
        #FFFBEF 0%,
        #F9EED1 100%);
  }
  .ds-atmosphere--horizon {
    background:
      linear-gradient(
        135deg,
        #F3EAD0 0%,
        #E5D5B5 50%,
        #C5A37C 100%);
  }
  .ds-atmosphere--twilight {
    background:
      linear-gradient(
        135deg,
        #F4EBE5 0%,
        #E9D5CC 60%,
        #C8A697 100%);
  }
  .dark .ds-atmosphere--aurora,
  .dark .ds-atmosphere--sky,
  .dark .ds-atmosphere--bloom,
  .dark .ds-atmosphere--parchment,
  .dark .ds-atmosphere--meadow,
  .dark .ds-atmosphere--sunset,
  .dark .ds-atmosphere--paper,
  .dark .ds-atmosphere--horizon,
  .dark .ds-atmosphere--twilight {
    background-color: var(--color-surface-app);
  }
  .dark .ds-atmosphere--aurora {
    background-image:
      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.10),
        transparent 60%);
  }
  .dark .ds-atmosphere--sky {
    background-image:
      radial-gradient(
        circle at 20% 25%,
        rgba(107, 136, 87, 0.14),
        transparent 55%);
  }
  .dark .ds-atmosphere--bloom {
    background-image:
      radial-gradient(
        circle at 25% 30%,
        rgba(161, 117, 96, 0.18),
        transparent 55%);
  }
  .dark .ds-atmosphere--parchment {
    background-image:
      radial-gradient(
        circle at 25% 30%,
        rgba(217, 149, 74, 0.14),
        transparent 55%);
  }
  .dark .ds-atmosphere--meadow {
    background-image:
      radial-gradient(
        circle at 22% 30%,
        rgba(90, 141, 110, 0.18),
        transparent 55%);
  }
  .dark .ds-atmosphere--sunset {
    background-image:
      radial-gradient(
        circle at 25% 30%,
        rgba(199, 105, 84, 0.16),
        transparent 55%);
  }
  .dark .ds-atmosphere--paper {
    background-image: none;
  }
  .dark .ds-atmosphere--horizon {
    background-image:
      linear-gradient(
        135deg,
        rgba(107, 136, 87, 0.20),
        rgba(107, 136, 87, 0.08));
  }
  .dark .ds-atmosphere--twilight {
    background-image:
      linear-gradient(
        135deg,
        rgba(161, 117, 96, 0.22),
        rgba(161, 117, 96, 0.08));
  }
  .ds-popover__panel {
    background: var(--color-surface-raised);
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--color-border-subtle), var(--shadow-lg);
    padding: 14px 16px;
    min-width: 220px;
    max-width: 320px;
    font-family: var(--font-sans);
    font-size: 13px;
    color: 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(--color-agent-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: 14px;
    font-weight: 600;
  }
  .ds-popover__panel p {
    margin: 0;
    color: var(--color-text-body);
  }
  .ds-popover__backdrop {
    background: transparent;
  }
  .ds-rich-select__panel {
    background: var(--color-surface-raised);
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px var(--color-border-subtle), var(--shadow-lg);
    padding: 4px;
    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__panel {
    background: var(--color-surface-raised);
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px var(--color-border-subtle), var(--shadow-lg);
    padding: 4px;
    width: max-content;
    min-width: 100%;
    max-width: min(90vw, 26rem);
    max-height: 320px;
    overflow-y: auto;
  }
  .ds-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-select__option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    border-radius: 6px;
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.3;
    color: var(--color-text-primary);
    transition: background var(--dur-fast) var(--ease-emphasis);
  }
  .ds-select__option-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
  }
  .ds-select__option-check {
    flex: 0 0 auto;
    color: var(--color-action-primary);
  }
  .ds-select__option--muted {
    color: var(--color-text-secondary);
  }
  .ds-select__option--active {
    background: var(--color-state-hover);
  }
  .ds-select__option--selected {
    color: var(--color-action-primary);
    font-weight: var(--weight-medium);
  }
  .ds-select__option:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .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-app);
  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 */