/* Glass: the one sheet every component stands on. Light, landing in glass, over the universe.

   Two systems, one sheet:
   - Glass Lines gives the material: there is no brand colour, there is light. White hairlines join pieces of
     information, a pulse of light travels along them, and where it lands the glass takes a faint prism (pale
     blue, rose, mint, peach) that fades back to white. The prism lives in four places only: the mark's core,
     the one call to action on a screen, where light lands (and the chosen chip), and the hairline that marks
     the place you are. Never a fill, never a text colour, never a wash.
   - The Universe gives the laws: the world is the ground and the interface floats over it; the serif is the
     voice and the sans is the hands; numbers are large and honest; motion has weight and nothing bounces;
     a ring, never a border drawn round content; a finger's reach is 44 px.

   ONE SCALE FOR EVERYTHING (a gap off the scale fails the audit)
     space    4 8 12 16 24 32 48 64 96            --s1 … --s9   (2 px is allowed for hairline gaps only)
     type     12 14 16 20 · 28 36 48 64           --t-xs --t-s --t-m --t-l · --t-d1 … --t-d4
     leading  16 20 24 28 · 32 40 52 64           every line box lands on the 4 px grid, so rows align
     radius   6 10 16 24 · pill                   --r0 --r1 --r2 --r3 --r-pill; nested radius = outer − inset
     height   24 32 40 48                         --h-xs --h-s --h-m --h-l; coarse pointers reach 44
     motion   press 120 · micro 160 · glide 340 · land 220 in, 1400 out · rise 280 · macro 600

   WHAT READS AS MADE BY A MACHINE, AND IS THEREFORE NOT HERE
     tracked uppercase micro-labels (labels are sentence case at 12 in the third ink; wide capitals belong to
     the wordmark alone) · bordered status pills (a status is a dot and a word) · card soup (glass is for the
     one object a surface is about; everything else sits on the page with space and a hairline) · many micro
     sizes · monospace figures (figures are Geist with tabular numerals; mono is for code only).

   THEMES  Ink (night) is the default. Day is daylight on paper. The device decides, then a host's data-theme
   ("light" / "dark") if it sets one, unless a root says class="ink" or class="day"; any subtree can pin either. */

@property --turn { syntax: "<angle>"; inherits: false; initial-value: 210deg; }

