.quartz {
  --ink-c: 20% 0.024 262;
  --paper-c: 99.7% 0.001 250;
  --grey-c: 95.6% 0.004 255;
  --canvas-c: 99.1% 0.002 250;
  --text-on-field-c: 20% 0.024 262;
  --shadow-alpha: 0.20;
  --hue-1-mark: oklch(86% 0.120 195);
  --hue-1-field: oklch(92% 0.090 195);
  --hue-1-wash: oklch(96.5% 0.040 195);
  --hue-1-line: oklch(60% 0.100 195);
  --hue-1-tint: oklch(89% 0.050 195);
  --hue-1-label: oklch(38% 0.062 195);
  --hue-2-mark: oklch(82% 0.080 320);
  --hue-2-field: oklch(90% 0.060 320);
  --hue-2-wash: oklch(96% 0.030 320);
  --hue-2-line: oklch(58% 0.075 320);
  --hue-2-tint: oklch(89% 0.050 320);
  --hue-2-label: oklch(38% 0.062 320);
  --hue-3-mark: oklch(72% 0.100 250);
  --hue-3-field: oklch(82% 0.060 250);
  --hue-3-wash: oklch(94.5% 0.020 250);
  --hue-3-line: oklch(52% 0.150 250);
  --hue-3-tint: oklch(89% 0.050 250);
  --hue-3-label: oklch(38% 0.062 250);
  --hue-4-mark: oklch(72% 0.110 290);
  --hue-4-field: oklch(83% 0.065 290);
  --hue-4-wash: oklch(95% 0.025 290);
  --hue-4-line: oklch(54% 0.150 290);
  --hue-4-tint: oklch(89% 0.050 290);
  --hue-4-label: oklch(38% 0.062 290);
  --hue-5-mark: oklch(75% 0.100 160);
  --hue-5-field: oklch(90% 0.070 160);
  --hue-5-wash: oklch(96% 0.035 160);
  --hue-5-line: oklch(52% 0.090 160);
  --hue-5-tint: oklch(89% 0.050 160);
  --hue-5-label: oklch(38% 0.062 160);
  --warn-mark: oklch(80% 0.152 68);
  --warn-field: oklch(89% 0.056 68);
  --warn-wash: oklch(96% 0.028 68);
  --warn-line: oklch(62% 0.132 68);
  --fail-mark: oklch(65.2% 0.219 26);
  --fail-field: oklch(82% 0.055 26);
  --fail-wash: oklch(94.5% 0.027 26);
  --fail-line: oklch(60% 0.236 26);
  --warn-text: oklch(49% 0.100 68);
  --fail-text: oklch(51% 0.180 26);
  --font-sans: "Quartz Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Quartz Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --weight-body: 340;
  --weight-medium: 400;
  --weight-strong: 500;
  --width-normal: normal;
  --features-data: "tnum", "zero", "ss04";
  --features-id: "ss04";
  --type-display-xl: 400 80px/80px var(--font-sans);
  --type-display-lg: 400 60px/66px var(--font-sans);
  --type-display: 400 40px/44px var(--font-sans);
  --type-heading-lg: 400 32px/36px var(--font-sans);
  --type-heading: 400 24px/28px var(--font-sans);
  --type-heading-sm: 400 20px/24px var(--font-sans);
  --type-heading-xs: 400 16px/20px var(--font-sans);
  --type-body-lg: 340 16px/22px var(--font-sans);
  --type-body: 340 14px/20px var(--font-sans);
  --type-body-sm: 380 13px/18px var(--font-sans);
  --type-button: 400 16px/20px var(--font-sans);
  --type-label: 400 14px/16px var(--font-sans);
  --type-label-sm: 400 12px/16px var(--font-sans);
  --type-code: 400 13px/20px var(--font-mono);
  --type-code-sm: 400 12px/16px var(--font-mono);
  --type-tag: var(--type-code-sm);
  --type-code-display: 400 32px/36px var(--font-mono);
  --type-code-touch: 400 16px/22px var(--font-mono);
  --type-stat-xl: 400 48px/52px var(--font-sans);
  --type-stat-lg: 400 40px/44px var(--font-sans);
  --type-stat: 400 32px/36px var(--font-sans);
  --type-state-word: 400 14px/16px var(--font-sans);
  --tracking-display: -0.025em;
  --tracking-heading: -0.015em;
  --tracking-body: -0.01em;
  --tracking-text: 0em;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-15: 60px;
  --space-20: 80px;
  --space-30: 120px;
  --container: 1120px;
  --sidebar: 248px;
  --toc: 200px;
  --topbar: 56px;
  --gutter: 24px;
  --gutter-sm: 16px;
  --control-xs: 24px;
  --control-sm: 28px;
  --control: 32px;
  --tag: 20px;
  --control-lg: 44px;
  --overlay-sm: 400px;
  --overlay: 480px;
  --overlay-lg: 640px;
  --popover: 288px;
  --toast-width: 384px;
  --popover-sm: 256px;
  --tooltip-max: 256px;
  --hint-width: 420px;
  --menu-min: 192px;
  --popup-max: 320px;
  --menu-width: 320px;
  --field-max-height: calc(var(--control-lg) * 4);
  --row-sm: 32px;
  --row: 40px;
  --row-lg: 56px;
  --label-column: 160px;
  --measure: 68ch;
  --tab-max: 220px;
  --sidebar-icon: calc(var(--control) + var(--space-4));
  --attachment-media: 40px;
  --attachment-max: 256px;
  --grab-size: 40px;
  --fade-edge: 24px;
  --fade-line-end: 16px;
  --measure-hint: 60ch;
  --measure-short: 48ch;
  --page-header-max: 720px;
  --search-min: 200px;
  --search-max: 320px;
  --crumb-floor: 8ch;
  --log-level: 5ch;
  --status-column: 128px;
  --timeline-name: 200px;
  --timeline-name-min: 120px;
  --timeline-label-min: 10ch;
  --time-column: 12ch;
  --stat-placeholder: 4ch;
  --tool-detail-min: 6ch;
  --line-box: 1lh;
  --skeleton-text: 0.7em;
  --code-inline: 0.9em;
  --radius-0: 0px;
  --radius-inner: 4px;
  --radius-soft: 6px;
  --radius-frame: 10px;
  --radius-full: 999px;
  --line-hair: 1px;
  --line-accent: 2px;
  --line-focus: 2px;
  --focus-offset: 2px;
  --line-frame-alpha: 0.14;
  --mark-size: 8px;
  --ring-cutout: 2px;
  --chart-dash: 6 4;
  --chart-axis-gap: 8px;
  --dur-press: 60ms;
  --dur-fast: 120ms;
  --dur-base: 160ms;
  --dur-slow: 180ms;
  --dur-spin: 800ms;
  --dur-run: 1000ms;
  --dur-slide: 1200ms;
  --ease-spin: linear;
  --thumb-lift: 0%;
  --thumb-ring-alpha: 0;
  --skeleton-step: 0%;
  --dur-skeleton-delay: 150ms;
  --dur-skeleton-hold: 400ms;
  --toast-read-base: 3000ms;
  --toast-read-char: 60ms;
  --toast-read-action: 3000ms;
  --toast-read-min: 4000ms;
  --toast-read-max: 12000ms;
  --scale-press: 0.98;
  --ease-step: cubic-bezier(0.2, 0, 0, 1);
  --sheet-shift: 8px;
  --z-raised: 10;
  --z-above: 20;
  --z-cover: 30;
  --z-drop: 40;
  --z-overlay: 50;
  --code-string-alpha: 0.80;
  --code-comment-alpha: 0.66;
}
.quartz, .quartz [data-surface] {
  --ink: oklch(var(--ink-c));
  --paper: oklch(var(--paper-c));
  --surface-canvas: oklch(var(--canvas-c));
  --surface-page: var(--paper);
  --surface-card: oklch(var(--grey-c));
  --surface-frame: color-mix(in oklch, var(--surface-card) 55%, var(--paper));
  --surface-raised: var(--paper);
  --surface-hover: oklch(var(--ink-c) / 0.05);
  --surface-selected: oklch(var(--ink-c) / 0.09);
  --surface-pressed: oklch(var(--ink-c) / 0.08);
  --surface-inverse: var(--ink);
  --surface-tile: oklch(var(--ink-c) / 0.08);
  --surface-overlay: oklch(var(--ink-c) / 0.24);
  --text-1: var(--ink);
  --text-2: oklch(var(--ink-c) / 0.80);
  --text-3: oklch(var(--ink-c) / 0.66);
  --text-disabled: oklch(var(--ink-c) / 0.40);
  --text-inverse: var(--paper);
  --text-on-field: oklch(var(--text-on-field-c));
  --border-hair: oklch(var(--ink-c) / 0.08);
  --border-faint: oklch(var(--ink-c) / 0.05);
  --border-strong: oklch(var(--ink-c) / 0.12);
  --border-control: oklch(var(--ink-c) / 0.50);
  --border-focus: var(--ink);
  --line-frame: oklch(var(--ink-c) / var(--line-frame-alpha));
  --line-row: oklch(var(--ink-c) / 0.08);
  --line-control: oklch(var(--ink-c) / 0.16);
  --line-control-hover: oklch(var(--ink-c) / 0.32);
  --scrollbar-thumb: oklch(var(--ink-c) / 0.20);
  --surface-thumb: color-mix(in oklch, var(--paper), oklch(var(--ink-c)) var(--thumb-lift));
  --focus-halo: 0 0 0 3px oklch(var(--ink-c) / 0.08);
  --elev-control: 0 1px 2px -1px oklch(var(--text-on-field-c) / calc(var(--shadow-alpha) * 0.6));
  --elev-none: 0 0 0 0 transparent;
  --elev-thumb: 0 0 0 1px oklch(var(--ink-c) / var(--thumb-ring-alpha)), 0 1px 2px oklch(var(--text-on-field-c) / calc(var(--shadow-alpha) * 0.5));
  --elev-overlay: 0 0 0 1px var(--line-frame), 0 12px 24px -12px oklch(var(--text-on-field-c) / var(--shadow-alpha));
  --accent-mark: var(--ink);
  --accent-field: var(--surface-card);
  --accent-wash: var(--surface-selected);
  --accent-tint: var(--surface-selected);
  --accent-label: var(--text-1);
  --accent-line: var(--ink);
  --accent-on-field: var(--text-1);
  --button-primary: var(--ink);
  --key-primary-body: linear-gradient(180deg, color-mix(in oklch, var(--ink) 84%, white), color-mix(in oklch, var(--ink) 94%, black));
  --key-primary-body-hover: linear-gradient(180deg, color-mix(in oklch, var(--ink) 76%, white), color-mix(in oklch, var(--ink) 90%, white));
  --key-primary-edge: inset 0 2px 0 -1px oklch(1 0 0 / 0.2), inset 0 -2px 0 -1px oklch(0 0 0 / 0.3), inset 0 0 0 1px color-mix(in oklch, var(--ink) 88%, black), 0 1px 1px oklch(var(--text-on-field-c) / calc(var(--shadow-alpha) * 1.1)), 0 2px 5px -2px oklch(var(--text-on-field-c) / calc(var(--shadow-alpha) * 1.5));
  --key-primary-edge-press: inset 0 0 0 1px color-mix(in oklch, var(--ink) 88%, black), inset 0 1px 2px oklch(0 0 0 / 0.42);
  --key-primary-sheen: linear-gradient(90deg, transparent 14%, oklch(1 0 0 / 0.42) 50%, transparent 86%) top / 100% 1px no-repeat, linear-gradient(180deg, oklch(1 0 0 / 0.1), oklch(1 0 0 / 0) 55%);
  --key-secondary-body: var(--paper);
  --key-secondary-body-hover: oklch(var(--ink-c) / 0.03);
  --key-secondary-edge: var(--elev-control);
  --key-secondary-edge-press: inset 0 1px 2px oklch(var(--ink-c) / 0.12);
  --key-secondary-sheen: none;
  --button-primary-hover: oklch(var(--ink-c) / 0.86);
  --button-secondary: oklch(var(--grey-c));
  --button-secondary-hover: color-mix(in oklch, oklch(var(--grey-c)), oklch(var(--ink-c)) 7%);
  --button-ghost: transparent;
  --button-ghost-hover: oklch(var(--ink-c) / 0.05);
  --surface-disabled: color-mix(in oklch, var(--paper), var(--ink) 8%);
  --ring-thumb: 0 0 0 2px var(--paper);
  --chart-ink-2: oklch(var(--ink-c) / 0.66);
  --cell-quiet: oklch(var(--ink-c) / 0.07);
  --surface-skeleton: color-mix(in oklch, oklch(var(--grey-c)), oklch(var(--ink-c)) var(--skeleton-step));
  --stale-opacity: 0.6;
  --dim-opacity: 0.4;
  --code-text: var(--ink);
  --code-string: oklch(var(--ink-c) / var(--code-string-alpha));
  --code-comment: oklch(var(--ink-c) / var(--code-comment-alpha));
  --code-prompt: oklch(var(--ink-c) / 0.40);
}
@scope (.quartz [data-kind="agent"]) { :scope[data-kind], :scope [data-surface] { --accent-mark: var(--hue-1-mark); --accent-field: var(--hue-1-field); --accent-wash: var(--hue-1-wash); --accent-line: var(--hue-1-line); --accent-tint: var(--hue-1-tint); --accent-label: var(--hue-1-label); --accent-on-field: var(--text-on-field); } }
@scope (.quartz [data-kind="key"]) { :scope[data-kind], :scope [data-surface] { --accent-mark: var(--hue-2-mark); --accent-field: var(--hue-2-field); --accent-wash: var(--hue-2-wash); --accent-line: var(--hue-2-line); --accent-tint: var(--hue-2-tint); --accent-label: var(--hue-2-label); --accent-on-field: var(--text-on-field); } }
@scope (.quartz [data-kind="run"]) { :scope[data-kind], :scope [data-surface] { --accent-mark: var(--hue-3-mark); --accent-field: var(--hue-3-field); --accent-wash: var(--hue-3-wash); --accent-line: var(--hue-3-line); --accent-tint: var(--hue-3-tint); --accent-label: var(--hue-3-label); --accent-on-field: var(--text-on-field); } }
@scope (.quartz [data-kind="deploy"]) { :scope[data-kind], :scope [data-surface] { --accent-mark: var(--hue-4-mark); --accent-field: var(--hue-4-field); --accent-wash: var(--hue-4-wash); --accent-line: var(--hue-4-line); --accent-tint: var(--hue-4-tint); --accent-label: var(--hue-4-label); --accent-on-field: var(--text-on-field); } }
@scope (.quartz [data-kind="model"]) { :scope[data-kind], :scope [data-surface] { --accent-mark: var(--hue-5-mark); --accent-field: var(--hue-5-field); --accent-wash: var(--hue-5-wash); --accent-line: var(--hue-5-line); --accent-tint: var(--hue-5-tint); --accent-label: var(--hue-5-label); --accent-on-field: var(--text-on-field); } }
@scope (.quartz [data-status="warn"]) { :scope[data-status], :scope [data-surface] { --accent-mark: var(--warn-mark); --accent-field: var(--warn-field); --accent-wash: var(--warn-wash); --accent-line: var(--warn-line); --accent-tint: var(--warn-field); --accent-label: var(--text-on-field); --accent-on-field: var(--text-on-field); } }
@scope (.quartz [data-status="fail"]) { :scope[data-status], :scope [data-surface] { --accent-mark: var(--fail-mark); --accent-field: var(--fail-field); --accent-wash: var(--fail-wash); --accent-line: var(--fail-line); --accent-tint: var(--fail-field); --accent-label: var(--text-on-field); --accent-on-field: var(--text-on-field); } }
@scope (.quartz :is([aria-invalid="true"], :is([data-slot="input"], [data-slot="combobox-input-group"], [data-slot="combobox-chips"], [data-slot="time-field"]):has([data-control]:is([aria-invalid="true"], [data-invalid])))) { :scope, :scope [data-surface] { --accent-mark: var(--fail-mark); --accent-field: var(--fail-field); --accent-wash: var(--fail-wash); --accent-line: var(--fail-line); --accent-tint: var(--fail-field); --accent-label: var(--text-on-field); --accent-on-field: var(--text-on-field); } }
.quartz [data-surface="card"] { --surface-raised: var(--paper); --button-secondary: var(--paper); --button-secondary-hover: color-mix(in oklch, oklch(var(--paper-c)), oklch(var(--ink-c)) 4%); }
.quartz [data-surface="card"] :is([data-slot="popover-content"], [data-slot="popover-info-content"], [data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-sub-content"], [data-slot="select-content"], [data-slot="combobox-content"], [data-slot="filter-bar-select-content"], [data-slot="date-picker-popup"], [data-slot="time-field-popup"], [data-slot="table-row-actions-content"], [data-slot="dialog-content"], [data-slot="sheet-content"]) {
  --surface-raised: var(--paper); --button-secondary: oklch(var(--grey-c));
  --button-secondary-hover: color-mix(in oklch, oklch(var(--grey-c)), oklch(var(--ink-c)) 7%);
}
.quartz[data-theme="dark"], .quartz [data-surface="ink"], .quartz [data-surface="inverse"],
:where([data-theme="dark"], .dark) .quartz:not([data-theme="light"]),
:where([data-theme="dark"], .dark) .quartz:not([data-theme="light"]) [data-surface="paper"] [data-surface="inverse"],
.quartz[data-theme="dark"] [data-surface="paper"] [data-surface="inverse"], .quartz [data-surface="ink"] [data-surface="paper"] [data-surface="inverse"] {
  color-scheme: dark;
  --ink-c: 96.5% 0.006 250;
  --paper-c: 18.5% 0.016 262;
  --grey-c: 23.5% 0.018 262;
  --canvas-c: 15% 0.014 262;
  --hue-1-wash: oklch(31% 0.060 195);
  --hue-2-wash: oklch(31% 0.050 320);
  --hue-3-wash: oklch(31% 0.080 250);
  --hue-4-wash: oklch(31% 0.090 290);
  --hue-5-wash: oklch(31% 0.055 160);
  --hue-1-tint: oklch(30% 0.045 195);
  --hue-1-label: oklch(88% 0.055 195);
  --hue-2-tint: oklch(30% 0.045 320);
  --hue-2-label: oklch(88% 0.055 320);
  --hue-3-tint: oklch(30% 0.045 250);
  --hue-3-label: oklch(88% 0.055 250);
  --hue-4-tint: oklch(30% 0.045 290);
  --hue-4-label: oklch(88% 0.055 290);
  --hue-5-tint: oklch(30% 0.045 160);
  --hue-5-label: oklch(88% 0.055 160);
  --warn-text: oklch(80% 0.130 68);
  --fail-text: oklch(76% 0.140 26);
  --warn-wash: oklch(31% 0.055 68);
  --fail-wash: oklch(29% 0.060 26);
  --skeleton-step: 8%;
  --code-string-alpha: 0.72;
  --code-comment-alpha: 0.54;
  --hue-1-line: var(--hue-1-mark);
  --hue-2-line: var(--hue-2-mark);
  --hue-3-line: var(--hue-3-mark);
  --hue-4-line: var(--hue-4-mark);
  --hue-5-line: var(--hue-5-mark);
  --warn-line: var(--warn-mark);
  --fail-line: var(--fail-mark);
  --button-ghost: oklch(var(--ink-c) / 0.10);
  --button-ghost-hover: oklch(var(--ink-c) / 0.16);
  --surface-pressed: oklch(var(--ink-c) / 0.28);
  --shadow-alpha: 0.6;
  --line-frame-alpha: 0.20;
  --thumb-lift: 20%;
  --thumb-ring-alpha: 0.16;
}
:where([data-theme="dark"], .dark) .quartz:not([data-theme="light"]) [data-surface="paper"],
:where([data-theme="dark"], .dark) .quartz:not([data-theme="light"]) [data-surface="inverse"],
.quartz[data-theme="dark"] [data-surface="paper"], .quartz [data-surface="ink"] [data-surface="paper"],
.quartz[data-theme="dark"] [data-surface="inverse"], .quartz [data-surface="ink"] [data-surface="inverse"] {
  color-scheme: light;
  --ink-c: 20% 0.024 262;
  --paper-c: 99.7% 0.001 250;
  --grey-c: 95.6% 0.004 255;
  --canvas-c: 99.1% 0.002 250;
  --hue-1-wash: oklch(96.5% 0.040 195);
  --hue-2-wash: oklch(96% 0.030 320);
  --hue-3-wash: oklch(94.5% 0.020 250);
  --hue-4-wash: oklch(95% 0.025 290);
  --hue-5-wash: oklch(96% 0.035 160);
  --hue-1-tint: oklch(92% 0.070 195);
  --hue-1-label: oklch(38% 0.075 195);
  --hue-2-tint: oklch(92% 0.045 320);
  --hue-2-label: oklch(38% 0.055 320);
  --hue-3-tint: oklch(92% 0.035 250);
  --hue-3-label: oklch(38% 0.120 250);
  --hue-4-tint: oklch(92% 0.045 290);
  --hue-4-label: oklch(38% 0.120 290);
  --hue-5-tint: oklch(92% 0.050 160);
  --hue-5-label: oklch(38% 0.080 160);
  --warn-text: oklch(49% 0.100 68);
  --fail-text: oklch(51% 0.180 26);
  --warn-wash: oklch(96% 0.028 68);
  --fail-wash: oklch(94.5% 0.027 26);
  --hue-1-line: oklch(60% 0.100 195);
  --hue-2-line: oklch(58% 0.075 320);
  --hue-3-line: oklch(52% 0.150 250);
  --hue-4-line: oklch(54% 0.150 290);
  --hue-5-line: oklch(52% 0.090 160);
  --warn-line: oklch(62% 0.132 68);
  --fail-line: oklch(60% 0.236 26);
  --shadow-alpha: 0.20;
  --skeleton-step: 0%;
  --code-string-alpha: 0.80;
  --code-comment-alpha: 0.66;
  --button-ghost: transparent;
  --button-ghost-hover: oklch(var(--ink-c) / 0.05);
  --surface-pressed: oklch(var(--ink-c) / 0.08);
  --line-frame-alpha: 0.14;
  --thumb-lift: 0%;
  --thumb-ring-alpha: 0;
}

@media (prefers-reduced-motion: reduce) {
  .quartz { --dur-base: 0ms; --dur-slow: 0ms; --sheet-shift: 0px }
}
.quartz [data-force-reduced-motion] { --dur-base: 0ms; --dur-slow: 0ms; --sheet-shift: 0px }