/* Silicon UI: https://ui.teamofsilicons.com/r/silicon-foundation.json (MIT) */
:root {
  color-scheme: light;
  --neutral-0: oklch(100% 0 0);
  --neutral-1: oklch(99% 0 0);
  --neutral-2: oklch(97.8% 0 0);
  --neutral-3: oklch(95.8% 0 0);
  --neutral-4: oklch(91.5% 0 0);
  --neutral-5: oklch(84% 0 0);
  --neutral-6: oklch(72% 0 0);
  --neutral-7: oklch(59% 0 0);
  --neutral-8: oklch(46% 0 0);
  --neutral-9: oklch(34% 0 0);
  --neutral-10: oklch(23% 0 0);
  --neutral-11: oklch(15% 0 0);
  --background: var(--neutral-0);
  --surface: var(--neutral-0);
  --surface-raised: var(--neutral-0);
  --surface-muted: var(--neutral-2);
  --foreground: var(--neutral-11);
  --text-secondary: var(--neutral-8);
  --text-muted: var(--neutral-7);
  --border: oklch(93.5% 0 0);
  --border-subtle: oklch(96.5% 0 0);
  --border-strong: oklch(82% 0 0);
  --accent: oklch(33% 0 0);
  --accent-strong: oklch(24% 0 0);
  --accent-subtle: oklch(33% 0 0 / .1);
  --accent-foreground: var(--background);
  /* Selection controls (switch, checkbox, radio, slider). --control-on fills a chosen control; --control-glyph is the check or dot drawn on it;
     thumbs stay white in both states so they always read against the track. Tuned per accent below so white thumbs hold on every hue. */
  --control-on: oklch(23% 0 0);
  --control-glyph: oklch(100% 0 0);
  --control-track: oklch(89.5% 0 0);
  --control-track-hover: oklch(86% 0 0);
  --control-thumb: oklch(100% 0 0);
  --control-thumb-on: oklch(100% 0 0);
  --control-thumb-shadow: 0 0 0 .5px oklch(0% 0 0 / .07), 0 1px 2px oklch(0% 0 0 / .14), 0 2px 6px oklch(0% 0 0 / .06);
  --control-on-subtle: color-mix(in oklab, var(--control-on) 10%, transparent);
  /* Slider fills. Same as --control-on except neutral dark, where a mid grey keeps the white thumb distinct. */
  --control-fill: var(--control-on);
  /* Pointer focus draws no ring (product decision). --focus-ring is the halo a few fields drew for any input method, so it stays transparent.
     Keyboard focus uses the outline at the end of this file; tune it with --focus-outline, --focus-outline-width and --focus-outline-offset. */
  --focus-ring: transparent;
  --success: oklch(49% .19 150);
  --warning: oklch(58% .18 75);
  --danger: oklch(54% .21 25);
  --shadow-resting: 0 1px 2px oklch(0% 0 0 / .035);
  --shadow-raised: 0 6px 18px oklch(0% 0 0 / .065), 0 1px 3px oklch(0% 0 0 / .035);
  --shadow-floating: 0 20px 48px oklch(0% 0 0 / .105), 0 3px 10px oklch(0% 0 0 / .045);
  /* Brand gradient: soft lavender to warm peach. Light enough for dark text (--silicon-gradient-foreground, >12:1). */
  --silicon-gradient-from: oklch(90% .045 300);
  --silicon-gradient-to: oklch(92% .045 65);
  --silicon-gradient: linear-gradient(100deg, var(--silicon-gradient-from), var(--silicon-gradient-to));
  --silicon-gradient-foreground: oklch(22% .01 300);
  /* Faint wash for backgrounds and tinted panels. */
  --silicon-gradient-soft: linear-gradient(135deg, oklch(97.5% .016 300), oklch(98% .016 65));
  /* Hairline borders and rules. */
  --silicon-gradient-line: linear-gradient(100deg, oklch(83% .06 300), oklch(86% .06 65));
  /* Text-safe stops for gradient text and small marks (>4.5:1 on the surface). */
  --silicon-gradient-ink: linear-gradient(100deg, oklch(47% .1 300), oklch(50% .09 55));
  /* Space, by role: tight 4 · related 8 · group 12 · inset 16 · comfort 20 · section 24 · block 32 · page 48 · stage 64 · screen 80. */
  --space-tight: 4px; --space-related: 8px; --space-group: 12px; --space-inset: 16px; --space-comfort: 20px;
  --space-section: 24px; --space-block: 32px; --space-page: 48px; --space-stage: 64px; --space-screen: 80px;
  /* Radius, by role: detail for small marks and swatches, control for buttons and fields, container for cards and menus,
     overlay for dialogs and sheets, full for pills and dots. Every corner in every component reads one of these.
     These are the round values (2 / 6 / 8 / 12). Squircle corners use larger radii, set with the corner rule below, so
     both shapes feel equally round. */
  --radius-detail: 2px; --radius-control: 6px; --radius-container: 8px; --radius-overlay: 12px; --radius-full: 999px;
  /* Corner shape. Squircle by default; see the corner rule after the dark theme. */
  --corner-shape: squircle;
  --control-height-sm: 2.25rem; --control-height-md: 2.75rem; --control-height-lg: 3.125rem;
  --font-display: var(--font-geist, "Geist Variable"), sans-serif;
  --font-body: var(--font-inter, "Inter Variable"), sans-serif;
  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem;
  --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem;
  --text-4xl: 3.25rem; --text-5xl: 4.5rem;
  --tracking-display: -.03em; --tracking-body: -.01em;
  --leading-display: 1.1; --leading-body: 1.4;
  --ease-enter: cubic-bezier(.16,1,.3,1);
  --ease-standard: cubic-bezier(.22,1,.36,1);
  --ease-exit: cubic-bezier(.7,0,.84,0);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  /* Spring with a gentle settle (bounce .15). Pair with --duration-spring for transform transitions. */
  --ease-spring: linear(0, 0.0258, 0.09, 0.1763, 0.2732, 0.3724, 0.4683, 0.5573, 0.6376, 0.7082, 0.7689, 0.8202, 0.8628, 0.8976, 0.9256, 0.9476, 0.9648, 0.9778, 0.9875, 0.9945, 0.9994, 1.0026, 1.0047, 1.0058, 1.0062, 1.0062, 1.0059, 1.0055, 1.0049, 1.0043, 1.0036, 1.0031, 1.0025, 1.002, 1.0016, 1.0013, 1);
  --duration-instant: 120ms; --duration-fast: 160ms; --duration-standard: 240ms; --duration-considered: 480ms; --duration-spring: 580ms;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: oklch(19% 0 0);
  --surface: oklch(21.5% 0 0);
  --surface-raised: oklch(24% 0 0);
  /* Keep muted surfaces and hover states distinct from the base surface in dark mode. */
  --surface-muted: oklch(26% 0 0);
  --foreground: oklch(96% 0 0);
  --text-secondary: oklch(77% 0 0);
  --text-muted: oklch(64% 0 0);
  --border: oklch(29% 0 0);
  --border-subtle: oklch(25% 0 0);
  --border-strong: oklch(40% 0 0);
  --focus-ring: transparent;
  --accent: oklch(80% 0 0);
  --accent-strong: oklch(91% 0 0);
  --accent-subtle: oklch(80% 0 0 / .13);
  /* Neutral dark inverts: a near-white track carries a dark thumb, so on and off never read alike. */
  --control-on: oklch(93% 0 0);
  --control-glyph: oklch(19% 0 0);
  --control-track: oklch(33% 0 0);
  --control-track-hover: oklch(37% 0 0);
  --control-thumb: oklch(97% 0 0);
  --control-thumb-on: oklch(19% 0 0);
  --control-fill: oklch(62% 0 0);
  --control-thumb-shadow: 0 0 0 .5px oklch(0% 0 0 / .3), 0 1px 2px oklch(0% 0 0 / .35), 0 2px 6px oklch(0% 0 0 / .2);
  --success: oklch(78% .18 150);
  --warning: oklch(83% .17 80);
  --danger: oklch(76% .2 25);
  --shadow-resting: 0 1px 2px oklch(0% 0 0 / .18);
  --shadow-raised: 0 8px 22px oklch(0% 0 0 / .22);
  --shadow-floating: 0 22px 55px oklch(0% 0 0 / .34);
  --silicon-gradient-from: oklch(38% .05 300);
  --silicon-gradient-to: oklch(40% .045 60);
  --silicon-gradient-foreground: oklch(96% .005 300);
  --silicon-gradient-soft: linear-gradient(135deg, oklch(23.5% .016 300), oklch(24% .014 65));
  --silicon-gradient-line: linear-gradient(100deg, oklch(48% .06 300), oklch(52% .055 65));
  --silicon-gradient-ink: linear-gradient(100deg, oklch(82% .07 300), oklch(86% .065 70));
}

