:root {
--ph-slate-950: #0A0C0F; 
--ph-slate-900: #11141A; 
--ph-slate-850: #0D1014; 
--ph-slate-800: #181C23; 
--ph-slate-750: #21262F; 
--ph-slate-700: #2A2F38;
--ph-slate-500: #626B78; 
--ph-slate-400: #8E97A5;
--ph-slate-300: #C6CCD6;
--ph-slate-50: #F3F5F8;
--ph-blue-600: #2563EB;
--ph-blue-400: #8E97A5; 
--ph-gold-500: #F59E0B; 
--ph-gold-400: #FBBF24;
--ph-green-500: #34D399;
--ph-amber-400: #FBBF24;
--ph-red-500: #F87171;
--ph-bg-canvas: var(--ph-slate-900); 
--ph-bg-deep: var(--ph-slate-950); 
--ph-bg-surface: var(--ph-slate-800);
--ph-bg-surface-solid: var(--ph-slate-800);
--ph-bg-raised: var(--ph-slate-750); 
--ph-bg-sunken: var(--ph-slate-850); 
--ph-bg-nav: rgba(10, 12, 15, 0.85);
--ph-brand-blue: var(--ph-blue-600);
--ph-axis-help: #2563EB;
--ph-axis-help-soft: rgba(37, 99, 235, 0.20);
--ph-axis-help-text: #93B4F5;
--ph-voice: #F4736A;
--ph-voice-line: rgba(244, 115, 106, 0.55); 
--ph-voice-solid: #5A1A16; 
--ph-brand-gold: var(--ph-gold-500);
--ph-gold-hover: var(--ph-gold-400);
--ph-gold-quiet: rgba(245, 158, 11, 0.13); 
--ph-gold-line: rgba(245, 158, 11, 0.42);
--ph-text-heading: var(--ph-slate-50); 
--ph-text-body: var(--ph-slate-300); 
--ph-text-muted: var(--ph-slate-400); 
--ph-text-faint: var(--ph-slate-500);
--ph-text-on-gold: var(--ph-slate-950); 
--ph-text-link: var(--ph-brand-gold);
--ph-status-success: var(--ph-green-500); 
--ph-status-warn: var(--ph-amber-400); 
--ph-blood: #C81E22;
--ph-status-danger: var(--ph-red-500); 
--ph-tier-1: #7E8896;
--ph-tier-2: #AAB4C2;
--ph-tier-3: var(--ph-brand-gold);
--ph-brand-youtube: #E60000;
--ph-brand-youtube-hover: #BE1313;
--ph-size-yt-label: 15px; 
--ph-border: rgba(255, 255, 255, 0.085);
--ph-border-subtle: rgba(255, 255, 255, 0.06);
--ph-border-strong: rgba(255, 255, 255, 0.16);
--ph-border-gold: rgba(245, 158, 11, 0.4);
--ph-tint-gold: rgba(245, 158, 11, 0.12);
--ph-tint-blue: rgba(255, 255, 255, 0.06);
--ph-tint-green: rgba(16, 185, 129, 0.12);
--ph-tint-red: rgba(239, 68, 68, 0.12);
--ph-tint-white: rgba(255, 255, 255, 0.06);
--ph-font-body: 'Sarabun', sans-serif;
--ph-font-heading: 'Sarabun', sans-serif;
--ph-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--ph-font-tactical: 'Bebas Neue', 'Sarabun', sans-serif;
--ph-size-hero: clamp(1.75rem, 1.16rem + 2.62vw, 2.5rem);
--ph-size-display: clamp(1.765rem, 1.16rem + 2.6vw, 2.588rem); 
--ph-size-h1: clamp(1.47rem, 1.09rem + 1.6vw, 1.882rem); 
--ph-size-h2: clamp(1.176rem, 0.96rem + 0.93vw, 1.412rem); 
--ph-size-h3: 1.118rem; 
--ph-size-h4: 1rem;
--ph-size-base: 1rem; 
--ph-size-md: 1rem; 
--ph-size-sm: 0.882rem; 
--ph-size-xs: 0.765rem; 
--ph-size-2xs: 0.706rem; 
--ph-size-3xs: 0.647rem; 
--ph-size-caption: 0.7059rem;
--ph-size-featured: 1.882rem;
--ph-leading-body: 1.7;
--ph-leading-heading: 1.34;
--ph-leading-display: 1.14;
--ph-leading-tight: 1.5;
--ph-weight-normal: 400;
--ph-weight-medium: 500;
--ph-weight-semi: 600;
--ph-weight-bold: 700;
--ph-weight-heading: 600;
--ph-tracking-tactical: 1px;
--ph-tracking-label: 0.5px;
--ph-space-3xs: 4px;
--ph-space-2xs: 6px;
--ph-space-xs: 8px;
--ph-space-sm: 10px;
--ph-space-md: 12px;
--ph-space-lg: 16px;
--ph-space-xl: 20px;
--ph-space-2xl: 24px;
--ph-space-3xl: 28px;
--ph-space-4xl: 32px;
--ph-space-5xl: 40px;
--ph-space-6xl: 48px;
--ph-gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem);
--ph-gap-block: clamp(24px, 3vw, 40px);
--ph-gap-section: clamp(44px, 5.2vw, 76px);
--ph-arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E");
--ph-alert-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E");
--ph-grad-help: linear-gradient(
145deg,
rgba(37, 99, 235, 0.28) 0%,
var(--ph-bg-raised) 46%,
var(--ph-bg-deep) 100%
);
--ph-grad-voice: linear-gradient(
330deg,
rgba(244, 115, 106, 0.28) 0%,
rgba(244, 115, 106, 0.10) 55%,
rgba(244, 115, 106, 0) 100%
);
--ph-ad-h-mobile: 280px; 
--ph-ad-h-desktop: 120px; 
--ph-placeholder: repeating-linear-gradient(
115deg, var(--ph-bg-sunken) 0 8px, var(--ph-bg-surface) 8px 16px);
--ph-w-prose: 68ch; 
--ph-jump-h: 73px;
--ph-header-sticky-h: 60px;
--ph-w-content: 1280px;
--ph-container-pad: 20px;
--ph-w-wide: 1440px;
--ph-radius-xs: 4px;
--ph-radius-sm: 6px;
--ph-radius-md: 8px;
--ph-radius-lg: 12px;
--ph-radius-pill: 999px;
--ph-blur-glass: 16px;
--ph-blur-nav: 12px;
--ph-shadow-lift:
0 10px 25px -5px rgba(245, 158, 11, 0.15),
0 0 20px -5px rgba(245, 158, 11, 0.08);
--ph-lift: -4px;
--ph-transition: 0.2s ease;
--ph-ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
}
html {
color-scheme: dark;
}
body {
background-color: var(--ph-bg-canvas);
color: var(--ph-text-body);
font-family: var(--ph-font-body);
font-size: var(--ph-size-base);
line-height: var(--ph-leading-body);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--ph-font-heading);
color: var(--ph-text-heading);
line-height: var(--ph-leading-heading);
}
h1 { font-size: var(--ph-size-h1); }
h2 { font-size: var(--ph-size-h2); }
h3 { font-size: var(--ph-size-h3); }
h4 { font-size: var(--ph-size-h4); }
a { color: var(--ph-text-link); }
.ph-layout {
display: grid;
grid-template-columns:
[full-start] var(--ph-gutter)
[wide-start] minmax(0, calc((var(--ph-w-wide) - var(--ph-w-content)) / 2))
[content-start] minmax(0, calc((var(--ph-w-content) - var(--ph-w-prose)) / 2))
[prose-start] minmax(0, var(--ph-w-prose)) [prose-end]
minmax(0, calc((var(--ph-w-content) - var(--ph-w-prose)) / 2)) [content-end]
minmax(0, calc((var(--ph-w-wide) - var(--ph-w-content)) / 2)) [wide-end]
var(--ph-gutter) [full-end];
}
.ph-layout > * { grid-column: content; min-width: 0; }
.ph-layout > .ph-prose { grid-column: prose; }
.ph-layout > .ph-wide { grid-column: wide; }
.ph-layout > .ph-full { grid-column: full; }
.ph-glass {
background: var(--ph-bg-surface);
backdrop-filter: blur(var(--ph-blur-glass));
-webkit-backdrop-filter: blur(var(--ph-blur-glass));
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-lg);
}
.ph-glass--interactive {
transition:
transform var(--ph-transition),
box-shadow var(--ph-transition),
border-color var(--ph-transition);
}
.ph-glass--interactive:hover {
transform: translateY(var(--ph-lift));
box-shadow: var(--ph-shadow-lift);
border-color: rgba(245, 158, 11, 0.3);
}
.ph-tactical {
font-family: var(--ph-font-tactical);
letter-spacing: var(--ph-tracking-tactical);
}
@media (max-width: 921px) {
:root { --ph-header-sticky-h: 60px; }
}
@media (prefers-reduced-motion: reduce) {
.ph-glass--interactive,
.ph-glass--interactive:hover {
transition: none;
transform: none;
}
}