/* tokens.css
   The Digital Iceberg design system 0.3.0. Generated by build/build.mjs from tokens/tokens.json
   (sha256 42137d303643fe8b). Do not edit: change the tokens and run npm run build. */

:root {

  /* Primitives. The build and the exports resolve roles from these. Components never read them. */
  --p-white: #ffffff;
  --p-white-rgb: 255 255 255;
  --p-navy-700: #283d56;
  --p-navy-700-rgb: 40 61 86;
  --p-navy-850: #13284a;
  --p-navy-850-rgb: 19 40 74;
  --p-navy-900: #0b1a36;
  --p-navy-900-rgb: 11 26 54;
  --p-navy-950: #061229;
  --p-navy-950-rgb: 6 18 41;
  --p-navy-1000: #000310;
  --p-navy-1000-rgb: 0 3 16;
  --p-blue-50: #eef6fd;
  --p-blue-50-rgb: 238 246 253;
  --p-blue-100: #daeafb;
  --p-blue-100-rgb: 218 234 251;
  --p-blue-200: #b1d7fc;
  --p-blue-200-rgb: 177 215 252;
  --p-blue-300: #87c3fb;
  --p-blue-300-rgb: 135 195 251;
  --p-blue-400: #369dfc;
  --p-blue-400-rgb: 54 157 252;
  --p-blue-450: #4d8ade;
  --p-blue-450-rgb: 77 138 222;
  --p-blue-500: #248cf3;
  --p-blue-500-rgb: 36 140 243;
  --p-blue-600: #0157d2;
  --p-blue-600-rgb: 1 87 210;
  --p-blue-700: #0046a8;
  --p-blue-700-rgb: 0 70 168;
  --p-blue-800: #00388f;
  --p-blue-800-rgb: 0 56 143;
  --p-blue-900: #001c49;
  --p-blue-900-rgb: 0 28 73;
  --p-blue-950: #000e27;
  --p-blue-950-rgb: 0 14 39;
  --p-orange-50: #fef0df;
  --p-orange-50-rgb: 254 240 223;
  --p-orange-400: #ff9b4f;
  --p-orange-400-rgb: 255 155 79;
  --p-orange-500: #fd802e;
  --p-orange-500-rgb: 253 128 46;
  --p-orange-600: #e76d31;
  --p-orange-600-rgb: 231 109 49;
  --p-orange-700: #c95433;
  --p-orange-700-rgb: 201 84 51;
  --p-orange-900: #7f3023;
  --p-orange-900-rgb: 127 48 35;
  --p-orange-950: #2a1206;
  --p-orange-950-rgb: 42 18 6;
  --p-red-50: #fdecec;
  --p-red-50-rgb: 253 236 236;
  --p-red-400: #ff5a65;
  --p-red-400-rgb: 255 90 101;
  --p-red-700: #c21f30;
  --p-red-700-rgb: 194 31 48;
  --p-red-950: #2a0910;
  --p-red-950-rgb: 42 9 16;
  --p-neutral-25: #f6f8fb;
  --p-neutral-25-rgb: 246 248 251;
  --p-neutral-50: #f1f4f8;
  --p-neutral-50-rgb: 241 244 248;
  --p-neutral-100: #e6ebf2;
  --p-neutral-100-rgb: 230 235 242;
  --p-neutral-150: #dce3ec;
  --p-neutral-150-rgb: 220 227 236;
  --p-neutral-200: #d5dde8;
  --p-neutral-200-rgb: 213 221 232;
  --p-neutral-300: #aab7ca;
  --p-neutral-300-rgb: 170 183 202;
  --p-neutral-400: #8a98af;
  --p-neutral-400-rgb: 138 152 175;
  --p-neutral-500: #6b7b94;
  --p-neutral-500-rgb: 107 123 148;
  --p-neutral-600: #59616f;
  --p-neutral-600-rgb: 89 97 111;
  --p-neutral-700: #404753;
  --p-neutral-700-rgb: 64 71 83;
  --p-neutral-800: #2c323d;
  --p-neutral-800-rgb: 44 50 61;
  --p-neutral-900: #1b2029;
  --p-neutral-900-rgb: 27 32 41;
  --p-neutral-950: #14171b;
  --p-neutral-950-rgb: 20 23 27;

  /* Type. Verdana (DI Sans) 400 and 700 only; Newsreader for reading. Fluid sizes run from 390px to 1440px wide. */
  --font-sans: "DI Sans", "DI Sans Fallback", "Verdana", sans-serif;
  --font-sans-system: "Verdana", "DejaVu Sans", "Geneva", sans-serif;
  --font-serif: "Newsreader", "DI Serif Fallback", "Georgia", serif;
  --font-serif-print: "DI Serif Print", "Newsreader", "Georgia", serif;
  --font-serif-system: "Georgia", "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --fw-regular: 400;
  --fw-bold: 700;
  --fw-read: 420;
  --fw-read-strong: 600;
  --font-sans-x-height: 0.545;
  --font-size-adjust-dense: 0.468;
  --title-length-m: 51;
  --title-length-l: 81;
  --title-length-xl: 101;
  --fs-display: clamp(2rem, 1.4429rem + 2.2857vw, 3.5rem);
  --fs-display-m: clamp(1.75rem, 1.3321rem + 1.7143vw, 2.875rem);
  --fs-display-l: clamp(1.5rem, 1.175rem + 1.3333vw, 2.375rem);
  --fs-display-xl: clamp(1.375rem, 1.1429rem + 0.9524vw, 2rem);
  --fs-title: clamp(1.875rem, 1.4571rem + 1.7143vw, 3rem);
  --fs-title-m: clamp(1.6875rem, 1.3857rem + 1.2381vw, 2.5rem);
  --fs-title-l: clamp(1.5rem, 1.2679rem + 0.9524vw, 2.125rem);
  --fs-title-xl: clamp(1.375rem, 1.1893rem + 0.7619vw, 1.875rem);
  --fs-h1: clamp(1.5rem, 1.2679rem + 0.9524vw, 2.125rem);
  --fs-h2: clamp(1.25rem, 1.1339rem + 0.4762vw, 1.5625rem);
  --fs-h3: clamp(1.0625rem, 1.0161rem + 0.1905vw, 1.1875rem);
  --fs-dek: clamp(1.0625rem, 0.9929rem + 0.2857vw, 1.25rem);
  --fs-body: clamp(1.125rem, 1.0554rem + 0.2857vw, 1.3125rem);
  --fs-lede: clamp(1.305rem, 1.2242rem + 0.3314vw, 1.5225rem);
  --fs-ui: 0.9375rem;
  --fs-small: 0.8125rem;
  --fs-label: 0.8125rem;
  --fs-kicker: 0.8125rem;
  --fs-code: 0.9375rem;
  --lh-display: 1.08;
  --lh-display-m: 1.1;
  --lh-display-l: 1.12;
  --lh-display-xl: 1.14;
  --lh-title: 1.12;
  --lh-title-m: 1.14;
  --lh-title-l: 1.16;
  --lh-title-xl: 1.18;
  --lh-h1: 1.18;
  --lh-h2: 1.25;
  --lh-h3: 1.3;
  --lh-dek: 1.45;
  --lh-body: 1.68;
  --lh-lede: 1.58;
  --lh-ui: 1.55;
  --lh-small: 1.5;
  --lh-label: 1.3;
  --lh-kicker: 1.3;
  --lh-code: 1.55;
  --tr-display: -0.028em;
  --tr-display-m: -0.026em;
  --tr-display-l: -0.024em;
  --tr-display-xl: -0.02em;
  --tr-title: -0.022em;
  --tr-title-m: -0.02em;
  --tr-title-l: -0.018em;
  --tr-title-xl: -0.016em;
  --tr-h1: -0.016em;
  --tr-h2: -0.012em;
  --tr-h3: -0.008em;
  --tr-dek: 0;
  --tr-body: 0;
  --tr-lede: 0;
  --tr-ui: 0;
  --tr-small: 0;
  --tr-label: 0.12em;
  --tr-kicker: 0.22em;
  --tr-code: 0;

  /* Space (Deep Water scale). */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --space-section: clamp(56px, 39.66px + 4.1905vw, 100px);
  --space-head-top: clamp(40px, 31.09px + 2.2857vw, 64px);
  --space-head-bottom: clamp(36px, 28.57px + 1.9048vw, 56px);

  /* Layout, measures and targets. */
  --container: 1240px;
  --gutter: clamp(20px, 9.6px + 2.6667vw, 48px);
  --col-gap: clamp(16px, 10.06px + 1.5238vw, 32px);
  --measure: min(40rem, calc(var(--fs-body) * 30.5));
  --measure-ui: 36rem;
  --rail: 17rem;
  --margin-col: 15rem;
  --tap: 44px;
  --target-min: 24px;
  --straddle-above: 0.3333;
  --lockup-ratio: 0.2157;
  --lockup-w-1: 236px;
  --lockup-w-2: 216px;
  --lockup-w-3: 188px;
  --lockup-w-4: 164px;

  /* Sizes. Icons: 16 beside 13px text, 20 by default, 24 and 32 for controls and empty states. */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;

  /* Radius. Square and editorial; round is for nodes, pins and avatars only. */
  --r-0: 0;
  --r-1: 2px;
  --r-control: 4px;
  --r-panel: 4px;
  --r-station: 10px;
  --r-round: 999px;

  /* Line widths. */
  --line-hair: 1px;
  --line-path: 2px;
  --line-heavy: 3px;
  --line-lit-w: 1px;
  --waterline-w: 2px;
  --focus-w: 2px;
  --focus-offset: 2px;

  /* Shadows: the lead plate, books, and the print-safe ring. Nothing else casts a shadow. */
  --sh-lead: 0 40px 64px -36px rgb(0 3 16 / 0.9);
  --sh-book: 0 22px 30px -18px rgb(0 3 16 / 0.55), 0 2px 4px 0 rgb(0 3 16 / 0.18);
  --sh-print: 0 0 0 1px var(--p-neutral-300);

  /* Motion. Every duration except the countdown is 0 under prefers-reduced-motion. */
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 320ms;
  --dur-path: 600ms;
  --dur-countdown: 5000ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-linear: linear;

  /* Breakpoints. Reference values for JS and Tailwind: media queries cannot read custom properties. */
  --bp-xs: 380px;
  --bp-sm: 600px;
  --bp-reading: 720px;
  --bp-md: 768px;
  --bp-nav: 960px;
  --bp-rail: 1100px;
  --bp-wide: 1280px;
  --bp-ref-phone: 390px;
  --bp-ref-desktop: 1440px;

  /* Stacking order. */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-scrim: 400;
  --z-dialog: 500;
  --z-toast: 600;
  --z-skip: 1000;

  /* Lines. The waterline (2px, once per page) and the lit line position. */
  --lit-at: 50%;
  --waterline: linear-gradient(90deg, var(--p-blue-600) 0%, var(--p-blue-400) 24%, var(--p-blue-100) 42%, var(--p-blue-100) 58%, var(--p-blue-400) 76%, var(--p-blue-600) 100%);

  /* The cover frame. Sizes are unitless percentages of the short side: calc(var(--frame-title) * 1cqmin). */
  --frame-ground: var(--p-navy-1000);
  --frame-kicker-ink: var(--p-orange-500);
  --frame-title-ink: var(--p-white);
  --frame-subtitle-ink: var(--p-blue-300);
  --frame-url-ink: var(--p-blue-300);
  --frame-label-ink: var(--p-white);
  --frame-kicker: 2.2;
  --frame-kicker-top: 6.9;
  --frame-title: 5.6;
  --frame-title-one-line: 7.2;
  --frame-title-thumb: 15;
  --frame-title-thumb-2: 12;
  --frame-subtitle: 2.4;
  --frame-url: 1.55;
  --frame-url-bottom: 3.2;
  --frame-label: 1.4;
  --frame-gap-kicker-title: 2.4;
  --frame-gap-title-subtitle: 1.8;
  --frame-title-type-led: 9;
  --frame-kicker-tracking: 0.22;
  --frame-title-line-height: 1.04;
  --frame-title-tracking: -0.02;
  --frame-title-max-width: 77;
  --frame-title-max-lines: 3;
  --frame-title-thumb-max-lines: 3;
  --frame-title-chars-per-line: 25;
  --frame-title-advance: 0.567;
  --frame-subtitle-tracking: -0.01;
  --frame-subtitle-chars: 65;
  --frame-subtitle-max-lines: 2;
  --frame-url-tracking: 0.24;
  --frame-label-max: 3;
  --frame-text-margin: 11.5;
  --frame-art-safe: 8;
  --frame-art-margin-x: 3;
  --frame-art-zone-top: 25;
  --frame-art-core: 33.3;
  --frame-clear-band: 3;
  --frame-art-horizon: 60;
  --frame-video-action-safe: 3.5;
  --frame-video-graphics-safe: 5;
  --frame-thumb-badge-w: 18;
  --frame-thumb-badge-h: 14;
  --frame-og-w: 1200px;
  --frame-og-h: 630px;
  --frame-og-text-w: 1100px;
  --frame-og-text-h: 550px;
  --frame-landscape-w: 1200px;
  --frame-landscape-h: 675px;
  --frame-stage-w: 1920px;
  --frame-stage-h: 1080px;
  --frame-video-w: 3840px;
  --frame-video-h: 2160px;
  --frame-portrait-w: 1080px;
  --frame-portrait-h: 1350px;
  --frame-square-w: 1080px;
  --frame-square-h: 1080px;
  --frame-thumb-check-w: 168px;
  --frame-feed-check-w: 360px;
  --frame-youtube-w: 1280px;
  --frame-youtube-h: 720px;
  --frame-social-w: 1200px;
  --frame-social-h: 627px;

  /* Print (A4 PDF from Chrome). Unitless: sizes in pt, line heights as multiples, margins in mm. font-size: calc(var(--print-body) * 1pt). */
  --print-masthead: 46;
  --print-masthead-lh: 1;
  --print-opener-title: 30;
  --print-opener-title-lh: 1.1;
  --print-cover-title: 36;
  --print-cover-title-lh: 1.08;
  --print-masthead-back: 24;
  --print-masthead-back-lh: 1;
  --print-title: 22;
  --print-title-lh: 1.15;
  --print-h2: 17;
  --print-h2-lh: 1.2;
  --print-lede: 13;
  --print-lede-lh: 1.55;
  --print-dek: 12.5;
  --print-dek-lh: 1.45;
  --print-byline: 12;
  --print-byline-lh: 1.3;
  --print-h3: 11.5;
  --print-h3-lh: 1.3;
  --print-body: 11;
  --print-body-lh: 1.6;
  --print-ui: 11;
  --print-ui-lh: 1.35;
  --print-caption: 10;
  --print-caption-lh: 1.45;
  --print-folio: 10;
  --print-folio-lh: 1;
  --print-margin-top: 24;
  --print-margin-right: 52;
  --print-margin-bottom: 26;
  --print-margin-left: 34;

  /* GLOW: ART AND CODED DIAGRAMS ONLY. Never on text, buttons, cards, borders, inputs, icons, headers or bands. */
  --glow-halo-deep: var(--p-blue-900);
  --glow-halo-mid: var(--p-blue-800);
  --glow-diagram-line: drop-shadow(0px 0px 1.5px var(--p-blue-400)) drop-shadow(0px 0px 6px rgb(1 87 210 / 0.75)) drop-shadow(0px 0px 16px rgb(0 56 143 / 0.55));
  --glow-diagram-marker: drop-shadow(0px 0px 1.5px var(--p-orange-500)) drop-shadow(0px 0px 6px rgb(201 84 51 / 0.7)) drop-shadow(0px 0px 14px rgb(127 48 35 / 0.5));
  --glow-diagram-hub: radial-gradient(circle, var(--p-blue-100) 0 12%, var(--p-blue-400) 22%, rgb(1 87 210 / 0.45) 42%, rgb(0 56 143 / 0) 70%);
}