/* Corners are squircles: every rounded corner is drawn as a superellipse, so borders, shadows and focus rings follow the
   same smooth curve. Browsers without corner-shape draw ordinary round corners from the same radius. Set
   data-corners="round" on <html>, or on any element for its subtree, to use round corners instead. */
:root[data-corners="round"], [data-corners="round"] { --corner-shape: round; }
:root[data-corners="squircle"], [data-corners="squircle"] { --corner-shape: squircle; }
*, ::before, ::after { corner-shape: var(--corner-shape); }
/* A squircle at the same radius reads about 0.55x as round as a circular corner, so squircle radii are about 1.8x the
   round ones: 4 / 11 / 14 / 21 feel like 2 / 6 / 8 / 12. Only browsers that draw squircles get them; the rest keep the
   round values above, so their corners never look oversized. */
@supports (corner-shape: squircle) {
  :root, [data-corners="squircle"] { --radius-detail: 4px; --radius-control: 11px; --radius-container: 14px; --radius-overlay: 21px; }
  :root[data-corners="round"], [data-corners="round"] { --radius-detail: 2px; --radius-control: 6px; --radius-container: 8px; --radius-overlay: 12px; }
}

:root[data-accent="neutral"] { --accent: oklch(33% 0 0); --accent-strong: oklch(24% 0 0); --accent-subtle: oklch(33% 0 0 / .1); }
:root[data-accent="violet"] { --accent: #7747ff; --accent-strong: #5528ce; --accent-subtle: rgb(119 71 255 / .13); }
:root[data-accent="blue"] { --accent: #0562ef; --accent-strong: #074db7; --accent-subtle: rgb(5 98 239 / .12); }
:root[data-accent="green"] { --accent: #0db879; --accent-strong: #087c54; --accent-subtle: rgb(13 184 121 / .13); --accent-foreground: #102016; }
:root[data-accent="amber"] { --accent: #f3ad20; --accent-strong: #9c6300; --accent-subtle: rgb(243 173 32 / .16); --accent-foreground: #20190d; }
:root[data-accent="orange"] { --accent: #f48120; --accent-strong: #aa4700; --accent-subtle: rgb(244 129 32 / .13); --accent-foreground: #17130f; }
:root[data-accent="coral"] { --accent: #f15f55; --accent-strong: #b92c27; --accent-subtle: rgb(241 95 85 / .14); --accent-foreground: #21110f; }
:root[data-accent="rose"] { --accent: #ed4e9d; --accent-strong: #ae2570; --accent-subtle: rgb(237 78 157 / .14); --accent-foreground: #250f1b; }
:root[data-theme="dark"][data-accent="neutral"] { --accent: oklch(80% 0 0); --accent-strong: oklch(91% 0 0); --accent-subtle: oklch(80% 0 0 / .13); }
:root[data-theme="dark"][data-accent="violet"] { --accent: #a78bff; --accent-strong: #c7b7ff; --accent-subtle: rgb(119 71 255 / .22); }
:root[data-theme="dark"][data-accent="blue"] { --accent: #6ba3ff; --accent-strong: #a4c7ff; --accent-subtle: rgb(5 98 239 / .22); }
:root[data-theme="dark"][data-accent="green"] { --accent: #53dca6; --accent-strong: #93efd0; --accent-subtle: rgb(13 184 121 / .2); }
:root[data-theme="dark"][data-accent="amber"] { --accent: #ffcb62; --accent-strong: #ffe0a1; --accent-subtle: rgb(243 173 32 / .2); }
:root[data-theme="dark"][data-accent="orange"] { --accent: #ffad5e; --accent-strong: #ffd0a0; --accent-subtle: rgb(244 129 32 / .2); --accent-foreground: #17130f; }
:root[data-theme="dark"][data-accent="coral"] { --accent: #ff9386; --accent-strong: #ffc1ba; --accent-subtle: rgb(241 95 85 / .2); }
:root[data-theme="dark"][data-accent="rose"] { --accent: #ff8bc5; --accent-strong: #ffc0df; --accent-subtle: rgb(237 78 157 / .2); }

/* Selection control fills per accent. Light: the accent, deepened slightly where a white thumb needs it. Dark: a mid tone instead of the pastel
   text accent, so white thumbs and checks keep contrast without a neon track. Amber keeps a dark glyph because white on yellow washes out. */
:root[data-accent="neutral"] { --control-on: oklch(23% 0 0); --control-thumb-on: oklch(100% 0 0); --control-glyph: oklch(100% 0 0); }
:root[data-accent="violet"] { --control-on: #7747ff; --control-thumb-on: #fff; --control-glyph: #fff; }
:root[data-accent="blue"] { --control-on: #0562ef; --control-thumb-on: #fff; --control-glyph: #fff; }
:root[data-accent="green"] { --control-on: #10a870; --control-thumb-on: #fff; --control-glyph: #fff; }
:root[data-accent="amber"] { --control-on: #eda11a; --control-thumb-on: #fff; --control-glyph: #2a1c03; }
:root[data-accent="orange"] { --control-on: #f07818; --control-thumb-on: #fff; --control-glyph: #fff; }
:root[data-accent="coral"] { --control-on: #ec564b; --control-thumb-on: #fff; --control-glyph: #fff; }
:root[data-accent="rose"] { --control-on: #e64494; --control-thumb-on: #fff; --control-glyph: #fff; }
:root[data-theme="dark"][data-accent="neutral"] { --control-on: oklch(93% 0 0); --control-thumb-on: oklch(19% 0 0); --control-glyph: oklch(19% 0 0); }
:root[data-theme="dark"][data-accent="violet"] { --control-on: #8a66ff; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #8a66ff; }
:root[data-theme="dark"][data-accent="blue"] { --control-on: #3b82f6; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #3b82f6; }
:root[data-theme="dark"][data-accent="green"] { --control-on: #1fae78; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #1fae78; }
:root[data-theme="dark"][data-accent="amber"] { --control-on: #e8a52a; --control-thumb-on: #fff; --control-glyph: #241803; --control-fill: #e8a52a; }
:root[data-theme="dark"][data-accent="orange"] { --control-on: #ef873a; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #ef873a; }
:root[data-theme="dark"][data-accent="coral"] { --control-on: #ec6a60; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #ec6a60; }
:root[data-theme="dark"][data-accent="rose"] { --control-on: #e457a0; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #e457a0; }

/* Chart series palette, shared by every chart. Series 1 is the accent itself; series 2 to 4 rotate its hue at lightness steps
   around it, so they stay distinct for every accent. A neutral accent falls back to a blue. Validated with the dataviz script
   across all eight accents in both themes: every pair (not only neighbours) clears CVD ΔE 9 and normal vision ΔE 17. Browsers
   without relative color get the neutral set. Override --series-1 to --series-4 on any element to rebrand a chart. */
:root { --series-1: #1f7dcf; --series-2: #7128a5; --series-3: #e58f00; --series-4: #009e84; }
:root[data-theme="dark"] { --series-1: #55adff; --series-2: #9c37be; --series-3: #e66e00; --series-4: #00a861; }
@supports (color: oklch(from red clamp(.4, l * sign(max(c - .02, 0)) + .5, .8) c h)) {
  :root {
    --series-1: oklch(from var(--accent) calc(l * sign(max(c - .02, 0)) + .58 * (1 - sign(max(c - .02, 0)))) calc(c * sign(max(c - .02, 0)) + .15 * (1 - sign(max(c - .02, 0)))) calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0)))));
    --series-2: oklch(from var(--accent) clamp(.45, l * sign(max(c - .02, 0)) + .58 * (1 - sign(max(c - .02, 0))) - 0.25, .76) .19 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 57));
    --series-3: oklch(from var(--accent) clamp(.45, l * sign(max(c - .02, 0)) + .58 * (1 - sign(max(c - .02, 0))) + 0.14, .76) .18 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 184));
    --series-4: oklch(from var(--accent) clamp(.45, l * sign(max(c - .02, 0)) + .58 * (1 - sign(max(c - .02, 0))), .76) .21 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 292));
  }
  :root[data-theme="dark"] {
    --series-1: oklch(from var(--accent) calc(l * sign(max(c - .02, 0)) + .73 * (1 - sign(max(c - .02, 0)))) calc(c * sign(max(c - .02, 0)) + .15 * (1 - sign(max(c - .02, 0)))) calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0)))));
    --series-2: oklch(from var(--accent) clamp(.485, l * sign(max(c - .02, 0)) + .73 * (1 - sign(max(c - .02, 0))) - 0.19, .665) .21 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 66));
    --series-3: oklch(from var(--accent) clamp(.485, l * sign(max(c - .02, 0)) + .73 * (1 - sign(max(c - .02, 0))) + 0.02, .665) .21 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 175));
    --series-4: oklch(from var(--accent) clamp(.485, l * sign(max(c - .02, 0)) + .73 * (1 - sign(max(c - .02, 0))) - 0.1, .665) .18 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 270));
  }
}

/* Focus. Pointer focus never draws a ring (product decision). Keyboard focus (:focus-visible) draws a subtle accent outline, so keyboard users
   can always see where they are (WCAG 2.4.7). Left out of the outline: text fields, which match :focus-visible on a mouse click too and show
   focus with their border and caret; menu items and listbox options, whose highlight fill marks the keyboard position; and tabindex="-1"
   targets (dialog panels, regions) that only receive focus from script.
   Tune it on :root or any element, no !important needed:
     --focus-outline           color (default: the accent, softened); set transparent to hide it
     --focus-outline-width     default 2px
     --focus-outline-offset    default 2px; components inside clipped containers set a negative offset */
:focus:not(:focus-visible),
:is(input:not([type="button"], [type="checkbox"], [type="color"], [type="file"], [type="image"], [type="radio"], [type="range"], [type="reset"], [type="submit"]), textarea, [contenteditable]:not([contenteditable="false"]), [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"], [tabindex="-1"]):focus { outline: none !important; }
:focus-visible:not(input:not([type="button"], [type="checkbox"], [type="color"], [type="file"], [type="image"], [type="radio"], [type="range"], [type="reset"], [type="submit"]), textarea, [contenteditable]:not([contenteditable="false"]), [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"], [tabindex="-1"]) {
  outline: var(--focus-outline-width, 2px) solid var(--focus-outline, color-mix(in oklab, var(--accent-strong) 72%, transparent)) !important;
  outline-offset: var(--focus-outline-offset, 2px) !important;
}