/* ../../storybook/src/tokens.css */
@font-face {
  font-family: "Switzer";
  src: url(fonts/Switzer-Variable.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url(fonts/Switzer-VariableItalic.woff2) format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url(fonts/JetBrainsMono-Variable.woff2) format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ranade";
  src: url(fonts/Ranade-Variable.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ranade";
  src: url(fonts/Ranade-VariableItalic.woff2) format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
:root {
  --n-0:#FFFFFF;
  --n-25:#FCFCFD;
  --n-50:#F8F9FB;
  --n-100:#F1F3F6;
  --n-200:#E3E6EB;
  --n-300:#CDD2DA;
  --n-400:#9DA5B1;
  --n-500:#707986;
  --n-600:#505866;
  --n-700:#363D48;
  --n-800:#252A32;
  --n-900:#181B20;
  --n-950:#0B0D10;
  --n-1000:#000000;
  --blue-50:#F0F5FF;
  --blue-100:#E0EAFF;
  --blue-200:#C2D5FF;
  --blue-300:#91B4FF;
  --blue-400:#5C8DFA;
  --blue-500:#3567EF;
  --blue-600:#1F50E1;
  --blue-700:#113EC9;
  --blue-800:#1235A3;
  --blue-900:#102F81;
  --blue-950:#031A61;
  --coral-50:#FFF2F1;
  --coral-100:#FFE1DE;
  --coral-200:#FFC8C3;
  --coral-300:#FFA29A;
  --coral-400:#FA6D62;
  --coral-500:#F04438;
  --coral-600:#D63027;
  --coral-700:#BC1C15;
  --coral-800:#991B16;
  --coral-900:#7F1D19;
  --coral-950:#450A08;
  --rust-50:#FFF7ED;
  --rust-100:#FFEBD5;
  --rust-200:#FFD4AA;
  --rust-300:#FFB66F;
  --rust-400:#F89951;
  --rust-500:#F17B34;
  --rust-600:#EA5E16;
  --rust-700:#C2470C;
  --rust-800:#9A3912;
  --rust-900:#7C3112;
  --rust-950:#431506;
  --aqua-50:#EDFCFC;
  --aqua-100:#D2F7F6;
  --aqua-200:#A9EEEC;
  --aqua-300:#72DEDD;
  --aqua-400:#3BC9C9;
  --aqua-500:#18B6B8;
  --aqua-600:#0E969B;
  --aqua-700:#10777C;
  --aqua-800:#125F64;
  --aqua-900:#134F53;
  --aqua-950:#052E32;
  --violet-50:#F7F3FF;
  --violet-100:#EEE7FF;
  --violet-200:#DED1FF;
  --violet-300:#C8AEFF;
  --violet-400:#AA82FF;
  --violet-500:#8B5CF6;
  --violet-600:#7044EC;
  --violet-700:#5B32D6;
  --violet-800:#4928AE;
  --violet-900:#3D248A;
  --violet-950:#241451;
  --gold-50:#FFFBEB;
  --gold-100:#FEF3C7;
  --gold-200:#FDE68A;
  --gold-300:#FCD34D;
  --gold-400:#FBBF24;
  --gold-500:#F59E0B;
  --gold-600:#D97706;
  --gold-700:#B45309;
  --gold-800:#92400E;
  --gold-900:#78350F;
  --gold-950:#451A03;
  --lime-50:#F8FEE7;
  --lime-100:#EEFCCB;
  --lime-200:#DDF99C;
  --lime-300:#C6F35F;
  --lime-400:#A8E936;
  --lime-500:#86D31C;
  --lime-600:#66AA12;
  --lime-700:#4F8113;
  --lime-800:#416616;
  --lime-900:#385618;
  --lime-950:#1B3007;
  --brand-red:#E2231A;
  --brand-orange:#FF8135;
  --destructive:#D92D20;
  --destructive-hover:#B42318;
  --destructive-active:#B51B14;
  --bg-canvas:var(--n-0);
  --bg-base:var(--n-0);
  --bg-raised:var(--n-0);
  --bg-sunken:var(--n-100);
  --bg-track:var(--n-100);
  --nav-hover-bg:var(--n-100);
  --border-default:var(--n-200);
  --border-strong:var(--n-300);
  --divider:var(--n-100);
  --text-primary:var(--n-950);
  --text-secondary:var(--n-600);
  --text-tertiary:var(--n-500);
  --text-disabled:var(--n-400);
  --text-inverse:var(--n-0);
  --link:var(--blue-700);
  --accent:var(--blue-700);
  --accent-hover:var(--blue-800);
  --accent-wash:var(--blue-50);
  --accent-wash-border:var(--blue-100);
  --border-subtle-line:rgba(16,24,40,.07);
  --ambient-wash:none;
  --scrollbar-thumb:var(--n-300);
  --selection-bg:var(--blue-100);
  --status-verified-bg:#E8F6EE;
  --status-verified-text:#0F7A42;
  --status-derived-bg:#EFF3FF;
  --status-derived-text:#2547B8;
  --status-proposed-bg:#FFF3E4;
  --status-proposed-text:#B4590A;
  --status-approval-bg:#FDEBEC;
  --status-approval-text:#B4231A;
  --status-legacy-bg:var(--n-100);
  --status-legacy-text:var(--text-tertiary);
  --badge-success-bg:#ECFDF3;
  --badge-success-text:#027A48;
  --badge-warning-bg:#FFFAEB;
  --badge-warning-text:#B54708;
  --badge-error-bg:#FEF3F2;
  --badge-error-text:#B42318;
  --badge-info-bg:#EFF8FF;
  --badge-info-text:#175CD3;
  --badge-neutral-bg:var(--n-100);
  --badge-neutral-text:var(--text-secondary);
  --badge-live-bg:#F8FEE7;
  --badge-live-border:#DDF99C;
  --badge-live-text:#385618;
  --badge-live-mono:#66AA12;
  --badge-live-dot:#C6F35F;
  --dodont-do-bg:#F3FAF6;
  --dodont-do-border:#D6ECDF;
  --dodont-do-text:var(--badge-success-text);
  --dodont-dont-bg:#FFF2F1;
  --dodont-dont-border:#FFC8C3;
  --dodont-dont-text:#BC1C15;
  --dodont-dont-mono:#BC1C15;
  --dodont-do-banner:#86D31C;
  --dodont-dont-banner:#F04438;
  --codeblock-bg:var(--n-800);
  --state-hover-bg:var(--n-100);
  --state-pressed-bg:var(--n-200);
  --radius-0:0px;
  --radius-2:2px;
  --radius-4:4px;
  --radius-6:6px;
  --radius-8:8px;
  --radius-12:12px;
  --radius-16:16px;
  --radius-20:20px;
  --radius-24:24px;
  --radius-32:32px;
  --radius-999:999px;
  --r-control:var(--radius-999);
  --r-control-sm:var(--radius-999);
  --r-float:var(--radius-12);
  --r-card:var(--radius-24);
  --r-button:var(--radius-999);
  --r-button-sm:var(--radius-999);
  --r-button-lg:var(--radius-999);
  --r-panel:var(--radius-20);
  --r-modal:var(--radius-20);
  --r-expressive:var(--radius-24);
  --r-chip:var(--radius-4);
  --r-pill:var(--radius-999);
  --ease-lift:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.32,.48,1);
  --sp-0:0px;
  --sp-1:2px;
  --sp-2:4px;
  --sp-3:6px;
  --sp-4:8px;
  --sp-5:12px;
  --sp-6:16px;
  --sp-7:20px;
  --sp-8:24px;
  --sp-9:32px;
  --sp-10:40px;
  --sp-11:48px;
  --sp-12:64px;
  --sp-13:80px;
  --sp-14:96px;
  --sp-56:56px;
  --sp-60:60px;
  --sp-130:130px;
  --space-chrome-gap:var(--sp-4);
  --space-control-inset-sm:var(--sp-4);
  --space-row-inset-sm:var(--sp-4);
  --space-label-gap:var(--sp-5);
  --space-card-stack:var(--sp-5);
  --space-inline-gap:var(--sp-5);
  --space-menu-row-inset:var(--sp-5);
  --space-control-inset:var(--sp-5);
  --space-surface-inset-sm:var(--sp-5);
  --space-diagram-label-inset:var(--sp-5);
  --space-empty-state-cta-gap:var(--sp-5);
  --space-dense-cell-inset:var(--sp-5);
  --space-block-gap:var(--sp-6);
  --space-surface-inset:var(--sp-6);
  --space-stack-gap:var(--sp-6);
  --space-surface-inset-lg:var(--sp-7);
  --space-section-break:var(--sp-7);
  --space-card-inset:var(--sp-8);
  --space-header-inset:var(--sp-8);
  --space-doc-section-gap:var(--sp-8);
  --space-empty-state-inset:var(--sp-9);
  --space-demo-stack-gap:var(--sp-9);
  --space-input-affix-clearance:var(--sp-10);
  --space-page-intro-gap:var(--sp-11);
  --space-page-gutter-top:var(--sp-56);
  --space-page-gutter-x:var(--sp-60);
  --hero-navw:var(--shell-nav-w);
  --hero-gutter:var(--space-page-gutter-x);
  --hero-gutter-top:var(--space-page-gutter-top);
  --space-page-gutter-bottom:var(--sp-56);
  --space-section-gap:var(--sp-60);
  --shadow-0:none;
  --shadow-1:0 1px 3px rgba(11,13,16,.08);
  --shadow-2:0 4px 12px rgba(11,13,16,.10);
  --shadow-3:0 8px 24px rgba(11,13,16,.12);
  --shadow-4:0 16px 40px rgba(11,13,16,.16);
  --shadow-ovl:0 24px 60px rgba(11,13,16,.24);
  --dur-fast:100ms;
  --dur-moderate:150ms;
  --dur-default:200ms;
  --dur-slow:300ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.7,0,.84,0);
  --data-viz-categorical-01:var(--blue-600);
  --data-viz-categorical-02:var(--aqua-500);
  --data-viz-categorical-03:var(--violet-600);
  --data-viz-categorical-04:var(--gold-500);
  --data-viz-categorical-05:var(--coral-600);
  --data-viz-categorical-06:var(--lime-500);
  --data-viz-categorical-07:var(--rust-500);
  --data-viz-sequential-blue-01:var(--blue-100);
  --data-viz-sequential-blue-02:var(--blue-200);
  --data-viz-sequential-blue-03:var(--blue-300);
  --data-viz-sequential-blue-04:var(--blue-400);
  --data-viz-sequential-blue-05:var(--blue-500);
  --data-viz-sequential-blue-06:var(--blue-600);
  --data-viz-sequential-blue-07:var(--blue-700);
  --data-viz-sequential-blue-08:var(--blue-800);
  --data-viz-sequential-blue-09:var(--blue-900);
  --data-viz-sequential-aqua-01:var(--aqua-100);
  --data-viz-sequential-aqua-02:var(--aqua-200);
  --data-viz-sequential-aqua-03:var(--aqua-300);
  --data-viz-sequential-aqua-04:var(--aqua-400);
  --data-viz-sequential-aqua-05:var(--aqua-500);
  --data-viz-sequential-aqua-06:var(--aqua-600);
  --data-viz-sequential-aqua-07:var(--aqua-700);
  --data-viz-sequential-aqua-08:var(--aqua-800);
  --data-viz-sequential-aqua-09:var(--aqua-900);
  --data-viz-sequential-violet-01:var(--violet-100);
  --data-viz-sequential-violet-02:var(--violet-200);
  --data-viz-sequential-violet-03:var(--violet-300);
  --data-viz-sequential-violet-04:var(--violet-400);
  --data-viz-sequential-violet-05:var(--violet-500);
  --data-viz-sequential-violet-06:var(--violet-600);
  --data-viz-sequential-violet-07:var(--violet-700);
  --data-viz-sequential-violet-08:var(--violet-800);
  --data-viz-sequential-violet-09:var(--violet-900);
  --data-viz-diverging-cool-3:var(--blue-700);
  --data-viz-diverging-cool-2:var(--blue-500);
  --data-viz-diverging-cool-1:var(--blue-200);
  --data-viz-diverging-mid:var(--n-200);
  --data-viz-diverging-warm-1:var(--coral-200);
  --data-viz-diverging-warm-2:var(--coral-400);
  --data-viz-diverging-warm-3:var(--coral-600);
  --data-viz-grid:var(--n-100);
  --data-viz-axis:var(--n-300);
  --data-viz-baseline:var(--n-400);
  --data-viz-label:var(--n-500);
  --data-viz-context:var(--n-300);
  --data-viz-annotation:var(--n-700);
  --data-viz-target:var(--n-800);
  --data-viz-highlight:var(--blue-700);
  --data-viz-stroke-grid:1px;
  --data-viz-stroke-line:2px;
  --data-viz-point-r:var(--sp-2);
  --data-viz-bar-radius:var(--radius-2);
  --data-viz-route-default:var(--n-400);
  --data-viz-route-selected:var(--blue-700);
  --data-viz-route-alternative:var(--aqua-500);
  --data-viz-route-inactive:var(--n-200);
  --data-viz-route-delayed:var(--badge-warning-text);
  --data-viz-route-completed:var(--badge-success-text);
  --data-viz-origin:var(--blue-800);
  --data-viz-destination:var(--coral-600);
  --data-viz-hub:var(--violet-600);
  --data-viz-state-live:var(--lime-300);
  --dur-data:400ms;
  --dur-draw:600ms;
  --stagger-data:40ms;
  --ease-data:cubic-bezier(.4,0,.2,1);
  --glass-fill:.62;
  --glass-fill-strong:.82;
  --glass-fill-subtle:.40;
  --glass-blur:24px;
  --glass-blur-lg:40px;
  --grad-neutral:radial-gradient(
      circle at 30% 25%,
      #70798633,
      transparent 60%),
    radial-gradient(
      circle at 75% 40%,
      #7079861a,
      transparent 55%),
    radial-gradient(
      circle at 45% 85%,
      #70798633,
      transparent 60%),
    #F1F3F6;
  --grad-blue:radial-gradient(
      circle at 25% 30%,
      #18b6b81a,
      transparent 55%),
    radial-gradient(
      circle at 65% 25%,
      #3567ef1a,
      transparent 55%),
    radial-gradient(
      circle at 50% 80%,
      #1f50e11a,
      transparent 60%),
    #F5F6F8;
  --grad-brand:radial-gradient(
      circle at 30% 25%,
      #b1a0e84d,
      transparent 55%),
    radial-gradient(
      circle at 70% 35%,
      #3bc9c933,
      transparent 55%),
    radial-gradient(
      circle at 50% 85%,
      #113ec933,
      transparent 60%),
    #F0EDF2;
  --grad-warm:radial-gradient(
      circle at 25% 30%,
      #f59e0b33,
      transparent 55%),
    radial-gradient(
      circle at 70% 30%,
      #bc1c151a,
      transparent 50%),
    radial-gradient(
      circle at 50% 85%,
      #fbbf2433,
      transparent 60%),
    #F5F6F8;
  --grad-accent:linear-gradient(
      135deg,
      #a8e93633,
      transparent 60%),
    radial-gradient(
      circle at 65% 30%,
      #a16ee833,
      transparent 55%),
    radial-gradient(
      circle at 40% 80%,
      #f17b3433,
      #fcd34d00 60%),
    #F5F6F8;
  --glass-card-bg:rgba(255,255,255,var(--glass-fill));
  --glass-card-bg-strong:rgba(255,255,255,var(--glass-fill-strong));
  --glass-card-bg-subtle:rgba(255,255,255,var(--glass-fill-subtle));
  --glass-card-border:rgba(255,255,255,.8);
  --font-sans:"Switzer",
    system-ui,
    sans-serif;
  --font-display:"Ranade", serif;
  --font-mono:"JetBrains Mono",
    ui-monospace,
    monospace;
  --fs-1:12px;
  --fs-2:14px;
  --fs-3:16px;
  --fs-4:18px;
  --fs-5:20px;
  --fs-6:24px;
  --fs-7:26px;
  --fs-8:32px;
  --fs-9:38px;
  --fs-10:40px;
  --fs-11:44px;
  --fs-12:48px;
  --fs-13:64px;
  --fs-14:80px;
  --fs-15:96px;
  --lh-1:1.15;
  --lh-2:1.4;
  --lh-3:1.5;
  --lh-4:1.6;
  --lh-5:1.7;
  --ls-1:-.02em;
  --ls-2:-.015em;
  --ls-3:-.01em;
  --ls-4:0;
  --ls-5:.01em;
  --ls-6:.03em;
  --ls-7:.04em;
  --ls-8:.08em;
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --text-heading-xs:var(--fs-4);
  --text-heading-s:var(--fs-5);
  --text-heading-m:var(--fs-6);
  --text-heading-l:var(--fs-7);
  --text-heading-xl:var(--fs-8);
  --text-page-title:var(--fs-9);
  --text-kpi-hero:var(--fs-10);
  --size-icon-sm:12px;
  --size-icon-md:14px;
  --size-icon-lg:16px;
  --shell-nav-w:280px;
  --shell-top-h:60px;
  --shell-vh:100vh;
  --shell-side-inset:var(--sp-5);
  --shell-side-h:calc(var(--shell-vh) - var(--shell-side-inset) * 2);
  --canvas-grid:radial-gradient(
      circle at 1px 1px,
      rgba(16,24,40,.05) 1px,
      transparent 0);
  --shadow-surface-rest:0 1px 1px rgba(16,24,40,.02),
    0 2px 6px rgba(16,24,40,.04),
    0 14px 28px -16px rgba(16,24,40,.12);
  --sticky-edge-shadow:rgba(16,24,40,.12);
  --shadow-surface-hover:0 1px 1px rgba(16,24,40,.03),
    0 6px 16px rgba(16,24,40,.07),
    0 24px 44px -18px rgba(16,24,40,.18);
  --surface-sheen:inset 0 1px 0 rgba(255,255,255,.85);
  --ring-focus:0 0 0 3px var(--blue-100);
  --shadow-accent-hover:0 12px 28px rgba(17,62,201,.24);
  --shadow-destructive-hover:0 12px 28px rgba(217,45,32,.26);
  --bg-ground:var(--n-200);
  --block-frame-bg:var(--glass-card-bg-subtle);
  --block-card-bg:var(--n-0);
  --block-tile-bg:var(--n-100);
  --block-track:var(--n-200);
  --layer-hover:color-mix(in srgb, var(--text-primary) 4%, transparent);
  --selected-mark:var(--accent);
  --selected-mark-ink:var(--n-0);
  --badge-solid-success-bg:var(--lime-300);
  --badge-solid-success-text:var(--n-950);
  --badge-solid-warning-bg:var(--gold-300);
  --badge-solid-warning-text:var(--n-950);
  --badge-solid-info-bg:var(--blue-700);
  --badge-solid-info-text:var(--n-0);
  --badge-solid-error-bg:var(--badge-error-text);
  --badge-solid-error-text:var(--bg-base);
  --badge-solid-neutral-bg:var(--n-200);
  --badge-solid-neutral-text:var(--n-800);
  --journey-done:var(--blue-500);
  --journey-now:var(--lime-300);
  --journey-leg-x:linear-gradient(
      to right in oklch,
      var(--journey-done),
      var(--journey-now));
  --journey-leg-y:linear-gradient(
      to bottom in oklch,
      var(--journey-done),
      var(--journey-now));
  --stage-pre:var(--n-300);
  --stage-sea:var(--blue-400);
  --stage-ts:var(--blue-300);
  --stage-arr:var(--aqua-300);
  --stage-port:var(--violet-300);
  --stage-done:var(--lime-300);
  --avatar-hue-0:var(--lime-300);
  --avatar-hue-1:var(--violet-300);
  --avatar-hue-2:var(--aqua-300);
  --avatar-hue-3:var(--gold-300);
  --avatar-hue-4:var(--coral-300);
  --avatar-hue-5:var(--blue-300);
  --cal-fill:var(--aqua-700);
  --cal-ink:var(--aqua-700);
}
:root[data-theme=dark] {
  --bg-canvas:var(--n-950);
  --bg-base:var(--n-900);
  --bg-raised:var(--n-800);
  --bg-sunken:var(--n-950);
  --bg-track:var(--n-800);
  --nav-hover-bg:var(--n-800);
  --border-default:var(--n-700);
  --border-strong:var(--n-600);
  --divider:var(--n-800);
  --text-primary:var(--n-50);
  --text-secondary:var(--n-300);
  --text-tertiary:var(--n-400);
  --text-disabled:var(--n-600);
  --text-inverse:var(--n-950);
  --link:var(--blue-500);
  --accent:var(--blue-500);
  --accent-hover:var(--blue-400);
  --accent-wash:rgba(53,103,239,.16);
  --accent-wash-border:rgba(53,103,239,.4);
  --border-subtle-line:rgba(255,255,255,.08);
  --ambient-wash:none;
  --scrollbar-thumb:var(--n-700);
  --selection-bg:var(--blue-800);
  --data-viz-diverging-cool-3:var(--blue-300);
  --data-viz-diverging-cool-1:var(--blue-800);
  --data-viz-diverging-mid:var(--n-700);
  --data-viz-diverging-warm-1:var(--coral-800);
  --data-viz-diverging-warm-3:var(--coral-300);
  --data-viz-grid:var(--n-800);
  --data-viz-axis:var(--n-700);
  --data-viz-baseline:var(--n-600);
  --data-viz-label:var(--n-400);
  --data-viz-context:var(--n-700);
  --data-viz-annotation:var(--n-200);
  --data-viz-target:var(--n-100);
  --data-viz-highlight:var(--blue-500);
  --data-viz-route-default:var(--n-600);
  --data-viz-route-selected:var(--blue-500);
  --data-viz-route-alternative:var(--aqua-400);
  --data-viz-route-inactive:var(--n-700);
  --data-viz-origin:var(--blue-400);
  --data-viz-destination:var(--coral-400);
  --data-viz-hub:var(--violet-400);
  --shadow-1:0 1px 3px rgba(0,0,0,.5);
  --shadow-2:0 4px 14px rgba(0,0,0,.55);
  --shadow-3:0 10px 28px rgba(0,0,0,.6);
  --shadow-4:0 18px 44px rgba(0,0,0,.65);
  --shadow-ovl:0 26px 64px rgba(0,0,0,.7);
  --status-verified-bg:#0B2E1D;
  --status-verified-text:#6CE9A6;
  --status-derived-bg:#0F1E42;
  --status-derived-text:#84ADFF;
  --status-proposed-bg:#3A2408;
  --status-proposed-text:#FEC84B;
  --status-approval-bg:#3A1210;
  --status-approval-text:#FDA29B;
  --status-legacy-bg:var(--n-800);
  --status-legacy-text:var(--n-400);
  --badge-success-bg:#022C1C;
  --badge-success-text:#6CE9A6;
  --badge-warning-bg:#4E1D09;
  --badge-warning-text:#FEC84B;
  --badge-error-bg:#55160C;
  --badge-error-text:#FDA29B;
  --badge-info-bg:#102A56;
  --badge-info-text:#84CAFF;
  --badge-neutral-bg:var(--n-800);
  --badge-neutral-text:var(--n-300);
  --badge-live-bg:rgba(198,243,95,.14);
  --badge-live-border:rgba(198,243,95,.3);
  --badge-live-text:#C6F35F;
  --badge-live-mono:rgba(198,243,95,.75);
  --badge-live-dot:#C6F35F;
  --dodont-do-bg:#0B2E1D;
  --dodont-do-border:#1B4A32;
  --dodont-do-text:var(--badge-success-text);
  --dodont-dont-bg:rgba(240,68,56,.14);
  --dodont-dont-border:rgba(240,68,56,.3);
  --dodont-dont-text:#FFA29A;
  --dodont-dont-mono:rgba(240,68,56,.75);
  --codeblock-bg:var(--n-800);
  --state-hover-bg:var(--n-800);
  --state-pressed-bg:var(--n-700);
  --grad-neutral:radial-gradient(
      circle at 30% 25%,
      #70798640,
      transparent 60%),
    radial-gradient(
      circle at 75% 40%,
      #70798626,
      transparent 55%),
    radial-gradient(
      circle at 45% 85%,
      #70798640,
      transparent 60%),
    #181B20;
  --grad-blue:radial-gradient(
      circle at 25% 30%,
      #18b6b833,
      transparent 55%),
    radial-gradient(
      circle at 65% 25%,
      #3567ef33,
      transparent 55%),
    radial-gradient(
      circle at 50% 80%,
      #1f50e133,
      transparent 60%),
    #181B20;
  --grad-brand:radial-gradient(
      circle at 30% 25%,
      #b1a0e866,
      transparent 55%),
    radial-gradient(
      circle at 70% 35%,
      #3bc9c94d,
      transparent 55%),
    radial-gradient(
      circle at 50% 85%,
      #113ec94d,
      transparent 60%),
    #181B20;
  --grad-warm:radial-gradient(
      circle at 25% 30%,
      #f59e0b4d,
      transparent 55%),
    radial-gradient(
      circle at 70% 30%,
      #bc1c1533,
      transparent 50%),
    radial-gradient(
      circle at 50% 85%,
      #fbbf244d,
      transparent 60%),
    #181B20;
  --grad-accent:linear-gradient(
      135deg,
      #a8e9364d,
      transparent 60%),
    radial-gradient(
      circle at 65% 30%,
      #a16ee84d,
      transparent 55%),
    radial-gradient(
      circle at 40% 80%,
      #f17b344d,
      #fcd34d00 60%),
    #181B20;
  --glass-card-bg:rgba(24,27,32,var(--glass-fill));
  --glass-card-bg-strong:rgba(24,27,32,var(--glass-fill-strong));
  --glass-card-bg-subtle:rgba(24,27,32,var(--glass-fill-subtle));
  --glass-card-border:rgba(255,255,255,.14);
  --canvas-grid:radial-gradient(
      circle at 1px 1px,
      rgba(255,255,255,.055) 1px,
      transparent 0);
  --shadow-surface-rest:0 1px 1px rgba(0,0,0,.35),
    0 2px 8px rgba(0,0,0,.4),
    0 16px 32px -16px rgba(0,0,0,.55);
  --sticky-edge-shadow:rgba(0,0,0,.5);
  --shadow-surface-hover:0 1px 1px rgba(0,0,0,.4),
    0 10px 22px rgba(0,0,0,.5),
    0 28px 52px -18px rgba(0,0,0,.65);
  --surface-sheen:inset 0 1px 0 rgba(255,255,255,.05);
  --ring-focus:0 0 0 3px rgba(53,103,239,.35);
  --shadow-accent-hover:0 12px 28px rgba(53,103,239,.35);
  --shadow-destructive-hover:0 12px 28px rgba(217,45,32,.38);
  --bg-ground:var(--n-950);
  --block-frame-bg:var(--n-900);
  --block-card-bg:var(--n-800);
  --block-tile-bg:color-mix(in srgb, var(--n-700) 55%, var(--n-800));
  --block-track:var(--n-700);
  --badge-solid-neutral-bg:var(--n-700);
  --badge-solid-neutral-text:var(--n-100);
  --stage-pre:var(--n-600);
  --cal-ink:var(--aqua-300);
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: var(--sp-0);
  padding: var(--sp-0);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: var(--sp-0);
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
}
body {
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-2);
  line-height: var(--lh-3);
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4 {
  margin: var(--sp-0);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}
p {
  margin: var(--sp-0);
}
a {
  color: var(--link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
button {
  font-family: inherit;
}
::selection {
  background: var(--selection-bg);
}
code,
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-5);
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--r-pill);
  border: 2px solid var(--bg-canvas);
}
::-webkit-scrollbar-track {
  background: transparent;
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}
@supports (height:100svh) {
  :root {
    --shell-vh:100svh;
  }
}
.shell {
  display: grid;
  grid-template-columns: var(--shell-nav-w) 1fr;
  grid-template-rows: var(--shell-top-h) 1fr;
  height: var(--shell-vh);
}
.topbar {
  grid-column: 1/-1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: var(--space-stack-gap);
  padding: var(--sp-0) var(--sp-8);
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-subtle-line);
  z-index: 30;
}
.topbar .brand {
  display: flex;
  align-items: center;
  gap: var(--space-chrome-gap);
  font-weight: 600;
  font-size: var(--fs-2);
  letter-spacing: var(--ls-3);
}
.topbar .brand svg {
  height: 24px;
  width: auto;
  display: block;
}
#brand-logo-landing svg {
  height: 22px;
  width: auto;
  display: block;
}
#brand-logo-ovintro svg {
  height: 24px;
  width: auto;
  display: block;
}
.busy-bg-wordmark {
  fill: #0B0D10;
}
:root[data-theme=dark] .busy-bg-wordmark {
  fill: #fff;
}
.busy-bg-black-gradient {
  background:
    linear-gradient(
      135deg,
      var(--n-800),
      var(--n-700));
}
:root[data-theme=dark] .busy-bg-black-gradient {
  background:
    linear-gradient(
      135deg,
      var(--n-1000),
      var(--n-950));
}
.topbar .divider-v {
  width: 1px;
  height: 20px;
  background:
    linear-gradient(
      180deg,
      transparent,
      var(--border-default) 30%,
      var(--border-default) 70%,
      transparent);
}
.topbar .crumbs {
  font-size: var(--fs-1);
}
.topbar .crumb {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
.topbar-spacer {
  flex: 1;
}
.searchbox {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 280px;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-control);
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  color: var(--text-tertiary);
  font-size: var(--fs-2);
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, .03);
  cursor: pointer;
  transition:
    border-color var(--dur-default) var(--ease-out),
    box-shadow var(--dur-default) var(--ease-out),
    background var(--dur-default) var(--ease-out);
}
.searchbox:hover {
  background: var(--bg-canvas);
  border-color: var(--border-strong);
}
.searchbox .field-icon {
  position: static;
  transform: none;
  flex-shrink: 0;
}
.searchbox-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.searchbox .field-kbd {
  position: static;
  margin-left: auto;
  flex-shrink: 0;
}
.cmdk-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  background: rgba(11, 13, 16, .5);
}
.cmdk-overlay.open {
  display: flex;
}
.cmdk-demo.cmdk-live {
  width: 560px;
  max-width: 90vw;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}
