pathland-render-html 0.2.1

/* Pathland HTML base design — generated by `npm --prefix design run build`. */
/* Edit design/tokens/** or design/html/{reset,components}.css, not this file. */

/* ===== Preflight reset (vendored from Tailwind CSS, MIT — see THIRD_PARTY_NOTICES) ===== */
*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; }
::before, ::after { --tw-content: ''; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: var(--pl-font-sans); font-feature-settings: 'liga' 1, 'calt' 1; color-scheme: light dark; background-color: var(--pl-color-background); color: var(--pl-color-text-primary); }
body { margin: 0; line-height: inherit; }
hr { height: 0; color: inherit; border-top-width: 1px; }
abbr:where([title]) { text-decoration: underline dotted; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; } sup { top: -0.5em; }
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0; padding: 0; }
progress, video { font: inherit; color: inherit; }
button, select { text-transform: none; }
button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none; }
:-moz-focusring { outline: auto; }
:-moz-ui-invalid { box-shadow: none; }
progress { vertical-align: baseline; }
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
[type='search'] { -webkit-appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
summary { display: list-item; }
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; }
fieldset { margin: 0; padding: 0; }
legend { padding: 0; }
ol, ul, menu { list-style: none; margin: 0; padding: 0; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { opacity: 1; color: var(--pl-color-text-secondary); }
button, [role='button'] { cursor: pointer; }
:disabled { cursor: default; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
[hidden] { display: none; }

/* ===== Adjust body ===== */
body {
  display: flex;
  height: 100vh;
}

/* Generated by Style Dictionary from design/tokens. Do not edit. */

:root {
  --pl-border-width-thick: 2px;
  --pl-border-width-thin: 1px;
  --pl-button-accent: var(--pl-control-accent);
  --pl-button-background: var(--pl-control-background);
  --pl-button-background-hover: var(--pl-control-background-hover);
  --pl-button-border: var(--pl-control-border);
  --pl-button-border-width: var(--pl-control-border-width);
  --pl-button-focus-ring-color: var(--pl-control-accent);
  --pl-button-focus-ring-offset: var(--pl-control-focus-ring-offset);
  --pl-button-focus-ring-width: var(--pl-control-focus-ring-width);
  --pl-button-font-size: var(--pl-control-font-size);
  --pl-button-font-weight: var(--pl-control-font-weight);
  --pl-button-foreground: var(--pl-control-foreground);
  --pl-button-height: var(--pl-control-height);
  --pl-button-line-height: 1.25rem;
  --pl-button-padding-horizontal: var(--pl-control-padding-horizontal);
  --pl-button-padding-vertical: var(--pl-control-padding-vertical);
  --pl-button-radius: var(--pl-control-radius);
  --pl-button-transition-duration: var(--pl-control-transition-duration);
  --pl-color-accent: #2563eb;
  --pl-color-background: #ffffff;
  --pl-color-border: #e5e7eb;
  --pl-color-danger: #dc2626;
  --pl-color-info: #2563eb;
  --pl-color-primary: #2563eb;
  --pl-color-secondary: #4f46e5;
  --pl-color-separator: #e5e7eb;
  --pl-color-success: #16a34a;
  --pl-color-surface: #ffffff;
  --pl-color-swatch-inset: var(--pl-control-swatch-inset);
  --pl-color-text-onPrimary: #ffffff;
  --pl-color-text-primary: #111827;
  --pl-color-text-secondary: #6b7280;
  --pl-color-warning: #d97706;
  --pl-control-accent: #2563eb;
  --pl-control-background: #ffffff;
  --pl-control-background-hover: #f9fafb;
  --pl-control-border: #d1d5db;
  --pl-control-border-width: 1px;
  --pl-control-focus-ring-inset: -2px;
  --pl-control-focus-ring-offset: 2px;
  --pl-control-focus-ring-width: 2px;
  --pl-control-font-size: 0.875rem;
  --pl-control-font-weight: 600;
  --pl-control-foreground: #111827;
  --pl-control-height: 2.25rem;
  --pl-control-icon-offset: -0.125em;
  --pl-control-icon-size: 1em;
  --pl-control-line-height: 1.5rem;
  --pl-control-padding-horizontal: 0.75rem;
  --pl-control-padding-vertical: 0.375rem;
  --pl-control-radius: 0.375rem;
  --pl-control-swatch-inset: 2px;
  --pl-control-thumb: #ffffff;
  --pl-control-transition-duration: 120ms;
  --pl-elevation-high-blur: 12px;
  --pl-elevation-high-color: rgb(0 0 0 / 0.15);
  --pl-elevation-high-radius: 0px;
  --pl-elevation-high-x: 0px;
  --pl-elevation-high-y: 4px;
  --pl-elevation-low-blur: 2px;
  --pl-elevation-low-color: rgb(0 0 0 / 0.05);
  --pl-elevation-low-radius: 0px;
  --pl-elevation-low-x: 0px;
  --pl-elevation-low-y: 1px;
  --pl-font-body-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  --pl-font-body-size: 16px;
  --pl-font-body-weight: 400;
  --pl-font-sans: var(--pl-font-body-family);
  --pl-gauge-fill: var(--pl-color-primary);
  --pl-gauge-height: 0.625rem;
  --pl-gauge-radius: 9999px;
  --pl-gauge-track: #e5e7eb;
  --pl-gauge-transition-duration: 150ms;
  --pl-icon-offset: var(--pl-control-icon-offset);
  --pl-icon-size: var(--pl-control-icon-size);
  --pl-input-background: #ffffff;
  --pl-input-border: #d1d5db;
  --pl-input-focus: #4f46e5;
  --pl-input-focus-ring-offset: var(--pl-control-focus-ring-inset);
  --pl-input-focus-ring-width: var(--pl-control-focus-ring-width);
  --pl-input-font-size: 1rem;
  --pl-input-foreground: var(--pl-control-foreground);
  --pl-input-padding-horizontal: var(--pl-control-padding-horizontal);
  --pl-input-padding-vertical: var(--pl-control-padding-vertical);
  --pl-input-placeholder: #9ca3af;
  --pl-input-radius: var(--pl-control-radius);
  --pl-input-swatch-inset: var(--pl-control-swatch-inset);
  --pl-label-font-size: 1rem;
  --pl-label-foreground: var(--pl-color-text-primary);
  --pl-menu-background: var(--pl-color-surface);
  --pl-menu-border: var(--pl-color-border);
  --pl-menu-border-width: var(--pl-control-border-width);
  --pl-menu-foreground: var(--pl-color-text-primary);
  --pl-menu-min-width: 10rem;
  --pl-menu-radius: var(--pl-radius-md);
  --pl-menu-z-index: 20;
  --pl-opacity-disabled: 0.5;
  --pl-picker-accent: var(--pl-control-accent);
  --pl-picker-background: var(--pl-color-surface);
  --pl-picker-border: var(--pl-color-border);
  --pl-picker-radius: var(--pl-radius-sm);
  --pl-progress-fill: var(--pl-color-primary);
  --pl-progress-height: 0.625rem;
  --pl-progress-radius: 9999px;
  --pl-progress-track: #e5e7eb;
  --pl-radius-full: 9999px;
  --pl-radius-lg: 0.5rem;
  --pl-radius-md: 0.375rem;
  --pl-radius-sm: 0.375rem;
  --pl-radius-xl: 0.75rem;
  --pl-radius-xs: 0.125rem;
  --pl-size-control-lg: 2.75rem;
  --pl-size-control-md: 2.25rem;
  --pl-size-control-sm: 2rem;
  --pl-size-control-xl: 3.25rem;
  --pl-size-control-xs: 1.5rem;
  --pl-slider-accent: var(--pl-control-accent);
  --pl-slider-focus-ring-offset: var(--pl-control-focus-ring-offset);
  --pl-slider-focus-ring-width: var(--pl-control-focus-ring-width);
  --pl-slider-gap: 0.625rem;
  --pl-slider-height: 1.25rem;
  --pl-slider-thumb: var(--pl-control-thumb);
  --pl-slider-thumb-border-width: 1px;
  --pl-slider-thumb-offset: -0.3125rem;
  --pl-slider-thumb-size: 1rem;
  --pl-slider-track: #e5e7eb;
  --pl-slider-track-height: 0.375rem;
  --pl-slider-track-radius: 9999px;
  --pl-space-base: 4px;
  --pl-spinner-border-width: 3px;
  --pl-spinner-duration: 0.8s;
  --pl-spinner-size: 1.25rem;
  --pl-stepper-accent: var(--pl-control-accent);
  --pl-stepper-background: var(--pl-color-surface);
  --pl-stepper-border: var(--pl-color-border);
  --pl-stepper-border-width: var(--pl-control-border-width);
  --pl-stepper-button-size: 1.75rem;
  --pl-stepper-gap: 0.5rem;
  --pl-stepper-radius: var(--pl-radius-sm);
  --pl-toggle-accent: var(--pl-control-accent);
  --pl-toggle-checkbox-size: 1rem;
  --pl-toggle-focus-ring-offset: var(--pl-control-focus-ring-offset);
  --pl-toggle-focus-ring-width: var(--pl-control-focus-ring-width);
  --pl-toggle-gap: 0.5rem;
  --pl-toggle-switch-height: 1.5rem;
  --pl-toggle-switch-radius: 9999px;
  --pl-toggle-switch-width: 2.75rem;
  --pl-toggle-thumb: var(--pl-control-thumb);
  --pl-toggle-thumb-offset: 0.125rem;
  --pl-toggle-thumb-size: 1.25rem;
  --pl-toggle-thumb-travel: 1.375rem;
  --pl-toggle-track-off: var(--pl-control-border);
  --pl-toggle-track-on: var(--pl-control-accent);
  --pl-toggle-transition-duration: 150ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-pathland-scheme]) {
    --pl-border-width-thick: 2px;
    --pl-border-width-thin: 1px;
    --pl-button-accent: var(--pl-control-accent);
    --pl-button-background: var(--pl-control-background);
    --pl-button-background-hover: var(--pl-control-background-hover);
    --pl-button-border: rgb(255 255 255 / 0.1);
    --pl-button-border-width: var(--pl-control-border-width);
    --pl-button-focus-ring-color: var(--pl-control-accent);
    --pl-button-focus-ring-offset: var(--pl-control-focus-ring-offset);
    --pl-button-focus-ring-width: var(--pl-control-focus-ring-width);
    --pl-button-font-size: var(--pl-control-font-size);
    --pl-button-font-weight: var(--pl-control-font-weight);
    --pl-button-foreground: #ffffff;
    --pl-button-height: var(--pl-control-height);
    --pl-button-line-height: 1.25rem;
    --pl-button-padding-horizontal: var(--pl-control-padding-horizontal);
    --pl-button-padding-vertical: var(--pl-control-padding-vertical);
    --pl-button-radius: var(--pl-control-radius);
    --pl-button-transition-duration: var(--pl-control-transition-duration);
    --pl-color-accent: #60a5fa;
    --pl-color-background: #0f172a;
    --pl-color-border: #374151;
    --pl-color-danger: #f87171;
    --pl-color-info: #60a5fa;
    --pl-color-primary: #60a5fa;
    --pl-color-secondary: #818cf8;
    --pl-color-separator: #374151;
    --pl-color-success: #4ade80;
    --pl-color-surface: #111827;
    --pl-color-swatch-inset: var(--pl-control-swatch-inset);
    --pl-color-text-onPrimary: #0f172a;
    --pl-color-text-primary: #f9fafb;
    --pl-color-text-secondary: #9ca3af;
    --pl-color-warning: #fbbf24;
    --pl-control-accent: #60a5fa;
    --pl-control-background: rgb(255 255 255 / 0.1);
    --pl-control-background-hover: rgb(255 255 255 / 0.2);
    --pl-control-border: rgb(255 255 255 / 0.15);
    --pl-control-border-width: 1px;
    --pl-control-focus-ring-inset: -2px;
    --pl-control-focus-ring-offset: 2px;
    --pl-control-focus-ring-width: 2px;
    --pl-control-font-size: 0.875rem;
    --pl-control-font-weight: 600;
    --pl-control-foreground: #f9fafb;
    --pl-control-height: 2.25rem;
    --pl-control-icon-offset: -0.125em;
    --pl-control-icon-size: 1em;
    --pl-control-line-height: 1.5rem;
    --pl-control-padding-horizontal: 0.75rem;
    --pl-control-padding-vertical: 0.375rem;
    --pl-control-radius: 0.375rem;
    --pl-control-swatch-inset: 2px;
    --pl-control-thumb: #f9fafb;
    --pl-control-transition-duration: 120ms;
    --pl-elevation-high-blur: 12px;
    --pl-elevation-high-color: rgb(0 0 0 / 0.5);
    --pl-elevation-high-radius: 0px;
    --pl-elevation-high-x: 0px;
    --pl-elevation-high-y: 4px;
    --pl-elevation-low-blur: 2px;
    --pl-elevation-low-color: rgb(0 0 0 / 0.35);
    --pl-elevation-low-radius: 0px;
    --pl-elevation-low-x: 0px;
    --pl-elevation-low-y: 1px;
    --pl-font-body-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
    --pl-font-body-size: 16px;
    --pl-font-body-weight: 400;
    --pl-font-sans: var(--pl-font-body-family);
    --pl-gauge-fill: var(--pl-color-primary);
    --pl-gauge-height: 0.625rem;
    --pl-gauge-radius: 9999px;
    --pl-gauge-track: rgb(255 255 255 / 0.15);
    --pl-gauge-transition-duration: 150ms;
    --pl-icon-offset: var(--pl-control-icon-offset);
    --pl-icon-size: var(--pl-control-icon-size);
    --pl-input-background: rgb(255 255 255 / 0.05);
    --pl-input-border: rgb(255 255 255 / 0.1);
    --pl-input-focus: #6366f1;
    --pl-input-focus-ring-offset: var(--pl-control-focus-ring-inset);
    --pl-input-focus-ring-width: var(--pl-control-focus-ring-width);
    --pl-input-font-size: 1rem;
    --pl-input-foreground: #ffffff;
    --pl-input-padding-horizontal: var(--pl-control-padding-horizontal);
    --pl-input-padding-vertical: var(--pl-control-padding-vertical);
    --pl-input-placeholder: #6b7280;
    --pl-input-radius: var(--pl-control-radius);
    --pl-input-swatch-inset: var(--pl-control-swatch-inset);
    --pl-label-font-size: 1rem;
    --pl-label-foreground: var(--pl-color-text-primary);
    --pl-menu-background: var(--pl-color-surface);
    --pl-menu-border: var(--pl-color-border);
    --pl-menu-border-width: var(--pl-control-border-width);
    --pl-menu-foreground: var(--pl-color-text-primary);
    --pl-menu-min-width: 10rem;
    --pl-menu-radius: var(--pl-radius-md);
    --pl-menu-z-index: 20;
    --pl-opacity-disabled: 0.5;
    --pl-picker-accent: var(--pl-control-accent);
    --pl-picker-background: var(--pl-color-surface);
    --pl-picker-border: var(--pl-color-border);
    --pl-picker-radius: var(--pl-radius-sm);
    --pl-progress-fill: var(--pl-color-primary);
    --pl-progress-height: 0.625rem;
    --pl-progress-radius: 9999px;
    --pl-progress-track: rgb(255 255 255 / 0.15);
    --pl-radius-full: 9999px;
    --pl-radius-lg: 0.5rem;
    --pl-radius-md: 0.375rem;
    --pl-radius-sm: 0.375rem;
    --pl-radius-xl: 0.75rem;
    --pl-radius-xs: 0.125rem;
    --pl-size-control-lg: 2.75rem;
    --pl-size-control-md: 2.25rem;
    --pl-size-control-sm: 2rem;
    --pl-size-control-xl: 3.25rem;
    --pl-size-control-xs: 1.5rem;
    --pl-slider-accent: var(--pl-control-accent);
    --pl-slider-focus-ring-offset: var(--pl-control-focus-ring-offset);
    --pl-slider-focus-ring-width: var(--pl-control-focus-ring-width);
    --pl-slider-gap: 0.625rem;
    --pl-slider-height: 1.25rem;
    --pl-slider-thumb: var(--pl-control-thumb);
    --pl-slider-thumb-border-width: 1px;
    --pl-slider-thumb-offset: -0.3125rem;
    --pl-slider-thumb-size: 1rem;
    --pl-slider-track: rgb(255 255 255 / 0.15);
    --pl-slider-track-height: 0.375rem;
    --pl-slider-track-radius: 9999px;
    --pl-space-base: 4px;
    --pl-spinner-border-width: 3px;
    --pl-spinner-duration: 0.8s;
    --pl-spinner-size: 1.25rem;
    --pl-stepper-accent: var(--pl-control-accent);
    --pl-stepper-background: var(--pl-color-surface);
    --pl-stepper-border: var(--pl-color-border);
    --pl-stepper-border-width: var(--pl-control-border-width);
    --pl-stepper-button-size: 1.75rem;
    --pl-stepper-gap: 0.5rem;
    --pl-stepper-radius: var(--pl-radius-sm);
    --pl-toggle-accent: var(--pl-control-accent);
    --pl-toggle-checkbox-size: 1rem;
    --pl-toggle-focus-ring-offset: var(--pl-control-focus-ring-offset);
    --pl-toggle-focus-ring-width: var(--pl-control-focus-ring-width);
    --pl-toggle-gap: 0.5rem;
    --pl-toggle-switch-height: 1.5rem;
    --pl-toggle-switch-radius: 9999px;
    --pl-toggle-switch-width: 2.75rem;
    --pl-toggle-thumb: var(--pl-control-thumb);
    --pl-toggle-thumb-offset: 0.125rem;
    --pl-toggle-thumb-size: 1.25rem;
    --pl-toggle-thumb-travel: 1.375rem;
    --pl-toggle-track-off: var(--pl-control-border);
    --pl-toggle-track-on: var(--pl-control-accent);
    --pl-toggle-transition-duration: 150ms;
  }
}

