/* =====================================================================================================
   GENERALLY LEGAL LIVE · tokens.css v5  (the executable half of STYLE-v5.md; every value here is binding)
   DROP-IN for public/css/tokens.css (v4 backup: research/direction-v4-applied-backup/css/tokens.css).
   Direction C "WCVB" with Dan's changes (intake/dan-scrawl8-verbatim-2026-10-20.md):
   - "we're overusing the stripes ... a little bit more tactful": ONE stripe device per frame. On a board that is the
     segment bug's five fine lines; on an ident or a transition it is THE RAINBOW BAND: one band of six lines, each line
     one spectrum colour (violet, blue, green, yellow, orange, white; never red), the title CENTRED on it. One
     GENERALLY LEGAL, one ALEXIS SAYS: never stacked echoes.
   - "I don't think we need our bar graph elements ... to be in the line format": bars, meters and tracks are SOLID.
   - "I really like this font ... I don't understand why the J hangs down so low": C's geometric face becomes URBANIST
     (OFL), whose capitals all sit on the baseline (J, Q included).
   - "if the theme of this card or whiteboard is green, then all our accent colors should be green": ONE accent family
     per look (looks.js); people keep fixed identity colours (dots, pens, frames only).
   - "not do that [striped bullets] ... a more traditional something": lists use round bullets or numbers.
   - "these little collars ... on top of the tabs ... heavy-handed": no card collars. The ONE widget accent is a 2 px
     keyline in the look's family (--gl-line) around every card.
   - "our stamps are just still too large. Can't we just go back to what we had in V1?": V1 rubber stamps (white paper,
     double border in the stamp ink, slanted -11 deg). Word stamps at V1 size; icon stamps at 80 px.
   Load order: tokens.css -> page css. JS: js/look/looks.js (v5) writes the same --gl-* colours (applyLook); the static
   [data-look] blocks below are its printLookCss() output, so pages paint right before JS runs.
   COMPAT: every v3 and v4 token name and .gl-* class is still defined (STYLE-v5 §3 / §16 list what changed meaning).
   Inside .gl-stage (and .gl-v3 pages) --gl-k / --gl-w are the look's ink / card pair. Literal white / black are
   --gl-white / --gl-black.
   ===================================================================================================== */

/* ---------- fonts (SIL OFL 1.1, self-hosted in public/fonts with their licences) ----------
   URBANIST (variable, wght 100-900; Corey Hu; LICENSE-Urbanist-OFL.txt) is the ONE show face, served under several
   family names whose descriptors CLAMP the weight, so a component that asks for 400 or 900 still gets the v5 cut:
     "GL Display"   700-800   titles, the bug, display notes (OBJECTION), name plates, the band title, stamps
     "GL Label"     600-700   UPPERCASE labels, chips, kickers, table heads, keys, Studio heads (tracked .12-.15em)
     "GL Show"      700-800   the LEGACY label face (--gl-show) of v1/v3/v4 components: now Urbanist too
     "GL Num"       600/700/800 static cuts with TABULAR digits (UrbanistNum-*.woff2: every 0-9 is one width), so a
                    ticking clock, a % that races and a dB readout never jitter
     "Urbanist"     the whole variable font under its own name
     "Jost"         an ALIAS of Urbanist, so code lifted from research/dark-v4/wcvb (which names "Jost") renders the
                    fixed face, J on the baseline, without edits. New code names the GL families, never "Jost".  */