.cmdk-demo.cmdk-live .cmdk-input {
  flex-shrink: 0;
}
.cmdk-demo.cmdk-live .cmdk-input input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-size: var(--fs-2);
  color: var(--text-primary);
  font-family: var(--font-sans);
}
.cmdk-demo.cmdk-live .cmdk-input input::placeholder {
  color: var(--text-tertiary);
}
.cmdk-demo.cmdk-live .cmdk-results {
  overflow-y: auto;
  max-height: none;
  flex: 1;
}
#nav-toggle.nav-toggle {
  display: none;
}
.mobile-nav-scrim {
  display: none;
}
.theme-toggle .icon-moon {
  display: none;
}
:root[data-theme=dark] .theme-toggle .icon-sun {
  display: none;
}
:root[data-theme=dark] .theme-toggle .icon-moon {
  display: block;
}
.sidenav {
  grid-column: 1;
  grid-row: 2;
  overflow-y: auto;
  background: var(--bg-base);
  border-right: 1px solid var(--border-subtle-line);
  padding: var(--sp-7) var(--sp-5) var(--sp-10);
  box-shadow: 1px 0 0 rgba(16, 24, 40, .015);
  min-height: 0;
  overscroll-behavior: contain;
}
.nav-group {
  margin-bottom: var(--sp-1);
}
.nav-group-label {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--space-label-gap);
  border-radius: var(--radius-24);
  cursor: pointer;
  font-size: var(--fs-2);
  font-weight: 600;
  color: var(--text-primary);
  user-select: none;
  transition: background var(--dur-moderate) var(--ease-out);
}
.nav-group-label:hover {
  background: var(--nav-hover-bg);
}
.nav-group-label .chev {
  margin-left: auto;
  width: 14px;
  height: 14px;
  color: var(--text-tertiary);
  transform: rotate(90deg);
  transition: transform var(--dur-default) var(--ease-lift);
}
.nav-group.open .chev {
  transform: rotate(-90deg);
}
.nav-group-label .count {
  font-size: var(--fs-1);
  color: var(--text-tertiary);
  font-weight: 500;
}
.nav-items {
  display: none;
  padding-left: var(--space-surface-inset);
  margin: var(--sp-1) var(--sp-0) var(--space-label-gap);
  border-left: 1px solid var(--border-subtle-line);
  margin-left: var(--sp-7);
}
.nav-group.open .nav-items {
  display: block;
}
.nav-item {
  display: block;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-24);
  margin: 1px var(--sp-0);
  font-size: var(--fs-2);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition:
    color var(--dur-moderate) var(--ease-out),
    background var(--dur-moderate) var(--ease-out),
    transform var(--dur-moderate) var(--ease-lift);
}
.nav-item:hover {
  color: var(--text-primary);
  background: var(--nav-hover-bg);
  transform: translateX(1px);
}
.nav-item.active {
  color: var(--accent);
  background: var(--accent-wash);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--accent-wash-border);
}
.nav-item .n {
  display: inline-block;
  width: 18px;
  color: var(--text-disabled);
  font-size: var(--fs-1);
}
.nav-root-item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--space-label-gap);
  border-radius: var(--radius-24);
  font-size: var(--fs-2);
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--dur-moderate) var(--ease-out);
}
.nav-root-item:hover {
  background: var(--nav-hover-bg);
}
.nav-root-item.active {
  color: var(--accent);
  background: var(--accent-wash);
}
.nav-sep {
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--border-default) 15%,
      var(--border-default) 85%,
      transparent);
  margin: var(--space-label-gap) var(--sp-3);
}
.nav-scope-note {
  padding: var(--space-label-gap) var(--sp-5);
  font-size: var(--fs-1);
  color: var(--text-tertiary);
  line-height: var(--lh-3);
}
.workspace {
  grid-column: 2;
  grid-row: 2;
  overflow-y: auto;
}
.page {
  display: none;
  max-width: 1200px;
  margin: var(--sp-0) auto;
  padding: var(--space-page-gutter-top) var(--space-page-gutter-x) var(--space-page-gutter-bottom);
}
.page.active {
  display: block;
  animation: page-in 260ms var(--ease-lift);
}
@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .page.active {
    animation: none;
  }
}
.gs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--radius-32);
  background: var(--bg-sunken);
  margin-bottom: var(--sp-3);
}
.gs-row.clickable {
  cursor: pointer;
  transition: background var(--dur-moderate) var(--ease-out), transform var(--dur-moderate) var(--ease-lift);
}
.gs-row.clickable:hover {
  background: var(--accent-wash);
  transform: translateX(2px);
}
.gs-row .gs-row-text h4 {
  font-size: var(--fs-2);
  font-weight: 600;
  color: var(--text-primary);
  margin: var(--sp-0) var(--sp-0) var(--sp-1);
}
.gs-row .gs-row-text p {
  font-size: var(--fs-1);
  color: var(--text-tertiary);
  margin: var(--sp-0);
}
.gs-row .gs-row-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
}
.gs-row .gs-row-thumb {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-16);
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.gs-row .gs-row-thumb svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.gs-row-text {
  flex: 1;
  min-width: 0;
}
.hero-fullbleed {
  position: relative;
  width: calc(100vw - var(--hero-navw) - 16px);
  margin-left: calc(-1 * (max(0px, (100vw - var(--hero-navw) - 1200px)/2) + var(--hero-gutter)) + 8px);
  margin-right: 0;
  margin-top: calc(-1 * (var(--hero-gutter-top) - 8px));
  border-radius: 32px;
}
.ov-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
  align-items: stretch;
}
.ov-hero-text {
  background: var(--bg-sunken);
  border-radius: var(--radius-32);
  padding: var(--sp-9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-wrap: break-word;
  min-width: 0;
}
:root[data-theme=dark] .ov-hero-text {
  background: var(--bg-base);
}
.ov-hero-art.mono-brand {
  background: var(--bg-sunken);
}
:root[data-theme=dark] .ov-hero-art.mono-brand {
  background: var(--bg-base);
}
:root[data-theme=dark] .gs-row {
  background: var(--bg-base);
}
.ov-hero-text .page-title {
  margin: var(--sp-0) var(--sp-0) var(--sp-4);
}
.ov-hero-text .page-purpose {
  margin: var(--sp-0);
}
.ov-hero-art {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-32);
  min-height: 220px;
}
.ov-hero-art svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ov-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-6);
}
.ov-card {
  border-radius: var(--radius-32);
  overflow: hidden;
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  cursor: pointer;
  transition: transform var(--dur-moderate) var(--ease-lift), box-shadow var(--dur-moderate) var(--ease-out);
}
.ov-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.ov-card-art {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
}
.ov-card-art svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ov-card-body {
  padding: var(--sp-6) var(--sp-6);
}
.ov-card-body h3 {
  font-size: var(--fs-3);
  font-weight: 700;
  color: var(--text-primary);
  margin: var(--sp-0) var(--sp-0) var(--sp-2);
}
.ov-card-body p {
  font-size: var(--fs-1);
  color: var(--text-secondary);
  line-height: var(--lh-4);
  margin: var(--sp-0);
}
.gs-hero-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.gs-hero-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-7);
  border-radius: var(--r-panel);
  background: var(--accent-wash);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--dur-moderate) var(--ease-lift),
    box-shadow var(--dur-moderate) var(--ease-out),
    transform var(--dur-moderate) var(--ease-lift);
  text-align: left;
}
.gs-hero-nav-item:hover {
  transform: translateY(-2px);
  background: var(--accent-wash-border);
  box-shadow: var(--shadow-1);
}
.gs-hero-nav-text {
  min-width: 0;
}
.gs-hero-nav-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-16);
  background: var(--bg-base);
  box-shadow: var(--shadow-surface-rest);
  flex-shrink: 0;
}
.gs-hero-nav-icon {
  display: block;
  width: 22px;
  height: 22px;
  color: var(--accent);
}
.gs-hero-nav-item h5 {
  font-size: var(--fs-2);
  font-weight: 700;
  color: var(--text-primary);
  margin: var(--sp-0) var(--sp-0) var(--sp-1);
}
.gs-hero-nav-item p {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin: var(--sp-0);
  line-height: var(--lh-3);
}
.gs-divider {
  display: block;
  width: 60px;
  height: 16px;
  margin: var(--sp-9) auto;
}
.status-chip {
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: var(--ls-6);
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
}
.status-verified {
  background: var(--status-verified-bg);
  color: var(--status-verified-text);
}
.status-derived {
  background: var(--status-derived-bg);
  color: var(--status-derived-text);
}
.status-proposed {
  background: var(--status-proposed-bg);
  color: var(--status-proposed-text);
}
.status-approval {
  background: var(--status-approval-bg);
  color: var(--status-approval-text);
}
.status-legacy {
  background: var(--status-legacy-bg);
  color: var(--status-legacy-text);
}
.dep-state {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: var(--ls-6);
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  flex-shrink: 0;
}
.dep-state.deprecated {
  background: var(--badge-info-bg);
  color: var(--badge-info-text);
}
.dep-state.legacy {
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-text);
}
.dep-state.migration {
  background: var(--badge-warning-bg);
  color: var(--badge-warning-text);
}
.dep-state.removal {
  background: var(--badge-error-bg);
  color: var(--badge-error-text);
}
.dep-state.removed {
  background: var(--status-legacy-bg);
  color: var(--status-legacy-text);
}
.dep-state.current {
  background: var(--badge-success-bg);
  color: var(--badge-success-text);
}
.page-title {
  font-family: var(--font-display);
  font-size: var(--text-page-title);
  line-height: var(--lh-1);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-2);
  margin-bottom: var(--sp-5);
}
.page-purpose {
  font-size: var(--fs-3);
  color: var(--text-secondary);
  max-width: 640px;
  line-height: var(--lh-4);
  margin-bottom: var(--space-page-intro-gap);
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
  gap: var(--sp-6);
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-6);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-1);
  color: var(--text-primary);
}
.section-sub {
  font-size: var(--fs-2);
  color: var(--text-secondary);
  margin-top: -6px;
  margin-bottom: var(--sp-6);
  max-width: 620px;
}
#page-p-bulk .section-head {
  margin-bottom: var(--sp-8);
}
#page-p-importexport .section-head {
  margin-bottom: var(--sp-8);
}
#page-p-loading .section-head {
  margin-bottom: var(--sp-8);
}
#page-p-errors .section-head {
  margin-bottom: var(--sp-8);
}
#page-p-permissions .section-head {
  margin-bottom: var(--sp-8);
}
#page-p-ai .section-head {
  margin-bottom: var(--sp-8);
}
#page-t-dashboard {
  max-width: 1600px;
}
#page-t-dashboard .section-head {
  margin-bottom: var(--sp-8);
}
#page-t-dashboard .spec-frame {
  --spec-grid-line:color-mix(in srgb, var(--border-subtle-line) 40%, transparent);
  background: var(--bg-canvas);
}
#page-t-list .spec-frame {
  --spec-grid-line:color-mix(in srgb, var(--border-subtle-line) 40%, transparent);
  background: var(--bg-canvas);
}
#page-t-dashboard .dt-table thead th {
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border-strong);
}
#page-t-dashboard .dash-ship-table td,
#page-t-dashboard .dash-ship-table th {
  padding: var(--sp-4) var(--sp-6);
}
#page-t-dashboard .dash-ship-table thead th {
  font-size: var(--fs-1);
}
#page-t-dashboard .dash-attn-row {
  transition: background var(--dur-default) var(--ease-out);
}
#page-t-dashboard .dash-attn-row:hover {
  background: var(--bg-canvas);
}
#page-t-dashboard .dash-updates-box {
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
  padding: 2px var(--sp-6);
}
#page-t-dashboard .dash-updates-timeline .tl-content {
  padding-bottom: var(--sp-5);
  gap: 1px;
}
#page-t-dashboard .dash-updates-timeline .tl-item:last-child .tl-content {
  padding-bottom: var(--sp-0);
}
#page-t-dashboard .dash-updates-timeline .tl-content .t {
  font-size: var(--fs-1);
  font-weight: 500;
}
#page-t-dashboard .dash-updates-timeline .tl-content .ts {
  font-size: 10.5px;
}
#page-t-dashboard .dash-updates-timeline .tl-content .m {
  font-size: 10.5px;
  color: var(--text-disabled);
}
#page-t-dashboard .dash-updates-timeline .tl-dot {
  width: 7px;
  height: 7px;
  margin-top: var(--sp-2);
}
#page-t-dashboard .dash-updates-timeline .tl-line {
  min-height: 10px;
}
.dash-kpi-strip {
  display: flex;
  border-bottom: 1px solid var(--border-default);
  margin-bottom: var(--sp-6);
}
@media (max-width: 639px) {
  #page-t-dashboard .dash-split {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #page-t-dashboard .dash-kpi-strip {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  #page-t-dashboard .dash-kpi-strip > div {
    min-width: 0;
  }
  #page-t-dashboard .dash-kpi-strip > div > div {
    flex-wrap: wrap;
    min-width: 0;
  }
  #page-t-dashboard .dash-kpi-strip > div {
    border-right: 1px solid var(--divider);
    border-bottom: none;
  }
  #page-t-dashboard .dash-kpi-strip > div:nth-child(2n) {
    border-right: none;
  }
  #page-t-dashboard .dash-kpi-strip > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--divider);
  }
  #page-t-dashboard .dash-surface {
    padding: var(--sp-8) 18px !important;
  }
  #page-t-dashboard .dash-attn-row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: var(--sp-3) !important;
  }
  #page-t-dashboard .zone-row {
    flex-direction: column;
  }
}
#page-t-appshell {
  max-width: 1600px;
}
#page-t-appshell .section-head {
  margin-bottom: var(--sp-7);
}
#page-t-appshell .dt-table thead th {
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border-strong);
}
#page-t-appshell .dash-ship-table td,
#page-t-appshell .dash-ship-table th {
  padding: var(--sp-4) var(--sp-6);
}
#page-t-appshell .dash-ship-table thead th {
  font-size: var(--fs-1);
}
#page-t-appshell .dash-attn-row {
  transition: background var(--dur-default) var(--ease-out);
}
#page-t-appshell .dash-attn-row:hover {
  background: var(--bg-canvas);
}
#page-t-appshell .dash-updates-box {
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
  padding: 2px var(--sp-6);
}
#page-t-appshell .dash-updates-timeline .tl-content {
  padding-bottom: var(--sp-5);
  gap: 1px;
}
#page-t-appshell .dash-updates-timeline .tl-item:last-child .tl-content {
  padding-bottom: var(--sp-0);
}
#page-t-appshell .dash-updates-timeline .tl-content .ts {
  font-size: 10.5px;
}
#page-t-appshell .dash-updates-timeline .tl-content .m {
  font-size: 10.5px;
  color: var(--text-disabled);
}
#page-t-appshell .dash-updates-timeline .tl-dot {
  width: 7px;
  height: 7px;
  margin-top: var(--sp-2);
}
#page-t-appshell .dash-updates-timeline .tl-line {
  min-height: 10px;
}
#page-t-appshell .ash-app-scale {
  width: 1337px;
  zoom: 0.822;
}
#page-t-appshell .ash-frame:not(.ash-mini) .ash-side {
  width: 220px;
}
#page-t-appshell .ash-frame:not(.ash-mini) .searchbox {
  display: flex;
}
.ash-frame {
  border: 1px solid var(--border-default);
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--bg-base);
  width: 100%;
}
.ash-topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-4) var(--sp-7);
  border-bottom: 1px solid var(--border-subtle-line);
  background: var(--bg-base);
}
.ash-topbar .brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.ash-topbar .brand svg {
  height: 22px;
  width: auto;
  display: block;
}
.ash-crumb {
  font-size: var(--fs-1);
  color: var(--text-tertiary);
  white-space: nowrap;
}
.ash-crumb b {
  color: var(--text-primary);
  font-weight: 500;
}
.ash-spacer {
  flex: 1;
}
.ash-body {
  display: flex;
}
.ash-side {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-subtle-line);
  padding: var(--sp-4);
  background: var(--bg-base);
  overflow: hidden;
}
.ash-content {
  flex: 1;
  min-width: 0;
  padding: var(--sp-6) var(--sp-7);
  background: var(--bg-canvas);
}
.ash-panel {
  width: 220px;
  flex-shrink: 0;
  border-left: 1px solid var(--border-subtle-line);
  padding: var(--sp-5) var(--sp-6);
  background: var(--bg-base);
}
.ash-panel-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--divider);
}
.ash-panel-row:last-child {
  border-bottom: none;
}
.ash-frame.ash-mini .ash-body {
  min-height: 0;
}
.ash-frame.ash-mini .ash-topbar {
  padding: var(--sp-3) var(--sp-5);
  gap: var(--sp-4);
}
.ash-frame.ash-mini .ash-side {
  width: 120px;
  padding: var(--sp-4) var(--sp-3) var(--sp-4) var(--sp-7);
}
.ash-frame.ash-mini .ash-content {
  padding: var(--sp-5) var(--sp-6);
}
.ash-frame.ash-mini .ash-panel {
  width: 150px;
  padding: var(--sp-4) var(--sp-5);
}
.ash-frame.ash-mini .nd-item {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-1);
}
.ash-frame.ash-mini .nd-item.active::before {
  left: -10px;
}
.ash-frame.ash-glass {
  background: var(--bg-canvas);
  border-color: var(--glass-card-border);
  box-shadow: var(--shadow-4);
}
.ash-frame.ash-glass .ash-topbar {
  background: transparent;
  border-bottom-color: var(--glass-card-border);
}
.ash-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ash-navbar {
  display: none;
  align-items: center;
  gap: var(--sp-7);
  flex-wrap: wrap;
}
.ash-frame.ash-nav-top .ash-navbar {
  display: flex;
}
.navlist-demo.ash-nav-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-6);
  width: 100%;
  border-radius: var(--r-pill);
}
.navlist-demo.ash-nav-top .menu-handle:not(.handle-bottom) {
  display: none;
}
.navlist-demo.ash-nav-top .nav-brand {
  order: 1;
}
.navlist-demo.ash-nav-top .ash-navbar {
  order: 2;
}
.navlist-demo.ash-nav-top .nav-account {
  order: 3;
}
.navlist-demo.ash-nav-top .ash-navbar {
  display: flex;
  flex-wrap: wrap;
}
.navlist-demo.ash-nav-top .nav-group,
.navlist-demo.ash-nav-top .nav-scroll {
  display: none;
}
.navlist-demo.ash-nav-top .nav-brand {
  padding: var(--sp-0);
  flex-shrink: 0;
}
.navlist-demo.ash-nav-top .nav-account {
  margin: var(--sp-0) var(--sp-0) var(--sp-0) auto;
  padding: var(--sp-0);
  flex-shrink: 0;
}
.ash-frame.ash-nav-top .ash-side,
.ash-frame.ash-glass.ash-nav-top .ash-side {
  display: none;
}
.ash-navbar .lp-navdrop-panel {
  min-width: 240px;
  padding: var(--sp-4);
  text-align: left;
}
.ash-navbar .lp-navdrop-panel .nav-item {
  white-space: nowrap;
}
.ash-navbar .lp-navdrop-panel .nav-item.active::before {
  display: none;
}
.ash-greet {
  text-align: center;
  padding: var(--sp-8) var(--sp-6) var(--sp-9);
}
.ash-greet .ash-greet-kicker {
  font-size: var(--fs-2);
  color: var(--text-secondary);
  margin-bottom: var(--sp-4);
}
.ash-greet .page-title {
  margin-bottom: var(--sp-0);
  max-width: 18ch;
  margin-inline: auto;
}
.ash-main .ash-content {
  flex: 1;
}
.ash-frame.ash-glass .ash-side {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--r-card);
  margin: var(--sp-5);
  display: flex;
  flex-direction: column;
}
.ash-frame.ash-glass .ash-content {
  background: transparent;
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-0);
}
.ash-frame.ash-nav-top .ash-content,
.ash-frame.ash-glass.ash-nav-top .ash-content {
  padding-left: var(--sp-5);
}
.ash-frame.ash-nav-top .ash-topbar,
.ash-frame.ash-glass.ash-nav-top .ash-topbar {
  height: 60px;
  box-sizing: border-box;
  margin: var(--sp-5) var(--sp-5) var(--sp-0);
  padding: var(--sp-0) var(--sp-6);
  gap: var(--sp-6);
  justify-content: space-between;
  border: 1px solid var(--glass-card-border);
  border-radius: var(--r-pill);
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
}
.ash-frame.ash-nav-top .ash-topbar,
.ash-frame.ash-glass.ash-nav-top .ash-topbar {
  position: relative;
  z-index: 30;
}
.ash-frame.ash-glass:not(.ash-nav-top) .ash-topbar {
  border-bottom: none;
}
.ash-view {
  display: none;
}
.ash-view.active {
  display: block;
  animation: page-in 220ms var(--ease-lift);
}
@media (prefers-reduced-motion: reduce) {
  .ash-view.active {
    animation: none;
  }
}
.ash-view-head {
  padding: var(--sp-7) var(--sp-2) var(--sp-6);
}
.ash-view-title {
  font-size: var(--text-heading-m);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
}
.ash-view-desc {
  font-size: var(--fs-2);
  color: var(--text-secondary);
  max-width: 62ch;
}
.ash-frame:not(.ash-nav-top) .ash-top-only {
  display: none !important;
}
.ash-topbar .lp-topnav-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.ash-topbar .ash-top-only.brand svg {
  height: 22px;
  width: auto;
  display: block;
}
.ash-frame.ash-nav-top .ash-topbar .ash-top-only.brand {
  display: flex;
  align-items: center;
}
.ash-frame.ash-glass .ash-panel {
  background: transparent;
  border-left-color: var(--glass-card-border);
}
.nav-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.nav-col,
.nav-sticky {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.nav-sticky {
  position: sticky;
  top: var(--shell-side-inset);
  align-self: flex-start;
  height: var(--shell-side-h);
}
.nav-col > .nav-brand,
.nav-col > .nav-account,
.nav-sticky > .nav-brand,
.nav-sticky > .nav-account,
.ash-frame.ash-viewport .ash-side > .nav-brand,
.ash-frame.ash-viewport .ash-side > .nav-account {
  flex-shrink: 0;
}
.ash-frame.ash-viewport {
  height: var(--shell-vh);
  max-height: var(--shell-vh);
  overflow: hidden;
}
.ash-frame.ash-viewport .ash-body {
  height: 100%;
  min-height: 0;
}
.ash-frame.ash-viewport .ash-main {
  min-height: 0;
}
.ash-frame.ash-viewport .ash-content {
  overflow-y: auto;
  min-height: 0;
}
.ash-frame.ash-viewport .ash-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.ash-frame.ash-viewport .ash-side {
  padding: var(--shell-side-inset);
}
.ash-frame.ash-glass.ash-viewport .ash-side {
  margin: var(--shell-side-inset);
}
.ash-frame.ash-viewport .ash-side .nav-scroll {
  padding-bottom: var(--sp-3);
}
#page-t-appshell #appshell-live.ash-viewport {
  height: min(680px, 78vh);
  max-height: none;
}
#page-t-appshell .ash-frame.ash-viewport .ash-app-scale {
  height: 100%;
  min-height: 0;
}
#page-c-navigation #navlist-shell.ash-viewport {
  height: 480px;
  max-height: none;
}
.ash-sheet {
  width: 100%;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle-line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-surface-rest), var(--surface-sheen);
  padding: var(--sp-7) var(--sp-8);
}
.ash-frame.ash-glass .ash-sheet,
.ash-frame.ash-glass .card,
.ash-frame.ash-glass .searchbox {
  background: var(--glass-card-bg);
  border-color: var(--glass-card-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.ash-frame.ash-glass .ash-sheet {
  box-shadow: none;
}
#page-t-appshell .ash-sheet .dash-updates-box {
  border: none;
  border-radius: var(--sp-0);
  padding: var(--sp-0);
}
.ash-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
  align-items: stretch;
}
.ash-bento .bento-2 {
  grid-column: span 2;
}
.ash-bento .bento-3 {
  grid-column: span 3;
}
.ash-bento .bento-tall {
  grid-row: span 2;
}
@media (max-width: 900px) {
  .ash-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ash-bento .bento-3,
  .ash-bento .bento-2 {
    grid-column: span 2;
  }
  .ash-bento .bento-tall {
    grid-row: auto;
  }
}
.ash-sheet .sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.ash-sheet .sheet-head .sheet-head-title {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
}
.nav-account {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--space-label-gap);
}
.nav-account .nav-account-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.nav-account .nav-account-name {
  font-size: var(--fs-1);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  line-height: var(--lh-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-account .nav-account-role {
  font-size: var(--fs-1);
  color: var(--text-tertiary);
  line-height: var(--lh-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.navlist-demo.collapsed .nav-account-who,
.ash-frame.side-collapsed .ash-side .nav-account-who {
  display: none;
}
.nav-account .theme-toggle {
  margin-left: auto;
  flex-shrink: 0;
}
.navlist-demo.collapsed .nav-account .theme-toggle,
.ash-frame.side-collapsed .ash-side .nav-account .theme-toggle {
  display: none;
}
.navlist-demo.collapsed .nav-account,
.ash-frame.side-collapsed .ash-side .nav-account {
  justify-content: center;
  padding-left: var(--sp-0);
  padding-right: var(--sp-0);
}
.ash-sheet .sheet-title {
  font-family: var(--font-sans);
  font-size: var(--fs-4);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-2);
  line-height: var(--lh-2);
  color: var(--text-primary);
}
.stat-block .stat-figure {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
}
.ash-bento .stat-figure .type-numeric-hero {
  font-size: var(--fs-8);
  letter-spacing: var(--ls-1);
}
.ash-sheet .dt-wrap {
  background: transparent;
  border: none;
  border-radius: var(--sp-0);
}
#page-t-appshell .ash-sheet .dt-table thead th {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.ash-sheet .dt-table tbody tr:hover td,
#page-t-appshell .ash-sheet .dash-attn-row:hover {
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
}
.ash-bento .ash-sheet .stat-block {
  padding: var(--sp-0);
}
@media (max-width: 900px) {
  .ash-panel {
    display: none;
  }
  .ash-side {
    width: 170px;
  }
}
.principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}
.principle-card {
  padding: var(--sp-7) var(--sp-7);
  border: none;
  border-radius: var(--radius-32);
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-4);
  transition:
    border-color var(--dur-default) var(--ease-lift),
    box-shadow var(--dur-default) var(--ease-lift),
    transform var(--dur-default) var(--ease-lift);
}
.principle-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.principle-card h4 {
  font-size: var(--fs-2);
  margin-bottom: var(--sp-3);
}
.principle-card p {
  font-size: var(--fs-1);
  color: var(--text-secondary);
  line-height: var(--lh-3);
}
.card {
  border: 1px solid var(--border-subtle-line);
  border-radius: var(--r-card);
  background: var(--bg-base);
  padding: var(--sp-8);
  transition: border-color var(--dur-default) var(--ease-lift), box-shadow var(--dur-default) var(--ease-lift);
}
.card-stack > .card + .card {
  margin-top: var(--space-card-stack);
}
.glass-frame {
  padding: 8px;
  border: 1px solid var(--glass-card-border);
  border-radius: calc(var(--r-card) + 8px);
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.4);
  box-shadow: var(--shadow-4);
}
.glass-frame-inner {
  background: var(--bg-base);
  border-radius: var(--r-card);
  padding: var(--sp-8);
}
.card.compact {
  padding: var(--space-surface-inset-sm);
}
.card.spacious {
  padding: var(--sp-9);
}
.card.clickable {
  cursor: pointer;
  border-color: var(--border-default);
}
.card.clickable:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
}
.card.selected {
  border-color: var(--accent);
  background: var(--accent-wash);
}
.card.disabled {
  background: var(--bg-sunken);
  opacity: .55;
  pointer-events: none;
}
.panel {
  border: 1px solid var(--border-subtle-line);
  border-radius: var(--r-panel);
  background: var(--bg-base);
  box-shadow: var(--shadow-surface-rest), var(--surface-sheen);
  padding: var(--sp-9);
}
.section-tonal {
  background: var(--bg-sunken);
  border-radius: var(--r-card);
  padding: var(--sp-6) var(--sp-7);
}
.section-bordered {
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
  padding: var(--sp-6) var(--sp-7);
}
.stack-v {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.stack-h {
  display: flex;
  flex-direction: row;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.group-shared {
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--bg-base);
}
.group-shared > * {
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--divider);
}
.group-shared > *:last-child {
  border-bottom: none;
}
.group-shared.horizontal {
  display: flex;
}
.group-shared.horizontal > * {
  border-bottom: none;
  border-right: 1px solid var(--divider);
  flex: 1;
}
.group-shared.horizontal > *:last-child {
  border-right: none;
}
.stack-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-1);
  font-size: var(--fs-1);
  color: var(--text-primary);
  border-bottom: 1px solid var(--divider);
}
.stack-row:last-child {
  border-bottom: none;
}
.stack-row::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-disabled);
  flex-shrink: 0;
}
.spec-role {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-disabled);
  text-transform: none;
  letter-spacing: var(--ls-4);
  margin-left: var(--sp-3);
}
.well {
  background: var(--bg-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
  padding: var(--space-surface-inset) var(--sp-6);
}
.split-2 {
  display: grid;
  grid-template-columns: 220px 1fr;
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--bg-base);
}
.split-2 > .pane-a {
  border-right: 1px solid var(--divider);
  background: var(--bg-canvas);
  padding: var(--space-surface-inset) var(--sp-6);
}
.split-2 > .pane-b {
  padding: var(--space-surface-inset) var(--sp-6);
}
.scroll-region,
.nav-scroll {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-tertiary) 22%, transparent) transparent;
}
.scroll-region:hover,
.nav-scroll:hover {
  scrollbar-color: color-mix(in srgb, var(--text-tertiary) 42%, transparent) transparent;
}
.scroll-region::-webkit-scrollbar,
.nav-scroll::-webkit-scrollbar {
  width: 5px;
}
.scroll-region::-webkit-scrollbar-track,
.nav-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.scroll-region::-webkit-scrollbar-thumb,
.nav-scroll::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--text-tertiary) 22%, transparent);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background-clip: padding-box;
  transition: background-color var(--dur-moderate) var(--ease-out);
}
.scroll-region:hover::-webkit-scrollbar-thumb,
.scroll-region::-webkit-scrollbar-thumb:hover,
.nav-scroll:hover::-webkit-scrollbar-thumb,
.nav-scroll::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--text-tertiary) 42%, transparent);
}
.demo-box {
  height: 30px;
  padding: var(--sp-0) var(--space-control-inset-sm);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-6);
  background: var(--bg-base);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-1);
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.u-stack {
  display: flex;
  flex-direction: column;
}
.u-inline {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.u-cluster {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.u-gap-xs {
  gap: var(--sp-2);
}
.u-gap-sm {
  gap: var(--sp-4);
}
.u-gap-md {
  gap: var(--sp-6);
}
.u-gap-lg {
  gap: var(--sp-8);
}
.u-gap-xl {
  gap: var(--sp-9);
}
.u-spacer {
  flex: 1 1 auto;
}
.u-divider {
  height: 1px;
  width: 100%;
  background: var(--divider);
  border: none;
}
.u-divider-v {
  width: 1px;
  align-self: stretch;
  background: var(--divider);
  border: none;
}
.u-hide-sm {
}
.u-show-sm {
  display: none !important;
}
@media (max-width: 639px) {
  .u-hide-sm {
    display: none !important;
  }
  .u-show-sm {
    display: block !important;
  }
  .topbar .crumbs {
    display: none;
  }
  .topbar {
    position: relative;
  }
  .topbar .brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .topbar .divider-v {
    display: none;
  }
  .lp-topnav {
    position: relative;
    flex-wrap: nowrap;
  }
  .lp-topnav .brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .lp-topnav-toggle {
    display: flex !important;
    order: 1;
  }
  .lp-topnav-links {
    display: none !important;
    position: absolute;
    top: calc(100% + var(--sp-3));
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
    background: var(--glass-card-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border: 1px solid var(--glass-card-border);
    border-radius: var(--r-panel);
    padding: var(--sp-4);
    box-shadow: var(--shadow-ovl);
    z-index: 20;
  }
  .lp-topnav.lp-topnav-mobile-open .lp-topnav-links {
    display: flex !important;
  }
  .lp-topnav-actions {
    order: 2;
  }
  .lp-topnav-actions .mini-btn:not(.icon-only) {
    display: none !important;
  }
  .lp-topnav .lp-navdrop {
    width: 100%;
  }
  .lp-topnav .lp-navdrop-trigger {
    width: 100%;
    justify-content: space-between;
  }
  .lp-topnav .lp-navdrop-panel {
    position: static;
    left: auto;
    transform: none;
    width: 100% !important;
    box-shadow: none;
    margin-top: var(--sp-2);
  }
  .lp-footer-grid {
    grid-template-columns: 1fr !important;
    gap: var(--sp-6) !important;
  }
  .lp-footer-cols {
    grid-template-columns: 1fr !important;
  }
  .lp-navdrop-panel {
    max-width: calc(100vw - 48px);
  }
  .lp-navdrop-cols {
    grid-template-columns: 1fr !important;
  }
  .route-search-pill {
    flex-direction: column !important;
    align-items: stretch !important;
    overflow-x: visible;
  }
  .route-search-pill .field {
    width: 100% !important;
  }
  .route-search-pill .icon-btn {
    align-self: center;
    transform: rotate(0deg) !important;
  }
  .route-search-pill .mini-btn {
    margin-left: 0 !important;
    width: 100%;
  }
}
.u-overflow-auto {
  overflow: auto;
}
.u-overflow-x-auto {
  overflow-x: auto;
  overflow-y: hidden;
}
.u-overflow-y-auto {
  overflow-y: auto;
  overflow-x: hidden;
}
.u-overflow-hidden {
  overflow: hidden;
}
.u-overflow-auto,
.u-overflow-x-auto,
.u-overflow-y-auto {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-tertiary) 22%, transparent) transparent;
}
.u-overflow-auto:hover,
.u-overflow-x-auto:hover,
.u-overflow-y-auto:hover {
  scrollbar-color: color-mix(in srgb, var(--text-tertiary) 42%, transparent) transparent;
}
.u-overflow-auto::-webkit-scrollbar,
.u-overflow-x-auto::-webkit-scrollbar,
.u-overflow-y-auto::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.u-overflow-auto::-webkit-scrollbar-track,
.u-overflow-x-auto::-webkit-scrollbar-track,
.u-overflow-y-auto::-webkit-scrollbar-track {
  background: transparent;
}
.u-overflow-auto::-webkit-scrollbar-thumb,
.u-overflow-x-auto::-webkit-scrollbar-thumb,
.u-overflow-y-auto::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--text-tertiary) 22%, transparent);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background-clip: padding-box;
  transition: background-color var(--dur-moderate) var(--ease-out);
}
.u-overflow-auto:hover::-webkit-scrollbar-thumb,
.u-overflow-x-auto:hover::-webkit-scrollbar-thumb,
.u-overflow-y-auto:hover::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--text-tertiary) 42%, transparent);
}
.u-items-start {
  align-items: flex-start;
}
.u-items-center {
  align-items: center;
}
.u-items-end {
  align-items: flex-end;
}
.u-items-stretch {
  align-items: stretch;
}
.u-justify-start {
  justify-content: flex-start;
}
.u-justify-center {
  justify-content: center;
}
.u-justify-end {
  justify-content: flex-end;
}
.u-justify-between {
  justify-content: space-between;
}
.u-w-full {
  width: 100%;
}
.u-w-fit {
  width: fit-content;
}
.u-w-min {
  width: min-content;
}
.u-w-max {
  width: max-content;
}
.u-min-w-0 {
  min-width: 0;
}
.u-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.u-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.u-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.u-nowrap {
  white-space: nowrap;
}
.u-tabular-nums {
  font-variant-numeric: tabular-nums;
}
.u-numeric {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.u-focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}
.u-hit-area {
  position: relative;
}
.u-hit-area::after {
  content: "";
  position: absolute;
  inset: -8px;
}
.u-cursor-pointer {
  cursor: pointer;
}
.u-cursor-default {
  cursor: default;
}
.u-cursor-not-allowed {
  cursor: not-allowed;
}
.u-cursor-grab {
  cursor: grab;
}
.u-cursor-grabbing {
  cursor: grabbing;
}
.u-cursor-resize-col {
  cursor: col-resize;
}
.u-no-pointer-events {
  pointer-events: none;
}
.u-scroll-lock {
  overflow: hidden !important;
}
.u-hidden {
  display: none !important;
}
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: var(--sp-0);
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 80;
  padding: var(--space-label-gap) var(--sp-6);
  border-radius: var(--r-control);
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: var(--fs-1);
  font-weight: 500;
  box-shadow: var(--shadow-2);
  border: 1px solid var(--border-default);
  transition: top var(--dur-default) var(--ease-out);
}
.skip-link:focus {
  top: 16px;
  outline: none;
  box-shadow: var(--ring-focus), var(--shadow-2);
}
@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}
.u-surface-subtle-border {
  border: 1px solid var(--border-subtle-line);
}
.u-surface-raised {
  background: var(--bg-raised);
  box-shadow: var(--shadow-surface-rest);
}
.u-surface-sunken {
  background: var(--bg-sunken);
}
.u-surface-selected {
  border-color: var(--accent);
  background: var(--accent-wash);
}
.ai-surface {
  position: relative;
  border-radius: var(--radius-32);
  padding: var(--sp-7);
  overflow: hidden;
  border: 1px solid var(--accent-wash-border);
  background-color: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
}
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-inline-gap);
}
.swatch {
  border-radius: var(--r-float);
  overflow: hidden;
  border: 1px solid var(--border-default);
}
.swatch-fill {
  height: 56px;
}
.swatch-label {
  padding: var(--sp-4) var(--sp-4);
  background: var(--bg-base);
}
.swatch-label .step {
  font-size: var(--fs-1);
  font-weight: 600;
}
.swatch-label .hex {
  font-size: 10.5px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-5);
}
.brand-swatch-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(6, 1fr);
  grid-template-rows: repeat(2, 140px);
  gap: 2px;
  border-radius: var(--radius-32);
  overflow: hidden;
}
.brand-swatch {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sp-5);
  font-family: var(--font-sans);
}
.brand-swatch.hero {
  grid-row: span 2;
}
.brand-swatch-name {
  font-size: var(--fs-1);
  font-weight: 700;
  letter-spacing: var(--ls-6);
  text-transform: uppercase;
}
.brand-swatch.hero .brand-swatch-name {
  font-size: var(--fs-3);
}
.brand-swatch-info {
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 1.6;
  opacity: .9;
  font-variant-numeric: tabular-nums;
}
.brand-swatch.hero .brand-swatch-info {
  font-size: 11px;
}
.type-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-8);
  padding: var(--sp-6) var(--sp-0);
  border-bottom: 1px solid var(--divider);
  overflow: hidden;
}
.type-row:last-child {
  border-bottom: none;
}
.type-row .meta {
  width: 170px;
  flex-shrink: 0;
}
.type-row .meta .name {
  font-size: var(--fs-1);
  font-weight: 600;
}
.type-row .meta .spec {
  font-size: var(--fs-1);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.type-row .sample {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.doctable-wrap {
  border-radius: var(--radius-32);
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border-default);
  background: var(--bg-base);
}
table.doctable {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  font-size: var(--fs-1);
  display: table;
}
table.doctable th {
  text-align: left;
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: var(--ls-7);
  color: var(--text-tertiary);
  font-weight: 600;
  padding: var(--sp-5) var(--sp-5) var(--space-dense-cell-inset);
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}
table.doctable td {
  padding: var(--sp-5) var(--sp-5);
  border-bottom: 1px solid var(--divider);
  vertical-align: top;
  color: var(--text-secondary);
}
table.doctable tr:last-child td {
  border-bottom: none;
}
table.doctable td.k {
  font-family: var(--font-display);
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
}
table.doctable {
  background: var(--bg-base);
}
table.doctable th:first-child,
table.doctable td:first-child {
  padding-left: var(--sp-6);
}
table.doctable {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-tertiary) 22%, transparent) transparent;
}
table.doctable:hover {
  scrollbar-color: color-mix(in srgb, var(--text-tertiary) 42%, transparent) transparent;
}
table.doctable::-webkit-scrollbar {
  height: 5px;
}
table.doctable::-webkit-scrollbar-track {
  background: transparent;
}
table.doctable::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--text-tertiary) 22%, transparent);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background-clip: padding-box;
  transition: background-color var(--dur-moderate) var(--ease-out);
}
table.doctable:hover::-webkit-scrollbar-thumb,
table.doctable::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--text-tertiary) 42%, transparent);
}
.dodont {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}
.dodont .col {
  padding: var(--sp-0);
}
.dodont h5 {
  margin: var(--sp-0) var(--sp-0) var(--sp-5);
  font-size: var(--fs-3);
  font-weight: 600;
}
.dodont .do h5 {
  color: var(--dodont-do-text);
}
.dodont .dont h5 {
  color: var(--dodont-dont-text);
}
.dodont ul {
  margin: var(--sp-0);
  padding: var(--sp-0);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.dodont li {
  font-size: var(--fs-2);
  color: var(--text-secondary);
  line-height: var(--lh-2);
  padding-left: var(--sp-6);
  position: relative;
}
.dodont li:before {
  position: absolute;
  left: 0;
  top: 1px;
  font-size: var(--fs-1);
}
.dodont .do li:before {
  content: "\2713";
  color: var(--badge-live-mono);
}
.dodont .dont li:before {
  content: "\2715";
  color: var(--dodont-dont-mono);
}
.u-light-only {
  display: inline;
}
.u-dark-only {
  display: none;
}
:root[data-theme=dark] .u-light-only {
  display: none;
}
:root[data-theme=dark] .u-dark-only {
  display: inline;
}
.chip,
.flow-step,
.state-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  font-size: var(--fs-1);
  font-weight: 500;
  background: var(--bg-track);
  border: 1px solid transparent;
  color: var(--text-secondary);
  max-width: 100%;
  overflow-wrap: break-word;
}
.chip-row {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.codeblock {
  background: var(--codeblock-bg);
  color: #D7DEE8;
  font-family: var(--font-mono);
  border-radius: var(--r-card);
  padding: var(--sp-6) var(--sp-7);
  font-size: var(--fs-1);
  overflow-x: auto;
  line-height: var(--lh-5);
}
.codeblock .tok-key {
  color: #8FB8FF;
}
.codeblock .tok-val {
  color: #9FE6B0;
}
.codeblock .tok-cm {
  color: #6B7280;
}
.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-5);
  align-items: start;
}
.two-col > *,
.three-col > * {
  min-width: 0;
}
.pipeline-cols {
  display: grid;
}
.pipeline-col {
  padding: var(--sp-7);
  border-left: 1px solid var(--border-default);
}
.pipeline-col:first-child {
  border-left: none;
}
.access-note {
  padding: var(--space-surface-inset) var(--sp-6);
  margin-top: var(--space-block-gap);
  border-radius: var(--r-card);
  background: var(--accent-wash);
  border: 1px solid var(--accent-wash-border);
  font-size: var(--fs-1);
  color: var(--text-secondary);
}
.lp-jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  border: 1px solid var(--border-subtle-line);
  border-radius: var(--radius-32);
  background: var(--bg-base);
  padding: var(--sp-8);
}
.lp-jump-pill {
  transition: background var(--dur-default) var(--ease-out), border-color var(--dur-default) var(--ease-out);
}
.lp-jump-pill:hover {
  background: var(--bg-raised);
  border-color: var(--accent);
  color: var(--text-primary);
}
.lp-jump-count {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
}
.lp-group-divider {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--border-default);
}
.lp-group-title {
  font-family: var(--font-display);
  font-size: var(--fs-8);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-1);
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
}
.lp-group-desc {
  font-size: var(--fs-2);
  color: var(--text-secondary);
  margin: var(--sp-0);
}
.lp-group-count {
  font-size: var(--fs-1);
  color: var(--text-tertiary);
  white-space: nowrap;
}
.section-desc {
  font-size: var(--fs-2);
  color: var(--text-secondary);
  max-width: 680px;
  line-height: var(--lh-4);
  margin-bottom: var(--space-block-gap);
}
.access-note b {
  color: var(--text-primary);
}
.footer-nav {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--border-default);
  font-size: var(--fs-2);
  color: var(--text-tertiary);
}
.stub-banner {
  display: flex;
  gap: var(--space-inline-gap);
  align-items: flex-start;
  padding: var(--sp-7) var(--sp-7);
  border-radius: var(--r-panel);
  background: var(--bg-sunken);
  border: 1px solid var(--border-default);
  margin-bottom: var(--sp-9);
}
.stub-banner p {
  font-size: var(--fs-2);
  color: var(--text-secondary);
  line-height: var(--lh-3);
}
.stub-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.gs-row-text h4 .n {
  color: var(--text-tertiary);
  font-weight: 400;
  margin-right: var(--sp-2);
}
@media (max-width: 900px) {
  :root {
    --hero-navw:0px;
    --hero-gutter:var(--sp-7);
    --hero-gutter-top:var(--sp-9);
  }
  .shell {
    grid-template-columns: 1fr;
  }
  .sidenav {
    display: none;
  }
  .workspace {
    grid-column: 1;
  }
  #nav-toggle.nav-toggle {
    display: flex;
  }
  .page {
    padding: var(--sp-9) var(--sp-7);
  }
  .principles,
  .dodont,
  .two-col,
  .three-col,
  .ov-hero,
  .ov-card-grid {
    grid-template-columns: 1fr !important;
  }
  .dodont:before {
    display: none;
  }
  .swatch-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .icon-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .illus-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .stub-list {
    grid-template-columns: 1fr !important;
  }
  .lp-footer-grid {
    grid-template-columns: 1fr !important;
  }
  .lp-footer-cols {
    grid-template-columns: 1fr 1fr !important;
  }
  .spacing-scale-grid {
    grid-auto-flow: row !important;
    grid-template-columns: 1fr !important;
  }
  .bw-versions-grid {
    grid-template-columns: 1fr !important;
  }
  .bw-versions-grid svg {
    max-width: 100%;
    height: auto;
  }
  .lp-bento-4up {
    flex-direction: column !important;
    min-height: 0 !important;
  }
  .lp-bento-4up > div {
    flex: none !important;
    min-height: 180px;
  }
  .lp-bento-grid {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }
  .lp-bento-grid > div {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 180px;
  }
  .route-search-pill {
    overflow-x: auto;
    width: 100%;
  }
  .route-search-pill > * {
    flex-shrink: 0;
  }
  .spec-frame {
    overflow-x: auto;
    max-width: 100%;
  }
  .spec-frame > * {
    flex-shrink: 0;
  }
  .tab-pillbar {
    max-width: 100%;
    overflow-x: auto;
  }
  .tab-pillbar .tab-pill {
    flex-shrink: 0;
  }
  .stat-grid-3col {
    grid-template-columns: 1fr !important;
  }
  .stat-grid-3col .stat-block {
    border-right: none !important;
  }
  .pair-row {
    gap: var(--sp-2);
  }
  .pair-row .hx {
    width: 44px;
  }
  .pair-row .tk {
    min-width: 28px;
  }
  .product-row .name {
    width: auto !important;
  }
  .product-row .tagline {
    flex-basis: 100% !important;
  }
  .pipeline-cols {
    grid-template-columns: 1fr !important;
  }
  .pipeline-col {
    border-left: none;
    border-top: 1px solid var(--border-default);
  }
  .pipeline-col:first-child {
    border-top: none;
  }
  .searchbox {
    display: none;
  }
  #shell.mobile-nav-open .sidenav {
    display: block;
    position: fixed;
    top: var(--shell-top-h);
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    z-index: 40;
    box-shadow: var(--shadow-4);
  }
  #shell.mobile-nav-open .mobile-nav-scrim {
    display: block;
    position: fixed;
    inset: var(--shell-top-h) 0 0 0;
    background: rgba(11, 13, 16, .4);
    z-index: 35;
  }
}
.scale-row {
  display: flex;
  align-items: center;
  gap: var(--space-inline-gap);
  padding: var(--sp-4) var(--sp-0);
}
.scale-row .name {
  width: 96px;
  flex-shrink: 0;
}
.scale-row .name b {
  font-size: var(--fs-1);
  display: block;
}
.scale-row .name span {
  font-size: var(--fs-1);
  color: var(--text-tertiary);
}
.scale-strip {
  display: flex;
  flex: 1;
  border-radius: var(--r-chip);
  overflow: hidden;
  height: 30px;
  border: 1px solid var(--border-default);
}
.scale-strip .step {
  flex: 1;
  position: relative;
}
.scale-strip .step.anchor {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7), inset 0 0 0 3px rgba(0, 0, 0, .15);
}
.pair-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-0);
  border-bottom: 1px solid var(--divider);
  font-size: var(--fs-1);
  min-width: 0;
}
.pair-row:last-child {
  border-bottom: none;
}
.pair-row .tk {
  flex: 0 1 120px;
  min-width: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-weight: 500;
}
.pair-row .sw {
  width: 20px;
  height: 20px;
  border-radius: var(--r-chip);
  border: 1px solid var(--border-default);
  flex-shrink: 0;
}
.pair-row .hx {
  width: 56px;
  color: var(--text-tertiary);
  font-size: var(--fs-1);
  flex-shrink: 0;
}
.pair-row .lbl {
  color: var(--text-secondary);
  font-size: var(--fs-1);
  min-width: 0;
  overflow-wrap: break-word;
}
.copy-swatch {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.copy-swatch:hover {
  filter: brightness(1.06);
}
.copy-swatch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.attn-row {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-0);
}
.attn-swatch {
  width: 52px;
  height: 26px;
  border-radius: var(--r-chip);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
}
.attn-label {
  font-size: var(--fs-1);
  color: var(--text-secondary);
}
.icon-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-chrome-gap);
}
.icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-4);
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
  background: var(--bg-base);
}
.icon-tile-glyph {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-tile svg {
  color: var(--text-secondary);
}
.illus-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-chrome-gap);
}
.illus-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-4);
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
  background: var(--bg-base);
}
.illus-tile svg {
  width: 64px;
  height: 64px;
}
.illus-tile .lbl {
  font-size: 10.5px;
  color: var(--text-tertiary);
  text-align: center;
  line-height: var(--lh-3);
}
.icon-tile .lbl {
  font-size: var(--fs-1);
  color: var(--text-tertiary);
}
.motion-row {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-5) var(--sp-0);
  border-bottom: 1px solid var(--divider);
}
.motion-row:last-child {
  border-bottom: none;
}
.motion-row .meta {
  width: 220px;
  flex-shrink: 0;
  font-size: var(--fs-1);
}
.motion-row .meta b {
  font-size: var(--fs-1);
  display: block;
}
.motion-row .meta span {
  color: var(--text-tertiary);
  font-size: var(--fs-1);
}
.motion-demo {
  width: 120px;
  height: 32px;
  position: relative;
  background: var(--bg-sunken);
  border-radius: var(--radius-8);
  overflow: hidden;
}
.motion-demo .dot {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-6);
  background: var(--accent);
}
.motion-row:hover .dot {
  transform: translateX(80px);
}
.motion-fast .dot {
  transition: transform 100ms cubic-bezier(.2, 0, 0, 1);
}
.motion-mod .dot {
  transition: transform 150ms cubic-bezier(.2, 0, 0, 1);
}
.motion-def .dot {
  transition: transform 200ms cubic-bezier(0, 0, .2, 1);
}
.motion-slow .dot {
  transition: transform 300ms cubic-bezier(.2, 0, 0, 1.4);
}
.motion-spring .dot {
  transition: transform 400ms var(--ease-spring);
}
.opacity-row {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-4) var(--sp-0);
}
.opacity-row .box {
  width: 56px;
  height: 36px;
  border-radius: var(--radius-8);
  background: var(--n-950);
  flex-shrink: 0;
}
.opacity-row .lbl {
  font-size: var(--fs-1);
  color: var(--text-secondary);
  width: 150px;
}
.opacity-row .val {
  font-size: var(--fs-1);
  color: var(--text-tertiary);
}
.density-block {
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
  overflow: hidden;
}
.density-block .row {
  display: flex;
  align-items: center;
  padding: var(--sp-0) var(--space-surface-inset);
  border-bottom: 1px solid var(--divider);
  font-size: var(--fs-1);
  color: var(--text-secondary);
  border-top: 3px solid transparent;
}
.density-block .row:last-child {
  border-bottom: none;
}
.glass-demo {
  position: relative;
  height: 150px;
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--bg-sunken);
}
.glass-card {
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  bottom: 24px;
  border-radius: var(--r-card);
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-card-border);
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-1);
  color: var(--text-secondary);
}
.glass-card.blur-lg {
  backdrop-filter: blur(var(--glass-blur-lg));
}
.u-glass-0,
.ash-frame.ash-glass .u-glass-0 {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.u-glass-1,
.ash-frame.ash-glass .u-glass-1 {
  background: var(--glass-card-bg-subtle);
  border: 1px solid transparent;
  box-shadow: var(--shadow-0);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.u-glass-2,
.ash-frame.ash-glass .u-glass-2 {
  background: var(--glass-card-bg);
  border: 1px solid transparent;
  box-shadow: var(--surface-sheen), var(--shadow-1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.u-glass-3,
.ash-frame.ash-glass .u-glass-3 {
  background: var(--glass-card-bg-strong);
  border: 1px solid var(--glass-card-border);
  box-shadow: var(--surface-sheen), var(--shadow-3);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}
.u-glass-4,
.ash-frame.ash-glass .u-glass-4 {
  background: var(--glass-card-bg-strong);
  border: 1px solid var(--glass-card-border);
  box-shadow: var(--surface-sheen), var(--shadow-4);
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
  backdrop-filter: blur(var(--glass-blur-lg));
}
.u-glass-1,
.u-glass-2,
.u-glass-3,
.u-glass-4 {
  transition: box-shadow var(--dur-default) var(--ease-lift), border-color var(--dur-default) var(--ease-lift);
}
:is(.u-glass-1, .u-glass-2):is(a, button, [role=button], [role=link], .clickable):hover,
:is(.u-glass-1, .u-glass-2).is-hover,
.ash-frame.ash-glass :is(.u-glass-1, .u-glass-2):is(a, button, [role=button], [role=link], .clickable):hover {
  box-shadow: var(--surface-sheen), var(--shadow-2);
}
:is(.u-glass-3, .u-glass-4):is(a, button, [role=button], [role=link], .clickable):hover,
:is(.u-glass-3, .u-glass-4).is-hover,
.ash-frame.ash-glass :is(.u-glass-3, .u-glass-4):is(a, button, [role=button], [role=link], .clickable):hover {
  box-shadow: var(--surface-sheen), var(--shadow-4);
}
:is(.u-glass-1, .u-glass-2, .u-glass-3, .u-glass-4):focus-visible,
:is(.u-glass-1, .u-glass-2, .u-glass-3, .u-glass-4).is-focus,
.ash-frame.ash-glass :is(.u-glass-1, .u-glass-2, .u-glass-3, .u-glass-4):focus-visible {
  outline: none;
  box-shadow: var(--ring-focus), var(--shadow-1);
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
  .u-glass-3,
  .u-glass-4,
  .ash-frame.ash-glass .u-glass-3,
  .ash-frame.ash-glass .u-glass-4 {
    background: var(--bg-base);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .u-glass-1,
  .ash-frame.ash-glass .u-glass-1 {
    background: var(--bg-sunken);
  }
  .u-glass-2,
  .u-glass-3,
  .u-glass-4,
  .ash-frame.ash-glass .u-glass-2,
  .ash-frame.ash-glass .u-glass-3,
  .ash-frame.ash-glass .u-glass-4 {
    background: var(--bg-base);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.glass-rt .u-glass-1 {
  background: var(--bg-sunken);
}
.glass-rt :is(.u-glass-2, .u-glass-3, .u-glass-4) {
  background: var(--bg-base);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (prefers-contrast: more) {
  .u-glass-1,
  .ash-frame.ash-glass .u-glass-1 {
    background: var(--bg-sunken);
    border-color: var(--border-default);
  }
  .u-glass-2,
  .u-glass-3,
  .u-glass-4,
  .ash-frame.ash-glass .u-glass-2,
  .ash-frame.ash-glass .u-glass-3,
  .ash-frame.ash-glass .u-glass-4 {
    background: var(--bg-base);
    border-color: var(--border-default);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (forced-colors: active) {
  .u-glass-1,
  .u-glass-2,
  .u-glass-3,
  .u-glass-4 {
    background: Canvas;
    border: 1px solid CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.glass-spec-atmos {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-panel);
  padding: var(--sp-8);
  background:
    linear-gradient(color-mix(in srgb, var(--bg-canvas) 62%, transparent), color-mix(in srgb, var(--bg-canvas) 62%, transparent)),
    radial-gradient(
      circle at 30% 30%,
      color-mix(in srgb, var(--blue-700) 22%, transparent),
      transparent 65%),
    radial-gradient(
      circle at 70% 30%,
      color-mix(in srgb, var(--aqua-500) 24%, transparent),
      transparent 65%),
    radial-gradient(
      circle at 30% 70%,
      color-mix(in srgb, var(--violet-600) 20%, transparent),
      transparent 65%),
    var(--bg-canvas);
}
.glass-spec-tag {
  display: inline-block;
  margin-bottom: var(--sp-5);
  font-size: var(--fs-1);
  color: var(--text-tertiary);
}
.glass-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-block-gap);
}
@media (max-width: 900px) {
  .glass-spec-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.glass-spec-cap {
  margin-top: var(--sp-4);
  font-size: var(--fs-1);
  color: var(--text-tertiary);
  line-height: var(--lh-4);
}
.glass-spec-cap b {
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
}
.glass-spec-title {
  display: block;
  font-size: var(--fs-4);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.glass-spec-rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.glass-spec-rows > div {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-float);
  background: var(--bg-base);
  font-size: var(--fs-1);
  color: var(--text-secondary);
}
.glass-spec-rows > div b {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.glass-spec-states {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
}
@media (max-width: 900px) {
  .glass-spec-states {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.glass-spec-state {
  min-height: 96px;
  padding: var(--sp-5);
  border-radius: var(--r-panel);
  font-size: var(--fs-1);
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-3);
}
.glass-spec-state b {
  color: var(--text-primary);
  font-size: var(--fs-2);
  font-weight: var(--fw-semibold);
}
.ovl-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-chrome-gap);
  padding: var(--sp-6) var(--sp-7);
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
}
.ovl-head .t {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.ovl-head .d {
  font-size: var(--fs-1);
  color: var(--text-tertiary);
  margin-top: var(--sp-1);
}
.ovl-close {
  display: flex;
  flex-shrink: 0;
  padding: var(--sp-2);
  border-radius: var(--radius-8);
  color: var(--text-tertiary);
  cursor: pointer;
  background: none;
  border: none;
}
.ovl-close:hover {
  background: var(--bg-sunken);
  color: var(--text-primary);
}
.ovl-close svg {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
}
.ovl-body {
  padding: var(--sp-7) var(--sp-7);
  font-size: var(--fs-1);
  color: var(--text-secondary);
  line-height: var(--lh-4);
  flex: 1;
  min-height: 0;
}
.ovl-body.scrollable {
  overflow-y: auto;
}
.ovl-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-chrome-gap);
  padding: var(--space-surface-inset) var(--sp-7);
  border-top: 1px solid var(--divider);
  background: var(--bg-canvas);
  flex-shrink: 0;
}
.modal-demo {
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-4);
  overflow: hidden;
  border-radius: var(--r-modal);
  max-height: 320px;
}
.modal-demo.compact {
  width: 280px;
}
.modal-demo.standard {
  width: 400px;
}
.modal-demo.large {
  width: 540px;
}
.drawer-demo {
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-4);
  overflow: hidden;
  border-radius: var(--r-panel) 0 0 var(--r-panel);
  height: 300px;
  margin-left: auto;
}
.drawer-demo.narrow {
  width: 220px;
}
.drawer-demo.standard {
  width: 300px;
}
.drawer-demo.wide {
  width: 400px;
}
.popover-demo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}
.popover-demo .surface {
  position: relative;
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-24);
  box-shadow: var(--shadow-3);
  padding: var(--space-surface-inset) var(--sp-6);
  font-size: var(--fs-1);
  color: var(--text-primary);
  min-width: 170px;
}
.popover-demo .surface::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  background: var(--bg-base);
  border: 1px solid var(--border-default);
}
.popover-demo.top .surface::after {
  bottom: -5px;
  left: 22px;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.popover-demo.bottom .surface::after {
  top: -5px;
  left: 22px;
  border-bottom: none;
  border-right: none;
  transform: rotate(45deg);
}
.cmdk-demo {
  width: 400px;
  border-radius: var(--r-modal);
  overflow: hidden;
  background: var(--glass-card-bg-strong);
  border: 1px solid var(--glass-card-border);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-ovl);
}
.cmdk-demo .cmdk-input {
  display: flex;
  align-items: center;
  gap: var(--space-chrome-gap);
  padding: var(--space-surface-inset) var(--sp-6);
  border-bottom: 1px solid var(--divider);
  font-size: var(--fs-2);
  color: var(--text-tertiary);
}
.cmdk-demo .cmdk-input svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.cmdk-demo .cmdk-results {
  padding: var(--sp-4);
  max-height: 200px;
  overflow-y: auto;
}
.cmdk-demo .cmdk-group {
  padding: var(--sp-4) var(--space-label-gap) var(--sp-2);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: var(--ls-7);
  color: var(--text-disabled);
  font-weight: 600;
}
.cmdk-demo .cmdk-item {
  display: flex;
  align-items: center;
  gap: var(--space-chrome-gap);
  padding: var(--sp-4) var(--space-label-gap);
  border-radius: var(--radius-24);
  font-size: var(--fs-1);
  color: var(--text-secondary);
  cursor: pointer;
}
.cmdk-demo .cmdk-item svg {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
  flex-shrink: 0;
  color: var(--text-tertiary);
}
.cmdk-demo .cmdk-item:hover {
  background: var(--bg-sunken);
  color: var(--text-primary);
}
.cmdk-demo .cmdk-item.active {
  background: var(--accent-wash);
  color: var(--accent);
}
.cmdk-demo .cmdk-item.active svg {
  color: var(--accent);
}
.cmdk-demo .cmdk-item .kbd {
  margin-left: auto;
  font-size: 10.5px;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-6);
  background: var(--bg-sunken);
  border: 1px solid var(--border-default);
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.cmdk-demo .cmdk-empty {
  padding: var(--sp-9) var(--sp-7);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--fs-1);
}
.scrim-demo {
  position: relative;
  width: 220px;
  height: 130px;
  flex-shrink: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--border-default);
  background: var(--bg-canvas);
}
.scrim-demo .bg-content {
  position: absolute;
  inset: 0;
  padding: var(--space-surface-inset-sm);
  font-size: var(--fs-1);
  color: var(--text-tertiary);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.scrim-demo .scrim {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 40, .4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.scrim-demo .scrim.strong {
  background: rgba(16, 24, 40, .68);
}
.scrim-demo .scrim-label {
  background: var(--bg-base);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-8);
  font-size: var(--fs-1);
  color: var(--text-primary);
  box-shadow: var(--shadow-2);
}
.brand-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.brand-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-inline-gap);
  padding: var(--sp-7) var(--space-label-gap);
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
  background: var(--bg-base);
}
.brand-tile .lbl {
  font-size: var(--fs-1);
  color: var(--text-tertiary);
  text-align: center;
}
.product-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--space-inline-gap);
  padding: var(--space-surface-inset) var(--sp-6);
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
  background: var(--bg-base);
  transition:
    border-color var(--dur-default) var(--ease-lift),
    box-shadow var(--dur-default) var(--ease-lift),
    transform var(--dur-default) var(--ease-lift);
}
.product-row:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-1);
  transform: translateY(-1px);
}
.product-row + .product-row {
  margin-top: var(--space-label-gap);
}
.access-note + .product-row {
  margin-top: var(--space-block-gap);
}
.product-dot4 {
  display: flex;
}
.product-dot4 i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-left: -5px;
  border: 2px solid var(--bg-base);
}
.product-dot4 i:first-child {
  margin-left: var(--sp-0);
}
.product-row .name {
  font-weight: 600;
  font-size: var(--fs-2);
  width: 150px;
  flex-shrink: 0;
}
.product-row .tagline {
  font-size: var(--fs-1);
  color: var(--text-tertiary);
  flex: 1;
  min-width: 0;
}
.state-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.spec-frame {
  border: 1px solid var(--border-subtle-line);
  border-radius: var(--r-panel);
  position: relative;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 23px,
      var(--spec-grid-line, var(--border-subtle-line)) 23px,
      var(--spec-grid-line, var(--border-subtle-line)) 24px),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 23px,
      var(--spec-grid-line, var(--border-subtle-line)) 23px,
      var(--spec-grid-line, var(--border-subtle-line)) 24px),
    var(--bg-canvas);
  padding: var(--sp-9);
  display: flex;
  gap: var(--space-inline-gap);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 0 0 1px rgba(16, 24, 40, .02),
    0 1px 2px rgba(16, 24, 40, .03);
}
.spec-frame::before {
  content: "SPECIMEN";
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: var(--ls-8);
  color: var(--text-disabled);
}
#page-c-containers .spec-frame {
  --spec-grid-line:color-mix(in srgb, var(--border-subtle-line) 55%, transparent);
}
.spec-label {
  font-size: var(--fs-1);
  color: var(--text-tertiary);
  margin-top: var(--sp-4);
}
.mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  height: 40px;
  padding: var(--sp-0) var(--sp-7);
  border-radius: var(--r-button);
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-2);
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  line-height: 1;
  transition:
    background var(--dur-default) var(--ease-out),
    border-color var(--dur-default) var(--ease-out),
    box-shadow var(--dur-default) var(--ease-lift),
    opacity var(--dur-default) var(--ease-out);
}
.mini-btn:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-accent-hover);
}
.mini-btn:active {
  box-shadow: none;
}
.mini-btn.secondary {
  background: var(--bg-base);
  color: var(--text-primary);
  border-color: transparent;
  box-shadow: var(--shadow-surface-rest);
}
.sample-row .mini-btn.secondary {
  box-shadow: none;
  background: var(--bg-track);
}
.mini-btn.secondary:hover {
  background: var(--bg-canvas);
  box-shadow: var(--shadow-surface-hover);
}
.mini-btn.tertiary {
  background: var(--bg-sunken);
  color: var(--text-primary);
  border-color: transparent;
}
.mini-btn.tertiary:hover {
  background: var(--border-subtle-line);
  box-shadow: none;
}
.mini-btn.destructive {
  background: var(--destructive);
  color: #fff;
}
.mini-btn.destructive:hover {
  background: var(--destructive-hover);
  box-shadow: var(--shadow-destructive-hover);
}
.mini-btn.destructive:active {
  background: var(--destructive-active);
}
.mini-btn.ghost {
  background: transparent;
  color: var(--accent);
  border-color: transparent;
}
.mini-btn.ghost:hover {
  background: var(--accent-wash);
  box-shadow: none;
  transform: none;
}
.mini-btn.white {
  position: relative;
  isolation: isolate;
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--text-primary);
  border: 1px solid var(--glass-card-border);
  box-shadow:
    var(--shadow-surface-rest),
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -8px 12px -8px rgba(0, 0, 0, .3);
  transition: box-shadow var(--dur-default) var(--ease-out), transform var(--dur-default) var(--ease-lift);
}
.mfx-sparkle {
  transform-origin: center;
  transform-box: fill-box;
  animation: mfx-sparkle-twinkle 1.6s ease-in-out infinite;
}
.mfx-sparkle.s2 {
  animation-delay: .3s;
}
.mfx-sparkle.s3 {
  animation-delay: .6s;
}
.mfx-sparkle.s4 {
  animation-delay: .9s;
}
@keyframes mfx-sparkle-twinkle {
  0%, 100% {
    opacity: .15;
    transform: scale(.6);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}
.mini-btn.white:hover {
  box-shadow: var(--shadow-surface-hover);
}
.mini-btn[disabled] {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}
.mini-btn.loading {
  color: transparent;
  pointer-events: none;
  position: relative;
}
.mini-btn.loading::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  animation: spin .7s linear infinite;
}
.mini-btn.secondary.loading::after,
.mini-btn.tertiary.loading::after,
.mini-btn.ghost.loading::after {
  border-color: var(--border-strong);
  border-top-color: var(--accent);
}
.mini-btn.sm {
  height: 32px;
  padding: var(--sp-0) var(--sp-5);
  font-size: var(--fs-1);
  gap: var(--sp-3);
  border-radius: var(--r-button-sm);
}
.mini-btn.lg {
  height: 48px;
  padding: var(--sp-0) var(--sp-8);
  font-size: 14.5px;
  gap: var(--sp-4);
  border-radius: var(--r-button-lg);
}
.mini-btn svg {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
  flex-shrink: 0;
}
.mini-btn.sm svg {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
}
.mini-btn.icon-only {
  width: 40px;
  padding: var(--sp-0);
  border-radius: 50%;
}
.mini-btn.icon-only.sm {
  width: 32px;
}
.mini-btn.icon-only.lg {
  width: 48px;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background var(--dur-default) var(--ease-out),
    border-color var(--dur-default) var(--ease-out),
    color var(--dur-default) var(--ease-out);
}
.icon-btn svg {
  width: 17px;
  height: 17px;
}
.icon-btn:hover {
  background: var(--bg-sunken);
  color: var(--text-primary);
}
.icon-btn.subtle {
  background: var(--bg-sunken);
}
.icon-btn.subtle:hover {
  background: var(--border-subtle-line);
}
.icon-btn.emphasized {
  background: var(--accent-wash);
  color: var(--accent);
}
.icon-btn.emphasized:hover {
  background: var(--accent);
  color: #fff;
}
.icon-btn.destructive:hover {
  background: var(--badge-error-bg);
  color: var(--destructive);
}
.icon-btn[disabled] {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-group {
  display: inline-flex;
}
.btn-group .mini-btn {
  border-radius: var(--radius-0);
  margin-left: -1px;
}
.btn-group .mini-btn:first-child {
  border-top-left-radius: var(--r-button);
  border-bottom-left-radius: var(--r-button);
  margin-left: var(--sp-0);
}
.btn-group .mini-btn:last-child {
  border-top-right-radius: var(--r-button);
  border-bottom-right-radius: var(--r-button);
}
.btn-group .mini-btn.secondary {
  position: relative;
}
.btn-group .mini-btn.secondary + .mini-btn.secondary {
  border-left-color: var(--border-default);
}
.btn-group .mini-btn.secondary:hover {
  z-index: 1;
}
.split-btn {
  display: inline-flex;
}
.split-btn .mini-btn:first-child {
  border-top-right-radius: var(--radius-0);
  border-bottom-right-radius: var(--radius-0);
}
.split-btn .divider {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, .28);
}
.split-btn .mini-btn.secondary + .divider {
  background: var(--border-default);
}
.split-btn .caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  border: none;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  border-top-right-radius: var(--r-button);
  border-bottom-right-radius: var(--r-button);
  transition: background var(--dur-default) var(--ease-out);
}
.split-btn .caret:hover {
  background: var(--accent-hover);
}
.split-btn.secondary .caret {
  background: var(--bg-base);
  color: var(--text-secondary);
  border: 1px solid transparent;
  border-left: 1px solid var(--border-default);
}
.split-btn.secondary .caret:hover {
  background: var(--bg-canvas);
}
.nv-link {
  color: var(--link);
  font-size: var(--fs-2);
  font-weight: 500;
  cursor: pointer;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-moderate) var(--ease-out);
}
.nv-link:hover {
  text-decoration: underline;
  color: var(--accent-hover);
}
.nv-link.subtle {
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
}
.nv-link.subtle:hover {
  color: var(--text-primary);
  text-decoration-color: var(--text-secondary);
}
.nv-link.external {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.nv-link.external svg {
  width: 12px;
  height: 12px;
}
.mini-input {
  height: 40px;
  padding: var(--sp-0) var(--sp-5);
  border-radius: var(--r-control);
  border: 1px solid var(--border-default);
  background: var(--bg-base);
  font-size: var(--fs-2);
  color: var(--text-primary);
  font-family: var(--font-sans);
  transition:
    border-color var(--dur-default) var(--ease-out),
    box-shadow var(--dur-default) var(--ease-out),
    background var(--dur-default) var(--ease-out);
}
.mini-input::placeholder {
  color: var(--text-disabled);
}
.mini-input:hover {
  border-color: var(--border-strong);
}
.mini-input:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: var(--ring-focus);
}
.mini-input.err {
  border-color: #FDA29B;
}
.mini-input.err:focus {
  box-shadow: 0 0 0 3px rgba(217, 45, 32, .16);
}
.mini-input.success {
  border-color: #6CE9A6;
}
.mini-input.filled {
  background: var(--bg-sunken);
  border-color: transparent;
}
.mini-input[readonly] {
  background: var(--bg-sunken);
  color: var(--text-secondary);
  cursor: default;
}
.mini-input[readonly]:hover {
  border-color: var(--border-default);
}
.mini-input:disabled,
.mini-input[disabled] {
  background: var(--bg-sunken);
  color: var(--text-disabled);
  cursor: not-allowed;
  opacity: .65;
}
.mini-input.sm {
  height: 32px;
  padding: var(--sp-0) var(--space-control-inset-sm);
  font-size: var(--fs-1);
}
.mini-input.lg {
  height: 48px;
  padding: var(--sp-0) var(--sp-6);
  font-size: var(--fs-2);
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
}
.field-label {
  font-size: var(--fs-1);
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.field-label .opt {
  font-weight: 400;
  color: var(--text-tertiary);
}
.field-help {
  font-size: var(--fs-1);
  color: var(--text-tertiary);
}
.field-help.err {
  color: var(--badge-error-text);
}
.field-help.ok {
  color: #039855;
}
.field-help.warning {
  color: var(--badge-warning-text);
}
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-inline-gap);
  padding: var(--sp-5) var(--space-surface-inset);
  border-radius: var(--r-card);
  border: 1px solid var(--border-default);
  font-size: var(--fs-1);
  line-height: var(--lh-3);
  background: var(--bg-sunken);
  color: var(--text-primary);
}
.alert svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}
.alert .body {
  flex: 1;
  min-width: 0;
}
.alert .title {
  font-weight: 600;
  margin-bottom: var(--sp-1);
}
.alert .actions {
  display: flex;
  gap: var(--space-inline-gap);
  margin-top: var(--sp-4);
}
.alert .actions a {
  font-size: var(--fs-1);
  font-weight: 600;
  cursor: pointer;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.alert .dismiss {
  display: flex;
  flex-shrink: 0;
  padding: var(--sp-2);
  border-radius: var(--radius-6);
  color: inherit;
  opacity: .55;
  cursor: pointer;
  background: none;
  border: none;
  margin: -2px -2px -2px var(--sp-0);
}
.alert .dismiss:hover {
  opacity: 1;
  background: rgba(0, 0, 0, .08);
}
.alert .dismiss svg {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  margin: var(--sp-0);
}
.alert.info {
  background: var(--badge-info-bg);
  border-color: #84CAFF;
  color: var(--badge-info-text);
}
.alert.success {
  background: var(--badge-success-bg);
  border-color: #6CE9A6;
  color: var(--badge-success-text);
}
.alert.warning {
  background: var(--badge-warning-bg);
  border-color: #FEC84B;
  color: var(--badge-warning-text);
}
.alert.error {
  background: var(--badge-error-bg);
  border-color: #FDA29B;
  color: var(--badge-error-text);
}
.banner {
  display: flex;
  align-items: center;
  gap: var(--space-inline-gap);
  padding: var(--sp-5) var(--sp-7);
  border-bottom: 1px solid var(--border-default);
  font-size: var(--fs-2);
  background: var(--bg-sunken);
  color: var(--text-primary);
}
.banner svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.banner .body {
  flex: 1;
  min-width: 0;
}
.banner .actions {
  display: flex;
  align-items: center;
  gap: var(--space-inline-gap);
  flex-shrink: 0;
}
.banner.info {
  background: var(--badge-info-bg);
  color: var(--badge-info-text);
  border-bottom-color: #84CAFF;
}
.banner.warning {
  background: var(--badge-warning-bg);
  color: var(--badge-warning-text);
  border-bottom-color: #FEC84B;
}
.banner .dismiss {
  display: flex;
  flex-shrink: 0;
  padding: var(--sp-2);
  border-radius: var(--radius-6);
  color: inherit;
  opacity: .55;
  cursor: pointer;
  background: none;
  border: none;
}
.banner .dismiss:hover {
  opacity: 1;
  background: rgba(0, 0, 0, .08);
}
.banner .dismiss svg {
  width: 14px;
  height: 14px;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-inline-gap);
  width: 300px;
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--sp-5) var(--space-surface-inset-sm);
  border-radius: var(--r-float);
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-surface-hover);
  font-size: var(--fs-1);
  color: var(--text-primary);
}
.toast .icon {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 1px;
}
.toast.success .icon {
  color: var(--badge-success-text);
}
.toast.info .icon {
  color: var(--badge-info-text);
}
.toast.warning .icon {
  color: var(--badge-warning-text);
}
.toast.error .icon {
  color: var(--badge-error-text);
}
.toast .body {
  flex: 1;
  min-width: 0;
}
.toast .title {
  font-weight: 600;
}
.toast .desc {
  color: var(--text-secondary);
  font-size: var(--fs-1);
  margin-top: var(--sp-1);
  line-height: var(--lh-3);
}
.toast .actions {
  margin-top: var(--sp-4);
  display: flex;
  gap: var(--space-inline-gap);
}
.toast .actions a {
  font-size: var(--fs-1);
  font-weight: 600;
  cursor: pointer;
  color: var(--accent);
}
.toast .dismiss {
  display: flex;
  flex-shrink: 0;
  padding: var(--sp-2);
  border-radius: var(--radius-6);
  color: var(--text-tertiary);
  opacity: .7;
  cursor: pointer;
  background: none;
  border: none;
  margin: -3px -3px var(--sp-0) var(--sp-0);
}
.toast .dismiss:hover {
  opacity: 1;
  background: var(--bg-sunken);
}
.toast .dismiss svg {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
}
.toast-stack {
  display: flex;
  flex-direction: column;
  position: relative;
}
.toast-stack .toast {
  position: relative;
}
.toast-stack .toast:not(:first-child) {
  margin-top: -38px;
}
.toast-stack .toast:nth-child(1) {
  z-index: 3;
}
.toast-stack .toast:nth-child(2) {
  transform: scale(.97) translateY(-4px);
  opacity: .7;
  z-index: 2;
}
.toast-stack .toast:nth-child(3) {
  transform: scale(.94) translateY(-8px);
  opacity: .4;
  z-index: 1;
}
.tooltip-demo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.tooltip-demo .bubble {
  background: var(--n-950);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), var(--shadow-surface-rest);
  font-size: var(--fs-1);
  padding: var(--sp-3) var(--space-control-inset-sm);
  border-radius: var(--radius-16);
  white-space: nowrap;
  position: relative;
}
.tooltip-demo .bubble::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--n-950);
  transform: rotate(45deg);
}
.tooltip-demo.top .bubble::after {
  bottom: -3px;
  left: 50%;
  margin-left: -3.5px;
}
.tooltip-demo.bottom .bubble::after {
  top: -3px;
  left: 50%;
  margin-left: -3.5px;
}
.tooltip-demo.left .bubble::after {
  right: -3px;
  top: 50%;
  margin-top: -3.5px;
}
.tooltip-demo.right .bubble::after {
  left: -3px;
  top: 50%;
  margin-top: -3.5px;
}
#tip {
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  background: var(--n-950);
  color: #fff;
  font-size: var(--fs-1);
  line-height: 1.35;
  padding: var(--sp-3) var(--space-control-inset-sm);
  border-radius: var(--radius-16);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), var(--shadow-surface-rest);
  transition: opacity var(--dur-moderate) var(--ease-out), transform var(--dur-moderate) var(--ease-out);
}
#tip[data-show] {
  opacity: 1;
  transform: translateY(0);
}
#tip .row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
#tip .kbd {
  font-size: 10.5px;
  font-weight: 500;
  padding: 1px var(--sp-3);
  border-radius: var(--radius-6);
  background: rgba(255, 255, 255, .16);
  color: #fff;
  border: none;
}
#tip .sub {
  font-size: 10.5px;
  color: var(--n-400);
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-10) var(--sp-8);
  gap: var(--sp-2);
}
.empty-state .icon {
  width: 38px;
  height: 38px;
  color: var(--text-disabled);
  margin-bottom: var(--space-label-gap);
}
.empty-state .title {
  font-size: var(--fs-2);
  font-weight: 600;
  color: var(--text-primary);
}
.empty-state .desc {
  font-size: var(--fs-1);
  color: var(--text-tertiary);
  max-width: 300px;
  line-height: var(--lh-3);
}
.empty-state .actions {
  display: flex;
  gap: var(--space-inline-gap);
  margin-top: var(--sp-6);
}
.field-shell {
  position: relative;
  display: flex;
  align-items: center;
}
.hero-search-wrap {
  background: var(--border-default);
  transition: background var(--dur-default) var(--ease-out), box-shadow var(--dur-default) var(--ease-out);
}
.hero-search-wrap:focus-within {
  padding: 1px;
  background: var(--blue-500);
  box-shadow: var(--ring-focus);
}
.hero-search-wrap:focus-within .mini-input:focus {
  box-shadow: none;
}
.hero-search-wrap.ai-search-wrap {
  background: var(--n-700);
}
.field-shell .mini-input {
  width: 100%;
}
.field-shell.has-leading .mini-input {
  padding-left: var(--space-input-affix-clearance);
}
.field-shell.has-trailing .mini-input {
  padding-right: var(--space-input-affix-clearance);
}
.field-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
  pointer-events: none;
}
.field-icon.leading {
  left: 12px;
}
.field-icon.trailing {
  right: 12px;
}
.field-icon-btn {
  position: absolute;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-8);
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-moderate) var(--ease-out), color var(--dur-moderate) var(--ease-out);
}
.field-icon-btn:hover {
  background: var(--bg-sunken);
  color: var(--text-primary);
}
.field-icon-btn svg {
  width: 14px;
  height: 14px;
}
.field-kbd {
  position: absolute;
  right: 9px;
  font-size: 10.5px;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-6);
  background: var(--bg-sunken);
  border: 1px solid var(--border-default);
  color: var(--text-tertiary);
  pointer-events: none;
}
.mini-textarea {
  min-height: 88px;
  padding: var(--space-label-gap) var(--sp-5);
  border-radius: var(--r-card);
  border: 1px solid var(--border-default);
  background: var(--bg-base);
  font-size: var(--fs-2);
  color: var(--text-primary);
  font-family: var(--font-sans);
  resize: vertical;
  line-height: var(--lh-3);
  transition: border-color var(--dur-default) var(--ease-out), box-shadow var(--dur-default) var(--ease-out);
}
.mini-textarea:hover {
  border-color: var(--border-strong);
}
.mini-textarea:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: var(--ring-focus);
}
.char-count {
  align-self: flex-end;
  font-size: var(--fs-1);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.char-count.warn {
  color: #B54708;
}
.field-shell.stepper .mini-input {
  padding-right: var(--sp-56);
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.stepper-ctrl {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  display: flex;
  flex-direction: column;
  width: 26px;
  border-left: 1px solid var(--border-default);
  border-radius: var(--radius-0) var(--r-control-sm) var(--r-control-sm) 0;
  overflow: hidden;
}
.stepper-ctrl button {
  flex: 1;
  border: none;
  background: var(--bg-sunken);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-moderate) var(--ease-out);
}
.stepper-ctrl button:hover {
  background: var(--border-subtle-line);
  color: var(--text-primary);
}
.stepper-ctrl button:first-child {
  border-bottom: 1px solid var(--border-default);
}
.stepper-ctrl svg {
  width: 9px;
  height: 9px;
}
.field-suffix {
  position: absolute;
  right: 12px;
  font-size: var(--fs-1);
  color: var(--text-tertiary);
  pointer-events: none;
}
.mini-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: 40px;
  padding: var(--sp-0) var(--sp-5);
  border-radius: var(--r-control);
  border: 1px solid var(--border-default);
  background: var(--bg-base);
  font-size: var(--fs-2);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color var(--dur-default) var(--ease-out), box-shadow var(--dur-default) var(--ease-out);
}
.mini-select:hover {
  border-color: var(--border-strong);
}
.mini-select.open,
.mini-select:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: var(--ring-focus);
}
.mini-select.placeholder {
  color: var(--text-disabled);
}
.mini-select .chev {
  width: 14px;
  height: 14px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.select-menu {
  border: 1px solid transparent;
  border-radius: var(--radius-24);
  background: var(--bg-base);
  box-shadow: var(--shadow-surface-hover);
  padding: var(--sp-3);
  margin-top: var(--sp-3);
}
.select-menu .opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--space-menu-row-inset);
  border-radius: var(--radius-24);
  font-size: var(--fs-1);
  color: var(--text-secondary);
  cursor: pointer;
}
.select-menu .opt:hover {
  background: var(--bg-sunken);
  color: var(--text-primary);
}
.select-menu .opt.selected {
  background: var(--accent-wash);
  color: var(--accent);
  font-weight: 500;
}
.select-menu .opt.selected svg {
  width: 14px;
  height: 14px;
}
.select-menu .opt.disabled {
  color: var(--text-disabled);
  cursor: not-allowed;
}
.select-multi-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-4);
  border-radius: var(--r-chip);
  background: var(--accent-wash);
  color: var(--accent);
  font-size: var(--fs-1);
}
.select-multi-tag button {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: flex;
  padding: var(--sp-1);
}
.dropzone {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-panel);
  background: var(--bg-canvas);
  padding: var(--sp-9);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-default) var(--ease-out), background var(--dur-default) var(--ease-out);
}
.dropzone:hover {
  border-color: var(--accent);
  background: var(--accent-wash);
}
.dropzone.dragover {
  border-color: var(--accent);
  background: var(--accent-wash);
  border-style: solid;
}
.dropzone.err {
  border-color: #FDA29B;
  background: #FEF3F2;
}
.dropzone svg {
  width: 22px;
  height: 22px;
  color: var(--text-tertiary);
}
.upload-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-inline-gap);
  padding: var(--space-label-gap) var(--sp-5);
  border: 1px solid var(--border-default);
  border-radius: var(--r-control);
  background: var(--bg-base);
}
.upload-row .bar {
  flex: 1;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--bg-sunken);
  overflow: hidden;
}
.upload-row .bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}
.mini-check {
  appearance: none;
  -webkit-appearance: none;
  margin: var(--sp-0);
  width: 18px;
  height: 18px;
  border-radius: var(--r-chip);
  border: 1.5px solid var(--border-strong);
  background: var(--bg-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background var(--dur-default) var(--ease-out),
    border-color var(--dur-default) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.mini-check svg {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  color: #fff;
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--dur-moderate) var(--ease-out), transform var(--dur-moderate) var(--ease-lift);
}
.mini-check:hover {
  border-color: var(--text-tertiary);
  background: var(--bg-sunken);
}
.mini-check:active {
  transform: scale(.9);
}
.mini-check.on {
  background: var(--accent);
  border-color: var(--accent);
}
.mini-check.on svg {
  opacity: 1;
  transform: scale(1);
}
.mini-check.indeterminate {
  background: var(--accent);
  border-color: var(--accent);
}
.mini-check.indeterminate svg {
  display: none;
}
.mini-check.indeterminate:after {
  content: "";
  width: 9px;
  height: 1.5px;
  border-radius: 1px;
  background: #fff;
}
.mini-check.err {
  border-color: #FDA29B;
}
.mini-check.disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
.mini-check.on.disabled {
  opacity: .42;
}
.mini-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--dur-default) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.mini-radio:hover {
  border-color: var(--text-tertiary);
}
.mini-radio:active {
  transform: scale(.9);
}
.mini-radio.on {
  border-color: var(--accent);
}
.mini-radio.on:after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform var(--dur-moderate) var(--ease-lift);
}
.mini-radio.err {
  border-color: #FDA29B;
}
.mini-radio.disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
.mini-radio.on.disabled {
  opacity: .42;
}
.mini-switch {
  width: 34px;
  height: 20px;
  border-radius: var(--r-pill);
  background: var(--border-strong);
  position: relative;
  display: inline-block;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-default) var(--ease-out);
}
.mini-switch:hover {
  background: var(--text-disabled);
}
.mini-switch .knob {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left var(--dur-default) var(--ease-lift), width var(--dur-moderate) var(--ease-out);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.mini-switch:active .knob {
  width: 19px;
}
.mini-switch.on {
  background: var(--accent);
}
.mini-switch.on .knob {
  left: 16px;
}
.mini-switch.on:active .knob {
  left: 13px;
}
.mini-switch.disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
.mini-switch.on.disabled {
  opacity: .42;
}
.seg-control {
  position: relative;
  display: inline-flex;
  padding: var(--sp-2);
  border-radius: var(--r-control);
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  gap: var(--sp-1);
}
.seg-control.compact {
  padding: var(--sp-1);
  gap: 1px;
}
.seg-option {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-0) var(--space-surface-inset);
  height: 30px;
  border-radius: var(--r-control-sm);
  font-size: var(--fs-1);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: none;
  font-family: var(--font-sans);
  transition: color var(--dur-default) var(--ease-out), background var(--dur-default) var(--ease-out);
}
.seg-control.compact .seg-option {
  height: 24px;
  padding: var(--sp-0) var(--space-control-inset-sm);
  font-size: var(--fs-1);
}
.seg-option svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.seg-option:hover {
  color: var(--text-primary);
  background: var(--border-default);
}
.seg-option.active {
  color: #fff;
}
.seg-option.active:hover {
  background: none;
}
.seg-option.disabled {
  color: var(--text-disabled);
  cursor: not-allowed;
}
.seg-option.disabled:hover {
  background: none;
}
.seg-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: var(--r-control-sm);
  background: var(--accent);
  box-shadow: var(--shadow-surface-rest);
  transition: left var(--dur-moderate) var(--ease-lift), width var(--dur-moderate) var(--ease-lift);
}
.seg-control.compact .seg-thumb {
  top: 2px;
  bottom: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .seg-thumb {
    transition: none;
  }
}
.chip-opt {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  font-size: var(--fs-1);
  font-weight: 500;
  border: 1px solid var(--border-default);
  background: var(--bg-base);
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background var(--dur-default) var(--ease-out),
    border-color var(--dur-default) var(--ease-out),
    color var(--dur-default) var(--ease-out);
}
.chip-opt svg {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  flex-shrink: 0;
}
.chip-opt:hover {
  border-color: var(--border-strong);
  background: var(--bg-sunken);
}
.chip-opt.selected {
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--accent);
}
.chip-opt.disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
.chip-opt .rm {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -2px -4px -2px var(--sp-1);
  padding: var(--sp-1);
  border: none;
  background: none;
  border-radius: 50%;
  color: inherit;
  opacity: .65;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.chip-opt .rm:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.mini-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-1);
  font-weight: 500;
}
.mini-badge.success {
  background: var(--badge-success-bg);
  color: var(--badge-success-text);
}
.mini-badge.warning {
  background: var(--badge-warning-bg);
  color: var(--badge-warning-text);
}
.mini-badge.error {
  background: var(--badge-error-bg);
  color: var(--badge-error-text);
}
.mini-badge.info {
  background: var(--badge-info-bg);
  color: var(--badge-info-text);
}
.mini-badge.neutral {
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-text);
}
.mini-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--n-800);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-1);
  font-weight: 600;
}
.mini-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--space-control-inset-sm);
  border-radius: var(--r-pill);
  font-size: var(--fs-1);
  background: var(--bg-track);
  color: var(--text-secondary);
  border: 1px solid transparent;
}
.mini-card {
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
  background: var(--bg-base);
  padding: var(--sp-6);
  width: 200px;
}
.mini-tooltip {
  background: var(--n-950);
  color: #fff;
  font-size: var(--fs-1);
  padding: var(--sp-3) var(--space-control-inset-sm);
  border-radius: var(--radius-8);
}
.mini-badge.sm {
  padding: var(--sp-1) var(--sp-4);
  font-size: 10.5px;
}
.mini-badge .bdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.mini-badge.live {
  background: #F8FEE7;
  color: #385618;
}
.mini-badge.live .bdot {
  background: #C6F35F;
}
:root[data-theme=dark] .mini-badge.live {
  background: rgba(198, 243, 95, .14);
  color: #C6F35F;
}
.mini-badge.muted {
  opacity: .55;
}
.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.neutral {
  background: var(--text-disabled);
}
.status-dot.info {
  background: var(--badge-info-text);
}
.status-dot.success {
  background: var(--badge-success-text);
}
.status-dot.warning {
  background: var(--badge-warning-text);
}
.status-dot.error {
  background: var(--badge-error-text);
}
.status-dot.live {
  background: #C6F35F;
  position: relative;
}
.status-dot.live::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: #C6F35F;
  animation: navo-live-pulse 2s cubic-bezier(.22, .61, .36, 1) infinite;
}
@keyframes navo-live-pulse {
  0% {
    transform: scale(1);
    opacity: .55;
  }
  70% {
    transform: scale(2.6);
    opacity: 0;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .status-dot.live::after {
    animation: none;
    opacity: .3;
  }
}
.status-row {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-1);
  font-weight: 500;
  color: var(--text-primary);
}
.status-row.sm {
  font-size: var(--fs-1);
  gap: var(--sp-3);
}
.status-row.sm .status-dot {
  width: 6px;
  height: 6px;
}
.status-row.muted {
  opacity: .55;
}
.status-text {
  font-size: var(--fs-1);
  font-weight: 500;
}
.status-text.neutral {
  color: var(--text-tertiary);
}
.status-text.info {
  color: var(--badge-info-text);
}
.status-text.success {
  color: var(--badge-success-text);
}
.status-text.warning {
  color: var(--badge-warning-text);
}
.status-text.error {
  color: var(--badge-error-text);
}
.status-meta {
  color: var(--text-tertiary);
  font-weight: 400;
}
.status-meta::before {
  content: "\b7";
  margin: var(--sp-0) var(--sp-3);
  color: var(--text-disabled);
  font-weight: 400;
}
.mini-tag.dismissible {
  padding-right: var(--sp-2);
  gap: var(--sp-3);
}
.mini-tag .rm {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-1);
  border: none;
  background: none;
  border-radius: 50%;
  color: inherit;
  opacity: .6;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.mini-tag .rm:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.mini-tag.metadata {
  background: transparent;
  border-style: dashed;
  border-color: var(--border-default);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.mini-tag.status-adjacent {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.mini-tag.status-adjacent .tdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mini-tag.truncate {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
.mini-tag.live {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-7);
  border-radius: var(--r-pill);
  font-size: var(--fs-2);
  font-weight: 600;
  color: var(--text-primary);
  border: 1px solid var(--badge-live-border);
  background: var(--badge-live-bg);
  box-shadow: var(--shadow-2);
}
.mini-tag.live .status-dot {
  width: 10px;
  height: 10px;
}
.mini-avatar.icon {
  background: var(--bg-sunken);
  color: var(--text-secondary);
}
.mini-avatar.icon svg {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
}
.mini-avatar.image {
  background-size: cover;
  background-position: center;
  color: transparent;
}
.mini-avatar.fallback {
  background: var(--n-200);
  color: var(--text-tertiary);
  border: 1px dashed var(--border-strong);
}
.avatar-stack {
  display: flex;
}
.avatar-stack .mini-avatar {
  width: 28px;
  height: 28px;
  font-size: var(--fs-1);
  border: 2px solid var(--bg-base);
  margin-left: -8px;
}
.avatar-stack .mini-avatar:first-child {
  margin-left: var(--sp-0);
}
.avatar-stack .mini-avatar.more {
  background: var(--bg-sunken);
  color: var(--text-tertiary);
}
.kpi {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.kpi .lbl {
  font-size: var(--fs-1);
  color: var(--text-tertiary);
  font-weight: 500;
}
.kpi .val {
  font-family: var(--font-display);
  font-size: var(--fs-7);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  letter-spacing: var(--ls-3);
}
.kpi.compact .val {
  font-size: var(--fs-4);
}
.kpi.hero .val {
  font-size: var(--fs-10);
}
.kpi .delta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-1);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.kpi .delta svg {
  width: 12px;
  height: 12px;
}
.kpi .delta.up {
  color: var(--badge-success-text);
}
.kpi .delta.down {
  color: var(--badge-error-text);
}
.kpi .delta.good {
  color: var(--badge-success-text);
}
.kpi .delta.bad {
  color: var(--badge-error-text);
}
.kpi .delta.neutral {
  color: var(--text-secondary);
}
.kpi .meta {
  font-size: var(--fs-1);
  color: var(--text-tertiary);
}
.kv-list {
  display: flex;
  flex-direction: column;
}
.kv-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-6);
  padding: var(--sp-4) var(--sp-0);
  border-bottom: 1px solid var(--border-default);
}
.kv-row:last-child {
  border-bottom: none;
}
.kv-row .k {
  flex: 0 0 140px;
  font-size: var(--fs-1);
  color: var(--text-tertiary);
}
.kv-row .v {
  flex: 1;
  font-size: var(--fs-1);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.kv-list.stacked .kv-row {
  flex-direction: column;
  gap: var(--sp-2);
}
.kv-list.stacked .kv-row .k {
  flex: none;
}
.kv-list.compact .kv-row {
  padding: var(--sp-3) var(--sp-0);
}
.kv-list.compact .kv-row .k {
  flex-basis: 100px;
  font-size: var(--fs-1);
}
.kv-list.compact .kv-row .v {
  font-size: var(--fs-1);
}
.timeline {
  display: flex;
  flex-direction: column;
}
.tl-item {
  display: flex;
  gap: var(--sp-5);
}
.tl-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
  flex-shrink: 0;
  margin-top: var(--sp-2);
}
.tl-item.completed .tl-dot {
  background: var(--accent);
}
.tl-item.current .tl-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.tl-item.delayed .tl-dot {
  background: var(--badge-warning-text);
}
.tl-line {
  width: 1.5px;
  flex: 1;
  background: var(--border-default);
  min-height: 24px;
  margin-top: var(--sp-1);
}
.tl-item.completed .tl-line {
  background: var(--accent);
}
.tl-content {
  padding-bottom: var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.tl-item:last-child .tl-content {
  padding-bottom: var(--sp-0);
}
.tl-content .t {
  font-size: var(--fs-2);
  font-weight: 500;
  color: var(--text-primary);
}
.tl-item.upcoming .tl-content .t {
  color: var(--text-tertiary);
  font-weight: 400;
}
.tl-content .ts {
  font-size: var(--fs-1);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.tl-content .m {
  font-size: var(--fs-1);
  color: var(--text-secondary);
}
.tl-item.delayed .tl-content .m {
  color: var(--badge-warning-text);
}
.prog-linear {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--bg-track);
  box-shadow: inset 0 0 0 1px var(--border-default);
  overflow: hidden;
}
.prog-linear > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease-out);
}
.prog-linear.success > span {
  background: var(--badge-success-text);
}
.prog-linear.warning > span {
  background: var(--badge-warning-text);
}
.prog-linear.error > span {
  background: var(--badge-error-text);
}
.prog-linear.indeterminate > span {
  width: 35% !important;
  animation: prog-indeterminate 1.4s ease-in-out infinite;
}
@keyframes prog-indeterminate {
  0% {
    margin-left: -35%;
  }
  100% {
    margin-left: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .prog-linear.indeterminate > span {
    animation: none;
    margin-left: var(--sp-0);
    width: 35% !important;
  }
}
.prog-circle {
  transform: rotate(-90deg);
}
.prog-circle .track {
  fill: none;
  stroke: var(--bg-track);
}
.prog-circle .fill {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
}
.prog-circle-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.prog-circle-wrap .val {
  position: absolute;
  font-size: var(--fs-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-3);
  height: 64px;
}
.bar-chart-col {
  flex: 1;
  min-width: 12px;
  border-radius: var(--radius-6) var(--radius-6) 0 0;
  background: var(--bg-track);
}
.bar-chart-col.active {
  background: var(--accent);
}
.radar-chart {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--bg-sunken);
  overflow: hidden;
}
.radar-chart svg {
  width: 100%;
  height: 100%;
}
.radar-chart .ring {
  fill: none;
  stroke: var(--border-default);
}
.radar-chart .grid {
  stroke: var(--border-subtle-line);
}
.radar-chart .sweep {
  transform-origin: 50% 50%;
  animation: spin 4s linear infinite;
}
.radar-chart .sweep path {
  filter: blur(1.5px);
  opacity: .25;
}
.radar-chart .center-dot {
  fill: var(--text-primary);
  filter: drop-shadow(0 0 3px var(--text-primary));
}
.radar-chart .blip {
  animation: navo-blip-pulse 2.4s ease-in-out infinite;
}
@keyframes navo-blip-pulse {
  0%, 100% {
    opacity: .4;
  }
  50% {
    opacity: 1;
  }
}
.radar-chart .blip-ping {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: navo-blip-ping 2.6s ease-out infinite;
}
@keyframes navo-blip-ping {
  0% {
    transform: scale(.5);
    opacity: .7;
  }
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}
.radar-card:hover .radar-chart .sweep {
  animation-duration: 1.3s;
}
.radar-card:hover .radar-chart .blip {
  animation-duration: 1.2s;
}
:root[data-theme=dark] .radar-chart .sweep path {
  opacity: .45;
}
@media (prefers-reduced-motion: reduce) {
  .radar-chart .sweep {
    animation: none;
  }
  .radar-chart .blip {
    animation: none;
  }
  .radar-chart .blip-ping {
    animation: none;
    opacity: 0;
  }
}
.util-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-2);
}
.util-grid .cell {
  aspect-ratio: 1;
  border-radius: var(--radius-6);
  background: var(--bg-track);
}
.util-grid .cell.filled {
  background: var(--accent);
}
.util-grid .cell.partial {
  background: var(--accent-wash);
}
.iso-stack {
  width: 100%;
  height: auto;
  overflow: visible;
}
.iso-cube {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform .18s var(--ease-lift), filter .18s var(--ease-lift);
  cursor: pointer;
}
.iso-cube:hover {
  transform: translateY(-5px);
  filter: brightness(1.3);
}
.iso-cube-drop {
  animation: iso-load .3s var(--ease-lift) both;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.pack-card:hover .iso-cube-drop {
  animation: iso-load-repack .25s var(--ease-lift) backwards;
}
@keyframes iso-load {
  0% {
    opacity: 0;
    transform: translateY(-14px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes iso-load-repack {
  0% {
    opacity: 0;
    transform: translateY(-14px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .iso-cube {
    transition: none;
  }
  .iso-cube:hover {
    transform: none;
    filter: none;
  }
  .iso-cube-drop {
    animation: none;
  }
  .pack-card:hover .iso-cube-drop {
    animation: none;
  }
}
.dash-ship {
  animation: navo-ship-bob 4.5s ease-in-out infinite;
}
@keyframes navo-ship-bob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2.5px);
  }
}
.dash-wake {
  animation: navo-wake-pulse 2.4s ease-in-out infinite;
}
@keyframes navo-wake-pulse {
  0%, 100% {
    opacity: .3;
  }
  50% {
    opacity: .85;
  }
}
.dash-route-flow {
  stroke-dasharray: 7 220;
  animation: navo-route-sail 3.2s linear infinite;
}
@keyframes navo-route-sail {
  0% {
    stroke-dashoffset: 227;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
.mcp-connect-card .mcp-client-box {
  transition: stroke var(--dur-default) var(--ease-out);
}
.mcp-connect-card:hover .mcp-client-box {
  animation: navo-client-glow 1.6s ease-in-out infinite;
}
@keyframes navo-client-glow {
  0%, 100% {
    stroke: var(--border-default);
  }
  50% {
    stroke: var(--blue-400);
  }
}
.mcp-flow {
  stroke-dasharray: 6 184;
  animation: navo-mcp-flow 2.2s linear infinite;
}
@keyframes navo-mcp-flow {
  0% {
    stroke-dashoffset: 190;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
.mcp-connect-card:hover .mcp-flow {
  animation-duration: 1s;
}
.mcp-orb {
  animation: navo-orb-pulse 3s ease-in-out infinite;
}
@keyframes navo-orb-pulse {
  0%, 100% {
    stroke-opacity: .6;
  }
  50% {
    stroke-opacity: 1;
  }
}
.accordion-trigger {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.accordion-icon {
  flex-shrink: 0;
  transition: transform var(--dur-default) var(--ease-out);
}
.accordion-item.open .accordion-icon {
  transform: rotate(45deg);
}
.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-default) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .accordion-icon {
    transition: none;
  }
  .accordion-panel {
    transition: none;
  }
}
.crane-card .dc-trolley {
  animation: navo-dc-trolley 7s ease-in-out infinite;
}
.crane-card .dc-hoist {
  animation: navo-dc-hoist 7s ease-in-out infinite;
}
.crane-card .dc-cable {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: navo-dc-cable 7s ease-in-out infinite;
}
.crane-card .dc-load40 {
  animation: navo-dc-load40 7s step-end infinite;
}
.crane-card .dc-load20 {
  animation: navo-dc-load20 7s step-end infinite;
}
.crane-card .dc-pierexport {
  animation: navo-dc-pierexport 7s step-end infinite;
}
.crane-card .dc-shipplaced {
  animation: navo-dc-shipplaced 7s step-end infinite;
}
@keyframes navo-dc-trolley {
  0%, 10% {
    transform: translateX(0);
  }
  38%, 58% {
    transform: translateX(-80px);
  }
  86%, 100% {
    transform: translateX(0);
  }
}
@keyframes navo-dc-hoist {
  0% {
    transform: translateY(23px);
  }
  9%, 38% {
    transform: translateY(0);
  }
  46%, 54% {
    transform: translateY(23px);
  }
  62%, 86% {
    transform: translateY(0);
  }
  94%, 100% {
    transform: translateY(23px);
  }
}
@keyframes navo-dc-cable {
  0% {
    transform: scaleY(1);
  }
  9%, 38% {
    transform: scaleY(.32);
  }
  46%, 54% {
    transform: scaleY(1);
  }
  62%, 86% {
    transform: scaleY(.32);
  }
  94%, 100% {
    transform: scaleY(1);
  }
}
@keyframes navo-dc-load40 {
  0% {
    opacity: 1;
  }
  49% {
    opacity: 0;
  }
  96% {
    opacity: 1;
  }
}
@keyframes navo-dc-load20 {
  0% {
    opacity: 0;
  }
  53% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
}
@keyframes navo-dc-pierexport {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  53% {
    opacity: 0;
  }
}
@keyframes navo-dc-shipplaced {
  0% {
    opacity: 1;
  }
  6% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
}
.widget-kicker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin: calc(var(--sp-8) * -1) calc(var(--sp-8) * -1) var(--sp-6);
  padding: var(--sp-4) var(--sp-8);
  border-bottom: 1px solid var(--border-subtle-line);
}
.widget-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.widget-kicker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.widget-kicker-status {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .06em;
}
@media (prefers-reduced-motion: reduce) {
  .dash-ship,
  .dash-wake,
  .dash-route-flow,
  .mcp-flow,
  .mcp-orb {
    animation: none;
  }
  .mcp-connect-card:hover .mcp-client-box {
    animation: none;
  }
  .crane-card .dc-trolley,
  .crane-card .dc-hoist,
  .crane-card .dc-cable,
  .crane-card .dc-load40,
  .crane-card .dc-load20,
  .crane-card .dc-pierexport,
  .crane-card .dc-shipplaced {
    animation: none;
  }
  .crane-card .dc-hoist {
    transform: translateY(0);
  }
  .crane-card .dc-cable {
    transform: scaleY(.32);
  }
  .crane-card .dc-load20,
  .crane-card .dc-pierexport {
    opacity: 0;
  }
}
.code-card {
  background: #0B0D10;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .24);
  border-radius: var(--r-card);
  padding: var(--sp-6) var(--sp-7);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  line-height: var(--lh-4);
  color: #9DA5B1;
}
.code-card > div {
  min-height: 1.4em;
}
.code-card .k {
  color: #5C8DFA;
}
.code-card .s {
  color: #C6F35F;
}
.code-card .c {
  color: #505866;
}
.code-card .ok {
  color: #6CE9A6;
}
.confidence-meter {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.confidence-meter .segs {
  display: flex;
  gap: var(--sp-1);
}
.confidence-meter .segs i {
  width: 14px;
  height: 6px;
  border-radius: var(--radius-2);
  background: var(--bg-track);
  display: block;
}
.confidence-meter .segs i.on {
  background: var(--accent);
}
.confidence-meter .num {
  font-size: var(--fs-1);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.score-value {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-variant-numeric: tabular-nums;
}
.score-value .n {
  font-size: var(--fs-5);
  font-weight: 600;
  color: var(--text-primary);
}
.score-value .d {
  font-size: var(--fs-1);
  color: var(--text-tertiary);
}
.data-empty {
  color: var(--text-disabled);
  font-size: var(--fs-1);
  font-variant-numeric: tabular-nums;
}
.data-restricted {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--text-tertiary);
  font-size: var(--fs-1);
  font-style: italic;
}
.data-restricted svg {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
}
.dt-wrap {
  border: 1px solid transparent;
  border-radius: var(--r-card);
  background: var(--bg-base);
  overflow: hidden;
  box-shadow: var(--shadow-surface-rest), var(--surface-sheen);
}
.dt-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: var(--space-surface-inset);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-tertiary) 22%, transparent) transparent;
}
.dt-scroll:hover {
  scrollbar-color: color-mix(in srgb, var(--text-tertiary) 42%, transparent) transparent;
}
.dt-scroll::-webkit-scrollbar {
  height: 5px;
}
.dt-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.dt-scroll::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--text-tertiary) 22%, transparent);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background-clip: padding-box;
  transition: background-color var(--dur-moderate) var(--ease-out);
}
.dt-scroll:hover::-webkit-scrollbar-thumb,
.dt-scroll::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--text-tertiary) 42%, transparent);
}
.dt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-1);
}
.dt-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: var(--ls-7);
  color: var(--text-tertiary);
  font-weight: 600;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-label-gap) var(--sp-5);
  white-space: nowrap;
  user-select: none;
}
.dt-table thead th > .th-cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-right: var(--sp-4);
}
.dt-table thead th.sortable {
  cursor: pointer;
}
.dt-table thead th.sortable:hover {
  color: var(--text-primary);
}
.dt-table thead th .sort-ico {
  width: 12px;
  height: 12px;
  color: var(--text-disabled);
  flex-shrink: 0;
}
.dt-table thead th.sorted-asc .sort-ico,
.dt-table thead th.sorted-desc .sort-ico {
  color: var(--accent);
}
.dt-table thead th .sort-rank {
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-wash);
  border-radius: var(--radius-4);
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dt-table thead th .filter-ico {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  color: var(--text-disabled);
  margin-left: var(--sp-1);
}
.dt-table thead th.filter-active .filter-ico {
  color: var(--accent);
}
.dt-table thead th .col-resizer {
  position: absolute;
  right: -6px;
  top: -10px;
  bottom: -10px;
  width: 8px;
  cursor: col-resize;
  pointer-events: none;
}
.dt-table thead th .col-resizer::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 10px;
  bottom: 10px;
  width: 1.5px;
  transform: translateX(-50%);
  background: var(--border-strong);
  transition: background var(--dur-moderate) var(--ease-out), width var(--dur-moderate) var(--ease-out);
}
.dt-table thead th:hover .col-resizer::before {
  background: var(--accent);
}
.dt-table thead th .col-resizer.active::before {
  background: var(--accent);
  width: 2px;
}
.dt-table td {
  padding: var(--space-dense-cell-inset) var(--sp-5);
  border-bottom: 1px solid var(--divider);
  vertical-align: middle;
  color: var(--text-secondary);
  white-space: nowrap;
}
.dt-table tbody tr:last-child > td {
  border-bottom: none;
}
.dt-table tbody tr.hover-demo td,
.dt-table tbody tr:hover td {
  background: var(--nav-hover-bg);
}
.dt-table tbody tr.selected td,
.dt-table tbody tr.selected:hover td,
.dt-table tbody tr.selected:hover td.sticky-col,
.dt-table tbody tr.selected:hover td.checkbox-col {
  background: linear-gradient(var(--accent-wash), var(--accent-wash)), var(--bg-base);
}
.dt-table tbody tr.clickable {
  cursor: pointer;
}
.dt-table tbody tr.disabled td {
  color: var(--text-disabled);
  cursor: not-allowed;
}
.dt-table tbody tr.disabled:hover td {
  background: transparent;
}
.dt-table tbody tr.row-focus td {
  box-shadow: inset 0 2px 0 var(--blue-500), inset 0 -2px 0 var(--blue-500);
}
.dt-table tbody tr.row-focus td:first-child {
  box-shadow:
    inset 2px 0 0 var(--blue-500),
    inset 0 2px 0 var(--blue-500),
    inset 0 -2px 0 var(--blue-500);
}
.dt-table tbody tr.row-focus td:last-child {
  box-shadow:
    inset -2px 0 0 var(--blue-500),
    inset 0 2px 0 var(--blue-500),
    inset 0 -2px 0 var(--blue-500);
}
.dt-table td.k {
  color: var(--text-primary);
  font-weight: 500;
}
.dt-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dt-table td.mono {
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  font-weight: 500;
}
.dt-table td.truncate {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dt-table td.wrap {
  white-space: normal;
  line-height: var(--lh-2);
  max-width: 220px;
}
.dt-table th.sticky-col,
.dt-table td.sticky-col {
  position: sticky;
  left: 36px;
  z-index: 1;
  width: 240px;
  min-width: 240px;
  max-width: 240px;
  background: var(--bg-base);
  box-shadow: 1px 0 0 var(--border-default), 8px 0 12px -8px var(--sticky-edge-shadow);
}
.dt-table tbody tr:hover td.sticky-col {
  background: var(--nav-hover-bg);
}
.dt-table th.checkbox-col,
.dt-table td.checkbox-col {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  padding-left: var(--space-surface-inset);
  padding-right: var(--sp-0);
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-base);
}
.dt-table tbody tr:hover td.checkbox-col {
  background: var(--nav-hover-bg);
}
.dt-table tbody tr.disabled:hover td.sticky-col,
.dt-table tbody tr.disabled:hover td.checkbox-col {
  background: var(--bg-base);
}
.dt-table tbody tr.selected td.checkbox-col {
  box-shadow: inset 2px 0 0 var(--accent);
}
.dt-table td.actions-col,
.dt-table th.actions-col {
  width: 40px;
  text-align: right;
  padding-right: var(--space-dense-cell-inset);
}
.dt-table .row-detail td {
  background: var(--bg-canvas);
  padding: var(--sp-0);
  color: var(--text-secondary);
  font-size: var(--fs-1);
  border-bottom: 1px solid var(--divider);
  white-space: normal;
  vertical-align: top;
}
.dt-table .row-detail-sticky {
  position: sticky;
  left: 0;
  z-index: 1;
  width: max-content;
  padding: var(--space-surface-inset) var(--sp-6) var(--space-surface-inset) 58px;
}
.dt-table .expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-6);
  color: var(--text-tertiary);
  cursor: pointer;
  background: none;
  border: none;
  margin-right: var(--sp-3);
  flex-shrink: 0;
  transition: transform var(--dur-default) var(--ease-lift), background var(--dur-moderate) var(--ease-out);
}
.dt-table .expand-btn:hover {
  background: var(--state-hover-bg);
  color: var(--text-primary);
}
.dt-table .expand-btn.open {
  transform: rotate(90deg);
}
.dt-table .expand-btn {
  width: 28px;
  height: 28px;
  padding: var(--sp-0);
  color: var(--text-secondary);
  border-radius: var(--radius-8);
  transition: transform var(--dur-default) var(--ease-lift), background var(--dur-default) var(--ease-lift);
}
.dt-table td:has(> .expand-btn) {
  line-height: 28px;
}
.dt-table td > .expand-btn {
  vertical-align: top;
}
.dt-table td.checkbox-col,
.dt-table th.checkbox-col {
  line-height: 0;
}
.dt-table .checkbox-col .mini-check {
  vertical-align: middle;
}
.dt-table .expand-btn:disabled {
  color: var(--text-disabled);
  cursor: not-allowed;
  background: none;
}
.dt-table .expand-btn svg {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
}
.dt-table.density-compact td,
.dt-table.density-compact th {
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
}
.dt-table.density-comfortable td,
.dt-table.density-comfortable th {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
}
.dt-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-chrome-gap);
  padding: var(--sp-5) var(--space-surface-inset);
  border-bottom: 1px solid var(--border-default);
  flex-wrap: wrap;
}
.dt-toolbar .spacer {
  flex: 1;
}
.dt-bulkbar {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--space-dense-cell-inset) var(--space-surface-inset);
  background: var(--accent-wash);
  border-bottom: 1px solid var(--accent-wash-border);
  font-size: var(--fs-1);
  color: var(--accent);
  font-weight: 500;
}
.dt-bulkbar .spacer {
  flex: 1;
}
.dt-empty {
  padding: var(--sp-10) var(--sp-7);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--fs-1);
}
.dt-empty svg {
  width: 26px;
  height: 26px;
  color: var(--text-disabled);
  margin-bottom: var(--sp-4);
}
.dt-error {
  padding: var(--sp-9) var(--sp-7);
  text-align: center;
  color: var(--badge-error-text);
  font-size: var(--fs-1);
}
.dt-error svg {
  width: 22px;
  height: 22px;
  margin-bottom: var(--sp-3);
}
.tab-row {
  position: relative;
  display: flex;
  gap: var(--sp-2);
  border-bottom: 1px solid var(--border-default);
}
.tab-row.scroll {
  overflow-x: auto;
  scrollbar-width: none;
  mask-image:
    linear-gradient(
      90deg,
      #000 calc(100% - 24px),
      transparent);
}
.tab-row.scroll::-webkit-scrollbar {
  display: none;
}
.mini-tab {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-2);
  font-size: var(--fs-1);
  color: var(--text-tertiary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  transition: color var(--dur-default) var(--ease-out), border-color var(--dur-default) var(--ease-out);
}
.mini-tab svg {
  width: 14px;
  height: 14px;
}
.mini-tab + .mini-tab {
  margin-left: var(--space-block-gap);
}
.mini-tab:hover {
  color: var(--text-primary);
}
.mini-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 500;
}
.mini-tab.disabled {
  color: var(--text-disabled);
  cursor: not-allowed;
}
.mini-tab.compact {
  padding: var(--sp-3) var(--sp-1);
  font-size: var(--fs-1);
}
.tab-pillbar {
  display: inline-flex;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-radius: var(--r-control);
  background: var(--bg-sunken);
}
.tab-pillbar.compact {
  padding: var(--sp-1);
}
.tab-pill {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-0) var(--sp-6);
  height: 32px;
  border-radius: var(--r-control-sm);
  font-size: var(--fs-2);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: none;
  transition: color var(--dur-default) var(--ease-out), background var(--dur-default) var(--ease-out);
}
.tab-pillbar.compact .tab-pill {
  height: 24px;
  padding: var(--sp-0) var(--space-control-inset-sm);
  font-size: var(--fs-1);
}
.tab-pill svg {
  width: 14px;
  height: 14px;
}
.tab-pill:hover {
  color: var(--text-primary);
  background: var(--border-default);
}
.tab-pill.active {
  background: var(--bg-base);
  color: var(--text-primary);
  box-shadow: var(--shadow-surface-rest);
}
.tab-pill.active:hover {
  background: var(--bg-base);
}
.tab-pill.disabled {
  color: var(--text-disabled);
  cursor: not-allowed;
}
.tab-pill.disabled:hover {
  background: none;
}
.crumbs {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-1);
  color: var(--text-tertiary);
  flex-wrap: wrap;
}
.crumb {
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--dur-moderate) var(--ease-out);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crumb:hover {
  color: var(--text-primary);
}
.crumb.current {
  color: var(--text-primary);
  font-weight: 500;
  cursor: default;
}
.crumb.home {
  display: flex;
  align-items: center;
}
.crumb.home svg {
  width: 14px;
  height: 14px;
}
.crumb-sep {
  color: var(--text-disabled);
  font-size: var(--fs-1);
}
.crumb-overflow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-6);
  color: var(--text-tertiary);
  cursor: pointer;
}
.crumb-overflow:hover {
  background: var(--bg-sunken);
  color: var(--text-primary);
}
.navlist-demo {
  position: relative;
  width: 220px;
  padding: var(--sp-5);
  border-radius: var(--r-card);
  border: 1px solid var(--border-subtle-line);
  background: var(--bg-base);
  overflow: hidden;
}
.nd-item {
  display: block;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-24);
  margin: 1px var(--sp-0);
  font-size: var(--fs-1);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: color var(--dur-moderate) var(--ease-out), background var(--dur-moderate) var(--ease-out);
}
.nd-item:hover {
  color: var(--text-primary);
  background: var(--bg-canvas);
}
.nd-item.active {
  color: var(--accent);
  background: var(--accent-wash);
  font-weight: 500;
}
.nd-item.active::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: var(--radius-4);
  background: var(--accent);
}
.nd-item.disabled {
  opacity: .45;
  cursor: not-allowed;
}
.navlist-demo.compact .nav-item {
  padding: var(--sp-3) var(--sp-5);
}
.navlist-demo.compact .nav-item.active::before {
  left: -6px;
}
.nav-item.has-ico,
.nav-root-item.has-ico {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.nav-item .ico,
.nav-root-item .ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.nav-item .count {
  margin-left: auto;
  font-size: var(--fs-1);
  color: var(--text-tertiary);
  font-weight: 500;
}
.navlist-demo {
  transition: width var(--dur-default) var(--ease-lift);
}
.spec-frame.spec-glass {
  background: var(--bg-sunken);
}
.spec-frame.spec-glass .navlist-demo {
  border-color: var(--glass-card-border);
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  box-shadow: var(--shadow-ovl);
}
.navo-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.navo-logo > span {
  display: inline-flex;
  align-items: center;
}
.navo-logo svg {
  height: 100%;
  width: auto;
  display: block;
}
.navo-logo .navo-logo-dark {
  display: none;
}
[data-theme=dark] .navo-logo .navo-logo-light {
  display: none;
}
[data-theme=dark] .navo-logo .navo-logo-dark {
  display: inline-flex;
}
.nav-brand {
  display: flex;
  align-items: center;
  padding: var(--sp-2) var(--space-label-gap) var(--sp-7);
}
.nav-brand .nav-brand-lockup svg {
  height: 22px;
  width: auto;
  display: block;
}
.nav-brand .nav-brand-mark {
  display: none;
}
.nav-brand .nav-brand-mark svg {
  width: 26px;
  height: 26px;
  display: block;
}
.navlist-demo.collapsed .nav-brand {
  justify-content: center;
  padding-left: var(--sp-0);
  padding-right: var(--sp-0);
}
.navlist-demo.collapsed .nav-brand .nav-brand-lockup {
  display: none;
}
.navlist-demo.collapsed .nav-brand .nav-brand-mark {
  display: block;
}
.navlist-demo .nav-label {
  white-space: nowrap;
}
.navlist-demo.collapsed {
  width: 64px;
}
.navlist-demo.collapsed .nav-label,
.navlist-demo.collapsed .count,
.navlist-demo.collapsed .nav-sec {
  display: none;
}
.navlist-demo.collapsed .nav-item {
  justify-content: center;
  padding-left: var(--sp-0);
  padding-right: var(--sp-0);
}
.navlist-demo.collapsed .nav-item.active::before {
  display: none;
}
.navlist-demo.collapsed .nav-item,
.ash-frame.side-collapsed .ash-side .nav-item {
  min-height: calc(18px + var(--sp-4) * 2);
}
.navlist-demo.collapsed .nav-group-label {
  display: none;
}
.navlist-demo.collapsed .nav-items {
  border-left: none;
  margin-left: var(--sp-0);
  padding-left: var(--sp-0);
}
.ash-side {
  position: relative;
}
.menu-handle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 9px;
  z-index: 5;
  padding: var(--sp-0);
  background: none;
  border: none;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-handle::before {
  content: "";
  width: 3px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--border-strong);
  opacity: .3;
  transition: opacity var(--dur-moderate) var(--ease-out), background var(--dur-moderate) var(--ease-out);
}
.menu-handle:hover::before,
.menu-handle:focus-visible::before {
  opacity: 1;
}
.menu-handle[data-dragging]::before {
  opacity: 1;
  background: var(--accent);
}
.menu-handle.handle-bottom {
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: 9px;
  cursor: row-resize;
}
.menu-handle.handle-bottom::before {
  width: 28px;
  height: 3px;
}
.menu-collapse {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-left: auto;
  padding: var(--sp-0);
  border: none;
  border-radius: var(--r-control-sm);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background var(--dur-moderate) var(--ease-out), color var(--dur-moderate) var(--ease-out);
}
.menu-collapse:hover {
  background: var(--nav-hover-bg);
  color: var(--text-secondary);
}
.menu-collapse svg {
  width: 16px;
  height: 16px;
  display: block;
  transform: rotate(180deg);
  transition: transform var(--dur-default) var(--ease-lift);
}
.menu-collapse[aria-expanded=false] svg {
  transform: none;
}
.navlist-demo.collapsed .nav-brand,
.ash-frame.side-collapsed .ash-side .nav-brand {
  flex-direction: column;
  gap: var(--sp-3);
}
.navlist-demo.collapsed .menu-collapse,
.ash-frame.side-collapsed .ash-side .menu-collapse {
  margin-left: var(--sp-0);
}
.ash-side .nav-label {
  white-space: nowrap;
}
.ash-frame .ash-side {
  transition: width var(--dur-default) var(--ease-lift);
}
.ash-frame.side-collapsed .ash-side {
  width: 64px;
}
#page-t-appshell .ash-frame.side-collapsed .ash-side {
  width: 64px;
}
.ash-frame.side-collapsed .ash-side .nav-label,
.ash-frame.side-collapsed .ash-side .count,
.ash-frame.side-collapsed .ash-side .nav-sec {
  display: none;
}
.ash-frame.side-collapsed .ash-side .nav-group-label {
  display: none;
}
.ash-frame.side-collapsed .ash-side .nav-items {
  border-left: none;
  margin-left: var(--sp-0);
  padding-left: var(--sp-0);
}
.ash-frame.side-collapsed .ash-side .nav-brand {
  justify-content: center;
  padding-left: var(--sp-0);
  padding-right: var(--sp-0);
}
.ash-frame.side-collapsed .ash-side .nav-brand .nav-brand-lockup {
  display: none;
}
.ash-frame.side-collapsed .ash-side .nav-brand .nav-brand-mark {
  display: block;
}
.ash-frame.side-collapsed .ash-side-head .mini-btn {
  margin-left: var(--sp-0);
}
.ash-frame.side-collapsed .ash-side .nav-item {
  justify-content: center;
  padding-left: var(--sp-0);
  padding-right: var(--sp-0);
}
.ash-frame.side-collapsed .ash-side .nav-item.active::before {
  display: none;
}
.nav-sec {
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: var(--ls-6);
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: var(--sp-4) var(--space-label-gap) var(--sp-2);
}
.nd-group-label {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--space-menu-row-inset);
  border-radius: var(--radius-8);
  cursor: pointer;
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--text-primary);
  user-select: none;
}
.topnav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2);
  border-radius: var(--r-control);
  background: var(--bg-base);
  border: 1px solid var(--border-default);
}
.topnav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-control-sm);
  font-size: var(--fs-1);
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: none;
  transition: color var(--dur-default) var(--ease-out), background var(--dur-default) var(--ease-out);
}
.topnav-item svg {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
}
.topnav-item:hover {
  color: var(--text-primary);
  background: var(--border-default);
}
.topnav-item.active {
  background: var(--accent-wash);
  color: var(--accent);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--accent-wash-border);
}
.topnav-item.active:hover {
  background: var(--accent-wash);
}
.topnav-item.disabled {
  color: var(--text-disabled);
  cursor: not-allowed;
}
.topnav-item.disabled:hover {
  background: none;
}
.pager {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.pager-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-control);
  border: 1px solid var(--border-default);
  background: var(--bg-base);
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background var(--dur-moderate) var(--ease-out),
    border-color var(--dur-moderate) var(--ease-out),
    color var(--dur-moderate) var(--ease-out);
}
.pager-btn svg {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
}
.pager-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.pager-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.pager-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: var(--sp-0) var(--sp-2);
  border-radius: var(--r-control);
  font-size: var(--fs-1);
  color: var(--text-secondary);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-moderate) var(--ease-out), color var(--dur-moderate) var(--ease-out);
}
.pager-page:hover {
  background: var(--bg-sunken);
  color: var(--text-primary);
}
.pager-page.active {
  background: var(--accent);
  color: #fff;
  font-weight: 500;
}
.pager-ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 32px;
  color: var(--text-disabled);
  font-size: var(--fs-1);
}
.pager-compact {
  display: flex;
  align-items: center;
  gap: var(--space-chrome-gap);
  font-size: var(--fs-1);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.pager-jump {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-1);
  color: var(--text-tertiary);
}
.pager-jump input {
  width: 48px;
  height: 28px;
  text-align: center;
  border-radius: var(--radius-8);
  border: 1px solid var(--border-default);
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: var(--fs-1);
  font-variant-numeric: tabular-nums;
}
.stepper {
  display: flex;
  align-items: flex-start;
}
.stepper.vertical {
  flex-direction: column;
}
.step {
  display: flex;
  align-items: center;
  gap: var(--space-chrome-gap);
}
.stepper.vertical .step {
  align-items: flex-start;
  min-height: 56px;
}
.step-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: var(--fs-1);
  font-weight: 600;
  flex-shrink: 0;
  border: 1.5px solid var(--border-strong);
  color: var(--text-tertiary);
  background: var(--bg-base);
}
.step-dot svg {
  width: 13px;
  height: 13px;
}
.step.completed .step-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.step.current .step-dot {
  border-color: #66AA12;
  color: #66AA12;
  box-shadow: 0 0 0 3px rgba(198, 243, 95, .35);
}
:root[data-theme=dark] .step.current .step-dot {
  border-color: #C6F35F;
  color: #C6F35F;
  box-shadow: 0 0 0 3px rgba(198, 243, 95, .25);
}
.step.error .step-dot {
  background: var(--badge-error-text);
  border-color: var(--badge-error-text);
  color: #fff;
}
:root[data-theme=dark] .step.error .step-dot {
  background: var(--badge-error-bg);
  border-color: var(--badge-error-text);
  color: var(--badge-error-text);
}
.step-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.step-label .t {
  font-size: var(--fs-1);
  font-weight: 500;
  color: var(--text-tertiary);
}
.step.current .step-label .t,
.step.completed .step-label .t {
  color: var(--text-primary);
}
.step.error .step-label .t {
  color: var(--badge-error-text);
}
.step-label .s {
  font-size: var(--fs-1);
  color: var(--text-tertiary);
}
.step-line {
  flex: 1;
  height: 1.5px;
  background: var(--border-default);
  margin: var(--sp-0) var(--sp-4);
  align-self: center;
  min-width: 24px;
}
.step.completed + .step-line {
  background: var(--accent);
}
.stepper.vertical .step-line {
  width: 1.5px;
  height: 28px;
  margin: var(--sp-1) var(--sp-0) var(--sp-1) var(--sp-5);
  align-self: flex-start;
}
.stepper.track {
  display: flex;
  align-items: flex-start;
  padding-bottom: 32px;
}
.track-point {
  position: relative;
  width: 14px;
  flex-shrink: 0;
}
.track-dot-box {
  height: 14px;
  width: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.track-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg-base);
  border: 2px solid var(--border-strong);
  flex-shrink: 0;
}
.track-dot.done {
  background: var(--blue-500);
  border-color: var(--blue-500);
}
.track-dot.current {
  position: relative;
  width: 14px;
  height: 14px;
  background: #C6F35F;
  border: none;
}
.track-dot.current::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: #C6F35F;
  animation: navo-live-pulse 2s cubic-bezier(.22, .61, .36, 1) infinite;
}
.track-connector {
  flex: 1 1 auto;
  min-width: 16px;
  height: 3px;
  background: var(--border-default);
  margin-top: 5.5px;
}
.track-connector.first {
  border-radius: 999px 0 0 999px;
}
.track-connector.last {
  border-radius: 0 999px 999px 0;
}
.track-connector.done {
  background: var(--blue-500);
}
.track-connector.current {
  background:
    linear-gradient(
      to right in oklch,
      var(--blue-500),
      var(--lime-300));
}
.track-point span {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: var(--fs-1);
  color: var(--text-tertiary);
}
.track-point:first-child span {
  left: 0;
  transform: none;
}
.track-point:last-child span {
  left: auto;
  right: 0;
  transform: none;
}
.track-point.done span,
.track-point.current span {
  color: var(--text-primary);
  font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
  .track-dot.current::after {
    animation: none;
    opacity: .3;
  }
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-1);
  color: var(--text-secondary);
  cursor: pointer;
}
.back-link svg {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
}
.back-link:hover {
  color: var(--text-primary);
}
.item-nav {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-16);
  overflow: hidden;
}
.item-nav > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-6);
  cursor: pointer;
  transition: background var(--dur-moderate) var(--ease-out);
}
.item-nav > div:hover {
  background: var(--bg-sunken);
}
.item-nav > div.next {
  align-items: flex-end;
  text-align: right;
  border-left: 1px solid var(--border-default);
}
.item-nav .lbl {
  font-size: var(--fs-1);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.item-nav .val {
  font-size: var(--fs-1);
  color: var(--text-primary);
  font-weight: 500;
}
.mini-skel {
  background:
    linear-gradient(
      90deg,
      var(--bg-sunken) 25%,
      var(--border-default) 37%,
      var(--bg-sunken) 63%);
  background-size: 400% 100%;
  animation: skel-shimmer 1.6s ease infinite;
  border-radius: var(--radius-6);
}
@keyframes skel-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
.mini-spinner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid var(--border-default);
  border-top-color: var(--accent);
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.mini-spinner.xs {
  width: 12px;
  height: 12px;
  border-width: 2px;
}
.mini-spinner.sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}
.mini-spinner.lg {
  width: 28px;
  height: 28px;
  border-width: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .mini-skel {
    animation: none;
    background: var(--bg-sunken);
  }
  .mini-spinner {
    animation: none;
    border-top-color: var(--border-default);
    border-right-color: var(--accent);
  }
}
.icon-anim {
  width: 40px;
  height: 40px;
}
.icon-anim-sync {
  width: 30px;
  height: 30px;
}
.icon-anim-radar circle {
  fill: none;
  stroke: var(--border-default);
}
.icon-anim-radar .sweep {
  transform-origin: 50% 50%;
  animation: spin 3s linear infinite;
}
.icon-anim-sync {
  color: var(--accent);
  animation: spin 1.4s linear infinite;
}
.icon-anim-ping .track {
  stroke: var(--border-default);
}
.icon-anim-ping .dot {
  fill: var(--accent);
  animation: navo-ping-travel 2.4s ease-in-out infinite;
}
@keyframes navo-ping-travel {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  45% {
    transform: translateX(20px);
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  51% {
    transform: translateX(0);
    opacity: 0;
  }
  55% {
    opacity: 1;
  }
  100% {
    transform: translateX(20px);
    opacity: 1;
  }
}
.icon-anim-bars rect {
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: navo-bar-pulse 1.2s ease-in-out infinite;
}
.icon-anim-bars rect:nth-child(2) {
  animation-delay: .15s;
}
.icon-anim-bars rect:nth-child(3) {
  animation-delay: .3s;
}
@keyframes navo-bar-pulse {
  0%, 100% {
    transform: scaleY(.4);
  }
  50% {
    transform: scaleY(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .icon-anim-radar .sweep,
  .icon-anim-sync {
    animation: none;
  }
  .icon-anim-ping .dot {
    animation: none;
    transform: translateX(10px);
    opacity: .6;
  }
  .icon-anim-bars rect {
    animation: none;
    transform: scaleY(.7);
  }
}
.updating-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-1);
  color: var(--text-tertiary);
}
.anatomy-row {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--space-label-gap) var(--sp-0);
  border-bottom: 1px solid var(--divider);
}
.anatomy-row:last-child {
  border-bottom: none;
}
.anatomy-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--n-900);
  color: #fff;
  font-size: var(--fs-1);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.anatomy-name {
  width: 150px;
  font-size: var(--fs-1);
  font-weight: 500;
  flex-shrink: 0;
}
.anatomy-desc {
  font-size: var(--fs-1);
  color: var(--text-secondary);
  min-width: 0;
  overflow-wrap: break-word;
}
.zone-map {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  border: 1px solid var(--border-default);
  border-radius: var(--r-panel);
  padding: var(--sp-6);
  background: var(--bg-sunken);
}
.zone-row {
  display: flex;
  gap: var(--sp-4);
}
.zone {
  flex: 1;
  border-radius: var(--radius-8);
  padding: var(--sp-5) var(--space-surface-inset);
  font-size: var(--fs-1);
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.zone .zn {
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--text-primary);
}
.zone.required {
  background: var(--bg-base);
  border: 1.5px solid var(--border-strong);
}
.zone.optional {
  background: var(--bg-base);
  border: 1.5px dashed var(--border-strong);
}
.zone.conditional {
  background: var(--bg-base);
  border: 1.5px dashed var(--blue-300);
}
.domain-card {
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
  background: var(--bg-base);
  padding: var(--sp-7) var(--sp-7);
}
.lp-block {
  border: 1px solid var(--border-subtle-line);
  border-radius: var(--radius-32);
  overflow: hidden;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 23px,
      var(--spec-grid-line, var(--border-subtle-line)) 23px,
      var(--spec-grid-line, var(--border-subtle-line)) 24px),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 23px,
      var(--spec-grid-line, var(--border-subtle-line)) 23px,
      var(--spec-grid-line, var(--border-subtle-line)) 24px),
    var(--bg-canvas);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 0 0 1px rgba(16, 24, 40, .02),
    0 1px 2px rgba(16, 24, 40, .03);
}
.lp-block .card {
  display: flex;
  flex-direction: column;
}
.lp-theme-dark {
  display: none;
}
.lp-theme-light {
  display: block;
}
:root[data-theme=dark] .lp-theme-dark {
  display: block;
}
:root[data-theme=dark] .lp-theme-light {
  display: none;
}
#page-t-landing .card,
#page-t-landing .icon-tile {
  background: var(--glass-card-bg);
  border: none;
  border-radius: var(--radius-32);
  box-shadow: var(--shadow-4);
}
#page-t-landing .hero-search-wrap > .card {
  background: var(--bg-base);
}
#page-t-landing .glass-frame-inner {
  border-radius: var(--radius-32);
}
#page-t-landing .glass-frame {
  border-radius: calc(var(--radius-32) + 8px);
}
.lp-icon-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-999);
  background: var(--bg-base);
  box-shadow: var(--shadow-1);
  flex-shrink: 0;
}
.lp-navdrop {
  position: relative;
}
.lp-navdrop-trigger {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: none;
  border: none;
  padding: var(--sp-0);
  font-family: var(--font-sans);
  font-size: var(--fs-2);
  color: var(--text-secondary);
  cursor: pointer;
}
.lp-navdrop-trigger:hover {
  color: var(--text-primary);
}
.lp-navdrop-trigger svg {
  width: 12px;
  height: 12px;
  color: var(--text-tertiary);
  transition: transform var(--dur-default) var(--ease-out);
}
.lp-navdrop-trigger[aria-expanded=true] {
  color: var(--text-primary);
}
.lp-navdrop-trigger[aria-expanded=true] svg {
  transform: rotate(180deg);
}
.lp-topnav-link {
  font-size: var(--fs-2);
  color: var(--text-secondary);
  text-decoration: none;
}
.lp-topnav-link:hover {
  color: var(--text-primary);
}
.lp-topnav-toggle {
  display: none;
}
.lp-navdrop-panel {
  display: none;
  position: absolute;
  top: calc(100% + var(--sp-6));
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-24);
  background: linear-gradient(var(--glass-card-bg-strong), var(--glass-card-bg-strong)), var(--glass-card-bg-strong);
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.4);
  box-shadow: var(--shadow-ovl);
  padding: var(--sp-3);
}
.lp-navdrop-panel.open {
  display: block;
}
.lp-navdrop-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}
.lp-navdrop-eyebrow {
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: var(--ls-7);
  color: var(--text-tertiary);
}
.lp-navdrop-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--radius-16);
  text-decoration: none;
}
.lp-navdrop-item:hover {
  background: var(--bg-sunken);
  text-decoration: none;
}
.lp-navdrop-item:hover .lp-navdrop-item-title,
.lp-navdrop-item:hover .lp-navdrop-item-desc {
  text-decoration: none;
}
.lp-navdrop-item svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}
.lp-navdrop-item-title {
  display: block;
  font-size: var(--fs-2);
  font-weight: 600;
  color: var(--text-primary);
}
.lp-navdrop-item-desc {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-1);
  line-height: var(--lh-3);
  color: var(--text-tertiary);
}
.lp-footer-heading {
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: var(--ls-7);
  color: var(--n-500);
  margin-bottom: var(--sp-4);
}
.lp-footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  font-size: var(--fs-1);
  color: var(--n-300);
}
.lp-footer-links a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-default) var(--ease-out);
}
.lp-footer-links a:hover {
  color: #fff;
}
.email-shell {
  max-width: 480px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--r-panel);
  overflow: hidden;
  box-shadow: var(--shadow-surface-rest);
  font-family: var(--font-sans);
}
.email-header {
  background: #0B0D10;
  padding: var(--sp-6) var(--sp-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.email-header svg {
  height: 22px;
  width: auto;
  display: block;
}
.email-badge {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: .02em;
  background: #C6F35F;
  color: #0B0D10 !important;
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-button);
  text-decoration: none !important;
  display: inline-block;
}
.email-body {
  padding: var(--sp-9) var(--sp-8);
  color: #181B20;
  font-size: var(--fs-3);
  line-height: 1.6;
}
.email-body p {
  margin: 0 0 var(--sp-6);
}
.email-body h1 {
  font-size: var(--fs-5);
  font-weight: var(--fw-semibold);
  color: #0B0D10;
  margin: 0 0 var(--sp-6);
}
.email-callout {
  border-left: 3px solid #113EC9;
  background: #F8F9FB;
  border-radius: 0 var(--radius-16) var(--radius-16) 0;
  padding: var(--sp-6) var(--sp-7);
  margin: var(--sp-8) 0;
}
.email-callout .eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #113EC9;
  margin-bottom: var(--sp-3);
}
.email-callout h2 {
  font-size: var(--fs-4);
  font-weight: var(--fw-semibold);
  color: #0B0D10;
  margin: 0 0 var(--sp-5);
}
.step-pill-row {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.step-pill {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  font-weight: 700;
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-button);
  flex-shrink: 0;
  width: 68px;
  white-space: nowrap;
  text-align: center;
  box-sizing: border-box;
}
.step-pill.blue {
  background: #113EC9;
  color: #fff;
}
.step-pill.lime {
  background: #C6F35F;
  color: #0B0D10;
}
.step-pill-connector {
  width: 1px;
  height: 14px;
  margin-left: 34px;
  border-left: 2px dotted #CDD2DA;
}
.email-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  height: 48px;
  padding: var(--sp-0) var(--sp-8);
  border-radius: var(--r-button-lg);
  background: #113EC9;
  color: #fff !important;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1;
  text-decoration: none !important;
  transition:
    background var(--dur-moderate) var(--ease-out),
    box-shadow var(--dur-moderate) var(--ease-out),
    transform var(--dur-moderate) var(--ease-out);
}
.email-btn:hover {
  background: #1235A3;
  box-shadow: 0 16px 32px rgba(17, 62, 201, .32);
  text-decoration: none !important;
}
.email-footer {
  padding: var(--sp-8) var(--sp-8) var(--sp-9);
  border-top: 1px solid #E3E6EB;
  text-align: center;
}
.email-footer .links {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  color: #113EC9;
  margin-bottom: var(--sp-5);
}
.email-footer .links a {
  color: #113EC9;
  text-decoration: none;
}
.email-footer .tagline {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  color: #9DA5B1;
  margin-bottom: var(--sp-5);
}
.email-footer .copyright {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  color: #9DA5B1;
  margin-bottom: var(--sp-2);
}
.email-footer .legal {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  color: #9DA5B1;
  line-height: 1.7;
}
.email-footer .legal a {
  color: #505866;
  text-decoration: underline;
  text-decoration-color: #CDD2DA;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-moderate) var(--ease-out);
}
.email-footer .legal a:hover {
  color: #0B0D10;
  text-decoration-color: #505866;
}
.domain-card .row {
  display: flex;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-0);
  border-bottom: 1px solid var(--divider);
  font-size: var(--fs-1);
}
.domain-card .row:last-child {
  border-bottom: none;
}
.domain-card .row .k {
  color: var(--text-tertiary);
}
.domain-card .row .v {
  color: var(--text-primary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.flow-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.flow-arrow {
  color: var(--text-disabled);
  font-size: var(--fs-2);
}
.logo-tile-row {
  display: flex;
  gap: var(--space-stack-gap);
  flex-wrap: wrap;
}
.logo-tile {
  flex: 1;
  min-width: 150px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
  overflow: hidden;
}
.logo-tile .swatch {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-tile .swatch.on-light {
  background: #FFFFFF;
}
.logo-tile .swatch.on-dark {
  background: #0B0D10;
}
.logo-tile .cap {
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-base);
  border-top: 1px solid var(--border-default);
}
.logo-tile .cap .fn {
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-sans);
}
.logo-tile .cap .meta {
  font-size: 10.5px;
  color: var(--text-tertiary);
  margin-top: var(--sp-1);
  font-variant-numeric: tabular-nums;
}
table.logotable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-1);
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
}
table.logotable th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: var(--ls-7);
  color: var(--text-tertiary);
  font-weight: 600;
  padding: var(--sp-4) var(--space-dense-cell-inset);
  border-bottom: 1px solid var(--border-default);
}
table.logotable td {
  padding: var(--sp-4) var(--space-dense-cell-inset);
  border-bottom: 1px solid var(--divider);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
table.logotable tr:last-child td {
  border-bottom: none;
}
table.logotable td.k {
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
}
.avail-yes {
  color: #0F7A42;
  font-weight: 600;
}
.avail-no {
  color: var(--text-disabled);
}
.logo-note {
  font-size: var(--fs-1);
  color: var(--text-tertiary);
  line-height: var(--lh-3);
  margin-top: var(--space-label-gap);
}
.workspace {
  background-image: var(--canvas-grid);
  background-size: 22px 22px;
  background-position: 0 0;
}
.section {
  margin-top: var(--space-section-gap);
}
#page-ov-intro .section {
  margin-top: calc(var(--space-section-gap) / 2);
}
.domain-card,
.icon-tile,
.brand-tile,
.logo-tile,
.density-block,
.zone-map,
.mini-card,
.doctable-wrap,
table.logotable {
  border-color: transparent;
  box-shadow: var(--shadow-surface-rest), var(--surface-sheen);
}
.card,
.principle-card,
.product-row,
.stub-list .row {
  border-color: transparent;
  transition:
    border-color var(--dur-default) var(--ease-lift),
    box-shadow var(--dur-slow) var(--ease-lift),
    transform var(--dur-default) var(--ease-lift);
}
.product-row,
.stub-list .row {
  box-shadow: var(--shadow-surface-rest), var(--surface-sheen);
}
.principle-card:hover,
.product-row:hover,
.stub-list .row:hover {
  box-shadow: var(--shadow-surface-hover), var(--surface-sheen);
}
.card,
.panel,
.ash-sheet {
  border-color: transparent;
}
.card {
  box-shadow: var(--shadow-surface-rest), var(--surface-sheen);
}
.card.clickable:not(.selected),
.card.clickable:not(.selected):hover,
.principle-card:hover,
.product-row:hover,
.stub-list .row:hover {
  border-color: transparent;
}
.card.clickable:not(.selected):hover {
  box-shadow: var(--shadow-surface-hover), var(--surface-sheen);
}
.spec-frame {
  box-shadow: inset 0 0 0 1px var(--border-subtle-line), var(--surface-sheen);
}
.spec-frame::after {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border-radius: var(--radius-12);
  background:
    linear-gradient(var(--text-disabled), var(--text-disabled)) top left / 12px 1.5px no-repeat,
    linear-gradient(var(--text-disabled), var(--text-disabled)) top left / 1.5px 12px no-repeat,
    linear-gradient(var(--text-disabled), var(--text-disabled)) top right / 12px 1.5px no-repeat,
    linear-gradient(var(--text-disabled), var(--text-disabled)) top right / 1.5px 12px no-repeat,
    linear-gradient(var(--text-disabled), var(--text-disabled)) bottom left / 12px 1.5px no-repeat,
    linear-gradient(var(--text-disabled), var(--text-disabled)) bottom left / 1.5px 12px no-repeat,
    linear-gradient(var(--text-disabled), var(--text-disabled)) bottom right / 12px 1.5px no-repeat,
    linear-gradient(var(--text-disabled), var(--text-disabled)) bottom right / 1.5px 12px no-repeat;
  opacity: .4;
}
.sidenav {
  box-shadow: 1px 0 0 var(--border-subtle-line);
}
.nav-group.open > .nav-group-label {
  color: var(--text-primary);
}
.nav-item.active {
  box-shadow: none;
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -17px;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: var(--radius-4);
  background: var(--accent);
}
.searchbox {
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, .04), var(--surface-sheen);
}
.mini-input:focus {
  box-shadow: var(--ring-focus);
}
.route-search-pill .mini-input:focus,
.route-search-pill .mini-select:focus,
.route-search-pill .mini-select.open {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}
@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(.997);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.page.active {
  animation-duration: 320ms;
}
.nav-item:focus-visible,
.nav-root-item:focus-visible,
.nav-group-label:focus-visible,
.theme-toggle:focus-visible,
.mini-btn:focus-visible,
.mini-check:focus-visible,
.mini-radio:focus-visible,
.mini-switch:focus-visible,
.seg-option:focus-visible,
.chip-opt:focus-visible,
.mini-tab:focus-visible,
.tab-pill:focus-visible,
.crumb:focus-visible,
.topnav-item:focus-visible,
.pager-btn:focus-visible,
.pager-page:focus-visible,
.back-link:focus-visible,
.dt-table thead th.sortable:focus-visible,
.dt-table .expand-btn:focus-visible,
.dt-table tbody tr.clickable:focus-visible,
.alert .dismiss:focus-visible,
.banner .dismiss:focus-visible,
.toast .dismiss:focus-visible,
.alert .actions a:focus-visible,
.toast .actions a:focus-visible,
.menu-collapse:focus-visible,
.card.clickable:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}
.type-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-8);
  color: var(--accent);
}
.type-eyebrow.neutral {
  color: var(--text-primary);
}
.type-display-product {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-6);
  letter-spacing: var(--ls-2);
  line-height: var(--lh-1);
  color: var(--text-primary);
}
.type-section-heading {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-7);
  color: var(--text-primary);
}
.type-numeric-hero {
  font-family: var(--font-sans);
  font-size: var(--fs-6);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-1);
  line-height: var(--lh-1);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.type-numeric-hero.negative {
  color: var(--destructive);
}
#page-t-landing .type-numeric-hero,
#page-t-appshell .type-numeric-hero,
#page-t-dashboard .type-numeric-hero {
  font-family: var(--font-display);
}
#page-c-datadisplay .type-numeric-hero {
  font-family: var(--font-display);
}
.type-label-stat {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-6);
  color: var(--text-tertiary);
}
.type-code {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-5);
}
.dt-table td.type-code {
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  font-weight: var(--fw-medium);
}
.type-ui-string {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
}
.kbd {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10.5px;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-6);
  background: var(--bg-sunken);
  border: 1px solid var(--border-default);
  color: var(--text-tertiary);
}
table.doctable td.k.mono {
  font-family: var(--font-mono);
}
table.doctable td.k.type-code,
table.doctable td.k.kbd {
  font-family: var(--font-sans);
}
.stat-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.delta {
  font-size: var(--fs-1);
  font-weight: var(--fw-medium);
}
.stat-block .delta {
  color: var(--text-tertiary);
}
.stat-block .delta.negative {
  color: var(--destructive);
}
@media (min-width: 901px) {
  .shell {
    position: relative;
    background: var(--bg-canvas);
  }
  .shell::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / -1;
    margin: var(--sp-5) var(--sp-0) var(--sp-5) var(--sp-5);
    border-radius: var(--r-card);
    background: var(--bg-base);
    box-shadow: var(--shadow-surface-rest), var(--surface-sheen);
    pointer-events: none;
  }
  .topbar {
    grid-column: 2;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    padding-block: var(--sp-0);
    padding-inline: max(var(--space-page-gutter-x), calc((100% - 1200px) / 2 + var(--space-page-gutter-x)));
  }
  .topbar .divider-v {
    display: none;
  }
  .topbar .brand {
    position: absolute;
    left: calc(var(--sp-5) + var(--sp-5) + var(--space-label-gap));
    top: calc(var(--sp-5) + var(--sp-7));
    z-index: 31;
  }
  .topbar .theme-toggle {
    position: absolute;
    left: calc(var(--sp-5) + var(--sp-5) + var(--sp-2));
    bottom: calc(var(--sp-5) + var(--sp-5));
    z-index: 31;
  }
  .sidenav {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    z-index: 1;
    margin: var(--sp-0) var(--sp-0) calc(var(--sp-5) + var(--sp-5) + 36px + var(--sp-5)) var(--sp-5);
    padding-top: var(--sp-8);
    background: transparent;
    border-right: none;
    box-shadow: none;
    border-radius: var(--sp-0) var(--sp-0) var(--r-card) var(--r-card);
  }
}
.u-ground {
  background: var(--bg-ground);
}
.block-frame {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--sp-4);
  border-radius: var(--radius-32);
  background: var(--block-frame-bg);
}
.block-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-3) var(--sp-3) var(--sp-5) var(--sp-5);
}
.block-head-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 36px;
  min-width: 0;
}
.block-title {
  margin: var(--sp-0);
  font-family: var(--font-display);
  font-size: var(--fs-4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-1);
  color: var(--text-primary);
}
.block-count {
  margin-left: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-2);
  font-weight: var(--fw-regular);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.block-sub {
  margin: var(--sp-0);
  max-width: 66ch;
  font-size: var(--fs-1);
  line-height: var(--lh-4);
  color: var(--text-secondary);
}
.block-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
}
.block-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  min-width: 0;
  padding: var(--sp-7);
  border-radius: var(--radius-24);
  background: var(--block-card-bg);
}
.block-card.is-bare {
  border-radius: var(--radius-32);
}
.block-tiles {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: var(--sp-0);
  padding: var(--sp-0);
  list-style: none;
}
.block-tile {
  display: block;
  min-width: 0;
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--radius-16);
  background: var(--block-tile-bg);
  color: inherit;
  font: inherit;
  text-align: left;
}
:is(a, button, [role=button]).block-tile,
.block-tile.clickable {
  cursor: pointer;
  transition: background var(--dur-default) var(--ease-out), box-shadow var(--dur-default) var(--ease-out);
}
:is(a, button, [role=button]).block-tile:hover,
.block-tile.clickable:hover {
  background: linear-gradient(var(--layer-hover), var(--layer-hover)), var(--block-tile-bg);
}
:is(a, button, [role=button]).block-tile:focus-visible,
.block-tile.clickable:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}
.block-tile.selected,
.block-tile[aria-pressed=true] {
  box-shadow: inset 0 0 0 2px var(--selected-mark);
}
.block-tile.disabled,
.block-tile[aria-disabled=true] {
  color: var(--text-disabled);
  cursor: not-allowed;
}
.block-card .prog-linear {
  background: var(--block-tile-bg);
  box-shadow: none;
}
.block-tile .prog-linear {
  background: var(--block-track);
}
.block-card .seg-control {
  background: var(--block-tile-bg);
  border-color: transparent;
}
.block-card .dt-wrap {
  background: transparent;
  border: none;
  border-radius: var(--sp-0);
  box-shadow: none;
}
.block-card .dt-wrap thead th {
  background: transparent;
}
.block-card .dt-wrap :is(th, td) {
  text-align: left;
}
.icon-btn.block-action {
  background: var(--block-card-bg);
  color: var(--text-primary);
}
.icon-btn.block-action:hover {
  background: color-mix(in srgb, var(--text-primary) 6%, var(--block-card-bg));
}
.icon-btn.block-action.has-active {
  position: relative;
}
.icon-btn.block-action.has-active::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--block-card-bg);
}
.controls-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  min-width: 0;
  max-width: 100%;
}
.controls-row.tray {
  padding: var(--sp-3);
  border-radius: var(--radius-32);
  background: var(--block-frame-bg);
}
.controls-row .mini-select {
  height: 32px;
  min-width: 140px;
  padding: var(--sp-0) var(--space-control-inset-sm);
  font-size: var(--fs-1);
}
.controls-row > .seg-control:last-child {
  margin-left: auto;
}
.chip-opt.selected,
.chip-opt.selected:hover {
  background: var(--selected-mark);
  border-color: var(--selected-mark);
  color: var(--selected-mark-ink);
}
.card.selected,
.card.clickable.selected:hover {
  background: var(--bg-base);
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--selected-mark), var(--shadow-surface-rest);
}
.ash-frame.ash-glass .card.selected,
.ash-frame.ash-glass .card.clickable.selected:hover {
  background: var(--glass-card-bg);
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--selected-mark);
}
.mini-badge.success,
.mini-badge.live,
:root[data-theme=dark] .mini-badge.live {
  background: var(--badge-solid-success-bg);
  color: var(--badge-solid-success-text);
}
.mini-badge.live .bdot {
  background: var(--badge-solid-success-text);
}
.mini-badge.warning {
  background: var(--badge-solid-warning-bg);
  color: var(--badge-solid-warning-text);
}
.mini-badge.info {
  background: var(--badge-solid-info-bg);
  color: var(--badge-solid-info-text);
}
.mini-badge.error {
  background: var(--badge-solid-error-bg);
  color: var(--badge-solid-error-text);
}
.mini-badge.neutral {
  background: var(--badge-solid-neutral-bg);
  color: var(--badge-solid-neutral-text);
}
.mini-avatar[data-hue]:not(.image):not(.icon):not(.fallback):not(.more) {
  background: var(--avatar-hue, var(--avatar-hue-0));
  color: var(--n-950);
}
.mini-avatar[data-hue="0"] {
  --avatar-hue:var(--avatar-hue-0);
}
.mini-avatar[data-hue="1"] {
  --avatar-hue:var(--avatar-hue-1);
}
.mini-avatar[data-hue="2"] {
  --avatar-hue:var(--avatar-hue-2);
}
.mini-avatar[data-hue="3"] {
  --avatar-hue:var(--avatar-hue-3);
}
.mini-avatar[data-hue="4"] {
  --avatar-hue:var(--avatar-hue-4);
}
.mini-avatar[data-hue="5"] {
  --avatar-hue:var(--avatar-hue-5);
}
.mini-avatar.sized,
.avatar-mark {
  width: var(--avatar-size, 32px);
  height: var(--avatar-size, 32px);
  flex-shrink: 0;
}
.mini-avatar.sized {
  font-size: calc(var(--avatar-size, 32px) * .42);
  letter-spacing: 0;
}
.avatar-mark {
  display: inline-grid;
  place-items: center;
}
.journey-now-dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.journey-now-dot,
.journey-now {
  position: relative;
  background: var(--journey-now);
  border-color: transparent;
  box-shadow: none;
}
.journey-now-dot::after,
.journey-now::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: var(--journey-now);
  animation: navo-live-pulse 2s cubic-bezier(.22, .61, .36, 1) infinite;
  pointer-events: none;
}
.journey-now-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: navo-live-pulse 2s cubic-bezier(.22, .61, .36, 1) infinite;
  pointer-events: none;
}
.prog-linear.journey-bar {
  overflow: visible;
}
.prog-linear.journey-bar > span {
  position: relative;
  background:
    linear-gradient(
      to right in oklch,
      var(--journey-done) 0 35%,
      var(--journey-now));
}
.prog-linear.journey-bar > span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--journey-now);
  animation: journey-head 2s cubic-bezier(.22, .61, .36, 1) infinite;
}
@keyframes journey-head {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--journey-now) 60%, transparent);
  }
  70%, 100% {
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--journey-now) 0%, transparent);
  }
}
.prog-linear.journey-bar.is-complete > span {
  background: var(--journey-done);
}
.prog-linear.journey-bar.is-complete > span::after {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .journey-now-dot::after,
  .journey-now::after,
  .journey-now-ring {
    animation: none;
    opacity: .3;
  }
  .prog-linear.journey-bar > span::after {
    animation: none;
  }
}
.stage-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
  background: var(--stage, var(--stage-pre));
}
.stage-swatch.pre {
  --stage:var(--stage-pre);
}
.stage-swatch.sea {
  --stage:var(--stage-sea);
}
.stage-swatch.ts {
  --stage:var(--stage-ts);
}
.stage-swatch.arr {
  --stage:var(--stage-arr);
}
.stage-swatch.port {
  --stage:var(--stage-port);
}
.stage-swatch.done {
  --stage:var(--stage-done);
}
.pop-anchor {
  position: relative;
  display: inline-flex;
}
.pop-anchor > .lp-navdrop-panel.pop-panel {
  left: auto;
  right: var(--sp-0);
  transform: none;
  top: calc(100% + var(--sp-4));
  width: 300px;
  max-width: calc(100vw - var(--sp-8));
  padding: var(--sp-5);
  text-align: left;
}
.pop-anchor > .lp-navdrop-panel.pop-panel.align-start {
  left: var(--sp-0);
  right: auto;
}
.pop-anchor > .lp-navdrop-panel.pop-panel.is-key {
  width: auto;
  min-width: 240px;
  max-width: 320px;
}
.pop-anchor > .lp-navdrop-panel.pop-panel.is-options {
  width: 440px;
  max-height: min(560px, 70vh);
  overflow-y: auto;
  padding: var(--sp-3);
}
.pop-title {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-2);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}
.pop-key {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: var(--sp-0);
  padding: var(--sp-0);
  list-style: none;
  font-size: var(--fs-1);
  color: var(--text-secondary);
}
.pop-key > li {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.pop-options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-0);
  padding: var(--sp-0);
  list-style: none;
}
.pop-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title trail" "meta trail";
  align-items: center;
  column-gap: var(--sp-4);
  row-gap: var(--sp-1);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  border-radius: var(--radius-16);
  background: var(--block-tile-bg);
  font-family: var(--font-sans);
  text-align: left;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--dur-default) var(--ease-out);
}
.pop-option:hover {
  background: linear-gradient(var(--layer-hover), var(--layer-hover)), var(--block-tile-bg);
}
.pop-option:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}
.pop-option[aria-pressed=true],
.pop-option.selected {
  box-shadow: inset 0 0 0 2px var(--selected-mark);
}
.pop-option-title {
  grid-area: title;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  font-size: var(--fs-2);
  font-weight: var(--fw-semibold);
}
.pop-option-title > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pop-option-meta {
  grid-area: meta;
  font-size: var(--fs-1);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.pop-option-meta b {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}
.pop-option.has-lead .pop-option-meta {
  padding-left: calc(var(--avatar-size, 22px) + var(--sp-3));
}
.pop-option-trail {
  grid-area: trail;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
}
@media (max-width: 600px) {
  .pop-option {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "meta" "trail";
  }
  .pop-option-trail {
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-top: var(--sp-1);
  }
}
.select-menu .opt:hover,
.select-menu .opt.is-active {
  background: var(--layer-hover);
  color: var(--text-primary);
}
.select-menu .opt.selected:hover,
.select-menu .opt.selected.is-active {
  background: var(--accent-wash);
  color: var(--accent);
}
.select-menu.is-floating {
  position: fixed;
  z-index: 1010;
  max-height: min(320px, 50vh);
  margin: var(--sp-3) var(--sp-0);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.mini-select.is-field {
  min-width: 140px;
}
.mini-select.is-field > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mini-select.is-field:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}
.action-menu .opt {
  justify-content: flex-start;
  width: 100%;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.action-menu .opt:focus-visible {
  outline: none;
  background: var(--layer-hover);
}
.action-menu .opt:disabled {
  color: var(--text-disabled);
  cursor: not-allowed;
}
.action-menu .opt.is-danger,
.action-menu .opt.is-danger svg {
  color: var(--badge-error-text);
}
.action-menu-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.action-menu-label svg {
  width: 14px;
  height: 14px;
  color: var(--text-tertiary);
}
button.mini-select.date-field {
  min-width: 150px;
  font-family: var(--font-sans);
  text-align: left;
}
.date-menu.select-menu {
  max-height: none;
  overflow: visible;
  padding: var(--sp-5);
}
.date-head {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-bottom: var(--sp-4);
}
.date-title {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  font-family: var(--font-sans);
  font-size: var(--fs-2);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  cursor: pointer;
}
.date-title:hover {
  background: var(--layer-hover);
}
.date-title svg {
  width: 14px;
  height: 14px;
  color: var(--text-tertiary);
}
.date-grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 var(--sp-1);
  table-layout: fixed;
}
.date-grid td {
  padding: var(--sp-0);
  text-align: center;
}
.date-wd {
  height: 28px;
  padding: var(--sp-0);
  font-size: var(--fs-1);
  font-weight: var(--fw-regular);
  color: var(--text-tertiary);
}
.date-day {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--dur-default) var(--ease-out);
}
.date-day:hover {
  background: var(--layer-hover);
}
.date-day.is-outside {
  color: var(--text-disabled);
}
.date-day.is-today {
  box-shadow: inset 0 0 0 1px var(--cal-ink);
  color: var(--cal-ink);
  font-weight: var(--fw-semibold);
}
.date-day.is-selected,
.date-day.is-selected:hover {
  background: var(--cal-fill);
  box-shadow: none;
  color: var(--n-0);
  font-weight: var(--fw-semibold);
}
.date-day:focus-visible,
.date-month:focus-visible,
.date-title:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}
.date-day.is-today:focus-visible {
  box-shadow: inset 0 0 0 1px var(--cal-ink), var(--ring-focus);
}
.date-months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}
.date-month {
  height: 40px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  color: var(--text-primary);
  cursor: pointer;
}
.date-month:hover,
.date-month.is-focus {
  background: var(--layer-hover);
}
.date-month.is-selected,
.date-month.is-selected:hover {
  background: var(--cal-fill);
  color: var(--n-0);
  font-weight: var(--fw-semibold);
}
.date-foot {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-4);
}
.controls-row button.mini-select.date-field {
  height: 32px;
  padding: var(--sp-0) var(--space-control-inset-sm);
  font-size: var(--fs-1);
}

/* src/styles/index.css */