/* Every colour, face, radius and easing the site uses. Nothing else in the CSS
   states a colour: site.css and acrostic.css reference these and only these.

   #58daca IS the site. Not a tint of it, not a hue beside it — the primary at
   full strength, and everything else derived from that one decision. In the LIGHT
   theme it is the SHEETS: the page is pale, scattered with the mint as a field of
   dots, and every panel lying on it — a card, an archive row, a clue list, a
   board's surround — is the mint undiluted. In the DARK theme the page goes to a
   deep indigo and the mint stops being a surface at all: there it is text, the
   one place a colour that bright can sing.

   THE LIGHT THEME USED TO BE THE OTHER WAY ROUND, mint page and pale panels, and
   the swap is why almost nothing here had to be repicked. Every ink below was
   tuned to clear AA against #58daca because #58daca was the ground; moving it to
   the panels means those inks arrive already qualified for it, and gain contrast
   against the paler page. Two values did have to move, and both say so at the
   line that moved them.

   That mint is saturated enough to cost real contrast — it sits at 0.57 relative
   luminance, so anything setting AA text on it has to come in under 0.087. That
   is why the inks here are so dark, and why the four accent inks are darker than
   they look like they need to be. `npm run check:contrast` is what keeps the bill
   paid.

   The STRUCTURE is sheets on a patterned ground: cards with a real shadow under
   them that lift when hovered, dashed rules doing the dividing, marker bars
   instead of boxes, headlines ranged left and set tight. The play area of every
   game sits on one opaque panel, because a board over a pattern stops being an
   object — see `.clues,.rules,.playfield` in site.css.

   The accents are the primary's RGB rotations: swap the channels of a mint and
   you get coral, magenta and violet. Four, one per puzzle, picked by number, so
   consecutive days differ with nothing to author. The fourth is a deep teal
   rather than the primary itself — a marker bar in #58daca on a #58daca CARD is
   an invisible marker bar.

   Two themes, one set of names. Every token is redefined for dark under both
   `:root[data-theme="dark"]` (the toggle) and `prefers-color-scheme`. Run
   `npm run check:contrast` after any change: it walks light and dark, default
   and all four accents, and it will catch what an eye will not. */

