/* Temuliquid gags layer (gags.css)

   Loss coupons (full screen), stickers and milestone banners (the stack at
   the top), the press release, withdrawal tracking, the order journey card
   and the "We just shipped" ticker. Cheap on purpose: loud red, orange and
   yellow, dashed coupon borders, starburst stickers. Every class starts with
   tg-. The only rules outside .tg are the shake classes that gags.js puts on
   <html>. Every animation sits inside prefers-reduced-motion: no-preference. */

/* ------------------------------------------------------------- tokens */

.tg {
  --tg-ink: #111;
  --tg-paper: #fff;
  --tg-cream: #FFF7E6;
  --tg-red: #FF2A1A;
  --tg-red-ink: #E01A0B;
  --tg-red-deep: #A30D00;
  --tg-orange: #FF7A00;
  --tg-yellow: #FFD400;
  --tg-muted: #6B4A3A;
  --tg-hair: #E8D9C8;
  --tg-dim: rgba(0, 0, 0, 0.72);
  --tg-big: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --tg-text: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tg-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tg-star: polygon(50% 0%, 58% 9.8%, 69.1% 3.8%, 72.8% 15.9%, 85.4% 14.6%, 84.1% 27.2%, 96.2% 30.9%, 90.2% 42%, 100% 50%, 90.2% 58%, 96.2% 69.1%, 84.1% 72.8%, 85.4% 85.4%, 72.8% 84.1%, 69.1% 96.2%, 58% 90.2%, 50% 100%, 42% 90.2%, 30.9% 96.2%, 27.2% 84.1%, 14.6% 85.4%, 15.9% 72.8%, 3.8% 69.1%, 9.8% 58%, 0% 50%, 9.8% 42%, 3.8% 30.9%, 15.9% 27.2%, 14.6% 14.6%, 27.2% 15.9%, 30.9% 3.8%, 42% 9.8%);
}

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

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

.tg p,
.tg h2,
.tg dl,
.tg dd {
  margin: 0;
  max-width: none;
}

.tg-paused,
.tg-paused *,
.tg-paused *::before,
.tg-paused *::after {
  animation-play-state: paused !important;
}

/* ------------------------------------------------------- screen shake */
/* The class goes on <html>. Each direct child of <body> moves on its own,
   so fixed bars and open dialogs shake in place. Our own layers (.tg) stay
   put; a coupon shakes its card instead (tg-quake-*). */

@media (prefers-reduced-motion: no-preference) {
  html.tg-shake-light body > :not(.tg) { animation: tg-shake-light 320ms linear both; }
  html.tg-shake-medium body > :not(.tg) { animation: tg-shake-medium 460ms linear both; }
  html.tg-shake-strong body > :not(.tg) { animation: tg-shake-strong 620ms linear both; }

  .tg-stage.tg-quake-light .tg-cwrap { animation: tg-shake-light 320ms linear both; }
  .tg-stage.tg-quake-medium .tg-cwrap { animation: tg-shake-medium 460ms linear both; }
  .tg-stage.tg-quake-strong .tg-cwrap { animation: tg-quake-strong 620ms linear both; }
}

@keyframes tg-shake-light {
  0%, 100% { translate: 0 0; }
  20% { translate: -4px 1px; }
  40% { translate: 4px -1px; }
  60% { translate: -3px 1px; }
  80% { translate: 2px 0; }
}

@keyframes tg-shake-medium {
  0%, 100% { translate: 0 0; }
  12% { translate: -8px 3px; }
  24% { translate: 7px -3px; }
  36% { translate: -6px 2px; }
  48% { translate: 6px 3px; }
  60% { translate: -4px -2px; }
  72% { translate: 3px 1px; }
  86% { translate: -2px 0; }
}

@keyframes tg-shake-strong {
  0%, 100% { translate: 0 0; }
  8% { translate: -12px 5px; }
  16% { translate: 12px -4px; }
  24% { translate: -11px -5px; }
  32% { translate: 10px 5px; }
  42% { translate: -8px 3px; }
  52% { translate: 7px -3px; }
  62% { translate: -5px 2px; }
  74% { translate: 3px -1px; }
  86% { translate: -2px 1px; }
}

