/* Temuliquid deposit wizard (deposit.css)
   Styles only what deposit.js builds: one <dialog class="tdw"> that opens
   in the top layer on both pages. Every rule is scoped to .tdw, plus one
   class on <html> that stops the page scrolling underneath, so the pages
   keep their own look. Colors are the site's own (tape, ink, paper, lab,
   laser, buy green), written as rgb(). */

html.tdw-lock { overflow: hidden; }

/* ---------------------------------------------------------------- shell */

dialog.tdw {
  --tdw-tape: rgb(247 198 0);
  --tdw-tape-hi: rgb(255 214 51);
  --tdw-tape-deep: rgb(196 156 0);
  --tdw-tape-soft: rgb(255 246 204);
  --tdw-ink: rgb(0 0 0);
  --tdw-paper: rgb(255 255 255);
  --tdw-lab: rgb(243 245 246);
  --tdw-hair: rgb(221 225 229);
  --tdw-hair-dark: rgb(190 196 202);
  --tdw-graphite: rgb(59 65 72);
  --tdw-muted: rgb(94 102 112);
  --tdw-laser: rgb(255 42 26);
  --tdw-laser-text: rgb(196 22 10);
  --tdw-laser-soft: rgb(255 236 233);
  --tdw-green: rgb(11 159 91);
  --tdw-green-text: rgb(8 122 70);
  --tdw-green-soft: rgb(229 246 237);
  --tdw-orange: rgb(236 84 0);
  --tdw-orange-deep: rgb(176 58 0);
  --tdw-orange-hi: rgb(255 150 30);
  --tdw-red: rgb(214 30 12);
  --tdw-ui: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tdw-big: 'Big Shoulders Display', 'Arial Narrow', Impact, ui-sans-serif, sans-serif;

  position: fixed;
  inset: 0;
  z-index: 2147483000;
  box-sizing: border-box;
  width: min(920px, calc(100vw - 48px));
  /* As tall as the window allows, so a short Mac window keeps its buttons. */
  height: min(760px, calc(100vh - 32px));
  height: min(760px, calc(100dvh - 32px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 2px solid var(--tdw-ink);
  border-radius: 20px;
  background: var(--tdw-paper);
  color: var(--tdw-ink);
  box-shadow: 0 30px 90px -24px rgb(0 0 0 / .6);
  overflow: hidden;
  font: 400 15px/1.45 var(--tdw-ui);
  font-variant-numeric: tabular-nums;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

dialog.tdw:not([open]) { display: none; }

dialog.tdw::backdrop { background: rgb(14 12 6 / .7); }

.tdw *,
.tdw *::before,
.tdw *::after { box-sizing: border-box; }

.tdw [hidden] { display: none !important; }

.tdw p,
.tdw h2,
.tdw h3,
.tdw h4,
.tdw ul,
.tdw ol,
.tdw li,
.tdw dl,
.tdw dt,
.tdw dd {
  margin: 0;
  padding: 0;
  max-width: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-wrap: pretty;
}

.tdw ul,
.tdw ol { list-style: none; }

.tdw button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tdw button:disabled { cursor: not-allowed; }

.tdw :focus-visible {
  outline: 3px solid var(--tdw-ink);
  outline-offset: 2px;
}

.tdw .tdw-ico {
  flex: none;
  width: 16px;
  height: 16px;
}

.tdw .tdw-nb { white-space: nowrap; }

.tdw .tdw-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.tdw .tdw-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ------------------------------------------------------------ the line */

/* It wraps only for the ad strip, which takes a row of its own. */
.tdw .tdw-line {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 10px 8px 20px;
  background: var(--tdw-ink);
  color: var(--tdw-paper);
}

.tdw .tdw-line-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 2px;
}

.tdw .tdw-line-text {
  font: 600 14px/1.3 var(--tdw-ui);
}

.tdw .tdw-line-pos {
  color: var(--tdw-tape);
  font: 800 21px/1 var(--tdw-big);
  letter-spacing: .01em;
}

.tdw .tdw-line-note {
  color: rgb(255 255 255 / .72);
  font: 500 12.5px/1.3 var(--tdw-ui);
}

.tdw .tdw-skip {
  flex: none;
  min-height: 34px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--tdw-tape);
  color: var(--tdw-ink);
  font: 700 13px/1.1 var(--tdw-ui);
  white-space: nowrap;
}

.tdw .tdw-skip:hover { background: var(--tdw-tape-hi); }

.tdw .tdw-skip[aria-disabled="true"] {
  background: rgb(255 255 255 / .16);
  color: rgb(255 255 255 / .75);
  cursor: progress;
}

.tdw .tdw-line :focus-visible { outline-color: var(--tdw-tape); }

/* Watch an ad to skip the line: the loudest thing in the bar. A deep
   orange (white text stays readable on it) with a bright ring that pulses. */
.tdw .tdw-adskip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 5px 16px 5px 6px;
  border-radius: 999px;
  background: rgb(210 64 0);
  color: var(--tdw-paper);
  box-shadow: 0 0 0 2px var(--tdw-orange-hi), 0 0 14px rgb(255 120 0 / .5);
  font: 800 13.5px/1.1 var(--tdw-ui);
  text-align: left;
  white-space: nowrap;
  animation: tdw-adpulse 1.6s ease-in-out infinite;
}

.tdw .tdw-adskip:hover { background: rgb(186 54 0); }

.tdw .tdw-adskip-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tdw-paper);
  color: rgb(210 64 0);
}

.tdw .tdw-adskip-ico .tdw-ico { width: 13px; height: 13px; margin-left: 2px; }

.tdw .tdw-adskip[aria-disabled="true"] {
  background: rgb(255 255 255 / .16);
  color: rgb(255 255 255 / .75);
  box-shadow: none;
  animation: none;
  cursor: progress;
}

.tdw .tdw-adskip[aria-disabled="true"] .tdw-adskip-ico {
  background: rgb(255 255 255 / .3);
  color: var(--tdw-ink);
}

@keyframes tdw-adpulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--tdw-orange-hi), 0 0 10px rgb(255 120 0 / .35); }
  50% { box-shadow: 0 0 0 4px var(--tdw-orange-hi), 0 0 22px rgb(255 120 0 / .75); }
}

/* ---------------------------------------------------------- the prize */

.tdw .tdw-prize {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  padding: 7px 16px;
  border-top: 2px dashed rgb(255 255 255 / .7);
  border-bottom: 2px dashed rgb(255 255 255 / .7);
  background: var(--tdw-red);
  color: var(--tdw-paper);
  text-align: center;
}

.tdw .tdw-prize-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--tdw-tape);
  color: var(--tdw-ink);
  font: 800 11.5px/1.2 var(--tdw-ui);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tdw .tdw-prize-badge .tdw-ico { width: 13px; height: 13px; }

.tdw .tdw-prize-text {
  font: 900 22px/1 var(--tdw-big);
  letter-spacing: .02em;
}

.tdw .tdw-prize-name { color: var(--tdw-tape-hi); font-weight: 900; }

/* ----------------------------------------------------------- the head */

.tdw .tdw-head {
  flex: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "brand steps x";
  align-items: center;
  gap: 10px 20px;
  padding: 12px 14px 12px 22px;
  border-bottom: 1px solid var(--tdw-hair);
}

.tdw .tdw-brand {
  grid-area: brand;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}

.tdw .tdw-name {
  color: var(--tdw-ink);
  font: 900 32px/.86 var(--tdw-big);
  letter-spacing: .005em;
}

.tdw .tdw-ship {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--tdw-green-soft);
  color: var(--tdw-green-text);
  font: 700 11px/1.2 var(--tdw-ui);
  white-space: nowrap;
}

.tdw .tdw-count {
  display: none;
  grid-area: count;
  min-width: 0;
  color: var(--tdw-graphite);
  font: 600 12.5px/1.25 var(--tdw-ui);
}

.tdw .tdw-x {
  grid-area: x;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 13px 6px 10px;
  border: 2px solid var(--tdw-ink);
  border-radius: 999px;
  background: var(--tdw-paper);
  color: var(--tdw-ink);
  font: 600 14px/1 var(--tdw-ui);
}

.tdw .tdw-x:hover { background: var(--tdw-lab); }

.tdw .tdw-x .tdw-ico { width: 13px; height: 13px; }

.tdw .tdw-steps {
  grid-area: steps;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 0;
}

.tdw .tdw-stp {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--tdw-muted);
  font: 600 12px/1.15 var(--tdw-ui);
  text-align: center;
}

.tdw .tdw-stp + .tdw-stp::before {
  content: "";
  position: absolute;
  top: 12px;
  left: calc(-50% + 17px);
  right: calc(50% + 17px);
  height: 2px;
  border-radius: 2px;
  background: var(--tdw-hair);
}

.tdw .tdw-stp.is-done + .tdw-stp::before { background: var(--tdw-green); }

.tdw .tdw-stp-dot {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--tdw-lab);
  color: var(--tdw-muted);
  font: 800 14px/1 var(--tdw-big);
}

.tdw .tdw-stp-dot .tdw-ico { width: 13px; height: 13px; }

.tdw .tdw-stp-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tdw .tdw-stp.is-current { color: var(--tdw-ink); }

.tdw .tdw-stp.is-current .tdw-stp-dot {
  border-color: var(--tdw-ink);
  background: var(--tdw-tape);
  color: var(--tdw-ink);
}

.tdw .tdw-stp.is-done { color: var(--tdw-green-text); }