:root{
  color-scheme:light;

  /* ---- page ---- */
  /* The primary, undiluted. Every ink below is set against this one value, so
     moving it costs contrast everywhere at once — re-run the contrast check and
     expect the accent inks to need re-tuning with it. */
  /* The page is the PALE one and the panels are the mint — which is the reverse
     of how this palette started, and the swap is the whole reason the rest of
     this file did not have to be repicked. Every ink below was tuned to clear AA
     against #58daca, because #58daca used to BE the page; moving it onto the
     cards means those inks arrive already qualified for their new ground, and
     gain contrast against the paler one. Two values did have to move, and both
     say so where they are. */
  --page:#eefaf6;
  --page-deep:#dcf2ed;      /* the wash under a panel that has to sit back */
  --card:#58daca;
  --ink:#052421;
  --slate:#17443e;          /* body copy and secondary text */
  --dim:#1c4d46;            /* 10-12px uppercase meta */
  --muted:#22564e;          /* struck-through tips: recedes, still legible */
  --rule:#23a794;           /* the hairline. Most of the layout is made of these */
  --rule-firm:#1e9080;      /* the borders that carry structure rather than hint at it */

  /* ---- the primary ---- */
  /* #58daca is 1.7:1 on white and 1.2:1 on --page, so it is a FILL: the wordmark
     chip, the marker bars, the punctuation on the board, the bloom in the ground.
     --brand-ink is the same hue pulled dark enough to set type in. */
  /* Moved by the swap #1. --brand is the ground of the archive's "Today" chip,
     and that chip sits ON a card. At #58daca it would be a mint chip on a mint
     card, which is no chip at all. Pulled down until it reads against the card
     while still taking the dark --on-accent at 4.5. */
  --brand:#12a893;
  --brand-ink:#054e43;
  --brand-soft:#e2f8f4;
  --brand-line:#7fd6c9;
  /* The wordmark chip and the menu's mark. These are CHROME colours: they never
     take the puzzle's accent, because the masthead should not change colour with
     the day. Light gets purple, dark gets the primary at full strength — and
     dark has to, because --brand and --page are the same value in the light
     theme, so a mint chip there would be an invisible chip. */
  --chip:#5a24d0;
  --chip-ink:#f3eeff;
  --nav-mark:#4a1fb4;       /* the menu's hover and current-section mark */
  /* A resting menu item, and the softest one the bar allows. The brief was
     "white", and white is not available: #58daca sits at 0.565 luminance, so the
     BEST any lighter colour can manage against it is pure white at 1.71:1 —
     there is no pale ink that clears AA on this bar, only darker ones. This is
     the lightest that does (4.90:1), a step softer than --slate so the menu
     still reads as quieter than body copy. Making the items genuinely white
     would mean darkening the masthead itself. */
  --nav-ink:#22564e;
  /* Moved by the swap #2. The bloom was a pale wash, which read over the mint
     page and is invisible over a pale one. It becomes the mint. */
  --bloom:rgba(88,218,202,.38);   /* the two soft blooms in the page ground */

  /* ---- board ---- */
  /* The board is what the primary dries down to, and it stays the darkest thing
     on the page: a revealed letter reads instantly against its blank neighbours
     because the tiles are light on dark. Lightening it costs that contrast and
     buys only airiness. */
  --board:#05221f;
  --board-line:#0f423b;
  --tile:#ffffff;             /* an unrevealed tile */
  --tile-line:#ffffff;    /* its edge — the tile itself on paper, a rim in the dark */
  --tile-on:#ffffff;      /* a revealed one */
  --tile-ink:#052421;
  --punc:#58daca;

  /* ---- answer slots ---- */
  --slot-line:#86d8cb;

  /* ---- binary board ----
     A different problem from the acrostic's board, and so a different answer.
     There the tiles are light on a near-black ground because a REVEALED letter
     has to land against its blank neighbours; a binary grid reveals nothing, it
     is filled in, so it is drawn as what it actually is — a printed grid. Paper
     ground, hairlines between the squares, a firmer rule around the outside.

     Three styles sit on top of these, chosen by the player and remembered across
     every puzzle (public/js/storage.js). `plain` uses the first four tokens and
     nothing else; `ink` colours the digits; `fill` colours the squares. In all
     three, a digit the PUZZLE gave is the full-strength value and one the PLAYER
     placed is a step back — so colour keeps meaning WHICH DIGIT, and weight and
     value carry WHO PUT IT THERE. Without that the two are indistinguishable and
     the board stops being checkable by eye.

     The two hues are the site's own pair: the primary mint-teal for a 0 and the
     wordmark's purple for a 1. They are the two colours the site already uses to
     mean something — the ground and the chip — so a board reads as belonging
     here rather than to the stock blue/orange every other binary puzzle wears. */
  --bin-cell:#f2fcfa;       /* a square's ground: paper, a shade lighter than --card */
  --bin-line:#1e9080;       /* the hairline between two squares */
  /* The board's outer rule, and the heavy rules between the nine-block
     special's blocks. What matters is the STEP from --bin-line: a block rule
     has to read as a different kind of line from a hairline, not merely as a
     thicker one. That step is 1.55:1 here and `npm run check:contrast` holds
     both themes to it. */
  --bin-edge:#0f6f61;
  --bin-given:#04231f;      /* a digit the puzzle handed over */
  --bin-ink:#1d574f;        /* a digit the player placed */

  /* The line flash. When a row or a column is FULLY filled, the page says once
     whether it is right: a pulse along the line and then nothing. Nothing on the
     board is permanently marked — the grid a player looks back at is the grid they
     filled in, which is why this is an animation and not a state.

     The RING carries the signal and the tint is deliberately pale, because a digit
     has to stay legible while its own square is flashing under it; both halves are
     in check:contrast. Fixed hues rather than the puzzle's accent: the accent is
     coral on one day in four, and "wrong" in coral beside "right" in coral is no
     signal at all. */
  --bin-flash-ok:#0e8f7c;
  --bin-flash-ok-soft:#dffaf3;
  --bin-flash-no:#d8402a;
  --bin-flash-no-soft:#ffefec;

  /* `ink`: the digits take the colour, the squares stay paper */
  --bin-zero-ink:#04463c;
  --bin-zero-ink-soft:#0b7a6a;
  --bin-one-ink:#3a1790;
  --bin-one-ink-soft:#6b3ae0;

  /* `fill`: the squares take the colour. -soft is the player's own square, so a
     board reads at a glance as what was given and what was worked out. */
  --bin-zero-cell:#66c8b8;
  --bin-zero-cell-soft:#aee7dd;
  --bin-zero-on:#04332c;
  --bin-one-cell:#a97dff;
  --bin-one-cell-soft:#d5c6ff;
  --bin-one-on:#2c1266;

  /* ---- WordGuess: the three marks ----
     Fixed hues, never the puzzle's accent — the same decision, for the same
     reason, as the binary's line flash above: the accent is coral on one day in
     four, and "right letter, right place" in coral beside "not in the word" in
     coral is no signal at all.

     THE THREE DIFFER IN VALUE AS WELL AS IN HUE, and that is the accessibility
     design rather than a happy accident. Teal against amber is a kinder pair
     than the green against yellow this genre usually wears, but it is still a
     pair of HUES, and the commonest colour blindness is exactly the one that
     flattens them together. So the four grounds a tile can wear are a LADDER of
     value — empty, then absent, then present, then exact — and the board simply
     gets darker as the player learns more. Desaturate it and the marks are still
     four marks. The wording on the aria-live status line after every guess is
     the third carrier, and the keys repeat the same scale.

     `absent` being the DARKEST rung rather than a middle grey is the correction
     that made that true. It started at #6b8480, a sensible-looking slate that
     happens to sit at the same luminance as the teal — exactly 1.00:1 against
     `exact`, so in greyscale "in the right place" and "not in the word at all"
     were the same tile. Nothing about the swatches looked wrong; the gate is the
     only reason it was found.

     Every pair is measured by npm run check:contrast — each figure against its
     own ground, and each of the three grounds against the other two. */
  --wg-exact:#0e8f7c;       /* in the word, in the right place */
  --wg-exact-on:#ffffff;
  --wg-present:#e8b23a;     /* in the word, somewhere else */
  --wg-present-on:#3d2a02;
  --wg-absent:#3a4a47;      /* not in the word — the darkest rung */
  --wg-absent-on:#ffffff;

  /* an untouched tile, and the rim a typed-but-uncommitted letter takes */
  --wg-tile:#f2fcfa;
  --wg-tile-line:#7fd6c9;
  --wg-tile-line-lit:#0f6f61;
  --wg-ink:#052421;

  /* a key nobody has ruled in or out yet */
  --wg-key:#d7efea;
  --wg-key-ink:#052421;

  /* the WordGuess thumbnail's two marks (views/partials/familyThumb.ejs). Not
     --wg-exact/--wg-present themselves: those are tuned to sit on --wg-tile, a
     pale paper ground, and used raw on the mint --card they fail the same 3:1
     floor as the raw daily accent does (see --accent-ink above). Same fix,
     same shape: a darkened ink of each fixed hue, held to --card in
     scripts/checkContrast.mjs's PAIRS — and to each other: darkened far
     enough, teal and amber flatten into the same dark smudge and the top row
     stops reading as "two exact, one present", so the pair carries its own
     MARK_STEP row there too. */
  --wg-exact-ink:#054e43;
  --wg-present-ink:#8a5a0a;

  /* ---- controls ---- */
  --placeholder:#3d625d;
  --dupe-line:#86d8cb;      /* the field border on an already-found word */
  --ink-lift:#123a35;       /* a dark button, hovered */
  --on-accent:#052421;      /* figures set on a filled accent — always the ink */

  /* the only shadow in the scheme, cast in the board's own hue so it never
     reads grey. Nothing else here floats: panels separate with a rule or with a
     step of value, and this one is the soft drop under the board — a heavy dark
     panel that would otherwise sit on the page like a sticker. */
  --shadow-board:rgba(5,34,31,.42);

  /* ---- type ---- */
  /* Three roles, three faces. Archivo is the voice — a tight neo-grotesk drawn
     for news headlines, which is the reference the layout comes from. Fraunces
     carries the letters on the board, the clock and the final time, with SOFT
     and WONK turned up: those two axes are the entire reason for choosing it,
     and with them a revealed sentence reads as something printed rather than
     typed. KEEP THE AXES — the Google Fonts URL requests opsz,wght,SOFT,WONK and
     dropping them silently flattens it. Figtree is the workhorse: a tall
     x-height is what keeps a 15px clue sharp. */
  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --ui:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* ---- shape ---- */
  /* Softened, but not by much, and not evenly. A PANEL gets a real radius,
     because it is a sheet of paper lying on the page and paper has corners you
     can see. A TILE barely gets one: a letter in a rounded box reads as a button,
     in a crisp one as a square on a board, and that distinction is worth more
     than the consistency. Only a chip or a tag is fully round. */
  --radius-tile:4px;
  --radius-slot:3px;
  --radius-card:10px;
  --radius-pill:999px;

  /* ---- surface ----
     The page is not a flat fill and the panels are not flat either: the ground
     carries a field of dots, and anything sitting on it casts a real shadow. That
     is the one idea this group serves — CARDS ARE SHEETS LYING ON A PATTERNED
     PAGE — and every value in it is a consequence.

     The masthead gets a ground of its own rather than taking --page, because in
     the dark theme it is a step lighter than the page and in the light one it is
     not. --nav-bg defaults to var(--page); the contrast script follows one level
     of indirection so the light scopes still measure the pair they always did. */
  --nav-bg:var(--page);
  --nav-line:var(--rule-firm);     /* the hairline under it */
  --nav-shadow:0 2px 0 rgba(5,34,31,.07);
  /* the drop under a card, an archive row, a button. Two of them: what a sheet
     rests at, and what it rises to when hovered. */
  --card-shadow:0 1px 2px rgba(5,34,31,.13),0 14px 28px -20px rgba(5,34,31,.55);
  --card-shadow-hover:0 2px 4px rgba(5,34,31,.18),0 22px 38px -22px rgba(5,34,31,.6);
  --lift:3px;                      /* how far an interactive thing rises when hovered */
  /* The dots, ABOVE the two blooms in the background list. They are the mint at
     nearly full strength on the light page and the brand on the dark one — figure
     on ground, read the same way round in both. 24px is close enough to read as a
     texture and far enough apart not to vibrate under text.
     `none` is a legal background-image layer, so the three background-* lists in
     site.css keep one shape if this is ever turned off. */
  --page-texture:radial-gradient(circle,rgba(88,218,202,.9) 1.6px,transparent 1.7px);
  --page-texture-size:24px 24px;

  /* motion — one spring, for the things that appear or lift; one ease for the
     rest. The tile reveal's overshoot is the game's single moment of joy and it
     is not up for negotiation. */
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.2,.9,.3,1);

  /* accent: the default, used by pages that are not a puzzle. It is the primary.
     --accent      fills (marker bars, tile preview, reveal flash) and lit borders
     --accent-ink  the same hue dark enough to set text on the page (AA at 14px)
     --accent-deep borders against a filled accent, and a lit rule
     --accent-soft the tint behind an armed or current control, or a hovered row
     --accent-glow the halo a hovered or just-hit control blooms

   --accent-soft is an opaque tint, not the accent at low alpha. A translucent
   wash takes the value of whatever it sits on, so the same chip that cleared AA
   on the page failed it on a card. --accent-glow is the one accent token that IS
   translucent, because a halo has to take the colour of whatever it blooms over
   — the mint page, the near-black board — and it never lands under text, so it
   owes nothing to contrast. */
  --accent:#0e8f7c;
  --accent-ink:#054e43;
  --accent-deep:#0b7a6a;
  --accent-soft:#e2f8f4;
  --accent-glow:rgba(14,143,124,.42);
  --accent-panel:#0d2b26;
  --accent-panel-ink:#e2f8f4;
  /* WordFinder's found band: the accent washed into the unfound cell's own
     ground until it sits ONE STEP off it — about 2:1, the window
     scripts/checkContrast.mjs holds it in. A found word has to be obvious at a
     glance without being the loudest thing on the board, and the two ways to
     get that wrong have both shipped: the tint (--accent-soft) was within a
     shade of the cell and read as nothing, and --accent-ink used as a FILL read
     as a wall of bright blocks (feedback, 2026-09-22 and 2026-09-24). The
     letter on the band is the page's own --ink, unchanged from an unfound cell:
     this is a highlighter drawn behind the letters, not a new colour scheme for
     them. One value per accent, per theme, stated rather than mixed, like every
     other colour here. */
  --wf-found:#76c1b5;
}

