/* GK web kit — the default Galactic Key page style.
 *
 * Link after the generated palette, which is the only colour source:
 *   <link rel="stylesheet" href="assets/brand/kit/theme.css">
 *   <link rel="stylesheet" href="assets/brand/kit/gk-kit.css">
 * Icons: assets/brand/kit/icons.svg, used as <svg class="gk-icon"><use href="#gk-i-NAME"/></svg>.
 * Display face: link assets/brand/kit/gk-font.css too (Inter Display 600, used by --gk-font-display);
 * a one-file page inlines it with the font as a data URI. Without it, headings fall back to the body stack.
 * Put class "gk-page" on <body>. Every rule here is gk- prefixed; this file holds no hex.
 * Field theme: <html data-gk-field="halo|nebula|aurora|dawn|deep">; no attribute means halo.
 * Scheme: the kit is dark (color-scheme: dark on the root). A page that offers a light theme sets its
 * own color-scheme after the kit; glass, lines, sheen, well, shade and the ink inside glass follow it
 * through light-dark(), so a light page never restates a glass recipe.
 *
 * Direction: a void-navy field with a faint colour wash, clear glass panels, white-hot core into
 * key cyan into halo blue, lavender only at tips and secondary accents. Accents are a signal, not a wash.
 */

/* ---------- semantic aliases (tints derived from the palette, never literal colour) ---------- */
:root {
  color-scheme: dark;
  --gk-bg: var(--gk-void-navy);
  --gk-surface: color-mix(in srgb, var(--gk-brushed-titanium) 55%, var(--gk-void-navy));
  --gk-raise: color-mix(in srgb, var(--gk-brushed-titanium) 85%, var(--gk-void-navy));
  /* the light scheme's ground, raised surface and text: the same palette by day */
  --gk-bg-light: color-mix(in srgb, var(--gk-star-white) 97%, var(--gk-halo-blue));
  --gk-surface-light: var(--gk-star-white);
  --gk-ink-light: color-mix(in srgb, var(--gk-void-navy) 92%, var(--gk-halo-blue));
  --gk-muted-light: color-mix(in srgb, var(--gk-void-navy) 40%, var(--gk-steel-gray));
  --gk-sheen: light-dark(color-mix(in srgb, var(--gk-void-navy) 4%, transparent), color-mix(in srgb, var(--gk-star-white) 5%, transparent));
  --gk-well: light-dark(color-mix(in srgb, var(--gk-void-navy) 5%, transparent), color-mix(in srgb, var(--gk-void-navy) 55%, transparent));
  /* the colour of a shadow: the field's navy; by day a paler halo navy */
  --gk-shade: light-dark(color-mix(in srgb, color-mix(in srgb, var(--gk-halo-blue) 30%, var(--gk-void-navy)) 42%, transparent), var(--gk-void-navy));

  /* glass: clear enough for the field to show through; the blur keeps text legible. The
     backdrop chain bends the light behind it: blurred, a little richer and crisper, never brighter.
     By day the fill is the light surface (panels, popovers) or the light ground (the bar) */
  --gk-glass: light-dark(color-mix(in srgb, var(--gk-surface-light) 80%, transparent), color-mix(in srgb, var(--gk-surface) 34%, transparent));   /* panels: sit on the field */
  --gk-glass-rail: color-mix(in srgb, var(--gk-void-navy) 56%, transparent);          /* rail: sits on the field */
  --gk-glass-bar: light-dark(color-mix(in srgb, var(--gk-bg-light) 74%, transparent), color-mix(in srgb, var(--gk-void-navy) 72%, transparent));   /* sticky bar: the page scrolls under it, so dense enough to read over a white chart */
  --gk-glass-strong: light-dark(color-mix(in srgb, var(--gk-surface-light) 80%, transparent), color-mix(in srgb, var(--gk-void-navy) 74%, transparent));   /* popover, tip, drawer: sit over charts */
  --gk-blur: blur(24px) saturate(1.45) contrast(1.06);
  --gk-blur-strong: blur(30px) saturate(1.4) contrast(1.06);
  /* a hairline of light inside the top edge, brightest in the middle and gone well before the
     corners, and a fainter hairline inside the bottom, so the pane reads as having thickness */
  --gk-specular: linear-gradient(90deg, transparent 6%, color-mix(in srgb, var(--gk-star-white) 18%, transparent) 30%, color-mix(in srgb, var(--gk-star-white) 44%, transparent) 50%, color-mix(in srgb, var(--gk-star-white) 18%, transparent) 70%, transparent 94%) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--gk-star-white) 6%, transparent) 50%, transparent) bottom / 100% 1px no-repeat;
  /* the mask that cuts a gradient down to a 1 px ring (only its alpha counts) */
  --gk-ring-mask: linear-gradient(var(--gk-void-navy) 0 0);

  /* hairlines: starlight on the night field, navy by day */
  --gk-line: light-dark(color-mix(in srgb, var(--gk-void-navy) 11%, transparent), color-mix(in srgb, var(--gk-star-white) 9%, transparent));
  --gk-line-soft: light-dark(color-mix(in srgb, var(--gk-void-navy) 7%, transparent), color-mix(in srgb, var(--gk-star-white) 5.5%, transparent));
  --gk-line-strong: light-dark(color-mix(in srgb, var(--gk-void-navy) 20%, transparent), color-mix(in srgb, var(--gk-star-white) 17%, transparent));

  --gk-ink: var(--gk-star-white);          /* headings, the answer */
  --gk-ink-2: var(--gk-canvas-text);       /* body */
  --gk-muted: var(--gk-dim-aluminum);      /* supporting detail */
  --gk-faint: var(--gk-steel-gray);        /* axes, disabled */

  --gk-accent: var(--gk-key-cyan);         /* the one "look here" signal */
  --gk-accent-2: var(--gk-nebula-lavender);/* tips, secondary accent */
  --gk-warm: var(--gk-titanium-gold);      /* warm highlight */
  --gk-on-accent: var(--gk-void-navy);
  --gk-accent-wash: color-mix(in srgb, var(--gk-key-cyan) 12%, transparent);
  --gk-focus: var(--gk-key-cyan);

  /* roles: one colour per kind of thing a figure shows; a figure never colours by anything else */
  --gk-role-entity: var(--gk-key-cyan);            /* a thing that exists: a repo, an agent, a file */
  --gk-role-relation: var(--gk-nebula-lavender);   /* a link between things */
  --gk-role-law: var(--gk-titanium-gold);          /* a rule, an ADR, a contract */
  --gk-role-state: var(--gk-orbit-blue);           /* where something stands */
  --gk-role-event: var(--gk-flare-rose);           /* something that happened */

  /* chroma ramps: seven steps from the field to white, for charts and fills. Step 1 sits just
     above the field, step 5 is the pure colour, step 7 is near white. */
  --gk-ramp-cyan-1: color-mix(in oklab, var(--gk-halo-blue) 30%, var(--gk-void-navy));
  --gk-ramp-cyan-2: color-mix(in oklab, var(--gk-halo-blue) 62%, var(--gk-void-navy));
  --gk-ramp-cyan-3: var(--gk-halo-blue);
  --gk-ramp-cyan-4: color-mix(in oklab, var(--gk-key-cyan) 55%, var(--gk-halo-blue));
  --gk-ramp-cyan-5: var(--gk-key-cyan);
  --gk-ramp-cyan-6: color-mix(in oklab, var(--gk-key-cyan) 55%, var(--gk-star-white));
  --gk-ramp-cyan-7: var(--gk-star-white);
  --gk-ramp-lavender-1: color-mix(in oklab, var(--gk-nebula-lavender) 20%, var(--gk-void-navy));
  --gk-ramp-lavender-2: color-mix(in oklab, var(--gk-nebula-lavender) 38%, var(--gk-void-navy));
  --gk-ramp-lavender-3: color-mix(in oklab, var(--gk-nebula-lavender) 58%, var(--gk-void-navy));
  --gk-ramp-lavender-4: color-mix(in oklab, var(--gk-nebula-lavender) 79%, var(--gk-void-navy));
  --gk-ramp-lavender-5: var(--gk-nebula-lavender);
  --gk-ramp-lavender-6: color-mix(in oklab, var(--gk-nebula-lavender) 55%, var(--gk-star-white));
  --gk-ramp-lavender-7: color-mix(in oklab, var(--gk-nebula-lavender) 18%, var(--gk-star-white));
  --gk-ramp-gold-1: color-mix(in oklab, var(--gk-titanium-gold) 20%, var(--gk-void-navy));
  --gk-ramp-gold-2: color-mix(in oklab, var(--gk-titanium-gold) 38%, var(--gk-void-navy));
  --gk-ramp-gold-3: color-mix(in oklab, var(--gk-titanium-gold) 58%, var(--gk-void-navy));
  --gk-ramp-gold-4: color-mix(in oklab, var(--gk-titanium-gold) 79%, var(--gk-void-navy));
  --gk-ramp-gold-5: var(--gk-titanium-gold);
  --gk-ramp-gold-6: color-mix(in oklab, var(--gk-titanium-gold) 55%, var(--gk-star-white));
  --gk-ramp-gold-7: color-mix(in oklab, var(--gk-titanium-gold) 18%, var(--gk-star-white));
  --gk-ramp-blue-1: color-mix(in oklab, var(--gk-orbit-blue) 20%, var(--gk-void-navy));
  --gk-ramp-blue-2: color-mix(in oklab, var(--gk-orbit-blue) 38%, var(--gk-void-navy));
  --gk-ramp-blue-3: color-mix(in oklab, var(--gk-orbit-blue) 58%, var(--gk-void-navy));
  --gk-ramp-blue-4: color-mix(in oklab, var(--gk-orbit-blue) 79%, var(--gk-void-navy));
  --gk-ramp-blue-5: var(--gk-orbit-blue);
  --gk-ramp-blue-6: color-mix(in oklab, var(--gk-orbit-blue) 55%, var(--gk-star-white));
  --gk-ramp-blue-7: color-mix(in oklab, var(--gk-orbit-blue) 18%, var(--gk-star-white));
  --gk-ramp-rose-1: color-mix(in oklab, var(--gk-flare-rose) 20%, var(--gk-void-navy));
  --gk-ramp-rose-2: color-mix(in oklab, var(--gk-flare-rose) 38%, var(--gk-void-navy));
  --gk-ramp-rose-3: color-mix(in oklab, var(--gk-flare-rose) 58%, var(--gk-void-navy));
  --gk-ramp-rose-4: color-mix(in oklab, var(--gk-flare-rose) 79%, var(--gk-void-navy));
  --gk-ramp-rose-5: var(--gk-flare-rose);
  --gk-ramp-rose-6: color-mix(in oklab, var(--gk-flare-rose) 55%, var(--gk-star-white));
  --gk-ramp-rose-7: color-mix(in oklab, var(--gk-flare-rose) 18%, var(--gk-star-white));

  /* shape */
  --gk-r: 6px;
  --gk-r-s: 4px;

  /* glow recipes: white-hot core -> key cyan -> halo blue -> fully transparent.
     The core keeps full strength; the halos around strokes and text run a fifth lower. */
  --gk-glow-core: radial-gradient(closest-side, var(--gk-star-white), color-mix(in srgb, var(--gk-key-cyan) 85%, transparent) 28%, color-mix(in srgb, var(--gk-halo-blue) 45%, transparent) 58%, transparent);
  --gk-glow-soft: 0 0 10px -2px color-mix(in srgb, var(--gk-key-cyan) 56%, transparent), 0 0 26px -6px color-mix(in srgb, var(--gk-halo-blue) 72%, transparent);
  --gk-glow-text: 0 0 18px color-mix(in srgb, var(--gk-key-cyan) 36%, transparent), 0 0 2px color-mix(in srgb, var(--gk-star-white) 32%, transparent);
  --gk-glow-icon: drop-shadow(0 0 6px color-mix(in srgb, var(--gk-key-cyan) 54%, transparent));

  /* motion: the living mark's verbs (absorb, compose, release, breathe) as four curves and a few speeds.
     Only transform, opacity and stroke-dashoffset ever animate. JS reads these too. */
  --gk-ease: cubic-bezier(.16, 1, .3, 1);           /* arrive: one exponential ease-out, the default */
  --gk-ease-settle: cubic-bezier(.22, 1.4, .36, 1); /* compose: lands 5% past its place, then settles */
  --gk-ease-absorb: cubic-bezier(.7, 0, .2, 1);     /* absorb: gathers, then is drawn in toward a point */
  --gk-ease-release: cubic-bezier(.4, 0, 1, 1);     /* release: lets go, faster as it leaves */
  --gk-t-press: 70ms;     /* a press going down */
  --gk-t-hover: 140ms;    /* hover and press feedback */
  --gk-t-move: 300ms;     /* a mark or panel changing place; a press settling back */
  --gk-t-enter: 480ms;    /* something arriving */
  --gk-t-release: 200ms;  /* something leaving: quicker than it came */
  --gk-t-icon: 560ms;     /* an icon's gesture on hover or focus */
  --gk-t-pulse: 2200ms;   /* the mark's heartbeat (PULSE in entity.ts): live lamps, the orbiting light */
  --gk-stagger: 45ms;     /* between parts that arrive together */

  --gk-font: "Inter var", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  /* display: names and headings at 20 px and up, tracked -0.04em; body text keeps --gk-font at 0 */
  --gk-font-display: "Inter Display", var(--gk-font);
  --gk-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --gk-rail-w: 264px;
}
/* text inside glass follows the scheme, so a light page's glass reads dark on light. The page's own
   --gk-ink and --gk-accent stay as declared above: dark art outside glass keeps its light. */
