/* ==========================================================================
   THE GREAT LIBRARY — design tokens
   "Night Stacks": purple-and-gold, lamplit, built for long reading in the dark.

   PROVENANCE. These are not invented. The core values are lifted from the two
   places this system already ships:
     1. the Night Stacks page shell (alpha-site-example.html)
     2. great-library.css — the theme.park theme for Calibre-Web Automated
   Where those two disagreed, the theme file wins: it carries the corrected,
   contrast-checked values (--muted and --faint were both raised there after
   failing at small sizes). The superseded originals are noted inline.

   Character accents are sampled from the Great Library character reference
   sheets, then lifted in lightness until they clear 4.5:1 on --gl-ink. The
   as-painted value is kept alongside as *-canon for illustration work.
   ========================================================================== */

:root {
  /* --- ground & surfaces ------------------------------------------------ */
  --gl-ink: #110B1D;              /* page ground */
  --gl-ink-deep: #0B0714;         /* insets, code blocks, wells */
  --gl-panel: #1A1330;            /* raised surface — cards, frames */
  --gl-panel-2: #221838;          /* header bars, secondary raise */
  --gl-shelf: #1E1633;            /* modals, sort bars, drop-downs */

  /* --- rules ------------------------------------------------------------ */
  --gl-rule: #322550;             /* decorative hairline (panel edges) */
  --gl-rule-soft: #261C42;        /* quietest divider — table rows, steps */
  --gl-rule-strong: #795EB6;      /* CONTROL boundary only — WCAG 1.4.11, 3.75:1
                                     Deliberately not used on cards: raising every
                                     hairline to 3:1 rings the whole page violet
                                     and fixes nothing that was broken. */

  /* --- text ------------------------------------------------------------- */
  --gl-text: #EDE6F7;             /* 15.85:1 on ink */
  --gl-text-strong: #FFFFFF;
  --gl-muted: #A294BE;            /* 6.90:1 — supersedes #9E90BB */
  --gl-faint: #9185A9;            /* 5.63:1 — supersedes #75688F, which failed at 11px */

  /* --- brand accents ---------------------------------------------------- */
  --gl-lamp: #E3B85C;             /* the gold. 10.35:1. Lantern light. */
  --gl-lamp-soft: rgba(227, 184, 92, .30);
  --gl-amethyst: #A97BE8;         /* 6.14:1 */
  --gl-wash: rgba(169, 123, 232, .14);   /* the violet haze — hovers, active rows */
  --gl-glow: rgba(227, 184, 92, .10);

  /* --- interactive ------------------------------------------------------ */
  --gl-action: #6B3FA0;           /* button ground. White on it = 7.38:1 */
  --gl-action-hover: #8452C4;     /* white = 5.27:1 (the old #A97BE8 was 3.14) */
  --gl-action-text: #FFFFFF;
  --gl-link: #A97BE8;
  --gl-link-hover: #E3B85C;
  --gl-focus: #E3B85C;            /* focus ring is always gold */

  /* --- status ----------------------------------------------------------- */
  --gl-danger: #F0776A;           /* text-safe 6.93:1 */
  --gl-danger-ground: #CE3D2A;    /* filled badge ground; white on it */
  --gl-success: #7FB069;          /* 7.63:1 — Em's moss, lifted */
  --gl-info: #5EC5CE;             /* 9.50:1 — Cookie's turquoise, lifted */
  --gl-warning: #E3B85C;

  /* --- type ------------------------------------------------------------- */
  --gl-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --gl-ui: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --gl-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gl-size-eyebrow: 11px;
  --gl-size-micro: 12px;
  --gl-size-small: 13.5px;
  --gl-size-body: 15px;
  --gl-size-lede: 16.5px;
  --gl-size-h3: 15.5px;
  --gl-size-h2: 24px;
  --gl-size-h1: clamp(36px, 6vw, 54px);
  --gl-tracking-eyebrow: .18em;
  --gl-leading-body: 1.6;

  /* --- space (4px base) -------------------------------------------------- */
  --gl-space-1: 4px;   --gl-space-2: 8px;   --gl-space-3: 12px;
  --gl-space-4: 16px;  --gl-space-5: 24px;  --gl-space-6: 32px;
  --gl-space-7: 42px;  --gl-space-8: 64px;

  /* --- radius & elevation ------------------------------------------------ */
  --gl-radius-sm: 6px;
  --gl-radius: 10px;
  --gl-radius-lg: 12px;
  --gl-radius-pill: 999px;
  --gl-shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.75);
  --gl-shadow-frame: 0 30px 70px -40px rgba(0,0,0,.9);
  --gl-shadow-lift: 0 0 0 1px var(--gl-lamp), 0 14px 34px -16px rgba(0,0,0,.9);

  /* --- the two page washes ----------------------------------------------- */
  --gl-page-wash:
    radial-gradient(1000px 480px at 15% -6%, var(--gl-wash), transparent 70%),
    radial-gradient(700px 380px at 92% 0%, var(--gl-glow), transparent 72%);

  /* --- character accents -------------------------------------------------
     Every resident of the Library carries a personal colour. Use these to tint
     a card, a badge, or an avatar ring — never to replace the brand accents.
     All clear 4.5:1 on --gl-ink and --gl-panel.                              */
  --gl-char-meeko:  #A97BE8;  --gl-char-meeko-canon:  #642F6C;  /* raccoon — amethyst */
  --gl-char-kemii:  #3FB3AE;  --gl-char-kemii-canon:  #11656C;  /* red panda — teal */
  --gl-char-saara:  #3FA9A4;  --gl-char-saara-canon:  #11656C;  /* wolf — deep teal */
  --gl-char-maj:    #C9822E;  --gl-char-maj-canon:    #C96214;  /* black cat — orange-gold */
  --gl-char-bea:    #6E7BD6;  --gl-char-bea-canon:    #24255C;  /* tortoiseshell — royal blue */
  --gl-char-cookie: #37A9B2;  --gl-char-cookie-canon: #11656C;  /* meerkat — turquoise */
  --gl-char-em:     #C98B92;  --gl-char-em-canon:     #82494C;  /* raven — dusty rose */
  --gl-char-kate:   #93A8C6;  --gl-char-kate-canon:   #6C7A96;  /* sloth — sky blue */
  --gl-char-sara:   #E07B3C;  --gl-char-sara-canon:   #C25205;  /* orange cat — ginger */
  --gl-char-wadji:  #B98FE0;  --gl-char-wadji-canon:  #743B7C;  /* butterfly — lavender */
}