:root[data-pathland-scheme='dark'] {
  color-scheme: dark;
  --pl-border-width-thick: 2px;
  --pl-border-width-thin: 1px;
  --pl-button-accent: var(--pl-control-accent);
  --pl-button-background: var(--pl-control-background);
  --pl-button-background-hover: var(--pl-control-background-hover);
  --pl-button-border: rgb(255 255 255 / 0.1);
  --pl-button-border-width: var(--pl-control-border-width);
  --pl-button-focus-ring-color: var(--pl-control-accent);
  --pl-button-focus-ring-offset: var(--pl-control-focus-ring-offset);
  --pl-button-focus-ring-width: var(--pl-control-focus-ring-width);
  --pl-button-font-size: var(--pl-control-font-size);
  --pl-button-font-weight: var(--pl-control-font-weight);
  --pl-button-foreground: #ffffff;
  --pl-button-height: var(--pl-control-height);
  --pl-button-line-height: 1.25rem;
  --pl-button-padding-horizontal: var(--pl-control-padding-horizontal);
  --pl-button-padding-vertical: var(--pl-control-padding-vertical);
  --pl-button-radius: var(--pl-control-radius);
  --pl-button-transition-duration: var(--pl-control-transition-duration);
  --pl-color-accent: #60a5fa;
  --pl-color-background: #0f172a;
  --pl-color-border: #374151;
  --pl-color-danger: #f87171;
  --pl-color-info: #60a5fa;
  --pl-color-primary: #60a5fa;
  --pl-color-secondary: #818cf8;
  --pl-color-separator: #374151;
  --pl-color-success: #4ade80;
  --pl-color-surface: #111827;
  --pl-color-swatch-inset: var(--pl-control-swatch-inset);
  --pl-color-text-onPrimary: #0f172a;
  --pl-color-text-primary: #f9fafb;
  --pl-color-text-secondary: #9ca3af;
  --pl-color-warning: #fbbf24;
  --pl-control-accent: #60a5fa;
  --pl-control-background: rgb(255 255 255 / 0.1);
  --pl-control-background-hover: rgb(255 255 255 / 0.2);
  --pl-control-border: rgb(255 255 255 / 0.15);
  --pl-control-border-width: 1px;
  --pl-control-focus-ring-inset: -2px;
  --pl-control-focus-ring-offset: 2px;
  --pl-control-focus-ring-width: 2px;
  --pl-control-font-size: 0.875rem;
  --pl-control-font-weight: 600;
  --pl-control-foreground: #f9fafb;
  --pl-control-height: 2.25rem;
  --pl-control-icon-offset: -0.125em;
  --pl-control-icon-size: 1em;
  --pl-control-line-height: 1.5rem;
  --pl-control-padding-horizontal: 0.75rem;
  --pl-control-padding-vertical: 0.375rem;
  --pl-control-radius: 0.375rem;
  --pl-control-swatch-inset: 2px;
  --pl-control-thumb: #f9fafb;
  --pl-control-transition-duration: 120ms;
  --pl-elevation-high-blur: 12px;
  --pl-elevation-high-color: rgb(0 0 0 / 0.5);
  --pl-elevation-high-radius: 0px;
  --pl-elevation-high-x: 0px;
  --pl-elevation-high-y: 4px;
  --pl-elevation-low-blur: 2px;
  --pl-elevation-low-color: rgb(0 0 0 / 0.35);
  --pl-elevation-low-radius: 0px;
  --pl-elevation-low-x: 0px;
  --pl-elevation-low-y: 1px;
  --pl-font-body-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  --pl-font-body-size: 16px;
  --pl-font-body-weight: 400;
  --pl-font-sans: var(--pl-font-body-family);
  --pl-gauge-fill: var(--pl-color-primary);
  --pl-gauge-height: 0.625rem;
  --pl-gauge-radius: 9999px;
  --pl-gauge-track: rgb(255 255 255 / 0.15);
  --pl-gauge-transition-duration: 150ms;
  --pl-icon-offset: var(--pl-control-icon-offset);
  --pl-icon-size: var(--pl-control-icon-size);
  --pl-input-background: rgb(255 255 255 / 0.05);
  --pl-input-border: rgb(255 255 255 / 0.1);
  --pl-input-focus: #6366f1;
  --pl-input-focus-ring-offset: var(--pl-control-focus-ring-inset);
  --pl-input-focus-ring-width: var(--pl-control-focus-ring-width);
  --pl-input-font-size: 1rem;
  --pl-input-foreground: #ffffff;
  --pl-input-padding-horizontal: var(--pl-control-padding-horizontal);
  --pl-input-padding-vertical: var(--pl-control-padding-vertical);
  --pl-input-placeholder: #6b7280;
  --pl-input-radius: var(--pl-control-radius);
  --pl-input-swatch-inset: var(--pl-control-swatch-inset);
  --pl-label-font-size: 1rem;
  --pl-label-foreground: var(--pl-color-text-primary);
  --pl-menu-background: var(--pl-color-surface);
  --pl-menu-border: var(--pl-color-border);
  --pl-menu-border-width: var(--pl-control-border-width);
  --pl-menu-foreground: var(--pl-color-text-primary);
  --pl-menu-min-width: 10rem;
  --pl-menu-radius: var(--pl-radius-md);
  --pl-menu-z-index: 20;
  --pl-opacity-disabled: 0.5;
  --pl-picker-accent: var(--pl-control-accent);
  --pl-picker-background: var(--pl-color-surface);
  --pl-picker-border: var(--pl-color-border);
  --pl-picker-radius: var(--pl-radius-sm);
  --pl-progress-fill: var(--pl-color-primary);
  --pl-progress-height: 0.625rem;
  --pl-progress-radius: 9999px;
  --pl-progress-track: rgb(255 255 255 / 0.15);
  --pl-radius-full: 9999px;
  --pl-radius-lg: 0.5rem;
  --pl-radius-md: 0.375rem;
  --pl-radius-sm: 0.375rem;
  --pl-radius-xl: 0.75rem;
  --pl-radius-xs: 0.125rem;
  --pl-size-control-lg: 2.75rem;
  --pl-size-control-md: 2.25rem;
  --pl-size-control-sm: 2rem;
  --pl-size-control-xl: 3.25rem;
  --pl-size-control-xs: 1.5rem;
  --pl-slider-accent: var(--pl-control-accent);
  --pl-slider-focus-ring-offset: var(--pl-control-focus-ring-offset);
  --pl-slider-focus-ring-width: var(--pl-control-focus-ring-width);
  --pl-slider-gap: 0.625rem;
  --pl-slider-height: 1.25rem;
  --pl-slider-thumb: var(--pl-control-thumb);
  --pl-slider-thumb-border-width: 1px;
  --pl-slider-thumb-offset: -0.3125rem;
  --pl-slider-thumb-size: 1rem;
  --pl-slider-track: rgb(255 255 255 / 0.15);
  --pl-slider-track-height: 0.375rem;
  --pl-slider-track-radius: 9999px;
  --pl-space-base: 4px;
  --pl-spinner-border-width: 3px;
  --pl-spinner-duration: 0.8s;
  --pl-spinner-size: 1.25rem;
  --pl-stepper-accent: var(--pl-control-accent);
  --pl-stepper-background: var(--pl-color-surface);
  --pl-stepper-border: var(--pl-color-border);
  --pl-stepper-border-width: var(--pl-control-border-width);
  --pl-stepper-button-size: 1.75rem;
  --pl-stepper-gap: 0.5rem;
  --pl-stepper-radius: var(--pl-radius-sm);
  --pl-toggle-accent: var(--pl-control-accent);
  --pl-toggle-checkbox-size: 1rem;
  --pl-toggle-focus-ring-offset: var(--pl-control-focus-ring-offset);
  --pl-toggle-focus-ring-width: var(--pl-control-focus-ring-width);
  --pl-toggle-gap: 0.5rem;
  --pl-toggle-switch-height: 1.5rem;
  --pl-toggle-switch-radius: 9999px;
  --pl-toggle-switch-width: 2.75rem;
  --pl-toggle-thumb: var(--pl-control-thumb);
  --pl-toggle-thumb-offset: 0.125rem;
  --pl-toggle-thumb-size: 1.25rem;
  --pl-toggle-thumb-travel: 1.375rem;
  --pl-toggle-track-off: var(--pl-control-border);
  --pl-toggle-track-on: var(--pl-control-accent);
  --pl-toggle-transition-duration: 150ms;
}

