/*!
 * ldcss v3.3.0 — Lena Dijksma CSS
 * A small, opinionated framework: classes (ld-*) + custom attributes (data-ld-*)
 * License: MIT. Built from src/ — edit the files there, not this one.
 *
 * Cascade layers (lowest → highest priority): ld.tokens → ld.base → ld.components → ld.utilities → ld.escape → ld.variants.
 * Anything you write outside a layer beats every one of them without
 * needing !important or a more specific selector.
 * Retired section numbers (kept so references stay stable): §16, §29.
 */

@layer ld.tokens, ld.base, ld.components, ld.utilities, ld.escape, ld.variants;

/* JetBrains Mono, self-hosted (SIL Open Font License 1.1 — see fonts/JetBrainsMono-OFL.txt).
   Latin subset, regular + bold. Weight 500 falls back to regular.
   Nothing is requested from Google; the files load from ./fonts next to this
   stylesheet. To preload the regular weight, add to your <head>:
   <link rel="preload" href="fonts/JetBrainsMono-Regular.woff" as="font" type="font/woff" crossorigin> */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Regular.woff') format('woff');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Bold.woff') format('woff');
}

@layer ld.tokens {

/* ==========================================================================
   1. Tokens
   ========================================================================== */

/* Non-color tokens and brand. These do not change with the theme. */
:root {
  /* Brand */
  --ld-accent: #f5741e;
  --ld-accent-text: #351907;
  --ld-accent-fill: var(--ld-accent);
  /* override to a gradient for brand fills */

  /* Scale */
  --ld-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ld-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --ld-font-family: var(--ld-font-sans);
  /* what body text/components use — override via ld-font-mono/ld-font-serif */
  --ld-radius: 10px;
  --ld-border-radius-sm: calc(var(--ld-radius) / 2);
  --ld-border-radius-lg: calc(var(--ld-radius) * 2);
  /* sm and lg are derived from --ld-radius where it is set on :root. To change the
     radius for one part of the page, set all three on that element. */
  --ld-border-width: 1px;
  --ld-shadow-offset: 4px;
  /* only used by data-ld-shadow='hard', defined just below */

  --ld-space-1: 4px;
  --ld-space-2: 8px;
  --ld-space-3: 12px;
  --ld-space-4: 16px;
  --ld-gutter: var(--ld-space-4);
  /* .ld-grid-row column gutter — override to widen/narrow the 12-col grid independently of spacing utilities */
  --ld-space-5: 24px;
  --ld-space-6: 32px;
  --ld-space-8: 48px;

  --ld-sidebar-width: 15rem;
  /* .ld-shell sidebar column; override on .ld-shell for a wider/narrower one */

  --ld-text-xs: 0.75rem;
  --ld-text-sm: 0.85rem;
  --ld-text-base: 1rem;
  --ld-text-lg: 1.15rem;
  --ld-text-xl: 1.5rem;
  --ld-text-2xl: 2rem;
  --ld-text-3xl: 2.5rem;
  --ld-text-4xl: 3.25rem;

  /* Every component before this patch hardcoded font-weight: 700 for
     emphasis and left line-height as either the body 1.6 or a bare 1.25
     on headings. Tokenizing doesn't change any existing rendering — the
     defaults below match what was already hardcoded — it just gives you
     one place to soften "everything is bold" without touching every
     component rule individually. */
  --ld-weight-normal: 400;
  --ld-weight-medium: 500;
  --ld-weight-bold: 700;

  --ld-line-height-none: 1;
  --ld-line-height-tight: 1.25;
  --ld-line-height-normal: 1.6;
  --ld-line-height-relaxed: 1.75;
  --ld-line-height-loose: 2;
  /* the names used before 3.3.0 still work and follow the new ones */
  --ld-leading-tight: var(--ld-line-height-tight);
  --ld-leading-normal: var(--ld-line-height-normal);
  --ld-leading-relaxed: var(--ld-line-height-relaxed);

  /* Stacking scale. The .ld-z-* utilities in §38e already exposed these
     as classes; components reference the same values here as custom
     properties so overriding a layer (e.g. hoisting toasts above a
     third-party widget) is one line in :root instead of hunting through
     every component rule that used to hardcode the number directly. */
  --ld-z-dropdown: 20;
  --ld-z-popover: 25;
  --ld-z-tooltip: 30;
  --ld-z-modal: 50;
  --ld-z-offcanvas: 55;
  --ld-z-toast: 60;
  --ld-z-command: 70;

  --ld-duration-fast: 80ms;
  --ld-duration: 120ms;
  --ld-duration-slow: 240ms;
  --ld-transition-fast: var(--ld-duration-fast) ease;
  --ld-transition: var(--ld-duration) ease;
  --ld-transition-slow: var(--ld-duration-slow) ease;
  /* a transition is `property + token`:  transition: color var(--ld-transition-fast);
     The duration tokens are the numbers alone, for animation-duration and the like. */

  --ld-content-width: 1320px;
  /* widest the main content column gets. ld-container, ld-sidebar-layout and the
     media layouts stop growing here; set it on :root to make every page narrower or wider. */

  /* Opacity scale, 0 to 1. ld-opacity-N reads these, so changing one changes every use. */
  --ld-opacity-0: 0;
  --ld-opacity-5: 0.05;
  --ld-opacity-10: 0.1;
  --ld-opacity-20: 0.2;
  --ld-opacity-25: 0.25;
  --ld-opacity-30: 0.3;
  --ld-opacity-40: 0.4;
  --ld-opacity-50: 0.5;
  --ld-opacity-60: 0.6;
  --ld-opacity-70: 0.7;
  --ld-opacity-75: 0.75;
  --ld-opacity-80: 0.8;
  --ld-opacity-90: 0.9;
  --ld-opacity-95: 0.95;
  --ld-opacity-100: 1;
  --ld-opacity-disabled: 0.5;
  /* dimmed controls and text that cannot be used right now */
  --ld-opacity-overlay: 0.6;
  /* how dark the scrim behind text on top of an image gets (ld-media-overlay, captions) */
}

/* Light theme (default). The same block also powers an explicit
   data-ld-theme='light' subtree and data-ld-notheme, so those can never
   drift out of sync with :root again — before this, data-ld-notheme was a
   hand-copied duplicate of these values. A property declared directly on
   the element always beats one it would inherit from a dark ancestor,
   which is what lets a light/notheme subtree sit inside a dark page. */
:where(:root),
[data-ld-theme='light'],
[data-ld-notheme] {
  --ld-bg: #FAFAF7;
  --ld-surface: #FFFFFF;
  --ld-surface-raised: #F1F3F0;
  --ld-text: #14171A;
  --ld-text-muted: #5B6560;
  --ld-border: #DADFDB;
  /* structural component outline — soft by default, not high-contrast */
  --ld-border-soft: #E7EAE7;
  /* hairline dividers: table rows, card footers, list separators */
  --ld-border-control: #858E88;
  /* the boundary of a form control (input, select, switch, range track…).
     3:1 or better against bg, surface and surface-raised, which is what
     WCAG 1.4.11 asks of a control's edge. --ld-border and --ld-border-soft
     are decorative dividers and are intentionally fainter. */
  --ld-focus-ring: #14171A;
  --ld-focus-border: color-mix(in srgb, var(--ld-accent) 70%, var(--ld-focus-ring));
  /* the accent, darkened toward the focus ring colour until it reaches 3:1
     on every surface; used for the border of a focused field */
  --ld-code-text: #0c297a;
  /* dark blue — readable on light surfaces */
  --ld-shadow-color: #14171A;
  /* only used by data-ld-shadow='hard', defined below */

  /* Semantic status. Success is its own green (not the accent), so a brand
     color that isn't green-ish never has to also mean "success". Warning
     and info live here rather than inline (alert §11, terminal dot §19) so
     a theme swap or [data-ld-unstyled] subtree can reach them like every
     other status color. */
  --ld-danger: #CF2F46;
  --ld-danger-text: #FFFFFF;
  /* white on this red is 5.1:1 (it was 3.8:1 with #E8465C, under the 4.5:1 text minimum) */
  --ld-success: #27bd16;
  --ld-success-text: #0e2b0a;
  --ld-warning: #C98A1F;
  --ld-warning-text: #2E1D00;
  --ld-info: #4C8EFF;
  --ld-info-text: #04122E;

  /* The soft shadow pair is tokenized so data-ld-shadow='soft' can point at
     it from inside any theme instead of re-hardcoding both themes' values. */
  --ld-shadow-soft: 0 1px 2px rgba(20, 23, 26, 0.06), 0 6px 16px rgba(20, 23, 26, 0.08);
  --ld-shadow-soft-lg: 0 4px 12px rgba(20, 23, 26, 0.10), 0 16px 40px rgba(20, 23, 26, 0.16);
  --ld-shadow: var(--ld-shadow-soft);
  --ld-shadow-lg: var(--ld-shadow-soft-lg);
  color-scheme: light;
}

[data-ld-theme='dark'] {
  --ld-bg: #080808;
  --ld-surface: #15181A;
  --ld-surface-raised: #1C201E;
  --ld-text: #EDEFEC;
  --ld-text-muted: #8A928D;
  --ld-border: #302c2a;
  --ld-border-soft: #222623;
  --ld-border-control: #6A7470;
  --ld-danger: #FF6B7A;
  --ld-danger-text: #1A0508;
  --ld-success: #27bd16;
  --ld-success-text: #0e2b0a;
  --ld-warning: #E0A741;
  --ld-warning-text: #1F1400;
  --ld-info: #7AACFF;
  --ld-info-text: #04122E;
  --ld-shadow-color: var(--ld-accent);
  --ld-focus-ring: var(--ld-accent);
  --ld-focus-border: color-mix(in srgb, var(--ld-accent) 70%, var(--ld-focus-ring));
  --ld-code-text: var(--ld-accent);
  /* full brightness reads fine on dark surfaces */
  --ld-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.45);
  --ld-shadow-soft-lg: 0 4px 16px rgba(0, 0, 0, 0.5), 0 20px 48px rgba(0, 0, 0, 0.55);
  --ld-shadow: var(--ld-shadow-soft);
  --ld-shadow-lg: var(--ld-shadow-soft-lg);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :where(:root):not([data-ld-theme]) {
  --ld-bg: #080808;
  --ld-surface: #15181A;
  --ld-surface-raised: #1C201E;
  --ld-text: #EDEFEC;
  --ld-text-muted: #8A928D;
  --ld-border: #302c2a;
  --ld-border-soft: #222623;
  --ld-border-control: #6A7470;
  --ld-danger: #FF6B7A;
  --ld-danger-text: #1A0508;
  --ld-success: #27bd16;
  --ld-success-text: #0e2b0a;
  --ld-warning: #E0A741;
  --ld-warning-text: #1F1400;
  --ld-info: #7AACFF;
  --ld-info-text: #04122E;
  --ld-shadow-color: var(--ld-accent);
  --ld-focus-ring: var(--ld-accent);
  --ld-focus-border: color-mix(in srgb, var(--ld-accent) 70%, var(--ld-focus-ring));
  --ld-code-text: var(--ld-accent);
  /* full brightness reads fine on dark surfaces */
  --ld-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.45);
  --ld-shadow-soft-lg: 0 4px 16px rgba(0, 0, 0, 0.5), 0 20px 48px rgba(0, 0, 0, 0.55);
  --ld-shadow: var(--ld-shadow-soft);
  --ld-shadow-lg: var(--ld-shadow-soft-lg);
  color-scheme: dark;
}
}


/*
 * data-ld-unstyled — the escape hatch for teams who want to do their own
 * styling entirely. Resets the *shape* opinions (radius, shadow, border
 * weight/color, accent fill) to neutral values that get out of the way of a
 * stylesheet loaded after ldcss.css, without touching layout, spacing,
 * behavior, or accessibility wiring — those still come from ldcss. This is
 * not a full reset of every color in the framework (surfaces, text, and
 * variant colors like primary/danger still render); it targets the specific
 * tokens that make ldcss look like "a design system" rather than "plain
 * elements." Apply to <html> for the whole page, or to a container to scope
 * it to one part of the UI.
 */
[data-ld-unstyled],
[data-ld-unstyled] [data-ld-theme],
[data-ld-unstyled] [data-ld-notheme] {
  /* The two extra selectors matter: a theme block redeclares --ld-shadow and
     --ld-border on its own element, which would silently cancel this reset
     for a <body data-ld-theme="dark"> inside <html data-ld-unstyled>. */
  --ld-radius: 0px;
  --ld-border-radius-sm: 0px;
  --ld-border-radius-lg: 0px;
  --ld-shadow: none;
  --ld-shadow-lg: none;
  --ld-border-width: 1px;
  --ld-border: var(--ld-border-soft);
  --ld-accent-fill: var(--ld-accent);
}

/*
 * data-ld-shadow='hard' — brings back the original hard offset shadow
 * (and its --ld-shadow-color, which the dark theme brightens to the accent
 * color for a glow effect) for teams who want that look. Apply to <html> or
 * any ancestor, the same way data-ld-theme='dark' re-skins color; 'soft' is
 * kept as an explicit way to re-affirm the default inside a 'hard' subtree.
 * (Hover/active states on buttons/cards use their own modern lift/press
 * transitions regardless of this switch — hard mode only changes the resting
 * shadow's shape, not the interaction model.)
 */
[data-ld-shadow='hard'],
[data-ld-shadow='hard'] [data-ld-theme]:not([data-ld-shadow]),
[data-ld-shadow='hard'] [data-ld-notheme]:not([data-ld-shadow]) {
  /* Re-declared on any themed descendant (that has no shadow style of its
     own), so a nested theme cannot cancel the hard shadow set further up.
     --ld-shadow-color is read on the descendant, so it uses that theme's colour. */
  --ld-shadow: var(--ld-shadow-offset) var(--ld-shadow-offset) 0 var(--ld-shadow-color);
  --ld-shadow-lg: calc(var(--ld-shadow-offset) * 2) calc(var(--ld-shadow-offset) * 2) 0 var(--ld-shadow-color);
}

[data-ld-shadow='soft'],
[data-ld-shadow='soft'] [data-ld-theme]:not([data-ld-shadow]),
[data-ld-shadow='soft'] [data-ld-notheme]:not([data-ld-shadow]) {
  --ld-shadow: var(--ld-shadow-soft);
  --ld-shadow-lg: var(--ld-shadow-soft-lg);
}

/*
 * data-ld-notheme — freeze a subtree at its light-theme appearance no matter
 * what data-ld-theme is set to on an ancestor. Useful for brand marks,
 * screenshots-in-context, embeds, etc. that shouldn't shift with the page.
 */
[data-ld-notheme] {
  /* every color token comes from the shared light-theme block above */
  background: var(--ld-bg);
  color: var(--ld-text);
}

/*
 * prefers-contrast: more — strengthen muted text and soft borders for
 * people who've asked their OS/browser for higher contrast.
 */
@media (prefers-contrast: more) {
  :where(:root),
  [data-ld-theme='light'],
  [data-ld-notheme] {
    --ld-text-muted: #14171A;
    --ld-border-soft: #14171A;
    --ld-border-control: #14171A;
  }

  [data-ld-theme='dark'] {
    --ld-text-muted: #EDEFEC;
    --ld-border-soft: #6B746E;
    --ld-border-control: #A8B0AB;
  }
@media (prefers-color-scheme: dark) {
  :where(:root):not([data-ld-theme]) {
    --ld-text-muted: #EDEFEC;
    --ld-border-soft: #6B746E;
    --ld-border-control: #A8B0AB;
  }
}

}


}

@layer ld.base {

/* ==========================================================================
   2. Reset / base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ld-bg);
  color: var(--ld-text);
  font-family: var(--ld-font-family);
  font-size: var(--ld-text-base);
  line-height: var(--ld-line-height-normal);
  transition: background var(--ld-transition), color var(--ld-transition);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ld-font-family);
  font-weight: var(--ld-weight-bold);
  line-height: var(--ld-line-height-tight);
  margin: 0 0 var(--ld-space-3);
}

p {
  margin: 0 0 var(--ld-space-3);
  color: var(--ld-text);
}

a {
  color: inherit;
}

code,
pre {
  font-family: var(--ld-font-mono);
}

pre.ld-code {
  background: var(--ld-surface);
  border: var(--ld-border-width) solid var(--ld-border);
  border-radius: var(--ld-radius);
  box-shadow: var(--ld-shadow);
  color: var(--ld-code-text);
  padding: var(--ld-space-4);
  overflow-x: auto;
  font-size: var(--ld-text-sm);
}

code.ld-code-inline {
  background: var(--ld-surface-raised);
  color: var(--ld-code-text);
  padding: 1px 6px;
  border: 1px solid var(--ld-border-soft);
  border-radius: var(--ld-border-radius-sm);
  font-size: 0.9em;
}

:focus-visible {
  outline: 2px dashed var(--ld-focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}


}

@layer ld.components {

/* ==========================================================================
   3. Layout
   ========================================================================== */

.ld-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--ld-space-5);
}

@media (min-width: 640px) {
  .ld-container {
    max-width: min(600px, var(--ld-content-width));
  }
}

@media (min-width: 960px) {
  .ld-container {
    max-width: min(900px, var(--ld-content-width));
  }
}

@media (min-width: 1200px) {
  .ld-container {
    max-width: min(1100px, var(--ld-content-width));
  }
}

@media (min-width: 1440px) {
  .ld-container {
    max-width: min(1320px, var(--ld-content-width));
  }
}

.ld-grid {
  display: grid;
  gap: var(--ld-space-4);
  grid-template-columns: repeat(1, 1fr);
}

.ld-grid[data-ld-cols='2'] {
  grid-template-columns: repeat(1, 1fr);
}

.ld-grid[data-ld-cols='3'] {
  grid-template-columns: repeat(1, 1fr);
}

.ld-grid[data-ld-cols='4'] {
  grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 640px) {
  .ld-grid[data-ld-cols='2'] {
    grid-template-columns: repeat(2, 1fr);
  }

  .ld-grid[data-ld-cols='3'] {
    grid-template-columns: repeat(2, 1fr);
  }

  .ld-grid[data-ld-cols='4'] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .ld-grid[data-ld-cols='3'] {
    grid-template-columns: repeat(3, 1fr);
  }

  .ld-grid[data-ld-cols='4'] {
    grid-template-columns: repeat(4, 1fr);
  }
}

.ld-stack>*+* {
  margin-top: var(--ld-space-4);
}


/* ==========================================================================
   3b. Hero, section & row — ld-hero, ld-section, ld-row
   Page-level building blocks that demo.html and cheat-sheet.html used to
   style with local <style> rules. They live in the framework now.

   <header class="ld-hero">                     (data-ld-size="sm" for compact)
     <h1>Title</h1>
     <p class="ld-text-muted">Intro</p>
   </header>

   <section class="ld-section" id="buttons">    (data-ld-size="sm" for compact)
     <h2 class="ld-section-title">Buttons</h2>
     <p class="ld-section-sub">One line about what is below</p>
     …
   </section>

   <div class="ld-row"> … </div>                inline cluster: wraps, gapped
   ========================================================================== */

.ld-hero {
  padding: var(--ld-space-8) 0 var(--ld-space-6);
}

.ld-hero[data-ld-size='sm'] {
  padding: var(--ld-space-6) 0 var(--ld-space-4);
}

.ld-hero pre.ld-code {
  margin: var(--ld-space-4) 0;
}

.ld-section {
  padding: var(--ld-space-6) 0;
  border-top: var(--ld-border-width) solid var(--ld-border-soft);
}

.ld-section[data-ld-size='sm'] {
  padding: var(--ld-space-5) 0;
}

.ld-section-title {
  font-size: var(--ld-text-xl);
  margin-bottom: var(--ld-space-3);
}

.ld-section[data-ld-size='sm'] .ld-section-title {
  font-size: var(--ld-text-lg);
}

/* with a subtitle right below, the title only needs a hairline of space */
.ld-section-title:has(+ .ld-section-sub) {
  margin-bottom: var(--ld-space-1);
}

.ld-section-sub {
  color: var(--ld-text-muted);
  font-size: var(--ld-text-sm);
  margin-bottom: var(--ld-space-5);
}

.ld-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ld-space-3);
  align-items: center;
}


/* ==========================================================================
   4. Utility attributes: shadow + border
   ========================================================================== */

[data-ld-shadow='sm'] {
  box-shadow: 0 1px 3px rgba(20, 23, 26, 0.10);
}

[data-ld-shadow='md'] {
  box-shadow: 0 4px 12px rgba(20, 23, 26, 0.14);
}

[data-ld-shadow='lg'] {
  box-shadow: 0 12px 32px rgba(20, 23, 26, 0.20);
}

[data-ld-shadow='none'] {
  box-shadow: none;
}

[data-ld-theme='dark'] [data-ld-shadow='sm'] {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
@media (prefers-color-scheme: dark) {
  :where(:root):not([data-ld-theme]) [data-ld-shadow='sm'] {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
}


[data-ld-theme='dark'] [data-ld-shadow='md'] {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
@media (prefers-color-scheme: dark) {
  :where(:root):not([data-ld-theme]) [data-ld-shadow='md'] {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
}


[data-ld-theme='dark'] [data-ld-shadow='lg'] {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
  :where(:root):not([data-ld-theme]) [data-ld-shadow='lg'] {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
}


[data-ld-border='thin'] {
  border: 1px solid var(--ld-border-soft);
}

[data-ld-border='thick'] {
  border: 2px solid var(--ld-border);
}

[data-ld-border='accent'] {
  border: var(--ld-border-width) solid var(--ld-accent);
}

[data-ld-border='none'] {
  border: none;
}


/* ==========================================================================
   5. Buttons — ld-btn
   ========================================================================== */

.ld-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ld-space-2);
  font-family: var(--ld-font-family);
  font-weight: 700;
  font-size: var(--ld-text-sm);
  letter-spacing: 0.02em;
  padding: var(--ld-space-2) var(--ld-space-4);
  border: var(--ld-border-width) solid var(--ld-border);
  border-radius: var(--ld-radius);
  background: var(--ld-surface);
  color: var(--ld-text);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--ld-shadow);
  transition: transform var(--ld-transition), translate var(--ld-transition), box-shadow var(--ld-transition), background var(--ld-transition);
}

.ld-btn:hover {
  background: var(--ld-surface-raised);
}

/* The 1px press nudge uses `translate`, not `transform`, so it adds to any
   transform you or a component put on a button (a centring transform, a hover
   lift) instead of replacing it. */
.ld-btn:active,
.ld-btn[data-ld-pressed='true'] {
  translate: 0 1px;
  box-shadow: none;
}

.ld-btn:disabled,
.ld-btn[data-ld-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.ld-btn[data-ld-prompt='true']::before {
  content: '>';
  opacity: 0.6;
}

/* variants */
.ld-btn[data-ld-variant='primary'] {
  background: var(--ld-accent-fill);
  border-color: var(--ld-accent);
  color: var(--ld-accent-text);
}

.ld-btn[data-ld-variant='primary']:hover {
  filter: brightness(1.05);
}

.ld-btn[data-ld-variant='outline'] {
  background: transparent;
  border-color: var(--ld-accent);
  color: var(--ld-text);
}

.ld-btn[data-ld-variant='ghost'] {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.ld-btn[data-ld-variant='danger'] {
  background: var(--ld-danger);
  border-color: var(--ld-danger);
  color: var(--ld-danger-text);
}

/* sizes */
.ld-btn[data-ld-size='sm'] {
  padding: var(--ld-space-1) var(--ld-space-3);
  font-size: var(--ld-text-xs);
}

.ld-btn[data-ld-size='lg'] {
  padding: var(--ld-space-3) var(--ld-space-5);
  font-size: var(--ld-text-base);
}


/* ==========================================================================
   6. Badges
   ========================================================================== */

.ld-badge {
  display: inline-block;
  font-size: var(--ld-text-xs);
  font-weight: 700;
  padding: 2px var(--ld-space-2);
  border: var(--ld-border-width) solid var(--ld-border-soft);
  border-radius: var(--ld-border-radius-sm);
  color: var(--ld-text-muted);
}

.ld-badge[data-ld-variant='primary'] {
  background: var(--ld-accent-fill);
  color: var(--ld-accent-text);
  border-color: var(--ld-accent);
}

.ld-badge[data-ld-variant='danger'] {
  background: var(--ld-danger);
  color: var(--ld-danger-text);
  border-color: var(--ld-danger);
}


/* ==========================================================================
   7. Cards — ld-card
   ========================================================================== */

.ld-card {
  background: var(--ld-surface);
  border: var(--ld-border-width) solid var(--ld-border);
  border-radius: var(--ld-radius);
  box-shadow: var(--ld-shadow);
  padding: var(--ld-space-5);
  transition: transform var(--ld-transition), box-shadow var(--ld-transition);
}

.ld-card[data-ld-interactive='true'] {
  cursor: pointer;
}

.ld-card[data-ld-interactive='true']:hover {
  transform: translateY(-2px);
  box-shadow: var(--ld-shadow-lg);
}

.ld-card-eyebrow {
  font-size: var(--ld-text-xs);
  color: var(--ld-accent);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--ld-space-2);
}

.ld-card-title {
  font-size: var(--ld-text-lg);
  margin-bottom: var(--ld-space-2);
}

.ld-card-body {
  color: var(--ld-text-muted);
  font-size: var(--ld-text-sm);
}

.ld-card-footer {
  margin-top: var(--ld-space-4);
  padding-top: var(--ld-space-4);
  border-top: 1px solid var(--ld-border-soft);
  display: flex;
  gap: var(--ld-space-2);
}


/* ==========================================================================
   8. Nav — ld-nav
   ========================================================================== */

.ld-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ld-space-3) var(--ld-space-5);
  background: var(--ld-surface);
  border-bottom: var(--ld-border-width) solid var(--ld-border);
}

.ld-nav-brand {
  font-weight: 700;
  font-size: var(--ld-text-lg);
  text-decoration: none;
  color: var(--ld-text);
  display: flex;
  align-items: center;
  gap: var(--ld-space-2);
}

.ld-nav-brand::before {
  content: none;
}

/* Opt-in brand mark (v3.0.0 — it used to be a default '$').
   data-ld-mark="$"  shows whatever text you put in the attribute: "$", ">", "▲", …
   data-ld-mark      (empty) or "true" shows the classic "$".
   data-ld-mark="none" still works and shows nothing. */
.ld-nav-brand[data-ld-mark]::before {
  content: attr(data-ld-mark);
  color: var(--ld-accent);
}

.ld-nav-brand[data-ld-mark='']::before,
.ld-nav-brand[data-ld-mark='true']::before {
  content: '$';
}

.ld-nav-brand[data-ld-mark='none']::before {
  content: none;
}

.ld-nav-links {
  display: flex;
  gap: var(--ld-space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ld-nav-link {
  text-decoration: none;
  color: var(--ld-text-muted);
  font-size: var(--ld-text-sm);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color var(--ld-transition), border-color var(--ld-transition);
}

.ld-nav-link:hover {
  color: var(--ld-text);
}

.ld-nav-link[data-ld-active='true'] {
  color: var(--ld-text);
  border-color: var(--ld-accent);
}


/* --------------------------------------------------------------------------
   8b. Footer — ld-footer
   Bottom counterpart to ld-nav: same padding/surface, but border-top since
   it sits at the end of the page instead of the start. Pair with
   ld-shadow-up / ld-shadow-up-sm / ld-shadow-up-lg (§38) if you want a lift
   off the page instead of (or in addition to) the border.
   -------------------------------------------------------------------------- */

.ld-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ld-space-3) var(--ld-space-5);
  background: var(--ld-surface);
  border-top: var(--ld-border-width) solid var(--ld-border);
}


/* ==========================================================================
   9. Forms — ld-form / ld-input
   ========================================================================== */

.ld-form-group {
  margin-bottom: var(--ld-space-4);
}

.ld-label {
  display: block;
  font-size: var(--ld-text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ld-text-muted);
  margin-bottom: var(--ld-space-2);
}

.ld-input,
.ld-textarea,
.ld-select {
  width: 100%;
  font-family: var(--ld-font-family);
  font-size: var(--ld-text-sm);
  padding: var(--ld-space-2) var(--ld-space-3);
  background: var(--ld-surface);
  color: var(--ld-text);
  border: var(--ld-border-width) solid var(--ld-border-control);
  border-radius: var(--ld-radius);
  transition: border-color var(--ld-transition), box-shadow var(--ld-transition);
}

/* The focus indicator is the border colour change plus the soft ring. Both
   are removed by forced-colors / Windows High Contrast, so there is also a
   transparent outline: it is invisible normally, and the system draws it
   in a real colour when colours are forced. (`outline: none` would remove
   the indicator for those people entirely.) */
.ld-input:focus,
.ld-textarea:focus,
.ld-select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--ld-focus-border);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ld-accent) 30%, transparent);
}

.ld-input[data-ld-error='true'],
.ld-textarea[data-ld-error='true'] {
  border-color: var(--ld-danger);
}

.ld-input[data-ld-error='true']:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ld-danger) 30%, transparent);
}

.ld-input[data-ld-success='true'],
.ld-textarea[data-ld-success='true'] {
  border-color: var(--ld-accent);
}

/* -- Native validation, opt-in ------------------------------------------
   data-ld-error/-success above are manual (you decide when a field is
   wrong, e.g. after an async check). For plain HTML5 constraints
   (required, pattern, type="email", …), wrap the form in .ld-validate
   to get the same red/green treatment automatically via :user-invalid
   and :user-valid — which only fire after the person has interacted
   with the field, not on an empty required field's first paint. */
.ld-validate .ld-input:user-invalid,
.ld-validate .ld-textarea:user-invalid {
  border-color: var(--ld-danger);
}

.ld-validate .ld-input:user-invalid:focus,
.ld-validate .ld-textarea:user-invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ld-danger) 30%, transparent);
}

.ld-validate .ld-input:user-valid,
.ld-validate .ld-textarea:user-valid {
  border-color: var(--ld-accent);
}

/* -- Floating labels ------------------------------------------------------
   The label sits inside the field until it has a value or focus, then
   rises above it. Needs a real placeholder=" " (a single space) on the
   input for :placeholder-shown to have something to match. */