/* ==========================================================================
   THE GREAT LIBRARY — base
   Applied by <LibraryRoot>. Scoped to .gl-root so the system can sit inside a
   host page without repainting it.
   ========================================================================== */


.gl-root {
  background-color: var(--gl-ink);
  background-image: var(--gl-page-wash);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--gl-text);
  font-family: var(--gl-ui);
  font-size: var(--gl-size-body);
  line-height: var(--gl-leading-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}
.gl-root *, .gl-root *::before, .gl-root *::after { box-sizing: border-box; }
.gl-root img { max-width: 100%; }
.gl-root a { color: var(--gl-link); text-decoration: none; }
.gl-root a:hover { color: var(--gl-link-hover); }

/* The focus ring is gold, always, everywhere. It is the one piece of chrome
   that must never be themed away. */
.gl-root :focus-visible {
  outline: 2px solid var(--gl-focus);
  outline-offset: 3px;
  border-radius: var(--gl-radius-sm);
}

.gl-root code {
  font-family: var(--gl-mono); font-size: .86em; color: #D6C6F0;
  background: var(--gl-rule-soft); border: 1px solid var(--gl-rule);
  border-radius: 5px; padding: 1px 5px;
}
.gl-root pre {
  background: var(--gl-ink-deep); border: 1px solid var(--gl-rule-soft);
  border-radius: var(--gl-radius-sm); padding: 13px; overflow-x: auto;
  font-size: 12.5px; line-height: 1.6; color: #CFC3E6; font-family: var(--gl-mono);
}
.gl-root pre code { all: unset; }

