@import "tailwindcss";
@import "./strict-tokens.css";
@import "tw-animate-css";
@import "./typeset.css";
@import "./theme-accents.css";

/* The desktop example has its own install; never scan it for classes. */
@source not "../apps";

@custom-variant dark (&:is(.dark *));

/*
 * Visual direction: native desktop on the foundation set (since 2026-10-16).
 * Inter on a 13px UI scale, alpha greys from one 12-step scale (text, fills, borders), a blue
 * accent read through eight roles, four shadow levels and a 0.5rem radius with multiplier steps.
 * The role of each token is in the comments below.
 */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-hover: var(--primary-hover);
  --color-primary-active: var(--primary-active);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary-subtle: var(--primary-subtle);
  --color-primary-subtle-hover: var(--primary-subtle-hover);
  --color-primary-border: var(--primary-border);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-fg-tertiary: var(--fg-tertiary);
  --color-fg-disabled: var(--fg-disabled);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-hover: var(--destructive-hover);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-destructive-subtle: var(--destructive-subtle);
  --color-destructive-border: var(--destructive-border);
  --color-success: var(--success);
  --color-success-hover: var(--success-hover);
  --color-success-foreground: var(--success-foreground);
  --color-success-subtle: var(--success-subtle);
  --color-success-border: var(--success-border);
  --color-warning: var(--warning);
  --color-warning-hover: var(--warning-hover);
  --color-warning-foreground: var(--warning-foreground);
  --color-warning-subtle: var(--warning-subtle);
  --color-warning-border: var(--warning-border);
  --color-surface-sunken: var(--surface-sunken);
  --color-surface-standout: var(--surface-standout);
  --color-standout-foreground: var(--standout-foreground);
  --color-border: var(--border);
  --color-border-subtle: var(--border-subtle);
  --color-border-strong: var(--border-strong);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-code: var(--code);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-chart-6: var(--chart-6);
  --color-chart-7: var(--chart-7);
  --color-chart-8: var(--chart-8);
  /* App chrome: the window band/sidebar tone and the hairline of the inset content panel. */
  --color-shell: var(--shell);
  --color-shell-border: var(--shell-border);

  /* Inter for UI text, JetBrains Mono for code, Newsreader for reading, each with a CJK face behind it; all fall back to system faces when the fonts are not installed. */
  --font-sans:
    "Inter Variable", "Inter", "Noto Sans SC Variable", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, "PingFang SC", "Microsoft YaHei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --font-sans--font-feature-settings: "ss03";
  --font-mono:
    "JetBrains Mono Variable", "JetBrains Mono", "Noto Sans SC Variable", ui-monospace, "SF Mono", "SFMono-Regular",
    Menlo, Consolas, "Liberation Mono", monospace;
  --font-mono--font-feature-settings: normal;
  --font-serif:
    "Newsreader Variable", "Newsreader", "Noto Serif SC Variable", "Noto Serif SC", ui-serif, Georgia, "Songti SC",
    "SimSun", serif;

  /*
   * Every radius is a multiple of --radius (0.5rem): xs 2, sm 4, md 6, lg 8, xl 10, 2xl 12, 3xl 16px, and none goes
   * past --radius-max (16px): larger corners read as pills on controls and break nested parts. 4xl and 5xl stay as
   * names for old code and sit at the cap from the default radius up.
   */
  --radius-2xs: min(calc(var(--radius) * 0.25), var(--radius-max));
  --radius-xs: min(calc(var(--radius) * 0.25), var(--radius-max));
  --radius-sm: min(calc(var(--radius) * 0.5), var(--radius-max));
  --radius-md: min(calc(var(--radius) * 0.75), var(--radius-max));
  --radius-lg: min(var(--radius), var(--radius-max));
  --radius-xl: min(calc(var(--radius) * 1.25), var(--radius-max));
  --radius-2xl: min(calc(var(--radius) * 1.5), var(--radius-max));
  --radius-3xl: min(calc(var(--radius) * 2), var(--radius-max));
  --radius-4xl: min(calc(var(--radius) * 2.5), var(--radius-max));
  --radius-5xl: min(calc(var(--radius) * 3), var(--radius-max));
  --radius-shell: min(calc(var(--radius) * 1.5), var(--radius-max));

  /* Shadow scale: xs a 1px ring, sm resting controls, md/lg floating menus, xl dialogs. */
  --shadow-xs: var(--shadow-border);
  --shadow-sm: var(--shadow-default);
  --shadow-md: var(--shadow-lg);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-border: var(--shadow-border);
  --shadow-default: var(--shadow-default);

  /* Named elevation used by the components; each reads the scale above. */
  --shadow-raised: var(--skeuo-raised);
  --shadow-raised-hover: var(--skeuo-raised-hover);
  --shadow-pressed: var(--skeuo-pressed);
  --shadow-primary: var(--skeuo-primary);
  --shadow-well: var(--skeuo-well);
  --shadow-surface: var(--skeuo-surface);
  --shadow-chip: var(--skeuo-chip);
}