:root, .ink {
  color-scheme: dark;
  --f-ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-voice: "Instrument Serif", "Young Serif", "Iowan Old Style", Georgia, serif;
  --f-wide: "Archivo", "Geist", -apple-system, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --t-xs: 12px; --t-s: 14px; --t-m: 16px; --t-l: 20px; --t-d1: 28px; --t-d2: 36px; --t-d3: 48px; --t-d4: 64px;
  --lh-xs: 16px; --lh-s: 20px; --lh-m: 24px; --lh-l: 28px; --lh-d1: 32px; --lh-d2: 40px; --lh-d3: 52px; --lh-d4: 64px;
  --r0: 6px; --r1: 10px; --r2: 16px; --r3: 24px; --r-pill: 999px;
  --h-xs: 24px; --h-s: 32px; --h-m: 40px; --h-l: 48px; --reach: 44px;

  --ease: cubic-bezier(.3, .7, .2, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-light: cubic-bezier(.45, .05, .35, 1);
  --spring: cubic-bezier(.34, 1.36, .64, 1);
  --d-press: 120ms; --d-micro: 160ms; --d-dur: 180ms; --d-rise: 280ms; --d-glide: 340ms; --d-slow: 420ms; --d-macro: 600ms;
  --d-land: 220ms; --d-fade: 1400ms; --d-turn: 6s; --d-step: 20ms;

  /* Ink: the ground is the night sky with a violet bias, the ink a cool white */
  --ground: #060509; --surface: #0e0d13; --raised: #15141b; --sunk: #09080d;
  --line: rgba(236, 232, 248, .09); --line-2: rgba(236, 232, 248, .16); --line-3: rgba(236, 232, 248, .26);
  --tint: rgba(255, 255, 255, .05); --tint-2: rgba(255, 255, 255, .09); --tint-3: rgba(255, 255, 255, .14);
  --ink: #f1eef7; --ink-2: #aca7c0; --ink-3: #8a85a0; --ink-4: #615c75;
  --on-ink: #0d0c12;

  /* meanings. light is the accent and what was recorded; glass is what was seen; gap is what has no record.
     ok / warn / bad are states and never a series colour. */
  --light: #f7f5fc; --core: #ffffff; --glass: #a9c8d6; --gap: #df9483;
  --ok: #7fd8ae; --warn: #e9c27a; --bad: #f08a8a;
  --ok-soft: rgba(127, 216, 174, .12); --warn-soft: rgba(233, 194, 122, .12); --bad-soft: rgba(240, 138, 138, .12); --gap-soft: rgba(223, 148, 131, .12); --glass-soft: rgba(169, 200, 214, .12);

  /* series: the prism, deepened until a chart can tell them apart (validated: lightness band, chroma,
     colour-blind separation, contrast). Fixed order, never cycled; a sixth series folds into "Other". */
  --c1: #5b8def; --c2: #d65c9c; --c3: #c4862c; --c4: #2ba487; --c5: #8b78ea; --c-other: #6e6a80;

  /* the prism: four pale hues between two whites */
  --prism-stops: rgba(255,255,255,.15), rgba(208,222,255,.95), rgba(246,212,236,.9), rgba(210,244,232,.9), rgba(255,236,216,.9), rgba(255,255,255,.15);
  --prism-line: linear-gradient(90deg, rgba(208,222,255,0), rgba(208,222,255,.95) 18%, rgba(246,212,236,.9) 42%, rgba(210,244,232,.9) 66%, rgba(255,236,216,.9) 86%, rgba(255,236,216,0));
  --prism-fall: linear-gradient(180deg, rgba(208,222,255,.95), rgba(246,212,236,.85) 36%, rgba(210,244,232,.8) 68%, rgba(255,236,216,.35));
  --beam: rgba(214, 224, 255, .5);
  --bloom: 0 0 44px -12px rgba(214,224,255,.42), inset 0 0 36px -16px rgba(255,255,255,.28);
  --glow: 0 0 28px -6px rgba(214,224,255,.55), 0 0 60px -20px rgba(246,212,236,.35);
  --core-glow: drop-shadow(0 0 1.6px rgba(255,255,255,.95)) drop-shadow(-1.3px -.5px 2.2px rgba(208,222,255,.85)) drop-shadow(1.3px -.4px 2.2px rgba(246,212,236,.75)) drop-shadow(0 1.4px 2.2px rgba(210,244,232,.7));

  /* glass: frosted, translucent, a light top edge */
  --frost: blur(18px) saturate(125%);
  --pane: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.016));
  --pane-solid: linear-gradient(180deg, #14131a, #100f15);
  --pane-edge: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.035);
  --ring: inset 0 0 0 var(--edge-w) var(--line);
  --ring-2: inset 0 0 0 var(--edge-w) var(--line-2);
  --shadow: 0 24px 48px -32px rgba(0,0,0,.9);
  --shadow-pop: 0 1px 0 rgba(255,255,255,.04) inset, 0 0 0 1px rgba(255,255,255,.06), 0 16px 40px -12px rgba(0,0,0,.75), 0 4px 12px -4px rgba(0,0,0,.5);
  --scrim: rgba(4, 3, 8, .62);

  /* the one call to action: a pearl on Ink */
  --cta: linear-gradient(180deg, #ffffff 0%, #f2f1f5 46%, #dcdbe3 100%);
  --cta-ink: #0d0c12;
  --cta-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.16), 0 1px 1px rgba(0,0,0,.35), 0 12px 26px -14px rgba(0,0,0,.9);

  /* the focus ring goes FIRST in any box-shadow list it joins: the first shadow paints on top, and a lens's own shadow
     (a hard offset, a thick spread) drawn above it would cover the ring. tools/lint.mjs refuses the other order in a
     component; here and in site.css it is kept by hand. */
  --focus: 0 0 0 2px var(--ground), 0 0 0 3.5px rgba(214, 224, 255, .9);
  --pick: #f1eef7; --on-pick: #0d0c12;   /* the fill of a chosen check, switch or segment, and the ink on it */

  /* the comic material: a lens may set each (the Table lens does); every default here draws nothing, so Glass and
     every other lens look as they did. --ground-art layers over the ground (alpha .3 or below, so the audit still
     measures over it; none, an empty layer, by default: even a transparent gradient changes how a page is rasterised);
     the voice may be outlined and lifted; a press may sink instead of shrink; a ring may be wider;
     an entrance may start turned; a stamp may rest tilted. */
  --ground-art: none;
  --voice-stroke: 0 transparent; --voice-lift: none;
  --press: scale(.98); --cta-press: var(--cta-shadow);
  --edge-w: 1px;
  --arrive: translateY(8px); --arrive-pop: scale(.94); --tilt: 0deg;

  /* Optional material for a navigation bar; no existing piece reads it. The primary's tracking is unset so
     its inherited spacing stays exactly as before, including inside a tracked parent. */
  --bar: var(--pane); --bar-edge: var(--pane-edge); --bar-frost: var(--frost); --bar-tracking: normal;
  --cta-tracking: initial;
  /* Optional source materials: defaults preserve the existing themes. */
  --lens-exact: 0;
  --glass-wash: transparent;
  --glass-dark: none;
  --glass-right-drop: none;
  --glass-left-drop: none;

  --seg-first-three: var(--seg-first);
  --facts-min-height: 0px;

  --f-meta: var(--f-ui);
  --glass-layer-display: none;
  --glass-light-filter: none;
  --glass-right-fill: none;
  --glass-left-fill: none;
  --seg-ink: var(--ink);

  --pearl-frame: 0;
  --pearl-rim-shadow: none;
  --pearl-ring: var(--cta);
  --pearl-edge: var(--line);
  --pearl-label: linear-gradient(var(--cta-ink), var(--cta-ink));
  --pearl-label-shadow: none;
  --glass-base: var(--pane);
  --glass-edge: var(--pane-edge);
  --glass-drop: var(--shadow);
  --glass-light: none;
  --glass-right: var(--pane-edge);
  --glass-left: var(--pane-edge);
  --glass-top: none;
  --seg-inset: 2px;
  --seg-gap: 2px;
  --seg-height: initial;
  --seg-weight: 500;
  --seg-disabled: .4;
  --seg-first: auto;
  --seg-chosen: var(--pane), var(--surface);
  --seg-track: var(--pane);
  --seg-edge: var(--pane-edge), var(--shadow);
  --facts-pad: var(--s4);
  --facts-gap: var(--s3);
  --facts-columns: 1fr 1fr;
  --facts-label-size: var(--t-xs);
  --facts-label-line: var(--lh-xs);
  --facts-surface: var(--pane), var(--surface);
  --facts-edge: var(--pane-edge), var(--shadow);
  --facts-frost: var(--frost);
  --sheet-handle: var(--line-2);
  --sheet-detail: var(--pane-solid);
  --sheet-frost: var(--frost);
  --scrim-frost: none;
  --head-title-ink: var(--ink);

}