@media (prefers-reduced-motion: reduce) {
  .gl-root *, .gl-root *::before, .gl-root *::after {
    transition-duration: .01ms !important; animation-duration: .01ms !important;
  }
}

/* ==========================================================================
   THE GREAT LIBRARY — components
   ========================================================================== */

/* --- layout ------------------------------------------------------------- */
.gl-page { max-width: 1180px; margin: 0 auto; padding: 38px 24px 76px;
           display: flex; flex-direction: column; gap: var(--gl-space-7); }
.gl-page--wide { max-width: 1420px; }
.gl-page--narrow { max-width: 760px; }
.gl-section { display: flex; flex-direction: column; gap: var(--gl-space-4); }

/* --- type --------------------------------------------------------------- */
.gl-eyebrow { font-size: var(--gl-size-eyebrow); font-weight: 700;
  letter-spacing: var(--gl-tracking-eyebrow); text-transform: uppercase;
  color: var(--gl-lamp); margin: 0 0 10px; }
.gl-h1 { font-family: var(--gl-display); font-optical-sizing: auto; font-weight: 600;
  font-size: var(--gl-size-h1); line-height: 1.03; letter-spacing: -.02em;
  margin: 0 0 12px; text-wrap: balance; color: var(--gl-text); }
.gl-h2 { font-family: var(--gl-display); font-optical-sizing: auto; font-weight: 600;
  font-size: var(--gl-size-h2); letter-spacing: -.01em; margin: 0; color: var(--gl-text); }
.gl-h3 { font-family: var(--gl-ui); font-size: var(--gl-size-h3); font-weight: 700;
  margin: 0; color: var(--gl-text); }
.gl-lede { margin: -6px 0 0; color: var(--gl-muted); max-width: 70ch; }
.gl-standfirst { margin: 0; max-width: 64ch; color: var(--gl-muted);
  font-size: var(--gl-size-lede); }

/* --- button ------------------------------------------------------------- */
.gl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--gl-ui); font-weight: 600; font-size: 13.5px; line-height: 1;
  padding: 10px 16px; border-radius: var(--gl-radius-sm); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.gl-btn:disabled, .gl-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.gl-btn--sm { padding: 7px 12px; font-size: 12.5px; }
.gl-btn--lg { padding: 13px 22px; font-size: 15px; }
.gl-btn--block { width: 100%; }

.gl-btn--primary { background: var(--gl-action); color: var(--gl-action-text);
  border-color: var(--gl-action-hover); }
.gl-btn--primary:hover:not(:disabled) { background: var(--gl-action-hover); }

.gl-btn--secondary { background: var(--gl-panel-2); color: var(--gl-text);
  border-color: var(--gl-rule-strong); }
.gl-btn--secondary:hover:not(:disabled) { background: var(--gl-shelf); border-color: var(--gl-amethyst); }

.gl-btn--ghost { background: transparent; color: var(--gl-muted); border-color: transparent; }
.gl-btn--ghost:hover:not(:disabled) { background: var(--gl-wash); color: var(--gl-text); }