.tdw .tdw-stp.is-done .tdw-stp-dot {
  background: var(--tdw-green);
  color: var(--tdw-paper);
}

/* -------------------------------------------------- body, foot, buttons */

/* A size container: each step tightens up when the room it gets is short
   (see "short screens" below), whatever ate the height: a short window, the
   prize bar or a queue line that wrapped. */
.tdw .tdw-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  container: tdw-stage / size;
}

/* The bottom gap is the step's own padding, not the body's: a pinned button
   then sits on the bottom edge with nothing peeking out under it. */
.tdw .tdw-body {
  flex: 1;
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 20px 26px 0;
}

.tdw .tdw-foot {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--tdw-hair);
  background: var(--tdw-paper);
}

.tdw .tdw-hint {
  flex: 1;
  min-width: 0;
  color: var(--tdw-muted);
  font: 600 13px/1.3 var(--tdw-ui);
  text-align: right;
}

.tdw .tdw-hint.is-warn { color: var(--tdw-laser-text); }

.tdw .tdw-hint.is-total {
  color: var(--tdw-ink);
  font: 800 19px/1.1 var(--tdw-big);
  letter-spacing: .01em;
}

.tdw .tdw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 20px;
  border: 2px solid transparent;
  border-radius: 12px;
  font: 700 15px/1.15 var(--tdw-ui);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s ease, transform .08s ease;
}

.tdw .tdw-btn:active { transform: translateY(1px); }

.tdw .tdw-btn-tape {
  background: var(--tdw-tape);
  color: var(--tdw-ink);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / .16);
}

.tdw .tdw-btn-tape:hover { background: var(--tdw-tape-hi); }

.tdw .tdw-btn-ghost {
  background: var(--tdw-lab);
  color: var(--tdw-ink);
}

.tdw .tdw-btn-ghost:hover { background: var(--tdw-hair); }

.tdw .tdw-btn-ink {
  background: var(--tdw-ink);
  color: var(--tdw-paper);
}

.tdw .tdw-btn-ink:hover { background: var(--tdw-graphite); }

.tdw .tdw-btn-off,
.tdw .tdw-btn-off:disabled {
  border-color: var(--tdw-hair);
  background: var(--tdw-lab);
  color: rgb(150 156 163);
}

/* The fill is the autopilot: when it reaches the end, the wizard clicks. */
.tdw .tdw-next {
  --tdw-auto: 0%;
  min-width: 120px;
  background: linear-gradient(to right, var(--tdw-orange-hi) var(--tdw-auto), var(--tdw-tape) var(--tdw-auto));
}

.tdw .tdw-next:hover { background: var(--tdw-tape-hi); }

.tdw .tdw-next[aria-disabled="true"] {
  background: linear-gradient(to right, rgb(0 0 0 / .13) var(--tdw-auto), var(--tdw-lab) var(--tdw-auto));
  color: rgb(128 134 141);
  box-shadow: none;
  cursor: not-allowed;
}

.tdw .tdw-skipdep {
  flex: none;
  white-space: nowrap;
}

/* "We clicked Next for you." Sits above Next for a moment. */
.tdw .tdw-auto {
  position: absolute;
  right: 14px;
  bottom: calc(100% + 10px);
  z-index: 6;
  max-width: min(380px, calc(100% - 28px));
  padding: 9px 13px;
  border: 2px solid var(--tdw-tape);
  border-radius: 10px;
  background: var(--tdw-ink);
  color: var(--tdw-tape);
  font: 700 14px/1.25 var(--tdw-ui);
  text-align: left;
  box-shadow: 0 12px 26px -12px rgb(0 0 0 / .6);
  pointer-events: none;
}

.tdw .tdw-auto::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 44px;
  border: 8px solid transparent;
  border-top-color: var(--tdw-tape);
}

.tdw .tdw-auto.is-pop { animation: tdw-pop .28s ease-out; }

.tdw .tdw-btn[aria-disabled="true"]:active { transform: none; }

.tdw .tdw-link {
  padding: 4px 2px;
  color: var(--tdw-graphite);
  font: 500 13px/1.3 var(--tdw-ui);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tdw .tdw-link:hover { color: var(--tdw-ink); }

/* -------------------------------------------------------------- steps */

.tdw .tdw-step {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 24px;
  animation: tdw-in .22s ease-out both;
}

.tdw .tdw-step-head {
  display: grid;
  gap: 6px;
}

.tdw .tdw-title {
  color: var(--tdw-ink);
  font: 900 44px/.9 var(--tdw-big);
  letter-spacing: .004em;
  text-wrap: balance;
}

/* Focused by script on every step so screen readers hear the new title.
   No ring: the landing's global :focus-visible would draw one. */
.tdw .tdw-title:focus,
.tdw .tdw-title:focus-visible {
  outline: none;
  box-shadow: none;
}

.tdw .tdw-sub {
  color: var(--tdw-graphite);
  font: 500 15px/1.4 var(--tdw-ui);
}

.tdw .tdw-kicker {
  color: var(--tdw-muted);
  font: 600 13px/1.25 var(--tdw-ui);
}

.tdw .tdw-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--tdw-tape);
  color: var(--tdw-ink);
  font: 700 11px/1.35 var(--tdw-ui);
  white-space: nowrap;
}

.tdw .tdw-badge.is-hot {
  background: var(--tdw-laser-text);
  color: var(--tdw-paper);
}

.tdw .tdw-badge.is-soon {
  background: var(--tdw-hair);
  color: var(--tdw-graphite);
}

/* 1. chain */

.tdw .tdw-chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.tdw .tdw-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 108px;
  padding: 13px 14px 12px;
  border: 2px solid var(--tdw-hair);
  border-radius: 14px;
  background: var(--tdw-paper);
  color: var(--tdw-ink);
  text-align: left;
  transition: border-color .12s ease, background-color .12s ease;
}

.tdw .tdw-chip:hover:not(:disabled) { border-color: var(--tdw-ink); }

.tdw .tdw-chip[aria-pressed="true"] {
  border-color: var(--tdw-ink);
  background: var(--tdw-tape-soft);
  box-shadow: inset 0 0 0 1px var(--tdw-ink);
}

.tdw .tdw-chip.is-soon {
  border-style: dashed;
  background: var(--tdw-lab);
  color: var(--tdw-muted);
}

.tdw .tdw-chip-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.tdw .tdw-chip-name { font: 700 15px/1.22 var(--tdw-ui); }

.tdw .tdw-chip-tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--tdw-hair);
  border-radius: 50%;
  color: transparent;
}

.tdw .tdw-chip-tick .tdw-ico { width: 12px; height: 12px; }

.tdw .tdw-chip[aria-pressed="true"] .tdw-chip-tick {
  border-color: var(--tdw-ink);
  background: var(--tdw-ink);
  color: var(--tdw-tape);
}

.tdw .tdw-chip-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.tdw .tdw-chip-meta {
  color: var(--tdw-muted);
  font: 500 12px/1.25 var(--tdw-ui);
}

.tdw .tdw-great {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 16px;
  border: 2px dashed var(--tdw-hair);
  border-radius: 12px;
  color: var(--tdw-muted);
  font: 600 15px/1.3 var(--tdw-ui);
}

.tdw .tdw-great.is-on {
  border: 2px solid var(--tdw-green);
  background: var(--tdw-green-soft);
  color: var(--tdw-green-text);
  font-weight: 700;
}

.tdw .tdw-great .tdw-ico {
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: var(--tdw-green);
  color: var(--tdw-paper);
}

/* 2. amount */

.tdw .tdw-amt-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
}

.tdw .tdw-amt {
  display: grid;
  justify-items: start;
  gap: 12px;
  min-width: 0;
}

.tdw .tdw-amt-num {
  display: block;
  color: var(--tdw-ink);
  font: 900 96px/.84 var(--tdw-big);
  letter-spacing: .004em;
  white-space: nowrap;
}

.tdw .tdw-amt-cap {
  color: var(--tdw-graphite);
  font: 600 13.5px/1.3 var(--tdw-ui);
}

.tdw .tdw-boost-row {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 6px;
  min-height: 74px;
}

.tdw .tdw-boost {
  --tdw-boost: 1;
  display: inline-flex;
  align-items: center;
  padding: .28em .62em .3em;
  border-radius: 999px;
  background: var(--tdw-laser-text);
  color: var(--tdw-paper);
  font: 800 calc(18px * var(--tdw-boost))/1 var(--tdw-big);
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 6px 14px -6px rgb(196 22 10 / .6);
}

.tdw .tdw-boost-cap {
  min-height: 1.3em;
  color: var(--tdw-muted);
  font: 600 12.5px/1.3 var(--tdw-ui);
}

.tdw .tdw-slider { display: grid; gap: 6px; }

.tdw .tdw-range {
  --tdw-fill: 100%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.tdw .tdw-range::-webkit-slider-runnable-track {
  height: 12px;
  border: 2px solid var(--tdw-ink);
  border-radius: 999px;
  background: linear-gradient(to right, var(--tdw-tape) var(--tdw-fill), var(--tdw-lab) var(--tdw-fill));
}

.tdw .tdw-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -11px;
  border: 5px solid var(--tdw-tape);
  border-radius: 50%;
  background: var(--tdw-ink);
  box-shadow: 0 0 0 2px var(--tdw-ink), 0 4px 10px rgb(0 0 0 / .3);
}

