/* ============================================================================ SafeStay Vista Pacifico — V1 (EN) — DESIGN TOKENS ---------------------------------------------------------------------------- Every value below was READ from this run's Figma extraction in ../../figma-truth/*.spec.md. Nothing here is remembered, inherited from a previous build, or copied from a tokens file. Each token cites the spec file and the Figma node id it came from. Figma has NO variables and NO styles for this page — `get_variable_defs` returns empty local collections and errors with "teamlibrary permission not specified in manifest.json", and `get_styles` returns zero local styles (21-logos-footer.spec.md §4, 02-who-why-b.spec.md §L8). So the NAMES below are ours; only the VALUES are Figma's. Do not present these names to the design side as if Figma authored them. Token prefix is `--mk-`. Section builders MUST NOT introduce raw hex. ========================================================================== */ :root { /* ========================================================================== 1. BRAND ====================================================================== */ /* The Mykrobial teal. Pixel-verified rgb(30,178,188) on the primary CTA pill interior in both EN and ES renders — 19-cta-b.spec.md §"Rendered-pixel confirmation"; also 76.7% of the isolated play-button export at alpha 255 — 02-who-why-b.spec.md §3 (node 2956:1236). */ --mk-teal: #1eb2bc; /* A SECOND, DIFFERENT teal: the "O" of the MYKROBIAL wordmark. 1,333 opaque px, exact, in the transparent nav export — 00-hero.spec.md §2.5 (node 854:365). The spec states explicitly: "#01bfa5 is NOT the CTA turquoise #1eb2bc. These are two distinct teals and must not be merged into one token." Keep them separate. */ --mk-teal-wordmark: #01bfa5; /* ========================================================================== 2. SURFACES — the page's five grounds, in page order of first use ====================================================================== */ /* Cool near-white. The most-used ground: sections 01, 03, 08, 09, 10, 11, 12, 13. 01-who-why.spec.md §"Colour" (2742:444); 08-recovery.spec.md (2778:2378); 10/11/12/13 all pixel-verified rgb(244,249,251). */ --mk-surface-mist: #f4f9fb; /* Pale blue-grey. Sections 04, 05, 06 (the Ecology run). 04-ecology.spec.md §"Colour" (2761:2089, verified #e6eef2 at y 0..276); 06-ecology-c.spec.md (2956:1243, sampled rgb(230,238,242)). */ --mk-surface-haze: #e6eef2; /* Cool stone. Sections 07 (Building), 16 (5.2 Amenities), 17 (map plate). 07-building.spec.md §"Colour" rgb(203,214,220); 16-amenities-52.spec.md §"Colour" (2924:349); 17-amenities-54.spec.md §3 fills[0] (2931:390). */ --mk-surface-stone: #cbd6dc; /* Neutral light. The three Final-CTA sections 18, 19, 20, and the map's land fill. 18-cta-a.spec.md §"Colour"; 20-cta-c.spec.md §8 ("color.surface.muted"); 17-amenities-54.spec.md §3.8 color.plate.land. */ --mk-surface-plain: #f5f5f5; /* Near-black. Hero scrim tail AND the footer logo strip. 00-hero.spec.md §1.2(c) stop 3; 21-logos-footer.spec.md §1.1 (3016:450), pixel-verified rgb(11,15,18). */ --mk-surface-ink: #0b0f12; /* Footer body. 21-logos-footer.spec.md §1.2 (3016:432), rgb(18,24,28). */ --mk-surface-footer: #12181c; /* Newsletter input field. 21-logos-footer.spec.md §1.2.3 (3016:441), rgb(34,45,51). */ --mk-surface-field: #222d33; /* ========================================================================== 3. INK ====================================================================== */ /* Body copy everywhere. Not black — the specs are emphatic. 01/03/08/09/10/11/16 (2777:2364, 2784:347, 2784:404, 2778:2383, ...). 11-recovery-43.spec.md §2: "not black — the only body colour in the section", rgb(26,35,40). */ --mk-ink-body: #1a2328; /* Pure black. Eyebrows and H2s on light grounds — deliberate, and distinct from --mk-ink-body. 01-who-why.spec.md §"Colour"; 03-unique.spec.md (2777:2362, 2777:2363); 08-recovery.spec.md (2778:2381, 2778:2382). */ --mk-ink-strong: #000000; /* Very dark plum. Heading fill, section 01 ONLY. 01-who-why.spec.md §"Colour" (2742:449). Do not generalise it. */ --mk-ink-plum: #29101e; /* All text on dark/photographic grounds. */ --mk-ink-inverse: #ffffff; /* Amenity icon glyphs, section 16 only (9 vectors). 16-amenities-52.spec.md §"Colour". */ --mk-ink-icon: #1c1b1f; /* Map typography and the property accent, section 17 only. 17-amenities-54.spec.md §3.8 color.ink.map-label / color.accent.property. */ --mk-ink-map-label: #4a5b66; --mk-accent-property: #824267; /* Progress rail, section 01. Active bar full weight, inactive dots 0.5. 01-who-why.spec.md §"Colour" (2742:452 .. 2742:456). */ --mk-rule-ink: #081419; /* ========================================================================== 4. SCRIMS, OVERLAYS AND SHADOWS ====================================================================== */ /* The hero's top-to-bottom scrim over the building photo. Gradient runs 180deg (decoded from gradientTransform in 00-hero.spec.md §1.2(c)); bottom stop is FULLY OPAQUE — do not flip this gradient. */ --mk-hero-scrim-top: rgba(11, 15, 18, 0.502); /* #0b0f1280 @0.0 */ --mk-hero-scrim-mid: rgba(11, 15, 18, 0.2); /* #0b0f1233 @0.5 */ --mk-hero-scrim-bottom: rgba(11, 15, 18, 1); /* #0b0f12 @1.0 */ /* Media-band scrim. SOLID #0d1d23 at opacity 0.4, composited over a photo. Proven to render in 06-ecology-c.spec.md §4.2 (2956:1247 fill[1]); also 05-ecology-b, 14-amenities fills[1], 15-amenities-51 fills[1]. */ --mk-scrim-deep: rgba(13, 29, 35, 0.4); /* #0d1d23 @40% */ /* Second, black scrim stacked on top of --mk-scrim-deep. 14-amenities.spec.md §"Colour" fill[2]; 15-amenities-51 fills[2]; 19-cta-b section fill 2; 20-cta-c card fill 2. */ --mk-scrim-black-20: rgba(0, 0, 0, 0.2); /* #00000033 */ /* Drop shadows. Two values only across the whole page. */ --mk-shadow-25: rgba(0, 0, 0, 0.25); /* #00000040 */ --mk-shadow-50: rgba(0, 0, 0, 0.5); /* #00000080 */ /* Composed shadows as authored. 20-cta-c.spec.md §8 color.shadow.glow; 03-unique.spec.md §"Colour" (2778:2376); 14-amenities headline. */ --mk-shadow-glow: 0 0 24px var(--mk-shadow-25); --mk-shadow-text: 0 0 4px var(--mk-shadow-50); --mk-shadow-logo: 0 4px 4px var(--mk-shadow-25); /* 3016:513 */ /* ========================================================================== 5. THE `btns` PILL COMPONENT — 00-hero.spec.md §2.4 (shared by nav + CTA) One Figma component, four paint variants. The MCP does NOT serialise the per-paint `visible` flag, so the payload reports a teal fill AND a white stroke on every CTA-class pill. THE RENDER DISAGREES. These four tokens encode the variants that were proven by colour census + pixel probe. Building straight from the payload produces a turquoise nav CTA — wrong. ====================================================================== */ /* PIXEL-VERIFIED: both of these paints have per-paint `visible: false` in Figma and render NOTHING. 0.0 luma step at every edge of every ghost and active pill in the scale-4 canvas export of 854:363, with semi-transparent +BACKGROUND_BLUR positive controls (2931:594 / 2931:574) proving the exporter does not drop such fills. review/deepdive/hero-nav-pill.md §5-§6. Keys retained so the payload values stay traceable; values are the RENDER. */ --mk-pill-ghost-fill: transparent; /* declared #00000026 — not rendered */ --mk-pill-active-fill: transparent; /* declared #0000001a LUMINOSITY — not rendered */ --mk-pill-outline-stroke: var(--mk-ink-inverse);/* Begin recovery — 1px white, NO fill */ --mk-pill-solid-fill: var(--mk-teal); /* Start your safe stay — fill, NO stroke */ --mk-pill-hairline: rgba(255, 255, 255, 0.15); /* 14-amenities btns stroke */ --mk-pill-hairline-dark: rgba(26, 35, 40, 0.15); /* 16-amenities-52 CTA stroke */ --mk-pill-scrim-fill: rgba(0, 0, 0, 0.5); /* 14-amenities btns fill; nav circle */ /* backdrop-filter on every pill: BACKGROUND_BLUR radius 4 (00-hero §2.4). */ --mk-pill-blur: blur(4px); /* ========================================================================== 6. TYPOGRAPHY — families Only two families are used on this page. Read from fontFamily on the text node payloads across all 22 specs: 258 Poppins references, 107 Merriweather. No third family appears in any section. ====================================================================== */ --mk-font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; --mk-font-serif: "Merriweather", Georgia, "Times New Roman", serif; /* Weights actually authored. Poppins: 300 / 400 / 500 only. Merriweather: 300 / 400 / 500 only. Nothing else is used on this page. */ --mk-w-light: 300; --mk-w-regular: 400; --mk-w-medium: 500; /* ========================================================================== 7. TYPOGRAPHY — sizes Every size below appears verbatim in a fontSize field. Sizes are px because Figma authored them in px and the page margin is a fixed px too; see grid.css for why nothing here is proportional. ====================================================================== */ --mk-size-hero: 96px; /* 00-hero §4 hero.headline (854:376) */ --mk-size-display: 48px; /* 08/09/12 h1; 20-cta-c §8 font.display */ --mk-size-h2: 36px; /* Merriweather Regular 400, lh 180% */ --mk-size-title: 24px; /* card headings; 17 map place names */ --mk-size-lead: 23.5px; /* Poppins Regular 23.5 — 4 occurrences */ --mk-size-body: 20px; /* THE body size. Poppins 400 20/36 */ --mk-size-body-sm: 18px; /* card body; 21 footer eyebrow */ --mk-size-base: 16px; /* nav, eyebrow, footer links, buttons */ --mk-size-micro: 14px; /* 17 map labels (Poppins 500) */ /* ========================================================================== 8. TYPOGRAPHY — line heights `lineHeight` is NOT emitted by the MCP for any text node on this page (20-cta-c.spec.md §9.3, 21-logos-footer.spec.md §3.1). The values below were RECOVERED by algebra — node height divided by measured line count — and cross-checked against the 2x renders. They are derived, not read; treat them as acceptance targets, not as payload facts. ====================================================================== */ --mk-lh-hero: 121px; /* 96px Merriweather, auto ~1.26 — 00-hero §4 */ --mk-lh-display: 60px; /* 48px Merriweather, auto — 20-cta-c §2.2 */ --mk-lh-h2: 64.8px; /* 36px @ 179.99999523162842% */ --mk-lh-body: 180%; /* THE body ratio. 20px -> 36px */ --mk-lh-auto: 1.5; /* Poppins AUTO: 16 -> 24, 20 -> 30 */ --mk-lh-node: 24px; /* the 24px line box that recurs everywhere */ /* Paragraph spacing inside the footer link columns: 12px, so item-to-item advance is 36 but a wrapped continuation advances 24. 21-logos-footer.spec.md §3.1 — proven against four independent nodes. */ --mk-para-gap: 12px; /* ========================================================================== 9. TYPOGRAPHY — tracking Figma percent tracking is a percentage OF FONT SIZE. Where a spec reports PIXELS the px value is used directly. NOTE (00-hero §4.3): CSS adds tracking after the LAST character too, so a centred element drifts left by half the tracking. Compensate per the recipe in CONVENTIONS.md — do not silently accept the offset. ====================================================================== */ --mk-track-eyebrow: 3px; /* 16px eyebrow, uppercase. 01/03/04/09/10/11/12/15/16 */ --mk-track-nav: 1px; /* nav links + CTA labels — 00-hero §4 */ --mk-track-wordmark: 2px; /* MYKROBIAL — 00-hero §2.5 (854:365) */ --mk-track-lockup: 15px; /* 75% x 20px — 00-hero §4 hero.lockup */ --mk-track-hero: 1.92px; /* 2% x 96px — 00-hero §4 hero.headline */ --mk-track-map-label: 1.5px; /* 17-amenities-54 §3.8 type.map-label */ /* ========================================================================== 10. SPACE Derived from padding / itemSpacing fields, not invented. The page has one hard geometric law and it is --mk-page-x; see grid.css. ====================================================================== */ --mk-page-x: 120px; /* FIXED at BOTH 1280 and 1440. Every section. */ --mk-section-y: 48px; /* section vertical padding — 00-hero §1, 21 §1.2 */ --mk-space-96: 96px; /* header top pad — 04-ecology §"Header"; 07 rhythm */ --mk-space-60: 60px; /* card caption inset — 11/12; ES footer pad */ --mk-space-48: 48px; /* logo-row gap — 21 §1.1.1 */ --mk-space-30: 30px; /* footer 5-track gutter @1280 — 21 §1.2.1 */ --mk-space-24: 24px; /* THE dominant stack gap */ --mk-space-12: 12px; /* nav itemSpacing (EN); header rhythm */ --mk-space-10: 10px; /* btns itemSpacing — 00-hero §2.4 */ --mk-space-4: 4px; /* card-gallery gutter and pad — 07/09/11/12 */ /* -------------------------------------------------------------------------- THE BREATH — the page's one spacing law, promoted here by REQ-ZEBRA-1. ONE BREATH. The empty space between any two neighbouring things on this page is one breath, and a breath is always the same fraction of the screen you are looking at: one fifth of its SHORTER side, never under 96px and never over 208px. A section whose photograph runs to its own edge spends no breath there and its neighbour supplies the whole one. Where two sections both stand back from the boundary, they take half each. RESOLVED, MEASURED, at the five review viewports — used values read off getComputedStyle in headless Chrome, not authored numbers: 1280x900 -> 180 1440x900 -> 180 1750x980 -> 196 834x1112 -> 166.8 390x844 -> 96 (the floor bites) WHY vmin AND NOT vh. On a phone vmin IS the width (390 < 844), so the breath is immune to URL-bar viewport jitter. On tablet portrait vh would make the gap LARGER than on desktop (1112 > 980), which is backwards. Full derivation: sections/01-who-why.css §8 and review/r7/zebra-spacing-table.md. THIS PROMOTION IS VALUE-IDENTICAL AND THAT WAS PROVEN, NOT ASSUMED. `--mk-breath` shipped as a var() FALLBACK LITERAL inside sections/01-who-why.css and sections/03-unique.css, which meant the page's core spacing rule was not actually a token and could silently diverge between the two files. Before and after this line landed, four boxes were measured at all five widths — the bare literal, `var(--mk-breath, )`, `var(--mk-breath)` with NO fallback, and the half — plus the real consuming elements on index.html. Evidence: review/r7/r7-token/breath-BEFORE.json · breath-AFTER.json (instrument: review/r7/r7-token/measure_breath.py). BEFORE, `var(--mk-breath)` with no fallback resolved to 0 at every width — the token genuinely did not exist. THE FALLBACKS IN THE SECTION FILES STAY. They are harmless (this definition wins wherever it is present) and they are the safety net if this file is ever loaded late, swapped, or split. Do not "tidy" them away. ------------------------------------------------------------------------ */ --mk-breath: clamp(96px, 20vmin, 208px); /* Pill padding. EN and ES DIFFER and the difference is load-bearing (00-hero §2.3 "the i18n density rule"). Icon pills keep 18 in both. */ --mk-pill-pad-y: 8px; --mk-pill-pad-x: 18px; /* ES text pills override to 12px in the ES build */ /* ========================================================================== 11. RADII ====================================================================== */ --mk-radius-card: 4px; /* 07/09/11/12 cards; 20-cta-c §8 radius.card */ --mk-radius-pill: 54px; /* authored 54; clamps to a stadium on a 40 or 48px box */ --mk-radius-circle: 50%; /* 02 play circle (cornerRadius 90 on 108px); 04 nav circle */ /* Newsletter field/button: asymmetric, mirrored. 21-logos-footer §1.2.3. */ --mk-radius-field: 54px 4px 4px 54px; --mk-radius-field-btn: 4px 54px 54px 4px; /* ========================================================================== 12. MOTION Values below come from the Salient runtime we vendored (the demos the founder notes point at), NOT from Figma — Figma carries no motion. Cross-checked against build/DECISION-framework.md §2, which enumerates the 8 primitives and the modifiers. ====================================================================== */ /* Salient's global entrance easing/duration, declared on : data-cae="easeOutQuart" data-cad="1500" (resort/rooms). The SaaS demo that 01-who-why cites uses 1400 — see NOTES.md A5. */ --mk-motion-dur-entrance: 1500ms; --mk-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* Per-word split-heading reveal — 01-who-why §6.3 / 03-unique §"(2)". */ --mk-motion-dur-reveal: 1200ms; /* Button / pill state change — 04-ecology §"CTA hover"; 19-cta-b §"primary pill". Salient's own transition curve, present in the vendored CSS. */ --mk-motion-dur-hover: 450ms; --mk-ease-hover: cubic-bezier(0.15, 0.75, 0.5, 1); /* Outline -> turquoise fill CROSS-FADE. Verbatim from Salient's own Book Now `a::after { transition: opacity 0.3s ease }` — salient-truth/resort-rooms.lift.md §2.3, marked [measured]. That lift says in terms it is a two-layer pseudo-element cross-fade, "NOT background-position and NOT transform: scale". 00-hero.spec.md §7.4 prescribed a 450ms scaleX wipe; §7.4 is wrong against the lift, and a scaleX on a stadium squashes both end caps into ellipses mid-transition — an artefact the reference does not have. See review/deepdive/hero-nav-pill.md §9 P2. */ --mk-motion-dur-fill: 300ms; --mk-ease-fill: ease; /* Off-canvas menu icon morph — 00-hero §7.3, Salient `simple-transform`. */ --mk-motion-dur-icon: 300ms; /* Default Waypoints trigger point for entrance animations, per init.js. Overridable per element with data-animation-offset. */ --mk-motion-offset: 88%; } /* ============================================================================ FONT FACES — self-hosted, no CDN, no package manager. Sources: the designer's own installed faces (~/Library/Fonts), packed to WOFF2 by _tools/ttf2woff2.py, which drives brotli(1) by subprocess and verifies every table byte-for-byte against the source sfnt before writing. WOFF2 ONLY, as of 2026-08-17. This shipped WOFF1 with a TTF fallback and fetched 3,406,152 B of font; WOFF2 fetches 2,694,408 B — 711,744 B / -20.9% for free, no new asset, the .woff2 files were already on disk and simply unreferenced. WOFF2 is universal since 2016 (Chrome 36+, FF 39+, Safari 10+, Edge 14+). The TTF fallback is dropped with it: a browser fetches only the first src it supports, so the TTF was never downloaded by anything modern — its only live role was to make a WOFF failure degrade to a 4.6MB download rather than to Georgia. The .ttf files STAY IN THE REPO regardless: _tools/ttf2woff2.py globs fonts/*.ttf as its build source, and sections/07-building.css and sections/10-recovery-41.css cite them as the provenance of the Poppins metrics. Exclude them from the DEPLOY instead (ship fonts/*.woff2 only). THE PRELOADS IN _shell/head-top.html MOVE IN THE SAME COMMIT. If the CSS asks for .woff2 and the preload offers .woff the browser fetches BOTH — Merriweather twice, ~1.2MB WORSE than doing nothing. SUBSETTING IS NOT DONE, and is not possible here: fontTools and the brotli PYTHON module are both absent, and it would not reach the bulk anyway. The outlines are 3.26% of Merriweather; GPOS+GDEF are 74%, gvar 21%. Dropping the 518 non-latin codepoints prunes glyphs that are a rounding error and leaves the kern pairs and variation deltas that actually weigh. Stripping GPOS+GDEF outright would take it 2,503,444 -> 617,412 (-75%) and was MEASURED AND REJECTED: it shifts 83.4% of this page's real text runs by more than 0.5px. review/deepdive/fonts.md §2/§5. ========================================================================== */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/Poppins-Light.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Poppins-Regular.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Poppins-Medium.woff2") format("woff2"); } /* Merriweather is installed here ONLY as a variable font. Its fvar default is wght 300 / wdth 100 / opsz 18, and every NAMED INSTANCE pins opsz 18. That fact is true and the inference drawn from it was wrong. The named instance is what the Figma *inspector* reports; it is not what Figma's renderer composes with. Measured against this run's own @2x exports at every size the page uses, Figma renders Merriweather at opsz = font-size — i.e. at the CSS default, `font-optical-sizing: auto`. The table is in NOTES.md §F3 and the harness is `_tools/opsz-measure.py`. The pin is released below. */ @font-face { font-family: "Merriweather"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/Merriweather-variable.woff2") format("woff2"); } /* ============================================================================ BASE — the smallest possible reset on top of Salient's own CSS. Salient's style.css already normalises; this only pins what the specs pin. ========================================================================== */ .mk-page { font-family: var(--mk-font-sans); font-weight: var(--mk-w-regular); font-size: var(--mk-size-body); line-height: var(--mk-lh-body); color: var(--mk-ink-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---------------------------------------------------------------------------- MERRIWEATHER OPTICAL SIZE — corrected 2026-08-16 on a six-size measurement. This rule used to read `font-optical-sizing: none; font-variation-settings: "wdth" 100, "opsz" 18`. Eight section builders independently measured that pin as wrong and eight overrode it locally; nobody was authorised to change a read-only token on one section's evidence, so the wrong value stayed global and the error grew with type size. It is now measured at EVERY size the page sets in Merriweather, ink-against-ink on Figma's own @2x exports: size node figma ink opsz 18 err auto err 96 00-hero 854:376 560.00 625.00 +11.61 561.00 +0.18 60 01-who-why 2742:449 772.50 823.00 +6.54 772.50 +0.00 48 16-amenities-52 2924:352 574.50 602.00 +4.79 576.00 +0.26 48 10-recovery-41 2784:346 189.00 198.00 +4.76 190.00 +0.53 48 13-recovery-45 2785:495 190.00 198.00 +4.21 190.50 +0.26 36 14-amenities 2931:567 (x4) per line +2.4..+3.0 <+0.9 24 17-amenities-54 2931:393 149.00 150.00 +0.67 149.00 +0.00 18 21-logos-footer 3016:439 275.00 274.50 -0.18 274.50 -0.18 `auto` wins outright at 96 / 60 / 48 / 36 / 24 and TIES at 18 — necessarily, because `auto` sets opsz = font-size and the font size there IS 18. So there is no size at which the pin is better, and one global rule serves all six. The explicit-axis sweep in `_tools/opsz-measure.py` confirms the mechanism rather than just the outcome: ink width is monotonic in opsz and the value that lands on Figma is opsz = font-size at every one of the six sizes. `font-variation-settings` must not name `opsz` at all — it is the low-level property and would beat `font-optical-sizing` if it did. `wdth` 100 is the fvar default and is named only to keep the axis explicit. -------------------------------------------------------------------------- */ .mk-page :is(h1, h2, h3, .mk-serif) { font-family: var(--mk-font-serif); font-optical-sizing: auto; font-variation-settings: "wdth" 100; letter-spacing: 0; /* Merriweather letterSpacing is absent from every payload; read as 0 — 20-cta-c §9.4 */ } /* The page's one repeated micro-role: the uppercase Poppins eyebrow. Figma's hug width INCLUDES the trailing 3px letter-space (15-amenities-51 §"textAlignHorizontal is a trap"), which CSS drops on a centred block. Use .mk-eyebrow--centred to restore Figma's exact ink position. */ .mk-eyebrow { font-family: var(--mk-font-sans); font-weight: var(--mk-w-light); font-size: var(--mk-size-base); line-height: var(--mk-lh-node); letter-spacing: var(--mk-track-eyebrow); text-transform: uppercase; /* textCase is NOT serialised by the MCP; proven from the render — 00-hero §4.2, 15-amenities-51 §(b) */ } .mk-eyebrow--centred { width: fit-content; margin-inline: auto; text-align: left; /* deliberately left, not center — see above */ } @media (prefers-reduced-motion: reduce) { :root { --mk-motion-dur-entrance: 1ms; --mk-motion-dur-reveal: 1ms; --mk-motion-dur-hover: 1ms; --mk-motion-dur-fill: 1ms; --mk-motion-dur-icon: 1ms; } }