.gk-bar, .gk-pop, .gk-panel, .gk-tip, .gk-tipped::before, .gk-help-text, .gk-tour {
  --gk-ink: light-dark(var(--gk-ink-light), var(--gk-star-white));
  --gk-muted: light-dark(var(--gk-muted-light), var(--gk-dim-aluminum));
}
/* the hidden attribute always hides: kit classes set display (.gk-btn is inline-flex), which would
   otherwise beat the browser's own [hidden] rule. until-found stays findable by in-page search. */
[hidden]:not([hidden="until-found"]) { display: none !important; }

/* ---------- field themes: a faint multi-stop wash over void navy, picked by one attribute ----------
   --gk-field is the wash; --gk-tint and --gk-tint-2 are the field's two lights, which tint the glass.
   Washes stay under a quarter strength so body text keeps AA contrast anywhere on the page. */
:root, [data-gk-field="halo"] {
  --gk-tint: var(--gk-halo-blue); --gk-tint-2: var(--gk-nebula-lavender);
  --gk-field:
    radial-gradient(78% 80% at 8% -12%, color-mix(in srgb, var(--gk-halo-blue) 22%, transparent), color-mix(in srgb, var(--gk-halo-blue) 9%, transparent) 38%, transparent 64%),
    radial-gradient(62% 70% at 100% 0%, color-mix(in srgb, var(--gk-nebula-lavender) 9%, transparent), transparent 62%),
    radial-gradient(70% 84% at 50% 112%, color-mix(in srgb, var(--gk-key-cyan) 7%, transparent), transparent 66%);
}
[data-gk-field="nebula"] {
  --gk-tint: var(--gk-nebula-lavender); --gk-tint-2: var(--gk-halo-blue);
  --gk-field:
    radial-gradient(84% 80% at 96% -8%, color-mix(in srgb, var(--gk-nebula-lavender) 22%, transparent), color-mix(in srgb, var(--gk-nebula-lavender) 9%, transparent) 42%, transparent 72%),
    radial-gradient(74% 72% at 0% 106%, color-mix(in srgb, var(--gk-halo-blue) 22%, transparent), transparent 66%),
    radial-gradient(46% 42% at 34% 30%, color-mix(in srgb, var(--gk-key-cyan) 6%, transparent), transparent 70%);
}
[data-gk-field="aurora"] {
  --gk-tint: var(--gk-key-cyan); --gk-tint-2: var(--gk-nebula-lavender);
  --gk-field:
    linear-gradient(158deg, transparent 4%, color-mix(in srgb, var(--gk-key-cyan) 9%, transparent) 22%, color-mix(in srgb, var(--gk-halo-blue) 19%, transparent) 40%, color-mix(in srgb, var(--gk-nebula-lavender) 12%, transparent) 60%, transparent 84%),
    radial-gradient(62% 58% at 88% 6%, color-mix(in srgb, var(--gk-halo-blue) 15%, transparent), transparent 70%);
}
[data-gk-field="dawn"] {
  --gk-tint: var(--gk-titanium-gold); --gk-tint-2: var(--gk-halo-blue);
  --gk-field:
    radial-gradient(100% 70% at 50% 106%, color-mix(in srgb, var(--gk-titanium-gold) 16%, transparent), color-mix(in srgb, var(--gk-titanium-gold) 6%, transparent) 46%, transparent 74%),
    radial-gradient(76% 72% at 0% -10%, color-mix(in srgb, var(--gk-halo-blue) 20%, transparent), transparent 64%),
    radial-gradient(52% 52% at 100% 36%, color-mix(in srgb, var(--gk-nebula-lavender) 8%, transparent), transparent 70%);
}
[data-gk-field="deep"] {
  --gk-tint: var(--gk-halo-blue); --gk-tint-2: var(--gk-halo-blue);
  --gk-field:
    radial-gradient(66% 54% at 50% -14%, color-mix(in srgb, var(--gk-halo-blue) 17%, transparent), color-mix(in srgb, var(--gk-halo-blue) 6%, transparent) 46%, transparent 72%);
}
/* recipes that read the field's tint: declared wherever a field is, so a nested field re-tints its glass */
:root, [data-gk-field] {
  /* light bent by the pane's thickness: a soft caustic gathered under the top edge, the field's
     second light dispersed along the bottom edge and pooled in the far corner; the middle stays clear */
  --gk-refract:
    linear-gradient(180deg, color-mix(in srgb, var(--gk-star-white) 5%, transparent), transparent 22px),
    linear-gradient(0deg, color-mix(in srgb, var(--gk-tint-2) 7%, transparent), transparent 16px),
    radial-gradient(90% 70% at 100% 100%, color-mix(in srgb, var(--gk-tint-2) 5%, transparent), transparent 70%);
  /* the glass edge, lit from the top-left: a faint white, fading, then a hint of the field's light */
  --gk-edge: linear-gradient(160deg, color-mix(in srgb, var(--gk-star-white) 20%, transparent), color-mix(in srgb, var(--gk-star-white) 6%, transparent) 34%, color-mix(in srgb, var(--gk-star-white) 3%, transparent) 66%, color-mix(in srgb, var(--gk-tint) 22%, transparent));
  /* depth: a tight contact shadow, a soft mid shadow and a wide faint one, never a zero-offset
     coloured halo alone; the inset tint is light bending in the glass. --gk-shade is the colour of the
     dark, and follows the scheme (the field's navy; a paler halo navy by day) */
  --gk-shadow: inset 0 -12px 24px -22px color-mix(in srgb, var(--gk-tint) 28%, transparent),
    0 1px 2px -1px color-mix(in srgb, var(--gk-shade) 60%, transparent),
    0 12px 28px -16px color-mix(in srgb, var(--gk-shade) 70%, transparent),
    0 36px 72px -36px color-mix(in srgb, var(--gk-shade) 80%, transparent);
  --gk-shadow-pop: inset 0 -12px 24px -22px color-mix(in srgb, var(--gk-tint) 28%, transparent),
    0 2px 4px -2px color-mix(in srgb, var(--gk-shade) 70%, transparent),
    0 18px 40px -18px color-mix(in srgb, var(--gk-shade) 80%, transparent),
    0 48px 96px -40px color-mix(in srgb, var(--gk-shade) 90%, transparent);
}