.tdw .tdw-range::-moz-range-track {
  height: 8px;
  border: 2px solid var(--tdw-ink);
  border-radius: 999px;
  background: var(--tdw-lab);
}

.tdw .tdw-range::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--tdw-tape);
}

.tdw .tdw-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 5px solid var(--tdw-tape);
  border-radius: 50%;
  background: var(--tdw-ink);
  box-shadow: 0 0 0 2px var(--tdw-ink);
}

.tdw .tdw-range:focus-visible { outline-offset: 4px; }

.tdw .tdw-scale {
  display: flex;
  justify-content: space-between;
  color: var(--tdw-muted);
  font: 600 12px/1.2 var(--tdw-ui);
}

.tdw .tdw-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tdw .tdw-preset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border: 2px solid var(--tdw-hair);
  border-radius: 999px;
  background: var(--tdw-paper);
  color: var(--tdw-ink);
  font: 700 14.5px/1 var(--tdw-ui);
}

.tdw .tdw-preset:hover { border-color: var(--tdw-ink); }

.tdw .tdw-preset[aria-pressed="true"] {
  border-color: var(--tdw-ink);
  background: var(--tdw-tape-soft);
  box-shadow: inset 0 0 0 1px var(--tdw-ink);
}

.tdw .tdw-fine {
  color: var(--tdw-muted);
  font: 500 12.5px/1.4 var(--tdw-ui);
}

/* 3. add-ons */

.tdw .tdw-addons {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.tdw .tdw-coupons {
  display: grid;
  gap: 10px;
}

.tdw .tdw-coupon {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 16px 11px 14px;
  border: 2px dashed var(--tdw-tape-deep);
  border-radius: 12px;
  background: var(--tdw-tape-soft);
  color: var(--tdw-ink);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}

/* Ticket notches. */
.tdw .tdw-coupon::before,
.tdw .tdw-coupon::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px dashed var(--tdw-tape-deep);
  border-radius: 50%;
  background: var(--tdw-paper);
}

.tdw .tdw-coupon::before { left: -9px; clip-path: inset(0 0 0 50%); }
.tdw .tdw-coupon::after { right: -9px; clip-path: inset(0 50% 0 0); }

.tdw .tdw-coupon.is-off {
  border-color: var(--tdw-hair-dark);
  background: var(--tdw-paper);
  color: var(--tdw-graphite);
}

.tdw .tdw-coupon.is-off::before,
.tdw .tdw-coupon.is-off::after { border-color: var(--tdw-hair-dark); }

.tdw .tdw-check {
  flex: none;
  width: 21px;
  height: 21px;
  margin: 0;
  accent-color: var(--tdw-ink);
  cursor: pointer;
}

.tdw .tdw-coupon-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.tdw .tdw-coupon-name { font: 700 14.5px/1.25 var(--tdw-ui); }

.tdw .tdw-coupon-note {
  color: var(--tdw-graphite);
  font: 500 12.5px/1.3 var(--tdw-ui);
}

.tdw .tdw-coupon-price {
  font: 800 19px/1 var(--tdw-big);
  letter-spacing: .01em;
  text-align: right;
  white-space: nowrap;
}

.tdw .tdw-coupon.is-off .tdw-coupon-price { color: var(--tdw-muted); }

.tdw .tdw-shame {
  padding: 0 4px;
  font: 600 12.5px/1.35 var(--tdw-ui);
}

.tdw .tdw-shame:not(:empty) { margin-top: 5px; }
.tdw .tdw-shame.is-bad { color: var(--tdw-laser-text); }
.tdw .tdw-shame.is-good { color: var(--tdw-green-text); }

.tdw .tdw-receipt {
  position: sticky;
  top: 0;
  display: grid;
  gap: 10px;
  padding: 16px 18px 18px;
  border-radius: 14px;
  background: var(--tdw-lab);
}

.tdw .tdw-receipt-title { font: 900 24px/.95 var(--tdw-big); }

.tdw .tdw-rows {
  display: grid;
  gap: 6px;
}

.tdw .tdw-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font: 500 13px/1.3 var(--tdw-ui);
}

.tdw .tdw-row dt { color: var(--tdw-graphite); }

.tdw .tdw-row dd {
  color: var(--tdw-ink);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.tdw .tdw-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 2px dashed var(--tdw-ink);
  font: 700 14px/1.2 var(--tdw-ui);
}

.tdw .tdw-total-num {
  font: 900 30px/.9 var(--tdw-big);
  letter-spacing: .005em;
  white-space: nowrap;
}

.tdw .tdw-total-pts {
  margin-top: -6px;
  color: var(--tdw-graphite);
  font: 600 12.5px/1.3 var(--tdw-ui);
  text-align: right;
}

.tdw .tdw-total-pts:empty { display: none; }

.tdw .tdw-saved {
  display: flex;
  justify-content: space-between;
  color: var(--tdw-green-text);
  font: 700 13px/1.3 var(--tdw-ui);
}

/* 4. verify */

.tdw .tdw-step.is-human {
  display: grid;
  grid-template-columns: 334px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "left head"
    "left side";
  align-items: start;
  gap: 16px 30px;
}

.tdw .tdw-step.is-human > .tdw-step-head { grid-area: head; }
.tdw .tdw-step.is-human > .tdw-human-left { grid-area: left; }
.tdw .tdw-step.is-human > .tdw-side { grid-area: side; }

.tdw .tdw-human-left { min-width: 0; }

.tdw .tdw-captcha {
  padding: 7px;
  border: 1px solid var(--tdw-hair-dark);
  border-radius: 4px;
  background: var(--tdw-paper);
  box-shadow: 0 2px 12px rgb(0 0 0 / .14);
}

.tdw .tdw-captcha-head {
  display: grid;
  gap: 2px;
  padding: 13px 16px 14px;
  background: var(--tdw-ink);
  color: var(--tdw-paper);
}

.tdw .tdw-captcha-small { font: 500 13px/1.3 var(--tdw-ui); }

.tdw .tdw-captcha-big {
  color: var(--tdw-tape);
  font: 900 29px/.95 var(--tdw-big);
  letter-spacing: .01em;
  white-space: nowrap;
}

.tdw .tdw-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 7px;
}

.tdw .tdw-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  aspect-ratio: 5 / 4;
  min-width: 0;
  background: linear-gradient(160deg, rgb(96 108 120), rgb(52 60 68));
  color: var(--tdw-paper);
  overflow: hidden;
}

.tdw .tdw-rack {
  display: grid;
  gap: 3px;
  width: 48%;
  transition: transform .12s ease;
}

.tdw .tdw-rack span {
  position: relative;
  height: 11px;
  border-radius: 2px;
  background: rgb(22 25 28);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08);
}

/* Two status lights per unit. */
.tdw .tdw-rack span::after {
  content: "";
  position: absolute;
  top: 3.5px;
  right: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgb(31 180 75);
  box-shadow: -7px 0 0 var(--tdw-tape);
}

.tdw .tdw-tile-label {
  font: 600 10.5px/1 var(--tdw-ui);
  letter-spacing: .02em;
  opacity: .92;
  transition: transform .12s ease;
}

.tdw .tdw-tile-check {
  position: absolute;
  top: 6px;
  left: 6px;
  display: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tdw-tape);
  color: var(--tdw-ink);
}

.tdw .tdw-tile-check .tdw-ico { width: 12px; height: 12px; }

.tdw .tdw-tile[aria-pressed="true"] { box-shadow: inset 0 0 0 4px var(--tdw-paper); }
.tdw .tdw-tile[aria-pressed="true"] .tdw-rack,
.tdw .tdw-tile[aria-pressed="true"] .tdw-tile-label { transform: scale(.84); }
.tdw .tdw-tile[aria-pressed="true"] .tdw-tile-check { display: grid; }

.tdw .tdw-tile[aria-disabled="true"] { cursor: default; }

/* Pinned to the bottom of the step while the tiles run past it, so Verify
   is always on screen. Inert when the captcha fits. */
.tdw .tdw-captcha-foot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 2px 2px 6px;
  border-top: 1px solid var(--tdw-hair);
  margin-top: 7px;
  background: var(--tdw-paper);
}

.tdw .tdw-captcha-brand {
  color: var(--tdw-muted);
  font: 600 11px/1.25 var(--tdw-ui);
}

.tdw .tdw-verify {
  min-height: 40px;
  min-width: 100px;
  padding: 8px 16px;
  border-radius: 4px;
  text-transform: none;
}

.tdw .tdw-captcha.is-done .tdw-verify {
  background: var(--tdw-green);
  color: var(--tdw-paper);
  box-shadow: none;
  cursor: default;
}

.tdw .tdw-result {
  color: var(--tdw-green-text);
  font: 700 14.5px/1.35 var(--tdw-ui);
}

.tdw .tdw-side > .tdw-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 2px solid var(--tdw-green);
  border-radius: 12px;
  background: var(--tdw-green-soft);
}

.tdw .tdw-result:empty { display: none; }

.tdw .tdw-side {
  display: grid;
  gap: 14px;
  align-content: start;
}

.tdw .tdw-sybil {
  display: grid;
  gap: 12px;
  padding: 18px 18px 20px;
  border: 2px solid var(--tdw-ink);
  border-radius: 16px;
  background: var(--tdw-paper);
}

.tdw .tdw-sybil.is-locked {
  border: 2px dashed var(--tdw-hair-dark);
  color: var(--tdw-muted);
}