/* ---------------------------------------------------------------- dark ----
   Not a neutral dark. Every grey here is pulled toward the primary's green, the
   board keeps a mint hairline along its top, the ground keeps its two blooms,
   and #58daca finally gets to be text — on a page this dark it is the one place
   a colour that bright can actually sing.

   The board no longer sits darker than the page (nothing can) so it lifts
   slightly instead and keeps its light tiles, which is the half of the
   relationship that carries the legibility. */
:root[data-theme="dark"]{
  color-scheme:dark;

  --page:#07060f;
  --page-deep:#0d0b1a;
  --card:#100d20;
  --ink:#e8e4ff;
  --slate:#a79ecb;
  --dim:#9187b8;
  --muted:#8078a8;
  --rule:#241d40;
  --rule-firm:#3b2f66;

  --brand:#7cf6e2;
  --brand-ink:#7cf6e2;
  --brand-soft:#0f2b28;
  --brand-line:#2c6b63;
  --chip:#7cf6e2;
  --chip-ink:#07060f;
  --nav-mark:#7cf6e2;
  /* the dark bar CAN take a dimmed item, because "dimmer" there means lighter
     than the ground rather than darker than it: 4.97:1, well down from the
     9.36:1 the old --slate was giving */
  --nav-ink:#8a80b5;
  --bloom:rgba(124,246,226,.11);

  --board:#0a0713;
  --board-line:#2d2450;
  --tile:#14102a;             /* an unrevealed tile: a dark square, not a white one */
  --tile-line:#6a5fa0;    /* its edge, 3.5:1 on the board — this is what draws it */
  --tile-on:#eef4f2;      /* a revealed one lights up, which is the whole reward */
  --tile-ink:#08110f;
  --punc:#7cf6e2;

  --slot-line:#2d2450;

  /* ---- binary board ----
     The grid inverts with the page: a dark square with a light hairline, and the
     two hues brightened, because a colour that reads as ink on paper disappears
     on a dark ground. Everything else about the scheme is unchanged — the full
     strength value is still the puzzle's own digit, the step back is still the
     player's. See the long note in the light block. */
  --bin-cell:#0f0c1e;
  --bin-line:#6a5fa0;
  --bin-edge:#a396d8;
  --bin-given:#e8e4ff;
  --bin-ink:#9187b8;

  /* the line flash, inverted with the board: a bright ring on a deep tint.
     See the long note in the light block. */
  --bin-flash-ok:#58daca;
  --bin-flash-ok-soft:#0d2621;
  --bin-flash-no:#ff7a63;
  --bin-flash-no-soft:#331916;

  --bin-zero-ink:#6ee3d3;
  --bin-zero-ink-soft:#3fae9e;
  --bin-one-ink:#c1a4ff;
  --bin-one-ink-soft:#9d78e8;

  --bin-zero-cell:#24766a;
  --bin-zero-cell-soft:#195149;
  --bin-zero-on:#e9f7f4;
  --bin-one-cell:#7250c9;
  --bin-one-cell-soft:#3f2d6d;
  --bin-one-on:#f0eaff;

  /* ---- WordGuess: the three marks ----
     Inverted with the board, and the VALUE ORDER is kept: exact is the brightest
     ground, absent the deepest, present between them. See the long note in the
     light block — desaturating this theme has to leave three marks too. */
  --wg-exact:#58daca;
  --wg-exact-on:#08110f;
  --wg-present:#d9a227;
  --wg-present-on:#1a1200;
  --wg-absent:#3a4b48;
  --wg-absent-on:#cfdedb;

  --wg-tile:#0f0c1e;
  --wg-tile-line:#2a2248;
  --wg-tile-line-lit:#7cf6e2;
  --wg-ink:#e8e4ff;

  --wg-key:#1c1736;
  --wg-key-ink:#e8e4ff;

  /* the WordGuess thumbnail's two marks — see the light block's note */
  --wg-exact-ink:#6ee3d3;
  --wg-present-ink:#d9a227;

  --placeholder:#8078a8;
  --dupe-line:#3b2f66;
  --ink-lift:#d7d1f5;
  --on-accent:#08110f;

  --shadow-board:rgba(0,0,0,.75);

  --accent:#58daca;
  --accent-ink:#6ee3d3;
  --accent-deep:#3aa697;
  --accent-soft:#0d2b26;
  --accent-glow:rgba(88,218,202,.4);
  --accent-panel:#0d2b26;
  --accent-panel-ink:#e2f8f4;
  --wf-found:#254a52;
  /* the masthead is a STEP LIGHTER than the page here, which it is not in the light theme — a dark bar on a darker page is how the band stays a band without a rule under it */
  --nav-bg:#0b0917;
  --nav-line:#241d40;
  --nav-shadow:0 2px 0 rgba(0,0,0,.4);
  --card-shadow:0 1px 2px rgba(0,0,0,.55),0 14px 30px -20px #000;
  --card-shadow-hover:0 2px 5px rgba(0,0,0,.6),0 24px 40px -22px #000;
  /* the dots take the brand on a dark ground, as they take the mint on a light one */
  --page-texture:radial-gradient(circle,rgba(124,246,226,.12) 1.6px,transparent 1.7px);
}