@media (prefers-color-scheme: light) {
  :root:not(.ink):not([data-theme="dark"]) {
    color-scheme: light;
    --ground: #efede7; --surface: #f7f6f2; --raised: #ffffff; --sunk: #e7e4dc;
    --line: rgba(20,16,30,.11); --line-2: rgba(20,16,30,.18); --line-3: rgba(20,16,30,.28);
    --tint: rgba(20,16,30,.04); --tint-2: rgba(20,16,30,.075); --tint-3: rgba(20,16,30,.11);
    --ink: #121018; --ink-2: #4d4860; --ink-3: #66617a; --ink-4: #908ba2;
    --on-ink: #ffffff;
    --light: #2b2836; --core: #2b2836; --glass: #2a6580; --gap: #a2483a;
    --ok: #15703f; --warn: #7d5400; --bad: #b3261e;
    --ok-soft: rgba(21,112,63,.09); --warn-soft: rgba(125,84,0,.09); --bad-soft: rgba(179,38,30,.08); --gap-soft: rgba(162,72,58,.08); --glass-soft: rgba(42,101,128,.08);
    --c1: #3b6fd8; --c2: #c2457f; --c3: #a8650f; --c4: #14866a; --c5: #6a55d0; --c-other: #8d889c;
    --prism-stops: rgba(20,16,30,.08), rgba(92,116,214,.8), rgba(198,92,156,.72), rgba(46,156,118,.72), rgba(206,134,60,.72), rgba(20,16,30,.08);
    --prism-line: linear-gradient(90deg, rgba(92,116,214,0), rgba(92,116,214,.8) 18%, rgba(198,92,156,.72) 42%, rgba(46,156,118,.72) 66%, rgba(206,134,60,.72) 86%, rgba(206,134,60,0));
    --prism-fall: linear-gradient(180deg, rgba(92,116,214,.8), rgba(198,92,156,.7) 36%, rgba(46,156,118,.68) 68%, rgba(206,134,60,.3));
    --beam: rgba(92,116,214,.28);
    --bloom: 0 0 40px -14px rgba(92,116,214,.3), inset 0 0 30px -18px rgba(198,92,156,.18);
    --glow: 0 0 26px -8px rgba(92,116,214,.32), 0 0 54px -22px rgba(198,92,156,.26);
    --core-glow: drop-shadow(0 0 1.2px rgba(255,255,255,.9)) drop-shadow(-1.2px -.5px 2px rgba(92,116,214,.55)) drop-shadow(1.2px -.4px 2px rgba(198,92,156,.5)) drop-shadow(0 1.3px 2px rgba(46,156,118,.45));
    --pane: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
    --pane-solid: linear-gradient(180deg, #ffffff, #fbfaf7);
    --pane-edge: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(20,16,30,.06);
    --shadow: 0 16px 34px -24px rgba(40,30,80,.35);
    --shadow-pop: 0 0 0 1px rgba(20,16,30,.07), 0 16px 40px -14px rgba(40,30,80,.28), 0 4px 12px -4px rgba(40,30,80,.12);
    --scrim: rgba(239, 237, 231, .7);
    --cta: linear-gradient(180deg, #2c2935 0%, #1a1820 54%, #121018 100%);
    --cta-ink: #ffffff;
    --cta-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.4), 0 1px 1px rgba(20,16,30,.2), 0 12px 26px -14px rgba(40,30,80,.55);
    --focus: 0 0 0 2px var(--ground), 0 0 0 3.5px rgba(59, 79, 160, .85);
    --pick: #121018; --on-pick: #ffffff;
    --ring: inset 0 0 0 var(--edge-w) var(--line); --ring-2: inset 0 0 0 var(--edge-w) var(--line-2);
    --ground-art: none; --voice-stroke: 0 transparent; --voice-lift: none;
    --press: scale(.98); --cta-press: var(--cta-shadow); --edge-w: 1px; --arrive: translateY(8px); --arrive-pop: scale(.94); --tilt: 0deg;
    --bar: var(--pane); --bar-edge: var(--pane-edge); --bar-frost: var(--frost); --bar-tracking: normal;
    --cta-tracking: initial;
  /* Optional source materials: defaults preserve the existing themes. */
  --lens-exact: 0;
  --glass-wash: transparent;
  --glass-dark: none;
  --glass-right-drop: none;
  --glass-left-drop: none;

  --seg-first-three: var(--seg-first);
  --facts-min-height: 0px;

  --f-meta: var(--f-ui);
  --glass-layer-display: none;
  --glass-light-filter: none;
  --glass-right-fill: none;
  --glass-left-fill: none;
  --seg-ink: var(--ink);

  --pearl-frame: 0;
  --pearl-rim-shadow: none;
  --pearl-ring: var(--cta);
  --pearl-edge: var(--line);
  --pearl-label: linear-gradient(var(--cta-ink), var(--cta-ink));
  --pearl-label-shadow: none;
  --glass-base: var(--pane);
  --glass-edge: var(--pane-edge);
  --glass-drop: var(--shadow);
  --glass-light: none;
  --glass-right: var(--pane-edge);
  --glass-left: var(--pane-edge);
  --glass-top: none;
  --seg-inset: 2px;
  --seg-gap: 2px;
  --seg-height: initial;
  --seg-weight: 500;
  --seg-disabled: .4;
  --seg-first: auto;
  --seg-chosen: var(--pane), var(--surface);
  --seg-track: var(--pane);
  --seg-edge: var(--pane-edge), var(--shadow);
  --facts-pad: var(--s4);
  --facts-gap: var(--s3);
  --facts-columns: 1fr 1fr;
  --facts-label-size: var(--t-xs);
  --facts-label-line: var(--lh-xs);
  --facts-surface: var(--pane), var(--surface);
  --facts-edge: var(--pane-edge), var(--shadow);
  --facts-frost: var(--frost);
  --sheet-handle: var(--line-2);
  --sheet-detail: var(--pane-solid);
  --sheet-frost: var(--frost);
  --scrim-frost: none;
  --head-title-ink: var(--ink);

  }
}

/* a subtree pinned to Day whatever the device says, or a viewer who chose light: the same values */
.day, :root[data-theme="light"]:not(.ink) {
  color-scheme: light;
  --ground: #efede7; --surface: #f7f6f2; --raised: #ffffff; --sunk: #e7e4dc;
  --line: rgba(20,16,30,.11); --line-2: rgba(20,16,30,.18); --line-3: rgba(20,16,30,.28);
  --tint: rgba(20,16,30,.04); --tint-2: rgba(20,16,30,.075); --tint-3: rgba(20,16,30,.11);
  --ink: #121018; --ink-2: #4d4860; --ink-3: #66617a; --ink-4: #908ba2;
  --on-ink: #ffffff;
  --light: #2b2836; --core: #2b2836; --glass: #2a6580; --gap: #a2483a;
  --ok: #15703f; --warn: #7d5400; --bad: #b3261e;
  --ok-soft: rgba(21,112,63,.09); --warn-soft: rgba(125,84,0,.09); --bad-soft: rgba(179,38,30,.08); --gap-soft: rgba(162,72,58,.08); --glass-soft: rgba(42,101,128,.08);
  --c1: #3b6fd8; --c2: #c2457f; --c3: #a8650f; --c4: #14866a; --c5: #6a55d0; --c-other: #8d889c;
  --prism-stops: rgba(20,16,30,.08), rgba(92,116,214,.8), rgba(198,92,156,.72), rgba(46,156,118,.72), rgba(206,134,60,.72), rgba(20,16,30,.08);
  --prism-line: linear-gradient(90deg, rgba(92,116,214,0), rgba(92,116,214,.8) 18%, rgba(198,92,156,.72) 42%, rgba(46,156,118,.72) 66%, rgba(206,134,60,.72) 86%, rgba(206,134,60,0));
  --prism-fall: linear-gradient(180deg, rgba(92,116,214,.8), rgba(198,92,156,.7) 36%, rgba(46,156,118,.68) 68%, rgba(206,134,60,.3));
  --beam: rgba(92,116,214,.28);
  --bloom: 0 0 40px -14px rgba(92,116,214,.3), inset 0 0 30px -18px rgba(198,92,156,.18);
  --glow: 0 0 26px -8px rgba(92,116,214,.32), 0 0 54px -22px rgba(198,92,156,.26);
  --core-glow: drop-shadow(0 0 1.2px rgba(255,255,255,.9)) drop-shadow(-1.2px -.5px 2px rgba(92,116,214,.55)) drop-shadow(1.2px -.4px 2px rgba(198,92,156,.5)) drop-shadow(0 1.3px 2px rgba(46,156,118,.45));
  --pane: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  --pane-solid: linear-gradient(180deg, #ffffff, #fbfaf7);
  --pane-edge: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(20,16,30,.06);
  --shadow: 0 16px 34px -24px rgba(40,30,80,.35);
  --shadow-pop: 0 0 0 1px rgba(20,16,30,.07), 0 16px 40px -14px rgba(40,30,80,.28), 0 4px 12px -4px rgba(40,30,80,.12);
  --scrim: rgba(239, 237, 231, .7);
  --cta: linear-gradient(180deg, #2c2935 0%, #1a1820 54%, #121018 100%);
  --cta-ink: #ffffff;
  --cta-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.4), 0 1px 1px rgba(20,16,30,.2), 0 12px 26px -14px rgba(40,30,80,.55);
  --focus: 0 0 0 2px var(--ground), 0 0 0 3.5px rgba(59, 79, 160, .85);
  --pick: #121018; --on-pick: #ffffff;
  --ring: inset 0 0 0 var(--edge-w) var(--line); --ring-2: inset 0 0 0 var(--edge-w) var(--line-2);
  --ground-art: none; --voice-stroke: 0 transparent; --voice-lift: none;
  --press: scale(.98); --cta-press: var(--cta-shadow); --edge-w: 1px; --arrive: translateY(8px); --arrive-pop: scale(.94); --tilt: 0deg;
  --bar: var(--pane); --bar-edge: var(--pane-edge); --bar-frost: var(--frost); --bar-tracking: normal;
  --cta-tracking: initial;
  /* Optional source materials: defaults preserve the existing themes. */
  --lens-exact: 0;
  --glass-wash: transparent;
  --glass-dark: none;
  --glass-right-drop: none;
  --glass-left-drop: none;

  --seg-first-three: var(--seg-first);
  --facts-min-height: 0px;

  --f-meta: var(--f-ui);
  --glass-layer-display: none;
  --glass-light-filter: none;
  --glass-right-fill: none;
  --glass-left-fill: none;
  --seg-ink: var(--ink);

  --pearl-frame: 0;
  --pearl-rim-shadow: none;
  --pearl-ring: var(--cta);
  --pearl-edge: var(--line);
  --pearl-label: linear-gradient(var(--cta-ink), var(--cta-ink));
  --pearl-label-shadow: none;
  --glass-base: var(--pane);
  --glass-edge: var(--pane-edge);
  --glass-drop: var(--shadow);
  --glass-light: none;
  --glass-right: var(--pane-edge);
  --glass-left: var(--pane-edge);
  --glass-top: none;
  --seg-inset: 2px;
  --seg-gap: 2px;
  --seg-height: initial;
  --seg-weight: 500;
  --seg-disabled: .4;
  --seg-first: auto;
  --seg-chosen: var(--pane), var(--surface);
  --seg-track: var(--pane);
  --seg-edge: var(--pane-edge), var(--shadow);
  --facts-pad: var(--s4);
  --facts-gap: var(--s3);
  --facts-columns: 1fr 1fr;
  --facts-label-size: var(--t-xs);
  --facts-label-line: var(--lh-xs);
  --facts-surface: var(--pane), var(--surface);
  --facts-edge: var(--pane-edge), var(--shadow);
  --facts-frost: var(--frost);
  --sheet-handle: var(--line-2);
  --sheet-detail: var(--pane-solid);
  --sheet-frost: var(--frost);
  --scrim-frost: none;
  --head-title-ink: var(--ink);

}

/* ── the root of anything drawn in Glass ───────────────────────────────────────────────────────────── */
.g-root {
  font: 400 var(--t-s)/var(--lh-s) var(--f-ui);
  color: var(--ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01" 0;
}
.g-root *, .g-root *::before, .g-root *::after { box-sizing: border-box; }
:where(.g-root) :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
:where(.g-root) :where(h1, h2, h3, h4, h5, h6) { font: inherit; }   /* a heading takes the size its component gives it, never the browser's */
:where(.g-root) :where(ul, ol) { padding: 0; list-style: none; }
:where(.g-root) :where(button, input, textarea, select) { font: inherit; color: inherit; letter-spacing: inherit; }
:where(.g-root) :where(button) { background: none; border: 0; padding: 0; cursor: pointer; }
:where(.g-root) :where(a) { color: inherit; text-decoration: none; }
:where(.g-root) :where(svg) { display: block; }
:where(.g-root) :where(:focus-visible) { outline: none; box-shadow: var(--focus); }
:where(.g-root) :where([hidden]) { display: none !important; }

/* ── words ─────────────────────────────────────────────────────────────────────────────────────────── */
.g-label { font: 500 var(--t-xs)/var(--lh-xs) var(--f-ui); letter-spacing: .01em; color: var(--ink-3); }
.g-quiet { color: var(--ink-2); }
.g-faint { color: var(--ink-3); }
.g-fig { font-family: var(--f-ui); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.g-num { font-variant-numeric: tabular-nums; }
.g-voice { font-family: var(--f-voice); font-weight: 400; letter-spacing: -.01em; -webkit-text-stroke: var(--voice-stroke); paint-order: stroke fill; text-shadow: var(--voice-lift); }
.g-voice em { font-style: italic; }
.g-mono { font-family: var(--f-mono); font-size: var(--t-xs); line-height: var(--lh-xs); }
.g-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* a status is a dot and a word */
.g-tag { display: inline-flex; align-items: center; gap: var(--s2); font: 500 var(--t-xs)/var(--lh-xs) var(--f-ui); white-space: nowrap; color: var(--ink-2); }
.g-tag::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.g-tag.ok { color: var(--ok); } .g-tag.warn { color: var(--warn); } .g-tag.bad { color: var(--bad); } .g-tag.gap { color: var(--gap); }
.g-tag.light { color: var(--light); } .g-tag.glass { color: var(--glass); }
.g-tag.none { color: var(--ink-3); } .g-tag.none::before { box-shadow: none; background: none; border: 1px solid currentColor; }
.g-tag.live::before { animation: g-live 1.6s var(--ease-light) infinite; }
@keyframes g-live { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ── the prism edge: a 1 px ring in the prism, masked to the edge of whatever carries it ─────────────── */
.g-lit, .g-prism { position: relative; }
.g-lit::after, .g-prism::after, .g-btn::after, .g-chip::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: var(--edge-w); pointer-events: none;
  background: conic-gradient(from var(--turn), var(--prism-stops));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity var(--d-fade) ease-out;
}
.g-prism.on::after { opacity: .9; transition-duration: var(--d-land); }
.g-lit { transition: box-shadow var(--d-fade) ease-out; }
.g-lit.landed { box-shadow: var(--pane-edge), var(--bloom); transition-duration: var(--d-land); }
.g-lit.landed::after { opacity: 1; transition-duration: var(--d-land); }
@keyframes g-turn { to { --turn: 570deg; } }

/* ── surfaces ──────────────────────────────────────────────────────────────────────────────────────── */
/* the one object a surface is about: frosted glass with a light top edge */
.g-pane { position: relative; background: var(--pane), var(--surface); box-shadow: var(--pane-edge), var(--shadow); border-radius: var(--r3); }
.g-pane.frost { background: var(--pane); backdrop-filter: var(--frost); -webkit-backdrop-filter: var(--frost); }
/* Navigation material only: the page supplies its layout and semantics. Keep words over a known light/dark
   surface appropriate to the lens; a translucent bar cannot guarantee contrast over arbitrary imagery. */
.g-bar { background: var(--bar); box-shadow: var(--bar-edge); backdrop-filter: var(--bar-frost); -webkit-backdrop-filter: var(--bar-frost); letter-spacing: var(--bar-tracking); }
/* a sheet that floats over everything: menus, popovers, tooltips with content */
.g-sheet { position: relative; background: var(--pane-solid); box-shadow: var(--shadow-pop); border-radius: var(--r2); }
/* a well sunk into a surface: code, previews, inputs at rest */
.g-well { background: var(--tint); box-shadow: var(--ring); border-radius: var(--r1); }
/* the hairline that separates rows inside a surface */
.g-hair { height: 1px; border: 0; margin: 0; background: var(--line); }
.g-beam { display: block; height: 1px; border: 0; margin: 0; background: var(--prism-line); box-shadow: 0 0 12px var(--beam); }
.g-quote { padding-left: var(--s4); border-left: 1px solid transparent; border-image: var(--prism-fall) 1; color: var(--ink); }

/* ── buttons: one pearl per screen carries the prism; every other button is quiet glass ──────────────── */
.g-btn {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: var(--h-s); padding: 0 var(--s3); border: 0; border-radius: var(--r-pill);
  background: var(--tint); box-shadow: var(--ring-2); color: var(--ink);
  font: 500 var(--t-s)/var(--lh-s) var(--f-ui); white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none;
  transition: background-color var(--d-dur) ease, box-shadow var(--d-slow) ease, color var(--d-dur) ease, transform var(--d-press) ease, opacity var(--d-dur) ease;
}
.g-btn:hover { background: var(--tint-2); }
.g-btn:hover::after, .g-btn:focus-visible::after { opacity: .5; transition-duration: .3s; animation: g-turn var(--d-turn) linear infinite; }
.g-btn:active { transform: var(--press); }
.g-btn:focus-visible { outline: none; box-shadow: var(--ring-2), var(--focus); }
.g-btn:disabled, .g-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; transform: none; }
.g-btn:disabled::after, .g-btn[aria-disabled="true"]::after { opacity: 0; animation: none; }
/* waiting is not unavailable: a busy button keeps its full ink and turns its ring in the button's own ink */
.g-btn[aria-busy="true"] { opacity: 1; cursor: progress; transform: none; }
.g-btn .g-spin { width: 14px; height: 14px; border-color: color-mix(in srgb, currentColor 24%, transparent); border-top-color: currentColor; }
.g-btn.xs .g-spin { width: 12px; height: 12px; }
/* the pearl: the one call to action on a surface */
.g-btn.primary { background: var(--cta); color: var(--cta-ink); box-shadow: var(--cta-shadow); font-weight: 600; letter-spacing: var(--cta-tracking, inherit); }
.g-btn.primary::after { inset: -2px; padding: 1.5px; opacity: .38; transition-duration: .5s; }
.g-btn.primary:hover, .g-btn.primary:focus-visible { box-shadow: var(--cta-shadow), var(--glow); }
.g-btn.primary:hover::after, .g-btn.primary:focus-visible::after { opacity: 1; }
.g-btn.primary:focus-visible { box-shadow: var(--focus), var(--cta-shadow); }
/* pressed: a lens may sink the pearl into its own shadow (--cta-press is the resting shadow by default) */
.g-btn.primary:active { box-shadow: var(--cta-press); }
.g-btn.primary:active:hover { box-shadow: var(--cta-press), var(--glow); }
.g-btn.primary:active:focus-visible { box-shadow: var(--focus), var(--cta-press); }
/* quiet: no ring until pointed at */
.g-btn.ghost { background: transparent; box-shadow: none; color: var(--ink-2); }
.g-btn.ghost:hover { background: var(--tint); color: var(--ink); }
.g-btn.ghost::after { display: none; }
/* destructive: the word says it; the colour only agrees */
.g-btn.danger { color: var(--bad); background: var(--bad-soft); box-shadow: inset 0 0 0 var(--edge-w) color-mix(in srgb, var(--bad) 28%, transparent); }
.g-btn.danger:hover { background: color-mix(in srgb, var(--bad) 18%, transparent); }
.g-btn.danger::after { display: none; }
/* the quiet kinds keep a visible focus: their own resting shadow must never win over it */
.g-btn.ghost:focus-visible { box-shadow: var(--focus); }
.g-btn.danger:focus-visible { box-shadow: inset 0 0 0 var(--edge-w) color-mix(in srgb, var(--bad) 28%, transparent), var(--focus); }
/* sizes */
.g-btn.xs { height: var(--h-xs); padding: 0 var(--s2); gap: var(--s1); font-size: var(--t-xs); line-height: var(--lh-xs); }
.g-btn.m { height: var(--h-m); padding: 0 var(--s4); }
.g-btn.l { height: var(--h-l); padding: 0 var(--s5); font-size: var(--t-m); line-height: var(--lh-m); }
/* square, for one icon: the icon sits in the optical centre */
.g-btn.icon { width: var(--h-s); padding: 0; }
.g-btn.icon.xs { width: var(--h-xs); } .g-btn.icon.m { width: var(--h-m); } .g-btn.icon.l { width: var(--h-l); }
/* an icon leading a label: the label's side keeps its padding, the icon's side gives 2 px back */
.g-btn > .g-i:first-child:not(:only-child) { margin-left: -2px; }
.g-btn > .g-i:last-child:not(:only-child) { margin-right: -2px; }

/* a finger's reach: on a coarse pointer every small control reaches 44 × 44 round its centre, the drawing unchanged */
@media (pointer: coarse) {
  .g-btn::before, .g-chip::before, .g-reach::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--reach)); height: max(100%, var(--reach));
    transform: translate(-50%, -50%);
  }
}
.g-reach { position: relative; }

