/* ── components/about-intro/about-intro.css ── */
/* -- About Intro (website · Company) --------------------------------------
   Introduces an organization's identity, purpose, and background - a split intro with photos and key facts, a centered mission statement, or the values behind it. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-about-intro, .mk-about-intro *, .mk-about-intro ::before, .mk-about-intro ::after) { box-sizing: border-box; }

  .mk-about-intro { container: mk-about-intro / inline-size; width: 100%; }
  .mk-about-intro-layout { display: grid; gap: 2.5rem; align-items: center; }
  .mk-about-intro-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .mk-about-intro-eyebrow { color: var(--primary); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
  .mk-about-intro-title { margin: 0; font-size: clamp(1.875rem, 4.5cqi, 3rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
  .mk-about-intro-lead { margin: 0; max-width: 40rem; color: var(--muted-foreground); font-size: 1.125rem; line-height: 1.6; text-wrap: pretty; }

  .mk-about-intro-media {
    display: grid;
    grid-template-columns: 3fr 2fr;
    align-items: start;
    gap: 0.75rem;
    margin: 0;

    & img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-xl); background: var(--muted); }
    & img:last-child { margin-block-start: 3rem; }
  }

  .mk-about-intro-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 1.5rem;
    width: 100%;
    margin: 0.5rem 0 0;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--border);

    & div { display: flex; flex-direction: column-reverse; gap: 0.125rem; }
    & dt { color: var(--muted-foreground); font-size: 0.875rem; }
    & dd { margin: 0; font-size: 1.875rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  }

  /* statement: one centered sentence in the serif face */
  .mk-about-intro[data-variant="statement"] {
    & .mk-about-intro-copy { align-items: center; max-width: 56rem; margin-inline: auto; text-align: center; }
    & .mk-about-intro-title { font-family: var(--font-serif); font-size: clamp(1.75rem, 4cqi, 2.75rem); font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; }
    & .mk-about-intro-title em { color: var(--primary); }
  }
  .mk-about-intro-signature { display: flex; align-items: center; gap: 0.75rem; text-align: start; font-size: 0.875rem;
    & strong { display: block; font-weight: 600; }
    & span { color: var(--muted-foreground); }
  }

  /* values: icon cards */
  .mk-about-intro-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
    gap: 1rem;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;

    & li { display: grid; gap: 0.5rem; align-content: start; padding: 1.25rem; border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground); }
    & svg { width: 1.5rem; height: 1.5rem; color: var(--primary); }
    & h3 { margin: 0.25rem 0 0; font-size: 1.0625rem; font-weight: 600; }
    & p { margin: 0; color: var(--muted-foreground); font-size: 0.9375rem; text-wrap: pretty; }
  }

  @container mk-about-intro (min-width: 48rem) {
    .mk-about-intro-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 4rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-about-intro-values li { border-color: CanvasText; }
  }
}

/* ── components/accordion/accordion.css ── */
/* -- Accordion component --------------------------------------- */

@layer components {
  .accordion {
    display: flex;
    flex-direction: column;
  }

  .accordion-item {
    border-bottom: 1px solid var(--border);

    &:last-child { border-bottom: none; }

    /* -- Content animation (CSS-only) -------------------------
       Two gotchas, both required for the panel to glide:
       1. `::details-content` must attach to the compound (`&::details-content`,
          NOT `& ::details-content` - the descendant form never matches, the
          pseudo's originating element is the subject itself).
       2. `block-size: auto` is a keyword - without interpolate-size the
          0→auto pair is non-interpolable and the transition silently snaps. */
    &::details-content {
      block-size: 0;
      overflow-y: clip;
      interpolate-size: allow-keywords;
      transition: block-size 200ms ease, content-visibility 200ms allow-discrete;
    }

    &[open]::details-content {
      block-size: auto;
    }
  }

  @starting-style {
    .accordion-item[open]::details-content {
      block-size: 0;
    }
  }

  /* Remove default details marker */
  .accordion-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem 0;
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: start;
    cursor: pointer;
    list-style: none;
    color: inherit;
    transition: color 150ms;

    &::-webkit-details-marker { display: none; }
    &::marker { content: ''; }
    &:hover { text-decoration: underline; }
  }

  /* Chevron rotation */
  .accordion-chevron {
    margin-inline-start: auto;
    color: color-mix(in oklch, currentColor 60%, transparent);
    transition: transform 200ms ease;
    flex-shrink: 0;

    details[open] > .accordion-trigger & {
      transform: rotate(180deg);
    }
  }

  /* Content */
  .accordion-content {
    padding-bottom: 1rem;
    font-size: 0.875rem;
    line-height: 1.7;
    color: color-mix(in oklch, currentColor 72%, transparent);
    overflow: hidden;

    & p { margin: 0; }
  }

  /* -- Surfaces (data-variant on the .accordion) -----------------------
     bordered: one box, items divided · separated: every item its own card
     · muted / primary / neutral: separated items on that surface ·
     highlight: separated, the open item turns primary · ghost: no
     dividers. Boxed variants pad the text inside and swap the underline
     hover for a tint. The item's text color flows into the heading, the
     marker and the content, so custom colors (style on an item) just work. */
  .accordion {
    color: var(--foreground);

    &[data-variant="bordered"] {
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }
    &:is([data-variant="separated"], [data-variant="muted"], [data-variant="primary"], [data-variant="neutral"], [data-variant="highlight"]) {
      gap: 0.5rem;

      & > .accordion-item {
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        overflow: hidden;
      }
    }
    &[data-variant="muted"] > .accordion-item { background-color: var(--muted); border-color: transparent; }
    &[data-variant="primary"] > .accordion-item { background-color: var(--primary); color: var(--primary-foreground); border-color: transparent; }
    &[data-variant="neutral"] > .accordion-item {
      background-color: color-mix(in oklch, var(--foreground) 78%, var(--background));
      color: var(--background);
      border-color: transparent;
    }
    &[data-variant="highlight"] > .accordion-item {
      transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;

      &[open] { background-color: var(--primary); color: var(--primary-foreground); border-color: transparent; }
    }
    &[data-variant="ghost"] > .accordion-item { border-bottom-color: transparent; }

    /* boxed: text inset, tint on hover */
    &:is([data-variant="bordered"], [data-variant="separated"], [data-variant="muted"], [data-variant="primary"], [data-variant="neutral"], [data-variant="highlight"]) {
      & .accordion-trigger {
        padding-inline: 1rem;

        &:hover { text-decoration: none; background-color: color-mix(in oklch, currentColor 7%, transparent); }
      }
      & .accordion-content { padding-inline: 1rem; }
    }

    /* -- Sizes: the headings' scale and weight (md == default) ---------- */
    &[data-size="sm"] .accordion-trigger { font-size: 0.8125rem; }
    &[data-size="md"] .accordion-trigger { font-size: 0.9375rem; }
    &[data-size="lg"] .accordion-trigger { font-size: 1.0625rem; font-weight: 600; }
    &[data-size="xl"] .accordion-trigger { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
  }

  /* -- Leading icon / emoji ------------------------------------------- */
  .accordion-icon {
    display: inline-grid;
    place-items: center;
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
    font-style: normal;
    line-height: 1;

    & svg { width: 1em; height: 1em; }
  }

  /* -- Markers: data-marker="arrow" / "plus" on the .accordion draws the
     open/close sign (no icon markup); data-marker-position="start" puts it
     before the heading. Own glyphs: .accordion-chevron (180°, or 90° with
     data-turn="quarter" - mirrored in RTL) or two elements
     .accordion-when-closed / .accordion-when-open. */
  .accordion:is([data-marker="arrow"], [data-marker="plus"]) .accordion-trigger::after {
    content: '';
    flex-shrink: 0;
    margin-inline-start: auto;
    color: color-mix(in oklch, currentColor 65%, transparent);
    transition: rotate 200ms ease, translate 200ms ease, background-size 200ms ease;
  }
  .accordion[data-marker="arrow"] .accordion-trigger::after {
    width: 0.45em;
    height: 0.45em;
    margin-inline-end: 0.2em;
    /* physical: a down / up arrow is the same in RTL */
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    rotate: 45deg;
    translate: 0 -0.15em;
  }
  .accordion[data-marker="arrow"] .accordion-item[open] > .accordion-trigger::after {
    rotate: -135deg;
    translate: 0 0.1em;
  }
  .accordion[data-marker="plus"] .accordion-trigger::after {
    width: 0.8em;
    height: 0.8em;
    background:
      linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
      linear-gradient(currentColor 0 0) center / 2px 100% no-repeat;
  }
  .accordion[data-marker="plus"] .accordion-item[open] > .accordion-trigger::after {
    background-size: 100% 2px, 2px 0;
    rotate: 180deg;
  }
  .accordion[data-marker-position="start"] .accordion-trigger::after {
    order: -1;
    margin-inline-start: 0;
    margin-inline-end: 0.25em;
  }
  .accordion-chevron[data-turn="quarter"] {
    details[open] > .accordion-trigger > & { transform: rotate(90deg); }
    &:dir(rtl) { scale: -1 1; }
    details[open] > .accordion-trigger > &:dir(rtl) { transform: rotate(-90deg); }
  }
  .accordion-item:not([open]) > .accordion-trigger .accordion-when-open,
  .accordion-item[open] > .accordion-trigger .accordion-when-closed { display: none; }
  .accordion-trigger > :is(.accordion-when-open, .accordion-when-closed) { margin-inline-start: auto; }

  /* -- Density ----------------------------------------------------
     data-density on the .accordion root scales trigger + panel padding.
     comfortable (1rem) == the unsized default. Ratio mirrors sizing.css. */
  .accordion:where([data-density="compact"]) {
    & .accordion-trigger { padding: 0.75rem 0; }
    & .accordion-content { padding-bottom: 0.75rem; }
  }
  .accordion:where([data-density="comfortable"]) {
    & .accordion-trigger { padding: 1rem 0; }
    & .accordion-content { padding-bottom: 1rem; }
  }
  .accordion:where([data-density="spacious"]) {
    & .accordion-trigger { padding: 1.25rem 0; }
    & .accordion-content { padding-bottom: 1.25rem; }
  }

}

/* Accessibility: reduced motion suppresses the expand/collapse animation
   (REQUIRED for all components - AGENTS.md "Accessibility CSS"). */
@media (prefers-reduced-motion: reduce) {
  @layer components {
    .accordion-item::details-content { transition: none; }
    .accordion-trigger { transition: none; }
  }
}

/* ── components/active-filters/active-filters.css ── */
/* -- Active Filters (website · Search & Navigation) -----------------------
   Displays applied filters with individual and combined removal actions - one chip per filter that removes it, and "clear all". */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-active-filters, .mk-active-filters *, .mk-active-filters ::before, .mk-active-filters ::after) { box-sizing: border-box; }

  .mk-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; width: 100%;
    & ul { display: contents; }
    & li { list-style: none; }
  }
  .mk-active-filters-chip { display: inline-flex; align-items: center; gap: 0.25rem; height: 1.75rem; padding-inline: 0.625rem 0.375rem; border-radius: 999px; background: var(--muted); color: var(--foreground); font-size: 0.8125rem; font-weight: 500; text-decoration: none;
    & span { color: var(--muted-foreground); font-weight: 400; }
    & svg { width: 0.875rem; height: 0.875rem; padding: 0.0625rem; border-radius: 50%; }
    &:hover svg { background: var(--foreground); color: var(--background); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  }
  .mk-active-filters-clear { margin-inline-start: 0.25rem; color: var(--primary); font-size: 0.8125rem; font-weight: 600; text-decoration: none;
    &:hover { text-decoration: underline; text-underline-offset: 3px; }
  }
  .mk-active-filters-label { color: var(--muted-foreground); font-size: 0.8125rem; font-weight: 600; }
  .mk-active-filters[data-variant="bar"] { padding: 0.625rem 0.875rem; border-radius: var(--radius-lg); background: var(--muted);
    & .mk-active-filters-chip { background: var(--background); box-shadow: var(--shadow-xs); }
    & output { margin-inline-start: auto; color: var(--muted-foreground); font-size: 0.8125rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-active-filters-chip { border: 1px solid CanvasText; }
  }
}

/* ── components/address-form/address-form.css ── */
/* -- Address Form (website · Shop) ----------------------------------------
   Collects a shipping or billing address - the fields every browser can autofill, laid out in a grid, with saved addresses to pick from. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-address-form, .mk-address-form *, .mk-address-form ::before, .mk-address-form ::after) { box-sizing: border-box; }

  .mk-address-form { container: mk-address-form / inline-size; display: grid; gap: 1rem; margin: 0; padding: 0; border: 0; min-width: 0; width: 100%;
    & legend { margin-block-end: 1rem; padding: 0; font-size: 1.0625rem; font-weight: 600; }
  }
  .mk-address-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .mk-address-form-field { display: grid; gap: 0.375rem; align-content: start;
    & .label small { color: var(--muted-foreground); font-weight: 400; }
  }
  .mk-address-form-same { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }

  .mk-address-form-saved { display: grid; gap: 0.625rem; }
  .mk-address-form-option {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.25rem 0.875rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;

    & strong { font-size: 0.9375rem; }
    & address { grid-column: 2; color: var(--muted-foreground); font-size: 0.875rem; font-style: normal; line-height: 1.5; }
    & a { position: relative; z-index: 1; color: var(--primary); font-size: 0.8125rem; font-weight: 600; text-decoration: none; }
    &:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
  }
  .mk-address-form-add { display: inline-flex; align-items: center; gap: 0.375rem; width: fit-content; color: var(--primary); font-size: 0.875rem; font-weight: 600; text-decoration: none;
    & svg { width: 1rem; height: 1rem; }
  }

  @container mk-address-form (min-width: 36rem) {
    .mk-address-form-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .mk-address-form-field { grid-column: span 6; }
    .mk-address-form-field[data-span="2"] { grid-column: span 2; }
    .mk-address-form-field[data-span="3"] { grid-column: span 3; }
    .mk-address-form-field[data-span="4"] { grid-column: span 4; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-address-form-option:has(input:checked) { border-color: Highlight; }
  }
}

/* ── components/alert/alert.css ── */
@layer components {
  .alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    color: var(--foreground);
    background-color: var(--background);

    &[data-variant="destructive"] {
      border-color: var(--destructive);
      color: var(--destructive);

      & .alert-title {
        color: var(--destructive);
      }

      & .alert-description {
        color: var(--destructive);
        opacity: 0.9;
      }

      & .alert-icon {
        color: var(--destructive);
      }
    }
  }

  .alert-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: var(--foreground);
  }

  .alert-content {
    flex: 1;
    min-width: 0;
  }

  /* -- Density --------------------------------------------------
     data-density on the .alert root scales its padding and the icon/content
     gap (ratio 0.75 / 1 / 1.25); comfortable matches the unsized default. */
  .alert:where([data-density="compact"]) {
    padding: 0.75rem 1rem;
    gap: 0.5rem;
  }
  .alert:where([data-density="comfortable"]) {
    padding: 1rem 1.25rem;
    gap: 0.75rem;
  }
  .alert:where([data-density="spacious"]) {
    padding: 1.25rem 1.5rem;
    gap: 1rem;
  }

  .alert-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--foreground);
  }

  .alert-description {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--muted-foreground);
  }

  .alert-action {
    flex-shrink: 0;
    margin-left: auto;
    align-self: center;
  }
}

/* ── components/alert-dialog/alert-dialog.css ── */
@layer components {
  dialog.alert-dialog {
    border: none;
    border-radius: var(--radius-xl);
    background: var(--background);
    color: var(--foreground);
    padding: 0;
    max-width: 28rem;
    width: calc(100% - 2rem);
    box-shadow: var(--shadow-lg);
    margin: auto;
    position: fixed;
    inset: 0;

    /* Entry/exit animation */
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.98);
    transition: opacity 200ms ease, transform 200ms ease, display 200ms allow-discrete;

    &[open] {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    &::backdrop {
      background: oklch(0 0 0 / 0);
      backdrop-filter: blur(0px);
      transition: all 200ms ease, display 200ms allow-discrete;
    }

    &[open]::backdrop {
      background: oklch(0 0 0 / 0.45);
      backdrop-filter: blur(3px);
    }

    /* Block Escape key - user must choose an action */
    &::backdrop {
      pointer-events: auto;
    }
  }

  @starting-style {
    dialog.alert-dialog[open] {
      opacity: 0;
      transform: translateY(-0.5rem) scale(0.98);
    }
    dialog.alert-dialog[open]::backdrop {
      background: oklch(0 0 0 / 0);
      backdrop-filter: blur(0px);
    }
  }

  /* -- Scroll lock ------------------------------------------- */
  /* Page behind stays put while the alert is modal (see dialog.css):
     `:modal` + overflow:hidden freezes the viewport at its current offset. */
  html:has(dialog.alert-dialog:modal) {
    overflow: hidden;
    scrollbar-gutter: stable;
  }

  .alert-dialog-content {
    padding: 1.5rem;
  }

  /* -- Density ------------------------------------------------
     data-density on the .alert-dialog root scales the content padding
     (0.75 / 1 / 1.25 of the 1.5rem default); comfortable matches the
     unsized default. */
  .alert-dialog:where([data-density="compact"]) .alert-dialog-content     { padding: 1rem; }
  .alert-dialog:where([data-density="comfortable"]) .alert-dialog-content { padding: 1.5rem; }
  .alert-dialog:where([data-density="spacious"]) .alert-dialog-content    { padding: 2rem; }

  .alert-dialog-header {
    margin-bottom: 1.25rem;
  }

  .alert-dialog-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
  }

  .alert-dialog-description {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--muted-foreground);
    line-height: 1.5;
  }

  .alert-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
  }
}

/* Accessibility: suppress motion for users who request it (REQUIRED for all
   components - AGENTS.md "Accessibility CSS"). Near-zero duration instead of
   `none` keeps transitionend/animationend (and discrete display flips)
   firing so JS state machines that await them keep working. */
@media (prefers-reduced-motion: reduce) {
  @layer components {
    .alert-dialog,
    .alert-dialog *,
    .alert-dialog::before,
    .alert-dialog::after,
    .alert-dialog *::before,
    .alert-dialog *::after,
    .alert-dialog::backdrop,
    .alert-dialog-content,
    .alert-dialog-content *,
    .alert-dialog-content::before,
    .alert-dialog-content::after,
    .alert-dialog-content *::before,
    .alert-dialog-content *::after,
    .alert-dialog-content::backdrop,
    .alert-dialog-header,
    .alert-dialog-header *,
    .alert-dialog-header::before,
    .alert-dialog-header::after,
    .alert-dialog-header *::before,
    .alert-dialog-header *::after,
    .alert-dialog-header::backdrop,
    .alert-dialog-title,
    .alert-dialog-title *,
    .alert-dialog-title::before,
    .alert-dialog-title::after,
    .alert-dialog-title *::before,
    .alert-dialog-title *::after,
    .alert-dialog-title::backdrop,
    .alert-dialog-description,
    .alert-dialog-description *,
    .alert-dialog-description::before,
    .alert-dialog-description::after,
    .alert-dialog-description *::before,
    .alert-dialog-description *::after,
    .alert-dialog-description::backdrop,
    .alert-dialog-footer,
    .alert-dialog-footer *,
    .alert-dialog-footer::before,
    .alert-dialog-footer::after,
    .alert-dialog-footer *::before,
    .alert-dialog-footer *::after,
    .alert-dialog-footer::backdrop {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

/* ── components/anim-canvas/anim-canvas.css ── */
/* -- Animation Canvas component ----------------------------------
   Chess-board slide canvas: the root is the viewport (overflow hidden),
   JS-created .anim-canvas-board carries the pan/zoom transform, slides are
   absolute cells in board units (--anim-canvas-width/height, literal
   defaults, token-free artboard like presentation). All motion is the shared
   df$.anim engine + one WAAPI board pan; this sheet owns only the surface:
   card-ish slides (allowed tokens), the overview tile affordance, and the
   optional directional chrome. */

@layer components {
  .anim-canvas {
    /* artboard contract - override on the mount for other formats */
    --anim-canvas-width: 1280;
    --anim-canvas-height: 720;
    /* gutter between board cells (board units): separates the overview
       tiles and shows as a seam while the board pans. 0 = flush cells. */
    --anim-canvas-gap: 80;

    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--anim-canvas-width) / var(--anim-canvas-height);
    overflow: hidden;
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    /* the one pan/zoom layer (JS-created; transform-origin pinned so the
       runtime's translate+scale math stays in raw board units) */
    & .anim-canvas-board {
      position: absolute;
      inset: 0;
      transform-origin: 0 0;
      will-change: transform;
    }

    /* a board cell: card surface, separated from its neighbors by the gap
       (radius + shadow appear in overview, where every cell is a tile) */
    & .anim-canvas-slide {
      position: absolute;
      box-sizing: border-box;
      overflow: hidden;
      background: var(--card);
      color: var(--card-foreground);
    }

    /* overview: every slide reads as a clickable tile */
    &[data-overview] .anim-canvas-slide {
      cursor: pointer;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);

      &:hover {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
      }
    }

    /* optional authored chrome: directional + overview buttons
       ([data-anim-canvas-go="east|west|north|south|overview"]) */
    & .anim-canvas-controls {
      position: absolute;
      inset-block-end: 0.75rem;
      inset-inline-end: 0.75rem;
      display: flex;
      align-items: center;
      gap: 0.375rem;
      z-index: 2;
    }

    & .anim-canvas-control {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      inline-size: 2rem;
      block-size: 2rem;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      background: var(--card);
      color: var(--card-foreground);
      cursor: pointer;
      font: inherit;
      line-height: 1;
      transition: background-color 150ms ease;

      &:hover {
        background: var(--accent);
        color: var(--accent-foreground);
      }
      &:disabled {
        opacity: 0.4;
        cursor: default;
      }
    }
  }

  /* accessibility: honor motion + contrast preferences (REQUIRED). The
     engine collapses its own durations and the runtime collapses the board
     pan to 1ms; here the chrome's hover transition flattens. */
  @media (prefers-reduced-motion: reduce) {
    .anim-canvas .anim-canvas-control {
      transition: none;
    }
  }

  @media (prefers-contrast: more) {
    .anim-canvas .anim-canvas-control {
      border-width: 2px;
    }
  }

  @media (forced-colors: active) {
    .anim-canvas {
      border-color: CanvasText;
    }
    .anim-canvas[data-overview] .anim-canvas-slide {
      outline: 1px solid CanvasText;
    }
    .anim-canvas .anim-canvas-control {
      border-color: ButtonBorder;
      color: ButtonText;
      background: ButtonFace;
    }
  }
}

/* ── components/announcement/announcement.css ── */
/* -- Announcement (website · Events & Promotions) -------------------------
   Highlights an important update with an optional link or dismissal - a bar, a filled strip, an inline card or a floating notice. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-announcement, .mk-announcement *, .mk-announcement ::before, .mk-announcement ::after) { box-sizing: border-box; }

  .mk-announcement {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--muted);
    color: var(--foreground);

    &:not([open]) { display: none; }
  }
  .mk-announcement-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.375rem 0.75rem;
    padding: 0.625rem 3rem;
    font-size: 0.875rem;
    text-align: center;

    & > svg { flex: none; width: 1rem; height: 1rem; }
    & p { margin: 0; }
    & a { display: inline-flex; align-items: center; gap: 0.25rem; color: inherit; font-weight: 600; text-underline-offset: 3px; }
    & a svg { width: 0.875rem; height: 0.875rem; }
    & a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: var(--radius-sm); }
  }
  .mk-announcement-close {
    position: absolute;
    top: 50%;
    inset-inline-end: 0.5rem;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;

    & svg { width: 1rem; height: 1rem; }
    &:hover { opacity: 1; background: color-mix(in oklch, currentColor 12%, transparent); }
    &:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 1px; }
  }
  .mk-announcement-tag { padding: 0.0625rem 0.5rem; border-radius: 999px; background: var(--foreground); color: var(--background); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

  .mk-announcement[data-variant="primary"] {
    background: var(--primary);
    color: var(--primary-foreground);

    & .mk-announcement-tag { background: var(--primary-foreground); color: var(--primary); }
  }

  .mk-announcement[data-variant="inline"] {
    border: 1px solid color-mix(in oklab, var(--chart-1) 35%, var(--border));
    border-radius: var(--radius-xl);
    background: color-mix(in oklab, var(--chart-1) 7%, var(--card));

    & .mk-announcement-inner { justify-content: flex-start; padding: 1rem 3.25rem 1rem 1.25rem; text-align: start; }
    & .mk-announcement-inner > svg { color: var(--chart-1); width: 1.25rem; height: 1.25rem; }
    & .mk-announcement-close { top: 0.75rem; translate: none; }
  }

  .mk-announcement[data-variant="floating"] {
    position: fixed;
    inset: auto 1rem 1rem;
    z-index: 40;
    width: auto;
    max-width: 34rem;
    margin-inline: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--popover);
    color: var(--popover-foreground);
    box-shadow: var(--shadow-xl);

    & .mk-announcement-inner { justify-content: flex-start; padding: 0.875rem 3.25rem 0.875rem 1rem; text-align: start; }
  }
  @starting-style {
    .mk-announcement[data-variant="floating"][open] { opacity: 0; translate: 0 1rem; }
  }
  .mk-announcement[data-variant="floating"] { transition: opacity 300ms ease, translate 300ms ease; }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-announcement[data-variant="floating"] { transition: none; }
  }

  @media (forced-colors: active) {
    .mk-announcement { border-block-end: 1px solid CanvasText; }
    .mk-announcement-close { border: 1px solid ButtonText; }
  }
}

/* ── components/application-form/application-form.css ── */
/* -- Application Form (website · Company) ---------------------------------
   Collects candidate details and application documents - grouped fields, a résumé drop zone, links and consent, validated by the browser. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-application-form, .mk-application-form *, .mk-application-form ::before, .mk-application-form ::after) { box-sizing: border-box; }

  .mk-application-form { container: mk-application-form / inline-size; width: 100%; }
  .mk-application-form form { display: grid; gap: 2rem; }
  .mk-application-form-section {
    display: grid;
    gap: 1rem 3rem;
    margin: 0;
    padding: 0 0 2rem;
    border: 0;
    border-block-end: 1px solid var(--border);
    min-width: 0;

    & legend { float: left; width: 100%; padding: 0; }
    & legend + * { clear: both; }
  }
  .mk-application-form-legend { display: grid; gap: 0.25rem;
    & strong { font-size: 1rem; font-weight: 600; }
    & span { color: var(--muted-foreground); font-size: 0.875rem; font-weight: 400; }
  }
  .mk-application-form-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; }
  .mk-application-form-field { display: grid; gap: 0.375rem; align-content: start;
    &[data-span="full"] { grid-column: 1 / -1; }
  }
  .mk-application-form-hint { color: var(--muted-foreground); font-size: 0.8125rem; }
  .mk-application-form-field:has(:user-invalid) .mk-application-form-hint { color: var(--destructive); }

  /* drop zone: the whole label opens the picker */
  .mk-application-form-upload {
    display: grid;
    justify-items: center;
    gap: 0.375rem;
    padding: 1.75rem 1rem;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-lg);
    color: var(--muted-foreground);
    font-size: 0.875rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;

    & svg { width: 1.5rem; height: 1.5rem; color: var(--foreground); }
    & strong { color: var(--foreground); font-weight: 600; }
    & input { width: 100%; max-width: 18rem; font-size: 0.8125rem; }
    &:hover, &:has(input:focus-visible) { border-color: var(--ring); background: color-mix(in oklch, var(--accent) 50%, transparent); }
    &:has(input:user-invalid) { border-color: var(--destructive); }
  }
  .mk-application-form-consent { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.875rem; color: var(--muted-foreground);
    & input { margin-block-start: 0.125rem; }
  }
  .mk-application-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }

  .mk-application-form[data-variant="card"] {
    max-width: 30rem;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);

    & form { gap: 1.25rem; }
    & .mk-application-form-section { grid-template-columns: minmax(0, 1fr); padding-block-end: 1.25rem; }
    & .mk-application-form-fields { grid-template-columns: minmax(0, 1fr); }
  }

  @container mk-application-form (min-width: 48rem) {
    .mk-application-form-section { grid-template-columns: 16rem minmax(0, 1fr); }
    .mk-application-form-section legend { float: none; width: auto; grid-column: 1; }
    .mk-application-form-section legend + * { grid-column: 2; grid-row: 1 / span 9; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-application-form-upload { transition: none; }
  }

  @media (forced-colors: active) {
    .mk-application-form-upload { border-color: CanvasText; }
  }
}

/* ── components/archive-index/archive-index.css ── */
/* -- Archive Index (website) ----------------------------------------
   Links to content grouped by year and month. Each year is a native
   <details> disclosure (name= makes them exclusive), its months a list of
   links with post counts. columns: every year open, side by side. */

@layer components {
  .mk-archive-index {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    box-sizing: border-box;
    width: 100%;
    font-size: 0.875rem;
  }

  .mk-archive-index-title {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-foreground);
  }

  .mk-archive-index-year {
    interpolate-size: allow-keywords;
    border-block-end: 1px solid var(--border);

    &::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size 200ms ease, content-visibility 200ms allow-discrete;
    }
    &[open]::details-content { block-size: auto; }

    & > summary {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding-block: 0.625rem;
      font-weight: 600;
      cursor: pointer;
      list-style: none;

      &::-webkit-details-marker { display: none; }
      &::after {
        content: "";
        width: 0.4375rem;
        height: 0.4375rem;
        margin-inline-start: 0.25rem;
        border-inline-end: 1.5px solid currentColor;
        border-block-end: 1.5px solid currentColor;
        rotate: -45deg;
        opacity: 0.6;
        transition: rotate 200ms ease;
      }
      &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
    }
    &[open] > summary::after { rotate: 45deg; }

    & ul {
      display: flex;
      flex-direction: column;
      margin: 0;
      padding: 0 0 0.5rem;
      list-style: none;
    }

    & li {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    & li a {
      flex: 1;
      padding: 0.3125rem 0.5rem;
      margin-inline-start: -0.5rem;
      border-radius: var(--radius-sm);
      color: var(--muted-foreground);
      text-decoration: none;

      &:hover { background: var(--accent); color: var(--accent-foreground); }
      &[aria-current] { color: var(--foreground); font-weight: 500; }
      &:focus-visible { outline: 2px solid var(--ring); outline-offset: 0; }
    }
  }

  /* the year's count sits after its label; a month's at the row end */
  .mk-archive-index-count {
    margin-inline-start: auto;
    min-width: 1.5rem;
    padding: 0.0625rem 0.4375rem;
    border-radius: 999px;
    background: var(--muted);
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }
  .mk-archive-index-year > summary .mk-archive-index-count { order: 1; margin-inline-start: auto; }
  .mk-archive-index-year > summary::after { order: 2; }

  /* columns: the years side by side, each list open */
  .mk-archive-index[data-variant="columns"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 1rem 2rem;

    & .mk-archive-index-title { grid-column: 1 / -1; }
    & .mk-archive-index-year { border-block-end: 0; border-block-start: 2px solid var(--foreground); }
  }

  /* calendar: each year a 6 × 2 grid of months, shaded by how much was
     published (data-level 0-4 on the link, like a contribution graph) */
  .mk-archive-index[data-variant="calendar"] {
    gap: 1rem;

    & .mk-archive-index-year { border: 0; }
    & .mk-archive-index-year > summary::after { display: none; }
    & .mk-archive-index-year > summary { cursor: default; pointer-events: none; padding-block: 0 0.375rem; }
    & .mk-archive-index-year ul {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 0.375rem;
      padding: 0;
    }
    & .mk-archive-index-year li { flex-direction: column; gap: 0.125rem; }
    & .mk-archive-index-year li a {
      --_level: 0%;

      display: grid;
      place-items: center;
      width: 100%;
      aspect-ratio: 1.4;
      margin: 0;
      padding: 0;
      border-radius: var(--radius-md);
      background: color-mix(in oklch, var(--primary) var(--_level), var(--muted));
      color: var(--foreground);
      font-size: 0.75rem;
      font-weight: 500;

      &[data-level="1"] { --_level: 20%; }
      &[data-level="2"] { --_level: 40%; }
      &[data-level="3"] { --_level: 65%; color: var(--primary-foreground); }
      &[data-level="4"] { --_level: 90%; color: var(--primary-foreground); }
      &:hover { outline: 2px solid var(--ring); outline-offset: 1px; background: color-mix(in oklch, var(--primary) var(--_level), var(--muted)); }
    }
    & .mk-archive-index-year li .mk-archive-index-count { margin: 0; padding: 0; background: none; min-width: 0; font-size: 0.6875rem; }
  }

  /* a legend under the calendar */
  .mk-archive-index-legend {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--muted-foreground);
    font-size: 0.6875rem;

    & i {
      width: 0.75rem;
      height: 0.75rem;
      border-radius: 3px;
      background: var(--muted);
    }
    & i:nth-of-type(2) { background: color-mix(in oklch, var(--primary) 20%, var(--muted)); }
    & i:nth-of-type(3) { background: color-mix(in oklch, var(--primary) 40%, var(--muted)); }
    & i:nth-of-type(4) { background: color-mix(in oklch, var(--primary) 65%, var(--muted)); }
    & i:nth-of-type(5) { background: color-mix(in oklch, var(--primary) 90%, var(--muted)); }
  }

  /* tags: a cloud - data-weight 1-5 scales a tag */
  .mk-archive-index-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.875rem;
    margin: 0;
    padding: 0;
    list-style: none;

    & a {
      color: var(--foreground);
      font-size: calc(0.75rem + (var(--_w, 1) - 1) * 0.25rem);
      font-weight: calc(400 + (var(--_w, 1) - 1) * 75);
      line-height: 1.3;
      text-decoration: none;

      &[data-weight="2"] { --_w: 2; }
      &[data-weight="3"] { --_w: 3; }
      &[data-weight="4"] { --_w: 4; }
      &[data-weight="5"] { --_w: 5; color: var(--primary); }
      &:hover { text-decoration: underline; text-underline-offset: 0.2em; }
      &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
    }
    & sup { color: var(--muted-foreground); font-size: 0.625rem; font-weight: 400; margin-inline-start: 0.125rem; }
  }

  /* month chips - pill links with their counts (inside a Timeline entry,
     a card, anywhere a compact month list fits) */
  .mk-archive-index-months {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;

    & a {
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      padding: 0.25rem 0.375rem 0.25rem 0.75rem;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--background);
      color: var(--foreground);
      font-size: 0.8125rem;
      font-weight: 500;
      text-decoration: none;
      transition: background-color 120ms, border-color 120ms;

      &:hover { border-color: color-mix(in oklch, var(--foreground) 30%, var(--border)); background: var(--accent); }
      &[aria-current] { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
      &[aria-current] .mk-archive-index-count { background: color-mix(in oklch, var(--primary-foreground) 20%, transparent); color: inherit; }
      &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
    }
    & .mk-archive-index-count { margin: 0; }
  }

  /* the year's highlight under the chips: "Most read: …" */
  .mk-archive-index-pick {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    margin-block-start: 0.5rem;
    color: var(--muted-foreground);
    font-size: 0.8125rem;

    & a { color: var(--foreground); font-weight: 500; text-decoration: none; }
    & a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-archive-index-year::details-content,
    .mk-archive-index-year > summary::after { transition: none; }
    .mk-archive-index-months a { transition: none; }
  }

  @media (prefers-contrast: more) {
    .mk-archive-index-year li a,
    .mk-archive-index-count { color: var(--foreground); }
  }

  @media (forced-colors: active) {
    .mk-archive-index-year li a { color: LinkText; }
    .mk-archive-index-count { border: 1px solid CanvasText; }
  }
}

/* ── components/article-body/article-body.css ── */
/* -- Article Body (website) -----------------------------------------
   Renders an article's formatted text. Plain elements - what a CMS or a
   Markdown renderer emits - are styled without classes; library components
   dropped into the text (.mockup-code, .table, .alert, .image, .kbd,
   .heading-anchor, .toc…) keep their own look, because the prose rules only
   reach class-less elements. Adds a lead, pull quotes, footnotes, a table of
   contents layout and a reading-progress bar. */

@layer components {
  .mk-article-body {
    --_measure: 42rem;

    box-sizing: border-box;
    width: 100%;
    max-width: var(--_measure);
    margin-inline: auto;
    padding-inline: 1.25rem;
    color: var(--foreground);
    font-size: 1.0625rem;
    line-height: 1.75;
    hanging-punctuation: first last;
    overflow-wrap: break-word;

    & > * { margin-block: 0; }
    & > * + * { margin-block-start: 1.25em; }

    & :is(h2, h3, h4) {
      line-height: 1.25;
      letter-spacing: -0.02em;
      text-wrap: balance;
      scroll-margin-block-start: 5rem;
    }
    & > h2 { margin-block-start: 2em; font-size: 1.625em; font-weight: 700; }
    & > h3 { margin-block-start: 1.75em; font-size: 1.25em; font-weight: 600; }
    & > h4 { margin-block-start: 1.5em; font-size: 1em; font-weight: 600; }
    & > :is(h2, h3, h4) + * { margin-block-start: 0.75em; }

    & p { text-wrap: pretty; }

    /* prose links - links with a class are components (heading anchors, buttons…) */
    & a:not([class]) {
      color: var(--primary);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.2em;

      &:hover { text-decoration-thickness: 2px; }
      &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 2px; }
    }

    & :is(strong, b) { font-weight: 650; }

    & > :is(ul, ol) { padding-inline-start: 1.5em; }
    & > :is(ul, ol) li + li { margin-block-start: 0.4em; }
    & > :is(ul, ol) li::marker { color: var(--muted-foreground); }

    & > dl {
      display: grid;
      grid-template-columns: max-content 1fr;
      gap: 0.5em 1.25em;

      & dt { font-weight: 600; }
      & dd { margin: 0; color: var(--muted-foreground); }
    }

    & > blockquote:not([class]) {
      margin-inline: 0;
      padding-inline-start: 1.25em;
      border-inline-start: 3px solid var(--primary);
      font-size: 1.125em;
      font-style: italic;

      & p { margin: 0; }
      & cite {
        display: block;
        margin-block-start: 0.5em;
        color: var(--muted-foreground);
        font-size: 0.8em;
        font-style: normal;

        &::before { content: "- "; }
      }
    }

    & :not(pre) > code:not([class]) {
      padding: 0.125em 0.375em;
      border-radius: var(--radius-sm);
      background: var(--muted);
      font-family: var(--font-mono);
      font-size: 0.875em;
    }

    /* a bare <pre>; a .mockup-code brings its own window */
    & > pre {
      padding: 1em 1.25em;
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      background: var(--muted);
      font-family: var(--font-mono);
      font-size: 0.875em;
      line-height: 1.6;
      tab-size: 2;
    }

    & > hr {
      height: 1px;
      margin-block: 2.5em;
      border: 0;
      background: var(--border);
    }

    & figure:not([class]) {
      margin-inline: 0;

      & :is(img, video) { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
      & figcaption { margin-block-start: 0.625em; color: var(--muted-foreground); font-size: 0.8125em; text-align: center; }
    }
    & > :is(img, video) { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }

    /* embeds (YouTube, maps…): 16:9 unless the iframe says otherwise */
    & iframe {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      border: 0;
      border-radius: var(--radius-lg);
      background: var(--muted);
    }

    /* a bare table; a .table (in its .table-container) is the component */
    & > table {
      display: block;
      width: 100%;
      overflow-x: auto;
      border-collapse: collapse;
      font-size: 0.875em;
      line-height: 1.5;

      & :is(th, td) { padding: 0.5em 0.75em; border-block-end: 1px solid var(--border); text-align: start; }
      & th { color: var(--muted-foreground); font-weight: 600; }
    }

    & kbd:not([class]) {
      padding: 0.0625em 0.375em;
      border: 1px solid var(--border);
      border-block-end-width: 2px;
      border-radius: var(--radius-sm);
      font-family: var(--font-mono);
      font-size: 0.8em;
    }

    & mark { padding-inline: 0.125em; border-radius: 2px; background: color-mix(in oklch, var(--primary) 22%, transparent); color: inherit; }
    & abbr[title] { text-decoration: underline dotted; text-underline-offset: 0.2em; cursor: help; }
    & :is(del, s) { color: var(--muted-foreground); }
    & ins { text-decoration: none; background: color-mix(in oklch, oklch(0.72 0.17 150) 22%, transparent); }

    /* the library components inside the text */
    & > :is(.mockup-code, .table-container, .alert, .image, .mk-article-body-pullquote) { margin-block-start: 1.75em; }
    & > :is(.mockup-code, .table-container, .alert, .image) + * { margin-block-start: 1.75em; }
    & .heading-anchor { margin-inline-end: 0.25em; }
  }

  /* the opening paragraph, larger */
  .mk-article-body-lead {
    color: var(--muted-foreground);
    font-size: 1.25em;
    line-height: 1.6;
  }

  /* a callout box inside the text */
  .mk-article-body-note {
    padding: 1em 1.25em;
    border: 1px solid var(--border);
    border-inline-start: 3px solid var(--primary);
    border-radius: var(--radius-md);
    background: color-mix(in oklch, var(--muted) 60%, transparent);
    font-size: 0.9375em;

    & > :first-child { margin-block-start: 0; }
    & > :last-child { margin-block-end: 0; }
  }

  /* a pull quote - set large between rules, the line repeated from the text */
  .mk-article-body-pullquote {
    margin-inline: 0;
    padding-block: 0.75em;
    border-block: 1px solid var(--border);
    font-family: var(--font-serif);
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    text-wrap: balance;

    &::before { content: "“"; display: block; color: var(--primary); font-size: 2em; line-height: 0.5; }
  }

  /* footnotes: numbered refs jump to the notes, the notes jump back */
  .mk-article-body-ref {
    font-size: 0.75em;
    line-height: 0;
    vertical-align: super;

    & a { padding-inline: 0.125em; color: var(--primary); font-weight: 600; text-decoration: none; }
    & a:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; border-radius: 2px; }
  }
  .mk-article-body-footnotes {
    padding-block-start: 1em;
    border-block-start: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: 0.875em;

    & ol { margin: 0; padding-inline-start: 1.25em; }
    & li { padding: 0.25em 0.5em; margin-inline-start: -0.5em; border-radius: var(--radius-sm); scroll-margin-block-start: 5rem; }
    & li:target { background: color-mix(in oklch, var(--primary) 12%, transparent); color: var(--foreground); }
    & a[href^="#"] { color: var(--primary); text-decoration: none; }
  }

  /* a wider figure than the measure (it stays inside the viewport) */
  .mk-article-body > .mk-article-body-wide {
    width: min(100vw - 2.5rem, var(--_measure) + 16rem);
    margin-inline: calc((100% - min(100vw - 2.5rem, var(--_measure) + 16rem)) / 2);
  }

  /* the text beside a sticky table of contents (the .toc component) */
  .mk-article-body-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 64rem;
    margin-inline: auto;

    & > .toc { display: none; }
    & > .mk-article-body { margin-inline: 0; }
  }
  @media (min-width: 56rem) {
    .mk-article-body-layout {
      grid-template-columns: 12rem minmax(0, 1fr);

      & > .toc { display: flex; position: sticky; inset-block-start: 1rem; align-self: start; }
    }
  }

  /* a reading-progress bar - driven by the scroll of the nearest scroller */
  .mk-article-body-progress {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    height: 3px;
    margin-block-end: 1rem;
    background: var(--primary);
    transform-origin: left;
    scale: 0 1;
    animation: mk-article-body-read linear both;
  }
  /* the timeline in its own rule: a minifier must not fold it into the
     `animation` shorthand (where it is reset-only - the declaration would be
     dropped); unsupported, the bar hides */
  @supports (animation-timeline: scroll()) {
    .mk-article-body-progress { animation-timeline: scroll(nearest block); }
  }
  @supports not (animation-timeline: scroll()) {
    .mk-article-body-progress { display: none; }
  }

  /* serif: an editorial voice for the running text */
  .mk-article-body[data-variant="serif"] {
    font-family: var(--font-serif);
    font-size: 1.1875rem;

    & :is(h2, h3, h4) { font-family: var(--font-sans); }
  }

  /* sizes */
  .mk-article-body[data-size="sm"] { font-size: 0.9375rem; line-height: 1.7; }
  .mk-article-body[data-size="lg"] { font-size: 1.1875rem; --_measure: 46rem; }

  /* a drop cap opens the first paragraph */
  .mk-article-body[data-dropcap] > p:first-of-type::first-letter {
    float: inline-start;
    margin: 0.06em 0.12em 0 0;
    font-family: var(--font-serif);
    font-size: 3.6em;
    font-weight: 700;
    line-height: 0.8;
    color: var(--primary);
  }

  @keyframes mk-article-body-read {
    to { scale: 1 1; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-article-body-progress { animation: none; display: none; }
  }

  @media (prefers-contrast: more) {
    .mk-article-body :is(blockquote cite, figcaption),
    .mk-article-body-lead,
    .mk-article-body-footnotes { color: var(--foreground); }
    .mk-article-body li::marker { color: var(--foreground); }
    .mk-article-body a:not([class]) { text-decoration-thickness: 2px; }
  }

  @media (forced-colors: active) {
    .mk-article-body a:not([class]) { color: LinkText; }
    .mk-article-body :not(pre) > code:not([class]),
    .mk-article-body > pre { border: 1px solid CanvasText; }
    .mk-article-body-progress { background: Highlight; }
  }
}

/* ── components/article-header/article-header.css ── */
/* -- Article Header (website) ---------------------------------------
   Presents an article: category, the title (h1), a subtitle, the byline
   (Avatar, author link, date, read time) and an optional lead image with
   its caption. Centered, or as a cover - the copy over the image. */

@layer components {
  .mk-article-header {
    container: mk-article-header / inline-size;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 52rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
  }

  .mk-article-header-category {
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;

    &:hover { text-decoration: underline; text-underline-offset: 0.2em; }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
  }

  .mk-article-header-title {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  .mk-article-header-subtitle {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 1.1875rem;
    line-height: 1.5;
    text-wrap: pretty;
  }

  .mk-article-header-byline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-block-start: 0.5rem;
    font-size: 0.875rem;
  }

  .mk-article-header-author {
    color: var(--foreground);
    font-weight: 600;
    text-decoration: none;

    &:hover { text-decoration: underline; text-underline-offset: 0.2em; }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
  }

  /* date · read time · … - dots between the parts */
  .mk-article-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    color: var(--muted-foreground);

    & > * + *::before { content: "·"; margin-inline-end: 0.5rem; }
  }

  .mk-article-header-media {
    width: 100%;
    margin: 1rem 0 0;

    & img {
      display: block;
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      border-radius: var(--radius-lg);
      background: var(--muted);
    }
    & figcaption {
      margin-block-start: 0.5rem;
      color: var(--muted-foreground);
      font-size: 0.8125rem;
    }
  }

  /* tags (Badges) and actions (listen, save, share) - each a row */
  .mk-article-header-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
  .mk-article-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-inline-start: auto;
  }
  /* the byline grows to hold actions at its end */
  .mk-article-header-byline:has(.mk-article-header-actions) { align-self: stretch; flex-wrap: wrap; }

  /* a series line: "Part 2 of 4" + a Progress bar */
  .mk-article-header-series {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    color: var(--muted-foreground);
    font-size: 0.8125rem;

    & .progress { width: 8rem; }
    & strong { color: var(--foreground); font-weight: 600; }
  }

  @container mk-article-header (min-width: 40rem) {
    .mk-article-header-title { font-size: 3rem; }
  }

  /* split: the copy beside the image (wraps under it when narrow) */
  .mk-article-header[data-variant="split"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    align-items: center;
    gap: 1rem 2.5rem;
    max-width: 80rem;

    & > :not(.mk-article-header-media) { grid-column: 1; }
    & .mk-article-header-media { grid-column: -2; grid-row: 1 / span 6; margin: 0; }
    & .mk-article-header-media img { aspect-ratio: 4 / 5; }
  }

  /* one column: the image follows the copy */
  @container mk-article-header (max-width: 47rem) {
    .mk-article-header[data-variant="split"] .mk-article-header-media { grid-row: auto; }
  }

  /* editorial: serif, centered, an ornament and an italic subtitle */
  .mk-article-header[data-variant="editorial"] {
    align-items: center;
    text-align: center;

    & .mk-article-header-category { color: var(--muted-foreground); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; }
    & .mk-article-header-title { font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.015em; }
    & .mk-article-header-subtitle { font-family: var(--font-serif); font-style: italic; }
    & .mk-article-header-byline::before,
    & .mk-article-header-byline::after { content: ""; width: 2rem; height: 1px; background: var(--border); }
  }

  .mk-article-header[data-align="center"] {
    align-items: center;
    text-align: center;
  }

  /* cover: the image fills the header, the copy sits on it */
  .mk-article-header[data-variant="cover"] {
    justify-content: flex-end;
    max-width: 80rem;
    min-height: 26rem;
    padding: 2rem 1.5rem;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: #0b0b0f;
    color: #fff;

    & .mk-article-header-media {
      position: absolute;
      inset: 0;
      margin: 0;

      & img { height: 100%; aspect-ratio: auto; border-radius: 0; }
      & figcaption {
        position: absolute;
        inset-block-start: 0.75rem;
        inset-inline-end: 1rem;
        margin: 0;
        color: rgb(255 255 255 / 0.75);
        font-size: 0.75rem;
      }
      &::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgb(0 0 0 / 0.85), rgb(0 0 0 / 0.3) 60%, rgb(0 0 0 / 0.15));
      }
    }
    & > :not(.mk-article-header-media) { position: relative; z-index: 1; max-width: 44rem; }
    & :is(.mk-article-header-subtitle, .mk-article-header-meta) { color: rgb(255 255 255 / 0.82); }
    & :is(.mk-article-header-category, .mk-article-header-author) { color: #fff; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-contrast: more) {
    .mk-article-header-subtitle,
    .mk-article-header-meta { color: var(--foreground); }
  }

  @media (forced-colors: active) {
    .mk-article-header[data-variant="cover"] { border: 1px solid CanvasText; }
    .mk-article-header-media::after { display: none; }
  }
}

/* ── components/article-navigation/article-navigation.css ── */
/* -- Article Navigation (website) -----------------------------------
   Links to the previous and next article (rel="prev" / rel="next"): a
   direction label and the title, the next link aligned to the end. A lone
   next link keeps its side. Default: two cards; minimal: text between rules. */

@layer components {
  .mk-article-nav {
    container: mk-article-nav / inline-size;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    box-sizing: border-box;
    width: 100%;
  }

  .mk-article-nav-link {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--foreground);
    text-decoration: none;
    transition: border-color 120ms, background-color 120ms;

    &:hover { border-color: color-mix(in oklch, var(--foreground) 35%, var(--border)); background: var(--accent); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

    &[rel~="next"] { align-items: flex-end; text-align: end; }
    /* only a next link: it stays on the end side */
    &[rel~="next"]:only-child { grid-column: 2; }
  }

  .mk-article-nav-dir {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    font-weight: 500;

    & svg { width: 1rem; height: 1rem; transition: translate 150ms ease; }
  }
  .mk-article-nav-link[rel~="prev"]:hover .mk-article-nav-dir svg { translate: -0.2rem 0; }
  .mk-article-nav-link[rel~="next"]:hover .mk-article-nav-dir svg { translate: 0.2rem 0; }

  .mk-article-nav-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    text-wrap: balance;
  }

  /* narrow: the links stack */
  @container mk-article-nav (max-width: 32rem) {
    .mk-article-nav > .mk-article-nav-link[rel] { grid-column: 1 / -1; }
  }

  /* media: a thumbnail on each card (start for prev, end for next) */
  .mk-article-nav[data-variant="media"] .mk-article-nav-link {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 0.25rem 1rem;
    padding: 0.75rem;

    & img { grid-row: 1 / span 2; width: 4.5rem; aspect-ratio: 1; border-radius: var(--radius-md); object-fit: cover; background: var(--muted); }
    &[rel~="next"] { grid-template-columns: minmax(0, 1fr) 4.5rem; justify-items: end; }
    &[rel~="next"] img { grid-column: 2; grid-row: 1 / span 2; }
    &[rel~="next"] :is(.mk-article-nav-dir, .mk-article-nav-title) { grid-column: 1; }
  }

  /* compact: two small pill links with the titles truncated */
  .mk-article-nav[data-variant="compact"] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;

    & .mk-article-nav-link {
      flex-direction: row;
      align-items: center;
      gap: 0.5rem;
      max-width: 48%;
      padding: 0.375rem 0.875rem;
      border-radius: 999px;
    }
    & .mk-article-nav-link[rel~="next"]:only-child { margin-inline-start: auto; }
    & .mk-article-nav-title { overflow: hidden; font-size: 0.875rem; white-space: nowrap; text-overflow: ellipsis; }
    & .mk-article-nav-dir { flex: none; }
    & .mk-article-nav-dir span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  }

  /* minimal: no cards, a rule above */
  .mk-article-nav[data-variant="minimal"] {
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--border);

    & .mk-article-nav-link {
      padding: 0;
      border: 0;
      border-radius: var(--radius-sm);

      &:hover { background: transparent; }
      &:hover .mk-article-nav-title { text-decoration: underline; text-underline-offset: 0.2em; }
    }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-article-nav-link,
    .mk-article-nav-dir svg { transition: none; }
    .mk-article-nav-link:hover .mk-article-nav-dir svg { translate: none; }
  }

  @media (prefers-contrast: more) {
    .mk-article-nav-link { border-color: var(--foreground); }
    .mk-article-nav-dir { color: var(--foreground); }
  }

  @media (forced-colors: active) {
    .mk-article-nav-link { color: LinkText; border-color: LinkText; }
  }
}

/* ── components/audio-player/audio-player.css ── */
/* -- Audio Player (website · Media) ---------------------------------------
   Plays one audio recording with playback controls and metadata - cover art, title, show and episode, the native player and a download link. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-audio-player, .mk-audio-player *, .mk-audio-player ::before, .mk-audio-player ::after) { box-sizing: border-box; }

  .mk-audio-player {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: 1rem 1.25rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);
  }
  .mk-audio-player-cover { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); background: var(--muted); }
  .mk-audio-player-body { display: grid; gap: 0.375rem; min-width: 0; }
  .mk-audio-player-show { color: var(--primary); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
  .mk-audio-player-title { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; text-wrap: balance; }
  .mk-audio-player-meta { color: var(--muted-foreground); font-size: 0.8125rem; }
  .mk-audio-player-controls { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.5rem;
    & audio { flex: 1; min-width: 0; height: 2.5rem; }
  }
  .mk-audio-player-notes { grid-column: 1 / -1; border-block-start: 1px solid var(--border); padding-block-start: 0.75rem;
    & summary { cursor: pointer; font-size: 0.875rem; font-weight: 600; }
    & summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
    & p, & ul { margin: 0.5rem 0 0; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.6; }
  }

  .mk-audio-player[data-variant="compact"] {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    padding: 0.75rem 1rem;

    & .mk-audio-player-cover { display: none; }
    & .mk-audio-player-body { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0.75rem; }
    & .mk-audio-player-title { font-size: 0.9375rem; }
    & .mk-audio-player-show { display: none; }
  }

  .mk-audio-player[data-variant="podcast"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    align-items: start;
    padding: 1.5rem;

    & .mk-audio-player-cover { box-shadow: var(--shadow-xl); }
    & .mk-audio-player-title { font-size: 1.5rem; letter-spacing: -0.02em; }
    & .mk-audio-player-controls, & .mk-audio-player-notes { grid-column: auto; }
    & .mk-audio-player-body { gap: 0.75rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-audio-player { border-color: CanvasText; }
  }
}

/* ── components/author-bio/author-bio.css ── */
/* -- Author Bio (website) -------------------------------------------
   Introduces one author: portrait (Avatar), a label, the name (linking to
   the author page), role, biography and links (icon buttons). Default: a
   row between rules; card: on a surface; centered: a profile stack. */

@layer components {
  /* the body wraps under the portrait when the row is too narrow for both */
  .mk-author-bio {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 1.25rem;
    box-sizing: border-box;
    width: 100%;
    padding-block: 1.5rem;
    border-block: 1px solid var(--border);

    & > .avatar { flex: none; }
  }

  .mk-author-bio-body {
    display: flex;
    flex: 1 1 16rem;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
  }

  .mk-author-bio-label {
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .mk-author-bio-name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;

    & a {
      color: inherit;
      text-decoration: none;

      &:hover { text-decoration: underline; text-underline-offset: 0.2em; }
      &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
    }
  }

  .mk-author-bio-role { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; }

  .mk-author-bio-text {
    margin: 0.5rem 0 0;
    max-width: 40rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    text-wrap: pretty;
  }

  .mk-author-bio-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0.5rem 0 0 -0.375rem;
    padding: 0;
    list-style: none;
  }

  /* card: the bio on a surface */
  /* card: a raised profile card - a primary wash from the corner, a shadow,
     the portrait ringed in the primary colour (sidebars, author pages) */
  .mk-author-bio[data-variant="card"] {
    padding: 1.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background:
      radial-gradient(90% 120% at 0% 0%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 60%),
      var(--card);
    color: var(--card-foreground);
    box-shadow: var(--shadow-lg);

    & > .avatar { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--primary); }
    & .mk-author-bio-label { color: var(--primary); }
  }

  /* topics the author writes about (Badges) */
  .mk-author-bio-topics { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-block-start: 0.75rem; }

  /* centered: a profile stack - portrait on top */
  .mk-author-bio[data-variant="centered"] {
    flex-direction: column;
    align-items: center;
    border-block: 0;
    text-align: center;

    & .mk-author-bio-body { align-items: center; }
    & .mk-author-bio-links { justify-content: center; margin-inline: 0; }
  }

  /* a row of Statistics (articles, readers, since) */
  .mk-author-bio-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    margin-block-start: 0.75rem;

    & .statistic { gap: 0; }
    & .statistic-value { font-size: 1.125rem; }
  }

  /* actions: follow / message */
  .mk-author-bio-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: 0.75rem;
  }

  /* cover: a banner image on top, the portrait overlapping it */
  .mk-author-bio[data-variant="cover"] {
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);

    & .mk-author-bio-cover { width: 100%; height: 7rem; margin: 0; object-fit: cover; background: var(--muted); }
    & > .avatar { margin: -2.5rem 0 0 1.5rem; box-shadow: 0 0 0 4px var(--card); }
    & .mk-author-bio-body { padding: 0.75rem 1.5rem 1.5rem; }
  }

  /* inline: a compact byline - one row, small portrait */
  .mk-author-bio[data-variant="inline"] {
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.75rem;

    & .mk-author-bio-body { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; flex: 1; }
    & .mk-author-bio-name { font-size: 0.9375rem; }
    & :is(.mk-author-bio-label, .mk-author-bio-role) { font-size: 0.8125rem; text-transform: none; letter-spacing: 0; font-weight: 400; }
    & :is(.mk-author-bio-text, .mk-author-bio-links, .mk-author-bio-stats) { display: none; }
    & .mk-author-bio-actions { margin: 0; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-contrast: more) {
    .mk-author-bio-role,
    .mk-author-bio-label { color: var(--foreground); }
  }

  @media (forced-colors: active) {
    .mk-author-bio[data-variant="card"] { border-color: CanvasText; }
  }
}

/* ── components/author-list/author-list.css ── */
/* -- Author List (website) ------------------------------------------
   Lists the contributors of a publication or article: avatar, name (a
   link), role and an optional count. Default: rows; grid: cards; stack:
   overlapping avatars with a one-line summary - the names stay in the
   accessibility tree, visually hidden. */

@layer components {
  .mk-author-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-sizing: border-box;
    width: 100%;
  }

  .mk-author-list-title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-foreground);
  }

  .mk-author-list-items {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mk-author-list-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.625rem;
    border-block-end: 1px solid var(--border);

    &:last-child { border-block-end: 0; }
    & > .avatar { flex: none; }
  }

  .mk-author-list-who {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .mk-author-list-name {
    color: var(--foreground);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;

    &:hover { text-decoration: underline; text-underline-offset: 0.2em; }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
  }

  .mk-author-list-role { color: var(--muted-foreground); font-size: 0.8125rem; }

  .mk-author-list-count {
    margin-inline-start: auto;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .mk-author-list-summary { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; }

  /* grid: contributor cards */
  .mk-author-list[data-variant="grid"] .mk-author-list-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.75rem;
  }
  .mk-author-list[data-variant="grid"] .mk-author-list-item {
    padding: 0.875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
  }

  /* stack: overlapping avatars + a summary line */
  .mk-author-list[data-variant="stack"] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;

    & .mk-author-list-title { flex-basis: 100%; }
    & .mk-author-list-items { flex-direction: row; padding-inline-start: 0.5rem; }
    & .mk-author-list-item { padding: 0; border: 0; margin-inline-start: -0.5rem; }
    & .mk-author-list-item > .avatar { box-shadow: 0 0 0 2px var(--background); }
    /* the names stay readable to assistive tech */
    & :is(.mk-author-list-who, .mk-author-list-count) {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    & .mk-author-list-item:has(.mk-author-list-name:focus-visible) > .avatar { outline: 2px solid var(--ring); outline-offset: 2px; }
  }

  /* ranked: a leaderboard - the rank from data-rank, a Progress bar for the share */
  .mk-author-list[data-variant="ranked"] {
    & .mk-author-list-item {
      display: grid;
      grid-template-columns: 1.75rem auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 0.25rem 0.75rem;

      &::before {
        content: attr(data-rank);
        color: var(--muted-foreground);
        font-size: 0.875rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        text-align: center;
      }
      &[data-rank="1"]::before { content: "🥇"; font-size: 1.125rem; }
      &[data-rank="2"]::before { content: "🥈"; font-size: 1.125rem; }
      &[data-rank="3"]::before { content: "🥉"; font-size: 1.125rem; }
    }
    & .progress { grid-column: 3 / -1; height: 0.375rem; }
  }

  /* the item's own action (follow) - at the row end */
  .mk-author-list-action { margin-inline-start: auto; }
  .mk-author-list-item:has(.mk-author-list-action) .mk-author-list-count { margin-inline-start: 0; }
  .mk-author-list[data-variant="grid"] .mk-author-list-item:has(.mk-author-list-action) { flex-wrap: wrap; }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-contrast: more) {
    .mk-author-list-role,
    .mk-author-list-count,
    .mk-author-list-summary { color: var(--foreground); }
  }

  @media (forced-colors: active) {
    .mk-author-list[data-variant="grid"] .mk-author-list-item { border-color: CanvasText; }
  }
}

/* ── components/avatar/avatar.css ── */
@layer components {
  .avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
    background-color: var(--muted);

    /* No overflow:hidden: the badge dot sits half outside the circle (like
       shadcn's -right-1 dot) and clipping cut it to a sliver. Circular
       rendering comes from border-radius: inherit on image/fallback instead. */

    &[data-size="xs"] {
      width: 1.5rem;
      height: 1.5rem;
      --_badge: 0.75rem;
      font-size: 0.5625rem;
    }

    &[data-size="sm"] {
      width: 2rem;
      height: 2rem;
      --_badge: 1rem;
      font-size: 0.6875rem;
    }

    &[data-size="md"] {
      width: 2.5rem;
      height: 2.5rem;
      --_badge: 1.25rem;
      font-size: 0.75rem;
    }

    &[data-size="lg"] {
      width: 3rem;
      height: 3rem;
      --_badge: 1.5rem;
      font-size: 0.875rem;
    }

    &[data-size="xl"] {
      width: 4rem;
      height: 4rem;
      --_badge: 1.75rem;
      font-size: 1rem;
    }

    /* -- Shape: the image and fallback inherit the radius, so one
       attribute reshapes the whole avatar (the badge is never clipped).
       For silhouettes (heart, squircle, hexagon…) put a shape-* class from
       theme/utils/shapes.css on the .avatar-image instead. */
    &[data-shape="rounded"] { border-radius: var(--radius-lg); }
    &[data-shape="square"] { border-radius: var(--radius-sm); }

    /* a loaded photo covers the box: no muted plate behind a shaped image */
    &:has(> .avatar-image:not([data-error])) { background-color: transparent; }

    /* -- Ring: a colored ring with a background-colored gap, following
       the avatar's shape */
    &[data-ring] {
      box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary);
    }
    &[data-ring="secondary"] { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--muted-foreground); }
    &[data-ring="destructive"] { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--destructive); }
  }

  .avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
  }

  .avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted-foreground);
    background-color: var(--muted);
    position: absolute;
    inset: 0;
    border-radius: inherit; /* .avatar no longer clips - the fallback must round itself */

    /* placeholder colors (letters on a solid plate) */
    &[data-variant="primary"] { background-color: var(--primary); color: var(--primary-foreground); }
    &[data-variant="neutral"] { background-color: var(--foreground); color: var(--background); }
  }

  /* Hide fallback when image is loaded */
  .avatar:has(.avatar-image:not([data-error])) .avatar-fallback {
    display: none;
  }

  /* Status dot. data-variant picks the presence state; no variant = online
     (the historical green). Status colours are literals by design - the
     tweakcn token set has no success/warning pair (AGENTS.md token rule).
     Colour is never the only cue (WCAG 1.4.1): offline is a hollow ring,
     busy carries a bar, away clock hands - the four read apart in greyscale
     and in forced-colors mode. Every cue is PAINTED inside a full circle
     (no mask): the silhouette and its separating rim stay whole, so the dot
     always sits in front of the avatar. Size scales with the avatar
     (--_badge, set per data-size below); rim and cues scale with it.
     Name it with role="img" + aria-label. */
  .avatar-badge {
    --_rim: max(2px, calc(var(--_badge, 1.25rem) * 0.15));
    position: absolute;
    inset-inline-end: calc(var(--_rim) * -0.5);
    inset-block-end: calc(var(--_rim) * -0.5);
    z-index: 1;
    width: var(--_badge, 1.25rem);
    height: var(--_badge, 1.25rem);
    box-sizing: border-box;
    border-radius: 9999px;
    background-color: #16a34a;
    border: var(--_rim) solid var(--background);
    background-repeat: no-repeat;

    &[data-variant="online"] {
      background-color: #16a34a;
    }

    /* data-position: any of the four corners (default bottom-end); start /
       end are logical - in RTL, start is the right */
    &[data-position^="top"] { inset-block: calc(var(--_rim) * -0.5) auto; }
    &[data-position$="start"] { inset-inline: calc(var(--_rim) * -0.5) auto; }

    /* hollow ring: "not here" */
    &[data-variant="offline"] {
      background-color: var(--background);
      box-shadow: inset 0 0 0 max(2px, calc(var(--_badge, 1.25rem) * 0.14)) #9ca3af;
    }

    /* red with a bar: do not disturb */
    &[data-variant="busy"] {
      background-color: #dc2626;
      background-image: linear-gradient(#fff 0 0);
      background-size: 56% max(2px, calc(var(--_badge, 1.25rem) * 0.14));
      background-position: center;
    }

    /* amber with clock hands (12 → 3 o'clock): away / be right back */
    &[data-variant="away"] {
      background-color: #f59e0b;
      background-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
      background-size: max(2px, calc(var(--_badge, 1.25rem) * 0.12)) 34%, 30% max(2px, calc(var(--_badge, 1.25rem) * 0.12));
      /* hour hand: centred, from ~16% down to the centre; minute hand: from
         the centre to ~80% (percent positions: (box - layer) * p) */
      background-position: 50% 24%, 71% 50%;
    }
  }

  /* Avatar group - data-overlap="sm|lg" tightens / loosens the stack */
  .avatar-group {
    display: flex;
    align-items: center;

    & .avatar {
      border: 2px solid var(--background);
      margin-left: -0.5rem;

      &:first-child {
        margin-left: 0;
      }
    }
    &[data-overlap="sm"] :is(.avatar, .avatar-group-count):not(:first-child) { margin-left: -0.25rem; }
    &[data-overlap="lg"] :is(.avatar, .avatar-group-count):not(:first-child) { margin-left: -1rem; }
  }

  .avatar-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: var(--muted);
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: 500;
    border: 2px solid var(--background);
    margin-left: -0.5rem;
  }
}

/* Forced colors (Windows High Contrast) would repaint the status fills with
   the system Canvas colour and erase the dot. Presence colour carries meaning
   (like a chart series), so the badge keeps its own palette; the ring / bar /
   crescent shape cues stay as well. */
@media (forced-colors: active) {
  @layer components {
    .avatar-badge {
      forced-color-adjust: none;
    }
  }
}

/* ── components/badge/badge.css ── */
/* -- Badge component ------------------------------------------- */

@layer components {
  .badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.125rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.5rem;
    /* a pill never breaks its label or gets squeezed in a flex row (as in
       shadcn/ui) - a wrapped badge doubles its line-height into a lozenge */
    white-space: nowrap;
    flex-shrink: 0;

    /* -- Sizes: font, vertical padding and the line-height (which gives the
       pill its height) scale together. Default (no attribute) == md. */
    &[data-size="xs"] { font-size: 0.5625rem; padding: 0 0.375rem;    line-height: 1.125rem; }
    &[data-size="sm"] { font-size: 0.625rem;  padding: 0.0625rem 0.5rem; line-height: 1.25rem; }
    &[data-size="md"] { font-size: 0.6875rem; padding: 0.125rem 0.625rem; line-height: 1.5rem; }
    &[data-size="lg"] { font-size: 0.8125rem; padding: 0.1875rem 0.75rem; line-height: 1.75rem; }
    &[data-size="xl"] { font-size: 0.9375rem; padding: 0.25rem 0.875rem;  line-height: 2rem; }

    &[data-variant="outline"] {
      border: 1px solid var(--border);
      color: var(--muted-foreground);
    }

    &[data-variant="secondary"] {
      background: var(--secondary);
      color: var(--secondary-foreground);
    }

    &[data-variant="default"] {
      background: var(--primary);
      color: var(--primary-foreground);
    }
  }
}

/* ── components/before-after/before-after.css ── */
/* -- Before After (website · Media) ---------------------------------------
   Compares two images through aligned views or a slider - drag a divider, toggle between them, or set them side by side. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-before-after, .mk-before-after *, .mk-before-after ::before, .mk-before-after ::after) { box-sizing: border-box; }

  .mk-before-after {
    --mk-ba-pos: 50%;

    display: grid;
    gap: 0.75rem;
    width: 100%;
    margin: 0;
  }
  .mk-before-after-stage {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--muted);

    & img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; user-select: none; -webkit-user-drag: none; }
  }
  /* the before picture sets the size; the after picture lies on top, clipped */
  .mk-before-after-before { position: relative; }
  .mk-before-after-after { position: absolute; inset: 0; height: 100%; clip-path: inset(0 0 0 var(--mk-ba-pos)); }
  .mk-before-after-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--mk-ba-pos);
    width: 2px;
    translate: -50% 0;
    background: #fff;
    box-shadow: 0 0 0 1px oklch(0 0 0 / 0.15);
    pointer-events: none;

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 2.5rem;
      height: 2.5rem;
      translate: -50% -50%;
      border-radius: 50%;
      background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18 3 12l6-6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 1.25rem no-repeat;
      box-shadow: var(--shadow-lg);
    }
  }
  .mk-before-after-range { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
  .mk-before-after-stage:has(.mk-before-after-range:focus-visible) .mk-before-after-handle::after { outline: 3px solid var(--ring); outline-offset: 2px; }
  .mk-before-after-label {
    position: absolute;
    top: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: oklch(0.12 0.02 260 / 0.65);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    backdrop-filter: blur(6px);
    pointer-events: none;

    &[data-side="before"] { left: 0.75rem; }
    &[data-side="after"] { right: 0.75rem; }
  }
  .mk-before-after-caption { color: var(--muted-foreground); font-size: 0.875rem; text-align: center; }

  /* toggle: a switch reveals the after picture */
  .mk-before-after[data-variant="toggle"] {
    & .mk-before-after-after { clip-path: inset(0 0 0 100%); transition: clip-path 600ms cubic-bezier(.6,0,.2,1); }
    &:has(.mk-before-after-toggle input:checked) .mk-before-after-after { clip-path: inset(0); }
  }
  .mk-before-after-toggle { justify-self: center; }

  /* split: side by side */
  .mk-before-after[data-variant="split"] .mk-before-after-stage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 0.5rem;
    overflow: visible;
    background: none;

    & > div { position: relative; overflow: hidden; border-radius: var(--radius-xl); }
    & .mk-before-after-after { position: static; clip-path: none; }
    & .mk-before-after-label[data-side="after"] { left: 0.75rem; right: auto; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-before-after[data-variant="toggle"] .mk-before-after-after { transition: none; }
  }

  @media (forced-colors: active) {
    .mk-before-after-handle { background: CanvasText; }
  }
}

/* ── components/blog/blog.css ── */
/* -- Blog (marketing) ----------------------------------------------
   Insights grid: media card with category/read-time meta, line-clamped
   excerpt, and author row composed from the avatar component. */

@layer components {
  .mk-blog {
    container: mk-blog / inline-size;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
  }

  .mk-blog-head { display: flex; gap: 1.25rem; align-items: flex-start; }

  .mk-blog-head-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    max-width: 48rem;
    text-align: left;
  }

  .mk-blog-eyebrow { color: var(--primary); font-size: 1rem; font-weight: 500; }

  .mk-blog-title {
    line-height: 1.15;
    margin: 0;
    font-size: 1.875rem;
    font-weight: 500;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  .mk-blog-desc { margin: 0; max-width: 42rem; color: var(--muted-foreground); font-size: 1rem; text-wrap: pretty; }

  .mk-blog-see-all { display: none; margin-inline-start: auto; align-self: flex-end; flex-shrink: 0; }

  .mk-blog-grid { display: grid; gap: 1.25rem; width: 100%; }

  .mk-blog-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; }

  .mk-blog-media {
    position: relative;
    aspect-ratio: 3 / 2;
    width: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--muted);

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: opacity 150ms ease;
    }
  }

  .mk-blog-card:hover .mk-blog-media img { opacity: 0.9; }

  .mk-blog-body { display: flex; flex: 1; flex-direction: column; gap: 0.75rem; padding-block: 0.875rem; }

  .mk-blog-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }

  .mk-blog-category { color: var(--primary); font-size: 0.875rem; font-weight: 500; }

  /* read time: a muted pill with a clock glyph */
  .mk-blog-read {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--muted);
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;

    & svg { width: 0.75rem; height: 0.75rem; flex: none; }
  }

  .mk-blog-copy { display: grid; gap: 0.25rem; }

  .mk-blog-card-title {
    line-height: 1.3;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  /* excerpt clamp: exactly 3 lines (source: line-clamp-3) */
  .mk-blog-excerpt {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .mk-blog-author { display: flex; align-items: center; gap: 0.5rem; margin-block-start: auto; }

  .mk-blog-author-name { font-size: 0.875rem; font-weight: 500; }

  .mk-blog-author-date { color: var(--muted-foreground); font-size: 0.75rem; }

  @container mk-blog (min-width: 30rem) {
    .mk-blog-grid { grid-template-columns: 1fr 1fr; }
  }

  @container mk-blog (min-width: 44rem) {
    .mk-blog-grid { grid-template-columns: repeat(3, 1fr); }
  }

  @container mk-blog (min-width: 52rem) {
    .mk-blog-title { font-size: 2.25rem; }
    .mk-blog-see-all { display: inline-flex; }
    .mk-blog-grid { gap: 2.25rem; }
  }


  /* -- variants ------------------------------------------------- */
  /* featured: the first post spans two columns and two rows */
  .mk-blog-grid[data-variant="featured"] > :first-child {
    & .mk-blog-card-title { font-size: 1.5rem; }
    & .mk-blog-excerpt { -webkit-line-clamp: 4; font-size: 1rem; }
    /* the card spans two rows - keep the author with the text, not at the bottom */
    & .mk-blog-author { margin-block-start: 0.5rem; }
  }

  /* list: rows with the picture beside the text, separated by rules */
  .mk-blog-grid[data-variant="list"] {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;

    & .mk-blog-card { flex-direction: row; align-items: center; gap: 1.25rem; padding-block: 1.25rem; border-block-end: 1px solid var(--border); }
    & .mk-blog-card:first-child { padding-block-start: 0; }
    & .mk-blog-media { flex: none; width: 34%; max-width: 15rem; aspect-ratio: 4 / 3; }
    & .mk-blog-body { padding-block: 0; }
    & .mk-blog-author { display: none; }
  }

  /* minimal: text only - a rule on top of each post */
  .mk-blog-grid[data-variant="minimal"] .mk-blog-card {
    padding-block-start: 1rem;
    border-block-start: 2px solid var(--foreground);

    & .mk-blog-card-title { font-size: 1.25rem; }
    &:hover .mk-blog-card-title { text-decoration: underline; text-underline-offset: 0.2em; }
  }

  /* overlay: the text sits on the picture, a scrim keeps it readable */
  .mk-blog-grid[data-variant="overlay"] .mk-blog-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 22rem;
    border-radius: var(--radius-xl);
    color: #fff;

    & .mk-blog-media { position: absolute; inset: 0; z-index: -2; aspect-ratio: auto; border-radius: 0; }
    & .mk-blog-media img { transition: scale 400ms ease; }
    &:hover .mk-blog-media img { opacity: 1; scale: 1.04; }
    &::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, oklch(0.12 0.02 260 / 0.9), oklch(0.12 0.02 260 / 0.1) 70%); }
    & .mk-blog-body { justify-content: flex-end; padding: 1.25rem; }
    & .mk-blog-category { color: inherit; }
    & .mk-blog-read { background: oklch(1 0 0 / 0.16); color: inherit; }
    & :is(.mk-blog-excerpt, .mk-blog-author-date) { color: oklch(1 0 0 / 0.75); }
    & .mk-blog-author { margin-block-start: 0.25rem; }
  }

  /* carousel: one row that scrolls sideways and snaps per post */
  .mk-blog-grid[data-variant="carousel"] {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0.25rem;
    padding-block-end: 0.75rem;
    scrollbar-width: thin;

    & > * { flex: 0 0 min(82%, 20rem); scroll-snap-align: start; }
  }

  /* category filters: links with the current one filled */
  .mk-blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    & a {
      padding: 0.375rem 0.875rem;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--muted-foreground);
      font-size: 0.875rem;
      font-weight: 500;
      text-decoration: none;
    }
    & a:hover { color: var(--foreground); border-color: color-mix(in oklch, var(--foreground) 30%, var(--border)); }
    & a[aria-current] { border-color: var(--foreground); background: var(--foreground); color: var(--background); }
    & a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  }

  @container mk-blog (min-width: 44rem) {
    .mk-blog-grid[data-variant="featured"] > :first-child { grid-column: span 2; grid-row: span 2; }
    .mk-blog-grid[data-variant="featured"] > :first-child .mk-blog-media { aspect-ratio: 16 / 10; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-blog-grid[data-variant="overlay"] .mk-blog-media img { transition: none; }
    .mk-blog-grid[data-variant="overlay"] .mk-blog-card:hover .mk-blog-media img { scale: none; }
  }

  @media (forced-colors: active) {
    .mk-blog-filters a[aria-current] { border-color: Highlight; background: Highlight; color: HighlightText; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mk-blog-media img { transition: none; }
  }

  @media (forced-colors: active) {
    .mk-blog-card { color: LinkText; }
  }
}

/* ── components/blog-header/blog-header.css ── */
/* -- Blog Header (website) ------------------------------------------
   Introduces a blog: eyebrow, title, editorial description, optional
   actions (subscribe, RSS) and the category chips - the current category
   marked with aria-current. Centered, or set on a banner surface. */

@layer components {
  .mk-blog-header {
    container: mk-blog-header / inline-size;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
  }

  .mk-blog-header-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 46rem;
  }

  .mk-blog-header-eyebrow { color: var(--primary); font-size: 0.875rem; font-weight: 500; }

  .mk-blog-header-title {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  .mk-blog-header-desc {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 1.0625rem;
    line-height: 1.6;
    text-wrap: pretty;
  }

  .mk-blog-header-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

  /* categories: chips, the current one filled */
  .mk-blog-header-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    & a {
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      padding: 0.3125rem 0.875rem;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--foreground);
      font-size: 0.8125rem;
      font-weight: 500;
      text-decoration: none;
      transition: background-color 120ms, border-color 120ms, color 120ms;

      &:hover { background: var(--accent); color: var(--accent-foreground); }
      &[aria-current] { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
      &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
    }
  }

  .mk-blog-header[data-align="center"] {
    align-items: center;
    text-align: center;

    & .mk-blog-header-copy { align-items: center; }
    & :is(.mk-blog-header-actions, .mk-blog-header-categories) { justify-content: center; }
  }

  /* banner: the header on a muted surface */
  .mk-blog-header[data-variant="banner"] {
    padding: 2.5rem 1.5rem;
    border-radius: var(--radius-xl);
    background:
      radial-gradient(120% 140% at 0% 0%, color-mix(in oklch, var(--primary) 14%, transparent), transparent 60%),
      var(--muted);
  }

  /* a count inside a category chip */
  .mk-blog-header-categories a .mk-blog-header-count {
    padding: 0 0.375rem;
    border-radius: 999px;
    background: color-mix(in oklch, currentColor 12%, transparent);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
  }

  /* a toolbar row: search on the left, view / sort on the right */
  .mk-blog-header-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--border);
  }

  /* an inline subscribe form: email + button */
  .mk-blog-header-subscribe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
    max-width: 26rem;

    & .input { flex: 1 1 12rem; }
  }

  /* split: the copy beside a featured image */
  .mk-blog-header[data-variant="split"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    align-items: center;
    gap: 2rem;
  }
  .mk-blog-header-media {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--muted);
    box-shadow: var(--shadow-lg);
    rotate: 1.5deg;

    & img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  }

  /* editorial: a serif masthead, centered between ornaments */
  .mk-blog-header[data-variant="editorial"] {
    align-items: center;
    text-align: center;

    & .mk-blog-header-copy { align-items: center; }
    & .mk-blog-header-eyebrow {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      color: var(--muted-foreground);
      font-size: 0.75rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;

      &::before, &::after { content: ""; width: 2.5rem; height: 1px; background: currentColor; }
    }
    & .mk-blog-header-title { font-family: var(--font-serif); font-weight: 700; font-style: italic; letter-spacing: -0.01em; }
    & .mk-blog-header-categories { justify-content: center; }
    & .mk-blog-header-categories a { border: 0; border-radius: 0; padding-inline: 0.25rem; }
    & .mk-blog-header-categories a[aria-current] { background: transparent; color: var(--foreground); box-shadow: inset 0 -2px var(--primary); }
  }

  @container mk-blog-header (min-width: 48rem) {
    .mk-blog-header-title { font-size: 3rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-blog-header-categories a { transition: none; }
  }

  @media (prefers-contrast: more) {
    .mk-blog-header-desc { color: var(--foreground); }
    .mk-blog-header-categories a { border-color: var(--foreground); }
  }

  @media (forced-colors: active) {
    .mk-blog-header-categories a[aria-current] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  }
}

/* ── components/blog-item/blog-item.css ── */
/* -- Blog Item (website) --------------------------------------------
   Previews one post: image, category + read time, the title (its link
   stretches over the whole item), a clamped excerpt and the byline (Avatar).
   Default: a vertical card; horizontal: image beside the copy; featured:
   the copy laid over the image. */

@layer components {
  .mk-blog-item {
    container: mk-blog-item / inline-size;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    color: var(--foreground);

    &:has(.mk-blog-item-title a:focus-visible) {
      outline: 2px solid var(--ring);
      outline-offset: 4px;
      border-radius: var(--radius-lg);
    }
  }

  .mk-blog-item-media {
    aspect-ratio: 3 / 2;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--muted);

    & img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: scale 300ms ease;
    }
  }
  .mk-blog-item:hover .mk-blog-item-media img { scale: 1.03; }

  .mk-blog-item-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
  }

  .mk-blog-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
  }

  .mk-blog-item-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-wrap: balance;

    & a {
      color: inherit;
      text-decoration: none;
      outline: none;

      &::after { content: ""; position: absolute; inset: 0; }
    }
  }

  .mk-blog-item-excerpt {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.9375rem;
    line-height: 1.6;
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .mk-blog-item-byline {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-block-start: auto;
    padding-block-start: 0.5rem;
    font-size: 0.8125rem;
  }

  .mk-blog-item-author { font-weight: 500; }
  .mk-blog-item-date { color: var(--muted-foreground); }

  /* horizontal: image beside the copy - the row wraps (image above) once
     the copy would drop under 18rem; no query needed */
  .mk-blog-item[data-variant="horizontal"] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 1.5rem;

    & .mk-blog-item-media { flex: 1 1 14rem; max-width: 100%; }
    & .mk-blog-item-body { flex: 999 1 18rem; }
  }

  /* featured: the copy over the image, on a darkening gradient */
  .mk-blog-item[data-variant="featured"] {
    justify-content: flex-end;
    isolation: isolate;
    min-height: 24rem;
    padding: 1.5rem;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: #0b0b0f;
    color: #fff;

    & .mk-blog-item-media {
      position: absolute;
      inset: 0;
      z-index: -1;
      aspect-ratio: auto;
      border-radius: 0;

      &::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgb(0 0 0 / 0.85), rgb(0 0 0 / 0.35) 55%, transparent);
      }
    }
    & .mk-blog-item-body { flex: none; max-width: 40rem; }
    & .mk-blog-item-title { font-size: 1.75rem; }
    & :is(.mk-blog-item-meta, .mk-blog-item-excerpt, .mk-blog-item-date) { color: rgb(255 255 255 / 0.8); }
  }
  @container mk-blog-item (min-width: 40rem) {
    .mk-blog-item[data-variant="featured"] .mk-blog-item-title { font-size: 2.25rem; }
  }

  /* tags under the excerpt, actions on the image (a bookmark Swap…): raised
     above the stretched link so they stay clickable */
  .mk-blog-item-tags {
    position: relative;
    z-index: 1;

    & a { text-decoration: none; }
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
  }
  .mk-blog-item-actions {
    position: absolute;
    inset-block-start: 0.625rem;
    inset-inline-end: 0.625rem;
    z-index: 1;
    display: flex;
    gap: 0.25rem;

    & .swap,
    & .btn {
      border-radius: 999px;
      background: color-mix(in oklch, var(--background) 85%, transparent);
      backdrop-filter: blur(6px);
      box-shadow: var(--shadow-sm);
    }
  }

  /* card: on a card surface, lifted on hover */
  .mk-blog-item[data-variant="card"] {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    transition: translate 200ms ease, box-shadow 200ms ease;

    &:hover { translate: 0 -3px; box-shadow: var(--shadow-lg); }
    & .mk-blog-item-media { border-radius: 0; }
    & .mk-blog-item-body { padding: 1.125rem 1.25rem 1.25rem; }
    & .mk-blog-item-byline { padding-block-start: 0.75rem; margin-block-start: auto; border-block-start: 1px solid var(--border); }
  }

  /* minimal: typographic - the date in a column, no image */
  .mk-blog-item[data-variant="minimal"] {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 0 1.5rem;
    padding-block: 1.25rem;
    border-block-end: 1px solid var(--border);

    & .mk-blog-item-media { display: none; }
    & .mk-blog-item-body { display: contents; }
    & .mk-blog-item-byline { grid-column: 1; grid-row: 1 / span 3; flex-direction: column; align-items: flex-start; gap: 0.125rem; padding: 0.25rem 0 0; margin: 0; }
    & :is(.mk-blog-item-byline .avatar, .mk-blog-item-author) { display: none; }
    & :is(.mk-blog-item-meta, .mk-blog-item-title, .mk-blog-item-excerpt, .mk-blog-item-tags) { grid-column: 2; }
    & .mk-blog-item-title { font-size: 1.375rem; }
    &:hover .mk-blog-item-title { text-decoration: underline; text-underline-offset: 0.2em; }
  }

  /* quote: a post that leads with a pull quote */
  .mk-blog-item[data-variant="quote"] {
    justify-content: space-between;
    min-height: 16rem;
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    background: var(--primary);
    color: var(--primary-foreground);

    & .mk-blog-item-media { display: none; }
    & .mk-blog-item-title {
      font-family: var(--font-serif);
      font-size: 1.5rem;
      font-weight: 600;
      line-height: 1.3;

      &::before { content: "“"; display: block; font-size: 3rem; line-height: 0.6; opacity: 0.5; }
    }
    & :is(.mk-blog-item-meta, .mk-blog-item-excerpt, .mk-blog-item-date) { color: color-mix(in oklch, var(--primary-foreground) 75%, transparent); }
    & .mk-blog-item-meta .badge { background: color-mix(in oklch, var(--primary-foreground) 15%, transparent); color: inherit; }
  }

  /* podcast: a square cover beside the copy, a player under it */
  .mk-blog-item[data-variant="podcast"] {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 0 1.25rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);

    & .mk-blog-item-media { aspect-ratio: 1; border-radius: var(--radius-md); }
    & .mk-blog-item-excerpt { -webkit-line-clamp: 2; }
    & .mk-blog-item-byline { padding-block-start: 0.25rem; }
  }
  .mk-blog-item-player {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    width: 100%;
    height: 2.5rem;
    margin-block-start: 0.875rem;
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-blog-item-media img { transition: none; }
    .mk-blog-item:hover .mk-blog-item-media img { scale: none; }
    .mk-blog-item[data-variant="card"] { transition: none; }
    .mk-blog-item[data-variant="card"]:hover { translate: none; }
  }

  @media (prefers-contrast: more) {
    .mk-blog-item-excerpt,
    .mk-blog-item-meta { color: var(--foreground); }
  }

  @media (forced-colors: active) {
    .mk-blog-item-title a { color: LinkText; }
    .mk-blog-item[data-variant="featured"] { border: 1px solid CanvasText; }
  }
}

/* ── components/booking-form/booking-form.css ── */
/* -- Booking Form (website · Events & Promotions) -------------------------
   Collects a service selection, available slot, and customer details - radio cards, a native date, time chips and the contact fields. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-booking-form, .mk-booking-form *, .mk-booking-form ::before, .mk-booking-form ::after) { box-sizing: border-box; }

  .mk-booking-form { container: mk-booking-form / inline-size; width: 100%; }
  .mk-booking-form form { display: grid; gap: 2rem; }
  .mk-booking-form-group { display: grid; gap: 0.75rem; margin: 0; padding: 0; border: 0; min-width: 0;
    & legend { margin-block-end: 0.75rem; padding: 0; font-size: 1rem; font-weight: 600; }
  }
  .mk-booking-form-options { display: grid; gap: 0.5rem; }
  .mk-booking-form-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;

    & span { display: grid; }
    & small { color: var(--muted-foreground); font-size: 0.8125rem; }
    & b { font-variant-numeric: tabular-nums; }
    &:hover { border-color: color-mix(in oklch, var(--foreground) 30%, var(--border)); }
    &:has(input:checked) { border-color: var(--primary); background: color-mix(in oklch, var(--primary) 6%, transparent); box-shadow: 0 0 0 1px var(--primary); }
  }
  .mk-booking-form-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 0.5rem; }
  .mk-booking-form-slot {
    position: relative;
    display: grid;

    & input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
    & span { display: grid; place-items: center; height: 2.5rem; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; font-variant-numeric: tabular-nums; transition: background-color 150ms ease, color 150ms ease; }
    &:hover span { border-color: color-mix(in oklch, var(--foreground) 30%, var(--border)); }
    & input:checked + span { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
    & input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
    & input:disabled { cursor: not-allowed; }
    & input:disabled + span { color: var(--muted-foreground); text-decoration: line-through; opacity: 0.55; background: var(--muted); }
  }
  .mk-booking-form-tz { color: var(--muted-foreground); font-size: 0.8125rem; }
  .mk-booking-form-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1rem; }
  .mk-booking-form-field { display: grid; gap: 0.375rem; &[data-span="full"] { grid-column: 1 / -1; } }
  .mk-booking-form-summary {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    background: var(--muted);

    & p { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; }
    & .btn { width: 100%; }
  }
  .mk-booking-form-layout { display: grid; gap: 2rem; }

  .mk-booking-form[data-variant="compact"] { max-width: 28rem; padding: 1.5rem; border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground); }

  @container mk-booking-form (min-width: 52rem) {
    .mk-booking-form-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-booking-form-option, .mk-booking-form-slot span { transition: none; }
  }

  @media (forced-colors: active) {
    .mk-booking-form-option:has(input:checked) { border-color: Highlight; }
    .mk-booking-form-slot input:checked + span { background: Highlight; color: HighlightText; }
  }
}

/* ── components/border-layout/border-layout.css ── */
/* -- Border Layout component --------------------------------------
   An application frame in five regions - north, south, west, east around a
   center - on a CSS grid. Every side region that should resize is a
   .resizer wrapping its pane: inside a border layout the resizer's handle
   becomes a full-length divider (line, optional grip), dragged or moved with
   the arrow keys. Regions left out collapse, so the same frame is a
   horizontal split, a vertical split, three columns... */

@layer components {
  .border-layout {
    /* the divider, themable per layout or per region */
    --_line-width: var(--border-layout-divider-width, 1px);
    --_line-style: solid;
    --_line-color: var(--border-layout-divider-color, var(--border));
    --_accent: var(--border-layout-accent, var(--ring));
    --_hit: 0.75rem;
    --_gap: 0px;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    /* north and south dominate: they span the full width */
    grid-template-areas:
      "north north north"
      "west  center east"
      "south south south";
    gap: var(--_gap);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    color: var(--card-foreground);

    /* west and east dominate: they span the full height */
    &[data-dominant="we"] {
      grid-template-areas:
        "west north  east"
        "west center east"
        "west south  east";
    }

    /* no frame of its own - fills a window or a page */
    &[data-frame="none"] {
      border: 0;
      border-radius: 0;
      background: transparent;
    }
  }

  .border-layout > .border-layout-north { grid-area: north; }
  .border-layout > .border-layout-south { grid-area: south; }
  .border-layout > .border-layout-west { grid-area: west; }
  .border-layout > .border-layout-east { grid-area: east; }
  .border-layout > .border-layout-center {
    grid-area: center;
    min-width: 0;
    min-height: 0;
    overflow: auto;
  }

  /* -- Regions ------------------------------------------------------ */
  /* a resizable region: the resizer wrapper fills its grid cell, its pane
     stretches across the other axis and carries the size on its own */
  .border-layout > .resizer {
    display: flex;
    width: auto;
    min-width: 0;
    min-height: 0;
  }
  .border-layout > :is(.border-layout-north, .border-layout-south).resizer { flex-direction: column; }
  .border-layout > .resizer > :not(.resizer-handle) {
    flex: none;
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    overflow: auto;
  }
  /* the pane of a collapsed region is gone; its divider stays to bring it back */
  .border-layout > .resizer[data-collapsed] > :not(.resizer-handle) { display: none; }

  /* a region that does not resize still gets the divider line */
  .border-layout > .border-layout-north:not(.resizer) { border-block-end: var(--_line-width) var(--_line-style) var(--_line-color); }
  .border-layout > .border-layout-south:not(.resizer) { border-block-start: var(--_line-width) var(--_line-style) var(--_line-color); }
  .border-layout > .border-layout-west:not(.resizer) { border-inline-end: var(--_line-width) var(--_line-style) var(--_line-color); }
  .border-layout > .border-layout-east:not(.resizer) { border-inline-start: var(--_line-width) var(--_line-style) var(--_line-color); }

  /* padding for panes that hold text (optional) */
  .border-layout-pane { padding: 0.75rem; }

  /* -- Dividers: the resizer handle, redrawn --------------------------- */
  .border-layout > .resizer > .resizer-handle {
    z-index: 5;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    color: var(--muted-foreground);

    /* the line */
    &::before {
      content: "";
      position: absolute;
      transition: border-color 120ms;
    }
    /* the grip - hidden unless data-grip asks for one */
    &::after {
      content: none;
      inset: auto;
    }

    &:hover,
    &:focus-visible { background: transparent; outline: none; }
    &:is(:hover, :focus-visible)::before { border-color: var(--_accent); }
    &:focus-visible::after { outline: 2px solid var(--_accent); outline-offset: 1px; }

    /* vertical dividers: west's east edge, east's west edge */
    &:is([data-handle="e"], [data-handle="w"]) {
      top: 0;
      bottom: 0;
      width: var(--_hit);
      cursor: col-resize;
      &::before {
        inset-block: 0;
        left: 50%;
        border-inline-start: var(--_line-width) var(--_line-style) var(--_line-color);
        translate: -50% 0;
      }
    }
    &[data-handle="e"] { right: 0; left: auto; translate: calc(50% + var(--_gap) / 2) 0; }
    &[data-handle="w"] { left: 0; right: auto; translate: calc(-50% - var(--_gap) / 2) 0; }

    /* horizontal dividers: north's south edge, south's north edge */
    &:is([data-handle="n"], [data-handle="s"]) {
      left: 0;
      right: 0;
      height: var(--_hit);
      cursor: row-resize;
      &::before {
        inset-inline: 0;
        top: 50%;
        border-block-start: var(--_line-width) var(--_line-style) var(--_line-color);
        translate: 0 -50%;
      }
    }
    &[data-handle="s"] { bottom: 0; top: auto; translate: 0 calc(50% + var(--_gap) / 2); }
    &[data-handle="n"] { top: 0; bottom: auto; translate: 0 calc(-50% - var(--_gap) / 2); }
  }

  /* dragging: the divider lights up; the resizer's own box outline stays off */
  .border-layout > .resizer[data-resizing] {
    outline: none;
    & > .resizer-handle { background: transparent; }
    & > .resizer-handle::before { border-color: var(--_accent); }
  }

  /* -- Grips: data-grip on the layout (every divider) or on one region -- */
  :is(.border-layout[data-grip] > .resizer, .border-layout > .resizer[data-grip]) > .resizer-handle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    box-sizing: border-box;
    border-radius: var(--radius-sm);
  }
  /* dots: a small card with a dotted grip */
  :is(.border-layout[data-grip="dots"] > .resizer, .border-layout > .resizer[data-grip="dots"]) > .resizer-handle::after {
    width: 0.75rem;
    height: 1.25rem;
    border: 1px solid var(--_line-color);
    background:
      radial-gradient(circle, currentColor 0.75px, transparent 1.25px) center / 4px 4px,
      var(--background);
  }
  /* bar: a pill across the line */
  :is(.border-layout[data-grip="bar"] > .resizer, .border-layout > .resizer[data-grip="bar"]) > .resizer-handle::after {
    width: 0.25rem;
    height: 2rem;
    border-radius: 999px;
    background: color-mix(in oklch, var(--foreground) 35%, var(--_line-color));
  }
  /* data-grip="none" - on the layout (regions without their own grip) or one
     region - switches it off; more specific than the rules above */
  :is(.border-layout[data-grip="none"] > .resizer:not([data-grip]), .border-layout > .resizer[data-grip="none"]) > .resizer-handle::after { content: none; }
  /* horizontal dividers turn the grip sideways */
  .border-layout .resizer > .resizer-handle:is([data-handle="n"], [data-handle="s"])::after { rotate: 90deg; }
  .border-layout .resizer > .resizer-handle:is(:hover, :focus-visible)::after { border-color: var(--_accent); }

  /* -- Divider styles (data-divider on the layout or one region) ----------- */
  :is(.border-layout, .border-layout > .resizer, .border-layout > [class*="border-layout-"]) {
    &[data-divider="dashed"] { --_line-style: dashed; }
    &[data-divider="dotted"] { --_line-style: dotted; --_line-width: var(--border-layout-divider-width, 2px); }
    &[data-divider="double"] { --_line-style: double; --_line-width: var(--border-layout-divider-width, 4px); }
    &[data-divider="thick"] { --_line-width: var(--border-layout-divider-width, 4px); --_line-color: var(--border-layout-divider-color, var(--muted)); }
    &[data-divider="none"] { --_line-width: 0px; }
  }
  /* gap: the regions float as cards in a gutter, the divider lives in the gutter */
  .border-layout[data-divider="gap"] {
    --_gap: 0.5rem;
    --_line-width: 0px;
    padding: var(--_gap);
    background: var(--muted);

    & > :is(.border-layout-north, .border-layout-south, .border-layout-west, .border-layout-east, .border-layout-center):not(.resizer),
    & > .resizer > :not(.resizer-handle) {
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      background: var(--card);
    }
  }

  /* -- Accessibility -------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .border-layout > .resizer > .resizer-handle::before { transition: none; }
  }

  @media (prefers-contrast: more) {
    .border-layout { --_line-color: var(--foreground); }
  }

  @media (forced-colors: active) {
    .border-layout { border: 1px solid CanvasText; --_line-color: CanvasText; --_accent: Highlight; }
    .border-layout > .resizer > .resizer-handle::before { forced-color-adjust: none; }
  }
}

/* ── components/brand-logos/brand-logos.css ── */
/* -- Brand Logos (marketing) ---------------------------------------
   "Trusted by" row: inline SVG marks inherit currentColor so logos
   recolor with --muted-foreground under any theme. Wraps freely. */

@layer components {
  .mk-logos {
    container: mk-logos / inline-size;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
  }

  .mk-logos-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 2.5rem;
    row-gap: 1.75rem;
  }

  /* the mark links out to the brand - no underline. Ink color tracks the
     theme (black in light, white in dark) via --foreground; the name text
     stays muted so the marks read first. */
  .mk-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    color: var(--foreground);
    text-decoration: none;
    border-radius: var(--radius-md);
    opacity: 0.75;
    transition: opacity 150ms ease;

    &:hover { opacity: 1; }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }

    & svg { width: 1.875rem; height: 1.875rem; aspect-ratio: 1; flex-shrink: 0; fill: currentColor; }
    & .mk-logo-name { color: var(--muted-foreground); }
  }

  .mk-logo-name {
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: -0.025em;
    white-space: nowrap;
  }

  .mk-logos-caption {
    margin: 0;
    text-align: center;
    color: var(--muted-foreground);
    font-size: 0.875rem;
  }

  @container mk-logos (min-width: 30rem) {
    .mk-logo svg { width: 2.5rem; height: 2.5rem; }
    .mk-logo-name { font-size: 1.25rem; }
  }

  /* -- Rolling marquee ------------------------------------------
     Continuous speed-based roll (a slow ticker, not step sliding):
     the track holds the logo set TWICE - the second copy carries
     aria-hidden="true" + tabindex="-1" - and translates by exactly
     -50%, so the loop restarts on identical content (seamless).
     `gap` between items plus an equal padding at the track's end
     keeps each copy exactly half the border box wide (transform
     percentages measure the border box, padding included). */
  .mk-logos-roll {
    --mk-logos-roll-duration: 30s;
    --mk-logos-roll-height: 12rem;
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
    mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  }

  .mk-logos-roll-track {
    display: flex;
    align-items: center;
    gap: 2.5rem; /* matches .mk-logos-row column-gap */
    padding-inline-end: 2.5rem;
    width: max-content;
    animation: mk-logos-roll var(--mk-logos-roll-duration, 30s) linear infinite;
  }

  .mk-logos-roll:hover .mk-logos-roll-track,
  .mk-logos-roll:focus-within .mk-logos-roll-track { animation-play-state: paused; }

  /* vertical roll: column track in a fixed-height viewport, mask on
     the block edges instead */
  .mk-logos-roll[data-direction="y"] {
    height: var(--mk-logos-roll-height, 12rem);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
  }

  .mk-logos-roll[data-direction="y"] .mk-logos-roll-track {
    flex-direction: column;
    margin-inline: auto;
    padding-inline-end: 0;
    padding-block-end: 2.5rem;
    animation-name: mk-logos-roll-y;
  }

  @keyframes mk-logos-roll {
    to { transform: translateX(-50%); }
  }

  @keyframes mk-logos-roll-y {
    to { transform: translateY(-50%); }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-logo { transition: none; }

    /* static fallback: the roll collapses back into the plain wrapped
       row and the duplicated copy drops out so nothing renders twice */
    .mk-logos-roll,
    .mk-logos-roll[data-direction="y"] { height: auto; }
    .mk-logos-roll-track {
      animation: none;
      flex-wrap: wrap;
      justify-content: center;
      width: auto;
      padding-inline-end: 0;
      padding-block-end: 0;
    }
    .mk-logos-roll[data-direction="y"] .mk-logos-roll-track { flex-direction: row; animation: none; }
    .mk-logos-roll-track > [aria-hidden="true"] { display: none; }
  }

  @media (forced-colors: active) {
    .mk-logo { color: CanvasText; }
    /* masks hide content in forced-colors mode - show the full roll */
    .mk-logos-roll,
    .mk-logos-roll[data-direction="y"] { -webkit-mask-image: none; mask-image: none; }
  }
}

/* ── components/breadcrumb/breadcrumb.css ── */
@layer components {
  .breadcrumb-list {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.375rem; list-style: none; margin: 0; padding: 0;
    font-size: 0.875rem;
  }
  .breadcrumb-item { display: inline-flex; align-items: center; gap: 0.375rem; }
  .breadcrumb-link {
    color: var(--muted-foreground); text-decoration: none;
    border-radius: var(--radius-sm); outline: none;
    transition: color 150ms ease;
    &:hover { color: var(--foreground); }
    /* only a real link underlines - a .breadcrumb-link button (dropdown /
       ellipsis trigger) is not navigation and keeps the color-only hover */
    &:is(a[href]):hover {
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  }
  /* -- Sizes ------------------------------------------------------
     data-size on the .breadcrumb nav scales the trail's type and separators,
     mirroring the shared field/button ladder (md = 0.875rem = default). */
  .breadcrumb[data-size="xs"] .breadcrumb-list { font-size: 0.75rem; }
  .breadcrumb[data-size="xs"] .breadcrumb-separator svg { width: 0.75rem; height: 0.75rem; }
  .breadcrumb[data-size="sm"] .breadcrumb-list { font-size: 0.8125rem; }
  .breadcrumb[data-size="md"] .breadcrumb-list { font-size: 0.875rem; }
  .breadcrumb[data-size="lg"] .breadcrumb-list { font-size: 1rem; }
  .breadcrumb[data-size="lg"] .breadcrumb-separator svg { width: 1rem; height: 1rem; }
  .breadcrumb[data-size="xl"] .breadcrumb-list { font-size: 1.125rem; }
  .breadcrumb[data-size="xl"] .breadcrumb-separator svg { width: 1.125rem; height: 1.125rem; }

  .breadcrumb-separator {
    color: var(--muted-foreground); font-size: 0.75rem;
    /* flex (not inline): an inline <svg> sits on the text baseline, so icon
       separators render a few px above the labels' optical center */
    display: flex; align-items: center;
    & svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }

    /* RTL: auto-flip chevron separators */
    [dir="rtl"] & svg { scale: -1 1; }
  }
  .breadcrumb-page { color: var(--foreground); font-weight: 400; }

  /* -- Icons / emoji in front of a crumb ---------------------------
     An <svg> or a <span class="breadcrumb-icon"> (emoji) before the label:
     link and page line them up on the label's center and size them to the
     text (1em - so data-size scales them too). */
  .breadcrumb-link, .breadcrumb-page {
    &:has(> :is(svg, .breadcrumb-icon)) {
      display: inline-flex;
      align-items: center;
      gap: 0.375em;
    }
    & > svg { width: 1em; height: 1em; flex-shrink: 0; }
  }
  .breadcrumb-icon {
    display: inline-grid;
    place-items: center;
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
    line-height: 1;
    font-style: normal;
  }
  .breadcrumb-ellipsis {
    display: flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; color: var(--muted-foreground);
    & span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    .breadcrumb-link { transition: none; }
  }

  @media (prefers-contrast: more) {
    .breadcrumb-link { text-decoration: underline; }
    .breadcrumb-page { font-weight: 600; }
  }

  @media (forced-colors: active) {
    .breadcrumb-link {
      &:hover { forced-color-adjust: none; color: HighlightText; background: Highlight; }
    }
    .breadcrumb-page { color: CanvasText; }
    .breadcrumb-separator { color: GrayText; }
  }
}

/* ── components/breadcrumbs/breadcrumbs.css ── */
/* -- Breadcrumbs (website · Search & Navigation) --------------------------
   Shows the current position within a content hierarchy - the trail above the page title, collapsing to a back link on small screens, or hiding the middle levels in a menu. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-breadcrumbs, .mk-breadcrumbs *, .mk-breadcrumbs ::before, .mk-breadcrumbs ::after) { box-sizing: border-box; }

  .mk-breadcrumbs { container: mk-breadcrumbs / inline-size; display: grid; gap: 0.5rem; width: 100%;
    & .breadcrumb-link svg { width: 0.875rem; height: 0.875rem; vertical-align: -0.125rem; }
  }
  .mk-breadcrumbs-back { display: none; align-items: center; gap: 0.25rem; width: fit-content; color: var(--muted-foreground); font-size: 0.875rem; text-decoration: none;
    & svg { width: 1rem; height: 1rem; }
    &:hover { color: var(--foreground); }
  }
  .mk-breadcrumbs-title { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
  .mk-breadcrumbs-more { display: grid; place-items: center; width: 1.75rem; height: 1.5rem; padding: 0; border: 0; border-radius: var(--radius-sm); background: var(--muted); color: var(--muted-foreground); cursor: pointer;
    &:hover { color: var(--foreground); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
    & svg { width: 1rem; height: 1rem; }
  }
  .mk-breadcrumbs-menu { margin: 0; padding: 0.25rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--popover); box-shadow: var(--shadow-lg);
    & ul { display: grid; margin: 0; padding: 0; list-style: none; }
    & a { display: block; padding: 0.375rem 0.75rem; border-radius: var(--radius-sm); color: var(--popover-foreground); font-size: 0.875rem; text-decoration: none; }
    & a:hover { background: var(--accent); }
  }
  @supports (position-anchor: --a) {
    .mk-breadcrumbs-menu { inset: auto; margin-block-start: 0.25rem; position-area: bottom span-right; }
  }

  @container mk-breadcrumbs (max-width: 30rem) {
    .mk-breadcrumbs:not([data-variant]) .breadcrumb { display: none; }
    .mk-breadcrumbs:not([data-variant]) .mk-breadcrumbs-back { display: inline-flex; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-breadcrumbs-more { border: 1px solid ButtonText; }
  }
}

/* ── components/bubble/bubble.css ── */
/* -- Bubble component ---------------------------------------------- */
/* A chat message bubble: the surface only - avatars, names, timestamps and
   message actions belong to a message row around it. CSS only. */

@layer components {
  .bubble {
    --_bg: var(--primary);
    --_fg: var(--primary-foreground);
    --_bd: transparent;
    --_r: 1.125rem;
    --_rs: 0.3125rem;
    --_px: 0.875rem;
    --_py: 0.5rem;
    --_fs: 0.875rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    max-width: 80%;
    min-width: 0;

    /* -- Alignment: start = the other side (received), end = you (sent) */
    &[data-align="end"],
    .bubble-group[data-align="end"] > & {
      margin-inline-start: auto;
      align-items: flex-end;
    }

    /* -- Variants -------------------------------------------------- */
    &[data-variant="secondary"] { --_bg: var(--secondary); --_fg: var(--secondary-foreground); }
    &[data-variant="muted"] { --_bg: var(--muted); --_fg: var(--muted-foreground); }
    &[data-variant="tinted"] { --_bg: color-mix(in oklch, var(--primary) 12%, var(--background)); --_fg: var(--foreground); }
    &[data-variant="outline"] { --_bg: var(--background); --_fg: var(--foreground); --_bd: var(--border); }
    &[data-variant="destructive"] { --_bg: color-mix(in oklch, var(--destructive) 12%, var(--background)); --_fg: var(--destructive); --_bd: color-mix(in oklch, var(--destructive) 30%, transparent); }
    &[data-variant="ghost"] {
      --_bg: transparent;
      --_fg: var(--foreground);
      --_px: 0;
      max-width: none;
      width: 100%;
    }

    /* -- Sizes ------------------------------------------------------ */
    &[data-size="sm"] { --_r: 0.875rem; --_px: 0.625rem; --_py: 0.3125rem; --_fs: 0.8125rem; }
    &[data-size="lg"] { --_r: 1.375rem; --_px: 1.125rem; --_py: 0.75rem; --_fs: 1rem; }
  }

  .bubble-content {
    box-sizing: border-box;
    max-width: 100%;
    padding: var(--_py) var(--_px);
    border: 1px solid var(--_bd);
    border-radius: var(--_r);
    background: var(--_bg);
    color: var(--_fg);
    font: inherit;
    font-size: var(--_fs);
    line-height: 1.45;
    text-align: start;
    text-wrap: pretty;
    overflow-wrap: anywhere;

    & > :first-child { margin-block-start: 0; }
    & > :last-child { margin-block-end: 0; }
    & p { margin-block: 0 0.5em; }
    & a:not(.bubble-content) { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
    & code { font-family: var(--font-mono); font-size: 0.9em; padding: 0.0625rem 0.3125rem; border-radius: 0.3125rem; background: color-mix(in oklch, currentColor 12%, transparent); }
    & img, & video { display: block; max-width: 100%; height: auto; border-radius: calc(var(--_r) - 0.375rem); }
    & :is(ul, ol) { margin-block: 0.25em 0.5em; padding-inline-start: 1.25em; }

    /* a whole bubble as a link or a button (quick replies, options) */
    &:is(a, button) {
      appearance: none;
      cursor: pointer;
      text-decoration: none;
      transition: background-color 150ms ease, border-color 150ms ease;
      &:hover { background: color-mix(in oklch, var(--_bg) 88%, var(--_fg)); }
      &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
      &:disabled, &[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
    }
  }
  .bubble[data-variant="ghost"] > .bubble-content:is(a, button):hover { background: var(--accent); }

  /* -- Media bubble: an image / video edge to edge ------------------ */
  .bubble-content[data-media] {
    padding: 0;
    overflow: hidden;
    & img, & video { border-radius: 0; }
    & .bubble-caption { padding: var(--_py) var(--_px); }
  }

  /* -- Collapsible content: a preview, the rest in a <details> ------- */
  .bubble-more {
    display: flex;
    flex-direction: column-reverse;

    & > summary {
      list-style: none;
      width: fit-content;
      margin-block-start: 0.25rem;
      font-weight: 500;
      text-decoration: underline;
      text-underline-offset: 2px;
      cursor: pointer;
      &::-webkit-details-marker { display: none; }
      &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 0.25rem; }
    }
    & .bubble-more-open { display: none; }
    &[open] .bubble-more-open { display: inline; }
    &[open] .bubble-more-closed { display: none; }
    &::details-content {
      interpolate-size: allow-keywords;
      block-size: 0;
      overflow: clip;
      transition: block-size 220ms ease, content-visibility 220ms allow-discrete;
    }
    &[open]::details-content { block-size: auto; }
  }

  /* -- Reactions: overlapped emoji anchored to the bubble's edge ------- */
  .bubble-reactions {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    align-self: flex-end;
    margin-block-start: -0.5rem;
    margin-inline: 0.625rem;
    padding: 0.125rem;
    border-radius: 9999px;
    background: var(--background);
    box-shadow: 0 0 0 1px var(--border), var(--shadow-xs);
    font-size: 0.75rem;
    line-height: 1;

    & > * {
      display: grid;
      place-items: center;
      min-width: 1.375rem;
      height: 1.375rem;
      border-radius: 9999px;
      background: var(--background);
    }
    & > * + * { margin-inline-start: -0.3125rem; box-shadow: -2px 0 0 var(--background); }
    & > .bubble-reactions-count {
      padding-inline: 0.25rem 0.375rem;
      font-weight: 500;
      font-variant-numeric: tabular-nums;
      color: var(--muted-foreground);
      box-shadow: none;
      margin-inline-start: 0;
    }
    &[data-align="start"] { align-self: flex-start; }
    &[data-side="top"] { order: -1; margin-block: 0 -0.5rem; }
  }
  [dir="rtl"] .bubble-reactions > * + * { box-shadow: 2px 0 0 var(--background); }

  /* -- Group: consecutive bubbles of one sender, the joined corners
     tightened (logical radii, so RTL mirrors) ---------------------- */
  .bubble-group {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;

    & > .bubble { max-width: 80%; }
    & > .bubble:has(> .bubble-reactions:not([data-side="top"])):not(:last-child) { margin-block-end: 0.375rem; }

    /* received (start): the start-side corners between neighbours */
    &:not([data-align="end"]) > .bubble:not([data-align="end"]) {
      &:not(:last-child) > .bubble-content { border-end-start-radius: var(--_rs); }
      &:not(:first-child) > .bubble-content { border-start-start-radius: var(--_rs); }
    }
    /* sent (end) */
    &[data-align="end"] > .bubble, & > .bubble[data-align="end"] {
      &:not(:last-child) > .bubble-content { border-end-end-radius: var(--_rs); }
      &:not(:first-child) > .bubble-content { border-start-end-radius: var(--_rs); }
    }
  }

  /* -- Tail: data-tail on a bubble (or a group - its last bubble) draws
     a small curved tail at the bottom outer corner ------------------ */
  :is(.bubble[data-tail], .bubble-group[data-tail] > .bubble:last-child):not([data-variant="ghost"], [data-variant="outline"], [data-variant="destructive"]) > .bubble-content {
    position: relative;
    border-end-start-radius: var(--_rs);

    &::before {
      /* thick against the bubble, tapering to a point at the outer bottom:
         an SVG path mask, mirrored for the end side and RTL */
      content: "";
      position: absolute;
      inset-block-end: -1px;
      inset-inline-start: -0.75rem;
      width: 0.875rem;
      height: 1.25rem;
      background: var(--_bg);
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20' preserveAspectRatio='none'%3E%3Cpath d='M14 1C14 11 9 18 0 20H14Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20' preserveAspectRatio='none'%3E%3Cpath d='M14 1C14 11 9 18 0 20H14Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    }
  }
  :is(.bubble[data-tail][data-align="end"], .bubble-group[data-tail][data-align="end"] > .bubble:last-child, .bubble-group[data-tail] > .bubble[data-align="end"]:last-child):not([data-variant="ghost"], [data-variant="outline"], [data-variant="destructive"]) > .bubble-content {
    border-end-start-radius: var(--_r);
    border-end-end-radius: var(--_rs);

    &::before {
      inset-inline-start: auto;
      inset-inline-end: -0.75rem;
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20' preserveAspectRatio='none'%3E%3Cpath d='M0 1C0 11 5 18 14 20H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20' preserveAspectRatio='none'%3E%3Cpath d='M0 1C0 11 5 18 14 20H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    }
  }
  [dir="rtl"] :is(.bubble[data-tail], .bubble-group[data-tail] > .bubble:last-child) > .bubble-content::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20' preserveAspectRatio='none'%3E%3Cpath d='M0 1C0 11 5 18 14 20H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20' preserveAspectRatio='none'%3E%3Cpath d='M0 1C0 11 5 18 14 20H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  }
  [dir="rtl"] :is(.bubble[data-tail][data-align="end"], .bubble-group[data-tail][data-align="end"] > .bubble:last-child, .bubble-group[data-tail] > .bubble[data-align="end"]:last-child) > .bubble-content::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20' preserveAspectRatio='none'%3E%3Cpath d='M14 1C14 11 9 18 0 20H14Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20' preserveAspectRatio='none'%3E%3Cpath d='M14 1C14 11 9 18 0 20H14Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  }

  /* -- Typing: three dots that bounce while the other side writes ---- */
  .bubble-typing {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: calc(var(--_fs) * 1.45);

    & > span {
      width: 0.4375rem;
      height: 0.4375rem;
      border-radius: 9999px;
      background: currentColor;
      opacity: 0.45;
      animation: bubble-typing 1.2s ease-in-out infinite;
      &:nth-child(2) { animation-delay: 0.15s; }
      &:nth-child(3) { animation-delay: 0.3s; }
    }
  }
  @keyframes bubble-typing {
    0%, 60%, 100% { translate: 0 0; opacity: 0.45; }
    30% { translate: 0 -0.25rem; opacity: 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer components {
    .bubble-typing > span { animation: none; opacity: 0.7; }
    .bubble-more::details-content { transition: none; }
    .bubble-content:is(a, button) { transition: none; }
  }
}

@media (prefers-contrast: more) {
  @layer components {
    .bubble-content { border-color: var(--foreground); }
    .bubble[data-variant="ghost"] > .bubble-content { border-color: transparent; }
  }
}

@media (forced-colors: active) {
  @layer components {
    .bubble-content { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
    .bubble[data-variant="default"] > .bubble-content, .bubble:not([data-variant]) > .bubble-content { background: Highlight; color: HighlightText; forced-color-adjust: none; }
    .bubble-content::before { display: none; }
    .bubble-reactions { box-shadow: none; border: 1px solid CanvasText; }
  }
}

/* ── components/button/button.css ── */
/* -- Button component ------------------------------------------ */

@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-sans);
    line-height: 1;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 150ms ease;
    outline: none;
    flex-shrink: 0;
    height: 2.25rem;
    padding: 0 1rem;
    background-color: var(--primary);
    color: var(--primary-foreground);

    & svg {
      pointer-events: none;
      flex-shrink: 0;

      &:not([class*="size-"]) { width: 1rem; height: 1rem; }
    }

    /* a loading .spinner inside a button takes the button's own text color —
       spinner.css defaults it to --muted-foreground, invisible on a primary */
    & .spinner { color: inherit; }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    &:disabled, &[aria-disabled="true"] {
      pointer-events: none;
      opacity: 0.5;
    }

    /* Loading state (aria-busy + a .spinner child): a disabled button must
       freeze its spinner - "pending" is signaled by the dimming, a frozen
       wheel is the accepted pattern; only an ENABLED busy button spins. */
    &:disabled .spinner,
    &[aria-disabled="true"] .spinner {
      animation-play-state: paused;
    }

    /* -- Variants -------------------------------------------- */
    &[data-variant="default"] {
      background-color: var(--primary);
      color: var(--primary-foreground);

      &:hover { opacity: 0.9; }
    }

    &[data-variant="secondary"] {
      background-color: var(--secondary);
      color: var(--secondary-foreground);

      /* --secondary is near-white in light themes, so an opacity fade would
         wash the button further into the page background (invisible hover).
         Mixing in the foreground color instead darkens light themes and
         lightens dark ones - always moving away from the page surface. */
      &:hover {
        background-color: color-mix(in oklch, var(--secondary) 85%, var(--secondary-foreground));
      }
    }

    &[data-variant="outline"] {
      background-color: var(--background);
      color: var(--foreground);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-xs);

      &:hover {
        background-color: var(--accent);
        color: var(--accent-foreground);
      }
    }

    &[data-variant="ghost"] {
      background-color: transparent;
      color: var(--foreground);
      border-color: transparent;

      &:hover {
        background-color: var(--accent);
        color: var(--accent-foreground);
      }
    }

    &[data-variant="destructive"] {
      background-color: var(--destructive);
      color: var(--destructive-foreground);

      &:hover { opacity: 0.9; }
    }

    &[data-variant="link"] {
      background-color: transparent;
      color: var(--primary);
      height: auto;
      padding: 0;
      text-underline-offset: 4px;

      &:hover { text-decoration: underline; }
    }

    /* soft: a tint of the color, text in the color */
    &[data-variant="soft"] {
      background-color: color-mix(in oklch, var(--primary) 12%, transparent);
      color: color-mix(in oklch, var(--primary) 80%, var(--foreground));

      &:hover { background-color: color-mix(in oklch, var(--primary) 20%, transparent); }
    }

    /* dashed: a drop-zone / "add" look */
    &[data-variant="dashed"] {
      background-color: transparent;
      color: var(--foreground);
      border: 1px dashed color-mix(in oklch, var(--foreground) 35%, transparent);

      &:hover {
        background-color: var(--accent);
        color: var(--accent-foreground);
        border-style: solid;
      }
    }

    /* -- Tones: any variant in another color -------------------
       data-tone="success" / "warning" / "info" / "destructive" - or
       data-tone="custom" with style="--btn-color: …; --btn-color-fg: …"
       (the text on a solid fill, default white). Solid buttons fill with the
       tone; outline / ghost / soft / dashed / link write in it, mixed toward
       the foreground so a light tone (amber) stays readable. */
    &[data-tone] {
      --_tone: var(--btn-color, var(--primary));
      --_tone-fg: var(--btn-color-fg, #fff);
      --_tone-ink: color-mix(in oklch, var(--_tone) 78%, var(--foreground));
    }
    &[data-tone="success"] { --_tone: oklch(0.6 0.15 150); }
    &[data-tone="warning"] { --_tone: oklch(0.8 0.16 80); --_tone-fg: oklch(0.28 0.06 60); }
    &[data-tone="info"] { --_tone: oklch(0.6 0.16 250); }
    &[data-tone="destructive"] { --_tone: var(--destructive); --_tone-fg: var(--destructive-foreground, #fff); }

    &[data-tone]:is(:not([data-variant]), [data-variant="default"]) {
      background-color: var(--_tone);
      color: var(--_tone-fg);

      &:hover { opacity: 0.9; }
    }
    &[data-tone][data-variant="outline"] {
      background-color: transparent;
      color: var(--_tone-ink);
      border-color: var(--_tone);

      &:hover { background-color: color-mix(in oklch, var(--_tone) 12%, transparent); color: var(--_tone-ink); }
    }
    &[data-tone]:is([data-variant="ghost"], [data-variant="dashed"]) {
      color: var(--_tone-ink);

      &:hover { background-color: color-mix(in oklch, var(--_tone) 14%, transparent); color: var(--_tone-ink); }
    }
    &[data-tone][data-variant="dashed"] { border-color: var(--_tone); }
    &[data-tone][data-variant="soft"] {
      background-color: color-mix(in oklch, var(--_tone) 16%, transparent);
      color: var(--_tone-ink);

      &:hover { background-color: color-mix(in oklch, var(--_tone) 26%, transparent); }
    }
    &[data-tone][data-variant="link"] { color: var(--_tone-ink); }

    /* -- RTL: arrows and other directional icons mirror ----------
       mark them data-rtl-flip; symmetric icons stay as they are */
    &:dir(rtl) [data-rtl-flip] { scale: -1 1; }

    /* -- Sizes ----------------------------------------------- */
    &[data-size="xs"]      { height: 1.75rem; padding: 0 0.5rem;  font-size: 0.75rem; border-radius: var(--radius-sm); }
    &[data-size="sm"]      { height: 2rem;    padding: 0 0.75rem; font-size: 0.8125rem; }
    &[data-size="md"]      { height: 2.25rem; padding: 0 1rem;    font-size: 0.875rem; }
    &[data-size="lg"]      { height: 2.75rem; padding: 0 2rem;    font-size: 1rem; }
    &[data-size="xl"]      { height: 3.25rem; padding: 0 2.5rem;  font-size: 1.125rem; }
    &[data-size="icon"]    { height: 2.25rem; width: 2.25rem;  padding: 0; }
    &[data-size="icon-xs"] { height: 1.75rem; width: 1.75rem;  padding: 0; border-radius: var(--radius-sm); }
    &[data-size="icon-sm"] { height: 2rem;    width: 2rem;     padding: 0; }
    &[data-size="icon-lg"] { height: 2.75rem; width: 2.75rem;  padding: 0; }
    &[data-size="icon-xl"] { height: 3.25rem; width: 3.25rem;  padding: 0; }
  }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    .btn { transition: none; }
  }

  @media (prefers-contrast: more) {
    .btn {
      border: 2px solid transparent;

      &[data-variant="default"],
      &[data-variant="secondary"],
      &[data-variant="destructive"] {
        border-color: currentColor;
      }

      &[data-variant="outline"],
      &[data-variant="ghost"] {
        border-color: var(--foreground);
      }
    }
  }

  @media (forced-colors: active) {
    .btn {
      border: 1px solid ButtonText;

      &:disabled, &[aria-disabled="true"] {
        border-color: GrayText;
        color: GrayText;
      }
    }
  }
}

/* ── components/button-group/button-group.css ── */
/* -- Button Group component ------------------------------------- */

@layer components {
  .btn-group {
    display: inline-flex;
    align-items: stretch;

    /* Collapse borders between adjacent buttons */
    & > .btn + .btn {
      margin-inline-start: -1px;
    }

    /* Remove internal radii for connected appearance. The orientation gate is
       :where()-wrapped so these INLINE-corner rules only ever apply to
       horizontal groups; ungated they also squared vertical buttons' corners
       at a higher specificity than the vertical block below, leaving "Top"
       with a rounded top-left but a square top-right (issue #13). */
    &:where(:not([data-orientation="vertical"])) > .btn:not(:first-child) {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }

    &:where(:not([data-orientation="vertical"])) > .btn:not(:last-child) {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }

    /* A separator JOINS the control (a split button: action | menu trigger):
       it is the one dividing line, so the buttons on either side keep their
       square inner corners and drop the border that touches it - 1px total,
       not border + rule + border with rounded inner corners (which read as
       two buttons with a gap). */
    &:where(:not([data-orientation="vertical"])) {
      & > .btn:has(+ [role="separator"]) { border-inline-end-width: 0; }
      & > [role="separator"] + .btn { border-inline-start-width: 0; }
    }

    /* Ensure hovered/focused button stacks above its neighbors */
    & > .btn:hover,
    & > .btn:focus-visible {
      position: relative;
      z-index: 1;
    }

    /* -- Separator ------------------------------------------- */
    & > [role="separator"] {
      width: 1px;
      align-self: stretch;
      background: var(--border);
      border: 0;
      margin: 0;
      padding: 0;
      flex-shrink: 0;
    }

    /* -- Vertical orientation -------------------------------- */
    &[data-orientation="vertical"] {
      flex-direction: column;
      align-items: stretch;

      & > .btn + .btn {
        margin-inline-start: 0;
        margin-top: -1px;
      }

      /* Square exactly the BLOCK corners that touch a neighbour - a
         non-first button squares its top edge, a non-last its bottom
         edge; the base .btn radius keeps every outer corner rounded on
         both sides. No per-corner "restore" overrides: the last block's
         restores re-rounded a corner the previous block had just
         squared, which (together with the ungated horizontal rules)
         produced the asymmetric Top/Middle corners of issue #13. */
      & > .btn:not(:first-child) {
        border-start-start-radius: 0;
        border-start-end-radius: 0;
      }

      & > .btn:not(:last-child) {
        border-end-start-radius: 0;
        border-end-end-radius: 0;
      }

      & > [role="separator"] {
        width: auto;
        height: 1px;
      }

      & > .btn:has(+ [role="separator"]) { border-block-end-width: 0; }
      & > [role="separator"] + .btn { border-block-start-width: 0; }
    }
  }

  @media (forced-colors: active) {
    .btn-group > [role="separator"] {
      background: ButtonText;
    }
  }
}

/* ── components/calendar/calendar.css ── */
@layer components {
  .calendar {
    display: inline-flex;
    flex-direction: column;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background-color: var(--card);
    user-select: none;
  }

  .calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.25rem 0.5rem;
  }

  .calendar-heading {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
  }

  /* The heading as a button (the JS upgrades a plain heading): the month +
     year are the obvious thing to click - it opens the month grid, and in
     the month grid the year opens the year grid. The chevron says "menu". */
  button.calendar-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 150ms ease;

    &::after {
      content: '';
      width: 0.375rem;
      height: 0.375rem;
      margin-top: -0.1875rem;
      border: solid currentColor;
      border-width: 0 1.5px 1.5px 0;
      rotate: 45deg;
      transition: rotate 150ms ease;
    }

    &[aria-expanded="true"]::after { rotate: -135deg; margin-top: 0.1875rem; }
    &:hover { background-color: var(--accent); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  }

  /* data-caption="dropdown": native month + year selects between the arrows
     (the fastest way to a date decades away - type the year) */
  .calendar-caption {
    display: inline-flex;
    gap: 0.25rem;
  }

  .calendar-select {
    padding: 0.25rem 0.375rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--foreground);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;

    &:hover { background-color: var(--accent); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  }

  /* -- Month / year picker (data-view="months" | "years") -------
     Swaps in for the day grid at the same size: 12 months or 12 years in a
     4-column grid. The current one is filled, this month / year is tinted. */
  .calendar-picker { display: none; }

  .calendar[data-view] {
    & .calendar-grid { display: none; }

    & .calendar-picker {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      align-content: center;
      gap: 0.375rem;
      box-sizing: border-box;
      padding: 0.25rem;
    }
  }

  .calendar-pick {
    height: 2.25rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--foreground);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;

    &:hover { background-color: var(--accent); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
    &[data-today] { background-color: var(--accent); font-weight: 600; }

    &[aria-current="true"] {
      background-color: var(--primary);
      color: var(--primary-foreground);
    }

    /* legible but inert (outside min / max), like every disabled control */
    &:disabled {
      background-color: transparent;
      color: var(--muted-foreground);
      text-decoration: line-through;
      cursor: not-allowed;
    }
  }

  .calendar-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--foreground);
    cursor: pointer;
    transition: background-color 150ms ease;

    &:hover {
      background-color: var(--accent);
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    & svg {
      width: 0.875rem;
      height: 0.875rem;
    }
  }

  .calendar-grid {
    border-collapse: collapse;
    border-spacing: 0;
  }

  .calendar-day-label {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--muted-foreground);
    text-align: center;
    vertical-align: middle;
  }

  /* -- Density --------------------------------------------------
     data-density on the .calendar root scales the whitespace between the
     frame and the grid plus the day hit-areas (0.75 / 1 / 1.25-ish scale of
     the 2rem/2.25rem cells); comfortable matches the unsized default.
     Typography stays put - a spacing policy, not a zoom. */
  .calendar:where([data-density="compact"]) {
    padding: 0.5rem;
    & .calendar-day-label,
    & .calendar-day { width: 1.75rem; height: 1.75rem; }
    & .calendar-day button { width: 1.5rem; height: 1.5rem; }
  }
  .calendar:where([data-density="comfortable"]) {
    padding: 0.75rem;
  }
  .calendar:where([data-density="spacious"]) {
    padding: 1rem;
    & .calendar-day-label,
    & .calendar-day { width: 2.75rem; height: 2.75rem; }
    & .calendar-day button { width: 2.5rem; height: 2.5rem; }
  }

  .calendar-day {
    width: 2.25rem;
    height: 2.25rem;
    text-align: center;
    vertical-align: middle;
    padding: 0;

    & button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      font-size: 0.8125rem;
      border: none;
      border-radius: var(--radius-md);
      background-color: transparent;
      color: var(--foreground);
      cursor: pointer;
      transition: background-color 150ms ease, color 150ms ease;

      &:hover {
        background-color: var(--accent);
      }

      &:focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
      }
    }

    &[data-today] button {
      background-color: var(--accent);
      font-weight: 600;
    }

    &[data-selected] button {
      background-color: var(--primary);
      color: var(--primary-foreground);

      &:hover {
        opacity: 0.9;
      }
    }

    &[data-outside] button {
      color: var(--muted-foreground);
      opacity: 0.5;
    }

    &[data-disabled] button {
      color: var(--muted-foreground);
      opacity: 0.35;
      cursor: not-allowed;
    }
  }

  /* -- Day data: marks + notes -----------------------------------
     data-mark="…" is the page's own classification of a day (a holiday, a
     booked night, a scheduled event): a dot in the cell's corner plus, for
     the built-in names, a look of its own. Any other name gets the neutral
     dot - style it with .calendar-day[data-mark="name"]. A note is a second
     line under the number (a price, a count); a calendar with notes gets
     taller cells (data-notes, set by the JS). */
  .calendar-day button { position: relative; }

  .calendar-day[data-mark] button::after {
    content: '';
    position: absolute;
    top: 0.1875rem;
    inset-inline-end: 0.1875rem;
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background-color: var(--muted-foreground);
  }

  .calendar-day[data-mark="holiday"] button {
    color: var(--destructive);
    font-weight: 600;

    &::after { background-color: var(--destructive); }
  }

  .calendar-day[data-mark="event"] button::after { background-color: var(--primary); }

  .calendar-day[data-mark="booked"] button {
    color: var(--muted-foreground);
    text-decoration: line-through;
    background-image: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in oklch, var(--muted-foreground) 18%, transparent) 4px 5px);

    &::after { display: none; }
  }

  /* a marked day that is also blocked (booked, a blackout date) keeps its
     look at full strength - the mark IS the information, the 0.35 fade of
     a plain disabled day would erase it */
  .calendar-day[data-mark][data-disabled]:not([data-outside]) button { opacity: 1; }

  /* on a filled (selected / endpoint) day the marks follow its foreground */
  .calendar-day:is([data-selected], [data-range-start], [data-range-end])[data-mark] button {
    color: var(--primary-foreground);
    &::after { background-color: currentColor; }
  }

  .calendar-day-note {
    display: block;
    font-size: 0.625rem;
    line-height: 1;
    font-weight: 400;
    color: var(--muted-foreground);
    text-decoration: none;
  }

  .calendar-day:is([data-selected], [data-range-start], [data-range-end]) .calendar-day-note {
    color: inherit;
    opacity: 0.85;
  }

  .calendar[data-notes] {
    & .calendar-day-label { width: 2.75rem; }

    & .calendar-day {
      width: 2.75rem;
      height: 3rem;

      & button {
        flex-direction: column;
        gap: 0.1875rem;
        width: 2.5rem;
        height: 2.75rem;
      }
    }
  }

  /* -- Range mode ------------------------------------------------
     A range picker is a .calendar[data-mode="range"] or a .calendar-range
     wrapper around several calendars (consecutive months, one shared range).
     Look: endpoints (data-range-start / -end) are filled with --primary,
     the days between (data-in-range) form a continuous --accent band that
     runs half into each endpoint cell (data-range-span). While only the start
     is chosen, the hovered/focused day previews the span (data-range-preview:
     lighter band, outlined end). Outside days are hidden - each month grid
     shows only its own days, so the band never jumps between months. */
  .calendar-range {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background-color: var(--card);

    /* the months sit on the wrapper's card */
    & > .calendar {
      padding: 0;
      border: none;
      border-radius: 0;
      background-color: transparent;
    }

    /* one pair of arrows for the whole picker: back on the first month,
       forward on the last (visibility keeps the headings centred) */
    & > .calendar ~ .calendar [data-action="prev-month"],
    & > .calendar:has(~ .calendar) [data-action="next-month"] {
      visibility: hidden;
    }
  }

  /* summary row under the months: the chosen range as one answer.
     contain: inline-size - the row takes the months' width instead of
     widening the picker to its own (a 100%-basis row would stretch the
     inline-flex card across the page) */
  .calendar-range-footer {
    flex-basis: 100%;
    contain: inline-size;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--foreground);
  }

  :is(.calendar[data-mode="range"], .calendar-range .calendar) .calendar-day[data-outside] {
    visibility: hidden;
    pointer-events: none;
  }

  .calendar-day {
    &[data-in-range] {
      background-color: var(--accent);

      & button {
        color: var(--accent-foreground);
      }
    }

    &[data-range-start][data-range-span] {
      background: linear-gradient(to right, transparent 50%, var(--accent) 50%);
    }

    &[data-range-end][data-range-span] {
      background: linear-gradient(to left, transparent 50%, var(--accent) 50%);
    }

    &:is([data-range-start], [data-range-end]) button {
      background-color: var(--primary);
      color: var(--primary-foreground);
      font-weight: 500;
    }

    /* preview (start chosen, end not yet): lighter band, outlined end */
    &[data-in-range][data-range-preview] {
      background-color: color-mix(in oklch, var(--accent) 60%, transparent);
    }

    &[data-range-end][data-range-preview][data-range-span] {
      background: linear-gradient(to left, transparent 50%, color-mix(in oklch, var(--accent) 60%, transparent) 50%);
    }

    &[data-range-end][data-range-preview] button {
      background-color: var(--background);
      color: var(--foreground);
      box-shadow: inset 0 0 0 1.5px var(--primary);
    }
  }
}

/* Accessibility: suppress motion for users who request it (REQUIRED for all
   components - AGENTS.md "Accessibility CSS"). Near-zero duration instead of
   `none` keeps transitionend/animationend (and discrete display flips)
   firing so JS state machines that await them keep working. */
@media (prefers-reduced-motion: reduce) {
  @layer components {
    .calendar,
    .calendar *,
    .calendar::before,
    .calendar::after,
    .calendar *::before,
    .calendar *::after,
    .calendar::backdrop,
    .calendar-header,
    .calendar-header *,
    .calendar-header::before,
    .calendar-header::after,
    .calendar-header *::before,
    .calendar-header *::after,
    .calendar-header::backdrop,
    .calendar-heading,
    .calendar-heading *,
    .calendar-heading::before,
    .calendar-heading::after,
    .calendar-heading *::before,
    .calendar-heading *::after,
    .calendar-heading::backdrop,
    .calendar-nav,
    .calendar-nav *,
    .calendar-nav::before,
    .calendar-nav::after,
    .calendar-nav *::before,
    .calendar-nav *::after,
    .calendar-nav::backdrop,
    .calendar-grid,
    .calendar-grid *,
    .calendar-grid::before,
    .calendar-grid::after,
    .calendar-grid *::before,
    .calendar-grid *::after,
    .calendar-grid::backdrop,
    .calendar-day-label,
    .calendar-day-label *,
    .calendar-day-label::before,
    .calendar-day-label::after,
    .calendar-day-label *::before,
    .calendar-day-label *::after,
    .calendar-day-label::backdrop,
    .calendar-day,
    .calendar-day *,
    .calendar-day::before,
    .calendar-day::after,
    .calendar-day *::before,
    .calendar-day *::after,
    .calendar-day::backdrop {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

/* Forced colors (Windows High Contrast) drop the accent band and the primary
   fills: selected days (the single selection, both endpoints and the days
   between) take the system Highlight pair instead. */
@media (forced-colors: active) {
  @layer components {
    .calendar-day[aria-selected="true"] button {
      forced-color-adjust: none;
      background-color: Highlight;
      color: HighlightText;
    }

    .calendar-pick[aria-current="true"] {
      forced-color-adjust: none;
      background-color: Highlight;
      color: HighlightText;
    }

    .calendar-day[data-mark] button::after {
      forced-color-adjust: none;
      background-color: CanvasText;
    }

    .calendar-pick:disabled,
    .calendar-day[data-mark="booked"] button { color: GrayText; }
  }
}

/* ── components/card/card.css ── */
/* -- Card component -------------------------------------------- */

@layer components {
  /* Spacing runs through one private variable: --_pad (section padding) =
     --_base (the SIZE's padding, md 1.5rem) × --_k (the DENSITY factor), and
     --_hf (the header→footer gap when no content sits between them) =
     --_hfb × --_kh. Size and density therefore combine instead of fighting.
     --_title / --_desc carry the size's type scale. All private. */
  .card {
    --_base: 1.5rem;
    --_hfb: 1rem;
    --_k: 1;
    --_kh: 1;
    --_pad: calc(var(--_base) * var(--_k));
    --_hf: calc(var(--_hfb) * var(--_kh));
    background-color: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    container-type: inline-size;
  }

  .card-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: var(--_pad, 1.5rem);
    padding-bottom: 0;
  }

  .card-title {
    font-size: var(--_title, 1.25rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0;
  }

  .card-description {
    font-size: var(--_desc, 0.875rem);
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.6;
  }

  .card-content {
    padding: var(--_pad, 1.5rem);
  }

  .card-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--_pad, 1.5rem);
    padding-top: 0;
  }

  /* Header + footer with no .card-content between: the zeroed paddings would
     glue them together - restore the gap for that composition only. */
  .card-header + .card-footer {
    padding-top: var(--_hf, 1rem);
  }

  /* A header-only card (a title + description panel): the header is the last
     section, so it keeps its bottom padding instead of sitting on the edge. */
  .card-header:last-child {
    padding-bottom: var(--_pad, 1.5rem);
  }

  /* -- Body: an optional wrapper around header / content / footer.
     Needed for the side and overlay layouts (media | body); in a column it
     pushes the footer to the bottom, so a row of cards lines up its actions. */
  .card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;

    & > .card-footer { margin-top: auto; }
  }

  /* -- Media: a figure (img / video / picture / svg) edge to edge - first
     child for an image on top, last child for one at the bottom. 16:9 unless
     the author sets an aspect-ratio. data-inset pads and rounds it instead
     (the centered-content look). */
  .card-media {
    display: block;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;

    & > :is(img, video, picture, svg) {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    &[data-inset] {
      margin: var(--_pad) var(--_pad) 0;
      border-radius: var(--radius-lg);
    }
    &[data-inset]:last-child {
      margin: 0 var(--_pad) var(--_pad);
    }
  }

  /* -- Density --------------------------------------------------
     data-density on the .card root scales the section paddings together.
     Scale matches sizing.css data-density (0.75 / 1 / 1.25): comfortable is
     the unsized default (1.5rem), compact 1rem, spacious 2rem; the
     header+footer-only gap (1rem base) follows the ratio (0.75 / 1 / 1.5). */
  .card:where([data-density="compact"]) { --_k: calc(2 / 3); --_kh: 0.75; }
  .card:where([data-density="comfortable"]) { --_k: 1; --_kh: 1; }
  .card:where([data-density="spacious"]) { --_k: calc(4 / 3); --_kh: 1.5; }

  .card {
    /* -- Sizes: padding + type scale together (md == the default) ----- */
    &[data-size="xs"] { --_base: 0.75rem; --_hfb: 0.5rem; --_title: 0.875rem; --_desc: 0.75rem; }
    &[data-size="sm"] { --_base: 1rem; --_hfb: 0.75rem; --_title: 1rem; --_desc: 0.8125rem; }
    &[data-size="md"] { --_base: 1.5rem; --_hfb: 1rem; --_title: 1.25rem; --_desc: 0.875rem; }
    &[data-size="lg"] { --_base: 2rem; --_hfb: 1.25rem; --_title: 1.5rem; --_desc: 1rem; }
    &[data-size="xl"] { --_base: 2.5rem; --_hfb: 1.5rem; --_title: 1.875rem; --_desc: 1.0625rem; }

    /* -- Variants -------------------------------------------------- */
    &[data-variant="outline"] { background-color: transparent; }
    &[data-variant="dashed"] { border-style: dashed; border-width: 2px; }
    &[data-variant="ghost"] { background-color: transparent; border-color: transparent; }
    &[data-variant="muted"] { background-color: var(--muted); border-color: transparent; }
    &[data-variant="elevated"] { border-color: transparent; box-shadow: var(--shadow-lg); }
    &[data-variant="primary"] {
      background-color: var(--primary);
      color: var(--primary-foreground);
      border-color: transparent;

      & .card-description { color: color-mix(in oklch, var(--primary-foreground) 78%, transparent); }
    }
    /* a charcoal surface: the inverse colors, softened (78%) so it stays
       apart from --primary - in the default theme primary IS near-black */
    &[data-variant="neutral"] {
      background-color: color-mix(in oklch, var(--foreground) 78%, var(--background));
      color: var(--background);
      border-color: transparent;

      & .card-description { color: color-mix(in oklch, var(--background) 72%, transparent); }
    }
    /* ghost / link buttons on a colored surface take its text color and a
       hover tint made from it (the default hover - the pale --accent - would
       put near-white text on near-white) */
    &:is([data-variant="primary"], [data-variant="neutral"], [data-layout="overlay"]) .btn:is([data-variant="ghost"], [data-variant="link"]) {
      color: inherit;

      &:hover { background-color: color-mix(in oklch, currentColor 16%, transparent); color: inherit; }
    }
    /* frosted: translucent card over whatever is behind it */
    &[data-variant="glass"] {
      background-color: color-mix(in oklch, var(--card) 55%, transparent);
      border-color: color-mix(in oklch, var(--foreground) 14%, transparent);
      backdrop-filter: blur(16px) saturate(1.4);
      box-shadow: 0 8px 32px -8px color-mix(in oklch, var(--foreground) 22%, transparent);
    }

    /* -- Centered content ------------------------------------------ */
    &[data-align="center"] {
      text-align: center;

      & .card-header { align-items: center; }
      & .card-footer { justify-content: center; }
    }

    /* -- Layouts ---------------------------------------------------
       side: media | body in one row, always (media after the body = image
       on the right). auto: side by side while the CARD is wide enough,
       stacked when it is not - the flex-wrap switch follows the card's own
       width, not the viewport, so the same card works in a sidebar and in a
       wide column. overlay: the media is the background, the body sits on
       a scrim at the bottom. */
    &[data-layout="side"] {
      display: grid;
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);

      & > .card-media { aspect-ratio: auto; min-height: 100%; }
    }
    &[data-layout="side"]:has(> .card-body:first-child) {
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
    &[data-layout="auto"] {
      display: flex;
      flex-wrap: wrap;

      & > .card-media { flex: 1 1 12rem; aspect-ratio: auto; min-height: 10rem; }
      & > .card-body { flex: 999 1 18rem; }
    }
    &[data-layout="overlay"] {
      display: grid;
      color: #fff;
      border-color: transparent;

      & > * { grid-area: 1 / 1; }
      & > .card-media { aspect-ratio: auto; min-height: 14rem; }
      & > .card-body {
        z-index: 1;
        align-self: end;
        background: linear-gradient(to top, oklch(0 0 0 / 0.78), oklch(0 0 0 / 0.35) 65%, transparent);
        padding-top: 3rem;
      }
      & .card-description { color: oklch(1 0 0 / 0.82); }
    }

    /* -- Interactive: a link (or [data-interactive]) card lifts on hover
       and shows a focus ring on keyboard focus ------------------------ */
    &:is(a, [data-interactive]) {
      display: block;
      text-decoration: none;
      transition: translate 150ms ease, box-shadow 150ms ease, border-color 150ms ease;

      &:hover { translate: 0 -2px; box-shadow: var(--shadow-md); border-color: color-mix(in oklch, var(--foreground) 22%, var(--border)); }
      &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
    }
    &:is(a, [data-interactive])[data-layout="auto"] { display: flex; }
    &:is(a, [data-interactive]):is([data-layout="side"], [data-layout="overlay"]) { display: grid; }

    /* -- Selectable: a <label class="card"> around a checkbox / radio -
       the checked card takes a primary ring; keyboard focus shows too */
    &:is(label) {
      display: block;
      cursor: pointer;
      transition: border-color 150ms ease, box-shadow 150ms ease;

      &:has(:is(input[type="checkbox"], input[type="radio"]):checked) {
        border-color: var(--primary);
        box-shadow: 0 0 0 1px var(--primary);
      }
      &:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
      &:has(input:disabled) { cursor: not-allowed; opacity: 0.55; }
    }
  }

  /* -- Container query: compact card in narrow containers - unless the
     card asks for a size (an explicit data-size wins) -- */
  @container (max-width: 280px) {
    .card:not([data-size]) :is(.card-header, .card-content, .card-footer) { --_pad: 1rem; }
    .card:not([data-size]) .card-title { font-size: 1rem; }
  }

  /* -- Accessibility ------------------------------------------ */
  @media (prefers-reduced-motion: reduce) {
    .card:is(a, [data-interactive]) { transition: none; }
    .card:is(a, [data-interactive]):hover { translate: none; }
  }
  @media (forced-colors: active) {
    .card:is(label):has(:is(input[type="checkbox"], input[type="radio"]):checked) { border: 2px solid Highlight; }
  }
}

/* ── components/carousel/carousel.css ── */
@layer components {
  .carousel {
    position: relative;
    width: 100%;

    /* ── Viewport ──────────────────────────────── */
    & .carousel-viewport {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      gap: 1rem;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;

      &::-webkit-scrollbar { display: none; }
    }

    /* ── Slide ─────────────────────────────────── */
    & .carousel-slide {
      flex: 0 0 100%;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      min-width: 0;
    }

    /* ── Prev / Next buttons ───────────────────── */
    & .carousel-prev,
    & .carousel-next {
      position: absolute;
      top: 50%;
      translate: 0 -50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      border: 1px solid var(--border);
      border-radius: 9999px;
      background-color: var(--background);
      color: var(--foreground);
      cursor: pointer;
      box-shadow: var(--shadow-sm);
      transition: background-color 150ms ease, opacity 150ms ease;
      font-size: 0.875rem;
      z-index: 1;

      &:hover { background-color: var(--accent); }
      &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
      &:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
      & svg { width: 1rem; height: 1rem; }
    }

    & .carousel-prev { left: -1rem; }
    & .carousel-next { right: -1rem; }

    /* ── Dot indicators ────────────────────────── */
    & .carousel-dots {
      display: flex;
      justify-content: center;
      gap: 0.5rem;
      padding-block: 0.75rem;
    }

    & .carousel-dot {
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 9999px;
      border: none;
      padding: 0;
      cursor: pointer;
      background-color: var(--border);
      transition: background-color 150ms ease, scale 150ms ease;

      &[aria-current="true"] {
        background-color: var(--foreground);
        scale: 1.25;
      }

      &:hover:not([aria-current="true"]) {
        background-color: var(--muted-foreground);
      }

      &:focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
      }
    }

    /* ── Counter text ──────────────────────────── */
    & .carousel-counter {
      text-align: center;
      font-size: 0.8125rem;
      color: var(--muted-foreground);
      padding-block-start: 0.5rem;
    }

    /* ── Vertical orientation ──────────────────── */
    &[data-orientation="vertical"] {
      & .carousel-viewport {
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        scroll-snap-type: y mandatory;
        overscroll-behavior-x: unset;
        overscroll-behavior-y: contain;
      }

      & .carousel-prev,
      & .carousel-next {
        left: 50%;
        right: auto;
        translate: -50% 0;
        top: auto;
      }
      & .carousel-prev { top: -1rem; bottom: auto; }
      & .carousel-next { bottom: -1rem; top: auto; }

      & .carousel-dots { flex-direction: column; }
    }
  }

  /* ── Accessibility ─────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .carousel .carousel-viewport { scroll-behavior: auto; }
    .carousel .carousel-prev,
    .carousel .carousel-next { transition: none; }
    .carousel .carousel-dot { transition: none; }
  }

  @media (prefers-contrast: more) {
    .carousel .carousel-prev,
    .carousel .carousel-next {
      border-width: 2px;
    }
    .carousel .carousel-dot {
      border: 1px solid var(--foreground);
    }
  }

  @media (forced-colors: active) {
    .carousel .carousel-prev,
    .carousel .carousel-next {
      border: 1px solid ButtonText;
      background: ButtonFace;
      color: ButtonText;
    }
    .carousel .carousel-dot {
      background: ButtonText;
      &[aria-current="true"] { background: Highlight; }
    }
  }
}

/* ── components/cart-item/cart-item.css ── */
/* -- Cart Item (website · Shop) -------------------------------------------
   Displays one selected product with quantity and removal controls - picture, name, options, a quantity stepper, the line total and remove. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-cart-item, .mk-cart-item *, .mk-cart-item ::before, .mk-cart-item ::after) { box-sizing: border-box; }

  .mk-cart-list { display: grid; margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--border); }
  .mk-cart-item {
    container: mk-cart-item / inline-size;
    position: relative;
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) auto auto;
    grid-template-areas: "img info qty total";
    align-items: center;
    gap: 0.5rem 1.25rem;
    padding: 1.25rem 2.75rem 1.25rem 0;
    border-block-end: 1px solid var(--border);
  }
  .mk-cart-item-image { grid-area: img; display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-md); background: var(--muted); }
  .mk-cart-item-info { grid-area: info; display: grid; gap: 0.125rem; min-width: 0; }
  .mk-cart-item-name { margin: 0; font-size: 0.9375rem; font-weight: 600;
    & a { color: inherit; text-decoration: none; }
    & a:hover { text-decoration: underline; }
  }
  .mk-cart-item-options, .mk-cart-item-unit { margin: 0; color: var(--muted-foreground); font-size: 0.8125rem; }
  .mk-cart-item-qty { grid-area: qty;
    & .number-input { width: 7rem; }
  }
  .mk-cart-item-total { grid-area: total; min-width: 4.5rem; font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; }
  .mk-cart-item-remove {
    position: absolute;
    top: 50%;
    right: 0;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;

    & svg { width: 1rem; height: 1rem; }
    &:hover { background: var(--accent); color: var(--destructive); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
  }

  .mk-cart-item[data-variant="compact"] {
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    grid-template-areas: "img info total" "img qty total";
    gap: 0 0.875rem;
    padding-block: 0.875rem;

    & .mk-cart-item-unit { display: none; }
    & .mk-cart-item-qty { color: var(--muted-foreground); font-size: 0.8125rem; }
    & .mk-cart-item-total { font-size: 0.9375rem; }
  }

  @container mk-cart-item (max-width: 30rem) {
    .mk-cart-item-info, .mk-cart-item-qty, .mk-cart-item-total { justify-self: start; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-cart-item-remove { border: 1px solid ButtonText; }
  }
}

/* ── components/cart-summary/cart-summary.css ── */
/* -- Cart Summary (website · Shop) ----------------------------------------
   Shows cart totals and the action to proceed to checkout - a free-shipping progress bar, the breakdown, the total, checkout and how you can pay. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-cart-summary, .mk-cart-summary *, .mk-cart-summary ::before, .mk-cart-summary ::after) { box-sizing: border-box; }

  .mk-cart-summary { display: grid; gap: 1.25rem; padding: 1.5rem; border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground); }
  .mk-cart-summary-title { margin: 0; font-size: 1.125rem; font-weight: 600; }
  .mk-cart-summary-shipping { display: grid; gap: 0.5rem; padding: 0.875rem 1rem; border-radius: var(--radius-lg); background: var(--muted); font-size: 0.875rem;
    & progress { width: 100%; }
    & strong { font-weight: 600; }
  }
  .mk-cart-summary-lines { display: grid; gap: 0.625rem; margin: 0;
    & div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9375rem; }
    & dt { color: var(--muted-foreground); }
    & dd { margin: 0; font-variant-numeric: tabular-nums; }
    & [data-discount] dd { color: #15803d; font-weight: 500; }
  }
  .mk-cart-summary-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block-start: 1rem; border-block-start: 1px solid var(--border);
    & span { font-weight: 600; }
    & small { display: block; color: var(--muted-foreground); font-size: 0.75rem; font-weight: 400; }
    & output { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  }
  .mk-cart-summary-checkout { width: 100%; }
  .mk-cart-summary-pay { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem; margin: 0; padding: 0; list-style: none;
    & li { padding: 0.125rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted-foreground); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; }
  }
  .mk-cart-summary-note { display: flex; align-items: center; justify-content: center; gap: 0.375rem; margin: 0; color: var(--muted-foreground); font-size: 0.75rem;
    & svg { width: 0.875rem; height: 0.875rem; }
  }

  .mk-cart-summary[data-variant="compact"] { gap: 0.875rem; padding: 1rem;
    & .mk-cart-summary-total { padding: 0; border: 0; }
    & .mk-cart-summary-total output { font-size: 1.125rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-cart-summary { border-color: CanvasText; }
  }
}

/* ── components/case-preview/case-preview.css ── */
/* -- Case Preview (website · Company) -------------------------------------
   Summarizes one case study and links to its full account - the client, the headline result and a picture, as a card or a wide row. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-case-preview, .mk-case-preview *, .mk-case-preview ::before, .mk-case-preview ::after) { box-sizing: border-box; }

  .mk-case-preview {
    container: mk-case-preview / inline-size;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);
  }
  .mk-case-preview { position: relative; }
  .mk-case-preview-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .mk-case-preview-title a:focus-visible { outline: none; }
  .mk-case-preview:has(.mk-case-preview-title a:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
  /* zero specificity: any block rule may still position its controls */
  :where(.mk-case-preview :is(button, input, select, label, .btn):not(.mk-case-preview-title a)) { position: relative; z-index: 1; }
  .mk-case-preview-media { margin: 0; overflow: hidden; background: var(--muted);
    & img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: scale 400ms ease; }
  }
  .mk-case-preview:hover .mk-case-preview-media img { scale: 1.04; }
  .mk-case-preview-body { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem 1.5rem 1.5rem; flex: 1; }
  .mk-case-preview-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
  .mk-case-preview-logo { font-size: 1rem; font-weight: 800; letter-spacing: -0.03em; }
  .mk-case-preview-title { margin: 0; font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance;
    & a { color: inherit; text-decoration: none; }
  }
  .mk-case-preview-metric { margin: 0; color: var(--muted-foreground); font-size: 0.9375rem;
    & strong { color: var(--foreground); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin-inline-end: 0.25rem; }
  }
  .mk-case-preview-more { display: inline-flex; align-items: center; gap: 0.25rem; margin-block-start: auto; padding-block-start: 0.5rem; color: var(--primary); font-size: 0.875rem; font-weight: 600;
    & svg { width: 0.875rem; height: 0.875rem; }
  }

  @container mk-case-preview (min-width: 40rem) {
    .mk-case-preview[data-variant="wide"] .mk-case-preview-body { padding: 2rem; }
  }
  .mk-case-preview[data-variant="wide"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));

    & .mk-case-preview-media img { height: 100%; aspect-ratio: auto; min-height: 14rem; }
    & .mk-case-preview-title { font-size: 1.5rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-case-preview-media img { transition: none; }
    .mk-case-preview:hover .mk-case-preview-media img { scale: none; }
  }

  @media (forced-colors: active) {
    .mk-case-preview { border-color: CanvasText; }
  }
}

/* ── components/case-study/case-study.css ── */
/* -- Case Study (website · Company) ---------------------------------------
   Describes a project's problem, approach, and documented outcome - a header with the client, results as figures, the story in sections and a pull quote. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-case-study, .mk-case-study *, .mk-case-study ::before, .mk-case-study ::after) { box-sizing: border-box; }

  .mk-case-study { container: mk-case-study / inline-size; display: grid; gap: 2.5rem; width: 100%; }
  .mk-case-study-head { display: grid; gap: 1rem; }
  .mk-case-study-client { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; color: var(--muted-foreground); font-size: 0.875rem;
    & strong { color: var(--foreground); font-size: 1.125rem; font-weight: 800; letter-spacing: -0.03em; }
  }
  .mk-case-study-title { margin: 0; max-width: 48rem; font-size: clamp(1.75rem, 4.5cqi, 3rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
  .mk-case-study-cover { margin: 0; overflow: hidden; border-radius: var(--radius-xl); background: var(--muted);
    & img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
  }
  .mk-case-study-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: 1px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--border);

    & div { display: flex; flex-direction: column-reverse; gap: 0.25rem; padding: 1.5rem; background: var(--card); }
    & dd { margin: 0; font-size: 2.25rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
    & dt { color: var(--muted-foreground); font-size: 0.875rem; }
  }
  .mk-case-study-layout { display: grid; gap: 2.5rem; }
  .mk-case-study-body {
    display: grid;
    gap: 2.25rem;
    min-width: 0;

    & section { display: grid; gap: 0.75rem; }
    & h2 { margin: 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.015em; }
    & p { margin: 0; color: var(--muted-foreground); line-height: 1.75; text-wrap: pretty; }
  }
  .mk-case-study-steps {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: mk-case-step;

    & li { counter-increment: mk-case-step; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.25rem 0.75rem; }
    & li::before { content: counter(mk-case-step); grid-row: span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--muted); font-size: 0.875rem; font-weight: 700; }
    & strong { font-weight: 600; }
    & span { color: var(--muted-foreground); }
  }
  .mk-case-study-quote {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 2rem;
    border-radius: var(--radius-xl);
    background: var(--muted);

    & blockquote { margin: 0; font-family: var(--font-serif); font-size: 1.375rem; line-height: 1.45; text-wrap: pretty; }
    & figcaption { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; }
    & figcaption span { color: var(--muted-foreground); }
  }
  .mk-case-study-facts {
    display: grid;
    gap: 1rem;
    align-self: start;
    margin: 0;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);

    & div { display: grid; gap: 0.125rem; }
    & dt { color: var(--muted-foreground); font-size: 0.8125rem; }
    & dd { margin: 0; font-weight: 500; }
  }

  @container mk-case-study (min-width: 52rem) {
    .mk-case-study-layout { grid-template-columns: minmax(0, 1fr) 16rem; gap: 4rem; }
    .mk-case-study-facts { position: sticky; top: 1.5rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-case-study-results, .mk-case-study-facts { border-color: CanvasText; }
  }
}

/* ── components/category-menu/category-menu.css ── */
/* -- Category Menu (website · Search & Navigation) ------------------------
   Navigates between content categories - underlined tabs that scroll sideways, pills, a vertical list with counts, or icon tiles. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-category-menu, .mk-category-menu *, .mk-category-menu ::before, .mk-category-menu ::after) { box-sizing: border-box; }

  .mk-category-menu { width: 100%;
    & ul { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; border-block-end: 1px solid var(--border); }
    & li { flex: none; scroll-snap-align: start; }
    & a { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.625rem 0.75rem; margin-block-end: -1px; border-block-end: 2px solid transparent; color: var(--muted-foreground); font-size: 0.875rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
    & a:hover { color: var(--foreground); }
    & a[aria-current] { border-block-end-color: var(--foreground); color: var(--foreground); }
    & a:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; border-radius: var(--radius-sm); }
    & svg { width: 1rem; height: 1rem; }
    & small { color: var(--muted-foreground); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
  }
  .mk-category-menu[data-variant="pills"] {
    & ul { gap: 0.5rem; border: 0; }
    & a { padding: 0.375rem 0.875rem; margin: 0; border: 1px solid var(--border); border-radius: 999px; }
    & a[aria-current] { border-color: var(--foreground); background: var(--foreground); color: var(--background); }
    & a[aria-current] small { color: inherit; opacity: 0.7; }
  }
  .mk-category-menu[data-variant="vertical"] { max-width: 15rem;
    & ul { flex-direction: column; gap: 0.0625rem; border: 0; overflow: visible; }
    & a { display: flex; margin: 0; padding: 0.5rem 0.75rem; border: 0; border-radius: var(--radius-md); }
    & a span { flex: 1; }
    & a:hover { background: var(--accent); }
    & a[aria-current] { background: var(--accent); font-weight: 600; }
  }
  .mk-category-menu[data-variant="tiles"] {
    & ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.75rem; border: 0; overflow: visible; }
    & a { display: grid; justify-items: start; gap: 0.25rem; margin: 0; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-xl); white-space: normal; }
    & a svg { width: 1.5rem; height: 1.5rem; margin-block-end: 0.5rem; color: var(--primary); }
    & a:hover { border-color: color-mix(in oklch, var(--foreground) 30%, var(--border)); }
    & a[aria-current] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-category-menu a[aria-current] { outline: 2px solid Highlight; }
  }
}

/* ── components/chart/chart.css ── */
/* -- Chart component -----------------------------------------------------
   The sizing surface + editorial frame for the ECharts mount (chart.ts owns
   the runtime: theme adapter, resize, story). The mount itself is a plain
   block with three height presets via data-size; .chart-frame is the
   card-like bordered wrapper (title/dek/source chrome) for editorial
   data-storytelling. Tokens only (AGENTS.md token boundary rule). */

@layer components {
  .chart {
    width: 100%;
    height: 20rem;

    &[data-size='sm'] {
      height: 14rem;
    }
    &[data-size='lg'] {
      height: 28rem;
    }

    /* ECharts animates internally (canvas/svg), but the mount itself never
       transitions - reduced motion is handled in the JS base option */
    @media (prefers-reduced-motion: reduce) {
      & * {
        transition: none !important;
      }
    }
  }

  /* the editorial frame: chart + headline + dek + source line, card-like */
  .chart-frame {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    color: var(--card-foreground);
  }

  .chart-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: var(--tracking-normal);
    text-wrap: balance;
  }

  .chart-dek {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--muted-foreground);
    text-wrap: pretty;
  }

  .chart-source {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--muted-foreground);
  }

  @media (prefers-contrast: more) {
    .chart-frame {
      border-width: 2px;
    }
    .chart-dek,
    .chart-source {
      color: var(--foreground);
    }
  }

  /* Windows High Contrast Mode: frame + chrome fall back to system colors */
  @media (forced-colors: active) {
    .chart-frame {
      border-color: CanvasText;
      background: Canvas;
      color: CanvasText;
    }
    .chart-title,
    .chart-dek,
    .chart-source {
      color: CanvasText;
    }
  }
}

/* ── components/checkbox/checkbox.css ── */
/* -- Checkbox component ----------------------------------------- */

@layer components {
  .checkbox {
    appearance: none;
    margin: 0; /* kill the UA's ~4px input margin - breaks flex/grid rhythm */
    width: 1.125rem;
    height: 1.125rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--background);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: background-color 150ms, border-color 150ms;

    &:checked {
      background-color: var(--primary);
      border-color: var(--primary);

      &::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 45%;
        width: 6px;
        height: 10px;
        border: solid var(--primary-foreground);
        border-width: 0 2px 2px 0;
        transform: translate(-50%, -50%) rotate(45deg);
      }
    }

    /* Per spec, an indeterminate checkbox ALSO matches :checked - both
       ::after rules land on the element, so the dash must explicitly cancel
       the checkmark's border (else the rotated border renders on top of it). */
    &:indeterminate {
      background-color: var(--primary);
      border-color: var(--primary);

      &::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: 10px;
        height: 2px;
        border: none;
        background: var(--primary-foreground);
        transform: translate(-50%, -50%);
      }
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    /* Disabled = legible but inert: never an opacity fade (0.5 on a light
       --border edge left a ghost you had to look for). The shape keeps its
       full-strength edge, the surface turns muted, a chosen state keeps a
       softened primary fill, and the label goes muted with the no-entry
       cursor - "a choice that exists but is unavailable right now". */
    &:disabled {
      background-color: var(--muted);
      /* a mid-grey edge: --border on the muted fill is too faint to read as a box */
      border-color: color-mix(in oklch, var(--muted-foreground) 50%, var(--background));
      cursor: not-allowed;

      &:is(:checked, :indeterminate) {
        background-color: color-mix(in oklch, var(--primary) 45%, var(--background));
        border-color: transparent;
      }
    }

    &:is([aria-invalid="true"], :user-invalid:not(form[data-validate="submit"]:not([data-submitted]) *)) {
      border-color: var(--destructive);
    }
  }

  /* -- Checkbox item layout --------------------------------- */
  .checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    & > label {
      font-size: 0.875rem;
      cursor: pointer;
      /* leading-none (shadcn parity): a 1.6 line-box centers the LINE, not
         the glyphs - baseline then floats with the font's ascent, so text
         rides visibly off the box midline (worst with metric-heavy
         fallbacks). line-height:1 shrinks the box to the glyphs themselves. */
      line-height: 1;
    }
  }

  .checkbox-item-block {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;

    & > label {
      font-size: 0.875rem;
      cursor: pointer;
    }

    & > .checkbox {
      margin-top: 0.125rem;
    }
  }

  /* Gap hit area: inside an item layout the control's click target spans
     the gap to its label (a transparent ::before, part of the input's own
     hit box), so clicking the whitespace between control and text toggles
     too - the label's `for` covers the text itself. Inline-end only: the
     label always sits after the control (block layouts place it in the
     second grid column). */
  :is(.checkbox-item, .checkbox-item-block) > .checkbox::before {
    content: '';
    position: absolute;
    inset-block: -0.25rem;
    inset-inline: -0.25rem calc(-1 * 0.5rem);
  }

  /* Disabled auto-styling */
  .checkbox-item:has(.checkbox:disabled),
  .checkbox-item-block:has(.checkbox:disabled) {
    cursor: not-allowed;

    /* the text says "unavailable" too - and never offers the hand pointer
       for a click that cannot land */
    & label {
      color: var(--muted-foreground);
      cursor: not-allowed;
    }
  }

  /* -- Accessibility ---------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .checkbox {
      transition: none;
    }
  }

  @media (prefers-contrast: more) {
    .checkbox {
      border-width: 2px;
    }

    .checkbox:disabled {
      border-color: var(--muted-foreground);
    }
  }

  @media (forced-colors: active) {
    .checkbox {
      appearance: auto;
    }
  }
}

/* ── components/code-block/code-block.css ── */
/* -- Code Example (website · Docs & Help) ---------------------------------
   Displays code with optional language tabs and copying controls - tabs for each package manager, a file header, highlighted lines, or one command to copy. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-code-block, .mk-code-block *, .mk-code-block ::before, .mk-code-block ::after) { box-sizing: border-box; }

  .mk-code-block { margin: 0; width: 100%; overflow: hidden; border: 1px solid oklch(0.3 0.01 260); border-radius: var(--radius-lg); background: oklch(0.17 0.01 260); color: oklch(0.92 0 0); }
  .mk-code-block-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.375rem 0.375rem 0.375rem 0.75rem; border-block-end: 1px solid oklch(0.3 0.01 260); font-size: 0.8125rem; }
  .mk-code-block-file { display: inline-flex; align-items: center; gap: 0.375rem; color: oklch(0.75 0 0); font-family: var(--font-mono);
    & svg { width: 0.875rem; height: 0.875rem; }
  }
  .mk-code-block-tabs { display: flex; gap: 0.125rem;
    & label { position: relative; padding: 0.25rem 0.625rem; border-radius: var(--radius-sm); color: oklch(0.7 0 0); font-family: var(--font-mono); cursor: pointer; }
    & input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
    & label:has(:checked) { background: oklch(0.28 0.01 260); color: #fff; }
    & label:has(:focus-visible) { outline: 2px solid oklch(0.7 0.12 250); outline-offset: 1px; }
  }
  .mk-code-block-copy { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: oklch(0.75 0 0); cursor: pointer;
    & svg { width: 1rem; height: 1rem; }
    &:hover { background: oklch(0.28 0.01 260); color: #fff; }
    &:focus-visible { outline: 2px solid oklch(0.7 0.12 250); outline-offset: 1px; }
  }
  .mk-code-block-copy[data-copied] { color: oklch(0.75 0.15 150); }
  /* reset whatever the page styles pre / code with: the block owns its look */
  .mk-code-block pre { margin: 0; padding: 1rem 0; overflow-x: auto; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.7; }
  .mk-code-block code { display: grid; padding: 0; border: 0; background: none; color: inherit; font-family: inherit; font-size: inherit; }
  .mk-code-block code > span { display: block; padding-inline: 1rem; white-space: pre; }
  .mk-code-block pre[data-numbers] code { counter-reset: mk-line; }
  .mk-code-block pre[data-numbers] code > span::before { counter-increment: mk-line; content: counter(mk-line); display: inline-block; width: 2rem; margin-inline-end: 1rem; color: oklch(0.5 0 0); text-align: end; user-select: none; }
  .mk-code-block code > span[data-highlight] { background: oklch(0.6 0.12 250 / 0.16); box-shadow: inset 3px 0 0 oklch(0.7 0.14 250); }
  .mk-code-block-c { color: oklch(0.6 0 0); }
  .mk-code-block-k { color: oklch(0.78 0.13 300); }
  .mk-code-block-s { color: oklch(0.8 0.13 150); }
  .mk-code-block [data-tab] { display: none; }
  .mk-code-block:has(input[value="npm"]:checked) [data-tab="npm"],
  .mk-code-block:has(input[value="pnpm"]:checked) [data-tab="pnpm"],
  .mk-code-block:has(input[value="bun"]:checked) [data-tab="bun"] { display: block; }
  .mk-code-block-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  .mk-code-block[data-variant="inline"] {
    display: flex;
    align-items: center;
    max-width: 30rem;

    & pre { flex: 1; padding: 0.625rem 0; }
    & code > span::before { content: "$ "; color: oklch(0.55 0 0); user-select: none; }
    & .mk-code-block-copy { margin-inline-end: 0.375rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-code-block { border-color: CanvasText; }
    .mk-code-block code > span[data-highlight] { outline: 1px solid Highlight; }
  }
}

/* ── components/collapsible/collapsible.css ── */
@layer components {
  .collapsible {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: var(--foreground);

    /* Two gotchas, both required for the panel to glide:
       1. `::details-content` must attach to the compound (`&::details-content`,
          NOT `& ::details-content` - the descendant form never matches, the
          pseudo's originating element is the subject itself).
       2. `block-size: auto` is a keyword - without interpolate-size the
          0→auto pair is non-interpolable and the transition silently snaps. */
    &::details-content {
      block-size: 0;
      overflow-y: clip;
      interpolate-size: allow-keywords;
      transition: block-size 200ms ease, content-visibility 200ms allow-discrete;
    }

    &[open]::details-content {
      block-size: auto;
    }
  }

  @starting-style {
    .collapsible[open]::details-content {
      block-size: 0;
    }
  }

  /* -- Density --------------------------------------------------
     data-density on the .collapsible root scales the padding between text
     and the outer border (trigger + content), ratio 0.75 / 1 / 1.25;
     comfortable matches the unsized default. */
  .collapsible:where([data-density="compact"]) {
    & .collapsible-trigger { padding: 0.5rem 0.75rem; }
    & .collapsible-content  { padding: 0 0.75rem 0.5rem; }
  }
  .collapsible:where([data-density="comfortable"]) {
    & .collapsible-trigger { padding: 0.75rem 1rem; }
    & .collapsible-content  { padding: 0 1rem 0.75rem; }
  }
  .collapsible:where([data-density="spacious"]) {
    & .collapsible-trigger { padding: 1rem 1.25rem; }
    & .collapsible-content  { padding: 0 1.25rem 1rem; }
  }

  .collapsible-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    color: inherit;
    list-style: none;

    /* a tint of the text color - reads on any surface, custom colors included */
    &:hover {
      background-color: color-mix(in oklch, currentColor 7%, transparent);
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: -2px;
    }

    &::-webkit-details-marker {
      display: none;
    }
  }

  .collapsible-chevron {
    width: 1rem;
    height: 1rem;
    margin-inline-start: auto;
    color: color-mix(in oklch, currentColor 60%, transparent);
    transition: transform 200ms ease;
    flex-shrink: 0;

    details[open] > summary > & {
      transform: rotate(180deg);
    }
  }

  .collapsible-content {
    padding: 0 1rem 0.75rem;
    font-size: 0.875rem;
    color: color-mix(in oklch, currentColor 72%, transparent);
    line-height: 1.6;
  }

  /* -- Leading icon / emoji ----------------------------------------
     .collapsible-icon in front of the heading: an svg or an emoji in a
     fixed 1.1em box, so headings line up whatever the glyph. */
  .collapsible-icon {
    display: inline-grid;
    place-items: center;
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    font-style: normal;
    line-height: 1;

    & svg { width: 1em; height: 1em; }
  }

  /* -- Sizes: the heading's scale and weight (md == default) ------- */
  .collapsible {
    &[data-size="sm"] .collapsible-trigger { font-size: 0.8125rem; }
    &[data-size="md"] .collapsible-trigger { font-size: 0.875rem; }
    &[data-size="lg"] .collapsible-trigger { font-size: 1rem; font-weight: 600; }
    &[data-size="xl"] .collapsible-trigger { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }

    /* -- Variants: the surface (content follows its text color) ---- */
    &[data-variant="ghost"] { border-color: transparent; }
    &[data-variant="muted"] { background-color: var(--muted); border-color: transparent; }
    &[data-variant="primary"] {
      background-color: var(--primary);
      color: var(--primary-foreground);
      border-color: transparent;
    }
    &[data-variant="neutral"] {
      background-color: color-mix(in oklch, var(--foreground) 78%, var(--background));
      color: var(--background);
      border-color: transparent;
    }
    /* highlight: plain while closed, the primary surface once open */
    &[data-variant="highlight"] {
      transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;

      &[open] {
        background-color: var(--primary);
        color: var(--primary-foreground);
        border-color: transparent;
      }
    }
  }

  /* -- Markers: a CSS-drawn open/close sign at the end of the heading -
     data-marker="arrow" (a chevron that turns up) or "plus" (+ that
     becomes -); data-marker-position="start" puts it before the text.
     For your own glyph use .collapsible-chevron (turns 180°, or 90° with
     data-turn="quarter") or swap two elements with .collapsible-when-open /
     .collapsible-when-closed. */
  .collapsible:is([data-marker="arrow"], [data-marker="plus"]) > .collapsible-trigger::after {
    content: '';
    flex-shrink: 0;
    margin-inline-start: auto;
    color: color-mix(in oklch, currentColor 65%, transparent);
    transition: rotate 200ms ease, translate 200ms ease, background-size 200ms ease;
  }
  .collapsible[data-marker="arrow"] > .collapsible-trigger::after {
    width: 0.45em;
    height: 0.45em;
    margin-inline-end: 0.2em;
    /* physical: a down/up arrow is the same in RTL */
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    rotate: 45deg;
    translate: 0 -0.15em;
  }
  .collapsible[data-marker="arrow"][open] > .collapsible-trigger::after {
    rotate: -135deg;
    translate: 0 0.1em;
  }
  .collapsible[data-marker="plus"] > .collapsible-trigger::after {
    width: 0.8em;
    height: 0.8em;
    background:
      linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
      linear-gradient(currentColor 0 0) center / 2px 100% no-repeat;
  }
  .collapsible[data-marker="plus"][open] > .collapsible-trigger::after {
    background-size: 100% 2px, 2px 0;
    rotate: 180deg;
  }
  .collapsible[data-marker-position="start"] > .collapsible-trigger::after {
    order: -1;
    margin-inline-start: 0;
    margin-inline-end: 0.25em;
  }

  .collapsible-chevron[data-turn="quarter"] {
    details[open] > summary > & { transform: rotate(90deg); }
    /* RTL: a quarter-turned chevron-right points the other way */
    &:dir(rtl) { scale: -1 1; }
    details[open] > summary > &:dir(rtl) { transform: rotate(-90deg); }
  }

  /* swap two glyphs (📁 / 📂, "Show" / "Hide") instead of turning one */
  .collapsible:not([open]) > .collapsible-trigger .collapsible-when-open,
  .collapsible[open] > .collapsible-trigger .collapsible-when-closed {
    display: none;
  }
  .collapsible-trigger > :is(.collapsible-when-open, .collapsible-when-closed) {
    margin-inline-start: auto;
  }

}

/* Accessibility: suppress motion for users who request it (REQUIRED for all
   components - AGENTS.md "Accessibility CSS"). Near-zero duration instead of
   `none` keeps transitionend/animationend (and discrete display flips)
   firing so JS state machines that await them keep working. */
@media (prefers-reduced-motion: reduce) {
  @layer components {
    .collapsible,
    .collapsible *,
    .collapsible::before,
    .collapsible::after,
    .collapsible *::before,
    .collapsible *::after,
    .collapsible::backdrop,
    .collapsible::details-content,
    .collapsible-chevron,
    .collapsible-chevron *,
    .collapsible-chevron::before,
    .collapsible-chevron::after,
    .collapsible-chevron *::before,
    .collapsible-chevron *::after,
    .collapsible-chevron::backdrop,
    .collapsible-content,
    .collapsible-content *,
    .collapsible-content::before,
    .collapsible-content::after,
    .collapsible-content *::before,
    .collapsible-content *::after,
    .collapsible-content::backdrop,
    .collapsible-trigger,
    .collapsible-trigger *,
    .collapsible-trigger::before,
    .collapsible-trigger::after,
    .collapsible-trigger *::before,
    .collapsible-trigger *::after,
    .collapsible-trigger::backdrop {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

/* ── components/collection-item/collection-item.css ── */
/* -- Collection Item (website · Shop) -------------------------------------
   Links to one product collection with imagery and context - a picture with the name and count, text over the picture, or a wide banner. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-collection-item, .mk-collection-item *, .mk-collection-item ::before, .mk-collection-item ::after) { box-sizing: border-box; }

  .mk-collection-item { display: grid; gap: 0.875rem; }
  .mk-collection-item { position: relative; }
  .mk-collection-item-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .mk-collection-item-title a:focus-visible { outline: none; }
  .mk-collection-item:has(.mk-collection-item-title a:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
  /* zero specificity: any block rule may still position its controls */
  :where(.mk-collection-item :is(button, input, select, label, .btn):not(.mk-collection-item-title a)) { position: relative; z-index: 1; }
  .mk-collection-item:has(.mk-collection-item-title a:focus-visible) { border-radius: var(--radius-xl); }
  .mk-collection-item-media { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-xl); background: var(--muted); transition: scale 500ms cubic-bezier(.2,.7,.2,1), filter 300ms ease; }
  .mk-collection-item:hover .mk-collection-item-media { filter: brightness(0.94); }
  .mk-collection-item-body { display: grid; gap: 0.125rem; }
  .mk-collection-item-title { margin: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em;
    & a { color: inherit; text-decoration: none; }
  }
  .mk-collection-item-count { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; }
  .mk-collection-item-more { display: inline-flex; align-items: center; gap: 0.25rem; margin-block-start: 0.375rem; font-size: 0.875rem; font-weight: 600;
    & svg { width: 0.875rem; height: 0.875rem; transition: translate 150ms ease; }
  }
  .mk-collection-item:hover .mk-collection-item-more svg { translate: 0.25rem 0; }

  .mk-collection-item[data-variant="overlay"], .mk-collection-item[data-variant="banner"] {
    overflow: hidden;
    border-radius: var(--radius-xl);
    color: #fff;

    & .mk-collection-item-media { border-radius: 0; }
    &:hover .mk-collection-item-media { scale: 1.04; filter: none; }
    & .mk-collection-item-body { position: absolute; inset: auto 0 0; padding: 3rem 1.25rem 1.25rem; background: linear-gradient(transparent, oklch(0.12 0.02 260 / 0.8)); }
    & .mk-collection-item-count { color: oklch(1 0 0 / 0.8); }
  }
  .mk-collection-item[data-variant="banner"] {
    & .mk-collection-item-media { aspect-ratio: 21 / 9; }
    & .mk-collection-item-body { inset: 0 auto 0 0; align-content: center; justify-items: start; width: min(100%, 26rem); padding: 2rem; background: linear-gradient(90deg, oklch(0.12 0.02 260 / 0.75), transparent); }
    & .mk-collection-item-title { font-size: clamp(1.5rem, 4vw, 2.25rem); letter-spacing: -0.03em; }
    & .mk-collection-item-more { margin-block-start: 1rem; padding: 0.5rem 1rem; border-radius: 999px; background: #fff; color: oklch(0.15 0 0); }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-collection-item-media, .mk-collection-item-more svg { transition: none; }
    .mk-collection-item:hover .mk-collection-item-media { scale: none; }
  }

  @media (forced-colors: active) {
    .mk-collection-item:is([data-variant="overlay"], [data-variant="banner"]) .mk-collection-item-body { background: Canvas; color: CanvasText; }
  }
}

/* ── components/collection-pagination/collection-pagination.css ── */
/* -- Collection Pagination (website · Search & Navigation) ----------------
   Navigates between discrete pages of a collection - the range shown, the Pagination component and how many per page; or simply previous / next. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-collection-pagination, .mk-collection-pagination *, .mk-collection-pagination ::before, .mk-collection-pagination ::after) { box-sizing: border-box; }

  .mk-collection-pagination { container: mk-collection-pagination / inline-size; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; width: 100%; padding-block: 1rem; border-block-start: 1px solid var(--border); font-size: 0.875rem; }
  .mk-collection-pagination-range { color: var(--muted-foreground);
    & strong { color: var(--foreground); font-variant-numeric: tabular-nums; }
  }
  .mk-collection-pagination-size { display: flex; align-items: center; gap: 0.5rem; color: var(--muted-foreground);
    & .select { width: auto; height: 2rem; font-size: 0.8125rem; }
  }
  .mk-collection-pagination[data-variant="simple"] .mk-collection-pagination-page { color: var(--muted-foreground); }
  .mk-collection-pagination[data-variant="centered"] { flex-direction: column; justify-content: center; }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-collection-pagination { border-color: CanvasText; }
  }
}

/* ── components/color-picker/color-picker.css ── */
/* -- Color Picker component ------------------------------------- */

@layer components {
  .color-picker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    /* the unsized default IS the ladder's md step (see .input):
       1.75rem swatch + 2×3px block padding + 2px frame = 36px */
    padding: 0.1875rem 0.75rem 0.1875rem 0.25rem;
    box-shadow: var(--shadow-xs);

    & input[type="color"] {
      -webkit-appearance: none;
      appearance: none;
      width: 1.75rem;
      height: 1.75rem;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      cursor: pointer;
      padding: 0;
      background: none;

      &::-webkit-color-swatch-wrapper { padding: 0; }
      &::-webkit-color-swatch {
        border: none;
        border-radius: calc(var(--radius-sm) - 1px);
      }
      &::-moz-color-swatch {
        border: none;
        border-radius: calc(var(--radius-sm) - 1px);
      }
    }

    /* the value is meant to be used: one click selects all of it for copy;
       tabular digits keep the width steady while dragging through colours */
    & .color-picker-value {
      font-size: 0.8125rem;
      font-family: var(--font-mono);
      font-variant-numeric: tabular-nums;
      color: var(--muted-foreground);
      white-space: nowrap;
      user-select: all;
    }

    /* optional notation switcher (hex / rgb / hsl / oklch) at the end */
    & .color-picker-format {
      margin-inline-start: auto;
      padding: 0 0 0 0.5rem;
      border: none;
      border-inline-start: 1px solid var(--border);
      background: transparent;
      color: var(--muted-foreground);
      font-size: 0.75rem;
      font-family: var(--font-mono);
      cursor: pointer;

      &:focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
        border-radius: var(--radius-sm);
      }
    }

    /* -- Sizes -------------------------------------------------
       Swatch + padding re-derived per step so the TOTAL box height lands
       on the shared input ladder (xs 28 / sm 32 / md 36 / lg 44 / xl 52
       px - md is the typical 2.25rem the other inputs use at md). The UA
       styles form controls border-box, so:
       total = swatch + 2×padding-block + 2px frame:
       xs 20+6+2 · sm 24+6+2 · md 28+6+2 · lg 32+10+2 · xl 40+10+2.
       The unsized default IS md (1.75rem swatch, 0.1875rem block padding = 36px)
       - exactly like .input defaults to the md step. */
    &[data-size="xs"] { padding: 0.1875rem 0.5rem; gap: 0.375rem; & input[type="color"] { width: 1.25rem; height: 1.25rem; } & .color-picker-value { font-size: 0.6875rem; } }
    &[data-size="sm"] { padding: 0.1875rem 0.625rem; gap: 0.375rem; & input[type="color"] { width: 1.5rem; height: 1.5rem; } & .color-picker-value { font-size: 0.75rem; } }
    &[data-size="md"] { padding: 0.1875rem 0.75rem; & input[type="color"] { width: 1.75rem; height: 1.75rem; } & .color-picker-value { font-size: 0.8125rem; } }
    &[data-size="lg"] { padding: 0.3125rem 0.875rem; & input[type="color"] { width: 2rem; height: 2rem; } & .color-picker-value { font-size: 0.875rem; } }
    &[data-size="xl"] { padding: 0.3125rem 1rem; gap: 0.625rem; & input[type="color"] { width: 2.5rem; height: 2.5rem; } & .color-picker-value { font-size: 1rem; } }
  }
}

/* ── components/combobox/combobox.css ── */
/* -- Combobox component ---------------------------------------- */

@layer components {
  .combobox {
    position: relative;

    /* -- Sizes: set data-size on the .combobox wrapper; the trigger (a
       .btn) and the popover's rows scale together. Heights/fonts mirror the
       field ladder the .input defines: the unsized trigger renders 2.5rem —
       the .input default - via the .combobox-trigger rule below, md = 2.25rem
       is the ladder's md, exactly like .input goes 2.5rem → 2.25rem at md. */
    &[data-size="xs"] {
      & .combobox-trigger { height: 1.75rem; padding: 0 0.5rem; font-size: 0.75rem; }
      & .combobox-item, & .combobox-group-label { font-size: 0.75rem; padding-block: 0.25rem; }
    }
    &[data-size="sm"] {
      & .combobox-trigger { height: 2rem; padding: 0 0.625rem; font-size: 0.8125rem; }
      & .combobox-item, & .combobox-group-label { font-size: 0.8125rem; padding-block: 0.3125rem; }
    }
    &[data-size="md"] {
      & .combobox-trigger { height: 2.25rem; }
    }
    &[data-size="lg"] {
      & .combobox-trigger { height: 2.75rem; padding: 0 1rem; font-size: 1rem; }
      & .combobox-item, & .combobox-group-label { font-size: 1rem; padding-block: 0.5rem; }
    }
    &[data-size="xl"] {
      & .combobox-trigger { height: 3.25rem; padding: 0 1.25rem; font-size: 1.125rem; }
      & .combobox-item, & .combobox-group-label { font-size: 1.125rem; padding-block: 0.625rem; }
    }
  }

  .combobox-trigger {
    width: 100%;
    justify-content: space-between;
    /* the field standard for the unsized default (see .input): the ladder's
       md step - identical to what a bare .btn renders, so no override is
       needed beyond pinning it explicitly against .btn base drift */
    height: 2.25rem;
  }

  .combobox-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    text-align: left;
    font-weight: 400;
  }

  .combobox-value[data-placeholder] {
    color: var(--muted-foreground);
  }

  .combobox-chevron {
    flex-shrink: 0;
    color: var(--muted-foreground);
    opacity: 0.5;
  }

  /* Clear button (injected by combobox.js after the trigger). Anchor-positioned
     over the trigger's chevron slot; anchored via the same per-instance anchor
     name the popover uses. `data-placeholder` presence is the single
     selection marker - the :has() rules below flip chevron and clear in sync,
     so no JS toggles visibility. */
  .combobox-clear {
    position: fixed;
    inset: auto;
    margin: 0;
    top: anchor(top);
    bottom: anchor(bottom);
    right: anchor(right);
    /* center the 20px box exactly over the 16px chevron (1rem trigger padding) */
    margin-inline-end: 0.875rem;
    width: 1.25rem;
    display: none;
    place-items: center;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;

    &:hover { color: var(--foreground); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
  }

  .combobox:has(.combobox-value:not([data-placeholder])) {
    & .combobox-clear { display: grid; }
    & .combobox-chevron { display: none; }
  }

  /* -- Multi-select (data-multiple) --------------------------------
     Options show a checkbox (empty box → filled with a check), the chosen
     options sit as removable tags under the trigger. The check is ::after,
     painted in --primary-foreground over the ::before box, so it stays
     visible in light and dark (primary flips, its foreground flips with it). */
  .combobox[data-multiple] .combobox-item {
    padding-inline-start: 1.875rem;

    &::before {
      content: '';
      position: absolute;
      inset-inline-start: 0.5rem;
      top: 50%;
      width: 1rem;
      height: 1rem;
      transform: translateY(-50%);
      box-sizing: border-box;
      border: 1px solid var(--input);
      border-radius: calc(var(--radius-sm) * 0.75);
      background: var(--background);
      mask: none;
    }

    &[aria-selected="true"]::before {
      border-color: var(--primary);
      background-color: var(--primary);
      mask: none;
    }

    &[aria-selected="true"]::after {
      content: '';
      position: absolute;
      inset-inline-start: 0.625rem;
      top: 50%;
      width: 0.75rem;
      height: 0.75rem;
      transform: translateY(-50%);
      background-color: var(--primary-foreground);
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 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") center / contain no-repeat;
    }
  }

  .combobox-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;

    /* nothing chosen: no empty gap under the trigger */
    &:not(:has(.combobox-tag)) {
      display: none;
    }
  }

  .combobox-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0.125rem 0.25rem 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25rem;
  }

  .combobox-tag-remove {
    display: inline-grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: none;
    border-radius: calc(var(--radius-sm) * 0.75);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;

    &:hover {
      background-color: color-mix(in oklch, var(--foreground) 10%, transparent);
      color: var(--foreground);
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 1px;
    }
  }

  /* -- Tag input (data-tags) ----------------------------------------
     Tags INSIDE a field-like box, typed into directly: .combobox-field looks
     like .input (same border, radius, ring on focus-within), the tags and the
     text input wrap together, the input takes the remaining width. */
  .combobox-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    box-sizing: border-box;
    min-height: 2.25rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    box-shadow: var(--shadow-xs);
    cursor: text;
    transition: border-color 150ms, box-shadow 150ms;

    &:focus-within {
      border-color: var(--ring);
      box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.2);
    }

    /* the tag span dissolves into the field's wrap (tags + input flow together) */
    & > .combobox-tags {
      display: contents;
    }

    & .combobox-tag {
      line-height: 1.375rem;
    }
  }

  .combobox-field-input {
    flex: 1 1 6rem;
    min-width: 6rem;
    height: 1.625rem;
    padding: 0 0.25rem;
    border: none;
    outline: none;
    background: transparent;
    color: var(--foreground);
    font: inherit;
    font-size: 0.875rem;

    &::placeholder {
      color: var(--muted-foreground);
    }
  }

  /* "Create …" row: a plus instead of the checkbox */
  .combobox[data-multiple] .combobox-item.combobox-create {
    color: var(--muted-foreground);

    &::before {
      border: none;
      border-radius: 0;
      background-color: currentColor;
      mask: 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.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    &[data-highlighted] {
      color: var(--accent-foreground);
    }
  }

  .combobox-content {
    position: fixed;
    inset: auto;
    margin: 0;
    padding: 0;
    background-color: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;

    /* -- Anchor positioning -- */
    top: anchor(bottom);
    left: anchor(left);
    width: anchor-size(width);
    margin-top: 4px;
    position-try-fallbacks: flip-block;

    /* -- Animation --------------------------------------------- */
    opacity: 0;
    transform: scale(0.96) translateY(-0.25rem);
    transition: opacity 150ms ease, transform 150ms ease,
                display 150ms allow-discrete;

    &:popover-open {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  @starting-style {
    .combobox-content:popover-open {
      opacity: 0;
      transform: scale(0.96) translateY(-0.25rem);
    }
  }

  .combobox-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
  }

  .combobox-search-icon {
    flex-shrink: 0;
    color: var(--muted-foreground);
  }

  .combobox-search-input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    font-family: var(--font-sans);
    color: var(--foreground);
    outline: none;

    &::placeholder { color: var(--muted-foreground); }
  }

  .combobox-listbox {
    max-height: 16rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.25rem;
  }

  .combobox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: calc(var(--radius) * 0.6);
    font-size: 0.875rem;
    cursor: pointer;
    outline: none;
    transition: background 100ms;
    /* room for the selection check; the ::before is absolute (like
       .dropdown-check) so unselected rows never shift horizontally */
    padding-inline-start: 1.5rem;
    position: relative;

    &:hover, &[data-highlighted] {
      background-color: var(--accent);
      color: var(--accent-foreground);
    }

    /* Mask (not background-image): a data: URI SVG resolves currentColor to
       BLACK when used as an image, making the check invisible in dark mode.
       Masking paints it with background-color: currentColor - the real text
       color, hover/foreground included. */
    &[aria-selected="true"]::before {
      content: '';
      position: absolute;
      inset-inline-start: 0.375rem;
      top: 50%;
      transform: translateY(-50%);
      width: 1rem;
      height: 1rem;
      background-color: currentColor;
      mask-image: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
      mask-size: contain;
      mask-repeat: no-repeat;
      flex-shrink: 0;
    }

    &[aria-disabled="true"] {
      pointer-events: none;
      opacity: 0.5;
    }

    /* Author `display: flex` overrides the UA's [hidden] { display: none }
       (author origin always wins), so filter()'s item.hidden = true left
       non-matching options rendered - and clickable - in the list. */
    &[hidden] {
      display: none;
    }
  }

  .combobox-empty {
    padding: 1.5rem 0.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--muted-foreground);
  }

  .combobox-group-label {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted-foreground);
  }

  .combobox-separator {
    height: 1px;
    background: var(--border);
    margin: 0.25rem -0.25rem;
  }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    .combobox-content {
      transition: none;
    }
    .combobox-item {
      transition: none;
    }
  }

  @media (forced-colors: active) {
    .combobox-content {
      border-color: ButtonText;
    }
    .combobox-item {
      &:hover, &[data-highlighted] {
        forced-color-adjust: none;
        background: Highlight;
        color: HighlightText;
      }
    }
  }
}

/* ── components/coming-soon/coming-soon.css ── */
/* -- Coming Soon (website · Account & States) -----------------------------
   Announces an upcoming launch and its expected availability - the date, a live rolling countdown, a notify-me form and where to follow along. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-coming-soon, .mk-coming-soon *, .mk-coming-soon ::before, .mk-coming-soon ::after) { box-sizing: border-box; }

  .mk-coming-soon { container: mk-coming-soon / inline-size; width: 100%; overflow: hidden; border-radius: var(--radius-xl);
    background: radial-gradient(60% 70% at 20% 0%, color-mix(in oklab, var(--chart-1) 22%, transparent), transparent 70%), radial-gradient(60% 70% at 90% 100%, color-mix(in oklab, var(--chart-2) 20%, transparent), transparent 70%), var(--muted);
  }
  .mk-coming-soon-layout { display: grid; }
  .mk-coming-soon-copy { display: grid; justify-items: center; gap: 1.25rem; padding: 3.5rem 1.5rem; text-align: center;
    & > svg { width: 2rem; height: 2rem; color: var(--primary); }
  }
  .mk-coming-soon-eyebrow { padding: 0.25rem 0.75rem; border-radius: 999px; background: var(--background); font-size: 0.8125rem; font-weight: 600; box-shadow: var(--shadow-xs); }
  .mk-coming-soon-title { margin: 0; font-size: clamp(2.25rem, 7cqi, 4rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; text-wrap: balance; }
  .mk-coming-soon-text { margin: 0; max-width: 32rem; color: var(--muted-foreground); font-size: 1.0625rem; text-wrap: pretty; }
  .mk-coming-soon-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; width: 100%; max-width: 26rem;
    & .input { flex: 1 1 12rem; background: var(--background); }
  }
  .mk-coming-soon-timer { gap: 0.625rem;
    & .countdown-unit { min-width: 5rem; box-shadow: var(--shadow-lg); }
  }
  .mk-coming-soon-social { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none;
    & a { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); color: var(--muted-foreground); }
    & a:hover { background: var(--background); color: var(--foreground); }
    & svg { width: 1.125rem; height: 1.125rem; }
  }
  .mk-coming-soon-media { display: none; margin: 0;
    & img { display: block; width: 100%; height: 100%; object-fit: cover; }
  }
  @container mk-coming-soon (min-width: 48rem) {
    .mk-coming-soon[data-variant="image"] .mk-coming-soon-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
    .mk-coming-soon[data-variant="image"] .mk-coming-soon-copy { justify-items: start; text-align: start; padding: 3.5rem; }
    .mk-coming-soon[data-variant="image"] :is(.mk-coming-soon-form, .mk-coming-soon-timer) { justify-content: start; }
    .mk-coming-soon[data-variant="image"] .mk-coming-soon-media { display: block; }
    /* the copy column is narrow beside the picture: a compact timer stays on one row */
    .mk-coming-soon[data-variant="image"] .mk-coming-soon-timer { gap: 0.5rem; }
    .mk-coming-soon[data-variant="image"] .mk-coming-soon-timer .countdown-unit { min-width: 3.75rem; padding: 0.5rem 0.375rem; }
    .mk-coming-soon[data-variant="image"] .mk-coming-soon-timer .countdown { font-size: 1.75rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-coming-soon { border: 1px solid CanvasText; }
  }
}

/* ── components/command/command.css ── */
@layer components {
  dialog.command {
    border: none; border-radius: var(--radius-xl);
    background: var(--popover); color: var(--popover-foreground);
    padding: 0; max-width: 32rem; width: calc(100% - 2rem);
    box-shadow: var(--shadow-lg); margin: auto; position: fixed; inset: 0;
    top: 15%; bottom: auto; overflow: hidden;
    opacity: 0; transform: scale(0.98);
    transition: opacity 150ms ease, transform 150ms ease, display 150ms allow-discrete;

    &[open] { opacity: 1; transform: scale(1); }
    &::backdrop { background: oklch(0 0 0 / 0); transition: all 150ms ease, display 150ms allow-discrete; }
    &[open]::backdrop { background: oklch(0 0 0 / 0.45); }
  }

  @starting-style {
    dialog.command[open] { opacity: 0; transform: scale(0.98); }
    dialog.command[open]::backdrop { background: oklch(0 0 0 / 0); }
  }

  /* -- Scroll lock ------------------------------------------- */
  /* Page behind stays put while the palette is modal (see dialog.css):
     `:modal` + overflow:hidden freezes the viewport at its current offset. */
  html:has(dialog.command:modal) {
    overflow: hidden;
    scrollbar-gutter: stable;
  }

  .command-input-wrapper {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 1rem; border-bottom: 1px solid var(--border);
    & svg { width: 1rem; height: 1rem; color: var(--muted-foreground); flex-shrink: 0; }
  }

  .command-input {
    flex: 1; border: none; background: transparent;
    font-size: 0.875rem; color: var(--foreground); outline: none; font-family: inherit;
    &::placeholder { color: var(--muted-foreground); }
  }

  .command-list { max-height: 18rem; overflow-y: auto; overscroll-behavior: contain; padding: 0.25rem; }
  .command-group { padding: 0.25rem 0; }
  .command-group-heading { margin: 0; padding: 0.375rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); }

  .command-item {
    display: flex; align-items: center; gap: 0.5rem; width: 100%;
    padding: 0.5rem 0.5rem; border: none; border-radius: var(--radius-md);
    background: transparent; color: var(--foreground); font-size: 0.8125rem;
    font-family: inherit; text-align: left; cursor: pointer; outline: none;
    &:hover, &[data-highlighted] { background-color: var(--accent); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
    &[aria-disabled="true"] { pointer-events: none; opacity: 0.5; }
    & svg { width: 1rem; height: 1rem; color: var(--muted-foreground); flex-shrink: 0; }
    /* Same as combobox-item: `display: flex` beats the UA [hidden] rule, and
       command.ts filter() hides non-matches via the hidden attribute. */
    &[hidden] { display: none; }
  }

  .command-separator { height: 1px; background-color: var(--border); margin: 0.25rem -0.25rem; }
  .command-shortcut { margin-inline-start: auto; font-size: 0.6875rem; color: var(--muted-foreground); font-family: var(--font-mono); }
  .command-empty { padding: 1.5rem; text-align: center; font-size: 0.875rem; color: var(--muted-foreground); }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    dialog.command { transition: none; opacity: 1; transform: none; }
    dialog.command::backdrop { transition: none; }
  }

  @media (prefers-contrast: more) {
    dialog.command { border: 2px solid var(--border); }
    .command-item {
      &:hover, &[data-highlighted] { outline: 1px solid var(--foreground); }
    }
  }

  @media (forced-colors: active) {
    dialog.command { border: 2px solid CanvasText; }
    .command-item {
      &:hover, &[data-highlighted] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
    }
    .command-separator { background-color: CanvasText; }
  }
  /* -- Density ----------------------------------------------------
     data-density on the dialog.command root scales the rows of the palette.
     comfortable == the unsized default. (0,2,1) beats the base (0,1,0). */
  dialog.command:where([data-density="compact"]) {
    & .command-input-wrapper { padding: 0.5rem 0.75rem; }
    & .command-item { padding: 0.375rem 0.5rem; }
    & .command-group-heading { padding: 0.25rem 0.5rem; }
  }
  dialog.command:where([data-density="comfortable"]) {
    & .command-input-wrapper { padding: 0.75rem 1rem; }
    & .command-item { padding: 0.5rem 0.5rem; }
    & .command-group-heading { padding: 0.375rem 0.5rem; }
  }
  dialog.command:where([data-density="spacious"]) {
    & .command-input-wrapper { padding: 1rem 1.25rem; }
    & .command-item { padding: 0.625rem 0.5rem; }
    & .command-group-heading { padding: 0.5rem 0.5rem; }
  }

}

/* ── components/comment-form/comment-form.css ── */
/* -- Comment Form (website) -----------------------------------------
   Collects a new comment or a reply: the writer's avatar beside a Textarea
   that grows with its text (field-sizing), optional name / email fields for
   guests, a hint and the submit Button. Native validation (required,
   minlength) - :user-invalid marks the field only after an attempt. */

@layer components {
  .mk-comment-form {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;

    & > .avatar { margin-block-start: 0.25rem; }
    /* without an avatar the form takes the full row */
    &:not(:has(> .avatar)) { grid-template-columns: minmax(0, 1fr); }
  }

  .mk-comment-form-main {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;

    & .textarea {
      field-sizing: content;
      min-height: 5.5rem;
      max-height: 20rem;
      resize: none;
    }
  }

  /* guest fields: name + email side by side */
  .mk-comment-form-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 0.625rem;

    & > div { display: flex; flex-direction: column; gap: 0.375rem; }
  }

  .mk-comment-form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  .mk-comment-form-hint {
    margin: 0 auto 0 0;
    color: var(--muted-foreground);
    font-size: 0.75rem;
  }

  /* a formatting row above the text (a Toggle Group, a Separator, Buttons) */
  .mk-comment-form-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
  }

  /* framed: toolbar, text and footer in one bordered box - the textarea
     loses its own border, the box takes the focus ring */
  .mk-comment-form[data-variant="framed"] .mk-comment-form-main {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--input);
    border-radius: var(--radius-lg);
    background: var(--background);
    transition: border-color 120ms, box-shadow 120ms;

    &:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 25%, transparent); }
    & .mk-comment-form-toolbar { padding: 0.375rem; border-block-end: 1px solid var(--border); background: color-mix(in oklch, var(--muted) 50%, transparent); }
    & .textarea { border: 0; border-radius: 0; box-shadow: none; outline: none; background: transparent; }
    & .mk-comment-form-footer { padding: 0.5rem 0.625rem; border-block-start: 1px solid var(--border); }
    & .tabs { gap: 0; }
    & .tab-content { padding: 0; }
  }

  /* reply: compact, under a comment */
  .mk-comment-form[data-variant="reply"] {
    gap: 0.5rem;

    & .mk-comment-form-main .textarea { min-height: 3.5rem; font-size: 0.875rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-comment-form[data-variant="framed"] .mk-comment-form-main { transition: none; }
  }

  @media (prefers-contrast: more) {
    .mk-comment-form-hint { color: var(--foreground); }
  }

  @media (forced-colors: active) {
    .mk-comment-form-main .textarea { border: 1px solid CanvasText; }
  }
}

/* ── components/comment-header/comment-header.css ── */
/* -- Comment Header (website) ---------------------------------------
   Introduces a discussion: the title with the comment count (a Badge) and
   the sorting - a native Select, or sort links (aria-current) in the tabs
   variant - plus optional actions (follow the thread). */

@layer components {
  .mk-comment-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    box-sizing: border-box;
    width: 100%;
    padding-block-end: 0.875rem;
    border-block-end: 1px solid var(--border);
  }

  .mk-comment-header-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  .mk-comment-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  /* "Sort by" + the select, one label */
  .mk-comment-header-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    white-space: nowrap;

    & .select { width: auto; }
  }

  /* sort links: a small segmented row */
  .mk-comment-header-tabs {
    display: inline-flex;
    gap: 0.125rem;
    padding: 0.1875rem;
    border-radius: var(--radius-md);
    background: var(--muted);

    & a {
      padding: 0.25rem 0.75rem;
      border-radius: calc(var(--radius-md) - 2px);
      color: var(--muted-foreground);
      font-size: 0.8125rem;
      font-weight: 500;
      text-decoration: none;
      transition: color 120ms, background-color 120ms;

      &:hover { color: var(--foreground); }
      &[aria-current] { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-xs); }
      &:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
    }
  }

  /* who is talking: an Avatar group + a sentence, on its own row */
  .mk-comment-header-people {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    gap: 0.625rem;
    color: var(--muted-foreground);
    font-size: 0.8125rem;

    & strong { color: var(--foreground); font-weight: 600; }
  }

  /* plain: no rule under the header */
  .mk-comment-header[data-variant="plain"] { padding-block-end: 0; border-block-end: 0; }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-comment-header-tabs a { transition: none; }
  }

  @media (prefers-contrast: more) {
    .mk-comment-header-sort,
    .mk-comment-header-tabs a { color: var(--foreground); }
  }

  @media (forced-colors: active) {
    .mk-comment-header-tabs { border: 1px solid CanvasText; }
    .mk-comment-header-tabs a[aria-current] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  }
}

/* ── components/comment-item/comment-item.css ── */
/* -- Comment Item (website) -----------------------------------------
   One comment: avatar, author (+ a role Badge), the timestamp (a permalink
   to the comment's own id), the text and its actions (reply, like) - and
   its replies, nested on a thread line. A comment reached by its permalink
   (:target) or marked data-highlighted lights up. */

@layer components {
  .mk-comment-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 0.75rem;
    padding-block: 0.875rem;
    scroll-margin-block-start: 5rem;

    & > .avatar { grid-row: span 2; }
  }

  .mk-comment-item-main {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
  }

  .mk-comment-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    font-size: 0.875rem;
  }

  .mk-comment-item-author {
    color: var(--foreground);
    font-weight: 600;
    text-decoration: none;

    &:is(a):hover { text-decoration: underline; text-underline-offset: 0.2em; }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
  }

  .mk-comment-item-time {
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    text-decoration: none;

    &:hover { text-decoration: underline; text-underline-offset: 0.2em; }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
  }

  .mk-comment-item-body {
    font-size: 0.9375rem;
    line-height: 1.6;
    overflow-wrap: anywhere;

    & > * { margin: 0; }
    & > * + * { margin-block-start: 0.5em; }
    & a { color: var(--primary); text-underline-offset: 0.2em; }
    & blockquote {
      padding-inline-start: 0.75em;
      border-inline-start: 2px solid var(--border);
      color: var(--muted-foreground);
    }
  }

  .mk-comment-item-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.125rem;
    margin-inline-start: -0.5rem;
    color: var(--muted-foreground);
  }

  /* replies: nested comments on a thread line */
  .mk-comment-item-replies {
    grid-column: 2;
    margin: 0.25rem 0 0;
    padding: 0 0 0 1rem;
    border-inline-start: 2px solid var(--border);
    list-style: none;

    & > li > .mk-comment-item:last-child { padding-block-end: 0; }
  }

  /* reached by its permalink, or marked */
  .mk-comment-item:target,
  .mk-comment-item[data-highlighted] {
    margin-inline: -0.75rem;
    padding-inline: 0.75rem;
    border-radius: var(--radius-lg);
    background: color-mix(in oklch, var(--primary) 8%, transparent);
    animation: mk-comment-item-flash 1.6s ease-out;
  }

  /* compact: a tighter thread */
  .mk-comment-item[data-variant="compact"] {
    padding-block: 0.5rem;

    & .mk-comment-item-body { font-size: 0.875rem; }
    & .mk-comment-item-head { font-size: 0.8125rem; }
  }

  /* deleted: the text is gone, the thread stays */
  .mk-comment-item[data-variant="deleted"] .mk-comment-item-body {
    color: var(--muted-foreground);
    font-style: italic;
  }

  /* the ⋯ menu (a Dropdown trigger) at the end of the head */
  .mk-comment-item-menu { margin-inline-start: auto; }

  /* reactions: emoji chips - toggle buttons (aria-pressed), an add button */
  .mk-comment-item-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-block-start: 0.125rem;

    & button {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      height: 1.625rem;
      padding: 0 0.5rem;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: transparent;
      color: var(--muted-foreground);
      font: inherit;
      font-size: 0.75rem;
      font-variant-numeric: tabular-nums;
      cursor: pointer;
      transition: background-color 120ms, border-color 120ms, color 120ms;

      &:hover { background: var(--accent); color: var(--accent-foreground); }
      &[aria-pressed="true"] { border-color: color-mix(in oklch, var(--primary) 45%, transparent); background: color-mix(in oklch, var(--primary) 10%, transparent); color: var(--foreground); }
      &:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
      & svg { width: 0.875rem; height: 0.875rem; }
    }
  }

  /* voted: a score column (up / count / down) instead of the avatar column */
  .mk-comment-item-votes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    grid-row: span 2;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;

    & output { color: var(--foreground); }
    & button[aria-pressed="true"] { color: var(--primary); }
  }
  .mk-comment-item[data-variant="voted"] {
    grid-template-columns: auto auto minmax(0, 1fr);

    & > .avatar { grid-row: auto; align-self: start; }
    & > .mk-comment-item-replies { grid-column: 3; }
  }

  /* accepted: the answer - a green rail and a check badge */
  .mk-comment-item[data-variant="accepted"] {
    padding-inline: 0.875rem;
    margin-inline: -0.875rem;
    border-inline-start: 3px solid oklch(0.62 0.15 150);
    border-radius: var(--radius-md);
    background: color-mix(in oklch, oklch(0.62 0.15 150) 7%, transparent);
  }

  /* collapsible replies: a native <details> - "Show 3 replies" */
  .mk-comment-item-thread {
    grid-column: 2;

    & > summary {
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      margin-block-start: 0.375rem;
      padding: 0.25rem 0.5rem;
      margin-inline-start: -0.5rem;
      border-radius: var(--radius-sm);
      color: var(--primary);
      font-size: 0.8125rem;
      font-weight: 600;
      cursor: pointer;
      list-style: none;

      &::-webkit-details-marker { display: none; }
      &::before { content: ""; width: 0.375rem; height: 0.375rem; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; rotate: -45deg; transition: rotate 150ms; }
      &:hover { background: var(--accent); }
      &:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
    }
    &[open] > summary::before { rotate: 45deg; }
    & > .mk-comment-item-replies { grid-column: auto; }
  }

  @keyframes mk-comment-item-flash {
    from { background: color-mix(in oklch, var(--primary) 22%, transparent); }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-comment-item:target,
    .mk-comment-item[data-highlighted] { animation: none; }
    .mk-comment-item-reactions button,
    .mk-comment-item-thread > summary::before { transition: none; }
  }

  @media (prefers-contrast: more) {
    .mk-comment-item-time,
    .mk-comment-item-actions { color: var(--foreground); }
    .mk-comment-item-replies { border-inline-start-color: var(--foreground); }
  }

  @media (forced-colors: active) {
    .mk-comment-item:target,
    .mk-comment-item[data-highlighted] { outline: 2px solid Highlight; }
  }
}

/* ── components/comparison-table/comparison-table.css ── */
/* -- Comparison Table (website · Company) ---------------------------------
   Compares alternatives across a shared set of criteria - a real table with a highlighted column and a sticky first column, or a two-sided versus card. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-comparison-table, .mk-comparison-table *, .mk-comparison-table ::before, .mk-comparison-table ::after) { box-sizing: border-box; }

  .mk-comparison-table {
    container: mk-comparison-table / inline-size;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);

    & table { min-width: 36rem; margin: 0; }
    & caption { padding: 1rem 1.25rem 0; color: var(--muted-foreground); font-size: 0.8125rem; text-align: start; caption-side: top; }
    & :is(th, td) { padding: 0.875rem 1.25rem; text-align: center; }
    & th[scope="row"], & thead th:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--background); text-align: start; font-weight: 500; }
    & thead th { font-size: 0.9375rem; font-weight: 600; }
    & [data-highlight] { background: color-mix(in oklab, var(--chart-1) 8%, var(--background)); }
    & thead [data-highlight] { box-shadow: inset 0 3px 0 var(--chart-1); }
  }
  .mk-comparison-yes { color: #16a34a; vertical-align: middle; }
  .mk-comparison-no { color: var(--muted-foreground); opacity: 0.6; vertical-align: middle; }
  .mk-comparison-partial { color: #b45309; font-size: 0.8125rem; font-weight: 500; }

  /* versus: two sides of a card */
  .mk-comparison-versus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);

    & section { display: grid; align-content: start; gap: 1rem; padding: 1.75rem; }
    & section + section { border-inline-start: 1px solid var(--border); }
    & section[data-highlight] { background: color-mix(in oklab, var(--chart-1) 7%, var(--card)); }
    & h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1.125rem; font-weight: 600; }
    & ul { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
    & li { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.9375rem; }
    & li svg { flex: none; margin-block-start: 0.125rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-comparison-table thead [data-highlight] { box-shadow: inset 0 3px 0 Highlight; }
    .mk-comparison-yes, .mk-comparison-no { color: CanvasText; }
  }
}

/* ── components/contents/contents.css ── */
/* -- Contents (website · Search & Navigation) -----------------------------
   Links to headings within the current page - an "on this page" rail with the current section marked, a numbered box at the top, or a disclosure for small screens. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-contents, .mk-contents *, .mk-contents ::before, .mk-contents ::after) { box-sizing: border-box; }

  .mk-contents { width: 100%; max-width: 15rem; font-size: 0.8125rem;
    & ol { margin: 0; padding: 0; list-style: none; }
    & > ol { border-inline-start: 1px solid var(--border); }
    & ol ol { padding-inline-start: 0.75rem; }
    & a { display: block; margin-inline-start: -1px; padding: 0.3125rem 0.75rem; border-inline-start: 2px solid transparent; color: var(--muted-foreground); text-decoration: none; line-height: 1.4; }
    & a:hover { color: var(--foreground); }
    & a[aria-current] { border-inline-start-color: var(--primary); color: var(--foreground); font-weight: 600; }
    & a:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
  }
  .mk-contents-title { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

  .mk-contents[data-variant="boxed"] {
    max-width: 30rem;
    padding: 1.25rem;
    border-radius: var(--radius-xl);
    background: var(--muted);
    font-size: 0.9375rem;

    & > ol { border: 0; counter-reset: mk-toc; }
    & > ol > li { counter-increment: mk-toc; }
    & > ol > li > a::before { content: counter(mk-toc) ". "; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
    & a { margin: 0; padding: 0.25rem 0; border: 0; color: var(--foreground); }
    & a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
    & a[aria-current] { color: var(--primary); }
  }

  .mk-contents[data-variant="dropdown"] { max-width: 24rem; border: 1px solid var(--border); border-radius: var(--radius-lg);
    & summary { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; cursor: pointer; font-weight: 600; list-style: none; }
    & summary::-webkit-details-marker { display: none; }
    & summary::after { content: ""; width: 0.4375rem; height: 0.4375rem; border-block-end: 2px solid currentColor; border-inline-end: 2px solid currentColor; rotate: 45deg; transition: rotate 150ms ease; }
    &[open] summary::after { rotate: 225deg; }
    & summary:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; border-radius: var(--radius-lg); }
    & > ol { margin: 0 1rem 0.75rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-contents[data-variant="dropdown"] summary::after { transition: none; }
  }

  @media (forced-colors: active) {
    .mk-contents a[aria-current] { border-inline-start-color: Highlight; }
  }
}

/* ── components/context-menu/context-menu.css ── */
@layer components {
  .context-menu-trigger {
    display: flex; align-items: center; justify-content: center;
    border: 2px dashed var(--border); border-radius: var(--radius-lg);
    padding: 3rem; font-size: 0.875rem; color: var(--muted-foreground); cursor: default;
  }

  .context-menu {
    margin: 0; border: 1px solid var(--border); border-radius: var(--radius-lg);
    background-color: var(--popover); color: var(--popover-foreground);
    padding: 0.25rem; box-shadow: var(--shadow-md); min-width: 10rem;
    opacity: 0; transform: scale(0.95);
    transition: opacity 100ms ease, transform 100ms ease, display 100ms allow-discrete;

    &:popover-open { opacity: 1; transform: scale(1); }
  }

  @starting-style {
    .context-menu:popover-open { opacity: 0; transform: scale(0.95); }
  }

  .context-menu-item {
    display: flex; align-items: center; gap: 0.5rem; width: 100%;
    padding: 0.375rem 0.5rem; border: none; border-radius: var(--radius-md);
    background: transparent; color: var(--popover-foreground);
    font-size: 0.8125rem; font-family: inherit; text-align: left; cursor: pointer;
    transition: background-color 100ms ease;

    &:hover, &[data-highlighted] { background-color: var(--accent); color: var(--accent-foreground); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
  }

  .context-menu-separator { height: 1px; background-color: var(--border); margin: 0.25rem -0.25rem; }
  /* -- Density ----------------------------------------------------
     data-density on the .context-menu root scales the container padding and
     the item rows. comfortable == the unsized default. */
  .context-menu:where([data-density="compact"]) {
    padding: 0.125rem;
    & .context-menu-item { padding: 0.25rem 0.5rem; }
  }
  .context-menu:where([data-density="comfortable"]) {
    padding: 0.25rem;
    & .context-menu-item { padding: 0.375rem 0.5rem; }
  }
  .context-menu:where([data-density="spacious"]) {
    padding: 0.375rem;
    & .context-menu-item { padding: 0.5rem 0.625rem; }
  }

}

/* Accessibility: suppress motion for users who request it (REQUIRED for all
   components - AGENTS.md "Accessibility CSS"). Near-zero duration instead of
   `none` keeps transitionend/animationend (and discrete display flips)
   firing so JS state machines that await them keep working. */
@media (prefers-reduced-motion: reduce) {
  @layer components {
    .context-menu-trigger,
    .context-menu-trigger *,
    .context-menu-trigger::before,
    .context-menu-trigger::after,
    .context-menu-trigger *::before,
    .context-menu-trigger *::after,
    .context-menu-trigger::backdrop,
    .context-menu,
    .context-menu *,
    .context-menu::before,
    .context-menu::after,
    .context-menu *::before,
    .context-menu *::after,
    .context-menu::backdrop,
    .context-menu-item,
    .context-menu-item *,
    .context-menu-item::before,
    .context-menu-item::after,
    .context-menu-item *::before,
    .context-menu-item *::after,
    .context-menu-item::backdrop,
    .context-menu-separator,
    .context-menu-separator *,
    .context-menu-separator::before,
    .context-menu-separator::after,
    .context-menu-separator *::before,
    .context-menu-separator *::after,
    .context-menu-separator::backdrop {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

/* ── components/cookie-consent/cookie-consent.css ── */
/* -- Cookie Consent component -------------------------------------
   Built from the library: the dialog is the Dialog component (backdrop,
   animation, scroll lock), its controls are Button, Select, Tabs,
   Checkbox and Badge. This sheet adds only what consent needs on top -
   widths and the corner placement, a scrolling body between a fixed
   header and footer, the choice rows, the floating settings button and
   the placeholder that stands in for a blocked embed. */

@layer components {
  .cookie-consent {
    color: var(--foreground);
    font-family: var(--font-sans);

    /* sizes: sm 28rem · md (default) 40rem · lg 48rem */
    & .cookie-consent-dialog {
      max-width: 40rem;
      max-height: calc(100dvh - 2rem);
      overflow: hidden;
      overscroll-behavior: contain;
      & [hidden] { display: none !important; }
    }
    &[data-size="sm"] .cookie-consent-dialog { max-width: 28rem; }
    &[data-size="lg"] .cookie-consent-dialog { max-width: 48rem; }

    /* corner: a bottom-right modal - the page behind stays inert */
    &[data-variant="corner"] .cookie-consent-dialog {
      inset: auto 1rem 1rem auto;
      margin: 0;
    }

    /* banner: the first-visit view as a bar along the bottom of the page -
       NON-modal (the runtime opens it with show()), the page stays usable.
       Copy beside the buttons on wide screens, stacked on phones. The
       settings views reopen as the modal dialog, so this only styles the bar. */
    &[data-variant="banner"] .cookie-consent-dialog:not(:modal) {
      position: fixed;
      inset: auto 0 0;
      z-index: 60;
      container: cookie-banner / inline-size;
      width: 100%;
      max-width: none;
      max-height: min(60dvh, 28rem);
      margin: 0;
      border: 0;
      border-block-start: 1px solid var(--border);
      border-radius: 0;
      box-shadow: 0 -12px 32px -16px color-mix(in oklch, var(--foreground) 30%, transparent);
      transition: translate 300ms ease, opacity 300ms ease;

      @starting-style { translate: 0 100%; opacity: 0; }

      & .cookie-consent-content {
        grid-template-rows: none;
        max-width: 80rem;
        max-height: none;
        margin-inline: auto;
        padding: 1rem 1.25rem;
        gap: 0.5rem 2rem;
      }
      /* title and tools stay on one line, even on phones */
      & .cookie-consent-header { flex-direction: row; align-items: center; }
      & .cookie-consent-tools { align-self: center; }
      & .cookie-consent-title { font-size: 1rem; }
      & .cookie-consent-eyebrow { display: none; }
      & .cookie-consent-description { margin: 0; }
      & .cookie-consent-footer { flex-wrap: wrap; justify-content: flex-start; padding-block-start: 0; border-block-start: 0; }
    }
    @container cookie-banner (min-width: 48rem) {
      &[data-variant="banner"] .cookie-consent-dialog:not(:modal) .cookie-consent-content {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;

        /* the header spans the bar - title left, language + close at the far
           right; the text and the buttons share the row below */
        & > .cookie-consent-header { grid-column: 1 / -1; grid-row: 1; align-items: center; }
        & > .cookie-consent-body { grid-column: 1; grid-row: 2; }
        & > .cookie-consent-footer { grid-column: 2; grid-row: 2; justify-content: flex-end; }
        & > .cookie-consent-footer > .btn { flex: none; }
      }
    }

    /* header / scrolling body / footer */
    & .cookie-consent-content {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      gap: 1rem;
      max-height: calc(100dvh - 2rem);
      box-sizing: border-box;
    }
    &[data-density="compact"] .cookie-consent-content { padding: 1rem; gap: 0.75rem; }
    &[data-density="spacious"] .cookie-consent-content { padding: 2rem; gap: 1.25rem; }

    & .cookie-consent-header {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 1rem;
      margin: 0;
    }
    & .cookie-consent-title {
      font-size: 1.25rem;
      line-height: 1.3;
      text-wrap: balance;
      &:focus { outline: none; }
    }
    & .cookie-consent-eyebrow { margin: 0 0 0.375rem; font-size: 0.75rem; color: var(--muted-foreground); }
    & .cookie-consent-tools { display: flex; align-items: center; gap: 0.5rem; }
    & .cookie-consent-tools > .select { width: auto; }

    & .cookie-consent-body {
      min-height: 0;
      max-height: 55dvh;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
    }
    & .cookie-consent-description { margin: 0 0 1rem; text-wrap: pretty; }
    & .cookie-consent-tabs > .tab-list { width: 100%; margin-bottom: 0.75rem; }
    & .cookie-consent-tabs > .tab-list > .tab-trigger { flex: 1; }

    /* one choice: a framed Checkbox row */
    & .cookie-consent-row {
      padding: 1rem;
      margin-bottom: 0.625rem;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      & .field-description { margin-top: 0.375rem; }
      & > .checkbox { margin-top: 0.125rem; }
    }
    & .cookie-consent-label {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.875rem;
      font-weight: 600;
      cursor: pointer;
    }
    & .cookie-consent-data {
      display: flex;
      flex-wrap: wrap;
      gap: 0.375rem;
      margin: 0.625rem 0 0;
      padding: 0;
      list-style: none;
    }
    & a { color: var(--foreground); font-size: 0.8125rem; text-underline-offset: 0.2em; }
    & .cookie-consent-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
    & .cookie-consent-links:empty { display: none; }

    & .cookie-consent-footer {
      flex-wrap: wrap;
      margin: 0;
      padding-top: 1rem;
      border-top: 1px solid var(--border);
      & > .btn { flex: 1 1 auto; }
    }

    /* the floating way back to the settings */
    & .cookie-consent-floating {
      position: fixed;
      inset-inline-start: 1rem;
      inset-block-end: 1rem;
      z-index: 20;
      box-shadow: var(--shadow-md);
    }
  }

  /* -- A blocked embed: placeholder until its service is allowed -- */
  .cookie-consent-embed {
    display: grid;
    min-height: 12rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--muted);
    & > iframe { width: 100%; min-height: 16rem; border: 0; }
    & [hidden] { display: none !important; }
  }
  .cookie-consent-placeholder {
    align-self: center;
    padding: 1.5rem;
    text-align: center;
    color: var(--muted-foreground);
    font-family: var(--font-sans);
    font-size: 0.875rem;
  }
  .cookie-consent-embed-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }

  /* -- Accessibility -------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .cookie-consent .cookie-consent-dialog { transition: none; }
    .cookie-consent[data-variant="banner"] .cookie-consent-dialog:not(:modal) { transition: none; }
  }

  @media (prefers-contrast: more) {
    .cookie-consent .cookie-consent-row .field-description,
    .cookie-consent-placeholder { color: var(--foreground); }
    .cookie-consent .cookie-consent-row { border-color: var(--foreground); }
  }

  @media (forced-colors: active) {
    .cookie-consent .cookie-consent-row,
    .cookie-consent-embed { border-color: CanvasText; }
  }

  @media (max-width: 36rem) {
    .cookie-consent .cookie-consent-header { flex-direction: column; }
    .cookie-consent .cookie-consent-tools { align-self: end; }
    .cookie-consent .cookie-consent-footer { flex-direction: column; }
  }
}

/* ── components/countdown/countdown.css ── */
/* -- Countdown component ------------------------------------------ */

/* The size of one digit cell, resolved to px on .countdown - the value spans
   set font-size: 0 (their text is the accessible fallback), so every length
   inside them reads this instead of em. Top-level: @property is not layered. */
@property --_cd-em {
  syntax: '<length>';
  inherits: true;
  initial-value: 16px;
}

@layer components {
  /* A number that rolls to its new value - CSS only. Each value is a
     <span style="--value:N">N</span> (0-999) inside a .countdown; change
     --value (and the text) and the digits roll like an odometer: the ones
     digit and the higher digits are two independent columns (::after /
     ::before), picked with CSS math (mod(), round(down, …)). Leading zeros
     are dropped (the column narrows away) unless data-digits="2" / "3". */
  .countdown {
    --_cd-em: 1em;
    --_cd-speed: 1s;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-variant-numeric: tabular-nums;

    & > span {
      --_v: clamp(0, round(var(--value, 0)), 999);
      --_hi: round(down, calc(var(--_v) / 10), 1);
      --_lo: mod(var(--_v), 10);
      display: inline-flex;
      align-items: flex-start;
      height: var(--_cd-em);
      overflow-x: visible;
      overflow-y: clip;
      font-size: 0;

      /* higher digits (0-99), right-aligned so a growing number opens leftward */
      &::before {
        content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A 59\A 60\A 61\A 62\A 63\A 64\A 65\A 66\A 67\A 68\A 69\A 70\A 71\A 72\A 73\A 74\A 75\A 76\A 77\A 78\A 79\A 80\A 81\A 82\A 83\A 84\A 85\A 86\A 87\A 88\A 89\A 90\A 91\A 92\A 93\A 94\A 95\A 96\A 97\A 98\A 99" / "";
        width: calc((min(1, var(--_hi)) + min(1, round(down, calc(var(--_hi) / 10), 1))) * 1ch);
        direction: rtl;
        text-align: start;
        /* a narrowed column clips its (right-aligned) leading digits away */
        overflow: hidden;
        translate: 0 calc(var(--_hi) * -1em);
      }
      /* the ones digit */
      &::after {
        content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9" / "";
        width: 1ch;
        translate: 0 calc(var(--_lo) * -1em);
      }
      &::before,
      &::after {
        font-size: var(--_cd-em);
        line-height: 1;
        white-space: pre;
        transition:
          translate var(--_cd-speed) cubic-bezier(1, 0, 0, 1),
          width calc(var(--_cd-speed) / 2) ease;
      }
    }

    /* at least two digits: 5 → "05" */
    &[data-digits="2"] > span::before {
      width: calc(max(1, min(1, var(--_hi)) + min(1, round(down, calc(var(--_hi) / 10), 1))) * 1ch);
    }
    /* three digits: 7 → "007" */
    &[data-digits="3"] > span::before {
      content: "00\A 01\A 02\A 03\A 04\A 05\A 06\A 07\A 08\A 09\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A 59\A 60\A 61\A 62\A 63\A 64\A 65\A 66\A 67\A 68\A 69\A 70\A 71\A 72\A 73\A 74\A 75\A 76\A 77\A 78\A 79\A 80\A 81\A 82\A 83\A 84\A 85\A 86\A 87\A 88\A 89\A 90\A 91\A 92\A 93\A 94\A 95\A 96\A 97\A 98\A 99" / "";
      width: 2ch;
    }

    /* -- Sizes ------------------------------------------------------- */
    &[data-size="sm"] { font-size: 0.875rem; }
    &[data-size="md"] { font-size: 1rem; }
    &[data-size="lg"] { font-size: 1.5rem; }
    &[data-size="xl"] { font-size: 2.25rem; }
    &[data-size="2xl"] { font-size: 3.75rem; }
    &[data-size="3xl"] { font-size: 6rem; }

    /* -- Speed: the roll's duration ----------------------------------- */
    &[data-speed="fast"] { --_cd-speed: 0.4s; }
    &[data-speed="slow"] { --_cd-speed: 1.6s; }
  }

  /* -- Composition: a row of units, each a value over a label ---------- */
  .countdown-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }
  .countdown-unit {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    min-width: 4.5rem;

    &[data-variant] {
      padding: 0.75rem 1rem;
      border-radius: var(--radius-lg);
    }
    &[data-variant="muted"] { background-color: var(--muted); }
    &[data-variant="primary"] {
      background-color: var(--primary);
      color: var(--primary-foreground);
      & .countdown-label { color: color-mix(in oklch, var(--primary-foreground) 75%, transparent); }
    }
    &[data-variant="outline"] { border: 1px solid var(--border); }
  }
  .countdown-label {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted-foreground);
  }

  /* -- Accessibility ------------------------------------------------ */
  @media (prefers-reduced-motion: reduce) {
    .countdown > span::before,
    .countdown > span::after { transition: none; }
  }
  @media (forced-colors: active) {
    .countdown-unit[data-variant] { border: 1px solid CanvasText; }
  }
}

/* ── components/credential-item/credential-item.css ── */
/* -- Credential Item (website · Company) ----------------------------------
   Presents one certification or accreditation with verification details - the seal, the issuer, the validity and a link to verify it. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-credential-item, .mk-credential-item *, .mk-credential-item ::before, .mk-credential-item ::after) { box-sizing: border-box; }

  .mk-credential-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem 1rem;
    align-items: start;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);
  }
  .mk-credential-item-seal {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, oklch(0.95 0.06 85), oklch(0.82 0.12 80));
    color: oklch(0.42 0.1 70);
    box-shadow: 0 0 0 3px var(--card), 0 0 0 4px oklch(0.82 0.12 80);

    & svg { width: 1.375rem; height: 1.375rem; }
  }
  .mk-credential-item-body { display: grid; gap: 0.125rem; }
  .mk-credential-item-name { margin: 0; font-size: 1rem; font-weight: 600; }
  .mk-credential-item-issuer { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; }
  .mk-credential-item-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0.625rem 0 0;

    & div { display: grid; }
    & dt { color: var(--muted-foreground); font-size: 0.75rem; }
    & dd { margin: 0; font-size: 0.875rem; font-weight: 500; }
    & code { font-family: var(--font-mono); font-size: 0.8125rem; }
  }
  .mk-credential-item-verify {
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    width: fit-content;
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;

    & svg { width: 1rem; height: 1rem; }
    &:hover { text-decoration: underline; text-underline-offset: 3px; }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
  }

  .mk-credential-item[data-variant="compact"] {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    padding: 0.875rem 1rem;

    & .mk-credential-item-seal { width: 2.25rem; height: 2.25rem; & svg { width: 1rem; height: 1rem; } }
    & .mk-credential-item-dates { display: none; }
    & .mk-credential-item-verify { grid-column: 3; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-credential-item { border-color: CanvasText; }
    .mk-credential-item-seal { forced-color-adjust: none; }
  }
}

/* ── components/cta/cta.css ── */
/* -- CTA (website · Events & Promotions) ----------------------------------
   Combines a focused message with a prominent action - centered, split, on a dark glow or over a picture. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-cta, .mk-cta *, .mk-cta ::before, .mk-cta ::after) { box-sizing: border-box; }

  .mk-cta { container: mk-cta / inline-size; width: 100%; }
  .mk-cta-inner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 3.5rem 1.5rem;
    border-radius: var(--radius-xl);
    background: var(--muted);
    text-align: center;
  }
  .mk-cta-copy { display: grid; gap: 0.75rem; justify-items: inherit; max-width: 40rem; }
  .mk-cta-title { margin: 0; font-size: clamp(1.75rem, 4.5cqi, 2.75rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
  .mk-cta-desc { margin: 0; color: var(--muted-foreground); font-size: 1.0625rem; text-wrap: pretty; }
  .mk-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
  .mk-cta-note { margin: 0; color: var(--muted-foreground); font-size: 0.8125rem; }
  .mk-cta-form { display: flex; flex-wrap: wrap; gap: 0.5rem; width: 100%; max-width: 26rem;
    & .input { flex: 1 1 12rem; }
  }

  .mk-cta[data-variant="dark"] .mk-cta-inner {
    background:
      radial-gradient(50% 80% at 15% 0%, color-mix(in oklch, var(--chart-1) 45%, transparent), transparent 70%),
      radial-gradient(45% 80% at 90% 100%, color-mix(in oklch, var(--chart-2) 40%, transparent), transparent 70%),
      var(--foreground);
    color: var(--background);

    & :is(.mk-cta-desc, .mk-cta-note) { color: color-mix(in oklch, var(--background) 72%, transparent); }
  }

  .mk-cta[data-variant="image"] .mk-cta-inner {
    padding-block: 5rem;
    background: transparent;
    color: #fff;

    &::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(oklch(0.15 0.02 260 / 0.55), oklch(0.15 0.02 260 / 0.75)); }
    & .mk-cta-desc { color: oklch(1 0 0 / 0.82); }
    & .btn[data-variant="outline"] { border-color: oklch(1 0 0 / 0.45); background: transparent; color: inherit; }
  }
  .mk-cta-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }

  @container mk-cta (min-width: 44rem) {
    .mk-cta[data-variant="split"] .mk-cta-inner { flex-direction: row; justify-content: space-between; gap: 2rem; padding: 2.5rem 3rem; text-align: start; }
    .mk-cta[data-variant="split"] .mk-cta-copy { justify-items: start; }
    .mk-cta[data-variant="split"] .mk-cta-actions { flex: none; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-cta-inner { border: 1px solid CanvasText; }
  }
}

/* ── components/date-picker/date-picker.css ── */
/* -- Date Picker component -------------------------------------- */
/* Uses the .input class with type="date" or type="datetime-local" */
/* This file adds date-specific overrides only.                     */

@layer components {
  .date-input {
    /* see .input - border-box so the declared ladder height is the real box;
       unsized default = the ladder's md step (field standard) */
    box-sizing: border-box;
    height: 2.25rem;
    width: 100%;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    padding: 0 0.75rem;
    font-size: 0.875rem;
    font-family: var(--font-sans);
    color: var(--foreground);
    outline: none;
    box-shadow: var(--shadow-xs);
    transition: border-color 150ms, box-shadow 150ms;
    cursor: pointer;

    &:focus {
      border-color: var(--ring);
      box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.2);
    }

    /* Disabled = legible but inert: a muted surface and muted text inside
       the full-strength border - never an opacity fade that lets the box
       dissolve into the page. */
    &:disabled {
      background-color: var(--muted);
      color: var(--muted-foreground);
      box-shadow: none;
      cursor: not-allowed;
    }

    /* -- Sizes: same ladder as .input (md = 2.25rem; the unsized default
       stays at the historical 2.5rem) so date fields sit in the same row
       rhythm as text inputs at every step. */
    &[data-size="xs"] { height: 1.75rem; padding: 0 0.5rem;    font-size: 0.75rem; }
    &[data-size="sm"] { height: 2rem;    padding: 0 0.625rem;  font-size: 0.8125rem; }
    &[data-size="md"] { height: 2.25rem; padding: 0 0.75rem;   font-size: 0.875rem; }
    &[data-size="lg"] { height: 2.75rem; padding: 0 1rem;      font-size: 1rem; }
    &[data-size="xl"] { height: 3.25rem; padding: 0 1.25rem;   font-size: 1.125rem; }

    /* -- Out of range / invalid ----------------------------------
       The browser already rejects a TYPED date outside min/max (validity
       rangeUnderflow / rangeOverflow) - the same rule the calendar popup
       enforces by disabling days. :user-invalid shows it once the user has
       interacted (an untouched empty field never turns red); aria-invalid
       lets an app flag server-side errors the same way. */
    &:is([aria-invalid="true"], :user-invalid:not(form[data-validate="submit"]:not([data-submitted]) *)) {
      border-color: var(--destructive);

      &:focus {
        border-color: var(--destructive);
        box-shadow: 0 0 0 2px oklch(from var(--destructive) l c h / 0.2);
      }
    }

    /* Style the calendar icon */
    &::-webkit-calendar-picker-indicator {
      cursor: pointer;
      opacity: 0.6;
      transition: opacity 150ms;

      &:hover { opacity: 1; }
    }
  }

  /* -- Range hint --------------------------------------------------
     States the allowed dates up front (point aria-describedby at it, so it
     is announced with the field) and turns into the error when the field
     holds a date outside them: destructive colour + a warning sign, so the
     state never rests on colour alone. Always rendered - no show/hide, no
     live-region timing, no JavaScript. Place it after the input. */
  .date-input-hint {
    margin: 0.375rem 0 0;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
  }

  .date-input:is([aria-invalid="true"], :user-invalid:not(form[data-validate="submit"]:not([data-submitted]) *)) ~ .date-input-hint {
    color: var(--destructive);

    &::before {
      content: '⚠\FE0E  ';
      font-weight: 600;
    }
  }
}

/* Accessibility: suppress motion for users who request it (REQUIRED for all
   components - AGENTS.md "Accessibility CSS"). Near-zero duration instead of
   `none` keeps transitionend/animationend (and discrete display flips)
   firing so JS state machines that await them keep working. */
@media (prefers-reduced-motion: reduce) {
  @layer components {
    .date-input,
    .date-input *,
    .date-input::before,
    .date-input::after,
    .date-input *::before,
    .date-input *::after,
    .date-input::backdrop {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

/* Forced colors (Windows High Contrast): the destructive colour is replaced
   by system colours - the invalid field keeps a distinct border and the hint
   keeps its warning sign. */
@media (forced-colors: active) {
  @layer components {
    .date-input:is([aria-invalid="true"], :user-invalid:not(form[data-validate="submit"]:not([data-submitted]) *)) {
      border-color: LinkText;
      border-width: 2px;
    }

    .date-input:is([aria-invalid="true"], :user-invalid:not(form[data-validate="submit"]:not([data-submitted]) *)) ~ .date-input-hint {
      color: LinkText;
    }
  }
}

/* ── components/delivery-options/delivery-options.css ── */
/* -- Delivery Options (website · Shop) ------------------------------------
   Presents available delivery methods with costs and estimates - radio cards with an icon, the arrival window and the price. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-delivery-options, .mk-delivery-options *, .mk-delivery-options ::before, .mk-delivery-options ::after) { box-sizing: border-box; }

  .mk-delivery-options { display: grid; gap: 0.625rem; margin: 0; padding: 0; border: 0; min-width: 0;
    & legend { margin-block-end: 0.75rem; padding: 0; font-size: 1.0625rem; font-weight: 600; }
  }
  .mk-delivery-options-option {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;

    &:hover { border-color: color-mix(in oklch, var(--foreground) 30%, var(--border)); }
    &:has(input:checked) { border-color: var(--primary); background: color-mix(in oklch, var(--primary) 5%, transparent); box-shadow: 0 0 0 1px var(--primary); }
  }
  .mk-delivery-options-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); background: var(--muted);
    & svg { width: 1.125rem; height: 1.125rem; }
  }
  .mk-delivery-options-text { display: grid; gap: 0.125rem;
    & strong { font-size: 0.9375rem; font-weight: 600; }
    & small { color: var(--muted-foreground); font-size: 0.8125rem; }
  }
  .mk-delivery-options-price { font-weight: 700; font-variant-numeric: tabular-nums; }

  .mk-delivery-options[data-variant="grid"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));

    & legend { grid-column: 1 / -1; }
    & .mk-delivery-options-option { grid-template-columns: minmax(0, 1fr) auto; align-content: start; align-items: start; }
    & .mk-delivery-options-option input { grid-column: 2; grid-row: 1; }
    & .mk-delivery-options-icon { grid-column: 1; grid-row: 1; }
    & .mk-delivery-options-text, & .mk-delivery-options-price { grid-column: 1 / -1; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-delivery-options-option { transition: none; }
  }

  @media (forced-colors: active) {
    .mk-delivery-options-option:has(input:checked) { border-color: Highlight; }
  }
}

/* ── components/dialog/dialog.css ── */
/* -- Dialog component ------------------------------------------ */

@layer components {
  dialog.dialog {
    border: none;
    border-radius: var(--radius-xl);
    background-color: var(--popover);
    color: var(--popover-foreground);
    padding: 0;
    margin: auto;
    position: fixed;
    inset: 0;
    max-width: 28rem;
    width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    box-shadow: 0 25px 80px oklch(0 0 0 / 0.25), 0 0 0 1px var(--border);
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.98);
    transition: opacity 200ms ease, transform 200ms ease, display 200ms allow-discrete;

    &[open] {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* -- Sizes ------------------------------------------------ */
    &[data-size="sm"]   { max-width: 24rem; }
    &[data-size="md"]   { max-width: 28rem; }
    &[data-size="lg"]   { max-width: 32rem; }
    &[data-size="xl"]   { max-width: 40rem; }
    &[data-size="full"] { max-width: calc(100vw - 2rem); }

    /* -- Backdrop --------------------------------------------- */
    &::backdrop {
      background: oklch(0 0 0 / 0);
      backdrop-filter: blur(0px);
      transition: all 200ms ease, display 200ms allow-discrete;
    }

    &[open]::backdrop {
      background: oklch(0 0 0 / 0.45);
      backdrop-filter: blur(3px);
    }
  }

  @starting-style {
    dialog.dialog[open] {
      opacity: 0;
      transform: translateY(-0.5rem) scale(0.98);
    }

    dialog.dialog[open]::backdrop {
      background: oklch(0 0 0 / 0);
      backdrop-filter: blur(0px);
    }
  }

  /* -- Scroll lock ------------------------------------------- */
  /* While the dialog is modal the page behind must stay put - closing
     returns you to exactly the scroll offset you had. `:modal` matches only
     while opened via showModal(); overflow:hidden freezes the viewport
     without losing the scroll position (no JS position:fixed hack), and
     scrollbar-gutter:stable keeps the scrollbar's space reserved so its
     removal can't shift the layout underneath. */
  html:has(dialog.dialog:modal) {
    overflow: hidden;
    scrollbar-gutter: stable;
  }

  /* -- Density ------------------------------------------------
     data-density on the .dialog root scales the content padding
     (0.75 / 1 / 1.25 of the 1.5rem default); comfortable matches the
     unsized default. Width stays governed by data-size - two axes. */
  .dialog:where([data-density="compact"]) .dialog-content      { padding: 1rem; }
  .dialog:where([data-density="comfortable"]) .dialog-content  { padding: 1.5rem; }
  .dialog:where([data-density="spacious"]) .dialog-content     { padding: 2rem; }

  /* -- Content sections ------------------------------------- */
  .dialog-content { padding: 1.5rem; }
  .dialog-header  { margin-bottom: 1rem; }
  .dialog-title   { font-size: 1.0625rem; font-weight: 600; margin: 0 0 0.375rem; letter-spacing: -0.01em; }
  .dialog-description { font-size: 0.875rem; color: var(--muted-foreground); margin: 0; line-height: 1.6; }
  .dialog-body    { margin-top: 1rem; }
  .dialog-footer  { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem; }
}

/* Accessibility: reduced motion removes open/close transitions (REQUIRED
   for all components - AGENTS.md "Accessibility CSS"). */
@media (prefers-reduced-motion: reduce) {
  @layer components {
    dialog.dialog,
    dialog.dialog::backdrop { transition: none; }
  }
}

/* ── components/diff/diff.css ── */
/* -- Diff component ----------------------------------------------- */

@layer components {
  /* Two layers in one grid cell - .diff-item-1 (before) over .diff-item-2
     (after) - and a native <input type="range" class="diff-range"> spread
     over the whole figure as the divider: drag anywhere, arrow keys / Home /
     End, and a screen reader announces the value. diff.js mirrors the value
     into --diff-pos; item 1 is clipped at that line. Without JS the figure
     still shows a 50 / 50 split. The range is widened by one knob on both
     sides, so the knob's CENTER sits exactly on --diff-pos. */
  .diff {
    --diff-pos: 50%;
    --_knob: 2.25rem;
    position: relative;
    display: grid;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    isolation: isolate;
    user-select: none;
    touch-action: pan-y;
    background-color: var(--muted);
    cursor: ew-resize;

    /* the divider line */
    &::after {
      content: '';
      position: absolute;
      z-index: 2;
      top: 0;
      bottom: 0;
      left: var(--diff-pos);
      width: 2px;
      translate: -50% 0;
      background-color: var(--background);
      box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 12%, transparent);
      pointer-events: none;
    }
  }

  .diff-item-1,
  .diff-item-2 {
    grid-area: 1 / 1;
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;

    & > :is(img, video, picture, canvas, svg) {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .diff-item-1 {
    z-index: 1;
    clip-path: inset(0 calc(100% - var(--diff-pos)) 0 0);
  }
  .diff-item-2 { z-index: 0; }

  /* a corner caption on either side (Before / After) */
  .diff-label {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    background-color: color-mix(in oklch, var(--background) 82%, transparent);
    color: var(--foreground);
    font-size: 0.75rem;
    font-weight: 500;
    pointer-events: none;
  }
  .diff-item-2 .diff-label { left: auto; right: 0.75rem; }

  /* -- The range: a knob-high strip across the middle (diff.js makes the
     whole figure a drag surface and keeps keyboard / AT on the range) -- */
  .diff-range {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: calc(var(--_knob) / -2);
    width: calc(100% + var(--_knob));
    height: var(--_knob);
    translate: 0 -50%;
    margin: 0;
    padding: 0;
    background: transparent;
    appearance: none;
    cursor: ew-resize;
    outline: none;

    &::-webkit-slider-runnable-track { height: 100%; background: transparent; }
    &::-moz-range-track { height: 100%; background: transparent; }
    &::-webkit-slider-thumb {
      appearance: none;
      width: var(--_knob);
      height: var(--_knob);
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--background) center / 1.125rem no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E");
      box-shadow: var(--shadow-md);
      transition: scale 120ms ease;
    }
    &::-moz-range-thumb {
      width: var(--_knob);
      height: var(--_knob);
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--background) center / 1.125rem no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E");
      box-shadow: var(--shadow-md);
    }
    &:active::-webkit-slider-thumb { scale: 1.08; }
    &:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ring); outline-offset: 2px; }
    &:focus-visible::-moz-range-thumb { outline: 2px solid var(--ring); outline-offset: 2px; }
  }
  /* RTL: the range runs right → left, so item 1 is revealed from the right */
  .diff:dir(rtl):not([data-orientation="vertical"]) {
    &::after { left: calc(100% - var(--diff-pos)); }
    & .diff-item-1 { clip-path: inset(0 0 0 calc(100% - var(--diff-pos))); }
    & .diff-item-1 .diff-label { left: auto; right: 0.75rem; }
    & .diff-item-2 .diff-label { right: auto; left: 0.75rem; }
  }

  /* -- Aspect ratios (or set aspect-ratio / a height yourself) -------- */
  .diff[data-ratio="16/9"] { aspect-ratio: 16 / 9; }
  .diff[data-ratio="4/3"] { aspect-ratio: 4 / 3; }
  .diff[data-ratio="1/1"] { aspect-ratio: 1; }
  .diff[data-ratio="3/4"] { aspect-ratio: 3 / 4; }

  /* -- Knob variants ---------------------------------------------------- */
  /* line: no knob - just the divider (the whole figure is still the hit area) */
  .diff[data-variant="line"] .diff-range {
    &::-webkit-slider-thumb { opacity: 0; }
    &::-moz-range-thumb { opacity: 0; }
    &:focus-visible::-webkit-slider-thumb { opacity: 1; }
  }
  .diff[data-variant="line"]::after { width: 3px; }
  /* primary: a --primary divider + knob ring */
  .diff[data-variant="primary"] {
    &::after { background-color: var(--primary); box-shadow: none; }
    & .diff-range::-webkit-slider-thumb { border: 2px solid var(--primary); }
    & .diff-range::-moz-range-thumb { border: 2px solid var(--primary); }
  }

  /* -- Vertical: before on top, after below; the range runs top → bottom */
  .diff[data-orientation="vertical"] {
    touch-action: pan-x;
    cursor: ns-resize;

    &::after {
      top: var(--diff-pos);
      bottom: auto;
      left: 0;
      right: 0;
      width: auto;
      height: 2px;
      translate: 0 -50%;
    }
    & .diff-item-1 { clip-path: inset(0 0 calc(100% - var(--diff-pos)) 0); }
    & .diff-item-2 .diff-label { top: auto; bottom: 0.75rem; left: 0.75rem; right: auto; }
    & .diff-range {
      writing-mode: vertical-lr;
      top: calc(var(--_knob) / -2);
      left: 50%;
      width: var(--_knob);
      height: calc(100% + var(--_knob));
      translate: -50% 0;
      cursor: ns-resize;

      &::-webkit-slider-runnable-track { width: 100%; height: auto; }
      &::-webkit-slider-thumb { rotate: 90deg; }
      &::-moz-range-thumb { rotate: 90deg; }
    }
  }
  .diff[data-orientation="vertical"][data-variant="line"]::after { height: 3px; width: auto; }

  /* -- Accessibility ------------------------------------------------------ */
  @media (prefers-reduced-motion: reduce) {
    .diff-range::-webkit-slider-thumb { transition: none; }
  }
  @media (forced-colors: active) {
    .diff::after { background-color: CanvasText; }
    .diff-range::-webkit-slider-thumb { border-color: CanvasText; }
  }
}

/* ── components/discount-form/discount-form.css ── */
/* -- Discount Form (website · Shop) ---------------------------------------
   Accepts a promotional code and displays its application result - the field, the error when it fails, and the applied code with its saving. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-discount-form, .mk-discount-form *, .mk-discount-form ::before, .mk-discount-form ::after) { box-sizing: border-box; }

  .mk-discount-form { display: grid; gap: 0.5rem; max-width: 26rem; margin: 0; }
  .mk-discount-form-row { display: flex; gap: 0.5rem;
    & .input { flex: 1; min-width: 0; font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
    & .input::placeholder { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); }
  }
  .mk-discount-form-error { display: none; align-items: center; gap: 0.375rem; margin: 0; color: var(--destructive); font-size: 0.8125rem; font-weight: 500;
    & svg { flex: none; width: 0.875rem; height: 0.875rem; }
  }
  .mk-discount-form:has(.input:user-invalid, .input[aria-invalid="true"]) .mk-discount-form-error { display: flex; }
  .mk-discount-form .input[aria-invalid="true"] { border-color: var(--destructive); }

  .mk-discount-form-applied {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 26rem;
    padding: 0.625rem 0.5rem 0.625rem 0.875rem;
    border: 1px dashed color-mix(in oklab, #16a34a 50%, var(--border));
    border-radius: var(--radius-lg);
    background: color-mix(in oklch, #16a34a 7%, transparent);
    font-size: 0.875rem;

    & > svg { flex: none; width: 1rem; height: 1rem; color: #15803d; }
    & code { font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.06em; }
    & span { flex: 1; color: var(--muted-foreground); }
    & strong { color: #15803d; font-variant-numeric: tabular-nums; }
    & button { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted-foreground); cursor: pointer; }
    & button:hover { background: var(--accent); color: var(--foreground); }
    & button:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
    & button svg { width: 0.875rem; height: 0.875rem; }
  }

  .mk-discount-form[data-variant="collapsed"] {
    & summary { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--primary); font-size: 0.875rem; font-weight: 600; cursor: pointer; list-style: none; }
    & summary::-webkit-details-marker { display: none; }
    & summary svg { width: 0.875rem; height: 0.875rem; transition: rotate 150ms ease; }
    &[open] summary svg { rotate: 45deg; }
    & summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
    & .mk-discount-form { margin-block-start: 0.75rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-discount-form[data-variant="collapsed"] summary svg { transition: none; }
  }

  @media (forced-colors: active) {
    .mk-discount-form-applied { border-color: CanvasText; }
  }
}

/* ── components/dock/dock.css ── */
/* -- Dock component ------------------------------------------------ */

@layer components {
  /* A bottom navigation bar (daisyUI's dock, plus): a <nav class="dock"> of
     .dock-item links / buttons / labels, each an icon (.dock-icon - an svg
     or an emoji, optionally with a .dock-badge or .dock-dot) over a
     .dock-label. Fixed to the bottom of the viewport by default, clear of
     the device's safe area. The active item is aria-current="page" (links),
     aria-pressed="true" (buttons) or a checked radio inside a <label> - the
     radio form switches the active item with no JavaScript at all.
     data-indicator: bar (default) / pill / dot. CSS only. */
  .dock {
    --_h: 4rem;
    box-sizing: border-box; /* the size IS the bar height, border included */
    --_icon: 1.375rem;
    --_label: 0.6875rem;
    --_accent: var(--primary);
    position: fixed;
    z-index: 40;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    height: calc(var(--_h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-inline: 0.25rem;
    border-top: 1px solid var(--border);
    background-color: var(--background);
    color: var(--muted-foreground);

    /* -- Placement ------------------------------------------------------- */
    &[data-position="static"] { position: static; height: var(--_h); padding-bottom: 0; }
    &[data-position="top"] { bottom: auto; top: 0; border-top: 0; border-bottom: 1px solid var(--border); padding-bottom: 0; height: var(--_h); }
    &[data-attach="container"] { position: absolute; }
    /* side docks: a column down the left / right edge */
    &:is([data-position="left"], [data-position="right"]) {
      inset: 0 auto 0 0;
      flex-direction: column;
      justify-content: center;
      gap: 0.25rem;
      width: calc(var(--_h) + 0.5rem);
      height: auto;
      padding: 0.5rem 0.25rem;
      border-top: 0;
      border-inline-end: 1px solid var(--border);

      & .dock-item { flex: 0 0 auto; padding-block: 0.625rem; }
    }
    &[data-position="right"] { inset: 0 0 0 auto; border-inline-end: 0; border-inline-start: 1px solid var(--border); }

    /* -- Sizes ------------------------------------------------------------ */
    &[data-size="xs"] { --_h: 2.75rem; --_icon: 1.125rem; --_label: 0.625rem; }
    &[data-size="sm"] { --_h: 3.375rem; --_icon: 1.25rem; --_label: 0.625rem; }
    &[data-size="md"] { --_h: 4rem; --_icon: 1.375rem; --_label: 0.6875rem; }
    &[data-size="lg"] { --_h: 4.75rem; --_icon: 1.625rem; --_label: 0.75rem; }
    &[data-size="xl"] { --_h: 5.5rem; --_icon: 1.875rem; --_label: 0.8125rem; }

    /* -- Surfaces --------------------------------------------------------- */
    &[data-variant="muted"] { background-color: var(--muted); border-color: transparent; }
    &[data-variant="primary"] {
      --_accent: var(--primary-foreground);
      background-color: var(--primary);
      color: color-mix(in oklch, var(--primary-foreground) 65%, transparent);
      border-color: transparent;
    }
    &[data-variant="neutral"] {
      --_accent: var(--background);
      background-color: color-mix(in oklch, var(--foreground) 82%, var(--background));
      color: color-mix(in oklch, var(--background) 62%, transparent);
      border-color: transparent;
    }
    &[data-variant="glass"] {
      background-color: color-mix(in oklch, var(--background) 60%, transparent);
      backdrop-filter: blur(16px) saturate(1.5);
      border-color: color-mix(in oklch, var(--foreground) 12%, transparent);
    }
    /* floating: a rounded bar hovering above the bottom edge */
    &[data-variant="floating"] {
      inset-inline: 1rem;
      bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
      height: var(--_h);
      padding: 0 0.375rem;
      border: 1px solid var(--border);
      border-radius: 9999px;
      box-shadow: var(--shadow-lg);
      max-width: 32rem;
      margin-inline: auto;
    }
    &[data-variant="floating"][data-position="static"] { margin-block: 0.5rem; }
    &[data-variant="floating"]:is([data-position="left"], [data-position="right"]) {
      inset-block: 0;
      height: fit-content;
      max-height: calc(100% - 2rem);
      margin-block: auto;
      margin-inline: 0;
      padding: 0.375rem 0.25rem;
      border: 1px solid var(--border);
    }
    &[data-variant="floating"][data-position="left"] { left: 1rem; }
    &[data-variant="floating"][data-position="right"] { right: 1rem; left: auto; }
    &[data-variant="floating"][data-position="top"] { top: 1rem; bottom: auto; }
  }

  /* -- Items ------------------------------------------------------------ */
  .dock-item {
    position: relative;
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 150ms ease, scale 180ms ease, translate 180ms ease;

    &:hover { color: var(--foreground); }
    .dock:is([data-variant="primary"], [data-variant="neutral"]) &:hover { color: var(--_accent); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: -4px; border-radius: var(--radius-lg); }
    &:has(> input:focus-visible) { outline: 2px solid var(--ring); outline-offset: -4px; border-radius: var(--radius-lg); }
    &:is(:disabled, [aria-disabled="true"]) { opacity: 0.45; pointer-events: none; }

    /* the radio form: the input is invisible, the label is the item */
    & > input[type="radio"] {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
  }
  .dock-icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: calc(var(--_icon) + 1.5rem);
    height: calc(var(--_icon) + 0.375rem);
    border-radius: 9999px;
    font-size: var(--_icon);
    line-height: 1;
    transition: background-color 180ms ease, color 180ms ease;

    & svg { width: var(--_icon); height: var(--_icon); }
  }
  .dock-label {
    max-width: 100%;
    overflow: hidden;
    font-size: var(--_label);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* -- Active item ------------------------------------------------------ */
  .dock-item:is([aria-current="page"], [aria-current="true"], [aria-pressed="true"], [data-active], :has(> input:checked)) {
    color: var(--_accent);

    & .dock-label { font-weight: 600; }
  }
  /* bar (default): a short line on the top edge (bottom edge for a top dock) */
  .dock:not([data-indicator]) .dock-item::before,
  .dock[data-indicator="bar"] .dock-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 3px;
    translate: -50% 0;
    border-radius: 0 0 3px 3px;
    background-color: var(--_accent);
    transition: width 200ms ease;
  }
  .dock[data-position="top"] .dock-item::before { top: auto; bottom: 0; border-radius: 3px 3px 0 0; }
  .dock:is([data-position="left"], [data-position="right"]) .dock-item::before {
    top: 50%;
    left: 0;
    width: 3px;
    height: 0;
    translate: 0 -50%;
    border-radius: 0 3px 3px 0;
    transition: height 200ms ease;
  }
  .dock[data-position="right"] .dock-item::before { left: auto; right: 0; border-radius: 3px 0 0 3px; }
  .dock:is([data-position="left"], [data-position="right"]):is(:not([data-indicator]), [data-indicator="bar"]) .dock-item:is([aria-current="page"], [aria-current="true"], [aria-pressed="true"], [data-active], :has(> input:checked))::before {
    width: 3px;
    height: 2.25rem;
  }
  .dock:is(:not([data-indicator]), [data-indicator="bar"]) .dock-item:is([aria-current="page"], [aria-current="true"], [aria-pressed="true"], [data-active], :has(> input:checked))::before {
    width: 2.25rem;
  }
  .dock[data-variant="floating"]:not([data-indicator]) .dock-item::before { display: none; }
  .dock[data-variant="floating"]:not([data-indicator]) .dock-item:is([aria-current="page"], [aria-current="true"], [aria-pressed="true"], [data-active], :has(> input:checked)) .dock-icon,
  /* pill: a tinted capsule behind the active icon (Material 3) */
  .dock[data-indicator="pill"] .dock-item:is([aria-current="page"], [aria-current="true"], [aria-pressed="true"], [data-active], :has(> input:checked)) .dock-icon {
    background-color: color-mix(in oklch, var(--_accent) 16%, transparent);
  }
  /* dot: a small dot under the label */
  .dock[data-indicator="dot"] .dock-item::after {
    content: '';
    position: absolute;
    bottom: 0.3rem;
    left: 50%;
    width: 4px;
    height: 4px;
    translate: -50% 0;
    border-radius: 9999px;
    background-color: var(--_accent);
    scale: 0;
    transition: scale 180ms ease;
  }
  .dock[data-indicator="dot"] .dock-item:is([aria-current="page"], [aria-current="true"], [aria-pressed="true"], [data-active], :has(> input:checked))::after { scale: 1; }

  /* -- Labels: always (default), only for the active item, or none ------ */
  .dock[data-labels="active"] .dock-item:not([aria-current="page"], [aria-current="true"], [aria-pressed="true"], [data-active], :has(> input:checked)) .dock-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .dock[data-labels="none"] .dock-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  /* -- Badges and dots on an icon ---------------------------------------- */
  .dock-badge {
    position: absolute;
    top: -0.3rem;
    inset-inline-start: calc(50% + 0.35rem);
    min-width: 1.125rem;
    height: 1.125rem;
    padding-inline: 0.3rem;
    border-radius: 9999px;
    background-color: var(--destructive);
    color: var(--destructive-foreground, #fff);
    box-shadow: 0 0 0 2px var(--background);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.125rem;
    text-align: center;
  }
  .dock-dot {
    position: absolute;
    top: 0;
    inset-inline-start: calc(50% + 0.45rem);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: var(--_c, var(--primary));
    box-shadow: 0 0 0 2px var(--background);

    &[data-tone="success"] { --_c: oklch(0.65 0.17 150); }
    &[data-tone="warning"] { --_c: oklch(0.78 0.16 75); }
    &[data-tone="destructive"] { --_c: var(--destructive); }
    &[data-animate="ping"]::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background-color: inherit;
      animation: dock-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
    }
  }
  @keyframes dock-ping { 75%, 100% { scale: 2.4; opacity: 0; } }

  /* -- Raised center action (data-raised on an item) --------------------- */
  .dock-item[data-raised],
  .dock-item[data-raised]:is([aria-current], [aria-pressed="true"], [data-active], :has(> input:checked)) {
    /* always the primary-foreground glyph - the accent color of an active
       item is --primary, the raised disc's own color */
    color: var(--primary-foreground);

    & .dock-icon {
      width: calc(var(--_h) - 0.75rem);
      height: calc(var(--_h) - 0.75rem);
      /* lifted with a margin, not a transform: a FAB menu anchored to this
         icon (anchor positioning ignores transforms) lands where it shows */
      margin-block-start: calc((var(--_h) - 0.75rem) * -0.7);
      padding: 0;
      border: 0;
      background-color: var(--primary);
      color: var(--primary-foreground);
      box-shadow: var(--shadow-lg), 0 0 0 4px var(--background);
      cursor: pointer;
    }
    & .dock-icon:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
    & .dock-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    &::before, &::after { display: none; }
    &:hover { color: var(--primary-foreground); }
    &:hover .dock-icon { background-color: color-mix(in oklch, var(--primary) 88%, var(--primary-foreground)); }
  }
  /* a FAB as the raised item: <div class="dock-item fab" data-raised
     data-layout="flower" data-position="bottom-center"> with a
     .fab-trigger.dock-icon button and a .fab-menu popover - the dial fans
     out over the dock (fab.css: a semicircle from the center) */
  .dock .fab.dock-item {
    position: relative;
    inset: auto;
    z-index: auto;
    justify-content: center;
    pointer-events: auto;
  }
  .dock .fab.dock-item > .fab-trigger { box-shadow: var(--shadow-lg), 0 0 0 4px var(--background); }

  /* -- Magnify (macOS): the hovered item grows, its neighbours a little -- */
  .dock[data-effect="magnify"] {
    overflow: visible;
    align-items: center;
    border: 0;

    & .dock-item { transform-origin: 50% 100%; }
    & .dock-item:hover { scale: 1.35; translate: 0 -0.35rem; z-index: 1; }
    & .dock-item:has(+ .dock-item:hover),
    & .dock-item:hover + .dock-item { scale: 1.15; translate: 0 -0.15rem; }
    &[data-position="top"] .dock-item { transform-origin: 50% 0; }
    &[data-position="top"] .dock-item:hover { translate: 0 0.35rem; }
    &[data-position="top"] :is(.dock-item:has(+ .dock-item:hover), .dock-item:hover + .dock-item) { translate: 0 0.15rem; }
    &[data-position="left"] .dock-item { transform-origin: 0 50%; }
    &[data-position="left"] .dock-item:hover { translate: 0.35rem 0; }
    &[data-position="left"] :is(.dock-item:has(+ .dock-item:hover), .dock-item:hover + .dock-item) { translate: 0.15rem 0; }
    &[data-position="right"] .dock-item { transform-origin: 100% 50%; }
    &[data-position="right"] .dock-item:hover { translate: -0.35rem 0; }
    &[data-position="right"] :is(.dock-item:has(+ .dock-item:hover), .dock-item:hover + .dock-item) { translate: -0.15rem 0; }
  }

  /* -- Autohide: tucked away at its edge, it slides in when the pointer
     comes close (a strip of it stays reachable, plus a hit zone past it)
     or when focus enters - the macOS dock. data-autohide on the .dock. */
  .dock[data-autohide] {
    --_peek: 6px;
    transition: translate 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
    translate: 0 calc(100% - var(--_peek));

    &[data-variant="floating"] { translate: 0 calc(100% + 1rem - var(--_peek)); }
    &[data-position="top"] { translate: 0 calc(-100% + var(--_peek)); }
    &[data-position="top"][data-variant="floating"] { translate: 0 calc(-100% - 1rem + var(--_peek)); }
    &[data-position="left"] { translate: calc(-100% + var(--_peek)) 0; }
    &[data-position="left"][data-variant="floating"] { translate: calc(-100% - 1rem + var(--_peek)) 0; }
    &[data-position="right"] { translate: calc(100% - var(--_peek)) 0; }
    &[data-position="right"][data-variant="floating"] { translate: calc(100% + 1rem - var(--_peek)) 0; }
    &:is(:hover, :focus-within) { translate: 0 0; }

    /* reach: an invisible zone beyond the tucked edge */
    &::after {
      content: '';
      position: absolute;
      inset-inline: 0;
      bottom: 100%;
      height: 1.5rem;
    }
    &[data-position="top"]::after { bottom: auto; top: 100%; }
    &[data-position="left"]::after { inset: 0 auto 0 100%; width: 1.5rem; height: auto; }
    &[data-position="right"]::after { inset: 0 100% 0 auto; width: 1.5rem; height: auto; }
  }

  /* -- Views: the dock switches a card's content, CSS only --------------
     A .dock-view holds the radio .dock and a .dock-panels of .dock-panel
     elements in the same order as the items: the panel at position k shows
     while item k's radio is checked. (An item without a radio - the raised
     action - keeps its place with an empty panel.) */
  .dock-panel { display: none; }
  /* a card that closes with its dock: <div class="card dock-view"> holds the
     .dock-panels and an in-flow dock as its footer - the dock drops its own
     edges and the card's rounded corners clip it (one frame, no square
     border under a round corner) */
  .card.dock-view {
    display: flex;
    flex-direction: column;

    & > .dock-panels { flex: 1 1 auto; }
    & > .dock[data-position="static"] {
      border-inline: 0;
      border-bottom: 0;
      border-radius: 0;
      box-shadow: none;
    }
  }
  .dock-view:has(.dock > .dock-item:nth-child(1) > input:checked) .dock-panels > .dock-panel:nth-child(1),
  .dock-view:has(.dock > .dock-item:nth-child(2) > input:checked) .dock-panels > .dock-panel:nth-child(2),
  .dock-view:has(.dock > .dock-item:nth-child(3) > input:checked) .dock-panels > .dock-panel:nth-child(3),
  .dock-view:has(.dock > .dock-item:nth-child(4) > input:checked) .dock-panels > .dock-panel:nth-child(4),
  .dock-view:has(.dock > .dock-item:nth-child(5) > input:checked) .dock-panels > .dock-panel:nth-child(5),
  .dock-view:has(.dock > .dock-item:nth-child(6) > input:checked) .dock-panels > .dock-panel:nth-child(6),
  .dock-view:has(.dock > .dock-item:nth-child(7) > input:checked) .dock-panels > .dock-panel:nth-child(7) {
    display: block;
    animation: dock-panel-in 220ms ease both;
  }
  @keyframes dock-panel-in { from { opacity: 0; translate: 0 6px; } }

  /* -- Accessibility ------------------------------------------------------ */
  @media (prefers-reduced-motion: reduce) {
    .dock-item, .dock-icon, .dock-item::before, .dock-item::after { transition: none; }
    .dock[data-effect="magnify"] .dock-item { scale: none !important; translate: none !important; }
    .dock-dot[data-animate]::after { animation: none; }
    .dock-panel { animation: none !important; }
    .dock[data-autohide] { transition: none; }
  }
  @media (forced-colors: active) {
    .dock { border-top: 1px solid CanvasText; }
    .dock-item:is([aria-current="page"], [aria-pressed="true"], [data-active], :has(> input:checked)) { outline: 2px solid Highlight; outline-offset: -4px; }
  }
}

/* ── components/docs-content/docs-content.css ── */
/* -- Docs Content (website · Docs & Help) ---------------------------------
   Presents one documentation topic with explanations and examples - the trail, title, lead, prose with code, callouts and tables, and the next page. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-docs-content, .mk-docs-content *, .mk-docs-content ::before, .mk-docs-content ::after) { box-sizing: border-box; }

  .mk-docs-content { display: grid; gap: 1rem; width: 100%; max-width: 44rem; }
  .mk-docs-content-title { margin: 0; font-size: 2.25rem; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
  .mk-docs-content-lead { margin: 0; color: var(--muted-foreground); font-size: 1.125rem; line-height: 1.6; text-wrap: pretty; }
  .mk-docs-content-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; color: var(--muted-foreground); font-size: 0.8125rem;
    & a { display: inline-flex; align-items: center; gap: 0.25rem; color: inherit; }
    & svg { width: 0.875rem; height: 0.875rem; }
  }
  .mk-docs-content-prose {
    line-height: 1.75;

    & > * + * { margin-block-start: 1rem; }
    & h2 { margin-block-start: 2.25rem; font-size: 1.5rem; font-weight: 650; letter-spacing: -0.02em; }
    & h3 { margin-block-start: 1.75rem; font-size: 1.125rem; font-weight: 600; }
    & p, & ul, & ol { margin-block-end: 0; color: color-mix(in oklch, var(--foreground) 85%, var(--muted-foreground)); }
    & li + li { margin-block-start: 0.375rem; }
    & a { color: var(--primary); text-underline-offset: 3px; }
    & :not(pre) > code { padding: 0.125rem 0.375rem; border-radius: var(--radius-sm); background: var(--muted); font-family: var(--font-mono); font-size: 0.875em; }
    & pre { padding: 1rem 1.125rem; overflow-x: auto; border: 0; border-radius: var(--radius-lg); background: oklch(0.18 0.01 260); color: oklch(0.93 0 0); font-size: 0.8125rem; line-height: 1.65; }
    & pre code { padding: 0; border: 0; background: none; color: inherit; font-family: var(--font-mono); }
    & table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
    & th, & td { padding: 0.5rem 0.75rem; border-block-end: 1px solid var(--border); text-align: start; }
    & th { color: var(--muted-foreground); font-weight: 600; }
  }
  .mk-docs-content-callout {
    --_c: oklch(0.6 0.15 250);

    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    padding: 1rem 1.125rem;
    border-inline-start: 3px solid var(--_c);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: color-mix(in oklab, var(--_c) 8%, var(--background));
    font-size: 0.9375rem;

    & > svg { width: 1.125rem; height: 1.125rem; margin-block-start: 0.2rem; color: var(--_c); }
    & p { margin: 0; }
    & strong { color: var(--_c); }
    &[data-tone="warning"] { --_c: oklch(0.65 0.15 70); }
    &[data-tone="tip"] { --_c: oklch(0.6 0.15 150); }
  }
  .mk-docs-content-pager { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0.75rem; margin-block-start: 2rem;
    & a { display: grid; gap: 0.125rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-lg); color: inherit; text-decoration: none; }
    & a:hover { border-color: color-mix(in oklch, var(--foreground) 30%, var(--border)); }
    & a[rel="next"] { text-align: end; }
    & small { color: var(--muted-foreground); font-size: 0.8125rem; }
    & strong { color: var(--primary); }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-docs-content-callout { border-inline-start-color: CanvasText; }
  }
}

/* ── components/docs-navigation/docs-navigation.css ── */
/* -- Docs Navigation (website · Docs & Help) ------------------------------
   Organizes documentation links into a navigable hierarchy - a version switch, sections, collapsible groups, nested pages and the current page marked. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-docs-navigation, .mk-docs-navigation *, .mk-docs-navigation ::before, .mk-docs-navigation ::after) { box-sizing: border-box; }

  .mk-docs-navigation {
    display: grid;
    align-content: start;
    gap: 0.25rem;
    width: 100%;
    max-width: 16rem;
    font-size: 0.875rem;

    & ul { display: grid; gap: 0.0625rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
    & ul ul { margin: 0.125rem 0 0.25rem 0.75rem; padding-inline-start: 0.75rem; border-inline-start: 1px solid var(--border); }
    & a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.375rem 0.625rem; border-radius: var(--radius-md); color: var(--muted-foreground); text-decoration: none; }
    & a:hover { background: var(--accent); color: var(--accent-foreground); }
    & a:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
    & a[aria-current] { background: var(--accent); color: var(--foreground); font-weight: 600; }
    & details > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
    & details > summary::-webkit-details-marker { display: none; }
    & details > summary::after { content: ""; width: 0.375rem; height: 0.375rem; margin-inline-end: 0.375rem; border-block-end: 1.5px solid currentColor; border-inline-end: 1.5px solid currentColor; rotate: -45deg; transition: rotate 150ms ease; }
    & details[open] > summary::after { rotate: 45deg; }
    & summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
  }
  .mk-docs-navigation-top { margin-block-end: 0.75rem; }
  .mk-docs-navigation-heading { margin: 0; padding: 0.375rem 0.625rem; color: var(--foreground); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

  .mk-docs-navigation[data-variant="bordered"] {
    & > ul, & details > ul { margin-inline-start: 0.625rem; border-inline-start: 1px solid var(--border); }
    & a { margin-inline-start: -1px; border-inline-start: 2px solid transparent; border-radius: 0; }
    & a:hover { background: transparent; border-inline-start-color: var(--muted-foreground); }
    & a[aria-current] { background: transparent; color: var(--primary); border-inline-start-color: var(--primary); }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-docs-navigation details > summary::after { transition: none; }
  }

  @media (forced-colors: active) {
    .mk-docs-navigation a[aria-current] { outline: 1px solid Highlight; }
  }
}

/* ── components/download-item/download-item.css ── */
/* -- Download Item (website · Docs & Help) --------------------------------
   Presents one downloadable file with its format and size - a file badge, what it is, version, size and date, its checksum, and the download. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-download-item, .mk-download-item *, .mk-download-item ::before, .mk-download-item ::after) { box-sizing: border-box; }

  .mk-download-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 1rem; padding: 1.25rem; border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground); }
  .mk-download-item-file {
    display: grid;
    place-items: end center;
    width: 2.75rem;
    height: 3.25rem;
    padding-block-end: 0.375rem;
    border-radius: 0.375rem 1rem 0.375rem 0.375rem;
    background: var(--muted-foreground);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.04em;

    &[data-ext="PDF"] { background: #dc2626; }
    &[data-ext="ZIP"] { background: #ca8a04; }
    &[data-ext="DMG"] { background: #1f2937; }
    &[data-ext="EXE"] { background: #2563eb; }
  }
  .mk-download-item-body { display: grid; gap: 0.25rem; min-width: 0; }
  .mk-download-item-name { margin: 0; font-size: 1rem; font-weight: 600; }
  .mk-download-item-desc { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; }
  .mk-download-item-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin: 0.25rem 0 0; color: var(--muted-foreground); font-size: 0.8125rem; font-variant-numeric: tabular-nums;
    & span + span::before { content: "·"; margin-inline-end: 0.75rem; }
  }
  .mk-download-item-checksum { margin-block-start: 0.375rem; font-size: 0.75rem;
    & summary { width: fit-content; color: var(--muted-foreground); cursor: pointer; }
    & code { display: block; margin-block-start: 0.375rem; padding: 0.5rem; overflow-wrap: anywhere; border-radius: var(--radius-sm); background: var(--muted); font-family: var(--font-mono); user-select: all; }
  }

  .mk-download-item[data-variant="card"] {
    grid-template-columns: auto minmax(0, 1fr);

    & > .btn { grid-column: 1 / -1; justify-self: start; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-download-item-file { forced-color-adjust: none; }
    .mk-download-item { border-color: CanvasText; }
  }
}

/* ── components/dropdown/dropdown.css ── */
/* -- Dropdown component ---------------------------------------- */

@layer components {
  .dropdown-content {
    background-color: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.25rem;
    min-width: 8rem;
    box-shadow: 0 4px 16px oklch(0 0 0 / 0.12), 0 0 0 1px var(--border);

    /* -- Anchor positioning ------------------------------------ */
    position: fixed;
    inset: auto;
    top: anchor(bottom);
    left: anchor(left);
    margin: 0;
    margin-top: 4px;
    /* the preferred edge first; when the menu would leave the viewport it
       flips to the trigger's OTHER edge (flip-inline swaps left: anchor(left)
       <-> right: anchor(right)), above the trigger (flip-block), or both */
    position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;

    /* data-align="end": the menu's end edge lines up with the trigger's end
       (a split button's chevron, an icon trigger at a row's end) instead of
       hanging out past it - and falls back to start-aligned under the
       trigger when there is no room for that (the fallbacks above) */
    &[data-align="end"] {
      left: auto;
      right: anchor(right);
    }

    /* -- Animation --------------------------------------------- */
    opacity: 0;
    transform: scale(0.96) translateY(-0.25rem);
    /* overlay keeps a closing menu in the top layer until its exit
       animation ends - otherwise a closing SUBMENU drops back into its
       parent menu for 150ms, where the parent's transform makes it the
       containing block: the parent grew scrollbars and resized */
    transition: opacity 150ms ease, transform 150ms ease,
                overlay 150ms allow-discrete,
                display 150ms allow-discrete;
    /* a menu never scrolls sideways; submenus live in the top layer */
    overflow-x: hidden;

    &:popover-open {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  @starting-style {
    .dropdown-content:popover-open {
      opacity: 0;
      transform: scale(0.96) translateY(-0.25rem);
    }
  }

  .dropdown-item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.375rem 0.5rem;
    border-radius: calc(var(--radius) * 0.6);
    font-size: 0.875rem;
    border: none;
    background: transparent;
    color: var(--foreground);
    cursor: pointer;
    outline: none;
    text-align: start;
    text-decoration: none;
    font: inherit;
    font-size: 0.875rem;

    &:hover, &[data-highlighted] {
      background-color: var(--accent);
      color: var(--accent-foreground);
    }

    &[data-variant="destructive"] {
      &:hover, &[data-highlighted] {
        background-color: var(--destructive);
        color: var(--destructive-foreground);
      }
    }

    &:disabled, &[aria-disabled="true"] {
      pointer-events: none;
      opacity: 0.5;
    }

    /* data-inset: lines a plain item (or a label) up with the text of
       checkbox / radio items */
    &[data-inset] { padding-inline-start: 1.5rem; }
    & > svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--muted-foreground); }
    &[data-variant="destructive"] > svg { color: currentColor; }
  }
  .dropdown-label[data-inset] { padding-inline-start: 1.5rem; }

  /* -- Submenus ----------------------------------------------------
     <div class="dropdown-sub">
       <button class="dropdown-item dropdown-sub-trigger" role="menuitem">…</button>
       <div class="dropdown-content dropdown-sub-content" role="menu" popover>…</div>
     </div>
     The submenu is a DOM descendant of its menu, so the Popover API keeps
     the parent open while it shows, closes open siblings and light-dismisses
     the whole tree - any depth. It opens beside its trigger (flipping to
     the other side, or up, when there is no room); dropdown.js anchors it. */
  .dropdown-sub { display: contents; }
  .dropdown-sub-trigger {
    &::after {
      content: "";
      width: 1rem;
      height: 1rem;
      margin-inline-start: auto;
      flex-shrink: 0;
      background-color: currentColor;
      opacity: 0.6;
      mask: 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='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    }
    &:dir(rtl)::after { scale: -1 1; }
    /* the shortcut sits before the chevron */
    & .dropdown-shortcut { margin-inline-start: auto; }
    &:has(.dropdown-shortcut)::after { margin-inline-start: 0.5rem; }
    &[aria-expanded="true"] {
      background-color: var(--accent);
      color: var(--accent-foreground);
    }
  }
  .dropdown-content.dropdown-sub-content {
    top: anchor(top);
    left: anchor(right);
    margin: 0;
    margin-block-start: calc(-0.25rem - 1px);
    margin-inline-start: 0.125rem;
    position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
    transform: scale(0.96) translateX(-0.25rem);

    &:popover-open { transform: none; }
    &:dir(rtl) { left: auto; right: anchor(left); }
  }
  @starting-style {
    .dropdown-content.dropdown-sub-content:popover-open {
      opacity: 0;
      transform: scale(0.96) translateX(-0.25rem);
    }
  }

  /* -- Checkbox / Radio indicators ----------------------------- */
  .dropdown-check,
  .dropdown-radio {
    padding-inline-start: 1.5rem;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      inset-inline-start: 0.375rem;
      top: 50%;
      transform: translateY(-50%);
      width: 0.875rem;
      height: 0.875rem;
    }
  }

  /* Mask (not background-image): a data: URI SVG resolves currentColor to
     BLACK when used as an image, making the checks invisible in dark mode.
     Masking paints them with background-color: currentColor instead. */
  .dropdown-check[aria-checked="true"]::before,
  .dropdown-radio[aria-checked="true"]::before {
    background-color: currentColor;
  }

  .dropdown-check[aria-checked="true"]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  }

  .dropdown-radio[aria-checked="true"]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3C/svg%3E");
  }

  .dropdown-check[aria-checked="true"]::before,
  .dropdown-radio[aria-checked="true"]::before {
    mask-size: contain;
    mask-repeat: no-repeat;
  }

  .dropdown-separator {
    height: 1px;
    background: var(--border);
    margin: 0.25rem -0.25rem;
  }

  .dropdown-label {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted-foreground);
  }

  .dropdown-shortcut {
    margin-inline-start: auto;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    letter-spacing: 0.05em;
  }
  /* on a destructive highlight the shortcut follows the item's foreground
     (muted grey on red was unreadable) */
  .dropdown-item[data-variant="destructive"]:is(:hover, [data-highlighted]) .dropdown-shortcut { color: inherit; opacity: 0.8; }

  /* -- Sizes ----------------------------------------------------
     data-size goes on the .dropdown-content popover; items, labels,
     shortcuts and the check indicators scale together. md == the unsized
     default. The [data-size] compound outranks the single-class item
     rules; it only touches block padding/font so the check/radio inline
     padding (padding-inline-start) keeps working. */
  .dropdown-content[data-size="xs"] {
    & .dropdown-item { padding-block: 0.1875rem; font-size: 0.75rem; }
    & .dropdown-label { padding-block: 0.1875rem; font-size: 0.6875rem; }
    & .dropdown-shortcut { font-size: 0.6875rem; }
    & :is(.dropdown-check, .dropdown-radio)::before { width: 0.75rem; height: 0.75rem; }
  }
  .dropdown-content[data-size="sm"] {
    & .dropdown-item { padding-block: 0.25rem; font-size: 0.8125rem; }
    & .dropdown-shortcut { font-size: 0.75rem; }
  }
  .dropdown-content[data-size="md"] {
    & .dropdown-item { padding-block: 0.375rem; font-size: 0.875rem; }
  }
  .dropdown-content[data-size="lg"] {
    & .dropdown-item { padding-block: 0.5rem; font-size: 1rem; }
    & .dropdown-label { font-size: 0.8125rem; }
    & .dropdown-shortcut { font-size: 0.875rem; }
  }
  .dropdown-content[data-size="xl"] {
    & .dropdown-item { padding-block: 0.625rem; font-size: 1.125rem; }
    & .dropdown-label { font-size: 0.875rem; }
    & .dropdown-shortcut { font-size: 1rem; }
  }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    .dropdown-content {
      transition: none;
    }
    .dropdown-item {
      transition: none;
    }
  }

  @media (forced-colors: active) {
    .dropdown-content {
      border-color: ButtonText;
    }
    .dropdown-item {
      &:hover, &[data-highlighted] {
        forced-color-adjust: none;
        background: Highlight;
        color: HighlightText;
      }
    }
  }
}

/* ── components/empty-state/empty-state.css ── */
/* -- Empty State (website · Account & States) -----------------------------
   Explains missing content and offers an appropriate next action - an icon, why it is empty, and the first step; on a dashed area or inline in a list. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-empty-state, .mk-empty-state *, .mk-empty-state ::before, .mk-empty-state ::after) { box-sizing: border-box; }

  .mk-empty-state { display: grid; justify-items: center; gap: 1rem; width: 100%; max-width: 32rem; margin-inline: auto; padding: 2.5rem 1.5rem; text-align: center; }
  .mk-empty-state-icon { position: relative; display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--muted); }
  .mk-empty-state-icon svg { width: 1.75rem; height: 1.75rem; }
  .mk-empty-state-title { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
  .mk-empty-state-text { margin: 0; color: var(--muted-foreground); line-height: 1.6; text-wrap: pretty; }
  .mk-empty-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-block-start: 0.25rem; }
  .mk-empty-state-icon { box-shadow: 0 0 0 0.625rem color-mix(in oklch, var(--muted) 60%, transparent), 0 0 0 1.25rem color-mix(in oklch, var(--muted) 30%, transparent); margin-block: 1.25rem 0.5rem; }
  .mk-empty-state[data-variant="dashed"] { max-width: none; border: 2px dashed var(--border); border-radius: var(--radius-xl); }
  .mk-empty-state[data-variant="compact"] {
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-items: start;
    align-items: center;
    gap: 0 1rem;
    max-width: none;
    padding: 1rem 1.25rem;
    text-align: start;

    & .mk-empty-state-icon { grid-row: span 2; width: 2.5rem; height: 2.5rem; margin: 0; box-shadow: none; & svg { width: 1.125rem; height: 1.125rem; } }
    & .mk-empty-state-title { font-size: 0.9375rem; }
    & .mk-empty-state-text { font-size: 0.875rem; }
    & .mk-empty-state-actions { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-empty-state-icon { border: 1px solid CanvasText; box-shadow: none; }
  }
}

/* ── components/error-state/error-state.css ── */
/* -- Error State (website · Account & States) -----------------------------
   Explains a failure and provides recovery actions - what went wrong in plain words, what to do, and the technical details on request. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-error-state, .mk-error-state *, .mk-error-state ::before, .mk-error-state ::after) { box-sizing: border-box; }

  .mk-error-state { display: grid; justify-items: center; gap: 1rem; width: 100%; max-width: 32rem; margin-inline: auto; padding: 2.5rem 1.5rem; text-align: center; }
  .mk-error-state-icon { position: relative; display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: color-mix(in oklch, var(--destructive) 12%, transparent); }
  .mk-error-state-icon svg { width: 1.75rem; height: 1.75rem; }
  .mk-error-state-title { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
  .mk-error-state-text { margin: 0; color: var(--muted-foreground); line-height: 1.6; text-wrap: pretty; }
  .mk-error-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-block-start: 0.25rem; }
  .mk-error-state-icon { color: var(--destructive); }
  .mk-error-state-details { width: 100%; max-width: 26rem; color: var(--muted-foreground); font-size: 0.8125rem; text-align: start;
    & summary { cursor: pointer; text-align: center; }
    & pre { margin: 0.5rem 0 0; padding: 0.75rem; overflow-x: auto; border-radius: var(--radius-md); background: var(--muted); font-family: var(--font-mono); font-size: 0.75rem; white-space: pre-wrap; }
  }
  .mk-error-state-code { font-size: clamp(4rem, 14vw, 7rem); font-weight: 800; line-height: 1; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 2px var(--border); }
  .mk-error-state[data-variant="page"] { padding-block: 4rem; max-width: 36rem;
    & .mk-error-state-icon { display: none; }
    & .mk-error-state-title { font-size: 1.75rem; }
  }
  .mk-error-state[data-variant="inline"] {
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-items: start;
    align-items: center;
    gap: 0.125rem 1rem;
    max-width: none;
    padding: 1rem 1.25rem;
    border: 1px solid color-mix(in oklab, var(--destructive) 35%, var(--border));
    border-radius: var(--radius-lg);
    background: color-mix(in oklab, var(--destructive) 5%, var(--background));
    text-align: start;

    & .mk-error-state-icon { grid-row: span 2; width: 2.5rem; height: 2.5rem; & svg { width: 1.125rem; height: 1.125rem; } }
    & .mk-error-state-title { font-size: 0.9375rem; }
    & .mk-error-state-text { font-size: 0.875rem; }
    & .mk-error-state-actions { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-error-state-icon { border: 1px solid CanvasText; }
    .mk-error-state-code { -webkit-text-stroke-color: CanvasText; }
  }
}

/* ── components/event-countdown/event-countdown.css ── */
/* -- Event Countdown (website · Events & Promotions) ----------------------
   Displays the remaining time until a specified event - days, hours, minutes and seconds ticking down beside the date and the action. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-event-countdown, .mk-event-countdown *, .mk-event-countdown ::before, .mk-event-countdown ::after) { box-sizing: border-box; }

  .mk-event-countdown { container: mk-event-countdown / inline-size; width: 100%; }
  .mk-event-countdown-inner { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding: 2.5rem 1.5rem; border-radius: var(--radius-xl); border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground); text-align: center; }
  .mk-event-countdown-eyebrow { color: var(--primary); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
  .mk-event-countdown-title { margin: 0; font-size: clamp(1.5rem, 4cqi, 2.25rem); font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
  .mk-event-countdown-date { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--muted-foreground); font-size: 0.9375rem;
    & svg { width: 1rem; height: 1rem; }
  }
  .mk-event-countdown-timer { justify-content: center; }

  .mk-event-countdown[data-variant="dark"] .mk-event-countdown-inner {
    border: 0;
    background: radial-gradient(70% 90% at 50% 0%, color-mix(in oklch, var(--chart-1) 40%, transparent), transparent 70%), var(--foreground);
    color: var(--background);

    & .mk-event-countdown-eyebrow { color: color-mix(in oklab, var(--background) 80%, var(--chart-1)); }
    & .mk-event-countdown-date { color: color-mix(in oklch, var(--background) 70%, transparent); }
    & .countdown-unit { background: color-mix(in oklch, var(--background) 10%, transparent); color: inherit; }
    & .countdown-label { color: color-mix(in oklch, var(--background) 65%, transparent); }
  }

  .mk-event-countdown[data-variant="inline"] .mk-event-countdown-inner {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.5rem;
    padding: 0.75rem 1.25rem;

    & .mk-event-countdown-title { font-size: 1rem; }
    & .countdown-unit { padding: 0.25rem 0.5rem; }
    & .countdown { font-size: 1.125rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-event-countdown-inner { border: 1px solid CanvasText; }
  }
}

/* ── components/event-description/event-description.css ── */
/* -- Event Description (website · Events & Promotions) --------------------
   Explains an event's purpose, audience, and participation details - the story, who it is for, what you take away, and the practical facts. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-event-description, .mk-event-description *, .mk-event-description ::before, .mk-event-description ::after) { box-sizing: border-box; }

  .mk-event-description { container: mk-event-description / inline-size; width: 100%; }
  .mk-event-description-layout { display: grid; gap: 2.5rem; }
  .mk-event-description-body { display: grid; gap: 2rem; min-width: 0;
    & section { display: grid; gap: 0.75rem; }
    & h2 { margin: 0; font-size: 1.25rem; font-weight: 600; }
    & p { margin: 0; color: var(--muted-foreground); line-height: 1.75; text-wrap: pretty; }
  }
  .mk-event-description-audience { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none;
    & li { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: 999px; background: var(--muted); font-size: 0.875rem; font-weight: 500; }
    & svg { width: 0.875rem; height: 0.875rem; color: var(--primary); }
  }
  .mk-event-description-takeaways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.75rem 1.5rem; margin: 0; padding: 0; list-style: none;
    & li { display: flex; gap: 0.625rem; align-items: flex-start; line-height: 1.5; }
    & svg { flex: none; width: 1.125rem; height: 1.125rem; margin-block-start: 0.125rem; color: #16a34a; }
  }
  .mk-event-description-facts {
    display: grid;
    gap: 1.25rem;
    align-self: start;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);

    & dl { display: grid; gap: 0.875rem; margin: 0; }
    & dl div { display: flex; justify-content: space-between; gap: 1rem; padding-block-end: 0.875rem; border-block-end: 1px solid var(--border); font-size: 0.9375rem; }
    & dt { color: var(--muted-foreground); }
    & dd { margin: 0; font-weight: 500; text-align: end; }
    & .btn { width: 100%; }
  }
  .mk-event-description-capacity { display: grid; gap: 0.375rem; font-size: 0.8125rem; color: var(--muted-foreground);
    & meter { width: 100%; height: 0.5rem; }
    & strong { color: var(--foreground); }
  }

  @container mk-event-description (min-width: 52rem) {
    .mk-event-description-layout { grid-template-columns: minmax(0, 1fr) 20rem; gap: 4rem; }
    .mk-event-description-facts { position: sticky; top: 1.5rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-event-description-facts { border-color: CanvasText; }
  }
}

/* ── components/event-header/event-header.css ── */
/* -- Event Header (website · Events & Promotions) -------------------------
   Introduces an event with its title, date, venue, and primary action - on a gradient band, over a cover picture, or beside a poster. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-event-header, .mk-event-header *, .mk-event-header ::before, .mk-event-header ::after) { box-sizing: border-box; }

  .mk-event-header { container: mk-event-header / inline-size; width: 100%; }
  .mk-event-header-inner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    gap: 2rem;
    align-items: center;
    padding: 3rem 2rem;
    border-radius: var(--radius-xl);
    background:
      radial-gradient(60% 90% at 100% 0%, color-mix(in oklch, var(--chart-2) 30%, transparent), transparent 70%),
      radial-gradient(50% 80% at 0% 100%, color-mix(in oklch, var(--chart-1) 28%, transparent), transparent 70%),
      var(--muted);
  }
  .mk-event-header-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
  .mk-event-header-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .mk-event-header-title { margin: 0; font-size: clamp(2.25rem, 6cqi, 4rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; text-wrap: balance; }
  .mk-event-header-tagline { margin: 0; max-width: 36rem; font-size: 1.125rem; color: color-mix(in oklch, currentColor 75%, transparent); text-wrap: pretty; }
  .mk-event-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
    font-weight: 500;

    & li { display: inline-flex; align-items: center; gap: 0.5rem; }
    & svg { width: 1.125rem; height: 1.125rem; opacity: 0.75; }
    & address { font-style: normal; }
  }
  .mk-event-header-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
  .mk-event-header-speakers { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: color-mix(in oklch, currentColor 75%, transparent); }
  .mk-event-header-poster { margin: 0; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); rotate: 2deg;
    & img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
  }
  .mk-event-header-cover { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }

  .mk-event-header[data-variant="image"] .mk-event-header-inner {
    padding-block: 5rem 3rem;
    background: transparent;
    color: #fff;

    &::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, oklch(0.12 0.02 260 / 0.9), oklch(0.12 0.02 260 / 0.25)); }
    & .btn[data-variant="outline"] { border-color: oklch(1 0 0 / 0.45); background: transparent; color: inherit; }
  }

  @container mk-event-header (min-width: 48rem) {
    .mk-event-header[data-variant="split"] .mk-event-header-inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3rem; padding: 3rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-event-header-inner { border: 1px solid CanvasText; }
  }
}

/* ── components/event-item/event-item.css ── */
/* -- Event Item (website · Events & Promotions) ---------------------------
   Previews one event with its date, location, and attendance link - a calendar tile, the title, time and place, and a register action. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-event-item, .mk-event-item *, .mk-event-item ::before, .mk-event-item ::after) { box-sizing: border-box; }

  .mk-event-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem 1.25rem;
    padding: 1rem;
    border-radius: var(--radius-xl);
    transition: background-color 150ms ease;

    &:hover { background: color-mix(in oklch, var(--accent) 60%, transparent); }
  }
  .mk-event-item { position: relative; }
  .mk-event-item-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .mk-event-item-title a:focus-visible { outline: none; }
  .mk-event-item:has(.mk-event-item-title a:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
  /* zero specificity: any block rule may still position its controls */
  :where(.mk-event-item :is(button, input, select, label, .btn):not(.mk-event-item-title a)) { position: relative; z-index: 1; }
  .mk-event-item-date {
    display: grid;
    justify-items: center;
    width: 3.75rem;
    padding: 0.375rem 0 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    line-height: 1;

    & span { color: var(--destructive); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
    & b { margin-block-start: 0.25rem; font-size: 1.625rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  }
  .mk-event-item-body { display: grid; gap: 0.375rem; }
  .mk-event-item-title { margin: 0; font-size: 1.0625rem; font-weight: 600; text-wrap: balance;
    & a { color: inherit; text-decoration: none; }
  }
  .mk-event-item-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; padding: 0; list-style: none; color: var(--muted-foreground); font-size: 0.875rem;
    & li { display: inline-flex; align-items: center; gap: 0.375rem; }
    & svg { width: 0.875rem; height: 0.875rem; }
  }
  .mk-event-item-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
  .mk-event-item-media { display: none; }

  .mk-event-item[data-variant="card"] {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);

    &:hover { background: var(--card); }
    & .mk-event-item-media { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
    & .mk-event-item-date { position: absolute; top: 0.75rem; left: 0.75rem; box-shadow: var(--shadow-md); }
    & .mk-event-item-body { padding: 0 1.25rem; }
    & > .btn { margin: 0 1.25rem 1.25rem; justify-self: start; }
  }

  .mk-event-item[data-variant="compact"] {
    gap: 0.75rem;
    padding: 0.5rem;

    & .mk-event-item-date { width: 3rem; & b { font-size: 1.25rem; } }
    & .mk-event-item-title { font-size: 0.9375rem; }
    & > .btn { display: none; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-event-item { transition: none; }
  }

  @media (forced-colors: active) {
    .mk-event-item-date { border-color: CanvasText; }
  }
}

/* ── components/fab/fab.css ── */
/* -- FAB (floating action button) + speed dial ---------------------- */

@layer components {
  /* A .fab holds a .fab-trigger (a .btn with popovertarget) and, for a speed
     dial, a .fab-menu[popover] of .fab-action buttons. The popover is the
     whole behavior: click / Enter toggles it, Escape and an outside click
     close it, the trigger reports aria-expanded - no JavaScript. The menu is
     anchored to the trigger (anchor-scope keeps many FABs apart) and stacks
     its actions away from it: data-direction up (default) / down / left /
     right, or data-layout="flower" for a quarter circle. */
  .fab {
    --_trig: 3.5rem;
    --_act: 2.75rem;
    --_gap: 0.75rem;
    --_edge: 1.5rem;
    anchor-scope: --fab;
    position: fixed;
    z-index: 50;
    inset-block-end: var(--_edge);
    inset-inline-end: var(--_edge);
    display: flex;

    /* -- Position: the corner (or edge center) it floats in ------------- */
    &[data-position="bottom-start"] { inset-inline-end: auto; inset-inline-start: var(--_edge); }
    &[data-position="top-end"] { inset-block-end: auto; inset-block-start: var(--_edge); }
    &[data-position="top-start"] { inset: var(--_edge) auto auto var(--_edge); }
    &[data-position="bottom-center"] { inset-inline: 0; justify-content: center; pointer-events: none; & > * { pointer-events: auto; } }
    /* inside a positioned container (a card, a panel) instead of the page */
    &[data-attach="container"] { position: absolute; }

    /* -- Sizes: trigger + actions scale together (md == default) --------- */
    &[data-size="sm"] { --_trig: 2.75rem; --_act: 2.25rem; --_gap: 0.5rem; }
    &[data-size="md"] { --_trig: 3.5rem; --_act: 2.75rem; --_gap: 0.75rem; }
    &[data-size="lg"] { --_trig: 4.25rem; --_act: 3.25rem; --_gap: 0.875rem; }
  }

  /* -- Trigger ------------------------------------------------------------ */
  .fab-trigger {
    anchor-name: --fab;
    width: var(--_trig);
    height: var(--_trig);
    padding: 0;
    border-radius: 9999px;
    box-shadow: var(--shadow-lg);

    & svg { width: 1.375rem; height: 1.375rem; }
    & .fab-icon { display: inline-grid; place-items: center; font-size: 1.375rem; line-height: 1; transition: rotate 200ms ease; }

    /* extended: icon + label, a pill */
    /* icon-only width == the round trigger, so a folded label leaves a circle */
    &:has(.fab-text) { width: auto; min-width: var(--_trig); padding-inline: calc((var(--_trig) - 1.375rem) / 2); gap: 0; }
    & .fab-text { margin-inline-start: 0.625rem; padding-inline-end: 0.25rem; }
  }
  .fab-text {
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.9375rem;
  }
  /* open: the trigger's icon turns (+ becomes ×) - or swaps with
     .fab-icon-open / .fab-icon-closed */
  .fab:has(.fab-menu:popover-open) .fab-trigger .fab-icon:not(.fab-icon-open, .fab-icon-closed) { rotate: 45deg; }
  .fab:not(:has(.fab-menu:popover-open)) .fab-icon-open,
  .fab:has(.fab-menu:popover-open) .fab-icon-closed { display: none; }

  /* -- The menu (a popover in the top layer, anchored to the trigger) ----- */
  .fab-menu[popover] {
    position: fixed;
    position-anchor: --fab;
    inset: auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    overflow: visible;
    display: none;
    gap: var(--_gap);
    align-items: center;

    /* up (default): stacked above the trigger, first action nearest */
    bottom: anchor(bottom);
    left: anchor(center);
    translate: -50% 0;
    flex-direction: column-reverse;
    padding-block-end: calc(var(--_trig) + var(--_gap));

    &:popover-open { display: flex; }

    /* the menu box overlaps the trigger (its padding leaves room for it) - only
       the actions take the pointer, so the trigger stays clickable to close */
    pointer-events: none;
    & > * { pointer-events: auto; }

    transition: display 180ms allow-discrete, overlay 180ms allow-discrete;
  }
  .fab[data-direction="down"] .fab-menu[popover] {
    bottom: auto;
    top: anchor(top);
    flex-direction: column;
    padding-block: calc(var(--_trig) + var(--_gap)) 0;
  }
  .fab[data-direction="left"] .fab-menu[popover] {
    bottom: auto;
    left: auto;
    right: anchor(right);
    top: anchor(center);
    translate: 0 -50%;
    flex-direction: row-reverse;
    padding: 0 calc(var(--_trig) + var(--_gap)) 0 0;
  }
  .fab[data-direction="right"] .fab-menu[popover] {
    bottom: auto;
    left: anchor(left);
    top: anchor(center);
    translate: 0 -50%;
    flex-direction: row;
    padding: 0 0 0 calc(var(--_trig) + var(--_gap));
  }
  /* an optional dim layer behind the open dial */
  .fab[data-backdrop] .fab-menu::backdrop {
    background-color: color-mix(in oklch, var(--foreground) 22%, transparent);
    backdrop-filter: blur(2px);
  }

  /* text dials: the pills line up with the trigger's outer edge */
  .fab-menu[popover]:has(> .fab-action > .fab-text) {
    left: auto;
    right: anchor(right);
    translate: none;
    align-items: flex-end;
  }
  .fab:is([data-position="bottom-start"], [data-position="top-start"]) .fab-menu[popover]:has(> .fab-action > .fab-text) {
    right: auto;
    left: anchor(left);
    align-items: flex-start;
  }

  /* -- Actions ------------------------------------------------------------ */
  .fab-action {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--_act);
    height: var(--_act);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 9999px;
    background-color: var(--popover);
    color: var(--popover-foreground);
    box-shadow: var(--shadow-md);
    font: inherit;
    font-size: 1.125rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 160ms ease, scale 160ms ease, translate 160ms ease, background-color 150ms ease;
    transition-delay: calc(var(--_i, 0) * 35ms);

    &:hover { background-color: var(--accent); color: var(--accent-foreground); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
    & svg { width: 1.125rem; height: 1.125rem; }
    /* .btn tones / variants work on an action too */
    &.btn { border-radius: 9999px; width: var(--_act); height: var(--_act); padding: 0; }
  }
  /* text actions: a pill with the words inside */
  .fab-action:has(> .fab-text) { display: inline-flex; align-items: center; width: auto; padding-inline: 0.875rem 1.125rem; gap: 0.5rem; white-space: nowrap; font-size: 0.875rem; font-weight: 500; }
  .fab-action .fab-text { font-size: inherit; }

  /* the stagger: actions pop out from the trigger one after another */
  .fab-menu > :nth-child(2) { --_i: 1; }
  .fab-menu > :nth-child(3) { --_i: 2; }
  .fab-menu > :nth-child(4) { --_i: 3; }
  .fab-menu > :nth-child(5) { --_i: 4; }
  .fab-menu > :nth-child(6) { --_i: 5; }
  .fab-menu > :nth-child(7) { --_i: 6; }
  .fab-menu:not(:popover-open) > * { opacity: 0; scale: 0.6; }
  @starting-style {
    .fab-menu:popover-open > * { opacity: 0; scale: 0.6; }
    .fab[data-layout="flower"] .fab-menu:popover-open > * { translate: -50% -50%; }
  }

  /* label chips beside the actions (toward the screen's middle) */
  .fab-label {
    position: absolute;
    inset-inline-end: calc(100% + 0.625rem);
    top: 50%;
    translate: 0 -50%;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--popover);
    color: var(--popover-foreground);
    box-shadow: var(--shadow-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
  }
  .fab:is([data-position="bottom-start"], [data-position="top-start"]) .fab-label {
    inset-inline-end: auto;
    inset-inline-start: calc(100% + 0.625rem);
  }
  /* sideways dials: the label sits above its action */
  .fab:is([data-direction="left"], [data-direction="right"]) .fab-label {
    inset-inline: auto;
    left: 50%;
    top: auto;
    bottom: calc(100% + 0.5rem);
    translate: -50% 0;
  }

  /* -- Main action: an action that takes the trigger's place when open ---- */
  .fab-menu > .fab-main {
    --_i: 0;
    width: var(--_trig);
    height: var(--_trig);
    border: 0;
    background-color: var(--primary);
    color: var(--primary-foreground);
    box-shadow: var(--shadow-lg);
    font-size: 1.375rem;

    &:hover { background-color: color-mix(in oklch, var(--primary) 88%, var(--primary-foreground)); color: var(--primary-foreground); }
    & svg { width: 1.375rem; height: 1.375rem; }
  }
  .fab-menu:has(> .fab-main) { padding: 0 !important; }
  .fab-menu:has(> .fab-main) > :not(.fab-main) { --_i: 1; }

  /* -- Flower: the actions on a quarter circle around the trigger --------
     The arc opens toward the screen's middle (up-left from bottom-end);
     2 - 6 actions spread evenly. Labels are visually hidden here (they
     still name the buttons). */
  .fab[data-layout="flower"] {
    --_r: calc(var(--_trig) + var(--_act) * 1.6);
    --_arc: 90deg;
    --_a0: 0deg;
    --_sx: -1;
    --_sy: -1;

    &:is([data-position="bottom-start"], [data-position="top-start"]) { --_sx: 1; }
    &:is([data-position="top-end"], [data-position="top-start"]) { --_sy: 1; }
    /* from the center of an edge (a dock's raised action): a semicircle */
    /* the upper arc only (30° - 150°): the ends stay clear of whatever sits
       level with the trigger (a dock's neighbouring items) */
    &:is([data-position="bottom-center"], [data-position="top-center"]) {
      --_arc: 120deg;
      --_a0: 30deg;
      --_sx: -1;
      --_r: calc(var(--_trig) + var(--_act) * 0.9);
    }
    &[data-position="bottom-center"] { --_sy: -1; }
    &[data-position="top-center"] { --_sy: 1; }

    & .fab-menu[popover] {
      top: anchor(center);
      left: anchor(center);
      bottom: auto;
      right: auto;
      width: 0;
      height: 0;
      padding: 0;
      translate: none;
      display: none;
      &:popover-open { display: block; }
    }
    & .fab-menu > * {
      --_step: var(--_arc);
      --_a: calc(var(--_a0) + var(--_k, 0) * var(--_step));
      position: absolute;
      left: 0;
      top: 0;
      translate: calc(-50% + var(--_sx) * cos(var(--_a)) * var(--_r)) calc(-50% + var(--_sy) * sin(var(--_a)) * var(--_r));
    }
    & .fab-menu:not(:popover-open) > * { translate: -50% -50%; }
    & .fab-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; }

    /* k = 0 … n-1 along the arc (the main action, if any, stays centered) */
    & .fab-menu > :not(.fab-main):nth-child(1 of :not(.fab-main)) { --_k: 0; }
    & .fab-menu > :not(.fab-main):nth-child(2 of :not(.fab-main)) { --_k: 1; }
    & .fab-menu > :not(.fab-main):nth-child(3 of :not(.fab-main)) { --_k: 2; }
    & .fab-menu > :not(.fab-main):nth-child(4 of :not(.fab-main)) { --_k: 3; }
    & .fab-menu > :not(.fab-main):nth-child(5 of :not(.fab-main)) { --_k: 4; }
    & .fab-menu > :not(.fab-main):nth-child(6 of :not(.fab-main)) { --_k: 5; }
    & .fab-menu:has(> :not(.fab-main):nth-child(3 of :not(.fab-main))) > * { --_step: calc(var(--_arc) / 2); }
    & .fab-menu:has(> :not(.fab-main):nth-child(4 of :not(.fab-main))) > * { --_step: calc(var(--_arc) / 3); }
    & .fab-menu:has(> :not(.fab-main):nth-child(5 of :not(.fab-main))) > * { --_step: calc(var(--_arc) / 4); --_r: calc(var(--_trig) + var(--_act) * 2.1); }
    & .fab-menu:has(> :not(.fab-main):nth-child(6 of :not(.fab-main))) > * { --_step: calc(var(--_arc) / 5); }
    & .fab-menu > .fab-main { translate: -50% -50%; }
  }

  /* -- Extended FAB that shrinks to its icon as the page scrolls ----------
     data-shrink="scroll": a scroll-driven animation (no listener) folds the
     label away over the first 120px of scrolling. It follows the page;
     for a scrolling container, name its timeline (scroll-timeline: --list;
     timeline-scope on a shared ancestor) and set --fab-timeline: --list. */
  @keyframes fab-shrink {
    to { max-width: 0; opacity: 0; margin-inline-start: 0; padding-inline-end: 0; }
  }
  .fab[data-shrink="scroll"] .fab-trigger {
    & .fab-text {
      max-width: 12rem;
      animation: fab-shrink linear both;
      animation-timeline: var(--fab-timeline, scroll(root block));
      animation-range: 0 120px;
    }
  }

  /* -- Back to top --------------------------------------------------------
     data-scroll-top: the trigger is a link to the start (href="#top" - the
     browser scrolls the document to its top natively, even without an
     element of that id; for a scrolling container, link to an element at
     its start). A scroll-driven animation keeps it hidden at the top and
     fades / grows it in between --fab-scroll-top-from and -to of scroll
     (default 160px - 320px); visibility follows, so it is not focusable
     while hidden. The timeline is a var() - minifiers leave it alone. */
  @keyframes fab-appear {
    from { opacity: 0; scale: 0.6; visibility: hidden; }
  }
  .fab[data-scroll-top] .fab-trigger {
    animation: fab-appear linear both;
    animation-timeline: var(--fab-timeline, scroll(root block));
    animation-range: var(--fab-scroll-top-from, 160px) var(--fab-scroll-top-to, 320px);
  }
  /* the jump glides - for people who have not asked for less motion */
  @media (prefers-reduced-motion: no-preference) {
    html:has(.fab[data-scroll-top]) { scroll-behavior: smooth; }
  }

  /* -- Accessibility -------------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .fab-action, .fab-trigger .fab-icon, .fab-menu[popover] { transition: none; }
    .fab[data-shrink="scroll"] .fab-trigger .fab-text { animation: none; }
    .fab[data-scroll-top] .fab-trigger { animation: none; }
  }
  @media (forced-colors: active) {
    .fab-action, .fab-label { border: 1px solid CanvasText; }
  }
}

/* ── components/faq/faq.css ── */
/* -- FAQ (marketing) -----------------------------------------------
   "Frequently asked questions" as an icon-card grid (each answer is
   visible - no disclosure widget). Cards hold a muted icon tile and a
   question/answer pair. Responsive columns follow container width. */

@layer components {
  .mk-faq {
    container: mk-faq / inline-size;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
  }

  .mk-faq-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    max-width: 48rem;
    text-align: left;
  }

  .mk-faq-eyebrow { color: var(--primary); font-size: 1rem; font-weight: 500; }

  .mk-faq-title {
    line-height: 1.15;
    margin: 0;
    font-size: 1.875rem;
    font-weight: 500;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  .mk-faq-grid { display: grid; gap: 3rem; }

  .mk-faq-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    max-width: 36rem;
    text-align: left;
  }

  .mk-faq-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--muted);

    & svg { width: 1.5rem; height: 1.5rem; color: var(--primary); }
  }

  .mk-faq-text { display: flex; flex-direction: column; gap: 0.25rem; }

  .mk-faq-question {
    line-height: 1.3;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  .mk-faq-answer { margin: 0; color: var(--muted-foreground); font-size: 1rem; text-wrap: pretty; }

  /* a link to the full answer (a detail page or a help article) */
  .mk-faq-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-block-start: 0.5rem;
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;

    & svg { width: 0.875rem; height: 0.875rem; transition: translate 150ms ease; }
    &:hover { text-decoration: underline; text-underline-offset: 0.2em; }
    &:hover svg { translate: 0.125rem 0; }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
  }

  @container mk-faq (min-width: 30rem) {
    .mk-faq-title { font-size: 2.25rem; }
    .mk-faq-grid { grid-template-columns: 1fr 1fr; gap: 2.25rem 2.25rem; row-gap: 3rem; }
  }

  @container mk-faq (min-width: 52rem) {
    .mk-faq-grid { grid-template-columns: repeat(3, 1fr); }
  }


  /* -- variants ------------------------------------------------- */
  /* accordion: the head centered above an Accordion */
  .mk-faq[data-variant="accordion"] {
    align-items: center;

    & .mk-faq-head { align-items: center; text-align: center; }
  }
  .mk-faq-accordion { width: 100%; max-width: 48rem; margin-inline: auto; }
  .mk-faq-accordion .accordion-trigger { padding-block: 1.125rem; font-size: 1.0625rem; }

  .mk-faq-desc { margin: 0; color: var(--muted-foreground); font-size: 1rem; text-wrap: pretty; }

  /* split: the head (sticky) beside the questions */
  .mk-faq-split { display: grid; gap: 2rem 4rem; }
  .mk-faq-split > :first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }

  /* cards: each pair on a bordered card */
  .mk-faq-grid[data-variant="cards"] { gap: 1.25rem; }
  .mk-faq-grid[data-variant="cards"] .mk-faq-item {
    max-width: none;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);

    & .mk-faq-question { font-size: 1.0625rem; }
  }

  /* numbered: a mono counter instead of the icon, a rule on top */
  .mk-faq-grid[data-variant="numbered"] {
    counter-reset: mk-faq;

    & .mk-faq-item { counter-increment: mk-faq; gap: 0.75rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--border); }
    & .mk-faq-item::before { content: counter(mk-faq, decimal-leading-zero); color: var(--primary); font-family: var(--font-mono); font-size: 0.875rem; font-weight: 600; }
  }

  /* search + topics above the questions */
  .mk-faq-search {
    position: relative;
    width: 100%;
    max-width: 32rem;

    & svg { position: absolute; inset-inline-start: 0.875rem; top: 50%; translate: 0 -50%; width: 1.125rem; height: 1.125rem; color: var(--muted-foreground); pointer-events: none; }
    & .input { height: 2.75rem; padding-inline-start: 2.5rem; font-size: 1rem; }
  }
  .mk-faq-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    & a { padding: 0.375rem 0.875rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted-foreground); font-size: 0.875rem; font-weight: 500; text-decoration: none; }
    & a:hover { color: var(--foreground); }
    & a[aria-current] { border-color: var(--primary); background: color-mix(in oklch, var(--primary) 10%, transparent); color: var(--primary); }
    & a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  }

  /* contact: "still have questions" with the team and an action */
  .mk-faq-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    width: 100%;
    max-width: 48rem;
    margin-inline: auto;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-xl);
    background: var(--muted);

    & > div:nth-child(2) { flex: 1 1 14rem; }
    & strong { font-weight: 600; }
    & p { margin: 0.125rem 0 0; color: var(--muted-foreground); font-size: 0.875rem; }
  }
  .mk-faq-split .mk-faq-contact { margin: 0; }

  @container mk-faq (min-width: 52rem) {
    .mk-faq-split { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
    .mk-faq-split > :first-child { position: sticky; top: 1.5rem; align-self: start; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-faq-grid[data-variant="cards"] .mk-faq-item { border-color: CanvasText; }
    .mk-faq-topics a[aria-current] { border-color: Highlight; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mk-faq-link svg { transition: none; }
    .mk-faq-link:hover svg { translate: none; }
  }

  @media (forced-colors: active) {
    .mk-faq-icon { border-color: CanvasText; }
  }
}

/* ── components/feature-details/feature-details.css ── */
/* -- Feature Details (marketing) -----------------------------------
   Section header + two large image features split by a rule + a row
   of icon-led benefit cards. Column split only at container width;
   stacked (rule omitted) below it. */

@layer components {
  .mk-features {
    container: mk-features / inline-size;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
  }

  .mk-features-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 48rem;
    margin-inline: auto;
    text-align: center;
  }

  .mk-features-eyebrow { color: var(--primary); font-size: 1rem; font-weight: 500; }

  .mk-features-title {
    line-height: 1.15;
    margin: 0;
    font-size: 1.875rem;
    font-weight: 500;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  .mk-features-desc {
    margin: 0;
    max-width: 42rem;
    color: var(--muted-foreground);
    font-size: 1rem;
    text-wrap: pretty;
  }

  .mk-features-grid {
    display: grid;
    gap: 1.25rem;
    width: 100%;
    border-bottom: 1px solid var(--border);
  }

  .mk-feature {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1.25rem;
    padding-block: 1.25rem;
  }

  .mk-feature-copy { display: flex; flex: 1; flex-direction: column; gap: 0.375rem; }

  .mk-feature-title {
    line-height: 1.15;
    margin: 0;
    font-size: 1.875rem;
    font-weight: 500;
    letter-spacing: -0.025em;
  }

  .mk-feature-desc { margin: 0; color: var(--muted-foreground); font-size: 1.125rem; text-wrap: pretty; }

  .mk-feature-media {
    position: relative;
    aspect-ratio: 1;
    width: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--muted);

    & img { width: 100%; height: 100%; object-fit: cover; display: block; }
  }

  /* vertical rule between the two features (source swaps in a horizontal
     separator below md; stacking already provides the visual break) */
  .mk-feature-sep {
    display: none;
    width: 1px;
    align-self: stretch;
    background: var(--border);
  }

  .mk-feature-cards { display: grid; gap: 1.25rem; }

  .mk-feature-card { display: flex; flex-direction: column; gap: 0.75rem; max-width: 36rem; }

  .mk-feature-card-title {
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: -0.025em;
    text-wrap: balance;

    & svg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
  }

  .mk-feature-card-desc { margin: 0; color: var(--muted-foreground); font-size: 1rem; text-wrap: pretty; }

  @container mk-features (min-width: 30rem) {
    .mk-features-title { font-size: 2.25rem; }
    .mk-features-grid { grid-template-columns: 1fr auto 1fr; }
    .mk-feature { padding-block: 2.25rem; }
    .mk-feature-sep { display: block; }
    .mk-feature-cards { grid-template-columns: 1fr 1fr; }
  }

  /* four across only once every title fits on one line next to its icon */
  @container mk-features (min-width: 64rem) {
    .mk-feature-cards { grid-template-columns: repeat(4, 1fr); gap: 2.25rem; }
  }

  /* bento: tiles of different sizes - data-span="wide" (2 columns) /
     "tall" (2 rows); a tile holds an icon, copy and optional media */
  .mk-features-bento {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    grid-auto-flow: dense;
    gap: 1rem;
  }
  .mk-bento-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 11rem;
    padding: 1.5rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);

    & svg:first-child { width: 1.5rem; height: 1.5rem; color: var(--primary); }
    & h3 { margin: 0.5rem 0 0; font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
    & p { margin: 0; color: var(--muted-foreground); font-size: 0.9375rem; line-height: 1.55; }
    & img { width: calc(100% + 3rem); margin: auto -1.5rem -1.5rem; aspect-ratio: 16 / 9; object-fit: cover; }

    &[data-span="wide"] { grid-column: span 2; }
    &[data-span="tall"] { grid-row: span 2; }
    &[data-tone="primary"] { border-color: transparent; background: var(--primary); color: var(--primary-foreground); }
    &[data-tone="primary"] :is(p, svg:first-child) { color: color-mix(in oklch, var(--primary-foreground) 80%, transparent); }
  }
  @container mk-features (max-width: 34rem) {
    .mk-bento-tile[data-span="wide"] { grid-column: auto; }
  }

  /* alternating: zig-zag rows - media and copy swap sides every other row */
  .mk-feature-rows { display: grid; gap: 4rem; }
  .mk-feature-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    align-items: center;
    gap: 2rem 3rem;

    & .mk-feature-media { aspect-ratio: 4 / 3; border-radius: var(--radius-xl); }
  }
  @container mk-features (min-width: 44rem) {
    .mk-feature-row:nth-child(even) .mk-feature-media { order: 2; }
  }
  .mk-feature-checks {
    display: grid;
    gap: 0.625rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;

    & li { display: flex; gap: 0.625rem; align-items: flex-start; }
    & li::before {
      content: "";
      flex: none;
      width: 1.25rem;
      height: 1.25rem;
      margin-block-start: 0.125rem;
      border-radius: 50%;
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.75rem no-repeat,
        var(--primary);
    }
  }

  /* tabs: a Tabs component - the triggers as a feature list, the panel shows it */
  .mk-features-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1.5rem 2.5rem;
    align-items: start;

    & .tab-list { flex-direction: column; align-items: stretch; height: auto; gap: 0.25rem; padding: 0.375rem; }
    & .tab-trigger { flex-direction: column; align-items: flex-start; gap: 0.125rem; height: auto; padding: 0.875rem 1rem; text-align: start; white-space: normal; }
    & .tab-trigger small { color: var(--muted-foreground); font-weight: 400; font-size: 0.8125rem; }
    & .tab-content img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-xl); }
  }

  /* boxed: the benefit cards on card surfaces with an icon tile */
  .mk-feature-cards[data-variant="boxed"] .mk-feature-card {
    max-width: none;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    transition: border-color 150ms, box-shadow 150ms;

    &:hover { border-color: color-mix(in oklch, var(--foreground) 25%, var(--border)); box-shadow: var(--shadow-md); }
    & .mk-feature-card-title svg { padding: 0.5rem; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); background: color-mix(in oklch, var(--primary) 10%, transparent); color: var(--primary); box-sizing: border-box; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-feature-cards[data-variant="boxed"] .mk-feature-card { transition: none; }
  }

  @media (forced-colors: active) {
    .mk-features-grid { border-bottom-color: CanvasText; }
    .mk-feature-sep { background: CanvasText; }
  }
}

/* ── components/feedback-form/feedback-form.css ── */
/* -- Feedback Form (website · Account & States) ---------------------------
   Collects a rating or written feedback about an experience - faces and topics on a card, a 0–10 recommendation scale, or "was this helpful?" inline. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-feedback-form, .mk-feedback-form *, .mk-feedback-form ::before, .mk-feedback-form ::after) { box-sizing: border-box; }

  .mk-feedback-form { display: grid; gap: 1.25rem; width: 100%; max-width: 30rem; padding: 1.5rem; border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);
    & form { display: grid; gap: 1.25rem; }
    & h2 { margin: 0; font-size: 1.125rem; font-weight: 600; }
    & fieldset { display: grid; gap: 0.625rem; margin: 0; padding: 0; border: 0; min-width: 0; }
    & legend { margin-block-end: 0.625rem; padding: 0; font-size: 0.9375rem; font-weight: 500; }
  }
  .mk-feedback-form-faces { display: flex; justify-content: space-between; gap: 0.5rem;
    & label { position: relative; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--muted); font-size: 1.5rem; cursor: pointer; filter: grayscale(1); opacity: 0.75; transition: scale 150ms ease, filter 150ms ease, opacity 150ms ease; }
    & input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
    & label:hover { filter: none; opacity: 1; }
    & label:has(:checked) { filter: none; opacity: 1; scale: 1.15; box-shadow: 0 0 0 2px var(--primary); }
    & label:has(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 3px; }
  }
  .mk-feedback-form-chips { display: flex; flex-wrap: wrap; gap: 0.5rem;
    & label { position: relative; padding: 0.375rem 0.875rem; border: 1px solid var(--border); border-radius: 999px; font-size: 0.875rem; cursor: pointer; }
    & input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
    & label:has(:checked) { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
    & label:has(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
  }

  .mk-feedback-form[data-variant="nps"] { max-width: 40rem; }
  .mk-feedback-form-scale { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 0.25rem;
    & label { position: relative; display: grid; place-items: center; height: 2.5rem; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
    & input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
    & label:hover { background: var(--accent); }
    & label:has(:checked) { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
    & label:has(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
  }
  .mk-feedback-form-ends { display: flex; justify-content: space-between; color: var(--muted-foreground); font-size: 0.75rem; }

  .mk-feedback-form[data-variant="inline"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    max-width: none;
    padding: 1rem 1.25rem;
    border-style: dashed;
    background: transparent;

    & fieldset { display: flex; align-items: center; gap: 0.75rem; }
    & legend { float: left; margin: 0; }
    & .mk-feedback-form-yesno { display: flex; gap: 0.5rem; }
    & .mk-feedback-form-yesno label { position: relative; display: inline-flex; align-items: center; gap: 0.375rem; height: 2rem; padding-inline: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; cursor: pointer; }
    & .mk-feedback-form-yesno input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
    & .mk-feedback-form-yesno svg { width: 0.875rem; height: 0.875rem; }
    & .mk-feedback-form-yesno label:hover { background: var(--accent); }
    & .mk-feedback-form-yesno label:has(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
    & .mk-feedback-form-thanks { display: none; margin: 0; color: #15803d; font-size: 0.875rem; font-weight: 500; }
    &:has(.mk-feedback-form-yesno :checked) fieldset { display: none; }
    &:has(.mk-feedback-form-yesno :checked) .mk-feedback-form-thanks { display: block; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-feedback-form-faces label { transition: none; }
  }

  @media (forced-colors: active) {
    .mk-feedback-form-faces label:has(:checked), .mk-feedback-form-scale label:has(:checked), .mk-feedback-form-chips label:has(:checked) { outline: 2px solid Highlight; }
  }
}

/* ── components/file-input/file-input.css ── */
/* -- File Input component --------------------------------------- */

@layer components {
  .file-input {
    /* see .input - border-box so the declared ladder height is the real box;
       unsized default = the ladder's md step (field standard) */
    box-sizing: border-box;
    width: 100%;
    /* the chosen file name is the whole point of the control's text part -
       never let a flex/grid row squeeze it below a readable path length */
    min-inline-size: min(100%, 24rem);
    height: 2.25rem;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    font-size: 0.875rem;
    font-family: var(--font-sans);
    color: var(--foreground);
    outline: none;
    box-shadow: var(--shadow-xs);
    transition: border-color 150ms, box-shadow 150ms;
    padding: 0;
    cursor: pointer;

    &::file-selector-button {
      /* % resolves against the border-box's CONTENT height once the control is
         border-box - 100% would leave 1px gaps above/below the divider; +2px
         makes the button flush with the frame (its original visual) */
      height: calc(100% + 2px);
      border: none;
      border-right: 1px solid var(--input);
      background: var(--muted);
      color: var(--foreground);
      font-size: 0.875rem;
      font-weight: 500;
      font-family: var(--font-sans);
      padding: 0 0.75rem;
      margin-right: 0.75rem;
      cursor: pointer;
      transition: background 150ms;

      &:hover { background: var(--accent); }
    }

    &:focus {
      border-color: var(--ring);
      box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.2);
    }

    /* Disabled = legible but inert: muted surface + text inside the
       full-strength border - never an opacity fade */
    &:disabled {
      background-color: var(--muted);
      color: var(--muted-foreground);
      box-shadow: none;
      cursor: not-allowed;

      &::file-selector-button {
        color: var(--muted-foreground);
        cursor: not-allowed;

        &:hover { background: var(--muted); }
      }
    }

    /* -- Sizes: same ladder as .input/.date-input (md = 2.25rem; the
       unsized default keeps the historical 2.5rem). The file-selector
       button fills the container (height:100%), so only the box and the
       font scale. */
    &[data-size="xs"] { height: 1.75rem; font-size: 0.75rem;    &::file-selector-button { padding: 0 0.5rem; margin-right: 0.5rem; font-size: 0.75rem; } }
    &[data-size="sm"] { height: 2rem;    font-size: 0.8125rem;  &::file-selector-button { padding: 0 0.625rem; margin-right: 0.625rem; font-size: 0.8125rem; } }
    &[data-size="md"] { height: 2.25rem; font-size: 0.875rem; }
    &[data-size="lg"] { height: 2.75rem; font-size: 1rem;       &::file-selector-button { padding: 0 1rem; margin-right: 1rem; font-size: 1rem; } }
    &[data-size="xl"] { height: 3.25rem; font-size: 1.125rem;   &::file-selector-button { padding: 0 1.25rem; margin-right: 1.25rem; font-size: 1.125rem; } }
  }

  /* -- Drop zone ---------------------------------------------------------
     .file-drop wraps a <label class="file-drop-zone"> (the card) whose
     native <input type="file" class="file-drop-input"> covers it,
     invisible - so a click opens the picker and a DROP lands on the input
     itself: the browser fills input.files natively, no JavaScript needed.
     file-input.js adds the drag highlight, filters dropped files by
     accept / data-max-size / data-max-files (the browser does not filter
     drops), appends to the selection instead of replacing it, and lists the
     files in .file-drop-list with previews and remove buttons. */
  .file-drop {
    display: grid;
    gap: 0.75rem;
    width: 100%;
  }
  .file-drop-zone {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.375rem;
    padding: 2rem 1.5rem;
    border: 2px dashed color-mix(in oklch, var(--foreground) 22%, transparent);
    border-radius: var(--radius-xl);
    background-color: var(--card);
    color: var(--card-foreground);
    text-align: center;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, scale 150ms ease;

    &:hover { border-color: color-mix(in oklch, var(--foreground) 40%, transparent); }
    &:has(.file-drop-input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
    &:has(.file-drop-input:disabled) { opacity: 0.55; cursor: not-allowed; }
  }
  .file-drop-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: inherit;
    font-size: 0; /* no native "No file chosen" hit-box quirks */
  }
  .file-drop-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.25rem;
    border-radius: 9999px;
    background-color: var(--muted);
    color: var(--muted-foreground);
    font-size: 1.5rem;
    line-height: 1;
    transition: background-color 150ms ease, color 150ms ease, translate 150ms ease;

    & svg { width: 1.5rem; height: 1.5rem; }
  }
  .file-drop-title {
    font-size: 0.9375rem;
    font-weight: 600;
    text-wrap: balance;

    & u, & .file-drop-browse { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
  }
  .file-drop-hint {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    text-wrap: balance;
  }

  /* dragging files over the zone */
  .file-drop[data-state-name="dragover"] .file-drop-zone {
    border-color: var(--primary);
    border-style: solid;
    background-color: color-mix(in oklch, var(--primary) 6%, var(--card));
    scale: 1.01;

    & .file-drop-icon { background-color: var(--primary); color: var(--primary-foreground); translate: 0 -2px; }
  }
  /* rejected files (wrong type, too big, too many) */
  .file-drop[data-state-name="error"] .file-drop-zone { border-color: var(--destructive); }
  .file-drop-error {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--destructive);

    &:empty { display: none; }
  }

  /* compact: one row - icon, text, and the whole row is the target */
  .file-drop[data-size="sm"] .file-drop-zone {
    grid-template-columns: auto 1fr;
    justify-items: start;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0;
    padding: 0.75rem 1rem;
    text-align: start;
    border-radius: var(--radius-lg);

    & .file-drop-icon { grid-row: span 2; width: 2.25rem; height: 2.25rem; margin: 0; font-size: 1.125rem; & svg { width: 1.125rem; height: 1.125rem; } }
  }

  /* -- The file list ---------------------------------------------------- */
  .file-drop-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;

    &:empty { display: none; }
  }
  .file-drop-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.5rem 0.5rem 0.625rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--card);
  }
  .file-drop-thumb {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--muted);
    color: var(--muted-foreground);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;

    & img { width: 100%; height: 100%; object-fit: cover; }
  }
  .file-drop-name {
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .file-drop-meta {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--muted-foreground);
  }
  .file-drop-remove {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;

    &:hover { background-color: var(--accent); color: var(--accent-foreground); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
    & svg { width: 1rem; height: 1rem; }
  }

  @media (forced-colors: active) {
    .file-drop-zone { border-color: CanvasText; }
    .file-drop[data-state-name="dragover"] .file-drop-zone { border-color: Highlight; }
  }
}

/* Accessibility: suppress motion for users who request it (REQUIRED for all
   components - AGENTS.md "Accessibility CSS"). Near-zero duration instead of
   `none` keeps transitionend/animationend (and discrete display flips)
   firing so JS state machines that await them keep working. */
@media (prefers-reduced-motion: reduce) {
  @layer components {
    .file-input,
    .file-input *,
    .file-input::before,
    .file-input::after,
    .file-input *::before,
    .file-input *::after,
    .file-input::backdrop {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

/* ── components/filter-bar/filter-bar.css ── */
/* -- Filter Bar (website · Search & Navigation) ---------------------------
   Presents compact controls for narrowing a collection - selects, toggle chips and a "more filters" action on one scrollable row, with the count. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-filter-bar, .mk-filter-bar *, .mk-filter-bar ::before, .mk-filter-bar ::after) { box-sizing: border-box; }

  .mk-filter-bar { width: 100%;
    & form { display: flex; align-items: center; gap: 0.5rem; padding-block: 0.5rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
    & .select { width: auto; height: 2rem; padding-block: 0; font-size: 0.8125rem; border-radius: 999px; flex: none; }
    & .btn { flex: none; border-radius: 999px; }
  }
  .mk-filter-bar-chip { position: relative; display: inline-flex; align-items: center; gap: 0.375rem; height: 2rem; padding-inline: 0.75rem; border: 1px solid var(--border); border-radius: 999px; font-size: 0.8125rem; font-weight: 500; cursor: pointer; white-space: nowrap;
    flex: none;
    & input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
    & svg { width: 0.875rem; height: 0.875rem; }
    &:has(:checked) { border-color: var(--foreground); background: var(--foreground); color: var(--background); }
    &:has(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
  }
  .mk-filter-bar-sep { flex: none; width: 1px; height: 1.25rem; background: var(--border); }
  .mk-filter-bar-count { flex: none; margin-inline-start: auto; padding-inline-start: 1rem; color: var(--muted-foreground); font-size: 0.8125rem; white-space: nowrap; }
  .mk-filter-bar[data-variant="sticky"] { position: sticky; top: 0; z-index: 10; border-block-end: 1px solid var(--border); background: color-mix(in oklch, var(--background) 85%, transparent); backdrop-filter: blur(10px); }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-filter-bar-chip:has(:checked) { background: Highlight; color: HighlightText; }
  }
}

/* ── components/filter-sidebar/filter-sidebar.css ── */
/* -- Filter Sidebar (website · Search & Navigation) -----------------------
   Groups detailed filtering controls beside a collection - categories with counts, a price range, colors, rating and availability, each group collapsible. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-filter-sidebar, .mk-filter-sidebar *, .mk-filter-sidebar ::before, .mk-filter-sidebar ::after) { box-sizing: border-box; }

  .mk-filter-sidebar { width: 100%; max-width: 17rem;
    & form { display: grid; }
  }
  .mk-filter-sidebar-head { display: flex; align-items: baseline; justify-content: space-between; padding-block-end: 0.75rem;
    & h2 { margin: 0; font-size: 1rem; font-weight: 600; }
    & a { color: var(--muted-foreground); font-size: 0.8125rem; }
  }
  .mk-filter-sidebar-group { padding-block: 0.875rem; border-block-start: 1px solid var(--border);
    & > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 0.875rem; font-weight: 600; list-style: none; }
    & > summary::-webkit-details-marker { display: none; }
    & > summary::after { content: "+"; color: var(--muted-foreground); font-weight: 400; }
    &[open] > summary::after { content: "−"; }
    & > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
    & > div { display: grid; gap: 0.5rem; padding-block-start: 0.75rem; }
    & fieldset { display: contents; }
    & legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  }
  .mk-filter-sidebar-option { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; cursor: pointer;
    & small { margin-inline-start: auto; color: var(--muted-foreground); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
  }
  .mk-filter-sidebar-range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; color: var(--muted-foreground); font-size: 0.8125rem;
    & .input { height: 2rem; font-size: 0.8125rem; }
  }
  .mk-filter-sidebar-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .mk-filter-sidebar-swatch { --mk-swatch: var(--muted); position: relative; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--mk-swatch); box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.15); cursor: pointer;
    & input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
    &:has(:checked) { outline: 2px solid var(--foreground); outline-offset: 2px; }
    &:has(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
  }
  .mk-filter-sidebar-stars { color: oklch(0.78 0.16 75); letter-spacing: 0.0625rem; }
  .mk-filter-sidebar-apply { margin-block-start: 1rem; }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-filter-sidebar-swatch { forced-color-adjust: none; border: 1px solid CanvasText; }
    .mk-filter-sidebar-swatch:has(:checked) { outline-color: Highlight; }
  }
}

/* ── components/form/form.css ── */
/* -- Form component --------------------------------------------- */

@layer components {
  .form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  /* -- Form field -------------------------------------------- */
  .form-field {
    display: flex;
    flex-direction: column;
    gap: 0;

    /* -- Horizontal orientation (label beside control) ------- */
    &[data-orientation="horizontal"] {
      flex-direction: row;
      align-items: start;
      gap: 1rem;

      & > .label {
        margin-bottom: 0;
        padding-top: 0.5rem;
        min-width: 8rem;
        flex-shrink: 0;
      }
    }

    /* -- Invalid state -------------------------------------- */
    &[data-invalid] {
      & > .field-description {
        color: var(--destructive);
      }
    }
  }

  /* -- Inline field (checkbox, switch, radio inline) -------- */
  .form-field-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    & > .label {
      margin-bottom: 0;
    }
  }

  /* -- Notification / switch row layout --------------------- */
  .form-field-row {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: var(--shadow-xs);

    & > div {
      display: flex;
      flex-direction: column;
      gap: 0.125rem;
    }

    & > div > .label {
      margin-bottom: 0;
      line-height: 1.4;
    }

    & > div > .field-description {
      margin: 0;
    }

    &[data-disabled] {
      opacity: 0.6;
    }
  }

  /* -- Button actions row ----------------------------------- */
  .form-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding-top: 0.5rem;
  }

  /* -- Fieldset --------------------------------------------- */
  .form-fieldset {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    & > legend {
      font-size: 0.875rem;
      font-weight: 500;
      font-family: var(--font-sans);
      color: var(--foreground);
      padding: 0;
      margin-bottom: 0.25rem;
    }

    & > .field-description {
      margin: -0.25rem 0 0.5rem;
    }
  }

  /* -- Form group (vertical stack of fields) ---------------- */
  .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  /* -- Accessibility ---------------------------------------- */
  @media (prefers-contrast: more) {
    .form-field-row {
      border-width: 2px;
    }
  }

  @media (forced-colors: active) {
    .form-field-row {
      border-color: ButtonBorder;
    }

    .form-fieldset > legend {
      color: LinkText;
    }
  }
}

/* ── components/form-progress/form-progress.css ── */
/* -- Form Progress (website · Account & States) ---------------------------
   Shows the current stage and remaining steps of a form - a bar with the step names, numbered steps, segments or one compact line. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-form-progress, .mk-form-progress *, .mk-form-progress ::before, .mk-form-progress ::after) { box-sizing: border-box; }

  .mk-form-progress { container: mk-form-progress / inline-size; display: grid; gap: 0.75rem; width: 100%; max-width: 40rem; }
  .mk-form-progress-status { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.875rem;
    & strong { font-weight: 600; }
    & span { color: var(--muted-foreground); }
  }
  .mk-form-progress progress { width: 100%; height: 0.375rem; }
  .mk-form-progress-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--muted-foreground);
    font-size: 0.8125rem;

    & li { display: flex; align-items: center; gap: 0.5rem; }
    & li[data-done] { color: var(--foreground); }
    & li[aria-current] { color: var(--foreground); font-weight: 600; }
  }
  .mk-form-progress-dot { display: none; }

  .mk-form-progress[data-variant="numbered"] {
    & .mk-form-progress-steps li { position: relative; flex-direction: column; gap: 0.5rem; text-align: center; }
    & .mk-form-progress-steps li:not(:last-child)::after { content: ""; position: absolute; top: 1rem; left: calc(50% + 1.25rem); right: calc(-50% + 1.25rem); height: 2px; background: var(--border); }
    & .mk-form-progress-steps li[data-done]::after { background: var(--primary); }
    & .mk-form-progress-dot { display: grid; place-items: center; width: 2rem; height: 2rem; border: 2px solid var(--border); border-radius: 50%; background: var(--background); font-size: 0.8125rem; font-weight: 600; }
    & .mk-form-progress-dot svg { width: 0.875rem; height: 0.875rem; }
    & [data-done] .mk-form-progress-dot { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
    & [aria-current] .mk-form-progress-dot { border-color: var(--primary); color: var(--primary); }
  }

  .mk-form-progress[data-variant="segments"] .mk-form-progress-steps {
    gap: 0.375rem;
    & li { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    & li::before { content: ""; height: 0.375rem; border-radius: 999px; background: var(--muted); }
    & li:is([data-done], [aria-current])::before { background: var(--primary); }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-form-progress[data-variant="segments"] .mk-form-progress-steps li:is([data-done], [aria-current])::before { background: Highlight; }
    .mk-form-progress[data-variant="numbered"] [data-done] .mk-form-progress-dot { background: Highlight; }
  }
}

/* ── components/gallery-item/gallery-item.css ── */
/* -- Gallery Item (website · Media) ---------------------------------------
   Presents one image with a caption and enlarged-view action - the picture opens a large view in a native modal dialog. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-gallery-item, .mk-gallery-item *, .mk-gallery-item ::before, .mk-gallery-item ::after) { box-sizing: border-box; }

  .mk-gallery-item { position: relative; display: grid; gap: 0.625rem; margin: 0; }
  .mk-gallery-item-open {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--muted);
    cursor: zoom-in;

    & img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: scale 400ms ease; }
    &:hover img { scale: 1.04; }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  }
  .mk-gallery-item-zoom {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: oklch(0.12 0.02 260 / 0.55);
    color: #fff;
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 200ms ease;

    & svg { width: 1rem; height: 1rem; }
  }
  .mk-gallery-item-open:is(:hover, :focus-visible) .mk-gallery-item-zoom { opacity: 1; }
  .mk-gallery-item-caption { font-size: 0.875rem; font-weight: 500;
    & span { display: block; color: var(--muted-foreground); font-weight: 400; font-size: 0.8125rem; }
  }

  /* the large view */
  .mk-gallery-item-viewer {
    max-width: min(92vw, 72rem);
    max-height: 92vh;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    overflow: visible;
    opacity: 1;
    scale: 1;
    transition: opacity 250ms ease, scale 250ms ease, display 250ms allow-discrete, overlay 250ms allow-discrete;

    &::backdrop { background: oklch(0.1 0.01 260 / 0.85); backdrop-filter: blur(6px); }
    &:not([open]) { opacity: 0; scale: 0.96; }
  }
  @starting-style {
    .mk-gallery-item-viewer[open] { opacity: 0; scale: 0.96; }
  }
  .mk-gallery-item-viewer-inner {
    position: relative;
    display: grid;
    gap: 0.75rem;

    & img { display: block; max-width: 100%; max-height: 80vh; margin-inline: auto; border-radius: var(--radius-lg); object-fit: contain; }
    & p { margin: 0; text-align: center; font-size: 0.9375rem; }
    & p span { color: oklch(1 0 0 / 0.65); }
    & form { position: absolute; top: -0.75rem; right: -0.75rem; }
  }
  .mk-gallery-item-close {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: oklch(0.15 0 0);
    box-shadow: var(--shadow-lg);
    cursor: pointer;

    & svg { width: 1.125rem; height: 1.125rem; }
    &:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  }

  .mk-gallery-item[data-variant="overlay"] {
    & .mk-gallery-item-caption { position: absolute; inset: auto 0 0; z-index: 1; padding: 2rem 1rem 0.875rem; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: linear-gradient(transparent, oklch(0.12 0.02 260 / 0.85)); color: #fff; opacity: 0; transition: opacity 200ms ease; pointer-events: none; }
    & .mk-gallery-item-caption span { color: oklch(1 0 0 / 0.75); }
    &:is(:hover, :focus-within) .mk-gallery-item-caption { opacity: 1; }
  }

  .mk-gallery-item[data-variant="framed"] {
    padding: 0.75rem 0.75rem 1rem;
    background: #fff;
    color: oklch(0.2 0 0);
    box-shadow: var(--shadow-lg);
    rotate: -1.5deg;
    transition: rotate 300ms ease;

    &:nth-child(even) { rotate: 1.5deg; }
    &:hover { rotate: 0deg; }
    & .mk-gallery-item-open { border-radius: 2px; }
    & .mk-gallery-item-caption { font-family: var(--font-serif); text-align: center; }
    & .mk-gallery-item-caption span { color: oklch(0.45 0 0); }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-gallery-item-open img, .mk-gallery-item-zoom, .mk-gallery-item-viewer, .mk-gallery-item[data-variant="framed"], .mk-gallery-item[data-variant="overlay"] .mk-gallery-item-caption { transition: none; }
    .mk-gallery-item-open:hover img { scale: none; }
  }

  @media (forced-colors: active) {
    .mk-gallery-item-close { border: 1px solid ButtonText; }
  }
}

/* ── components/get-in-touch/get-in-touch.css ── */
/* -- Get In Touch (marketing) --------------------------------------
   Bordered contact CTA card: overlapping grayscale avatar stack,
   centered heading, single button. Avatar overlap via negative
   margin + ring (source: `-space-x-2 ring-2 ring-background`). */

@layer components {
  .mk-contact {
    container: mk-contact / inline-size;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.25rem;
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--background);
    padding: 2.25rem 1.25rem;
  }

  .mk-contact-avatars { display: flex; margin-inline-start: 0.5rem; }

  .mk-contact-avatars .avatar {
    /* every avatar: background ring (survives forced-colors) + grayscale */
    outline: 2px solid var(--background);
    outline-offset: -2px;
    filter: grayscale(1);
  }

  .mk-contact-avatars .avatar + .avatar {
    /* overlap every avatar except the first (source: -space-x-2) */
    margin-inline-start: -0.5rem;
  }

  .mk-contact-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 36rem;
    margin-inline: auto;
    text-align: center;
  }

  .mk-contact-title {
    line-height: 1.15;
    margin: 0;
    font-size: 1.875rem;
    font-weight: 500;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  .mk-contact-desc { margin: 0; max-width: 42rem; color: var(--muted-foreground); font-size: 1rem; text-wrap: pretty; }

  .mk-contact-cta { width: 100%; }

  @container mk-contact (min-width: 30rem) {
    .mk-contact-title { font-size: 2.25rem; }
    .mk-contact-cta { width: auto; }
  }

  /* split: a contact form beside the ways to reach you */
  .mk-contact[data-variant="split"] {
    align-items: stretch;
    padding: 2rem;
  }
  .mk-contact-split {
    display: grid;
    gap: 2rem 3rem;
    width: 100%;

    & form { display: grid; gap: 1rem; }
    & .mk-contact-copy { align-items: flex-start; text-align: start; margin: 0; }
  }
  /* the info column beside the form once the section has room */
  @container mk-contact (min-width: 44rem) {
    .mk-contact-split { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  }
  .mk-contact-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 1rem; }
  .mk-contact-field { display: grid; gap: 0.375rem; }
  .mk-contact-info {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;

    & li { display: flex; gap: 0.875rem; align-items: flex-start; }
    & li > svg { flex: none; width: 2.25rem; height: 2.25rem; padding: 0.5rem; box-sizing: border-box; border-radius: var(--radius-md); background: var(--muted); color: var(--primary); }
    & strong { display: block; font-size: 0.9375rem; }
    & a, & span { color: var(--muted-foreground); font-size: 0.875rem; text-decoration: none; }
    & a:hover { color: var(--foreground); text-decoration: underline; }
  }

  /* channels: one card per way in - sales, support, press */
  .mk-contact-channels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 1rem;
    width: 100%;
  }
  .mk-contact-channel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    text-align: start;

    & > svg { width: 1.5rem; height: 1.5rem; color: var(--primary); }
    & h3 { margin: 0.5rem 0 0; font-size: 1.0625rem; font-weight: 600; }
    & p { margin: 0; flex: 1; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.55; }
    & .btn { align-self: flex-start; margin-block-start: 0.5rem; }
  }

  /* band: "talk to a human" - a dark band with an online indicator */
  .mk-contact[data-variant="band"] {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 2rem;
    border: 0;
    background:
      radial-gradient(60% 120% at 100% 0%, color-mix(in oklch, var(--chart-2) 35%, transparent), transparent 60%),
      var(--foreground);
    color: var(--background);

    & .mk-contact-copy { align-items: flex-start; text-align: start; margin: 0; flex: 1 1 20rem; }
    & .mk-contact-desc { color: color-mix(in oklch, var(--background) 72%, transparent); }
    & .mk-contact-avatars .avatar { outline-color: var(--foreground); filter: none; }
    & .mk-contact-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  }
  .mk-contact-online { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }

  /* -- Accessibility ------------------------------------------- */

  @media (prefers-reduced-transparency: reduce) {
    /* grayscale is decorative identity, keep it; only guarantee contrast */
    .mk-contact-avatars .avatar { filter: none; }
  }

  @media (forced-colors: active) {
    .mk-contact { border-color: CanvasText; }
    .mk-contact-avatars .avatar { outline-color: Canvas; }
  }
}

/* ── components/heading-anchor/heading-anchor.css ── */
/* -- Heading Anchor component ------------------------------- */

@layer components {
  .heading-anchor {
    color: var(--muted-foreground);
    text-decoration: none;
    font-weight: 400;
    margin-right: 0.375rem;

    &[data-placement="after"] {
      margin-right: 0;
      margin-left: 0.375rem;
    }

    &[data-size="xs"] { font-size: 0.75rem; }
    &[data-size="sm"] { font-size: 0.875rem; }
    &[data-size="md"] { font-size: 1rem; }
    &[data-size="lg"] { font-size: 1.125rem; }
    &[data-size="xl"] { font-size: 1.25rem; }

    &:hover {
      color: var(--primary);
      text-decoration: underline;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .heading-anchor {
      transition: none;
    }
  }

  @media (forced-colors: active) {
    .heading-anchor { color: LinkText; }
  }
}

/* ── components/help-article/help-article.css ── */
/* -- Help Article (website · Docs & Help) ---------------------------------
   Presents instructions for resolving one problem or completing one task - the steps with pictures, a tip, whether it helped and related articles. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-help-article, .mk-help-article *, .mk-help-article ::before, .mk-help-article ::after) { box-sizing: border-box; }

  .mk-help-article { display: grid; gap: 1.25rem; width: 100%; max-width: 42rem; }
  .mk-help-article-title { margin: 0; font-size: 2rem; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
  .mk-help-article-meta { margin: 0; color: var(--muted-foreground); font-size: 0.8125rem; }
  .mk-help-article-lead { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: color-mix(in oklch, var(--foreground) 85%, var(--muted-foreground)); }
  .mk-help-article-steps { display: grid; gap: 1.5rem; margin: 0.5rem 0 0; padding: 0; list-style: none; counter-reset: mk-help;
    & li { counter-increment: mk-help; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.5rem 1rem; }
    & li::before { content: counter(mk-help); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--primary); color: var(--primary-foreground); font-size: 0.875rem; font-weight: 700; }
    & li > div { display: grid; gap: 0.5rem; padding-block-start: 0.25rem; }
    & strong { font-weight: 600; }
    & p { margin: 0; color: var(--muted-foreground); line-height: 1.6; }
    & img { display: block; width: 100%; border: 1px solid var(--border); border-radius: var(--radius-lg); }
    & kbd { padding: 0.0625rem 0.375rem; border: 1px solid var(--border); border-block-end-width: 2px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.8125rem; }
  }
  .mk-help-article-tip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; padding: 1rem 1.125rem; border-radius: var(--radius-lg); background: color-mix(in oklab, oklch(0.75 0.14 150) 12%, var(--background)); font-size: 0.9375rem;
    & svg { width: 1.125rem; height: 1.125rem; margin-block-start: 0.15rem; color: #15803d; }
    & p { margin: 0; }
  }
  .mk-help-article-stuck { padding: 1rem 1.125rem; border: 1px solid var(--border); border-radius: var(--radius-lg);
    & summary { cursor: pointer; font-weight: 600; }
    & p { margin: 0.5rem 0 0; color: var(--muted-foreground); font-size: 0.9375rem; }
  }
  .mk-help-article-related { display: grid; gap: 0.5rem; margin: 0; padding: 1.25rem 0 0; border-block-start: 1px solid var(--border); list-style: none;
    & h2 { margin: 0 0 0.25rem; font-size: 0.875rem; font-weight: 600; }
    & a { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--primary); text-decoration: none; }
    & a:hover { text-decoration: underline; text-underline-offset: 3px; }
    & svg { width: 1rem; height: 1rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-help-article-steps li::before { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  }
}

/* ── components/help-category/help-category.css ── */
/* -- Help Category (website · Docs & Help) --------------------------------
   Links to a support topic with a description and article count - an icon, the topic, what it covers, how many articles and the most read ones. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-help-category, .mk-help-category *, .mk-help-category ::before, .mk-help-category ::after) { box-sizing: border-box; }

  .mk-help-category { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; padding: 1.5rem; border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground); transition: border-color 150ms ease, box-shadow 150ms ease;
    &:hover { border-color: color-mix(in oklch, var(--foreground) 25%, var(--border)); box-shadow: var(--shadow-md); }
  }
  .mk-help-category { position: relative; }
  .mk-help-category-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .mk-help-category-title a:focus-visible { outline: none; }
  .mk-help-category:has(.mk-help-category-title a:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
  /* zero specificity: any block rule may still position its controls */
  :where(.mk-help-category :is(button, input, select, label, .btn):not(.mk-help-category-title a)) { position: relative; z-index: 1; }
  .mk-help-category-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-lg); background: color-mix(in oklch, var(--primary) 10%, transparent); color: var(--primary);
    & svg { width: 1.375rem; height: 1.375rem; }
  }
  .mk-help-category-body { display: grid; gap: 0.25rem; }
  .mk-help-category-title { margin: 0; font-size: 1.0625rem; font-weight: 600;
    & a { color: inherit; text-decoration: none; }
  }
  .mk-help-category-desc { margin: 0; color: var(--muted-foreground); font-size: 0.9375rem; }
  .mk-help-category-count { margin: 0.25rem 0 0; color: var(--muted-foreground); font-size: 0.8125rem; font-weight: 500; }
  .mk-help-category-top { display: grid; gap: 0.25rem; margin: 0.75rem 0 0; padding: 0.75rem 0 0; border-block-start: 1px solid var(--border); list-style: none;
    & a { position: relative; z-index: 1; color: var(--primary); font-size: 0.875rem; text-decoration: none; }
    & a:hover { text-decoration: underline; text-underline-offset: 3px; }
    & a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
  }
  .mk-help-category[data-variant="compact"] { align-items: center; padding: 1rem 1.25rem;
    & .mk-help-category-body { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
    & .mk-help-category-desc { display: none; }
    & .mk-help-category-count { margin: 0; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-help-category { transition: none; }
  }

  @media (forced-colors: active) {
    .mk-help-category { border-color: CanvasText; }
  }
}

/* ── components/hero/hero.css ── */
/* -- Hero (marketing) ---------------------------------------------
   Centered headline + description + CTAs. Copy-only by design - pair it
   with the Product Showcase block for video. Layout switches on container
   width, not viewport - the block renders correctly inside a preview box. */

@layer components {
  .mk-hero {
    container: mk-hero / inline-size;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
  }

  .mk-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 48rem;
    margin-inline: auto;
    text-align: center;
  }

  .mk-hero-badge {
    border: 1px solid var(--border);
    background: var(--background);
    border-radius: 9999px;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
  }

  .mk-hero-title {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  .mk-hero-desc {
    margin: 0;
    max-width: 36rem;
    color: var(--muted-foreground);
    font-size: 1.125rem;
    text-wrap: pretty;
  }

  .mk-hero-actions { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }

  /* the section itself is the query container - a container cannot query
     itself, so responsive rules target the copy child (descendant) */
  @container mk-hero (min-width: 30rem) {
    .mk-hero-title { font-size: 3.75rem; }
    .mk-hero-actions { flex-direction: row; width: fit-content; }
  }


  /* -- variants ------------------------------------------------- */
  /* start-aligned copy (a hero beside a sidebar, a docs landing) */
  .mk-hero[data-align="start"] .mk-hero-copy { align-items: flex-start; margin-inline: 0; text-align: start; }

  /* an announcement pill above the title: a link with a chip and an arrow */
  .mk-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0.25rem 0.75rem 0.25rem 0.25rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in oklch, var(--background) 80%, transparent);
    color: var(--foreground);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    text-align: start;
    transition: border-color 150ms ease;

    & .badge { flex: none; border-radius: 999px; }
    & svg { flex: none; width: 0.875rem; height: 0.875rem; transition: translate 150ms ease; }
    &:hover { border-color: color-mix(in oklch, var(--foreground) 30%, var(--border)); }
    &:hover svg { translate: 0.125rem 0; }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  }

  /* split: the copy beside a picture or video (auto-fit: stacks when narrow) */
  .mk-hero[data-variant="split"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    align-items: center;
    gap: 2.5rem 3rem;

    & .mk-hero-copy { align-items: flex-start; margin: 0; text-align: start; }
    & .mk-hero-title { font-size: clamp(2.25rem, 5.5cqi, 3.5rem); }
  }
  .mk-hero-media {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--muted);

    & :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; }
  }

  /* image: a full-bleed photo behind the copy, a scrim keeps it readable */
  .mk-hero[data-variant="image"] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 6rem 1.5rem;
    border-radius: var(--radius-xl);
    color: #fff;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(to top, oklch(0.15 0.02 260 / 0.85), oklch(0.15 0.02 260 / 0.35));
    }
    & .mk-hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
    & .mk-hero-desc { color: oklch(1 0 0 / 0.82); }
    & .mk-hero-badge { border-color: oklch(1 0 0 / 0.3); background: oklch(1 0 0 / 0.12); color: #fff; backdrop-filter: blur(6px); }
    & .btn[data-variant="outline"] { border-color: oklch(1 0 0 / 0.4); background: transparent; color: #fff; }
  }

  /* glow: a soft brand light over a fading grid; the title fades into the page */
  .mk-hero[data-variant="glow"] {
    position: relative;
    isolation: isolate;
    padding-block: 5rem 3rem;

    &::before,
    &::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
    &::before {
      /* the chart palette, not --primary: a near-black primary would smudge */
      background:
        radial-gradient(28% 40% at 50% 8%, color-mix(in oklch, var(--chart-1) 30%, transparent), transparent),
        radial-gradient(22% 32% at 70% 30%, color-mix(in oklch, var(--chart-2) 26%, transparent), transparent),
        radial-gradient(22% 32% at 30% 34%, color-mix(in oklch, var(--chart-3) 22%, transparent), transparent);
      filter: blur(24px);
    }
    &::after {
      background-image:
        linear-gradient(color-mix(in oklch, var(--foreground) 7%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklch, var(--foreground) 7%, transparent) 1px, transparent 1px);
      background-size: 40px 40px;
      mask-image: radial-gradient(60% 55% at 50% 30%, #000, transparent 75%);
    }
    & .mk-hero-title {
      background: linear-gradient(180deg, var(--foreground) 40%, color-mix(in oklch, var(--foreground) 55%, transparent));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  }

  /* signup: an inline email form under the copy */
  .mk-hero-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 28rem;

    & .input { flex: 1; min-width: 0; }
  }
  .mk-hero-note { margin: 0; color: var(--muted-foreground); font-size: 0.8125rem; }

  /* social proof: an avatar group, stars and a line */
  .mk-hero-proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    text-align: start;

    & > div:last-child { display: grid; gap: 0.125rem; }
    & strong { color: var(--foreground); font-weight: 600; }
  }
  .mk-hero-stars {
    display: flex;
    gap: 1px;
    color: oklch(0.78 0.16 75);

    & svg { width: 0.875rem; height: 0.875rem; fill: currentColor; }
  }

  /* stage: the product under the copy - a framed screenshot with depth */
  .mk-hero-stage {
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    box-shadow: var(--shadow-2xl);

    & img { display: block; width: 100%; height: auto; }
    /* fade the bottom edge into the page */
    &::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 35%;
      background: linear-gradient(transparent, var(--background));
    }
  }

  @container mk-hero (min-width: 30rem) {
    .mk-hero-form { flex-direction: row; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-hero-pill, .mk-hero-pill svg { transition: none; }
    .mk-hero-pill:hover svg { translate: none; }
  }

  @media (forced-colors: active) {
    .mk-hero[data-variant="glow"] .mk-hero-title { background: none; color: CanvasText; }
    .mk-hero-pill { border-color: CanvasText; }
  }
}

/* ── components/icon/icon.css ── */
/* -- Icon component ---------------------------------------- */
/* Styling for Lucide CDN icons (<i data-lucide="name">).     */
/* Lucide replaces <i> with <svg>, these styles target that.  */

@layer components {
  [data-lucide] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
    width: 1rem;
    height: 1rem;
    pointer-events: none;

    /* -- Sizes via data-size --------------------------------- */
    &[data-size="xs"] { width: 0.75rem; height: 0.75rem; }
    &[data-size="sm"] { width: 0.875rem; height: 0.875rem; }
    &[data-size="md"] { width: 1.25rem; height: 1.25rem; }
    &[data-size="lg"] { width: 1.5rem; height: 1.5rem; }
    &[data-size="xl"] { width: 2rem; height: 2rem; }

    /* -- Spin animation ------------------------------------- */
    &[data-animate="spin"] {
      animation: icon-spin 1s linear infinite;
    }
  }

  @keyframes icon-spin {
    to { transform: rotate(360deg); }
  }

  /* ---- Accessibility ---------------------------------------- */

  @media (prefers-reduced-motion: reduce) {
    [data-lucide] {
      animation: none !important;
      transition: none !important;
    }
  }

  @media (prefers-contrast: more) {
    [data-lucide] {
      stroke-width: 2.5;
    }
  }

  @media (forced-colors: active) {
    [data-lucide] {
      color: CanvasText;
    }
  }
}

/* ── components/image/image.css ── */
@layer components {
  .image {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    margin: 0;

    & > img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: filter 200ms ease;
    }

    /* -- Progressive placeholder --------------------------------
       Why: the low-res stand-in (data-src-low) shows blurred until the
       real source is preloaded and swapped in; 8px is a hardcoded filter
       value per the token boundary (no --* token for filters). */
    & > img[data-loading] {
      filter: blur(8px);
    }

    /* -- Fit variants ---------------------------------------- */
    &[data-fit="contain"] > img { object-fit: contain; }
    &[data-fit="fill"]    > img { object-fit: fill; }
    &[data-fit="none"]    > img { object-fit: none; }

    /* -- Aspect ratio ---------------------------------------- */
    &[data-ratio="1/1"]  { aspect-ratio: 1 / 1; }
    &[data-ratio="4/3"]  { aspect-ratio: 4 / 3; }
    &[data-ratio="3/2"]  { aspect-ratio: 3 / 2; }
    &[data-ratio="16/9"] { aspect-ratio: 16 / 9; }
    &[data-ratio="21/9"] { aspect-ratio: 21 / 9; }
    &[data-ratio="3/4"]  { aspect-ratio: 3 / 4; }

    /* -- Radius variants ------------------------------------- */
    &[data-radius="none"] { border-radius: 0; }
    &[data-radius="sm"]   { border-radius: var(--radius-sm); }
    &[data-radius="md"]   { border-radius: var(--radius-md); }
    &[data-radius="full"] { border-radius: 9999px; }

    /* -- Preview cursor -------------------------------------- */
    &[data-preview] {
      cursor: zoom-in;
    }

    /* -- Fallback -------------------------------------------- */
    & > .image-fallback {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--muted);
      color: var(--muted-foreground);

      & > svg {
        width: 2.5rem;
        height: 2.5rem;
        opacity: 0.5;
      }
    }

    /* Hide fallback when image loads successfully */
    &:has(> img:not([data-error])) > .image-fallback {
      display: none;
    }
  }

  /* -- Caption ----------------------------------------------- */
  .image-caption {
    padding: 0.625rem 0 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--muted-foreground);
    text-wrap: pretty;
  }

  /* -- Lightbox dialog --------------------------------------- */
  dialog.image-lightbox {
    border: none;
    background: transparent;
    padding: 0;
    margin: auto;
    position: fixed;
    inset: 0;
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    opacity: 0;
    transition: opacity 200ms ease, display 200ms allow-discrete;

    &[open] {
      opacity: 1;
    }

    &::backdrop {
      background: oklch(0 0 0 / 0);
      transition: all 200ms ease, display 200ms allow-discrete;
    }

    &[open]::backdrop {
      background: oklch(0 0 0 / 0.85);
    }
  }

  @starting-style {
    dialog.image-lightbox[open] {
      opacity: 0;
    }

    dialog.image-lightbox[open]::backdrop {
      background: oklch(0 0 0 / 0);
    }
  }

  /* -- Scroll lock ------------------------------------------- */
  /* Page behind stays put while the lightbox is modal (see dialog.css):
     `:modal` + overflow:hidden freezes the viewport at its current offset. */
  html:has(dialog.image-lightbox:modal) {
    overflow: hidden;
    scrollbar-gutter: stable;
  }

  .image-lightbox-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;

    & > img {
      max-width: 90vw;
      max-height: 85vh;
      object-fit: contain;
      border-radius: var(--radius-md);
      transition: transform 200ms ease;
      user-select: none;
      -webkit-user-drag: none;
    }
  }

  .image-lightbox-toolbar {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.25rem;
    z-index: 1;
  }

  .image-lightbox-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: var(--radius-md);
    background: oklch(0 0 0 / 0.5);
    color: white;
    cursor: pointer;
    transition: background 150ms ease;

    &:hover {
      background: oklch(0 0 0 / 0.7);
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    & > svg {
      width: 1rem;
      height: 1rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .image > img,
    dialog.image-lightbox,
    dialog.image-lightbox::backdrop,
    .image-lightbox-content > img {
      transition: none;
    }
  }

  /* -- Hover gallery (daisyUI's hover-gallery, plus) -----------------------
     A .hover-gallery holds 2-10 images in one cell. The first shows; every
     other image is an invisible vertical strip of the frame (1/n of its
     width, in order) that the pointer can hit - hovering strip k shows
     image k full-size, and the strips of the others stay above it so moving
     on keeps working. CSS only. data-ratio sizes the frame (default 4/3),
     data-indicator draws a position bar, data-effect="zoom" eases the shown
     image in, data-direction="vertical" slices the frame into rows. On
     touch screens (no hover) it becomes a swipeable scroll-snap strip. */
  .hover-gallery {
    --_n: 1;
    --_cur: 1;
    position: relative;
    display: grid;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    background-color: var(--muted);
    isolation: isolate;

    &[data-ratio="1/1"] { aspect-ratio: 1; }
    &[data-ratio="3/4"] { aspect-ratio: 3 / 4; }
    &[data-ratio="16/9"] { aspect-ratio: 16 / 9; }

    & > :is(img, picture, video) {
      grid-area: 1 / 1;
      display: block;
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
      object-fit: cover;
    }
    & > :not(:first-child) {
      z-index: 1;
      opacity: 0;
      /* strip k of n: the columns (k-1)/n .. k/n */
      clip-path: inset(0 calc(100% - var(--_k) * 100% / var(--_n)) 0 calc((var(--_k) - 1) * 100% / var(--_n)));
      /* the switch is instant: a crossfade would leave both images half
         transparent for a moment and the first would shine through */
    }
    & > :not(:first-child):hover {
      z-index: 0;
      opacity: 1;
      clip-path: none;
    }
    /* with image.js: no switching until every image is decoded (data-ready) -
       the first one stays instead of a half-loaded frame */
    &[data-init]:not([data-ready]) > :not(:first-child) { visibility: hidden; }
    &[data-direction="vertical"] > :not(:first-child) {
      clip-path: inset(calc((var(--_k) - 1) * 100% / var(--_n)) 0 calc(100% - var(--_k) * 100% / var(--_n)) 0);
    }
    &[data-direction="vertical"] > :not(:first-child):hover { clip-path: none; }
    /* strip 1 needs a hit area too: moving back from image k must leave it */
    &::before {
      content: '';
      position: absolute;
      z-index: 1;
      inset: 0 calc(100% - 100% / var(--_n)) 0 0;
    }
    &[data-direction="vertical"]::before { inset: 0 0 calc(100% - 100% / var(--_n)) 0; }

    /* k per image, n from the count, the shown one for the indicator */
    & > :nth-child(2) { --_k: 2; }
    & > :nth-child(3) { --_k: 3; }
    & > :nth-child(4) { --_k: 4; }
    & > :nth-child(5) { --_k: 5; }
    & > :nth-child(6) { --_k: 6; }
    & > :nth-child(7) { --_k: 7; }
    & > :nth-child(8) { --_k: 8; }
    & > :nth-child(9) { --_k: 9; }
    & > :nth-child(10) { --_k: 10; }
    &:has(> :nth-child(2)) { --_n: 2; }
    &:has(> :nth-child(3)) { --_n: 3; }
    &:has(> :nth-child(4)) { --_n: 4; }
    &:has(> :nth-child(5)) { --_n: 5; }
    &:has(> :nth-child(6)) { --_n: 6; }
    &:has(> :nth-child(7)) { --_n: 7; }
    &:has(> :nth-child(8)) { --_n: 8; }
    &:has(> :nth-child(9)) { --_n: 9; }
    &:has(> :nth-child(10)) { --_n: 10; }
    &:has(> :nth-child(2):hover) { --_cur: 2; }
    &:has(> :nth-child(3):hover) { --_cur: 3; }
    &:has(> :nth-child(4):hover) { --_cur: 4; }
    &:has(> :nth-child(5):hover) { --_cur: 5; }
    &:has(> :nth-child(6):hover) { --_cur: 6; }
    &:has(> :nth-child(7):hover) { --_cur: 7; }
    &:has(> :nth-child(8):hover) { --_cur: 8; }
    &:has(> :nth-child(9):hover) { --_cur: 9; }
    &:has(> :nth-child(10):hover) { --_cur: 10; }

    /* position bar: n segments, the shown one bright */
    &[data-indicator]::after {
      content: '';
      position: absolute;
      z-index: 2;
      inset: auto 0.75rem 0.625rem;
      height: 3px;
      pointer-events: none;
      --_seg: calc((100% + 4px) / var(--_n));
      /* stops along the full width: the shown segment bright, all segments dim */
      background:
        linear-gradient(90deg, transparent calc((var(--_cur) - 1) * var(--_seg)), oklch(1 0 0) 0 calc(var(--_cur) * var(--_seg) - 4px), transparent 0),
        repeating-linear-gradient(90deg, oklch(1 0 0 / 0.45) 0 calc(var(--_seg) - 4px), transparent 0 var(--_seg));
      border-radius: 9999px;
      filter: drop-shadow(0 1px 1px oklch(0 0 0 / 0.35));
      opacity: 0;
      transition: opacity 150ms ease;
    }
    &[data-indicator]:hover::after,
    &[data-indicator="always"]::after { opacity: 1; }

    /* zoom: the shown image eases in from a slight scale */
    &[data-effect="zoom"] > :is(img, picture, video) { transition: scale 400ms ease; }
    &[data-effect="zoom"]:hover > :first-child:not(:has(~ :hover)),
    &[data-effect="zoom"] > :not(:first-child):hover { scale: 1.04; }
  }
  /* no hover (touch): a swipeable strip, one image per view */
  @media (hover: none) {
    .hover-gallery {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      overscroll-behavior-inline: contain;
      scrollbar-width: none;

      & > :is(img, picture, video),
      & > :not(:first-child) {
        flex: 0 0 100%;
        opacity: 1;
        clip-path: none;
        scroll-snap-align: start;
      }
      &[data-indicator]::after { display: none; }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .hover-gallery > * { transition: none; }
    .hover-gallery[data-effect="zoom"] > * { scale: none !important; }
  }
}

/* ── components/indicator/indicator.css ── */
/* -- Indicator component ------------------------------------------ */

@layer components {
  /* .indicator wraps any element (a button, avatar, card, input, image)
     and pins one or more .indicator-item on it. Each item is CENTERED on an
     anchor point of the wrapper's edge: data-position picks the point -
     vertical top / middle / bottom + horizontal start / center / end
     (default top-end). A single word sets one axis - "start" / "center" /
     "end" horizontal, "top" / "middle" / "bottom" vertical - so "middle-center"
     is the middle of the element. start / end are logical: in RTL, start is
     the right edge. */
  .indicator {
    position: relative;
    display: inline-flex;
    width: max-content;
    max-width: 100%;
  }
  /* the wrapped element fills the wrapper: a no-op at the default
     max-content width, but a wrapper given a width passes it on - a card
     (a size container, no intrinsic width) would otherwise collapse to 0 */
  .indicator > :not(.indicator-item) {
    flex: 1 1 auto;
    min-width: 0;
  }

  .indicator-item {
    /* --_h / --_v: 0 = start / top, 0.5 = center / middle, 1 = end / bottom */
    --_h: 1;
    --_v: 0;
    position: absolute;
    z-index: 1;
    /* --_in: data-inset pulls the item toward the element's center by this
       much per axis (a corner item moves diagonally) - for an icon inside a
       padded button, whose box corner sits well away from the glyph;
       --_dir flips the horizontal pull in RTL */
    --_in: 0px;
    --_dir: 1;
    inset-block-start: calc(var(--_v) * 100%);
    left: calc(var(--_h) * 100%);
    translate:
      calc(-50% + (1 - 2 * var(--_h)) * var(--_in) * var(--_dir))
      calc(-50% + (1 - 2 * var(--_v)) * var(--_in));
    white-space: nowrap;

    &:dir(rtl) { left: calc((1 - var(--_h)) * 100%); --_dir: -1; }
    &[data-inset] { --_in: 0.5rem; }
    &[data-inset="sm"] { --_in: 0.25rem; }
    &[data-inset="lg"] { --_in: 0.75rem; }

    &[data-position^="middle"] { --_v: 0.5; }
    &[data-position^="bottom"] { --_v: 1; }
    &[data-position$="start"] { --_h: 0; }
    &[data-position$="center"] { --_h: 0.5; }

    /* responsive placement (DaisyUI's sm: / md: / lg: / xl:): the same
       values in data-position-sm / -md / -lg / -xl apply from that viewport
       width up (40 / 48 / 64 / 80rem) */
    @media (min-width: 40rem) {
      &[data-position-sm^="top"] { --_v: 0; }
      &[data-position-sm^="middle"] { --_v: 0.5; }
      &[data-position-sm^="bottom"] { --_v: 1; }
      &[data-position-sm$="start"] { --_h: 0; }
      &[data-position-sm$="center"] { --_h: 0.5; }
      &[data-position-sm$="end"] { --_h: 1; }
    }
    @media (min-width: 48rem) {
      &[data-position-md^="top"] { --_v: 0; }
      &[data-position-md^="middle"] { --_v: 0.5; }
      &[data-position-md^="bottom"] { --_v: 1; }
      &[data-position-md$="start"] { --_h: 0; }
      &[data-position-md$="center"] { --_h: 0.5; }
      &[data-position-md$="end"] { --_h: 1; }
    }
    @media (min-width: 64rem) {
      &[data-position-lg^="top"] { --_v: 0; }
      &[data-position-lg^="middle"] { --_v: 0.5; }
      &[data-position-lg^="bottom"] { --_v: 1; }
      &[data-position-lg$="start"] { --_h: 0; }
      &[data-position-lg$="center"] { --_h: 0.5; }
      &[data-position-lg$="end"] { --_h: 1; }
    }
    @media (min-width: 80rem) {
      &[data-position-xl^="top"] { --_v: 0; }
      &[data-position-xl^="middle"] { --_v: 0.5; }
      &[data-position-xl^="bottom"] { --_v: 1; }
      &[data-position-xl$="start"] { --_h: 0; }
      &[data-position-xl$="center"] { --_h: 0.5; }
      &[data-position-xl$="end"] { --_h: 1; }
    }
  }

  /* -- Status dot ----------------------------------------------------
     A small colored dot for presence and state (DaisyUI's status): on its
     own inline, or as an .indicator-item. data-variant colors it,
     data-size sizes it, data-animate="ping" sends a ring pulsing out of it
     (an ::after copy scaling up and fading), "bounce" hops it, "pulse"
     fades it. The dot is currentColor, so a variant is one color line.
     Success / warning / info are literals by design: the tweakcn token set
     has no such pairs (AGENTS.md token rule, like the avatar badge). */
  .indicator-dot {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    color: var(--muted-foreground);
    background-color: currentColor;
    vertical-align: middle;

    &[data-variant="neutral"] { color: var(--foreground); }
    &[data-variant="primary"] { color: var(--primary); }
    /* the tweakcn --secondary / --accent are pale SURFACES - too faint for a
       dot: secondary / accent take the theme's vivid chart colors instead */
    &[data-variant="secondary"] { color: var(--chart-2); }
    &[data-variant="accent"] { color: var(--chart-4); }
    &[data-variant="destructive"], &[data-variant="error"] { color: var(--destructive); }
    &[data-variant="success"] { color: #16a34a; }
    &[data-variant="warning"] { color: #f59e0b; }
    &[data-variant="info"] { color: #0ea5e9; }

    &[data-size="xs"] { width: 0.25rem; height: 0.25rem; }
    &[data-size="sm"] { width: 0.375rem; height: 0.375rem; }
    &[data-size="md"] { width: 0.5rem; height: 0.5rem; }
    &[data-size="lg"] { width: 0.75rem; height: 0.75rem; }
    &[data-size="xl"] { width: 1rem; height: 1rem; }

    &[data-animate="ping"]::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background-color: currentColor;
      animation: indicator-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
    }
    &[data-animate="bounce"] { animation: indicator-bounce 1s infinite; }
    &[data-animate="pulse"] { animation: indicator-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
  }

  /* a dot pinned as an indicator stays absolutely positioned (the dot's own
     position: relative comes later in the cascade); a bounce must not fight
     the centering translate, so it moves the pinned dot with margin instead */
  .indicator-item.indicator-dot {
    position: absolute;

    &[data-animate="bounce"] { animation-name: indicator-bounce-margin; }
  }

  @keyframes indicator-ping {
    75%, 100% { scale: 2.25; opacity: 0; }
  }
  @keyframes indicator-bounce {
    0%, 100% { translate: 0 -25%; animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    50% { translate: 0 0; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
  }
  @keyframes indicator-bounce-margin {
    0%, 100% { margin-top: -0.25em; animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    50% { margin-top: 0; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
  }
  @keyframes indicator-pulse {
    50% { opacity: 0.5; }
  }

  /* -- Accessibility ------------------------------------------ */
  @media (prefers-reduced-motion: reduce) {
    .indicator-dot[data-animate], .indicator-item.indicator-dot[data-animate] { animation: none; }
    .indicator-dot[data-animate]::after { animation: none; opacity: 0; }
  }

  /* forced colors would repaint the dot with Canvas and erase it: the
     color carries the state, so the dot keeps its own */
  @media (forced-colors: active) {
    .indicator-dot { forced-color-adjust: none; }
  }
}

/* ── components/input/input.css ── */
/* -- Input component ------------------------------------------- */

@layer components {
  .input {
    /* border-box is load-bearing for the shared field ladder: the UA gives
       <input> content-box, so `height` would otherwise exclude the 2px frame
       and render 2px taller than the border-box fields (select, button-based
       triggers). With it, every declared height IS the rendered box.
       The unsized default IS the ladder's md step (2.25rem = 36px) - same
       height, padding and font as [data-size="md"] below, so an unlabeled
       field and an explicit md field are the same control. */
    box-sizing: border-box;
    height: 2.25rem;
    width: 100%;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    padding: 0 0.75rem;
    font-size: 0.875rem;
    font-family: var(--font-sans);
    color: var(--foreground);
    outline: none;
    box-shadow: var(--shadow-xs);
    transition: border-color 150ms, box-shadow 150ms;

    &:focus {
      border-color: var(--ring);
      box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.2);
    }

    &::placeholder { color: var(--muted-foreground); }

    /* -- Readonly state -------------------------------------- */
    /* :not(:disabled) is load-bearing: a disabled input ALSO matches
       :read-only, and this rule's specificity (class + pseudo + :not attr)
       outranks the plain :disabled below - without the exclusion, disabled
       controls would render with the readonly look (0.7/default). */
    &:read-only:not([type="file"], :disabled) {
      background: var(--muted);
      cursor: default;
      opacity: 0.7;

      &:focus {
        border-color: var(--input);
        box-shadow: var(--shadow-xs);
      }
    }

    /* Disabled = legible but inert: a muted surface and muted text inside
       the full-strength border - never an opacity fade that lets the box
       dissolve into the page. */
    &:disabled {
      background-color: var(--muted);
      color: var(--muted-foreground);
      box-shadow: none;
      cursor: not-allowed;
    }

    /* -- Invalid state --------------------------------------- */
    /* WHEN a field turns red: aria-invalid="true" always (the page decided).
       The browser's own verdict (:user-invalid, i.e. after the user left a
       changed field) only counts inside a <form> - a standalone text box has
       nothing to submit, so a half-typed value is never judged - and inside
       form[data-validate="submit"] only once the page has stamped
       data-submitted on the form (a submit attempt): check when the person
       is finished, not the instant they leave the box. */
    &:is([aria-invalid="true"], :user-invalid:is(form *):not(form[data-validate="submit"]:not([data-submitted]) *)) {
      border-color: var(--destructive);

      &:focus {
        border-color: var(--destructive);
        box-shadow: 0 0 0 2px oklch(from var(--destructive) l c h / 0.2);
      }
    }

    /* -- File input ------------------------------------------ */
    &[type="file"] {
      padding: 0;
      font-size: 0.875rem;

      &::file-selector-button {
        height: 100%;
        border: none;
        border-right: 1px solid var(--input);
        background: var(--muted);
        color: var(--foreground);
        font-size: 0.875rem;
        font-weight: 500;
        font-family: var(--font-sans);
        padding: 0 0.75rem;
        margin-right: 0.75rem;
        cursor: pointer;
        transition: background 150ms;

        &:hover { background: var(--accent); }
      }
    }

    /* -- Native in-field buttons ------------------------------
       The clear "×" of type="search" and the calendar/clock icon of the
       date/time types are clickable controls INSIDE the text field - without
       this they inherit the field's text cursor and look like more text to
       type into (the file picker's button above already points). */
    &::-webkit-search-cancel-button,
    &::-webkit-calendar-picker-indicator {
      cursor: pointer;
    }

    /* -- Sizes ----------------------------------------------- */
    &[data-size="xs"] { height: 1.75rem; padding: 0 0.5rem;   font-size: 0.75rem; }
    &[data-size="sm"] { height: 2rem;    padding: 0 0.625rem; font-size: 0.8125rem; }
    &[data-size="md"] { height: 2.25rem; padding: 0 0.75rem;  font-size: 0.875rem; }
    &[data-size="lg"] { height: 2.75rem; padding: 0 1rem;     font-size: 1rem; }
    &[data-size="xl"] { height: 3.25rem; padding: 0 1.25rem;  font-size: 1.125rem; }
  }

  /* -- Input group: icons, text and buttons inside the field ---
     The GROUP draws the field frame (border, radius, shadow, focus ring,
     invalid / disabled / readonly surfaces); the .input inside goes
     frameless and fills the rest. DOM order is the placement: an addon
     before the .input sits at the start, one after it at the end - so a
     trailing copy / show-password / clear button is just markup after the
     input, and any addon width works without hand-tuned padding. */
  .input-group {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    height: 2.25rem;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    box-shadow: var(--shadow-xs);
    color: var(--muted-foreground);
    font-size: 0.875rem;
    transition: border-color 150ms, box-shadow 150ms;

    & > .input {
      flex: 1;
      min-width: 0;
      height: 100%;
      border: none;
      border-radius: inherit;
      background: transparent;
      box-shadow: none;
      font-size: inherit;

      &:focus { box-shadow: none; }
      &:not(:first-child) { padding-inline-start: 0.5rem; }
      &:not(:last-child) { padding-inline-end: 0.5rem; }
    }

    &:has(> .input:focus) {
      border-color: var(--ring);
      box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.2);
    }

    &:has(> .input:is([aria-invalid="true"], :user-invalid:is(form *):not(form[data-validate="submit"]:not([data-submitted]) *))) {
      border-color: var(--destructive);

      &:has(> .input:focus) {
        box-shadow: 0 0 0 2px oklch(from var(--destructive) l c h / 0.2);
      }
    }

    /* readonly: the group carries the muted surface (the input's own
       readonly background would stop short of the addons) */
    &:has(> .input:read-only:not(:disabled)) {
      background: var(--muted);

      & > .input { background: transparent; }
      &:has(> .input:focus) {
        border-color: var(--input);
        box-shadow: var(--shadow-xs);
      }
    }

    &:has(> .input:disabled) {
      background: var(--muted);
      box-shadow: none;
      cursor: not-allowed;

      & > .input { background: transparent; }
    }

    /* decorative icon (inline <svg> or lucide <i>) */
    & > .input-group-icon {
      flex-shrink: 0;
      width: 1rem;
      height: 1rem;
      color: var(--muted-foreground);
      pointer-events: none;

      &:first-child { margin-inline-start: 0.75rem; }
      &:last-child { margin-inline-end: 0.75rem; }
    }

    /* static text: a unit, a protocol, a domain */
    & > .input-group-text {
      flex-shrink: 0;
      white-space: nowrap;
      color: var(--muted-foreground);
      user-select: none;

      &:first-child { margin-inline-start: 0.75rem; }
      &:last-child { margin-inline-end: 0.75rem; }
    }

    /* an in-field action: copy, show/hide, clear, open a picker */
    & > .input-group-button {
      flex-shrink: 0;
      display: inline-grid;
      place-items: center;
      box-sizing: border-box;
      height: calc(100% - 0.5rem);
      aspect-ratio: 1;
      padding: 0;
      border: none;
      border-radius: var(--radius-sm);
      background: transparent;
      color: var(--muted-foreground);
      cursor: pointer;
      transition: background-color 150ms, color 150ms;

      & svg { width: 1rem; height: 1rem; }
      /* icon swaps (copy -> check, eye -> eye-off): the UA's [hidden] rule
         only covers HTML elements, so a hidden <svg> needs its own */
      & svg[hidden] { display: none; }
      &:hover { background: var(--accent); color: var(--accent-foreground); }
      &:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
      &:disabled { cursor: not-allowed; background: transparent; color: var(--muted-foreground); }
      &:first-child { margin-inline-start: 0.25rem; }
      &:last-child { margin-inline-end: 0.25rem; }
      & + .input-group-button { margin-inline-start: 0.125rem; }
    }

    /* -- Sizes: the same ladder as .input, set on the group ------ */
    &[data-size="xs"] { height: 1.75rem; font-size: 0.75rem; }
    &[data-size="sm"] { height: 2rem;    font-size: 0.8125rem; }
    &[data-size="md"] { height: 2.25rem; font-size: 0.875rem; }
    &[data-size="lg"] { height: 2.75rem; font-size: 1rem; }
    &[data-size="xl"] { height: 3.25rem; font-size: 1.125rem; }
  }

  /* -- Auto-growing textarea --------------------------------- */
  textarea.input {
    field-sizing: content;
    min-height: 5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* -- Field description ------------------------------------- */
  .field-description {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    margin: 0.375rem 0 0;
  }

  /* -- Field error ------------------------------------------- */
  .field-error {
    font-size: 0.8125rem;
    color: var(--destructive);
    margin: 0.375rem 0 0;
  }

  /* -- Accessibility ---------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .input {
      transition: none;
    }

    .input[type="file"]::file-selector-button {
      transition: none;
    }
  }

  @media (prefers-contrast: more) {
    .input {
      border-width: 2px;
    }

    .input:disabled {
      border-color: var(--muted-foreground);
    }
  }

  @media (forced-colors: active) {
    .input {
      border-color: ButtonBorder;
      color: ButtonText;
      background: Field;
    }

    .input:focus {
      outline: 2px solid Highlight;
      outline-offset: 1px;
    }

    .input:disabled {
      opacity: 1;
      color: GrayText;
      border-color: GrayText;
    }

    .input:is([aria-invalid="true"], :user-invalid:is(form *):not(form[data-validate="submit"]:not([data-submitted]) *)) {
      border-color: LinkText;
    }

    .field-error {
      color: LinkText;
    }

    .input-group {
      border-color: ButtonBorder;
      background: Field;

      & > .input:focus { outline: none; }
      &:has(> .input:focus) { outline: 2px solid Highlight; outline-offset: 1px; }
      &:has(> .input:disabled) { border-color: GrayText; }
      & > .input-group-button { color: ButtonText; }
    }
  }
}

/* ── components/integration-item/integration-item.css ── */
/* -- Integration Item (website · Company) ---------------------------------
   Presents one compatible tool with its purpose and connection link - logo, name, category, what it does, and connect or manage. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-integration-item, .mk-integration-item *, .mk-integration-item ::before, .mk-integration-item ::after) { box-sizing: border-box; }

  .mk-integration-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);

    & > .btn { margin-block-start: auto; }
  }
  .mk-integration-item-logo {
    --mk-integration-color: var(--foreground);

    display: grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-lg);
    background: var(--mk-integration-color);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.12);
  }
  .mk-integration-item-body { display: grid; gap: 0.125rem; flex: 1; }
  .mk-integration-item-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; font-size: 1rem; font-weight: 600; }
  .mk-integration-item-category { color: var(--muted-foreground); font-size: 0.8125rem; }
  .mk-integration-item-desc { margin: 0.5rem 0 0; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.55; text-wrap: pretty; }

  .mk-integration-item[data-variant="compact"] {
    flex-direction: row;
    align-items: center;
    padding: 0.875rem 1rem;

    & .mk-integration-item-logo { width: 2.25rem; height: 2.25rem; font-size: 0.8125rem; }
    & .mk-integration-item-desc { display: none; }
    & > .btn { margin: 0; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-integration-item { border-color: CanvasText; }
    .mk-integration-item-logo { forced-color-adjust: none; }
  }
}

/* ── components/job-details/job-details.css ── */
/* -- Job Details (website · Company) --------------------------------------
   Describes one position's responsibilities, requirements, and benefits - with a summary that stays in view and the apply action. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-job-details, .mk-job-details *, .mk-job-details ::before, .mk-job-details ::after) { box-sizing: border-box; }

  .mk-job-details { container: mk-job-details / inline-size; width: 100%; }
  .mk-job-details-head { display: grid; gap: 0.75rem; padding-block-end: 2rem; border-block-end: 1px solid var(--border); }
  .mk-job-details-back { display: inline-flex; align-items: center; gap: 0.25rem; width: fit-content; color: var(--muted-foreground); font-size: 0.875rem; text-decoration: none;
    & svg { width: 1rem; height: 1rem; }
    &:hover { color: var(--foreground); }
  }
  .mk-job-details-title { margin: 0; font-size: clamp(1.75rem, 4cqi, 2.5rem); font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
  .mk-job-details-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .mk-job-details-layout { display: grid; gap: 2.5rem; padding-block-start: 2rem; }
  .mk-job-details-body {
    display: grid;
    gap: 2rem;
    min-width: 0;

    & section { display: grid; gap: 0.75rem; }
    & h2 { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
    & p { margin: 0; color: var(--muted-foreground); line-height: 1.7; text-wrap: pretty; }
  }
  .mk-job-details-list {
    display: grid;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;

    & li { position: relative; padding-inline-start: 1.75rem; line-height: 1.6; }
    & li::before {
      content: "";
      position: absolute;
      inset-inline-start: 0;
      top: 0.3em;
      width: 1.125rem;
      height: 1.125rem;
      border-radius: 50%;
      background: color-mix(in oklch, var(--primary) 12%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.625rem no-repeat;
    }
  }
  .mk-job-details-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;

    & li { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border-radius: var(--radius-lg); background: var(--muted); font-size: 0.9375rem; font-weight: 500; }
    & svg { flex: none; width: 1.25rem; height: 1.25rem; color: var(--primary); }
  }
  .mk-job-details-summary {
    display: grid;
    gap: 1.25rem;
    align-self: start;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);

    & h2 { margin: 0; font-size: 1rem; font-weight: 600; }
    & dl { display: grid; gap: 0.875rem; margin: 0; }
    & dl div { display: grid; gap: 0.125rem; }
    & dt { color: var(--muted-foreground); font-size: 0.8125rem; }
    & dd { margin: 0; font-weight: 500; }
    & .btn { width: 100%; }
  }

  @container mk-job-details (min-width: 52rem) {
    .mk-job-details-layout { grid-template-columns: minmax(0, 1fr) 18rem; gap: 4rem; }
    .mk-job-details-summary { position: sticky; top: 1.5rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-job-details-list li::before { background: CanvasText; forced-color-adjust: none; }
    .mk-job-details-summary { border-color: CanvasText; }
  }
}

/* ── components/job-item/job-item.css ── */
/* -- Job Item (website · Company) -----------------------------------------
   Previews one vacancy with its role, location, and employment type - as a list row or a card, grouped by department. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-job-item, .mk-job-item *, .mk-job-item ::before, .mk-job-item ::after) { box-sizing: border-box; }

  .mk-job-item {
    container: mk-job-item / inline-size;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    padding: 1.25rem 0.5rem;
    border-block-end: 1px solid var(--border);
    transition: background-color 150ms ease;

    &:hover { background: color-mix(in oklch, var(--accent) 50%, transparent); }
    & > svg { flex: none; width: 1.125rem; height: 1.125rem; color: var(--muted-foreground); transition: translate 150ms ease; }
    &:hover > svg { translate: 0.25rem 0; color: var(--foreground); }
  }
  .mk-job-item { position: relative; }
  .mk-job-item-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .mk-job-item-title a:focus-visible { outline: none; }
  .mk-job-item:has(.mk-job-item-title a:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
  /* zero specificity: any block rule may still position its controls */
  :where(.mk-job-item :is(button, input, select, label, .btn):not(.mk-job-item-title a)) { position: relative; z-index: 1; }
  .mk-job-item-main { flex: 1 1 18rem; display: grid; gap: 0.5rem; }
  .mk-job-item-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;

    & a { color: inherit; text-decoration: none; }
  }
  .mk-job-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--muted-foreground);
    font-size: 0.875rem;

    & li { display: inline-flex; align-items: center; gap: 0.375rem; }
    & svg { width: 0.875rem; height: 0.875rem; }
  }
  .mk-job-item-side { display: grid; justify-items: end; gap: 0.125rem; text-align: end; }
  .mk-job-item-salary { font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
  .mk-job-item-posted { color: var(--muted-foreground); font-size: 0.8125rem; }

  .mk-job-item[data-variant="card"] {
    flex-direction: column;
    align-items: stretch;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);

    &:hover { background: var(--card); border-color: color-mix(in oklch, var(--foreground) 25%, var(--border)); }
    & .mk-job-item-main { flex: none; }
    & .mk-job-item-side { justify-items: start; text-align: start; grid-auto-flow: column; justify-content: space-between; align-items: baseline; }
    & > svg { position: absolute; top: 1.5rem; right: 1.5rem; }
  }

  .mk-job-group { display: grid; gap: 0.25rem; }
  .mk-job-group-title { margin: 0 0 0.5rem; padding-inline: 0.5rem; color: var(--muted-foreground); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-job-item, .mk-job-item > svg { transition: none; }
    .mk-job-item:hover > svg { translate: none; }
  }

  @media (forced-colors: active) {
    .mk-job-item:has(.mk-job-item-title a:focus-visible) { outline-color: Highlight; }
  }
}

/* ── components/kbd/kbd.css ── */
/* -- Kbd ---------------------------------------------------------- */
/* Keyboard keys. Built on the native <kbd> element; a combination is a  */
/* <kbd> holding one <kbd> per key, which is what the HTML spec          */
/* prescribes — so the markup already says "these keys together".        */

@layer components {
  .kbd {
    --kbd-size: 1.375rem;

    display: inline-grid;
    place-items: center;
    min-width: var(--kbd-size);
    height: var(--kbd-size);
    padding-inline: 0.375rem;
    border: 1px solid var(--border);
    /* the bottom edge is thicker, which is what reads as a physical key */
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
    background: var(--muted);
    color: var(--muted-foreground);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;

    &[data-size="sm"] {
      --kbd-size: 1.125rem;
      padding-inline: 0.25rem;
      font-size: 0.6875rem;
    }

    &[data-size="lg"] {
      --kbd-size: 1.75rem;
      padding-inline: 0.5rem;
      font-size: 0.875rem;
    }
  }

  /* A key combination: an outer <kbd> holding one <kbd> per key. The outer
     element is not a key itself, so it keeps none of the key styling. */
  .kbd-group {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    vertical-align: middle;
    font-family: inherit;
    background: none;
    border: 0;
    padding: 0;
  }

  /* Optional "+" between keys. Absolutely placed in the gap so it never sits
     inside a key's box. */
  .kbd-group[data-separator] {
    gap: 0.875rem;

    & > .kbd + .kbd {
      position: relative;

      &::before {
        content: "+";
        position: absolute;
        inset-inline-start: -0.625rem;
        color: var(--muted-foreground);
        font-size: 0.6875rem;
        line-height: 1;
        pointer-events: none;
      }
    }
  }

  /* Inside a control - or on a tooltip's inverted surface - the key should
     not out-shout its label: it drops its own surface and borrows the
     text colour around it. */
  .btn .kbd,
  .command-item .kbd,
  .dropdown-item .kbd,
  .menubar-trigger .kbd,
  .tooltip .kbd {
    background: transparent;
    border-color: color-mix(in oklch, currentColor 25%, transparent);
    color: inherit;
    opacity: 0.75;
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer components {
    .kbd,
    .kbd *,
    .kbd::before,
    .kbd::after,
    .kbd *::before,
    .kbd *::after,
    .kbd-group,
    .kbd-group::before,
    .kbd-group::after {
      transition: none;
      animation: none;
    }
  }
}

@media (prefers-contrast: more) {
  @layer components {
    .kbd {
      border-color: var(--foreground);
      color: var(--foreground);
    }
  }
}

@media (forced-colors: active) {
  @layer components {
    .kbd {
      border-color: ButtonText;
      color: ButtonText;
      background: ButtonFace;
    }

    .kbd-group[data-separator] > .kbd + .kbd::before {
      color: ButtonText;
    }
  }
}

/* ── components/label/label.css ── */
/* -- Label component -------------------------------------------- */

@layer components {
  .label {
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-sans);
    line-height: 1;
    color: var(--foreground);
    display: block;
    margin-bottom: 0.375rem;
    cursor: default;

    /* Required - the adjacent control carries `required`: render the star.
       Pure CSS (no span to remember, nothing to desync); decorative only —
       the native attribute already conveys the requirement to AT. */
    &:has(+ input[required])::after,
    &:has(+ textarea[required])::after {
      content: ' \00a0*';
      color: var(--destructive);
      font-weight: 600;
    }

    /* Disabled - explicit attribute */
    &[data-disabled] {
      opacity: 0.7;
      cursor: not-allowed;
    }

    /* Disabled - auto-detect via adjacent disabled control */
    &:has(+ :disabled),
    &:has(+ [data-disabled]) {
      opacity: 0.7;
      cursor: not-allowed;
    }
  }

  /* -- Hint text (optional, required indicators) ----------- */
  .label-hint {
    font-weight: 400;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
  }

  /* -- Accessibility ---------------------------------------- */
  @media (prefers-contrast: more) {
    .label[data-disabled],
    .label:has(+ :disabled),
    .label:has(+ [data-disabled]) {
      opacity: 0.85;
    }
  }

  @media (forced-colors: active) {
    .label {
      color: LinkText;
    }

    .label[data-disabled],
    .label:has(+ :disabled),
    .label:has(+ [data-disabled]) {
      opacity: 1;
      color: GrayText;
    }
  }
}

/* ── components/load-more/load-more.css ── */
/* -- Load More (website · Search & Navigation) ----------------------------
   Loads another batch into the current collection - how many are shown, a progress bar and the button, with a busy state while loading. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-load-more, .mk-load-more *, .mk-load-more ::before, .mk-load-more ::after) { box-sizing: border-box; }

  .mk-load-more { display: grid; justify-items: center; gap: 0.75rem; width: 100%; padding-block: 1.5rem;
    & output { color: var(--muted-foreground); font-size: 0.875rem; }
    & output strong { color: var(--foreground); }
    & progress { width: min(100%, 14rem); height: 0.25rem; }
  }
  .mk-load-more-button {
    & .mk-load-more-spin { display: none; width: 1rem; height: 1rem; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: mk-load-more-spin 700ms linear infinite; }
    &[aria-busy="true"] { pointer-events: none; opacity: 0.75; }
    &[aria-busy="true"] .mk-load-more-spin { display: inline-block; }
    &[aria-busy="true"] svg { display: none; }
  }
  @keyframes mk-load-more-spin { to { rotate: 1turn; } }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-load-more-spin { animation-duration: 2.4s; }
  }

  @media (forced-colors: active) {
    .mk-load-more-spin { border-color: CanvasText; border-inline-end-color: transparent; }
  }
}

/* ── components/location-item/location-item.css ── */
/* -- Location Item (website · Events & Promotions) ------------------------
   Presents one physical location with its address and directions - the address, whether it is open now, the phone and a directions link. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-location-item, .mk-location-item *, .mk-location-item ::before, .mk-location-item ::after) { box-sizing: border-box; }

  .mk-location-item { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground); }
  .mk-location-item-media { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
  .mk-location-item-body { display: grid; gap: 0.625rem; padding: 1.25rem; }
  .mk-location-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
  .mk-location-item-name { margin: 0; font-size: 1.0625rem; font-weight: 600; }
  .mk-location-item-distance { color: var(--muted-foreground); font-size: 0.8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mk-location-item-address { color: var(--muted-foreground); font-size: 0.9375rem; font-style: normal; line-height: 1.55; }
  .mk-location-item-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;

    &::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px color-mix(in oklch, #16a34a 20%, transparent); }
    &[data-status="open"] { color: #15803d; }
    &[data-status="closed"] { color: var(--muted-foreground); }
    &[data-status="closed"]::before { background: var(--muted-foreground); box-shadow: none; }
  }
  .mk-location-item-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.25rem; }

  .mk-location-item[data-variant="compact"] {
    & .mk-location-item-body { grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; padding: 1rem 1.25rem; }
    & .mk-location-item-head, & .mk-location-item-address, & .mk-location-item-status { grid-column: 1; }
    & .mk-location-item-actions { grid-column: 2; grid-row: 1 / span 3; flex-direction: column; align-self: center; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-location-item { border-color: CanvasText; }
    .mk-location-item-status::before { forced-color-adjust: none; }
  }
}

/* ── components/location-map/location-map.css ── */
/* -- Location Map (website · Events & Promotions) -------------------------
   Displays one or more locations on an interactive map - pins open a card anchored to them, a list beside the map names every place. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-location-map, .mk-location-map *, .mk-location-map ::before, .mk-location-map ::after) { box-sizing: border-box; }

  .mk-location-map { container: mk-location-map / inline-size; display: grid; gap: 1rem; width: 100%; }
  .mk-location-map-canvas {
    position: relative;
    overflow: hidden;
    min-height: 20rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--muted);
  }
  .mk-location-map-art { position: absolute; inset: 0; width: 100%; height: 100%; }
  .mk-location-map-land { fill: color-mix(in oklch, var(--muted) 85%, var(--background)); }
  .mk-location-map-water { fill: color-mix(in oklab, oklch(0.7 0.1 230) 35%, var(--muted)); }
  .mk-location-map-park { fill: color-mix(in oklab, oklch(0.75 0.12 150) 30%, var(--muted)); }
  .mk-location-map-roads path { fill: none; stroke: var(--background); stroke-width: 10; stroke-linecap: round; }
  .mk-location-map-streets path { fill: none; stroke: color-mix(in oklch, var(--background) 70%, transparent); stroke-width: 4; }

  .mk-location-map-pin {
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 50%);
    translate: -50% -100%;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    filter: drop-shadow(0 2px 3px oklch(0 0 0 / 0.35));
    transition: scale 150ms ease;
    transform-origin: 50% 100%;

    & svg { width: 2.25rem; height: 2.25rem; fill: currentColor; stroke: var(--background); stroke-width: 1.5; }
    &:hover, &:focus-visible { scale: 1.15; }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 50%; }
  }
  .mk-location-map-popup {
    width: 15rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--popover);
    color: var(--popover-foreground);
    box-shadow: var(--shadow-lg);
    font-size: 0.875rem;

    & strong { display: block; font-size: 0.9375rem; }
    & address { margin-block: 0.25rem 0.5rem; color: var(--muted-foreground); font-style: normal; }
    & a { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--primary); font-weight: 600; text-decoration: none; }
    & a svg { width: 0.875rem; height: 0.875rem; }
  }
  @supports (position-anchor: --a) {
    /* anchored to its pin; without support the popover stays centered (its default) */
    .mk-location-map-popup { inset: auto; margin: 0 0 0.5rem; position-area: top; position-try-fallbacks: flip-block, flip-inline; }
  }

  .mk-location-map-list {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    align-content: start;

    & li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 0.75rem; padding: 0.75rem; border-radius: var(--radius-lg); }
    & li:hover { background: var(--accent); }
    & b { grid-row: span 2; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--primary); color: var(--primary-foreground); font-size: 0.75rem; }
    & strong { font-size: 0.9375rem; }
    & span { color: var(--muted-foreground); font-size: 0.8125rem; }
  }

  .mk-location-map[data-variant="full"] .mk-location-map-canvas { min-height: 28rem; }

  @container mk-location-map (min-width: 48rem) {
    .mk-location-map:not([data-variant]) > * { min-width: 0; }
    .mk-location-map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: 1rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-location-map-pin { transition: none; }
  }

  @media (forced-colors: active) {
    .mk-location-map-pin svg { fill: Highlight; stroke: Canvas; }
    .mk-location-map-popup { border-color: CanvasText; }
  }
}

/* ── components/locator-search/locator-search.css ── */
/* -- Locator Search (website · Events & Promotions) -----------------------
   Finds nearby locations using an address or current position - a search with "use my location", a radius and the results. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-locator-search, .mk-locator-search *, .mk-locator-search ::before, .mk-locator-search ::after) { box-sizing: border-box; }

  .mk-locator-search { container: mk-locator-search / inline-size; display: grid; gap: 1.25rem; width: 100%; }
  .mk-locator-search-form {
    display: grid;
    gap: 0.75rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);
  }
  .mk-locator-search-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; }
  .mk-locator-search-field { display: grid; gap: 0.375rem; flex: 1 1 14rem;
    & + .mk-locator-search-field { flex: 0 1 9rem; }
  }
  .mk-locator-search-query { position: relative;
    & svg { position: absolute; inset-inline-start: 0.75rem; top: 50%; translate: 0 -50%; width: 1rem; height: 1rem; color: var(--muted-foreground); pointer-events: none; }
    & .input { padding-inline-start: 2.25rem; }
  }
  .mk-locator-search-geo { display: inline-flex; align-items: center; gap: 0.375rem; width: fit-content; padding: 0; border: 0; background: none; color: var(--primary); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
    & svg { width: 1rem; height: 1rem; }
    &:hover { text-decoration: underline; text-underline-offset: 3px; }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
  }
  .mk-locator-search-summary { color: var(--muted-foreground); font-size: 0.875rem;
    & strong { color: var(--foreground); }
  }
  .mk-locator-search-results { display: grid; gap: 0.75rem; }

  .mk-locator-search[data-variant="inline"] .mk-locator-search-form { padding: 0.5rem; border-radius: 999px; box-shadow: var(--shadow-lg);
    & .mk-locator-search-row { flex-wrap: nowrap; align-items: center; }
    & .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    & .input, & .select { border-color: transparent; box-shadow: none; }
    & .btn { border-radius: 999px; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-locator-search-form { border-color: CanvasText; }
  }
}

/* ── components/login-form/login-form.css ── */
/* -- Login Form (website · Account & States) ------------------------------
   Authenticates a user with account credentials - email, password, "remember me" and a reset link, on a card, beside a picture, or plain. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-login-form, .mk-login-form *, .mk-login-form ::before, .mk-login-form ::after) { box-sizing: border-box; }

  .mk-login-form {
    container: mk-login-form / inline-size;
    display: grid;
    gap: 1.5rem;
    width: 100%;
    max-width: 24rem;
    margin-inline: auto;
    padding: 2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);
    box-shadow: var(--shadow-sm);
  }
  .mk-login-form-head { display: grid; justify-items: center; gap: 0.5rem; text-align: center;
    & > svg { width: 2rem; height: 2rem; color: var(--primary); }
    & h1, & h2 { margin: 0.25rem 0 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
    & p { margin: 0; color: var(--muted-foreground); font-size: 0.9375rem; text-wrap: pretty; }
  }
  .mk-login-form form { display: grid; gap: 1rem; }
  .mk-login-form .mk-auth-field { display: grid; gap: 0.375rem; }
  .mk-login-form-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.875rem;
    & a { color: var(--primary); font-weight: 500; text-decoration: none; }
    & a:hover { text-decoration: underline; text-underline-offset: 3px; }
  }
  .mk-login-form-foot { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; text-align: center;
    & a { color: var(--primary); font-weight: 600; text-decoration: none; }
    & a:hover { text-decoration: underline; text-underline-offset: 3px; }
  }
  .mk-login-form-label-row { display: flex; align-items: baseline; justify-content: space-between;
    & a { color: var(--primary); font-size: 0.8125rem; font-weight: 500; text-decoration: none; }
    & a:hover { text-decoration: underline; text-underline-offset: 3px; }
  }
  .mk-login-form .btn[type="submit"] { width: 100%; }

  .mk-login-form[data-variant="split"] {
    max-width: 56rem;
    padding: 0;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr);
  }
  .mk-login-form-panel { display: grid; gap: 1.5rem; padding: 2rem; }
  .mk-login-form-aside {
    position: relative;
    display: none;
    align-content: end;
    min-height: 100%;
    padding: 2rem;
    color: #fff;
    isolation: isolate;

    & img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
    &::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 30%, oklch(0.12 0.02 260 / 0.85)); }
    & blockquote { margin: 0; font-size: 1.125rem; line-height: 1.5; }
    & figcaption { margin-block-start: 0.75rem; font-size: 0.875rem; opacity: 0.8; }
  }
  @container mk-login-form (min-width: 44rem) {
    .mk-login-form-panel { padding: 3rem; }
    .mk-login-form-aside { display: grid; }
    .mk-login-form-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  }

  .mk-login-form[data-variant="minimal"] { border: 0; background: transparent; box-shadow: none; padding: 0; }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-login-form { border-color: CanvasText; }
  }
}

/* ── components/maintenance/maintenance.css ── */
/* -- Maintenance (website · Account & States) -----------------------------
   Explains temporary unavailability and provides status information - what is happening, when it ends, and where to follow; or a banner announcing it. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-maintenance, .mk-maintenance *, .mk-maintenance ::before, .mk-maintenance ::after) { box-sizing: border-box; }

  .mk-maintenance { display: grid; justify-items: center; gap: 1rem; width: 100%; max-width: 32rem; margin-inline: auto; padding: 3rem 1.5rem; text-align: center; }
  .mk-maintenance-icon { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: var(--radius-xl); background: color-mix(in oklch, #d97706 15%, transparent); color: #b45309;
    & svg { width: 1.75rem; height: 1.75rem; animation: mk-maintenance-turn 4s ease-in-out infinite; }
  }
  @keyframes mk-maintenance-turn { 0%, 60%, 100% { rotate: 0deg; } 70% { rotate: -25deg; } 85% { rotate: 15deg; } }
  .mk-maintenance-title { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
  .mk-maintenance-text { margin: 0; color: var(--muted-foreground); line-height: 1.6; text-wrap: pretty; }
  .mk-maintenance-eta { display: grid; gap: 0.5rem; width: 100%; max-width: 20rem; padding: 1rem; border-radius: var(--radius-lg); background: var(--muted); font-size: 0.875rem;
    & strong { font-size: 1rem; }
    & progress { width: 100%; height: 0.375rem; }
  }
  .mk-maintenance-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }

  .mk-maintenance[data-variant="banner"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.375rem 0.75rem;
    max-width: none;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-lg);
    background: color-mix(in oklch, #d97706 12%, transparent);
    color: #92400e;
    font-size: 0.875rem;
    text-align: center;

    & .mk-maintenance-icon { width: auto; height: auto; background: none; & svg { width: 1rem; height: 1rem; animation: none; } }
    & .mk-maintenance-text { color: inherit; }
    & a { color: inherit; font-weight: 600; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-maintenance-icon svg { animation: none; }
  }

  @media (forced-colors: active) {
    .mk-maintenance-icon, .mk-maintenance[data-variant="banner"] { border: 1px solid CanvasText; }
  }
}

/* ── components/marker/marker.css ── */
/* -- Marker component ------------------------------------------------ */
/* An inline status, system note, bordered row or labeled separator in a
   conversation ("Explored 4 files", "Today", "Conversation compacted").
   CSS only; a spinner / icon goes in .marker-icon, the words in
   .marker-content. */

@layer components {
  .marker {
    --_ic: currentColor;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    max-width: 100%;
    padding-block: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--muted-foreground);
    text-align: start;

    /* -- Variants -------------------------------------------------- */
    /* border: a full-width row with a rule under it */
    &[data-variant="border"] {
      width: 100%;
      padding-block: 0.5rem;
      border-block-end: 1px solid var(--border);
    }
    /* separator: a centered label between two rules ("Today") */
    &[data-variant="separator"] {
      width: 100%;
      justify-content: center;
      gap: 0.75rem;
      font-size: 0.75rem;
      font-weight: 500;

      &::before,
      &::after {
        content: "";
        flex: 1 1 0;
        min-width: 1rem;
        height: 1px;
        background: var(--border);
      }
    }

    /* stacked: the icon above the words, centered */
    &[data-orientation="vertical"] {
      flex-direction: column;
      gap: 0.375rem;
      text-align: center;
      &:not([data-variant="separator"], [data-variant="border"]) { margin-inline: auto; }
    }

    /* -- Tones: color the icon (the words stay quiet) -------------- */
    &[data-tone="success"] { --_ic: oklch(0.6 0.15 150); }
    &[data-tone="warning"] { --_ic: oklch(0.72 0.16 70); }
    &[data-tone="info"] { --_ic: oklch(0.6 0.16 250); }
    &[data-tone="destructive"] { --_ic: var(--destructive); }
    &[data-tone="primary"] { --_ic: var(--primary); }

    /* -- Sizes ------------------------------------------------------ */
    &[data-size="sm"] { font-size: 0.75rem; gap: 0.375rem; & .marker-icon { font-size: 0.875rem; } }
    &[data-size="lg"] { font-size: 0.875rem; & .marker-icon { font-size: 1.125rem; } }
  }

  .marker-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    color: var(--_ic);

    & svg { width: 1em; height: 1em; }
  }

  .marker-content {
    min-width: 0;
    text-wrap: pretty;
    overflow-wrap: anywhere;

    & strong, & b { font-weight: 600; color: var(--foreground); }
    & code { font-family: var(--font-mono); font-size: 0.92em; color: var(--foreground); }
  }

  /* -- Shimmer: streaming text ("Thinking…") - a light band sweeps
     across the words (background-clip: text) ------------------------ */
  .marker-content[data-shimmer] {
    color: transparent;
    background: linear-gradient(
      90deg,
      var(--muted-foreground) 0%,
      var(--muted-foreground) 35%,
      var(--foreground) 50%,
      var(--muted-foreground) 65%,
      var(--muted-foreground) 100%
    ) 0 0 / 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: marker-shimmer 1.8s linear infinite;
  }
  @keyframes marker-shimmer {
    from { background-position: 100% 0; }
    to { background-position: 0% 0; }
  }

  /* -- Interactive: the whole marker as a link or a button ----------- */
  :is(a, button).marker {
    appearance: none;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    text-decoration: none;
    cursor: pointer;
    transition: color 150ms ease;

    &:hover { color: var(--foreground); & .marker-content { text-decoration: underline; text-underline-offset: 2px; } }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
    &:disabled { opacity: 0.5; pointer-events: none; }
  }
  :is(a, button).marker[data-variant="border"] { border-radius: 0; border-block-end: 1px solid var(--border); }
}

@media (prefers-reduced-motion: reduce) {
  @layer components {
    .marker-content[data-shimmer] { animation: none; color: var(--muted-foreground); background: none; }
    :is(a, button).marker { transition: none; }
  }
}

@media (prefers-contrast: more) {
  @layer components {
    .marker { color: var(--foreground); }
    .marker[data-variant="separator"]::before,
    .marker[data-variant="separator"]::after { background: var(--foreground); }
  }
}

@media (forced-colors: active) {
  @layer components {
    .marker { color: CanvasText; }
    .marker-icon { color: CanvasText; }
    .marker[data-variant="separator"]::before,
    .marker[data-variant="separator"]::after { background: CanvasText; }
    .marker-content[data-shimmer] { color: CanvasText; background: none; }
    :is(a, button).marker { color: LinkText; }
  }
}

/* ── components/media-gallery/media-gallery.css ── */
/* -- Media Gallery (website · Media) --------------------------------------
   Coordinates a collection of images with shared viewing controls - switch between grid, masonry and filmstrip, and open a slideshow of every picture. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-media-gallery, .mk-media-gallery *, .mk-media-gallery ::before, .mk-media-gallery ::after) { box-sizing: border-box; }

  .mk-media-gallery { container: mk-media-gallery / inline-size; display: grid; gap: 1.25rem; width: 100%; }
  .mk-media-gallery-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem;
    & h2 { margin: 0; font-size: 1.25rem; font-weight: 600; }
    & > span { color: var(--muted-foreground); font-size: 0.875rem; }
  }
  .mk-media-gallery-tools { display: flex; gap: 0.5rem; margin-inline-start: auto; }
  .mk-media-gallery-views {
    display: inline-flex;
    padding: 0.1875rem;
    border-radius: var(--radius-md);
    background: var(--muted);

    & label { position: relative; display: grid; place-items: center; width: 2rem; height: 1.75rem; border-radius: calc(var(--radius-md) - 2px); color: var(--muted-foreground); cursor: pointer; }
    & input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
    & svg { width: 1rem; height: 1rem; }
    & label:has(:checked) { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-xs); }
    & label:has(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 1px; }
  }

  .mk-media-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;

    & figure { margin: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--muted); }
    & img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
  }
  .mk-media-gallery:has(input[value="masonry"]:checked) .mk-media-gallery-grid {
    display: block;
    columns: 11rem;
    column-gap: 0.625rem;

    & li { margin-block-end: 0.625rem; break-inside: avoid; }
    & img { aspect-ratio: auto; height: auto; }
  }
  .mk-media-gallery:has(input[value="strip"]:checked) .mk-media-gallery-grid {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-block-end: 0.5rem;

    & li { flex: 0 0 min(70%, 18rem); scroll-snap-align: start; }
    & img { aspect-ratio: 4 / 3; }
  }

  /* the slideshow */
  .mk-media-gallery-viewer {
    width: min(94vw, 64rem);
    max-width: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    overflow: visible;

    &::backdrop { background: oklch(0.08 0.01 260 / 0.92); }
  }
  .mk-media-gallery-viewer-inner { position: relative; display: grid; gap: 1rem;
    & form { position: absolute; top: -3rem; right: 0; }
  }
  .mk-media-gallery-track {
    display: flex;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    list-style: none;
    border-radius: var(--radius-lg);

    & li { flex: 0 0 100%; scroll-snap-align: center; display: grid; gap: 0.75rem; }
    & img { display: block; width: 100%; max-height: 75vh; object-fit: contain; }
    & p { margin: 0; text-align: center; color: oklch(1 0 0 / 0.75); font-size: 0.875rem; }
    &:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
  }
  .mk-media-gallery-close { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 999px; background: oklch(1 0 0 / 0.15); color: #fff; cursor: pointer;
    & svg { width: 1.125rem; height: 1.125rem; }
    &:hover { background: oklch(1 0 0 / 0.25); }
    &:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  }
  .mk-media-gallery-hint { margin: 0; text-align: center; color: oklch(1 0 0 / 0.55); font-size: 0.75rem; }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-media-gallery-track, .mk-media-gallery-grid { scroll-behavior: auto; }
  }

  @media (forced-colors: active) {
    .mk-media-gallery-views label:has(:checked) { outline: 2px solid Highlight; }
  }
}

/* ── components/menubar/menubar.css ── */
/* -- Menubar component ----------------------------------------------- */
/* A horizontal bar of menu triggers - File, Edit, View - each opening a
   dropdown menu (dropdown.css / dropdown.js, submenus included). The bar
   is the menubar; menubar.js adds moving between the menus. */

@layer components {
  .menubar {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    width: fit-content;
    max-width: 100%;
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--background);
    box-shadow: var(--shadow-2xs);

    &[data-variant="ghost"] { border-color: transparent; box-shadow: none; padding: 0; }
    &[data-variant="muted"] { background: var(--muted); border-color: transparent; box-shadow: none; }

    /* -- Sizes: the triggers scale (the menus keep their own data-size) */
    &[data-size="sm"] .menubar-trigger { height: 1.625rem; padding-inline: 0.5rem; font-size: 0.8125rem; }
    &[data-size="lg"] .menubar-trigger { height: 2.25rem; padding-inline: 0.875rem; font-size: 0.9375rem; }
  }

  .menubar-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 1.875rem;
    padding-inline: 0.625rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--foreground);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: default;
    user-select: none;
    outline: none;

    & svg { width: 1rem; height: 1rem; flex-shrink: 0; }
    &:hover, &:focus-visible { background-color: var(--accent); color: var(--accent-foreground); }
    &[aria-expanded="true"] { background-color: var(--accent); color: var(--accent-foreground); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
    &:disabled, &[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
  }

  /* the menus hang just under the bar */
  .menubar > .dropdown-content { margin-top: 0.5rem; }
  .menubar:dir(rtl) > .dropdown-content:not(.dropdown-sub-content) { left: auto; right: anchor(right); }
}

@media (prefers-contrast: more) {
  @layer components {
    .menubar { border-color: var(--foreground); }
    .menubar-trigger[aria-expanded="true"] { outline: 1px solid var(--foreground); }
  }
}

@media (forced-colors: active) {
  @layer components {
    .menubar { border-color: CanvasText; }
    .menubar-trigger:is(:hover, :focus-visible, [aria-expanded="true"]) { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  }
}

/* ── components/mermaid/mermaid.css ── */
/* -- Mermaid component ---------------------------------------------- */

@layer components {
  @keyframes mermaid-wait { from { background-position: 150% 0; } to { background-position: -50% 0; } }
  @keyframes mermaid-reveal { to { color: var(--muted-foreground); user-select: auto; } }

  /* figure.mermaid-diagram > pre.mermaid (the source) [+ .mermaid-output,
     the rendered SVG, + output.mermaid-error]. Without JavaScript - or
     before the renderer arrives - the source reads as a code block; once
     rendered, the SVG replaces it visually (the source stays in the DOM:
     every re-render starts from it). Everything inside the SVG is themed
     through Mermaid's themeVariables (mermaid.ts), not from here. */
  .mermaid-diagram {
    margin: 0;
    display: grid;
    align-content: start;
    gap: 0.75rem;
    min-width: 0;
    max-width: 100%;

    & > pre.mermaid {
      margin: 0;
      padding: 1rem;
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background-color: var(--muted);
      color: var(--muted-foreground);
      font-family: var(--font-mono);
      font-size: 0.8125rem;
      line-height: 1.6;
      white-space: pre;
      tab-size: 2;
    }

    /* rendered: the SVG takes the stage, the source stays for re-renders */
    &[data-state="rendered"] > pre.mermaid { display: none; }

    /* no flash of the source: before the first render (not initialized yet,
       or pending) the source box is a quiet placeholder - same box, text
       hidden, a soft shimmer. Without scripting nothing hides; an error
       shows the source; and if no renderer ever arrives the text appears
       after 4s anyway. */
    @media (scripting: enabled) {
      &:is(:not([data-init]), [data-state="pending"]) > pre.mermaid {
        color: transparent;
        user-select: none;
        background-image: linear-gradient(90deg, transparent, color-mix(in oklch, var(--foreground) 6%, transparent), transparent);
        background-size: 200% 100%;
        animation: mermaid-wait 1.4s linear infinite, mermaid-reveal 0s 4s forwards;
      }
    }

    & > figcaption {
      font-size: 0.8125rem;
      color: var(--muted-foreground);
      text-align: center;
      text-wrap: balance;
    }
  }

  /* the SVG scales down to the column, never up past its natural size;
     very wide diagrams scroll inside the figure instead of the page */
  .mermaid-output {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    display: flex;
    justify-content: center;

    & svg {
      display: block;
      max-width: 100%;
      height: auto;
    }
  }

  /* a malformed diagram: the source stays, the message is token-styled */
  .mermaid-error {
    display: block;
    padding: 0.625rem 0.875rem;
    border: 1px solid color-mix(in oklch, var(--destructive) 45%, transparent);
    border-radius: var(--radius-md);
    background-color: color-mix(in oklch, var(--destructive) 8%, var(--background));
    color: var(--destructive);
    /* the parse error keeps its lines and a caret under the position - a
       monospace face without ligatures keeps the caret aligned */
    font-family: var(--font-mono);
    font-variant-ligatures: none;
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  /* -- Accessibility / print ------------------------------------------ */
  @media (forced-colors: active) {
    .mermaid-output svg { forced-color-adjust: auto; }
    .mermaid-error { border-color: CanvasText; color: CanvasText; }
  }

  @media print {
    .mermaid-output { overflow: visible; }
    .mermaid-diagram { break-inside: avoid; }
  }

  /* no shimmer for reduced motion - the 4s fallback reveal stays */
  @media (prefers-reduced-motion: reduce) {
    .mermaid-diagram > pre.mermaid { animation-name: none, mermaid-reveal; }
  }
}

/* ── components/message/message.css ── */
/* -- Message component ----------------------------------------------- */
/* One row of a conversation: an avatar beside a column of header (name,
   time), the message surface (a .bubble, an attachment, anything) and a
   footer (status, actions). Start = the other side, end = you. CSS only. */

@layer components {
  .message {
    --_av: 2rem;
    --_gap: 0.5rem;
    --_foot: 1.75rem;
    display: flex;
    align-items: flex-end;
    gap: var(--_gap);
    width: 100%;
    min-width: 0;

    &[data-align="end"] { flex-direction: row-reverse; }

    /* -- Sizes: avatar column and the text scale ------------------- */
    &[data-size="sm"] { --_av: 1.5rem; --_gap: 0.375rem; }
    &[data-size="lg"] { --_av: 2.5rem; --_gap: 0.75rem; }
  }

  /* The avatar slot keeps its column even when empty (a placeholder keeps
     consecutive messages aligned) and sits level with the surface's
     bottom edge - lifted above the footer when there is one. */
  .message-avatar {
    display: flex;
    flex: none;
    justify-content: center;
    width: var(--_av);

    & > .avatar { width: var(--_av); height: var(--_av); }
  }
  .message:has(> .message-content > .message-footer) > .message-avatar {
    margin-block-end: calc(var(--_foot) + 0.125rem);
  }
  /* no avatar column at all: data-avatar="none" on the message */
  .message[data-avatar="none"] > .message-avatar { display: none; }

  .message-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    min-width: 0;
    max-width: min(80%, 40rem);

    /* the surface fills up to the column; the column carries the 80% cap */
    & > .bubble { max-width: 100%; }
    & > .bubble[data-variant="ghost"] { width: auto; }
  }
  .message[data-align="end"] > .message-content { align-items: flex-end; }
  /* an assistant's ghost reply runs the full width */
  .message-content:has(> .bubble[data-variant="ghost"]) { max-width: 100%; flex: 1; }
  /* its header lines up with the unframed text */
  .message-content:has(> .bubble[data-variant="ghost"]) > :is(.message-header, .message-footer) { padding-inline: 0; }

  .message-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding-inline: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--muted-foreground);
  }
  .message-name {
    font-weight: 600;
    color: var(--foreground);
  }
  .message-time {
    font-variant-numeric: tabular-nums;
    color: var(--muted-foreground);
  }

  .message-footer {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    height: var(--_foot);
    padding-inline: 0.25rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    white-space: nowrap;

    & svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
    & .btn svg { width: 1rem; height: 1rem; }
    & .btn { color: var(--muted-foreground); }
    & .btn:hover { color: var(--foreground); }
  }

  /* data-reveal="hover": the footer's actions appear on hover / focus of
     the message; always shown where there is no hover (touch) */
  @media (hover: hover) {
    .message-footer[data-reveal="hover"] {
      opacity: 0;
      transition: opacity 150ms ease;
    }
    .message:is(:hover, :focus-within) > .message-content > .message-footer[data-reveal="hover"] { opacity: 1; }
  }

  /* -- Status: delivery ticks in the footer --------------------------- */
  .message-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    &[data-status="read"] { color: oklch(0.6 0.16 250); }
    &[data-status="failed"] { color: var(--destructive); }
  }

  /* -- Attachment: a file card as the message surface ------------------ */
  .message-attachment {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-sizing: border-box;
    width: 16rem;
    max-width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    color: var(--card-foreground);
    font-size: 0.8125rem;
    text-decoration: none;

    &:is(a) { cursor: pointer; transition: background-color 150ms ease; }
    &:is(a):hover { background: var(--accent); }
    &:is(a):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  }
  .message-attachment-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    background: var(--muted);
    color: var(--muted-foreground);
    & svg { width: 1.125rem; height: 1.125rem; }
  }
  .message-attachment-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
  }
  .message-attachment-name { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
  .message-attachment-meta { font-size: 0.75rem; color: var(--muted-foreground); }

  /* -- Group: consecutive messages of one sender ---------------------- */
  .message-group {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;

    /* one avatar per group: only the last message shows it (the others
       keep the empty column, so everything lines up) */
    & > .message:not(:last-child) > .message-avatar > * { visibility: hidden; }
    /* one header per group: the first message's */
    & > .message:not(:first-child) > .message-content > .message-header { display: none; }
    /* the joined bubble corners tighten, as in a .bubble-group */
    & > .message:not([data-align="end"]) {
      &:not(:last-child) > .message-content > .bubble > .bubble-content { border-end-start-radius: var(--_rs); }
      &:not(:first-child) > .message-content > .bubble > .bubble-content { border-start-start-radius: var(--_rs); }
    }
    & > .message[data-align="end"] {
      &:not(:last-child) > .message-content > .bubble > .bubble-content { border-end-end-radius: var(--_rs); }
      &:not(:first-child) > .message-content > .bubble > .bubble-content { border-start-end-radius: var(--_rs); }
    }
  }

  /* -- A conversation: rows of messages, groups and markers ------------- */
  .message-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer components {
    .message-footer[data-reveal="hover"], .message-attachment { transition: none; }
  }
}

@media (prefers-contrast: more) {
  @layer components {
    .message-header, .message-footer, .message-time, .message-attachment-meta { color: var(--foreground); }
  }
}

@media (forced-colors: active) {
  @layer components {
    .message-attachment { border-color: CanvasText; }
    .message-status[data-status] { color: CanvasText; }
  }
}

/* ── components/mockup-code/mockup-code.css ── */
/* -- Mockup Code component --------------------------------------------- */
/* A terminal / code window: a stack of <pre> lines under window chrome.
   Prompts, line numbers and the cursor are CSS-generated, so selecting and
   copying the text never picks them up. CSS only. */

@layer components {
  .mockup-code {
    /* surface + the line tones, retuned per variant for its contrast */
    --_bg: oklch(0.21 0.006 286);
    --_fg: oklch(0.94 0 0);
    --_dim: oklch(0.68 0.01 286);
    --_success: oklch(0.8 0.16 150);
    --_warning: oklch(0.84 0.15 80);
    --_info: oklch(0.76 0.13 245);
    --_destructive: oklch(0.72 0.18 25);
    --_px: 1.25rem;

    position: relative;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    padding-block: 1.25rem 1rem;
    border-radius: var(--radius-xl);
    background: var(--_bg);
    color: var(--_fg);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.7;
    /* code shows what is typed: no => → ⇒ or <!-- → arrow ligatures */
    font-variant-ligatures: none;
    text-align: start;
    /* code reads left to right even inside an RTL page */
    direction: ltr;
    unicode-bidi: isolate;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    /* one column as wide as the longest line (at least the window): every
       line - and its highlight band - spans the same width while the
       window scrolls sideways */
    display: grid;
    grid-template-columns: minmax(100%, max-content);

    /* -- Window chrome: three dots; data-chrome="mac" colours them,
       data-chrome="none" drops the bar ---------------------------- */
    &::before {
      content: "";
      display: block;
      width: 0.75rem;
      height: 0.75rem;
      margin-inline-start: var(--_px);
      margin-block-end: 1rem;
      border-radius: 9999px;
      color: var(--_dim);
      background: currentColor;
      opacity: 0.45;
      box-shadow: 1.25rem 0 0 currentColor, 2.5rem 0 0 currentColor;
    }
    &[data-chrome="mac"]::before {
      opacity: 1;
      background: oklch(0.68 0.2 25);
      box-shadow: 1.25rem 0 0 oklch(0.82 0.16 85), 2.5rem 0 0 oklch(0.74 0.17 145);
    }
    &[data-chrome="none"] { padding-block-start: 1rem; }
    &[data-chrome="none"]::before { display: none; }

    /* -- A title in the bar: data-title="bash - 80x24" -------------- */
    &[data-title]:not([data-chrome="none"])::after {
      content: attr(data-title);
      position: absolute;
      inset-block-start: 0.75rem;
      inset-inline: 4.5rem;
      font-family: var(--font-sans);
      font-size: 0.75rem;
      line-height: 1.25rem;
      text-align: center;
      color: var(--_dim);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      pointer-events: none;
    }

    /* -- Lines -------------------------------------------------- */
    & > pre {
      box-sizing: border-box;
      margin: 0;
      padding: 0 var(--_px);
      border: 0;
      border-radius: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      white-space: pre;
    }
    & > pre > code {
      padding: 0;
      border: 0;
      background: none;
      color: inherit;
      font: inherit;
    }

    /* the prompt: $, >, ~, a number - generated, never selected or copied */
    & > pre[data-prefix]::before,
    &[data-numbers] > pre::before {
      display: inline-block;
      width: 2ch;
      margin-inline-end: 1.25ch;
      text-align: end;
      color: var(--_dim);
      user-select: none;
    }
    & > pre[data-prefix]::before { content: attr(data-prefix); }

    /* data-numbers on the window: every line without its own prefix is
       numbered (CSS counters - nothing to keep in sync) */
    &[data-numbers] { counter-reset: mockup-line; }
    &[data-numbers] > pre { counter-increment: mockup-line; }
    &[data-numbers] > pre:not([data-prefix])::before { content: counter(mockup-line); }

    /* -- Tones: output lines --------------------------------------- */
    & > pre[data-tone] { color: var(--_tone); }
    & > pre[data-tone="success"] { --_tone: var(--_success); }
    & > pre[data-tone="warning"] { --_tone: var(--_warning); }
    & > pre[data-tone="info"] { --_tone: var(--_info); }
    & > pre[data-tone="destructive"] { --_tone: var(--_destructive); }
    & > pre[data-tone="muted"] { --_tone: var(--_dim); }

    /* -- Highlighted line: a tinted band in the line's tone (or the
       text colour); data-highlight="solid" fills it -------------- */
    & > pre[data-highlight] {
      background: color-mix(in oklch, var(--_tone, var(--_fg)) 16%, transparent);
    }
    & > pre[data-highlight="solid"] {
      background: var(--_tone, var(--_fg));
      color: var(--_bg);
      &::before { color: inherit; opacity: 0.7; }
    }

    /* -- Diff: data-diff="add" / "remove" lines ----------------------
       The sign sits in its own column before the code (generated, never
       copied), so numbers and prompts keep theirs; every line of a diff
       window gets the column, so context lines line up. Word changes
       inside a line are native <ins> / <del>. */
    &:where(:has(> pre[data-diff])) > pre > code::before {
      content: "";
      display: inline-block;
      width: 2ch;
      user-select: none;
    }
    & > pre[data-diff="add"] { --_tone: var(--_success); }
    & > pre[data-diff="remove"] { --_tone: var(--_destructive); }
    & > pre[data-diff] {
      color: var(--_tone);
      background: color-mix(in oklch, var(--_tone) 14%, transparent);
    }
    & > pre[data-diff="add"] > code::before { content: "+"; }
    & > pre[data-diff="remove"] > code::before { content: "-"; }
    & > pre > code :is(ins, del) {
      border-radius: 0.2em;
      color: inherit;
      text-decoration: none;
    }
    & > pre > code ins { background: color-mix(in oklch, var(--_success) 32%, transparent); }
    & > pre > code del {
      background: color-mix(in oklch, var(--_destructive) 32%, transparent);
      text-decoration: line-through;
    }
    /* data-strike (and the animated diff) strikes removed lines through */
    &:is([data-strike], [data-animate]) > pre[data-diff="remove"] {
      opacity: 0.8;
      & > code {
        text-decoration: line-through;
        text-decoration-color: color-mix(in oklch, var(--_tone) 70%, transparent);
      }
    }

    /* -- Animated diff: removed lines turn red and strike through, added
       lines slide in green, one after another; context lines stay.
       Replays whenever data-animate is set again. ------------------ */
    &[data-animate] > pre {
      --_stagger: var(--mockup-code-stagger, 140ms);
      --_delay: calc(var(--mockup-code-delay, 300ms) + var(--_i, 0) * var(--_stagger));
    }
    &[data-animate] > pre[data-diff="remove"] {
      animation: mockup-code-remove 450ms ease-out var(--_delay) both;
      & > code { animation: mockup-code-strike 450ms ease-out var(--_delay) both; }
    }
    &[data-animate] > pre[data-diff="add"] {
      animation: mockup-code-add 450ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--_delay) both;
    }

    /* -- Cursor: a blinking block after the line --------------------- */
    & > pre[data-cursor] > code::after {
      content: "";
      display: inline-block;
      width: 0.6em;
      height: 1.15em;
      margin-inline-start: 0.1em;
      vertical-align: text-bottom;
      background: currentColor;
      animation: mockup-code-cursor 1s steps(1) infinite;
    }

    /* -- Wrap instead of scrolling --------------------------------- */
    &[data-wrap] { grid-template-columns: minmax(0, 1fr); }
    &[data-wrap] > pre {
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      padding-inline-start: calc(var(--_px) + 3.25ch);
      text-indent: -3.25ch;
    }
    &[data-wrap] > pre:not([data-prefix]):not(:where([data-numbers] > pre)) {
      padding-inline-start: var(--_px);
      text-indent: 0;
    }

    /* -- Variants (surfaces) --------------------------------------- */
    &[data-variant="muted"],
    &[data-variant="outline"] {
      --_fg: var(--foreground);
      --_dim: var(--muted-foreground);
      --_success: oklch(0.52 0.14 150);
      --_warning: oklch(0.58 0.14 70);
      --_info: oklch(0.52 0.14 250);
      --_destructive: var(--destructive);
    }
    &[data-variant="muted"] { --_bg: var(--muted); }
    &[data-variant="outline"] {
      --_bg: var(--card);
      border: 1px solid var(--border);
    }
    &[data-variant="primary"] {
      --_bg: var(--primary);
      --_fg: var(--primary-foreground);
      --_dim: color-mix(in oklch, var(--primary-foreground) 65%, var(--primary));
    }

    /* -- Sizes ------------------------------------------------------ */
    &[data-size="sm"] { font-size: 0.75rem; --_px: 1rem; padding-block: 1rem 0.75rem; }
    &[data-size="lg"] { font-size: 1rem; --_px: 1.5rem; }
  }

  @keyframes mockup-code-cursor {
    50% { opacity: 0; }
  }
  /* each keyframe starts neutral and ends on the line's own diff styles */
  @keyframes mockup-code-remove {
    from { color: var(--_fg); background: transparent; opacity: 1; }
  }
  @keyframes mockup-code-strike {
    from { text-decoration-color: transparent; }
  }
  @keyframes mockup-code-add {
    from { color: var(--_fg); background: transparent; opacity: 0; translate: -1.5rem 0; }
  }

  /* the line's position drives the stagger: sibling-index() where the
     browser has it, a counted fallback for the first 24 lines elsewhere */
  @supports (order: sibling-index()) {
    .mockup-code[data-animate] > pre { --_i: sibling-index(); }
  }
  @supports not (order: sibling-index()) {
    .mockup-code[data-animate] > pre:nth-child(2) { --_i: 2; }
    .mockup-code[data-animate] > pre:nth-child(3) { --_i: 3; }
    .mockup-code[data-animate] > pre:nth-child(4) { --_i: 4; }
    .mockup-code[data-animate] > pre:nth-child(5) { --_i: 5; }
    .mockup-code[data-animate] > pre:nth-child(6) { --_i: 6; }
    .mockup-code[data-animate] > pre:nth-child(7) { --_i: 7; }
    .mockup-code[data-animate] > pre:nth-child(8) { --_i: 8; }
    .mockup-code[data-animate] > pre:nth-child(9) { --_i: 9; }
    .mockup-code[data-animate] > pre:nth-child(10) { --_i: 10; }
    .mockup-code[data-animate] > pre:nth-child(11) { --_i: 11; }
    .mockup-code[data-animate] > pre:nth-child(12) { --_i: 12; }
    .mockup-code[data-animate] > pre:nth-child(13) { --_i: 13; }
    .mockup-code[data-animate] > pre:nth-child(14) { --_i: 14; }
    .mockup-code[data-animate] > pre:nth-child(15) { --_i: 15; }
    .mockup-code[data-animate] > pre:nth-child(16) { --_i: 16; }
    .mockup-code[data-animate] > pre:nth-child(n + 17) { --_i: 17; }
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer components {
    .mockup-code > pre[data-cursor] > code::after { animation: none; }
    /* the diff shows its end state at once */
    .mockup-code[data-animate] > pre,
    .mockup-code[data-animate] > pre > code { animation: none; }
  }
}

@media (prefers-contrast: more) {
  @layer components {
    .mockup-code { --_dim: var(--_fg); border: 1px solid var(--_fg); }
  }
}

@media (forced-colors: active) {
  @layer components {
    .mockup-code { border: 1px solid CanvasText; }
    .mockup-code > pre[data-highlight] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
    /* the +/- signs carry the diff; <ins>/<del> get system marks */
    .mockup-code > pre > code :is(ins, del) { outline: 1px solid CanvasText; }
  }
}

/* ── components/motion/motion.css ── */
/* -- Motion component -------------------------------------------------
   The shared entrance-animation vocabulary: CSS @keyframes are the single
   source of truth (geometry, easing, defaults, reduced-motion), driven either
   declaratively via [data-df-entrance] or imperatively through the JS
   controller `ddf$.entrance(el, effect, opts)` (src/shared/motion.ts - same
   functions under df$.shadcn.entrance). The JS never defines keyframes; it
   only triggers/retriggers, overrides timing vars and owns the
   finished/cancel lifecycle via the platform's CSSAnimation objects.

   Why animations (not transitions): they run deterministically when the
   attribute first applies - including on freshly inserted DOM - and they
   replay cleanly (cancel → play). Transitions need a rendered "from" state
   and never fire on initial application (the reason the first vocabulary
   demo showed a static grid).

   Why animation-composition: add - transform/filter keyframes COMPOSE with
   any pre-existing transform/filter on the element instead of replacing it,
   so entrances are safe on arbitrarily styled DOM (no transform inspection
   or reconstruction). The paired fade runs with `replace`.

   Limits: non-replaced inline boxes (display:inline spans) are not
   transformable per CSS - this is deliberate and NOT worked around (silent
   display changes would alter text wrapping). Wrap inline content or let the
   caller promote it. */

@layer components {
  /* timing tunables - :root defaults so ANY ancestor (deck mount, container,
     inline style) can override by ordinary cascade; inline styles win last */
  :root {
    --df-motion-duration: 1500ms;
    --df-motion-delay: 0ms;
    --df-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --df-motion-distance: 24px;
    --df-motion-scale-in: 0.9;
    --df-motion-scale-out: 1.1;
    --df-motion-blur: 12px;
    --df-motion-angle: 12deg;
    --df-motion-spin: -0.5turn;
    /* JS writes the element's CURRENT computed opacity here, so fading an
       opacity:.6 element ends at .6 - never brightens content it doesn't own */
    --df-motion-base-opacity: 1;
  }

  /* one animation declaration, parameterized entirely by the vars above */
  [data-df-entrance] {
    animation-duration: var(--df-motion-duration);
    animation-delay: var(--df-motion-delay);
    animation-timing-function: var(--df-motion-ease);
    animation-fill-mode: both;

    /* transform-channel entrances pair with the fade (composition: add keeps
       the element's own transform underneath); clip-path entrances need no
       fade - the clip alone reveals the content */
    &[data-df-entrance="up"] { animation-name: df-enter-up, df-enter-fade; animation-composition: add, replace; }
    &[data-df-entrance="down"] { animation-name: df-enter-down, df-enter-fade; animation-composition: add, replace; }
    &[data-df-entrance="left"] { animation-name: df-enter-left, df-enter-fade; animation-composition: add, replace; }
    &[data-df-entrance="right"] { animation-name: df-enter-right, df-enter-fade; animation-composition: add, replace; }
    &[data-df-entrance="zoom"] { animation-name: df-enter-zoom, df-enter-fade; animation-composition: add, replace; }
    &[data-df-entrance="zoom-out"] { animation-name: df-enter-zoom-out, df-enter-fade; animation-composition: add, replace; }
    &[data-df-entrance="pop"] { animation-name: df-enter-pop, df-enter-fade; animation-composition: add, replace; }
    &[data-df-entrance="spin"] { animation-name: df-enter-spin, df-enter-fade; animation-composition: add, replace; }
    &[data-df-entrance="flip"] { animation-name: df-enter-flip, df-enter-fade; animation-composition: add, replace; }
    &[data-df-entrance="skew"] { animation-name: df-enter-skew, df-enter-fade; animation-composition: add, replace; }
    &[data-df-entrance="blur"] { animation-name: df-enter-blur, df-enter-fade; animation-composition: add, replace; }
    &[data-df-entrance="wipe"] { animation-name: df-enter-wipe; }
    &[data-df-entrance="wipe-up"] { animation-name: df-enter-wipe-up; }
    &[data-df-entrance="iris"] { animation-name: df-enter-iris; }
    &[data-df-entrance="fade"] { animation-name: df-enter-fade; }
  }

  /* stagger: children of a [data-df-stagger] container get graded delays
     (--df-motion-stagger-step per container) while keeping their own
     direction. ponytail: beyond the 8th child the delay caps at *7 - long
     lists should chunk into columns. An inline --df-motion-delay on a child
     still wins (inline beats any stylesheet rule). */
  [data-df-stagger] {
    --df-motion-stagger-step: 120ms;
    & > :nth-child(1) { --df-motion-delay: calc(var(--df-motion-stagger-step) * 0); }
    & > :nth-child(2) { --df-motion-delay: calc(var(--df-motion-stagger-step) * 1); }
    & > :nth-child(3) { --df-motion-delay: calc(var(--df-motion-stagger-step) * 2); }
    & > :nth-child(4) { --df-motion-delay: calc(var(--df-motion-stagger-step) * 3); }
    & > :nth-child(5) { --df-motion-delay: calc(var(--df-motion-stagger-step) * 4); }
    & > :nth-child(6) { --df-motion-delay: calc(var(--df-motion-stagger-step) * 5); }
    & > :nth-child(7) { --df-motion-delay: calc(var(--df-motion-stagger-step) * 6); }
    & > :nth-child(n + 8) { --df-motion-delay: calc(var(--df-motion-stagger-step) * 7); }
  }

  /* SVG draw-in - a distinct primitive, not a DOM entrance: pathLength="1"
     calibrates distance-along-path so ONE dash rule (1 → 0) fits every
     geometry regardless of actual path length. (The CSS `path-length`
     property stays experimental - the SVG attribute is the portable form.) */
  [data-df-draw][pathLength="1"] {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation:
      df-draw
      var(--df-motion-duration)
      var(--df-motion-ease)
      var(--df-motion-delay)
      both;
  }

  /* vocabulary - every direction is exactly one keyframes rule */

  @keyframes df-enter-fade {
    from { opacity: 0; }
    to { opacity: var(--df-motion-base-opacity); }
  }

  /* "up" travels upward into its final position (from below) */
  @keyframes df-enter-up {
    from { transform: translateY(var(--df-motion-distance)); }
    to { transform: translateY(0); }
  }
  @keyframes df-enter-down {
    from { transform: translateY(calc(-1 * var(--df-motion-distance))); }
    to { transform: translateY(0); }
  }
  @keyframes df-enter-left {
    from { transform: translateX(var(--df-motion-distance)); }
    to { transform: translateX(0); }
  }
  @keyframes df-enter-right {
    from { transform: translateX(calc(-1 * var(--df-motion-distance))); }
    to { transform: translateX(0); }
  }
  @keyframes df-enter-zoom {
    from { transform: scale(var(--df-motion-scale-in)); }
    to { transform: scale(1); }
  }
  @keyframes df-enter-zoom-out {
    from { transform: scale(var(--df-motion-scale-out)); }
    to { transform: scale(1); }
  }
  @keyframes df-enter-pop {
    0% { transform: scale(0.65); }
    65% { transform: scale(1.07); }
    100% { transform: scale(1); }
  }
  @keyframes df-enter-spin {
    from { transform: rotate(var(--df-motion-spin)); }
    to { transform: rotate(0deg); }
  }
  @keyframes df-enter-flip {
    from { transform: perspective(900px) rotateY(-70deg); }
    to { transform: perspective(900px) rotateY(0deg); }
  }
  @keyframes df-enter-skew {
    from { transform: skewX(var(--df-motion-angle)); }
    to { transform: skewX(0deg); }
  }
  @keyframes df-enter-blur {
    from { filter: blur(var(--df-motion-blur)); }
    to { filter: blur(0); }
  }
  @keyframes df-enter-wipe {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0); }
  }
  @keyframes df-enter-wipe-up {
    from { clip-path: inset(100% 0 0 0); }
    to { clip-path: inset(0); }
  }
  @keyframes df-enter-iris {
    from { clip-path: circle(0% at 50% 50%); }
    to { clip-path: circle(150% at 50% 50%); }
  }

  @keyframes df-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
  }

  /* accessibility: near-instant instead of none - the JS finished/cancel
     contract behaves identically (a finished 1ms animation still resolves),
     while nothing visibly moves. REQUIRED for every animation. */
  @media (prefers-reduced-motion: reduce) {
    [data-df-entrance],
    [data-df-draw] {
      --df-motion-duration: 1ms !important;
      --df-motion-delay: 0ms !important;
    }
  }
}

/* ── components/navbar/navbar.css ── */
/* -- Navbar component --------------------------------------------- */

@layer components {
  /* An app bar: .navbar-start / .navbar-center / .navbar-end regions (start
     and end share the free space equally, so the center stays truly
     centered), a .navbar-brand, a .navbar-menu of links (with <details>
     submenus), and any component inside - buttons, inputs, dropdowns,
     avatars, indicators. Responsive collapse is native: the collapsible
     part is a popover (.navbar-collapse[popover]) shown INLINE from the
     data-collapse breakpoint up and opened by a .navbar-toggle below it - one
     menu in the markup, no JavaScript. anchor-scope keeps each navbar's
     toggle anchor to itself. */
  .navbar {
    --_h: 3.5rem;
    anchor-scope: --navbar-toggle;
    box-sizing: border-box; /* the size IS the bar height */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--_h);
    padding: 0.5rem 1rem;
    background-color: var(--background);
    color: var(--foreground);
    border-bottom: 1px solid var(--border);

    /* -- Sizes -------------------------------------------------------- */
    &[data-size="sm"] { --_h: 3rem; padding-block: 0.25rem; }
    &[data-size="md"] { --_h: 3.5rem; }
    &[data-size="lg"] { --_h: 4.5rem; padding-block: 0.75rem; }

    /* -- Variants ------------------------------------------------------ */
    &[data-variant="muted"] { background-color: var(--muted); border-color: transparent; }
    &[data-variant="primary"] { background-color: var(--primary); color: var(--primary-foreground); border-color: transparent; }
    /* a charcoal bar (like the neutral card): the inverse colors, softened */
    &[data-variant="neutral"] { background-color: color-mix(in oklch, var(--foreground) 78%, var(--background)); color: var(--background); border-color: transparent; }
    &[data-variant="ghost"] { background-color: transparent; border-color: transparent; }
    &[data-variant="glass"] {
      background-color: color-mix(in oklch, var(--background) 62%, transparent);
      border-color: color-mix(in oklch, var(--foreground) 12%, transparent);
      backdrop-filter: blur(14px) saturate(1.4);
    }
    /* a floating pill: rounded, bordered all round, a shadow - put it inside
       a padded container */
    &[data-variant="floating"] {
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-md);
    }

    /* -- Position ------------------------------------------------------ */
    &[data-position="sticky"] { position: sticky; top: 0; z-index: 40; }

    /* ghost / link buttons on a colored bar take its text color */
    &:is([data-variant="primary"], [data-variant="neutral"]) .btn:is([data-variant="ghost"], [data-variant="link"]) {
      color: inherit;

      &:hover { background-color: color-mix(in oklch, currentColor 16%, transparent); color: inherit; }
    }
  }

  .navbar-start,
  .navbar-end {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
  }
  .navbar-end { justify-content: flex-end; }
  .navbar-center {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* -- Brand ------------------------------------------------------------ */
  .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-md);
    color: inherit;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;

    & :is(img, svg) { height: 1.5rem; width: auto; }
    &:is(a):hover { background-color: color-mix(in oklch, currentColor 8%, transparent); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  }

  /* -- Menu ------------------------------------------------------------- */
  .navbar-menu {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;

    & :is(a, summary) {
      display: flex;
      align-items: center;
      gap: 0.375rem;
      padding: 0.375rem 0.75rem;
      border-radius: var(--radius-md);
      color: color-mix(in oklch, currentColor 72%, transparent);
      font-size: 0.875rem;
      font-weight: 500;
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
      list-style: none;

      &:hover { color: inherit; background-color: color-mix(in oklch, currentColor 8%, transparent); }
      &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
      & svg { width: 1rem; height: 1rem; }
    }
    & :is(a, summary):hover { color: currentColor; }
    & a[aria-current="page"] {
      color: inherit;
      background-color: color-mix(in oklch, currentColor 10%, transparent);
    }

    /* a submenu: <details><summary>…</summary><ul>…</ul></details> - the
       chevron turns when open; the list drops below as a small popover-like
       panel. <details name="…"> keeps one open at a time. */
    & details { position: relative; }
    & summary::-webkit-details-marker { display: none; }
    & summary::after {
      content: '';
      width: 0.375rem;
      height: 0.375rem;
      margin-inline-start: 0.125rem;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      rotate: 45deg;
      translate: 0 -0.125rem;
      transition: rotate 150ms ease;
    }
    & details[open] > summary::after { rotate: -135deg; translate: 0 0.0625rem; }
    & details > ul {
      position: absolute;
      top: calc(100% + 0.375rem);
      left: 0;
      z-index: 50;
      display: grid;
      gap: 0.125rem;
      min-width: 11rem;
      margin: 0;
      padding: 0.25rem;
      list-style: none;
      background-color: var(--popover);
      color: var(--popover-foreground);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
    }
  }

  /* -- Responsive collapse ------------------------------------------------
     .navbar-collapse[popover] renders INLINE (the UA's popover styles are
     reset) unless its navbar collapses at the current width - then it is a
     real popover, anchored under the .navbar-toggle. */
  .navbar-toggle {
    anchor-name: --navbar-toggle;
    display: none;
  }
  .navbar-collapse[popover] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: none;
    color: inherit;
  }

  /* shared: the collapsed state (inside a media query per breakpoint) */
  .navbar[data-collapse="always"] {
    & .navbar-toggle { display: inline-flex; }
    & .navbar-collapse[popover]:not(:popover-open) { display: none; }
    & .navbar-collapse[popover]:popover-open {
      position: fixed;
      position-anchor: --navbar-toggle;
      inset: auto;
      top: anchor(bottom);
      left: anchor(left);
      position-try-fallbacks: flip-inline;
      display: grid;
      align-items: stretch;
      min-width: 14rem;
      margin: 0.5rem 0 0;
      padding: 0.375rem;
      background-color: var(--popover);
      color: var(--popover-foreground);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);

      & .navbar-menu { flex-direction: column; align-items: stretch; }
      & .navbar-menu details > ul { position: static; box-shadow: none; border: 0; padding: 0 0 0 0.75rem; }
    }
  }
  @media (max-width: 39.99rem) {
    .navbar[data-collapse="sm"] {
      & .navbar-toggle { display: inline-flex; }
      & .navbar-collapse[popover]:not(:popover-open) { display: none; }
      & .navbar-collapse[popover]:popover-open {
        position: fixed; position-anchor: --navbar-toggle; inset: auto; top: anchor(bottom); left: anchor(left); position-try-fallbacks: flip-inline;
        display: grid; align-items: stretch; min-width: 14rem; margin: 0.5rem 0 0; padding: 0.375rem;
        background-color: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
        & .navbar-menu { flex-direction: column; align-items: stretch; }
        & .navbar-menu details > ul { position: static; box-shadow: none; border: 0; padding: 0 0 0 0.75rem; }
      }
    }
  }
  @media (max-width: 47.99rem) {
    .navbar[data-collapse="md"] {
      & .navbar-toggle { display: inline-flex; }
      & .navbar-collapse[popover]:not(:popover-open) { display: none; }
      & .navbar-collapse[popover]:popover-open {
        position: fixed; position-anchor: --navbar-toggle; inset: auto; top: anchor(bottom); left: anchor(left); position-try-fallbacks: flip-inline;
        display: grid; align-items: stretch; min-width: 14rem; margin: 0.5rem 0 0; padding: 0.375rem;
        background-color: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
        & .navbar-menu { flex-direction: column; align-items: stretch; }
        & .navbar-menu details > ul { position: static; box-shadow: none; border: 0; padding: 0 0 0 0.75rem; }
      }
    }
  }
  @media (max-width: 63.99rem) {
    .navbar[data-collapse="lg"] {
      & .navbar-toggle { display: inline-flex; }
      & .navbar-collapse[popover]:not(:popover-open) { display: none; }
      & .navbar-collapse[popover]:popover-open {
        position: fixed; position-anchor: --navbar-toggle; inset: auto; top: anchor(bottom); left: anchor(left); position-try-fallbacks: flip-inline;
        display: grid; align-items: stretch; min-width: 14rem; margin: 0.5rem 0 0; padding: 0.375rem;
        background-color: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
        & .navbar-menu { flex-direction: column; align-items: stretch; }
        & .navbar-menu details > ul { position: static; box-shadow: none; border: 0; padding: 0 0 0 0.75rem; }
      }
    }
  }

  /* -- Accessibility -------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .navbar-menu summary::after { transition: none; }
  }
  @media (forced-colors: active) {
    .navbar { border-bottom: 1px solid CanvasText; }
    .navbar-menu a[aria-current="page"] { outline: 1px solid Highlight; }
  }
}

/* ── components/navigation-menu/navigation-menu.css ── */
@layer components {
  .nav-menu-list { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
  .nav-menu-link, .nav-menu-trigger {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.5rem 0.75rem; border: none; border-radius: var(--radius-md);
    background: transparent; color: var(--foreground); font-size: 0.875rem; font-weight: 500;
    font-family: inherit; text-decoration: none; cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
    outline: none;
    &:hover { background-color: var(--accent); color: var(--accent-foreground); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
    & svg { width: 0.875rem; height: 0.875rem; color: var(--muted-foreground); transition: transform 200ms ease; }
  }

  /* -- Density: set data-density on the .nav-menu nav to scale the gap
     between top-level items (0.5× / 1 / 1.5× of the 0.25rem base);
     comfortable matches the unsized default. Link padding belongs to
     data-size - density is the row rhythm only. */
  .nav-menu:where([data-density="compact"]) .nav-menu-list     { gap: 0.125rem; }
  .nav-menu:where([data-density="comfortable"]) .nav-menu-list { gap: 0.25rem; }
  .nav-menu:where([data-density="spacious"]) .nav-menu-list    { gap: 0.375rem; }

  /* -- Sizes: set data-size on the .nav-menu nav; every link/trigger and
     the popover's rows scale together. md == the unsized default. */
  .nav-menu[data-size="xs"] {
    & :is(.nav-menu-link, .nav-menu-trigger) { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
    & .nav-menu-content-link { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
  }
  .nav-menu[data-size="sm"] {
    & :is(.nav-menu-link, .nav-menu-trigger) { padding: 0.375rem 0.625rem; font-size: 0.8125rem; }
    & .nav-menu-content-link { padding: 0.375rem 0.625rem; font-size: 0.8125rem; }
  }
  .nav-menu[data-size="md"] {
    & :is(.nav-menu-link, .nav-menu-trigger) { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
  }
  .nav-menu[data-size="lg"] {
    & :is(.nav-menu-link, .nav-menu-trigger) { padding: 0.625rem 1rem; font-size: 1rem; }
    & .nav-menu-content-link { padding: 0.625rem 1rem; font-size: 1rem; }
  }
  .nav-menu[data-size="xl"] {
    & :is(.nav-menu-link, .nav-menu-trigger) { padding: 0.75rem 1.25rem; font-size: 1.125rem; }
    & .nav-menu-content-link { padding: 0.75rem 1.25rem; font-size: 1.125rem; }
  }

  /* Rotate chevron when popover is open */
  .nav-menu-trigger:has(+ .nav-menu-content:popover-open) svg {
    transform: rotate(180deg);
  }

  .nav-menu-content {
    position: fixed; inset: auto;
    margin: 0; border: 1px solid var(--border); border-radius: var(--radius-xl);
    background-color: var(--popover); color: var(--popover-foreground);
    padding: 1rem; box-shadow: var(--shadow-md); min-width: 14rem;
    opacity: 0; transform: translateY(-4px);
    transition: opacity 150ms ease, transform 150ms ease, display 150ms allow-discrete;

    /* -- Anchor positioning -- */
    top: anchor(bottom); left: anchor(left); margin-top: 4px;
    position-try-fallbacks: flip-block;

    &:popover-open { opacity: 1; transform: translateY(0); }
  }
  @starting-style { .nav-menu-content:popover-open { opacity: 0; transform: translateY(-4px); } }
  .nav-menu-content-link {
    display: block; padding: 0.5rem 0.75rem; border-radius: var(--radius-md);
    text-decoration: none; color: var(--foreground); font-size: 0.875rem;
    transition: background-color 150ms ease;
    &:hover { background-color: var(--accent); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
    & p { margin: 0.125rem 0 0; font-size: 0.75rem; color: var(--muted-foreground); font-weight: 400; }
  }

  /* -- Megamenu ------------------------------------------------------
     The .nav-menu is an anchor (scoped per menu) so a panel can take the
     menu's own width - data-width="wide" - or the page's - "full". Inside a
     panel: .nav-menu-grid (auto-fit columns, or data-columns 2 / 3 / 4) of
     .nav-menu-section (a .nav-menu-heading + links), links with a
     .nav-menu-icon and a description, a .nav-menu-feature promo block and a
     .nav-menu-footer row. CSS only - the triggers stay native popovers. */
  .nav-menu {
    anchor-name: --nav-menu-root;
    anchor-scope: --nav-menu-root;
  }
  .nav-menu-content[data-width="wide"] {
    left: anchor(--nav-menu-root left, 0px);
    right: anchor(--nav-menu-root right, 0px);
    width: auto;
  }
  .nav-menu-content[data-width="full"] {
    left: 0;
    right: 0;
    width: auto;
    border-radius: 0;
    border-inline: 0;
    padding-inline: max(1rem, calc((100vw - 72rem) / 2));
  }

  /* the open trigger stays highlighted; aria-current marks the page */
  .nav-menu-trigger:has(+ .nav-menu-content:popover-open),
  .nav-menu-link[aria-current="page"] {
    background-color: var(--accent);
    color: var(--accent-foreground);
  }

  .nav-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 1rem 1.5rem;

    &[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    &[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    &[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  .nav-menu-section {
    display: grid;
    align-content: start;
    gap: 0.125rem;
    min-width: 0;
  }
  .nav-menu-heading {
    margin: 0 0 0.25rem;
    padding: 0 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-foreground);
  }
  /* a link with an icon: icon | title over description */
  .nav-menu-content-link:has(> .nav-menu-icon) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.75rem;
    align-items: start;

    & > :not(.nav-menu-icon) { grid-column: 2; }
  }
  .nav-menu-icon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-md);
    background-color: var(--muted);
    color: var(--foreground);

    & svg { width: 1rem; height: 1rem; }
  }
  /* a promo / featured block: image (optional) + title + text */
  .nav-menu-feature {
    display: grid;
    align-content: end;
    gap: 0.25rem;
    min-height: 9rem;
    padding: 1rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, color-mix(in oklch, var(--primary) 14%, var(--muted)), var(--muted));
    color: var(--foreground);
    text-decoration: none;

    & img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); margin-bottom: 0.5rem; }
    & strong { font-size: 0.9375rem; }
    & p { margin: 0; font-size: 0.8125rem; color: var(--muted-foreground); }
    &:hover { background: linear-gradient(160deg, color-mix(in oklch, var(--primary) 22%, var(--muted)), var(--muted)); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  }
  .nav-menu-footer {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: 0.8125rem;
    color: var(--muted-foreground);

    & a { color: var(--foreground); font-weight: 500; text-decoration: none; }
    & a:hover { text-decoration: underline; }
  }

  /* -- Vertical: a side menu whose panels fly out to the right (and drop
     below the trigger when there is no room). "responsive" is vertical
     below 48rem and horizontal from there up. */
  .nav-menu[data-orientation="vertical"] {
    & .nav-menu-list { flex-direction: column; align-items: stretch; }
    & :is(.nav-menu-link, .nav-menu-trigger) { justify-content: space-between; width: 100%; }
    & .nav-menu-trigger svg { transform: rotate(-90deg); }
    & .nav-menu-content {
      top: anchor(top);
      left: anchor(right);
      margin: 0 0 0 4px;
      position-try-fallbacks: --nav-menu-below;
    }
  }
  @media (max-width: 47.99rem) {
    .nav-menu[data-orientation="responsive"] {
      & .nav-menu-list { flex-direction: column; align-items: stretch; }
      & :is(.nav-menu-link, .nav-menu-trigger) { justify-content: space-between; width: 100%; }
      & .nav-menu-trigger svg { transform: rotate(-90deg); }
      & .nav-menu-content {
        top: anchor(top);
        left: anchor(right);
        margin: 0 0 0 4px;
        position-try-fallbacks: --nav-menu-below;
      }
      & .nav-menu-grid[data-columns] { grid-template-columns: minmax(0, 1fr); }
    }
  }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    .nav-menu-link, .nav-menu-trigger,
    .nav-menu-content, .nav-menu-content-link {
      transition: none;
    }
    .nav-menu-trigger svg { transition: none; }
  }

  @media (forced-colors: active) {
    .nav-menu-content {
      border-color: ButtonText;
    }
  }
}

/* the vertical menu's fallback when a panel has no room at the side:
   below its trigger (top-level: @position-try is not a layered rule) */
@position-try --nav-menu-below {
  top: anchor(bottom);
  left: anchor(left);
  margin: 4px 0 0;
}

/* ── components/news-header/news-header.css ── */
/* -- News Header (website) ------------------------------------------
   Introduces a news collection: kicker + dateline, the title, a line of
   editorial context and the topic links (the current one marked with
   aria-current). The masthead variant sets it like a newspaper front page. */

/* the overflow hint's strength (0-1), animated by the topic row's scroll */
@property --mk-news-header-more {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@layer components {
  .mk-news-header {
    container: mk-news-header / inline-size;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
  }

  .mk-news-header-top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    font-size: 0.8125rem;
  }

  .mk-news-header-kicker {
    color: var(--primary);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .mk-news-header-date { color: var(--muted-foreground); }

  .mk-news-header-title {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  .mk-news-header-desc {
    margin: 0;
    max-width: 44rem;
    color: var(--muted-foreground);
    font-size: 1.0625rem;
    line-height: 1.55;
    text-wrap: pretty;
  }

  /* topics: one scrolling row, the current topic underlined */
  .mk-news-header-topics {
    display: flex;
    gap: 1.25rem;
    margin-block-start: 0.5rem;
    border-block-end: 1px solid var(--border);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;

    & a {
      flex: none;
      padding-block: 0.625rem;
      border-block-end: 2px solid transparent;
      margin-block-end: -1px;
      color: var(--muted-foreground);
      font-size: 0.875rem;
      font-weight: 500;
      text-decoration: none;
      white-space: nowrap;
      transition: color 120ms, border-color 120ms;

      &:hover { color: var(--foreground); }
      &[aria-current] { color: var(--foreground); border-block-end-color: var(--primary); }
      &:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; border-radius: var(--radius-sm); }
    }
  }

  /* more topics than fit: an overlay at the row's end - a fade into the
     background and a chevron. Its strength follows the row's own scroll (a
     scroll-driven animation): full while there is more to see, gone at the
     end; a row that fits has no active timeline, so no hint at all. The
     overlay takes no room (width = -margin) and sticks to the row's end. */
  .mk-news-header-topics {
    --mk-news-header-more: 0;

    animation: mk-news-header-more linear both;

    &::after {
      content: "›";
      position: sticky;
      inset-inline-end: 0;
      flex: none;
      width: 3rem;
      margin-inline-start: -3rem;
      padding-inline-end: 0.125rem;
      background: linear-gradient(to right, transparent, var(--background) 65%);
      color: var(--foreground);
      font-size: 1.25rem;
      line-height: 1;
      text-align: end;
      align-self: stretch;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      opacity: var(--mk-news-header-more);
      pointer-events: none;
    }
  }
  @keyframes mk-news-header-more {
    from { --mk-news-header-more: 1; }
    to { --mk-news-header-more: 0; }
  }
  /* the timeline in its own rule: a minifier must not fold it into the
     `animation` shorthand (reset-only there - the declaration would be
     dropped). Unsupported: the animation runs once (0s) and ends at 0 - no
     hint, no harm */
  @supports (animation-timeline: scroll()) {
    .mk-news-header-topics { animation-timeline: scroll(self inline); }
    .mk-news-header-topics[data-wrap] { animation: none; }
  }

  /* data-wrap: break the topics onto more lines instead of scrolling */
  .mk-news-header-topics[data-wrap] {
    flex-wrap: wrap;
    column-gap: 1.25rem;
    overflow: visible;
    animation: none;

    &::after { content: none; }
  }

  /* masthead: a newspaper front - serif, centered, between double rules */
  .mk-news-header[data-variant="masthead"] {
    align-items: center;
    text-align: center;

    & .mk-news-header-top {
      width: 100%;
      padding-block: 0.375rem;
      border-block: 1px solid var(--foreground);
    }
    & .mk-news-header-title {
      font-family: var(--font-serif);
      font-weight: 800;
      font-size: 3rem;
      letter-spacing: -0.02em;
    }
    & .mk-news-header-topics {
      justify-content: safe center;
      width: 100%;
      border-block: 3px double var(--foreground);
      & a { padding-block: 0.5rem; border-block-end: 0; margin: 0; }
      & a[aria-current] { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: var(--primary); }
    }
  }

  /* the live line: a pinging Indicator dot + "updated …" */
  .mk-news-header-live {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted-foreground);
    font-size: 0.8125rem;

    & strong { color: oklch(0.58 0.22 27); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
  }

  /* tools on the right of the top line: search, view switch, subscribe */
  .mk-news-header-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  /* bar: one compact row - title, topics, tools */
  .mk-news-header[data-variant="bar"] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    padding-block: 0.75rem;
    border-block: 1px solid var(--border);

    & .mk-news-header-title { font-size: 1.375rem; letter-spacing: -0.02em; }
    & .mk-news-header-topics { flex: 1 1 8rem; min-width: 0; margin: 0; border: 0; }
    & .mk-news-header-topics a { padding-block: 0.25rem; }
    & .mk-news-header-tools { margin-inline-start: auto; }
  }

  @container mk-news-header (min-width: 48rem) {
    .mk-news-header[data-variant="bar"] .mk-news-header-title { font-size: 1.5rem; }
    .mk-news-header-title { font-size: 3rem; }
    .mk-news-header[data-variant="masthead"] .mk-news-header-title { font-size: 4.5rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-news-header-topics a { transition: none; }
  }

  @media (prefers-contrast: more) {
    .mk-news-header-desc,
    .mk-news-header-topics a { color: var(--foreground); }
  }

  @media (forced-colors: active) {
    .mk-news-header-topics a[aria-current] { border-block-end-color: Highlight; }
  }
}

/* ── components/news-item/news-item.css ── */
/* -- News Item (website) --------------------------------------------
   Previews one story: category + time, the headline (its link stretches
   over the whole item - one tab stop, one click target), a summary and an
   optional image. Default: a row with the image at the end; lead: the top
   story, image above; compact: a headline list. */

@layer components {
  .mk-news-item {
    container: mk-news-item / inline-size;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 1rem;
    padding-block: 1rem;
    border-block-end: 1px solid var(--border);

    &:has(.mk-news-item-title a:focus-visible) {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
      border-radius: var(--radius-sm);
    }
  }

  .mk-news-item-body {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
  }

  .mk-news-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    color: var(--muted-foreground);
    font-size: 0.75rem;
  }

  .mk-news-item-category {
    color: var(--primary);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* live: a pulsing dot in front of the time */
  .mk-news-item-live {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: oklch(0.58 0.22 27);
    font-weight: 600;

    &::before {
      content: "";
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      background: currentColor;
      animation: mk-news-item-pulse 1.6s ease-in-out infinite;
    }
  }

  .mk-news-item-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-wrap: balance;

    & a {
      color: inherit;
      text-decoration: none;
      outline: none;

      /* the stretched link: the whole item is the click target */
      &::after { content: ""; position: absolute; inset: 0; }
    }
  }
  .mk-news-item:hover .mk-news-item-title a { text-decoration: underline; text-underline-offset: 0.2em; }

  .mk-news-item-summary {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    line-height: 1.55;
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .mk-news-item-media {
    width: 6rem;
    aspect-ratio: 4 / 3;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--muted);

    & img { display: block; width: 100%; height: 100%; object-fit: cover; }
  }

  @container mk-news-item (min-width: 36rem) {
    .mk-news-item-media { width: 9rem; }
  }

  /* lead: the top story - image above, a big headline */
  .mk-news-item[data-variant="lead"] {
    grid-template-columns: minmax(0, 1fr);
    padding-block-start: 0;

    & .mk-news-item-media { order: -1; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); }
    & .mk-news-item-title { font-size: 1.5rem; line-height: 1.15; }
    & .mk-news-item-summary { font-size: 1rem; -webkit-line-clamp: 4; }
  }
  @container mk-news-item (min-width: 36rem) {
    .mk-news-item[data-variant="lead"] .mk-news-item-title { font-size: 2rem; }
  }

  /* compact: time in front of the headline, no image, no summary */
  .mk-news-item[data-variant="compact"] {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 0.625rem;

    & .mk-news-item-body { flex-direction: row; align-items: baseline; gap: 0.75rem; }
    & .mk-news-item-meta { flex: none; min-width: 4.75rem; }
    & .mk-news-item-title { font-size: 0.9375rem; font-weight: 500; }
    & :is(.mk-news-item-summary, .mk-news-item-media, .mk-news-item-category) { display: none; }
  }

  /* tags, author, actions: raised above the stretched link so they stay clickable */
  .mk-news-item-footer {
    position: relative;
    z-index: 1;

    & a { text-decoration: none; }
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.75rem;
    margin-block-start: 0.25rem;
    color: var(--muted-foreground);
    font-size: 0.75rem;
  }

  /* a video story: a play glyph and the duration on the thumbnail */
  .mk-news-item-media[data-video] {
    position: relative;

    &::before {
      content: "";
      position: absolute;
      inset: 50% auto auto 50%;
      width: 2.25rem;
      height: 2.25rem;
      translate: -50% -50%;
      border-radius: 50%;
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='white'/%3E%3C/svg%3E") 55% 50% / 1rem 1rem no-repeat,
        rgb(0 0 0 / 0.55);
      backdrop-filter: blur(4px);
    }
    &::after {
      content: attr(data-video);
      position: absolute;
      inset-block-end: 0.375rem;
      inset-inline-end: 0.375rem;
      padding: 0.0625rem 0.375rem;
      border-radius: var(--radius-sm);
      background: rgb(0 0 0 / 0.7);
      color: #fff;
      font-size: 0.6875rem;
      font-variant-numeric: tabular-nums;
    }
  }

  /* overlay: the copy over the image, on a darkening gradient */
  .mk-news-item[data-variant="overlay"] {
    grid-template-columns: minmax(0, 1fr);
    isolation: isolate;
    min-height: 18rem;
    padding: 1.25rem;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-lg);
    background: #0b0b0f;
    color: #fff;
    align-content: end;

    /* the image sits under the copy; the body stays static so the stretched
       link still spans the whole item */
    & .mk-news-item-media {
      position: absolute;
      inset: 0;
      z-index: -1;
      width: auto;
      aspect-ratio: auto;
      border-radius: 0;

      &::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgb(0 0 0 / 0.88), rgb(0 0 0 / 0.25) 60%, transparent);
      }
    }
    & .mk-news-item-title { font-size: 1.375rem; line-height: 1.2; }
    & :is(.mk-news-item-meta, .mk-news-item-summary) { color: rgb(255 255 255 / 0.8); }
    & .mk-news-item-category { color: #fff; }
  }

  /* ranked: "most read" - a big outlined number from data-rank */
  .mk-news-item[data-variant="ranked"] {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;

    &::before {
      content: attr(data-rank);
      min-width: 2.5rem;
      color: transparent;
      font-size: 2.5rem;
      font-weight: 800;
      line-height: 1;
      -webkit-text-stroke: 1.5px var(--primary);
      font-variant-numeric: tabular-nums;
    }
    & :is(.mk-news-item-media, .mk-news-item-summary) { display: none; }
  }

  /* card: on a surface - image on top, footer at the bottom */
  .mk-news-item[data-variant="card"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    transition: box-shadow 150ms ease, border-color 150ms ease;

    &:hover { border-color: color-mix(in oklch, var(--foreground) 25%, var(--border)); box-shadow: var(--shadow-md); }
    & .mk-news-item-media { order: -1; width: 100%; aspect-ratio: 16 / 9; border-radius: 0; }
    & .mk-news-item-body { padding: 1rem 1.125rem 1.125rem; }
    & .mk-news-item-footer { margin-block-start: auto; padding-block-start: 0.75rem; }
  }

  /* live: a live-blog entry - the time on a rail with a dot */
  .mk-news-item[data-variant="live"] {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    column-gap: 1.25rem;
    padding-block: 0;
    border: 0;

    & .mk-news-item-meta {
      position: relative;
      grid-row: span 4;
      align-self: stretch;
      flex-direction: column;
      align-items: flex-end;
      gap: 0.125rem;
      /* the rail runs through the entry's bottom padding into the next one */
      padding-block-end: 1.75rem;
      padding-inline-end: 0.875rem;
      border-inline-end: 2px solid var(--border);
      font-variant-numeric: tabular-nums;

      &::after {
        content: "";
        position: absolute;
        inset-block-start: 0.3rem;
        inset-inline-end: calc(-0.375rem - 1px);
        width: 0.75rem;
        height: 0.75rem;
        border: 2px solid var(--background);
        border-radius: 50%;
        background: var(--primary);
      }
    }
    & .mk-news-item-body { display: contents; }
    & .mk-news-item-meta time { color: var(--foreground); font-weight: 600; font-size: 0.875rem; }
    & .mk-news-item-title { grid-column: 2; }
    & :is(.mk-news-item-summary, .mk-news-item-footer, .mk-news-item-media) { grid-column: 2; }
    & .mk-news-item-summary { -webkit-line-clamp: unset; display: block; }
    & .mk-news-item-media { width: 100%; max-width: 24rem; aspect-ratio: 16 / 9; margin-block: 0.5rem 1.75rem; }
    & .mk-news-item-summary:last-child { margin-block-end: 1.75rem; }
  }
  .mk-news-item[data-variant="live"][data-key] .mk-news-item-meta::after { background: oklch(0.58 0.22 27); box-shadow: 0 0 0 4px oklch(0.58 0.22 27 / 0.2); }

  @keyframes mk-news-item-pulse {
    50% { opacity: 0.25; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-news-item-live::before { animation: none; }
    .mk-news-item[data-variant="card"] { transition: none; }
  }

  @media (prefers-contrast: more) {
    .mk-news-item-summary,
    .mk-news-item-meta { color: var(--foreground); }
  }

  @media (forced-colors: active) {
    .mk-news-item-title a { color: LinkText; }
    .mk-news-item-live { color: CanvasText; }
  }
}

/* ── components/news-ticker/news-ticker.css ── */
/* -- News Ticker (website) ------------------------------------------
   A compact stream of linked headlines. The list runs twice in one track
   (the copy is inert + aria-hidden) and the track slides by half its width,
   so the loop is seamless - pure CSS. Hover or focus pauses it; under
   reduced motion it stops and the row scrolls by hand instead. */

@layer components {
  .mk-news-ticker {
    --_duration: var(--mk-news-ticker-duration, 40s);

    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--card-foreground);
    font-size: 0.875rem;
  }

  .mk-news-ticker-label {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.375rem;
    padding-inline: 0.875rem;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .mk-news-ticker-viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
  }

  .mk-news-ticker-track {
    display: flex;
    width: max-content;
    animation: mk-news-ticker-scroll var(--_duration) linear infinite;
  }
  .mk-news-ticker:is(:hover, :focus-within) .mk-news-ticker-track { animation-play-state: paused; }

  .mk-news-ticker-items {
    display: flex;
    flex: none;
    margin: 0;
    padding: 0;
    list-style: none;

    & li {
      display: flex;
      align-items: center;

      /* a separator dot between headlines (and after the last, for the loop) */
      &::after {
        content: "";
        width: 0.25rem;
        height: 0.25rem;
        border-radius: 50%;
        background: var(--muted-foreground);
        opacity: 0.6;
      }
    }

    & a {
      display: inline-flex;
      align-items: baseline;
      gap: 0.5rem;
      padding: 0.625rem 1.25rem;
      color: inherit;
      font-weight: 500;
      text-decoration: none;
      white-space: nowrap;

      &:hover { text-decoration: underline; text-underline-offset: 0.2em; }
      &:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; border-radius: var(--radius-sm); }
    }

    & time {
      color: var(--muted-foreground);
      font-size: 0.75rem;
      font-variant-numeric: tabular-nums;
    }
  }

  /* breaking: a red label with a pulsing dot */
  .mk-news-ticker[data-variant="breaking"] {
    border-color: oklch(0.58 0.22 27 / 0.45);

    & .mk-news-ticker-label {
      background: oklch(0.58 0.22 27);
      color: #fff;

      &::before {
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background: currentColor;
        animation: mk-news-ticker-pulse 1.6s ease-in-out infinite;
      }
    }
  }

  /* static: no motion at all - the row scrolls by hand */
  .mk-news-ticker[data-variant="static"],
  .mk-news-ticker[data-variant="static"] .mk-news-ticker-viewport { mask-image: none; }
  .mk-news-ticker[data-variant="static"] {
    & .mk-news-ticker-viewport { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
    & .mk-news-ticker-track { animation: none; }
    & .mk-news-ticker-items[aria-hidden="true"] { display: none; }
  }

  /* a change readout (market, scores): green up, red down */
  .mk-news-ticker-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;

    &[data-trend="up"] { color: oklch(0.6 0.16 150); &::before { content: "▲"; font-size: 0.625em; } }
    &[data-trend="down"] { color: oklch(0.6 0.2 27); &::before { content: "▼"; font-size: 0.625em; } }
  }

  /* market: a stock strip - symbol, price, change; mono numbers */
  .mk-news-ticker[data-variant="market"] {
    & .mk-news-ticker-label { background: var(--foreground); color: var(--background); }
    & .mk-news-ticker-items a { gap: 0.625rem; font-family: var(--font-mono); font-size: 0.8125rem; }
    & .mk-news-ticker-items b { font-weight: 700; letter-spacing: 0.02em; }
  }

  /* inverse: a dark band */
  .mk-news-ticker[data-variant="inverse"] {
    border-color: transparent;
    background: var(--foreground);
    color: var(--background);

    & .mk-news-ticker-label { background: var(--primary); color: var(--primary-foreground); box-shadow: 0.75rem 0 1rem -0.5rem rgb(0 0 0 / 0.5); }
    & .mk-news-ticker-items time { color: color-mix(in oklch, var(--background) 65%, transparent); }
    & .mk-news-ticker-items li::after { background: var(--background); }
  }

  /* pill: a rounded floating strip with a badge label */
  .mk-news-ticker[data-variant="pill"] {
    padding: 0.25rem;
    border-radius: 999px;
    box-shadow: var(--shadow-md);

    & .mk-news-ticker-label { border-radius: 999px; padding-block: 0.25rem; }
    & .mk-news-ticker-items a { padding-block: 0.375rem; }
  }

  /* sizes */
  .mk-news-ticker[data-size="sm"] {
    font-size: 0.8125rem;
    & .mk-news-ticker-items a { padding-block: 0.375rem; }
    & .mk-news-ticker-label { padding-inline: 0.625rem; font-size: 0.6875rem; }
  }

  @keyframes mk-news-ticker-scroll {
    to { translate: -50% 0; }
  }
  @keyframes mk-news-ticker-pulse {
    50% { opacity: 0.3; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-news-ticker {
      & .mk-news-ticker-viewport { overflow-x: auto; mask-image: none; }
      & .mk-news-ticker-track { animation: none; }
      & .mk-news-ticker-items[aria-hidden="true"] { display: none; }
      & .mk-news-ticker-label::before { animation: none; }
    }
  }

  @media (prefers-contrast: more) {
    .mk-news-ticker { border-color: var(--foreground); }
    .mk-news-ticker-items time { color: var(--foreground); }
  }

  @media (forced-colors: active) {
    .mk-news-ticker-label { forced-color-adjust: none; background: Highlight; color: HighlightText; }
    .mk-news-ticker-items a { color: LinkText; }
  }
}

/* ── components/newsletter/newsletter.css ── */
/* -- Newsletter (marketing) ----------------------------------------
   Two-column sign-up band: copy left, inline email form right. The
   form is a real <form> + <input type="email"> - browser validation
   and the native keyboard work for free. */

@layer components {
  .mk-newsletter {
    container: mk-newsletter / inline-size;
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
  }

  .mk-newsletter-layout {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3rem;
  }

  .mk-newsletter-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    max-width: 48rem;
    text-align: left;
  }

  .mk-newsletter-title {
    line-height: 1.15;
    margin: 0;
    font-size: 1.875rem;
    font-weight: 500;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  .mk-newsletter-desc { margin: 0; max-width: 42rem; color: var(--muted-foreground); font-size: 1rem; text-wrap: pretty; }

  .mk-newsletter-form-col { display: flex; flex-direction: column; gap: 0.5rem; }

  .mk-newsletter-form { display: flex; flex-direction: column; gap: 0.5rem; }

  .mk-newsletter-form .input { width: 100%; }

  .mk-newsletter-form .btn { width: 100%; }

  /* note and error sit just inside the input's edge */
  .mk-newsletter-note,
  .mk-newsletter-error {
    padding-inline-start: 0.375rem;
    font-size: 0.75rem;
  }
  .mk-newsletter-note { color: var(--muted-foreground); }

  /* the error shows only after an attempt - :user-invalid, no script */
  .mk-newsletter-error {
    display: none;
    align-items: center;
    gap: 0.25rem;
    color: var(--destructive);
    font-weight: 500;

    & svg { width: 0.875rem; height: 0.875rem; flex: none; }
  }
  .mk-newsletter-form-col:has(input:user-invalid) {
    & .mk-newsletter-error { display: flex; }
    & .mk-newsletter-note { display: none; }
  }

  @container mk-newsletter (min-width: 30rem) {
    .mk-newsletter-layout { flex-direction: row; }
    .mk-newsletter-form-col { align-self: flex-end; }
    .mk-newsletter-form { flex-direction: row; }
    .mk-newsletter-form .input { width: fit-content; }
    .mk-newsletter-form .btn { width: auto; }
  }

  @container mk-newsletter (min-width: 52rem) {
    .mk-newsletter-layout { gap: 4rem; }
    .mk-newsletter-title { font-size: 2.25rem; }
    .mk-newsletter-form-col { gap: 0.75rem; }
  }
  /* card: centered on a surface - an icon, the form, social proof */
  .mk-newsletter[data-variant="card"] .mk-newsletter-layout {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    max-width: 36rem;
    margin-inline: auto;
    padding: 2.5rem 2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background:
      radial-gradient(80% 60% at 50% 0%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 70%),
      var(--card);
    text-align: center;

    & .mk-newsletter-copy { align-items: center; text-align: center; }
    & .mk-newsletter-form-col { align-self: stretch; }
    /* centered card: the input + button row and the note/error under it center too */
    & :is(.mk-newsletter-note, .mk-newsletter-error) { justify-content: center; padding-inline-start: 0; text-align: center; }
  }
  @container mk-newsletter (min-width: 30rem) {
    .mk-newsletter[data-variant="card"] .mk-newsletter-form { justify-content: center; }
    .mk-newsletter[data-variant="card"] .mk-newsletter-form .input { flex: 0 1 18rem; width: auto; }
  }
  .mk-newsletter-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-lg);
    background: var(--primary);
    color: var(--primary-foreground);

    & svg { width: 1.375rem; height: 1.375rem; }
  }
  .mk-newsletter-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--muted-foreground);
    font-size: 0.8125rem;

    & strong { color: var(--foreground); }
  }

  /* banner: a gradient strip - copy and form on one row */
  .mk-newsletter[data-variant="banner"] .mk-newsletter-layout {
    align-items: center;
    padding: 1.75rem 2rem;
    border-radius: var(--radius-xl);
    background: linear-gradient(120deg, var(--primary), color-mix(in oklch, var(--chart-2) 70%, var(--primary)));
    color: var(--primary-foreground);

    & .mk-newsletter-title { font-size: 1.5rem; }
    & .mk-newsletter-desc,
    & .mk-newsletter-note { color: color-mix(in oklch, var(--primary-foreground) 75%, transparent); }
    & .input { background: color-mix(in oklch, var(--primary-foreground) 92%, transparent); color: #111; }
    & .btn { background: var(--primary-foreground); color: var(--primary); }
  }

  /* topics: pick lists with Checkboxes */
  .mk-newsletter-topics {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border: 0;

    & legend { margin-block-end: 0.5rem; font-size: 0.875rem; font-weight: 600; }
  }
  .mk-newsletter-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 2rem 3rem;
    align-items: center;

    & img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-xl); }
    & form { display: grid; gap: 1rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-newsletter[data-variant="banner"] .mk-newsletter-layout { border: 1px solid CanvasText; }
  }
}

/* ── components/notification-settings/notification-settings.css ── */
/* -- Notification Settings (website · Account & States) -------------------
   Controls notification topics and delivery channels - a matrix of topics by channel, or a list of switches with a digest frequency. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-notification-settings, .mk-notification-settings *, .mk-notification-settings ::before, .mk-notification-settings ::after) { box-sizing: border-box; }

  .mk-notification-settings { width: 100%; max-width: 44rem; overflow-x: auto; border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);
    & table { width: 100%; border-collapse: collapse; }
    & th, & td { padding: 0.875rem 1rem; border-block-end: 1px solid var(--border); }
    & tr:last-child > * { border-block-end: 0; }
    & thead th { color: var(--muted-foreground); font-size: 0.8125rem; font-weight: 600; text-align: center; }
    & thead th:first-child { text-align: start; }
    & tbody th { text-align: start; font-weight: 600; font-size: 0.9375rem; }
    & tbody th small { display: block; color: var(--muted-foreground); font-size: 0.8125rem; font-weight: 400; }
    & td { width: 5.5rem; text-align: center; }
  }
  .mk-notification-settings tbody tr:has(:checked) th { color: var(--foreground); }

  .mk-notification-settings[data-variant="list"] { padding: 0.5rem 1.25rem; overflow: visible;
    & ul { margin: 0; padding: 0; list-style: none; }
    & li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.875rem; border-block-end: 1px solid var(--border); }
    & li label { display: grid; font-weight: 600; font-size: 0.9375rem; }
    & li small { color: var(--muted-foreground); font-size: 0.8125rem; font-weight: 400; }
  }
  .mk-notification-settings-digest { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; font-size: 0.9375rem;
    & .select { width: auto; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-notification-settings { border-color: CanvasText; }
  }
}

/* ── components/number-input/number-input.css ── */
/* -- Number Input component ------------------------------------- */

@layer components {
  .number-input {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    /* explicit border-box: the size ladder below sets an explicit container
       height and must land on it exactly (a div is content-box by default;
       inputs get border-box from the UA). The unsized default keeps its
       auto height (children drive it), so this changes nothing today. */
    box-sizing: border-box;
    /* explicit default box height (the size ladder below does the rest): an
       auto-height box let the UA-padding children overshoot to 44px. The
       unsized default IS the ladder's md step - field standard, see .input */
    height: 2.25rem;

    & input {
      border: none;
      outline: none;
      background: transparent;
      height: 100%;
      /* 4rem basis, but GROWS when the container is widened (w-full demos,
         grid cells): a fixed width left dead space after the + button.
         width pins the intrinsic size too - Chrome otherwise derives a
         number input's width from the digit count of max (no max: ~170px,
         max="100": 34px), so the field width followed a validation attr. */
      flex: 1 1 4rem;
      width: 4rem;
      min-width: 0;
      text-align: center;
      font-size: 0.875rem;
      font-family: var(--font-sans);
      color: var(--foreground);
      -moz-appearance: textfield;

      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    }

    & button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      /* height:100% so the button can't overshoot the container's border-box
         height (the ladder below already sets children to 100%) */
      height: 100%;
      border: none;
      background: transparent;
      color: var(--muted-foreground);
      cursor: pointer;
      font-size: 1rem;
      font-family: var(--font-sans);
      transition: background 150ms, color 150ms;
      flex-shrink: 0;

      &:hover {
        background: var(--accent);
        color: var(--accent-foreground);
      }

      &:first-child {
        border-right: 1px solid var(--input);
      }

      &:last-child {
        border-left: 1px solid var(--input);
      }
    }

    /* -- Unit affix: <label class="number-input-unit" for="…"> -----
       A unit (°C, %, kg, €, h) sits before or after the input. It is a
       second <label> for the input: clicking it focuses the field and the
       unit joins the accessible name ("Temperature °C"). The value aligns
       TOWARD the unit so number + unit read as one ("19.0 °C", "€ 24.90"). */
    & .number-input-unit {
      display: flex;
      align-items: center;
      align-self: stretch;
      flex-shrink: 0;
      padding-inline: 0.25rem;
      color: var(--muted-foreground);
      font-size: 0.875rem;
      font-family: var(--font-sans);
      white-space: nowrap;
      cursor: text;

      /* edge of the box (no stepper on that side): field padding */
      &:first-child { padding-inline-start: 0.75rem; }
      &:last-child { padding-inline-end: 0.75rem; }
    }

    /* NOT user-select: none - the unit is part of the value when text is
       selected, copied or exported ("72,5 kg", not a bare "72,5") */

    &:has(input:not([type="hidden"]) + .number-input-unit) input { text-align: end; }
    &:has(.number-input-unit + input:not([type="hidden"])) input { text-align: start; }

    /* currency fields carry grouped amounts ("1.234.567,89") */
    &[data-currency] input { width: 8rem; }

    /* stepper-less field (currency, measurements): the input reaches the box
       edge - give it the regular field padding there */
    & input:first-child { padding-inline-start: 0.75rem; }
    & input:last-child { padding-inline-end: 0.75rem; }

    &:focus-within {
      border-color: var(--ring);
      box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.2);
    }

    /* -- Sizes -------------------------------------------------
       Container height + input/button/font scale together, matching the
       input/button ladders (md = 2.25rem; the unsized default stays at the
       historical 2.5rem, exactly like .input does). Children switch to
       height:100% so they can't fight the container. */
    &[data-size="xs"] {
      height: 1.75rem;
      & input { height: 100%; width: 3rem; font-size: 0.75rem; }
      & button { height: 100%; width: 1.5rem; font-size: 0.875rem; }
      & .number-input-unit { font-size: 0.75rem; }
    }
    &[data-size="sm"] {
      height: 2rem;
      & input { height: 100%; width: 3.5rem; font-size: 0.8125rem; }
      & button { height: 100%; width: 1.75rem; font-size: 0.9375rem; }
      & .number-input-unit { font-size: 0.8125rem; }
    }
    &[data-size="md"] {
      height: 2.25rem;
      & input { height: 100%; font-size: 0.875rem; }
      & button { height: 100%; }
    }
    &[data-size="lg"] {
      height: 2.75rem;
      & input { height: 100%; width: 4.5rem; font-size: 1rem; }
      & button { height: 100%; width: 2.25rem; font-size: 1.125rem; }
      & .number-input-unit { font-size: 1rem; }
    }
    &[data-size="xl"] {
      height: 3.25rem;
      & input { height: 100%; width: 5rem; font-size: 1.125rem; }
      & button { height: 100%; width: 2.5rem; font-size: 1.25rem; }
      & .number-input-unit { font-size: 1.125rem; }
    }
  }
}

/* Accessibility: suppress motion for users who request it (REQUIRED for all
   components - AGENTS.md "Accessibility CSS"). Near-zero duration instead of
   `none` keeps transitionend/animationend (and discrete display flips)
   firing so JS state machines that await them keep working. */
@media (prefers-reduced-motion: reduce) {
  @layer components {
    .number-input,
    .number-input *,
    .number-input::before,
    .number-input::after,
    .number-input *::before,
    .number-input *::after,
    .number-input::backdrop {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

/* ── components/offer-banner/offer-banner.css ── */
/* -- Offer Banner (website · Events & Promotions) -------------------------
   Presents a promotion with its conditions and action - a gradient card, a slim ribbon or a coupon with a tear-off edge. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-offer-banner, .mk-offer-banner *, .mk-offer-banner ::before, .mk-offer-banner ::after) { box-sizing: border-box; }

  .mk-offer-banner { container: mk-offer-banner / inline-size; width: 100%; }
  .mk-offer-banner-inner {
    display: grid;
    gap: 1.25rem;
    align-items: center;
    padding: 2rem;
    border-radius: var(--radius-xl);
    background:
      radial-gradient(60% 120% at 0% 0%, color-mix(in oklch, var(--chart-1) 32%, transparent), transparent 70%),
      radial-gradient(60% 120% at 100% 100%, color-mix(in oklch, var(--chart-3) 28%, transparent), transparent 70%),
      var(--card);
    border: 1px solid var(--border);
  }
  .mk-offer-banner-discount { font-size: clamp(3rem, 10cqi, 5rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
  .mk-offer-banner-copy { display: grid; gap: 0.5rem; }
  .mk-offer-banner-title { margin: 0; font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
  .mk-offer-banner-terms { color: var(--muted-foreground); font-size: 0.8125rem; line-height: 1.5; }
  .mk-offer-banner-action { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
  .mk-offer-banner-code {
    padding: 0.375rem 0.75rem;
    border: 1.5px dashed currentColor;
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    user-select: all;
  }

  .mk-offer-banner[data-variant="ribbon"] .mk-offer-banner-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    padding: 0.625rem 1rem;
    border: 0;
    border-radius: 0;
    background: linear-gradient(90deg, var(--chart-1), var(--chart-3));
    color: #fff;
    font-size: 0.875rem;
    text-align: center;

    & .mk-offer-banner-title { font-size: 0.875rem; font-weight: 600; }
    & .mk-offer-banner-code { padding: 0.0625rem 0.5rem; font-size: 0.8125rem; border-color: oklch(1 0 0 / 0.7); }
    & .mk-offer-banner-terms { color: oklch(1 0 0 / 0.85); }
  }

  /* coupon: notched edges and a dashed tear line */
  .mk-offer-banner[data-variant="coupon"] .mk-offer-banner-inner {
    --_notch: 0.875rem;

    grid-template-columns: auto 1fr;
    gap: 0;
    padding: 0;
    border: 0;
    background: color-mix(in oklab, var(--chart-4) 18%, var(--card));
    mask:
      radial-gradient(circle at 0 50%, #0000 var(--_notch), #000 calc(var(--_notch) + 0.5px)) left / 51% 100% no-repeat,
      radial-gradient(circle at 100% 50%, #0000 var(--_notch), #000 calc(var(--_notch) + 0.5px)) right / 51% 100% no-repeat;

    & .mk-offer-banner-discount { display: grid; place-items: center; height: 100%; padding: 1.5rem 2rem; border-inline-end: 2px dashed color-mix(in oklch, var(--foreground) 25%, transparent); font-size: clamp(2.25rem, 7cqi, 3.5rem); }
    & .mk-offer-banner-copy { padding: 1.5rem 2rem; }
  }

  @container mk-offer-banner (min-width: 44rem) {
    .mk-offer-banner:not([data-variant]) .mk-offer-banner-inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 2.5rem; padding: 2rem 2.5rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-offer-banner-inner { border: 1px solid CanvasText; }
    .mk-offer-banner[data-variant="coupon"] .mk-offer-banner-inner { mask: none; }
  }
}

/* ── components/opening-hours/opening-hours.css ── */
/* -- Opening Hours (website · Events & Promotions) ------------------------
   Displays operating hours and date-specific exceptions - the week with today marked, whether it is open now, and the holidays. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-opening-hours, .mk-opening-hours *, .mk-opening-hours ::before, .mk-opening-hours ::after) { box-sizing: border-box; }

  .mk-opening-hours { display: grid; gap: 1rem; max-width: 24rem; padding: 1.5rem; border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground); }
  .mk-opening-hours-title { margin: 0; font-size: 1rem; font-weight: 600; }
  .mk-opening-hours-status { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; color: #15803d; font-size: 0.875rem; font-weight: 600;
    &::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent); }
    & span { color: var(--muted-foreground); font-weight: 400; }
  }
  .mk-opening-hours-days {
    display: grid;
    margin: 0;

    & div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-md); font-size: 0.9375rem; }
    & dt { color: var(--muted-foreground); }
    & dd { margin: 0; font-variant-numeric: tabular-nums; }
    & [aria-current] { background: var(--muted); font-weight: 600; }
    & [aria-current] dt { color: var(--foreground); }
    & [data-closed] dd { color: var(--muted-foreground); }
  }
  .mk-opening-hours-exceptions {
    display: grid;
    gap: 0.375rem;
    margin: 0;
    padding: 0.875rem 0 0;
    border-block-start: 1px solid var(--border);
    list-style: none;
    font-size: 0.875rem;

    & li { display: flex; justify-content: space-between; gap: 1rem; }
    & span { color: var(--muted-foreground); }
  }

  .mk-opening-hours[data-variant="compact"] {
    gap: 0.25rem;
    padding: 0;
    border: 0;
    background: transparent;

    & p { margin: 0; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
    & strong { font-weight: 600; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-opening-hours-days [aria-current] { outline: 1px solid Highlight; }
  }
}

/* ── components/order-confirmation/order-confirmation.css ── */
/* -- Order Confirmation (website · Shop) ----------------------------------
   Confirms a completed purchase and provides its reference - a check that draws itself, the order number, what happens next and where to go. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-order-confirmation, .mk-order-confirmation *, .mk-order-confirmation ::before, .mk-order-confirmation ::after) { box-sizing: border-box; }

  .mk-order-confirmation { display: grid; justify-items: center; gap: 1.5rem; max-width: 40rem; margin-inline: auto; padding: 2.5rem 1.5rem; text-align: center; }
  .mk-order-confirmation-check {
    width: 4.5rem;
    height: 4.5rem;
    color: #16a34a;

    & circle { fill: color-mix(in oklch, #16a34a 12%, transparent); stroke: currentColor; stroke-width: 2; }
    & path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 0; animation: mk-order-check 600ms 200ms cubic-bezier(.65,0,.35,1) both; }
  }
  @keyframes mk-order-check { from { stroke-dashoffset: 30; } }
  .mk-order-confirmation-title { margin: 0; font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
  .mk-order-confirmation-lead { margin: -0.5rem 0 0; color: var(--muted-foreground); text-wrap: pretty;
    & code { padding: 0.125rem 0.375rem; border-radius: var(--radius-sm); background: var(--muted); color: var(--foreground); font-family: var(--font-mono); font-weight: 700; user-select: all; }
  }
  .mk-order-confirmation-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 1px;
    width: 100%;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--border);
    text-align: start;

    & div { display: grid; gap: 0.25rem; padding: 1rem 1.25rem; background: var(--card); }
    & dt { color: var(--muted-foreground); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
    & dd { margin: 0; font-size: 0.9375rem; }
    & address { font-style: normal; }
  }
  .mk-order-confirmation-steps { display: grid; gap: 0.75rem; width: 100%; margin: 0; padding: 0; list-style: none; counter-reset: mk-oc; text-align: start;
    & li { counter-increment: mk-oc; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.75rem; align-items: start; font-size: 0.9375rem; }
    & li::before { content: counter(mk-oc); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--muted); font-size: 0.8125rem; font-weight: 700; }
    & span { color: var(--muted-foreground); }
  }
  .mk-order-confirmation-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-order-confirmation-check path { animation: none; }
  }

  @media (forced-colors: active) {
    .mk-order-confirmation-check { color: CanvasText; }
    .mk-order-confirmation-details { border-color: CanvasText; }
  }
}

/* ── components/order-summary/order-summary.css ── */
/* -- Order Summary (website · Shop) ---------------------------------------
   Displays an order's items and charge breakdown - pictures with quantity badges, the lines, discount, shipping and total; collapsible on small screens. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-order-summary, .mk-order-summary *, .mk-order-summary ::before, .mk-order-summary ::after) { box-sizing: border-box; }

  .mk-order-summary { display: grid; gap: 1.25rem; padding: 1.5rem; border-radius: var(--radius-xl); background: var(--muted); max-width: 26rem; }
  .mk-order-summary-title { margin: 0; font-size: 1rem; font-weight: 600; }
  .mk-order-summary-items { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none;
    & li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.875rem; }
  }
  .mk-order-summary-thumb { position: relative;
    & img { display: block; width: 3.5rem; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--background); }
    & b { position: absolute; top: -0.5rem; right: -0.5rem; display: grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding-inline: 0.25rem; border-radius: 999px; background: var(--muted-foreground); color: var(--background); font-size: 0.6875rem; font-weight: 700; box-sizing: border-box; }
  }
  .mk-order-summary-name { display: grid; font-size: 0.875rem; font-weight: 600;
    & small { color: var(--muted-foreground); font-size: 0.8125rem; font-weight: 400; }
  }
  .mk-order-summary-price { font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
  .mk-order-summary-totals { display: grid; gap: 0.5rem; margin: 0; padding-block-start: 1rem; border-block-start: 1px solid var(--border);
    & div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.875rem; }
    & dt { color: var(--muted-foreground); }
    & dd { margin: 0; font-variant-numeric: tabular-nums; }
    & [data-discount] dd { color: #15803d; }
    & [data-total] { align-items: baseline; margin-block-start: 0.5rem; padding-block-start: 0.875rem; border-block-start: 1px solid var(--border); }
    & [data-total] dt { color: var(--foreground); font-size: 1rem; font-weight: 600; }
    & [data-total] small { display: block; color: var(--muted-foreground); font-size: 0.75rem; font-weight: 400; }
    & [data-total] dd { font-size: 1.375rem; font-weight: 700; }
  }

  .mk-order-summary[data-variant="collapsible"] {
    gap: 0;
    padding: 0;

    & > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; cursor: pointer; list-style: none; color: var(--primary); font-size: 0.9375rem; font-weight: 600; }
    & > summary::-webkit-details-marker { display: none; }
    & > summary span { display: inline-flex; align-items: center; gap: 0.375rem; }
    & > summary svg { width: 1rem; height: 1rem; transition: rotate 200ms ease; }
    &[open] > summary svg { rotate: 180deg; }
    & > summary b { color: var(--foreground); font-size: 1.125rem; font-variant-numeric: tabular-nums; }
    & > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; border-radius: var(--radius-xl); }
    & > div { display: grid; gap: 1.25rem; padding: 0 1.25rem 1.25rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-order-summary[data-variant="collapsible"] > summary svg { transition: none; }
  }

  @media (forced-colors: active) {
    .mk-order-summary { border: 1px solid CanvasText; }
  }
}

/* ── components/otp-input/otp-input.css ── */
/* -- OTP Input -------------------------------------------------- */
/* One real <input> under a row of slots. The input keeps every native */
/* behaviour (paste, one-time-code autofill, selection, form value);   */
/* the slots are a mirror of its value.                                */

@layer components {
  .otp-input {
    --otp-input-slot-size: 2.75rem;

    position: relative;
    display: inline-flex;
    width: max-content;

    /* The field covers the slots so clicks, drags and taps land on the real
       control. Its own text is invisible — the slots do the drawing — but it
       stays a normal input to the browser and to assistive technology. */
    & > input {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: transparent;
      caret-color: transparent;
      font-size: 1rem; /* >=16px keeps iOS from zooming on focus */
      text-align: center;
      outline: none;
      cursor: text;

      /* the selection highlight would show through the transparent text */
      &::selection {
        background: transparent;
      }

      &:disabled {
        cursor: not-allowed;
      }
    }
  }

  .otp-input-slots {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none; /* the field beneath owns every pointer event */
  }

  .otp-input-slot {
    /* --otp-input-slot-size is the outer size, border included */
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: var(--otp-input-slot-size);
    height: var(--otp-input-slot-size);
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: 1.125rem;
    font-variant-numeric: tabular-nums;
    transition: border-color 150ms, box-shadow 150ms;

    &[data-filled] {
      border-color: var(--ring);
    }

    /* the slot the caret sits in — the field's own caret is hidden */
    &[data-active],
    &[data-caret] {
      border-color: var(--ring);
      box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 25%, transparent);
    }

    &[data-caret]::after {
      content: "";
      width: 1px;
      height: 1.125rem;
      background: var(--foreground);
      animation: otp-input-caret 1s steps(2, start) infinite;
    }
  }

  /* Gap between groups, e.g. 3-3 for a six digit code. */
  .otp-input-separator {
    width: 0.75rem;
    height: 1px;
    background: var(--border);
    flex-shrink: 0;
  }

  /* -- Invalid ------------------------------------------------ */
  .otp-input[data-invalid] .otp-input-slot {
    border-color: var(--destructive);

    &[data-active],
    &[data-caret] {
      box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 25%, transparent);
    }
  }

  /* -- Disabled ----------------------------------------------- */
  /* Deliberately not a blanket opacity fade: the digits must stay readable,
     so only the surface dims while the border and text keep their contrast. */
  .otp-input:has(> input:disabled) .otp-input-slot {
    background: var(--muted);
    color: var(--muted-foreground);
    border-color: var(--border);
  }

  @keyframes otp-input-caret {
    0% { opacity: 1; }
    100% { opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer components {
    .otp-input,
    .otp-input *,
    .otp-input::before,
    .otp-input::after,
    .otp-input *::before,
    .otp-input *::after,
    .otp-input-slot,
    .otp-input-slot::before,
    .otp-input-slot::after {
      transition: none;
      animation: none;
    }
  }
}

@media (prefers-contrast: more) {
  @layer components {
    .otp-input-slot {
      border-width: 2px;
      border-color: var(--foreground);
    }

    .otp-input[data-invalid] .otp-input-slot {
      border-color: var(--destructive);
    }
  }
}

@media (forced-colors: active) {
  @layer components {
    .otp-input-slot {
      border-color: ButtonText;
      color: ButtonText;

      &[data-active],
      &[data-caret] {
        border-color: Highlight;
      }
    }

    .otp-input[data-invalid] .otp-input-slot {
      border-color: LinkText;
    }

    .otp-input:has(> input:disabled) .otp-input-slot {
      border-color: GrayText;
      color: GrayText;
    }
  }
}

/* ── components/page-not-found/page-not-found.css ── */
/* -- 404 Page (website · Account & States) --------------------------------
   Tells visitors the page does not exist and helps them on - a big 404, a search, the most useful links and the way home. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-page-not-found, .mk-page-not-found *, .mk-page-not-found ::before, .mk-page-not-found ::after) { box-sizing: border-box; }

  .mk-page-not-found { container: mk-page-not-found / inline-size; position: relative; isolation: isolate; display: grid; justify-items: center; gap: 1.25rem; width: 100%; padding: 3rem 1.5rem; overflow: hidden; text-align: center; }
  .mk-page-not-found-code { margin: 0; font-size: clamp(5rem, 22cqi, 10rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 2px color-mix(in oklch, var(--foreground) 25%, transparent); font-variant-numeric: tabular-nums; }
  .mk-page-not-found-title { margin: 0; font-size: 1.875rem; font-weight: 700; letter-spacing: -0.02em; }
  .mk-page-not-found-text { margin: 0; max-width: 28rem; color: var(--muted-foreground); text-wrap: pretty; }
  .mk-page-not-found-search { display: flex; gap: 0.5rem; width: 100%; max-width: 24rem;
    & .input { flex: 1; min-width: 0; }
  }
  .mk-page-not-found-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 0.5rem; width: 100%; max-width: 36rem; margin: 0.5rem 0 0; padding: 0; list-style: none; text-align: start;
    & a { display: grid; gap: 0.125rem; padding: 0.875rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); color: inherit; text-decoration: none; transition: border-color 150ms ease; }
    & a:hover { border-color: color-mix(in oklch, var(--foreground) 30%, var(--border)); }
    & a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
    & strong { display: flex; align-items: center; gap: 0.375rem; font-size: 0.9375rem; }
    & strong svg { width: 1rem; height: 1rem; }
    & span { color: var(--muted-foreground); font-size: 0.8125rem; }
  }

  .mk-page-not-found[data-variant="illustrated"] {
    padding-block: 6rem;

    & .mk-page-not-found-code { position: absolute; top: 50%; left: 50%; z-index: -1; translate: -50% -55%; font-size: clamp(9rem, 45cqi, 22rem); -webkit-text-stroke: 0; background: linear-gradient(180deg, color-mix(in oklab, var(--chart-1) 30%, transparent), transparent 85%); -webkit-background-clip: text; background-clip: text; }
  }
  .mk-page-not-found[data-variant="minimal"] { gap: 0.75rem; padding-block: 2rem;
    & .mk-page-not-found-code { font-size: 4rem; -webkit-text-stroke: 0; color: var(--muted-foreground); }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-page-not-found-links a { transition: none; }
  }

  @media (forced-colors: active) {
    .mk-page-not-found-code { -webkit-text-stroke-color: CanvasText; background: none; color: GrayText; }
  }
}

/* ── components/pagination/pagination.css ── */
@layer components {
  .pagination { display: flex; justify-content: center; }
  .pagination-list { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
  .pagination-link, .pagination-prev, .pagination-next {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.25rem; height: 2.25rem; padding-inline: 0.5rem;
    border: 1px solid transparent; border-radius: var(--radius-md);
    font-size: 0.875rem; color: var(--foreground); text-decoration: none;
    cursor: pointer; outline: none;
    transition: background-color 150ms ease, border-color 150ms ease; gap: 0.25rem;
    &:hover { background-color: var(--accent); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
    & svg { width: 1rem; height: 1rem; flex-shrink: 0; }

    /* Disabled state for prev/next at boundaries */
    &[aria-disabled="true"], &.disabled {
      pointer-events: none;
      opacity: 0.5;
    }
  }
  .pagination-prev, .pagination-next { padding-inline: 0.75rem; gap: 0.375rem; }
  .pagination-active { border-color: var(--border); background-color: var(--background); font-weight: 500; }
  .pagination-ellipsis {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; color: var(--muted-foreground);
    & span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  }

  /* -- Sizes ----------------------------------------------------
     Set data-size on the .pagination nav; every cell (page links, prev/next,
     ellipsis) scales. :where() keeps each rule at one class of specificity
     so the .pagination-prev padding-inline above still wins per-item.
     md == the unsized default. */
  .pagination:where([data-size="xs"]) {
    & :is(.pagination-link, .pagination-prev, .pagination-next) { min-width: 1.75rem; height: 1.75rem; font-size: 0.75rem; }
    & .pagination-ellipsis { width: 1.75rem; height: 1.75rem; }
  }
  .pagination:where([data-size="sm"]) {
    & :is(.pagination-link, .pagination-prev, .pagination-next) { min-width: 2rem; height: 2rem; font-size: 0.8125rem; }
    & .pagination-ellipsis { width: 2rem; height: 2rem; }
  }
  .pagination:where([data-size="md"]) {
    & :is(.pagination-link, .pagination-prev, .pagination-next) { min-width: 2.25rem; height: 2.25rem; font-size: 0.875rem; }
    & .pagination-ellipsis { width: 2.25rem; height: 2.25rem; }
  }
  .pagination:where([data-size="lg"]) {
    & :is(.pagination-link, .pagination-prev, .pagination-next) { min-width: 2.5rem; height: 2.5rem; font-size: 1rem; }
    & .pagination-ellipsis { width: 2.5rem; height: 2.5rem; }
  }
  .pagination:where([data-size="xl"]) {
    & :is(.pagination-link, .pagination-prev, .pagination-next) { min-width: 2.75rem; height: 2.75rem; font-size: 1.125rem; }
    & .pagination-ellipsis { width: 2.75rem; height: 2.75rem; }
  }

  /* -- Variants (data-variant on the .pagination nav) -----------
     outline: every cell a bordered button; joined: one segmented bar -
     shared borders collapse, only the outer corners round (logical radii,
     so RTL mirrors for free). The active page gets a filled surface so it
     still stands out among bordered cells. */
  .pagination:is([data-variant="outline"], [data-variant="joined"]) {
    & :is(.pagination-link, .pagination-prev, .pagination-next) {
      border-color: var(--border);
      background-color: var(--background);
      box-shadow: var(--shadow-xs);
      &:hover { background-color: var(--accent); color: var(--accent-foreground); }
    }
    & .pagination-active { background-color: var(--accent); color: var(--accent-foreground); }
  }
  .pagination[data-variant="joined"] {
    & .pagination-list { gap: 0; }
    & :is(.pagination-link, .pagination-prev, .pagination-next, .pagination-ellipsis) { border-radius: 0; }
    /* the ellipsis joins the chain instead of floating between two groups */
    & .pagination-ellipsis { border: 1px solid var(--border); background-color: var(--background); }
    & .pagination-list > li:first-child > * { border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); }
    & .pagination-list > li:last-child > * { border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }
    & .pagination-list > li + li > * { margin-inline-start: -1px; }
    /* the hovered / focused / active cell's own border stays on top */
    & :is(.pagination-link, .pagination-prev, .pagination-next):is(:hover, :focus-visible),
    & .pagination-active { position: relative; z-index: 1; }
  }

  /* -- Layout: split - previous / next as two equal columns across the
     full width (daisyUI's two-column pager) --------------------------- */
  .pagination[data-layout="split"] {
    width: 100%;
    & .pagination-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; width: 100%; }
    & .pagination-list > li { display: flex; }
    & :is(.pagination-link, .pagination-prev, .pagination-next) { flex: 1; }
  }
  .pagination[data-layout="split"][data-variant="joined"] .pagination-list { gap: 0; }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    .pagination-link, .pagination-prev, .pagination-next { transition: none; }
  }

  @media (prefers-contrast: more) {
    .pagination-link, .pagination-prev, .pagination-next {
      border-color: var(--border);
      &:hover { border-color: var(--foreground); }
    }
    .pagination-active { border-width: 2px; }
  }

  @media (forced-colors: active) {
    .pagination-active {
      border-color: Highlight;
    }
    .pagination-link, .pagination-prev, .pagination-next {
      &:hover { forced-color-adjust: none; background: Highlight; color: HighlightText; }
      &[aria-disabled="true"], &.disabled { color: GrayText; }
    }
    .pagination[data-variant="joined"] :is(.pagination-link, .pagination-prev, .pagination-next, .pagination-ellipsis) {
      border-color: ButtonText;
    }
  }
  /* -- Density ----------------------------------------------------
     data-density on the .pagination nav scales only the inter-cell gap —
     the size ladder owns cell dimensions, so size and density stay
     independent axes. Ratio mirrors sizing.css (0.75 / 1 / 1.25). */
  .pagination:where([data-density="compact"]) { & .pagination-list { gap: 0.125rem; } }
  .pagination:where([data-density="comfortable"]) { & .pagination-list { gap: 0.25rem; } }
  .pagination:where([data-density="spacious"]) { & .pagination-list { gap: 0.5rem; } }

}

/* ── components/panel/panel.css ── */
/* -- Panel component ----------------------------------------------
   A title bar inside a card - icon, title and tools (minimize / maximize are
   Swaps) above a scrolling body. Minimized it is the title bar only; as the
   pane of a border-layout region it takes the region with it: north / south
   shrink to the bar, west / east turn the bar into a vertical tab (after the
   ExtJS 4 border layout). Maximized it fills its border layout, a
   [data-panel-host] or the viewport. Builds on .card (surface, border,
   radius) and .swap (the tool faces). */

@layer components {
  .panel {
    /* the card's padding scale, a notch tighter for tool-like bodies */
    --_base: 1rem;
    --_bar: 2.5rem;
    --_bar-bg: color-mix(in oklch, var(--muted) 60%, var(--card));

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;

    /* -- Title bar -------------------------------------------------- */
    & > .panel-header {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex: none;
      min-block-size: var(--_bar);
      box-sizing: border-box;
      padding-block: 0.25rem;
      padding-inline: 0.75rem 0.375rem;
      border-block-end: 1px solid var(--border);
      background: var(--_bar-bg);
      color: var(--foreground);
      user-select: none;
    }

    & .panel-icon {
      flex: none;
      width: 1rem;
      height: 1rem;
      color: var(--muted-foreground);
    }

    & .panel-title {
      flex: 1;
      min-inline-size: 0;
      margin: 0;
      overflow: hidden;
      font: inherit;
      font-size: 0.875rem;
      font-weight: 600;
      line-height: 1.25;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    /* tools: the swaps (and any .btn) at the end of the bar */
    & .panel-tools {
      display: flex;
      align-items: center;
      gap: 0.125rem;
      flex: none;
      margin-inline-start: auto;
    }

    /* small tool buttons - the swap at icon-button size */
    & > .panel-header .panel-tools .swap {
      min-width: 1.75rem;
      min-height: 1.75rem;
      color: var(--muted-foreground);

      & svg:not([class*="size-"]) { width: 1rem; height: 1rem; }
      &:hover:not(:has(> input:disabled)) { color: var(--accent-foreground); }
    }

    /* -- Body ----------------------------------------------------------- */
    & > .panel-body {
      flex: 1;
      min-block-size: 0;
      overflow: auto;
      padding: var(--_pad, 1rem);
    }
    /* a body that brings its own layout (a list, a table, a code view) */
    & > .panel-body[data-flush] { padding: 0; }

    & > .panel-footer {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex: none;
      padding: 0.5rem 0.75rem;
      border-block-start: 1px solid var(--border);
      background: var(--_bar-bg);
      font-size: 0.8125rem;
      color: var(--muted-foreground);
    }

    /* -- Minimized: the title bar only ------------------------------------- */
    &[data-minimized] {
      & > :not(.panel-header) { display: none; }
      & > .panel-header { border-block-end-color: transparent; }
    }
    /* the authored height (inline, or the resizer's px) gives way to the bar */
    &[data-minimized]:not([data-region="west"], [data-region="east"]) {
      height: auto !important;
      min-height: 0;
    }

    /* west / east: the bar turns into a vertical tab, the width to the bar's */
    &[data-minimized]:is([data-region="west"], [data-region="east"]) {
      width: auto !important;
      min-width: 0;
      /* the card's inline-size containment would size the tab to zero */
      container-type: normal;

      & > .panel-header {
        flex: 1;
        writing-mode: vertical-rl;
        padding-block: 0.25rem;
        padding-inline: 0.375rem 0.75rem;
        border-block-end: 0;
      }
      /* the restore tool leads, like ExtJS's collapsed placeholder */
      & .panel-tools { order: -1; margin-inline: 0 0.25rem; }
      & .panel-maximize { display: none; }
    }

    /* the minimize chevron points where the panel folds to */
    &[data-region="south"] .panel-minimize { rotate: 180deg; }
    &[data-region="west"] .panel-minimize { rotate: -90deg; }
    &[data-region="east"] .panel-minimize { rotate: 90deg; }

    /* -- Maximized: fills the viewport ... -------------------------------- */
    &[data-maximized] {
      position: fixed;
      inset: 0;
      z-index: 50;
      width: auto !important;
      height: auto !important;
      max-width: none;
      max-height: none;
      margin: 0;
      border-radius: 0;
      box-shadow: var(--shadow-xl);
    }
  }

  /* ... or its border layout / [data-panel-host] */
  :is(.border-layout, [data-panel-host])[data-panel-maximized] {
    position: relative;

    & .panel[data-maximized] {
      position: absolute;
      z-index: 20;
      border-radius: inherit;
    }
  }
  /* the regions step back so the layout is the containing block; their
     dividers rest under the maximized panel */
  .border-layout[data-panel-maximized] > .resizer {
    position: static;

    & > .resizer-handle { visibility: hidden; }
  }
  /* the region holding it rises too: a region may be a stacking context of
     its own (a <main> with a view-transition-name) that would trap the
     panel's z-index - grid items take z-index without being positioned, so
     the layout stays the containing block */
  .border-layout[data-panel-maximized] > :has(.panel[data-maximized]) { z-index: 20; }

  /* -- In a border layout: the region frames the panel ---------------------- */
  :where(.border-layout > .resizer, .border-layout > .border-layout-center, .border-layout) > .panel {
    border: 0;
    border-radius: 0;
  }
  /* the region shrinks with the panel: its pane is the panel */
  .border-layout > .resizer[data-panel-minimized] > .panel { overflow: hidden; }

  /* -- Accessibility -------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .panel .panel-minimize { transition: none; }
  }

  @media (prefers-contrast: more) {
    .panel > .panel-header { border-block-end-color: var(--foreground); }
    .panel .panel-title { font-weight: 700; }
  }

  @media (forced-colors: active) {
    .panel { border: 1px solid CanvasText; }
    .panel > .panel-header { border-block-end: 1px solid CanvasText; background: Canvas; color: CanvasText; }
    .panel .panel-icon { color: CanvasText; }
  }
}

/* ── components/parallax/parallax.css ── */
/* -- Parallax --------------------------------------------------------
   Depth on scroll, no script. A .parallax scene is a view timeline (its
   passage through the scrollport); every .parallax-layer moves along it -
   far layers lag, near ones lead - so the picture separates into planes.
   A sticky scene (data-sticky + .parallax-stage) pins its stage while you
   scroll through it: the layers play over that whole distance (zoom, fade,
   spin). .parallax-drift moves in-flow elements at their own speed (columns
   of a photo wall), .parallax-reveal fades and lifts elements into view.
   Unsupported browsers and reduced motion get the still composition. */

@layer components {
  .parallax {
    position: relative;
    isolation: isolate;
    overflow: clip;
    view-timeline-name: --parallax;
    view-timeline-axis: block;
  }

  /* a layer fills the scene (or the stage) and moves by --parallax-speed:
     a percentage of its own height over the passage, or a length */
  .parallax-layer {
    --_speed: var(--parallax-speed, 0%);

    position: absolute;
    /* overscan by 1.5 x the absolute speed: the travel never shows an edge */
    inset: calc(-1.5 * max(var(--_speed), -1 * var(--_speed))) 0;
    display: grid;
    place-items: center;
    pointer-events: none;

    & > img,
    & > video,
    & > svg { width: 100%; height: 100%; object-fit: cover; }

    &[data-depth="far"] { --_speed: var(--parallax-speed, 50%); z-index: -4; }
    &[data-depth="mid"] { --_speed: var(--parallax-speed, 25%); z-index: -3; }
    &[data-depth="near"] { --_speed: var(--parallax-speed, -15%); z-index: -2; }
    &[data-depth="front"] { --_speed: var(--parallax-speed, -35%); z-index: 2; }
  }

  /* the content plane: in flow, interactive */
  .parallax-content { position: relative; z-index: 1; }

  /* sticky scene: tall (data-sticky sets the scroll distance, default 300%
     of the stage), the stage pins while the scene passes - the layers play
     over the pinned stretch (the timeline's contain range) */
  .parallax[data-sticky] {
    overflow: visible;
    height: calc(var(--parallax-stage, 100dvh) * var(--parallax-length, 3));
  }
  .parallax-stage {
    position: sticky;
    inset-block-start: 0;
    height: var(--parallax-stage, 100dvh);
    overflow: clip;
    isolation: isolate;
  }

  /* horizontal scenes (a sideways scroller) */
  .parallax[data-axis="inline"] { view-timeline-axis: inline; }

  /* in-flow elements at their own speed - a length (6rem) or a percentage */
  .parallax-drift { --_speed: var(--parallax-speed, 4rem); }

  @keyframes parallax-shift {
    from { translate: 0 calc(var(--_speed) * -1); }
    to { translate: 0 var(--_speed); }
  }
  @keyframes parallax-shift-inline {
    from { translate: calc(var(--_speed) * -1) 0; }
    to { translate: var(--_speed) 0; }
  }
  @keyframes parallax-zoom {
    from { scale: 1; }
    to { scale: var(--parallax-scale, 2.5); }
  }
  @keyframes parallax-fade {
    from { opacity: 1; }
    to { opacity: 0; }
  }
  @keyframes parallax-spin {
    to { rotate: var(--parallax-turn, 90deg); }
  }
  /* pass: in from small and transparent, hold, out large - words flying by */
  @keyframes parallax-pass {
    0% { opacity: 0; scale: 0.5; }
    35%, 65% { opacity: 1; scale: 1; }
    100% { opacity: 0; scale: 1.8; }
  }
  @keyframes parallax-reveal {
    from { opacity: 0; translate: 0 var(--parallax-rise, 3rem); scale: 0.98; }
  }
  @keyframes parallax-reveal-zoom {
    from { opacity: 0; scale: 0.85; }
  }
  @keyframes parallax-reveal-fade {
    from { opacity: 0; }
  }

  .parallax-layer,
  .parallax-drift { animation: parallax-shift linear both; }
  .parallax[data-axis="inline"] .parallax-layer { animation-name: parallax-shift-inline; }
  /* layer motions - stacked on the shift */
  .parallax-layer[data-motion="zoom"] { animation-name: parallax-shift, parallax-zoom; }
  .parallax-layer[data-motion="fade"] { animation-name: parallax-shift, parallax-fade; }
  .parallax-layer[data-motion="spin"] { animation-name: parallax-shift, parallax-spin; }
  .parallax-layer[data-motion="zoom fade"] { animation-name: parallax-shift, parallax-zoom, parallax-fade; }
  .parallax-layer[data-motion="pass"] { animation-name: parallax-shift, parallax-pass; }
  .parallax-reveal { animation: parallax-reveal ease-out both; }
  .parallax-reveal[data-reveal="zoom"] { animation-name: parallax-reveal-zoom; }
  .parallax-reveal[data-reveal="fade"] { animation-name: parallax-reveal-fade; }

  /* the timelines live in their own rules: a minifier must not fold them
     into the animation shorthand (reset-only there - dropped) */
  @supports (animation-timeline: view()) {
    .parallax-layer {
      animation-timeline: --parallax;
      animation-range: cover;
    }
    .parallax[data-sticky] .parallax-layer { animation-range: contain; }
    .parallax-drift {
      animation-timeline: view();
      animation-range: cover;
    }
    .parallax-reveal {
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
  }
  /* no scroll timelines: the still composition (no 0s jump to the end) */
  @supports not (animation-timeline: view()) {
    .parallax-layer,
    .parallax-drift,
    .parallax-reveal { animation: none; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .parallax-layer,
    .parallax-drift,
    .parallax-reveal { animation: none; }
  }

  @media (forced-colors: active) {
    .parallax-layer { forced-color-adjust: none; }
  }
}

/* ── components/password-reset/password-reset.css ── */
/* -- Password Reset (website · Account & States) --------------------------
   Collects and confirms a replacement password - the new password with its rules, the confirmation, and the done state. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-password-reset, .mk-password-reset *, .mk-password-reset ::before, .mk-password-reset ::after) { box-sizing: border-box; }

  .mk-password-reset {
    container: mk-password-reset / inline-size;
    display: grid;
    gap: 1.5rem;
    width: 100%;
    max-width: 24rem;
    margin-inline: auto;
    padding: 2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);
    box-shadow: var(--shadow-sm);
  }
  .mk-password-reset-head { display: grid; justify-items: center; gap: 0.5rem; text-align: center;
    & > svg { width: 2rem; height: 2rem; color: var(--primary); }
    & h1, & h2 { margin: 0.25rem 0 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
    & p { margin: 0; color: var(--muted-foreground); font-size: 0.9375rem; text-wrap: pretty; }
  }
  .mk-password-reset form { display: grid; gap: 1rem; }
  .mk-password-reset .mk-auth-field { display: grid; gap: 0.375rem; }
  .mk-password-reset-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.875rem;
    & a { color: var(--primary); font-weight: 500; text-decoration: none; }
    & a:hover { text-decoration: underline; text-underline-offset: 3px; }
  }
  .mk-password-reset-foot { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; text-align: center;
    & a { color: var(--primary); font-weight: 600; text-decoration: none; }
    & a:hover { text-decoration: underline; text-underline-offset: 3px; }
  }
  .mk-password-reset .btn { width: 100%; }
  .mk-password-reset .input:user-valid { border-color: #16a34a; }
  .mk-password-reset-rules { margin: 0.25rem 0 0; padding-inline-start: 1.125rem; color: var(--muted-foreground); font-size: 0.8125rem; line-height: 1.6; }
  .mk-password-reset-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--muted);
    & svg { width: 1.375rem; height: 1.375rem; }
  }
  .mk-password-reset[data-variant="done"] .mk-password-reset-icon { background: color-mix(in oklch, #16a34a 14%, transparent); color: #15803d; }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-password-reset { border-color: CanvasText; }
  }
}

/* ── components/payment-form/payment-form.css ── */
/* -- Payment Form (website · Shop) ----------------------------------------
   Collects or selects a payment method - card, PayPal or bank transfer as tabs, the card fields with the right keyboards and autofill, or a saved card. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-payment-form, .mk-payment-form *, .mk-payment-form ::before, .mk-payment-form ::after) { box-sizing: border-box; }

  .mk-payment-form { display: grid; gap: 1rem; margin: 0; padding: 0; border: 0; min-width: 0; max-width: 32rem;
    & legend { margin-block-end: 1rem; padding: 0; font-size: 1.0625rem; font-weight: 600; }
  }
  .mk-payment-form-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem;
    & label { position: relative; display: grid; justify-items: center; gap: 0.25rem; padding: 0.75rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-lg); font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
    & input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
    & svg { width: 1.25rem; height: 1.25rem; }
    & label:has(:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: color-mix(in oklch, var(--primary) 5%, transparent); }
    & label:has(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
  }
  .mk-payment-form-panel { display: none; gap: 1rem; padding: 1.25rem; border-radius: var(--radius-lg); background: var(--muted);
    & p { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; }
    & dl { display: grid; gap: 0.5rem; margin: 0; font-size: 0.875rem; }
    & dl div { display: flex; justify-content: space-between; gap: 1rem; }
    & dt { color: var(--muted-foreground); }
    & dd { margin: 0; font-family: var(--font-mono); }
  }
  .mk-payment-form:has(input[value="card"]:checked) [data-method="card"],
  .mk-payment-form:has(input[value="paypal"]:checked) [data-method="paypal"],
  .mk-payment-form:has(input[value="bank"]:checked) [data-method="bank"] { display: grid; }
  .mk-payment-form-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; }
  .mk-payment-form-field { display: grid; gap: 0.375rem; &[data-span="full"] { grid-column: 1 / -1; } }
  .mk-payment-form-number { position: relative;
    & .input { padding-inline-end: 6.5rem; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
    & ul { position: absolute; top: 50%; right: 0.5rem; translate: 0 -50%; display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
    & li { padding: 0.0625rem 0.3125rem; border: 1px solid var(--border); border-radius: 3px; background: var(--background); font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.02em; }
  }
  .mk-payment-form-note { display: flex; align-items: center; gap: 0.375rem; color: var(--muted-foreground); font-size: 0.75rem;
    & svg { width: 0.875rem; height: 0.875rem; }
  }

  .mk-payment-form-saved { display: grid; gap: 0.5rem;
    & label { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; font-size: 0.9375rem; }
    & label:has(:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
    & small { color: var(--muted-foreground); font-size: 0.8125rem; }
  }
  .mk-payment-form-brand { display: grid; place-items: center; width: 2.5rem; height: 1.625rem; border-radius: 4px; background: var(--foreground); color: var(--background); font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.04em; }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-payment-form-methods label:has(:checked), .mk-payment-form-saved label:has(:checked) { border-color: Highlight; }
  }
}

/* ── components/playlist-item/playlist-item.css ── */
/* -- Playlist Item (website · Media) --------------------------------------
   Represents one selectable track or episode within a playlist - number, cover, title, artist and length; the selected one shows "now playing" bars. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-playlist-item, .mk-playlist-item *, .mk-playlist-item ::before, .mk-playlist-item ::after) { box-sizing: border-box; }

  .mk-playlist { display: grid; gap: 0.125rem; margin: 0; padding: 0; list-style: none; }
  .mk-playlist-item label {
    position: relative;
    display: grid;
    grid-template-columns: 1.75rem 2.75rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.875rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background-color 150ms ease;

    &:hover { background: var(--accent); }
    & input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
  }
  .mk-playlist-item:has(input:checked) label { background: color-mix(in oklch, var(--primary) 9%, transparent); }
  .mk-playlist-item:has(input:focus-visible) label { outline: 2px solid var(--ring); outline-offset: -2px; }
  .mk-playlist-item-index { display: grid; place-items: center; color: var(--muted-foreground); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
  .mk-playlist-item-bars { display: none; align-items: flex-end; gap: 2px; height: 0.875rem; font-style: normal;
    & b { width: 3px; height: 100%; border-radius: 1px; background: var(--primary); transform-origin: bottom; animation: mk-playlist-bars 900ms ease-in-out infinite alternate; }
    & b:nth-child(2) { animation-delay: -300ms; }
    & b:nth-child(3) { animation-delay: -600ms; }
  }
  @keyframes mk-playlist-bars { from { scale: 1 0.25; } to { scale: 1 1; } }
  .mk-playlist-item:has(input:checked) {
    & .mk-playlist-item-index > span { display: none; }
    & .mk-playlist-item-bars { display: flex; }
    & .mk-playlist-item-text strong { color: var(--primary); }
  }
  .mk-playlist-item-cover { display: block; width: 2.75rem; height: 2.75rem; object-fit: cover; border-radius: var(--radius-md); background: var(--muted); }
  .mk-playlist-item-text { display: grid; min-width: 0;
    & strong { overflow: hidden; font-size: 0.9375rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
    & small { overflow: hidden; color: var(--muted-foreground); font-size: 0.8125rem; text-overflow: ellipsis; white-space: nowrap; }
  }
  .mk-playlist-item-desc { display: -webkit-box; margin-block-start: 0.25rem; overflow: hidden; color: var(--muted-foreground); font-size: 0.8125rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .mk-playlist-item-duration { color: var(--muted-foreground); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

  .mk-playlist-item[data-variant="episode"] label { grid-template-columns: 1.75rem 4.5rem minmax(0, 1fr) auto; align-items: start; padding-block: 0.75rem;
    & .mk-playlist-item-cover { width: 4.5rem; height: 4.5rem; }
    & .mk-playlist-item-index, & .mk-playlist-item-duration { padding-block-start: 0.25rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-playlist-item label { transition: none; }
    .mk-playlist-item-bars b { animation: none; }
    .mk-playlist-item-bars b:nth-child(1) { scale: 1 0.6; }
    .mk-playlist-item-bars b:nth-child(3) { scale: 1 0.8; }
  }

  @media (forced-colors: active) {
    .mk-playlist-item:has(input:checked) label { outline: 2px solid Highlight; }
    .mk-playlist-item-bars b { background: Highlight; }
  }
}

/* ── components/popover/popover.css ── */
@layer components {
  .popover {
    position: fixed;
    inset: auto;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background-color: var(--popover);
    color: var(--popover-foreground);
    padding: 1rem;

    /* -- Density --------------------------------------------------
       data-density on the .popover root scales the content padding
       (0.75 / 1 / 1.25 of the 1rem default); comfortable matches the
       unsized default. */
    &[data-density="compact"]     { padding: 0.75rem; }
    &[data-density="comfortable"] { padding: 1rem; }
    &[data-density="spacious"]    { padding: 1.25rem; }
    box-shadow: var(--shadow-md);
    width: 20rem;
    opacity: 0;
    translate: 0 -4px;
    transition: opacity 150ms ease, translate 150ms ease, display 150ms allow-discrete;

    /* -- Default: bottom center -- */
    position-area: bottom;
    margin-top: 4px;
    position-try-fallbacks: flip-block;

    &:popover-open {
      opacity: 1;
      translate: 0 0;
    }

    /* ----- Side variants ----- */
    &[data-side="top"] {
      position-area: top;
      margin-top: 0;
      margin-bottom: 4px;
      translate: 0 4px;
      &:popover-open { translate: 0 0; }
    }

    &[data-side="left"] {
      position-area: left;
      margin-top: 0;
      margin-right: 4px;
      translate: 4px 0;
      position-try-fallbacks: flip-inline;
      &:popover-open { translate: 0 0; }
    }

    &[data-side="right"] {
      position-area: right;
      margin-top: 0;
      margin-left: 4px;
      translate: -4px 0;
      position-try-fallbacks: flip-inline;
      &:popover-open { translate: 0 0; }
    }

    /* ----- Align variants (combined with side) ----- */
    &[data-align="start"] {
      &:not([data-side="left"]):not([data-side="right"]) { position-area: bottom left; }
      &[data-side="top"] { position-area: top left; }
      &[data-side="left"] { position-area: left top; }
      &[data-side="right"] { position-area: right top; }
    }

    &[data-align="end"] {
      &:not([data-side="left"]):not([data-side="right"]) { position-area: bottom right; }
      &[data-side="top"] { position-area: top right; }
      &[data-side="left"] { position-area: left bottom; }
      &[data-side="right"] { position-area: right bottom; }
    }
  }

  @starting-style {
    .popover:popover-open { opacity: 0; translate: 0 -4px; }
    .popover[data-side="top"]:popover-open { opacity: 0; translate: 0 4px; }
    .popover[data-side="left"]:popover-open { opacity: 0; translate: 4px 0; }
    .popover[data-side="right"]:popover-open { opacity: 0; translate: -4px 0; }
  }

  .popover-header { margin-bottom: 0.75rem; }
  .popover-title { margin: 0; font-size: 0.875rem; font-weight: 500; color: var(--foreground); }
  .popover-description { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--muted-foreground); }
  .popover-content { font-size: 0.875rem; }

  @media (prefers-reduced-motion: reduce) {
    .popover {
      transition: none;
    }
  }
}

/* ── components/presentation/presentation.css ── */
/* -- Presentation component ------------------------------------
   Fixed-coordinate deck runtime: an artboard (default 1600×900) uniformly
   scaled to the mount, declarative entrance animations, native <progress>
   advance, presenter notes. Local --presentation-* custom properties are the
   deck's art-direction contract (literal defaults, token-free on purpose: a
   slide surface must stay identical under every theme); consumers override
   them per deck. */

@layer components {
  .presentation {
    /* artboard contract - override on the mount for other formats */
    --presentation-width: 1600;
    --presentation-height: 900;
    /* live uniform scale, owned by presentation.js (ResizeObserver) */
    --presentation-scale: 1;
    /* slide surfaces (fixed art direction, like the taxonomy badge colors) */
    --presentation-ink: #0d1424;
    --presentation-ink-foreground: #e9eef8;
    --presentation-paper: #ffffff;
    --presentation-paper-foreground: #101828;
    --presentation-accent: #38bdf8;
    /* motion: entrances come from the SHARED motion component (motion.css
       keyframes + [data-df-entrance]); a deck only tunes the --df-motion-*
       defaults for its artboard scale - per-element inline vars still win */
    --presentation-out: cubic-bezier(0.16, 1, 0.3, 1);
    --presentation-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    /* slow and deliberate: slide transitions (df$.anim, default 1500ms),
       entrances and the chart stage share one tempo */
    --presentation-duration: 1500ms;
    --df-motion-duration: var(--presentation-duration);
    --df-motion-ease: var(--presentation-out);
    --df-motion-distance: 3.5rem; /* artboard units - scales with the deck */

    position: relative;
    display: grid;
    width: 100%;
    aspect-ratio: var(--presentation-width) / var(--presentation-height);
    overflow: hidden;
    background: var(--presentation-ink);
    color: var(--presentation-ink-foreground);
    font-family: var(--font-sans);

    /* fullscreen MODE: when native fullscreen is active this element already
       owns the viewport; when the request was DENIED (embeds without
       allow="fullscreen") the same attribute pins it as a fixed overlay —
       one honest mode, two carriers. */
    &[data-fullscreen] {
      position: fixed;
      inset: 0;
      z-index: 50;
      width: 100vw;
      height: 100vh;
      aspect-ratio: auto;
    }

    & > [data-slide] {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      inline-size: calc(var(--presentation-width) * 1px);
      block-size: calc(var(--presentation-height) * 1px);
      /* uniform artboard scale via zoom, NOT transform: the slide's
         transform belongs to the df$.anim transitions (slide/zoom/spin/flip
         keyframes animate transform - a scale() here would be overwritten
         mid-transition and the slide would jump to artboard size) */
      zoom: var(--presentation-scale);
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: calc(var(--presentation-height) * 0.08px) calc(var(--presentation-width) * 0.07px);
      box-sizing: border-box;
      /* the TRANSITION is the df$.anim engine (presentation.js plays a
         data-anim-out on the leaving slide and a data-anim-in on the
         arriving one); CSS only says who is on stage: the active slide on
         top, the leaving slide beneath it until its out-animation ends */
      visibility: hidden;

      &[data-active],
      &[data-leaving] {
        visibility: visible;
      }
      &[data-active] {
        z-index: 1;
      }
      &[data-leaving] {
        z-index: 0;
      }

      &[data-theme="ink"] {
        --presentation-surface: var(--presentation-ink);
        --presentation-on-surface: var(--presentation-ink-foreground);
      }
      &[data-theme="paper"] {
        --presentation-surface: var(--presentation-paper);
        --presentation-on-surface: var(--presentation-paper-foreground);
      }
      &[data-theme] {
        background: var(--presentation-surface);
        color: var(--presentation-on-surface);
        /* shipped components on a slide (table, badge, avatar, button, card)
           speak the SLIDE's surface, not the page theme: the existing
           semantic tokens are re-pointed at the deck's art direction, so a
           paper slide stays legible in dark mode and vice versa */
        --background: var(--presentation-surface);
        --foreground: var(--presentation-on-surface);
        --card: var(--presentation-surface);
        --card-foreground: var(--presentation-on-surface);
        --primary: var(--presentation-on-surface);
        --primary-foreground: var(--presentation-surface);
        --secondary: color-mix(in oklch, var(--presentation-on-surface) 10%, var(--presentation-surface));
        --secondary-foreground: var(--presentation-on-surface);
        --muted: color-mix(in oklch, var(--presentation-on-surface) 7%, var(--presentation-surface));
        --muted-foreground: color-mix(in oklch, var(--presentation-on-surface) 64%, var(--presentation-surface));
        --accent: color-mix(in oklch, var(--presentation-on-surface) 10%, var(--presentation-surface));
        --accent-foreground: var(--presentation-on-surface);
        --border: color-mix(in oklch, var(--presentation-on-surface) 18%, var(--presentation-surface));
        --input: color-mix(in oklch, var(--presentation-on-surface) 24%, var(--presentation-surface));
        --ring: var(--presentation-accent);
      }
    }

    /* charts on the artboard read at slide scale: the chart theme adapter
       derives every label, gap and stroke from --chart-font-size */
    & .chart {
      --chart-font-size: 24px;
    }

    /* -- the chart stage: ONE chart for the whole deck (chart.deck()) -------
       A deck-level layer in artboard coordinates (same scale transform as
       the slides) stacked ABOVE them, so every slide keeps its own surface.
       Slides that name a data-chart-state show it; the chart morphs from
       state to state while the slides crossfade underneath. Hidden = faded
       out in step with the slide fade, never unmounted. */
    & > .presentation-stage {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      z-index: 2;
      inline-size: calc(var(--presentation-width) * 1px);
      block-size: calc(var(--presentation-height) * 1px);
      transform: scale(var(--presentation-scale));
      transform-origin: top left;
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      transition:
        opacity var(--presentation-duration) var(--presentation-out),
        visibility 0s linear var(--presentation-duration);

      &[data-visible] {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transition: opacity var(--presentation-duration) var(--presentation-out);
      }
    }
    /* a curtain (blocksIn → blocksOut) passes over the SLIDES; the chart
       stage steps aside while it runs and returns with the arriving slide */
    &[data-curtain] > .presentation-stage[data-visible] {
      opacity: 0;
      transition-duration: 300ms;
    }

    /* -- entrances: the SHARED motion component owns the vocabulary --------
       Slides simply carry [data-df-entrance] / [data-df-draw] / [data-df-
       stagger] elements; the keyframes + --df-motion-* tunables live in
       motion.css (shipped in the same all.css bundle). The deck runtime
       REPLAYS every entrance when its slide activates - revisiting a slide
       re-runs its entrance, and animations (unlike transitions) fire
       deterministically on first application, so decks animate correctly on
       load without a rendered "from" state. */

    /* -- in-slide chrome (artboard coordinates, scales with the deck) ------ */

    /* header line: a mono eyebrow strip with a hairline rule, pinned to the
       slide's top edge - section label left, optional meta right */
    & .presentation-header {
      position: absolute;
      inset-block-start: 0;
      inset-inline: 0;
      display: flex;
      align-items: baseline;
      gap: 1.25rem;
      padding: 3.5rem 4.5rem 1.75rem;
      font-family: var(--font-mono);
      font-size: 1.5rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: color-mix(in oklch, currentColor 65%, transparent);
      border-block-end: 1px solid color-mix(in oklch, currentColor 16%, transparent);

      /* the accent tick gives the line a deliberate start, not a stray rule */
      &::before {
        content: '';
        inline-size: 2.75rem;
        block-size: 0.3rem;
        align-self: center;
        background: var(--presentation-accent);
      }

      /* the LAST span (meta) rides to the right edge - label stays with the tick */
      & > :last-child {
        margin-inline-start: auto;
      }
    }

    /* slide number: NN ⁄ NN in the bottom corner - the fraction slash (U+2044)
       is inherently slanted, so the motif needs no extra decoration. The
       runtime fills the text; authors just drop the element into a slide. */
    & .presentation-slide-number {
      position: absolute;
      inset-block-end: 2.75rem;
      /* bottom-LEFT: the bottom-right corner belongs to the deck controls */
      inset-inline-start: 4.5rem;
      font-family: var(--font-mono);
      font-size: 1.6rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      color: color-mix(in oklch, currentColor 55%, transparent);
    }

    /* -- chrome (outside slide coordinates, viewport-fixed) -------------- */
    & .presentation-controls {
      position: absolute;
      inset-block-end: 1rem;
      inset-inline-end: 1rem;
      display: flex;
      align-items: center;
      gap: 0.375rem;
      z-index: 3;
    }

    & .presentation-control {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      inline-size: 2rem;
      block-size: 2rem;
      padding: 0;
      border: 1px solid color-mix(in oklch, var(--presentation-paper-foreground) 18%, transparent);
      border-radius: var(--radius-md);
      background: color-mix(in oklch, var(--presentation-paper) 82%, transparent);
      color: var(--presentation-paper-foreground);
      cursor: pointer;
      font: inherit;
      line-height: 1;

      &:hover {
        background: color-mix(in oklch, var(--presentation-paper) 95%, transparent);
      }
      &:disabled {
        opacity: 0.4;
        cursor: default;
      }
    }

    & .presentation-counter {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      padding-inline: 0.5rem;
      color: var(--presentation-ink-foreground);
      background: color-mix(in oklch, var(--presentation-ink) 60%, transparent);
      border-radius: var(--radius-sm);
    }

    /* native <progress> - the platform's completion indicator */
    & .presentation-progress {
      position: absolute;
      inset-block-end: 0;
      inset-inline: 0;
      inline-size: 100%;
      block-size: 3px;
      margin: 0;
      border: none;
      background: color-mix(in oklch, var(--presentation-ink-foreground) 18%, transparent);
      accent-color: var(--presentation-accent);
      z-index: 3;

      &::-webkit-progress-bar { background: color-mix(in oklch, var(--presentation-ink-foreground) 18%, transparent); }
      &::-webkit-progress-value { background: var(--presentation-accent); }
      &::-moz-progress-bar { background: var(--presentation-accent); }
    }

    /* presenter notes - hidden until the deck toggles [data-notes] */
    & .presentation-note {
      display: none;
    }
    &[data-notes] > [data-slide][data-active] > .presentation-note {
      display: block;
      position: absolute;
      inset-block-end: 0;
      inset-inline: 0;
      margin: 0;
      padding: 1.25rem 4rem;
      font-size: 1.75rem;
      line-height: 1.4;
      background: color-mix(in oklch, #000000 82%, transparent);
      border-block-start: 1px solid color-mix(in oklch, #ffffff 20%, transparent);
      color: #ffffff;
    }

    /* slide typography helpers (fixed artboard sizes, not site type scale) */
    & .presentation-eyebrow {
      font-family: var(--font-mono);
      font-size: 1.5rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      opacity: 0.7;
      margin: 0 0 1rem;
    }
    & .presentation-title {
      font-size: 5.5rem;
      line-height: 1.05;
      letter-spacing: -0.02em;
      font-weight: 700;
      margin: 0 0 1.5rem;
      text-wrap: balance;
    }
    & .presentation-lede {
      font-size: 2rem;
      line-height: 1.4;
      opacity: 0.85;
      margin: 0;
      text-wrap: pretty;
    }
  }

  /* accessibility: honor motion + contrast preferences (REQUIRED). Entrances
     flatten via motion.css's own 1ms rule (keeps the JS finished contract);
     here only the deck's own slide-fade transition flattens. */
  @media (prefers-reduced-motion: reduce) {
    .presentation > [data-slide],
    .presentation > .presentation-stage {
      transition: none;
    }
  }

  @media (prefers-contrast: more) {
    .presentation .presentation-control {
      border-width: 2px;
      border-color: var(--presentation-paper-foreground);
    }
  }

  @media (forced-colors: active) {
    .presentation .presentation-control {
      border-color: CanvasText;
      color: CanvasText;
      background: Canvas;
    }
    .presentation .presentation-progress {
      border-block-start: 1px solid CanvasText;
    }
  }
}

/* ── components/press-item/press-item.css ── */
/* -- Press Item (website · Company) ---------------------------------------
   Links to one external media mention with publication metadata - the outlet, the date and the headline, a pull quote, or a compact list row. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-press-item, .mk-press-item *, .mk-press-item ::before, .mk-press-item ::after) { box-sizing: border-box; }

  .mk-press-item {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);
    transition: border-color 150ms ease;

    &:hover { border-color: color-mix(in oklch, var(--foreground) 25%, var(--border)); }
  }
  .mk-press-item { position: relative; }
  .mk-press-item-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .mk-press-item-title a:focus-visible { outline: none; }
  .mk-press-item:has(.mk-press-item-title a:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
  /* zero specificity: any block rule may still position its controls */
  :where(.mk-press-item :is(button, input, select, label, .btn):not(.mk-press-item-title a)) { position: relative; z-index: 1; }
  .mk-press-item-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; color: var(--muted-foreground); font-size: 0.8125rem; }
  .mk-press-item-publication { color: var(--foreground); font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.02em; }
  .mk-press-item-title { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.35; text-wrap: balance;
    & a { color: inherit; text-decoration: none; }
  }
  .mk-press-item-quote { margin: 0; font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.45; text-wrap: pretty;
    & p { margin: 0; }
    & p::before { content: "“"; }
    & p::after { content: "”"; }
  }
  .mk-press-item-more { display: inline-flex; align-items: center; gap: 0.25rem; margin-block-start: auto; color: var(--primary); font-size: 0.875rem; font-weight: 600;
    & svg { width: 0.875rem; height: 0.875rem; }
  }

  .mk-press-item[data-variant="quote"] {
    & .mk-press-item-title { order: 3; color: var(--muted-foreground); font-size: 0.875rem; font-weight: 500; }
    & .mk-press-item-more { order: 4; }
  }

  .mk-press-item[data-variant="compact"] {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 1rem;
    padding: 1rem 0.5rem;
    border-width: 0 0 1px;
    border-radius: 0;
    background: transparent;

    & .mk-press-item-meta { display: contents; }
    & time { grid-column: 3; grid-row: 1; }
    & .mk-press-item-title { grid-column: 2; grid-row: 1; font-size: 1rem; }
    & .mk-press-item-more { display: none; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-press-item { transition: none; }
  }

  @media (forced-colors: active) {
    .mk-press-item { border-color: CanvasText; }
  }
}

/* ── components/pricing/pricing.css ── */
/* -- Pricing (marketing) -------------------------------------------
   Section head + billing toggle (composed from the tabs component) +
   plan cards. The featured plan upgrades its border - no layout shift. */

@layer components {
  .mk-pricing {
    container: mk-pricing / inline-size;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
  }

  /* centered stack: eyebrow/title/desc + toggle all share the section's
     center line (align-items, not text-align - the toggle is a box) */
  .mk-pricing-head { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }

  .mk-pricing-eyebrow { color: var(--primary); font-size: 1rem; font-weight: 500; }

  .mk-pricing-title {
    line-height: 1.15;
    margin: 0;
    font-size: 1.875rem;
    font-weight: 500;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  .mk-pricing-desc { margin: 0; max-width: 42rem; color: var(--muted-foreground); font-size: 1rem; text-wrap: pretty; }

  /* Segmented billing toggle: real radios + :has() - keyboard, screen
     readers, and form semantics work natively; one checked radio flips
     every plan's price pair, which per-tab aria-controls could not. */
  .mk-pricing-billing {
    display: inline-flex;
    align-self: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: var(--radius-md);
    background: var(--muted);

    & label {
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      padding: 0.375rem 0.75rem;
      border-radius: var(--radius-sm);
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--muted-foreground);
      cursor: pointer;
    }

    & label:has(input:checked) {
      background: var(--background);
      color: var(--foreground);
      box-shadow: var(--shadow-2xs);
    }

    /* keyboard focus lands on the radio - show the ring on its label */
    & label:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
  }

  /* price swap: each plan ships yearly + monthly rows; the checked radio
     anywhere in the section flips every plan at once via :has() */
  .mk-plan-price.mk-price-monthly { display: none; }

  .mk-pricing:has(.mk-bill-monthly:checked) {
    & .mk-plan-price.mk-price-yearly { display: none; }
    & .mk-plan-price.mk-price-monthly { display: flex; }
  }

  .mk-plans { display: grid; align-items: stretch; gap: 1.25rem; }

  .mk-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    box-sizing: border-box;
    padding-block: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    color: var(--card-foreground);
    box-shadow: var(--shadow-sm);

    /* featured plan: 2px primary border (same box size → no shift) and a
       soft primary wash from the top */
    &[data-featured] {
      border: 2px solid var(--primary);
      background:
        radial-gradient(120% 60% at 50% 0%, color-mix(in oklch, var(--primary) 9%, transparent), transparent 70%),
        var(--card);
      box-shadow: var(--shadow-lg);
    }

  }

  /* in an aura (shapes.css): the light is the border - the plan drops its own */
  .aura > .mk-plan {
    border-color: transparent;
    border-radius: var(--radius-lg);
  }
  .mk-plans > .aura { --shape-round: var(--radius-lg); }

  .mk-plan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-inline: 1.5rem;
  }

  .mk-plan-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--muted);

    & svg { width: 1rem; height: 1rem; color: var(--primary); }
  }

  .mk-plan-body { display: flex; flex-direction: column; gap: 0.5rem; padding-inline: 1.5rem; }

  .mk-plan-title { font-size: 1.125rem; font-weight: 600; line-height: 1.3; margin: 0; }

  .mk-plan-desc { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--muted-foreground); }

  .mk-plan-price {
    display: flex;
    gap: 0.5rem;
    margin-block-start: auto;
    padding-inline: 1.5rem;
  }

  .mk-plan-amount {
    align-self: flex-end;
    font-size: 3rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
  }

  .mk-plan-unit { display: flex; flex-direction: column; align-self: flex-end; }
  .mk-plan-unit-label { font-size: 0.875rem; font-weight: 500; }
  .mk-plan-unit-note { font-size: 0.875rem; color: var(--muted-foreground); }

  .mk-plan-cta { padding-inline: 1.5rem; & .btn { width: 100%; } }

  .mk-plan-features {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding-inline: 1.5rem;
  }

  .mk-plan-features { margin: 0 1.5rem; padding: 1.25rem 0 0; border-block-start: 1px dashed var(--border); list-style: none; }

  /* the check sits in a small tinted disc */
  .mk-plan-feature {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.9375rem;

    & svg {
      width: 1.125rem;
      height: 1.125rem;
      margin-block-start: 0.125rem;
      padding: 0.1875rem;
      border-radius: 50%;
      background: color-mix(in oklch, var(--primary) 12%, transparent);
      color: var(--primary);
      flex-shrink: 0;
      box-sizing: border-box;
    }
    & span { flex: 1; }
    &[data-muted] { color: var(--muted-foreground); }
    &[data-muted] svg { background: var(--muted); color: var(--muted-foreground); }
  }

  /* the featured plan's label: a filled Badge with a sparkle */
  .mk-plan-badge { gap: 0.25rem; }

  /* a saving next to the billing choice (a Badge) */
  .mk-pricing-billing .badge { margin-inline-start: 0.125rem; }

  @container mk-pricing (min-width: 44rem) {
    .mk-pricing-title { font-size: 2.25rem; }
    .mk-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
    /* the featured plan stands a little taller than its neighbours */
    .mk-plans > .mk-plan[data-featured],
    .mk-plans > .aura > .mk-plan { padding-block: 2.25rem; }
  }

  /* compare: a Table of features per plan - the featured column tinted */
  .mk-pricing-compare {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);

    & .table { min-width: 36rem; }
    & :is(th, td):not(:first-child) { text-align: center; }
    & [data-featured] { background: color-mix(in oklch, var(--primary) 6%, transparent); }
    & thead [data-featured] { box-shadow: inset 0 3px 0 var(--primary); }
    & .mk-pricing-yes { color: var(--primary); }
    & .mk-pricing-no { color: var(--muted-foreground); opacity: 0.5; }
    & svg { width: 1rem; height: 1rem; vertical-align: middle; }
    & tbody th { font-weight: 500; text-align: start; }
  }

  /* compact: plans as rows of one list - name, price, CTA */
  .mk-plans[data-variant="compact"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);

    & .mk-plan {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
      align-items: center;
      gap: 0.75rem 1.5rem;
      padding: 1.25rem 1.5rem;
      border: 0;
      border-block-end: 1px solid var(--border);
      border-radius: 0;
      box-shadow: none;

      &:last-child { border-block-end: 0; }
      &[data-featured] { border: 0; border-block-end: 1px solid var(--border); background: color-mix(in oklch, var(--primary) 5%, var(--card)); }
      & :is(.mk-plan-body, .mk-plan-price, .mk-plan-cta) { padding: 0; margin: 0; }
      & .mk-plan-amount { font-size: 2rem; }
    }
  }

  /* wide: one plan, features in two columns beside the price */
  .mk-plan[data-variant="wide"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1.5rem 2.5rem;
    padding: 2rem;

    & > * { padding-inline: 0; }
    & .mk-plan-features { margin: 0; padding: 0; border: 0; columns: 2 12rem; display: block; }
    & .mk-plan-feature { margin-block-end: 0.75rem; break-inside: avoid; }
  }

  /* usage: a Slider picks the seats, an <output> shows the price */
  .mk-pricing-usage {
    display: grid;
    gap: 1rem;
    max-width: 36rem;
    margin-inline: auto;
    padding: 1.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);

    & .mk-pricing-usage-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
    & output { font-size: 2.5rem; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  }

  /* cta: an enterprise strip - talk to sales */
  .mk-pricing-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding: 1.5rem 1.75rem;
    border-radius: var(--radius-xl);
    background: var(--foreground);
    color: var(--background);

    & p { margin: 0.25rem 0 0; color: color-mix(in oklch, var(--background) 70%, transparent); font-size: 0.9375rem; }
    & strong { font-size: 1.125rem; }
  }

  /* -- Accessibility ------------------------------------------- */

  @media (forced-colors: active) {
    .mk-plan { border-color: CanvasText; }
    .mk-pricing-billing label:has(input:checked) { outline: 1px solid Highlight; }
  }
}

/* ── components/process-step/process-step.css ── */
/* -- Process Step (website · Company) -------------------------------------
   Explains one numbered stage of a workflow - steps joined by a line, vertical or across, with the current one highlighted. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-process-step, .mk-process-step *, .mk-process-step ::before, .mk-process-step ::after) { box-sizing: border-box; }

  .mk-process-steps {
    container: mk-process-steps / inline-size;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .mk-process-step {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: start;
    gap: 1.25rem;
    padding-block-end: 2rem;

    /* the line to the next step */
    &:not(:last-child)::before {
      content: "";
      position: absolute;
      inset-inline-start: 1.25rem;
      top: 2.75rem;
      bottom: 0.25rem;
      width: 2px;
      translate: -50% 0;
      background: var(--border);
    }
    &:last-child { padding-block-end: 0; }
  }
  .mk-process-step-number {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid var(--border);
    border-radius: 50%;
    background: var(--background);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
  }
  .mk-process-step[aria-current] .mk-process-step-number { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
  .mk-process-step-body { display: grid; gap: 0.25rem; padding-block-start: 0.375rem; }
  .mk-process-step-title { margin: 0; font-size: 1.0625rem; font-weight: 600; }
  .mk-process-step-desc { margin: 0; color: var(--muted-foreground); font-size: 0.9375rem; line-height: 1.6; text-wrap: pretty; }

  /* horizontal: a wrapping row - the list is the container, so only its
     steps change with its width (a container cannot query itself) */
  .mk-process-steps[data-variant="horizontal"] { flex-direction: row; flex-wrap: wrap; }
  .mk-process-steps[data-variant="horizontal"] > .mk-process-step { flex: 1 1 100%; }

  @container mk-process-steps (min-width: 40rem) {
    .mk-process-steps[data-variant="horizontal"] > .mk-process-step {
      flex: 1 1 0;
      grid-template-columns: minmax(0, 1fr);
      gap: 1rem;
      padding: 0 1.5rem 0 0;

      &:not(:last-child)::before { inset-inline-start: 3.25rem; inset-inline-end: 0.5rem; top: 1.25rem; bottom: auto; width: auto; height: 2px; translate: 0 -50%; }
    }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-process-step:not(:last-child)::before { background: CanvasText; }
    .mk-process-step[aria-current] .mk-process-step-number { border-color: Highlight; background: Highlight; color: HighlightText; }
  }
}

/* ── components/product-item/product-item.css ── */
/* -- Product Item (website · Shop) ----------------------------------------
   Displays one catalog entry with its image, name, price, and link - a second picture on hover, badges, rating, colors, a wishlist heart and add to cart. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-product-item, .mk-product-item *, .mk-product-item ::before, .mk-product-item ::after) { box-sizing: border-box; }

  .mk-product-item { display: grid; gap: 0.875rem; align-content: start; }
  .mk-product-item { position: relative; }
  .mk-product-item-name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .mk-product-item-name a:focus-visible { outline: none; }
  .mk-product-item:has(.mk-product-item-name a:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
  /* zero specificity: any block rule may still position its controls */
  :where(.mk-product-item :is(button, input, select, label, .btn):not(.mk-product-item-name a)) { position: relative; z-index: 1; }
  .mk-product-item-media { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: var(--muted); }
  .mk-product-item-image { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: opacity 400ms ease;
    &[data-hover] { position: absolute; inset: 0; height: 100%; opacity: 0; }
  }
  .mk-product-item:hover .mk-product-item-image[data-hover] { opacity: 1; }
  /* on a photo, a badge needs a solid fill */
  .mk-product-item-badge { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 1; box-shadow: var(--shadow-sm);
    &[data-sale] { background: var(--destructive); color: #fff; }
  }
  .mk-product-item-wish {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: color-mix(in oklch, var(--background) 85%, transparent);
    color: var(--foreground);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    backdrop-filter: blur(6px);

    & input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
    & svg { width: 1.125rem; height: 1.125rem; transition: scale 200ms ease; }
    &:has(input:checked) { color: oklch(0.6 0.22 20); }
    &:has(input:checked) svg { fill: currentColor; scale: 1.1; }
    &:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
  }
  .mk-product-item-body { display: grid; gap: 0.25rem; }
  .mk-product-item-name { margin: 0; font-size: 1rem; font-weight: 600;
    & a { color: inherit; text-decoration: none; }
  }
  .mk-product-item-desc { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; }
  .mk-product-item-rating { display: flex; align-items: center; gap: 0.375rem; margin: 0; color: var(--muted-foreground); font-size: 0.8125rem; }
  .mk-product-item-stars {
    --mk-rating: 5;

    /* five ★ glyphs, filled to the rating by a clipped gradient */
    background: linear-gradient(90deg, oklch(0.78 0.16 75) calc(var(--mk-rating) / 5 * 100%), var(--border) 0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 0.9375rem;
    letter-spacing: 0.0625rem;
    line-height: 1;
  }
  .mk-product-item-price { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.25rem 0 0; font-variant-numeric: tabular-nums;
    & strong { font-size: 1.0625rem; font-weight: 700; }
    & del { color: var(--muted-foreground); font-size: 0.875rem; }
    &:has(del) strong { color: var(--destructive); }
  }
  .mk-product-item-swatches { display: flex; gap: 0.375rem; margin: 0.375rem 0 0; padding: 0; list-style: none;
    & li { --mk-swatch: var(--muted); width: 1rem; height: 1rem; border-radius: 50%; background: var(--mk-swatch); box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.15); }
    & li[aria-current] { outline: 2px solid var(--foreground); outline-offset: 2px; }
  }
  .mk-product-item-add { justify-self: start; }

  .mk-product-item[data-variant="horizontal"] {
    grid-template-columns: minmax(7rem, 30%) minmax(0, 1fr);
    gap: 0.5rem 1.25rem;
    align-items: start;

    & .mk-product-item-media { grid-row: span 2; }
    & .mk-product-item-add { grid-column: 2; }
  }

  .mk-product-item[data-variant="minimal"] {
    text-align: center;

    & .mk-product-item-price { justify-content: center; }
    & :is(.mk-product-item-add, .mk-product-item-rating, .mk-product-item-swatches) { display: none; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-product-item-image, .mk-product-item-wish svg { transition: none; }
  }

  @media (forced-colors: active) {
    .mk-product-item-stars { background: none; }
    .mk-product-item-stars { color: CanvasText; }
    .mk-product-item-wish { border: 1px solid ButtonText; }
  }
}

/* ── components/product-showcase/product-showcase.css ── */
/* -- Product Showcase (marketing) ----------------------------------
   5:3 poster frame with a circular play button. One click (JS) sets
   data-state="playing": the poster and button hide, the native <video>
   appears with the browser's own controls. Layers stack; state flips
   visibility via CSS so the JS only ever changes an attribute. */

@layer components {
  .mk-showcase {
    container: mk-showcase / inline-size;
    position: relative;
    aspect-ratio: 5 / 3;
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--muted);

    /* poster, video (or an embed's <iframe> - YouTube, Vimeo) and play
       button share the same cover layer */
    & .mk-showcase-poster,
    & :is(video, iframe),
    & .mk-showcase-play {
      position: absolute;
      inset: 0;
    }

    & .mk-showcase-poster,
    & :is(video, iframe) {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      background: var(--muted);
    }

    & iframe { border: 0; }

    /* state layering: poster+button until 'playing', video after; a waiting
       embed takes no clicks - only the play button acts */
    & :is(video, iframe) { opacity: 0; }
    & iframe { pointer-events: none; }
    &[data-state='playing'] {
      & .mk-showcase-poster { opacity: 0; }
      & .mk-showcase-play { opacity: 0; visibility: hidden; }
      & :is(video, iframe) { opacity: 1; pointer-events: auto; }
    }
  }

  /* centered circular play button - real <button>, keyboard-focusable;
     inset auto + margin auto centers the 64px box in the full-inset cell */
  .mk-showcase-play {
    z-index: 10;
    inset: auto;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    padding: 0.75rem;
    border: none;
    border-radius: 9999px;
    background: var(--background);
    box-shadow: var(--shadow-2xs);
    cursor: pointer;
    transition: opacity 200ms ease, scale 300ms ease;

    /* CSS wins over the `fill="none"` presentation attribute, so a lucide
       stroke icon renders as a solid glyph inside the circle */
    & svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
    &:hover { scale: 1.08; }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  }


  /* -- variants ------------------------------------------------- */
  /* browser: a window bar with three dots on top; the layers sit below it */
  .mk-showcase[data-variant="browser"] {
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: var(--shadow-xl);

    &::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      z-index: 11;
      height: 2.25rem;
      border-block-end: 1px solid var(--border);
      background:
        radial-gradient(circle at 1rem 50%, oklch(0.7 0.18 25) 0.3125rem, transparent 0.34rem),
        radial-gradient(circle at 1.75rem 50%, oklch(0.8 0.15 85) 0.3125rem, transparent 0.34rem),
        radial-gradient(circle at 2.5rem 50%, oklch(0.75 0.16 150) 0.3125rem, transparent 0.34rem),
        var(--muted);
    }
    & :is(.mk-showcase-poster, video, iframe) { inset: 2.25rem 0 0; height: calc(100% - 2.25rem); }
    & .mk-showcase-play { inset: 2.25rem 0 0; }
  }

  /* ratios: 16:9 for video, 1:1 for social / mobile */
  .mk-showcase[data-ratio="wide"] { aspect-ratio: 16 / 9; }
  .mk-showcase[data-ratio="square"] { aspect-ratio: 1; }

  /* a stage around the showcase: room for callouts, perspective for the tilt */
  .mk-showcase-stage {
    position: relative;
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding: 1.5rem;
    perspective: 1400px;
  }

  /* callouts: small cards floating over the frame's corners */
  .mk-showcase-callout {
    position: absolute;
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    max-width: 16rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in oklch, var(--popover) 88%, transparent);
    color: var(--popover-foreground);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(8px);
    font-size: 0.8125rem;

    & > svg { flex: none; padding: 0.375rem; width: 2rem; height: 2rem; border-radius: var(--radius-md); background: color-mix(in oklch, var(--primary) 12%, transparent); color: var(--primary); box-sizing: border-box; }
    & div { display: grid; }
    & span { color: var(--muted-foreground); }
    &[data-pos="top-start"] { top: 0; left: 0; }
    &[data-pos="top-end"] { top: 0; right: 0; }
    &[data-pos="bottom-start"] { bottom: 0; left: 0; }
    &[data-pos="bottom-end"] { bottom: 0; right: 0; }
  }

  /* tilt: leans back, straightens as it scrolls into view */
  @keyframes mk-showcase-untilt {
    from { rotate: x 22deg; scale: 0.9; opacity: 0.6; }
    to { rotate: x 0deg; scale: 1; opacity: 1; }
  }
  .mk-showcase-stage[data-tilt] .mk-showcase { transform-origin: 50% 100%; animation: mk-showcase-untilt linear both; }
  @supports (animation-timeline: view()) {
    .mk-showcase-stage[data-tilt] .mk-showcase { animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
  @supports not (animation-timeline: view()) {
    .mk-showcase-stage[data-tilt] .mk-showcase { animation: none; }
  }

  /* tour: Tabs above the frames - each panel shows one screen */
  .mk-showcase-tour {
    display: grid;
    gap: 1.25rem;
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    justify-items: center;

    & .tab-list { flex-wrap: wrap; height: auto; }
    & .tab-content { width: 100%; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-showcase-stage[data-tilt] .mk-showcase { animation: none; }
  }

  @media (forced-colors: active) {
    .mk-showcase-callout { border-color: CanvasText; }
    .mk-showcase[data-variant="browser"]::before { border-block-end-color: CanvasText; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mk-showcase-play { transition: none; }
  }

  @media (forced-colors: active) {
    .mk-showcase-play { outline: 1px solid ButtonText; }
  }
}

/* ── components/profile-form/profile-form.css ── */
/* -- Profile Form (website · Account & States) ----------------------------
   Edits a user's personal information - photo, name, username, bio, website and time zone - as settings rows with a description beside each group. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-profile-form, .mk-profile-form *, .mk-profile-form ::before, .mk-profile-form ::after) { box-sizing: border-box; }

  .mk-profile-form { container: mk-profile-form / inline-size; width: 100%; }
  .mk-profile-form form { display: grid; }
  .mk-profile-form-section { display: grid; gap: 1rem 3rem; padding-block: 1.75rem; border-block-end: 1px solid var(--border);
    & > div:first-child h2 { margin: 0; font-size: 1rem; font-weight: 600; }
    & > div:first-child p { margin: 0.25rem 0 0; color: var(--muted-foreground); font-size: 0.875rem; }
  }
  .mk-profile-form-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1rem; max-width: 36rem; }
  .mk-profile-form-field { display: grid; gap: 0.375rem; &[data-span="full"] { grid-column: 1 / -1; } }
  .mk-profile-form-hint { color: var(--muted-foreground); font-size: 0.8125rem; }
  .mk-profile-form-photo { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
    & .avatar { width: 4rem; height: 4rem; }
  }
  .mk-profile-form-upload { position: relative; overflow: hidden;
    & input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  }
  .mk-profile-form-upload:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
  .mk-profile-form-prefix { display: flex;
    & span { display: grid; place-items: center; padding-inline: 0.75rem; border: 1px solid var(--input); border-inline-end: 0; border-radius: var(--radius-md) 0 0 var(--radius-md); background: var(--muted); color: var(--muted-foreground); font-size: 0.875rem; }
    & .input { border-start-start-radius: 0; border-end-start-radius: 0; }
  }
  .mk-profile-form-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 0.5rem; padding-block: 1rem; background: var(--background); }

  @container mk-profile-form (min-width: 48rem) {
    .mk-profile-form-section { grid-template-columns: 16rem minmax(0, 1fr); }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-profile-form-prefix span { border-color: CanvasText; }
  }
}

/* ── components/profile-header/profile-header.css ── */
/* -- Profile Header (website · Account & States) --------------------------
   Presents a user's avatar, identity, biography, and relevant actions - a cover, an overlapping avatar, name and handle, bio, details, counts and follow / message. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-profile-header, .mk-profile-header *, .mk-profile-header ::before, .mk-profile-header ::after) { box-sizing: border-box; }

  .mk-profile-header { container: mk-profile-header / inline-size; width: 100%; overflow: hidden; border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground); }
  .mk-profile-header-cover { display: block; width: 100%; height: 10rem; object-fit: cover; background: linear-gradient(120deg, color-mix(in oklab, var(--chart-1) 60%, var(--muted)), color-mix(in oklab, var(--chart-3) 60%, var(--muted))); }
  .mk-profile-header-body { display: grid; gap: 1rem; padding: 0 1.5rem 1.5rem; }
  .mk-profile-header-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-block-start: -2.75rem;
    & .avatar { width: 6rem; height: 6rem; border: 4px solid var(--card); box-shadow: var(--shadow-md); }
  }
  .mk-profile-header-actions { display: flex; gap: 0.5rem; }
  .mk-profile-header-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
  .mk-profile-header-handle { margin: 0; color: var(--muted-foreground); }
  .mk-profile-header-bio { margin: 0; max-width: 40rem; line-height: 1.6; text-wrap: pretty; }
  .mk-profile-header-meta { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; margin: 0; padding: 0; list-style: none; color: var(--muted-foreground); font-size: 0.875rem;
    & li { display: inline-flex; align-items: center; gap: 0.375rem; }
    & svg { width: 1rem; height: 1rem; }
    & a { color: var(--primary); text-decoration: none; }
  }
  .mk-profile-header-stats { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0;
    & div { display: flex; flex-direction: row-reverse; gap: 0.375rem; font-size: 0.9375rem; }
    & dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
    & dt { color: var(--muted-foreground); }
  }

  .mk-profile-header[data-variant="compact"] {
    & .mk-profile-header-body { padding: 1.25rem; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.25rem 1rem; }
    & .avatar { width: 3.5rem; height: 3.5rem; grid-row: span 2; }
    & .mk-profile-header-name { font-size: 1.0625rem; }
    & .mk-profile-header-actions { grid-column: 3; grid-row: 1 / span 2; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-profile-header { border-color: CanvasText; }
  }
}

/* ── components/progress/progress.css ── */
/* -- Progress component --------------------------------------------- */

@layer components {
  /* The fill resolves once, here: data-tone (--_c) > the public
     --progress-color > --primary. Everything below paints from --_fill. */
  .progress {
    --_fill: var(--_c, var(--progress-color, var(--primary)));
    --_stripes: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    height: 0.5rem;
    border: none;
    border-radius: 9999px;
    overflow: hidden;
    background-color: var(--secondary);
    accent-color: var(--_fill);
    vertical-align: middle;

    /* -- Sizes: bar thickness scale; default (no attribute) == md. */
    &[data-size="xs"] { height: 0.25rem; }
    &[data-size="sm"] { height: 0.375rem; }
    &[data-size="md"] { height: 0.5rem; }
    &[data-size="lg"] { height: 0.75rem; }
    &[data-size="xl"] { height: 1rem; }

    /* -- Tones: success / warning / info / destructive; any other color
       via style="--progress-color: …". auto follows the value: the
       runtime (progress.js) sets data-level low (< 34%) / mid / high. */
    &[data-tone="success"] { --_c: oklch(0.6 0.15 150); }
    &[data-tone="warning"] { --_c: oklch(0.75 0.16 70); }
    &[data-tone="info"] { --_c: oklch(0.6 0.16 250); }
    &[data-tone="destructive"] { --_c: var(--destructive); }
    &[data-tone="auto"] {
      &[data-level="low"] { --_c: var(--destructive); }
      &[data-level="mid"] { --_c: oklch(0.75 0.16 70); }
      &[data-level="high"] { --_c: oklch(0.6 0.15 150); }
    }

    /* -- Stripes: diagonal bands over the fill; "animated" moves them */
    &[data-striped] {
      --_stripes: repeating-linear-gradient(
        -45deg,
        color-mix(in oklch, white 22%, transparent) 0 0.375rem,
        transparent 0.375rem 0.75rem
      );
    }
  }

  /* WebKit (Chrome, Safari, Edge) */
  .progress::-webkit-progress-bar {
    background-color: var(--secondary);
    border-radius: 9999px;
  }
  .progress::-webkit-progress-value {
    background: var(--_stripes), var(--_fill);
    background-size: 1.06rem 1.06rem, auto;
    border-radius: 9999px;
  }
  .progress[data-striped="animated"]::-webkit-progress-value {
    animation: progress-stripes 700ms linear infinite;
  }

  /* Firefox */
  .progress::-moz-progress-bar {
    background: var(--_stripes), var(--_fill);
    background-size: 1.06rem 1.06rem, auto;
    border-radius: 9999px;
  }
  .progress[data-striped="animated"]::-moz-progress-bar {
    animation: progress-stripes 700ms linear infinite;
  }

  @keyframes progress-stripes {
    to { background-position: 1.06rem 0, 0 0; }
  }

  /* Indeterminate state */
  .progress:indeterminate {
    background: linear-gradient(
      90deg,
      var(--secondary) 0%,
      var(--_fill) 50%,
      var(--secondary) 100%
    );
    background-size: 200% 100%;
    animation: progress-indeterminate 1.5s linear infinite;
  }
  .progress:indeterminate::-webkit-progress-bar { background-color: transparent; }
  .progress:indeterminate::-moz-progress-bar { background-color: transparent; }

  @keyframes progress-indeterminate {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* -- Field: a label + a live value readout with the bar ---------------
     <div class="progress-field">
       <div class="progress-header"><span class="progress-label">…</span>
         <output class="progress-value" for="bar-id"></output></div>
       <progress class="progress" id="bar-id" …></progress>
     </div>
     progress.js writes the value into every output (data-format: percent
     | fraction | value, or a data-template). */
  .progress-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    width: 100%;
  }
  .progress-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
  }
  .progress-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
  }
  .progress-value {
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--muted-foreground);
    white-space: nowrap;
  }
  .progress-hint {
    font-size: 0.75rem;
    color: var(--muted-foreground);
  }

  /* -- Label inside the bar: data-label="inside" on the field (bar + output
     only). The output spans the bar; its text reads in the foreground over
     the track and - through a copy clipped to the filled part (::after,
     data-text + --progress-pct set by progress.js) - in the fill's own
     foreground over the fill. */
  .progress-field[data-label="inside"] {
    display: grid;

    & > .progress {
      grid-area: 1 / 1;
      height: 1.25rem;
      &[data-size="lg"] { height: 1.5rem; }
      &[data-size="xl"] { height: 1.75rem; }
    }
    & > .progress-value {
      grid-area: 1 / 1;
      position: relative;
      display: grid;
      place-items: center;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--foreground);
      pointer-events: none;

      &::after {
        content: attr(data-text);
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: var(--primary-foreground);
        clip-path: inset(0 calc(100% - var(--progress-pct, 0%)) 0 0);
      }
    }
  }
  /* the tones are light fills: dark text reads better on them */
  .progress-field[data-label="inside"]:has(> .progress:is([data-tone="warning"], [data-tone="auto"][data-level="mid"])) > .progress-value::after {
    color: oklch(0.25 0.05 70);
  }
  .progress-field[data-label="inside"]:has(> .progress:is([data-tone="success"], [data-tone="info"], [data-tone="destructive"], [data-tone="auto"]:not([data-level="mid"]))) > .progress-value::after {
    color: white;
  }
  .progress-field[data-label="inside"]:dir(rtl) > .progress-value::after {
    clip-path: inset(0 0 0 calc(100% - var(--progress-pct, 0%)));
  }
}

/* Accessibility: suppress motion for users who request it (REQUIRED for all
   components - AGENTS.md "Accessibility CSS"). Near-zero duration instead of
   `none` keeps transitionend/animationend firing. (progress.js also skips
   its value tween then - the bar jumps straight to the target.) */
@media (prefers-reduced-motion: reduce) {
  @layer components {
    .progress,
    .progress::-webkit-progress-value,
    .progress::-moz-progress-bar {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

@media (prefers-contrast: more) {
  @layer components {
    .progress { outline: 1px solid var(--foreground); outline-offset: 1px; }
    .progress-value { color: var(--foreground); }
  }
}

@media (forced-colors: active) {
  @layer components {
    .progress { forced-color-adjust: none; background: Canvas; outline: 1px solid CanvasText; }
    .progress::-webkit-progress-bar { background: Canvas; }
    .progress::-webkit-progress-value { background: Highlight; }
    .progress::-moz-progress-bar { background: Highlight; }
    .progress-field[data-label="inside"] > .progress-value { color: CanvasText; }
    .progress-field[data-label="inside"] > .progress-value::after { color: HighlightText; }
  }
}

/* ── components/project-details/project-details.css ── */
/* -- Project Details (website · Company) ----------------------------------
   Presents one project's brief, scope, deliverables, and media - a cover, the facts, the story and a gallery, ending with the next project. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-project-details, .mk-project-details *, .mk-project-details ::before, .mk-project-details ::after) { box-sizing: border-box; }

  .mk-project-details { container: mk-project-details / inline-size; display: grid; gap: 2.5rem; width: 100%; }
  .mk-project-details-head { display: grid; gap: 1rem; }
  .mk-project-details-title { margin: 0; font-size: clamp(2rem, 6cqi, 4rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
  .mk-project-details-summary { margin: 0; max-width: 44rem; color: var(--muted-foreground); font-size: 1.125rem; line-height: 1.6; text-wrap: pretty; }
  .mk-project-details-cover { margin: 0; overflow: hidden; border-radius: var(--radius-xl);
    & img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
  }
  .mk-project-details-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: 1.5rem;
    margin: 0;
    padding-block: 1.5rem;
    border-block: 1px solid var(--border);

    & div { display: grid; gap: 0.25rem; }
    & dt { color: var(--muted-foreground); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
    & dd { margin: 0; font-weight: 500; }
  }
  .mk-project-details-brief { display: grid; gap: 2rem;
    & h2 { margin: 0 0 0.75rem; font-size: 1.25rem; font-weight: 600; }
    & p { margin: 0; color: var(--muted-foreground); line-height: 1.75; }
  }
  .mk-project-details-deliverables {
    margin: 0;
    padding: 0;
    list-style: none;
    border-block-start: 1px solid var(--border);

    & li { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.75rem; border-block-end: 1px solid var(--border); }
    & span { color: var(--muted-foreground); font-size: 0.875rem; }
  }
  .mk-project-details-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    grid-auto-rows: 14rem;
    grid-auto-flow: dense;
    gap: 0.75rem;

    & figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--muted); }
    & img { display: block; width: 100%; height: 100%; object-fit: cover; }
    & figcaption { position: absolute; inset: auto 0.5rem 0.5rem; width: fit-content; padding: 0.25rem 0.625rem; border-radius: 999px; background: oklch(0.12 0.02 260 / 0.7); color: #fff; font-size: 0.75rem; backdrop-filter: blur(6px); }
    & [data-span="wide"] { grid-column: span 2; }
    & [data-span="tall"] { grid-row: span 2; }
  }
  .mk-project-details-next {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 0;
    border-block-start: 1px solid var(--border);
    color: inherit;
    text-decoration: none;

    & small { display: block; color: var(--muted-foreground); font-size: 0.8125rem; }
    & strong { font-size: clamp(1.25rem, 3cqi, 2rem); font-weight: 600; letter-spacing: -0.02em; }
    & svg { width: 1.75rem; height: 1.75rem; transition: translate 200ms ease; }
    &:hover svg { translate: 0.375rem 0; }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-md); }
  }

  @container mk-project-details (min-width: 48rem) {
    .mk-project-details-brief { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 4rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-project-details-next svg { transition: none; }
    .mk-project-details-next:hover svg { translate: none; }
  }

  @media (forced-colors: active) {
    .mk-project-details-gallery figcaption { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  }
}

/* ── components/project-item/project-item.css ── */
/* -- Project Item (website · Company) -------------------------------------
   Previews one portfolio project with imagery and context - picture first, caption under it or revealed over it, or a wide feature. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-project-item, .mk-project-item *, .mk-project-item ::before, .mk-project-item ::after) { box-sizing: border-box; }

  .mk-project-item { position: relative; display: flex; flex-direction: column; gap: 0.875rem; }
  .mk-project-item { position: relative; }
  .mk-project-item-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .mk-project-item-title a:focus-visible { outline: none; }
  .mk-project-item:has(.mk-project-item-title a:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
  /* zero specificity: any block rule may still position its controls */
  :where(.mk-project-item :is(button, input, select, label, .btn):not(.mk-project-item-title a)) { position: relative; z-index: 1; }
  .mk-project-item:has(.mk-project-item-title a:focus-visible) { border-radius: var(--radius-xl); }
  .mk-project-item-media { margin: 0; overflow: hidden; border-radius: var(--radius-xl); background: var(--muted);
    & img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: scale 500ms cubic-bezier(.2,.7,.2,1); }
  }
  .mk-project-item:hover .mk-project-item-media img { scale: 1.05; }
  .mk-project-item-body { display: grid; gap: 0.25rem; }
  .mk-project-item-title { margin: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em;
    & a { color: inherit; text-decoration: none; }
  }
  .mk-project-item-meta { display: flex; gap: 0.5rem; margin: 0; color: var(--muted-foreground); font-size: 0.875rem;
    & span + span::before { content: "·"; margin-inline-end: 0.5rem; }
  }
  .mk-project-item-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.375rem 0 0; padding: 0; list-style: none;
    & li { padding: 0.125rem 0.5rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted-foreground); font-size: 0.75rem; }
  }

  .mk-project-item[data-variant="overlay"] {
    overflow: hidden;
    border-radius: var(--radius-xl);

    & .mk-project-item-media img { aspect-ratio: 4 / 5; }
    & .mk-project-item-body {
      position: absolute;
      inset: auto 0 0;
      padding: 3rem 1.25rem 1.25rem;
      background: linear-gradient(transparent, oklch(0.12 0.02 260 / 0.85));
      color: #fff;
      opacity: 0;
      translate: 0 1rem;
      transition: opacity 250ms ease, translate 250ms ease;
    }
    & .mk-project-item-meta { color: oklch(1 0 0 / 0.8); }
    &:is(:hover, :focus-within) .mk-project-item-body { opacity: 1; translate: 0 0; }
  }
  @media (hover: none) {
    .mk-project-item[data-variant="overlay"] .mk-project-item-body { opacity: 1; translate: 0 0; }
  }

  .mk-project-item[data-variant="wide"] {
    & .mk-project-item-media img { aspect-ratio: 21 / 9; }
    & .mk-project-item-body { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
    & .mk-project-item-title { font-size: 1.5rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-project-item-media img, .mk-project-item[data-variant="overlay"] .mk-project-item-body { transition: none; }
    .mk-project-item:hover .mk-project-item-media img { scale: none; }
  }

  @media (forced-colors: active) {
    .mk-project-item[data-variant="overlay"] .mk-project-item-body { background: Canvas; color: CanvasText; }
  }
}

/* ── components/quick-links/quick-links.css ── */
/* -- Quick Links (website · Search & Navigation) --------------------------
   Groups shortcuts to frequently needed destinations - icon tiles with a line each, a compact list, or chips. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-quick-links, .mk-quick-links *, .mk-quick-links ::before, .mk-quick-links ::after) { box-sizing: border-box; }

  .mk-quick-links { width: 100%;
    & ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
    & a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.875rem; height: 100%; padding: 1rem 1.125rem; border: 1px solid var(--border); border-radius: var(--radius-xl); color: inherit; text-decoration: none; transition: border-color 150ms ease, background-color 150ms ease; }
    & a:hover { border-color: color-mix(in oklch, var(--foreground) 25%, var(--border)); background: color-mix(in oklch, var(--accent) 50%, transparent); }
    & a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
    & a > svg:first-child { width: 1.25rem; height: 1.25rem; color: var(--primary); }
    & a > svg:last-child { width: 1rem; height: 1rem; color: var(--muted-foreground); transition: translate 150ms ease; }
    & a:hover > svg:last-child { translate: 0.25rem 0; color: var(--foreground); }
    & span { display: grid; }
    & strong { font-size: 0.9375rem; font-weight: 600; }
    & small { color: var(--muted-foreground); font-size: 0.8125rem; }
  }
  .mk-quick-links[data-variant="list"] {
    max-width: 28rem;
    & ul { grid-template-columns: minmax(0, 1fr); gap: 0; }
    & a { padding: 0.875rem 0.5rem; border: 0; border-block-end: 1px solid var(--border); border-radius: 0; }
  }
  .mk-quick-links[data-variant="chips"] {
    & ul { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    & a { display: inline-flex; gap: 0.5rem; padding: 0.5rem 0.875rem; border-radius: 999px; }
    & small, & a > svg:last-child { display: none; }
    & strong { font-size: 0.875rem; font-weight: 500; }
    & a > svg:first-child { width: 1rem; height: 1rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-quick-links a, .mk-quick-links a > svg:last-child { transition: none; }
    .mk-quick-links a:hover > svg:last-child { translate: none; }
  }

  @media (forced-colors: active) {
    .mk-quick-links a { border-color: CanvasText; }
  }
}

/* ── components/radial-progress/radial-progress.css ── */
/* -- Radial Progress component --------------------------------- */

/* Typed custom property: a registered <number> interpolates, so a new
   --value tweens the ring with zero JS. The PUBLIC knob stays the plain
   --value (daisyUI's API); only this private copy is registered - a global
   @property --value would re-type every other --value on the page (the
   countdown digits use one) and any consumer's own. @property is an
   at-rule: no cascade weight, outside @layer components. */
@property --_rp-value {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@layer components {
  /* Public custom properties (set them inline on the element):
       --value      0–100, required — the completion percentage
       --size       outer diameter        (default 5rem)
       --thickness  ring stroke width     (default 10% of --size)
     Colors come from the ring's own `color`, so a variant recolors the arc
     and the label in one declaration. */
  .radial-progress {
    /* the public knob (an inline style="--value:70" overrides it) and its
       registered, animatable copy that everything below paints from */
    --value: 0;
    --_rp-value: var(--value);
    --size: 5rem;
    --thickness: calc(var(--size) / 10);
    /* leading-edge cap travels the stroke centerline: r = (size - thickness)/2 */
    --_rp-angle: calc(var(--_rp-value) * 3.6deg - 90deg);

    position: relative;
    display: inline-grid;
    place-content: center;
    box-sizing: content-box;
    inline-size: var(--size);
    block-size: var(--size);
    border-radius: 9999px;
    vertical-align: middle;
    font-size: 0.875rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
    /* data-tone (--_c) > the public --progress-color > --primary; the arc,
       its cap and the label all paint in currentColor */
    color: var(--_c, var(--progress-color, var(--primary)));
    /* the arc is a function of --value, so the registered property tweens it */
    transition: --_rp-value 600ms ease;

    /* Track + indicator in one painted layer: a conic-gradient (arc up to
       --value, track after it) masked down to a ring, plus a round dot at
       12 o'clock so the arc's start is capped. */
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        radial-gradient(farthest-side, currentColor 98%, #0000)
          top / var(--thickness) var(--thickness) no-repeat,
        conic-gradient(currentColor calc(var(--_rp-value) * 1%), var(--secondary) 0);
      -webkit-mask: radial-gradient(
        farthest-side,
        #0000 calc(99% - var(--thickness)),
        #000 calc(100% - var(--thickness))
      );
      mask: radial-gradient(
        farthest-side,
        #0000 calc(99% - var(--thickness)),
        #000 calc(100% - var(--thickness))
      );
    }

    /* Round cap at the leading edge. Positioned with cos()/sin() rather than
       a compound `transform: rotate() translate()` — individual transform
       properties compose in the wrong order for a polar offset, and the trig
       functions keep the position a pure function of --value (so it tweens). */
    &::after {
      content: "";
      position: absolute;
      inline-size: var(--thickness);
      block-size: var(--thickness);
      border-radius: 9999px;
      background-color: currentColor;
      inset-inline-start: calc(
        50% + cos(var(--_rp-angle)) * (var(--size) - var(--thickness)) / 2 -
          var(--thickness) / 2
      );
      inset-block-start: calc(
        50% + sin(var(--_rp-angle)) * (var(--size) - var(--thickness)) / 2 -
          var(--thickness) / 2
      );
    }

    /* -- Variants (recolor arc + label together) ------------------ */
    &[data-variant="default"] {
      color: var(--primary);
    }

    &[data-variant="secondary"] {
      color: var(--muted-foreground);
    }

    &[data-variant="destructive"] {
      color: var(--destructive);
    }

    /* no semantic "success" token exists in the tweakcn shape — literal, same
       green the toast component uses (token boundary rule) */
    &[data-variant="success"] {
      color: oklch(0.65 0.2 145);
    }

    /* -- Tones (same vocabulary as progress): success / warning / info /
       destructive; auto follows the value - radial-progress.js sets
       data-level low (< 34%) / mid / high. Any color: --progress-color. */
    &[data-tone="success"] { --_c: oklch(0.6 0.15 150); }
    &[data-tone="warning"] { --_c: oklch(0.72 0.16 70); }
    &[data-tone="info"] { --_c: oklch(0.6 0.16 250); }
    &[data-tone="destructive"] { --_c: var(--destructive); }
    &[data-tone="auto"] {
      &[data-level="low"] { --_c: var(--destructive); }
      &[data-level="mid"] { --_c: oklch(0.72 0.16 70); }
      &[data-level="high"] { --_c: oklch(0.6 0.15 150); }
    }

    /* -- Label parts: a .radial-progress-value (the number the script
       writes) over an optional .radial-progress-caption ------------- */
    & .radial-progress-value { font-weight: 600; }
    & .radial-progress-caption {
      margin-block-start: 0.25em;
      font-size: 0.6875em;
      font-weight: 400;
      color: var(--muted-foreground);
    }

    /* -- A glide driven by the script paints every frame itself: no CSS
       easing on top (it would lag the counting label) --------------- */
    &[data-running] { transition: none; }

    /* -- Indeterminate: no aria-valuenow (an indeterminate progressbar has
       none) - a quarter arc spins, the cap hides --------------------- */
    &:not([aria-valuenow]) {
      --_rp-value: 25;
      transition: none;
      &::before { animation: radial-progress-spin 1s linear infinite; }
      &::after { display: none; }
    }

    /* -- Sizes ---------------------------------------------------- */
    &[data-size="sm"] {
      --size: 3.5rem;
      font-size: 0.75rem;
    }

    &[data-size="lg"] {
      --size: 8rem;
      font-size: 1.25rem;
    }
  }

  @keyframes radial-progress-spin { to { rotate: 1turn; } }

  /* -- Accessibility -------------------------------------------- */

  /* Suppress motion for users who request it (REQUIRED — AGENTS.md
     "Accessibility CSS"). Near-zero instead of `none` keeps transitionend
     firing for anything awaiting the value tween. */
  @media (prefers-reduced-motion: reduce) {
    .radial-progress {
      transition-duration: 0.01ms !important;
      &::before { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
    }
  }

  /* Thicker stroke and a darker track when more contrast is requested. */
  @media (prefers-contrast: more) {
    .radial-progress {
      --thickness: calc(var(--size) / 6);

      &::before {
        background:
          radial-gradient(farthest-side, currentColor 98%, #0000)
            top / var(--thickness) var(--thickness) no-repeat,
          conic-gradient(currentColor calc(var(--_rp-value) * 1%), var(--border) 0);
      }
    }
  }

  /* Windows High Contrast Mode: gradients are dropped by forced colors, so
     opt out and repaint the ring with system colors instead. */
  @media (forced-colors: active) {
    .radial-progress {
      forced-color-adjust: none;
      color: Highlight;

      &::before {
        background:
          radial-gradient(farthest-side, Highlight 98%, #0000)
            top / var(--thickness) var(--thickness) no-repeat,
          conic-gradient(Highlight calc(var(--_rp-value) * 1%), GrayText 0);
      }
    }
  }
}

/* ── components/radio/radio.css ── */
/* -- Radio Group component -------------------------------------- */

@layer components {
  .radio-group {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    & > legend {
      /* top + bottom breathing room: stacked groups (e.g. a density ladder
         demo) would otherwise jam each heading against the options above it */
      margin-top: 0.5rem;
      margin-bottom: 0.375rem;
    }

    /* Horizontal layout */
    &[data-orientation="horizontal"] {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 1rem;
    }
  }

  .radio-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    & > label {
      font-size: 0.875rem;
      font-weight: 400;
      cursor: pointer;
    }
  }

  /* -- With-description layout -------------------------------- */
  .radio-item-block {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 0.5rem;

    & > .radio {
      grid-row: 1 / 3;
      margin-top: 0.125rem;
    }

    & > label {
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      line-height: 1.4;
    }

    & > .radio-description {
      grid-column: 2;
      font-size: 0.8125rem;
      color: var(--muted-foreground);
      line-height: 1.5;
    }
  }

  /* -- Density --------------------------------------------------
     data-density on the .radio-group root is a whitespace policy: the gap
     between options (and card padding) scale at the shared 0.75 / 1 / 1.25
     ratio; comfortable matches the unsized default. Radio size itself stays
     fixed - this is spacing, not zoom. */
  .radio-group:where([data-density="compact"]) {
    gap: 0.25rem;
    &[data-orientation="horizontal"] { gap: 0.75rem; }
    & .radio-card { padding: 0.75rem 1rem; }
  }
  .radio-group:where([data-density="comfortable"]) {
    gap: 0.5rem;
    &[data-orientation="horizontal"] { gap: 1rem; }
  }
  .radio-group:where([data-density="spacious"]) {
    gap: 0.75rem;
    &[data-orientation="horizontal"] { gap: 1.5rem; }
    & .radio-card { padding: 1.25rem 1.5rem; }
  }

  /* Gap hit area: inside an item layout the radio's click target spans the
     gap to its label (a transparent ::before, part of the input's own hit
     box), so clicking the whitespace between circle and text selects too -
     the label's `for` covers the text itself. Inline-end only: the label
     always sits after the radio (the block layout's second grid column). */
  :is(.radio-item, .radio-item-block) > .radio::before {
    content: '';
    position: absolute;
    inset-block: -0.25rem;
    inset-inline: -0.25rem -0.5rem;
  }

  /* -- Card variant ------------------------------------------- */
  .radio-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color 150ms, background 150ms;

    &:hover {
      background: var(--accent);
    }

    &:has(.radio:checked) {
      border-color: var(--primary);
    }

    &:has(.radio:focus-visible) {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    &:has(.radio:disabled) {
      cursor: not-allowed;
      background: var(--muted);

      &:hover { background: var(--muted); }
      & > label { color: var(--muted-foreground); cursor: not-allowed; }
    }

    & > .radio {
      position: absolute;
      top: 1rem;
      right: 1rem;
    }

    & > label {
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
    }

    & > .radio-description {
      font-size: 0.8125rem;
      color: var(--muted-foreground);
      line-height: 1.5;
    }
  }

  .radio {
    appearance: none;
    margin: 0; /* kill the UA's ~4px input margin - breaks flex/grid rhythm */
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--background);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: border-color 150ms;

    &:checked {
      border-color: var(--primary);

      &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background: var(--primary);
        transform: translate(-50%, -50%);
      }
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    /* Disabled = legible but inert: never an opacity fade (0.5 on a light
       --border edge left a ghost you had to look for). The shape keeps its
       full-strength edge, the surface turns muted, a chosen state keeps a
       softened primary fill, and the label goes muted with the no-entry
       cursor - "a choice that exists but is unavailable right now". */
    &:disabled {
      background: var(--muted);
      /* a mid-grey ring: --border on the muted fill is too faint to read as a shape */
      border-color: color-mix(in oklch, var(--muted-foreground) 50%, var(--background));
      cursor: not-allowed;

      &:checked {
        border-color: color-mix(in oklch, var(--primary) 45%, var(--background));

        &::after { background: color-mix(in oklch, var(--primary) 45%, var(--background)); }
      }

      & + label { color: var(--muted-foreground); cursor: not-allowed; }
    }

    &[aria-invalid="true"] {
      border-color: var(--destructive);

      &:checked {
        border-color: var(--destructive);

        &::after {
          background: var(--destructive);
        }
      }
    }
  }

  /* Helper text for group-level descriptions */
  .radio-group-description {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    margin: -0.125rem 0 0.25rem;
  }

  /* -- Accessibility ------------------------------------------ */
  @media (prefers-reduced-motion: reduce) {
    .radio,
    .radio-card {
      transition: none;
    }
  }

  @media (forced-colors: active) {
    .radio {
      border-color: ButtonText;

      &:checked {
        border-color: Highlight;

        &::after {
          background: Highlight;
        }
      }

      &:disabled {
        border-color: GrayText;

        &:checked::after {
          background: GrayText;
        }
      }
    }

    .radio-card {
      border-color: ButtonText;

      &:has(.radio:checked) {
        border-color: Highlight;
      }
    }
  }
}

/* ── components/rating/rating.css ── */
/* -- Rating component ------------------------------------------- */
/* Star rating. Interactive form is a native radio group (no JS);   */
/* the read-only form is a display-only fraction of five stars.     */

@layer components {
  .rating {
    /* Local knobs — not theme tokens: there is no amber in the tweakcn
       shape, and a rating's fill colour is a per-instance decision
       (stars amber, hearts destructive, …). Override inline or in a
       wrapper rule; both forms below read them. */
    --rating-color: #f59e0b;
    --rating-empty: var(--border);
    --rating-size: 1.25rem;

    border: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    line-height: 1;

    &[data-size="sm"] {
      --rating-size: 1rem;
    }

    &[data-size="lg"] {
      --rating-size: 1.75rem;
    }

    /* -- Glyph: any text glyph via --rating-glyph (the read-only form reads
       --rating-glyphs, the same glyph five times); data-glyph="heart" is
       the common one, in the destructive colour. U+FE0E keeps ♥ a text
       glyph (an emoji heart would ignore color). */
    &[data-glyph="heart"] {
      --rating-glyph: "\2665\FE0E";
      --rating-glyphs: "\2665\FE0E\2665\FE0E\2665\FE0E\2665\FE0E\2665\FE0E";
      --rating-color: var(--destructive);
    }
  }

  /* -- Interactive form (radio group) ------------------------- */
  .rating-item {
    position: relative;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    border-radius: var(--radius-sm);
    line-height: 1;

    &::before {
      content: var(--rating-glyph, "★");
      font-size: var(--rating-size);
      color: var(--rating-empty);
      transition: color 150ms, scale 150ms;
    }
  }

  /* The radio stays in the accessibility tree and keeps keyboard support —
     it is only visually replaced by the star drawn above. */
  .rating-input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  /* Filled: this star, and every star before the checked one. */
  .rating-item:has(.rating-input:checked)::before,
  .rating-item:has(~ .rating-item .rating-input:checked)::before {
    color: var(--rating-color);
  }

  /* Hover preview wins over the current value while the pointer is on the
     group: reset all, then fill up to the hovered star. Specificity is
     deliberate — each rule must outrank the checked rules above.
     A disabled group is excluded: previewing a value there would promise a
     choice the control cannot accept. */
  @media (hover: hover) {
    .rating:not(:has(.rating-input:disabled)):has(.rating-item:hover) .rating-item::before {
      color: var(--rating-empty);
    }

    .rating:not(:has(.rating-input:disabled)):has(.rating-item:hover) .rating-item:hover::before,
    .rating:not(:has(.rating-input:disabled)):has(.rating-item:hover) .rating-item:has(~ .rating-item:hover)::before {
      color: var(--rating-color);
      scale: 1.1;
    }
  }

  .rating-item:has(.rating-input:focus-visible) {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }

  /* Disabled — native <fieldset disabled> propagates to every radio. */
  .rating:has(.rating-input:disabled) {
    opacity: 0.5;

    /* the star and the radio stretched over it must agree — a hand on one and
       "no entry" on the other invites a click the control cannot take */
    & .rating-item,
    & .rating-input {
      cursor: not-allowed;
    }
  }

  .rating[data-readonly] .rating-item {
    cursor: default;
  }

  /* -- Read-only form (fractional display) -------------------- */
  /* Two layers of five stars: empty underneath, filled on top clipped to
     the value — so 3.5 renders a half star with no extra markup. */
  .rating[data-readonly] {
    position: relative;
    display: inline-block;
    font-size: var(--rating-size);
    letter-spacing: 0.125rem;

    &::before,
    &::after {
      content: var(--rating-glyphs, "★★★★★");
      line-height: 1;
    }

    &::before {
      color: var(--rating-empty);
    }

    &::after {
      position: absolute;
      inset-block: 0;
      inset-inline-start: 0;
      width: calc(var(--rating-value, 0) / 5 * 100%);
      overflow: hidden;
      white-space: nowrap;
      color: var(--rating-color);
    }
  }

  /* -- Label beside the stars --------------------------------- */
  .rating-value {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin-inline-start: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer components {
    .rating,
    .rating *,
    .rating::before,
    .rating::after,
    .rating *::before,
    .rating *::after,
    .rating-item,
    .rating-item *,
    .rating-item::before,
    .rating-item::after {
      transition: none;
      animation: none;
      scale: none;
    }
  }
}

@media (prefers-contrast: more) {
  @layer components {
    .rating {
      --rating-empty: var(--muted-foreground);
    }

    .rating-item:has(.rating-input:focus-visible) {
      outline-width: 3px;
    }
  }
}

@media (forced-colors: active) {
  @layer components {
    .rating {
      --rating-color: Highlight;
      --rating-empty: GrayText;

      &:has(.rating-input:disabled) {
        --rating-color: GrayText;
      }
    }

    .rating-item:has(.rating-input:focus-visible) {
      outline-color: Highlight;
    }
  }
}

/* ── components/registration-form/registration-form.css ── */
/* -- Registration Form (website · Events & Promotions) --------------------
   Collects attendee information and event participation choices - the ticket, the attendee, the workshops and the practical needs. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-registration-form, .mk-registration-form *, .mk-registration-form ::before, .mk-registration-form ::after) { box-sizing: border-box; }

  .mk-registration-form { container: mk-registration-form / inline-size; width: 100%; }
  .mk-registration-form form { display: grid; gap: 2rem; }
  .mk-registration-form-group { display: grid; gap: 0.875rem; margin: 0; padding: 0; border: 0; min-width: 0;
    & legend { margin-block-end: 0.875rem; padding: 0; font-size: 1.0625rem; font-weight: 600; }
  }
  .mk-registration-form-tickets { display: grid; gap: 0.75rem; }
  .mk-registration-form-ticket {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.25rem 0.75rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease;

    & b { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
    & small { grid-column: 2 / -1; color: var(--muted-foreground); font-size: 0.8125rem; line-height: 1.5; }
    &:hover { border-color: color-mix(in oklch, var(--foreground) 30%, var(--border)); }
    &:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow-md); }
  }
  .mk-registration-form-ticket-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-weight: 600; }
  .mk-registration-form-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1rem; }
  .mk-registration-form-field { display: grid; gap: 0.375rem; &[data-span="full"] { grid-column: 1 / -1; } }
  .mk-registration-form-choices { display: grid; gap: 0.625rem;
    & .checkbox-item { justify-content: space-between; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); }
    & .checkbox-item:has(:checked) { border-color: var(--primary); background: color-mix(in oklch, var(--primary) 5%, transparent); }
    & .checkbox-item label { flex: 1; }
    & small { color: var(--muted-foreground); font-size: 0.8125rem; }
  }
  .mk-registration-form-total {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-xl);
    background: var(--muted);

    & div { display: grid; }
    & span { color: var(--muted-foreground); font-size: 0.8125rem; }
    & output { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  }

  @container mk-registration-form (min-width: 40rem) {
    .mk-registration-form-tickets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mk-registration-form-ticket { grid-template-columns: auto minmax(0, 1fr); align-content: start; }
    .mk-registration-form-ticket b { grid-column: 2; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-registration-form-ticket { transition: none; }
  }

  @media (forced-colors: active) {
    .mk-registration-form-ticket:has(input:checked) { border-color: Highlight; }
  }
}

/* ── components/related-item/related-item.css ── */
/* -- Related Item (website) -----------------------------------------
   Links to one related article or resource: a thumbnail, its kind, the
   title (the link stretches over the item) and meta. Default: a compact
   row; card: image above; text: no image, an arrow at the end. */

@layer components {
  .mk-related-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
    padding: 0.5rem;
    margin: -0.5rem;
    border-radius: var(--radius-lg);
    transition: background-color 120ms;

    &:hover { background: var(--accent); }
    &:has(.mk-related-item-title a:focus-visible) { outline: 2px solid var(--ring); outline-offset: 0; }
  }

  .mk-related-item-media {
    flex: none;
    width: 5rem;
    aspect-ratio: 1;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--muted);

    & img { display: block; width: 100%; height: 100%; object-fit: cover; }
  }

  .mk-related-item-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.1875rem;
    min-width: 0;
  }

  .mk-related-item-kind {
    color: var(--primary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .mk-related-item-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

    & a {
      color: inherit;
      text-decoration: none;
      outline: none;

      &::after { content: ""; position: absolute; inset: 0; }
    }
  }

  .mk-related-item-meta { margin: 0; color: var(--muted-foreground); font-size: 0.75rem; }

  /* the arrow of the text variant */
  .mk-related-item-arrow {
    flex: none;
    width: 1rem;
    height: 1rem;
    color: var(--muted-foreground);
    transition: translate 150ms ease;
  }
  .mk-related-item:hover .mk-related-item-arrow { translate: 0.25rem 0; }

  /* card: image above the copy */
  .mk-related-item[data-variant="card"] {
    flex-direction: column;
    align-items: stretch;

    & .mk-related-item-media { width: 100%; aspect-ratio: 16 / 9; }
  }

  /* text: no image, rules between the items */
  .mk-related-item[data-variant="text"] {
    margin: 0;
    padding: 0.75rem 0.25rem;
    border-block-end: 1px solid var(--border);
    border-radius: 0;

    &:hover { background: transparent; }
    &:hover .mk-related-item-title { text-decoration: underline; text-underline-offset: 0.2em; }
  }

  /* a label on the thumbnail (duration, "Live") */
  .mk-related-item-media { position: relative; }
  .mk-related-item-badge {
    position: absolute;
    inset-block-end: 0.25rem;
    inset-inline-end: 0.25rem;
    padding: 0 0.3125rem;
    border-radius: var(--radius-sm);
    background: rgb(0 0 0 / 0.72);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
  }

  /* numbered: "read next" in order - the number from data-rank */
  .mk-related-item[data-variant="numbered"] {
    align-items: flex-start;

    &::before {
      content: attr(data-rank);
      flex: none;
      width: 1.75rem;
      color: var(--primary);
      font-size: 1.5rem;
      font-weight: 800;
      line-height: 1.1;
      font-variant-numeric: tabular-nums;
    }
    & .mk-related-item-media { display: none; }
  }

  /* overlay: the title over the image */
  .mk-related-item[data-variant="overlay"] {
    isolation: isolate;
    align-items: flex-end;
    min-height: 11rem;
    margin: 0;
    padding: 1rem;
    overflow: hidden;
    border-radius: var(--radius-lg);
    color: #fff;

    &:hover { background: transparent; }
    & .mk-related-item-media {
      position: absolute;
      inset: 0;
      z-index: -1;
      width: auto;
      aspect-ratio: auto;
      border-radius: 0;

      & img { transition: scale 300ms ease; }
      &::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.85), transparent 70%); }
    }
    &:hover .mk-related-item-media img { scale: 1.05; }
    & :is(.mk-related-item-kind, .mk-related-item-meta) { color: rgb(255 255 255 / 0.8); }
    & .mk-related-item-badge { inset-block: 0.5rem auto; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-related-item,
    .mk-related-item-arrow { transition: none; }
    .mk-related-item:hover .mk-related-item-arrow { translate: none; }
    .mk-related-item-media img { transition: none; }
    .mk-related-item:hover .mk-related-item-media img { scale: none; }
  }

  @media (prefers-contrast: more) {
    .mk-related-item-meta { color: var(--foreground); }
  }

  @media (forced-colors: active) {
    .mk-related-item-title a { color: LinkText; }
  }
}

/* ── components/release-header/release-header.css ── */
/* -- Release Header (website · Docs & Help) -------------------------------
   Introduces a release with its version, date, and summary - the version tag, kind of release, a headline, what it brings and where to get it. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-release-header, .mk-release-header *, .mk-release-header ::before, .mk-release-header ::after) { box-sizing: border-box; }

  .mk-release-header { container: mk-release-header / inline-size; display: grid; gap: 1rem; width: 100%; padding-block-end: 1.75rem; border-block-end: 1px solid var(--border); }
  .mk-release-header-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; color: var(--muted-foreground); font-size: 0.875rem; }
  .mk-release-header-version { padding: 0.125rem 0.5rem; border-radius: var(--radius-sm); background: var(--foreground); color: var(--background); font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700; }
  .mk-release-header-title { margin: 0; font-size: clamp(1.75rem, 5cqi, 2.75rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
  .mk-release-header-summary { margin: 0; max-width: 42rem; color: var(--muted-foreground); font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty; }
  .mk-release-header-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0.75rem; margin: 0.5rem 0 0; padding: 0; list-style: none;
    & li { display: grid; gap: 0.25rem; padding: 1rem; border-radius: var(--radius-lg); background: var(--muted); font-size: 0.875rem; }
    & svg { width: 1.125rem; height: 1.125rem; color: var(--primary); }
    & span { color: var(--muted-foreground); }
  }
  .mk-release-header-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }

  .mk-release-header[data-variant="compact"] { grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: 0.75rem; padding-block: 0.875rem;
    & .mk-release-header-title { font-size: 1rem; font-weight: 600; letter-spacing: 0; }
    & time { color: var(--muted-foreground); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-release-header-version { border: 1px solid CanvasText; }
  }
}

/* ── components/release-item/release-item.css ── */
/* -- Release Item (website · Docs & Help) ---------------------------------
   Describes one change, improvement, or fix within a release - its kind, what changed and why it matters, with the pull request and author. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-release-item, .mk-release-item *, .mk-release-item ::before, .mk-release-item ::after) { box-sizing: border-box; }

  .mk-release-item { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: start; gap: 1rem; padding-block: 1.25rem; border-block-end: 1px solid var(--border); }
  .mk-release-item-type {
    --_c: var(--muted-foreground);

    justify-self: start;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in oklch, var(--_c) 14%, transparent);
    color: var(--_c);
    font-size: 0.75rem;
    font-weight: 700;

    &[data-type="new"] { --_c: #15803d; }
    &[data-type="improved"] { --_c: #1d4ed8; }
    &[data-type="breaking"] { --_c: #b91c1c; }
  }
  .mk-release-item-body { display: grid; gap: 0.375rem; }
  .mk-release-item-title { margin: 0; font-size: 1rem; font-weight: 600; }
  .mk-release-item-desc { margin: 0; color: var(--muted-foreground); font-size: 0.9375rem; line-height: 1.6; }
  .mk-release-item-media { display: block; width: 100%; max-width: 32rem; margin-block: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-lg); }
  .mk-release-item-meta { display: flex; align-items: center; gap: 0.375rem; margin: 0; color: var(--muted-foreground); font-size: 0.8125rem;
    & a { color: inherit; font-family: var(--font-mono); }
    & .avatar { width: 1.25rem; height: 1.25rem; }
  }
  .mk-release-item[data-variant="compact"] { padding-block: 0.625rem;
    & .mk-release-item-title { font-size: 0.9375rem; font-weight: 500; }
    & .mk-release-item-body { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-release-item-type { border: 1px solid CanvasText; }
  }
}

/* ── components/reset-request/reset-request.css ── */
/* -- Reset Request (website · Account & States) ---------------------------
   Requests a password-reset link for an account - the email field, then the "check your inbox" state with a way to resend. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-reset-request, .mk-reset-request *, .mk-reset-request ::before, .mk-reset-request ::after) { box-sizing: border-box; }

  .mk-reset-request {
    container: mk-reset-request / inline-size;
    display: grid;
    gap: 1.5rem;
    width: 100%;
    max-width: 24rem;
    margin-inline: auto;
    padding: 2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);
    box-shadow: var(--shadow-sm);
  }
  .mk-reset-request-head { display: grid; justify-items: center; gap: 0.5rem; text-align: center;
    & > svg { width: 2rem; height: 2rem; color: var(--primary); }
    & h1, & h2 { margin: 0.25rem 0 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
    & p { margin: 0; color: var(--muted-foreground); font-size: 0.9375rem; text-wrap: pretty; }
  }
  .mk-reset-request form { display: grid; gap: 1rem; }
  .mk-reset-request .mk-auth-field { display: grid; gap: 0.375rem; }
  .mk-reset-request-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.875rem;
    & a { color: var(--primary); font-weight: 500; text-decoration: none; }
    & a:hover { text-decoration: underline; text-underline-offset: 3px; }
  }
  .mk-reset-request-foot { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; text-align: center;
    & a { color: var(--primary); font-weight: 600; text-decoration: none; }
    & a:hover { text-decoration: underline; text-underline-offset: 3px; }
  }
  .mk-reset-request-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--muted); color: var(--foreground);
    & svg { width: 1.375rem; height: 1.375rem; }
  }
  .mk-reset-request .btn { width: 100%; }
  .mk-reset-request-back { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; color: var(--muted-foreground); font-size: 0.875rem; text-decoration: none;
    & svg { width: 1rem; height: 1rem; }
    &:hover { color: var(--foreground); }
  }
  .mk-reset-request[data-variant="sent"] .mk-reset-request-icon { background: color-mix(in oklch, #16a34a 14%, transparent); color: #15803d; }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-reset-request { border-color: CanvasText; }
  }
}

/* ── components/resizer/resizer.css ── */
@layer components {
  /* -- Resizer --------------------------------------------------
     Wraps ONE container element and adds draggable handles on any subset of
     its 8 positions (sides + corners). The wrapper is the positioning context;
     handles overhang the border box by design, so keep overflow visible.
     Sizing behavior (px vs w-/h- classes) is driven by the runtime - this
     sheet owns only the handle geometry, cursors and feedback states. */
  .resizer {
    position: relative;
    /* block box hugging the wrapped element (its intrinsic width) so handles
       sit on the BOX's edges, not the container's; an explicit authored/
       runtime width overrides this (e.g. the CodeExample toolbar writes px) */
    width: fit-content;
  }

  /* The resizer owns resizing: a native CSS `resize` on the wrapped element
     (e.g. a resizable canvas) would double the affordances - the runtime
     neutralizes it inline; this is the authored-CSS fallback. */
  .resizer[data-resize-mode] {
    resize: none;
  }

  .resizer-handle {
    position: absolute;
    z-index: 5;
    display: block;
    box-sizing: border-box;
    width: 0.375rem;
    height: 0.375rem;
    background: var(--background);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-2xs);
    touch-action: none; /* the pointer-drag is ours - no scroll/pinch steal */
    opacity: 0.85;
    transition: opacity 120ms ease, background-color 120ms ease, transform 120ms ease;

    /* generous hit area around the small visible chip */
    &::after {
      content: '';
      position: absolute;
      inset: -0.5rem;
    }

    &:hover {
      opacity: 1;
      background: var(--primary);
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
      opacity: 1;
    }
  }

  /* drag in progress - the active handle (and the box) read as engaged */
  .resizer[data-resizing] > .resizer-handle {
    opacity: 1;
    background: var(--primary);
  }
  .resizer[data-resizing] {
    outline: 1px dashed var(--ring);
    outline-offset: 2px;
  }
  /* the box must track the pointer 1:1 - a size TRANSITION on the wrapped
     element (e.g. the sidebar's `transition: width 200ms`) would ease toward
     the drag instead of following it, which reads as the handle lagging
     behind the mouse. Only during the drag; authored transitions resume after
     (trigger-toggle collapse animation stays intact) */
  .resizer[data-resizing] > * {
    transition-duration: 0s;
  }

  /* -- side geometry: edge centers + corners, with the right cursor -------- */
  .resizer-handle[data-handle='n'] {
    top: -0.1875rem;
    left: 50%;
    translate: -50% -50%;
    cursor: ns-resize;
  }
  .resizer-handle[data-handle='s'] {
    bottom: -0.1875rem;
    left: 50%;
    translate: -50% 50%;
    cursor: ns-resize;
  }
  .resizer-handle[data-handle='e'] {
    right: -0.1875rem;
    top: 50%;
    translate: 50% -50%;
    cursor: ew-resize;
  }
  .resizer-handle[data-handle='w'] {
    left: -0.1875rem;
    top: 50%;
    translate: -50% -50%;
    cursor: ew-resize;
  }
  .resizer-handle[data-handle='ne'] {
    top: -0.1875rem;
    right: -0.1875rem;
    translate: 50% -50%;
    cursor: nesw-resize;
  }
  .resizer-handle[data-handle='nw'] {
    top: -0.1875rem;
    left: -0.1875rem;
    translate: -50% -50%;
    cursor: nwse-resize;
  }
  .resizer-handle[data-handle='se'] {
    bottom: -0.1875rem;
    right: -0.1875rem;
    translate: 50% 50%;
    cursor: nwse-resize;
  }
  .resizer-handle[data-handle='sw'] {
    bottom: -0.1875rem;
    left: -0.1875rem;
    translate: -50% 50%;
    cursor: nesw-resize;
  }

  /* -- Divider: a split pane's edge (data-variant="divider") ----------------
     The edge handles become full-length strips along the box - invisible until
     hovered, focused or dragged, then a thin line - and the box gets no dashed
     outline while it resizes. Corners keep their chip. */
  .resizer[data-variant='divider'] {
    & > .resizer-handle:is([data-handle='e'], [data-handle='w'], [data-handle='n'], [data-handle='s']) {
      width: 0.5rem;
      height: 0.5rem;
      border: 0;
      border-radius: 0;
      background: none;
      box-shadow: none;
      opacity: 1;
      &::before {
        content: '';
        position: absolute;
        inset: 0;
        margin: auto;
        background: var(--primary);
        opacity: 0;
        transition: opacity 120ms ease;
      }
      &::after { inset: 0; }
      &:hover::before, &:focus-visible::before { opacity: 0.6; }
      &:focus-visible { outline: none; }
    }
    & > .resizer-handle:is([data-handle='e'], [data-handle='w']) {
      top: 0;
      bottom: 0;
      height: auto;
      translate: 0 0;
      cursor: col-resize;
      &::before { width: 2px; }
    }
    & > .resizer-handle[data-handle='e'] { right: -0.25rem; }
    & > .resizer-handle[data-handle='w'] { left: -0.25rem; }
    & > .resizer-handle:is([data-handle='n'], [data-handle='s']) {
      left: 0;
      right: 0;
      width: auto;
      translate: 0 0;
      cursor: row-resize;
      &::before { height: 2px; }
    }
    & > .resizer-handle[data-handle='n'] { top: -0.25rem; }
    & > .resizer-handle[data-handle='s'] { bottom: -0.25rem; }
    &[data-resizing] { outline: none; }
    &[data-resizing] > .resizer-handle { background: none; }
    &[data-resizing] > .resizer-handle::before { opacity: 1; }
  }

  /* -- Accessibility media features (REQUIRED) ------------------ */
  @media (prefers-reduced-motion: reduce) {
    .resizer-handle,
    .resizer[data-resizing] > .resizer-handle,
    .resizer[data-variant='divider'] > .resizer-handle::before {
      transition: none;
    }
  }

  @media (prefers-contrast: more) {
    /* a divider always shows its line */
    .resizer[data-variant='divider'] > .resizer-handle::before { opacity: 0.5; }
    .resizer-handle {
      width: 0.625rem;
      height: 0.625rem;
      opacity: 1;
      border-width: 2px;
    }
  }

  @media (forced-colors: active) {
    .resizer-handle {
      background: Canvas;
      border-color: CanvasText;
      forced-color-adjust: none;
    }
    .resizer[data-resizing] > .resizer-handle {
      background: Highlight;
      border-color: Highlight;
    }
    .resizer[data-variant='divider'] > .resizer-handle::before { background: Highlight; }
  }
}

/* ── components/resource-item/resource-item.css ── */
/* -- Resource Item (website · Docs & Help) --------------------------------
   Previews one guide, document, template, or other resource - its type, title, a line on what is inside, the format and the action. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-resource-item, .mk-resource-item *, .mk-resource-item ::before, .mk-resource-item ::after) { box-sizing: border-box; }

  .mk-resource-item { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground); transition: border-color 150ms ease, box-shadow 150ms ease;
    &:hover { border-color: color-mix(in oklch, var(--foreground) 25%, var(--border)); box-shadow: var(--shadow-md); }
  }
  .mk-resource-item { position: relative; }
  .mk-resource-item-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .mk-resource-item-title a:focus-visible { outline: none; }
  .mk-resource-item:has(.mk-resource-item-title a:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
  /* zero specificity: any block rule may still position its controls */
  :where(.mk-resource-item :is(button, input, select, label, .btn):not(.mk-resource-item-title a)) { position: relative; z-index: 1; }
  .mk-resource-item-body { display: grid; gap: 0.375rem; flex: 1; align-content: start; }
  .mk-resource-item-type { display: inline-flex; align-items: center; gap: 0.375rem; width: fit-content; margin-block-end: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--muted); font-size: 0.75rem; font-weight: 600;
    & svg { width: 0.875rem; height: 0.875rem; }
  }
  .mk-resource-item-title { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; text-wrap: balance;
    & a { color: inherit; text-decoration: none; }
  }
  .mk-resource-item-desc { margin: 0; color: var(--muted-foreground); font-size: 0.9375rem; line-height: 1.55; }
  .mk-resource-item-meta { margin: 0.25rem 0 0; color: var(--muted-foreground); font-size: 0.8125rem; }
  .mk-resource-item-cta { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--primary); font-size: 0.875rem; font-weight: 600;
    & svg { width: 0.875rem; height: 0.875rem; transition: translate 150ms ease; }
  }
  .mk-resource-item:hover .mk-resource-item-cta svg { translate: 0.25rem 0; }
  .mk-resource-item-media { display: block; width: 100%; object-fit: cover; border-radius: var(--radius-lg); }

  .mk-resource-item[data-variant="compact"] {
    flex-direction: row;
    align-items: center;
    padding: 1rem 1.25rem;

    & .mk-resource-item-body { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 0.75rem; }
    & .mk-resource-item-type { grid-row: span 2; margin: 0; }
    & .mk-resource-item-desc { display: none; }
    & .mk-resource-item-meta { margin: 0; }
  }
  .mk-resource-item[data-variant="featured"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    align-items: center;
    gap: 1.5rem 2rem;

    & .mk-resource-item-media { aspect-ratio: 16 / 10; grid-row: span 2; }
    & .mk-resource-item-title { font-size: 1.5rem; letter-spacing: -0.02em; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-resource-item, .mk-resource-item-cta svg { transition: none; }
    .mk-resource-item:hover .mk-resource-item-cta svg { translate: none; }
  }

  @media (forced-colors: active) {
    .mk-resource-item { border-color: CanvasText; }
  }
}

/* ── components/roadmap-item/roadmap-item.css ── */
/* -- Roadmap Item (website · Docs & Help) ---------------------------------
   Presents one planned initiative with its status and target timeframe - planned, in progress or shipped, how far along, and a vote. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-roadmap-item, .mk-roadmap-item *, .mk-roadmap-item ::before, .mk-roadmap-item ::after) { box-sizing: border-box; }

  .mk-roadmap-item { display: grid; gap: 0.625rem; padding: 1.125rem; border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);
    & progress { width: 100%; height: 0.375rem; }
  }
  .mk-roadmap-item-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
  .mk-roadmap-item-status {
    --_c: var(--muted-foreground);

    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--_c);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;

    &::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
    &[data-status="progress"] { --_c: #1d4ed8; }
    &[data-status="shipped"] { --_c: #15803d; }
  }
  .mk-roadmap-item-when { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--muted-foreground); font-size: 0.75rem;
    & svg { width: 0.75rem; height: 0.75rem; }
  }
  .mk-roadmap-item-title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; }
  .mk-roadmap-item-desc { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.55; }
  .mk-roadmap-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-block-start: 0.25rem; }
  .mk-roadmap-item-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0; list-style: none;
    & li { padding: 0.0625rem 0.5rem; border-radius: var(--radius-sm); background: var(--muted); font-size: 0.75rem; }
  }
  .mk-roadmap-item-vote {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 2.75rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;

    & input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
    & svg { width: 1rem; height: 1rem; }
    &:has(:checked) { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
    &:has(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
  }
  .mk-roadmap-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; align-items: start;
    & > section { display: grid; gap: 0.75rem; padding: 0.75rem; border-radius: var(--radius-xl); background: var(--muted); }
    & h3 { margin: 0; padding: 0.25rem 0.375rem; font-size: 0.875rem; font-weight: 600; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-roadmap-item { border-color: CanvasText; }
    .mk-roadmap-item-vote:has(:checked) { background: Highlight; color: HighlightText; }
  }
}

/* ── components/scroll-area/scroll-area.css ── */
@layer components {
  .scroll-area {
    /* -- Density --------------------------------------------------
       For a scroll area the whitespace policy IS the scrollbar gutter:
       data-density scales the thumb thickness (4 / 6 / 8px); comfortable
       matches the unsized default. */
    --scrollbar-size: 6px;
    overflow: auto;
    position: relative;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;

    /* Webkit custom scrollbar */
    &::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
    &::-webkit-scrollbar-track { background: transparent; }
    &::-webkit-scrollbar-thumb {
      background-color: var(--border);
      border-radius: calc(var(--scrollbar-size) / 2);
      &:hover { background-color: var(--muted-foreground); }
    }

    /* Standard scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;

    &[data-density="compact"] { --scrollbar-size: 4px; }
    &[data-density="comfortable"] { --scrollbar-size: 6px; }
    &[data-density="spacious"] {
      --scrollbar-size: 8px;
      scrollbar-width: medium;
    }
  }
}

/* ── components/search-box/search-box.css ── */
/* -- Search Box (website · Search & Navigation) ---------------------------
   Accepts a query and submits a search - with a shortcut hint, as a large hero search with a scope, a pill, or an icon that expands on focus. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-search-box, .mk-search-box *, .mk-search-box ::before, .mk-search-box ::after) { box-sizing: border-box; }

  .mk-search-box { display: block; width: 100%; max-width: 36rem;
    & form { display: flex; gap: 0.5rem; }
  }
  .mk-search-box-field { position: relative; flex: 1; display: flex; align-items: center;
    & > svg { position: absolute; inset-inline-start: 0.75rem; width: 1rem; height: 1rem; color: var(--muted-foreground); pointer-events: none; }
    & .input { padding-inline: 2.25rem 3.25rem; }
    & .input::-webkit-search-cancel-button { display: none; }
    & .kbd { position: absolute; inset-inline-end: 0.5rem; pointer-events: none; }
  }
  .mk-search-box[data-variant="large"] {
    max-width: 44rem;

    & form { align-items: center; padding: 0.375rem; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--background); box-shadow: var(--shadow-lg); }
    & .select { flex: none; width: auto; height: 2.75rem; border-color: transparent; background-color: var(--muted); }
    & .input { height: 2.75rem; border-color: transparent; box-shadow: none; font-size: 1rem; }
    & .btn { height: 2.75rem; }
  }
  .mk-search-box[data-variant="pill"] .input { border-radius: 999px; background: var(--muted); border-color: transparent; }
  .mk-search-box[data-variant="expand"] {
    width: auto;

    & .mk-search-box-field { flex: none; }
    & .input { width: 2.5rem; padding-inline-end: 0; border-radius: 999px; cursor: pointer; transition: width 250ms cubic-bezier(.2,.7,.2,1); }
    & .input::placeholder { color: transparent; }
    &:focus-within .input { width: 18rem; padding-inline-end: 0.75rem; cursor: text; }
    &:focus-within .input::placeholder { color: var(--muted-foreground); }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-search-box[data-variant="expand"] .input { transition: none; }
  }

  @media (forced-colors: active) {
    .mk-search-box[data-variant="large"] form { border-color: CanvasText; }
  }
}

/* ── components/search-filter/search-filter.css ── */
/* -- Search & Filter component ----------------------------------
   Two form controls for narrowing a list:
   .search-box - a search field with a leading icon and a clear (×) button
                 that shows only while there is something to clear
   .filter     - category chips on native radios / checkboxes: pick one and
                 the others step aside behind a reset (×) - CSS only */

@layer components {
  /* -- Search box ------------------------------------------------ */
  .search-box {
    /* the BOX draws the field frame; the input inside is bare, so the icon
       and the clear button sit inside the border like one control */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    height: 2.25rem;
    padding-inline: 0.75rem 0.375rem;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    color: var(--foreground);
    font-size: 0.875rem;
    font-family: var(--font-sans);
    box-shadow: var(--shadow-xs);
    cursor: text;
    transition: border-color 150ms, box-shadow 150ms;

    &:focus-within {
      border-color: var(--ring);
      box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.2);
    }

    /* the leading icon (an <svg> or a lucide <i> before the input) */
    & > :is(svg, i, .search-box-icon) {
      flex: none;
      width: 1em;
      height: 1em;
      color: var(--muted-foreground);
    }

    & > input {
      flex: 1;
      min-width: 0;
      height: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      outline: none;
      background: transparent;
      color: inherit;
      font: inherit;
      appearance: none;

      &::placeholder { color: var(--muted-foreground); }
      /* the box brings its own clear button - drop the UA's */
      &::-webkit-search-cancel-button,
      &::-webkit-search-decoration { appearance: none; display: none; }
      &:disabled { cursor: not-allowed; }
    }

    &:has(> input:disabled) {
      background: var(--muted);
      color: var(--muted-foreground);
      box-shadow: none;
      cursor: not-allowed;
    }

    &:has(> input[aria-invalid="true"]) {
      border-color: var(--destructive);
      &:focus-within { box-shadow: 0 0 0 2px oklch(from var(--destructive) l c h / 0.2); }
    }

    /* -- Clear button: a CSS-drawn ×, only while there is text -------- */
    & > .search-box-clear {
      position: relative;
      flex: none;
      display: none;
      width: 1.5rem;
      height: 1.5rem;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--muted-foreground);
      cursor: pointer;
      transition: background-color 150ms, color 150ms;

      &::before,
      &::after {
        content: "";
        position: absolute;
        inset: 50% auto auto 50%;
        width: 0.75rem;
        height: 1.5px;
        border-radius: 1px;
        background: currentColor;
        translate: -50% -50%;
        rotate: 45deg;
      }
      &::after { rotate: -45deg; }

      &:hover { background: var(--accent); color: var(--accent-foreground); }
      &:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
    }

    /* the runtime names the state: filled / searching = there is a value */
    &:is([data-state-name="filled"], [data-state-name="searching"]) {
      & > .search-box-clear { display: block; }
      /* a trailing hint (a <kbd> shortcut, a scope label) steps aside */
      & > :is(kbd, .search-box-hint) { display: none; }
    }

    & > :is(kbd, .search-box-hint) {
      flex: none;
      margin-inline-end: 0.125rem;
    }

    & > .search-box-hint {
      color: var(--muted-foreground);
      font-size: 0.75em;
    }

    /* -- Searching: a spinner stands in for the leading icon ---------- */
    &::before {
      content: "";
      display: none;
      flex: none;
      box-sizing: border-box;
      width: 1em;
      height: 1em;
      border: 2px solid color-mix(in oklch, var(--muted-foreground) 30%, transparent);
      border-top-color: var(--muted-foreground);
      border-radius: 50%;
      animation: search-box-spin 700ms linear infinite;
    }

    &[data-state-name="searching"] {
      &::before { display: block; }
      & > :is(svg, i, .search-box-icon) { display: none; }
    }

    /* -- Variants / shape / sizes ------------------------------------- */
    &[data-variant="muted"] {
      background: var(--muted);
      border-color: transparent;
      box-shadow: none;
    }

    &[data-shape="pill"] {
      border-radius: 999px;
      padding-inline-start: 0.875rem;
    }

    &[data-size="sm"] {
      height: 2rem;
      padding-inline: 0.625rem 0.25rem;
      font-size: 0.8125rem;
      & > .search-box-clear { width: 1.25rem; height: 1.25rem; }
    }

    &[data-size="lg"] {
      height: 2.75rem;
      padding-inline: 1rem 0.5rem;
      font-size: 1rem;
      & > .search-box-clear { width: 1.75rem; height: 1.75rem; }
    }
  }

  /* -- Filter ------------------------------------------------------ */
  .filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* chips space themselves (margin, not gap): a collapsed chip must take
       no room at all, and a gap would stay behind it */
    row-gap: 0.375rem;
    /* chips collapse to and grow from width 0 - animate to/from auto */
    interpolate-size: allow-keywords;
    /* a <form> or <fieldset> host carries no box of its own */
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;

    /* every chip is a native radio / checkbox (or the reset button) -
       appearance: none, the label drawn from aria-label */
    & > input {
      appearance: none;
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: none;
      min-width: 0;
      width: auto;
      height: 2rem;
      margin: 0 0.375rem 0 0;
      padding: 0 0.875rem;
      border: 1px solid var(--input);
      border-radius: var(--radius-md);
      overflow: hidden;
      background: var(--background);
      color: var(--foreground);
      font: 500 0.875rem/1 var(--font-sans);
      white-space: nowrap;
      cursor: pointer;
      box-shadow: var(--shadow-xs);
      /* choosing a chip never jumps: the others shrink to nothing and the
         reset grows, all in one glide, and the chosen chip slides along */
      transition:
        background-color 150ms, color 150ms, border-color 150ms,
        width 250ms ease, padding 250ms ease, margin 250ms ease, border-width 250ms ease,
        opacity 200ms, scale 250ms ease, visibility 250ms allow-discrete;

      &:is([type="radio"], [type="checkbox"]):not(.filter-reset)::after { content: attr(aria-label); }

      /* a checkbox chip shows its box: several may be ticked */
      &[type="checkbox"]::before {
        content: "";
        flex: none;
        box-sizing: border-box;
        width: 0.875em;
        height: 0.875em;
        margin-inline-end: 0.5em;
        border: 1.5px solid currentColor;
        border-radius: 0.25em;
        opacity: 0.7;
      }
      &[type="checkbox"]:checked::before {
        opacity: 1;
        background: currentColor;
        /* the tick is cut out of the filled box, so it shows the chip colour */
        mask:
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 85% no-repeat,
          linear-gradient(#000 0 0);
        mask-composite: exclude;
      }

      &:hover {
        background: var(--accent);
        color: var(--accent-foreground);
      }

      &:focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
      }

      &:checked {
        background: var(--primary);
        border-color: var(--primary);
        color: var(--primary-foreground);
      }

      &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        &:hover { background: var(--background); color: var(--foreground); }
      }
    }

    /* the reset: <input type="reset" value="×"> in a form, or a radio of
       the group with .filter-reset outside one - a square ×, authored LAST
       so it appears after the chosen chip and nothing moves under the
       pointer */
    & > :is(input[type="reset"], .filter-reset) {
      width: 2rem;
      padding: 0;
      font-size: 1.25rem;
      font-weight: 400;
      color: var(--muted-foreground);
    }
    & > .filter-reset::after { content: "×"; }

    /* -- Variants / shape / sizes ------------------------------------- */
    &[data-variant="secondary"] > input:checked {
      background: var(--secondary);
      border-color: var(--secondary);
      color: var(--secondary-foreground);
    }

    &[data-variant="outline"] > input:checked {
      background: var(--background);
      border-color: var(--foreground);
      color: var(--foreground);
      box-shadow: inset 0 0 0 1px var(--foreground);
    }

    &[data-shape="pill"] > input { border-radius: 999px; }

    &[data-size="sm"] > input {
      height: 1.75rem;
      padding-inline: 0.625rem;
      font-size: 0.75rem;
      &:is([type="reset"], .filter-reset) { width: 1.75rem; padding: 0; font-size: 1rem; }
    }

    &[data-size="lg"] > input {
      height: 2.5rem;
      padding-inline: 1.125rem;
      font-size: 1rem;
      &:is([type="reset"], .filter-reset) { width: 2.5rem; padding: 0; font-size: 1.5rem; }
    }

    /* -- Collapsed chips (after the sizes: these win) --------------------
       nothing chosen yet (or the reset radio is the choice): no reset;
       one chosen: the others step aside until the reset brings them back.
       Collapsed = no width, no box, hidden from pointer, focus and the
       radio group's arrow keys (visibility flips at the END of the glide
       when hiding, at the start when showing). */
    &:not(:has(> input:checked:not(.filter-reset))) > :is(input[type="reset"], .filter-reset),
    &:not([data-multiple]):has(> input:checked:not(.filter-reset)) > input:not(:checked, .filter-reset, [type="reset"]) {
      width: 0;
      padding-inline: 0;
      margin-inline-end: 0;
      border-inline-width: 0;
      opacity: 0;
      scale: 0.8;
      box-shadow: none;
      visibility: hidden;
      pointer-events: none;
    }
  }

  @keyframes search-box-spin {
    to { rotate: 360deg; }
  }

  /* -- Accessibility -------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .search-box,
    .search-box > .search-box-clear,
    .filter > input { transition: none; }
    /* the spinner still says "working" - slowly */
    .search-box::before { animation-duration: 2s; }
  }

  @media (prefers-contrast: more) {
    .search-box { border-color: var(--foreground); }
    .search-box > .search-box-clear { color: var(--foreground); }
    .filter > input { border-color: var(--foreground); }
  }

  @media (forced-colors: active) {
    .search-box { border: 1px solid CanvasText; }
    .search-box:focus-within { outline: 2px solid Highlight; }
    .search-box > .search-box-clear::before,
    .search-box > .search-box-clear::after { background: ButtonText; }
    .filter > input { border: 1px solid ButtonText; }
    .filter > input:checked {
      background: Highlight;
      color: HighlightText;
      forced-color-adjust: none;
    }
  }
}

/* ── components/search-result/search-result.css ── */
/* -- Search Result (website · Search & Navigation) ------------------------
   Displays one matching entry with relevant context - where it lives, the title and a snippet with the matches highlighted, as text, with a thumbnail or as a product. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-search-result, .mk-search-result *, .mk-search-result ::before, .mk-search-result ::after) { box-sizing: border-box; }

  .mk-search-result { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1rem 0.75rem; border-radius: var(--radius-lg);
    &:hover { background: color-mix(in oklch, var(--accent) 60%, transparent); }
  }
  .mk-search-result { position: relative; }
  .mk-search-result-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .mk-search-result-title a:focus-visible { outline: none; }
  .mk-search-result:has(.mk-search-result-title a:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
  /* zero specificity: any block rule may still position its controls */
  :where(.mk-search-result :is(button, input, select, label, .btn):not(.mk-search-result-title a)) { position: relative; z-index: 1; }
  .mk-search-result-body { display: grid; gap: 0.25rem; min-width: 0; }
  .mk-search-result-path { margin: 0; color: var(--muted-foreground); font-size: 0.75rem; }
  .mk-search-result-title { margin: 0; font-size: 1.0625rem; font-weight: 600;
    & a { color: var(--primary); text-decoration: none; }
    & mark { padding-inline: 0.125rem; border-radius: 2px; background: color-mix(in oklch, oklch(0.88 0.16 95) 70%, transparent); color: inherit; }
    & a:hover { text-decoration: underline; text-underline-offset: 3px; }
  }
  .mk-search-result-snippet { display: -webkit-box; margin: 0; overflow: hidden; color: color-mix(in oklch, var(--foreground) 80%, var(--muted-foreground)); font-size: 0.9375rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    & mark { padding-inline: 0.125rem; border-radius: 2px; background: color-mix(in oklch, oklch(0.88 0.16 95) 70%, transparent); color: inherit; }
  }
  .mk-search-result-meta { margin: 0; color: var(--muted-foreground); font-size: 0.8125rem;
    & strong { color: var(--foreground); }
  }
  .mk-search-result-media { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); background: var(--muted); }
  .mk-search-result[data-variant="media"] { grid-template-columns: 8rem minmax(0, 1fr);
    & .mk-search-result-media { aspect-ratio: 16 / 10; height: auto; }
  }
  .mk-search-result[data-variant="product"] { grid-template-columns: 5rem minmax(0, 1fr); align-items: center;
    & .mk-search-result-media { aspect-ratio: 1; height: auto; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-search-result-snippet mark { background: Mark; color: MarkText; }
  }
}

/* ── components/search-suggestions/search-suggestions.css ── */
/* -- Search Suggestions (website · Search & Navigation) -------------------
   Displays suggested queries or matches while typing - recent searches, matching pages and people grouped in a panel with the match highlighted, or native suggestions. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-search-suggestions, .mk-search-suggestions *, .mk-search-suggestions ::before, .mk-search-suggestions ::after) { box-sizing: border-box; }

  .mk-search-suggestions { position: relative; width: 100%; max-width: 32rem; }
  .mk-search-suggestions-field { position: relative;
    & > svg { position: absolute; inset-inline-start: 0.75rem; top: 50%; translate: 0 -50%; width: 1rem; height: 1rem; color: var(--muted-foreground); }
    & .input { padding-inline-start: 2.25rem; }
  }
  .mk-search-suggestions-panel {
    display: grid;
    gap: 0.25rem;
    margin-block-start: 0.375rem;
    padding: 0.375rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--popover);
    color: var(--popover-foreground);
    box-shadow: var(--shadow-lg);
  }
  .mk-search-suggestions-group { display: grid;
    & > span { padding: 0.375rem 0.625rem 0.25rem; color: var(--muted-foreground); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
  }
  .mk-search-suggestions-option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; border-radius: var(--radius-md); font-size: 0.875rem; cursor: pointer;
    & > svg { width: 1rem; height: 1rem; color: var(--muted-foreground); }
    & small { color: var(--muted-foreground); font-size: 0.75rem; }
    & mark { background: none; color: var(--primary); font-weight: 700; }
    &:hover, &[aria-selected="true"] { background: var(--accent); color: var(--accent-foreground); }
  }
  .mk-search-suggestions-foot { display: flex; gap: 1rem; padding: 0.5rem 0.625rem 0.25rem; border-block-start: 1px solid var(--border); color: var(--muted-foreground); font-size: 0.75rem;
    & .kbd { font-size: 0.6875rem; }
  }
  .mk-search-suggestions[data-variant="native"] .mk-search-suggestions-hint { margin: 0.375rem 0 0; color: var(--muted-foreground); font-size: 0.8125rem; }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-search-suggestions-option[aria-selected="true"] { outline: 2px solid Highlight; }
    .mk-search-suggestions-option mark { color: Highlight; }
  }
}

/* ── components/search-summary/search-summary.css ── */
/* -- Search Summary (website · Search & Navigation) -----------------------
   Shows the active query and number of matches - the count, the query, a "did you mean", how long it took and how to clear it. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-search-summary, .mk-search-summary *, .mk-search-summary ::before, .mk-search-summary ::after) { box-sizing: border-box; }

  .mk-search-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; padding-block: 0.75rem; border-block-end: 1px solid var(--border); font-size: 0.9375rem;
    & p { margin: 0; }
    & strong { font-weight: 700; }
    & q { font-weight: 600; quotes: "“" "”"; }
  }
  .mk-search-summary-time { color: var(--muted-foreground); font-size: 0.8125rem; }
  .mk-search-summary-suggest { flex-basis: 100%; color: var(--muted-foreground); font-size: 0.875rem;
    & a { color: var(--primary); font-weight: 600; font-style: italic; }
  }
  .mk-search-summary-clear { margin-inline-start: auto; color: var(--muted-foreground); font-size: 0.8125rem;
    &:hover { color: var(--foreground); }
  }
  .mk-search-summary[data-variant="compact"] { padding-block: 0.375rem; border: 0; font-size: 0.8125rem; color: var(--muted-foreground);
    & strong { color: var(--foreground); }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-search-summary { border-color: CanvasText; }
  }
}

/* ── components/section-header/section-header.css ── */
/* -- Section Header (website) ---------------------------------------
   Introduces a page section: eyebrow, title, description and optional
   actions. Start-aligned by default; centered, or split (copy left, actions
   right - wrapping under the copy when the row gets narrow). */

@layer components {
  .mk-section-header {
    container: mk-section-header / inline-size;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
  }

  .mk-section-header-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    max-width: 48rem;
  }

  .mk-section-header-eyebrow {
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
  }

  .mk-section-header-title {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  .mk-section-header-desc {
    margin: 0;
    max-width: 42rem;
    color: var(--muted-foreground);
    font-size: 1rem;
    line-height: 1.6;
    text-wrap: pretty;
  }

  .mk-section-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }

  /* centered: everything on the axis */
  .mk-section-header[data-align="center"] {
    align-items: center;
    text-align: center;

    & .mk-section-header-copy { align-items: center; }
    & .mk-section-header-actions { justify-content: center; }
  }

  /* split: copy and actions share a row, the actions sit on the baseline */
  .mk-section-header[data-variant="split"] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;

    & .mk-section-header-copy { flex: 1 1 28rem; }
    & .mk-section-header-actions { flex: none; }
  }

  /* numbered: a large index ("01") in front - data-index on the header */
  .mk-section-header[data-variant="numbered"] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 1.5rem;

    &::before {
      content: attr(data-index);
      flex: none;
      color: transparent;
      font-size: 3.5rem;
      font-weight: 800;
      line-height: 0.9;
      letter-spacing: -0.04em;
      -webkit-text-stroke: 1.5px color-mix(in oklch, var(--foreground) 35%, transparent);
      font-variant-numeric: tabular-nums;
    }
    & .mk-section-header-copy { flex: 1 1 24rem; }
    & .mk-section-header-actions { flex-basis: 100%; }
  }

  /* divider: a rule runs from the title to the edge */
  .mk-section-header[data-variant="divider"] .mk-section-header-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;

    &::after {
      content: "";
      flex: 1;
      min-width: 2rem;
      height: 1px;
      background: var(--border);
    }
  }
  .mk-section-header[data-variant="divider"] .mk-section-header-copy { max-width: none; }

  /* banner: on a surface with a dotted field */
  .mk-section-header[data-variant="banner"] {
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background:
      radial-gradient(circle at 1px 1px, color-mix(in oklch, var(--foreground) 14%, transparent) 1px, transparent 0) 0 0 / 1.25rem 1.25rem,
      linear-gradient(to bottom, var(--muted), var(--background));
  }

  /* a proof line under the copy: an avatar group + a sentence */
  .mk-section-header-proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    color: var(--muted-foreground);
    font-size: 0.875rem;

    & strong { color: var(--foreground); font-weight: 600; }
  }
  .mk-section-header[data-align="center"] .mk-section-header-proof { justify-content: center; }

  /* sizes: the title scale */
  .mk-section-header[data-size="sm"] .mk-section-header-title { font-size: 1.5rem; }
  .mk-section-header[data-size="lg"] .mk-section-header-title { font-size: 2.25rem; }

  @container mk-section-header (min-width: 48rem) {
    .mk-section-header-title { font-size: 2.25rem; }
    .mk-section-header[data-size="sm"] .mk-section-header-title { font-size: 1.75rem; }
    .mk-section-header[data-size="lg"] .mk-section-header-title { font-size: 3rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-contrast: more) {
    .mk-section-header-desc { color: var(--foreground); }
  }

  @media (forced-colors: active) {
    .mk-section-header-eyebrow { color: CanvasText; }
  }
}

/* ── components/security-settings/security-settings.css ── */
/* -- Security Settings (website · Account & States) -----------------------
   Manages passwords, authentication methods, and active sessions - the password, two-factor methods, passkeys and every signed-in device. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-security-settings, .mk-security-settings *, .mk-security-settings ::before, .mk-security-settings ::after) { box-sizing: border-box; }

  .mk-security-settings { container: mk-security-settings / inline-size; display: grid; gap: 1.25rem; width: 100%; max-width: 44rem; }
  .mk-security-settings-section { padding: 0.5rem 1.25rem; border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);
    & > h2 { margin: 0; padding-block: 1rem 0.5rem; font-size: 1rem; font-weight: 600; }
  }
  .mk-security-settings-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding-block: 1rem;
    & + & { border-block-start: 1px solid var(--border); }
    & > svg { width: 1.25rem; height: 1.25rem; color: var(--muted-foreground); }
    & strong { display: block; font-weight: 600; }
    & p { margin: 0.125rem 0 0; color: var(--muted-foreground); font-size: 0.875rem; }
  }
  .mk-security-settings-status { display: inline-flex; align-items: center; gap: 0.375rem; margin-inline-start: 0.5rem; padding: 0.0625rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; vertical-align: middle;
    &[data-status="on"] { background: color-mix(in oklch, #16a34a 14%, transparent); color: #15803d; }
    &[data-status="off"] { background: color-mix(in oklch, #d97706 16%, transparent); color: #b45309; }
  }
  .mk-security-settings-list { display: grid; margin: 0; padding: 0; list-style: none;
    & li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.875rem; padding-block: 0.875rem; border-block-start: 1px solid var(--border); }
    & li div { display: grid; }
    & li span:not(.badge, .mk-security-settings-device) { color: var(--muted-foreground); font-size: 0.8125rem; }
    & strong { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; font-weight: 600; }
  }
  .mk-security-settings-device { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); background: var(--muted);
    & svg { width: 1.125rem; height: 1.125rem; }
  }
  .mk-security-settings-foot { display: flex; justify-content: flex-end; padding-block: 1rem; border-block-start: 1px solid var(--border); }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-security-settings-section { border-color: CanvasText; }
    .mk-security-settings-status { border: 1px solid CanvasText; }
  }
}

/* ── components/select/select.css ── */
/* -- Select component ------------------------------------------- */

@layer components {
  .select {
    appearance: none;
    /* the field standard: unsized = md step (see .input) */
    height: 2.25rem;
    width: 100%;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    padding: 0 2rem 0 0.75rem;
    font-size: 0.875rem;
    font-family: var(--font-sans);
    color: var(--foreground);
    outline: none;
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: border-color 150ms, box-shadow 150ms;

    /* Custom chevron */
    background-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='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;

    /* Placeholder = the empty-value option. It stays selectable (no
       `disabled`) so it doubles as the clear/reset entry - choosing it
       again empties the box (issue #32). While it is the selection the
       closed control reads as a placeholder; a real value restores
       --foreground because the base rule's color wins over this one.
       option:checked matches the *selected* option in every engine. */
    &:has(> option[value=""]:checked) {
      color: var(--muted-foreground);
    }

    &:focus {
      border-color: var(--ring);
      box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.2);
    }

    /* Disabled = legible but inert: a muted surface and muted text inside
       the full-strength border - never an opacity fade that lets the box
       dissolve into the page. */
    &:disabled {
      background-color: var(--muted);
      color: var(--muted-foreground);
      box-shadow: none;
      cursor: not-allowed;
      opacity: 1; /* Chrome's UA sheet fades select:disabled to 0.7 on its own */
    }

    &:is([aria-invalid="true"], :user-invalid:not(form[data-validate="submit"]:not([data-submitted]) *)) {
      border-color: var(--destructive);

      &:focus {
        border-color: var(--destructive);
        box-shadow: 0 0 0 2px oklch(from var(--destructive) l c h / 0.2);
      }
    }

    /* -- Multiple (<select multiple>) ---------------------------
       The browser renders a list box instead of a dropdown: every option is
       visible (size="N" rows), Ctrl/⌘-click or Shift-click / Shift+arrows
       pick several, and the form submits every chosen value under the same
       name. No fixed height, no chevron; chosen options get a tinted row. */
    &[multiple] {
      height: auto;
      padding: 0.25rem;
      background-image: none;
      overflow-y: auto;

      & option {
        padding: 0.375rem 0.5rem;
        border-radius: calc(var(--radius-md) - 2px);
        color: var(--foreground);
      }

      & option:checked {
        /* a gradient beats the UA's opaque selection paint in every engine */
        background: linear-gradient(color-mix(in oklch, var(--primary) 14%, transparent), color-mix(in oklch, var(--primary) 14%, transparent));
        font-weight: 500;
      }

      /* one unavailable choice in a usable list */
      & option:disabled {
        color: var(--muted-foreground);
        cursor: not-allowed;
      }

      & optgroup {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--muted-foreground);
      }
    }

    /* -- Sizes ----------------------------------------------- */
    &[data-size="xs"] { height: 1.75rem; padding-left: 0.5rem;   font-size: 0.75rem; }
    &[data-size="sm"] { height: 2rem;    padding-left: 0.625rem; font-size: 0.8125rem; }
    &[data-size="md"] { height: 2.25rem; padding-left: 0.75rem;  font-size: 0.875rem; }
    &[data-size="lg"] { height: 2.75rem; padding-left: 1rem;     font-size: 1rem; }
    &[data-size="xl"] { height: 3.25rem; padding-left: 1.25rem;  font-size: 1.125rem; }

    &[multiple][data-size] { height: auto; }
  }
}

/* Accessibility: suppress motion for users who request it (REQUIRED for all
   components - AGENTS.md "Accessibility CSS"). Near-zero duration instead of
   `none` keeps transitionend/animationend (and discrete display flips)
   firing so JS state machines that await them keep working. */
@media (prefers-reduced-motion: reduce) {
  @layer components {
    .select,
    .select *,
    .select::before,
    .select::after,
    .select *::before,
    .select *::after,
    .select::backdrop {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

/* ── components/separator/separator.css ── */
/* -- Separator component ---------------------------------------- */

@layer components {
  /* One element, three looks:
     - empty: a plain line (1px, --border) - horizontal, or vertical with
       data-orientation="vertical" (inside a flex row)
     - with text inside: the text sits ON the line - two pseudo-element lines
       left and right of it (above and below when vertical)
     Knobs: data-variant (line color), data-size (thickness), data-gap (space
     between text and lines), data-align="start|end" (text position),
     data-orientation-md / -lg="vertical" (switch to a vertical line from
     48 / 64rem). --_line / --_thick / --_gap are private. */
  .separator {
    --_line: var(--border);
    --_thick: 1px;
    --_gap: 0.75rem;
    border: none;
    margin: 0;
    flex-shrink: 0;
    background: var(--_line);

    /* Horizontal (default) */
    height: var(--_thick);
    width: 100%;

    /* Vertical */
    &[data-orientation="vertical"] {
      height: auto;
      width: var(--_thick);
      align-self: stretch;
    }

    /* Decorative - hidden from assistive technology */
    &[aria-hidden="true"],
    &[role="none"] {
      /* No visual change - purely semantic */
    }

    /* -- Text on the line ------------------------------------ */
    &:not(:empty) {
      display: flex;
      align-items: center;
      gap: var(--_gap);
      height: auto;
      background: none;
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.25rem;
      letter-spacing: 0.02em;
      color: var(--muted-foreground);
      white-space: nowrap;

      &::before,
      &::after {
        content: '';
        flex: 1 1 0;
        height: var(--_thick);
        background: var(--_line);
      }

      /* text position along the line */
      &[data-align="start"]::before { display: none; }
      &[data-align="end"]::after { display: none; }

      &[data-orientation="vertical"] {
        flex-direction: column;
        width: auto;
        align-self: stretch;

        &::before,
        &::after {
          width: var(--_thick);
          height: auto;
          min-height: 0.5rem;
        }
      }
    }

    /* -- Colors (the line; the text stays muted) -------------- */
    &[data-variant="neutral"] { --_line: var(--foreground); }
    &[data-variant="primary"] { --_line: var(--primary); }
    /* the tweakcn --secondary / --accent are pale surfaces, too faint for a
       line: the theme's vivid chart colors instead (like the status dot) */
    &[data-variant="secondary"] { --_line: var(--chart-2); }
    &[data-variant="accent"] { --_line: var(--chart-4); }
    &[data-variant="destructive"],
    &[data-variant="error"] { --_line: var(--destructive); }
    /* success / warning / info: literals - the token set has no such pairs */
    &[data-variant="success"] { --_line: #16a34a; }
    &[data-variant="warning"] { --_line: #f59e0b; }
    &[data-variant="info"] { --_line: #0ea5e9; }

    /* -- Thickness -------------------------------------------- */
    &[data-size="sm"] { --_thick: 1px; }
    &[data-size="md"] { --_thick: 2px; }
    &[data-size="lg"] { --_thick: 4px; }
    &[data-size="xl"] { --_thick: 8px; }

    /* -- Gap between the text and the lines ------------------- */
    &[data-gap="none"] { --_gap: 0; }
    &[data-gap="sm"] { --_gap: 0.375rem; }
    &[data-gap="md"] { --_gap: 0.75rem; }
    &[data-gap="lg"] { --_gap: 1.5rem; }
    &[data-gap="xl"] { --_gap: 2.5rem; }

    /* -- Responsive: a vertical line from a breakpoint up (DaisyUI's
       lg:divider-horizontal). The PARENT must turn into a row at the
       same width - the separator only follows it. */
    @media (min-width: 48rem) {
      &[data-orientation-md="vertical"] {
        height: auto;
        width: var(--_thick);
        align-self: stretch;

        &:not(:empty) {
          flex-direction: column;
          width: auto;

          &::before, &::after { width: var(--_thick); height: auto; min-height: 0.5rem; }
        }
      }
    }
    @media (min-width: 64rem) {
      &[data-orientation-lg="vertical"] {
        height: auto;
        width: var(--_thick);
        align-self: stretch;

        &:not(:empty) {
          flex-direction: column;
          width: auto;

          &::before, &::after { width: var(--_thick); height: auto; min-height: 0.5rem; }
        }
      }
    }
  }

  /* -- Labeled separator (the older wrapper form) --------------
     Still supported; text inside .separator itself is the simpler form. */
  .separator-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    & .separator { flex: 1; }

    & span {
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--muted-foreground);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      white-space: nowrap;
      flex-shrink: 0;
    }
  }

  /* -- Accessibility ----------------------------------------- */
  @media (forced-colors: active) {
    /* system colors would erase the line (a background) - keep it */
    .separator {
      forced-color-adjust: none;
      --_line: CanvasText;
      color: CanvasText;
    }
  }

  @media (prefers-contrast: more) {
    .separator:not([data-variant]) { --_line: var(--foreground); }
    .separator:not([data-size]) { --_thick: 2px; }
  }
}

/* ── components/service-item/service-item.css ── */
/* -- Service Item (website · Company) -------------------------------------
   Introduces one service with its description and detail link - as a card with an icon, a card with a picture, or an inline row. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-service-item, .mk-service-item *, .mk-service-item ::before, .mk-service-item ::after) { box-sizing: border-box; }

  .mk-service-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);
    transition: translate 200ms ease, box-shadow 200ms ease, border-color 200ms ease;

    &:hover { translate: 0 -2px; box-shadow: var(--shadow-lg); border-color: color-mix(in oklch, var(--foreground) 20%, var(--border)); }
  }
  .mk-service-item { position: relative; }
  .mk-service-item-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .mk-service-item-title a:focus-visible { outline: none; }
  .mk-service-item:has(.mk-service-item-title a:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
  /* zero specificity: any block rule may still position its controls */
  :where(.mk-service-item :is(button, input, select, label, .btn):not(.mk-service-item-title a)) { position: relative; z-index: 1; }
  .mk-service-item-icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-lg);
    background: color-mix(in oklch, var(--primary) 10%, transparent);
    color: var(--primary);

    & svg { width: 1.375rem; height: 1.375rem; }
  }
  .mk-service-item-media { display: block; width: calc(100% + 3rem); margin: -1.5rem -1.5rem 0.25rem; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .mk-service-item-title { margin: 0.25rem 0 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em;
    & a { color: inherit; text-decoration: none; }
  }
  .mk-service-item-desc { margin: 0; flex: 1; color: var(--muted-foreground); font-size: 0.9375rem; line-height: 1.6; text-wrap: pretty; }
  .mk-service-item-more { display: inline-flex; align-items: center; gap: 0.25rem; margin-block-start: 0.25rem; color: var(--primary); font-size: 0.875rem; font-weight: 600;
    & svg { width: 0.875rem; height: 0.875rem; transition: translate 150ms ease; }
  }
  .mk-service-item:hover .mk-service-item-more svg { translate: 0.25rem 0; }

  .mk-service-item[data-variant="inline"] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    row-gap: 0.25rem;
    padding: 0.75rem;
    border-color: transparent;
    background: transparent;

    &:hover { translate: none; box-shadow: none; background: var(--accent); border-color: transparent; }
    & .mk-service-item-icon { grid-row: 1 / span 3; }
    & .mk-service-item-title { margin: 0; font-size: 1rem; }
    & .mk-service-item-more { display: none; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-service-item, .mk-service-item-more svg { transition: none; }
    .mk-service-item:hover { translate: none; }
    .mk-service-item:hover .mk-service-item-more svg { translate: none; }
  }

  @media (forced-colors: active) {
    .mk-service-item { border-color: CanvasText; }
  }
}

/* ── components/session/session.css ── */
/* -- Session component -------------------------------------------
   A chat session: a scrolling transcript (role="log") that follows the
   live edge, jumps back to it, keeps its place when history loads, anchors
   new turns, and takes dropped files - plus a footer for the composer.
   The runtime keeps the data-* state current; CSS draws from it. */

@layer components {
  .session {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);
  }

  /* -- Viewport: the scroller --------------------------------------- */
  .session-viewport {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* the runtime keeps the reader's place when history prepends - the
       browser's own scroll anchoring would correct twice */
    overflow-anchor: none;
    scrollbar-gutter: stable;

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: -2px;
    }
  }

  /* short threads sit at the bottom, like every chat */
  .session-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-block-start: auto;
  }

  /* rows off screen skip rendering; their size is remembered. content-
     visibility implies paint containment, which clips at the row's edge -
     the clip margin lets bubble tails, reactions and focus rings draw
     outside it */
  .session-item {
    content-visibility: auto;
    contain-intrinsic-size: auto 3.5rem;
    overflow-clip-margin: 1rem;

    &[data-current] { scroll-margin-block-start: 1rem; }
  }

  /* data-animate: new rows rise in */
  .session[data-animate] .session-item {
    transition: opacity 250ms ease, translate 250ms ease;

    @starting-style {
      opacity: 0;
      translate: 0 0.5rem;
    }
  }

  /* -- Scroll buttons: float over the transcript, stuck to its edge -- */
  .session-scroll-button {
    position: sticky;
    z-index: 1;
    align-self: center;
    flex: none;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--background);
    color: var(--foreground);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    opacity: 0;
    scale: 0.85;
    visibility: hidden;
    transition: opacity 150ms, scale 150ms, visibility 150ms allow-discrete, background-color 150ms;

    /* a chevron, drawn */
    &::before {
      content: "";
      width: 0.5rem;
      height: 0.5rem;
      border-inline-end: 2px solid currentColor;
      border-block-end: 2px solid currentColor;
      rotate: 45deg;
      translate: 0 -0.125rem;
    }

    &:hover { background: var(--accent); color: var(--accent-foreground); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

    /* to the end: at the bottom edge, overlaying the last row */
    &[data-to="end"] {
      order: 2;
      inset-block-end: 0.5rem;
      margin-block-start: -2.25rem;
    }
    /* to the start: at the top edge, pointing up */
    &[data-to="start"] {
      order: -1;
      inset-block-start: 0.5rem;
      margin-block-end: -2.25rem;
      &::before { rotate: -135deg; translate: 0 0.125rem; }
    }
  }

  .session[data-scrollable~="end"] .session-scroll-button[data-to="end"],
  .session[data-scrollable~="start"] .session-scroll-button[data-to="start"] {
    opacity: 1;
    scale: 1;
    visibility: visible;
  }

  /* -- Footer: the composer, a status line ---------------------------- */
  .session-footer {
    flex: none;
    padding: 0.75rem;
    border-top: 1px solid var(--border);
    background: var(--card);
  }

  .session-status {
    padding: 0.375rem 1rem;
    border-top: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: 0.75rem;
  }

  /* -- Drop target: files dragged over the session ----------------------- */
  .session[data-drop-active]::after {
    content: attr(data-drop-label);
    position: absolute;
    inset: 0.5rem;
    z-index: 2;
    display: grid;
    place-items: center;
    border: 2px dashed var(--ring);
    border-radius: var(--radius-lg);
    background: color-mix(in oklch, var(--background) 85%, transparent);
    color: var(--foreground);
    font-size: 0.875rem;
    font-weight: 500;
    pointer-events: none;
  }

  /* -- Accessibility -------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .session-scroll-button,
    .session[data-animate] .session-item { transition: none; }
  }

  @media (prefers-contrast: more) {
    .session,
    .session-footer,
    .session-scroll-button { border-color: var(--foreground); }
  }

  @media (forced-colors: active) {
    .session { border: 1px solid CanvasText; }
    .session-scroll-button { border: 1px solid ButtonText; }
    .session[data-drop-active]::after { border-color: Highlight; forced-color-adjust: none; }
  }
}

/* ── components/session-item/session-item.css ── */
/* -- Session Item (website · Events & Promotions) -------------------------
   Presents one scheduled session with its time, topic, and speakers - with its track, room and an "add to my schedule" toggle; breaks and keynotes styled apart. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-session-item, .mk-session-item *, .mk-session-item ::before, .mk-session-item ::after) { box-sizing: border-box; }

  .mk-session-item {
    --mk-session-color: var(--chart-1);

    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    align-items: start;
    gap: 1rem 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-inline-start: 3px solid var(--mk-session-color);
    border-radius: var(--radius-lg);
    background: var(--card);
  }
  .mk-session-item-time { display: grid; font-variant-numeric: tabular-nums; line-height: 1.3;
    & time { font-size: 1.0625rem; font-weight: 700; }
    & span { color: var(--muted-foreground); font-size: 0.875rem; }
    & small { margin-block-start: 0.25rem; color: var(--muted-foreground); font-size: 0.75rem; }
  }
  .mk-session-item-body { display: grid; gap: 0.5rem; }
  .mk-session-item-track { width: fit-content; padding: 0.0625rem 0.5rem; border-radius: 999px; background: color-mix(in oklch, var(--mk-session-color) 15%, transparent); color: color-mix(in oklab, var(--mk-session-color) 70%, var(--foreground)); font-size: 0.75rem; font-weight: 700; }
  .mk-session-item-title { margin: 0; font-size: 1.0625rem; font-weight: 600; text-wrap: balance; }
  .mk-session-item-desc { margin: 0; color: var(--muted-foreground); font-size: 0.9375rem; line-height: 1.6; text-wrap: pretty; }
  .mk-session-item-speakers { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; font-weight: 500;
    & li { display: inline-flex; align-items: center; gap: 0.5rem; }
  }
  .mk-session-item-room { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--muted-foreground); font-size: 0.8125rem;
    & svg { width: 0.875rem; height: 0.875rem; }
  }

  /* the save toggle: a checkbox in a button-like label */
  .mk-session-item-save {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding-inline: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;

    & input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
    & span { display: inline-flex; align-items: center; gap: 0.25rem; }
    & svg { width: 0.875rem; height: 0.875rem; }
    & .mk-session-item-save-on { display: none; }
    &:has(input:checked) { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
    &:has(input:checked) .mk-session-item-save-off { display: none; }
    &:has(input:checked) .mk-session-item-save-on { display: inline-flex; }
    &:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
  }

  .mk-session-item[data-variant="keynote"] {
    border-color: color-mix(in oklab, var(--mk-session-color) 40%, var(--border));
    background: color-mix(in oklab, var(--mk-session-color) 8%, var(--card));

    & .mk-session-item-title { font-size: 1.375rem; letter-spacing: -0.02em; }
  }
  .mk-session-item[data-variant="break"] {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    padding-block: 0.75rem;
    border-style: dashed;
    border-inline-start: 1px dashed var(--border);
    background: transparent;
    color: var(--muted-foreground);

    & .mk-session-item-title { font-size: 0.9375rem; font-weight: 500; }
    & .mk-session-item-time time { font-size: 0.9375rem; font-weight: 600; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-session-item { border-inline-start-color: CanvasText; }
    .mk-session-item-save:has(input:checked) { background: Highlight; color: HighlightText; }
  }
}

/* ── components/share-links/share-links.css ── */
/* -- Share Links (website) ------------------------------------------
   Sharing actions for the current content: share-intent links (plain
   <a href>, no third-party script), mailto, and buttons for the page's own
   copy-link / native-share handlers - all Buttons. Default: a row of icon
   buttons; labeled: buttons with text; vertical: a rail beside an article. */

@layer components {
  .mk-share-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
  }

  .mk-share-links-label {
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    font-weight: 500;
  }

  .mk-share-links-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;

    & svg { flex: none; }
  }

  /* a confirmation next to the buttons (copy link) - an <output> */
  .mk-share-links-status {
    color: var(--muted-foreground);
    font-size: 0.8125rem;

    &:empty { display: none; }
  }

  /* vertical: a rail - sticky when the page sets a top */
  .mk-share-links[data-variant="vertical"] {
    flex-direction: column;
    align-items: center;
    width: max-content;

    & .mk-share-links-list { flex-direction: column; }
    & .mk-share-links-label { writing-mode: vertical-rl; rotate: 180deg; }
  }

  /* labeled: the buttons say what they do */
  .mk-share-links[data-variant="labeled"] .mk-share-links-list { gap: 0.5rem; }

  /* brand: each network in its own colour (data-network on the button) */
  .mk-share-links[data-variant="brand"] .mk-share-links-list .btn {
    border-color: transparent;
    color: #fff;

    &[data-network="x"] { background: #0f1419; }
    &[data-network="linkedin"] { background: #0a66c2; }
    &[data-network="bluesky"] { background: #1185fe; }
    &[data-network="mastodon"] { background: #6364ff; }
    &[data-network="email"],
    &[data-network="link"] { background: var(--foreground); color: var(--background); }
    &:hover { filter: brightness(1.12); }
  }

  /* pill: a floating toolbar - one rounded surface, the buttons inside */
  .mk-share-links[data-variant="pill"] {
    display: inline-flex;
    gap: 0.5rem;
    padding: 0.3125rem 0.3125rem 0.3125rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--popover);
    box-shadow: var(--shadow-lg);

    & .mk-share-links-list { gap: 0.125rem; }
    & .mk-share-links-list .btn { border-color: transparent; border-radius: 999px; background: transparent; }
    & .mk-share-links-list .btn:hover { background: var(--accent); }
  }

  /* the copy-the-URL field in a share popover: the URL + a copy button */
  .mk-share-links-url {
    display: flex;
    gap: 0.375rem;

    & .input { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 0.8125rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-contrast: more) {
    .mk-share-links-label,
    .mk-share-links-status { color: var(--foreground); }
  }

  @media (forced-colors: active) {
    .mk-share-links-list svg { fill: currentColor; }
  }
}

/* ── components/sheet/sheet.css ── */
/* -- Sheet component ------------------------------------------- */

@layer components {
  /* -- Base -------------------------------------------------- */
  dialog.sheet {
    border: none;
    border-radius: 0;
    background-color: var(--background);
    color: var(--foreground);
    padding: 0;
    margin: 0;
    max-width: none;
    max-height: none;
    opacity: 0;
    transition: opacity 300ms ease, transform 300ms ease, display 300ms allow-discrete;

    &[open] { opacity: 1; }

    /* -- Side: right (default) --------------------------------- */
    &, &[data-side="right"] {
      position: fixed;
      top: 0; right: 0; bottom: 0;
      left: auto;
      width: 24rem;
      max-width: 100vw;
      max-height: 100vh;
      height: 100%;
      border-left: 1px solid var(--border);
      transform: translateX(100%);
    }

    &[open], &[data-side="right"][open] {
      transform: translateX(0);
    }

    /* -- Side: left -------------------------------------------- */
    &[data-side="left"] {
      position: fixed;
      top: 0; left: 0; bottom: 0;
      right: auto;
      width: 24rem;
      max-width: 100vw;
      max-height: 100vh;
      height: 100%;
      border-left: none;
      border-right: 1px solid var(--border);
      transform: translateX(-100%);

      &[open] { transform: translateX(0); }
    }

    /* -- Side: top --------------------------------------------- */
    &[data-side="top"] {
      position: fixed;
      top: 0; left: 0; right: 0;
      bottom: auto;
      width: 100%;
      max-width: 100vw;
      /* a sheet, not a page: the backdrop always shows (content scrolls
         inside the modal past this) */
      max-height: 85dvh;
      height: auto;
      border-left: none;
      border-bottom: 1px solid var(--border);
      transform: translateY(-100%);

      &[open] { transform: translateY(0); }
    }

    /* -- Side: bottom ------------------------------------------ */
    &[data-side="bottom"] {
      position: fixed;
      bottom: 0; left: 0; right: 0;
      top: auto;
      width: 100%;
      max-width: 100vw;
      /* a sheet, not a page: the backdrop always shows (content scrolls
         inside the modal past this) */
      max-height: 85dvh;
      height: auto;
      border-left: none;
      border-top: 1px solid var(--border);
      transform: translateY(100%);

      &[open] { transform: translateY(0); }
    }

    /* -- Backdrop ---------------------------------------------- */
    &::backdrop {
      background: oklch(0 0 0 / 0);
      backdrop-filter: blur(0px);
      transition: all 300ms ease, display 300ms allow-discrete;
    }

    &[open]::backdrop {
      background: oklch(0 0 0 / 0.45);
      backdrop-filter: blur(3px);
    }
  }

  @starting-style {
    dialog.sheet[open],
    dialog.sheet[data-side="right"][open] {
      opacity: 0;
      transform: translateX(100%);
    }

    dialog.sheet[data-side="left"][open] {
      opacity: 0;
      transform: translateX(-100%);
    }

    dialog.sheet[data-side="top"][open] {
      opacity: 0;
      transform: translateY(-100%);
    }

    dialog.sheet[data-side="bottom"][open] {
      opacity: 0;
      transform: translateY(100%);
    }

    dialog.sheet[open]::backdrop {
      background: oklch(0 0 0 / 0);
      backdrop-filter: blur(0px);
    }
  }

  /* -- Scroll lock ------------------------------------------- */
  /* Page behind stays put while a sheet is modal (see dialog.css):
     `:modal` + overflow:hidden freezes the viewport at its current offset. */
  html:has(dialog.sheet:modal) {
    overflow: hidden;
    scrollbar-gutter: stable;
  }

  /* -- Content sections -------------------------------------- */
  .sheet-content     { padding: 1.5rem; position: relative; }

  /* -- Density ----------------------------------------------------
     data-density on the .sheet root scales the content padding
     (0.75 / 1 / 1.25 of the 1.5rem default); comfortable matches the
     unsized default. The sheet's slide-in width is layout, not whitespace —
     it stays put. */
  .sheet:where([data-density="compact"]) .sheet-content     { padding: 1rem; }
  .sheet:where([data-density="comfortable"]) .sheet-content { padding: 1.5rem; }
  .sheet:where([data-density="spacious"]) .sheet-content    { padding: 2rem; }

  /* Top/bottom sheets span the full viewport width - on wide screens the
     content would stretch unaligned, so keep a readable, centered column
     (the side sheets are already width-constrained at 24rem). */
  dialog.sheet[data-side="top"] .sheet-content,
  dialog.sheet[data-side="bottom"] .sheet-content {
    max-width: 48rem;
    box-sizing: border-box; /* the 1.5rem padding is part of the 48rem column */
    width: 100%;
    margin-inline: auto;
  }
  .sheet-header      { margin-bottom: 1rem; padding-right: 2rem; }
  .sheet-title       { font-size: 1.0625rem; font-weight: 600; margin: 0 0 0.375rem; letter-spacing: -0.01em; }
  .sheet-description { font-size: 0.875rem; color: var(--muted-foreground); margin: 0; line-height: 1.6; }
  .sheet-body        { margin-top: 1rem; }
  .sheet-footer      { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem; }

  /* -- Close button ------------------------------------------ */
  .sheet-close-x {
    position: absolute;
    top: 1rem; right: 1rem;
    width: 1.75rem; height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color 150ms, background-color 150ms;

    &:hover {
      color: var(--foreground);
      background-color: var(--accent);
    }
  }
}

/* Accessibility: suppress motion for users who request it (REQUIRED for all
   components - AGENTS.md "Accessibility CSS"). Near-zero duration instead of
   `none` keeps transitionend/animationend (and discrete display flips)
   firing so JS state machines that await them keep working. */
@media (prefers-reduced-motion: reduce) {
  @layer components {
    .sheet,
    .sheet *,
    .sheet::before,
    .sheet::after,
    .sheet *::before,
    .sheet *::after,
    .sheet::backdrop,
    .sheet-body,
    .sheet-body *,
    .sheet-body::before,
    .sheet-body::after,
    .sheet-body *::before,
    .sheet-body *::after,
    .sheet-body::backdrop,
    .sheet-close-x,
    .sheet-close-x *,
    .sheet-close-x::before,
    .sheet-close-x::after,
    .sheet-close-x *::before,
    .sheet-close-x *::after,
    .sheet-close-x::backdrop,
    .sheet-content,
    .sheet-content *,
    .sheet-content::before,
    .sheet-content::after,
    .sheet-content *::before,
    .sheet-content *::after,
    .sheet-content::backdrop,
    .sheet-description,
    .sheet-description *,
    .sheet-description::before,
    .sheet-description::after,
    .sheet-description *::before,
    .sheet-description *::after,
    .sheet-description::backdrop,
    .sheet-footer,
    .sheet-footer *,
    .sheet-footer::before,
    .sheet-footer::after,
    .sheet-footer *::before,
    .sheet-footer *::after,
    .sheet-footer::backdrop,
    .sheet-header,
    .sheet-header *,
    .sheet-header::before,
    .sheet-header::after,
    .sheet-header *::before,
    .sheet-header *::after,
    .sheet-header::backdrop,
    .sheet-title,
    .sheet-title *,
    .sheet-title::before,
    .sheet-title::after,
    .sheet-title *::before,
    .sheet-title *::after,
    .sheet-title::backdrop {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

/* ── components/sidebar/sidebar.css ── */
/* -- Sidebar component ------------------------------------------ */
/* Application sidebar with collapsible state, mobile sheet overlay, */
/* collapsible groups, submenus, and keyboard shortcut (Cmd+B).      */

@layer components {

  /* ── Shell layout ─────────────────────────────────────────── */
  .sidebar-layout {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* ── Sidebar panel ────────────────────────────────────────── */
  .app-sidebar {
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width, 16rem);
    height: 100vh;
    height: 100dvh;
    position: sticky;
    top: 0;
    background-color: var(--sidebar);
    border-right: 1px solid var(--sidebar-border);
    flex-shrink: 0;
    transition: width 200ms ease;
    overflow: hidden;
    z-index: 30;

    /* Right side */
    &[data-side="right"] {
      border-right: none;
      border-left: 1px solid var(--sidebar-border);
      order: 1;
    }

    /* Collapsed - icon-only rail */
    &[data-state="collapsed"] {
      width: var(--sidebar-width-collapsed, 3.5rem);

      & .sidebar-link span:not(.sidebar-icon, .sidebar-dot),
      & .sidebar-section-title,
      & .sidebar-group-action,
      & .sidebar-badge,
      & .sidebar-footer,
      & .sidebar-logo-text { display: none; }

      & .sidebar-link { justify-content: center; padding: 0.5rem; gap: 0; }
      & .sidebar-header { justify-content: center; padding: 0.75rem 0.5rem; }
      & .sidebar-group > summary { justify-content: center; }
      & .sidebar-group > summary span:not(.sidebar-icon, .sidebar-dot) { display: none; }
      & .sidebar-group > summary > svg:last-child { display: none; }

      /* The nested-nav indent (0.75rem) would offset submenu icons from the
         rail column - drop it while collapsed. */
      & .sidebar-group > .sidebar-nav { padding-left: 0; }

      /* Submenu summary (e.g. Settings/cog) is NOT a .sidebar-link - it needs
         the same centering or its icon drifts off the icon column. Expanded
         submenu items have no icons, so the nav stays hidden while collapsed. */
      & .sidebar-submenu > summary { justify-content: center; padding: 0.5rem; gap: 0; }
      & .sidebar-submenu > summary span:not(.sidebar-icon, .sidebar-dot) { display: none; }
      & .sidebar-submenu > summary > svg:last-child { display: none; }
      & .sidebar-submenu > .sidebar-nav { display: none; }
    }

    /* Hidden on mobile by default - shown via dialog */
    @media (max-width: 767px) {
      display: none;
    }
  }

  /* ── Sidebar header ───────────────────────────────────────── */
  .sidebar-header {
    display: flex;
    align-items: center;
    padding: 1rem;
    gap: 0.5rem;
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
  }

  .sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sidebar-foreground);
    text-decoration: none;
  }

  /* ── Sidebar content (scrollable area) ────────────────────── */
  .sidebar-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.5rem;
    gap: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--sidebar-border) transparent;
  }

  /* ── Sidebar nav ──────────────────────────────────────────── */
  .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  /* ── Nav links ────────────────────────────────────────────── */
  .sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--sidebar-foreground);
    text-decoration: none;
    transition: background-color 150ms ease;
    position: relative;

    &:hover {
      background-color: var(--sidebar-accent);
      color: var(--sidebar-accent-foreground);
    }

    &[data-active="true"],
    &[aria-current="page"] {
      background-color: var(--sidebar-accent);
      color: var(--sidebar-accent-foreground);
      font-weight: 500;
    }

    &:focus-visible {
      outline: 2px solid var(--sidebar-ring);
      outline-offset: -2px;
    }

    & svg {
      width: 1rem;
      height: 1rem;
      flex-shrink: 0;
    }
  }

  /* ── Menu badge ───────────────────────────────────────────── */
  .sidebar-badge {
    margin-left: auto;
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    background-color: var(--sidebar-primary);
    color: var(--sidebar-primary-foreground);
    line-height: 1;
  }

  /* ── Leading icon / emoji ─────────────────────────────────── */
  /* <span class="sidebar-icon"> in front of a link, submenu or group label:
     holds an <svg> or an emoji in a fixed 1rem box, so labels line up and
     the collapsed rail keeps showing it. */
  .sidebar-icon {
    display: inline-grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    font-size: 0.9375rem;
    font-style: normal;
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;

    & svg { width: 1rem; height: 1rem; }
  }
  .sidebar-group > summary .sidebar-icon { width: 0.875rem; height: 0.875rem; font-size: 0.8125rem; }
  .sidebar-group > summary .sidebar-icon svg { width: 0.875rem; height: 0.875rem; }

  /* ── Activity dot ─────────────────────────────────────────── */
  /* <span class="sidebar-dot"> at the end of a link / summary marks news or
     activity (name it: role="img" aria-label="New"). Colors via data-variant,
     a ping via data-animate="ping"; on the collapsed rail it sits on the
     icon's corner. */
  .sidebar-dot {
    --_c: var(--sidebar-primary);
    position: relative;
    width: 0.5rem;
    height: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
    border-radius: 999px;
    background-color: var(--_c);

    &[data-variant="destructive"] { --_c: var(--destructive); }
    &[data-variant="success"] { --_c: oklch(0.65 0.17 150); }
    &[data-variant="warning"] { --_c: oklch(0.78 0.16 75); }
    &[data-variant="info"] { --_c: oklch(0.62 0.17 250); }

    &[data-animate="ping"]::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background-color: var(--_c);
      animation: sidebar-dot-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
    }
  }
  @keyframes sidebar-dot-ping {
    75%, 100% { scale: 2.4; opacity: 0; }
  }
  /* dot + badge / dot + chevron share the pushed-right slot */
  .sidebar-badge + .sidebar-dot,
  .sidebar-dot + .sidebar-badge,
  :is(.sidebar-group, .sidebar-submenu) > summary > .sidebar-dot ~ svg:last-child { margin-left: 0; }
  .app-sidebar[data-state="collapsed"] {
    & :is(.sidebar-group, .sidebar-submenu) > summary { position: relative; }
    & .sidebar-dot { position: absolute; top: 0.3125rem; right: 0.3125rem; margin: 0; width: 0.4375rem; height: 0.4375rem; }
  }

  /* ── Section title ────────────────────────────────────────── */
  .sidebar-section-title {
    padding: 0.75rem 0.75rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-foreground);
  }

  /* ── Collapsible group (uses <details>) ────────────────────── */
  .sidebar-group {
    & > summary {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0.75rem;
      font-size: 0.6875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--muted-foreground);
      cursor: pointer;
      list-style: none;
      border-radius: var(--radius-md);
      transition: background-color 150ms ease;

      &:hover { background-color: var(--sidebar-accent); }
      &::-webkit-details-marker { display: none; }

      & > svg:last-child {
        width: 0.875rem;
        height: 0.875rem;
        margin-left: auto;
        transition: rotate 200ms ease;
      }
    }

    &[open] > summary > svg:last-child { rotate: 90deg; }
    & > .sidebar-nav { padding: 0.25rem 0 0.25rem 0.75rem; }
  }

  /* ── Submenu (nested <details>) ────────────────────────────── */
  .sidebar-submenu {
    & > summary {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0.75rem;
      border-radius: var(--radius-md);
      font-size: 0.875rem;
      color: var(--sidebar-foreground);
      cursor: pointer;
      list-style: none;
      transition: background-color 150ms ease;

      /* leading icon matches .sidebar-link's 1rem - otherwise lucide's
         24px default renders the cog larger than the nav icons */
      & > svg:first-child { width: 1rem; height: 1rem; flex-shrink: 0; }

      &:hover {
        background-color: var(--sidebar-accent);
        color: var(--sidebar-accent-foreground);
      }
      &::-webkit-details-marker { display: none; }

      & > svg:last-child {
        width: 0.875rem;
        height: 0.875rem;
        margin-left: auto;
        transition: rotate 200ms ease;
      }
    }

    &[open] > summary > svg:last-child { rotate: 90deg; }

    & > .sidebar-nav {
      padding: 0.25rem 0 0.25rem 1.5rem;
      border-left: 1px solid var(--sidebar-border);
      margin-left: 0.75rem;
    }
  }

  /* ── Group action button ──────────────────────────────────── */
  .sidebar-group-action {
    margin-left: auto;
    padding: 0.125rem;
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    border-radius: var(--radius-sm);

    &:hover { color: var(--sidebar-foreground); background-color: var(--sidebar-accent); }
    & svg { width: 0.875rem; height: 0.875rem; }
  }

  /* ── Sidebar footer ───────────────────────────────────────── */
  .sidebar-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--sidebar-border);
    font-size: 0.8125rem;
    color: var(--sidebar-foreground);
    flex-shrink: 0;
    & p { margin: 0; }
  }

  /* ── Sidebar trigger ──────────────────────────────────────── */
  .sidebar-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    color: var(--foreground);
    cursor: pointer;
    border-radius: var(--radius-md);

    &:hover { background-color: var(--accent); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
    & svg { width: 1rem; height: 1rem; }
  }

  /* ── Mobile sidebar (<dialog> sheet overlay) ──────────────── */
  .sidebar-mobile {
    border: none;
    padding: 0;
    margin: 0;
    position: fixed;
    inset: 0;
    width: var(--sidebar-width, 16rem);
    max-width: 80vw;
    height: 100%;
    background-color: var(--sidebar);
    color: var(--sidebar-foreground);
    z-index: 50;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    opacity: 0;
    translate: -100% 0;
    transition: opacity 200ms ease, translate 200ms ease,
                display 200ms allow-discrete;

    &[open] {
      opacity: 1;
      translate: 0 0;
    }

    &[data-side="right"] {
      right: 0;
      left: auto;
      translate: 100% 0;
      &[open] { translate: 0 0; }
    }

    &::backdrop {
      background: oklch(0 0 0 / 0.5);
      opacity: 0;
      transition: opacity 200ms ease, display 200ms allow-discrete;
    }

    &[open]::backdrop { opacity: 1; }

    & .sidebar-mobile-close {
      position: absolute;
      top: 0.75rem;
      right: 0.75rem;
      width: 1.5rem;
      height: 1.5rem;
      border: none;
      background: transparent;
      color: var(--sidebar-foreground);
      cursor: pointer;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;

      &:hover { background-color: var(--sidebar-accent); }
      & svg { width: 0.875rem; height: 0.875rem; }
    }

    @media (min-width: 768px) {
      display: none;
    }
  }

  @starting-style {
    .sidebar-mobile[open] { opacity: 0; translate: -100% 0; }
    .sidebar-mobile[open]::backdrop { opacity: 0; }
    .sidebar-mobile[data-side="right"][open] { opacity: 0; translate: 100% 0; }
  }

  /* ── Scroll lock ──────────────────────────────────────────── */
  /* Page behind stays put while the mobile sheet is modal (see dialog.css):
     `:modal` + overflow:hidden freezes the viewport at its current offset. */
  html:has(.sidebar-mobile:modal) {
    overflow: hidden;
    scrollbar-gutter: stable;
  }

  /* ── Reduced motion ───────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .app-sidebar { transition: none; }
    .sidebar-link { transition: none; }
    .sidebar-group > summary > svg:last-child { transition: none; }
    .sidebar-submenu > summary > svg:last-child { transition: none; }
    .sidebar-dot[data-animate]::after { animation: none; }
    .sidebar-mobile { transition: none; }
    .sidebar-mobile::backdrop { transition: none; }
  }
  /* -- Density ----------------------------------------------------
     data-density on the .app-sidebar root scales link rows and the content
     frame. comfortable == the unsized default (0.5rem). Independent of the
     collapsed rail, whose compact paddings win by higher specificity. */
  .app-sidebar:where([data-density="compact"]) {
    & .sidebar-link { padding-block: 0.375rem; }
    & .sidebar-content { padding: 0.375rem; gap: 0.375rem; }
  }
  .app-sidebar:where([data-density="comfortable"]) {
    & .sidebar-link { padding-block: 0.5rem; }
    & .sidebar-content { padding: 0.5rem; gap: 0.5rem; }
  }
  .app-sidebar:where([data-density="spacious"]) {
    & .sidebar-link { padding-block: 0.625rem; }
    & .sidebar-content { padding: 0.625rem; gap: 0.625rem; }
  }

}

/* ── components/signup-form/signup-form.css ── */
/* -- Signup Form (website · Account & States) -----------------------------
   Collects the information needed to create an account - name, email, a new password with its rules, consent - on a card or beside the benefits. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-signup-form, .mk-signup-form *, .mk-signup-form ::before, .mk-signup-form ::after) { box-sizing: border-box; }

  .mk-signup-form {
    container: mk-signup-form / inline-size;
    display: grid;
    gap: 1.5rem;
    width: 100%;
    max-width: 24rem;
    margin-inline: auto;
    padding: 2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);
    box-shadow: var(--shadow-sm);
  }
  .mk-signup-form-head { display: grid; justify-items: center; gap: 0.5rem; text-align: center;
    & > svg { width: 2rem; height: 2rem; color: var(--primary); }
    & h1, & h2 { margin: 0.25rem 0 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
    & p { margin: 0; color: var(--muted-foreground); font-size: 0.9375rem; text-wrap: pretty; }
  }
  .mk-signup-form form { display: grid; gap: 1rem; }
  .mk-signup-form .mk-auth-field { display: grid; gap: 0.375rem; }
  .mk-signup-form-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.875rem;
    & a { color: var(--primary); font-weight: 500; text-decoration: none; }
    & a:hover { text-decoration: underline; text-underline-offset: 3px; }
  }
  .mk-signup-form-foot { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; text-align: center;
    & a { color: var(--primary); font-weight: 600; text-decoration: none; }
    & a:hover { text-decoration: underline; text-underline-offset: 3px; }
  }
  .mk-signup-form .input:user-valid { border-color: #16a34a; }
  .mk-signup-form .btn[type="submit"] { width: 100%; }
  .mk-signup-form-rules { display: grid; gap: 0.25rem; margin: 0.25rem 0 0; padding: 0; list-style: none; color: var(--muted-foreground); font-size: 0.8125rem;
    & li { display: flex; align-items: center; gap: 0.5rem; }
    & li::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; opacity: 0.6; }
  }
  .mk-auth-field:has(.input:user-valid) .mk-signup-form-rules { color: #15803d; }
  .mk-signup-form-terms { display: flex; align-items: flex-start; gap: 0.5rem; color: var(--muted-foreground); font-size: 0.8125rem; line-height: 1.5;
    & input { margin-block-start: 0.125rem; }
    & a { color: var(--primary); }
  }

  .mk-signup-form[data-variant="split"] { max-width: 56rem; padding: 0; overflow: hidden; }
  .mk-signup-form-layout { display: grid; }
  .mk-signup-form-pitch { display: grid; align-content: center; gap: 1.25rem; padding: 2rem; background: var(--muted);
    & h2 { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
    & ul { display: grid; gap: 0.875rem; margin: 0; padding: 0; list-style: none; }
    & li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.125rem 0.75rem; }
    & li svg { grid-row: span 2; width: 1.25rem; height: 1.25rem; color: var(--primary); }
    & li span { color: var(--muted-foreground); font-size: 0.875rem; }
  }
  .mk-signup-form-panel { display: grid; gap: 1.25rem; padding: 2rem; }
  @container mk-signup-form (min-width: 44rem) {
    .mk-signup-form-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
    .mk-signup-form-pitch, .mk-signup-form-panel { padding: 2.5rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-signup-form { border-color: CanvasText; }
  }
}

/* ── components/site-footer/site-footer.css ── */
/* -- Site Footer (marketing) ---------------------------------------
   Link columns + rule + brand/social/copyright row. Named .mk-footer
   to avoid colliding with the doc site's own .site-footer chrome. */

@layer components {
  .mk-footer {
    container: mk-footer / inline-size;
    width: 100%;
    background: var(--background);
    color: var(--foreground);
  }

  .mk-footer-inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 80rem;
    margin-inline: auto;
    padding: 2.5rem 1.25rem;
  }

  .mk-footer-nav {
    display: grid;
    gap: 3rem;
  }

  .mk-footer-col { display: flex; flex-direction: column; gap: 0.625rem; }

  .mk-footer-heading {
    line-height: 1.3;
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    font-weight: 500;
  }

  .mk-footer-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 1rem;

    & a {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      color: inherit;
      text-decoration: none;
      border-radius: var(--radius-sm);

      &:hover { text-decoration: underline; text-underline-offset: 3px; }
      &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
    }
  }

  .mk-footer-rule { width: 100%; }

  .mk-footer-bottom { display: flex; flex-direction: column; gap: 2.25rem; }

  .mk-footer-brand {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    color: var(--primary);
    text-decoration: none;

    & svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
  }

  .mk-footer-brand-name { font-size: 0.875rem; font-weight: 500; white-space: nowrap; }

  .mk-footer-meta { display: flex; flex-direction: column; gap: 1rem; }

  .mk-footer-social {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--muted-foreground);

    & a { display: flex; color: inherit; border-radius: var(--radius-sm); &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } }
    & svg { width: 1rem; height: 1rem; }
  }

  .mk-footer-copy { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; }

  @container mk-footer (min-width: 30rem) {
    .mk-footer-nav { grid-template-columns: 1fr 1fr; }
    .mk-footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
    .mk-footer-meta { flex-direction: row; align-items: center; gap: 1rem; }
  }

  @container mk-footer (min-width: 52rem) {
    .mk-footer-inner { gap: 2.25rem; padding-inline: 2rem; }
    .mk-footer-nav { grid-template-columns: repeat(4, 1fr); gap: 2.25rem; }
  }


  /* -- variants ------------------------------------------------- */
  /* simple: one row - brand, inline links, copyright */
  .mk-footer[data-variant="simple"] .mk-footer-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding-block: 1.5rem;
  }
  .mk-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;

    & a { color: var(--muted-foreground); text-decoration: none; border-radius: var(--radius-sm); }
    & a:hover { color: var(--foreground); }
    & a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  }

  /* top: an about column (brand, line, newsletter, social) beside the link columns */
  .mk-footer-top { display: grid; gap: 2.5rem; }
  .mk-footer-about {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    max-width: 24rem;

    & p { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; text-wrap: pretty; }
  }
  .mk-footer-top .mk-footer-nav { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); }
  .mk-footer-newsletter {
    display: flex;
    gap: 0.5rem;
    width: 100%;

    & .input { flex: 1; min-width: 0; }
  }
  .mk-footer-locale { display: flex; align-items: center; gap: 0.5rem; color: var(--muted-foreground); font-size: 0.875rem; }
  .mk-footer-locale .select { width: auto; height: 2rem; font-size: 0.8125rem; }

  /* dark: the footer inverts - the page ends on a dark band */
  .mk-footer[data-variant="dark"] {
    background: var(--foreground);
    color: var(--background);

    & :is(.mk-footer-heading, .mk-footer-copy, .mk-footer-social, .mk-footer-about p) { color: color-mix(in oklch, var(--background) 65%, transparent); }
    & .mk-footer-brand { color: inherit; }
    & .separator { background: color-mix(in oklch, var(--background) 18%, transparent); }
    & .mk-footer-list a:focus-visible { outline-color: var(--background); }
  }

  /* cta: a call to action on top of the footer */
  .mk-footer-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    padding: 2rem;
    border-radius: var(--radius-xl);
    background:
      radial-gradient(60% 120% at 100% 0%, color-mix(in oklch, var(--chart-1) 55%, transparent), transparent 70%), radial-gradient(50% 120% at 75% 100%, color-mix(in oklch, var(--chart-2) 40%, transparent), transparent 70%),
      color-mix(in oklch, var(--background) 8%, var(--foreground));
    color: var(--background);

    & h2 { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
    & p { margin: 0.25rem 0 0; color: color-mix(in oklch, var(--background) 70%, transparent); }
    & .mk-footer-cta-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  }
  .mk-footer:not([data-variant="dark"]) .mk-footer-cta { background: radial-gradient(60% 120% at 100% 0%, color-mix(in oklch, var(--chart-1) 55%, transparent), transparent 70%), radial-gradient(50% 120% at 75% 100%, color-mix(in oklch, var(--chart-2) 40%, transparent), transparent 70%), var(--foreground); }

  /* wordmark: the brand, huge, closing the page */
  .mk-footer-wordmark {
    margin: 0;
    overflow: hidden;
    color: color-mix(in oklch, currentColor 10%, transparent);
    font-size: 26cqi;
    font-weight: 800;
    line-height: 0.8;
    letter-spacing: -0.06em;
    text-align: center;
    white-space: nowrap;
    user-select: none;
  }

  @container mk-footer (min-width: 52rem) {
    .mk-footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 4rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-footer[data-variant="dark"] { border-block-start: 1px solid CanvasText; }
    .mk-footer-cta { border: 1px solid CanvasText; }
    .mk-footer-wordmark { color: GrayText; }
  }

  @media (forced-colors: active) {
    .mk-footer-copy { color: CanvasText; }
  }
}

/* ── components/site-header/site-header.css ── */
/* -- Site Header (marketing) -------------------------------------
   Fixed-height product header: brand left, nav center, actions right.
   The doc site's own chrome uses .site-header/<site-header>; marketing
   pages use .mk-header so the two never collide. */

@layer components {
  .mk-header {
    /* container query, not @media: the header adapts to the width it is
       placed in (doc preview box, sidebar layout, full page) */
    container: mk-header / inline-size;
    position: relative;
    width: 100%;
    background: var(--background);
    color: var(--foreground);

    &[data-variant="sticky"] {
      position: sticky;
      top: 0;
      z-index: 50;
    }
  }

  .mk-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    max-width: 80rem;
    margin-inline: auto;
    padding: 0.5rem 1.25rem;
  }

  .mk-header-brand {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    /* the glyph follows the name - never the browser's link blue */
    color: var(--primary);
    text-decoration: none;

    & svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
  }

  .mk-header-name {
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
  }

  /* nav collapses below the container breakpoint (source: `hidden md:flex`).
     The nav composes the navigation-menu component (.nav-menu-list /
     .nav-menu-trigger / .nav-menu-content) - its dropdown popovers are the
     native Popover API, so the header stays CSS-only. */
  .mk-header-nav { display: none; align-items: center; }

  .mk-header-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

  /* narrow: the nav moves into a Sheet behind a menu button; secondary
     actions (.mk-header-wide) step aside */
  .mk-header-menu { display: inline-flex; }
  .mk-header-actions .mk-header-wide { display: none; }

  /* the navigation inside the sheet: big tap targets, groups with a label */
  .mk-header-sheet-nav {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;

    & a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      min-height: 2.75rem;
      padding: 0.5rem 0.75rem;
      border-radius: var(--radius-md);
      color: var(--foreground);
      font-size: 1rem;
      font-weight: 500;
      text-decoration: none;

      &:hover { background: var(--accent); color: var(--accent-foreground); }
      &[aria-current] { background: var(--accent); }
      &:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
      & small { color: var(--muted-foreground); font-size: 0.8125rem; font-weight: 400; }
    }
  }
  .mk-header-sheet-label {
    margin: 0.75rem 0 0.25rem;
    padding-inline: 0.75rem;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .mk-header-sheet-actions { display: grid; gap: 0.5rem; }
  .mk-header-sheet-actions .btn { width: 100%; }

  @container mk-header (min-width: 40rem) {
    .mk-header-inner { padding-inline: 2rem; }
    .mk-header-nav { display: flex; }
    .mk-header-menu { display: none; }
    .mk-header-actions .mk-header-wide { display: inline-flex; }
  }


  /* -- variants ------------------------------------------------- */
  /* floating: a blurred pill that hovers over the page (sticky) */
  .mk-header[data-variant="floating"] {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 0.75rem;
    background: transparent;

    & .mk-header-inner {
      max-width: 64rem;
      min-height: 3.25rem;
      padding: 0.375rem 0.5rem 0.375rem 1rem;
      border: 1px solid color-mix(in oklch, var(--border) 80%, transparent);
      border-radius: 999px;
      background: color-mix(in oklch, var(--background) 78%, transparent);
      box-shadow: var(--shadow-lg);
      backdrop-filter: blur(12px) saturate(1.4);
    }
    & .btn { border-radius: 999px; }
  }

  /* an announcement bar above the header row */
  .mk-header-announcement {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 0.8125rem;
    text-align: center;

    & p { margin: 0; }
    & a { display: inline-flex; align-items: center; gap: 0.25rem; color: inherit; font-weight: 600; text-underline-offset: 3px; }
    & svg { width: 0.875rem; height: 0.875rem; }
    & a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: var(--radius-sm); }
  }

  /* overlay: transparent over a hero picture, white text */
  .mk-header[data-variant="overlay"] {
    position: absolute;
    inset: 0 0 auto;
    z-index: 5;
    background: transparent;
    color: #fff;

    & .mk-header-brand,
    & .mk-header-name,
    & .nav-menu-link,
    & .btn[data-variant="ghost"] { color: inherit; }
    & .nav-menu-link:hover { background: oklch(1 0 0 / 0.12); color: inherit; }
    & .nav-menu-link[aria-current] { background: oklch(1 0 0 / 0.16); }
  }

  /* centered: the brand in the middle, the nav left, the actions right */
  .mk-header[data-variant="centered"] .mk-header-inner {
    display: grid;
    /* minmax(0, …): a wide actions column must not push the brand off-center */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);

    & .mk-header-brand { grid-column: 2; grid-row: 1; }
    & .mk-header-nav { grid-column: 1; grid-row: 1; justify-self: start; }
    & .mk-header-actions { grid-column: 3; grid-row: 1; justify-self: end; }
    & .mk-header-name { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
  }

  /* search: an inline search field (wide only - the sheet carries it when narrow) */
  .mk-header-search {
    position: relative;
    display: none;
    width: 100%;
    max-width: 20rem;

    & svg { position: absolute; inset-inline-start: 0.75rem; top: 50%; translate: 0 -50%; width: 1rem; height: 1rem; color: var(--muted-foreground); pointer-events: none; }
    & .input { padding-inline-start: 2.25rem; }
  }

  /* an icon button with a count (cart, inbox) */
  .mk-header-icon { position: relative; }
  .mk-header-count {
    position: absolute;
    top: -0.125rem;
    inset-inline-end: -0.125rem;
    min-width: 1.125rem;
    height: 1.125rem;
    padding-inline: 0.25rem;
    border: 2px solid var(--background);
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 0.875rem;
    text-align: center;
    box-sizing: border-box;
  }

  /* elevate: a sticky header gains a rule and a shadow once the page scrolls */
  @keyframes mk-header-elevate {
    to { border-block-end-color: var(--border); box-shadow: var(--shadow-md); }
  }
  .mk-header[data-elevate] {
    border-block-end: 1px solid transparent;
    animation: mk-header-elevate linear both;
  }
  @supports (animation-timeline: scroll()) {
    .mk-header[data-elevate] { animation-timeline: scroll(nearest block); animation-range: 0 64px; }
  }
  @supports not (animation-timeline: scroll()) {
    .mk-header[data-elevate] { animation: none; border-block-end-color: var(--border); }
  }

  @container mk-header (min-width: 48rem) {
    .mk-header-search { display: block; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-header[data-elevate] { animation: none; border-block-end-color: var(--border); }
  }

  @media (forced-colors: active) {
    .mk-header[data-variant="floating"] .mk-header-inner { border-color: CanvasText; }
    .mk-header-count { border-color: Canvas; }
  }

  @media (prefers-reduced-motion: reduce) {
    /* navigation-menu suppresses its own transitions; nothing header-side
       animates, so no overrides needed here */
  }

  @media (forced-colors: active) {
    .mk-header { border-bottom: 1px solid CanvasText; }
  }
}

/* ── components/skeleton/skeleton.css ── */
@layer components {
  .skeleton {
    background-color: var(--accent);
    border-radius: var(--radius-md);
    animation: skeleton-pulse 2s ease-in-out infinite;
  }

  .skeleton-round {
    border-radius: 9999px;
  }

  @keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }
}

/* Accessibility: suppress motion for users who request it (REQUIRED for all
   components - AGENTS.md "Accessibility CSS"). Near-zero duration instead of
   `none` keeps transitionend/animationend (and discrete display flips)
   firing so JS state machines that await them keep working. */
@media (prefers-reduced-motion: reduce) {
  @layer components {
    .skeleton,
    .skeleton *,
    .skeleton::before,
    .skeleton::after,
    .skeleton *::before,
    .skeleton *::after,
    .skeleton::backdrop,
    .skeleton-round,
    .skeleton-round *,
    .skeleton-round::before,
    .skeleton-round::after,
    .skeleton-round *::before,
    .skeleton-round *::after,
    .skeleton-round::backdrop {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

/* ── components/slider/slider.css ── */
/* -- Slider component ------------------------------------------- */

@layer components {
  /* Everything runs through a few private variables so a .slider-range
     wrapper (two thumbs) can hand its size and color down to both inputs:
     --_track / --_thumb (set by data-size, on the slider or on the range),
     --_c (set by data-tone) and the public --slider-color for any color.
     --_fill resolves them once, here, on the input. */
  .slider {
    --slider-value: 50%;
    --_fill: var(--_c, var(--slider-color, var(--primary)));
    --_t: var(--_track, 0.5rem);
    --_d: var(--_thumb, 1.25rem);
    --_dir: to right;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    /* the UA gives a range a 2px margin: with width 100% the track would
       overflow its box and drift off a .slider-marks scale */
    margin-inline: 0;
    height: var(--_t);
    border-radius: 9999px;
    background: var(--secondary);
    cursor: pointer;
    outline: none;
    border: none;
    accent-color: var(--_fill);

    /* Track - WebKit (filled via gradient) */
    &::-webkit-slider-runnable-track {
      height: var(--_t);
      border-radius: 9999px;
      background: linear-gradient(
        var(--_dir),
        var(--_fill) 0%,
        var(--_fill) var(--slider-value),
        var(--secondary) var(--slider-value),
        var(--secondary) 100%
      );
    }

    /* Track - Firefox */
    &::-moz-range-track {
      height: var(--_t);
      border-radius: 9999px;
      background: var(--secondary);
      border: none;
    }

    /* Filled portion - Firefox */
    &::-moz-range-progress {
      height: var(--_t);
      border-radius: 9999px;
      background: var(--_fill);
    }

    /* Thumb - WebKit (re-centered on the track: (track - thumb) / 2).
       --slider-thumb-image paints a picture (an emoji, see data-thumb) */
    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: var(--_d);
      height: var(--_d);
      border-radius: 50%;
      background: var(--slider-thumb-image, none) center / 100% no-repeat, var(--background);
      border: 2px solid var(--_fill);
      margin-top: calc((var(--_t) - var(--_d)) / 2);
      cursor: pointer;
      transition: box-shadow 150ms, scale 150ms;
    }

    /* Thumb - Firefox */
    &::-moz-range-thumb {
      width: var(--_d);
      height: var(--_d);
      border-radius: 50%;
      background: var(--slider-thumb-image, none) center / 100% no-repeat, var(--background);
      border: 2px solid var(--_fill);
      cursor: pointer;
      transition: box-shadow 150ms, scale 150ms;
    }

    /* Hover */
    &:hover:not(:disabled) {
      &::-webkit-slider-thumb {
        box-shadow: 0 0 0 4px color-mix(in oklch, var(--_fill) 15%, transparent);
      }
      &::-moz-range-thumb {
        box-shadow: 0 0 0 4px color-mix(in oklch, var(--_fill) 15%, transparent);
      }
    }

    /* Focus */
    &:focus-visible {
      &::-webkit-slider-thumb {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
      }
      &::-moz-range-thumb {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
      }
    }

    /* Disabled */
    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;

      &::-webkit-slider-thumb { cursor: not-allowed; }
      &::-moz-range-thumb { cursor: not-allowed; }
    }

    /* RTL: the range runs right to left, so does the fill */
    &:dir(rtl) { --_dir: to left; }

    /* Vertical orientation */
    &[data-orientation="vertical"] {
      --_dir: to top;
      writing-mode: vertical-lr;
      direction: rtl;
      width: var(--_t);
      height: 12rem;

      &::-webkit-slider-runnable-track { width: var(--_t); height: auto; }
      &::-webkit-slider-thumb {
        margin-top: 0;
        margin-left: calc((var(--_t) - var(--_d)) / 2);
      }
    }

    /* -- Emoji thumb: data-thumb="emoji" (slider.js draws the emoji from
       data-thumb-emoji into --slider-thumb-image) - no ring, no fill disc,
       a bit larger than the plain thumb. */
    &[data-thumb="emoji"] {
      --_d: var(--_thumb, 2rem);

      &::-webkit-slider-thumb { border: 0; background-color: transparent; }
      &::-moz-range-thumb { border: 0; background-color: transparent; }
      &:active::-webkit-slider-thumb { scale: 1.15; }
      &:active::-moz-range-thumb { scale: 1.15; }
    }
  }

  /* -- Sizes: track thickness + thumb diameter (md == the default) ----
     On a .slider or on a .slider-range (both inputs inherit). */
  :is(.slider, .slider-range, .slider-marks) {
    &[data-size="xs"] { --_track: 0.25rem; --_thumb: 0.75rem; }
    &[data-size="sm"] { --_track: 0.375rem; --_thumb: 1rem; }
    &[data-size="md"] { --_track: 0.5rem; --_thumb: 1.25rem; }
    &[data-size="lg"] { --_track: 0.625rem; --_thumb: 1.5rem; }
    &[data-size="xl"] { --_track: 0.75rem; --_thumb: 1.75rem; }

    /* -- Tones: success / warning / info / destructive; any other color
       via style="--slider-color: …" */
    &[data-tone="success"] { --_c: oklch(0.6 0.15 150); }
    &[data-tone="warning"] { --_c: oklch(0.78 0.16 75); }
    &[data-tone="info"] { --_c: oklch(0.6 0.16 250); }
    &[data-tone="destructive"] { --_c: var(--destructive); }
  }

  /* -- Marks: a CSS-only tick scale under a stepped slider ------------
     <div class="slider-marks" aria-hidden="true"> right after the slider
     (or range); each child is a zero-width flex item, so space-between
     lands the tick centres on the thumb-centre travel (inset by half a
     thumb at each end). The tick is generated, the child's text is the
     optional label. It follows the slider's data-size when it is the
     slider's next sibling (or set data-size on the marks). */
  .slider-marks {
    display: flex;
    justify-content: space-between;
    padding-inline: calc(var(--_thumb, 1.25rem) / 2);
    margin-top: 0.375rem;
    font-size: 0.6875rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--muted-foreground);

    & > * {
      /* zero-width: flex-basis 0 alone leaves min-width:auto, which would
         widen the item to its label and push the tick off its step */
      flex: 0 0 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.25rem;
      white-space: nowrap;
    }
    & > *::before {
      content: "";
      width: 1px;
      height: 0.375rem;
      background: var(--border);
    }
    /* a tick without a label (an empty child) stays a short tick */
    & > :empty::before { height: 0.25rem; }
  }
  :is(.slider, .slider-range)[data-size="xs"] + .slider-marks:not([data-size]) { --_thumb: 0.75rem; }
  :is(.slider, .slider-range)[data-size="sm"] + .slider-marks:not([data-size]) { --_thumb: 1rem; }
  :is(.slider, .slider-range)[data-size="lg"] + .slider-marks:not([data-size]) { --_thumb: 1.5rem; }
  :is(.slider, .slider-range)[data-size="xl"] + .slider-marks:not([data-size]) { --_thumb: 1.75rem; }

  /* -- Range: two thumbs on one track ---------------------------------
     Two .slider inputs stacked in a .slider-range; only their thumbs take
     the pointer, the wrapper paints one track with the span between the
     thumbs filled (slider.js keeps --range-from / --range-to in sync and
     the low value <= the high one). Each input keeps its own keyboard,
     label and State API. */
  .slider-range {
    --range-from: 25%;
    --range-to: 75%;
    --_fill: var(--_c, var(--slider-color, var(--primary)));
    --_dir: to right;
    position: relative;
    display: block;
    width: 100%;
    height: var(--_thumb, 1.25rem);

    &::before {
      content: '';
      position: absolute;
      inset-inline: 0;
      top: 50%;
      height: var(--_track, 0.5rem);
      translate: 0 -50%;
      border-radius: 9999px;
      background: linear-gradient(
        var(--_dir),
        var(--secondary) var(--range-from),
        var(--_fill) var(--range-from),
        var(--_fill) var(--range-to),
        var(--secondary) var(--range-to)
      );
    }
    &:dir(rtl) { --_dir: to left; }

    & > .slider {
      position: absolute;
      inset-inline: 0;
      top: 50%;
      translate: 0 -50%;
      margin: 0;
      background: none;
      pointer-events: none;

      &::-webkit-slider-runnable-track { background: none; }
      &::-moz-range-track { background: none; }
      &::-moz-range-progress { background: none; }
      &::-webkit-slider-thumb { pointer-events: auto; }
      &::-moz-range-thumb { pointer-events: auto; }
    }
    /* the thumb last moved stays on top (both can reach the same value) */
    & > .slider[data-active] { z-index: 1; }

    &:has(.slider:disabled) { opacity: 0.5; }
  }

  /* -- Field: icons, emojis and values around a slider ----------------- */
  .slider-field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;

    & > :is(.slider, .slider-range) { flex: 1 1 auto; min-width: 0; }
  }
  .slider-icon {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--muted-foreground);

    & svg { width: 1.125rem; height: 1.25rem; }
  }
  .slider-value {
    flex-shrink: 0;
    min-width: 3.5em;
    text-align: end;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--foreground);
  }
  /* a scale under the track: the first and last labels align to the ends */
  .slider-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--muted-foreground);
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .slider {
      &::-webkit-slider-thumb { transition: none; }
      &::-moz-range-thumb { transition: none; }
    }
  }

  /* High contrast */
  @media (prefers-contrast: more) {
    .slider-marks { color: var(--foreground); & > *::before { background: var(--foreground); } }
    .slider {
      &::-webkit-slider-thumb {
        border-width: 3px;
      }
      &::-moz-range-thumb {
        border-width: 3px;
      }
    }
  }

  /* Forced colors (Windows High Contrast Mode) */
  @media (forced-colors: active) {
    .slider-marks { color: CanvasText; & > *::before { background: CanvasText; } }
    .slider {
      &::-webkit-slider-runnable-track {
        background: ButtonFace;
        border: 1px solid ButtonText;
      }
      &::-moz-range-track {
        background: ButtonFace;
        border: 1px solid ButtonText;
      }
      &::-moz-range-progress {
        background: Highlight;
      }
      &::-webkit-slider-thumb {
        background: ButtonText;
        border-color: ButtonText;
      }
      &::-moz-range-thumb {
        background: ButtonText;
        border-color: ButtonText;
      }

      &:focus-visible {
        &::-webkit-slider-thumb {
          outline-color: Highlight;
        }
        &::-moz-range-thumb {
          outline-color: Highlight;
        }
      }
    }
    .slider-range::before { background: Highlight; }
  }
}

/* ── components/social-login/social-login.css ── */
/* -- Social Login (website · Account & States) ----------------------------
   Provides authentication through external identity providers - Google, Apple, GitHub, Microsoft - as full-width buttons, an icon row, with a divider to the email form. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-social-login, .mk-social-login *, .mk-social-login ::before, .mk-social-login ::after) { box-sizing: border-box; }

  .mk-social-login { display: grid; gap: 0.625rem; width: 100%; max-width: 24rem;
    & .btn { justify-content: center; gap: 0.625rem; width: 100%; }
    & svg { flex: none; }
  }
  .mk-social-login[data-variant="icons"] {
    grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
    & .btn { padding-inline: 0; }
  }
  .mk-social-login-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 24rem;
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    &::before, &::after { content: ""; flex: 1; height: 1px; background: var(--border); }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-social-login-divider::before, .mk-social-login-divider::after { background: CanvasText; }
  }
}

/* ── components/social-post/social-post.css ── */
/* -- Social Post (website · Media) ----------------------------------------
   Displays one embedded or locally rendered social post - author, text with links, media, time and engagement, as a post, a photo post or a quote. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-social-post, .mk-social-post *, .mk-social-post ::before, .mk-social-post ::after) { box-sizing: border-box; }

  .mk-social-post { display: grid; gap: 0.875rem; padding: 1.25rem; border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground); }
  .mk-social-post-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; }
  .mk-social-post-who { display: grid; min-width: 0; line-height: 1.3; }
  .mk-social-post-name { display: inline-flex; align-items: center; gap: 0.25rem; overflow: hidden; color: inherit; font-size: 0.9375rem; font-weight: 700; text-decoration: none; white-space: nowrap;
    &:hover { text-decoration: underline; }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
  }
  .mk-social-post-verified { flex: none; color: oklch(0.62 0.18 250); }
  .mk-social-post-handle { color: var(--muted-foreground); font-size: 0.875rem; }
  .mk-social-post-network { color: var(--foreground); }
  .mk-social-post-text p { margin: 0; font-size: 0.9375rem; line-height: 1.6; white-space: pre-line; text-wrap: pretty;
    & a { color: oklch(0.55 0.18 250); text-decoration: none; }
    & a:hover { text-decoration: underline; }
  }
  .mk-social-post-media { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius-lg); }
  .mk-social-post-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding-block-start: 0.75rem; border-block-start: 1px solid var(--border); }
  .mk-social-post-time { color: var(--muted-foreground); font-size: 0.8125rem; text-decoration: none;
    &:hover { text-decoration: underline; }
  }
  .mk-social-post-stats { display: flex; gap: 1rem; margin: 0; padding: 0; list-style: none; color: var(--muted-foreground); font-size: 0.8125rem; font-variant-numeric: tabular-nums;
    & li { display: inline-flex; align-items: center; gap: 0.3125rem; }
    & svg { width: 1rem; height: 1rem; }
  }

  .mk-social-post[data-variant="photo"] {
    padding: 0 0 1rem;
    overflow: hidden;

    & > .mk-social-post-media { aspect-ratio: 1; border: 0; border-radius: 0; }
    & > :not(.mk-social-post-media) { margin-inline: 1rem; }
    & .mk-social-post-foot { border: 0; padding: 0; }
  }

  .mk-social-post[data-variant="quote"] {
    & .mk-social-post-text p { font-size: 1.1875rem; line-height: 1.5; }
    & .mk-social-post-head { order: 2; }
    & .mk-social-post-text { order: 1; }
    & .mk-social-post-foot { order: 3; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-social-post { border-color: CanvasText; }
    .mk-social-post-verified { color: LinkText; }
  }
}

/* ── components/sort-control/sort-control.css ── */
/* -- Sort Control (website · Search & Navigation) -------------------------
   Changes the ordering of a collection - a labelled select, a segmented choice, or a button that opens a menu of options. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-sort-control, .mk-sort-control *, .mk-sort-control ::before, .mk-sort-control ::after) { box-sizing: border-box; }

  .mk-sort-control { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem;
    & > label { color: var(--muted-foreground); white-space: nowrap; }
    & .select { width: auto; height: 2rem; font-size: 0.8125rem; }
  }
  .mk-sort-control[data-variant="segmented"] { padding: 0.1875rem; margin: 0; border: 0; border-radius: var(--radius-md); background: var(--muted); gap: 0;
    & legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    & label { position: relative; padding: 0.3125rem 0.75rem; border-radius: calc(var(--radius-md) - 2px); color: var(--muted-foreground); font-size: 0.8125rem; font-weight: 500; cursor: pointer; }
    & input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
    & label:has(:checked) { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-xs); }
    & label:has(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 1px; }
  }
  .mk-sort-control-menu {
    margin: 0;
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--popover);
    color: var(--popover-foreground);
    box-shadow: var(--shadow-lg);
    min-width: 12rem;

    & label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.625rem; border-radius: var(--radius-sm); font-size: 0.875rem; cursor: pointer; }
    & label:hover, & label:has(:focus-visible) { background: var(--accent); }
    & input { position: absolute; opacity: 0; }
    & label::after { content: ""; width: 0.375rem; height: 0.625rem; border-block-end: 2px solid currentColor; border-inline-end: 2px solid currentColor; rotate: 45deg; translate: 0 -0.125rem; opacity: 0; }
    & label:has(:checked)::after { opacity: 1; }
  }
  @supports (position-anchor: --a) {
    .mk-sort-control-menu { inset: auto; margin-block-start: 0.375rem; position-area: bottom span-left; position-try-fallbacks: flip-block; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-sort-control[data-variant="segmented"] label:has(:checked) { outline: 2px solid Highlight; }
  }
}

/* ── components/sortable/sortable.css ── */
@layer components {
  .sortable {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;

    /* Horizontal orientation */
    &[data-orientation="horizontal"] {
      flex-direction: row;
      flex-wrap: wrap;
    }
  }

  .sortable-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--card);
    font-size: 0.875rem;
    color: var(--foreground);
    cursor: grab;
    transition: box-shadow 150ms ease, opacity 150ms ease, border-color 150ms ease;
    user-select: none;

    &:active { cursor: grabbing; }

    /* Keyboard focus (roving tabindex) */
    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    /* Active descendant highlight (keyboard navigation) */
    &[data-active] {
      border-color: var(--ring);
      background-color: var(--accent);
      color: var(--accent-foreground);
    }

    /* Drag in progress */
    &[data-dragging] {
      opacity: 0.5;
      box-shadow: var(--shadow-md);
      border-style: dashed;
    }

    /* Drop target indicator */
    &[data-over="before"] {
      border-top: 2px solid var(--primary);
    }
    &[data-over="after"] {
      border-bottom: 2px solid var(--primary);
    }

    /* Horizontal drop indicators */
    .sortable[data-orientation="horizontal"] &[data-over="before"] {
      border-top: 1px solid var(--border);
      border-inline-start: 2px solid var(--primary);
    }
    .sortable[data-orientation="horizontal"] &[data-over="after"] {
      border-bottom: 1px solid var(--border);
      border-inline-end: 2px solid var(--primary);
    }

    /* Disabled */
    &[aria-disabled="true"] {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }
  }

  .sortable-handle {
    color: var(--muted-foreground);
    cursor: grab;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;

    &:active { cursor: grabbing; }
    & svg { width: 1rem; height: 1rem; }
  }

  /* -- Move buttons: reorder by tap / click --------------------
     Native drag-and-drop mostly never starts on touch screens, so a list
     people must reorder by tapping carries Up / Down buttons per item.
     They sit at the item's end; Up/Down disable at the list's edges. */
  .sortable-moves {
    display: inline-flex;
    gap: 0.25rem;
    flex-shrink: 0;
    margin-inline-start: auto;
  }

  .sortable-move {
    display: inline-grid;
    place-items: center;
    box-sizing: border-box;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--background);
    color: var(--foreground);
    cursor: pointer;
    transition: background-color 150ms, color 150ms;

    & svg { width: 1rem; height: 1rem; }
    &:hover { background: var(--accent); color: var(--accent-foreground); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

    /* legible but inert, like every disabled control (no opacity fade) */
    &:disabled {
      background: var(--muted);
      color: var(--muted-foreground);
      cursor: not-allowed;
    }

    /* a finger needs a bigger target than a pointer (WCAG 2.5.5: 44px) */
    @media (pointer: coarse) {
      width: 2.75rem;
      height: 2.75rem;
    }
  }

  /* -- Connected lists (data-group) ------------------------------
     A list that items can be dragged INTO needs a body even when empty:
     an empty grouped list is a dashed drop zone (its data-empty text, if
     any, says what goes there), and a drag over the list's own box - gap,
     padding, empty zone - marks it as "drop at the end". */
  .sortable[data-group] {
    min-height: 2.75rem;

    &:not(:has(.sortable-item)) {
      align-items: center;
      justify-content: center;
      border: 1px dashed var(--border);
      border-radius: var(--radius-md);
      color: var(--muted-foreground);
      font-size: 0.875rem;

      &::before { content: attr(data-empty); }
    }
  }

  .sortable[data-over="end"] {
    outline: 2px dashed var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-md);
  }

  /* Live region for screen reader announcements */
  .sortable-live {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .sortable-item, .sortable-move { transition: none; }
  }

  @media (prefers-contrast: more) {
    .sortable-item {
      border-width: 2px;
      &[data-active] { outline: 2px solid LinkText; }
      &[data-over="before"] { border-top-width: 3px; }
      &[data-over="after"] { border-bottom-width: 3px; }
    }
  }

  @media (forced-colors: active) {
    .sortable-item {
      border-color: ButtonBorder;
      color: ButtonText;
      background-color: ButtonFace;
      &[data-active] { border-color: Highlight; color: HighlightText; }
      &[data-dragging] { border-color: GrayText; }
      &[data-over="before"] { border-top-color: Highlight; }
      &[data-over="after"] { border-bottom-color: Highlight; }
      &[aria-disabled="true"] { color: GrayText; border-color: GrayText; }
    }
    .sortable-handle { color: GrayText; }
    .sortable-move {
      border-color: ButtonText;
      color: ButtonText;
      &:disabled { border-color: GrayText; color: GrayText; }
    }
    .sortable[data-over="end"] { outline-color: Highlight; }
  }
  /* -- Density ----------------------------------------------------
     data-density on the .sortable root scales the list gap and the item
     padding. comfortable == the unsized default. */
  .sortable:where([data-density="compact"]) {
    gap: 0.125rem;
    & .sortable-item { padding: 0.375rem 0.5rem; }
  }
  .sortable:where([data-density="comfortable"]) {
    gap: 0.25rem;
    & .sortable-item { padding: 0.5rem 0.75rem; }
  }
  .sortable:where([data-density="spacious"]) {
    gap: 0.375rem;
    & .sortable-item { padding: 0.625rem 1rem; }
  }

}

/* ── components/speaker-item/speaker-item.css ── */
/* -- Speaker Item (website · Events & Promotions) -------------------------
   Introduces one speaker with a portrait, role, and biography - with their talk, as a card, a featured keynote or a compact row. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-speaker-item, .mk-speaker-item *, .mk-speaker-item ::before, .mk-speaker-item ::after) { box-sizing: border-box; }

  .mk-speaker-item { display: flex; flex-direction: column; gap: 0.875rem; }
  .mk-speaker-item-photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-xl); background: var(--muted); filter: grayscale(1) contrast(1.05); transition: filter 300ms ease; }
  .mk-speaker-item:hover .mk-speaker-item-photo, .mk-speaker-item:focus-within .mk-speaker-item-photo { filter: none; }
  .mk-speaker-item-body { display: grid; gap: 0.25rem; }
  .mk-speaker-item-name { margin: 0; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
  .mk-speaker-item-role { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; }
  .mk-speaker-item-bio { margin: 0.5rem 0; color: var(--muted-foreground); line-height: 1.65; text-wrap: pretty; }
  .mk-speaker-item-talk { display: inline-flex; align-items: flex-start; gap: 0.375rem; margin-block-start: 0.375rem; color: var(--primary); font-size: 0.875rem; font-weight: 600; text-decoration: none; line-height: 1.4;
    & svg { flex: none; width: 0.875rem; height: 0.875rem; margin-block-start: 0.15rem; }
    &:hover { text-decoration: underline; text-underline-offset: 3px; }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
  }

  .mk-speaker-item[data-variant="featured"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    align-items: center;
    gap: 2rem;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);

    & .mk-speaker-item-photo { aspect-ratio: 4 / 5; filter: none; }
    & .mk-speaker-item-name { font-size: 1.75rem; letter-spacing: -0.02em; }
    & .mk-speaker-item-role { font-size: 1rem; }
  }
  .mk-speaker-item-keynote { width: fit-content; margin-block-end: 0.5rem; padding: 0.125rem 0.625rem; border-radius: 999px; background: var(--foreground); color: var(--background); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

  .mk-speaker-item[data-variant="compact"] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.875rem;

    & .mk-speaker-item-photo { width: 3.5rem; height: 3.5rem; border-radius: 50%; filter: none; }
    & .mk-speaker-item-body { gap: 0; }
    & .mk-speaker-item-name { font-size: 0.9375rem; }
    & .mk-speaker-item-talk { margin: 0.125rem 0 0; font-size: 0.8125rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-speaker-item-photo { transition: none; }
  }

  @media (forced-colors: active) {
    .mk-speaker-item[data-variant="featured"] { border-color: CanvasText; }
  }
}

/* ── components/spinner/spinner.css ── */
@layer components {
  .spinner {
    width: 1rem;
    height: 1rem;
    animation: spinner-rotate 1s linear infinite;
    color: var(--muted-foreground);
    flex-shrink: 0;

    &[data-size="xs"] {
      width: 0.625rem;
      height: 0.625rem;
    }

    &[data-size="sm"] {
      width: 0.875rem;
      height: 0.875rem;
    }

    &[data-size="md"] {
      width: 1.25rem;
      height: 1.25rem;
    }

    &[data-size="lg"] {
      width: 1.5rem;
      height: 1.5rem;
    }

    &[data-size="xl"] {
      width: 2rem;
      height: 2rem;
    }
  }

  @keyframes spinner-rotate {
    to { transform: rotate(360deg); }
  }
}

/* Accessibility: suppress motion for users who request it (REQUIRED for all
   components - AGENTS.md "Accessibility CSS"). Near-zero duration instead of
   `none` keeps transitionend/animationend (and discrete display flips)
   firing so JS state machines that await them keep working. */
@media (prefers-reduced-motion: reduce) {
  @layer components {
    .spinner,
    .spinner *,
    .spinner::before,
    .spinner::after,
    .spinner *::before,
    .spinner *::after,
    .spinner::backdrop {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

/* ── components/statistic/statistic.css ── */
@layer components {
  .statistic {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .statistic-title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--muted-foreground);
    letter-spacing: 0.01em;
  }

  .statistic-value {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--foreground);
  }

  .statistic-description {
    margin: 0;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .statistic-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    font-weight: 500;

    & svg {
      width: 0.75rem;
      height: 0.75rem;
    }

    &[data-trend="up"] {
      color: #16a34a;
    }

    &[data-trend="down"] {
      color: #dc2626;
    }
  }
}

/* ── components/stats/stats.css ── */
/* -- Stats (marketing) ---------------------------------------------
   Headline + rule-led metric grid beside a square photo. Each metric
   uses border-left (source: `border-l pl-6`) and a link-style CTA. */

@layer components {
  .mk-stats {
    /* the section is the query container; a container cannot query itself,
       so the responsive grid lives on the inner layout element */
    container: mk-stats / inline-size;
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
  }

  .mk-stats-layout { display: grid; gap: 2.25rem; }

  .mk-stats-copy { display: flex; flex-direction: column; gap: 3rem; align-self: center; }

  .mk-stats-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    max-width: 48rem;
    text-align: left;
  }

  .mk-stats-title {
    line-height: 1.15;
    margin: 0;
    font-size: 1.875rem;
    font-weight: 500;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  .mk-stats-desc { margin: 0; max-width: 42rem; color: var(--muted-foreground); font-size: 1rem; text-wrap: pretty; }

  .mk-stats-grid { display: grid; gap: 1.25rem; }

  /* each metric gets its own accent from the chart palette - the rule on
     its edge and the trend readout (the theme's chart tokens, so every
     preset recolors it) */
  .mk-stat {
    --_tone: var(--chart-1);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    border-left: 3px solid var(--_tone);
    padding-left: 1.25rem;

    &:nth-child(4n + 2) { --_tone: var(--chart-2); }
    &:nth-child(4n + 3) { --_tone: var(--chart-3); }
    &:nth-child(4n + 4) { --_tone: var(--chart-4); }
  }

  /* a trend chip beside the value - the Statistic component's colors */
  .mk-stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    margin-inline-start: 0.5rem;
    padding: 0.0625rem 0.4375rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    vertical-align: middle;

    &[data-trend="up"] { background: color-mix(in oklch, #16a34a 14%, transparent); color: #16a34a; }
    &[data-trend="down"] { background: color-mix(in oklch, #dc2626 14%, transparent); color: #dc2626; }
    & svg { width: 0.75rem; height: 0.75rem; }
  }

  .mk-stat-value { font-size: 1.875rem; font-weight: 500; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; line-height: 1.1; }

  .mk-stat-label { color: var(--muted-foreground); font-size: 1rem; text-wrap: pretty; }

  /* link CTA flush-left inside the metric (source: `!px-0`) */
  .mk-stats .mk-stat-link {
    height: auto;
    padding-inline: 0;
    margin-block-start: 0.25rem;
  }

  .mk-stats-media {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--muted);
    margin: 0;

    & img { width: 100%; height: 100%; object-fit: cover; display: block; }
  }

  @container mk-stats (min-width: 30rem) {
    .mk-stats-grid { grid-template-columns: 1fr 1fr; }
  }

  @container mk-stats (min-width: 52rem) {
    .mk-stats-layout { grid-template-columns: 1fr 1fr; gap: 4rem; }
    .mk-stats-copy { gap: 4rem; }
    .mk-stats-title { font-size: 2.25rem; }
    .mk-stats-grid { gap: 2.25rem 2.25rem; }
  }

  /* cards: each metric on a card with a sparkline */
  .mk-stats-grid[data-variant="cards"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));

    & .mk-stat {
      padding: 1.25rem;
      border: 1px solid var(--border);
      border-inline-start: 3px solid var(--_tone);
      border-radius: var(--radius-lg);
      background: var(--card);
    }
  }
  .mk-stat-spark {
    width: 100%;
    height: 2.5rem;
    margin-block-start: 0.5rem;
    color: var(--_tone, var(--chart-1));
  }

  /* band: big numbers on a dark band, separated by rules */
  .mk-stats-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    border-radius: var(--radius-xl);
    background: var(--foreground);
    color: var(--background);
    overflow: hidden;

    & .mk-stat {
      align-items: center;
      padding: 2rem 1rem;
      border: 0;
      border-inline-start: 1px solid color-mix(in oklch, var(--background) 15%, transparent);
      text-align: center;

      &:first-child { border-inline-start: 0; }
    }
    & .mk-stat-value { font-size: 2.5rem; font-weight: 700; }
    & .mk-stat-label { color: color-mix(in oklch, var(--background) 70%, transparent); }
  }

  /* rings: percentages as Radial Progress */
  .mk-stats-rings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: 1.5rem;
    justify-items: center;
    text-align: center;

    & .mk-stat { align-items: center; border: 0; padding: 0; gap: 0.5rem; }
  }

  /* -- Accessibility ------------------------------------------- */

  @media (forced-colors: active) {
    .mk-stat { border-left-color: CanvasText; }
  }
}

/* ── components/steps/steps.css ── */
@layer components {
  /* --_accent / --_accent-fg: the color of done (complete) and current steps -
     --primary unless data-variant (on the list, or on one step) picks another */
  .steps { --_accent: var(--primary); --_accent-fg: var(--primary-foreground); display: flex; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
  .step {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; position: relative; text-align: center;
    &:not(:last-child)::after { content: ''; position: absolute; top: 1rem; left: calc(50% + 1.25rem); right: calc(-50% + 1.25rem); height: 2px; background-color: var(--border); }
    &[data-status='complete']::after { background-color: var(--_accent); }
    &[data-status='error']::after { background-color: var(--destructive); }
  }
  .step-indicator {
    display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
    border-radius: 9999px; font-size: 0.75rem; font-weight: 500;
    border: 2px solid var(--border); color: var(--muted-foreground); background-color: var(--background); position: relative; z-index: 1;
    .step[data-status='current'] & { border-color: var(--_accent); color: var(--_accent); }
    .step[data-status='complete'] & { border-color: var(--_accent); background-color: var(--_accent); color: var(--_accent-fg); }
    .step[data-status='error'] & { border-color: var(--destructive); background-color: var(--destructive); color: var(--destructive-foreground); }

    & svg { width: 0.875rem; height: 0.875rem; pointer-events: none; }
    /* a glyph of your own - emoji, symbol, icon - a size up from the number */
    & .step-icon { font-size: 1.5em; line-height: 1; display: grid; place-items: center; }
    & .step-icon svg { width: 1.2em; height: 1.2em; }
  }
  /* data-variant="plain" on the indicator: no circle - just the glyph
     (an emoji step); the status still tints a symbol or icon */
  .steps .step .step-indicator[data-variant='plain'] {
    border-color: transparent;
    background-color: transparent;
    font-size: 1.25rem;
  }
  .steps .step:is([data-status='complete'], [data-status='current']) .step-indicator[data-variant='plain'] { color: var(--_accent); }
  .steps .step[data-status='error'] .step-indicator[data-variant='plain'] { color: var(--destructive); }

  /* -- Colors: data-variant on .steps (every step) or on one .step -------
     secondary / accent use --chart-2 / --chart-4 (the tokens' --secondary /
     --accent are pale surfaces); success / warning / info are literals - the
     token set has no such pairs. */
  :is(.steps, .step)[data-variant='neutral'] { --_accent: var(--foreground); --_accent-fg: var(--background); }
  :is(.steps, .step)[data-variant='primary'] { --_accent: var(--primary); --_accent-fg: var(--primary-foreground); }
  :is(.steps, .step)[data-variant='secondary'] { --_accent: var(--chart-2); --_accent-fg: #fff; }
  :is(.steps, .step)[data-variant='accent'] { --_accent: var(--chart-4); --_accent-fg: #fff; }
  :is(.steps, .step)[data-variant='info'] { --_accent: #0ea5e9; --_accent-fg: #fff; }
  :is(.steps, .step)[data-variant='success'] { --_accent: #16a34a; --_accent-fg: #fff; }
  :is(.steps, .step)[data-variant='warning'] { --_accent: #f59e0b; --_accent-fg: #1c1917; }
  :is(.steps, .step):is([data-variant='destructive'], [data-variant='error']) { --_accent: var(--destructive); --_accent-fg: var(--destructive-foreground); }
  .step-content { display: flex; flex-direction: column; gap: 0.125rem; }
  .step-title { margin: 0; font-size: 0.8125rem; font-weight: 500; color: var(--foreground); }
  .step-description { margin: 0; font-size: 0.75rem; color: var(--muted-foreground); }

  /* -- Clickable steps ---------------------------------------- */
  .step[data-clickable] .step-indicator {
    cursor: pointer;
    &:hover { opacity: 0.85; }
  }

  /* -- Size variants ------------------------------------------
     Five-step ladder (xs–xl). md == the unsized default (2rem indicator),
     so md is selectable everywhere without a visual jump. Connector
     offsets follow the existing pattern per indicator size I: horizontal
     top = I/2, left inset = I/2 + 0.25rem; vertical top = I + 0.25rem,
     left = I/2 - 1px (centers the 2px bar under the indicator). */
  .steps[data-size='xs'] {
    & .step:not(:last-child)::after { top: 0.625rem; left: calc(50% + 0.875rem); right: calc(-50% + 0.875rem); }
    & .step-indicator { width: 1.25rem; height: 1.25rem; font-size: 0.625rem; }
    & .step-indicator svg { width: 0.625rem; height: 0.625rem; }
    & .step-title { font-size: 0.6875rem; }
    & .step-description { font-size: 0.625rem; }
    &[data-orientation='vertical'] .step:not(:last-child)::after { top: 1.5rem; left: 0.5625rem; height: calc(100% - 1.5rem); }
  }

  .steps[data-size='sm'] {
    & .step:not(:last-child)::after { top: 0.75rem; left: calc(50% + 1rem); right: calc(-50% + 1rem); }
    & .step-indicator { width: 1.5rem; height: 1.5rem; font-size: 0.6875rem; }
    & .step-indicator svg { width: 0.75rem; height: 0.75rem; }
    & .step-title { font-size: 0.75rem; }
    & .step-description { font-size: 0.6875rem; }
    &[data-orientation='vertical'] .step:not(:last-child)::after { top: 1.75rem; left: 0.6875rem; height: calc(100% - 1.75rem); }
  }

  .steps[data-size='md'] {
    & .step:not(:last-child)::after { top: 1rem; left: calc(50% + 1.25rem); right: calc(-50% + 1.25rem); }
    & .step-indicator { width: 2rem; height: 2rem; font-size: 0.75rem; }
    & .step-indicator svg { width: 0.875rem; height: 0.875rem; }
    & .step-title { font-size: 0.8125rem; }
    & .step-description { font-size: 0.75rem; }
    &[data-orientation='vertical'] .step:not(:last-child)::after { top: 2.25rem; left: 0.9375rem; height: calc(100% - 2.25rem); }
  }

  .steps[data-size='lg'] {
    & .step:not(:last-child)::after { top: 1.25rem; left: calc(50% + 1.5rem); right: calc(-50% + 1.5rem); }
    & .step-indicator { width: 2.5rem; height: 2.5rem; font-size: 0.875rem; }
    & .step-indicator svg { width: 1rem; height: 1rem; }
    & .step-title { font-size: 0.9375rem; }
    & .step-description { font-size: 0.8125rem; }
    &[data-orientation='vertical'] .step:not(:last-child)::after { top: 2.75rem; left: 1.1875rem; height: calc(100% - 2.75rem); }
  }

  .steps[data-size='xl'] {
    & .step:not(:last-child)::after { top: 1.5rem; left: calc(50% + 1.75rem); right: calc(-50% + 1.75rem); }
    & .step-indicator { width: 3rem; height: 3rem; font-size: 1rem; }
    & .step-indicator svg { width: 1.125rem; height: 1.125rem; }
    & .step-title { font-size: 1.0625rem; }
    & .step-description { font-size: 0.875rem; }
    &[data-orientation='vertical'] .step:not(:last-child)::after { top: 3.25rem; left: 1.4375rem; height: calc(100% - 3.25rem); }
  }

  /* -- Vertical orientation ---------------------------------- */
  .steps[data-orientation="vertical"] {
    flex-direction: column;
    gap: 0;

    & .step {
      flex-direction: row;
      align-items: flex-start;
      text-align: left;
      padding-bottom: 1.5rem;

      &:not(:last-child)::after {
        top: 2.25rem;
        left: 0.9375rem;
        right: auto;
        width: 2px;
        height: calc(100% - 2.25rem);
      }
    }

    & .step-content { padding-top: 0.25rem; }
  }

  /* -- Responsive: data-orientation="responsive" stacks vertically below
     48rem and runs horizontally from there up (DaisyUI's
     steps-vertical lg:steps-horizontal) */
  @media (max-width: 47.99rem) {
    .steps[data-orientation="responsive"] {
      flex-direction: column;
      gap: 0;

      & .step {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        padding-bottom: 1.5rem;

        &:not(:last-child)::after { top: 2.25rem; left: 0.9375rem; right: auto; width: 2px; height: calc(100% - 2.25rem); }
      }

      & .step-content { padding-top: 0.25rem; }
      &[data-size='xs'] .step:not(:last-child)::after { top: 1.5rem; left: 0.5625rem; height: calc(100% - 1.5rem); }
      &[data-size='sm'] .step:not(:last-child)::after { top: 1.75rem; left: 0.6875rem; height: calc(100% - 1.75rem); }
      &[data-size='md'] .step:not(:last-child)::after { top: 2.25rem; left: 0.9375rem; height: calc(100% - 2.25rem); }
      &[data-size='lg'] .step:not(:last-child)::after { top: 2.75rem; left: 1.1875rem; height: calc(100% - 2.75rem); }
      &[data-size='xl'] .step:not(:last-child)::after { top: 3.25rem; left: 1.4375rem; height: calc(100% - 3.25rem); }
    }
  }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    .step-indicator,
    .step:not(:last-child)::after { transition: none; }
  }

  @media (prefers-contrast: more) {
    .step-indicator { border-width: 3px; }
    .step:not(:last-child)::after { height: 3px; }
    .steps[data-orientation="vertical"] .step:not(:last-child)::after { width: 3px; height: calc(100% - 2.25rem); }
  }

  @media (forced-colors: active) {
    .step-indicator {
      border-color: ButtonText;
      .step[data-status='current'] & { border-color: Highlight; color: Highlight; }
      .step[data-status='complete'] & { border-color: Highlight; background: Highlight; color: HighlightText; }
      .step[data-status='error'] & { border-color: Mark; background: Mark; color: MarkText; }
    }
    .step:not(:last-child)::after { background: ButtonText; }
    .step[data-status='complete']:not(:last-child)::after { background: Highlight; }
    .step[data-status='error']:not(:last-child)::after { background: Mark; }
  }
  /* -- Density ----------------------------------------------------
     data-density on the .steps root scales the flex gaps only - the size
     ladder owns indicator/typography, size and density stay independent.
     comfortable == the unsized default (.5rem / .125rem). */
  .steps:where([data-density="compact"]) {
    gap: 0.375rem;
    & .step { gap: 0.375rem; }
    & .step-content { gap: 0.0625rem; }
  }
  .steps:where([data-density="comfortable"]) {
    gap: 0.5rem;
    & .step { gap: 0.5rem; }
    & .step-content { gap: 0.125rem; }
  }
  .steps:where([data-density="spacious"]) {
    gap: 0.75rem;
    & .step { gap: 0.75rem; }
    & .step-content { gap: 0.25rem; }
  }

}

/* ── components/success-state/success-state.css ── */
/* -- Success State (website · Account & States) ---------------------------
   Confirms a completed action and offers relevant next steps - a check with a ripple, what happened, and where to go from here. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-success-state, .mk-success-state *, .mk-success-state ::before, .mk-success-state ::after) { box-sizing: border-box; }

  .mk-success-state { display: grid; justify-items: center; gap: 1rem; width: 100%; max-width: 32rem; margin-inline: auto; padding: 2.5rem 1.5rem; text-align: center; }
  .mk-success-state-icon { position: relative; display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: color-mix(in oklch, #16a34a 14%, transparent); }
  .mk-success-state-icon svg { width: 1.75rem; height: 1.75rem; }
  .mk-success-state-title { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
  .mk-success-state-text { margin: 0; color: var(--muted-foreground); line-height: 1.6; text-wrap: pretty; }
  .mk-success-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-block-start: 0.25rem; }
  .mk-success-state-icon { color: #15803d;
    &::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #16a34a; animation: mk-success-ripple 1.8s ease-out infinite; }
  }
  @keyframes mk-success-ripple { from { opacity: 0.6; scale: 1; } to { opacity: 0; scale: 1.8; } }
  .mk-success-state-summary { display: grid; gap: 0.5rem; width: 100%; max-width: 22rem; margin: 0.25rem 0 0; padding: 1rem; border-radius: var(--radius-lg); background: var(--muted); font-size: 0.875rem; text-align: start;
    & div { display: flex; justify-content: space-between; gap: 1rem; }
    & dt { color: var(--muted-foreground); }
    & dd { margin: 0; font-weight: 500; }
  }
  .mk-success-state[data-variant="compact"] { max-width: 22rem; padding: 1.5rem; border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);
    & .mk-success-state-icon { width: 3rem; height: 3rem; & svg { width: 1.375rem; height: 1.375rem; } }
    & .mk-success-state-title { font-size: 1.0625rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-success-state-icon::after { animation: none; opacity: 0; }
  }

  @media (forced-colors: active) {
    .mk-success-state-icon { border: 1px solid CanvasText; }
  }
}

/* ── components/support-form/support-form.css ── */
/* -- Support Form (website · Account & States) ----------------------------
   Collects an issue description and supporting attachments - topic, subject, description, priority and files, beside the expected response time and self-help links. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-support-form, .mk-support-form *, .mk-support-form ::before, .mk-support-form ::after) { box-sizing: border-box; }

  .mk-support-form { container: mk-support-form / inline-size; width: 100%; }
  .mk-support-form-layout { display: grid; gap: 2rem; }
  .mk-support-form form { display: grid; gap: 1.125rem; }
  .mk-support-form-field { display: grid; gap: 0.375rem; }
  .mk-support-form-priority { display: grid; gap: 0.375rem; margin: 0; padding: 0; border: 0;
    & legend { margin-block-end: 0.375rem; padding: 0; font-size: 0.875rem; font-weight: 500; }
    & div { display: inline-grid; grid-auto-flow: column; width: fit-content; padding: 0.1875rem; border-radius: var(--radius-md); background: var(--muted); }
    & label { position: relative; padding: 0.375rem 0.875rem; border-radius: calc(var(--radius-md) - 2px); color: var(--muted-foreground); font-size: 0.875rem; font-weight: 500; cursor: pointer; }
    & input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
    & label:has(:checked) { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-xs); }
    & label:has(:checked[value="urgent"]) { color: var(--destructive); }
    & label:has(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 1px; }
  }
  .mk-support-form-drop { display: grid; justify-items: center; gap: 0.25rem; padding: 1.25rem; border: 1.5px dashed var(--border); border-radius: var(--radius-lg); color: var(--muted-foreground); font-size: 0.875rem; text-align: center; cursor: pointer;
    & svg { width: 1.25rem; height: 1.25rem; color: var(--foreground); }
    & input { max-width: 100%; font-size: 0.8125rem; }
    &:hover, &:has(input:focus-visible) { border-color: var(--ring); }
  }
  .mk-support-form-aside { display: grid; gap: 1.25rem; align-content: start; padding: 1.5rem; border-radius: var(--radius-xl); background: var(--muted);
    & h2 { margin: 0; font-size: 1rem; font-weight: 600; }
    & p { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; }
    & ul { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
    & a { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--primary); font-size: 0.875rem; font-weight: 500; text-decoration: none; }
    & a svg { width: 0.875rem; height: 0.875rem; }
  }
  .mk-support-form-sla { display: flex; align-items: center; gap: 0.625rem; font-size: 0.875rem;
    & svg { width: 1.25rem; height: 1.25rem; color: #15803d; }
  }

  @container mk-support-form (min-width: 52rem) {
    .mk-support-form-layout { grid-template-columns: minmax(0, 1fr) 18rem; gap: 3rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-support-form-drop { border-color: CanvasText; }
    .mk-support-form-priority label:has(:checked) { outline: 2px solid Highlight; }
  }
}

/* ── components/survey-question/survey-question.css ── */
/* -- Survey Question (website · Account & States) -------------------------
   Presents one question with its response controls - a single choice as cards, several choices, an agreement scale, or a written answer. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-survey-question, .mk-survey-question *, .mk-survey-question ::before, .mk-survey-question ::after) { box-sizing: border-box; }

  .mk-survey-question { display: grid; gap: 1.25rem; width: 100%; max-width: 36rem; padding: 1.75rem; border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);
    & fieldset { display: grid; gap: 0.625rem; margin: 0; padding: 0; border: 0; min-width: 0; }
    & legend { margin-block-end: 0.375rem; padding: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
  }
  .mk-survey-question-meta { display: grid; gap: 0.5rem; color: var(--muted-foreground); font-size: 0.8125rem; font-weight: 500;
    & progress { width: 100%; height: 0.375rem; }
  }
  .mk-survey-question-hint { margin: 0 0 0.375rem; color: var(--muted-foreground); font-size: 0.875rem; }
  .mk-survey-question-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 0.9375rem;
    cursor: pointer;

    & input { flex: none; accent-color: var(--primary); }
    &:hover { border-color: color-mix(in oklch, var(--foreground) 30%, var(--border)); }
    &:has(:checked) { border-color: var(--primary); background: color-mix(in oklch, var(--primary) 6%, transparent); }
  }
  .mk-survey-question-actions { display: flex; justify-content: space-between; gap: 0.5rem; }

  .mk-survey-question[data-variant="scale"] {
    & .mk-survey-question-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.375rem; }
    & .mk-survey-question-option { flex-direction: column; justify-content: center; gap: 0.375rem; padding: 0.75rem 0.25rem; font-size: 0.75rem; line-height: 1.25; text-align: center; }
  }
  .mk-survey-question[data-variant="text"] .textarea { min-height: 6rem; }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-survey-question-option:has(:checked) { border-color: Highlight; }
  }
}

/* ── components/swap/swap.css ── */
/* -- Swap component -------------------------------------------- */

@layer components {
  .swap {
    /* the faces stack in one grid cell, so the box sizes to the widest one
       and no absolute positioning / JS measurement is needed */
    position: relative;
    display: inline-grid;
    place-items: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    color: var(--foreground);
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    /* flip needs depth; harmless for the other variants */
    perspective: 40rem;

    /* the checkbox IS the state — visually hidden but focusable and
       hit-testable across the whole control (no .sr-only dependency) */
    & > input[type="checkbox"] {
      grid-area: 1 / 1;
      appearance: none;
      -webkit-appearance: none;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      opacity: 0;
      cursor: inherit;
    }

    & .swap-on,
    & .swap-off,
    & .swap-indeterminate {
      grid-area: 1 / 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      backface-visibility: hidden;
      transition:
        opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
        rotate 300ms cubic-bezier(0.4, 0, 0.2, 1),
        scale 300ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    & svg:not([class*="size-"]) {
      width: 1.25rem;
      height: 1.25rem;
      flex-shrink: 0;
    }

    /* -- Faces: default (off) ------------------------------- */
    & .swap-off { opacity: 1; }

    /* -- Faces: indeterminate ------------------------------- */
    &:has(> input:indeterminate) {
      & .swap-off { opacity: 0; }
      & .swap-indeterminate { opacity: 1; }
    }

    /* -- Faces: on (checked, or forced via data-active) ------ */
    &:has(> input:checked),
    &[data-active] {
      & .swap-off,
      & .swap-indeterminate { opacity: 0; }
      & .swap-on { opacity: 1; }
    }

    /* -- Variant: rotate ------------------------------------ */
    &[data-variant="rotate"] {
      & .swap-on,
      & .swap-indeterminate { rotate: -45deg; }

      &:has(> input:indeterminate) {
        & .swap-off { rotate: 45deg; }
        & .swap-indeterminate { rotate: 0deg; }
      }

      &:has(> input:checked),
      &[data-active] {
        & .swap-off,
        & .swap-indeterminate { rotate: 45deg; }
        & .swap-on { rotate: 0deg; }
      }
    }

    /* -- Variant: flip -------------------------------------- */
    &[data-variant="flip"] {
      & .swap-on,
      & .swap-indeterminate { rotate: y 180deg; }

      &:has(> input:indeterminate) {
        & .swap-off { rotate: y -180deg; }
        & .swap-indeterminate { rotate: y 0deg; }
      }

      &:has(> input:checked),
      &[data-active] {
        & .swap-off,
        & .swap-indeterminate { rotate: y -180deg; }
        & .swap-on { rotate: y 0deg; }
      }
    }

    /* -- Sizes ---------------------------------------------- */
    &[data-size="sm"] {
      min-width: 2rem;
      min-height: 2rem;
      font-size: 0.75rem;

      & svg:not([class*="size-"]) { width: 1rem; height: 1rem; }
    }

    &[data-size="lg"] {
      min-width: 2.75rem;
      min-height: 2.75rem;
      font-size: 1.125rem;

      & svg:not([class*="size-"]) { width: 1.5rem; height: 1.5rem; }
    }

    /* -- Interaction states --------------------------------- */
    &:hover:not(:has(> input:disabled)) { background-color: var(--accent); color: var(--accent-foreground); }

    &:has(> input:focus-visible) {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    /* a disabled input never toggles - no pointer-events: none, so the
       not-allowed cursor shows */
    &:has(> input:disabled) {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  /* Accessibility: honour a reduced-motion request — the faces still swap,
     they just do not animate (near-zero duration keeps transitionend firing). */
  @media (prefers-reduced-motion: reduce) {
    .swap .swap-on,
    .swap .swap-off,
    .swap .swap-indeterminate {
      transition-duration: 0.01ms !important;
    }
  }

  @media (prefers-contrast: more) {
    .swap {
      border: 2px solid transparent;

      &:has(> input:checked),
      &[data-active] { border-color: currentColor; }
    }
  }

  @media (forced-colors: active) {
    .swap {
      border: 1px solid ButtonText;
      color: ButtonText;
      forced-color-adjust: none;

      &:has(> input:checked),
      &[data-active] {
        background: Highlight;
        color: HighlightText;
      }

      &:has(> input:disabled) { border-color: GrayText; color: GrayText; }
    }
  }
}

/* ── components/switch/switch.css ── */
/* -- Switch component ------------------------------------------- */

@layer components {
  .switch {
    appearance: none;
    margin: 0; /* kill the UA's ~4px input margin - breaks flex/grid rhythm */
    width: 2.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background: var(--input);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background-color 150ms;
    border: none;
    outline: none;

    /* Thumb */
    &::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: calc(1.25rem - 4px);
      height: calc(1.25rem - 4px);
      border-radius: 50%;
      background: var(--background);
      transition: transform 150ms;
      box-shadow: 0 1px 2px oklch(0 0 0 / 0.15);
    }

    &:checked {
      background: var(--primary);

      &::after {
        transform: translateX(1rem);
      }
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    /* Disabled = legible but inert: never an opacity fade (0.5 on a light
       --border edge left a ghost you had to look for). The shape keeps its
       full-strength edge, the surface turns muted, a chosen state keeps a
       softened primary fill, and the label goes muted with the no-entry
       cursor - "a choice that exists but is unavailable right now". */
    &:disabled {
      cursor: not-allowed;
      /* the off track keeps its full --input shade; an edge ring holds the
         outline even where --input sits close to the page */
      box-shadow: inset 0 0 0 1px var(--border);

      &::after {
        background: var(--muted);
        box-shadow: 0 0 0 1px var(--border);
      }

      &:checked {
        background: color-mix(in oklch, var(--primary) 45%, var(--background));
        box-shadow: none;

        &::after { background: var(--background); box-shadow: none; }
      }
    }

    &[aria-invalid="true"] {
      background: var(--destructive);

      &:checked {
        background: var(--destructive);
      }
    }

    /* -- Sizes ----------------------------------------------- */
    &[data-size="xs"] {
      width: 1.5rem;
      height: 0.875rem;

      &::after {
        width: calc(0.875rem - 4px);
        height: calc(0.875rem - 4px);
      }

      &:checked::after {
        transform: translateX(0.625rem);
      }
    }

    &[data-size="sm"] {
      width: 1.75rem;
      height: 1rem;

      &::after {
        width: calc(1rem - 4px);
        height: calc(1rem - 4px);
      }

      &:checked::after {
        transform: translateX(0.75rem);
      }
    }

    &[data-size="md"] {
      /* same as the default - explicit member of the scale */
    }

    &[data-size="lg"] {
      width: 2.75rem;
      height: 1.5rem;

      &::after {
        width: calc(1.5rem - 4px);
        height: calc(1.5rem - 4px);
      }

      &:checked::after {
        transform: translateX(1.25rem);
      }
    }

    &[data-size="xl"] {
      width: 3.25rem;
      height: 1.75rem;

      &::after {
        width: calc(1.75rem - 4px);
        height: calc(1.75rem - 4px);
      }

      &:checked::after {
        transform: translateX(1.5rem);
      }
    }
  }

  /* -- Switch item layout ----------------------------------- */
  .switch-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    & > label {
      font-size: 0.875rem;
      cursor: pointer;
    }
  }

  /* With-description layout: label + description stack beside the switch.
     The switch spans both rows, so grid auto-placement (definite-row items
     first) pins it to column 1 - the track template must therefore lead with
     the auto (switch) track. `1fr auto` here once placed the text in the far
     right track (reported: "description renders on the far right"). */
  .switch-item-block {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 0.75rem;
    align-items: center;

    & > .switch {
      grid-row: 1 / 3;
    }

    & > label {
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
    }

    & > .switch-description {
      font-size: 0.8125rem;
      color: var(--muted-foreground);
      line-height: 1.5;
    }
  }

  /* Gap hit area: inside an item layout the control's click target spans
     the gap to its label (a transparent ::before, part of the input's own
     hit box), so clicking the whitespace between control and text toggles
     too - the label's `for` covers the text itself. Inline-end only: the
     label always sits after the control (block layouts place it in the
     second grid column). */
  :is(.switch-item) > .switch::before {
    content: '';
    position: absolute;
    inset-block: -0.25rem;
    inset-inline: -0.25rem calc(-1 * 0.5rem);
  }

  :is(.switch-item-block) > .switch::before {
    content: '';
    position: absolute;
    inset-block: -0.25rem;
    inset-inline: -0.25rem calc(-1 * 0.75rem);
  }

  /* Label disabled styling via :has() */
  .switch-item:has(.switch:disabled),
  .switch-item-block:has(.switch:disabled) {
    cursor: not-allowed;

    /* the words say "unavailable" too - no hand pointer over a label whose
       click cannot flip the switch */
    & > label {
      color: var(--muted-foreground);
      cursor: not-allowed;
    }
  }

  /* -- Accessibility ---------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .switch,
    .switch::after {
      transition: none;
    }
  }

  @media (forced-colors: active) {
    .switch {
      background: ButtonFace;
      border: 1px solid ButtonText;

      &::after {
        background: ButtonText;
        box-shadow: none;
      }

      &:checked {
        background: Highlight;
        border-color: Highlight;

        &::after {
          background: HighlightText;
        }
      }

      &:disabled {
        border-color: GrayText;

        &::after {
          background: GrayText;
        }
      }
    }
  }
}

/* ── components/table/table.css ── */
@layer components {
  .table-container {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    container-type: inline-size;
  }

  .table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    caption-side: bottom;
  }

  .table-caption {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    text-align: center;
  }

  .table-head {
    padding: 0.75rem 1rem;
    /* explicit: a th's UA default centers unless the table sets a non-initial alignment */
    text-align: start;
    font-weight: 500;
    color: var(--muted-foreground);
    background-color: var(--muted);
    white-space: nowrap;
    border-bottom: 1px solid var(--border);

    &:first-child {
      border-top-left-radius: var(--radius-lg);
    }

    &:last-child {
      border-top-right-radius: var(--radius-lg);
    }
  }

  .table-row {
    border-bottom: 1px solid var(--border);
    transition: background-color 150ms ease;

    &:last-child {
      border-bottom: none;
    }

    tbody &:hover {
      background-color: var(--muted);
    }
  }

  .table-cell {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    color: var(--foreground);

    /* a row header (<th scope="row">) reads like a cell: start-aligned,
       not the UA's centered th */
    &:is(th) { text-align: start; font-weight: 500; }
  }

  tfoot .table-row {
    background-color: var(--muted);
    border-top: 1px solid var(--border);
    font-weight: 500;
  }

  tfoot .table-cell:first-child {
    border-bottom-left-radius: var(--radius-lg);
  }

  tfoot .table-cell:last-child {
    border-bottom-right-radius: var(--radius-lg);
  }

  /* -- Density ----------------------------------------------------
     data-density on the .table root scales cell/head/caption padding.
     Scale matches sizing.css (0.75 / 1 / 1.25): comfortable == the unsized
     default (0.75rem 1rem), compact 0.375rem 0.625rem, spacious 1rem 1.25rem.
     :where() gives these (0,2,0) - an explicit density always beats the
     automatic narrow-container compaction below. */
  .table:where([data-density="compact"]) {
    & .table-head, & .table-cell { padding: 0.375rem 0.625rem; }
    & .table-caption { padding: 0.5rem 0.625rem; }
  }
  .table:where([data-density="comfortable"]) {
    & .table-head, & .table-cell { padding: 0.75rem 1rem; }
    & .table-caption { padding: 0.75rem 1rem; }
  }
  .table:where([data-density="spacious"]) {
    & .table-head, & .table-cell { padding: 1rem 1.25rem; }
    & .table-caption { padding: 1rem 1.25rem; }
  }


  /* -- Alignment: data-align on a th / td (start / center / end);
     data-numeric: end-aligned tabular figures (amounts, counts) ---------- */
  :is(.table-head, .table-cell) {
    &[data-align="start"] { text-align: start; }
    &[data-align="center"] { text-align: center; }
    &[data-align="end"] { text-align: end; }
    &[data-numeric] { text-align: end; font-variant-numeric: tabular-nums; }
    &[data-valign="top"] { vertical-align: top; }
    &[data-nowrap] { white-space: nowrap; }
  }
  .table { text-align: start; }

  /* -- Sorting: a .table-sort button in the header; aria-sort on the th
     (ascending / descending) draws the arrow, table.js sorts the rows ---- */
  .table-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: -0.25rem -0.5rem;
    padding: 0.25rem 0.5rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;

    &:hover { color: var(--foreground); background-color: color-mix(in oklch, var(--foreground) 6%, transparent); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
    /* the arrow: both halves muted while unsorted, one strong when sorted */
    &::after {
      content: '';
      width: 0.5rem;
      height: 0.75rem;
      flex-shrink: 0;
      background:
        conic-gradient(from 150deg at 50% 0, currentColor 60deg, transparent 0) top / 100% 40% no-repeat,
        conic-gradient(from -30deg at 50% 100%, currentColor 60deg, transparent 0) bottom / 100% 40% no-repeat;
      opacity: 0.35;
    }
    [data-align="end"] > &, [data-numeric] > & { flex-direction: row-reverse; }
  }
  .table-head[aria-sort="ascending"] .table-sort::after {
    opacity: 1;
    background: conic-gradient(from 150deg at 50% 0, currentColor 60deg, transparent 0) center / 100% 50% no-repeat;
  }
  .table-head[aria-sort="descending"] .table-sort::after {
    opacity: 1;
    background: conic-gradient(from -30deg at 50% 100%, currentColor 60deg, transparent 0) center / 100% 50% no-repeat;
  }
  .table-head[aria-sort]:not([aria-sort="none"]) { color: var(--foreground); }

  /* -- Selection: a leading .table-select cell with a checkbox (the header
     one selects all); a selected row is tinted -------------------------- */
  .table-select {
    width: 1%;
    padding-inline-end: 0 !important;

    & .checkbox { vertical-align: middle; }
  }
  .table-row[aria-selected="true"] {
    background-color: color-mix(in oklch, var(--primary) 7%, transparent);

    tbody &:hover { background-color: color-mix(in oklch, var(--primary) 11%, transparent); }
  }

  /* -- Reordering: a .table-handle cell with a grip button; the row being
     dragged fades, a line shows where it lands -------------------------- */
  .table-handle {
    width: 1%;
    padding-inline-end: 0 !important;
    color: var(--muted-foreground);

    & button {
      display: inline-grid;
      place-items: center;
      width: 1.5rem;
      height: 1.5rem;
      padding: 0;
      border: 0;
      border-radius: var(--radius-sm);
      background: none;
      color: inherit;
      cursor: grab;

      &:hover { color: var(--foreground); background-color: var(--accent); }
      &:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
      & svg { width: 1rem; height: 1rem; }
    }
  }
  .table-row[data-dragging] { opacity: 0.4; }
  .table-row[data-drop="before"] { box-shadow: inset 0 2px 0 var(--primary); }
  .table-row[data-drop="after"] { box-shadow: inset 0 -2px 0 var(--primary); }

  /* -- Locked columns + sticky header --------------------------------------
     data-lock-start="1|2|3" on the .table keeps the first columns in view
     while the .table-container scrolls sideways (table.js measures their
     offsets into --table-lock-1 / -2); data-lock-end="1" the last column.
     data-sticky-header keeps the header row while the container scrolls
     vertically (give the container a max-height). */
  .table[data-lock-start] :is(.table-head, .table-cell),
  .table[data-lock-end] :is(.table-head, .table-cell) { background-clip: padding-box; }
  .table[data-lock-start] :is(tr > :nth-child(1)),
  .table:is([data-lock-start="2"], [data-lock-start="3"]) :is(tr > :nth-child(2)),
  .table[data-lock-start="3"] :is(tr > :nth-child(3)),
  .table[data-lock-end] :is(tr > :last-child) {
    position: sticky;
    z-index: 1;
    background-color: var(--_lock-bg, var(--background));
  }
  .table[data-lock-start] tr > :nth-child(1) { inset-inline-start: 0; }
  .table:is([data-lock-start="2"], [data-lock-start="3"]) tr > :nth-child(2) { inset-inline-start: var(--table-lock-1, 0px); }
  .table[data-lock-start="3"] tr > :nth-child(3) { inset-inline-start: calc(var(--table-lock-1, 0px) + var(--table-lock-2, 0px)); }
  .table[data-lock-end] tr > :last-child { inset-inline-end: 0; }
  .table thead .table-head { --_lock-bg: var(--muted); }
  .table tfoot .table-cell { --_lock-bg: var(--muted); }
  /* the edge of the locked block casts a hairline */
  .table[data-lock-start="1"] tr > :nth-child(1),
  .table[data-lock-start="2"] tr > :nth-child(2),
  .table[data-lock-start="3"] tr > :nth-child(3) { box-shadow: inset -1px 0 0 var(--border); }
  .table[data-lock-end] tr > :last-child { box-shadow: inset 1px 0 0 var(--border); }
  .table-row:hover > :is(.table-cell) { --_lock-bg: color-mix(in oklch, var(--muted) 100%, var(--background)); }
  .table-row[aria-selected="true"] > .table-cell { --_lock-bg: color-mix(in oklch, var(--primary) 7%, var(--background)); }

  .table[data-sticky-header] thead .table-head {
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .table-container:has(> .table[data-sticky-header]) { overflow: auto; }

  /* -- Actions: a .table-actions cell of buttons, end-aligned - always
     visible. data-actions="quiet" on the table dims them until the row is
     hovered or focused (touch screens: full strength). On a narrow table
     (container < 40rem) the inline buttons (.table-actions-inline) give way
     to one "more" button (.table-actions-menu) opening a native popover
     menu (.table-menu) - one menu in the row, no JavaScript. Touch screens
     get 44px targets. */
  .table-actions {
    width: 1%;
    white-space: nowrap;
    text-align: end;

    & > * + *,
    & .table-actions-inline > * + * { margin-inline-start: 0.25rem; }
  }
  .table-actions-inline { display: inline-flex; align-items: center; }
  .table-actions-menu { display: none; }
  .table[data-actions="quiet"] :is(.table-actions > .btn, .table-actions-inline, .table-actions-menu > .btn) {
    opacity: 0.45;
    transition: opacity 150ms ease;
  }
  .table[data-actions="quiet"] .table-row:is(:hover, :focus-within) :is(.table-actions > .btn, .table-actions-inline, .table-actions-menu > .btn) { opacity: 1; }
  @media (hover: none) {
    .table[data-actions="quiet"] :is(.table-actions > .btn, .table-actions-inline, .table-actions-menu > .btn) { opacity: 1; }
  }
  @media (pointer: coarse) {
    .table-actions .btn[data-size^="icon"] { min-width: 2.75rem; min-height: 2.75rem; }
  }
  @container (max-width: 40rem) {
    .table-actions:has(.table-actions-menu) .table-actions-inline { display: none; }
    .table-actions-menu { display: inline-flex; }
  }

  /* the row menu: a popover anchored to its own "more" button */
  .table-row { anchor-scope: --table-row-menu; }
  .table-actions-menu > .btn { anchor-name: --table-row-menu; }
  .table-menu[popover] {
    position: fixed;
    position-anchor: --table-row-menu;
    inset: auto;
    top: anchor(bottom);
    right: anchor(right);
    position-try-fallbacks: flip-block;
    margin: 0.25rem 0 0;
    min-width: 10rem;
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--popover);
    color: var(--popover-foreground);
    box-shadow: var(--shadow-lg);
    text-align: start;

    &:popover-open { display: grid; gap: 0.125rem; }
  }
  .table-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.25rem;
    padding: 0.375rem 0.625rem;
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
    text-align: start;
    text-decoration: none;
    cursor: pointer;

    &:hover, &:focus-visible { background-color: var(--accent); color: var(--accent-foreground); outline: none; }
    &[data-tone="destructive"] { color: var(--destructive); }
    & svg { width: 1rem; height: 1rem; }
  }
  @media (pointer: coarse) {
    .table-menu-item { min-height: 2.75rem; }
  }


  /* -- Empty state: one .table-empty cell spanning the columns ----------- */
  .table-empty {
    padding: 2.5rem 1rem !important;
    text-align: center;
    color: var(--muted-foreground);

    & > * { display: block; margin-inline: auto; }
    & > * + * { margin-top: 0.375rem; }
    & > strong { color: var(--foreground); font-weight: 600; }
    & > .btn { display: inline-flex; margin-top: 1rem; }
  }
  .table-empty-icon {
    display: grid !important;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0.5rem;
    border-radius: 9999px;
    background-color: var(--muted);
    color: var(--muted-foreground);

    & svg { width: 1.25rem; height: 1.25rem; }
  }
  tbody .table-row:has(> .table-empty):hover { background-color: transparent; }
  /* a dropdown button straight in the actions cell anchors its .table-menu too */
  .table-actions > .btn[popovertarget] { anchor-name: --table-row-menu; }

  /* -- Text in cells ------------------------------------------------------- */
  .table-sub {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
  }
  .table-truncate {
    display: block;
    max-width: var(--table-truncate, 14rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .table-clamp {
    display: -webkit-box;
    max-width: var(--table-clamp, 20rem);
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .table-mono {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    white-space: nowrap;
  }
  .table-muted { color: var(--muted-foreground); }

  /* -- Container query: compact table in narrow containers -- */
  @container (max-width: 480px) {
    .table-head,
    .table-cell { padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
  }
}

/* Accessibility: suppress motion for users who request it (REQUIRED for all
   components - AGENTS.md "Accessibility CSS"). Near-zero duration instead of
   `none` keeps transitionend/animationend (and discrete display flips)
   firing so JS state machines that await them keep working. */
@media (prefers-reduced-motion: reduce) {
  @layer components {
    .table,
    .table *,
    .table::before,
    .table::after,
    .table *::before,
    .table *::after,
    .table::backdrop,
    .table-caption,
    .table-caption *,
    .table-caption::before,
    .table-caption::after,
    .table-caption *::before,
    .table-caption *::after,
    .table-caption::backdrop,
    .table-cell,
    .table-cell *,
    .table-cell::before,
    .table-cell::after,
    .table-cell *::before,
    .table-cell *::after,
    .table-cell::backdrop,
    .table-container,
    .table-container *,
    .table-container::before,
    .table-container::after,
    .table-container *::before,
    .table-container *::after,
    .table-container::backdrop,
    .table-head,
    .table-head *,
    .table-head::before,
    .table-head::after,
    .table-head *::before,
    .table-head *::after,
    .table-head::backdrop,
    .table-row,
    .table-row *,
    .table-row::before,
    .table-row::after,
    .table-row *::before,
    .table-row *::after,
    .table-row::backdrop {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

/* ── components/tabs/tabs.css ── */
/* -- Tabs component -------------------------------------------- */

@layer components {
  /* -- Default (pill) variant ----------------------------------- */
  /* An inline GRID, one minmax(0, max-content) track per tab: when the row
     is too narrow, every track grows from 0 at the same pace, so short labels
     reach their full width first and only the long ones are cut ("…") -
     flex-shrink would clip a short "Churn" as eagerly as a long label. */
  .tab-list {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, max-content);
    align-items: center;
    /* never wider than its container: the triggers shrink and ellipsize */
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: var(--muted);
    border-radius: var(--radius-lg);
    padding: 0.25rem;
    gap: 0.125rem;

    /* -- Sizes: trigger font + padding scale (set data-size on .tab-list).
       :where() keeps these at one class of specificity over the plain
       .tab-trigger base. md == each variant's own base padding, so md is
       selectable everywhere without a visual change. Paddings are logical
       (block / inline), so they turn with the vertical labels of side tabs.
       The line variant's trigger base (0.5rem/1rem, nested in
       [data-variant="line"]) outranks the :where() rules, so its overrides
       are un-:where()'d (two attrs). */
    &:where([data-size="xs"]) .tab-trigger { padding-block: 0.25rem; padding-inline: 0.5rem;    font-size: 0.75rem; }
    &:where([data-size="sm"]) .tab-trigger { padding-block: 0.3125rem; padding-inline: 0.625rem; font-size: 0.8125rem; }
    &:where([data-size="md"]) .tab-trigger { padding-block: 0.375rem; padding-inline: 0.75rem;   font-size: 0.875rem; }
    &:where([data-size="lg"]) .tab-trigger { padding-block: 0.5rem; padding-inline: 1rem;       font-size: 1rem; }
    &:where([data-size="xl"]) .tab-trigger { padding-block: 0.625rem; padding-inline: 1.25rem;  font-size: 1.125rem; }
    &[data-variant="line"][data-size="xs"] .tab-trigger { padding-block: 0.25rem; padding-inline: 0.5rem; }
    &[data-variant="line"][data-size="sm"] .tab-trigger { padding-block: 0.375rem; padding-inline: 0.75rem; }
    &[data-variant="line"][data-size="md"] .tab-trigger { padding-block: 0.5rem; padding-inline: 1rem; }
    &[data-variant="line"][data-size="lg"] .tab-trigger { padding-block: 0.625rem; padding-inline: 1.25rem; }
    &[data-variant="line"][data-size="xl"] .tab-trigger { padding-block: 0.75rem; padding-inline: 1.5rem; }

    /* -- Line variant --------------------------------------------- */
    &[data-variant="line"] {
      background: transparent;
      border-radius: 0;
      padding: 0;
      gap: 0;
      border-bottom: 1px solid var(--border);

      & .tab-trigger {
        border-radius: 0;
        padding-block: 0.5rem;
        padding-inline: 1rem;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;

        &[aria-selected="true"] {
          background: transparent;
          color: var(--foreground);
          border-bottom-color: var(--primary);
          box-shadow: none;
        }
      }
    }

    /* -- Vertical orientation ------------------------------------ */
    &[aria-orientation="vertical"] {
      grid-auto-flow: row;
      grid-auto-rows: minmax(0, max-content);
      grid-auto-columns: auto;
      align-items: stretch;
      width: auto;

      & .tab-trigger { text-align: start; }
    }
  }

  /* A trigger is a BLOCK box (not inline-flex): text-overflow only works on
     a block container's own line, and a flex container would wrap a bare
     label in an anonymous box that never ellipsizes. Icons and emoji ride
     inline in front of the label - svg / img / .tab-icon - so plain
     <button>Label</button> markup keeps working and a long label ends in "…"
     when the list runs out of room (horizontal and vertical alike). */
  .tab-trigger {
    display: block;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    line-height: 1.25rem;
    padding-block: 0.375rem;
    padding-inline: 0.75rem;
    border-radius: calc(var(--radius) * 0.6);
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: all 150ms ease;
    outline: none;

    & :is(svg, img, .tab-icon) {
      display: inline-block;
      vertical-align: middle;
      margin-inline-end: 0.5em;
      line-height: 1;
    }
    & :is(svg, img) {
      inline-size: 1em;
      block-size: 1em;
      translate: 0 -0.0625em;
    }

    &[aria-selected="true"] {
      background: var(--background);
      color: var(--foreground);
      box-shadow: 0 1px 3px oklch(0 0 0 / 0.08), 0 0 0 1px var(--border);
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }

  /* -- Layout: which side of the panel the tabs sit on ---------
     data-side="top|bottom|left|right" on .tabs (default top; a vertical
     tablist without data-side keeps the old settings-nav layout) and
     data-align="start|center|end" for where the tabs cluster along that
     edge (top/bottom: start = left; left/right: start = top). The DOM order
     never changes - tablist first - only the visual side. :where() keeps the
     side selectors at zero specificity, so variants override them cleanly. */
  .tabs {
    display: flex;
    flex-direction: column;
    min-width: 0;

    & > .tab-list { align-self: flex-start; }
    &[data-align="center"] > .tab-list { align-self: center; }
    &[data-align="end"] > .tab-list { align-self: flex-end; }

    &:where([data-side="bottom"]) {
      & > .tab-list { order: 2; }
      & > .tab-content { margin-top: 0; margin-bottom: 0.75rem; }
    }

    /* the older aria-orientation-only markup: a settings nav beside the
       panel, horizontal labels (ellipsized past 40% of the width) */
    &:where(:not([data-side]):has(> .tab-list[aria-orientation="vertical"])) {
      flex-direction: row;
      align-items: flex-start;
      gap: 1rem;

      & > .tab-list { max-width: 40%; }
      & > .tab-content { margin: 0; flex: 1; min-width: 0; }
      &:dir(rtl) { flex-direction: row-reverse; }
    }

    /* data-side left / right: a two-column grid. The tab column has
       height 0 + min-height 100% - it adds nothing to the row, so the PANEL
       decides the height and the column fills it: when the labels need more
       room than the panel is tall, they shrink and ellipsize. left / right
       are physical sides, also in RTL. */
    &:where([data-side="left"], [data-side="right"]) {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas: "list panel";
      column-gap: 1rem;

      & > .tab-list {
        grid-area: list;
        grid-auto-flow: row;
        grid-auto-rows: minmax(0, max-content);
        grid-auto-columns: auto;
        align-items: stretch;
        align-self: stretch;
        align-content: start;
        height: 0;
        min-height: 100%;
        max-width: none;
      }
      &[data-align="center"] > .tab-list { align-content: center; }
      &[data-align="end"] > .tab-list { align-content: end; }
      & > .tab-content { grid-area: panel; margin: 0; min-width: 0; }

      /* the labels run vertically along the panel edge - right-hand tabs
         read top to bottom, left-hand ones bottom to top (like book spines;
         sideways-lr where supported, else top to bottom too). The logical
         trigger paddings turn with the writing mode, and icons and emoji
         turn with the label: text-orientation: sideways lays emoji on
         their side like any other glyph, and svg / img (which a vertical
         line would keep upright) rotate a quarter turn. */
      & > .tab-list .tab-trigger {
        writing-mode: vertical-rl;
        text-orientation: sideways;
        text-align: center;

        & :is(svg, img) { rotate: 90deg; }
      }
    }
    &:where([data-side="right"]) {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "panel list";
    }
    &:where([data-side="left"]):dir(rtl) {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "panel list";
    }
    &:where([data-side="right"]):dir(rtl) {
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas: "list panel";
    }
    @supports (writing-mode: sideways-lr) {
      /* sideways-lr lays emoji on their side, but svg / img keep their
         orientation: a quarter turn back, so they point up the line */
      &:where([data-side="left"]) > .tab-list .tab-trigger {
        writing-mode: sideways-lr;

        & :is(svg, img) { rotate: -90deg; }
      }
    }
  }

  /* line variant: the rule sits on the edge that faces the panel (physical
     sides for left / right - the trigger's own writing mode is vertical, so
     its logical inline-end would point down) */
  .tabs[data-side="bottom"] > .tab-list[data-variant="line"] {
    border-bottom: none;
    border-top: 1px solid var(--border);

    & .tab-trigger {
      border-bottom: none;
      border-top: 2px solid transparent;
      margin-bottom: 0;
      margin-top: -1px;

      &[aria-selected="true"] { border-top-color: var(--primary); }
    }
  }
  .tabs:is([data-side="left"], [data-side="right"], :not([data-side]):has(> .tab-list[aria-orientation="vertical"])) > .tab-list[data-variant="line"] {
    border-bottom: none;

    & .tab-trigger { border-bottom: none; margin-bottom: 0; }
  }
  .tabs:is([data-side="left"], :not([data-side]):has(> .tab-list[aria-orientation="vertical"])) > .tab-list[data-variant="line"] {
    border-right: 1px solid var(--border);

    & .tab-trigger {
      border-right: 2px solid transparent;
      margin-right: -1px;

      &[aria-selected="true"] { border-right-color: var(--primary); }
    }
  }
  .tabs[data-side="right"] > .tab-list[data-variant="line"] {
    border-left: 1px solid var(--border);

    & .tab-trigger {
      border-left: 2px solid transparent;
      margin-left: -1px;

      &[aria-selected="true"] { border-left-color: var(--primary); }
    }
  }

  /* -- Attached variant: folder tabs joined to the panel's card --
     data-variant="attached" on the .tab-list; each panel holds a .card.
     The selected tab takes the card surface and covers the card's border
     where they meet, so tab and card read as one shape. The card corner the
     tabs grow from is squared; every ROUNDED corner keeps the tabs a card
     radius (--radius-xl) away, so no tab ever sits on a curve - start keeps
     the far end clear, end the near one, center both. */
  .tab-list[data-variant="attached"] {
    background: transparent;
    border-radius: 0;
    padding: 0;
    gap: 0.25rem;
    position: relative;
    z-index: 1;

    & .tab-trigger {
      border: 1px solid var(--border);
      background: var(--muted);
      box-shadow: none;
      border-radius: var(--radius-md) var(--radius-md) 0 0;

      &[aria-selected="true"] {
        background: var(--card);
        color: var(--card-foreground);
        box-shadow: none;
        border-bottom-color: var(--card);
      }
    }
  }
  .tabs:has(> .tab-list[data-variant="attached"]) {
    gap: 0;
    column-gap: 0;

    & > .tab-content { margin: 0; }

    /* top (default) / bottom: the tabs overlap the card border by 1px and
       stay clear of the rounded corner(s) along the row */
    & > .tab-list[data-variant="attached"] {
      margin-bottom: -1px;
      margin-inline-end: var(--radius-xl);
      max-width: calc(100% - var(--radius-xl));
    }
    &[data-align="end"] > .tab-list[data-variant="attached"] {
      margin-inline: var(--radius-xl) 0;
    }
    &[data-align="center"] > .tab-list[data-variant="attached"] {
      margin-inline: var(--radius-xl);
      max-width: calc(100% - 2 * var(--radius-xl));
    }

    &[data-side="bottom"] > .tab-list[data-variant="attached"] {
      margin-top: -1px;
      margin-bottom: 0;

      & .tab-trigger {
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        &[aria-selected="true"] { border-bottom-color: var(--border); border-top-color: var(--card); }
      }
    }

    /* left / right (and the legacy column): the gap runs down the column */
    &:is([data-side="left"], [data-side="right"], :not([data-side]):has(> .tab-list[aria-orientation="vertical"])) {
      & > .tab-list[data-variant="attached"] {
        margin-block: 0;
        margin-inline: 0;
        max-width: none;
        grid-auto-flow: row;
        grid-auto-rows: minmax(0, max-content);
        grid-auto-columns: auto;
        padding-bottom: var(--radius-xl);

        & .tab-trigger { width: 100%; }
      }
      &[data-align="end"] > .tab-list[data-variant="attached"] { padding-block: var(--radius-xl) 0; }
      &[data-align="center"] > .tab-list[data-variant="attached"] { padding-block: var(--radius-xl); }
    }
    /* legacy column (a flex row): the card grows to the column's height */
    &:not([data-side]):has(> .tab-list[aria-orientation="vertical"]) {
      & > .tab-list[data-variant="attached"] { max-width: 40%; }
      & > .tab-content:not([hidden]) {
        align-self: stretch;
        display: flex;
        flex-direction: column;

        & > .card { flex: 1; }
      }
    }
    &:is([data-side="left"], :not([data-side]):has(> .tab-list[aria-orientation="vertical"])) > .tab-list[data-variant="attached"] {
      margin-right: -1px;

      & .tab-trigger {
        border-radius: var(--radius-md) 0 0 var(--radius-md);
        &[aria-selected="true"] { border-bottom-color: var(--border); border-right-color: var(--card); }
      }
    }
    &[data-side="right"] > .tab-list[data-variant="attached"] {
      margin-left: -1px;

      & .tab-trigger {
        border-radius: 0 var(--radius-md) var(--radius-md) 0;
        &[aria-selected="true"] { border-bottom-color: var(--border); border-left-color: var(--card); }
      }
    }

    /* the card corner the aligned tabs grow from is square */
    &:not([data-side]):not(:has(> .tab-list[aria-orientation="vertical"])):not([data-align="center"]):not([data-align="end"]) > .tab-content > .card { border-start-start-radius: 0; }
    &:not([data-side]):not(:has(> .tab-list[aria-orientation="vertical"]))[data-align="end"] > .tab-content > .card { border-start-end-radius: 0; }
    &[data-side="top"]:not([data-align="center"]):not([data-align="end"]) > .tab-content > .card { border-start-start-radius: 0; }
    &[data-side="top"][data-align="end"] > .tab-content > .card { border-start-end-radius: 0; }
    &[data-side="bottom"]:not([data-align="center"]):not([data-align="end"]) > .tab-content > .card { border-end-start-radius: 0; }
    &[data-side="bottom"][data-align="end"] > .tab-content > .card { border-end-end-radius: 0; }
    &:is([data-side="left"], :not([data-side]):has(> .tab-list[aria-orientation="vertical"])):not([data-align="center"]):not([data-align="end"]) > .tab-content > .card { border-top-left-radius: 0; }
    &:is([data-side="left"], :not([data-side]):has(> .tab-list[aria-orientation="vertical"]))[data-align="end"] > .tab-content > .card { border-bottom-left-radius: 0; }
    &[data-side="right"]:not([data-align="center"]):not([data-align="end"]) > .tab-content > .card { border-top-right-radius: 0; }
    &[data-side="right"][data-align="end"] > .tab-content > .card { border-bottom-right-radius: 0; }
  }

  /* -- Panel ---------------------------------------------------- */
  .tab-content {
    margin-top: 0.75rem;

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    &[hidden] { display: none; }
  }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    .tab-trigger { transition: none; }
  }

  @media (forced-colors: active) {
    .tab-trigger[aria-selected="true"] {
      border: 2px solid Highlight;
      box-shadow: none;
    }
    .tab-trigger:disabled { color: GrayText; }

    .tab-list[data-variant="line"] .tab-trigger[aria-selected="true"] {
      border: none;
      border-bottom: 2px solid Highlight;
    }
  }
}

/* ── components/tag-cloud/tag-cloud.css ── */
/* -- Tag Cloud (website · Search & Navigation) ----------------------------
   Displays linked tags with optional frequency-based emphasis - five weights from data-weight, or even pills with counts. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-tag-cloud, .mk-tag-cloud *, .mk-tag-cloud ::before, .mk-tag-cloud ::after) { box-sizing: border-box; }

  .mk-tag-cloud { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem 0.875rem; max-width: 32rem; margin: 0; padding: 0; list-style: none;
    & a { color: var(--muted-foreground); text-decoration: none; line-height: 1.2; }
    & a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
    & a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
    & a[data-weight="1"] { font-size: 0.8125rem; opacity: 0.8; }
    & a[data-weight="2"] { font-size: 0.9375rem; }
    & a[data-weight="3"] { font-size: 1.125rem; color: var(--foreground); }
    & a[data-weight="4"] { font-size: 1.375rem; color: var(--foreground); font-weight: 600; }
    & a[data-weight="5"] { font-size: 1.75rem; color: var(--foreground); font-weight: 700; letter-spacing: -0.02em; }
  }
  .mk-tag-cloud[data-variant="pills"] { gap: 0.5rem; align-items: center;
    & a { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.375rem 0.25rem 0.75rem; border: 1px solid var(--border); border-radius: 999px; color: var(--foreground); font-size: 0.8125rem; font-weight: 500; opacity: 1; letter-spacing: 0; }
    & a:hover { border-color: var(--primary); text-decoration: none; }
    & small { padding: 0.0625rem 0.375rem; border-radius: 999px; background: var(--muted); color: var(--muted-foreground); font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-tag-cloud a { color: LinkText; }
  }
}

/* ── components/tag-list/tag-list.css ── */
/* -- Tag List (website · Search & Navigation) -----------------------------
   Displays the tags associated with a content item - outlined chips, plain hashtags, or colored labels. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-tag-list, .mk-tag-list *, .mk-tag-list ::before, .mk-tag-list ::after) { box-sizing: border-box; }

  .mk-tag-list { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none;
    & a { display: inline-flex; align-items: center; height: 1.5rem; padding-inline: 0.625rem; border: 1px solid var(--border); border-radius: 999px; color: var(--foreground); font-size: 0.75rem; font-weight: 500; text-decoration: none; }
    & a:hover { border-color: color-mix(in oklch, var(--foreground) 40%, var(--border)); }
    & a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  }
  .mk-tag-list[data-variant="plain"] { gap: 0.25rem 0.75rem;
    & a { height: auto; padding: 0; border: 0; color: var(--primary); font-size: 0.875rem; }
    & a::before { content: "#" / ""; opacity: 0.6; }
    & a:hover { text-decoration: underline; text-underline-offset: 3px; }
  }
  .mk-tag-list[data-variant="colored"] a {
    --mk-tag-color: var(--muted-foreground);

    border-color: transparent;
    border-radius: var(--radius-sm);
    background: color-mix(in oklch, var(--mk-tag-color) 14%, transparent);
    color: color-mix(in oklab, var(--mk-tag-color) 75%, var(--foreground));
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-tag-list a { border: 1px solid LinkText; }
  }
}

/* ── components/team-member/team-member.css ── */
/* -- Team Member (website · Company) --------------------------------------
   Presents one person with a portrait, role, and biography - a portrait card whose links slide in on hover, a profile beside its bio, or a compact row for long lists. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-team-member, .mk-team-member *, .mk-team-member ::before, .mk-team-member ::after) { box-sizing: border-box; }

  .mk-team-member { display: flex; flex-direction: column; gap: 0.875rem; }
  .mk-team-member-portrait { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-xl); background: var(--muted);
    &::after { content: ""; position: absolute; inset: 40% 0 0; z-index: 0; background: linear-gradient(transparent, oklch(0.12 0.02 260 / 0.65)); opacity: 0; transition: opacity 300ms ease; pointer-events: none; }
  }
  .mk-team-member-photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: scale 600ms cubic-bezier(.2,.7,.2,1); }
  .mk-team-member:is(:hover, :focus-within) .mk-team-member-photo { scale: 1.05; }
  .mk-team-member:is(:hover, :focus-within) .mk-team-member-portrait::after { opacity: 1; }
  .mk-team-member-tag {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.5rem 0.1875rem 0.375rem;
    border-radius: 999px;
    background: color-mix(in oklch, var(--background) 82%, transparent);
    color: var(--foreground);
    font-size: 0.75rem;
    font-weight: 600;
    backdrop-filter: blur(8px);

    & svg { width: 0.75rem; height: 0.75rem; }
  }
  .mk-team-member-links {
    position: absolute;
    inset: auto 0.75rem 0.75rem;
    z-index: 1;
    display: flex;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
    opacity: 0;
    translate: 0 0.75rem;
    transition: opacity 250ms ease, translate 250ms ease;

    & a { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: oklch(1 0 0 / 0.92); color: oklch(0.2 0 0); box-shadow: var(--shadow-sm); transition: background-color 150ms ease, color 150ms ease; }
    & a:hover { background: var(--primary); color: var(--primary-foreground); }
    & a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    & svg { width: 1rem; height: 1rem; }
  }
  .mk-team-member:is(:hover, :focus-within) .mk-team-member-links { opacity: 1; translate: 0 0; }
  @media (hover: none) {
    .mk-team-member-links { opacity: 1; translate: 0 0; }
    .mk-team-member-portrait::after { opacity: 1; }
  }
  .mk-team-member-body { display: grid; gap: 0.125rem; }
  .mk-team-member-name { margin: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
  .mk-team-member-role { margin: 0; color: var(--primary); font-size: 0.875rem; font-weight: 500; }
  .mk-team-member-bio { margin: 0.5rem 0 0; color: var(--muted-foreground); font-size: 0.9375rem; line-height: 1.6; text-wrap: pretty; }

  .mk-team-member[data-variant="horizontal"] {
    display: grid;
    grid-template-columns: minmax(8rem, 40%) minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);

    & .mk-team-member-photo { aspect-ratio: 1; }
    & .mk-team-member-links { opacity: 1; translate: 0 0; inset: auto 0.5rem 0.5rem; gap: 0.25rem; }
    & .mk-team-member-links a { width: 2rem; height: 2rem; }
    & .mk-team-member-portrait::after { opacity: 1; }
    & .mk-team-member-name { font-size: 1.25rem; }
  }

  .mk-team-member[data-variant="compact"] {
    flex-direction: row;
    align-items: center;
    gap: 0.875rem;

    & .mk-team-member-portrait { flex: none; width: 3rem; height: 3rem; border-radius: 50%; box-shadow: 0 0 0 2px var(--background), 0 0 0 3px var(--border); }
    & .mk-team-member-photo { height: 100%; aspect-ratio: 1; }
    & .mk-team-member-portrait::after, & .mk-team-member-tag, & .mk-team-member-links { display: none; }
    & .mk-team-member-name { font-size: 0.9375rem; }
    & .mk-team-member-role { color: var(--muted-foreground); font-weight: 400; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-team-member-photo, .mk-team-member-links, .mk-team-member-portrait::after { transition: none; }
    .mk-team-member:is(:hover, :focus-within) .mk-team-member-photo { scale: none; }
  }

  @media (forced-colors: active) {
    .mk-team-member-links a { border: 1px solid CanvasText; }
    .mk-team-member[data-variant="horizontal"] { border-color: CanvasText; }
  }
}

/* ── components/testimonials/testimonials.css ── */
/* -- Testimonials (marketing) --------------------------------------
   Big pull-quote with partner logo lockup, plus a grid of media cards
   whose review overlay floats over the photo (backdrop blur, real
   DOM - no JS). Overlay contrast comes from --background at 80% +
   blur, readable in both modes. */

@layer components {
  .mk-testimonials {
    container: mk-testimonials / inline-size;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
  }

  .mk-testimonial-quote-block { display: flex; flex-direction: column; }

  .mk-testimonial-context {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding-bottom: 0.75rem;
    color: var(--muted-foreground);

    & svg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
    & span { font-size: 1.125rem; }
  }

  .mk-testimonial-layout { display: flex; flex-direction: column; gap: 2.25rem; }

  .mk-testimonial-quote {
    margin: 0;
    font-size: 1.875rem;
    line-height: 1.15;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  .mk-testimonial-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: fit-content;
    flex-shrink: 0;
    color: inherit;
    text-decoration: none;

    &:hover .mk-testimonial-brand-name { text-decoration: underline; text-underline-offset: 3px; }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; border-radius: var(--radius-sm); }

    & svg { width: 2.5rem; height: 2.5rem; aspect-ratio: 1; flex-shrink: 0; }
  }

  .mk-testimonial-brand-name { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.025em; white-space: nowrap; }

  .mk-testimonial-date { color: var(--muted-foreground); font-size: 1.125rem; }

  .mk-testimonial-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  /* quote cards flow: one column on phones, as many 16rem columns as fit above (four cards: 2 × 2, then a row) */
  .mk-testimonial-cards:has(> [data-variant="quote"]) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

  .mk-testimonial-card {
    position: relative;
    isolation: isolate;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--muted);
    padding: 0.75rem;
    /* the element is a <figure> - without an explicit reset its UA margins
       (1em 40px) stack onto the grid gap (measured: 92px between cards); the
       gap comes from `gap` alone */
    margin: 0;

    & > img {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top;
    }
  }

  .mk-testimonial-card-body {
    position: relative;
    z-index: 10;
    width: 100%;
    /* source: bg-background/80 + backdrop-blur - keep the text readable over
       any photo without a hard opaque card */
    margin-block-start: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in oklch, var(--background) 80%, transparent);
    backdrop-filter: blur(4px);
    padding: 1rem;
  }

  .mk-testimonial-card-info { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }

  .mk-stars { display: flex; align-items: center; gap: 0.125rem; }

  .mk-stars svg { width: 0.75rem; height: 0.75rem; fill: currentColor; flex-shrink: 0; }

  .mk-testimonial-card-name { font-size: 0.875rem; font-weight: 500; line-height: 1.3; }
  .mk-testimonial-card-role { color: var(--muted-foreground); font-size: 0.75rem; }

  /* the review itself - in a quote card, or under the stars of a photo card */
  .mk-testimonial-card-text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    text-wrap: pretty;

    & p { margin: 0; }
  }
  .mk-testimonial-card-body .mk-testimonial-card-text { margin-block: 0.375rem 0.25rem; font-size: 0.8125rem; }

  /* the author line: an Avatar + name / role */
  .mk-testimonial-card-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-block-start: auto;

    & .mk-testimonial-card-info { gap: 0; }
  }

  /* quote: a card surface - stars, the review, the author at the bottom */
  .mk-testimonial-card[data-variant="quote"] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    aspect-ratio: auto;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    color: var(--card-foreground);
    box-shadow: var(--shadow-xs);

    & .mk-stars { color: oklch(0.78 0.16 75); }
    & .mk-testimonial-card-text { font-size: 1rem; }
    & .mk-testimonial-card-text::before { content: "“"; display: block; height: 1.75rem; margin-block-end: 0.25rem; color: var(--primary); font-family: Georgia, var(--font-serif), serif; font-size: 3.25rem; line-height: 1; opacity: 0.85; }
  }

  @container mk-testimonials (min-width: 30rem) {
    .mk-testimonial-layout { flex-direction: row; }
    .mk-testimonial-quote { font-size: 2.25rem; }
  }

  @container mk-testimonials (min-width: 52rem) {
    .mk-testimonial-cards { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
    .mk-testimonial-card { padding: 1.25rem; }
    .mk-testimonial-card-name { font-size: 1.125rem; }
    .mk-testimonial-card-role { font-size: 0.875rem; }
  }

  /* wall: a masonry wall of quote cards (CSS columns) - "wall of love" */
  .mk-testimonial-cards[data-variant="wall"] {
    display: block;
    columns: 16rem;
    column-gap: 1rem;

    & > .mk-testimonial-card { break-inside: avoid; margin-block-end: 1rem; }
  }

  /* marquee: rows of quote cards gliding sideways (the second row reverses);
     the row runs twice in its track (the copy is inert) for a seamless loop */
  .mk-testimonial-marquee {
    display: grid;
    gap: 1rem;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
  }
  .mk-testimonial-marquee-track {
    display: flex;
    gap: 1rem;
    width: max-content;
    animation: mk-testimonial-marquee var(--mk-testimonial-duration, 45s) linear infinite;

    &[data-direction="reverse"] { animation-direction: reverse; }
    & > .mk-testimonial-card { width: 20rem; flex: none; }
  }
  .mk-testimonial-marquee:is(:hover, :focus-within) .mk-testimonial-marquee-track { animation-play-state: paused; }
  @keyframes mk-testimonial-marquee {
    to { translate: calc(-50% - 0.5rem) 0; }
  }

  /* spotlight: one big quote, the author with a large avatar and the logo */
  .mk-testimonial-spotlight {
    display: grid;
    justify-items: center;
    gap: 1.5rem;
    max-width: 48rem;
    margin-inline: auto;
    text-align: center;

    & .mk-stars { color: oklch(0.78 0.16 75); }
    & .mk-stars svg { width: 1.25rem; height: 1.25rem; }
  }
  .mk-testimonial-spotlight-quote {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 4cqi, 2.25rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  .mk-testimonial-spotlight-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: start;

    & .mk-testimonial-card-name { font-size: 1rem; }
    & .mk-testimonial-spotlight-logo { padding-inline-start: 1rem; border-inline-start: 1px solid var(--border); font-weight: 700; letter-spacing: -0.02em; }
  }

  /* a result line inside a quote card: "+42% faster releases" */
  .mk-testimonial-card-metric {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    background: var(--muted);

    & strong { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--primary); }
    & span { color: var(--muted-foreground); font-size: 0.8125rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-testimonial-marquee { overflow-x: auto; mask-image: none; }
    .mk-testimonial-marquee-track { animation: none; }
    .mk-testimonial-marquee-track > [aria-hidden="true"] { display: none; }
  }

  @media (prefers-reduced-transparency: reduce) {
    .mk-testimonial-card-body {
      background: var(--background);
      backdrop-filter: none;
    }
  }

  @media (forced-colors: active) {
    .mk-testimonial-card-body { background: Canvas; }
  }
}

/* ── components/text-media/text-media.css ── */
/* -- Text Media (website · Media) -----------------------------------------
   Pairs explanatory text with an image, illustration, or video - side by side, reversed, or with the text card overlapping the picture. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-text-media, .mk-text-media *, .mk-text-media ::before, .mk-text-media ::after) { box-sizing: border-box; }

  .mk-text-media { container: mk-text-media / inline-size; width: 100%; }
  .mk-text-media-layout { display: grid; gap: 2rem; align-items: center; }
  .mk-text-media-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
  .mk-text-media-eyebrow { color: var(--primary); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
  .mk-text-media-title { margin: 0; font-size: clamp(1.5rem, 3.5cqi, 2.25rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; }
  .mk-text-media-text { margin: 0; color: var(--muted-foreground); line-height: 1.75; text-wrap: pretty; }
  .mk-text-media-list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none;
    & li { display: flex; gap: 0.625rem; align-items: flex-start; }
    & svg { flex: none; width: 1.125rem; height: 1.125rem; margin-block-start: 0.15rem; color: var(--primary); }
  }
  .mk-text-media-link { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--primary); font-weight: 600; text-decoration: none;
    & svg { width: 1rem; height: 1rem; transition: translate 150ms ease; }
    &:hover svg { translate: 0.25rem 0; }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
  }
  .mk-text-media-media { margin: 0; overflow: hidden; border-radius: var(--radius-xl); background: var(--muted);
    & :is(img, video) { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
    & svg { display: block; width: 100%; height: auto; }
  }

  .mk-text-media[data-variant="overlap"] {
    & .mk-text-media-layout { gap: 0; }
    & .mk-text-media-media :is(img, video) { aspect-ratio: 16 / 9; }
    & .mk-text-media-copy { position: relative; z-index: 1; margin: -3rem 1rem 0; padding: 1.75rem; border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground); box-shadow: var(--shadow-xl); }
  }

  @container mk-text-media (min-width: 48rem) {
    .mk-text-media:not([data-variant="overlap"]) .mk-text-media-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
    .mk-text-media[data-variant="reverse"] .mk-text-media-media { order: -1; }
    .mk-text-media[data-variant="overlap"] .mk-text-media-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .mk-text-media[data-variant="overlap"] .mk-text-media-media { grid-column: 1 / span 9; grid-row: 1; }
    .mk-text-media[data-variant="overlap"] .mk-text-media-copy { grid-column: 7 / -1; grid-row: 1; margin: 0; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-text-media-link svg { transition: none; }
    .mk-text-media-link:hover svg { translate: none; }
  }

  @media (forced-colors: active) {
    .mk-text-media[data-variant="overlap"] .mk-text-media-copy { border-color: CanvasText; }
  }
}

/* ── components/text-rotate/text-rotate.css ── */
/* -- Text Rotate component ------------------------------------------ */

@layer components {
  /* daisyUI's text-rotate, CSS only: a .text-rotate holds one <span> of 2-6
     lines (each a child element); one line shows at a time and the stack
     rolls on to the next - an infinite loop that pauses while hovered. The
     window is one line tall (1lh), so it works at any font-size and
     line-height, inline in a sentence or as a headline. The keyframes are
     picked from the line count (:has()); --text-rotate-duration sets one
     full round (default 10s). data-direction="down" rolls the other way,
     data-effect="fade" crossfades in place, data-pause="none" keeps it
     running under the pointer. Reduced motion shows the first line only. */
  .text-rotate {
    --_n: 1;
    --_dur: var(--text-rotate-duration, 10s);
    display: inline-grid;
    height: 1lh;
    overflow: hidden;
    vertical-align: bottom;

    & > span {
      display: flex;
      flex-direction: column;
      animation: var(--_name, none) var(--_dur) cubic-bezier(0.65, 0, 0.35, 1) infinite;
    }
    & > span > * {
      display: block;
      height: 1lh;
      white-space: nowrap;
    }
    &[data-align="center"] > span > * { text-align: center; }
    &[data-align="end"] > span > * { text-align: end; }

    &:hover > span,
    &:focus-within > span { animation-play-state: paused; }
    &[data-pause="none"]:hover > span,
    &[data-pause="none"]:focus-within > span { animation-play-state: running; }

    &[data-direction="down"] > span { flex-direction: column-reverse; animation-name: var(--_down, none); }

    /* fade: every line in the same cell, each fades through its slot */
    &[data-effect="fade"] > span {
      display: grid;
      animation: none;
    }
    &[data-effect="fade"] > span > * {
      grid-area: 1 / 1;
      opacity: 0;
      animation: var(--_fade, none) var(--_dur) ease infinite both;
    }
    &[data-effect="fade"]:hover > span > *,
    &[data-effect="fade"]:focus-within > span > * { animation-play-state: paused; }
    &[data-effect="fade"][data-pause="none"]:hover > span > * { animation-play-state: running; }
  }

  /* the line count picks the keyframes */
  .text-rotate:has(> span > :nth-child(2):last-child) { --_n: 2; --_name: text-rotate-2; --_down: text-rotate-2-down; --_fade: text-rotate-fade-2; }
  .text-rotate:has(> span > :nth-child(3):last-child) { --_n: 3; --_name: text-rotate-3; --_down: text-rotate-3-down; --_fade: text-rotate-fade-3; }
  .text-rotate:has(> span > :nth-child(4):last-child) { --_n: 4; --_name: text-rotate-4; --_down: text-rotate-4-down; --_fade: text-rotate-fade-4; }
  .text-rotate:has(> span > :nth-child(5):last-child) { --_n: 5; --_name: text-rotate-5; --_down: text-rotate-5-down; --_fade: text-rotate-fade-5; }
  .text-rotate:has(> span > :nth-child(6):last-child) { --_n: 6; --_name: text-rotate-6; --_down: text-rotate-6-down; --_fade: text-rotate-fade-6; }

  /* fade: line k starts its slot k-1 slots later */
  .text-rotate[data-effect="fade"] > span > :nth-child(2) { animation-delay: calc(var(--_dur) * 1 / var(--_n)); }
  .text-rotate[data-effect="fade"] > span > :nth-child(3) { animation-delay: calc(var(--_dur) * 2 / var(--_n)); }
  .text-rotate[data-effect="fade"] > span > :nth-child(4) { animation-delay: calc(var(--_dur) * 3 / var(--_n)); }
  .text-rotate[data-effect="fade"] > span > :nth-child(5) { animation-delay: calc(var(--_dur) * 4 / var(--_n)); }
  .text-rotate[data-effect="fade"] > span > :nth-child(6) { animation-delay: calc(var(--_dur) * 5 / var(--_n)); }

  @keyframes text-rotate-2 {
    0%, 46% { translate: 0 0; }
    50%, 96% { translate: 0 -50%; }
    100% { translate: 0 0; }
  }
  @keyframes text-rotate-2-down {
    0%, 46% { translate: 0 -50%; }
    50%, 96% { translate: 0 0; }
    100% { translate: 0 -50%; }
  }
  @keyframes text-rotate-fade-2 {
    0% { opacity: 0; translate: 0 0.25lh; }
    4%, 46% { opacity: 1; translate: 0 0; }
    50%, 100% { opacity: 0; translate: 0 -0.25lh; }
  }
  @keyframes text-rotate-3 {
    0%, 30.667% { translate: 0 0; }
    33.333%, 64% { translate: 0 -33.3333%; }
    66.667%, 97.333% { translate: 0 -66.6667%; }
    100% { translate: 0 0; }
  }
  @keyframes text-rotate-3-down {
    0%, 30.667% { translate: 0 -66.6667%; }
    33.333%, 64% { translate: 0 -33.3333%; }
    66.667%, 97.333% { translate: 0 0; }
    100% { translate: 0 -66.6667%; }
  }
  @keyframes text-rotate-fade-3 {
    0% { opacity: 0; translate: 0 0.25lh; }
    2.667%, 30.667% { opacity: 1; translate: 0 0; }
    33.333%, 100% { opacity: 0; translate: 0 -0.25lh; }
  }
  @keyframes text-rotate-4 {
    0%, 23% { translate: 0 0; }
    25%, 48% { translate: 0 -25%; }
    50%, 73% { translate: 0 -50%; }
    75%, 98% { translate: 0 -75%; }
    100% { translate: 0 0; }
  }
  @keyframes text-rotate-4-down {
    0%, 23% { translate: 0 -75%; }
    25%, 48% { translate: 0 -50%; }
    50%, 73% { translate: 0 -25%; }
    75%, 98% { translate: 0 0; }
    100% { translate: 0 -75%; }
  }
  @keyframes text-rotate-fade-4 {
    0% { opacity: 0; translate: 0 0.25lh; }
    2%, 23% { opacity: 1; translate: 0 0; }
    25%, 100% { opacity: 0; translate: 0 -0.25lh; }
  }
  @keyframes text-rotate-5 {
    0%, 18.4% { translate: 0 0; }
    20%, 38.4% { translate: 0 -20%; }
    40%, 58.4% { translate: 0 -40%; }
    60%, 78.4% { translate: 0 -60%; }
    80%, 98.4% { translate: 0 -80%; }
    100% { translate: 0 0; }
  }
  @keyframes text-rotate-5-down {
    0%, 18.4% { translate: 0 -80%; }
    20%, 38.4% { translate: 0 -60%; }
    40%, 58.4% { translate: 0 -40%; }
    60%, 78.4% { translate: 0 -20%; }
    80%, 98.4% { translate: 0 0; }
    100% { translate: 0 -80%; }
  }
  @keyframes text-rotate-fade-5 {
    0% { opacity: 0; translate: 0 0.25lh; }
    1.6%, 18.4% { opacity: 1; translate: 0 0; }
    20%, 100% { opacity: 0; translate: 0 -0.25lh; }
  }
  @keyframes text-rotate-6 {
    0%, 15.333% { translate: 0 0; }
    16.667%, 32% { translate: 0 -16.6667%; }
    33.333%, 48.667% { translate: 0 -33.3333%; }
    50%, 65.333% { translate: 0 -50%; }
    66.667%, 82% { translate: 0 -66.6667%; }
    83.333%, 98.667% { translate: 0 -83.3333%; }
    100% { translate: 0 0; }
  }
  @keyframes text-rotate-6-down {
    0%, 15.333% { translate: 0 -83.3333%; }
    16.667%, 32% { translate: 0 -66.6667%; }
    33.333%, 48.667% { translate: 0 -50%; }
    50%, 65.333% { translate: 0 -33.3333%; }
    66.667%, 82% { translate: 0 -16.6667%; }
    83.333%, 98.667% { translate: 0 0; }
    100% { translate: 0 -83.3333%; }
  }
  @keyframes text-rotate-fade-6 {
    0% { opacity: 0; translate: 0 0.25lh; }
    1.333%, 15.333% { opacity: 1; translate: 0 0; }
    16.667%, 100% { opacity: 0; translate: 0 -0.25lh; }
  }

  /* -- Accessibility ----------------------------------------------------
     Reduced motion: no rolling - the first line stays. All lines stay in
     the DOM, so assistive tech reads the full list. */
  @media (prefers-reduced-motion: reduce) {
    .text-rotate > span,
    .text-rotate[data-effect="fade"] > span > * { animation: none; }
    .text-rotate[data-effect="fade"] > span > :first-child { opacity: 1; }
  }
}

/* ── components/textarea/textarea.css ── */
/* -- Textarea component ----------------------------------------- */

@layer components {
  .textarea {
    /* border-box: UA gives <textarea> content-box, which would render the
       min-height 2px above the shared field frame (see .input) */
    box-sizing: border-box;
    width: 100%;
    min-height: 5rem;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-family: var(--font-sans);
    color: var(--foreground);
    outline: none;
    box-shadow: var(--shadow-xs);
    transition: border-color 150ms, box-shadow 150ms;
    resize: vertical;
    field-sizing: content;
    line-height: 1.5;

    /* -- Rows: data-rows is the height it starts at, data-max-rows where it
       stops growing and scrolls instead (field-sizing grows it in between).
       1lh = one line of this textarea, + the padding and border. -------- */
    &[data-rows="1"] { min-height: calc(1lh + 1rem + 2px); }
    &[data-rows="2"] { min-height: calc(2lh + 1rem + 2px); }
    &[data-rows="3"] { min-height: calc(3lh + 1rem + 2px); }
    &[data-rows="4"] { min-height: calc(4lh + 1rem + 2px); }
    &[data-rows="5"] { min-height: calc(5lh + 1rem + 2px); }
    &[data-rows="6"] { min-height: calc(6lh + 1rem + 2px); }
    &[data-rows="8"] { min-height: calc(8lh + 1rem + 2px); }
    &[data-rows="10"] { min-height: calc(10lh + 1rem + 2px); }
    &[data-max-rows="2"] { max-height: calc(2lh + 1rem + 2px); }
    &[data-max-rows="3"] { max-height: calc(3lh + 1rem + 2px); }
    &[data-max-rows="4"] { max-height: calc(4lh + 1rem + 2px); }
    &[data-max-rows="5"] { max-height: calc(5lh + 1rem + 2px); }
    &[data-max-rows="6"] { max-height: calc(6lh + 1rem + 2px); }
    &[data-max-rows="8"] { max-height: calc(8lh + 1rem + 2px); }
    &[data-max-rows="10"] { max-height: calc(10lh + 1rem + 2px); }
    &[data-max-rows="12"] { max-height: calc(12lh + 1rem + 2px); }
    &[data-resize="none"] { resize: none; }

    &:focus {
      border-color: var(--ring);
      box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.2);
    }

    &::placeholder { color: var(--muted-foreground); }

    /* Disabled = legible but inert: a muted surface and muted text inside
       the full-strength border - never an opacity fade that lets the box
       dissolve into the page. */
    &:disabled {
      background-color: var(--muted);
      color: var(--muted-foreground);
      box-shadow: none;
      cursor: not-allowed;
      /* resize stays off (Chrome would still let a disabled field be dragged
         taller), but the corner keeps a grip so it still reads as a text
         field - two painted diagonal strokes where the native grip sits */
      resize: none;
      background-image:
        linear-gradient(135deg, transparent 0 46%, var(--muted-foreground) 46% 54%, transparent 54%),
        linear-gradient(135deg, transparent 0 46%, var(--muted-foreground) 46% 54%, transparent 54%);
      background-repeat: no-repeat;
      background-size: 0.625rem 0.625rem, 0.3125rem 0.3125rem;
      background-position: right 0.1875rem bottom 0.1875rem, right 0.1875rem bottom 0.1875rem;
    }

    &:is([aria-invalid="true"], :user-invalid:is(form *):not(form[data-validate="submit"]:not([data-submitted]) *)) {
      border-color: var(--destructive);

      &:focus {
        border-color: var(--destructive);
        box-shadow: 0 0 0 2px oklch(from var(--destructive) l c h / 0.2);
      }
    }
  }

  /* -- Textarea group: a composer --------------------------------
     The GROUP draws the frame (border, radius, focus ring, drop target);
     the .textarea inside goes frameless and grows. Children in order: an
     optional .file-drop-list (attachment chips, the file-input's own
     items), the textarea, a .textarea-group-actions row (attach, send,
     a counter). data-layout="inline" puts the actions beside the text -
     a one-line chat composer that grows upward. */
  .textarea-group {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--input);
    border-radius: var(--radius-lg);
    background: var(--background);
    box-shadow: var(--shadow-xs);
    transition: border-color 150ms, box-shadow 150ms, background-color 150ms;

    & > .textarea {
      min-height: calc(2lh + 1rem);
      border: 0;
      border-radius: inherit;
      background: transparent;
      box-shadow: none;
      resize: none;
      padding: 0.75rem 0.875rem 0.25rem;

      &:focus { box-shadow: none; }
    }

    &:has(> .textarea:focus) {
      border-color: var(--ring);
      box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.2);
    }

    &:has(> .textarea:disabled) {
      background: var(--muted);
      box-shadow: none;
    }

    /* attachment chips above the text - a wrapping row of file items */
    & > .file-drop-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      padding: 0.625rem 0.625rem 0;

      &:empty { display: none; }
      & > .file-drop-item { width: 13rem; max-width: 100%; box-sizing: border-box; }
    }

    & > .textarea-group-actions {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.375rem;

      /* everything after the spacer sits at the end - usually send */
      & > .textarea-group-spacer { flex: 1; }
    }

    & .textarea-group-count {
      padding-inline: 0.375rem;
      color: var(--muted-foreground);
      font-size: 0.75rem;
      font-variant-numeric: tabular-nums;
    }

    /* inline: [actions] text [actions] on one row, aligned to the last line */
    &[data-layout="inline"] {
      flex-flow: row wrap;
      align-items: flex-end;

      & > .file-drop-list { flex-basis: 100%; }
      & > .textarea {
        flex: 1;
        min-width: 0;
        min-height: calc(1lh + 1rem);
        padding: 0.5rem 0.25rem;
      }
      & > .textarea:first-child { padding-inline-start: 0.875rem; }
      & > .textarea-group-actions { padding: 0.3125rem; }
    }

    /* a file dragged over the composer: the page sets data-dragover */
    &[data-dragover] {
      border-style: dashed;
      border-color: var(--ring);
      background: color-mix(in oklch, var(--accent) 45%, var(--background));
    }
  }

  /* -- Accessibility ---------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .textarea,
    .textarea-group {
      transition: none;
    }
  }

  @media (prefers-contrast: more) {
    .textarea,
    .textarea-group {
      border-width: 2px;
    }
    .textarea-group > .textarea { border-width: 0; }

    .textarea:disabled {
      border-color: var(--muted-foreground);
    }
  }

  @media (forced-colors: active) {
    .textarea-group { border-color: ButtonBorder; }
    .textarea-group:has(> .textarea:focus) { outline: 2px solid Highlight; outline-offset: 1px; }
    .textarea-group > .textarea:focus { outline: none; }

    .textarea {
      border-color: ButtonBorder;
      color: ButtonText;
      background: Field;
    }

    .textarea:focus {
      outline: 2px solid Highlight;
      outline-offset: 1px;
    }

    .textarea:disabled {
      opacity: 1;
      background-image: none;
      color: GrayText;
      border-color: GrayText;
    }

    .textarea:is([aria-invalid="true"], :user-invalid:is(form *):not(form[data-validate="submit"]:not([data-submitted]) *)) {
      border-color: LinkText;
    }
  }
}

/* ── components/theme-switcher/theme-switcher.css ── */
/* -- Theme Switcher component ---------------------------------
   Dropdown that swaps a <link id="theme-css"> stylesheet. Own popover +
   anchor rules (self-contained, mirrors .dropdown-content) + menu rows with
   theme color dots. */

@layer components {
  .theme-switcher {
    position: relative;
    display: inline-flex;
  }

  .theme-switcher-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 14rem;

    & .theme-switcher-dot {
      width: 0.75rem;
      height: 0.75rem;
      border-radius: 9999px;
      border: 1px solid var(--border);
      flex-shrink: 0;
      /* the active theme's primary color, set inline by theme-switcher.js */
      background: var(--primary);
    }

    & .theme-switcher-label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    & .theme-switcher-chevron {
      width: 1rem;
      height: 1rem;
      margin-inline-start: auto;
      flex-shrink: 0;
      opacity: 0.6;
    }
  }

  .theme-switcher-menu {
    background-color: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.25rem;
    min-width: 12rem;
    max-height: 18rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 4px 16px oklch(0 0 0 / 0.12), 0 0 0 1px var(--border);

    /* Anchor positioning - the trigger names itself, the menu follows */
    position: fixed;
    inset: auto;
    top: anchor(bottom);
    left: anchor(left);
    margin: 0;
    margin-top: 4px;
    position-try-fallbacks: flip-block;

    /* Enter/exit animation on the discrete display switch */
    opacity: 0;
    transform: scale(0.96) translateY(-0.25rem);
    transition: opacity 150ms ease, transform 150ms ease,
                display 150ms allow-discrete;

    &:popover-open {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  @starting-style {
    .theme-switcher-menu:popover-open {
      opacity: 0;
      transform: scale(0.96) translateY(-0.25rem);
    }
  }

  .theme-switcher-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.375rem 0.5rem;
    border-radius: calc(var(--radius) * 0.6);
    font-size: 0.875rem;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: start;

    &:hover,
    &:focus-visible,
    &[data-highlighted] {
      background: var(--accent);
      color: var(--accent-foreground);
      outline: none;
    }

    &[aria-checked='true'] {
      font-weight: 500;

      & .theme-switcher-check {
        visibility: visible;
      }
    }

    & .theme-switcher-dots {
      display: inline-flex;
      gap: 2px;
      flex-shrink: 0;
    }

    & .theme-switcher-dots span {
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 9999px;
    }

    & .theme-switcher-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    & .theme-switcher-check {
      width: 1rem;
      height: 1rem;
      margin-inline-start: auto;
      visibility: hidden;
      flex-shrink: 0;
    }
  }

  /* Accessibility */
  @media (prefers-reduced-motion: reduce) {
    .theme-switcher-menu {
      transition: none;
    }
  }

  @media (forced-colors: active) {
    .theme-switcher-menu {
      border: 1px solid CanvasText;
    }
  }
}

/* ── components/timeline/timeline.css ── */
@layer components {
  .timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .timeline-item {
    display: flex;
    gap: 1rem;
    padding-bottom: 1.5rem;
    position: relative;

    /* Connector line */
    &::before {
      content: '';
      position: absolute;
      left: 0.3125rem;
      top: 1rem;
      bottom: 0;
      width: 1px;
      background-color: var(--border);
    }

    &:last-child::before {
      display: none;
    }

    &:last-child {
      padding-bottom: 0;
    }
  }

  .timeline-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background-color: var(--border);
    flex-shrink: 0;
    margin-top: 0.375rem;
    position: relative;
    z-index: 1;

    &[data-variant="active"] {
      background-color: var(--primary);
    }
    &[data-variant="destructive"] {
      background-color: var(--destructive);
    }
    /* a hollow ring: planned / upcoming */
    &[data-variant="outline"] {
      background-color: var(--background);
      box-shadow: inset 0 0 0 2px var(--primary);
    }

    /* an icon inside the dot (svg / img / lucide <i data-lucide>) turns it
       into a 1.5rem badge; the connector re-centers on it (below) */
    &:has(> :is(svg, img)) {
      display: grid;
      place-items: center;
      width: 1.5rem;
      height: 1.5rem;
      margin-top: -0.125rem;
      background-color: var(--muted);
      color: var(--foreground);

      & > :is(svg, img) { width: 0.875rem; height: 0.875rem; }
      &[data-variant="active"] { background-color: var(--primary); color: var(--primary-foreground); }
      &[data-variant="destructive"] { background-color: var(--destructive); color: var(--destructive-foreground); }
      &[data-variant="outline"] { background-color: var(--background); color: var(--foreground); box-shadow: inset 0 0 0 1px var(--border); }
    }
  }

  /* vertical connector under an icon dot: centered on the 1.5rem badge */
  .timeline-item:has(> .timeline-dot > :is(svg, img))::before {
    left: calc(0.75rem - 0.5px);
    top: 1.75rem;
    bottom: 0.5rem;
  }

  .timeline-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1;
  }

  .timeline-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
    line-height: 1.4;
  }

  .timeline-description {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    line-height: 1.5;
  }

  .timeline-time {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    margin-top: 0.125rem;
  }
  /* -- Density ----------------------------------------------------
     data-density on the .timeline root scales the item rhythm (connector
     gap + trailing space). comfortable == the unsized default. The
     padding-bottom rule is gated :not(:last-child) so the base
     `:last-child { padding-bottom: 0 }` (same specificity, earlier source)
     keeps winning for the final item. */
  .timeline:where([data-density="compact"]) {
    & .timeline-item { gap: 0.75rem; }
    & .timeline-item:not(:last-child) { padding-bottom: 1.125rem; }
  }
  .timeline:where([data-density="comfortable"]) {
    & .timeline-item { gap: 1rem; }
    & .timeline-item:not(:last-child) { padding-bottom: 1.5rem; }
  }
  .timeline:where([data-density="spacious"]) {
    & .timeline-item { gap: 1.25rem; }
    & .timeline-item:not(:last-child) { padding-bottom: 1.875rem; }
  }

  /* -- Horizontal ---------------------------------------------------
     data-orientation="horizontal": one equal column per item (at least
     10rem - more items scroll sideways, snapping to each), the dot on top,
     the content below. The rows are a SUBGRID across all items, so every
     dot sits on one line even when contents differ in height. The
     connector is the item's ::before as a GRID ITEM in the dot's row: it
     starts 0.375rem after the dot and runs through the item's trailing
     padding to 0.375rem before the next dot. data-align="center" centers
     dot and text in the column; data-alternate puts every second item's
     content ABOVE the line. The item gap (density-scaled) spaces dot and
     content. Declared after the density rules, which it overrides where
     they meet (padding). */
  .timeline[data-orientation="horizontal"] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(10rem, 1fr);
    grid-template-rows: auto auto;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;

    & > .timeline-item {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
      grid-template-columns: minmax(0, 1fr);
      column-gap: 0;
      padding: 0;
      padding-inline-end: 1.5rem;
      scroll-snap-align: start;

      & > .timeline-dot { grid-row: 1; grid-column: 1; margin: 0; justify-self: start; align-self: center; }
      & > .timeline-content { grid-row: 2; grid-column: 1; }

      &::before {
        position: static;
        grid-row: 1;
        grid-column: 1;
        align-self: center;
        width: auto;
        height: 1px;
        margin-inline: 1rem -1.125rem;
      }
      &:has(> .timeline-dot > :is(svg, img))::before { margin-inline: 1.875rem -1.125rem; }
      &:last-child { padding-inline-end: 0; }
    }

    &[data-align="center"] > .timeline-item {
      text-align: center;

      & > .timeline-dot { justify-self: center; }
      & > .timeline-content { align-items: center; }
      /* percentages resolve against the column: from just past this dot's
         center to just before the next one's */
      &::before { margin-inline: calc(50% + 0.6875rem) calc(-50% - 0.8125rem); }
      &:has(> .timeline-dot > :is(svg, img))::before { margin-inline: calc(50% + 1.125rem) calc(-50% - 0.375rem); }
    }

    &[data-alternate] {
      grid-template-rows: auto auto auto;

      & > .timeline-item {
        grid-row: span 3;

        & > .timeline-dot, &::before { grid-row: 2; }
        & > .timeline-content { grid-row: 3; }
        &:nth-child(even) > .timeline-content { grid-row: 1; align-self: end; }
      }
    }
  }


  /* -- Accessibility ------------------------------------------
     forced colors drop background colors: keep the dots and the
     connector visible in system colors */
  @media (forced-colors: active) {
    .timeline-dot { forced-color-adjust: none; background-color: CanvasText; color: Canvas; }
    .timeline-dot[data-variant="active"] { background-color: Highlight; color: HighlightText; }
    .timeline-dot[data-variant="outline"] { background-color: Canvas; box-shadow: inset 0 0 0 2px CanvasText; color: CanvasText; }
    .timeline-item::before { forced-color-adjust: none; background-color: CanvasText; }
  }
}

/* ── components/timeline-item/timeline-item.css ── */
/* -- Timeline Item (website · Company) ------------------------------------
   Describes one dated milestone or historical event - a date, a dot on a line, a title and a short story, optionally with a picture. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-timeline-item, .mk-timeline-item *, .mk-timeline-item ::before, .mk-timeline-item ::after) { box-sizing: border-box; }

  .mk-timeline-list { container: mk-timeline-list / inline-size; display: grid; width: 100%; margin: 0; padding: 0; list-style: none; }
  .mk-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.375rem;
    padding: 0 0 2.25rem 1.75rem;

    /* the line and the dot */
    &::before { content: ""; position: absolute; inset-inline-start: 0.3125rem; top: 0.5rem; bottom: -0.5rem; width: 2px; background: var(--border); }
    &:last-child::before { bottom: auto; height: 0; }
    &::after { content: ""; position: absolute; inset-inline-start: 0; top: 0.3rem; width: 0.75rem; height: 0.75rem; border: 2px solid var(--primary); border-radius: 50%; background: var(--background); box-sizing: border-box; }
  }
  .mk-timeline-item-date { color: var(--primary); font-size: 0.875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
  .mk-timeline-item-body { display: grid; gap: 0.375rem; }
  .mk-timeline-item-title { margin: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
  .mk-timeline-item-text { margin: 0; color: var(--muted-foreground); line-height: 1.65; text-wrap: pretty; }
  .mk-timeline-item-media { display: block; width: 100%; max-width: 28rem; margin-block-start: 0.5rem; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); }

  .mk-timeline-item[data-variant="milestone"] {
    &::after { inset-inline-start: -0.125rem; top: 0.875rem; width: 1rem; height: 1rem; border-width: 0; background: var(--primary); box-shadow: 0 0 0 4px color-mix(in oklch, var(--primary) 18%, transparent); }
    & .mk-timeline-item-body { padding: 1.25rem; border-radius: var(--radius-xl); background: color-mix(in oklab, var(--primary) 6%, var(--card)); border: 1px solid color-mix(in oklab, var(--primary) 20%, var(--border)); }
    & .mk-timeline-item-date { padding-block-start: 0.625rem; }
  }

  @container mk-timeline-list (min-width: 40rem) {
    .mk-timeline-item { grid-template-columns: 7rem minmax(0, 1fr); gap: 1.5rem; padding-inline-start: 0; }
    .mk-timeline-item::before { inset-inline-start: 8.8125rem; }
    .mk-timeline-item::after { inset-inline-start: 8.5rem; }
    .mk-timeline-item[data-variant="milestone"]::after { inset-inline-start: 8.375rem; }
    .mk-timeline-item-date { text-align: end; padding-inline-end: 1.75rem; }
    .mk-timeline-item-body { margin-inline-start: 1.75rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-timeline-item::before { background: CanvasText; }
    .mk-timeline-item::after { border-color: CanvasText; }
    .mk-timeline-item[data-variant="milestone"]::after { background: Highlight; }
  }
}

/* ── components/toast/toast.css ── */
/* -- Toast component ------------------------------------------- */

@layer components {
  /* -- Container ------------------------------------------------ */
  .toast-container {
    position: fixed;
    z-index: 100;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    padding: 1rem;
    max-height: 100vh;
    pointer-events: none;

    &[data-position="bottom-right"] { bottom: 0; right: 0; }
    &[data-position="bottom-left"]  { bottom: 0; left: 0; }
    &[data-position="top-right"]    { top: 0; right: 0; flex-direction: column; }
    &[data-position="top-left"]     { top: 0; left: 0; flex-direction: column; }
    &[data-position="top-center"]   { top: 0; left: 50%; transform: translateX(-50%); flex-direction: column; align-items: center; }
    &[data-position="bottom-center"]{ bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; }
  }

  /* -- Toast ---------------------------------------------------- */
  .toast {
    /* Top layer (popover="manual") bypasses the container's flex layout - the
       UA sheet would CENTER every toast (inset:0 + margin:auto). Pin each toast
       to its container's corner instead and stack via --toast-stack, which the
       component JS measures (toast.ts stackToasts) since heights vary. */
    position: fixed;
    inset: auto;
    margin: 0;
    /* the UA popover sheet clips (overflow: auto) - the pile badge sits on the edge */
    overflow: visible;
    background-color: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    min-width: 20rem;
    max-width: 26rem;
    box-shadow: 0 4px 16px oklch(0 0 0 / 0.12);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 200ms ease, transform 200ms ease;

    &:popover-open {
      opacity: 1;
      transform: translateY(0);
    }

    /* -- Corner placement (top layer - see note above) ------------
       --toast-stack: measured px offset of the stack below this toast;
       the first toast is 0, so default bottom-right lands at the edge. */
    [data-position="bottom-right"] & { bottom: calc(1rem + var(--toast-stack, 0px)); right: 1rem; }
    [data-position="bottom-left"] & { bottom: calc(1rem + var(--toast-stack, 0px)); left: 1rem; }
    [data-position="top-right"] & { top: calc(1rem + var(--toast-stack, 0px)); right: 1rem; }
    [data-position="top-left"] & { top: calc(1rem + var(--toast-stack, 0px)); left: 1rem; }
    [data-position="top-center"] & { top: calc(1rem + var(--toast-stack, 0px)); left: 50%; translate: -50% 0; }
    [data-position="bottom-center"] & { bottom: calc(1rem + var(--toast-stack, 0px)); left: 50%; translate: -50% 0; }

    /* -- Sizes + Density ------------------------------------------
       data-size scales the toast's width envelope (sm/md/lg, md == the
       unsized default); data-density is the whitespace policy - padding and
       the content gap at the shared 0.75 / 1 / 1.25 ratio, comfortable ==
       the unsized default. Both live on the .toast element itself. */
    &[data-size="sm"] { min-width: 16rem; max-width: 20rem; }
    &[data-size="md"] { min-width: 20rem; max-width: 26rem; }
    &[data-size="lg"] { min-width: 24rem; max-width: 32rem; }

    &[data-density="compact"]    { padding: 0.75rem; & .toast-content { gap: 0.5rem; } }
    &[data-density="comfortable"] { padding: 1rem; }
    &[data-density="spacious"]   { padding: 1.25rem; & .toast-content { gap: 1rem; } }

    /* -- Variants ------------------------------------------------- */
    &[data-variant="destructive"] {
      background-color: var(--destructive);
      color: var(--destructive-foreground);
      border-color: var(--destructive);

      & .toast-description {
        color: var(--destructive-foreground);
        opacity: 0.85;
      }
    }

    /* -- Semantic variants (border + icon color) ----------------- */
    &[data-variant="success"] {
      border-color: oklch(0.65 0.2 145);

      & .toast-icon { color: oklch(0.65 0.2 145); }
    }

    &[data-variant="warning"] {
      border-color: oklch(0.75 0.18 75);

      & .toast-icon { color: oklch(0.75 0.18 75); }
    }

    &[data-variant="info"] {
      border-color: oklch(0.6 0.15 250);

      & .toast-icon { color: oklch(0.6 0.15 250); }
    }
  }

  @starting-style {
    .toast:popover-open {
      opacity: 0;
      transform: translateY(0.5rem);
    }
  }


  /* -- Named animations (options.animation) ------------------------
     df$.anim plays the entrance / exit; the CSS fade stands down. */
  .toast[data-anim] {
    transition: bottom 220ms ease, top 220ms ease, scale 220ms ease, opacity 220ms ease;

    &:popover-open { opacity: 1; transform: none; }
  }
  @starting-style {
    .toast[data-anim]:popover-open { opacity: 1; transform: none; }
  }

  /* -- Pile (df$.shadcn.toast.configure({ stack: 'pile' })) ----------
     The newest toast is in front and wears the shapes.css stack-* sheets
     (added by toast.js); the older ones wait behind it, hidden, and fan out
     into a list while the pointer or focus is inside the pile. A "+n" badge
     counts the hidden ones. */
  .toast-container[data-stack="pile"] .toast {
    transition: opacity 200ms ease, transform 200ms ease, bottom 220ms cubic-bezier(0.2, 0.8, 0.2, 1), top 220ms cubic-bezier(0.2, 0.8, 0.2, 1), scale 220ms ease;
  }
  .toast[data-piled] {
    opacity: 0 !important;
    scale: 0.94;
    pointer-events: none;
  }
  .toast[data-more]:not([data-more="0"])::after {
    content: "+" attr(data-more);
    position: absolute;
    inset-block-start: -0.5rem;
    inset-inline-start: -0.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    padding-inline: 0.375rem;
    border-radius: 9999px;
    background-color: var(--primary);
    color: var(--primary-foreground);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
  }
  .toast-container[data-position^="top"] .toast[data-more]::after { inset-block-start: auto; inset-block-end: -0.5rem; }

  /* -- Aura (options.aura) ------------------------------------------
     The toast is the ring of light (shapes.css .aura), its content sits on
     an inner surface with the toast's own colors and padding. */
  .toast[data-aura] {
    --shape-round: var(--radius-lg);
    border: 0;
    background-color: transparent;
    box-shadow: 0 8px 28px -6px color-mix(in oklch, var(--foreground) 30%, transparent);
  }
  .toast-surface {
    padding: 1rem;
    border-radius: var(--radius-lg);
    background-color: var(--popover);
    color: var(--popover-foreground);

    .toast[data-variant="destructive"] > & { background-color: var(--destructive); color: var(--destructive-foreground); }
  }

  /* -- Inner elements ------------------------------------------- */
  .toast-content {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .toast-text {
    flex: 1;
    min-width: 0;
  }

  .toast-title {
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
  }

  .toast-description {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    margin: 0.125rem 0 0;
    line-height: 1.5;
  }

  .toast-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    flex-shrink: 0;
    border-radius: calc(var(--radius) * 0.5);
    transition: color 150ms, background 150ms;

    &:hover {
      color: var(--foreground);
      background: var(--accent);
    }
  }

  .toast-icon {
    /* explicit size: SVGs without width/height render at a ~300px intrinsic
       default, which blew up the whole toast */
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 0.125rem;
  }

  .toast-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }
}

/* Accessibility: suppress motion for users who request it (REQUIRED for all
   components - AGENTS.md "Accessibility CSS"). Near-zero duration instead of
   `none` keeps transitionend/animationend (and discrete display flips)
   firing so JS state machines that await them keep working. */
@media (prefers-reduced-motion: reduce) {
  @layer components {
    .toast-container,
    .toast-container *,
    .toast-container::before,
    .toast-container::after,
    .toast-container *::before,
    .toast-container *::after,
    .toast-container::backdrop,
    .toast,
    .toast *,
    .toast::before,
    .toast::after,
    .toast *::before,
    .toast *::after,
    .toast::backdrop,
    .toast-description,
    .toast-description *,
    .toast-description::before,
    .toast-description::after,
    .toast-description *::before,
    .toast-description *::after,
    .toast-description::backdrop,
    .toast-icon,
    .toast-icon *,
    .toast-icon::before,
    .toast-icon::after,
    .toast-icon *::before,
    .toast-icon *::after,
    .toast-icon::backdrop,
    .toast-content,
    .toast-content *,
    .toast-content::before,
    .toast-content::after,
    .toast-content *::before,
    .toast-content *::after,
    .toast-content::backdrop,
    .toast-text,
    .toast-text *,
    .toast-text::before,
    .toast-text::after,
    .toast-text *::before,
    .toast-text *::after,
    .toast-text::backdrop,
    .toast-title,
    .toast-title *,
    .toast-title::before,
    .toast-title::after,
    .toast-title *::before,
    .toast-title *::after,
    .toast-title::backdrop,
    .toast-close,
    .toast-close *,
    .toast-close::before,
    .toast-close::after,
    .toast-close *::before,
    .toast-close *::after,
    .toast-close::backdrop,
    .toast-actions,
    .toast-actions *,
    .toast-actions::before,
    .toast-actions::after,
    .toast-actions *::before,
    .toast-actions *::after,
    .toast-actions::backdrop {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

/* ── components/toc/toc.css ── */
/* -- Table of Contents component ------------------------------ */

@layer components {
  .toc {
    display: block;
  }

  .toc-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--foreground);
    margin: 0 0 0.5rem;
    padding: 0 0.5rem;
  }

  /* -- Density ----------------------------------------------------
     data-density on the .toc root scales the vertical rhythm of the links
     (0.75 / 1 / 1.25 of the 3px block padding); comfortable matches the
     unsized default. Font size stays put - whitespace, not zoom. */
  .toc:where([data-density="compact"]) .toc-link    { padding: 0.125rem 0.5rem; }
  .toc:where([data-density="comfortable"]) .toc-link { padding: 0.1875rem 0.5rem; }
  .toc:where([data-density="spacious"]) .toc-link   { padding: 0.25rem 0.5rem; }

  .toc-link {
    display: block;
    padding: 0.1875rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color 150ms, border-color 150ms;
    line-height: 1.6;

    &:hover {
      color: var(--foreground);
    }

    &[aria-current="location"] {
      color: var(--foreground);
      border-left-color: var(--primary);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .toc-link {
      transition: none;
    }
  }

  @media (forced-colors: active) {
    .toc-link[aria-current="location"] {
      border-left-color: LinkText;
    }
  }
}

/* ── components/toggle/toggle.css ── */
/* -- Toggle component ------------------------------------------ */

@layer components {
  .toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-sans);
    line-height: 1;
    white-space: nowrap;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
    outline: none;
    flex-shrink: 0;
    height: 2.25rem;
    padding: 0 0.5rem;
    min-width: 2.25rem;

    &:hover:not(:disabled) {
      background-color: var(--muted);
      color: var(--muted-foreground);
    }

    &[aria-pressed="true"] {
      background-color: var(--accent);
      color: var(--accent-foreground);

      &:hover:not(:disabled) {
        background-color: color-mix(in oklch, var(--accent) 85%, var(--foreground));
      }
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    /* disabled: dimmed, with the not-allowed cursor - no pointer-events: none,
       which would hide the cursor too (a disabled button fires no click) */
    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    & svg {
      pointer-events: none;
      flex-shrink: 0;

      &:not([class*="size-"]) { width: 1rem; height: 1rem; }
    }

    /* -- Variants -------------------------------------------- */
    &[data-variant="outline"] {
      border: 1px solid var(--input);
      background: transparent;
      box-shadow: var(--shadow-xs);

      &:hover:not(:disabled) {
        background-color: var(--accent);
        color: var(--accent-foreground);
      }

      &[aria-pressed="true"] {
        background-color: var(--accent);
        color: var(--accent-foreground);

        &:hover:not(:disabled) {
          background-color: color-mix(in oklch, var(--accent) 85%, var(--foreground));
        }
      }
    }

    /* -- Sizes ----------------------------------------------- */
    &[data-size="xs"]  { height: 1.75rem; padding: 0 0.25rem;  min-width: 1.75rem; font-size: 0.75rem; }
    &[data-size="sm"]  { height: 2rem;  padding: 0 0.375rem; min-width: 2rem; }
    &[data-size="md"]  { height: 2.25rem; padding: 0 0.5rem;   min-width: 2.25rem; }
    &[data-size="lg"]  { height: 2.5rem; padding: 0 0.625rem; min-width: 2.5rem; }
    &[data-size="xl"]  { height: 3rem;  padding: 0 0.75rem;  min-width: 3rem; font-size: 1rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .toggle { transition: none; }
  }

  @media (prefers-contrast: more) {
    .toggle {
      border: 2px solid transparent;

      &[data-variant="outline"] {
        border-color: var(--foreground);
      }

      &[aria-pressed="true"] {
        border-color: currentColor;
      }
    }
  }

  @media (forced-colors: active) {
    .toggle {
      border: 1px solid ButtonText;

      &[aria-pressed="true"] {
        background: Highlight;
        color: HighlightText;
      }

      &:disabled {
        border-color: GrayText;
        color: GrayText;
      }
    }
  }
}

/* ── components/toggle-group/toggle-group.css ── */
/* -- Toggle Group component ------------------------------------- */

@layer components {
  .toggle-group {
    display: inline-flex;
    align-items: center;
    gap: 0.0625rem;

    /* -- Outline variant: propagate border + shadow to children -- */
    &[data-variant="outline"] > .toggle {
      border: 1px solid var(--input);
      background: transparent;
      box-shadow: var(--shadow-xs);

      &:hover {
        background-color: var(--accent);
        color: var(--accent-foreground);
      }

      &[aria-pressed="true"] {
        background-color: var(--accent);
        color: var(--accent-foreground);
      }
    }

    /* Collapse double borders on connected outline items */
    &[data-variant="outline"]:not([data-spacing]) > .toggle:not(:first-child) {
      margin-inline-start: -1px;
    }

    &[data-variant="outline"]:not([data-spacing])[data-orientation="vertical"] > .toggle:not(:first-child) {
      margin-inline-start: 0;
      margin-block-start: -1px;
    }

    /* -- Sizes: propagate to child toggles ---------------------- */
    &[data-size="xs"] > .toggle {
      height: 1.75rem;
      padding: 0 0.25rem;
      min-width: 1.75rem;
      font-size: 0.75rem;
    }

    &[data-size="sm"] > .toggle {
      height: 2rem;
      padding: 0 0.375rem;
      min-width: 2rem;

      & svg { width: 0.875rem; height: 0.875rem; }
    }

    &[data-size="md"] > .toggle {
      height: 2.25rem;
      padding: 0 0.5rem;
      min-width: 2.25rem;
    }

    &[data-size="lg"] > .toggle {
      height: 2.5rem;
      padding: 0 0.625rem;
      min-width: 2.5rem;
    }

    &[data-size="xl"] > .toggle {
      height: 3rem;
      padding: 0 0.75rem;
      min-width: 3rem;
      font-size: 1rem;

      & svg { width: 1.125rem; height: 1.125rem; }
    }

    /* -- Vertical orientation ----------------------------------- */
    &[data-orientation="vertical"] {
      flex-direction: column;
    }

    /* -- Connected borders: merge adjacent toggle radii ---------
       Square only the corners that actually touch a neighbour:
       inline corners horizontally, block corners vertically. The
       orientation attribute is wrapped in :where() so every rule
       keeps one-class-plus-one-pseudo specificity - the later
       [data-spacing] radius restore must still win the tie.
       (The previous per-corner "restore" overrides let the
       :not(:last-child) block re-round a middle item's top-right
       corner - issue #12.) */
    &:where(:not([data-orientation="vertical"])) > .toggle:not(:first-child) {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }

    &:where(:not([data-orientation="vertical"])) > .toggle:not(:last-child) {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }

    &:where([data-orientation="vertical"]) > .toggle:not(:first-child) {
      border-start-start-radius: 0;
      border-start-end-radius: 0;
    }

    &:where([data-orientation="vertical"]) > .toggle:not(:last-child) {
      border-end-start-radius: 0;
      border-end-end-radius: 0;
    }

    /* -- Spacing: adds gap and restores individual radii --------- */
    &[data-spacing] {
      gap: 0.25rem;

      & > .toggle {
        border-radius: var(--radius-md);
      }
    }

    /* -- Disabled group ----------------------------------------- */
    /* the runtime ignores clicks in a disabled group; the cursor says so */
    &[data-disabled] {
      & > .toggle {
        opacity: 0.5;
        cursor: not-allowed;
        &:hover { background-color: transparent; color: inherit; }
      }
    }
  }

  /* -- Accessibility -------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .toggle-group .toggle {
      transition: none;
    }
  }

  @media (forced-colors: active) {
    .toggle-group > .toggle {
      border-color: ButtonBorder;

      &[aria-pressed="true"] {
        background-color: Highlight;
        color: HighlightText;
        border-color: Highlight;
      }

      &:focus-visible {
        outline-color: Highlight;
      }
    }
  }
}

/* ── components/toolbar/toolbar.css ── */
/* -- Toolbar component ------------------------------------------ */

@layer components {
  .toolbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--background);
    width: fit-content;

    /* -- Sizes ----------------------------------------------------
       data-size on the .toolbar root scales the chrome (padding/gap) and the
       direct .btn/.toggle/.toggle-group controls together, mirroring the
       button ladder (md = .btn's default 2.25rem). The descendant selector
       (0-3-0) outranks each control's own [data-size] rule (0-2-0). */
    &[data-size="xs"] {
      gap: 0.125rem;
      padding: 0.125rem;
      & :is(.btn, .toggle) { height: 1.75rem; padding: 0 0.5rem; font-size: 0.75rem; }
    }
    &[data-size="sm"] {
      gap: 0.1875rem;
      padding: 0.1875rem;
      & :is(.btn, .toggle) { height: 2rem; padding: 0 0.75rem; font-size: 0.8125rem; }
    }
    &[data-size="md"] {
      gap: 0.25rem;
      padding: 0.25rem;
      & :is(.btn, .toggle) { height: 2.25rem; }
    }
    &[data-size="lg"] {
      gap: 0.375rem;
      padding: 0.375rem;
      & :is(.btn, .toggle) { height: 2.75rem; padding: 0 1rem; font-size: 1rem; }
    }
    &[data-size="xl"] {
      gap: 0.5rem;
      padding: 0.5rem;
      & :is(.btn, .toggle) { height: 3.25rem; padding: 0 1.25rem; font-size: 1.125rem; }
    }

    /* Vertical separators stretch to fill toolbar height */
    & > .separator[data-orientation="vertical"] {
      align-self: stretch;
      height: auto;
      margin: 0.25rem 0.25rem;
    }

    /* Vertical toolbar */
    &[aria-orientation="vertical"] {
      flex-direction: column;

      & > .separator[data-orientation="horizontal"],
      & > .separator:not([data-orientation]) {
        height: 1px;
        width: 1.5rem;
        margin: 0.25rem 0;
      }
    }
  }

  @media (forced-colors: active) {
    .toolbar {
      border-color: ButtonText;
    }
  }
}

/* ── components/tooltip/tooltip.css ── */
@layer components {
  .tooltip {
    position: fixed;
    inset: auto;
    margin: 0;
    /* The UA popover stylesheet sets overflow:auto - the [data-arrow] caret
       sits OUTSIDE the border box (-4px offsets), so it got clipped to a
       sliver and overflow:auto rendered a scrollbar around the text. */
    overflow: visible;
    border: none;
    border-radius: var(--radius-md);
    background-color: var(--primary);
    color: var(--primary-foreground);
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    line-height: 1.4;
    box-shadow: var(--shadow-sm);
    pointer-events: none;
    max-width: 16rem;
    width: max-content;
    opacity: 0;
    transition: opacity 150ms ease, translate 150ms ease, display 150ms allow-discrete;

    /* -- Default: top center -- */
    position-area: top;
    margin-bottom: 6px;
    translate: 0 2px;
    position-try-fallbacks: flip-block, flip-inline;

    &:popover-open { opacity: 1; translate: 0 0; }

    /* ----- Side variants ----- */
    &[data-side="bottom"] {
      position-area: bottom;
      margin-bottom: 0;
      margin-top: 6px;
      translate: 0 -2px;
      &:popover-open { translate: 0 0; }
    }

    &[data-side="left"] {
      position-area: left;
      margin-bottom: 0;
      margin-right: 6px;
      translate: 2px 0;
      &:popover-open { translate: 0 0; }
    }

    &[data-side="right"] {
      position-area: right;
      margin-bottom: 0;
      margin-left: 6px;
      translate: -2px 0;
      &:popover-open { translate: 0 0; }
    }

    /* ----- Align variants (combined with side) -----
       span-*: the tooltip starts AT the trigger's edge and extends past it.
       (The corner areas - "top left" - put it entirely beside the trigger,
       pointing at nothing.) start = shares the trigger's start edge. */
    &[data-align="start"] {
      &:not([data-side="left"]):not([data-side="right"]) { position-area: top span-right; }
      &[data-side="bottom"] { position-area: bottom span-right; }
      &[data-side="left"] { position-area: left span-bottom; }
      &[data-side="right"] { position-area: right span-bottom; }
    }

    &[data-align="end"] {
      &:not([data-side="left"]):not([data-side="right"]) { position-area: top span-left; }
      &[data-side="bottom"] { position-area: bottom span-left; }
      &[data-side="left"] { position-area: left span-top; }
      &[data-side="right"] { position-area: right span-top; }
    }

    /* ----- Arrow ----- */
    & [data-arrow] {
      position: absolute;
      width: 8px;
      height: 8px;
      background: inherit;
      rotate: 45deg;
      border: none;
    }

    /* Arrow placement - default (top side): arrow at bottom center */
    &:not([data-side]), &[data-side="top"] {
      & [data-arrow] { bottom: -4px; left: 50%; margin-left: -4px; }
    }
    &[data-side="bottom"] {
      & [data-arrow] { top: -4px; left: 50%; margin-left: -4px; }
    }
    &[data-side="left"] {
      & [data-arrow] { right: -4px; top: 50%; margin-top: -4px; }
    }
    &[data-side="right"] {
      & [data-arrow] { left: -4px; top: 50%; margin-top: -4px; }
    }

    /* Aligned tooltips: the arrow sits near the shared edge, so it points
       into the trigger (a centred arrow would point past a narrow trigger) */
    &[data-align="start"]:not([data-side="left"]):not([data-side="right"]) [data-arrow] { left: 1rem; margin-left: -4px; }
    &[data-align="end"]:not([data-side="left"]):not([data-side="right"]) [data-arrow] { left: auto; right: 1rem; margin-left: 0; margin-right: -4px; }
    &[data-align="start"]:is([data-side="left"], [data-side="right"]) [data-arrow] { top: 0.75rem; margin-top: -4px; }
    &[data-align="end"]:is([data-side="left"], [data-side="right"]) [data-arrow] { top: auto; bottom: 0.75rem; margin-top: 0; margin-bottom: -4px; }
  }

  @starting-style {
    .tooltip:popover-open { opacity: 0; translate: 0 2px; }
    .tooltip[data-side="bottom"]:popover-open { opacity: 0; translate: 0 -2px; }
    .tooltip[data-side="left"]:popover-open { opacity: 0; translate: 2px 0; }
    .tooltip[data-side="right"]:popover-open { opacity: 0; translate: -2px 0; }
  }
}

/* Accessibility: suppress motion for users who request it (REQUIRED for all
   components - AGENTS.md "Accessibility CSS"). Near-zero duration instead of
   `none` keeps transitionend/animationend (and discrete display flips)
   firing so JS state machines that await them keep working. */
@media (prefers-reduced-motion: reduce) {
  @layer components {
    .tooltip,
    .tooltip *,
    .tooltip::before,
    .tooltip::after,
    .tooltip *::before,
    .tooltip *::after,
    .tooltip::backdrop {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

/* ── components/tracking-status/tracking-status.css ── */
/* -- Tracking Status (website · Shop) -------------------------------------
   Shows an order's fulfillment progress and shipment links - the estimated arrival, the steps from ordered to delivered, and the carrier's event log. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-tracking-status, .mk-tracking-status *, .mk-tracking-status ::before, .mk-tracking-status ::after) { box-sizing: border-box; }

  .mk-tracking-status { container: mk-tracking-status / inline-size; display: grid; gap: 1.5rem; width: 100%; padding: 1.5rem; border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground); }
  .mk-tracking-status-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem;
    & h2 { margin: 0; font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); }
    & p { margin: 0.125rem 0 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
  }
  .mk-tracking-status-carrier { display: grid; justify-items: end; gap: 0.125rem; font-size: 0.875rem;
    & span { color: var(--muted-foreground); }
    & a { color: var(--primary); font-family: var(--font-mono); font-weight: 600; text-decoration: none; }
    & a:hover { text-decoration: underline; }
  }
  .mk-tracking-status-steps {
    --mk-tracking-progress: 0%;

    position: relative;
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;

    & li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0 0.75rem; align-items: center; }
    & strong { font-size: 0.9375rem; font-weight: 600; }
    & small { grid-column: 2; color: var(--muted-foreground); font-size: 0.8125rem; }
    & li:not([data-done], [aria-current]) strong { color: var(--muted-foreground); font-weight: 500; }
  }
  .mk-tracking-status-dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    grid-row: span 2;
    width: 1.75rem;
    height: 1.75rem;
    border: 2px solid var(--border);
    border-radius: 50%;
    background: var(--card);
    box-sizing: border-box;

    & svg { width: 0.875rem; height: 0.875rem; }
  }
  [data-done] > .mk-tracking-status-dot { border-color: #16a34a; background: #16a34a; color: #fff; }
  [aria-current] > .mk-tracking-status-dot { border-color: #16a34a; box-shadow: 0 0 0 4px color-mix(in oklch, #16a34a 18%, transparent); }
  [aria-current] > .mk-tracking-status-dot::after { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #16a34a; }
  .mk-tracking-status-log {
    border-block-start: 1px solid var(--border);
    padding-block-start: 1rem;

    & summary { cursor: pointer; font-size: 0.875rem; font-weight: 600; }
    & summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
    & ol { display: grid; gap: 0.75rem; margin: 0.875rem 0 0; padding: 0; list-style: none; }
    & li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; font-size: 0.875rem; }
    & time { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
    & span { color: var(--muted-foreground); }
  }

  .mk-tracking-status[data-variant="compact"] { gap: 0.75rem; padding: 1rem 1.25rem;
    & .mk-tracking-status-head p { font-size: 1rem; }
  }
  .mk-tracking-status-bar { height: 0.375rem; border-radius: 999px; background: linear-gradient(90deg, #16a34a var(--mk-tracking-progress, 0%), var(--muted) 0); }

  @container mk-tracking-status (min-width: 40rem) {
    .mk-tracking-status-steps {
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
      gap: 0.5rem;

      & li { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0.25rem; text-align: center; }
      & small { grid-column: 1; }
      &::before, &::after { content: ""; position: absolute; top: 0.8125rem; left: 12.5%; height: 2px; }
      &::before { right: 12.5%; background: var(--border); }
      &::after { width: calc((75%) * var(--mk-tracking-progress) / 100%); background: #16a34a; }
    }
    .mk-tracking-status-dot { grid-row: auto; margin-block-end: 0.5rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    [data-done] > .mk-tracking-status-dot, [aria-current] > .mk-tracking-status-dot::after { background: Highlight; forced-color-adjust: none; }
    .mk-tracking-status-steps::after { background: Highlight; }
  }
}

/* ── components/tree-view/tree-view.css ── */
@layer components {
  .tree {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
  }

  .tree-group {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.25rem;
  }

  .tree-item {
    padding: 0;
  }

  .tree-branch {
    border: none;

    /* Two gotchas, both required for the branch to glide:
       1. `::details-content` must attach to the compound (`&::details-content`,
          NOT `& ::details-content` - the descendant form never matches, the
          pseudo's originating element is the subject itself).
       2. `block-size: auto` is a keyword - without interpolate-size the
          0→auto pair is non-interpolable and the transition silently snaps. */
    &::details-content {
      block-size: 0;
      overflow-y: clip;
      interpolate-size: allow-keywords;
      transition: block-size 200ms ease, content-visibility 200ms allow-discrete;
    }

    &[open]::details-content {
      block-size: auto;
    }
  }

  @starting-style {
    .tree-branch[open]::details-content {
      block-size: 0;
    }
  }

  .tree-branch-trigger {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--foreground);
    list-style: none;

    &:hover {
      background-color: var(--accent);
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: -2px;
    }

    &::-webkit-details-marker {
      display: none;
    }

    & svg {
      width: 1rem;
      height: 1rem;
      flex-shrink: 0;
    }

    & svg:first-child {
      width: 0.875rem;
      height: 0.875rem;
      color: var(--muted-foreground);
      transition: transform 200ms ease;
    }
  }

  details[open] > .tree-branch-trigger > svg:first-child {
    transform: rotate(90deg);
  }

  .tree-leaf {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    padding-left: calc(0.5rem + 0.875rem + 0.375rem);
    border-radius: var(--radius-md);
    color: var(--foreground);
    cursor: default;

    &:hover {
      background-color: var(--accent);
    }

    & svg {
      width: 1rem;
      height: 1rem;
      flex-shrink: 0;
      color: var(--muted-foreground);
    }
  }
  /* -- Checkboxes (data-checkable) ---------------------------------
     A .tree-check (the checkbox component) sits after the icons, before
     the label; tree-view.js cascades and rolls it up (indeterminate). */
  .tree-check {
    flex-shrink: 0;
    margin: 0;
  }
  .tree[data-checkable] .tree-leaf:has(.tree-check) { cursor: pointer; }

  /* -- Drag & drop (data-sortable) ----------------------------------
     A dragged item fades; the row under the pointer shows where it lands:
     a line above / below (before / after) or a tinted frame (into a
     folder). */
  .tree[data-sortable] :is(.tree-branch-trigger, .tree-leaf)[draggable="true"] { cursor: grab; }
  .tree[data-sortable] :is(.tree-branch-trigger, .tree-leaf):active { cursor: grabbing; }
  .tree [data-dragging] > :is(.tree-leaf, details > .tree-branch-trigger) { opacity: 0.4; }
  :is(.tree-branch-trigger, .tree-leaf) {
    &[data-drop="before"] { box-shadow: inset 0 2px 0 var(--primary); }
    &[data-drop="after"] { box-shadow: inset 0 -2px 0 var(--primary); }
    &[data-drop="inside"] {
      background-color: color-mix(in oklch, var(--primary) 12%, transparent);
      box-shadow: inset 0 0 0 1px var(--primary);
    }
  }
  /* -- Labels -----------------------------------------------------
     The label is the trigger's / leaf's last <span>. Deep nesting eats the
     inline space (1.25rem indent per level), so a long label truncates with
     an ellipsis instead of overflowing the tree - put the full text in
     title="…" when it matters. Leaves may be links (<a class="tree-leaf">,
     navigation trees): no underline, pointer cursor. */
  :is(.tree-branch-trigger, .tree-leaf) > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  a.tree-leaf {
    text-decoration: none;
    cursor: pointer;
  }

  /* -- Selection (opt-in: data-selectable on .tree) ---------------
     aria-selected on the treeitem is the state (tree-view.js writes it on
     click / Enter / Space; authored markup may preset it). The selected row
     gets a primary-tinted surface and medium weight - distinct from the
     neutral accent hover surface, in every theme. The row is the item's
     leaf OR its branch's <summary> (a grandchild: <li> > <details> > <summary>). */
  :is(.tree-item[aria-selected="true"] > .tree-leaf,
    .tree-item[aria-selected="true"] > .tree-branch > .tree-branch-trigger) {
    background-color: color-mix(in oklch, var(--primary) 12%, transparent);
    color: var(--foreground);
    font-weight: 500;
  }

  .tree[data-selectable] :is(.tree-leaf, .tree-branch-trigger) {
    cursor: pointer;
  }

  /* -- Disabled: aria-disabled="true" on the treeitem --------------
     Still focusable (APG: disabled items stay in the keyboard path) but not
     operable - tree-view.js refuses to open or select it. The dimming covers
     the row only; an open disabled branch's children keep their own state. */
  :is(.tree-item[aria-disabled="true"] > .tree-leaf,
    .tree-item[aria-disabled="true"] > .tree-branch > .tree-branch-trigger) {
    opacity: 0.5;
    cursor: not-allowed;

    &:hover {
      background-color: transparent;
    }
  }

  /* -- Empty branch -----------------------------------------------
     A folder with no children shows a muted placeholder row instead of
     opening onto nothing. Text: data-empty on the .tree-group ("Empty" by
     default). :has() rather than :empty - authored whitespace would defeat
     :empty. Generated content: screen readers announce the group's size. ::after, because
     the guides variant already draws its line with ::before. */
  .tree-group:not(:has(> .tree-item))::after {
    content: 'Empty';
    display: block;
    padding: 0.25rem 0.5rem;
    padding-left: calc(0.5rem + 0.875rem + 0.375rem);
    color: var(--muted-foreground);
    font-style: italic;
  }

  .tree-group[data-empty]:not(:has(> .tree-item))::after {
    content: attr(data-empty);
  }

  /* -- Variant: guides --------------------------------------------
     data-variant="guides" on the .tree root draws one vertical guideline
     per nested .tree-group, so the depth of nesting reads at a glance. The
     line sits under the parent branch's chevron centre (trigger padding
     0.5rem + half the 0.875rem chevron) and spans the whole group; it is a
     border, not a background, so forced-colors keeps it visible. The line
     of the innermost group that holds focus darkens - the keyboard user
     sees which level they are on. */
  .tree[data-variant="guides"] .tree-group {
    position: relative;

    &::before {
      content: '';
      position: absolute;
      inset-block: 0;
      inset-inline-start: calc(0.5rem + 0.4375rem - 0.5px);
      border-inline-start: 1px solid var(--border);
      pointer-events: none;
    }

    &:focus-within:not(:has(.tree-group:focus-within))::before {
      border-inline-start-color: var(--muted-foreground);
    }
  }

  /* -- Density ----------------------------------------------------
     data-density on the .tree root scales the row padding-block. Indent
     (padding-left) is structural - untouched. comfortable == the default. */
  .tree:where([data-density="compact"]) {
    & .tree-branch-trigger, & .tree-leaf { padding-block: 0.125rem; }
  }
  .tree:where([data-density="comfortable"]) {
    & .tree-branch-trigger, & .tree-leaf { padding-block: 0.25rem; }
  }
  .tree:where([data-density="spacious"]) {
    & .tree-branch-trigger, & .tree-leaf { padding-block: 0.375rem; }
  }

}

/* Accessibility: suppress motion for users who request it (REQUIRED for all
   components - AGENTS.md "Accessibility CSS"). Near-zero duration instead of
   `none` keeps transitionend/animationend (and discrete display flips)
   firing so JS state machines that await them keep working. */
@media (prefers-reduced-motion: reduce) {
  @layer components {
    .tree,
    .tree *,
    .tree::before,
    .tree::after,
    .tree *::before,
    .tree *::after,
    .tree::backdrop,
    .tree-branch,
    .tree-branch *,
    .tree-branch::before,
    .tree-branch::after,
    .tree-branch *::before,
    .tree-branch *::after,
    .tree-branch::backdrop,
    .tree-branch::details-content,
    .tree-branch-trigger,
    .tree-branch-trigger *,
    .tree-branch-trigger::before,
    .tree-branch-trigger::after,
    .tree-branch-trigger *::before,
    .tree-branch-trigger *::after,
    .tree-branch-trigger::backdrop,
    .tree-group,
    .tree-group *,
    .tree-group::before,
    .tree-group::after,
    .tree-group *::before,
    .tree-group *::after,
    .tree-group::backdrop,
    .tree-item,
    .tree-item *,
    .tree-item::before,
    .tree-item::after,
    .tree-item *::before,
    .tree-item *::after,
    .tree-item::backdrop,
    .tree-leaf,
    .tree-leaf *,
    .tree-leaf::before,
    .tree-leaf::after,
    .tree-leaf *::before,
    .tree-leaf *::after,
    .tree-leaf::backdrop {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

/* Forced colors (Windows High Contrast) drop the tinted surface - the
   selected row must still read as selected: system
   Highlight pair, the same signal native listboxes use. */
@media (forced-colors: active) {
  @layer components {
    :is(.tree-item[aria-selected="true"] > .tree-leaf,
      .tree-item[aria-selected="true"] > .tree-branch > .tree-branch-trigger) {
      forced-color-adjust: none;
      background-color: Highlight;
      color: HighlightText;
    }
  }
}

/* ── components/type-badge/type-badge.css ── */
/* -- Type Badge component ------------------------------------ */

@layer components {
  .type-badge {
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    font-family: var(--font-mono);
    padding: 0.125rem 0.375rem;
    border: 1px solid;
    border-radius: var(--radius-sm);
    background: transparent;
    flex-shrink: 0;
    line-height: 1.4;

    &[data-size="xs"] { font-size: 0.5625rem; }
    &[data-size="sm"] { font-size: 0.6875rem; }
    &[data-size="md"] { font-size: 0.8125rem; }
    &[data-size="lg"] { font-size: 0.9375rem; }
    &[data-size="xl"] { font-size: 1.0625rem; }

    &[data-type="ATM"] { color: #06B6D4; border-color: color-mix(in oklch, #06B6D4 40%, transparent); }
    &[data-type="MOL"] { color: #3B82F6; border-color: color-mix(in oklch, #3B82F6 40%, transparent); }
    &[data-type="ORG"] { color: #8B5CF6; border-color: color-mix(in oklch, #8B5CF6 40%, transparent); }
    &[data-type="BLK"] { color: #F59E0B; border-color: color-mix(in oklch, #F59E0B 40%, transparent); }
    &[data-type="TPL"] { color: #64748B; border-color: color-mix(in oklch, #64748B 40%, transparent); }
  }

  .dark .type-badge {
    &[data-type="ATM"] { color: #22D3EE; border-color: color-mix(in oklch, #22D3EE 40%, transparent); }
    &[data-type="MOL"] { color: #60A5FA; border-color: color-mix(in oklch, #60A5FA 40%, transparent); }
    &[data-type="ORG"] { color: #A78BFA; border-color: color-mix(in oklch, #A78BFA 40%, transparent); }
    &[data-type="BLK"] { color: #FBBF24; border-color: color-mix(in oklch, #FBBF24 40%, transparent); }
    &[data-type="TPL"] { color: #94A3B8; border-color: color-mix(in oklch, #94A3B8 40%, transparent); }
  }

  @media (forced-colors: active) {
    .type-badge { color: CanvasText; border-color: CanvasText; }
  }
}

/* ── components/typewriter/typewriter.css ── */
/* -- Typewriter component ---------------------------------------
   A line typed character by character behind a cursor, deleted and
   cycled through a list of strings. The authored strings stay in the DOM
   for assistive tech (visually hidden); the runtime paints an aria-hidden
   copy. Without script, the first string shows as plain text. */

@layer components {
  .typewriter {
    --_cursor: var(--typewriter-cursor-color, currentColor);
    position: relative;
    display: inline;

    /* no script (or not yet initialized): the first string, as text */
    &:not([data-init]) > :not(:first-child) { display: none; }

    /* initialized: the authored strings are read, not seen */
    & > .typewriter-source {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }

    & > .typewriter-line { white-space: pre-wrap; }

    /* -- Cursor: a bar by default; solid while typing, blinking idle -- */
    & .typewriter-cursor {
      display: inline-block;
      width: max(2px, 0.08em);
      height: 1.1em;
      margin-inline-start: 0.06em;
      vertical-align: -0.15em;
      background: var(--_cursor);
      animation: typewriter-blink 1s steps(1) infinite;
    }
    &:is([data-phase="typing"], [data-phase="deleting"]) .typewriter-cursor { animation: none; }

    &[data-cursor="block"] .typewriter-cursor { width: 0.55em; opacity: 0.85; }
    &[data-cursor="underscore"] .typewriter-cursor {
      width: 0.6em;
      height: max(2px, 0.1em);
      vertical-align: -0.1em;
    }
    &[data-cursor="none"] .typewriter-cursor { display: none; }
    /* data-cursor-hide: "typing" = only while idle; "done" = gone at the end */
    &[data-cursor-hide="typing"]:is([data-phase="typing"], [data-phase="deleting"]) .typewriter-cursor,
    &[data-cursor-hide="done"][data-state-name="done"] .typewriter-cursor { visibility: hidden; }

    /* -- data-reserve: as wide as the longest string from the start --- */
    &[data-reserve] {
      display: inline-grid;
      justify-items: start;
      vertical-align: bottom;
      & > :is(.typewriter-line, .typewriter-ghost) { grid-area: 1 / 1; }
      & > .typewriter-ghost {
        display: grid;
        visibility: hidden;
        pointer-events: none;
        /* room for the cursor after the longest string */
        padding-inline-end: 0.2em;
        & > span { grid-area: 1 / 1; white-space: pre; }
      }
      & > .typewriter-line { white-space: pre; }
    }
    &[data-reserve][data-align="center"] { justify-items: center; }
    &[data-reserve][data-align="end"] { justify-items: end; }
  }

  @keyframes typewriter-blink {
    50% { opacity: 0; }
  }

  /* -- Accessibility -------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    /* the runtime swaps whole strings instead of typing; the cursor stays still */
    .typewriter .typewriter-cursor { animation: none; }
  }

  @media (prefers-contrast: more) {
    .typewriter[data-cursor="block"] .typewriter-cursor { opacity: 1; }
  }

  @media (forced-colors: active) {
    .typewriter .typewriter-cursor { background: CanvasText; forced-color-adjust: none; }
  }
}

/* ── components/typography/typography.css ── */
/* -- Typography component --------------------------------------- */

/* -- Base text ---------------------------------------------- */
/* Sets the default font size for the entire page.            */
/* All typography classes are sized relative to this baseline. */
@layer base {
  body {
    font-size: 0.875rem;
    line-height: 1.5;
  }
}

@layer components {
  /* -- Headings ---------------------------------------------- */
  .h1 {
    scroll-margin-top: 5rem;
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    text-wrap: balance;
    color: var(--foreground);
  }

  .h2 {
    scroll-margin-top: 5rem;
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    text-wrap: balance;
    color: var(--foreground);
    border-block-end: 1px solid var(--border);
    padding-block-end: 0.5rem;

    &:first-child { margin-block-start: 0; }
  }

  .h3 {
    scroll-margin-top: 5rem;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    text-wrap: balance;
    color: var(--foreground);
  }

  .h4 {
    scroll-margin-top: 5rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    text-wrap: balance;
    color: var(--foreground);
  }

  /* -- Paragraph --------------------------------------------- */
  .p {
    font-size: 0.875rem;
    line-height: 1.75;
    text-wrap: pretty;
    color: var(--foreground);

    &:not(:first-child) { margin-block-start: 1.5rem; }
  }

  /* -- Lead --------------------------------------------------- */
  .lead {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--muted-foreground);
    text-wrap: pretty;
  }

  /* -- Large -------------------------------------------------- */
  .large {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground);
  }

  /* -- Small -------------------------------------------------- */
  .small {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    color: var(--foreground);
  }

  /* -- Muted -------------------------------------------------- */
  .muted {
    font-size: 0.875rem;
    color: var(--muted-foreground);
  }

  /* -- Blockquote --------------------------------------------- */
  .blockquote {
    margin-block-start: 1.5rem;
    border-inline-start: 2px solid var(--border);
    padding-inline-start: 1.5rem;
    font-style: italic;
    hanging-punctuation: first last;
    color: var(--foreground);

    & p { margin: 0; }
  }

  /* -- Inline code -------------------------------------------- */
  .inline-code {
    position: relative;
    border-radius: var(--radius-sm);
    background: var(--muted);
    padding: 0.2rem 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.875em;
    font-weight: 600;
    color: var(--foreground);
  }

  /* -- CJK: Chinese, Japanese, Korean ------------------------------
     Keyed on the lang attribute, so one set of classes serves every script.
     Latin tuning is undone (negative tracking, faux italics); paragraphs
     justify between characters with strict line breaking (kinsoku: no 。
     or ， at a line start), and sentence-end punctuation may hang past the
     edge (Safari: hanging-punctuation) or trims to half width
     (Chromium: text-spacing-trim) so the justified edge stays straight.
     text-autospace adds the thin gap between CJK and Latin /
     digits that authors used to type by hand. */
  :is(.h1, .h2, .h3, .h4, .lead, .large):is(:lang(zh), :lang(ja), :lang(ko)),
  :is(:lang(zh), :lang(ja), :lang(ko)) :is(.h1, .h2, .h3, .h4, .lead, .large) {
    letter-spacing: 0;
  }
  /* Japanese headings break between phrases (bunsetsu), not mid-word */
  :is(.h1, .h2, .h3, .h4, .lead):lang(ja),
  :lang(ja) :is(.h1, .h2, .h3, .h4, .lead) {
    word-break: auto-phrase;
  }
  :is(.p, .lead, .blockquote):is(:lang(zh), :lang(ja), :lang(ko)),
  :is(:lang(zh), :lang(ja), :lang(ko)) :is(.p, .lead, .blockquote) {
    line-height: 1.9;
    line-break: strict;
    text-autospace: normal;
  }
  :is(.p, .blockquote):is(:lang(zh), :lang(ja)),
  :is(:lang(zh), :lang(ja)) :is(.p, .blockquote) {
    text-align: justify;
    text-justify: inter-character;
    /* the line-end 。，: Safari hangs it past the edge; Chromium trims the
       fullwidth glyph's blank half (text-spacing-trim) - either way the
       justified edge stays straight */
    hanging-punctuation: allow-end;
    text-spacing-trim: normal;
  }
  /* CJK has no italics - a slanted Han character is a synthetic oblique */
  .blockquote:is(:lang(zh), :lang(ja), :lang(ko)),
  :is(:lang(zh), :lang(ja), :lang(ko)) .blockquote {
    font-style: normal;
  }

  /* -- Vertical text (tategaki / 直排) ----------------------------------
     .text-vertical sets top-to-bottom lines flowing right to left. Latin
     runs lie sideways (text-orientation: mixed); .text-upright stands a
     short run (a two-digit number) upright in one cell - tate-chu-yoko.
     The spacing above uses logical properties, so headings, paragraphs and
     the blockquote rule turn with the text. Give the block a height. */
  .text-vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }
  .text-upright {
    text-combine-upright: all;
  }

  /* -- Emphasis marks (圈点 / 傍点) ---------------------------------------
     Dots beside each character instead of italics: over the text in
     Japanese (right of it when vertical), under it in Chinese. */
  .text-emphasis {
    font-style: normal;
    text-emphasis: filled dot;
    text-emphasis-position: over right;
  }
  .text-emphasis:lang(ja) { text-emphasis-style: filled sesame; }
  .text-emphasis:lang(zh) { text-emphasis-position: under right; }

  /* ruby annotations (furigana, pinyin, zhuyin) read as small, muted type */
  :is(.p, .lead, .blockquote, .h1, .h2, .h3, .h4) rt {
    font-size: 0.5em;
    color: var(--muted-foreground);
    letter-spacing: 0;
  }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-contrast: more) {
    .h1, .h2, .h3, .h4 {
      letter-spacing: 0;
    }

    .blockquote {
      border-inline-start-width: 3px;
    }

    .inline-code {
      outline: 1px solid var(--border);
    }

    .muted {
      color: var(--foreground);
    }
  }

  @media (forced-colors: active) {
    .blockquote {
      border-inline-start-color: CanvasText;
    }

    .inline-code {
      background: Canvas;
      outline: 1px solid CanvasText;
      color: CanvasText;
    }
  }
}

/* ── components/use-case/use-case.css ── */
/* -- Use Case (website · Company) -----------------------------------------
   Explains how an offering addresses one specific situation - the situation, how it helps, the outcomes, and a result worth remembering. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-use-case, .mk-use-case *, .mk-use-case ::before, .mk-use-case ::after) { box-sizing: border-box; }

  .mk-use-case { container: mk-use-case / inline-size; width: 100%; }
  .mk-use-case-layout { display: grid; gap: 2rem; align-items: center; }
  .mk-use-case-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
  .mk-use-case-eyebrow { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--primary); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    & svg { width: 1rem; height: 1rem; }
  }
  .mk-use-case-title { margin: 0; font-size: clamp(1.5rem, 3.5cqi, 2.25rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; }
  .mk-use-case-text { margin: 0; color: var(--muted-foreground); line-height: 1.7; text-wrap: pretty; }
  .mk-use-case-outcomes {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;

    & li { display: flex; gap: 0.625rem; align-items: flex-start; }
    & svg { flex: none; width: 1.125rem; height: 1.125rem; margin-block-start: 0.15rem; color: #16a34a; }
  }
  .mk-use-case-metric {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0.25rem 0 0;
    padding: 0.875rem 1.125rem;
    border-inline-start: 3px solid var(--chart-1);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: color-mix(in oklch, var(--chart-1) 8%, transparent);
    color: var(--muted-foreground);
    font-size: 0.9375rem;

    & strong { color: var(--foreground); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  }
  .mk-use-case-media { margin: 0; overflow: hidden; border-radius: var(--radius-xl); background: var(--muted);
    & img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  }

  .mk-use-case[data-variant="card"] {
    padding: 1.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);

    & .mk-use-case-title { font-size: 1.25rem; }
  }

  @container mk-use-case (min-width: 48rem) {
    .mk-use-case-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
    .mk-use-case[data-variant="reverse"] .mk-use-case-media { order: -1; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-use-case-metric { border-inline-start-color: CanvasText; }
    .mk-use-case-outcomes svg { color: CanvasText; }
  }
}

/* ── components/video-player/video-player.css ── */
/* -- Video Player (website · Media) ---------------------------------------
   Plays one video with playback controls and captions - native controls, a WebVTT captions track, title and details, chapters or a transcript. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-video-player, .mk-video-player *, .mk-video-player ::before, .mk-video-player ::after) { box-sizing: border-box; }

  .mk-video-player { container: mk-video-player / inline-size; display: grid; gap: 1rem; width: 100%; margin: 0; }
  .mk-video-player-frame { overflow: hidden; border-radius: var(--radius-xl); background: oklch(0.12 0.01 260); box-shadow: var(--shadow-lg);
    & video { display: block; width: 100%; aspect-ratio: 16 / 9; background: inherit; }
    & video::cue { background: oklch(0 0 0 / 0.72); color: #fff; font-family: var(--font-sans); }
  }
  .mk-video-player-caption { display: grid; gap: 0.375rem;
    & h3 { margin: 0; font-size: 1.125rem; font-weight: 600; }
    & p { margin: 0; color: var(--muted-foreground); font-size: 0.9375rem; line-height: 1.6; }
  }
  .mk-video-player-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; color: var(--muted-foreground); font-size: 0.8125rem;
    & span { display: inline-flex; align-items: center; gap: 0.375rem; }
    & svg { width: 0.875rem; height: 0.875rem; }
  }
  .mk-video-player-chapters { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--border);
    & li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0.75rem; padding: 0.625rem 0; border-block-end: 1px solid var(--border); font-size: 0.875rem; }
    & time { color: var(--primary); font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; }
  }
  .mk-video-player-transcript { display: grid; align-content: start; gap: 0.75rem; max-height: 22rem; padding: 1.25rem; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);
    & h3 { margin: 0; font-size: 0.9375rem; font-weight: 600; }
    & p { margin: 0; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.5rem; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.55; }
    & time { color: var(--primary); font-family: var(--font-mono); font-size: 0.75rem; }
  }

  .mk-video-player[data-variant="theater"] {
    padding: 2rem;
    border-radius: var(--radius-xl);
    background: oklch(0.14 0.01 260);
    color: #fff;

    & .mk-video-player-frame { max-width: 56rem; margin-inline: auto; width: 100%; box-shadow: 0 30px 80px -20px oklch(0 0 0 / 0.8); }
    & .mk-video-player-caption { max-width: 56rem; margin-inline: auto; width: 100%; }
    & :is(.mk-video-player-caption p, .mk-video-player-meta) { color: oklch(1 0 0 / 0.65); }
  }

  @container mk-video-player (min-width: 52rem) {
    .mk-video-player[data-variant="transcript"] .mk-video-player-layout { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1rem; align-items: start; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-video-player-frame { border: 1px solid CanvasText; }
  }
}

/* ── components/view-switcher/view-switcher.css ── */
/* -- View Switcher (website · Search & Navigation) ------------------------
   Switches a collection between layouts such as grid and list - icon or labelled segments, and the collection beside them changes with no script. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-view-switcher, .mk-view-switcher *, .mk-view-switcher ::before, .mk-view-switcher ::after) { box-sizing: border-box; }

  .mk-view-switcher { display: grid; gap: 1rem; width: 100%; }
  .mk-view-switcher-options { display: inline-flex; justify-self: end; padding: 0.1875rem; border-radius: var(--radius-md); background: var(--muted);
    & label { position: relative; display: inline-flex; align-items: center; gap: 0.375rem; height: 1.875rem; padding-inline: 0.5rem; border-radius: calc(var(--radius-md) - 2px); color: var(--muted-foreground); font-size: 0.8125rem; font-weight: 500; cursor: pointer; }
    & input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
    & svg { width: 1rem; height: 1rem; }
    & label:has(:checked) { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-xs); }
    & label:has(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 1px; }
  }
  .mk-view-switcher-collection {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;

    & li { display: grid; gap: 0.5rem; }
    & img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
    & span { display: grid; }
    & strong { font-size: 0.9375rem; }
    & small { color: var(--muted-foreground); font-size: 0.8125rem; }
  }
  .mk-view-switcher:has(.mk-view-switcher-options input[value="list"]:checked) .mk-view-switcher-collection {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;

    & li { grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; gap: 1rem; padding-block: 0.625rem; border-block-end: 1px solid var(--border); }
    & img { border-radius: var(--radius-md); }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-view-switcher-options label:has(:checked) { outline: 2px solid Highlight; }
  }
}

/* ── components/virtual-list/virtual-list.css ── */
/* -- Virtual List ----------------------------------------------- */
/* Windowed list: only the rows on screen exist in the DOM. The     */
/* sizer supplies the scrollbar length, the pool rides inside it.   */

@layer components {
  .virtual-list {
    --virtual-list-row-height: 40px;

    position: relative;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    color: var(--card-foreground);

    /* the rows are absolutely placed inside the sizer — tell the browser it
       need not look outside this box when painting or laying out */
    contain: strict;

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }
  }

  /* Row height is set with --virtual-list-row-height rather than a data-size
     scale: it is a continuous measurement the scroll maths reads, and every
     real use picks its own (a grid tile needs a different height from a text
     row). A three-value scale would only get in the way. */

  /* Height stands in for every row that could exist, so the scrollbar has the
     right length and feel. */
  .virtual-list-sizer {
    position: relative;
    width: 100%;
  }

  /* The recycled pool. Translated as a block once per frame rather than
     repositioning every row individually. */
  .virtual-list-rows {
    position: absolute;
    inset-inline: 0;
    top: 0;
    will-change: translate;
  }

  .virtual-list-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: var(--virtual-list-row-height);
    padding-inline: 0.875rem;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border);
    background: var(--card);

    &:hover {
      background: var(--accent);
      color: var(--accent-foreground);
    }
  }

  /* -- Grid (several items per row) --------------------------- */
  /* data-columns turns each recycled row into a grid of cells. The row height
     still governs the scroll maths, so make it tall enough for a whole tile. */
  .virtual-list[data-columns] {
    & .virtual-list-row {
      display: grid;
      grid-template-columns: repeat(var(--virtual-list-columns, 3), 1fr);
      gap: 0.5rem;
      padding: 0.25rem 0.5rem;
      border-bottom: none;
      background: transparent;

      &:hover {
        background: transparent;
        color: inherit;
      }
    }
  }

  .virtual-list-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.375rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    font-size: 0.75rem;
    text-align: center;

    & > span {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--muted-foreground);
    }

    & svg {
      width: 1.25rem;
      height: 1.25rem;
      color: var(--foreground);
    }

    /* Composed .image keeps its own aspect ratio and object-fit; the cell only
       says how wide it may be. Fixed dimensions matter here because a recycled
       cell swaps the src rather than the element — without them every scroll
       frame would reflow the row as each new picture arrives. */
    & > .image {
      width: 2.75rem;
      flex-shrink: 0;
      background: var(--muted);
    }

    &:hover {
      background: var(--accent);
      color: var(--accent-foreground);
    }
  }

  /* Secondary text inside a row. */
  .virtual-list-row-meta {
    margin-inline-start: auto;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
  }

  /* -- Loading and empty states ------------------------------- */
  /* Both replace the rows entirely, so the pool is simply hidden. */
  .virtual-list[data-state="loading"],
  .virtual-list[data-state="empty"] {
    & .virtual-list-rows {
      display: none;
    }

    & .virtual-list-sizer {
      height: 100% !important; /* no scrollable content in these states */
    }
  }

  /* Both overlays hang off .virtual-list itself, not the sizer: attr() reads
     the attribute of the element the pseudo-element belongs to, and
     data-empty-text is authored on the list. */
  .virtual-list[data-state="loading"]::before {
    content: "";
    position: absolute;
    inset: 0;
    /* placeholder rows, drawn rather than built from elements */
    background:
      repeating-linear-gradient(
        to bottom,
        var(--muted) 0,
        var(--muted) calc(var(--virtual-list-row-height) - 1px),
        transparent calc(var(--virtual-list-row-height) - 1px),
        transparent var(--virtual-list-row-height)
      );
    opacity: 0.6;
    animation: virtual-list-pulse 1.6s ease-in-out infinite;
  }

  .virtual-list[data-state="empty"]::after {
    content: attr(data-empty-text);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 0.875rem;
    color: var(--muted-foreground);
  }

  @keyframes virtual-list-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.3; }
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer components {
    .virtual-list,
    .virtual-list *,
    .virtual-list::before,
    .virtual-list::after,
    .virtual-list *::before,
    .virtual-list *::after,
    .virtual-list-row,
    .virtual-list-row::before,
    .virtual-list-row::after {
      transition: none;
      animation: none;
      scroll-behavior: auto;
    }
  }
}

@media (prefers-contrast: more) {
  @layer components {
    .virtual-list-row {
      border-bottom-color: var(--muted-foreground);
    }

    .virtual-list:focus-visible {
      outline-width: 3px;
    }
  }
}

@media (forced-colors: active) {
  @layer components {
    .virtual-list {
      border-color: ButtonText;
    }

    .virtual-list-row {
      border-bottom-color: ButtonText;

      &:hover {
        background: Highlight;
        color: HighlightText;
      }
    }

    .virtual-list:focus-visible {
      outline-color: Highlight;
    }
  }
}

/* ── components/window/window.css ── */
/* -- Window component --------------------------------------------
   A desktop-style window: a non-modal <dialog> with a title bar (icon,
   title, minimize / maximize / close), moved by dragging the bar, raised to
   the front on click, resized natively. Chrome styles after Windows, macOS,
   Linux (GNOME) and a retro 9x look. The controls are a
   <form method="dialog">, so the × closes the window without script. */

@layer components {
  /* the area windows live in: positioned, clipped - a desktop */
  .window-desktop {
    position: relative;
    overflow: hidden;
    min-height: 18rem;
    border-radius: var(--radius-lg);
    background:
      radial-gradient(circle at 1px 1px, color-mix(in oklch, var(--foreground) 12%, transparent) 1px, transparent 0) 0 0 / 1.25rem 1.25rem,
      var(--muted);
    isolation: isolate;
  }

  .window {
    /* the UA dialog defaults (centered, padded, bordered) - replaced */
    --_titlebar: 2.25rem;
    --_ctl: 2.75rem;
    position: absolute;
    inset: auto;
    left: var(--window-x, 2rem);
    top: var(--window-y, 2rem);
    box-sizing: border-box;
    width: var(--window-w, 24rem);
    height: var(--window-h, auto);
    max-width: none;
    max-height: none;
    min-width: 12rem;
    margin: 0;
    padding: 0;
    display: none;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    color: var(--card-foreground);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: box-shadow 150ms;

    &[open] { display: flex; }

    /* native resize handle, bottom-right */
    &[data-resizable] {
      resize: both;
      min-height: calc(var(--_titlebar) + 4rem);
    }

    /* -- Title bar ---------------------------------------------------- */
    & > .window-titlebar {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex: none;
      height: var(--_titlebar);
      padding-inline-start: 0.75rem;
      background: var(--muted);
      border-bottom: 1px solid var(--border);
      cursor: default;
      user-select: none;
      touch-action: none;

      &:focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: -2px;
      }
    }

    & .window-icon {
      flex: none;
      width: 1rem;
      height: 1rem;
      object-fit: contain;
      color: var(--muted-foreground);
    }

    & .window-title {
      flex: 1;
      min-width: 0;
      margin: 0;
      overflow: hidden;
      font: inherit;
      font-size: 0.8125rem;
      font-weight: 500;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    /* -- Controls: CSS-drawn glyphs --------------------------------------- */
    & .window-controls {
      display: flex;
      align-self: stretch;
      flex: none;
      margin: 0;
    }

    & .window-controls > button {
      position: relative;
      box-sizing: border-box;
      width: var(--_ctl);
      height: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--foreground);
      cursor: default;
      transition: background-color 120ms, color 120ms;

      &::before,
      &::after {
        content: "";
        position: absolute;
        inset: 50% auto auto 50%;
        translate: -50% -50%;
        box-sizing: border-box;
      }

      &:hover { background: color-mix(in oklch, var(--foreground) 10%, transparent); }
      &:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
    }

    /* minimize: a bar */
    & .window-minimize::before {
      width: 0.625rem;
      height: 1px;
      background: currentColor;
    }
    /* maximize: a box; restore (while maximized): two boxes */
    & .window-maximize::before {
      width: 0.625rem;
      height: 0.625rem;
      border: 1px solid currentColor;
      border-radius: 1px;
    }
    &[data-maximized] .window-maximize {
      &::before { translate: -40% -60%; width: 0.5rem; height: 0.5rem; }
      &::after {
        translate: -65% -35%;
        width: 0.5rem;
        height: 0.5rem;
        border: 1px solid currentColor;
        border-radius: 1px;
        background: var(--muted);
      }
    }
    /* close: an × */
    & .window-close {
      &::before,
      &::after {
        width: 0.75rem;
        height: 1px;
        background: currentColor;
        rotate: 45deg;
      }
      &::after { rotate: -45deg; }
    }
    /* Windows chrome: the × turns red with a white glyph. Stated through
       .window-controls > so it outranks the shared control hover (a light
       tint) - otherwise the white glyph landed on light grey. The other
       chromes style their own close button. */
    &:not([data-chrome="mac"], [data-chrome="linux"], [data-chrome="retro"]) .window-controls > .window-close:hover {
      background: oklch(0.58 0.21 27);
      color: oklch(0.99 0 0);
    }

    /* -- Toolbar: an app's menubar / buttons under the title bar -------- */
    & > .window-toolbar {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      flex: none;
      min-height: 2.25rem;
      padding: 0.125rem 0.375rem;
      border-bottom: 1px solid var(--border);
      background: var(--background);
      overflow-x: auto;
    }

    /* -- Body / status bar -------------------------------------------- */
    & > .window-body {
      flex: 1;
      min-height: 0;
      padding: 1rem;
      overflow: auto;
      overscroll-behavior: contain;
    }
    & > .window-body[data-flush] { padding: 0; }

    & > .window-statusbar {
      display: flex;
      align-items: center;
      gap: 1rem;
      flex: none;
      padding: 0.25rem 0.75rem;
      border-top: 1px solid var(--border);
      background: var(--muted);
      color: var(--muted-foreground);
      font-size: 0.75rem;
    }

    /* -- Active / inactive ---------------------------------------------- */
    &:not([data-active]) {
      box-shadow: var(--shadow-sm);
      & > .window-titlebar { color: var(--muted-foreground); }
    }

    /* -- Maximized: fill the desktop; minimized: rolled up to the bar -- */
    &[data-maximized] {
      inset: 0;
      width: auto;
      height: auto;
      border-radius: 0;
      border-width: 0;
      resize: none;
      box-shadow: none;
    }
    &[data-minimized] {
      height: auto;
      min-height: 0;
      resize: none;
      & > :not(.window-titlebar) { display: none; }
      & > .window-titlebar { border-bottom: 0; }
    }
    &[data-dragging] { transition: none; }

    /* -- Chrome: macOS - traffic lights on the left, centred title ------- */
    &[data-chrome="mac"] {
      --_ctl: 1.25rem;
      & > .window-titlebar { padding-inline: 0.75rem; }
      & .window-controls {
        order: -1;
        align-self: center;
        gap: 0.5rem;
        margin-inline-end: 0.25rem;
      }
      & .window-controls > button {
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 999px;
        color: oklch(0.3 0.05 30 / 0);
        &:hover { background: var(--_light); }
        &::before,
        &::after { scale: 0.7; }
      }
      /* the glyphs appear when the pointer is over the lights */
      & .window-controls:hover > button { color: oklch(0.3 0.05 30 / 0.8); }
      & .window-close { order: 1; --_light: oklch(0.68 0.2 25); }
      & .window-minimize { order: 2; --_light: oklch(0.82 0.16 85); }
      & .window-maximize { order: 3; --_light: oklch(0.74 0.17 145); }
      & .window-controls > button { background: var(--_light); }
      & .window-close:hover { color: oklch(0.3 0.05 30 / 0.8); }
      & .window-title { text-align: center; }
      /* the icon sits beside the centred title */
      & .window-icon { order: 1; }
      & .window-title { order: 0; }
      &[data-maximized] .window-maximize::after { background: var(--_light); }
      &:not([data-active]) .window-controls:not(:hover) > button { background: color-mix(in oklch, var(--muted-foreground) 35%, transparent); }
    }

    /* -- Chrome: Linux (GNOME) - round grey buttons on the right --------- */
    &[data-chrome="linux"] {
      --_ctl: 1.5rem;
      & > .window-titlebar { padding-inline-end: 0.5rem; }
      & .window-title { text-align: center; font-weight: 600; }
      & .window-controls { align-self: center; gap: 0.5rem; }
      & .window-controls > button {
        width: var(--_ctl);
        height: var(--_ctl);
        border-radius: 999px;
        background: color-mix(in oklch, var(--foreground) 9%, transparent);
        &::before,
        &::after { scale: 0.8; }
        &:hover { background: color-mix(in oklch, var(--foreground) 16%, transparent); }
      }
      & .window-close:hover { background: color-mix(in oklch, var(--foreground) 16%, transparent); color: var(--foreground); }
      &[data-maximized] .window-maximize::after { background: transparent; }
    }

    /* -- Chrome: retro - a bevelled 9x window with a gradient title ------ */
    &[data-chrome="retro"] {
      --_face: oklch(0.8 0 0);
      --_hi: oklch(1 0 0);
      --_lo: oklch(0.5 0 0);
      --_ctl: 1.125rem;
      padding: 3px;
      border: 0;
      border-radius: 0;
      background: var(--_face);
      color: oklch(0.15 0 0);
      box-shadow:
        inset -1px -1px 0 oklch(0.1 0 0), inset 1px 1px 0 var(--_face),
        inset -2px -2px 0 var(--_lo), inset 2px 2px 0 var(--_hi);
      & > .window-titlebar {
        height: 1.375rem;
        padding-inline: 0.25rem 0.125rem;
        gap: 0.25rem;
        border: 0;
        background: linear-gradient(90deg, oklch(0.3 0.16 264), oklch(0.62 0.12 240));
        color: oklch(1 0 0);
      }
      & .window-icon { color: inherit; }
      & .window-title { font-weight: 700; font-size: 0.75rem; }
      & .window-controls { align-self: center; gap: 2px; }
      & .window-controls > button {
        width: calc(var(--_ctl) + 2px);
        height: var(--_ctl);
        background: var(--_face);
        color: oklch(0.1 0 0);
        box-shadow:
          inset -1px -1px 0 oklch(0.1 0 0), inset 1px 1px 0 var(--_hi),
          inset -2px -2px 0 var(--_lo);
        &:hover { background: var(--_face); color: oklch(0.1 0 0); }
        &:active { box-shadow: inset 1px 1px 0 oklch(0.1 0 0), inset -1px -1px 0 var(--_hi), inset 2px 2px 0 var(--_lo); }
        &::before,
        &::after { scale: 0.75; }
      }
      & .window-close { margin-inline-start: 2px; }
      & .window-minimize::before { height: 2px; translate: -50% 150%; }
      & .window-maximize::before { border-top-width: 2px; }
      & .window-close::before,
      & .window-close::after { height: 2px; }
      &[data-maximized] .window-maximize::after { background: var(--_face); border-top-width: 2px; }
      & > .window-body {
        margin-top: 2px;
        background: oklch(1 0 0);
        box-shadow: inset 1px 1px 0 var(--_lo), inset -1px -1px 0 var(--_hi), inset 2px 2px 0 oklch(0.1 0 0);
      }
      & > .window-toolbar {
        margin-top: 2px;
        border: 0;
        background: var(--_face);
        color: oklch(0.15 0 0);
      }
      & > .window-statusbar {
        margin-top: 2px;
        border: 0;
        background: var(--_face);
        color: oklch(0.15 0 0);
        box-shadow: inset 1px 1px 0 var(--_lo), inset -1px -1px 0 var(--_hi);
      }
      &:not([data-active]) > .window-titlebar {
        background: linear-gradient(90deg, oklch(0.55 0 0), oklch(0.72 0 0));
        color: oklch(0.85 0 0);
      }
      &[data-maximized] { padding: 3px; }
    }
  }

  /* -- Accessibility -------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .window,
    .window .window-controls > button { transition: none; }
  }

  @media (prefers-contrast: more) {
    .window { border-color: var(--foreground); }
    .window > .window-titlebar { border-bottom-color: var(--foreground); }
    .window:not([data-active]) > .window-titlebar { color: var(--foreground); }
  }

  @media (forced-colors: active) {
    .window { border: 1px solid CanvasText; }
    .window[data-active] > .window-titlebar {
      background: Highlight;
      color: HighlightText;
      forced-color-adjust: none;
    }
    .window .window-controls > button::before,
    .window .window-controls > button::after { border-color: ButtonText; }
  }
}

/* ── components/wishlist-item/wishlist-item.css ── */
/* -- Wishlist Item (website · Shop) ---------------------------------------
   Displays one saved product with purchase and removal actions - stock status, price, when it was saved, add to cart or get notified. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-wishlist-item, .mk-wishlist-item *, .mk-wishlist-item ::before, .mk-wishlist-item ::after) { box-sizing: border-box; }

  .mk-wishlist-list { display: grid; margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--border); }
  .mk-wishlist-item {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.5rem 1.25rem;
    padding-block: 1.25rem;
    border-block-end: 1px solid var(--border);
  }
  .mk-wishlist-item-image { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-md); background: var(--muted); }
  .mk-wishlist-item:has([data-stock="out"]) .mk-wishlist-item-image { opacity: 0.5; filter: grayscale(1); }
  .mk-wishlist-item-info { display: grid; gap: 0.125rem; min-width: 0; }
  .mk-wishlist-item-name { margin: 0; font-size: 0.9375rem; font-weight: 600;
    & a { color: inherit; text-decoration: none; }
    & a:hover { text-decoration: underline; }
  }
  .mk-wishlist-item-options, .mk-wishlist-item-added { margin: 0; color: var(--muted-foreground); font-size: 0.8125rem; }
  .mk-wishlist-item-stock { display: inline-flex; align-items: center; gap: 0.375rem; margin: 0.25rem 0 0; font-size: 0.8125rem; font-weight: 600;
    &::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: currentColor; }
    &[data-stock="in"] { color: #15803d; }
    &[data-stock="low"] { color: #b45309; }
    &[data-stock="out"] { color: var(--muted-foreground); }
  }
  .mk-wishlist-item-price { font-variant-numeric: tabular-nums; }
  .mk-wishlist-item-actions { display: flex; align-items: center; gap: 0.25rem; }
  .mk-wishlist-item-remove { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--muted-foreground); cursor: pointer;
    & svg { width: 1rem; height: 1rem; }
    &:hover { background: var(--accent); color: var(--destructive); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
  }

  .mk-wishlist-item[data-variant="card"] {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    padding: 0.875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);

    & .mk-wishlist-item-image { grid-column: 1 / -1; }
    & .mk-wishlist-item-actions { grid-column: 1 / -1; justify-content: space-between; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-wishlist-item-stock::before { forced-color-adjust: none; }
  }
}