/* Fonts are local. No preconnect, no external stylesheet, no runtime fetch to a font
     provider — a Google Fonts request carries every child's IP to a third party, and
     BRIEF-RUNG-2.md §7's rule about PII to third parties does not start applying at
     Rung 5. Both files are the unmodified Google Fonts source variable fonts; their
     OFL licences and SHA-256 hashes sit beside them in the parent directory. */
@font-face{
  font-family:"Fredoka";
  src:url("../Fredoka.ttf") format("truetype-variations");
  font-weight:400 700;
  font-display:swap;
}
@font-face{
  font-family:"Nunito";
  src:url("../Nunito.ttf") format("truetype-variations");
  font-weight:400 800;
  font-display:swap;
}
/* ---------------------------------------------------------------------------
     TOKENS — semantic, never literal. Each name says the ROLE a colour plays,
     not the colour it happens to be: --surface-stage, never --dark-indigo.
     That is what lets an art-direction swap re-point a relationship instead of
     re-deriving one, and it matters precisely because these values are not final.
     Reasoning: WORKING.md, "Making two agents produce one product".

     A format may use these and nothing else. A raw hex colour in a format file
     is a bug the check suite is meant to fail on.
     --------------------------------------------------------------------------- */
:root{
  /* Parts of speech do not belong to a theme. Blue means noun wherever the
       child meets it — a teaching signal, not decoration — so it survives every
       world and is deliberately declared outside both themes below. */
  --pos-noun:#4FA3F7;
  --pos-noun-d:#2F7FCC;
  --pos-adj:#FFC94A;
  --pos-adj-d:#DFA71C;
  --pos-verb:#2FBF71;
  --pos-verb-d:#1F9D58;
  --pos-prep:#C58BF2;
  --pos-prep-d:#A063D4;
  /* F4's hero, a T-rex with a jetpack and goggles (BRIEF-RUNG-4.md, decision 12), in the palette
       agy drew him in: green with a dark outline, brass goggles, red rockets. A character is the
       same in every world, so, like the parts of speech, these sit outside both themes. Never
       purple: a purple T-rex is Barney. The tooth and the shine share a value and stay two roles,
       as paper and inverse ink do. */
  --hero-hide:#2CB654;
  --hero-hide-shade:#1A7A38;
  --hero-line:#122416;
  --hero-tooth:#FFFFFF;
  --hero-shine:#FFFFFF;
  --hero-lens:#72DDF7;
  --hero-iris:#FFD166;
  --hero-frame:#E09F3E;
  --hero-frame-shade:#9E6718;
  --hero-buckle:#FFC300;
  --hero-strap:#7F4F24;
  --hero-pack:#6C757D;
  --hero-pack-shade:#495057;
  --hero-pack-trim:#E63946;
  --hero-pack-trim-shade:#B51724;
  --hero-flame:#FF7B00;
  --hero-flame-core:#FFD000;
  --hero-mouth:#7A1F2B;
  --hero-tongue:#E63946;
  --hero-rock:#7C7482;
  --hero-rock-shade:#5B5461;
  --hero-smoke:#C9D0DA;
  --hero-impact:#FFE45C;
  /* The hero at the till (Kasa Başı, 2026-09-27): a cap and a polo in red-orange, a pale collar,
       and the sign he holds up, a green tick or a red cross on card. The red-orange is his own:
       the founder chose C for the market and kept its sign petrol (2026-09-28), so he stands out
       from his shop. */
  --hero-cap:#E0532B;
  --hero-cap-shade:#A93A1C;
  --hero-shirt:#EE6A3C;
  --hero-shirt-shade:#BF4A22;
  --hero-collar:#FFF1D6;
  --hero-stick:#B07A43;
  --hero-placard:#FFF8E7;
  --hero-placard-shade:#EADCB9;
  --hero-sign-yes:#179A52;
  --hero-sign-no:#D93636;
  /* F4's tunnel and its lava (BRIEF-RUNG-4.md, step 5). The same in every world, as F0's stage
       keeps its dark neutral in both: a cave shaft, warm and dark, lit from below. The lava is the
       game's clock, so its roles are what a child reads at a glance: the bright edge that says how
       close it is, the surface, and the deep. */
  --tunnel-rock:#362A30;
  --tunnel-shaft:#3E3236;
  --tunnel-seam:#33292C;
  --tunnel-ledge:#8A7466;
  --tunnel-opening:#140F11;
  /* The walls' art, in agy's palette (2026-09-23): boulders lit from the lava below, a warm
       near-black outline a shade softer than the hero's, so the rock stays behind him; bone for
       the fossils; and pale quartz, where agy had purple, which F4 keeps off (Barney) and which is
       F0's colour for prepositions. */
  --tunnel-boulder:#54434B;
  --tunnel-boulder-light:#6B5660;
  --tunnel-line:#1E1519;
  --tunnel-fossil:#DDD0B8;
  --tunnel-fossil-shade:#B0A085;
  --tunnel-crystal:#9CC4D6;
  --tunnel-crystal-light:#DDF0F7;
  --lava-edge:#FFD23F;
  --lava-surface:#FF6B1A;
  --lava-deep:#C0290F;
  /* foods:start */
  /* Kasa Başı's goods, drawn by agy and Claude (2026-09-27) in the hero's line and the same in
       every world, as he is. Generated by art/foods/build.mjs between these markers. */
  --food-line:var(--hero-line);
  --food-shine:var(--hero-shine);
  --food-apple-stem:#5D4037;
  --food-apple-leaf:#4CAF50;
  --food-apple-leaf-shade:#2E7D32;
  --food-apple-body:#E63946;
  --food-apple-body-shade:#A81815;
  --food-banana-stem:#5E4A1C;
  --food-banana-body:#FFD23A;
  --food-banana-body-shade:#E8A413;
  --food-orange-stem:#5C381E;
  --food-orange-leaf:#3DB83A;
  --food-orange-leaf-shade:#237A24;
  --food-orange-body:#FF7A00;
  --food-orange-body-shade:#D95200;
  --food-orange-spot:#C24300;
  --food-lemon-body:#FFE817;
  --food-lemon-body-shade:#D6B500;
  --food-lemon-spot:#C4A200;
  --food-avocado-body:#2E531F;
  --food-avocado-flesh:#C4E862;
  --food-avocado-flesh-shade:#98C236;
  --food-avocado-spot:#82A829;
  --food-avocado-pit:#7B431D;
  --food-tomato-body:#FF3326;
  --food-tomato-body-shade:#BA1C16;
  --food-tomato-stem:#2F942C;
  --food-tomato-leaf:#3DB83A;
  --food-tomato-leaf-shade:#237A24;
  --food-potato-body:#C89758;
  --food-potato-body-shade:#8D5B32;
  --food-potato-spot:#5A341A;
  --food-onion-root:#EDD59E;
  --food-onion-body:#E07A2C;
  --food-onion-body-shade:#9E4E16;
  --food-carrot-leaf:#2BB638;
  --food-carrot-leaf-shade:#197824;
  --food-carrot-body:#FF6B00;
  --food-carrot-body-shade:#CC4400;
  --food-pepper-stem:#1B6323;
  --food-pepper-body:#25B838;
  --food-pepper-body-shade:#127A23;
  --food-cucumber-stem:#85C270;
  --food-cucumber-body:#1D8239;
  --food-cucumber-body-shade:#105423;
  --food-cucumber-spot:#0C3E1B;
  --food-egg-body:#FFF4E0;
  --food-egg-body-shade:#E3C8A0;
  --food-milk-cap:#2563EB;
  --food-milk-pack:#F0F4F8;
  --food-milk-pack-shade:#BCCCDC;
  --food-milk-label:#1D4ED8;
  --food-cheese-body-shade:#D45B12;
  --food-cheese-body:#F9A602;
  --food-cheese-flesh:#FFD166;
  --food-cheese-spot:#E09F3E;
  --food-bread-body:#DE9B52;
  --food-bread-body-shade:#99582A;
  --food-bread-flesh:#FEFAE0;
  --food-water-cap:#023E8A;
  --food-water-pack:#64B5F6;
  --food-water-pack-shade:#1E88E5;
  --food-water-label:#FFFFFF;
  --food-juice-pack:#FF7A00;
  --food-juice-pack-shade:#D85800;
  --food-juice-cap:#E52C2C;
  --food-juice-label:#FFFFFF;
  --food-juice-body:#FFA200;
  --food-juice-leaf:#28A745;
  --food-cheese-wheel-body:#FFC832;
  --food-cheese-wheel-body-shade:#E57D07;
  --food-cheese-wheel-flesh:#FFF3B0;
  --food-cheese-wheel-flesh-shade:#F3D87E;
  --food-cheese-wheel-spot:#C8963E;
  /* foods:end */
  /* Kasa Başı's customers (2026-09-27): six hues, each in the six roles agy drew the parts in,
       and the house line. Characters, so the same in every world, as the hero and the goods are. */
  --customer-line:var(--hero-line);
  --customer-teal-skin:#E1F4F2;
  --customer-teal-cloth:#2B938B;
  --customer-teal-cloth-shade:#1F706A;
  --customer-teal-cloth-light:#66C2BB;
  --customer-teal-hair:#134642;
  --customer-teal-hair-shade:#0B2C29;
  --customer-violet-skin:#F2ECF9;
  --customer-violet-cloth:#7852A9;
  --customer-violet-cloth-shade:#583980;
  --customer-violet-cloth-light:#A888D4;
  --customer-violet-hair:#382156;
  --customer-violet-hair-shade:#241438;
  --customer-blue-skin:#E8F1FA;
  --customer-blue-cloth:#2D70B6;
  --customer-blue-cloth-shade:#1F5085;
  --customer-blue-cloth-light:#74A7E0;
  --customer-blue-hair:#13335A;
  --customer-blue-hair-shade:#0A1D36;
  --customer-rose-skin:#FDF0F3;
  --customer-rose-cloth:#C94A6E;
  --customer-rose-cloth-shade:#9B3350;
  --customer-rose-cloth-light:#ECA0B5;
  --customer-rose-hair:#5E1A2D;
  --customer-rose-hair-shade:#3D0E1C;
  --customer-mustard-skin:#FDF6E8;
  --customer-mustard-cloth:#D4901A;
  --customer-mustard-cloth-shade:#A36A0D;
  --customer-mustard-cloth-light:#F2C265;
  --customer-mustard-hair:#543405;
  --customer-mustard-hair-shade:#362002;
  --customer-slate-skin:#EFF2F5;
  --customer-slate-cloth:#5C6F84;
  --customer-slate-cloth-shade:#415163;
  --customer-slate-cloth-light:#96A7BB;
  --customer-slate-hair:#242E3B;
  --customer-slate-hair-shade:#151C24;
  /* market:start */
  /* Kasa Başı's market, C, Codex's enamel market, chosen by the founder on 2026-09-28 with its
       sign in its own petrol. One lit interior, the same in every world, as a world is, in the
       hero's line. Generated by art/market/build.mjs between these markers. */
  --market-line:var(--hero-line);
  --market-shine:var(--hero-shine);
  --market-wall:#F2ECDD;
  --market-plaster:#E6DFCE;
  --market-porcelain:#D9E1D6;
  --market-porcelain-shade:#B9C9BD;
  --market-enamel:#78958E;
  --market-enamel-shade:#536F69;
  --market-board:#FBF6E8;
  --market-board-shade:#DED5BF;
  --market-recess:#D5CAB3;
  --market-timber:#C0A17A;
  --market-timber-shade:#997D5B;
  --market-lamp:#C3A264;
  --market-lamp-shade:#A28550;
  --market-bulb:#F6E7BB;
  --market-leaf:#819576;
  --market-leaf-shade:#637956;
  --market-pot:#B8876B;
  --market-pot-shade:#96694F;
  --market-sign:#486D67;
  --market-sign-shade:#34514E;
  --market-top:#E5DDCC;
  --market-top-shade:#CBC2AF;
  --market-rubber:#384746;
  --market-rubber-shade:#2B3837;
  --market-metal:#B4C4BE;
  --market-metal-shade:#82978F;
  --market-glass:#172B2B;
  --market-light:#A1BAA0;
  --market-bag-shade:#A1855B;
  --market-bag:#C8AC7E;
  --market-desk:#B8ACA0;
  --market-desk-shade:#9A9086;
  --market-screen:var(--till-screen);
  --market-slot:#233733;
  --market-keypad:#3F5651;
  --market-paper:#FBF8EE;
  --market-paper-shade:#E2DCCD;
  --market-handle:#876D4B;
  /* market:end */
  /* What Kasa Başı draws on its market (the brief's B4): the letters on the hanging sign, the
       scanner's laser, the till's screen with the receipt's rows and slots, the till's keys and its
       Yazdır key, the print on the receipt, and the right line beside a slip. The game's own, so
       they stay whichever drawing is chosen, and art/market/check.mjs holds every drawing to them:
       the sign, the glass, the keypad and the paper each read against theirs. The look study's
       values since round two, which the founder has seen. */
  --till-sign-ink:#FFF6E8;
  --till-laser:#FF3B3B;
  --till-screen:#EEF7FD;
  --till-screen-head:#CFE6F5;
  --till-screen-ink:#1C2533;
  --till-slot:#FFFFFF;
  --till-slot-empty:#DCEAF4;
  --till-slot-live:#FFB020;
  --till-key:#F4F6F8;
  --till-key-shade:#9AA6B2;
  --till-key-ink:#1C2533;
  --till-print:#3BB273;
  --till-print-shade:#288A56;
  --till-print-ink:#FFFFFF;
  --till-paper-ink:#2A2A30;
  --till-fix:#E3F6EA;
  --till-fix-ink:#16804A;
  /* Motion. A format animates through these or not at all. This is how
       GAME_DESIGN's "spectacle between items, never inside one" stops being a
       sentence in a brief and becomes something a second agent cannot get wrong. */
  --t-press:.06s;
  --t-enter:.18s;
  --t-exit:.14s;
  --ease-out:cubic-bezier(.2,.7,.3,1);
  /* The world layer a theme paints behind the shell. */
  --world-image:none;
  --world-anchor:center bottom;
}
/* --- Theme: studio ---------------------------------------------------------
     The dark neutral build F0 has had since v4. No world behind it. Kept as a
     real theme rather than deleted, because it is the control case: any format
     that breaks when the theme swaps is caught by whoever just built it, not six
     weeks later when the final art lands. */