/* The gold button is the Library's one loud voice. Use it once per view. */
.gl-btn--lamp { background: var(--gl-lamp); color: var(--gl-ink); border-color: var(--gl-lamp); }
.gl-btn--lamp:hover:not(:disabled) { background: #F0CC7C; }

.gl-btn--danger { background: var(--gl-danger-ground); color: #fff; border-color: var(--gl-danger-ground); }

/* --- fields ------------------------------------------------------------- */
.gl-field { display: flex; flex-direction: column; gap: 6px; }
.gl-label { font-size: var(--gl-size-micro); font-weight: 600; color: var(--gl-muted);
  letter-spacing: .02em; }
.gl-input, .gl-select, .gl-textarea {
  font-family: var(--gl-ui); font-size: 14px; color: var(--gl-text);
  background: var(--gl-ink-deep); border: 1px solid var(--gl-rule-strong);
  border-radius: var(--gl-radius-sm); padding: 9px 13px; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease; }
.gl-input::placeholder, .gl-textarea::placeholder { color: var(--gl-faint); opacity: 1; }
.gl-input:focus, .gl-select:focus, .gl-textarea:focus {
  outline: none; border-color: var(--gl-link);
  box-shadow: 0 0 0 3px rgba(169,123,232,.25); }
.gl-input--pill { border-radius: var(--gl-radius-pill); padding-left: 16px; padding-right: 16px; }
.gl-hint { font-size: var(--gl-size-micro); color: var(--gl-faint); }
.gl-error { font-size: var(--gl-size-micro); color: var(--gl-danger); }

/* --- panel & frame ------------------------------------------------------ */
.gl-panel { border: 1px solid var(--gl-rule); border-radius: var(--gl-radius-lg);
  background: var(--gl-panel); overflow: hidden; }
.gl-panel--raised { box-shadow: var(--gl-shadow-frame); }
.gl-panel--flush { padding: 0; }
.gl-panel__body { padding: var(--gl-space-5); }
.gl-panel__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--gl-panel-2); border-bottom: 1px solid var(--gl-rule); }
.gl-panel__title { font-family: var(--gl-display); font-weight: 600; font-size: 15px; margin: 0; }

.gl-frame__dots { display: flex; gap: 6px; }
.gl-frame__dots i { width: 10px; height: 10px; border-radius: 50%;
  background: var(--gl-rule); display: block; }
.gl-frame__url { flex: 1; font-size: var(--gl-size-micro); color: var(--gl-faint);
  background: var(--gl-ink); border: 1px solid var(--gl-rule-soft);
  border-radius: var(--gl-radius-pill); padding: 4px 12px; text-align: center;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* --- note --------------------------------------------------------------- */
.gl-note { display: flex; gap: 12px; font-size: var(--gl-size-small); color: var(--gl-faint);
  border-left: 2px solid var(--gl-lamp); padding: 2px 0 2px 14px; }
.gl-note b { color: var(--gl-muted); font-weight: 600; }
.gl-note--danger { border-left-color: var(--gl-danger); }
.gl-note--info { border-left-color: var(--gl-info); }

/* --- badge -------------------------------------------------------------- */
.gl-badge { display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border-radius: var(--gl-radius-pill);
  background: var(--gl-wash); color: var(--gl-amethyst);
  border: 1px solid transparent; }
.gl-badge--gold  { background: var(--gl-lamp-soft); color: var(--gl-lamp); }
.gl-badge--count { background: var(--gl-action); color: #fff; padding: 1px 7px; }
.gl-badge--danger{ background: var(--gl-danger-ground); color: #fff; }
.gl-badge--quiet { background: transparent; color: var(--gl-faint); border-color: var(--gl-rule); }
.gl-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* --- swatch ------------------------------------------------------------- */
.gl-swatch { display: inline-flex; align-items: center; gap: 8px; font-size: var(--gl-size-small); }
.gl-swatch__chip { display: inline-block; width: 22px; height: 22px; border-radius: var(--gl-radius-sm);
  border: 1px solid rgba(255,255,255,.16); flex: 0 0 auto; }
.gl-swatch__chip--sm { width: 11px; height: 11px; border-radius: 3px; }
.gl-swatch__name { color: var(--gl-text); }
.gl-swatch__value { color: var(--gl-faint); font-family: var(--gl-mono); font-size: var(--gl-size-micro); }

/* --- steps -------------------------------------------------------------- */
.gl-steps { display: flex; flex-direction: column; border-top: 1px solid var(--gl-rule-soft);
  counter-reset: gl-s; }
.gl-step { display: grid; grid-template-columns: 34px 1fr; gap: 6px 16px;
  padding: 16px 2px; border-bottom: 1px solid var(--gl-rule-soft); align-items: start; }
.gl-step::before { counter-increment: gl-s; content: counter(gl-s);
  font-family: var(--gl-display); font-weight: 600; font-size: 17px;
  color: var(--gl-lamp); line-height: 1.5; }
.gl-step__title { margin: 0; font-size: var(--gl-size-h3); font-weight: 700; grid-column: 2; }
.gl-step__body { margin: 6px 0 0; grid-column: 2; color: var(--gl-muted); font-size: 14.5px; }

/* --- table -------------------------------------------------------------- */
.gl-tablewrap { overflow-x: auto; }
.gl-table { border-collapse: collapse; width: 100%; font-size: var(--gl-size-small); }
.gl-table thead th { text-align: left; font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gl-lamp);
  padding: 0 12px 9px 0; border-bottom: 1px solid var(--gl-rule); white-space: nowrap; }
.gl-table tbody td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--gl-rule-soft);
  color: var(--gl-muted); }
