/* ═══════════════════════════════════════════════════════════════════ bryanchasko-design-system — Color Tokens Light/Dark mode via data-theme attribute on Source:persona-themes.json + dcode frontend palette ═══════════════════════════════════════════════════════════════════ */:root{color-scheme:light;--bc-color-brand-purple:#8169c5;--bc-color-brand-lavender:#a794e0;--bc-color-brand-orange:#e8944a;--bc-color-brand-gold:#d4a745;--bc-color-bg:#fafaf9;--bc-color-surface:#ffffff;--bc-color-surface-2:#f5f5f4;--bc-color-border:#d6d3d1;--bc-color-text:#1c1917;--bc-color-text-muted:#57534e;--bc-color-accent:#6d4eaf;--bc-color-accent-hover:#8169c5;--bc-color-on-accent:#ffffff;--bc-color-error:#dc2626;--bc-color-success:#16a34a;--bc-color-warning:#d97706;--bc-color-info:#0891b2;--bc-color-harald-bg:#fdfcfb;--bc-color-harald-fg:#1c1917;--bc-color-harald-accent:#b8922e;--bc-color-harald-border:#d4a745;--bc-color-harald-glow:rgba(212,167,69,0.1);--bc-color-harald-selection:#d4a74533;--bc-color-voss-bg:#fdfaf5;--bc-color-voss-fg:#1c1917;--bc-color-voss-accent:#a38a4e;--bc-color-voss-border:#c8a96e;--bc-color-voss-glow:rgba(200,169,110,0.08);--bc-color-voss-selection:#c8a96e33;--bc-color-liora-bg:#faf5ff;--bc-color-liora-fg:#1c1917;--bc-color-liora-accent:#9333ea;--bc-color-liora-border:#c084fc;--bc-color-liora-glow:rgba(192,132,252,0.12);--bc-color-liora-selection:#c084fc33;--bc-color-arion-bg:#f0fdfa;--bc-color-arion-fg:#1c1917;--bc-color-arion-accent:#0d9488;--bc-color-arion-border:#5eead4;--bc-color-arion-glow:rgba(94,234,212,0.08);--bc-color-arion-selection:#5eead433;--bc-color-ellow-bg:#f7fee7;--bc-color-ellow-fg:#1c1917;--bc-color-ellow-accent:#65a30d;--bc-color-ellow-border:#84cc16;--bc-color-ellow-glow:rgba(132,204,22,0.08);--bc-color-ellow-selection:#84cc1633;--bc-color-hcom-bg:#ecfeff;--bc-color-hcom-fg:#1c1917;--bc-color-hcom-accent:#0891b2;--bc-color-hcom-border:#06b6d4;--bc-color-hcom-glow:rgba(6,182,212,0.1);--bc-color-hcom-selection:#06b6d433;--bc-color-kadevox-bg:#fef2f2;--bc-color-kadevox-fg:#1c1917;--bc-color-kadevox-accent:#dc2626;--bc-color-kadevox-border:#ef4444;--bc-color-kadevox-glow:rgba(239,68,68,0.1);--bc-color-kadevox-selection:#ef444433;--bc-color-kerouac-bg:#fffbeb;--bc-color-kerouac-fg:#1c1917;--bc-color-kerouac-accent:#d97706;--bc-color-kerouac-border:#f59e0b;--bc-color-kerouac-glow:rgba(245,158,11,0.08);--bc-color-kerouac-selection:#f59e0b33;--bc-color-myrren-bg:#f0f9ff;--bc-color-myrren-fg:#1c1917;--bc-color-myrren-accent:#5b9aaf;--bc-color-myrren-border:#88c0d0;--bc-color-myrren-glow:rgba(136,192,208,0.08);--bc-color-myrren-selection:#88c0d033;--bc-color-nyxen-bg:#faf5ff;--bc-color-nyxen-fg:#1c1917;--bc-color-nyxen-accent:#7c3aed;--bc-color-nyxen-border:#a855f7;--bc-color-nyxen-glow:rgba(168,85,247,0.12);--bc-color-nyxen-selection:#a855f733;--bc-color-orin-bg:#f0fdf4;--bc-color-orin-fg:#1c1917;--bc-color-orin-accent:#16a34a;--bc-color-orin-border:#22c55e;--bc-color-orin-glow:rgba(34,197,94,0.1);--bc-color-orin-selection:#22c55e33;--bc-color-ralph-bg:#fefce8;--bc-color-ralph-fg:#1c1917;--bc-color-ralph-accent:#ca8a04;--bc-color-ralph-border:#eab308;--bc-color-ralph-glow:rgba(234,179,8,0.08);--bc-color-ralph-selection:#eab30833;--bc-color-scribe-bg:#fafaf9;--bc-color-scribe-fg:#1c1917;--bc-color-scribe-accent:#1c1917;--bc-color-scribe-border:#d6d3d1;--bc-color-scribe-glow:none;--bc-color-scribe-selection:#1c191733;--bc-color-solan-bg:#fff7ed;--bc-color-solan-fg:#1c1917;--bc-color-solan-accent:#ea580c;--bc-color-solan-border:#f97316;--bc-color-solan-glow:rgba(249,115,22,0.1);--bc-color-solan-selection:#f9731633;--bc-color-stratia-bg:#f5f5f0;--bc-color-stratia-fg:#374151;--bc-color-stratia-accent:#4f772d;--bc-color-stratia-border:#4f772d;--bc-color-stratia-glow:none;--bc-color-stratia-selection:#4f772d33;--bc-color-tarn-bg:#fef2f2;--bc-color-tarn-fg:#1c1917;--bc-color-tarn-accent:#dc2626;--bc-color-tarn-border:#dc2626;--bc-color-tarn-glow:rgba(220,38,38,0.12);--bc-color-tarn-selection:#dc262633;} :root[data-theme="dark"]{color-scheme:dark;--bc-color-brand-purple:#8169c5;--bc-color-brand-lavender:#a794e0;--bc-color-brand-orange:#e8944a;--bc-color-brand-gold:#d4a745;--bc-color-bg:#14121c;--bc-color-surface:#211d30;--bc-color-surface-2:#2b2640;--bc-color-border:#3b3556;--bc-color-text:#f2eefb;--bc-color-text-muted:#a9a2c4;--bc-color-accent:#8169c5;--bc-color-accent-hover:#a794e0;--bc-color-on-accent:#ffffff;--bc-color-error:#ff6b6b;--bc-color-success:#3ddc84;--bc-color-warning:#f59e0b;--bc-color-info:#06b6d4;--bc-color-harald-bg:#0d1117;--bc-color-harald-fg:#c9d1d9;--bc-color-harald-accent:#d4a745;--bc-color-harald-border:#d4a745;--bc-color-harald-glow:rgba(212,167,69,0.15);--bc-color-harald-selection:#d4a74533;--bc-color-voss-bg:#1a1612;--bc-color-voss-fg:#d4c5a9;--bc-color-voss-accent:#c8a96e;--bc-color-voss-border:#c8a96e;--bc-color-voss-glow:rgba(200,169,110,0.1);--bc-color-voss-selection:#c8a96e33;--bc-color-liora-bg:#1a0f2e;--bc-color-liora-fg:#e8d5f5;--bc-color-liora-accent:#c084fc;--bc-color-liora-border:#c084fc;--bc-color-liora-glow:rgba(192,132,252,0.2);--bc-color-liora-selection:#c084fc33;--bc-color-arion-bg:#0f1b2d;--bc-color-arion-fg:#b8d4e3;--bc-color-arion-accent:#5eead4;--bc-color-arion-border:#5eead4;--bc-color-arion-glow:rgba(94,234,212,0.12);--bc-color-arion-selection:#5eead433;--bc-color-ellow-bg:#1a2218;--bc-color-ellow-fg:#c5d1b8;--bc-color-ellow-accent:#84cc16;--bc-color-ellow-border:#84cc16;--bc-color-ellow-glow:rgba(132,204,22,0.12);--bc-color-ellow-selection:#84cc1633;--bc-color-hcom-bg:#0a1628;--bc-color-hcom-fg:#b4d0e7;--bc-color-hcom-accent:#06b6d4;--bc-color-hcom-border:#06b6d4;--bc-color-hcom-glow:rgba(6,182,212,0.15);--bc-color-hcom-selection:#06b6d433;--bc-color-kadevox-bg:#111111;--bc-color-kadevox-fg:#a8a8a8;--bc-color-kadevox-accent:#ef4444;--bc-color-kadevox-border:#ef4444;--bc-color-kadevox-glow:rgba(239,68,68,0.15);--bc-color-kadevox-selection:#ef444433;--bc-color-kerouac-bg:#1c1408;--bc-color-kerouac-fg:#d4a867;--bc-color-kerouac-accent:#f59e0b;--bc-color-kerouac-border:#f59e0b;--bc-color-kerouac-glow:rgba(245,158,11,0.1);--bc-color-kerouac-selection:#f59e0b33;--bc-color-myrren-bg:#0c1929;--bc-color-myrren-fg:#9fc5e8;--bc-color-myrren-accent:#88c0d0;--bc-color-myrren-border:#88c0d0;--bc-color-myrren-glow:rgba(136,192,208,0.1);--bc-color-myrren-selection:#88c0d033;--bc-color-nyxen-bg:#0d0015;--bc-color-nyxen-fg:#c4b5fd;--bc-color-nyxen-accent:#a855f7;--bc-color-nyxen-border:#a855f7;--bc-color-nyxen-glow:rgba(168,85,247,0.2);--bc-color-nyxen-selection:#a855f733;--bc-color-orin-bg:#0a0a0a;--bc-color-orin-fg:#00ff41;--bc-color-orin-accent:#00ff41;--bc-color-orin-border:#00ff41;--bc-color-orin-glow:rgba(0,255,65,0.15);--bc-color-orin-selection:#00ff4133;--bc-color-ralph-bg:#1a1a2e;--bc-color-ralph-fg:#eef04d;--bc-color-ralph-accent:#eef04d;--bc-color-ralph-border:#eef04d;--bc-color-ralph-glow:rgba(238,240,77,0.12);--bc-color-ralph-selection:#eef04d33;--bc-color-scribe-bg:#fafaf9;--bc-color-scribe-fg:#1c1917;--bc-color-scribe-accent:#1c1917;--bc-color-scribe-border:#d6d3d1;--bc-color-scribe-glow:none;--bc-color-scribe-selection:#1c191733;--bc-color-solan-bg:#1a0f0a;--bc-color-solan-fg:#e8a87c;--bc-color-solan-accent:#f97316;--bc-color-solan-border:#f97316;--bc-color-solan-glow:rgba(249,115,22,0.15);--bc-color-solan-selection:#f9731633;--bc-color-stratia-bg:#f5f5f0;--bc-color-stratia-fg:#374151;--bc-color-stratia-accent:#4f772d;--bc-color-stratia-border:#4f772d;--bc-color-stratia-glow:none;--bc-color-stratia-selection:#4f772d33;--bc-color-tarn-bg:#0f0a0a;--bc-color-tarn-fg:#f5a089;--bc-color-tarn-accent:#dc2626;--bc-color-tarn-border:#dc2626;--bc-color-tarn-glow:rgba(220,38,38,0.2);--bc-color-tarn-selection:#dc262633;} /* ═══════════════════════════════════════════════════════════════════ bryanchasko-design-system — Typography Tokens Monospace-first:JetBrains Mono,Fira Code,IBM Plex Mono,Cascadia Code + sans-serif fallback. ═══════════════════════════════════════════════════════════════════ */ @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Fira+Code:wght@300;400;500;600;700&family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap");:root{--bc-font-mono-primary:"JetBrains Mono",monospace;--bc-font-mono-alt:"Fira Code",monospace;--bc-font-mono-editorial:"IBM Plex Mono",monospace;--bc-font-mono-system:"Cascadia Code","Consolas",monospace;--bc-font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--bc-font-body:var(--bc-font-sans);--bc-font-code:var(--bc-font-mono-primary);--bc-font-terminal:"JetBrains Mono","Fira Code","Cascadia Code","IBM Plex Mono",monospace;--bc-font-size-xs:0.694rem;--bc-font-size-sm:0.833rem;--bc-font-size-base:1rem;--bc-font-size-md:1.2rem;--bc-font-size-lg:1.44rem;--bc-font-size-xl:1.728rem;--bc-font-size-2xl:2.074rem;--bc-font-size-3xl:2.488rem;--bc-font-weight-light:300;--bc-font-weight-regular:400;--bc-font-weight-medium:500;--bc-font-weight-semibold:600;--bc-font-weight-bold:700;--bc-line-height-tight:1.2;--bc-line-height-base:1.5;--bc-line-height-relaxed:1.75;--bc-line-height-terminal:1.3;--bc-letter-spacing-tight:-0.02em;--bc-letter-spacing-normal:0;--bc-letter-spacing-wide:0.02em;--bc-letter-spacing-mono:0.04em;} /* ═══════════════════════════════════════════════════════════════════ bryanchasko-design-system — Spacing Tokens 4px base scale ═══════════════════════════════════════════════════════════════════ */:root{--bc-space-unit:4px;--bc-space-0:0;--bc-space-1:4px;--bc-space-2:8px;--bc-space-3:12px;--bc-space-4:16px;--bc-space-5:20px;--bc-space-6:24px;--bc-space-8:32px;--bc-space-10:40px;--bc-space-12:48px;--bc-space-16:64px;--bc-space-20:80px;--bc-space-24:96px;--bc-space-32:128px;--bc-space-inline-xs:var(--bc-space-1);--bc-space-inline-sm:var(--bc-space-2);--bc-space-inline-md:var(--bc-space-4);--bc-space-inline-lg:var(--bc-space-6);--bc-space-inline-xl:var(--bc-space-8);--bc-space-stack-xs:var(--bc-space-1);--bc-space-stack-sm:var(--bc-space-2);--bc-space-stack-md:var(--bc-space-4);--bc-space-stack-lg:var(--bc-space-6);--bc-space-stack-xl:var(--bc-space-8);--bc-padding-button:var(--bc-space-3) var(--bc-space-4);--bc-padding-card:var(--bc-space-6) var(--bc-space-8);--bc-padding-input:var(--bc-space-3) var(--bc-space-4);--bc-padding-section:var(--bc-space-12) var(--bc-space-8);--bc-radius-sm:4px;--bc-radius-md:6px;--bc-radius-lg:8px;--bc-radius-xl:14px;--bc-radius-full:999px;} /* ═══════════════════════════════════════════════════════════════════ bryanchasko-design-system — Effects Tokens Shadows,glassmorphism,glows Extracted from dcode frontend ═══════════════════════════════════════════════════════════════════ */:root{--bc-shadow-sm:0 1px 2px rgba(0,0,0,0.1);--bc-shadow-md:0 4px 6px rgba(0,0,0,0.15);--bc-shadow-lg:0 10px 25px rgba(0,0,0,0.25);--bc-shadow-card:0 1px 2px rgba(129,105,197,0.1),0 6px 18px rgba(129,105,197,0.18),0 2px 6px rgba(0,0,0,0.2);--bc-shadow-elevated:0 12px 40px rgba(0,0,0,0.4);--bc-shadow-focus:0 0 0 3px rgba(167,148,224,0.6);--bc-glass-bg:rgba(33,29,48,0.8);--bc-glass-bg-heavy:rgba(33,29,48,0.95);--bc-glass-bg-light:rgba(33,29,48,0.6);--bc-glass-border:rgba(59,53,86,0.6);--bc-glass-blur:blur(12px);--bc-glass-blur-heavy:blur(20px);--bc-glow-accent:0 0 20px var(--bc-color-accent,#8169c5);--bc-glow-persona:0 0 20px var(--persona-glow,transparent);--bc-glow-terminal:0 0 20px var(--persona-glow,transparent),inset 0 0 60px rgba(0,0,0,0.3);--bc-glow-intense:0 0 40px var(--persona-glow,transparent),0 0 60px var(--persona-glow,transparent),inset 0 0 60px rgba(0,0,0,0.3);--bc-inset-dark:inset 0 0 60px rgba(0,0,0,0.3);--bc-inset-highlight:inset 0 1px rgba(255,255,255,0.15);} /* ═══════════════════════════════════════════════════════════════════ bryanchasko-design-system — Motion Tokens Transitions,keyframes,prefers-reduced-motion ═══════════════════════════════════════════════════════════════════ */:root{--bc-transition-fast:150ms;--bc-transition-base:200ms;--bc-transition-slow:300ms;--bc-transition-slower:600ms;--bc-ease-default:ease-out;--bc-ease-in:ease-in;--bc-ease-in-out:ease-in-out;--bc-ease-spring:cubic-bezier(0.34,1.56,0.64,1);--bc-transition-color:color var(--bc-transition-fast) var(--bc-ease-default);--bc-transition-bg:background-color var(--bc-transition-fast) var(--bc-ease-default);--bc-transition-border:border-color var(--bc-transition-base) var(--bc-ease-default);--bc-transition-shadow:box-shadow var(--bc-transition-slow) var(--bc-ease-default);--bc-transition-opacity:opacity var(--bc-transition-base) var(--bc-ease-default);--bc-transition-transform:transform var(--bc-transition-base) var(--bc-ease-default);--bc-transition-glow:box-shadow var(--bc-transition-slower) ease,border-color var(--bc-transition-slower) ease;--bc-transition-all:all var(--bc-transition-base) var(--bc-ease-default);} @keyframes bc-fade-in{from{opacity:0;} to{opacity:1;} } @keyframes bc-fade-out{from{opacity:1;} to{opacity:0;} } @keyframes bc-slide-up{from{opacity:0;transform:translateY(20px) scale(0.95);} to{opacity:1;transform:translateY(0) scale(1);} } @keyframes bc-slide-down{from{opacity:0;transform:translateY(-10px);} to{opacity:1;transform:translateY(0);} } @keyframes bc-glow-pulse{0%{box-shadow:var(--bc-glow-terminal);} 50%{box-shadow:var(--bc-glow-intense);} 100%{box-shadow:var(--bc-glow-terminal);} } @keyframes bc-spin{from{transform:rotate(0deg);} to{transform:rotate(360deg);} } @keyframes bc-scale-in{from{transform:scale(0.9);opacity:0;} to{transform:scale(1);opacity:1;} } @media (prefers-reduced-motion:reduce){:root{--bc-transition-fast:0ms;--bc-transition-base:0ms;--bc-transition-slow:0ms;--bc-transition-slower:0ms;} *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;} } /* ═══════════════════════════════════════════════════════════════════ bryanchasko-design-system — Button Components ═══════════════════════════════════════════════════════════════════ */ .bc-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--bc-space-2);padding:var(--bc-padding-button);min-height:44px;font-family:inherit;font-size:var(--bc-font-size-base);font-weight:var(--bc-font-weight-medium);line-height:var(--bc-line-height-tight);color:var(--bc-color-on-accent);background:var(--bc-color-accent);border:none;border-radius:var(--bc-radius-lg);cursor:pointer;text-decoration:none;box-shadow:var(--bc-inset-highlight);transition:var(--bc-transition-bg),var(--bc-transition-shadow);} .bc-btn:hover:not(:disabled){background:var(--bc-color-accent-hover);} .bc-btn:focus-visible{outline:none;box-shadow:var(--bc-shadow-focus);} .bc-btn:disabled{opacity:0.6;cursor:not-allowed;} .bc-btn--outline{background:transparent;color:var(--bc-color-text);border:1px solid var(--bc-color-border);} .bc-btn--outline:hover:not(:disabled){border-color:var(--bc-color-accent);background:transparent;} .bc-btn--ghost{background:transparent;color:var(--bc-color-text-muted);border:1px solid var(--bc-color-border);font-size:var(--bc-font-size-sm);padding:var(--bc-space-2) var(--bc-space-3);min-height:36px;} .bc-btn--ghost:hover:not(:disabled){border-color:var(--bc-color-accent);background:transparent;} .bc-btn--sm{font-size:var(--bc-font-size-sm);padding:var(--bc-space-2) var(--bc-space-3);min-height:36px;} .bc-btn--lg{font-size:var(--bc-font-size-md);padding:var(--bc-space-4) var(--bc-space-6);min-height:52px;} .bc-btn--full{width:100%;} /* ═══════════════════════════════════════════════════════════════════ bryanchasko-design-system — Card Components ═══════════════════════════════════════════════════════════════════ */ .bc-card{background:var(--bc-color-surface);border:1px solid var(--bc-color-border);border-radius:var(--bc-radius-xl);padding:var(--bc-padding-card);box-shadow:var(--bc-shadow-card);} .bc-card--elevated{box-shadow:var(--bc-shadow-elevated);} .bc-card--interactive{transition:var(--bc-transition-transform),var(--bc-transition-shadow);cursor:pointer;} .bc-card--interactive:hover{transform:scale(1.03);box-shadow:var(--bc-shadow-elevated);} .bc-card--interactive:focus-visible{outline:none;box-shadow:var(--bc-shadow-focus);} .bc-card--persona{border-color:var(--card-accent,var(--bc-color-accent));box-shadow:0 0 30px color-mix( in srgb,var(--card-accent,var(--bc-color-accent)) 60%,transparent ),0 12px 40px rgba(0,0,0,0.4);} .bc-card__header{margin-bottom:var(--bc-space-4);} .bc-card__title{font-size:var(--bc-font-size-lg);font-weight:var(--bc-font-weight-semibold);margin-bottom:var(--bc-space-2);} .bc-card__body{color:var(--bc-color-text-muted);font-size:var(--bc-font-size-sm);} .bc-card__footer{margin-top:var(--bc-space-6);display:flex;align-items:center;gap:var(--bc-space-3);} .bc-card--animate{animation:bc-slide-up 300ms ease-out forwards;animation-delay:calc(var(--card-index,0) * 80ms);opacity:0;} /* ═══════════════════════════════════════════════════════════════════ bryanchasko-design-system — Form Components ═══════════════════════════════════════════════════════════════════ */ .bc-input{display:block;width:100%;min-height:44px;padding:var(--bc-padding-input);font-family:inherit;font-size:var(--bc-font-size-base);color:var(--bc-color-text);background:var(--bc-color-bg);border:1px solid var(--bc-color-border);border-radius:var(--bc-radius-lg);transition:var(--bc-transition-border),var(--bc-transition-shadow);} .bc-input:focus{outline:none;border-color:var(--bc-color-accent);box-shadow:var(--bc-shadow-focus);} .bc-input::placeholder{color:var(--bc-color-text-muted);} .bc-label{display:block;margin-bottom:var(--bc-space-1);color:var(--bc-color-text-muted);font-size:var(--bc-font-size-sm);font-weight:var(--bc-font-weight-medium);} .bc-form-group{margin-bottom:var(--bc-space-4);} .bc-textarea{display:block;width:100%;min-height:120px;padding:var(--bc-padding-input);font-family:var(--bc-font-mono-primary);font-size:var(--bc-font-size-sm);color:var(--bc-color-text);background:var(--bc-color-bg);border:1px solid var(--bc-color-border);border-radius:var(--bc-radius-lg);resize:vertical;transition:var(--bc-transition-border),var(--bc-transition-shadow);} .bc-textarea:focus{outline:none;border-color:var(--bc-color-accent);box-shadow:var(--bc-shadow-focus);} .bc-input--error,.bc-textarea--error{border-color:var(--bc-color-error);} .bc-error-message{color:var(--bc-color-error);font-size:var(--bc-font-size-sm);margin-top:var(--bc-space-1);} .bc-select{display:block;width:100%;min-height:44px;padding:var(--bc-padding-input);font-family:inherit;font-size:var(--bc-font-size-base);color:var(--bc-color-text);background:var(--bc-color-bg);border:1px solid var(--bc-color-border);border-radius:var(--bc-radius-lg);appearance:none;cursor:pointer;} /* ═══════════════════════════════════════════════════════════════════ bryanchasko-design-system — Glass Components Glassmorphism panels extracted from dcode frontend ═══════════════════════════════════════════════════════════════════ */ .bc-glass{background:var(--bc-glass-bg);backdrop-filter:var(--bc-glass-blur);-webkit-backdrop-filter:var(--bc-glass-blur);border:1px solid var(--bc-glass-border);border-radius:var(--bc-radius-xl);} .bc-glass--heavy{background:var(--bc-glass-bg-heavy);backdrop-filter:var(--bc-glass-blur-heavy);-webkit-backdrop-filter:var(--bc-glass-blur-heavy);} .bc-glass--light{background:var(--bc-glass-bg-light);} .bc-glass-card{background:var(--bc-glass-bg);backdrop-filter:var(--bc-glass-blur);-webkit-backdrop-filter:var(--bc-glass-blur);border:1px solid var(--bc-glass-border);border-radius:var(--bc-radius-xl);padding:var(--bc-padding-card);box-shadow:var(--bc-shadow-card);} .bc-glass--glow{border-color:var(--persona-border,var(--bc-color-border));box-shadow:var(--bc-glow-terminal);} .bc-glass--glow-pulse{border-color:var(--persona-border,var(--bc-color-border));animation:bc-glow-pulse 600ms ease-in-out;} .bc-glass-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:var(--bc-glass-blur);-webkit-backdrop-filter:var(--bc-glass-blur);z-index:100;} /* ═══════════════════════════════════════════════════════════════════ bryanchasko-design-system — Theme Toggle Component Sun/Moon toggle button for light/dark mode switching ═══════════════════════════════════════════════════════════════════ */ .bc-theme-toggle{appearance:none;border:none;background:transparent;cursor:pointer;padding:var(--bc-space-2,8px);border-radius:var(--bc-radius-md,8px);display:inline-flex;align-items:center;justify-content:center;position:relative;width:40px;height:40px;color:var(--bc-color-text);transition:background-color 0.2s ease,color 0.2s ease,transform 0.2s ease;} .bc-theme-toggle:hover{background:var(--bc-color-surface-2,rgba(128,128,128,0.1));transform:scale(1.05);} .bc-theme-toggle:active{transform:scale(0.95);} .bc-theme-toggle:focus-visible{outline:none;box-shadow:var(--bc-shadow-focus,0 0 0 3px rgba(129,105,197,0.4));border-radius:var(--bc-radius-md,8px);} .bc-theme-toggle svg{width:20px;height:20px;transition:opacity 0.25s ease,transform 0.3s ease;} .bc-theme-toggle .bc-icon-sun{display:none;} .bc-theme-toggle .bc-icon-moon{display:block;} :root[data-theme="dark"] .bc-theme-toggle .bc-icon-sun{display:block;} :root[data-theme="dark"] .bc-theme-toggle .bc-icon-moon{display:none;} .bc-theme-toggle .bc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;} @media (prefers-reduced-motion:reduce){.bc-theme-toggle,.bc-theme-toggle svg{transition:none;} .bc-theme-toggle:hover{transform:none;} .bc-theme-toggle:active{transform:none;} } /* ═══════════════════════════════════════════════════════════════════ bryanchasko-design-system — Scanlines Effect CRT scanline overlay extracted from dcode frontend ═══════════════════════════════════════════════════════════════════ */ .bc-scanlines{position:relative;} .bc-scanlines::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient( 0deg,rgba(0,0,0,0.03) 0px,rgba(0,0,0,0.03) 1px,transparent 1px,transparent 2px );pointer-events:none;z-index:10;} .bc-scanlines--heavy::after{background:repeating-linear-gradient( 0deg,rgba(0,0,0,0.08) 0px,rgba(0,0,0,0.08) 1px,transparent 1px,transparent 2px );} .bc-scanlines--animated::after{animation:bc-scanline-drift 8s linear infinite;} @keyframes bc-scanline-drift{from{transform:translateY(0);} to{transform:translateY(4px);} } /* ═══════════════════════════════════════════════════════════════════ bryanchasko-design-system — Noise Effect Film grain / TV static texture overlay ═══════════════════════════════════════════════════════════════════ */ .bc-noise{position:relative;} .bc-noise::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");opacity:0.03;pointer-events:none;z-index:5;mix-blend-mode:overlay;} .bc-noise--heavy::before{opacity:0.06;} .bc-noise--subtle::before{opacity:0.015;} .bc-noise--animated::before{animation:bc-noise-shift 200ms steps(10) infinite;} @keyframes bc-noise-shift{0%{transform:translate(0,0);} 10%{transform:translate(-1%,-1%);} 20%{transform:translate(1%,0.5%);} 30%{transform:translate(-0.5%,1%);} 40%{transform:translate(0.5%,-0.5%);} 50%{transform:translate(-1%,0.5%);} 60%{transform:translate(1%,-1%);} 70%{transform:translate(0.5%,1%);} 80%{transform:translate(-0.5%,-0.5%);} 90%{transform:translate(1%,0.5%);} 100%{transform:translate(0,0);} } /* ═══════════════════════════════════════════════════════════════════ bryanchasko-design-system — Vignette Effect Dark-edge CRT / cinematic vignette ═══════════════════════════════════════════════════════════════════ */ .bc-vignette{position:relative;} .bc-vignette::after{content:"";position:absolute;inset:0;background:radial-gradient( ellipse at center,transparent 50%,rgba(0,0,0,0.4) 100% );pointer-events:none;z-index:5;} .bc-vignette--subtle::after{background:radial-gradient( ellipse at center,transparent 60%,rgba(0,0,0,0.2) 100% );} .bc-vignette--heavy::after{background:radial-gradient( ellipse at center,transparent 40%,rgba(0,0,0,0.6) 100% );} /* ═══════════════════════════════════════════════════════════════════ bryanchasko-design-system — Grid Effect Subtle background grid overlay (HUD / terminal aesthetic) ═══════════════════════════════════════════════════════════════════ */ .bc-grid{position:relative;} .bc-grid::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px);background-size:20px 20px;pointer-events:none;z-index:1;} .bc-grid--fine::before{background-size:10px 10px;} .bc-grid--wide::before{background-size:40px 40px;} .bc-grid--accent::before{background-image:linear-gradient( color-mix( in srgb,var(--persona-border,var(--bc-color-accent)) 5%,transparent ) 1px,transparent 1px ),linear-gradient( 90deg,color-mix( in srgb,var(--persona-border,var(--bc-color-accent)) 5%,transparent ) 1px,transparent 1px );} .bc-grid--dots::before{background-image:radial-gradient( circle,rgba(255,255,255,0.04) 1px,transparent 1px );background-size:20px 20px;}