/* The system preference, for a visitor who has never touched the toggle.
   Guarded with :not([data-theme="light"]) so an explicit light choice wins over
   a dark OS. It repeats the block above rather than aliasing it — CSS has no way
   to share a declaration list across two selectors in different at-rules — and
   the contrast script asserts the two copies IDENTICAL, so a divergence is
   caught rather than shipped. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;

    --page:#07060f;
    --page-deep:#0d0b1a;
    --card:#100d20;
    --ink:#e8e4ff;
    --slate:#a79ecb;
    --dim:#9187b8;
    --muted:#8078a8;
    --rule:#241d40;
    --rule-firm:#3b2f66;

    --brand:#7cf6e2;
    --brand-ink:#7cf6e2;
    --brand-soft:#0f2b28;
    --brand-line:#2c6b63;
    --chip:#7cf6e2;
    --chip-ink:#07060f;
    --nav-mark:#7cf6e2;
    --nav-ink:#8a80b5;
    --bloom:rgba(124,246,226,.11);

    --board:#0a0713;
    --board-line:#2d2450;
    --tile:#14102a;             /* an unrevealed tile: a dark square, not a white one */
    --tile-line:#6a5fa0;    /* its edge, 3.5:1 on the board — this is what draws it */
    --tile-on:#eef4f2;      /* a revealed one lights up, which is the whole reward */
    --tile-ink:#08110f;
    --punc:#7cf6e2;

    --slot-line:#2d2450;

    /* ---- binary board ----
       The grid inverts with the page: a dark square with a light hairline, and the
       two hues brightened, because a colour that reads as ink on paper disappears
       on a dark ground. Everything else about the scheme is unchanged — the full
       strength value is still the puzzle's own digit, the step back is still the
       player's. See the long note in the light block. */
    --bin-cell:#0f0c1e;
    --bin-line:#6a5fa0;
    --bin-edge:#a396d8;
    --bin-given:#e8e4ff;
    --bin-ink:#9187b8;

    /* the line flash, inverted with the board: a bright ring on a deep tint.
       See the long note in the light block. */
    --bin-flash-ok:#58daca;
    --bin-flash-ok-soft:#0d2621;
    --bin-flash-no:#ff7a63;
    --bin-flash-no-soft:#331916;

    --bin-zero-ink:#6ee3d3;
    --bin-zero-ink-soft:#3fae9e;
    --bin-one-ink:#c1a4ff;
    --bin-one-ink-soft:#9d78e8;

    --bin-zero-cell:#24766a;
    --bin-zero-cell-soft:#195149;
    --bin-zero-on:#e9f7f4;
    --bin-one-cell:#7250c9;
    --bin-one-cell-soft:#3f2d6d;
    --bin-one-on:#f0eaff;

    /* ---- WordGuess: the three marks ----
       Inverted with the board, and the VALUE ORDER is kept: exact is the brightest
       ground, absent the deepest, present between them. See the long note in the
       light block — desaturating this theme has to leave three marks too. */
    --wg-exact:#58daca;
    --wg-exact-on:#08110f;
    --wg-present:#d9a227;
    --wg-present-on:#1a1200;
    --wg-absent:#3a4b48;
    --wg-absent-on:#cfdedb;

    --wg-tile:#0f0c1e;
    --wg-tile-line:#2a2248;
    --wg-tile-line-lit:#7cf6e2;
    --wg-ink:#e8e4ff;

    --wg-key:#1c1736;
    --wg-key-ink:#e8e4ff;

    --wg-exact-ink:#6ee3d3;
    --wg-present-ink:#d9a227;

    --placeholder:#8078a8;
    --dupe-line:#3b2f66;
    --ink-lift:#d7d1f5;
    --on-accent:#08110f;

    --shadow-board:rgba(0,0,0,.75);

    --accent:#58daca;
    --accent-ink:#6ee3d3;
    --accent-deep:#3aa697;
    --accent-soft:#0d2b26;
    --accent-glow:rgba(88,218,202,.4);
    --accent-panel:#0d2b26;
    --accent-panel-ink:#e2f8f4;
    --wf-found:#254a52;
    /* the masthead is a STEP LIGHTER than the page here, which it is not in the light theme — a dark bar on a darker page is how the band stays a band without a rule under it */
    --nav-bg:#0b0917;
    --nav-line:#241d40;
    --nav-shadow:0 2px 0 rgba(0,0,0,.4);
    --card-shadow:0 1px 2px rgba(0,0,0,.55),0 14px 30px -20px #000;
    --card-shadow-hover:0 2px 5px rgba(0,0,0,.6),0 24px 40px -22px #000;
    /* the dots take the brand on a dark ground, as they take the mint on a light one */
    --page-texture:radial-gradient(circle,rgba(124,246,226,.12) 1.6px,transparent 1.7px);
  }
}

