/* BLACKROLL foundations. The only place for tokens, fonts and base type.
   Palette, type scale, radii, control sizes, focus and motion were read from
   blackroll.com/eu/en on 2 October 2026. Component rules live in components.css. */
@font-face{font-family:Söhne;src:url('/assets/soehne-buch.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Söhne;src:url('/assets/soehne-kraftig.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:Söhne;src:url('/assets/soehne-halbfett.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:'Söhne Mono';src:url('/assets/soehne-mono-buch.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}

:root{
  /* Palette · blackroll.com */
  --color-stone-50:#fefff0;
  --color-stone-100:#f1f2e4;
  --color-stone-200:#e7e8d9;
  --color-stone-300:#dbdccb;
  --color-stone-400:#cccebb;
  --color-stone-500:#b4b5a1;
  --color-stone-600:#929381;
  --color-stone-700:#727462;
  --color-stone-800:#58594b;
  --color-stone-900:#383932;
  --color-stone-950:#20201d;
  --color-black-00:#000;
  --color-black-05:rgba(0,0,0,.04);
  --color-black-10:rgba(0,0,0,.08);
  --color-black-20:rgba(0,0,0,.2);
  --color-black-30:rgba(0,0,0,.3);
  --color-black-40:rgba(0,0,0,.4);
  --color-black-50:rgba(0,0,0,.55);
  --color-black-60:rgba(0,0,0,.6);
  --color-black-70:rgba(0,0,0,.7);
  --color-black-80:rgba(0,0,0,.8);
  --color-white-00:#fff;
  --color-white-10:rgba(255,255,255,.1);
  --color-white-20:rgba(255,255,255,.2);
  --color-white-25:rgba(255,255,255,.25);
  --color-white-35:rgba(255,255,255,.35);
  --color-white-60:rgba(255,255,255,.6);
  --color-white-80:rgba(255,255,255,.8);
  --color-mint-50:#ebfff8;
  --color-mint-100:#c5fcea;
  --color-mint-200:#94f9d8;
  --color-mint-300:#6deebe;
  --color-mint-400:#1be299;
  --color-mint-500:#16ca88;
  --color-mint-700:#109363;
  --color-mint-900:#063725;
  --color-sepia-100:#f4efe6;
  --color-sepia-200:#e8e2d7;
  --color-sepia-300:#ddd7ca;
  --color-sepia-500:#b6ac9a;
  --color-sepia-700:#7b705c;
  --color-orange-100:#ffe8cc;
  --color-orange-300:#ffba66;
  --color-orange-500:#ff9e0d;
  --color-yellow-400:#ffc61a;
  --color-orange-700:#cc6d00;
  --color-red-100:#ffe0e4;
  --color-red-500:#ff3358;
  --color-red-300:#ff8599;
  --color-red-400:#ff6b84;
  --color-red-600:#da0b2e;
  --color-red-700:#b30926;
  --color-green-dark:#354f24;
  /* Night · the BLACKROLL AI Lab's dark green-black, where Roger AI glows. 900, 850 and 700 are the AI Lab's own;
     the others step its green-black up in even lightness (L* 12, 15.5, 19, 22.5, 26, 34, 47) for the dark
     appearance's surfaces. 700 is the AI Lab's greener card tone, not a step on that ladder. */
  --color-night-900:#111412;
  --color-night-850:#161a17;
  --color-night-800:#1c211e;
  --color-night-700:#1c2420;
  --color-night-650:#232825;
  --color-night-600:#2a2f2c;
  --color-night-500:#313733;
  --color-night-450:#393f3b;
  --color-night-400:#4a524c;
  --color-night-300:#6a726c;
  /* Ivory alpha · the dark appearance's ink scale, stone-50 over the night as the black scale is over stone */
  --color-ivory-05:color-mix(in srgb,var(--color-stone-50) 5%,transparent);
  --color-ivory-08:color-mix(in srgb,var(--color-stone-50) 8%,transparent);
  --color-ivory-09:color-mix(in srgb,var(--color-stone-50) 9%,transparent);
  --color-ivory-10:color-mix(in srgb,var(--color-stone-50) 10%,transparent);
  --color-ivory-14:color-mix(in srgb,var(--color-stone-50) 14%,transparent);
  --color-ivory-18:color-mix(in srgb,var(--color-stone-50) 18%,transparent);
  --color-ivory-30:color-mix(in srgb,var(--color-stone-50) 30%,transparent);
  --color-ivory-36:color-mix(in srgb,var(--color-stone-50) 36%,transparent);
  --color-ivory-50:color-mix(in srgb,var(--color-stone-50) 50%,transparent);
  --color-ivory-60:color-mix(in srgb,var(--color-stone-50) 60%,transparent);
  --color-ivory-66:color-mix(in srgb,var(--color-stone-50) 66%,transparent);
  --color-ivory-80:color-mix(in srgb,var(--color-stone-50) 80%,transparent);

  /* Roles · bright surfaces */
  --page:var(--color-stone-50);
  --plate:var(--color-stone-100);
  --plate-hover:var(--color-stone-200);
  --plate-active:var(--color-stone-300);
  /* Panel: sidebars, docks, Roger and the AI planner's chat, one step darker than the page so the sections read
     apart. Inside a panel the plate steps move one shade down (components.css), so fields and selection still show. */
  --panel:var(--color-stone-100);
  --panel-plate:var(--color-stone-200);
  --panel-plate-hover:var(--color-stone-300);
  --panel-plate-active:var(--color-stone-400);
  /* Float: menus, popovers and dialogs (components.css rebinds --page to it inside them). The page itself here;
     the dark appearance lifts it a step so a menu reads above the page it covers. */
  --float:var(--page);
  --element:var(--color-black-10);
  --element-hover:var(--color-stone-300);
  --ink:var(--color-black-00);
  --subtle:var(--color-black-80);
  --muted:var(--color-black-60);
  /* Prose: the words people wrote (a strategy answer, a description, a brief's lines), a step back from ink so the
     titles and values beside it lead and a long answer never dominates the page. Ink stays for titles, names,
     dates and figures; muted for labels and meta. */
  --prose:var(--color-black-70);
  /* Roger's text: a value Roger wrote and nobody has edited since takes the colour its slot gives it turned toward
     Roger's mint, keeping its lightness and opacity, so a lead stays a lead and nothing gets louder (ai-text.js).
     Black has no hue to turn, so in light it first lifts to a deep green. Once edited it returns to its colour. */
  --roger-text:oklch(from currentColor max(l, .36) calc(c + .07) 160);
  --disabled:var(--color-black-30);
  --line:var(--color-black-20);
  --line-soft:var(--color-black-10);
  --line-strong:var(--color-black-00);
  --line-panel:var(--color-black-20);
  --accent:var(--color-mint-400);
  --accent-ink:var(--color-black-00);
  --accent-hover:var(--color-black-00);
  --accent-hover-ink:var(--color-stone-50);
  /* The ink button (.secondary) under the pointer: a step off the ink. */
  --ink-hover:var(--color-stone-950);
  --tint-positive:var(--color-mint-100);
  --tint-attention:var(--color-orange-100);
  --tint-alert:var(--color-red-100);
  --ink-positive:var(--color-mint-900);
  --ink-attention:var(--color-orange-700);
  --ink-alert:var(--color-red-600);
  /* Blocked: the roadworks-sign yellow of the warning triangle (statusDot alert), always with an ink outline. */
  --ink-blocked:var(--color-yellow-400);
  /* An empty person's portrait (kit.person without a name), and its hover. */
  --person-empty:var(--color-stone-400);
  --person-empty-hover:var(--color-stone-500);
  --overlay:var(--color-black-50);
  --selection:var(--color-mint-200);

  /* Roles · dark surfaces (navigation) */
  --sidebar:var(--color-stone-950);
  --nav-text:var(--color-stone-50);
  --nav-muted:var(--color-white-60);
  --nav-hover:var(--color-white-10);
  --nav-active:var(--color-white-20);
  --nav-selected:var(--color-stone-50);
  --nav-selected-ink:var(--color-black-00);
  --nav-line:var(--color-white-20);

  /* Roles · dark stage (landing page scenes, index.html) */
  --stage:var(--color-stone-950);
  --stage-text:var(--color-stone-50);
  --stage-muted:var(--color-white-60);
  --stage-dim:var(--color-white-35);
  --stage-line:var(--color-white-20);
  --stage-line-soft:var(--color-white-10);
  --stage-accent:var(--color-mint-400);

  /* Media · the frame blackroll.com puts around product shots and illustrations (bg-product-card-gradient)
     and the mono label pinned to it */
  --media:var(--color-stone-100);
  --media-gradient:linear-gradient(7deg,var(--color-stone-50) 10.93%,var(--color-sepia-200) 65.63%);
  --media-label:var(--color-black-50);
  --media-label-ink:var(--color-white-00);
  /* Media · night: the AI Lab's dark card gradient, for Roger AI (the landing page footer) */
  --media-night:var(--color-night-850);
  --media-night-gradient:linear-gradient(7deg,var(--color-night-850) 10.93%,var(--color-night-700) 65.63%);
  --night-text:var(--color-sepia-200);
  --night-muted:color-mix(in srgb,var(--color-sepia-200) 70%,transparent);
  --night-line:color-mix(in srgb,var(--color-sepia-200) 24%,transparent);
  --night-glow:color-mix(in srgb,var(--color-mint-700) 25%,transparent);
  /* Night · the analyser (analysis.css): Roger's plan analysis as an instrument on the AI Lab's night. The plan's
     marks in sepia (dim, named, scanned ivory), Roger's scan and the records in hand in mint, attention in an orange
     bright enough for the night; hairlines, dim text and quiet fills for the instrument itself. */
  --night-line-soft:color-mix(in srgb,var(--color-sepia-200) 10%,transparent);
  --night-dim:color-mix(in srgb,var(--color-sepia-200) 50%,transparent);
  --night-mark:color-mix(in srgb,var(--color-sepia-200) 34%,transparent);
  --night-bright:var(--color-stone-50);
  --night-accent:var(--color-mint-400);
  --night-accent-soft:color-mix(in srgb,var(--color-mint-400) 12%,transparent);
  --night-scan:color-mix(in srgb,var(--color-mint-400) 22%,transparent);
  --night-attention:var(--color-orange-500);
  --night-element:color-mix(in srgb,var(--color-sepia-200) 10%,transparent);
  --night-element-deep:color-mix(in srgb,var(--color-sepia-200) 16%,transparent);

  /* Channels · one hue per channel on the Brand Calendar's channel view, each light enough for ink text and
     far enough from its neighbours to tell apart at 12 px. */
  --color-sky-200:#a9d4fb;
  --color-lilac-200:#cdbdfb;
  --color-pink-200:#ffb5c6;
  --color-teal-200:#93dbd1;
  --color-coral-300:#ff9d86;
  --color-yellow-200:#ffe07a;
  --channel-organic-social:var(--color-mint-300);
  --channel-paid-social:var(--color-orange-300);
  --channel-email:var(--color-sky-200);
  --channel-web-shop:var(--color-lilac-200);
  --channel-events:var(--color-yellow-200);
  --channel-pr-partnerships:var(--color-pink-200);
  --channel-out-of-home:var(--color-sepia-500);
  --channel-b2b-retail:var(--color-teal-200);
  --channel-activations:var(--color-coral-300);
  --channel-other:var(--color-stone-400);

  /* Phase and calendar tones · four brand tints with ink text */
  --tone-0:var(--color-mint-100);
  --tone-0-line:var(--color-mint-500);
  --tone-1:var(--color-sepia-200);
  --tone-1-line:var(--color-sepia-500);
  --tone-2:var(--color-orange-100);
  --tone-2-line:var(--color-orange-300);
  --tone-3:var(--color-stone-300);
  --tone-3-line:var(--color-stone-600);
  /* A bar's or point's edge: its tone's line mixed toward the ink, at least 3:1 against the page in either
     appearance (WCAG 1.4.11), so a plan bar never relies on its fill alone. */
  --tone-0-edge:color-mix(in srgb,var(--tone-0-line) 70%,var(--ink));
  --tone-1-edge:color-mix(in srgb,var(--tone-1-line) 70%,var(--ink));
  --tone-2-edge:color-mix(in srgb,var(--tone-2-line) 70%,var(--ink));
  --tone-3-edge:color-mix(in srgb,var(--tone-3-line) 70%,var(--ink));

  /* Load · how much is live in a week (the Analysis page's Timing): one hue, light to dark, never a status.
     Checked 8 Oct 2026 as an ordinal ramp: monotone lightness, one hue, the light end 2.06:1 on --page; ink text on
     1–2, --load-ink on 3–4. */
  --load-1:var(--color-stone-500);
  --load-2:var(--color-stone-600);
  --load-3:var(--color-stone-800);
  --load-4:var(--color-stone-950);
  --load-ink:var(--color-stone-50);

  /* Type */
  --font-brand:Söhne,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-label:'Söhne Mono',ui-monospace,Menlo,monospace;
  --text-xs:12px;
  --text-nav:13px;
  --text-s:14px;
  --text-m:16px;
  --text-l:20px;
  --text-xl:24px;
  --text-2xl:32px;
  --text-3xl:40px;
  /* Display · the landing page only (index.html). blackroll.com's fluid headings: a share of the viewport
     width per breakpoint (phone, from 768, from 1024), clamped at each end. xl/hero, l and m. */
  --text-display:clamp(32.8px,10.256vw,78.8px);
  --text-display-l:clamp(26.3px,8.205vw,63px);
  --text-display-s:clamp(26.3px,8.205vw,63px);
  --tracking-display:.01em;
  --leading-display:1;
  --leading-tightest:1.1;
  --leading-tight:1.2;
  --leading-snug:1.375;
  --leading-normal:1.5;
  --tracking-label:.01em;
  --tracking-title:-.02em;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;

  /* Shape */
  --radius-s:8px;
  --radius-m:12px;
  --radius-l:20px;
  --radius-full:9999px;
  --stroke:1.5px;

  /* Size and rhythm */
  --control-lg:56px;
  --control:48px;
  --control-sm:36px;
  --label-height:24px;
  --icon-size:20px;
  --icon-target:40px;
  --icon-target-sm:36px;
  /* An icon action's glyph at rest: present but quiet; hover, focus and an open menu bring it to 1. */
  --icon-rest:.5;
  --touch-target:44px;
  --header-height:64px;
  /* The plates under the header (a failed save, a sync problem, the viewer note): app.js measures them, so the
     dock and docked Roger start below them and Retry save is never covered. 0 while none shows. */
  --shell-plates:0px;
  --pagebar-height:72px;
  --nav-width:232px;
  --nav-width-collapsed:60px;
  --measure:1040px;
  --gutter:40px;
  --gutter-mobile:20px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-30:120px;
  --space-32:128px;
  --measure-wide:1872px;

  /* Motion */
  --motion-fast:150ms;
  --motion-enter:250ms;
  --motion-scene:900ms;
  --ease-rise:cubic-bezier(.5,0,0,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-glide:cubic-bezier(.16,1,.3,1);
  /* A small spring: lands a pixel past its mark and settles back (a switch's knob). */
  --ease-spring:cubic-bezier(.3,1.4,.55,1);
  --motion-exit:160ms;
  --motion-travel:400ms;
  --motion-ring:1200ms;
  --motion-orb:500ms;     /* one half of the orb's breath: alternate, so it breathes at 1 Hz (§8.2) */
  --motion-cursor:100ms;  /* a teammate's live cursor easing between position updates */
  --motion-reduced:120ms; /* under prefers-reduced-motion, a swap is this opacity fade and nothing moves (§8.4) */

  /* Elevation · floating layers only */
  --shadow-float:0 12px 32px -8px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.06);
  /* Elevation · landing page: a card lifted off an illustration, with a long soft fall-off */
  --shadow-lift:0 1px 2px rgba(0,0,0,.06),0 18px 40px -12px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.05);

  /* Layers */
  --z-sticky:10;
  --z-nav:20;
  --z-drawer:30;
  --z-float:1000;
  --z-toast:3000;

  /* Focus: a quiet grey ring at the stroke's weight for the keyboard (still over 3:1 against the page), and one
     hairline round a field being typed in. Never the 2 px black it was: it dominated every screen. */
  --focus-ring:var(--line-control);
  --focus-width:var(--stroke);
  --focus-field:inset 0 0 0 2px var(--line-control);

  /* Roles · experience blueprint §6.1 (the kit in components.css reads these and the roles above, never
     the palette). Aliases onto existing tokens unless noted. */
  --surface-selected:var(--ink);
  /* Switch: a quiet track off, the mint accent on, and a white knob with a soft shadow that reads above both on
     either appearance. */
  --switch-off:var(--color-black-20);
  --switch-off-hover:var(--color-black-30);
  --switch-on:var(--accent);
  /* The toggle (kit segmented): a recessed track, a hairline edge and a raised thumb under the chosen option. */
  --seg-track:var(--element);
  --seg-edge:transparent;
  --seg-thumb:var(--color-white-00);
  --shadow-seg:0 1px 2px rgba(0,0,0,.08),0 2px 8px -2px rgba(0,0,0,.10),0 0 0 1px rgba(0,0,0,.04);
  --switch-on-hover:var(--color-mint-500);
  --switch-knob:var(--color-white-00);
  --switch-knob-shadow:0 1px 2px rgba(0,0,0,.2),0 3px 8px -2px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.06);
  /* A two-way mode switch's thumb (New project's Create manually | Create with AI): the raised half of a quiet
     track. White on the bright surfaces; a lit step of the night with a hairline edge in Dark, never a white slab. */
  --thumb:var(--color-white-00);
  --thumb-shadow:0 1px 2px rgba(0,0,0,.08),0 2px 6px -1px rgba(0,0,0,.08),0 0 0 .5px rgba(0,0,0,.06);
  --line-ink:var(--ink);
  --line-dash:var(--color-black-30);
  --line-control:var(--color-black-50);
  /* A field's or an unchecked checkbox's edge: at least 3:1 against the page and the plate (WCAG 1.4.11); its
     focus is the same ink at twice the width (--focus-field). */
  --line-field:var(--color-black-50);
  --hover-wash:var(--color-black-05);
  --element-deep:color-mix(in srgb,var(--color-black-00) 14%,transparent);
  --halo:color-mix(in srgb,var(--color-mint-400) 30%,transparent);
  --positive:var(--color-mint-500);
  --accent-on-ink:var(--color-mint-200);
  --hover-on-ink:var(--color-white-10);
  /* Quiet words on an ink surface (the Ask Roger launcher's ⌘K while Roger is open). */
  --muted-on-ink:var(--color-white-60);
  /* Tip: the plate tooltips, callouts and toasts sit on. Ink here; on the dark appearance a raised night tone, so
     a tooltip never glares. Their quiet words use the stage roles, their actions --accent-on-ink and
     --hover-on-ink, all made for a dark plate. */
  --tip:var(--ink);
  --tip-ink:var(--page);
  /* The BLACKROLL wordmark (a black SVG): as drawn here, inverted to ivory on the dark appearance. */
  --logo-filter:none;
  /* Words and glyphs on a pastel hue: a channel's colour (the channel view's bars, the picker's tiles), a tier's
     chip and key. Ink here; on the dark appearance the hues stay pastel and their words turn dark. */
  --hue-ink:var(--ink);
  /* Status text on a tint passes 4.5:1 (orange-700 and red-600 on their tints do not). */
  --ink-attention-text:color-mix(in srgb,var(--color-orange-700) 72%,var(--color-black-00));
  --ink-alert-text:var(--color-red-700);
  /* Initials on four warm darks, each 4.5:1 or more with stone-50 text. */
  --avatar-0:var(--color-sepia-700);
  --avatar-1:var(--color-stone-700);
  --avatar-2:var(--color-stone-800);
  --avatar-3:var(--color-stone-900);
  --avatar-ink:var(--color-stone-50);
  /* Roger's static orb (Roger's mark in the app; the landing page and the analyser run the fluid). */
  --orb:radial-gradient(circle at 34% 30%,var(--color-mint-100) 0,var(--color-mint-400) 38%,var(--color-mint-700) 70%,var(--color-mint-900) 100%);
  --orb-glow:0 0 8px color-mix(in srgb,var(--color-mint-400) 45%,transparent);
  --shadow-dock:-24px 0 48px -28px rgba(0,0,0,.22);
  /* Kit steps · type, shape and the fixed sizes of the primitives */
  --tracking-poster:-.03em;
  --leading-poster:1.08;
  --leading-heading:1.25;
  --radius-xs:5px;
  --radius-bar:16px;
  --icon-size-s:16px;
  --icon-size-xs:14px;
  --dot:8px;
  --pip:6px;
  --node:20px;
  --node-now:28px;
  --halo-width:7px;
  --check-size:18px;
  /* Switch: a 36 × 20 pill whose 16 px knob sits 2 px inside it, travels 16 px and, held down, stretches 5 px
     toward where it will go. */
  --switch-width:36px;
  --switch-height:20px;
  --switch-knob-size:calc(var(--switch-height) - 4px);
  --switch-travel:calc(var(--switch-width) - var(--switch-height));
  --switch-stretch:5px;
  --count-size:22px;
  --notch-size:15px;
  --stub-height:32px;
  --row-height:56px;
  --label-column:112px;
  --title-column:200px;
  --path-meta-width:180px;
  --dialog-width:560px;
  --dock-width:480px;
  --dock-width-roger:440px;
  color-scheme:light;
}

