:root {
  --bg: #ffffff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --faint: #86868b;
  --panel: #f5f5f7;
  --stage: #f5f5f7;
  --card: #ffffff;
  --border: #d2d2d7;
  --hairline: #e8e8ed;
  --blue: #0071e3;
  --blue-hover: #0077ed;
  --blue-text: #0066cc;
  --orange: #bf4800;
  --green: #1d8a3a;
  --red: #e30000;
  --glass: rgba(255, 255, 255, 0.72);
  --nav: rgba(251, 251, 253, 0.8);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  --nav-h: 48px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --text: #f5f5f7;
    --muted: #a1a1a6;
    --faint: #86868b;
    --panel: #1d1d1f;
    --stage: #111113;
    --card: #000000;
    --border: #424245;
    --hairline: #2c2c2e;
    --blue: #0071e3;
    --blue-hover: #0077ed;
    --blue-text: #2997ff;
    --orange: #ff9f0a;
    --green: #30d158;
    --red: #ff453a;
    --glass: rgba(29, 29, 31, 0.72);
    --nav: rgba(22, 22, 23, 0.8);
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* Navigation */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--nav-h);
  background: var(--nav);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}
.nav:has(+ .buy) { border-bottom: 0; }
.nav-inner {
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Sinter logo: the site's mark, cropped the same way as sinter.systems */
.logo { display: flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; font-size: 21px; line-height: 1; letter-spacing: -0.04em; }
.logo b { font-weight: 400; }
.logo-mark { position: relative; display: block; width: 24px; height: 24px; overflow: hidden; flex: 0 0 24px; }
.logo-mark img { position: absolute; display: block; width: 29px; height: 26.7px; max-width: none; left: -2.8px; top: -2.2px; }
.nav-note { font-size: 12px; color: var(--muted); letter-spacing: -0.01em; }

/* Layout: on a desktop the page is one window high, header included, and never scrolls: the preview on the
   left stays put and the details on the right scroll on their own. Narrow screens stack the two and the page
   scrolls as usual (see the 834px query). */
.buy {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  grid-template-rows: minmax(0, 1fr);
  gap: 48px;
  height: calc(100vh - var(--nav-h));
  height: calc(100dvh - var(--nav-h));
}
.stage {
  position: relative;
  min-height: 0;
  padding: 16px 0 24px;
}
.viewer {
  position: relative;
  height: 100%;
  border-radius: 28px;
  background: var(--stage);
  overflow: hidden;
  isolation: isolate;
}
#view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
  outline: none;
  /* A drag orbits the view: it is never dragged or selected as an image (Safari), nor a long-press menu. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
#view:active { cursor: grabbing; }
/* Nor does a drag or double-click on the stage's controls select the page's text. */
.viewer { user-select: none; -webkit-user-select: none; }
.glass {
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--shadow);
}

/* Blocking states with nothing else on the stage: centered text. Everything else (loading, preparing, or
   an error over a model still on screen): a small pill in the bottom-left corner, leaving the view clear. */
.stage-status {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  pointer-events: none;
}
.stage-status:not(.pill) { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.stage-status p { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; max-width: 26em; }
.stage-status .stage-sub { margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--muted); }
.stage-status .stage-sub:empty { display: none; }
.stage-status .meter { display: none; }
.stage-status.pill {
  inset: auto auto 16px 16px;
  max-width: calc(100% - 32px);
  flex-direction: row;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border-radius: 980px;
  text-align: left;
  white-space: nowrap;
}
.stage-status.pill p { font-size: 12px; font-weight: 500; line-height: 1.33; overflow: hidden; text-overflow: ellipsis; }
.stage-status.pill .stage-sub { margin: 0; font-weight: 400; }
.stage-status.pill.busy .meter {
  display: block;
  position: relative;
  flex: none;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--blue) 18%, transparent);
  overflow: hidden;
}
.meter i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
  border-radius: 2px;
  background: var(--blue);
  animation: sweep 1.2s ease-in-out infinite;
}
@keyframes sweep { 0% { left: -45%; } 100% { left: 100%; } }

/* The layers' legend: one chip per kind of line, pressed to show or hide it. */
.legend {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 72px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: none;
}
.chip {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 9px;
  border: 0;
  border-radius: 980px;
  font-size: 12px;
  line-height: 1.33;
  letter-spacing: -0.01em;
  color: var(--text);
}
.chip .swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.chip[aria-pressed="false"] { color: var(--faint); }
.chip[aria-pressed="false"] .swatch { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--faint); }
.chip:focus-visible, .play:focus-visible { outline: 4px solid rgba(0, 113, 227, 0.4); outline-offset: 1px; }

