/* ── Reset & base ──────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/*
* ── Design tokens ─────────────────────────────────────────────
*
* Colors
* bg: #040714
* surface-1 (cards): rgba(255,255,255,.03)
* surface-2 (hover): rgba(255,255,255,.06)
* border-subtle: rgba(255,255,255,.07)
* border: rgba(255,255,255,.1)
* border-strong: rgba(255,255,255,.22)
* blue accent: #0063e5
* blue accent bright: #0080ff
* text primary: #f9f9f9
* text secondary: #cacaca
* text muted: rgba(255,255,255,.55)
* header gradient: in oklch 135deg, #B015B0 0%, #3D0080 50%, #040714 100%
*
* Typography scale (rem)
* --text-xs: 0.75 --text-sm: 0.875 --text-base: 1
* --text-lg: 1.125 --text-xl: 1.25 --text-2xl: 1.5
* font stack: 'Avenir Next', -apple-system, BlinkMacSystemFont,
* 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif
*
* Spacing scale (4px grid)
* --space-1: 4px --space-2: 8px --space-3: 12px --space-4: 16px
* --space-6: 24px --space-8: 32px
*
* Radii
* --radius-sm: 6px --radius: 10px --radius-lg: 15px
*
* Easing
* --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1) (spring/overshoot)
* --dur-fast: 120ms --dur: 200ms
*
* UI primitives
* --control-height: 44px (touch minimum)
* --control-height-sm: 36px
* --z-sticky-header: 200 --z-modal: 400 --z-toast: 500
*/
:root {
--bg: #040714;
--surface-1: rgba(255,255,255,.03);
--surface-2: rgba(255,255,255,.06);
--surface-toast: #1a1730;
--border-subtle: rgba(255,255,255,.07);
--border: rgba(255,255,255,.1);
--border-strong: rgba(255,255,255,.22);
--text-primary: #f9f9f9;
--text-secondary: #cacaca;
--text-muted: rgba(255,255,255,.55);
--accent: #0063e5;
--accent-bright: #0080ff;
--danger: #e11d48;
--danger-hover: #f43f5e;
--font: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
--text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
--text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem;
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-6: 24px; --space-8: 32px;
--radius-sm: 6px; --radius: 10px; --radius-lg: 15px;
--ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
--dur-fast: 120ms; --dur: 200ms;
--control-height: 44px;
--control-height-sm: 36px;
--shadow-card: 0 12px 28px rgba(15, 23, 42, 0.5);
--shadow-modal: 0 24px 48px rgba(2, 6, 23, 0.58);
--z-sticky-header: 200;
--z-modal: 400;
--z-toast: 500;
}
html { height: 100%; }
body {
font-family: var(--font);
background: var(--bg);
min-height: 100%;
color: var(--text-primary);
display: flex; flex-direction: column;
}
body.modal-open {
overflow: hidden;
}
main#main {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
width: 100%;
}
/* ── Layout ────────────────────────────────────────────────── */
/*
* GOTCHA: body { display:flex; flex-direction:column } + margin: 0 auto
* on a child collapses its width — always pair with width: 100%.
*
* GOTCHA: External images (YouTube ggpht, Gravatar, etc.) may block loading
* when the Referer header points to localhost or an unknown origin. Fix:
* 1. Add in (global)
* 2. Or add referrerpolicy="no-referrer" on each ![]()
tag
*/
.container {
max-width: 900px;
width: 100%;
margin: 0 auto;
padding: var(--space-6);
flex: 1;
}
/* Vertical rhythm: use inside .container or nested regions */
.stack {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.stack--tight { gap: var(--space-4); }
.stack--loose { gap: var(--space-8); }
/* Page section: title row + body (replaces “card everything” for grouping) */
.section {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.section__header {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-4);
}
.section__titles {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 0;
}
.section__title {
font-size: var(--text-xl);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--text-primary);
}
.section__lead {
font-size: var(--text-sm);
color: var(--text-muted);
line-height: 1.45;
max-width: 52ch;
}
.section__lead code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-size: 0.92em;
color: var(--text-secondary);
}
.stack > .card { margin-bottom: 0; }
.toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
/* ── Header ────────────────────────────────────────────────── */
.header-bar {
background: linear-gradient(in oklch 135deg, #B015B0 0%, #3D0080 50%, #040714 100%);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-subtle);
padding: 0 var(--space-6);
height: 68px;
position: sticky;
top: 0;
z-index: var(--z-sticky-header);
display: flex;
align-items: center;
}
.header-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-logo-img {
height: 36px; width: auto; flex-shrink: 0;
filter: brightness(0) invert(1);
transition: transform 0.3s var(--ease-snap);
display: block;
}
.header-logo-img:hover { transform: scale(1.14) rotate(-9deg); }
.header-title-link { text-decoration: none; color: inherit; }
.header-logo h1 { font-size: 1.2em; font-weight: 600; color: var(--text-primary); letter-spacing: .5px; }
.header-subtitle { font-size: .82em; color: rgba(255,255,255,.72); font-weight: 500; margin-top: 3px; }
/* ── Nav & Auth ────────────────────────────────────────────── */
/*
* THREE PATTERNS:
* A) No nav, no auth → margin-left: auto on .header-home
* B) Auth only → margin-left: auto on .auth-toggle, margin-left: 8px on .header-home
* C) Nav + auth → margin-left: auto on