/* Fluid display steps (tablet, desktop), as on blackroll.com */
@media(min-width:768px){:root{--text-display:clamp(57.4px,7.478vw,76.6px);--text-display-l:clamp(45.4px,5.915vw,60.6px);--text-display-s:clamp(30.9px,4.018vw,41.1px)}}
@media(min-width:1024px){:root{--text-display:clamp(54px,5.278vw,101.3px);--text-display-l:clamp(41.2px,4.028vw,77.3px);--text-display-s:clamp(28.4px,2.778vw,53.3px)}}

/* Dark appearance · the app's default (appearance.js; appearance-boot.js sets it on <html> before the first paint,
   and Appearance in the account menu switches it). The AI Lab's night: green-black surfaces stepping up in even
   lightness, ivory ink and its alpha scale where the bright surfaces use black's, the same mint accent. Only roles
   are rebound, never the palette, so every sheet follows. The panel stays a step deeper than the page, plates and
   floats step up; hues (status, tones, tiers) become deep tints with bright ink. Screen only: print and the
   Leadership PDF keep the bright surfaces. The landing page (index.html) never sets it on <html>; its film marks
   its own tile, so the app it shows is the app as people see it. */
@media screen{
  [data-appearance="dark"]:not(:root),:root[data-appearance="dark"]{
    --page:var(--color-night-850);
    --plate:var(--color-night-650);
    --plate-hover:var(--color-night-600);
    --plate-active:var(--color-night-500);
    --panel:var(--color-night-900);
    --panel-plate:var(--color-night-800);
    --panel-plate-hover:var(--color-night-650);
    --panel-plate-active:var(--color-night-600);
    --float:var(--color-night-800);
    --element:var(--color-ivory-08);
    --element-hover:var(--color-night-500);
    --ink:var(--color-stone-50);
    --subtle:var(--color-ivory-80);
    --muted:var(--color-ivory-60);
    --prose:var(--color-ivory-66);
    --roger-text:oklch(from currentColor l calc(c + .05) 160);
    --disabled:var(--color-ivory-30);
    --line:var(--color-ivory-18);
    --line-soft:var(--color-ivory-09);
    --line-strong:var(--color-stone-50);
    --line-panel:var(--color-ivory-18);
    --accent-hover:var(--color-stone-50);
    --accent-hover-ink:var(--color-night-900);
    --ink-hover:var(--color-stone-200);
    --tint-positive:color-mix(in srgb,var(--color-mint-400) 16%,var(--color-night-850));
    --tint-attention:color-mix(in srgb,var(--color-orange-500) 16%,var(--color-night-850));
    --tint-alert:color-mix(in srgb,var(--color-red-500) 18%,var(--color-night-850));
    --ink-positive:var(--color-mint-300);
    --ink-attention:var(--color-orange-300);
    --ink-alert:var(--color-red-400);
    --ink-attention-text:var(--color-orange-300);
    --ink-alert-text:var(--color-red-300);
    --person-empty:var(--color-night-400);
    --person-empty-hover:var(--color-night-300);
    --overlay:color-mix(in srgb,var(--color-black-00) 70%,transparent);
    --selection:color-mix(in srgb,var(--color-mint-400) 34%,var(--color-night-850));
    --media:var(--color-night-800);
    --media-gradient:linear-gradient(7deg,var(--color-night-800) 10.93%,var(--color-night-700) 65.63%);
    /* The night tiles (the analyser, the tour's night stage) lift off the night page as the media tiles do. */
    --media-night:var(--color-night-800);
    --media-night-gradient:linear-gradient(7deg,var(--color-night-800) 10.93%,var(--color-night-700) 65.63%);
    --tone-0:color-mix(in srgb,var(--color-mint-400) 20%,var(--color-night-850));
    --tone-0-line:var(--color-mint-700);
    --tone-1:color-mix(in srgb,var(--color-sepia-500) 22%,var(--color-night-850));
    --tone-1-line:var(--color-sepia-700);
    --tone-2:color-mix(in srgb,var(--color-orange-500) 20%,var(--color-night-850));
    --tone-2-line:var(--color-orange-700);
    --tone-3:color-mix(in srgb,var(--color-stone-500) 16%,var(--color-night-850));
    --tone-3-line:var(--color-stone-700);
    --hue-ink:var(--color-night-900);
    /* Load runs dim to bright on the night: ink text on 1–2, --load-ink (now dark) on 3–4. */
    --load-1:var(--color-night-400);
    --load-2:var(--color-night-300);
    --load-3:var(--color-stone-500);
    --load-4:var(--color-stone-200);
    --load-ink:var(--color-night-900);
    --line-dash:var(--color-ivory-30);
    --switch-off:var(--color-ivory-18);
    --switch-off-hover:var(--color-ivory-30);
    --switch-on-hover:var(--color-mint-300);
    --seg-track:var(--color-ivory-05);
    --seg-edge:var(--color-ivory-08);
    --seg-thumb:var(--color-night-450);
    --shadow-seg:0 1px 2px rgba(0,0,0,.45),0 4px 12px -4px rgba(0,0,0,.5),inset 0 1px 0 var(--color-ivory-08);
    --switch-knob-shadow:0 1px 2px rgba(0,0,0,.45),0 3px 8px -2px rgba(0,0,0,.4);
    --thumb:var(--color-night-500);
    --thumb-shadow:0 1px 2px rgba(0,0,0,.4),0 4px 10px -4px rgba(0,0,0,.5),inset 0 0 0 1px var(--color-ivory-09);
    --line-control:var(--color-ivory-50);
    --line-field:var(--color-ivory-36);
    --hover-wash:var(--color-ivory-05);
    --element-deep:var(--color-ivory-14);
    --muted-on-ink:color-mix(in srgb,var(--color-night-900) 60%,transparent);
    --tip:var(--color-night-450);
    --tip-ink:var(--color-stone-50);
    --logo-filter:invert(1);
    --shadow-float:0 16px 40px -8px rgba(0,0,0,.6),0 0 0 1px var(--color-ivory-10);
    --shadow-lift:0 1px 2px rgba(0,0,0,.4),0 18px 40px -12px rgba(0,0,0,.6),0 0 0 1px var(--color-ivory-09);
    --shadow-dock:-24px 0 48px -28px rgba(0,0,0,.7);
    color-scheme:dark;
  }
  /* A marked subtree inherits roles :root derived from the bright ink, and the bright text colour: derive them
     again from the night's. */
  [data-appearance="dark"]:not(:root){--surface-selected:var(--ink);--line-ink:var(--ink);--focus-ring:var(--line-control);--focus-field:inset 0 0 0 1px var(--line-control);color:var(--ink)}
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--page)}
body{margin:0;background:var(--page);color:var(--ink);font:var(--weight-regular) var(--text-m)/var(--leading-normal) var(--font-brand);font-synthesis:none;overscroll-behavior:none}
h1,h2,h3,h4,h5,h6,p,dl,dd,figure,blockquote{margin:0}
h1,h2,h3{font-weight:var(--weight-semibold);line-height:var(--leading-tight);letter-spacing:var(--tracking-title)}
h4,h5,h6{font-weight:var(--weight-medium);line-height:var(--leading-snug)}
h1{font-size:var(--text-2xl)}
h2{font-size:var(--text-xl)}
h3{font-size:var(--text-l)}
h4{font-size:var(--text-m)}
small{font-size:var(--text-xs)}
a{color:inherit}
img,svg,video{display:block;max-width:100%}
button{margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:default}
input,textarea,select{margin:0;font:inherit;color:inherit;letter-spacing:inherit}
textarea{resize:vertical}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
hr{border:0;border-top:1px solid var(--line-soft);margin:0}
::selection{background:var(--selection);color:var(--ink)}
::placeholder{color:var(--muted);opacity:1}
:focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:2px}
input[type=range],input[type=checkbox],input[type=radio]{accent-color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  /* The shell's swaps stay a 120 ms opacity fade rather than an instant (§8.4): shell.css turns them into its
     shell-fade, so nothing moves. These outrank the rule above for those elements only. */
  [data-shell-enter],[data-shell-fade],#dock-root[data-dock-enter]>*{animation-duration:var(--motion-reduced)!important;animation-timing-function:linear!important}
  [data-dock-ghost],[data-region-ghost]{animation-duration:var(--motion-reduced)!important;animation-timing-function:linear!important}
  #toast{transition-duration:var(--motion-reduced)!important}
  .shell-nav[data-nav-leave],.shell-nav[data-nav-enter]{animation-duration:var(--motion-reduced)!important;animation-timing-function:linear!important}}