.view-tools { position: absolute; top: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; }
.icon { width: 36px; height: 36px; border: 0; border-radius: 50%; display: grid; place-items: center; padding: 0; color: var(--text); }
.icon svg { width: 18px; height: 18px; }
/* Toggles (layers, see-through): pressed reads blue. */
.icon[aria-pressed="true"] { color: var(--blue-text); }
.icon[aria-pressed="false"] { color: var(--muted); }
.icon:focus-visible { outline: 4px solid rgba(0, 113, 227, 0.4); outline-offset: 1px; }
.stage-badge {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  margin: 0;
  padding: 7px 14px;
  border-radius: 980px;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
}
/* With the layer slider at the foot of the stage, notes sit above it. */
.viewer.layered .stage-badge, .viewer.layered .stage-status.pill { bottom: 80px; }

/* Layer slider: play, the layer, its number and height. */
.scrubber {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 32px));
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px 8px 8px;
  border-radius: 980px;
}
.play {
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  display: grid;
  place-items: center;
  padding: 0;
}
.play svg { width: 16px; height: 16px; }
.play .i-pause, .play.playing .i-play { display: none; }
.play.playing .i-pause { display: block; }
.scrubber output {
  flex: none;
  min-width: 10.5em;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
input[type="range"] {
  flex: 1;
  min-width: 0;
  height: 28px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  --fill: 100%;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--blue) var(--fill), var(--border) var(--fill));
}
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--border); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--blue); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.5px 4px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0.5px 4px rgba(0, 0, 0, 0.3); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.4); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.4); }

/* Details column: scrolls by itself. The side padding keeps focus rings clear of its edges. No visible
   scrollbar (the owner's call): one appearing when a section opens would narrow the column and reflow
   everything in it. Never sideways. */
.details {
  min-width: 0;
  min-height: 0;
  margin: 0 -10px;
  padding: 24px 10px 40px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.details::-webkit-scrollbar { display: none; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--orange); font-weight: 400; letter-spacing: -0.016em; }
.eyebrow .quote-id { color: var(--muted); }
h1 {
  margin: 4px 0 0;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.lede { margin: 12px 0 0; font-size: 17px; color: var(--text); }
.lede .muted { color: var(--muted); }

.block { padding-top: 52px; }
.block h2 { margin: 0 0 20px; font-size: 24px; line-height: 1.17; font-weight: 600; letter-spacing: 0.009em; }
.block h2 span { color: var(--muted); }
.note { margin: 14px 0 0; font-size: 14px; line-height: 1.43; color: var(--muted); letter-spacing: -0.016em; }
.note a { color: var(--blue-text); }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { background: var(--panel); border-radius: 18px; padding: 16px 18px 18px; min-width: 0; }
.tile.wide { grid-column: 1 / -1; }
.tile .k { display: block; font-size: 12px; color: var(--muted); letter-spacing: -0.01em; }
.tile .v { display: block; margin-top: 2px; font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: 0.012em; overflow-wrap: anywhere; }
.tile .v small { font-size: 14px; font-weight: 400; color: var(--muted); letter-spacing: -0.016em; }

.rows { border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.row { display: flex; justify-content: space-between; gap: 18px; padding: 14px 18px; border-top: 1px solid var(--hairline); }
.row:first-child { border-top: 0; }
.row .k { flex: none; color: var(--muted); font-size: 15px; letter-spacing: -0.01em; }
.row .v { text-align: right; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.row .v small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }

.callout {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--panel);
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: -0.016em;
}
.callout strong { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 4px; }
.callout strong::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex: none; }
.callout.ok strong::before { background: var(--green); }
.callout.bad strong::before { background: var(--red); }
.callout p { margin: 0; color: var(--muted); }