:root[data-pathland-scheme='light'] {
  color-scheme: light;
}

/* Forced-dark values: explicit `dark.` references resolve these regardless of scheme. */
:root {
  --pl-dark-border-width-thick: 2px;
  --pl-dark-border-width-thin: 1px;
  --pl-dark-button-accent: var(--pl-dark-control-accent);
  --pl-dark-button-background: var(--pl-dark-control-background);
  --pl-dark-button-background-hover: var(--pl-dark-control-background-hover);
  --pl-dark-button-border: rgb(255 255 255 / 0.1);
  --pl-dark-button-border-width: var(--pl-dark-control-border-width);
  --pl-dark-button-focus-ring-color: var(--pl-dark-control-accent);
  --pl-dark-button-focus-ring-offset: var(--pl-dark-control-focus-ring-offset);
  --pl-dark-button-focus-ring-width: var(--pl-dark-control-focus-ring-width);
  --pl-dark-button-font-size: var(--pl-dark-control-font-size);
  --pl-dark-button-font-weight: var(--pl-dark-control-font-weight);
  --pl-dark-button-foreground: #ffffff;
  --pl-dark-button-height: var(--pl-dark-control-height);
  --pl-dark-button-line-height: 1.25rem;
  --pl-dark-button-padding-horizontal: var(--pl-dark-control-padding-horizontal);
  --pl-dark-button-padding-vertical: var(--pl-dark-control-padding-vertical);
  --pl-dark-button-radius: var(--pl-dark-control-radius);
  --pl-dark-button-transition-duration: var(--pl-dark-control-transition-duration);
  --pl-dark-color-accent: #60a5fa;
  --pl-dark-color-background: #0f172a;
  --pl-dark-color-border: #374151;
  --pl-dark-color-danger: #f87171;
  --pl-dark-color-info: #60a5fa;
  --pl-dark-color-primary: #60a5fa;
  --pl-dark-color-secondary: #818cf8;
  --pl-dark-color-separator: #374151;
  --pl-dark-color-success: #4ade80;
  --pl-dark-color-surface: #111827;
  --pl-dark-color-swatch-inset: var(--pl-dark-control-swatch-inset);
  --pl-dark-color-text-onPrimary: #0f172a;
  --pl-dark-color-text-primary: #f9fafb;
  --pl-dark-color-text-secondary: #9ca3af;
  --pl-dark-color-warning: #fbbf24;
  --pl-dark-control-accent: #60a5fa;
  --pl-dark-control-background: rgb(255 255 255 / 0.1);
  --pl-dark-control-background-hover: rgb(255 255 255 / 0.2);
  --pl-dark-control-border: rgb(255 255 255 / 0.15);
  --pl-dark-control-border-width: 1px;
  --pl-dark-control-focus-ring-inset: -2px;
  --pl-dark-control-focus-ring-offset: 2px;
  --pl-dark-control-focus-ring-width: 2px;
  --pl-dark-control-font-size: 0.875rem;
  --pl-dark-control-font-weight: 600;
  --pl-dark-control-foreground: #f9fafb;
  --pl-dark-control-height: 2.25rem;
  --pl-dark-control-icon-offset: -0.125em;
  --pl-dark-control-icon-size: 1em;
  --pl-dark-control-line-height: 1.5rem;
  --pl-dark-control-padding-horizontal: 0.75rem;
  --pl-dark-control-padding-vertical: 0.375rem;
  --pl-dark-control-radius: 0.375rem;
  --pl-dark-control-swatch-inset: 2px;
  --pl-dark-control-thumb: #f9fafb;
  --pl-dark-control-transition-duration: 120ms;
  --pl-dark-elevation-high-blur: 12px;
  --pl-dark-elevation-high-color: rgb(0 0 0 / 0.5);
  --pl-dark-elevation-high-radius: 0px;
  --pl-dark-elevation-high-x: 0px;
  --pl-dark-elevation-high-y: 4px;
  --pl-dark-elevation-low-blur: 2px;
  --pl-dark-elevation-low-color: rgb(0 0 0 / 0.35);
  --pl-dark-elevation-low-radius: 0px;
  --pl-dark-elevation-low-x: 0px;
  --pl-dark-elevation-low-y: 1px;
  --pl-dark-font-body-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  --pl-dark-font-body-size: 16px;
  --pl-dark-font-body-weight: 400;
  --pl-dark-font-sans: var(--pl-dark-font-body-family);
  --pl-dark-gauge-fill: var(--pl-dark-color-primary);
  --pl-dark-gauge-height: 0.625rem;
  --pl-dark-gauge-radius: 9999px;
  --pl-dark-gauge-track: rgb(255 255 255 / 0.15);
  --pl-dark-gauge-transition-duration: 150ms;
  --pl-dark-icon-offset: var(--pl-dark-control-icon-offset);
  --pl-dark-icon-size: var(--pl-dark-control-icon-size);
  --pl-dark-input-background: rgb(255 255 255 / 0.05);
  --pl-dark-input-border: rgb(255 255 255 / 0.1);
  --pl-dark-input-focus: #6366f1;
  --pl-dark-input-focus-ring-offset: var(--pl-dark-control-focus-ring-inset);
  --pl-dark-input-focus-ring-width: var(--pl-dark-control-focus-ring-width);
  --pl-dark-input-font-size: 1rem;
  --pl-dark-input-foreground: #ffffff;
  --pl-dark-input-padding-horizontal: var(--pl-dark-control-padding-horizontal);
  --pl-dark-input-padding-vertical: var(--pl-dark-control-padding-vertical);
  --pl-dark-input-placeholder: #6b7280;
  --pl-dark-input-radius: var(--pl-dark-control-radius);
  --pl-dark-input-swatch-inset: var(--pl-dark-control-swatch-inset);
  --pl-dark-label-font-size: 1rem;
  --pl-dark-label-foreground: var(--pl-dark-color-text-primary);
  --pl-dark-menu-background: var(--pl-dark-color-surface);
  --pl-dark-menu-border: var(--pl-dark-color-border);
  --pl-dark-menu-border-width: var(--pl-dark-control-border-width);
  --pl-dark-menu-foreground: var(--pl-dark-color-text-primary);
  --pl-dark-menu-min-width: 10rem;
  --pl-dark-menu-radius: var(--pl-dark-radius-md);
  --pl-dark-menu-z-index: 20;
  --pl-dark-opacity-disabled: 0.5;
  --pl-dark-picker-accent: var(--pl-dark-control-accent);
  --pl-dark-picker-background: var(--pl-dark-color-surface);
  --pl-dark-picker-border: var(--pl-dark-color-border);
  --pl-dark-picker-radius: var(--pl-dark-radius-sm);
  --pl-dark-progress-fill: var(--pl-dark-color-primary);
  --pl-dark-progress-height: 0.625rem;
  --pl-dark-progress-radius: 9999px;
  --pl-dark-progress-track: rgb(255 255 255 / 0.15);
  --pl-dark-radius-full: 9999px;
  --pl-dark-radius-lg: 0.5rem;
  --pl-dark-radius-md: 0.375rem;
  --pl-dark-radius-sm: 0.375rem;
  --pl-dark-radius-xl: 0.75rem;
  --pl-dark-radius-xs: 0.125rem;
  --pl-dark-size-control-lg: 2.75rem;
  --pl-dark-size-control-md: 2.25rem;
  --pl-dark-size-control-sm: 2rem;
  --pl-dark-size-control-xl: 3.25rem;
  --pl-dark-size-control-xs: 1.5rem;
  --pl-dark-slider-accent: var(--pl-dark-control-accent);
  --pl-dark-slider-focus-ring-offset: var(--pl-dark-control-focus-ring-offset);
  --pl-dark-slider-focus-ring-width: var(--pl-dark-control-focus-ring-width);
  --pl-dark-slider-gap: 0.625rem;
  --pl-dark-slider-height: 1.25rem;
  --pl-dark-slider-thumb: var(--pl-dark-control-thumb);
  --pl-dark-slider-thumb-border-width: 1px;
  --pl-dark-slider-thumb-offset: -0.3125rem;
  --pl-dark-slider-thumb-size: 1rem;
  --pl-dark-slider-track: rgb(255 255 255 / 0.15);
  --pl-dark-slider-track-height: 0.375rem;
  --pl-dark-slider-track-radius: 9999px;
  --pl-dark-space-base: 4px;
  --pl-dark-spinner-border-width: 3px;
  --pl-dark-spinner-duration: 0.8s;
  --pl-dark-spinner-size: 1.25rem;
  --pl-dark-stepper-accent: var(--pl-dark-control-accent);
  --pl-dark-stepper-background: var(--pl-dark-color-surface);
  --pl-dark-stepper-border: var(--pl-dark-color-border);
  --pl-dark-stepper-border-width: var(--pl-dark-control-border-width);
  --pl-dark-stepper-button-size: 1.75rem;
  --pl-dark-stepper-gap: 0.5rem;
  --pl-dark-stepper-radius: var(--pl-dark-radius-sm);
  --pl-dark-toggle-accent: var(--pl-dark-control-accent);
  --pl-dark-toggle-checkbox-size: 1rem;
  --pl-dark-toggle-focus-ring-offset: var(--pl-dark-control-focus-ring-offset);
  --pl-dark-toggle-focus-ring-width: var(--pl-dark-control-focus-ring-width);
  --pl-dark-toggle-gap: 0.5rem;
  --pl-dark-toggle-switch-height: 1.5rem;
  --pl-dark-toggle-switch-radius: 9999px;
  --pl-dark-toggle-switch-width: 2.75rem;
  --pl-dark-toggle-thumb: var(--pl-dark-control-thumb);
  --pl-dark-toggle-thumb-offset: 0.125rem;
  --pl-dark-toggle-thumb-size: 1.25rem;
  --pl-dark-toggle-thumb-travel: 1.375rem;
  --pl-dark-toggle-track-off: var(--pl-dark-control-border);
  --pl-dark-toggle-track-on: var(--pl-dark-control-accent);
  --pl-dark-toggle-transition-duration: 150ms;
}