/* Desktop type scale (text-ui is the default UI size, 13px) and the weight scale. */
@theme {
  --text-ui-2xs: 0.625rem;
  --text-ui-2xs--line-height: 0.875rem;
  --text-ui-xs: 0.6875rem;
  --text-ui-xs--line-height: 0.875rem;
  --text-ui-sm: 0.75rem;
  --text-ui-sm--line-height: 1rem;
  --text-ui: 0.8125rem;
  --text-ui--line-height: 1.125rem;
  --text-ui-lg: 0.875rem;
  --text-ui-lg--line-height: 1.25rem;
  --font-weight-normal: 400;
  --font-weight-semimedium: 450;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

:root {
  --radius: 0.5rem;
  /* The largest radius any token reaches, whatever --radius is (the Customize slider stops at 1rem). */
  --radius-max: 1rem;

  /* Surfaces: page, container (card) and modal (popover), opaque. */
  --background: #fff;
  --card: #fff;
  --popover: #fff;
  /* Sunken wells, and the inverted standout surface (dark callouts, toasts). */
  --surface-sunken: #0000000d;
  --surface-standout: #202020;
  --standout-foreground: #fff;
  /* Text: primary gray a12, secondary a11, tertiary a9, disabled a8. All translucent, so they sit on any surface. */
  --foreground: #000000df;
  --card-foreground: #000000df;
  --popover-foreground: #000000df;
  --muted-foreground: #0000009b;
  --fg-tertiary: #00000072;
  --fg-disabled: #0004;
  /* Accent (blue): solid 9, hover 10, active 11, subtle a3 / a4, border a6, focus ring a8 (a9 in dark). Presets swap these eight. */
  --primary: #0090ff;
  --primary-hover: #0588f0;
  --primary-active: #0d74ce;
  --primary-foreground: #fff;
  --primary-subtle: #008ff519;
  --primary-subtle-hover: #009eff2a;
  --primary-border: #0088f653;
  --ring: #0084e6a1;
  /* Fills, translucent: component default a3 (secondary, muted), hover a4 (accent). Never surfaces. */
  --secondary: #0000000f;
  --secondary-foreground: #000000df;
  --muted: #0000000f;
  --accent: #00000017;
  --accent-foreground: #000000df;
  /* State: danger, positive and warning scales, each solid 9 / hover 10 / subtle a3 / border a6. */
  --destructive: #e54d2e;
  --destructive-hover: #dd4425;
  --destructive-foreground: #fffcfc;
  --destructive-subtle: #f52b0018;
  --destructive-border: #f92d0050;
  --success: #30a46c;
  --success-hover: #2b9a66;
  --success-foreground: #fbfefc;
  --success-subtle: #00a43319;
  --success-border: #00963c52;
  --warning: #f76b15;
  --warning-hover: #ef5f00;
  --warning-foreground: #fefcfb;
  --warning-subtle: #ff9c0029;
  --warning-border: #ff81007d;
  /* Borders: one edge role, a4, for dividers, field and outline-button rings and the raised ring; subtle a2, strong a6 (hover, emphasis). input = border. */
  --border: #00000017;
  --border-subtle: #00000006;
  --border-strong: #00000026;
  --input: #00000017;
  /* Charts: chart-1…8 = blue, orange, violet, green, pink, amber, cyan, gray, step 9 (light orange 10, amber 11 for 3:1 on white). Never follow the accent. */
  --chart-1: #0090ff;
  --chart-2: #ef5f00;
  --chart-3: #6e56cf;
  --chart-4: #30a46c;
  --chart-5: #d6409f;
  --chart-6: #ab6400;
  --chart-7: #00a2c7;
  --chart-8: #8d8d8d;
  /* Code well gray 2; scrollbar thumb a6 → a8. */
  --code: #f9f9f9;
  --scrollbar: #00000026;
  --scrollbar-hover: #0004;
  /* Shell band (window chrome, rail sidebar) and the inset panel hairline. */
  --shell: oklch(97.3% 0 0);
  --shell-border: oklch(0% 0 0 / 10%);

  /* Shadow scale: border ring, default (resting), lg (menus, popovers), xl (dialogs). */
  --shadow-border: 0 0 0 1px #00000017;
  --shadow-default: 0 0 0 0.5px #0000 inset, 0 0 0 1px #00000017, 0 1px 1px -1px #0000001a, 0 1px 2px 0 #0000000d;
  --shadow-lg: 0 0 0 0.5px #0000000f, 0 2px 3px -2px #0000000f, 0 3px 12px -4px #0000001a, 0 4px 16px -8px #0000000d;
  --shadow-xl: 0 0 0 0.5px #0000 inset, 0 0 0 0.5px #0000000f, 0 8px 40px 0 #0000000d, 0 12px 32px -16px #00000026;
  /* Named elevation (components use these), restated in .dark so they resolve per mode. */
  --skeuo-raised: var(--shadow-default);
  --skeuo-raised-hover: 0 0 0 0.5px #0000 inset, 0 0 0 1px #00000026, 0 1px 1px -1px #0000001a, 0 1px 2px 0 #0000000d;
  --skeuo-pressed: var(--shadow-border);
  --skeuo-primary: 0 1px 2px #0000000d;
  --skeuo-well: inset 0 0 0 1px var(--input);
  --skeuo-surface: var(--shadow-lg);
  --skeuo-chip: var(--shadow-border);
}

.dark {
  /* Surfaces: page, container (card) and modal (popover), opaque. */
  --background: oklch(15% 0 0);
  --card: #111;
  --popover: oklch(25.2% 0 0);
  /* Sunken wells, and the inverted standout surface (dark callouts, toasts). */
  --surface-sunken: #0006;
  --surface-standout: #222;
  --standout-foreground: #ffffffed;
  /* Text: primary gray a12, secondary a11, tertiary a9, disabled a8. All translucent, so they sit on any surface. */
  --foreground: #ffffffed;
  --card-foreground: #ffffffed;
  --popover-foreground: #ffffffed;
  --muted-foreground: #ffffffaf;
  --fg-tertiary: #ffffff64;
  --fg-disabled: #fff5;
  /* Accent (blue): solid 9, hover 10, active 11, subtle a3 / a4, border a6, focus ring a8 (a9 in dark). Presets swap these eight. */
  --primary: #0090ff;
  --primary-hover: #3b9eff;
  --primary-active: #70b8ff;
  --primary-foreground: #fff;
  --primary-subtle: #0077ff3a;
  --primary-subtle-hover: #0075ff57;
  --primary-border: #0f89fd7f;
  --ring: #0090ff;
  /* Fills, translucent: component default a3 (secondary, muted), hover a4 (accent). Never surfaces. */
  --secondary: #ffffff12;
  --secondary-foreground: #ffffffed;
  --muted: #ffffff12;
  --accent: #ffffff1b;
  --accent-foreground: #ffffffed;
  /* State: danger, positive and warning scales, each solid 9 / hover 10 / subtle a3 / border a6. */
  --destructive: #e54d2e;
  --destructive-hover: #ec6142;
  --destructive-foreground: #fff;
  --destructive-subtle: #ff35232b;
  --destructive-border: #ff4f3864;
  --success: #30a46c;
  --success-hover: #33b074;
  --success-foreground: #fff;
  --success-subtle: #22ff991e;
  --success-border: #44ffaa4b;
  --warning: #f76b15;
  --warning-hover: #ff801f;
  --warning-foreground: #fff;
  --warning-subtle: #fb6a0025;
  --warning-border: #fd75045c;
  /* Borders: one edge role, a4, for dividers, field and outline-button rings and the raised ring; subtle a2, strong a6 (hover, emphasis). input = border. */
  --border: #ffffff1b;
  --border-subtle: #ffffff09;
  --border-strong: #ffffff2c;
  --input: #ffffff1b;
  /* Charts: chart-1…8 = blue, orange, violet, green, pink, amber, cyan, gray, step 9 (light orange 10, amber 11 for 3:1 on white). Never follow the accent. */
  --chart-1: #0090ff;
  --chart-2: #f76b15;
  --chart-3: #6e56cf;
  --chart-4: #30a46c;
  --chart-5: #d6409f;
  --chart-6: #ffc53d;
  --chart-7: #00a2c7;
  --chart-8: #6e6e6e;
  /* Code well gray 2; scrollbar thumb a6 → a8. */
  --code: #191919;
  --scrollbar: #ffffff2c;
  --scrollbar-hover: #fff5;
  /* Shell band (window chrome, rail sidebar) and the inset panel hairline. */
  --shell: #000;
  --shell-border: oklch(100% 0 0 / 9%);

  /* Shadow scale: border ring, default (resting), lg (menus, popovers), xl (dialogs). */
  --shadow-border: 0 0 0 1px #ffffff1b;
  --shadow-default: 0 0 0 1px #ffffff1b inset, 0 0 0 1px #0000, 0 1px 1px -1px #0000, 0 1px 2px 0 #0000;
  --shadow-lg: 0 0 0 1px #ffffff2c, 0 2px 3px -2px #00000026, 0 3px 8px -2px #0006, 0 4px 12px -4px #00000080;
  --shadow-xl: 0 0 0 0.5px #ffffff12 inset, 0 0 0 0.5px #0000, 0 8px 40px 0 #0000000d, 0 12px 32px -16px #00000026;
  /* Named elevation (components use these), restated in .dark so they resolve per mode. */
  --skeuo-raised: var(--shadow-default);
  --skeuo-raised-hover: 0 0 0 1px #ffffff2c inset, 0 0 0 1px #0000, 0 1px 1px -1px #0000, 0 1px 2px 0 #0000;
  --skeuo-pressed: var(--shadow-border);
  --skeuo-primary: 0 0 0 0 transparent;
  --skeuo-well: inset 0 0 0 1px var(--input);
  --skeuo-surface: var(--shadow-lg);
  --skeuo-chip: var(--shadow-border);
}

/* Wide-gamut displays get the same scales in display-p3 (accent, state and chart colours; greys are identical). */
@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --primary: color(display-p3 .247 .556 .969);
      --primary-hover: color(display-p3 .234 .523 .912);
      --primary-active: color(display-p3 .15 .44 .84);
      --primary-foreground: #fff;
      --primary-subtle: color(display-p3 .012 .506 .914/.087);
      --primary-subtle-hover: color(display-p3 .008 .545 1/.146);
      --primary-border: color(display-p3 .004 .463 .922/.291);
      --ring: color(display-p3 0 .427 .851/.55);
      --destructive: color(display-p3 .831 .345 .231);
      --destructive-hover: color(display-p3 .802 .313 .2);
      --destructive-foreground: color(display-p3 .998 .989 .988);
      --destructive-subtle: color(display-p3 .831 .184 .012/.091);
      --destructive-border: color(display-p3 .847 .173 .004/.302);
      --success: color(display-p3 .332 .634 .442);
      --success-hover: color(display-p3 .308 .595 .417);
      --success-foreground: color(display-p3 .986 .996 .989);
      --success-subtle: color(display-p3 .012 .596 .145/.087);
      --success-border: color(display-p3 .004 .518 .157/.283);
      --warning: color(display-p3 .9 .45 .2);
      --warning-hover: color(display-p3 .87 .409 .164);
      --warning-foreground: color(display-p3 .995 .988 .985);
      --warning-subtle: color(display-p3 .922 .584 .008/.15);
      --warning-border: color(display-p3 .949 .494 .004/.455);
      --chart-1: color(display-p3 .247 .556 .969);
      --chart-2: color(display-p3 .87 .409 .164);
      --chart-3: color(display-p3 .417 .341 .784);
      --chart-4: color(display-p3 .332 .634 .442);
      --chart-5: color(display-p3 .775 .297 .61);
      --chart-6: color(display-p3 .64 .4 0);
      --chart-7: color(display-p3 .282 .627 .765);
      --chart-8: color(display-p3 .553 .553 .553);
    }
    .dark {
      --primary: color(display-p3 .247 .556 .969);
      --primary-hover: color(display-p3 .344 .612 .973);
      --primary-active: color(display-p3 .49 .72 1);
      --primary-foreground: #fff;
      --primary-subtle: color(display-p3 .122 .463 1/.219);
      --primary-subtle-hover: color(display-p3 0 .467 1/.324);
      --primary-border: color(display-p3 .224 .557 1/.475);
      --ring: color(display-p3 .251 .573 .996/.967);
      --destructive: color(display-p3 .831 .345 .231);
      --destructive-hover: color(display-p3 .862 .415 .298);
      --destructive-foreground: #fff;
      --destructive-subtle: color(display-p3 .996 .282 .176/.148);
      --destructive-border: color(display-p3 1 .392 .278/.353);
      --success: color(display-p3 .332 .634 .442);
      --success-hover: color(display-p3 .357 .682 .474);
      --success-foreground: #fff;
      --success-subtle: color(display-p3 .376 .996 .655/.114);
      --success-border: color(display-p3 .475 1 .706/.29);
      --warning: color(display-p3 .9 .45 .2);
      --warning-hover: color(display-p3 .98 .51 .23);
      --warning-foreground: #fff;
      --warning-subtle: color(display-p3 .996 .486 0/.131);
      --warning-border: color(display-p3 1 .529 .129/.332);
      --chart-1: color(display-p3 .247 .556 .969);
      --chart-2: color(display-p3 .9 .45 .2);
      --chart-3: color(display-p3 .417 .341 .784);
      --chart-4: color(display-p3 .332 .634 .442);
      --chart-5: color(display-p3 .775 .297 .61);
      --chart-6: color(display-p3 1 .77 .26);
      --chart-7: color(display-p3 .282 .627 .765);
      --chart-8: color(display-p3 .431 .431 .431);
    }
  }
}