.tdw .tdw-sybil-kicker {
  color: var(--tdw-muted);
  font: 600 12.5px/1.2 var(--tdw-ui);
}

.tdw .tdw-sybil-title { font: 900 34px/.92 var(--tdw-big); }

.tdw .tdw-sybil-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tdw .tdw-sybil-row .tdw-btn {
  min-height: 52px;
  white-space: normal;
}

.tdw .tdw-sybil-fine {
  color: var(--tdw-muted);
  font: 500 12.5px/1.35 var(--tdw-ui);
}

.tdw .tdw-sybil-credit {
  margin-top: -6px;
  color: var(--tdw-graphite);
  font: 500 12.5px/1.35 var(--tdw-ui);
}

.tdw .tdw-sybil-credit:empty { display: none; }

/* 5. terms */

.tdw .tdw-terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.tdw .tdw-term {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  height: 100%;
  padding: 9px 12px;
  border: 1px solid var(--tdw-hair);
  border-radius: 10px;
  color: var(--tdw-graphite);
  font: 500 13.5px/1.35 var(--tdw-ui);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}

.tdw .tdw-term .tdw-check { width: 19px; height: 19px; margin-top: 0; }

.tdw .tdw-term:hover { border-color: var(--tdw-hair-dark); }

.tdw .tdw-term.is-on {
  border-color: rgb(11 159 91 / .45);
  background: var(--tdw-green-soft);
  color: var(--tdw-ink);
}

.tdw .tdw-terms-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 24px;
  margin-top: -6px;
}

.tdw .tdw-terms-count {
  color: var(--tdw-muted);
  font: 600 13px/1.3 var(--tdw-ui);
}

.tdw .tdw-terms-status {
  flex: 1;
  min-width: 0;
  color: var(--tdw-green-text);
  font: 800 19px/1 var(--tdw-big);
  letter-spacing: .01em;
}

.tdw .tdw-terms-bar .tdw-link { margin-left: auto; }

/* Pinned to the bottom of the step while the terms run past it (8 px up,
   for its shadow). Inert when everything fits. */
.tdw .tdw-harder {
  position: sticky;
  bottom: 8px;
  z-index: 2;
  display: block;
  width: 100%;
  min-height: 118px;
  padding: 14px 18px 10px;
  border: 4px solid var(--tdw-ink);
  border-radius: 24px;
  background: var(--tdw-tape);
  color: var(--tdw-ink);
  box-shadow: 0 8px 0 var(--tdw-ink);
  font: 900 88px/.86 var(--tdw-big);
  letter-spacing: .012em;
  text-align: center;
  text-wrap: balance;
  transition: transform .08s ease, box-shadow .08s ease, background-color .12s ease;
}

.tdw .tdw-harder:hover { background: var(--tdw-tape-hi); }

.tdw .tdw-harder:active {
  transform: translateY(6px);
  box-shadow: 0 2px 0 var(--tdw-ink);
}

/* Pressed hard, then back up. */
.tdw .tdw-harder.is-hit { animation: tdw-harder .5s ease-out; }

/* 6. address */

.tdw .tdw-gen {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
  gap: 22px 28px;
}

.tdw .tdw-gen-left,
.tdw .tdw-gen-right {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.tdw .tdw-gen-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.tdw .tdw-gen-pct {
  font: 900 84px/.82 var(--tdw-big);
  letter-spacing: .004em;
}

.tdw .tdw-gen-attempt {
  color: var(--tdw-muted);
  font: 600 13px/1.2 var(--tdw-ui);
}

.tdw .tdw-gen-bar {
  position: relative;
  height: 26px;
  border: 2px solid var(--tdw-ink);
  border-radius: 999px;
  background: var(--tdw-lab);
  overflow: hidden;
}

.tdw .tdw-gen-fill {
  display: block;
  width: 0;
  height: 100%;
  border-right: 2px solid var(--tdw-ink);
  background: repeating-linear-gradient(-45deg, var(--tdw-tape) 0 12px, var(--tdw-tape-hi) 12px 24px);
  background-size: 34px 34px;
  animation: tdw-stripes 1s linear infinite;
  transition: width .18s ease-out;
}

.tdw .tdw-gen-status {
  min-height: 2.7em;
  color: var(--tdw-ink);
  font: 600 14.5px/1.35 var(--tdw-ui);
}

.tdw .tdw-gen-status.is-warn { color: var(--tdw-laser-text); }

.tdw .tdw-tip {
  min-height: 4.4em;
  padding: 12px 14px;
  border-left: 4px solid var(--tdw-tape);
  border-radius: 4px 10px 10px 4px;
  background: var(--tdw-lab);
  color: var(--tdw-graphite);
  font: 500 13.5px/1.4 var(--tdw-ui);
}

.tdw .tdw-tap {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  width: 100%;
  min-height: 190px;
  padding: 18px;
  border: 4px solid var(--tdw-ink);
  border-radius: 28px;
  background: var(--tdw-tape);
  color: var(--tdw-ink);
  box-shadow: 0 8px 0 var(--tdw-ink);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .06s ease, box-shadow .06s ease, background-color .12s ease;
}

.tdw .tdw-tap:hover { background: var(--tdw-tape-hi); }

.tdw .tdw-tap:active {
  transform: translateY(6px);
  box-shadow: 0 2px 0 var(--tdw-ink);
}

.tdw .tdw-tap[aria-disabled="true"] {
  background: var(--tdw-lab);
  cursor: progress;
}

.tdw .tdw-tap-big { font: 900 50px/.88 var(--tdw-big); letter-spacing: .005em; }
.tdw .tdw-tap-small { font: 600 13px/1.2 var(--tdw-ui); }

.tdw .tdw-gen-last {
  color: var(--tdw-graphite);
  font: 700 13px/1.2 var(--tdw-ui);
  text-align: center;
}

.tdw .tdw-continue {
  justify-self: center;
  font-weight: 600;
}

/* the ad: a strip in the queue bar, on a row of its own under the line, so
   it never covers a step or any of its buttons. Cheap and loud: tape
   yellow, black type, a progress bar along the bottom edge. */

.tdw .tdw-ad {
  position: relative;
  order: 1;
  flex: 1 0 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "top hero act";
  align-items: center;
  gap: 6px 16px;
  min-height: 54px;
  margin: 0 0 2px -10px;
  padding: 7px 12px 11px;
  border-radius: 10px;
  background: var(--tdw-tape);
  color: var(--tdw-ink);
  overflow: hidden;
}

.tdw .tdw-ad.is-next { animation: tdw-adflash .4s ease-out; }

.tdw .tdw-line .tdw-ad :focus-visible { outline-color: var(--tdw-ink); }

.tdw .tdw-ad-top {
  grid-area: top;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 12.5px/1.2 var(--tdw-ui);
  white-space: nowrap;
}

.tdw .tdw-ad-tag {
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--tdw-ink);
  color: var(--tdw-tape);
  font: 800 12px/1.3 var(--tdw-ui);
}

.tdw .tdw-ad-hero {
  grid-area: hero;
  position: relative;
  min-width: 0;
  font: 700 14px/1.25 var(--tdw-ui);
}

.tdw .tdw-ad-name {
  margin-right: 2px;
  font: 900 25px/.95 var(--tdw-big);
  letter-spacing: .005em;
}

/* Inline, so a wide bar keeps the ad on one line; it wraps when it must. */
.tdw .tdw-ad-fine {
  margin-left: 4px;
  color: rgb(0 0 0 / .68);
  font: 500 11.5px/1.3 var(--tdw-ui);
}

.tdw .tdw-ad-act {
  grid-area: act;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tdw .tdw-ad-nope {
  font: 800 12.5px/1.2 var(--tdw-ui);
  white-space: nowrap;
}

.tdw .tdw-ad-nope:empty { display: none; }

.tdw .tdw-ad-skip {
  min-height: 34px;
  padding: 7px 13px;
  border-radius: 4px;
  background: var(--tdw-ink);
  color: var(--tdw-paper);
  font: 600 13px/1.1 var(--tdw-ui);
  white-space: nowrap;
}

.tdw .tdw-ad-skip[aria-disabled="true"] {
  color: rgb(255 255 255 / .75);
  cursor: not-allowed;
}

.tdw .tdw-ad-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgb(0 0 0 / .16);
}

.tdw .tdw-ad-bar {
  display: block;
  width: 0;
  height: 100%;
  background: var(--tdw-ink);
}

.tdw .tdw-ad-streaks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tdw .tdw-ad-streaks span {
  position: absolute;
  left: -45%;
  width: 45%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, rgb(255 255 255 / 0), rgb(255 255 255 / .9));
  animation: tdw-streak 1.1s linear infinite;
}

.tdw .tdw-ad-streaks span:nth-child(1) { top: 18%; animation-delay: 0s; }
.tdw .tdw-ad-streaks span:nth-child(2) { top: 38%; animation-delay: .35s; width: 30%; }
.tdw .tdw-ad-streaks span:nth-child(3) { top: 58%; animation-delay: .7s; }
.tdw .tdw-ad-streaks span:nth-child(4) { top: 76%; animation-delay: .15s; width: 60%; }
.tdw .tdw-ad-streaks span:nth-child(5) { top: 90%; animation-delay: .55s; width: 35%; }

@keyframes tdw-adflash {
  from { background-color: var(--tdw-paper); }
  to { background-color: var(--tdw-tape); }
}

/* 7. delivery */

.tdw .tdw-ship-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: start;
  gap: 20px 28px;
}