[data-theme="studio"]{
  --surface-page:#1B1F3B;
  --surface-stage:#252A4E;
  --surface-control:#2E3460;
  --surface-sign:#2E3460;
  --surface-sheet:#2E3460;
  --surface-rack:transparent;
  --sign-texture:none;
  --line-soft:#3A4075;
  --ink:#F4F5FA;
  --ink-dim:#9AA1D4;
  --ink-on-sign:#FFFFFF;
  --accent-go:#7BE0C4;
  --accent-say:#F2545B;
  --world-image:none;
}
/* --- Theme: island ---------------------------------------------------------
     The approved direction — GAME_DESIGN.md, "Island reference". What it settles:
     the world sits AROUND the UI, the drawing stage stays a dark neutral panel
     (so it is still true for `swimming in the sea` and `under the bed` alike),
     and it costs one backdrop per world rather than per-scene compositions.
     Both open constraints from that review are honoured below — the backdrop
     never moves (.world), and the racks get their own scrim (.racks). */
[data-theme="island"]{
  --surface-page:#8FD6E8;
  --surface-stage:#1E2A44;
  --surface-control:#232C4E;
  --surface-sign:#8A5A32;
  --surface-sheet:#232C4E;
  --surface-rack:rgba(255,251,242,.58);
  /* Seamless wood tile. Absent = the gradients below carry the plank. */
  --sign-texture:url("../../art/textures/wood.png");
  --line-soft:rgba(255,255,255,.32);
  --ink:#FFFFFF;
  --ink-dim:#F0F8FC;
  --ink-on-sign:#FFF6E4;
  --accent-go:#7BE0C4;
  --accent-say:#F2545B;
  /* BACKDROP. The illustration is the first layer, so it wins whenever it is
       there. If the file is missing the browser simply skips that layer and the
       band gradient below shows through — a real fallback, not a broken image,
       which is why both are declared instead of one being swapped for the other.
       Band positions and hues below are sampled from the illustration so the two
       agree at the horizon and neither surprises the scrims built against it. */
  --world-image:
  url("../../art/worlds/island.webp"),
  radial-gradient(ellipse 46% 26% at 50% 44%, rgba(253,243,216,.85), transparent 70%),
  linear-gradient(to bottom,
  #7FC9E8 0%,
  #A8DCEF 22%,
  #DCEFF6 40%,
  #FBECC8 50%,
  #3AAFD9 54%,
  #2E9BC9 58%,
  #6FD5E0 62%,
  #E8DCAE 65%,
  #F5D98A 72%,
  #EFC96E 100%);
}
/* Shared material, ink and elevation roles. Values remain those of F0. */
:root {
  --surface-timber: var(--sign-texture),
  linear-gradient(180deg, rgba(255,236,205,.28), transparent 34%),
  linear-gradient(0deg, rgba(60,32,10,.30), transparent 26%),
  repeating-linear-gradient(90deg,
  rgba(94,54,18,.20) 0 2px,
  transparent 2px 7px,
  rgba(255,224,178,.10) 7px 9px,
  transparent 9px 16px),
  linear-gradient(180deg, #C08444, #97632F 58%, #85552A);
  --shadow-raised-go: 0 4px 0 #4FBFA0;
  --shadow-raised-say: 0 4px 0 #C4383F;
  --shadow-raised-active: 0 4px 0 #C9CCE0;
  --shadow-raised-play: 0 4px 0 var(--pos-prep-d);
  --shadow-raised-check: 0 4px 0 var(--pos-adj-d);
  --shadow-small-noun: 0 3px 0 var(--pos-noun-d);
  --shadow-small-adjective: 0 3px 0 var(--pos-adj-d);
  --shadow-small-verb: 0 3px 0 var(--pos-verb-d);
  --shadow-small-preposition: 0 3px 0 var(--pos-prep-d);
  --shadow-small-go: 0 3px 0 #4FBFA0;
  --shadow-timber: inset 0 2px 0 rgba(255,232,196,.30),
  0 6px 0 #5E3A1E,
  0 12px 24px rgba(28,52,72,.30);
  --shadow-engraved: 0 2px 2px rgba(50,26,6,.55);
  --shadow-floating: 0 6px 20px rgba(0,0,0,.30);
  --shadow-wash-edge: inset 0 0 0 1px rgba(255,255,255,.55);
  --shadow-wash-ink: 0 1px 0 rgba(255,255,255,.55);
  --shadow-small: 0 3px 0 rgba(0,0,0,.20);
  --shadow-pressed: inset 0 2px 5px rgba(28,42,20,.28);
  /* F4: the glow on the way through, in the go colour, and the lava's light cast upward. */
  --shadow-glow: 0 0 0 3px #7BE0C4, 0 0 22px 8px rgba(123,224,196,.6);
  --shadow-lava: 0 -8px 26px rgba(255,107,26,.5);
  --ink-inverse: #FFFFFF;
  --surface-paper: #FFFFFF;
  --line-selection: #FFFFFF;
  --track-goal: #3D4480;
  --surface-overlay: rgba(20,30,52,.38);
  --surface-overlay-active: rgba(20,30,52,.55);
  --ink-placeholder: #5C64A8;
  --line-control: #4A5192;
  --ink-empty: #565DA0;
  --ink-hint: #6B73B8;
  --ink-on-go: #0E3B31;
  --ink-on-play: #2A0F46;
  --ink-on-check: #2C2200;
  --surface-success: rgba(123,224,196,.14);
  --surface-comparison: rgba(255,201,74,.11);
  --ink-on-colour: #0E1330;
  --line-swatch: rgba(0,0,0,.28);
  --surface-scrim: rgba(10,12,30,.88);
  --line-timber: #5E3A1E;
  --ink-on-timber-muted: #F6E2BE;
  --ink-on-warm: #4A2C10;
  --surface-warm: rgba(255,235,200,.82);
  --ink-on-wash: #2A3550;
  --track-empty-wash: rgba(42,53,80,.22);
  --track-goal-wash: rgba(42,53,80,.38);
  --ink-on-paper: #12203A;
  --surface-explainer: rgba(20,30,52,.42);
  --line-overlay: rgba(255,255,255,.28);
  --ink-on-overlay: #F2F9FD;
  --surface-overlay-idle: rgba(20,30,52,.34);
  --surface-overlay-deep: rgba(12,20,38,.55);
  --font-body: "Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display: "Fredoka",sans-serif;
  --font-label: "Nunito",sans-serif;
}
/* --- Dresses: a game's own frame -------------------------------------------
     The founder chose A, 2026-09-30: each game brings its own frame while it is
     on screen (prototypes/shell/frame.js). A game with a world of its own
     declares `dress: true`, the shell marks it on <html> as data-game, and
     app.html's dress rules read the roles below. So a dress is a theme keyed by
     the game rather than chosen by the child, and like a theme it only re-points
     roles: every value is one of the game's own world tokens above.

     A dress is the same in both themes, one lit place, so it re-points the world
     layer too, and these blocks come after the themes to win over them. Every
     ink here reads at least 4.5:1 on its ground, as measured on the frame page
     (design/frame/, 2026-09-29), and check-f0-port.cjs measures it again.

     Roles: the page behind the world; the sign that carries the game's name;
     the line that draws every edge; the board under the level row and the note;
     the paper of the result, its right line and the mark on what to look at;
     the word on the sign; and the three shared buttons, go, hear and say. */
[data-game="KASA"]{
  /* Çiço Market: the plaster wall above an enamel rail and a porcelain dado,
       as the till's own scene has them. */
  --world-image:
  linear-gradient(to top,
  transparent 34%,
  var(--market-enamel) 34%,
  var(--market-enamel) calc(34% + .55rem),
  var(--market-wall) calc(34% + .55rem)),
  repeating-linear-gradient(to top, var(--market-porcelain-shade) 0 2px, transparent 2px 3.25rem),
  repeating-linear-gradient(to right, var(--market-porcelain-shade) 0 2px, transparent 2px 3.25rem),
  linear-gradient(var(--market-porcelain), var(--market-porcelain));
  --dress-page: var(--market-wall);
  --dress-sign: var(--market-sign);
  --dress-sign-shade: var(--market-sign-shade);
  --dress-sign-ink: var(--till-sign-ink);
  --dress-sign-name: var(--till-sign-ink);
  --dress-word: var(--till-sign-ink);
  --dress-line: var(--market-line);
  --dress-board: var(--market-board);
  --dress-board-ink: var(--till-paper-ink);
  --dress-paper: var(--market-paper);
  --dress-paper-ink: var(--till-paper-ink);
  /* The till's own green for a right line: the print's shade reads 4.1:1 on the
       paper, this 4.7:1. */
  --dress-right: var(--till-fix-ink);
  --dress-mark: var(--market-sign);
  --dress-go: var(--market-sign);
  --dress-go-ink: var(--till-sign-ink);
  --dress-hear: var(--market-porcelain);
  --dress-hear-ink: var(--market-sign-shade);
  /* Çiço's cap in its shade, so the label reads 6:1; his brighter red-orange
       gives only 3.6:1. The one button that is the child's voice wears him. */
  --dress-say: var(--hero-cap-shade);
  --dress-say-ink: var(--hero-placard);
  --dress-say-on: var(--market-paper);
  --dress-say-on-ink: var(--hero-cap-shade);
  --shadow-dress-sign: 0 4px 0 var(--market-sign-shade);
  --shadow-dress-go: 0 4px 0 var(--market-sign-shade);
  --shadow-dress-hear: 0 4px 0 var(--market-porcelain-shade);
  --shadow-dress-say: 0 4px 0 var(--hero-mouth);
}
[data-game="F4"]{
  /* The shaft's rock, lit orange from the lava below, with the seams of the
       tunnel's walls. */
  --world-image:
  radial-gradient(ellipse 85% 38% at 50% 112%, var(--lava-surface), transparent 72%),
  repeating-linear-gradient(168deg, transparent 0 6rem, var(--tunnel-seam) 6rem 6.3rem),
  linear-gradient(var(--tunnel-rock), var(--tunnel-shaft));
  --dress-page: var(--tunnel-shaft);
  /* The island's wooden plank becomes a stone of the tunnel, dark enough for the
       Turkish under the word to read 6:1. */
  --dress-sign: var(--tunnel-boulder);
  --dress-sign-shade: var(--tunnel-line);
  --dress-sign-ink: var(--tunnel-fossil);
  --dress-sign-name: var(--lava-edge);
  --dress-word: var(--tunnel-crystal-light);
  --dress-line: var(--tunnel-line);
  --dress-board: var(--tunnel-rock);
  --dress-board-ink: var(--tunnel-fossil);
  --dress-paper: var(--tunnel-rock);
  --dress-paper-ink: var(--tunnel-fossil);
  --dress-right: var(--lava-edge);
  --dress-mark: var(--lava-edge);
  --dress-go: var(--lava-edge);
  --dress-go-ink: var(--tunnel-line);
  --dress-hear: var(--tunnel-crystal);
  --dress-hear-ink: var(--tunnel-line);
  --dress-say: var(--lava-surface);
  --dress-say-ink: var(--tunnel-line);
  --dress-say-on: var(--tunnel-fossil);
  /* The frame page had the lava's deep red here, which reads 3.87:1 on the
       fossil; check-f0-port.cjs caught it building the frame. The tunnel's line
       reads 11.7:1, and the button still turns light while it records. */
  --dress-say-on-ink: var(--tunnel-line);
  --shadow-dress-sign: 0 5px 0 var(--tunnel-line);
  --shadow-dress-go: 0 4px 0 var(--lava-surface);
  --shadow-dress-hear: 0 4px 0 var(--tunnel-boulder);
  --shadow-dress-say: 0 4px 0 var(--lava-deep);
}