.ld-form-floating {
  position: relative;
}

.ld-form-floating>.ld-input,
.ld-form-floating>.ld-textarea {
  padding-top: 22px;
  padding-bottom: 6px;
}

.ld-form-floating>label {
  position: absolute;
  top: 50%;
  left: var(--ld-space-3);
  transform: translateY(-50%);
  font-size: var(--ld-text-sm);
  color: var(--ld-text-muted);
  pointer-events: none;
  transition: transform var(--ld-transition), font-size var(--ld-transition), top var(--ld-transition), color var(--ld-transition);
}

.ld-form-floating>.ld-input:focus~label,
.ld-form-floating>.ld-input:not(:placeholder-shown)~label,
.ld-form-floating>.ld-textarea:focus~label,
.ld-form-floating>.ld-textarea:not(:placeholder-shown)~label {
  top: 10px;
  transform: none;
  font-size: var(--ld-text-xs);
  color: var(--ld-text-muted);
}

.ld-form-floating>.ld-input:focus~label {
  color: var(--ld-accent);
}

.ld-form-hint {
  font-size: var(--ld-text-xs);
  color: var(--ld-text-muted);
  margin-top: var(--ld-space-1);
}

.ld-form-error {
  font-size: var(--ld-text-xs);
  color: var(--ld-danger);
  margin-top: var(--ld-space-1);
}

.ld-form-success {
  font-size: var(--ld-text-xs);
  color: var(--ld-accent);
  margin-top: var(--ld-space-1);
}

.ld-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--ld-space-2);
  font-size: var(--ld-text-sm);
  cursor: pointer;
}

.ld-checkbox input {
  accent-color: var(--ld-accent);
  width: 16px;
  height: 16px;
}


/* ==========================================================================
   10. Dropdown / Tabs / Modal (paired with ldcss.js)
   ========================================================================== */

[data-ld-dropdown] {
  position: relative;
  display: inline-block;
}

[data-ld-dropdown-menu] {
  position: absolute;
  top: calc(100% + var(--ld-space-2));
  inset-inline-start: 0;
  min-width: 180px;
  background: var(--ld-surface);
  border: var(--ld-border-width) solid var(--ld-border);
  border-radius: var(--ld-radius);
  box-shadow: var(--ld-shadow);
  padding: var(--ld-space-2);
  display: none;
  z-index: var(--ld-z-dropdown);
}

[data-ld-dropdown-menu].ld-show {
  display: block;
}

[data-ld-dropdown-menu] a,
[data-ld-dropdown-menu] button {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--ld-space-2);
  background: none;
  border: none;
  border-radius: var(--ld-border-radius-sm);
  font-family: var(--ld-font-family);
  font-size: var(--ld-text-sm);
  color: var(--ld-text);
  cursor: pointer;
}

[data-ld-dropdown-menu] a:hover,
[data-ld-dropdown-menu] button:hover {
  background: var(--ld-surface-raised);
}

[data-ld-tabs] {
  border-bottom: var(--ld-border-width) solid var(--ld-border);
  display: flex;
  gap: var(--ld-space-2);
}

[data-ld-toggle='tab'] {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--ld-font-family);
  font-size: var(--ld-text-sm);
  padding: var(--ld-space-2) var(--ld-space-3);
  color: var(--ld-text-muted);
  cursor: pointer;
  margin-bottom: -2px;
}

[data-ld-toggle='tab'][data-ld-active='true'] {
  color: var(--ld-text);
  border-color: var(--ld-accent);
}

[data-ld-tab-panel] {
  display: none;
  padding: var(--ld-space-4) 0;
}

[data-ld-tab-panel].ld-show {
  display: block;
}

.ld-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 15, 14, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--ld-z-modal);
  padding: var(--ld-space-4);
}

.ld-modal-backdrop.ld-show {
  display: flex;
}

.ld-modal {
  background: var(--ld-surface);
  border: var(--ld-border-width) solid var(--ld-border);
  border-radius: var(--ld-radius);
  box-shadow: var(--ld-shadow-lg);
  max-width: 480px;
  width: 100%;
  padding: var(--ld-space-5);
}

.ld-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--ld-space-4);
}

.ld-modal-close {
  background: none;
  border: none;
  font-family: var(--ld-font-family);
  font-size: var(--ld-text-lg);
  cursor: pointer;
  color: var(--ld-text-muted);
  line-height: 1;
}

.ld-modal-close:hover {
  color: var(--ld-text);
}


/* ==========================================================================
   11. Alerts — ld-alert
   ========================================================================== */

.ld-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ld-space-3);
  padding: var(--ld-space-3) var(--ld-space-4);
  background: var(--ld-surface);
  border: var(--ld-border-width) solid var(--ld-border-soft);
  border-inline-start: var(--ld-border-width) solid var(--ld-text-muted);
  border-radius: var(--ld-radius);
  font-size: var(--ld-text-sm);
}

.ld-alert-body {
  flex: 1;
}

.ld-alert-title {
  font-weight: 700;
  margin-bottom: 2px;
}

.ld-alert-close {
  background: none;
  border: none;
  color: var(--ld-text-muted);
  font-size: var(--ld-text-base);
  line-height: 1;
  cursor: pointer;
}

.ld-alert-close:hover {
  color: var(--ld-text);
}

.ld-alert[data-ld-variant='info'] {
  border-left-color: var(--ld-info);
}

.ld-alert[data-ld-variant='info'] .ld-alert-title {
  color: var(--ld-info);
}

.ld-alert[data-ld-variant='success'] {
  border-left-color: var(--ld-success);
}

.ld-alert[data-ld-variant='success'] .ld-alert-title {
  color: var(--ld-success);
}

.ld-alert[data-ld-variant='warning'] {
  border-left-color: var(--ld-warning);
}

.ld-alert[data-ld-variant='warning'] .ld-alert-title {
  color: var(--ld-warning);
}

.ld-alert[data-ld-variant='danger'] {
  border-left-color: var(--ld-danger);
}

.ld-alert[data-ld-variant='danger'] .ld-alert-title {
  color: var(--ld-danger);
}


/* ==========================================================================
   12. Accordion — data-ld-accordion
   ========================================================================== */

.ld-accordion-item {
  border: var(--ld-border-width) solid var(--ld-border-soft);
  border-top: none;
}

.ld-accordion-item:first-child {
  border-top: var(--ld-border-width) solid var(--ld-border-soft);
}

.ld-accordion-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ld-space-3);
  padding: var(--ld-space-3) var(--ld-space-4);
  background: var(--ld-surface);
  border: none;
  font-family: var(--ld-font-family);
  font-size: var(--ld-text-sm);
  font-weight: 700;
  color: var(--ld-text);
  cursor: pointer;
  text-align: left;
}

.ld-accordion-trigger:hover {
  background: var(--ld-surface-raised);
}

.ld-accordion-trigger::after {
  content: '+';
  color: var(--ld-accent);
  font-weight: 700;
  transition: transform var(--ld-transition);
}

.ld-accordion-trigger[data-ld-active='true']::after {
  content: '−';
}

[data-ld-accordion-panel] {
  display: none;
  padding: 0 var(--ld-space-4) var(--ld-space-4);
  font-size: var(--ld-text-sm);
  color: var(--ld-text-muted);
}

[data-ld-accordion-panel].ld-show {
  display: block;
}


/* ==========================================================================
   13. Breadcrumbs — ld-breadcrumbs
   ========================================================================== */

.ld-breadcrumbs {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--ld-text-xs);
  color: var(--ld-text-muted);
}

.ld-breadcrumbs li {
  display: flex;
  align-items: center;
}

.ld-breadcrumbs li+li::before {
  content: '/';
  margin: 0 var(--ld-space-2);
  color: var(--ld-border-soft);
}

.ld-breadcrumbs a {
  color: var(--ld-text-muted);
  text-decoration: none;
}

.ld-breadcrumbs a:hover {
  color: var(--ld-text);
  text-decoration: underline;
}

.ld-breadcrumbs li[data-ld-active='true'] {
  color: var(--ld-text);
  font-weight: 700;
}


/* ==========================================================================
   14. Tooltip — data-ld-tooltip
   ========================================================================== */

[data-ld-tooltip] {
  position: relative;
}

[data-ld-tooltip]::after {
  content: attr(data-ld-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ld-text);
  color: var(--ld-bg);
  font-size: var(--ld-text-xs);
  white-space: nowrap;
  padding: var(--ld-space-1) var(--ld-space-2);
  border-radius: var(--ld-border-radius-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ld-transition);
  z-index: var(--ld-z-tooltip);
}

[data-ld-tooltip]:hover::after,
[data-ld-tooltip]:focus-visible::after {
  opacity: 1;
}

[data-ld-tooltip][data-ld-tooltip-pos='bottom']::after {
  bottom: auto;
  top: calc(100% + 8px);
}

[data-ld-tooltip][data-ld-tooltip-pos='left']::after {
  bottom: auto;
  inset-inline-end: calc(100% + 8px);
  inset-inline-start: auto;
  top: 50%;
  transform: translateY(-50%);
}

[data-ld-tooltip][data-ld-tooltip-pos='right']::after {
  bottom: auto;
  inset-inline-start: calc(100% + 8px);
  inset-inline-end: auto;
  top: 50%;
  transform: translateY(-50%);
}


/* ==========================================================================
   15. Progress — ld-progress
   ========================================================================== */

.ld-progress {
  width: 100%;
  height: 10px;
  background: var(--ld-surface-raised);
  border: 1px solid var(--ld-border-soft);
  border-radius: 9999px;
  overflow: hidden;
}

.ld-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--ld-accent);
  border-radius: 9999px;
  transition: width 240ms ease;
}

.ld-progress-bar[data-ld-variant='danger'] {
  background: var(--ld-danger);
}


/* ==========================================================================
   17. Kbd
   ========================================================================== */

.ld-kbd {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--ld-font-mono);
  font-size: 0.85em;
  background: var(--ld-surface-raised);
  color: var(--ld-text);
  border: 1px solid var(--ld-border-soft);
  border-bottom-width: 2px;
  border-radius: 4px;
}


/* ==========================================================================
   18. Copy button — data-ld-toggle="copy"
   ========================================================================== */

.ld-btn[data-ld-copied='true'] {
  border-color: var(--ld-accent);
  color: var(--ld-code-text);
}


/* ==========================================================================
   19. Terminal window
   ========================================================================== */

.ld-terminal {
  border: var(--ld-border-width) solid var(--ld-border);
  border-radius: var(--ld-radius);
  box-shadow: var(--ld-shadow);
  background: var(--ld-surface);
  overflow: hidden;
}

.ld-terminal-bar {
  display: flex;
  align-items: center;
  gap: var(--ld-space-2);
  padding: var(--ld-space-2) var(--ld-space-3);
  background: var(--ld-surface-raised);
  border-bottom: 1px solid var(--ld-border-soft);
}

.ld-terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ld-border-soft);
}

.ld-terminal-dot:nth-child(1) {
  background: var(--ld-danger);
}

.ld-terminal-dot:nth-child(2) {
  background: var(--ld-warning);
}

.ld-terminal-dot:nth-child(3) {
  background: var(--ld-success);
}

.ld-terminal-title {
  font-size: var(--ld-text-xs);
  color: var(--ld-text-muted);
  margin-inline-start: var(--ld-space-2);
}

.ld-terminal-body {
  padding: var(--ld-space-4);
  color: var(--ld-code-text);
  font-family: var(--ld-font-mono);
  font-size: var(--ld-text-sm);
  overflow-x: auto;
  white-space: pre;
}


/* ==========================================================================
   20. Spinner
   ========================================================================== */

.ld-spinner {
  display: inline-block;
  width: 9px;
  height: 1.1em;
  vertical-align: -0.2em;
  background: var(--ld-accent);
  animation: ld-blink 1s steps(1, start) infinite;
}

@keyframes ld-blink {
  50% {
    opacity: 0;
  }
}

.ld-spinner[data-ld-variant='dots'] {
  width: auto;
  height: auto;
  background: none;
  animation: none;
  vertical-align: middle;
}

.ld-spinner[data-ld-variant='dots']::before {
  content: '. . .';
  letter-spacing: 2px;
  color: var(--ld-accent);
  font-weight: 700;
  animation: ld-dots 1.2s steps(1) infinite;
}

@keyframes ld-dots {
  0% {
    content: '.';
  }

  33% {
    content: '. .';
  }

  66% {
    content: '. . .';
  }
}


/* ==========================================================================
   21. Toast
   ========================================================================== */

.ld-toast-container {
  position: fixed;
  top: var(--ld-space-4);
  right: var(--ld-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--ld-space-2);
  z-index: var(--ld-z-toast);
  max-width: 320px;
}

.ld-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--ld-space-2);
  background: var(--ld-surface);
  border: var(--ld-border-width) solid var(--ld-border);
  border-radius: var(--ld-radius);
  box-shadow: var(--ld-shadow);
  padding: var(--ld-space-3) var(--ld-space-4);
  font-size: var(--ld-text-sm);
  animation: ld-toast-in 160ms ease;
}

@keyframes ld-toast-in {
  from {
    transform: translateY(-6px);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

.ld-toast-body {
  flex: 1;
}

.ld-toast-close {
  background: none;
  border: none;
  color: var(--ld-text-muted);
  cursor: pointer;
  font-size: var(--ld-text-base);
  line-height: 1;
}

.ld-toast-close:hover {
  color: var(--ld-text);
}

.ld-toast[data-ld-variant='success'] {
  border-left: var(--ld-border-width) solid var(--ld-accent);
}

.ld-toast[data-ld-variant='danger'] {
  border-left: var(--ld-border-width) solid var(--ld-danger);
}

/* -- Toast container position ------------------------------------------------
   Default is top-right (set inline by ldcss.js when it creates the
   container). Set data-ld-toast-position on <body> to change it before
   the first toast fires — ldcss.js reads that attribute once, at
   container-creation time, and applies it here. */
.ld-toast-container[data-ld-position='top-left'] {
  top: var(--ld-space-4);
  left: var(--ld-space-4);
  right: auto;
}

.ld-toast-container[data-ld-position='top-center'] {
  top: var(--ld-space-4);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.ld-toast-container[data-ld-position='bottom-right'] {
  top: auto;
  bottom: var(--ld-space-4);
  right: var(--ld-space-4);
}

.ld-toast-container[data-ld-position='bottom-left'] {
  top: auto;
  bottom: var(--ld-space-4);
  left: var(--ld-space-4);
  right: auto;
}

.ld-toast-container[data-ld-position='bottom-center'] {
  top: auto;
  bottom: var(--ld-space-4);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.ld-toast-container[data-ld-position^='bottom'] .ld-toast {
  animation-name: ld-toast-in-bottom;
}

@keyframes ld-toast-in-bottom {
  from {
    transform: translateY(6px);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}


/* ==========================================================================
   22. Table
   ========================================================================== */

.ld-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ld-text-sm);
}

.ld-table th,
.ld-table td {
  padding: var(--ld-space-2) var(--ld-space-3);
  text-align: left;
  border-bottom: 1px solid var(--ld-border-soft);
}

.ld-table thead th {
  font-size: var(--ld-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ld-text-muted);
  border-bottom: var(--ld-border-width) solid var(--ld-border);
}

.ld-table[data-ld-striped='true'] tbody tr:nth-child(even) {
  background: var(--ld-surface-raised);
}

.ld-table[data-ld-bordered='true'] th,
.ld-table[data-ld-bordered='true'] td {
  border: 1px solid var(--ld-border-soft);
}

.ld-table tbody tr[data-ld-interactive='true']:hover {
  background: var(--ld-surface-raised);
  cursor: pointer;
}

/* -- Sortable headers (paired with ldcss.js) ------------------------------
   th[data-ld-sort] on any header cell makes it clickable; the ::after
   arrow only renders once a direction is set (i.e. after first click),
   so unsorted columns stay clean rather than showing an ambiguous glyph
   on every sortable header at once. */
.ld-table th[data-ld-sort] {
  cursor: pointer;
  user-select: none;
}

.ld-table th[data-ld-sort]:hover {
  color: var(--ld-text);
}

.ld-table th[data-ld-sort]::after {
  display: inline-block;
  width: 1em;
  margin-inline-start: var(--ld-space-1);
  opacity: 0.5;
}

.ld-table th[data-ld-sort][data-ld-sort-dir='asc']::after {
  content: '↑';
  opacity: 1;
  color: var(--ld-accent);
}

.ld-table th[data-ld-sort][data-ld-sort-dir='desc']::after {
  content: '↓';
  opacity: 1;
  color: var(--ld-accent);
}


/* ==========================================================================
   23. Pagination
   ========================================================================== */

.ld-pagination {
  display: flex;
  gap: var(--ld-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ld-pagination button,
.ld-pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--ld-space-2);
  border: 1px solid var(--ld-border-soft);
  border-radius: var(--ld-border-radius-sm);
  background: var(--ld-surface);
  color: var(--ld-text);
  font-family: var(--ld-font-family);
  font-size: var(--ld-text-sm);
  text-decoration: none;
  cursor: pointer;
}

.ld-pagination button:hover,
.ld-pagination a:hover {
  background: var(--ld-surface-raised);
}

.ld-pagination li[data-ld-active='true'] button {
  background: var(--ld-accent);
  border-color: var(--ld-accent);
  color: var(--ld-accent-text);
}

.ld-pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* ==========================================================================
   24. List group
   ========================================================================== */

.ld-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ld-border-soft);
  border-radius: var(--ld-radius);
  overflow: hidden;
}

.ld-list-item {
  padding: var(--ld-space-3) var(--ld-space-4);
  border-bottom: 1px solid var(--ld-border-soft);
  font-size: var(--ld-text-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ld-space-2);
}

.ld-list-item:last-child {
  border-bottom: none;
}

.ld-list-item[data-ld-interactive='true'] {
  cursor: pointer;
}

.ld-list-item[data-ld-interactive='true']:hover {
  background: var(--ld-surface-raised);
}

.ld-list-item[data-ld-active='true'] {
  background: var(--ld-accent);
  color: var(--ld-accent-text);
}


/* ==========================================================================
   25. Switch
   ========================================================================== */

.ld-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--ld-space-2);
  font-size: var(--ld-text-sm);
  cursor: pointer;
}

.ld-switch input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 38px;
  height: 20px;
  background: var(--ld-surface-raised);
  border: var(--ld-border-width) solid var(--ld-border-control);
  border-radius: 9999px;
  cursor: pointer;
  transition: background var(--ld-transition), border-color var(--ld-transition);
  flex-shrink: 0;
}

.ld-switch input::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ld-text-muted);
  transition: transform var(--ld-transition), background var(--ld-transition);
}

.ld-switch input:checked {
  background: var(--ld-accent);
  border-color: var(--ld-accent);
}

.ld-switch input:checked::before {
  transform: translateX(17px);
  background: var(--ld-accent-text);
}


/* ==========================================================================
   26. Avatar
   ========================================================================== */

.ld-avatar {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ld-surface-raised);
  border: 1px solid var(--ld-border-soft);
  border-radius: calc(var(--ld-radius) / 1.5);
  color: var(--ld-text);
  font-weight: 700;
  font-size: var(--ld-text-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.ld-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ld-avatar[data-ld-size='sm'] {
  width: 28px;
  height: 28px;
  font-size: var(--ld-text-xs);
}

.ld-avatar[data-ld-size='lg'] {
  width: 56px;
  height: 56px;
  font-size: var(--ld-text-lg);
}

.ld-avatar[data-ld-variant='accent'] {
  background: var(--ld-accent);
  color: var(--ld-accent-text);
  border-color: var(--ld-accent);
}


/* ==========================================================================
   27. Popover — data-ld-popover / data-ld-toggle="popover"
   ========================================================================== */

[data-ld-popover] {
  position: relative;
  display: inline-block;
}

[data-ld-popover-content] {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  min-width: 220px;
  background: var(--ld-surface);
  border: var(--ld-border-width) solid var(--ld-border);
  border-radius: var(--ld-radius);
  box-shadow: var(--ld-shadow);
  padding: var(--ld-space-4);
  display: none;
  z-index: var(--ld-z-popover);
  font-size: var(--ld-text-sm);
}

[data-ld-popover-content].ld-show {
  display: block;
}

.ld-popover-title {
  font-weight: 700;
  margin-bottom: var(--ld-space-2);
}


/* ==========================================================================
   28. Skeleton loader
   ========================================================================== */

.ld-skeleton {
  background: linear-gradient(90deg, var(--ld-surface-raised) 25%, var(--ld-border-soft) 37%, var(--ld-surface-raised) 63%);
  background-size: 400% 100%;
  animation: ld-skeleton 1.4s ease infinite;
  border-radius: var(--ld-border-radius-sm);
  height: 14px;
}

@keyframes ld-skeleton {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

.ld-skeleton[data-ld-shape='circle'] {
  border-radius: 50%;
}

.ld-skeleton[data-ld-shape='text'] {
  height: 12px;
}

.ld-skeleton[data-ld-shape='button'] {
  height: 38px;
  border-radius: var(--ld-radius);
  width: 96px;
  display: inline-block;
}

.ld-skeleton[data-ld-shape='avatar'] {
  height: 36px;
  width: 36px;
  border-radius: 50%;
}

.ld-skeleton-w-25 {
  width: 25%;
}

.ld-skeleton-w-50 {
  width: 50%;
}

.ld-skeleton-w-75 {
  width: 75%;
}

.ld-skeleton-w-100 {
  width: 100%;
}

/* A few uneven widths on consecutive lines reads as "text," not as a
   row of identical gray bars — pair data-ld-shape="text" with these. */
.ld-skeleton-paragraph>.ld-skeleton {
  margin-bottom: var(--ld-space-2);
}

.ld-skeleton-paragraph>.ld-skeleton:last-child {
  width: 60%;
  margin-bottom: 0;
}


/* ==========================================================================
   30. Offcanvas — data-ld-toggle="offcanvas"
   ========================================================================== */

.ld-offcanvas-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 15, 14, 0.6);
  display: none;
  z-index: var(--ld-z-offcanvas);
}

.ld-offcanvas-backdrop.ld-show {
  display: block;
}

.ld-offcanvas {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: 300px;
  max-width: 85vw;
  background: var(--ld-surface);
  border-inline-end: var(--ld-border-width) solid var(--ld-border);
  box-shadow: 16px 0 32px rgba(20, 23, 26, 0.12);
  transform: translateX(-100%);
  transition: transform 220ms ease;
  padding: var(--ld-space-5);
  overflow-y: auto;
}

.ld-offcanvas-backdrop.ld-show .ld-offcanvas {
  transform: translateX(0);
}

/* Note: the slide-in transform above is physical (translateX), not
   logical — under dir="rtl" the panel still positions correctly via
   inset-inline-start/end and border-inline-end, but the enter
   animation direction doesn't auto-flip. Wrap in a :dir(rtl) override
   if you need the slide direction itself to mirror too. */
.ld-offcanvas-backdrop[data-ld-pos='right'] .ld-offcanvas {
  inset-inline-start: auto;
  inset-inline-end: 0;
  border-inline-end: none;
  border-inline-start: var(--ld-border-width) solid var(--ld-border);
  box-shadow: -16px 0 32px rgba(20, 23, 26, 0.12);
  transform: translateX(100%);
}

.ld-offcanvas-backdrop[data-ld-pos='right'].ld-show .ld-offcanvas {
  transform: translateX(0);
}

[data-ld-theme='dark'] .ld-offcanvas {
  box-shadow: 16px 0 32px rgba(0, 0, 0, 0.45);
}
@media (prefers-color-scheme: dark) {
  :where(:root):not([data-ld-theme]) .ld-offcanvas {
  box-shadow: 16px 0 32px rgba(0, 0, 0, 0.45);
}
}


[data-ld-theme='dark'] .ld-offcanvas-backdrop[data-ld-pos='right'] .ld-offcanvas {
  box-shadow: -16px 0 32px rgba(0, 0, 0, 0.45);
}
@media (prefers-color-scheme: dark) {
  :where(:root):not([data-ld-theme]) .ld-offcanvas-backdrop[data-ld-pos='right'] .ld-offcanvas {
  box-shadow: -16px 0 32px rgba(0, 0, 0, 0.45);
}
}


.ld-offcanvas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--ld-space-4);
}

.ld-offcanvas-close {
  background: none;
  border: none;
  font-family: var(--ld-font-family);
  font-size: var(--ld-text-lg);
  cursor: pointer;
  color: var(--ld-text-muted);
}

.ld-offcanvas-close:hover {
  color: var(--ld-text);
}


/* ==========================================================================
   31. Stepper / wizard — ld-stepper
   ========================================================================== */

.ld-stepper {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ld-step {
  display: flex;
  align-items: center;
  gap: var(--ld-space-2);
  font-size: var(--ld-text-xs);
  color: var(--ld-text-muted);
  flex: 1;
}

.ld-step-index {
  width: 24px;
  height: 24px;
  border: var(--ld-border-width) solid var(--ld-border-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--ld-surface);
}

.ld-step:not(:last-child)::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--ld-border-soft);
  margin: 0 var(--ld-space-2);
}

.ld-step[data-ld-active='true'] {
  color: var(--ld-text);
}

.ld-step[data-ld-active='true'] .ld-step-index {
  border-color: var(--ld-accent);
  color: var(--ld-accent);
}

.ld-step[data-ld-complete='true'] .ld-step-index {
  background: var(--ld-accent);
  border-color: var(--ld-accent);
  color: var(--ld-accent-text);
}

.ld-step[data-ld-complete='true']:not(:last-child)::after {
  background: var(--ld-accent);
}

/* -- Interactive stepper (paired with ldcss.js) ------------------------------
   The base .ld-stepper markup is still just a static row (fully backward
   compatible — nothing below changes existing pages). To wire it up to
   ldcss.js, add a bare data-ld-stepper attribute to the same <ol>/<ul>
   that has the .ld-stepper class. From there:
     - data-ld-clickable="true" lets people jump to a completed or
       upcoming step directly, not just advance with next/prev buttons
       (data-ld-toggle="step-next" / "step-prev" on any button, scoped
       to the nearest stepper or a data-ld-target selector).
     - data-ld-step-panels="#selector" points at a container of
       [data-ld-step-panel] sections that show/hide with the active
       step, the same way tabs pair with tab panels. */
.ld-stepper[data-ld-clickable='true'] .ld-step {
  cursor: pointer;
}

.ld-stepper[data-ld-clickable='true'] .ld-step:hover .ld-step-index {
  border-color: var(--ld-accent);
}

[data-ld-step-panel] {
  display: none;
  padding: var(--ld-space-4) 0;
}

[data-ld-step-panel].ld-show {
  display: block;
}


/* ==========================================================================
   32. Command palette — data-ld-toggle="command", ⌘K / Ctrl+K
   ========================================================================== */

.ld-command-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 15, 14, 0.6);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  z-index: var(--ld-z-command);
}

.ld-command-backdrop.ld-show {
  display: flex;
}

.ld-command {
  width: 100%;
  max-width: 480px;
  background: var(--ld-surface);
  border: var(--ld-border-width) solid var(--ld-border);
  border-radius: var(--ld-radius);
  box-shadow: var(--ld-shadow-lg);
  overflow: hidden;
}

.ld-command-input {
  width: 100%;
  padding: var(--ld-space-4);
  border: none;
  border-bottom: 1px solid var(--ld-border-soft);
  background: var(--ld-surface);
  color: var(--ld-text);
  font-family: var(--ld-font-family);
  font-size: var(--ld-text-base);
}

.ld-command-input:focus {
  /* transparent outline for forced-colors, plus an accent underline as the visible indicator */
  outline: 2px solid transparent;
  outline-offset: -2px;
  box-shadow: inset 0 -2px 0 var(--ld-focus-border);
}

.ld-command-list {
  list-style: none;
  margin: 0;
  padding: var(--ld-space-2);
  max-height: 320px;
  overflow-y: auto;
}

.ld-command-item {
  padding: var(--ld-space-2) var(--ld-space-3);
  font-size: var(--ld-text-sm);
  cursor: pointer;
  color: var(--ld-text);
}

.ld-command-item[data-ld-highlighted='true'] {
  background: var(--ld-accent);
  color: var(--ld-accent-text);
}

.ld-command-item.ld-hide {
  display: none;
}

.ld-command-empty {
  padding: var(--ld-space-3) var(--ld-space-4);
  font-size: var(--ld-text-sm);
  color: var(--ld-text-muted);
  display: none;
}

.ld-command-empty.ld-show {
  display: block;
}

.ld-command-hint {
  display: flex;
  justify-content: flex-end;
  gap: var(--ld-space-2);
  padding: var(--ld-space-2) var(--ld-space-3);
  border-top: 1px solid var(--ld-border-soft);
  font-size: var(--ld-text-xs);
  color: var(--ld-text-muted);
}


/* ==========================================================================
   33. Range slider — ld-range
   ========================================================================== */

.ld-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--ld-border-control);
  border-radius: 9999px;
  /* transparent, not none: forced-colors draws it. The visible focus ring is on the thumb below. */
  outline: 2px solid transparent;
  outline-offset: 6px;
}

.ld-range:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--ld-focus-ring);
  outline-offset: 2px;
}

.ld-range:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--ld-focus-ring);
  outline-offset: 2px;
}

.ld-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--ld-accent);
  border: 2px solid var(--ld-border-control);
  border-radius: 50%;
  cursor: pointer;
}

.ld-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--ld-accent);
  border: 2px solid var(--ld-border-control);
  border-radius: 50%;
  cursor: pointer;
}

.ld-range::-moz-range-track {
  background: var(--ld-border-control);
  height: 4px;
}


/* ==========================================================================
   34. Dropzone / file upload — data-ld-dropzone
   ========================================================================== */

[data-ld-dropzone] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ld-space-1);
  border: var(--ld-border-width) dashed var(--ld-border-control);
  border-radius: var(--ld-radius);
  padding: var(--ld-space-6);
  text-align: center;
  font-size: var(--ld-text-sm);
  color: var(--ld-text-muted);
  cursor: pointer;
  transition: border-color var(--ld-transition), background var(--ld-transition), color var(--ld-transition);
}

