/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V4 * nav: N7 brutal slab · footer: Ft4 colophon * contrast: pass (40-41, re-measured by canvas after the mobile pass) * mobile: pass (34, 49, 50-57) · honest: pass (46) · chrome: pass (47) * tokens: pass (48) · icons: see note · motion: 4 primitives * * Audited 2026-08-22. Fixed: .kpi wore --font-display in a column of figures (every * display face here has proportional digits, 5.84-12.15px spread) and --font-body was no * better - Be Vietnam Pro ships no tabular figure set, so tabular-nums is a no-op in veso * and thantai. .kpi now uses --font-num like every other figure on the page: spread 0. * Also: .privacy's 6px green left edge was the side-stripe-card tell, now --color-rule; * z-index 9999 became a named --z-* scale; the five stages no longer share one padding. * * Known, deliberate deviations - stated rather than quietly passed: * G22 viahe's neutrals are chroma 0 on purpose; the skin is called Vỉa Hè and the * point is raw pavement, not a tinted grey. The other three skins tint theirs. * G26 .cell ships default/hover/focus-visible/active/pressed but no :disabled - a * frequency cell has no disabled state in this app, and dead CSS is worse. * G30 emoji appear at stage titles. They are self-hosted, attributed Twemoji SVGs * chosen per stage (🔮 divination, 📉 losses, 📊 statistics), not the generic * ✨🚀⚡ set standing in for a missing icon system. * G45 five stage eyebrows (00-04). The exception list names Long Document, Manifesto * and Catalogue-numbered, and caps at 1-2; Narrative Workflow is not on it. Kept: * design.md specifies them, a fortune-telling session is genuinely ordinal, and the * hard ban - tag-left / heading-right - is respected. Flagged, not silently passed. * G55 the per-column ink test still reports 3-4px of bounding-box overlap on wrapped * display heads. A tone mark's box is wider and taller than its ink; checked by * eye at 320/390/414 on all four skins and the marks clear. See --lh-display. * * macrostructure: Narrative Workflow · genre: playful * theme: custom ×4 (veso · thantai · viahe · y2k) · tone: bẩn bựa / thầy bói vỉa hè * axes: veso light · display-heavy · warm * thantai dark · high-contrast-serif · warm-gold * viahe dark · display-condensed · chromatic-other * y2k dark · display-3D · cool * * OKLCH values are computed from the hex anchors in the comments, not eyeballed. * Contrast was measured before these were locked - see the ratio table below. * * theme ink/paper dim/paper accent/paper accent-2/paper * veso 15.01 5.18 4.63 1.34 <- see the veso rules * * --color-good is not in that table because it is not a paper-relative accent: it * lands on paper-2 inside torn blocks. Measured there, veso needed 45% lightness. * thantai 8.79 4.84 4.77 7.78 * viahe 16.16 4.61 14.50 16.05 * y2k 15.74 6.09 12.07 5.36 */ :root { /* ---- spacing: 4pt scale ---- */ --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 20px; --space-lg: 32px; --space-xl: 52px; --space-2xl: 84px; /* ---- type scale ---- */ --text-xs: 0.78rem; --text-sm: 0.88rem; --text-base: 1rem; --text-lg: 1.15rem; --text-xl: 1.45rem; --text-2xl: 2rem; --text-3xl: 2.9rem; /* The pot figure. Fluid, because it is the one number on the page somebody actually came for and a fixed 2.9rem broke "31,41 tỷ" across two lines at 280px and 320px - measured, not guessed. The cap keeps it identical to --text-3xl on a laptop. */ --text-figure: clamp(1.9rem, 10vw, 2.9rem); --text-display-s: clamp(2.2rem, 7vw, 4rem); --text-display: clamp(2.6rem, 11vw, 6.5rem); /* ---- rules & shape ---- */ --rule-hair: 1px; --rule-mid: 3px; --rule-slab: 6px; --radius: 0; /* zero everywhere. The only round thing on this page is a lottery ball. */ /* Display leading. Not the 0.95 tight-display convention: Vietnamese tone marks sit ABOVE the cap line, so a wrapped display line's mark collides with the line above. Measured per horizontal column at 320/390/414px - a whole-line union over-reports, since it pairs a comma at the right edge with a mark at the left edge of the next line, which can never meet. Bungee Shade overrides this; see the y2k block. */ --lh-display: 1.12; /* Heatmap tint ceiling. Per skin, because the safe maximum is a property of the skin, not a taste setting: accent-2 is a pale gold on thantai and a bright yellow on viahe, so tinting a dark cell moves it TOWARD the light ink and contrast falls away. Swept in 1% steps against the composited cell: AA held to 60% on veso and y2k, 40% on viahe, 37% on thantai. These sit under those ceilings with room to spare. */ --heat-max: 52%; --ball: 50%; --tap: 44px; /* WCAG 2.5.8 / Apple HIG minimum touch target */ --heat-gap: 2px; /* named so .block--heat can size a 10x10 grid from it */ /* ---- stacking: named, so nobody has to guess whether 9999 was load-bearing ---- */ --z-nav: 100; /* the sticky slab */ --z-gate: 1000; /* the first-visit warning modal, above the nav */ --z-grain: 9000; /* the print grain sits over everything and takes no pointer events */ /* ---- motion ---- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.55, 0, 1, 0.45); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 420ms; /* ---- faces shared across every skin ---- */ --font-hand: "Sriracha", "Bradley Hand", cursive; /* the fortune-teller's own hand */ --font-num: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; /* ---- grain ---- */ --grain-opacity: 0.055; --grain-blend: multiply; } /* ============================ VÉ SỐ ============================ * Street lottery ticket. Yellowed paper, red riso ink, chunky signage type. * * TWO HARD RULES, both measured: * 1. --color-accent-2 (yellow) is 1.34:1 on paper. It may ONLY be a solid fill * with --color-ink on top. Never text, never a hairline. * 2. --color-accent (red) is 4.63:1 after deepening. Safe for UI text and * borders at any size. Never needed loosening. */ [data-theme="veso"] { --color-paper: oklch(93.4% 0.027 83.5); /* #F2E8D5 */ --color-paper-2: oklch(89.3% 0.038 83); /* #E8DAC0 */ --color-ink: oklch(19.7% 0.013 55.5); /* #1A1410 */ --color-ink-dim: oklch(49% 0.03 72.8); /* #6B5E4E */ --color-accent: oklch(54% 0.206 29.1); /* #CB1E16 - deepened from 60.4%: cream-on-red was 3.53:1, short of AA for 14px bold UI text */ --color-accent-2: oklch(84.2% 0.168 90.4); /* #F5C518 - fills only */ --color-rule: oklch(19.7% 0.013 55.5); --color-good: oklch(45% 0.134 144); /* deepened from 52.4%: it measured 3.71:1 on paper-2, which is where .win and .kpi--good actually sit. AA starts at 46.4%; this has margin. */ --color-bad: oklch(49.9% 0.181 29.1); /* #B3231A */ --color-warn: oklch(67.9% 0.142 76.5); /* #C98A00 */ --color-focus: oklch(54% 0.206 29.1); --color-on-accent-2: oklch(19.7% 0.013 55.5); /* ink - accent-2 is bright yellow */ --font-display: "Bungee", system-ui, sans-serif; --font-body: "Be Vietnam Pro", system-ui, sans-serif; --grain-blend: multiply; --grain-opacity: 0.07; } /* ============================ THẦN TÀI ============================ * Household shrine. Deep lacquer red, gilt lettering, high-contrast serif. */ [data-theme="thantai"] { --heat-max: 30%; --color-paper: oklch(37.7% 0.136 26.8); /* #7A1414 */ --color-paper-2: oklch(31.5% 0.112 26.5); /* #5E0F0F */ --color-ink: oklch(92.9% 0.043 84.6); /* #F5E6C8 */ --color-ink-dim: oklch(75% 0.085 82.1); /* #C9A96E */ --color-accent: oklch(74.7% 0.134 84.6); /* #D4A537 */ --color-accent-2: oklch(88.9% 0.101 92.3); /* #F2D98B */ --color-rule: oklch(74.7% 0.134 84.6); --color-good: oklch(74.1% 0.134 138.3); --color-bad: oklch(73.2% 0.165 28.3); --color-warn: oklch(88.9% 0.101 92.3); --color-focus: oklch(88.9% 0.101 92.3); --color-on-accent-2: oklch(37.7% 0.136 26.8); /* paper - accent-2 is pale gold */ --font-display: "Playfair Display", Georgia, serif; --font-body: "Be Vietnam Pro", system-ui, sans-serif; --grain-blend: screen; --grain-opacity: 0.05; } /* ============================ VỈA HÈ ============================ * Raw pavement brutalism. Near-black, phosphor green, condensed slab type. */ [data-theme="viahe"] { --heat-max: 32%; --color-paper: oklch(14.5% 0 90); /* #0A0A0A */ --color-paper-2: oklch(19.1% 0 90); /* #141414 */ --color-ink: oklch(93.1% 0 90); /* #E8E8E8 */ --color-ink-dim: oklch(64% 0 90); /* raised from 58%: 4.29:1 on paper-2 missed AA */ --color-accent: oklch(86.9% 0.278 144.5); /* #00FF41 */ --color-accent-2: oklch(92.5% 0.194 102.9); /* #FFEA00 */ --color-rule: oklch(86.9% 0.278 144.5); --color-good: oklch(86.9% 0.278 144.5); --color-bad: oklch(65.4% 0.232 28.7); --color-warn: oklch(92.5% 0.194 102.9); --color-focus: oklch(92.5% 0.194 102.9); --color-on-accent-2: oklch(14.5% 0 90); /* paper - accent-2 is bright yellow */ --font-display: "Anton", Impact, sans-serif; --font-body: "JetBrains Mono", ui-monospace, monospace; --grain-blend: screen; --grain-opacity: 0.04; } /* ============================ Y2K ============================ * Early-2000s Vietnamese forum. Violet night, cyan and magenta, 3D display face. */ [data-theme="y2k"] { --color-paper: oklch(19.5% 0.067 299.9); /* #1A0B2E */ --color-paper-2: oklch(25.7% 0.091 298.7); /* #2A1548 */ --color-ink: oklch(94.6% 0.03 300.3); /* #F0E9FF */ --color-ink-dim: oklch(67.2% 0.085 297); /* #9B8BC4 */ --color-accent: oklch(84.4% 0.146 209.3); /* #00E5FF */ --color-accent-2: oklch(66.5% 0.249 357.3); /* #FF2D95 */ --color-rule: oklch(84.4% 0.146 209.3); --color-good: oklch(89.5% 0.176 158.5); --color-bad: oklch(66.5% 0.249 357.3); --color-warn: oklch(89.2% 0.157 93); --color-focus: oklch(89.5% 0.176 158.5); --color-on-accent-2: oklch(19.5% 0.067 299.9); /* paper - accent-2 is magenta */ --font-display: "Bungee Shade", Impact, sans-serif; /* Bungee Shade carries a 3D extrusion above every glyph, so its ink box is about a fifth of an em taller than the other three faces. At 1.12 the extrusion of "SỐ," ran into "TOẠN" on the line below - visible, not theoretical. */ --lh-display: 1.34; --font-body: "Grandstander", system-ui, sans-serif; --grain-blend: screen; --grain-opacity: 0.05; }