/* ============================================================================
   3D configurator UI — layered over the WebGL canvas.
   ========================================================================== */

.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 358px;
  height: calc(100svh - var(--nav-h));
  margin-top: var(--nav-h);
  border-top: 1px solid var(--line);
}

.stage__view {
  position: relative;
  min-width: 0;
  background:
    radial-gradient(58% 58% at 50% 42%, #1b2026 0%, #0c0e10 55%, #08090a 100%);
  overflow: hidden;
}
.stage__canvas { position: absolute; inset: 0; }
.stage__canvas canvas { width: 100%; height: 100%; }

/* faint technical grid, sits under the model */
.stage__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(70% 70% at 50% 50%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 20%, transparent 78%);
}

/* --------------------------------------------------------------- overlays */
.hud {
  position: absolute;
  z-index: 5;
  display: flex;
  gap: 8px;
  pointer-events: none;
}
.hud > * { pointer-events: auto; }

.hud--tl { top: 16px; left: 16px; flex-wrap: wrap; }
.hud--tr { top: 16px; right: 16px; }
.hud--bl { bottom: 16px; left: 16px; flex-direction: column; align-items: flex-start; }
.hud--br { bottom: 16px; right: 16px; }

/* pill button used across the HUD */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  background: rgba(12, 14, 16, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
              background 0.2s var(--ease);
}
.pill:hover { color: var(--text); border-color: var(--line-3); }
.pill.is-on {
  color: var(--accent);
  border-color: var(--accent-line);
  background: rgba(232, 180, 74, 0.09);
}
.pill--icon { padding: 8px 10px; }

.pill-group {
  display: flex;
  background: rgba(12, 14, 16, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  overflow: hidden;
}
.pill-group .pill {
  background: none;
  border: 0;
  border-inline-end: 1px solid var(--line);
  backdrop-filter: none;
  border-radius: 0;
}
.pill-group .pill:last-child { border-inline-end: 0; }
.pill-group .pill.is-on { background: rgba(232, 180, 74, 0.12); }

/* model tabs */
.model-tabs { display: flex; gap: 6px; }

/* Beside the model name. The HUD is absolutely positioned and shrink-to-fit,
   so it takes its width from this note: the max-width is what stops the block
   growing across the viewer, and it is in ch so the wrap lands in the same
   place whatever language is on. Aligned to the top of the pill rather than
   centred on it, so the first line reads as a caption to the name. */
.scan-note {
  align-self: flex-start;
  max-width: 30ch;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.625rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--text-3);
  pointer-events: none;
}
@media (max-width: 900px) {
  .scan-note { display: none; }        /* the viewer is small enough already */
}
.model-tabs .pill { padding: 9px 16px; font-size: 0.6875rem; }

/* explode slider */
.slider-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px 9px 14px;
  background: rgba(12, 14, 16, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-2);
  border-radius: 2px;
}
.slider-box label {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.slider-box output {
  font-family: var(--mono);
  font-size: 0.625rem;
  color: var(--accent);
  min-width: 34px;
  text-align: end;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 148px;
  height: 18px;
  background: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--line-3);
  border-radius: 2px;
}
input[type="range"]::-moz-range-track {
  height: 2px;
  background: var(--line-3);
  border-radius: 2px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--accent);
  border: 0;
  transition: transform 0.15s var(--ease);
}
input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 0;
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.25); }

/* hover readout */
.readout {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 74px;
  transform: translateX(-50%);
  padding: 7px 14px;
  background: rgba(12, 14, 16, 0.9);
  border: 1px solid var(--accent-line);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s var(--ease);
}
.readout.is-on { opacity: 1; }