/* ---------- page field: void navy under the chosen wash, a few far stars; no grid ---------- */
.gk-page {
  margin: 0; min-height: 100vh; color: var(--gk-ink); font: 15px/1.6 var(--gk-font); -webkit-font-smoothing: antialiased;
  background: var(--gk-field), var(--gk-bg);
  background-attachment: fixed;
}
/* a field painted into one box, for previews and hero areas */
.gk-field { background: var(--gk-field), var(--gk-bg); }
.gk-page::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .7;
  background:
    radial-gradient(1.2px 1.2px at 14% 22%, var(--gk-star-white), transparent),
    radial-gradient(1px 1px at 31% 71%, var(--gk-key-cyan), transparent),
    radial-gradient(1.4px 1.4px at 58% 12%, var(--gk-star-white), transparent),
    radial-gradient(1px 1px at 77% 46%, var(--gk-nebula-lavender), transparent),
    radial-gradient(1.2px 1.2px at 89% 83%, var(--gk-star-white), transparent),
    radial-gradient(1px 1px at 44% 93%, var(--gk-key-cyan), transparent),
    radial-gradient(1px 1px at 6% 61%, var(--gk-star-white), transparent);
}
.gk-page ::selection { background: color-mix(in srgb, var(--gk-key-cyan) 32%, transparent); color: var(--gk-ink); }
.gk-page :focus-visible { outline: 2px solid var(--gk-focus); outline-offset: 2px; border-radius: var(--gk-r-s); }
.gk-num { font-variant-numeric: tabular-nums; }

