@askrjs/themes 0.0.1

package/dist/askr-themes/src/themes/default/index.css

@@ -0,0 +1,3736 @@
+:root {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  --ak-font-family-body: "Aptos", "Segoe UI Variable Text", "Segoe UI", "SF Pro Text", Inter, ui-sans-serif, system-ui,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  --ak-font-family-mono: "IBM Plex Mono", "SFMono-Regular", "Menlo", "Consolas", ui-monospace, monospace,
+    "Apple Color Emoji", "Segoe UI Emoji";
+  --ak-font-family-emphasis: var(--ak-font-family-body);
+  --ak-font-family-quote: "Iowan Old Style", "Palatino Linotype", ui-serif, serif;
+  --ak-font-family: var(--ak-font-family-body);
+  --ak-font-size-xs: .75rem;
+  --ak-font-size-sm: .875rem;
+  --ak-font-size-md: 1rem;
+  --ak-font-size-lg: 1.125rem;
+  --ak-font-size-xl: 1.25rem;
+  --ak-font-size-2xl: 1.5rem;
+  --ak-font-size-3xl: 1.75rem;
+  --ak-font-size-heading: clamp(1.2rem, 1.05rem + .72vw, 1.75rem);
+  --ak-font-size-display: clamp(2.2rem, 1.55rem + 2.35vw, 3.55rem);
+  --ak-font-weight-light: 300;
+  --ak-font-weight-regular: 400;
+  --ak-font-weight-medium: 500;
+  --ak-font-weight-semibold: 600;
+  --ak-font-weight-bold: 700;
+  --ak-line-height-tight: 1.15;
+  --ak-line-height-normal: 1.55;
+  --ak-line-height-relaxed: 1.7;
+  --ak-type-1-size: .75rem;
+  --ak-type-1-line-height: 1rem;
+  --ak-type-1-letter-spacing: .0025em;
+  --ak-type-2-size: .875rem;
+  --ak-type-2-line-height: 1.25rem;
+  --ak-type-2-letter-spacing: 0em;
+  --ak-type-3-size: 1rem;
+  --ak-type-3-line-height: 1.5rem;
+  --ak-type-3-letter-spacing: 0em;
+  --ak-type-4-size: 1.125rem;
+  --ak-type-4-line-height: 1.625rem;
+  --ak-type-4-letter-spacing: -.0025em;
+  --ak-type-5-size: 1.25rem;
+  --ak-type-5-line-height: 1.75rem;
+  --ak-type-5-letter-spacing: -.005em;
+  --ak-type-6-size: 1.625rem;
+  --ak-type-6-line-height: 2rem;
+  --ak-type-6-letter-spacing: -.02em;
+  --ak-type-7-size: 2rem;
+  --ak-type-7-line-height: 2.35rem;
+  --ak-type-7-letter-spacing: -.03em;
+  --ak-type-8-size: 2.75rem;
+  --ak-type-8-line-height: 2.95rem;
+  --ak-type-8-letter-spacing: -.04em;
+  --ak-type-9-size: 4.75rem;
+  --ak-type-9-line-height: 4.65rem;
+  --ak-type-9-letter-spacing: -.055em;
+  --ak-space-xs: .25rem;
+  --ak-space-sm: .5rem;
+  --ak-space-md: .875rem;
+  --ak-space-lg: 1.125rem;
+  --ak-space-xl: 1.5rem;
+  --ak-space-2xl: 2.25rem;
+  --ak-space-3xl: 3.5rem;
+  --ak-space-1: .25rem;
+  --ak-space-2: .5rem;
+  --ak-space-3: .75rem;
+  --ak-space-4: 1rem;
+  --ak-space-5: 1.5rem;
+  --ak-space-6: 2rem;
+  --ak-space-7: 2.5rem;
+  --ak-space-8: 3rem;
+  --ak-space-9: 4rem;
+  --ak-radius-sm: 6px;
+  --ak-radius-md: 8px;
+  --ak-radius-lg: 12px;
+  --ak-radius-xl: 18px;
+  --ak-radius-round: 9999px;
+  --ak-border-width-sm: 1px;
+  --ak-border-width-md: 2px;
+  --ak-shadow-sm: 0 1px 2px #0f172a0a, 0 0 0 1px #0f172a08;
+  --ak-shadow-md: 0 10px 30px -18px #0f172a2e, 0 2px 8px #0f172a0f;
+  --ak-shadow-lg: 0 24px 64px -32px #0f172a3d, 0 8px 24px #0f172a14;
+  --ak-focus-ring-width: 3px;
+  --ak-focus-ring-offset: 2px;
+  --ak-duration-fast: .16s;
+  --ak-duration-normal: .22s;
+  --ak-duration-slow: .32s;
+  --ak-ease-standard: cubic-bezier(.22, 1, .36, 1);
+  --ak-icon-size-sm: 1rem;
+  --ak-icon-size-md: 1.25rem;
+  --ak-icon-size-lg: 1.5rem;
+  --ak-icon-size-xl: 1.75rem;
+  --ak-icon-stroke-width-sm: 1.75;
+  --ak-icon-stroke-width-md: 2;
+  --ak-icon-stroke-width-lg: 2;
+  --ak-icon-stroke-width-xl: 2.25;
+  --ak-breakpoint-sm: 40rem;
+  --ak-breakpoint-md: 48rem;
+  --ak-breakpoint-lg: 64rem;
+  --ak-breakpoint-xl: 80rem;
+  --ak-layout-navbar-height: 60px;
+  --ak-layout-sidebar-width-sm: 15rem;
+  --ak-layout-sidebar-width-md: 17rem;
+  --ak-layout-sidebar-width-lg: 20rem;
+  --ak-layout-sidebar-width-xl: 23rem;
+  --ak-layout-sidebar-width: 17rem;
+  --ak-layout-content-max-width: 80rem;
+  --ak-layout-page-gutter: clamp(1rem, .7rem + 1.25vw, 1.75rem);
+  --ak-layout-panel-padding: clamp(1rem, .88rem + .55vw, 1.35rem);
+  --ak-container-inline-size: 100%;
+  --ak-density-control-height-sm: 2rem;
+  --ak-density-control-height-md: 2.5rem;
+  --ak-density-control-height-lg: 2.9rem;
+  --ak-density-control-padding-x-sm: .8rem;
+  --ak-density-control-padding-x-md: 1rem;
+  --ak-density-control-padding-x-lg: 1.15rem;
+  --ak-container-1: 30rem;
+  --ak-container-2: 42rem;
+  --ak-container-3: 58rem;
+  --ak-container-4: 72rem;
+  --ak-section-1: var(--ak-space-4);
+  --ak-section-2: var(--ak-space-5);
+  --ak-section-3: var(--ak-space-6);
+  --ak-section-4: var(--ak-space-7);
+  --ak-z-dropdown: 1000;
+  --ak-z-sticky: 1100;
+  --ak-z-fixed: 1200;
+  --ak-z-modal-backdrop: 1300;
+  --ak-z-modal: 1400;
+  --ak-z-popover: 1500;
+  --ak-z-toast: 1550;
+  --ak-z-tooltip: 1600;
+}
+
+:root, [data-theme="light"] {
+  --ak-color-primary: #2563eb;
+  --ak-color-primary-hover: #1d4ed8;
+  --ak-color-primary-active: #1e40af;
+  --ak-color-primary-soft: #dbeafe;
+  --ak-color-primary-ink: #163b8a;
+  --ak-color-text: #1b2434;
+  --ak-color-text-muted: #5d6b85;
+  --ak-color-text-subtle: #8b96ab;
+  --ak-color-text-inverse: #fff;
+  --ak-color-bg: #f6f7fb;
+  --ak-color-surface: #fff;
+  --ak-color-surface-muted: #f1f4fa;
+  --ak-color-surface-raised: #fff;
+  --ak-color-surface-overlay: #ffffffdb;
+  --ak-color-border-subtle: #e6ebf5;
+  --ak-color-border: #d7deec;
+  --ak-color-border-strong: #b7c2d8;
+  --ak-color-success: #16a34a;
+  --ak-color-success-soft: #16a34a24;
+  --ak-color-success-ink: #166534;
+  --ak-color-warning: #f59e0b;
+  --ak-color-warning-soft: #f59e0b29;
+  --ak-color-warning-ink: #854d0e;
+  --ak-color-danger: #ef4444;
+  --ak-color-danger-soft: #ef444426;
+  --ak-color-danger-ink: #991b1b;
+  --ak-color-info: #0ea5e9;
+  --ak-color-info-soft: #0ea5e929;
+  --ak-color-info-ink: #0c4a6e;
+  --ak-color-link: var(--ak-color-primary);
+  --ak-color-link-hover: var(--ak-color-primary-hover);
+  --ak-color-focus-ring: #2563eb2e;
+  --ak-color-disabled-bg: #ecf0f7;
+  --ak-color-disabled-surface: #f7f9fc;
+  --ak-color-disabled-border: #d9e0ec;
+  --ak-color-disabled-text: #9aa6bc;
+  --ak-color-selected: #e4edff;
+  --ak-color-selected-border: #93c5fd;
+  --ak-color-hover: #2563eb0f;
+  --ak-color-active: #2563eb1c;
+  --ak-color-backdrop: #0a11216b;
+  --ak-color-fg: var(--ak-color-text);
+  --ak-color-muted: var(--ak-color-text-muted);
+  color-scheme: light;
+}
+
+[data-theme="dark"] {
+  --ak-color-primary: #60a5fa;
+  --ak-color-primary-hover: #7ab8ff;
+  --ak-color-primary-active: #4d92ef;
+  --ak-color-primary-soft: #60a5fa33;
+  --ak-color-primary-ink: #dcedff;
+  --ak-color-text: #edf3ff;
+  --ak-color-text-muted: #a9b7cc;
+  --ak-color-text-subtle: #8090a8;
+  --ak-color-text-inverse: #0e1320;
+  --ak-color-bg: #0f1420;
+  --ak-color-surface: #171d2b;
+  --ak-color-surface-muted: #20283a;
+  --ak-color-surface-raised: #263249;
+  --ak-color-surface-overlay: #171d2be0;
+  --ak-color-border-subtle: #2a3449;
+  --ak-color-border: #38445c;
+  --ak-color-border-strong: #59698a;
+  --ak-color-success: #4ade80;
+  --ak-color-success-soft: #4ade802e;
+  --ak-color-success-ink: #dcfce7;
+  --ak-color-warning: #fbbf24;
+  --ak-color-warning-soft: #fbbf242e;
+  --ak-color-warning-ink: #fef3c7;
+  --ak-color-danger: #fb7185;
+  --ak-color-danger-soft: #fb71852e;
+  --ak-color-danger-ink: #ffe4e6;
+  --ak-color-info: #38bdf8;
+  --ak-color-info-soft: #38bdf82e;
+  --ak-color-info-ink: #e0f2fe;
+  --ak-color-link: var(--ak-color-primary);
+  --ak-color-link-hover: var(--ak-color-primary-hover);
+  --ak-color-focus-ring: #60a5fa38;
+  --ak-color-disabled-bg: #1e2737;
+  --ak-color-disabled-surface: #171d2b;
+  --ak-color-disabled-border: #2f3b50;
+  --ak-color-disabled-text: #74849d;
+  --ak-color-selected: #6ea8fe26;
+  --ak-color-selected-border: #60a5fa;
+  --ak-color-hover: #edf3ff0f;
+  --ak-color-active: #edf3ff1f;
+  --ak-color-backdrop: #02060ca8;
+  --ak-color-fg: var(--ak-color-text);
+  --ak-color-muted: var(--ak-color-text-muted);
+  color-scheme: dark;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --ak-duration-fast: 0s;
+    --ak-duration-normal: 0s;
+    --ak-duration-slow: 0s;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --ak-color-primary: #60a5fa;
+    --ak-color-primary-hover: #7ab8ff;
+    --ak-color-primary-active: #4d92ef;
+    --ak-color-primary-soft: #60a5fa33;
+    --ak-color-primary-ink: #dcedff;
+    --ak-color-text: #edf3ff;
+    --ak-color-text-muted: #a9b7cc;
+    --ak-color-text-subtle: #8090a8;
+    --ak-color-text-inverse: #0e1320;
+    --ak-color-bg: #0f1420;
+    --ak-color-surface: #171d2b;
+    --ak-color-surface-muted: #20283a;
+    --ak-color-surface-raised: #263249;
+    --ak-color-surface-overlay: #171d2be0;
+    --ak-color-border-subtle: #2a3449;
+    --ak-color-border: #38445c;
+    --ak-color-border-strong: #59698a;
+    --ak-color-success: #4ade80;
+    --ak-color-success-soft: #4ade802e;
+    --ak-color-success-ink: #dcfce7;
+    --ak-color-warning: #fbbf24;
+    --ak-color-warning-soft: #fbbf242e;
+    --ak-color-warning-ink: #fef3c7;
+    --ak-color-danger: #fb7185;
+    --ak-color-danger-soft: #fb71852e;
+    --ak-color-danger-ink: #ffe4e6;
+    --ak-color-info: #38bdf8;
+    --ak-color-info-soft: #38bdf82e;
+    --ak-color-info-ink: #e0f2fe;
+    --ak-color-link: var(--ak-color-primary);
+    --ak-color-link-hover: var(--ak-color-primary-hover);
+    --ak-color-focus-ring: #60a5fa38;
+    --ak-color-disabled-bg: #1e2737;
+    --ak-color-disabled-surface: #171d2b;
+    --ak-color-disabled-border: #2f3b50;
+    --ak-color-disabled-text: #74849d;
+    --ak-color-selected: #6ea8fe26;
+    --ak-color-selected-border: #60a5fa;
+    --ak-color-hover: #edf3ff0f;
+    --ak-color-active: #edf3ff1f;
+    --ak-color-backdrop: #02060ca8;
+    --ak-color-fg: var(--ak-color-text);
+    --ak-color-muted: var(--ak-color-text-muted);
+    color-scheme: dark;
+  }
+}
+
+:where(html) {
+  font-family: var(--ak-font-family-body);
+}
+
+:where(body) {
+  font-family: var(--ak-font-family-body);
+  font-size: var(--ak-type-3-size);
+  letter-spacing: 0;
+  margin: 0;
+  line-height: 1.58;
+}
+
+:where(h1, h2, h3, h4, h5, h6) {
+  color: var(--ak-color-text);
+  font-family: var(--ak-font-family-body);
+  text-wrap: balance;
+  margin: 0;
+  font-weight: 650;
+}
+
+:where(h1) {
+  font-size: clamp(3rem, 6vw, var(--ak-type-9-size));
+  letter-spacing: -.04em;
+  line-height: .93;
+  font-family: var(--ak-font-family-body);
+  font-weight: 700;
+}
+
+:where(h2) {
+  font-size: clamp(2.25rem, 4vw, var(--ak-type-8-size));
+  letter-spacing: -.03em;
+  line-height: .98;
+  font-family: var(--ak-font-family-body);
+  font-weight: 700;
+}
+
+:where(h3) {
+  font-size: var(--ak-type-7-size);
+  letter-spacing: -.03em;
+  line-height: 1.08;
+}
+
+:where(h4) {
+  font-size: var(--ak-type-6-size);
+  letter-spacing: -.03em;
+  line-height: 1.15;
+}
+
+:where(h5) {
+  font-size: var(--ak-type-5-size);
+  line-height: var(--ak-type-5-line-height);
+  letter-spacing: var(--ak-type-5-letter-spacing);
+}
+
+:where(h6) {
+  font-size: var(--ak-type-4-size);
+  line-height: var(--ak-type-4-line-height);
+  letter-spacing: var(--ak-type-4-letter-spacing);
+}
+
+:where(p, li, dd, dt) {
+  color: var(--ak-color-text-muted);
+}
+
+:where(p, li) {
+  font-size: var(--ak-type-3-size);
+  letter-spacing: -.01em;
+  line-height: 1.64;
+}
+
+:where(small) {
+  font-size: var(--ak-type-1-size);
+  line-height: var(--ak-type-1-line-height);
+  letter-spacing: var(--ak-type-1-letter-spacing);
+}
+
+:where(strong) {
+  font-weight: var(--ak-font-weight-bold);
+}
+
+:where(em) {
+  font-family: var(--ak-font-family-emphasis);
+  font-style: italic;
+}
+
+:where(blockquote) {
+  border-inline-start: 1px solid var(--ak-color-border);
+  color: var(--ak-color-text-muted);
+  font-family: var(--ak-font-family-quote);
+  font-size: var(--ak-type-5-size);
+  line-height: var(--ak-type-5-line-height);
+  letter-spacing: var(--ak-type-5-letter-spacing);
+  margin: 0;
+  padding-inline-start: 1rem;
+}
+
+:where(code, kbd, samp, pre) {
+  font-family: var(--ak-font-family-mono);
+}
+
+:where(code, kbd) {
+  font-size: .9em;
+}
+
+:where(pre) {
+  font-size: var(--ak-type-2-size);
+  line-height: var(--ak-type-2-line-height);
+  margin: 0;
+  overflow: auto;
+}
+
+.ak-prose {
+  gap: 1rem;
+  max-inline-size: 44rem;
+  display: grid;
+}
+
+.ak-prose > * {
+  margin: 0;
+}
+
+.ak-prose > h1, .ak-prose > h2, .ak-prose > h3, .ak-prose > h4, .ak-prose > h5, .ak-prose > h6 {
+  max-inline-size: 22ch;
+}
+
+.ak-prose > p, .ak-prose > ul, .ak-prose > ol, .ak-prose > blockquote {
+  max-inline-size: 66ch;
+}
+
+.ak-prose > ul, .ak-prose > ol {
+  margin: 0;
+  padding-inline-start: 1.25rem;
+}
+
+.ak-type-scale {
+  gap: .75rem;
+  inline-size: 100%;
+  display: grid;
+}
+
+.ak-type-scale__row {
+  border-bottom: 1px solid var(--ak-color-border-subtle);
+  grid-template-columns: minmax(0, 1fr) auto auto auto;
+  align-items: baseline;
+  gap: 1rem;
+  padding-block: .625rem;
+  display: grid;
+}
+
+.ak-type-scale__row:last-child {
+  border-bottom: none;
+}
+
+.ak-type-scale__sample {
+  color: var(--ak-color-text);
+  font-weight: var(--ak-font-weight-medium);
+}
+
+.ak-type-scale__meta {
+  color: var(--ak-color-text-muted);
+  font-size: var(--ak-type-2-size);
+  line-height: var(--ak-type-2-line-height);
+  white-space: nowrap;
+}
+
+.ak-type-grid {
+  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
+  gap: .875rem;
+  display: grid;
+}
+
+.ak-type-card {
+  border: 1px solid color-mix(in srgb, var(--ak-color-border) 86%, white 14%);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface);
+  box-shadow: var(--ak-shadow-sm);
+  gap: .4rem;
+  padding: .875rem;
+  display: grid;
+}
+
+.ak-type-card > p {
+  color: var(--ak-color-text-muted);
+}
+
+.ak-type-card__eyebrow {
+  color: var(--ak-color-text-muted);
+  font-size: var(--ak-type-1-size);
+  line-height: var(--ak-type-1-line-height);
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+
+@media (width <= 720px) {
+  .ak-type-scale__row {
+    grid-template-columns: 1fr;
+    gap: .35rem;
+  }
+}
+
+:where([data-slot="icon"]) {
+  vertical-align: -.125em;
+  color: inherit;
+  flex: none;
+  display: inline-block;
+}
+
+:where([data-slot="icon"][data-decorative="true"]) {
+  speak: none;
+}
+
+:where(.text-muted) {
+  color: var(--ak-color-text-muted);
+}
+
+:where(.text-bold) {
+  font-weight: var(--ak-font-weight-bold);
+}
+
+:where(.sr-only) {
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+:where(.gap-1, [data-slot="grid"][data-gap="initial:1"], [data-slot="flex"][data-gap="initial:1"]) {
+  gap: var(--ak-space-1);
+}
+
+:where(.gap-2, [data-slot="grid"][data-gap="initial:2"], [data-slot="flex"][data-gap="initial:2"]) {
+  gap: var(--ak-space-2);
+}
+
+:where(.gap-3, [data-slot="grid"][data-gap="initial:3"], [data-slot="flex"][data-gap="initial:3"]) {
+  gap: var(--ak-space-3);
+}
+
+:where(.gap-4, [data-slot="grid"][data-gap="initial:4"], [data-slot="flex"][data-gap="initial:4"]) {
+  gap: var(--ak-space-4);
+}
+
+:where(.gap-xs, [data-slot="grid"][data-gap="initial:xs"], [data-slot="flex"][data-gap="initial:xs"]) {
+  gap: var(--ak-space-xs);
+}
+
+:where(.gap-sm, [data-slot="grid"][data-gap="initial:sm"], [data-slot="flex"][data-gap="initial:sm"], [data-slot="sidebar-layout"][data-gap="sm"], [data-slot="topbar-layout"][data-gap="sm"]) {
+  gap: var(--ak-space-sm);
+}
+
+:where(.gap-md, [data-slot="grid"][data-gap="initial:md"], [data-slot="flex"][data-gap="initial:md"], [data-slot="sidebar-layout"][data-gap="md"], [data-slot="topbar-layout"][data-gap="md"]) {
+  gap: var(--ak-space-md);
+}
+
+:where(.gap-lg, [data-slot="grid"][data-gap="initial:lg"], [data-slot="flex"][data-gap="initial:lg"], [data-slot="sidebar-layout"][data-gap="lg"], [data-slot="topbar-layout"][data-gap="lg"]) {
+  gap: var(--ak-space-lg);
+}
+
+:where(.gap-xl, [data-slot="grid"][data-gap="initial:xl"], [data-slot="flex"][data-gap="initial:xl"], [data-slot="sidebar-layout"][data-gap="xl"], [data-slot="topbar-layout"][data-gap="xl"]) {
+  gap: var(--ak-space-xl);
+}
+
+:where(.gap-x-sm, [data-slot="grid"][data-gap-x="initial:sm"], [data-slot="flex"][data-gap-x="initial:sm"]) {
+  column-gap: var(--ak-space-sm);
+}
+
+:where(.gap-x-md, [data-slot="grid"][data-gap-x="initial:md"], [data-slot="flex"][data-gap-x="initial:md"]) {
+  column-gap: var(--ak-space-md);
+}
+
+:where(.gap-x-lg, [data-slot="grid"][data-gap-x="initial:lg"], [data-slot="flex"][data-gap-x="initial:lg"]) {
+  column-gap: var(--ak-space-lg);
+}
+
+:where(.gap-y-sm, [data-slot="grid"][data-gap-y="initial:sm"], [data-slot="flex"][data-gap-y="initial:sm"]) {
+  row-gap: var(--ak-space-sm);
+}
+
+:where(.gap-y-md, [data-slot="grid"][data-gap-y="initial:md"], [data-slot="flex"][data-gap-y="initial:md"]) {
+  row-gap: var(--ak-space-md);
+}
+
+:where(.gap-y-lg, [data-slot="grid"][data-gap-y="initial:lg"], [data-slot="flex"][data-gap-y="initial:lg"]) {
+  row-gap: var(--ak-space-lg);
+}
+
+:where(.flex-col, [data-slot="flex"][data-direction="initial:column"]) {
+  flex-direction: column;
+}
+
+:where(.flex-row-reverse, [data-slot="flex"][data-direction="initial:row-reverse"]) {
+  flex-direction: row-reverse;
+}
+
+:where(.flex-col-reverse, [data-slot="flex"][data-direction="initial:column-reverse"]) {
+  flex-direction: column-reverse;
+}
+
+:where(.items-start, [data-slot="flex"][data-align="initial:start"], [data-slot="grid"][data-align="initial:start"]) {
+  align-items: flex-start;
+}
+
+:where(.items-end, [data-slot="flex"][data-align="initial:end"], [data-slot="grid"][data-align="initial:end"]) {
+  align-items: flex-end;
+}
+
+:where(.items-center, [data-slot="flex"][data-align="initial:center"], [data-slot="grid"][data-align="initial:center"]) {
+  align-items: center;
+}
+
+:where(.items-stretch, [data-slot="flex"][data-align="initial:stretch"], [data-slot="grid"][data-align="initial:stretch"]) {
+  align-items: stretch;
+}
+
+:where(.items-baseline, [data-slot="flex"][data-align="initial:baseline"], [data-slot="grid"][data-align="initial:baseline"]) {
+  align-items: baseline;
+}
+
+:where(.justify-start, [data-slot="flex"][data-justify="initial:start"], [data-slot="grid"][data-justify="initial:start"]) {
+  justify-content: flex-start;
+}
+
+:where(.justify-end, [data-slot="flex"][data-justify="initial:end"], [data-slot="grid"][data-justify="initial:end"]) {
+  justify-content: flex-end;
+}
+
+:where(.justify-center, [data-slot="flex"][data-justify="initial:center"], [data-slot="grid"][data-justify="initial:center"]) {
+  justify-content: center;
+}
+
+:where(.justify-between, [data-slot="flex"][data-justify="initial:between"], [data-slot="grid"][data-justify="initial:between"]) {
+  justify-content: space-between;
+}
+
+:where(.flex-nowrap, [data-slot="flex"][data-wrap="initial:nowrap"]) {
+  flex-wrap: nowrap;
+}
+
+:where(.flex-wrap-reverse, [data-slot="flex"][data-wrap="initial:wrap-reverse"]) {
+  flex-wrap: wrap-reverse;
+}
+
+:where([data-ak-layout="true"]) {
+  display: var(--ak-display-initial);
+  margin: var(--ak-m-initial);
+  margin-block: var(--ak-my-initial);
+  margin-inline: var(--ak-mx-initial);
+  margin-top: var(--ak-mt-initial);
+  margin-right: var(--ak-mr-initial);
+  margin-bottom: var(--ak-mb-initial);
+  margin-left: var(--ak-ml-initial);
+  padding: var(--ak-p-initial);
+  padding-block: var(--ak-py-initial);
+  padding-inline: var(--ak-px-initial);
+  padding-top: var(--ak-pt-initial);
+  padding-right: var(--ak-pr-initial);
+  padding-bottom: var(--ak-pb-initial);
+  padding-left: var(--ak-pl-initial);
+  width: var(--ak-width-initial);
+  min-width: var(--ak-min-width-initial);
+  max-width: var(--ak-max-width-initial);
+  height: var(--ak-height-initial);
+  min-height: var(--ak-min-height-initial);
+  max-height: var(--ak-max-height-initial);
+  position: var(--ak-position-initial);
+  inset: var(--ak-inset-initial);
+  top: var(--ak-top-initial);
+  right: var(--ak-right-initial);
+  bottom: var(--ak-bottom-initial);
+  left: var(--ak-left-initial);
+  overflow: var(--ak-overflow-initial);
+  overflow-x: var(--ak-overflow-x-initial);
+  overflow-y: var(--ak-overflow-y-initial);
+  flex-basis: var(--ak-flex-basis-initial);
+  flex-grow: var(--ak-flex-grow-initial);
+  flex-shrink: var(--ak-flex-shrink-initial);
+  grid-area: var(--ak-grid-area-initial);
+  grid-column: var(--ak-grid-column-initial);
+  grid-column-start: var(--ak-grid-column-start-initial);
+  grid-column-end: var(--ak-grid-column-end-initial);
+  grid-row: var(--ak-grid-row-initial);
+  grid-row-start: var(--ak-grid-row-start-initial);
+  grid-row-end: var(--ak-grid-row-end-initial);
+  gap: var(--ak-gap-initial);
+  column-gap: var(--ak-column-gap-initial);
+  row-gap: var(--ak-row-gap-initial);
+  flex-direction: var(--ak-flex-direction-initial);
+  align-items: var(--ak-align-items-initial);
+  justify-content: var(--ak-justify-content-initial);
+  flex-wrap: var(--ak-flex-wrap-initial);
+  grid-template-areas: var(--ak-grid-template-areas-initial);
+  grid-template-columns: var(--ak-grid-template-columns-initial);
+  grid-template-rows: var(--ak-grid-template-rows-initial);
+  grid-auto-flow: var(--ak-grid-auto-flow-initial);
+}
+
+:where([data-slot="container"]) {
+  --ak-container-inline-size: 100%;
+  box-sizing: border-box;
+  width: var(--ak-width-initial, 100%);
+  max-width: min(100%, var(--ak-max-width-initial, var(--ak-container-inline-size)));
+  margin-left: var(--ak-ml-initial, auto);
+  margin-right: var(--ak-mr-initial, auto);
+  padding-left: var(--ak-pl-initial, var(--ak-px-initial, var(--ak-layout-page-gutter)));
+  padding-right: var(--ak-pr-initial, var(--ak-px-initial, var(--ak-layout-page-gutter)));
+  display: block;
+}
+
+:where([data-slot="container"][data-fluid="true"]), :where([data-slot="container"][data-variant="default"]), :where([data-slot="container"][data-variant="sm"]), :where([data-slot="container"][data-variant="md"]), :where([data-slot="container"][data-variant="lg"]), :where([data-slot="container"][data-variant="xl"]), :where([data-slot="container"][data-variant="xxl"]), :where([data-slot="container"][data-variant="fluid"]) {
+  --ak-container-inline-size: 100%;
+}
+
+:where([data-slot="container"][data-size="initial:1"]), :where([data-slot="container"][data-size="initial:sm"]), :where([data-slot="container"][data-max-width="initial:1"]), :where([data-slot="container"][data-max-width="initial:sm"]) {
+  --ak-container-inline-size: var(--ak-container-1);
+}
+
+:where([data-slot="container"][data-size="initial:2"]), :where([data-slot="container"][data-size="initial:md"]), :where([data-slot="container"][data-max-width="initial:2"]), :where([data-slot="container"][data-max-width="initial:md"]) {
+  --ak-container-inline-size: var(--ak-container-2);
+}
+
+:where([data-slot="container"][data-size="initial:3"]), :where([data-slot="container"][data-size="initial:lg"]), :where([data-slot="container"][data-max-width="initial:3"]), :where([data-slot="container"][data-max-width="initial:lg"]) {
+  --ak-container-inline-size: var(--ak-container-3);
+}
+
+:where([data-slot="container"][data-size="initial:4"]), :where([data-slot="container"][data-size="initial:xl"]), :where([data-slot="container"][data-max-width="initial:4"]), :where([data-slot="container"][data-max-width="initial:xl"]) {
+  --ak-container-inline-size: var(--ak-container-4);
+}
+
+:where([data-slot="container"][data-align="initial:left"]) {
+  margin-left: var(--ak-ml-initial, 0);
+  margin-right: var(--ak-mr-initial, auto);
+}
+
+:where([data-slot="container"][data-align="initial:right"]) {
+  margin-left: var(--ak-ml-initial, auto);
+  margin-right: var(--ak-mr-initial, 0);
+}
+
+@media (width >= 36rem) {
+  :where([data-slot="container"][data-variant="default"]), :where([data-slot="container"][data-variant="sm"]) {
+    --ak-container-inline-size: 540px;
+  }
+}
+
+@media (width >= 40rem) {
+  :where([data-ak-layout="true"]) {
+    display: var(--ak-display-sm, var(--ak-display-initial));
+    margin: var(--ak-m-sm, var(--ak-m-initial));
+    margin-block: var(--ak-my-sm, var(--ak-my-initial));
+    margin-inline: var(--ak-mx-sm, var(--ak-mx-initial));
+    margin-top: var(--ak-mt-sm, var(--ak-mt-initial));
+    margin-right: var(--ak-mr-sm, var(--ak-mr-initial));
+    margin-bottom: var(--ak-mb-sm, var(--ak-mb-initial));
+    margin-left: var(--ak-ml-sm, var(--ak-ml-initial));
+    padding: var(--ak-p-sm, var(--ak-p-initial));
+    padding-block: var(--ak-py-sm, var(--ak-py-initial));
+    padding-inline: var(--ak-px-sm, var(--ak-px-initial));
+    padding-top: var(--ak-pt-sm, var(--ak-pt-initial));
+    padding-right: var(--ak-pr-sm, var(--ak-pr-initial));
+    padding-bottom: var(--ak-pb-sm, var(--ak-pb-initial));
+    padding-left: var(--ak-pl-sm, var(--ak-pl-initial));
+    width: var(--ak-width-sm, var(--ak-width-initial));
+    min-width: var(--ak-min-width-sm, var(--ak-min-width-initial));
+    max-width: var(--ak-max-width-sm, var(--ak-max-width-initial));
+    height: var(--ak-height-sm, var(--ak-height-initial));
+    min-height: var(--ak-min-height-sm, var(--ak-min-height-initial));
+    max-height: var(--ak-max-height-sm, var(--ak-max-height-initial));
+    position: var(--ak-position-sm, var(--ak-position-initial));
+    inset: var(--ak-inset-sm, var(--ak-inset-initial));
+    top: var(--ak-top-sm, var(--ak-top-initial));
+    right: var(--ak-right-sm, var(--ak-right-initial));
+    bottom: var(--ak-bottom-sm, var(--ak-bottom-initial));
+    left: var(--ak-left-sm, var(--ak-left-initial));
+    overflow: var(--ak-overflow-sm, var(--ak-overflow-initial));
+    overflow-x: var(--ak-overflow-x-sm, var(--ak-overflow-x-initial));
+    overflow-y: var(--ak-overflow-y-sm, var(--ak-overflow-y-initial));
+    flex-basis: var(--ak-flex-basis-sm, var(--ak-flex-basis-initial));
+    flex-grow: var(--ak-flex-grow-sm, var(--ak-flex-grow-initial));
+    flex-shrink: var(--ak-flex-shrink-sm, var(--ak-flex-shrink-initial));
+    grid-area: var(--ak-grid-area-sm, var(--ak-grid-area-initial));
+    grid-column: var(--ak-grid-column-sm, var(--ak-grid-column-initial));
+    grid-column-start: var(--ak-grid-column-start-sm, var(--ak-grid-column-start-initial));
+    grid-column-end: var(--ak-grid-column-end-sm, var(--ak-grid-column-end-initial));
+    grid-row: var(--ak-grid-row-sm, var(--ak-grid-row-initial));
+    grid-row-start: var(--ak-grid-row-start-sm, var(--ak-grid-row-start-initial));
+    grid-row-end: var(--ak-grid-row-end-sm, var(--ak-grid-row-end-initial));
+    gap: var(--ak-gap-sm, var(--ak-gap-initial));
+    column-gap: var(--ak-column-gap-sm, var(--ak-column-gap-initial));
+    row-gap: var(--ak-row-gap-sm, var(--ak-row-gap-initial));
+    flex-direction: var(--ak-flex-direction-sm, var(--ak-flex-direction-initial));
+    align-items: var(--ak-align-items-sm, var(--ak-align-items-initial));
+    justify-content: var(--ak-justify-content-sm, var(--ak-justify-content-initial));
+    flex-wrap: var(--ak-flex-wrap-sm, var(--ak-flex-wrap-initial));
+    grid-template-areas: var(--ak-grid-template-areas-sm, var(--ak-grid-template-areas-initial));
+    grid-template-columns: var(--ak-grid-template-columns-sm, var(--ak-grid-template-columns-initial));
+    grid-template-rows: var(--ak-grid-template-rows-sm, var(--ak-grid-template-rows-initial));
+    grid-auto-flow: var(--ak-grid-auto-flow-sm, var(--ak-grid-auto-flow-initial));
+  }
+
+  :where([data-slot="container"]) {
+    width: var(--ak-width-sm, var(--ak-width-initial, 100%));
+    max-width: min(100%,
+      var(--ak-max-width-sm, var(--ak-max-width-initial, var(--ak-container-inline-size))));
+    margin-left: var(--ak-ml-sm, var(--ak-ml-initial, auto));
+    margin-right: var(--ak-mr-sm, var(--ak-mr-initial, auto));
+    padding-left: var(--ak-pl-sm, var(--ak-pl-initial, var(--ak-px-sm, var(--ak-px-initial, var(--ak-layout-page-gutter)))));
+    padding-right: var(--ak-pr-sm, var(--ak-pr-initial, var(--ak-px-sm, var(--ak-px-initial, var(--ak-layout-page-gutter)))));
+    display: block;
+  }
+}
+
+@media (width >= 48rem) {
+  :where([data-slot="container"][data-variant="default"]), :where([data-slot="container"][data-variant="sm"]), :where([data-slot="container"][data-variant="md"]) {
+    --ak-container-inline-size: 720px;
+  }
+
+  :where([data-ak-layout="true"]) {
+    display: var(--ak-display-md, var(--ak-display-sm, var(--ak-display-initial)));
+    margin: var(--ak-m-md, var(--ak-m-sm, var(--ak-m-initial)));
+    margin-block: var(--ak-my-md, var(--ak-my-sm, var(--ak-my-initial)));
+    margin-inline: var(--ak-mx-md, var(--ak-mx-sm, var(--ak-mx-initial)));
+    margin-top: var(--ak-mt-md, var(--ak-mt-sm, var(--ak-mt-initial)));
+    margin-right: var(--ak-mr-md, var(--ak-mr-sm, var(--ak-mr-initial)));
+    margin-bottom: var(--ak-mb-md, var(--ak-mb-sm, var(--ak-mb-initial)));
+    margin-left: var(--ak-ml-md, var(--ak-ml-sm, var(--ak-ml-initial)));
+    padding: var(--ak-p-md, var(--ak-p-sm, var(--ak-p-initial)));
+    padding-block: var(--ak-py-md, var(--ak-py-sm, var(--ak-py-initial)));
+    padding-inline: var(--ak-px-md, var(--ak-px-sm, var(--ak-px-initial)));
+    padding-top: var(--ak-pt-md, var(--ak-pt-sm, var(--ak-pt-initial)));
+    padding-right: var(--ak-pr-md, var(--ak-pr-sm, var(--ak-pr-initial)));
+    padding-bottom: var(--ak-pb-md, var(--ak-pb-sm, var(--ak-pb-initial)));
+    padding-left: var(--ak-pl-md, var(--ak-pl-sm, var(--ak-pl-initial)));
+    width: var(--ak-width-md, var(--ak-width-sm, var(--ak-width-initial)));
+    min-width: var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-initial)));
+    max-width: var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-initial)));
+    height: var(--ak-height-md, var(--ak-height-sm, var(--ak-height-initial)));
+    min-height: var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-initial)));
+    max-height: var(--ak-max-height-md, var(--ak-max-height-sm, var(--ak-max-height-initial)));
+    position: var(--ak-position-md, var(--ak-position-sm, var(--ak-position-initial)));
+    inset: var(--ak-inset-md, var(--ak-inset-sm, var(--ak-inset-initial)));
+    top: var(--ak-top-md, var(--ak-top-sm, var(--ak-top-initial)));
+    right: var(--ak-right-md, var(--ak-right-sm, var(--ak-right-initial)));
+    bottom: var(--ak-bottom-md, var(--ak-bottom-sm, var(--ak-bottom-initial)));
+    left: var(--ak-left-md, var(--ak-left-sm, var(--ak-left-initial)));
+    overflow: var(--ak-overflow-md, var(--ak-overflow-sm, var(--ak-overflow-initial)));
+    overflow-x: var(--ak-overflow-x-md, var(--ak-overflow-x-sm, var(--ak-overflow-x-initial)));
+    overflow-y: var(--ak-overflow-y-md, var(--ak-overflow-y-sm, var(--ak-overflow-y-initial)));
+    flex-basis: var(--ak-flex-basis-md, var(--ak-flex-basis-sm, var(--ak-flex-basis-initial)));
+    flex-grow: var(--ak-flex-grow-md, var(--ak-flex-grow-sm, var(--ak-flex-grow-initial)));
+    flex-shrink: var(--ak-flex-shrink-md, var(--ak-flex-shrink-sm, var(--ak-flex-shrink-initial)));
+    grid-area: var(--ak-grid-area-md, var(--ak-grid-area-sm, var(--ak-grid-area-initial)));
+    grid-column: var(--ak-grid-column-md, var(--ak-grid-column-sm, var(--ak-grid-column-initial)));
+    grid-column-start: var(--ak-grid-column-start-md, var(--ak-grid-column-start-sm, var(--ak-grid-column-start-initial)));
+    grid-column-end: var(--ak-grid-column-end-md, var(--ak-grid-column-end-sm, var(--ak-grid-column-end-initial)));
+    grid-row: var(--ak-grid-row-md, var(--ak-grid-row-sm, var(--ak-grid-row-initial)));
+    grid-row-start: var(--ak-grid-row-start-md, var(--ak-grid-row-start-sm, var(--ak-grid-row-start-initial)));
+    grid-row-end: var(--ak-grid-row-end-md, var(--ak-grid-row-end-sm, var(--ak-grid-row-end-initial)));
+    gap: var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-initial)));
+    column-gap: var(--ak-column-gap-md, var(--ak-column-gap-sm, var(--ak-column-gap-initial)));
+    row-gap: var(--ak-row-gap-md, var(--ak-row-gap-sm, var(--ak-row-gap-initial)));
+    flex-direction: var(--ak-flex-direction-md, var(--ak-flex-direction-sm, var(--ak-flex-direction-initial)));
+    align-items: var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-initial)));
+    justify-content: var(--ak-justify-content-md, var(--ak-justify-content-sm, var(--ak-justify-content-initial)));
+    flex-wrap: var(--ak-flex-wrap-md, var(--ak-flex-wrap-sm, var(--ak-flex-wrap-initial)));
+    grid-template-areas: var(--ak-grid-template-areas-md, var(--ak-grid-template-areas-sm, var(--ak-grid-template-areas-initial)));
+    grid-template-columns: var(--ak-grid-template-columns-md, var(--ak-grid-template-columns-sm, var(--ak-grid-template-columns-initial)));
+    grid-template-rows: var(--ak-grid-template-rows-md, var(--ak-grid-template-rows-sm, var(--ak-grid-template-rows-initial)));
+    grid-auto-flow: var(--ak-grid-auto-flow-md, var(--ak-grid-auto-flow-sm, var(--ak-grid-auto-flow-initial)));
+  }
+
+  :where([data-slot="container"]) {
+    width: var(--ak-width-md, var(--ak-width-sm, var(--ak-width-initial, 100%)));
+    max-width: min(100%,
+      var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-initial, var(--ak-container-inline-size)))));
+    margin-left: var(--ak-ml-md, var(--ak-ml-sm, var(--ak-ml-initial, auto)));
+    margin-right: var(--ak-mr-md, var(--ak-mr-sm, var(--ak-mr-initial, auto)));
+    padding-left: var(--ak-pl-md, var(--ak-pl-sm, var(--ak-pl-initial, var(--ak-px-md, var(--ak-px-sm, var(--ak-px-initial, var(--ak-layout-page-gutter)))))));
+    padding-right: var(--ak-pr-md, var(--ak-pr-sm, var(--ak-pr-initial, var(--ak-px-md, var(--ak-px-sm, var(--ak-px-initial, var(--ak-layout-page-gutter)))))));
+    display: block;
+  }
+}
+
+@media (width >= 62rem) {
+  :where([data-slot="container"][data-variant="default"]), :where([data-slot="container"][data-variant="sm"]), :where([data-slot="container"][data-variant="md"]), :where([data-slot="container"][data-variant="lg"]) {
+    --ak-container-inline-size: 960px;
+  }
+}
+
+@media (width >= 64rem) {
+  :where([data-ak-layout="true"]) {
+    display: var(--ak-display-lg, var(--ak-display-md, var(--ak-display-sm, var(--ak-display-initial))));
+    margin: var(--ak-m-lg, var(--ak-m-md, var(--ak-m-sm, var(--ak-m-initial))));
+    margin-block: var(--ak-my-lg, var(--ak-my-md, var(--ak-my-sm, var(--ak-my-initial))));
+    margin-inline: var(--ak-mx-lg, var(--ak-mx-md, var(--ak-mx-sm, var(--ak-mx-initial))));
+    margin-top: var(--ak-mt-lg, var(--ak-mt-md, var(--ak-mt-sm, var(--ak-mt-initial))));
+    margin-right: var(--ak-mr-lg, var(--ak-mr-md, var(--ak-mr-sm, var(--ak-mr-initial))));
+    margin-bottom: var(--ak-mb-lg, var(--ak-mb-md, var(--ak-mb-sm, var(--ak-mb-initial))));
+    margin-left: var(--ak-ml-lg, var(--ak-ml-md, var(--ak-ml-sm, var(--ak-ml-initial))));
+    padding: var(--ak-p-lg, var(--ak-p-md, var(--ak-p-sm, var(--ak-p-initial))));
+    padding-block: var(--ak-py-lg, var(--ak-py-md, var(--ak-py-sm, var(--ak-py-initial))));
+    padding-inline: var(--ak-px-lg, var(--ak-px-md, var(--ak-px-sm, var(--ak-px-initial))));
+    padding-top: var(--ak-pt-lg, var(--ak-pt-md, var(--ak-pt-sm, var(--ak-pt-initial))));
+    padding-right: var(--ak-pr-lg, var(--ak-pr-md, var(--ak-pr-sm, var(--ak-pr-initial))));
+    padding-bottom: var(--ak-pb-lg, var(--ak-pb-md, var(--ak-pb-sm, var(--ak-pb-initial))));
+    padding-left: var(--ak-pl-lg, var(--ak-pl-md, var(--ak-pl-sm, var(--ak-pl-initial))));
+    width: var(--ak-width-lg, var(--ak-width-md, var(--ak-width-sm, var(--ak-width-initial))));
+    min-width: var(--ak-min-width-lg, var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-initial))));
+    max-width: var(--ak-max-width-lg, var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-initial))));
+    height: var(--ak-height-lg, var(--ak-height-md, var(--ak-height-sm, var(--ak-height-initial))));
+    min-height: var(--ak-min-height-lg, var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-initial))));
+    max-height: var(--ak-max-height-lg, var(--ak-max-height-md, var(--ak-max-height-sm, var(--ak-max-height-initial))));
+    position: var(--ak-position-lg, var(--ak-position-md, var(--ak-position-sm, var(--ak-position-initial))));
+    inset: var(--ak-inset-lg, var(--ak-inset-md, var(--ak-inset-sm, var(--ak-inset-initial))));
+    top: var(--ak-top-lg, var(--ak-top-md, var(--ak-top-sm, var(--ak-top-initial))));
+    right: var(--ak-right-lg, var(--ak-right-md, var(--ak-right-sm, var(--ak-right-initial))));
+    bottom: var(--ak-bottom-lg, var(--ak-bottom-md, var(--ak-bottom-sm, var(--ak-bottom-initial))));
+    left: var(--ak-left-lg, var(--ak-left-md, var(--ak-left-sm, var(--ak-left-initial))));
+    overflow: var(--ak-overflow-lg, var(--ak-overflow-md, var(--ak-overflow-sm, var(--ak-overflow-initial))));
+    overflow-x: var(--ak-overflow-x-lg, var(--ak-overflow-x-md, var(--ak-overflow-x-sm, var(--ak-overflow-x-initial))));
+    overflow-y: var(--ak-overflow-y-lg, var(--ak-overflow-y-md, var(--ak-overflow-y-sm, var(--ak-overflow-y-initial))));
+    flex-basis: var(--ak-flex-basis-lg, var(--ak-flex-basis-md, var(--ak-flex-basis-sm, var(--ak-flex-basis-initial))));
+    flex-grow: var(--ak-flex-grow-lg, var(--ak-flex-grow-md, var(--ak-flex-grow-sm, var(--ak-flex-grow-initial))));
+    flex-shrink: var(--ak-flex-shrink-lg, var(--ak-flex-shrink-md, var(--ak-flex-shrink-sm, var(--ak-flex-shrink-initial))));
+    grid-area: var(--ak-grid-area-lg, var(--ak-grid-area-md, var(--ak-grid-area-sm, var(--ak-grid-area-initial))));
+    grid-column: var(--ak-grid-column-lg, var(--ak-grid-column-md, var(--ak-grid-column-sm, var(--ak-grid-column-initial))));
+    grid-column-start: var(--ak-grid-column-start-lg, var(--ak-grid-column-start-md, var(--ak-grid-column-start-sm, var(--ak-grid-column-start-initial))));
+    grid-column-end: var(--ak-grid-column-end-lg, var(--ak-grid-column-end-md, var(--ak-grid-column-end-sm, var(--ak-grid-column-end-initial))));
+    grid-row: var(--ak-grid-row-lg, var(--ak-grid-row-md, var(--ak-grid-row-sm, var(--ak-grid-row-initial))));
+    grid-row-start: var(--ak-grid-row-start-lg, var(--ak-grid-row-start-md, var(--ak-grid-row-start-sm, var(--ak-grid-row-start-initial))));
+    grid-row-end: var(--ak-grid-row-end-lg, var(--ak-grid-row-end-md, var(--ak-grid-row-end-sm, var(--ak-grid-row-end-initial))));
+    gap: var(--ak-gap-lg, var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-initial))));
+    column-gap: var(--ak-column-gap-lg, var(--ak-column-gap-md, var(--ak-column-gap-sm, var(--ak-column-gap-initial))));
+    row-gap: var(--ak-row-gap-lg, var(--ak-row-gap-md, var(--ak-row-gap-sm, var(--ak-row-gap-initial))));
+    flex-direction: var(--ak-flex-direction-lg, var(--ak-flex-direction-md, var(--ak-flex-direction-sm, var(--ak-flex-direction-initial))));
+    align-items: var(--ak-align-items-lg, var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-initial))));
+    justify-content: var(--ak-justify-content-lg, var(--ak-justify-content-md, var(--ak-justify-content-sm, var(--ak-justify-content-initial))));
+    flex-wrap: var(--ak-flex-wrap-lg, var(--ak-flex-wrap-md, var(--ak-flex-wrap-sm, var(--ak-flex-wrap-initial))));
+    grid-template-areas: var(--ak-grid-template-areas-lg, var(--ak-grid-template-areas-md, var(--ak-grid-template-areas-sm, var(--ak-grid-template-areas-initial))));
+    grid-template-columns: var(--ak-grid-template-columns-lg, var(--ak-grid-template-columns-md, var(--ak-grid-template-columns-sm, var(--ak-grid-template-columns-initial))));
+    grid-template-rows: var(--ak-grid-template-rows-lg, var(--ak-grid-template-rows-md, var(--ak-grid-template-rows-sm, var(--ak-grid-template-rows-initial))));
+    grid-auto-flow: var(--ak-grid-auto-flow-lg, var(--ak-grid-auto-flow-md, var(--ak-grid-auto-flow-sm, var(--ak-grid-auto-flow-initial))));
+  }
+
+  :where([data-slot="container"]) {
+    width: var(--ak-width-lg, var(--ak-width-md, var(--ak-width-sm, var(--ak-width-initial, 100%))));
+    max-width: min(100%,
+      var(--ak-max-width-lg, var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-initial, var(--ak-container-inline-size))))));
+    margin-left: var(--ak-ml-lg, var(--ak-ml-md, var(--ak-ml-sm, var(--ak-ml-initial, auto))));
+    margin-right: var(--ak-mr-lg, var(--ak-mr-md, var(--ak-mr-sm, var(--ak-mr-initial, auto))));
+    padding-left: var(--ak-pl-lg, var(--ak-pl-md, var(--ak-pl-sm, var(--ak-pl-initial, var(--ak-px-lg, var(--ak-px-md, var(--ak-px-sm, var(--ak-px-initial, var(--ak-layout-page-gutter)))))))));
+    padding-right: var(--ak-pr-lg, var(--ak-pr-md, var(--ak-pr-sm, var(--ak-pr-initial, var(--ak-px-lg, var(--ak-px-md, var(--ak-px-sm, var(--ak-px-initial, var(--ak-layout-page-gutter)))))))));
+    display: block;
+  }
+}
+
+@media (width >= 75rem) {
+  :where([data-slot="container"][data-variant="default"]), :where([data-slot="container"][data-variant="sm"]), :where([data-slot="container"][data-variant="md"]), :where([data-slot="container"][data-variant="lg"]), :where([data-slot="container"][data-variant="xl"]) {
+    --ak-container-inline-size: 1140px;
+  }
+}
+
+@media (width >= 80rem) {
+  :where([data-ak-layout="true"]) {
+    display: var(--ak-display-xl, var(--ak-display-lg, var(--ak-display-md, var(--ak-display-sm, var(--ak-display-initial)))));
+    margin: var(--ak-m-xl, var(--ak-m-lg, var(--ak-m-md, var(--ak-m-sm, var(--ak-m-initial)))));
+    margin-block: var(--ak-my-xl, var(--ak-my-lg, var(--ak-my-md, var(--ak-my-sm, var(--ak-my-initial)))));
+    margin-inline: var(--ak-mx-xl, var(--ak-mx-lg, var(--ak-mx-md, var(--ak-mx-sm, var(--ak-mx-initial)))));
+    margin-top: var(--ak-mt-xl, var(--ak-mt-lg, var(--ak-mt-md, var(--ak-mt-sm, var(--ak-mt-initial)))));
+    margin-right: var(--ak-mr-xl, var(--ak-mr-lg, var(--ak-mr-md, var(--ak-mr-sm, var(--ak-mr-initial)))));
+    margin-bottom: var(--ak-mb-xl, var(--ak-mb-lg, var(--ak-mb-md, var(--ak-mb-sm, var(--ak-mb-initial)))));
+    margin-left: var(--ak-ml-xl, var(--ak-ml-lg, var(--ak-ml-md, var(--ak-ml-sm, var(--ak-ml-initial)))));
+    padding: var(--ak-p-xl, var(--ak-p-lg, var(--ak-p-md, var(--ak-p-sm, var(--ak-p-initial)))));
+    padding-block: var(--ak-py-xl, var(--ak-py-lg, var(--ak-py-md, var(--ak-py-sm, var(--ak-py-initial)))));
+    padding-inline: var(--ak-px-xl, var(--ak-px-lg, var(--ak-px-md, var(--ak-px-sm, var(--ak-px-initial)))));
+    padding-top: var(--ak-pt-xl, var(--ak-pt-lg, var(--ak-pt-md, var(--ak-pt-sm, var(--ak-pt-initial)))));
+    padding-right: var(--ak-pr-xl, var(--ak-pr-lg, var(--ak-pr-md, var(--ak-pr-sm, var(--ak-pr-initial)))));
+    padding-bottom: var(--ak-pb-xl, var(--ak-pb-lg, var(--ak-pb-md, var(--ak-pb-sm, var(--ak-pb-initial)))));
+    padding-left: var(--ak-pl-xl, var(--ak-pl-lg, var(--ak-pl-md, var(--ak-pl-sm, var(--ak-pl-initial)))));
+    width: var(--ak-width-xl, var(--ak-width-lg, var(--ak-width-md, var(--ak-width-sm, var(--ak-width-initial)))));
+    min-width: var(--ak-min-width-xl, var(--ak-min-width-lg, var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-initial)))));
+    max-width: var(--ak-max-width-xl, var(--ak-max-width-lg, var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-initial)))));
+    height: var(--ak-height-xl, var(--ak-height-lg, var(--ak-height-md, var(--ak-height-sm, var(--ak-height-initial)))));
+    min-height: var(--ak-min-height-xl, var(--ak-min-height-lg, var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-initial)))));
+    max-height: var(--ak-max-height-xl, var(--ak-max-height-lg, var(--ak-max-height-md, var(--ak-max-height-sm, var(--ak-max-height-initial)))));
+    position: var(--ak-position-xl, var(--ak-position-lg, var(--ak-position-md, var(--ak-position-sm, var(--ak-position-initial)))));
+    inset: var(--ak-inset-xl, var(--ak-inset-lg, var(--ak-inset-md, var(--ak-inset-sm, var(--ak-inset-initial)))));
+    top: var(--ak-top-xl, var(--ak-top-lg, var(--ak-top-md, var(--ak-top-sm, var(--ak-top-initial)))));
+    right: var(--ak-right-xl, var(--ak-right-lg, var(--ak-right-md, var(--ak-right-sm, var(--ak-right-initial)))));
+    bottom: var(--ak-bottom-xl, var(--ak-bottom-lg, var(--ak-bottom-md, var(--ak-bottom-sm, var(--ak-bottom-initial)))));
+    left: var(--ak-left-xl, var(--ak-left-lg, var(--ak-left-md, var(--ak-left-sm, var(--ak-left-initial)))));
+    overflow: var(--ak-overflow-xl, var(--ak-overflow-lg, var(--ak-overflow-md, var(--ak-overflow-sm, var(--ak-overflow-initial)))));
+    overflow-x: var(--ak-overflow-x-xl, var(--ak-overflow-x-lg, var(--ak-overflow-x-md, var(--ak-overflow-x-sm, var(--ak-overflow-x-initial)))));
+    overflow-y: var(--ak-overflow-y-xl, var(--ak-overflow-y-lg, var(--ak-overflow-y-md, var(--ak-overflow-y-sm, var(--ak-overflow-y-initial)))));
+    flex-basis: var(--ak-flex-basis-xl, var(--ak-flex-basis-lg, var(--ak-flex-basis-md, var(--ak-flex-basis-sm, var(--ak-flex-basis-initial)))));
+    flex-grow: var(--ak-flex-grow-xl, var(--ak-flex-grow-lg, var(--ak-flex-grow-md, var(--ak-flex-grow-sm, var(--ak-flex-grow-initial)))));
+    flex-shrink: var(--ak-flex-shrink-xl, var(--ak-flex-shrink-lg, var(--ak-flex-shrink-md, var(--ak-flex-shrink-sm, var(--ak-flex-shrink-initial)))));
+    grid-area: var(--ak-grid-area-xl, var(--ak-grid-area-lg, var(--ak-grid-area-md, var(--ak-grid-area-sm, var(--ak-grid-area-initial)))));
+    grid-column: var(--ak-grid-column-xl, var(--ak-grid-column-lg, var(--ak-grid-column-md, var(--ak-grid-column-sm, var(--ak-grid-column-initial)))));
+    grid-column-start: var(--ak-grid-column-start-xl, var(--ak-grid-column-start-lg, var(--ak-grid-column-start-md, var(--ak-grid-column-start-sm, var(--ak-grid-column-start-initial)))));
+    grid-column-end: var(--ak-grid-column-end-xl, var(--ak-grid-column-end-lg, var(--ak-grid-column-end-md, var(--ak-grid-column-end-sm, var(--ak-grid-column-end-initial)))));
+    grid-row: var(--ak-grid-row-xl, var(--ak-grid-row-lg, var(--ak-grid-row-md, var(--ak-grid-row-sm, var(--ak-grid-row-initial)))));
+    grid-row-start: var(--ak-grid-row-start-xl, var(--ak-grid-row-start-lg, var(--ak-grid-row-start-md, var(--ak-grid-row-start-sm, var(--ak-grid-row-start-initial)))));
+    grid-row-end: var(--ak-grid-row-end-xl, var(--ak-grid-row-end-lg, var(--ak-grid-row-end-md, var(--ak-grid-row-end-sm, var(--ak-grid-row-end-initial)))));
+    gap: var(--ak-gap-xl, var(--ak-gap-lg, var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-initial)))));
+    column-gap: var(--ak-column-gap-xl, var(--ak-column-gap-lg, var(--ak-column-gap-md, var(--ak-column-gap-sm, var(--ak-column-gap-initial)))));
+    row-gap: var(--ak-row-gap-xl, var(--ak-row-gap-lg, var(--ak-row-gap-md, var(--ak-row-gap-sm, var(--ak-row-gap-initial)))));
+    flex-direction: var(--ak-flex-direction-xl, var(--ak-flex-direction-lg, var(--ak-flex-direction-md, var(--ak-flex-direction-sm, var(--ak-flex-direction-initial)))));
+    align-items: var(--ak-align-items-xl, var(--ak-align-items-lg, var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-initial)))));
+    justify-content: var(--ak-justify-content-xl, var(--ak-justify-content-lg, var(--ak-justify-content-md, var(--ak-justify-content-sm, var(--ak-justify-content-initial)))));
+    flex-wrap: var(--ak-flex-wrap-xl, var(--ak-flex-wrap-lg, var(--ak-flex-wrap-md, var(--ak-flex-wrap-sm, var(--ak-flex-wrap-initial)))));
+    grid-template-areas: var(--ak-grid-template-areas-xl, var(--ak-grid-template-areas-lg, var(--ak-grid-template-areas-md, var(--ak-grid-template-areas-sm, var(--ak-grid-template-areas-initial)))));
+    grid-template-columns: var(--ak-grid-template-columns-xl, var(--ak-grid-template-columns-lg, var(--ak-grid-template-columns-md, var(--ak-grid-template-columns-sm, var(--ak-grid-template-columns-initial)))));
+    grid-template-rows: var(--ak-grid-template-rows-xl, var(--ak-grid-template-rows-lg, var(--ak-grid-template-rows-md, var(--ak-grid-template-rows-sm, var(--ak-grid-template-rows-initial)))));
+    grid-auto-flow: var(--ak-grid-auto-flow-xl, var(--ak-grid-auto-flow-lg, var(--ak-grid-auto-flow-md, var(--ak-grid-auto-flow-sm, var(--ak-grid-auto-flow-initial)))));
+  }
+
+  :where([data-slot="container"]) {
+    width: var(--ak-width-xl, var(--ak-width-lg, var(--ak-width-md, var(--ak-width-sm, var(--ak-width-initial, 100%)))));
+    max-width: min(100%,
+      var(--ak-max-width-xl, var(--ak-max-width-lg, var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-initial, var(--ak-container-inline-size)))))));
+    margin-left: var(--ak-ml-xl, var(--ak-ml-lg, var(--ak-ml-md, var(--ak-ml-sm, var(--ak-ml-initial, auto)))));
+    margin-right: var(--ak-mr-xl, var(--ak-mr-lg, var(--ak-mr-md, var(--ak-mr-sm, var(--ak-mr-initial, auto)))));
+    padding-left: var(--ak-pl-xl, var(--ak-pl-lg, var(--ak-pl-md, var(--ak-pl-sm, var(--ak-pl-initial, var(--ak-px-xl, var(--ak-px-lg, var(--ak-px-md, var(--ak-px-sm, var(--ak-px-initial, var(--ak-layout-page-gutter)))))))))));
+    padding-right: var(--ak-pr-xl, var(--ak-pr-lg, var(--ak-pr-md, var(--ak-pr-sm, var(--ak-pr-initial, var(--ak-px-xl, var(--ak-px-lg, var(--ak-px-md, var(--ak-px-sm, var(--ak-px-initial, var(--ak-layout-page-gutter)))))))))));
+    display: block;
+  }
+}
+
+@media (width >= 87.5rem) {
+  :where([data-slot="container"][data-variant="default"]), :where([data-slot="container"][data-variant="sm"]), :where([data-slot="container"][data-variant="md"]), :where([data-slot="container"][data-variant="lg"]), :where([data-slot="container"][data-variant="xl"]), :where([data-slot="container"][data-variant="xxl"]) {
+    --ak-container-inline-size: 1320px;
+  }
+}
+
+:where([data-slot="topbar-layout"]), :where([data-slot="sidebar-layout"]) {
+  background: var(--ak-color-bg);
+  min-block-size: 100vh;
+  color: var(--ak-color-text);
+}
+
+:where([data-slot="topbar-layout"]) {
+  flex-direction: column;
+  display: flex;
+}
+
+:where([data-slot="topbar-layout"]) > :where([data-slot="navbar"]) {
+  min-block-size: var(--ak-layout-navbar-height);
+  padding: .875rem var(--ak-layout-page-gutter);
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--ak-space-sm) var(--ak-space-md);
+  border-bottom: 1px solid var(--ak-color-border);
+  background: color-mix(in srgb, var(--ak-color-surface) 98%, transparent);
+  flex-wrap: wrap;
+  display: flex;
+}
+
+:where([data-slot="sidebar-layout"]) {
+  gap: var(--ak-space-lg);
+  flex-direction: column;
+  display: flex;
+}
+
+:where([data-slot="sidebar-layout"][data-sidebar-position="end"]) {
+  flex-direction: column;
+}
+
+:where([data-slot="sidebar-layout"]) > :where([data-slot="sidebar"]) {
+  background: color-mix(in srgb, var(--ak-color-surface-muted) 92%, var(--ak-color-surface));
+  border-inline-end: 0;
+  border-block-end: 1px solid var(--ak-color-border);
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+:where([data-slot="topbar-layout"]) > :where([data-slot="main"]), :where([data-slot="sidebar-layout"]) > :where([data-slot="main"]) {
+  inline-size: 100%;
+  min-inline-size: 0;
+  padding: var(--ak-layout-page-gutter);
+  flex: auto;
+}
+
+:where([data-slot="flex"][data-collapse-below="sm"]), :where([data-slot="flex"][data-collapse-below="md"]), :where([data-slot="flex"][data-collapse-below="lg"]), :where([data-slot="flex"][data-collapse-below="xl"]) {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+:where([data-slot="sidebar-layout"][data-collapse-below="sm"]), :where([data-slot="sidebar-layout"][data-collapse-below="md"]), :where([data-slot="sidebar-layout"][data-collapse-below="lg"]), :where([data-slot="sidebar-layout"][data-collapse-below="xl"]) {
+  flex-direction: column;
+}
+
+:where([data-slot="sidebar-layout"][data-collapse-below="sm"]) > :where([data-slot="sidebar"]), :where([data-slot="sidebar-layout"][data-collapse-below="md"]) > :where([data-slot="sidebar"]), :where([data-slot="sidebar-layout"][data-collapse-below="lg"]) > :where([data-slot="sidebar"]), :where([data-slot="sidebar-layout"][data-collapse-below="xl"]) > :where([data-slot="sidebar"]) {
+  flex-basis: auto;
+  inline-size: 100%;
+}
+
+:where([data-slot="sidebar-layout"][data-sidebar-width="sm"]) > :where([data-slot="sidebar"]) {
+  inline-size: var(--ak-layout-sidebar-width-sm);
+  flex-basis: var(--ak-layout-sidebar-width-sm);
+}
+
+:where([data-slot="sidebar-layout"][data-sidebar-width="md"]) > :where([data-slot="sidebar"]) {
+  inline-size: var(--ak-layout-sidebar-width-md);
+  flex-basis: var(--ak-layout-sidebar-width-md);
+}
+
+:where([data-slot="sidebar-layout"][data-sidebar-width="lg"]) > :where([data-slot="sidebar"]) {
+  inline-size: var(--ak-layout-sidebar-width-lg);
+  flex-basis: var(--ak-layout-sidebar-width-lg);
+}
+
+:where([data-slot="sidebar-layout"][data-sidebar-width="xl"]) > :where([data-slot="sidebar"]) {
+  inline-size: var(--ak-layout-sidebar-width-xl);
+  flex-basis: var(--ak-layout-sidebar-width-xl);
+}
+
+@media (width >= 40rem) {
+  :where([data-slot="flex"][data-collapse-below="sm"]) {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  :where([data-slot="sidebar-layout"]) {
+    flex-direction: row;
+    align-items: stretch;
+  }
+
+  :where([data-slot="sidebar-layout"][data-sidebar-position="end"]) {
+    flex-direction: row-reverse;
+  }
+
+  :where([data-slot="sidebar-layout"][data-collapse-below="md"]), :where([data-slot="sidebar-layout"][data-collapse-below="lg"]), :where([data-slot="sidebar-layout"][data-collapse-below="xl"]) {
+    flex-direction: column;
+  }
+
+  :where([data-slot="sidebar-layout"]) > :where([data-slot="sidebar"]) {
+    inline-size: var(--ak-layout-sidebar-width);
+    flex-basis: var(--ak-layout-sidebar-width);
+    border-block-end: 0;
+    border-inline-end: 1px solid var(--ak-color-border);
+  }
+
+  :where([data-slot="sidebar-layout"][data-collapse-below="md"]) > :where([data-slot="sidebar"]), :where([data-slot="sidebar-layout"][data-collapse-below="lg"]) > :where([data-slot="sidebar"]), :where([data-slot="sidebar-layout"][data-collapse-below="xl"]) > :where([data-slot="sidebar"]) {
+    border-block-end: 1px solid var(--ak-color-border);
+    border-inline-end: 0;
+    flex-basis: auto;
+    inline-size: 100%;
+  }
+}
+
+@media (width >= 48rem) {
+  :where([data-slot="topbar-layout"]) > :where([data-slot="navbar"]) {
+    padding-inline: var(--ak-layout-page-gutter);
+  }
+
+  :where([data-slot="topbar-layout"]) > :where([data-slot="main"]), :where([data-slot="sidebar-layout"]) > :where([data-slot="main"]) {
+    padding: var(--ak-layout-page-gutter);
+  }
+
+  :where([data-slot="flex"][data-collapse-below="md"]) {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  :where([data-slot="sidebar-layout"][data-collapse-below="md"]) {
+    flex-direction: row;
+    align-items: stretch;
+  }
+
+  :where([data-slot="sidebar-layout"][data-sidebar-position="end"][data-collapse-below="md"]) {
+    flex-direction: row-reverse;
+  }
+
+  :where([data-slot="sidebar-layout"][data-collapse-below="md"]) > :where([data-slot="sidebar"]) {
+    inline-size: var(--ak-layout-sidebar-width);
+    flex-basis: var(--ak-layout-sidebar-width);
+    border-block-end: 0;
+    border-inline-end: 1px solid var(--ak-color-border);
+  }
+}
+
+@media (width >= 64rem) {
+  :where([data-slot="flex"][data-collapse-below="lg"]) {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  :where([data-slot="sidebar-layout"][data-collapse-below="lg"]) {
+    flex-direction: row;
+    align-items: stretch;
+  }
+
+  :where([data-slot="sidebar-layout"][data-sidebar-position="end"][data-collapse-below="lg"]) {
+    flex-direction: row-reverse;
+  }
+
+  :where([data-slot="sidebar-layout"][data-collapse-below="lg"]) > :where([data-slot="sidebar"]) {
+    inline-size: var(--ak-layout-sidebar-width);
+    flex-basis: var(--ak-layout-sidebar-width);
+    border-block-end: 0;
+    border-inline-end: 1px solid var(--ak-color-border);
+  }
+}
+
+@media (width >= 80rem) {
+  :where([data-slot="flex"][data-collapse-below="xl"]) {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  :where([data-slot="sidebar-layout"][data-collapse-below="xl"]) {
+    flex-direction: row;
+    align-items: stretch;
+  }
+
+  :where([data-slot="sidebar-layout"][data-sidebar-position="end"][data-collapse-below="xl"]) {
+    flex-direction: row-reverse;
+  }
+
+  :where([data-slot="sidebar-layout"][data-collapse-below="xl"]) > :where([data-slot="sidebar"]) {
+    inline-size: var(--ak-layout-sidebar-width);
+    flex-basis: var(--ak-layout-sidebar-width);
+    border-block-end: 0;
+    border-inline-end: 1px solid var(--ak-color-border);
+  }
+}
+
+:where(.empty-state, [data-slot="empty-state"]) {
+  place-items: center;
+  gap: var(--ak-space-3);
+  min-block-size: 18rem;
+  padding: var(--ak-space-7) var(--ak-space-4);
+  border: 1px dashed var(--ak-color-border);
+  border-radius: var(--ak-radius-lg);
+  background: color-mix(in srgb, var(--ak-color-surface-muted) 80%, transparent);
+  text-align: center;
+  display: grid;
+}
+
+:where(.empty-state-icon, [data-slot="empty-state-icon"]) {
+  border-radius: var(--ak-radius-round);
+  background: var(--ak-color-primary-soft);
+  block-size: 3rem;
+  inline-size: 3rem;
+  color: var(--ak-color-primary-ink);
+  place-items: center;
+  display: inline-grid;
+}
+
+:where(.empty-state-title, [data-slot="empty-state-title"]) {
+  color: var(--ak-color-text);
+  font-size: var(--ak-font-size-lg);
+  font-weight: var(--ak-font-weight-semibold);
+  margin: 0;
+}
+
+:where(.empty-state-description, [data-slot="empty-state-description"]) {
+  max-inline-size: 32rem;
+  color: var(--ak-color-text-muted);
+  line-height: var(--ak-line-height-normal);
+  margin: 0;
+}
+
+:where(.empty-state-actions, [data-slot="empty-state-actions"]) {
+  justify-content: center;
+  align-items: center;
+  gap: var(--ak-space-2);
+  flex-wrap: wrap;
+  display: inline-flex;
+}
+
+:where([data-slot="aspect-ratio"]) {
+  width: 100%;
+  display: block;
+  overflow: hidden;
+}
+
+:where([data-slot="theme-provider"]) {
+  min-block-size: 100vh;
+  color: var(--ak-color-text);
+  background: var(--ak-color-bg);
+}
+
+:where(html) {
+  background: var(--ak-color-bg);
+}
+
+:where(body) {
+  background: none;
+}
+
+:where([data-slot="theme-picker"]) {
+  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, white 16%);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface);
+  min-width: 8rem;
+  min-height: 2.5rem;
+  color: var(--ak-color-text);
+  font: inherit;
+  font-size: var(--ak-font-size-sm);
+  box-shadow: var(--ak-shadow-sm);
+  padding-inline: .85rem 2.1rem;
+  line-height: 1;
+  display: inline-flex;
+}
+
+:where([data-slot="theme-picker"]:focus-visible) {
+  box-shadow: 0 0 0 1px var(--ak-color-surface),
+    0 0 0 4px var(--ak-color-focus-ring);
+  outline: none;
+}
+
+@layer components {
+  :where(.header, [data-slot="header"]) {
+    z-index: var(--ak-z-sticky);
+    border-block-end: 1px solid color-mix(in srgb, var(--ak-color-border) 88%, white 12%);
+    background: color-mix(in srgb, var(--ak-color-surface) 96%, transparent);
+    position: relative;
+    box-shadow: inset 0 1px #ffffff57;
+  }
+
+  :where(.header, [data-slot="header"])[data-position="static"] {
+    position: static;
+  }
+
+  :where(.header, [data-slot="header"])[data-position="relative"] {
+    position: relative;
+  }
+
+  :where(.header, [data-slot="header"])[data-position="sticky"] {
+    position: sticky;
+    inset-block-start: 0;
+  }
+
+  :where(.header, [data-slot="header"])[data-position="absolute"], :where(.header, [data-slot="header"])[data-position="fixed"] {
+    inset-block-start: 0;
+    inset-inline: 0;
+  }
+
+  :where(.header, [data-slot="header"])[data-position="absolute"] {
+    position: absolute;
+  }
+
+  :where(.header, [data-slot="header"])[data-position="fixed"] {
+    position: fixed;
+  }
+
+  :where(.navbar, [data-slot="navbar"]) {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--ak-space-md);
+    padding-block: var(--ak-space-xs);
+    display: flex;
+  }
+
+  :where(.navbar, [data-slot="navbar"]):has( > [data-slot="navbar-group"][data-align="center"]) {
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+    align-items: center;
+    display: grid;
+  }
+
+  :where(.navbar-brand, [data-slot="navbar-brand"]) {
+    align-items: center;
+    gap: var(--ak-space-sm);
+    min-inline-size: 0;
+    display: inline-flex;
+  }
+
+  :where(.navbar-brand, [data-slot="navbar-brand"]) :where(a) {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  :where(.navbar-group, [data-slot="navbar-group"]) {
+    align-items: center;
+    gap: var(--ak-space-md);
+    flex-wrap: wrap;
+    min-inline-size: 0;
+    display: inline-flex;
+  }
+
+  :where(.navbar-group[data-align="center"], [data-slot="navbar-group"][data-align="center"]) {
+    justify-content: center;
+    margin-inline: auto;
+  }
+
+  :where(.navbar, [data-slot="navbar"]):has( > [data-slot="navbar-group"][data-align="center"]) > :where(.navbar-brand, [data-slot="navbar-brand"]) {
+    grid-column: 1;
+    justify-self: start;
+  }
+
+  :where(.navbar, [data-slot="navbar"]):has( > [data-slot="navbar-group"][data-align="center"]) > :where(.navbar-group[data-align="center"], [data-slot="navbar-group"][data-align="center"]) {
+    grid-column: 2;
+    justify-self: center;
+    margin-inline: 0;
+  }
+
+  :where(.navbar, [data-slot="navbar"]):has( > [data-slot="navbar-group"][data-align="center"]) > :where(.navbar-group[data-align="end"], [data-slot="navbar-group"][data-align="end"]) {
+    grid-column: 3;
+    justify-self: end;
+    margin-inline-start: 0;
+  }
+
+  :where(.navbar-item, [data-slot="nav-item"]) {
+    min-block-size: 2.25rem;
+    padding-inline: var(--ak-space-sm);
+    border-radius: var(--ak-radius-md);
+    color: var(--ak-color-text-muted);
+    font-size: var(--ak-font-size-sm);
+    font-weight: var(--ak-font-weight-medium);
+    transition: color var(--ak-duration-fast) var(--ak-ease-standard),
+      background var(--ak-duration-fast) var(--ak-ease-standard);
+    border: 1px solid #0000;
+    align-items: center;
+    text-decoration: none;
+    display: inline-flex;
+  }
+
+  :where(.navbar-item:hover, [data-slot="nav-item"]:hover) {
+    color: var(--ak-color-text);
+    background: var(--ak-color-surface-muted);
+    border-color: color-mix(in srgb, var(--ak-color-border) 78%, white 22%);
+    box-shadow: var(--ak-shadow-sm);
+  }
+
+  :where(.navbar-item-icon, [data-slot="nav-item"][data-variant="icon"]) {
+    inline-size: var(--ak-density-control-height-md);
+    min-block-size: var(--ak-density-control-height-md);
+    color: var(--ak-color-text);
+    border: 1px solid #0000;
+    justify-content: center;
+    padding-inline: 0;
+    line-height: 1;
+  }
+
+  :where(.navbar-item-icon, [data-slot="nav-item"][data-variant="icon"]) > :where([data-slot="icon"], svg) {
+    color: currentColor;
+    flex: none;
+  }
+
+  :where(.navbar-item-icon:hover, [data-slot="nav-item"][data-variant="icon"]:hover) {
+    border-color: #0000;
+  }
+
+  :where(.navbar-item-icon:active, [data-slot="nav-item"][data-variant="icon"]:active) {
+    background: var(--ak-color-active);
+    border-color: #0000;
+  }
+
+  :where(.navbar-item[aria-current="page"], [data-slot="nav-item"][aria-current="page"], .navbar-item[data-active="true"], [data-slot="nav-item"][data-active="true"]) {
+    color: var(--ak-color-text);
+    background: color-mix(in srgb, var(--ak-color-primary-soft) 22%, var(--ak-color-surface));
+    border-color: color-mix(in srgb, var(--ak-color-primary) 16%, var(--ak-color-border));
+    box-shadow: var(--ak-shadow-sm);
+  }
+
+  :where(.navbar-item:focus-visible, [data-slot="nav-item"]:focus-visible) {
+    box-shadow: 0 0 0 1px var(--ak-color-surface),
+      0 0 0 4px var(--ak-color-focus-ring);
+    outline: none;
+  }
+
+  :where(.navbar-item[data-active="true"]:hover, [data-slot="nav-item"][data-active="true"]:hover) {
+    background: color-mix(in srgb, var(--ak-color-primary-soft) 30%, var(--ak-color-surface-muted));
+    border-color: color-mix(in srgb, var(--ak-color-primary) 22%, var(--ak-color-border-strong));
+  }
+
+  :where(.navbar-group[data-align="end"], [data-slot="navbar-group"][data-align="end"]) {
+    justify-content: flex-end;
+    margin-inline-start: auto;
+  }
+
+  @media (width <= 48rem) {
+    :where(.navbar, [data-slot="navbar"]) {
+      flex-wrap: wrap;
+      align-items: stretch;
+      display: flex;
+    }
+
+    :where(.navbar-group, [data-slot="navbar-group"]) {
+      inline-size: 100%;
+    }
+
+    :where(.navbar-group[data-align="center"], [data-slot="navbar-group"][data-align="center"]) {
+      justify-content: flex-start;
+      margin-inline: 0;
+    }
+
+    :where(.navbar-group[data-align="end"], [data-slot="navbar-group"][data-align="end"]) {
+      justify-content: flex-start;
+      margin-inline-start: 0;
+    }
+  }
+}
+
+:where(.btn, [data-slot="button"]) {
+  --_button-height: var(--ak-density-control-height-md);
+  --_button-padding-x: var(--ak-density-control-padding-x-md);
+  --_button-radius: var(--ak-radius-md);
+  --_button-border: var(--ak-color-border);
+  min-height: var(--_button-height);
+  padding-inline: var(--_button-padding-x);
+  border: 1px solid var(--_button-border);
+  border-radius: var(--_button-radius);
+  background: var(--ak-color-surface);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-sm);
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-semibold);
+  letter-spacing: -.015em;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--ak-duration-fast) var(--ak-ease-standard),
+    border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard),
+    opacity var(--ak-duration-fast) var(--ak-ease-standard);
+  justify-content: center;
+  align-items: center;
+  gap: .375rem;
+  line-height: 1;
+  text-decoration: none;
+  display: inline-flex;
+}
+
+:where(.btn) > :where([data-slot="icon"], svg), :where([data-slot="button"]) > :where([data-slot="icon"], svg) {
+  color: currentColor;
+  flex: none;
+}
+
+:where(.btn:hover, [data-slot="button"]:hover) {
+  background: var(--ak-color-surface-muted);
+  border-color: var(--ak-color-border-strong);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where(.btn:active, [data-slot="button"]:active) {
+  background: color-mix(in srgb, var(--ak-color-active) 100%, var(--ak-color-surface));
+  border-color: var(--ak-color-border-strong);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where(.btn:focus-visible, [data-slot="button"]:focus-visible) {
+  box-shadow: 0 0 0 1px var(--ak-color-surface),
+    0 0 0 4px var(--ak-color-focus-ring);
+  outline: none;
+}
+
+:where(.btn[data-disabled], .btn:disabled, [data-slot="button"][data-disabled]) {
+  background: var(--ak-color-disabled-surface);
+  border-color: var(--ak-color-disabled-border);
+  box-shadow: none;
+  color: var(--ak-color-disabled-text);
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 1;
+}
+
+:where(.btn-primary, [data-slot="button"][data-variant="primary"]) {
+  background: var(--ak-color-primary);
+  border-color: color-mix(in srgb, var(--ak-color-primary-active) 64%, var(--ak-color-primary));
+  color: var(--ak-color-text-inverse);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where(.btn-primary:hover, [data-slot="button"][data-variant="primary"]:hover) {
+  background: var(--ak-color-primary-hover);
+  border-color: var(--ak-color-primary-hover);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where(.btn-primary:active, [data-slot="button"][data-variant="primary"]:active) {
+  background: var(--ak-color-primary-active);
+  border-color: var(--ak-color-primary-active);
+}
+
+:where(.btn-secondary, [data-slot="button"][data-variant="secondary"]) {
+  background: color-mix(in srgb, var(--ak-color-primary-soft) 22%, var(--ak-color-surface));
+  border-color: color-mix(in srgb, var(--ak-color-primary) 18%, var(--ak-color-border));
+  color: var(--ak-color-primary-ink);
+}
+
+:where(.btn-secondary:hover, [data-slot="button"][data-variant="secondary"]:hover) {
+  background: color-mix(in srgb, var(--ak-color-primary-soft) 30%, var(--ak-color-surface));
+  border-color: color-mix(in srgb, var(--ak-color-primary) 26%, var(--ak-color-border-strong));
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where(.btn-secondary:active, [data-slot="button"][data-variant="secondary"]:active) {
+  background: color-mix(in srgb, var(--ak-color-primary-soft) 58%, var(--ak-color-active));
+  border-color: color-mix(in srgb, var(--ak-color-primary) 22%, var(--ak-color-border));
+}
+
+:where(.btn-outline, [data-slot="button"][data-variant="outline"]) {
+  background: var(--ak-color-surface);
+  border-color: var(--ak-color-border);
+  color: var(--ak-color-text);
+}
+
+:where(.btn-outline:hover, [data-slot="button"][data-variant="outline"]:hover) {
+  background: var(--ak-color-surface-muted);
+  border-color: var(--ak-color-border-strong);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where(.btn-outline:active, [data-slot="button"][data-variant="outline"]:active) {
+  background: color-mix(in srgb, var(--ak-color-active) 72%, var(--ak-color-surface-muted));
+  border-color: var(--ak-color-border-strong);
+}
+
+:where(.btn-ghost, [data-slot="button"][data-variant="ghost"]) {
+  color: var(--ak-color-text);
+  background: none;
+  border-color: #0000;
+}
+
+:where(.btn-ghost:hover, [data-slot="button"][data-variant="ghost"]:hover) {
+  background: var(--ak-color-hover);
+  border-color: #0000;
+}
+
+:where(.btn-ghost:active, [data-slot="button"][data-variant="ghost"]:active) {
+  background: var(--ak-color-active);
+  border-color: #0000;
+}
+
+:where(.btn-destructive, [data-slot="button"][data-variant="destructive"]) {
+  background: var(--ak-color-danger);
+  border-color: color-mix(in srgb, var(--ak-color-danger-ink) 40%, var(--ak-color-danger));
+  color: var(--ak-color-text-inverse);
+}
+
+:where(.btn-destructive:hover, [data-slot="button"][data-variant="destructive"]:hover) {
+  background: color-mix(in srgb, black 4%, var(--ak-color-danger));
+  border-color: color-mix(in srgb, var(--ak-color-danger-ink) 48%, var(--ak-color-danger));
+}
+
+:where(.btn-destructive:active, [data-slot="button"][data-variant="destructive"]:active) {
+  background: color-mix(in srgb, black 9%, var(--ak-color-danger));
+  border-color: color-mix(in srgb, var(--ak-color-danger-ink) 56%, var(--ak-color-danger));
+}
+
+:where(.btn-link, [data-slot="button"][data-variant="link"]) {
+  min-height: auto;
+  box-shadow: none;
+  color: var(--ak-color-link);
+  background: none;
+  border-color: #0000;
+  border-radius: 0;
+  padding-inline: 0;
+}
+
+:where(.btn-link:hover, [data-slot="button"][data-variant="link"]:hover) {
+  box-shadow: none;
+  color: var(--ak-color-link-hover);
+  text-underline-offset: .14em;
+  background: none;
+  border-color: #0000;
+  text-decoration: underline;
+}
+
+:where(.btn-link:active, [data-slot="button"][data-variant="link"]:active) {
+  box-shadow: none;
+  color: var(--ak-color-link-hover);
+  background: none;
+  border-color: #0000;
+}
+
+:where(.btn-sm, [data-slot="button"][data-size="sm"]) {
+  --_button-height: var(--ak-density-control-height-sm);
+  --_button-padding-x: var(--ak-density-control-padding-x-sm);
+  font-size: .8125rem;
+}
+
+:where(.btn-lg, [data-slot="button"][data-size="lg"]) {
+  --_button-height: var(--ak-density-control-height-lg);
+  --_button-padding-x: var(--ak-density-control-padding-x-lg);
+  font-size: .9375rem;
+}
+
+:where(.btn-icon, [data-slot="button"][data-size="icon"]) {
+  width: var(--_button-height);
+  padding-inline: 0;
+}
+
+[data-slot="toggle"] {
+  justify-content: center;
+  align-items: center;
+  gap: var(--ak-space-sm);
+  min-height: 2.5rem;
+  padding: 0 var(--ak-space-md);
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface);
+  color: var(--ak-color-text);
+  cursor: pointer;
+  transition: background var(--ak-duration-fast) var(--ak-ease-standard),
+    border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
+  display: inline-flex;
+}
+
+[data-slot="toggle"]:hover {
+  background: var(--ak-color-hover);
+  border-color: var(--ak-color-border-strong);
+}
+
+[data-slot="toggle"]:active {
+  background: var(--ak-color-active);
+}
+
+[data-slot="toggle"][data-state="on"] {
+  border-color: var(--ak-color-primary);
+  background: var(--ak-color-primary-soft);
+  color: var(--ak-color-primary-ink);
+}
+
+[data-slot="toggle"]:focus-visible {
+  box-shadow: 0 0 0 3px var(--ak-color-focus-ring);
+  outline: none;
+}
+
+[data-slot="toggle"][data-disabled] {
+  opacity: .5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+[data-slot="toggle-group"] {
+  gap: .25rem;
+  display: inline-flex;
+}
+
+[data-slot="toggle-group"][data-orientation="vertical"] {
+  flex-direction: column;
+}
+
+[data-slot="toggle-group-item"] {
+  min-height: 2.5rem;
+  padding: 0 var(--ak-space-md);
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface);
+  color: var(--ak-color-text);
+  cursor: pointer;
+  transition: background var(--ak-duration-fast) var(--ak-ease-standard),
+    border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+[data-slot="toggle-group-item"]:hover {
+  background: var(--ak-color-hover);
+  border-color: var(--ak-color-border-strong);
+}
+
+[data-slot="toggle-group-item"]:active {
+  background: var(--ak-color-active);
+}
+
+[data-slot="toggle-group-item"][data-state="on"] {
+  border-color: var(--ak-color-primary);
+  background: var(--ak-color-primary-soft);
+  color: var(--ak-color-primary-ink);
+}
+
+[data-slot="toggle-group-item"]:focus-visible {
+  box-shadow: 0 0 0 3px var(--ak-color-focus-ring);
+  outline: none;
+}
+
+[data-slot="toggle-group-item"][data-disabled] {
+  opacity: .5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+:where(.input, [data-slot="input"]) {
+  appearance: none;
+  box-sizing: border-box;
+  min-height: var(--ak-density-control-height-md);
+  width: 100%;
+  padding: 0 var(--ak-density-control-padding-x-md);
+  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, white 16%);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface);
+  color: var(--ak-color-text);
+  font-size: var(--ak-font-size-sm);
+  line-height: var(--ak-line-height-normal);
+  box-shadow: var(--ak-shadow-sm);
+  transition: background var(--ak-duration-fast) var(--ak-ease-standard),
+    border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where(.input, [data-slot="input"])::placeholder {
+  color: var(--ak-color-text-subtle);
+}
+
+:where(.input:hover, [data-slot="input"]:hover) {
+  background: var(--ak-color-surface-muted);
+  border-color: var(--ak-color-border-strong);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where(.input:focus-visible, [data-slot="input"]:focus-visible) {
+  border-color: var(--ak-color-primary);
+  box-shadow: 0 0 0 4px var(--ak-color-focus-ring);
+  outline: none;
+}
+
+:where(.input[aria-invalid="true"], [data-slot="input"][aria-invalid="true"]) {
+  border-color: var(--ak-color-danger);
+  background: color-mix(in srgb, var(--ak-color-danger-soft) 12%, var(--ak-color-surface));
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ak-color-danger-soft) 82%, transparent);
+}
+
+:where(.input[data-disabled], .input:disabled, [data-slot="input"][data-disabled]) {
+  background: var(--ak-color-disabled-surface);
+  border-color: var(--ak-color-disabled-border);
+  box-shadow: none;
+  color: var(--ak-color-disabled-text);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+:where(.textarea, [data-slot="textarea"]) {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 7rem;
+  padding: var(--ak-space-sm) var(--ak-space-md);
+  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, white 16%);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface);
+  color: var(--ak-color-text);
+  font-size: var(--ak-font-size-sm);
+  resize: vertical;
+  box-shadow: var(--ak-shadow-sm);
+  transition: border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where(.textarea, [data-slot="textarea"])::placeholder {
+  color: var(--ak-color-text-muted);
+}
+
+:where(.textarea:hover, [data-slot="textarea"]:hover) {
+  border-color: var(--ak-color-border-strong);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where(.textarea:focus-visible, [data-slot="textarea"]:focus-visible) {
+  border-color: var(--ak-color-primary);
+  box-shadow: 0 0 0 3px var(--ak-color-focus-ring);
+  outline: none;
+}
+
+:where(.textarea[data-disabled], .textarea:disabled, [data-slot="textarea"][data-disabled]) {
+  opacity: .5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+:where([data-slot="form"]) {
+  gap: var(--ak-space-4);
+  min-inline-size: 0;
+  display: grid;
+}
+
+:where([data-slot="checkbox"]) {
+  appearance: none;
+  border: 1px solid var(--ak-color-border-strong);
+  border-radius: calc(var(--ak-radius-sm) - 2px);
+  background: var(--ak-color-surface);
+  block-size: 1.25rem;
+  inline-size: 1.25rem;
+  box-shadow: var(--ak-shadow-sm);
+  cursor: pointer;
+  transition: transform var(--ak-duration-fast) var(--ak-ease-standard),
+    background var(--ak-duration-fast) var(--ak-ease-standard),
+    border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: .85rem .85rem;
+  place-content: center;
+  margin: 0;
+  display: inline-grid;
+}
+
+:where([data-slot="checkbox"]:hover) {
+  border-color: var(--ak-color-primary);
+  box-shadow: var(--ak-shadow-sm),
+    0 0 0 4px color-mix(in srgb, var(--ak-color-primary-soft) 54%, transparent);
+}
+
+:where([data-slot="checkbox"]:focus-visible) {
+  box-shadow: 0 0 0 4px var(--ak-color-focus-ring),
+    var(--ak-shadow-sm);
+  outline: none;
+}
+
+:where([data-slot="checkbox"][data-state="checked"]), :where([data-slot="checkbox"][aria-checked="true"]) {
+  border-color: color-mix(in srgb, var(--ak-color-primary-active) 60%, var(--ak-color-primary));
+  background-color: var(--ak-color-primary);
+  box-shadow: var(--ak-shadow-sm),
+    0 0 0 1px color-mix(in srgb, var(--ak-color-primary) 22%, transparent);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25' d='M3.5 8.25 6.5 11.25 12.5 4.75'/%3E%3C/svg%3E");
+}
+
+:where([data-slot="checkbox"][data-state="indeterminate"]), :where([data-slot="checkbox"][aria-checked="mixed"]) {
+  border-color: color-mix(in srgb, var(--ak-color-primary-active) 60%, var(--ak-color-primary));
+  background-color: var(--ak-color-primary);
+  box-shadow: var(--ak-shadow-sm),
+    0 0 0 1px color-mix(in srgb, var(--ak-color-primary) 22%, transparent);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-width='2.25' d='M4 8h8'/%3E%3C/svg%3E");
+}
+
+:where([data-slot="checkbox"][data-disabled]) {
+  background: var(--ak-color-disabled-surface);
+  border-color: var(--ak-color-disabled-border);
+  box-shadow: none;
+  opacity: 1;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+:where([data-slot="switch"]) {
+  border: 1px solid var(--ak-color-border-strong);
+  border-radius: var(--ak-radius-round);
+  background: var(--ak-color-surface-muted);
+  block-size: 2rem;
+  inline-size: 3.3rem;
+  box-shadow: var(--ak-shadow-sm);
+  color: var(--ak-color-text);
+  cursor: pointer;
+  transition: background var(--ak-duration-fast) var(--ak-ease-standard),
+    border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard),
+    transform var(--ak-duration-fast) var(--ak-ease-standard);
+  justify-content: flex-start;
+  align-items: center;
+  padding: .2rem;
+  display: inline-flex;
+  position: relative;
+}
+
+:where([data-slot="switch"]):after {
+  content: "";
+  border-radius: var(--ak-radius-round);
+  background: var(--ak-color-surface);
+  block-size: 1.45rem;
+  inline-size: 1.45rem;
+  box-shadow: var(--ak-shadow-sm);
+  transition: transform var(--ak-duration-fast) var(--ak-ease-standard),
+    background var(--ak-duration-fast) var(--ak-ease-standard);
+  display: block;
+}
+
+:where([data-slot="switch"][data-state="checked"]) {
+  border-color: color-mix(in srgb, var(--ak-color-primary-active) 42%, var(--ak-color-primary));
+  background: color-mix(in srgb, var(--ak-color-primary-soft) 42%, var(--ak-color-primary));
+}
+
+:where([data-slot="switch"][data-state="checked"]):after {
+  transform: translateX(1.275rem);
+}
+
+:where([data-slot="switch"]:hover) {
+  border-color: var(--ak-color-border-strong);
+  box-shadow: var(--ak-shadow-sm),
+    0 0 0 4px color-mix(in srgb, var(--ak-color-primary-soft) 56%, transparent);
+}
+
+:where([data-slot="switch"]:focus-visible) {
+  box-shadow: 0 0 0 4px var(--ak-color-focus-ring),
+    var(--ak-shadow-sm);
+  outline: none;
+}
+
+:where([data-slot="switch"][data-disabled]) {
+  background: var(--ak-color-disabled-surface);
+  border-color: var(--ak-color-disabled-border);
+  box-shadow: none;
+  opacity: 1;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+:where([data-slot="switch"][data-disabled]):after {
+  background: var(--ak-color-disabled-bg);
+  box-shadow: none;
+}
+
+[data-slot="radio-group"] {
+  gap: var(--ak-space-sm);
+  display: grid;
+}
+
+[data-slot="radio-group"][data-orientation="horizontal"] {
+  grid-auto-flow: column;
+  justify-content: flex-start;
+}
+
+[data-slot="radio-group-item"] {
+  align-items: center;
+  gap: var(--ak-space-sm);
+  min-height: 2.5rem;
+  padding: 0 var(--ak-space-md);
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface);
+  color: var(--ak-color-text);
+  cursor: pointer;
+  transition: background var(--ak-duration-fast) var(--ak-ease-standard),
+    border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
+  display: inline-flex;
+}
+
+[data-slot="radio-group-item"][data-state="checked"] {
+  border-color: var(--ak-color-primary);
+  background: var(--ak-color-primary-soft);
+  color: var(--ak-color-primary-ink);
+}
+
+[data-slot="radio-group-item"]:hover {
+  background: var(--ak-color-hover);
+  border-color: var(--ak-color-border-strong);
+}
+
+[data-slot="radio-group-item"]:active {
+  background: var(--ak-color-active);
+}
+
+[data-slot="radio-group-item"]:focus-visible {
+  box-shadow: 0 0 0 3px var(--ak-color-focus-ring);
+  outline: none;
+}
+
+[data-slot="radio-group-item"][data-disabled] {
+  opacity: .5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+:where([data-slot="select-trigger"]) {
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--ak-space-sm);
+  width: 100%;
+  min-width: 12rem;
+  min-height: 2.875rem;
+  padding: 0 calc(var(--ak-space-lg) + .125rem);
+  border: 1px solid color-mix(in srgb, var(--ak-color-border) 82%, white);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-sm);
+  cursor: pointer;
+  transition: background var(--ak-duration-fast) var(--ak-ease-standard),
+    border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
+  display: inline-flex;
+}
+
+:where([data-slot="select-trigger"]:hover) {
+  background: var(--ak-color-surface-muted);
+  border-color: var(--ak-color-border-strong);
+}
+
+:where([data-slot="select-trigger"]:focus-visible) {
+  border-color: var(--ak-color-primary);
+  box-shadow: 0 0 0 4px var(--ak-color-focus-ring),
+    var(--ak-shadow-sm);
+  outline: none;
+}
+
+:where([data-slot="select-trigger"][data-state="open"]) {
+  border-color: var(--ak-color-primary);
+  background: color-mix(in srgb, var(--ak-color-primary-soft) 12%, var(--ak-color-surface));
+  box-shadow: 0 0 0 4px var(--ak-color-focus-ring),
+    var(--ak-shadow-sm);
+}
+
+:where([data-slot="select-trigger"][data-disabled]) {
+  background: var(--ak-color-disabled-surface);
+  border-color: var(--ak-color-disabled-border);
+  box-shadow: none;
+  color: var(--ak-color-disabled-text);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+:where([data-slot="select-value"][data-placeholder]) {
+  color: var(--ak-color-text-subtle);
+}
+
+@keyframes ak-select-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes ak-select-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+
+:where([data-slot="select-content"]) {
+  min-width: 12rem;
+  max-block-size: min(20rem, 100vh - 4rem);
+  padding: calc(var(--ak-space-sm) + .125rem);
+  border: 1px solid var(--ak-color-border-subtle);
+  border-radius: var(--ak-radius-lg);
+  background: var(--ak-color-surface-raised);
+  box-shadow: var(--ak-shadow-md);
+  animation: ak-select-in var(--ak-duration-fast) var(--ak-ease-standard);
+  gap: .25rem;
+  display: grid;
+  overflow-y: auto;
+}
+
+:where([data-slot="select-content"][data-state="closed"]) {
+  animation: ak-select-out var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="select-item"]) {
+  min-height: 2.5rem;
+  padding: 0 calc(var(--ak-space-md) + .125rem);
+  border-radius: var(--ak-radius-md);
+  color: var(--ak-color-text);
+  cursor: pointer;
+  font-weight: var(--ak-font-weight-medium);
+  transition: background var(--ak-duration-fast) var(--ak-ease-standard),
+    color var(--ak-duration-fast) var(--ak-ease-standard);
+  align-items: center;
+  display: flex;
+}
+
+:where([data-slot="select-item"][data-state="checked"]) {
+  background: var(--ak-color-primary-soft);
+  color: var(--ak-color-primary-ink);
+}
+
+:where([data-slot="select-item"]:hover) {
+  background: color-mix(in srgb, var(--ak-color-hover) 68%, var(--ak-color-surface));
+}
+
+:where([data-slot="select-item"]:focus-visible) {
+  background: color-mix(in srgb, var(--ak-color-primary-soft) 32%, var(--ak-color-surface));
+  outline: none;
+}
+
+:where([data-slot="select-item"][data-disabled]) {
+  color: var(--ak-color-disabled-text);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+:where([data-slot="select-label"]) {
+  padding: 0 var(--ak-space-md);
+  color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-xs);
+  font-weight: var(--ak-font-weight-semibold);
+  letter-spacing: .06em;
+  text-transform: uppercase;
+}
+
+:where([data-slot="select-separator"]) {
+  background: var(--ak-color-border);
+  block-size: 1px;
+  margin: .25rem 0;
+}
+
+[data-slot="slider"] {
+  align-items: center;
+  min-height: 1.5rem;
+  display: flex;
+  position: relative;
+}
+
+[data-slot="slider"][data-orientation="vertical"] {
+  min-width: 1.5rem;
+  min-height: 10rem;
+}
+
+[data-slot="slider-track"] {
+  background: var(--ak-color-surface-muted);
+  border-radius: 999px;
+  flex: 1;
+  block-size: .375rem;
+  position: relative;
+}
+
+[data-slot="slider-track"][data-orientation="vertical"] {
+  block-size: 100%;
+  inline-size: .375rem;
+}
+
+[data-slot="slider-range"] {
+  inline-size: var(--ak-slider-percentage);
+  background: var(--ak-color-primary);
+  opacity: .85;
+  border-radius: 999px;
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+}
+
+[data-slot="slider-range"][data-orientation="vertical"] {
+  inline-size: 100%;
+  block-size: var(--ak-slider-percentage);
+  inset-block: auto 0;
+}
+
+[data-slot="slider-thumb"] {
+  border: 2px solid var(--ak-color-primary);
+  background: var(--ak-color-surface);
+  block-size: 1rem;
+  inline-size: 1rem;
+  box-shadow: var(--ak-shadow-sm);
+  transition: box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
+  border-radius: 999px;
+  position: absolute;
+}
+
+[data-slot="slider-thumb"][data-orientation="horizontal"] {
+  inset-block-start: 50%;
+  inset-inline-start: calc(var(--ak-slider-percentage) - .5rem);
+  transform: translateY(-50%);
+}
+
+[data-slot="slider-thumb"][data-orientation="vertical"] {
+  inset-block-end: calc(var(--ak-slider-percentage) - .5rem);
+  inset-inline-start: 50%;
+  transform: translateX(-50%);
+}
+
+[data-slot="slider-thumb"]:focus-visible {
+  box-shadow: 0 0 0 3px var(--ak-color-focus-ring);
+  outline: none;
+}
+
+[data-slot="slider"][data-disabled] {
+  opacity: .5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+:where(.label, [data-slot="label"]) {
+  color: var(--ak-color-text);
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-semibold);
+  display: inline-block;
+}
+
+:where(.card, [data-slot="card"]) {
+  gap: var(--ak-space-xs);
+  padding: var(--ak-layout-panel-padding);
+  border: 1px solid color-mix(in srgb, var(--ak-color-border-subtle) 86%, white 14%);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-sm);
+  display: grid;
+}
+
+:where(.card-raised, [data-slot="card"][data-variant="raised"]) {
+  background: var(--ak-color-surface-raised);
+  border-color: var(--ak-color-border);
+  box-shadow: var(--ak-shadow-md);
+}
+
+:where(.card-sm, [data-slot="card"][data-padding="sm"]) {
+  padding: var(--ak-space-md);
+}
+
+:where(.card-lg, [data-slot="card"][data-padding="lg"]) {
+  padding: var(--ak-space-xl);
+}
+
+:where(.card-header, [data-slot="card-header"]) {
+  gap: .375rem;
+  display: grid;
+}
+
+:where(.card-title, [data-slot="card-title"]) {
+  color: var(--ak-color-text);
+  font-size: var(--ak-font-size-lg);
+  margin: 0;
+  font-weight: 650;
+  line-height: 1.15;
+}
+
+:where(.card-description, [data-slot="card-description"]) {
+  color: var(--ak-color-text-muted);
+  margin: 0;
+}
+
+:where(.card-content, [data-slot="card-content"]) {
+  min-inline-size: 0;
+}
+
+:where(.card-footer, [data-slot="card-footer"]) {
+  gap: var(--ak-space-sm);
+  flex-wrap: wrap;
+  align-items: center;
+  display: flex;
+}
+
+[data-slot="progress"] {
+  background: var(--ak-color-surface-muted);
+  border-radius: 999px;
+  block-size: .625rem;
+  inline-size: 100%;
+  overflow: hidden;
+}
+
+[data-slot="progress-indicator"] {
+  block-size: 100%;
+  inline-size: var(--ak-progress-percentage);
+  border-radius: inherit;
+  background: var(--ak-color-primary);
+}
+
+[data-slot="progress-indicator"][data-state="indeterminate"] {
+  inline-size: 35%;
+}
+
+[data-slot="progress-circle"] {
+  background: conic-gradient(var(--ak-color-primary) var(--ak-progress-percentage),
+    var(--ak-color-surface-muted) 0);
+  border-radius: 999px;
+  place-items: center;
+  block-size: 2.75rem;
+  inline-size: 2.75rem;
+  display: inline-grid;
+}
+
+[data-slot="progress-circle-indicator"] {
+  background: var(--ak-color-bg);
+  border-radius: 999px;
+  block-size: 1.9rem;
+  inline-size: 1.9rem;
+}
+
+:where(.badge, [data-slot="badge"]) {
+  border: 1px solid color-mix(in srgb, var(--ak-color-primary) 10%, var(--ak-color-border-subtle));
+  border-radius: var(--ak-radius-sm);
+  background: color-mix(in srgb, var(--ak-color-primary-soft) 58%, var(--ak-color-surface));
+  min-height: 1.625rem;
+  color: var(--ak-color-primary-ink);
+  box-shadow: none;
+  font-size: var(--ak-font-size-xs);
+  font-weight: var(--ak-font-weight-semibold);
+  letter-spacing: .015em;
+  align-items: center;
+  gap: .35rem;
+  padding: 0 .625rem;
+  display: inline-flex;
+}
+
+:where(.badge-secondary, [data-slot="badge"][data-variant="secondary"]) {
+  background: var(--ak-color-surface-muted);
+  border-color: var(--ak-color-border-subtle);
+  color: var(--ak-color-text);
+}
+
+:where(.badge-outline, [data-slot="badge"][data-variant="outline"]) {
+  background: var(--ak-color-surface);
+  border-color: var(--ak-color-border);
+  color: var(--ak-color-text);
+}
+
+:where(.badge-success, [data-slot="badge"][data-variant="success"]) {
+  background: color-mix(in srgb, var(--ak-color-success-soft) 58%, var(--ak-color-surface));
+  border-color: color-mix(in srgb, var(--ak-color-success) 12%, var(--ak-color-border-subtle));
+  color: var(--ak-color-success-ink);
+}
+
+:where(.badge-warning, [data-slot="badge"][data-variant="warning"]) {
+  background: color-mix(in srgb, var(--ak-color-warning-soft) 58%, var(--ak-color-surface));
+  border-color: color-mix(in srgb, var(--ak-color-warning) 12%, var(--ak-color-border-subtle));
+  color: var(--ak-color-warning-ink);
+}
+
+:where(.badge-danger, [data-slot="badge"][data-variant="danger"]) {
+  background: color-mix(in srgb, var(--ak-color-danger-soft) 58%, var(--ak-color-surface));
+  border-color: color-mix(in srgb, var(--ak-color-danger) 12%, var(--ak-color-border-subtle));
+  color: var(--ak-color-danger-ink);
+}
+
+:where(.badge-info, [data-slot="badge"][data-variant="info"]) {
+  background: color-mix(in srgb, var(--ak-color-info-soft) 58%, var(--ak-color-surface));
+  border-color: color-mix(in srgb, var(--ak-color-info) 12%, var(--ak-color-border-subtle));
+  color: var(--ak-color-info-ink);
+}
+
+[data-slot="skeleton"] {
+  border-radius: var(--ak-radius-sm);
+  background: color-mix(in srgb, var(--ak-color-surface-muted) 62%, var(--ak-color-surface));
+  min-height: 1rem;
+  display: block;
+}
+
+[data-slot="avatar"] {
+  background: var(--ak-color-surface-muted);
+  block-size: 2.5rem;
+  inline-size: 2.5rem;
+  color: var(--ak-color-text);
+  border-radius: 999px;
+  place-items: center;
+  display: inline-grid;
+  overflow: hidden;
+}
+
+[data-slot="avatar-image"] {
+  object-fit: cover;
+  block-size: 100%;
+  inline-size: 100%;
+}
+
+[data-slot="avatar-fallback"] {
+  block-size: 100%;
+  inline-size: 100%;
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-semibold);
+  place-items: center;
+  display: inline-grid;
+}
+
+[data-slot="separator"] {
+  background: var(--ak-color-border);
+  flex: none;
+  display: block;
+}
+
+[data-slot="separator"][data-orientation="horizontal"] {
+  block-size: 1px;
+  inline-size: 100%;
+}
+
+[data-slot="separator"][data-orientation="vertical"] {
+  block-size: 100%;
+  inline-size: 1px;
+}
+
+:where([data-slot="table"]) {
+  border-collapse: separate;
+  border-spacing: 0;
+  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, white 16%);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface-raised);
+  inline-size: 100%;
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where([data-slot="table-caption"]) {
+  padding: 0 0 var(--ak-space-sm);
+  color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-sm);
+  line-height: var(--ak-line-height-normal);
+  text-align: start;
+  caption-side: top;
+}
+
+:where([data-slot="table-head"]) {
+  background: var(--ak-color-surface-muted);
+}
+
+:where([data-slot="table-body"]) {
+  background: var(--ak-color-surface-raised);
+}
+
+:where([data-slot="table-foot"]) {
+  background: var(--ak-color-surface-muted);
+}
+
+:where([data-slot="table-row"]) {
+  background: inherit;
+  transition: background var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="table-row"]:hover) {
+  background: color-mix(in srgb, var(--ak-color-hover) 70%, transparent);
+}
+
+:where([data-slot="table-header-cell"]), :where([data-slot="table-cell"]) {
+  padding: .8rem var(--ak-space-md);
+  border-block-end: 1px solid var(--ak-color-border-subtle);
+  color: var(--ak-color-text);
+  font-size: var(--ak-font-size-sm);
+  line-height: var(--ak-line-height-normal);
+  text-align: start;
+  vertical-align: top;
+}
+
+:where([data-slot="table-header-cell"]) {
+  color: var(--ak-color-text-muted);
+  font-weight: var(--ak-font-weight-semibold);
+  letter-spacing: .025em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+:where([data-slot="table-cell"]) {
+  font-weight: var(--ak-font-weight-regular);
+}
+
+:where([data-slot="scroll-area-viewport"]) {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+:where() {
+  display: none;
+}
+
+:where([data-slot="scroll-area-scrollbar"]) {
+  border-radius: var(--ak-radius-round);
+  background: color-mix(in srgb, var(--ak-color-surface-muted) 72%, transparent);
+  flex: none;
+  padding: .125rem;
+  display: flex;
+}
+
+:where([data-slot="scroll-area-scrollbar"][data-orientation="vertical"]) {
+  width: .625rem;
+}
+
+:where([data-slot="scroll-area-scrollbar"][data-orientation="horizontal"]) {
+  flex-direction: column;
+  height: .625rem;
+}
+
+:where([data-slot="scroll-area-thumb"]) {
+  border-radius: var(--ak-radius-round);
+  background: var(--ak-color-border-strong);
+}
+
+:where([data-slot="scroll-area-corner"]) {
+  background: var(--ak-color-surface-muted);
+}
+
+[data-slot="progress-circle"][data-state="indeterminate"] {
+  block-size: 2.25rem;
+  inline-size: 2.25rem;
+}
+
+[data-slot="box"] {
+  display: block;
+}
+
+[data-slot="container"] {
+  box-sizing: border-box;
+}
+
+[data-slot="grid"] {
+  gap: var(--ak-space-md);
+  display: grid;
+}
+
+[data-slot="stack"] {
+  gap: var(--ak-space-md);
+  flex-direction: column;
+  display: flex;
+}
+
+[data-slot="flex"] {
+  gap: var(--ak-space-md);
+  flex-wrap: wrap;
+  display: flex;
+}
+
+[data-slot="section"] {
+  display: block;
+}
+
+[data-slot="section"][data-size="initial:1"] {
+  padding-block: var(--ak-section-1);
+}
+
+[data-slot="section"][data-size="initial:2"] {
+  padding-block: var(--ak-section-2);
+}
+
+[data-slot="section"][data-size="initial:3"] {
+  padding-block: var(--ak-section-3);
+}
+
+[data-slot="section"][data-size="initial:4"] {
+  padding-block: var(--ak-section-4);
+}
+
+[data-slot="center"] {
+  place-items: center;
+  display: grid;
+}
+
+[data-slot="spacer"] {
+  flex: auto;
+}
+
+[data-slot="spacer"][data-axis="inline"], [data-slot="spacer"][data-axis="block"] {
+  flex-shrink: 0;
+  display: block;
+}
+
+@media (width >= 40rem) {
+  [data-slot="section"][data-size="sm:1"] {
+    padding-block: var(--ak-section-1);
+  }
+
+  [data-slot="section"][data-size="sm:2"] {
+    padding-block: var(--ak-section-2);
+  }
+
+  [data-slot="section"][data-size="sm:3"] {
+    padding-block: var(--ak-section-3);
+  }
+
+  [data-slot="section"][data-size="sm:4"] {
+    padding-block: var(--ak-section-4);
+  }
+}
+
+@media (width >= 48rem) {
+  [data-slot="section"][data-size="md:1"] {
+    padding-block: var(--ak-section-1);
+  }
+
+  [data-slot="section"][data-size="md:2"] {
+    padding-block: var(--ak-section-2);
+  }
+
+  [data-slot="section"][data-size="md:3"] {
+    padding-block: var(--ak-section-3);
+  }
+
+  [data-slot="section"][data-size="md:4"] {
+    padding-block: var(--ak-section-4);
+  }
+}
+
+@media (width >= 64rem) {
+  [data-slot="section"][data-size="lg:1"] {
+    padding-block: var(--ak-section-1);
+  }
+
+  [data-slot="section"][data-size="lg:2"] {
+    padding-block: var(--ak-section-2);
+  }
+
+  [data-slot="section"][data-size="lg:3"] {
+    padding-block: var(--ak-section-3);
+  }
+
+  [data-slot="section"][data-size="lg:4"] {
+    padding-block: var(--ak-section-4);
+  }
+}
+
+@media (width >= 80rem) {
+  [data-slot="section"][data-size="xl:1"] {
+    padding-block: var(--ak-section-1);
+  }
+
+  [data-slot="section"][data-size="xl:2"] {
+    padding-block: var(--ak-section-2);
+  }
+
+  [data-slot="section"][data-size="xl:3"] {
+    padding-block: var(--ak-section-3);
+  }
+
+  [data-slot="section"][data-size="xl:4"] {
+    padding-block: var(--ak-section-4);
+  }
+}
+
+[data-slot="breadcrumb-item"] {
+  align-items: center;
+  gap: var(--ak-space-sm);
+  display: inline-flex;
+}
+
+[data-slot="dialog-trigger"] {
+  cursor: pointer;
+}
+
+[data-slot="dropdown-menu-group"], [data-slot="menu-group"], [data-slot="menubar-group"], [data-slot="select-group"] {
+  display: block;
+}
+
+[data-slot="select-item-text"] {
+  display: inline;
+}
+
+[data-state="closed"] {
+  --ak-state-closed: 1;
+}
+
+[data-state="determinate"] {
+  --ak-state-determinate: 1;
+}
+
+[data-state="inactive"] {
+  --ak-state-inactive: 1;
+}
+
+[data-state="off"] {
+  --ak-state-off: 1;
+}
+
+[data-state="unchecked"] {
+  --ak-state-unchecked: 1;
+}
+
+[data-accordion], [data-accordion-header], [data-active-item], [data-align], [data-askr-visually-hidden], [data-auto-fit], [data-avatar], [data-avatar-fallback], [data-avatar-image], [data-axis], [data-badge], [data-basis], [data-breadcrumb], [data-breadcrumb-current], [data-breadcrumb-item], [data-breadcrumb-link], [data-breadcrumb-list], [data-breadcrumb-separator], [data-centered], [data-collapse-below], [data-columns], [data-dialog-overlay], [data-dismissable-layer], [data-dropdown-menu-label], [data-fluid], [data-focus-ring], [data-focus-scope], [data-gap], [data-grow], [data-inline], [data-justify], [data-max], [data-max-width], [data-menubar], [data-menubar-label], [data-min-height], [data-min-item-width], [data-navigation-menu], [data-navigation-menu-indicator], [data-navigation-menu-link], [data-navigation-menu-list], [data-navigation-menu-viewport], [data-padding], [data-percentage], [data-progress], [data-progress-circle], [data-progress-circle-indicator], [data-progress-indicator], [data-required], [data-select-item-text], [data-select-label], [data-shrink], [data-side], [data-side-offset], [data-size], [data-skeleton], [data-slider], [data-slider-range], [data-slider-thumb], [data-slider-track], [data-tabs], [data-tabs-list], [data-toast], [data-toast-action], [data-toast-close], [data-toast-description], [data-toast-provider], [data-toast-title], [data-toast-viewport], [data-toggle-group], [data-value], [data-wrap] {
+  --ak-contract-covered: 1;
+}
+
+:where([data-slot="breadcrumb"]) {
+  color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-xs);
+}
+
+:where([data-slot="breadcrumb-list"]) {
+  align-items: center;
+  gap: var(--ak-space-xs);
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+}
+
+:where([data-slot="breadcrumb-item"]) {
+  align-items: center;
+  gap: var(--ak-space-xs);
+  display: inline-flex;
+}
+
+:where([data-slot="breadcrumb-link"]) {
+  color: var(--ak-color-text-muted);
+  transition: color var(--ak-duration-fast) var(--ak-ease-standard);
+  text-decoration: none;
+}
+
+:where([data-slot="breadcrumb-link"]:hover) {
+  color: var(--ak-color-text);
+}
+
+:where([data-slot="breadcrumb-current"]) {
+  color: var(--ak-color-text);
+  font-weight: var(--ak-font-weight-semibold);
+}
+
+:where([data-slot="breadcrumb-separator"]) {
+  color: var(--ak-color-border);
+}
+
+[data-slot="tabs"] {
+  gap: var(--ak-space-md);
+  display: grid;
+}
+
+[data-slot="tabs-list"] {
+  border: 1px solid var(--ak-color-border);
+  border-radius: calc(var(--ak-radius-md) + 2px);
+  background: var(--ak-color-surface-muted);
+  align-items: center;
+  gap: .25rem;
+  padding: .25rem;
+  display: inline-flex;
+}
+
+[data-slot="tabs-list"][data-orientation="vertical"] {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+[data-slot="tabs-trigger"] {
+  min-height: 2.5rem;
+  padding: 0 var(--ak-space-md);
+  border-radius: var(--ak-radius-sm);
+  color: var(--ak-color-text-muted);
+  cursor: pointer;
+  transition: background var(--ak-duration-fast) var(--ak-ease-standard),
+    color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
+  background: none;
+  border: 0;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+[data-slot="tabs-trigger"][data-state="active"] {
+  background: var(--ak-color-surface);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+[data-slot="tabs-trigger"]:focus-visible {
+  box-shadow: 0 0 0 3px var(--ak-color-focus-ring);
+  outline: none;
+}
+
+[data-slot="tabs-trigger"][data-disabled] {
+  opacity: .5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+[data-slot="tabs-content"] {
+  padding: var(--ak-space-md);
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface);
+  color: var(--ak-color-text);
+}
+
+:where([data-slot="menu-content"]) {
+  min-width: 13rem;
+  padding: calc(var(--ak-space-sm) + .125rem);
+  border: 1px solid var(--ak-color-border-subtle);
+  border-radius: var(--ak-radius-lg);
+  background: var(--ak-color-surface-raised);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-md);
+  gap: .35rem;
+  display: grid;
+}
+
+:where([data-slot="menu-item"]) {
+  align-items: center;
+  gap: var(--ak-space-sm);
+  min-height: 2.5rem;
+  padding: 0 calc(var(--ak-space-sm) + .25rem);
+  border-radius: var(--ak-radius-lg);
+  color: var(--ak-color-text);
+  font-weight: var(--ak-font-weight-medium);
+  cursor: pointer;
+  transition: background var(--ak-duration-fast) var(--ak-ease-standard),
+    color var(--ak-duration-fast) var(--ak-ease-standard);
+  background: none;
+  border: 0;
+  display: flex;
+}
+
+:where([data-slot="menu-item"]:hover) {
+  background: color-mix(in srgb, var(--ak-color-primary-soft) 58%, var(--ak-color-surface-muted));
+  color: var(--ak-color-primary-ink);
+}
+
+:where([data-slot="menu-item"]:focus-visible) {
+  background: color-mix(in srgb, var(--ak-color-primary-soft) 58%, var(--ak-color-surface-muted));
+  color: var(--ak-color-primary-ink);
+  outline: none;
+}
+
+:where([data-slot="menu-item"][data-disabled]) {
+  color: var(--ak-color-disabled-text);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+:where([data-slot="menu-label"]) {
+  padding: 0 calc(var(--ak-space-sm) + .25rem);
+  color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-xs);
+  font-weight: var(--ak-font-weight-semibold);
+  letter-spacing: .06em;
+  text-transform: uppercase;
+}
+
+:where([data-slot="menu-separator"]) {
+  background: var(--ak-color-border);
+  block-size: 1px;
+  margin: .35rem 0;
+}
+
+[data-slot="menubar"] {
+  align-items: center;
+  gap: .25rem;
+  display: inline-flex;
+}
+
+[data-slot="menubar-trigger"] {
+  min-height: 2.25rem;
+  padding: 0 var(--ak-space-sm);
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-sm);
+  background: var(--ak-color-surface);
+  color: var(--ak-color-text);
+  cursor: pointer;
+  transition: background var(--ak-duration-fast) var(--ak-ease-standard),
+    border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+[data-slot="menubar-trigger"][data-state="open"] {
+  border-color: var(--ak-color-primary);
+  background: var(--ak-color-primary-soft);
+  color: var(--ak-color-primary-ink);
+}
+
+[data-slot="menubar-trigger"]:hover {
+  background: var(--ak-color-hover);
+  border-color: var(--ak-color-border-strong);
+}
+
+[data-slot="menubar-content"] {
+  min-width: 12rem;
+  max-block-size: min(20rem, 100vh - 4rem);
+  padding: var(--ak-space-sm);
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface-raised);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-sm);
+  gap: .25rem;
+  display: grid;
+  overflow-y: auto;
+}
+
+[data-slot="menubar-item"], [data-slot="menubar-sub-trigger"] {
+  min-height: 2.25rem;
+  padding: 0 var(--ak-space-sm);
+  border-radius: var(--ak-radius-sm);
+  color: var(--ak-color-text);
+  cursor: pointer;
+  transition: background var(--ak-duration-fast) var(--ak-ease-standard),
+    color var(--ak-duration-fast) var(--ak-ease-standard);
+  background: none;
+  border: 0;
+  align-items: center;
+  display: flex;
+}
+
+[data-slot="menubar-item"]:hover, [data-slot="menubar-sub-trigger"]:hover {
+  background: var(--ak-color-surface-muted);
+}
+
+[data-slot="menubar-item"][data-disabled], [data-slot="menubar-sub-trigger"][data-disabled] {
+  opacity: .5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+[data-slot="menubar-label"] {
+  padding: 0 var(--ak-space-sm);
+  color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-semibold);
+}
+
+[data-slot="menubar-separator"] {
+  background: var(--ak-color-border);
+  block-size: 1px;
+  margin: .25rem 0;
+}
+
+[data-slot="navigation-menu"] {
+  position: relative;
+}
+
+[data-slot="navigation-menu-list"] {
+  align-items: center;
+  gap: .25rem;
+  display: flex;
+}
+
+[data-slot="navigation-menu-trigger"] {
+  min-height: 2.25rem;
+  padding: 0 var(--ak-space-sm);
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-sm);
+  background: var(--ak-color-surface);
+  color: var(--ak-color-text);
+  cursor: pointer;
+  transition: background var(--ak-duration-fast) var(--ak-ease-standard),
+    border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+[data-slot="navigation-menu-trigger"][data-state="open"] {
+  border-color: var(--ak-color-primary);
+  background: var(--ak-color-primary-soft);
+  color: var(--ak-color-primary-ink);
+}
+
+[data-slot="navigation-menu-trigger"]:hover {
+  background: var(--ak-color-hover);
+  border-color: var(--ak-color-border-strong);
+}
+
+[data-slot="navigation-menu-content"] {
+  min-width: 14rem;
+  max-block-size: min(20rem, 100vh - 4rem);
+  padding: var(--ak-space-sm);
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface-raised);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-sm);
+  gap: .25rem;
+  display: grid;
+  overflow-y: auto;
+}
+
+[data-slot="navigation-menu-link"], [data-slot="navigation-menu-sub-trigger"] {
+  min-height: 2.25rem;
+  padding: 0 var(--ak-space-sm);
+  border-radius: var(--ak-radius-sm);
+  color: var(--ak-color-text);
+  cursor: pointer;
+  transition: background var(--ak-duration-fast) var(--ak-ease-standard),
+    color var(--ak-duration-fast) var(--ak-ease-standard);
+  align-items: center;
+  text-decoration: none;
+  display: flex;
+}
+
+[data-slot="navigation-menu-link"]:hover, [data-slot="navigation-menu-sub-trigger"]:hover {
+  background: var(--ak-color-surface-muted);
+}
+
+[data-slot="navigation-menu-sub-trigger"][data-disabled] {
+  opacity: .5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+[data-slot="navigation-menu-viewport"] {
+  margin-top: var(--ak-space-sm);
+}
+
+[data-slot="navigation-menu-indicator"] {
+  background: var(--ak-color-primary);
+  border-radius: 999px;
+  block-size: 2px;
+  inline-size: 2rem;
+  margin-top: .125rem;
+}
+
+[data-slot="accordion"] {
+  gap: var(--ak-space-sm);
+  display: grid;
+}
+
+[data-slot="accordion-item"] {
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface);
+  transition: border-color var(--ak-duration-fast) var(--ak-ease-standard);
+  overflow: hidden;
+}
+
+[data-slot="accordion-item"][data-state="open"] {
+  border-color: var(--ak-color-primary);
+}
+
+[data-slot="accordion-header"] {
+  margin: 0;
+}
+
+[data-slot="accordion-trigger"] {
+  inline-size: 100%;
+  min-height: 2.75rem;
+  padding: 0 var(--ak-space-md);
+  color: var(--ak-color-text);
+  cursor: pointer;
+  transition: background var(--ak-duration-fast) var(--ak-ease-standard),
+    color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
+  background: none;
+  border: 0;
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+}
+
+[data-slot="accordion-trigger"]:hover {
+  background: var(--ak-color-hover);
+}
+
+[data-slot="accordion-trigger"]:active {
+  background: var(--ak-color-active);
+}
+
+[data-slot="accordion-trigger"]:focus-visible {
+  box-shadow: inset 0 0 0 3px var(--ak-color-focus-ring);
+  outline: none;
+}
+
+[data-slot="accordion-trigger"][data-disabled] {
+  opacity: .5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+[data-slot="accordion-content"] {
+  padding: 0 var(--ak-space-md) var(--ak-space-md);
+  color: var(--ak-color-text-muted);
+  line-height: var(--ak-line-height-normal);
+}
+
+[data-slot="collapsible-trigger"] {
+  min-height: 2.5rem;
+  padding: 0 var(--ak-space-md);
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface);
+  color: var(--ak-color-text);
+  cursor: pointer;
+  transition: background var(--ak-duration-fast) var(--ak-ease-standard),
+    border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
+  justify-content: space-between;
+  align-items: center;
+  display: inline-flex;
+}
+
+[data-slot="collapsible-trigger"][data-state="open"] {
+  border-color: var(--ak-color-primary);
+}
+
+[data-slot="collapsible-trigger"]:hover {
+  background: var(--ak-color-hover);
+  border-color: var(--ak-color-border-strong);
+}
+
+[data-slot="collapsible-trigger"]:active {
+  background: var(--ak-color-active);
+}
+
+[data-slot="collapsible-trigger"]:focus-visible {
+  box-shadow: 0 0 0 3px var(--ak-color-focus-ring);
+  outline: none;
+}
+
+[data-slot="collapsible-trigger"][data-disabled] {
+  opacity: .5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+[data-slot="collapsible-content"] {
+  padding: var(--ak-space-md) 0 0;
+  color: var(--ak-color-text-muted);
+  line-height: var(--ak-line-height-normal);
+}
+
+[data-slot="dialog-content"] {
+  border-color: color-mix(in srgb, var(--ak-color-danger) 26%, var(--ak-color-border-subtle));
+  border-width: 2px;
+}
+
+[data-slot="dropdown-menu-trigger"] {
+  min-height: 2.5rem;
+  padding: 0 var(--ak-space-md);
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface);
+  color: var(--ak-color-text);
+  cursor: pointer;
+  transition: border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+[data-slot="dropdown-menu-trigger"][data-state="open"] {
+  border-color: var(--ak-color-primary);
+}
+
+[data-slot="dropdown-menu-trigger"][data-disabled] {
+  opacity: .5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+@keyframes ak-menu-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes ak-menu-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+
+[data-slot="dropdown-menu-content"] {
+  min-width: 12rem;
+  max-block-size: min(20rem, 100vh - 4rem);
+  padding: var(--ak-space-sm);
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface-raised);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-sm);
+  animation: ak-menu-in var(--ak-duration-fast) var(--ak-ease-standard);
+  gap: .25rem;
+  display: grid;
+  overflow-y: auto;
+}
+
+[data-slot="dropdown-menu-content"][data-state="closed"] {
+  animation: ak-menu-out var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+[data-slot="dropdown-menu-item"] {
+  min-height: 2.25rem;
+  padding: 0 var(--ak-space-sm);
+  border-radius: var(--ak-radius-sm);
+  color: var(--ak-color-text);
+  cursor: pointer;
+  transition: background var(--ak-duration-fast) var(--ak-ease-standard),
+    color var(--ak-duration-fast) var(--ak-ease-standard);
+  background: none;
+  border: 0;
+  align-items: center;
+  display: flex;
+}
+
+[data-slot="dropdown-menu-item"]:hover {
+  background: var(--ak-color-surface-muted);
+}
+
+[data-slot="dropdown-menu-item"]:focus-visible {
+  background: var(--ak-color-surface-muted);
+  outline: none;
+}
+
+[data-slot="dropdown-menu-item"][data-disabled] {
+  opacity: .5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+[data-slot="dropdown-menu-label"] {
+  padding: 0 var(--ak-space-sm);
+  color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-semibold);
+}
+
+[data-slot="dropdown-menu-separator"] {
+  background: var(--ak-color-border);
+  block-size: 1px;
+  margin: .25rem 0;
+}
+
+:where([data-slot="toast-provider"]) {
+  display: contents;
+}
+
+:where([data-slot="toast-viewport"]) {
+  gap: var(--ak-space-md);
+  width: min(27rem, 100vw - 2rem);
+  z-index: var(--ak-z-toast);
+  display: grid;
+  position: fixed;
+  inset-block-end: 1rem;
+  inset-inline-end: 1rem;
+}
+
+@keyframes ak-toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes ak-toast-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+:where([data-slot="toast"]) {
+  gap: var(--ak-space-sm);
+  padding: calc(var(--ak-layout-panel-padding) - .15rem) var(--ak-layout-panel-padding);
+  border: 1px solid var(--ak-color-border-subtle);
+  border-radius: var(--ak-radius-lg);
+  background: var(--ak-color-surface-raised);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-md);
+  animation: ak-toast-in var(--ak-duration-normal) var(--ak-ease-standard);
+  display: grid;
+}
+
+:where([data-slot="toast"][data-state="closed"]) {
+  animation: ak-toast-out var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="toast-title"]) {
+  font-weight: var(--ak-font-weight-bold);
+  line-height: var(--ak-line-height-tight);
+}
+
+:where([data-slot="toast-description"]) {
+  color: var(--ak-color-text-muted);
+  line-height: var(--ak-line-height-normal);
+}
+
+:where([data-slot="toast-action"]), :where([data-slot="toast-close"]) {
+  min-height: 2.5rem;
+  padding: 0 var(--ak-space-md);
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-md);
+  background: color-mix(in srgb, var(--ak-color-primary-soft) 12%, var(--ak-color-surface));
+  color: var(--ak-color-text);
+  cursor: pointer;
+  transition: background var(--ak-duration-fast) var(--ak-ease-standard),
+    border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+:where([data-slot="toast-action"]:hover), :where([data-slot="toast-close"]:hover) {
+  background: color-mix(in srgb, var(--ak-color-primary-soft) 22%, var(--ak-color-surface-muted));
+  border-color: var(--ak-color-border-strong);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where([data-slot="toast-action"][data-disabled]), :where([data-slot="toast-close"][data-disabled]) {
+  background: var(--ak-color-disabled-surface);
+  border-color: var(--ak-color-disabled-border);
+  color: var(--ak-color-disabled-text);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+:where([data-slot="toast"][data-variant="success"]) {
+  background: color-mix(in srgb, var(--ak-color-success-soft) 78%, var(--ak-color-surface-raised));
+  border-color: var(--ak-color-success);
+}
+
+:where([data-slot="toast"][data-variant="warning"]) {
+  background: color-mix(in srgb, var(--ak-color-warning-soft) 78%, var(--ak-color-surface-raised));
+  border-color: var(--ak-color-warning);
+}
+
+:where([data-slot="toast"][data-variant="danger"]) {
+  background: color-mix(in srgb, var(--ak-color-danger-soft) 78%, var(--ak-color-surface-raised));
+  border-color: var(--ak-color-danger);
+}
+
+:where([data-slot="toast"][data-variant="info"]) {
+  background: color-mix(in srgb, var(--ak-color-info-soft) 78%, var(--ak-color-surface-raised));
+  border-color: var(--ak-color-info);
+}
+
+@media (width <= 40rem) {
+  :where([data-slot="toast-viewport"]) {
+    width: auto;
+    inset-inline: 1rem;
+  }
+}
+
+@keyframes ak-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes ak-fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes ak-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes ak-scale-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(.95);
+  }
+}
+
+:where([data-slot="dialog-overlay"]) {
+  background: color-mix(in srgb, var(--ak-color-backdrop) 96%, black 4%);
+  animation: ak-fade-in var(--ak-duration-fast) var(--ak-ease-standard);
+  position: fixed;
+  inset: 0;
+}
+
+:where([data-slot="dialog-overlay"][data-state="closed"]) {
+  animation: ak-fade-out var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="dialog-content"]) {
+  gap: var(--ak-space-sm);
+  min-width: min(34rem, 100vw - 1.5rem);
+  max-width: 40rem;
+  max-block-size: calc(100dvh - 4rem);
+  padding: calc(var(--ak-layout-panel-padding) + .25rem);
+  border: 1px solid color-mix(in srgb, var(--ak-color-border-subtle) 88%, white 12%);
+  border-radius: var(--ak-radius-lg);
+  background: var(--ak-color-surface-raised);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-md);
+  animation: ak-scale-in var(--ak-duration-normal) var(--ak-ease-standard);
+  display: grid;
+  overflow-y: auto;
+}
+
+:where([data-slot="dialog-content"][data-state="closed"]) {
+  animation: ak-scale-out var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="dialog-title"]) {
+  color: var(--ak-color-text);
+  font-size: var(--ak-font-size-lg);
+  font-weight: var(--ak-font-weight-bold);
+  line-height: var(--ak-line-height-tight);
+  margin: 0;
+}
+
+:where([data-slot="dialog-description"]) {
+  margin: var(--ak-space-sm) 0 0;
+  color: var(--ak-color-text-muted);
+  line-height: var(--ak-line-height-normal);
+}
+
+:where([data-slot="dialog-close"]) {
+  min-height: 2.5rem;
+  padding: 0 calc(var(--ak-space-md) + .125rem);
+  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, white 16%);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-sm);
+  cursor: pointer;
+  transition: background var(--ak-duration-fast) var(--ak-ease-standard),
+    border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+:where([data-slot="dialog-close"]:hover) {
+  background: var(--ak-color-surface-muted);
+  border-color: var(--ak-color-border-strong);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where([data-slot="dialog-close"][data-disabled]) {
+  background: var(--ak-color-disabled-surface);
+  border-color: var(--ak-color-disabled-border);
+  color: var(--ak-color-disabled-text);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+@keyframes ak-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes ak-slide-up-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+
+:where([data-slot="popover-content"]) {
+  min-width: 14rem;
+  padding: calc(var(--ak-space-md) + .125rem);
+  border: 1px solid color-mix(in srgb, var(--ak-color-border-subtle) 84%, white 16%);
+  border-radius: var(--ak-radius-lg);
+  background: var(--ak-color-surface-raised);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-md);
+  animation: ak-slide-up var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="popover-content"][data-state="closed"]) {
+  animation: ak-slide-up-out var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="popover-trigger"][data-state="open"]) {
+  border-color: var(--ak-color-primary);
+}
+
+:where([data-slot="popover-close"]) {
+  min-height: 2.5rem;
+  padding: 0 calc(var(--ak-space-md) + .125rem);
+  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, white 16%);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-sm);
+  cursor: pointer;
+  transition: background var(--ak-duration-fast) var(--ak-ease-standard),
+    border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+:where([data-slot="popover-close"]:hover) {
+  background: var(--ak-color-surface-muted);
+  border-color: var(--ak-color-border-strong);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where([data-slot="popover-close"][data-disabled]) {
+  background: var(--ak-color-disabled-surface);
+  border-color: var(--ak-color-disabled-border);
+  color: var(--ak-color-disabled-text);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+@keyframes ak-hover-card-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px) scale(.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes ak-hover-card-out {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(4px) scale(.98);
+  }
+}
+
+:where([data-slot="hover-card-trigger"]) {
+  cursor: pointer;
+}
+
+:where([data-slot="hover-card-trigger"][data-disabled]) {
+  cursor: not-allowed;
+}
+
+:where([data-slot="hover-card-content"]) {
+  min-width: 14rem;
+  padding: calc(var(--ak-space-md) + .125rem);
+  border: 1px solid color-mix(in srgb, var(--ak-color-border-subtle) 84%, white 16%);
+  border-radius: var(--ak-radius-lg);
+  background: var(--ak-color-surface-raised);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-md);
+  animation: ak-hover-card-in var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="hover-card-content"][data-state="closed"]) {
+  animation: ak-hover-card-out var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+@keyframes ak-tooltip-in {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes ak-tooltip-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+}
+
+[data-slot="tooltip-content"] {
+  border: 1px solid color-mix(in srgb, var(--ak-color-border) 48%, transparent);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-text);
+  max-width: 18rem;
+  color: var(--ak-color-text-inverse);
+  font-size: var(--ak-font-size-sm);
+  box-shadow: var(--ak-shadow-md);
+  animation: ak-tooltip-in var(--ak-duration-fast) var(--ak-ease-standard);
+  padding: .45rem .65rem;
+  position: relative;
+}
+
+[data-slot="tooltip-content"]:before {
+  content: "";
+  border-inline: .38rem solid #0000;
+  border-block-start: .38rem solid var(--ak-color-text);
+  block-size: 0;
+  inline-size: 0;
+  position: absolute;
+}
+
+[data-slot="tooltip-content"]:not([data-side]):before, [data-slot="tooltip-content"][data-side="top"]:before {
+  inset-block-end: -.3rem;
+  inset-inline-start: 50%;
+  transform: translateX(-50%);
+}
+
+[data-slot="tooltip-content"][data-side="bottom"]:before {
+  inset-block-start: -.3rem;
+  inset-inline-start: 50%;
+  transform: translateX(-50%) rotate(180deg);
+}
+
+[data-slot="tooltip-content"][data-side="left"]:before {
+  inset-block-start: 50%;
+  inset-inline-end: -.3rem;
+  transform: translateY(-50%) rotate(90deg);
+}
+
+[data-slot="tooltip-content"][data-side="right"]:before {
+  inset-block-start: 50%;
+  inset-inline-start: -.3rem;
+  transform: translateY(-50%) rotate(-90deg);
+}
+
+[data-slot="tooltip-content"][data-state="closed"] {
+  animation: ak-tooltip-out var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+[data-slot="tooltip-trigger"][data-state="open"] {
+  box-shadow: 0 0 0 3px var(--ak-color-focus-ring);
+}
+
+[data-slot="tooltip-trigger"][data-disabled] {
+  opacity: .5;
+  cursor: not-allowed;
+  pointer-events: none;
+}