.tdw .tdw-track-card {
  display: grid;
  gap: 14px;
}

.tdw .tdw-track { display: grid; }

.tdw .tdw-track-item {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 16px;
}

.tdw .tdw-track-item:last-child { padding-bottom: 0; }

.tdw .tdw-track-item::before {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 2px;
  left: 13px;
  width: 2px;
  border-radius: 2px;
  background: var(--tdw-green);
}

.tdw .tdw-track-item:last-child::before { display: none; }

.tdw .tdw-track-item.is-current::before,
.tdw .tdw-track-item.is-pending::before {
  background: repeating-linear-gradient(to bottom, var(--tdw-hair-dark) 0 4px, transparent 4px 8px);
}

.tdw .tdw-track-dot {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tdw-green);
  color: var(--tdw-paper);
}

.tdw .tdw-track-dot .tdw-ico { width: 14px; height: 14px; }

.tdw .tdw-track-item.is-current .tdw-track-dot {
  border: 2px solid var(--tdw-ink);
  background: var(--tdw-tape);
  animation: tdw-pulse 1.5s ease-out infinite;
}

.tdw .tdw-track-item.is-pending .tdw-track-dot {
  border: 2px dashed var(--tdw-hair-dark);
  background: var(--tdw-paper);
}

.tdw .tdw-track-text {
  display: grid;
  gap: 2px;
  padding-top: 4px;
}

.tdw .tdw-track-name { font: 700 15px/1.25 var(--tdw-ui); }

.tdw .tdw-track-when {
  color: var(--tdw-muted);
  font: 500 12.5px/1.3 var(--tdw-ui);
}

.tdw .tdw-track-item.is-current .tdw-track-when {
  color: var(--tdw-laser-text);
  font-weight: 700;
}

.tdw .tdw-track-item.is-pending .tdw-track-name { color: var(--tdw-graphite); }

.tdw .tdw-addr {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 2px solid var(--tdw-ink);
  border-radius: 16px;
  background: var(--tdw-paper);
}

/* Grey shapes under a blur. There is nothing in here to read. */
.tdw .tdw-blur {
  position: relative;
  height: 58px;
  border-radius: 10px;
  background: var(--tdw-lab);
  overflow: hidden;
}

.tdw .tdw-blur span {
  position: absolute;
  top: 50%;
  height: 16px;
  margin-top: -8px;
  border-radius: 8px;
  background: rgb(156 162 169);
  filter: blur(6px);
}

.tdw .tdw-blur span:nth-child(1) { left: 6%; width: 30%; }
.tdw .tdw-blur span:nth-child(2) { left: 40%; width: 22%; }
.tdw .tdw-blur span:nth-child(3) { left: 66%; width: 14%; }
.tdw .tdw-blur span:nth-child(4) { left: 83%; width: 11%; }

.tdw .tdw-addr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tdw .tdw-addr-msg {
  color: var(--tdw-ink);
  font: 700 14px/1.35 var(--tdw-ui);
}

.tdw .tdw-addr-msg:empty { display: none; }
.tdw .tdw-addr-msg.is-bad { color: var(--tdw-laser-text); }

.tdw .tdw-toastline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--tdw-ink);
  color: var(--tdw-paper);
  font: 600 14.5px/1.35 var(--tdw-ui);
  box-shadow: 0 14px 30px -14px rgb(0 0 0 / .55);
  animation: tdw-toast .4s .45s ease-out both;
}

.tdw .tdw-toastline .tdw-ico { width: 18px; height: 18px; color: var(--tdw-tape); }

/* ------------------------------------------------------------- effects */

.tdw .tdw-fx {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
}

.tdw .tdw-float {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.tdw .tdw-float-in {
  display: block;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--tdw-ink);
  color: var(--tdw-tape);
  font: 800 21px/1 var(--tdw-big);
  letter-spacing: .03em;
  white-space: nowrap;
  opacity: 0;
}

.tdw .tdw-bit {
  position: absolute;
  width: 9px;
  height: 14px;
  margin: -7px 0 0 -4.5px;
  border-radius: 2px;
}

.tdw .tdw-bit.is-tape { background: var(--tdw-tape); }
.tdw .tdw-bit.is-red { background: var(--tdw-laser); }
.tdw .tdw-bit.is-green { background: var(--tdw-green); }
.tdw .tdw-bit.is-ink { background: var(--tdw-ink); }
.tdw .tdw-bit.is-paper { background: var(--tdw-paper); box-shadow: inset 0 0 0 1.5px var(--tdw-ink); }

.tdw .is-bump { animation: tdw-bump .3s ease-out; }
.tdw .is-shake { animation: tdw-shake .42s ease-in-out; }

@keyframes tdw-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes tdw-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes tdw-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}

@keyframes tdw-harder {
  0% { transform: translateY(6px); box-shadow: 0 2px 0 var(--tdw-ink); }
  35% { transform: translateY(6px) scale(.98); box-shadow: 0 2px 0 var(--tdw-ink); }
  100% { transform: none; box-shadow: 0 8px 0 var(--tdw-ink); }
}

@keyframes tdw-stripes {
  from { background-position: 0 0; }
  to { background-position: 34px 0; }
}

@keyframes tdw-streak {
  from { transform: translateX(0); }
  to { transform: translateX(330%); }
}

@keyframes tdw-pulse {
  0% { box-shadow: 0 0 0 0 rgb(247 198 0 / .75); }
  70% { box-shadow: 0 0 0 12px rgb(247 198 0 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(247 198 0 / 0); }
}

@keyframes tdw-toast {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- finale */
/* A cheap checkout popup, full screen: sunburst, dashed coupon card,
   starburst sticker, countdown, big orange button, tiny X. */

dialog.tdw.is-finale {
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: rgb(255 190 0);
  background-image: repeating-conic-gradient(from 0deg at 50% 40%, rgb(255 212 0) 0deg 9deg, rgb(255 168 0) 9deg 18deg);
}

dialog.tdw.is-rollback {
  background-color: rgb(206 24 10);
  background-image: repeating-conic-gradient(from 0deg at 50% 40%, rgb(232 40 20) 0deg 9deg, rgb(190 16 6) 9deg 18deg);
}

.tdw.is-finale .tdw-line,
.tdw.is-finale .tdw-head,
.tdw.is-finale .tdw-prize,
.tdw.is-finale .tdw-stage,
.tdw.is-finale .tdw-foot { display: none; }

.tdw .tdw-end {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 44px 24px 28px;
}

.tdw .tdw-end-x { display: none; }

.tdw.is-finale .tdw-end-x {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: 10px;
  z-index: 25;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgb(255 255 255 / .82);
  color: var(--tdw-ink);
  box-shadow: 0 2px 6px rgb(0 0 0 / .2);
}

.tdw.is-finale .tdw-end-x:hover { background: var(--tdw-paper); }
.tdw.is-finale .tdw-end-x .tdw-ico { width: 14px; height: 14px; }

.tdw .tdw-card {
  position: relative;
  width: min(760px, 100%);
  margin: auto;
  padding: 0 0 24px;
  border: 4px dashed var(--tdw-orange);
  border-radius: 24px;
  background: var(--tdw-paper);
  box-shadow: 0 14px 0 rgb(0 0 0 / .16), 0 34px 70px -24px rgb(0 0 0 / .55);
  text-align: center;
}

.tdw .tdw-card-bad {
  width: min(720px, 100%);
  padding-top: 8px;
  border-color: var(--tdw-ink);
}

.tdw .tdw-ribbon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  margin: -4px -4px 0;
  padding: 10px 70px 10px 16px;
  border-radius: 22px 22px 0 0;
  background: var(--tdw-red);
  color: var(--tdw-paper);
  font: 700 15px/1.2 var(--tdw-ui);
}

.tdw .tdw-cd {
  display: inline-block;
  min-width: 3.4ch;
  padding: 4px 7px 3px;
  border-radius: 6px;
  background: var(--tdw-paper);
  color: var(--tdw-red);
  font: 900 21px/1 var(--tdw-big);
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
}

.tdw .tdw-card-bad .tdw-cd {
  background: var(--tdw-ink);
  color: var(--tdw-tape);
}

/* Starburst sticker. */
.tdw .tdw-burst {
  position: absolute;
  top: -36px;
  right: -30px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  padding: 28px;
  background: var(--tdw-tape);
  color: var(--tdw-red);
  clip-path: polygon(50% 0%, 56.3% 10.5%, 65.5% 2.4%, 68.2% 14.4%, 79.4% 9.5%, 78.3% 21.7%, 90.5% 20.6%, 85.6% 31.8%, 97.6% 34.5%, 89.5% 43.7%, 100% 50%, 89.5% 56.3%, 97.6% 65.5%, 85.6% 68.2%, 90.5% 79.4%, 78.3% 78.3%, 79.4% 90.5%, 68.2% 85.6%, 65.5% 97.6%, 56.3% 89.5%, 50% 100%, 43.7% 89.5%, 34.5% 97.6%, 31.8% 85.6%, 20.6% 90.5%, 21.7% 78.3%, 9.5% 79.4%, 14.4% 68.2%, 2.4% 65.5%, 10.5% 56.3%, 0% 50%, 10.5% 43.7%, 2.4% 34.5%, 14.4% 31.8%, 9.5% 20.6%, 21.7% 21.7%, 20.6% 9.5%, 31.8% 14.4%, 34.5% 2.4%, 43.7% 10.5%);
  transform: rotate(12deg);
  font: 900 22px/.9 var(--tdw-big);
  letter-spacing: .01em;
  text-align: center;
  text-transform: uppercase;
}

.tdw .tdw-burst.is-left {
  right: auto;
  left: -30px;
  transform: rotate(-12deg);
  color: var(--tdw-ink);
}

.tdw .tdw-bigcheck {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  margin: 22px auto 12px;
  border: 6px solid var(--tdw-paper);
  border-radius: 50%;
  background: var(--tdw-green);
  color: var(--tdw-paper);
  box-shadow: 0 0 0 5px var(--tdw-green), 0 10px 0 5px rgb(0 0 0 / .12);
}

.tdw .tdw-bigcheck .tdw-ico { width: 60px; height: 60px; }

.tdw .tdw-end-title {
  padding: 0 24px;
  color: var(--tdw-green-text);
  font: 900 clamp(44px, 7.4vw, 92px)/.86 var(--tdw-big);
  letter-spacing: .004em;
  text-wrap: balance;
}

.tdw .tdw-card-bad .tdw-end-title {
  color: var(--tdw-red);
  font-size: clamp(42px, 6.6vw, 80px);
}

.tdw .tdw-end-title:focus,
.tdw .tdw-end-title:focus-visible {
  outline: none;
  box-shadow: none;
}

.tdw .tdw-end-prize {
  margin: 12px 24px 0;
  color: var(--tdw-orange);
  font: 900 30px/1 var(--tdw-big);
  letter-spacing: .01em;
}

.tdw .tdw-end-prize.is-gone {
  margin-top: 14px;
  color: var(--tdw-ink);
  font-size: 26px;
}

.tdw .tdw-end-note {
  margin: 10px 24px 0;
  color: var(--tdw-graphite);
  font: 600 14px/1.3 var(--tdw-ui);
}

.tdw .tdw-pill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  margin: 18px 20px 0;
}