[data-ld-dropzone]:hover,
[data-ld-dropzone][data-ld-active='true'] {
  border-color: var(--ld-accent);
  background: var(--ld-surface-raised);
  color: var(--ld-text);
}

[data-ld-dropzone] input[type='file'] {
  display: none;
}

.ld-dropzone-hint {
  font-size: var(--ld-text-xs);
  color: var(--ld-text-muted);
  margin-top: var(--ld-space-1);
}


/* ==========================================================================
   35. Rating — data-ld-rating
   ========================================================================== */

[data-ld-rating] {
  display: inline-flex;
  gap: 2px;
}

[data-ld-star] {
  font-size: var(--ld-text-lg);
  color: var(--ld-border-soft);
  cursor: pointer;
  line-height: 1;
  background: none;
  border: none;
  padding: 0;
}

[data-ld-star][data-ld-active='true'] {
  color: var(--ld-accent);
}


/* ==========================================================================
   36. Tag input — data-ld-tags
   ========================================================================== */

[data-ld-tags] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ld-space-2);
  align-items: center;
  padding: var(--ld-space-2);
  border: var(--ld-border-width) solid var(--ld-border-control);
  border-radius: var(--ld-radius);
  background: var(--ld-surface);
}

[data-ld-tags]:focus-within {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--ld-focus-border);
}

.ld-tag,
[data-ld-tag] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ld-surface-raised);
  border: 1px solid var(--ld-border-soft);
  border-radius: 9999px;
  padding: 2px 8px;
  font-size: var(--ld-text-xs);
}

.ld-tag-remove,
[data-ld-tag-remove] {
  background: none;
  border: none;
  color: var(--ld-text-muted);
  cursor: pointer;
  font-size: var(--ld-text-sm);
  line-height: 1;
  padding: 0;
}

.ld-tag-remove:hover,
[data-ld-tag-remove]:hover {
  color: var(--ld-danger);
}

[data-ld-tags-input] {
  flex: 1;
  min-width: 100px;
  border: none;
  background: none;
  font-family: var(--ld-font-family);
  font-size: var(--ld-text-sm);
  color: var(--ld-text);
  /* no outline of its own: the [data-ld-tags] box around it is the focus indicator */
  outline: none;
}


/* ==========================================================================
   37. Misc
   ========================================================================== */

.ld-text-muted {
  color: var(--ld-text-muted);
}

.ld-text-accent {
  color: var(--ld-accent);
}


/* ==========================================================================
   37a. Blockquote / pull-quote — ld-blockquote
   ========================================================================== */

.ld-blockquote {
  margin: 0;
  padding-left: var(--ld-space-4);
  border-left: 3px solid var(--ld-accent);
  font-size: var(--ld-text-lg);
  color: var(--ld-text);
}

.ld-blockquote-cite {
  display: block;
  margin-top: var(--ld-space-2);
  font-size: var(--ld-text-sm);
  color: var(--ld-text-muted);
}

.ld-blockquote-cite::before {
  content: '— ';
}

/* Pull-quote: centered, no rail, for a standalone editorial callout
   (the register the fragrance-demo readiness test hand-rolled twice) */
.ld-pull-quote {
  margin: 0;
  padding: 0;
  border: none;
  text-align: center;
  font-size: var(--ld-text-xl);
  font-style: italic;
}

.ld-pull-quote .ld-blockquote-cite {
  text-align: center;
  font-style: normal;
}


/* ==========================================================================
   37b. Divider — ld-divider
   ========================================================================== */

.ld-divider {
  border: none;
  border-top: var(--ld-border-width) solid var(--ld-border-soft);
  margin: var(--ld-space-5) 0;
}

.ld-divider[data-ld-variant='solid'] {
  border-top-color: var(--ld-border);
}

/* Vertical divider — for use inside a flex row, e.g. between nav items */
.ld-divider-v {
  display: inline-block;
  width: var(--ld-border-width);
  align-self: stretch;
  background: var(--ld-border-soft);
  border: none;
}


/* ==========================================================================
   37c. Stat — ld-stat
   ========================================================================== */

.ld-stat {
  display: flex;
  flex-direction: column;
  gap: var(--ld-space-1);
}

.ld-stat-value {
  font-size: var(--ld-text-2xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ld-text);
}

.ld-stat-label {
  font-size: var(--ld-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ld-text-muted);
}

.ld-stat-delta {
  font-size: var(--ld-text-sm);
  font-weight: 500;
}

.ld-stat-delta[data-ld-trend='up'] {
  color: var(--ld-accent);
}

.ld-stat-delta[data-ld-trend='down'] {
  color: var(--ld-danger);
}


/* ==========================================================================
   37d. Avatar group — ld-avatar-group
   ========================================================================== */

.ld-avatar-group {
  display: flex;
  align-items: center;
}

.ld-avatar-group .ld-avatar {
  border: 2px solid var(--ld-bg);
  margin-inline-start: -10px;
}

.ld-avatar-group .ld-avatar:first-child {
  margin-inline-start: 0;
}

.ld-avatar-group-overflow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: calc(var(--ld-radius) / 1.5);
  background: var(--ld-surface-raised);
  border: 2px solid var(--ld-bg);
  margin-inline-start: -10px;
  font-size: var(--ld-text-xs);
  color: var(--ld-text-muted);
}


/* ==========================================================================
   37e. Container sizes — ld-container-{sm,wide}
   Combined with .ld-container (specificity 0,2,0 vs 0,1,0) so these are
   guaranteed to win over the base rule regardless of file position —
   safer than relying on section order the way §38/39 have to.
   ========================================================================== */

.ld-container.ld-container-sm {
  max-width: 720px;
}

.ld-container.ld-container-wide {
  max-width: 1400px;
}


/* ==========================================================================
   37f. Entrance animations — data-ld-animate (paired with ldcss.js)
   ========================================================================== */

[data-ld-animate] {
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-ld-animate='fade-up'] {
  transform: translateY(16px);
}

[data-ld-animate='fade-down'] {
  transform: translateY(-16px);
}

[data-ld-animate='fade-left'] {
  transform: translateX(16px);
}

[data-ld-animate='fade-right'] {
  transform: translateX(-16px);
}

[data-ld-animate='fade-in'] {
  transform: none;
}

[data-ld-animate].ld-in-view {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-ld-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ==========================================================================
   37g. Print — ld-print-hidden, ld-print-only
   ========================================================================== */

@media print {
  .ld-print-hidden {
    display: none !important;
  }

  .ld-print-only {
    display: block !important;
  }

  .ld-nav,
  .ld-offcanvas-backdrop,
  [data-ld-command-backdrop] {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}

@media not print {
  .ld-print-only {
    display: none;
  }
}


/* ==========================================================================
   37h. Segmented control — data-ld-segmented (paired with ldcss.js)
   A row of mutually exclusive options, for a value rather than a view
   (contrast with tabs, which switch a view). Wrap items in a container
   carrying data-ld-segmented; each option is an element carrying
   data-ld-segment, with data-ld-active="true" marking the default —
   the same attribute-only pattern as dropdown/accordion/tabs, no extra
   class required. Optionally set data-ld-target="#some-input" on the
   container to sync the active item's data-ld-value into a hidden
   input for plain form submission.
   ========================================================================== */

[data-ld-segmented] {
  display: inline-flex;
  background: var(--ld-surface-raised);
  border: var(--ld-border-width) solid var(--ld-border-soft);
  border-radius: var(--ld-radius);
  padding: 3px;
  gap: 2px;
}

[data-ld-segment] {
  font-family: var(--ld-font-family);
  font-size: var(--ld-text-sm);
  padding: var(--ld-space-1) var(--ld-space-3);
  border: none;
  border-radius: calc(var(--ld-radius) - 3px);
  background: none;
  color: var(--ld-text-muted);
  cursor: pointer;
  transition: background var(--ld-transition), color var(--ld-transition), box-shadow var(--ld-transition);
}

[data-ld-segment]:hover {
  color: var(--ld-text);
}

[data-ld-segment][data-ld-active='true'] {
  background: var(--ld-surface);
  color: var(--ld-text);
  box-shadow: var(--ld-shadow);
  font-weight: 700;
}

[data-ld-segment]:disabled,
[data-ld-segment][data-ld-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}


/* ==========================================================================
   37i. Filter chips — data-ld-chip (paired with ldcss.js)
   Visually related to .ld-tag, but interactive and for selecting rather
   than displaying: click to toggle a filter on or off. Each option
   just needs data-ld-chip — no separate class, same attribute-only
   pattern as data-ld-segment. Group chips in a container carrying
   data-ld-chips="single" for a single-select set (like radio buttons);
   a plain list of [data-ld-chip] elements with no such wrapper behaves
   as independent multi-select toggles.
   ========================================================================== */

[data-ld-chip] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--ld-space-1) var(--ld-space-3);
  border: var(--ld-border-width) solid var(--ld-border-soft);
  border-radius: 9999px;
  background: var(--ld-surface);
  color: var(--ld-text-muted);
  font-family: var(--ld-font-family);
  font-size: var(--ld-text-sm);
  cursor: pointer;
  transition: background var(--ld-transition), color var(--ld-transition), border-color var(--ld-transition);
}

[data-ld-chip]:hover {
  border-color: var(--ld-border);
  color: var(--ld-text);
}

.ld-chip-check {
  display: none;
}

[data-ld-chip][data-ld-active='true'] {
  background: var(--ld-accent-fill);
  border-color: var(--ld-accent);
  color: var(--ld-accent-text);
  font-weight: 700;
}

[data-ld-chip][data-ld-active='true'] .ld-chip-check {
  display: inline;
}

/* The .ld-chip-check span is optional. If it's left out of the markup
   (just `<button data-ld-chip>Label</button>`), this pseudo-element
   supplies the same checkmark automatically so plain markup still looks
   right — :has() skips this when the span is present, so no double mark. */
[data-ld-chip][data-ld-active='true']:not(:has(.ld-chip-check))::before {
  content: "✓";
  line-height: 1;
}


/* ==========================================================================
   37j. Input affix — ld-input-group
   An icon, currency symbol, or unit alongside an .ld-input, without a
   one-off wrapper each time. Wrap the input; add data-ld-affix='right'
   to move the icon slot to the trailing edge (e.g. units like "kg").
   ========================================================================== */

.ld-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.ld-input-group .ld-input {
  padding-inline-start: 34px;
}

.ld-input-group[data-ld-affix='right'] .ld-input {
  padding-inline-start: var(--ld-space-3);
  padding-inline-end: 34px;
}

.ld-input-affix {
  position: absolute;
  inset-inline-start: var(--ld-space-3);
  display: flex;
  align-items: center;
  color: var(--ld-text-muted);
  font-size: var(--ld-text-sm);
  pointer-events: none;
}

.ld-input-group[data-ld-affix='right'] .ld-input-affix {
  inset-inline-start: auto;
  inset-inline-end: var(--ld-space-3);
}


/* ==========================================================================
   37k. Combobox / autocomplete — data-ld-combobox (paired with ldcss.js)
   Filtered, keyboard-navigable search-inline, distinct from the command
   palette (which is search-in-a-modal) and the dropdown (which doesn't
   filter). Wrap an .ld-input and a data-ld-combobox-list of
   data-ld-combobox-option elements; typing filters the list, arrow
   keys move the highlight, Enter or a click selects.
   ========================================================================== */

[data-ld-combobox] {
  position: relative;
}

[data-ld-combobox-list] {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--ld-surface);
  border: var(--ld-border-width) solid var(--ld-border);
  border-radius: var(--ld-radius);
  box-shadow: var(--ld-shadow);
  max-height: 240px;
  overflow-y: auto;
  padding: var(--ld-space-2);
  display: none;
  z-index: var(--ld-z-popover);
}

[data-ld-combobox-list].ld-show {
  display: block;
}

[data-ld-combobox-option] {
  padding: var(--ld-space-2);
  border-radius: var(--ld-border-radius-sm);
  font-size: var(--ld-text-sm);
  color: var(--ld-text);
  cursor: pointer;
}

[data-ld-combobox-option][data-ld-highlighted='true'] {
  background: var(--ld-accent);
  color: var(--ld-accent-text);
}

[data-ld-combobox-option].ld-hide {
  display: none;
}

[data-ld-combobox-empty] {
  padding: var(--ld-space-2) var(--ld-space-3);
  font-size: var(--ld-text-sm);
  color: var(--ld-text-muted);
  display: none;
}

[data-ld-combobox-empty].ld-show {
  display: block;
}

/* -- Async states, rendered rows, groups (v3.1.0) ----------------------------- */

[data-ld-combobox-loading],
[data-ld-combobox-error] {
  display: none;
  align-items: center;
  gap: var(--ld-space-2);
  padding: var(--ld-space-2) var(--ld-space-3);
  font-size: var(--ld-text-sm);
  color: var(--ld-text-muted);
}

[data-ld-combobox-loading].ld-show,
[data-ld-combobox-error].ld-show {
  display: flex;
}

[data-ld-combobox-error] {
  justify-content: space-between;
  color: var(--ld-danger);
}

/* while a new search is in flight, keep the old rows but dim them */
[data-ld-combobox-list][data-ld-stale='true'] [data-ld-combobox-option] {
  opacity: 0.5;
  pointer-events: none;
}

[data-ld-combobox-option] .ld-combobox-label {
  display: block;
}

[data-ld-combobox-option] .ld-combobox-desc {
  display: block;
  color: var(--ld-text-muted);
  font-size: var(--ld-text-xs);
}

[data-ld-combobox-option][data-ld-highlighted='true'] .ld-combobox-desc {
  color: inherit;
  opacity: 0.8;
}

[data-ld-combobox-option] mark {
  background: transparent;
  color: inherit;
  font-weight: var(--ld-weight-bold);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

[data-ld-combobox-option][aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

[data-ld-combobox-option][aria-selected='true']::after {
  content: '✓';
  float: right;
  margin-inline-start: var(--ld-space-2);
}

a[data-ld-combobox-option] {
  display: block;
  text-decoration: none;
}

.ld-combobox-group {
  padding: var(--ld-space-2) var(--ld-space-2) var(--ld-space-1);
  font-size: var(--ld-text-xs);
  font-weight: var(--ld-weight-bold);
  color: var(--ld-text-muted);
}

.ld-combobox-group:not(:first-child) {
  margin-top: var(--ld-space-1);
  border-top: var(--ld-border-width) solid var(--ld-border-soft);
}


/* ==========================================================================
   37l. Empty state — ld-empty
   The "nothing here" pattern: no results, an empty cart, a fresh
   account with no history yet. Pure layout/type, no JS — drop it in
   wherever a list or grid would otherwise render blank.
   ========================================================================== */

.ld-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--ld-space-1);
  padding: var(--ld-space-8) var(--ld-space-5);
  color: var(--ld-text-muted);
}

.ld-empty-icon {
  font-family: var(--ld-font-mono);
  font-size: var(--ld-text-3xl);
  color: var(--ld-border);
  margin-bottom: var(--ld-space-2);
}

.ld-empty-title {
  font-size: var(--ld-text-base);
  font-weight: 700;
  color: var(--ld-text);
}

.ld-empty-body {
  font-size: var(--ld-text-sm);
  max-width: 40ch;
}

.ld-empty-actions {
  margin-top: var(--ld-space-3);
  display: flex;
  gap: var(--ld-space-2);
}


/* ==========================================================================
   37m. Timeline — ld-timeline
   A vertical, dated sequence: order history, an activity feed, a
   changelog. Unlike the stepper (horizontal, a fixed set of stages),
   the timeline is open-ended and reads top-to-bottom or newest-first.
   ========================================================================== */

.ld-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-inline-start: var(--ld-border-width) solid var(--ld-border-soft);
}

.ld-timeline-item {
  position: relative;
  padding-inline-start: var(--ld-space-5);
  padding-bottom: var(--ld-space-5);
}

.ld-timeline-item:last-child {
  padding-bottom: 0;
}

.ld-timeline-item::before {
  content: '';
  position: absolute;
  inset-inline-start: -5px;
  top: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ld-surface);
  border: 2px solid var(--ld-border);
}

.ld-timeline-item[data-ld-variant='accent']::before {
  border-color: var(--ld-accent);
  background: var(--ld-accent);
}

.ld-timeline-item[data-ld-variant='danger']::before {
  border-color: var(--ld-danger);
  background: var(--ld-danger);
}

.ld-timeline-time {
  display: block;
  font-family: var(--ld-font-mono);
  font-size: var(--ld-text-xs);
  color: var(--ld-text-muted);
  margin-bottom: 2px;
}

.ld-timeline-title {
  font-weight: 700;
  font-size: var(--ld-text-sm);
}

.ld-timeline-body {
  font-size: var(--ld-text-sm);
  color: var(--ld-text-muted);
  margin-top: 2px;
}


/* ==========================================================================
   37n. Icons — ld-icon
   A sizing convention for inline SVGs, not an icon set. Default size
   tracks the surrounding font-size (1em), so an icon in a button or
   badge scales with it automatically; ld-icon-sm/lg override that for
   standalone use. Bring your own SVGs — set stroke="currentColor" (or
   fill, for solid icons) and no width/height so this class controls
   sizing.
   ========================================================================== */

.ld-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.ld-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ld-icon-sm {
  width: var(--ld-text-sm);
  height: var(--ld-text-sm);
}

.ld-icon-lg {
  width: var(--ld-text-xl);
  height: var(--ld-text-xl);
}


/* ==========================================================================
   37o. 12-column grid — ld-grid-row / ld-col-* / ld-offset-*
   Distinct from .ld-grid (an even N-up grid for cards/stats): this is
   for asymmetric layouts — a 4-column sidebar next to an 8-column
   body, staggered offsets, that kind of thing. Flexbox-based (not CSS
   Grid) so equal-width auto columns (.ld-col with no number) work the
   way they do in most grid systems people already know.
   Mobile-first: base .ld-col-* applies at every size unless overridden
   by a breakpoint-prefixed class (.ld-col-md-6, etc).
   ========================================================================== */

.ld-grid-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--ld-gutter, var(--ld-space-4)) / -2);
  margin-right: calc(var(--ld-gutter, var(--ld-space-4)) / -2);
}

.ld-col,
[class*='ld-col-'] {
  width: 100%;
  padding-left: calc(var(--ld-gutter, var(--ld-space-4)) / 2);
  padding-right: calc(var(--ld-gutter, var(--ld-space-4)) / 2);
}

.ld-col {
  flex: 1 0 0%;
}

.ld-col-auto {
  flex: 0 0 auto;
  width: auto;
}

.ld-col-1 {
  flex: 0 0 auto;
  width: 8.3333%;
}

.ld-col-2 {
  flex: 0 0 auto;
  width: 16.6667%;
}

.ld-col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.ld-col-4 {
  flex: 0 0 auto;
  width: 33.3333%;
}

.ld-col-5 {
  flex: 0 0 auto;
  width: 41.6667%;
}

.ld-col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.ld-col-7 {
  flex: 0 0 auto;
  width: 58.3333%;
}

.ld-col-8 {
  flex: 0 0 auto;
  width: 66.6667%;
}

.ld-col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.ld-col-10 {
  flex: 0 0 auto;
  width: 83.3333%;
}

.ld-col-11 {
  flex: 0 0 auto;
  width: 91.6667%;
}

.ld-col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.ld-offset-0 {
  margin-left: 0;
}

.ld-offset-1 {
  margin-left: 8.3333%;
}

.ld-offset-2 {
  margin-left: 16.6667%;
}

.ld-offset-3 {
  margin-left: 25%;
}

.ld-offset-4 {
  margin-left: 33.3333%;
}

.ld-offset-5 {
  margin-left: 41.6667%;
}

.ld-offset-6 {
  margin-left: 50%;
}

.ld-offset-7 {
  margin-left: 58.3333%;
}

.ld-offset-8 {
  margin-left: 66.6667%;
}

.ld-offset-9 {
  margin-left: 75%;
}

.ld-offset-10 {
  margin-left: 83.3333%;
}

.ld-offset-11 {
  margin-left: 91.6667%;
}

@media (min-width: 640px) {
  .ld-col-sm {
    flex: 1 0 0%;
    width: 100%;
  }

  .ld-col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .ld-col-sm-1 {
    flex: 0 0 auto;
    width: 8.3333%;
  }

  .ld-col-sm-2 {
    flex: 0 0 auto;
    width: 16.6667%;
  }

  .ld-col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .ld-col-sm-4 {
    flex: 0 0 auto;
    width: 33.3333%;
  }

  .ld-col-sm-5 {
    flex: 0 0 auto;
    width: 41.6667%;
  }

  .ld-col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .ld-col-sm-7 {
    flex: 0 0 auto;
    width: 58.3333%;
  }

  .ld-col-sm-8 {
    flex: 0 0 auto;
    width: 66.6667%;
  }

  .ld-col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .ld-col-sm-10 {
    flex: 0 0 auto;
    width: 83.3333%;
  }

  .ld-col-sm-11 {
    flex: 0 0 auto;
    width: 91.6667%;
  }

  .ld-col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  .ld-offset-sm-0 {
    margin-left: 0;
  }

  .ld-offset-sm-1 {
    margin-left: 8.3333%;
  }

  .ld-offset-sm-2 {
    margin-left: 16.6667%;
  }

  .ld-offset-sm-3 {
    margin-left: 25%;
  }

  .ld-offset-sm-4 {
    margin-left: 33.3333%;
  }

  .ld-offset-sm-5 {
    margin-left: 41.6667%;
  }

  .ld-offset-sm-6 {
    margin-left: 50%;
  }

  .ld-offset-sm-7 {
    margin-left: 58.3333%;
  }

  .ld-offset-sm-8 {
    margin-left: 66.6667%;
  }

  .ld-offset-sm-9 {
    margin-left: 75%;
  }

  .ld-offset-sm-10 {
    margin-left: 83.3333%;
  }

  .ld-offset-sm-11 {
    margin-left: 91.6667%;
  }
}

@media (min-width: 960px) {
  .ld-col-md {
    flex: 1 0 0%;
    width: 100%;
  }

  .ld-col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .ld-col-md-1 {
    flex: 0 0 auto;
    width: 8.3333%;
  }

  .ld-col-md-2 {
    flex: 0 0 auto;
    width: 16.6667%;
  }

  .ld-col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .ld-col-md-4 {
    flex: 0 0 auto;
    width: 33.3333%;
  }

  .ld-col-md-5 {
    flex: 0 0 auto;
    width: 41.6667%;
  }

  .ld-col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .ld-col-md-7 {
    flex: 0 0 auto;
    width: 58.3333%;
  }

  .ld-col-md-8 {
    flex: 0 0 auto;
    width: 66.6667%;
  }

  .ld-col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .ld-col-md-10 {
    flex: 0 0 auto;
    width: 83.3333%;
  }

  .ld-col-md-11 {
    flex: 0 0 auto;
    width: 91.6667%;
  }

  .ld-col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  .ld-offset-md-0 {
    margin-left: 0;
  }

  .ld-offset-md-1 {
    margin-left: 8.3333%;
  }

  .ld-offset-md-2 {
    margin-left: 16.6667%;
  }

  .ld-offset-md-3 {
    margin-left: 25%;
  }

  .ld-offset-md-4 {
    margin-left: 33.3333%;
  }

  .ld-offset-md-5 {
    margin-left: 41.6667%;
  }

  .ld-offset-md-6 {
    margin-left: 50%;
  }

  .ld-offset-md-7 {
    margin-left: 58.3333%;
  }

  .ld-offset-md-8 {
    margin-left: 66.6667%;
  }

  .ld-offset-md-9 {
    margin-left: 75%;
  }

  .ld-offset-md-10 {
    margin-left: 83.3333%;
  }

  .ld-offset-md-11 {
    margin-left: 91.6667%;
  }
}

@media (min-width: 1200px) {
  .ld-col-lg {
    flex: 1 0 0%;
    width: 100%;
  }

  .ld-col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .ld-col-lg-1 {
    flex: 0 0 auto;
    width: 8.3333%;
  }

  .ld-col-lg-2 {
    flex: 0 0 auto;
    width: 16.6667%;
  }

  .ld-col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .ld-col-lg-4 {
    flex: 0 0 auto;
    width: 33.3333%;
  }

  .ld-col-lg-5 {
    flex: 0 0 auto;
    width: 41.6667%;
  }

  .ld-col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .ld-col-lg-7 {
    flex: 0 0 auto;
    width: 58.3333%;
  }

  .ld-col-lg-8 {
    flex: 0 0 auto;
    width: 66.6667%;
  }

  .ld-col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .ld-col-lg-10 {
    flex: 0 0 auto;
    width: 83.3333%;
  }

  .ld-col-lg-11 {
    flex: 0 0 auto;
    width: 91.6667%;
  }

  .ld-col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  .ld-offset-lg-0 {
    margin-left: 0;
  }

  .ld-offset-lg-1 {
    margin-left: 8.3333%;
  }

  .ld-offset-lg-2 {
    margin-left: 16.6667%;
  }

  .ld-offset-lg-3 {
    margin-left: 25%;
  }

  .ld-offset-lg-4 {
    margin-left: 33.3333%;
  }

  .ld-offset-lg-5 {
    margin-left: 41.6667%;
  }

  .ld-offset-lg-6 {
    margin-left: 50%;
  }

  .ld-offset-lg-7 {
    margin-left: 58.3333%;
  }

  .ld-offset-lg-8 {
    margin-left: 66.6667%;
  }

  .ld-offset-lg-9 {
    margin-left: 75%;
  }

  .ld-offset-lg-10 {
    margin-left: 83.3333%;
  }

  .ld-offset-lg-11 {
    margin-left: 91.6667%;
  }
}

@media (min-width: 1440px) {
  .ld-col-xl {
    flex: 1 0 0%;
    width: 100%;
  }

  .ld-col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .ld-col-xl-1 {
    flex: 0 0 auto;
    width: 8.3333%;
  }

  .ld-col-xl-2 {
    flex: 0 0 auto;
    width: 16.6667%;
  }

  .ld-col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .ld-col-xl-4 {
    flex: 0 0 auto;
    width: 33.3333%;
  }

  .ld-col-xl-5 {
    flex: 0 0 auto;
    width: 41.6667%;
  }

  .ld-col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .ld-col-xl-7 {
    flex: 0 0 auto;
    width: 58.3333%;
  }

  .ld-col-xl-8 {
    flex: 0 0 auto;
    width: 66.6667%;
  }

  .ld-col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .ld-col-xl-10 {
    flex: 0 0 auto;
    width: 83.3333%;
  }

  .ld-col-xl-11 {
    flex: 0 0 auto;
    width: 91.6667%;
  }

  .ld-col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  .ld-offset-xl-0 {
    margin-left: 0;
  }

  .ld-offset-xl-1 {
    margin-left: 8.3333%;
  }

  .ld-offset-xl-2 {
    margin-left: 16.6667%;
  }

  .ld-offset-xl-3 {
    margin-left: 25%;
  }

  .ld-offset-xl-4 {
    margin-left: 33.3333%;
  }

  .ld-offset-xl-5 {
    margin-left: 41.6667%;
  }

  .ld-offset-xl-6 {
    margin-left: 50%;
  }

  .ld-offset-xl-7 {
    margin-left: 58.3333%;
  }

  .ld-offset-xl-8 {
    margin-left: 66.6667%;
  }

  .ld-offset-xl-9 {
    margin-left: 75%;
  }

  .ld-offset-xl-10 {
    margin-left: 83.3333%;
  }

  .ld-offset-xl-11 {
    margin-left: 91.6667%;
  }
}


/* ==========================================================================
   37p. Carousel — data-ld-carousel (paired with ldcss.js)
   data-ld-carousel wraps a data-ld-carousel-track of data-ld-carousel-slide
   elements. Prev/next buttons use data-ld-toggle="carousel-prev"/"carousel-next"
   scoped to the nearest carousel; dots are data-ld-carousel-dot, one per
   slide, inside a data-ld-carousel-dots container. data-ld-autoplay="true"
   plus data-ld-interval="5000" (ms) starts it auto-advancing; hovering
   pauses it.
   ========================================================================== */

[data-ld-carousel] {
  position: relative;
  overflow: hidden;
  border-radius: var(--ld-radius);
}

[data-ld-carousel-track] {
  display: flex;
  transition: transform 400ms ease;
}

[data-ld-carousel-slide] {
  flex: 0 0 100%;
  min-width: 0;
}

/* Arrows are centred with inset + auto margins, not a transform. A transform
   would be replaced by .ld-btn:active's press nudge, so the arrow jumped down
   while you clicked it (v3.0.1 hid this by hand-tuning top/translate for one
   carousel height; this version stays centred at any height). */
[data-ld-toggle='carousel-prev'],
[data-ld-toggle='carousel-next'] {
  position: absolute;
  inset-block: 0;
  margin-block: auto;
  z-index: 5;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

[data-ld-toggle='carousel-prev'] {
  inset-inline-start: var(--ld-space-3);
}

[data-ld-toggle='carousel-next'] {
  inset-inline-end: var(--ld-space-3);
}

[data-ld-carousel-dots] {
  position: absolute;
  bottom: var(--ld-space-3);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 5;
}

[data-ld-carousel-dot] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: color-mix(in srgb, var(--ld-bg) 60%, transparent);
  cursor: pointer;
}

[data-ld-carousel-dot][data-ld-active='true'] {
  background: var(--ld-accent);
}


/* ==========================================================================
   37q. Navbar collapse — data-ld-navbar-collapse (paired with ldcss.js)
   A lighter alternative to the slide-in offcanvas: content that's
   hidden below a breakpoint and toggled open inline (dropping down
   under the navbar), then automatically always-visible above that
   breakpoint with no JS involvement — the classic "hamburger below,
   inline links above" pattern. data-ld-collapse-at controls which
   breakpoint it switches at: sm/md (default)/lg/xl.
   ========================================================================== */

[data-ld-navbar-collapse] {
  display: none;
  width: 100%;
}

[data-ld-navbar-collapse][data-ld-show='true'] {
  display: block;
}

@media (min-width: 640px) {
  [data-ld-navbar-collapse][data-ld-collapse-at='sm'] {
    display: flex !important;
    width: auto;
  }
}