/* ---------- icon: one stroke set, sized by modifier ---------- */
.gk-icon { display: inline-block; flex: none; width: 16px; height: 16px; vertical-align: -3px; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gk-icon--xs { width: 13px; height: 13px; vertical-align: -2px; }
.gk-icon--sm { width: 14px; height: 14px; vertical-align: -2px; }
.gk-icon--md { width: 18px; height: 18px; vertical-align: -4px; }
.gk-icon--lg { width: 22px; height: 22px; vertical-align: -5px; }
.gk-icon--glow { color: var(--gk-accent); filter: var(--gk-glow-icon); }

/* ---------- icon motion: each icon moves with its meaning on hover or focus ----------
   In icons.svg each moving part carries one verb class and its own numbers as custom properties:
   --gk-mx, --gk-my move (grid units, px), --gk-mr turn, --gk-msx, --gk-msy scale, --gk-mk lean,
   --gk-mox, --gk-moy the point it moves about (default the grid's centre), --gk-mi its stagger step;
   a host may set --gk-md to wait before the whole gesture (a wave across a grid).
   A host plays them by naming each verb's keyframes, which the parts inherit through <use>: the kit's
   controls and rows, gk-icon-host on any box, or gk-icon--play on an icon or any box around it. Every gesture ends
   where it began, so at rest nothing runs. Needs the sprite inlined in the page; a linked sprite stays still. */
:is(.gk-btn, .gk-chip, .gk-pill, .gk-seg button, .gk-nav a, .gk-rows > li, .gk-tablist [role="tab"], .gk-accordion > summary, .gk-icon-host):is(:hover, :focus-visible),
.gk-icon-host:focus-within, .gk-icon--play {
  --gk-m-nudge: gk-m-nudge; --gk-m-turn: gk-m-turn; --gk-m-draw: gk-m-draw; --gk-m-scan: gk-m-scan;
  --gk-m-absorb: gk-m-absorb; --gk-m-compose: gk-m-compose; --gk-m-release: gk-m-release; --gk-m-breathe: gk-m-breathe; }
:is(.gk-m-nudge, .gk-m-turn, .gk-m-draw, .gk-m-scan, .gk-m-absorb, .gk-m-compose, .gk-m-release, .gk-m-breathe) {
  transform-box: view-box; transform-origin: var(--gk-mox, 12px) var(--gk-moy, 12px);
  animation-duration: var(--gk-t-icon); animation-fill-mode: backwards; animation-delay: calc(var(--gk-md, 0ms) + var(--gk-mi, 0) * var(--gk-stagger)); }
/* nudge: toward its meaning and back (an arrow points, a flag waves, a key turns a little) */
.gk-m-nudge { animation-name: var(--gk-m-nudge, none); animation-timing-function: var(--gk-ease); }
@keyframes gk-m-nudge { 38% { animation-timing-function: var(--gk-ease-settle);
  transform: translate(var(--gk-mx, 0px), var(--gk-my, 0px)) rotate(var(--gk-mr, 0deg)) skewY(var(--gk-mk, 0deg)) scale(var(--gk-msx, 1), var(--gk-msy, var(--gk-msx, 1))); } }
/* turn: a whole turn (or --gk-mr) that lands a touch past and settles */
.gk-m-turn { animation-name: var(--gk-m-turn, none); animation-timing-function: var(--gk-ease-settle); }
@keyframes gk-m-turn { from { transform: rotate(0deg); } to { transform: rotate(var(--gk-mr, 1turn)); } }
/* draw: the stroke is drawn on from its start (the part needs pathLength="1") */
.gk-m-draw { stroke-dasharray: 1 1; animation-name: var(--gk-m-draw, none); animation-timing-function: var(--gk-ease); }
@keyframes gk-m-draw { from { stroke-dashoffset: 1; } }
/* scan: looks one way, then the other, then settles */
.gk-m-scan { animation-name: var(--gk-m-scan, none); animation-timing-function: var(--gk-ease-absorb); }
@keyframes gk-m-scan { 30% { transform: translate(calc(-1 * var(--gk-mx, 2px)), calc(-1 * var(--gk-my, 0px))); }
  66% { transform: translate(var(--gk-mx, 2px), var(--gk-my, 0px)); animation-timing-function: var(--gk-ease-settle); } }
/* absorb: drawn in toward a point, then let back out */
.gk-m-absorb { animation-name: var(--gk-m-absorb, none); animation-timing-function: var(--gk-ease-absorb); }
@keyframes gk-m-absorb { 45% { opacity: .55; animation-timing-function: var(--gk-ease-settle);
  transform: translate(var(--gk-mx, 0px), var(--gk-my, 0px)) scale(var(--gk-msx, .62), var(--gk-msy, var(--gk-msx, .62))); } }
/* compose: assembled out of a point (the star), in stagger order */
.gk-m-compose { animation-name: var(--gk-m-compose, none); animation-timing-function: var(--gk-ease-settle); }
@keyframes gk-m-compose { from { opacity: 0;
  transform: translate(var(--gk-mx, 0px), var(--gk-my, 0px)) scale(var(--gk-msx, .2), var(--gk-msy, var(--gk-msx, .2))); } }
/* release: lets go along its way, fading, and comes back in from behind */
.gk-m-release { animation-name: var(--gk-m-release, none); animation-timing-function: var(--gk-ease-release); }
@keyframes gk-m-release { 42% { transform: translate(var(--gk-mx, 0px), var(--gk-my, 0px)); opacity: 0; }
  43% { transform: translate(calc(-.7 * var(--gk-mx, 0px)), calc(-.7 * var(--gk-my, 0px))); opacity: 0; animation-timing-function: var(--gk-ease-settle); } }
/* breathe: one beat of the mark's pulse, a quick rise and a slow fall */
.gk-m-breathe { animation-name: var(--gk-m-breathe, none); animation-timing-function: var(--gk-ease); }
@keyframes gk-m-breathe { 18% { transform: scale(var(--gk-msx, 1.3), var(--gk-msy, var(--gk-msx, 1.3))); } }
/* a lit icon (glowing, an on nav link's, or a hovered gk-icon-host--lit's) blooms in and settles */
.gk-icon-host--lit:is(:hover, :focus-visible) .gk-icon { color: var(--gk-accent); filter: var(--gk-glow-icon); }
.gk-icon--glow, .gk-nav a.on .gk-icon, .gk-icon-host--lit:is(:hover, :focus-visible) .gk-icon { animation: gk-bloom var(--gk-t-enter) var(--gk-ease-settle) backwards; }
@keyframes gk-bloom { from { transform: scale(.7); opacity: .3; } }

/* ---------- glass panel: the one surface; never nest a panel in a panel ----------
   Clear glass: a thin fill so the field shows through, a backdrop blur that bends rather than
   tints, a specular hairline inside the top edge, refracted light along the edges, the field's
   tint faint in one corner, and an edge-lit 1 px ring drawn over the border (::before).
   Border colour still marks state. */
.gk-panel {
  position: relative; border: 1px solid var(--gk-line-soft); border-radius: var(--gk-r); box-shadow: var(--gk-shadow);
  background:
    var(--gk-specular), var(--gk-refract),
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--gk-tint) 6%, transparent), transparent 55%),
    var(--gk-glass);
  -webkit-backdrop-filter: var(--gk-blur); backdrop-filter: var(--gk-blur);
}
.gk-panel::before, .gk-pop::before, .gk-tip::before {
  content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; pointer-events: none; background: var(--gk-edge);
  -webkit-mask: var(--gk-ring-mask) content-box, var(--gk-ring-mask); -webkit-mask-composite: xor;
  mask: var(--gk-ring-mask) content-box exclude, var(--gk-ring-mask);
}
.gk-panel--lit { border-color: color-mix(in srgb, var(--gk-key-cyan) 55%, transparent); box-shadow: var(--gk-glow-soft), var(--gk-shadow); }
/* solid: where nothing lit sits behind the panel, glass only reads as a dark slab; use a plain surface */
.gk-panel--solid { background: var(--gk-specular), var(--gk-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- the "look here" mark: the one number or phrase that matters ---------- */
.gk-mark { color: var(--gk-accent); font-weight: 680; text-shadow: var(--gk-glow-text); }

/* ---------- glow: a point of pure light (white core -> cyan -> transparent), additive ---------- */
.gk-glow { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gk-glow-core); mix-blend-mode: screen; }
.gk-glow--live { animation: gk-breathe calc(2 * var(--gk-t-pulse)) var(--gk-ease-absorb) infinite; }
@keyframes gk-breathe { 50% { transform: scale(1.45); opacity: .75; } }

/* ---------- star-key brand mark: a four-point flare where the strokes meet ---------- */
.gk-brand { display: flex; gap: 12px; align-items: center; padding: 0 6px; color: inherit; text-decoration: none; }
.gk-brand b { display: block; font-size: 15px; letter-spacing: -.01em; }
.gk-brand small { display: block; font-size: 12px; color: var(--gk-muted); }
.gk-brand-mark { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; color: var(--gk-accent); }
.gk-brand-mark::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: var(--gk-glow-core); opacity: .26; mix-blend-mode: screen; pointer-events: none; }
.gk-brand-mark svg { position: relative; width: 100%; height: 100%; overflow: visible; }

/* ---------- small marks: the gk and the bots at 16 to 40 px (assets/brand/kit/marks.svg) ----------
   <svg class="gk-logo" width="N" height="N"><use href="#mark-NAME-N"/></svg>, N in 16 20 24 32 40, at its own size
   only. The sprite reads these; marks.py resolves them for the favicon and the avatar, so keep them to
   var(--gk-…), color-mix(in srgb, …) and transparent. On a light ground the light turns to ink. */
:root {
  --gk-mark-body: var(--gk-key-cyan);
  --gk-mark-core: var(--gk-star-white);
  --gk-mark-tip: var(--gk-nebula-lavender);
  --gk-mark-star: var(--gk-star-white);
  --gk-mark-merge: color-mix(in srgb, var(--gk-key-cyan) 25%, var(--gk-star-white));
  --gk-mark-skill: var(--gk-titanium-gold);
  --gk-mark-grievance: var(--gk-nebula-lavender);
}
[data-gk-ground="light"] {
  --gk-mark-body: var(--gk-deep-blue);
  --gk-mark-core: var(--gk-mark-body);
  --gk-mark-tip: color-mix(in srgb, var(--gk-nebula-lavender) 62%, var(--gk-void-navy));
  --gk-mark-star: var(--gk-mark-body);
  --gk-mark-merge: color-mix(in srgb, var(--gk-halo-blue) 70%, var(--gk-void-navy));
  --gk-mark-skill: color-mix(in srgb, var(--gk-void-navy) 40%, color-mix(in srgb, var(--gk-titanium-gold) 50%, var(--gk-warning-amber)));
  --gk-mark-grievance: color-mix(in srgb, var(--gk-nebula-lavender) 62%, var(--gk-void-navy));
}
.gk-logo { display: inline-block; flex: none; vertical-align: middle; overflow: visible; }

/* ---------- rail: fixed section nav with a progress line; glass with a lit right edge ---------- */
.gk-rail {
  position: fixed; z-index: 25; top: 0; bottom: 0; left: 0; width: var(--gk-rail-w); display: flex; flex-direction: column; gap: 20px; padding: 22px 16px 18px; overflow-y: auto;
  border-right: 1px solid var(--gk-line); border-image: linear-gradient(180deg, color-mix(in srgb, var(--gk-star-white) 26%, transparent), color-mix(in srgb, var(--gk-star-white) 7%, transparent) 40%, color-mix(in srgb, var(--gk-tint) 28%, transparent)) 1;
  background: var(--gk-refract), var(--gk-glass-rail);
  -webkit-backdrop-filter: var(--gk-blur); backdrop-filter: var(--gk-blur);
}
.gk-nav { position: relative; display: grid; gap: 2px; padding-left: 12px; }
.gk-nav-track { position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: var(--gk-r-s); background: var(--gk-line-soft); overflow: hidden; }
.gk-nav-track i { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: linear-gradient(180deg, var(--gk-halo-blue), var(--gk-key-cyan) 85%, var(--gk-star-white)); box-shadow: 0 0 10px color-mix(in srgb, var(--gk-key-cyan) 80%, transparent); }
.gk-nav a { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--gk-r-s); border: 1px solid transparent; color: var(--gk-muted); text-decoration: none; font-size: 13.5px; font-weight: 520;
  transition: background-color var(--gk-t-hover) var(--gk-ease), color var(--gk-t-hover) var(--gk-ease), border-color var(--gk-t-hover) var(--gk-ease); }
