/* kova-ui: the Kova configurator's stage and dock (kova-ui.js; docs/controls.md). The 3D stage alone, and
   the configurator as one floating glass dock centred over its floor. Amber marks only the booking button,
   the selected option and focus. A page's own tokens and buttons (same names) win over the defaults below. */
@layer kova-ui-defaults {
  :root {
    --bg: #0d0e10; --panel: #131416; --raised: #1a1b1e; --sunk: #09090b;
    --line: #232428; --line-2: #313236; --line-3: #47484d;
    --text: #f0eee9; --text-2: #aaa9a4; --text-3: #8d8c87;
    --accent: #f5b04a; --accent-hi: #ffc670; --accent-ink: #1d1304;
    --sans: system-ui, sans-serif;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
  }
  :where(.stage, .toast), :where(.stage, .toast) *, :where(.stage, .toast) ::before, :where(.stage, .toast) ::after { box-sizing: border-box; }
  :where(.stage, .toast) { color: var(--text); font: 400 1rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
  :where(.stage) button { font: inherit; color: inherit; }
  :where(.stage) :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
  :where(.stage) a { color: inherit; }
  :where(.stage) img { display: block; max-width: 100%; }
  .i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; padding: 0 20px; border-radius: 10px; border: 1px solid transparent;
    font: 500 0.9375rem/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  }
  .btn-sm { height: 36px; padding: 0 14px; border-radius: 8px; font-size: 0.875rem; }
  .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-hi); }
  .btn-primary:hover { background: var(--accent-hi); }
  .btn-ghost { color: var(--text); border-color: var(--line-2); background: transparent; }
  .btn-ghost:hover { border-color: var(--line-3); background: var(--raised); }
}

:root {
  --ring: #66676c; /* non-text outlines: 3.3:1 on --panel, 3:1 on --raised */
  --glass: rgb(17 18 20 / 0.62);
  --glass-line: rgb(255 255 255 / 0.09);
  --glass-hover: rgb(255 255 255 / 0.07);
  --dock-inset: 136px; /* where the dock's top sits above the stage's bottom, + 12 px (the still's frame) */
}
[hidden] { display: none !important; }