/* ===== Buttons ===== */
.pathland-button {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--pl-button-radius);
  background-color: var(--pl-button-background);
  padding: var(--pl-button-padding-vertical) var(--pl-button-padding-horizontal);
  font-size: var(--pl-button-font-size); font-weight: var(--pl-button-font-weight); line-height: var(--pl-button-line-height);
  color: var(--pl-button-foreground);
  box-shadow: inset 0 0 0 var(--pl-button-border-width) var(--pl-button-border),
    var(--pl-elevation-low-x) var(--pl-elevation-low-y) var(--pl-elevation-low-blur) var(--pl-elevation-low-radius) var(--pl-elevation-low-color);
  transition: background-color var(--pl-button-transition-duration), box-shadow var(--pl-button-transition-duration);
}
.pathland-button:hover { background-color: var(--pl-button-background-hover); }
.pathland-button:focus-visible { outline: var(--pl-button-focus-ring-width) solid var(--pl-button-focus-ring-color); outline-offset: var(--pl-button-focus-ring-offset); }
.pathland-button:disabled { opacity: var(--pl-opacity-disabled); pointer-events: none; }
/* Semantic icons (ICON): the inline SVG is sized like text — `1em` follows the
   resolved font-size (FONT_SIZE on the node, else the inherited/default size)
   and `currentColor` follows COLOR. */
