/* GENERATED by tools/build-theme.mjs from app/theme.mjs — do not edit. Every colour pairing here has a measured WCAG contrast ratio; see tools/check-theme.mjs. Edit the palette in theme.mjs and rebuild. */ :root { --night: #241B18; /* darkened cave ground — no longer painted on any screen; kept because #bootfail and the share-card frame still reference a true dark, and because deleting a pigment other files import silently breaks them */ --lacquer: #6E241A; /* deep red ground of the deer illustration — accent, not ground */ --cinnabar: #9E3B26; /* iron-red of the mural and caisson border */ --ink: #2A1A15; /* near-black warm brown for text on light */ --plaster: #F4E9D6; /* cream lime plaster of the cave wall — THE APP GROUND since 9 Sep */ --silk: #FBF5E9; /* lightest paper — the share card, and the raised tone of the patterned ground (9.3 luminance points above plaster, matching the 9-point spread measured in Summer’s Dunhuang reference) */ --sand: #E2CFAE; /* aged plaster in shadow */ --celadon: #7FA894; /* aged malachite green, mural robes */ --jade: #456D5C; /* darker celadon, usable as text on cream — darkened from #4E7C68, which measured 3.96 and failed */ --lapis: #2E5C8A; /* faded azurite of the caisson */ --apricot: #F0C08A; /* peach triangles of the caisson */ --gold: #C99A3E; /* the gold sun disc behind the deer */ --goldLight: #E9C97A; /* gold leaf catching light — for text on lacquer */ --rose: #D98E93; /* the flying ribbons */ --umber: #5A4032; /* burnt earth — stands in for 二黑, which flat black cannot */ --aubergine: #6B4A6E; /* azurite muddied into red — 九紫 without the neon */ /* type — one scale, so screens cannot drift apart */ --step--1: 0.82rem; --step-0: 1rem; --step-1: 1.25rem; --step-2: 1.6rem; --step-3: 2.1rem; /* the caisson grid: the 藻井 ceiling is nested squares rotated 45 degrees, which is also the shape of a Lo Shu grid. The same motif carries the numerology layer and the fortune layer without inventing a second style. */ --caisson: 8px; /* Derived tokens. Both apps used to define these privately, which is the same defect as two definitions of "today": they drift, and a share card from one app stops matching the other. One definition, generated. */ --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); /* Re-derived for the light ground on 9 Sep. On cream these must be ink-based: --dim was sand at 78 percent, which measures 1.27 against plaster and is effectively invisible, and --line was a gold tint that vanishes entirely. body.ritual used to restore both to their dark values; since the ritual moved onto the same daylight ground it restates them in the same ink-based terms, so there is no longer a second set of rules to keep in step. --dim resolves to umber, the declared 'secondary text on the ground' pairing at 7.89. */ --shadow: 0 14px 40px color-mix(in srgb, var(--umber) 22%, transparent); /* TWO line weights, because a border that merely separates and a border that CARRIES MEANING are held to different standards. WCAG 1.4.11 asks 3.0 of any non-text thing that conveys information. --line at 34% measures 1.76 against plaster: acceptable for a decorative divider, and NOT acceptable for the dashed edge that is the only thing saying a Lo Shu cell is empty. Summer's word on 9 Sep was "too light", and she was right by measurement, not by taste. Measured over plaster: umber 34% = 1.76, 48% = 2.33, 62% = 3.12. --edge is the one that must clear 3.0. */ --line: color-mix(in srgb, var(--umber) 48%, transparent); --edge: color-mix(in srgb, var(--umber) 62%, transparent); --dim: var(--umber); --fade: linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); /* The motifs, as variables, so a screen can reach for one without the theme having to anticipate every place ornament might belong. Drawn as geometry in motifs.mjs and inlined here at build time — no request, no half-loaded ornament, and they recolour when the palette does. */ --m-rosette: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M50%2050%20C%2041%2034%2C%2040%2020%2C%2050%206%20C%2060%2020%2C%2059%2034%2C%2050%2050%20Z%22%20fill%3D%22%23C99A3E%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(0%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2041%2034%2C%2040%2020%2C%2050%206%20C%2060%2020%2C%2059%2034%2C%2050%2050%20Z%22%20fill%3D%22%239E3B26%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(45%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2041%2034%2C%2040%2020%2C%2050%206%20C%2060%2020%2C%2059%2034%2C%2050%2050%20Z%22%20fill%3D%22%23C99A3E%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(90%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2041%2034%2C%2040%2020%2C%2050%206%20C%2060%2020%2C%2059%2034%2C%2050%2050%20Z%22%20fill%3D%22%239E3B26%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(135%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2041%2034%2C%2040%2020%2C%2050%206%20C%2060%2020%2C%2059%2034%2C%2050%2050%20Z%22%20fill%3D%22%23C99A3E%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(180%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2041%2034%2C%2040%2020%2C%2050%206%20C%2060%2020%2C%2059%2034%2C%2050%2050%20Z%22%20fill%3D%22%239E3B26%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(225%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2041%2034%2C%2040%2020%2C%2050%206%20C%2060%2020%2C%2059%2034%2C%2050%2050%20Z%22%20fill%3D%22%23C99A3E%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(270%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2041%2034%2C%2040%2020%2C%2050%206%20C%2060%2020%2C%2059%2034%2C%2050%2050%20Z%22%20fill%3D%22%239E3B26%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(315%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2044%2040%2C%2044%2031%2C%2050%2024%20C%2056%2031%2C%2056%2040%2C%2050%2050%20Z%22%20fill%3D%22%232E5C8A%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.9%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(22.5%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2044%2040%2C%2044%2031%2C%2050%2024%20C%2056%2031%2C%2056%2040%2C%2050%2050%20Z%22%20fill%3D%22%232E5C8A%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.9%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(67.5%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2044%2040%2C%2044%2031%2C%2050%2024%20C%2056%2031%2C%2056%2040%2C%2050%2050%20Z%22%20fill%3D%22%232E5C8A%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.9%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(112.5%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2044%2040%2C%2044%2031%2C%2050%2024%20C%2056%2031%2C%2056%2040%2C%2050%2050%20Z%22%20fill%3D%22%232E5C8A%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.9%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(157.5%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2044%2040%2C%2044%2031%2C%2050%2024%20C%2056%2031%2C%2056%2040%2C%2050%2050%20Z%22%20fill%3D%22%232E5C8A%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.9%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(202.5%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2044%2040%2C%2044%2031%2C%2050%2024%20C%2056%2031%2C%2056%2040%2C%2050%2050%20Z%22%20fill%3D%22%232E5C8A%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.9%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(247.5%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2044%2040%2C%2044%2031%2C%2050%2024%20C%2056%2031%2C%2056%2040%2C%2050%2050%20Z%22%20fill%3D%22%232E5C8A%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.9%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(292.5%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2044%2040%2C%2044%2031%2C%2050%2024%20C%2056%2031%2C%2056%2040%2C%2050%2050%20Z%22%20fill%3D%22%232E5C8A%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.9%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(337.5%2050%2050)%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%229.5%22%20fill%3D%22%23E9C97A%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%221.1%22%2F%3E%3Ccircle%20cx%3D%2255.00%22%0A%20%20%20%20%20%20cy%3D%2250.00%22%20r%3D%221.5%22%20fill%3D%22%232A1A15%22%2F%3E%3Ccircle%20cx%3D%2252.50%22%0A%20%20%20%20%20%20cy%3D%2254.33%22%20r%3D%221.5%22%20fill%3D%22%232A1A15%22%2F%3E%3Ccircle%20cx%3D%2247.50%22%0A%20%20%20%20%20%20cy%3D%2254.33%22%20r%3D%221.5%22%20fill%3D%22%232A1A15%22%2F%3E%3Ccircle%20cx%3D%2245.00%22%0A%20%20%20%20%20%20cy%3D%2250.00%22%20r%3D%221.5%22%20fill%3D%22%232A1A15%22%2F%3E%3Ccircle%20cx%3D%2247.50%22%0A%20%20%20%20%20%20cy%3D%2245.67%22%20r%3D%221.5%22%20fill%3D%22%232A1A15%22%2F%3E%3Ccircle%20cx%3D%2252.50%22%0A%20%20%20%20%20%20cy%3D%2245.67%22%20r%3D%221.5%22%20fill%3D%22%232A1A15%22%2F%3E%3C%2Fsvg%3E"); --m-rosette-ink: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M50%2050%20C%2041%2034%2C%2040%2020%2C%2050%206%20C%2060%2020%2C%2059%2034%2C%2050%2050%20Z%22%20fill%3D%22%239E3B26%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(0%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2041%2034%2C%2040%2020%2C%2050%206%20C%2060%2020%2C%2059%2034%2C%2050%2050%20Z%22%20fill%3D%22%232E5C8A%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(45%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2041%2034%2C%2040%2020%2C%2050%206%20C%2060%2020%2C%2059%2034%2C%2050%2050%20Z%22%20fill%3D%22%239E3B26%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(90%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2041%2034%2C%2040%2020%2C%2050%206%20C%2060%2020%2C%2059%2034%2C%2050%2050%20Z%22%20fill%3D%22%232E5C8A%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(135%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2041%2034%2C%2040%2020%2C%2050%206%20C%2060%2020%2C%2059%2034%2C%2050%2050%20Z%22%20fill%3D%22%239E3B26%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(180%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2041%2034%2C%2040%2020%2C%2050%206%20C%2060%2020%2C%2059%2034%2C%2050%2050%20Z%22%20fill%3D%22%232E5C8A%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(225%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2041%2034%2C%2040%2020%2C%2050%206%20C%2060%2020%2C%2059%2034%2C%2050%2050%20Z%22%20fill%3D%22%239E3B26%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(270%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2041%2034%2C%2040%2020%2C%2050%206%20C%2060%2020%2C%2059%2034%2C%2050%2050%20Z%22%20fill%3D%22%232E5C8A%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(315%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2044%2040%2C%2044%2031%2C%2050%2024%20C%2056%2031%2C%2056%2040%2C%2050%2050%20Z%22%20fill%3D%22%237FA894%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.9%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(22.5%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2044%2040%2C%2044%2031%2C%2050%2024%20C%2056%2031%2C%2056%2040%2C%2050%2050%20Z%22%20fill%3D%22%237FA894%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.9%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(67.5%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2044%2040%2C%2044%2031%2C%2050%2024%20C%2056%2031%2C%2056%2040%2C%2050%2050%20Z%22%20fill%3D%22%237FA894%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.9%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(112.5%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2044%2040%2C%2044%2031%2C%2050%2024%20C%2056%2031%2C%2056%2040%2C%2050%2050%20Z%22%20fill%3D%22%237FA894%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.9%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(157.5%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2044%2040%2C%2044%2031%2C%2050%2024%20C%2056%2031%2C%2056%2040%2C%2050%2050%20Z%22%20fill%3D%22%237FA894%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.9%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(202.5%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2044%2040%2C%2044%2031%2C%2050%2024%20C%2056%2031%2C%2056%2040%2C%2050%2050%20Z%22%20fill%3D%22%237FA894%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.9%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(247.5%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2044%2040%2C%2044%2031%2C%2050%2024%20C%2056%2031%2C%2056%2040%2C%2050%2050%20Z%22%20fill%3D%22%237FA894%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.9%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(292.5%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2044%2040%2C%2044%2031%2C%2050%2024%20C%2056%2031%2C%2056%2040%2C%2050%2050%20Z%22%20fill%3D%22%237FA894%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.9%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(337.5%2050%2050)%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%229.5%22%20fill%3D%22%23C99A3E%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%221.1%22%2F%3E%3Ccircle%20cx%3D%2255.00%22%0A%20%20%20%20%20%20cy%3D%2250.00%22%20r%3D%221.5%22%20fill%3D%22%232A1A15%22%2F%3E%3Ccircle%20cx%3D%2252.50%22%0A%20%20%20%20%20%20cy%3D%2254.33%22%20r%3D%221.5%22%20fill%3D%22%232A1A15%22%2F%3E%3Ccircle%20cx%3D%2247.50%22%0A%20%20%20%20%20%20cy%3D%2254.33%22%20r%3D%221.5%22%20fill%3D%22%232A1A15%22%2F%3E%3Ccircle%20cx%3D%2245.00%22%0A%20%20%20%20%20%20cy%3D%2250.00%22%20r%3D%221.5%22%20fill%3D%22%232A1A15%22%2F%3E%3Ccircle%20cx%3D%2247.50%22%0A%20%20%20%20%20%20cy%3D%2245.67%22%20r%3D%221.5%22%20fill%3D%22%232A1A15%22%2F%3E%3Ccircle%20cx%3D%2252.50%22%0A%20%20%20%20%20%20cy%3D%2245.67%22%20r%3D%221.5%22%20fill%3D%22%232A1A15%22%2F%3E%3C%2Fsvg%3E"); --m-scroll: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23E9C97A%22%20stroke-width%3D%222.4%22%0A%20%20%20%20%20%20%20%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%20%20%20%20%20%20%20%3Cpath%20d%3D%22M50%2034%20C%2050%2022%2C%2062%2020%2C%2066%2027%20C%2069%2033%2C%2061%2037%2C%2058%2032%20C%2055%2026%2C%2062%2020%2C%2072%2024%22%2F%3E%0A%20%20%20%20%20%20%20%3Cpath%20d%3D%22M50%2034%20C%2050%2022%2C%2062%2020%2C%2066%2027%20C%2069%2033%2C%2061%2037%2C%2058%2032%20C%2055%2026%2C%2062%2020%2C%2072%2024%22%20transform%3D%22scale(-1%201)%20translate(-100%200)%22%2F%3E%0A%20%20%20%20%20%20%20%3Cpath%20d%3D%22M50%2034%20L50%2044%22%2F%3E%0A%20%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E"); --m-band: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%2020%22%3E%3Cg%3E%3Cpath%20d%3D%22M10%2017%20C%204%2011%2C%204.8%204%2C%2010%201%20C%2015.2%204%2C%2016%2011%2C%2010%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%239E3B26%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M20%2017%20C%2016.6%2013%2C%2017%208%2C%2020%206%20C%2023%208%2C%2023.4%2013%2C%2020%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%23C99A3E%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.6%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2214%22%20r%3D%221.3%22%20fill%3D%22%23E9C97A%22%2F%3E%3Cpath%20d%3D%22M30%2017%20C%2024%2011%2C%2024.8%204%2C%2030%201%20C%2035.2%204%2C%2036%2011%2C%2030%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%239E3B26%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M40%2017%20C%2036.6%2013%2C%2037%208%2C%2040%206%20C%2043%208%2C%2043.4%2013%2C%2040%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%23C99A3E%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.6%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2214%22%20r%3D%221.3%22%20fill%3D%22%23E9C97A%22%2F%3E%3Cpath%20d%3D%22M50%2017%20C%2044%2011%2C%2044.8%204%2C%2050%201%20C%2055.2%204%2C%2056%2011%2C%2050%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%239E3B26%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M60%2017%20C%2056.6%2013%2C%2057%208%2C%2060%206%20C%2063%208%2C%2063.4%2013%2C%2060%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%23C99A3E%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.6%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2214%22%20r%3D%221.3%22%20fill%3D%22%23E9C97A%22%2F%3E%3Cpath%20d%3D%22M70%2017%20C%2064%2011%2C%2064.8%204%2C%2070%201%20C%2075.2%204%2C%2076%2011%2C%2070%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%239E3B26%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M80%2017%20C%2076.6%2013%2C%2077%208%2C%2080%206%20C%2083%208%2C%2083.4%2013%2C%2080%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%23C99A3E%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.6%22%2F%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%2214%22%20r%3D%221.3%22%20fill%3D%22%23E9C97A%22%2F%3E%3Cpath%20d%3D%22M90%2017%20C%2084%2011%2C%2084.8%204%2C%2090%201%20C%2095.2%204%2C%2096%2011%2C%2090%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%239E3B26%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M100%2017%20C%2096.6%2013%2C%2097%208%2C%20100%206%20C%20103%208%2C%20103.4%2013%2C%20100%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%23C99A3E%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.6%22%2F%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%2214%22%20r%3D%221.3%22%20fill%3D%22%23E9C97A%22%2F%3E%3C%2Fg%3E%0A%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%2217%22%20width%3D%22100%22%20height%3D%222.2%22%20fill%3D%22%232E5C8A%22%2F%3E%0A%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%2219.2%22%20width%3D%22100%22%20height%3D%22.8%22%20fill%3D%22%232A1A15%22%20opacity%3D%22.5%22%2F%3E%3C%2Fsvg%3E"); --m-band-ink: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%2020%22%3E%3Cg%3E%3Cpath%20d%3D%22M10%2017%20C%204%2011%2C%204.8%204%2C%2010%201%20C%2015.2%204%2C%2016%2011%2C%2010%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%239E3B26%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M20%2017%20C%2016.6%2013%2C%2017%208%2C%2020%206%20C%2023%208%2C%2023.4%2013%2C%2020%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%232E5C8A%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.6%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2214%22%20r%3D%221.3%22%20fill%3D%22%23F0C08A%22%2F%3E%3Cpath%20d%3D%22M30%2017%20C%2024%2011%2C%2024.8%204%2C%2030%201%20C%2035.2%204%2C%2036%2011%2C%2030%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%239E3B26%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M40%2017%20C%2036.6%2013%2C%2037%208%2C%2040%206%20C%2043%208%2C%2043.4%2013%2C%2040%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%232E5C8A%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.6%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2214%22%20r%3D%221.3%22%20fill%3D%22%23F0C08A%22%2F%3E%3Cpath%20d%3D%22M50%2017%20C%2044%2011%2C%2044.8%204%2C%2050%201%20C%2055.2%204%2C%2056%2011%2C%2050%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%239E3B26%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M60%2017%20C%2056.6%2013%2C%2057%208%2C%2060%206%20C%2063%208%2C%2063.4%2013%2C%2060%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%232E5C8A%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.6%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2214%22%20r%3D%221.3%22%20fill%3D%22%23F0C08A%22%2F%3E%3Cpath%20d%3D%22M70%2017%20C%2064%2011%2C%2064.8%204%2C%2070%201%20C%2075.2%204%2C%2076%2011%2C%2070%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%239E3B26%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M80%2017%20C%2076.6%2013%2C%2077%208%2C%2080%206%20C%2083%208%2C%2083.4%2013%2C%2080%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%232E5C8A%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.6%22%2F%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%2214%22%20r%3D%221.3%22%20fill%3D%22%23F0C08A%22%2F%3E%3Cpath%20d%3D%22M90%2017%20C%2084%2011%2C%2084.8%204%2C%2090%201%20C%2095.2%204%2C%2096%2011%2C%2090%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%239E3B26%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M100%2017%20C%2096.6%2013%2C%2097%208%2C%20100%206%20C%20103%208%2C%20103.4%2013%2C%20100%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%232E5C8A%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.6%22%2F%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%2214%22%20r%3D%221.3%22%20fill%3D%22%23F0C08A%22%2F%3E%3C%2Fg%3E%0A%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%2217%22%20width%3D%22100%22%20height%3D%222.2%22%20fill%3D%22%23456D5C%22%2F%3E%0A%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%2219.2%22%20width%3D%22100%22%20height%3D%22.8%22%20fill%3D%22%232A1A15%22%20opacity%3D%22.5%22%2F%3E%3C%2Fsvg%3E"); --m-caisson: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23E9C97A%22%20stroke-width%3D%221.6%22%3E%0A%20%20%20%20%20%20%20%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%2288%22%20height%3D%2288%22%2F%3E%0A%20%20%20%20%20%20%20%3Crect%20x%3D%2221%22%20y%3D%2221%22%20width%3D%2258%22%20height%3D%2258%22%20transform%3D%22rotate(45%2050%2050)%22%2F%3E%0A%20%20%20%20%20%20%20%3Crect%20x%3D%2230%22%20y%3D%2230%22%20width%3D%2240%22%20height%3D%2240%22%2F%3E%0A%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%3Crect%20x%3D%2242%22%20y%3D%2242%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%232E5C8A%22%0A%20%20%20%20%20%20%20transform%3D%22rotate(45%2050%2050)%22%2F%3E%3C%2Fsvg%3E"); } /* ---------- shared base ---------- The lacquer wall, the phone frame, the screen switcher and the type scale. Everything both apps agree on lives here so it cannot diverge; anything one app needs alone stays in that app's own style block. */ * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; margin: 0; overscroll-behavior: none; } body { /* DAYLIGHT. Inverted 9 Sep. Lit from above like a wall near the cave mouth: the warmth is a faint wash over cream, not a red wall. The ornament reads as tone-on-tone because plaster and silk sit 9.3 luminance points apart — Summer's Dunhuang reference measured a 9-point spread across its foliage, which is exactly why text stays readable over it. Widen that gap and the pattern starts competing with the words. */ background: radial-gradient(125% 80% at 50% -14%, color-mix(in srgb, var(--silk) 15%, transparent) 0%, transparent 62%), radial-gradient(85% 55% at 50% 108%, color-mix(in srgb, var(--sand) 40%, transparent) 0%, transparent 64%), var(--plaster); color: var(--ink); font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Songti SC", "Noto Serif SC", serif; display: flex; align-items: center; justify-content: center; user-select: none; } /* ONE GROUND. app/lingqian.html still carries class="ritual", but it is now the same daylight wall as the rest of the app. The ritual used to be deliberately dark — "you step out of daylight to ask a question" — and that reasoning was sound as far as it went. What it did not survive was contact: Summer, 9 Sep, "the interface can't read clearly, can you change it to the same as the light background?" The dark room was ALSO hiding a real defect rather than merely coexisting with it. The .box p rule is near-black ink on a card that turned out to be a 16% veil over the ground, so on the dark room it rendered ink-on-ink at 1.01 contrast. The threshold effect was costing legibility and paying for it in atmosphere, which is not a trade this app makes. What made the ritual a threshold was never the darkness; it was the pace, the shake and the blocks. Those all remain. */ body.ritual { background: radial-gradient(125% 80% at 50% -14%, color-mix(in srgb, var(--silk) 15%, transparent) 0%, transparent 62%), radial-gradient(85% 55% at 50% 108%, color-mix(in srgb, var(--sand) 40%, transparent) 0%, transparent 64%), var(--plaster); color: var(--ink); } body.ritual { --line: color-mix(in srgb, var(--umber) 48%, transparent); --edge: color-mix(in srgb, var(--umber) 62%, transparent); --dim: color-mix(in srgb, var(--ink) 66%, transparent); --shadow: 0 18px 50px rgba(42, 26, 21, .16); } /* goldLight measures 2.14 on plaster and fails outright — the dark ground had been hiding a pairing that never worked on cream. On the light ground the ritual takes the same lacquer the rest of the app uses. */ body.ritual .brand b, body.ritual h1 em { color: var(--lacquer); } body.ritual .btn.ghost { color: var(--lacquer); } #app { position: relative; width: 100%; max-width: 430px; height: 100dvh; max-height: 932px; overflow: hidden; display: flex; flex-direction: column; padding: calc(var(--safe-t) + 14px) 20px calc(var(--safe-b) + 18px); } @media (min-width: 520px) { #app { border-radius: 38px; box-shadow: var(--shadow), 0 0 0 1px var(--line); } } header { display: flex; align-items: center; justify-content: space-between; gap: 10px; z-index: 2; } .brand { display: flex; align-items: baseline; gap: 9px; } .brand b { font-size: var(--step-1); letter-spacing: .14em; color: var(--lacquer); font-weight: 600; } .brand span { font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--dim); } .streak { font-size: 10px; letter-spacing: .2em; color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; white-space: nowrap; } main { flex: 1; display: flex; flex-direction: column; min-height: 0; z-index: 2; } .screen { flex: 1; display: none; flex-direction: column; min-height: 0; } .screen.on { display: flex; animation: fade .5s ease both; } @keyframes fade { from { opacity: 0; transform: translateY(10px); } } h1 { font-size: var(--step-3); line-height: 1.24; margin: 0 0 8px; font-weight: 500; } /* Lacquer, not gold. goldLight on plaster measures 2.14 and fails outright — the dark ground had been hiding a pairing that never worked on cream. Inside the ritual it reverts to gold, where it does work and is measured. */ h1 em { font-style: normal; color: var(--lacquer); } .sub { font-size: var(--step-0); line-height: 1.6; color: var(--dim); margin: 0 0 18px; } .note { font-size: var(--step--1); line-height: 1.6; color: var(--dim); margin: 12px 0 0; } .btn { width: 100%; padding: 17px; border-radius: var(--caisson); border: none; font: inherit; font-size: var(--step-0); letter-spacing: .05em; cursor: pointer; background: linear-gradient(var(--celadon), var(--jade)); color: var(--silk); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); transition: transform .12s ease, opacity .2s ease; } .btn:active { transform: scale(.972); } /* Disabled was opacity .32, which on the light ground flattens the face to 1.09 against plaster — the primary action of the screen becomes an apparition, and "not yet available" reads as "broken". Give it a real surface: a sand face that is visibly a button, with umber text at 6.95, so it is plainly present and plainly not ready. */ .btn:disabled { background: color-mix(in srgb, var(--sand) 55%, var(--plaster)); color: color-mix(in srgb, var(--umber) 78%, transparent); box-shadow: none; border: 1px solid color-mix(in srgb, var(--umber) 34%, transparent); opacity: 1; cursor: default; } /* Gold with red, per Summer. The face is gold; the LABEL is lacquer, which is where the red belongs — a red-on-gold lacquer plaque rather than a coloured rectangle. Measured: lacquer on the darkest end of this gradient is 5.01, clearing 4.5 for body text. The plain --gold end gave only 4.24 and failed, which is why the gradient stops short of it. A thin gold-light rim reads as the raised edge of the plaque and stops the button dissolving into cream at its corners. */ .btn.gold { background: linear-gradient(var(--goldLight), color-mix(in srgb, var(--goldLight) 35%, var(--gold))); color: var(--lacquer); font-weight: 600; border: 1px solid color-mix(in srgb, var(--lacquer) 38%, transparent); box-shadow: 0 8px 22px color-mix(in srgb, var(--umber) 26%, transparent), inset 0 1px 0 color-mix(in srgb, #FFF 45%, transparent); } .btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--lacquer); box-shadow: none; } .row { display: flex; gap: 10px; margin-top: 10px; } .row .btn { margin-top: 0; } /* Scroll regions inside a fixed phone frame need their own overflow, or the content simply runs off the bottom with no way to reach it. */ .scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .scroll::-webkit-scrollbar { display: none; } /* Scrollbars are hidden, so a line guillotined flush against the header reads as a rendering fault rather than as "there is more above". Dissolve both edges into the wall instead: it signals scrollability without a scrollbar. */ .scroll { -webkit-mask-image: var(--fade); mask-image: var(--fade); } /* The mask sits over the element's own viewport, so at either scroll extreme it dims REAL content. Pad by more than the fade so it always falls on empty space. */ .scroll { padding-top: 18px; padding-bottom: 20px; } /* ============================================================ ORNAMENT — edges and centres only ------------------------------------------------------------ Every one of Summer's references does the same thing: dense ornament in BANDS at the boundary, one medallion at a CENTRE, and a great deal of empty ground in between. Nothing is tiled behind text. Restraint is what reads as expensive; a patterned field is what reads as a template. ============================================================ */ /* A hairline of gold under the header — an incised line rather than a drawn border. The cheapest thing that makes a screen look considered. */ /* The rule under the header. Was a 55%-gold hairline — on a cave wall that is an incised line catching the light; on cream it is nothing at all. Every screen has this boundary and no other, so it is the one place the "dense ornament in BANDS at the boundary" doctrine has to actually land. A cinnabar core with gold shoulders: still one pixel tall, still restraint, but now present. */ header { position: relative; padding-bottom: 12px; } header::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 70%, transparent) 14%, var(--cinnabar) 34%, var(--cinnabar) 66%, color-mix(in srgb, var(--gold) 70%, transparent) 86%, transparent); } /* The focal rosette. Sits BEHIND a number, never behind prose. ORN.rosetteInk, not ORN.rosette. Two variants were drawn on purpose — one for dark surfaces, one for light — and then the app painted the DARK one on every screen, including after the ground was inverted to cream. Gold petals on plaster is the same colour twice; that is why the ornament was "felt rather than read" to the point of not being there at all. Opacity .10 was also a dark-ground number: at that strength cinnabar on plaster is a rumour. .22 is still well under the text it sits behind. */ .focal { position: relative; } .focal::before { content: ''; position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; transform: translate(-50%, -50%); background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M50%2050%20C%2041%2034%2C%2040%2020%2C%2050%206%20C%2060%2020%2C%2059%2034%2C%2050%2050%20Z%22%20fill%3D%22%239E3B26%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(0%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2041%2034%2C%2040%2020%2C%2050%206%20C%2060%2020%2C%2059%2034%2C%2050%2050%20Z%22%20fill%3D%22%232E5C8A%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(45%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2041%2034%2C%2040%2020%2C%2050%206%20C%2060%2020%2C%2059%2034%2C%2050%2050%20Z%22%20fill%3D%22%239E3B26%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(90%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2041%2034%2C%2040%2020%2C%2050%206%20C%2060%2020%2C%2059%2034%2C%2050%2050%20Z%22%20fill%3D%22%232E5C8A%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(135%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2041%2034%2C%2040%2020%2C%2050%206%20C%2060%2020%2C%2059%2034%2C%2050%2050%20Z%22%20fill%3D%22%239E3B26%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(180%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2041%2034%2C%2040%2020%2C%2050%206%20C%2060%2020%2C%2059%2034%2C%2050%2050%20Z%22%20fill%3D%22%232E5C8A%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(225%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2041%2034%2C%2040%2020%2C%2050%206%20C%2060%2020%2C%2059%2034%2C%2050%2050%20Z%22%20fill%3D%22%239E3B26%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(270%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2041%2034%2C%2040%2020%2C%2050%206%20C%2060%2020%2C%2059%2034%2C%2050%2050%20Z%22%20fill%3D%22%232E5C8A%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(315%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2044%2040%2C%2044%2031%2C%2050%2024%20C%2056%2031%2C%2056%2040%2C%2050%2050%20Z%22%20fill%3D%22%237FA894%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.9%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(22.5%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2044%2040%2C%2044%2031%2C%2050%2024%20C%2056%2031%2C%2056%2040%2C%2050%2050%20Z%22%20fill%3D%22%237FA894%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.9%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(67.5%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2044%2040%2C%2044%2031%2C%2050%2024%20C%2056%2031%2C%2056%2040%2C%2050%2050%20Z%22%20fill%3D%22%237FA894%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.9%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(112.5%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2044%2040%2C%2044%2031%2C%2050%2024%20C%2056%2031%2C%2056%2040%2C%2050%2050%20Z%22%20fill%3D%22%237FA894%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.9%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(157.5%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2044%2040%2C%2044%2031%2C%2050%2024%20C%2056%2031%2C%2056%2040%2C%2050%2050%20Z%22%20fill%3D%22%237FA894%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.9%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(202.5%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2044%2040%2C%2044%2031%2C%2050%2024%20C%2056%2031%2C%2056%2040%2C%2050%2050%20Z%22%20fill%3D%22%237FA894%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.9%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(247.5%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2044%2040%2C%2044%2031%2C%2050%2024%20C%2056%2031%2C%2056%2040%2C%2050%2050%20Z%22%20fill%3D%22%237FA894%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.9%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(292.5%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20C%2044%2040%2C%2044%2031%2C%2050%2024%20C%2056%2031%2C%2056%2040%2C%2050%2050%20Z%22%20fill%3D%22%237FA894%22%0A%20%20%20%20%20%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.9%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20transform%3D%22rotate(337.5%2050%2050)%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%229.5%22%20fill%3D%22%23C99A3E%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%221.1%22%2F%3E%3Ccircle%20cx%3D%2255.00%22%0A%20%20%20%20%20%20cy%3D%2250.00%22%20r%3D%221.5%22%20fill%3D%22%232A1A15%22%2F%3E%3Ccircle%20cx%3D%2252.50%22%0A%20%20%20%20%20%20cy%3D%2254.33%22%20r%3D%221.5%22%20fill%3D%22%232A1A15%22%2F%3E%3Ccircle%20cx%3D%2247.50%22%0A%20%20%20%20%20%20cy%3D%2254.33%22%20r%3D%221.5%22%20fill%3D%22%232A1A15%22%2F%3E%3Ccircle%20cx%3D%2245.00%22%0A%20%20%20%20%20%20cy%3D%2250.00%22%20r%3D%221.5%22%20fill%3D%22%232A1A15%22%2F%3E%3Ccircle%20cx%3D%2247.50%22%0A%20%20%20%20%20%20cy%3D%2245.67%22%20r%3D%221.5%22%20fill%3D%22%232A1A15%22%2F%3E%3Ccircle%20cx%3D%2252.50%22%0A%20%20%20%20%20%20cy%3D%2245.67%22%20r%3D%221.5%22%20fill%3D%22%232A1A15%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; opacity: .22; pointer-events: none; z-index: 0; } .focal > * { position: relative; z-index: 1; } /* The caisson behind the Lo Shu grid: nested squares rotated 45 degrees, which is the grid's own geometry — so the ornament explains the diagram rather than competing with it. */ .loshu { position: relative; } .loshu::before { content: ''; position: absolute; inset: -18px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23E9C97A%22%20stroke-width%3D%221.6%22%3E%0A%20%20%20%20%20%20%20%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%2288%22%20height%3D%2288%22%2F%3E%0A%20%20%20%20%20%20%20%3Crect%20x%3D%2221%22%20y%3D%2221%22%20width%3D%2258%22%20height%3D%2258%22%20transform%3D%22rotate(45%2050%2050)%22%2F%3E%0A%20%20%20%20%20%20%20%3Crect%20x%3D%2230%22%20y%3D%2230%22%20width%3D%2240%22%20height%3D%2240%22%2F%3E%0A%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%3Crect%20x%3D%2242%22%20y%3D%2242%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%232E5C8A%22%0A%20%20%20%20%20%20%20transform%3D%22rotate(45%2050%2050)%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; opacity: .26; pointer-events: none; } /* Punctuation between sections, not decoration — deliberately tiny. */ .divider { height: 20px; margin: 6px auto 12px; width: 108px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23E9C97A%22%20stroke-width%3D%222.4%22%0A%20%20%20%20%20%20%20%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%20%20%20%20%20%20%20%3Cpath%20d%3D%22M50%2034%20C%2050%2022%2C%2062%2020%2C%2066%2027%20C%2069%2033%2C%2061%2037%2C%2058%2032%20C%2055%2026%2C%2062%2020%2C%2072%2024%22%2F%3E%0A%20%20%20%20%20%20%20%3Cpath%20d%3D%22M50%2034%20C%2050%2022%2C%2062%2020%2C%2066%2027%20C%2069%2033%2C%2061%2037%2C%2058%2032%20C%2055%2026%2C%2062%2020%2C%2072%2024%22%20transform%3D%22scale(-1%201)%20translate(-100%200)%22%2F%3E%0A%20%20%20%20%20%20%20%3Cpath%20d%3D%22M50%2034%20L50%2044%22%2F%3E%0A%20%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat; opacity: .7; } /* The dense petal band. Was reserved for the share card alone, which meant the doctrine three comments above this one — "dense ornament in BANDS at the boundary" — was stated and then applied to exactly one boundary in the whole app. The ink variant, for light grounds. */ .crest { height: 22px; opacity: .9; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%2020%22%3E%3Cg%3E%3Cpath%20d%3D%22M10%2017%20C%204%2011%2C%204.8%204%2C%2010%201%20C%2015.2%204%2C%2016%2011%2C%2010%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%239E3B26%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M20%2017%20C%2016.6%2013%2C%2017%208%2C%2020%206%20C%2023%208%2C%2023.4%2013%2C%2020%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%232E5C8A%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.6%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2214%22%20r%3D%221.3%22%20fill%3D%22%23F0C08A%22%2F%3E%3Cpath%20d%3D%22M30%2017%20C%2024%2011%2C%2024.8%204%2C%2030%201%20C%2035.2%204%2C%2036%2011%2C%2030%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%239E3B26%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M40%2017%20C%2036.6%2013%2C%2037%208%2C%2040%206%20C%2043%208%2C%2043.4%2013%2C%2040%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%232E5C8A%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.6%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2214%22%20r%3D%221.3%22%20fill%3D%22%23F0C08A%22%2F%3E%3Cpath%20d%3D%22M50%2017%20C%2044%2011%2C%2044.8%204%2C%2050%201%20C%2055.2%204%2C%2056%2011%2C%2050%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%239E3B26%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M60%2017%20C%2056.6%2013%2C%2057%208%2C%2060%206%20C%2063%208%2C%2063.4%2013%2C%2060%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%232E5C8A%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.6%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2214%22%20r%3D%221.3%22%20fill%3D%22%23F0C08A%22%2F%3E%3Cpath%20d%3D%22M70%2017%20C%2064%2011%2C%2064.8%204%2C%2070%201%20C%2075.2%204%2C%2076%2011%2C%2070%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%239E3B26%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M80%2017%20C%2076.6%2013%2C%2077%208%2C%2080%206%20C%2083%208%2C%2083.4%2013%2C%2080%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%232E5C8A%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.6%22%2F%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%2214%22%20r%3D%221.3%22%20fill%3D%22%23F0C08A%22%2F%3E%3Cpath%20d%3D%22M90%2017%20C%2084%2011%2C%2084.8%204%2C%2090%201%20C%2095.2%204%2C%2096%2011%2C%2090%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%239E3B26%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M100%2017%20C%2096.6%2013%2C%2097%208%2C%20100%206%20C%20103%208%2C%20103.4%2013%2C%20100%2017%20Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%232E5C8A%22%20stroke%3D%22%232A1A15%22%20stroke-width%3D%22.6%22%2F%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%2214%22%20r%3D%221.3%22%20fill%3D%22%23F0C08A%22%2F%3E%3C%2Fg%3E%0A%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%2217%22%20width%3D%22100%22%20height%3D%222.2%22%20fill%3D%22%23456D5C%22%2F%3E%0A%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%2219.2%22%20width%3D%22100%22%20height%3D%22.8%22%20fill%3D%22%232A1A15%22%20opacity%3D%22.5%22%2F%3E%3C%2Fsvg%3E") center/auto 100% repeat-x; } /* ============================================================ THE PALACE ------------------------------------------------------------ One rule governs every number below: NOTHING IN THIS WORLD MOVES FAST, AND NOTHING OVERSHOOTS. Murals do not animate. The things that actually move in a cave are lamplight, smoke, dust and — in the painting — ribbon. All of them are slow and low-amplitude. The single fastest way to make an ancient thing look like a mobile game is easing that overshoots: a halo that springs into place is a notification badge, not a god. So: no duration under 400ms, and no cubic-bezier that leaves the 0-1 box. tools/check-palaces.mjs enforces both against this file after it is built, for the same reason the saturation ceiling exists — a taste rule that is not arithmetic will quietly rot. ============================================================ */ /* The niche is LIGHTER than the page, not darker — a lit alcove in a cream wall. This is the screen Summer pointed at: on the old dark ground the deity was near-invisible, dark figure on dark plaster, and the ornament we most want seen was the thing least visible. */ .palace { position: relative; min-height: 62vh; display: grid; place-items: end center; overflow: hidden; border-radius: 14px; background: var(--silk); } /* The caisson ceiling, turning once every four minutes. At that speed you cannot see it move — you can only tell that the screen is not a photograph. That is the entire intended effect. */ .palace::before { content: ''; position: absolute; inset: -30% -30% auto -30%; aspect-ratio: 1; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23E9C97A%22%20stroke-width%3D%221.6%22%3E%0A%20%20%20%20%20%20%20%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%2288%22%20height%3D%2288%22%2F%3E%0A%20%20%20%20%20%20%20%3Crect%20x%3D%2221%22%20y%3D%2221%22%20width%3D%2258%22%20height%3D%2258%22%20transform%3D%22rotate(45%2050%2050)%22%2F%3E%0A%20%20%20%20%20%20%20%3Crect%20x%3D%2230%22%20y%3D%2230%22%20width%3D%2240%22%20height%3D%2240%22%2F%3E%0A%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%3Crect%20x%3D%2242%22%20y%3D%2242%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%232E5C8A%22%0A%20%20%20%20%20%20%20transform%3D%22rotate(45%2050%2050)%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; opacity: .10; animation: turn 240s linear infinite; pointer-events: none; } @keyframes turn { to { transform: rotate(360deg); } } .shrine-svg { width: 100%; max-width: 320px; height: auto; display: block; } /* --- the two states --- A dark palace is not a greyed-out button. It is the same shrine with the lamp out: you can still make out the figure, the way you can in an unlit niche. Desaturating rather than dimming is what keeps it feeling like absence of light rather than absence of data. */ .palace.dark .shrine-svg { filter: saturate(.12) brightness(.55); } .palace.dark .lamp .wick { opacity: 0; } .palace.dark .lampglow { opacity: 0; } .palace.dark .flame { opacity: .15; } .palace.lit .shrine-svg { filter: none; } /* Lighting is one slow bloom, 2.2s, no bounce. It is the only moment in the app that is allowed to feel like an event, so it gets length rather than snap — the opposite of what a game would do here. */ .palace.lighting .shrine-svg { animation: kindle 2200ms ease-out both; } @keyframes kindle { 0% { filter: saturate(.12) brightness(.55); } 45% { filter: saturate(.7) brightness(1.25); } 100% { filter: none; } } /* --- lamp --- Flame is asymmetric on purpose: a symmetric pulse reads as a heartbeat monitor. Scaling from the base (transform-origin at the wick foot) is what makes it look like burning rather than throbbing. */ .lamp .wick { transform-origin: 100px 280px; animation: flicker 5200ms ease-in-out infinite; } @keyframes flicker { 0%, 100% { transform: scaleY(1) scaleX(1); opacity: .95; } 27% { transform: scaleY(1.14) scaleX(.94); opacity: 1; } 53% { transform: scaleY(.92) scaleX(1.04); opacity: .8; } 74% { transform: scaleY(1.06) scaleX(.98); opacity: .95; } } .lampglow { animation: breathe 7000ms ease-in-out infinite; } @keyframes breathe { 0%,100% { opacity: .8; } 50% { opacity: 1; } } /* --- mandorla flame border --- The ring itself never moves. Only its opacity shifts, so the halo appears to burn without the geometry sliding, which would read as a spinner. */ .flame { animation: emberpulse 9000ms ease-in-out infinite; } @keyframes emberpulse { 0%,100% { opacity: .55; } 50% { opacity: .95; } } /* --- ribbons --- Four ribbons on four different periods, none of them multiples of each other, so they never synchronise. Synchronised ribbons look mechanical; this is the difference between silk and windscreen wipers. */ .ribbon { transform-origin: 100px 150px; } .r1 { animation: sway1 11000ms ease-in-out infinite; } .r2 { animation: sway2 13000ms ease-in-out infinite; } .r3 { animation: sway1 9000ms ease-in-out infinite reverse; } .r4 { animation: sway2 15000ms ease-in-out infinite reverse; } @keyframes sway1 { 0%,100% { transform: rotate(0deg) translateX(0); } 50% { transform: rotate(1.6deg) translateX(2px); } } @keyframes sway2 { 0%,100% { transform: rotate(0deg) translateX(0); } 50% { transform: rotate(-1.6deg) translateX(-2px); } } /* --- smoke and dust --- Both are under 40% opacity and take 12-20 seconds to cross the frame. If a visitor can consciously track one of these, it is too fast. */ .smoke .s1 { stroke-dasharray: 3 7; animation: rise 16000ms linear infinite; } @keyframes rise { to { stroke-dashoffset: -100; } } .mote { animation: drift 14000ms ease-in-out infinite; } .m1 { animation-duration: 17000ms; animation-delay: -3000ms; } .m2 { animation-duration: 21000ms; animation-delay: -7000ms; } .m3 { animation-duration: 12500ms; animation-delay: -1500ms; } .m4 { animation-duration: 19000ms; animation-delay: -9000ms; } @keyframes drift { 0%,100% { transform: translate(0,0); opacity: .18; } 50% { transform: translate(3px,-9px); opacity: .6; } } /* --- the plaque --- Text sits BELOW the niche on solid ground, never over the figure. Reading over ornament is the thing the ornament rule exists to prevent, and a god is the most ornamental object we have. */ .plaque { position: relative; z-index: 2; width: 100%; padding: 14px 16px 16px; background: linear-gradient(to top, var(--silk) 62%, color-mix(in srgb, var(--silk) 80%, transparent)); } /* --gold-light was a TYPO for --goldLight and resolved to nothing, so this line has been rendering in the inherited colour since it was written. Nothing caught it: check-theme measured the pairings it was TOLD about and never asked whether the stylesheet's own var() references exist. It does now. */ .plaque .zh { font-size: var(--step-3); color: var(--lacquer); letter-spacing: .12em; line-height: 1.2; } .plaque .py { font-size: var(--step--1); color: var(--umber); opacity: .8; letter-spacing: .18em; text-transform: uppercase; } .plaque .en { font-size: var(--step-0); color: var(--ink); margin-top: 6px; } /* Provenance, shown rather than hidden. A claim we cannot source is labelled in the interface, not quietly dropped — that label is the product. */ .prov { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--umber); opacity: .75; margin-top: 8px; } .prov::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--celadon); } .prov.hedged::before { background: var(--gold); } .prov.ours::before { background: var(--rose); } /* --- respect the setting --- Someone who has asked their device to stop animating has usually asked for a medical reason. The world still has to READ as lit, so state stays and only motion goes. */ @media (prefers-reduced-motion: reduce) { .palace::before, .lamp .wick, .lampglow, .flame, .ribbon, .smoke .s1, .mote { animation: none !important; } .palace.lighting .shrine-svg { animation: none !important; filter: none; } }