.gl-table tbody td:first-child { color: var(--gl-text); }
.gl-table tbody tr:hover td { background: var(--gl-wash); }
.gl-table .gl-num { font-variant-numeric: tabular-nums; text-align: right; padding-right: 18px; }

/* --- book card ---------------------------------------------------------- */
.gl-bookgrid { display: grid; gap: var(--gl-space-5);
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.gl-book { display: flex; flex-direction: column; gap: 11px; text-decoration: none; }
.gl-book__cover { position: relative; display: block; border-radius: 7px; overflow: hidden;
  box-shadow: var(--gl-shadow-card); aspect-ratio: 2 / 3; background: var(--gl-panel-2); }
.gl-book__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-book:hover .gl-book__cover { box-shadow: var(--gl-shadow-lift); }
.gl-book__cover::after { content: ""; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(180deg, rgba(21,14,35,.15), rgba(76,42,118,.72));
  transition: opacity .15s ease; }
.gl-book:hover .gl-book__cover::after { opacity: 1; }
.gl-book__title { font-family: var(--gl-display); font-optical-sizing: auto; font-weight: 600;
  color: var(--gl-text); font-size: 14.5px; line-height: 1.28; margin: 0; }
.gl-book__author { font-size: 12.5px; color: var(--gl-muted); margin: 0; }
.gl-book:hover .gl-book__author { color: var(--gl-link); }
.gl-book__series { font-size: 11px; color: var(--gl-faint); margin: 0; }

/* --- rail (side nav) ---------------------------------------------------- */
.gl-rail { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px 30px; }
.gl-rail__head { padding: 14px 10px 5px; font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gl-lamp); }
.gl-rail__item { display: flex; align-items: center; gap: 9px; padding: 7px 10px;
  border-radius: var(--gl-radius-sm); color: var(--gl-muted); font-size: 13.5px;
  text-decoration: none; cursor: pointer; }
.gl-rail__item:hover { background: var(--gl-wash); color: var(--gl-text); }
.gl-rail__item--active { box-shadow: inset 3px 0 0 var(--gl-lamp);
  background: var(--gl-wash); color: var(--gl-text); font-weight: 600; }
.gl-rail__count { margin-left: auto; color: var(--gl-faint); font-size: 11.5px;
  font-variant-numeric: tabular-nums; }
.gl-rail__glyph { width: 14px; height: 14px; border-radius: 3px;
  background: rgba(169,123,232,.35); flex: 0 0 auto; display: inline-block; }

/* --- top bar ------------------------------------------------------------ */
.gl-topbar { display: flex; align-items: center; gap: 14px; min-height: 56px;
  padding: 0 18px; background: var(--gl-shelf); border-bottom: 1px solid var(--gl-rule); }
.gl-topbar__brand { font-family: var(--gl-display); font-optical-sizing: auto;
  font-weight: 600; font-size: 20px; color: var(--gl-lamp); letter-spacing: .01em;
  text-decoration: none; padding: 16px 0; }
.gl-topbar__brand:hover { color: var(--gl-lamp); }
.gl-topbar__nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.gl-topbar__link { display: flex; align-items: center; gap: 7px; padding: 10px 11px;
  color: var(--gl-muted); font-size: 13.5px; border-radius: var(--gl-radius-sm);
  text-decoration: none; }