.pathland-icon {
  display: inline-block;
  width: var(--pl-icon-size); height: var(--pl-icon-size);
  min-width: var(--pl-icon-size); min-height: var(--pl-icon-size);
  vertical-align: var(--pl-icon-offset);
  flex: none;
}
.pathland-icon path, .pathland-icon circle, .pathland-icon rect, .pathland-icon line,
.pathland-icon polyline, .pathland-icon polygon {
  shape-rendering: geometricPrecision;
}

/* ===== Toggle switch / checkbox ===== */
.pathland-toggle { display: inline-flex; align-items: center; gap: var(--pl-toggle-gap); }
.pathland-toggle input[type='checkbox'] { accent-color: var(--pl-toggle-accent); width: var(--pl-toggle-checkbox-size); height: var(--pl-toggle-checkbox-size); }
.pathland-toggle input[role='switch'] {
  appearance: none; width: var(--pl-toggle-switch-width); height: var(--pl-toggle-switch-height); border-radius: var(--pl-toggle-switch-radius);
  background-color: var(--pl-toggle-track-off); cursor: pointer; position: relative;
  transition: background-color var(--pl-toggle-transition-duration); flex: none;
}
.pathland-toggle input[role='switch']:checked { background-color: var(--pl-toggle-track-on); }
.pathland-toggle input[role='switch']::after {
  content: ''; position: absolute; top: var(--pl-toggle-thumb-offset); left: var(--pl-toggle-thumb-offset);
  width: var(--pl-toggle-thumb-size); height: var(--pl-toggle-thumb-size); border-radius: var(--pl-toggle-switch-radius); background: var(--pl-toggle-thumb);
  transition: left var(--pl-toggle-transition-duration);
}
.pathland-toggle input[role='switch']:checked::after { left: var(--pl-toggle-thumb-travel); }
.pathland-toggle input[role='switch']:focus-visible { outline: var(--pl-toggle-focus-ring-width) solid var(--pl-toggle-accent); outline-offset: var(--pl-toggle-focus-ring-offset); }

