:root {
  --bg:      #f5f5f7;
  --tile:    #ebebef;
  --tile-hi: #e3e3e8;
  --tile-btn: #e1e1e7;
  --white:   #ffffff;
  --cream:   #f6f0dc;
  --ink:     #1d1d1f;
  --ink-2:   #6e6e73;
  --ink-3:   #8e8e93;
  --blue:    #0098ea;
  --green:   #1a8a45;
  --red:     #c8382c;
  --u: max(calc(100vw / 489), .72px);
  --cap: calc(16 * var(--u));
  --radius: calc(18 * var(--u));
  --gap: calc(10 * var(--u));
  --pad: calc(12 * var(--u));
  --sf: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, Roboto, Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sf);
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.slide {
  display: grid;
  gap: var(--gap);
  padding: var(--pad);
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  min-width: 0;
  padding: 16px 14px;
  border-radius: var(--radius);
  background: var(--tile);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.2, .8, .3, 1);
  will-change: transform;
}

.tile.tilting { transition: transform .12s ease-out; }

.big {
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .95;
}
.mid {
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.head {
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.cap {
  font-size: var(--cap);
  font-weight: 400;
  color: var(--ink-2);
  letter-spacing: 0;
  line-height: 1.45;
}

.cap-top {
  position: absolute;
  left: 0; right: 0;
  font-size: var(--cap);
  color: var(--ink-2);
  letter-spacing: 0;
  line-height: 1.45;
}
.t-bots { align-items: stretch; justify-content: flex-start; }
.t-mcap, .t-liq { gap: 8px; }
.t-mcap .cap-top, .t-liq .cap-top { position: static; }

.t-price { justify-content: center; --spark: var(--ink-2); }
.t-price.up   { --spark: var(--green); }
.t-price.down { --spark: var(--red); }

.link-top {
  position: absolute;
  left: 50%;
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--ink);
  font-weight: 600;
  color: #fff;
  letter-spacing: -.01em;
  white-space: nowrap;
  transform: translate(-50%, calc(100% + 18px));
  opacity: 0;
  transition: background .18s ease, transform .32s cubic-bezier(.2, .8, .3, 1), opacity .2s ease;
}
.t-price:hover .link-top { transform: translate(-50%, 0); opacity: 1; }
.t-price:hover .link-top:hover { background: #3a3a3d; }

.change { font-weight: 500; }
.up   .change { color: var(--green); }
.down .change { color: var(--red); }

.spark {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 40px;
  max-height: 150px;
  margin-top: 12px;
  margin-bottom: -4px;
  overflow: visible;
}
.spark-line {
  fill: none;
  stroke: var(--spark);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.s0 { stop-color: var(--spark); stop-opacity: .30; }
.s1 { stop-color: var(--spark); stop-opacity: 0; }

.t-star {
  background: linear-gradient(180deg, #bce4fc 0%, #a4d9fa 62%, #96d2f8 100%);
  justify-content: flex-end;
  gap: 0;
  padding: 18px 16px 30px;
}

.rays {
  position: absolute;
  z-index: 1;
  bottom: -14%;
  left: 50%;
  height: 300%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, 50%);
  -webkit-mask-image: linear-gradient(to top, transparent 42%, rgba(0, 0, 0, .5) 52%, #000 60%, rgba(0, 0, 0, .8) 74%, rgba(0, 0, 0, .4) 86%, transparent 94%);
  mask-image: linear-gradient(to top, transparent 42%, rgba(0, 0, 0, .5) 52%, #000 60%, rgba(0, 0, 0, .8) 74%, rgba(0, 0, 0, .4) 86%, transparent 94%);
  pointer-events: none;
}
.rays i {
  position: absolute;
  inset: 0;
  display: block;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255, 255, 255, .55) 0deg 6.4deg,
    rgba(255, 255, 255, 0) 6.4deg 12deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 6%, rgba(0, 0, 0, .8) 34%, rgba(0, 0, 0, .5) 62%, transparent 92%);
  mask-image: radial-gradient(closest-side, #000 6%, rgba(0, 0, 0, .8) 34%, rgba(0, 0, 0, .5) 62%, transparent 92%);
  animation: spin 60s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.glow {
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 50%;
  width: 175%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, 50%);
  background: radial-gradient(closest-side,
    #fff 0%,
    #fff 30%,
    rgba(255, 255, 255, .88) 44%,
    rgba(255, 255, 255, .5) 60%,
    rgba(255, 255, 255, .16) 76%,
    rgba(255, 255, 255, 0) 90%);
  filter: blur(4px);
  pointer-events: none;
}

.t-star .tgs-star, .t-star .wordmark, .t-star .cap { position: relative; z-index: 2; }

.tgs-star {
  position: relative;
  flex: 1 1 auto;
  width: min(84%, 460px);
  min-height: 0;
  margin-bottom: 6px;
}
.tgs-star svg { height: 100% !important; }

.wordmark {
  height: clamp(26px, 4.4vw, 58px);
  width: auto;
  margin: 0 auto 4px;
}

.col-left, .col-mid, .col-right, .pair { display: contents; }

.tgs { width: 100%; }
.tgs svg { display: block; }

.row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, .6vw, 10px);
  width: 100%;
  min-height: 0;
  flex: 0 1 auto;
}
.row .tgs {
  width: clamp(40px, 5.2vw, 82px);
  aspect-ratio: 1 / 1;
  flex: none;
  border-radius: 12px;
  transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}
.row .tgs:hover { transform: scale(1.12); }

.plus {
  width: clamp(40px, 5.2vw, 82px);
  aspect-ratio: 1 / 1;
  flex: none;
  display: grid;
  place-items: center;
  perspective: 600px;
  font-size: clamp(13px, 1.2vw, 18px);
  font-weight: 700;
}

.plus-flip {
  position: relative;
  display: block;
  width: 84%;
  height: 84%;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2, .8, .3, 1);
}
.plus-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.plus-front { color: var(--ink-2); }

.plus-front::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px dashed rgba(0, 0, 0, .18);
  border-radius: 50%;
  animation: plus-spin 12s linear infinite;
}
@keyframes plus-spin { to { transform: rotate(360deg); } }
.plus-back  { background: var(--blue); color: #fff; transform: rotateY(180deg); }

.t-pack:hover .plus-flip { transform: rotateY(180deg); }

.t-pack:hover .plus-front::before { animation: none; opacity: 0; }

.t-pack {
  position: relative;
  gap: 6px;
  padding-left: clamp(12px, 1.4vw, 20px);
  padding-right: clamp(12px, 1.4vw, 20px);
}

.row-2 { display: none; }
.two-rows-only { display: none; }
.t-pack { --sticker: clamp(46px, 8.3vw, 100px); }
.t-pack .row { justify-content: space-between; column-gap: clamp(2px, .35vw, 5px); padding: 0; }
.t-pack .row .tgs { width: var(--sticker); }
.t-pack .plus { width: var(--sticker); }

.t-order {
  cursor: pointer;
  flex-direction: row;
  align-items: center;
  gap: clamp(16px, 2.1vw, 32px);
  padding-left: clamp(18px, 2.2vw, 32px);
  padding-right: clamp(18px, 2.2vw, 32px);
  text-align: left;
}

.order-text { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.t-order .head { margin-bottom: 10px; }
.sticker-stage {
  position: relative;
  width: clamp(78px, 7.4vw, 116px);
  aspect-ratio: 1 / 1;
  flex: none;
}
.sticker-stage .tgs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transform: scale(.62);
  transition: opacity .4s ease, transform .55s cubic-bezier(.2, .9, .3, 1);
}
.sticker-stage .tgs.is-on { opacity: 1; transform: scale(1); pointer-events: auto; }
.sticker-stage .tgs:hover { transform: scale(1.08); }

.wreath {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(56px, min(5.2vw, 9.8vh), 86px);
  aspect-ratio: 44 / 32;
  margin-bottom: 14px;
}
.laurel { grid-area: 1 / 1; width: 100%; height: 100%; transform: translateY(-1px); }
.t-ton .ton-mark { position: relative; }

.wreath::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateY(-1px);
  background-image: linear-gradient(108deg,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, .85) 50%,
    rgba(255, 255, 255, 0) 58%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  -webkit-mask: url(../laurel.svg) center / contain no-repeat;
  mask: url(../laurel.svg) center / contain no-repeat;
  animation: glint 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glint-once {
  from { background-position: -80% 0; }
  to   { background-position: 180% 0; }
}

.t-ton.glinting .wreath::after { animation: glint-once .9s ease-in-out; }
.t-ton.glinting .wreath { animation: wreath-pop .9s cubic-bezier(.2, .8, .3, 1); }
.t-ton.glinting .ton-mark { animation: mark-tilt .9s cubic-bezier(.2, .8, .3, 1); }
@keyframes wreath-pop {
  0%   { transform: scale(1); }
  26%  { transform: scale(1.14); }
  58%  { transform: scale(.97); }
  100% { transform: scale(1); }
}
@keyframes mark-tilt {
  0%   { transform: rotate(0deg); }
  30%  { transform: rotate(-9deg); }
  62%  { transform: rotate(6deg); }
  100% { transform: rotate(0deg); }
}
@keyframes glint {
  0%, 70%  { background-position: -80% 0; }
  92%, 100% { background-position: 180% 0; }
}
.t-ton .ton-mark { grid-area: 1 / 1; width: clamp(30px, min(2.9vw, 5.5vh), 46px); height: auto; margin-top: -2%; }
.t-ton { gap: 0; cursor: pointer; }
.t-ton .head { margin-bottom: 10px; }
.t-ton .cap { max-width: 36ch; }
.ton-text { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 0; }

.t-pack .wide-only { display: none; }
.c-wide { display: none; }

.t-tg {
  flex-direction: row;
  gap: clamp(10px, 1.2vw, 18px);
  padding-left: clamp(4px, 0.55vw, 8px);
  text-align: left;
}
.t-tg .tg-mark { width: clamp(30px, min(3.4vw, 6.5vh), 50px); height: auto; flex: none; }
.tg-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tg-text .head { font-size: clamp(15px, 1.3vw, 19px); }

.t-ca {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
  padding: 16px clamp(18px, 2.6vw, 34px);
  border: 0;
  border-radius: var(--radius);
  background: var(--tile);
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.t-ca:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.ca-text { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ca-label {
  font-size: var(--cap);
  color: var(--ink-2);
  letter-spacing: 0;
  line-height: 1.45;
}
.ca {
  font-family: var(--mono);
  font-size: clamp(12px, 2.4vw, 19px);
  letter-spacing: -.02em;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ca-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(38px, 3.5vw, 52px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  transition: background .18s ease;
}
.ca-icon svg { width: 46%; height: 46%; fill: currentColor; grid-area: 1 / 1; }
.i-ok { display: none; }
.t-ca.copied .ca-icon { background: var(--green); }
.t-ca.copied .ca-icon svg { width: 68%; height: 68%; }
.t-ca.copied .i-copy { display: none; }
.t-ca.copied .i-ok { display: block; }

.dex-mark { width: clamp(26px, 2.4vw, 38px); height: auto; }
.t-ston .dex-mark { width: clamp(23px, 2.1vw, 34px); }

.t-ca:hover, .t-tg:hover { background: var(--tile-btn); }

.cream { background: var(--cream); }

.t-days { gap: 0; }
.days-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: transform .38s cubic-bezier(.2, .8, .3, 1), opacity .25s ease;
}
.t-days:hover .days-text,
.t-days.on .days-text { transform: translateY(-150%); opacity: 0; }

.day-duck {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(124%, 208px);
  aspect-ratio: 1 / 1;
  transform: translate(calc(-50% + 24px), 100%);
  opacity: 0;
  transition: opacity .2s ease, transform .38s cubic-bezier(.2, .8, .3, 1);
  pointer-events: none;
}
.t-days:hover .day-duck,
.t-days.on .day-duck { opacity: 1; transform: translate(calc(-50% + 24px), 4%); }

.t-dedust, .t-ston { gap: 13px; }

.t-dedust::after, .t-ston::after {
  content: '';
  position: absolute;
  left: var(--rx, 50%);
  top: var(--ry, 50%);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}
.t-dedust:hover::after, .t-ston:hover::after { animation: ripple .62s ease-out; }
@keyframes ripple {
  from { opacity: .6; transform: scale(0); }
  to   { opacity: 0;  transform: scale(46); }
}

.t-dedust { background: #fbe4c4; color: #8a4f06; }

.t-ston { background: #d5e6fa; color: #14508f; }
.t-dedust .head, .t-ston .head {
  font-size: clamp(14px, 1.25vw, 18px);
  white-space: nowrap;
}

.bots {
  position: relative;
  --cell: clamp(52px, 6.5vw, 80px);
  --bot-gap: clamp(3px, .5vw, 6px);
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--cell));
  gap: var(--bot-gap);
  width: 100%;
  max-width: calc(4 * var(--cell) + 3 * var(--bot-gap));
  margin-inline: auto;
  place-content: center;
}

.bot-hover {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: clamp(10px, 1.2vw, 14px);
  background: rgba(0, 0, 0, .07);
  opacity: 0;
  transform: translateX(0);
  transition: transform .28s cubic-bezier(.2, .8, .3, 1), width .28s cubic-bezier(.2, .8, .3, 1), height .28s cubic-bezier(.2, .8, .3, 1), opacity .18s ease;
  pointer-events: none;
}
.bots.on .bot-hover { opacity: 1; }

.bot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: clamp(10px, 1.2vw, 14px);
}
.bot img {
  width: 64%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 28%;
  object-fit: cover;
  transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}
.bot-round img { border-radius: 50%; }
.bot-square img { border-radius: 0; transform: scale(1.08); }
.bot-plain img { border-radius: 0; }

.bot-x svg {
  grid-area: 1 / 1;
  width: 56%;
  height: auto;
  aspect-ratio: 1 / 1;
  transition: opacity .2s ease, transform .3s cubic-bezier(.2, .8, .3, 1);
}
.bot-x .x-mark    { fill: var(--ink); }
.bot-x .bird-mark { fill: #1d9bf0; opacity: 0; transform: scale(.6) rotate(-14deg); }
.bot-x:hover .x-mark    { opacity: 0; transform: scale(.6) rotate(14deg); }
.bot-x:hover .bird-mark { opacity: 1; transform: scale(1) rotate(0deg); }

.fade-in,
.t-pack .tgs,
.tgs-star,
.bot {
  opacity: 0;
  transition: opacity .5s ease;
}
.fade-in.is-in,
.t-pack .tgs.is-in,
.tgs-star.is-in,
.bot.is-in { opacity: 1; }

.fine-print {
  padding: 4px 22px 16px;
  text-align: center;
  font-size: clamp(11px, .9vw, 13px);
  color: var(--ink-3);
  letter-spacing: 0;
  line-height: 1.45;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 16px);
  background: rgba(29, 29, 31, .94);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 10;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.big  { font-size: calc(66 * var(--u)); }
.mid  { font-size: calc(36 * var(--u)); }
.head { font-size: calc(27 * var(--u)); }
.cap-top { top: calc(14 * var(--u)); }

.tile { gap: calc(4 * var(--u)); padding: calc(18 * var(--u)) calc(16 * var(--u)); }
.t-mcap, .t-liq, .t-supply { gap: calc(9 * var(--u)); }
.t-bots { gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(8 * var(--u)); }

.t-days, .t-bots { aspect-ratio: 1 / 1; }

.t-price { gap: calc(8 * var(--u)); padding: calc(30 * var(--u)) calc(18 * var(--u)); }
.t-price .big { font-size: calc(36 * var(--u)); }
.change { font-size: calc(16 * var(--u)); }
.spark {
  min-height: calc(40 * var(--u));
  max-height: calc(150 * var(--u));
  margin-top: calc(12 * var(--u));
  margin-bottom: calc(-4 * var(--u));
}
.link-top {
  bottom: calc(30 * var(--u));
  gap: calc(5 * var(--u));
  padding: calc(9 * var(--u)) calc(18 * var(--u));
  font-size: calc(15 * var(--u));
  transform: translate(-50%, calc(100% + 18 * var(--u)));
}

.t-star { padding: calc(18 * var(--u)) calc(16 * var(--u)) calc(30 * var(--u)); }
.tgs-star { width: min(84%, calc(460 * var(--u))); margin-bottom: calc(6 * var(--u)); }
.wordmark { height: calc(58 * var(--u)); margin: 0 auto calc(4 * var(--u)); }

.row { gap: calc(10 * var(--u)); }
.row .tgs, .plus { width: calc(80 * var(--u)); border-radius: calc(12 * var(--u)); }
.plus { font-size: calc(18 * var(--u)); }
.plus-front::before { border-width: calc(2 * var(--u)); }

.t-pack {
  --sticker: min(calc(83 * var(--u)), calc((100% - 8 * var(--u)) / 5));
  gap: calc(6 * var(--u));
  padding-left: calc(20 * var(--u));
  padding-right: calc(20 * var(--u));
}
.t-pack .row { column-gap: calc(2 * var(--u)); }

.t-order {
  gap: calc(32 * var(--u));
  padding-left: calc(32 * var(--u));
  padding-right: calc(32 * var(--u));
}
.t-order .head { margin-bottom: calc(14 * var(--u)); }
.sticker-stage { width: calc(116 * var(--u)); }

.wreath { width: calc(86 * var(--u)); margin-bottom: calc(14 * var(--u)); }
.t-ton .ton-mark { width: calc(46 * var(--u)); }
.t-ton .head { margin-bottom: calc(10 * var(--u)); }

.t-tg { gap: calc(18 * var(--u)); padding-left: calc(8 * var(--u)); }
.t-tg .tg-mark { width: calc(50 * var(--u)); }
.tg-text { gap: calc(2 * var(--u)); }
.tg-text .head { font-size: calc(19 * var(--u)); }

.t-ca { gap: calc(14 * var(--u)); padding: calc(18 * var(--u)) calc(34 * var(--u)); }
.ca-text { gap: calc(7 * var(--u)); }
.ca { font-size: calc(19 * var(--u)); }
.ca-icon { width: calc(52 * var(--u)); }

.t-dedust, .t-ston { gap: calc(13 * var(--u)); }
.t-dedust .head, .t-ston .head { font-size: calc(18 * var(--u)); }
.dex-mark { width: calc(38 * var(--u)); }
.t-ston .dex-mark { width: calc(34 * var(--u)); }

.t-bots { align-items: stretch; justify-content: center; container-type: size; }
.bots {
  --bot-gap: calc(4 * var(--u));
  max-width: none;
  place-content: center;
  grid-template-columns: repeat(3, min(
    calc((100% - 2 * var(--bot-gap)) / 3),
    calc((100cqh - 2 * var(--bot-gap)) / 3)
  ));
}
.bot { border-radius: calc(14 * var(--u)); }
.bot-hover { border-radius: calc(14 * var(--u)); }

.t-supply { flex-direction: column-reverse; }
.t-supply .big { font-size: calc(36 * var(--u)); }

.days-text { gap: calc(8 * var(--u)); }
.day-duck { width: min(124%, calc(208 * var(--u))); }

.fine-print {
  padding: calc(4 * var(--u)) calc(22 * var(--u)) calc(16 * var(--u));
  font-size: calc(13 * var(--u));
}

@media (max-width: 1100px) {
  .slide {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: var(--pad);
  }

  .col-mid, .col-left, .col-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    align-content: start;
    min-width: 0;
  }

  .col-mid > .tile, .col-left > .tile, .col-right > .tile { grid-column: 1 / -1; }
  .col-left > .t-days, .col-left > .t-bots,
  .col-right > .t-mcap, .col-right > .t-liq,
  .col-right > .t-dedust, .col-right > .t-ston { grid-column: span 1; }

  .col-right > .pair { grid-column: 1 / -1; display: flex; gap: var(--gap); }
  .pair > .t-supply { flex: 1 1 0; min-width: 0; }
  .pair > .t-tg {
    flex: 0 1 auto;
    flex-basis: calc(50% - var(--gap) / 2);
    min-width: calc(227 * var(--u));
  }

  .t-star  { min-height: calc(600 * var(--u)); }
  .t-pack  { min-height: calc(119 * var(--u)); }
  .t-ton,
  .t-order { min-height: calc(275 * var(--u)); }
  .t-price { min-height: calc(278 * var(--u)); }
  .t-mcap, .t-liq, .t-supply, .t-tg { min-height: calc(134 * var(--u)); }
  .t-ca    { min-height: calc(92 * var(--u)); }
  .t-dedust, .t-ston { min-height: calc(119 * var(--u)); }

  .t-ca { padding-left: calc(26 * var(--u)); padding-right: calc(26 * var(--u)); }
}

@media (min-width: 640px) and (max-width: 1100px) {
  :root { --u: calc(100vw / 964); }

  .slide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
  .col-mid { grid-template-rows: 1fr auto; align-content: stretch; }
  .col-mid   { grid-area: 1 / 1 / 2 / 2; }
  .col-right { grid-area: 1 / 2 / 2 / 3; }
  .col-left  { grid-area: 2 / 1 / 3 / 3; }

  .col-left { grid-template-columns: repeat(4, 1fr); }
  .col-left > .t-ton   { grid-area: 1 / 1 / 2 / 3; }
  .col-left > .t-order { grid-area: 1 / 3 / 3 / 5; }
  .col-left > .t-days  { grid-area: 2 / 1 / 3 / 2; }
  .col-left > .t-bots  { grid-area: 2 / 2 / 3 / 3; }

  .t-order {
    flex-direction: column;
    justify-content: center;
    gap: calc(20 * var(--u));
    text-align: center;
  }
  .t-order .sticker-stage { width: min(52%, calc(230 * var(--u))); }
  .t-order .order-text { align-items: center; }
}

@media (max-width: 639px) {
  .t-pack .row-2 { display: flex; }
  .t-pack .row-1-only { display: none; }
  .t-pack .two-rows-only { display: block; }
  .t-pack {
    gap: calc(20 * var(--u));
    padding-left: calc(20 * var(--u));
    padding-right: calc(20 * var(--u));
    --sticker: min(calc(74 * var(--u)), calc((100% - 16 * var(--u)) / 5));
  }
  .t-pack .row { column-gap: calc(4 * var(--u)); }
}

@media (min-width: 1101px) {
  html, body { overflow: hidden; }
  body { height: 100svh; justify-content: center; }

  .slide {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: calc(945 * var(--u));
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(4, 1fr) auto auto;
    grid-auto-rows: auto;
  }

  :root { --u: min(100vw / 1440, 100svh / 860); }

  .col-left {
    display: grid;
    grid-area: 1 / 1 / 7 / 5;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr auto;
    gap: var(--gap);
    min-height: 0;
  }
  .col-left > .t-ton,
  .col-left > .t-order { grid-column: 1 / -1; }

  .t-star   { grid-area: 1 / 5  / 6 / 9;  }
  .t-pack   { grid-area: 6 / 5  / 7 / 9;  }

  .t-mcap   { grid-area: 1 / 9  / 2 / 11; }
  .t-liq    { grid-area: 1 / 11 / 2 / 13; }
  .t-price  { grid-area: 2 / 9  / 4 / 13; }
  .t-supply { grid-area: 4 / 9  / 5 / 11; }
  .t-tg     { grid-area: 4 / 11 / 5 / 13; }
  .t-ca     { grid-area: 5 / 9  / 6 / 13; }
  .t-dedust { grid-area: 6 / 9  / 7 / 11; }
  .t-ston   { grid-area: 6 / 11 / 7 / 13; }
}

@media (min-width: 1101px) and (max-aspect-ratio: 1.45/1) {
  .slide {
    grid-template-rows: repeat(8, 1fr);
    max-height: calc(1260 * var(--u));
  }

  .col-left {
    grid-area: 1 / 1 / 9 / 5;
    grid-template-rows: .72fr 1.28fr auto;
  }

  .t-order {
    flex-direction: column;
    justify-content: center;
    gap: calc(20 * var(--u));
    text-align: center;
  }
  .t-order .sticker-stage { width: min(52%, calc(230 * var(--u))); }
  .t-order .order-text { align-items: center; }

  .t-star   { grid-area: 1 / 5  / 7 / 9;  }
  .t-pack   { grid-area: 7 / 5  / 9 / 9;  }

  .t-mcap   { grid-area: 1 / 9  / 3 / 11; }
  .t-liq    { grid-area: 1 / 11 / 3 / 13; }
  .t-price  { grid-area: 3 / 9  / 6 / 13; }
  .t-supply { grid-area: 6 / 9  / 7 / 11; }
  .t-tg     { grid-area: 6 / 11 / 7 / 13; }
  .t-ca     { grid-area: 7 / 9  / 8 / 13; }
  .t-dedust { grid-area: 8 / 9  / 9 / 11; }
  .t-ston   { grid-area: 8 / 11 / 9 / 13; }

  .spark  { max-height: calc(260 * var(--u)); }

  .t-pack { gap: calc(20 * var(--u)); }
  .t-pack .row-2 { display: flex; }
  .t-pack .row-1-only { display: none; }
  .t-pack .two-rows-only { display: block; }
  .t-pack { --sticker: calc(74 * var(--u)); padding-left: calc(30 * var(--u)); padding-right: calc(30 * var(--u)); }
  .t-pack .row { column-gap: calc(6 * var(--u)); }
  .sticker-stage { width: calc(148 * var(--u)); }
  .t-order { gap: calc(38 * var(--u)); }
}

@media (min-width: 1101px) and (min-aspect-ratio: 1.8/1) {
  :root { --uw: calc(100vw / 1440); }

  .t-ton {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: calc(32 * var(--u));
    padding-left: calc(32 * var(--u));
    padding-right: calc(32 * var(--u));
  }
  .t-ton .wreath { flex: none; width: calc(116 * var(--u)); margin-bottom: 0; }
  .t-ton .ton-mark { width: calc(62 * var(--u)); }
  .t-ton .head { margin-bottom: calc(14 * var(--u)); }
  .t-ton .cap { max-width: none; }
  .ton-text { align-items: flex-start; }

  .t-pack .wide-only { display: block; }
  .t-pack { --sticker: min(calc(83 * var(--u)), calc((100% - 12 * var(--u)) / 7)); }
  .c-narrow { display: none; }
  .c-wide { display: inline; }

  .t-ca {
    min-height: calc(84 * var(--uw));
    gap: calc(14 * var(--uw));
    padding: calc(18 * var(--uw)) calc(30 * var(--uw));
  }
  .t-ca .ca-label { font-size: calc(15 * var(--uw)); }
  .t-ca .ca { font-size: calc(19 * var(--uw)); }
  .t-ca .ca-text { gap: calc(7 * var(--uw)); }
  .t-ca .ca-icon { width: calc(50 * var(--uw)); }

  .t-days .big { font-size: calc(66 * var(--uw)); }
  .t-days .cap { font-size: calc(16 * var(--uw)); }
  .t-days .days-text { gap: calc(8 * var(--uw)); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}