/* Vendored from design/prism.css by website/scripts/sync-refraction.mjs — edit the source, then re-run. */
/* ══════════════════════════════════════════════════════════════════════════
   Prism · Refraction 1.3.0 — "White light in. Every color out."
   GENERATED by design/tools/gen.mjs from design/tokens.json (theme blocks + hue
   setters) and design/tools/src/primitives.css (the hand-authored reference
   layer). Edit those, not this file. See design/README.md.

   1. Prism Night  (theme id prism-dark)  — :root, or [data-theme="prism-dark"]
   2. Prism Day    (theme id prism-light) — [data-theme="prism-light"]
   3. Hue setters  — [data-rf-gallery=<id>] / [data-rf-surface=<id>] set --rf-hue*
   4. Primitives   — .rf-* reference components (namespaced; never .panel/.card)
   In Prism.html the shell injects the theme strings from design/themes.js; use
   this file standalone (site, specimen, deck/terminal web previews).
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 ── Prism Night ───────────────────────────────────────────────────────── */
:root,:root[data-theme="prism-dark"]{
  color-scheme:dark;
  --bg:#0a0c12;
  --panel:#10131c;
  --panel2:#171a25;
  --card:#12151f;
  --line:#252834;
  --ink:#f0f0f5;
  --muted:#a2a4b4;
  --dim:#8a8c9d;
  --accent:#b8a2f2;
  --accent-rgb:184,162,242;
  --accent2:#a8b9fc;
  --info:#86bdf9;
  --info-rgb:134,189,249;
  --pos:#8bd8ba;
  --pos-rgb:139,216,186;
  --warn:#eec36f;
  --warn-rgb:238,195,111;
  --neg:#f5877f;
  --neg-rgb:245,135,127;
  --crit:#f07fb3;
  --crit-rgb:240,127,179;
  --cardgrad:linear-gradient(157deg,rgba(184,162,242,.07),rgba(184,162,242,0) 55%);
  --font:Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --r-sm:6px;
  --r-md:8px;
  --r-lg:12px;
  --r-xl:16px;
  --elev-1:inset 0 1px 0 rgba(255,255,255,.055),0 1px 2px rgba(0,0,0,.35);
  --elev-2:inset 0 1px 0 rgba(255,255,255,.1),0 18px 40px -18px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.3);
  --dur:0.24s;
  --ease:cubic-bezier(.16,1,.3,1);
  --bd:1px;
  --head-w:600;
  --dens:1;
  --cs-topnav-bg:rgba(10,12,18,.78);
  --cs-topnav-line:#1d202b;
  --cs-topnav-ink:#f0f0f5;
  --cs-topnav-dim:#a2a4b4;
  --cs-topnav-hover:rgba(255,255,255,.06);
  --cs-topnav-elev:inset 0 -1px 0 rgba(255,255,255,.03);
  --rf-mode:night;
  --rf-bg-deep:#06070b;
  --rf-line-soft:#1b1e29;
  --rf-line-strong:#343849;
  --rf-line-control:#6b6f84;
  --rf-faint:#565a6c;
  --rf-accent-hi:#cbb9f7;
  --rf-accent-lo:#a38be8;
  --rf-accent-ink:#151021;
  --rf-raised:#171a25;
  --rf-rail:transparent;
  --rf-glass:rgba(14,17,26,.72);
  --rf-glass-strong:rgba(16,19,28,.9);
  --rf-glass-blur:18px;
  --rf-glass-sat:140%;
  --rf-glass-line:rgba(255,255,255,.08);
  --rf-edge:rgba(255,255,255,.055);
  --rf-edge-hi:rgba(255,255,255,.1);
  --rf-edge-lo:rgba(0,0,0,.35);
  --rf-white:#f6f3ff;
  --rf-beam-core:#ffffff;
  --rf-beam:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.92) 50%,rgba(255,255,255,0));
  --rf-beam-v:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.95) 30%,rgba(255,255,255,.95) 70%,rgba(255,255,255,0));
  --rf-beam-glow:0 0 10px rgba(205,190,255,.55),0 0 2px rgba(255,255,255,.9);
  --rf-fringe:linear-gradient(90deg,rgba(255,110,140,.0),rgba(255,110,140,.55),rgba(255,214,120,.5),rgba(120,230,190,.5),rgba(110,170,255,.55),rgba(184,140,255,.0));
  --rf-halo:rgba(145,119,242,.16);
  --rf-iris:linear-gradient(115deg,rgba(184,162,242,.10),rgba(134,189,249,.06) 40%,rgba(139,216,186,.06) 70%,rgba(238,195,111,.05));
  --rf-iris-edge:linear-gradient(115deg,rgba(203,185,247,.75),rgba(134,189,249,.55) 35%,rgba(139,216,186,.5) 65%,rgba(238,195,111,.45));
  --rf-grid-line:rgba(255,255,255,.035);
  --rf-split-a:rgba(255,92,130,.6);
  --rf-split-b:rgba(92,170,255,.6);
  --rf-focus:#d9ccff;
  --rf-focus-halo:rgba(184,162,242,.22);
  --rf-selection:rgba(184,162,242,.32);
  --rf-scrim:rgba(3,4,8,.66);
  --rf-hover:rgba(255,255,255,.045);
  --rf-press:rgba(255,255,255,.07);
  --rf-accent-wash:rgba(184,162,242,.12);
  --rf-accent-line:rgba(184,162,242,.38);
  --rf-code-bg:#0c0e16;
  --rf-code-ink:#d8d1f6;
  --rf-syn-keyword:#c2aef8;
  --rf-syn-string:#7dd9b2;
  --rf-syn-number:#eac779;
  --rf-syn-tag:#7fc4fb;
  --rf-syn-attr:#ffaa96;
  --rf-syn-comment:#8a8c9d;
  --rf-syn-punct:#a2a4b4;
  --rf-shadow-1:0 1px 2px rgba(0,0,0,.35);
  --rf-shadow-2:0 18px 40px -18px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.3);
  --rf-shadow-3:0 32px 80px -24px rgba(0,0,0,.85),0 8px 20px -8px rgba(0,0,0,.5);
  --rf-mono:ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "Segoe UI Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --rf-s-violet:#c2aef8;
  --rf-s-violet-v:#ab91eb;
  --rf-s-violet-rgb:171,145,235;
  --rf-s-periwinkle:#a2b9ff;
  --rf-s-periwinkle-v:#839ef4;
  --rf-s-periwinkle-rgb:131,158,244;
  --rf-s-azure:#7fc4fb;
  --rf-s-azure-v:#52acee;
  --rf-s-azure-rgb:82,172,238;
  --rf-s-cerulean:#64ceea;
  --rf-s-cerulean-v:#00b8db;
  --rf-s-cerulean-rgb:0,184,219;
  --rf-s-cyan:#61d5d0;
  --rf-s-cyan-v:#00c3be;
  --rf-s-cyan-rgb:0,195,190;
  --rf-s-mint:#7dd9b2;
  --rf-s-mint-v:#52cea0;
  --rf-s-mint-rgb:82,206,160;
  --rf-s-jade:#a5d996;
  --rf-s-jade-v:#94d582;
  --rf-s-jade-rgb:148,213,130;
  --rf-s-lime:#ccd381;
  --rf-s-lime-v:#c9d168;
  --rf-s-lime-rgb:201,209,104;
  --rf-s-citrine:#eac779;
  --rf-s-citrine-v:#ebc059;
  --rf-s-citrine-rgb:235,192,89;
  --rf-s-amber:#fab880;
  --rf-s-amber-v:#f8a75f;
  --rf-s-amber-rgb:248,167,95;
  --rf-s-coral:#ffaa96;
  --rf-s-coral-v:#f69077;
  --rf-s-coral-rgb:246,144,119;
  --rf-s-rose:#faa2b2;
  --rf-s-rose-v:#ec8398;
  --rf-s-rose-rgb:236,131,152;
  --rf-spectrum:linear-gradient(90deg,#ab91eb,#839ef4,#52acee,#00b8db,#00c3be,#52cea0,#94d582,#c9d168,#ebc059,#f8a75f,#f69077,#ec8398);
  --rf-spectrum-v:linear-gradient(180deg,#ab91eb,#839ef4,#52acee,#00b8db,#00c3be,#52cea0,#94d582,#c9d168,#ebc059,#f8a75f,#f69077,#ec8398);
  --rf-spectrum-ink:linear-gradient(90deg,#c2aef8,#a2b9ff,#7fc4fb,#64ceea,#61d5d0,#7dd9b2,#a5d996,#ccd381,#eac779,#fab880,#ffaa96,#faa2b2);
  --rf-spectrum-text:linear-gradient(100deg,#c1a8f8 10%,#a8b9fc 55%,#a0decf 100%);
  --rf-g-charts:#c2aef8;
  --rf-g-charts-v:#ab91eb;
  --rf-g-charts-rgb:171,145,235;
  --rf-g-fx:#adb5ff;
  --rf-g-fx-v:#9299f3;
  --rf-g-fx-rgb:146,153,243;
  --rf-g-lab:#98bcff;
  --rf-g-lab-v:#76a2f4;
  --rf-g-lab-rgb:118,162,244;
  --rf-g-ai:#81c4fc;
  --rf-g-ai-v:#55abef;
  --rf-g-ai-rgb:85,171,239;
  --rf-g-objects:#6dcaf2;
  --rf-g-objects-v:#2cb3e4;
  --rf-g-objects-rgb:44,179,228;
  --rf-g-input:#60d0e4;
  --rf-g-input-v:#00bbd3;
  --rf-g-input-rgb:0,187,211;
  --rf-g-text:#60d4d3;
  --rf-g-text-v:#00c2c1;
  --rf-g-text-rgb:0,194,193;
  --rf-g-shapes:#6dd7c0;
  --rf-g-shapes-v:#2ec9ae;
  --rf-g-shapes-rgb:46,201,174;
  --rf-g-maps:#83d9ad;
  --rf-g-maps-v:#5fd09a;
  --rf-g-maps-rgb:95,208,154;
  --rf-g-notify:#9ed99b;
  --rf-g-notify-v:#89d487;
  --rf-g-notify-rgb:137,212,135;
  --rf-g-arch:#b8d78b;
  --rf-g-arch-v:#afd575;
  --rf-g-arch-rgb:175,213,117;
  --rf-g-callouts:#d0d280;
  --rf-g-callouts-v:#ced065;
  --rf-g-callouts-rgb:206,208,101;
  --rf-g-obsidian:#e4cb79;
  --rf-g-obsidian-v:#e5c55b;
  --rf-g-obsidian-rgb:229,197,91;
  --rf-g-menus:#f2c17a;
  --rf-g-menus-v:#f3b659;
  --rf-g-menus-rgb:243,182,89;
  --rf-g-spectrums:#fbb781;
  --rf-g-spectrums-v:#f8a560;
  --rf-g-spectrums-rgb:248,165,96;
  --rf-g-idea:#ffae8e;
  --rf-g-idea-v:#f8956f;
  --rf-g-idea-rgb:248,149,111;
  --rf-g-mobile:#fea69f;
  --rf-g-mobile-v:#f48a82;
  --rf-g-mobile-rgb:244,138,130;
  --rf-g-desktop:#faa2b2;
  --rf-g-desktop-v:#ec8398;
  --rf-g-desktop-rgb:236,131,152;
  --rf-g-facets:#f0f0f5;
  --rf-g-facets-v:#b8a2f2;
  --rf-g-facets-rgb:184,162,242;
  --rf-g-search:#f0f0f5;
  --rf-g-search-v:#b8a2f2;
  --rf-g-search-rgb:184,162,242;
  --rf-g-variants:#f0f0f5;
  --rf-g-variants-v:#b8a2f2;
  --rf-g-variants-rgb:184,162,242;
  --rf-g-showcase:#f0f0f5;
  --rf-g-showcase-v:#b8a2f2;
  --rf-g-showcase-rgb:184,162,242;
  --rf-g-collections:#f0f0f5;
  --rf-g-collections-v:#b8a2f2;
  --rf-g-collections-rgb:184,162,242;
  --rf-surf-web:#c2aef8;
  --rf-surf-web-v:#ab91eb;
  --rf-surf-web-rgb:171,145,235;
  --rf-surf-terminal:#80d9b0;
  --rf-surf-terminal-v:#58cf9d;
  --rf-surf-terminal-rgb:88,207,157;
  --rf-surf-deck:#f8bb7e;
  --rf-surf-deck-v:#f7ac5c;
  --rf-surf-deck-rgb:247,172,92;
  --rf-hue:#b8a2f2;
  --rf-hue-v:#b8a2f2;
  --rf-hue-rgb:184,162,242;
  --rf-fs-display:66px;
  --rf-lh-display:1.06;
  --rf-ls-display:-0.058em;
  --rf-fs-hero:clamp(46px, 5vw + 16px, 112px);
  --rf-lh-hero:1.02;
  --rf-ls-hero:-0.058em;
  --rf-fs-h1:44px;
  --rf-lh-h1:1.1;
  --rf-ls-h1:-0.042em;
  --rf-fs-section:clamp(40px, 1.25vw + 24px, 48px);
  --rf-lh-section:1.08;
  --rf-ls-section:-0.045em;
  --rf-fs-h2:32px;
  --rf-lh-h2:1.2;
  --rf-ls-h2:-0.039em;
  --rf-fs-h3:22px;
  --rf-lh-h3:1.3;
  --rf-ls-h3:-0.025em;
  --rf-fs-h4:17px;
  --rf-lh-h4:1.35;
  --rf-ls-h4:-0.018em;
  --rf-fs-lead:16px;
  --rf-lh-lead:1.75;
  --rf-ls-lead:-0.006em;
  --rf-fs-body:14px;
  --rf-lh-body:1.6;
  --rf-ls-body:-0.004em;
  --rf-fs-ui:13px;
  --rf-lh-ui:1.4;
  --rf-ls-ui:0em;
  --rf-fs-small:12px;
  --rf-lh-small:1.5;
  --rf-ls-small:0em;
  --rf-fs-caption:11px;
  --rf-lh-caption:1.45;
  --rf-ls-caption:0.005em;
  --rf-fs-eyebrow:10px;
  --rf-lh-eyebrow:1.2;
  --rf-ls-eyebrow:0.15em;
  --rf-fs-code:12px;
  --rf-lh-code:1.7;
  --rf-ls-code:0em;
  --rf-fs-count:11px;
  --rf-lh-count:1.2;
  --rf-ls-count:0.02em;
  --rf-fw-regular:400;
  --rf-fw-strong:600;
  --rf-fw-display:700;
  --rf-r-xs:4px;
  --rf-r-2xl:24px;
  --rf-r-pill:999px;
  --rf-dur-instant:80ms;
  --rf-dur-fast:140ms;
  --rf-dur-base:240ms;
  --rf-dur-slow:400ms;
  --rf-dur-deliberate:600ms;
  --rf-dur-sweep:600ms;
  --rf-dur-first-light:1600ms;
  --rf-ease-out-expo:cubic-bezier(.16,1,.3,1);
  --rf-ease-out:cubic-bezier(.22,1,.36,1);
  --rf-ease-in-out:cubic-bezier(.65,0,.35,1);
  --rf-ease-in:cubic-bezier(.7,0,.84,0);
  --rf-ease-linear:linear;
  --rf-stagger:28ms;
  --rf-sp-0:0px;
  --rf-sp-1:4px;
  --rf-sp-2:8px;
  --rf-sp-3:12px;
  --rf-sp-4:16px;
  --rf-sp-5:20px;
  --rf-sp-6:24px;
  --rf-sp-8:32px;
  --rf-sp-10:40px;
  --rf-sp-12:48px;
  --rf-sp-16:64px;
  --rf-sp-22:88px;
  --rf-sp-30:120px;
  --rf-sp-0_5:2px;
  --rf-sp-1_5:6px;
  --rf-topbar-h:56px;
  --rf-rail-w:264px;
  --rf-content-max:1480px;
  --rf-tile-min:296px;
  --rf-gutter:16px;
  --rf-grid-cell:34px;
}

/* 2 ── Prism Day ─────────────────────────────────────────────────────────── */
:root[data-theme="prism-light"]{
  color-scheme:light;
  --bg:#f6f5f9;
  --panel:#ffffff;
  --panel2:#f0eff6;
  --card:#fdfcff;
  --line:#dedce9;
  --ink:#20202e;
  --muted:#55556a;
  --dim:#68687c;
  --accent:#7353bb;
  --accent-rgb:115,83,187;
  --accent2:#4a62c6;
  --info:#2461bf;
  --info-rgb:36,97,191;
  --pos:#1f6b4f;
  --pos-rgb:31,107,79;
  --warn:#8a5a00;
  --warn-rgb:138,90,0;
  --neg:#bf3434;
  --neg-rgb:191,52,52;
  --crit:#b0256f;
  --crit-rgb:176,37,111;
  --cardgrad:linear-gradient(157deg,rgba(115,83,187,.045),rgba(115,83,187,0) 55%);
  --font:Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --r-sm:6px;
  --r-md:8px;
  --r-lg:12px;
  --r-xl:16px;
  --elev-1:inset 0 1px 0 #ffffff,0 1px 2px rgba(32,24,72,.05);
  --elev-2:inset 0 1px 0 #ffffff,0 1px 2px rgba(32,24,72,.05),0 14px 32px -16px rgba(64,40,150,.2);
  --dur:0.24s;
  --ease:cubic-bezier(.16,1,.3,1);
  --bd:1px;
  --head-w:600;
  --dens:1;
  --cs-topnav-bg:rgba(246,245,249,.8);
  --cs-topnav-line:#e3e1ec;
  --cs-topnav-ink:#20202e;
  --cs-topnav-dim:#55556a;
  --cs-topnav-hover:rgba(32,24,72,.05);
  --cs-topnav-elev:inset 0 -1px 0 rgba(255,255,255,.9);
  --rf-mode:day;
  --rf-bg-deep:#ecebf3;
  --rf-line-soft:#e9e7f1;
  --rf-line-strong:#c9c6d8;
  --rf-line-control:#8a879d;
  --rf-faint:#a9a8b8;
  --rf-accent-hi:#6142aa;
  --rf-accent-lo:#8b70cf;
  --rf-accent-ink:#ffffff;
  --rf-raised:#ffffff;
  --rf-rail:#fcfbfe;
  --rf-glass:rgba(255,255,255,.72);
  --rf-glass-strong:rgba(255,255,255,.9);
  --rf-glass-blur:18px;
  --rf-glass-sat:160%;
  --rf-glass-line:rgba(32,24,72,.09);
  --rf-edge:rgba(255,255,255,.95);
  --rf-edge-hi:#ffffff;
  --rf-edge-lo:rgba(32,24,72,.07);
  --rf-white:conic-gradient(from 200deg,#de8fb8,#a993ec,#7fb0ea,#79cdb0,#dcbc6c,#de8fb8);
  --rf-beam-core:#7353bb;
  --rf-beam:linear-gradient(90deg,rgba(115,83,187,0),#7353bb 22%,#006ca9 52%,#007655 80%,rgba(31,107,79,0));
  --rf-beam-v:linear-gradient(180deg,rgba(115,83,187,0),#7353bb 25%,#006ca9 60%,rgba(36,97,191,0));
  --rf-beam-glow:0 0 8px rgba(115,83,187,.28);
  --rf-fringe:linear-gradient(90deg,rgba(214,66,110,0),rgba(214,66,110,.45),rgba(196,140,20,.4),rgba(31,150,110,.4),rgba(46,110,214,.45),rgba(115,83,187,0));
  --rf-halo:rgba(176,150,240,.22);
  --rf-iris:linear-gradient(115deg,#ffe1e5 0%,#ebe5ff 26%,#cbf1fc 52%,#d1f3e3 76%,#f6e8ca 100%);
  --rf-iris-edge:linear-gradient(115deg,#e7a6c8,#b49ff0 30%,#8fb8f2 55%,#86d7bb 78%,#e6c98a);
  --rf-grid-line:rgba(24,18,42,.045);
  --rf-split-a:rgba(214,52,104,.45);
  --rf-split-b:rgba(36,104,222,.45);
  --rf-focus:#5b3ea8;
  --rf-focus-halo:rgba(115,83,187,.2);
  --rf-selection:rgba(115,83,187,.18);
  --rf-scrim:rgba(28,22,56,.3);
  --rf-hover:rgba(32,24,72,.04);
  --rf-press:rgba(32,24,72,.07);
  --rf-accent-wash:rgba(115,83,187,.09);
  --rf-accent-line:rgba(115,83,187,.4);
  --rf-code-bg:#f3f1f9;
  --rf-code-ink:#3b2f6b;
  --rf-syn-keyword:#7555b8;
  --rf-syn-string:#007655;
  --rf-syn-number:#9c5600;
  --rf-syn-tag:#006ca9;
  --rf-syn-attr:#b2432a;
  --rf-syn-comment:#68687c;
  --rf-syn-punct:#55556a;
  --rf-shadow-1:0 1px 2px rgba(32,24,72,.05);
  --rf-shadow-2:0 1px 2px rgba(32,24,72,.05),0 14px 32px -16px rgba(64,40,150,.2);
  --rf-shadow-3:0 28px 70px -24px rgba(48,32,120,.3),0 6px 16px -6px rgba(48,32,120,.12);
  --rf-mono:ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "Segoe UI Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --rf-s-violet:#7555b8;
  --rf-s-violet-v:#9876e3;
  --rf-s-violet-rgb:152,118,227;
  --rf-s-periwinkle:#4961bf;
  --rf-s-periwinkle-v:#6783ec;
  --rf-s-periwinkle-rgb:103,131,236;
  --rf-s-azure:#006ca9;
  --rf-s-azure-v:#0090de;
  --rf-s-azure-rgb:0,144,222;
  --rf-s-cerulean:#007188;
  --rf-s-cerulean-v:#0096b3;
  --rf-s-cerulean-rgb:0,150,179;
  --rf-s-cyan:#007471;
  --rf-s-cyan-v:#009995;
  --rf-s-cyan-rgb:0,153,149;
  --rf-s-mint:#007655;
  --rf-s-mint-v:#009c71;
  --rf-s-mint-rgb:0,156,113;
  --rf-s-jade:#2e760f;
  --rf-s-jade-v:#4c9b32;
  --rf-s-jade-rgb:76,155,50;
  --rf-s-lime:#686c00;
  --rf-s-lime-v:#8a8f00;
  --rf-s-lime-rgb:138,143,0;
  --rf-s-citrine:#836300;
  --rf-s-citrine-v:#ac8300;
  --rf-s-citrine-rgb:172,131,0;
  --rf-s-amber:#9c5600;
  --rf-s-amber-v:#cc7300;
  --rf-s-amber-rgb:204,115,0;
  --rf-s-coral:#b2432a;
  --rf-s-coral-v:#de6448;
  --rf-s-coral-rgb:222,100,72;
  --rf-s-rose:#b13f5d;
  --rf-s-rose-v:#de5f7d;
  --rf-s-rose-rgb:222,95,125;
  --rf-spectrum:linear-gradient(90deg,#b299f3,#8ba6fd,#5ab3f7,#19bfe2,#00c8c3,#53cea0,#8fcf7d,#c1c95f,#e5ba53,#f7a65f,#fb947c,#f48a9f);
  --rf-spectrum-v:linear-gradient(180deg,#b299f3,#8ba6fd,#5ab3f7,#19bfe2,#00c8c3,#53cea0,#8fcf7d,#c1c95f,#e5ba53,#f7a65f,#fb947c,#f48a9f);
  --rf-spectrum-ink:linear-gradient(90deg,#7555b8,#4961bf,#006ca9,#007188,#007471,#007655,#2e760f,#686c00,#836300,#9c5600,#b2432a,#b13f5d);
  --rf-spectrum-text:linear-gradient(100deg,#7353bb 10%,#006ca9 55%,#007655 100%);
  --rf-g-charts:#7555b8;
  --rf-g-charts-v:#9876e3;
  --rf-g-charts-rgb:152,118,227;
  --rf-g-fx:#5b5cbe;
  --rf-g-fx-v:#7a7eeb;
  --rf-g-fx-rgb:122,126,235;
  --rf-g-lab:#3664be;
  --rf-g-lab-v:#5487eb;
  --rf-g-lab-rgb:84,135,235;
  --rf-g-ai:#006cad;
  --rf-g-ai-v:#008fe2;
  --rf-g-ai-rgb:0,143,226;
  --rf-g-objects:#007093;
  --rf-g-objects-v:#0094c1;
  --rf-g-objects-rgb:0,148,193;
  --rf-g-input:#007282;
  --rf-g-input-v:#0097ac;
  --rf-g-input-rgb:0,151,172;
  --rf-g-text:#007474;
  --rf-g-text-v:#009999;
  --rf-g-text-rgb:0,153,153;
  --rf-g-shapes:#007564;
  --rf-g-shapes-v:#009b85;
  --rf-g-shapes-rgb:0,155,133;
  --rf-g-maps:#00774e;
  --rf-g-maps-v:#009d68;
  --rf-g-maps-rgb:0,157,104;
  --rf-g-notify:#1a781f;
  --rf-g-notify-v:#3d9c3e;
  --rf-g-notify-rgb:61,156,62;
  --rf-g-arch:#527100;
  --rf-g-arch-v:#6d9600;
  --rf-g-arch-rgb:109,150,0;
  --rf-g-callouts:#6c6b00;
  --rf-g-callouts-v:#8f8e00;
  --rf-g-callouts-rgb:143,142,0;
  --rf-g-obsidian:#7d6500;
  --rf-g-obsidian-v:#a58600;
  --rf-g-obsidian-rgb:165,134,0;
  --rf-g-menus:#8d5e00;
  --rf-g-menus-v:#b97d00;
  --rf-g-menus-rgb:185,125,0;
  --rf-g-spectrums:#9d5500;
  --rf-g-spectrums-v:#cf7100;
  --rf-g-spectrums-rgb:207,113,0;
  --rf-g-idea:#b04614;
  --rf-g-idea-v:#dc6736;
  --rf-g-idea-rgb:220,103,54;
  --rf-g-mobile:#b3413e;
  --rf-g-mobile-v:#e0615c;
  --rf-g-mobile-rgb:224,97,92;
  --rf-g-desktop:#b13f5d;
  --rf-g-desktop-v:#de5f7d;
  --rf-g-desktop-rgb:222,95,125;
  --rf-g-facets:#20202e;
  --rf-g-facets-v:#7353bb;
  --rf-g-facets-rgb:115,83,187;
  --rf-g-search:#20202e;
  --rf-g-search-v:#7353bb;
  --rf-g-search-rgb:115,83,187;
  --rf-g-variants:#20202e;
  --rf-g-variants-v:#7353bb;
  --rf-g-variants-rgb:115,83,187;
  --rf-g-showcase:#20202e;
  --rf-g-showcase-v:#7353bb;
  --rf-g-showcase-rgb:115,83,187;
  --rf-g-collections:#20202e;
  --rf-g-collections-v:#7353bb;
  --rf-g-collections-rgb:115,83,187;
  --rf-surf-web:#7555b8;
  --rf-surf-web-v:#9876e3;
  --rf-surf-web-rgb:152,118,227;
  --rf-surf-terminal:#007652;
  --rf-surf-terminal-v:#009d6d;
  --rf-surf-terminal-rgb:0,157,109;
  --rf-surf-deck:#965900;
  --rf-surf-deck-v:#c57700;
  --rf-surf-deck-rgb:197,119,0;
  --rf-hue:#7353bb;
  --rf-hue-v:#7353bb;
  --rf-hue-rgb:115,83,187;
  --rf-fs-display:66px;
  --rf-lh-display:1.06;
  --rf-ls-display:-0.058em;
  --rf-fs-hero:clamp(46px, 5vw + 16px, 112px);
  --rf-lh-hero:1.02;
  --rf-ls-hero:-0.058em;
  --rf-fs-h1:44px;
  --rf-lh-h1:1.1;
  --rf-ls-h1:-0.042em;
  --rf-fs-section:clamp(40px, 1.25vw + 24px, 48px);
  --rf-lh-section:1.08;
  --rf-ls-section:-0.045em;
  --rf-fs-h2:32px;
  --rf-lh-h2:1.2;
  --rf-ls-h2:-0.039em;
  --rf-fs-h3:22px;
  --rf-lh-h3:1.3;
  --rf-ls-h3:-0.025em;
  --rf-fs-h4:17px;
  --rf-lh-h4:1.35;
  --rf-ls-h4:-0.018em;
  --rf-fs-lead:16px;
  --rf-lh-lead:1.75;
  --rf-ls-lead:-0.006em;
  --rf-fs-body:14px;
  --rf-lh-body:1.6;
  --rf-ls-body:-0.004em;
  --rf-fs-ui:13px;
  --rf-lh-ui:1.4;
  --rf-ls-ui:0em;
  --rf-fs-small:12px;
  --rf-lh-small:1.5;
  --rf-ls-small:0em;
  --rf-fs-caption:11px;
  --rf-lh-caption:1.45;
  --rf-ls-caption:0.005em;
  --rf-fs-eyebrow:10px;
  --rf-lh-eyebrow:1.2;
  --rf-ls-eyebrow:0.15em;
  --rf-fs-code:12px;
  --rf-lh-code:1.7;
  --rf-ls-code:0em;
  --rf-fs-count:11px;
  --rf-lh-count:1.2;
  --rf-ls-count:0.02em;
  --rf-fw-regular:400;
  --rf-fw-strong:600;
  --rf-fw-display:700;
  --rf-r-xs:4px;
  --rf-r-2xl:24px;
  --rf-r-pill:999px;
  --rf-dur-instant:80ms;
  --rf-dur-fast:140ms;
  --rf-dur-base:240ms;
  --rf-dur-slow:400ms;
  --rf-dur-deliberate:600ms;
  --rf-dur-sweep:600ms;
  --rf-dur-first-light:1600ms;
  --rf-ease-out-expo:cubic-bezier(.16,1,.3,1);
  --rf-ease-out:cubic-bezier(.22,1,.36,1);
  --rf-ease-in-out:cubic-bezier(.65,0,.35,1);
  --rf-ease-in:cubic-bezier(.7,0,.84,0);
  --rf-ease-linear:linear;
  --rf-stagger:28ms;
  --rf-sp-0:0px;
  --rf-sp-1:4px;
  --rf-sp-2:8px;
  --rf-sp-3:12px;
  --rf-sp-4:16px;
  --rf-sp-5:20px;
  --rf-sp-6:24px;
  --rf-sp-8:32px;
  --rf-sp-10:40px;
  --rf-sp-12:48px;
  --rf-sp-16:64px;
  --rf-sp-22:88px;
  --rf-sp-30:120px;
  --rf-sp-0_5:2px;
  --rf-sp-1_5:6px;
  --rf-topbar-h:56px;
  --rf-rail-w:264px;
  --rf-content-max:1480px;
  --rf-tile-min:296px;
  --rf-gutter:16px;
  --rf-grid-cell:34px;
}

/* 3 ── Hue setters ───────────────────────────────────────────────────────── */
[data-rf-gallery="charts"]{--rf-hue:var(--rf-g-charts);--rf-hue-v:var(--rf-g-charts-v);--rf-hue-rgb:var(--rf-g-charts-rgb)}
[data-rf-gallery="fx"]{--rf-hue:var(--rf-g-fx);--rf-hue-v:var(--rf-g-fx-v);--rf-hue-rgb:var(--rf-g-fx-rgb)}
[data-rf-gallery="lab"]{--rf-hue:var(--rf-g-lab);--rf-hue-v:var(--rf-g-lab-v);--rf-hue-rgb:var(--rf-g-lab-rgb)}
[data-rf-gallery="ai"]{--rf-hue:var(--rf-g-ai);--rf-hue-v:var(--rf-g-ai-v);--rf-hue-rgb:var(--rf-g-ai-rgb)}
[data-rf-gallery="objects"]{--rf-hue:var(--rf-g-objects);--rf-hue-v:var(--rf-g-objects-v);--rf-hue-rgb:var(--rf-g-objects-rgb)}
[data-rf-gallery="input"]{--rf-hue:var(--rf-g-input);--rf-hue-v:var(--rf-g-input-v);--rf-hue-rgb:var(--rf-g-input-rgb)}
[data-rf-gallery="text"]{--rf-hue:var(--rf-g-text);--rf-hue-v:var(--rf-g-text-v);--rf-hue-rgb:var(--rf-g-text-rgb)}
[data-rf-gallery="shapes"]{--rf-hue:var(--rf-g-shapes);--rf-hue-v:var(--rf-g-shapes-v);--rf-hue-rgb:var(--rf-g-shapes-rgb)}
[data-rf-gallery="maps"]{--rf-hue:var(--rf-g-maps);--rf-hue-v:var(--rf-g-maps-v);--rf-hue-rgb:var(--rf-g-maps-rgb)}
[data-rf-gallery="notify"]{--rf-hue:var(--rf-g-notify);--rf-hue-v:var(--rf-g-notify-v);--rf-hue-rgb:var(--rf-g-notify-rgb)}
[data-rf-gallery="arch"]{--rf-hue:var(--rf-g-arch);--rf-hue-v:var(--rf-g-arch-v);--rf-hue-rgb:var(--rf-g-arch-rgb)}
[data-rf-gallery="callouts"]{--rf-hue:var(--rf-g-callouts);--rf-hue-v:var(--rf-g-callouts-v);--rf-hue-rgb:var(--rf-g-callouts-rgb)}
[data-rf-gallery="obsidian"]{--rf-hue:var(--rf-g-obsidian);--rf-hue-v:var(--rf-g-obsidian-v);--rf-hue-rgb:var(--rf-g-obsidian-rgb)}
[data-rf-gallery="menus"]{--rf-hue:var(--rf-g-menus);--rf-hue-v:var(--rf-g-menus-v);--rf-hue-rgb:var(--rf-g-menus-rgb)}
[data-rf-gallery="spectrums"]{--rf-hue:var(--rf-g-spectrums);--rf-hue-v:var(--rf-g-spectrums-v);--rf-hue-rgb:var(--rf-g-spectrums-rgb)}
[data-rf-gallery="idea"]{--rf-hue:var(--rf-g-idea);--rf-hue-v:var(--rf-g-idea-v);--rf-hue-rgb:var(--rf-g-idea-rgb)}
[data-rf-gallery="mobile"]{--rf-hue:var(--rf-g-mobile);--rf-hue-v:var(--rf-g-mobile-v);--rf-hue-rgb:var(--rf-g-mobile-rgb)}
[data-rf-gallery="desktop"]{--rf-hue:var(--rf-g-desktop);--rf-hue-v:var(--rf-g-desktop-v);--rf-hue-rgb:var(--rf-g-desktop-rgb)}
[data-rf-gallery="facets"]{--rf-hue:var(--rf-g-facets);--rf-hue-v:var(--rf-g-facets-v);--rf-hue-rgb:var(--rf-g-facets-rgb)}
[data-rf-gallery="search"]{--rf-hue:var(--rf-g-search);--rf-hue-v:var(--rf-g-search-v);--rf-hue-rgb:var(--rf-g-search-rgb)}
[data-rf-gallery="variants"]{--rf-hue:var(--rf-g-variants);--rf-hue-v:var(--rf-g-variants-v);--rf-hue-rgb:var(--rf-g-variants-rgb)}
[data-rf-gallery="showcase"]{--rf-hue:var(--rf-g-showcase);--rf-hue-v:var(--rf-g-showcase-v);--rf-hue-rgb:var(--rf-g-showcase-rgb)}
[data-rf-gallery="collections"]{--rf-hue:var(--rf-g-collections);--rf-hue-v:var(--rf-g-collections-v);--rf-hue-rgb:var(--rf-g-collections-rgb)}
[data-rf-surface="web"]{--rf-hue:var(--rf-surf-web);--rf-hue-v:var(--rf-surf-web-v);--rf-hue-rgb:var(--rf-surf-web-rgb)}
[data-rf-surface="terminal"]{--rf-hue:var(--rf-surf-terminal);--rf-hue-v:var(--rf-surf-terminal-v);--rf-hue-rgb:var(--rf-surf-terminal-rgb)}
[data-rf-surface="deck"]{--rf-hue:var(--rf-surf-deck);--rf-hue-v:var(--rf-surf-deck-v);--rf-hue-rgb:var(--rf-surf-deck-rgb)}

/* 4 ── Primitives ─────────────────────────────────────────────────────────
   Reference layer. Every class is .rf-* (never .panel/.card/.tile — those are
   showcased content inside galleries). Low specificity via :is() so the shell
   can override without !important. Everything degrades to the contract tokens
   when a non-Prism skin (Cloudscape, Material 3 …) is active. */

.rf-root{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none;text-rendering:optimizeLegibility}
.rf-root ::selection{background:var(--rf-selection,rgba(var(--accent-rgb),.3))}
.rf-root :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--rf-focus,var(--accent));outline-offset:2px;box-shadow:0 0 0 6px var(--rf-focus-halo,transparent)}
:is(.rf-num){font-variant-numeric:tabular-nums}

/* Instrument label — "01 / CHARTS & METRICS · 209 FACETS · λ 436" */
:is(.rf-eyebrow){display:inline-flex;align-items:center;flex-wrap:wrap;gap:.25em .8em;margin:0;font:var(--rf-fw-strong,600) var(--rf-fs-eyebrow,10px)/var(--rf-lh-eyebrow,1.2) var(--rf-mono,ui-monospace,monospace);letter-spacing:var(--rf-ls-eyebrow,.15em);text-transform:uppercase;color:var(--rf-hue,var(--accent))}
:is(.rf-eyebrow) :is(.rf-sep){color:var(--dim);font-weight:400}
:is(.rf-eyebrow) :is(.rf-meta){color:var(--dim)}
:is(.rf-eyebrow) :is(.rf-dot){width:6px;height:6px;border-radius:50%;background:var(--pos);box-shadow:0 0 9px rgba(var(--pos-rgb),.45)}

/* λ / illuminant label and counts */
:is(.rf-lambda,.rf-count){font:400 var(--rf-fs-count,11px)/1 var(--rf-mono,ui-monospace,monospace);letter-spacing:.02em;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap;text-transform:none}
/* text-transform:uppercase turns λ into Λ — wrap every λ in .rf-lambda (or .rf-nocase) inside caps labels */
.rf-eyebrow .rf-lambda{font:inherit;color:inherit;letter-spacing:.04em}
.rf-nocase{text-transform:none!important}

/* Spectral index — the gallery's hue as a tick (default), dot, white light, or the full ramp */
:is(.rf-index){display:inline-block;flex:none;width:3px;height:14px;border-radius:2px;background:var(--rf-hue-v,var(--accent));opacity:.8;transition:height var(--rf-dur-base,.24s) var(--rf-ease-out-expo,ease),opacity var(--rf-dur-fast,.14s),box-shadow var(--rf-dur-base,.24s)}
:is(.rf-index.is-dot){width:6px;height:6px;border-radius:50%}
:is(.rf-index.is-white){background:var(--rf-white,var(--ink));opacity:.55}
:is(.rf-index.is-full){background:var(--rf-spectrum-v,var(--accent));opacity:1}
:is(.rf-index.is-lit){opacity:1;box-shadow:0 0 8px rgba(var(--rf-hue-rgb,var(--accent-rgb)),.75)}

/* The Beam — a hairline of light. Rule, vertical indicator, progress. */
:is(.rf-beam){position:relative;display:block;height:1px;border:0;margin:0;background:var(--line);overflow:visible}
:is(.rf-beam)::after{content:"";position:absolute;top:0;left:var(--rf-beam-x,0%);width:var(--rf-beam-w,42%);height:1px;background:var(--rf-beam,var(--accent));box-shadow:var(--rf-beam-glow,none);pointer-events:none}
:is(.rf-beam.is-hue)::after{background:linear-gradient(90deg,rgba(var(--rf-hue-rgb),0),rgba(var(--rf-hue-rgb),.95) 45%,var(--rf-beam-core,#fff) 50%,rgba(var(--rf-hue-rgb),.95) 55%,rgba(var(--rf-hue-rgb),0));box-shadow:0 0 10px rgba(var(--rf-hue-rgb),.6)}
:is(.rf-beam.is-glint)::before{content:"";position:absolute;top:-1px;left:calc(var(--rf-beam-x,0%) + var(--rf-beam-w,42%) - 8%);width:12%;height:3px;background:var(--rf-fringe,none);filter:blur(1px);opacity:.8;pointer-events:none}
:is(.rf-beam.is-full)::after{left:0;width:100%}
:is(.rf-beam.is-sweep)::after{animation:rf-beam-travel var(--rf-dur-sweep,.6s) var(--rf-ease-in-out,ease-in-out) both}
:is(.rf-beam-v){width:2px;height:18px;border-radius:2px;background:var(--rf-beam-v,var(--accent));box-shadow:var(--rf-beam-glow,none)}
:is(.rf-progress){position:relative;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
:is(.rf-progress)>i{position:absolute;inset:0 auto 0 0;width:var(--rf-p,40%);border-radius:inherit;background:linear-gradient(90deg,rgba(var(--rf-hue-rgb,var(--accent-rgb)),.25),rgba(var(--rf-hue-rgb,var(--accent-rgb)),1));box-shadow:0 0 8px rgba(var(--rf-hue-rgb,var(--accent-rgb)),.55)}
:is(.rf-progress)>i::after{content:"";position:absolute;right:0;top:-1px;width:10px;height:4px;border-radius:2px;background:var(--rf-beam-core,#fff);filter:blur(1.5px)}

/* Material — depth from light. Level 1 resting, 2 raised, 3 overlay (glass). */
:is(.rf-surface){position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--elev-1)}
:is(.rf-surface.is-raised){background:var(--rf-raised,var(--panel2));border-color:var(--rf-line-strong,var(--line));box-shadow:var(--elev-2)}
:is(.rf-glass){background:var(--rf-glass,var(--panel));-webkit-backdrop-filter:blur(var(--rf-glass-blur,16px)) saturate(var(--rf-glass-sat,140%));backdrop-filter:blur(var(--rf-glass-blur,16px)) saturate(var(--rf-glass-sat,140%));border:1px solid var(--rf-glass-line,var(--line));border-radius:var(--r-xl);box-shadow:inset 0 1px 0 var(--rf-edge-hi,transparent),var(--rf-shadow-3,var(--elev-2))}
/* Lit edge on hover: Night = a beam of the hue along the top edge; Day = thin-film iridescent border */
:is(.rf-lit){position:relative}
:is(.rf-lit)::before{content:"";position:absolute;left:12%;right:12%;top:-1px;height:1px;background:linear-gradient(90deg,rgba(var(--rf-hue-rgb,var(--accent-rgb)),0),rgba(var(--rf-hue-rgb,var(--accent-rgb)),.9) 50%,rgba(var(--rf-hue-rgb,var(--accent-rgb)),0));opacity:0;transition:opacity var(--rf-dur-base,.24s) var(--rf-ease-out-expo,ease);pointer-events:none;z-index:1}
:is(.rf-lit):hover::before,:is(.rf-lit):focus-within::before{opacity:1}
:is([data-theme="prism-light"],[data-rf-mode="day"]) :is(.rf-lit):hover{border-color:transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--rf-iris-edge) border-box}

/* Measurement grid + interior light (hero areas, page headers) */
:is(.rf-grid){position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--rf-grid-line,transparent) 1px,transparent 1px),linear-gradient(90deg,var(--rf-grid-line,transparent) 1px,transparent 1px);background-size:var(--rf-grid-cell,34px) var(--rf-grid-cell,34px);-webkit-mask-image:radial-gradient(ellipse 70% 80% at 60% 40%,#000 10%,transparent 72%);mask-image:radial-gradient(ellipse 70% 80% at 60% 40%,#000 10%,transparent 72%)}
:is(.rf-halo){position:absolute;pointer-events:none;width:320px;height:320px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--rf-hue-rgb,var(--accent-rgb)),.2),rgba(var(--rf-hue-rgb,var(--accent-rgb)),0));filter:blur(20px)}
:is(.rf-iris){background:var(--rf-iris,transparent)}
:is(.rf-spectrum-text){background:var(--rf-spectrum-text,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Keyboard hint */
:is(.rf-kbd){display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border:1px solid var(--rf-line-strong,var(--line));border-bottom-width:2px;border-radius:var(--rf-r-xs,4px);background:var(--panel2);color:var(--muted);font:500 10px/1 var(--rf-mono,ui-monospace,monospace);letter-spacing:.02em;white-space:nowrap}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
:is(.rf-btn){--h:40px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--h);padding:0 16px;border:1px solid var(--rf-line-strong,var(--line));border-radius:var(--r-md);background:var(--panel);color:var(--ink);font:600 13px/1 var(--font);letter-spacing:-.005em;white-space:nowrap;text-decoration:none;cursor:pointer;overflow:hidden;box-shadow:var(--elev-1);transition:transform var(--rf-dur-fast,.14s) var(--rf-ease-out-expo,ease),border-color var(--rf-dur-fast,.14s),background-color var(--rf-dur-fast,.14s),color var(--rf-dur-fast,.14s),box-shadow var(--rf-dur-base,.24s)}
:is(.rf-btn):hover{border-color:var(--rf-accent-line,var(--accent));transform:translateY(-1px)}
:is(.rf-btn):active{transform:translateY(0) scale(.985);background:var(--panel2)}
:is(.rf-btn.is-primary){background:var(--accent);border-color:transparent;color:var(--rf-accent-ink,#fff);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 28px -12px rgba(var(--accent-rgb),.7)}
:is(.rf-btn.is-primary):hover{background:var(--rf-accent-hi,var(--accent))}
:is(.rf-btn.is-primary):active{background:var(--rf-accent-lo,var(--accent))}
:is(.rf-btn.is-primary)::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
:is(.rf-btn.is-primary):hover::after{animation:rf-glint var(--rf-dur-deliberate,.6s) var(--rf-ease-out,ease) both}
:is(.rf-btn.is-ghost){background:transparent;border-color:transparent;box-shadow:none;color:var(--muted)}
:is(.rf-btn.is-ghost):hover{background:var(--rf-hover,transparent);color:var(--ink);border-color:transparent}
:is(.rf-btn.is-sm){--h:32px;padding:0 12px;font-size:12px;gap:8px;border-radius:var(--r-sm)}
:is(.rf-btn.is-lg){--h:46px;padding:0 20px;font-size:13px;gap:18px}
:is(.rf-btn):disabled,:is(.rf-btn)[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
:is(.rf-btn) :is(.rf-arrow){font-weight:400;opacity:.8}

/* Copy action — the most-used control in Prism. Idle → copied (pos) with a beam sweep. */
:is(.rf-copy){position:relative;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:transparent;color:var(--muted);font:600 10.5px/1 var(--rf-mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;overflow:hidden;transition:color var(--rf-dur-fast,.14s),border-color var(--rf-dur-fast,.14s),background-color var(--rf-dur-fast,.14s)}
:is(.rf-copy):hover{color:var(--ink);border-color:var(--rf-line-strong,var(--line));background:var(--rf-hover,transparent)}
:is(.rf-copy.is-primary){color:var(--ink);border-color:var(--rf-line-strong,var(--line));background:var(--panel2)}
:is(.rf-copy.is-done){color:var(--pos);border-color:rgba(var(--pos-rgb),.45)}
:is(.rf-copy.is-done)::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,rgba(var(--pos-rgb),0),rgba(var(--pos-rgb),1),rgba(var(--pos-rgb),0));animation:rf-beam-travel var(--rf-dur-slow,.4s) var(--rf-ease-out-expo,ease) both}

/* ── Chips / filters ────────────────────────────────────────────────────── */
:is(.rf-chips){display:flex;flex-wrap:wrap;gap:8px}
:is(.rf-chip){display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border:1px solid var(--line);border-radius:var(--rf-r-pill,999px);background:transparent;color:var(--muted);font:400 12px/1 var(--font);cursor:pointer;white-space:nowrap;transition:color var(--rf-dur-fast,.14s),border-color var(--rf-dur-fast,.14s),background-color var(--rf-dur-fast,.14s)}
:is(.rf-chip):hover{color:var(--ink);border-color:var(--rf-line-strong,var(--line))}
:is(.rf-chip) :is(.rf-count){font-size:10px}
:is(.rf-chip)[aria-pressed="true"]{color:var(--ink);border-color:rgba(var(--rf-hue-rgb,var(--accent-rgb)),.5);background:rgba(var(--rf-hue-rgb,var(--accent-rgb)),.12)}
:is(.rf-chip)[aria-pressed="true"]::before{content:"";width:6px;height:6px;margin-left:-2px;border-radius:50%;background:var(--rf-hue-v,var(--accent));box-shadow:0 0 6px rgba(var(--rf-hue-rgb,var(--accent-rgb)),.8)}
:is(.rf-chip)[aria-pressed="true"] :is(.rf-count){color:var(--rf-hue,var(--accent))}

/* ── Tabs (underline beam) and segmented control ────────────────────────── */
:is(.rf-tabs){display:flex;gap:26px;border-bottom:1px solid var(--line)}
:is(.rf-tab){position:relative;padding:0 2px 12px;border:0;background:none;color:var(--muted);font:400 13px/1.2 var(--font);cursor:pointer;transition:color var(--rf-dur-fast,.14s)}
:is(.rf-tab):hover{color:var(--ink)}
:is(.rf-tab)[aria-selected="true"]{color:var(--ink);font-weight:600}
:is(.rf-tab)[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--rf-hue-v,var(--accent));box-shadow:0 0 12px rgba(var(--rf-hue-rgb,var(--accent-rgb)),.55);animation:rf-tab-in var(--rf-dur-base,.24s) var(--rf-ease-out-expo,ease) both}
:is(.rf-seg){display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel2)}
:is(.rf-seg)>button{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border:1px solid transparent;border-radius:var(--r-sm);background:transparent;color:var(--muted);font:600 12px/1 var(--font);cursor:pointer;transition:color var(--rf-dur-fast,.14s),background-color var(--rf-dur-fast,.14s)}
:is(.rf-seg)>button:hover{color:var(--ink)}
:is(.rf-seg)>button[aria-pressed="true"]{background:var(--card);border-color:var(--line);color:var(--ink);box-shadow:var(--elev-1)}

/* ── Inputs — fields sit on a 3:1 baseline (an instrument scale) ───────── */
:is(.rf-field){display:grid;gap:7px}
:is(.rf-label){font:600 12px/1.2 var(--font);color:var(--muted)}
:is(.rf-help){font:400 11px/1.45 var(--font);color:var(--dim)}
:is(.rf-input){height:40px;width:100%;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel2);color:var(--ink);font:400 13px/1 var(--font);box-shadow:inset 0 -1px 0 var(--rf-line-control,var(--dim));transition:border-color var(--rf-dur-fast,.14s),box-shadow var(--rf-dur-base,.24s)}
:is(.rf-input)::placeholder{color:var(--dim)}
:is(.rf-input):hover{border-color:var(--rf-line-strong,var(--line))}
:is(.rf-input):focus,:is(.rf-input):focus-visible,:is(.rf-input.is-focus){outline:none;border-color:var(--rf-focus,var(--accent));box-shadow:inset 0 -1px 0 var(--rf-focus,var(--accent)),0 0 0 4px var(--rf-focus-halo,transparent)}
:is(.rf-input)[aria-invalid="true"]{border-color:var(--neg);box-shadow:inset 0 -1px 0 var(--neg)}
:is(.rf-search){position:relative;display:flex;align-items:center;gap:10px;height:36px;padding:0 8px 0 34px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel2);color:var(--dim);font:400 12.5px/1 var(--font);cursor:text;box-shadow:inset 0 -1px 0 var(--rf-line-control,var(--dim))}
:is(.rf-search)::before{content:"";position:absolute;left:12px;top:50%;width:9px;height:9px;margin-top:-6px;border:1.5px solid currentColor;border-radius:50%}
:is(.rf-search)::after{content:"";position:absolute;left:21px;top:50%;width:5px;height:1.5px;margin-top:3px;background:currentColor;transform:rotate(45deg);transform-origin:left center}
:is(.rf-search)>span:first-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(.rf-switch){position:relative;flex:none;width:34px;height:20px;padding:0;border:1px solid var(--rf-line-control,var(--dim));border-radius:999px;background:var(--panel2);cursor:pointer;transition:background-color var(--rf-dur-base,.24s),border-color var(--rf-dur-base,.24s)}
:is(.rf-switch)::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:transform var(--rf-dur-base,.24s) var(--rf-ease-out-expo,ease),background-color var(--rf-dur-base,.24s)}
:is(.rf-switch)[aria-checked="true"]{background:var(--accent);border-color:var(--accent)}
:is(.rf-switch)[aria-checked="true"]::after{transform:translateX(14px);background:var(--rf-accent-ink,#fff)}
:is(.rf-check){position:relative;flex:none;width:16px;height:16px;padding:0;border:1px solid var(--rf-line-control,var(--dim));border-radius:var(--rf-r-xs,4px);background:var(--panel2);cursor:pointer}
:is(.rf-check)[aria-checked="true"]{background:var(--accent);border-color:var(--accent)}
:is(.rf-check)[aria-checked="true"]::after{content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid var(--rf-accent-ink,#fff);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ── Navigation item with spectral index ───────────────────────────────── */
:is(.rf-nav){display:grid;gap:1px}
:is(.rf-nav-group){display:flex;align-items:center;gap:10px;margin:18px 0 8px;padding:0 14px;font:600 9.5px/1 var(--rf-mono,ui-monospace,monospace);letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}
:is(.rf-nav-group)::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
:is(.rf-nav-item){position:relative;display:flex;align-items:center;gap:12px;min-height:calc(34px * var(--dens,1));padding:0 12px 0 14px;border-radius:var(--r-md);color:var(--muted);font:400 13px/1.2 var(--font);text-decoration:none;transition:background-color var(--rf-dur-fast,.14s),color var(--rf-dur-fast,.14s)}
:is(.rf-nav-item) :is(.rf-nav-label){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(.rf-nav-item) :is(.rf-lambda){opacity:0;transform:translateX(4px);transition:opacity var(--rf-dur-base,.24s) var(--rf-ease-out-expo,ease),transform var(--rf-dur-base,.24s) var(--rf-ease-out-expo,ease)}
:is(.rf-nav-item):hover{background:var(--rf-hover,transparent);color:var(--ink)}
:is(.rf-nav-item):hover :is(.rf-index){opacity:1}
:is(.rf-nav-item)[aria-current="page"] :is(.rf-index.is-white){background:var(--rf-white,var(--ink))}
:is(.rf-nav-item):hover :is(.rf-lambda),:is(.rf-nav-item)[aria-current="page"] :is(.rf-lambda){opacity:1;transform:none}
:is(.rf-nav-item)[aria-current="page"]{color:var(--ink);font-weight:600;background:linear-gradient(90deg,rgba(var(--rf-hue-rgb,var(--accent-rgb)),.16),rgba(var(--rf-hue-rgb,var(--accent-rgb)),.03) 75%)}
:is(.rf-nav-item)[aria-current="page"] :is(.rf-lambda){color:var(--rf-hue,var(--accent))}
:is(.rf-nav-item)[aria-current="page"] :is(.rf-index){height:20px;opacity:1;background:var(--rf-beam-v,var(--rf-hue-v));box-shadow:0 0 10px 1px rgba(var(--rf-hue-rgb,var(--accent-rgb)),.85)}
:is([data-theme="prism-light"],[data-rf-mode="day"]) :is(.rf-nav-item)[aria-current="page"] :is(.rf-index){background:var(--rf-hue-v);box-shadow:0 0 8px rgba(var(--rf-hue-rgb),.45)}

/* ── Gallery page header ───────────────────────────────────────────────── */
:is(.rf-pagehead){position:relative;isolation:isolate;padding:44px 40px 28px;overflow:hidden}
:is(.rf-pagehead)>:is(.rf-grid){z-index:-1}
:is(.rf-pagehead)>:is(.rf-halo){z-index:-1;right:6%;top:-120px}
:is(.rf-title){margin:16px 0 10px;font:var(--rf-fw-display,700) var(--rf-fs-h1,44px)/var(--rf-lh-h1,1.1) var(--font);letter-spacing:var(--rf-ls-h1,-.042em);color:var(--ink)}
:is(.rf-lead){max-width:62ch;margin:0;font:400 var(--rf-fs-body,14px)/1.7 var(--font);color:var(--muted)}
/* Spectral ruler — where this page sits on the spectrum (instrument detail) */
:is(.rf-ruler){position:relative;height:22px;margin-top:26px}
:is(.rf-ruler)::before{content:"";position:absolute;left:0;right:0;top:10px;height:2px;border-radius:1px;background:var(--rf-spectrum,var(--line));opacity:.85}
:is(.rf-ruler)>i{position:absolute;top:3px;width:1px;height:5px;background:var(--rf-line-strong,var(--line))}
:is(.rf-ruler)>b{position:absolute;top:0;width:2px;height:22px;margin-left:-1px;border-radius:1px;background:var(--rf-beam-core,var(--ink));box-shadow:0 0 10px 1px rgba(var(--rf-hue-rgb,var(--accent-rgb)),.9)}

/* ── Facet tile ────────────────────────────────────────────────────────── */
:is(.rf-tile){position:relative;display:flex;flex-direction:column;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--elev-1);transition:border-color var(--rf-dur-base,.24s) var(--rf-ease-out-expo,ease),box-shadow var(--rf-dur-base,.24s) var(--rf-ease-out-expo,ease)}
:is(.rf-tile):hover{border-color:var(--rf-line-strong,var(--line));box-shadow:var(--elev-2)}
:is(.rf-tile-stage){position:relative;display:grid;place-items:center;height:200px;border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;background:var(--bg);overflow:hidden}
:is(.rf-tile-coord){position:absolute;left:12px;top:11px;font:400 9.5px/1 var(--rf-mono,ui-monospace,monospace);letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
:is(.rf-tile-live){position:absolute;right:12px;top:11px;display:flex;align-items:center;gap:5px;font:600 9px/1 var(--rf-mono,ui-monospace,monospace);letter-spacing:.12em;color:var(--pos)}
:is(.rf-tile-live)::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--pos);box-shadow:0 0 6px rgba(var(--pos-rgb),.7)}
:is(.rf-tile-meta){display:grid;gap:8px;padding:14px 16px;border-top:1px solid var(--line)}
:is(.rf-tile-name){display:flex;align-items:center;gap:8px;margin:0;font:600 13px/1.3 var(--font);letter-spacing:-.005em;color:var(--ink)}
:is(.rf-tag){display:inline-flex;align-items:center;height:16px;padding:0 5px;border:1px solid rgba(var(--rf-hue-rgb,var(--accent-rgb)),.5);border-radius:var(--rf-r-xs,4px);color:var(--rf-hue,var(--accent));font:600 8.5px/1 var(--rf-mono,ui-monospace,monospace);letter-spacing:.12em}
:is(.rf-ref){justify-self:start;padding:3px 6px;border:1px solid var(--line);border-radius:var(--rf-r-xs,4px);background:var(--rf-code-bg,var(--panel2));color:var(--rf-hue,var(--accent));font:400 11px/1.2 var(--rf-mono,ui-monospace,monospace)}
:is(.rf-tile-desc){margin:0;font:400 12px/1.55 var(--font);color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
:is(.rf-copybar){display:flex;align-items:center;gap:6px;margin-top:4px}
:is(.rf-copybar)>:is(.rf-lambda){margin-left:auto;display:inline-flex;align-items:center;gap:7px}

/* ── Command palette ───────────────────────────────────────────────────── */
:is(.rf-palette){width:min(640px,100%);overflow:hidden}
:is(.rf-palette-input){position:relative;display:flex;align-items:center;gap:12px;height:56px;padding:0 18px 0 46px;font:400 15px/1 var(--font);color:var(--ink)}
:is(.rf-palette-input)::before{content:"";position:absolute;left:19px;top:50%;width:11px;height:11px;margin-top:-7px;border:1.5px solid var(--muted);border-radius:50%}
:is(.rf-palette-input)::after{content:"";position:absolute;left:30px;top:50%;width:6px;height:1.5px;margin-top:4px;background:var(--muted);transform:rotate(45deg);transform-origin:left center}
:is(.rf-palette-input)>span:first-child{flex:1}
:is(.rf-palette-caret){display:inline-block;width:1.5px;height:18px;margin-left:1px;vertical-align:-3px;background:var(--accent);animation:rf-caret 1.1s steps(1) infinite}
:is(.rf-palette-list){max-height:360px;overflow:auto;padding:6px 8px 8px}
:is(.rf-palette-group){padding:12px 10px 6px;font:600 9.5px/1 var(--rf-mono,ui-monospace,monospace);letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}
:is(.rf-palette-row){display:flex;align-items:center;gap:12px;height:40px;padding:0 10px;border-radius:var(--r-md);color:var(--muted);font:400 13px/1 var(--font)}
:is(.rf-palette-row)>:is(.rf-name){color:var(--ink)}
:is(.rf-palette-row)>:is(.rf-where){flex:1;color:var(--dim);font-size:12px}
:is(.rf-palette-row) mark{background:none;color:var(--rf-hue,var(--accent));font-weight:600}
:is(.rf-palette-row)[aria-selected="true"]{background:rgba(var(--rf-hue-rgb,var(--accent-rgb)),.13);box-shadow:inset 0 0 0 1px rgba(var(--rf-hue-rgb,var(--accent-rgb)),.28)}
:is(.rf-palette-foot){display:flex;align-items:center;gap:16px;height:40px;padding:0 18px;border-top:1px solid var(--rf-glass-line,var(--line));font:400 10.5px/1 var(--rf-mono,ui-monospace,monospace);color:var(--dim)}
:is(.rf-palette-foot) :is(.rf-kbd){margin-right:6px}

/* ── Toast ─────────────────────────────────────────────────────────────── */
:is(.rf-toast){position:relative;display:flex;align-items:flex-start;gap:12px;width:min(380px,100%);padding:14px 16px 16px;border-radius:var(--r-lg);overflow:hidden}
:is(.rf-toast)>:is(.rf-index){margin-top:2px;height:30px}
:is(.rf-toast-title){margin:0 0 4px;font:600 13px/1.3 var(--font);color:var(--ink)}
:is(.rf-toast-body){margin:0;font:400 11px/1.5 var(--rf-mono,ui-monospace,monospace);color:var(--muted)}
:is(.rf-toast)>:is(.rf-progress){position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:0;background:transparent}

/* ── Motion ────────────────────────────────────────────────────────────── */
:is(.rf-refract-in){animation:rf-refract-in var(--rf-dur-deliberate,.6s) var(--rf-ease-out-expo,ease-out) both;animation-delay:calc(min(var(--rf-i,0),12) * var(--rf-stagger,28ms))}
:is(.rf-refract-in-box){animation:rf-refract-in-box var(--rf-dur-deliberate,.6s) var(--rf-ease-out-expo,ease-out) both;animation-delay:calc(min(var(--rf-i,0),12) * var(--rf-stagger,28ms))}
:is(.rf-rise){animation:rf-rise var(--rf-dur-slow,.4s) var(--rf-ease-out-expo,ease-out) both;animation-delay:calc(min(var(--rf-i,0),12) * var(--rf-stagger,28ms))}
@keyframes rf-refract-in{0%{opacity:0;transform:translateY(6px);filter:blur(6px);text-shadow:-3px 0 var(--rf-split-a,transparent),3px 0 var(--rf-split-b,transparent)}55%{opacity:1;filter:blur(0);text-shadow:-1px 0 var(--rf-split-a,transparent),1px 0 var(--rf-split-b,transparent)}100%{opacity:1;transform:none;filter:none;text-shadow:0 0 transparent,0 0 transparent}}
@keyframes rf-refract-in-box{0%{opacity:0;transform:translateY(8px) scale(.985);filter:blur(5px) drop-shadow(-3px 0 0 var(--rf-split-a,transparent)) drop-shadow(3px 0 0 var(--rf-split-b,transparent))}60%{opacity:1;filter:blur(0) drop-shadow(-1px 0 0 var(--rf-split-a,transparent)) drop-shadow(1px 0 0 var(--rf-split-b,transparent))}100%{opacity:1;transform:none;filter:none}}
@keyframes rf-rise{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes rf-fade{from{opacity:0}to{opacity:1}}
@keyframes rf-beam-travel{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rf-glint{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
@keyframes rf-tab-in{from{transform:scaleX(.2);opacity:0}to{transform:none;opacity:1}}
@keyframes rf-caret{50%{opacity:0}}
@keyframes rf-breathe{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes rf-relight{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rf-relight-rtl{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes rf-relight-beam{from{transform:translateX(0)}to{transform:translateX(100vw)}}
@keyframes rf-relight-beam-rtl{from{transform:translateX(100vw)}to{transform:translateX(0)}}

/* Theme relight (Day <-> Night) — View Transitions recipe (README › Motion). 600 ms ceiling.
   The light travels AWAY from the toggle that was pressed: origin right of centre → add .rf-rtl
   (right-to-left); no origin → left-to-right. Any input ends it (vt.skipTransition()).
   The shipped implementation is PrismFirstLight.relight(applyFn, originEl) in design/first-light/;
   this CSS-only recipe is the equivalent for pages that don't load First Light.
   JS: html.classList.toggle('rf-rtl', originCenterX > innerWidth / 2);
       vt = document.startViewTransition(() => { html.classList.add('rf-relighting'); applyTheme(next) });
       vt.ready.then(() => addEventListener('pointerdown' | 'keydown' | 'wheel' | 'touchstart', () => vt.skipTransition(), {capture:true}));
       vt.finished.finally(() => html.classList.remove('rf-relighting', 'rf-rtl'))
   Needs one <i class="rf-relight-beam"></i> in the shell body.               */
.rf-relight-beam{position:fixed;top:0;bottom:0;left:-1px;width:2px;z-index:2147483646;pointer-events:none;opacity:0;view-transition-name:rf-relight-beam;background:var(--rf-beam-v,#fff);box-shadow:0 0 18px 4px rgba(var(--accent-rgb),.55),0 0 60px 12px rgba(var(--accent-rgb),.25)}
.rf-relighting .rf-relight-beam{opacity:1}
.rf-relighting::view-transition{pointer-events:none}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:rf-relight var(--rf-dur-sweep,.6s) var(--rf-ease-in-out,ease-in-out) both}
.rf-rtl::view-transition-new(root){animation-name:rf-relight-rtl}
::view-transition-old(rf-relight-beam),::view-transition-new(rf-relight-beam){animation:none}
::view-transition-group(rf-relight-beam){animation:rf-relight-beam var(--rf-dur-sweep,.6s) var(--rf-ease-in-out,ease-in-out) both}
.rf-rtl::view-transition-group(rf-relight-beam){animation-name:rf-relight-beam-rtl}

/* Reduced motion — fade or nothing. [data-rf-motion="reduce"] forces it in-app. */
@media (prefers-reduced-motion:reduce){
  :is(.rf-refract-in,.rf-refract-in-box,.rf-rise){animation:rf-fade 120ms linear both;animation-delay:0s}
  :is(.rf-beam.is-sweep)::after,:is(.rf-copy.is-done)::after,:is(.rf-tab)[aria-selected="true"]::after,:is(.rf-btn.is-primary):hover::after{animation:none}
  :is(.rf-palette-caret){animation:none}
  ::view-transition-new(root),::view-transition-group(rf-relight-beam){animation:none}
}
[data-rf-motion="reduce"] :is(.rf-refract-in,.rf-refract-in-box,.rf-rise){animation:rf-fade 120ms linear both;animation-delay:0s}
[data-rf-motion="reduce"] :is(.rf-beam.is-sweep)::after,[data-rf-motion="reduce"] :is(.rf-copy.is-done)::after,[data-rf-motion="reduce"] :is(.rf-tab)[aria-selected="true"]::after,[data-rf-motion="reduce"] :is(.rf-btn.is-primary):hover::after,[data-rf-motion="reduce"] :is(.rf-palette-caret){animation:none}