/* ===== Slider =====
   A renderer-owned range: the native input stays for keyboard/pointer
   interaction and accessibility, but its track, fill, and thumb are drawn from
   design tokens (`slider.track`, `slider.accent`, `slider.thumb`). The fill
   custom property is set inline by SSR and kept in sync by the DOM client. */
.pathland-slider { display: inline-flex; align-items: center; gap: var(--pl-slider-gap); }
.pathland-slider input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  height: var(--pl-slider-height);
  margin: 0;
  background: transparent;
  cursor: pointer;
  accent-color: var(--pl-slider-accent);
  --pl-slider-fill: 0%;
}
.pathland-slider input[type='range']::-webkit-slider-runnable-track {
  height: var(--pl-slider-track-height);
  border-radius: var(--pl-slider-track-radius);
  background: linear-gradient(
    to right,
    var(--pl-slider-accent) 0%,
    var(--pl-slider-accent) var(--pl-slider-fill),
    var(--pl-slider-track) var(--pl-slider-fill),
    var(--pl-slider-track) 100%
  );
}
.pathland-slider input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--pl-slider-thumb-size);
  height: var(--pl-slider-thumb-size);
  margin-top: var(--pl-slider-thumb-offset);
  border: var(--pl-slider-thumb-border-width) solid var(--pl-slider-track);
  border-radius: var(--pl-slider-track-radius);
  background: var(--pl-slider-thumb);
  box-shadow: var(--pl-elevation-low-x) var(--pl-elevation-low-y)
    var(--pl-elevation-low-blur) var(--pl-elevation-low-radius)
    var(--pl-elevation-low-color);
}
.pathland-slider input[type='range']::-moz-range-track {
  height: var(--pl-slider-track-height);
  border-radius: var(--pl-slider-track-radius);
  background: var(--pl-slider-track);
}
.pathland-slider input[type='range']::-moz-range-progress {
  height: var(--pl-slider-track-height);
  border-radius: var(--pl-slider-track-radius);
  background: var(--pl-slider-accent);
}
.pathland-slider input[type='range']::-moz-range-thumb {
  width: var(--pl-slider-thumb-size);
  height: var(--pl-slider-thumb-size);
  border: var(--pl-slider-thumb-border-width) solid var(--pl-slider-track);
  border-radius: var(--pl-slider-track-radius);
  background: var(--pl-slider-thumb);
  box-shadow: var(--pl-elevation-low-x) var(--pl-elevation-low-y)
    var(--pl-elevation-low-blur) var(--pl-elevation-low-radius)
    var(--pl-elevation-low-color);
}
.pathland-slider input[type='range']:focus-visible {
  outline: var(--pl-slider-focus-ring-width) solid var(--pl-slider-accent);
  outline-offset: var(--pl-slider-focus-ring-offset);
  border-radius: var(--pl-slider-track-radius);
}
.pathland-slider input[type='range']:disabled {
  cursor: default;
  opacity: var(--pl-opacity-disabled);
}

