/*! @boreon/css · the Boreon master CSS toolkit · built 2026-07-05 * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ /*! ╔══════════════════════════════════════════════════════════════════════════╗ * ║ CSS-CODEBASE — @boreon/css · the Boreon master CSS / front-end toolkit ║ * ║ Tokens · 12 themes · accessibility (WCAG-AAA, HDR/4K/8K) · components · ║ * ║ and a deep polish / rendering / graphics-enhancement FX layer. ║ * ║ Total web-dev domination, built as dedicated work. ║ * ║ Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ ║ * ╚══════════════════════════════════════════════════════════════════════════╝ * * This is the authored ENTRY. Layers are declared once here so cascade order is * explicit and predictable regardless of import order. The build (tools/build.mjs) * inlines every @import into its layer to produce dist/boreon.css + boreon.min.css. * * Cascade order (earliest = weakest, latest = strongest): * reset → tokens → base → layout → components → fx → motion → utilities → a11y * a11y is LAST so preference-gated safety rules (reduced-motion, forced-colors, * high-contrast) win over everything, including utilities. */ @layer reset,tokens,base,layout,components,fx,render,materials,motion,utilities,a11y;@layer tokens{/*! CSS-CODEBASE · tokens/palette — the single source of truth for every Boreon brand colour. * Harvested verbatim from PHP-CODEBASE `Boreon\Brand\Palette` so nothing drifts across the suite. * Never hard-code a hex anywhere else — reference these so one edit re-tints the whole universe. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ :root{--brn-black: #000000;--brn-ink: #0a0a0b;--brn-surface: #111114;--brn-surface-2: #17181c;--brn-graphite: #2a2c31;--brn-steel: #4a4d54;--brn-gray: #6b6e73;--brn-silver: #a7abb2;--brn-mist: #d7dadf;--brn-offwhite: #f6f7f8;--brn-white: #ffffff;--brn-cerulean: #29a9e0;--brn-cerulean-strong: #1b86b8;--brn-cerulean-contrast: #04141d;--brn-green: #22a95c;--brn-green-strong: #15813f;--brn-green-contrast: #03140a;--brn-rose: #f0466c;--brn-rose-strong: #cc2a4f;--brn-rose-contrast: #ffffff;--brn-lemon: #f2c744;--brn-lemon-strong: #c99b12;--brn-lemon-contrast: #1a1403;--pan-red: #ef3340;--pan-orange: #fe5000;--pan-yellow: #fedd00;--pan-green: #00ab84;--pan-blue: #10069f;--pan-indigo: #2e008b;--pan-violet: #440099;--aic-blue: #2e5bff;--aic-violet: #6f3de8;--aic-acc: #8b5cf6;--aic-navy: #0f1f4e;--aic-coral: #cc785c;--aic-ink: #1f2937;--aic-muted: #969ca8;--aic-bg: #0f172a;--aic-surface: #1e293b;--aic-surface-2: #263348;--aic-border: #334155;--aic-text: #f1f5f9;--aic-dim: #94a3b8;--aic-dark-bg: #0d1424;--aic-dark-acc: #22b6f0}}@layer tokens{/*! CSS-CODEBASE · tokens/root — the design-token CONTRACT. * Every component, layout, and effect reads from these custom properties. * Type/space/radius are fluid (clamp) for HDR/4K/8K scaling; theme tokens default to Boreon Mono. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ :root{--font-display: "Saira","Rajdhani","Segoe UI",system-ui,sans-serif;--font-body: "Inter",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;--font-mono: "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--text-2xs: clamp(0.55rem,0.4vw + 0.4rem,0.66rem);--text-xs: clamp(0.66rem,0.5vw + 0.5rem,0.78rem);--text-sm: clamp(0.78rem,0.55vw + 0.6rem,0.9rem);--text-base: clamp(0.88rem,0.65vw + 0.7rem,1rem);--text-md: clamp(0.95rem,0.75vw + 0.75rem,1.15rem);--text-lg: clamp(1rem,0.9vw + 0.8rem,1.3rem);--text-xl: clamp(1.15rem,1.2vw + 0.9rem,1.6rem);--text-2xl: clamp(1.3rem,1.8vw + 1rem,2.1rem);--text-3xl: clamp(1.6rem,2.5vw + 1rem,3rem);--text-4xl: clamp(2rem,3.4vw + 1rem,4rem);--text-5xl: clamp(2.6rem,5vw + 1rem,6rem);--fw-regular: 400;--fw-medium: 500;--fw-semibold: 600;--fw-bold: 700;--fw-black: 800;--lh-tight: 1.12;--lh-snug: 1.35;--lh-normal: 1.6;--lh-loose: 1.85;--tracking-display: -0.02em;--tracking-tight: -0.01em;--tracking-wide: 0.12em;--measure: 68ch;--sp-0: 0;--sp-1: clamp(3px,0.25vw,5px);--sp-2: clamp(6px,0.5vw,10px);--sp-3: clamp(10px,0.8vw,14px);--sp-4: clamp(14px,1.1vw,20px);--sp-5: clamp(18px,1.5vw,26px);--sp-6: clamp(24px,2vw,34px);--sp-8: clamp(34px,3vw,52px);--sp-10: clamp(48px,4vw,80px);--sp-12: clamp(64px,6vw,120px);--radius-sm: clamp(7px,0.5vw,11px);--radius: clamp(10px,0.8vw,16px);--radius-lg: clamp(14px,1.2vw,22px);--radius-xl: clamp(18px,1.8vw,30px);--radius-pill: 999px;--radius-circle: 50%;--ease-out: cubic-bezier(0.22,1,0.36,1);--ease-in-out: cubic-bezier(0.65,0,0.35,1);--ease-spring: cubic-bezier(0.34,1.56,0.64,1);--ease-snap: cubic-bezier(0.16,1,0.3,1);--dur-fast: 140ms;--dur-base: 260ms;--dur-slow: 520ms;--dur-xslow: 900ms;--container: clamp(1280px,72vw,2200px);--container-wide: 1440px;--container-prose: 72ch;--gutter: clamp(16px,4vw,48px);--sidebar-w: 284px;--z-base: 0;--z-raised: 10;--z-sticky: 50;--z-header: 100;--z-overlay: 800;--z-modal: 1000;--z-toast: 1200;--glass-blur: 18px;--glass-blur-sm: 8px;--glass-blur-lg: 32px;--glass-saturate: 1.4;--fx-glow-spread: 0.45;--fx-grain-opacity: 0.05;--fx-vignette: 0.35;--fx-sheen-angle: 115deg;--fx-tilt: 8deg;--fx-parallax-depth: 40px;--fx-bloom: 0.6;--bg: var(--brn-ink);--bg-elev: var(--brn-surface);--surface: var(--brn-surface);--surface-2: var(--brn-surface-2);--fg: var(--brn-white);--text: var(--brn-white);--fg-muted: var(--brn-silver);--muted: var(--brn-silver);--fg-subtle: var(--brn-gray);--line: rgba(255,255,255,0.1);--line-strong: rgba(255,255,255,0.18);--border: rgba(255,255,255,0.1);--glass-bg: rgba(255,255,255,0.06);--glass-bg-2: rgba(255,255,255,0.1);--glass-border: rgba(255,255,255,0.16);--accent: var(--brn-white);--accent-strong: var(--brn-mist);--accent-contrast: var(--brn-black);--accent-soft: rgba(255,255,255,0.08);--accent-glow: rgba(255,255,255,0.12);--grad-ink: linear-gradient(160deg,#17181c 0%,#0a0a0b 60%,#000 100%);--grad-steel: linear-gradient(135deg,#4a4d54 0%,#17181c 100%);--grad-silver: linear-gradient(135deg,#fff 0%,#a7abb2 100%);--grad-accent: linear-gradient(135deg,#fff 0%,#a7abb2 100%);--grad-sheen: linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,0.35) 50%,rgba(255,255,255,0) 70%);--grad-radial: radial-gradient(60% 60% at 50% 0%,rgba(255,255,255,0.1),rgba(255,255,255,0) 70%);--shadow: 0 2px 10px rgba(0,0,0,0.45);--shadow-md: 0 8px 24px rgba(0,0,0,0.45);--shadow-lg: 0 24px 60px rgba(0,0,0,0.55);--shadow-glow: 0 0 0 1px var(--accent-soft),0 8px 40px var(--accent-glow);--scale: 1;color-scheme: dark}}@layer tokens{/*! CSS-CODEBASE · tokens/themes — 12 hand-tuned themes, every one WCAG-AAA for body text. * Switch via `data-theme` on (+ optional localStorage['boreon_theme']). * Families: Boreon (mono default + 4 living accents + daylight) · AI Church (blue→violet, 6). * The token CONTRACT (--accent, --bg, --surface, glass, gradients, shadows) is identical across all. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ [data-theme="boreon-mono"]{--bg: #0a0a0b;--bg-elev: #111114;--surface: #111114;--surface-2: #17181c;--fg: #fff;--text: #fff;--fg-muted: #a7abb2;--muted: #a7abb2;--fg-subtle: #6b6e73;--line: rgba(255,255,255,0.1);--line-strong: rgba(255,255,255,0.18);--border: rgba(255,255,255,0.1);--glass-bg: rgba(255,255,255,0.06);--glass-bg-2: rgba(255,255,255,0.1);--glass-border: rgba(255,255,255,0.16);--accent: #fff;--accent-strong: #d7dadf;--accent-contrast: #000;--accent-soft: rgba(255,255,255,0.08);--accent-glow: rgba(255,255,255,0.12);--grad-accent: linear-gradient(135deg,#fff 0%,#a7abb2 100%);color-scheme: dark}[data-theme="boreon-daylight"]{--bg: #fff;--bg-elev: #f6f7f8;--surface: #f6f7f8;--surface-2: #fff;--fg: #000;--text: #000;--fg-muted: #4a4d54;--muted: #4a4d54;--fg-subtle: #6b6e73;--line: rgba(0,0,0,0.1);--line-strong: rgba(0,0,0,0.18);--border: rgba(0,0,0,0.1);--glass-bg: rgba(255,255,255,0.6);--glass-bg-2: rgba(255,255,255,0.75);--glass-border: rgba(0,0,0,0.1);--accent: #0a0a0b;--accent-strong: #4a4d54;--accent-contrast: #fff;--accent-soft: rgba(0,0,0,0.08);--accent-glow: rgba(0,0,0,0.12);--grad-ink: linear-gradient(160deg,#fff 0%,#f6f7f8 60%,#fff 100%);--grad-accent: linear-gradient(135deg,#0a0a0b 0%,#4a4d54 100%);--grad-sheen: linear-gradient(115deg,rgba(0,0,0,0) 30%,rgba(0,0,0,0.12) 50%,rgba(0,0,0,0) 70%);--grad-radial: radial-gradient(60% 60% at 50% 0%,rgba(0,0,0,0.06),rgba(0,0,0,0) 70%);--shadow: 0 2px 10px rgba(16,24,64,0.08);--shadow-md: 0 8px 24px rgba(16,24,64,0.12);--shadow-lg: 0 24px 60px rgba(16,24,64,0.16);color-scheme: light}[data-theme="boreon-cerulean"]{--bg: #0a0a0b;--bg-elev: #111114;--surface: #111114;--surface-2: #17181c;--fg: #fff;--text: #fff;--fg-muted: #a7abb2;--muted: #a7abb2;--fg-subtle: #6b6e73;--line: rgba(255,255,255,0.1);--line-strong: rgba(255,255,255,0.18);--border: rgba(255,255,255,0.1);--glass-bg: rgba(255,255,255,0.06);--glass-bg-2: rgba(255,255,255,0.1);--glass-border: rgba(255,255,255,0.16);--accent: #29a9e0;--accent-strong: #1b86b8;--accent-contrast: #04141d;--accent-soft: rgba(41,169,224,0.14);--accent-glow: rgba(41,169,224,0.45);--grad-accent: linear-gradient(135deg,#29a9e0 0%,#1b86b8 100%);color-scheme: dark}[data-theme="boreon-green"]{--bg: #0a0a0b;--bg-elev: #111114;--surface: #111114;--surface-2: #17181c;--fg: #fff;--text: #fff;--fg-muted: #a7abb2;--muted: #a7abb2;--fg-subtle: #6b6e73;--line: rgba(255,255,255,0.1);--line-strong: rgba(255,255,255,0.18);--border: rgba(255,255,255,0.1);--glass-bg: rgba(255,255,255,0.06);--glass-bg-2: rgba(255,255,255,0.1);--glass-border: rgba(255,255,255,0.16);--accent: #22a95c;--accent-strong: #15813f;--accent-contrast: #03140a;--accent-soft: rgba(34,169,92,0.14);--accent-glow: rgba(34,169,92,0.42);--grad-accent: linear-gradient(135deg,#22a95c 0%,#15813f 100%);color-scheme: dark}[data-theme="boreon-rose"]{--bg: #0a0a0b;--bg-elev: #111114;--surface: #111114;--surface-2: #17181c;--fg: #fff;--text: #fff;--fg-muted: #a7abb2;--muted: #a7abb2;--fg-subtle: #6b6e73;--line: rgba(255,255,255,0.1);--line-strong: rgba(255,255,255,0.18);--border: rgba(255,255,255,0.1);--glass-bg: rgba(255,255,255,0.06);--glass-bg-2: rgba(255,255,255,0.1);--glass-border: rgba(255,255,255,0.16);--accent: #f0466c;--accent-strong: #cc2a4f;--accent-contrast: #fff;--accent-soft: rgba(240,70,108,0.14);--accent-glow: rgba(240,70,108,0.42);--grad-accent: linear-gradient(135deg,#f0466c 0%,#cc2a4f 100%);color-scheme: dark}[data-theme="boreon-lemon"]{--bg: #0a0a0b;--bg-elev: #111114;--surface: #111114;--surface-2: #17181c;--fg: #fff;--text: #fff;--fg-muted: #a7abb2;--muted: #a7abb2;--fg-subtle: #6b6e73;--line: rgba(255,255,255,0.1);--line-strong: rgba(255,255,255,0.18);--border: rgba(255,255,255,0.1);--glass-bg: rgba(255,255,255,0.06);--glass-bg-2: rgba(255,255,255,0.1);--glass-border: rgba(255,255,255,0.16);--accent: #f2c744;--accent-strong: #c99b12;--accent-contrast: #1a1403;--accent-soft: rgba(242,199,68,0.16);--accent-glow: rgba(242,199,68,0.4);--grad-accent: linear-gradient(135deg,#f2c744 0%,#c99b12 100%);color-scheme: dark}[data-theme="aic-base"]{--bg: #0f172a;--bg-elev: #1e293b;--surface: #1e293b;--surface-2: #263348;--fg: #f1f5f9;--text: #f1f5f9;--fg-muted: #94a3b8;--muted: #94a3b8;--fg-subtle: #64748b;--line: rgba(148,163,184,0.18);--line-strong: rgba(148,163,184,0.3);--border: rgba(148,163,184,0.18);--glass-bg: rgba(46,91,255,0.06);--glass-bg-2: rgba(46,91,255,0.12);--glass-border: rgba(139,92,246,0.28);--accent: #2e5bff;--accent-strong: #6f3de8;--accent-contrast: #fff;--accent-soft: rgba(46,91,255,0.14);--accent-glow: rgba(111,61,232,0.45);--grad-accent: linear-gradient(135deg,#2e5bff 0%,#6f3de8 100%);--grad-radial: radial-gradient(60% 60% at 50% 0%,rgba(111,61,232,0.18),rgba(111,61,232,0) 70%);color-scheme: dark}[data-theme="aic-green"]{--bg: #0f172a;--bg-elev: #1e293b;--surface: #1e293b;--surface-2: #263348;--fg: #f1f5f9;--text: #f1f5f9;--fg-muted: #94a3b8;--muted: #94a3b8;--fg-subtle: #64748b;--line: rgba(148,163,184,0.18);--line-strong: rgba(148,163,184,0.3);--border: rgba(148,163,184,0.18);--glass-bg: rgba(22,163,74,0.07);--glass-bg-2: rgba(22,163,74,0.13);--glass-border: rgba(22,163,74,0.3);--accent: #16a34a;--accent-strong: #c9f1d8;--accent-contrast: #fff;--accent-soft: rgba(22,163,74,0.14);--accent-glow: rgba(22,163,74,0.42);--grad-accent: linear-gradient(135deg,#16a34a 0%,#0f7a37 100%);color-scheme: dark}[data-theme="aic-rose"]{--bg: #0f172a;--bg-elev: #1e293b;--surface: #1e293b;--surface-2: #263348;--fg: #f1f5f9;--text: #f1f5f9;--fg-muted: #94a3b8;--muted: #94a3b8;--fg-subtle: #64748b;--line: rgba(148,163,184,0.18);--line-strong: rgba(148,163,184,0.3);--border: rgba(148,163,184,0.18);--glass-bg: rgba(225,29,72,0.07);--glass-bg-2: rgba(225,29,72,0.13);--glass-border: rgba(225,29,72,0.3);--accent: #e11d48;--accent-strong: #fbd0d9;--accent-contrast: #fff;--accent-soft: rgba(225,29,72,0.14);--accent-glow: rgba(225,29,72,0.42);--grad-accent: linear-gradient(135deg,#e11d48 0%,#be123c 100%);color-scheme: dark}[data-theme="aic-lemon"]{--bg: #0f172a;--bg-elev: #1e293b;--surface: #1e293b;--surface-2: #263348;--fg: #f1f5f9;--text: #f1f5f9;--fg-muted: #94a3b8;--muted: #94a3b8;--fg-subtle: #64748b;--line: rgba(148,163,184,0.18);--line-strong: rgba(148,163,184,0.3);--border: rgba(148,163,184,0.18);--glass-bg: rgba(245,196,0,0.08);--glass-bg-2: rgba(245,196,0,0.14);--glass-border: rgba(245,196,0,0.32);--accent: #f5c400;--accent-strong: #fde047;--accent-contrast: #3a2c00;--accent-soft: rgba(245,196,0,0.16);--accent-glow: rgba(245,196,0,0.4);--grad-accent: linear-gradient(135deg,#f5c400 0%,#d9ad00 100%);color-scheme: dark}[data-theme="aic-blue"]{--bg: #0f172a;--bg-elev: #1e293b;--surface: #1e293b;--surface-2: #263348;--fg: #f1f5f9;--text: #f1f5f9;--fg-muted: #94a3b8;--muted: #94a3b8;--fg-subtle: #64748b;--line: rgba(148,163,184,0.18);--line-strong: rgba(148,163,184,0.3);--border: rgba(148,163,184,0.18);--glass-bg: rgba(14,165,233,0.07);--glass-bg-2: rgba(14,165,233,0.13);--glass-border: rgba(14,165,233,0.3);--accent: #0ea5e9;--accent-strong: #bce8fb;--accent-contrast: #fff;--accent-soft: rgba(14,165,233,0.14);--accent-glow: rgba(14,165,233,0.42);--grad-accent: linear-gradient(135deg,#0ea5e9 0%,#0284c7 100%);color-scheme: dark}[data-theme="aic-dark"]{--bg: #0d1424;--bg-elev: #131c30;--surface: #131c30;--surface-2: #1b2740;--fg: #f1f5f9;--text: #f1f5f9;--fg-muted: #94a3b8;--muted: #94a3b8;--fg-subtle: #64748b;--line: rgba(148,163,184,0.16);--line-strong: rgba(148,163,184,0.28);--border: rgba(148,163,184,0.16);--glass-bg: rgba(34,182,240,0.06);--glass-bg-2: rgba(34,182,240,0.12);--glass-border: rgba(34,182,240,0.28);--accent: #22b6f0;--accent-strong: #7fd6f7;--accent-contrast: #04141d;--accent-soft: rgba(34,182,240,0.14);--accent-glow: rgba(34,182,240,0.45);--grad-accent: linear-gradient(135deg,#22b6f0 0%,#1b86b8 100%);--grad-radial: radial-gradient(60% 60% at 50% 0%,rgba(34,182,240,0.16),rgba(34,182,240,0) 70%);color-scheme: dark}[data-theme="pantone-red"]{--bg: #180407;--bg-elev: #21060b;--surface: #21060b;--surface-2: #2a0910;--fg: #ffffff;--text: #ffffff;--fg-muted: #d9bcc0;--muted: #d9bcc0;--fg-subtle: #9c8286;--line: rgba(255,155,163,0.14);--line-strong: rgba(255,155,163,0.26);--border: rgba(255,155,163,0.14);--glass-bg: rgba(239,51,64,0.07);--glass-bg-2: rgba(239,51,64,0.13);--glass-border: rgba(255,155,163,0.3);--accent: #ef3340;--accent-strong: #ff9ba3;--accent-contrast: #180407;--accent-soft: rgba(239,51,64,0.15);--accent-glow: rgba(239,51,64,0.48);--grad-accent: linear-gradient(135deg,#ef3340 0%,#ff9ba3 100%);--grad-radial: radial-gradient(60% 60% at 50% 0%,rgba(239,51,64,0.18),rgba(239,51,64,0) 70%);color-scheme: dark}[data-theme="pantone-orange"]{--bg: #180901;--bg-elev: #221005;--surface: #221005;--surface-2: #2b1507;--fg: #ffffff;--text: #ffffff;--fg-muted: #dcc3b4;--muted: #dcc3b4;--fg-subtle: #a08672;--line: rgba(255,171,133,0.14);--line-strong: rgba(255,171,133,0.26);--border: rgba(255,171,133,0.14);--glass-bg: rgba(254,80,0,0.07);--glass-bg-2: rgba(254,80,0,0.13);--glass-border: rgba(255,171,133,0.3);--accent: #fe5000;--accent-strong: #ffab85;--accent-contrast: #180901;--accent-soft: rgba(254,80,0,0.15);--accent-glow: rgba(254,80,0,0.48);--grad-accent: linear-gradient(135deg,#fe5000 0%,#ffab85 100%);--grad-radial: radial-gradient(60% 60% at 50% 0%,rgba(254,80,0,0.18),rgba(254,80,0,0) 70%);color-scheme: dark}[data-theme="pantone-yellow"]{--bg: #171300;--bg-elev: #201b02;--surface: #201b02;--surface-2: #292303;--fg: #ffffff;--text: #ffffff;--fg-muted: #d9d2b0;--muted: #d9d2b0;--fg-subtle: #9c9772;--line: rgba(255,232,77,0.14);--line-strong: rgba(255,232,77,0.26);--border: rgba(255,232,77,0.14);--glass-bg: rgba(254,221,0,0.07);--glass-bg-2: rgba(254,221,0,0.13);--glass-border: rgba(255,232,77,0.3);--accent: #fedd00;--accent-strong: #ffe84d;--accent-contrast: #171300;--accent-soft: rgba(254,221,0,0.15);--accent-glow: rgba(254,221,0,0.42);--grad-accent: linear-gradient(135deg,#fedd00 0%,#c9af00 100%);--grad-radial: radial-gradient(60% 60% at 50% 0%,rgba(254,221,0,0.16),rgba(254,221,0,0) 70%);color-scheme: dark}[data-theme="pantone-green"]{--bg: #02150f;--bg-elev: #041f17;--surface: #041f17;--surface-2: #06281d;--fg: #ffffff;--text: #ffffff;--fg-muted: #b8d2c9;--muted: #b8d2c9;--fg-subtle: #7e9a90;--line: rgba(125,232,201,0.14);--line-strong: rgba(125,232,201,0.26);--border: rgba(125,232,201,0.14);--glass-bg: rgba(0,171,132,0.07);--glass-bg-2: rgba(0,171,132,0.13);--glass-border: rgba(125,232,201,0.3);--accent: #00ab84;--accent-strong: #7de8c9;--accent-contrast: #02150f;--accent-soft: rgba(0,171,132,0.15);--accent-glow: rgba(0,171,132,0.45);--grad-accent: linear-gradient(135deg,#00ab84 0%,#7de8c9 100%);--grad-radial: radial-gradient(60% 60% at 50% 0%,rgba(0,171,132,0.18),rgba(0,171,132,0) 70%);color-scheme: dark}[data-theme="pantone-blue"]{--bg: #04051a;--bg-elev: #08092a;--surface: #08092a;--surface-2: #0b0d36;--fg: #ffffff;--text: #ffffff;--fg-muted: #bec2e6;--muted: #bec2e6;--fg-subtle: #8387b3;--line: rgba(138,143,255,0.14);--line-strong: rgba(138,143,255,0.26);--border: rgba(138,143,255,0.14);--glass-bg: rgba(16,6,159,0.1);--glass-bg-2: rgba(16,6,159,0.18);--glass-border: rgba(138,143,255,0.3);--accent: #10069f;--accent-strong: #8a8fff;--accent-contrast: #ffffff;--accent-soft: rgba(84,92,255,0.16);--accent-glow: rgba(84,92,255,0.5);--grad-accent: linear-gradient(135deg,#10069f 0%,#8a8fff 100%);--grad-radial: radial-gradient(60% 60% at 50% 0%,rgba(84,92,255,0.2),rgba(84,92,255,0) 70%);color-scheme: dark}[data-theme="pantone-indigo"]{--bg: #0b0418;--bg-elev: #120726;--surface: #120726;--surface-2: #180a31;--fg: #ffffff;--text: #ffffff;--fg-muted: #c8bce6;--muted: #c8bce6;--fg-subtle: #8d82b3;--line: rgba(168,143,255,0.14);--line-strong: rgba(168,143,255,0.26);--border: rgba(168,143,255,0.14);--glass-bg: rgba(46,0,139,0.12);--glass-bg-2: rgba(46,0,139,0.2);--glass-border: rgba(168,143,255,0.3);--accent: #2e008b;--accent-strong: #a88fff;--accent-contrast: #ffffff;--accent-soft: rgba(122,84,255,0.16);--accent-glow: rgba(122,84,255,0.5);--grad-accent: linear-gradient(135deg,#2e008b 0%,#a88fff 100%);--grad-radial: radial-gradient(60% 60% at 50% 0%,rgba(122,84,255,0.2),rgba(122,84,255,0) 70%);color-scheme: dark}[data-theme="pantone-violet"]{--bg: #0e041a;--bg-elev: #150627;--surface: #150627;--surface-2: #1c0833;--fg: #ffffff;--text: #ffffff;--fg-muted: #cebce6;--muted: #cebce6;--fg-subtle: #9482b3;--line: rgba(184,133,255,0.14);--line-strong: rgba(184,133,255,0.26);--border: rgba(184,133,255,0.14);--glass-bg: rgba(68,0,153,0.12);--glass-bg-2: rgba(68,0,153,0.2);--glass-border: rgba(184,133,255,0.3);--accent: #440099;--accent-strong: #b885ff;--accent-contrast: #ffffff;--accent-soft: rgba(157,84,255,0.16);--accent-glow: rgba(157,84,255,0.5);--grad-accent: linear-gradient(135deg,#440099 0%,#b885ff 100%);--grad-radial: radial-gradient(60% 60% at 50% 0%,rgba(157,84,255,0.2),rgba(157,84,255,0) 70%);color-scheme: dark}}@layer tokens{/*! CSS-CODEBASE · tokens/render — the RENDER-ENGINE contract. * Tokens for shaders, dynamic lighting, HDR colour, bloom, raster, post-FX, depth, particles, * and materials. The render/ + materials/ layers read ONLY from these, so one edit re-grades * everything. Animatable knobs are registered with @property so they can tween/spin smoothly. * These add to the global contract; the 12 themes are untouched (accent/bg/fg still drive tint). * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ @property --shader-time{syntax: "";inherits: true;initial-value: 0}@property --light-angle{syntax: "";inherits: true;initial-value: 0deg}@property --bloom-intensity{syntax: "";inherits: true;initial-value: 0.6}@property --exposure{syntax: "";inherits: true;initial-value: 1}@property --light-x{syntax: "";inherits: true;initial-value: 50%}@property --light-y{syntax: "";inherits: true;initial-value: 30%}@property --hue-shift{syntax: "";inherits: true;initial-value: 0deg}:root{--light-x: 50%;--light-y: 28%;--light-z: 220px;--light-color: #ffffff;--light-intensity: 1;--light-ambient: 0.18;--light-specular: 0.85;--light-shininess: 22;--light-falloff: 60%;--light-warm: #fff4e0;--light-cool: #dfeaff;--rim-color: var(--accent);--hdr-boost: 1;--exposure: 1;--gamma: 1;--contrast-grade: 1;--saturation-grade: 1;--temperature: 0deg;--tint: 0;--hue-shift: 0deg;--accent-hdr: var(--accent);--glow-hdr: var(--accent-glow);--bloom-threshold: 0.72;--bloom-radius: 16px;--bloom-intensity: 0.6;--bloom-color: var(--accent-glow);--raster-size: 4px;--dither-depth: 5;--chromatic-offset: 2px;--scanline-gap: 3px;--scanline-opacity: 0.18;--crt-curve: 6deg;--glitch-amount: 4px;--posterize-steps: 6;--halftone-size: 5px;--shader-time: 0;--shader-scale: 1;--shader-speed: 1;--noise-freq: 0.8;--shader-color-a: var(--accent);--shader-color-b: var(--accent-strong);--shader-color-c: var(--bg);--perspective: 1000px;--dof-blur: 6px;--fog-color: var(--bg);--fog-density: 0.6;--particle-color: var(--accent);--particle-speed: 1;--particle-size: 2px;--metal-base: #c7ccd4;--metal-sheen: #ffffff;--metal-dark: #5a5f68;--gold-base: #e9c46a;--gold-deep: #b8860b;--chrome-a: #f4f6f8;--chrome-b: #9aa3ad;--iridescence: 1;--surface-roughness: 0.5;--filter-bloom: url(#brn-bloom);--filter-bloom-soft: url(#brn-bloom-soft);--filter-distort: url(#brn-distort);--filter-liquid: url(#brn-liquid);--filter-specular: url(#brn-specular);--filter-emboss: url(#brn-emboss);--filter-chromatic: url(#brn-chromatic);--filter-posterize: url(#brn-posterize);--filter-sharpen: url(#brn-sharpen);--filter-grain: url(#brn-grain);--filter-goo: url(#brn-goo);--filter-duotone: url(#brn-duotone);--filter-thermal: url(#brn-thermal)}}@layer reset{/*! CSS-CODEBASE · base/reset — a modern, opinionated reset. * Box-sizing, margin zero-ing, sane media defaults, form inheritance, smooth scroll. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ *,*::before,*::after{box-sizing: border-box;margin: 0;padding: 0}html{-webkit-text-size-adjust: 100%;text-size-adjust: 100%;scroll-behavior: smooth;tab-size: 4;-moz-text-size-adjust: 100%}html,body{min-height: 100%}body{text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}img,svg,video,canvas,audio,iframe,embed,object{display: block;max-width: 100%}img,video{height: auto}input,button,textarea,select{font: inherit;color: inherit;letter-spacing: inherit}button{cursor: pointer;background: none;border: none}p,li,figcaption{text-wrap: pretty}h1,h2,h3,h4,h5,h6{text-wrap: balance}ul[role="list"],ol[role="list"]{list-style: none}:target{scroll-margin-block: var(--sp-10,5rem)}[hidden]{display: none !important}}@layer base{/*! CSS-CODEBASE · base/elements — themed element defaults. * Everything reads from the token contract so a theme swap re-skins the page with no markup change. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ body{font-family: var(--font-body);font-size: var(--text-base);line-height: var(--lh-normal);color: var(--fg);background: var(--bg);transition: background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}a{color: var(--accent-strong,var(--accent));text-decoration: none;transition: color var(--dur-fast) var(--ease-out)}a:hover{text-decoration: underline}strong,b{font-weight: var(--fw-bold)}small{font-size: var(--text-sm)}mark{background: var(--accent-soft);color: var(--fg);border-radius: 0.2em;padding: 0 0.2em}hr{border: 0;border-top: 1px solid var(--line);margin-block: var(--sp-6)}code,kbd,samp{font-family: var(--font-mono);font-size: 0.92em}code{background: var(--surface-2);border: 1px solid var(--line);border-radius: var(--radius-sm);padding: 0.1em 0.4em}kbd{background: var(--surface-2);border: 1px solid var(--line-strong);border-bottom-width: 2px;border-radius: var(--radius-sm);padding: 0.1em 0.5em}pre{font-family: var(--font-mono);background: var(--surface);border: 1px solid var(--line);border-radius: var(--radius);padding: var(--sp-4);overflow-x: auto;line-height: var(--lh-snug)}pre code{background: none;border: 0;padding: 0}blockquote{border-inline-start: 3px solid var(--accent);padding-inline-start: var(--sp-4);color: var(--fg-muted);font-style: italic}table{border-collapse: collapse;width: 100%}th,td{text-align: start;padding: var(--sp-2) var(--sp-3);border-bottom: 1px solid var(--line)}th{font-weight: var(--fw-semibold);color: var(--fg)}::selection{background: var(--accent-soft);color: var(--fg)}::placeholder{color: var(--fg-subtle);opacity: 1}*{scrollbar-color: var(--line-strong) transparent;scrollbar-width: thin}::-webkit-scrollbar{width: 12px;height: 12px}::-webkit-scrollbar-thumb{background: var(--line-strong);border-radius: var(--radius-pill);border: 3px solid transparent;background-clip: padding-box}::-webkit-scrollbar-thumb:hover{background: var(--accent);background-clip: padding-box}}@layer base{/*! CSS-CODEBASE · base/typography — fluid headings + a `.prose` reading flow. * Display family for headings, fluid scale, readable measure. All clamp()-based for HDR/4K/8K. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ h1,h2,h3,h4{font-family: var(--font-display);line-height: var(--lh-tight);letter-spacing: var(--tracking-display);font-weight: var(--fw-bold);color: var(--fg)}h1{font-size: var(--text-3xl)}h2{font-size: var(--text-2xl)}h3{font-size: var(--text-xl)}h4{font-size: var(--text-lg)}h5{font-size: var(--text-md);font-weight: var(--fw-semibold)}h6{font-size: var(--text-sm);font-weight: var(--fw-semibold);letter-spacing: var(--tracking-wide);text-transform: uppercase;color: var(--fg-muted)}.display{font-family: var(--font-display);font-size: var(--text-4xl);font-weight: var(--fw-black);line-height: var(--lh-tight);letter-spacing: var(--tracking-display)}.display-xl{font-family: var(--font-display);font-size: var(--text-5xl);font-weight: var(--fw-black);line-height: 1.02;letter-spacing: var(--tracking-display)}.lead{font-size: var(--text-lg);line-height: var(--lh-snug);color: var(--fg-muted)}.eyebrow{font-size: var(--text-xs);font-weight: var(--fw-semibold);letter-spacing: var(--tracking-wide);text-transform: uppercase;color: var(--accent-strong,var(--accent))}.prose{max-width: var(--measure);font-size: var(--text-md);line-height: var(--lh-normal);color: var(--fg)}.prose > * + *{margin-block-start: var(--sp-4)}.prose h2,.prose h3{margin-block-start: var(--sp-8)}.prose h2 + *,.prose h3 + *{margin-block-start: var(--sp-3)}.prose ul,.prose ol{padding-inline-start: var(--sp-5)}.prose li + li{margin-block-start: var(--sp-2)}.prose a{text-decoration: underline;text-underline-offset: 0.15em;text-decoration-thickness: 1px}}@layer layout{/*! CSS-CODEBASE · layout/container — page width + container-query contexts. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .container{inline-size: min(100% - (var(--gutter) * 2),var(--container));margin-inline: auto}.container-wide{inline-size: min(100% - (var(--gutter) * 2),var(--container-wide));margin-inline: auto}.container-prose{inline-size: min(100% - (var(--gutter) * 2),var(--container-prose));margin-inline: auto}.container-fluid{inline-size: 100%;padding-inline: var(--gutter)}.full-bleed{inline-size: 100vw;margin-inline: calc(50% - 50vw)}.cq{container-type: inline-size}.cq-named{container: layout / inline-size}.section{padding-block: var(--sp-10)}.section-sm{padding-block: var(--sp-8)}.section-lg{padding-block: var(--sp-12)}}@layer layout{/*! CSS-CODEBASE · layout/grid — intrinsic, content-aware grids (no media queries needed). * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .grid{display: grid;gap: var(--grid-gap,var(--sp-5))}.grid-auto{display: grid;gap: var(--grid-gap,var(--sp-5));grid-template-columns: repeat(auto-fit,minmax(min(var(--grid-min,16rem),100%),1fr))}.grid-auto-sm{--grid-min: 11rem}.grid-auto-lg{--grid-min: 22rem}.grid-2{display: grid;gap: var(--grid-gap,var(--sp-5));grid-template-columns: repeat(2,1fr)}.grid-3{display: grid;gap: var(--grid-gap,var(--sp-5));grid-template-columns: repeat(3,1fr)}.grid-4{display: grid;gap: var(--grid-gap,var(--sp-5));grid-template-columns: repeat(4,1fr)}.grid-shell{display: grid;min-block-size: 100dvh;grid-template: "header header" auto "side main" 1fr "footer footer" auto / var(--sidebar-w) 1fr}.grid-shell > .shell-header{grid-area: header}.grid-shell > .shell-side{grid-area: side}.grid-shell > .shell-main{grid-area: main}.grid-shell > .shell-footer{grid-area: footer}.grid-stack{display: grid}.grid-stack > *{grid-area: 1 / 1}@container (max-width: 38rem){.grid-2,.grid-3,.grid-4,.grid-shell{grid-template-columns: 1fr}.grid-shell{grid-template-areas: "header" "main" "side" "footer";grid-template-rows: auto auto auto auto}}}@layer layout{/*! CSS-CODEBASE · layout/stack — the every-layout primitives: stack, cluster, sidebar, center, switcher. * Composable, intrinsic layout that works without media queries. Gaps read from the spacing scale. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .stack{display: flex;flex-direction: column;gap: var(--stack-gap,var(--sp-4))}.stack-sm{--stack-gap: var(--sp-2)}.stack-lg{--stack-gap: var(--sp-6)}.stack-xl{--stack-gap: var(--sp-8)}.stack > .push-down{margin-block-start: auto}.cluster{display: flex;flex-wrap: wrap;align-items: center;gap: var(--cluster-gap,var(--sp-3))}.cluster-between{justify-content: space-between}.cluster-center{justify-content: center}.cluster-end{justify-content: flex-end}.with-sidebar{display: flex;flex-wrap: wrap;gap: var(--sp-6)}.with-sidebar > .sidebar{flex-basis: var(--sidebar-w);flex-grow: 1}.with-sidebar > .not-sidebar{flex-basis: 0;flex-grow: 999;min-inline-size: var(--sidebar-content-min,50%)}.center{box-sizing: content-box;max-inline-size: var(--measure);margin-inline: auto;padding-inline: var(--sp-4)}.center-intrinsic{display: flex;flex-direction: column;align-items: center}.switcher{display: flex;flex-wrap: wrap;gap: var(--sp-5)}.switcher > *{flex-grow: 1;flex-basis: calc((var(--switch-at,32rem) - 100%) * 999)}.reel{display: flex;gap: var(--sp-4);overflow-x: auto;scroll-snap-type: x mandatory;overscroll-behavior-inline: contain;padding-block-end: var(--sp-2)}.reel > *{scroll-snap-align: start;flex: 0 0 auto}.frame{aspect-ratio: var(--ratio,16 / 9);overflow: hidden;display: grid;place-items: center}.frame > img,.frame > video,.frame > iframe{inline-size: 100%;block-size: 100%;object-fit: cover}}@layer components{/*! CSS-CODEBASE · components/button — accessible, themed buttons. * Variants compose freely with the fx-* layer (e.g. `.btn .btn-primary .fx-sheen .fx-press`). * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .btn{display: inline-flex;align-items: center;justify-content: center;gap: var(--sp-2);padding: var(--sp-2) var(--sp-5);font-family: var(--font-body);font-size: var(--text-base);font-weight: var(--fw-semibold);line-height: 1;min-block-size: 2.75rem;border: 1px solid transparent;border-radius: var(--radius);color: var(--fg);background: var(--surface-2);cursor: pointer;text-decoration: none;white-space: nowrap;transition: background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}.btn:hover{background: var(--surface)}.btn:active{transform: translateY(1px)}.btn[disabled],.btn[aria-disabled="true"]{opacity: 0.5;cursor: not-allowed;pointer-events: none}.btn-primary{background: var(--accent);color: var(--accent-contrast);border-color: transparent}.btn-primary:hover{background: var(--accent-strong);box-shadow: 0 6px 24px var(--accent-glow)}.btn-gradient{background: var(--grad-accent);color: var(--accent-contrast)}.btn-outline{background: transparent;border-color: var(--line-strong);color: var(--fg)}.btn-outline:hover{border-color: var(--accent);color: var(--accent);background: var(--accent-soft)}.btn-ghost{background: transparent;color: var(--fg-muted)}.btn-ghost:hover{background: var(--accent-soft);color: var(--fg)}.btn-glass{background: var(--glass-bg);border-color: var(--glass-border);backdrop-filter: blur(var(--glass-blur-sm));-webkit-backdrop-filter: blur(var(--glass-blur-sm))}.btn-sm{padding: var(--sp-1) var(--sp-3);min-block-size: 2.1rem;font-size: var(--text-sm)}.btn-lg{padding: var(--sp-3) var(--sp-6);min-block-size: 3.25rem;font-size: var(--text-md)}.btn-block{display: flex;inline-size: 100%}.btn-pill{border-radius: var(--radius-pill)}.btn-icon{padding: var(--sp-2);aspect-ratio: 1;min-inline-size: 2.75rem}.btn-group{display: inline-flex;gap: 1px}.btn-group > .btn{border-radius: 0}.btn-group > .btn:first-child{border-start-start-radius: var(--radius);border-end-start-radius: var(--radius)}.btn-group > .btn:last-child{border-start-end-radius: var(--radius);border-end-end-radius: var(--radius)}}@layer components{/*! CSS-CODEBASE · components/card — surfaces for content. Compose with fx-* for polish. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .card{display: flex;flex-direction: column;background: var(--surface);border: 1px solid var(--line);border-radius: var(--radius-lg);overflow: hidden;color: var(--fg)}.card-body{padding: var(--sp-5);display: flex;flex-direction: column;gap: var(--sp-3);flex: 1}.card-title{font-family: var(--font-display);font-size: var(--text-lg);font-weight: var(--fw-bold);line-height: var(--lh-tight)}.card-text{color: var(--fg-muted);font-size: var(--text-base)}.card-media{aspect-ratio: 16 / 9;overflow: hidden;background: var(--surface-2)}.card-media > img,.card-media > video{inline-size: 100%;block-size: 100%;object-fit: cover}.card-footer{padding: var(--sp-4) var(--sp-5);border-block-start: 1px solid var(--line);display: flex;align-items: center;gap: var(--sp-3)}.card-interactive{cursor: pointer;transition: transform var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}.card-interactive:hover,.card-interactive:focus-within{transform: translateY(-4px);border-color: var(--accent);box-shadow: var(--shadow-lg)}.card-glass{background: var(--glass-bg);border-color: var(--glass-border);backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate))}.card-feature{border-block-start: 3px solid var(--accent)}}@layer components{/*! CSS-CODEBASE · components/nav — site header / navigation bar. * Pair with `.fx-sticky` + `.fx-glass` for a condensing frosted header. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .nav{display: flex;align-items: center;gap: var(--sp-5);padding: var(--sp-3) var(--gutter);background: color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));border-block-end: 1px solid var(--line)}.nav-brand{display: inline-flex;align-items: center;gap: var(--sp-2);font-family: var(--font-display);font-weight: var(--fw-bold);font-size: var(--text-lg);color: var(--fg);text-decoration: none;letter-spacing: var(--tracking-tight)}.nav-brand img,.nav-brand svg{block-size: 1.6em;inline-size: auto}.nav-links{display: flex;align-items: center;gap: var(--sp-4);list-style: none;margin: 0;padding: 0}.nav-spacer{margin-inline-start: auto}.nav-link{position: relative;color: var(--fg-muted);font-size: var(--text-base);font-weight: var(--fw-medium);text-decoration: none;padding-block: var(--sp-1);transition: color var(--dur-fast) var(--ease-out)}.nav-link:hover,.nav-link[aria-current="page"]{color: var(--fg)}.nav-link::after{content: "";position: absolute;inset-block-end: -2px;inset-inline: 0;block-size: 2px;background: var(--accent);transform: scaleX(0);transform-origin: 0 50%;transition: transform var(--dur-base) var(--ease-out)}.nav-link:hover::after,.nav-link[aria-current="page"]::after{transform: scaleX(1)}.nav.is-condensed{padding-block: var(--sp-2);box-shadow: var(--shadow-md)}.nav-toggle{display: none}@media (max-width: 48rem){.nav-links{position: absolute;inset-block-start: 100%;inset-inline: 0;flex-direction: column;align-items: stretch;padding: var(--sp-4) var(--gutter);background: var(--surface);border-block-end: 1px solid var(--line)}.nav{position: relative}.nav-toggle{display: inline-flex}}}@layer components{/*! CSS-CODEBASE · components/hero — the headline band. Layer FX behind it via .grid-stack. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .hero{position: relative;isolation: isolate;display: grid;place-items: center;text-align: center;min-block-size: clamp(380px,70vh,820px);padding: var(--sp-12) var(--gutter);overflow: hidden}.hero-content{display: flex;flex-direction: column;align-items: center;gap: var(--sp-5);max-inline-size: 56rem}.hero-title{font-family: var(--font-display);font-size: var(--text-5xl);font-weight: var(--fw-black);line-height: 1.02;letter-spacing: var(--tracking-display)}.hero-lead{font-size: var(--text-lg);line-height: var(--lh-snug);color: var(--fg-muted);max-inline-size: 42rem}.hero-actions{display: flex;flex-wrap: wrap;gap: var(--sp-3);justify-content: center;margin-block-start: var(--sp-2)}.hero-bg{position: absolute;inset: 0;z-index: -2}.hero-bg > img,.hero-bg > video{inline-size: 100%;block-size: 100%;object-fit: cover}.hero-scrim{position: absolute;inset: 0;z-index: -1;background: radial-gradient(60% 60% at 50% 35%,transparent,color-mix(in srgb,var(--bg) 70%,transparent)),linear-gradient(to top,var(--bg),transparent 70%)}.hero-start{place-items: center start;text-align: start}.hero-start .hero-content{align-items: flex-start}.hero-start .hero-actions{justify-content: flex-start}}@layer components{/*! CSS-CODEBASE · components/form — accessible inputs with visible focus and big touch targets. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .field{display: flex;flex-direction: column;gap: var(--sp-2)}.label{font-size: var(--text-sm);font-weight: var(--fw-semibold);color: var(--fg)}.hint{font-size: var(--text-xs);color: var(--fg-subtle)}.input,.textarea,.select{inline-size: 100%;min-block-size: 2.75rem;padding: var(--sp-2) var(--sp-3);font-size: var(--text-base);color: var(--fg);background: var(--surface);border: 1px solid var(--line-strong);border-radius: var(--radius);transition: border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}.textarea{min-block-size: 7rem;resize: vertical;line-height: var(--lh-snug)}.input:hover,.textarea:hover,.select:hover{border-color: var(--accent)}.input:focus-visible,.textarea:focus-visible,.select:focus-visible{outline: none;border-color: var(--accent);box-shadow: 0 0 0 4px var(--accent-soft)}.input[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color: var(--brn-rose);box-shadow: 0 0 0 4px rgba(240,70,108,0.18)}.checkbox,.radio{inline-size: 1.25rem;block-size: 1.25rem;accent-color: var(--accent)}.check-row{display: flex;align-items: center;gap: var(--sp-2);min-block-size: 2.75rem}.input-group{display: flex;align-items: stretch;border: 1px solid var(--line-strong);border-radius: var(--radius);overflow: hidden;background: var(--surface)}.input-group:focus-within{border-color: var(--accent);box-shadow: 0 0 0 4px var(--accent-soft)}.input-group .input{border: 0;box-shadow: none}.input-affix{display: inline-flex;align-items: center;padding-inline: var(--sp-3);color: var(--fg-subtle);background: var(--surface-2)}.error-text{font-size: var(--text-xs);color: var(--brn-rose)}}@layer components{/*! CSS-CODEBASE · components/badge — pills, tags, chips, status dots. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .badge{display: inline-flex;align-items: center;gap: var(--sp-1);padding: 0.25em 0.7em;font-size: var(--text-xs);font-weight: var(--fw-semibold);line-height: 1.4;border-radius: var(--radius-pill);background: var(--surface-2);color: var(--fg-muted);border: 1px solid var(--line)}.badge-accent{background: var(--accent-soft);color: var(--accent-strong,var(--accent));border-color: transparent}.badge-solid{background: var(--accent);color: var(--accent-contrast);border-color: transparent}.badge-outline{background: transparent;border-color: var(--accent);color: var(--accent)}.dot{inline-size: 0.6em;block-size: 0.6em;border-radius: var(--radius-circle);background: var(--fg-subtle);display: inline-block}.dot-live{background: var(--brn-green);box-shadow: 0 0 0 0 var(--brn-green);animation: brn-pulse-ring 2s var(--ease-out) infinite}.chip{display: inline-flex;align-items: center;gap: var(--sp-2);padding: var(--sp-1) var(--sp-3);border-radius: var(--radius-pill);background: var(--surface-2);border: 1px solid var(--line);font-size: var(--text-sm)}.chip > .chip-x{display: inline-flex;cursor: pointer;opacity: 0.6}.chip > .chip-x:hover{opacity: 1}.count{display: inline-grid;place-items: center;min-inline-size: 1.4em;block-size: 1.4em;padding-inline: 0.35em;font-size: var(--text-2xs);font-weight: var(--fw-bold);border-radius: var(--radius-pill);background: var(--accent);color: var(--accent-contrast)}}@layer components{/*! CSS-CODEBASE · components/modal — native styling + frosted backdrop + toasts. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .modal{margin: auto;inline-size: min(92vw,36rem);max-block-size: 86dvh;padding: 0;color: var(--fg);background: var(--surface);border: 1px solid var(--line-strong);border-radius: var(--radius-xl);box-shadow: var(--shadow-lg);overflow: hidden}.modal::backdrop{background: color-mix(in srgb,#000 55%,transparent);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px)}.modal-header,.modal-footer{padding: var(--sp-4) var(--sp-5);display: flex;align-items: center;gap: var(--sp-3)}.modal-header{border-block-end: 1px solid var(--line)}.modal-footer{border-block-start: 1px solid var(--line);justify-content: flex-end}.modal-title{font-family: var(--font-display);font-size: var(--text-lg);font-weight: var(--fw-bold)}.modal-body{padding: var(--sp-5);overflow-y: auto}.modal-close{margin-inline-start: auto;display: inline-grid;place-items: center;inline-size: 2.5rem;block-size: 2.5rem;border-radius: var(--radius);color: var(--fg-muted)}.modal-close:hover{background: var(--accent-soft);color: var(--fg)}.modal[open]{animation: brn-pop var(--dur-base) var(--ease-spring) both}.toast{position: fixed;inset-block-end: var(--sp-5);inset-inline-end: var(--sp-5);z-index: var(--z-toast);display: flex;align-items: center;gap: var(--sp-3);padding: var(--sp-3) var(--sp-5);background: var(--surface);border: 1px solid var(--line-strong);border-radius: var(--radius);box-shadow: var(--shadow-lg);animation: brn-fade-up var(--dur-base) var(--ease-out) both}.toast-accent{border-inline-start: 3px solid var(--accent)}}@layer components{/*! CSS-CODEBASE · components/footer — site footer columns + base bar. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .footer{background: var(--bg-elev);border-block-start: 1px solid var(--line);color: var(--fg-muted)}.footer-grid{display: grid;gap: var(--sp-6);grid-template-columns: repeat(auto-fit,minmax(min(14rem,100%),1fr));padding: var(--sp-10) var(--gutter);max-inline-size: var(--container);margin-inline: auto}.footer-col{display: flex;flex-direction: column;gap: var(--sp-3)}.footer-head{font-size: var(--text-xs);font-weight: var(--fw-semibold);letter-spacing: var(--tracking-wide);text-transform: uppercase;color: var(--fg)}.footer-link{color: var(--fg-muted);font-size: var(--text-sm);text-decoration: none;transition: color var(--dur-fast) var(--ease-out)}.footer-link:hover{color: var(--accent)}.footer-base{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: var(--sp-3);padding: var(--sp-4) var(--gutter);border-block-start: 1px solid var(--line);font-size: var(--text-xs);color: var(--fg-subtle);max-inline-size: var(--container);margin-inline: auto}}@layer components{/*! CSS-CODEBASE · components/devotion — the LOCKED faith dedication block. * The dedication "Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝" is locked across the * whole Boreon suite (mirrors boreon.faith in PY-CODEBASE / Boreon\Brand in PHP-CODEBASE). Never remove it. * Markup pattern: *

✝ Soli Deo Gloria — Ave Maria · in dedication to Pope Leo.

* Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .devotion{display: flex;align-items: center;justify-content: center;gap: var(--sp-2);padding: var(--sp-4) var(--gutter);font-family: var(--font-display);font-size: var(--text-sm);letter-spacing: var(--tracking-tight);color: var(--fg-muted);text-align: center}.devotion-cross{color: var(--accent);font-size: 1.1em}.devotion-bar{border-block-start: 1px solid var(--line);background: var(--bg-elev)}.scripture{font-family: var(--font-display);font-style: italic;font-size: var(--text-lg);line-height: var(--lh-snug);color: var(--fg);text-align: center;max-inline-size: 44rem;margin-inline: auto}.scripture cite{display: block;margin-block-start: var(--sp-2);font-style: normal;font-size: var(--text-sm);color: var(--accent-strong,var(--accent))}}@layer fx{/*! CSS-CODEBASE · fx/glass — glassmorphism: the Boreon "pane of glass". * Layered translucency + backdrop blur + saturation + a hairline border + top sheen. * Gracefully degrades to an opaque surface where backdrop-filter is unsupported or reduced. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .fx-glass{background: var(--glass-bg);border: 1px solid var(--glass-border);border-radius: var(--radius-lg);backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));box-shadow: var(--shadow-md),inset 0 1px 0 rgba(255,255,255,0.12)}.fx-glass-2{background: var(--glass-bg-2)}.fx-glass-sm{--glass-blur: var(--glass-blur-sm)}.fx-glass-lg{--glass-blur: var(--glass-blur-lg)}.fx-glass-sheen{position: relative;isolation: isolate}.fx-glass-sheen::before{content: "";position: absolute;inset: 0;border-radius: inherit;background: var(--grad-radial);opacity: 0.7;pointer-events: none;z-index: -1}.fx-frost{background: color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter: blur(var(--glass-blur)) saturate(1.1);-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1)}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.fx-glass,.fx-glass-2{background: var(--surface)}.fx-frost{background: var(--bg)}}}@layer fx{/*! CSS-CODEBASE · fx/glow — accent glow, neon, and highlight bloom. * All glows are themed (read --accent-glow), so they re-tint with the active theme automatically. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .fx-glow{box-shadow: 0 0 calc(28px * var(--fx-glow-spread) * 2) var(--accent-glow)}.fx-glow-sm{box-shadow: 0 0 calc(14px * var(--fx-glow-spread) * 2) var(--accent-glow)}.fx-glow-lg{box-shadow: 0 0 calc(48px * var(--fx-glow-spread) * 2) var(--accent-glow)}.fx-glow-hover{transition: box-shadow var(--dur-base) var(--ease-out)}.fx-glow-hover:hover,.fx-glow-hover:focus-visible{box-shadow: 0 0 56px var(--accent-glow)}.fx-neon{color: var(--accent);text-shadow: 0 0 4px var(--accent-glow),0 0 12px var(--accent-glow),0 0 28px var(--accent-glow)}.fx-spotlight{position: relative;isolation: isolate}.fx-spotlight::after{content: "";position: absolute;inset: -30%;z-index: -1;background: radial-gradient(closest-side,var(--accent-glow),transparent 70%);filter: blur(20px);pointer-events: none}.fx-bloom{position: relative;isolation: isolate}.fx-bloom::after{content: "";position: absolute;inset: 0;z-index: 2;pointer-events: none;mix-blend-mode: screen;opacity: var(--fx-bloom);background: radial-gradient(60% 50% at 50% 30%,rgba(255,255,255,0.35),transparent 70%)}.fx-cursor-glow{position: relative;isolation: isolate}.fx-cursor-glow::before{content: "";position: absolute;inset: 0;z-index: -1;border-radius: inherit;background: radial-gradient( 240px circle at var(--mx,50%) var(--my,50%),var(--accent-glow),transparent 60% );opacity: 0;transition: opacity var(--dur-base) var(--ease-out)}.fx-cursor-glow:hover::before{opacity: 1}}@layer fx{/*! CSS-CODEBASE · fx/gradient — mesh, conic, animated, and text gradients. * The "rendering" muscle: rich backgrounds and gradient type that stay on-brand via tokens. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .fx-grad-accent{background: var(--grad-accent)}.fx-grad-ink{background: var(--grad-ink)}.fx-grad-radial{background: var(--grad-radial)}.fx-text-gradient{background: var(--grad-accent);-webkit-background-clip: text;background-clip: text;color: transparent;-webkit-text-fill-color: transparent}.fx-mesh{background-color: var(--bg);background-image: radial-gradient(40% 50% at 15% 20%,var(--accent-glow),transparent 60%),radial-gradient(35% 45% at 85% 15%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 60%),radial-gradient(45% 55% at 70% 85%,var(--accent-soft),transparent 65%),radial-gradient(30% 40% at 25% 90%,color-mix(in srgb,var(--accent-strong) 22%,transparent),transparent 60%)}.fx-conic{background: conic-gradient( from var(--angle,200deg) at 50% 50%,var(--accent),var(--accent-strong),color-mix(in srgb,var(--accent) 50%,var(--bg)),var(--accent) )}.fx-gradient-animate{background: linear-gradient( 120deg,var(--accent),var(--accent-strong),color-mix(in srgb,var(--accent) 40%,var(--bg)),var(--accent) );background-size: 300% 300%;animation: brn-grad-drift 12s var(--ease-in-out) infinite}@property --angle{syntax: "";inherits: false;initial-value: 0deg}.fx-conic-spin{animation: brn-angle-spin 8s linear infinite}@keyframes brn-angle-spin{to{--angle: 360deg}}@keyframes brn-grad-drift{0%{background-position: 0% 50%}50%{background-position: 100% 50%}100%{background-position: 0% 50%}}.fx-scrim-b{background-image: linear-gradient(to top,var(--bg) 0%,color-mix(in srgb,var(--bg) 60%,transparent) 35%,transparent 75%)}.fx-scrim-t{background-image: linear-gradient(to bottom,var(--bg) 0%,color-mix(in srgb,var(--bg) 60%,transparent) 35%,transparent 75%)}}@layer fx{/*! CSS-CODEBASE · fx/shadow — elevation, inner shadow, long shadow, layered "real" shadows. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .fx-elev-1{box-shadow: var(--shadow)}.fx-elev-2{box-shadow: var(--shadow-md)}.fx-elev-3{box-shadow: var(--shadow-lg)}.fx-elev-soft{box-shadow: 0 1px 2px rgba(0,0,0,0.16),0 2px 4px rgba(0,0,0,0.16),0 4px 8px rgba(0,0,0,0.16),0 8px 16px rgba(0,0,0,0.16),0 16px 32px rgba(0,0,0,0.16)}.fx-inset{box-shadow: inset 0 2px 6px rgba(0,0,0,0.4)}.fx-ring{box-shadow: 0 0 0 1px var(--line-strong)}.fx-ring-accent{box-shadow: 0 0 0 1px var(--accent)}.fx-lift{transition: transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);will-change: transform}.fx-lift:hover,.fx-lift:focus-within{transform: translateY(-4px);box-shadow: var(--shadow-lg)}.fx-long-shadow{text-shadow: 1px 1px 0 var(--accent-soft),2px 2px 0 var(--accent-soft),4px 4px 0 var(--accent-soft),8px 8px 0 var(--accent-soft),16px 16px 24px rgba(0,0,0,0.35)}.fx-drop{filter: drop-shadow(0 8px 20px rgba(0,0,0,0.45))}.fx-drop-glow{filter: drop-shadow(0 0 14px var(--accent-glow))}}@layer fx{/*! CSS-CODEBASE · fx/filter — color-grading & post-processing via CSS filters and blend modes. * Duotone, vignette, sepia/noir grade, saturation/contrast pop, and hover "develop" reveals. * This is the GRAPHICS-ENHANCEMENT core: treat any /section like a graded film frame. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .fx-grade-noir{filter: grayscale(1) contrast(1.12) brightness(0.95)}.fx-grade-sepia{filter: sepia(0.65) saturate(1.1) contrast(1.05)}.fx-grade-cool{filter: saturate(1.05) hue-rotate(-12deg) brightness(1.02)}.fx-grade-warm{filter: saturate(1.1) hue-rotate(10deg) brightness(1.03)}.fx-grade-pop{filter: saturate(1.35) contrast(1.12)}.fx-grade-faded{filter: saturate(0.78) contrast(0.92) brightness(1.06)}.fx-grade-hdr{filter: contrast(1.18) saturate(1.22) brightness(1.04)}.fx-develop{filter: grayscale(1) contrast(1.05);transition: filter var(--dur-slow) var(--ease-out)}.fx-develop:hover,.fx-develop:focus-within{filter: grayscale(0) contrast(1)}.fx-duotone{position: relative;isolation: isolate;overflow: hidden;background: var(--accent)}.fx-duotone > img{filter: grayscale(1) contrast(1.1);mix-blend-mode: luminosity;inline-size: 100%;block-size: 100%;object-fit: cover}.fx-duotone::after{content: "";position: absolute;inset: 0;z-index: 1;pointer-events: none;mix-blend-mode: color;background: linear-gradient(135deg,var(--accent) 0%,var(--accent-strong) 100%);opacity: 0.85}.fx-vignette{position: relative;isolation: isolate}.fx-vignette::after{content: "";position: absolute;inset: 0;z-index: 2;pointer-events: none;box-shadow: inset 0 0 calc(80px + 8vw) rgba(0,0,0,var(--fx-vignette));border-radius: inherit}.fx-tint{position: relative;isolation: isolate}.fx-tint::after{content: "";position: absolute;inset: 0;pointer-events: none;background: var(--accent);mix-blend-mode: overlay;opacity: var(--fx-tint-strength,0.35);border-radius: inherit}.fx-backdrop-pop{backdrop-filter: saturate(1.4) contrast(1.05);-webkit-backdrop-filter: saturate(1.4) contrast(1.05)}}@layer fx{/*! CSS-CODEBASE · fx/grain — film grain, noise, scanlines, and dithered texture overlays. * Pure CSS (inline SVG turbulence as a data URI) — no image assets, no JS. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .fx-grain{position: relative;isolation: isolate}.fx-grain::after{content: "";position: absolute;inset: 0;z-index: 3;pointer-events: none;opacity: var(--fx-grain-opacity);mix-blend-mode: overlay;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size: 160px 160px}.fx-grain-heavy{--fx-grain-opacity: 0.12}.fx-grain-animate::after{animation: brn-grain-jitter 0.6s steps(4) infinite}@keyframes brn-grain-jitter{0%{transform: translate(0,0)}25%{transform: translate(-3%,2%)}50%{transform: translate(2%,-3%)}75%{transform: translate(-2%,-2%)}100%{transform: translate(0,0)}}.fx-scanlines{position: relative;isolation: isolate}.fx-scanlines::after{content: "";position: absolute;inset: 0;z-index: 3;pointer-events: none;opacity: 0.18;background-image: repeating-linear-gradient( to bottom,rgba(255,255,255,0.06) 0,rgba(255,255,255,0.06) 1px,transparent 1px,transparent 3px )}.fx-halftone{position: relative;isolation: isolate}.fx-halftone::after{content: "";position: absolute;inset: 0;z-index: 3;pointer-events: none;opacity: 0.14;background-image: radial-gradient(circle,var(--fg) 0.8px,transparent 1px);background-size: 5px 5px}}@layer fx{/*! CSS-CODEBASE · fx/3d — perspective, tilt, card-flip, depth, and parallax stacks. * Set --rx/--ry from a JS pointermove handler for live tilt; everything else is pure CSS. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .fx-scene{perspective: 1000px;perspective-origin: center}.fx-tilt{transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style: preserve-3d;transition: transform var(--dur-base) var(--ease-out);will-change: transform}.fx-tilt-hover{transition: transform var(--dur-base) var(--ease-spring);transform-style: preserve-3d}.fx-scene:hover .fx-tilt-hover{transform: rotateX(calc(var(--fx-tilt) * -1)) rotateY(var(--fx-tilt))}.fx-pop-3d{transform: translateZ(var(--fx-parallax-depth))}.fx-flip{position: relative;transform-style: preserve-3d;transition: transform var(--dur-slow) var(--ease-in-out)}.fx-scene:hover .fx-flip,.fx-flip.is-flipped{transform: rotateY(180deg)}.fx-flip > .face{position: absolute;inset: 0;backface-visibility: hidden;-webkit-backface-visibility: hidden}.fx-flip > .face-back{transform: rotateY(180deg)}.fx-parallax{transform-style: preserve-3d}.fx-layer-back{transform: translateZ(-60px) scale(1.06)}.fx-layer-mid{transform: translateZ(-20px) scale(1.02)}.fx-layer-front{transform: translateZ(40px)}.fx-press{transition: transform var(--dur-fast) var(--ease-out)}.fx-press:active{transform: translateY(2px) scale(0.985)}}@layer fx{/*! CSS-CODEBASE · fx/sheen — shimmer sweeps, holographic foil, and skeleton shimmer. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .fx-sheen{position: relative;overflow: hidden;isolation: isolate}.fx-sheen::before{content: "";position: absolute;inset: 0;z-index: 2;pointer-events: none;background: var(--grad-sheen);transform: translateX(-120%);transition: transform var(--dur-slow) var(--ease-out)}.fx-sheen:hover::before,.fx-sheen:focus-visible::before{transform: translateX(120%)}.fx-sheen-sweep::before{content: "";position: absolute;inset: 0;z-index: 2;pointer-events: none;background: var(--grad-sheen);transform: translateX(-120%);animation: brn-sheen 2.4s var(--ease-in-out) infinite}@keyframes brn-sheen{0%{transform: translateX(-120%)}60%,100%{transform: translateX(120%)}}.fx-holo{position: relative;isolation: isolate;background: conic-gradient( from 180deg at 50% 50%,#ff6ec4,#7873f5,#4ade80,#fcd34d,#ff6ec4 );background-size: 200% 200%;background-position: 0% 50%;transition: background-position var(--dur-slow) var(--ease-out)}.fx-holo:hover{background-position: 100% 50%}.fx-skeleton{background: linear-gradient( 100deg,var(--surface) 30%,var(--surface-2) 50%,var(--surface) 70% );background-size: 200% 100%;animation: brn-skeleton 1.4s ease-in-out infinite;border-radius: var(--radius-sm);color: transparent !important;user-select: none}@keyframes brn-skeleton{0%{background-position: 200% 0}100%{background-position: -200% 0}}}@layer fx{/*! CSS-CODEBASE · fx/border — gradient borders, animated conic rings, and glow outlines. * Uses the border-as-mask technique so the FILL stays the theme surface and only the EDGE paints. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .fx-border-gradient{position: relative;border: 1px solid transparent;border-radius: var(--radius-lg);background: linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad-accent) border-box}.fx-ring-gradient{position: relative;border-radius: var(--radius-lg);padding: 1px;background: var(--grad-accent)}.fx-ring-gradient > *{border-radius: calc(var(--radius-lg) - 1px);background: var(--surface);block-size: 100%}.fx-border-conic{position: relative;border-radius: var(--radius-lg);isolation: isolate}.fx-border-conic::before{content: "";position: absolute;inset: 0;z-index: -1;border-radius: inherit;padding: 1.5px;background: conic-gradient( from var(--angle,0deg),transparent 0%,var(--accent) 12%,var(--accent-strong) 22%,transparent 40% );-webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite: xor;mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite: exclude;animation: brn-angle-spin 4s linear infinite}.fx-outline-glow{outline: 2px solid var(--accent);outline-offset: 2px;box-shadow: 0 0 0 4px var(--accent-soft)}.fx-underline-gradient{background-image: var(--grad-accent);background-repeat: no-repeat;background-position: 0 100%;background-size: 0% 2px;transition: background-size var(--dur-base) var(--ease-out)}.fx-underline-gradient:hover,.fx-underline-gradient:focus-visible{background-size: 100% 2px;text-decoration: none}}@layer fx{/*! CSS-CODEBASE · fx/scroll — scroll-driven animations, reveal-on-enter, sticky polish. * Uses native CSS scroll-driven animations (animation-timeline) — no IntersectionObserver, no JS. * Degrades to "always visible" where unsupported; honours reduced-motion via the a11y layer. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ @supports (animation-timeline: view()){.fx-reveal{animation: brn-reveal-up linear both;animation-timeline: view();animation-range: entry 0% entry 60%}.fx-reveal-fade{animation: brn-fade-in linear both;animation-timeline: view();animation-range: entry 0% entry 50%}.fx-reveal-scale{animation: brn-reveal-scale linear both;animation-timeline: view();animation-range: entry 0% entry 65%}.fx-progress-bar{position: fixed;inset-block-start: 0;inset-inline: 0;block-size: 3px;z-index: var(--z-toast);transform-origin: 0 50%;background: var(--grad-accent);animation: brn-progress linear both;animation-timeline: scroll(root block)}.fx-scroll-parallax{animation: brn-parallax-y linear both;animation-timeline: view();animation-range: cover}}@keyframes brn-reveal-up{from{opacity: 0;transform: translateY(28px)}to{opacity: 1;transform: translateY(0)}}@keyframes brn-reveal-scale{from{opacity: 0;transform: scale(0.94)}to{opacity: 1;transform: scale(1)}}@keyframes brn-fade-in{from{opacity: 0}to{opacity: 1}}@keyframes brn-progress{from{transform: scaleX(0)}to{transform: scaleX(1)}}@keyframes brn-parallax-y{from{transform: translateY(-8%)}to{transform: translateY(8%)}}.fx-sticky{position: sticky;inset-block-start: 0;z-index: var(--z-header)}.fx-snap-y{scroll-snap-type: y mandatory;overflow-y: auto}.fx-snap-y > *{scroll-snap-align: start}}@layer fx{/*! CSS-CODEBASE · fx/image — image polish: ratios, smart fit, hover-zoom, blur-up (LQIP), masks. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .fx-img{display: block;inline-size: 100%;block-size: 100%;object-fit: cover;object-position: var(--img-pos,center)}.ratio-square{aspect-ratio: 1}.ratio-video{aspect-ratio: 16 / 9}.ratio-portrait{aspect-ratio: 3 / 4}.ratio-wide{aspect-ratio: 21 / 9}.ratio-golden{aspect-ratio: 1.618}.fx-zoom{overflow: hidden}.fx-zoom > img,.fx-zoom > video{transition: transform var(--dur-slow) var(--ease-out);will-change: transform}.fx-zoom:hover > img,.fx-zoom:focus-within > img,.fx-zoom:hover > video{transform: scale(1.06)}.fx-kenburns > img{animation: brn-kenburns 18s var(--ease-in-out) infinite alternate}@keyframes brn-kenburns{from{transform: scale(1) translate(0,0)}to{transform: scale(1.12) translate(-2%,-2%)}}.fx-blurup{filter: blur(16px);transform: scale(1.04);transition: filter var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}.fx-blurup.is-loaded{filter: blur(0);transform: scale(1)}.fx-photo{border-radius: var(--radius-lg);box-shadow: 0 0 0 1px var(--line),var(--shadow-md);overflow: hidden}.fx-mask-fade{-webkit-mask-image: linear-gradient(to bottom,#000 60%,transparent 100%);mask-image: linear-gradient(to bottom,#000 60%,transparent 100%)}.fx-mask-radial{-webkit-mask-image: radial-gradient(closest-side,#000 70%,transparent 100%);mask-image: radial-gradient(closest-side,#000 70%,transparent 100%)}.fx-reflect{-webkit-box-reflect: below 6px linear-gradient(transparent 60%,rgba(0,0,0,0.28))}}@layer fx{/*! CSS-CODEBASE · fx/hover — hover.css-style micro-interactions for buttons, links, and icons. * Every transform/opacity/filter only (compositor-friendly); reduced-motion is neutralized * globally by the a11y layer, so nothing here needs its own media query. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .fx-hover-grow{display: inline-block;transition: transform var(--dur-base) var(--ease-spring);transform: scale(1)}.fx-hover-grow:hover,.fx-hover-grow:focus-visible{transform: scale(1.08)}.fx-hover-shrink{display: inline-block;transition: transform var(--dur-base) var(--ease-out);transform: scale(1)}.fx-hover-shrink:hover,.fx-hover-shrink:focus-visible{transform: scale(0.92)}.fx-hover-sink{display: inline-block;transition: transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);box-shadow: var(--shadow-md)}.fx-hover-sink:hover,.fx-hover-sink:focus-visible{transform: translateY(1px) scale(0.98);box-shadow: var(--shadow)}.fx-hover-sink:active{transform: translateY(2px) scale(0.96);box-shadow: none}@keyframes brn-hv-pulse-grow{0%,100%{transform: scale(1)}50%{transform: scale(1.06)}}.fx-hover-pulse-grow{display: inline-block;transform: scale(1)}.fx-hover-pulse-grow:hover,.fx-hover-pulse-grow:focus-visible{animation: brn-hv-pulse-grow 900ms var(--ease-in-out) infinite}.fx-hover-float{display: inline-block;transition: transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);box-shadow: var(--shadow)}.fx-hover-float:hover,.fx-hover-float:focus-visible{transform: translateY(-6px);box-shadow: var(--shadow-lg)}@keyframes brn-hv-bounce{0%{transform: scale(1) translateY(0)}30%{transform: scale(1.14) translateY(-10px)}55%{transform: scale(0.96) translateY(2px)}75%{transform: scale(1.04) translateY(-3px)}100%{transform: scale(1) translateY(0)}}.fx-hover-bounce{display: inline-block}.fx-hover-bounce:hover,.fx-hover-bounce:focus-visible{animation: brn-hv-bounce var(--dur-slow) var(--ease-spring) 1}@keyframes brn-hv-buzz{0%,100%{transform: translateX(0) rotate(0)}10%{transform: translateX(-2px) rotate(-1deg)}20%{transform: translateX(2px) rotate(1deg)}30%{transform: translateX(-2px) rotate(0)}40%{transform: translateX(2px) rotate(1deg)}50%{transform: translateX(-1px) rotate(-1deg)}60%{transform: translateX(1px) rotate(0)}70%{transform: translateX(-1px) rotate(1deg)}80%{transform: translateX(1px) rotate(-1deg)}90%{transform: translateX(0) rotate(0)}}.fx-hover-buzz{display: inline-block}.fx-hover-buzz:hover,.fx-hover-buzz:focus-visible{animation: brn-hv-buzz 480ms var(--ease-out) 1}@keyframes brn-hv-wobble{0%,100%{transform: rotate(0)}25%{transform: rotate(-6deg)}50%{transform: rotate(5deg)}75%{transform: rotate(-3deg)}}.fx-hover-wobble{display: inline-block}.fx-hover-wobble:hover,.fx-hover-wobble:focus-visible{animation: brn-hv-wobble 620ms var(--ease-in-out) 1}.fx-hover-skew{display: inline-block;transition: transform var(--dur-base) var(--ease-out);transform: skew(0deg,0deg)}.fx-hover-skew:hover,.fx-hover-skew:focus-visible{transform: skew(-8deg,0deg)}.fx-hover-rotate-icon{display: inline-block;transition: transform var(--dur-slow) var(--ease-spring);transform: rotate(0deg)}.fx-hover-rotate:hover .fx-hover-rotate-icon,.fx-hover-rotate:focus-visible .fx-hover-rotate-icon{transform: rotate(360deg)}.fx-hover-forward{display: inline-flex;align-items: center;gap: var(--sp-2)}.fx-hover-forward-icon{display: inline-block;transition: transform var(--dur-base) var(--ease-out);transform: translateX(0)}.fx-hover-forward:hover .fx-hover-forward-icon,.fx-hover-forward:focus-visible .fx-hover-forward-icon{transform: translateX(6px)}.fx-hover-backward{display: inline-flex;align-items: center;gap: var(--sp-2)}.fx-hover-backward-icon{display: inline-block;transition: transform var(--dur-base) var(--ease-out);transform: translateX(0)}.fx-hover-backward:hover .fx-hover-backward-icon,.fx-hover-backward:focus-visible .fx-hover-backward-icon{transform: translateX(-6px)}@keyframes brn-hv-nudge{0%,100%{transform: translateX(0)}50%{transform: translateX(5px)}}.fx-hover-nudge{display: inline-flex;align-items: center;gap: var(--sp-2)}.fx-hover-nudge-icon{display: inline-block}.fx-hover-nudge:hover .fx-hover-nudge-icon,.fx-hover-nudge:focus-visible .fx-hover-nudge-icon{animation: brn-hv-nudge 720ms var(--ease-in-out) infinite}.fx-hover-underline-from-left{position: relative;text-decoration: none;padding-block-end: 0.2em}.fx-hover-underline-from-left::after{content: "";position: absolute;inset-block-end: 0;inset-inline-start: 0;inline-size: 100%;block-size: 2px;background: var(--grad-accent);transform: scaleX(0);transform-origin: left;transition: transform var(--dur-base) var(--ease-out)}.fx-hover-underline-from-left:hover::after,.fx-hover-underline-from-left:focus-visible::after{transform: scaleX(1)}.fx-hover-underline-from-center{position: relative;text-decoration: none;padding-block-end: 0.2em}.fx-hover-underline-from-center::after{content: "";position: absolute;inset-block-end: 0;inset-inline-start: 0;inline-size: 100%;block-size: 2px;background: var(--grad-accent);transform: scaleX(0);transform-origin: center;transition: transform var(--dur-base) var(--ease-out)}.fx-hover-underline-from-center:hover::after,.fx-hover-underline-from-center:focus-visible::after{transform: scaleX(1)}.fx-hover-underline-out{position: relative;text-decoration: none;padding-block-end: 0.2em}.fx-hover-underline-out::after{content: "";position: absolute;inset-block-end: 0;inset-inline-start: 0;inline-size: 100%;block-size: 2px;background: var(--grad-accent);transform: scaleX(1);transform-origin: right;transition: transform var(--dur-fast) var(--ease-out)}.fx-hover-underline-out:hover::after,.fx-hover-underline-out:focus-visible::after{transform-origin: left;transform: scaleX(0);transition-duration: 0s;animation: brn-hv-underline-out-in var(--dur-base) var(--ease-out) var(--dur-fast) forwards}@keyframes brn-hv-underline-out-in{from{transform: scaleX(0);transform-origin: left}to{transform: scaleX(1);transform-origin: left}}.fx-hover-ripple-out{position: relative;overflow: hidden;isolation: isolate}.fx-hover-ripple-out::after{content: "";position: absolute;inset-block-start: var(--my,50%);inset-inline-start: var(--mx,50%);inline-size: 12px;block-size: 12px;margin-inline-start: -6px;margin-block-start: -6px;border-radius: var(--radius-circle);background: var(--accent-glow);opacity: 0;transform: scale(0);pointer-events: none}.fx-hover-ripple-out:active::after{animation: brn-hv-ripple 620ms var(--ease-out) 1}@keyframes brn-hv-ripple{0%{opacity: 0.9;transform: scale(0)}70%{opacity: 0.25}100%{opacity: 0;transform: scale(22)}}/*! Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ }@layer fx{/*! CSS-CODEBASE · fx/reveal-card — hover-triggered reveal mechanics for cards and image tiles. * NOT scroll-driven (see render/_scroll.css for fx-reveal/-fade/-scale on view()/scroll() timelines). * Shared shape: a `.reveal-*` wrapper (overflow:hidden, isolation:isolate) contains a base layer * (`.reveal-*-base`, usually the image) and a reveal layer (`.reveal-*-panel`, the caption/CTA) * that animates in via transform/clip-path/opacity on :hover/:focus-within. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .reveal-flip{position: relative;overflow: visible;isolation: isolate;perspective: 1400px;border-radius: var(--radius-lg)}.reveal-flip-inner{position: relative;inline-size: 100%;block-size: 100%;transition: transform var(--dur-slow) var(--ease-spring);transform-style: preserve-3d}.reveal-flip:hover .reveal-flip-inner,.reveal-flip:focus-within .reveal-flip-inner{transform: rotateY(180deg)}.reveal-flip-front,.reveal-flip-back{position: absolute;inset: 0;backface-visibility: hidden;border-radius: inherit;overflow: hidden}.reveal-flip-back{transform: rotateY(180deg);background: var(--surface-2)}.reveal-push{position: relative;overflow: hidden;isolation: isolate;border-radius: var(--radius-lg)}.reveal-push-base{display: block;inline-size: 100%;block-size: 100%;object-fit: cover;transition: transform var(--dur-slow) var(--ease-out),filter var(--dur-slow) var(--ease-out)}.reveal-push-panel{position: absolute;inset-inline: 0;inset-block-end: 0;block-size: 100%;background: var(--surface);transform: translateY(100%);transition: transform var(--dur-slow) var(--ease-spring);padding: var(--sp-5)}.reveal-push:hover .reveal-push-base,.reveal-push:focus-within .reveal-push-base{transform: translateY(-16%) scale(1.04);filter: brightness(0.7)}.reveal-push:hover .reveal-push-panel,.reveal-push:focus-within .reveal-push-panel{transform: translateY(38%)}.reveal-curtain{position: relative;overflow: hidden;isolation: isolate;border-radius: var(--radius-lg)}.reveal-curtain-reveal{position: absolute;inset: 0;background: var(--surface-2)}.reveal-curtain-panel{position: absolute;inset-block: 0;inline-size: 50%;background: var(--surface);transition: transform var(--dur-slow) var(--ease-snap);z-index: 2}.reveal-curtain-panel-l{inset-inline-start: 0;transform: translateX(0)}.reveal-curtain-panel-r{inset-inline-end: 0;transform: translateX(0)}.reveal-curtain:hover .reveal-curtain-panel-l,.reveal-curtain:focus-within .reveal-curtain-panel-l{transform: translateX(-100%)}.reveal-curtain:hover .reveal-curtain-panel-r,.reveal-curtain:focus-within .reveal-curtain-panel-r{transform: translateX(100%)}.reveal-iris{position: relative;overflow: hidden;isolation: isolate;border-radius: var(--radius-lg)}.reveal-iris-base{display: block;inline-size: 100%;block-size: 100%;object-fit: cover}.reveal-iris-panel{position: absolute;inset: 0;background: var(--surface);display: flex;align-items: center;justify-content: center;padding: var(--sp-5);clip-path: circle(0% at 50% 50%);transition: clip-path var(--dur-slow) var(--ease-out)}.reveal-iris:hover .reveal-iris-panel,.reveal-iris:focus-within .reveal-iris-panel{clip-path: circle(75% at 50% 50%)}.reveal-slide-up{position: relative;overflow: hidden;isolation: isolate;border-radius: var(--radius-lg)}.reveal-slide-up-base{display: block;inline-size: 100%;block-size: 100%;object-fit: cover}.reveal-slide-up-panel{position: absolute;inset-inline: 0;inset-block-end: 0;transform: translateY(100%);background: linear-gradient(to top,var(--surface) 55%,transparent 100%);padding: var(--sp-6) var(--sp-5) var(--sp-5);transition: transform var(--dur-base) var(--ease-out)}.reveal-slide-up:hover .reveal-slide-up-panel,.reveal-slide-up:focus-within .reveal-slide-up-panel{transform: translateY(0)}.reveal-zoom-tilt{position: relative;overflow: hidden;isolation: isolate;perspective: 900px;border-radius: var(--radius-lg)}.reveal-zoom-tilt-base{display: block;inline-size: 100%;block-size: 100%;object-fit: cover;transition: transform var(--dur-slow) var(--ease-out);transform: scale(1) rotateX(0deg)}.reveal-zoom-tilt-panel{position: absolute;inset-inline: 0;inset-block-end: 0;opacity: 0;transform: translateY(10px);background: linear-gradient(to top,rgba(0,0,0,0.6),transparent);padding: var(--sp-5);transition: opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}.reveal-zoom-tilt:hover .reveal-zoom-tilt-base,.reveal-zoom-tilt:focus-within .reveal-zoom-tilt-base{transform: scale(1.1) rotateX(4deg)}.reveal-zoom-tilt:hover .reveal-zoom-tilt-panel,.reveal-zoom-tilt:focus-within .reveal-zoom-tilt-panel{opacity: 1;transform: translateY(0)}.reveal-cross-fade{position: relative;overflow: hidden;isolation: isolate;border-radius: var(--radius-lg)}.reveal-cross-fade-base,.reveal-cross-fade-alt{display: block;position: absolute;inset: 0;inline-size: 100%;block-size: 100%;object-fit: cover;transition: opacity var(--dur-slow) var(--ease-in-out)}.reveal-cross-fade-base{position: relative;opacity: 1}.reveal-cross-fade-alt{opacity: 0}.reveal-cross-fade:hover .reveal-cross-fade-base,.reveal-cross-fade:focus-within .reveal-cross-fade-base{opacity: 0}.reveal-cross-fade:hover .reveal-cross-fade-alt,.reveal-cross-fade:focus-within .reveal-cross-fade-alt{opacity: 1}.reveal-overlay{position: relative;overflow: hidden;isolation: isolate;border-radius: var(--radius-lg)}.reveal-overlay-base{display: block;inline-size: 100%;block-size: 100%;object-fit: cover}.reveal-overlay-panel{position: absolute;inset: 0;display: flex;align-items: center;justify-content: center;text-align: center;padding: var(--sp-5);background: linear-gradient(rgba(0,0,0,0.15),var(--accent-soft));opacity: 0;backdrop-filter: blur(2px);transition: opacity var(--dur-base) var(--ease-out)}.reveal-overlay:hover .reveal-overlay-panel,.reveal-overlay:focus-within .reveal-overlay-panel{opacity: 1}.reveal-split{position: relative;overflow: hidden;isolation: isolate;border-radius: var(--radius-lg)}.reveal-split-half{position: absolute;inset-block: 0;inline-size: 50%;background-size: 200% 100%;background-repeat: no-repeat;transition: transform var(--dur-slow) var(--ease-snap);z-index: 2}.reveal-split-half-l{inset-inline-start: 0;background-position: left center}.reveal-split-half-r{inset-inline-end: 0;background-position: right center}.reveal-split-panel{position: absolute;inset: 0;display: flex;align-items: center;justify-content: center;background: var(--surface-2);padding: var(--sp-5)}.reveal-split:hover .reveal-split-half-l,.reveal-split:focus-within .reveal-split-half-l{transform: translateX(-100%)}.reveal-split:hover .reveal-split-half-r,.reveal-split:focus-within .reveal-split-half-r{transform: translateX(100%)}/*! Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ }@layer fx{/*! CSS-CODEBASE · fx/text — typographic performance: per-letter/word stagger, glitch, typewriter, * animated gradient fill, extrusion, stroke, sweeps, and duotone/rainbow color play. * Distinct from fx/gradient's .fx-text-gradient (static clip) and fx/render's raster .fx-glitch * (whole-element pixel glitch) — everything here is text-shape-aware (spans, clip-path bands, ink). * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .fx-text-letters{display: inline-block}.fx-text-letters span{display: inline-block;transition: transform var(--dur-base) var(--ease-spring),color var(--dur-base) var(--ease-out)}.fx-text-letters:hover span,.fx-text-letters:focus-visible span{color: var(--accent-strong);transform: translateY(-0.2em)}.fx-text-letters span:nth-child(1){transition-delay: 0ms}.fx-text-letters span:nth-child(2){transition-delay: 24ms}.fx-text-letters span:nth-child(3){transition-delay: 48ms}.fx-text-letters span:nth-child(4){transition-delay: 72ms}.fx-text-letters span:nth-child(5){transition-delay: 96ms}.fx-text-letters span:nth-child(6){transition-delay: 120ms}.fx-text-letters span:nth-child(7){transition-delay: 144ms}.fx-text-letters span:nth-child(8){transition-delay: 168ms}.fx-text-letters span:nth-child(9){transition-delay: 192ms}.fx-text-letters span:nth-child(10){transition-delay: 216ms}.fx-text-letters span:nth-child(11){transition-delay: 240ms}.fx-text-letters span:nth-child(12){transition-delay: 264ms}.fx-text-letters span:nth-child(13){transition-delay: 288ms}.fx-text-letters span:nth-child(14){transition-delay: 312ms}.fx-text-letters span:nth-child(15){transition-delay: 336ms}.fx-text-letters span:nth-child(16){transition-delay: 360ms}.fx-text-glitch{position: relative;display: inline-block;isolation: isolate}.fx-text-glitch::before,.fx-text-glitch::after{content: attr(data-text);position: absolute;inset: 0;pointer-events: none}.fx-text-glitch::before{color: var(--accent-strong);clip-path: inset(0 0 60% 0);transform: translate3d(-2px,0,0);animation: brn-text-glitch-a 2.6s steps(1,end) infinite}.fx-text-glitch::after{color: var(--accent-glow);clip-path: inset(60% 0 0 0);transform: translate3d(2px,0,0);animation: brn-text-glitch-b 2.6s steps(1,end) infinite}@keyframes brn-text-glitch-a{0%,82%{clip-path: inset(0 0 60% 0);transform: translate3d(0,0,0)}84%{clip-path: inset(10% 0 40% 0);transform: translate3d(-3px,0,0)}86%{clip-path: inset(70% 0 5% 0);transform: translate3d(3px,0,0)}88%{clip-path: inset(30% 0 55% 0);transform: translate3d(-2px,0,0)}90%,100%{clip-path: inset(0 0 60% 0);transform: translate3d(0,0,0)}}@keyframes brn-text-glitch-b{0%,82%{clip-path: inset(60% 0 0 0);transform: translate3d(0,0,0)}84%{clip-path: inset(40% 0 15% 0);transform: translate3d(3px,0,0)}86%{clip-path: inset(5% 0 65% 0);transform: translate3d(-3px,0,0)}88%{clip-path: inset(55% 0 20% 0);transform: translate3d(2px,0,0)}90%,100%{clip-path: inset(60% 0 0 0);transform: translate3d(0,0,0)}}.fx-text-typewriter{display: inline-block;overflow: hidden;white-space: nowrap;border-inline-end: 2px solid var(--accent);animation: brn-text-typewriter var(--dur-xslow) steps(32,end) 1 both,brn-blink 900ms step-end infinite}@keyframes brn-text-typewriter{from{inline-size: 0}to{inline-size: 100%}}.fx-text-gradient-wave{background-image: linear-gradient( 100deg,var(--accent) 0%,var(--accent-strong) 25%,color-mix(in srgb,var(--accent) 40%,var(--bg)) 50%,var(--accent-strong) 75%,var(--accent) 100% );background-size: 260% 100%;-webkit-background-clip: text;background-clip: text;color: transparent;-webkit-text-fill-color: transparent;animation: brn-text-wave-drift 6s linear infinite}@keyframes brn-text-wave-drift{0%{background-position: 0% 50%}100%{background-position: 200% 50%}}.fx-text-extrude{color: var(--accent);text-shadow: 1px 1px 0 var(--accent-strong),2px 2px 0 var(--accent-strong),3px 3px 0 var(--accent-strong),4px 4px 0 color-mix(in srgb,var(--accent-strong) 70%,var(--bg)),5px 5px 0 color-mix(in srgb,var(--accent-strong) 55%,var(--bg)),6px 6px 8px color-mix(in srgb,var(--bg) 60%,transparent)}.fx-text-extrude-deep{color: var(--accent);text-shadow: 1px 1px 0 var(--accent-strong),2px 2px 0 var(--accent-strong),3px 3px 0 var(--accent-strong),4px 4px 0 var(--accent-strong),5px 5px 0 var(--accent-strong),6px 6px 0 var(--accent-strong),7px 7px 0 var(--accent-strong),8px 8px 0 color-mix(in srgb,var(--accent-strong) 60%,var(--bg)),10px 10px 14px color-mix(in srgb,var(--bg) 65%,transparent)}.fx-text-stroke{color: transparent;-webkit-text-stroke: 1.5px var(--accent);text-shadow: -1px 0 var(--accent),1px 0 var(--accent),0 -1px var(--accent),0 1px var(--accent)}@supports (-webkit-text-stroke: 1px black){.fx-text-stroke{text-shadow: none}}.fx-text-stroke-thick{color: transparent;-webkit-text-stroke: 3px var(--accent-strong);text-shadow: -2px 0 var(--accent-strong),2px 0 var(--accent-strong),0 -2px var(--accent-strong),0 2px var(--accent-strong)}@supports (-webkit-text-stroke: 1px black){.fx-text-stroke-thick{text-shadow: none}}.fx-text-highlight-sweep{background-image: linear-gradient(90deg,var(--accent-soft) 0%,var(--accent-soft) 100%);background-repeat: no-repeat;background-size: 0% 100%;background-position: 0 0;padding-inline: 0.15em;border-radius: var(--radius-sm);transition: background-size var(--dur-slow) var(--ease-out)}.fx-text-highlight-sweep:hover,.fx-text-highlight-sweep:focus-visible,.fx-text-highlight-sweep.is-active{background-size: 100% 100%}.fx-text-strike-draw{position: relative;display: inline-block}.fx-text-strike-draw::after{content: "";position: absolute;inset-inline-start: 0;inset-block-start: 50%;inline-size: 0%;block-size: 2px;background: var(--accent-strong);transform: translateY(-50%);transition: inline-size var(--dur-slow) var(--ease-snap)}.fx-text-strike-draw:hover::after,.fx-text-strike-draw:focus-visible::after,.fx-text-strike-draw.is-active::after{inline-size: 100%}.fx-text-shimmer-sweep{background-image: linear-gradient( 100deg,var(--fg) 30%,var(--accent-strong) 45%,var(--fg) 60% );background-size: 220% 100%;background-position: 0% 0%;-webkit-background-clip: text;background-clip: text;color: transparent;-webkit-text-fill-color: transparent;animation: brn-text-shimmer-pass 3.2s var(--ease-in-out) infinite}@keyframes brn-text-shimmer-pass{0%{background-position: 150% 0%}100%{background-position: -150% 0%}}.fx-text-duotone{background-image: linear-gradient( to bottom,var(--accent) 0%,var(--accent) 50%,var(--accent-strong) 50%,var(--accent-strong) 100% );-webkit-background-clip: text;background-clip: text;color: transparent;-webkit-text-fill-color: transparent}.fx-text-rainbow{color: var(--accent-strong);animation: brn-text-hue-cycle 6s linear infinite}@keyframes brn-text-hue-cycle{0%{filter: hue-rotate(0deg) saturate(1.4)}100%{filter: hue-rotate(360deg) saturate(1.4)}}.fx-text-kinetic-words span{display: inline-block;animation: brn-text-word-bounce var(--dur-slow) var(--ease-spring) both;animation-fill-mode: both}.fx-text-kinetic-words span:nth-child(1){animation-delay: 0ms}.fx-text-kinetic-words span:nth-child(2){animation-delay: 80ms}.fx-text-kinetic-words span:nth-child(3){animation-delay: 160ms}.fx-text-kinetic-words span:nth-child(4){animation-delay: 240ms}.fx-text-kinetic-words span:nth-child(5){animation-delay: 320ms}.fx-text-kinetic-words span:nth-child(6){animation-delay: 400ms}.fx-text-kinetic-words span:nth-child(7){animation-delay: 480ms}.fx-text-kinetic-words span:nth-child(8){animation-delay: 560ms}@keyframes brn-text-word-bounce{0%{opacity: 0;transform: translateY(0.6em) scale(0.85)}60%{opacity: 1;transform: translateY(-0.08em) scale(1.02)}100%{opacity: 1;transform: translateY(0) scale(1)}}/*! Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ }@layer fx{/*! CSS-CODEBASE · fx/outline-fx — animated borders and sci-fi HUD decoration: * marching ants, laser-scan perimeter sweep, targeting-reticle corner brackets, * panel scan-line pass, corner flag tags, self-drawing borders, and focus reticles. * Distinct from fx/border's .fx-border-gradient/.fx-ring-gradient/.fx-border-conic — * those are static/orbiting-point rings; everything here is HUD/viewfinder styled. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .fx-border-ants{border-style: solid;border-color: transparent;background-image: repeating-linear-gradient(90deg,var(--accent) 0 10px,transparent 10px 20px) top left / 20px 1px repeat-x,repeating-linear-gradient(90deg,var(--accent) 0 10px,transparent 10px 20px) bottom left / 20px 1px repeat-x,repeating-linear-gradient(0deg,var(--accent) 0 10px,transparent 10px 20px) top left / 1px 20px repeat-y,repeating-linear-gradient(0deg,var(--accent) 0 10px,transparent 10px 20px) top right / 1px 20px repeat-y;background-origin: border-box;animation: brn-ants-scroll 900ms linear infinite}.fx-border-ants-slow{border-style: solid;border-color: transparent;background-image: repeating-linear-gradient(90deg,var(--accent-strong) 0 10px,transparent 10px 20px) top left / 20px 1px repeat-x,repeating-linear-gradient(90deg,var(--accent-strong) 0 10px,transparent 10px 20px) bottom left / 20px 1px repeat-x,repeating-linear-gradient(0deg,var(--accent-strong) 0 10px,transparent 10px 20px) top left / 1px 20px repeat-y,repeating-linear-gradient(0deg,var(--accent-strong) 0 10px,transparent 10px 20px) top right / 1px 20px repeat-y;background-origin: border-box;animation: brn-ants-scroll 2.4s linear infinite}@keyframes brn-ants-scroll{to{background-position: 20px 0,-20px 1px,0 -20px,-1px 20px}}.fx-border-laser{position: relative;border-radius: var(--radius-lg);isolation: isolate}.fx-border-laser::before{content: "";position: absolute;inset: 0;z-index: -1;border-radius: inherit;padding: 2px;background: conic-gradient( from var(--angle,0deg),transparent 0%,transparent 92%,var(--accent-strong) 96%,var(--fg) 98%,var(--accent-strong) 99.5%,transparent 100% );-webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite: xor;mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite: exclude;animation: brn-angle-spin 2.8s linear infinite}.fx-hud-corners{position: relative}.fx-hud-corners::before,.fx-hud-corners::after{content: "";position: absolute;inline-size: 1.25em;block-size: 1.25em;pointer-events: none}.fx-hud-corners::before{inset-inline-start: -0.35em;inset-block-start: -0.35em;border-inline-start: 2px solid var(--accent);border-block-start: 2px solid var(--accent)}.fx-hud-corners::after{inset-inline-end: -0.35em;inset-block-end: -0.35em;border-inline-end: 2px solid var(--accent);border-block-end: 2px solid var(--accent)}.fx-hud-corners-all{position: relative}.fx-hud-corners-all::before{content: "";position: absolute;inset-inline-start: -0.35em;inset-block-start: -0.35em;inline-size: 1.25em;block-size: 1.25em;border-inline-start: 2px solid var(--accent);border-block-start: 2px solid var(--accent);pointer-events: none}.fx-hud-corners-all::after{content: "";position: absolute;inset-inline-end: -0.35em;inset-block-end: -0.35em;inline-size: 1.25em;block-size: 1.25em;border-inline-end: 2px solid var(--accent);border-block-end: 2px solid var(--accent);pointer-events: none}.fx-hud-corners-all > span{position: absolute;inset: 0;pointer-events: none}.fx-hud-corners-all > span::before{content: "";position: absolute;inset-inline-end: -0.35em;inset-block-start: -0.35em;inline-size: 1.25em;block-size: 1.25em;border-inline-end: 2px solid var(--accent);border-block-start: 2px solid var(--accent)}.fx-hud-corners-all > span::after{content: "";position: absolute;inset-inline-start: -0.35em;inset-block-end: -0.35em;inline-size: 1.25em;block-size: 1.25em;border-inline-start: 2px solid var(--accent);border-block-end: 2px solid var(--accent)}.fx-scan-sweep{position: relative;overflow: hidden;isolation: isolate;border: 1px solid var(--accent-soft);border-radius: var(--radius)}.fx-scan-sweep::before{content: "";position: absolute;inset-inline: 0;inset-block-start: -20%;block-size: 20%;z-index: 2;pointer-events: none;background: linear-gradient( to bottom,transparent 0%,var(--accent-glow) 45%,var(--accent) 50%,var(--accent-glow) 55%,transparent 100% );opacity: 0;transition: opacity var(--dur-fast) var(--ease-out)}.fx-scan-sweep:hover::before,.fx-scan-sweep:focus-visible::before{opacity: 1;animation: brn-scan-pass var(--dur-xslow) var(--ease-in-out) 1}@keyframes brn-scan-pass{0%{inset-block-start: -20%}100%{inset-block-start: 100%}}.fx-corner-flag{position: absolute;inset-block-start: 0;inset-inline-end: 0;inline-size: 3.2em;block-size: 3.2em;background: var(--grad-accent);clip-path: polygon(100% 0,100% 100%,0 0);pointer-events: none}.fx-corner-flag-start{position: absolute;inset-block-start: 0;inset-inline-start: 0;inline-size: 3.2em;block-size: 3.2em;background: var(--grad-accent);clip-path: polygon(0 0,100% 0,0 100%);pointer-events: none}.fx-border-draw-in{position: relative;border-radius: var(--radius-lg);isolation: isolate}.fx-border-draw-in::before{content: "";position: absolute;inset: 0;z-index: -1;border-radius: inherit;padding: 1.5px;background: var(--grad-accent);-webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite: xor;mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite: exclude;clip-path: inset(0 100% 0 0);transition: clip-path var(--dur-slow) var(--ease-snap)}.fx-border-draw-in:hover::before,.fx-border-draw-in:focus-visible::before,.fx-border-draw-in.is-active::before{clip-path: inset(0 0 0 0)}.fx-reticle-double{position: relative}.fx-reticle-double::before,.fx-reticle-double::after{content: "";position: absolute;inset: -0.4em;border-radius: var(--radius-circle);border: 1px solid var(--accent-soft);pointer-events: none}.fx-reticle-double::after{inset: -0.9em;border-color: color-mix(in srgb,var(--accent-soft) 60%,transparent)}.fx-reticle-double:hover::before,.fx-reticle-double:focus-visible::before{border-color: var(--accent)}.fx-reticle-double:hover::after,.fx-reticle-double:focus-visible::after{border-color: var(--accent-strong)}.fx-bracket-focus{position: relative}.fx-bracket-focus::before,.fx-bracket-focus::after{content: "";position: absolute;inline-size: 1em;block-size: 1em;pointer-events: none;transition: inset var(--dur-base) var(--ease-snap)}.fx-bracket-focus::before{inset-inline-start: -0.9em;inset-block-start: -0.9em;border-inline-start: 2px solid var(--accent);border-block-start: 2px solid var(--accent)}.fx-bracket-focus::after{inset-inline-end: -0.9em;inset-block-end: -0.9em;border-inline-end: 2px solid var(--accent);border-block-end: 2px solid var(--accent)}.fx-bracket-focus:hover::before,.fx-bracket-focus:focus-visible::before{inset-inline-start: -0.3em;inset-block-start: -0.3em;border-color: var(--accent-strong)}.fx-bracket-focus:hover::after,.fx-bracket-focus:focus-visible::after{inset-inline-end: -0.3em;inset-block-end: -0.3em;border-color: var(--accent-strong)}/*! Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ }@layer fx{/*! CSS-CODEBASE · fx/neumorph — soft-UI / neumorphic surfaces built from the theme's own --surface. * Neumorphism reads as extruded/pressed plastic via a light+dark box-shadow pair straddling a surface * close in luminance to its background. Since this system is dark-mode-first, the pair is DERIVED per * theme with color-mix() (lighten/darken --surface) rather than hard-coded — it self-tints on every theme. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .neu-raised,.neu-pressed,.neu-inset,.neu-flat,.neu-convex,.neu-concave,.neu-btn,.neu-input,.neu-card,.neu-toggle,.neu-switch,.neu-icon-btn{--neu-light: color-mix(in srgb,var(--surface) 88%,white 12%);--neu-dark: color-mix(in srgb,var(--surface) 80%,black 20%);--neu-distance: 0.5rem;--neu-blur: 1rem;background: var(--surface);border-radius: var(--radius-lg);border: 0;transition: box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}.neu-raised{box-shadow: var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-dark),calc(var(--neu-distance) * -1) calc(var(--neu-distance) * -1) var(--neu-blur) var(--neu-light)}.neu-pressed,.neu-inset{box-shadow: inset var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-dark),inset calc(var(--neu-distance) * -1) calc(var(--neu-distance) * -1) var(--neu-blur) var(--neu-light)}.neu-flat{--neu-distance: 0.2rem;--neu-blur: 0.6rem;box-shadow: var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-dark),calc(var(--neu-distance) * -1) calc(var(--neu-distance) * -1) var(--neu-blur) var(--neu-light)}.neu-convex{position: relative;background: radial-gradient(circle at 32% 28%,var(--neu-light),var(--surface) 60%,var(--neu-dark) 130%);box-shadow: var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-dark),calc(var(--neu-distance) * -1) calc(var(--neu-distance) * -1) var(--neu-blur) var(--neu-light)}.neu-concave{position: relative;background: radial-gradient(circle at 32% 28%,var(--neu-dark),var(--surface) 60%,var(--neu-light) 130%);box-shadow: inset var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-dark),inset calc(var(--neu-distance) * -1) calc(var(--neu-distance) * -1) var(--neu-blur) var(--neu-light)}.neu-btn{display: inline-flex;align-items: center;justify-content: center;gap: 0.5em;padding: 0.75em 1.5em;color: var(--fg,var(--accent));font: inherit;font-weight: 600;cursor: pointer;user-select: none;box-shadow: var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-dark),calc(var(--neu-distance) * -1) calc(var(--neu-distance) * -1) var(--neu-blur) var(--neu-light)}.neu-btn:hover{color: var(--accent)}.neu-btn:active{box-shadow: inset var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-dark),inset calc(var(--neu-distance) * -1) calc(var(--neu-distance) * -1) var(--neu-blur) var(--neu-light);transform: scale(0.98)}.neu-input{padding: 0.75em 1em;color: var(--fg,var(--accent));font: inherit;box-shadow: inset var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-dark),inset calc(var(--neu-distance) * -1) calc(var(--neu-distance) * -1) var(--neu-blur) var(--neu-light)}.neu-input:focus-visible{box-shadow: inset var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-dark),inset calc(var(--neu-distance) * -1) calc(var(--neu-distance) * -1) var(--neu-blur) var(--neu-light),0 0 0 2px var(--accent-soft)}.neu-card{padding: 1.75rem;box-shadow: var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-dark),calc(var(--neu-distance) * -1) calc(var(--neu-distance) * -1) var(--neu-blur) var(--neu-light)}.neu-toggle,.neu-switch{display: inline-flex;align-items: center;inline-size: 3.25rem;block-size: 1.75rem;border-radius: var(--radius-pill);padding: 0.2rem;box-shadow: inset 0.25rem 0.25rem 0.5rem var(--neu-dark),inset -0.25rem -0.25rem 0.5rem var(--neu-light)}.neu-toggle > *,.neu-switch > *{inline-size: 1.35rem;block-size: 1.35rem;border-radius: var(--radius-circle);background: var(--accent);box-shadow: 0.15rem 0.15rem 0.3rem var(--neu-dark);transition: transform var(--dur-base) var(--ease-spring)}.neu-toggle[aria-checked="true"] > *,.neu-switch[aria-checked="true"] > *,.neu-toggle.is-on > *,.neu-switch.is-on > *{transform: translateX(1.5rem);background: var(--accent-strong)}.neu-icon-btn{display: inline-flex;align-items: center;justify-content: center;inline-size: 2.75rem;block-size: 2.75rem;border-radius: var(--radius-circle);color: var(--fg,var(--accent));cursor: pointer;box-shadow: var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-dark),calc(var(--neu-distance) * -1) calc(var(--neu-distance) * -1) var(--neu-blur) var(--neu-light)}.neu-icon-btn:active{box-shadow: inset var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-dark),inset calc(var(--neu-distance) * -1) calc(var(--neu-distance) * -1) var(--neu-blur) var(--neu-light);transform: scale(0.96)}@supports not (color: color-mix(in srgb,white 50%,black)){.neu-raised,.neu-pressed,.neu-inset,.neu-flat,.neu-convex,.neu-concave,.neu-btn,.neu-input,.neu-card,.neu-toggle,.neu-switch,.neu-icon-btn{--neu-light: rgba(255,255,255,0.08);--neu-dark: rgba(0,0,0,0.45)}}}@layer fx{/*! CSS-CODEBASE · fx/organic — pure-CSS organic blob shapes via animated border-radius morphing. * Distinct from render/svg-filters' `.goo-field`/`.goo-blob` metaball system (SVG turbulence+contrast * fusing overlapping circles) — this file never touches the goo filter. Here the blobbiness IS the * border-radius itself: large asymmetric per-corner + slash values, optionally animated in a loop. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .blob-shape{border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%}.blob-variant-1{border-radius: 63% 37% 30% 70% / 50% 45% 55% 50%}.blob-variant-2{border-radius: 38% 62% 55% 45% / 60% 40% 60% 40%}.blob-variant-3{border-radius: 55% 45% 40% 60% / 35% 65% 40% 60%}.blob-morph{border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;animation: brn-blob-morph calc(12s / var(--shader-speed,1)) var(--ease-in-out) infinite}@keyframes brn-blob-morph{0%,100%{border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%}33%{border-radius: 63% 37% 30% 70% / 50% 45% 55% 50%}66%{border-radius: 38% 62% 55% 45% / 60% 40% 60% 40%}}.blob-btn{display: inline-flex;align-items: center;justify-content: center;padding: 0.75em 1.75em;border: 0;border-radius: var(--radius-lg);background: var(--accent);color: var(--accent-contrast,var(--bg));cursor: pointer;transition: border-radius var(--dur-slow) var(--ease-spring),transform var(--dur-base) var(--ease-out)}.blob-btn:hover,.blob-btn:focus-visible{border-radius: 60% 40% 45% 55% / 55% 45% 60% 40%;transform: translateY(-2px)}.blob-bg{position: absolute;inset: auto;inline-size: 28rem;block-size: 28rem;background: radial-gradient(circle at 35% 35%,var(--accent-glow),var(--accent-soft) 70%,transparent 100%);border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;filter: blur(2.5rem);pointer-events: none;z-index: -1;animation: brn-blob-morph calc(18s / var(--shader-speed,1)) var(--ease-in-out) infinite}.blob-group{position: relative;isolation: isolate}.blob-group > .blob-bg:nth-child(1){inset-block-start: -10%;inset-inline-start: -8%;opacity: 0.8}.blob-group > .blob-bg:nth-child(2){inset-block-start: 20%;inset-inline-end: -12%;inline-size: 20rem;block-size: 20rem;opacity: 0.55;background: radial-gradient(circle at 40% 40%,var(--accent-strong),var(--accent-soft) 70%,transparent 100%);animation-delay: -6s;animation-duration: calc(22s / var(--shader-speed,1))}.blob-group > .blob-bg:nth-child(3){inset-block-end: -15%;inset-inline-start: 30%;inline-size: 14rem;block-size: 14rem;opacity: 0.4;animation-delay: -11s;animation-duration: calc(15s / var(--shader-speed,1))}.blob-image-mask{display: block;inline-size: 100%;block-size: 100%;object-fit: cover;border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;transition: border-radius var(--dur-slow) var(--ease-spring)}.blob-image-mask:hover{border-radius: 60% 40% 45% 55% / 55% 45% 60% 40%}.blob-liquid{border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;animation: brn-blob-wobble calc(6s / var(--shader-speed,1)) var(--ease-in-out) infinite}@keyframes brn-blob-wobble{0%,100%{border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%}25%{border-radius: 46% 54% 60% 40% / 48% 42% 58% 52%}50%{border-radius: 40% 60% 55% 45% / 42% 48% 52% 58%}75%{border-radius: 48% 52% 62% 38% / 50% 44% 56% 50%}}}@layer fx{/*! CSS-CODEBASE · fx/dividers — section-separator "shape divider" bands. * Pure CSS clip-path shapes for the seam between two page sections — no SVG assets, no JS. * Drop a `
` (or similar) at a section boundary; it reads --surface/--bg * and sits as a thin full-width band. Flip with `.divider-flip`; mirror with `.divider-mirror`. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ [class^="divider-"]{display: block;inline-size: 100%;block-size: clamp(40px,6vw,90px);background: var(--surface);pointer-events: none}.divider-flip{transform: scaleY(-1)}.divider-mirror{transform: scaleX(-1)}.divider-flip.divider-mirror{transform: scale(-1,-1)}.divider-wave{clip-path: polygon( 0% 60%,4% 64%,8% 68%,12% 71%,16% 73%,20% 74%,24% 73%,28% 71%,32% 68%,36% 64%,40% 60%,44% 56%,48% 53%,52% 51%,56% 50%,60% 51%,64% 53%,68% 56%,72% 60%,76% 64%,80% 68%,84% 71%,88% 73%,92% 74%,96% 73%,100% 71%,100% 100%,0% 100% )}.divider-wave-2{clip-path: polygon( 0% 40%,5% 48%,10% 55%,15% 60%,20% 58%,25% 50%,30% 42%,35% 38%,40% 42%,45% 52%,50% 62%,55% 68%,60% 65%,65% 55%,70% 45%,75% 40%,80% 44%,85% 54%,90% 62%,95% 66%,100% 60%,100% 100%,0% 100% )}.divider-angle{clip-path: polygon(0% 100%,100% 0%,100% 100%)}.divider-angle-left{clip-path: polygon(0% 0%,100% 100%,0% 100%)}.divider-angle-steep{clip-path: polygon(0% 100%,65% 0%,100% 0%,100% 100%)}.divider-curve{clip-path: polygon( 0% 0%,100% 0%,100% 55%,92% 68%,84% 78%,76% 86%,68% 91%,60% 95%,50% 97%,40% 95%,32% 91%,24% 86%,16% 78%,8% 68%,0% 55% )}.divider-zigzag{clip-path: polygon( 0% 100%,0% 40%,8.33% 100%,16.66% 40%,25% 100%,33.33% 40%,41.66% 100%,50% 40%,58.33% 100%,66.66% 40%,75% 100%,83.33% 40%,91.66% 100%,100% 40%,100% 100% )}.divider-torn{clip-path: polygon( 0% 30%,6% 45%,11% 20%,17% 50%,23% 25%,29% 55%,35% 15%,41% 40%,47% 60%,53% 22%,59% 48%,65% 18%,71% 52%,77% 28%,83% 58%,89% 20%,95% 44%,100% 30%,100% 100%,0% 100% )}.divider-arrow{clip-path: polygon(0% 0%,50% 70%,100% 0%,100% 100%,0% 100%)}.divider-triangle{clip-path: polygon( 0% 0%,40% 0%,50% 60%,60% 0%,100% 0%,100% 100%,0% 100% )}.divider-elevated{background: var(--surface-2)}}@layer fx{/*! CSS-CODEBASE · fx/loaders — spinners, dots, bars, and orbit indicators. * Distinct from .fx-skeleton (block shimmer placeholder) — these are active "working" indicators. * Pure CSS, compositor-friendly (transform/opacity only), reuses the brn-* keyframe library where possible. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .loader-ring{display: inline-block;inline-size: clamp(20px,3vw,32px);block-size: clamp(20px,3vw,32px);border-radius: var(--radius-circle);border: 3px solid var(--accent-soft);border-block-start-color: var(--accent);animation: brn-spin var(--dur-xslow) linear infinite}.loader-spinner-dual{position: relative;display: inline-block;inline-size: clamp(28px,4vw,44px);block-size: clamp(28px,4vw,44px)}.loader-spinner-dual::before,.loader-spinner-dual::after{content: "";position: absolute;inset: 0;border-radius: var(--radius-circle);border: 3px solid transparent}.loader-spinner-dual::before{border-block-start-color: var(--accent);border-inline-end-color: var(--accent-soft);animation: brn-spin var(--dur-xslow) linear infinite}.loader-spinner-dual::after{inset: 22%;border-block-end-color: var(--accent-strong);border-inline-start-color: var(--accent-soft);animation: brn-spin calc(var(--dur-xslow) * 0.7) linear infinite reverse}.loader-dots{display: inline-flex;align-items: center;gap: var(--sp-2)}.loader-dots > span{inline-size: 0.5em;block-size: 0.5em;border-radius: var(--radius-circle);background: var(--accent);animation: brn-loader-bounce var(--dur-xslow) var(--ease-in-out) infinite}.loader-dots > span:nth-child(2){animation-delay: 0.12s}.loader-dots > span:nth-child(3){animation-delay: 0.24s}@keyframes brn-loader-bounce{0%,80%,100%{transform: translateY(0);opacity: 0.5}40%{transform: translateY(-45%);opacity: 1}}.loader-bar{position: relative;overflow: hidden;inline-size: 100%;block-size: 6px;border-radius: var(--radius-pill);background: var(--surface-2)}.loader-bar::after{content: "";position: absolute;inset-block: 0;inline-size: 40%;border-radius: var(--radius-pill);background: linear-gradient(90deg,transparent,var(--accent),transparent);animation: brn-loader-slide var(--dur-xslow) var(--ease-in-out) infinite}@keyframes brn-loader-slide{0%{transform: translateX(-100%)}100%{transform: translateX(350%)}}.loader-orbit{position: relative;display: inline-block;inline-size: clamp(24px,3.5vw,36px);block-size: clamp(24px,3.5vw,36px);border-radius: var(--radius-circle);border: 2px solid var(--accent-soft)}.loader-orbit::before{content: "";position: absolute;inset: 0;border-radius: var(--radius-circle);animation: brn-spin var(--dur-xslow) linear infinite}.loader-orbit::after{content: "";position: absolute;inset-block-start: -3px;inset-inline-start: calc(50% - 3px);inline-size: 6px;block-size: 6px;border-radius: var(--radius-circle);background: var(--accent);box-shadow: 0 0 8px 1px var(--accent-glow);transform-origin: 3px calc(clamp(24px,3.5vw,36px) / 2 + 3px);animation: brn-spin var(--dur-xslow) linear infinite}.loader-pulse-ring{position: relative;display: inline-block;inline-size: clamp(14px,2vw,20px);block-size: clamp(14px,2vw,20px);border-radius: var(--radius-circle);background: var(--accent)}.loader-pulse-ring::before,.loader-pulse-ring::after{content: "";position: absolute;inset: 0;border-radius: var(--radius-circle);border: 2px solid var(--accent);animation: brn-loader-expand var(--dur-xslow) var(--ease-out) infinite}.loader-pulse-ring::after{animation-delay: calc(var(--dur-xslow) * 0.5)}@keyframes brn-loader-expand{0%{transform: scale(1);opacity: 0.8}100%{transform: scale(2.6);opacity: 0}}.loader-bars{display: inline-flex;align-items: flex-end;gap: 0.2em;block-size: 1.4em}.loader-bars > span{inline-size: 0.28em;block-size: 100%;border-radius: var(--radius-sm);background: var(--accent);transform-origin: bottom;animation: brn-loader-eq var(--dur-slow) var(--ease-in-out) infinite}.loader-bars > span:nth-child(1){animation-delay: 0s}.loader-bars > span:nth-child(2){animation-delay: 0.1s}.loader-bars > span:nth-child(3){animation-delay: 0.2s}.loader-bars > span:nth-child(4){animation-delay: 0.3s}.loader-bars > span:nth-child(5){animation-delay: 0.4s}@keyframes brn-loader-eq{0%,100%{transform: scaleY(0.3)}50%{transform: scaleY(1)}}.loader-shimmer-line{position: relative;overflow: hidden;inline-size: 100%;block-size: 0.8em;border-radius: var(--radius-sm);background: var(--surface-2)}.loader-shimmer-line::after{content: "";position: absolute;inset-block: 0;inset-inline-start: -60%;inline-size: 60%;background: linear-gradient(90deg,transparent,var(--accent-soft),transparent);animation: brn-loader-slide var(--dur-xslow) linear infinite}.loader-static{animation-play-state: paused !important}}@layer fx{/*! CSS-CODEBASE · fx/badges — decorative ribbons, seals, pins, stamps, and attention badges. * Distinct from components/_badge.css (.badge/.chip/.dot/.dot-live) — these are ornamental * card/corner decorations, not inline status pills. Pure CSS, token-tinted from --accent. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .ribbon-corner{position: absolute;inset-block-start: var(--sp-4);inset-inline-end: calc(var(--sp-10) * -1);inline-size: clamp(140px,16vw,180px);padding-block: var(--sp-1);text-align: center;font-size: var(--text-xs);font-weight: var(--fw-bold);letter-spacing: var(--tracking-wide);text-transform: uppercase;color: var(--accent-contrast);background: var(--accent);box-shadow: var(--shadow);transform: rotate(45deg);pointer-events: none}.ribbon-corner-left{position: absolute;inset-block-start: var(--sp-4);inset-inline-start: calc(var(--sp-10) * -1);inline-size: clamp(140px,16vw,180px);padding-block: var(--sp-1);text-align: center;font-size: var(--text-xs);font-weight: var(--fw-bold);letter-spacing: var(--tracking-wide);text-transform: uppercase;color: var(--accent-contrast);background: var(--accent);box-shadow: var(--shadow);transform: rotate(-45deg);pointer-events: none}.seal-badge{position: relative;display: inline-grid;place-items: center;inline-size: clamp(64px,8vw,96px);block-size: clamp(64px,8vw,96px);border-radius: var(--radius-circle);background: radial-gradient(circle,var(--accent) 62%,transparent 63%),repeating-conic-gradient(var(--accent) 0deg 15deg,var(--accent-strong) 15deg 30deg);color: var(--accent-contrast);font-size: var(--text-xs);font-weight: var(--fw-bold);text-align: center;box-shadow: var(--shadow-md)}.seal-badge > span{position: relative;z-index: 1;padding-inline: var(--sp-2)}.pin-tag{position: relative;display: inline-flex;align-items: center;gap: var(--sp-2);padding: var(--sp-1) var(--sp-4) var(--sp-1) var(--sp-3);background: var(--accent);color: var(--accent-contrast);font-size: var(--text-xs);font-weight: var(--fw-semibold);clip-path: polygon(0% 0%,82% 0%,100% 50%,82% 100%,0% 100%)}.pin-tag::before{content: "";inline-size: 0.4em;block-size: 0.4em;border-radius: var(--radius-circle);background: var(--accent-contrast);opacity: 0.55;flex-shrink: 0}.stamp-rotate{display: inline-block;padding: var(--sp-2) var(--sp-4);border: 2px solid var(--accent);border-radius: var(--radius-sm);outline: 1px solid var(--accent);outline-offset: 3px;color: var(--accent);font-family: var(--font-display);font-weight: var(--fw-bold);letter-spacing: var(--tracking-wide);text-transform: uppercase;transform: rotate(-6deg);opacity: 0.9}.corner-flag{position: absolute;inset-block-start: 0;inset-inline-start: 0;inline-size: 0;block-size: 0;border-block-start: clamp(48px,6vw,68px) solid var(--accent);border-inline-end: clamp(48px,6vw,68px) solid transparent;pointer-events: none}.corner-flag > span{position: absolute;inset-block-start: -1.7em;inset-inline-start: 0.15em;color: var(--accent-contrast);font-size: var(--text-2xs);font-weight: var(--fw-bold);transform: rotate(-45deg);white-space: nowrap}.notify-ping{position: relative;display: inline-block;inline-size: 0.6em;block-size: 0.6em;border-radius: var(--radius-circle);background: var(--accent)}.notify-ping::after{content: "";position: absolute;inset: 0;border-radius: var(--radius-circle);background: var(--accent);animation: brn-notify-ping var(--dur-xslow) var(--ease-out) infinite}@keyframes brn-notify-ping{0%{transform: scale(1);opacity: 0.7}100%{transform: scale(2.4);opacity: 0}}.floating-tag{display: inline-flex;align-items: center;padding: 0.3em 0.9em;border-radius: var(--radius-pill);background: var(--accent-soft);color: var(--accent-strong,var(--accent));font-size: var(--text-xs);font-weight: var(--fw-semibold);box-shadow: var(--shadow);animation: brn-float var(--dur-xslow) var(--ease-in-out) infinite}.seal-badge-outline{background: var(--surface-2);border: 2px solid var(--accent);color: var(--accent);box-shadow: none}}@layer fx{/*! CSS-CODEBASE · fx/backgrounds — decorative pure-CSS background patterns. * Distinct from render/_shaders.css (.fx-pat-stripes/-grid/-checker/-dots/-hex/-waves/-rays/-plaid) — * this set covers topography, drafting/blueprint grids, isometric tiles, masonry weaves, and confetti. * Each is a `background` recipe: apply `.bg-pat-*` to any container, no markup required. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .bg-pat-topography{background-color: var(--bg);background-image: repeating-radial-gradient( circle at 30% 35%,transparent 0,transparent 14px,var(--accent-soft) 14px,var(--accent-soft) 16px ),repeating-radial-gradient( circle at 78% 68%,transparent 0,transparent 22px,var(--accent-soft) 22px,var(--accent-soft) 24px );background-blend-mode: multiply}.bg-pat-blueprint{--bg-pat-cell: 24px;background-color: var(--bg);background-image: linear-gradient(var(--accent-soft) 1px,transparent 1px),linear-gradient(90deg,var(--accent-soft) 1px,transparent 1px),linear-gradient(color-mix(in srgb,var(--accent) 45%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) 45%,transparent) 1px,transparent 1px);background-size: var(--bg-pat-cell) var(--bg-pat-cell),var(--bg-pat-cell) var(--bg-pat-cell),calc(var(--bg-pat-cell) * 4) calc(var(--bg-pat-cell) * 4),calc(var(--bg-pat-cell) * 4) calc(var(--bg-pat-cell) * 4)}.bg-pat-isometric-cubes{--bg-pat-size: 56px;background-color: var(--surface);background-image: linear-gradient(30deg,var(--accent-soft) 12%,transparent 12.5%,transparent 87%,var(--accent-soft) 87.5%,var(--accent-soft)),linear-gradient(150deg,var(--accent-soft) 12%,transparent 12.5%,transparent 87%,var(--accent-soft) 87.5%,var(--accent-soft)),linear-gradient(30deg,var(--accent-soft) 12%,transparent 12.5%,transparent 87%,var(--accent-soft) 87.5%,var(--accent-soft)),linear-gradient(150deg,var(--accent-soft) 12%,transparent 12.5%,transparent 87%,var(--accent-soft) 87.5%,var(--accent-soft)),linear-gradient(60deg,color-mix(in srgb,var(--accent-strong) 35%,transparent) 25%,transparent 25.5%,transparent 75%,color-mix(in srgb,var(--accent-strong) 35%,transparent) 75%,color-mix(in srgb,var(--accent-strong) 35%,transparent)),linear-gradient(60deg,color-mix(in srgb,var(--accent-strong) 35%,transparent) 25%,transparent 25.5%,transparent 75%,color-mix(in srgb,var(--accent-strong) 35%,transparent) 75%,color-mix(in srgb,var(--accent-strong) 35%,transparent));background-size: var(--bg-pat-size) calc(var(--bg-pat-size) * 1.73);background-position: 0 0,0 0,calc(var(--bg-pat-size) / 2) calc(var(--bg-pat-size) * 0.865),calc(var(--bg-pat-size) / 2) calc(var(--bg-pat-size) * 0.865),0 0,calc(var(--bg-pat-size) / 2) calc(var(--bg-pat-size) * 0.865)}.bg-pat-brick{--bg-pat-brick-w: 60px;--bg-pat-brick-h: 24px;background-color: var(--surface);background-image: linear-gradient(var(--accent-soft) 2px,transparent 2px),linear-gradient(90deg,var(--accent-soft) 2px,transparent 2px);background-size: var(--bg-pat-brick-w) var(--bg-pat-brick-h);background-position: 0 0,calc(var(--bg-pat-brick-w) / -2) 0}.bg-pat-herringbone{--bg-pat-size: 20px;background-color: var(--surface);background-image: repeating-linear-gradient( 45deg,var(--accent-soft) 0,var(--accent-soft) 2px,transparent 2px,transparent var(--bg-pat-size) ),repeating-linear-gradient( -45deg,var(--accent-soft) 0,var(--accent-soft) 2px,transparent 2px,transparent var(--bg-pat-size) );background-position: 0 0,0 0;background-size: calc(var(--bg-pat-size) * 2) calc(var(--bg-pat-size) * 2)}.bg-pat-confetti{background-color: var(--bg);background-image: radial-gradient(circle 3px at 8% 20%,var(--accent),transparent 100%),radial-gradient(circle 4px at 22% 65%,var(--accent-strong),transparent 100%),radial-gradient(circle 2px at 38% 12%,color-mix(in srgb,var(--accent) 60%,var(--fg)),transparent 100%),radial-gradient(circle 3px at 52% 78%,var(--accent-soft),transparent 100%),radial-gradient(circle 4px at 66% 30%,var(--accent),transparent 100%),radial-gradient(circle 2px at 78% 58%,var(--accent-strong),transparent 100%),radial-gradient(circle 3px at 88% 15%,color-mix(in srgb,var(--accent-strong) 60%,var(--fg)),transparent 100%),radial-gradient(circle 2px at 94% 82%,var(--accent),transparent 100%),radial-gradient(circle 3px at 15% 90%,var(--accent-soft),transparent 100%),radial-gradient(circle 2px at 45% 45%,var(--accent-strong),transparent 100%);background-repeat: repeat;background-size: 220px 220px}.bg-pat-crosshatch{--bg-pat-gap: 10px;background-color: var(--bg);background-image: repeating-linear-gradient( 45deg,var(--accent-soft) 0,var(--accent-soft) 1px,transparent 1px,transparent var(--bg-pat-gap) ),repeating-linear-gradient( -45deg,var(--accent-soft) 0,var(--accent-soft) 1px,transparent 1px,transparent var(--bg-pat-gap) )}.bg-pat-tight{--bg-pat-cell: 14px;--bg-pat-size: 12px;--bg-pat-gap: 6px}.bg-pat-loose{--bg-pat-cell: 40px;--bg-pat-size: 84px;--bg-pat-gap: 18px}}@layer render{/*! CSS-CODEBASE · render/svg-filters — apply the SVG "shader" library via the --filter-* tokens. * Thin, composable utilities that bind each `filter: var(--filter-*)` handle to an `fx-f-*` class, * plus hover-to-apply variants, a `.goo-field` metaball wrapper, and ready-made combo presets. * * ⚠ REQUIRED: inline `assets/svg/filters.svg` ONCE per page (e.g. right after ) so the * `url(#brn-*)` references in the --filter-* tokens resolve. Without it these classes no-op. * Every filter is real, GPU-accelerated SVG; tints flow from the render tokens, so re-theming is free. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .fx-f-bloom{filter: var(--filter-bloom)}.fx-f-bloom-soft{filter: var(--filter-bloom-soft)}.fx-f-distort{filter: var(--filter-distort)}.fx-f-liquid{filter: var(--filter-liquid)}.fx-f-specular{filter: var(--filter-specular)}.fx-f-emboss{filter: var(--filter-emboss)}.fx-f-chromatic{filter: var(--filter-chromatic)}.fx-f-posterize{filter: var(--filter-posterize)}.fx-f-sharpen{filter: var(--filter-sharpen)}.fx-f-grain-svg{filter: var(--filter-grain)}.fx-f-goo{filter: var(--filter-goo)}.fx-f-duotone-svg{filter: var(--filter-duotone)}.fx-f-thermal{filter: var(--filter-thermal)}.fx-f-bloom,.fx-f-bloom-soft,.fx-f-distort,.fx-f-liquid,.fx-f-specular,.fx-f-chromatic,.fx-f-thermal{transition: filter var(--dur-base,240ms) var(--ease-out,ease-out)}.fx-f-bloom-hover{transition: filter var(--dur-slow,480ms) var(--ease-out,ease-out)}.fx-f-bloom-hover:hover,.fx-f-bloom-hover:focus-within{filter: var(--filter-bloom)}.fx-f-bloom-soft-hover{transition: filter var(--dur-slow,480ms) var(--ease-out,ease-out)}.fx-f-bloom-soft-hover:hover,.fx-f-bloom-soft-hover:focus-within{filter: var(--filter-bloom-soft)}.fx-f-distort-hover{transition: filter var(--dur-slow,480ms) var(--ease-out,ease-out)}.fx-f-distort-hover:hover,.fx-f-distort-hover:focus-within{filter: var(--filter-distort)}.fx-f-liquid-hover{transition: filter var(--dur-slow,480ms) var(--ease-out,ease-out)}.fx-f-liquid-hover:hover,.fx-f-liquid-hover:focus-within{filter: var(--filter-liquid)}.fx-f-specular-hover{transition: filter var(--dur-slow,480ms) var(--ease-out,ease-out)}.fx-f-specular-hover:hover,.fx-f-specular-hover:focus-within{filter: var(--filter-specular)}.fx-f-chromatic-hover{transition: filter var(--dur-slow,480ms) var(--ease-out,ease-out)}.fx-f-chromatic-hover:hover,.fx-f-chromatic-hover:focus-within{filter: var(--filter-chromatic)}.fx-f-thermal-hover{transition: filter var(--dur-slow,480ms) var(--ease-out,ease-out)}.fx-f-thermal-hover:hover,.fx-f-thermal-hover:focus-within{filter: var(--filter-thermal)}.fx-f-posterize-off{filter: var(--filter-posterize);transition: filter var(--dur-slow,480ms) var(--ease-out,ease-out)}.fx-f-posterize-off:hover,.fx-f-posterize-off:focus-within{filter: none}.goo-field{filter: var(--filter-goo);position: relative;isolation: isolate}.goo-field > .goo-blob{position: absolute;border-radius: 50%;background: var(--accent);inline-size: var(--goo-size,6rem);block-size: var(--goo-size,6rem);will-change: transform}.goo-field > .goo-blob-strong{background: var(--accent-strong)}.goo-field > .goo-blob-glow{background: var(--accent-glow)}.goo-field.goo-animate > .goo-blob{animation: brn-goo-drift calc(9s / var(--shader-speed,1)) var(--ease-in-out,ease-in-out) infinite}.goo-field.goo-animate > .goo-blob:nth-child(2){animation-delay: -2s;animation-duration: calc(11s / var(--shader-speed,1))}.goo-field.goo-animate > .goo-blob:nth-child(3){animation-delay: -4s;animation-duration: calc(13s / var(--shader-speed,1))}.goo-field.goo-animate > .goo-blob:nth-child(4){animation-delay: -6s;animation-duration: calc(10s / var(--shader-speed,1))}@keyframes brn-goo-drift{0%{transform: translate(0,0) scale(1)}33%{transform: translate(40%,-25%) scale(1.12)}66%{transform: translate(-30%,30%) scale(0.92)}100%{transform: translate(0,0) scale(1)}}.fx-f-wet{filter: var(--filter-specular) var(--filter-bloom-soft)}.fx-f-holo-glitch{filter: var(--filter-chromatic) var(--filter-bloom)}.fx-f-heat{filter: var(--filter-distort) var(--filter-thermal)}.fx-f-molten{filter: var(--filter-liquid) var(--filter-bloom-soft)}.fx-f-etched{filter: var(--filter-emboss) var(--filter-sharpen)}.fx-f-riso{filter: var(--filter-posterize) var(--filter-grain)}.fx-f-dream{filter: var(--filter-bloom-soft) brightness(1.04)}.fx-f-comic{filter: var(--filter-duotone) var(--filter-sharpen)}.goo-field.goo-glass{filter: var(--filter-goo) var(--filter-specular)}@supports not (filter: url('#x')){.fx-f-bloom,.fx-f-bloom-soft,.fx-f-distort,.fx-f-liquid,.fx-f-specular,.fx-f-emboss,.fx-f-chromatic,.fx-f-posterize,.fx-f-sharpen,.fx-f-grain-svg,.fx-f-goo,.fx-f-duotone-svg,.fx-f-thermal,.goo-field,.fx-f-wet,.fx-f-holo-glitch,.fx-f-heat,.fx-f-molten,.fx-f-etched,.fx-f-riso,.fx-f-dream,.fx-f-comic{filter: none}}}@layer render{/*! CSS-CODEBASE · render/shaders — procedural backgrounds: Houdini paint(), a WebGL bridge, and * a deep set of pure-CSS procedural patterns. Everything is tinted from the render tokens * (--shader-color-a/-b/-c, --shader-scale/-time/-speed, --noise-freq, --accent*), so the same * markup re-grades across all 12 themes. * * Three tiers, best→graceful: * 1. Houdini `.fx-shader-*` — paint(brn-mesh|noise|voronoi|plasma), @supports-guarded. * 2. WebGL `.shader-canvas[data-shader=…]` — the runtime mounts a canvas; CSS frames it. * 3. Pure CSS `.fx-pat-*` — repeating gradients, no Houdini/WebGL needed (always works). * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .fx-shader-mesh,.fx-shader-noise,.fx-shader-voronoi,.fx-shader-plasma,.shader-fallback{background-color: var(--shader-color-c,var(--bg));background-image: radial-gradient(40% 50% at 18% 22%,var(--shader-color-a,var(--accent)),transparent 60%),radial-gradient(38% 48% at 82% 18%,color-mix(in srgb,var(--shader-color-b,var(--accent-strong)) 60%,transparent),transparent 62%),radial-gradient(46% 56% at 72% 84%,var(--accent-glow),transparent 66%),radial-gradient(32% 42% at 26% 88%,color-mix(in srgb,var(--shader-color-b,var(--accent-strong)) 40%,transparent),transparent 60%);background-size: calc(100% / var(--shader-scale,1)) calc(100% / var(--shader-scale,1))}@supports (background: paint(brn-mesh)){.fx-shader-mesh{background-image: none;background: paint(brn-mesh)}}@supports (background: paint(brn-noise)){.fx-shader-noise{background-image: none;background: paint(brn-noise)}}@supports (background: paint(brn-voronoi)){.fx-shader-voronoi{background-image: none;background: paint(brn-voronoi)}}@supports (background: paint(brn-plasma)){.fx-shader-plasma{background-image: none;background: paint(brn-plasma)}}.fx-shader-animate{animation: brn-shader-time calc(18s / var(--shader-speed,1)) linear infinite}@keyframes brn-shader-time{to{--shader-time: 1}}.shader-canvas{position: relative;isolation: isolate;overflow: hidden;display: block;inline-size: 100%;min-block-size: 12rem;background-color: var(--shader-color-c,var(--bg))}.shader-canvas > canvas,.shader-canvas[data-shader] > canvas{position: absolute;inset: 0;inline-size: 100%;block-size: 100%;z-index: 0;pointer-events: none}.shader-canvas > :not(canvas){position: relative;z-index: 1}.shader-fallback{position: absolute;inset: 0;z-index: 0;pointer-events: none}.shader-canvas[data-shader-ready="true"] .shader-fallback{opacity: 0;transition: opacity var(--dur-slow,480ms) var(--ease-out,ease-out)}.fx-pat-stripes{background-color: var(--shader-color-c,var(--bg));background-image: repeating-linear-gradient( 45deg,var(--shader-color-a,var(--accent)) 0,var(--shader-color-a,var(--accent)) calc(0.5rem * var(--shader-scale,1)),transparent calc(0.5rem * var(--shader-scale,1)),transparent calc(1rem * var(--shader-scale,1)) )}.fx-pat-grid{background-color: var(--shader-color-c,var(--bg));background-image: repeating-linear-gradient(0deg,color-mix(in srgb,var(--accent) 35%,transparent) 0,color-mix(in srgb,var(--accent) 35%,transparent) 1px,transparent 1px,transparent calc(1.25rem * var(--shader-scale,1))),repeating-linear-gradient(90deg,color-mix(in srgb,var(--accent) 35%,transparent) 0,color-mix(in srgb,var(--accent) 35%,transparent) 1px,transparent 1px,transparent calc(1.25rem * var(--shader-scale,1)))}.fx-pat-checker{--fx-pat-cell: calc(1.5rem * var(--shader-scale,1));background-color: var(--shader-color-c,var(--bg));background-image: conic-gradient(var(--shader-color-a,var(--accent)) 0 25%,transparent 0 50%,var(--shader-color-a,var(--accent)) 0 75%,transparent 0);background-size: calc(var(--fx-pat-cell) * 2) calc(var(--fx-pat-cell) * 2)}.fx-pat-dots{background-color: var(--shader-color-c,var(--bg));background-image: radial-gradient( circle at center,var(--shader-color-a,var(--accent)) calc(0.18rem * var(--shader-scale,1)),transparent calc(0.2rem * var(--shader-scale,1)) );background-size: calc(1rem * var(--shader-scale,1)) calc(1rem * var(--shader-scale,1))}.fx-pat-hex{--fx-pat-cell: calc(1.4rem * var(--shader-scale,1));background-color: var(--shader-color-c,var(--bg));background-image: radial-gradient(circle at 50% 0,color-mix(in srgb,var(--accent) 55%,transparent) calc(0.16rem * var(--shader-scale,1)),transparent calc(0.18rem * var(--shader-scale,1))),radial-gradient(circle at 0 50%,color-mix(in srgb,var(--accent-strong) 55%,transparent) calc(0.16rem * var(--shader-scale,1)),transparent calc(0.18rem * var(--shader-scale,1)));background-size: var(--fx-pat-cell) var(--fx-pat-cell);background-position: 0 0,calc(var(--fx-pat-cell) / 2) calc(var(--fx-pat-cell) / 2)}.fx-pat-waves{background-color: var(--shader-color-c,var(--bg));background-image: repeating-radial-gradient( circle at 50% 120%,color-mix(in srgb,var(--accent) 30%,transparent) 0,color-mix(in srgb,var(--accent) 30%,transparent) calc(0.4rem * var(--shader-scale,1)),transparent calc(0.4rem * var(--shader-scale,1)),transparent calc(1.6rem * var(--shader-scale,1)) )}.fx-pat-rays{background-color: var(--shader-color-c,var(--bg));background-image: repeating-conic-gradient( from var(--light-angle,0deg) at 50% 50%,var(--shader-color-a,var(--accent)) 0deg,var(--shader-color-a,var(--accent)) 4deg,transparent 4deg,transparent 12deg )}.fx-pat-plaid{background-color: var(--shader-color-c,var(--bg));background-image: repeating-linear-gradient(0deg,color-mix(in srgb,var(--shader-color-a,var(--accent)) 45%,transparent) 0,color-mix(in srgb,var(--shader-color-a,var(--accent)) 45%,transparent) calc(0.5rem * var(--shader-scale,1)),transparent calc(0.5rem * var(--shader-scale,1)),transparent calc(2rem * var(--shader-scale,1))),repeating-linear-gradient(90deg,color-mix(in srgb,var(--shader-color-b,var(--accent-strong)) 45%,transparent) 0,color-mix(in srgb,var(--shader-color-b,var(--accent-strong)) 45%,transparent) calc(0.5rem * var(--shader-scale,1)),transparent calc(0.5rem * var(--shader-scale,1)),transparent calc(2rem * var(--shader-scale,1)))}.fx-pat-stripes.fx-pat-animate,.fx-pat-dots.fx-pat-animate,.fx-pat-waves.fx-pat-animate,.fx-pat-hex.fx-pat-animate,.fx-pat-checker.fx-pat-animate,.fx-pat-plaid.fx-pat-animate{animation: brn-pat-drift calc(20s / var(--shader-speed,1)) linear infinite}.fx-pat-rays.fx-pat-animate{animation: brn-pat-spin calc(40s / var(--shader-speed,1)) linear infinite}@keyframes brn-pat-drift{to{background-position: 200px 200px}}@keyframes brn-pat-spin{to{--light-angle: 360deg}}}@layer render{/*! CSS-CODEBASE · render/lighting — dynamic, theme-tinted lighting for surfaces, text, and edges. * A movable light (--light-x/--light-y as percentages of the box) drives radial highlights, with an * ambient floor (--light-ambient) so shadowed areas stay legible. Specular/emboss looks borrow the * SVG --filter-* handles; warm/cool keys come from --light-warm/--light-cool; rim glow from --rim-color. * * JS hook: on `[data-light]` or `.light-track`, set --light-x/--light-y from a pointermove handler * (percentages relative to the element). With no JS the defaults centre the light gracefully. * All colour flows from the render + theme tokens, so lighting re-grades per theme automatically. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .lit-surface{position: relative;isolation: isolate;overflow: hidden;background-color: var(--surface,var(--bg))}.lit-surface::before{content: "";position: absolute;inset: 0;z-index: -1;pointer-events: none;border-radius: inherit;background: radial-gradient( circle var(--light-falloff,60%) at var(--light-x,50%) var(--light-y,28%),color-mix(in srgb,var(--light-color,#fff) calc(var(--light-intensity,1) * 38%),transparent),transparent 70% ),color-mix(in srgb,var(--accent-glow) calc(var(--light-ambient,0.18) * 100%),transparent);transition: background var(--dur-fast,120ms) linear}.lit-surface.lit-tight{--light-falloff: 34%}.lit-surface.lit-wide{--light-falloff: 85%}.lit-surface.lit-bright{--light-intensity: 1.6}.lit-surface.lit-dim{--light-intensity: 0.6}.lit-specular{filter: var(--filter-specular)}.lit-emboss{filter: var(--filter-emboss)}.light-scene{position: relative;isolation: isolate;--light-x: 50%;--light-y: 28%}.rim-light{position: relative;isolation: isolate;box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--rim-color,var(--accent)) 70%,transparent),0 0 calc(0.75rem + 0.4vw) color-mix(in srgb,var(--rim-color,var(--accent)) 45%,transparent)}.rim-light-dyn::after{content: "";position: absolute;inset: 0;z-index: 1;pointer-events: none;border-radius: inherit;padding: 1px;background: radial-gradient( circle at var(--light-x,50%) var(--light-y,28%),color-mix(in srgb,var(--rim-color,var(--accent)) 90%,transparent),transparent 60% )}@supports (mask: linear-gradient(#000,#000)) and ((-webkit-mask-composite: xor) or (mask-composite: exclude)){.rim-light-dyn{position: relative;isolation: isolate}.rim-light-dyn::after{-webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite: xor;mask-composite: exclude}}.spotlight-dyn{position: relative;isolation: isolate;overflow: hidden}.spotlight-dyn::after{content: "";position: absolute;inset: 0;z-index: 2;pointer-events: none;border-radius: inherit;background: radial-gradient( circle var(--light-falloff,42%) at var(--light-x,50%) var(--light-y,50%),transparent 0,transparent 55%,color-mix(in srgb,var(--bg) calc((1 - var(--light-ambient,0.18)) * 100%),transparent) 100% );transition: background var(--dur-fast,120ms) linear}.normal-btn{position: relative;border-radius: var(--radius-md,0.5rem);background: linear-gradient( to bottom,color-mix(in srgb,var(--light-warm,#fff4e0) 18%,var(--accent)) 0%,var(--accent) 45%,color-mix(in srgb,var(--accent-strong) 70%,#000) 100% );box-shadow: inset 0 1px 0 color-mix(in srgb,var(--light-color,#fff) 55%,transparent),inset 0 -1px 0 color-mix(in srgb,#000 35%,transparent),0 1px 2px color-mix(in srgb,#000 30%,transparent);transition: box-shadow var(--dur-fast,120ms) var(--ease-out,ease-out),transform var(--dur-fast,120ms) var(--ease-out,ease-out)}.normal-btn:active{box-shadow: inset 0 2px 4px color-mix(in srgb,#000 40%,transparent),inset 0 1px 0 color-mix(in srgb,#000 25%,transparent);transform: translateY(1px)}.lit-text{background: radial-gradient( circle at var(--light-x,50%) var(--light-y,0%),color-mix(in srgb,var(--light-color,#fff) 85%,var(--accent)) 0%,var(--accent) 45%,var(--accent-strong) 100% );-webkit-background-clip: text;background-clip: text;color: transparent;-webkit-text-fill-color: transparent;text-shadow: 0 1px 0 color-mix(in srgb,#000 28%,transparent)}@supports not ((-webkit-background-clip: text) or (background-clip: text)){.lit-text{color: var(--accent);-webkit-text-fill-color: currentColor;background: none}}.edge-light{position: relative;isolation: isolate}.edge-light::before{content: "";position: absolute;inset-inline: 0;inset-block-start: 0;block-size: 2px;pointer-events: none;background: linear-gradient( to right,transparent,color-mix(in srgb,var(--rim-color,var(--accent)) 90%,transparent) 50%,transparent );filter: blur(0.5px)}.edge-light-block::before{inset-block-end: 0;inset-block-start: auto}.edge-light-start::before{inset-block: 0;inset-inline-start: 0;inset-inline-end: auto;inline-size: 2px;block-size: auto;background: linear-gradient(to bottom,transparent,color-mix(in srgb,var(--rim-color,var(--accent)) 90%,transparent) 50%,transparent)}.key-warm{background-image: radial-gradient( circle var(--light-falloff,60%) at var(--light-x,30%) var(--light-y,24%),color-mix(in srgb,var(--light-warm,#fff4e0) 55%,transparent),transparent 70% )}.fill-cool{background-image: radial-gradient( circle var(--light-falloff,70%) at calc(100% - var(--light-x,30%)) calc(var(--light-y,24%) + 40%),color-mix(in srgb,var(--light-cool,#dfeaff) 45%,transparent),transparent 72% )}.key-warm.fill-cool,.lit-3point{background-image: radial-gradient(circle var(--light-falloff,60%) at var(--light-x,30%) var(--light-y,24%),color-mix(in srgb,var(--light-warm,#fff4e0) 55%,transparent),transparent 70%),radial-gradient(circle var(--light-falloff,70%) at calc(100% - var(--light-x,30%)) calc(var(--light-y,24%) + 40%),color-mix(in srgb,var(--light-cool,#dfeaff) 45%,transparent),transparent 72%)}.day-cycle{position: relative;isolation: isolate;overflow: hidden}.day-cycle::before{content: "";position: absolute;inset: 0;z-index: -1;pointer-events: none;background: radial-gradient( circle 70% at var(--light-x,50%) var(--light-y,18%),color-mix(in srgb,var(--light-warm,#fff4e0) 50%,transparent),transparent 75% );animation: brn-day-cycle calc(60s / var(--shader-speed,1)) var(--ease-in-out,ease-in-out) infinite}@keyframes brn-day-cycle{0%{--light-x: 12%;--light-y: 40%;opacity: 0.55}50%{--light-x: 50%;--light-y: 12%;opacity: 1}100%{--light-x: 88%;--light-y: 40%;opacity: 0.55}}.point-light{position: relative;isolation: isolate}.point-light::after{content: "";position: absolute;inset: 0;z-index: 3;pointer-events: none;border-radius: inherit;background: radial-gradient( circle calc(4rem * var(--light-intensity,1)) at var(--light-x,50%) var(--light-y,50%),color-mix(in srgb,var(--light-color,#fff) 70%,var(--accent-glow)),color-mix(in srgb,var(--accent-glow) 40%,transparent) 40%,transparent 70% );mix-blend-mode: screen;transition: background var(--dur-fast,120ms) linear}@supports not (mix-blend-mode: screen){.point-light::after{mix-blend-mode: normal;opacity: 0.7}}}@layer render{/*! CSS-CODEBASE · render/bloom — advanced HDR bloom (the render-engine glow core). * A multi-stage light-emission set, DISTINCT from fx/_glow.css's `.fx-bloom`: here a bloom * is treated like a real post-process — threshold the bright parts, blur to a radius, lift * intensity, and tint to --bloom-color. Everything reads the render contract tokens * (--bloom-threshold/-radius/-intensity/-color) so one edit re-blooms the whole universe. * Tints from --accent / --accent-glow / --bloom-color only — never a literal hex. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .bloom-hdr{--_bloom-r: var(--bloom-radius);--_bloom-i: var(--bloom-intensity);--_bloom-c: var(--bloom-color);isolation: isolate;box-shadow: 0 0 calc(var(--_bloom-r) * 0.5) var(--_bloom-c),0 0 calc(var(--_bloom-r) * 1.5) var(--_bloom-c),0 0 calc(var(--_bloom-r) * 3) var(--_bloom-c);filter: drop-shadow(0 0 calc(var(--_bloom-r) * 0.75) var(--_bloom-c)) drop-shadow(0 0 calc(var(--_bloom-r) * 2) var(--_bloom-c)) brightness(calc(1 + var(--_bloom-i) * 0.18))}.bloom-hdr-xs{--bloom-radius: 6px;--bloom-intensity: 0.35}.bloom-hdr-sm{--bloom-radius: 10px;--bloom-intensity: 0.5}.bloom-hdr-md{--bloom-radius: 16px;--bloom-intensity: 0.6}.bloom-hdr-lg{--bloom-radius: 26px;--bloom-intensity: 0.8}.bloom-hdr-xl{--bloom-radius: 40px;--bloom-intensity: 1}.bloom-tint-accent{--bloom-color: var(--accent-glow)}.bloom-tint-strong{--bloom-color: var(--accent-strong)}.bloom-tint-rim{--bloom-color: var(--rim-color)}.bloom-tint-light{--bloom-color: var(--light-warm)}.bloom-tint-hdr{--bloom-color: var(--glow-hdr)}.bloom-soft{filter: var(--filter-bloom-soft)}.bloom-hard{filter: var(--filter-bloom)}.bloom-hard-plus{filter: var(--filter-bloom) drop-shadow(0 0 var(--bloom-radius) var(--bloom-color))}.bloom-soft-plus{filter: var(--filter-bloom-soft) drop-shadow(0 0 calc(var(--bloom-radius) * 2) var(--bloom-color))}.bloom-text{color: var(--accent);text-shadow: 0 0 calc(var(--bloom-radius) * 0.25) var(--bloom-color),0 0 calc(var(--bloom-radius) * 0.75) var(--bloom-color),0 0 calc(var(--bloom-radius) * 1.6) var(--bloom-color)}.bloom-text-white{color: var(--light-color);text-shadow: 0 0 calc(var(--bloom-radius) * 0.4) var(--bloom-color),0 0 calc(var(--bloom-radius) * 1.2) var(--bloom-color),0 0 calc(var(--bloom-radius) * 2.4) var(--accent-glow)}.bloom-text-neon{color: var(--accent);text-shadow: 0 0 calc(var(--bloom-radius) * 0.2) var(--accent),0 0 calc(var(--bloom-radius) * 0.6) var(--bloom-color),0 0 calc(var(--bloom-radius) * 1.4) var(--bloom-color),0 0 calc(var(--bloom-radius) * 2.8) var(--accent-glow)}.bloom-emissive{position: relative;isolation: isolate;background: radial-gradient(120% 140% at 50% 0%,var(--bloom-color),transparent 60%),linear-gradient(160deg,var(--accent-strong),var(--accent));color: var(--on-accent,var(--bg));box-shadow: 0 0 var(--bloom-radius) var(--bloom-color),0 0 calc(var(--bloom-radius) * 2.5) var(--accent-glow)}.bloom-emissive::before{content: "";position: absolute;inset: calc(var(--bloom-radius) * -1.5);z-index: -1;pointer-events: none;border-radius: inherit;background: radial-gradient(closest-side,var(--bloom-color),transparent 72%);opacity: calc(var(--bloom-intensity) * 0.7);filter: blur(calc(var(--bloom-radius) * 0.5))}.bloom-emissive-cool{--bloom-color: var(--light-cool)}.bloom-emissive-warm{--bloom-color: var(--light-warm)}.bloom-threshold{position: relative;isolation: isolate}.bloom-threshold::after{content: "";position: absolute;inset: 0;z-index: 2;pointer-events: none;border-radius: inherit;mix-blend-mode: screen;opacity: var(--bloom-intensity);background: radial-gradient( 70% 60% at var(--light-x) var(--light-y),var(--bloom-color),transparent calc(var(--bloom-threshold) * 100%) )}@supports not (mix-blend-mode: screen){.bloom-threshold::after{mix-blend-mode: normal;opacity: calc(var(--bloom-intensity) * 0.5);background: radial-gradient(70% 60% at var(--light-x) var(--light-y),var(--accent-glow),transparent 70%)}}.bloom-ring{position: relative;isolation: isolate}.bloom-ring::before{content: "";position: absolute;inset: calc(var(--bloom-radius) * -1);z-index: -1;pointer-events: none;border-radius: inherit;border: calc(var(--bloom-radius) * 0.25) solid var(--bloom-color);box-shadow: 0 0 var(--bloom-radius) var(--bloom-color),inset 0 0 var(--bloom-radius) var(--bloom-color);opacity: var(--bloom-intensity);filter: blur(calc(var(--bloom-radius) * 0.15))}.bloom-edge{box-shadow: inset 0 0 calc(var(--bloom-radius) * 0.5) var(--bloom-color),inset 0 0 var(--bloom-radius) var(--accent-glow)}.bloom-edge-out{box-shadow: 0 0 calc(var(--bloom-radius) * 0.5) var(--bloom-color),0 0 var(--bloom-radius) var(--accent-glow)}@keyframes brn-bloom-pulse{0%,100%{--bloom-intensity: 0.35}50%{--bloom-intensity: 1}}.bloom-pulse{animation: brn-bloom-pulse 2.6s var(--ease-in-out,ease-in-out) infinite;box-shadow: 0 0 var(--bloom-radius) var(--bloom-color),0 0 calc(var(--bloom-radius) * 2.4) var(--accent-glow);filter: brightness(calc(1 + var(--bloom-intensity) * 0.25))}.bloom-pulse-text{animation: brn-bloom-pulse 2.6s var(--ease-in-out,ease-in-out) infinite;color: var(--accent);text-shadow: 0 0 calc(var(--bloom-radius) * 0.6) var(--bloom-color),0 0 calc(var(--bloom-radius) * 1.8) var(--accent-glow);filter: brightness(calc(1 + var(--bloom-intensity) * 0.3))}.bloom-pulse-slow{animation-duration: 5s}.bloom-pulse-fast{animation-duration: 1.3s}.bloom-hover{transition: box-shadow var(--dur-base) var(--ease-out),filter var(--dur-base) var(--ease-out)}.bloom-hover:hover,.bloom-hover:focus-visible{box-shadow: 0 0 var(--bloom-radius) var(--bloom-color),0 0 calc(var(--bloom-radius) * 3) var(--accent-glow);filter: brightness(calc(1 + var(--bloom-intensity) * 0.2))}}@layer render{/*! CSS-CODEBASE · render/raster — retro / scan / glitch raster post-FX. * Pixelation, mosaic, CRT scanlines + RGB mask + barrel, ordered dither, chromatic RGB-split, * glitch jitter, posterize, scan-bands and VHS. Distinct from fx/_grain.css (no fx-scanlines/ * fx-halftone reuse). Everything reads the render contract: --raster-size --dither-depth * --chromatic-offset --scanline-gap --scanline-opacity --crt-curve --glitch-amount * --posterize-steps. Tints come from --accent / --fg / --bg only — never a literal hex. * Keyframes are compositor-friendly; reduced-motion is neutralised by the a11y layer. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .fx-pixelate{image-rendering: pixelated;image-rendering: crisp-edges;position: relative;isolation: isolate}.fx-pixelate::after{content: "";position: absolute;inset: 0;z-index: 2;pointer-events: none;mix-blend-mode: multiply;opacity: 0.25;background-image: linear-gradient(to right,rgba(0,0,0,0.18) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,0.18) 1px,transparent 1px);background-size: var(--raster-size) var(--raster-size)}.fx-pixelate-sm{--raster-size: 2px}.fx-pixelate-lg{--raster-size: 8px}.fx-pixelate-xl{--raster-size: 14px}@supports not (mix-blend-mode: multiply){.fx-pixelate::after{mix-blend-mode: normal;opacity: 0.12}}.fx-mosaic{position: relative;isolation: isolate}.fx-mosaic::after{content: "";position: absolute;inset: 0;z-index: 2;pointer-events: none;opacity: 0.3;background-image: linear-gradient(to right,var(--accent-glow) 1px,transparent 1px),linear-gradient(to bottom,var(--accent-glow) 1px,transparent 1px);background-size: calc(var(--raster-size) * 3) calc(var(--raster-size) * 3)}.fx-mosaic-fine{--raster-size: 2px}.fx-mosaic-coarse{--raster-size: 10px}@keyframes brn-crt-flicker{0%,100%{opacity: 1}47%{opacity: 0.96}50%{opacity: 0.92}53%{opacity: 0.97}}.fx-crt{position: relative;isolation: isolate;overflow: hidden;transform: perspective(1200px) rotateX(var(--crt-curve));animation: brn-crt-flicker 4s steps(1,end) infinite}.fx-crt::before{content: "";position: absolute;inset: 0;z-index: 3;pointer-events: none;background-image: repeating-linear-gradient( to bottom,rgba(0,0,0,var(--scanline-opacity)) 0,rgba(0,0,0,var(--scanline-opacity)) 1px,transparent 1px,transparent var(--scanline-gap) )}.fx-crt::after{content: "";position: absolute;inset: 0;z-index: 4;pointer-events: none;mix-blend-mode: color-dodge;opacity: 0.12;background-image: repeating-linear-gradient( to right,rgba(255,0,0,0.5) 0,rgba(0,255,0,0.5) 1px,rgba(0,0,255,0.5) 2px,transparent 3px )}@supports not (mix-blend-mode: color-dodge){.fx-crt::after{mix-blend-mode: normal;opacity: 0.06}}.fx-crt-flat{transform: none}.fx-crt-curved{--crt-curve: 10deg}.fx-crt-amber{--scanline-opacity: 0.24}.fx-dither{position: relative;isolation: isolate}.fx-dither::after{content: "";position: absolute;inset: 0;z-index: 2;pointer-events: none;mix-blend-mode: overlay;opacity: calc(0.5 / var(--dither-depth));background-image: repeating-linear-gradient(45deg,var(--fg) 0,var(--fg) 1px,transparent 1px,transparent 2px),repeating-linear-gradient(-45deg,var(--fg) 0,var(--fg) 1px,transparent 1px,transparent 2px),repeating-linear-gradient(0deg,var(--fg) 0,var(--fg) 1px,transparent 1px,transparent 3px);background-size: calc(var(--raster-size) * 2) calc(var(--raster-size) * 2),var(--raster-size) var(--raster-size),calc(var(--raster-size) * 4) calc(var(--raster-size) * 4)}@supports not (mix-blend-mode: overlay){.fx-dither::after{mix-blend-mode: normal;opacity: calc(0.25 / var(--dither-depth))}}.fx-dither-coarse{--dither-depth: 2}.fx-dither-fine{--dither-depth: 8}.fx-chromatic{position: relative;isolation: isolate;color: var(--fg);text-shadow: calc(var(--chromatic-offset) * -1) 0 0 rgba(255,0,60,0.6),var(--chromatic-offset) 0 0 rgba(0,200,255,0.6)}.fx-chromatic-strong{--chromatic-offset: 4px}.fx-chromatic-svg{filter: var(--filter-chromatic);text-shadow: none}.fx-rgb-shift{position: relative;isolation: isolate}.fx-rgb-shift::before,.fx-rgb-shift::after{content: "";position: absolute;inset: 0;z-index: 1;pointer-events: none;border-radius: inherit;mix-blend-mode: screen;opacity: 0.5}.fx-rgb-shift::before{background: var(--accent);transform: translateX(calc(var(--chromatic-offset) * -1));filter: saturate(1.6) hue-rotate(-40deg)}.fx-rgb-shift::after{background: var(--accent-strong);transform: translateX(var(--chromatic-offset));filter: saturate(1.6) hue-rotate(40deg)}@supports not (mix-blend-mode: screen){.fx-rgb-shift::before,.fx-rgb-shift::after{display: none}}@keyframes brn-glitch-shift{0%,100%{transform: translate(0,0)}20%{transform: translate(calc(var(--glitch-amount) * -1),var(--glitch-amount))}40%{transform: translate(var(--glitch-amount),calc(var(--glitch-amount) * -1))}60%{transform: translate(calc(var(--glitch-amount) * -0.5),0)}80%{transform: translate(var(--glitch-amount),var(--glitch-amount))}}@keyframes brn-glitch-clip{0%{clip-path: inset(10% 0 85% 0)}20%{clip-path: inset(60% 0 20% 0)}40%{clip-path: inset(30% 0 55% 0)}60%{clip-path: inset(80% 0 5% 0)}80%{clip-path: inset(45% 0 40% 0)}100%{clip-path: inset(15% 0 75% 0)}}.fx-glitch{position: relative;isolation: isolate;animation: brn-glitch-shift 0.4s steps(2,end) infinite}.fx-glitch::before,.fx-glitch::after{content: attr(data-text);position: absolute;inset: 0;z-index: 1;pointer-events: none;background: var(--bg)}.fx-glitch::before{color: var(--accent);transform: translateX(calc(var(--glitch-amount) * -1));animation: brn-glitch-clip 0.85s steps(3,end) infinite alternate}.fx-glitch::after{color: var(--accent-strong);transform: translateX(var(--glitch-amount));animation: brn-glitch-clip 1.1s steps(3,end) infinite alternate-reverse}.fx-glitch-soft{--glitch-amount: 2px}.fx-glitch-heavy{--glitch-amount: 7px}.fx-glitch-box{animation: brn-glitch-shift 0.32s steps(2,end) infinite}.fx-posterize{filter: var(--filter-posterize)}.fx-posterize-soft{filter: var(--filter-posterize) contrast(1.05)}.fx-posterize-pop{filter: var(--filter-posterize) saturate(1.4) contrast(1.15)}@keyframes brn-scanband{from{transform: translateY(-120%)}to{transform: translateY(120%)}}.fx-scanband{position: relative;isolation: isolate;overflow: hidden}.fx-scanband::after{content: "";position: absolute;inset-inline: 0;inset-block-start: 0;block-size: calc(var(--scanline-gap) * 8);z-index: 3;pointer-events: none;mix-blend-mode: screen;background: linear-gradient( to bottom,transparent,var(--accent-glow),transparent );opacity: 0.5;animation: brn-scanband 3.5s linear infinite}@supports not (mix-blend-mode: screen){.fx-scanband::after{mix-blend-mode: normal;opacity: 0.3}}.fx-scanband-fast{}.fx-scanband-fast::after{animation-duration: 1.6s}.fx-scanband-slow::after{animation-duration: 7s}@keyframes brn-vhs-track{0%,100%{transform: translateY(0)}50%{transform: translateY(calc(var(--glitch-amount) * 0.5))}}.fx-vhs{position: relative;isolation: isolate;overflow: hidden;filter: saturate(1.25) contrast(1.05);animation: brn-vhs-track 6s ease-in-out infinite}.fx-vhs::before{content: "";position: absolute;inset: 0;z-index: 3;pointer-events: none;background-image: repeating-linear-gradient( to bottom,rgba(0,0,0,var(--scanline-opacity)) 0,transparent 2px,transparent var(--scanline-gap) )}.fx-vhs::after{content: "";position: absolute;inset-inline: 0;block-size: calc(var(--scanline-gap) * 4);inset-block-start: 18%;z-index: 4;pointer-events: none;mix-blend-mode: screen;opacity: 0.35;background: linear-gradient(to bottom,transparent,var(--accent-glow),transparent);animation: brn-scanband 5s linear infinite}@supports not (mix-blend-mode: screen){.fx-vhs::after{mix-blend-mode: normal;opacity: 0.2}}}@layer render{/*! CSS-CODEBASE · render/hdr-color — wide-gamut (P3) colour + cinematic tone grading. * HDR highlight lift on capable displays, Display-P3 accents, exposure/contrast/saturation * grading, temperature/tint/hue shifts — all token-driven from the render contract * (--hdr-boost --exposure --gamma --contrast-grade --saturation-grade --temperature --tint * --hue-shift --accent-hdr --glow-hdr). Tints derive from --accent / --accent-glow only. * EVERY cutting-edge feature (color(display-p3 …), @media dynamic-range:high) ships its sRGB * fallback FIRST, then the enhanced override — so it always degrades gracefully. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .hdr{filter: none}@media (dynamic-range: high){.hdr{filter: brightness(var(--hdr-boost)) saturate(calc(1 + (var(--hdr-boost) - 1) * 1.5))}}.hdr-boost-soft{--hdr-boost: 1.08}.hdr-boost-mid{--hdr-boost: 1.2}.hdr-boost-max{--hdr-boost: 1.4}.hdr-glow{box-shadow: 0 0 var(--bloom-radius,16px) var(--glow-hdr)}@media (dynamic-range: high){.hdr-glow{box-shadow: 0 0 var(--bloom-radius,16px) var(--glow-hdr),0 0 calc(var(--bloom-radius,16px) * 2.5) var(--glow-hdr);filter: brightness(var(--hdr-boost))}}.gamut-p3{background: var(--accent);color: var(--on-accent,var(--bg))}@supports (color: color(display-p3 1 1 1)){.gamut-p3{background: color(display-p3 0.32 0.62 0.94)}.gamut-p3-vivid{background: color(display-p3 0.95 0.22 0.42)}.gamut-p3-lime{background: color(display-p3 0.55 0.95 0.28)}.gamut-p3-cyan{background: color(display-p3 0.18 0.92 0.96)}.gamut-p3-violet{background: color(display-p3 0.55 0.28 0.98)}.gamut-p3-gold{background: color(display-p3 0.98 0.78 0.22)}}.gamut-p3-vivid{background: var(--accent-strong)}.gamut-p3-lime{background: var(--accent)}.gamut-p3-cyan{background: var(--accent)}.gamut-p3-violet{background: var(--accent-strong)}.gamut-p3-gold{background: var(--accent)}.wide-accent{background-image: linear-gradient(135deg,var(--accent),var(--accent-strong))}@supports (color: color(display-p3 1 1 1)){.wide-accent{background-image: linear-gradient( 135deg in oklch,color(display-p3 0.3 0.6 0.95),color(display-p3 0.62 0.28 0.96) )}}.tone-map{filter: contrast(var(--contrast-grade)) saturate(var(--saturation-grade)) brightness(var(--exposure))}.tone-cinema{--contrast-grade: 1.18;--saturation-grade: 1.12;--exposure: 0.98}.tone-flat{--contrast-grade: 0.9;--saturation-grade: 0.92;--exposure: 1.04}.tone-vivid{--contrast-grade: 1.25;--saturation-grade: 1.4;--exposure: 1.02}.tone-bleach{--contrast-grade: 1.3;--saturation-grade: 0.7;--exposure: 1.08}.tone-crush{--contrast-grade: 1.5;--saturation-grade: 1.1;--exposure: 0.92}.expose{filter: brightness(var(--exposure))}.expose-up{--exposure: 1.15}.expose-down{--exposure: 0.85}.expose-blown{--exposure: 1.3}.grade-temp{filter: hue-rotate(var(--temperature))}.grade-warm{--temperature: 12deg}.grade-cool{--temperature: -12deg}.grade-tint{filter: sepia(var(--tint)) hue-rotate(var(--hue-shift))}.grade-tint-green{--tint: 0.25;--hue-shift: 70deg}.grade-tint-magenta{--tint: 0.25;--hue-shift: -50deg}.grade-hue{filter: hue-rotate(var(--hue-shift))}.hdr-white{color: #fff}@supports (color: color(display-p3 1 1 1)){.hdr-white{color: color(display-p3 1 1 1)}}@media (dynamic-range: high){.hdr-white{color: #fff;text-shadow: 0 0 calc(var(--bloom-radius,16px) * 0.5) var(--glow-hdr);filter: brightness(var(--hdr-boost))}}.hdr-white-surface{background: var(--surface,#fff)}@supports (color: color(display-p3 1 1 1)){.hdr-white-surface{background: color(display-p3 1 1 1)}}.hdr-cinematic{filter: contrast(var(--contrast-grade)) saturate(var(--saturation-grade)) brightness(var(--exposure)) hue-rotate(var(--temperature));--contrast-grade: 1.15;--saturation-grade: 1.18;--exposure: 1}@media (dynamic-range: high){.hdr-cinematic{filter: contrast(var(--contrast-grade)) saturate(calc(var(--saturation-grade) * var(--hdr-boost))) brightness(calc(var(--exposure) * var(--hdr-boost))) hue-rotate(var(--temperature))}}}@layer render{/*! CSS-CODEBASE · render/postfx — the composite "camera" post-processing rig. * Each `.cam-*` preset is a full virtual camera: a `filter:` colour-grade driven by the * render-engine tokens (--exposure / --contrast-grade / --saturation-grade / --temperature) * PLUS decorative ::before/::after overlays (vignette, grain, chromatic edge, letterbox bars, * light-leak) that sit ABOVE the content but never intercept the pointer. Drop a `.post` * wrapper around any frame, then add the lens. Everything tints from --accent + the SVG * filter handles; nothing is hard-coded. Reduced-motion is neutralised globally by the a11y layer. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .post{position: relative;isolation: isolate;overflow: hidden;border-radius: inherit;--cam-exposure: var(--exposure,1);--cam-contrast: var(--contrast-grade,1);--cam-saturation: var(--saturation-grade,1);--cam-temperature: var(--temperature,0deg);--cam-vignette: 0.55;--cam-grain-opacity: 0.12;--cam-leak-color: var(--accent-glow);--cam-bar-size: 8%}.post::before,.post::after{content: "";position: absolute;inset: 0;z-index: 2;pointer-events: none;border-radius: inherit}.post > img,.post > video,.post > picture,.post > .post-frame{display: block;inline-size: 100%;block-size: 100%;object-fit: cover}.post{filter: brightness(var(--cam-exposure)) contrast(var(--cam-contrast)) saturate(var(--cam-saturation)) hue-rotate(var(--cam-temperature))}.cam-cinema{--cam-exposure: 1.02;--cam-contrast: 1.14;--cam-saturation: 1.12;--cam-temperature: -6deg;--cam-vignette: 0.6}.cam-cinema::before{background: linear-gradient(180deg,color-mix(in srgb,var(--accent) 22%,transparent) 0%,transparent 38%,transparent 64%,color-mix(in srgb,var(--accent-strong) 26%,transparent) 100%);mix-blend-mode: soft-light;opacity: 0.9}.cam-cinema::after{background: linear-gradient(to bottom,var(--fog-color) 0,var(--fog-color) var(--cam-bar-size),transparent var(--cam-bar-size),transparent calc(100% - var(--cam-bar-size)),var(--fog-color) calc(100% - var(--cam-bar-size)),var(--fog-color) 100%);box-shadow: inset 0 0 calc(60px + 8vw) rgba(0,0,0,var(--cam-vignette))}.cam-anamorphic{--cam-contrast: 1.1;--cam-saturation: 1.08;--cam-bar-size: 11%}.cam-anamorphic::before{background: radial-gradient(120% 6% at 50% 42%,color-mix(in srgb,var(--accent-glow) 90%,transparent) 0%,transparent 70%);mix-blend-mode: screen;opacity: 0.85}.cam-anamorphic::after{background: linear-gradient(to bottom,var(--fog-color) 0,var(--fog-color) var(--cam-bar-size),transparent var(--cam-bar-size),transparent calc(100% - var(--cam-bar-size)),var(--fog-color) calc(100% - var(--cam-bar-size)),var(--fog-color) 100%);box-shadow: inset 0 0 calc(50px + 6vw) rgba(0,0,0,0.5)}.cam-vintage{--cam-exposure: 1.08;--cam-contrast: 0.9;--cam-saturation: 0.82;--cam-temperature: 12deg;--cam-vignette: 0.62;--cam-grain-opacity: 0.22}.cam-vintage::before{background: radial-gradient(140% 120% at 18% 8%,color-mix(in srgb,var(--cam-leak-color) 60%,transparent) 0%,transparent 42%),linear-gradient(0deg,color-mix(in srgb,var(--accent) 14%,transparent),color-mix(in srgb,var(--accent) 14%,transparent));mix-blend-mode: soft-light;opacity: 0.95}.cam-vintage::after{box-shadow: inset 0 0 calc(70px + 9vw) rgba(0,0,0,var(--cam-vignette))}@supports (filter: url(#brn-grain)){.cam-vintage{filter: brightness(var(--cam-exposure)) contrast(var(--cam-contrast)) saturate(var(--cam-saturation)) hue-rotate(var(--cam-temperature)) var(--filter-grain)}}.cam-infrared{filter: var(--filter-thermal)}.cam-infrared::after{background: repeating-linear-gradient(0deg,transparent 0,transparent var(--scanline-gap,3px),color-mix(in srgb,var(--accent) 30%,transparent) calc(var(--scanline-gap,3px) + 1px));mix-blend-mode: overlay;opacity: var(--scanline-opacity,0.18)}.cam-noir{filter: grayscale(1) contrast(1.3) brightness(0.95)}.cam-noir::after{box-shadow: inset 0 0 calc(60px + 8vw) rgba(0,0,0,0.7);background: linear-gradient(115deg,transparent 0%,color-mix(in srgb,var(--accent) 18%,transparent) 48%,transparent 56%);mix-blend-mode: soft-light}.cam-night-vision{filter: brightness(1.4) contrast(1.2) saturate(1.6) hue-rotate(60deg)}.cam-night-vision::before{background: radial-gradient(120% 120% at 50% 50%,transparent 40%,color-mix(in srgb,var(--accent) 40%,#003b00) 100%);mix-blend-mode: screen;opacity: 0.75}.cam-night-vision::after{background: repeating-linear-gradient(0deg,transparent 0,transparent 2px,rgba(0,0,0,0.35) 3px);mix-blend-mode: multiply;opacity: 0.5}.cam-thermal{filter: var(--filter-thermal) contrast(1.1)}.cam-thermal::after{background: linear-gradient(0deg,transparent calc(50% - 1px),color-mix(in srgb,var(--accent) 50%,transparent) 50%,transparent calc(50% + 1px)),linear-gradient(90deg,transparent calc(50% - 1px),color-mix(in srgb,var(--accent) 50%,transparent) 50%,transparent calc(50% + 1px));mix-blend-mode: screen;opacity: 0.4}.cam-dream{--cam-exposure: 1.1;--cam-saturation: 1.1;filter: brightness(var(--cam-exposure)) saturate(var(--cam-saturation)) blur(0.4px)}.cam-dream::before{background: radial-gradient(80% 70% at var(--light-x,50%) var(--light-y,38%),color-mix(in srgb,var(--bloom-color) 70%,transparent) 0%,transparent 65%);mix-blend-mode: screen;opacity: var(--bloom-intensity,0.6)}@supports (filter: url(#brn-bloom-soft)){.cam-dream{filter: brightness(var(--cam-exposure)) saturate(var(--cam-saturation)) var(--filter-bloom-soft)}}.cam-cctv{filter: saturate(0.55) contrast(1.08) brightness(0.96)}.cam-cctv::before{background: repeating-linear-gradient(0deg,transparent 0,transparent 2px,rgba(0,0,0,0.18) 3px);mix-blend-mode: multiply;opacity: 0.6}.cam-cctv::after{box-shadow: inset 0 0 calc(50px + 7vw) rgba(0,0,0,0.6)}.cam-cctv > .post-osd,.post > .post-osd{position: absolute;inset-block-start: var(--space-2,0.5rem);inset-inline-start: var(--space-2,0.5rem);z-index: 3;pointer-events: none;font-family: var(--font-mono,ui-monospace,monospace);font-size: var(--text-sm,0.85rem);letter-spacing: 0.04em;color: color-mix(in srgb,var(--accent) 85%,#fff);text-shadow: 0 1px 2px rgba(0,0,0,0.8)}.post > .post-osd.is-end{inset-inline: auto var(--space-2,0.5rem)}@supports (filter: url(#brn-chromatic)){.cam-chroma-edge::before{background: radial-gradient(120% 120% at 50% 50%,transparent 60%,color-mix(in srgb,var(--accent) 50%,transparent) 100%);mix-blend-mode: screen;filter: var(--filter-chromatic);opacity: 0.6}}}@layer render{/*! CSS-CODEBASE · render/depth — the volumetric stage: real perspective, layered Z, * depth-of-field, atmospheric fog, isometric projection, extruded type, 3D card stacks, * and gentle floating. Everything reads the render-engine depth tokens (--perspective / * --dof-blur / --fog-color / --fog-density) and stays compositor-friendly — loops touch * ONLY transform / opacity / filter. Distinct `depth-*`, `dof-*`, `fog`, `iso`, `extrude-3d` * names so nothing in fx/3d is redefined. Reduced-motion handled by the a11y layer. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .depth-scene{perspective: var(--perspective,1000px);perspective-origin: var(--light-x,50%) var(--light-y,30%);transform-style: preserve-3d}.depth-layer{transform-style: preserve-3d;transition: transform var(--dur-base,240ms) var(--ease-out,ease);will-change: transform}.depth-1{transform: translateZ(-120px) scale(1.12)}.depth-2{transform: translateZ(-60px) scale(1.06)}.depth-3{transform: translateZ(0)}.depth-4{transform: translateZ(40px) scale(0.97)}.depth-5{transform: translateZ(90px) scale(0.93)}.dof-near{filter: blur(var(--dof-blur,6px));transform: translateZ(70px)}.dof-far{filter: blur(var(--dof-blur,6px));transform: translateZ(-90px) scale(1.08)}.dof-focus{filter: none;transform: translateZ(0)}.depth-scene:hover .dof-far{filter: blur(0)}.depth-scene:hover .dof-near{filter: blur(calc(var(--dof-blur,6px) * 1.6))}.fog{position: relative;isolation: isolate}.fog::after{content: "";position: absolute;inset: 0;z-index: 5;pointer-events: none;background: linear-gradient(to top,color-mix(in srgb,var(--fog-color) calc(var(--fog-density,0.6) * 100%),transparent) 0%,color-mix(in srgb,var(--fog-color) calc(var(--fog-density,0.6) * 40%),transparent) 45%,transparent 90%);border-radius: inherit}.fog-volumetric::after{background: radial-gradient(120% 90% at 50% 120%,color-mix(in srgb,var(--fog-color) calc(var(--fog-density,0.6) * 90%),transparent) 0%,transparent 60%),linear-gradient(to top,color-mix(in srgb,var(--fog-color) calc(var(--fog-density,0.6) * 70%),transparent) 0%,transparent 70%)}.iso{transform: rotateX(54.736deg) rotateZ(45deg);transform-style: preserve-3d;transition: transform var(--dur-slow,420ms) var(--ease-in-out,ease)}.iso-30{transform: rotateX(60deg) rotateZ(-45deg) scale(1.04);transform-style: preserve-3d}.depth-scene:hover .iso,.iso:hover{transform: rotateX(0) rotateZ(0)}.extrude-3d{--extrude-depth: 6;color: var(--accent);text-shadow: 1px 1px 0 color-mix(in srgb,var(--accent-strong) 90%,#000),2px 2px 0 color-mix(in srgb,var(--accent-strong) 80%,#000),3px 3px 0 color-mix(in srgb,var(--accent-strong) 70%,#000),4px 4px 0 color-mix(in srgb,var(--accent-strong) 60%,#000),5px 5px 0 color-mix(in srgb,var(--accent-strong) 50%,#000),6px 6px 10px rgba(0,0,0,0.45)}.extrude-3d-gloss{color: var(--accent);text-shadow: 0 -1px 0 var(--accent-glow),1px 1px 0 color-mix(in srgb,var(--accent-strong) 85%,#000),2px 2px 0 color-mix(in srgb,var(--accent-strong) 70%,#000),3px 3px 0 color-mix(in srgb,var(--accent-strong) 55%,#000),4px 4px 12px rgba(0,0,0,0.5)}.card-stack-3d{position: relative;transform-style: preserve-3d;transition: transform var(--dur-base,240ms) var(--ease-out,ease)}.card-stack-3d > *{transition: transform var(--dur-base,240ms) var(--ease-spring,cubic-bezier(.34,1.56,.64,1));will-change: transform}.card-stack-3d > :nth-child(1){transform: translateZ(24px)}.card-stack-3d > :nth-child(2){transform: translateZ(0) translateY(8px) scale(0.97)}.card-stack-3d > :nth-child(3){transform: translateZ(-24px) translateY(16px) scale(0.94)}.card-stack-3d > :nth-child(n+4){transform: translateZ(-48px) translateY(24px) scale(0.91)}.depth-scene:hover .card-stack-3d > :nth-child(2),.card-stack-3d:hover > :nth-child(2){transform: translateZ(0) translateX(40%) rotateZ(6deg)}.depth-scene:hover .card-stack-3d > :nth-child(3),.card-stack-3d:hover > :nth-child(3){transform: translateZ(-24px) translateX(-40%) rotateZ(-6deg)}.tilt-parallax{transform-style: preserve-3d;transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition: transform var(--dur-base,240ms) var(--ease-out,ease);will-change: transform}.tilt-parallax > .par-back{transform: translateZ(-80px) scale(1.1)}.tilt-parallax > .par-mid{transform: translateZ(-30px) scale(1.04)}.tilt-parallax > .par-base{transform: translateZ(0)}.tilt-parallax > .par-front{transform: translateZ(60px)}.tilt-parallax > .par-pop{transform: translateZ(110px)}.float-z{transform-style: preserve-3d;animation: brn-float-z 6s var(--ease-in-out,ease-in-out) infinite;will-change: transform}.float-z.is-slow{animation-duration: 9s}.float-z.is-delay-1{animation-delay: -1.5s}.float-z.is-delay-2{animation-delay: -3s}.float-z.is-delay-3{animation-delay: -4.5s}@keyframes brn-float-z{0%,100%{transform: translateZ(0) translateY(0)}50%{transform: translateZ(40px) translateY(-6px)}}.float-z-spin{transform-style: preserve-3d;animation: brn-float-z-spin 14s linear infinite;will-change: transform}@keyframes brn-float-z-spin{0%{transform: rotateY(0) translateZ(20px)}50%{transform: rotateY(180deg) translateZ(60px)}100%{transform: rotateY(360deg) translateZ(20px)}}}@layer render{/*! CSS-CODEBASE · render/particles — pure-CSS particle FIELDS. Each field is a handful of * layered pseudo-elements (box-shadow constellations + tiling radial-gradients) drifting on * `brn-` keyframes — deliberately lightweight: a few layers, never thousands of shadows. * Every field reads --particle-color / --particle-speed / --particle-size so it re-tints per * theme and re-times from one knob. A `.particle-canvas` hook is provided for an optional * JS/canvas upgrade. Loops use only transform / opacity; the a11y layer pauses them. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .particle-field{position: relative;overflow: hidden;isolation: isolate;pointer-events: none;--pf-period: calc(18s / var(--particle-speed,1));--pf-size: var(--particle-size,2px);--pf-color: var(--particle-color,var(--accent))}.particle-field::before,.particle-field::after{content: "";position: absolute;inset: -10%;z-index: 0;pointer-events: none}.particle-canvas{position: absolute;inset: 0;z-index: 0;inline-size: 100%;block-size: 100%;pointer-events: none;color: var(--particle-color,var(--accent))}.particles-stars::before,.particles-stars::after{background-image: radial-gradient(var(--pf-size) var(--pf-size) at 20% 30%,var(--pf-color),transparent 60%),radial-gradient(var(--pf-size) var(--pf-size) at 75% 18%,var(--pf-color),transparent 60%),radial-gradient(var(--pf-size) var(--pf-size) at 40% 70%,var(--pf-color),transparent 60%),radial-gradient(var(--pf-size) var(--pf-size) at 88% 60%,var(--pf-color),transparent 60%),radial-gradient(var(--pf-size) var(--pf-size) at 58% 90%,var(--pf-color),transparent 60%),radial-gradient(var(--pf-size) var(--pf-size) at 12% 88%,var(--pf-color),transparent 60%);background-repeat: repeat;background-size: 220px 220px;animation: brn-pf-twinkle var(--pf-period) var(--ease-in-out,ease-in-out) infinite}.particles-stars::after{background-size: 340px 340px;opacity: 0.6;animation-duration: calc(var(--pf-period) * 1.7);animation-delay: calc(var(--pf-period) / -2)}.particles-snow::before,.particles-snow::after{background-image: radial-gradient(calc(var(--pf-size) * 1.5) calc(var(--pf-size) * 1.5) at 15% 0%,var(--pf-color),transparent 65%),radial-gradient(var(--pf-size) var(--pf-size) at 45% 0%,var(--pf-color),transparent 65%),radial-gradient(calc(var(--pf-size) * 1.2) calc(var(--pf-size) * 1.2) at 70% 0%,var(--pf-color),transparent 65%),radial-gradient(var(--pf-size) var(--pf-size) at 90% 0%,var(--pf-color),transparent 65%);background-repeat: repeat;background-size: 180px 200px;opacity: 0.85;animation: brn-pf-fall var(--pf-period) linear infinite}.particles-snow::after{background-size: 260px 300px;opacity: 0.5;animation-duration: calc(var(--pf-period) * 1.5)}.particles-embers::before,.particles-embers::after{background-image: radial-gradient(calc(var(--pf-size) * 1.4) calc(var(--pf-size) * 1.4) at 25% 100%,color-mix(in srgb,var(--pf-color) 90%,#ff7b00),transparent 60%),radial-gradient(var(--pf-size) var(--pf-size) at 55% 100%,color-mix(in srgb,var(--pf-color) 80%,#ffae00),transparent 60%),radial-gradient(calc(var(--pf-size) * 1.2) calc(var(--pf-size) * 1.2) at 80% 100%,color-mix(in srgb,var(--pf-color) 85%,#ff5a00),transparent 60%);background-repeat: repeat;background-size: 200px 240px;mix-blend-mode: screen;animation: brn-pf-rise var(--pf-period) ease-in infinite}.particles-embers::after{background-size: 300px 320px;opacity: 0.6;animation-duration: calc(var(--pf-period) * 1.4);animation-delay: calc(var(--pf-period) / -3)}.particles-bokeh::before,.particles-bokeh::after{background-image: radial-gradient(calc(var(--pf-size) * 14) calc(var(--pf-size) * 14) at 22% 35%,color-mix(in srgb,var(--pf-color) 35%,transparent),transparent 70%),radial-gradient(calc(var(--pf-size) * 10) calc(var(--pf-size) * 10) at 70% 60%,color-mix(in srgb,var(--accent-glow) 80%,transparent),transparent 70%),radial-gradient(calc(var(--pf-size) * 18) calc(var(--pf-size) * 18) at 85% 20%,color-mix(in srgb,var(--pf-color) 25%,transparent),transparent 70%);background-repeat: repeat;background-size: 520px 520px;filter: blur(2px);mix-blend-mode: screen;animation: brn-pf-drift var(--pf-period) var(--ease-in-out,ease-in-out) infinite}.particles-bokeh::after{background-size: 700px 700px;opacity: 0.5;animation-duration: calc(var(--pf-period) * 1.8);animation-direction: reverse}.particles-confetti::before,.particles-confetti::after{background-image: linear-gradient(45deg,var(--pf-color) 0 100%),linear-gradient(45deg,var(--accent-strong) 0 100%),linear-gradient(45deg,var(--accent-glow) 0 100%);background-repeat: repeat;background-size: calc(var(--pf-size) * 4) calc(var(--pf-size) * 4),calc(var(--pf-size) * 4) calc(var(--pf-size) * 4),calc(var(--pf-size) * 4) calc(var(--pf-size) * 4);background-position: 10% 0%,55% 0%,85% 0%;opacity: 0.9;animation: brn-pf-flutter var(--pf-period) linear infinite}.particles-confetti::after{animation-duration: calc(var(--pf-period) * 1.3);animation-delay: calc(var(--pf-period) / -4);opacity: 0.6}.particles-matrix::before,.particles-matrix::after{background-image: repeating-linear-gradient(0deg,var(--pf-color) 0,var(--pf-color) calc(var(--pf-size) * 2),transparent calc(var(--pf-size) * 2),transparent calc(var(--pf-size) * 7));background-repeat: repeat;background-size: calc(var(--pf-size) * 6) 160px;mix-blend-mode: screen;opacity: 0.65;-webkit-mask-image: repeating-linear-gradient(90deg,#000 0 6%,transparent 6% 14%);mask-image: repeating-linear-gradient(90deg,#000 0 6%,transparent 6% 14%);animation: brn-pf-rain var(--pf-period) linear infinite}.particles-matrix::after{background-size: calc(var(--pf-size) * 6) 240px;-webkit-mask-image: repeating-linear-gradient(90deg,transparent 0 8%,#000 8% 13%);mask-image: repeating-linear-gradient(90deg,transparent 0 8%,#000 8% 13%);animation-duration: calc(var(--pf-period) * 0.7);opacity: 0.4}@supports not (mask-image: linear-gradient(#000,#000)){.particles-matrix::before,.particles-matrix::after{opacity: 0.3}}.particles-dust::before,.particles-dust::after{background-image: radial-gradient(var(--pf-size) var(--pf-size) at 10% 25%,var(--pf-color),transparent 70%),radial-gradient(var(--pf-size) var(--pf-size) at 35% 60%,var(--pf-color),transparent 70%),radial-gradient(var(--pf-size) var(--pf-size) at 65% 40%,var(--pf-color),transparent 70%),radial-gradient(var(--pf-size) var(--pf-size) at 85% 75%,var(--pf-color),transparent 70%);background-repeat: repeat;background-size: 160px 160px;opacity: 0.5;animation: brn-pf-current var(--pf-period) linear infinite}.particles-dust::after{background-size: 240px 240px;opacity: 0.3;animation-duration: calc(var(--pf-period) * 1.6);animation-direction: reverse}.particles-fireflies::before,.particles-fireflies::after{background-image: radial-gradient(calc(var(--pf-size) * 2) calc(var(--pf-size) * 2) at 28% 40%,color-mix(in srgb,var(--pf-color) 90%,#fff3b0),transparent 55%),radial-gradient(calc(var(--pf-size) * 1.6) calc(var(--pf-size) * 1.6) at 72% 30%,color-mix(in srgb,var(--pf-color) 90%,#fff3b0),transparent 55%),radial-gradient(calc(var(--pf-size) * 2.2) calc(var(--pf-size) * 2.2) at 55% 78%,color-mix(in srgb,var(--pf-color) 90%,#fff3b0),transparent 55%);background-repeat: repeat;background-size: 300px 280px;mix-blend-mode: screen;filter: drop-shadow(0 0 6px var(--accent-glow));animation: brn-pf-wander calc(var(--pf-period) * 1.2) var(--ease-in-out,ease-in-out) infinite,brn-pf-twinkle calc(var(--pf-period) / 3) ease-in-out infinite}.particles-fireflies::after{background-size: 420px 400px;opacity: 0.6;animation-duration: calc(var(--pf-period) * 2),calc(var(--pf-period) / 2.3);animation-delay: calc(var(--pf-period) / -2),0s}@keyframes brn-pf-twinkle{0%,100%{opacity: 0.35}50%{opacity: 1}}@keyframes brn-pf-fall{0%{transform: translate3d(0,-12%,0)}100%{transform: translate3d(-6%,112%,0)}}@keyframes brn-pf-rise{0%{transform: translate3d(0,0,0);opacity: 0}20%{opacity: 1}100%{transform: translate3d(4%,-120%,0);opacity: 0}}@keyframes brn-pf-drift{0%,100%{transform: translate3d(0,0,0) scale(1)}50%{transform: translate3d(3%,-4%,0) scale(1.08)}}@keyframes brn-pf-flutter{0%{transform: translate3d(0,-12%,0) rotate(0deg)}100%{transform: translate3d(8%,112%,0) rotate(220deg)}}@keyframes brn-pf-rain{0%{transform: translate3d(0,-160px,0)}100%{transform: translate3d(0,160px,0)}}@keyframes brn-pf-current{0%{transform: translate3d(-10%,0,0)}100%{transform: translate3d(10%,-4%,0)}}@keyframes brn-pf-wander{0%,100%{transform: translate3d(0,0,0)}25%{transform: translate3d(4%,-3%,0)}50%{transform: translate3d(-3%,2%,0)}75%{transform: translate3d(2%,4%,0)}}}@layer render{/*! CSS-CODEBASE · render/environment — full-bleed animated backdrops. Each `.env-*` is built * to drop in as a stage layer (`position:absolute; inset:0; z-index:-1`-friendly) behind your * content, painted from conic / mesh / radial gradients + masks and tinted by --accent / * --accent-strong / --accent-glow and the render light tokens (--light-x / --light-y). * Cutting-edge bits (mask, conic spin via @property) are @supports-guarded with a flat * gradient fallback; motion loops touch only transform / opacity / filter / background-position * and are paused by the a11y layer under reduced-motion. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ [class*="env-"]{position: absolute;inset: 0;z-index: -1;overflow: hidden;pointer-events: none;--env-period: 24s}.env-aurora{background: radial-gradient(120% 80% at 50% 120%,var(--bg) 0%,transparent 60%),conic-gradient(from var(--angle,200deg) at 50% 30%,transparent 0deg,color-mix(in srgb,var(--accent) 55%,transparent) 60deg,color-mix(in srgb,var(--accent-strong) 70%,transparent) 140deg,var(--accent-glow) 200deg,transparent 300deg);background-color: var(--bg);filter: blur(8px) saturate(1.2);-webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 55%,transparent 90%);mask-image: linear-gradient(to bottom,#000 0%,#000 55%,transparent 90%);animation: brn-env-aurora var(--env-period) var(--ease-in-out,ease-in-out) infinite}@supports not (mask-image: linear-gradient(#000,#000)){.env-aurora{opacity: 0.7}}.env-nebula{background-color: var(--bg);background-image: radial-gradient(50% 60% at 25% 30%,color-mix(in srgb,var(--accent) 45%,transparent),transparent 60%),radial-gradient(45% 55% at 75% 25%,color-mix(in srgb,var(--accent-strong) 40%,transparent),transparent 65%),radial-gradient(60% 70% at 60% 80%,var(--accent-glow),transparent 70%),radial-gradient(40% 50% at 15% 85%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 60%);background-size: 200% 200%;filter: blur(6px) contrast(1.05);animation: brn-env-billow calc(var(--env-period) * 1.6) var(--ease-in-out,ease-in-out) infinite}.env-sky{--sky-phase: 0;background: linear-gradient(to bottom,color-mix(in srgb,var(--accent-glow) calc((1 - var(--sky-phase)) * 100%),var(--bg)) 0%,color-mix(in srgb,var(--accent) 40%,var(--bg)) 45%,var(--bg) 100%);animation: brn-env-daynight calc(var(--env-period) * 2.5) var(--ease-in-out,ease-in-out) infinite}.env-sun{background: radial-gradient(circle at var(--light-x,50%) var(--light-y,30%),#fff 0,var(--accent-glow) 4%,color-mix(in srgb,var(--accent) 70%,transparent) 9%,transparent 26%),radial-gradient(circle at var(--light-x,50%) var(--light-y,30%),color-mix(in srgb,var(--accent-glow) 60%,transparent) 0,transparent 60%);background-color: var(--bg);animation: brn-env-pulse calc(var(--env-period) / 4) var(--ease-in-out,ease-in-out) infinite}.env-moon{background: radial-gradient(circle at var(--light-x,50%) var(--light-y,28%),color-mix(in srgb,#fff 90%,var(--accent)) 0,color-mix(in srgb,#fff 70%,var(--accent)) 3.5%,transparent 8%),radial-gradient(circle at var(--light-x,50%) var(--light-y,28%),color-mix(in srgb,var(--accent-glow) 40%,transparent) 0,transparent 30%);background-color: var(--bg)}.env-godrays{background: conic-gradient(from 0deg at var(--light-x,50%) var(--light-y,12%),transparent 0deg,color-mix(in srgb,var(--accent-glow) 55%,transparent) 3deg,transparent 6deg,transparent 14deg,color-mix(in srgb,var(--accent) 35%,transparent) 17deg,transparent 20deg);background-color: transparent;-webkit-mask-image: radial-gradient(120% 120% at var(--light-x,50%) var(--light-y,12%),#000 0%,transparent 75%);mask-image: radial-gradient(120% 120% at var(--light-x,50%) var(--light-y,12%),#000 0%,transparent 75%);mix-blend-mode: screen;filter: blur(3px);animation: brn-env-rays calc(var(--env-period) * 1.2) linear infinite}@supports not (mask-image: radial-gradient(#000,#000)){.env-godrays{opacity: 0.4}}.env-caustics{background-color: color-mix(in srgb,var(--accent-strong) 30%,var(--bg));background-image: radial-gradient(40% 30% at 20% 30%,var(--accent-glow),transparent 60%),radial-gradient(35% 28% at 70% 50%,color-mix(in srgb,var(--accent) 50%,transparent),transparent 60%),radial-gradient(45% 35% at 45% 80%,var(--accent-glow),transparent 65%);background-size: 180% 180%,150% 150%,200% 200%;filter: blur(4px) contrast(1.1);mix-blend-mode: screen;animation: brn-env-caustics calc(var(--env-period) / 2) var(--ease-in-out,ease-in-out) infinite}@supports (filter: url(#brn-liquid)){.env-caustics.is-liquid{filter: url(#brn-liquid) contrast(1.1)}}.env-grid-floor{--grid-line: color-mix(in srgb,var(--accent) 70%,transparent);perspective: var(--perspective,1000px);background: linear-gradient(to bottom,var(--bg) 0%,color-mix(in srgb,var(--accent-strong) 20%,var(--bg)) 100%)}.env-grid-floor::after{content: "";position: absolute;inset: 50% -50% -10% -50%;background-image: repeating-linear-gradient(0deg,transparent 0 39px,var(--grid-line) 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,var(--grid-line) 39px 40px);background-size: 40px 40px;transform: rotateX(78deg);transform-origin: top center;-webkit-mask-image: linear-gradient(to bottom,transparent 0%,#000 30%);mask-image: linear-gradient(to bottom,transparent 0%,#000 30%);animation: brn-env-grid 6s linear infinite}@supports not (mask-image: linear-gradient(#000,#000)){.env-grid-floor::after{opacity: 0.5}}.env-fog{background-color: transparent;background-image: radial-gradient(60% 50% at 20% 60%,color-mix(in srgb,var(--fog-color) calc(var(--fog-density,0.6) * 90%),transparent),transparent 70%),radial-gradient(55% 45% at 75% 70%,color-mix(in srgb,var(--fog-color) calc(var(--fog-density,0.6) * 80%),transparent),transparent 70%),radial-gradient(70% 60% at 50% 90%,color-mix(in srgb,var(--fog-color) calc(var(--fog-density,0.6) * 70%),transparent),transparent 75%);background-size: 200% 200%;filter: blur(10px);animation: brn-env-roll calc(var(--env-period) * 1.4) linear infinite}.env-starfield{--star: var(--particle-color,var(--accent));background-color: var(--bg);background-image: radial-gradient(1px 1px at 12% 22%,var(--star),transparent 60%),radial-gradient(1px 1px at 38% 8%,var(--star),transparent 60%),radial-gradient(2px 2px at 67% 35%,var(--star),transparent 60%),radial-gradient(1px 1px at 85% 18%,var(--star),transparent 60%),radial-gradient(1px 1px at 25% 64%,var(--star),transparent 60%),radial-gradient(2px 2px at 55% 78%,var(--star),transparent 60%),radial-gradient(1px 1px at 90% 70%,var(--star),transparent 60%),radial-gradient(80% 30% at 50% 50%,color-mix(in srgb,var(--accent-glow) 40%,transparent),transparent 70%);background-repeat: repeat,repeat,repeat,repeat,repeat,repeat,repeat,no-repeat;background-size: 300px 300px,300px 300px,420px 420px,300px 300px,360px 360px,420px 420px,300px 300px,100% 100%;animation: brn-env-pulse calc(var(--env-period) / 5) var(--ease-in-out,ease-in-out) infinite}.env-gradient-flow{background-color: var(--bg);background-image: radial-gradient(45% 55% at 10% 15%,var(--accent-glow),transparent 60%),radial-gradient(40% 50% at 90% 20%,color-mix(in srgb,var(--accent) 35%,transparent),transparent 60%),radial-gradient(50% 60% at 75% 90%,var(--accent-soft),transparent 65%),linear-gradient(120deg,var(--accent),var(--accent-strong),color-mix(in srgb,var(--accent) 40%,var(--bg)),var(--accent));background-size: 160% 160%,160% 160%,160% 160%,300% 300%;animation: brn-env-flow calc(var(--env-period) / 2) var(--ease-in-out,ease-in-out) infinite}@keyframes brn-env-aurora{0%,100%{transform: translateX(-4%) skewX(-2deg);opacity: 0.85}50%{transform: translateX(4%) skewX(2deg);opacity: 1}}@keyframes brn-env-billow{0%,100%{background-position: 0% 0%}50%{background-position: 100% 100%}}@keyframes brn-env-daynight{0%,100%{filter: brightness(1)}50%{filter: brightness(0.55) saturate(0.8)}}@keyframes brn-env-pulse{0%,100%{opacity: 0.9;filter: brightness(1)}50%{opacity: 1;filter: brightness(1.15)}}@keyframes brn-env-rays{0%{transform: rotate(-2deg)}50%{transform: rotate(2deg)}100%{transform: rotate(-2deg)}}@keyframes brn-env-caustics{0%,100%{background-position: 0% 0%,0% 0%,0% 0%}50%{background-position: 30% 20%,-20% 30%,20% -30%}}@keyframes brn-env-grid{0%{background-position: 0 0}100%{background-position: 0 40px}}@keyframes brn-env-roll{0%{background-position: 0% 50%}100%{background-position: 200% 50%}}@keyframes brn-env-flow{0%,100%{background-position: 0% 0%,100% 0%,50% 100%,0% 50%}50%{background-position: 30% 40%,70% 60%,40% 30%,100% 50%}}}@layer materials{/*! CSS-CODEBASE · materials/glass — advanced physically-inspired GLASS tiers. * Richer than fx-glass: layered translucency with an inner light, frosted/clear/tinted * variants, a liquid-displaced edge, a prismatic iridescent rim, and a ready-made card. * All tokens — reads --glass-bg/-border/-blur, --accent/-glow, --iridescence, --light-x/y, * and the SVG --filter-liquid handle. backdrop-filter is @supports-guarded with an opaque * fallback so the panes stay legible everywhere. Motion is neutralized by the a11y layer. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .mat-glass{--mat-glass-tint: var(--glass-bg);--mat-glass-inner: rgba(255,255,255,0.14);position: relative;isolation: isolate;border: 1px solid var(--glass-border);border-radius: var(--radius-lg);background: radial-gradient( 120% 90% at var(--light-x) var(--light-y),var(--mat-glass-inner),rgba(255,255,255,0) 60% ),var(--mat-glass-tint);box-shadow: var(--shadow-md),inset 0 1px 0 rgba(255,255,255,0.18),inset 0 -1px 0 rgba(0,0,0,0.18)}.mat-glass::before{content: "";position: absolute;inset-block: 0;inset-inline: 0;border-radius: inherit;background: var(--grad-radial);opacity: 0.8;pointer-events: none;z-index: -1}.mat-glass-frosted{--mat-glass-tint: color-mix(in srgb,var(--surface) 38%,transparent);--mat-glass-inner: rgba(255,255,255,0.22);--glass-blur: var(--glass-blur-lg)}.mat-glass-clear{--mat-glass-tint: rgba(255,255,255,0.04);--mat-glass-inner: rgba(255,255,255,0.1);--glass-blur: var(--glass-blur-sm)}.mat-glass-tinted{--mat-glass-tint: color-mix(in srgb,var(--accent) 16%,var(--glass-bg));--mat-glass-inner: color-mix(in srgb,var(--accent-glow) 60%,rgba(255,255,255,0.16));border-color: color-mix(in srgb,var(--accent) 30%,var(--glass-border))}.mat-glass-liquid{--mat-glass-inner: rgba(255,255,255,0.2);overflow: hidden}.mat-glass-liquid::after{content: "";position: absolute;inset: -2px;border-radius: inherit;border: 2px solid color-mix(in srgb,var(--accent) 26%,var(--glass-border));filter: var(--filter-liquid);pointer-events: none;z-index: 1}.mat-glass-prismatic{position: relative;isolation: isolate}.mat-glass-prismatic::after{content: "";position: absolute;inset: 0;border-radius: inherit;padding: 2px;pointer-events: none;z-index: 2;opacity: clamp(0.35,var(--iridescence),1);background: conic-gradient( from calc(var(--light-x) * 1.8) at 50% 50%,color-mix(in srgb,var(--accent) 70%,#ff6ec4),#7873f5,#4ade80,#fcd34d,color-mix(in srgb,var(--accent) 70%,#ff6ec4) )}@supports (mask: paint(x)) or (-webkit-mask: paint(x)){.mat-glass-prismatic::after{-webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite: xor;mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite: exclude}}@supports not ((mask: paint(x)) or (-webkit-mask: paint(x))){.mat-glass-prismatic::after{inset: -1px;padding: 0;background: none;border: 2px solid color-mix(in srgb,var(--accent) 60%,transparent)}}.mat-glass-card{padding: clamp(1rem,2.4vw,2rem);border-radius: var(--radius-xl);box-shadow: var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,0.2),inset 0 -1px 0 rgba(0,0,0,0.22)}@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.mat-glass,.mat-glass-frosted,.mat-glass-clear,.mat-glass-tinted,.mat-glass-liquid,.mat-glass-prismatic,.mat-glass-card{-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate))}}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.mat-glass,.mat-glass-frosted,.mat-glass-clear,.mat-glass-tinted,.mat-glass-liquid,.mat-glass-prismatic,.mat-glass-card{background: var(--surface)}.mat-glass-tinted{background: color-mix(in srgb,var(--accent) 16%,var(--surface))}}}@layer materials{/*! CSS-CODEBASE · materials/metal — physically-inspired METAL surfaces. * Chrome, brushed steel, plain steel, gold, copper, mirror, holographic foil, an animated * iridescent alloy, and aluminium. Each is built from the --metal-*/ --gold-*/--chrome-* * tokens with a movable specular highlight (--light-x/y),the SVG --filter-specular handle,* and a re-usable sheen sweep keyframe. No hex is hard-coded — colour comes from the material * tokens (which re-grade everything from tokens/_render.css). a11y layer stills the motion. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ @keyframes brn-metal-sheen{0%{background-position: -150% 50%}60%,100%{background-position: 250% 50%}}.mat-chrome,.mat-steel,.mat-gold,.mat-copper,.mat-aluminum,.mat-brushed{position: relative;isolation: isolate;border-radius: var(--radius);color: var(--accent-contrast)}.mat-chrome::after,.mat-steel::after,.mat-gold::after,.mat-copper::after,.mat-aluminum::after,.mat-brushed::after{content: "";position: absolute;inset: 0;border-radius: inherit;pointer-events: none;z-index: 1;background: radial-gradient( 40% 60% at var(--light-x) var(--light-y),rgba(255,255,255,0.6),rgba(255,255,255,0) 70% );mix-blend-mode: screen}@supports not (mix-blend-mode: screen){.mat-chrome::after,.mat-steel::after,.mat-gold::after,.mat-copper::after,.mat-aluminum::after,.mat-brushed::after{opacity: 0.45}}.mat-chrome{background: linear-gradient( 160deg,var(--chrome-a) 0%,var(--chrome-b) 42%,var(--metal-dark) 58%,var(--chrome-a) 100% );box-shadow: inset 0 1px 0 var(--metal-sheen),inset 0 -2px 6px rgba(0,0,0,0.45),var(--shadow-md);filter: var(--filter-specular)}.mat-brushed{background: repeating-linear-gradient( 90deg,var(--metal-base) 0px,var(--metal-sheen) 1px,var(--metal-base) 2px,var(--metal-dark) 3px ),linear-gradient(180deg,var(--metal-sheen) 0%,var(--metal-dark) 100%);background-blend-mode: overlay;box-shadow: inset 0 1px 0 var(--metal-sheen),var(--shadow-md)}.mat-steel{background: linear-gradient( 150deg,var(--metal-sheen) 0%,var(--metal-base) 35%,var(--metal-dark) 100% );box-shadow: inset 0 1px 0 rgba(255,255,255,0.4),inset 0 -3px 8px rgba(0,0,0,0.4),var(--shadow)}.mat-gold{color: var(--accent-contrast);background: linear-gradient(115deg,rgba(255,255,255,0) 35%,var(--metal-sheen) 50%,rgba(255,255,255,0) 65%),linear-gradient(155deg,var(--gold-base) 0%,var(--gold-deep) 55%,var(--gold-base) 100%);background-size: 200% 100%,100% 100%;background-position: -150% 50%,0 0;animation: brn-metal-sheen 3.6s var(--ease-in-out) infinite;box-shadow: inset 0 1px 0 rgba(255,255,255,0.5),inset 0 -2px 6px rgba(0,0,0,0.35),0 4px 18px color-mix(in srgb,var(--gold-deep) 45%,transparent)}.mat-copper{background: linear-gradient( 155deg,color-mix(in srgb,var(--gold-base) 65%,#ff7a45) 0%,color-mix(in srgb,var(--gold-deep) 70%,#7a2f12) 60%,color-mix(in srgb,var(--gold-base) 65%,#ff7a45) 100% );box-shadow: inset 0 1px 0 rgba(255,220,190,0.6),inset 0 -2px 6px rgba(0,0,0,0.4),var(--shadow-md)}.mat-mirror{position: relative;isolation: isolate;border-radius: var(--radius);background: var(--grad-silver);box-shadow: inset 0 0 0 1px var(--metal-sheen),inset 0 2px 10px rgba(255,255,255,0.5),var(--shadow-lg);overflow: hidden}.mat-mirror::before{content: "";position: absolute;inset: 0;pointer-events: none;background: var(--grad-sheen);background-size: 200% 100%;background-position: -150% 50%;animation: brn-metal-sheen 2.8s var(--ease-in-out) infinite}.mat-foil{position: relative;isolation: isolate;border-radius: var(--radius);background: conic-gradient( from calc(var(--light-x) * 3.6) at 50% 50%,color-mix(in srgb,var(--accent) 50%,#ff6ec4),#7873f5,#4ade80,#fcd34d,color-mix(in srgb,var(--accent) 50%,#ff6ec4) );background-size: 200% 200%;background-position: 0% 50%;animation: brn-foil-shift 6s var(--ease-in-out) infinite;box-shadow: var(--shadow-md)}@keyframes brn-foil-shift{0%{background-position: 0% 50%}50%{background-position: 100% 50%}100%{background-position: 0% 50%}}.mat-iridescent{position: relative;isolation: isolate;border-radius: var(--radius);background: linear-gradient( 135deg,var(--chrome-a),color-mix(in srgb,var(--accent) 40%,var(--chrome-b)),var(--metal-dark),var(--chrome-a) );background-size: 300% 300%;animation: brn-foil-shift 7s var(--ease-in-out) infinite,brn-irid-hue calc(8s / max(var(--iridescence),0.25)) linear infinite;box-shadow: var(--shadow-md)}@keyframes brn-irid-hue{to{filter: hue-rotate(360deg)}}.mat-aluminum{background: linear-gradient( 175deg,color-mix(in srgb,var(--metal-sheen) 70%,var(--metal-base)) 0%,var(--metal-base) 50%,color-mix(in srgb,var(--metal-dark) 50%,var(--metal-base)) 100% );box-shadow: inset 0 1px 0 rgba(255,255,255,0.35),var(--shadow)}}@layer materials{/*! CSS-CODEBASE · materials/surface — physically-inspired non-metal SURFACES. * Matte, ceramic, plastic, rubber, paper, fabric, marble, wood, concrete, leather. * Built from surface/colour tokens with --surface-roughness driving gloss/specular where it * makes sense, the movable light (--light-x/y), and the SVG --filter-grain handle for paper. * Tokens only — surfaces tint with --surface/--accent and never hard-code a brand colour. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .mat-matte,.mat-ceramic,.mat-plastic,.mat-rubber,.mat-paper,.mat-fabric,.mat-marble,.mat-wood,.mat-concrete,.mat-leather{position: relative;isolation: isolate;border-radius: var(--radius)}.mat-matte{background: var(--surface);box-shadow: inset 0 0 0 1px rgba(0,0,0,calc(0.06 + var(--surface-roughness) * 0.06)),var(--shadow)}.mat-ceramic{background: radial-gradient( 90% 70% at var(--light-x) var(--light-y),rgba(255,255,255,calc(0.5 - var(--surface-roughness) * 0.3)),rgba(255,255,255,0) 65% ),linear-gradient(180deg,color-mix(in srgb,var(--surface) 88%,#fff) 0%,var(--surface) 100%);box-shadow: inset 0 1px 0 rgba(255,255,255,0.5),inset 0 -4px 12px rgba(0,0,0,0.12),var(--shadow-md)}.mat-plastic{background: linear-gradient(165deg,color-mix(in srgb,var(--surface-2) 70%,#fff) 0%,var(--surface-2) 60%,var(--surface) 100%);box-shadow: inset 0 2px 4px rgba(255,255,255,0.45),inset 0 -3px 8px rgba(0,0,0,0.25),var(--shadow-md)}.mat-plastic::before{content: "";position: absolute;inset-block-start: 4%;inset-inline: 8%;block-size: 36%;border-radius: var(--radius-pill);background: radial-gradient( 100% 100% at var(--light-x) 0%,rgba(255,255,255,0.7),rgba(255,255,255,0) 70% );pointer-events: none}.mat-rubber{background: radial-gradient(120% 100% at 50% 0%,rgba(255,255,255,0.08),rgba(255,255,255,0) 50%),color-mix(in srgb,var(--surface) 70%,#000);box-shadow: inset 0 1px 0 rgba(255,255,255,0.08),inset 0 -2px 6px rgba(0,0,0,0.6),var(--shadow)}.mat-paper{background: color-mix(in srgb,var(--surface) 30%,#fff);color: var(--accent-contrast);box-shadow: var(--shadow)}.mat-paper::after{content: "";position: absolute;inset: 0;border-radius: inherit;filter: var(--filter-grain);opacity: calc(0.25 + var(--surface-roughness) * 0.4);pointer-events: none;mix-blend-mode: multiply}@supports not (mix-blend-mode: multiply){.mat-paper::after{opacity: 0.18}}.mat-fabric{background: repeating-linear-gradient(45deg,rgba(0,0,0,0.06) 0 2px,transparent 2px 4px),repeating-linear-gradient(-45deg,rgba(255,255,255,0.05) 0 2px,transparent 2px 4px),var(--surface);box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1),var(--shadow)}.mat-marble{background: linear-gradient(115deg,transparent 38%,color-mix(in srgb,var(--accent) 30%,transparent) 39%,transparent 41%),linear-gradient(75deg,transparent 60%,rgba(0,0,0,0.12) 61%,transparent 63%),radial-gradient(120% 80% at 30% 20%,rgba(0,0,0,0.08),transparent 60%),linear-gradient(160deg,color-mix(in srgb,var(--surface) 20%,#fff) 0%,color-mix(in srgb,var(--surface) 55%,#fff) 100%);color: var(--accent-contrast);box-shadow: inset 0 1px 0 rgba(255,255,255,0.6),var(--shadow-md)}.mat-wood{background: repeating-linear-gradient( 92deg,rgba(0,0,0,0.14) 0px,rgba(0,0,0,0) 3px,rgba(255,255,255,0.05) 6px,rgba(0,0,0,0.1) 9px ),linear-gradient(160deg,color-mix(in srgb,var(--gold-deep) 60%,#5a3216) 0%,color-mix(in srgb,var(--gold-deep) 40%,#3a2010) 100%);box-shadow: inset 0 1px 0 rgba(255,255,255,0.12),var(--shadow-md)}.mat-concrete{background: radial-gradient(60% 50% at 20% 30%,rgba(0,0,0,0.1),transparent 60%),radial-gradient(50% 60% at 80% 70%,rgba(255,255,255,0.05),transparent 60%),color-mix(in srgb,var(--surface) 60%,#8a8d93);box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12),var(--shadow)}.mat-concrete::after{content: "";position: absolute;inset: 0;border-radius: inherit;filter: var(--filter-grain);opacity: calc(0.2 + var(--surface-roughness) * 0.3);pointer-events: none}.mat-leather{background: radial-gradient(80% 60% at var(--light-x) var(--light-y),rgba(255,255,255,0.1),transparent 60%),repeating-radial-gradient(circle at 30% 30%,rgba(0,0,0,0.08) 0 4px,transparent 4px 8px),color-mix(in srgb,var(--gold-deep) 30%,#2a1c14);box-shadow: inset 0 1px 0 rgba(255,255,255,0.1),inset 0 -3px 10px rgba(0,0,0,0.5),var(--shadow-md)}}@layer materials{/*! CSS-CODEBASE · materials/emissive — light-EMITTING materials. * Neon tubing (on/off), LED indicators, an LCD/CRT screen panel, molten lava, plasma, a * glitchy hologram, and a soft glow tube. Glow is stacked from --accent-glow/--bloom-color so * it re-tints per theme; flicker/scan/pulse keyframes are brn-prefixed and compositor-friendly, * and the a11y layer neutralizes all motion under prefers-reduced-motion. Tokens only. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .mat-neon{color: var(--accent);border: 2px solid var(--accent);border-radius: var(--radius);background: color-mix(in srgb,var(--accent) 6%,transparent);text-shadow: 0 0 4px var(--accent-glow),0 0 10px var(--accent-glow),0 0 22px var(--bloom-color);box-shadow: 0 0 6px var(--accent-glow),0 0 16px var(--bloom-color),inset 0 0 8px var(--accent-glow);animation: brn-neon-flicker 4.2s steps(1,end) infinite}@keyframes brn-neon-flicker{0%,18%,22%,25%,53%,57%,100%{opacity: 1}20%,24%,55%{opacity: 0.62}}.mat-neon-off{color: color-mix(in srgb,var(--accent) 35%,var(--surface));border: 2px solid color-mix(in srgb,var(--accent) 25%,var(--surface));border-radius: var(--radius);background: var(--surface);text-shadow: none;box-shadow: inset 0 0 6px rgba(0,0,0,0.4)}.mat-led{display: inline-block;inline-size: 0.9em;block-size: 0.9em;border-radius: var(--radius-circle);background: radial-gradient(circle at 35% 30%,#fff,var(--accent) 45%,color-mix(in srgb,var(--accent) 40%,#000) 100%);box-shadow: 0 0 4px var(--accent-glow),0 0 10px var(--bloom-color);animation: brn-led-pulse 1.8s var(--ease-in-out) infinite}@keyframes brn-led-pulse{0%,100%{box-shadow: 0 0 4px var(--accent-glow),0 0 10px var(--bloom-color)}50%{box-shadow: 0 0 7px var(--accent-glow),0 0 18px var(--bloom-color)}}.mat-screen{position: relative;isolation: isolate;color: var(--accent);border-radius: var(--radius);background: radial-gradient(120% 120% at 50% 50%,transparent 60%,rgba(0,0,0,0.5) 100%),repeating-linear-gradient(0deg,rgba(0,0,0,0.35) 0 1px,transparent 1px var(--scanline-gap)),repeating-linear-gradient(90deg,rgba(255,255,255,0.03) 0 1px,transparent 1px 3px),color-mix(in srgb,var(--accent) 10%,#04060a);text-shadow: 0 0 6px var(--accent-glow);box-shadow: inset 0 0 24px rgba(0,0,0,0.7),var(--shadow-md)}.mat-screen::after{content: "";position: absolute;inset: 0;border-radius: inherit;pointer-events: none;background: linear-gradient(rgba(255,255,255,0.06),rgba(255,255,255,0) 40%);opacity: var(--scanline-opacity)}.mat-lava{position: relative;isolation: isolate;border-radius: var(--radius);background: linear-gradient( 135deg,color-mix(in srgb,var(--bloom-color) 50%,#ff3d00),color-mix(in srgb,var(--gold-base) 60%,#ffae00),#7a0e00,color-mix(in srgb,var(--bloom-color) 50%,#ff3d00) );background-size: 300% 300%;animation: brn-lava-flow 9s var(--ease-in-out) infinite;box-shadow: 0 0 24px color-mix(in srgb,var(--bloom-color) 60%,#ff3d00),var(--shadow-md)}@keyframes brn-lava-flow{0%{background-position: 0% 0%}50%{background-position: 100% 100%}100%{background-position: 0% 0%}}.mat-plasma-mat{position: relative;isolation: isolate;border-radius: var(--radius);background: radial-gradient(60% 60% at 30% 30%,var(--accent-glow),transparent 60%),radial-gradient(50% 50% at 70% 65%,var(--bloom-color),transparent 60%),linear-gradient(135deg,color-mix(in srgb,var(--accent) 60%,#5b2bd6),#120826,color-mix(in srgb,var(--accent) 60%,#2bb6d6));background-size: 200% 200%,200% 200%,300% 300%;animation: brn-plasma-drift 7s var(--ease-in-out) infinite;box-shadow: 0 0 22px var(--bloom-color),var(--shadow-md)}@keyframes brn-plasma-drift{0%{background-position: 0% 0%,100% 100%,0% 50%}50%{background-position: 100% 100%,0% 0%,100% 50%}100%{background-position: 0% 0%,100% 100%,0% 50%}}.mat-hologram{position: relative;isolation: isolate;color: var(--accent);border-radius: var(--radius);background: repeating-linear-gradient(0deg,color-mix(in srgb,var(--accent) 16%,transparent) 0 1px,transparent 1px var(--scanline-gap)),color-mix(in srgb,var(--accent) 8%,transparent);text-shadow: var(--chromatic-offset) 0 color-mix(in srgb,var(--accent) 60%,#ff0040),calc(var(--chromatic-offset) * -1) 0 color-mix(in srgb,var(--accent) 60%,#00e5ff),0 0 8px var(--accent-glow);box-shadow: 0 0 18px var(--bloom-color);animation: brn-holo-flicker 3.4s steps(1,end) infinite}@keyframes brn-holo-flicker{0%,100%{opacity: 0.92}47%{opacity: 0.78}50%{opacity: 1}53%{opacity: 0.82}}@supports (mix-blend-mode: screen){.mat-hologram::after{content: "";position: absolute;inset: 0;border-radius: inherit;pointer-events: none;mix-blend-mode: screen;background: linear-gradient(180deg,transparent,var(--accent-glow) 50%,transparent);background-size: 100% 8px;animation: brn-holo-scan 2.6s linear infinite}}@keyframes brn-holo-scan{0%{background-position: 0 -100%}100%{background-position: 0 200%}}.mat-glowtube{color: var(--accent-contrast);border-radius: var(--radius-pill);background: linear-gradient(180deg,color-mix(in srgb,var(--accent) 70%,#fff),var(--accent));box-shadow: 0 0 10px var(--accent-glow),0 0 26px var(--bloom-color),inset 0 1px 0 rgba(255,255,255,0.6);animation: brn-glowtube-breathe 5s var(--ease-in-out) infinite}@keyframes brn-glowtube-breathe{0%,100%{box-shadow: 0 0 10px var(--accent-glow),0 0 26px var(--bloom-color),inset 0 1px 0 rgba(255,255,255,0.6)}50%{box-shadow: 0 0 16px var(--accent-glow),0 0 40px var(--bloom-color),inset 0 1px 0 rgba(255,255,255,0.6)}}}@layer motion{/*! CSS-CODEBASE · motion/keyframes — the shared animation library. * Named brn-* so they never collide with app keyframes. All paused under prefers-reduced-motion. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ @keyframes brn-fade{from{opacity: 0}to{opacity: 1}}@keyframes brn-fade-up{from{opacity: 0;transform: translateY(20px)}to{opacity: 1;transform: translateY(0)}}@keyframes brn-fade-down{from{opacity: 0;transform: translateY(-20px)}to{opacity: 1;transform: translateY(0)}}@keyframes brn-fade-in-left{from{opacity: 0;transform: translateX(-24px)}to{opacity: 1;transform: translateX(0)}}@keyframes brn-fade-in-right{from{opacity: 0;transform: translateX(24px)}to{opacity: 1;transform: translateX(0)}}@keyframes brn-pop{0%{opacity: 0;transform: scale(0.85)}60%{transform: scale(1.03)}100%{opacity: 1;transform: scale(1)}}@keyframes brn-float{0%,100%{transform: translateY(0)}50%{transform: translateY(-10px)}}@keyframes brn-pulse{0%,100%{opacity: 1;transform: scale(1)}50%{opacity: 0.72;transform: scale(1.04)}}@keyframes brn-pulse-ring{0%{box-shadow: 0 0 0 0 var(--accent-glow)}70%{box-shadow: 0 0 0 14px transparent}100%{box-shadow: 0 0 0 0 transparent}}@keyframes brn-spin{to{transform: rotate(360deg)}}@keyframes brn-marquee{from{transform: translateX(0)}to{transform: translateX(-50%)}}@keyframes brn-blink{50%{opacity: 0}}@keyframes brn-shake{10%,90%{transform: translateX(-1px)}20%,80%{transform: translateX(2px)}30%,50%,70%{transform: translateX(-4px)}40%,60%{transform: translateX(4px)}}@keyframes brn-bob{0%,100%{transform: translateY(0) rotate(0deg)}25%{transform: translateY(-4px) rotate(-1deg)}75%{transform: translateY(4px) rotate(1deg)}}}@layer motion{/*! CSS-CODEBASE · motion/animate — utility classes that apply the keyframe library. * Tune with --anim-dur / --anim-delay / --anim-ease on the element. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ [class*="fx-anim-"]{animation-duration: var(--anim-dur,var(--dur-slow));animation-delay: var(--anim-delay,0ms);animation-timing-function: var(--anim-ease,var(--ease-out));animation-fill-mode: both}.fx-anim-fade{animation-name: brn-fade}.fx-anim-fade-up{animation-name: brn-fade-up}.fx-anim-fade-down{animation-name: brn-fade-down}.fx-anim-in-left{animation-name: brn-fade-in-left}.fx-anim-in-right{animation-name: brn-fade-in-right}.fx-anim-pop{animation-name: brn-pop}.fx-float{animation: brn-float 5s var(--ease-in-out) infinite}.fx-pulse{animation: brn-pulse 2.4s var(--ease-in-out) infinite}.fx-pulse-ring{animation: brn-pulse-ring 2s var(--ease-out) infinite}.fx-bob{animation: brn-bob 6s var(--ease-in-out) infinite}.fx-spin{animation: brn-spin 1s linear infinite}.fx-blink{animation: brn-blink 1.1s step-end infinite}.fx-shake{animation: brn-shake 0.5s var(--ease-in-out)}.fx-stagger > *{animation-fill-mode: both}.fx-stagger > *:nth-child(1){animation-delay: calc(var(--stagger,80ms) * 0)}.fx-stagger > *:nth-child(2){animation-delay: calc(var(--stagger,80ms) * 1)}.fx-stagger > *:nth-child(3){animation-delay: calc(var(--stagger,80ms) * 2)}.fx-stagger > *:nth-child(4){animation-delay: calc(var(--stagger,80ms) * 3)}.fx-stagger > *:nth-child(5){animation-delay: calc(var(--stagger,80ms) * 4)}.fx-stagger > *:nth-child(6){animation-delay: calc(var(--stagger,80ms) * 5)}.fx-stagger > *:nth-child(7){animation-delay: calc(var(--stagger,80ms) * 6)}.fx-stagger > *:nth-child(8){animation-delay: calc(var(--stagger,80ms) * 7)}.fx-marquee{display: flex;overflow: hidden;gap: var(--sp-6)}.fx-marquee > *{flex: 0 0 auto;animation: brn-marquee var(--marquee-dur,24s) linear infinite}.fx-marquee:hover > *{animation-play-state: paused}}@layer utilities{/*! CSS-CODEBASE · utilities/spacing — atomic margin / padding / gap from the spacing scale. * Highest-priority layer (after components/fx) so a utility always wins. Logical properties. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .m-0{margin: 0}.m-auto{margin: auto}.mx-auto{margin-inline: auto}.my-auto{margin-block: auto}.mt-2{margin-block-start: var(--sp-2)}.mt-3{margin-block-start: var(--sp-3)}.mt-4{margin-block-start: var(--sp-4)}.mt-6{margin-block-start: var(--sp-6)}.mt-8{margin-block-start: var(--sp-8)}.mb-2{margin-block-end: var(--sp-2)}.mb-3{margin-block-end: var(--sp-3)}.mb-4{margin-block-end: var(--sp-4)}.mb-6{margin-block-end: var(--sp-6)}.mb-8{margin-block-end: var(--sp-8)}.p-0{padding: 0}.p-2{padding: var(--sp-2)}.p-3{padding: var(--sp-3)}.p-4{padding: var(--sp-4)}.p-5{padding: var(--sp-5)}.p-6{padding: var(--sp-6)}.p-8{padding: var(--sp-8)}.px-3{padding-inline: var(--sp-3)}.px-4{padding-inline: var(--sp-4)}.px-5{padding-inline: var(--sp-5)}.px-6{padding-inline: var(--sp-6)}.py-2{padding-block: var(--sp-2)}.py-3{padding-block: var(--sp-3)}.py-4{padding-block: var(--sp-4)}.py-6{padding-block: var(--sp-6)}.py-8{padding-block: var(--sp-8)}.py-10{padding-block: var(--sp-10)}.gap-1{gap: var(--sp-1)}.gap-2{gap: var(--sp-2)}.gap-3{gap: var(--sp-3)}.gap-4{gap: var(--sp-4)}.gap-5{gap: var(--sp-5)}.gap-6{gap: var(--sp-6)}.gap-8{gap: var(--sp-8)}}@layer utilities{/*! CSS-CODEBASE · utilities/typography — type size, weight, alignment, wrapping helpers. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .text-2xs{font-size: var(--text-2xs)}.text-xs{font-size: var(--text-xs)}.text-sm{font-size: var(--text-sm)}.text-base{font-size: var(--text-base)}.text-md{font-size: var(--text-md)}.text-lg{font-size: var(--text-lg)}.text-xl{font-size: var(--text-xl)}.text-2xl{font-size: var(--text-2xl)}.text-3xl{font-size: var(--text-3xl)}.text-4xl{font-size: var(--text-4xl)}.text-5xl{font-size: var(--text-5xl)}.font-display{font-family: var(--font-display)}.font-body{font-family: var(--font-body)}.font-mono{font-family: var(--font-mono)}.fw-regular{font-weight: var(--fw-regular)}.fw-medium{font-weight: var(--fw-medium)}.fw-semibold{font-weight: var(--fw-semibold)}.fw-bold{font-weight: var(--fw-bold)}.fw-black{font-weight: var(--fw-black)}.italic{font-style: italic}.uppercase{text-transform: uppercase;letter-spacing: var(--tracking-wide)}.capitalize{text-transform: capitalize}.text-start{text-align: start}.text-center{text-align: center}.text-end{text-align: end}.leading-tight{line-height: var(--lh-tight)}.leading-snug{line-height: var(--lh-snug)}.leading-normal{line-height: var(--lh-normal)}.leading-loose{line-height: var(--lh-loose)}.tracking-tight{letter-spacing: var(--tracking-tight)}.tracking-wide{letter-spacing: var(--tracking-wide)}.measure{max-inline-size: var(--measure)}.balance{text-wrap: balance}.pretty{text-wrap: pretty}.nowrap{white-space: nowrap}.truncate{overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.line-clamp{display: -webkit-box;-webkit-line-clamp: var(--lines,3);line-clamp: var(--lines,3);-webkit-box-orient: vertical;overflow: hidden}}@layer utilities{/*! CSS-CODEBASE · utilities/color — themed text / background / border helpers. * All read the token contract, so they re-tint with the active theme. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .fg{color: var(--fg)}.fg-muted{color: var(--fg-muted)}.fg-subtle{color: var(--fg-subtle)}.fg-accent{color: var(--accent)}.fg-accent-strong{color: var(--accent-strong)}.bg{background: var(--bg)}.bg-elev{background: var(--bg-elev)}.bg-surface{background: var(--surface)}.bg-surface-2{background: var(--surface-2)}.bg-accent{background: var(--accent);color: var(--accent-contrast)}.bg-accent-soft{background: var(--accent-soft)}.border{border: 1px solid var(--line)}.border-strong{border: 1px solid var(--line-strong)}.border-accent{border: 1px solid var(--accent)}.border-0{border: 0}.border-t{border-block-start: 1px solid var(--line)}.border-b{border-block-end: 1px solid var(--line)}.accent-cerulean{--accent: var(--brn-cerulean);--accent-strong: var(--brn-cerulean-strong);--accent-contrast: var(--brn-cerulean-contrast);--accent-soft: rgba(41,169,224,0.14);--accent-glow: rgba(41,169,224,0.45)}.accent-green{--accent: var(--brn-green);--accent-strong: var(--brn-green-strong);--accent-contrast: var(--brn-green-contrast);--accent-soft: rgba(34,169,92,0.14);--accent-glow: rgba(34,169,92,0.42)}.accent-rose{--accent: var(--brn-rose);--accent-strong: var(--brn-rose-strong);--accent-contrast: var(--brn-rose-contrast);--accent-soft: rgba(240,70,108,0.14);--accent-glow: rgba(240,70,108,0.42)}.accent-lemon{--accent: var(--brn-lemon);--accent-strong: var(--brn-lemon-strong);--accent-contrast: var(--brn-lemon-contrast);--accent-soft: rgba(242,199,68,0.16);--accent-glow: rgba(242,199,68,0.4)}.accent-aic{--accent: var(--aic-blue);--accent-strong: var(--aic-violet);--accent-contrast: #fff;--accent-soft: rgba(46,91,255,0.14);--accent-glow: rgba(111,61,232,0.45)}}@layer utilities{/*! CSS-CODEBASE · utilities/layout — display, flex, grid, position, size helpers. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .block{display: block}.inline-block{display: inline-block}.inline{display: inline}.flex{display: flex}.inline-flex{display: inline-flex}.grid{display: grid}.contents{display: contents}.hidden{display: none}.flex-col{flex-direction: column}.flex-row{flex-direction: row}.flex-wrap{flex-wrap: wrap}.flex-1{flex: 1}.flex-none{flex: none}.grow{flex-grow: 1}.shrink-0{flex-shrink: 0}.items-start{align-items: flex-start}.items-center{align-items: center}.items-end{align-items: flex-end}.items-stretch{align-items: stretch}.justify-start{justify-content: flex-start}.justify-center{justify-content: center}.justify-between{justify-content: space-between}.justify-end{justify-content: flex-end}.place-center{place-items: center}.relative{position: relative}.absolute{position: absolute}.fixed{position: fixed}.sticky{position: sticky}.inset-0{inset: 0}.top-0{inset-block-start: 0}.w-full{inline-size: 100%}.h-full{block-size: 100%}.min-h-screen{min-block-size: 100dvh}.max-w-prose{max-inline-size: var(--measure)}.overflow-hidden{overflow: hidden}.overflow-auto{overflow: auto}.clip{overflow: clip}.isolate{isolation: isolate}.z-header{z-index: var(--z-header)}.z-modal{z-index: var(--z-modal)}.visually-hidden{position: absolute;inline-size: 1px;block-size: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);white-space: nowrap;border: 0}}@layer utilities{/*! CSS-CODEBASE · utilities/visual — radius, shadow shortcuts, opacity, cursor, ratio, blend. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .rounded-sm{border-radius: var(--radius-sm)}.rounded{border-radius: var(--radius)}.rounded-lg{border-radius: var(--radius-lg)}.rounded-xl{border-radius: var(--radius-xl)}.rounded-pill{border-radius: var(--radius-pill)}.rounded-circle{border-radius: var(--radius-circle)}.rounded-none{border-radius: 0}.shadow{box-shadow: var(--shadow)}.shadow-md{box-shadow: var(--shadow-md)}.shadow-lg{box-shadow: var(--shadow-lg)}.shadow-none{box-shadow: none}.opacity-0{opacity: 0}.opacity-50{opacity: 0.5}.opacity-70{opacity: 0.7}.opacity-100{opacity: 1}.cursor-pointer{cursor: pointer}.cursor-default{cursor: default}.select-none{user-select: none}.pointer-none{pointer-events: none}.aspect-square{aspect-ratio: 1}.aspect-video{aspect-ratio: 16 / 9}.object-cover{object-fit: cover}.object-contain{object-fit: contain}.blend-multiply{mix-blend-mode: multiply}.blend-screen{mix-blend-mode: screen}.blend-overlay{mix-blend-mode: overlay}.blend-difference{mix-blend-mode: difference}.backdrop-blur{backdrop-filter: blur(var(--glass-blur));-webkit-backdrop-filter: blur(var(--glass-blur))}.transition{transition: all var(--dur-base) var(--ease-out)}.transition-fast{transition: all var(--dur-fast) var(--ease-out)}}@layer utilities{/*! CSS-CODEBASE · utilities/render — atomic setters for the render-engine knobs. * Drop these on any element/subtree to retune lighting, bloom, grading, shaders without bespoke CSS. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .light-tl{--light-x: 18%;--light-y: 16%}.light-tr{--light-x: 82%;--light-y: 16%}.light-top{--light-x: 50%;--light-y: 8%}.light-center{--light-x: 50%;--light-y: 50%}.light-bl{--light-x: 18%;--light-y: 84%}.light-br{--light-x: 82%;--light-y: 84%}.light-soft{--light-intensity: 0.6;--light-ambient: 0.3}.light-hard{--light-intensity: 1.4;--light-ambient: 0.08;--light-specular: 1}.light-warm{--light-color: var(--light-warm)}.light-cool{--light-color: var(--light-cool)}.bloom-low{--bloom-intensity: 0.3;--bloom-radius: 8px}.bloom-mid{--bloom-intensity: 0.6;--bloom-radius: 16px}.bloom-high{--bloom-intensity: 1;--bloom-radius: 28px}.grade-warm{--temperature: 12deg;--saturation-grade: 1.08}.grade-cool{--temperature: -12deg;--saturation-grade: 1.04}.grade-punchy{--contrast-grade: 1.18;--saturation-grade: 1.3}.grade-flat{--contrast-grade: 0.92;--saturation-grade: 0.8}.expose-up{--exposure: 1.18}.expose-down{--exposure: 0.82}.hdr-on{--hdr-boost: 1.25}.shader-slow{--shader-speed: 0.5}.shader-fast{--shader-speed: 2}.shader-coarse{--shader-scale: 2}.shader-fine{--shader-scale: 0.5}.raster-fine{--raster-size: 2px}.raster-coarse{--raster-size: 8px}.aberration-strong{--chromatic-offset: 4px}.fog-light{--fog-density: 0.3}.fog-heavy{--fog-density: 0.85}.dof-shallow{--dof-blur: 10px}}@layer a11y{/*! CSS-CODEBASE · a11y/contrast — high-contrast intent + Windows forced-colors honour. * Accessibility is the north star (carried from PHP-CODEBASE): aim WCAG AAA, never trap legibility. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ .high-contrast{--fg: #fff;--fg-muted: #e6e8ec;--fg-subtle: #c9ccd2;--line: rgba(255,255,255,0.4);--line-strong: rgba(255,255,255,0.65);--border: rgba(255,255,255,0.4);--accent-soft: rgba(255,255,255,0.18)}.high-contrast.boreon-daylight,.high-contrast[data-theme="boreon-daylight"]{--fg: #000;--fg-muted: #1a1c20;--fg-subtle: #2a2c31;--line: rgba(0,0,0,0.4);--line-strong: rgba(0,0,0,0.65);--border: rgba(0,0,0,0.4)}@media (prefers-contrast: more){:root{--line: rgba(255,255,255,0.32);--line-strong: rgba(255,255,255,0.55);--glass-bg: var(--surface);--glass-bg-2: var(--surface-2)}}@media (forced-colors: active){.fx-glass,.fx-glow,.fx-grain,.fx-sheen,.card,.btn{backdrop-filter: none !important;box-shadow: none !important;background-image: none !important}.btn,.card,input,textarea,select{border: 1px solid CanvasText}:focus-visible{outline: 3px solid Highlight}a{color: LinkText}}}@layer a11y{/*! CSS-CODEBASE · a11y/hdr — HDR / 4K / 8K type-scaling + a large-type mode. * Built so Joe can keep building as his eyesight fails: on huge, dense displays the whole * fluid type/space system scales UP via `--scale`, and `.large-type` bumps it on demand. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ @media (min-width: 2200px){:root{--scale: 1.12;font-size: 112.5%}}@media (min-width: 3200px){:root{--scale: 1.28;font-size: 125%}}@media (min-width: 5000px){:root{--scale: 1.55;font-size: 150%}}.large-type{--text-base: clamp(1.05rem,0.8vw + 0.85rem,1.2rem);--text-md: clamp(1.15rem,0.9vw + 0.9rem,1.35rem);--text-lg: clamp(1.3rem,1.1vw + 1rem,1.6rem);--text-xl: clamp(1.5rem,1.4vw + 1.1rem,2rem);--text-2xl: clamp(1.7rem,2vw + 1.2rem,2.6rem);--text-3xl: clamp(2rem,2.8vw + 1.2rem,3.6rem);--lh-normal: 1.75;--lh-snug: 1.5;--measure: 60ch}.large-type p,.large-type li,.large-type .prose{letter-spacing: 0.01em}@media (prefers-reduced-transparency: reduce){:root{--glass-bg: var(--surface);--glass-bg-2: var(--surface-2);--glass-blur: 0px}.fx-glass{backdrop-filter: none}}}@layer a11y{/*! CSS-CODEBASE · a11y/motion — focus visibility + reduced-motion safety net. * This layer is LAST in the cascade so preference-gated rules win over fx/motion/utilities. * Soli Deo Gloria — Ave Maria · in dedication to Pope Leo. ✝ */ :focus-visible{outline: 3px solid var(--accent);outline-offset: 2px;border-radius: var(--radius-sm)}:focus:not(:focus-visible){outline: none}.skip-link{position: fixed;inset-block-start: var(--sp-2);inset-inline-start: var(--sp-2);z-index: var(--z-toast);padding: var(--sp-2) var(--sp-4);background: var(--accent);color: var(--accent-contrast);border-radius: var(--radius);transform: translateY(-150%);transition: transform var(--dur-fast) var(--ease-out)}.skip-link:focus{transform: translateY(0)}@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration: 0.001ms !important;animation-iteration-count: 1 !important;transition-duration: 0.001ms !important;scroll-behavior: auto !important;animation-timeline: none !important}.fx-float,.fx-pulse,.fx-marquee,.fx-sheen-sweep,.fx-gradient-animate,.fx-border-conic{animation: none !important}}}