@layer
      reset.fix,
      reset.opinion,
      core.color,
      core.type,
      theme,
      layout.page,
      layout.composition,
      component.base,
      component.simple,
      component.complex,
      utility.layout,
      utility.exceptions,
      utility.important;

    
    /* ════════════════════════════════════════════════════════════════
       @property declarations
       These must live outside @layer (CSS spec requirement).
       ════════════════════════════════════════════════════════════ */

    /* State shift hooks — applied per-element. See @layer theme. */
    @property --l-shift { syntax: "<number>"; inherits: false; initial-value: 0 }
    @property --c-shift { syntax: "<number>"; inherits: false; initial-value: 0 }

    /* Global theme config — radius, motion. Values must be absolute. */
    @property --cfg-radius { syntax: "<length>"; inherits: true; initial-value: 6px }
    @property --cfg-motion { syntax: "<number>"; inherits: true; initial-value: 1 }



    /* Layout */
    @property --gap { syntax: "<length>"; inherits: true; initial-value: 8px }

    
    /* ============================================================
       reset.css — reset.fix + reset.opinion

       reset.fix: spec-correctness fixes only. No taste.
       reset.opinion: structural project-wide preferences. NO core
                      token consumption (no --_bg, --s, --type).
                      Visual rules that consume tokens go to theme.
       ============================================================ */

    @layer reset.fix {
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            background-repeat: no-repeat;
        }

        :root {
            interpolate-size: allow-keywords;
        }

        /* No color-scheme here. Theme is decided by [data-ui-theme]
           and the prefers-color-scheme media query inside core.color.
           Setting color-scheme at html level would let the browser
           independently style native UI (scrollbars, form controls)
           and fight our explicit theme attribute.

           No line-height default. core.type computes per-element
           line-height from --type; setting one here would conflict
           with that formula. */
        :where(html) {
            -moz-text-size-adjust: none;
            -webkit-text-size-adjust: none;
            text-size-adjust: none;
        }

        :where(body, figure, blockquote, dl, dd, p) {
            margin-block-end: 0;
        }

        :where(img, picture, svg) {
            max-width: 100%;
            display: block;
            height: auto;
        }

        :where(table, thead, tbody, tfoot, tr) {
            isolation: isolate;
        }

        :where(input, button, textarea, select) {
            font: inherit;
        }
    }

    @layer reset.opinion {
        :where(body) {
            overflow-wrap: break-word;
        }

        :where(html) {
            scrollbar-width: thin;
        }

        :where(p) {
            text-wrap: pretty;
        }

        :where(h1, h2, h3, h4, h5, h6) {
            text-wrap: balance;
        }

        :where(img, picture, video, canvas, svg) {
            height: auto;
        }

        :where(svg) {
            color: currentColor;
        }

        :where(button, [role="button"], summary, label[for],
               input[type="file"]::file-selector-button) {
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
        }

        :where(:disabled, [aria-disabled="true"]) {
            cursor: not-allowed;
        }

        :where(table) {
            border-collapse: collapse;
        }

        :where(fieldset) {
            border: 0;
            padding: 0;
            margin: 0;
            min-inline-size: 0;
        }

        :where(legend) {
            padding: 0;
        }

        :where(textarea) {
            resize: vertical;
        }

        :where(textarea:not([rows])) {
            min-block-size: 10em;
        }

        :where(abbr[title]) {
            cursor: help;
            text-decoration: underline dotted;
        }

        :where(summary) {
            list-style: none;
        }

        :where(a) {
            text-decoration: none;
        }

        /* The :autofill rule that previously lived here consumed --_bg,
           which violates reset.opinion's "no core tokens" rule.
           Moved to theme.css. */

        :where(ul, ol):where([role="list"]) {
            list-style: none;
            padding: 0;
        }


    }
    
    /* ════════════════════════════════════════════════════════════════
       stick.css v3 — color formula (surface-anchored)

       Public API (5 tokens):
         --bg          [0, 1]   surface (0) → loud (1)
         --fg          [-1, 1]  neutral ink (-1) → 0 → chromatic ink (1)
         --hue         [0, 360] base hue
         --hue-shift   delta added to --hue (semantic palettes, charts)
         --hue-lock    overrides hue+shift when set (branded content)

       Configuration: 19 cfg-* tokens for theme tuning.
       Curves and floor are hardcoded system constants.
       ════════════════════════════════════════════════════════════ */

    /* ── Public API ─────────────────────────────────────────────── */
    @property --bg         { syntax: "<number>"; inherits: true; initial-value: 0 }
    @property --fg         { syntax: "<number>"; inherits: true; initial-value: -1 }
    @property --hue        { syntax: "<number>"; inherits: true; initial-value: 220 }
    @property --hue-lock   { syntax: "*";        inherits: true }
    @property --hue-shift  { syntax: "<number>"; inherits: true; initial-value: 0 }

    /* ── Configuration: theme switch ────────────────────────────── */
    @property --cfg-dark { syntax: "<number>"; inherits: true; initial-value: 0 }

    /* ── Configuration: chroma ramp endpoints ───────────────────── */
    @property --cfg-color-loud-l-light  { syntax: "<percentage>"; inherits: true; initial-value: 50% }
    @property --cfg-color-loud-c-light  { syntax: "<number>";     inherits: true; initial-value: 0.22 }
    @property --cfg-color-loud-l-dark   { syntax: "<percentage>"; inherits: true; initial-value: 70% }
    @property --cfg-color-loud-c-dark   { syntax: "<number>";     inherits: true; initial-value: 0.22 }
    @property --cfg-color-surf-chroma   { syntax: "<number>";     inherits: true; initial-value: 0.018 }
    @property --cfg-fg-tint             { syntax: "<number>";     inherits: true; initial-value: 0.02 }
    @property --cfg-color-alpha         { syntax: "<number>";     inherits: true; initial-value: 1 }

    /* ── Configuration: surface ramp ────────────────────────────── */
    @property --cfg-surf-top-light   { syntax: "<number>"; inherits: true; initial-value: 97 }
    @property --cfg-surf-bot-light   { syntax: "<number>"; inherits: true; initial-value: 90 }
    @property --cfg-surf-top-dark    { syntax: "<number>"; inherits: true; initial-value: 28 }
    @property --cfg-surf-bot-dark    { syntax: "<number>"; inherits: true; initial-value: 10 }

    /* ── Configuration: contrast flip ───────────────────────────── */
    @property --cfg-fg-flip { syntax: "<number>"; inherits: true; initial-value: 0.55 }

    /* ── Configuration: interaction states ──────────────────────── */
    @property --cfg-hover-bg-shift  { syntax: "<number>"; inherits: true; initial-value: 0.12 }
    @property --cfg-active-bg-shift { syntax: "<number>"; inherits: true; initial-value: -0.06 }
    @property --cfg-active-fg-mul   { syntax: "<number>"; inherits: true; initial-value: 0.7 }

    /* ── Structural ─────────────────────────────────────────────── */
    @property --depth { syntax: "<number>"; inherits: false; initial-value: 0 }

    /* ── Private intermediates ──────────────────────────────────── */
    @property --_bg              { syntax: "<color>";      inherits: true;  initial-value: oklch(97% 0.018 220) }
    @property --_h               { syntax: "<number>";     inherits: false; initial-value: 220 }
    @property --_surf-top        { syntax: "<number>";     inherits: false; initial-value: 97 }
    @property --_surf-bot        { syntax: "<number>";     inherits: false; initial-value: 90 }
    @property --_t-stage         { syntax: "<number>";     inherits: false; initial-value: 0 }
    @property --_surf-l          { syntax: "<percentage>"; inherits: true;  initial-value: 97% }
    @property --_bg-clamped      { syntax: "<number>";     inherits: false; initial-value: 0 }
    @property --_bg-chromatic    { syntax: "<number>";     inherits: false; initial-value: 0 }
    @property --_bg-effective    { syntax: "<number>";     inherits: false; initial-value: 0 }
    @property --_bg-curved       { syntax: "<number>";     inherits: false; initial-value: 0 }
    @property --_floor           { syntax: "<number>";     inherits: false; initial-value: 0.08 }
    @property --_l               { syntax: "<percentage>"; inherits: false; initial-value: 97% }
    @property --_c               { syntax: "<number>";     inherits: false; initial-value: 0.018 }
    @property --_loud-l          { syntax: "<percentage>"; inherits: false; initial-value: 50% }
    @property --_loud-c          { syntax: "<number>";     inherits: false; initial-value: 0.22 }
    @property --_fg-pos          { syntax: "<number>";     inherits: false; initial-value: 0 }
    @property --_fg-neg          { syntax: "<number>";     inherits: false; initial-value: 1 }
    @property --_fg-pos-curved   { syntax: "<number>";     inherits: false; initial-value: 0 }
    @property --_fg-onpos        { syntax: "<number>";     inherits: false; initial-value: 0 }
    @property --_fg-pole         { syntax: "<percentage>"; inherits: false; initial-value: 4% }
    @property --_fg-ramp-l       { syntax: "<percentage>"; inherits: false; initial-value: 90% }
    @property --_fg-ramp-c       { syntax: "<number>";     inherits: false; initial-value: 0.05 }
    @property --_fg-l            { syntax: "<percentage>"; inherits: false; initial-value: 4% }
    @property --_fg-c            { syntax: "<number>";     inherits: false; initial-value: 0.02 }
    @property --_surf-dark       { syntax: "<number>";     inherits: false; initial-value: 0 }
    @property --_flip-threshold  { syntax: "<percentage>"; inherits: false; initial-value: 55% }
    @property --_chroma-present  { syntax: "<number>";     inherits: false; initial-value: 0 }
    @property --_interact-bg     { syntax: "<number>";     inherits: false; initial-value: 0 }
    @property --_interact-fg-mul { syntax: "<number>";     inherits: false; initial-value: 1 }
    @property --_fg-effective    { syntax: "<number>";     inherits: false; initial-value: -1 }

    @layer core.color {

      :where(*) {
        /* Hue resolution — lock overrides shift+base */
        --_h: var(--hue-lock, calc(var(--hue) + var(--hue-shift)));

        /* Theme-aware loud endpoint */
        --_loud-l: calc(var(--cfg-color-loud-l-light) * (1 - var(--cfg-dark)) + var(--cfg-color-loud-l-dark) * var(--cfg-dark));
        --_loud-c: calc(var(--cfg-color-loud-c-light) * (1 - var(--cfg-dark)) + var(--cfg-color-loud-c-dark) * var(--cfg-dark));

        /* Theme-aware floor: light needs a tiny floor (0.05) so low --bg
           cells have a visible chromatic step. Dark needs more (0.22)
           because perceptual L deltas in dark range require larger jumps. */
        --_floor: calc(0.05 * (1 - var(--cfg-dark)) + 0.22 * var(--cfg-dark));

        /* Chroma ramp pipeline (surface-anchored, [0, 1]).
           Interaction perturbs --bg directly; L/C lifts emerge from ramp. */
        --_bg-clamped:   clamp(0, calc(var(--bg) + var(--_interact-bg)), 1);
        --_bg-chromatic: clamp(0, calc(var(--_bg-clamped) * 1000000), 1);
        --_bg-effective: calc((var(--_floor) + (1 - var(--_floor)) * var(--_bg-clamped)) * var(--_bg-chromatic));
        --_bg-curved:    pow(var(--_bg-effective), 1.5);

        /* Final L/C: lerp from inherited surface to theme loud endpoint */
        --_l: calc(var(--_surf-l) * (1 - var(--_bg-curved)) + var(--_loud-l) * var(--_bg-curved));
        --_c: calc(var(--cfg-color-surf-chroma) * (1 - var(--_bg-curved)) + var(--_loud-c) * var(--_bg-curved));

        --_bg: oklch(clamp(4%, var(--_l), 97%) var(--_c) var(--_h) / var(--cfg-color-alpha));

        /* Foreground: --fg < 0 → neutral ink, --fg > 0 → chromatic ink */
        --_fg-effective: calc(var(--fg) * var(--_interact-fg-mul));
        --_fg-pos: clamp(0, var(--_fg-effective), 1);
        --_fg-neg: clamp(0, calc(-1 * var(--_fg-effective)), 1);

        /* Contrast pole flip — chroma-biased so high-chroma cells flip earlier */
        --_chroma-present: clamp(0, calc(var(--_c) * 30), 1);
        --_flip-threshold: calc(
          var(--cfg-fg-flip) * 100%
          + var(--_chroma-present) * 3%
          + var(--_c) * 60%
        );
        --_surf-dark: clamp(0, calc((var(--_flip-threshold) - var(--_l)) / 1% * 20), 1);
        --_fg-pole: calc(4% * (1 - var(--_surf-dark)) + 97% * var(--_surf-dark));

        /* Chromatic-ink ramp (positive --fg side) — same shape as bg */
        --_fg-pos-curved: pow(var(--_fg-pos), 1.5);
        --_fg-ramp-l: calc(var(--_surf-l) + var(--_fg-pos-curved) * (var(--_loud-l) - var(--_surf-l)));
        --_fg-ramp-c: calc(var(--cfg-color-surf-chroma) + var(--_fg-pos-curved) * (var(--_loud-c) - var(--cfg-color-surf-chroma)));
        --_fg-onpos: clamp(0, calc(var(--_fg-pos) * 1000000), 1);

        /* Merge neutral and chromatic fg branches via step function */
        --_fg-l: calc(
          (clamp(4%, var(--_l), 97%) * (1 - var(--_fg-neg)) + var(--_fg-pole) * var(--_fg-neg)) * (1 - var(--_fg-onpos))
          + var(--_fg-ramp-l) * var(--_fg-onpos)
        );
        --_fg-c: calc(
          (var(--_c) * (1 - var(--_fg-neg)) + var(--cfg-fg-tint) * var(--_fg-neg)) * (1 - var(--_fg-onpos))
          + var(--_fg-ramp-c) * var(--_fg-onpos)
        );

        color: oklch(clamp(4%, var(--_fg-l), 97%) var(--_fg-c) var(--_h) / 1);

        /* Border tokens derived from current bg */
        --border: oklch(
          from var(--_bg)
          calc(l + (var(--cfg-dark) * 2 - 1) * 0.14)
          calc(c * 0.3)
          h
        );
        --Border: oklch(
          from var(--_bg)
          calc(l + (var(--cfg-dark) * 2 - 1) * 0.22)
          clamp(0.08, calc(c + 0.12), 0.18)
          calc(h + 8)
        );
      }

      /* Surface ramp — only surfaces compute --_surf-l. Descendants
         inherit, so chips/text/buttons anchor their chroma ramp to
         whatever surface they're sitting in. */
      :where(body, .surface) {
        --_surf-top: calc(var(--cfg-surf-top-light) * (1 - var(--cfg-dark)) + var(--cfg-surf-top-dark) * var(--cfg-dark));
        --_surf-bot: calc(var(--cfg-surf-bot-light) * (1 - var(--cfg-dark)) + var(--cfg-surf-bot-dark) * var(--cfg-dark));
        --_t-stage:  clamp(0, calc(var(--depth) / 3), 1);
        --_surf-l:   calc((var(--_surf-top) + var(--_t-stage) * (var(--_surf-bot) - var(--_surf-top))) * 1%);
      }

      /* Stage cascade: a surface's stage = how many surfaces nest INSIDE it.
         Leaf surface (no nested .surface) stays at stage 0 — brightest.
         Each containing layer increments. Inverts the usual depth convention
         so the leaf — what the user is focused on — is always brightest. */
      .surface                                          { --depth: 0 }
      .surface:has(.surface)                            { --depth: 1 }
      .surface:has(.surface .surface)                   { --depth: 2 }
      .surface:has(.surface .surface .surface)          { --depth: 3 }

      /* Paint: surfaces always paint their bg. Non-surfaces paint only
         when --bg > 0 (--_bg-chromatic acts as the alpha gate). */
      :where(*)              { background-color: oklch(from var(--_bg) l c h / var(--_bg-chromatic)) }
      :where(body, .surface) { background-color: var(--_bg) }

      :where(svg) { color: currentColor }

      /* Interaction states — hover/active perturb --bg directly, sliding
         the element along the surface→loud axis. L and C lifts emerge
         automatically from the ramp.
           .clickable  — full interactive treatment, gets pointer cursor
           .hoverable  — hover response only, no cursor, no active state */
      :where(button, a, [role="button"], [tabindex], .clickable):not([tabindex="-1"]) {
        cursor: pointer;
      }
      :where(button, a, [role="button"], [tabindex], .clickable):not([tabindex="-1"]):hover {
        --_interact-bg: var(--cfg-hover-bg-shift);
      }
      :where(button, a, [role="button"], [tabindex], .clickable):not([tabindex="-1"]):active {
        --_interact-bg: var(--cfg-active-bg-shift);
        --_interact-fg-mul: var(--cfg-active-fg-mul);
      }
      :where(.hoverable):hover {
        --_interact-bg: var(--cfg-hover-bg-shift);
      }
    }
    
    /* Type */
    @property --cfg-fluid-min-vp    { syntax: "<length>"; inherits: true; initial-value: 320px }
    @property --cfg-fluid-max-vp    { syntax: "<length>"; inherits: true; initial-value: 1280px }
    @property --cfg-type-scale      { syntax: "<number>"; inherits: true; initial-value: 1 }
    @property --cfg-type-min-ratio  { syntax: "<number>"; inherits: true; initial-value: 1.2 }
    @property --cfg-type-max-ratio  { syntax: "<number>"; inherits: true; initial-value: 1.28 }
    @property --type                { syntax: "<number>"; inherits: false; initial-value: 0 }
    /* ════════════════════════════════════════════════════════════════
       core.type — the fluid type formula
       --cfg-type-min/max plus the viewport-clamped font-size, with
       derived line-height and letter-spacing.
       ════════════════════════════════════════════════════════════ */
    @layer core.type {
      :root {
        --cfg-type-min: 0.8rem;
        --cfg-type-max: 1rem;
      }
      :where(*) {
        --_t-min: calc(var(--cfg-type-min) * pow(var(--cfg-type-min-ratio), var(--type)));
        --_t-max: calc(var(--cfg-type-max) * pow(var(--cfg-type-max-ratio), var(--type)));
        font-size: calc(
          clamp(
            var(--_t-min),
            calc(var(--_t-min) + (var(--_t-max) - var(--_t-min)) * (100vi - var(--cfg-fluid-min-vp)) / (var(--cfg-fluid-max-vp) - var(--cfg-fluid-min-vp))),
            var(--_t-max)
          ) * var(--cfg-type-scale)
        );
        letter-spacing: clamp(-0.04em, calc(0.01em - var(--type) * 0.012em), 0.04em);
        line-height:    clamp(1.1, calc(1.5 - var(--type) * 0.075), 1.6);
      }
    }
    
    @property --cfg-bg-loud { syntax: "<number>"; inherits: true; initial-value: 0.55 }


    /* ════════════════════════════════════════════════════════════════
       theme — project-level visual decisions
       The "vibe" of the page. Theme blocks (light/dark), state classes
       that nudge the color formula, font families, etc.
       State classes are uniform across all components.
       ════════════════════════════════════════════════════════════ */
    @layer theme {

        :root {
          /* Identity */
          --hue: 220;
          --cfg-color-loud-l-light: 45%;
          --cfg-color-loud-c-light: 0.18;
          --cfg-color-loud-l-dark: 65%;
          --cfg-color-loud-c-dark: 0.18;
          --cfg-color-surf-chroma: 0.012;
          --cfg-fg-tint: 0.005;

          /* Surfaces — light mode warm cream, dark mode warm charcoal */
          --cfg-surf-top-light: 99;
          --cfg-surf-bot-light: 91;
          --cfg-surf-top-dark: 22;    /* was 28 — slightly darker leaf */
          --cfg-surf-bot-dark: 12;    /* was 10 — body lightens */

          /* Geometry & motion */
          --cfg-radius: 6px;
          --gap: 0.75rem;

          /* Fonts */
          --font-ui:    -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
          --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
          --font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;
        }
        body { font-family: var(--font-ui); }

        @media (prefers-color-scheme: dark) { :root:not([data-ui-theme]) { --cfg-dark: 1 } }
        [data-ui-theme="light"] { --cfg-dark: 0 }
        [data-ui-theme="dark"]  { --cfg-dark: 1 }

        .suc { --hue-lock: 145 }
        .inf { --hue-lock: 240 }
        .wrn { --hue-lock: 75  }
        .dgr { --hue-lock: 25  }
        .bw { --cfg-color-surf-chroma: 0; --cfg-color-loud-c-light: 0; --cfg-color-loud-c-dark: 0; }

        [data-ui-motion="off"]   { --cfg-motion: 0 }
        [data-ui-motion="on"]    { --cfg-motion: 1 }
        [data-ui-motion="debug"] { --cfg-motion: 10 }
        @media (prefers-reduced-motion: reduce) { :root, [data-ui-motion] { --cfg-motion: 0 } }

        body { transition: --cfg-type-scale calc(var(--cfg-motion) * 0.2s) ease-out; }
        [data-ui-type="sm"] { --cfg-type-scale: 0.875 }
        [data-ui-type="md"] { --cfg-type-scale: 1     }
        [data-ui-type="lg"] { --cfg-type-scale: 1.125 }

        * {
          scrollbar-width: thin;
          scrollbar-color: var(--Border) transparent;
        }


    /* ── Syntax highlighting — Custom Highlight API ─────────────
         The ::highlight() pseudo only honors color, background-color,
         text-decoration, text-shadow. Custom properties set on
         ::highlight() do NOT cascade into the painted text, so each
         rule sets `color` directly. Each rule reads --_bg, --_l, and
         --cfg-dark from the originating element via relative-color
         syntax — the same surface anchoring the rest of the formula
         uses, so token colors automatically follow theme switches
         and surface depth.

         Two formulas:
           --token-color   chromatic ink, pinned to a fixed L/C
                           in OKLCH so it reads against any surface;
                           hue shift varies per category.
           --comment-color dim ink, lightness pulled toward the
                           surface so comments recede; tiny chroma
                           tint via --cfg-fg-tint.

         Token L/C endpoints live here as system constants — they're
         specific to the highlight use case (must read against both
         light and dark surfaces) and aren't reused elsewhere. Adjust
         by editing these eight values. ─────────────────────────── */

      ::highlight(css-comment),
      ::highlight(html-comment),
      ::highlight(python-comment),
      ::highlight(javascript-comment) {
        /* Light-mode comment: dark ink that's been mixed toward the surface.
           Dark-mode comment: light ink mixed toward the surface.
           Result: visibly dimmer than active code, but still legible. */
        color: oklch(from var(--_bg)
          calc(
            /* light: 35% (dark ink). dark: 70% (light ink, dim). */
            (35% * (1 - var(--cfg-dark)) + 70% * var(--cfg-dark))
          )
          calc(c + var(--cfg-fg-tint))
          calc(h + 0)
        );
      }

      /* Strings — warm shift */
      ::highlight(css-string),
      ::highlight(html-value),
      ::highlight(python-string),
      ::highlight(javascript-string) {
        color: oklch(from var(--_bg)
          calc(45% * (1 - var(--cfg-dark)) + 75% * var(--cfg-dark))
          0.13
          calc(h - 36)
        );
      }

      /* Numbers / units */
      ::highlight(css-number),
      ::highlight(css-unit),
      ::highlight(python-number),
      ::highlight(javascript-number) {
        color: oklch(from var(--_bg)
          calc(45% * (1 - var(--cfg-dark)) + 75% * var(--cfg-dark))
          0.13
          calc(h - 24)
        );
      }

      /* Punctuation / operators / brackets */
      ::highlight(css-punctuation),
      ::highlight(html-bracket),
      ::highlight(python-operator),
      ::highlight(python-punctuation),
      ::highlight(javascript-operator),
      ::highlight(javascript-punctuation) {
        color: oklch(from var(--_bg)
          calc(45% * (1 - var(--cfg-dark)) + 75% * var(--cfg-dark))
          0.10
          calc(h - 12)
        );
      }

      /* Identifiers — properties, vars, selectors, tags, attributes */
      ::highlight(css-property),
      ::highlight(css-var-name),
      ::highlight(css-selector),
      ::highlight(html-tag),
      ::highlight(html-attribute),
      ::highlight(html-doctype),
      ::highlight(html-entity) {
        color: oklch(from var(--_bg)
          calc(45% * (1 - var(--cfg-dark)) + 75% * var(--cfg-dark))
          0.13
          calc(h + 12)
        );
      }

      /* Functions, classes, builtins */
      ::highlight(python-function),
      ::highlight(python-class),
      ::highlight(python-builtin),
      ::highlight(javascript-function),
      ::highlight(javascript-class),
      ::highlight(javascript-builtin) {
        color: oklch(from var(--_bg)
          calc(45% * (1 - var(--cfg-dark)) + 75% * var(--cfg-dark))
          0.14
          calc(h + 24)
        );
      }

      /* Keywords / atrules / decorators — strongest cool shift */
      ::highlight(css-atrule),
      ::highlight(python-keyword),
      ::highlight(python-decorator),
      ::highlight(javascript-keyword),
      ::highlight(javascript-decorator) {
        color: oklch(from var(--_bg)
          calc(45% * (1 - var(--cfg-dark)) + 75% * var(--cfg-dark))
          0.15
          calc(h + 36)
        );
      }
    }
    

    @layer layout.page {
        .page {
            display: grid;
            grid-template:
                "b  b  b" auto
                "h  h  h" auto
                "s  s  s" auto
                "nh mh a" auto
                "n  m  a" 1fr
                "nf mf a" auto
                "f  f  f" auto /
                auto 1fr auto;
            height: 100svh;
            overflow: hidden;

            & > [class ^="pg-"]       { padding: var(--gap); }

            & > .pg-banner            { grid-area: b;  }
            & > .pg-header            { grid-area: h;  }
            & > .pg-subheader         { grid-area: s;  }
            & > .pg-navigation-header { grid-area: nh; }
            & > .pg-navigation        { grid-area: n;  overflow-y: auto; scrollbar-gutter: stable; min-height: 0; }
            & > .pg-navigation-footer { grid-area: nf; }
            & > .pg-main-header       { grid-area: mh; }
            & > .pg-main              { grid-area: m;  overflow-y: auto; scrollbar-gutter: stable; min-height: 0; }
            & > .pg-main-footer       { grid-area: mf; }
            & > .pg-aside             { grid-area: a;  overflow-y: auto; scrollbar-gutter: stable; min-height: 0; }
            & > .pg-footer            { grid-area: f;  }
        }
    }
    
    @layer component.complex {
        .drawer {
            --_dur: calc(var(--cfg-motion) * 0.25s);

            position: fixed;
            inset: auto;
            margin: 0;
            max-block-size: none;
            max-inline-size: none;
            transition:
                translate var(--_dur) ease-out,
                opacity   var(--_dur) ease-out,
                display   var(--_dur) allow-discrete,
                overlay   var(--_dur) allow-discrete;
            translate: 0 0;
            opacity: 1;

            &:not(:is([open], :popover-open)) {
                opacity: 0;
                translate: var(--_translate-closed);
            }
            @starting-style {
                &:is([open], :popover-open) {
                    opacity: 0;
                    translate: var(--_translate-closed);
                }
            }

            &.left   { --_translate-closed: -100% 0; inset: 0 auto 0 0; inline-size: min(85vw, 320px); block-size: 100svh; }
            &.right  { --_translate-closed:  100% 0; inset: 0 0 0 auto; inline-size: min(85vw, 320px); block-size: 100svh; }
            &.top    { --_translate-closed: 0 -100%; inset: 0 0 auto 0; inline-size: 100vw; block-size: min(85svh, 240px); }
            &.bottom { --_translate-closed: 0  100%; inset: auto 0 0 0; inline-size: 100vw; block-size: min(85svh, 240px); }
        }

        dialog.drawer {
            --_dur: calc(var(--cfg-motion) * 0.25s);
            --_dim: oklch(0% 0 0 / 0.5);

            &::backdrop {
                background: var(--_dim);
                transition:
                    background-color var(--_dur) ease-out,
                    display          var(--_dur) allow-discrete,
                    overlay          var(--_dur) allow-discrete;
            }
            &:not([open])::backdrop { background: oklch(0% 0 0 / 0); }
            @starting-style {
                &[open]::backdrop { background: oklch(0% 0 0 / 0); }
            }
        }
    }
    
    /* ════════════════════════════════════════════════════════════════
       layout.composition — stateless layout primitives
       ════════════════════════════════════════════════════════════ */

    @layer layout.composition {
      :root {
        --gap: clamp(
          0.25rem,
          calc(0.25rem + 1.75rem * pow(100vi / 3000px, 3)),
          2rem
        );
      }


      .read   { max-inline-size: 65ch; margin-inline: auto; }
      .column { display: flex; flex-direction: column; gap: var(--gap) }
      .row    { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); align-items: center }

      .split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--gap);
      }

      .spread {
        display: flex; flex-direction: row; flex-wrap: wrap;
        justify-content: space-between; align-items: center; gap: var(--gap);
      }
      .spread-column {
        display: flex; flex-direction: column;
        justify-content: space-between; gap: var(--gap);
      }

      .lcr {
          display: grid;
          grid-template-columns: 1fr auto 1fr;
          align-items: center;
          gap: var(--gap);

          & > :first-child:not(style):not(script)         { justify-self: start  }
          & > :nth-child(2 of :not(style):not(script))    { justify-self: center }
          & > :last-child:not(style):not(script)          { justify-self: end    }

          & > style, & > script { display: none }
        }

        .tmb {
          display: grid;
          grid-template-rows: 1fr auto 1fr;
          justify-items: center;
          gap: var(--gap);

          & > :first-child:not(style):not(script)         { align-self: start  }
          & > :nth-child(2 of :not(style):not(script))    { align-self: center }
          & > :last-child:not(style):not(script)          { align-self: end    }

          & > style, & > script { display: none }
        }

      /* ── .flank — leading/trailing fixed, the other grows ──── */
        .flank, .flank-start {
          display: flex; flex-direction: row; align-items: center; gap: var(--gap);

          & > :first-child:not(style):not(script) { flex: 0 0 auto }
          & > :last-child:not(style):not(script)  { flex: 1 1 auto; min-inline-size: 0 }

          & > style, & > script { display: none }
        }

        .flank-end {
          display: flex; flex-direction: row; align-items: center; gap: var(--gap);

          & > :first-child:not(style):not(script) { flex: 1 1 auto; min-inline-size: 0 }
          & > :last-child:not(style):not(script)  { flex: 0 0 auto }

          & > style, & > script { display: none }
        }

      .frame {
        aspect-ratio: 16 / 9;
        overflow: hidden;

        & > * { inline-size: 100%; block-size: 100%; object-fit: cover }
      }

      .grid {
        display: grid; gap: var(--gap);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr));
      }

      .stack {
        display: grid;
        grid-template-areas: "stack";

        & > * { grid-area: stack }
      }

        .hero {
            display: grid;
            grid-template:
                "t t t" auto
                "l m r" 1fr
                "b b b" auto /
                auto 1fr auto;
            height: 100%;
            overflow: hidden;

            & > .top    { grid-area: t; }
            & > .bottom { grid-area: b; }
            & > .left   { grid-area: l; overflow-y: auto; scrollbar-gutter: stable; min-height: 0; }
            & > .main   { grid-area: m; overflow-y: auto; scrollbar-gutter: stable; min-height: 0; }
            & > .right  { grid-area: r; overflow-y: auto; scrollbar-gutter: stable; min-height: 0; }
        }
          /* ── .hud-grid ─────────────────────────────────────────────────
         A grid with 9 directional anchor slots. this is the no overlap version of .hud
         Slots: ↖ ↑ ↗ / ← • → / ↙ ↓ ↘
         ──────────────────────────────────────────────────────── */

       .hud-grid {
            display: grid;
            grid-template:
         Slots: "↖ ↑ ↗" auto
                "← • →" 1fr
                "↙ ↓ ↘" auto /
             auto 1fr auto;
            height: 100svh;
            overflow: hidden;

            > .↖ { grid-area: ↖; }
            > .↑ { grid-area: ↑; }
            > .↗ { grid-area: ↗; }
            > .← { grid-area: ←; overflow-y: auto; scrollbar-gutter: stable; }
            > .• { grid-area: •; overflow-y: auto; scrollbar-gutter: stable; min-height: 0; }
            > .→ { grid-area: →; overflow-y: auto; scrollbar-gutter: stable; }
            > .↙ { grid-area: ↙; }
            > .↓ { grid-area: ↓; }
            > .↘ { grid-area: ↘; }
        }

      /* ── .hud ─────────────────────────────────────────────────
         A .stack with 9 directional anchor slots. Children are
         full-bleed over a single cell, sized to content, anchored
         by justify-self / align-self. Siblings are geometrically
         independent — a giant ↖ panel cannot push a centered •
         child off-axis.

         Container is hit-test transparent (pointer-events: none);
         children opt back in. Decorative children (e.g. a centered
         reticle whose bounding box exceeds its visual) should set
         pointer-events: none again to avoid blocking passthrough.

         Slots: ↖ ↑ ↗ / ← • → / ↙ ↓ ↘
         ──────────────────────────────────────────────────────── */
      .hud {
        display: grid;
        grid-template-areas: "hud";
        height: 100%;
        pointer-events: none;

        & > * {
          grid-area: hud;
          justify-self: center;
          align-self: center;
          pointer-events: auto;
        }

        & > .↖ { justify-self: start;  align-self: start  }
        & > .↑ { justify-self: center; align-self: start  }
        & > .↗ { justify-self: end;    align-self: start  }
        & > .← { justify-self: start;  align-self: center }
        & > .• { justify-self: center; align-self: center }
        & > .→ { justify-self: end;    align-self: center }
        & > .↙ { justify-self: start;  align-self: end    }
        & > .↓ { justify-self: center; align-self: end    }
        & > .↘ { justify-self: end;    align-self: end    }

        /* When .column or .row groups multiple items into one slot,
           mirror the slot's horizontal anchor on the inner cross-axis
           so grouped chips don't flag-fly. */
        & > .↖.column, & > .←.column, & > .↙.column { align-items: flex-start }
        & > .↑.column, & > .•.column, & > .↓.column { align-items: center }
        & > .↗.column, & > .→.column, & > .↘.column { align-items: flex-end }
      }
    }

    
    /* ============================================================
       component-base.css — component.base

       Default styling for unclassed HTML elements.
       ============================================================ */

    @layer component.base {
      /* (filled in as the system grows) */
    }
    
    @layer component.base {
     /* kbd — keyboard key marker. Mono surface that evokes a physical
         keycap. Border slightly louder than .input so keys pop in prose. */
      kbd {
        --bg: 0;
        --fg: -1;
        --type: -1.5;
        display: inline-flex;
        align-items: center;
        padding: 0.1em 0.45em;
        border: 1px solid var(--Border);
        border-radius: 0.35em;
        font-family: ui-monospace, monospace;
        font-weight: 600;
        line-height: 1.4;

        & * { --type: -1.5; }
      }
    }
    
    @layer component.simple {
      /* btn — neutral interactive control. Base for text and icon+text.
         Use .icon-btn for square icon-only.                   */
      .btn {
        --bg: 0;
        --fg: -1;
        --type: -1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4em;
        padding: 0.3em 0.7em;
        border: 1px solid var(--border);
        border-radius: var(--cfg-radius);
        font-weight: 600;
        white-space: nowrap;
        user-select: none;

        & * { --type: -1; }
        & svg { inline-size: 1em; block-size: 1em; display: block; flex-shrink: 0; }
      }
    }
    
    @layer component.simple {
      .icon-btn {
        --bg: 0;
        --fg: -1;
        --type: -1;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        /* Lock to font-size; do not let parent layout stretch us */
        flex: 0 0 auto;
        align-self: center;
        inline-size: 2.2em;     /* 1em icon + 2 × 0.6em padding */
        block-size: 2.2em;
        aspect-ratio: 1;        /* redundant but harmless and self-documenting */

        padding: 0.6em;
        border: 1px solid var(--border);
        border-radius: var(--cfg-radius);
        line-height: 1;
        user-select: none;

        /* Removed: `& * { --type: -1 }` — --type cascades naturally,
           and forcing it on `*` blocks legitimate overrides like
           a small label inside the button. */

        & svg {
          inline-size: 1em;
          block-size: 1em;
          display: block;
        }
      }

      /* Ensure tap target is large enough on touch devices.
         Using max-width: 480px because that's the conventional mobile
         breakpoint stick.css already uses for .mobile / .tablet / .desktop. */
      @media (max-width: 480px) {
        .icon-btn {
          min-inline-size: 44px;
          min-block-size: 44px;
        }
      }
    }
    
    @layer component.simple {
     /* tag — labeled state indicator. Use a <span> for a static label
         (always shows the vivid "on" look). Use a <button> with
         aria-pressed for an interactive toggle:
           aria-pressed="false" → off state (transparent, dim)
           aria-pressed="true"  → on state  (vivid chromatic, same
                                             as a static tag)
         Same component, two intents disambiguated by element + ARIA.   */
      .tag {
        --bg: 0.8;
        --fg: -1;
        --type: -2;
        display: inline-flex;
        align-items: center;
        padding: 0.3em 0.5em 0.2em;
        border: 1px solid transparent;
        border-radius: var(--cfg-radius);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        line-height: 1;
        user-select: none;
        transition:
          background-color calc(var(--cfg-motion) * 0.1s) ease-out,
          color            calc(var(--cfg-motion) * 0.1s) ease-out,
          border-color     calc(var(--cfg-motion) * 0.1s) ease-out;

        & * { --type: -2; }

        &[aria-pressed="false"] {
          --bg: 0;
          --fg: -0.6;
          border-color: var(--border);
        }
        &:focus-visible {
          outline: 2px solid var(--Border);
          outline-offset: 2px;
        }
      }
    }
    
    @layer component.simple {
        /* tabs — segmented control. Container is a neutral pill; each tab
         is transparent until aria-selected="true", at which point it
         pops chromatic.                                                 */
      .tabs {
        --bg: 0;
        display: inline-flex;
        padding: 0.2em;
        border: 1px solid var(--border);
        border-radius: var(--cfg-radius);
        gap: 0.15em;

        & > button {
          --bg: -1;
          --fg: -0.55;
          --type: -1;
          border: 0;
          padding: 0.25em 0.85em;
          border-radius: max(0px, calc(var(--cfg-radius) - 0.2em));
          font-weight: 600;
          white-space: nowrap;
          user-select: none;
          transition:
            background-color calc(var(--cfg-motion) * 0.2s) ease-out,
            color            calc(var(--cfg-motion) * 0.2s) ease-out,
            border-color     calc(var(--cfg-motion) * 0.2s) ease-out;
        }
        & > button * { --type: -1; }
        & > button:hover { --fg: -1; }
        & > button[aria-selected="true"] {
          --bg: var(--cfg-bg-loud);
          --fg: -1;
        }

        /* underline — alternate look. Drops the pill container, keeps
           a quiet baseline, and marks the selected tab with a chromatic
           underline drawn from currentColor.                           */
        &.underline {
          padding: 0;
          border: 0;
          border-radius: 0;
          border-block-end: 1px solid var(--border);
          gap: 0;

          & > button {
            --bg: 0;
            margin-block-end: -1px;
            padding: 0.4em 0.85em;
            border-radius: 0.4em 0.4em 0 0;
            border-block-end: 2px solid transparent;
          }
          & > button[aria-selected="true"] {
            --bg: 0;
            --fg: 0.8;
            border-block-end-color: currentColor;
          }
        }
      }

    }
    
     /* crumbs — breadcrumb trail. <a> for clickable steps,
         <span aria-current="page"> for the current page. Separators
         are rendered via ::before, painted with --border so they sit
         quieter than the crumb labels.                                  */

    @layer component.simple {
      .crumbs {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5em;

        & > * {
          --type: -1;
          --fg: -0.55;
          text-decoration: none;
        }
        & > a:hover {
          --fg: 0.8;
          --_interact-bg: 0;
        }
        & > [aria-current] {
          --fg: -1;
          font-weight: 600;
        }
        & > * + *::before {
          content: "/";
          margin-inline-end: 0.5em;
          color: var(--border);
        }
      }
    }
    

    @layer component.simple {
          /* avatar — rounded square holder for initials or image. Editorial
         serif so initials read as a personal mark rather than UI.       */
      .avatar {
        --bg: 0;
        --fg: -1;
        --type: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.4em;
        aspect-ratio: 1;
        border: 1px solid var(--border);
        border-radius: var(--cfg-radius);
        font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
        font-weight: 500;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        line-height: 1;

        & * { --type: 1; }
      }
    }
    
    @layer component.simple {
          /* progress — native <progress>. The parent runs both formulas
         simultaneously: --bg computes the low-chromatic track, --fg
         computes the high-chromatic fill. Track paints from --_bg, fill
         paints from currentColor (the resolved --fg). Indeterminate
         uses an animated gradient on the parent.                        */
      progress {
        --bg: 0.2;
        --fg: 0.8;
        appearance: none;
        inline-size: 12em;
        block-size: 0.5em;
        border: 1px solid var(--border);
        border-radius: 999em;
        overflow: hidden;

        &::-webkit-progress-bar {
          background: var(--_bg);
          border-radius: 999em;
        }
        &::-webkit-progress-value {
          background: currentColor;
          border-radius: 999em;
          transition: inline-size 0.2s;
        }
        &::-moz-progress-bar {
          background: currentColor;
          border-radius: 999em;
        }
        &:indeterminate {
          animation: progress-pulse 1.2s ease-in-out infinite;
          &::-webkit-progress-bar { background: var(--_bg); }
          &::-webkit-progress-value { background: currentColor; }
          &::-moz-progress-bar { background: currentColor; }
        }
      }
      @keyframes progress-pulse {
        0%, 100% { opacity: 0.5 }
        50%      { opacity: 1   }
      }
    }
    
    @layer component.simple {
          /* link — for in-prose anchors. Chromatic ink so the link reads
         as clickable amid neutral text; underline sits in the quiet-
         tone band so it whispers rather than competes with the word.
         On hover, the underline brightens to currentColor.              */
      .link {
        --fg: 0.8;
        text-decoration: underline;
        text-decoration-color: var(--border);
        text-decoration-thickness: 1px;
        text-underline-offset: 0.18em;
        transition: text-decoration-color 0.15s;

        &:hover {
          --_interact-bg: 0;
          --fg: 1;
          text-decoration-color: var(--Border);
        }
      }
    }
    
    @layer component.simple {
      /* hr — horizontal divider. Painted from --border to match the
         quiet-tone band used throughout.                                */
      hr {
        block-size: 0;
        border: 0;
        border-block-start: 1px solid var(--border);
        margin-block: 1em;
        inline-size: 100%;
      }
    }
    
    @layer component.simple {
      .card {
        padding: 1em;
        border: 1px solid var(--border);
        border-radius: var(--cfg-radius);
      }
      .Card {
        padding: 1em;
        border: 1px solid var(--Border);
        border-radius: var(--cfg-radius);
      }
    }
    
    @layer component.simple {
        /* card — bordered container. A .surface that's also bounded.   */
      .card {
        --bg: 0;
        padding: 1em;
        border: 1px solid var(--border);
        border-radius: var(--cfg-radius);
      }

      /* fieldset — semantic input grouping that lays out as a row of
         equal-width siblings. Reset UA chrome (border, padding,
         legend), then make it a flex container with each direct child
         taking equal share. Use for first/last name, city/state/zip,
         date pickers split into day/month/year — anything that should
         read as one logical row of related inputs.                   */
      fieldset {
        margin: 0;
        padding: 0;
        border: 0;
        min-inline-size: 0;
        display: flex;
        gap: 0.5em;

        & > * {
          flex: 1;
          min-inline-size: 0;
          display: flex;
          flex-direction: column;
          gap: 0.2em;
        }
      }

      /* Form input auto-stretch — donut scope. Inputs inside a <form>
         stretch to fill the form's inline size, except where a
         <fieldset> holds them (those size naturally as flex items in
         the fieldset row). The triple declaration covers Safari and
         Firefox legacy keywords; standard `stretch` overrides for
         browsers that support it.                                     */
      @scope (form) to (fieldset) {
        .input {
          inline-size: -webkit-fill-available;
          inline-size: -moz-available;
          inline-size: stretch;
        }
      }
    }
    

    @layer component.simple {
    /* input — text inputs, textareas, selects. Same neutral surface
         as .btn so they line up in forms. Border shifts from --border
         to --Border on focus — louder derived color, no hardcoded ring. */
      .input {
        --bg: 0;
        --fg: -1;
        --type: -1;
        padding: 0.3em 0.7em;
        border: 1px solid var(--border);
        border-radius: var(--cfg-radius);
        font: inherit;
        min-inline-size: 0;

        & * { --type: -1; }
        &:focus {
          border-color: var(--Border);
          outline: none;
        }
        &::placeholder { color: var(--border); }
      }

      /* select — strip native chevron, draw our own via --border color. */
      select.input {
        appearance: none;
        padding-inline-end: 1.8em;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.6em center;
      }

      /* textarea — natural block-size, but matches the rest. */
      textarea.input {
        block-size: 6em;
        resize: vertical;
        line-height: 1.5;
      }

      /* check, radio — toggle indicators. --bg flips from quiet to loud
         when checked. The checkmark is drawn via SVG inline-image with
         currentColor so it inherits the formula's --fg.                 */
      .check, .radio {
        --bg: 0;
        appearance: none;
        margin: 0;
        inline-size: 1em;
        block-size: 1em;
        border: 1px solid var(--border);
        border-radius: 0.25em;
        flex-shrink: 0;
        cursor: pointer;

        &:checked {
          --bg: var(--cfg-bg-loud);
          --fg: -1;
          border-color: transparent;
        }
        &:focus-visible {
          outline: 2px solid var(--Border);
          outline-offset: 2px;
        }
      }
      .radio { border-radius: 50%; }

      .check:checked {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E");
        background-size: 70%;
        background-repeat: no-repeat;
        background-position: center;
      }
      .radio:checked {
        background-image: radial-gradient(circle, currentColor 32%, transparent 36%);
      }

    }
    
    /* ============================================================
       utility.css — utility.layout + utility.exceptions + utility.important

       Three small utility layers consolidated. Kept together because
       each has only a handful of rules and they're conceptually
       adjacent (small classes that tweak behavior).

       utility.layout    — display/wrap helpers, responsive show/hide
       utility.exceptions — buffer layer; intentionally near-empty
       utility.important — !important rules for cascade-immune cases
       ============================================================ */
    @layer utility.layout {
      :where(.nowrap)   { white-space: nowrap; }
      :where(.truncate) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      :where(.tr) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      :where(.tr:is(:hover, :focus, :focus-within)) {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
      }
      :where(.select-all) { -webkit-user-select: all; user-select: all; }
    }

    @layer utility.exceptions {
        /* Visually hidden — screen-reader-only content. */
        :is(.vh) {
            inline-size: 0;
            block-size: 0;
            overflow: hidden;
        }
    }

    @layer utility.important {
        :where([hidden]) { display: none !important }

        /* Responsive show/hide. The viewport class is a participation gate —
           it has to win against any inline `@scope` rule that sets `display`
           on the element to define its internal layout. `revert-layer` returns
           the element to its natural display when it should be visible. */
        :where(.mobile, .tablet, .desktop) { display: none !important }
        @media (         width <   480px) { :where(.mobile)  { display: revert-layer !important } }
        @media (480px <= width <  1024px) { :where(.tablet)  { display: revert-layer !important } }
        @media (         width >= 1024px) { :where(.desktop) { display: revert-layer !important } }

        /* No-print: hide an element when printing. */
        @media print {
            :where(.np) { display: none !important }
        }
    }