.gk-nav a:hover { color: var(--gk-ink); background: var(--gk-sheen); }
.gk-nav a.on { color: var(--gk-ink); background: var(--gk-accent-wash); border-color: var(--gk-line); }
.gk-nav a.on .gk-icon { color: var(--gk-accent); filter: var(--gk-glow-icon); }

/* ---------- sticky glass bar: lit along its lower edge ---------- */
.gk-bar { position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--gk-line); border-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gk-star-white) 22%, transparent) 20%, color-mix(in srgb, var(--gk-tint) 30%, transparent) 60%, transparent) 1;
  background: var(--gk-refract), var(--gk-glass-bar);
  -webkit-backdrop-filter: var(--gk-blur); backdrop-filter: var(--gk-blur); }

/* ---------- controls ---------- */
.gk-btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 1px solid var(--gk-line-strong); border-radius: var(--gk-r-s); background: var(--gk-sheen); color: var(--gk-ink); font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer;
  transition: background-color var(--gk-t-hover) var(--gk-ease), border-color var(--gk-t-hover) var(--gk-ease), box-shadow var(--gk-t-hover) var(--gk-ease), transform var(--gk-t-move) var(--gk-ease-settle); }
.gk-btn:hover { border-color: color-mix(in srgb, var(--gk-star-white) 30%, transparent); background: color-mix(in srgb, var(--gk-star-white) 9%, transparent); }
.gk-btn .gk-icon { color: var(--gk-accent); }
/* primary: lit from inside, cyan glass with a white-hot edge */
.gk-btn--primary { border-color: color-mix(in srgb, var(--gk-key-cyan) 70%, transparent); font-weight: 650;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gk-key-cyan) 30%, transparent), color-mix(in srgb, var(--gk-halo-blue) 26%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gk-star-white) 35%, transparent), 0 6px 22px -10px color-mix(in srgb, var(--gk-halo-blue) 80%, transparent); }
.gk-btn--primary .gk-icon { color: var(--gk-star-white); }
.gk-btn--primary:hover { border-color: var(--gk-key-cyan); background: linear-gradient(180deg, color-mix(in srgb, var(--gk-key-cyan) 40%, transparent), color-mix(in srgb, var(--gk-halo-blue) 34%, transparent)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gk-star-white) 45%, transparent), var(--gk-glow-soft); }
.gk-btn--quiet { height: auto; padding: 4px 6px; border-color: transparent; background: none; color: var(--gk-muted); }
.gk-btn--quiet:hover { color: var(--gk-ink); background: none; border-color: transparent; }
/* icon-only square: retired for new work. A button shows its words (brand.md "Words, help and a key"), and
   the check fails one that shows none; a tight bar takes gk-btn--stack instead */
.gk-btn--icon { width: 34px; padding: 0; justify-content: center; }
/* stacked: the icon over a word or two, for a tight bar such as a phone's toolbar; 44 px or more each way */
.gk-btn--stack { flex-direction: column; justify-content: center; gap: 2px; height: auto; min-height: 44px; min-width: 44px; padding: 4px 8px; font-size: 12.5px; line-height: 1.2; white-space: normal; text-align: center; }

/* chip: a small inline tag, optionally a button */
.gk-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 26px; padding: 3px 9px 3px 8px; overflow: hidden; border: 1px solid var(--gk-line-soft); border-radius: var(--gk-r-s); background: var(--gk-sheen); color: var(--gk-ink-2); font: inherit; font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
button.gk-chip { cursor: pointer; transition: background-color var(--gk-t-hover) var(--gk-ease), border-color var(--gk-t-hover) var(--gk-ease), color var(--gk-t-hover) var(--gk-ease), transform var(--gk-t-move) var(--gk-ease-settle); }
button.gk-chip:hover, .gk-chip[aria-pressed="true"] { color: var(--gk-ink); border-color: var(--gk-line-strong); background: color-mix(in srgb, var(--gk-star-white) 9%, transparent); }

/* pill: a filter trigger that opens a bounded searchable popover */
.gk-pill { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: var(--gk-r-s); border: 1px solid var(--gk-line); background: var(--gk-sheen); color: var(--gk-ink); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; max-width: 260px;
  transition: border-color var(--gk-t-hover) var(--gk-ease), background-color var(--gk-t-hover) var(--gk-ease), transform var(--gk-t-move) var(--gk-ease-settle); }
.gk-pill:hover { border-color: var(--gk-line-strong); background: color-mix(in srgb, var(--gk-star-white) 7%, transparent); }
.gk-pill .gk-icon { color: var(--gk-muted); }
.gk-pill.on { border-color: color-mix(in srgb, var(--gk-key-cyan) 60%, transparent); background: var(--gk-accent-wash); }
.gk-pill.on .gk-icon { color: var(--gk-accent); }

/* segmented control: small finite choices */
.gk-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--gk-r); border: 1px solid var(--gk-line); background: var(--gk-well); }
.gk-seg button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--gk-r-s); background: transparent; color: var(--gk-ink-2); font: inherit; font-size: 12.5px; white-space: nowrap; cursor: pointer;
  transition: background-color var(--gk-t-hover) var(--gk-ease), color var(--gk-t-hover) var(--gk-ease), transform var(--gk-t-move) var(--gk-ease-settle); }
.gk-seg button:hover { color: var(--gk-ink); background: var(--gk-sheen); }
.gk-seg button[aria-pressed="true"] { color: var(--gk-ink); font-weight: 600; border-color: var(--gk-line-strong); background: color-mix(in srgb, var(--gk-star-white) 10%, transparent); box-shadow: inset 0 1px 0 var(--gk-sheen); }
/* press and settle: a control dips under the pointer quickly, then springs back into place. A bare control (an
   unboxed inline action, a plain word button, a link that acts) takes the same press and the kit's hover timing
   with gk-press, without taking the kit's box */
.gk-press { transition: color var(--gk-t-hover) var(--gk-ease), background-color var(--gk-t-hover) var(--gk-ease), transform var(--gk-t-move) var(--gk-ease-settle); }
:is(.gk-btn, button.gk-chip, .gk-pill, .gk-seg button, .gk-tablist [role="tab"], .gk-help, .gk-press):active:not(:disabled) { transform: scale(.96); transition-duration: var(--gk-t-press); transition-timing-function: var(--gk-ease); }

/* text field */
.gk-input { width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--gk-line); border-radius: var(--gk-r-s); background: var(--gk-well); color: var(--gk-ink); font: inherit; font-size: 13.5px;
  transition: border-color var(--gk-t-hover) var(--gk-ease), box-shadow var(--gk-t-hover) var(--gk-ease); }
.gk-input:focus { outline: none; border-color: color-mix(in srgb, var(--gk-key-cyan) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gk-key-cyan) 15%, transparent); }

/* status tag: a word with its icon, tinted by --c */
.gk-tag { --c: var(--gk-ink-2); display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius: var(--gk-r-s); background: color-mix(in srgb, var(--c) 11%, transparent); color: var(--c); font-size: 12px; font-weight: 620; white-space: nowrap; }
.gk-tag--dashed { border-style: dashed; background: transparent; }

/* stat: one number that answers, its label, one line of support */
.gk-stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gk-stat-value { font-size: 44px; line-height: 1; font-weight: 760; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.gk-stat-value.gk-mark { font-weight: 760; }
.gk-stat-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--gk-ink); }
.gk-stat-note { font-size: 13px; line-height: 1.5; color: var(--gk-muted); }

/* colour dot for a series or group; --lit makes it a status lamp tinted by --c, --ring an empty "planned" one.
   A lamp that is working beats with the mark: --live, a quick rise and slow fall every --gk-t-pulse;
   --wait, a slow breath on every second beat. A page pauses them while they are off screen. */