.gl-topbar__link:hover { background: var(--gl-wash); color: var(--gl-text); }
.gl-topbar__search { max-width: 260px; }

/* --- character card ----------------------------------------------------- */
.gl-character { display: flex; gap: var(--gl-space-4); align-items: center;
  padding: var(--gl-space-4); border: 1px solid var(--gl-rule);
  border-radius: var(--gl-radius-lg); background: var(--gl-panel);
  border-left: 3px solid var(--gl-char, var(--gl-amethyst)); }
.gl-character__portrait { width: 72px; height: 72px; border-radius: 50%; flex: 0 0 auto;
  object-fit: cover; background: var(--gl-panel-2);
  box-shadow: 0 0 0 2px var(--gl-char, var(--gl-amethyst)), 0 0 0 4px var(--gl-panel); }
.gl-character__name { font-family: var(--gl-display); font-weight: 600; font-size: 18px;
  margin: 0; color: var(--gl-text); }
.gl-character__role { font-size: var(--gl-size-micro); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gl-char, var(--gl-amethyst));
  margin: 2px 0 0; }
.gl-character__body { font-size: var(--gl-size-small); color: var(--gl-muted); margin: 7px 0 0; }

/* --- hero --------------------------------------------------------------- */
.gl-hero { position: relative; border-radius: var(--gl-radius-lg); overflow: hidden;
  border: 1px solid var(--gl-rule); background: var(--gl-panel);
  display: flex; align-items: flex-end; min-height: 260px; }
.gl-hero__art { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; }
.gl-hero::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(17,11,29,.15) 0%, rgba(17,11,29,.92) 92%); }
.gl-hero__inner { position: relative; z-index: 1; padding: var(--gl-space-6); }

/* --- pagination --------------------------------------------------------- */
.gl-pagination { display: flex; gap: 5px; list-style: none; padding: 0; margin: 0; }
.gl-pagination__link { display: block; padding: 6px 12px; border: 1px solid var(--gl-rule);
  border-radius: var(--gl-radius-sm); color: var(--gl-muted); font-size: 13px;
  text-decoration: none; cursor: pointer; }
.gl-pagination__link:hover { background: var(--gl-wash); color: var(--gl-text); }
.gl-pagination__link--active { border-color: var(--gl-lamp); color: var(--gl-lamp);
  background: var(--gl-lamp-soft); }

/* --- modal -------------------------------------------------------------- */
.gl-modal__scrim { position: fixed; inset: 0; background: rgba(11,7,20,.72);
  display: flex; align-items: center; justify-content: center; padding: var(--gl-space-5);
  z-index: 60; }
.gl-modal { background: var(--gl-shelf); border: 1px solid var(--gl-rule);
  border-radius: var(--gl-radius-lg); max-width: 520px; width: 100%;
  box-shadow: var(--gl-shadow-frame); color: var(--gl-text); }
.gl-modal__head { padding: 18px 22px 0; }
.gl-modal__title { font-family: var(--gl-display); font-weight: 600; font-size: 20px; margin: 0; }
.gl-modal__body { padding: 12px 22px 4px; color: var(--gl-muted); font-size: 14.5px; }
.gl-modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 22px 20px; }

/* --- stat tile ---------------------------------------------------------- */
.gl-stat { border: 1px solid var(--gl-rule); border-radius: var(--gl-radius);
  background: var(--gl-panel); padding: var(--gl-space-4) var(--gl-space-5); }
.gl-stat__label { font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gl-lamp); margin: 0; }
.gl-stat__value { font-family: var(--gl-display); font-optical-sizing: auto;
  font-weight: 600; font-size: 30px; line-height: 1.1; margin: 8px 0 0;
  color: var(--gl-text); font-variant-numeric: tabular-nums; }
.gl-stat__meta { font-size: var(--gl-size-micro); color: var(--gl-faint); margin: 4px 0 0; }