@cawalch/porchlight 0.1.0

package/dist/porchlight.css

@@ -0,0 +1,3765 @@
+@layer porchlight {
+  @layer reset, tokens, themes, base, layout, components, utilities, enhancements, print;
+}
+
+@layer porchlight.reset {
+  *, :before, :after {
+    box-sizing: border-box;
+  }
+
+  :where(html) {
+    color-scheme: light dark;
+    text-size-adjust: 100%;
+  }
+
+  :where(body) {
+    min-block-size: 100dvb;
+    margin: 0;
+  }
+
+  :where(img, svg, video, canvas) {
+    block-size: auto;
+    max-inline-size: 100%;
+    display: block;
+  }
+
+  :where(button, input, select, textarea) {
+    font: inherit;
+    color: inherit;
+  }
+
+  :where(button, [role="button"], input, select, textarea, summary) {
+    touch-action: manipulation;
+  }
+
+  :where(table) {
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+
+  :where([hidden]) {
+    display: none !important;
+  }
+}
+
+@layer porchlight.tokens {
+  @property --pl-motion-scale {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 1;
+  }
+
+  @property --pl-radius-control {
+    syntax: "<length>";
+    inherits: true;
+    initial-value: .5rem;
+  }
+
+  @property --pl-focus-size {
+    syntax: "<length>";
+    inherits: true;
+    initial-value: 2px;
+  }
+
+  :root {
+    --pl-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu,
+      Cantarell, "Noto Sans", sans-serif;
+    --pl-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      monospace;
+    --pl-font-weight-normal: 400;
+    --pl-font-weight-medium: 500;
+    --pl-font-weight-semibold: 600;
+    --pl-font-weight-bold: 700;
+    --pl-font-weight-black: 900;
+    --pl-text-xs: clamp(.75rem, .72rem + .1vi, .8125rem);
+    --pl-text-sm: clamp(.875rem, .84rem + .1vi, .9375rem);
+    --pl-text-md: 1rem;
+    --pl-text-lg: clamp(1.125rem, 1.05rem + .25vi, 1.25rem);
+    --pl-text-xl: clamp(1.25rem, 1.1rem + .55vi, 1.625rem);
+    --pl-text-2xl: clamp(1.5rem, 1.2rem + 1vi, 2rem);
+    --pl-text-3xl: clamp(1.875rem, 1.4rem + 1.6vi, 2.75rem);
+    --pl-text-display: clamp(2.5rem, 1.8rem + 3vi, 4.5rem);
+    --pl-leading-tight: 1.15;
+    --pl-leading-snug: 1.3;
+    --pl-leading-normal: 1.5;
+    --pl-leading-loose: 1.7;
+    --pl-space-0: 0;
+    --pl-space-1: .25rem;
+    --pl-space-2: .5rem;
+    --pl-space-3: .75rem;
+    --pl-space-4: 1rem;
+    --pl-space-5: 1.25rem;
+    --pl-space-6: 1.5rem;
+    --pl-space-8: 2rem;
+    --pl-space-10: 2.5rem;
+    --pl-space-12: 3rem;
+    --pl-radius-xs: .25rem;
+    --pl-radius-sm: .375rem;
+    --pl-radius-md: .5rem;
+    --pl-radius-lg: .75rem;
+    --pl-radius-xl: 1rem;
+    --pl-radius-2xl: 1.5rem;
+    --pl-radius-3xl: 2rem;
+    --pl-radius-pill: 999rem;
+    --pl-duration-1: calc(.12s * var(--pl-motion-scale));
+    --pl-duration-2: calc(.18s * var(--pl-motion-scale));
+    --pl-duration-3: calc(.26s * var(--pl-motion-scale));
+    --pl-duration-enter: calc(.22s * var(--pl-motion-scale));
+    --pl-duration-exit: calc(.16s * var(--pl-motion-scale));
+    --pl-ease-standard: cubic-bezier(.2, 0, 0, 1);
+    --pl-ease-emphasized: cubic-bezier(.2, 0, 0, 1.2);
+    --pl-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
+    --pl-ease-decelerate: cubic-bezier(0, 0, .2, 1);
+    --pl-ease-accelerate: cubic-bezier(.4, 0, 1, 1);
+    --pl-z-base: 0;
+    --pl-z-raised: 10;
+    --pl-z-sticky: 100;
+    --pl-z-overlay: 1000;
+    --pl-z-toast: 1100;
+    --pl-brand-1: oklch(97% .02 82);
+    --pl-brand-2: oklch(89% .05 82);
+    --pl-brand-3: oklch(80% .09 82);
+    --pl-brand-4: oklch(70% .13 82);
+    --pl-brand-5: oklch(63% .15 82);
+    --pl-brand-6: oklch(56% .14 82);
+    --pl-brand-7: oklch(48% .11 82);
+    --pl-brand-8: oklch(39% .07 82);
+    --pl-brand-9: oklch(29% .04 82);
+    --pl-color-bg: light-dark(oklch(98% .005 60), oklch(14% .008 55));
+    --pl-color-surface: light-dark(oklch(100% 0 0), oklch(18% .008 55));
+    --pl-color-surface-2: light-dark(oklch(94% .008 60), oklch(22% .012 55));
+    --pl-color-text: light-dark(oklch(20% .012 55), oklch(96% .008 60));
+    --pl-color-text-muted: light-dark(oklch(46% .015 55), oklch(72% .012 55));
+    --pl-color-border: light-dark(oklch(80% .015 55 / .75), oklch(45% .012 55 / .3));
+    --pl-color-border-overlay: transparent;
+    --pl-color-accent: light-dark(var(--pl-brand-7), var(--pl-brand-4));
+    --pl-color-accent-text: light-dark(#fff, oklch(16% .01 55));
+    --pl-color-accent-hover: color-mix(in oklab,
+      var(--pl-color-accent),
+      oklch(16% .01 55) 10%);
+    --pl-color-danger: oklch(60% .22 25);
+    --pl-color-danger-bg: light-dark(oklch(96% .04 25), oklch(22% .08 25));
+    --pl-color-danger-text: light-dark(oklch(36% .18 25), oklch(90% .06 25));
+    --pl-color-success: oklch(58% .18 150);
+    --pl-color-success-bg: light-dark(oklch(96% .04 150), oklch(22% .08 150));
+    --pl-color-success-text: light-dark(oklch(34% .15 150), oklch(82% .15 150));
+    --pl-color-warning: oklch(62% .19 75);
+    --pl-color-warning-bg: light-dark(oklch(96% .06 75), oklch(24% .09 75));
+    --pl-color-warning-text: light-dark(oklch(40% .17 75), oklch(84% .15 75));
+    --pl-opacity-disabled: .5;
+    --pl-accent-bar-width: 3px;
+    --pl-color-scrim: oklch(0% 0 0 / .55);
+    --pl-control-block-size: 2.5rem;
+    --pl-control-padding-inline: var(--pl-space-4);
+    --pl-control-gap: var(--pl-space-2);
+    --pl-control-border-width: 1px;
+    --pl-control-radius: var(--pl-radius-control);
+    --pl-focus-color: light-dark(oklch(52% .14 82), oklch(72% .13 82));
+    --pl-focus-offset: 2px;
+    --pl-focus-size: 2px;
+    --pl-focus-glow-opacity: 85%;
+    --pl-backdrop-blur: 12px;
+    --pl-backdrop-saturate: 160%;
+    --pl-backdrop-blur-strong: 20px;
+    --pl-backdrop-saturate-strong: 180%;
+    --pl-backdrop-blur-scrim: 4px;
+    --pl-backdrop-saturate-scrim: 80%;
+    --pl-shadow-1: 0 1px 2px oklch(0% 0 0 / .08),
+      0 1px 4px oklch(30% .04 40 / .06);
+    --pl-shadow-2: 0 4px 8px oklch(0% 0 0 / .08),
+      0 8px 24px oklch(25% .06 40 / .12),
+      inset 0 1px 0 oklch(100% 0 0 / .06);
+    --pl-shadow-3: 0 8px 16px oklch(0% 0 0 / .1),
+      0 24px 64px oklch(20% .08 40 / .18),
+      inset 0 1px 0 oklch(100% 0 0 / .08);
+    --pl-shadow-glow: 0 0 0 4px color-mix(in oklab, var(--pl-color-accent), transparent 72%);
+  }
+}
+
+@layer porchlight.themes {
+  :where([data-theme="light"]) {
+    color-scheme: light;
+  }
+
+  :where([data-theme="dark"]) {
+    color-scheme: dark;
+  }
+
+  :where([data-density="compact"]) {
+    --pl-control-block-size: 2rem;
+    --pl-control-padding-inline: var(--pl-space-3);
+    --pl-control-gap: var(--pl-space-1);
+  }
+
+  :where([data-density="comfortable"]) {
+    --pl-control-block-size: 2.5rem;
+  }
+
+  :where([data-density="touch"]) {
+    --pl-control-block-size: 2.75rem;
+    --pl-control-padding-inline: var(--pl-space-5);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --pl-motion-scale: 0;
+      scroll-behavior: auto;
+    }
+
+    *, :before, :after {
+      transition-duration: 1ms !important;
+      animation-duration: 1ms !important;
+      animation-iteration-count: 1 !important;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :root {
+      --pl-color-bg: Canvas;
+      --pl-color-surface: Canvas;
+      --pl-color-surface-2: Canvas;
+      --pl-color-text: CanvasText;
+      --pl-color-text-muted: CanvasText;
+      --pl-color-border: ButtonBorder;
+      --pl-color-accent: Highlight;
+      --pl-color-accent-text: HighlightText;
+      --pl-focus-color: Highlight;
+      --pl-shadow-1: none;
+      --pl-shadow-2: none;
+      --pl-shadow-3: none;
+    }
+  }
+}
+
+@layer porchlight.base {
+  :where(html) {
+    font-family: var(--pl-font-sans);
+    background: var(--pl-color-bg);
+    color: var(--pl-color-text);
+    accent-color: var(--pl-color-accent);
+  }
+
+  :where(body) {
+    font-size: var(--pl-text-md);
+    line-height: var(--pl-leading-normal);
+    background: var(--pl-color-bg);
+    color: var(--pl-color-text);
+    text-rendering: optimizelegibility;
+  }
+
+  :where(a) {
+    color: var(--pl-color-accent);
+    text-underline-offset: .18em;
+    text-decoration-thickness: .08em;
+  }
+
+  :where(a:hover) {
+    color: var(--pl-color-accent-hover);
+  }
+
+  :where(:focus-visible) {
+    outline: var(--pl-focus-size) solid var(--pl-focus-color);
+    outline-offset: var(--pl-focus-offset);
+  }
+
+  :where(h1, h2, h3, h4) {
+    line-height: var(--pl-leading-tight);
+    text-wrap: balance;
+    letter-spacing: -.02em;
+    margin-block: 0;
+  }
+
+  :where(h1) {
+    font-weight: var(--pl-font-weight-black, 900);
+    letter-spacing: -.03em;
+  }
+
+  :where(h2) {
+    font-weight: var(--pl-font-weight-bold, 700);
+    letter-spacing: -.025em;
+  }
+
+  :where(p, ul, ol, dl, figure, blockquote) {
+    margin-block: 0;
+  }
+
+  :where(code, kbd, samp, pre) {
+    font-family: var(--pl-font-mono);
+  }
+
+  :where() {
+    background: color-mix(in oklab, var(--pl-color-accent), transparent 60%);
+  }
+}
+
+@layer porchlight.layout {
+  :where(.l-stack) {
+    gap: var(--l-stack-gap, var(--pl-space-4));
+    flex-direction: column;
+    display: flex;
+  }
+
+  :where(.l-cluster) {
+    align-items: var(--l-cluster-align, center);
+    justify-content: var(--l-cluster-justify, flex-start);
+    gap: var(--l-cluster-gap, var(--pl-space-3));
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  :where(.l-grid) {
+    gap: var(--l-grid-gap, var(--pl-space-4));
+    grid-template-columns: repeat(auto-fit,
+      minmax(min(var(--l-grid-min, 16rem), 100%), 1fr));
+    display: grid;
+  }
+
+  :where(.l-sidebar) {
+    gap: var(--l-sidebar-gap, var(--pl-space-4));
+    grid-template-columns: minmax(0, var(--l-sidebar-size, 16rem))
+      minmax(0, 1fr);
+    display: grid;
+  }
+
+  @media (width < 48rem) {
+    :where(.l-sidebar) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @container (inline-size < 48rem) {
+    :where(.l-sidebar) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  :where(.l-page) {
+    inline-size: min(100% - 2 * var(--pl-space-4), var(--l-page-max, 88rem));
+    margin-inline: auto;
+  }
+
+  :where(.l-scroll-area) {
+    scrollbar-gutter: stable;
+    overscroll-behavior: contain;
+    overflow: auto;
+  }
+
+  :where(.l-app-shell) {
+    grid-template: "topbar topbar"
+                   "sidebar main" minmax(0, 1fr)
+                   / auto minmax(0, 1fr);
+    min-block-size: 100dvb;
+    display: grid;
+  }
+
+  :where(.l-app-shell__topbar) {
+    z-index: var(--pl-z-sticky);
+    grid-area: topbar;
+    position: sticky;
+    inset-block-start: 0;
+  }
+
+  :where(.l-app-shell__topbar[data-glass]) {
+    background: color-mix(in oklab, var(--pl-color-surface), transparent 18%);
+    -webkit-backdrop-filter: blur(16px) saturate(180%);
+    border-block-end: 1px solid color-mix(in oklab,
+      var(--pl-color-border),
+      transparent 50%);
+  }
+
+  :where(.l-app-shell__sidebar) {
+    inline-size: var(--app-sidebar-size, 16rem);
+    overflow-inline: clip;
+    transition: inline-size var(--pl-duration-2) var(--pl-ease-standard);
+    grid-area: sidebar;
+  }
+
+  :where(.l-app-shell__sidebar[data-sidebar="collapsed"]) {
+    inline-size: var(--app-sidebar-collapsed, 3.5rem);
+  }
+
+  :where(.l-app-shell__main) {
+    scrollbar-gutter: stable;
+    overscroll-behavior: contain;
+    grid-area: main;
+    min-inline-size: 0;
+    overflow: auto;
+    container-type: inline-size;
+  }
+
+  @media (width < 60rem) {
+    :where(.l-app-shell) {
+      grid-template: "topbar"
+                     "main" minmax(0, 1fr)
+                     / minmax(0, 1fr);
+    }
+
+    :where(.l-app-shell__sidebar) {
+      display: none;
+    }
+  }
+
+  :where(.l-columns) {
+    --l-columns-width: 16rem;
+    columns: var(--l-columns-width) var(--l-columns-count, auto);
+    column-gap: var(--l-columns-gap, var(--pl-space-4));
+  }
+
+  :where(.l-columns > *) {
+    break-inside: avoid;
+    margin-block-end: var(--l-columns-gap, var(--pl-space-4));
+  }
+
+  :where(.l-container) {
+    inline-size: min(100% - 2 * var(--l-container-pad, var(--pl-space-4)),
+      var(--l-container-max, 80rem));
+    margin-inline: auto;
+  }
+
+  :where(.l-inset) {
+    inline-size: min(100%, var(--l-inset-max, 48rem));
+    margin-inline: auto;
+  }
+}
+
+@layer porchlight.components {
+  @scope (.c-button) {
+    :scope {
+      --c-button-bg: var(--pl-color-surface);
+      --c-button-fg: var(--pl-color-text);
+      --c-button-border: var(--pl-color-border);
+      --c-button-highlight: transparent;
+      justify-content: center;
+      align-items: center;
+      gap: var(--pl-control-gap);
+      min-block-size: var(--pl-control-block-size);
+      min-inline-size: var(--pl-control-block-size);
+      padding-inline: var(--pl-control-padding-inline);
+      border: var(--pl-control-border-width) solid var(--c-button-border);
+      border-radius: var(--pl-control-radius);
+      background: var(--c-button-bg);
+      color: var(--c-button-fg);
+      font-family: inherit;
+      font-weight: var(--pl-font-weight-semibold);
+      text-align: center;
+      white-space: nowrap;
+      cursor: default;
+      user-select: none;
+      box-shadow: inset 0 1px 0 var(--c-button-highlight);
+      transition: background-color var(--pl-duration-1) var(--pl-ease-standard),
+        border-color var(--pl-duration-1) var(--pl-ease-standard),
+        color var(--pl-duration-1) var(--pl-ease-standard),
+        transform var(--pl-duration-1) var(--pl-ease-spring),
+        box-shadow var(--pl-duration-1) var(--pl-ease-standard);
+      line-height: 1;
+      text-decoration: none;
+      display: inline-flex;
+    }
+
+    :scope[data-variant="primary"] {
+      --c-button-bg: var(--pl-color-accent);
+      --c-button-fg: var(--pl-color-accent-text);
+      --c-button-border: var(--pl-color-accent);
+      --c-button-highlight: oklch(100% 0 0 / .14);
+    }
+
+    :scope[data-variant="secondary"] {
+      --c-button-bg: var(--pl-color-surface-2);
+    }
+
+    :scope[data-variant="ghost"] {
+      --c-button-bg: transparent;
+      --c-button-border: transparent;
+    }
+
+    :scope:not([data-variant]) {
+      --c-button-border: color-mix(in oklab,
+        var(--pl-color-border),
+        transparent 20%);
+    }
+
+    :scope:is(:hover, [data-hover]):not(:disabled, [aria-disabled="true"]) {
+      background-color: color-mix(in oklab,
+        var(--c-button-bg),
+        var(--pl-color-text) 12%);
+      cursor: pointer;
+    }
+
+    :scope[data-variant="ghost"]:is(:hover, [data-hover]):not(:disabled, [aria-disabled="true"]) {
+      background-color: color-mix(in oklab,
+        var(--pl-color-accent),
+        transparent 85%);
+    }
+
+    :scope:is(:active, [aria-pressed="true"]):not(:disabled, [aria-disabled="true"]) {
+      transform: scale(.97);
+    }
+
+    :scope[data-variant="primary"]:focus-visible {
+      box-shadow: var(--pl-shadow-glow),
+        inset 0 1px 0 var(--c-button-highlight);
+      outline: none;
+    }
+
+    :scope:is([data-variant="ghost"], [data-variant="secondary"])[aria-pressed="true"] {
+      --c-button-bg: color-mix(in oklab,
+        var(--pl-color-accent),
+        transparent 82%);
+      --c-button-fg: var(--pl-color-text);
+    }
+
+    :scope:is(:disabled, [aria-disabled="true"]) {
+      opacity: var(--pl-opacity-disabled);
+      cursor: not-allowed;
+      box-shadow: none;
+    }
+
+    @supports (text-box: trim-both cap alphabetic) {
+      :scope {
+        text-box: trim-both cap alphabetic;
+      }
+    }
+
+    @media (forced-colors: active) {
+      :scope {
+        border-color: buttonborder;
+      }
+
+      :scope[data-variant="primary"] {
+        color: highlighttext;
+        background: highlight;
+        border-color: highlight;
+      }
+    }
+  }
+
+  @scope (.c-field) {
+    :scope {
+      --c-field-border: var(--pl-color-border);
+      --c-field-bg: var(--pl-color-surface);
+      --c-field-fg: var(--pl-color-text);
+      gap: var(--pl-space-2);
+      color: var(--c-field-fg);
+      display: grid;
+    }
+
+    .c-field__label {
+      font-size: var(--pl-text-sm);
+      font-weight: var(--pl-font-weight-semibold);
+    }
+
+    .c-field__control {
+      appearance: none;
+      inline-size: 100%;
+      min-block-size: var(--pl-control-block-size);
+      padding-block: var(--pl-space-1);
+      padding-inline: var(--pl-control-padding-inline);
+      border: var(--pl-control-border-width) solid var(--c-field-border);
+      border-radius: var(--pl-control-radius);
+      background: var(--c-field-bg);
+      color: var(--c-field-fg);
+      transition: border-color var(--pl-duration-1) var(--pl-ease-standard),
+        box-shadow var(--pl-duration-1) var(--pl-ease-standard);
+    }
+
+    select.c-field__control {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right var(--pl-space-3) center;
+      background-size: 1rem;
+      padding-inline-end: var(--pl-space-8);
+    }
+
+    .c-field__control::placeholder {
+      color: var(--pl-color-text-muted);
+    }
+
+    .c-field__hint {
+      color: var(--pl-color-text-muted);
+      font-size: var(--pl-text-sm);
+    }
+  }
+
+  :where(.c-field) .c-field__control:focus-visible {
+    border-color: var(--pl-focus-color);
+    box-shadow: 0 0 0 4px
+      color-mix(in oklab, var(--pl-focus-color), transparent var(--pl-focus-glow-opacity));
+    outline: none;
+  }
+
+  :where(.c-field) .c-field__control:user-invalid {
+    border-color: var(--pl-color-danger);
+    box-shadow: 0 0 0 4px
+      color-mix(in oklab, var(--pl-color-danger), transparent var(--pl-focus-glow-opacity));
+  }
+
+  :where(.c-field):has(.c-field__control:user-invalid) .c-field__hint {
+    color: var(--pl-color-danger-text);
+  }
+
+  :where(.c-field):has(.c-field__control:disabled) {
+    opacity: var(--pl-opacity-disabled);
+  }
+
+  :where(.c-field):has(.c-field__control:disabled) .c-field__control {
+    cursor: not-allowed;
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-field) .c-field__control {
+      border-color: buttonborder;
+    }
+  }
+
+  @scope (.c-card) {
+    :scope {
+      --c-card-padding: var(--pl-space-5);
+      --c-card-bg: var(--pl-color-surface);
+      --c-card-border: var(--pl-color-border);
+      --c-card-shadow: var(--pl-shadow-1);
+      --c-card-radius: var(--pl-radius-2xl);
+      gap: var(--pl-space-4);
+      padding: var(--c-card-padding);
+      border: 1px solid var(--c-card-border);
+      border-radius: var(--c-card-radius);
+      background: var(--c-card-bg);
+      box-shadow: var(--c-card-shadow);
+      align-content: start;
+      display: grid;
+      container: c-card / inline-size;
+    }
+
+    :scope[data-elevated] {
+      --c-card-border: transparent;
+      --c-card-shadow: var(--pl-shadow-2);
+    }
+
+    :scope[data-variant="accent"] {
+      --c-card-border: color-mix(in oklab,
+        var(--pl-color-accent),
+        transparent 70%);
+      background: color-mix(in oklab,
+        var(--pl-color-accent),
+        var(--pl-color-surface) 94%);
+      box-shadow: inset var(--pl-accent-bar-width) 0 0 var(--pl-color-accent),
+        var(--pl-shadow-1);
+    }
+
+    :scope:has(.c-badge[data-variant="danger"]), :scope:has([data-status="error"]) {
+      --c-card-border: color-mix(in oklab,
+        var(--pl-color-danger),
+        transparent 55%);
+      box-shadow: 0 0 0 1px color-mix(in oklab, var(--pl-color-danger), transparent 72%),
+        var(--pl-shadow-1);
+    }
+
+    :scope:has(.c-badge[data-variant="success"]), :scope:has([data-status="success"]) {
+      --c-card-border: color-mix(in oklab,
+        var(--pl-color-success),
+        transparent 55%);
+      box-shadow: 0 0 0 1px color-mix(in oklab, var(--pl-color-success), transparent 72%),
+        var(--pl-shadow-1);
+    }
+
+    .c-card__header {
+      justify-content: space-between;
+      align-items: start;
+      gap: var(--pl-space-3);
+      display: flex;
+    }
+
+    .c-card__title {
+      font-size: var(--pl-text-lg);
+      font-weight: var(--pl-font-weight-bold);
+      line-height: var(--pl-leading-tight);
+      text-wrap: balance;
+      margin: 0;
+    }
+
+    .c-card__body {
+      color: var(--pl-color-text-muted);
+    }
+
+    .c-card__footer {
+      justify-content: flex-end;
+      align-items: center;
+      gap: var(--pl-space-2);
+      border-block-start: 1px solid color-mix(in oklab,
+        var(--c-card-border),
+        transparent 45%);
+      padding-block-start: var(--pl-space-3);
+      display: flex;
+    }
+
+    @container c-card (inline-size < 28rem) {
+      .c-card__header {
+        flex-direction: column;
+        align-items: stretch;
+      }
+    }
+
+    :scope[data-interactive], :scope[href] {
+      cursor: pointer;
+      color: inherit;
+      transition: transform var(--pl-duration-exit) var(--pl-ease-accelerate),
+        box-shadow var(--pl-duration-exit) var(--pl-ease-accelerate);
+      text-decoration: none;
+    }
+
+    :scope[data-interactive]:is(:hover, [data-hover]), :scope[href]:is(:hover, [data-hover]) {
+      transition: transform var(--pl-duration-enter) var(--pl-ease-decelerate),
+        box-shadow var(--pl-duration-enter) var(--pl-ease-decelerate);
+      box-shadow: var(--pl-shadow-2),
+        0 0 0 1px color-mix(in oklab, var(--pl-color-accent), transparent 88%);
+      transform: translateY(-3px);
+    }
+
+    :scope[data-interactive]:focus-visible, :scope[href]:focus-visible {
+      box-shadow: 0 0 0 var(--pl-focus-size) var(--pl-focus-color),
+        var(--pl-shadow-2);
+      outline: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-card) {
+      border-color: buttonborder;
+    }
+  }
+
+  @scope (.c-badge) {
+    :scope {
+      align-items: center;
+      gap: var(--pl-space-1);
+      min-block-size: var(--pl-space-6);
+      padding-inline: var(--pl-space-2);
+      border-radius: var(--pl-radius-pill);
+      font-size: var(--pl-text-xs);
+      font-weight: var(--pl-font-weight-semibold);
+      text-wrap: nowrap;
+      background: var(--pl-color-surface-2);
+      color: var(--pl-color-text);
+      line-height: 1;
+      display: inline-flex;
+    }
+
+    :scope[data-tone="accent"] {
+      background: var(--pl-color-accent);
+      color: var(--pl-color-accent-text);
+    }
+
+    :scope[data-tone="success"] {
+      background: var(--pl-color-success-bg);
+      color: var(--pl-color-success-text);
+    }
+
+    :scope[data-tone="warning"] {
+      background: var(--pl-color-warning-bg);
+      color: var(--pl-color-warning-text);
+    }
+
+    :scope[data-tone="danger"] {
+      background: var(--pl-color-danger-bg);
+      color: var(--pl-color-danger-text);
+    }
+
+    .c-badge__dot {
+      border-radius: var(--pl-radius-pill);
+      opacity: .9;
+      background: currentColor;
+      block-size: .375rem;
+      inline-size: .375rem;
+    }
+
+    @media (forced-colors: active) {
+      :scope {
+        border: 1px solid buttonborder;
+      }
+    }
+  }
+
+  @scope (.c-menu) {
+    :scope {
+      --c-menu-anchor: --pl-menu-anchor;
+      display: inline-block;
+    }
+
+    .c-menu__trigger {
+      anchor-name: var(--c-menu-anchor);
+    }
+
+    .c-menu__popover {
+      padding: var(--pl-space-2);
+      border: 1px solid color-mix(in oklab,
+        var(--pl-color-border),
+        transparent 30%);
+      border-radius: var(--pl-radius-xl);
+      min-inline-size: 12rem;
+      -webkit-backdrop-filter: blur(var(--pl-backdrop-blur)) saturate(var(--pl-backdrop-saturate));
+      color: var(--pl-color-text);
+      box-shadow: var(--pl-shadow-3);
+      opacity: 0;
+      transition: opacity var(--pl-duration-enter) var(--pl-ease-decelerate),
+        transform var(--pl-duration-enter) var(--pl-ease-decelerate),
+        overlay var(--pl-duration-exit) var(--pl-ease-accelerate) allow-discrete,
+        display var(--pl-duration-exit) var(--pl-ease-accelerate) allow-discrete;
+      background: light-dark(oklch(100% 0 0 / .96), oklch(17% .04 250 / .94));
+      margin: 0;
+      transform: translateY(-4px);
+    }
+
+    @supports (position-anchor: --x) {
+      .c-menu__popover {
+        position-anchor: var(--c-menu-anchor);
+        position-area: block-end span-inline-end;
+        position-try-fallbacks: flip-block;
+        margin-block-start: var(--pl-space-2);
+        position: absolute;
+        inset: auto;
+      }
+    }
+
+    .c-menu__popover:popover-open {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    @starting-style {
+      .c-menu__popover:popover-open {
+        opacity: 0;
+        transform: translateY(-4px);
+      }
+    }
+
+    .c-menu__divider {
+      margin-block: var(--pl-space-1);
+      border: 0;
+      border-block-start: 1px solid var(--pl-color-border);
+    }
+  }
+
+  :where(.c-menu__popover) > :is(a, button) {
+    align-items: center;
+    gap: var(--pl-space-2);
+    min-block-size: 2.25rem;
+    inline-size: 100%;
+    padding-inline: var(--pl-space-3);
+    border-radius: var(--pl-radius-sm);
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    text-decoration: none;
+    display: flex;
+  }
+
+  :where(.c-menu__popover) > :is(a, button):is(:hover, :focus-visible) {
+    background: var(--pl-color-surface-2);
+  }
+
+  :where(.c-menu__popover) > :is(a, button):focus-visible {
+    outline: var(--pl-focus-size) solid var(--pl-focus-color);
+    outline-offset: calc(var(--pl-focus-offset) * -1);
+  }
+
+  :where(.c-menu__popover) > :is(a, button)[data-tone="danger"] {
+    color: var(--pl-color-danger-text);
+  }
+
+  :where(.c-menu__popover) > :is(a, button)[data-tone="danger"]:is(:hover, :focus-visible) {
+    background: var(--pl-color-danger-bg);
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-menu__popover) {
+      border-color: buttonborder;
+    }
+
+    :where(.c-menu__popover) > :is(a, button):focus-visible {
+      outline-color: highlight;
+    }
+  }
+
+  @scope (.c-dialog) {
+    :scope {
+      --c-dialog-size: 42rem;
+      inline-size: min(100% - 2rem, var(--c-dialog-size));
+      border-radius: var(--pl-radius-2xl);
+      max-block-size: min(100dvb - 2rem, 80dvb);
+      -webkit-backdrop-filter: blur(var(--pl-backdrop-blur-strong)) saturate(var(--pl-backdrop-saturate-strong));
+      color: var(--pl-color-text);
+      box-shadow: var(--pl-shadow-3);
+      opacity: 0;
+      transition: opacity var(--pl-duration-enter) var(--pl-ease-decelerate),
+        transform var(--pl-duration-enter) var(--pl-ease-decelerate),
+        overlay var(--pl-duration-exit) var(--pl-ease-accelerate) allow-discrete,
+        display var(--pl-duration-exit) var(--pl-ease-accelerate) allow-discrete;
+      background: light-dark(oklch(100% 0 0 / .94), oklch(17% .04 250 / .92));
+      border: none;
+      margin: auto;
+      padding: 0;
+      overflow: auto;
+      transform: scale(.97) translateY(10px);
+    }
+
+    :is(:scope:modal, :scope[open]) {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+
+    @starting-style {
+      :is(:scope:modal, :scope[open]) {
+        opacity: 0;
+        transform: scale(.97) translateY(10px);
+      }
+    }
+
+    :scope::backdrop {
+      background: var(--pl-color-scrim);
+      backdrop-filter: blur(var(--pl-backdrop-blur-scrim)) saturate(var(--pl-backdrop-saturate-scrim));
+    }
+
+    .c-dialog__header {
+      justify-content: space-between;
+      align-items: center;
+      gap: var(--pl-space-3);
+      min-block-size: var(--pl-control-block-size);
+      padding: var(--pl-space-5);
+      border-block-end: 1px solid color-mix(in oklab,
+        var(--pl-color-border),
+        transparent 40%);
+      display: flex;
+    }
+
+    .c-dialog__title {
+      font-size: var(--pl-text-lg);
+      font-weight: var(--pl-font-weight-bold);
+      line-height: var(--pl-leading-tight);
+      text-wrap: balance;
+      margin: 0;
+    }
+
+    .c-dialog__close {
+      inline-size: var(--pl-control-block-size);
+      block-size: var(--pl-control-block-size);
+      border-radius: var(--pl-radius-md);
+      color: var(--pl-color-text-muted);
+      font: inherit;
+      cursor: pointer;
+      transition: background-color var(--pl-duration-1) var(--pl-ease-standard),
+        color var(--pl-duration-1) var(--pl-ease-standard);
+      background: none;
+      border: 0;
+      flex-shrink: 0;
+      justify-content: center;
+      align-items: center;
+      padding: 0;
+      display: inline-flex;
+    }
+
+    .c-dialog__close:hover {
+      background: var(--pl-color-surface-2);
+      color: var(--pl-color-text);
+    }
+
+    .c-dialog__body {
+      padding: var(--pl-space-5);
+    }
+
+    .c-dialog__footer {
+      justify-content: flex-end;
+      align-items: center;
+      gap: var(--pl-space-3);
+      padding: var(--pl-space-5);
+      border-block-start: 1px solid color-mix(in oklab,
+        var(--pl-color-border),
+        transparent 40%);
+      display: flex;
+    }
+
+    @media (forced-colors: active) {
+      :scope {
+        border-color: buttonborder;
+      }
+    }
+  }
+
+  @scope (.c-table-wrap) {
+    :scope {
+      --c-table-cell-pad: var(--pl-space-3) var(--pl-space-4);
+      --c-table-min: 48rem;
+      --c-table-row-min-block-size: 3rem;
+      --c-table-radius: var(--pl-radius-xl);
+      border: 1px solid color-mix(in oklab,
+        var(--pl-color-border),
+        transparent 20%);
+      border-radius: var(--c-table-radius);
+      background: var(--pl-color-surface);
+      overflow: auto;
+      container: c-table-wrap / inline-size;
+    }
+
+    :scope[data-density="compact"] {
+      --c-table-cell-pad: var(--pl-space-1) var(--pl-space-3);
+      --c-table-row-min-block-size: 2.25rem;
+    }
+
+    .c-table {
+      inline-size: 100%;
+      min-inline-size: var(--c-table-min);
+      border-collapse: separate;
+      border-spacing: 0;
+    }
+
+    .c-table thead tr:first-child th:first-child {
+      border-start-start-radius: calc(var(--c-table-radius) - 1px);
+    }
+
+    .c-table thead tr:first-child th:last-child {
+      border-start-end-radius: calc(var(--c-table-radius) - 1px);
+    }
+
+    .c-table tbody tr:last-child td:first-child {
+      border-end-start-radius: calc(var(--c-table-radius) - 1px);
+    }
+
+    .c-table tbody tr:last-child td:last-child {
+      border-end-end-radius: calc(var(--c-table-radius) - 1px);
+    }
+
+    .c-table :where(th, td) {
+      padding: var(--c-table-cell-pad);
+      border-block-end: 1px solid var(--pl-color-border);
+      text-align: start;
+      vertical-align: middle;
+      white-space: nowrap;
+      min-block-size: var(--c-table-row-min-block-size);
+    }
+
+    .c-table :where(td) {
+      color: var(--pl-color-text);
+    }
+
+    .c-table :where(th) {
+      z-index: var(--pl-z-raised);
+      background: var(--pl-color-surface-2);
+      font-size: var(--pl-text-sm);
+      font-weight: var(--pl-font-weight-semibold);
+      color: var(--pl-color-text-muted);
+      border-block-end: 1px solid var(--pl-color-border);
+      position: sticky;
+      inset-block-start: 0;
+    }
+
+    @container c-table-wrap (inline-size < 40rem) {
+      .c-table :where(th, td) {
+        padding-inline: var(--pl-space-2);
+      }
+    }
+
+    .c-table :where([data-align="end"]) {
+      text-align: end;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .c-table :where([data-align="center"]) {
+      text-align: center;
+    }
+
+    .c-table th[data-sort] {
+      cursor: pointer;
+      user-select: none;
+
+      &:hover {
+        color: var(--pl-color-text);
+      }
+    }
+
+    .c-table__sort-icon {
+      color: var(--pl-color-text-muted);
+      opacity: .4;
+      transition: opacity var(--pl-duration-1) var(--pl-ease-standard),
+        color var(--pl-duration-1) var(--pl-ease-standard);
+      align-items: center;
+      margin-inline-start: var(--pl-space-1);
+      font-size: .7em;
+      display: inline-flex;
+    }
+
+    .c-table__sort-icon:before {
+      content: "⇅";
+    }
+
+    .c-table th[data-sort="asc"] .c-table__sort-icon {
+      opacity: 1;
+      color: var(--pl-color-accent);
+    }
+
+    .c-table th[data-sort="asc"] .c-table__sort-icon:before {
+      content: "↑";
+    }
+
+    .c-table th[data-sort="desc"] .c-table__sort-icon {
+      opacity: 1;
+      color: var(--pl-color-accent);
+    }
+
+    .c-table th[data-sort="desc"] .c-table__sort-icon:before {
+      content: "↓";
+    }
+
+    .c-table th[data-sort="asc"], .c-table th[data-sort="desc"] {
+      color: var(--pl-color-text);
+    }
+
+    .c-table .c-table__check {
+      text-align: center;
+      inline-size: 2.5rem;
+      min-inline-size: 2.5rem;
+    }
+
+    .c-table .c-table__check input[type="checkbox"] {
+      block-size: 1rem;
+      inline-size: 1rem;
+      accent-color: var(--pl-color-accent);
+      cursor: pointer;
+    }
+
+    .c-table .c-table__detail td {
+      border-block-end: 1px solid var(--pl-color-border);
+      background: color-mix(in oklab,
+        var(--pl-color-surface-2),
+        var(--pl-color-text) 2%);
+      box-shadow: inset var(--pl-accent-bar-width) 0 0 color-mix(in oklab,
+        var(--pl-color-accent),
+        transparent 70%);
+      padding: 0;
+    }
+
+    .c-table__detail-inner {
+      transition: grid-template-rows var(--pl-duration-3)
+        var(--pl-ease-standard);
+      grid-template-rows: 0fr;
+      display: grid;
+      overflow: hidden;
+    }
+
+    .c-table .c-table__detail[open] .c-table__detail-inner {
+      grid-template-rows: 1fr;
+    }
+
+    .c-table__detail-content {
+      padding: var(--pl-space-4);
+      overflow: hidden;
+    }
+
+    .c-table__expand {
+      border-radius: var(--pl-radius-sm);
+      block-size: 1.5rem;
+      inline-size: 1.5rem;
+      color: var(--pl-color-text-muted);
+      cursor: pointer;
+      transition: background-color var(--pl-duration-1) var(--pl-ease-standard);
+      background: none;
+      border: 0;
+      justify-content: center;
+      align-items: center;
+      padding: 0;
+      display: inline-flex;
+    }
+
+    .c-table__expand:hover {
+      background: var(--pl-color-surface-2);
+      color: var(--pl-color-text);
+    }
+
+    .c-table__expand:focus-visible {
+      outline: var(--pl-focus-size) solid var(--pl-focus-color);
+      outline-offset: var(--pl-focus-offset);
+    }
+
+    .c-table__expand svg {
+      block-size: .875rem;
+      inline-size: .875rem;
+      transition: rotate var(--pl-duration-2) var(--pl-ease-standard);
+    }
+
+    .c-table__expand[aria-expanded="true"] svg {
+      rotate: 180deg;
+    }
+
+    .c-table .c-table__sticky-col {
+      z-index: calc(var(--pl-z-raised) + 1);
+      background: var(--pl-color-surface);
+      position: sticky;
+      inset-inline-start: 0;
+    }
+
+    .c-table th.c-table__sticky-col {
+      z-index: calc(var(--pl-z-raised) + 2);
+      background: var(--pl-color-surface-2);
+    }
+
+    .c-table .c-table__sticky-col:not(:last-child) {
+      box-shadow: 4px 0 8px -2px oklch(0% 0 0 / .1);
+    }
+
+    :where(.c-table) tbody tr:hover .c-table__sticky-col, :where(.c-table) tbody tr[aria-selected="true"] .c-table__sticky-col {
+      background: inherit;
+    }
+  }
+
+  :where(.c-table) tbody tr {
+    transition: background-color var(--pl-duration-1) var(--pl-ease-standard);
+  }
+
+  :where(.c-table) tbody tr:hover {
+    background: color-mix(in oklab,
+      var(--pl-color-surface-2),
+      var(--pl-color-text) 3.5%);
+  }
+
+  :where(.c-table) tbody tr[aria-selected="true"] {
+    background: color-mix(in oklab, var(--pl-color-accent), transparent 84%);
+    box-shadow: inset var(--pl-accent-bar-width) 0 0 var(--pl-color-accent);
+  }
+
+  :where(.c-table) tbody tr:last-child td {
+    border-block-end: none;
+  }
+
+  :where(.c-table-wrap[data-zebra]) .c-table tbody tr:nth-child(2n) {
+    background: color-mix(in oklab,
+      var(--pl-color-surface-2),
+      transparent 50%);
+  }
+
+  :where(.c-table) tbody[data-loading] tr {
+    pointer-events: none;
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-table) :where(th, td) {
+      border-block-end-color: canvastext;
+    }
+
+    :where(.c-table__sticky-col) {
+      border-inline-end: 1px solid canvastext;
+    }
+  }
+
+  @scope (.c-tabs) {
+    :scope {
+      --c-tabs-gap: var(--pl-space-4);
+      --c-tabs-indicator: 3px;
+      gap: var(--c-tabs-gap);
+      display: grid;
+    }
+
+    .c-tabs__list {
+      gap: var(--pl-space-1);
+      border-block-end: 1px solid color-mix(in oklab,
+        var(--pl-color-border),
+        transparent 20%);
+      scrollbar-width: none;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+      overflow-x: auto;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    .c-tabs__tab {
+      --c-tabs-tab-padding: var(--pl-space-3);
+      appearance: none;
+      align-items: center;
+      gap: var(--pl-space-2);
+      padding: var(--pl-space-2) var(--c-tabs-tab-padding);
+      color: var(--pl-color-text-muted);
+      font: inherit;
+      font-weight: var(--pl-font-weight-medium);
+      white-space: nowrap;
+      cursor: pointer;
+      box-shadow: inset 0 calc(var(--c-tabs-indicator) * -1) 0 0 transparent;
+      transition: color var(--pl-duration-1) var(--pl-ease-standard),
+        box-shadow var(--pl-duration-1) var(--pl-ease-standard);
+      background: none;
+      border: 0;
+      flex-shrink: 0;
+      display: inline-flex;
+    }
+
+    .c-tabs__tab[aria-selected="true"] {
+      color: var(--pl-color-accent);
+      font-weight: var(--pl-font-weight-semibold);
+      box-shadow: inset 0 calc(var(--c-tabs-indicator) * -1) 0 0
+        var(--pl-color-accent);
+    }
+
+    .c-tabs__tab:disabled, .c-tabs__tab[aria-disabled="true"] {
+      color: var(--pl-color-text-muted);
+      opacity: var(--pl-opacity-disabled);
+    }
+
+    .c-tabs__tab .c-tabs__count {
+      padding-inline: var(--pl-space-2);
+      border-radius: var(--pl-radius-pill);
+      background: var(--pl-color-surface-2);
+      color: var(--pl-color-text-muted);
+      font-size: var(--pl-text-xs);
+      font-weight: var(--pl-font-weight-semibold);
+      line-height: var(--pl-leading-snug);
+    }
+
+    .c-tabs__tab[aria-selected="true"] .c-tabs__count {
+      background: color-mix(in oklab, var(--pl-color-accent), transparent 82%);
+      color: var(--pl-color-accent);
+    }
+
+    .c-tabs__panel {
+      animation: c-tabs-reveal var(--pl-duration-2) var(--pl-ease-standard);
+    }
+  }
+
+  :where(.c-tabs__list) .c-tabs__tab:is(:hover, :focus-visible):not(:disabled, [aria-disabled="true"]) {
+    background: var(--pl-color-surface-2);
+    color: var(--pl-color-text);
+  }
+
+  :where(.c-tabs__list) .c-tabs__tab:hover:not(:disabled, [aria-disabled="true"]) {
+    color: var(--pl-color-text);
+  }
+
+  :where(.c-tabs__list) .c-tabs__tab:focus-visible {
+    outline: var(--pl-focus-size) solid var(--pl-focus-color);
+    outline-offset: calc(var(--pl-focus-offset) * -1);
+  }
+
+  @keyframes c-tabs-reveal {
+    from {
+      opacity: 0;
+      transform: translateY(2px);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-tabs__list) {
+      border-block-end-color: canvastext;
+    }
+
+    :where(.c-tabs__tab)[aria-selected="true"] {
+      color: highlight;
+      box-shadow: inset 0 calc(var(--c-tabs-indicator) * -1) 0 0 Highlight;
+    }
+
+    :where(.c-tabs__tab):focus-visible {
+      outline-color: highlight;
+    }
+  }
+
+  @scope (.c-toolbar) {
+    :scope {
+      --c-toolbar-gap: var(--pl-space-3);
+      --c-toolbar-pad: var(--pl-space-3);
+      --c-toolbar-min: 10rem;
+      justify-content: space-between;
+      align-items: center;
+      gap: var(--c-toolbar-gap);
+      padding: var(--c-toolbar-pad);
+      border-block-end: 1px solid color-mix(in oklab,
+        var(--pl-color-border),
+        transparent 20%);
+      background: var(--pl-color-surface);
+      flex-wrap: wrap;
+      display: flex;
+      container: c-toolbar / inline-size;
+    }
+
+    .c-toolbar__group {
+      align-items: center;
+      gap: var(--pl-space-2);
+      min-inline-size: var(--c-toolbar-min);
+      flex-wrap: wrap;
+      flex: auto;
+      display: flex;
+    }
+
+    .c-toolbar__group:last-child {
+      flex: 0 auto;
+      justify-content: flex-end;
+    }
+
+    .c-toolbar__divider {
+      background: color-mix(in oklab,
+        var(--pl-color-border),
+        transparent 20%);
+      flex-shrink: 0;
+      align-self: center;
+      block-size: 1.5rem;
+      inline-size: 1px;
+    }
+
+    @container c-toolbar (inline-size < 36rem) {
+      :scope {
+        --c-toolbar-pad: var(--pl-space-2);
+        --c-toolbar-gap: var(--pl-space-2);
+      }
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-toolbar) {
+      border-block-end-color: canvastext;
+    }
+
+    :where(.c-toolbar__divider) {
+      background: canvastext;
+    }
+  }
+
+  @scope (.c-pagination) {
+    :scope {
+      --c-pagination-min: var(--pl-control-block-size);
+      align-items: center;
+      gap: var(--pl-space-1);
+      display: flex;
+    }
+
+    .c-pagination__page, .c-pagination__nav {
+      appearance: none;
+      justify-content: center;
+      align-items: center;
+      gap: var(--pl-space-1);
+      min-block-size: var(--c-pagination-min);
+      min-inline-size: var(--c-pagination-min);
+      padding-inline: var(--pl-space-2);
+      border-radius: var(--pl-radius-md);
+      color: var(--pl-color-text-muted);
+      font: inherit;
+      font-weight: var(--pl-font-weight-medium);
+      cursor: pointer;
+      transition: background-color var(--pl-duration-1) var(--pl-ease-standard),
+        color var(--pl-duration-1) var(--pl-ease-standard);
+      background: none;
+      border: 1px solid #0000;
+      display: inline-flex;
+    }
+
+    .c-pagination__page[aria-current="page"] {
+      background: var(--pl-color-accent);
+      color: var(--pl-color-accent-text);
+      font-weight: var(--pl-font-weight-semibold);
+    }
+
+    :scope[data-size="sm"] {
+      --c-pagination-min: 2rem;
+    }
+
+    .c-pagination__page:disabled, .c-pagination__nav:disabled {
+      opacity: var(--pl-opacity-disabled);
+      cursor: not-allowed;
+    }
+
+    .c-pagination__ellipsis {
+      min-inline-size: var(--c-pagination-min);
+      color: var(--pl-color-text-muted);
+      user-select: none;
+      justify-content: center;
+      align-items: center;
+      display: inline-flex;
+    }
+  }
+
+  :where(.c-pagination__page:not([aria-current="page"])):is(:hover, :focus-visible) {
+    background: var(--pl-color-surface-2);
+    color: var(--pl-color-text);
+  }
+
+  :where(.c-pagination__page):focus-visible, :where(.c-pagination__nav):focus-visible {
+    outline: var(--pl-focus-size) solid var(--pl-focus-color);
+    outline-offset: calc(var(--pl-focus-offset) * -1);
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-pagination__page)[aria-current="page"] {
+      color: highlighttext;
+      background: highlight;
+    }
+
+    :where(.c-pagination__page):focus-visible, :where(.c-pagination__nav):focus-visible {
+      outline-color: highlight;
+    }
+  }
+
+  @scope (.c-skeleton) {
+    :scope {
+      --c-skeleton-w: 100%;
+      inline-size: var(--c-skeleton-w);
+      block-size: var(--pl-text-md);
+      border-radius: var(--pl-radius-sm);
+      background: var(--pl-color-surface-2);
+      animation: c-skeleton-pulse 1.8s var(--pl-ease-standard) infinite;
+      display: block;
+    }
+
+    :scope[data-shape="circle"] {
+      inline-size: var(--c-skeleton-w, 2.5rem);
+      block-size: var(--c-skeleton-w, 2.5rem);
+      border-radius: var(--pl-radius-pill);
+    }
+
+    :scope[data-shape="rect"] {
+      block-size: var(--c-skeleton-w, 6rem);
+      border-radius: var(--pl-radius-md);
+      inline-size: 100%;
+    }
+
+    :scope[data-shape="text"][data-line="sm"] {
+      block-size: var(--pl-text-sm);
+    }
+  }
+
+  :where(.c-skeleton-group) {
+    gap: var(--pl-space-2);
+    flex-direction: column;
+    display: flex;
+  }
+
+  @keyframes c-skeleton-pulse {
+    0%, 100% {
+      opacity: 1;
+    }
+
+    50% {
+      opacity: .4;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-skeleton) {
+      opacity: .3;
+      background: canvastext;
+    }
+  }
+
+  @scope (.c-empty) {
+    :scope {
+      --c-empty-pad: var(--pl-space-8);
+      --c-empty-tone: var(--pl-color-text-muted);
+      justify-items: center;
+      gap: var(--pl-space-3);
+      padding: var(--c-empty-pad);
+      text-align: center;
+      color: var(--pl-color-text-muted);
+      display: grid;
+    }
+
+    .c-empty__media {
+      inline-size: var(--c-empty-media-size, 3rem);
+      block-size: var(--c-empty-media-size, 3rem);
+      color: var(--c-empty-tone);
+      opacity: .6;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+    }
+
+    .c-empty__media svg, .c-empty__media img {
+      block-size: 100%;
+      inline-size: 100%;
+    }
+
+    .c-empty__title {
+      font-size: var(--pl-text-lg);
+      font-weight: var(--pl-font-weight-semibold);
+      color: var(--pl-color-text);
+      text-wrap: balance;
+      margin: 0;
+    }
+
+    .c-empty__description {
+      max-inline-size: 36ch;
+      font-size: var(--pl-text-sm);
+      text-wrap: pretty;
+      margin: 0;
+    }
+
+    .c-empty__actions {
+      justify-content: center;
+      align-items: center;
+      gap: var(--pl-space-2);
+      flex-wrap: wrap;
+      margin-block-start: var(--pl-space-2);
+      display: flex;
+    }
+
+    :scope[data-tone="danger"] {
+      --c-empty-tone: var(--pl-color-danger);
+    }
+
+    :scope[data-tone="success"] {
+      --c-empty-tone: var(--pl-color-success);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-empty__media) {
+      color: canvastext;
+    }
+  }
+
+  @scope (.c-stat) {
+    :scope {
+      --c-stat-gap: var(--pl-space-1);
+      gap: var(--pl-space-2);
+      flex-direction: column;
+      display: flex;
+    }
+
+    .c-stat__label {
+      font-size: var(--pl-text-sm);
+      font-weight: var(--pl-font-weight-semibold);
+      color: var(--pl-color-text-muted);
+      line-height: 1;
+    }
+
+    .c-stat__value {
+      align-items: baseline;
+      gap: var(--pl-space-2);
+      font-size: clamp(1.75rem, 1.5rem + 1vi, 2.25rem);
+      font-weight: var(--pl-font-weight-bold);
+      line-height: var(--pl-leading-tight);
+      color: var(--pl-color-text);
+      font-variant-numeric: tabular-nums;
+      letter-spacing: -.02em;
+      display: flex;
+    }
+
+    .c-stat__unit {
+      font-size: var(--pl-text-md);
+      font-weight: var(--pl-font-weight-medium);
+      color: var(--pl-color-text-muted);
+    }
+
+    .c-stat__trend {
+      align-items: center;
+      gap: var(--pl-space-1);
+      font-size: var(--pl-text-sm);
+      font-weight: var(--pl-font-weight-semibold);
+      font-variant-numeric: tabular-nums;
+      color: var(--pl-color-text-muted);
+      display: inline-flex;
+    }
+
+    .c-stat__trend[data-direction="up"] {
+      color: var(--pl-color-success-text);
+    }
+
+    .c-stat__trend[data-direction="down"] {
+      color: var(--pl-color-danger-text);
+    }
+
+    .c-stat__trend:before {
+      font-size: .7em;
+      line-height: 1;
+      display: inline-block;
+    }
+
+    .c-stat__trend[data-direction="up"]:before {
+      content: "▲";
+    }
+
+    .c-stat__trend[data-direction="down"]:before {
+      content: "▼";
+    }
+
+    .c-stat__trend[data-direction="flat"]:before {
+      content: "▶";
+      transform: rotate(-90deg);
+    }
+
+    .c-stat__spark {
+      margin-block-start: var(--pl-space-1);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-stat__trend)[data-direction="up"], :where(.c-stat__trend)[data-direction="down"] {
+      color: canvastext;
+    }
+  }
+
+  @scope (.c-alert) {
+    :scope {
+      --c-alert-tone: var(--pl-color-accent);
+      --c-alert-tone-bg: var(--pl-color-accent);
+      --c-alert-pad: var(--pl-space-4);
+      --c-alert-gap: var(--pl-space-3);
+      gap: var(--c-alert-gap);
+      padding: var(--c-alert-pad);
+      border: 1px solid var(--pl-color-border);
+      border-inline-start: var(--pl-accent-bar-width) solid var(--c-alert-tone);
+      border-radius: var(--pl-radius-xl);
+      background: color-mix(in oklab,
+        var(--c-alert-tone-bg),
+        var(--pl-color-surface) 92%);
+      color: var(--pl-color-text);
+      grid-template-columns: auto 1fr;
+      display: grid;
+    }
+
+    .c-alert__icon {
+      color: var(--c-alert-tone);
+      flex-shrink: 0;
+      align-items: flex-start;
+      display: flex;
+    }
+
+    .c-alert__icon svg {
+      block-size: 1.25rem;
+      inline-size: 1.25rem;
+    }
+
+    .c-alert__content {
+      gap: var(--pl-space-1);
+      flex-direction: column;
+      min-inline-size: 0;
+      display: flex;
+    }
+
+    .c-alert__title {
+      font-weight: var(--pl-font-weight-semibold);
+      font-size: var(--pl-text-sm);
+      color: var(--pl-color-text);
+    }
+
+    .c-alert__body {
+      font-size: var(--pl-text-sm);
+      color: var(--pl-color-text-muted);
+    }
+
+    :scope[data-tone="success"] {
+      --c-alert-tone: var(--pl-color-success);
+      --c-alert-tone-bg: var(--pl-color-success-bg);
+    }
+
+    :scope[data-tone="warning"] {
+      --c-alert-tone: var(--pl-color-warning);
+      --c-alert-tone-bg: var(--pl-color-warning-bg);
+    }
+
+    :scope[data-tone="danger"] {
+      --c-alert-tone: var(--pl-color-danger);
+      --c-alert-tone-bg: var(--pl-color-danger-bg);
+    }
+
+    .c-alert__close {
+      position: absolute;
+      inset-block-start: var(--pl-space-2);
+      inset-inline-end: var(--pl-space-2);
+    }
+  }
+
+  :where(.c-alert) {
+    position: relative;
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-alert) {
+      border-color: canvastext;
+    }
+  }
+
+  @scope (.c-progress) {
+    :scope {
+      --c-progress-tone: var(--pl-color-accent);
+      --c-progress-height: .375rem;
+      block-size: var(--c-progress-height);
+      border-radius: var(--pl-radius-pill);
+      background: var(--pl-color-surface-2);
+      position: relative;
+      overflow: hidden;
+    }
+
+    .c-progress__bar {
+      border-radius: var(--pl-radius-pill);
+      background: var(--c-progress-tone);
+      block-size: 100%;
+      transition: inline-size var(--pl-duration-3) var(--pl-ease-standard);
+    }
+
+    :scope[data-tone="success"] {
+      --c-progress-tone: var(--pl-color-success);
+    }
+
+    :scope[data-tone="warning"] {
+      --c-progress-tone: var(--pl-color-warning);
+    }
+
+    :scope[data-tone="danger"] {
+      --c-progress-tone: var(--pl-color-danger);
+    }
+
+    :scope[data-indeterminate] .c-progress__bar {
+      inline-size: 40%;
+      animation: c-progress-sweep 1.4s var(--pl-ease-standard) infinite;
+      position: absolute;
+      inset-block: 0;
+    }
+  }
+
+  @keyframes c-progress-sweep {
+    0% {
+      inset-inline-start: -40%;
+    }
+
+    100% {
+      inset-inline-start: 100%;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-progress) {
+      background: canvastext;
+    }
+
+    :where(.c-progress__bar) {
+      background: highlight;
+    }
+  }
+
+  @scope (.c-avatar) {
+    :scope {
+      --c-avatar-size: 2.5rem;
+      inline-size: var(--c-avatar-size);
+      block-size: var(--c-avatar-size);
+      border-radius: var(--pl-radius-pill);
+      background: var(--pl-color-accent);
+      color: var(--pl-color-accent-text);
+      font-size: calc(var(--c-avatar-size) * .4);
+      font-weight: var(--pl-font-weight-semibold);
+      user-select: none;
+      flex-shrink: 0;
+      justify-content: center;
+      align-items: center;
+      line-height: 1;
+      display: inline-flex;
+      overflow: hidden;
+    }
+
+    :scope[data-size="sm"] {
+      --c-avatar-size: 1.5rem;
+      font-size: var(--pl-text-xs);
+    }
+
+    :scope[data-size="lg"] {
+      --c-avatar-size: 3rem;
+      font-size: var(--pl-text-lg);
+    }
+
+    .c-avatar__img {
+      object-fit: cover;
+      block-size: 100%;
+      inline-size: 100%;
+    }
+  }
+
+  :where(.c-avatar-group) {
+    --c-avatar-group-size: 2.5rem;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  :where(.c-avatar-group[data-size="sm"]) {
+    --c-avatar-group-size: 1.5rem;
+  }
+
+  :where(.c-avatar-group[data-size="lg"]) {
+    --c-avatar-group-size: 3rem;
+  }
+
+  :where(.c-avatar-group) .c-avatar {
+    --c-avatar-size: var(--c-avatar-group-size);
+    border: 2px solid var(--pl-color-surface);
+    margin-inline-start: calc(var(--c-avatar-group-size) * -.35);
+  }
+
+  :where(.c-avatar-group) .c-avatar:first-child {
+    margin-inline-start: 0;
+  }
+
+  :where(.c-avatar-group__more) {
+    inline-size: var(--c-avatar-group-size, 2.5rem);
+    block-size: var(--c-avatar-group-size, 2.5rem);
+    border-radius: var(--pl-radius-pill);
+    border: 2px solid var(--pl-color-surface);
+    background: var(--pl-color-surface-2);
+    color: var(--pl-color-text-muted);
+    font-size: calc(var(--c-avatar-group-size, 2.5rem) * .4);
+    font-weight: var(--pl-font-weight-semibold);
+    justify-content: center;
+    align-items: center;
+    margin-inline-start: calc(var(--c-avatar-group-size, 2.5rem) * -.35);
+    display: inline-flex;
+  }
+
+  :where(.c-avatar-group[data-size="sm"]) .c-avatar-group__more {
+    font-size: var(--pl-text-xs);
+  }
+
+  :where(.c-avatar-group[data-size="lg"]) .c-avatar-group__more {
+    font-size: var(--pl-text-lg);
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-avatar) {
+      color: highlighttext;
+      background: highlight;
+    }
+  }
+
+  @scope (.c-tooltip) {
+    :scope {
+      --c-tooltip-anchor: --pl-tooltip-anchor;
+      --c-tooltip-bg: var(--pl-color-text);
+      --c-tooltip-text: var(--pl-color-bg);
+      --c-tooltip-pad: var(--pl-space-2) var(--pl-space-3);
+      --c-tooltip-radius: var(--pl-radius-lg);
+      --c-tooltip-font-size: var(--pl-text-sm);
+      --c-tooltip-max-inline: 20rem;
+      display: inline-flex;
+      position: relative;
+    }
+
+    .c-tooltip__trigger {
+      anchor-name: var(--c-tooltip-anchor);
+      display: inline-flex;
+    }
+
+    .c-tooltip__body {
+      opacity: 0;
+      pointer-events: none;
+      padding: var(--c-tooltip-pad);
+      border-radius: var(--c-tooltip-radius);
+      background: var(--c-tooltip-bg);
+      color: var(--c-tooltip-text);
+      font-size: var(--c-tooltip-font-size);
+      line-height: var(--pl-leading-tight);
+      max-inline-size: var(--c-tooltip-max-inline);
+      text-wrap: balance;
+      box-shadow: var(--pl-shadow-2);
+      z-index: var(--pl-z-overlay);
+      transition: opacity var(--pl-duration-1) var(--pl-ease-standard),
+        display var(--pl-duration-1) var(--pl-ease-standard) allow-discrete;
+      display: none;
+      position: absolute;
+    }
+
+    @supports (position-anchor: --x) {
+      .c-tooltip__body {
+        position-anchor: var(--c-tooltip-anchor);
+        position-area: block-start span-inline-end;
+        position-try-fallbacks: flip-block;
+        margin-block-end: var(--pl-space-2);
+      }
+    }
+
+    :scope:has(.c-tooltip__trigger:hover) .c-tooltip__body, :scope:has(.c-tooltip__trigger:focus-visible) .c-tooltip__body {
+      opacity: 1;
+      display: block;
+    }
+
+    @starting-style {
+      :scope:has(.c-tooltip__trigger:hover) .c-tooltip__body, :scope:has(.c-tooltip__trigger:focus-visible) .c-tooltip__body {
+        opacity: 0;
+      }
+    }
+  }
+
+  @supports not (position-anchor: --x) {
+    :where(.c-tooltip__body) {
+      display: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-tooltip__body) {
+      color: canvas;
+      background: canvastext;
+      border: 1px solid canvastext;
+    }
+  }
+
+  @scope (.c-accordion) {
+    :scope {
+      --c-accordion-border: var(--pl-color-border);
+      --c-accordion-bg: var(--pl-color-surface);
+      --c-accordion-radius: var(--pl-radius-xl);
+      --c-accordion-header-pad: var(--pl-space-4);
+      --c-accordion-content-pad: 0 var(--pl-space-4) var(--pl-space-4);
+      --c-accordion-gap: var(--pl-space-2);
+      gap: var(--c-accordion-gap);
+      flex-direction: column;
+      display: flex;
+    }
+  }
+
+  @scope (.c-accordion__item) {
+    :scope {
+      border: 1px solid var(--c-accordion-border, var(--pl-color-border));
+      border-radius: var(--c-accordion-radius, var(--pl-radius-lg));
+      background: var(--c-accordion-bg, var(--pl-color-surface));
+      overflow: hidden;
+    }
+
+    .c-accordion__header {
+      justify-content: space-between;
+      align-items: center;
+      gap: var(--pl-space-3);
+      padding: var(--c-accordion-header-pad, var(--pl-space-4));
+      font-weight: var(--pl-font-weight-semibold);
+      cursor: pointer;
+      user-select: none;
+      list-style: none;
+      display: flex;
+
+      &::-webkit-details-marker {
+        display: none;
+      }
+
+      &::marker {
+        content: "";
+      }
+    }
+
+    .c-accordion__header:hover {
+      background: var(--pl-color-surface-2);
+    }
+
+    .c-accordion__header:focus-visible {
+      outline: var(--pl-focus-size) solid var(--pl-focus-color);
+      outline-offset: calc(var(--pl-focus-offset) * -1);
+    }
+
+    .c-accordion__icon {
+      block-size: 1.25rem;
+      inline-size: 1.25rem;
+      color: var(--pl-color-text-muted);
+      transition: rotate var(--pl-duration-2) var(--pl-ease-standard);
+      flex-shrink: 0;
+    }
+
+    :scope[open] .c-accordion__icon {
+      rotate: 180deg;
+    }
+
+    .c-accordion__panel {
+      transition: grid-template-rows var(--pl-duration-3)
+        var(--pl-ease-standard);
+      grid-template-rows: 0fr;
+      display: grid;
+    }
+
+    :scope[open] .c-accordion__panel {
+      grid-template-rows: 1fr;
+    }
+
+    .c-accordion__content {
+      padding: var(--c-accordion-content-pad, 0 var(--pl-space-4) var(--pl-space-4));
+      color: var(--pl-color-text-muted);
+      line-height: var(--pl-leading-normal);
+      overflow: hidden;
+    }
+
+    @supports (interpolate-size: allow-keywords) {
+      .c-accordion__panel {
+        grid-template-rows: initial;
+        block-size: 0;
+        transition: block-size var(--pl-duration-3) var(--pl-ease-standard);
+        display: block;
+        overflow: hidden;
+      }
+
+      :scope[open] .c-accordion__panel {
+        block-size: auto;
+      }
+
+      @starting-style {
+        :scope[open] .c-accordion__panel {
+          block-size: 0;
+        }
+      }
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-accordion__item) {
+      border-color: buttonborder;
+    }
+
+    :where(.c-accordion__header:focus-visible) {
+      outline-color: highlight;
+    }
+  }
+
+  @scope (.c-switch) {
+    :scope {
+      --c-switch-track-w: 2.75rem;
+      --c-switch-track-h: 1.5rem;
+      --c-switch-thumb: calc(var(--c-switch-track-h) - .25rem);
+      --c-switch-gap: var(--pl-space-2);
+      --c-switch-on: var(--pl-color-accent);
+      --c-switch-off: var(--pl-color-surface-2);
+      align-items: center;
+      gap: var(--c-switch-gap);
+      cursor: pointer;
+      user-select: none;
+      display: inline-flex;
+    }
+
+    :scope[disabled], :scope:has(.c-switch__input:disabled) {
+      opacity: var(--pl-opacity-disabled);
+      cursor: not-allowed;
+    }
+
+    .c-switch__input {
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+      block-size: 1px;
+      inline-size: 1px;
+      margin: -1px;
+      padding: 0;
+      position: absolute;
+      overflow: hidden;
+    }
+
+    .c-switch__track {
+      inline-size: var(--c-switch-track-w);
+      block-size: var(--c-switch-track-h);
+      border-radius: var(--pl-radius-pill);
+      background: var(--c-switch-off);
+      transition: background-color var(--pl-duration-2) var(--pl-ease-standard);
+      flex-shrink: 0;
+      align-items: center;
+      display: inline-flex;
+      position: relative;
+    }
+
+    .c-switch__thumb {
+      inline-size: var(--c-switch-thumb);
+      block-size: var(--c-switch-thumb);
+      background: var(--pl-color-surface);
+      box-shadow: var(--pl-shadow-1);
+      transition: inset-inline-start var(--pl-duration-2)
+        var(--pl-ease-standard);
+      border-radius: 50%;
+      position: absolute;
+      inset-inline-start: .125rem;
+    }
+
+    :scope:has(.c-switch__input:checked) .c-switch__track {
+      background: var(--c-switch-on);
+      border-color: #0000;
+    }
+
+    :scope:has(.c-switch__input:checked) .c-switch__thumb {
+      inset-inline-start: calc(var(--c-switch-track-w) - var(--c-switch-thumb) - .125rem);
+    }
+
+    :scope:has(.c-switch__input:focus-visible) .c-switch__track {
+      outline: var(--pl-focus-size) solid var(--pl-focus-color);
+      outline-offset: var(--pl-focus-offset);
+    }
+
+    :scope[data-size="sm"] {
+      --c-switch-track-w: 2.25rem;
+      --c-switch-track-h: 1.25rem;
+    }
+
+    :scope[data-size="lg"] {
+      --c-switch-track-w: 3.25rem;
+      --c-switch-track-h: 1.75rem;
+    }
+
+    .c-switch__label {
+      font-size: var(--pl-text-sm);
+      color: var(--pl-color-text);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-switch__track) {
+      background: buttonface;
+      border-color: buttontext;
+    }
+
+    :where(.c-switch:has(.c-switch__input:checked) .c-switch__track) {
+      background: highlight;
+    }
+
+    :where(.c-switch__thumb) {
+      background: buttontext;
+    }
+
+    :where(.c-switch:has(.c-switch__input:checked) .c-switch__thumb) {
+      background: highlighttext;
+    }
+  }
+
+  @scope (.c-chip) {
+    :scope {
+      --c-chip-bg: oklch(from var(--pl-color-accent) calc(l + .35) c h / 10%);
+      --c-chip-text: var(--pl-color-accent);
+      --c-chip-pad: var(--pl-space-1) var(--pl-space-2);
+      --c-chip-gap: var(--pl-space-1);
+      align-items: center;
+      gap: var(--c-chip-gap);
+      padding: var(--c-chip-pad);
+      border-radius: var(--pl-radius-pill);
+      background: var(--c-chip-bg);
+      color: var(--c-chip-text);
+      font-size: var(--pl-text-xs);
+      font-weight: var(--pl-font-weight-medium);
+      line-height: var(--pl-leading-snug);
+      white-space: nowrap;
+      display: inline-flex;
+    }
+
+    @supports not (background: oklch(from red l c h)) {
+      :scope {
+        --c-chip-bg: color-mix(in oklab,
+          var(--pl-color-accent),
+          transparent 88%);
+      }
+    }
+
+    :scope[data-tone="success"] {
+      --c-chip-bg: oklch(from var(--pl-color-success) calc(l + .35) c h / 12%);
+      --c-chip-text: var(--pl-color-success-text);
+
+      @supports not (background: oklch(from red l c h)) {
+        --c-chip-bg: color-mix(in oklab,
+          var(--pl-color-success),
+          transparent 86%);
+      }
+    }
+
+    :scope[data-tone="warning"] {
+      --c-chip-bg: oklch(from var(--pl-color-warning) calc(l + .35) c h / 14%);
+      --c-chip-text: var(--pl-color-warning-text);
+
+      @supports not (background: oklch(from red l c h)) {
+        --c-chip-bg: color-mix(in oklab,
+          var(--pl-color-warning),
+          transparent 84%);
+      }
+    }
+
+    :scope[data-tone="danger"] {
+      --c-chip-bg: oklch(from var(--pl-color-danger) calc(l + .35) c h / 12%);
+      --c-chip-text: var(--pl-color-danger-text);
+
+      @supports not (background: oklch(from red l c h)) {
+        --c-chip-bg: color-mix(in oklab,
+          var(--pl-color-danger),
+          transparent 86%);
+      }
+    }
+
+    :scope[data-size="sm"] {
+      --c-chip-pad: .125rem var(--pl-space-2);
+      font-size: .6875rem;
+    }
+
+    .c-chip__remove {
+      block-size: 1rem;
+      inline-size: 1rem;
+      color: inherit;
+      cursor: pointer;
+      opacity: .7;
+      transition: opacity var(--pl-duration-1) var(--pl-ease-standard);
+      background: none;
+      border: 0;
+      border-radius: 50%;
+      justify-content: center;
+      align-items: center;
+      padding: 0;
+      font-size: .75rem;
+      line-height: 1;
+      display: inline-flex;
+    }
+
+    .c-chip__remove:hover:not(:disabled) {
+      opacity: 1;
+      background: oklch(from currentColor l c h / 12%);
+    }
+
+    .c-chip__remove:focus-visible {
+      outline: var(--pl-focus-size) solid var(--pl-focus-color);
+      outline-offset: calc(var(--pl-focus-offset) / 2);
+    }
+  }
+
+  :where(.c-chip-group) {
+    gap: var(--pl-space-2);
+    flex-wrap: wrap;
+    align-items: center;
+    display: flex;
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-chip) {
+      border: 1px solid buttonborder;
+    }
+  }
+
+  @scope (.c-drawer) {
+    :scope {
+      --c-drawer-inline: min(24rem, 100vi);
+      --c-drawer-block: 100vb;
+      --c-drawer-pad: var(--pl-space-4);
+      --c-drawer-gap: var(--pl-space-3);
+      inline-size: var(--c-drawer-inline);
+      block-size: var(--c-drawer-block);
+      -webkit-backdrop-filter: blur(var(--pl-backdrop-blur)) saturate(var(--pl-backdrop-saturate));
+      box-shadow: var(--pl-shadow-3);
+      opacity: 0;
+      transition: opacity var(--pl-duration-enter) var(--pl-ease-decelerate),
+        transform var(--pl-duration-enter) var(--pl-ease-decelerate),
+        overlay var(--pl-duration-exit) var(--pl-ease-accelerate) allow-discrete,
+        display var(--pl-duration-exit) var(--pl-ease-accelerate) allow-discrete;
+      background: light-dark(oklch(100% 0 0 / .96), oklch(17% .04 250 / .94));
+      border: 0;
+      margin: 0;
+      padding: 0;
+      inset-block: 0;
+      inset-inline: auto 0;
+      transform: translateX(100%);
+    }
+
+    :scope[data-side="start"] {
+      inset-inline: 0 auto;
+      transform: translateX(-100%);
+    }
+
+    :scope:popover-open {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    @starting-style {
+      :scope:popover-open {
+        opacity: 0;
+        transform: translateX(100%);
+      }
+
+      :scope[data-side="start"]:popover-open {
+        transform: translateX(-100%);
+      }
+    }
+
+    :scope::backdrop {
+      background: var(--pl-color-scrim);
+      backdrop-filter: blur(var(--pl-backdrop-blur-scrim)) saturate(var(--pl-backdrop-saturate-scrim));
+    }
+
+    .c-drawer__header {
+      justify-content: space-between;
+      align-items: center;
+      gap: var(--c-drawer-gap);
+      padding: var(--c-drawer-pad);
+      border-block-end: 1px solid color-mix(in oklab,
+        var(--pl-color-border),
+        transparent 40%);
+      display: flex;
+    }
+
+    .c-drawer__title {
+      font-size: var(--pl-text-lg);
+      font-weight: var(--pl-font-weight-semibold);
+    }
+
+    .c-drawer__body {
+      padding: var(--c-drawer-pad);
+      overflow-y: auto;
+    }
+
+    .c-drawer__footer {
+      gap: var(--c-drawer-gap);
+      padding: var(--c-drawer-pad);
+      border-block-start: 1px solid color-mix(in oklab,
+        var(--pl-color-border),
+        transparent 40%);
+      display: flex;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-drawer) {
+      background: canvas;
+      border-color: buttonborder;
+    }
+  }
+
+  :where(.c-toast-stack) {
+    z-index: var(--pl-z-toast);
+    gap: var(--pl-space-2);
+    inline-size: min(24rem, calc(100vi - 2 * var(--pl-space-4)));
+    pointer-events: none;
+    flex-direction: column;
+    display: flex;
+    position: fixed;
+    inset-block-end: var(--pl-space-4);
+    inset-inline-end: var(--pl-space-4);
+  }
+
+  @scope (.c-toast) {
+    :scope {
+      --c-toast-tone: var(--pl-color-accent);
+      --c-toast-pad: var(--pl-space-3) var(--pl-space-4);
+      --c-toast-radius: var(--pl-radius-xl);
+      --c-toast-gap: var(--pl-space-3);
+      gap: var(--c-toast-gap);
+      padding: var(--c-toast-pad);
+      border: 1px solid color-mix(in oklab,
+        var(--pl-color-border),
+        transparent 25%);
+      border-inline-start: var(--pl-accent-bar-width) solid var(--c-toast-tone);
+      border-radius: var(--c-toast-radius);
+      -webkit-backdrop-filter: blur(var(--pl-backdrop-blur)) saturate(var(--pl-backdrop-saturate));
+      box-shadow: var(--pl-shadow-3);
+      pointer-events: auto;
+      opacity: 0;
+      transition: opacity var(--pl-duration-enter) var(--pl-ease-decelerate),
+        transform var(--pl-duration-enter) var(--pl-ease-decelerate);
+      interpolate-size: allow-keywords;
+      background: light-dark(oklch(100% 0 0 / .96), oklch(17% .04 250 / .94));
+      grid-template-columns: auto 1fr auto;
+      align-items: start;
+      display: grid;
+      transform: translateX(100%);
+    }
+
+    :scope[data-visible] {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    @starting-style {
+      :scope[data-visible] {
+        opacity: 0;
+        transform: translateX(100%);
+      }
+    }
+
+    :scope[data-tone="success"] {
+      --c-toast-tone: var(--pl-color-success);
+    }
+
+    :scope[data-tone="warning"] {
+      --c-toast-tone: var(--pl-color-warning);
+    }
+
+    :scope[data-tone="danger"] {
+      --c-toast-tone: var(--pl-color-danger);
+    }
+
+    .c-toast__icon {
+      color: var(--c-toast-tone);
+      flex-shrink: 0;
+      align-items: flex-start;
+      display: flex;
+    }
+
+    .c-toast__icon svg {
+      block-size: 1.25rem;
+      inline-size: 1.25rem;
+    }
+
+    .c-toast__content {
+      gap: var(--pl-space-1);
+      flex-direction: column;
+      min-inline-size: 0;
+      display: flex;
+    }
+
+    .c-toast__title {
+      font-weight: var(--pl-font-weight-semibold);
+      font-size: var(--pl-text-sm);
+    }
+
+    .c-toast__body {
+      font-size: var(--pl-text-sm);
+      color: var(--pl-color-text-muted);
+    }
+
+    .c-toast__close {
+      border-radius: var(--pl-radius-sm);
+      block-size: 1.5rem;
+      inline-size: 1.5rem;
+      color: var(--pl-color-text-muted);
+      cursor: pointer;
+      transition: background-color var(--pl-duration-1) var(--pl-ease-standard);
+      background: none;
+      border: 0;
+      flex-shrink: 0;
+      justify-content: center;
+      align-items: center;
+      padding: 0;
+      display: inline-flex;
+    }
+
+    .c-toast__close:hover {
+      background: var(--pl-color-surface-2);
+    }
+
+    .c-toast__close:focus-visible {
+      outline: var(--pl-focus-size) solid var(--pl-focus-color);
+      outline-offset: var(--pl-focus-offset);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-toast) {
+      background: canvas;
+      border-color: buttonborder;
+    }
+
+    :where(.c-toast__close:focus-visible) {
+      outline-color: highlight;
+    }
+  }
+
+  @supports (animation-timeline: scroll()) {
+    :where(.c-scroll-progress) {
+      --c-progress-tone: var(--pl-color-accent);
+      z-index: var(--pl-z-sticky);
+      block-size: 4px;
+      transform-origin: inline-start;
+      background: var(--c-progress-tone);
+      animation: linear c-scroll-progress-grow scroll(root);
+      position: fixed;
+      inset-block-start: 0;
+      inset-inline: 0;
+    }
+
+    :where(.c-scroll-progress[data-tone="success"]) {
+      --c-progress-tone: var(--pl-color-success);
+    }
+
+    :where(.c-scroll-progress[data-tone="warning"]) {
+      --c-progress-tone: var(--pl-color-warning);
+    }
+
+    :where(.c-scroll-progress[data-tone="danger"]) {
+      --c-progress-tone: var(--pl-color-danger);
+    }
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    :where(.c-scroll-progress) {
+      display: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-scroll-progress) {
+      background: highlight;
+    }
+  }
+
+  @keyframes c-scroll-progress-grow {
+    from {
+      transform: scaleX(0);
+    }
+
+    to {
+      transform: scaleX(1);
+    }
+  }
+
+  @supports (animation-timeline: view()) {
+    :where(.c-reveal) {
+      animation: linear both c-reveal-enter view();
+      animation-range: entry cover 30%;
+    }
+
+    :where(.c-reveal[data-delay="1"]) {
+      animation-range: entry 10% cover 35%;
+    }
+
+    :where(.c-reveal[data-delay="2"]) {
+      animation-range: entry 20% cover 40%;
+    }
+
+    :where(.c-reveal[data-delay="3"]) {
+      animation-range: entry 30% cover 45%;
+    }
+  }
+
+  @supports not (animation-timeline: view()) {
+    :where(.c-reveal) {
+      opacity: 1;
+      animation: none;
+      transform: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-reveal) {
+      opacity: 1;
+      animation: none;
+      transform: none;
+    }
+  }
+
+  @keyframes c-reveal-enter {
+    from {
+      opacity: 0;
+      transform: translateY(1.5rem);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @scope (.c-breadcrumb) {
+    .c-breadcrumb__list {
+      align-items: center;
+      gap: var(--pl-space-1);
+      flex-wrap: wrap;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+    }
+
+    .c-breadcrumb__item {
+      align-items: center;
+      gap: var(--pl-space-1);
+      display: inline-flex;
+    }
+
+    .c-breadcrumb__item:not(:last-child):after {
+      content: "/";
+      color: var(--pl-color-text-muted);
+      font-size: var(--pl-text-sm);
+      opacity: .6;
+      margin-inline-start: var(--pl-space-1);
+    }
+
+    .c-breadcrumb__link {
+      color: var(--pl-color-text-muted);
+      font-size: var(--pl-text-sm);
+      transition: color var(--pl-duration-1) var(--pl-ease-standard);
+      text-decoration: none;
+    }
+
+    .c-breadcrumb__link:hover {
+      color: var(--pl-color-accent);
+      text-decoration: underline;
+    }
+
+    .c-breadcrumb__link:focus-visible {
+      outline: var(--pl-focus-size) solid var(--pl-focus-color);
+      outline-offset: var(--pl-focus-offset);
+      border-radius: var(--pl-radius-sm);
+    }
+
+    .c-breadcrumb__current {
+      color: var(--pl-color-text);
+      font-size: var(--pl-text-sm);
+      font-weight: var(--pl-font-weight-medium);
+    }
+
+    .c-breadcrumb__item[data-truncate] :is(.c-breadcrumb__link, .c-breadcrumb__current) {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      vertical-align: bottom;
+      max-inline-size: 8rem;
+      display: inline-block;
+      overflow: hidden;
+    }
+  }
+
+  @supports (rule: 1px solid CanvasText) {
+    :where(.c-breadcrumb__list) {
+      rule: 0 auto var(--pl-color-border);
+      rule-visibility-items: between;
+    }
+
+    :where(.c-breadcrumb__item:not(:last-child)):after {
+      content: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-breadcrumb__link) {
+      color: linktext;
+    }
+
+    :where(.c-breadcrumb__current) {
+      color: canvastext;
+    }
+  }
+
+  @scope (.c-stepper) {
+    :scope {
+      --c-stepper-marker-size: 2rem;
+      --c-stepper-gap: var(--pl-space-4);
+      align-items: flex-start;
+      gap: var(--c-stepper-gap);
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+    }
+
+    .c-stepper__step {
+      align-items: center;
+      gap: var(--pl-space-2);
+      text-align: center;
+      flex-direction: column;
+      flex: 1;
+      display: flex;
+      position: relative;
+
+      &:before {
+        content: "";
+        inset-block-start: calc(var(--c-stepper-marker-size) / 2);
+        inset-inline: calc(50% + var(--c-stepper-marker-size) / 2 + var(--c-stepper-gap) / 2)
+          calc(-50% + var(--c-stepper-marker-size) / 2 + var(--c-stepper-gap) / 2);
+        background: var(--pl-color-border);
+        block-size: 2px;
+        z-index: var(--pl-z-base);
+        position: absolute;
+      }
+
+      &:last-child:before {
+        content: none;
+      }
+    }
+
+    .c-stepper__step[data-state="completed"]:before {
+      background: var(--pl-color-accent);
+    }
+
+    .c-stepper__marker {
+      inline-size: var(--c-stepper-marker-size);
+      block-size: var(--c-stepper-marker-size);
+      border: 2px solid var(--pl-color-border);
+      background: var(--pl-color-surface);
+      color: var(--pl-color-text-muted);
+      font-size: var(--pl-text-sm);
+      font-weight: var(--pl-font-weight-semibold);
+      z-index: var(--pl-z-raised);
+      transition: background-color var(--pl-duration-2) var(--pl-ease-standard),
+        border-color var(--pl-duration-2) var(--pl-ease-standard),
+        color var(--pl-duration-2) var(--pl-ease-standard),
+        box-shadow var(--pl-duration-2) var(--pl-ease-standard);
+      border-radius: 50%;
+      justify-content: center;
+      align-items: center;
+      display: inline-flex;
+    }
+
+    .c-stepper__step[data-state="completed"] .c-stepper__marker {
+      border-color: var(--pl-color-accent);
+      background: var(--pl-color-accent);
+      color: var(--pl-color-accent-text);
+    }
+
+    .c-stepper__step[data-state="current"] .c-stepper__marker {
+      border-color: var(--pl-color-accent);
+      color: var(--pl-color-accent);
+      box-shadow: 0 0 0 4px
+        color-mix(in oklab, var(--pl-color-accent), transparent var(--pl-focus-glow-opacity));
+    }
+
+    .c-stepper__label {
+      font-size: var(--pl-text-sm);
+      color: var(--pl-color-text-muted);
+      line-height: var(--pl-leading-snug);
+    }
+
+    .c-stepper__step[data-state="current"] .c-stepper__label {
+      color: var(--pl-color-text);
+      font-weight: var(--pl-font-weight-semibold);
+    }
+
+    @container (width <= 36rem) {
+      :scope {
+        flex-direction: column;
+        gap: 0;
+      }
+
+      .c-stepper__step {
+        text-align: start;
+        flex-direction: row;
+        flex: none;
+        align-items: center;
+        padding-block-end: var(--pl-space-4);
+
+        &:before {
+          inset-block: var(--c-stepper-marker-size) 0;
+          inset-inline: calc(var(--c-stepper-marker-size) / 2) auto;
+          inline-size: 2px;
+        }
+      }
+    }
+  }
+
+  :where(.c-stepper) {
+    container-type: inline-size;
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-stepper__marker) {
+      border-color: buttonborder;
+    }
+
+    :where(.c-stepper__step[data-state="completed"] .c-stepper__marker) {
+      color: highlighttext;
+      background: highlight;
+      border-color: highlight;
+    }
+
+    :where(.c-stepper__step[data-state="current"] .c-stepper__marker) {
+      border-color: highlight;
+    }
+  }
+
+  @scope (.c-timeline) {
+    :scope {
+      --c-timeline-dot-size: .75rem;
+      --c-timeline-line-color: var(--pl-color-border);
+      --c-timeline-gap: var(--pl-space-4);
+      padding-inline: var(--pl-space-1) 0;
+      flex-direction: column;
+      margin: 0;
+      list-style: none;
+      display: flex;
+    }
+
+    .c-timeline__item {
+      grid-template-columns: var(--c-timeline-dot-size) 1fr;
+      gap: var(--c-timeline-gap);
+      padding-block-end: var(--pl-space-5);
+      display: grid;
+      position: relative;
+    }
+
+    .c-timeline__item:not(:last-child):before {
+      content: "";
+      inset-block: var(--c-timeline-dot-size) 0;
+      background: var(--c-timeline-line-color);
+      inline-size: 2px;
+      position: absolute;
+      inset-inline-start: calc(var(--c-timeline-dot-size) / 2);
+      transform: translateX(-50%);
+    }
+
+    .c-timeline__dot {
+      inline-size: var(--c-timeline-dot-size);
+      block-size: var(--c-timeline-dot-size);
+      background: var(--pl-color-accent);
+      border: 2px solid var(--pl-color-surface);
+      box-shadow: 0 0 0 2px var(--pl-color-accent);
+      z-index: var(--pl-z-raised);
+      border-radius: 50%;
+      margin-block-start: .1875rem;
+    }
+
+    .c-timeline__item[data-tone="success"] .c-timeline__dot {
+      background: var(--pl-color-success);
+      box-shadow: 0 0 0 2px var(--pl-color-success);
+    }
+
+    .c-timeline__item[data-tone="warning"] .c-timeline__dot {
+      background: var(--pl-color-warning);
+      box-shadow: 0 0 0 2px var(--pl-color-warning);
+    }
+
+    .c-timeline__item[data-tone="danger"] .c-timeline__dot {
+      background: var(--pl-color-danger);
+      box-shadow: 0 0 0 2px var(--pl-color-danger);
+    }
+
+    .c-timeline__content {
+      min-inline-size: 0;
+    }
+
+    .c-timeline__header {
+      justify-content: space-between;
+      align-items: baseline;
+      gap: var(--pl-space-2);
+      margin-block-end: var(--pl-space-1);
+      display: flex;
+    }
+
+    .c-timeline__title {
+      font-size: var(--pl-text-sm);
+      font-weight: var(--pl-font-weight-semibold);
+    }
+
+    .c-timeline__time {
+      font-size: var(--pl-text-xs);
+      color: var(--pl-color-text-muted);
+      white-space: nowrap;
+    }
+
+    .c-timeline__body {
+      font-size: var(--pl-text-sm);
+      color: var(--pl-color-text-muted);
+      line-height: var(--pl-leading-normal);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-timeline__dot) {
+      background: highlight;
+      box-shadow: 0 0 0 2px highlight;
+    }
+
+    :where(.c-timeline__item:not(:last-child)):before {
+      background: buttonborder;
+    }
+  }
+
+  @scope (.c-textarea-auto) {
+    :scope {
+      --c-textarea-max-block: 24rem;
+      inline-size: 100%;
+      padding: var(--pl-space-3);
+      border: 1px solid var(--pl-color-border);
+      border-radius: var(--pl-radius-md);
+      background: var(--pl-color-surface);
+      color: var(--pl-color-text);
+      font: inherit;
+      font-size: var(--pl-text-sm);
+      line-height: var(--pl-leading-normal);
+      resize: vertical;
+      transition: border-color var(--pl-duration-1) var(--pl-ease-standard),
+        box-shadow var(--pl-duration-1) var(--pl-ease-standard);
+    }
+
+    :scope:focus-visible {
+      border-color: var(--pl-focus-color);
+      box-shadow: 0 0 0 4px
+        color-mix(in oklab, var(--pl-focus-color), transparent var(--pl-focus-glow-opacity));
+      outline: none;
+    }
+
+    :scope:user-invalid {
+      border-color: var(--pl-color-danger);
+      box-shadow: 0 0 0 4px
+        color-mix(in oklab, var(--pl-color-danger), transparent var(--pl-focus-glow-opacity));
+    }
+
+    :scope:disabled {
+      opacity: var(--pl-opacity-disabled);
+    }
+
+    @supports (field-sizing: content) {
+      :scope {
+        field-sizing: content;
+        max-block-size: var(--c-textarea-max-block);
+        overflow-y: auto;
+      }
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-textarea-auto) {
+      background: canvas;
+      border-color: buttonborder;
+    }
+
+    :where(.c-textarea-auto:focus-visible) {
+      outline-color: highlight;
+    }
+  }
+
+  @scope (.c-segmented) {
+    :scope {
+      --c-segmented-pad: .125rem;
+      --c-segmented-gap: var(--pl-space-1);
+      --c-segmented-radius: var(--pl-radius-pill);
+      gap: var(--c-segmented-gap);
+      padding: var(--c-segmented-pad);
+      border: 1px solid var(--pl-color-border);
+      border-radius: var(--c-segmented-radius);
+      background: var(--pl-color-surface-2);
+      display: inline-flex;
+    }
+
+    .c-segmented__item {
+      justify-content: center;
+      align-items: center;
+      display: inline-flex;
+      position: relative;
+    }
+
+    .c-segmented__item input {
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+      block-size: 1px;
+      inline-size: 1px;
+      margin: -1px;
+      padding: 0;
+      position: absolute;
+      overflow: hidden;
+    }
+
+    .c-segmented__item span {
+      align-items: center;
+      gap: var(--pl-space-1);
+      padding: var(--pl-space-1) var(--pl-space-3);
+      border-radius: var(--c-segmented-radius);
+      color: var(--pl-color-text-muted);
+      font-size: var(--pl-text-sm);
+      font-weight: var(--pl-font-weight-medium);
+      cursor: pointer;
+      user-select: none;
+      white-space: nowrap;
+      transition: background-color var(--pl-duration-1) var(--pl-ease-standard),
+        color var(--pl-duration-1) var(--pl-ease-standard);
+      display: inline-flex;
+    }
+
+    .c-segmented__item:has(input:checked) span {
+      background: var(--pl-color-surface);
+      color: var(--pl-color-accent);
+      font-weight: var(--pl-font-weight-semibold);
+      box-shadow: var(--pl-shadow-1);
+    }
+
+    .c-segmented__item:not(:has(input:checked), :has(input:disabled)) span:hover {
+      color: var(--pl-color-text);
+    }
+
+    .c-segmented__item:has(input:focus-visible) span {
+      outline: var(--pl-focus-size) solid var(--pl-focus-color);
+      outline-offset: var(--pl-focus-offset);
+    }
+
+    .c-segmented__item:has(input:disabled) span {
+      opacity: var(--pl-opacity-disabled);
+      cursor: not-allowed;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-segmented) {
+      border-color: buttonborder;
+    }
+
+    :where(.c-segmented__item:has(input:checked) span) {
+      color: highlighttext;
+      background: highlight;
+    }
+  }
+
+  @scope (.c-tag-input) {
+    :scope {
+      --c-tag-input-pad: var(--pl-space-2);
+      --c-tag-input-gap: var(--pl-space-2);
+      --c-tag-input-min-h: calc(var(--pl-control-block-size) - 2px);
+      align-items: center;
+      gap: var(--c-tag-input-gap);
+      min-block-size: var(--c-tag-input-min-h);
+      padding: var(--c-tag-input-pad);
+      border: 1px solid var(--pl-color-border);
+      border-radius: var(--pl-radius-md);
+      background: var(--pl-color-surface);
+      cursor: text;
+      transition: border-color var(--pl-duration-1) var(--pl-ease-standard),
+        box-shadow var(--pl-duration-1) var(--pl-ease-standard);
+      flex-wrap: wrap;
+      display: flex;
+    }
+
+    :scope:focus-within {
+      border-color: var(--pl-focus-color);
+      box-shadow: 0 0 0 4px
+        color-mix(in oklab, var(--pl-focus-color), transparent var(--pl-focus-glow-opacity));
+      outline: none;
+    }
+
+    .c-tag-input__field {
+      min-inline-size: 6rem;
+      color: inherit;
+      font: inherit;
+      font-size: var(--pl-text-sm);
+      background: none;
+      border: 0;
+      outline: none;
+      flex: 1;
+      padding: 0;
+    }
+
+    .c-tag-input__field::placeholder {
+      color: var(--pl-color-text-muted);
+    }
+
+    @supports (field-sizing: content) {
+      .c-tag-input__field {
+        field-sizing: content;
+        min-inline-size: 4rem;
+      }
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-tag-input) {
+      background: canvas;
+      border-color: buttonborder;
+    }
+  }
+
+  @scope (.c-dropdown) {
+    :scope {
+      --c-dropdown-anchor: --pl-dropdown-anchor;
+      --c-dropdown-min-inline: 12rem;
+      --c-dropdown-max-block: 20rem;
+      display: inline-block;
+      position: relative;
+    }
+
+    .c-dropdown__trigger {
+      align-items: center;
+      gap: var(--pl-space-2);
+      inline-size: 100%;
+      min-block-size: var(--pl-control-block-size);
+      padding-inline: var(--pl-control-padding-inline);
+      border: 1px solid var(--pl-color-border);
+      border-radius: var(--pl-control-radius);
+      background: var(--pl-color-surface);
+      color: var(--pl-color-text);
+      font: inherit;
+      font-size: var(--pl-text-sm);
+      text-align: start;
+      cursor: pointer;
+      anchor-name: var(--c-dropdown-anchor);
+      transition: border-color var(--pl-duration-1) var(--pl-ease-standard);
+      display: inline-flex;
+    }
+
+    .c-dropdown__trigger:hover {
+      border-color: var(--pl-color-accent);
+    }
+
+    .c-dropdown__trigger:focus-visible {
+      outline: var(--pl-focus-size) solid var(--pl-focus-color);
+      outline-offset: var(--pl-focus-offset);
+    }
+
+    .c-dropdown__chevron {
+      block-size: 1rem;
+      inline-size: 1rem;
+      color: var(--pl-color-text-muted);
+      transition: rotate var(--pl-duration-2) var(--pl-ease-standard);
+      flex-shrink: 0;
+      margin-inline-start: auto;
+    }
+
+    .c-dropdown__trigger:has( ~ .c-dropdown__menu:popover-open) .c-dropdown__chevron {
+      rotate: 180deg;
+    }
+
+    .c-dropdown__menu {
+      padding: var(--pl-space-2);
+      min-inline-size: var(--c-dropdown-min-inline);
+      max-block-size: var(--c-dropdown-max-block);
+      border: 1px solid color-mix(in oklab,
+        var(--pl-color-border),
+        transparent 30%);
+      border-radius: var(--pl-radius-xl);
+      -webkit-backdrop-filter: blur(var(--pl-backdrop-blur)) saturate(var(--pl-backdrop-saturate));
+      box-shadow: var(--pl-shadow-3);
+      opacity: 0;
+      transition: opacity var(--pl-duration-enter) var(--pl-ease-decelerate),
+        transform var(--pl-duration-enter) var(--pl-ease-decelerate),
+        overlay var(--pl-duration-exit) var(--pl-ease-accelerate) allow-discrete,
+        display var(--pl-duration-exit) var(--pl-ease-accelerate) allow-discrete;
+      background: light-dark(oklch(100% 0 0 / .96), oklch(17% .04 250 / .94));
+      margin: 0;
+      overflow-y: auto;
+      transform: translateY(-4px);
+    }
+
+    @supports (position-anchor: --x) {
+      .c-dropdown__menu {
+        position-anchor: var(--c-dropdown-anchor);
+        position-area: block-end span-inline-end;
+        position-try-fallbacks: flip-block;
+        margin-block-start: var(--pl-space-1);
+        position: absolute;
+        inset: auto;
+      }
+    }
+
+    .c-dropdown__menu:popover-open {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    @starting-style {
+      .c-dropdown__menu:popover-open {
+        opacity: 0;
+        transform: translateY(-4px);
+      }
+    }
+  }
+
+  :where(.c-dropdown__menu) > :is(a, button, [role="option"]) {
+    align-items: center;
+    gap: var(--pl-space-2);
+    min-block-size: 2.25rem;
+    inline-size: 100%;
+    padding-inline: var(--pl-space-3);
+    border-radius: var(--pl-radius-sm);
+    color: inherit;
+    font: inherit;
+    font-size: var(--pl-text-sm);
+    text-align: start;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    text-decoration: none;
+    display: flex;
+  }
+
+  :where(.c-dropdown__menu) > :is(a, button, [role="option"]):is(:hover, :focus-visible) {
+    background: var(--pl-color-surface-2);
+  }
+
+  :where(.c-dropdown__menu) > :is(a, button, [role="option"]):focus-visible {
+    outline: var(--pl-focus-size) solid var(--pl-focus-color);
+    outline-offset: calc(var(--pl-focus-offset) * -1);
+  }
+
+  :where(.c-dropdown__menu) > [aria-selected="true"] {
+    color: var(--pl-color-accent);
+    font-weight: var(--pl-font-weight-semibold);
+    background: color-mix(in oklab, var(--pl-color-accent), transparent 92%);
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-dropdown__trigger), :where(.c-dropdown__menu) {
+      border-color: buttonborder;
+    }
+
+    :where(.c-dropdown__menu) > :is(a, button):focus-visible {
+      outline-color: highlight;
+    }
+  }
+
+  @scope (.c-file-upload) {
+    :scope {
+      --c-upload-pad: var(--pl-space-6);
+      --c-upload-gap: var(--pl-space-3);
+      --c-upload-border: 2px dashed var(--pl-color-border);
+      --c-upload-radius: var(--pl-radius-lg);
+      cursor: pointer;
+      display: block;
+    }
+
+    .c-file-upload__input {
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+      block-size: 1px;
+      inline-size: 1px;
+      margin: -1px;
+      padding: 0;
+      position: absolute;
+      overflow: hidden;
+    }
+
+    .c-file-upload__zone {
+      justify-content: center;
+      align-items: center;
+      gap: var(--c-upload-gap);
+      padding: var(--c-upload-pad);
+      border: var(--c-upload-border);
+      border-radius: var(--c-upload-radius);
+      background: var(--pl-color-surface-2);
+      text-align: center;
+      transition: border-color var(--pl-duration-2) var(--pl-ease-standard),
+        background-color var(--pl-duration-2) var(--pl-ease-standard);
+      flex-direction: column;
+      display: flex;
+    }
+
+    :scope:hover .c-file-upload__zone, :scope[data-dragging] .c-file-upload__zone {
+      border-color: var(--pl-color-accent);
+      background: color-mix(in oklab, var(--pl-color-accent), transparent 92%);
+    }
+
+    :scope:has(input:focus-visible) .c-file-upload__zone {
+      outline: var(--pl-focus-size) solid var(--pl-focus-color);
+      outline-offset: var(--pl-focus-offset);
+    }
+
+    :scope:has(input:disabled) {
+      cursor: not-allowed;
+
+      & .c-file-upload__zone {
+        opacity: var(--pl-opacity-disabled);
+      }
+    }
+
+    .c-file-upload__icon {
+      block-size: 2rem;
+      inline-size: 2rem;
+      color: var(--pl-color-text-muted);
+    }
+
+    .c-file-upload__text {
+      font-size: var(--pl-text-sm);
+      color: var(--pl-color-text-muted);
+    }
+
+    .c-file-upload__text strong {
+      color: var(--pl-color-text);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-file-upload__zone) {
+      background: canvas;
+      border-color: buttonborder;
+    }
+  }
+
+  @scope (.c-command) {
+    :scope {
+      --c-command-inline: min(36rem, calc(100vi - 2 * var(--pl-space-4)));
+      --c-command-max-block: 28rem;
+      inline-size: var(--c-command-inline);
+      max-block-size: var(--c-command-max-block);
+      border-radius: var(--pl-radius-2xl);
+      -webkit-backdrop-filter: blur(var(--pl-backdrop-blur-strong)) saturate(var(--pl-backdrop-saturate-strong));
+      box-shadow: var(--pl-shadow-3);
+      opacity: 0;
+      transition: opacity var(--pl-duration-enter) var(--pl-ease-decelerate),
+        transform var(--pl-duration-enter) var(--pl-ease-decelerate),
+        overlay var(--pl-duration-exit) var(--pl-ease-accelerate) allow-discrete,
+        display var(--pl-duration-exit) var(--pl-ease-accelerate) allow-discrete;
+      background: light-dark(oklch(100% 0 0 / .94), oklch(17% .04 250 / .92));
+      border: none;
+      margin: auto;
+      padding: 0;
+      overflow: hidden;
+      transform: scale(.97) translateY(-10px);
+    }
+
+    :scope:popover-open {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+
+    @starting-style {
+      :scope:popover-open {
+        opacity: 0;
+        transform: scale(.97) translateY(-10px);
+      }
+    }
+
+    .c-command__search {
+      inline-size: 100%;
+      padding: var(--pl-space-4);
+      border: 0;
+      border-block-end: 1px solid color-mix(in oklab,
+        var(--pl-color-border),
+        transparent 40%);
+      color: var(--pl-color-text);
+      font: inherit;
+      font-size: var(--pl-text-md);
+      background: none;
+      outline: none;
+    }
+
+    .c-command__search::placeholder {
+      color: var(--pl-color-text-muted);
+    }
+
+    .c-command__body {
+      max-block-size: calc(var(--c-command-max-block) - 4rem);
+      padding: var(--pl-space-2);
+      overflow-y: auto;
+    }
+
+    .c-command__group + .c-command__group {
+      margin-block-start: var(--pl-space-2);
+    }
+
+    .c-command__heading {
+      margin-block: var(--pl-space-2) var(--pl-space-1);
+      padding-inline: var(--pl-space-3);
+      font-size: var(--pl-text-xs);
+      font-weight: var(--pl-font-weight-semibold);
+      text-transform: uppercase;
+      letter-spacing: .04em;
+      color: var(--pl-color-text-muted);
+    }
+
+    .c-command__item {
+      align-items: center;
+      gap: var(--pl-space-3);
+      inline-size: 100%;
+      padding: var(--pl-space-2) var(--pl-space-3);
+      border-radius: var(--pl-radius-sm);
+      color: var(--pl-color-text);
+      font: inherit;
+      font-size: var(--pl-text-sm);
+      text-align: start;
+      cursor: pointer;
+      background: none;
+      border: 0;
+      display: flex;
+    }
+
+    .c-command__item:hover, .c-command__item[data-selected] {
+      background: var(--pl-color-surface-2);
+    }
+
+    .c-command__item[data-selected] {
+      box-shadow: inset var(--pl-accent-bar-width) 0 0 var(--pl-color-accent);
+      color: var(--pl-color-accent);
+    }
+
+    .c-command__item:focus-visible {
+      outline: var(--pl-focus-size) solid var(--pl-focus-color);
+      outline-offset: calc(var(--pl-focus-offset) * -1);
+    }
+
+    .c-command__icon {
+      block-size: 1rem;
+      inline-size: 1rem;
+      color: var(--pl-color-text-muted);
+      flex-shrink: 0;
+    }
+
+    .c-command__shortcut {
+      padding: .125rem var(--pl-space-1);
+      border-radius: var(--pl-radius-sm);
+      background: var(--pl-color-surface);
+      border: 1px solid var(--pl-color-border);
+      font-size: var(--pl-text-xs);
+      color: var(--pl-color-text-muted);
+      font-family: var(--pl-font-mono);
+      margin-inline-start: auto;
+    }
+
+    .c-command__footer {
+      gap: var(--pl-space-4);
+      padding: var(--pl-space-2) var(--pl-space-4);
+      border-block-start: 1px solid color-mix(in oklab,
+        var(--pl-color-border),
+        transparent 40%);
+      font-size: var(--pl-text-xs);
+      color: var(--pl-color-text-muted);
+      display: flex;
+    }
+  }
+
+  :where(.c-command)::backdrop {
+    background: var(--pl-color-scrim);
+    backdrop-filter: blur(var(--pl-backdrop-blur-scrim)) saturate(var(--pl-backdrop-saturate-scrim));
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-command) {
+      background: canvas;
+      border-color: buttonborder;
+    }
+
+    :where(.c-command__item[data-selected]) {
+      color: highlight;
+      box-shadow: inset 2px 0 highlight;
+    }
+  }
+
+  @scope (.c-nav) {
+    :scope {
+      --c-nav-gap: var(--pl-space-1);
+      --c-nav-pad: var(--pl-space-2);
+      gap: var(--c-nav-gap);
+      padding: var(--c-nav-pad);
+      flex-direction: column;
+      display: flex;
+    }
+
+    .c-nav__item {
+      align-items: center;
+      gap: var(--pl-space-3);
+      padding: var(--pl-space-2) var(--pl-space-3);
+      border-radius: var(--pl-radius-md);
+      color: var(--pl-color-text-muted);
+      font-size: var(--pl-text-sm);
+      font-weight: var(--pl-font-weight-medium);
+      cursor: pointer;
+      transition: background-color var(--pl-duration-1) var(--pl-ease-standard),
+        color var(--pl-duration-1) var(--pl-ease-standard),
+        box-shadow var(--pl-duration-1) var(--pl-ease-standard);
+      text-decoration: none;
+      display: flex;
+    }
+
+    .c-nav__item:hover {
+      background: var(--pl-color-surface-2);
+      color: var(--pl-color-text);
+    }
+
+    .c-nav__item:focus-visible {
+      outline: var(--pl-focus-size) solid var(--pl-focus-color);
+      outline-offset: var(--pl-focus-offset);
+    }
+
+    .c-nav__item[aria-current="page"], .c-nav__item[aria-current="true"] {
+      background: color-mix(in oklab, var(--pl-color-accent), transparent 90%);
+      color: var(--pl-color-accent);
+      font-weight: var(--pl-font-weight-semibold);
+      border-radius: 0 var(--pl-radius-md) var(--pl-radius-md) 0;
+      box-shadow: inset var(--pl-accent-bar-width) 0 0 var(--pl-color-accent);
+    }
+
+    .c-nav__item--child {
+      font-size: var(--pl-text-sm);
+      padding-inline-start: calc(var(--pl-space-3) + 1.25rem + var(--pl-space-3));
+    }
+
+    .c-nav__icon {
+      block-size: 1.25rem;
+      inline-size: 1.25rem;
+      color: inherit;
+      flex-shrink: 0;
+    }
+
+    .c-nav__label {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 1;
+      min-inline-size: 0;
+      overflow: hidden;
+    }
+
+    .c-nav__badge {
+      margin-inline-start: auto;
+    }
+
+    .c-nav__section {
+      gap: var(--pl-space-1);
+      flex-direction: column;
+      display: flex;
+    }
+
+    .c-nav__section-trigger {
+      align-items: center;
+      gap: var(--pl-space-3);
+      padding: var(--pl-space-2) var(--pl-space-3);
+      border-radius: var(--pl-radius-md);
+      color: var(--pl-color-text-muted);
+      font-size: var(--pl-text-sm);
+      font-weight: var(--pl-font-weight-medium);
+      cursor: pointer;
+      user-select: none;
+      transition: all var(--pl-duration-1) var(--pl-ease-standard);
+      list-style: none;
+      display: flex;
+
+      &::-webkit-details-marker {
+        display: none;
+      }
+
+      &::marker {
+        content: "";
+      }
+    }
+
+    .c-nav__section-trigger:hover {
+      background: var(--pl-color-surface-2);
+      color: var(--pl-color-text);
+    }
+
+    .c-nav__section-trigger:focus-visible {
+      outline: var(--pl-focus-size) solid var(--pl-focus-color);
+      outline-offset: var(--pl-focus-offset);
+    }
+
+    .c-nav__chevron {
+      block-size: 1rem;
+      inline-size: 1rem;
+      color: var(--pl-color-text-muted);
+      transition: rotate var(--pl-duration-2) var(--pl-ease-standard);
+      flex-shrink: 0;
+      margin-inline-start: auto;
+    }
+
+    .c-nav__section[open] .c-nav__chevron {
+      rotate: 90deg;
+    }
+
+    :scope[data-variant="icons"] .c-nav__label, :scope[data-variant="icons"] .c-nav__chevron, :scope[data-variant="icons"] .c-nav__badge {
+      display: none;
+    }
+
+    :scope[data-variant="icons"] .c-nav__item, :scope[data-variant="icons"] .c-nav__section-trigger {
+      padding: var(--pl-space-2);
+      justify-content: center;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-nav__item[aria-current="page"]) {
+      color: highlighttext;
+      background: highlight;
+    }
+
+    :where(.c-nav__item:focus-visible) {
+      outline-color: highlight;
+    }
+  }
+}
+
+@layer porchlight.utilities {
+  :where(.u-visually-hidden) {
+    clip-path: inset(50%) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+    block-size: 1px !important;
+    inline-size: 1px !important;
+    margin: -1px !important;
+    padding: 0 !important;
+    position: absolute !important;
+    overflow: hidden !important;
+  }
+
+  :where(.u-visually-hidden:focus, .u-visually-hidden:active) {
+    clip-path: none !important;
+    white-space: normal !important;
+    block-size: auto !important;
+    inline-size: auto !important;
+    margin: 0 !important;
+    position: static !important;
+  }
+
+  :where(.u-truncate) {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  :where(.u-flow) > * + * {
+    margin-block-start: var(--u-flow-space, var(--pl-space-4));
+  }
+
+  :where(.u-surface) {
+    background: var(--pl-color-surface);
+    color: var(--pl-color-text);
+    border: 1px solid var(--pl-color-border);
+    border-radius: var(--pl-radius-lg);
+  }
+
+  :where(.u-muted) {
+    color: var(--pl-color-text-muted);
+  }
+
+  :where(.u-full-bleed) {
+    inline-size: 100vi;
+    margin-inline: calc(50% - 50vi);
+  }
+}
+
+@layer porchlight.enhancements {
+  @supports (interpolate-size: allow-keywords) {
+    :root {
+      interpolate-size: allow-keywords;
+    }
+  }
+
+  @supports (container-type: scroll-state) {
+    .c-sticky-shell {
+      container-type: scroll-state;
+    }
+
+    .c-sticky-shell__bar {
+      z-index: var(--pl-z-sticky);
+      background: var(--pl-color-surface);
+      transition: box-shadow var(--pl-duration-2) var(--pl-ease-standard),
+        background-color var(--pl-duration-2) var(--pl-ease-standard);
+      position: sticky;
+      inset-block-start: 0;
+    }
+
+    @container scroll-state(stuck: top) {
+      .c-sticky-shell__bar {
+        box-shadow: var(--pl-shadow-2);
+        background: color-mix(in oklab,
+          var(--pl-color-surface),
+          transparent 18%);
+        -webkit-backdrop-filter: blur(16px) saturate(180%);
+        border-block-end: 1px solid color-mix(in oklab,
+          var(--pl-color-border),
+          transparent 55%);
+      }
+    }
+  }
+
+  @supports (text-box: trim-both cap alphabetic) {
+    :where(.c-button, .c-badge, .c-dialog__close) {
+      text-box: trim-both cap alphabetic;
+    }
+  }
+
+  @supports (rule: 1px solid CanvasText) {
+    :where(.l-grid[data-dividers="true"]) {
+      rule: 1px solid var(--pl-color-border);
+      rule-visibility-items: between;
+    }
+  }
+
+  @supports (background: attr(data-color type(<color>))) {
+    .c-swatch {
+      background: attr(data-color type(<color>), var(--pl-color-border));
+    }
+  }
+
+  @supports (view-transition-name: root) {
+    @view-transition {
+      navigation: auto;
+    }
+
+    ::view-transition-old(root) {
+      animation: var(--pl-duration-exit) var(--pl-ease-accelerate) both pl-fade-out;
+    }
+
+    ::view-transition-new(root) {
+      animation: var(--pl-duration-enter) var(--pl-ease-decelerate) both pl-fade-in;
+    }
+
+    @keyframes pl-fade-out {
+      to {
+        opacity: 0;
+      }
+    }
+
+    @keyframes pl-fade-in {
+      from {
+        opacity: 0;
+      }
+    }
+  }
+}