/* ============================================================ CRAZY — theme.css Palette, typography, and the ESCALATION color system. The whole screen is driven by CSS custom properties so the engine can ramp the mood by setting two numbers on :root: --instability : 0 (calm) .. 1 (total fracture) data-tier : 0 .. 7 (the named escalation tiers) ============================================================ */ :root { /* ---- Typeface: a robust monospace stack, no external fonts. (Buildless + offline + private-repo-safe: nothing is fetched.) ---- */ --crazy-font: "Cascadia Mono", "Consolas", "SF Mono", "DejaVu Sans Mono", "Liberation Mono", "Menlo", "Courier New", ui-monospace, monospace; /* ---- Base phosphor palette (TIER 0 / calm) ---- */ --bg: #04070a; --bg-deep: #010203; --fg: #9ff7d8; /* gentle phosphor mint */ --fg-dim: #4d8f7e; --fg-bright: #d6fff0; /* ---- Neon accents (retro-futuristic) ---- */ --accent-cyan: #2ff3ff; --accent-magenta: #ff2bd6; --accent-amber: #ffb347; --accent-red: #ff3b5c; --accent-violet: #8a5cff; /* ---- Speaker colors ---- */ --voice-system: var(--fg); /* CRAZY speaks */ --voice-you: var(--accent-cyan); /* you type */ --voice-meta: var(--accent-violet); /* the screen itself / stage directions */ /* ---- Glow strength (escalates) ---- */ --glow: 0.55; --glow-color: var(--fg); /* ---- The two escalation dials (engine-driven) ---- */ --instability: 0; --shake: 0; /* px of screen shake amplitude */ /* ---- CRT physical params ---- */ --scanline-opacity: 0.12; --flicker-opacity: 0.03; --vignette: 0.85; /* ---- Layout ---- */ --screen-max: 920px; --pad: clamp(14px, 3.5vw, 40px); --fs-base: clamp(15px, 1.05rem + 0.3vw, 20px); --line: 1.55; } /* ============================================================ TIER COLOR RAMP Each tier nudges the phosphor hue toward something less safe. Tiers 0–2: calm mint/cyan. 3–4: amber unease. 5–6: magenta gaslight. 7: red fracture. The engine sets . ============================================================ */ body[data-tier="0"], body[data-tier="1"] { --fg: #9ff7d8; --glow-color: #6ff3cf; --glow: 0.5; } body[data-tier="2"] { --fg: #a8f5cf; --glow-color: #7af0c2; --glow: 0.6; } body[data-tier="3"] { --fg: #cfe9a6; --glow-color: #ffd27a; --glow: 0.7; } body[data-tier="4"] { --fg: #ffd089; --glow-color: var(--accent-amber); --glow: 0.8; --voice-system: #ffcf8a; } body[data-tier="5"] { --fg: #ff9fe0; --glow-color: var(--accent-magenta); --glow: 0.92; --voice-system: #ff9fe0; } body[data-tier="6"] { --fg: #ff7ad0; --glow-color: var(--accent-magenta); --glow: 1; --voice-system: #ff7ad0; } body[data-tier="7"] { --fg: #ff5c6e; --glow-color: var(--accent-red); --glow: 1.1; --voice-system: #ff5c6e; --voice-you: #ff9aa6; } /* ============================================================ TYPOGRAPHY ============================================================ */ body { font-size: var(--fs-base); letter-spacing: 0.02em; } .line { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0.18em 0; } .line.system { color: var(--voice-system); } .line.you { color: var(--voice-you); } .line.you::before { content: "> "; opacity: 0.7; } .line.meta { color: var(--voice-meta); font-style: italic; opacity: 0.92; } .line.system .speaker, .line.you .speaker { opacity: 0.55; letter-spacing: 0.16em; font-size: 0.78em; text-transform: uppercase; } /* Text glow — escalates with --glow. Kept off the critical render path (text-shadow only) so it stays cheap. */ .glow, .line { text-shadow: 0 0 calc(2px + 6px * var(--glow)) color-mix(in srgb, var(--glow-color) calc(60% * var(--glow)), transparent), 0 0 calc(1px + 2px * var(--glow)) color-mix(in srgb, var(--glow-color) 40%, transparent); } /* Accent helpers used inside dialogue markup. */ .k-cyan { color: var(--accent-cyan); } .k-magenta { color: var(--accent-magenta); } .k-amber { color: var(--accent-amber); } .k-red { color: var(--accent-red); } .k-dim { color: var(--fg-dim); } .k-bold { font-weight: 700; } /* The blinking cursor block. */ .cursor { display: inline-block; width: 0.62em; height: 1.05em; margin-left: 0.04em; vertical-align: text-bottom; background: var(--fg); box-shadow: 0 0 calc(6px * var(--glow)) var(--glow-color); animation: crazy-blink 1.05s steps(1) infinite; } @keyframes crazy-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* ELM #4 — the terminal-fray held cursor. The descent's last clause never closes; the cursor simply waits inside it (the breath does not return). Reuses crazy-blink (~1 Hz, well under the 3 Hz photosensitivity cap) and goes static under reduced- motion (see crt.css). A held caret, never a flash. */ .fray-cursor { color: var(--fg); text-shadow: 0 0 calc(5px * var(--glow)) var(--glow-color); animation: crazy-blink 1.05s steps(1) infinite; }