/* ---- Buttons in the dock ---------------------------------------------------------------------- */
.btn__icon { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn:disabled { opacity: 0.5; cursor: progress; }
.btn-icon { width: 36px; padding: 0; }
@media (pointer: coarse) {
  .btn-sm { height: 44px; }
  .btn-icon { width: 44px; }
}

/* ---- The 3D stage ----------------------------------------------------------------------------- */
/* A root without its own markup (kova-ui.js adds the class): the stage fills it. */
.kova-ui { position: relative; }
.kova-ui > .stage { position: absolute; inset: 0; }
.stage {
  position: relative; overflow: hidden; min-height: 0; container: stage / size;
  background: radial-gradient(ellipse 60% 22% at 50% 70%, rgb(255 255 255 / 0.04), transparent 70%), linear-gradient(var(--panel), var(--sunk));
}
/* The first 2.5 s (kova-ui.js): no spinner nor message over the page's still. */
.stage[data-state="loading"]:not([data-slow]) .stage__status { opacity: 0; }
.stage__viewer, .stage__viewer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* The 3D view reached with Tab (kova-ui.js marks it: the cross-origin frame matches no :focus here) */
.stage[data-kbd-focus] .stage__viewer iframe { outline: 2px solid var(--accent); outline-offset: -2px; }
.stage__viewer { opacity: 0; transition: opacity 0.25s var(--ease); } /* kova-ui.js FADE_MS */
.stage[data-state="ready"] .stage__viewer { opacity: 1; }
/* `still` (kova-ui.js): the page's still covers the stage until the 3D has settled on its frame: the 3D sits
   opaque under it meanwhile (a 3D shown from opacity 0 opens on its frame's empty, dark backdrop for a frame or two
   while the browser starts drawing its video), and the page fades the still out over it. */
.stage[data-settling] .stage__viewer { opacity: 1; transition: none; }
/* `wait`, warm (kova-ui.js): the session opens with its 3D off screen, so the engine renders nothing; once
   ready it sits in place, unseen (transparent, or opaque under the page's still), and holds the still's frame
   (paused); the first touch fades it in (with a still: the still goes at once). */
.stage[data-warm]:not([data-settling]) .stage__viewer { opacity: 0; transition: none; }
.stage[data-offscreen] .stage__viewer { translate: -300vw 0; }
.stage[data-warm] .stage__status { visibility: hidden; }
/* Cursors (kova-site docs/standard.md § 11.11): the stage is the 3D (its poster too, before it is live):
   `grab`, `grabbing` pressed; the engine's frame shows its own (`pointer` over a configurable part). The
   dock's glass is not the model; its slider thumbs grab. */
.stage:not([data-state="error"]) { cursor: grab; }
.stage:not([data-state="error"]):active { cursor: grabbing; }
.stage .dock { cursor: default; }
.slider input { cursor: grab; }
.slider input:active { cursor: grabbing; }
/* Paused after minutes without a touch (kova-ui.js): the last frame, dimmed, under « Reprendre ». */
.stage[data-state="ready"][data-paused] .stage__viewer { opacity: 0.55; }
.stage__resume { position: absolute; z-index: 4; top: 12px; left: 50%; translate: -50% 0; background: var(--panel); }
.stage__status {
  position: absolute; inset: 0 0 var(--dock-inset); display: grid; place-content: center; justify-items: center; gap: 16px;
  padding: 24px; text-align: center; color: var(--text-2); text-shadow: 0 1px 10px rgb(0 0 0 / 0.9);
  transition: opacity 0.4s;
}
.stage[data-state="ready"] .stage__status { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.4s, visibility 0s 0.4s; }
/* Loading and error keep one box (no shift at the stall error). */
.stage__actions { display: flex; visibility: hidden; align-items: center; gap: 20px; }
.stage[data-state="error"] .stage__actions { visibility: visible; }
.stage__msg { width: min(34ch, 100vw - 48px); min-height: 3lh; color: var(--text); }
.spinner { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--text-2); animation: spin 0.9s linear infinite; }
.stage[data-state="error"] .spinner { visibility: hidden; }
@keyframes spin { to { transform: rotate(1turn); } }
/* The hovered part's name near the pointer (kova-ui.js; mouse only) */
.stage__label {
  position: absolute; z-index: 4; margin: 0; padding: 6px 10px; border-radius: 8px; pointer-events: none;
  background: var(--panel); border: 1px solid var(--line-2); color: var(--text); font-size: 0.8125rem; white-space: nowrap;
  opacity: 0; transition: opacity 0.15s;
}
.stage__label.is-on { opacity: 1; }

