/* ════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — Take One Santuario
   Estratto da style_4.css in Fase 2.7 Modularizzazione Mirata
   ────────────────────────────────────────────────────────────────────────
   Contiene tutto il vocabolario di colori, ombre, transizioni, blur, e gli
   alias semantici per i Cockpit Modes (Santuario / Casting). Cambia qui per
   propagare ovunque nel cockpit.
   ──────────────────────────────────────────────────────────────────────── */

:root {
  /* Coach preference — moltiplicatore globale del glow neon (Settings → Glow Intensity).
     0.30 = quasi spento, 1.00 = default, 1.40 = vibrazione massima. */
  --neon-glow-intensity: 1;

  /* ── Velo cinematografico — profondità di campo del cockpit ───────────────
     Quando un pannello sidebar è aperto, il workspace (video + note) "recede":
     blur lieve + lieve dimming + leggera desaturazione, come uno sfondo fuori
     fuoco in un'inquadratura cinematografica. Modulabili da un solo punto.
     Due intensità coordinate:
       • STRONG → apertura drawer/overlay (azione esplicita)
       • SOFT   → hover Glass card (lettura passiva). Stesso linguaggio, peso minore. */
  --cockpit-focus-blur: 5px;
  --cockpit-focus-brightness: 0.68;
  --cockpit-focus-saturate: 0.86;
  /* Drawer coprente — cristallo settings/search (blur reale, denso ma traslucido) */
  --t1-drawer-glass-pearl: rgba(232, 240, 250, 0.06);
  --t1-drawer-glass-mid: rgba(10, 14, 22, 0.72);
  --t1-drawer-glass-deep: rgba(6, 8, 14, 0.78);
  --t1-drawer-glass-blur: 18px;
  --t1-drawer-glass-blur-ready: 20px;
  --t1-drawer-glass-saturate: 1.16;
  --t1-drawer-backdrop: rgba(2, 4, 8, 0.34);
  /* Wash drawer — rail senza wash (92px: chiazze a 50% X = striscia verticale) */
  --t1-glass-wash-drawer:
    radial-gradient(ellipse 38% 55% at 6% 52%, rgba(0, 229, 255, 0.028), transparent 54%),
    radial-gradient(ellipse 45% 32% at 92% 46%, rgba(232, 240, 250, 0.032), transparent 52%),
    radial-gradient(ellipse 58% 40% at 72% 90%, rgba(232, 240, 250, 0.034), transparent 56%),
    radial-gradient(ellipse 42% 28% at 88% 88%, rgba(0, 229, 255, 0.024), transparent 50%),
    radial-gradient(ellipse 36% 48% at 10% 84%, rgba(232, 240, 250, 0.022), transparent 52%);
  /* Wash drawer con slab aperto — no chiazze sul seam sinistro */
  --t1-glass-wash-drawer-slab:
    radial-gradient(ellipse 45% 32% at 92% 46%, rgba(232, 240, 250, 0.032), transparent 52%),
    radial-gradient(ellipse 58% 40% at 72% 90%, rgba(232, 240, 250, 0.034), transparent 56%),
    radial-gradient(ellipse 42% 28% at 88% 88%, rgba(0, 229, 255, 0.024), transparent 50%),
    radial-gradient(ellipse 36% 48% at 10% 84%, rgba(232, 240, 250, 0.022), transparent 52%);
  /* Grain vetro — tile condiviso rail + drawer (gain drawer < rail) */
  --t1-glass-noise-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --t1-glass-noise-opacity-rail: 0.032;
  --t1-glass-noise-opacity-drawer: 0.010;
  --t1-glass-slab-noise-opacity: 0.024;
  --t1-glass-noise-body-muted: 0.018;
  --t1-glass-noise-blend: soft-light;
  /* Gem drawer — superfici interne (Lab · Sessioni righe) */
  --t1-drawer-gem-surface:
    linear-gradient(165deg, rgba(232, 240, 250, 0.09) 0%, rgba(10, 14, 22, 0.64) 62%, rgba(6, 8, 14, 0.74) 100%);
  --t1-drawer-gem-surface-hover:
    linear-gradient(165deg, rgba(232, 240, 250, 0.13) 0%, rgba(10, 14, 22, 0.7) 100%);
  --t1-drawer-gem-surface-row:
    linear-gradient(165deg, rgba(232, 240, 250, 0.05) 0%, rgba(10, 14, 22, 0.48) 62%, rgba(6, 8, 14, 0.58) 100%);
  --t1-drawer-gem-surface-row-active:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--t1-cyan, #00e5ff) 11%, rgba(232, 240, 250, 0.07)) 0%,
      rgba(8, 14, 24, 0.68) 58%,
      rgba(6, 8, 14, 0.76) 100%
    );
  --t1-drawer-gem-border-color: color-mix(in srgb, var(--t1-silver, #9aa5b1) 26%, rgba(232, 240, 250, 0.12));
  --t1-drawer-gem-border-row-color: color-mix(in srgb, var(--t1-silver, #9aa5b1) 18%, rgba(232, 240, 250, 0.08));
  --t1-drawer-gem-border-top: color-mix(in srgb, var(--t1-pearl, #e8f0fa) 30%, transparent);
  --t1-drawer-gem-border-row-top: color-mix(in srgb, var(--t1-pearl, #e8f0fa) 22%, transparent);
  --t1-drawer-gem-border-bottom: rgba(0, 0, 0, 0.5);
  --t1-drawer-gem-inset: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --t1-drawer-gem-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
  --t1-drawer-gem-row-inset: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --t1-drawer-gem-row-shadow: 0 3px 8px rgba(0, 0, 0, 0.34);
  --t1-drawer-gem-text-highlight: 0 1px 0 color-mix(in srgb, var(--t1-pearl, #e8f0fa) 24%, transparent);
  --cockpit-focus-blur-soft: 1.5px;
  --cockpit-focus-brightness-soft: 0.88;
  --cockpit-focus-saturate-soft: 0.95;
  /* DEEP / "The Void" — riservato all'Identity Hub centrale: il soggetto sospeso
     nel nulla, il video dietro quasi sparisce. Massima gerarchia di focus.
     Calibratura "grading temporale" cinema (Fase 2.3.4):
       brightness 0.58  → -42% luce, taglio profondo come in color-grading filmico
       saturate 0.72   → desaturazione marcata, evita carnagioni in primo piano
       blur 11px       → un pelo piu' di rifrazione per sentire la "lente". */
  --cockpit-focus-blur-deep: 11px;
  --cockpit-focus-brightness-deep: 0.58;
  --cockpit-focus-saturate-deep: 0.72;
  --cockpit-focus-ease: 320ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Microarco cromatico rail ──────────────────────────────────────────────
     Ogni famiglia ha un accent diverso ma volutamente sottile, così la rail
     comunica "che cosa stai per fare" senza urlare:
       • PERLA   → identità (Avatar): chi sei
       • CYAN    → tools operativi (Engine/Lab/Vault): azione
       • AMETISTA→ insight predittivo (AI): intuizione
       • AMBRA   → output documentale (Stamp): timbro/export
       • ARGENTO → sistema (Settings): configurazione
       • CYAN ⚊  → passaggio (Search): cambio dimensione
     I valori sono modulabili in un punto solo: cambiare qui propaga ovunque. */
  --t1-pearl: rgba(232, 240, 250, 0.92);
  --t1-amber-ghost: #c89a48;
  --t1-silver: #9aa5b1;
  --t1-cyan-soft: color-mix(in srgb, var(--t1-cyan, #00e5ff) 72%, var(--t1-helm-frost, #e0f7fa));

  /* Action icons — header note, STAMP, AI (S5) */
  --t1-action-size: 34px;
  --t1-action-icon-stroke: 1.75;
  --t1-action-share: var(--t1-cyan-gateway, #00f2ff);
  --t1-action-danger: #cc4400;
  --t1-action-export: var(--t1-amber-ghost, #c89a48);
  --t1-action-insight: #be82ff;
  --t1-action-reply: #6dd4a0;
  --t1-action-glass-bg: color-mix(in srgb, var(--t1-helm-frost, #e8f0fa) 5%, rgba(8, 10, 16, 0.72));
  --t1-action-glass-border: color-mix(in srgb, var(--t1-silver, #9aa5b1) 22%, transparent);

  /* Backgrounds */
  --bg-deep: var(--t1-deep-black);
  --btn-glass: rgba(10, 10, 14, 0.9);
  --sidebar-glass: rgba(10, 10, 14, 0.8);
  --input-bg: rgba(0, 0, 0, 0.3);

  /* Accent (ametista profonda — cinematic, non neon) */
  --accent-solid: #6d28a8;
  --accent-glow: rgba(109, 40, 168, 0.35);
  --accent-glow-faint: rgba(109, 40, 168, 0.1);
  /* Ciano — allineato a --t1-cyan */
  --cyan-accent: var(--t1-cyan);
  --cyan-glow: var(--t1-cyan-glow);
  --cyan-glow-faint: var(--t1-cyan-glow-faint);
  --accent-hover-bg: rgba(109, 40, 168, 0.08);
  --accent-active-bg: rgba(109, 40, 168, 0.18);
  --accent-shadow-sm: rgba(109, 40, 168, 0.15);
  --accent-shadow-md: rgba(109, 40, 168, 0.25);

  /* Text */
  --text-pure: #ffffff;
  --text-bright: #ffffff;   /* Titoli cockpit su fondo scuro — massimo contrasto */
  --text-ice: #e0e0e0;      /* Grigio Ghiaccio — high-contrast per label tecniche */
  --text-dim: #8b9bb4;
  --text-muted: #4a5a6a;

  /* Borders & panels */
  --panel-bg: rgba(255, 255, 255, 0.03);
  --panel-border: rgba(255, 255, 255, 0.08);
  --btn-border: rgba(255, 255, 255, 0.1);

  /* Video Enhancer · Fase 3.0.1
     Valori neutri = nessun effetto visivo. Aggiornati in tempo reale da JS
     tramite el.style.filter (non via setProperty su :root per performance).
     Definiti qui per documentare il vocabolario — il valore "live" vive sull'elemento. */
  --video-brightness: 1;    /* 1 = neutro; range JS 0.3–2.0 */
  --video-contrast:   1;    /* 1 = neutro; range JS 0.5–2.0 */
  --video-saturate:   1;    /* 1 = neutro; range JS 0.0–2.5 */

  /* Costellazione Search · glass cards (Fase 2.4.2 + 2.7-polish)
     Bordo e stop pearl del background gradient: due cifre di tweak
     visivo che vanno tarate insieme per dare alle card "spessore"
     contro lo sfondo dark. Variazioni di --t1-pearl a bassa opacita'. */
  --gateway-card-border:    rgba(232, 240, 250, 0.22);
  --gateway-card-pearl-top: rgba(232, 240, 250, 0.09);

  /* Gateway Inviti card (Palco · Sessions film · layout B) — tweak qui, non nei selettori */
  --gst-inviti-card-h: clamp(220px, 30vh, 280px);
  --gst-inviti-surface-bg: rgba(12, 16, 24, 0.94);
  --gst-inviti-accent: var(--t1-cyan, #00e5ff);
  --gst-inviti-ring-size: clamp(4.75rem, 13vh, 5.25rem);
  --gst-inviti-ring-glyph-ratio: 0.52;
  --gst-inviti-icon-size: 2.75rem;
  --gst-inviti-icon-glyph-size: 22px;
  --gst-inviti-gap: 0.28rem;
  --gst-inviti-padding-block: 0.52rem;
  --gst-inviti-padding-inline: 0.68rem;
  --gst-inviti-stage-gap: 0;
  --gst-inviti-footer-min-h: 2.5rem;
  --gst-inviti-corner-gap: 0.72rem;
  --gst-inviti-thumb-opacity: 0.2;
  --gst-inviti-thumb-opacity-media: 0.28;
  --gst-inviti-title-shift: 0;
  --gst-inviti-title-ring-gap: 0.58rem;
  --gst-inviti-ring-meta-gap: 0.44rem;
  --gst-inviti-meta-shift: 0;
  --gst-inviti-ring-margin-block: 0;
  --gst-inviti-title-fs: clamp(1rem, 0.94rem + 0.35vw, 1.14rem);
  --gst-inviti-title-weight: 600;
  --gst-inviti-title-color: color-mix(in srgb, var(--t1-pearl, #d6dff1) 92%, #fff);
  --gst-inviti-meta-fs: 0.68rem;
  --gst-inviti-date-fs: clamp(0.72rem, 0.68rem + 0.4vw, 0.84rem);
  --gst-inviti-hint-gap: 10px;
  --gst-inviti-slot-fade-ms: 0.34s;
  --gst-inviti-meta-color: color-mix(in srgb, var(--t1-pearl, #d6dff1) 52%, rgba(150, 162, 178, 0.72));
  --gst-inviti-date-color: color-mix(in srgb, var(--t1-pearl, #d6dff1) 62%, rgba(170, 182, 198, 0.78));

  /* Palco · chroma unificato card layout B + plancia deck (Slice A) */
  --t1-palco-chroma-world: #1a5278;
  --t1-palco-chroma-sessions: #e8dcc8;
  --t1-palco-chroma-vault: color-mix(in srgb, var(--t1-cyan-gateway, #00f2ff) 62%, #7a9ec8);
  --gst-palco-card-base: rgba(12, 16, 24, 0.94);
  --gst-palco-card-veil-world:
    radial-gradient(ellipse 88% 64% at 16% 10%, color-mix(in srgb, var(--t1-palco-chroma-world) 32%, transparent), transparent 58%),
    radial-gradient(ellipse 64% 46% at 84% 20%, color-mix(in srgb, #fff 8%, transparent), transparent 52%);
  --gst-palco-card-veil-sessions:
    radial-gradient(ellipse 88% 64% at 16% 10%, color-mix(in srgb, var(--t1-palco-chroma-sessions) 22%, transparent), transparent 58%),
    radial-gradient(ellipse 64% 46% at 84% 20%, color-mix(in srgb, #fff 8%, transparent), transparent 52%);
  --gst-palco-card-veil-vault:
    radial-gradient(ellipse 88% 64% at 16% 10%, color-mix(in srgb, var(--t1-palco-chroma-vault) 28%, transparent), transparent 58%),
    radial-gradient(ellipse 64% 46% at 84% 20%, color-mix(in srgb, #fff 8%, transparent), transparent 52%);

  /* Palco · altezza banda facet Inviti / hub Progetti / spacer roster */
  --gst-palco-context-band-h: 3.65rem;
  --gst-palco-world-hub-band-air: 0.72rem;
  --gst-palco-world-context-band-h: var(--gst-palco-context-band-h);

  /* Palco layout B — azioni card (ring + corner): vetro/bottone, perimetro morbido */
  --t1-palco-action-border: color-mix(in srgb, var(--gst-projected-accent, var(--t1-pearl, #d6dff1)) 18%, transparent);
  --t1-palco-action-bg: color-mix(in srgb, #fff 7%, rgba(8, 12, 20, 0.52));
  --t1-palco-action-bg-hover: color-mix(in srgb, #fff 12%, rgba(8, 12, 20, 0.58));
  --t1-palco-action-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 11%, transparent),
    0 4px 14px rgba(0, 0, 0, 0.24),
    0 0 0 1px color-mix(in srgb, var(--gst-projected-accent, var(--t1-pearl, #d6dff1)) 12%, transparent);
  --t1-palco-action-shadow-hover:
    inset 0 1px 0 color-mix(in srgb, #fff 15%, transparent),
    0 6px 18px rgba(0, 0, 0, 0.3),
    0 0 0 1px color-mix(in srgb, var(--gst-projected-accent, var(--t1-pearl, #d6dff1)) 20%, transparent),
    0 0 22px color-mix(in srgb, var(--gst-projected-accent, var(--t1-pearl, #d6dff1)) 10%, transparent);
  --t1-palco-action-radius-corner: 12px;
  --t1-palco-action-backdrop: blur(10px) saturate(1.06);

  /* Shadows */
  --shadow-deep: rgba(0, 0, 0, 0.6);
  --shadow-deeper: rgba(0, 0, 0, 0.7);

  /* Typography — da theme_globals (--t1-font-ui / --t1-font-mono) */
  --font-main: var(--t1-font-ui);
  --font-tech: var(--t1-font-mono);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Transitions */
  --t-fast: 0.2s ease;
  --t-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --t-santuario-total: 0.3s cubic-bezier(0.22, 1, 0.36, 1);

  /* Mood / intensity controls (default = medium) */
  --glow-intensity: 1;
  --tool-fill-opacity: 1;
  --btn-depth-intensity: 1;
  --btn-active-inner-glow: 0.55;

  /* Depth system (Livello 1–2) — ombre a doppia sorgente */
  --t1-depth-contact: 0 4px 6px -1px rgba(0, 0, 0, calc(0.5 * var(--btn-depth-intensity)));
  --t1-depth-lift: 0 20px 25px -5px rgba(0, 0, 0, calc(0.7 * var(--btn-depth-intensity)));
  --t1-depth-highlight: inset 0 1px 0 rgba(255, 255, 255, calc(0.1 * var(--btn-depth-intensity)));
  --t1-depth-btn-contact: 0 2px 4px rgba(0, 0, 0, calc(0.4 * var(--btn-depth-intensity)));
  --t1-depth-btn-hover: 0 4px 8px rgba(0, 0, 0, calc(0.45 * var(--btn-depth-intensity)));
  --t1-depth-btn-highlight: inset 0 1px 0 rgba(255, 255, 255, calc(0.05 * var(--btn-depth-intensity)));
  --t1-depth-btn-pressed: inset 0 2px 4px rgba(0, 0, 0, calc(0.6 * var(--btn-depth-intensity)));
  --t1-depth-well: inset 0 1px 3px rgba(0, 0, 0, calc(0.35 * var(--btn-depth-intensity)));

  /* Solo forme persistenti canvas (.shape-note freccia): riduce raggio bloom senza mutare i colori neon */
  --shape-bloom-scale: 0.85;

  /* ── Casting Mode · Colori rating (riservati, NON usati in Santuario) ──── */
  --rating-green-solid:  #00d97a;
  --rating-yellow-solid: #ffc233;
  --rating-red-solid:    #ff4d5a;

  /* Tag namespace chips (Fase 3.0.2) — accenti distinti per picker profilo/sessione */
  --t1-tag-ns-profile_role:    #7ecbff;
  --t1-tag-ns-profile_status: #c9a8ff;
  --t1-tag-ns-profile_sector:  #7af0c2;
  --t1-tag-ns-session_type:    #ffc266;
  --t1-tag-ns-casting_rating: var(--rating-yellow-solid);

  /* Tool palette rgb + HEX (forme sul video = stessi token dei tasti toolbox) */
  --tool-point-rgb: 0, 242, 255;
  --tool-point-solid: #00f2ff;
  /* Slice 1b — MEMO_HUD ciano + verde broadcast (§4.7) */
  --tool-rect-rgb: 0, 242, 255;
  --tool-rect-solid: #00f2ff;
  --tool-circle-rgb: 0, 255, 136;
  --tool-circle-solid: #00ff88;
  /* Freccia: rosa-crimson organico, neon leggibile su pelle/video */
  --tool-arrow-rgb: 255, 56, 92;
  --tool-arrow-solid: #ff385c;
  /* Ghost pen (penna effimera): Arctic Ice — tratto + toggle sincronizzati */
  --tool-ghost-rgb: 224, 247, 255;
  --tool-ghost-solid: #e0f7ff;

  /* Digital geology — ossidiana / placche stratificate */
  --geo-ice-cyan: #00e6ff;
  --geo-plate-drop: 0 24px 58px rgba(0, 0, 0, 0.78), 0 12px 32px rgba(0, 0, 0, 0.52), 0 4px 12px rgba(0, 0, 0, 0.38);
  /* Luce tra gli strati — solo bordo superiore + sinistro (ghiaccio fratturato) */
  --geo-plate-inset-cyan:
    inset 0 1px 0 0 color-mix(in srgb, var(--geo-ice-cyan) 58%, transparent),
    inset 1px 0 0 0 color-mix(in srgb, var(--geo-ice-cyan) 48%, transparent);
  --geo-plate-well: inset 0 -18px 28px rgba(0, 0, 0, 0.38);
  --geo-gem-inset: inset 0 2px 4px rgba(0, 0, 0, 0.55), inset 1px 1px 0 color-mix(in srgb, var(--geo-ice-cyan) 22%, transparent);
  --geo-blade-pulse: 4.5s;
  /* Pannelli timone: 15px base (brief), 18px aperto = lastra più “profonda” */
  --geo-panel-blur: 15px;
  --geo-panel-blur-deep: 18px;
  /* Testo ghiaccio — gerarchia (north star) */
  --t1-helm-frost: rgba(214, 242, 252, 0.82);
  --t1-helm-frost-muted: rgba(214, 242, 252, 0.55);
  --t1-helm-frost-dim: rgba(214, 242, 252, 0.4);
}

/* Preset mood classes (attach to main container / body) */
.mood-soft {
  --glow-intensity: 0.82;
  --tool-fill-opacity: 0.92;
  --btn-depth-intensity: 0.9;
  --btn-active-inner-glow: 0.42;
}
.mood-medium {
  --glow-intensity: 1;
  --tool-fill-opacity: 1;
  --btn-depth-intensity: 1;
  --btn-active-inner-glow: 0.55;
}
.mood-punchy {
  --glow-intensity: 1.2;
  --tool-fill-opacity: 1.08;
  --btn-depth-intensity: 1.12;
  --btn-active-inner-glow: 0.66;
}

/* ════════════════════════════════════════════════════════════════════════
   COCKPIT MODE · Alias semantici per Timeline / Needle / Data Shards
   ────────────────────────────────────────────────────────────────────────
   Layer 2 del sistema di token (Fase 2.5 — Gancio A, Sez.7 mapping.md).
   Il Layer 1 (token tecnici --tool-*-solid, --accent-solid) è immutabile
   in :root. Questo Layer 2 mappa i token semantici che il CSS della
   timeline consuma. In Santuario risolvono 1:1 ai tecnici originali
   (zero diff visiva). In Casting cambiano senza toccare il render JS.

   Opzione B (granulare): arrow ≠ rect — la distinzione "indicazione
   direzionale" vs "area interesse" ha valore semantico nel Santuario.
   In Casting entrambi mappano a --rating-yellow-solid (ridondanza pulita).
   ──────────────────────────────────────────────────────────────────────── */
body[data-cockpit-mode='santuario'] {
  /* Ametista Needle */
  --needle-color:   var(--accent-solid);

  /* Shard granulari per tool (Opzione B) */
  --shard-point:    var(--tool-point-solid);   /* cyan ice */
  --shard-line:     var(--tool-point-solid);   /* cyan ice */
  --shard-freehand: var(--tool-point-solid);   /* cyan ice */
  --shard-ghost:    var(--tool-ghost-solid);   /* arctic ice */
  --shard-arrow:    var(--tool-arrow-solid);   /* rosa warm */
  --shard-rect:     var(--tool-rect-solid);    /* broadcast ciano */
  --shard-circle:   var(--tool-circle-solid);  /* broadcast verde */
  --shard-neutral:  var(--t1-pearl);           /* fallback */

  /* Edge monorail */
  --timeline-edge:  rgba(0, 229, 255, 0.28);
}

/* Casting Mode — DORMIENTE: definito ma nessuna UI lo attiva ora.
   Solo placeholder semantico per il giorno in cui scriveremo il Casting.
   Usa gli stessi slot semantici: arrow + rect → giallo (ridondanza pulita). */
body[data-cockpit-mode='casting'] {
  --needle-color:   var(--rating-green-solid);

  --shard-point:    var(--rating-green-solid);
  --shard-line:     var(--rating-green-solid);
  --shard-freehand: var(--rating-green-solid);
  --shard-ghost:    var(--t1-pearl);
  --shard-arrow:    var(--rating-yellow-solid);
  --shard-rect:     var(--rating-yellow-solid);
  --shard-circle:   var(--rating-red-solid);
  --shard-neutral:  var(--t1-pearl);

  --timeline-edge:  rgba(255, 194, 51, 0.32);
}