@bongos/core 1.19.726 → 1.19.727

package/docs/design/mocks/world/chrome-blobs/_tokens.css

@@ -1,479 +0,0 @@
-/* Cloud Bongos world candidate "The chrome" - token layer for landing.html, landing-b.html, hall.html, status.html.
-   The world: pure black space with iridescent chrome sculpture drifting through it, white type, one warm CTA.
-   Palette strategy: Restrained. Pure black ground (#000, sampled from the owner's site template) and a neutral
-   white-to-grey scale; a single warm salmon (--accent #fb9569, sampled from the template's CTA pill) lights only
-   the primary action and the live step. Faces: Manrope 300/400/500/600 (the template's light geometric grotesque;
-   display at 300, lowercase, tabular figures); JetBrains Mono 400 uppercase carries the light hall's labels per hall-1.
-   Materials: rendered chrome plates composited with mix-blend-mode:lighten over black (r2-chrome-blobs-set for the
-   hero field, r2-chrome-blob-one for the small object, r2-bongos-chrome-b for the hero-scale bongo pair); dark glass
-   (translucent white over black, backdrop blur, a 1px light edge); forest-mist.jpg under the dark hall; 1px leaders.
-   Corners: pill (999px) for every interactive control, 16px for cards and panels, 10px for small inset tiles.
-   Derived from the contract: every fill, glass, tint, hatch, state colour, plate reference and the layout switches
-   at the foot of this file are color-mix()ed or keyed off --bg / --ink / --accent, so a host pack still wins. */
-
-:root {
-  color-scheme: light;
-
-  /* ---- contract tokens (a host branding pack overrides exactly these fifteen) ---- */
-  --bg: #edecee;
-  --bg-card: #fbfafc;
-  --bg-deep: #e2e1e4;
-  --bg-frame: #f6f5f7;
-  --ink: #17181a;
-  --ink-soft: #55565a;
-  --ink-faint: #65656a;
-  --rule: rgba(23, 24, 26, .18);
-  --rule-soft: rgba(23, 24, 26, .08);
-  --accent: #fb9569;
-  --accent-deep: #d96a35;
-  --sea: #5b6fd0;
-  --terracotta: #c9512c;
-  --font-display: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
-  --font-body: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
-
-  /* ---- derived: faces + the rendered plates (referenced only through these) ---- */
-  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
-  --plate: none;                       /* the hall's ground photograph: dark mode only */
-  --plate-blob: url(../../../../../.impeccable/mocks/world-assets/chrome-blobs.jpg);
-  --plate-set: url(../../../../../.impeccable/mocks/world-assets/r2-chrome-blobs-set.jpg);
-  --plate-bead: url(../../../../../.impeccable/mocks/world-assets/r2-chrome-blob-one.jpg);
-  --plate-bongos: url(../../../../../.impeccable/mocks/world-assets/r2-bongos-chrome-b.jpg);
-  --blob-blend: lighten;               /* every plate is rendered on black; lighten composites it */
-
-  /* ---- derived: the void (the black the chrome must composite on) ---- */
-  --void: #050508;
-  --void-ink: #ffffff;
-  --void-ink-soft: rgba(255, 255, 255, .70);
-  --void-edge: rgba(255, 255, 255, .14);
-  --void-pill: rgba(0, 0, 0, .5);      /* a control that must stay readable over the chrome */
-  --void-glass: rgba(23, 24, 26, .05); /* the landing's pill glass: 8% white over black in dark */
-  --void-glass-strong: rgba(23, 24, 26, .09);
-  --void-glass-edge: rgba(23, 24, 26, .12);
-  --door-bg: var(--void-glass);        /* dark mode swaps in --void-pill; light sits on paper */
-
-  /* ---- derived: glass + surfaces ---- */
-  --glass: rgba(23, 24, 26, .05);
-  --glass-strong: rgba(23, 24, 26, .08);
-  --glass-edge: rgba(23, 24, 26, .12);
-  --glass-blur: 0px;                   /* blur is a dark-mode material: nothing photographic sits behind light */
-  --card-body: #f4f3f6;
-  --shadow-card: 0 1px 2px rgba(23, 24, 26, .06), 0 14px 34px rgba(23, 24, 26, .07);
-  --panel-bg: #ffffff;                 /* hall shell surfaces: white in light, glass in dark */
-  --panel-edge: var(--rule-soft);
-  --sheet-bg: #ffffff;
-  --sheet-edge: rgba(23, 24, 26, .13);
-  --sheet-shadow: 0 1px 2px rgba(23, 24, 26, .05), 0 12px 30px rgba(23, 24, 26, .06);
-  --board-bg: var(--bg);               /* the sheet has to read as a card ON something */
-  --badge-bg: #17181a;                 /* the mark's plate, per hall-1's black badge */
-  --badge-ink: #ffffff;
-  --chip-bg: rgba(23, 24, 26, .05);    /* a static label chip: never the accent */
-  --chip-ink: var(--ink-soft);
-  --chip-edge: var(--rule-soft);
-
-  /* ---- derived: accent behaviours (the accent lights only what is live or pressable) ---- */
-  --accent-ink: color-mix(in srgb, var(--accent) 45%, #240e00);   /* accent as readable text on a light ground */
-  --accent-lift: color-mix(in srgb, var(--accent) 58%, #ffffff);  /* the lit half of the warm CTA */
-  --accent-tint: color-mix(in srgb, var(--accent) 30%, #fffdf9);  /* the current item's fill */
-  --accent-on: #2a1305;                                           /* ink that sits on an accent fill */
-  --accent-glow: none;
-  --fig-accent: var(--ink);            /* credits figures: warm in the dark hall, ink in the light one */
-  --go-bg: var(--ink);                 /* the hall's primary button: dark filled in light, warm in dark */
-  --go-ink: var(--bg);
-  --tab-bg: var(--accent);             /* the selected tab is the one lit pill, same in both modes */
-  --tab-ink: var(--accent-on);
-
-  /* ---- derived: state + marks ---- */
-  --ok: var(--accent-deep);
-  --warn: var(--terracotta);
-  --err: var(--terracotta);
-  --focus: color-mix(in srgb, var(--accent-deep) 82%, #3a1400);  /* 3:1 on the light ground */
-  --line: 1px;
-  --radius: 16px;
-  --radius-sm: 10px;
-  --radius-pill: 999px;
-
-  /* the inherited bongo pair as line and fill: chrome ramp, not ceramic */
-  --chrome-hi: #ffffff;
-  --chrome-mid: #a9b2bd;
-  --chrome-cool: #949eaa;
-  --chrome-lo: #2e343c;
-  --skin-hi: #ffffff;
-  --skin-mid: #8e97a3;
-  --skin-lo: #333941;
-  --drum-shadow: #17181a;
-  --type-halo: none;       /* type floating over the chrome needs its own ground in dark */
-
-  /* browser surfaces + drawn chrome that cannot take a var() inline */
-  --chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2365656a' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  --check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 6.4l2.6 2.6L10 3.4' fill='none' stroke='%232a1305' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  --hatch: repeating-linear-gradient(45deg, transparent 0 5px, rgba(23, 24, 26, .12) 5px 6px);
-
-  /* ---- derived: layout switches (light rehouses the chrome in one black specimen panel) ---- */
-  --top-h: 72px;
-  --float-pos: static;                 /* lede, callouts and the mark flow in the copy column */
-  --hero-text-align: left;
-  --hero-col: 50%;
-  --hero-pad-top: 0px;
-  --hero-pad-bottom: 16vh;
-  --h1-size: clamp(38px, 5.4vw, 78px);
-  --h1-a: 0%;
-  --h1-b: 0%;
-  --h1-c: 0%;
-  --leader-len: 66px;
-  --scrim: none;
-  --top-scrim: none;
-  --field-top: 4%;
-  --field-right: 2.5%;
-  --field-bottom: 12%;
-  --field-left: 55%;
-  --field-h: auto;
-  --field-bg: var(--void);
-  --field-radius: 30px;
-  --field-mask: none;                  /* light keeps a crisp specimen panel; dark dissolves into the void */
-  --doors-just: flex-start;
-  --form-d: block;
-  --form-w: 37.8vw;
-  --form-x: 0.8vw;
-  --form-y: -5.6vh;
-  --orb-d: block;
-  --orb-w: 24vw;
-  --orb-x: 9vw;
-  --orb-y: 48vh;
-  --bead-d: none;
-  --bead-w: 16vw;
-  --bead-x: 60vw;
-  --bead-y: 20vh;
-  --mark-pos: absolute;
-  --mark-w: 23.3vw;
-  --mark-x: 64.8vw;
-  --mark-y: 35.7vh;
-  --crest-bg: var(--void);
-  --crest-radius: 28px;
-  --shell-pad: 22px;
-  --shell-radius: 16px;
-  --shell-bg: var(--bg-card);
-  --shell-edge: rgba(23, 24, 26, .13);
-  --shell-shadow: 0 1px 2px rgba(23, 24, 26, .05), 0 18px 44px rgba(23, 24, 26, .07);
-  --shell-blob: none;                  /* the chrome bloom is a dark-mode material */
-  --label-face: var(--font-mono);
-  --label-size: 11px;
-  --label-space: .12em;
-  --label-suffix: "";
-  --head-case: uppercase;              /* tabs, filter labels, column heads: mono caps light, sentence dark */
-}
-
-:root[data-mode="dark"] {
-  color-scheme: dark;
-  --bg: #000000;
-  --bg-card: #101012;
-  --bg-deep: #000000;
-  --bg-frame: #08080a;
-  --ink: #ffffff;
-  --ink-soft: #c0c0c0;
-  --ink-faint: #a8a8a8;
-  --rule: rgba(255, 255, 255, .16);
-  --rule-soft: rgba(255, 255, 255, .08);
-  --plate: url(../../../../../.impeccable/mocks/world-assets/forest-mist.jpg);
-  --void: #000000;
-  --void-ink: var(--ink);
-  --void-ink-soft: var(--ink-soft);
-  --void-edge: rgba(255, 255, 255, .16);
-  --void-pill: rgba(0, 0, 0, .5);
-  --void-glass: rgba(255, 255, 255, .075);
-  --void-glass-strong: rgba(255, 255, 255, .14);
-  --void-glass-edge: rgba(255, 255, 255, .11);
-  --door-bg: var(--void-pill);         /* the door bar keeps its own ground over bright chrome */
-  --glass: rgba(255, 255, 255, .11);
-  --glass-strong: rgba(255, 255, 255, .17);
-  --glass-edge: rgba(255, 255, 255, .13);
-  --glass-blur: 18px;
-  --card-body: #161618;
-  --shadow-card: 0 24px 60px rgba(0, 0, 0, .6);
-  --panel-bg: rgba(255, 255, 255, .05);
-  --panel-edge: var(--rule-soft);
-  --sheet-bg: rgba(255, 255, 255, .07);
-  --sheet-edge: rgba(255, 255, 255, .13);
-  --sheet-shadow: 0 26px 60px rgba(0, 0, 0, .42);
-  --board-bg: transparent;
-  --badge-bg: rgba(255, 255, 255, .10);
-  --badge-ink: var(--ink);
-  --chip-bg: rgba(255, 255, 255, .08);
-  --chip-ink: var(--ink-soft);
-  --chip-edge: var(--rule-soft);
-  --accent-ink: var(--accent);
-  --accent-lift: color-mix(in srgb, var(--accent) 58%, #ffffff);
-  --accent-tint: color-mix(in srgb, var(--accent) 22%, #0b0a09);
-  --accent-on: #2a1305;
-  --accent-glow: 0 8px 28px color-mix(in srgb, var(--accent) 38%, transparent);
-  --fig-accent: var(--ink);            /* credits are data, not a live or pressable thing */
-  --go-bg: var(--accent);
-  --go-ink: var(--accent-on);
-  --tab-bg: var(--accent);
-  --tab-ink: var(--accent-on);
-  --ok: var(--accent);
-  --warn: var(--accent);
-  --err: var(--terracotta);
-  --focus: var(--accent);
-  --drum-shadow: #000000;
-  --type-halo: 0 2px 18px rgba(0, 0, 0, .94), 0 0 54px rgba(0, 0, 0, .72);
-  --chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23a8a8a8' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  --check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 6.4l2.6 2.6L10 3.4' fill='none' stroke='%232a1305' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  --hatch: repeating-linear-gradient(45deg, transparent 0 5px, rgba(255, 255, 255, .14) 5px 6px);
-  --float-pos: absolute;
-  --hero-text-align: left;
-  --hero-col: 100%;
-  --hero-pad-bottom: 15vh;
-  --h1-size: clamp(38px, 8.4vw, 128px);
-  --h1-a: 2%;
-  --h1-b: 30%;
-  --h1-c: 28%;
-  --leader-len: 104px;
-  --scrim: radial-gradient(66% 58% at 28% 34%, rgba(0, 0, 0, .86), rgba(0, 0, 0, .42) 46%, rgba(0, 0, 0, 0) 78%);
-  --top-scrim: linear-gradient(to bottom, rgba(0, 0, 0, .82) 0, rgba(0, 0, 0, .54) 42%, rgba(0, 0, 0, 0) 100%);
-  --field-top: calc(var(--top-h) * -1);
-  --field-right: 0px;
-  --field-bottom: 0px;
-  --field-left: 0px;
-  --field-h: auto;
-  --field-bg: transparent;
-  --field-radius: 0px;
-  --field-mask: linear-gradient(to bottom, #000 0 78%, transparent 99%);
-  --doors-just: center;
-  --form-d: block;
-  --form-w: 74vw;
-  --form-x: 29.3vw;
-  --form-y: -3.1vh;
-  --orb-d: block;
-  --orb-w: 52vw;
-  --orb-x: 12.9vw;
-  --orb-y: 63.4vh;
-  --bead-d: block;
-  --bead-w: 18vw;
-  --bead-x: 87.6vw;
-  --bead-y: 87.6vh;
-  --mark-pos: absolute;
-  --mark-w: 26vw;
-  --mark-x: 64.6vw;
-  --mark-y: 48.3vh;
-  --crest-bg: transparent;
-  --crest-radius: 28px;
-  --shell-pad: 48px;
-  --shell-radius: 18px;
-  --shell-bg: rgba(4, 6, 8, .78);
-  --shell-edge: rgba(255, 255, 255, .14);
-  --shell-shadow: 0 40px 90px rgba(0, 0, 0, .55);
-  --shell-blob: block;
-  --label-face: var(--font-body);
-  --label-size: 11.5px;
-  --label-space: .1em;
-  --label-suffix: "";
-  --head-case: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-mode="light"]) {
-    color-scheme: dark;
-    --bg: #000000;
-    --bg-card: #101012;
-    --bg-deep: #000000;
-    --bg-frame: #08080a;
-    --ink: #ffffff;
-    --ink-soft: #c0c0c0;
-    --ink-faint: #a8a8a8;
-    --rule: rgba(255, 255, 255, .16);
-    --rule-soft: rgba(255, 255, 255, .08);
-    --plate: url(../../../../../.impeccable/mocks/world-assets/forest-mist.jpg);
-    --void: #000000;
-    --void-ink: var(--ink);
-    --void-ink-soft: var(--ink-soft);
-    --void-edge: rgba(255, 255, 255, .16);
-    --void-pill: rgba(0, 0, 0, .5);
-    --void-glass: rgba(255, 255, 255, .075);
-    --void-glass-strong: rgba(255, 255, 255, .14);
-    --void-glass-edge: rgba(255, 255, 255, .11);
-    --door-bg: var(--void-pill);         /* the door bar keeps its own ground over bright chrome */
-    --glass: rgba(255, 255, 255, .11);
-    --glass-strong: rgba(255, 255, 255, .17);
-    --glass-edge: rgba(255, 255, 255, .13);
-    --glass-blur: 18px;
-    --card-body: #161618;
-    --shadow-card: 0 24px 60px rgba(0, 0, 0, .6);
-    --panel-bg: rgba(255, 255, 255, .05);
-    --panel-edge: var(--rule-soft);
-    --sheet-bg: rgba(255, 255, 255, .07);
-    --sheet-edge: rgba(255, 255, 255, .13);
-    --sheet-shadow: 0 26px 60px rgba(0, 0, 0, .42);
-    --board-bg: transparent;
-    --badge-bg: rgba(255, 255, 255, .10);
-    --badge-ink: var(--ink);
-    --chip-bg: rgba(255, 255, 255, .08);
-    --chip-ink: var(--ink-soft);
-    --chip-edge: var(--rule-soft);
-    --accent-ink: var(--accent);
-    --accent-lift: color-mix(in srgb, var(--accent) 58%, #ffffff);
-    --accent-tint: color-mix(in srgb, var(--accent) 22%, #0b0a09);
-    --accent-on: #2a1305;
-    --accent-glow: 0 8px 28px color-mix(in srgb, var(--accent) 38%, transparent);
-    --fig-accent: var(--ink);            /* credits are data, not a live or pressable thing */
-    --go-bg: var(--accent);
-    --go-ink: var(--accent-on);
-    --tab-bg: var(--accent);
-    --tab-ink: var(--accent-on);
-    --ok: var(--accent);
-    --warn: var(--accent);
-    --err: var(--terracotta);
-    --focus: var(--accent);
-    --drum-shadow: #000000;
-    --type-halo: 0 2px 18px rgba(0, 0, 0, .94), 0 0 54px rgba(0, 0, 0, .72);
-    --chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23a8a8a8' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-    --check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 6.4l2.6 2.6L10 3.4' fill='none' stroke='%232a1305' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-    --hatch: repeating-linear-gradient(45deg, transparent 0 5px, rgba(255, 255, 255, .14) 5px 6px);
-    --float-pos: absolute;
-    --hero-text-align: left;
-    --hero-col: 100%;
-    --hero-pad-bottom: 15vh;
-    --h1-size: clamp(38px, 8.4vw, 128px);
-    --h1-a: 2%;
-    --h1-b: 30%;
-    --h1-c: 28%;
-    --leader-len: 104px;
-    --scrim: radial-gradient(66% 58% at 28% 34%, rgba(0, 0, 0, .86), rgba(0, 0, 0, .42) 46%, rgba(0, 0, 0, 0) 78%);
-    --top-scrim: linear-gradient(to bottom, rgba(0, 0, 0, .82) 0, rgba(0, 0, 0, .54) 42%, rgba(0, 0, 0, 0) 100%);
-    --field-top: calc(var(--top-h) * -1);
-    --field-right: 0px;
-    --field-bottom: 0px;
-    --field-left: 0px;
-    --field-h: auto;
-    --field-bg: transparent;
-    --field-radius: 0px;
-    --field-mask: linear-gradient(to bottom, #000 0 78%, transparent 99%);
-    --doors-just: center;
-    --form-d: block;
-    --form-w: 74vw;
-    --form-x: 29.3vw;
-    --form-y: -3.1vh;
-    --orb-d: block;
-    --orb-w: 52vw;
-    --orb-x: 12.9vw;
-    --orb-y: 63.4vh;
-    --bead-d: block;
-    --bead-w: 18vw;
-    --bead-x: 87.6vw;
-    --bead-y: 87.6vh;
-    --mark-pos: absolute;
-    --mark-w: 26vw;
-    --mark-x: 64.6vw;
-    --mark-y: 48.3vh;
-    --crest-bg: transparent;
-    --crest-radius: 28px;
-    --shell-pad: 48px;
-    --shell-radius: 18px;
-    --shell-bg: rgba(4, 6, 8, .78);
-    --shell-edge: rgba(255, 255, 255, .14);
-    --shell-shadow: 0 40px 90px rgba(0, 0, 0, .55);
-    --shell-blob: block;
-    --label-face: var(--font-body);
-    --label-size: 11.5px;
-    --label-space: .1em;
-    --label-suffix: "";
-    --head-case: none;
-  }
-}
-
-/* ---- narrow: one column everywhere; in light the chrome moves to a black masthead band ---- */
-@media (max-width: 900px) {
-  :root {
-    --top-h: 60px;
-    --float-pos: static;
-    --hero-text-align: center;
-    --hero-col: 100%;
-    --hero-pad-top: 250px;
-    --hero-pad-bottom: 4vh;
-    --doors-just: center;
-    --h1-size: clamp(34px, 9.4vw, 46px);
-    --h1-a: 0%;
-    --h1-b: 0%;
-    --h1-c: 0%;
-    --leader-len: 54px;
-    --field-top: 0px;
-    --field-right: 0px;
-    --field-bottom: auto;
-    --field-left: 0px;
-    --field-h: 190px;
-    --field-radius: 0 0 26px 26px;
-    --form-d: none;
-    --orb-w: 104vw;
-    --orb-x: -3vw;
-    --orb-y: -12vh;
-    --bead-d: none;
-    --mark-pos: absolute;
-    --mark-w: 64.9vw;
-    --mark-x: 17.4vw;
-    --mark-y: 2.25vh;
-    --shell-pad: 0px;
-    --shell-radius: 0px;
-  }
-  :root[data-mode="dark"] {
-    --float-pos: static;
-    --hero-text-align: center;
-    --hero-col: 100%;
-    --hero-pad-top: 250px;
-    --hero-pad-bottom: 4vh;
-    --h1-size: clamp(34px, 9.4vw, 46px);
-    --h1-a: 0%;
-    --h1-b: 0%;
-    --h1-c: 0%;
-    --leader-len: 54px;
-    --doors-just: center;
-    --scrim: radial-gradient(126% 42% at 50% 36%, rgba(0, 0, 0, .88), rgba(0, 0, 0, .44) 52%, rgba(0, 0, 0, 0) 86%);
-    --field-top: calc(var(--top-h) * -1);
-    --field-bottom: 0px;
-    --field-h: auto;
-    --field-radius: 0px;
-    --form-d: none;
-    --orb-w: 130vw;
-    --orb-x: -21.3vw;
-    --orb-y: 65vh;
-    --bead-d: none;
-    --mark-w: 64.9vw;
-    --mark-x: 17.4vw;
-    --mark-y: 2.5vh;
-    --shell-pad: 0px;
-    --shell-radius: 0px;
-  }
-}
-
-@media (max-width: 900px) and (prefers-color-scheme: dark) {
-  :root:not([data-mode="light"]) {
-    --float-pos: static;
-    --hero-text-align: center;
-    --hero-col: 100%;
-    --hero-pad-top: 250px;
-    --hero-pad-bottom: 4vh;
-    --h1-size: clamp(34px, 9.4vw, 46px);
-    --h1-a: 0%;
-    --h1-b: 0%;
-    --h1-c: 0%;
-    --leader-len: 54px;
-    --doors-just: center;
-    --scrim: radial-gradient(126% 42% at 50% 36%, rgba(0, 0, 0, .88), rgba(0, 0, 0, .44) 52%, rgba(0, 0, 0, 0) 86%);
-    --field-top: calc(var(--top-h) * -1);
-    --field-bottom: 0px;
-    --field-h: auto;
-    --field-radius: 0px;
-    --form-d: none;
-    --orb-w: 130vw;
-    --orb-x: -21.3vw;
-    --orb-y: 65vh;
-    --bead-d: none;
-    --mark-w: 64.9vw;
-    --mark-x: 17.4vw;
-    --mark-y: 2.5vh;
-    --shell-pad: 0px;
-    --shell-radius: 0px;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after { animation: none !important; transition: none !important; }
-}