.gk-dot { display: inline-block; width: 9px; height: 9px; flex: none; border-radius: 50%; }
.gk-dot--lit { --c: var(--gk-key-cyan); background: radial-gradient(closest-side, color-mix(in srgb, var(--gk-star-white) 55%, var(--c)), var(--c));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent), 0 0 9px color-mix(in srgb, var(--c) 64%, transparent); }
.gk-dot--ring { border: 1.5px dashed var(--gk-faint); }
.gk-dot--live, .gk-dot--wait, .gk-ind--live { position: relative; }
.gk-dot--live::after, .gk-dot--wait::after, .gk-ind--live::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 70%, transparent), color-mix(in srgb, var(--c) 22%, transparent) 55%, transparent); }
.gk-dot--live::after, .gk-ind--live::after { animation: gk-beat var(--gk-t-pulse) linear infinite; }
.gk-dot--wait::after { animation: gk-breathe calc(2 * var(--gk-t-pulse)) var(--gk-ease-absorb) infinite; }
@keyframes gk-beat { from { transform: scale(.45); animation-timing-function: var(--gk-ease); } 12% { transform: scale(1); opacity: 1; animation-timing-function: var(--gk-ease); } to { transform: scale(1.7); opacity: 0; } }

/* ---------- instruments: the heads-up-display layer. Hairlines a few stops under the content they frame ---------- */
/* corner brackets on any box; size and colour by --gk-bk and --gk-bk-c */
.gk-bracket { --gk-bk: 14px; --gk-bk-c: var(--gk-line-strong); position: relative; }
.gk-bracket::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-repeat: no-repeat;
  background-image: linear-gradient(var(--gk-bk-c) 0 0), linear-gradient(var(--gk-bk-c) 0 0), linear-gradient(var(--gk-bk-c) 0 0), linear-gradient(var(--gk-bk-c) 0 0),
    linear-gradient(var(--gk-bk-c) 0 0), linear-gradient(var(--gk-bk-c) 0 0), linear-gradient(var(--gk-bk-c) 0 0), linear-gradient(var(--gk-bk-c) 0 0);
  background-size: var(--gk-bk) 1px, 1px var(--gk-bk), var(--gk-bk) 1px, 1px var(--gk-bk), var(--gk-bk) 1px, 1px var(--gk-bk), var(--gk-bk) 1px, 1px var(--gk-bk);
  background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom; }
/* a hairline ring with tick marks, tinted by --c; --spin sends a light round it, one orbit a heartbeat (a working indicator) */
.gk-ring { --c: var(--gk-key-cyan); display: inline-block; flex: none; width: 24px; aspect-ratio: 1; border-radius: 50%; vertical-align: middle;
  border: 1px solid color-mix(in srgb, var(--c) 36%, transparent);
  background: repeating-conic-gradient(color-mix(in srgb, var(--c) 70%, transparent) 0 2deg, transparent 2deg 30deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 4px), var(--gk-void-navy) calc(100% - 3.5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 4px), var(--gk-void-navy) calc(100% - 3.5px)); }
.gk-ring--spin { position: relative; }
.gk-ring--spin::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(transparent 0 52%, color-mix(in srgb, var(--c) 30%, transparent) 76%, var(--c) 94%, var(--gk-star-white) 99.2%, transparent 99.6%);
  animation: gk-orbit var(--gk-t-pulse) linear infinite; }
@keyframes gk-orbit { to { transform: rotate(1turn); } }
/* arrivals: meters, counts and arcs come in when they first paint (inside gk-arrive, when the page adds gk-in) */
@keyframes gk-rise { from { transform: translateY(.45em); opacity: 0; } }
@keyframes gk-pop { from { transform: scale(0); opacity: 0; } }
@keyframes gk-fill { from { transform: scaleX(0); } }
@keyframes gk-sweep { from { transform: rotate(-.3turn) scale(.8); opacity: 0; } }
/* a lit arc on a faint track: a share of a whole, --v from 0 to 1 */
.gk-arc { --c: var(--gk-key-cyan); --v: 0; display: inline-block; flex: none; width: 24px; aspect-ratio: 1; border-radius: 50%; vertical-align: middle;
  background: conic-gradient(var(--c) calc(var(--v) * 360deg), color-mix(in srgb, var(--gk-star-white) 12%, transparent) 0);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), var(--gk-void-navy) calc(100% - 2.5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 3px), var(--gk-void-navy) calc(100% - 2.5px));
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--c) 60%, transparent));
  animation: gk-sweep var(--gk-t-enter) var(--gk-ease-settle) backwards; }