/* ------------------------------------------------------------- accents ----
   The primary's RGB rotations. Swap the channels of #58daca and you get coral
   and magenta; violet fills the gap. They are all far from mint on the wheel
   because mint is the SURFACE here — an accent has to be something the ground
   is not, which is also why accent 0 is a DEEP teal rather than #58daca itself.
   In dark mode the ground is no longer mint, so accent 0 goes back to being the
   primary at full strength.

   The site's own identity stays mint whatever the puzzle is: the wordmark, the
   theme toggle and the page's blooms are --brand, never --accent.

   The selector is attribute-only, not body-only: the puzzle page sets it on
   <body>, and the archive sets it per row, so a list of puzzles reads as a run
   of colours. Custom properties inherit, so either way the whole subtree
   follows. */
[data-accent="0"]{           /* deep teal — the page's own hue, darkened until it shows on it */
  --accent:#0e8f7c;
  --accent-ink:#054e43;
  --accent-deep:#0b7a6a;
  --accent-soft:#e2f8f4;
  --accent-glow:rgba(14,143,124,.42);
  --accent-panel:#0d2b26;
  --accent-panel-ink:#e2f8f4;
  --wf-found:#76c1b5;
}
[data-accent="1"]{           /* coral */
  --accent:#ff5c47;
  --accent-ink:#8f1e0c;
  --accent-deep:#d8402a;
  --accent-soft:#ffe4de;
  --accent-glow:rgba(255,92,71,.5);
  --accent-panel:#2f1713;
  --accent-panel-ink:#ffe4de;
  --wf-found:#fa9a8c;
}
[data-accent="2"]{           /* magenta — #58daca with its channels swapped */
  --accent:#f23cfb;
  --accent-ink:#7d0f7f;
  --accent-deep:#c91fd4;
  --accent-soft:#fbe2fd;
  --accent-glow:rgba(242,60,251,.5);
  --accent-panel:#2a1030;
  --accent-panel-ink:#fbe2fd;
  --wf-found:#f28efb;
}
[data-accent="3"]{           /* violet */
  --accent:#a97dff;
  --accent-ink:#4a1fb4;
  --accent-deep:#7c4be0;
  --accent-soft:#ece4ff;
  --accent-glow:rgba(169,125,255,.5);
  --accent-panel:#1e1838;
  --accent-panel-ink:#ece4ff;
  --wf-found:#c0a5fd;
}