@media (min-width: 960px) {

  [data-ld-navbar-collapse]:not([data-ld-collapse-at]),
  [data-ld-navbar-collapse][data-ld-collapse-at='md'] {
    display: flex !important;
    width: auto;
  }
}

@media (min-width: 1200px) {
  [data-ld-navbar-collapse][data-ld-collapse-at='lg'] {
    display: flex !important;
    width: auto;
  }
}

@media (min-width: 1440px) {
  [data-ld-navbar-collapse][data-ld-collapse-at='xl'] {
    display: flex !important;
    width: auto;
  }
}


/* ==========================================================================
   37r. Select — arrow treatment for .ld-select
   ------------------------------------------------------------------------
   .ld-select (§9) previously inherited the plain .ld-input box with no
   custom arrow — background-image is the only reliable cross-browser way
   to draw one without a wrapper element, so the caret is baked in as a
   data-URI SVG that reads --ld-text-muted. Native <select> can't be
   restyled further than this (no styling the popup list itself); reach
   for the combobox (§37k) if you need a fully custom listbox.
   ========================================================================== */

.ld-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%235B6560' d='M4 6l4 4 4-4H4z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--ld-space-3) center;
  background-size: 12px;
  padding-inline-end: var(--ld-space-6);
}

[data-ld-theme='dark'] .ld-select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%238A928D' d='M4 6l4 4 4-4H4z'/%3e%3c/svg%3e");
}
@media (prefers-color-scheme: dark) {
  :where(:root):not([data-ld-theme]) .ld-select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%238A928D' d='M4 6l4 4 4-4H4z'/%3e%3c/svg%3e");
}
}


.ld-select[multiple] {
  background-image: none;
  padding-inline-end: var(--ld-space-3);
}


/* ==========================================================================
   37s. Notification dot / count badge — ld-dot
   ------------------------------------------------------------------------
   For an unread marker on an icon, avatar, or nav item. Different from
   .ld-badge (§6), which is an inline text pill, not an absolutely
   positioned overlay. Apply to a position:relative ancestor
   (.ld-avatar already is one).
   ========================================================================== */

.ld-dot {
  position: absolute;
  top: -2px;
  inset-inline-end: -2px;
  min-width: 8px;
  height: 8px;
  padding: 0 3px;
  border-radius: 9999px;
  background: var(--ld-danger);
  border: 2px solid var(--ld-surface);
  box-sizing: content-box;
}

.ld-dot[data-ld-count] {
  height: 16px;
  min-width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--ld-weight-bold);
  color: var(--ld-danger-text);
  line-height: 1;
}

.ld-dot[data-ld-count]::before {
  content: attr(data-ld-count);
}

.ld-dot[data-ld-variant='accent'] {
  background: var(--ld-accent);
  color: var(--ld-accent-text);
}

.ld-dot[data-ld-variant='muted'] {
  background: var(--ld-text-muted);
}


/* ==========================================================================
   37t. Input affix extras — clear button + password toggle
   ------------------------------------------------------------------------
   Both slot into the .ld-input-group affix pattern from §37j. Paired
   with ldcss.js: [data-ld-input-clear] empties the previous sibling
   input and refocuses it; [data-ld-password-toggle] flips a sibling
   password input's type between "password" and "text".
   ========================================================================== */

[data-ld-input-clear] {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ld-text-muted);
  display: none;
  padding: 0 var(--ld-space-2);
  font-size: var(--ld-text-base);
  line-height: 1;
}

[data-ld-input-clear][data-ld-show='true'] {
  display: inline-flex;
  align-items: center;
}

[data-ld-input-clear]:hover {
  color: var(--ld-text);
}

[data-ld-password-toggle] {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ld-text-muted);
  font-family: var(--ld-font-family);
  font-size: var(--ld-text-xs);
  font-weight: var(--ld-weight-bold);
  padding: 0 var(--ld-space-2);
}

[data-ld-password-toggle]:hover {
  color: var(--ld-text);
}

[data-ld-password-toggle]::before {
  content: 'Show';
}

[data-ld-password-toggle][data-ld-active='true']::before {
  content: 'Hide';
}


/* ==========================================================================
   37u. Button group & split button — ld-btn-group
   ------------------------------------------------------------------------
   Adjacent .ld-btn elements sharing one outline instead of each drawing
   its own border/radius/shadow. A split button is just a group with its
   last child narrowed via [data-ld-split] — the dropdown behavior comes
   from wrapping that last button in the existing §10 dropdown markup.
   ========================================================================== */

.ld-btn-group {
  display: inline-flex;
}

.ld-btn-group .ld-btn {
  border-radius: 0;
  box-shadow: none;
}

.ld-btn-group .ld-btn:not(:first-child) {
  border-inline-start-width: 0;
}

.ld-btn-group .ld-btn:first-child {
  border-start-start-radius: var(--ld-radius);
  border-end-start-radius: var(--ld-radius);
}

.ld-btn-group .ld-btn:last-child {
  border-start-end-radius: var(--ld-radius);
  border-end-end-radius: var(--ld-radius);
}

.ld-btn-group .ld-btn:focus-visible {
  position: relative;
  z-index: 1;
}

.ld-btn-group .ld-btn[data-ld-split='true'] {
  padding-inline: var(--ld-space-2);
}


/* ==========================================================================
   37v. Skip link — ld-skip-link
   ------------------------------------------------------------------------
   Place as the very first focusable element in <body>, pointing at your
   main landmark's id. Off-screen until focused, matching the pattern
   .ld-sr-only-focusable uses in §38g — this is the same idea pre-styled
   as a real, visible link rather than a bare accessibility utility.
   ========================================================================== */

.ld-skip-link {
  position: absolute;
  top: -40px;
  left: var(--ld-space-3);
  z-index: var(--ld-z-command);
  background: var(--ld-surface);
  color: var(--ld-text);
  border: var(--ld-border-width) solid var(--ld-border);
  border-radius: var(--ld-radius);
  padding: var(--ld-space-2) var(--ld-space-4);
  font-family: var(--ld-font-family);
  font-size: var(--ld-text-sm);
  font-weight: var(--ld-weight-bold);
  text-decoration: none;
  transition: top var(--ld-transition);
}

.ld-skip-link:focus {
  top: var(--ld-space-3);
}


/* ==========================================================================
   Accessibility additions (v3.1.0)
   ========================================================================== */

/* WCAG 2.2 target size (2.5.8): controls that are drawn smaller than 24 x 24 px
   keep their look but get an invisible hit area that reaches 24 px. */
[data-ld-carousel-dot],
.ld-tag-remove,
[data-ld-tag-remove] {
  position: relative;
}

[data-ld-carousel-dot]::after,
.ld-tag-remove::after,
[data-ld-tag-remove]::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: max(100%, 24px);
  height: max(100%, 24px);
  transform: translate(-50%, -50%);
}

.ld-toast-close,
.ld-search-clear,
.ld-nc-dismiss {
  min-width: 24px;
  min-height: 24px;
}

/* a tooltip the person dismissed with Esc stays hidden until they leave */
[data-ld-tooltip][data-ld-tooltip-dismissed]::after {
  display: none;
}

/* the focus indicator must survive forced-colors / Windows High Contrast */
@media (forced-colors: active) {

  .ld-input:focus,
  .ld-textarea:focus,
  .ld-select:focus {
    outline: 2px solid Highlight;
    outline-offset: 1px;
  }

  .ld-btn,
  .ld-badge,
  .ld-card,
  .ld-toast,
  .ld-context-menu,
  [data-ld-combobox-list],
  [data-ld-dropdown-menu] {
    border: 1px solid CanvasText;
  }

  [data-ld-combobox-option][data-ld-highlighted='true'],
  .ld-context-item:focus-visible,
  .ld-context-item:hover,
  .ld-sidebar-link[data-ld-active='true'],
  .ld-pager li[data-ld-active='true'] button {
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }

  [data-ld-progress] {
    background: Highlight;
    forced-color-adjust: none;
  }
}


/* ==========================================================================
   37w. Sticky table header — data-ld-sticky-head
   ------------------------------------------------------------------------
   Add alongside .ld-table (§22) for a header row that stays pinned while
   the table body scrolls. Requires a scrolling ancestor with a bounded
   height (e.g. wrap the table in a div with max-height + overflow-y:auto)
   — position:sticky has no effect without one.
   ========================================================================== */

.ld-table[data-ld-sticky-head] thead th {
  position: sticky;
  top: 0;
  background: var(--ld-surface);
  z-index: 1;
}


/* ==========================================================================
   37x. Sidebar & app shell — ld-shell, ld-sidebar
   A page layout with a navigation sidebar. At and above a breakpoint the
   sidebar is a sticky column beside the content; below it, the sidebar
   becomes a sticky top bar whose links drop down from a Menu button
   (ldcss.js wires the button — same data-ld-toggle="navbar-collapse" as the
   navbar collapse in §37q — and closes the menu on link click / Escape).

   data-ld-collapse-at on .ld-shell picks the breakpoint at which the
   sidebar appears: sm (default, 640px — tablets and up) · md · lg · xl.
   The breakpoint-dependent rules are generated by build.mjs
   (s37x-sidebar-app-shell.gen.mjs) from the one breakpoint table, so they
   cannot drift from the rest of the framework.

   <div class="ld-shell">
     <aside class="ld-sidebar">
       <div class="ld-sidebar-header">
         <a class="ld-nav-brand" href="/">Brand</a>
         <button class="ld-btn ld-sidebar-toggle" data-ld-size="sm"
                 data-ld-variant="ghost" data-ld-toggle="navbar-collapse"
                 data-ld-target="#side-menu" aria-controls="side-menu"
                 aria-expanded="false">Menu</button>
       </div>
       <nav class="ld-sidebar-body" id="side-menu" aria-label="Main">
         <ul class="ld-sidebar-links">            (add data-ld-scrollspy for in-page links)
           <li><a class="ld-sidebar-link" href="#a" data-ld-active="true">Home</a></li>
           <li class="ld-sidebar-heading">Projects</li>
           <li><a class="ld-sidebar-link" href="#b">Work</a></li>
         </ul>
         <div class="ld-sidebar-footer">…</div>
       </nav>
     </aside>
     <main class="ld-shell-main"> … </main>
   </div>
   ========================================================================== */

/* -- Below the breakpoint: sticky top bar + dropdown menu ----------------- */

.ld-shell {
  min-height: 100vh;
  min-height: 100dvh;
}

.ld-shell-main {
  min-width: 0;
}

/* a sticky top bar would otherwise cover the heading an anchor jumps to */
.ld-shell-main [id] {
  scroll-margin-top: 4.5rem;
}

.ld-sidebar {
  position: sticky;
  top: 0;
  z-index: var(--ld-z-dropdown);
  background: var(--ld-surface);
  border-bottom: var(--ld-border-width) solid var(--ld-border);
}

.ld-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ld-space-3);
  padding: var(--ld-space-3) var(--ld-space-5);
}

.ld-sidebar-body {
  display: none;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  flex-direction: column;
  gap: var(--ld-space-4);
  max-height: 80vh;
  max-height: 80dvh;
  overflow-y: auto;
  padding: var(--ld-space-2) var(--ld-space-5) var(--ld-space-5);
  background: var(--ld-surface);
  border-bottom: var(--ld-border-width) solid var(--ld-border);
  box-shadow: var(--ld-shadow);
}

.ld-sidebar-body[data-ld-show='true'] {
  display: flex;
}

.ld-sidebar-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ld-sidebar-heading {
  padding: var(--ld-space-4) var(--ld-space-3) var(--ld-space-1);
  font-size: var(--ld-text-xs);
  font-weight: var(--ld-weight-bold);
  color: var(--ld-text-muted);
}

.ld-sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--ld-space-2);
  padding: var(--ld-space-2) var(--ld-space-3);
  border-radius: var(--ld-radius);
  color: var(--ld-text-muted);
  font-size: var(--ld-text-sm);
  text-decoration: none;
  transition: color var(--ld-transition), background var(--ld-transition);
}

/* active marker: a short accent bar, drawn in a pseudo-element so the
   active state never shifts the label sideways */
.ld-sidebar-link::before {
  content: '';
  flex: none;
  width: 3px;
  height: 1em;
  border-radius: 2px;
  background: transparent;
  transition: background var(--ld-transition);
}

.ld-sidebar-link:hover {
  color: var(--ld-text);
  background: var(--ld-surface-raised);
}

.ld-sidebar-link[data-ld-active='true'] {
  color: var(--ld-text);
  background: var(--ld-surface-raised);
}

.ld-sidebar-link[data-ld-active='true']::before {
  background: var(--ld-accent);
}

.ld-sidebar-footer {
  display: flex;
  align-items: center;
  gap: var(--ld-space-2);
  margin-top: auto;
  padding-top: var(--ld-space-4);
  border-top: var(--ld-border-width) solid var(--ld-border-soft);
}

@media print {
  .ld-sidebar {
    display: none;
  }
}


/* generated by components/s37x-sidebar-app-shell.gen.mjs */
/* -- At and above the breakpoint: sticky sidebar column (generated) ---------- */

@media screen and (min-width: 640px) {
  .ld-shell:not([data-ld-collapse-at]),
  .ld-shell[data-ld-collapse-at='sm'] {
    display: grid;
    grid-template-columns: var(--ld-sidebar-width) minmax(0, 1fr);
    align-items: start;
  }

  .ld-shell:not([data-ld-collapse-at]) > .ld-sidebar,
  .ld-shell[data-ld-collapse-at='sm'] > .ld-sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    border-bottom: 0;
    border-inline-end: var(--ld-border-width) solid var(--ld-border);
  }

  .ld-shell:not([data-ld-collapse-at]) .ld-sidebar-toggle,
  .ld-shell[data-ld-collapse-at='sm'] .ld-sidebar-toggle {
    display: none;
  }

  .ld-shell:not([data-ld-collapse-at]) .ld-sidebar-body,
  .ld-shell[data-ld-collapse-at='sm'] .ld-sidebar-body {
    display: flex;
    position: static;
    flex: 1 1 auto;
    max-height: none;
    overflow: visible;
    padding: var(--ld-space-2) var(--ld-space-4) var(--ld-space-4);
    border: 0;
    box-shadow: none;
  }

  .ld-shell:not([data-ld-collapse-at]) .ld-shell-main [id],
  .ld-shell[data-ld-collapse-at='sm'] .ld-shell-main [id] {
    scroll-margin-top: 0;
  }
}

@media screen and (min-width: 960px) {
  .ld-shell[data-ld-collapse-at='md'] {
    display: grid;
    grid-template-columns: var(--ld-sidebar-width) minmax(0, 1fr);
    align-items: start;
  }

  .ld-shell[data-ld-collapse-at='md'] > .ld-sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    border-bottom: 0;
    border-inline-end: var(--ld-border-width) solid var(--ld-border);
  }

  .ld-shell[data-ld-collapse-at='md'] .ld-sidebar-toggle {
    display: none;
  }

  .ld-shell[data-ld-collapse-at='md'] .ld-sidebar-body {
    display: flex;
    position: static;
    flex: 1 1 auto;
    max-height: none;
    overflow: visible;
    padding: var(--ld-space-2) var(--ld-space-4) var(--ld-space-4);
    border: 0;
    box-shadow: none;
  }

  .ld-shell[data-ld-collapse-at='md'] .ld-shell-main [id] {
    scroll-margin-top: 0;
  }
}

@media screen and (min-width: 1200px) {
  .ld-shell[data-ld-collapse-at='lg'] {
    display: grid;
    grid-template-columns: var(--ld-sidebar-width) minmax(0, 1fr);
    align-items: start;
  }

  .ld-shell[data-ld-collapse-at='lg'] > .ld-sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    border-bottom: 0;
    border-inline-end: var(--ld-border-width) solid var(--ld-border);
  }

  .ld-shell[data-ld-collapse-at='lg'] .ld-sidebar-toggle {
    display: none;
  }

  .ld-shell[data-ld-collapse-at='lg'] .ld-sidebar-body {
    display: flex;
    position: static;
    flex: 1 1 auto;
    max-height: none;
    overflow: visible;
    padding: var(--ld-space-2) var(--ld-space-4) var(--ld-space-4);
    border: 0;
    box-shadow: none;
  }

  .ld-shell[data-ld-collapse-at='lg'] .ld-shell-main [id] {
    scroll-margin-top: 0;
  }
}

@media screen and (min-width: 1440px) {
  .ld-shell[data-ld-collapse-at='xl'] {
    display: grid;
    grid-template-columns: var(--ld-sidebar-width) minmax(0, 1fr);
    align-items: start;
  }

  .ld-shell[data-ld-collapse-at='xl'] > .ld-sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    border-bottom: 0;
    border-inline-end: var(--ld-border-width) solid var(--ld-border);
  }

  .ld-shell[data-ld-collapse-at='xl'] .ld-sidebar-toggle {
    display: none;
  }

  .ld-shell[data-ld-collapse-at='xl'] .ld-sidebar-body {
    display: flex;
    position: static;
    flex: 1 1 auto;
    max-height: none;
    overflow: visible;
    padding: var(--ld-space-2) var(--ld-space-4) var(--ld-space-4);
    border: 0;
    box-shadow: none;
  }

  .ld-shell[data-ld-collapse-at='xl'] .ld-shell-main [id] {
    scroll-margin-top: 0;
  }
}

/* ==========================================================================
   37y. Disclosure & context menu (paired with ldcss.js)
   ========================================================================== */

/* -- Disclosure: animated show/hide for any block ---------------------------
   Grid rows animate 0fr → 1fr, so the height is never measured in JS. The
   closed panel is also visibility:hidden (JS adds inert), so nothing inside
   it can be tabbed to. */
.ld-disclosure {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 200ms ease, visibility 0s linear 200ms;
}

.ld-disclosure[data-ld-open='true'] {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 200ms ease, visibility 0s;
}

.ld-disclosure-inner {
  min-height: 0;
  overflow: hidden;
}

/* a trigger with a turning chevron (opt out: data-ld-icon="none") */
.ld-disclosure-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--ld-space-2);
}

.ld-disclosure-trigger:not([data-ld-icon='none'])::after {
  content: '';
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.12em) rotate(45deg);
  transition: transform var(--ld-transition);
}

.ld-disclosure-trigger[aria-expanded='true']:not([data-ld-icon='none'])::after {
  transform: translateY(0.1em) rotate(-135deg);
}

/* -- Context menu ------------------------------------------------------------ */
.ld-context-menu {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  min-width: 200px;
  max-width: 320px;
  padding: var(--ld-space-2);
  background: var(--ld-surface);
  border: var(--ld-border-width) solid var(--ld-border);
  border-radius: var(--ld-radius);
  box-shadow: var(--ld-shadow-lg);
  z-index: var(--ld-z-popover);
  outline: 2px solid transparent;
}

.ld-context-menu.ld-show {
  display: block;
}

.ld-context-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ld-space-4);
  width: 100%;
  padding: var(--ld-space-2);
  background: none;
  border: none;
  border-radius: var(--ld-border-radius-sm);
  font-family: var(--ld-font-family);
  font-size: var(--ld-text-sm);
  color: var(--ld-text);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.ld-context-item:hover,
.ld-context-item:focus-visible {
  background: var(--ld-surface-raised);
  /* transparent outline: shown by forced-colors, where the inset ring below is removed */
  outline: 2px solid transparent;
  outline-offset: -2px;
}

.ld-context-item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--ld-focus-ring);
}

.ld-context-item[data-ld-variant='danger'] {
  color: var(--ld-danger);
}

.ld-context-item[aria-disabled='true'],
.ld-context-item:disabled {
  color: var(--ld-text-muted);
  opacity: 0.55;
  cursor: not-allowed;
}

.ld-context-shortcut {
  margin-inline-start: auto;
  font-family: var(--ld-font-mono);
  font-size: var(--ld-text-xs);
  color: var(--ld-text-muted);
}

.ld-context-separator {
  height: 0;
  margin: var(--ld-space-1) calc(var(--ld-space-2) * -1);
  border-top: var(--ld-border-width) solid var(--ld-border-soft);
}

.ld-context-label {
  padding: var(--ld-space-2) var(--ld-space-2) var(--ld-space-1);
  font-size: var(--ld-text-xs);
  font-weight: var(--ld-weight-bold);
  color: var(--ld-text-muted);
}

/* the region itself: no text selection flash on touch long-press */
[data-ld-context-menu] {
  -webkit-touch-callout: none;
}

@media (prefers-reduced-motion: reduce) {

  .ld-disclosure,
  .ld-disclosure[data-ld-open='true'] {
    transition: none;
  }
}


/* ==========================================================================
   37z. Toast extras & notification centre (paired with ldcss.js)
   ========================================================================== */

.ld-toast {
  position: relative;
  overflow: hidden;
}

.ld-toast-title {
  font-weight: var(--ld-weight-bold);
  margin-bottom: 2px;
}

.ld-toast-actions {
  display: flex;
  gap: var(--ld-space-2);
  margin-top: var(--ld-space-2);
}

.ld-toast[data-ld-variant='warning'] {
  border-left: var(--ld-border-width) solid var(--ld-warning);
}

.ld-toast[data-ld-variant='info'] {
  border-left: var(--ld-border-width) solid var(--ld-info);
}

.ld-toast-leaving {
  animation: ld-toast-out 160ms ease forwards;
}

@keyframes ld-toast-out {
  to {
    transform: translateX(8px);
    opacity: 0;
  }
}

/* countdown bar; hovering/focusing a toast pauses the timer, so pause this too */
.ld-toast-progress {
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--ld-accent);
  transform-origin: left;
  animation: ld-toast-countdown linear forwards;
}

.ld-toast[data-ld-variant='danger'] .ld-toast-progress {
  background: var(--ld-danger);
}

.ld-toast[data-ld-paused='true'] .ld-toast-progress {
  animation-play-state: paused;
}

@keyframes ld-toast-countdown {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

/* -- Notification centre ----------------------------------------------------- */
.ld-nc {
  display: flex;
  flex-direction: column;
  width: min(24rem, calc(100vw - 2rem));
  max-height: min(28rem, 70vh);
  outline: 2px solid transparent;
}

.ld-nc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ld-space-3);
  padding: var(--ld-space-2) var(--ld-space-3);
  border-bottom: var(--ld-border-width) solid var(--ld-border-soft);
}

.ld-nc-tools {
  display: flex;
  gap: var(--ld-space-1);
}

.ld-nc-list {
  list-style: none;
  margin: 0;
  padding: var(--ld-space-1);
  overflow-y: auto;
}

.ld-nc-item {
  display: flex;
  align-items: flex-start;
  border-radius: var(--ld-border-radius-sm);
}

.ld-nc-item:hover {
  background: var(--ld-surface-raised);
}

.ld-nc-main {
  display: flex;
  align-items: flex-start;
  gap: var(--ld-space-2);
  flex: 1;
  min-width: 0;
  padding: var(--ld-space-2) var(--ld-space-2);
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
}

.ld-nc-dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 0.4em;
  border-radius: 50%;
  background: transparent;
}

.ld-nc-item[data-ld-unread='true'] .ld-nc-dot {
  background: var(--ld-accent);
}

.ld-nc-item[data-ld-variant='danger'][data-ld-unread='true'] .ld-nc-dot {
  background: var(--ld-danger);
}

.ld-nc-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: var(--ld-text-sm);
}

.ld-nc-title {
  font-weight: var(--ld-weight-bold);
}

.ld-nc-item:not([data-ld-unread='true']) .ld-nc-title {
  font-weight: var(--ld-weight-medium);
}

.ld-nc-message {
  color: var(--ld-text-muted);
  overflow-wrap: anywhere;
}

.ld-nc-time {
  font-size: var(--ld-text-xs);
  color: var(--ld-text-muted);
}

.ld-nc-dismiss {
  flex: none;
  align-self: flex-start;
  min-width: 28px;
  min-height: 28px;
  margin: var(--ld-space-1);
  background: none;
  border: none;
  border-radius: var(--ld-border-radius-sm);
  color: var(--ld-text-muted);
  font-size: var(--ld-text-lg);
  line-height: 1;
  cursor: pointer;
}

.ld-nc-dismiss:hover {
  color: var(--ld-text);
  background: var(--ld-surface-raised);
}

.ld-nc-empty {
  margin: 0;
  padding: var(--ld-space-6) var(--ld-space-4);
  text-align: center;
  font-size: var(--ld-text-sm);
  color: var(--ld-text-muted);
}

@media (prefers-reduced-motion: reduce) {

  .ld-toast-progress,
  .ld-toast-leaving {
    animation: none;
  }
}


/* ==========================================================================
   37za. Resizable panels (paired with ldcss.js)
   Give the container a height (vertical layouts need one) — panels share
   whatever room the handles leave, as flex ratios.
   ========================================================================== */

.ld-resizable {
  display: flex;
  width: 100%;
  min-height: 0;
  border: var(--ld-border-width) solid var(--ld-border-soft);
  border-radius: var(--ld-radius);
  overflow: hidden;
}

.ld-resizable[data-ld-direction='vertical'] {
  flex-direction: column;
}

.ld-panel {
  flex: 1 1 0%;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

/* 9px hit area with a 1px line in the middle; the line thickens and turns
   accent on hover, focus and while dragging (no glow) */
.ld-resize-handle {
  position: relative;
  flex: none;
  width: 9px;
  background: var(--ld-surface);
  cursor: col-resize;
  touch-action: none;
  user-select: none;
  outline-offset: -2px;
}

.ld-resize-handle::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--ld-border);
  transition: width var(--ld-transition), background var(--ld-transition);
}

.ld-resize-handle:hover::before,
.ld-resize-handle:focus-visible::before,
.ld-resizable[data-ld-resizing='true'] > .ld-resize-handle::before {
  width: 3px;
  background: var(--ld-accent);
}

.ld-resizable[data-ld-direction='vertical'] > .ld-resize-handle {
  width: auto;
  height: 9px;
  cursor: row-resize;
}

.ld-resizable[data-ld-direction='vertical'] > .ld-resize-handle::before {
  inset-block: auto;
  inset-inline: 0;
  inset-block-start: 50%;
  width: auto;
  height: 1px;
  transform: translateY(-50%);
  transition: height var(--ld-transition), background var(--ld-transition);
}

.ld-resizable[data-ld-direction='vertical'] > .ld-resize-handle:hover::before,
.ld-resizable[data-ld-direction='vertical'] > .ld-resize-handle:focus-visible::before,
.ld-resizable[data-ld-direction='vertical'][data-ld-resizing='true'] > .ld-resize-handle::before {
  width: auto;
  height: 3px;
}

/* while dragging: keep the resize cursor everywhere and stop text selection */
html.ld-resizing {
  cursor: col-resize;
  user-select: none;
}

html.ld-resizing[data-ld-resize-axis='vertical'] {
  cursor: row-resize;
}

html.ld-resizing iframe {
  pointer-events: none;
}

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

  .ld-resize-handle:hover::before,
  .ld-resize-handle:focus-visible::before {
    background: Highlight;
  }
}


/* ==========================================================================
   37zb. Easy tables — table[data-ld-table] (paired with ldcss.js)
   ========================================================================== */

.ld-table-shell {
  display: flex;
  flex-direction: column;
  gap: var(--ld-space-3);
}

.ld-table-wrap {
  overflow-x: auto;
  border: var(--ld-border-width) solid var(--ld-border-soft);
  border-radius: var(--ld-radius);
}

.ld-table-wrap > .ld-table {
  margin: 0;
}

.ld-table-wrap > .ld-table tbody tr:last-child td,
.ld-table-wrap > .ld-table tbody tr:last-child th {
  border-bottom: 0;
}

.ld-table tbody tr[hidden] {
  display: none;
}

.ld-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ld-space-3);
}

.ld-table-toolbar .ld-input {
  max-width: 20rem;
}

.ld-table-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ld-space-3);
  font-size: var(--ld-text-sm);
  color: var(--ld-text-muted);
}

.ld-table-footer-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ld-space-3);
}

/* sort buttons fill the header cell and look like the header text */
.ld-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ld-space-1);
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}

.ld-sort-btn:hover {
  color: var(--ld-text);
}

.ld-table th[data-ld-sort] .ld-sort-btn::after {
  content: '↕';
  opacity: 0.4;
}

.ld-table th[data-ld-sort][data-ld-sort-dir='asc'] .ld-sort-btn::after {
  content: '↑';
  opacity: 1;
  color: var(--ld-accent);
}

.ld-table th[data-ld-sort][data-ld-sort-dir='desc'] .ld-sort-btn::after {
  content: '↓';
  opacity: 1;
  color: var(--ld-accent);
}

/* the framework's own th::after arrow is replaced by the one in the button */
.ld-table th[data-ld-sort]:has(.ld-sort-btn)::after {
  content: none;
}

.ld-table th.ld-table-select,
.ld-table td.ld-table-select {
  width: 1%;
  padding-inline-end: 0;
}

.ld-table tbody tr[data-ld-selected] {
  background: color-mix(in srgb, var(--ld-accent) 12%, transparent);
}

.ld-table tbody tr[data-ld-table-empty] td {
  padding: var(--ld-space-6) var(--ld-space-4);
  text-align: center;
  color: var(--ld-text-muted);
}

/* pager: same look as .ld-pagination, separate class so the two never fight */
.ld-pager {
  display: flex;
  gap: var(--ld-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ld-pager button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--ld-space-2);
  border: var(--ld-border-width) solid var(--ld-border-soft);
  border-radius: var(--ld-border-radius-sm);
  background: var(--ld-surface);
  color: var(--ld-text);
  font-family: var(--ld-font-family);
  font-size: var(--ld-text-sm);
  cursor: pointer;
}

.ld-pager button:hover:not(:disabled) {
  background: var(--ld-surface-raised);
}

.ld-pager li[data-ld-active='true'] button {
  background: var(--ld-accent);
  border-color: var(--ld-accent);
  color: var(--ld-accent-text);
}

.ld-pager button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ld-pager-gap {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--ld-space-1);
}