/* ── chips and the segmented control: the choice is where light rests ──────────────────────────────── */
.g-chip {
  position: relative; display: inline-flex; align-items: center; gap: var(--s2); height: var(--h-s); padding: 0 var(--s3);
  border: 0; border-radius: var(--r-pill); background: var(--tint); box-shadow: var(--ring); color: var(--ink-2);
  font: 500 var(--t-s)/var(--lh-s) var(--f-ui); white-space: nowrap; cursor: pointer;
  transition: color var(--d-dur) ease, background-color var(--d-dur) ease, box-shadow var(--d-slow) ease;
}
.g-chip.xs { height: var(--h-xs); padding: 0 var(--s2); gap: var(--s1); font-size: var(--t-xs); line-height: var(--lh-xs); }
.g-chip:hover { color: var(--ink); background: var(--tint-2); }
.g-chip[aria-pressed="true"], .g-chip[aria-selected="true"], .g-chip[aria-current="page"], .g-chip.on { color: var(--ink); box-shadow: inset 0 0 0 var(--edge-w) transparent, 0 0 24px -8px var(--beam); }
.g-chip[aria-pressed="true"]::after, .g-chip[aria-selected="true"]::after, .g-chip[aria-current="page"]::after, .g-chip.on::after { opacity: .9; transition-duration: var(--d-land); }
.g-chip:focus-visible { outline: none; box-shadow: var(--ring), var(--focus); }