/* Roles. Every surface declares the full set, so an ink island inside paper (or the reverse) is never half themed.
   Components read these names only. Each colour role also has an -rgb channel copy for Tailwind opacity modifiers. */
:root,
[data-surface="ink"] {
  color-scheme: dark;
  /* surface */
  --surface: var(--p-navy-1000);
  --surface-rgb: var(--p-navy-1000-rgb);
  --surface-raised: var(--p-navy-950);
  --surface-raised-rgb: var(--p-navy-950-rgb);
  --surface-raised-2: var(--p-navy-900);
  --surface-raised-2-rgb: var(--p-navy-900-rgb);
  --surface-raised-3: var(--p-navy-850);
  --surface-raised-3-rgb: var(--p-navy-850-rgb);
  --surface-sunken: var(--p-navy-1000);
  --surface-sunken-rgb: var(--p-navy-1000-rgb);
  /* text */
  --text-1: var(--p-white);
  --text-1-rgb: var(--p-white-rgb);
  --text-2: var(--p-neutral-100);
  --text-2-rgb: var(--p-neutral-100-rgb);
  --text-3: var(--p-neutral-300);
  --text-3-rgb: var(--p-neutral-300-rgb);
  --text-emphasis: var(--p-white);
  --text-emphasis-rgb: var(--p-white-rgb);
  --text-subtitle: var(--p-blue-300);
  --text-subtitle-rgb: var(--p-blue-300-rgb);
  /* rule */
  --rule: var(--p-navy-850);
  --rule-rgb: var(--p-navy-850-rgb);
  --rule-strong: var(--p-navy-700);
  --rule-strong-rgb: var(--p-navy-700-rgb);
  /* control */
  --control-line: var(--p-neutral-500);
  --control-line-rgb: var(--p-neutral-500-rgb);
  /* structure */
  --structure: var(--p-blue-500);
  --structure-rgb: var(--p-blue-500-rgb);
  --structure-quiet: var(--p-navy-700);
  --structure-quiet-rgb: var(--p-navy-700-rgb);
  /* lit */
  --lit-unlit: var(--p-navy-900);
  --lit-unlit-rgb: var(--p-navy-900-rgb);
  --lit-stroke: var(--p-blue-600);
  --lit-stroke-rgb: var(--p-blue-600-rgb);
  --lit-edge: var(--p-blue-400);
  --lit-edge-rgb: var(--p-blue-400-rgb);
  --lit-core: var(--p-blue-100);
  --lit-core-rgb: var(--p-blue-100-rgb);
  /* link */
  --link: var(--p-blue-300);
  --link-rgb: var(--p-blue-300-rgb);
  --link-hover: var(--p-white);
  --link-hover-rgb: var(--p-white-rgb);
  --link-underline: var(--p-blue-600);
  --link-underline-rgb: var(--p-blue-600-rgb);
  /* focus */
  --focus: var(--p-blue-300);
  --focus-rgb: var(--p-blue-300-rgb);
  /* kicker */
  --kicker: var(--p-blue-300);
  --kicker-rgb: var(--p-blue-300-rgb);
  --kicker-frame: var(--p-orange-500);
  --kicker-frame-rgb: var(--p-orange-500-rgb);
  /* action */
  --action-key-bg: var(--p-orange-500);
  --action-key-bg-rgb: var(--p-orange-500-rgb);
  --action-key-bg-hover: var(--p-orange-400);
  --action-key-bg-hover-rgb: var(--p-orange-400-rgb);
  --action-key-bg-pressed: var(--p-orange-600);
  --action-key-bg-pressed-rgb: var(--p-orange-600-rgb);
  --action-key-fg: var(--p-navy-1000);
  --action-key-fg-rgb: var(--p-navy-1000-rgb);
  --action-key-edge: var(--p-orange-500);
  --action-key-edge-rgb: var(--p-orange-500-rgb);
  --action-fill-bg: var(--p-blue-600);
  --action-fill-bg-rgb: var(--p-blue-600-rgb);
  --action-fill-bg-hover: var(--p-blue-700);
  --action-fill-bg-hover-rgb: var(--p-blue-700-rgb);
  --action-fill-fg: var(--p-white);
  --action-fill-fg-rgb: var(--p-white-rgb);
  --action-ghost-line: var(--p-neutral-300);
  --action-ghost-line-rgb: var(--p-neutral-300-rgb);
  --action-ghost-fg: var(--p-white);
  --action-ghost-fg-rgb: var(--p-white-rgb);
  --action-ghost-bg-hover: var(--p-navy-850);
  --action-ghost-bg-hover-rgb: var(--p-navy-850-rgb);
  --action-disabled-bg: var(--p-navy-900);
  --action-disabled-bg-rgb: var(--p-navy-900-rgb);
  --action-disabled-fg: var(--p-neutral-500);
  --action-disabled-fg-rgb: var(--p-neutral-500-rgb);
  /* marker */
  --marker: var(--p-orange-500);
  --marker-rgb: var(--p-orange-500-rgb);
  --marker-edge: var(--p-orange-500);
  --marker-edge-rgb: var(--p-orange-500-rgb);
  --marker-fg: var(--p-navy-1000);
  --marker-fg-rgb: var(--p-navy-1000-rgb);
  --marker-tint: var(--p-orange-950);
  --marker-tint-rgb: var(--p-orange-950-rgb);
  /* selected */
  --selected-bg: var(--p-blue-900);
  --selected-bg-rgb: var(--p-blue-900-rgb);
  --selected-fg: var(--p-white);
  --selected-fg-rgb: var(--p-white-rgb);
  --selected-line: var(--p-blue-500);
  --selected-line-rgb: var(--p-blue-500-rgb);
  /* selection */
  --selection-bg: var(--p-blue-300);
  --selection-bg-rgb: var(--p-blue-300-rgb);
  --selection-fg: var(--p-navy-1000);
  --selection-fg-rgb: var(--p-navy-1000-rgb);
  /* warning */
  --warning: var(--p-red-400);
  --warning-rgb: var(--p-red-400-rgb);
  --warning-bg: var(--p-red-950);
  --warning-bg-rgb: var(--p-red-950-rgb);
  /* status */
  --status-info: var(--p-blue-300);
  --status-info-rgb: var(--p-blue-300-rgb);
  --status-success: var(--p-blue-300);
  --status-success-rgb: var(--p-blue-300-rgb);
  --status-caution: var(--p-white);
  --status-caution-rgb: var(--p-white-rgb);
  --status-warning: var(--p-red-400);
  --status-warning-rgb: var(--p-red-400-rgb);
  /* data */
  --data-1: var(--p-blue-500);
  --data-1-rgb: var(--p-blue-500-rgb);
  --data-2: var(--p-blue-300);
  --data-2-rgb: var(--p-blue-300-rgb);
  --data-context: var(--p-neutral-500);
  --data-context-rgb: var(--p-neutral-500-rgb);
  --data-highlight: var(--p-orange-500);
  --data-highlight-rgb: var(--p-orange-500-rgb);
  --data-highlight-edge: var(--p-orange-500);
  --data-highlight-edge-rgb: var(--p-orange-500-rgb);
  --data-threshold: var(--p-red-400);
  --data-threshold-rgb: var(--p-red-400-rgb);
  --data-grid: var(--p-navy-850);
  --data-grid-rgb: var(--p-navy-850-rgb);
  --data-axis: var(--p-neutral-500);
  --data-axis-rgb: var(--p-neutral-500-rgb);
  --data-seq-1: var(--p-blue-700);
  --data-seq-1-rgb: var(--p-blue-700-rgb);
  --data-seq-2: var(--p-blue-600);
  --data-seq-2-rgb: var(--p-blue-600-rgb);
  --data-seq-3: var(--p-blue-500);
  --data-seq-3-rgb: var(--p-blue-500-rgb);
  --data-seq-4: var(--p-blue-300);
  --data-seq-4-rgb: var(--p-blue-300-rgb);
  --data-seq-5: var(--p-blue-100);
  --data-seq-5-rgb: var(--p-blue-100-rgb);
  /* the lit line with its core at 50%: use .lit-line from css/base.css to move the core */
  --line-lit: linear-gradient(90deg, var(--lit-unlit) 0%, var(--lit-stroke) 20%, var(--lit-edge) 41%, var(--lit-core) 50%, var(--lit-edge) 59%, var(--lit-stroke) 80%, var(--lit-unlit) 100%);
}
[data-surface="paper"] {
  color-scheme: light;
  /* surface */
  --surface: var(--p-white);
  --surface-rgb: var(--p-white-rgb);
  --surface-raised: var(--p-neutral-50);
  --surface-raised-rgb: var(--p-neutral-50-rgb);
  --surface-raised-2: var(--p-neutral-100);
  --surface-raised-2-rgb: var(--p-neutral-100-rgb);
  --surface-raised-3: var(--p-neutral-150);
  --surface-raised-3-rgb: var(--p-neutral-150-rgb);
  --surface-sunken: var(--p-neutral-25);
  --surface-sunken-rgb: var(--p-neutral-25-rgb);
  /* text */
  --text-1: var(--p-navy-900);
  --text-1-rgb: var(--p-navy-900-rgb);
  --text-2: var(--p-neutral-900);
  --text-2-rgb: var(--p-neutral-900-rgb);
  --text-3: var(--p-neutral-600);
  --text-3-rgb: var(--p-neutral-600-rgb);
  --text-emphasis: var(--p-neutral-950);
  --text-emphasis-rgb: var(--p-neutral-950-rgb);
  --text-subtitle: var(--p-neutral-600);
  --text-subtitle-rgb: var(--p-neutral-600-rgb);
  /* rule */
  --rule: var(--p-neutral-200);
  --rule-rgb: var(--p-neutral-200-rgb);
  --rule-strong: var(--p-neutral-300);
  --rule-strong-rgb: var(--p-neutral-300-rgb);
  /* control */
  --control-line: var(--p-neutral-500);
  --control-line-rgb: var(--p-neutral-500-rgb);
  /* structure */
  --structure: var(--p-blue-600);
  --structure-rgb: var(--p-blue-600-rgb);
  --structure-quiet: var(--p-neutral-300);
  --structure-quiet-rgb: var(--p-neutral-300-rgb);
  /* lit */
  --lit-unlit: var(--p-neutral-200);
  --lit-unlit-rgb: var(--p-neutral-200-rgb);
  --lit-stroke: var(--p-blue-200);
  --lit-stroke-rgb: var(--p-blue-200-rgb);
  --lit-edge: var(--p-blue-400);
  --lit-edge-rgb: var(--p-blue-400-rgb);
  --lit-core: var(--p-blue-600);
  --lit-core-rgb: var(--p-blue-600-rgb);
  /* link */
  --link: var(--p-blue-600);
  --link-rgb: var(--p-blue-600-rgb);
  --link-hover: var(--p-blue-700);
  --link-hover-rgb: var(--p-blue-700-rgb);
  --link-underline: var(--p-blue-400);
  --link-underline-rgb: var(--p-blue-400-rgb);
  /* focus */
  --focus: var(--p-blue-600);
  --focus-rgb: var(--p-blue-600-rgb);
  /* kicker */
  --kicker: var(--p-blue-600);
  --kicker-rgb: var(--p-blue-600-rgb);
  --kicker-frame: var(--p-blue-600);
  --kicker-frame-rgb: var(--p-blue-600-rgb);
  /* action */
  --action-key-bg: var(--p-orange-500);
  --action-key-bg-rgb: var(--p-orange-500-rgb);
  --action-key-bg-hover: var(--p-orange-400);
  --action-key-bg-hover-rgb: var(--p-orange-400-rgb);
  --action-key-bg-pressed: var(--p-orange-600);
  --action-key-bg-pressed-rgb: var(--p-orange-600-rgb);
  --action-key-fg: var(--p-navy-1000);
  --action-key-fg-rgb: var(--p-navy-1000-rgb);
  --action-key-edge: var(--p-navy-900);
  --action-key-edge-rgb: var(--p-navy-900-rgb);
  --action-fill-bg: var(--p-blue-600);
  --action-fill-bg-rgb: var(--p-blue-600-rgb);
  --action-fill-bg-hover: var(--p-blue-700);
  --action-fill-bg-hover-rgb: var(--p-blue-700-rgb);
  --action-fill-fg: var(--p-white);
  --action-fill-fg-rgb: var(--p-white-rgb);
  --action-ghost-line: var(--p-neutral-500);
  --action-ghost-line-rgb: var(--p-neutral-500-rgb);
  --action-ghost-fg: var(--p-navy-900);
  --action-ghost-fg-rgb: var(--p-navy-900-rgb);
  --action-ghost-bg-hover: var(--p-neutral-100);
  --action-ghost-bg-hover-rgb: var(--p-neutral-100-rgb);
  --action-disabled-bg: var(--p-neutral-100);
  --action-disabled-bg-rgb: var(--p-neutral-100-rgb);
  --action-disabled-fg: var(--p-neutral-400);
  --action-disabled-fg-rgb: var(--p-neutral-400-rgb);
  /* marker */
  --marker: var(--p-orange-500);
  --marker-rgb: var(--p-orange-500-rgb);
  --marker-edge: var(--p-navy-900);
  --marker-edge-rgb: var(--p-navy-900-rgb);
  --marker-fg: var(--p-navy-1000);
  --marker-fg-rgb: var(--p-navy-1000-rgb);
  --marker-tint: var(--p-orange-50);
  --marker-tint-rgb: var(--p-orange-50-rgb);
  /* selected */
  --selected-bg: var(--p-blue-50);
  --selected-bg-rgb: var(--p-blue-50-rgb);
  --selected-fg: var(--p-navy-900);
  --selected-fg-rgb: var(--p-navy-900-rgb);
  --selected-line: var(--p-blue-600);
  --selected-line-rgb: var(--p-blue-600-rgb);
  /* selection */
  --selection-bg: var(--p-blue-100);
  --selection-bg-rgb: var(--p-blue-100-rgb);
  --selection-fg: var(--p-neutral-950);
  --selection-fg-rgb: var(--p-neutral-950-rgb);
  /* warning */
  --warning: var(--p-red-700);
  --warning-rgb: var(--p-red-700-rgb);
  --warning-bg: var(--p-red-50);
  --warning-bg-rgb: var(--p-red-50-rgb);
  /* status */
  --status-info: var(--p-blue-600);
  --status-info-rgb: var(--p-blue-600-rgb);
  --status-success: var(--p-blue-600);
  --status-success-rgb: var(--p-blue-600-rgb);
  --status-caution: var(--p-navy-900);
  --status-caution-rgb: var(--p-navy-900-rgb);
  --status-warning: var(--p-red-700);
  --status-warning-rgb: var(--p-red-700-rgb);
  /* data */
  --data-1: var(--p-blue-700);
  --data-1-rgb: var(--p-blue-700-rgb);
  --data-2: var(--p-blue-450);
  --data-2-rgb: var(--p-blue-450-rgb);
  --data-context: var(--p-neutral-600);
  --data-context-rgb: var(--p-neutral-600-rgb);
  --data-highlight: var(--p-orange-500);
  --data-highlight-rgb: var(--p-orange-500-rgb);
  --data-highlight-edge: var(--p-navy-900);
  --data-highlight-edge-rgb: var(--p-navy-900-rgb);
  --data-threshold: var(--p-red-700);
  --data-threshold-rgb: var(--p-red-700-rgb);
  --data-grid: var(--p-neutral-200);
  --data-grid-rgb: var(--p-neutral-200-rgb);
  --data-axis: var(--p-neutral-500);
  --data-axis-rgb: var(--p-neutral-500-rgb);
  --data-seq-1: var(--p-blue-400);
  --data-seq-1-rgb: var(--p-blue-400-rgb);
  --data-seq-2: var(--p-blue-600);
  --data-seq-2-rgb: var(--p-blue-600-rgb);
  --data-seq-3: var(--p-blue-800);
  --data-seq-3-rgb: var(--p-blue-800-rgb);
  --data-seq-4: var(--p-blue-900);
  --data-seq-4-rgb: var(--p-blue-900-rgb);
  --data-seq-5: var(--p-blue-950);
  --data-seq-5-rgb: var(--p-blue-950-rgb);
  /* the lit line with its core at 50%: use .lit-line from css/base.css to move the core */
  --line-lit: linear-gradient(90deg, var(--lit-unlit) 0%, var(--lit-stroke) 20%, var(--lit-edge) 41%, var(--lit-core) 50%, var(--lit-edge) 59%, var(--lit-stroke) 80%, var(--lit-unlit) 100%);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
    --dur-path: 0ms;
  }
}

/* Forced colours drop shadows and glows; nothing may depend on them. */
@media (forced-colors: active) {
  :root {
    --glow-diagram-line: none;
    --glow-diagram-marker: none;
    --glow-diagram-hub: none;
    --sh-lead: none;
    --sh-book: none;
    --waterline: linear-gradient(CanvasText, CanvasText);
  }
  :root,
  [data-surface] {
    --line-lit: linear-gradient(CanvasText, CanvasText);
  }
}