/* ==========================================================================
   37zc. Search bar — ld-search / [data-ld-search] (paired with ldcss.js)

   <div class="ld-search">
     <div class="ld-search-field"> <input class="ld-input"> × kbd </div>
     <button class="ld-btn ld-search-btn"> magnifier </button>
   </div>

   ldcss.js builds the field and the button from a bare
   <div data-ld-search><input></div>. Field and button are one joined
   control: shared height, shared border, one focus ring.
   ========================================================================== */

.ld-search {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}

.ld-search-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.ld-search-field .ld-input {
  height: 100%;
  padding-inline-end: calc(var(--ld-space-3) + 1.75rem);
}

/* with a button next to it, field and button meet in the middle */
.ld-search:not([data-ld-search-compact]) .ld-search-field .ld-input {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.ld-search-btn {
  flex: none;
  position: relative;
  min-width: 2.75rem;
  padding: 0 var(--ld-space-3);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  margin-inline-start: calc(var(--ld-border-width) * -1);
  border-color: var(--ld-border-control);
}

.ld-search-btn:hover,
.ld-search-btn:focus-visible {
  z-index: 1;
}

/* keep the field's focus ring above the button's edge */
.ld-search-field:focus-within {
  z-index: 2;
}

/* magnifier drawn with borders, so it follows currentColor and needs no icon font */
.ld-search-icon {
  position: relative;
  display: block;
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.ld-search-icon::after {
  content: '';
  position: absolute;
  inset-inline-end: -0.4rem;
  bottom: -0.32rem;
  width: 2px;
  height: 0.4rem;
  background: currentColor;
  transform: rotate(-45deg);
}

.ld-search-btn .ld-search-icon {
  /* the handle sticks out, so nudge the whole glyph to look centred */
  margin: -0.15rem 0.15rem 0 -0.1rem;
}

/* no button: the magnifier sits inside the field, before the text */
.ld-search[data-ld-search-compact] .ld-search-field > .ld-search-icon {
  position: absolute;
  inset-inline-start: var(--ld-space-3);
  top: 50%;
  margin-top: -0.45rem;
  color: var(--ld-text-muted);
  pointer-events: none;
}

.ld-search[data-ld-search-compact] .ld-input {
  padding-inline-start: calc(var(--ld-space-3) + 1.25rem);
}

.ld-search-clear {
  position: absolute;
  inset-inline-end: var(--ld-space-2);
  top: 50%;
  min-width: 28px;
  min-height: 28px;
  transform: translateY(-50%);
  background: none;
  border: none;
  border-radius: var(--ld-border-radius-sm);
  color: var(--ld-text-muted);
  font-size: var(--ld-text-lg);
  line-height: 1;
  cursor: pointer;
}

.ld-search-clear:hover {
  color: var(--ld-text);
  background: var(--ld-surface-raised);
}

.ld-search-clear[hidden] {
  display: none;
}

/* the shortcut hint sits where the clear button goes; focus or typing swaps them */
.ld-search-kbd {
  position: absolute;
  inset-inline-end: var(--ld-space-3);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.ld-search:focus-within .ld-search-kbd,
.ld-search-clear:not([hidden]) ~ .ld-search-kbd {
  display: none;
}

.ld-search input[type='search']::-webkit-search-decoration,
.ld-search input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

[data-ld-search-empty][hidden] {
  display: none;
}

@media (forced-colors: active) {

  .ld-search-icon,
  .ld-search-icon::after {
    border-color: ButtonText;
  }

  .ld-search-icon::after {
    background: ButtonText;
  }
}


/* ==========================================================================
   37zd. Layout primitives — ld-cluster, ld-sidebar-layout, ld-switcher, ld-cover
   Small boxes that arrange their children without media queries: they react to
   the space they are given, not to the width of the window, so the same
   markup works in a wide page, a narrow column or a card.

   Gap: set data-ld-gap="0-6|8" (a spacing step) on any of them, or the
   custom property --ld-layout-gap for any length.
   ========================================================================== */

[data-ld-gap='0'] { --ld-layout-gap: 0; }
[data-ld-gap='1'] { --ld-layout-gap: var(--ld-space-1); }
[data-ld-gap='2'] { --ld-layout-gap: var(--ld-space-2); }
[data-ld-gap='3'] { --ld-layout-gap: var(--ld-space-3); }
[data-ld-gap='4'] { --ld-layout-gap: var(--ld-space-4); }
[data-ld-gap='5'] { --ld-layout-gap: var(--ld-space-5); }
[data-ld-gap='6'] { --ld-layout-gap: var(--ld-space-6); }
[data-ld-gap='8'] { --ld-layout-gap: var(--ld-space-8); }

/* -- ld-cluster: inline things that wrap, with one consistent gap ------------
   tags, buttons, badges, a row of links. data-ld-justify: start (default) |
   center | end | between.  data-ld-align: center (default) | start | end |
   baseline | stretch. */
.ld-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--ld-layout-gap, var(--ld-space-3));
}

.ld-cluster[data-ld-justify='center'] { justify-content: center; }
.ld-cluster[data-ld-justify='end'] { justify-content: flex-end; }
.ld-cluster[data-ld-justify='between'] { justify-content: space-between; }
.ld-cluster[data-ld-align='start'] { align-items: flex-start; }
.ld-cluster[data-ld-align='end'] { align-items: flex-end; }
.ld-cluster[data-ld-align='baseline'] { align-items: baseline; }
.ld-cluster[data-ld-align='stretch'] { align-items: stretch; }

/* -- ld-sidebar-layout: content next to a naturally sized sidebar ------------
   The sidebar is the first child (data-ld-side="end": the last one, so the
   markup order stays content first). It takes the width its own content needs,
   or --ld-side-width; the content takes the rest. When the content would drop
   below --ld-content-min (50% by default) the two stack, sidebar first. */
.ld-sidebar-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--ld-layout-gap, var(--ld-space-5));
}

.ld-sidebar-layout > * {
  flex: 999 1 0;
  min-inline-size: var(--ld-content-min, 50%);
}

.ld-sidebar-layout:not([data-ld-side='end']) > :first-child,
.ld-sidebar-layout[data-ld-side='end'] > :last-child {
  flex: 1 1 var(--ld-side-width, auto);
  min-inline-size: 0;
}

.ld-sidebar-layout[data-ld-align='stretch'] { align-items: stretch; }

/* -- ld-switcher: side by side while they fit, stacked when they do not ------
   Every child gets an equal share. They sit in a row while the box is wider
   than --ld-threshold (30rem by default), and become a column below that.
   data-ld-threshold="xs|sm|md|lg|xl" picks 20, 30, 40, 50 or 60rem.
   data-ld-limit="2-6": with more children than that, always stack.
   data-ld-align="start|center|end": children are as tall as the tallest by
   default; use this when they have shapes of their own (images with ratios). */
.ld-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ld-layout-gap, var(--ld-space-4));
}

.ld-switcher > * {
  flex: 1 1 calc((var(--ld-threshold, 30rem) - 100%) * 999);
}

.ld-switcher[data-ld-align='start'] { align-items: flex-start; }
.ld-switcher[data-ld-align='center'] { align-items: center; }
.ld-switcher[data-ld-align='end'] { align-items: flex-end; }

.ld-switcher[data-ld-threshold='xs'] { --ld-threshold: 20rem; }
.ld-switcher[data-ld-threshold='sm'] { --ld-threshold: 30rem; }
.ld-switcher[data-ld-threshold='md'] { --ld-threshold: 40rem; }
.ld-switcher[data-ld-threshold='lg'] { --ld-threshold: 50rem; }
.ld-switcher[data-ld-threshold='xl'] { --ld-threshold: 60rem; }

.ld-switcher[data-ld-limit='2'] > :nth-last-child(n + 3),
.ld-switcher[data-ld-limit='2'] > :nth-last-child(n + 3) ~ *,
.ld-switcher[data-ld-limit='3'] > :nth-last-child(n + 4),
.ld-switcher[data-ld-limit='3'] > :nth-last-child(n + 4) ~ *,
.ld-switcher[data-ld-limit='4'] > :nth-last-child(n + 5),
.ld-switcher[data-ld-limit='4'] > :nth-last-child(n + 5) ~ *,
.ld-switcher[data-ld-limit='5'] > :nth-last-child(n + 6),
.ld-switcher[data-ld-limit='5'] > :nth-last-child(n + 6) ~ *,
.ld-switcher[data-ld-limit='6'] > :nth-last-child(n + 7),
.ld-switcher[data-ld-limit='6'] > :nth-last-child(n + 7) ~ * {
  flex-basis: 100%;
}

/* -- ld-cover: content centred in a defined area -----------------------------
   A column at least --ld-cover-height tall (the viewport by default). Mark the
   child that should sit in the middle with data-ld-centered (or class
   ld-cover-centered); anything before it stays at the top (a header) and
   anything after it at the bottom (a footer). */
.ld-cover {
  display: flex;
  flex-direction: column;
  min-block-size: var(--ld-cover-height, 100vh);
  min-block-size: var(--ld-cover-height, 100dvh);
  padding: var(--ld-layout-gap, var(--ld-space-5));
  gap: var(--ld-layout-gap, var(--ld-space-5));
}

.ld-cover > [data-ld-centered],
.ld-cover > .ld-cover-centered {
  margin-block: auto;
}


/* ==========================================================================
   37ze. Media — ld-img, ld-media, ld-video, ld-figure, ld-masonry, ld-gallery
   Pure CSS. No JavaScript, no images shipped.

   <img class="ld-img" src alt>                        fluid image
   <figure class="ld-media" data-ld-ratio="16-9"> <img …> </figure>   fixed-shape wrapper
   <div class="ld-video"> <iframe …></iframe> </div>   embed that keeps its shape
   <figure class="ld-figure"> <div class="ld-media">…</div> <figcaption>…</figcaption> </figure>
   <div class="ld-masonry"> … </div>                    columns of uneven items
   <div class="ld-gallery"> <figure class="ld-media">…</figure> … </div>   tidy tile grid
   ========================================================================== */

/* -- Fluid image: never wider than its box, keeps its own proportions ------- */
.ld-img {
  display: block;
  max-width: 100%;
  height: auto;
}

.ld-img[data-ld-rounded] { border-radius: var(--ld-border-radius-lg); }
.ld-img[data-ld-rounded='sm'] { border-radius: var(--ld-border-radius-sm); }
.ld-img[data-ld-rounded='full'] { border-radius: 50%; }

/* -- Media wrapper ------------------------------------------------------------
   A box with a fixed shape (data-ld-ratio) whose image, picture, video or
   iframe fills it and is cropped, not stretched (data-ld-fit="contain" shows
   all of it instead). Without a ratio the box takes the media's own shape.
   data-ld-ratio: 1-1 · 4-3 · 3-2 · 16-9 · 21-9 · 3-4 · 2-3 · 9-16 */
.ld-media {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  background: var(--ld-surface-raised);
  border-radius: var(--ld-border-radius-lg);
}

.ld-media > img,
.ld-media > picture,
.ld-media > picture > img,
.ld-media > video,
.ld-media > canvas,
.ld-media > svg {
  display: block;
  width: 100%;
  height: auto;
}

.ld-media[data-ld-ratio] > img,
.ld-media[data-ld-ratio] > picture,
.ld-media[data-ld-ratio] > picture > img,
.ld-media[data-ld-ratio] > video,
.ld-media[data-ld-ratio] > canvas,
.ld-media[data-ld-ratio] > svg,
.ld-media[data-ld-ratio] > iframe,
.ld-media[data-ld-ratio] > embed,
.ld-media[data-ld-ratio] > object {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.ld-media[data-ld-fit='contain'] > img,
.ld-media[data-ld-fit='contain'] > picture > img,
.ld-media[data-ld-fit='contain'] > video {
  object-fit: contain;
}

.ld-media[data-ld-ratio='1-1'] { aspect-ratio: 1 / 1; }
.ld-media[data-ld-ratio='4-3'] { aspect-ratio: 4 / 3; }
.ld-media[data-ld-ratio='3-2'] { aspect-ratio: 3 / 2; }
.ld-media[data-ld-ratio='16-9'] { aspect-ratio: 16 / 9; }
.ld-media[data-ld-ratio='21-9'] { aspect-ratio: 21 / 9; }
.ld-media[data-ld-ratio='3-4'] { aspect-ratio: 3 / 4; }
.ld-media[data-ld-ratio='2-3'] { aspect-ratio: 2 / 3; }
.ld-media[data-ld-ratio='9-16'] { aspect-ratio: 9 / 16; }

.ld-media[data-ld-rounded='none'] { border-radius: 0; }
.ld-media[data-ld-rounded='sm'] { border-radius: var(--ld-border-radius-sm); }

/* -- Video wrapper: an embed or <video> that keeps a consistent shape ---------
   16:9 unless data-ld-ratio says otherwise. Same fill rules as ld-media, and the
   frame is black behind the video while it loads. */
.ld-video {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--ld-border-radius-lg);
}

.ld-video > iframe,
.ld-video > video,
.ld-video > embed,
.ld-video > object {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ld-video[data-ld-ratio='1-1'] { aspect-ratio: 1 / 1; }
.ld-video[data-ld-ratio='4-3'] { aspect-ratio: 4 / 3; }
.ld-video[data-ld-ratio='3-2'] { aspect-ratio: 3 / 2; }
.ld-video[data-ld-ratio='21-9'] { aspect-ratio: 21 / 9; }
.ld-video[data-ld-ratio='9-16'] { aspect-ratio: 9 / 16; }
.ld-video[data-ld-rounded='none'] { border-radius: 0; }

/* -- Caption below the media -------------------------------------------------- */
.ld-figure {
  display: grid;
  gap: var(--ld-space-2);
  margin: 0;
}

.ld-figure > figcaption,
.ld-caption {
  font-size: var(--ld-text-sm);
  color: var(--ld-text-muted);
  line-height: var(--ld-line-height-tight);
}

/* -- Overlay and caption on top of the media -----------------------------------
   Text on an image needs a scrim behind it to stay readable, so the overlay
   draws a gradient (strength: --ld-opacity-overlay) and uses white text,
   whatever the theme. data-ld-align: bottom (default) | center | top.
   data-ld-show="hover": appears on hover or keyboard focus; on touch screens,
   which cannot hover, it is always shown. */
.ld-media-overlay,
.ld-media-caption {
  position: absolute;
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ld-space-1);
  padding: var(--ld-space-4);
  color: #fff;
  background: linear-gradient(to top, rgb(0 0 0 / var(--ld-opacity-overlay)), rgb(0 0 0 / 0));
  pointer-events: none;
}

.ld-media-overlay :where(h1, h2, h3, h4, h5, h6, p) {
  margin: 0;
  color: inherit;
}

.ld-media-overlay a,
.ld-media-overlay button {
  pointer-events: auto;
}

.ld-media-caption {
  bottom: 0;
  padding-block: var(--ld-space-3);
  font-size: var(--ld-text-sm);
}

.ld-media-overlay {
  inset-block: 0;
  justify-content: flex-end;
}

.ld-media-overlay[data-ld-align='center'] {
  justify-content: center;
  align-items: center;
  text-align: center;
  background: rgb(0 0 0 / var(--ld-opacity-overlay));
}

.ld-media-overlay[data-ld-align='top'] {
  justify-content: flex-start;
  background: linear-gradient(to bottom, rgb(0 0 0 / var(--ld-opacity-overlay)), rgb(0 0 0 / 0));
}

.ld-media-overlay[data-ld-show='hover'] {
  opacity: 0;
  transition: opacity var(--ld-transition);
}

.ld-media:hover > .ld-media-overlay[data-ld-show='hover'],
.ld-media:focus-within > .ld-media-overlay[data-ld-show='hover'] {
  opacity: 1;
}

@media (hover: none) {
  .ld-media-overlay[data-ld-show='hover'] {
    opacity: 1;
  }
}

/* -- Masonry-like layout: items of different heights packed into columns --------
   Works everywhere: the browser's multi-column layout. Column width is
   --ld-masonry-min (14rem); the number of columns follows the space. Items
   run down each column in order, not across (that is how columns work).
   data-ld-cols="2-6" fixes the number of columns instead. Items should be
   block elements (figure, article, a card) and are never split across columns.
   Where the browser has true masonry (display: grid-lanes, or the older
   grid-template-rows: masonry) that is used instead, and items then run
   left to right. */
.ld-masonry {
  column-width: var(--ld-masonry-min, 14rem);
  column-gap: var(--ld-layout-gap, var(--ld-space-4));
}

.ld-masonry[data-ld-cols='2'] { column-count: 2; column-width: auto; }
.ld-masonry[data-ld-cols='3'] { column-count: 3; column-width: auto; }
.ld-masonry[data-ld-cols='4'] { column-count: 4; column-width: auto; }
.ld-masonry[data-ld-cols='5'] { column-count: 5; column-width: auto; }
.ld-masonry[data-ld-cols='6'] { column-count: 6; column-width: auto; }

.ld-masonry > * {
  break-inside: avoid;
  margin-block-end: var(--ld-layout-gap, var(--ld-space-4));
}

@supports (display: grid-lanes) {
  .ld-masonry {
    display: grid-lanes;
    grid-template-columns: repeat(auto-fill, minmax(var(--ld-masonry-min, 14rem), 1fr));
    column-width: auto;
    column-count: auto;
    gap: var(--ld-layout-gap, var(--ld-space-4));
  }

  .ld-masonry[data-ld-cols='2'] { grid-template-columns: repeat(2, 1fr); }
  .ld-masonry[data-ld-cols='3'] { grid-template-columns: repeat(3, 1fr); }
  .ld-masonry[data-ld-cols='4'] { grid-template-columns: repeat(4, 1fr); }
  .ld-masonry[data-ld-cols='5'] { grid-template-columns: repeat(5, 1fr); }
  .ld-masonry[data-ld-cols='6'] { grid-template-columns: repeat(6, 1fr); }

  .ld-masonry > * {
    margin-block-end: 0;
  }
}

@supports (grid-template-rows: masonry) and (not (display: grid-lanes)) {
  .ld-masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--ld-masonry-min, 14rem), 1fr));
    grid-template-rows: masonry;
    column-width: auto;
    column-count: auto;
    gap: var(--ld-layout-gap, var(--ld-space-4));
  }

  .ld-masonry[data-ld-cols='2'] { grid-template-columns: repeat(2, 1fr); }
  .ld-masonry[data-ld-cols='3'] { grid-template-columns: repeat(3, 1fr); }
  .ld-masonry[data-ld-cols='4'] { grid-template-columns: repeat(4, 1fr); }
  .ld-masonry[data-ld-cols='5'] { grid-template-columns: repeat(5, 1fr); }
  .ld-masonry[data-ld-cols='6'] { grid-template-columns: repeat(6, 1fr); }

  .ld-masonry > * {
    margin-block-end: 0;
  }
}

/* -- Gallery: a tidy grid of equal tiles -----------------------------------------
   Tiles are --ld-gallery-min wide at least (12rem), as many per row as fit,
   all the same shape (data-ld-ratio on the gallery: 1-1 default, 4-3, 3-2,
   16-9, 3-4). Put .ld-media tiles in it, or plain <img>/<a><img></a>.
   data-ld-feature="first" makes the first tile twice as big. Tiles zoom a little
   on hover (not with reduced motion); linked tiles show a focus ring. */
.ld-gallery {
  --ld-gallery-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--ld-gallery-min, 12rem), 100%), 1fr));
  gap: var(--ld-layout-gap, var(--ld-space-3));
}

.ld-gallery[data-ld-ratio='4-3'] { --ld-gallery-ratio: 4 / 3; }
.ld-gallery[data-ld-ratio='3-2'] { --ld-gallery-ratio: 3 / 2; }
.ld-gallery[data-ld-ratio='16-9'] { --ld-gallery-ratio: 16 / 9; }
.ld-gallery[data-ld-ratio='3-4'] { --ld-gallery-ratio: 3 / 4; }

.ld-gallery > * {
  aspect-ratio: var(--ld-gallery-ratio);
  min-width: 0;
}

.ld-gallery > .ld-media {
  aspect-ratio: var(--ld-gallery-ratio);
}

.ld-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ld-transition-slow);
}

.ld-gallery > a {
  display: block;
  overflow: hidden;
  border-radius: var(--ld-border-radius-lg);
}

.ld-gallery > a:focus-visible {
  outline-offset: 2px;
}

.ld-gallery > :hover img,
.ld-gallery > :focus-within img {
  transform: scale(1.04);
}

.ld-gallery[data-ld-feature='first'] > :first-child {
  grid-column: span 2;
  grid-row: span 2;
}

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

  .ld-gallery > :hover img,
  .ld-gallery > :focus-within img {
    transform: none;
  }
}


}