.tdw .tdw-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-height: 50px;
  padding: 10px 22px;
  border: 2px solid var(--tdw-green);
  border-radius: 999px;
  background: var(--tdw-green-soft);
  color: var(--tdw-ink);
}

.tdw .tdw-pill:hover { background: rgb(214 241 226); }

.tdw .tdw-pill-k {
  color: var(--tdw-green-text);
  font: 700 15px/1 var(--tdw-ui);
}

.tdw .tdw-pill-amt {
  font: 900 30px/1 var(--tdw-big);
  letter-spacing: .01em;
  white-space: nowrap;
}

.tdw .tdw-pill-amt.is-pending {
  color: var(--tdw-red);
  font: 800 17px/1 var(--tdw-ui);
  animation: tdw-flicker .2s steps(2, jump-none) infinite;
}

.tdw .tdw-pill.is-wiggle { animation: tdw-wiggle .5s ease-in-out; }

.tdw .tdw-trust {
  color: var(--tdw-red);
  font: 900 24px/1 var(--tdw-big);
  letter-spacing: .01em;
}

.tdw .tdw-trust:empty { display: none; }
.tdw .tdw-trust.is-pop { animation: tdw-pop .28s ease-out; }

.tdw .tdw-checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 20px 24px 0;
}

.tdw .tdw-chk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 10px;
  border: 2px solid var(--tdw-hair-dark);
  border-radius: 10px;
  background: var(--tdw-paper);
  color: var(--tdw-ink);
  font: 700 14px/1.15 var(--tdw-ui);
}

.tdw .tdw-chk:hover { border-color: var(--tdw-ink); }

.tdw .tdw-chk-x {
  display: none;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--tdw-red);
  color: var(--tdw-paper);
}

.tdw .tdw-chk-x .tdw-ico { width: 10px; height: 10px; }

.tdw .tdw-chk.is-fail {
  border-color: var(--tdw-red);
  background: var(--tdw-laser-soft);
  color: var(--tdw-laser-text);
}

.tdw .tdw-chk.is-fail .tdw-chk-x { display: grid; }

.tdw .tdw-out {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  margin: 12px 24px 0;
  padding: 11px 14px;
  border: 2px dashed var(--tdw-hair-dark);
  border-radius: 12px;
  color: var(--tdw-muted);
  font: 600 14.5px/1.3 var(--tdw-ui);
}

.tdw .tdw-out.is-bad {
  border-color: var(--tdw-red);
  background: var(--tdw-laser-soft);
  color: var(--tdw-laser-text);
  font-weight: 700;
}

/* The rollback card. */

.tdw .tdw-tag {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 2px 14px;
  margin: 34px 20px 16px;
  padding: 12px 24px 12px 44px;
  border: 2px dashed var(--tdw-ink);
  border-radius: 12px 40px 40px 12px;
  background: var(--tdw-tape);
  color: var(--tdw-ink);
}

/* The price tag's hole. */
.tdw .tdw-tag::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 16px;
  width: 13px;
  height: 13px;
  margin-top: -6.5px;
  border: 2px solid var(--tdw-ink);
  border-radius: 50%;
  background: var(--tdw-paper);
}

.tdw .tdw-tag-k { font: 700 14px/1.2 var(--tdw-ui); }

.tdw .tdw-tag-old {
  color: var(--tdw-graphite);
  font: 800 24px/1 var(--tdw-big);
  text-decoration: line-through 3px var(--tdw-red);
}

.tdw .tdw-tag-new {
  color: var(--tdw-red);
  font: 900 46px/.9 var(--tdw-big);
}

/* "Your deposit was in block 2. Block 2 no longer exists." The plain line
   that says what happened, between the headline and the SAFU shout. */
.tdw .tdw-block {
  margin: 14px 28px 0;
  color: var(--tdw-ink);
  font: 700 clamp(17px, 1.9vw, 21px)/1.3 var(--tdw-ui);
  text-wrap: balance;
}

.tdw .tdw-safu {
  display: inline-block;
  margin: 16px 16px 0;
  padding: 9px 16px 7px;
  background: var(--tdw-ink);
  color: var(--tdw-tape);
  font: 900 clamp(26px, 3.4vw, 40px)/1 var(--tdw-big);
  letter-spacing: .01em;
  transform: rotate(-1.5deg);
}

.tdw .tdw-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(460px, calc(100% - 40px));
  min-height: 64px;
  margin: 24px auto 0;
  padding: 12px 24px;
  border: 0;
  border-radius: 16px;
  background: var(--tdw-orange);
  color: var(--tdw-paper);
  box-shadow: inset 0 -5px 0 rgb(0 0 0 / .18), 0 6px 0 var(--tdw-orange-deep);
  font: 900 30px/1 var(--tdw-big);
  letter-spacing: .02em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .08s ease, box-shadow .08s ease;
}

.tdw .tdw-cta:hover { background: rgb(246 96 8); }

.tdw .tdw-cta:active {
  transform: translateY(5px);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / .18), 0 1px 0 var(--tdw-orange-deep);
}

.tdw .tdw-closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  margin: 18px 20px 0;
  color: var(--tdw-graphite);
  font: 600 13.5px/1.35 var(--tdw-ui);
}

.tdw .tdw-end.is-quake { animation: tdw-quake .6s ease-in-out; }

@keyframes tdw-pop {
  0% { transform: scale(.6); opacity: 0; }
  70% { transform: scale(1.06); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

@keyframes tdw-wiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-6deg); }
  40% { transform: rotate(5deg); }
  60% { transform: rotate(-4deg); }
  80% { transform: rotate(2deg); }
}

@keyframes tdw-flicker {
  50% { opacity: .2; }
}

@keyframes tdw-quake {
  0%, 100% { transform: none; }
  10% { transform: translate(-16px, 6px) rotate(-1.2deg); }
  25% { transform: translate(14px, -8px) rotate(1deg); }
  40% { transform: translate(-10px, 4px) rotate(-.8deg); }
  55% { transform: translate(8px, -4px) rotate(.6deg); }
  70% { transform: translate(-5px, 2px); }
  85% { transform: translate(3px, -1px); }
}

/* -------------------------------------------- hand-off on the terminal */
/* Outside the dialog: the order form it points at, and its sticker. */

.tdw-handoff {
  outline: 4px solid rgb(236 84 0) !important;
  outline-offset: -4px;
  animation: tdw-handoff .7s ease-out 3;
}

@keyframes tdw-handoff {
  0% { box-shadow: 0 0 0 0 rgb(236 84 0 / .65); }
  100% { box-shadow: 0 0 0 16px rgb(236 84 0 / 0); }
}

.tdw-gift {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147482000;
  box-sizing: border-box;
  max-width: min(320px, calc(100vw - 24px));
  margin: 0;
  padding: 10px 14px;
  border: 2px dashed rgb(0 0 0);
  border-radius: 12px;
  background: rgb(247 198 0);
  color: rgb(0 0 0);
  box-shadow: 0 14px 30px -12px rgb(0 0 0 / .55);
  font: 800 16px/1.25 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  text-align: center;
  pointer-events: none;
  animation: tdw-pop .3s ease-out both;
  transition: opacity .35s ease;
}

.tdw-gift.is-out { opacity: 0; }

/* -------------------------------------------------------------- sizes */

@media (max-width: 880px) {
  .tdw .tdw-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tdw .tdw-amt-num { font-size: 80px; }
  .tdw .tdw-harder { font-size: 76px; }
}