@keyframes tg-quake-strong {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  8% { translate: -12px 5px; rotate: -1deg; }
  16% { translate: 12px -4px; rotate: 0.8deg; }
  24% { translate: -11px -5px; rotate: -0.6deg; }
  32% { translate: 10px 5px; rotate: 0.5deg; }
  42% { translate: -8px 3px; rotate: -0.3deg; }
  52% { translate: 7px -3px; rotate: 0.2deg; }
  62% { translate: -5px 2px; rotate: 0deg; }
  74% { translate: 3px -1px; }
  86% { translate: -2px 1px; }
}

@keyframes tg-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes tg-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes tg-pop-in {
  0% { opacity: 0; scale: 0.82; }
  65% { opacity: 1; scale: 1.03; }
  100% { opacity: 1; scale: 1; }
}

@keyframes tg-drop-in {
  0% { opacity: 0; translate: 0 -14px; scale: 0.94; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes tg-countdown {
  from { scale: 1 1; }
  to { scale: 0 1; }
}

/* ---------------------------------------------------------- the stage */

dialog.tg-stage {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tg-ink);
  font-family: var(--tg-text);
  font-size: 16px;
  line-height: 1.35;
  text-align: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

dialog.tg-stage[open] {
  display: block;
}

dialog.tg-stage::backdrop {
  background: transparent;
}

dialog.tg-stage:focus,
dialog.tg-stage:focus-visible {
  outline: none;
  box-shadow: none;
}

.tg-stage .tg-dim {
  position: fixed;
  inset: 0;
  background: var(--tg-dim);
}

.tg-stage .tg-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  width: 100%;
  min-height: 100%;
  padding: 60px 12px 36px;
}

.tg button {
  -webkit-tap-highlight-color: transparent;
}

.tg button:focus-visible {
  outline: 3px solid var(--tg-yellow);
  outline-offset: 3px;
}

/* The small round X. */
.tg .tg-x {
  position: absolute;
  z-index: 4;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  color: var(--tg-paper);
  cursor: pointer;
}

.tg .tg-x svg {
  display: block;
  width: 12px;
  height: 12px;
}

.tg .tg-x:hover {
  background: rgba(0, 0, 0, 0.5);
}

.tg .tg-close-fixed {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  background: var(--tg-paper);
  color: var(--tg-ink);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}

.tg .tg-close-fixed svg {
  width: 14px;
  height: 14px;
}

.tg .tg-close-fixed:hover {
  background: var(--tg-yellow);
}

/* Starburst sticker: the star is clipped, the shadow sits on the parent. */
.tg .tg-star {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--tg-yellow);
  clip-path: var(--tg-star);
}