.g-seg { position: relative; display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-pill); background: var(--tint); box-shadow: var(--ring); }
.g-seg > .thumb { position: absolute; left: 0; top: 0; border-radius: var(--r-pill); background: var(--pick); box-shadow: 0 1px 8px -2px rgba(0,0,0,.6), 0 0 18px -6px var(--beam); transition: transform var(--d-glide) var(--ease), width var(--d-glide) var(--ease), height var(--d-glide) var(--ease); pointer-events: none; }
.g-seg > button { position: relative; z-index: 1; height: calc(var(--h-s) - 4px); padding: 0 var(--s3); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font: 500 var(--t-s)/var(--lh-s) var(--f-ui); white-space: nowrap; cursor: pointer; transition: color var(--d-dur) ease; }
.g-seg > button[aria-pressed="true"], .g-seg > button[aria-selected="true"], .g-seg > button[aria-checked="true"] { color: var(--on-pick); }
.g-seg:not(.glides) > button[aria-pressed="true"], .g-seg:not(.glides) > button[aria-selected="true"], .g-seg:not(.glides) > button[aria-checked="true"] { background: var(--pick); }
.g-seg > button:hover:not([aria-pressed="true"]):not([aria-selected="true"]):not([aria-checked="true"]) { color: var(--ink); }
.g-seg > button:focus-visible { outline: none; box-shadow: var(--focus); }