@media (max-width: 760px) {
  .tdw .tdw-addons,
  .tdw .tdw-gen,
  .tdw .tdw-ship-grid { grid-template-columns: minmax(0, 1fr); }
  .tdw .tdw-step.is-human {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "head"
      "left"
      "side";
  }
  .tdw .tdw-human-left { width: min(100%, 360px); }
  .tdw .tdw-receipt { position: static; }

  /* One column: the tap button and "Continue anyway" (the only way on from
     this step) come right after the progress, the tip after. */
  .tdw .tdw-gen { gap: 12px; }
  .tdw .tdw-gen-left,
  .tdw .tdw-gen-right { display: contents; }
  .tdw .tdw-gen-head { order: 1; }
  .tdw .tdw-gen-bar { order: 2; }
  .tdw .tdw-gen-status { order: 3; }
  .tdw .tdw-tap { order: 4; }
  .tdw .tdw-gen-last { order: 5; }
  .tdw .tdw-continue { order: 6; }
  .tdw .tdw-tip { order: 7; }

  /* The ad button takes two lines before the line's text gets squeezed. */
  .tdw .tdw-adskip { max-width: 168px; white-space: normal; }

  /* The address card, with its button, before the tracking. */
  .tdw .tdw-addr { order: -1; }
}

/* Phones: the whole screen. */
@media (max-width: 640px) {
  dialog.tdw {
    width: 100%;
    height: 100%;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .tdw .tdw-line {
    gap: 10px;
    padding: max(8px, env(safe-area-inset-top)) 10px 8px 16px;
  }

  .tdw .tdw-line-text { font-size: 13px; }
  .tdw .tdw-line-pos { font-size: 19px; }
  .tdw .tdw-line-note { font-size: 12px; }

  .tdw .tdw-skip {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 12.5px;
    white-space: normal;
    max-width: 112px;
    line-height: 1.15;
  }

  /* The line's text on top, then the two ways to skip side by side, the ad
     one taking the room that is left. */
  .tdw .tdw-line-copy { flex: 1 0 100%; }
  .tdw .tdw-adskip {
    flex: 1 1 0;
    justify-content: center;
    max-width: none;
    min-height: 36px;
    padding: 4px 12px 4px 5px;
    font-size: 12.5px;
    white-space: normal;
  }
  .tdw .tdw-adskip-ico { width: 26px; height: 26px; }

  /* While the ad plays it takes the place of the line's text, on top, so
     the bar grows by a few pixels and the step keeps its room. */
  .tdw .tdw-line.is-ad .tdw-line-copy { display: none; }
  .tdw .tdw-line.is-ad .tdw-ad { order: -1; }
  .tdw .tdw-ad {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "top act"
      "hero hero";
    gap: 3px 10px;
    min-height: 0;
    margin-left: -6px;
    padding: 5px 10px 9px;
  }
  .tdw .tdw-ad-name { font-size: 19px; }
  .tdw .tdw-ad-hero { font-size: 12.5px; line-height: 1.2; }
  .tdw .tdw-ad-fine { font-size: 11px; }
  .tdw .tdw-ad-skip { min-height: 28px; padding: 4px 10px; font-size: 12px; }

  .tdw .tdw-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "brand count x"
      "steps steps steps";
    gap: 10px 12px;
    padding: 10px 12px 12px 16px;
  }

  .tdw .tdw-name { font-size: 28px; }
  .tdw .tdw-ship { display: none; }
  .tdw .tdw-count { display: block; }
  .tdw .tdw-x { min-height: 36px; padding: 5px 12px 5px 9px; font-size: 13.5px; }

  .tdw .tdw-stp-label { display: none; }
  .tdw .tdw-stp-dot { width: 22px; height: 22px; font-size: 12.5px; }
  .tdw .tdw-stp + .tdw-stp::before { top: 10px; left: calc(-50% + 14px); right: calc(50% + 14px); }

  .tdw .tdw-body { padding: 16px 16px 0; }

  /* Hint on its own row (when there is one), then Back, Skip, Next. */
  .tdw .tdw-foot {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "hint hint hint"
      "back skip next";
    gap: 6px 10px;
    padding: 8px 12px max(10px, env(safe-area-inset-bottom));
  }

  .tdw .tdw-back { grid-area: back; padding: 10px 14px; }
  .tdw .tdw-next { grid-area: next; min-width: 96px; }
  .tdw .tdw-skipdep {
    grid-area: skip;
    justify-self: center;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }
  .tdw .tdw-hint { grid-area: hint; font-size: 12.5px; text-align: center; }
  .tdw .tdw-hint:empty { display: none; }
  .tdw .tdw-hint.is-total { font-size: 17px; }
  .tdw .tdw-auto { right: 12px; max-width: calc(100% - 24px); font-size: 13.5px; }

  .tdw .tdw-prize { padding: 6px 12px; gap: 4px 10px; }
  .tdw .tdw-prize-text { font-size: 20px; }

  .tdw .tdw-end { padding: 50px 12px 22px; }
  .tdw .tdw-card { border-width: 3px; border-radius: 18px; padding-bottom: 20px; }
  .tdw .tdw-ribbon { margin: -3px -3px 0; padding: 9px 56px 9px 12px; border-radius: 16px 16px 0 0; font-size: 13.5px; }
  .tdw .tdw-cd { font-size: 19px; }
  .tdw .tdw-burst { top: -26px; right: -6px; width: 104px; height: 104px; padding: 19px; font-size: 15.5px; }
  .tdw .tdw-burst.is-left { left: -6px; }
  .tdw .tdw-bigcheck { width: 80px; height: 80px; margin: 18px auto 10px; border-width: 5px; }
  .tdw .tdw-bigcheck .tdw-ico { width: 44px; height: 44px; }
  .tdw .tdw-end-title { padding: 0 14px; font-size: clamp(40px, 12.6vw, 56px); }
  .tdw .tdw-card-bad .tdw-end-title { font-size: clamp(38px, 11.4vw, 52px); }
  .tdw .tdw-end-prize { margin: 10px 14px 0; font-size: 26px; }
  .tdw .tdw-pill-row { margin: 14px 12px 0; }
  .tdw .tdw-pill { padding: 9px 16px; }
  .tdw .tdw-pill-amt { font-size: 25px; }
  .tdw .tdw-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 14px 14px 0; }
  .tdw .tdw-chk { font-size: 13.5px; padding: 8px 6px; }
  .tdw .tdw-out { margin: 10px 14px 0; font-size: 14px; }
  .tdw .tdw-tag { margin: 30px 12px 12px; padding: 10px 18px 10px 38px; }
  .tdw .tdw-tag::before { left: 13px; }
  .tdw .tdw-tag-old { font-size: 20px; }
  .tdw .tdw-tag-new { font-size: 38px; }
  .tdw .tdw-block { margin: 12px 16px 0; font-size: 16.5px; }
  .tdw .tdw-safu { font-size: 26px; }
  .tdw .tdw-cta { min-height: 58px; font-size: 24px; width: calc(100% - 28px); }
  .tdw .tdw-closing { margin: 14px 14px 0; font-size: 13px; }

  .tdw .tdw-step { gap: 16px; padding-bottom: 22px; }
  .tdw .tdw-title { font-size: 38px; }
  .tdw .tdw-sub { font-size: 14.5px; }

  .tdw .tdw-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tdw .tdw-chip { min-height: 92px; padding: 11px 11px 10px; }
  .tdw .tdw-chip-name { font-size: 14px; }

  .tdw .tdw-amt-wrap { flex-direction: column; align-items: stretch; }
  .tdw .tdw-amt-num { font-size: clamp(54px, 17vw, 76px); }
  .tdw .tdw-boost-row { align-items: flex-start; min-height: 66px; }
  .tdw .tdw-boost { font-size: calc(16px * var(--tdw-boost)); }
  .tdw .tdw-preset { flex: 1 1 auto; justify-content: center; padding: 8px 12px; }

  .tdw .tdw-coupon { padding: 10px 12px 10px 12px; gap: 10px; }
  .tdw .tdw-coupon-price { font-size: 17px; }

  .tdw .tdw-human-left { width: 100%; }
  .tdw .tdw-tile { aspect-ratio: 1; }
  .tdw .tdw-sybil-title { font-size: 30px; }

  .tdw .tdw-terms { grid-template-columns: minmax(0, 1fr); }
  .tdw .tdw-harder {
    min-height: 120px;
    padding: 14px 12px 10px;
    font-size: clamp(52px, 17vw, 76px);
  }

  .tdw .tdw-gen-pct { font-size: 72px; }
  .tdw .tdw-tap { min-height: 150px; }
  .tdw .tdw-tap-big { font-size: 42px; }
}

@media (max-width: 360px) {
  .tdw .tdw-count { font-size: 11.5px; }
  .tdw .tdw-chip-name { font-size: 13.5px; }
}

/* -------------------------------------------------------- short screens */
/* A Mac browser window is often 640-780 px tall. The chrome around the
   steps gets thinner, each step tightens up when its stage is short (a
   container query, so the prize bar counts), and the finale cards shrink to
   fit. What still doesn't fit scrolls inside the step, with Verify and
   ACCEPT ALL HARDER pinned to the bottom of what you can see. */