/* ===== Media (custom AudioStyle/VideoStyle) ===== */
/* A media node with custom control children wraps a bare (control-less) media
   element; the element is the app-driven playback sink, so it stays hidden and
   only the custom control children are visible. Native media (no children)
   keep their own `controls` and are not wrapped. */
.pathland-media audio,
.pathland-media video { display: none; }

/* ===== Native controls (inherit Tailwind-derived preflight + tokens) ===== */
/* Every native form control shares the design-system surface: the Tailwind
   preflight supplies the font/color reset, these tokens supply the visual base.
   App-authored inline properties (WIDTH/HEIGHT/PADDING/COLOR/…) still win. */
.pathland-control,
.pathland-input {
  border-radius: var(--pl-input-radius);
  background-color: var(--pl-input-background);
  font-family: inherit;
  font-size: var(--pl-input-font-size);
  line-height: var(--pl-control-line-height);
  color: var(--pl-input-foreground);
  outline: var(--pl-control-border-width) solid var(--pl-input-border);
  outline-offset: calc(-1 * var(--pl-control-border-width));
  transition: outline-color var(--pl-control-transition-duration), box-shadow var(--pl-control-transition-duration);
  accent-color: var(--pl-control-accent);
  color-scheme: inherit;
}
.pathland-control {
  min-height: var(--pl-control-height);
  padding: var(--pl-control-padding-vertical) var(--pl-control-padding-horizontal);
}
.pathland-input {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--pl-input-padding-vertical) var(--pl-input-padding-horizontal);
}
.pathland-input::placeholder,
.pathland-control::placeholder { color: var(--pl-input-placeholder); }
.pathland-input:focus,
.pathland-control:focus {
  outline: var(--pl-input-focus-ring-width) solid var(--pl-input-focus);
  outline-offset: var(--pl-input-focus-ring-offset);
}
.pathland-control:disabled { opacity: var(--pl-opacity-disabled); }