/* a measurement: mono, tabular, quiet; the value in <b> */
.gk-readout { display: inline-flex; align-items: baseline; gap: 6px; font: 500 11.5px/1.3 var(--gk-mono); color: var(--gk-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gk-readout b { font-weight: 600; color: var(--gk-ink); }
/* indicator chip: a lamp, a count, a word. --c tints the lamp; --live makes the lamp beat with the mark */
.gk-ind { --c: var(--gk-key-cyan); display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border: 1px solid var(--gk-line); border-radius: var(--gk-r-s);
  background: var(--gk-specular), var(--gk-glass); color: var(--gk-muted); font-size: 13px; white-space: nowrap; -webkit-backdrop-filter: var(--gk-blur); backdrop-filter: var(--gk-blur); }
.gk-ind::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(closest-side, var(--gk-star-white), var(--c));
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--c) 70%, transparent); }
.gk-ind b { font: 600 13px/1 var(--gk-mono); color: var(--gk-ink); font-variant-numeric: tabular-nums; animation: gk-rise var(--gk-t-enter) var(--gk-ease) backwards; }
.gk-ind--live::after { inset: auto; left: 3px; top: calc(50% - 10.5px); width: 21px; height: 21px; }
/* added and removed counts, as on a pull request */
.gk-count { display: inline-flex; gap: 6px; font: 600 12px/1 var(--gk-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gk-count > * { animation: gk-rise var(--gk-t-enter) var(--gk-ease) backwards; }
.gk-count > :nth-child(2) { animation-delay: var(--gk-stagger); }
.gk-count-add { color: var(--gk-readout-green); }
.gk-count-del { color: var(--gk-alert-red); }
/* block meter: five blocks, each <i> plain, -add or -del */
.gk-meter { display: inline-flex; flex: none; gap: 2px; vertical-align: middle; }
.gk-meter i { width: 8px; height: 8px; background: var(--gk-line-strong); animation: gk-pop var(--gk-t-move) var(--gk-ease-settle) backwards; }
.gk-meter i:nth-child(2) { animation-delay: var(--gk-stagger); }
.gk-meter i:nth-child(3) { animation-delay: calc(2 * var(--gk-stagger)); }
.gk-meter i:nth-child(4) { animation-delay: calc(3 * var(--gk-stagger)); }
.gk-meter i:nth-child(5) { animation-delay: calc(4 * var(--gk-stagger)); }
.gk-meter i.gk-meter-add { background: var(--gk-readout-green); }
.gk-meter i.gk-meter-del { background: var(--gk-alert-red); }
/* gauge: a thin level, --v from 0 to 1, lit from halo blue to a white-hot head; it fills in, and glides to a new value */
.gk-gauge { --v: 0; position: relative; display: inline-block; flex: none; width: 96px; height: 4px; border-radius: var(--gk-r-s); vertical-align: middle; background: var(--gk-well); box-shadow: inset 0 0 0 1px var(--gk-line-soft); }
.gk-gauge::before { content: ""; position: absolute; inset: 0; border-radius: inherit; transform-origin: left; transform: scaleX(var(--v));
  background: linear-gradient(90deg, var(--gk-halo-blue), var(--gk-key-cyan) 80%, var(--gk-star-white)); box-shadow: 0 0 8px color-mix(in srgb, var(--gk-key-cyan) 60%, transparent);
  transition: transform var(--gk-t-enter) var(--gk-ease); animation: gk-fill var(--gk-t-enter) var(--gk-ease-settle) backwards; }

/* compact rows, as in a file list: an icon, a mono path, then counts or meters at the end */
.gk-rows { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.gk-rows > li { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 14px; border-top: 1px solid var(--gk-line-soft); font-size: 13px; color: var(--gk-ink-2);
  transition: background-color var(--gk-t-hover) var(--gk-ease); }
.gk-rows > li:first-child { border-top: 0; }
.gk-rows > li:hover { background: var(--gk-sheen); }
.gk-path { flex: 1; min-width: 0; overflow: hidden; font-family: var(--gk-mono); font-size: 12.5px; color: var(--gk-ink); white-space: nowrap; text-overflow: ellipsis; }
.gk-path span { color: var(--gk-muted); }

/* ---------- floating surfaces: popover, tooltip, drawer. Denser glass: they sit over charts ----------
   A popover composes out of its anchor (--gk-pop-from, default its top left corner) whenever it is shown,
   a menu's rows following one stagger apart; a tip rises in. To release one, add gk-out (it stops taking
   the pointer at once), then hide or remove it when its animations finish; none run under reduced motion. */
.gk-pop { position: fixed; z-index: 40; border: 1px solid var(--gk-line); border-radius: var(--gk-r); box-shadow: var(--gk-shadow-pop);
  background: var(--gk-specular), var(--gk-refract), var(--gk-glass-strong);
  -webkit-backdrop-filter: var(--gk-blur-strong); backdrop-filter: var(--gk-blur-strong);
  transform-origin: var(--gk-pop-from, 0 0); animation: gk-compose var(--gk-t-enter) var(--gk-ease-settle) backwards; }
.gk-pop[role="menu"] .gk-rows > li, .gk-pop [role="menu"] > li { animation: gk-rise var(--gk-t-move) var(--gk-ease) backwards; animation-delay: calc(var(--gk-stagger) * 2); }
.gk-pop[role="menu"] .gk-rows > li:nth-child(2), .gk-pop [role="menu"] > li:nth-child(2) { animation-delay: calc(var(--gk-stagger) * 3); }
.gk-pop[role="menu"] .gk-rows > li:nth-child(n+3), .gk-pop [role="menu"] > li:nth-child(n+3) { animation-delay: calc(var(--gk-stagger) * 4); }
.gk-tip { position: fixed; z-index: 50; max-width: 320px; padding: 10px 12px; pointer-events: none; border: 1px solid var(--gk-line); border-radius: var(--gk-r-s); color: var(--gk-ink); font-size: 12.5px; line-height: 1.45; box-shadow: var(--gk-shadow-pop);
  background: var(--gk-specular), var(--gk-refract), var(--gk-glass-strong);
  -webkit-backdrop-filter: var(--gk-blur-strong); backdrop-filter: var(--gk-blur-strong);
  animation: gk-rise var(--gk-t-hover) var(--gk-ease) backwards; }
/* attached tip: a control's own short name (its data-tip) as a tip under it, drawn on ::before so ::after stays
   free for a hit area. Hidden at rest; at once on keyboard focus, and on a fine pointer after a hover of
   --gk-t-move, rising in. It hangs from the host's right edge, so at rest it never widens a scroll box to the
   right; a host moves it with its insets only. It is never wider than the window less 8px a side (a longer
   name wraps), and gk-shell.js slides a shown tip sideways (--gk-tip-dx) and opens it upwards (--gk-tip-dy) until
   it sits 8px inside the window. Both shifts are cleared whenever the tip is not drawn */
.gk-tipped { position: relative; }
.gk-tipped::before { content: attr(data-tip); position: absolute; z-index: 50; top: calc(100% + 6px); right: 0; translate: var(--gk-tip-dx, 0px) var(--gk-tip-dy, 0px); padding: 5px 8px; pointer-events: none; visibility: hidden;
  box-sizing: border-box; width: max-content; max-width: min(40rem, calc(100vw - 16px));
  border: 1px solid var(--gk-line); border-radius: var(--gk-r-s); color: var(--gk-ink); font: 500 12px/1.3 var(--gk-font); letter-spacing: 0; text-transform: none; white-space: normal; overflow-wrap: anywhere; box-shadow: var(--gk-shadow-pop);
  background: var(--gk-specular), var(--gk-refract), var(--gk-glass-strong);
  -webkit-backdrop-filter: var(--gk-blur-strong); backdrop-filter: var(--gk-blur-strong); }
.gk-tipped:focus-visible::before { visibility: visible; animation: gk-rise var(--gk-t-hover) var(--gk-ease) backwards; }
@media (hover: hover) and (pointer: fine) {
  .gk-tipped:hover::before { visibility: visible; animation: gk-rise var(--gk-t-hover) var(--gk-ease) var(--gk-t-move) backwards; }
}
.gk-pop.gk-out, .gk-tip.gk-out { pointer-events: none; animation: gk-release var(--gk-t-release) var(--gk-ease-release) forwards; }
.gk-pop.gk-out * { pointer-events: none; }
@keyframes gk-compose { from { transform: translateY(-4px) scale(.92); opacity: 0; } }
@keyframes gk-release { to { transform: scale(.96); opacity: 0; } }
.gk-scrim { position: fixed; inset: 0; z-index: 29; opacity: 0; pointer-events: none; background: color-mix(in srgb, var(--gk-void-navy) 60%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition: opacity var(--gk-t-move) var(--gk-ease); }
.gk-scrim.open { opacity: 1; pointer-events: auto; }
.gk-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 30; width: min(540px, 100vw); display: flex; flex-direction: column; visibility: hidden; transform: translateX(102%);
  transition: transform var(--gk-t-move) var(--gk-ease), visibility 0s linear var(--gk-t-move);
  border-left: 1px solid var(--gk-line-strong); border-image: linear-gradient(180deg, color-mix(in srgb, var(--gk-star-white) 30%, transparent), color-mix(in srgb, var(--gk-star-white) 8%, transparent) 40%, color-mix(in srgb, var(--gk-tint) 30%, transparent)) 1;
  background: var(--gk-refract), var(--gk-glass-strong); box-shadow: var(--gk-shadow-pop);
  -webkit-backdrop-filter: var(--gk-blur-strong); backdrop-filter: var(--gk-blur-strong); }
.gk-drawer.open { transform: none; visibility: visible; transition: transform var(--gk-t-move) var(--gk-ease); }

/* ---------- words, help and a key (brand.md "Words, help and a key") ----------
   Every control shows its words; an icon beside them is optional. Tabs and accordions carry an icon and one
   to three words, and each section opens with a short heading. In a control panel (gk-controls) every control
   has a short label and a "?" (gk-help) that opens its plain-words help (gk-help-text), and one Key
   (gk-key-toggle) opens the panel's key (gk-key). gk-shell.js runs the tabs, the "?", the Key and the tour. */

/* tabs: icon and words in a well, the chosen tab lit along its foot; a phone stacks the icon over the word */
.gk-tablist { display: flex; gap: 2px; max-width: 100%; padding: 3px; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--gk-line); border-radius: var(--gk-r); background: var(--gk-well); }
.gk-tablist::-webkit-scrollbar { display: none; }
.gk-tablist [role="tab"] { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--gk-r-s); background: transparent; color: var(--gk-ink-2); font: inherit; font-size: 13.5px; white-space: nowrap; cursor: pointer;
  transition: background-color var(--gk-t-hover) var(--gk-ease), color var(--gk-t-hover) var(--gk-ease), border-color var(--gk-t-hover) var(--gk-ease), transform var(--gk-t-move) var(--gk-ease-settle); }
.gk-tablist [role="tab"]:hover { color: var(--gk-ink); background: var(--gk-sheen); }
.gk-tablist [role="tab"] .gk-icon { color: var(--gk-muted); }
.gk-tablist [role="tab"][aria-selected="true"] { color: var(--gk-ink); border-color: var(--gk-line-strong); background: color-mix(in srgb, var(--gk-star-white) 10%, transparent); box-shadow: inset 0 -2px 0 var(--gk-accent); }
.gk-tablist [role="tab"][aria-selected="true"] .gk-icon { color: var(--gk-accent); }
.gk-tabs > [role="tabpanel"] { margin-top: 14px; animation: gk-rise var(--gk-t-move) var(--gk-ease) backwards; }
.gk-tabs > [role="tabpanel"] > :first-child { margin-top: 0; }
@media (max-width: 520px) {
  .gk-tablist [role="tab"] { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px; padding: 6px 4px; font-size: 12px; line-height: 1.15; white-space: normal; text-align: center; }
}

/* accordion: a details whose summary shows an icon and up to six words; the kit draws the chevron, which
   turns as the section opens */
.gk-accordion { border: 1px solid var(--gk-line-soft); border-radius: var(--gk-r); background: var(--gk-sheen); }
.gk-accordion + .gk-accordion { margin-top: 8px; }
.gk-accordion > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: var(--gk-r); list-style: none; cursor: pointer; color: var(--gk-ink); font-weight: 600;
  transition: background-color var(--gk-t-hover) var(--gk-ease); }
