/* ───────────────────────────────────────────────────────────────────────────── DIRECTION CONTRACT — "The Lit Slab" THESIS: Theory 101 is one slab of stone; every control is carved out of it and lights from within when touched. Refuses grey-plastic soft UI and its opposite, near-black-plus-neon. OWN-WORLD: One continuous ground — panels never differ in color from the page. Depth only from paired offset shadows: cool shade down-right, pale sheen up-left; inverting them presses the form. One warm accent, candlelight amber, appears only where the learner is live or has earned it. Flared humanist type (Candara/Optima) cut into the surface. STORY: The learner meets a calm instrument panel, reads progress as how much of the stone is lit, answers, and feels the material warm. FIRST VIEWPORT: Full-bleed stone. Incised "Theory 101" label, display title at one third height, three proficiency slabs raised from the surface, focus chips as pressed pebbles, and Begin as a single amber-lit key. FORM: Brief-pinned world (neumorphic + ethereal). A pinned direction beats the roll, so no seed key was drawn. RENDITION: Daylight is primary — pale porcelain, minimal blue, the airiest the material goes. The blue-hour rendition is preserved but opt-in via ``; it no longer follows the OS. ───────────────────────────────────────────────────────────────────────────── */ :root { color-scheme: light; /* The single material. Every surface is this color. Pale porcelain: barely blue, and deliberately not soft UI's #e0e5ec grey. */ --stone: #edf0f6; /* The shadow pair that produces all depth. Never fills. */ --shade: #c3cad9; --sheen: #ffffff; /* Ink — every value measured against the stone, all clearing AA. */ --ink: #232a3b; /* 12.6:1 */ --ink-soft: #4a5468; /* 6.6:1 */ --ink-faint: #5b6478; /* 5.2:1 */ /* Notation. Staff lines and ledger lines are CONTENT, not chrome, so they get their own token instead of borrowing the shadow color — that was the bug that made the staff unreadable. */ --rule: #5a6478; /* 5.5:1 */ /* A piano's black keys are black in any light. */ --key-black: #2b3242; /* The light inside the stone. */ --glow: #8a5a12; /* 5.2:1 — clears AA text and the 3:1 non-text floor */ --glow-deep: #5c3c0a; --glow-text: var(--glow); --glow-halo: rgba(138, 90, 18, 0.26); --glow-edge: rgba(92, 60, 10, 0.55); /* Answer feedback. State, not palette. */ --right: #1a6b49; /* 5.7:1 */ --right-halo: rgba(26, 107, 73, 0.22); --wrong: #a8324c; /* 5.7:1 */ --wrong-halo: rgba(168, 50, 76, 0.20); /* Depth vocabulary */ --raised: -6px -6px 14px var(--sheen), 8px 8px 20px var(--shade); --raised-sm: -4px -4px 9px var(--sheen), 5px 5px 12px var(--shade); --settled: -4px -4px 10px var(--sheen), 5px 6px 14px var(--shade); --pressed: inset -5px -5px 12px var(--sheen), inset 6px 6px 14px var(--shade); --pressed-sm: inset -3px -3px 7px var(--sheen), inset 3px 3px 8px var(--shade); --pressed-xs: inset -2px -2px 4px var(--sheen), inset 2px 2px 5px var(--shade); /* The warming. One bloom at one radius everywhere, so hover IS the moment rather than seven different glows at six different sizes. */ --warm: 0 0 24px var(--glow-halo); /* Lettering cut into the stone. On a pale ground the classic debossed reading is a crisp sheen highlight directly below the glyph with a faint shadow above — a blurred pair here just reads muddy at display size. */ --incised: 0 1px 0 var(--sheen), 0 -1px 1px var(--shade); /* Type — incised display, workhorse body. No webfont request. */ --font-display: Candara, Optima, "Gill Sans Nova", "Segoe UI Variable Display", "Trebuchet MS", sans-serif; --font-body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; --font-label: "Segoe UI Variable Small", "Segoe UI", system-ui, sans-serif; --step-label: 0.8rem; --step--1: clamp(0.84rem, 0.81rem + 0.12vw, 0.9rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.08rem); --step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); --step-2: clamp(1.4rem, 1.24rem + 0.8vw, 1.9rem); --step-3: clamp(2rem, 1.6rem + 2vw, 3.25rem); /* The floating rail: "Stone & light" and "Ask the tutor" are fixed to the bottom corners of every screen. Page content has to clear that band or it ends up level with them - which is how "Start over" came to sit in line with both pills. One value, so the clearance and the pills cannot drift: --sp-md of offset plus the pill's own height. */ --rail: 4.2rem; /* Space */ --sp-xs: 6px; --sp-sm: 12px; --sp-md: 20px; --sp-lg: 34px; --sp-xl: 56px; /* Shape */ --r-pebble: 14px; --r-slab: 26px; --r-well: 20px; --r-full: 999px; /* Motion — one authored moment: the material warming, then settling. */ --ease-settle: cubic-bezier(0.16, 0.84, 0.28, 1); --dur-warm: 240ms; /* Rank tiers — a hue shift on the mark, never a filled badge. */ --iron: #545e74; --bronze: #8a5a2c; --silver: #4f5b72; --gold: #8a5a12; --platinum: #1f6f68; --diamond: #3f5aa6; --master: #6f3aa8; /* amethyst - the tier past the gems */ } /* The blue-hour rendition: the same stone at night. Preserved and complete, but opt-in — set data-theme="dark" on . It is deliberately NOT wired to prefers-color-scheme any more, because the dark blue ground is what made the interface feel heavy and the staff unreadable. */ :root[data-theme="dark"] { color-scheme: dark; --stone: #232a3b; --shade: #161b27; --sheen: #313b54; --ink: #eef1f8; /* 12.7:1 */ --ink-soft: #aeb8ce; /* 7.2:1 */ --ink-faint: #939ebb; /* 5.4:1 */ --rule: #9aa6c2; /* 5.9:1 — was the shadow color, i.e. invisible */ --key-black: #12161f; /* On a dark ground the glyph is lighter than the stone, so the highlight goes above and the shadow below — the inverse of the daylight reading. */ --incised: 0 -1px 0 var(--sheen), 0 1px 2px var(--shade); --glow: #f2bd6c; /* 8.4:1 */ /* Was #c98f3e, which reads 5.1:1 on the flat stone but only 4.49:1 once .roomlight washes the ground with --sheen - just under AA at the top of the page. Raised to the value theme.js derives for this material, so the hand-tuned rendition and every generated one now agree. */ --glow-deep: #e39a2c; /* 6.1:1 flat, 5.4:1 lit */ --glow-halo: rgba(242, 189, 108, 0.30); --glow-edge: rgba(242, 189, 108, 0.55); --right: #79d9ae; /* 8.4:1 */ --right-halo: rgba(121, 217, 174, 0.28); --wrong: #e88fa1; /* 6.1:1 */ --wrong-halo: rgba(232, 143, 161, 0.26); --iron: #9aa4bd; --bronze: #d09263; --silver: #c3cede; --gold: #f2bd6c; --platinum: #8fd8cf; --diamond: #a9c4f5; --master: #cba6f2; /* amethyst - the tier past the gems */ } @media (prefers-reduced-motion: reduce) { :root { --dur-warm: 1ms; } }