/* PICKER: keep the native dropdown affordance; theme the field + options. */
.pathland-select { display: inline-block; cursor: pointer; }
.pathland-select option {
  background-color: var(--pl-input-background);
  color: var(--pl-input-foreground);
}

/* DATE_PICKER / COLOR_PICKER: the popup itself is UA-owned; the field surface,
   scheme, and picker highlights follow the design system. */
.pathland-date,
.pathland-color { display: inline-flex; align-items: center; }
.pathland-color { padding: var(--pl-control-padding-vertical); }
.pathland-color::-webkit-color-swatch-wrapper { padding: 0; }
.pathland-color::-webkit-color-swatch {
  border: 0;
  border-radius: calc(var(--pl-input-radius) - var(--pl-input-swatch-inset));
}

/* PROGRESS_VIEW: tokenized track/fill across engines. */
.pathland-progress {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: var(--pl-progress-height);
  border: 0;
  border-radius: var(--pl-progress-radius);
  overflow: hidden;
  background-color: var(--pl-progress-track);
  color: var(--pl-progress-fill);
  accent-color: var(--pl-progress-fill);
}
.pathland-progress::-webkit-progress-bar {
  background-color: var(--pl-progress-track);
  border-radius: var(--pl-progress-radius);
}
.pathland-progress::-webkit-progress-value {
  background-color: var(--pl-progress-fill);
  border-radius: var(--pl-progress-radius);
}
.pathland-progress::-moz-progress-bar {
  background-color: var(--pl-progress-fill);
  border-radius: var(--pl-progress-radius);
}

/* VIDEO: native controls are UA shadow DOM (best-effort scheme/accent only);
   app-driven media (`.pathland-media` + custom controls) is fully themeable. */
.pathland-video,
.pathland-media {
  max-width: 100%;
  background-color: var(--pl-color-surface);
  color: var(--pl-color-text-primary);
  border-radius: var(--pl-control-radius);
  accent-color: var(--pl-control-accent);
  color-scheme: inherit;
}

/* ===== Stepper ===== */
.pathland-stepper { display: inline-flex; align-items: center; gap: var(--pl-stepper-gap); }
.pathland-stepper button { width: var(--pl-stepper-button-size); height: var(--pl-stepper-button-size); border-radius: var(--pl-stepper-radius); border: var(--pl-stepper-border-width) solid var(--pl-stepper-border); background: var(--pl-stepper-background); color: var(--pl-stepper-accent); }

/* ===== Progress / gauge / spinner ===== */
.pathland-spinner {
  width: var(--pl-spinner-size); height: var(--pl-spinner-size); border: var(--pl-spinner-border-width) solid var(--pl-progress-track);
  border-top-color: var(--pl-progress-fill); border-radius: var(--pl-radius-full);
  animation: pathland-spin var(--pl-spinner-duration) linear infinite;
}
@keyframes pathland-spin { to { transform: rotate(360deg); } }
.pathland-gauge { display: block; height: var(--pl-gauge-height); width: 100%; background: var(--pl-gauge-track); border-radius: var(--pl-gauge-radius); overflow: hidden; }
.pathland-gauge > div { height: 100%; background: var(--pl-gauge-fill); transition: width var(--pl-gauge-transition-duration); }

/* ===== Menu (popover) ===== */
.pathland-menu { position: relative; display: inline-block; }
.pathland-menu-items {
  display: none; position: absolute; min-width: var(--pl-menu-min-width); background: var(--pl-menu-background);
  color: var(--pl-menu-foreground); border: var(--pl-menu-border-width) solid var(--pl-menu-border); border-radius: var(--pl-menu-radius);
  box-shadow: var(--pl-elevation-high-x) var(--pl-elevation-high-y) var(--pl-elevation-high-blur) var(--pl-elevation-high-radius) var(--pl-elevation-high-color);
  z-index: var(--pl-menu-z-index);
}
.pathland-menu:hover .pathland-menu-items { display: block; }