/* Opt-in glass choice. The surface under the chosen pill keeps its ink legible even while the track is clear.
   No changes to the default pill, checks or switches; all three selected states also work without a thumb. */
.g-seg.glass { gap: var(--seg-gap); padding: var(--seg-inset); background: var(--seg-track); box-shadow: var(--seg-edge); backdrop-filter: var(--frost); -webkit-backdrop-filter: var(--frost); }
.g-seg.glass > .thumb { background: var(--seg-chosen); box-shadow: var(--seg-edge); }
.g-seg.glass > button[aria-pressed="true"], .g-seg.glass > button[aria-selected="true"], .g-seg.glass > button[aria-checked="true"] { color: var(--ink); }
.g-seg.glass:not(.glides) > button[aria-pressed="true"], .g-seg.glass:not(.glides) > button[aria-selected="true"], .g-seg.glass:not(.glides) > button[aria-checked="true"] { background: var(--seg-chosen); box-shadow: var(--seg-edge); }
.g-seg.glass:not(.glides) > button:focus-visible { box-shadow: var(--focus), var(--pane-edge), var(--shadow); }

/* ── keys ──────────────────────────────────────────────────────────────────────────────────────────── */
.g-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 var(--s1); border-radius: var(--r0); background: var(--tint); box-shadow: inset 0 0 0 var(--edge-w) var(--line-2), inset 0 -1px 0 var(--line-2); color: var(--ink-2); font: 500 var(--t-xs)/1 var(--f-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (pointer: coarse) { .g-kbd { display: none !important; } }   /* key hints are decoration: a touch screen has no keys */
.g-btn.primary .g-kbd { background: rgba(0,0,0,.06); box-shadow: inset 0 0 0 var(--edge-w) rgba(0,0,0,.12); color: inherit; opacity: .7; }

/* ── fields ────────────────────────────────────────────────────────────────────────────────────────── */
.g-field { display: flex; align-items: center; gap: var(--s2); height: var(--h-m); padding: 0 var(--s3); border-radius: var(--r1); background: var(--tint); box-shadow: var(--ring); color: var(--ink); transition: box-shadow var(--d-dur) ease, background-color var(--d-dur) ease; }
.g-field:hover { box-shadow: var(--ring-2); }
.g-field:focus-within { background: var(--tint-2); box-shadow: var(--ring-2), var(--focus); }
.g-field > input, .g-field > textarea { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--ink); }
.g-field > input::placeholder, .g-field > textarea::placeholder { color: var(--ink-3); }
.g-field.s { height: var(--h-s); border-radius: var(--r-pill); }
.g-field[aria-invalid="true"] { box-shadow: inset 0 0 0 var(--edge-w) color-mix(in srgb, var(--bad) 60%, transparent); }