.tg .tg-star-text {
  color: var(--tg-red-ink);
  font: 900 28px/0.9 var(--tg-big);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ---------------------------------------------------------- loss coupon */

.tg .tg-cwrap {
  position: relative;
  width: min(560px, 100%);
}

.tg .tg-cpop {
  position: relative;
}

.tg .tg-burst {
  position: absolute;
  z-index: 3;
  top: -46px;
  left: -24px;
  width: 94px;
  height: 94px;
  rotate: -14deg;
  filter: drop-shadow(0 4px 0 rgba(90, 10, 0, 0.55));
  pointer-events: none;
}

.tg .tg-burst[data-len='4'] .tg-star-text { font-size: 25px; }
.tg .tg-burst[data-len='5'] .tg-star-text { font-size: 22px; }
.tg .tg-burst[data-len='6'] .tg-star-text { font-size: 19px; }

.tg .tg-coupon {
  position: relative;
  padding: 50px 24px 16px;
  border-radius: 24px;
  background: linear-gradient(172deg, #FF2A1A 0%, #FF3014 46%, #FF5C0A 100%);
  color: var(--tg-paper);
  box-shadow:
    0 0 0 4px var(--tg-yellow),
    0 10px 0 4px rgba(90, 10, 0, 0.6),
    0 30px 60px rgba(0, 0, 0, 0.5);
}

/* The dashed coupon border. */
.tg .tg-coupon::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 2px dashed rgba(255, 255, 255, 0.62);
  border-radius: 16px;
  pointer-events: none;
}

/* gags.js sizes the shout to fill the card (--tg-size); this is the guess
   before it measures. */
.tg .tg-shout {
  --tg-fs: clamp(34px, calc((min(560px, 100vw - 24px) - 72px) / (var(--tg-chars, 10) * 0.47)), 108px);
  margin: 0 0 12px;
  padding: 0 12px;
  color: var(--tg-paper);
  font-family: var(--tg-big);
  font-size: var(--tg-size, var(--tg-fs));
  font-style: normal;
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: 0.01em;
  text-shadow: 0 0.055em 0 var(--tg-red-deep);
}

.tg .tg-shout-line {
  display: block;
  width: fit-content;
  margin: 0 auto;
  white-space: nowrap;
}

.tg .tg-what {
  max-width: 34ch;
  margin: 0 auto;
  color: var(--tg-paper);
  font: 600 clamp(15px, 0.55rem + 0.75vw, 19px)/1.34 var(--tg-text);
  text-wrap: pretty;
}

.tg .tg-why {
  width: fit-content;
  max-width: 100%;
  margin: 10px auto 0;
  padding: 5px 12px 6px;
  border-radius: 999px;
  background: var(--tg-yellow);
  color: var(--tg-ink);
  font: 700 14px/1.25 var(--tg-text);
}

/* The price tag: a cream ticket, notched where it tears. */
.tg .tg-ticket {
  --tg-notch: 42%;
  display: grid;
  grid-template-columns: var(--tg-notch) minmax(0, 1fr);
  margin: 16px 0 0;
  border-radius: 14px;
  background: var(--tg-cream);
  color: var(--tg-ink);
  text-align: left;
  -webkit-mask:
    radial-gradient(circle 11px at var(--tg-notch) 0, #0000 96%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 11px at var(--tg-notch) 100%, #0000 96%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle 11px at var(--tg-notch) 0, #0000 96%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 11px at var(--tg-notch) 100%, #0000 96%, #000) bottom / 100% 51% no-repeat;
}

.tg .tg-stub {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 5px;
  min-width: 0;
  padding: 16px 10px 16px 16px;
}

.tg .tg-stub-pre {
  color: var(--tg-muted);
  font: 700 12px/1.2 var(--tg-text);
}

.tg .tg-stub-big {
  max-width: 100%;
  color: var(--tg-red-ink);
  font-family: var(--tg-big);
  font-size: var(--tg-size, clamp(32px, 1.6rem + 1.1vw, 46px));
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.tg .tg-stub-small {
  color: var(--tg-ink);
  font: 700 13px/1.25 var(--tg-text);
}

.tg .tg-rows {
  display: grid;
  align-content: center;
  gap: 9px;
  min-width: 0;
  padding: 14px 16px;
  border-left: 2px dashed #EFA27A;
}

.tg .tg-row dt {
  color: var(--tg-muted);
  font: 700 12px/1.2 var(--tg-text);
}

.tg .tg-row dd {
  margin-top: 2px;
  color: var(--tg-ink);
  font: 800 18px/1.15 var(--tg-text);
  overflow-wrap: anywhere;
}

.tg .tg-row.is-was dd {
  color: #8C8C8C;
  font-weight: 700;
}

.tg .tg-row.is-was s {
  text-decoration-color: var(--tg-red-ink);
  text-decoration-thickness: 2px;
}

/* The deadpan line, on a yellow sash. */
.tg .tg-dead {
  margin: 16px -12px 0;
  padding: 9px 14px 10px;
  background: var(--tg-yellow);
  color: var(--tg-ink);
  font: 800 clamp(15px, 0.6rem + 0.6vw, 18px)/1.25 var(--tg-text);
  rotate: -1.2deg;
  box-shadow: 0 3px 0 rgba(90, 10, 0, 0.45);
}

.tg .tg-clock {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 16px;
  color: var(--tg-paper);
  font: 700 15px/1.2 var(--tg-text);
}

.tg .tg-digits {
  padding: 6px 9px 5px;
  border-radius: 8px;
  background: var(--tg-ink);
  color: var(--tg-yellow);
  font: 900 24px/1 var(--tg-big);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

/* The big orange button. */
.tg .tg-spin {
  display: block;
  width: 100%;
  min-height: 58px;
  margin-top: 14px;
  padding: 12px 20px;
  border: 3px solid var(--tg-paper);
  border-radius: 999px;
  background: linear-gradient(180deg, #FFA126 0%, #FF7A00 52%, #F25F00 100%);
  color: var(--tg-paper);
  font: 800 clamp(19px, 1rem + 0.4vw, 22px)/1.1 var(--tg-text);
  text-shadow: 0 1px 0 rgba(120, 40, 0, 0.45);
  box-shadow: 0 6px 0 #A63F00, 0 12px 22px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}

.tg .tg-spin:hover {
  background: linear-gradient(180deg, #FFB040 0%, #FF8A10 52%, #F56A00 100%);
}

.tg .tg-spin:active {
  translate: 0 3px;
  box-shadow: 0 3px 0 #A63F00, 0 8px 16px rgba(0, 0, 0, 0.25);
}

.tg .tg-share {
  display: block;
  margin: 10px auto 0;
  padding: 6px 10px;
  border: 0;
  background: none;
  color: var(--tg-paper);
  font: 700 14px/1.2 var(--tg-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.tg .tg-shared {
  max-width: 34ch;
  margin: 12px auto 4px;
  color: var(--tg-paper);
  font: 700 14px/1.35 var(--tg-text);
}

@media (prefers-reduced-motion: no-preference) {
  .tg-stage .tg-dim { animation: tg-fade-in 140ms ease-out both; }
  .tg-scene-coupon .tg-cpop { animation: tg-pop-in 200ms cubic-bezier(0.2, 1.4, 0.45, 1) both; }
  .tg-scene-document .tg-paper,
  .tg-scene-document .tg-track { animation: tg-pop-in 240ms cubic-bezier(0.2, 1.2, 0.45, 1) both; }
  .tg-stage.is-out { animation: tg-fade-out 160ms ease-in both; }
}

/* --------------------------------------------- stickers and banners */

.tg.tg-dock {
  position: fixed;
  inset: auto;
  top: var(--tg-dock-top, 12px);
  left: 50%;
  z-index: 2147483100;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(420px, calc(100vw - 24px));
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--tg-paper);
  font-family: var(--tg-text);
  text-align: left;
  translate: -50% 0;
  pointer-events: none;
}

.tg.tg-dock.is-corner {
  top: 16px;
  left: auto;
  right: 16px;
  width: min(380px, calc(50vw - 300px));
  translate: none;
}

/* Beside a wheel or the deposit wizard: top left, away from the order column. */
.tg.tg-dock.is-corner-left {
  left: 16px;
  right: auto;
  width: min(360px, calc(50vw - 300px));
  translate: none;
}

.tg .tg-sticky {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 42px 10px 10px;
  border-radius: 16px;
  background: linear-gradient(172deg, #FF2A1A 0%, #FF4A0C 100%);
  color: var(--tg-paper);
  box-shadow:
    0 0 0 3px var(--tg-yellow),
    0 6px 0 3px rgba(90, 10, 0, 0.5),
    0 18px 34px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
}

.tg .tg-sticky::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1.5px dashed rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  pointer-events: none;
}

.tg .tg-sticky-burst {
  position: relative;
  width: 58px;
  height: 58px;
  rotate: -10deg;
  filter: drop-shadow(0 2px 0 rgba(90, 10, 0, 0.5));
}

.tg .tg-sticky-burst .tg-star-text { font-size: 19px; }
.tg .tg-sticky-burst[data-len='5'] .tg-star-text { font-size: 16px; }
.tg .tg-sticky-burst[data-len='6'] .tg-star-text { font-size: 14px; }

.tg .tg-sticky-text {
  position: relative;
  min-width: 0;
}

.tg .tg-sticky-title {
  font: 900 24px/1 var(--tg-big);
  letter-spacing: 0.01em;
}

.tg .tg-sticky-line {
  margin-top: 4px;
  font: 600 14px/1.3 var(--tg-text);
}

.tg .tg-sticky-x {
  position: absolute;
  z-index: 2;
  top: 9px;
  right: 9px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  color: var(--tg-paper);
  cursor: pointer;
}

.tg .tg-sticky-x svg {
  display: block;
  width: 10px;
  height: 10px;
}

.tg .tg-sticky-x:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* Milestone banners: yellow, good news, same cheap stack. */
.tg .tg-sticky.tg-tone-yellow {
  background: var(--tg-yellow);
  color: var(--tg-ink);
  box-shadow:
    0 0 0 3px var(--tg-red),
    0 6px 0 3px rgba(90, 10, 0, 0.45),
    0 18px 34px rgba(0, 0, 0, 0.3);
}

.tg .tg-tone-yellow::before {
  border-color: rgba(0, 0, 0, 0.3);
}

.tg .tg-tone-yellow .tg-star {
  background: var(--tg-red);
}

.tg .tg-tone-yellow .tg-star-text {
  color: var(--tg-yellow);
}

.tg .tg-tone-yellow .tg-sticky-title {
  font: 800 17px/1.25 var(--tg-text);
}

.tg .tg-tone-yellow .tg-sticky-x {
  background: rgba(0, 0, 0, 0.12);
  color: var(--tg-ink);
}

@media (prefers-reduced-motion: no-preference) {
  .tg .tg-sticky { animation: tg-drop-in 180ms cubic-bezier(0.2, 1.4, 0.45, 1) both; }
  .tg .tg-sticky.is-shake { animation: tg-drop-in 180ms cubic-bezier(0.2, 1.4, 0.45, 1) both, tg-shake-light 320ms linear 140ms both; }
  .tg .tg-sticky.is-out { animation: tg-fade-out 150ms ease-in both; }
}

/* ------------------------------------------------------ press release */

.tg-k-press .tg-body {
  padding: 72px 12px 56px;
}

.tg .tg-paper {
  position: relative;
  width: min(820px, 100%);
  padding: clamp(28px, 6vw, 64px) clamp(22px, 6vw, 72px) clamp(28px, 5vw, 52px);
  background: var(--tg-paper);
  color: #141414;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18), 0 30px 80px rgba(0, 0, 0, 0.5);
  text-align: left;
}

.tg .tg-mark {
  display: block;
  flex: none;
  width: 30px;
  height: 30px;
}

.tg .tg-pr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 3px solid var(--tg-ink);
}

.tg .tg-pr-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--tg-ink);
  font: 800 26px/1 var(--tg-big);
}

.tg .tg-pr-kind {
  color: #5E6670;
  font: 600 13px/1 var(--tg-text);
}

.tg .tg-pr-release {
  margin-top: 28px;
  color: var(--tg-ink);
  font: 700 13px/1.2 var(--tg-text);
  letter-spacing: 0.14em;
}

.tg .tg-pr-dateline {
  margin-top: 8px;
  color: #5E6670;
  font: 700 13px/1.3 var(--tg-text);
  letter-spacing: 0.04em;
}

.tg .tg-pr-headline {
  margin: 18px 0 22px;
  color: var(--tg-ink);
  font: 800 clamp(38px, 1.6rem + 3.4vw, 66px)/0.94 var(--tg-big);
  text-wrap: balance;
}

.tg .tg-pr-body p {
  margin: 0 0 14px;
  color: #1C1C1C;
  font: 400 clamp(16px, 0.95rem + 0.2vw, 18px)/1.62 var(--tg-text);
}

.tg .tg-pr-quote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 6px solid var(--tg-yellow);
}

.tg .tg-pr-quote p {
  color: var(--tg-ink);
  font: 600 clamp(19px, 1rem + 0.7vw, 25px)/1.4 var(--tg-text);
}

.tg .tg-pr-about {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid #CDD2D7;
  color: #1C1C1C;
  font: 400 15px/1.55 var(--tg-text);
}

.tg .tg-pr-about-label {
  color: var(--tg-ink);
  font-weight: 700;
}

.tg .tg-pr-contact {
  margin-top: 10px;
  color: #1C1C1C;
  font: 400 15px/1.55 var(--tg-text);
}

.tg .tg-pr-end {
  margin-top: 30px;
  color: var(--tg-ink);
  font: 700 16px/1 var(--tg-text);
  letter-spacing: 0.4em;
  text-align: center;
}

/* -------------------------------------------------- package tracking */

.tg .tg-track {
  position: relative;
  width: min(520px, 100%);
  overflow: hidden;
  border-radius: 20px;
  background: var(--tg-paper);
  color: var(--tg-ink);
  text-align: left;
  box-shadow:
    0 0 0 4px var(--tg-yellow),
    0 10px 0 4px rgba(90, 10, 0, 0.5),
    0 30px 60px rgba(0, 0, 0, 0.5);
}

.tg .tg-track-head {
  padding: 22px 62px 20px 22px;
  background: linear-gradient(172deg, #FF2A1A 0%, #FF5C0A 100%);
  color: var(--tg-paper);
}

.tg .tg-track-kick {
  font: 700 13px/1 var(--tg-text);
  letter-spacing: 0.02em;
}

.tg .tg-track-title {
  margin-top: 8px;
  color: var(--tg-paper);
  font: 900 clamp(30px, 1.3rem + 1.7vw, 42px)/0.95 var(--tg-big);
  text-shadow: 0 0.05em 0 var(--tg-red-deep);
  text-wrap: balance;
}

.tg .tg-track-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 18px 22px 8px;
  padding: 10px 14px;
  border: 2px dashed #EFA27A;
  border-radius: 12px;
  background: var(--tg-cream);
}

.tg .tg-track-facts dt {
  color: var(--tg-muted);
  font: 700 11px/1 var(--tg-text);
}

.tg .tg-track-facts dd {
  margin-top: 5px;
  color: var(--tg-ink);
  font: 800 15px/1.2 var(--tg-text);
}

.tg .tg-track-mono dd {
  font: 600 13px/1.3 var(--tg-mono);
}

.tg .tg-tl {
  position: relative;
  margin: 10px 22px 0;
}

.tg .tg-tl-rail,
.tg .tg-tl-fill {
  position: absolute;
  top: var(--tg-rail-top, 16px);
  left: 11px;
  width: 3px;
}

.tg .tg-tl-rail {
  height: var(--tg-rail-h, 0px);
  background: repeating-linear-gradient(180deg, #D6C9BB 0 6px, transparent 6px 10px);
}

.tg .tg-tl-fill {
  height: var(--tg-fill, 0px);
  background: var(--tg-ink);
}

.tg .tg-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tg .tg-step {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 36px;
  padding: 3px 0;
  color: var(--tg-ink);
  font: 600 15px/1.25 var(--tg-text);
}

.tg .tg-node {
  position: relative;
  z-index: 1;
  width: 25px;
  height: 25px;
  border: 3px solid #D6C9BB;
  border-radius: 50%;
  background: var(--tg-paper);
}

.tg .tg-step.is-done .tg-node {
  border-color: var(--tg-ink);
  background: var(--tg-ink);
}

.tg .tg-step.is-done .tg-node::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid var(--tg-yellow);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.tg .tg-step.is-current .tg-node {
  border-color: var(--tg-red-ink);
  background: var(--tg-yellow);
}

.tg .tg-step.is-current .tg-node::before {
  content: '';
  position: absolute;
  inset: -9px;
  border: 3px solid var(--tg-red);
  border-radius: 50%;
  opacity: 0.8;
}

.tg .tg-step.is-current .tg-step-text {
  color: var(--tg-red-ink);
  font-weight: 800;
}

.tg .tg-step.is-pending {
  color: #8A8178;
}

.tg .tg-step.is-pending .tg-node {
  border-style: dashed;
}

.tg .tg-track-msg {
  margin: 14px 22px 0;
  padding: 10px 12px;
  border-left: 4px solid var(--tg-yellow);
  background: var(--tg-cream);
  color: var(--tg-ink);
  font: 500 14px/1.45 var(--tg-text);
}

.tg .tg-track-actions {
  display: flex;
  padding: 18px 22px 24px;
}

.tg .tg-spin.tg-spin-small {
  width: auto;
  min-height: 50px;
  margin: 0;
  padding: 10px 26px;
  border: 0;
  font-size: 18px;
}

@media (prefers-reduced-motion: no-preference) {
  .tg .tg-tl-fill { transition: height 640ms cubic-bezier(0.3, 0.7, 0.2, 1); }
  .tg .tg-tl.is-reset .tg-tl-fill { transition: none; }
  .tg .tg-step.is-current .tg-node::before { animation: tg-ping 1100ms ease-out infinite; }
}

@keyframes tg-ping {
  0% { opacity: 0.95; scale: 0.6; }
  100% { opacity: 0; scale: 1.5; }
}

/* ------------------------------------------------------ order journey */

.tg.tg-journey {
  position: fixed;
  inset: auto;
  z-index: 2147482000;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: 0;
  padding: 12px 14px 14px;
  overflow: hidden;
  border: 2px solid var(--tg-ink);
  border-radius: 14px;
  background: var(--tg-paper);
  color: var(--tg-ink);
  box-shadow: 0 6px 0 var(--tg-ink);
  font: 500 14px/1.35 var(--tg-text);
  text-align: left;
  cursor: pointer;
}

.tg.tg-journey[data-side='right'] {
  right: 16px;
  bottom: calc(var(--sb-h, 0px) + 16px);
}

.tg.tg-journey[data-side='left'] {
  left: 16px;
  bottom: calc(var(--sb-h, 0px) + 16px);
}

.tg.tg-journey[data-side='top'] {
  top: 12px;
  left: 12px;
  right: 12px;
  width: auto;
}

.tg .tg-j-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  margin-bottom: 4px;
  padding-bottom: 8px;
  border-bottom: 2px dashed #EFA27A;
}

.tg .tg-j-title {
  color: var(--tg-red-ink);
  font: 900 24px/1 var(--tg-big);
}

.tg .tg-j-meta {
  color: var(--tg-muted);
  font: 600 12px/1.3 var(--tg-text);
}

.tg .tg-j-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tgj;
}

.tg .tg-j-step {
  position: relative;
  padding: 6px 0 6px 28px;
  counter-increment: tgj;
}

.tg .tg-j-step + .tg-j-step {
  border-top: 1px dashed var(--tg-hair);
}

.tg .tg-j-step::before {
  content: counter(tgj);
  position: absolute;
  top: 6px;
  left: 0;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--tg-ink);
  color: var(--tg-yellow);
  font: 700 11px/1 var(--tg-text);
}

.tg .tg-lane {
  display: grid;
  gap: 3px;
  margin: 1px 0 6px;
}

.tg .tg-lane:last-child {
  margin-bottom: 1px;
}

.tg .tg-lane-label {
  font: 600 12.5px/1.2 var(--tg-text);
}

.tg .tg-lane-track {
  position: relative;
  display: block;
  height: 11px;
  border: 2px solid var(--tg-ink);
  border-radius: 6px;
  background: #F3F0EC;
  overflow: hidden;
}

.tg .tg-lane-fill {
  position: absolute;
  inset: 0;
  background: #0B9F5B;
  transform-origin: 0 50%;
}

.tg .tg-lane-you .tg-lane-fill {
  background: var(--tg-red);
  scale: 0.07 1;
}

.tg .tg-lane-flag {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  background: conic-gradient(var(--tg-ink) 25%, var(--tg-paper) 0 50%, var(--tg-ink) 0 75%, var(--tg-paper) 0) 0 0 / 5px 4px;
}

.tg .tg-j-timer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--tg-orange);
  transform-origin: 0 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .tg.tg-journey { animation: tg-drop-in 220ms cubic-bezier(0.2, 1.3, 0.45, 1) both; }
  .tg.tg-journey.is-out { animation: tg-fade-out 200ms ease-in both; }
  .tg .tg-j-race .tg-lane-you .tg-lane-fill { animation: tg-crawl 5200ms linear both; }
  .tg .tg-j-timer { animation: tg-countdown 7000ms linear both; }
}