@media (min-width: 641px) and (max-height: 780px) {
  .tdw .tdw-line { padding-top: 5px; padding-bottom: 5px; row-gap: 5px; }
  .tdw .tdw-skip { min-height: 30px; padding: 5px 13px; }
  .tdw .tdw-adskip { min-height: 32px; padding-top: 3px; padding-bottom: 3px; }
  .tdw .tdw-adskip-ico { width: 25px; height: 25px; }
  .tdw .tdw-ad { min-height: 48px; padding-top: 5px; padding-bottom: 9px; }
  .tdw .tdw-ad-name { font-size: 22px; }
  .tdw .tdw-head { padding-top: 8px; padding-bottom: 8px; }
  .tdw .tdw-brand { gap: 4px; }
  .tdw .tdw-name { font-size: 28px; }
  .tdw .tdw-stp { gap: 3px; }
  .tdw .tdw-stp-dot { width: 22px; height: 22px; font-size: 12.5px; }
  .tdw .tdw-stp + .tdw-stp::before { top: 10px; left: calc(-50% + 14px); right: calc(50% + 14px); }
  .tdw .tdw-x { min-height: 34px; }
  .tdw .tdw-prize { padding-top: 4px; padding-bottom: 4px; }
  .tdw .tdw-prize-text { font-size: 19px; }
  .tdw .tdw-foot { padding-top: 8px; padding-bottom: 8px; }
  .tdw .tdw-foot .tdw-btn { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
  .tdw .tdw-body { padding-top: 14px; }
  .tdw .tdw-step { padding-bottom: 16px; }

  .tdw .tdw-end { padding-top: 36px; padding-bottom: 20px; }
  .tdw .tdw-bigcheck { width: 76px; height: 76px; margin: 14px auto 8px; border-width: 5px; }
  .tdw .tdw-bigcheck .tdw-ico { width: 44px; height: 44px; }
  .tdw .tdw-end-title { font-size: clamp(44px, min(7.4vw, 10.5vh), 92px); }
  .tdw .tdw-card-bad .tdw-end-title { font-size: clamp(42px, min(6.6vw, 10vh), 80px); }
  .tdw .tdw-end-prize { margin-top: 8px; }
  .tdw .tdw-pill-row { margin-top: 12px; }
  .tdw .tdw-checks { margin-top: 14px; }
  .tdw .tdw-out { min-height: 44px; margin-top: 8px; padding-top: 8px; padding-bottom: 8px; }
  .tdw .tdw-tag { margin-top: 26px; margin-bottom: 10px; }
  .tdw .tdw-block { margin-top: 10px; font-size: 17px; }
  .tdw .tdw-safu { margin-top: 12px; }
  .tdw .tdw-cta { min-height: 56px; margin-top: 18px; }
  .tdw .tdw-closing { margin-top: 12px; }
}

@media (min-width: 641px) {
  @container tdw-stage (max-height: 500px) {
    .tdw .tdw-step { gap: 12px; }
    .tdw .tdw-step-head { gap: 4px; }
    .tdw .tdw-title { font-size: 38px; }
    .tdw .tdw-sub { font-size: 14px; }

    .tdw .tdw-chip { min-height: 96px; }
    .tdw .tdw-great { min-height: 44px; padding-top: 9px; padding-bottom: 9px; }

    .tdw .tdw-amt { gap: 8px; }
    .tdw .tdw-amt-num { font-size: 76px; }
    .tdw .tdw-boost-row { min-height: 62px; }

    .tdw .tdw-coupons { gap: 6px; }
    .tdw .tdw-coupon { padding-top: 8px; padding-bottom: 8px; }
    .tdw .tdw-receipt { gap: 7px; padding: 12px 16px 14px; }

    .tdw .tdw-step.is-human { gap: 12px 26px; }
    .tdw .tdw-captcha-head { padding: 9px 14px 10px; }
    .tdw .tdw-captcha-big { font-size: 25px; }
    .tdw .tdw-tiles,
    .tdw .tdw-captcha-foot { margin-top: 5px; }
    .tdw .tdw-tile { aspect-ratio: 3 / 2; gap: 5px; }
    .tdw .tdw-captcha-foot { padding-top: 6px; }
    .tdw .tdw-verify { min-height: 36px; }
    .tdw .tdw-side { gap: 10px; }
    .tdw .tdw-side > .tdw-result { padding: 8px 12px; }
    .tdw .tdw-sybil { gap: 9px; padding: 14px 16px 16px; }
    .tdw .tdw-sybil-title { font-size: 30px; }
    .tdw .tdw-sybil-row .tdw-btn { min-height: 46px; }

    .tdw .tdw-terms { gap: 6px 12px; }
    .tdw .tdw-term { padding-top: 7px; padding-bottom: 7px; }
    .tdw .tdw-harder { min-height: 0; padding: 12px 18px 9px; border-radius: 20px; font-size: 64px; }

    .tdw .tdw-gen-pct { font-size: 72px; }
    .tdw .tdw-tap { min-height: 160px; }

    .tdw .tdw-ship-grid { gap: 14px 24px; }
    .tdw .tdw-track-card { gap: 10px; }
    .tdw .tdw-track-item { padding-bottom: 10px; }
    .tdw .tdw-addr { gap: 10px; padding: 14px 16px; }
    .tdw .tdw-toastline { padding: 10px 14px; }
  }

  /* One column (a window 641-760 px wide): the tap button comes up too. */
  @container tdw-stage (max-height: 500px) and (max-width: 710px) {
    .tdw .tdw-tap { min-height: 112px; }
    .tdw .tdw-tap-big { font-size: 40px; }
    .tdw .tdw-amt-num { font-size: 64px; }
  }

  /* Shorter still: a 600 px window with the prize bar and an ad playing in
     the queue bar. The amount presets stay above the fold. */
  @container tdw-stage (max-height: 340px) {
    .tdw .tdw-step { gap: 10px; }
    .tdw .tdw-title { font-size: 32px; }
    .tdw .tdw-amt-num { font-size: 60px; }
  }

  @container tdw-stage (max-height: 340px) and (max-width: 710px) {
    .tdw .tdw-gen-pct { font-size: 60px; }
    .tdw .tdw-tap { min-height: 96px; }
  }
}

@media (max-width: 640px) {
  @container tdw-stage (max-height: 620px) {
    .tdw .tdw-step { gap: 10px; }
    .tdw .tdw-title { font-size: 34px; }
    .tdw .tdw-sub { font-size: 14px; }

    .tdw .tdw-chip { min-height: 80px; }

    .tdw .tdw-amt-wrap { gap: 8px; }
    .tdw .tdw-amt { gap: 4px; }
    .tdw .tdw-amt-num { font-size: clamp(44px, 13vw, 56px); }
    /* Room for the biggest badge, so the slider doesn't move under a finger. */
    .tdw .tdw-boost-row { min-height: 68px; gap: 4px; }
    .tdw .tdw-boost { font-size: calc(13px * var(--tdw-boost)); }
    .tdw .tdw-range { height: 30px; }
    .tdw .tdw-presets { gap: 6px; }
    .tdw .tdw-preset { min-height: 40px; }

    .tdw .tdw-captcha-head { padding: 9px 14px 10px; }
    .tdw .tdw-captcha-big { font-size: 25px; }
    .tdw .tdw-tile { aspect-ratio: 16 / 9; gap: 5px; }

    .tdw .tdw-terms { gap: 6px; }
    .tdw .tdw-term { padding-top: 7px; padding-bottom: 7px; }
    /* One line, so the pinned button leaves room for the terms. */
    .tdw .tdw-harder { min-height: 0; padding: 10px 10px 8px; border-radius: 18px; font-size: min(40px, 10.6vw); }

    .tdw .tdw-gen-pct { font-size: 56px; }
    .tdw .tdw-tap { min-height: 104px; border-radius: 22px; }
    .tdw .tdw-tap-big { font-size: 36px; }

    .tdw .tdw-addr { gap: 10px; padding: 14px; }
    .tdw .tdw-blur { height: 48px; }
  }

  /* Shorter still: the prize bar, or an ad playing, on a short phone. The
     amount presets stay above the fold. */
  @container tdw-stage (max-height: 420px) {
    .tdw .tdw-step { gap: 8px; }
    .tdw .tdw-preset { min-height: 36px; }
  }

  /* A 375x667 phone with the prize bar or an ad playing: tighter spacing
     only, nothing changes size. */
  @container tdw-stage (max-height: 400px) {
    .tdw .tdw-body { padding-top: 12px; }
    .tdw .tdw-step { gap: 6px; }
    .tdw .tdw-amt-wrap { gap: 6px; }
    .tdw .tdw-slider { gap: 2px; }
  }

  /* Both at once: a smaller number and badge, and the badge's caption on
     its row instead of under it. The row keeps the height of the badge at
     its biggest, so the slider still doesn't move, and "Everything" stays
     above the fold. */
  @container tdw-stage (max-height: 370px) {
    .tdw .tdw-amt-num { font-size: 40px; }
    .tdw .tdw-boost-row {
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      min-height: 40px;
    }
    .tdw .tdw-boost { flex: none; font-size: calc(11px * var(--tdw-boost)); }
    .tdw .tdw-boost-cap { flex: 1 1 0; min-width: 0; }
  }
}

/* Short phones (375x667 and the like): the queue bar has two rows, so the
   row of step dots goes; "Step 2 of 7: Amount" in the head still says where
   you are. */
@media (max-width: 640px) and (max-height: 700px) {
  .tdw .tdw-head { grid-template-areas: "brand count x"; }
  .tdw .tdw-steps { display: none; }
}

/* -------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  dialog.tdw,
  .tdw *,
  .tdw *::before,
  .tdw *::after,
  .tdw-handoff,
  .tdw-gift {
    animation: none !important;
    transition: none !important;
  }
}