/* The lg ring mixes toward the step-3 grey where color-mix is supported. */
@supports (color: color-mix(in oklab, red, red)) {
  :root {
    --shadow-lg: 0 0 0 0.5px color-mix(in oklab, #0000000f, #f0f0f0 25%), 0 2px 3px -2px #0000000f, 0 3px 12px -4px #0000001a, 0 4px 16px -8px #0000000d;
  }
  .dark {
    --shadow-lg: 0 0 0 1px color-mix(in oklab, #ffffff12, #3a3a3a 25%), 0 2px 3px -2px #00000026, 0 3px 8px -2px #0006, 0 4px 12px -4px #00000080;
  }
}

/*
 * Radius presets: `data-radius` on <html> swaps the one base value every radius token multiplies
 * (default, no attribute, is 0.5rem). A custom value is set inline as `--radius` on <html> (0 to 1rem); every
 * token stops at --radius-max (16px), so a larger value only makes controls rounder up to that cap.
 */
html[data-radius="none"] {
  --radius: 0rem;
}
html[data-radius="sm"] {
  --radius: 0.375rem;
}
html[data-radius="lg"] {
  --radius: 0.625rem;
}
html[data-radius="xl"] {
  --radius: 0.875rem;
}

/*
 * Accent presets: `data-accent` on <html> swaps the eight accent roles (default, no attribute, is blue).
 * Each preset reads the same steps of its own scale: solid 9, hover 10, active 11, subtle a3 / a4,
 * border a6, ring a8 (a9 in dark). Neutral is the inverted black / white solid. The docs header
 * persists the pick in localStorage["accent"]; registry items theme-<name> ship the same values.
 */
html[data-accent="neutral"] {
  --primary: #000000f2;
  --primary-hover: #000c;
  --primary-active: #000000b3;
  --primary-foreground: #fff;
  --primary-subtle: #0000000f;
  --primary-subtle-hover: #00000017;
  --primary-border: #00000026;
  --ring: #0004;
}
html[data-accent="neutral"].dark {
  --primary: #fffffff2;
  --primary-hover: #fffc;
  --primary-active: #ffffffb3;
  --primary-foreground: #000;
  --primary-subtle: #ffffff12;
  --primary-subtle-hover: #ffffff1b;
  --primary-border: #ffffff2c;
  --ring: #fff5;
}
html[data-accent="green"] {
  --primary: #30a46c;
  --primary-hover: #2b9a66;
  --primary-active: #218358;
  --primary-foreground: #fff;
  --primary-subtle: #00a43319;
  --primary-subtle-hover: #00a83829;
  --primary-border: #00963c52;
  --ring: #00924ba4;
}
html[data-accent="green"].dark {
  --primary: #30a46c;
  --primary-hover: #33b074;
  --primary-active: #3dd68c;
  --primary-foreground: #fff;
  --primary-subtle: #22ff991e;
  --primary-subtle-hover: #11ff992d;
  --primary-border: #44ffaa4b;
  --ring: #44ffa49e;
}
html[data-accent="orange"] {
  --primary: #f76b15;
  --primary-hover: #ef5f00;
  --primary-active: #cc4e00;
  --primary-foreground: #fff;
  --primary-subtle: #ff9c0029;
  --primary-subtle-hover: #ff91014a;
  --primary-border: #ff81007d;
  --ring: #e35f00aa;
}
html[data-accent="orange"].dark {
  --primary: #f76b15;
  --primary-hover: #ff801f;
  --primary-active: #ffa057;
  --primary-foreground: #fff;
  --primary-subtle: #fb6a0025;
  --primary-subtle-hover: #ff590039;
  --primary-border: #fd75045c;
  --ring: #fe6d15f7;
}
html[data-accent="rose"] {
  --primary: #e93d82;
  --primary-hover: #df3478;
  --primary-active: #cb1d63;
  --primary-foreground: #fff;
  --primary-subtle: #ff005216;
  --primary-subtle-hover: #f8005123;
  --primary-border: #d0004b41;
  --ring: #b6004a6c;
}
html[data-accent="rose"].dark {
  --primary: #e93d82;
  --primary-hover: #ee518a;
  --primary-active: #ff92ad;
  --primary-foreground: #fff;
  --primary-subtle: #fe2a8b2a;
  --primary-subtle-hover: #fd158741;
  --primary-border: #fe459763;
  --ring: #fe418de8;
}
html[data-accent="violet"] {
  --primary: #6e56cf;
  --primary-hover: #654dc4;
  --primary-active: #6550b9;
  --primary-foreground: #fff;
  --primary-subtle: #4400ee0f;
  --primary-subtle-hover: #4300ff1b;
  --primary-border: #3100fb35;
  --ring: #2b00d066;
}
html[data-accent="violet"].dark {
  --primary: #6e56cf;
  --primary-hover: #7d66d9;
  --primary-active: #baa7ff;
  --primary-foreground: #fff;
  --primary-subtle: #8354fe36;
  --primary-subtle-hover: #7d51fd50;
  --primary-border: #8f6cfd6d;
  --ring: #8668ffcc;
}
@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    html[data-accent="green"] {
      --primary: color(display-p3 .332 .634 .442);
      --primary-hover: color(display-p3 .308 .595 .417);
      --primary-active: color(display-p3 .19 .5 .32);
      --primary-foreground: #fff;
      --primary-subtle: color(display-p3 .012 .596 .145/.087);
      --primary-subtle-hover: color(display-p3 .008 .588 .145/.142);
      --primary-border: color(display-p3 .004 .518 .157/.283);
      --ring: color(display-p3 0 .478 .2/.55);
    }
    html[data-accent="green"].dark {
      --primary: color(display-p3 .332 .634 .442);
      --primary-hover: color(display-p3 .357 .682 .474);
      --primary-active: color(display-p3 .434 .828 .573);
      --primary-foreground: #fff;
      --primary-subtle: color(display-p3 .376 .996 .655/.114);
      --primary-subtle-hover: color(display-p3 .341 .996 .635/.173);
      --primary-border: color(display-p3 .475 1 .706/.29);
      --ring: color(display-p3 .502 .996 .682/.61);
    }
    html[data-accent="orange"] {
      --primary: color(display-p3 .9 .45 .2);
      --primary-hover: color(display-p3 .87 .409 .164);
      --primary-active: color(display-p3 .76 .34 0);
      --primary-foreground: #fff;
      --primary-subtle: color(display-p3 .922 .584 .008/.15);
      --primary-subtle-hover: color(display-p3 1 .604 .004/.314);
      --primary-border: color(display-p3 .949 .494 .004/.455);
      --ring: color(display-p3 .804 .349 0/.62);
    }
    html[data-accent="orange"].dark {
      --primary: color(display-p3 .9 .45 .2);
      --primary-hover: color(display-p3 .98 .51 .23);
      --primary-active: color(display-p3 1 .63 .38);
      --primary-foreground: #fff;
      --primary-subtle: color(display-p3 .996 .486 0/.131);
      --primary-subtle-hover: color(display-p3 .996 .384 0/.211);
      --primary-border: color(display-p3 1 .529 .129/.332);
      --ring: color(display-p3 1 .494 .216/.895);
    }
    html[data-accent="rose"] {
      --primary: color(display-p3 .843 .298 .507);
      --primary-hover: color(display-p3 .807 .266 .468);
      --primary-active: color(display-p3 .731 .195 .388);
      --primary-foreground: #fff;
      --primary-subtle: color(display-p3 .859 .008 .294/.083);
      --primary-subtle-hover: color(display-p3 .827 .008 .298/.134);
      --primary-border: color(display-p3 .682 .004 .247/.244);
      --ring: color(display-p3 .6 .004 .251/.408);
    }
    html[data-accent="rose"].dark {
      --primary: color(display-p3 .843 .298 .507);
      --primary-hover: color(display-p3 .864 .364 .539);
      --primary-active: color(display-p3 1 .56 .66);
      --primary-foreground: #fff;
      --primary-subtle: color(display-p3 .996 .227 .573/.148);
      --primary-subtle-hover: color(display-p3 1 .157 .569/.227);
      --primary-border: color(display-p3 1 .337 .643/.349);
      --ring: color(display-p3 1 .345 .596/.832);
    }
    html[data-accent="violet"] {
      --primary: color(display-p3 .417 .341 .784);
      --primary-hover: color(display-p3 .381 .306 .741);
      --primary-active: color(display-p3 .383 .317 .702);
      --primary-foreground: #fff;
      --primary-subtle: color(display-p3 .204 .004 .871/.059);
      --primary-subtle-hover: color(display-p3 .196 .004 1/.102);
      --primary-border: color(display-p3 .153 .004 .906/.208);
      --ring: color(display-p3 .133 .004 .753/.397);
    }
    html[data-accent="violet"].dark {
      --primary: color(display-p3 .417 .341 .784);
      --primary-hover: color(display-p3 .477 .402 .823);
      --primary-active: color(display-p3 .72 .65 1);
      --primary-foreground: #fff;
      --primary-subtle: color(display-p3 .494 .337 .996/.202);
      --primary-subtle-hover: color(display-p3 .49 .345 1/.299);
      --primary-border: color(display-p3 .569 .455 1/.408);
      --ring: color(display-p3 .522 .424 1/.769);
    }
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  html {
    color-scheme: light;
    scrollbar-gutter: stable;
  }
  html.dark {
    color-scheme: dark;
  }
  body {
    @apply bg-background font-sans text-foreground antialiased;
    letter-spacing: normal;
  }
  /* Code faces never take the UI font's stylistic set. */
  code,
  kbd,
  pre,
  samp {
    font-feature-settings: normal;
  }

  /* Scrollbars: thin, rounded, token-colored pill thumb on a transparent track. */
  @supports not selector(::-webkit-scrollbar) {
    * {
      scrollbar-width: thin;
      scrollbar-color: var(--scrollbar) transparent;
    }
  }
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }
  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-corner {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 9999px;
    background-color: var(--scrollbar);
    background-clip: padding-box;
    min-height: 40px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-hover);
  }
  ::-webkit-scrollbar-thumb:active {
    border-width: 2px;
  }
}