/* ── checks and switches ───────────────────────────────────────────────────────────────────────────── */
.g-check { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 16px; height: 16px; margin: 0; border-radius: 5px; background: var(--tint); box-shadow: inset 0 0 0 var(--edge-w) var(--line-3); cursor: pointer; transition: background-color var(--d-micro) ease, box-shadow var(--d-micro) ease; }
.g-check::after { content: ""; position: absolute; inset: 0; background: var(--on-pick); -webkit-mask: var(--g-i-check-s) center / 12px no-repeat; mask: var(--g-i-check-s) center / 12px no-repeat; transform: scale(.4); opacity: 0; transition: transform var(--d-micro) var(--spring), opacity var(--d-press) ease; }
.g-check:checked { background: var(--pick); box-shadow: none; }
.g-check:checked::after { transform: none; opacity: 1; }
.g-check:indeterminate { background: var(--pick); box-shadow: none; }
.g-check:indeterminate::after { -webkit-mask: none; mask: none; inset: 7px 4px; border-radius: 1px; transform: none; opacity: 1; }
.g-check:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--edge-w) var(--line-3), var(--focus); }
.g-check:disabled { opacity: .4; cursor: not-allowed; }

.g-switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 32px; height: 20px; margin: 0; border-radius: var(--r-pill); background: var(--tint-3); box-shadow: inset 0 0 0 var(--edge-w) var(--line); cursor: pointer; transition: background-color var(--d-dur) ease; }
.g-switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-2); box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform var(--d-glide) var(--ease), background-color var(--d-dur) ease; }
.g-switch:checked { background: var(--pick); }
.g-switch:checked::after { transform: translateX(12px); background: var(--on-pick); }
.g-switch:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--edge-w) var(--line), var(--focus); }
.g-switch:disabled { opacity: .4; cursor: not-allowed; }

/* ── people and marks ──────────────────────────────────────────────────────────────────────────────── */
.g-avatar { position: relative; display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--tint-2); box-shadow: inset 0 0 0 var(--edge-w) var(--line-2); color: var(--ink); font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: -.01em; overflow: hidden; }
.g-avatar.s { width: 20px; height: 20px; }
.g-avatar.m { width: 32px; height: 32px; font-size: var(--t-xs); }
.g-avatar.l { width: 40px; height: 40px; font-size: var(--t-s); }
.g-avatar.xl { width: 64px; height: 64px; font-size: var(--t-m); }
.g-avatar > img { width: 100%; height: 100%; object-fit: cover; }
/* a glyph tile: the mark of a service or an agent, never a borrowed logo */
.g-tile { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--r1); background: var(--pane), var(--raised); box-shadow: var(--pane-edge); color: var(--ink); font: 600 var(--t-xs)/1 var(--f-ui); }
.g-tile.s { width: 24px; height: 24px; border-radius: var(--r0); }
.g-tile.l { width: 40px; height: 40px; border-radius: var(--r1); font-size: var(--t-s); }
/* a point of light: the mark of the assistant */
.g-orb { position: relative; display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #fff, rgba(232,236,255,.9) 38%, rgba(190,200,240,.55) 70%, rgba(190,200,240,.15)); filter: var(--core-glow); }
.g-orb.l { width: 16px; height: 16px; }

/* ── menus, lists and tips ─────────────────────────────────────────────────────────────────────────── */
.g-menu { display: flex; flex-direction: column; gap: 2px; padding: var(--s1); }
.g-item { display: flex; align-items: center; gap: var(--s2); min-height: var(--h-s); padding: var(--s1) var(--s2); border-radius: var(--r1); color: var(--ink); font: 400 var(--t-s)/var(--lh-s) var(--f-ui); text-align: left; cursor: pointer; user-select: none; }
.g-item > .g-i { color: var(--ink-2); }
.g-item:hover { background: var(--tint); }
.g-item.active, .g-item[aria-selected="true"], .g-item:focus-visible { background: var(--tint-2); }   /* where the keyboard stands is firmer than where the pointer rests */
.g-item[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.g-item .end { flex: 1 0 auto; justify-content: flex-end; display: inline-flex; align-items: center; gap: var(--s1); color: var(--ink-3); font-size: var(--t-xs); line-height: var(--lh-xs); }
/* inside a sheet the items keep its curve: 16 outer, 4 inset, 12 inner */
.g-sheet > .g-menu > .g-item, .g-sheet .g-menu > .g-item { border-radius: calc(var(--r2) - var(--s1)); }
.g-menu-label { padding: var(--s2) var(--s2) var(--s1); font: 500 var(--t-xs)/var(--lh-xs) var(--f-ui); color: var(--ink-3); }
.g-tip { position: absolute; z-index: 50; padding: var(--s1) var(--s2); border-radius: var(--r0); background: var(--ink); color: var(--on-ink); font: 500 var(--t-xs)/var(--lh-xs) var(--f-ui); white-space: nowrap; pointer-events: none; box-shadow: 0 6px 16px -6px rgba(0,0,0,.5); }

/* ── one recipe each for what every component has ─────────────────────────────────────────────────── */
/* an empty place speaks in the voice, on the content's left edge, with an optional hint under it */
.g-empty { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s5) var(--s4); }
.g-empty > :first-child { font: 400 var(--t-l)/var(--lh-l) var(--f-voice); color: var(--ink-2); -webkit-text-stroke: var(--voice-stroke); paint-order: stroke fill; text-shadow: var(--voice-lift); }
.g-empty > .g-label { color: var(--ink-3); }
/* an error is a line, not a box: the alert mark and plain words saying what happened and what to do */
.g-error { display: flex; align-items: flex-start; gap: var(--s2); color: var(--bad); font: 500 var(--t-xs)/var(--lh-xs) var(--f-ui); }
.g-error > .g-i { width: 16px; height: 16px; margin-top: 0; flex: none; }
/* the folded line a decided request becomes: a mark, a word, its object, a time, at most one quiet action */
.g-folded { display: flex; align-items: center; gap: var(--s3); min-height: var(--h-l); padding: var(--s3) var(--s4); border-radius: var(--r2); }
.g-folded > .mark { flex: none; width: 20px; height: 20px; }
.g-folded > .what { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--s2); }
.g-folded > .what > b { flex: none; font-weight: 500; color: var(--ink); }
.g-folded > .what > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); }
.g-folded > time { flex: none; color: var(--ink-3); font: 400 var(--t-xs)/var(--lh-xs) var(--f-ui); font-variant-numeric: tabular-nums; }
.g-folded > .g-btn.ghost:last-child { margin-right: calc(var(--s3) * -1); }