/* ---- The dock: tabs (and « Suivant », « Vues », rotation) over the open step's row and the total -- */
.dock {
  position: absolute; z-index: 3; left: 50%; bottom: 14px; translate: -50% 0; width: min(880px, 100% - 32px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tabs tabs" "body total" "legal legal"; column-gap: 12px;
  padding: 4px 8px 6px; border: 1px solid var(--glass-line); border-radius: 16px;
  background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 24px 48px -20px rgb(0 0 0 / 0.7);
}
/* More steps than the dock's tabs fit (kova-ui.js sets data-wide): wider, to 1120 px, on stages wider than a phone. */
@container stage (min-width: 601px) { .dock[data-wide] { width: min(1120px, 100% - 32px); } }
/* Nothing to choose (kova-ui.js sets is-bare): one compact row, the booking button left of the tools. */
.dock.is-bare { width: auto; max-width: calc(100% - 32px); grid-template-columns: auto auto; grid-template-areas: "body tabs" "legal legal"; padding: 4px 8px; }
.dock.is-bare .dock__tabs { padding: 0; border: 0; }
.dock.is-bare .cfg-steps { display: none; }
.dock__tabs { grid-area: tabs; display: flex; align-items: center; gap: 2px; min-width: 0; padding-bottom: 4px; border-bottom: 1px solid var(--glass-line); }
/* The tabs snap to their starts (none peeks in cut at the left; kova-ui.js shows no left fade there). */
.cfg-steps { flex: 0 1 auto; min-width: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 0 32px; scroll-snap-type: x proximity; }
.cfg-steps::-webkit-scrollbar { display: none; }
:is(.cfg-steps, .options, .dock__build)[data-fade="end"] { mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
:is(.cfg-steps, .options, .dock__build)[data-fade="start"] { mask-image: linear-gradient(90deg, transparent, #000 32px); }
:is(.cfg-steps, .options, .dock__build)[data-fade="both"] { mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
/* The steps as quiet words: the open one white on a faint pill, the rest muted. */
.step-tab {
  flex: none; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: none;
  color: var(--text-3); font: 500 0.875rem/1 var(--sans); white-space: nowrap; cursor: pointer; transition: color 0.15s, background-color 0.15s;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; /* a name longer than the row: ellipsised, whole in its tooltip */
}
.step-tab:hover { color: var(--text); }
.step-tab { scroll-snap-align: start; }
.step-tab[aria-current="step"] { color: var(--text); background: var(--glass-hover); }
:is(.step-tab, .dock__next, .dock__total, .stage__view):focus-visible { outline-offset: -2px; }
.dock__next, .dock__tools .btn { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; }
:is(.dock__next, .dock__tools .btn):hover { background: var(--glass-hover); color: var(--text); }
.dock__next .i { width: 16px; height: 16px; }
.dock__tools { flex: none; display: flex; gap: 2px; margin-left: auto; padding-left: 6px; border-left: 1px solid var(--glass-line); }
.dock__tools:empty { display: none; }
/* « Vues »: its name beside the cube on stages wider than a phone (kova-ui.js `menu(…, named)`). */
.dock__tool-name { display: none; }
@container stage (min-width: 601px) {
  .dock__tool-name { display: inline; font: 500 0.875rem/1 var(--sans); }
  .dock__tools .btn:has(.dock__tool-name) { display: flex; gap: 6px; width: auto; padding: 0 10px 0 8px; }
}
/* « Vues » and the share menu: their lists open upward from the dock. */
.stage__views { position: relative; }
.stage__views-list {
  position: absolute; right: 0; bottom: calc(100% + 14px); z-index: 5; display: flex; flex-direction: column; min-width: 150px; padding: 4px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 12px 30px rgb(0 0 0 / 0.5);
}
.stage__view { all: unset; box-sizing: border-box; display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 8px; color: var(--text); font-size: 0.875rem; white-space: nowrap; cursor: pointer; }
.stage__view:disabled { color: var(--text-3); cursor: progress; }
.stage__view:hover, .stage__view[aria-pressed="true"] { background: var(--raised); }
.stage__view:focus-visible { outline: 2px solid var(--accent); }

/* The open step's row: its options as circles (colours; pictures for the rest), the choice line beside. */
.dock__body, .dock__summary { grid-area: body; display: flex; align-items: center; gap: 14px; min-width: 0; min-height: 46px; padding-top: 2px; }
:where(.dock) fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.options { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 5px; scroll-padding-inline: 12px; }
.options::-webkit-scrollbar { display: none; }
.opt { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; cursor: pointer; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* read, not shown: the choice line shows it */
.opt__swatch {
  display: block; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: var(--c, var(--line-3));
  box-shadow: inset 0 -6px 10px rgb(0 0 0 / 0.35), inset 0 4px 7px rgb(255 255 255 / 0.18), 0 0 0 1px var(--ring);
  transition: box-shadow 0.2s, transform 0.25s var(--ease);
}
/* A picture (wheels, finishes, the carbon weave): a slightly larger circle. */
.opt:has(.opt__swatch--picture) { width: 42px; height: 42px; }
.opt__swatch--picture { width: 34px; height: 34px; background: radial-gradient(circle at 50% 45%, #4a4b50, #222327 80%); }
.opt__swatch img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.8); }
.opt__swatch img.is-closeup { transform: none; }
.opt:hover .opt__swatch { transform: scale(1.08); }
.opt input:checked + .opt__swatch { box-shadow: inset 0 -6px 10px rgb(0 0 0 / 0.35), inset 0 4px 7px rgb(255 255 255 / 0.18), 0 0 0 2px #141517, 0 0 0 4px var(--accent); }
.opt input:focus-visible + .opt__swatch { outline: 2px solid var(--accent); outline-offset: 5px; }
.opt.is-pending .opt__swatch { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.55; } }
/* Text options: compact chips with their short label (a long one ellipsised; the whole name in its tooltip). */
.opt:has(.opt__chip) { width: auto; height: 36px; }
.opt__chip {
  display: block; max-width: 26ch; padding: 0 12px; border: 1px solid var(--ring); border-radius: 99px;
  font-size: 0.8125rem; line-height: 28px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 0.15s, border-color 0.15s, box-shadow 0.2s;
}
.opt:hover .opt__chip { color: var(--text); border-color: var(--text-3); }
.opt input:checked + .opt__chip { color: var(--text); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.opt input:focus-visible + .opt__chip { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt.is-pending .opt__chip { animation: pulse 1s ease-in-out infinite; }
.dock__choice { flex: none; margin: 0; font-size: 0.8125rem; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dock__choice b { display: inline-block; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; color: var(--text); font-weight: 550; }
/* « Détails » (touch): an option's description over the dock. */
.dock__more { all: unset; display: inline-flex; align-items: center; color: var(--text); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.dock__more:focus-visible { outline: 2px solid var(--accent); }
.dock__choice a { color: var(--text); }
/* A slider's step: its name and track in the row. */
.slider { display: flex; align-items: center; gap: 12px; min-width: 0; padding-left: 6px; font-size: 0.8125rem; color: var(--text-2); white-space: nowrap; }
.slider input { width: clamp(140px, 30vw, 300px); height: 44px; margin: 0; accent-color: var(--text); }
/* The total: quiet, at the row's end; it opens the summary. */
.dock__total {
  grid-area: total; align-self: center; display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font: 600 0.9375rem/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer;
}
.dock__total:hover { background: var(--glass-hover); }
.total-label { color: var(--text-3); font-size: 0.75rem; font-weight: 500; }
/* The summary's row: booking, then the quote. */
.dock__summary { gap: 4px; padding-left: 4px; }
.dock__book { margin-right: 6px; }
.dock__summary .btn-ghost { border-color: transparent; background: none; }
.dock__summary .btn-ghost:hover { background: var(--glass-hover); }
/* …then the build: each group and its choice, one row that scrolls sideways. */
.dock__build { display: flex; gap: 2px; min-width: 0; margin: 0 0 0 6px; padding: 0 0 0 8px; border-left: 1px solid var(--glass-line); list-style: none; overflow-x: auto; scrollbar-width: none; }
.dock__build::-webkit-scrollbar { display: none; }
.dock__build:empty { display: none; }
.dock__build:first-child { margin: 0; padding: 0; border: 0; }
.dock__build button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px; border-radius: 8px; font-size: 0.8125rem; color: var(--text); white-space: nowrap; cursor: pointer; }
.dock__build button:hover { background: var(--glass-hover); }
.dock__build button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dock__build-group { color: var(--text-3); }
/* The company and legal lines, under the summary's row (a page's own `.dock__legal`). */
.dock__legal { grid-area: legal; margin-top: 4px; padding: 6px 4px 2px; border-top: 1px solid var(--glass-line); font-size: 0.6875rem; line-height: 1.45; color: var(--text-3); }
.dock__legal p { margin: 0; }
.dock__legal a { color: var(--text-2); }
@media (pointer: coarse) { .dock__legal a { display: inline-block; min-width: 44px; padding: 13px 4px; margin: -13px -4px; text-align: center; } }

/* Over the dock, centred: « Essayer en 3D » on the still (`wait`), then the hint for 3 s once live. */
.dock__try, .dock__hint { position: absolute; left: 50%; bottom: calc(100% + 14px); translate: -50% 0; }
/* Short wide stages (the home page's hero at 1280 × 720): at the dock's left end, clear of the car's front. */
@container stage (max-height: 560px) and (min-width: 601px) { .dock__try, .dock__hint { left: 8px; translate: none; bottom: calc(100% + 10px); } }
.dock__try {
  gap: 8px; padding: 0 16px 0 12px; border-radius: 99px; border-color: var(--glass-line);
  background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); white-space: nowrap;
}
.dock__try:hover { background: rgb(36 37 41 / 0.75); }
.dock__try .i { width: 12px; height: 12px; color: var(--accent); }
.dock__hint {
  margin: 0; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--glass-line); pointer-events: none;
  background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--text-2); font-size: 0.8125rem; white-space: nowrap; animation: rise 0.4s var(--ease) both 0.3s;
}
.dock__hint.is-out { animation: hint-out 0.3s var(--ease) forwards; }
/* An option's description (`details`), over the dock. */
.dock__details {
  position: absolute; left: 50%; bottom: calc(100% + 14px); translate: -50% 0; z-index: 4; width: max-content; max-width: min(560px, 100% - 16px);
  margin: 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--glass-line);
  background: var(--panel); color: var(--text-2); font-size: 0.8125rem; line-height: 1.5; box-shadow: 0 12px 30px rgb(0 0 0 / 0.5);
}
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes hint-out { to { opacity: 0; } }

.skeleton { border-radius: 8px; background: linear-gradient(90deg, rgb(255 255 255 / 0.05) 30%, rgb(255 255 255 / 0.1) 50%, rgb(255 255 255 / 0.05) 70%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -150% 0; } }
.sk-tab { flex: none; width: 64px; height: 22px; margin: 6px 4px; }
.sk-swatches { display: flex; gap: 14px; padding: 6px 10px; }
.sk-swatch { flex: none; width: 28px; height: 28px; border-radius: 50%; }
/* The still before a session (no warm: a bot, a data saver): no shimmer. */
.stage[data-warm] .skeleton { animation: none; }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, 20px);
  padding: 12px 18px; border-radius: 10px; background: var(--text); color: var(--bg); font-size: 0.875rem; font-weight: 550;
  opacity: 0; transition: opacity 0.25s, transform 0.25s var(--ease); pointer-events: none;
}
.toast[data-on] { opacity: 1; transform: translate(-50%, 0); }

/* Touch: every control 44 px. */
@media (pointer: coarse) {
  .step-tab, .dock__next, .dock__tools .btn { height: 44px; }
  .dock__next, .dock__tools .btn { width: 44px; }
  .opt, .opt:has(.opt__swatch--picture) { width: 44px; height: 44px; }
  .opt__swatch { width: 32px; height: 32px; }
  .opt__swatch--picture { width: 38px; height: 38px; }
  .opt:has(.opt__chip) { height: 44px; }
  .dock__more, .dock__build button { min-height: 44px; }
  .stage__view { min-height: 44px; }
  .dock__total { min-height: 44px; }
  :root { --dock-inset: 152px; }
}

/* Phones (stages 600 px wide or narrower): the dock pinned along the stage's bottom, the tabs and the options
   each one scrolling row, the choice line and the total between them. Nothing else over the product. */
@container stage (max-width: 600px) {
  .dock {
    left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); translate: none; width: auto; padding: 2px 6px 4px; border-radius: 14px;
    grid-template-areas: "tabs tabs" "choice total" "opts opts" "legal legal"; column-gap: 8px;
  }
  .dock__body { display: contents; }
  .dock__choice { grid-area: choice; align-self: center; min-width: 0; padding-left: 6px; overflow: hidden; text-overflow: ellipsis; }
  .dock__body > :is(.options, .sk-swatches, .slider, .dock__book) { grid-area: opts; }
  .dock__summary { grid-area: opts; flex-wrap: wrap; min-height: 48px; padding-top: 0; }
  .dock__build { order: -1; flex-basis: 100%; margin: 0; padding: 0; border: 0; }
  .dock__summary .dock__book { flex: 1; }
  .dock.is-bare { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tabs" "opts" "legal"; padding: 2px 6px 4px; } /* the tools over the full-width button: both don't fit one row */
  .dock.is-bare .dock__tools { border: 0; }
  .dock__total { margin-top: 0; padding: 4px 6px; font-size: 0.875rem; }
  .options { padding: 2px 4px 4px; }
  /* Circles touch (each 44 px target keeps 12 px between them): eight fit a 393 px phone (kova-ui.js: more show half of the next). */
  .options:has(.opt__swatch) { gap: 0; }
  .cfg-steps { scroll-snap-type: x mandatory; }
  .slider { width: 100%; }
  .slider input { flex: 1; width: auto; }
  .dock__legal { font-size: 0.625rem; }
  .dock__try, .dock__hint { bottom: calc(100% + 12px); }
}
@media (max-width: 600px) { :root { --dock-inset: 166px; } }

@media (prefers-reduced-motion: reduce) {
  .spinner, .skeleton, .dock__hint, .dock__hint.is-out, .opt.is-pending :is(.opt__swatch, .opt__chip) { animation: none; }
  .stage__label, .stage__viewer, .step-tab, .opt__swatch, .opt__chip { transition: none; }
}

/* no-JS */
html:not(.js) :is(.stage .spinner, .stage__msg) { display: none; }