.gk-accordion > summary::-webkit-details-marker { display: none; }
.gk-accordion > summary:hover { background: var(--gk-sheen); }
.gk-accordion > summary .gk-icon { color: var(--gk-accent); }
.gk-accordion > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin-left: auto; border-right: 1.75px solid var(--gk-muted); border-bottom: 1.75px solid var(--gk-muted); transform: translateY(-2px) rotate(45deg);
  transition: transform var(--gk-t-move) var(--gk-ease-settle); }
.gk-accordion[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.gk-accordion-body { padding: 2px 14px 14px; animation: gk-rise var(--gk-t-move) var(--gk-ease) backwards; }

/* control panel: a head with its title and one Key, the key itself (closed until asked for), then one row
   per control: its label (three words at most) and its "?" on one line, the control under them. A fieldset
   holds a set of choices under one legend and one "?". While a help bubble is open the panel rises over its
   neighbours, so a bubble near its foot is not covered by the next panel */
.gk-controls { display: grid; gap: 14px; padding: 14px 16px 16px; }
.gk-controls:has(.gk-help[aria-expanded="true"]) { z-index: 46; }
.gk-controls-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.gk-controls-head > :is(h2, h3, h4) { flex: 1 1 auto; margin: 0; font-size: 15px; }
.gk-key-toggle { position: relative; }
.gk-key-toggle::after { content: ""; position: absolute; inset: -5px 0; }
.gk-key-toggle[aria-expanded="true"] { border-color: color-mix(in srgb, var(--gk-key-cyan) 60%, transparent); background: var(--gk-accent-wash); }
.gk-key { display: grid; gap: 8px; margin: 0; padding: 10px 12px; border: 1px solid var(--gk-line-soft); border-radius: var(--gk-r-s); background: var(--gk-well); font-size: 13px; line-height: 1.45; animation: gk-rise var(--gk-t-move) var(--gk-ease) backwards; }
.gk-key > div { display: grid; grid-template-columns: minmax(5em, max-content) minmax(0, 1fr); gap: 2px 12px; align-items: baseline; }
.gk-key dt { display: flex; align-items: center; gap: 6px; color: var(--gk-ink); font-weight: 600; }
.gk-key dd { margin: 0; color: var(--gk-ink-2); }
.gk-control { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.gk-control > :first-child { grid-column: 1; grid-row: 1; margin: 0; padding: 0; color: var(--gk-ink); font-size: 13px; font-weight: 600; }
fieldset.gk-control > legend { float: left; }
.gk-control > .gk-help { grid-column: 2; grid-row: 1; }
.gk-control > :not(:first-child, .gk-help, .gk-help-text) { grid-column: 1 / -1; }
.gk-control > label:not(:first-child) { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--gk-ink-2); }
/* a slider or any other field in a panel is a 44 px tall target: the box grows, the track stays centred */
.gk-control > :is(input, select, textarea) { min-height: 44px; }
/* "?": a small round button with a 44 px hit area, lit while its help is open */
.gk-help { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid var(--gk-line-strong); border-radius: 50%; background: var(--gk-sheen); color: var(--gk-ink-2); font: 650 13px/1 var(--gk-font); cursor: pointer;
  transition: background-color var(--gk-t-hover) var(--gk-ease), border-color var(--gk-t-hover) var(--gk-ease), color var(--gk-t-hover) var(--gk-ease), transform var(--gk-t-move) var(--gk-ease-settle); }
.gk-help::after { content: ""; position: absolute; inset: -10px; }
.gk-help:hover, .gk-help[aria-expanded="true"] { color: var(--gk-ink); border-color: color-mix(in srgb, var(--gk-key-cyan) 60%, transparent); background: var(--gk-accent-wash); }
/* help bubble: under its row and as wide as the row (34em at most); gk-shell.js opens it upwards
   (gk-help-text--up) when the foot of the window would cut it */
.gk-help-text { position: absolute; z-index: 45; top: calc(100% + 6px); left: 0; right: 0; max-width: 34em; margin: 0; padding: 9px 12px; border: 1px solid var(--gk-line); border-radius: var(--gk-r-s); color: var(--gk-ink); font-size: 13px; font-weight: 400; line-height: 1.45; box-shadow: var(--gk-shadow-pop);
  background: var(--gk-specular), var(--gk-refract), var(--gk-glass-strong);
  -webkit-backdrop-filter: var(--gk-blur-strong); backdrop-filter: var(--gk-blur-strong);
  animation: gk-rise var(--gk-t-hover) var(--gk-ease) backwards; }
.gk-help-text--up { top: auto; bottom: calc(100% + 6px); }
/* read aloud, never seen: the one live region gk-shell.js fills with an opened help text or a tour step */
.gk-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* tour: a card docked at the foot of the window, its step's place outlined; Back, Next and Skip */
.gk-tour { position: fixed; z-index: 60; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); translate: -50% 0; width: min(30rem, calc(100vw - 24px)); display: grid; gap: 10px; padding: 14px 16px;
  border: 1px solid var(--gk-line); border-radius: var(--gk-r); color: var(--gk-ink); box-shadow: var(--gk-shadow-pop);
  background: var(--gk-specular), var(--gk-refract), var(--gk-glass-strong);
  -webkit-backdrop-filter: var(--gk-blur-strong); backdrop-filter: var(--gk-blur-strong);
  animation: gk-rise var(--gk-t-move) var(--gk-ease) backwards; }
.gk-tour-count { margin: 0; color: var(--gk-muted); font: 600 12px/1.3 var(--gk-mono); }
.gk-tour-text { margin: 0; font-size: 15px; line-height: 1.5; }
.gk-tour-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.gk-tour-actions .gk-btn { min-height: 44px; }
.gk-tour-actions [data-gk-tour-go="skip"] { margin-right: auto; }
[data-gk-tour-on] { outline: 2px solid var(--gk-focus); outline-offset: 4px; }

/* empty state: what is missing, and the way out */
.gk-empty { display: grid; justify-items: center; gap: 10px; padding: 30px 8px; text-align: center; color: var(--gk-muted); font-size: 14px; }
.gk-empty > .gk-icon { width: 24px; height: 24px; color: var(--gk-faint); }

/* ---------- no backdrop blur, or the reader asked for less transparency: denser glass ---------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root { --gk-glass: light-dark(color-mix(in srgb, var(--gk-surface-light) 97%, transparent), color-mix(in srgb, var(--gk-surface) 90%, transparent)); --gk-glass-rail: color-mix(in srgb, var(--gk-void-navy) 94%, transparent); --gk-glass-bar: light-dark(color-mix(in srgb, var(--gk-bg-light) 95%, transparent), color-mix(in srgb, var(--gk-void-navy) 94%, transparent)); --gk-glass-strong: light-dark(color-mix(in srgb, var(--gk-surface-light) 97%, transparent), color-mix(in srgb, var(--gk-void-navy) 96%, transparent)); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --gk-glass: light-dark(color-mix(in srgb, var(--gk-surface-light) 97%, transparent), color-mix(in srgb, var(--gk-surface) 90%, transparent)); --gk-glass-rail: color-mix(in srgb, var(--gk-void-navy) 94%, transparent); --gk-glass-bar: light-dark(color-mix(in srgb, var(--gk-bg-light) 95%, transparent), color-mix(in srgb, var(--gk-void-navy) 94%, transparent)); --gk-glass-strong: light-dark(color-mix(in srgb, var(--gk-surface-light) 97%, transparent), color-mix(in srgb, var(--gk-void-navy) 96%, transparent)); }
}

/* ---------- arrival on sight: inside gk-arrive, entrance animations wait until the page adds gk-in ---------- */
.gk-arrive:not(.gk-in) *, .gk-arrive:not(.gk-in) *::before, .gk-arrive:not(.gk-in) *::after { animation-play-state: paused !important; }

/* ---------- calm path: no motion, final state at first paint ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --gk-t-press: 0ms; --gk-t-hover: 0ms; --gk-t-move: 0ms; --gk-t-enter: 0ms; --gk-t-release: 0ms; --gk-t-icon: 0ms; --gk-t-pulse: 0ms; --gk-stagger: 0ms; }
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- other products' own colours: only for the board's faithful mock-ups of where GK is seen ---------- */
:root {
  --gk-prod-paper: rgb(255 255 255);
  --gk-prod-github-green: rgb(35 134 54);
  --gk-prod-github-purple: rgb(137 87 229);
  --gk-prod-github-blue: rgb(9 105 218);
  --gk-prod-slack-aubergine: rgb(63 14 64);
}