/* ── scrolling and loading ─────────────────────────────────────────────────────────────────────────── */
.g-scroll { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; overscroll-behavior: contain; }
.g-skel { position: relative; overflow: hidden; border-radius: var(--r0); background: var(--tint-2); }
.g-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.07) 50%, transparent 80%); transform: translateX(-100%); animation: g-sweep 1.6s var(--ease-light) infinite; }
.day .g-skel::after, :root[data-theme="light"]:not(.ink) .g-skel::after { background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.7) 50%, transparent 80%); }
@keyframes g-sweep { to { transform: translateX(100%); } }
.g-spin { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-2); border-top-color: var(--ink); animation: g-rot .8s linear infinite; }
@keyframes g-rot { to { transform: rotate(360deg); } }

/* ── light lines: drawn between pieces of information ──────────────────────────────────────────────── */
.light-root { position: relative; }
.light-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.light-line { fill: none; stroke: var(--line-2); stroke-width: 1; }
.light-pulse { fill: none; stroke: var(--core); stroke-width: 1.5; stroke-linecap: round; }
.light-bloom { fill: none; stroke: var(--beam); stroke-width: 8; stroke-linecap: round; opacity: .9; }

/* ── the named motions: they live once and every component reuses them ─────────────────────────────── */
@keyframes g-rise { from { opacity: 0; transform: var(--arrive); } }
@keyframes g-materialise { from { opacity: 0; filter: blur(12px); transform: translateY(4px); } }
@keyframes g-fade { from { opacity: 0; } }
@keyframes g-pop { from { opacity: 0; transform: var(--arrive-pop); } }
@keyframes g-draw { from { stroke-dashoffset: var(--len, 24); } }

/* ── icons: drawn on one 24 grid, 1.5 stroke, round ends; masked so they take the ink of their place ─── */
.g-i { display: inline-block; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; vertical-align: middle; }
.g-i.s { width: 16px; height: 16px; }
.g-i.xs { width: 12px; height: 12px; }
.g-i.l { width: 24px; height: 24px; }
/*@icons: left out of this kit (--no-icons)*/

/* ── stillness: one law for every duration and loop ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .g-root *, .g-root *::before, .g-root *::after, .g-root { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .g-spin { animation-duration: 2.4s !important; animation-iteration-count: infinite !important; }
}
/* a transition of 0 s needs no frame to finish, so what appears by visibility is there even when frames are paused */
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; }

/* Opt-in pearl: the two-pixel graduated rim and the label are separate materials. */
.g-btn.primary.pearl { border-radius: 100px; font-weight: 500; line-height: normal; border: calc(2px * var(--pearl-frame, 0)) solid transparent; background-clip: padding-box; }
/* Optional frame: the face's shadow stops inside its transparent border. The rim is doubled before
   compositing, so a 1px black inset paints a .5px edge at 1x, 2x and 3x, without border snapping.
   With --pearl-frame absent, inset/padding/size/scale reduce to the original 0/2px/100%/1. */
.g-btn.primary.pearl::after {
  inset: calc(-2px * var(--pearl-frame, 0)) auto auto calc(-2px * var(--pearl-frame, 0));   /* anchored: rtl keeps left */
  width: calc((100% + 4px * var(--pearl-frame, 0)) * (1 + var(--pearl-frame, 0)));
  height: calc((100% + 4px * var(--pearl-frame, 0)) * (1 + var(--pearl-frame, 0)));
  padding: calc(2px * (1 + var(--pearl-frame, 0)));
  border-radius: calc(100px * (1 + var(--pearl-frame, 0)));
  box-sizing: border-box;   /* the size above counts the padding, inside .g-root or not */
  transform-origin: top left; transform: scale(calc(1 / (1 + var(--pearl-frame, 0))));
  background: var(--pearl-ring); box-shadow: var(--pearl-rim-shadow, none);
  opacity: 1; animation: none; transition: none;
}
.g-btn.primary.pearl > .g-pearl-label, .g-btn.primary.pearl > .lbl { background: var(--pearl-label); background-clip: text; -webkit-background-clip: text; color: transparent; filter: var(--pearl-label-shadow); }
.g-btn.primary.pearl.compact { height: 36px; font-weight: 400; }
/* A reusable inline sheet, with a native document flow rather than a modal. */
.g-source-sheet { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--r3) var(--r3) 0 0; background: var(--sheet-detail); backdrop-filter: var(--sheet-frost); -webkit-backdrop-filter: var(--sheet-frost); }
.g-source-sheet.white { background: var(--surface); }
.g-source-sheet > .g-grabber { flex: none; width: 66px; height: 4px; margin: 8px auto; border-radius: 10px; background: var(--sheet-handle); }

/* Optical overlays are inert; the track and thumb own the same layered material. */
.g-optics { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; display: var(--glass-layer-display); }
.g-optics > span { position: absolute; inset: 0; border-radius: inherit; }
.g-optics > .g-optic-light { inset: 0 8px; background: var(--glass-light); filter: var(--glass-light-filter); }
.g-optics > .g-optic-right { box-shadow: var(--glass-right-drop); }
.g-optics > .g-optic-right::before { background: var(--glass-right-fill), var(--glass-wash); }
.g-optics > .g-optic-right::after { box-shadow: var(--glass-right); }
.g-optics > .g-optic-left { box-shadow: var(--glass-left-drop); }
.g-optics > .g-optic-left::before { background: var(--glass-left-fill), var(--glass-wash); }
.g-optics > .g-optic-left::after { box-shadow: var(--glass-left); }
.g-optic-right::before, .g-optic-right::after, .g-optic-left::before, .g-optic-left::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.g-optic-right::before, .g-optic-left::before { mix-blend-mode: plus-lighter; }
.g-optics > .g-optic-dark { background: var(--glass-wash); box-shadow: var(--glass-dark); }
.g-optics > .g-optic-bloom { inset: 0 16px; background: var(--glass-top); filter: blur(12px); mix-blend-mode: soft-light; }

/* Source track/cell light bounds (1903:31823/31826/31833/31836). The default layers are hidden. */
.g-seg.glass > .g-optics > .g-optic-bloom { inset: 45.45% 16px -13.64%; }
.g-seg.glass > .g-optics > .g-optic-light { inset: 0 9px; }
.g-seg.glass > .thumb > .g-optics > .g-optic-bloom { inset: 46.88% 0 -12.5%; }
.g-seg.glass > .thumb > .g-optics > .g-optic-light { inset: 0; }

/* Round photo controls and the source's 80% favourite button. */
.g-optics.circle > .g-optic-bloom { inset: 46.88% 0 -12.5%; }
.g-optics.circle > .g-optic-light { inset: 0; }
.g-optics.scaled > .g-optic-bloom { inset: 0 12.8px; filter: blur(9.6px); }
.g-optics.scaled > .g-optic-light { inset: 0 6.4px; filter: blur(1.6px); }