daftcss 1.3.0

package/dist/daft.css

@@ -0,0 +1,3022 @@
+@layer tokens {
+  :root {
+    color-scheme: light dark;
+    --spacing: 1rem;
+    --radius: .625rem;
+    --component-height: 2.25rem;
+    --font-size-base: 1rem;
+    --line-height: 1.5;
+    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+    --transition: .15s;
+    --ease-default: cubic-bezier(.4, 0, .2, 1);
+    --background: light-dark(oklch(100% 0 0), oklch(14.5% 0 0));
+    --foreground: light-dark(oklch(14.5% 0 0), oklch(98.5% 0 0));
+    --card: light-dark(oklch(100% 0 0), oklch(20.5% 0 0));
+    --popover: light-dark(oklch(100% 0 0), oklch(26.9% 0 0));
+    --primary: light-dark(oklch(20.5% 0 0), oklch(92.2% 0 0));
+    --muted: light-dark(oklch(97% 0 0), oklch(26.9% 0 0));
+    --destructive: light-dark(oklch(57.7% .245 27.325), oklch(70.4% .191 22.216));
+    --success: light-dark(oklch(55% .16 145), oklch(72% .16 145));
+    --warning: light-dark(oklch(68% .16 70), oklch(82% .16 80));
+    --border: light-dark(oklch(92.2% 0 0), oklch(100% 0 0 / .1));
+    --spacing-xs: calc(var(--spacing) * .25);
+    --spacing-sm: calc(var(--spacing) * .5);
+    --spacing-md: calc(var(--spacing) * .75);
+    --spacing-lg: calc(var(--spacing) * 1.5);
+    --spacing-xl: calc(var(--spacing) * 2);
+    --radius-sm: calc(var(--radius)  - 4px);
+    --radius-md: calc(var(--radius)  - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius)  + 4px);
+    --radius-full: 9999px;
+    --text-xs: calc(var(--font-size-base) * .75);
+    --text-sm: calc(var(--font-size-base) * .875);
+    --text-base: var(--font-size-base);
+    --text-lg: calc(var(--font-size-base) * 1.125);
+    --text-xl: calc(var(--font-size-base) * 1.25);
+    --text-2xl: calc(var(--font-size-base) * 1.5);
+    --text-3xl: calc(var(--font-size-base) * 1.875);
+    --text-4xl: calc(var(--font-size-base) * 2.25);
+    --line-height-sm: calc(var(--line-height)  - .25);
+    --line-height-lg: calc(var(--line-height)  + .25);
+    --font-normal: 400;
+    --font-medium: 500;
+    --font-semibold: 600;
+    --font-bold: 700;
+    --font-extrabold: 800;
+    --transition-fast: calc(var(--transition) * .67);
+    --transition-slow: calc(var(--transition) * 2);
+    --transition-default: var(--transition) var(--ease-default);
+    --component-height-sm: calc(var(--component-height)  - .25rem);
+    --component-height-lg: calc(var(--component-height)  + .25rem);
+    --shadow-xs: 0 1px 2px 0 light-dark(#0000000d, #0000004d);
+    --shadow-sm: 0 1px 3px 0 light-dark(#0000001a, #0006), 0 1px 2px -1px light-dark(#0000001a, #0006);
+    --shadow-md: 0 4px 6px -1px light-dark(#0000001a, #0006), 0 2px 4px -2px light-dark(#0000001a, #0006);
+    --shadow-lg: 0 10px 15px -3px light-dark(#0000001a, #0006), 0 4px 6px -4px light-dark(#0000001a, #0006);
+    --card-foreground: var(--foreground);
+    --popover-foreground: var(--card-foreground);
+    --muted-foreground: light-dark(oklch(55.6% 0 0), oklch(70.8% 0 0));
+    --primary-foreground: oklch(98.5% 0 0);
+    --destructive-foreground: oklch(98.5% 0 0);
+    --success-foreground: light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0));
+    --warning-foreground: oklch(14.5% 0 0);
+    --accent: var(--muted);
+    --accent-foreground: var(--foreground);
+    --button-radius: var(--radius-md);
+    --input-radius: var(--radius-md);
+    --card-radius: var(--radius-xl);
+    --modal-radius: var(--radius-lg);
+    --dropdown-radius: var(--radius-md);
+    --tooltip-radius: var(--radius-md);
+    --badge-radius: var(--radius-md);
+    --progress-radius: var(--radius-full);
+    --button-shadow: var(--shadow-xs);
+    --card-shadow: var(--shadow-xs);
+    --dropdown-shadow: var(--shadow-md);
+    --popover-shadow: var(--shadow-md);
+    --modal-shadow: var(--shadow-lg);
+    --button-height: var(--component-height);
+    --button-height-sm: var(--component-height-sm);
+    --button-height-lg: var(--component-height-lg);
+    --input: light-dark(oklch(92.2% 0 0), oklch(100% 0 0 / .15));
+    --input-height: var(--component-height);
+    --input-background: var(--card);
+    --control-size: 1rem;
+    --switch-width: 2rem;
+    --switch-height: 1.25rem;
+    --switch-thumb: 1rem;
+    --modal-overlay: light-dark(oklch(0% 0 0 / .5), oklch(0% 0 0 / .7));
+    --breadcrumb-divider: "›";
+    --aside-width: clamp(14rem, 20vw, 20rem);
+    --hover-opacity: 90%;
+    --active-opacity: 85%;
+    --disabled-opacity: .5;
+    --ring: light-dark(oklch(70.8% 0 0), oklch(55.6% 0 0));
+    --focus-ring-width: 3px;
+    --focus-ring-opacity: 50%;
+    --border-width: 1px;
+    --outline-width: 2px;
+    --outline-offset: 2px;
+    --icon-size: 1rem;
+    --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+    --icon-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  }
+
+  @supports (color: oklch(from red l c h)) {
+    :root {
+      --primary-foreground: oklch(from var(--primary) clamp(0, (l / .623 - 1) * -infinity, 1) 0 h);
+      --destructive-foreground: oklch(from var(--destructive) clamp(0, (l / .623 - 1) * -infinity, 1) 0 h);
+      --success-foreground: oklch(from var(--success) clamp(0, (l / .623 - 1) * -infinity, 1) 0 h);
+      --warning-foreground: oklch(from var(--warning) clamp(0, (l / .623 - 1) * -infinity, 1) 0 h);
+    }
+  }
+
+  @supports (color: contrast-color(red)) {
+    :root {
+      --primary-foreground: contrast-color(var(--primary));
+      --destructive-foreground: contrast-color(var(--destructive));
+      --success-foreground: contrast-color(var(--success));
+      --warning-foreground: contrast-color(var(--warning));
+    }
+  }
+}
+
+@layer reset {
+  *, :before, :after {
+    box-sizing: border-box;
+  }
+
+  * {
+    margin: 0;
+  }
+
+  html {
+    -webkit-text-size-adjust: 100%;
+    -moz-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+  }
+
+  body {
+    -webkit-font-smoothing: antialiased;
+    line-height: 1.5;
+  }
+
+  img, picture, video, canvas, svg {
+    max-width: 100%;
+    display: block;
+  }
+
+  input, button, textarea, select {
+    font: inherit;
+    color: inherit;
+  }
+
+  p, h1, h2, h3, h4, h5, h6 {
+    overflow-wrap: break-word;
+  }
+
+  ul[role="list"], ol[role="list"] {
+    padding: 0;
+    list-style: none;
+  }
+
+  button {
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 0;
+  }
+
+  fieldset {
+    border: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  legend {
+    padding: 0;
+  }
+
+  summary {
+    cursor: pointer;
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  input, textarea, select, button {
+    font-family: inherit;
+    font-size: inherit;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *, :before, :after {
+      scroll-behavior: auto !important;
+      transition-duration: .01ms !important;
+      animation-duration: .01ms !important;
+      animation-iteration-count: 1 !important;
+    }
+  }
+}
+
+@layer base {
+  [data-theme="light"] {
+    color-scheme: light;
+  }
+
+  [data-theme="dark"] {
+    color-scheme: dark;
+  }
+
+  [data-theme] {
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+
+  html {
+    color-scheme: light dark;
+    scroll-behavior: smooth;
+  }
+
+  body {
+    font-family: var(--font-sans);
+    font-size: var(--text-base);
+    font-weight: var(--font-normal);
+    line-height: var(--line-height);
+    color: var(--foreground);
+    background-color: var(--background);
+    min-height: 100dvh;
+  }
+
+  :focus-visible {
+    outline: var(--outline-width) solid var(--ring);
+    outline-offset: var(--outline-offset);
+  }
+
+  ::selection {
+    background-color: color-mix(in oklch, var(--primary) 30%, transparent);
+    color: var(--foreground);
+  }
+
+  ::-webkit-scrollbar {
+    width: .75rem;
+    height: .75rem;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--muted);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--muted-foreground);
+    border-radius: var(--radius-full);
+    border: 3px solid var(--muted);
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in oklch, var(--muted-foreground) 80%, var(--foreground));
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--muted-foreground) var(--muted);
+  }
+}
+
+@layer layout {
+  .container {
+    width: 100%;
+    padding-left: var(--spacing);
+    padding-right: var(--spacing);
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  @media (width >= 576px) {
+    .container {
+      max-width: 540px;
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+
+  @media (width >= 768px) {
+    .container {
+      max-width: 720px;
+    }
+  }
+
+  @media (width >= 1024px) {
+    .container {
+      max-width: 960px;
+    }
+  }
+
+  @media (width >= 1280px) {
+    .container {
+      max-width: 1140px;
+    }
+  }
+
+  @media (width >= 1536px) {
+    .container {
+      max-width: 1320px;
+    }
+  }
+
+  .container-fluid {
+    width: 100%;
+    padding-left: var(--spacing);
+    padding-right: var(--spacing);
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  @media (width >= 768px) {
+    .container-fluid {
+      padding-left: var(--spacing-lg);
+      padding-right: var(--spacing-lg);
+    }
+  }
+
+  @media (width >= 1024px) {
+    .container-fluid {
+      padding-left: var(--spacing-xl);
+      padding-right: var(--spacing-xl);
+    }
+  }
+
+  main {
+    min-height: 1px;
+    display: block;
+  }
+
+  body > header, main > header, .container > header, body > footer, main > footer, .container > footer {
+    padding-block: var(--spacing);
+  }
+
+  section {
+    margin-bottom: var(--spacing-xl);
+  }
+
+  section:last-child {
+    margin-bottom: 0;
+  }
+
+  section section, body > article, main > article, section > article, .container > article {
+    margin-bottom: var(--spacing);
+  }
+
+  @media (width >= 768px) {
+    section {
+      margin-bottom: calc(var(--spacing-xl) * 1.5);
+    }
+  }
+
+  .grid {
+    gap: var(--spacing);
+    margin-bottom: var(--spacing);
+    grid-template-columns: 1fr;
+    display: grid;
+  }
+
+  .grid:last-child {
+    margin-bottom: 0;
+  }
+
+  @media (width >= 768px) {
+    .grid {
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    }
+
+    .grid:has( > :nth-child(2):last-child) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .grid:has( > :nth-child(3):last-child) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    .grid:has( > :nth-child(4):last-child) {
+      grid-template-columns: repeat(4, 1fr);
+    }
+
+    .grid:has( > :nth-child(5):last-child) {
+      grid-template-columns: repeat(5, 1fr);
+    }
+
+    .grid:has( > :nth-child(6):last-child) {
+      grid-template-columns: repeat(6, 1fr);
+    }
+  }
+
+  .grid > * {
+    min-width: 0;
+  }
+
+  .grid > [data-span="full"] {
+    grid-column: 1 / -1;
+  }
+
+  .grid > .span-2 {
+    grid-column: span 2;
+  }
+
+  .grid > .span-3 {
+    grid-column: span 3;
+  }
+
+  .grid > .span-4 {
+    grid-column: span 4;
+  }
+
+  .overflow-auto {
+    -webkit-overflow-scrolling: touch;
+    overflow-x: auto;
+  }
+
+  .overflow-auto > table {
+    margin-bottom: 0;
+  }
+
+  .overflow-auto {
+    position: relative;
+  }
+
+  pre.overflow-auto {
+    overflow-x: auto;
+  }
+}
+
+@layer content {
+  h1, h2, h3, h4, h5, h6 {
+    color: var(--foreground);
+    font-weight: var(--font-semibold);
+    line-height: var(--line-height-sm);
+    letter-spacing: -.025em;
+    margin-top: var(--spacing-sm);
+    margin-bottom: var(--spacing-sm);
+  }
+
+  h1 {
+    font-size: var(--text-4xl);
+    font-weight: var(--font-extrabold);
+    line-height: 1;
+  }
+
+  h2 {
+    font-size: var(--text-3xl);
+  }
+
+  h3 {
+    font-size: var(--text-2xl);
+  }
+
+  h4 {
+    font-size: var(--text-xl);
+  }
+
+  h5 {
+    font-size: var(--text-lg);
+  }
+
+  h6 {
+    font-size: var(--text-base);
+  }
+
+  hgroup {
+    margin-bottom: var(--spacing);
+
+    & > h1, & > h2, & > h3, & > h4, & > h5, & > h6 {
+      margin-bottom: var(--spacing-sm);
+    }
+
+    & > p {
+      color: var(--muted-foreground);
+      margin-bottom: 0;
+    }
+  }
+
+  p {
+    margin-bottom: var(--spacing);
+    line-height: var(--line-height-lg);
+  }
+
+  p:last-child, h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child {
+    margin-bottom: 0;
+  }
+
+  strong, b {
+    font-weight: var(--font-semibold);
+  }
+
+  em, i {
+    font-style: italic;
+  }
+
+  small {
+    font-size: var(--text-sm);
+  }
+
+  a {
+    color: var(--primary);
+    text-underline-offset: .2em;
+    transition: color var(--transition-default);
+    text-decoration: underline;
+
+    &:hover {
+      color: color-mix(in oklch, var(--primary) 80%, var(--foreground));
+    }
+
+    &:focus-visible {
+      outline: var(--outline-width) solid var(--ring);
+      outline-offset: var(--outline-offset);
+      border-radius: var(--radius-sm);
+    }
+  }
+
+  mark {
+    background-color: color-mix(in oklch, var(--muted) 40%, transparent);
+    color: var(--foreground);
+    border-radius: var(--radius-sm);
+    padding: .125em .25em;
+  }
+
+  del {
+    color: var(--muted-foreground);
+    text-decoration: line-through;
+  }
+
+  ins {
+    text-decoration: underline wavy;
+    text-decoration-color: var(--primary);
+  }
+
+  u {
+    text-underline-offset: .2em;
+    text-decoration: underline;
+  }
+
+  s {
+    text-decoration: line-through;
+  }
+
+  abbr[title] {
+    cursor: help;
+    text-decoration: underline dotted;
+  }
+
+  cite {
+    font-style: italic;
+  }
+
+  dfn {
+    font-style: italic;
+    font-weight: var(--font-medium);
+  }
+
+  sub, sup {
+    vertical-align: baseline;
+    font-size: .75em;
+    line-height: 0;
+    position: relative;
+  }
+
+  sub {
+    bottom: -.25em;
+  }
+
+  sup {
+    top: -.5em;
+  }
+
+  hr {
+    height: var(--border-width);
+    background-color: var(--border);
+    margin: var(--spacing-lg) 0;
+    border: none;
+  }
+
+  blockquote {
+    border-left: 4px solid var(--border);
+    padding-left: var(--spacing);
+    margin: var(--spacing) 0;
+    color: var(--muted-foreground);
+    font-style: italic;
+
+    & > p {
+      margin-bottom: var(--spacing-sm);
+    }
+
+    & > footer {
+      font-size: var(--text-sm);
+      color: var(--muted-foreground);
+      font-style: normal;
+    }
+  }
+
+  ul, ol {
+    margin-bottom: var(--spacing);
+    padding-left: calc(var(--spacing) * 1.25);
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  li {
+    line-height: var(--line-height-lg);
+  }
+
+  ul ul, ol ol, ul ol, ol ul {
+    margin-top: var(--spacing-xs);
+    margin-bottom: 0;
+  }
+
+  dl {
+    margin-bottom: var(--spacing);
+  }
+
+  dt {
+    font-weight: var(--font-semibold);
+    margin-bottom: var(--spacing-xs);
+  }
+
+  dd {
+    margin-left: var(--spacing);
+    margin-bottom: var(--spacing-md);
+    color: var(--muted-foreground);
+  }
+
+  dd:last-child {
+    margin-bottom: 0;
+  }
+
+  address {
+    margin-bottom: var(--spacing);
+    font-style: normal;
+  }
+
+  time {
+    font-variant-numeric: tabular-nums;
+  }
+
+  img {
+    border-radius: var(--radius-md);
+    max-width: 100%;
+    height: auto;
+  }
+
+  figure {
+    margin: var(--spacing) 0;
+
+    & > img, & > picture > img, & > video, & > iframe {
+      border-radius: var(--radius-lg);
+    }
+
+    & > figcaption {
+      font-size: var(--text-sm);
+      color: var(--muted-foreground);
+      margin-top: var(--spacing-sm);
+      text-align: center;
+    }
+  }
+
+  figure:has( > table) {
+    -webkit-overflow-scrolling: touch;
+    overflow-x: auto;
+
+    & > table {
+      margin: 0;
+    }
+  }
+
+  picture {
+    display: block;
+  }
+
+  video {
+    border-radius: var(--radius-lg);
+    max-width: 100%;
+    height: auto;
+  }
+
+  audio {
+    width: 100%;
+  }
+
+  iframe {
+    border: var(--border-width) solid var(--border);
+    border-radius: var(--radius-lg);
+    max-width: 100%;
+  }
+
+  svg {
+    fill: currentColor;
+  }
+
+  svg:not([width]) {
+    width: 1em;
+    height: 1em;
+  }
+
+  object, embed {
+    max-width: 100%;
+  }
+
+  canvas {
+    display: block;
+  }
+
+  code {
+    font-family: var(--font-mono);
+    font-size: .875em;
+    font-weight: var(--font-medium);
+    background-color: var(--muted);
+    color: var(--foreground);
+    border-radius: var(--radius-sm);
+    white-space: nowrap;
+    padding: .2em .4em;
+  }
+
+  a > code {
+    color: inherit;
+  }
+
+  pre {
+    font-family: var(--font-mono);
+    font-size: var(--text-sm);
+    line-height: var(--line-height-lg);
+    background-color: var(--muted);
+    color: var(--foreground);
+    padding: var(--spacing);
+    border-radius: var(--radius-lg);
+    -webkit-overflow-scrolling: touch;
+    margin-bottom: var(--spacing);
+    tab-size: 2;
+    overflow-x: auto;
+
+    & > code {
+      font-size: inherit;
+      white-space: pre;
+      background: none;
+      border-radius: 0;
+      padding: 0;
+    }
+  }
+
+  [data-theme="dark"] pre {
+    background-color: oklch(18% 0 0);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) pre {
+      background-color: oklch(18% 0 0);
+    }
+  }
+
+  kbd {
+    font-family: var(--font-mono);
+    font-size: .875em;
+    font-weight: var(--font-medium);
+    background-color: var(--muted);
+    color: var(--foreground);
+    border-radius: var(--radius-sm);
+    border: var(--border-width) solid var(--border);
+    box-shadow: 0 2px 0 var(--border);
+    padding: .2em .4em;
+  }
+
+  kbd > kbd {
+    box-shadow: none;
+    background: none;
+    border: none;
+    padding: 0;
+  }
+
+  samp {
+    font-family: var(--font-mono);
+    background-color: var(--muted);
+    color: var(--muted-foreground);
+    border-radius: var(--radius-sm);
+    padding: .2em .4em;
+    font-size: .875em;
+  }
+
+  var {
+    font-family: var(--font-mono);
+    color: var(--primary);
+    font-style: italic;
+  }
+
+  data {
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+@layer forms {
+  input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="reset"]):not([type="button"])), textarea, select {
+    width: 100%;
+    height: var(--input-height);
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-family: inherit;
+    font-size: var(--text-base);
+    font-weight: var(--font-normal);
+    line-height: var(--line-height);
+    color: var(--foreground);
+    background-color: var(--input-background);
+    border: var(--border-width) solid var(--input);
+    border-radius: var(--input-radius);
+    transition: border-color var(--transition-default), box-shadow var(--transition-default);
+    appearance: none;
+    display: block;
+
+    &::placeholder {
+      color: var(--muted-foreground);
+      opacity: 1;
+    }
+
+    &:focus-visible {
+      border-color: var(--ring);
+      box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in oklch, var(--ring) var(--focus-ring-opacity), transparent);
+      outline: none;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: var(--disabled-opacity);
+      background-color: var(--muted);
+      border-color: var(--muted-foreground);
+    }
+  }
+
+  form:not([role="search"]) :is(button, [type="submit"], [type="reset"], [type="button"]):not(.icon) {
+    width: 100%;
+  }
+
+  input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="reset"]):not([type="button"])):read-only, textarea:read-only {
+    background-color: var(--muted);
+  }
+
+  textarea {
+    height: auto;
+    min-height: calc(var(--input-height) * 2);
+    padding: var(--spacing-md);
+    resize: vertical;
+  }
+
+  select {
+    line-height: calc(var(--input-height)  - 2 * var(--border-width)  - 2 * var(--spacing-sm));
+    padding-right: var(--spacing-xl);
+    background-image: var(--icon-select-chevron);
+    background-repeat: no-repeat;
+    background-position: right var(--spacing-md) center;
+    background-size: var(--icon-size);
+
+    &[multiple] {
+      height: auto;
+      padding-right: var(--spacing-md);
+      background-image: none;
+    }
+  }
+
+  input[type="file"] {
+    width: 100%;
+    height: var(--input-height);
+    padding: 0 var(--spacing-sm);
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    line-height: calc(var(--input-height)  - 2 * var(--border-width));
+    color: var(--foreground);
+    background-color: var(--input-background);
+    border: var(--border-width) solid var(--input);
+    border-radius: var(--input-radius);
+    cursor: pointer;
+    transition: border-color var(--transition-default);
+
+    &::file-selector-button {
+      padding: var(--spacing-xs) var(--spacing-md);
+      margin-right: var(--spacing-md);
+      font-weight: var(--font-medium);
+      color: var(--foreground);
+      background-color: var(--accent);
+      border-radius: var(--radius-sm);
+      cursor: pointer;
+      transition: background-color var(--transition-default);
+      border: none;
+    }
+
+    &:hover::file-selector-button {
+      background-color: color-mix(in oklch, var(--accent) 80%, var(--foreground) 5%);
+    }
+
+    &:focus-visible {
+      border-color: var(--ring);
+      box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in oklch, var(--ring) var(--focus-ring-opacity), transparent);
+      outline: none;
+    }
+  }
+
+  input[type="color"] {
+    width: 100%;
+    height: var(--input-height);
+    background-color: var(--input-background);
+    border: var(--border-width) solid var(--input);
+    border-radius: var(--input-radius);
+    cursor: pointer;
+    padding: 6px;
+
+    &::-webkit-color-swatch-wrapper {
+      padding: 0;
+    }
+
+    &::-webkit-color-swatch {
+      border-radius: var(--radius-sm);
+      border: none;
+    }
+
+    &::-moz-color-swatch {
+      border-radius: var(--radius-sm);
+      border: none;
+    }
+  }
+
+  input[type="search"] {
+    border-radius: var(--radius-full);
+    padding-left: var(--spacing);
+    padding-right: var(--spacing);
+
+    &::-webkit-search-cancel-button {
+      -webkit-appearance: none;
+      appearance: none;
+    }
+  }
+
+  input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"] {
+    &::-webkit-calendar-picker-indicator {
+      cursor: pointer;
+      opacity: .6;
+      transition: opacity var(--transition-default);
+    }
+
+    &::-webkit-calendar-picker-indicator:hover {
+      opacity: 1;
+    }
+  }
+
+  label {
+    margin-bottom: var(--spacing-sm);
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    color: var(--foreground);
+    display: block;
+  }
+
+  label:has( > input), label:has( > select), label:has( > textarea) {
+    display: block;
+
+    & > input, & > select, & > textarea {
+      margin-top: var(--spacing-sm);
+    }
+  }
+
+  small {
+    margin-top: var(--spacing-xs);
+    font-size: var(--text-sm);
+    color: var(--muted-foreground);
+    display: block;
+  }
+
+  form {
+    & > label, & > input, & > textarea, & > select, & > fieldset, & > div, & > p, & > small {
+      margin-bottom: var(--spacing);
+    }
+
+    & > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  fieldset {
+    margin-bottom: var(--spacing);
+  }
+
+  fieldset:last-child {
+    margin-bottom: 0;
+  }
+
+  legend {
+    font-size: var(--text-sm);
+    font-weight: var(--font-semibold);
+    color: var(--foreground);
+    margin-bottom: var(--spacing-md);
+  }
+
+  fieldset:disabled {
+    opacity: var(--disabled-opacity);
+  }
+
+  fieldset:disabled * {
+    cursor: not-allowed;
+  }
+
+  input[type="checkbox"], input[type="radio"] {
+    width: var(--control-size);
+    height: var(--control-size);
+    vertical-align: middle;
+    cursor: pointer;
+    appearance: none;
+    background-color: var(--background);
+    border: var(--border-width) solid var(--input);
+    transition: background-color var(--transition-default), border-color var(--transition-default), box-shadow var(--transition-default);
+    margin: 0;
+    position: relative;
+  }
+
+  input[type="checkbox"] {
+    border-radius: var(--radius-sm);
+  }
+
+  input[type="radio"] {
+    border-radius: var(--radius-full);
+  }
+
+  input[type="checkbox"]:checked, input[type="radio"]:checked {
+    background-color: var(--primary);
+    border-color: var(--primary);
+  }
+
+  input[type="checkbox"]:checked:after {
+    content: "";
+    background-color: var(--primary-foreground);
+    position: absolute;
+    inset: 0;
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-size: .875rem;
+    mask-size: .875rem;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+  }
+
+  input[type="radio"]:checked:after {
+    content: "";
+    background-color: var(--primary-foreground);
+    position: absolute;
+    inset: 0;
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E");
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-size: .875rem;
+    mask-size: .875rem;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+  }
+
+  input[type="checkbox"]:indeterminate {
+    background-color: var(--primary);
+    border-color: var(--primary);
+  }
+
+  input[type="checkbox"]:indeterminate:after {
+    content: "";
+    background-color: var(--primary-foreground);
+    position: absolute;
+    inset: 0;
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-size: .875rem;
+    mask-size: .875rem;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+  }
+
+  input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
+    border-color: var(--ring);
+    box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in oklch, var(--ring) var(--focus-ring-opacity), transparent);
+    outline: none;
+  }
+
+  input[type="checkbox"]:disabled, input[type="radio"]:disabled {
+    cursor: not-allowed;
+    opacity: var(--disabled-opacity);
+  }
+
+  label:has( > input[type="checkbox"]), label:has( > input[type="radio"]) {
+    align-items: center;
+    gap: var(--spacing-sm);
+    margin-bottom: var(--spacing-sm);
+    font-weight: var(--font-normal);
+    cursor: pointer;
+    display: flex;
+
+    & > input {
+      flex-shrink: 0;
+      margin-top: 0;
+    }
+  }
+
+  label:has( > input:disabled), label[aria-disabled="true"] {
+    cursor: not-allowed;
+    opacity: var(--disabled-opacity);
+  }
+
+  input[type="checkbox"][role="switch"] {
+    width: var(--switch-width);
+    height: var(--switch-height);
+    border-radius: var(--radius-full);
+    background-color: var(--muted-foreground);
+    border-color: var(--muted-foreground);
+    transition: background-color var(--transition-default);
+    position: relative;
+  }
+
+  input[type="checkbox"][role="switch"]:before {
+    content: "";
+    width: var(--switch-thumb);
+    height: var(--switch-thumb);
+    background-color: var(--background);
+    border-radius: var(--radius-full);
+    transition: transform var(--transition-default);
+    margin: auto 0;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 1px;
+  }
+
+  input[type="checkbox"][role="switch"]:checked:after {
+    display: none;
+  }
+
+  input[type="checkbox"][role="switch"]:checked {
+    background-color: var(--primary);
+    border-color: var(--primary);
+  }
+
+  input[type="checkbox"][role="switch"]:checked:before {
+    transform: translateX(calc(var(--switch-width)  - var(--switch-thumb)  - 2 * var(--border-width)  - 2px));
+  }
+
+  input[type="checkbox"][role="switch"]:focus-visible {
+    box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in oklch, var(--ring) var(--focus-ring-opacity), transparent);
+  }
+
+  input[type="range"] {
+    cursor: pointer;
+    appearance: none;
+    background: none;
+    width: 100%;
+    height: 1.5rem;
+    padding: 0;
+  }
+
+  input[type="range"]::-webkit-slider-runnable-track {
+    background-color: var(--muted);
+    border-radius: var(--radius-full);
+    width: 100%;
+    height: .5rem;
+    transition: background-color var(--transition-default);
+  }
+
+  input[type="range"]::-moz-range-track {
+    background-color: var(--muted);
+    border-radius: var(--radius-full);
+    width: 100%;
+    height: .5rem;
+    transition: background-color var(--transition-default);
+  }
+
+  input[type="range"]::-webkit-slider-thumb {
+    width: var(--control-size);
+    height: var(--control-size);
+    margin-top: calc((.5rem - var(--control-size)) / 2);
+    background-color: var(--foreground);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    appearance: none;
+    transition: background-color var(--transition-default), transform var(--transition-default);
+    border: none;
+  }
+
+  input[type="range"]::-moz-range-thumb {
+    width: var(--control-size);
+    height: var(--control-size);
+    background-color: var(--foreground);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: background-color var(--transition-default), transform var(--transition-default);
+    border: none;
+  }
+
+  input[type="range"]:hover::-webkit-slider-thumb {
+    background-color: var(--primary);
+    transform: scale(1.1);
+  }
+
+  input[type="range"]:hover::-moz-range-thumb {
+    background-color: var(--primary);
+    transform: scale(1.1);
+  }
+
+  input[type="range"]:active::-webkit-slider-thumb {
+    background-color: var(--primary);
+    transform: scale(1.15);
+  }
+
+  input[type="range"]:active::-moz-range-thumb {
+    background-color: var(--primary);
+    transform: scale(1.15);
+  }
+
+  input[type="range"]:focus-visible {
+    outline: none;
+  }
+
+  input[type="range"]:focus-visible::-webkit-slider-thumb {
+    box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in oklch, var(--ring) var(--focus-ring-opacity), transparent);
+  }
+
+  input[type="range"]:focus-visible::-moz-range-thumb {
+    box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in oklch, var(--ring) var(--focus-ring-opacity), transparent);
+  }
+
+  input[type="range"]:disabled {
+    cursor: not-allowed;
+    opacity: var(--disabled-opacity);
+  }
+
+  input[type="range"]:disabled::-webkit-slider-thumb {
+    cursor: not-allowed;
+  }
+
+  input[type="range"]:disabled::-moz-range-thumb {
+    cursor: not-allowed;
+  }
+
+  label:has( > input[type="range"]) {
+    display: block;
+
+    & > input[type="range"] {
+      margin-top: var(--spacing-sm);
+    }
+  }
+
+  input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
+    border-color: var(--destructive);
+  }
+
+  input[aria-invalid="false"], textarea[aria-invalid="false"], select[aria-invalid="false"] {
+    border-color: var(--primary);
+  }
+
+  input[aria-invalid="true"] + small, textarea[aria-invalid="true"] + small, select[aria-invalid="true"] + small, input[aria-invalid="true"] ~ small, textarea[aria-invalid="true"] ~ small, select[aria-invalid="true"] ~ small {
+    color: var(--destructive);
+  }
+
+  input[aria-invalid="false"] + small, textarea[aria-invalid="false"] + small, select[aria-invalid="false"] + small, input[aria-invalid="false"] ~ small, textarea[aria-invalid="false"] ~ small, select[aria-invalid="false"] ~ small {
+    color: var(--primary);
+  }
+
+  input[type="checkbox"][aria-invalid="true"], input[type="radio"][aria-invalid="true"] {
+    border-color: var(--destructive);
+  }
+
+  input[type="checkbox"][aria-invalid="false"], input[type="radio"][aria-invalid="false"] {
+    border-color: var(--primary);
+  }
+
+  input:user-invalid:not([type="checkbox"]):not([type="radio"]), textarea:user-invalid {
+    border-color: var(--destructive);
+  }
+
+  input:user-valid:not(:placeholder-shown):not([type="checkbox"]):not([type="radio"]), textarea:user-valid:not(:placeholder-shown) {
+    border-color: var(--primary);
+  }
+
+  label:has( + input:required):after, label:has( + textarea:required):after, label:has( + select:required):after, label:has( > input:required):after, label:has( > textarea:required):after, label:has( > select:required):after {
+    content: " *";
+    color: var(--destructive);
+  }
+
+  details.dropdown[aria-invalid="true"] > summary {
+    border-color: var(--destructive);
+  }
+
+  details.dropdown[aria-invalid="false"] > summary {
+    border-color: var(--primary);
+  }
+}
+
+@layer components {
+  :is(button, [type="submit"], [type="reset"], [type="button"], [role="button"]) {
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-sm);
+    height: var(--button-height);
+    padding: var(--spacing-sm) var(--spacing);
+    font-family: inherit;
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    line-height: calc(var(--button-height)  - 2 * var(--border-width)  - 2 * var(--spacing-sm));
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+    border: var(--border-width) solid transparent;
+    border-radius: var(--button-radius);
+    transition: color var(--transition-default), background-color var(--transition-default), border-color var(--transition-default), box-shadow var(--transition-default);
+    color: var(--primary-foreground);
+    background-color: var(--primary);
+    box-shadow: var(--button-shadow);
+    text-decoration: none;
+    display: inline-flex;
+
+    &:hover {
+      background-color: color-mix(in oklch, var(--primary) var(--hover-opacity), transparent);
+    }
+
+    &:active {
+      background-color: color-mix(in oklch, var(--primary) var(--active-opacity), transparent);
+    }
+
+    &:focus-visible {
+      box-shadow: var(--button-shadow), 0 0 0 var(--focus-ring-width) color-mix(in oklch, var(--ring) var(--focus-ring-opacity), transparent);
+      outline: none;
+    }
+
+    &:disabled, &[aria-disabled="true"] {
+      pointer-events: none;
+      opacity: var(--disabled-opacity);
+      cursor: not-allowed;
+    }
+
+    & > svg {
+      width: var(--icon-size);
+      height: var(--icon-size);
+      flex-shrink: 0;
+    }
+  }
+
+  [type="reset"] {
+    color: var(--foreground);
+    background-color: var(--accent);
+
+    &:hover {
+      background-color: color-mix(in oklch, var(--accent) 80%, var(--foreground) 5%);
+    }
+  }
+
+  a[role="button"] {
+    text-decoration: none;
+  }
+
+  :is(button, [type="submit"], [type="button"], [role="button"]).secondary {
+    color: var(--foreground);
+    background-color: var(--accent);
+
+    &:hover {
+      background-color: color-mix(in oklch, var(--accent) 80%, var(--foreground) 5%);
+    }
+
+    &:active {
+      background-color: color-mix(in oklch, var(--accent) 70%, var(--foreground) 10%);
+    }
+  }
+
+  :is(button, [role="button"]).destructive {
+    color: var(--destructive-foreground);
+    background-color: var(--destructive);
+
+    &:hover {
+      background-color: color-mix(in oklch, var(--destructive) var(--hover-opacity), transparent);
+    }
+
+    &:active {
+      background-color: color-mix(in oklch, var(--destructive) var(--active-opacity), transparent);
+    }
+
+    &:focus-visible {
+      box-shadow: var(--button-shadow), 0 0 0 var(--focus-ring-width) color-mix(in oklch, var(--destructive) var(--focus-ring-opacity), transparent);
+    }
+  }
+
+  :is(button, [type="submit"], [type="button"], [role="button"]).outline {
+    color: var(--primary);
+    background-color: var(--background);
+    border-color: var(--primary);
+
+    &:hover {
+      background-color: var(--primary);
+      color: var(--primary-foreground);
+    }
+
+    &:focus-visible {
+      box-shadow: var(--button-shadow), 0 0 0 var(--focus-ring-width) color-mix(in oklch, var(--primary) var(--focus-ring-opacity), transparent);
+    }
+  }
+
+  :is(button, [role="button"]).outline.secondary {
+    color: var(--foreground);
+    border-color: var(--border);
+
+    &:hover {
+      background-color: var(--accent);
+    }
+  }
+
+  :is(button, [role="button"]).ghost {
+    color: var(--foreground);
+    box-shadow: none;
+    background-color: #0000;
+
+    &:hover {
+      background-color: var(--accent);
+      color: var(--accent-foreground);
+    }
+  }
+
+  :is(button, [role="button"]).link {
+    color: var(--primary);
+    box-shadow: none;
+    text-underline-offset: 4px;
+    background-color: #0000;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  :is(button, [role="button"])[aria-current="true"] {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    border-color: var(--primary);
+
+    &:hover {
+      background-color: color-mix(in oklch, var(--primary) var(--hover-opacity), transparent);
+    }
+  }
+
+  :is(button, [role="button"]).small {
+    height: var(--button-height-sm);
+    padding: var(--spacing-xs) var(--spacing-md);
+    line-height: calc(var(--button-height-sm)  - 2 * var(--border-width)  - 2 * var(--spacing-xs));
+  }
+
+  :is(button, [role="button"]).large {
+    height: var(--button-height-lg);
+    padding: var(--spacing-sm) var(--spacing-xl);
+    line-height: calc(var(--button-height-lg)  - 2 * var(--border-width)  - 2 * var(--spacing-sm));
+  }
+
+  :is(button, [role="button"]).icon {
+    width: var(--button-height);
+    padding: 0;
+  }
+
+  :is(button, [role="button"]).icon.small {
+    width: var(--button-height-sm);
+  }
+
+  :is(button, [role="button"]).icon.large {
+    width: var(--button-height-lg);
+  }
+
+  :is(button, [role="button"]).full-width {
+    width: 100%;
+  }
+
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    margin-bottom: var(--spacing);
+    font-size: var(--text-sm);
+    font-variant-numeric: tabular-nums;
+  }
+
+  thead {
+    border-bottom: var(--border-width) solid var(--border);
+  }
+
+  th {
+    height: 2.5rem;
+    padding: var(--spacing-sm);
+    font-weight: var(--font-medium);
+    text-align: left;
+    color: var(--muted-foreground);
+    background-color: #0000;
+  }
+
+  tbody tr {
+    border-bottom: var(--border-width) solid var(--border);
+    transition: background-color var(--transition-default);
+  }
+
+  tbody tr:last-child {
+    border-bottom: none;
+  }
+
+  tbody tr:hover {
+    background-color: color-mix(in oklch, var(--muted) 50%, transparent);
+  }
+
+  td {
+    padding: var(--spacing-sm);
+    vertical-align: middle;
+  }
+
+  tfoot {
+    border-top: var(--border-width) solid var(--border);
+  }
+
+  tfoot td, tfoot th {
+    padding: var(--spacing-sm);
+    font-weight: var(--font-medium);
+    color: var(--muted-foreground);
+  }
+
+  table.striped tbody tr:nth-child(odd) {
+    background-color: color-mix(in oklch, var(--muted) 30%, transparent);
+  }
+
+  table.striped tbody tr:nth-child(odd):hover {
+    background-color: color-mix(in oklch, var(--muted) 60%, transparent);
+  }
+
+  caption {
+    padding: var(--spacing-md) 0;
+    font-size: var(--text-sm);
+    color: var(--muted-foreground);
+    text-align: left;
+    caption-side: bottom;
+  }
+
+  figure > table, .overflow-auto > table, figure > table {
+    margin-bottom: 0;
+  }
+
+  th[aria-sort] {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  th[aria-sort]:after {
+    content: "";
+    width: .75em;
+    height: .75em;
+    margin-left: var(--spacing-xs);
+    vertical-align: middle;
+    opacity: .5;
+    display: inline-block;
+  }
+
+  th[aria-sort="ascending"]:after {
+    content: "↑";
+    opacity: 1;
+  }
+
+  th[aria-sort="descending"]:after {
+    content: "↓";
+    opacity: 1;
+  }
+
+  article {
+    padding: var(--spacing-lg);
+    background-color: var(--card);
+    color: var(--card-foreground);
+    border: var(--border-width) solid var(--border);
+    border-radius: var(--card-radius);
+    box-shadow: var(--card-shadow);
+    margin-bottom: var(--spacing);
+  }
+
+  article:last-child {
+    margin-bottom: 0;
+  }
+
+  article > header {
+    margin-bottom: var(--spacing);
+    padding: 0;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  article > header > strong, article > header > h1, article > header > h2, article > header > h3, article > header > h4, article > header > h5, article > header > h6 {
+    margin-bottom: var(--spacing-xs);
+    font-size: var(--text-lg);
+    font-weight: var(--font-semibold);
+    line-height: var(--line-height-sm);
+  }
+
+  article > header > small, article > header > p {
+    color: var(--muted-foreground);
+    font-size: var(--text-sm);
+    margin-bottom: 0;
+  }
+
+  article > footer {
+    margin-top: var(--spacing);
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: 0;
+    display: flex;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  article article {
+    background-color: var(--muted);
+    box-shadow: none;
+    border: none;
+  }
+
+  .grid > article {
+    margin-bottom: 0;
+  }
+
+  a:has( > article) {
+    color: inherit;
+    border-radius: var(--card-radius);
+    transition: box-shadow var(--transition-default);
+    text-decoration: none;
+    display: block;
+
+    &:hover > article {
+      border-color: color-mix(in oklch, var(--border) 80%, var(--foreground));
+    }
+
+    &:focus-visible {
+      outline: var(--outline-width) solid var(--ring);
+      outline-offset: var(--outline-offset);
+    }
+  }
+
+  article[aria-busy="true"] {
+    min-height: 8rem;
+  }
+
+  details {
+    margin-bottom: var(--spacing-sm);
+    border-bottom: var(--border-width) solid var(--border);
+  }
+
+  details:last-child {
+    margin-bottom: 0;
+  }
+
+  summary {
+    padding: var(--spacing) 0;
+    font-weight: var(--font-medium);
+    cursor: pointer;
+    user-select: none;
+    transition: color var(--transition-default);
+    justify-content: space-between;
+    align-items: center;
+    list-style: none;
+    display: flex;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &:after {
+      content: "";
+      width: var(--icon-size);
+      height: var(--icon-size);
+      margin-left: var(--spacing-sm);
+      mask-image: var(--icon-chevron);
+      transition: transform var(--transition-default);
+      background-color: currentColor;
+      flex-shrink: 0;
+      mask-position: center;
+      mask-size: contain;
+      mask-repeat: no-repeat;
+    }
+
+    &:hover {
+      color: var(--primary);
+    }
+
+    &:focus-visible {
+      outline: var(--outline-width) solid var(--ring);
+      outline-offset: var(--outline-offset);
+      border-radius: var(--radius-sm);
+    }
+  }
+
+  details[open] > summary:not([role="button"]) {
+    color: var(--primary);
+  }
+
+  details[open] > summary {
+    &:after {
+      transform: rotate(180deg);
+    }
+  }
+
+  details > :not(summary) {
+    padding-bottom: var(--spacing-md);
+  }
+
+  details > p:last-child {
+    margin-bottom: 0;
+  }
+
+  summary[role="button"] {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacing-sm);
+    width: 100%;
+    height: var(--button-height);
+    padding: var(--spacing-sm) var(--spacing);
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    color: var(--primary-foreground);
+    background-color: var(--primary);
+    border-radius: var(--radius-md);
+    box-shadow: var(--button-shadow);
+    transition: background-color var(--transition-default);
+    display: flex;
+
+    &:hover {
+      background-color: color-mix(in oklch, var(--primary) var(--hover-opacity), transparent);
+    }
+  }
+
+  summary[role="button"].secondary {
+    color: var(--foreground);
+    background-color: var(--accent);
+
+    &:hover {
+      background-color: color-mix(in oklch, var(--accent) 80%, var(--foreground) 5%);
+    }
+  }
+
+  summary[role="button"].outline {
+    color: var(--primary);
+    background-color: var(--background);
+    border: var(--border-width) solid var(--primary);
+
+    &:hover {
+      background-color: var(--primary);
+      color: var(--primary-foreground);
+    }
+  }
+
+  summary[role="button"].destructive {
+    color: var(--destructive-foreground);
+    background-color: var(--destructive);
+
+    &:hover {
+      background-color: color-mix(in oklch, var(--destructive) var(--hover-opacity), transparent);
+    }
+  }
+
+  details:has( > summary[role="button"]) {
+    margin-bottom: var(--spacing);
+    border-bottom: none;
+  }
+
+  details.dropdown {
+    border-bottom: none;
+    margin-bottom: 0;
+    display: inline-block;
+    position: relative;
+  }
+
+  details.dropdown > summary {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacing-sm);
+    height: var(--input-height);
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    color: var(--foreground);
+    background-color: var(--background);
+    border: var(--border-width) solid var(--input);
+    border-radius: var(--dropdown-radius);
+    cursor: pointer;
+    transition: border-color var(--transition-default), background-color var(--transition-default);
+    display: inline-flex;
+
+    &:after {
+      content: "";
+      width: var(--icon-size);
+      height: var(--icon-size);
+      mask-image: var(--icon-chevron);
+      transition: transform var(--transition-default);
+      background-color: currentColor;
+      mask-position: center;
+      mask-size: contain;
+      mask-repeat: no-repeat;
+    }
+
+    &:hover {
+      border-color: var(--ring);
+    }
+  }
+
+  details.dropdown[open] > summary {
+    border-color: var(--ring);
+
+    &:after {
+      transform: rotate(180deg);
+    }
+  }
+
+  details.dropdown > ul {
+    z-index: 50;
+    min-width: 10rem;
+    margin: 0;
+    margin-top: var(--spacing-xs);
+    padding: var(--spacing-xs);
+    background-color: var(--popover);
+    border: var(--border-width) solid var(--border);
+    border-radius: var(--dropdown-radius);
+    box-shadow: var(--dropdown-shadow);
+    opacity: 0;
+    animation: dropdown-in var(--transition-default) forwards;
+    list-style: none;
+    position: absolute;
+    transform: translateY(-.5rem);
+  }
+
+  @keyframes dropdown-in {
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  details.dropdown > ul > li {
+    margin: 0;
+  }
+
+  details.dropdown > ul > li > a, details.dropdown > ul > li > label {
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--text-sm);
+    color: var(--popover-foreground);
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    transition: background-color var(--transition-default);
+    text-decoration: none;
+    display: flex;
+
+    &:hover {
+      background-color: var(--accent);
+      color: var(--accent-foreground);
+    }
+  }
+
+  details.dropdown > ul[dir="rtl"] {
+    text-align: left;
+    direction: ltr;
+    right: 0;
+  }
+
+  details.dropdown > summary[role="button"] {
+    border-color: #0000;
+  }
+
+  details.dropdown > ul label:has(input[type="checkbox"]), details.dropdown > ul label:has(input[type="radio"]) {
+    margin-bottom: 0;
+  }
+
+  dialog {
+    z-index: 100;
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
+    padding: var(--spacing);
+    background-color: #0000;
+    border: none;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    position: fixed;
+    inset: 0;
+    overflow: auto;
+  }
+
+  dialog::backdrop {
+    background-color: var(--modal-overlay);
+    backdrop-filter: blur(4px);
+  }
+
+  dialog:not([open]):not(:popover-open) {
+    display: none;
+  }
+
+  dialog[popover] {
+    margin: auto;
+  }
+
+  dialog[popover]:popover-open {
+    display: flex;
+  }
+
+  dialog > article {
+    width: 100%;
+    max-width: 32rem;
+    max-height: calc(100vh - var(--spacing-xl));
+    padding: var(--spacing-lg);
+    background-color: var(--card);
+    border: var(--border-width) solid var(--border);
+    border-radius: var(--modal-radius);
+    box-shadow: var(--modal-shadow);
+    animation: modal-in var(--transition-slow) var(--ease-default);
+    margin: 0;
+    position: relative;
+    overflow: auto;
+  }
+
+  @keyframes modal-in {
+    from {
+      opacity: 0;
+      transform: scale(.95)translateY(-1rem);
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1)translateY(0);
+    }
+  }
+
+  dialog > article > header {
+    margin-bottom: var(--spacing-sm);
+    padding: 0;
+    display: block;
+  }
+
+  dialog > article > header > p {
+    margin: 0;
+  }
+
+  dialog > article > header > strong, dialog > article > header > p > strong {
+    font-size: var(--text-lg);
+    font-weight: var(--font-semibold);
+    color: var(--foreground);
+  }
+
+  dialog > article > button[aria-label="Close"], dialog > article > header > button[aria-label="Close"], dialog > article > button[rel="prev"], dialog > article > header > button[rel="prev"] {
+    top: var(--spacing);
+    right: var(--spacing);
+    width: 2rem;
+    height: 2rem;
+    color: var(--muted-foreground);
+    border-radius: var(--radius-sm);
+    box-shadow: none;
+    cursor: pointer;
+    transition: background-color var(--transition-default), color var(--transition-default);
+    background-color: #0000;
+    border: none;
+    padding: 0;
+    position: absolute;
+
+    &:hover {
+      background-color: var(--accent);
+      color: var(--accent-foreground);
+    }
+
+    &:before {
+      content: "✕";
+      font-size: var(--text-base);
+    }
+  }
+
+  dialog > article > p, dialog > article > div {
+    margin-bottom: var(--spacing-sm);
+    padding: 0;
+  }
+
+  dialog > article > p:last-child, dialog > article > div:last-child {
+    margin-bottom: 0;
+  }
+
+  dialog > article > footer {
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--spacing-sm);
+    margin-top: var(--spacing-sm);
+    padding: 0;
+    display: flex;
+  }
+
+  html.modal-is-open {
+    pointer-events: none;
+    touch-action: none;
+    overflow: hidden;
+  }
+
+  html.modal-is-open dialog {
+    pointer-events: auto;
+  }
+
+  html.modal-is-opening dialog > article {
+    animation: modal-in var(--transition-slow) var(--ease-default);
+  }
+
+  html.modal-is-closing dialog::backdrop {
+    animation: backdrop-out var(--transition-default) forwards;
+  }
+
+  html.modal-is-closing dialog > article {
+    animation: modal-out var(--transition-default) forwards;
+  }
+
+  @keyframes backdrop-out {
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes modal-out {
+    to {
+      opacity: 0;
+      transform: scale(.95)translateY(-1rem);
+    }
+  }
+
+  nav {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacing);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  nav > ul {
+    align-items: center;
+    gap: var(--spacing-xs);
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+  }
+
+  nav > ul > li {
+    line-height: var(--line-height);
+    margin: 0;
+  }
+
+  nav a {
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    color: var(--muted-foreground);
+    border-radius: var(--radius-md);
+    transition: color var(--transition-default), background-color var(--transition-default);
+    align-items: center;
+    text-decoration: none;
+    display: inline-flex;
+
+    &:hover {
+      color: var(--foreground);
+      background-color: var(--muted);
+    }
+  }
+
+  nav a[aria-current="page"], nav a[aria-current="true"] {
+    color: var(--foreground);
+    background-color: var(--muted);
+  }
+
+  nav strong {
+    font-size: var(--text-lg);
+    font-weight: var(--font-semibold);
+    color: var(--foreground);
+  }
+
+  nav button {
+    height: var(--button-height-sm);
+    font-size: var(--text-sm);
+  }
+
+  nav details.dropdown > summary {
+    height: auto;
+    padding: var(--spacing-sm) var(--spacing-md);
+    color: var(--muted-foreground);
+    background-color: #0000;
+    border: none;
+
+    &:hover {
+      color: var(--foreground);
+      background-color: var(--muted);
+    }
+  }
+
+  nav details.dropdown > ul {
+    right: 0;
+  }
+
+  nav[aria-label="breadcrumb"] > ul {
+    gap: 0;
+  }
+
+  nav[aria-label="breadcrumb"] > ul > li {
+    align-items: center;
+    display: flex;
+  }
+
+  nav[aria-label="breadcrumb"] > ul > li:not(:last-child):after {
+    content: var(--breadcrumb-divider);
+    padding: 0 var(--spacing-sm);
+    color: var(--muted-foreground);
+  }
+
+  nav[aria-label="breadcrumb"] a {
+    padding: var(--spacing-xs) 0;
+    color: var(--muted-foreground);
+    background-color: #0000;
+    border-radius: 0;
+
+    &:hover {
+      color: var(--foreground);
+      background-color: #0000;
+      text-decoration: underline;
+    }
+  }
+
+  nav[aria-label="breadcrumb"] > ul > li:last-child {
+    color: var(--foreground);
+    font-weight: var(--font-medium);
+  }
+
+  @media (width <= 768px) {
+    nav {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    nav > ul {
+      justify-content: center;
+    }
+  }
+
+  progress {
+    width: 100%;
+    height: var(--spacing-sm);
+    margin-bottom: var(--spacing-sm);
+    background-color: var(--muted);
+    border-radius: var(--progress-radius);
+    appearance: none;
+    border: none;
+    display: block;
+    overflow: hidden;
+  }
+
+  progress:last-child {
+    margin-bottom: 0;
+  }
+
+  progress::-webkit-progress-bar {
+    background-color: var(--muted);
+    border-radius: var(--progress-radius);
+  }
+
+  progress::-webkit-progress-value {
+    background-color: var(--primary);
+    border-radius: var(--progress-radius);
+    transition: width var(--transition-slow) var(--ease-default);
+  }
+
+  progress::-moz-progress-bar {
+    background-color: var(--primary);
+    border-radius: var(--progress-radius);
+  }
+
+  progress:not([value]) {
+    background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 40%, var(--primary) 50%, var(--muted) 60%, var(--muted) 100%);
+    background-size: 200% 100%;
+    animation: 1.5s linear infinite progress-indeterminate;
+    position: relative;
+  }
+
+  progress:not([value])::-webkit-progress-bar {
+    background: none;
+  }
+
+  progress:not([value])::-moz-progress-bar {
+    background: none;
+  }
+
+  @keyframes progress-indeterminate {
+    0% {
+      background-position: 200% 0;
+    }
+
+    100% {
+      background-position: -200% 0;
+    }
+  }
+
+  progress.secondary::-webkit-progress-value {
+    background-color: var(--muted-foreground);
+  }
+
+  progress.secondary::-moz-progress-bar {
+    background-color: var(--muted-foreground);
+  }
+
+  progress.secondary:not([value]) {
+    background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 40%, var(--muted-foreground) 50%, var(--muted) 60%, var(--muted) 100%);
+    background-size: 200% 100%;
+  }
+
+  progress.success::-webkit-progress-value {
+    background-color: var(--success);
+  }
+
+  progress.success::-moz-progress-bar {
+    background-color: var(--success);
+  }
+
+  progress.success:not([value]) {
+    background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 40%, var(--success) 50%, var(--muted) 60%, var(--muted) 100%);
+    background-size: 200% 100%;
+  }
+
+  progress.warning::-webkit-progress-value {
+    background-color: var(--warning);
+  }
+
+  progress.warning::-moz-progress-bar {
+    background-color: var(--warning);
+  }
+
+  progress.warning:not([value]) {
+    background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 40%, var(--warning) 50%, var(--muted) 60%, var(--muted) 100%);
+    background-size: 200% 100%;
+  }
+
+  progress.destructive::-webkit-progress-value {
+    background-color: var(--destructive);
+  }
+
+  progress.destructive::-moz-progress-bar {
+    background-color: var(--destructive);
+  }
+
+  progress.destructive:not([value]) {
+    background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 40%, var(--destructive) 50%, var(--muted) 60%, var(--muted) 100%);
+    background-size: 200% 100%;
+  }
+
+  label:has( > progress) {
+    display: block;
+
+    & > progress {
+      margin-top: var(--spacing-sm);
+    }
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  [aria-busy="true"] {
+    pointer-events: none;
+    position: relative;
+  }
+
+  [aria-busy="true"]:empty:before, button[aria-busy="true"]:not(:has(*)):before {
+    content: "";
+    width: 1.5rem;
+    height: 1.5rem;
+    margin: var(--spacing) auto;
+    border: 2px solid var(--muted);
+    border-top-color: var(--primary);
+    border-radius: var(--radius-full);
+    animation: .75s linear infinite spin;
+    display: block;
+  }
+
+  [aria-busy="true"]:not(:empty):before {
+    content: "";
+    width: 1rem;
+    height: 1rem;
+    margin-right: var(--spacing-sm);
+    vertical-align: middle;
+    border-radius: var(--radius-full);
+    opacity: .7;
+    border: 2px solid;
+    border-top-color: #0000;
+    animation: .75s linear infinite spin;
+    display: inline-block;
+  }
+
+  button[aria-busy="true"] {
+    cursor: wait;
+    opacity: .8;
+  }
+
+  button[aria-busy="true"]:before {
+    width: 1rem;
+    height: 1rem;
+    margin-right: var(--spacing-sm);
+    border-width: 2px;
+  }
+
+  button[aria-busy="true"][aria-label]:before {
+    margin-right: 0;
+  }
+
+  article[aria-busy="true"] {
+    justify-content: center;
+    align-items: center;
+    min-height: 10rem;
+    display: flex;
+  }
+
+  article[aria-busy="true"]:before {
+    border-width: 3px;
+    width: 2rem;
+    height: 2rem;
+    margin: 0;
+  }
+
+  span[aria-busy="true"]:before, p[aria-busy="true"]:before {
+    width: .875rem;
+    height: .875rem;
+  }
+
+  tr[aria-busy="true"] {
+    opacity: .5;
+  }
+
+  form[aria-busy="true"] {
+    opacity: .7;
+  }
+
+  form[aria-busy="true"]:before {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  [data-tooltip] {
+    cursor: help;
+    position: relative;
+  }
+
+  [data-tooltip]:before {
+    content: attr(data-tooltip);
+    z-index: 50;
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--text-xs);
+    font-weight: var(--font-medium);
+    line-height: var(--line-height-sm);
+    color: var(--background);
+    background-color: var(--foreground);
+    border-radius: var(--tooltip-radius);
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity var(--transition-fast) var(--ease-default);
+    position: absolute;
+  }
+
+  [data-tooltip]:not([data-placement]):before, [data-tooltip][data-placement="top"]:before {
+    margin-bottom: var(--spacing-sm);
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  [data-tooltip][data-placement="bottom"]:before {
+    margin-top: var(--spacing-sm);
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  [data-tooltip][data-placement="left"]:before {
+    margin-right: var(--spacing-sm);
+    top: 50%;
+    right: 100%;
+    transform: translateY(-50%);
+  }
+
+  [data-tooltip][data-placement="right"]:before {
+    margin-left: var(--spacing-sm);
+    top: 50%;
+    left: 100%;
+    transform: translateY(-50%);
+  }
+
+  [data-tooltip]:hover:before, [data-tooltip]:focus-visible:before {
+    opacity: 1;
+  }
+
+  button[data-tooltip], a[data-tooltip] {
+    cursor: pointer;
+  }
+
+  [role="group"] {
+    border-radius: var(--radius-md);
+    display: inline-flex;
+  }
+
+  [role="group"] > * {
+    flex: auto;
+  }
+
+  [role="group"] > :not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+
+  [role="group"] > :first-child:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  [role="group"] > :last-child:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  [role="group"] > button:not(:first-child), [role="group"] > [type="submit"]:not(:first-child), [role="group"] > [type="button"]:not(:first-child), [role="group"] > [role="button"]:not(:first-child) {
+    margin-left: calc(var(--border-width) * -1);
+  }
+
+  [role="group"] > button[aria-current="true"], [role="group"] > [role="button"][aria-current="true"] {
+    z-index: 1;
+  }
+
+  [role="group"] > input, [role="group"] > select {
+    flex: auto;
+  }
+
+  [role="group"] > input:not(:first-child), [role="group"] > select:not(:first-child) {
+    margin-left: calc(var(--border-width) * -1);
+  }
+
+  [role="group"] > :focus-visible {
+    z-index: 2;
+  }
+
+  fieldset[role="group"] {
+    border: none;
+    width: 100%;
+    padding: 0;
+    display: flex;
+  }
+
+  [role="group"] > :is(button, [type="submit"], [type="reset"], [type="button"]) {
+    flex: none;
+    width: auto;
+  }
+
+  [role="search"] {
+    display: flex;
+  }
+
+  [role="search"] > input[type="search"] {
+    flex: auto;
+  }
+
+  [role="search"] > input[type="search"]:not(:only-child) {
+    border-radius: var(--radius-full) 0 0 var(--radius-full);
+  }
+
+  [role="search"] > [type="submit"], [role="search"] > button {
+    border-radius: 0 var(--radius-full) var(--radius-full) 0;
+    margin-left: calc(var(--border-width) * -1);
+  }
+
+  [role="group"].full-width {
+    width: 100%;
+    display: flex;
+  }
+
+  [role="group"].vertical {
+    flex-direction: column;
+  }
+
+  [role="group"].vertical > :not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+
+  [role="group"].vertical > :first-child:not(:last-child) {
+    border-radius: var(--radius-md) var(--radius-md) 0 0;
+  }
+
+  [role="group"].vertical > :last-child:not(:first-child) {
+    border-radius: 0 0 var(--radius-md) var(--radius-md);
+  }
+
+  [role="group"].vertical > :not(:first-child) {
+    margin-left: 0;
+    margin-top: calc(var(--border-width) * -1);
+  }
+
+  .badge {
+    align-items: center;
+    gap: var(--spacing-xs);
+    padding: var(--spacing-xs) var(--spacing-sm);
+    font-size: var(--text-xs);
+    font-weight: var(--font-medium);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    border: var(--border-width) solid transparent;
+    border-radius: var(--badge-radius);
+    color: var(--primary-foreground);
+    background-color: var(--primary);
+    line-height: 1;
+    display: inline-flex;
+  }
+
+  .badge.secondary {
+    color: var(--foreground);
+    background-color: var(--accent);
+  }
+
+  .badge.destructive {
+    color: var(--destructive-foreground);
+    background-color: var(--destructive);
+  }
+
+  .badge.success {
+    color: var(--success-foreground);
+    background-color: var(--success);
+  }
+
+  .badge.warning {
+    color: var(--warning-foreground);
+    background-color: var(--warning);
+  }
+
+  .badge.outline {
+    color: var(--primary);
+    border-color: var(--primary);
+    background-color: #0000;
+  }
+
+  .badge.outline.secondary {
+    color: var(--foreground);
+    border-color: var(--border);
+  }
+
+  .badge.outline.destructive {
+    color: var(--destructive);
+    border-color: var(--destructive);
+  }
+
+  .badge.outline.success {
+    color: var(--success);
+    border-color: var(--success);
+  }
+
+  .badge.outline.warning {
+    color: var(--warning);
+    border-color: var(--warning);
+  }
+
+  .badge.small {
+    padding: 0 var(--spacing-xs);
+  }
+
+  .badge.large {
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+
+  main > aside.sidebar {
+    background-color: var(--muted);
+    color: inherit;
+    padding: var(--spacing-lg);
+    border: none;
+  }
+
+  @media (width >= 768px) {
+    main > aside.sidebar {
+      width: var(--aside-width);
+      z-index: 10;
+      height: 100dvh;
+      display: block;
+      position: fixed;
+      inset: 0 auto 0 0;
+      overflow-y: auto;
+    }
+
+    body:has( > main > aside.sidebar) {
+      padding-left: var(--aside-width);
+    }
+
+    main:has( > aside.sidebar) {
+      display: block;
+    }
+  }
+
+  @media (width <= 767.98px) {
+    main > aside.sidebar {
+      display: none;
+    }
+
+    main > aside.sidebar[popover]:popover-open {
+      width: min(var(--aside-width), 85vw);
+      z-index: 100;
+      height: 100dvh;
+      transition: transform var(--transition-slow) var(--ease-default), overlay var(--transition-slow) var(--ease-default) allow-discrete, display var(--transition-slow) var(--ease-default) allow-discrete;
+      display: block;
+      position: fixed;
+      inset: 0 auto 0 0;
+      overflow-y: auto;
+      transform: translateX(0);
+    }
+
+    main > aside.sidebar[popover]::backdrop {
+      background-color: var(--modal-overlay);
+      backdrop-filter: blur(4px);
+    }
+
+    @starting-style {
+      main > aside.sidebar[popover]:popover-open {
+        transform: translateX(-100%);
+      }
+    }
+  }
+
+  main > aside.sidebar > nav {
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-sm);
+    flex-flow: column;
+    display: flex;
+  }
+
+  main > aside.sidebar > nav > ul {
+    align-items: stretch;
+    gap: var(--spacing-xs);
+    flex-flow: column;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+  }
+
+  main > aside.sidebar > nav > ul > li {
+    margin: 0;
+  }
+
+  main > aside.sidebar > nav > ul > li > strong {
+    padding: var(--spacing-sm) var(--spacing);
+    margin-top: var(--spacing);
+    font-size: var(--text-xs);
+    font-weight: var(--font-semibold);
+    color: var(--muted-foreground);
+    text-transform: uppercase;
+    letter-spacing: .05em;
+    display: block;
+  }
+
+  main > aside.sidebar > nav > ul > li:first-child > strong {
+    margin-top: 0;
+  }
+
+  main > aside.sidebar > nav > ul > li > a {
+    align-items: center;
+    gap: var(--spacing-sm);
+    width: 100%;
+    padding: var(--spacing-sm) var(--spacing);
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    color: var(--foreground);
+    border-radius: var(--radius-md);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: background-color var(--transition-default), color var(--transition-default);
+    text-decoration: none;
+    display: flex;
+    overflow: hidden;
+  }
+
+  main > aside.sidebar > nav > ul > li > a:hover, main > aside.sidebar > nav > ul > li > a[aria-current="page"], main > aside.sidebar > nav > ul > li > a[aria-current="true"] {
+    background-color: color-mix(in oklch, var(--muted) 88%, var(--foreground));
+    color: var(--foreground);
+  }
+
+  @media (width >= 768px) {
+    .sidebar-toggle, li:has( > .sidebar-toggle) {
+      display: none;
+    }
+  }
+}
+
+@layer utilities {
+  a.secondary {
+    color: var(--muted-foreground);
+
+    &:hover {
+      color: var(--foreground);
+    }
+  }
+
+  .muted {
+    color: var(--muted-foreground);
+  }
+
+  :where(:not(.badge):not(button):not([role="button"]):not(progress)).primary {
+    color: var(--primary);
+  }
+
+  :where(:not(.badge):not(button):not([role="button"]):not(progress)).destructive {
+    color: var(--destructive);
+  }
+
+  :where(:not(.badge):not(button):not([role="button"]):not(progress)).success {
+    color: var(--success);
+  }
+
+  :where(:not(.badge):not(button):not([role="button"]):not(progress)).warning {
+    color: var(--warning);
+  }
+
+  .sr-only {
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  .hidden {
+    display: none !important;
+  }
+
+  .invisible {
+    visibility: hidden;
+  }
+
+  .text-left {
+    text-align: left;
+  }
+
+  .text-center {
+    text-align: center;
+  }
+
+  .text-right {
+    text-align: right;
+  }
+
+  .font-normal {
+    font-weight: var(--font-normal);
+  }
+
+  .font-medium {
+    font-weight: var(--font-medium);
+  }
+
+  .font-semibold {
+    font-weight: var(--font-semibold);
+  }
+
+  .font-bold {
+    font-weight: var(--font-bold);
+  }
+
+  .text-xs {
+    font-size: var(--text-xs);
+  }
+
+  .text-sm {
+    font-size: var(--text-sm);
+  }
+
+  .text-base {
+    font-size: var(--text-base);
+  }
+
+  .text-lg {
+    font-size: var(--text-lg);
+  }
+
+  .text-xl {
+    font-size: var(--text-xl);
+  }
+
+  .text-2xl {
+    font-size: var(--text-2xl);
+  }
+
+  .text-3xl {
+    font-size: var(--text-3xl);
+  }
+
+  .text-4xl {
+    font-size: var(--text-4xl);
+  }
+
+  .sticky {
+    z-index: 40;
+    background-color: var(--background);
+    border-bottom: var(--border-width) solid var(--border);
+    position: sticky;
+    top: 0;
+  }
+
+  .flex {
+    display: flex;
+  }
+
+  .flex-col {
+    flex-direction: column;
+  }
+
+  .items-center {
+    align-items: center;
+  }
+
+  .justify-center {
+    justify-content: center;
+  }
+
+  .justify-between {
+    justify-content: space-between;
+  }
+
+  .justify-end {
+    justify-content: flex-end;
+  }
+
+  .gap-2 {
+    gap: var(--spacing-sm);
+  }
+
+  .gap-4 {
+    gap: var(--spacing);
+  }
+
+  .w-full {
+    width: 100%;
+  }
+
+  .m-0 {
+    margin: 0;
+  }
+
+  .mx-auto {
+    margin-inline: auto;
+  }
+
+  .mt-4 {
+    margin-top: var(--spacing);
+  }
+
+  .mb-4 {
+    margin-bottom: var(--spacing);
+  }
+
+  .my-4 {
+    margin-top: var(--spacing);
+    margin-bottom: var(--spacing);
+  }
+
+  .p-0 {
+    padding: 0;
+  }
+
+  .p-4 {
+    padding: var(--spacing);
+  }
+
+  .p-6 {
+    padding: var(--spacing-lg);
+  }
+
+  .overflow-auto {
+    overflow: auto;
+  }
+
+  .overflow-hidden {
+    overflow: hidden;
+  }
+
+  .truncate {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .rounded-none {
+    border-radius: 0;
+  }
+
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
+
+  .rounded {
+    border-radius: var(--radius-md);
+  }
+
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
+
+  .rounded-xl {
+    border-radius: var(--radius-xl);
+  }
+
+  .rounded-full {
+    border-radius: var(--radius-full);
+  }
+
+  .border {
+    border: var(--border-width) solid var(--border);
+  }
+
+  .border-none {
+    border: none;
+  }
+
+  .bg-muted {
+    background-color: var(--muted);
+  }
+
+  .bg-card {
+    background-color: var(--card);
+  }
+
+  .bg-transparent {
+    background-color: #0000;
+  }
+
+  .shadow-none {
+    box-shadow: none;
+  }
+
+  .shadow-sm, .shadow {
+    box-shadow: var(--shadow-sm);
+  }
+
+  .shadow-md {
+    box-shadow: var(--shadow-md);
+  }
+
+  .shadow-lg {
+    box-shadow: var(--shadow-lg);
+  }
+
+  .cursor-pointer {
+    cursor: pointer;
+  }
+
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
+
+  .pointer-events-none {
+    pointer-events: none;
+  }
+
+  .select-none {
+    user-select: none;
+  }
+
+  .transition {
+    transition: all var(--transition-default);
+  }
+
+  .transition-none {
+    transition: none;
+  }
+
+  .animate-spin {
+    animation: 1s linear infinite spin;
+  }
+
+  .animate-pulse {
+    animation: 2s ease-in-out infinite pulse;
+  }
+
+  @keyframes pulse {
+    0%, 100% {
+      opacity: 1;
+    }
+
+    50% {
+      opacity: .5;
+    }
+  }
+
+  @media print {
+    .no-print {
+      display: none !important;
+    }
+  }
+}