@font-face { font-family: "GL Display"; src: url(../fonts/Urbanist-var-latin.woff2) format("woff2"); font-weight: 700 800; font-style: normal; font-display: block; }
@font-face { font-family: "GL Display Semi"; src: url(../fonts/Urbanist-var-latin.woff2) format("woff2"); font-weight: 600 700; font-style: normal; font-display: block; }
@font-face { font-family: "GL Label"; src: url(../fonts/Urbanist-var-latin.woff2) format("woff2"); font-weight: 600 700; font-style: normal; font-display: block; }
@font-face { font-family: "GL Show"; src: url(../fonts/Urbanist-var-latin.woff2) format("woff2"); font-weight: 700 800; font-style: normal; font-display: block; }
@font-face { font-family: "GL Num"; src: url(../fonts/UrbanistNum-600-latin.woff2) format("woff2"); font-weight: 100 649; font-style: normal; font-display: block; }
@font-face { font-family: "GL Num"; src: url(../fonts/UrbanistNum-700-latin.woff2) format("woff2"); font-weight: 650 749; font-style: normal; font-display: block; }
@font-face { font-family: "GL Num"; src: url(../fonts/UrbanistNum-800-latin.woff2) format("woff2"); font-weight: 750 900; font-style: normal; font-display: block; }
@font-face { font-family: "Urbanist"; src: url(../fonts/Urbanist-var-latin.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: block; }
@font-face { font-family: "Jost"; src: url(../fonts/Urbanist-var-latin.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: block; }
/* kept so nothing that names them breaks (the v3/v4 intro engine, the intro studio, kinetic.js, engrave.js, old presets).
   New work never uses them. */
@font-face { font-family: "Archivo GL"; src: url(../fonts/Archivo-var-latin.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: block; }
@font-face { font-family: "Anton"; src: url(../fonts/Anton-latin.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Big Shoulders Display"; src: url(../fonts/BigShouldersDisplay-700-latin.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: "Big Shoulders Display"; src: url(../fonts/BigShouldersDisplay-800-latin.woff2) format("woff2"); font-weight: 800; font-style: normal; font-display: block; }
@font-face { font-family: "Big Shoulders Display"; src: url(../fonts/BigShouldersDisplay-900-latin.woff2) format("woff2"); font-weight: 900; font-style: normal; font-display: block; }
@font-face { font-family: "Archivo Black"; src: url(../fonts/ArchivoBlack-latin.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Archivo XC"; src: url(../fonts/ArchivoXC-Black.woff2) format("woff2"); font-weight: 900; font-style: normal; font-display: block; }

:root {
  /* ---------- type (STYLE-v5 §2). Two families on program: Urbanist (display, labels, numerals) + Helvetica Neue (reading) ---------- */
  --gl-display: "GL Display", "Urbanist", "Futura", "Helvetica Neue", Arial, sans-serif;   /* 700, UPPERCASE, +.02em */
  --gl-display-s: "GL Display Semi", "Urbanist", "Helvetica Neue", Arial, sans-serif;
  --gl-label: "GL Label", "Urbanist", "Helvetica Neue", Arial, sans-serif;                  /* 600, UPPERCASE, .12-.15em */
  --gl-show: "GL Show", "Urbanist", "Helvetica Neue", Arial, sans-serif;                    /* LEGACY label face, now Urbanist */
  --gl-num:  "GL Num", "Urbanist", "Helvetica Neue", Arial, sans-serif;                     /* tabular digits, 700 */
  --gl-read: "Helvetica Neue", Helvetica, Arial, sans-serif;                                /* every word the audience reads: 700 */
  --gl-engrave: "Anton", Impact, "Arial Narrow", sans-serif;                                /* RETIRED (v4 A); compat only */
  --gl-display-fit: var(--gl-display);    /* the face kinetic.js measures titles in */
  --gl-wdth-display: 100%; --gl-wdth-label: 100%; --gl-wdth-num: 100%;   /* Urbanist has one width */
  --gl-cap: .7;                           /* Urbanist cap height / em. line-height .7 makes the caps fill the line box */
  --gl-cap-top: 0em;                      /* (at line-height .7 the cap top IS the box top: asc .95, desc .25, cap .70) */
  --gl-slant: 0deg;                       /* type and plates stand UPRIGHT */
  --gl-lean: -12deg;                      /* the lean lives ONLY on the Besties slabs (C: skewX(-12deg)) */
  --gl-stamp-slant: -11deg;               /* and on the V1 rubber stamps (Dan: "go back to what we had in V1") */
  --gl-tan: 0.21256;                      /* tan(12deg) */

  /* type scale, 1920x1080 stage px (STYLE-v5 §2.2; floors: must-read 30, labels 18, numerals 48, nothing < 16) */
  --gl-fs-title: 176px;     /* transition title on the ident band (cap 123 = the band) */
  --gl-fs-slam: 150px;      /* slam / pull-quote title */
  --gl-fs-stamp: 120px;     /* word stamp CG (fit 80-120) */
  --gl-fs-logo-top: 136px;  /* GENERALLY LEGAL on the logo band (cap 95) */
  --gl-fs-logo-bot: 136px;  /* (one line: the same size) */
  --gl-fs-stat: 200px;      /* stat value, GL Num */
  --gl-fs-score: 36px;      /* poll % chip, GL Num 700 (C: the % lives in a chip) */
  --gl-fs-statement: 66px;  /* statement card, Helvetica 700, 2 balanced lines */
  --gl-fs-read: 36px;       /* list item / card line */
  --gl-fs-cell: 30px;       /* table cell */
  --gl-fs-q: 32px;          /* the poll question (2 lines max) */
  --gl-fs-name: 57px;       /* name plate, GL Display (cap 40) */
  --gl-fs-role: 28px;       /* the role line under a name plate, Helvetica 700 */
  --gl-fs-label: 20px;      /* labels: poll options, kickers (GL Label 600 .14em) */
  --gl-fs-chip: 20px;       /* chips and verdicts */
  --gl-fs-bug: 33px;        /* the segment bug (GL Display 700, cap 23) */
  --gl-fs-mark: 16px;       /* operator-only metadata; nothing on program is this small */
  --gl-fs-ring: 30px;       /* Jev ring labels (operator chrome on program) */
  --gl-ls-cg: .14em;        /* label tracking (.12em on chips) */
  --gl-ls-display: .02em;
  --gl-ls-read: -.005em;
  --gl-lh-cg: 1;
  --gl-lh-read: 1.18;

  /* ---------- lines (ONE weight drives them: --gl-lw = state.style.line, 0 hairline · .35 THIN default · 1 regular) ----------
     keyline 1.65 / 2 / 2.65 px. Colour: --gl-line (the look's FAMILY at >= 3:1 on card AND ground) = the one widget
     accent. Neutral keylines (chips at rest, toolbar, Studio) are --gl-key; dividers --gl-hair (--gl-line2). */
  --gl-k: #111111;                        /* legacy, PAGE CHROME ONLY; inside the stage they flip (see .gl-stage below) */
  --gl-w: #ffffff;
  --gl-sel: var(--gl-dan);                /* selection colour; board/edit.js sets it per selecting person (their pen) */
  --gl-white: #ffffff;
  --gl-black: #0b0b0e;
  --gl-lw: .35;
  --gl-line-a: 1;                                          /* legacy */
  --gl-bw: calc(1.65px + 1px * var(--gl-lw));              /* every program keyline: 2 px at thin */
  --gl-bw-band: calc(1.65px + 1px * var(--gl-lw));         /* legacy band rules: 2 px */
  --gl-bw-x: 1.5px;                                        /* selection boxes, focus rings (C: 1.5 px) */
  --gl-bw-frame: 3px;                                      /* participant frames */
  --gl-bw-st: 1px;                                         /* every Studio / operator-chrome border */
  --gl-rule-h: 0px;                                        /* v5: NO author rule / collar on a card (was 4 px) */
  --gl-bw-div: 1px;                                        /* dividers inside a card (C: 1 px --hair) */
  /* shadows: NONE (keylines carry the separation). The names stay for the rules that read them; each is a zero,
     transparent shadow so a comma list such as "var(--gl-hard-s), 0 0 0 2px x" stays valid. The V1 stamp's own hard
     drop is --gl-stamp-drop (the one exception, Dan's V1). */
  --gl-shadow-a: .5;
  --gl-glow-k: 1;                                          /* dark looks 1; light looks 0 */
  --gl-o-s: 0px; --gl-o: 0px; --gl-o-l: 0px;
  --gl-hard-s: 0 0 0 0 transparent;
  --gl-hard: 0 0 0 0 transparent;
  --gl-hard-l: 0 0 0 0 transparent;
  --gl-e: 0px;
  --gl-edge: 0 0 0 transparent;
  --gl-edge-l: 0 0 0 transparent;
  /* glow: <= 2 layers, alpha <= .3, display type and the band at hero size only, dark looks only (C --glow .26) */
  --gl-glow-accent: 0 0 12px rgb(var(--gl-accent-rgb) / calc(.26 * var(--gl-glow-k)));
  --gl-glow-rule: 0 0 9px rgb(var(--gl-beam-rgb) / calc(.26 * var(--gl-glow-k)));
  --gl-glow-type: drop-shadow(0 0 0 transparent);          /* v5: display type is flat at rest; it glints on landing */
  --gl-glow-hero: drop-shadow(0 0 9px rgb(var(--gl-text-rgb) / calc(.18 * var(--gl-glow-k))));
  --gl-radius: 6px;         /* cards, panes, frames, tiles */
  --gl-radius-s: 4px;       /* chips, buttons, plates; tracks 3, slabs 3, handles 2 */
  --gl-radius-l: 8px;       /* Studio panels and the toolbar */
  /* the other look sliders (state.style): size of cards / graphics / stamps, background motion, background sparkles */
  --gl-scale: 1;
  --gl-motion: 1;
  --gl-sparkles: 0;         /* TASTE: no star fields. The slider still works; its default is off */
  --gl-card-tint: .9;       /* the card sliders (state.style cardTint / cardLight; the fill itself is --gl-card) */
  --gl-card-light: .85;

  /* ---------- THE RAINBOW BAND (STYLE-v5 §9): six lines, one spectrum colour each, top to bottom; the title centred ----------
     Rasters (line t / pitch p; the band is 5p + t tall and a title's cap height equals it):
       ident 13/22 (123 px: transition titles) · logo 10/17 (95 px: GENERALLY LEGAL) · plate 6/10 (56 px) · fine 3/5 (the bug) */
  --gl-band-t: 13px; --gl-band-p: 22px;
  --gl-band-gap: 1.25;      /* the lines stop 1.25 pitches short of the title (C's WCVB calibration) */
  --gl-bug-t: 3px; --gl-bug-p: 5px; --gl-bug-w: 52px; --gl-bug-gap: 12px;   /* the segment bug: 5 fine lines, 52 px, in the family; 12 px to the title */
  /* legacy lead-in names (v3/v4 components): a short bundle of the family's lines */
  --gl-bundle-h: 13px; --gl-bundle-line: 3px; --gl-bundle-gap: 2px;
  --gl-trail-line: 3px; --gl-trail-pitch: 5px;
  --gl-stack-1: 3px; --gl-stack-2: 3px; --gl-stack-3: 3px; --gl-stack-4: 3px;
  --gl-stack-g1: 2px; --gl-stack-g2: 2px; --gl-stack-g3: 2px;
  /* line-cut letters: the band's raster through the type (cap = band). In em of a .gl-band title: p = cap/5.6, t = .6p */
  --gl-scan-per: .125em; --gl-scan-on: .075em;

  /* ---------- Xbox face buttons (hue identity kept; the B glyph is the one red, operator chrome only) ---------- */
  --gl-pad-a: #49df6e; --gl-pad-b: #f53c41; --gl-pad-x: #3c95f0; --gl-pad-y: #f4ea68;

  /* ---------- scoreboard lamps (C S3 shot clock: warm-white lamps on a 9 % ground; the games screen only) ---------- */
  --gl-bulb: var(--gl-text);
  --gl-bulb-dim: rgb(var(--gl-text-rgb) / .35);
  --gl-bulb-off: rgb(var(--gl-text-rgb) / .09);
  --gl-tally: var(--gl-accent);   /* mic tally / ON AIR dot: the family, never red */

  /* ---------- STAMPS (Dan, 2026-10-20: "they were so simple before. Red hearts. yellow sparkles. red fire. like the
     emoji!"): icon stamps are flat emoji-like icons in their natural colours, no frame (live/stamps-art.js), 96 px; the
     word stamp is a bold word on a solid chip of the look's accent (graphics/stamp.js). The --gl-stamp-* border / cut /
     drop tokens below are compat only (the intro studio's own stamp still reads them). ---------- */
  --gl-stamp-size: 96px;            /* icon stamps (dropped stickers) at style.scale 1 */
  --gl-stamp-word: 120px;           /* the word stamp's CG (fitCG 120 -> 80, maxWidth 1240) */
  --gl-stamp-react: 64px;           /* a reaction stamp inside a participant frame */
  --gl-stamp-bo: 10px; --gl-stamp-gap: 4px; --gl-stamp-bi: 4px;          /* V1 border: outer · white gap · inner line */
  --gl-stamp-key: 3px;              /* V1 dark cut (outline) */
  --gl-stamp-drop: 9px 9px 0 var(--gl-stamp-cut);                     /* V1 hard drop (the one shadow the show keeps) */
  --gl-stamp-face: var(--gl-display);  /* V1 set the word in the show face (then Archivo Black; now Urbanist 800) */
  /* compat palette (v4 names; icon stamps now take the look's --gl-stamp-ink, so a stamp is the board's family) */
  --gl-stamp-gold: #ffd400; --gl-stamp-gold-hot: #fff3b0; --gl-stamp-green: #00e070; --gl-stamp-red: #ff2ab4;   /* "red" = magenta: no red */
  --gl-stamp-pink: #ff2fa0; --gl-stamp-orange: #ff7414; --gl-stamp-blue: #2f7dff; --gl-stamp-cyan: #31e1ff;
  --gl-stamp-rim: #ffffff;

  /* ---------- brand (v4 names kept; the logo is the rainbow band now, so these are compat) ---------- */
  --gl-brand-red: #c95a0a;          /* NOT red: C's deep orange (h 47) for legacy alarms until §16 */
  --gl-brand-yellow: #ffd84a; --gl-brand-blue: #4fa8ff; --gl-brand-sky: #9d7bff;
  --gl-brand-orange: #ff9a3c; --gl-brand-navy: #08080a;
  /* v4 A engraving (RETIRED; engrave.js / the intro read these until their v5 pass) */
  --gl-eng-ground: #0a0908; --gl-eng-band-ground: #07061a;
  --gl-eng-band-lo: #2b2f9c; --gl-eng-band: #3a42cf; --gl-eng-band-hi: #8d93ff;
  --gl-eng-rule-lo: #b8501f; --gl-eng-rule: #f47b2a; --gl-eng-rule-hi: #ff9a4c;
  --gl-eng-lit0: #fff6b8; --gl-eng-lit1: #ffe873; --gl-eng-lit2: #ffd04a; --gl-eng-lit3: #f7a63c;
  --gl-eng-solid0: #e8792c; --gl-eng-solid1: #f2a937; --gl-eng-solid2: #f7d44a; --gl-eng-solid3: #fbe769;
  --gl-eng-gold: #ffd23a; --gl-eng-amber: #f7a531; --gl-eng-cut: #0a0704; --gl-eng-rim: #fff0b0; --gl-eng-credit: #d8d1c1;

  /* ---------- layout: 1920x1080 stage ---------- */
  --gl-W: 1920px; --gl-H: 1080px;
  --gl-safe-x: 96px;  --gl-safe-top: 64px;  --gl-safe-bot: 72px;
  --gl-margin-x: 120px;     /* K5: the side margin new layouts snap to */
  --gl-bug-x: 0px; --gl-bug-y: 48px; --gl-bug-h: 23px;     /* the segment bug: lines from the frame edge, cap 23 */

  /* ---------- motion (STYLE-v5 §11) ---------- */
  --gl-ease-silk: cubic-bezier(.16, 1, .3, 1);
  --gl-ease-swish: cubic-bezier(.76, 0, .22, 1);
  --gl-ease-b: cubic-bezier(.16, .84, .24, 1);             /* C's one entrance ease (.enter) */
  --gl-ease-exit: cubic-bezier(.55, .055, .675, .19);
  --gl-ease-spring: cubic-bezier(.34, 1.56, .64, 1);       /* legacy; v5 never bounces on program (the V1 stamp's 3 % excepted) */
  --gl-ease-sheen: cubic-bezier(.45, 0, .25, 1);           /* C's sheen */
  --gl-d-tick: 80ms;  --gl-d-fast: 180ms;  --gl-d-exit: 300ms;  --gl-d-wipe: 420ms;
  --gl-d-spring: 450ms;  --gl-d-enter: 620ms;  --gl-d-deal: 500ms;
  /* ambient loops (all x 1 / --gl-motion; 0 motion = still) */
  --gl-d-crawl: 2.6s;       /* legacy */
  --gl-d-glint: 8s;         /* one glint across display type when it lands, then about every 8 s */
  --gl-d-shimmer: 4.8s;     /* the light band across a SOLID bar fill (3-6 s, rows staggered) */
  --gl-d-sheen: 9s;         /* the light that travels along the band's lines */
  --gl-d-cpat: 26s;         /* legacy (cards carry no pattern in v5) */
  --gl-d-breathe: 2.4s;
  --gl-d-flicker: 7s;       /* bright-fill flutter cycle (the flutter itself is 120-240 ms, +-3-6 %) */
  --gl-d-globe: 40s;        /* legacy */

  /* ---------- layers ---------- */
  --gl-z-pattern: 0; --gl-z-canvas: 10; --gl-z-panes: 20; --gl-z-graphics: 40; --gl-z-wash: 45; --gl-z-slam: 50;
  --gl-z-bugs: 60; --gl-z-ring: 70; --gl-z-transition: 80; --gl-z-vcr: 90; --gl-z-ink: 53; --gl-z-cursors: 75; --gl-z-tools: 85;
}

/* =====================================================================================================
   THE EIGHT LOOKS (generated by looks.js printLookCss(); do not hand-edit: change LOOK_DEFS and regenerate)
   ids unchanged: network BLUE (default) · pop WHITE · games PINK · clay ORANGE · turf GREEN · forum VIOLET
   · day GOLD (light) · sky SKY (light). Each is ONE accent family + neutrals; people colours are fixed.
   THE CARD FILL (--gl-card) is TINTED with the family (Dan, 2026-10-20: "I don't like the dark green bg in the cards ...
   a bit more colorful, brighten the hue or something. give me some sliders maybe"). These blocks are printed at the
   default card sliders (looks.js CARD_DEFAULTS = state.style cardTint .9 / cardLight .85); a window watching the show
   re-applies its look inline when the sliders move (look/style-live.js -> looks.js setCardStyle + applyLook), and
   every on-card colour is recomputed against the new fill (text >= 7:1, the family keyline >= 3:1 on card AND ground).
   ===================================================================================================== */
:root { color-scheme: dark; --gl-ground:#07080b; --gl-tone:#0c0f12; --gl-tone2:#101317; --gl-hi:#161a1f; --gl-deep:#010203; --gl-cam:#072f52; --gl-bust:#313f4d; --gl-ink:#f5f4ef; --gl-card:#09518c; --gl-accent:#5cadfe; --gl-on-accent:#0b0b0e; --gl-accent-ink:#5cadfe; --gl-s1:#ff74bf; --gl-on-s1:#0b0b0e; --gl-s2:#3ddc84; --gl-on-s2:#0b0b0e; --gl-wash:rgba(7,8,11,0.92); --gl-scrim:rgba(7,8,11,0.82); --gl-text:#f5f4ef; --gl-text2:#f1efe7; --gl-line:#66adf3; --gl-line2:#496e95; --gl-raised:#2866a0; --gl-band:#09518c; --gl-band-lo:#07080b; --gl-rule:#5cadfe; --gl-scan0:#f5f4ef; --gl-scan1:#f5f4ef; --gl-scan2:#f1efe7; --gl-keyline:#07080b; --gl-accent-rgb:92 173 254; --gl-s1-rgb:255 116 191; --gl-s2-rgb:61 220 132; --gl-ground-rgb:7 8 11; --gl-card-rgb:9 81 140; --gl-text-rgb:245 244 239; --gl-rule-rgb:92 173 254; --gl-band-rgb:9 81 140; --gl-rim:#66adf3; --gl-rim-soft:#496e95; --gl-beam:#5cadfe; --gl-st-line:#a8adb5; --gl-st-line2:#496e95; --gl-fill:#5792cf; --gl-on-fill:#0b0b0e; --gl-type:#e3f0fe; --gl-type-deep:#2f8ce0; --gl-agent:#b39cff; --gl-on-agent:#0b0b0e; --gl-on-bright:#0b0b0e; --gl-accent-line:#5cadfe; --gl-well:#0a0d10; --gl-ground-hi:#0d1115; --gl-pat:#0e131a; --gl-pat-line:#171f28; --gl-pat-disc:#090c10; --gl-pat-card:rgba(245,244,239,0); --gl-rim-rgb:102 173 243; --gl-beam-rgb:92 173 254; --gl-fill-rgb:87 146 207; --gl-type-rgb:227 240 254; --gl-agent-rgb:179 156 255; --gl-glow-rgb:92 173 254; --gl-dan:#4fa8ff; --gl-on-dan:#0b0b0e; --gl-alexis:#ff74bf; --gl-guest:#3ddc84; --gl-accent-hi:#94c8ff; --gl-on-accent-hi:#0b0b0e; --gl-key:#a8adb5; --gl-hair:#496e95; --gl-track:#3a6fa3; --gl-stamp-ink:#338ee3; --gl-stamp-paper:#ffffff; --gl-stamp-cut:#0b0b0e; --gl-dan-rgb:79 168 255; --gl-key-rgb:168 173 181; --gl-stamp-ink-rgb:51 142 227; --gl-hair-rgb:73 110 149; --gl-sp-violet:#9d7bff; --gl-sp-blue:#4fa8ff; --gl-sp-green:#3ddc84; --gl-sp-yellow:#ffd84a; --gl-sp-orange:#ff9a3c; --gl-sp-white:#f5f4ef; --gl-sp-pink:#ff74bf; --gl-sp-red:#ff74bf; }
[data-look="network"] { color-scheme: dark; --gl-ground:#07080b; --gl-tone:#0c0f12; --gl-tone2:#101317; --gl-hi:#161a1f; --gl-deep:#010203; --gl-cam:#072f52; --gl-bust:#313f4d; --gl-ink:#f5f4ef; --gl-card:#09518c; --gl-accent:#5cadfe; --gl-on-accent:#0b0b0e; --gl-accent-ink:#5cadfe; --gl-s1:#ff74bf; --gl-on-s1:#0b0b0e; --gl-s2:#3ddc84; --gl-on-s2:#0b0b0e; --gl-wash:rgba(7,8,11,0.92); --gl-scrim:rgba(7,8,11,0.82); --gl-text:#f5f4ef; --gl-text2:#f1efe7; --gl-line:#66adf3; --gl-line2:#496e95; --gl-raised:#2866a0; --gl-band:#09518c; --gl-band-lo:#07080b; --gl-rule:#5cadfe; --gl-scan0:#f5f4ef; --gl-scan1:#f5f4ef; --gl-scan2:#f1efe7; --gl-keyline:#07080b; --gl-accent-rgb:92 173 254; --gl-s1-rgb:255 116 191; --gl-s2-rgb:61 220 132; --gl-ground-rgb:7 8 11; --gl-card-rgb:9 81 140; --gl-text-rgb:245 244 239; --gl-rule-rgb:92 173 254; --gl-band-rgb:9 81 140; --gl-rim:#66adf3; --gl-rim-soft:#496e95; --gl-beam:#5cadfe; --gl-st-line:#a8adb5; --gl-st-line2:#496e95; --gl-fill:#5792cf; --gl-on-fill:#0b0b0e; --gl-type:#e3f0fe; --gl-type-deep:#2f8ce0; --gl-agent:#b39cff; --gl-on-agent:#0b0b0e; --gl-on-bright:#0b0b0e; --gl-accent-line:#5cadfe; --gl-well:#0a0d10; --gl-ground-hi:#0d1115; --gl-pat:#0e131a; --gl-pat-line:#171f28; --gl-pat-disc:#090c10; --gl-pat-card:rgba(245,244,239,0); --gl-rim-rgb:102 173 243; --gl-beam-rgb:92 173 254; --gl-fill-rgb:87 146 207; --gl-type-rgb:227 240 254; --gl-agent-rgb:179 156 255; --gl-glow-rgb:92 173 254; --gl-dan:#4fa8ff; --gl-on-dan:#0b0b0e; --gl-alexis:#ff74bf; --gl-guest:#3ddc84; --gl-accent-hi:#94c8ff; --gl-on-accent-hi:#0b0b0e; --gl-key:#a8adb5; --gl-hair:#496e95; --gl-track:#3a6fa3; --gl-stamp-ink:#338ee3; --gl-stamp-paper:#ffffff; --gl-stamp-cut:#0b0b0e; --gl-dan-rgb:79 168 255; --gl-key-rgb:168 173 181; --gl-stamp-ink-rgb:51 142 227; --gl-hair-rgb:73 110 149; --gl-sp-violet:#9d7bff; --gl-sp-blue:#4fa8ff; --gl-sp-green:#3ddc84; --gl-sp-yellow:#ffd84a; --gl-sp-orange:#ff9a3c; --gl-sp-white:#f5f4ef; --gl-sp-pink:#ff74bf; --gl-sp-red:#ff74bf; }
[data-look="pop"] { color-scheme: dark; --gl-ground:#08080a; --gl-tone:#0e0e11; --gl-tone2:#121216; --gl-hi:#19191d; --gl-deep:#020203; --gl-cam:#2f2e28; --gl-bust:#413d2b; --gl-ink:#f5f4ef; --gl-card:#131316; --gl-accent:#f5f4ef; --gl-on-accent:#0b0b0e; --gl-accent-ink:#f5f4ef; --gl-s1:#ff74bf; --gl-on-s1:#0b0b0e; --gl-s2:#3ddc84; --gl-on-s2:#0b0b0e; --gl-wash:rgba(8,8,10,0.92); --gl-scrim:rgba(8,8,10,0.82); --gl-text:#f5f4ef; --gl-text2:#cbc9c2; --gl-line:#8b8b92; --gl-line2:#2c2c33; --gl-raised:#232328; --gl-band:#131316; --gl-band-lo:#08080a; --gl-rule:#f5f4ef; --gl-scan0:#f5f4ef; --gl-scan1:#f5f4ef; --gl-scan2:#cbc9c2; --gl-keyline:#08080a; --gl-accent-rgb:245 244 239; --gl-s1-rgb:255 116 191; --gl-s2-rgb:61 220 132; --gl-ground-rgb:8 8 10; --gl-card-rgb:19 19 22; --gl-text-rgb:245 244 239; --gl-rule-rgb:245 244 239; --gl-band-rgb:19 19 22; --gl-rim:#8b8b92; --gl-rim-soft:#2c2c33; --gl-beam:#f5f4ef; --gl-st-line:#74747c; --gl-st-line2:#2c2c33; --gl-fill:#adaba5; --gl-on-fill:#0b0b0e; --gl-type:#cbc9c2; --gl-type-deep:#636368; --gl-agent:#b39cff; --gl-on-agent:#0b0b0e; --gl-on-bright:#0b0b0e; --gl-accent-line:#f5f4ef; --gl-well:#0c0c0f; --gl-ground-hi:#101014; --gl-pat:#121217; --gl-pat-line:#1d1d25; --gl-pat-disc:#0b0b0e; --gl-pat-card:rgba(245,244,239,0); --gl-rim-rgb:139 139 146; --gl-beam-rgb:245 244 239; --gl-fill-rgb:173 171 165; --gl-type-rgb:203 201 194; --gl-agent-rgb:179 156 255; --gl-glow-rgb:245 244 239; --gl-dan:#4fa8ff; --gl-on-dan:#0b0b0e; --gl-alexis:#ff74bf; --gl-guest:#3ddc84; --gl-accent-hi:#ecebe8; --gl-on-accent-hi:#0b0b0e; --gl-key:#74747c; --gl-hair:#2c2c33; --gl-track:#2d2d32; --gl-stamp-ink:#0b0b0e; --gl-stamp-paper:#ffffff; --gl-stamp-cut:#0b0b0e; --gl-dan-rgb:79 168 255; --gl-key-rgb:116 116 124; --gl-stamp-ink-rgb:11 11 14; --gl-hair-rgb:44 44 51; --gl-sp-violet:#9d7bff; --gl-sp-blue:#4fa8ff; --gl-sp-green:#3ddc84; --gl-sp-yellow:#ffd84a; --gl-sp-orange:#ff9a3c; --gl-sp-white:#f5f4ef; --gl-sp-pink:#ff74bf; --gl-sp-red:#ff74bf; }
[data-look="games"] { color-scheme: dark; --gl-ground:#0a0709; --gl-tone:#110d0f; --gl-tone2:#161113; --gl-hi:#1e171a; --gl-deep:#030202; --gl-cam:#4d1635; --gl-bust:#4a3740; --gl-ink:#f5f4ef; --gl-card:#861d5c; --gl-accent:#ff74bf; --gl-on-accent:#0b0b0e; --gl-accent-ink:#ff74bf; --gl-s1:#ff74bf; --gl-on-s1:#0b0b0e; --gl-s2:#3ddc84; --gl-on-s2:#0b0b0e; --gl-wash:rgba(10,7,9,0.92); --gl-scrim:rgba(10,7,9,0.82); --gl-text:#f5f4ef; --gl-text2:#e7e5de; --gl-line:#eb7ab5; --gl-line2:#925474; --gl-raised:#993b6f; --gl-band:#861d5c; --gl-band-lo:#0a0709; --gl-rule:#ff74bf; --gl-scan0:#f5f4ef; --gl-scan1:#f5f4ef; --gl-scan2:#e7e5de; --gl-keyline:#0a0709; --gl-accent-rgb:255 116 191; --gl-s1-rgb:255 116 191; --gl-s2-rgb:61 220 132; --gl-ground-rgb:10 7 9; --gl-card-rgb:134 29 92; --gl-text-rgb:245 244 239; --gl-rule-rgb:255 116 191; --gl-band-rgb:134 29 92; --gl-rim:#eb7ab5; --gl-rim-soft:#925474; --gl-beam:#ff74bf; --gl-st-line:#aba2a6; --gl-st-line2:#925474; --gl-fill:#d372a4; --gl-on-fill:#0b0b0e; --gl-type:#ffdbeb; --gl-type-deep:#d54e9a; --gl-agent:#b39cff; --gl-on-agent:#0b0b0e; --gl-on-bright:#0b0b0e; --gl-accent-line:#ff74bf; --gl-well:#0f0b0d; --gl-ground-hi:#140f11; --gl-pat:#181014; --gl-pat-line:#261a20; --gl-pat-disc:#0f0a0c; --gl-pat-card:rgba(245,244,239,0); --gl-rim-rgb:235 122 181; --gl-beam-rgb:255 116 191; --gl-fill-rgb:211 114 164; --gl-type-rgb:255 219 235; --gl-agent-rgb:179 156 255; --gl-glow-rgb:255 116 191; --gl-dan:#4fa8ff; --gl-on-dan:#0b0b0e; --gl-alexis:#ff74bf; --gl-guest:#3ddc84; --gl-accent-hi:#feb2d7; --gl-on-accent-hi:#0b0b0e; --gl-key:#aba2a6; --gl-hair:#925474; --gl-track:#9d4a76; --gl-stamp-ink:#e158a4; --gl-stamp-paper:#ffffff; --gl-stamp-cut:#0b0b0e; --gl-dan-rgb:79 168 255; --gl-key-rgb:171 162 166; --gl-stamp-ink-rgb:225 88 164; --gl-hair-rgb:146 84 116; --gl-sp-violet:#9d7bff; --gl-sp-blue:#4fa8ff; --gl-sp-green:#3ddc84; --gl-sp-yellow:#ffd84a; --gl-sp-orange:#ff9a3c; --gl-sp-white:#f5f4ef; --gl-sp-pink:#ff74bf; --gl-sp-red:#ff74bf; }
[data-look="clay"] { color-scheme: dark; --gl-ground:#0a0806; --gl-tone:#110e0b; --gl-tone2:#16120e; --gl-hi:#1e1814; --gl-deep:#030201; --gl-cam:#462402; --gl-bust:#49392d; --gl-ink:#f5f4ef; --gl-card:#754008; --gl-accent:#ff9a3c; --gl-on-accent:#0b0b0e; --gl-accent-ink:#ff9a3c; --gl-s1:#ff74bf; --gl-on-s1:#0b0b0e; --gl-s2:#3ddc84; --gl-on-s2:#0b0b0e; --gl-wash:rgba(10,8,6,0.92); --gl-scrim:rgba(10,8,6,0.82); --gl-text:#f5f4ef; --gl-text2:#edebe4; --gl-line:#e4924c; --gl-line2:#8d603b; --gl-raised:#924f03; --gl-band:#754008; --gl-band-lo:#0a0806; --gl-rule:#ff9a3c; --gl-scan0:#f5f4ef; --gl-scan1:#f5f4ef; --gl-scan2:#edebe4; --gl-keyline:#0a0806; --gl-accent-rgb:255 154 60; --gl-s1-rgb:255 116 191; --gl-s2-rgb:61 220 132; --gl-ground-rgb:10 8 6; --gl-card-rgb:117 64 8; --gl-text-rgb:245 244 239; --gl-rule-rgb:255 154 60; --gl-band-rgb:117 64 8; --gl-rim:#e4924c; --gl-rim-soft:#8d603b; --gl-beam:#ff9a3c; --gl-st-line:#b0a8a3; --gl-st-line2:#8d603b; --gl-fill:#d58e53; --gl-on-fill:#0b0b0e; --gl-type:#fee6d5; --gl-type-deep:#c86e03; --gl-agent:#b39cff; --gl-on-agent:#0b0b0e; --gl-on-bright:#0b0b0e; --gl-accent-line:#ff9a3c; --gl-well:#0f0c09; --gl-ground-hi:#140f0c; --gl-pat:#18110c; --gl-pat-line:#261c14; --gl-pat-disc:#0f0a07; --gl-pat-card:rgba(245,244,239,0); --gl-rim-rgb:228 146 76; --gl-beam-rgb:255 154 60; --gl-fill-rgb:213 142 83; --gl-type-rgb:254 230 213; --gl-agent-rgb:179 156 255; --gl-glow-rgb:255 154 60; --gl-dan:#4fa8ff; --gl-on-dan:#0b0b0e; --gl-alexis:#ff74bf; --gl-guest:#3ddc84; --gl-accent-hi:#fecaa2; --gl-on-accent-hi:#0b0b0e; --gl-key:#b0a8a3; --gl-hair:#8d603b; --gl-track:#975b25; --gl-stamp-ink:#ce7411; --gl-stamp-paper:#ffffff; --gl-stamp-cut:#0b0b0e; --gl-dan-rgb:79 168 255; --gl-key-rgb:176 168 163; --gl-stamp-ink-rgb:206 116 17; --gl-hair-rgb:141 96 59; --gl-sp-violet:#9d7bff; --gl-sp-blue:#4fa8ff; --gl-sp-green:#3ddc84; --gl-sp-yellow:#ffd84a; --gl-sp-orange:#ff9a3c; --gl-sp-white:#f5f4ef; --gl-sp-pink:#ff74bf; --gl-sp-red:#ff74bf; }
[data-look="turf"] { color-scheme: dark; --gl-ground:#060907; --gl-tone:#0c0f0d; --gl-tone2:#0f1411; --gl-hi:#151b17; --gl-deep:#010202; --gl-cam:#04381c; --gl-bust:#314236; --gl-ink:#f5f4ef; --gl-card:#0a5d33; --gl-accent:#3ddc84; --gl-on-accent:#0b0b0e; --gl-accent-ink:#3ddc84; --gl-s1:#ff74bf; --gl-on-s1:#0b0b0e; --gl-s2:#3ddc84; --gl-on-s2:#0b0b0e; --gl-wash:rgba(6,9,7,0.92); --gl-scrim:rgba(6,9,7,0.82); --gl-text:#f5f4ef; --gl-text2:#f2f0e9; --gl-line:#49bf79; --gl-line2:#3c7952; --gl-raised:#04753f; --gl-band:#0a5d33; --gl-band-lo:#060907; --gl-rule:#3ddc84; --gl-scan0:#f5f4ef; --gl-scan1:#f5f4ef; --gl-scan2:#f2f0e9; --gl-keyline:#060907; --gl-accent-rgb:61 220 132; --gl-s1-rgb:255 116 191; --gl-s2-rgb:61 220 132; --gl-ground-rgb:6 9 7; --gl-card-rgb:10 93 51; --gl-text-rgb:245 244 239; --gl-rule-rgb:61 220 132; --gl-band-rgb:10 93 51; --gl-rim:#49bf79; --gl-rim-soft:#3c7952; --gl-beam:#3ddc84; --gl-st-line:#a9b1ab; --gl-st-line2:#3c7952; --gl-fill:#5bbd7f; --gl-on-fill:#0b0b0e; --gl-type:#d0fbdc; --gl-type-deep:#07a159; --gl-agent:#b39cff; --gl-on-agent:#0b0b0e; --gl-on-bright:#0b0b0e; --gl-accent-line:#3ddc84; --gl-well:#0a0e0b; --gl-ground-hi:#0d120e; --gl-pat:#0d1510; --gl-pat-line:#16211a; --gl-pat-disc:#080d09; --gl-pat-card:rgba(245,244,239,0); --gl-rim-rgb:73 191 121; --gl-beam-rgb:61 220 132; --gl-fill-rgb:91 189 127; --gl-type-rgb:208 251 220; --gl-agent-rgb:179 156 255; --gl-glow-rgb:61 220 132; --gl-dan:#4fa8ff; --gl-on-dan:#0b0b0e; --gl-alexis:#ff74bf; --gl-guest:#3ddc84; --gl-accent-hi:#9ff2ba; --gl-on-accent-hi:#0b0b0e; --gl-key:#a9b1ab; --gl-hair:#3c7952; --gl-track:#217d49; --gl-stamp-ink:#02a058; --gl-stamp-paper:#ffffff; --gl-stamp-cut:#0b0b0e; --gl-dan-rgb:79 168 255; --gl-key-rgb:169 177 171; --gl-stamp-ink-rgb:2 160 88; --gl-hair-rgb:60 121 82; --gl-sp-violet:#9d7bff; --gl-sp-blue:#4fa8ff; --gl-sp-green:#3ddc84; --gl-sp-yellow:#ffd84a; --gl-sp-orange:#ff9a3c; --gl-sp-white:#f5f4ef; --gl-sp-pink:#ff74bf; --gl-sp-red:#ff74bf; }
[data-look="forum"] { color-scheme: dark; --gl-ground:#08080b; --gl-tone:#0e0e12; --gl-tone2:#131217; --gl-hi:#19181f; --gl-deep:#020203; --gl-cam:#312256; --gl-bust:#3d3a4c; --gl-ink:#f5f4ef; --gl-card:#55379a; --gl-accent:#b39cff; --gl-on-accent:#0b0b0e; --gl-accent-ink:#b39cff; --gl-s1:#ff74bf; --gl-on-s1:#0b0b0e; --gl-s2:#3ddc84; --gl-on-s2:#0b0b0e; --gl-wash:rgba(8,8,11,0.92); --gl-scrim:rgba(8,8,11,0.82); --gl-text:#f5f4ef; --gl-text2:#e9e7df; --gl-line:#ab91fe; --gl-line2:#6d609c; --gl-raised:#674fa9; --gl-band:#55379a; --gl-band-lo:#08080b; --gl-rule:#b39cff; --gl-scan0:#f5f4ef; --gl-scan1:#f5f4ef; --gl-scan2:#e9e7df; --gl-keyline:#08080b; --gl-accent-rgb:179 156 255; --gl-s1-rgb:255 116 191; --gl-s2-rgb:61 220 132; --gl-ground-rgb:8 8 11; --gl-card-rgb:85 55 154; --gl-text-rgb:245 244 239; --gl-rule-rgb:179 156 255; --gl-band-rgb:85 55 154; --gl-rim:#ab91fe; --gl-rim-soft:#6d609c; --gl-beam:#b39cff; --gl-st-line:#a8a7af; --gl-st-line2:#6d609c; --gl-fill:#9c8dd2; --gl-on-fill:#0b0b0e; --gl-type:#e8e4ff; --gl-type-deep:#906bee; --gl-agent:#b39cff; --gl-on-agent:#0b0b0e; --gl-on-bright:#0b0b0e; --gl-accent-line:#b39cff; --gl-well:#0d0c10; --gl-ground-hi:#111015; --gl-pat:#131119; --gl-pat-line:#1e1c27; --gl-pat-disc:#0b0b0f; --gl-pat-card:rgba(245,244,239,0); --gl-rim-rgb:171 145 254; --gl-beam-rgb:179 156 255; --gl-fill-rgb:156 141 210; --gl-type-rgb:232 228 255; --gl-agent-rgb:179 156 255; --gl-glow-rgb:179 156 255; --gl-dan:#4fa8ff; --gl-on-dan:#0b0b0e; --gl-alexis:#ff74bf; --gl-guest:#3ddc84; --gl-accent-hi:#d0c6fc; --gl-on-accent-hi:#0b0b0e; --gl-key:#a8a7af; --gl-hair:#6d609c; --gl-track:#6f5bab; --gl-stamp-ink:#947cdc; --gl-stamp-paper:#ffffff; --gl-stamp-cut:#0b0b0e; --gl-dan-rgb:79 168 255; --gl-key-rgb:168 167 175; --gl-stamp-ink-rgb:148 124 220; --gl-hair-rgb:109 96 156; --gl-sp-violet:#9d7bff; --gl-sp-blue:#4fa8ff; --gl-sp-green:#3ddc84; --gl-sp-yellow:#ffd84a; --gl-sp-orange:#ff9a3c; --gl-sp-white:#f5f4ef; --gl-sp-pink:#ff74bf; --gl-sp-red:#ff74bf; }
[data-look="day"] { color-scheme: light; --gl-ground:#f2f1ec; --gl-tone:#e7e6dd; --gl-tone2:#dfddd5; --gl-hi:#f6f5f1; --gl-deep:#92928e; --gl-cam:#ddd0b0; --gl-bust:#786e54; --gl-ink:#0b0b0e; --gl-card:#fffaee; --gl-accent:#ffd84a; --gl-on-accent:#0b0b0e; --gl-accent-ink:#8a710c; --gl-s1:#cc2f82; --gl-on-s1:#ffffff; --gl-s2:#0b7d44; --gl-on-s2:#ffffff; --gl-wash:rgba(242,241,236,0.92); --gl-scrim:rgba(242,241,236,0.82); --gl-text:#0b0b0e; --gl-text2:#424249; --gl-line:#907008; --gl-line2:#eddfbc; --gl-raised:#fee9b9; --gl-band:#fffaee; --gl-band-lo:#f2f1ec; --gl-rule:#8d6d01; --gl-scan0:#0b0b0e; --gl-scan1:#0b0b0e; --gl-scan2:#424249; --gl-keyline:#f2f1ec; --gl-accent-rgb:255 216 74; --gl-s1-rgb:204 47 130; --gl-s2-rgb:11 125 68; --gl-ground-rgb:242 241 236; --gl-card-rgb:255 250 238; --gl-text-rgb:11 11 14; --gl-rule-rgb:141 109 1; --gl-band-rgb:255 250 238; --gl-rim:#907008; --gl-rim-soft:#eddfbc; --gl-beam:#8d6d01; --gl-st-line:#7a7871; --gl-st-line2:#eddfbc; --gl-fill:#dcca8f; --gl-on-fill:#0b0b0e; --gl-type:#604a05; --gl-type-deep:#463503; --gl-agent:#6a45d8; --gl-on-agent:#ffffff; --gl-on-bright:#0b0b0e; --gl-accent-line:#a6880c; --gl-well:#f7f7f4; --gl-ground-hi:#ecebe2; --gl-pat:#e5e2d8; --gl-pat-line:#d7d4c5; --gl-pat-disc:#eeece4; --gl-pat-card:rgba(11,11,14,0); --gl-rim-rgb:144 112 8; --gl-beam-rgb:141 109 1; --gl-fill-rgb:220 202 143; --gl-type-rgb:96 74 5; --gl-agent-rgb:106 69 216; --gl-glow-rgb:255 216 74; --gl-dan:#1f6fd6; --gl-on-dan:#ffffff; --gl-alexis:#cc2f82; --gl-guest:#0b7d44; --gl-accent-hi:#feebad; --gl-on-accent-hi:#0b0b0e; --gl-key:#7a7871; --gl-hair:#eddfbc; --gl-track:#fce8b7; --gl-stamp-ink:#a5880b; --gl-stamp-paper:#ffffff; --gl-stamp-cut:#0b0b0e; --gl-dan-rgb:31 111 214; --gl-key-rgb:122 120 113; --gl-stamp-ink-rgb:165 136 11; --gl-hair-rgb:237 223 188; --gl-sp-violet:#6a45d8; --gl-sp-blue:#1f6fd6; --gl-sp-green:#0b7d44; --gl-sp-yellow:#a87f00; --gl-sp-orange:#c95a0a; --gl-sp-white:#0b0b0e; --gl-sp-pink:#cc2f82; --gl-sp-red:#cc2f82; }
[data-look="sky"] { color-scheme: light; --gl-ground:#ecf2f9; --gl-tone:#dde6f3; --gl-tone2:#d5deeb; --gl-hi:#f1f6fc; --gl-deep:#8e9297; --gl-cam:#bbd3f3; --gl-bust:#5f7086; --gl-ink:#0b0b0e; --gl-card:#f7faff; --gl-accent:#4fa8ff; --gl-on-accent:#0b0b0e; --gl-accent-ink:#1076c9; --gl-s1:#cc2f82; --gl-on-s1:#ffffff; --gl-s2:#0b7d44; --gl-on-s2:#ffffff; --gl-wash:rgba(236,242,249,0.92); --gl-scrim:rgba(236,242,249,0.82); --gl-text:#0b0b0e; --gl-text2:#424249; --gl-line:#1a73d5; --gl-line2:#cbe2ff; --gl-raised:#dfedff; --gl-band:#f7faff; --gl-band-lo:#ecf2f9; --gl-rule:#1570d1; --gl-scan0:#0b0b0e; --gl-scan1:#0b0b0e; --gl-scan2:#424249; --gl-keyline:#ecf2f9; --gl-accent-rgb:79 168 255; --gl-s1-rgb:204 47 130; --gl-s2-rgb:11 125 68; --gl-ground-rgb:236 242 249; --gl-card-rgb:247 250 255; --gl-text-rgb:11 11 14; --gl-rule-rgb:21 112 209; --gl-band-rgb:247 250 255; --gl-rim:#1a73d5; --gl-rim-soft:#cbe2ff; --gl-beam:#1570d1; --gl-st-line:#74787f; --gl-st-line2:#cbe2ff; --gl-fill:#98c1ed; --gl-on-fill:#0b0b0e; --gl-type:#034b95; --gl-type-deep:#02376f; --gl-agent:#6a45d8; --gl-on-agent:#ffffff; --gl-on-bright:#0b0b0e; --gl-accent-line:#338fe4; --gl-well:#f4f7fc; --gl-ground-hi:#e2ebf8; --gl-pat:#d8e3f2; --gl-pat-line:#c5d5eb; --gl-pat-disc:#e4edf8; --gl-pat-card:rgba(11,11,14,0); --gl-rim-rgb:26 115 213; --gl-beam-rgb:21 112 209; --gl-fill-rgb:152 193 237; --gl-type-rgb:3 75 149; --gl-agent-rgb:106 69 216; --gl-glow-rgb:79 168 255; --gl-dan:#1f6fd6; --gl-on-dan:#ffffff; --gl-alexis:#cc2f82; --gl-guest:#0b7d44; --gl-accent-hi:#8ab7e7; --gl-on-accent-hi:#0b0b0e; --gl-key:#74787f; --gl-hair:#cbe2ff; --gl-track:#dcebff; --gl-stamp-ink:#338ee3; --gl-stamp-paper:#ffffff; --gl-stamp-cut:#0b0b0e; --gl-dan-rgb:31 111 214; --gl-key-rgb:116 120 127; --gl-stamp-ink-rgb:51 142 227; --gl-hair-rgb:203 226 255; --gl-sp-violet:#6a45d8; --gl-sp-blue:#1f6fd6; --gl-sp-green:#0b7d44; --gl-sp-yellow:#a87f00; --gl-sp-orange:#c95a0a; --gl-sp-white:#0b0b0e; --gl-sp-pink:#cc2f82; --gl-sp-red:#cc2f82; }

/* INK / PAPER FLIP: on the stage (program, previews, thumbnails, transitions) and on any page that opts in with
   .gl-v3, "--gl-k" is the look's text and "--gl-w" the look's card, so every old "ink on white" rule turns into
   "light on card" on dark looks without a code change. */
.gl-stage, .gl-stage [data-look], .gl-v3, .gl-v3 [data-look] { --gl-k: var(--gl-ink); --gl-w: var(--gl-card); }

/* MODE: glows on (dark) / off (light); the highlighter screens on dark and multiplies on light; display type is flat
   warm white (C); the "ramp" names stay (legacy components read them) and resolve to flat colours. */
:root, [data-mode="dark"], [data-look="network"], [data-look="pop"], [data-look="games"], [data-look="clay"], [data-look="turf"], [data-look="forum"] {
  --gl-shadow-a: .5; --gl-glow-k: 1; --gl-ink-hl-blend: screen; --gl-ink-hl-a: .34;
  --gl-ramp-0: var(--gl-text); --gl-ramp-1: var(--gl-text); --gl-ramp-2: var(--gl-text);
  --gl-cut: rgb(var(--gl-ground-rgb) / .6);
  --gl-ramp-a0: var(--gl-accent); --gl-ramp-a1: var(--gl-accent); --gl-ramp-a2: var(--gl-accent);
}
[data-look="day"], [data-look="sky"], [data-mode="light"]:not([data-look="network"]):not([data-look="pop"]):not([data-look="games"]):not([data-look="clay"]):not([data-look="turf"]):not([data-look="forum"]) {
  --gl-shadow-a: .12; --gl-glow-k: 0; --gl-ink-hl-blend: multiply; --gl-ink-hl-a: .42;
  --gl-ramp-0: var(--gl-text); --gl-ramp-1: var(--gl-text); --gl-ramp-2: var(--gl-text);
  --gl-cut: rgb(255 255 255 / .85);
  --gl-ramp-a0: var(--gl-accent-ink); --gl-ramp-a1: var(--gl-accent-ink); --gl-ramp-a2: var(--gl-accent-ink);
}

/* INTRO STUDIO keeps its v3 faces until the intro studio's v5 pass (STYLE-v5 §16): its stills measure text in Anton /
   Big Shoulders (intro-studio/still.js FAM) and the engine canvas draws in them (intro/kit.js), so the HTML must match. */
.is2 { --gl-display: "Anton", "Archivo XC", Impact, "Arial Narrow", sans-serif; --gl-label: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --gl-show: var(--gl-label); --gl-num: "Big Shoulders Display", "Archivo XC", "Arial Narrow", sans-serif; --gl-ls-cg: .14em; }

/* =====================================================================================================
   SHARED PRIMITIVES (.gl-*), C recipes with Dan's changes. Compose these; do not invent new borders, shadows, radii.
   ===================================================================================================== */

/* the stage: fixed logical 1920x1080, scaled by JS (transform: translate() scale(), origin 0 0) */
.gl-stage { position: absolute; left: 0; top: 0; width: var(--gl-W); height: var(--gl-H); overflow: hidden; transform-origin: 0 0;
  background: var(--gl-ground); color: var(--gl-text); font-family: var(--gl-read); -webkit-font-smoothing: antialiased; }
.gl-layer { position: absolute; inset: 0; }

/* ---------- type ---------- */
.gl-cg   { font-family: var(--gl-label); font-weight: 600; text-transform: uppercase; line-height: var(--gl-lh-cg); letter-spacing: var(--gl-ls-cg); white-space: nowrap; }
.gl-num  { font-family: var(--gl-num); font-weight: 700; line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gl-read { font-family: var(--gl-read); font-weight: 700; line-height: var(--gl-lh-read); letter-spacing: var(--gl-ls-read); text-wrap: balance; }
.gl-display { font-family: var(--gl-display); font-weight: 700; text-transform: uppercase; line-height: 1; letter-spacing: var(--gl-ls-display); white-space: nowrap; color: var(--gl-text); }
.gl-sl   { display: inline-block; transform: skewX(var(--gl-slant)); }        /* legacy: a no-op (type is upright) */
.gl-edge   { text-shadow: var(--gl-edge); }
.gl-edge-l { text-shadow: var(--gl-edge-l); }

/* DISPLAY TYPE (C): the geometric caps in FLAT warm white, ONE glint when they land, then about every 8 s. The v3
   markup is unchanged:
     <span class="gl-scan" data-t="ALEXIS SAYS"><span class="gl-scan-f" data-t="ALEXIS SAYS">ALEXIS SAYS</span></span>
   .is-accent fills it with the family accent (a winner); .is-flat is the same flat white; .is-lines is the LINE FONT
   (Dan: "I'm good with the line font"): the letters cut by the band raster in ONE colour; .is-band cuts them by the six
   spectrum lines (only on the rainbow band, STYLE-v5 §9). Both need line-height .7 so the caps fill the box. */
.gl-scan { position: relative; display: inline-block; font-family: var(--gl-display); font-weight: 700; text-transform: uppercase;
  line-height: 1; letter-spacing: var(--gl-ls-display); white-space: nowrap; filter: none; }
.gl-scan::before { content: none; }
.gl-scan-f { position: relative; z-index: 1; display: inline-block; color: var(--gl-text); background: none; }
.gl-scan-f::after { content: attr(data-t); position: absolute; inset: 0; pointer-events: none; color: transparent;
  background: linear-gradient(100deg, transparent 40%, rgb(255 255 255 / 0) 44%, rgb(255 255 255 / .85) 50%, rgb(255 255 255 / 0) 56%, transparent 60%) no-repeat;
  background-size: 260% 100%; background-position: 170% 0; -webkit-background-clip: text; background-clip: text;
  animation: gl-glint calc(var(--gl-d-glint) / max(var(--gl-motion), .001)) cubic-bezier(.4, 0, .3, 1) var(--gl-glint-delay, .4s) infinite; }
.gl-scan.is-accent .gl-scan-f { color: var(--gl-accent); }
.gl-scan.is-flat .gl-scan-f { color: var(--gl-text); }
.gl-scan.is-lines, .gl-scan.is-band { line-height: var(--gl-cap); }
.gl-scan.is-lines .gl-scan-f { color: transparent;
  background-image: repeating-linear-gradient(to bottom, var(--c, var(--gl-text)) 0 var(--gl-scan-on), transparent var(--gl-scan-on) var(--gl-scan-per));
  -webkit-background-clip: text; background-clip: text; }
/* the six band colours through the letters, in em (cap .7em = 5 pitches of .125em + a .075em line) */
.gl-scan.is-band .gl-scan-f { color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(to bottom,
    var(--gl-sp-violet) 0 var(--gl-scan-on), transparent 0 var(--gl-scan-per),
    var(--gl-sp-blue) 0 calc(var(--gl-scan-per) + var(--gl-scan-on)), transparent 0 calc(var(--gl-scan-per) * 2),
    var(--gl-sp-green) 0 calc(var(--gl-scan-per) * 2 + var(--gl-scan-on)), transparent 0 calc(var(--gl-scan-per) * 3),
    var(--gl-sp-yellow) 0 calc(var(--gl-scan-per) * 3 + var(--gl-scan-on)), transparent 0 calc(var(--gl-scan-per) * 4),
    var(--gl-sp-orange) 0 calc(var(--gl-scan-per) * 4 + var(--gl-scan-on)), transparent 0 calc(var(--gl-scan-per) * 5),
    var(--gl-sp-white) 0 calc(var(--gl-scan-per) * 5 + var(--gl-scan-on))); }
/* legacy .gl-title (transition / slam title, sized by kinetic.js): flat warm white, no ramp, no stroke */
.gl-title { font-family: var(--gl-display-fit); font-weight: 700; text-transform: uppercase; letter-spacing: var(--gl-ls-display);
  color: var(--gl-text); background: none; -webkit-text-stroke: 0; filter: none; text-shadow: none; }

/* ---------- THE RAINBOW BAND (STYLE-v5 §9). The show's ONE signature device: six horizontal lines, each ONE colour
   (violet, blue, green, yellow, orange, white, top to bottom; never red), running in from the frame edges and stopping
   1.25 pitches short of a title that sits CENTRED on the band (cap height = band height). One band per frame, never
   repeated. Markup:
     <div class="gl-band"><i class="gl-band-sheen"></i><span class="gl-band-cut"><span class="gl-band-t">ALEXIS SAYS</span></span></div>
   .gl-band-t is solid warm white; add .is-lines for the line font (the six lines run through the letters).
   Size with --gl-band-t / --gl-band-p (ident 13/22 · logo 10/17 · plate 6/10). ---------- */
.gl-band, .gl-band-t.is-lines { --bt: var(--gl-band-t); --bp: var(--gl-band-p); --bh: calc(var(--bp) * 5 + var(--bt));
  --gl-band-grad: linear-gradient(to bottom,
    var(--gl-sp-violet) 0 var(--bt), transparent 0 var(--bp),
    var(--gl-sp-blue) 0 calc(var(--bp) + var(--bt)), transparent 0 calc(var(--bp) * 2),
    var(--gl-sp-green) 0 calc(var(--bp) * 2 + var(--bt)), transparent 0 calc(var(--bp) * 3),
    var(--gl-sp-yellow) 0 calc(var(--bp) * 3 + var(--bt)), transparent 0 calc(var(--bp) * 4),
    var(--gl-sp-orange) 0 calc(var(--bp) * 4 + var(--bt)), transparent 0 calc(var(--bp) * 5),
    var(--gl-sp-white) 0 var(--bh)); }
.gl-band { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: var(--bh);
  background: var(--gl-band-grad); border: 0; box-shadow: none; overflow: visible; }
.gl-band::after { content: none; }
.gl-band > .gl-band-cut { position: relative; z-index: 1; display: block; height: var(--bh); padding: 0 calc(var(--bp) * var(--gl-band-gap)); background: var(--gl-ground); }
.gl-band-t { display: block; height: var(--bh); font: 700 calc(var(--bh) / var(--gl-cap)) / var(--gl-cap) var(--gl-display); letter-spacing: var(--gl-ls-display);
  text-transform: uppercase; white-space: nowrap; color: var(--gl-text); }
.gl-band-t.is-lines { color: transparent; background-image: var(--gl-band-grad); -webkit-background-clip: text; background-clip: text; }
/* legacy shapes (v3/v4 markup): a lean band and a solid band render as the plain band */
.gl-band.is-lean { clip-path: none; }
.gl-band.is-solid { background: var(--gl-band-grad); }
/* the light that travels along the band's lines (C's sheen, masked to the lines): <i class="gl-band-sheen"></i> goes FIRST in
   .gl-band, so the title's ground plate (.gl-band-cut, z 1) hides it: the light runs along the lines, never across the type */
.gl-band > .gl-band-sheen { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask: repeating-linear-gradient(to bottom, #000 0 var(--bt), transparent var(--bt) var(--bp)); mask: repeating-linear-gradient(to bottom, #000 0 var(--bt), transparent var(--bt) var(--bp)); }
.gl-band > .gl-band-sheen::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 240px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .34), transparent); transform: translateX(-260px);
  animation: gl-band-sheen calc(var(--gl-d-sheen) / max(var(--gl-motion), .001)) var(--gl-ease-sheen) 1s infinite; }
/* a single thin rule (an underline, a divider with a job) */
.gl-rule { height: 2px; background: var(--gl-beam); box-shadow: none; }

/* ---------- THE SEGMENT BUG (STYLE-v5 §11.1, C): at x 0, y 48, 23 px tall: five fine lines (3 px on a 5 px pitch, 52 px) in
   the look's family run in from the frame edge, 12 px, then the title in GL Display 700 at cap 23 (33 px), .05 em, warm
   white. No plate, no box, no band rules: the one stripe element on a board.
     static:  <div class="gl-bug"><b>DEAR ALEXIS</b></div>                                   (the lines are its ::before)
     program: <div class="gl-bug is-live"><i class="gl-bug-ln"></i><b>DEAR ALEXIS</b></div>  (live/bugs.js draws them in)
   The live lines carry the bug's drift (§13.2): a soft light crosses them at < 10 px/s. ---------- */
.gl-bug { position: absolute; left: var(--gl-bug-x); top: var(--gl-bug-y); height: var(--gl-bug-h); display: flex; align-items: flex-start; gap: var(--gl-bug-gap); z-index: var(--gl-z-bugs); pointer-events: none; }
.gl-bug::before, .gl-bug > .gl-bug-ln { content: ""; display: block; flex: none; width: var(--gl-bug-w); height: var(--gl-bug-h);
  background: repeating-linear-gradient(to bottom, var(--gl-beam) 0 var(--gl-bug-t), transparent var(--gl-bug-t) var(--gl-bug-p)); }
.gl-bug.is-live::before { content: none; display: none; }
.gl-bug > .gl-bug-ln { position: relative; overflow: hidden; }
.gl-bug > .gl-bug-ln::after { content: ""; position: absolute; top: 0; left: 0; width: 26px; height: 100%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .34), transparent);
  -webkit-mask: repeating-linear-gradient(to bottom, #000 0 var(--gl-bug-t), transparent var(--gl-bug-t) var(--gl-bug-p)); mask: repeating-linear-gradient(to bottom, #000 0 var(--gl-bug-t), transparent var(--gl-bug-t) var(--gl-bug-p));
  transform: translateX(-26px); animation: gl-bug-drift calc(12s / max(var(--gl-motion), .001)) linear 1.5s infinite; }
@keyframes gl-bug-drift { 0% { transform: translateX(-26px); } 70%, 100% { transform: translateX(var(--gl-bug-w)); } }
.gl-bug > b { display: block; font: 700 calc(var(--gl-bug-h) / var(--gl-cap)) / var(--gl-cap) var(--gl-display); letter-spacing: .05em; text-transform: uppercase; color: var(--gl-text); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .gl-bug > .gl-bug-ln::after { animation: none; visibility: hidden; } }

/* ---------- lead-ins (legacy names): a short bundle of the family's fine lines that ends AT the element ---------- */
.gl-bundle { display: block; height: var(--gl-bundle-h); --c: var(--gl-beam);
  background: repeating-linear-gradient(to bottom, var(--c) 0 var(--gl-bundle-line), transparent var(--gl-bundle-line) calc(var(--gl-bundle-line) + var(--gl-bundle-gap)));
  border-radius: 0; transform-origin: 0 50%; }
/* the spectrum as a stack (legacy markup): the six band colours, in order, never red */
.gl-spectrum { display: flex; flex-direction: column; gap: calc(var(--gl-band-p) - var(--gl-band-t)); }
.gl-spectrum > .gl-bundle { height: var(--gl-band-t); background: var(--c); }
.gl-spectrum > .gl-bundle:nth-child(1) { --c: var(--gl-sp-violet); } .gl-spectrum > .gl-bundle:nth-child(2) { --c: var(--gl-sp-blue); }
.gl-spectrum > .gl-bundle:nth-child(3) { --c: var(--gl-sp-green); }  .gl-spectrum > .gl-bundle:nth-child(4) { --c: var(--gl-sp-yellow); }
.gl-spectrum > .gl-bundle:nth-child(5) { --c: var(--gl-sp-orange); } .gl-spectrum > .gl-bundle:nth-child(6) { --c: var(--gl-sp-white); }
.gl-spectrum > .gl-bundle:nth-child(n+7) { display: none; }

/* ---------- slab: a flat plate in the family with dark caps (Besties rows, name plates). Upright; only Besties lean.
   Its caps are --gl-slab-face (default the show face). ---------- */
.gl-slab { position: relative; display: inline-flex; align-items: center; box-sizing: border-box; border: 0; border-radius: 3px;
  box-shadow: none; transform: skewX(var(--gl-slant)); transform-origin: 0 100%;
  font-family: var(--gl-slab-face, var(--gl-show)); font-weight: 700; text-transform: uppercase; line-height: 1; letter-spacing: .04em; white-space: nowrap;
  background: var(--gl-accent); color: var(--gl-on-accent); padding: .32em .7em .3em; }
.gl-slab > * { text-shadow: none; }
.gl-slab.is-accent { background: var(--gl-accent); color: var(--gl-on-accent); }
.gl-slab.is-fill   { background: var(--gl-fill); color: var(--gl-on-fill); }
.gl-slab.is-hi     { background: var(--gl-accent-hi); color: var(--gl-on-accent-hi); }
.gl-slab.is-s1     { background: var(--gl-s1); color: var(--gl-on-s1); }      /* a PERSON's plate (Alexis) */
.gl-slab.is-s2     { background: var(--gl-s2); color: var(--gl-on-s2); }      /* a guest's plate */
.gl-slab.is-dan    { background: var(--gl-dan); color: var(--gl-on-dan); }    /* Dan's plate */
.gl-slab.is-white  { background: var(--gl-white); color: var(--gl-black); }
.gl-slab.is-ink    { background: var(--gl-card); color: var(--gl-text); box-shadow: inset 0 0 0 var(--gl-bw) var(--gl-line); }
.gl-slab.is-band   { background: var(--gl-card); color: var(--gl-text); box-shadow: inset 0 0 0 var(--gl-bw) var(--gl-line); border-radius: var(--gl-radius-s); }

/* plate: a card-coloured plate with the neutral keyline (the role line under a name, labels) */
.gl-plate { position: relative; display: inline-flex; align-items: center; box-sizing: border-box; background: var(--gl-card); color: var(--gl-text);
  border: 0; box-shadow: inset 0 0 0 var(--gl-bw) var(--gl-key); border-radius: var(--gl-radius-s);
  font-family: var(--gl-read); font-weight: 700; line-height: 1; letter-spacing: var(--gl-ls-read); white-space: nowrap; padding: .36em .6em .34em; }

/* CHIP (C: one recipe for verdicts, beats, tags, the poll %): at rest a NEUTRAL 2 px keyline with warm-white caps;
   .is-accent outlines it in the family; .is-fill / .is-on fill it in the family with dark caps (+ the flicker);
   .is-num is the numeral chip (the poll %). People chips (.is-dan/.is-s1/.is-s2/.is-agent) only name a person. */
.gl-chip { --c: var(--gl-key); display: inline-flex; align-items: center; justify-content: center; gap: .4em; box-sizing: border-box;
  height: 2em; padding: 0 .8em; font: 600 var(--gl-fs-chip)/1 var(--gl-label); letter-spacing: .12em; text-transform: uppercase;
  border-radius: var(--gl-radius-s); border: var(--gl-bw) solid var(--c); box-shadow: none; color: var(--gl-text); background: transparent; white-space: nowrap; }
.gl-chip.is-accent { --c: var(--gl-accent); color: var(--gl-accent-ink); }
.gl-chip.is-dan { --c: var(--gl-dan); } .gl-chip.is-s1 { --c: var(--gl-s1); } .gl-chip.is-s2 { --c: var(--gl-s2); } .gl-chip.is-agent { --c: var(--gl-agent); }
.gl-chip.is-fill, .gl-chip.is-on { background: var(--c); color: var(--gl-on-bright); border-color: var(--c); }
.gl-chip.is-fill:not(.is-dan):not(.is-s1):not(.is-s2):not(.is-agent), .gl-chip.is-on:not(.is-dan):not(.is-s1):not(.is-s2):not(.is-agent) { --c: var(--gl-accent); }
.gl-chip.is-num { font: 700 calc(var(--gl-fs-chip) * 1.36)/1 var(--gl-num); letter-spacing: .01em; padding: 0; min-width: 100px; }
[data-mode="light"] .gl-chip.is-accent, [data-look="day"] .gl-chip.is-accent, [data-look="sky"] .gl-chip.is-accent { --c: var(--gl-accent-line); color: var(--gl-text); }

/* ---------- THE CARD (one recipe: note, list, table, poll, statement, location, jev question, clock).
   Card fill, ONE 2 px keyline in the LOOK'S FAMILY (the widget accent: no collar, no top rule, no echo), 6 px corners,
   the author as a 12 px dot top-right, no shadow, no name. ---------- */
.gl-card { position: absolute; box-sizing: border-box; background: var(--gl-card); color: var(--gl-text); border: var(--gl-bw) solid var(--gl-line);
  border-radius: var(--gl-radius); box-shadow: none; overflow: hidden; isolation: isolate; --who: var(--gl-line); }
.gl-card::before, .gl-pane::before { content: none; }
.gl-card.is-hero, .gl-pane { box-shadow: none; }
.gl-card[data-who="dan"], .gl-pane[data-who="dan"] { --who: var(--gl-dan); --who-rgb: var(--gl-dan-rgb); }
.gl-card[data-who="alexis"], .gl-pane[data-who="alexis"] { --who: var(--gl-s1); --who-rgb: var(--gl-s1-rgb); }
.gl-card[data-who="guest"], .gl-pane[data-who="guest"] { --who: var(--gl-s2); --who-rgb: var(--gl-s2-rgb); }
.gl-card[data-who="agent"], .gl-pane[data-who="agent"], .gl-card[data-who="jev"], .gl-pane[data-who="jev"] { --who: var(--gl-agent); --who-rgb: var(--gl-agent-rgb); }
.gl-card > .gl-in { position: relative; z-index: 1; height: 100%; }
/* the author: a 12 px dot in their colour, top-right (C .who). The name stays in the DOM for tools, never on program. */
.gl-author { position: absolute; right: 26px; top: 26px; z-index: 2; display: flex; align-items: center; gap: 0;
  font-size: 0; letter-spacing: 0; color: transparent; }
.gl-author::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--who); box-shadow: none; }
/* the kicker (C .kick): a small label, tracked caps in the family's whisper; no lead line */
.gl-kicker { display: block; font: 600 var(--gl-fs-label)/1 var(--gl-label); letter-spacing: var(--gl-ls-cg); text-transform: uppercase; color: var(--gl-type); }
.gl-kicker::after { content: none; }
/* v5: cards carry NO pattern (Dan: "remove the extraneous elements"); the classes stay so old markup stays valid */
.gl-cpat { display: none; }
.gl-cstack { display: none; }

/* LISTS (Dan: "a more traditional something"): round bullets in the family accent, or numbers. Never striped. */
.gl-list { list-style: none; margin: 0; padding: 0; font: 700 var(--gl-fs-read)/1.18 var(--gl-read); color: var(--gl-text); }
.gl-list > li { position: relative; padding: .22em 0 .22em 1.05em; }
.gl-list > li::before { content: ""; position: absolute; left: .1em; top: calc(.22em + .59em - .17em); width: .34em; height: .34em; border-radius: 50%; background: var(--gl-accent); }
.gl-list.is-num { counter-reset: gl-li; }
.gl-list.is-num > li { counter-increment: gl-li; padding-left: 1.45em; }
.gl-list.is-num > li::before { content: counter(gl-li) "."; width: auto; height: auto; border-radius: 0; background: none; top: .22em;
  font: 700 1em/1.18 var(--gl-num); color: var(--gl-accent-ink); }
.gl-list > li + li { border-top: var(--gl-bw-div) solid var(--gl-hair); }
.gl-list.is-plain > li + li { border-top: 0; }

/* pane: a card with a 26 px header strip (no title words; only the close x, operator-only) */
.gl-pane { position: absolute; box-sizing: border-box; background: var(--gl-card); color: var(--gl-text); border: var(--gl-bw) solid var(--gl-line);
  border-radius: var(--gl-radius); overflow: hidden; --who: var(--gl-s1); }
.gl-pane > .gl-pane-bar { height: 26px; margin-top: 0; background: transparent; box-shadow: inset 0 -1px 0 var(--gl-hair); display: flex; align-items: center; justify-content: flex-end; }
.gl-pane > .gl-pane-bar .gl-x { width: 26px; height: 26px; box-sizing: border-box; display: grid; place-items: center; background: transparent; color: var(--gl-text2);
  border-left: 1px solid var(--gl-hair); font: 600 15px/1 var(--gl-label); }
.gl-pane.is-focus { box-shadow: 0 0 0 var(--gl-bw-x) var(--gl-accent-line); }
.gl-board { position: absolute; box-sizing: border-box; background: var(--gl-card); color: var(--gl-text); border: var(--gl-bw) solid var(--gl-line);
  border-radius: var(--gl-radius); box-shadow: none; }
/* participant frame (C S6): a 3 px border in the PERSON's colour, 6 px corners, a flat fill behind the cut-out */
.gl-cam { position: absolute; box-sizing: border-box; background: var(--gl-cam); border: var(--gl-bw-frame) solid var(--who, var(--gl-line)); border-radius: var(--gl-radius);
  box-shadow: none; overflow: hidden; }
.gl-hard-s { box-shadow: var(--gl-hard-s); } .gl-hard { box-shadow: var(--gl-hard); } .gl-hard-l { box-shadow: var(--gl-hard-l); }

/* ---------- score: a numeral (no box); the winner is in the family accent ---------- */
.gl-score { display: inline-flex; align-items: flex-start; justify-content: flex-end; box-sizing: border-box; min-width: 2.2ch; padding: 0;
  background: none; color: var(--c, var(--gl-text)); border: 0; box-shadow: none; transform: none;
  font: 700 var(--gl-fs-score)/1 var(--gl-num); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.gl-score small { font-size: .62em; line-height: 1; margin-left: 1px; margin-top: .08em; }
.gl-score.is-win { color: var(--gl-accent-ink); text-shadow: none; }

/* ---------- BAR (one recipe: the poll, the Jev reveal, bar graphs, meters). SOLID (Dan: "I don't think these need to
   be lines"): a solid track, a solid fill, square-ish ends (radius 2). After it lands a soft light band crosses it
   every 3-6 s, rows staggered (--gl-sheen-delay). The winner fills in the family accent; the rest in the family's
   muted fill. The fill animates scaleX only. ---------- */
.gl-track { position: relative; overflow: hidden; height: 24px; background: var(--gl-track); border: 0; border-radius: 3px; box-shadow: none; transform: none; }
.gl-track > .gl-fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); will-change: transform; --c: var(--gl-fill);
  background: var(--c); border-radius: 2px; clip-path: none; border: 0; overflow: hidden; }
.gl-track > .gl-fill.is-win, .gl-track > .gl-fill.is-accent { --c: var(--gl-accent); }
.gl-track > .gl-fill.is-hi { --c: var(--gl-accent-hi); }
.gl-track > .gl-fill.is-dan { --c: var(--gl-dan); } .gl-track > .gl-fill.is-s1 { --c: var(--gl-s1); } .gl-track > .gl-fill.is-s2 { --c: var(--gl-s2); }
.gl-track > .gl-fill::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; mix-blend-mode: normal;
  background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / .34), rgb(255 255 255 / 0));
  transform: translateX(-120%);
  animation: gl-shimmer calc(var(--gl-d-shimmer) / max(var(--gl-motion), .001)) var(--gl-ease-sheen) var(--gl-sheen-delay, 0s) infinite; }
/* a vertical meter (Studio mixer): the same recipe on its side */
.gl-meter { position: relative; overflow: hidden; width: 10px; background: var(--gl-track); border-radius: 2px; }
.gl-meter > i { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--v, 0) * 100%); background: var(--c, var(--gl-accent)); border-radius: 2px; }
/* FLICKER (C): bright fills flutter +-3-6 % luminance for 120-240 ms at irregular 5-9 s, never in sync, never on text.
   Add .gl-flutter to a bright fill; stagger with --gl-fl-dur (5.5-9 s) and --gl-fl-delay (0.3-4 s). */
.gl-flutter { animation: gl-flutter var(--gl-fl-dur, var(--gl-d-flicker)) var(--gl-fl-delay, 1s) ease-in-out infinite; }

/* ---------- face buttons (Jev ring; operator chrome) ---------- */
.gl-face { width: 78px; height: 78px; border-radius: 50%; box-sizing: border-box; display: grid; place-items: center; border: var(--gl-bw) solid var(--gl-on-bright);
  box-shadow: none; font: 800 40px/1 var(--gl-num); color: var(--gl-black); }
.gl-face > span { display: inline-block; transform: translateY(1px); }
.gl-face.is-a { background: var(--gl-pad-a); } .gl-face.is-b { background: var(--gl-pad-b); }
.gl-face.is-x { background: var(--gl-pad-x); } .gl-face.is-y { background: var(--gl-pad-y); }
.gl-face.is-top { box-shadow: 0 0 0 5px var(--gl-card), 0 0 0 calc(5px + var(--gl-bw-x)) var(--gl-accent); }

/* ---------- the legacy speed stack: now the bug's fine lines in the family (fronts square, upright) ---------- */
.gl-stack { position: relative; display: flex; flex-direction: column; gap: 2px; transform: none; }
.gl-stack > i { display: block; border: 0; box-shadow: none; transform-origin: left center; clip-path: none; height: 3px; border-radius: 0; background: var(--gl-beam); }

/* ---------- selection: ANY item on the canvas (C: 1.5 px in the selector's pen colour, filled 12 px handles) ---------- */
.gl-sel { position: absolute; inset: -10px; border: var(--gl-bw-x) solid var(--hc, var(--gl-sel)); border-radius: 9px; pointer-events: none; z-index: 6; box-shadow: none; }
.gl-sel > b { position: absolute; width: 12px; height: 12px; box-sizing: border-box; background: var(--hc, var(--gl-sel)); border: 0; box-shadow: 0 0 0 2px var(--gl-ground); border-radius: 2px; }
.gl-sel > b:nth-child(1) { left: -7px; top: -7px; } .gl-sel > b:nth-child(2) { left: calc(50% - 6px); top: -7px; } .gl-sel > b:nth-child(3) { right: -7px; top: -7px; }
.gl-sel > b:nth-child(4) { right: -7px; top: calc(50% - 6px); } .gl-sel > b:nth-child(5) { right: -7px; bottom: -7px; } .gl-sel > b:nth-child(6) { left: calc(50% - 6px); bottom: -7px; }
.gl-sel > b:nth-child(7) { left: -7px; bottom: -7px; } .gl-sel > b:nth-child(8) { left: -7px; top: calc(50% - 6px); }
.gl-sel > .gl-dim { position: absolute; right: 0; bottom: -42px; height: 28px; display: flex; align-items: center; box-sizing: border-box;
  font: 600 17px/1 var(--gl-num); letter-spacing: .05em; color: var(--gl-on-bright); background: var(--hc, var(--gl-sel)); padding: 0 10px; border-radius: 4px; }
.gl-marquee { position: absolute; border: 1px dashed var(--hc, var(--gl-sel)); background: rgb(var(--hc-rgb, var(--gl-dan-rgb)) / .08); border-radius: 2px; pointer-events: none; }

/* ---------- the TOOLBAR (per-person chrome, never on program; C: 52 px, radius 8, a 1.5 px neutral keyline, icons only) ---------- */
.gl-tools { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: var(--gl-z-tools); display: flex; align-items: center; gap: 2px; padding: 0 9px; height: 52px;
  box-sizing: border-box; background: var(--gl-card); border: 0; box-shadow: inset 0 0 0 1.5px var(--gl-key); border-radius: var(--gl-radius-l); color: var(--gl-text); }
.gl-tool { position: relative; width: 38px; height: 38px; border-radius: 5px; display: grid; place-items: center; color: var(--gl-text); background: none; border: 0; }
.gl-tool svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gl-tool.is-on { background: color-mix(in oklab, var(--hc, var(--gl-dan)) 16%, transparent); box-shadow: inset 0 0 0 1.5px var(--hc, var(--gl-dan)); color: var(--hc, var(--gl-dan)); }
.gl-tool kbd { position: absolute; right: 2px; bottom: 1px; font: 600 10px/1 var(--gl-label); letter-spacing: 0; color: var(--gl-text2); }
.gl-tools .gl-sep { width: 1px; height: 26px; background: var(--gl-hair); margin: 0 6px; }
.gl-pen { width: 20px; height: 20px; border-radius: 50%; background: var(--c); margin: 0 4px; }
.gl-pen.is-on { box-shadow: 0 0 0 2.5px var(--gl-card), 0 0 0 4px var(--gl-text); }
.gl-cursor { position: absolute; z-index: var(--gl-z-cursors); pointer-events: none; }
.gl-cursor > span { position: absolute; left: 20px; top: 22px; font: 600 15px/1 var(--gl-label); letter-spacing: .08em; text-transform: uppercase; color: var(--gl-on-bright);
  background: var(--hc, var(--gl-dan)); padding: 5px 8px 4px; border-radius: 3px; white-space: nowrap; }

/* ---------- VO captions (Dan: "when VO talks, there probably should be matching text"): the card recipe low and
   centred, the read face in sentence case, the word being said in the family accent. No side bar. ---------- */
.gl-caption { position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%); max-width: 1400px; display: flex; align-items: center; gap: 16px;
  padding: 14px 26px 13px; background: rgb(var(--gl-card-rgb) / .94); border: var(--gl-bw) solid var(--gl-line); border-radius: var(--gl-radius);
  font: 700 40px/1.15 var(--gl-read); letter-spacing: var(--gl-ls-read); color: var(--gl-text); z-index: var(--gl-z-bugs); }
.gl-caption::before { content: none; }

/* ---------- VCR overlay (opt-in only, off by default everywhere; TASTE: never on program) ---------- */
.gl-vcr { position: absolute; inset: 0; pointer-events: none; z-index: var(--gl-z-vcr); }
.gl-vcr[data-level="0"] { display: none; }
.gl-vcr[data-level="1"] { background: repeating-linear-gradient(180deg, rgb(0 0 0 / .08) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 160px rgb(0 0 0 / .25); }
.gl-vcr[data-level="2"] { background: repeating-linear-gradient(180deg, rgb(0 0 0 / .14) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 200px rgb(0 0 0 / .35); }

/* ---------- the intro studio's v3 devices stay exactly as they were inside .is2 (until its v5 pass) ---------- */
.is2 .gl-scan { line-height: .92; font-weight: 400; letter-spacing: .012em; filter: drop-shadow(0 0 22px rgb(var(--gl-accent-rgb) / calc(.26 * var(--gl-glow-k)))) drop-shadow(0 2px 0 rgb(0 0 0 / .5)); }
.is2 .gl-scan::before { content: attr(data-t); position: absolute; inset: 0; color: var(--gl-keyline); -webkit-text-stroke: .07em var(--gl-keyline); paint-order: stroke fill; z-index: 0; }
.is2 { --gl-scan-per: .046em; --gl-scan-on: .031em; }
.is2 .gl-scan.is-px { --gl-scan-per: 5px; --gl-scan-on: 3.4px; }
.is2 .gl-scan-f { color: transparent; background: linear-gradient(to bottom, var(--gl-eng-lit0) 10%, var(--gl-eng-lit2) 48%, var(--gl-eng-lit3) 90%); -webkit-background-clip: text; background-clip: text;
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 var(--gl-scan-on), transparent var(--gl-scan-on) var(--gl-scan-per));
  mask-image: repeating-linear-gradient(to bottom, #000 0 var(--gl-scan-on), transparent var(--gl-scan-on) var(--gl-scan-per));
  animation: gl-crawl calc(var(--gl-d-crawl) / max(var(--gl-motion), .001)) linear infinite; }
.is2 .gl-scan.is-solid .gl-scan-f { -webkit-mask-image: none; mask-image: none; animation: none; }
.is2 .gl-scan-f::after { animation-duration: calc(6.5s / max(var(--gl-motion), .001)); }
.is2 .gl-band { --bon: 5px; --bper: 8px; display: block; height: auto; background: repeating-linear-gradient(to bottom, color-mix(in oklab, var(--gl-eng-band) 86%, black) 0 var(--bon), var(--gl-eng-band-ground) var(--bon) var(--bper));
  border-top: var(--gl-bw-band) solid var(--gl-eng-rule); border-bottom: var(--gl-bw-band) solid var(--gl-eng-rule); }

/* ---------- motion ---------- */
.gl-press { transition: translate var(--gl-d-tick) linear, box-shadow var(--gl-d-tick) linear, filter var(--gl-d-tick) linear; }
.gl-press:active, .gl-press.is-down { translate: 0 1px; filter: brightness(.92); }
.gl-breathe { animation: gl-breathe calc(var(--gl-d-breathe) / max(var(--gl-motion), .001)) ease-in-out infinite alternate; }
@keyframes gl-crawl { to { -webkit-mask-position: 0 var(--gl-scan-per); mask-position: 0 var(--gl-scan-per); } }
@keyframes gl-glint { 0% { background-position: 170% 0; } 9% { background-position: -70% 0; } 100% { background-position: -70% 0; } }
@keyframes gl-shimmer { 0% { transform: translateX(-120%); } 22% { transform: translateX(330%); } 100% { transform: translateX(330%); } }
@keyframes gl-band-sheen { 0% { transform: translateX(-260px); } 20% { transform: translateX(var(--gl-W)); } 100% { transform: translateX(var(--gl-W)); } }
@keyframes gl-cpat-drift { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
@keyframes gl-venetian { to { background-position: 0 12px; } }
@keyframes gl-cstack { from { transform: translateX(24px); } to { transform: translateX(0); } }
@keyframes gl-breathe { from { opacity: .55; transform: scale(.94); } to { opacity: 1; transform: scale(1.04); } }
@keyframes gl-flutter { 0%, 93%, 100% { filter: brightness(1); } 94.2% { filter: brightness(1.06); } 95.4% { filter: brightness(.965); } 96.6% { filter: brightness(1.03); } }
@media (prefers-reduced-motion: reduce) {
  .gl-press { transition: none; }
  .gl-scan-f, .gl-scan-f::after, .gl-track > .gl-fill::after, .gl-band > .gl-band-sheen::after, .gl-cpat, .gl-cstack, .gl-breathe, .gl-flutter { animation: none !important; }
}

/* compat (v1 names still read by older modules) */
:root { --gl-glint-delay: .4s; --gl-sheen-delay: 0s; }