/* The dark counterparts. An accent that has to be legible AS TEXT on a dark page
   is a different value from the one that reads as a fill on a mint one, so each
   hue is stated twice rather than tinted programmatically: --accent-soft flips
   from a pale tint to a deep one, --accent-ink lightens, and --accent itself
   brightens a little because a dark ground can take it.

   Two selectors per rule: the puzzle page carries data-accent on <body> (a
   descendant of the themed <html>), the archive carries it on a row, and a
   future page might put it on <html> itself. */
:root[data-theme="dark"] [data-accent="0"],
:root[data-theme="dark"][data-accent="0"]{
  --accent:#58daca;
  --accent-ink:#6ee3d3;
  --accent-deep:#3aa697;
  --accent-soft:#0d2b26;
  --accent-glow:rgba(88,218,202,.4);
  --accent-panel:#0d2b26;
  --accent-panel-ink:#e2f8f4;
  --wf-found:#254a52;
  /* a revealed tile is the puzzle's own colour in the dark theme, with the
     letter reversed out white — see the .cell note in acrostic.css */
  --tile-on:#278073;
  --tile-ink:#ffffff;
}
:root[data-theme="dark"] [data-accent="1"],
:root[data-theme="dark"][data-accent="1"]{
  --accent:#ff7a63;
  --accent-ink:#ff9077;
  --accent-deep:#c4523c;
  --accent-soft:#2f1713;
  --accent-glow:rgba(255,122,99,.4);
  --accent-panel:#2f1713;
  --accent-panel-ink:#ffe4de;
  --wf-found:#6a3638;
  /* a revealed tile is the puzzle's own colour in the dark theme, with the
     letter reversed out white — see the .cell note in acrostic.css */
  --tile-on:#b34632;
  --tile-ink:#ffffff;
}
:root[data-theme="dark"] [data-accent="2"],
:root[data-theme="dark"][data-accent="2"]{
  --accent:#f26bfa;
  --accent-ink:#f18cf8;
  --accent-deep:#b53fbd;
  --accent-soft:#2a1030;
  --accent-glow:rgba(242,107,250,.4);
  --accent-panel:#2a1030;
  --accent-panel-ink:#fbe2fd;
  --wf-found:#632f6f;
  /* a revealed tile is the puzzle's own colour in the dark theme, with the
     letter reversed out white — see the .cell note in acrostic.css */
  --tile-on:#b53fbd;
  --tile-ink:#ffffff;
}
:root[data-theme="dark"] [data-accent="3"],
:root[data-theme="dark"][data-accent="3"]{
  --accent:#b490ff;
  --accent-ink:#c1a4ff;
  --accent-deep:#7f5ce0;
  --accent-soft:#1e1838;
  --accent-glow:rgba(180,144,255,.4);
  --accent-panel:#1e1838;
  --accent-panel-ink:#ece4ff;
  --wf-found:#4b3c70;
  /* a revealed tile is the puzzle's own colour in the dark theme, with the
     letter reversed out white — see the .cell note in acrostic.css */
  --tile-on:#7f5ce0;
  --tile-ink:#ffffff;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) [data-accent="0"],
  :root:not([data-theme="light"])[data-accent="0"]{
    --accent:#58daca;
    --accent-ink:#6ee3d3;
    --accent-deep:#3aa697;
    --accent-soft:#0d2b26;
    --accent-glow:rgba(88,218,202,.4);
    --accent-panel:#0d2b26;
    --accent-panel-ink:#e2f8f4;
    --wf-found:#254a52;
    /* a revealed tile is the puzzle's own colour in the dark theme, with the
       letter reversed out white — see the .cell note in acrostic.css */
    --tile-on:#278073;
    --tile-ink:#ffffff;
  }
  :root:not([data-theme="light"]) [data-accent="1"],
  :root:not([data-theme="light"])[data-accent="1"]{
    --accent:#ff7a63;
    --accent-ink:#ff9077;
    --accent-deep:#c4523c;
    --accent-soft:#2f1713;
    --accent-glow:rgba(255,122,99,.4);
    --accent-panel:#2f1713;
    --accent-panel-ink:#ffe4de;
    --wf-found:#6a3638;
    /* a revealed tile is the puzzle's own colour in the dark theme, with the
       letter reversed out white — see the .cell note in acrostic.css */
    --tile-on:#b34632;
    --tile-ink:#ffffff;
  }
  :root:not([data-theme="light"]) [data-accent="2"],
  :root:not([data-theme="light"])[data-accent="2"]{
    --accent:#f26bfa;
    --accent-ink:#f18cf8;
    --accent-deep:#b53fbd;
    --accent-soft:#2a1030;
    --accent-glow:rgba(242,107,250,.4);
    --accent-panel:#2a1030;
    --accent-panel-ink:#fbe2fd;
    --wf-found:#632f6f;
    /* a revealed tile is the puzzle's own colour in the dark theme, with the
       letter reversed out white — see the .cell note in acrostic.css */
    --tile-on:#b53fbd;
    --tile-ink:#ffffff;
  }
  :root:not([data-theme="light"]) [data-accent="3"],
  :root:not([data-theme="light"])[data-accent="3"]{
    --accent:#b490ff;
    --accent-ink:#c1a4ff;
    --accent-deep:#7f5ce0;
    --accent-soft:#1e1838;
    --accent-glow:rgba(180,144,255,.4);
    --accent-panel:#1e1838;
    --accent-panel-ink:#ece4ff;
    --wf-found:#4b3c70;
    /* a revealed tile is the puzzle's own colour in the dark theme, with the
       letter reversed out white — see the .cell note in acrostic.css */
    --tile-on:#7f5ce0;
    --tile-ink:#ffffff;
  }
}