@layer ld.utilities {

/* ==========================================================================
   38–39. Utility classes & Escape hatches — moved to the end of the file
   on purpose. Every rule below uses a single class selector (specificity
   0,1,0), same as almost every component rule above it. CSS breaks same-
   specificity ties by *source order*, not by "utility vs component" intent
   — so these have to physically come after every component they're meant
   to be able to override, or they lose silently. (Previously §3b–3i sat
   right after Layout, before ~30 component sections that could out-order
   them; Escape Hatches sat at old §29, before 8 more component sections
   with the same problem. Both are fixed by living here instead.)
   ========================================================================== */


/* ==========================================================================
   38a. Spacing utilities: ld-pad-*, ld-mar-*, ld-gap-*
   Pattern:  ld-{pad|mar}-{side}-{size}
   side: a (all) · t (top) · r (right) · b (bottom) · l (left)
         · v (vertical: top+bottom) · h (horizontal: left+right)
   size: 0,1,2,3,4,5,6,8 — maps to --ld-space-{size} (0 = 0)
   Negative margins: ld-mar-{side}-n{size}, e.g. ld-mar-t-n3
   ========================================================================== */

/* -- Padding --------------------------------------------------------------- */
.ld-pad-a-0 {
  padding: 0;
}

.ld-pad-a-1 {
  padding: var(--ld-space-1);
}

.ld-pad-a-2 {
  padding: var(--ld-space-2);
}

.ld-pad-a-3 {
  padding: var(--ld-space-3);
}

.ld-pad-a-4 {
  padding: var(--ld-space-4);
}

.ld-pad-a-5 {
  padding: var(--ld-space-5);
}

.ld-pad-a-6 {
  padding: var(--ld-space-6);
}

.ld-pad-a-8 {
  padding: var(--ld-space-8);
}

.ld-pad-t-0 {
  padding-top: 0;
}

.ld-pad-t-1 {
  padding-top: var(--ld-space-1);
}

.ld-pad-t-2 {
  padding-top: var(--ld-space-2);
}

.ld-pad-t-3 {
  padding-top: var(--ld-space-3);
}

.ld-pad-t-4 {
  padding-top: var(--ld-space-4);
}

.ld-pad-t-5 {
  padding-top: var(--ld-space-5);
}

.ld-pad-t-6 {
  padding-top: var(--ld-space-6);
}

.ld-pad-t-8 {
  padding-top: var(--ld-space-8);
}

.ld-pad-r-0 {
  padding-right: 0;
}

.ld-pad-r-1 {
  padding-right: var(--ld-space-1);
}

.ld-pad-r-2 {
  padding-right: var(--ld-space-2);
}

.ld-pad-r-3 {
  padding-right: var(--ld-space-3);
}

.ld-pad-r-4 {
  padding-right: var(--ld-space-4);
}

.ld-pad-r-5 {
  padding-right: var(--ld-space-5);
}

.ld-pad-r-6 {
  padding-right: var(--ld-space-6);
}

.ld-pad-r-8 {
  padding-right: var(--ld-space-8);
}

.ld-pad-b-0 {
  padding-bottom: 0;
}

.ld-pad-b-1 {
  padding-bottom: var(--ld-space-1);
}

.ld-pad-b-2 {
  padding-bottom: var(--ld-space-2);
}

.ld-pad-b-3 {
  padding-bottom: var(--ld-space-3);
}

.ld-pad-b-4 {
  padding-bottom: var(--ld-space-4);
}

.ld-pad-b-5 {
  padding-bottom: var(--ld-space-5);
}

.ld-pad-b-6 {
  padding-bottom: var(--ld-space-6);
}

.ld-pad-b-8 {
  padding-bottom: var(--ld-space-8);
}

.ld-pad-l-0 {
  padding-left: 0;
}

.ld-pad-l-1 {
  padding-left: var(--ld-space-1);
}

.ld-pad-l-2 {
  padding-left: var(--ld-space-2);
}

.ld-pad-l-3 {
  padding-left: var(--ld-space-3);
}

.ld-pad-l-4 {
  padding-left: var(--ld-space-4);
}

.ld-pad-l-5 {
  padding-left: var(--ld-space-5);
}

.ld-pad-l-6 {
  padding-left: var(--ld-space-6);
}

.ld-pad-l-8 {
  padding-left: var(--ld-space-8);
}

.ld-pad-v-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.ld-pad-v-1 {
  padding-top: var(--ld-space-1);
  padding-bottom: var(--ld-space-1);
}

.ld-pad-v-2 {
  padding-top: var(--ld-space-2);
  padding-bottom: var(--ld-space-2);
}

.ld-pad-v-3 {
  padding-top: var(--ld-space-3);
  padding-bottom: var(--ld-space-3);
}

.ld-pad-v-4 {
  padding-top: var(--ld-space-4);
  padding-bottom: var(--ld-space-4);
}

.ld-pad-v-5 {
  padding-top: var(--ld-space-5);
  padding-bottom: var(--ld-space-5);
}

.ld-pad-v-6 {
  padding-top: var(--ld-space-6);
  padding-bottom: var(--ld-space-6);
}

.ld-pad-v-8 {
  padding-top: var(--ld-space-8);
  padding-bottom: var(--ld-space-8);
}

.ld-pad-h-0 {
  padding-left: 0;
  padding-right: 0;
}

.ld-pad-h-1 {
  padding-left: var(--ld-space-1);
  padding-right: var(--ld-space-1);
}

.ld-pad-h-2 {
  padding-left: var(--ld-space-2);
  padding-right: var(--ld-space-2);
}

.ld-pad-h-3 {
  padding-left: var(--ld-space-3);
  padding-right: var(--ld-space-3);
}

.ld-pad-h-4 {
  padding-left: var(--ld-space-4);
  padding-right: var(--ld-space-4);
}

.ld-pad-h-5 {
  padding-left: var(--ld-space-5);
  padding-right: var(--ld-space-5);
}

.ld-pad-h-6 {
  padding-left: var(--ld-space-6);
  padding-right: var(--ld-space-6);
}

.ld-pad-h-8 {
  padding-left: var(--ld-space-8);
  padding-right: var(--ld-space-8);
}

/* -- Margin ------------------------------------------------------------------ */
.ld-mar-a-0 {
  margin: 0;
}

.ld-mar-a-1 {
  margin: var(--ld-space-1);
}

.ld-mar-a-2 {
  margin: var(--ld-space-2);
}

.ld-mar-a-3 {
  margin: var(--ld-space-3);
}

.ld-mar-a-4 {
  margin: var(--ld-space-4);
}

.ld-mar-a-5 {
  margin: var(--ld-space-5);
}

.ld-mar-a-6 {
  margin: var(--ld-space-6);
}

.ld-mar-a-8 {
  margin: var(--ld-space-8);
}

.ld-mar-t-0 {
  margin-top: 0;
}

.ld-mar-t-1 {
  margin-top: var(--ld-space-1);
}

.ld-mar-t-2 {
  margin-top: var(--ld-space-2);
}

.ld-mar-t-3 {
  margin-top: var(--ld-space-3);
}

.ld-mar-t-4 {
  margin-top: var(--ld-space-4);
}

.ld-mar-t-5 {
  margin-top: var(--ld-space-5);
}

.ld-mar-t-6 {
  margin-top: var(--ld-space-6);
}

.ld-mar-t-8 {
  margin-top: var(--ld-space-8);
}

.ld-mar-r-0 {
  margin-right: 0;
}

.ld-mar-r-1 {
  margin-right: var(--ld-space-1);
}

.ld-mar-r-2 {
  margin-right: var(--ld-space-2);
}

.ld-mar-r-3 {
  margin-right: var(--ld-space-3);
}

.ld-mar-r-4 {
  margin-right: var(--ld-space-4);
}

.ld-mar-r-5 {
  margin-right: var(--ld-space-5);
}

.ld-mar-r-6 {
  margin-right: var(--ld-space-6);
}

.ld-mar-r-8 {
  margin-right: var(--ld-space-8);
}

.ld-mar-b-0 {
  margin-bottom: 0;
}

.ld-mar-b-1 {
  margin-bottom: var(--ld-space-1);
}

.ld-mar-b-2 {
  margin-bottom: var(--ld-space-2);
}

.ld-mar-b-3 {
  margin-bottom: var(--ld-space-3);
}

.ld-mar-b-4 {
  margin-bottom: var(--ld-space-4);
}

.ld-mar-b-5 {
  margin-bottom: var(--ld-space-5);
}

.ld-mar-b-6 {
  margin-bottom: var(--ld-space-6);
}

.ld-mar-b-8 {
  margin-bottom: var(--ld-space-8);
}

.ld-mar-l-0 {
  margin-left: 0;
}

.ld-mar-l-1 {
  margin-left: var(--ld-space-1);
}

.ld-mar-l-2 {
  margin-left: var(--ld-space-2);
}

.ld-mar-l-3 {
  margin-left: var(--ld-space-3);
}

.ld-mar-l-4 {
  margin-left: var(--ld-space-4);
}

.ld-mar-l-5 {
  margin-left: var(--ld-space-5);
}

.ld-mar-l-6 {
  margin-left: var(--ld-space-6);
}

.ld-mar-l-8 {
  margin-left: var(--ld-space-8);
}

.ld-mar-v-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.ld-mar-v-1 {
  margin-top: var(--ld-space-1);
  margin-bottom: var(--ld-space-1);
}

.ld-mar-v-2 {
  margin-top: var(--ld-space-2);
  margin-bottom: var(--ld-space-2);
}

.ld-mar-v-3 {
  margin-top: var(--ld-space-3);
  margin-bottom: var(--ld-space-3);
}

.ld-mar-v-4 {
  margin-top: var(--ld-space-4);
  margin-bottom: var(--ld-space-4);
}

.ld-mar-v-5 {
  margin-top: var(--ld-space-5);
  margin-bottom: var(--ld-space-5);
}

.ld-mar-v-6 {
  margin-top: var(--ld-space-6);
  margin-bottom: var(--ld-space-6);
}

.ld-mar-v-8 {
  margin-top: var(--ld-space-8);
  margin-bottom: var(--ld-space-8);
}

.ld-mar-h-0 {
  margin-left: 0;
  margin-right: 0;
}

.ld-mar-h-1 {
  margin-left: var(--ld-space-1);
  margin-right: var(--ld-space-1);
}

.ld-mar-h-2 {
  margin-left: var(--ld-space-2);
  margin-right: var(--ld-space-2);
}

.ld-mar-h-3 {
  margin-left: var(--ld-space-3);
  margin-right: var(--ld-space-3);
}

.ld-mar-h-4 {
  margin-left: var(--ld-space-4);
  margin-right: var(--ld-space-4);
}

.ld-mar-h-5 {
  margin-left: var(--ld-space-5);
  margin-right: var(--ld-space-5);
}

.ld-mar-h-6 {
  margin-left: var(--ld-space-6);
  margin-right: var(--ld-space-6);
}

.ld-mar-h-8 {
  margin-left: var(--ld-space-8);
  margin-right: var(--ld-space-8);
}

/* -- Negative margins (skip 0) ---------------------------------------------- */
.ld-mar-t-n1 {
  margin-top: calc(var(--ld-space-1) * -1);
}

.ld-mar-t-n2 {
  margin-top: calc(var(--ld-space-2) * -1);
}

.ld-mar-t-n3 {
  margin-top: calc(var(--ld-space-3) * -1);
}

.ld-mar-t-n4 {
  margin-top: calc(var(--ld-space-4) * -1);
}

.ld-mar-t-n5 {
  margin-top: calc(var(--ld-space-5) * -1);
}

.ld-mar-t-n6 {
  margin-top: calc(var(--ld-space-6) * -1);
}

.ld-mar-t-n8 {
  margin-top: calc(var(--ld-space-8) * -1);
}

.ld-mar-r-n1 {
  margin-right: calc(var(--ld-space-1) * -1);
}

.ld-mar-r-n2 {
  margin-right: calc(var(--ld-space-2) * -1);
}

.ld-mar-r-n3 {
  margin-right: calc(var(--ld-space-3) * -1);
}

.ld-mar-r-n4 {
  margin-right: calc(var(--ld-space-4) * -1);
}

.ld-mar-r-n5 {
  margin-right: calc(var(--ld-space-5) * -1);
}

.ld-mar-r-n6 {
  margin-right: calc(var(--ld-space-6) * -1);
}

.ld-mar-r-n8 {
  margin-right: calc(var(--ld-space-8) * -1);
}

.ld-mar-b-n1 {
  margin-bottom: calc(var(--ld-space-1) * -1);
}

.ld-mar-b-n2 {
  margin-bottom: calc(var(--ld-space-2) * -1);
}

.ld-mar-b-n3 {
  margin-bottom: calc(var(--ld-space-3) * -1);
}

.ld-mar-b-n4 {
  margin-bottom: calc(var(--ld-space-4) * -1);
}

.ld-mar-b-n5 {
  margin-bottom: calc(var(--ld-space-5) * -1);
}

.ld-mar-b-n6 {
  margin-bottom: calc(var(--ld-space-6) * -1);
}

.ld-mar-b-n8 {
  margin-bottom: calc(var(--ld-space-8) * -1);
}

.ld-mar-l-n1 {
  margin-left: calc(var(--ld-space-1) * -1);
}

.ld-mar-l-n2 {
  margin-left: calc(var(--ld-space-2) * -1);
}

.ld-mar-l-n3 {
  margin-left: calc(var(--ld-space-3) * -1);
}

.ld-mar-l-n4 {
  margin-left: calc(var(--ld-space-4) * -1);
}

.ld-mar-l-n5 {
  margin-left: calc(var(--ld-space-5) * -1);
}

.ld-mar-l-n6 {
  margin-left: calc(var(--ld-space-6) * -1);
}

.ld-mar-l-n8 {
  margin-left: calc(var(--ld-space-8) * -1);
}

.ld-mar-v-n1 {
  margin-top: calc(var(--ld-space-1) * -1);
  margin-bottom: calc(var(--ld-space-1) * -1);
}

.ld-mar-v-n2 {
  margin-top: calc(var(--ld-space-2) * -1);
  margin-bottom: calc(var(--ld-space-2) * -1);
}

.ld-mar-v-n3 {
  margin-top: calc(var(--ld-space-3) * -1);
  margin-bottom: calc(var(--ld-space-3) * -1);
}

.ld-mar-v-n4 {
  margin-top: calc(var(--ld-space-4) * -1);
  margin-bottom: calc(var(--ld-space-4) * -1);
}

.ld-mar-v-n5 {
  margin-top: calc(var(--ld-space-5) * -1);
  margin-bottom: calc(var(--ld-space-5) * -1);
}

.ld-mar-v-n6 {
  margin-top: calc(var(--ld-space-6) * -1);
  margin-bottom: calc(var(--ld-space-6) * -1);
}

.ld-mar-v-n8 {
  margin-top: calc(var(--ld-space-8) * -1);
  margin-bottom: calc(var(--ld-space-8) * -1);
}

.ld-mar-h-n1 {
  margin-left: calc(var(--ld-space-1) * -1);
  margin-right: calc(var(--ld-space-1) * -1);
}

.ld-mar-h-n2 {
  margin-left: calc(var(--ld-space-2) * -1);
  margin-right: calc(var(--ld-space-2) * -1);
}

.ld-mar-h-n3 {
  margin-left: calc(var(--ld-space-3) * -1);
  margin-right: calc(var(--ld-space-3) * -1);
}

.ld-mar-h-n4 {
  margin-left: calc(var(--ld-space-4) * -1);
  margin-right: calc(var(--ld-space-4) * -1);
}

.ld-mar-h-n5 {
  margin-left: calc(var(--ld-space-5) * -1);
  margin-right: calc(var(--ld-space-5) * -1);
}

.ld-mar-h-n6 {
  margin-left: calc(var(--ld-space-6) * -1);
  margin-right: calc(var(--ld-space-6) * -1);
}

.ld-mar-h-n8 {
  margin-left: calc(var(--ld-space-8) * -1);
  margin-right: calc(var(--ld-space-8) * -1);
}

.ld-mar-a-n1 {
  margin: calc(var(--ld-space-1) * -1);
}

.ld-mar-a-n2 {
  margin: calc(var(--ld-space-2) * -1);
}

.ld-mar-a-n3 {
  margin: calc(var(--ld-space-3) * -1);
}

.ld-mar-a-n4 {
  margin: calc(var(--ld-space-4) * -1);
}

.ld-mar-a-n5 {
  margin: calc(var(--ld-space-5) * -1);
}

.ld-mar-a-n6 {
  margin: calc(var(--ld-space-6) * -1);
}

.ld-mar-a-n8 {
  margin: calc(var(--ld-space-8) * -1);
}

/* -- Auto-margin centering --------------------------------------------------- */
.ld-mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.ld-my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

/* -- Gap (flex/grid containers) ---------------------------------------------- */
.ld-gap-0 {
  gap: 0;
}

.ld-gap-1 {
  gap: var(--ld-space-1);
}

.ld-gap-2 {
  gap: var(--ld-space-2);
}

.ld-gap-3 {
  gap: var(--ld-space-3);
}

.ld-gap-4 {
  gap: var(--ld-space-4);
}

.ld-gap-5 {
  gap: var(--ld-space-5);
}

.ld-gap-6 {
  gap: var(--ld-space-6);
}

.ld-gap-8 {
  gap: var(--ld-space-8);
}

.ld-gap-x-0 {
  column-gap: 0;
}

.ld-gap-x-1 {
  column-gap: var(--ld-space-1);
}

.ld-gap-x-2 {
  column-gap: var(--ld-space-2);
}

.ld-gap-x-3 {
  column-gap: var(--ld-space-3);
}

.ld-gap-x-4 {
  column-gap: var(--ld-space-4);
}

.ld-gap-x-5 {
  column-gap: var(--ld-space-5);
}

.ld-gap-x-6 {
  column-gap: var(--ld-space-6);
}

.ld-gap-x-8 {
  column-gap: var(--ld-space-8);
}

.ld-gap-y-0 {
  row-gap: 0;
}

.ld-gap-y-1 {
  row-gap: var(--ld-space-1);
}

.ld-gap-y-2 {
  row-gap: var(--ld-space-2);
}

.ld-gap-y-3 {
  row-gap: var(--ld-space-3);
}

.ld-gap-y-4 {
  row-gap: var(--ld-space-4);
}

.ld-gap-y-5 {
  row-gap: var(--ld-space-5);
}

.ld-gap-y-6 {
  row-gap: var(--ld-space-6);
}

.ld-gap-y-8 {
  row-gap: var(--ld-space-8);
}


/* ==========================================================================
   38b. Display & flex utilities: ld-d-*, ld-flex-*, ld-items-*, ld-justify-*
   ========================================================================== */

/* -- Display ------------------------------------------------------------------ */
.ld-d-block {
  display: block;
}

.ld-d-inline {
  display: inline;
}

.ld-d-inline-block {
  display: inline-block;
}

.ld-d-flex {
  display: flex;
}

.ld-d-inline-flex {
  display: inline-flex;
}

.ld-d-grid {
  display: grid;
}

.ld-d-none {
  display: none;
}

/* -- Flex direction / wrap ----------------------------------------------------- */
.ld-flex-row {
  flex-direction: row;
}

.ld-flex-row-rev {
  flex-direction: row-reverse;
}

.ld-flex-col {
  flex-direction: column;
}

.ld-flex-col-rev {
  flex-direction: column-reverse;
}

.ld-flex-wrap {
  flex-wrap: wrap;
}

.ld-flex-nowrap {
  flex-wrap: nowrap;
}

.ld-flex-1 {
  flex: 1 1 0%;
}

.ld-flex-auto {
  flex: 1 1 auto;
}

.ld-flex-none {
  flex: none;
}

/* -- Align / justify ------------------------------------------------------------ */
.ld-items-start {
  align-items: flex-start;
}

.ld-items-center {
  align-items: center;
}

.ld-items-end {
  align-items: flex-end;
}

.ld-items-stretch {
  align-items: stretch;
}

.ld-items-baseline {
  align-items: baseline;
}

.ld-justify-start {
  justify-content: flex-start;
}

.ld-justify-center {
  justify-content: center;
}

.ld-justify-end {
  justify-content: flex-end;
}

.ld-justify-between {
  justify-content: space-between;
}

.ld-justify-around {
  justify-content: space-around;
}

.ld-justify-evenly {
  justify-content: space-evenly;
}

/* -- Text align ------------------------------------------------------------------ */
.ld-text-left {
  text-align: left;
}

.ld-text-center {
  text-align: center;
}

.ld-text-right {
  text-align: right;
}

/* -- Width / max-width ------------------------------------------------------------ */
.ld-w-25 {
  width: 25%;
}

.ld-w-50 {
  width: 50%;
}

.ld-w-75 {
  width: 75%;
}

.ld-w-100 {
  width: 100%;
}

.ld-max-w-sm {
  max-width: 480px;
}

.ld-max-w-md {
  max-width: 640px;
}

.ld-max-w-lg {
  max-width: 800px;
}

.ld-max-w-xl {
  max-width: 1000px;
}

.ld-max-w-full {
  max-width: 100%;
}

/* Aspect-ratio utilities live in s38i (they used to be declared here too). */

/* -- Link reset -----------------------------------------------------------------------
   Strip default <a> underline/color for building a custom brand mark, card-as-link,
   or nav item without pulling in a whole component (e.g. .ld-nav-brand, which bundles
   this with its own "$" prefix mark). */
.ld-link-reset {
  text-decoration: none;
  color: inherit;
}


/* ==========================================================================
   38c. Typography utilities: ld-text-{size}, ld-font-*, ld-truncate, ld-line-clamp-*
   ========================================================================== */

/* -- Font size (maps to --ld-text-*) ------------------------------------------ */
.ld-text-xs {
  font-size: var(--ld-text-xs);
}

.ld-text-sm {
  font-size: var(--ld-text-sm);
}

.ld-text-base {
  font-size: var(--ld-text-base);
}

.ld-text-lg {
  font-size: var(--ld-text-lg);
}

.ld-text-xl {
  font-size: var(--ld-text-xl);
}

.ld-text-2xl {
  font-size: var(--ld-text-2xl);
}

.ld-text-3xl {
  font-size: var(--ld-text-3xl);
}

.ld-text-4xl {
  font-size: var(--ld-text-4xl);
}

/* -- Font weight --------------------------------------------------------------- */
.ld-font-normal {
  font-weight: 400;
}

.ld-font-medium {
  font-weight: 500;
}

.ld-font-bold {
  font-weight: 700;
}

/* -- Text transform -------------------------------------------------------------- */
.ld-uppercase {
  text-transform: uppercase;
}

.ld-lowercase {
  text-transform: lowercase;
}

.ld-capitalize {
  text-transform: capitalize;
}

/* -- Font style ------------------------------------------------------------------- */
.ld-italic {
  font-style: italic;
}

.ld-not-italic {
  font-style: normal;
}

/* -- Letter spacing -------------------------------------------------------------- */
.ld-tracking-wide {
  letter-spacing: 0.05em;
}

/* -- Truncation -------------------------------------------------------------------- */
.ld-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ld-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ld-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -- Text decoration (new in v3.0.0, mostly useful with ld-hover:underline) -- */
.ld-underline {
  text-decoration: underline;
}

.ld-no-underline {
  text-decoration: none;
}

/* ==========================================================================
   38d. Color utilities: ld-text-*, ld-bg-*
   ========================================================================== */

/* -- Text color (ld-text-muted and ld-text-accent already exist in §37 Misc) ------ */
.ld-text-danger {
  color: var(--ld-danger);
}

/* -- Background ------------------------------------------------------------------- */
.ld-bg-surface {
  background: var(--ld-surface);
}

.ld-bg-raised {
  background: var(--ld-surface-raised);
}

.ld-bg-transparent {
  background: transparent;
}

.ld-bg-accent {
  background: var(--ld-accent);
}

.ld-bg-danger {
  background: var(--ld-danger);
}

.ld-bg-success {
  background: var(--ld-success);
}

.ld-bg-warning {
  background: var(--ld-warning);
}

.ld-bg-info {
  background: var(--ld-info);
}


/* ==========================================================================
   38e. Position & z-index utilities: ld-{relative,absolute,fixed,sticky},
   ld-inset-0, ld-{top,right,bottom,left}-0, ld-z-*
   ========================================================================== */

/* -- Position ------------------------------------------------------------------------ */
.ld-static {
  position: static;
}

.ld-relative {
  position: relative;
}

.ld-absolute {
  position: absolute;
}

.ld-fixed {
  position: fixed;
}

.ld-sticky {
  position: sticky;
}

/* -- Inset / edges (use with an already-positioned element) -------------------------- */
.ld-inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.ld-top-0 {
  top: 0;
}

.ld-right-0 {
  right: 0;
}

.ld-bottom-0 {
  bottom: 0;
}

.ld-left-0 {
  left: 0;
}

/* -- Z-index: numeric scale + named aliases matching this file's own components ----- */
.ld-z-0 {
  z-index: 0;
}

.ld-z-10 {
  z-index: 10;
}

.ld-z-20 {
  z-index: 20;
}

.ld-z-30 {
  z-index: 30;
}

.ld-z-40 {
  z-index: 40;
}

.ld-z-50 {
  z-index: 50;
}

/* named aliases — match the exact stacking order already used by ldcss components */
.ld-z-dropdown {
  z-index: var(--ld-z-dropdown);
}

.ld-z-popover {
  z-index: var(--ld-z-popover);
}

.ld-z-tooltip {
  z-index: var(--ld-z-tooltip);
}

.ld-z-modal {
  z-index: var(--ld-z-modal);
}

.ld-z-offcanvas {
  z-index: var(--ld-z-offcanvas);
}

.ld-z-toast {
  z-index: var(--ld-z-toast);
}

.ld-z-command {
  z-index: var(--ld-z-command);
}


/* ==========================================================================
   38f. Flex extras & grid columns: ld-self-*, ld-order-*, ld-grid-cols-*
   ========================================================================== */

/* -- Align self (per-item override of ld-items-*) ------------------------------------- */
.ld-self-start {
  align-self: flex-start;
}

.ld-self-center {
  align-self: center;
}

.ld-self-end {
  align-self: flex-end;
}

.ld-self-stretch {
  align-self: stretch;
}

/* -- Order --------------------------------------------------------------------------- */
.ld-order-1 {
  order: 1;
}

.ld-order-2 {
  order: 2;
}

.ld-order-3 {
  order: 3;
}

.ld-order-4 {
  order: 4;
}

.ld-order-5 {
  order: 5;
}

.ld-order-first {
  order: -1;
}

.ld-order-last {
  order: 999;
}

/* -- Generic grid columns (independent of .ld-grid / data-ld-cols) -------------------- */
.ld-grid-cols-1 {
  grid-template-columns: repeat(1, 1fr);
}

.ld-grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.ld-grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.ld-grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.ld-grid-cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

.ld-grid-cols-6 {
  grid-template-columns: repeat(6, 1fr);
}


/* ==========================================================================
   38g. Visibility & interaction: ld-sr-only, ld-cursor-*, ld-select-none, ld-overflow-*
   ========================================================================== */

.ld-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Same as .ld-sr-only until the element (or a descendant) receives
   keyboard focus, then it un-hides and takes up normal flow again.
   .ld-skip-link (§37v) implements this pattern with its own visible
   styling; use this class directly for a plainer "reveal on focus"
   element that doesn't need the skip-link's card treatment. */
.ld-sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ld-cursor-pointer {
  cursor: pointer;
}

.ld-cursor-not-allowed {
  cursor: not-allowed;
}

.ld-cursor-default {
  cursor: default;
}

.ld-select-none {
  user-select: none;
}

.ld-overflow-hidden {
  overflow: hidden;
}

.ld-overflow-auto {
  overflow: auto;
}

.ld-overflow-scroll {
  overflow: scroll;
}

.ld-overflow-visible {
  overflow: visible;
}

/* -- Focus ring (new in v3.0.0) — the same ring :focus-visible draws by
   default, as a utility so ld-focus:ring / ld-hover:ring-style patterns work
   on elements whose own styles turned the default outline off. ------------- */
.ld-ring {
  outline: 2px dashed var(--ld-focus-ring);
  outline-offset: 2px;
}

/* ==========================================================================
   38h. Responsive variants: ld-sm\:*, ld-md\:*, ld-lg\:*, ld-xl\:*
   sm = min-width 640px, md = 960px, lg = 1200px, xl = 1440px
   (sm/md match the breakpoints .ld-grid already uses; lg/xl are new).
   Each breakpoint covers display, grid-cols, flex-direction, text-align,
   gap, padding/margin (all-sides only, a reduced size scale: 0/2/3/4/6/8),
   text-size, order, and width (25/50/75/100%) — the utilities layout most
   often needs to flip at a breakpoint (reordering a hero's text/art columns
   on mobile is common enough that order earned a spot alongside flex-direction).
   Deliberately NOT covered, to keep this section's size sane: per-side
   padding/margin (ld-pad-t/-r/-b/-l/-x/-y), the full 8-step spacing scale,
   and border-radius. Extend the same way if one of those comes up short —
   the pattern is always .ld-{bp}\:{utility}, one prefixed copy of the base
   utility's declaration.
   ========================================================================== */

@media (min-width: 640px) {
  .ld-sm\:d-block {
    display: block;
  }

  .ld-sm\:d-inline {
    display: inline;
  }

  .ld-sm\:d-inline-block {
    display: inline-block;
  }

  .ld-sm\:d-flex {
    display: flex;
  }

  .ld-sm\:d-inline-flex {
    display: inline-flex;
  }

  .ld-sm\:d-grid {
    display: grid;
  }

  .ld-sm\:d-none {
    display: none;
  }

  .ld-sm\:grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .ld-sm\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .ld-sm\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .ld-sm\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .ld-sm\:grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .ld-sm\:grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }

  .ld-sm\:flex-row {
    flex-direction: row;
  }

  .ld-sm\:flex-col {
    flex-direction: column;
  }

  .ld-sm\:order-1 {
    order: 1;
  }

  .ld-sm\:order-2 {
    order: 2;
  }

  .ld-sm\:order-3 {
    order: 3;
  }

  .ld-sm\:order-4 {
    order: 4;
  }

  .ld-sm\:order-5 {
    order: 5;
  }

  .ld-sm\:order-first {
    order: -1;
  }

  .ld-sm\:order-last {
    order: 999;
  }

  .ld-sm\:text-left {
    text-align: left;
  }

  .ld-sm\:text-center {
    text-align: center;
  }

  .ld-sm\:text-right {
    text-align: right;
  }

  .ld-sm\:gap-0 {
    gap: 0;
  }

  .ld-sm\:gap-2 {
    gap: var(--ld-space-2);
  }

  .ld-sm\:gap-4 {
    gap: var(--ld-space-4);
  }

  .ld-sm\:gap-6 {
    gap: var(--ld-space-6);
  }

  .ld-sm\:pad-a-0 {
    padding: 0;
  }

  .ld-sm\:pad-a-2 {
    padding: var(--ld-space-2);
  }

  .ld-sm\:pad-a-3 {
    padding: var(--ld-space-3);
  }

  .ld-sm\:pad-a-4 {
    padding: var(--ld-space-4);
  }

  .ld-sm\:pad-a-6 {
    padding: var(--ld-space-6);
  }

  .ld-sm\:pad-a-8 {
    padding: var(--ld-space-8);
  }

  .ld-sm\:mar-a-0 {
    margin: 0;
  }

  .ld-sm\:mar-a-2 {
    margin: var(--ld-space-2);
  }

  .ld-sm\:mar-a-3 {
    margin: var(--ld-space-3);
  }

  .ld-sm\:mar-a-4 {
    margin: var(--ld-space-4);
  }

  .ld-sm\:mar-a-6 {
    margin: var(--ld-space-6);
  }

  .ld-sm\:mar-a-8 {
    margin: var(--ld-space-8);
  }

  .ld-sm\:text-xs {
    font-size: var(--ld-text-xs);
  }

  .ld-sm\:text-sm {
    font-size: var(--ld-text-sm);
  }

  .ld-sm\:text-base {
    font-size: var(--ld-text-base);
  }

  .ld-sm\:text-lg {
    font-size: var(--ld-text-lg);
  }

  .ld-sm\:text-xl {
    font-size: var(--ld-text-xl);
  }

  .ld-sm\:text-2xl {
    font-size: var(--ld-text-2xl);
  }

  .ld-sm\:text-3xl {
    font-size: var(--ld-text-3xl);
  }

  .ld-sm\:w-25 {
    width: 25%;
  }

  .ld-sm\:w-50 {
    width: 50%;
  }

  .ld-sm\:w-75 {
    width: 75%;
  }

  .ld-sm\:w-100 {
    width: 100%;
  }
}

@media (min-width: 960px) {
  .ld-md\:d-block {
    display: block;
  }

  .ld-md\:d-inline {
    display: inline;
  }

  .ld-md\:d-inline-block {
    display: inline-block;
  }

  .ld-md\:d-flex {
    display: flex;
  }

  .ld-md\:d-inline-flex {
    display: inline-flex;
  }

  .ld-md\:d-grid {
    display: grid;
  }

  .ld-md\:d-none {
    display: none;
  }

  .ld-md\:grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .ld-md\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .ld-md\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .ld-md\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .ld-md\:grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .ld-md\:grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }

  .ld-md\:flex-row {
    flex-direction: row;
  }

  .ld-md\:flex-col {
    flex-direction: column;
  }

  .ld-md\:order-1 {
    order: 1;
  }

  .ld-md\:order-2 {
    order: 2;
  }

  .ld-md\:order-3 {
    order: 3;
  }

  .ld-md\:order-4 {
    order: 4;
  }

  .ld-md\:order-5 {
    order: 5;
  }

  .ld-md\:order-first {
    order: -1;
  }

  .ld-md\:order-last {
    order: 999;
  }

  .ld-md\:text-left {
    text-align: left;
  }

  .ld-md\:text-center {
    text-align: center;
  }

  .ld-md\:text-right {
    text-align: right;
  }

  .ld-md\:gap-0 {
    gap: 0;
  }

  .ld-md\:gap-2 {
    gap: var(--ld-space-2);
  }

  .ld-md\:gap-4 {
    gap: var(--ld-space-4);
  }

  .ld-md\:gap-6 {
    gap: var(--ld-space-6);
  }

  .ld-md\:pad-a-0 {
    padding: 0;
  }

  .ld-md\:pad-a-2 {
    padding: var(--ld-space-2);
  }

  .ld-md\:pad-a-3 {
    padding: var(--ld-space-3);
  }

  .ld-md\:pad-a-4 {
    padding: var(--ld-space-4);
  }

  .ld-md\:pad-a-6 {
    padding: var(--ld-space-6);
  }

  .ld-md\:pad-a-8 {
    padding: var(--ld-space-8);
  }

  .ld-md\:mar-a-0 {
    margin: 0;
  }

  .ld-md\:mar-a-2 {
    margin: var(--ld-space-2);
  }

  .ld-md\:mar-a-3 {
    margin: var(--ld-space-3);
  }

  .ld-md\:mar-a-4 {
    margin: var(--ld-space-4);
  }

  .ld-md\:mar-a-6 {
    margin: var(--ld-space-6);
  }

  .ld-md\:mar-a-8 {
    margin: var(--ld-space-8);
  }

  .ld-md\:text-xs {
    font-size: var(--ld-text-xs);
  }

  .ld-md\:text-sm {
    font-size: var(--ld-text-sm);
  }

  .ld-md\:text-base {
    font-size: var(--ld-text-base);
  }

  .ld-md\:text-lg {
    font-size: var(--ld-text-lg);
  }

  .ld-md\:text-xl {
    font-size: var(--ld-text-xl);
  }

  .ld-md\:text-2xl {
    font-size: var(--ld-text-2xl);
  }

  .ld-md\:text-3xl {
    font-size: var(--ld-text-3xl);
  }

  .ld-md\:w-25 {
    width: 25%;
  }

  .ld-md\:w-50 {
    width: 50%;
  }

  .ld-md\:w-75 {
    width: 75%;
  }

  .ld-md\:w-100 {
    width: 100%;
  }
}

@media (min-width: 1200px) {
  .ld-lg\:d-block {
    display: block;
  }

  .ld-lg\:d-inline {
    display: inline;
  }

  .ld-lg\:d-inline-block {
    display: inline-block;
  }

  .ld-lg\:d-flex {
    display: flex;
  }

  .ld-lg\:d-inline-flex {
    display: inline-flex;
  }

  .ld-lg\:d-grid {
    display: grid;
  }

  .ld-lg\:d-none {
    display: none;
  }

  .ld-lg\:grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .ld-lg\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .ld-lg\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .ld-lg\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .ld-lg\:grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .ld-lg\:grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }

  .ld-lg\:flex-row {
    flex-direction: row;
  }

  .ld-lg\:flex-col {
    flex-direction: column;
  }

  .ld-lg\:order-1 {
    order: 1;
  }

  .ld-lg\:order-2 {
    order: 2;
  }

  .ld-lg\:order-3 {
    order: 3;
  }

  .ld-lg\:order-4 {
    order: 4;
  }

  .ld-lg\:order-5 {
    order: 5;
  }

  .ld-lg\:order-first {
    order: -1;
  }

  .ld-lg\:order-last {
    order: 999;
  }

  .ld-lg\:text-left {
    text-align: left;
  }

  .ld-lg\:text-center {
    text-align: center;
  }

  .ld-lg\:text-right {
    text-align: right;
  }

  .ld-lg\:gap-0 {
    gap: 0;
  }

  .ld-lg\:gap-2 {
    gap: var(--ld-space-2);
  }

  .ld-lg\:gap-4 {
    gap: var(--ld-space-4);
  }

  .ld-lg\:gap-6 {
    gap: var(--ld-space-6);
  }

  .ld-lg\:pad-a-0 {
    padding: 0;
  }

  .ld-lg\:pad-a-2 {
    padding: var(--ld-space-2);
  }

  .ld-lg\:pad-a-3 {
    padding: var(--ld-space-3);
  }

  .ld-lg\:pad-a-4 {
    padding: var(--ld-space-4);
  }

  .ld-lg\:pad-a-6 {
    padding: var(--ld-space-6);
  }

  .ld-lg\:pad-a-8 {
    padding: var(--ld-space-8);
  }

  .ld-lg\:mar-a-0 {
    margin: 0;
  }

  .ld-lg\:mar-a-2 {
    margin: var(--ld-space-2);
  }

  .ld-lg\:mar-a-3 {
    margin: var(--ld-space-3);
  }

  .ld-lg\:mar-a-4 {
    margin: var(--ld-space-4);
  }

  .ld-lg\:mar-a-6 {
    margin: var(--ld-space-6);
  }

  .ld-lg\:mar-a-8 {
    margin: var(--ld-space-8);
  }

  .ld-lg\:text-xs {
    font-size: var(--ld-text-xs);
  }

  .ld-lg\:text-sm {
    font-size: var(--ld-text-sm);
  }

  .ld-lg\:text-base {
    font-size: var(--ld-text-base);
  }

  .ld-lg\:text-lg {
    font-size: var(--ld-text-lg);
  }

  .ld-lg\:text-xl {
    font-size: var(--ld-text-xl);
  }

  .ld-lg\:text-2xl {
    font-size: var(--ld-text-2xl);
  }

  .ld-lg\:text-3xl {
    font-size: var(--ld-text-3xl);
  }

  .ld-lg\:w-25 {
    width: 25%;
  }

  .ld-lg\:w-50 {
    width: 50%;
  }

  .ld-lg\:w-75 {
    width: 75%;
  }

  .ld-lg\:w-100 {
    width: 100%;
  }
}

