/* the intro window: a document, wide, the two vehicles side by side */
.win--intro { width: 760px; }
.doc .intro__lede { margin: 0 0 var(--s7); }
.vehicles { margin-top: var(--s4); }
.vehicles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin: 0 0 var(--s5); }
.vehicle { position: relative; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); background: var(--paper); border: var(--hairline); box-shadow: var(--shadow-hard); cursor: pointer; text-align: left; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.vehicle:active { background: var(--wash); }
.vehicle.is-picked { box-shadow: var(--shadow-hard), 0 0 0 3px var(--paper), 0 0 0 5px var(--amber); }
.vehicle canvas { display: block; width: 100%; aspect-ratio: 1; height: auto; background: var(--wash); background-image: var(--stipple); border: var(--hairline); }
.vehicle__name { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.vehicle__name i { font-style: normal; color: var(--ink3-text); font-size: var(--fs-sys); }
.vehicle.is-picked .vehicle__name i { color: var(--ink); }
.vehicle dl { display: grid; grid-template-columns: 64px 1fr; gap: 2px var(--s2); margin: 0; font-family: var(--type-mono); font-size: var(--fs-data); letter-spacing: .05em; text-transform: uppercase; }
.vehicle dt { color: var(--ink3-text); }
.vehicle dd { margin: 0; }
.clockrow { display: flex; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s4); }
.clockrow > span:first-child { line-height: 16px; }
.slider-wrap { flex: 1; display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.clockrow > span:first-child { color: var(--ink3-text); flex: none; }
.clockrow__val { flex: none; width: 48px; font-weight: 400; font-family: var(--type-mono); font-size: 14px; letter-spacing: .05em; text-align: right; }
/* the slider: a dithered track, an amber thumb, no easing. The thumb snaps to the four stops. */
.slider { width: 100%; display: block; -webkit-appearance: none; appearance: none; height: 16px; margin: 0; background: var(--paper); background-image: var(--d25); background-size: var(--dither-size); border: var(--hairline); cursor: pointer; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 28px; background: var(--amber); border: var(--hairline); box-shadow: var(--shadow-hard); border-radius: 0; }
.slider::-moz-range-thumb { width: 14px; height: 26px; background: var(--amber); border: var(--hairline); box-shadow: var(--shadow-hard); border-radius: 0; }
.slider::-moz-range-track { background: transparent; }
.clockrow__ticks { display: flex; justify-content: space-between; padding: 0 8px; }
.tick { width: 0; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 2px 0; border: 0; background: none; line-height: 1.4; color: var(--ink3-text); white-space: nowrap; overflow: visible; cursor: pointer; }
.tick b { font-weight: 400; font-family: var(--type-mono); font-size: 12px; letter-spacing: .05em; }
.tick span { font-size: 9px; }
.tick.is-picked { color: var(--ink); }
.tick:first-child { align-items: flex-start; } .tick:last-child { align-items: flex-end; }
.tick > * { display: block; }
@media (max-width: 767px) {
  .vehicles { grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .tick span { display: none; }
  .win--intro .win__body { max-height: calc(100vh - 120px); overflow-y: auto; }
}

/* the name, as on the share card: the machine voice huge, the serif line under it */
.doc .stamp { margin: 0 0 var(--s4); display: flex; flex-direction: column; gap: var(--s1); }
.stamp__name { font-family: var(--type-bit); font-weight: 700; font-size: 72px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.stamp__sub { font-family: var(--type-doc); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -.015em; }
@media (max-width: 767px) { .stamp__name { font-size: 40px; } .stamp__sub { font-size: var(--fs-h3); line-height: var(--lh-h3); } }