/* css/tokens.css — Silksong Companion: design tokens.
   The companion's surfaces use the game's empty-spool charcoal and the Crest screen's
   warm spotlight. Cream silk remains the interaction accent; measured main-menu crimson
   stays in the atmosphere. See design/02-silksong.md for the original pixel measurements
   and docs/release/visual-design.txt for this release's selection and contrast checks.
   Tool slots, HUD states and map-area colours keep their existing gameplay meanings.
   Typography, layout, motion and component structure retain the existing product design. */
/* The typefaces travel with the site (assets/fonts/, Google Fonts' Latin subset): opened with a
   double click and offline, it looks the same. Silksong's interface is Trajan Pro and its
   dialogue Perpetua, as Hollow Knight's: Cinzel and Spectral stand in for them here too. Cinzel
   is variable: one file for 400–900. */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../assets/fonts/cinzel.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../assets/fonts/spectral-300.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Spectral'; font-style: italic; font-weight: 300; font-display: swap;
  src: url('../assets/fonts/spectral-300-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/spectral-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../assets/fonts/spectral-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../assets/fonts/spectral-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Patrick Hand SC'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/patrick-hand-sc.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, 'Times New Roman', serif;
  --font-body: 'Spectral', Georgia, 'Times New Roman', serif;
  /* The Hunter's hand, for the Journal's notes, and only there. */
  --font-hand: 'Patrick Hand SC', 'Segoe Print', 'Bradley Hand', cursive;
  /* System sans: zero network bytes, and its figures are already tabular out of the box. */
  --font-num: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
              'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;

  /* Surfaces: measured empty-spool charcoal and Crest-screen spotlight (§2–3). */
  --bg: #030303;            /* empty silk spool */
  --page-bg: #030303;
  --panel: linear-gradient(180deg, #312d2f 0%, #23201d 100%);
  --block: #23201d;         /* Crest screen's warm spotlight */
  --card: #030303;
  --card-idle: #312d2f;      /* empty spool strands */
  --card-on: #3d393b;        /* Crest HUD frame shadow */
  --ctl: #312d2f;
  --well: #010101;          /* Crest screen background */

  /* Lines: the empty spool's rim and charcoal, not a new decorative hue. */
  --line-panel: #514b4d;
  --line: #3d393b;
  --line-card: #514b4d;
  --line-row: #312d2f;
  --line-ctl: #514b4d;
  --well-line: #514b4d;
  --bracket: #8c8688;

  /* Ink: measured menu text, full spool and mask tones; all pass AA on --card-on. */
  --ink-strong: #fdfdfc;
  --ink: #f0ebed;
  --ink-2: #d1c9cb;
  --label: #c3b7c2;
  --muted: #bab0b1;
  --ink-idle: #dcd6d8;

  /* Accent: the Crest screen's cream; white selects, as in the game. */
  --accent: #f1ebdc;
  --accent-line: #bab0b1;     /* empty spool rim; 5.38:1 on the selected surface */
  --accent-ink: #f1ebdc;
  --accent-soft: rgba(241, 235, 220, 0.1);
  --glow: 0 0 22px -8px #f1ebdc;

  /* Round wells: charcoal with the full spool's light rim. */
  --medal: #23201d;
  --medal-line: #8c8688;
  --medal-off: #030303;
  --medal-off-line: #514b4d;
  --medal-off-ink: #bab0b1;

  /* HUD, measured on the game's sprites (design/02-silksong.md §2). Bone, not colour: the one
     saturated piece is the Plasmium mask. */
  --mask: #e7d8e0;                        /* SS Mask.png: ivory with the faintest mauve */
  --mask-line: #c3b7c2;                   /* its shaded half */
  --mask-empty: #363335;
  --silk: #ffffff;                        /* Silk.png: pure white, measured */
  --silk-well: #312d2f;                   /* the empty spool's strands */
  --silk-rim: #bab0b1;                    /* its bone rim */
  --plasmium: #1d4879;                    /* the Plasmium (lifeblood) mask */
  --plasmium-line: #57b3ce;
  --hud-frame: #dad1d3;                   /* the Crest wheel's frame: warm bone */

  /* The Crest screen's slots (§3): data, not the accent. One family: S 46–51%, V 92–94%. */
  --slot-red: #eb857d;
  --slot-blue: #76def0;
  --slot-yellow: #f0cc7e;
  --slot-skill: #ffffff;
  --slot-locked: #606060;
  --slot-locked-rim: #dcdcdc;
  /* A locked slot on the Crest (read from the game, InventoryToolCrestSlot.UpdateSlotDisplay): the
     lock ring in its colour's grey (no saturation, same value: the game's slot colours are all V 92.5%,
     GlobalSettings toolTypeColors), its group at half opacity. */
  --slot-lock: #ececec;
  --slot-lock-opacity: 0.5;

  /* The screens are scenes from the game: a black field and the Crest screen's warm spotlight
     (#23201d). The --scene-cold* names are kept from the skeleton; the light isn't cold. */
  --scene-bg: #010101;
  --scene-glow: rgba(94, 84, 74, 0.3);
  --scene-glow-low: rgba(94, 84, 74, 0.12);
  --scene-floor: #000;
  --scene-flash: rgba(248, 244, 240, 0.34);    /* the flash when taking a hit */
  --focus-glow: rgba(255, 255, 255, 0.85);     /* a Bind's white glow */
  --area-spot: rgba(236, 236, 236, 0.13);
  --area-spot-off: rgba(236, 236, 236, 0.04);
  --scene-cold: rgba(94, 84, 74, 0.3);
  --scene-cold-off: rgba(94, 84, 74, 0.1);
  --mp-had-dim: 0.42;                          /* the Map's marks of what's had, with "Show Completed" (design/03-redesign.md, step 6) */
  --map-faint: 0.45;                           /* the Map's guide view: what the game doesn't draw yet (js/map-paint.js reads it) */
  /* The Map's tone: the drawing as the game's files have it, much dimmer and a little greyer, as
     mapgenie's whole map of Pharloom shows it (measured 3-Oct-2026), so its soft edges and dashes
     hardly show. Not yet checked against the game's own map screen. */
  --map-tone: saturate(0.8) brightness(0.7) contrast(0.95);
  --map-plate: rgba(236, 236, 236, 0.46);      /* the plate behind a mark's picture: --halo-plate's */
  --map-plate-mid: rgba(236, 236, 236, 0.16);
  /* Each area's light (design/02-silksong.md §4, measured on the wiki's area maps): the fill and
     the line the game's map screen draws it in, by the save's area ids (js/collectibles.js
     AREAS). Your game's bench card is lit by its area (js/app-home.js); an area not measured
     (Songclave, the Exhaust Organ, the Red Memory, Wisp Thicket's line) falls back to the
     spotlight's bone. Coral Tower is drawn inside the Sands of Karak. */
  --area-bonebottom-fill: #2d4125; --area-bonebottom-line: #94bf81;   /* Bone Bottom */
  --area-crawl-fill: #2b251c; --area-crawl-line: #988873;   /* Wormways */
  --area-wilds-fill: #262a11; --area-wilds-line: #87924e;   /* Far Fields */
  --area-shellwood-fill: #3a3d2d; --area-shellwood-line: #b6bd9b;   /* Shellwood */
  --area-docks-fill: #4d3213; --area-docks-line: #daa254;   /* Deep Docks */
  --area-weave-prime-fill: #242638; --area-weave-prime-line: #9da0bc;   /* Weavenest Atla */
  --area-bellhart-fill: #634e34; --area-bellhart-line: #fce5b9;   /* Bellhart */
  --area-cogwork-core-fill: #3b3e2f; --area-cogwork-core-line: #aaae90;   /* Cogwork Core */
  --area-shadow-fill: #3d3a16; --area-shadow-line: #e9e7ca;   /* Bilewater */
  --area-slab-fill: #3a3e43; --area-slab-line: #b0b8c2;   /* The Slab */
  --area-mountain-fill: #111b2a; --area-mountain-line: #bac4d2;   /* Mount Fay */
  --area-coral-steps-fill: #3b2f1f; --area-coral-steps-line: #b9a075;   /* Blasted Steps */
  --area-greymoor-fill: #172729; --area-greymoor-line: #6e8f93;   /* Greymoor */
  --area-understore-fill: #242527; --area-understore-line: #7d8087;   /* Underworks */
  --area-grandgate-fill: #4b453a; --area-grandgate-line: #d7ccb5;   /* Grand Gate */
  --area-ward-fill: #474747; --area-ward-line: #cfcfcf;   /* Whiteward */
  --area-hang-fill: #47301c; --area-hang-line: #ca9d6e;   /* High Halls */
  --area-hunters-march-fill: #472119; --area-hunters-march-line: #c47461;   /* Hunter's March */
  --area-halls-fill: #554e30; --area-halls-line: #f0e5ab;   /* Choral Chambers */
  --area-library-fill: #5d411d; --area-library-line: #e9b96f;   /* Whispering Vaults */
  --area-arborium-fill: #4e493f; --area-arborium-line: #e4daca;   /* Memorium */
  --area-coral-river-fill: #583038; --area-coral-river-line: #f1a1b4;   /* Sands of Karak */
  --area-coral-tower-fill: #583038; --area-coral-tower-line: #f1a1b4;   /* Sands of Karak */
  --area-boneforest-fill: #4a4a4a; --area-boneforest-line: #d8d8d8;   /* The Marrow */
  --area-aqueducts-fill: #1d2d35; --area-aqueducts-line: #729bad;   /* Putrified Ducts */
  --area-dustpens-fill: #30251d; --area-dustpens-line: #b08772;   /* Sinner's Road */
  --area-cradle-fill: #242537; --area-cradle-line: #8183ae;   /* The Cradle */
  --area-abyss-fill: #202020; --area-abyss-line: #bdbdbd;   /* The Abyss */
  --area-mosscave-fill: #2d4125; --area-mosscave-line: #a9cb99;   /* Moss Grotto */
  --area-mosstown-fill: #2b4124; --area-mosstown-line: #92bd7f;   /* Mosslands */
  --area-grove-fill: #163420; --area-grove-line: #5fa879;   /* Verdania */
  --area-mistmaze-fill: #494949; --area-mistmaze-line: #9d9d9d;   /* The Mist */
  --area-wisp-fill: #132f1b;   /* Wisp Thicket */

  /* Traffic light for the deltas and conditional notices */
  --good: #7fc7a0;
  --good-soft: rgba(127, 199, 160, 0.14);
  --bad: #e2705f;
  --bad-soft: rgba(226, 112, 95, 0.14);
  --cond: #ccbe9c;
  --notice-bg: #23201d;
  --notice-line: #514b4d;

  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 18px 54px rgba(0, 0, 0, 0.62);

  /* Typography: seven steps and two scaled ones. No half pixels on purpose. */
  --fs-2xs: 11px;     /* small-caps labels, units, badges */
  --fs-xs: 13px;      /* dense cells, notes under a figure */
  --fs-sm: 14px;      /* secondary interface */
  --fs-md: 16px;      /* body ← base */
  --fs-lg: 18px;      /* prose, lead paragraph */
  --fs-xl: 24px;      /* block titles, medium figures */
  --fs-2xl: 34px;     /* large figures */
  --fs-brand: clamp(1.5rem, 1rem + 1.2vw, 2.125rem);     /* 24 → 34 px: the title, in the one-row header */
  --fs-hero: clamp(3.5rem, 2.2rem + 4vw, 5.5rem);        /* 56 → 88 px */

  /* Spacing: eight steps, deliberately non-linear. */
  --sp-half: 2px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Tracking: one step per use, not per element. Figures go at 0. */
  --track-title: 0.04em;
  --track-label: 0.08em;
  --track-caps: 0.12em;
  --track-wide: 0.2em;

  /* Control heights: two with a mouse, and both at 44 px with a finger. */
  --ctl-sm: 32px;
  --ctl: 40px;

  /* The drawn interface icons: 12 px inside text, 16 px alone in a button, one stroke. */
  --icon-sm: 12px;
  --icon: 16px;
  --icon-stroke: 1.6px;
  --diamond: 5px;           /* the game's small hollow diamond, in front of a tag or a notice's tag */

  /* Motion: ~250 ms to respond to the finger, ~400 ms for a fade, no bounce. */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 250ms;
  --dur-slow: 400ms;
  --ease-fade: cubic-bezier(0.45, 0, 0.55, 1);
  /* The Hornet who walks the page (js/app-hornet.js, css: .hn): a frame of her run (the game's
     Run clip plays at 15 a second; 12 here, slowed with her pace so her feet keep the ground),
     how long 100 px take her running along the bar (the sibling Knight's pace), and her cell's
     height on the screen bar and on the Map (the strips are 120 × 120 cells,
     tools/extract-hornet.py). */
  --dur-step: 84ms;
  --dur-run: 500ms;
  --hn-bar: 28px;      /* sitting under a tab's title without touching its letters */
  --hn-map: 44px;      /* at her bench on the Map, as big as the old still */
  --hm-map-max: 340px; /* the height of Your game's scene, the area's map behind it (× 1.4) */
  --hm-map-opacity: calc(var(--map-faint) * 1.4);   /* that map: the Map's guide twice as strong as it was, still behind (design/03-redesign.md, step 3, 14 Oct) */
  --hn-rest: 0.5;      /* resting on her bench in Your game's card: the wiki's sprites at half (her 186 px → 93) */
  --hm-art: 36px;      /* a picture in Your game's lists, as Progress's rows (css: .hm-art) */
  --hm-crest-k: 24px;  /* the Crest she wears beside her on Your game: the Crest screen's at about a third */
  --hm-crest-k-sm: 19px;
  --hm-mask: 26px;     /* her masks beside her on Your game, as the HUD draws them */
  --hm-mask-sm: 20px;

  --page-max: 1216px;
  --page-pad: var(--sp-8);
  /* What the screen bar stuck at the top takes up. */
  --sticky-h: 64px;
  --measure: 68ch;    /* maximum measure for long prose */
  --column: 720px;    /* a single column of lists: Your game's changes, the road */


  /* The screens are the game's inventory: almost pure black, and the light behind a plate is
     white and only where you look. */
  --inv-bg: var(--scene-bg);
  --inv-line: #312d2f;
  --halo-plate: radial-gradient(closest-side, rgba(236, 236, 236, 0.2), rgba(236, 236, 236, 0.06) 58%, transparent);
  --halo-plate-off: radial-gradient(closest-side, rgba(128, 128, 128, 0.2), transparent 78%);
  --mote: rgba(241, 139, 69, 0.8);     /* the main menu's embers (#f18b45) */

  /* ── Atmosphere and the section's lights ───────────────────────────────
     The whole page is the main menu: its red light from below, a vignette on the four edges,
     embers across the window, and a grain so faint it's felt rather than seen. All three fixed to the window and
     BEHIND the content (css/app.css, .atmos). The grain is an inline SVG: over file:// nothing
     is fetched. */
  --vignette: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgba(3, 3, 3, 0.55) 85%, rgba(3, 3, 3, 0.9) 100%);
  /* Main-menu samples at 70%, 50% and 25% height (design/02-silksong.md §5).
     The restrained red atmosphere leaves the neutral charcoal interface clearly legible. */
  --ember-glow: radial-gradient(ellipse 80% 85% at 50% 100%, #581d19 0%, #381410 32%, #1c0b0a 62%, transparent 100%);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-opacity: 0.025;
  /* The frame of every screen: the pause menu's white filigree (#f6f6f6, measured on its
     screenshots), and its light, the warm bone of the Crest screen's spotlight. The same for
     every section, and the titles are the filigree's too (css/app.css). The shares below say
     how much of each goes into the brackets, the glows and the plates' halo. */
  --filigree: #f6f6f6;
  --spotlight: #f1ebdc;
  --lamp-line: 78%;
  --lamp-glow: 20%;
  --lamp-glow-low: 8%;
  --lamp-plate: 24%;
  --lamp-plate-edge: 7%;
  /* The frame's own pieces (design/03-redesign.md, step 1): the thin filigree line inset all
     round, its share of the filigree, and the curled corner that crowns each end. */
  --lamp-frame: 24%;
  --frame-inset: var(--sp-2);
  --frame-corner: var(--sp-12);
  --filigree-art: 0.8;                  /* a filigree the game draws as a picture (the Tasks pane's spacer), as strong as the plaque */
  --dur-flash: 900ms;                   /* the glow of a figure that just changed */
  --dur-delta: 4s;                      /* how long your last change's chip stays in view */
  /* What's touched on that black goes unboxed: on hover, a veil of ink; the chosen one, a
     veil of the accent with its rule (--accent-line). */
  --veil: color-mix(in oklab, var(--ink) 5%, transparent);
  --picked: color-mix(in oklab, var(--accent) 8%, transparent);

  /* What you don't have yet, everywhere: colourless and half-lit. */
  --missing-art: grayscale(1) brightness(0.4);
  /* The Map's round badge (design/13-map-symbols-variants.html, C): the dark disc under a piece's
     picture, as the game's own pin_flea and pin_bench, and the black that sets it off the map. */
  --badge: radial-gradient(circle at 50% 40%, #312d2f, #030303);
  --badge-shadow: #000;
  /* The Inventory's, lighter so the shape still reads (design/08-missing-variants.html): with it
     half opacity, and the diamond pip under each picture says had or missing outright. */
  --missing-soft: grayscale(1) brightness(0.6);
  --missing-soft-opacity: 0.55;
  /* The Journal's kill ring (design/15-journal-variants.html, A): the kills as an arc of the
     silk's white round each portrait, over a faint track of its rim; the mask keeps the ring's
     width (--ring) and cuts out the middle. Not seen: the portrait in shadow (they're drawn on a dark
     disc, so a flat silhouette would be a blank disc). */
  --ring: 3px;
  --ring-track: color-mix(in oklab, var(--silk-rim) 18%, transparent);
  --ring-mask: #000;
  --unseen-art: grayscale(1) brightness(0.32);
  /* The light the Journal's pane sets each drawing on (light_effect_v02 at 0.81 grey, measured
     in its files): a soft white disc fading to nothing. */
  /* The Crest screen's Crest: px to the game's unit (its art is 100 px to the unit, 4.3 to 6.1
     units wide), smaller on a phone. */
  --crest-k: 64px;
  --crest-k-sm: 44px;
  --crest-k-xs: 35px;   /* a phone, with the Vesticrest's column beside the Crest */
  /* Its art, white in the game's files, as the Tools pane tints it while you browse it: half grey,
     InventoryToolCrest.DeselectedColor (0.5, 0.5, 0.5) multiplying the sprite (the screenshots'
     lines peak at 128), and no glow (tools/extract-crests.py's header). */
  --crest-tint: brightness(0.5);
  /* Progress's completion ring (design/20-progress-total-variants.html, A); smaller on a phone. */
  --pg-ring: 220px;
  /* Its two tabs' pictures, the rings of what's left for the next Act and their medallions
     (design/27b-progress-variants.html, 1 D and 2 C); smaller on a phone. */
  --pg-tab-art: 56px;
  --pg-rg-ring: 128px;
  --pg-md: 60px;
  /* Each tab's light (design/03-redesign.md, step 1, third round, E): the colour of its place in
     the game, from the area tokens, for its frame, corners, plaque and the light from its top.
     Your game and Saves keep the main menu's red; Your game with a save takes the area where Hornet
     rests instead (css/app.css, .hm; design/03-redesign.md, step 3, one light). */
  --tab-home: #93342f;  /* measured main-menu bottom edge */
  --tab-game: color-mix(in oklab, var(--area-library-line) 55%, var(--area-library-fill));
  --tab-progress: color-mix(in oklab, var(--area-bonebottom-line) 55%, var(--area-bonebottom-fill));
  --tab-map: color-mix(in oklab, var(--area-greymoor-line) 55%, var(--area-greymoor-fill));
  --tab-journal: color-mix(in oklab, var(--area-mountain-line) 55%, var(--area-mountain-fill));
  --tab-tools: color-mix(in oklab, var(--area-bellhart-line) 55%, var(--area-bellhart-fill));
  --tab-fight: color-mix(in oklab, var(--area-docks-line) 55%, var(--area-docks-fill));
  --tab-light: 38%;     /* the light from the top, inside */
  --tab-frame: 70%;     /* the frame line and its corners */
  --tab-area: 55%;      /* Your game with a save: the area she rests in, its line into its fill (css/app.css, .hm) */
  /* The static pages' art, at the top of their block (tools/pages.js). */
  --about-art: 340px;
  --journal-light: radial-gradient(closest-side, color-mix(in oklab, var(--silk) 20%, transparent), color-mix(in oklab, var(--silk) 6%, transparent) 55%, transparent);

  color-scheme: dark;
}
@media (pointer: coarse) {
  :root { --ctl-sm: 44px; --ctl: 44px; }
}