@media (min-width: 1440px) {
  .ld-xl\:d-block {
    display: block;
  }

  .ld-xl\:d-inline {
    display: inline;
  }

  .ld-xl\:d-inline-block {
    display: inline-block;
  }

  .ld-xl\:d-flex {
    display: flex;
  }

  .ld-xl\:d-inline-flex {
    display: inline-flex;
  }

  .ld-xl\:d-grid {
    display: grid;
  }

  .ld-xl\:d-none {
    display: none;
  }

  .ld-xl\:grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .ld-xl\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .ld-xl\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .ld-xl\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .ld-xl\:grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .ld-xl\:grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }

  .ld-xl\:flex-row {
    flex-direction: row;
  }

  .ld-xl\:flex-col {
    flex-direction: column;
  }

  .ld-xl\:order-1 {
    order: 1;
  }

  .ld-xl\:order-2 {
    order: 2;
  }

  .ld-xl\:order-3 {
    order: 3;
  }

  .ld-xl\:order-4 {
    order: 4;
  }

  .ld-xl\:order-5 {
    order: 5;
  }

  .ld-xl\:order-first {
    order: -1;
  }

  .ld-xl\:order-last {
    order: 999;
  }

  .ld-xl\:text-left {
    text-align: left;
  }

  .ld-xl\:text-center {
    text-align: center;
  }

  .ld-xl\:text-right {
    text-align: right;
  }

  .ld-xl\:gap-0 {
    gap: 0;
  }

  .ld-xl\:gap-2 {
    gap: var(--ld-space-2);
  }

  .ld-xl\:gap-4 {
    gap: var(--ld-space-4);
  }

  .ld-xl\:gap-6 {
    gap: var(--ld-space-6);
  }

  .ld-xl\:pad-a-0 {
    padding: 0;
  }

  .ld-xl\:pad-a-2 {
    padding: var(--ld-space-2);
  }

  .ld-xl\:pad-a-3 {
    padding: var(--ld-space-3);
  }

  .ld-xl\:pad-a-4 {
    padding: var(--ld-space-4);
  }

  .ld-xl\:pad-a-6 {
    padding: var(--ld-space-6);
  }

  .ld-xl\:pad-a-8 {
    padding: var(--ld-space-8);
  }

  .ld-xl\:mar-a-0 {
    margin: 0;
  }

  .ld-xl\:mar-a-2 {
    margin: var(--ld-space-2);
  }

  .ld-xl\:mar-a-3 {
    margin: var(--ld-space-3);
  }

  .ld-xl\:mar-a-4 {
    margin: var(--ld-space-4);
  }

  .ld-xl\:mar-a-6 {
    margin: var(--ld-space-6);
  }

  .ld-xl\:mar-a-8 {
    margin: var(--ld-space-8);
  }

  .ld-xl\:text-xs {
    font-size: var(--ld-text-xs);
  }

  .ld-xl\:text-sm {
    font-size: var(--ld-text-sm);
  }

  .ld-xl\:text-base {
    font-size: var(--ld-text-base);
  }

  .ld-xl\:text-lg {
    font-size: var(--ld-text-lg);
  }

  .ld-xl\:text-xl {
    font-size: var(--ld-text-xl);
  }

  .ld-xl\:text-2xl {
    font-size: var(--ld-text-2xl);
  }

  .ld-xl\:text-3xl {
    font-size: var(--ld-text-3xl);
  }

  .ld-xl\:w-25 {
    width: 25%;
  }

  .ld-xl\:w-50 {
    width: 50%;
  }

  .ld-xl\:w-75 {
    width: 75%;
  }

  .ld-xl\:w-100 {
    width: 100%;
  }
}


/* ==========================================================================
   38i. Aspect ratio & object-fit
   ========================================================================== */

.ld-aspect-square {
  aspect-ratio: 1 / 1;
}

.ld-aspect-video {
  aspect-ratio: 16 / 9;
}

.ld-aspect-4-3 {
  aspect-ratio: 4 / 3;
}

.ld-aspect-3-2 {
  aspect-ratio: 3 / 2;
}

.ld-aspect-portrait {
  aspect-ratio: 3 / 4;
}

.ld-aspect-wide {
  aspect-ratio: 21 / 9;
}

.ld-object-cover {
  object-fit: cover;
}

.ld-object-contain {
  object-fit: contain;
}

.ld-object-fill {
  object-fit: fill;
}

.ld-object-center {
  object-position: center;
}

.ld-object-top {
  object-position: top;
}

.ld-object-bottom {
  object-position: bottom;
}


/* ==========================================================================
   38j. Opacity scale
   ========================================================================== */

.ld-opacity-0 {
  opacity: 0;
}

.ld-opacity-25 {
  opacity: 0.25;
}

.ld-opacity-50 {
  opacity: 0.5;
}

.ld-opacity-75 {
  opacity: 0.75;
}

.ld-opacity-100 {
  opacity: 1;
}


/* generated by utilities/s38j-opacity-scale.gen.mjs */
/* ==========================================================================
   38j. Opacity scale
   ========================================================================== */

.ld-opacity-0 {
  opacity: var(--ld-opacity-0);
}

.ld-opacity-5 {
  opacity: var(--ld-opacity-5);
}

.ld-opacity-10 {
  opacity: var(--ld-opacity-10);
}

.ld-opacity-20 {
  opacity: var(--ld-opacity-20);
}

.ld-opacity-25 {
  opacity: var(--ld-opacity-25);
}

.ld-opacity-30 {
  opacity: var(--ld-opacity-30);
}

.ld-opacity-40 {
  opacity: var(--ld-opacity-40);
}

.ld-opacity-50 {
  opacity: var(--ld-opacity-50);
}

.ld-opacity-60 {
  opacity: var(--ld-opacity-60);
}

.ld-opacity-70 {
  opacity: var(--ld-opacity-70);
}

.ld-opacity-75 {
  opacity: var(--ld-opacity-75);
}

.ld-opacity-80 {
  opacity: var(--ld-opacity-80);
}

.ld-opacity-90 {
  opacity: var(--ld-opacity-90);
}

.ld-opacity-95 {
  opacity: var(--ld-opacity-95);
}

.ld-opacity-100 {
  opacity: var(--ld-opacity-100);
}

.ld-opacity-disabled {
  opacity: var(--ld-opacity-disabled);
}

/* ==========================================================================
   38k. Line-height utilities
   ========================================================================== */

.ld-leading-tight {
  line-height: var(--ld-line-height-tight);
}

.ld-leading-normal {
  line-height: var(--ld-line-height-normal);
}

.ld-leading-relaxed {
  line-height: var(--ld-line-height-relaxed);
}

.ld-leading-none {
  line-height: var(--ld-line-height-none);
}

.ld-leading-loose {
  line-height: var(--ld-line-height-loose);
}

/* ==========================================================================
   38l. Motion utilities
   ------------------------------------------------------------------------
   Generic, reusable animations — as opposed to the one-off @keyframes
   already baked into specific components (ld-toast-in, ld-skeleton,
   ld-blink). Respects prefers-reduced-motion via the existing global
   rule in §2, which zeroes out all animation/transition durations.
   ========================================================================== */

.ld-animate-spin {
  animation: ld-spin 1s linear infinite;
}

.ld-animate-pulse {
  animation: ld-pulse 1.6s ease-in-out infinite;
}

.ld-animate-bounce {
  animation: ld-bounce 1s ease-in-out infinite;
}

@keyframes ld-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ld-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

@keyframes ld-bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-25%);
  }
}


/* ==========================================================================
   38m. Dark-mode-only variants: ld-dark\:*
   ------------------------------------------------------------------------
   The responsive variants in §38h scope a utility to a breakpoint; these
   scope a *small, high-value* subset of utilities to dark mode only, for
   the common case of "same layout, one property needs to flip." For
   anything bigger than a couple of one-off property swaps, retheme the
   subtree with tokens instead (§1) — this isn't meant to grow into a
   parallel utility set the way ld-sm\:/ld-md\:/etc. did.
   ========================================================================== */

[data-ld-theme='dark'] .ld-dark\:hidden {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :where(:root):not([data-ld-theme]) .ld-dark\:hidden {
  display: none;
}
}


[data-ld-theme='dark'] .ld-dark\:block {
  display: block;
}
@media (prefers-color-scheme: dark) {
  :where(:root):not([data-ld-theme]) .ld-dark\:block {
  display: block;
}
}


[data-ld-theme='dark'] .ld-dark\:opacity-50 {
  opacity: 0.5;
}
@media (prefers-color-scheme: dark) {
  :where(:root):not([data-ld-theme]) .ld-dark\:opacity-50 {
  opacity: 0.5;
}
}


[data-ld-theme='dark'] .ld-dark\:opacity-75 {
  opacity: 0.75;
}
@media (prefers-color-scheme: dark) {
  :where(:root):not([data-ld-theme]) .ld-dark\:opacity-75 {
  opacity: 0.75;
}
}


:not([data-ld-theme='dark']) .ld-light\:hidden {
  display: none;
}


/* ==========================================================================
   38n. Scrollbar styling
   ------------------------------------------------------------------------
   Firefox (scrollbar-width/scrollbar-color) and Chromium/Safari
   (::-webkit-scrollbar) need separate properties — there's no shorthand
   that covers both. Apply .ld-scrollbar-thin to any scrolling container.
   ========================================================================== */

.ld-scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--ld-border) transparent;
}

.ld-scrollbar-thin::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.ld-scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

.ld-scrollbar-thin::-webkit-scrollbar-thumb {
  background: var(--ld-border);
  border-radius: 9999px;
}

.ld-scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: var(--ld-text-muted);
}


/* ==========================================================================
   38o. Safe-area insets
   ------------------------------------------------------------------------
   For content pinned to a viewport edge (toasts, offcanvas, fixed nav)
   on notched/rounded-corner mobile devices. env() falls back to 0 on
   devices/browsers that don't support it, so these are safe to apply
   unconditionally.
   ========================================================================== */

.ld-safe-top {
  padding-top: max(var(--ld-space-4), env(safe-area-inset-top));
}

.ld-safe-bottom {
  padding-bottom: max(var(--ld-space-4), env(safe-area-inset-bottom));
}

.ld-safe-left {
  padding-left: max(var(--ld-space-4), env(safe-area-inset-left));
}

.ld-safe-right {
  padding-right: max(var(--ld-space-4), env(safe-area-inset-right));
}


/* ==========================================================================
   38p. Additional accessibility media queries
   ------------------------------------------------------------------------
   Complements the prefers-reduced-motion rule in §2 and the
   prefers-contrast: more tokens in §1.
   ========================================================================== */

/* Windows High Contrast Mode / forced-colors: let the OS palette take
   over rather than fighting it with our soft shadows and mint accent —
   both become invisible or wrong under forced-colors, so drop them and
   let borders (which forced-colors respects) carry the UI instead. */
@media (forced-colors: active) {

  .ld-btn,
  .ld-card,
  .ld-modal,
  .ld-input,
  .ld-textarea,
  .ld-select {
    box-shadow: none;
    forced-color-adjust: auto;
  }
}

/* .ld-glass (§39) relies on backdrop-filter blur to read as "glass";
   for people who've asked for reduced transparency, fall back to a
   solid surface instead of a blur that may not render as intended. */