@keyframes tg-crawl {
  from { scale: 0 1; }
  to { scale: 0.07 1; }
}

/* ------------------------------------------------------------- ticker */

.tg.tg-ticker {
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font: inherit;
}

.tg .tg-tick {
  grid-area: 1 / 1;
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tg .tg-tick.is-enter {
  opacity: 0;
  translate: 0 0.7em;
}

.tg .tg-tick.is-leave {
  opacity: 0;
  translate: 0 -0.7em;
}

.tg .tg-tick-label {
  font-weight: 700;
}

.tg .tg-tick.is-scroll {
  text-overflow: clip;
}

@media (prefers-reduced-motion: no-preference) {
  .tg .tg-tick { transition: opacity 600ms ease, translate 600ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .tg .tg-tick.is-scroll .tg-tick-inner {
    display: inline-block;
    animation: tg-tick-scroll var(--tg-scroll-ms, 4000ms) linear 1000ms both;
  }
}

@keyframes tg-tick-scroll {
  from { translate: 0 0; }
  to { translate: var(--tg-scroll, 0px) 0; }
}

/* -------------------------------------------------------- small screens */

@media (max-width: 640px) {
  .tg-stage .tg-body {
    padding: 52px 12px 28px;
  }

  .tg .tg-burst {
    top: -34px;
    left: -6px;
    width: 74px;
    height: 74px;
  }

  .tg .tg-burst .tg-star-text { font-size: 22px; }
  .tg .tg-burst[data-len='4'] .tg-star-text { font-size: 20px; }
  .tg .tg-burst[data-len='5'] .tg-star-text { font-size: 18px; }
  .tg .tg-burst[data-len='6'] .tg-star-text { font-size: 15px; }

  .tg .tg-coupon {
    padding: 42px 16px 12px;
    border-radius: 20px;
  }

  .tg .tg-shout {
    --tg-fs: clamp(32px, calc((100vw - 24px - 52px) / (var(--tg-chars, 10) * 0.47)), 84px);
    padding: 0 4px;
  }

  .tg .tg-ticket {
    --tg-notch: 44%;
  }

  .tg .tg-stub {
    padding: 14px 8px 14px 12px;
  }

  .tg .tg-stub-big {
    font-size: var(--tg-size, clamp(26px, 8vw, 36px));
  }

  .tg .tg-stub-small {
    font-size: 12px;
  }

  .tg .tg-rows {
    gap: 7px;
    padding: 12px 12px;
  }

  .tg .tg-row dd {
    font-size: 16px;
  }

  .tg .tg-dead {
    margin-inline: -6px;
  }

  .tg .tg-spin {
    min-height: 52px;
  }

  .tg .tg-sticky-title {
    font-size: 21px;
  }

  .tg .tg-track-head {
    padding: 20px 56px 18px 18px;
  }

  .tg .tg-track-facts,
  .tg .tg-tl,
  .tg .tg-track-msg {
    margin-inline: 18px;
  }

  .tg .tg-track-actions {
    padding: 16px 18px 20px;
  }

  .tg.tg-journey {
    padding: 10px 12px 12px;
  }

  .tg .tg-j-title {
    font-size: 21px;
  }
}

/* Short laptop screens: everything still fits without scrolling. */
@media (max-height: 760px) {
  .tg-stage .tg-body {
    padding-top: 52px;
    padding-bottom: 24px;
  }

  .tg .tg-coupon {
    padding-top: 44px;
  }

  .tg .tg-burst {
    top: -40px;
    width: 84px;
    height: 84px;
  }

  .tg .tg-shout {
    --tg-fs: clamp(32px, calc((min(560px, 100vw - 24px) - 72px) / (var(--tg-chars, 10) * 0.47)), 88px);
    margin-bottom: 10px;
  }

  .tg .tg-ticket,
  .tg .tg-dead,
  .tg .tg-clock {
    margin-top: 12px;
  }

  .tg .tg-spin {
    min-height: 52px;
    margin-top: 12px;
  }

  .tg .tg-share {
    margin-top: 6px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .tg-stage *,
  .tg-stage *::before,
  .tg-stage *::after,
  .tg.tg-dock *,
  .tg.tg-journey,
  .tg.tg-journey *,
  .tg.tg-ticker * {
    animation: none !important;
    transition: none !important;
  }

  /* Overlays only fade. */
  .tg-stage {
    animation: tg-fade-in 120ms linear both;
  }

  .tg-stage.is-out {
    animation: tg-fade-out 90ms linear both;
  }

  .tg .tg-j-timer {
    display: none;
  }
}