/* Slimmer bars for inner panels (code blocks, lists). */
@utility scrollbar-thin {
  scrollbar-width: thin;
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
}

/* Thumb only appears while the pointer is over the area (sidebars, popups). */
@utility scrollbar-hover {
  scrollbar-color: transparent transparent;
  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
  &:hover {
    scrollbar-color: var(--scrollbar) transparent;
  }
  &:hover::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar);
  }
  &:hover::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-hover);
  }
}

@utility scrollbar-none {
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

/*
 * Rail layout: the window band and sidebar sit on `bg-shell`; the content is an inset panel
 * with a 0.5px hairline (one device pixel on Retina), a 1.5x radius and a 3px gap to the
 * window's right and bottom edges.
 */
@utility shell-inset {
  background-color: var(--background);
  border: 0.5px solid var(--shell-border);
  border-radius: var(--radius-shell);
  margin-inline-end: 3px;
  margin-bottom: 3px;
}

/* Desktop shells: an area that drags the window, and controls inside it that stay clickable. No effect in a browser. */
@utility window-drag {
  -webkit-app-region: drag;
  user-select: none;
}

@utility window-no-drag {
  -webkit-app-region: no-drag;
}

/*
 * Hairline on images and video: pure black (white in dark) at 10%, inset so it adds no size.
 * A neutral edge, never a palette grey, so it reads the same on any surface behind the image.
 */
@utility media-outline {
  outline: 1px solid oklch(0 0 0 / 0.1);
  outline-offset: -1px;
  &:is(.dark *) {
    outline-color: oklch(1 0 0 / 0.1);
  }
}

/*
 * Icon stroke tier: line icons inside take 1.2x their style's stroke, to match semibold or bold text
 * beside them (rounded 1.75 -> 2.1, outline 1.6 -> 1.92). icon-regular resets it inside a bold area.
 */
@utility icon-bold {
  --icon-stroke-scale: 1.2;
}

@utility icon-regular {
  --icon-stroke-scale: 1;
}

/* Sticky top edge for a shell-inset panel that scrolls with the page (docs shell). */
@utility shell-cap {
  border-top-left-radius: var(--radius-shell);
  border-top-right-radius: var(--radius-shell);
}

/*
 * ───────────── Concentric radii: frame-* + rounded-inner ─────────────
 *
 * A rounded element inside a rounded, padded container must use the container's radius minus
 * the inset (inner = outer − padding − border), or the corners visibly drift apart.
 * Instead of computing that by hand in every component:
 *
 *   <div class="frame-2xl frame-p-1">         radius 2xl (12px), padding 4px
 *     <button class="rounded-inner">…</button>   → 12 − 4 = 8px
 *   </div>
 *
 *   frame-{sm…5xl|shell|[len]}  the container: sets its border-radius and publishes the radius
 *                               its children should use (--frame-inner-1).
 *   frame-p-{n|[len]}           padding on all sides AND the inset used in the calculation.
 *   frame-inset-{n|[len]}       only the inset (when the gap comes from px/py, a gap, or a
 *                               wrapper): the frame's own padding is left alone.
 *   frame-border                add the frame's 1px border to the inset.
 *   rounded-inner               a child: border-radius = frame radius − inset (min 2px, never above the frame).
 *   rounded-{t,b,s,e}-inner     the same for one side (first/last rows, segmented ends).
 *   frame-inner                 a child that is itself a padded frame (second level): gets
 *                               rounded-inner and publishes its own inner radius, so its
 *                               children use rounded-inner too. Combine with frame-p-*.
 *
 * Two levels deep (frame → frame-inner → rounded-inner) is supported; beyond that, compute the
 * value explicitly. `frame-xl` on an element that has no children to fit is just `rounded-xl`.
 * Every element resets the inputs (in the base layer, under every utility), so a frame never picks up
 * an ancestor's padding. A plain rule rather than @property, so reinstalling the theme stays idempotent.
 */
@layer base {
  *, ::before, ::after {
    --frame-r: 0px;
    --frame-p: 0px;
    --frame-b: 0px;
  }
}

@utility frame-* {
  --frame-r: --value(--radius-*, [length]);
  border-radius: --value(--radius-*, [length]);
  --frame-inner-1: max(calc(var(--frame-r) - var(--frame-p) - var(--frame-b)), min(2px, var(--frame-r)));
  /* A fresh frame starts a new chain, even inside a frame-inner. */
  --frame-inner-2: initial;
}

@utility frame-p-* {
  --frame-p: --spacing(--value(integer, number));
  padding: --spacing(--value(integer, number));
  --frame-p: --value([length]);
  padding: --value([length]);
}

@utility frame-inset-* {
  --frame-p: --spacing(--value(integer, number));
  --frame-p: --value([length]);
}

@utility frame-border {
  --frame-b: 1px;
}

@utility rounded-inner {
  border-radius: var(--frame-inner-2, var(--frame-inner-1, var(--radius-lg)));
}
@utility rounded-t-inner {
  border-top-left-radius: var(--frame-inner-2, var(--frame-inner-1, var(--radius-lg)));
  border-top-right-radius: var(--frame-inner-2, var(--frame-inner-1, var(--radius-lg)));
}
@utility rounded-b-inner {
  border-bottom-left-radius: var(--frame-inner-2, var(--frame-inner-1, var(--radius-lg)));
  border-bottom-right-radius: var(--frame-inner-2, var(--frame-inner-1, var(--radius-lg)));
}
@utility rounded-s-inner {
  border-start-start-radius: var(--frame-inner-2, var(--frame-inner-1, var(--radius-lg)));
  border-end-start-radius: var(--frame-inner-2, var(--frame-inner-1, var(--radius-lg)));
}
@utility rounded-e-inner {
  border-start-end-radius: var(--frame-inner-2, var(--frame-inner-1, var(--radius-lg)));
  border-end-end-radius: var(--frame-inner-2, var(--frame-inner-1, var(--radius-lg)));
}

/*
 * rounded-inner-{token}: rounded-inner for a part whose own radius is not rounded-lg (a 6px row, a 4px
 * tree row): concentric inside a frame, the token outside one.
 * rounded-inner-or-{token}: a child whose inset can be too large for concentric (a key cap or a
 * mark 8px into an 8px button): the frame's inner radius where it is usable, otherwise the token
 * capped at rounded-sm, so it never ends up rounder than the corner it sits in.
 */
@utility rounded-inner-* {
  border-radius: var(--frame-inner-2, var(--frame-inner-1, --value(--radius-*)));
}
@utility rounded-inner-or-* {
  border-radius: max(var(--frame-inner-2, var(--frame-inner-1, 0px)), min(--value(--radius-*), var(--radius-sm)));
}

/* Second level: its own radius is the parent's inner radius; it publishes the next one. */
@utility frame-inner {
  --frame-r: var(--frame-inner-1, var(--radius-lg));
  border-radius: var(--frame-inner-1, var(--radius-lg));
  --frame-inner-2: max(calc(var(--frame-r) - var(--frame-p) - var(--frame-b)), min(2px, var(--frame-r)));
}

/* Dual-theme syntax highlighting (defaultColor: false). */
.shiki,
.shiki span {
  color: var(--shiki-light);
}
.dark .shiki,
.dark .shiki span {
  color: var(--shiki-dark);
}

/* ───────────── Reading: container widths + long-form typography ───────────── */

/* Hairline drawn inside content images: pure black/white so it never tints the edge. */
:root {
  --image-outline: oklch(0 0 0 / 0.1);
}
.dark {
  --image-outline: oklch(1 0 0 / 0.1);
}

@theme {
  /* max-w-reading: comfortable measure for articles; max-w-page: site content column. */
  --container-reading: 68ch;
  --container-page: 76rem;
}