/* loading */
.stage__loading {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  background: var(--bg);
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.stage__loading[hidden] { display: grid; opacity: 0; visibility: hidden; }
.stage__loading .bar {
  width: 172px; height: 2px;
  background: var(--line-2);
  overflow: hidden;
}
.stage__loading .bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.2s linear;
}
.stage__loading p {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---------------------------------------------------------------- sidebar */
.vpanel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-2);
  border-inline-start: 1px solid var(--line);
}
.vpanel__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Deliberately NOT overscroll-behavior: contain. The stage is a full viewport
     tall and the canvas takes the wheel for zoom, so this list is the only
     large surface a wheel can act on; containing it would leave the build
     section below the stage reachable by the header strip alone. Reaching the
     end of the options and carrying on into the page is the gesture people
     already have. */
  padding: 24px 22px 8px;
}
.vpanel__scroll::-webkit-scrollbar { width: 8px; }
.vpanel__scroll::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 4px;
}

.vgroup { padding-block: 20px; border-bottom: 1px solid var(--line); }
.vgroup:first-child { padding-top: 0; }
.vgroup__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 15px;
}
.vgroup__title b { color: var(--text); font-weight: 500; letter-spacing: 0.08em; }

/* swatches */
.swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.swatch {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 2px;
  border: 1px solid var(--line-2);
  cursor: pointer;
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease);
}
.swatch:hover { transform: translateY(-2px); border-color: var(--line-3); }
.swatch.is-on { border-color: var(--accent); }
.swatch.is-on::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid var(--accent-line);
  border-radius: 3px;
}

/* option chips */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  padding: 8px 13px;
  white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--line-3); }