@media (prefers-reduced-transparency: reduce) {
  .ld-glass {
    background: var(--ld-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}


/* generated by utilities/s38q-sizing-flex-grid-transitions.gen.mjs */
/* ==========================================================================
   38q. Sizing, flex, grid & transition utilities (generated)
   w/h/min/max/size · grow/shrink/basis/content/place · cols/rows/span/start/
   end/flow/auto-fit · transition/duration/delay/ease · scale/rotate/translate
   ========================================================================== */

.ld-w-auto {
  width: auto;
}

.ld-w-full {
  width: 100%;
}

.ld-w-screen {
  width: 100vw;
}

.ld-w-min {
  width: min-content;
}

.ld-w-max {
  width: max-content;
}

.ld-w-fit {
  width: fit-content;
}

.ld-h-auto {
  height: auto;
}

.ld-h-full {
  height: 100%;
}

.ld-h-screen {
  height: 100vh;
  height: 100dvh;
}

.ld-h-min {
  height: min-content;
}

.ld-h-max {
  height: max-content;
}

.ld-h-fit {
  height: fit-content;
}

.ld-w-10 {
  width: 10%;
}

.ld-w-20 {
  width: 20%;
}

.ld-w-30 {
  width: 30%;
}

.ld-w-33 {
  width: 33%;
}

.ld-w-40 {
  width: 40%;
}

.ld-w-60 {
  width: 60%;
}

.ld-w-66 {
  width: 66%;
}

.ld-w-70 {
  width: 70%;
}

.ld-w-80 {
  width: 80%;
}

.ld-w-90 {
  width: 90%;
}

.ld-h-10 {
  height: 10%;
}

.ld-h-20 {
  height: 20%;
}

.ld-h-25 {
  height: 25%;
}

.ld-h-30 {
  height: 30%;
}

.ld-h-33 {
  height: 33%;
}

.ld-h-40 {
  height: 40%;
}

.ld-h-50 {
  height: 50%;
}

.ld-h-60 {
  height: 60%;
}

.ld-h-66 {
  height: 66%;
}

.ld-h-70 {
  height: 70%;
}

.ld-h-75 {
  height: 75%;
}

.ld-h-80 {
  height: 80%;
}

.ld-h-90 {
  height: 90%;
}

.ld-h-100 {
  height: 100%;
}

.ld-min-w-0 {
  min-width: 0;
}

.ld-min-w-full {
  min-width: 100%;
}

.ld-min-w-min {
  min-width: min-content;
}

.ld-min-w-max {
  min-width: max-content;
}

.ld-min-w-fit {
  min-width: fit-content;
}

.ld-min-w-screen {
  min-width: 100vw;
}

.ld-max-w-none {
  max-width: none;
}

.ld-max-w-xs {
  max-width: 320px;
}

.ld-max-w-2xl {
  max-width: 1024px;
}

.ld-max-w-3xl {
  max-width: 1280px;
}

.ld-max-w-prose {
  max-width: 65ch;
}

.ld-max-w-min {
  max-width: min-content;
}

.ld-max-w-max {
  max-width: max-content;
}

.ld-max-w-fit {
  max-width: fit-content;
}

.ld-max-w-screen {
  max-width: 100vw;
}

.ld-min-h-0 {
  min-height: 0;
}

.ld-min-h-full {
  min-height: 100%;
}

.ld-min-h-screen {
  min-height: 100vh;
  min-height: 100dvh;
}

.ld-min-h-min {
  min-height: min-content;
}

.ld-min-h-max {
  min-height: max-content;
}

.ld-min-h-fit {
  min-height: fit-content;
}

.ld-max-h-none {
  max-height: none;
}

.ld-max-h-full {
  max-height: 100%;
}

.ld-max-h-screen {
  max-height: 100vh;
}

.ld-max-h-min {
  max-height: min-content;
}

.ld-max-h-max {
  max-height: max-content;
}

.ld-max-h-fit {
  max-height: fit-content;
}

.ld-size-0 {
  width: 0;
  height: 0;
}

.ld-size-1 {
  width: 4px;
  height: 4px;
}

.ld-size-2 {
  width: 8px;
  height: 8px;
}

.ld-size-3 {
  width: 12px;
  height: 12px;
}

.ld-size-4 {
  width: 16px;
  height: 16px;
}

.ld-size-5 {
  width: 24px;
  height: 24px;
}

.ld-size-6 {
  width: 32px;
  height: 32px;
}

.ld-size-8 {
  width: 48px;
  height: 48px;
}

.ld-size-full {
  width: 100%;
  height: 100%;
}

.ld-size-auto {
  width: auto;
  height: auto;
}

.ld-grow {
  flex-grow: 1;
}

.ld-grow-0 {
  flex-grow: 0;
}

.ld-shrink {
  flex-shrink: 1;
}

.ld-shrink-0 {
  flex-shrink: 0;
}

.ld-flex-initial {
  flex: 0 1 auto;
}

.ld-flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.ld-basis-0 {
  flex-basis: 0px;
}

.ld-basis-auto {
  flex-basis: auto;
}

.ld-basis-full {
  flex-basis: 100%;
}

.ld-basis-25 {
  flex-basis: 25%;
}

.ld-basis-33 {
  flex-basis: 33%;
}

.ld-basis-50 {
  flex-basis: 50%;
}

.ld-basis-66 {
  flex-basis: 66%;
}

.ld-basis-75 {
  flex-basis: 75%;
}

.ld-content-start {
  align-content: flex-start;
}

.ld-content-center {
  align-content: center;
}

.ld-content-end {
  align-content: flex-end;
}

.ld-content-between {
  align-content: space-between;
}

.ld-content-around {
  align-content: space-around;
}

.ld-content-evenly {
  align-content: space-evenly;
}

.ld-content-stretch {
  align-content: stretch;
}

.ld-justify-items-start {
  justify-items: start;
}

.ld-justify-self-start {
  justify-self: start;
}

.ld-place-items-start {
  place-items: start;
}

.ld-place-content-start {
  place-content: start;
}

.ld-justify-items-center {
  justify-items: center;
}

.ld-justify-self-center {
  justify-self: center;
}

.ld-place-items-center {
  place-items: center;
}

.ld-place-content-center {
  place-content: center;
}

.ld-justify-items-end {
  justify-items: end;
}

.ld-justify-self-end {
  justify-self: end;
}

.ld-place-items-end {
  place-items: end;
}

.ld-place-content-end {
  place-content: end;
}

.ld-justify-items-stretch {
  justify-items: stretch;
}

.ld-justify-self-stretch {
  justify-self: stretch;
}

.ld-place-items-stretch {
  place-items: stretch;
}

.ld-place-content-stretch {
  place-content: stretch;
}

.ld-justify-self-auto {
  justify-self: auto;
}

.ld-self-auto {
  align-self: auto;
}

.ld-self-baseline {
  align-self: baseline;
}

.ld-place-center {
  place-content: center;
  place-items: center;
}

.ld-order-0 {
  order: 0;
}

.ld-order-none {
  order: 0;
}

.ld-grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.ld-grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.ld-grid-cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.ld-grid-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.ld-grid-cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}

.ld-grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.ld-grid-cols-none {
  grid-template-columns: none;
}

.ld-grid-rows-1 {
  grid-template-rows: repeat(1, minmax(0, 1fr));
}

.ld-grid-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.ld-grid-rows-3 {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.ld-grid-rows-4 {
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.ld-grid-rows-5 {
  grid-template-rows: repeat(5, minmax(0, 1fr));
}

.ld-grid-rows-6 {
  grid-template-rows: repeat(6, minmax(0, 1fr));
}

.ld-grid-rows-none {
  grid-template-rows: none;
}

.ld-grid-fit-xs {
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
}

.ld-grid-fill-xs {
  grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
}

.ld-grid-fit-sm {
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
}

.ld-grid-fill-sm {
  grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
}

.ld-grid-fit-md {
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.ld-grid-fill-md {
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}

.ld-grid-fit-lg {
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.ld-grid-fill-lg {
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}

.ld-grid-fit-xl {
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}

.ld-grid-fill-xl {
  grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
}

.ld-span-1 {
  grid-column: span 1 / span 1;
}

.ld-span-2 {
  grid-column: span 2 / span 2;
}

.ld-span-3 {
  grid-column: span 3 / span 3;
}

.ld-span-4 {
  grid-column: span 4 / span 4;
}

.ld-span-5 {
  grid-column: span 5 / span 5;
}

.ld-span-6 {
  grid-column: span 6 / span 6;
}

.ld-span-7 {
  grid-column: span 7 / span 7;
}

.ld-span-8 {
  grid-column: span 8 / span 8;
}

.ld-span-9 {
  grid-column: span 9 / span 9;
}

.ld-span-10 {
  grid-column: span 10 / span 10;
}

.ld-span-11 {
  grid-column: span 11 / span 11;
}

.ld-span-12 {
  grid-column: span 12 / span 12;
}

.ld-span-full {
  grid-column: 1 / -1;
}

.ld-col-start-1 {
  grid-column-start: 1;
}

.ld-col-end-1 {
  grid-column-end: 1;
}

.ld-col-start-2 {
  grid-column-start: 2;
}

.ld-col-end-2 {
  grid-column-end: 2;
}

.ld-col-start-3 {
  grid-column-start: 3;
}

.ld-col-end-3 {
  grid-column-end: 3;
}

.ld-col-start-4 {
  grid-column-start: 4;
}

.ld-col-end-4 {
  grid-column-end: 4;
}

.ld-col-start-5 {
  grid-column-start: 5;
}

.ld-col-end-5 {
  grid-column-end: 5;
}

.ld-col-start-6 {
  grid-column-start: 6;
}

.ld-col-end-6 {
  grid-column-end: 6;
}

.ld-col-start-7 {
  grid-column-start: 7;
}

.ld-col-end-7 {
  grid-column-end: 7;
}

.ld-col-start-8 {
  grid-column-start: 8;
}

.ld-col-end-8 {
  grid-column-end: 8;
}

.ld-col-start-9 {
  grid-column-start: 9;
}

.ld-col-end-9 {
  grid-column-end: 9;
}

.ld-col-start-10 {
  grid-column-start: 10;
}

.ld-col-end-10 {
  grid-column-end: 10;
}

.ld-col-start-11 {
  grid-column-start: 11;
}

.ld-col-end-11 {
  grid-column-end: 11;
}

.ld-col-start-12 {
  grid-column-start: 12;
}

.ld-col-end-12 {
  grid-column-end: 12;
}

.ld-col-start-13 {
  grid-column-start: 13;
}

.ld-col-end-13 {
  grid-column-end: 13;
}

.ld-row-span-1 {
  grid-row: span 1 / span 1;
}

.ld-row-span-2 {
  grid-row: span 2 / span 2;
}

.ld-row-span-3 {
  grid-row: span 3 / span 3;
}

.ld-row-span-4 {
  grid-row: span 4 / span 4;
}

.ld-row-span-5 {
  grid-row: span 5 / span 5;
}

.ld-row-span-6 {
  grid-row: span 6 / span 6;
}

.ld-row-span-full {
  grid-row: 1 / -1;
}

.ld-grid-flow-row {
  grid-auto-flow: row;
}

.ld-grid-flow-col {
  grid-auto-flow: column;
}

.ld-grid-flow-dense {
  grid-auto-flow: dense;
}

.ld-grid-flow-row-dense {
  grid-auto-flow: row dense;
}

.ld-grid-flow-col-dense {
  grid-auto-flow: column dense;
}

.ld-auto-rows-auto {
  grid-auto-rows: auto;
}

.ld-auto-cols-auto {
  grid-auto-columns: auto;
}

.ld-auto-rows-min {
  grid-auto-rows: min-content;
}

.ld-auto-cols-min {
  grid-auto-columns: min-content;
}

.ld-auto-rows-max {
  grid-auto-rows: max-content;
}

.ld-auto-cols-max {
  grid-auto-columns: max-content;
}

.ld-auto-rows-fr {
  grid-auto-rows: minmax(0, 1fr);
}

.ld-auto-cols-fr {
  grid-auto-columns: minmax(0, 1fr);
}

.ld-transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate;
  transition-duration: var(--ld-transition-duration, 150ms);
  transition-timing-function: var(--ld-transition-ease, ease);
}

.ld-transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: var(--ld-transition-duration, 150ms);
  transition-timing-function: var(--ld-transition-ease, ease);
}

.ld-transition-opacity {
  transition-property: opacity;
  transition-duration: var(--ld-transition-duration, 150ms);
  transition-timing-function: var(--ld-transition-ease, ease);
}

.ld-transition-shadow {
  transition-property: box-shadow;
  transition-duration: var(--ld-transition-duration, 150ms);
  transition-timing-function: var(--ld-transition-ease, ease);
}

.ld-transition-transform {
  transition-property: transform, translate, scale, rotate;
  transition-duration: var(--ld-transition-duration, 150ms);
  transition-timing-function: var(--ld-transition-ease, ease);
}

.ld-transition-all {
  transition-property: all;
  transition-duration: var(--ld-transition-duration, 150ms);
  transition-timing-function: var(--ld-transition-ease, ease);
}

.ld-transition-none {
  transition-property: none;
}

.ld-duration-0 {
  --ld-transition-duration: 0ms;
  transition-duration: 0ms;
}

.ld-delay-0 {
  transition-delay: 0ms;
}

.ld-duration-75 {
  --ld-transition-duration: 75ms;
  transition-duration: 75ms;
}

.ld-delay-75 {
  transition-delay: 75ms;
}

.ld-duration-100 {
  --ld-transition-duration: 100ms;
  transition-duration: 100ms;
}

.ld-delay-100 {
  transition-delay: 100ms;
}

.ld-duration-150 {
  --ld-transition-duration: 150ms;
  transition-duration: 150ms;
}

.ld-delay-150 {
  transition-delay: 150ms;
}

.ld-duration-200 {
  --ld-transition-duration: 200ms;
  transition-duration: 200ms;
}

.ld-delay-200 {
  transition-delay: 200ms;
}

.ld-duration-300 {
  --ld-transition-duration: 300ms;
  transition-duration: 300ms;
}

.ld-delay-300 {
  transition-delay: 300ms;
}

.ld-duration-500 {
  --ld-transition-duration: 500ms;
  transition-duration: 500ms;
}

.ld-delay-500 {
  transition-delay: 500ms;
}

.ld-duration-700 {
  --ld-transition-duration: 700ms;
  transition-duration: 700ms;
}

.ld-delay-700 {
  transition-delay: 700ms;
}

.ld-duration-1000 {
  --ld-transition-duration: 1000ms;
  transition-duration: 1000ms;
}

.ld-delay-1000 {
  transition-delay: 1000ms;
}

.ld-ease-linear {
  --ld-transition-ease: linear;
  transition-timing-function: linear;
}

.ld-ease-in {
  --ld-transition-ease: cubic-bezier(0.4, 0, 1, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ld-ease-out {
  --ld-transition-ease: cubic-bezier(0, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.ld-ease-in-out {
  --ld-transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ld-scale-0 {
  scale: 0;
}

.ld-scale-50 {
  scale: 0.5;
}

.ld-scale-75 {
  scale: 0.75;
}

.ld-scale-90 {
  scale: 0.9;
}

.ld-scale-95 {
  scale: 0.95;
}

.ld-scale-100 {
  scale: 1;
}

.ld-scale-105 {
  scale: 1.05;
}

.ld-scale-110 {
  scale: 1.1;
}

.ld-scale-125 {
  scale: 1.25;
}

.ld-scale-150 {
  scale: 1.5;
}

.ld-rotate-0 {
  rotate: 0deg;
}

.ld-rotate-1 {
  rotate: 1deg;
}

.ld-rotate-n1 {
  rotate: -1deg;
}

.ld-rotate-2 {
  rotate: 2deg;
}

.ld-rotate-n2 {
  rotate: -2deg;
}

.ld-rotate-3 {
  rotate: 3deg;
}

.ld-rotate-n3 {
  rotate: -3deg;
}

.ld-rotate-6 {
  rotate: 6deg;
}

.ld-rotate-n6 {
  rotate: -6deg;
}

.ld-rotate-12 {
  rotate: 12deg;
}

.ld-rotate-n12 {
  rotate: -12deg;
}

.ld-rotate-45 {
  rotate: 45deg;
}

.ld-rotate-n45 {
  rotate: -45deg;
}

.ld-rotate-90 {
  rotate: 90deg;
}

.ld-rotate-n90 {
  rotate: -90deg;
}

.ld-rotate-180 {
  rotate: 180deg;
}

.ld-rotate-n180 {
  rotate: -180deg;
}

.ld-translate-x-0 {
  --ld-tx: 0;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-y-0 {
  --ld-ty: 0;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-x-1 {
  --ld-tx: 4px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-y-1 {
  --ld-ty: 4px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-x-n1 {
  --ld-tx: -4px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-y-n1 {
  --ld-ty: -4px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-x-2 {
  --ld-tx: 8px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-y-2 {
  --ld-ty: 8px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-x-n2 {
  --ld-tx: -8px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-y-n2 {
  --ld-ty: -8px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-x-3 {
  --ld-tx: 12px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-y-3 {
  --ld-ty: 12px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-x-n3 {
  --ld-tx: -12px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-y-n3 {
  --ld-ty: -12px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-x-4 {
  --ld-tx: 16px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-y-4 {
  --ld-ty: 16px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-x-n4 {
  --ld-tx: -16px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-y-n4 {
  --ld-ty: -16px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-x-5 {
  --ld-tx: 24px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-y-5 {
  --ld-ty: 24px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-x-n5 {
  --ld-tx: -24px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-y-n5 {
  --ld-ty: -24px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-x-6 {
  --ld-tx: 32px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-y-6 {
  --ld-ty: 32px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-x-n6 {
  --ld-tx: -32px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-y-n6 {
  --ld-ty: -32px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-x-8 {
  --ld-tx: 48px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-y-8 {
  --ld-ty: 48px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-x-n8 {
  --ld-tx: -48px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-y-n8 {
  --ld-ty: -48px;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-x-full {
  --ld-tx: 100%;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-y-full {
  --ld-ty: 100%;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-x-nfull {
  --ld-tx: -100%;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-translate-y-nfull {
  --ld-ty: -100%;
  translate: var(--ld-tx, 0) var(--ld-ty, 0);
}

.ld-origin-center {
  transform-origin: center;
}

.ld-origin-top {
  transform-origin: top;
}

.ld-origin-bottom {
  transform-origin: bottom;
}

.ld-origin-left {
  transform-origin: left;
}

.ld-origin-right {
  transform-origin: right;
}

.ld-will-change-transform {
  will-change: transform;
}

.ld-will-change-opacity {
  will-change: opacity;
}

@media (min-width: 640px) {
  .ld-sm\:w-auto {
  width: auto;
}
  .ld-sm\:w-full {
  width: 100%;
}
  .ld-sm\:w-33 {
  width: 33%;
}
  .ld-sm\:w-66 {
  width: 66%;
}
  .ld-sm\:grow {
  flex-grow: 1;
}
  .ld-sm\:grow-0 {
  flex-grow: 0;
}
  .ld-sm\:shrink {
  flex-shrink: 1;
}
  .ld-sm\:shrink-0 {
  flex-shrink: 0;
}
  .ld-sm\:basis-0 {
  flex-basis: 0px;
}
  .ld-sm\:basis-auto {
  flex-basis: auto;
}
  .ld-sm\:basis-full {
  flex-basis: 100%;
}
  .ld-sm\:basis-25 {
  flex-basis: 25%;
}
  .ld-sm\:basis-33 {
  flex-basis: 33%;
}
  .ld-sm\:basis-50 {
  flex-basis: 50%;
}
  .ld-sm\:basis-66 {
  flex-basis: 66%;
}
  .ld-sm\:basis-75 {
  flex-basis: 75%;
}
  .ld-sm\:order-0 {
  order: 0;
}
  .ld-sm\:order-none {
  order: 0;
}
  .ld-sm\:grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
  .ld-sm\:grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
  .ld-sm\:grid-cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}
  .ld-sm\:grid-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}
  .ld-sm\:grid-cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}
  .ld-sm\:grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
  .ld-sm\:grid-cols-none {
  grid-template-columns: none;
}
  .ld-sm\:grid-fit-xs {
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
}
  .ld-sm\:grid-fill-xs {
  grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
}
  .ld-sm\:grid-fit-sm {
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
}
  .ld-sm\:grid-fill-sm {
  grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
}
  .ld-sm\:grid-fit-md {
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
  .ld-sm\:grid-fill-md {
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}
  .ld-sm\:grid-fit-lg {
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}
  .ld-sm\:grid-fill-lg {
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}
  .ld-sm\:grid-fit-xl {
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}
  .ld-sm\:grid-fill-xl {
  grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
}
  .ld-sm\:span-1 {
  grid-column: span 1 / span 1;
}
  .ld-sm\:span-2 {
  grid-column: span 2 / span 2;
}
  .ld-sm\:span-3 {
  grid-column: span 3 / span 3;
}
  .ld-sm\:span-4 {
  grid-column: span 4 / span 4;
}
  .ld-sm\:span-5 {
  grid-column: span 5 / span 5;
}
  .ld-sm\:span-6 {
  grid-column: span 6 / span 6;
}
  .ld-sm\:span-7 {
  grid-column: span 7 / span 7;
}
  .ld-sm\:span-8 {
  grid-column: span 8 / span 8;
}
  .ld-sm\:span-9 {
  grid-column: span 9 / span 9;
}
  .ld-sm\:span-10 {
  grid-column: span 10 / span 10;
}
  .ld-sm\:span-11 {
  grid-column: span 11 / span 11;
}
  .ld-sm\:span-12 {
  grid-column: span 12 / span 12;
}
  .ld-sm\:span-full {
  grid-column: 1 / -1;
}
}

@media (min-width: 960px) {
  .ld-md\:w-auto {
  width: auto;
}
  .ld-md\:w-full {
  width: 100%;
}
  .ld-md\:w-33 {
  width: 33%;
}
  .ld-md\:w-66 {
  width: 66%;
}
  .ld-md\:grow {
  flex-grow: 1;
}
  .ld-md\:grow-0 {
  flex-grow: 0;
}
  .ld-md\:shrink {
  flex-shrink: 1;
}
  .ld-md\:shrink-0 {
  flex-shrink: 0;
}
  .ld-md\:basis-0 {
  flex-basis: 0px;
}
  .ld-md\:basis-auto {
  flex-basis: auto;
}
  .ld-md\:basis-full {
  flex-basis: 100%;
}
  .ld-md\:basis-25 {
  flex-basis: 25%;
}
  .ld-md\:basis-33 {
  flex-basis: 33%;
}
  .ld-md\:basis-50 {
  flex-basis: 50%;
}
  .ld-md\:basis-66 {
  flex-basis: 66%;
}
  .ld-md\:basis-75 {
  flex-basis: 75%;
}
  .ld-md\:order-0 {
  order: 0;
}
  .ld-md\:order-none {
  order: 0;
}
  .ld-md\:grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
  .ld-md\:grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
  .ld-md\:grid-cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}
  .ld-md\:grid-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}
  .ld-md\:grid-cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}
  .ld-md\:grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
  .ld-md\:grid-cols-none {
  grid-template-columns: none;
}
  .ld-md\:grid-fit-xs {
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
}
  .ld-md\:grid-fill-xs {
  grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
}
  .ld-md\:grid-fit-sm {
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
}
  .ld-md\:grid-fill-sm {
  grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
}
  .ld-md\:grid-fit-md {
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
  .ld-md\:grid-fill-md {
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}
  .ld-md\:grid-fit-lg {
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}
  .ld-md\:grid-fill-lg {
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}
  .ld-md\:grid-fit-xl {
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}
  .ld-md\:grid-fill-xl {
  grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
}
  .ld-md\:span-1 {
  grid-column: span 1 / span 1;
}
  .ld-md\:span-2 {
  grid-column: span 2 / span 2;
}
  .ld-md\:span-3 {
  grid-column: span 3 / span 3;
}
  .ld-md\:span-4 {
  grid-column: span 4 / span 4;
}
  .ld-md\:span-5 {
  grid-column: span 5 / span 5;
}
  .ld-md\:span-6 {
  grid-column: span 6 / span 6;
}
  .ld-md\:span-7 {
  grid-column: span 7 / span 7;
}
  .ld-md\:span-8 {
  grid-column: span 8 / span 8;
}
  .ld-md\:span-9 {
  grid-column: span 9 / span 9;
}
  .ld-md\:span-10 {
  grid-column: span 10 / span 10;
}
  .ld-md\:span-11 {
  grid-column: span 11 / span 11;
}
  .ld-md\:span-12 {
  grid-column: span 12 / span 12;
}
  .ld-md\:span-full {
  grid-column: 1 / -1;
}
}

@media (min-width: 1200px) {
  .ld-lg\:w-auto {
  width: auto;
}
  .ld-lg\:w-full {
  width: 100%;
}
  .ld-lg\:w-33 {
  width: 33%;
}
  .ld-lg\:w-66 {
  width: 66%;
}
  .ld-lg\:grow {
  flex-grow: 1;
}
  .ld-lg\:grow-0 {
  flex-grow: 0;
}
  .ld-lg\:shrink {
  flex-shrink: 1;
}
  .ld-lg\:shrink-0 {
  flex-shrink: 0;
}
  .ld-lg\:basis-0 {
  flex-basis: 0px;
}
  .ld-lg\:basis-auto {
  flex-basis: auto;
}
  .ld-lg\:basis-full {
  flex-basis: 100%;
}
  .ld-lg\:basis-25 {
  flex-basis: 25%;
}
  .ld-lg\:basis-33 {
  flex-basis: 33%;
}
  .ld-lg\:basis-50 {
  flex-basis: 50%;
}
  .ld-lg\:basis-66 {
  flex-basis: 66%;
}
  .ld-lg\:basis-75 {
  flex-basis: 75%;
}
  .ld-lg\:order-0 {
  order: 0;
}
  .ld-lg\:order-none {
  order: 0;
}
  .ld-lg\:grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
  .ld-lg\:grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
  .ld-lg\:grid-cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}
  .ld-lg\:grid-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}
  .ld-lg\:grid-cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}
  .ld-lg\:grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
  .ld-lg\:grid-cols-none {
  grid-template-columns: none;
}
  .ld-lg\:grid-fit-xs {
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
}
  .ld-lg\:grid-fill-xs {
  grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
}
  .ld-lg\:grid-fit-sm {
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
}
  .ld-lg\:grid-fill-sm {
  grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
}
  .ld-lg\:grid-fit-md {
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
  .ld-lg\:grid-fill-md {
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}
  .ld-lg\:grid-fit-lg {
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}
  .ld-lg\:grid-fill-lg {
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}
  .ld-lg\:grid-fit-xl {
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}
  .ld-lg\:grid-fill-xl {
  grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
}
  .ld-lg\:span-1 {
  grid-column: span 1 / span 1;
}
  .ld-lg\:span-2 {
  grid-column: span 2 / span 2;
}
  .ld-lg\:span-3 {
  grid-column: span 3 / span 3;
}
  .ld-lg\:span-4 {
  grid-column: span 4 / span 4;
}
  .ld-lg\:span-5 {
  grid-column: span 5 / span 5;
}
  .ld-lg\:span-6 {
  grid-column: span 6 / span 6;
}
  .ld-lg\:span-7 {
  grid-column: span 7 / span 7;
}
  .ld-lg\:span-8 {
  grid-column: span 8 / span 8;
}
  .ld-lg\:span-9 {
  grid-column: span 9 / span 9;
}
  .ld-lg\:span-10 {
  grid-column: span 10 / span 10;
}
  .ld-lg\:span-11 {
  grid-column: span 11 / span 11;
}
  .ld-lg\:span-12 {
  grid-column: span 12 / span 12;
}
  .ld-lg\:span-full {
  grid-column: 1 / -1;
}
}

@media (min-width: 1440px) {
  .ld-xl\:w-auto {
  width: auto;
}
  .ld-xl\:w-full {
  width: 100%;
}
  .ld-xl\:w-33 {
  width: 33%;
}
  .ld-xl\:w-66 {
  width: 66%;
}
  .ld-xl\:grow {
  flex-grow: 1;
}
  .ld-xl\:grow-0 {
  flex-grow: 0;
}
  .ld-xl\:shrink {
  flex-shrink: 1;
}
  .ld-xl\:shrink-0 {
  flex-shrink: 0;
}
  .ld-xl\:basis-0 {
  flex-basis: 0px;
}
  .ld-xl\:basis-auto {
  flex-basis: auto;
}
  .ld-xl\:basis-full {
  flex-basis: 100%;
}
  .ld-xl\:basis-25 {
  flex-basis: 25%;
}
  .ld-xl\:basis-33 {
  flex-basis: 33%;
}
  .ld-xl\:basis-50 {
  flex-basis: 50%;
}
  .ld-xl\:basis-66 {
  flex-basis: 66%;
}
  .ld-xl\:basis-75 {
  flex-basis: 75%;
}
  .ld-xl\:order-0 {
  order: 0;
}
  .ld-xl\:order-none {
  order: 0;
}
  .ld-xl\:grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
  .ld-xl\:grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
  .ld-xl\:grid-cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}
  .ld-xl\:grid-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}
  .ld-xl\:grid-cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}
  .ld-xl\:grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
  .ld-xl\:grid-cols-none {
  grid-template-columns: none;
}
  .ld-xl\:grid-fit-xs {
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
}
  .ld-xl\:grid-fill-xs {
  grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
}
  .ld-xl\:grid-fit-sm {
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
}
  .ld-xl\:grid-fill-sm {
  grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
}
  .ld-xl\:grid-fit-md {
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
  .ld-xl\:grid-fill-md {
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}
  .ld-xl\:grid-fit-lg {
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}
  .ld-xl\:grid-fill-lg {
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}
  .ld-xl\:grid-fit-xl {
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}
  .ld-xl\:grid-fill-xl {
  grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
}
  .ld-xl\:span-1 {
  grid-column: span 1 / span 1;
}
  .ld-xl\:span-2 {
  grid-column: span 2 / span 2;
}
  .ld-xl\:span-3 {
  grid-column: span 3 / span 3;
}
  .ld-xl\:span-4 {
  grid-column: span 4 / span 4;
}
  .ld-xl\:span-5 {
  grid-column: span 5 / span 5;
}
  .ld-xl\:span-6 {
  grid-column: span 6 / span 6;
}
  .ld-xl\:span-7 {
  grid-column: span 7 / span 7;
}
  .ld-xl\:span-8 {
  grid-column: span 8 / span 8;
}
  .ld-xl\:span-9 {
  grid-column: span 9 / span 9;
}
  .ld-xl\:span-10 {
  grid-column: span 10 / span 10;
}
  .ld-xl\:span-11 {
  grid-column: span 11 / span 11;
}
  .ld-xl\:span-12 {
  grid-column: span 12 / span 12;
}
  .ld-xl\:span-full {
  grid-column: 1 / -1;
}
}

}

@layer ld.escape {

/* ==========================================================================
   39. Escape hatches
   ------------------------------------------------------------------------
   ldcss now defaults to rounded corners, soft shadows, and a sans-serif
   font. These utilities let individual elements opt into something else —
   sharper corners, a different shadow depth, or monospace — without
   fighting the framework. See also data-ld-shadow='hard' (§1/§4) and
   data-ld-unstyled (§1) for retheming a whole subtree at once instead of
   one element at a time.
   ========================================================================== */

/* -- Rounded corners ------------------------------------------------------ */

.ld-round-none {
  border-radius: 0;
}

.ld-round-sm {
  border-radius: 4px;
}

.ld-round {
  border-radius: 8px;
}

.ld-round-lg {
  border-radius: 16px;
}

.ld-round-xl {
  border-radius: 24px;
}

.ld-round-full {
  border-radius: 9999px;
}

/* -- Border width x style grid -------------------------------------------
   ld-border-{width}px-{style}. Color defaults to the standard border
   token; override with an inline `border-color` or `style` if needed. */

.ld-border-0 {
  border-width: 0;
}

.ld-border-1px-solid,
.ld-border-2px-solid,
.ld-border-3px-solid,
.ld-border-4px-solid,
.ld-border-1px-dashed,
.ld-border-2px-dashed,
.ld-border-3px-dashed,
.ld-border-4px-dashed,
.ld-border-1px-dotted,
.ld-border-2px-dotted,
.ld-border-3px-dotted,
.ld-border-4px-dotted,
.ld-border-1px-double,
.ld-border-2px-double,
.ld-border-3px-double,
.ld-border-4px-double {
  border-color: var(--ld-border-soft);
}

.ld-border-1px-solid {
  border-width: 1px;
  border-style: solid;
}

.ld-border-2px-solid {
  border-width: 2px;
  border-style: solid;
}

.ld-border-3px-solid {
  border-width: 3px;
  border-style: solid;
}

.ld-border-4px-solid {
  border-width: 4px;
  border-style: solid;
}

.ld-border-1px-dashed {
  border-width: 1px;
  border-style: dashed;
}

.ld-border-2px-dashed {
  border-width: 2px;
  border-style: dashed;
}

.ld-border-3px-dashed {
  border-width: 3px;
  border-style: dashed;
}

.ld-border-4px-dashed {
  border-width: 4px;
  border-style: dashed;
}

.ld-border-1px-dotted {
  border-width: 1px;
  border-style: dotted;
}

.ld-border-2px-dotted {
  border-width: 2px;
  border-style: dotted;
}

.ld-border-3px-dotted {
  border-width: 3px;
  border-style: dotted;
}

.ld-border-4px-dotted {
  border-width: 4px;
  border-style: dotted;
}

.ld-border-1px-double {
  border-width: 3px;
  border-style: double;
}

.ld-border-2px-double {
  border-width: 4px;
  border-style: double;
}

.ld-border-3px-double {
  border-width: 5px;
  border-style: double;
}

.ld-border-4px-double {
  border-width: 6px;
  border-style: double;
}

/* -- Shadow depth (independent of the default --ld-shadow token) --------- */

.ld-shadow-none {
  box-shadow: none;
}

.ld-shadow-soft-sm {
  box-shadow: 0 1px 4px rgba(20, 23, 26, 0.10);
}

.ld-shadow-soft {
  box-shadow: 0 4px 12px rgba(20, 23, 26, 0.14);
}

.ld-shadow-soft-lg {
  box-shadow: 0 12px 32px rgba(20, 23, 26, 0.18);
}

[data-ld-theme='dark'] .ld-shadow-soft-sm {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
@media (prefers-color-scheme: dark) {
  :where(:root):not([data-ld-theme]) .ld-shadow-soft-sm {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
}


[data-ld-theme='dark'] .ld-shadow-soft {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
@media (prefers-color-scheme: dark) {
  :where(:root):not([data-ld-theme]) .ld-shadow-soft {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
}


[data-ld-theme='dark'] .ld-shadow-soft-lg {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
  :where(:root):not([data-ld-theme]) .ld-shadow-soft-lg {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
}


/* -- Shadow depth, upward (same sm/base/lg scale as ld-shadow-soft-*, for
   elements like a footer where the shadow should read as cast toward the
   top rather than the bottom) ----------------------------------------- */

.ld-shadow-up-sm {
  box-shadow: 0 -1px 4px rgba(20, 23, 26, 0.10);
}

.ld-shadow-up {
  box-shadow: 0 -4px 12px rgba(20, 23, 26, 0.14);
}

.ld-shadow-up-lg {
  box-shadow: 0 -12px 32px rgba(20, 23, 26, 0.18);
}

[data-ld-theme='dark'] .ld-shadow-up-sm {
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.4);
}
@media (prefers-color-scheme: dark) {
  :where(:root):not([data-ld-theme]) .ld-shadow-up-sm {
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.4);
}
}


[data-ld-theme='dark'] .ld-shadow-up {
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.45);
}
@media (prefers-color-scheme: dark) {
  :where(:root):not([data-ld-theme]) .ld-shadow-up {
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.45);
}
}


[data-ld-theme='dark'] .ld-shadow-up-lg {
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
  :where(:root):not([data-ld-theme]) .ld-shadow-up-lg {
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.5);
}
}


/* This section is its own cascade layer (ld.escape), so a shadow utility
   wins over every component rule no matter how specific that rule is —
   including .ld-btn:active/:disabled, .ld-input:focus and
   .ld-card[data-ld-interactive]:hover. A button given .ld-shadow-soft keeps
   that shadow while pressed, and an interactive card keeps its custom resting
   shadow on hover (its lift transform still applies). */

/* -- Type ------------------------------------------------------------------
   ldcss now defaults to --ld-font-sans. Use ld-font-mono to opt an element
   (and everything under it — --ld-font-family is a custom property, so
   unlike font-family it inherits) into monospace, e.g. for a data-dense
   dashboard section, or ld-font-serif for editorial copy. Apply once to a
   container and every component inside that reads var(--ld-font-family) —
   buttons, inputs, tabs, headings, etc. — picks it up. code/pre/kbd stay
   mono deliberately, they read --ld-font-mono directly, not this token. */

.ld-font-sans {
  --ld-font-family: var(--ld-font-sans);
  font-family: var(--ld-font-family);
}

.ld-font-serif {
  --ld-font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-family: var(--ld-font-family);
}

.ld-font-mono {
  --ld-font-family: var(--ld-font-mono);
  font-family: var(--ld-font-family);
}

/* -- Density scale ---------------------------------------------------------
   Override the spacing tokens for a whole subtree. Apply to a container;
   every component inside that reads --ld-space-* picks it up. */

.ld-scale-compact {
  --ld-space-1: 2px;
  --ld-space-2: 4px;
  --ld-space-3: 8px;
  --ld-space-4: 10px;
  --ld-space-5: 16px;
  --ld-space-6: 20px;
  --ld-space-8: 32px;
}

.ld-scale-cozy {
  --ld-space-1: 4px;
  --ld-space-2: 8px;
  --ld-space-3: 12px;
  --ld-space-4: 16px;
  --ld-space-5: 24px;
  --ld-space-6: 32px;
  --ld-space-8: 48px;
}

.ld-scale-spacious {
  --ld-space-1: 6px;
  --ld-space-2: 12px;
  --ld-space-3: 18px;
  --ld-space-4: 24px;
  --ld-space-5: 36px;
  --ld-space-6: 48px;
  --ld-space-8: 64px;
}

/* -- Per-element accent swap ------------------------------------------------
   Override just the brand color for one subtree, without touching theme. */

.ld-accent-mint {
  --ld-accent: #46E8B3;
  --ld-accent-text: #04231A;
}

.ld-accent-blue {
  --ld-accent: #4C8EFF;
  --ld-accent-text: #04122E;
}

.ld-accent-purple {
  --ld-accent: #B98CFF;
  --ld-accent-text: #1C0A33;
}

.ld-accent-pink {
  --ld-accent: #FF6FA5;
  --ld-accent-text: #330015;
}

.ld-accent-orange {
  --ld-accent: #FF9A4C;
  --ld-accent-text: #331500;
}

.ld-accent-yellow {
  --ld-accent: #F2D93B;
  --ld-accent-text: #2E2600;
}

.ld-accent-red {
  --ld-accent: #FF6B6B;
  --ld-accent-text: #330000;
}

/* Need a brand color that isn't one of the seven presets above? There's
   no separate mechanism for this — --ld-accent and --ld-accent-text are
   plain custom properties, so set them directly wherever you'd apply
   one of the .ld-accent-* classes:
     <div style="--ld-accent:#2F6F4E; --ld-accent-text:#EAF6EF;">
   Everything that reads var(--ld-accent) — buttons, badges, focus
   states inside data-ld-shadow="hard" subtrees, etc. — picks it up the
   same way it would pick up a preset, scoped to that element and its
   descendants. Pick --ld-accent-text for contrast against --ld-accent,
   not against the page background. */

/* -- Surface registers -------------------------------------------------
   Alternatives to the default bordered/shadowed surface. */

.ld-glass {
  background: color-mix(in srgb, var(--ld-surface) 55%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--ld-border-soft);
}

.ld-flat {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}
}

@layer ld.variants {

/* generated by variants/s40-state-variants.gen.mjs */
@media (hover: hover) {
  .ld-hover\:text-muted:hover {
    color: var(--ld-text-muted);
  }
  
  .ld-hover\:text-accent:hover {
    color: var(--ld-accent);
  }
  
  .ld-hover\:text-danger:hover {
    color: var(--ld-danger);
  }
  
  .ld-hover\:bg-surface:hover {
    background: var(--ld-surface);
  }
  
  .ld-hover\:bg-raised:hover {
    background: var(--ld-surface-raised);
  }
  
  .ld-hover\:bg-transparent:hover {
    background: transparent;
  }
  
  .ld-hover\:bg-accent:hover {
    background: var(--ld-accent);
  }
  
  .ld-hover\:bg-danger:hover {
    background: var(--ld-danger);
  }
  
  .ld-hover\:bg-success:hover {
    background: var(--ld-success);
  }
  
  .ld-hover\:bg-warning:hover {
    background: var(--ld-warning);
  }
  
  .ld-hover\:bg-info:hover {
    background: var(--ld-info);
  }
  
  .ld-hover\:opacity-0:hover {
    opacity: var(--ld-opacity-0);
  }
  
  .ld-hover\:opacity-25:hover {
    opacity: var(--ld-opacity-25);
  }
  
  .ld-hover\:opacity-50:hover {
    opacity: var(--ld-opacity-50);
  }
  
  .ld-hover\:opacity-75:hover {
    opacity: var(--ld-opacity-75);
  }
  
  .ld-hover\:opacity-100:hover {
    opacity: var(--ld-opacity-100);
  }
  
  .ld-hover\:shadow-none:hover {
    box-shadow: none;
  }
  
  .ld-hover\:shadow-soft-sm:hover {
    box-shadow: 0 1px 4px rgba(20, 23, 26, 0.10);
  }
  
  .ld-hover\:shadow-soft:hover {
    box-shadow: 0 4px 12px rgba(20, 23, 26, 0.14);
  }
  
  .ld-hover\:shadow-soft-lg:hover {
    box-shadow: 0 12px 32px rgba(20, 23, 26, 0.18);
  }
  
  .ld-hover\:shadow-up-sm:hover {
    box-shadow: 0 -1px 4px rgba(20, 23, 26, 0.10);
  }
  
  .ld-hover\:shadow-up:hover {
    box-shadow: 0 -4px 12px rgba(20, 23, 26, 0.14);
  }
  
  .ld-hover\:shadow-up-lg:hover {
    box-shadow: 0 -12px 32px rgba(20, 23, 26, 0.18);
  }
  
  .ld-hover\:underline:hover {
    text-decoration: underline;
  }
  
  .ld-hover\:no-underline:hover {
    text-decoration: none;
  }
  
  .ld-hover\:scale-95:hover {
    scale: 0.95;
  }
  
  .ld-hover\:scale-100:hover {
    scale: 1;
  }
  
  .ld-hover\:scale-105:hover {
    scale: 1.05;
  }
  
  .ld-hover\:scale-110:hover {
    scale: 1.1;
  }
  
  .ld-hover\:translate-y-n1:hover {
    --ld-ty: -4px;
    translate: var(--ld-tx, 0) var(--ld-ty, 0);
  }
  
  .ld-hover\:translate-y-n2:hover {
    --ld-ty: -8px;
    translate: var(--ld-tx, 0) var(--ld-ty, 0);
  }
  
  .ld-hover\:translate-y-0:hover {
    --ld-ty: 0;
    translate: var(--ld-tx, 0) var(--ld-ty, 0);
  }
  
  .ld-hover\:translate-x-1:hover {
    --ld-tx: 4px;
    translate: var(--ld-tx, 0) var(--ld-ty, 0);
  }
}

.ld-focus\:text-muted:focus {
  color: var(--ld-text-muted);
}

.ld-focus\:text-accent:focus {
  color: var(--ld-accent);
}

.ld-focus\:text-danger:focus {
  color: var(--ld-danger);
}

.ld-focus\:bg-surface:focus {
  background: var(--ld-surface);
}

.ld-focus\:bg-raised:focus {
  background: var(--ld-surface-raised);
}

.ld-focus\:bg-transparent:focus {
  background: transparent;
}

.ld-focus\:bg-accent:focus {
  background: var(--ld-accent);
}

.ld-focus\:bg-danger:focus {
  background: var(--ld-danger);
}

.ld-focus\:bg-success:focus {
  background: var(--ld-success);
}

.ld-focus\:bg-warning:focus {
  background: var(--ld-warning);
}

.ld-focus\:bg-info:focus {
  background: var(--ld-info);
}

.ld-focus\:opacity-0:focus {
  opacity: var(--ld-opacity-0);
}

.ld-focus\:opacity-25:focus {
  opacity: var(--ld-opacity-25);
}

.ld-focus\:opacity-50:focus {
  opacity: var(--ld-opacity-50);
}

.ld-focus\:opacity-75:focus {
  opacity: var(--ld-opacity-75);
}

.ld-focus\:opacity-100:focus {
  opacity: var(--ld-opacity-100);
}

.ld-focus\:shadow-none:focus {
  box-shadow: none;
}

.ld-focus\:shadow-soft-sm:focus {
  box-shadow: 0 1px 4px rgba(20, 23, 26, 0.10);
}

.ld-focus\:shadow-soft:focus {
  box-shadow: 0 4px 12px rgba(20, 23, 26, 0.14);
}

.ld-focus\:shadow-soft-lg:focus {
  box-shadow: 0 12px 32px rgba(20, 23, 26, 0.18);
}

.ld-focus\:shadow-up-sm:focus {
  box-shadow: 0 -1px 4px rgba(20, 23, 26, 0.10);
}

.ld-focus\:shadow-up:focus {
  box-shadow: 0 -4px 12px rgba(20, 23, 26, 0.14);
}

.ld-focus\:shadow-up-lg:focus {
  box-shadow: 0 -12px 32px rgba(20, 23, 26, 0.18);
}

.ld-focus\:underline:focus {
  text-decoration: underline;
}

.ld-focus\:no-underline:focus {
  text-decoration: none;
}

.ld-focus\:ring:focus {
  outline: 2px dashed var(--ld-focus-ring);
  outline-offset: 2px;
}

.ld-focus\:scale-95:focus {
  scale: 0.95;
}

.ld-focus\:scale-100:focus {
  scale: 1;
}

.ld-focus\:scale-105:focus {
  scale: 1.05;
}

.ld-focus\:scale-110:focus {
  scale: 1.1;
}

.ld-focus-visible\:bg-surface:focus-visible {
  background: var(--ld-surface);
}

.ld-focus-visible\:bg-raised:focus-visible {
  background: var(--ld-surface-raised);
}

.ld-focus-visible\:bg-transparent:focus-visible {
  background: transparent;
}

.ld-focus-visible\:bg-accent:focus-visible {
  background: var(--ld-accent);
}

.ld-focus-visible\:bg-danger:focus-visible {
  background: var(--ld-danger);
}

.ld-focus-visible\:bg-success:focus-visible {
  background: var(--ld-success);
}

.ld-focus-visible\:bg-warning:focus-visible {
  background: var(--ld-warning);
}

.ld-focus-visible\:bg-info:focus-visible {
  background: var(--ld-info);
}

.ld-focus-visible\:opacity-0:focus-visible {
  opacity: var(--ld-opacity-0);
}

.ld-focus-visible\:opacity-25:focus-visible {
  opacity: var(--ld-opacity-25);
}

.ld-focus-visible\:opacity-50:focus-visible {
  opacity: var(--ld-opacity-50);
}

.ld-focus-visible\:opacity-75:focus-visible {
  opacity: var(--ld-opacity-75);
}

.ld-focus-visible\:opacity-100:focus-visible {
  opacity: var(--ld-opacity-100);
}

.ld-focus-visible\:shadow-none:focus-visible {
  box-shadow: none;
}

.ld-focus-visible\:shadow-soft-sm:focus-visible {
  box-shadow: 0 1px 4px rgba(20, 23, 26, 0.10);
}

.ld-focus-visible\:shadow-soft:focus-visible {
  box-shadow: 0 4px 12px rgba(20, 23, 26, 0.14);
}

.ld-focus-visible\:shadow-soft-lg:focus-visible {
  box-shadow: 0 12px 32px rgba(20, 23, 26, 0.18);
}

.ld-focus-visible\:shadow-up-sm:focus-visible {
  box-shadow: 0 -1px 4px rgba(20, 23, 26, 0.10);
}

.ld-focus-visible\:shadow-up:focus-visible {
  box-shadow: 0 -4px 12px rgba(20, 23, 26, 0.14);
}

.ld-focus-visible\:shadow-up-lg:focus-visible {
  box-shadow: 0 -12px 32px rgba(20, 23, 26, 0.18);
}

.ld-focus-visible\:underline:focus-visible {
  text-decoration: underline;
}

.ld-focus-visible\:no-underline:focus-visible {
  text-decoration: none;
}

.ld-focus-visible\:ring:focus-visible {
  outline: 2px dashed var(--ld-focus-ring);
  outline-offset: 2px;
}

}