/* Failed orders: blocking checks and the features behind them */
.problems { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.problem { padding: 16px 18px; border-radius: 18px; background: var(--panel); font-size: 14px; line-height: 1.43; letter-spacing: -0.016em; }
.problem strong { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.problem strong::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; }
.problem strong span { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.problem p { margin: 4px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.features { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 10px;
  margin: 0 -10px;
  width: calc(100% + 20px);
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 13px;
  line-height: 1.38;
  text-align: left;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.feature:hover { background: var(--hairline); }
.feature:focus-visible { outline: 4px solid rgba(0, 113, 227, 0.4); outline-offset: 0; }
.feature[aria-pressed="true"] { background: var(--card); box-shadow: 0 0 0 1px var(--red); }
.feature .mark { width: 12px; height: 12px; margin-top: 2px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--red); flex: none; }
.feature[aria-pressed="true"] .mark { background: var(--red); }
.feature .xyz { color: var(--muted); white-space: nowrap; }
.features .more { padding: 7px 0 0 22px; font-size: 13px; color: var(--muted); }
.secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 34px;
  margin: 18px auto 0;  /* centred in its block, as the .actions rows are */
  padding: 6px 16px;
  border: 1px solid var(--blue);
  border-radius: 980px;
  background: none;
  color: var(--blue-text);
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.secondary:hover { background: rgba(0, 113, 227, 0.06); }
.secondary:focus-visible { outline: 4px solid rgba(0, 113, 227, 0.4); outline-offset: 2px; }
.secondary:disabled { border-color: var(--border); color: var(--muted); background: none; cursor: not-allowed; }
/* A row of buttons, e.g. a confirmation's change-or-keep pair under its question. */
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.actions .secondary { margin: 0; }
.actions .link { font-size: 14px; }

/* Delivery address and courier status */
.delivery-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.field { grid-column: span 2; display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.field.wide { grid-column: span 4; }
.field.short { grid-column: span 1; }
.field small { color: var(--faint); }
.field input {
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  font-size: 16px;
}
.field input:focus-visible { outline: 4px solid rgba(0, 113, 227, 0.4); outline-offset: 1px; }
.field input:disabled { color: var(--muted); }
.field select {
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}
.field select:focus-visible { outline: 4px solid rgba(0, 113, 227, 0.4); outline-offset: 1px; }
.field select:disabled { color: var(--muted); }

/* Advanced options: print settings */
.advanced summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; }
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary h2 { margin: 0; }
.advanced summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin: 0 4px 6px 0;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
}
.advanced[open] summary::after { margin-bottom: -4px; transform: rotate(-135deg); }
.advanced summary:focus-visible { outline: 4px solid rgba(0, 113, 227, 0.4); outline-offset: 4px; border-radius: 8px; }
.settings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.settings .field { align-content: start; }
/* A dropdown's menu in the last column opens leftwards, inside the column. */
.settings > .field:nth-child(4n) .dropdown-menu { right: 0; left: auto; }
/* Orientation: a button the size of the other fields; pressed, the face is picked on the model. */
.face-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}
.face-button span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.face-button .face-action { flex: none; color: var(--blue-text); font-size: 14px; }
.face-button:disabled { color: var(--muted); cursor: not-allowed; }
.face-button:disabled .face-action { color: var(--muted); }
.face-button:focus-visible { outline: 4px solid rgba(0, 113, 227, 0.4); outline-offset: 1px; }
.face-auto { justify-self: start; font-size: 13px; }
#view.picking { cursor: crosshair; }
/* Brought on screen to pick a face (phones): clear of the sticky header. */
.viewer { scroll-margin-top: calc(var(--nav-h, 64px) + 12px); }
#view.picking:active { cursor: grabbing; }
.confirm { margin-top: 18px; }
/* Street suggestions under the street field */
.street-field { grid-column: span 4; position: relative; }
.suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 5;
  margin: 0;
  padding: 4px;
  max-height: 240px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.suggestions li { padding: 8px 10px; border-radius: 6px; font-size: 14px; line-height: 1.33; cursor: pointer; }
.suggestions li:hover { background: var(--panel); }
.suggestions li[aria-selected="true"] { background: var(--blue); color: #fff; }
.suggestions li.attribution { padding: 4px 10px 2px; color: var(--muted); font-size: 12px; cursor: default; }
.suggestions li.attribution:hover { background: none; }
.delivery-form .secondary { grid-column: span 4; justify-self: center; margin-top: 4px; }
.link { padding: 0; border: 0; background: none; color: var(--blue-text); font-size: inherit; }
.link:disabled { color: var(--muted); cursor: not-allowed; }
a.track { margin-top: 14px; text-decoration: none; }
@media (max-width: 480px) {
  .field, .field.short { grid-column: span 4; }
}

/* Lead-time cards */
.options { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; }
.option { position: relative; display: block; }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option .card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 84px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
  transition: border-color 0.15s;
}
.option:hover .card { border-color: var(--faint); }
.option input:checked + .card { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.option input:focus-visible + .card { outline: 4px solid rgba(0, 113, 227, 0.4); outline-offset: 1px; }
.option input:disabled + .card { cursor: not-allowed; opacity: 0.45; border-color: var(--border); box-shadow: none; }
.material input:checked:disabled + .card, .color input:checked:disabled + .card { opacity: 0.6; border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.card .name { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.022em; }
.card .name .off { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: -0.01em; }
.card .when { display: block; margin-top: 2px; font-size: 12px; line-height: 1.33; color: var(--muted); letter-spacing: -0.01em; }
.card .price { flex: none; font-size: 17px; font-weight: 600; text-align: right; letter-spacing: -0.022em; font-variant-numeric: tabular-nums; }

/* Material cards */
.materials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.material .card { display: block; height: 100%; min-height: 0; padding: 12px 14px; }
.material .card .name { font-size: 15px; letter-spacing: -0.01em; }
@media (max-width: 480px) { .materials { grid-template-columns: 1fr 1fr; } }
/* Custom: the material name, under the cards */
.custom-material, .custom-color { margin-top: 12px; }

/* Colour cards: a swatch and the name */
.colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.color .card { display: flex; align-items: center; justify-content: flex-start; gap: 10px; height: 100%; min-height: 0; padding: 12px 14px; }
.color .card .name { font-size: 15px; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.color .swatch { flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
@media (max-width: 480px) { .colors { grid-template-columns: 1fr 1fr; } }

/* Quantity stepper */
.quantity { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 10px 10px 18px; border: 1px solid var(--border); border-radius: 12px; }
.quantity label { font-size: 17px; font-weight: 600; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--panel);
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
  padding: 0;
}
.stepper button:hover:not(:disabled) { background: var(--hairline); }
.stepper button:disabled { color: var(--faint); opacity: 0.5; cursor: not-allowed; }
.stepper button:focus-visible, .stepper input:focus-visible { outline: 4px solid rgba(0, 113, 227, 0.4); outline-offset: 1px; }
.stepper input {
  width: 3.4em;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 19px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.stepper input:disabled { color: var(--muted); }
.pending { color: var(--blue-text); }

/* Summary */
.summary { background: var(--panel); border-radius: 18px; padding: 24px 22px 22px; }
.total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.total .k { font-size: 17px; font-weight: 600; }
.total .v { font-size: 28px; font-weight: 600; letter-spacing: 0.007em; font-variant-numeric: tabular-nums; }
.total .v .muted { display: block; text-align: right; font-size: 17px; color: var(--muted); }
.total .v small { display: block; text-align: right; font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: -0.01em; }
.primary {
  display: block;
  width: 100%;
  margin-top: 22px;
  padding: 10px 22px;
  border: 0;
  border-radius: 980px;
  background: var(--blue);
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;  /* also on links (Sign in to continue) */
  box-sizing: border-box;
}
.primary:hover:not(:disabled) { background: var(--blue-hover); }
.primary:focus-visible { outline: 4px solid rgba(0, 113, 227, 0.4); outline-offset: 2px; }
.primary:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; }
.error { margin: 12px 0 0; font-size: 14px; color: var(--red); }
/* A note with a pulse (payment being checked) */
.checking { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font-size: 12px; line-height: 1.33; color: var(--muted); letter-spacing: -0.01em; }
.checking .pulse { width: 6px; height: 6px; margin-top: 5px; border-radius: 50%; background: var(--blue); flex: none; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
/* Phones: a 44px tap area. */
@media (max-width: 480px) {
  .secondary, .primary { min-height: 44px; }
  .secondary { padding: 10px 18px; }
  .stepper button, .icon { width: 44px; height: 44px; }
  .stepper input { height: 44px; }
  .actions .link, .note .link { display: inline-flex; align-items: center; min-height: 44px; }
}
.hold { margin: 12px 0 0; font-size: 14px; line-height: 1.43; color: var(--muted); text-align: center; letter-spacing: -0.016em; }

/* Production */
.status-line { margin: 0 0 16px; font-size: 15px; color: var(--muted); }
.progress { height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.progress div { height: 100%; background: var(--blue); border-radius: 2px; transition: width 0.6s ease; }
.progress.big { height: 6px; margin-bottom: 18px; }
/* Quote being checked and priced: painted every frame from quote.js, so no width transition */
.quote-progress { display: flex; align-items: center; gap: 12px; }
.quote-progress .progress { flex: 1; margin: 0; }
.quote-progress .progress div { transition: none; }
.progress-stage { flex: none; min-width: 9.5em; font-size: 13px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jobs .row { align-items: center; }
.jobs .row .k { color: var(--text); font-weight: 600; flex: none; }
.jobs .meter { flex: 1; display: grid; gap: 6px; align-content: center; text-align: right; }
.jobs .meter span { font-size: 12px; color: var(--muted); }

.skeleton { display: grid; gap: 14px; padding-top: 8px; }
.skeleton span { display: block; height: 22px; border-radius: 8px; background: var(--panel); }
.skeleton span:first-child { width: 30%; height: 14px; }
.skeleton span:nth-child(2) { width: 80%; height: 40px; }
.skeleton span:nth-child(3) { width: 60%; }

#toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 20;
  transform: translate(-50%, 20px);
  max-width: calc(100% - 32px);
  padding: 12px 20px;
  border-radius: 980px;
  background: var(--text);
  color: var(--bg);
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.error { background: var(--red); color: #fff; }
/* Turnstile, for a guest requote that is processed again (see challengeToken() in quote.js) */
.challenge-sheet {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 21;
  transform: translateX(-50%);
  display: grid;
  gap: 10px;
  justify-items: center;
  max-width: calc(100% - 32px);
  padding: 16px 20px;
  border-radius: 22px;
  font-size: 14px;
}
.challenge-sheet[hidden] { display: none; }
.challenge-sheet p { margin: 0; }
#challenge-widget { min-height: 65px; }

/* Desktop: a tighter column, so a typical quote reads in one window with little or no scrolling. Controls
   stay at least 40px tall (phones keep 44px, below). */
@media (min-width: 835px) {
  .details { padding-top: 20px; }
  h1 { font-size: 30px; }
  .lede { margin-top: 6px; font-size: 15px; }
  .block { padding-top: 26px; }
  .block h2, .advanced summary h2 { margin-bottom: 10px; font-size: 19px; }
  .note { margin-top: 8px; font-size: 13px; }
  .tiles { gap: 8px; }
  .tile { padding: 9px 14px 10px; border-radius: 14px; }
  .tile .v { font-size: 16px; }
  .materials, .colors, .options { gap: 8px; }
  .material .card, .color .card { min-height: 40px; padding: 8px 12px; }
  .option .card { min-height: 56px; padding: 10px 14px; }
  .card .name { font-size: 15px; }
  .card .price { font-size: 15px; }
  .quantity { padding: 4px 4px 4px 14px; }
  .quantity label { font-size: 15px; }
  .settings { margin-top: 12px; gap: 8px; }
  .delivery-form { gap: 8px; }
  .field input, .field select { padding: 8px 10px; }  /* 16px text: no zoom on focus on tablets */
  .callout, .problem { padding: 12px 14px; }
  .problems { gap: 8px; }
  .summary { padding: 16px 18px; }
  .total .v { font-size: 24px; }
  .primary { margin-top: 14px; }
  .secondary { margin-top: 12px; }
  .status-line { margin-bottom: 10px; }
}

@media (max-width: 1068px) {
  .buy { grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; padding: 0 22px; }
  .nav-inner { padding: 0 22px; }
}

@media (max-width: 834px) {
  .buy { grid-template-columns: 1fr; grid-template-rows: none; gap: 0; height: auto; padding: 0 16px; }
  .nav-inner { padding: 0 16px; }
  .stage { height: 55vh; height: 55svh; min-height: 320px; padding: 12px 0 0; }
  .viewer { border-radius: 22px; }
  .details { margin: 0; padding: 28px 0 120px; overflow: visible; }
  h1 { font-size: 32px; }
  .stage-badge { bottom: 12px; }
  .stage-status.pill { left: 12px; bottom: 12px; }
  .viewer.layered .stage-badge, .viewer.layered .stage-status.pill { bottom: 72px; }
  .view-tools { top: 12px; right: 12px; }
  .legend { top: 12px; left: 12px; right: 60px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .legend::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .scrubber { bottom: 12px; gap: 10px; padding-right: 14px; }
  .scrubber output { min-width: 0; }
  .scrubber output .z { display: none; }
}

/* Phones: the slider's controls get a 44px tap area; the legend gives the view its room. */
@media (max-width: 480px) {
  .play { width: 44px; height: 44px; }
  input[type="range"] { height: 44px; }
  .legend { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .meter i { animation: none; left: 27%; }
  .checking .pulse { animation: none; opacity: 0.6; }
  * { transition: none !important; }
}

/* The Sinter mark is black; show it white on the dark theme. */
@media (prefers-color-scheme: dark) {
  .logo-mark img { filter: invert(1); }
}