.chip.is-on {
  color: var(--accent);
  border-color: var(--accent-line);
  background: rgba(232, 180, 74, 0.08);
}
.chip.is-recommended:not(.is-on) {
  border-color: var(--accent-line);
  box-shadow: inset 0 0 0 1px rgba(232, 180, 74, 0.12);
}
.size-chips { margin-bottom: 18px; }
.size-measurements-title {
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Measurement-led helmet sizing. These fields live in the narrow configurator
   rail, so each keeps its unit next to the label and stacks cleanly on phones. */
.size-fields { display: grid; gap: 13px; }
.size-measurement { display: grid; gap: 7px; }
.size-measurement__label {
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.size-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.size-field { display: grid; gap: 7px; }
.size-field > span {
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.size-field input {
  width: 100%;
  min-width: 0;
  padding: 10px 11px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  font: 0.8125rem var(--mono);
  outline: none;
}
.size-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-line); }
.size-field input:user-invalid { border-color: var(--danger); }
.size-result {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.size-result span {
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.size-result b { font-size: 0.8125rem; font-weight: 500; color: var(--text-2); }
.size-result.is-ready { border-color: var(--accent-line); background: rgba(232, 180, 74, 0.06); }
.size-result.is-ready b { color: var(--accent); }
.size-result.is-review { border-color: color-mix(in srgb, var(--danger), transparent 55%); }
.size-result.is-review b { color: var(--danger); }
.size-guide { margin-top: 10px; font-size: 0.6875rem; line-height: 1.65; color: var(--text-3); }

/* part list */
.partlist { display: grid; gap: 3px; }
.partlist__group {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 6px 0 4px;
}
.partlist__group:first-child { margin-top: 0; }

.part {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: 0.8125rem;
  color: var(--text-2);
  text-align: start;
  cursor: pointer;
  transition: background 0.16s var(--ease), color 0.16s var(--ease),
              border-color 0.16s var(--ease);
}
.part:hover { background: var(--surface); color: var(--text); }
.part.is-active {
  color: var(--accent);
  border-color: var(--accent-line);
  background: rgba(232, 180, 74, 0.07);
}
.part.is-off { color: var(--text-3); opacity: 0.55; }
.part.is-off .part__name { text-decoration: line-through; }

.part__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.part__tris {
  font-family: var(--mono);
  font-size: 0.5625rem;
  color: var(--text-3);
  letter-spacing: 0.05em;
}
.part__eye {
  width: 22px; height: 22px;
  display: grid;
  place-content: center;
  border-radius: 2px;
  color: var(--text-3);
  flex: none;
}
.part__eye:hover { background: var(--surface-2); color: var(--text); }
.part__eye svg { width: 13px; height: 13px; }

/* footer actions */
/* The foot used to hold the whole summary and took well over half the panel,
   which left the options it sits under with about a third of the height they
   needed. It is now one line, and the rest is a section below the stage. */
.vpanel__foot {
  padding: 12px 22px;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}
.running {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
}
.running i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.running b {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--accent);
}
.running::after {
  content: "↓";
  color: var(--text-3);
  font-size: 0.75rem;
}
.running:hover i, .running:hover::after { color: var(--text-2); }

/* An order that cannot be placed yet. Not .is-disabled, which turns off
   pointer events site-wide: this one stays clickable so that pressing it can
   take you to the measurement it is waiting for. Greyed, but not mute. */
.btn.is-blocked {
  opacity: 0.42;
  cursor: not-allowed;
}
.btn.is-blocked:hover { opacity: 0.5; }
.order-block {
  margin: 10px 0 0;
  font-size: 0.6875rem;
  line-height: 1.6;
  color: var(--accent);
}

/* ------------------------------------------------------------ the build

   Below the stage rather than beside it: the specification, how the price was
   arrived at, and the two ways out. Three columns on a wide screen, stacked on
   anything narrower. */
.checkout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 34px;
  align-items: start;
}
.checkout__label {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.checkout__spec {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 2;
  color: var(--text-2);
}
.checkout__spec b { color: var(--text); }
.checkout__price .sum-price { margin-top: 0; padding-top: 0; border-top: 0; }
.checkout__price .sum-price i { font-size: 0.75rem; }
.checkout__price .sum-price b { font-size: 0.8125rem; }

@media (max-width: 900px) {
  .checkout__grid { grid-template-columns: 1fr; gap: 28px; }
}
/* ------------------------------------------------------------ mode tabs */
.vtabs {
  display: flex;
  flex: none;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.vtab {
  flex: 1;
  padding: 15px 10px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
              background 0.2s var(--ease);
}
.vtab:hover { color: var(--text-2); background: rgba(255, 255, 255, 0.02); }
.vtab.is-on { color: var(--accent); border-bottom-color: var(--accent); }

/* ------------------------------------------------------------- modules */
.modlist { display: grid; gap: 6px; }

.mod {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: start;
  gap: 11px;
  padding: 12px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.mod:hover { border-color: var(--line-3); }
.mod.is-on { border-color: var(--accent-line); background: rgba(232, 180, 74, 0.06); }
.mod.is-locked { cursor: default; opacity: 0.82; }
.mod.is-locked:hover { border-color: var(--accent-line); }

.mod__check {
  width: 18px; height: 18px;
  margin-top: 1px;
  display: grid;
  place-content: center;
  border: 1px solid var(--line-3);
  border-radius: 2px;
  font-size: 0.6875rem;
  color: var(--bg);
  background: transparent;
}
.mod.is-on .mod__check { background: var(--accent); border-color: var(--accent); }
.mod.is-locked .mod__check { background: none; border-color: var(--accent-line); color: var(--accent); }

.mod__body { display: grid; gap: 4px; min-width: 0; }
.mod__name { font-size: 0.875rem; color: var(--text); }
.mod.is-on .mod__name { color: var(--text); }
.mod__blurb { font-size: 0.75rem; line-height: 1.5; color: var(--text-3); }

.mod__meta {
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
  margin-top: 3px;
}
.mod.is-locked .mod__meta { color: var(--accent); }

/* Ruled out by the selected variant, not by the wearer: read as unavailable
   rather than as "required", so it is not confused with the locked frames. */
.mod.is-blocked { opacity: 0.5; border-color: var(--line); }
.mod.is-blocked:hover { border-color: var(--line); }
.mod.is-blocked .mod__check,
.mod.is-blocked .mod__meta { color: var(--text-3); border-color: var(--line-2); background: none; }
.mod.is-blocked .mod__name { color: var(--text-2); }

/* Parts-list price on each system row, with the part count under it. */
.mod__meta { display: grid; gap: 3px; justify-items: end; text-align: end; }
.mod__price {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent);
  white-space: nowrap;
}
.mod.is-blocked .mod__price { color: var(--text-3); }
.mod__count { font-size: 0.5625rem; letter-spacing: 0.14em; }
.mod__pricenote {
  font-family: var(--mono);
  font-size: 0.625rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.chip b { font-family: var(--mono); font-weight: 500; color: var(--accent); margin-inline-start: 6px; }
.chip.is-on b { color: inherit; }

/* Totals under the build summary. */
.sum-price {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.sum-price > span { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.sum-price i { font-style: normal; font-size: 0.6875rem; color: var(--text-3); }
.sum-price b { font-family: var(--mono); font-size: 0.75rem; color: var(--text-2); }

/* The working is quiet; the price is not. There is one number here that
   matters, and it should be the only one that looks like a price. */
.sum-price__total {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.sum-price__total i {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}
.sum-price__total b { font-size: 1.0625rem; color: var(--accent); }
/* The custom-finish charge, stated in the Paint tab where the choice is made. */
.paint-fee {
  display: grid;
  gap: 4px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.paint-fee.is-on { border-color: var(--accent-line); background: rgba(232, 180, 74, 0.06); }
.paint-fee b {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.paint-fee.is-on b { color: var(--accent); }
.paint-fee span { font-size: 0.75rem; line-height: 1.55; color: var(--text-3); }

.sum-note {
  display: block;
  margin-top: 8px;
  font-size: 0.625rem;
  line-height: 1.6;
  color: var(--text-3);
}

/* --------------------------------------------------------------- paint */
.swatch--sm { width: 30px; height: 30px; }

.swatch--camo {
  width: 46px; height: 30px;
  background-size: cover;
  background-position: center;
  image-rendering: auto;
}

.swatch-label {
  align-self: center;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

.custom-color {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
}
.custom-color input[type="color"] {
  width: 40px; height: 30px;
  padding: 0;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  cursor: pointer;
}
.custom-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.custom-color input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 1px; }

.toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
}
.toggle input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.toggle:hover { color: var(--text-2); }

/* colour chip on a paintable part row */
.part__chip {
  width: 17px; height: 17px;
  flex: none;
  border-radius: 2px;
  border: 1px solid var(--line-2);
  background-size: cover;
  background-position: center;
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .stage {
    grid-template-columns: 1fr;
    height: auto;
  }
  .stage__view { height: 62svh; min-height: 380px; }
  .vpanel { border-inline-start: 0; border-top: 1px solid var(--line); }
  /* extra bottom clearance so the sticky action bar never sits on top of
     the last option group */
  .vpanel__scroll { max-height: none; overflow: visible; padding: 22px var(--pad) 132px; }
  .vpanel__foot {
    padding: 16px var(--pad) calc(16px + env(safe-area-inset-bottom, 0px));
    position: sticky;
    bottom: 0;
    box-shadow: 0 -18px 32px -14px rgba(0, 0, 0, 0.85);
  }
}

.stage__loading-note {
  max-width: 34ch;
  margin-top: 10px;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-3);
  text-align: center;
}
.stage__loading-note a { color: var(--accent); }

@media (max-width: 560px) {
  /* The four HUD corners were laid out for a desktop stage; at phone width the
     model name ran into the camera presets and the explode slider ran into the
     tool buttons. Stack them instead: name on top, presets under it, and the
     two bottom groups sharing one row. */
  .hud--tl, .hud--tr, .hud--bl, .hud--br { inset: auto; }
  .hud--tl { top: 10px; left: 10px; right: 10px; }
  .hud--tr { top: 52px; left: 10px; right: 10px; overflow-x: auto; }
  .hud--tr .pill-group { flex-wrap: nowrap; }
  .hud--bl { bottom: 58px; left: 10px; right: 10px; }
  .hud--bl .slider-box { width: 100%; }
  .hud--br { bottom: 10px; left: 10px; right: 10px; flex-wrap: wrap; }
  .hud--br .pill span { display: none; }
  input[type="range"] { width: auto; flex: 1; }
  .slider-box { padding: 8px 12px; gap: 8px; }
  .model-tabs .pill { padding: 8px 11px; font-size: 0.5625rem; }
}