* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

body {
  margin: 0;
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  font-synthesis: none;
  background:
    var(--hdr-veil) left top / 100% var(--hdr-glow-h) no-repeat,
    var(--hdr-glow) left top / 100% var(--hdr-glow-h) no-repeat,
    var(--bg-foot) left bottom / 100% var(--bg-foot-h) no-repeat,
    var(--bg);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

body:has(.picker),
body:has(.pay-page) {
  background: var(--bg);
}

[hidden] { display: none !important; }

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

button,
a {
  font: inherit;
  color: inherit;
}

button {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  touch-action: manipulation;
}

a { text-decoration: none; }

button,
a,
textarea,
dialog {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

button:focus,
a:focus,
textarea:focus,
button:focus-visible,
a:focus-visible,
textarea:focus-visible {
  outline: none;
}

@media (pointer: coarse) {
  input[type="text"],
  input[type="text"]:focus,
  input[type="text"]:focus-visible {
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }
}

.ico {
  flex: none;
  width: var(--icon-size);
  height: var(--icon-size);
  display: inline-block;
  vertical-align: middle;
}

.room {
  position: relative;
  display: flex;
  flex-direction: column;
  height: var(--tg-viewport-stable-height, 100dvh);
  max-height: var(--room-h, none);
  max-width: var(--col-max);
  margin-inline: auto;
  overflow: clip;
}


.hdr {
  position: relative;
  z-index: 3;
  flex: none;
  padding-top: var(--safe-top);
}

.hdr__row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: max(var(--hdr-row-h), var(--safe-content-top));
  padding-inline: var(--hdr-side-reserve);
}

.hdr__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  text-align: center;
}

.hdr__name,
.hdr__when {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hdr__when { color: var(--fg-muted); }

.hero {
  position: relative;
  z-index: 2;
  isolation: isolate;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--hero-top-gap);
  pointer-events: none;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--veil-x);
  top: calc(50% + var(--hero-top-gap) / 2);
  width: var(--veil-w);
  height: var(--veil-h);
  translate: -50% -50%;
  background: var(--veil-fill);
  pointer-events: none;
}

.hero__cards {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.hero { transform-origin: 50% 0; }

.room--enter .hero,
.room--reenter .hero {
  will-change: transform;
  animation:
    hero-enter-scale var(--motion-hero) var(--ease-out-quart) both,
    hero-enter-rise var(--motion-spring-hero) var(--ease-spring-hero) both;
}

.room--enter .bar {
  will-change: transform;
  translate: 0 100%;
}

.room--enter.room--enter-bar .bar {
  animation: bar-enter var(--motion-spring) var(--ease-spring) both;
}

@keyframes hero-enter-scale {
  from { scale: 0.5; }
  to { scale: 1; }
}

@keyframes hero-enter-rise {
  from { translate: 0 var(--hero-enter-y); }
  to { translate: 0 0; }
}

@keyframes bar-enter {
  from { translate: 0 100%; }
  to { translate: 0 0; }
}

.map {
  position: relative;
  flex: none;
  width: var(--map-w);
  height: var(--map-h);
  margin: var(--space-2);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-map);
  transform: rotate(var(--tilt-map));
  -webkit-mask-image: -webkit-radial-gradient(var(--color-paper), var(--color-ink));
}

.map--wide { width: var(--map-w-wide); }
.map--full { width: var(--map-w-full); }

.map[data-maps],
.map[data-locked-map] {
  pointer-events: auto;
  cursor: pointer;
}

.map__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(2 * var(--map-venue-y));
  border-radius: inherit;
  object-fit: cover;
  display: block;
}

.map__pin {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: var(--map-venue-y);
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: calc(100% - var(--space-16));
}

.map__venue {
  display: block;
  min-width: 40px;
  max-width: 100%;
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-pill);
  background: var(--surface-0);
  color: var(--fg);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map__venue .ico {
  width: 15px;
  height: 18px;
  color: var(--fg-lock-pin);
}

.map__stem {
  position: relative;
  width: var(--pin-stem-w);
  height: var(--pin-stem-h);
  background: var(--surface-0);
  border-radius: 0 0 var(--space-10) var(--space-10);
}

.map__stem::before,
.map__stem::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--pin-foot);
  height: var(--pin-foot);
}

.map__stem::before {
  right: 100%;
  background: radial-gradient(circle at 0 100%, transparent calc(var(--pin-foot) - 0.5px), var(--surface-0) calc(var(--pin-foot) + 0.5px));
}

.map__stem::after {
  left: 100%;
  background: radial-gradient(circle at 100% 100%, transparent calc(var(--pin-foot) - 0.5px), var(--surface-0) calc(var(--pin-foot) + 0.5px));
}

.map__cluster {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: var(--map-cluster-top);
  transform: translateX(-50%);
  display: flex;
  pointer-events: none;
  --av-stack-overlap: var(--av-overlap-map);
}

.map--wide .map__cluster { top: var(--map-cluster-top-wide); }

.map__mark {
  position: absolute;
  z-index: 3;
  left: var(--x);
  top: var(--y);
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  pointer-events: none;
}

.map__mark--centre {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--color-lime);
}

.map__cluster > .av + .av { margin-left: var(--av-overlap-map); }

.map__cluster > .av { will-change: transform; }

.map__cluster > .av:nth-child(even) > .av__img { rotate: var(--tilt-av-map); }

.av {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--av-size);
  height: var(--av-size);
  border-radius: var(--radius-pill);
  background: var(--av-fallback);
  color: var(--fg-chip);
  font-size: var(--type-initials-size);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  overflow: hidden;
  user-select: none;
}

.av__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}

.av__img--blur { filter: blur(var(--av-blur-css)); }

.av--locked { background: var(--av-locked); }

.av--locked .ico {
  width: 15px;
  height: 18px;
  color: var(--fg-lock-face);
  rotate: var(--tilt-av-locked);
}

.roster__row,
.av-row { --av-stack-overlap: var(--av-overlap); }

.roster__row > .av:not(:last-child),
.av-row > .av:not(:last-child),
.map__cluster > .av:not(:last-child) {
  -webkit-mask-image: radial-gradient(
    circle at calc(100% + var(--av-stack-overlap) + var(--av-size) / 2) 50%,
    transparent calc(var(--av-size) / 2 + var(--av-gap) - 0.5px),
    var(--color-ink) calc(var(--av-size) / 2 + var(--av-gap) + 0.5px)
  );
  mask-image: radial-gradient(
    circle at calc(100% + var(--av-stack-overlap) + var(--av-size) / 2) 50%,
    transparent calc(var(--av-size) / 2 + var(--av-gap) - 0.5px),
    var(--color-ink) calc(var(--av-size) / 2 + var(--av-gap) + 0.5px)
  );
}

.map__cluster > .av--arrived:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 var(--av-ring) var(--av-ring-arrived);
  pointer-events: none;
}

.av-row,
.roster__row {
  display: flex;
  align-items: flex-start;
}

.av-row > .av + .av,
.roster__row > .av + .av { margin-left: var(--av-overlap); }

.roster {
  flex: none;
  align-self: flex-end;
  margin-left: var(--map-overlap);
  margin-bottom: var(--roster-lift);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-14) var(--space-12);
  border-radius: var(--radius-card);
  background: var(--surface-roster);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  transform: rotate(var(--tilt-roster));
}

.map--wide + .roster { margin-left: var(--map-overlap-wide); }

.roster[data-roster-info],
.roster[data-locked-roster] {
  pointer-events: auto;
  cursor: pointer;
  transition: scale var(--motion-spring-snap) var(--ease-spring-snap);
}

.roster--pressed { scale: var(--roster-press); }

.roster__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.roster__label {
  white-space: nowrap;
}

.roster__group--silent .roster__label { color: var(--fg-muted-alpha); }

.status {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  margin-top: calc(var(--status-overlap) - (var(--tap-min) - var(--status-h)) / 2);
  margin-bottom: calc((var(--tap-min) - var(--status-h)) / -2);
  padding-inline: var(--space-10);
  max-width: 100%;
  color: var(--fg-on-ink);
  white-space: nowrap;
  pointer-events: auto;
}

.status::before {
  content: "";
  position: absolute;
  inset: calc((var(--tap-min) - var(--status-h)) / 2) 0;
  z-index: -1;
  border-radius: var(--radius-status);
  background: var(--surface-status);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

.status__label {
  padding-inline: var(--space-4);
  color: var(--fg-on-ink-muted);
}

.status__value {
  padding-inline: var(--space-2);
}

.status--pending .status__value { color: var(--fg-on-ink-muted); }

.status .ico { color: var(--fg-on-ink); }

.sheet {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  background: transparent;
  transition: background-color var(--motion-scrim) linear;
  overflow: hidden;
  overflow: clip;
}

.sheet--open { background: var(--scrim); }
.sheet--closing { transition-duration: var(--motion-sheet-close); }

.sheet::backdrop { background: transparent; }

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

.sheet__panel {
  width: 100%;
  max-width: var(--col-max);
  margin: auto 0 0;
  padding: var(--space-8) var(--space-8) calc(var(--space-8) + var(--safe-bottom));
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--surface-menu);
  box-shadow: 0 var(--sheet-overshoot-fill) 0 0 var(--surface-menu);
  translate: 0 100%;
  transition: translate var(--motion-spring-soft) var(--ease-spring-soft);
  touch-action: none;
}

.sheet--open .sheet__panel { translate: 0 0; }

.sheet--closing .sheet__panel {
  translate: 0 100%;
  transition: translate var(--motion-sheet-close) ease-in;
}

.sheet__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  width: 100%;
  min-height: 48px;
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-status);
  text-align: left;
  overflow-wrap: anywhere;
}

.sheet__item:active { background: var(--surface-pressed); }
.sheet__item[aria-checked="true"] .ico { color: var(--fg); }
.sheet__item .ico { color: transparent; }
.sheet__item[disabled] { color: var(--fg-muted); cursor: default; }

.sheet__panel--help {
  max-height: calc(100% - var(--safe-top) - var(--hdr-row-h));
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.sheet__item--q .ico {
  color: var(--fg-muted);
  transition: transform var(--motion-fast) var(--motion-ease);
}

.sheet__action {
  display: flex;
  width: 100%;
  margin-top: var(--space-8);
}

.sheet__panel--info .sheet__action + .sheet__action { margin-top: calc(var(--space-8) - var(--space-12)); }
.sheet__panel--support .sheet__action + .sheet__action { margin-top: 0; }

.sheet__item--q[aria-expanded="true"] .ico { transform: rotate(180deg); }

.sheet__panel--help [data-help-support] { margin-top: var(--space-20); }

.sheet__fold {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--motion-fold) var(--ease-out-quart);
}

.sheet__fold--open { grid-template-rows: 1fr; }

.sheet__fold-inner {
  min-height: 0;
  overflow: hidden;
}

.sheet__answer {
  margin: 0;
  padding: 0 var(--space-16) var(--space-12);
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}

.sheet__answer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding: 0 var(--space-12) var(--space-20);
}

.sheet__panel--support {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-top: var(--space-20);
}

.sheet__field {
  flex: none;
  min-height: calc(3 * var(--type-body-line-height) + 2 * var(--space-8));
  margin: 0;
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--stroke-input);
  border-radius: var(--radius-field);
  background: var(--surface-input);
  color: var(--fg);
  font: inherit;
  line-height: var(--type-body-line-height);
  resize: none;
  overflow-wrap: anywhere;
  -webkit-user-select: text;
  user-select: text;
  caret-color: var(--fg);
}

.sheet__field::placeholder {
  color: var(--fg-muted);
  -webkit-text-fill-color: var(--fg-muted);
  opacity: 1;
}

.sheet__note {
  min-height: var(--type-body-line-height);
  margin: 0;
  padding-inline: var(--space-20);
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}

.sheet__note:empty { display: none; }

body.support-body {
  background: var(--bg);
}

.support-root {
  height: var(--tg-viewport-stable-height, 100dvh);
  max-width: var(--col-max);
  margin-inline: auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.support-page {
  --support-chrome-top: calc(var(--safe-top) + var(--safe-content-top));
  --fg-muted: var(--color-overlay-muted-funnel);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: max(var(--space-32), calc(var(--support-chrome-top) + var(--space-16))) var(--space-12) calc(var(--space-48) + var(--safe-bottom));
  font-size: var(--type-picker-body-size);
  line-height: var(--type-picker-body-line-height);
}

.support-page__compose { display: flex; flex-direction: column; }

.support-page__title {
  margin: 0 0 var(--space-8);
  padding-inline: var(--space-8);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--type-heading-size);
  line-height: var(--type-body-line-height);
  overflow-wrap: anywhere;
}

.support-page__lead {
  margin: 0 0 var(--space-24);
  padding-inline: var(--space-8);
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}

.support-page__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.support-page__input {
  display: block;
  width: 100%;
  min-height: var(--btn-h);
  padding-block: 0;
}

.support-page__note {
  margin: 0;
  padding-inline: var(--space-8);
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}

.support-page__note:empty { display: none; }

.support-page__send { width: 100%; }

.support-page__header { margin: 0 0 var(--space-24); }

.support-page__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 48px;
  color: var(--fg);
}

.support-page__logo {
  display: block;
  flex: none;
  width: 48px;
  height: 48px;
}

.support-page__brand-name {
  font-size: var(--type-heading-size);
  line-height: var(--type-body-line-height);
}

@media (pointer: fine) {
  .support-page .sheet__field:focus-visible,
  .support-page .btn:focus-visible,
  .support-page__brand:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 2px;
  }
}

.support-faq { margin-top: var(--space-48); }

.support-root > .support-faq {
  --fg-muted: var(--color-overlay-muted-funnel);
  margin: 0;
  padding: max(var(--space-32), calc(var(--safe-top) + var(--safe-content-top) + var(--space-16))) var(--space-12) calc(var(--space-48) + var(--safe-bottom));
  font-size: var(--type-picker-body-size);
  line-height: var(--type-picker-body-line-height);
}

.support-faq__list { margin: 0; }

.support-faq__item {
  margin-inline: var(--space-8);
  padding: var(--space-16) 0;
  border-top: 1px solid var(--ink-16);
}

.support-faq__item:last-child { border-bottom: 1px solid var(--ink-16); }

.support-faq__question { margin: 0 0 var(--space-8); overflow-wrap: anywhere; }

.support-faq__answer {
  margin: 0;
  line-height: 1.35;
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}

.support-page__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  caret-color: var(--fg);
}

.support-page__done { display: flex; flex-direction: column; }

.sheet__panel--info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  padding-top: var(--space-20);
}

.sheet__title {
  margin: 0;
  max-width: 100%;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--type-sheet-title-size);
  line-height: var(--type-body-line-height);
  text-align: center;
  overflow-wrap: anywhere;
}

.sheet__text {
  margin: 0;
  max-width: 100%;
  padding-inline: var(--space-16);
  color: var(--fg-muted);
  text-align: center;
  overflow-wrap: anywhere;
}

.sheet__legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  margin: 0;
}

.sheet__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-16);
}

.sheet__term { overflow-wrap: anywhere; }

.sheet__desc {
  margin: 0;
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}


.av--hero {
  width: var(--av-size-hero);
  height: var(--av-size-hero);
}

.sheet__lock {
  width: var(--av-size-hero);
  height: var(--av-size-hero);
  color: var(--fg-lock-pin);
}

.sheet__panel--hero { padding-top: var(--space-32); }

.sheet__panel--hero > .av--hero,
.sheet__panel--hero > .sheet__lock { margin-bottom: var(--space-8); }

.sheet__panel--hero .sheet__text { margin-bottom: var(--space-28); }

@keyframes sheet-up {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.chat {
  position: relative;
  z-index: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-top: calc(-1 * var(--chat-lift));
  padding: 0 var(--chat-pad-x);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    var(--color-ink) var(--chat-fade-top),
    var(--color-ink) calc(100% - var(--bar-h) - var(--chat-fade-lead)),
    transparent calc(100% - var(--bar-h) + var(--chat-fade-tail))
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    var(--color-ink) var(--chat-fade-top),
    var(--color-ink) calc(100% - var(--bar-h) - var(--chat-fade-lead)),
    transparent calc(100% - var(--bar-h) + var(--chat-fade-tail))
  );
  scrollbar-width: none;
}

.chat::-webkit-scrollbar { display: none; }

[data-composing] .hero { display: none; }

[data-composing] .chat { margin-top: 0; }

[data-composing] .chat__list { padding-top: var(--space-12); }

.chat__list {
  list-style: none;
  margin: 0;
  padding: calc(var(--chat-lift) + var(--chat-top-gap)) 0 calc(var(--bar-h) + var(--chat-pad-bottom));
  flex: none;
  min-height: calc(100% + 1px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-3);
}

.msg {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-8) var(--msg-pad-right) var(--space-8) var(--space-8);
  border-radius: var(--radius-row);
  max-width: 100%;
}

.msg--mine {
  -webkit-touch-callout: none;
  user-select: none;
}

.msg--pressed,
.msg--menu-open { background: var(--surface-pressed); }

.msg--enter { animation: msg-enter var(--motion-row) var(--ease-out-quart) both; }

@keyframes msg-enter {
  from { translate: 0 var(--row-enter-y); opacity: 0; }
  to { translate: 0 0; opacity: 1; }
}

.msg__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.msg__name {
  display: block;
  max-width: 100%;
  padding-inline: var(--space-4);
  font-size: var(--type-sys-size);
  line-height: var(--type-body-line-height);
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg__text {
  margin: 0;
  padding-inline: var(--space-4);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.msg--bot .msg__text {
  display: flex;
  align-items: center;
  min-height: var(--av-size);
}

.msg__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding-top: var(--space-8);
}

.msg__menu {
  position: absolute;
  z-index: 5;
  top: calc(100% - var(--space-4));
  left: calc(var(--av-size) + var(--space-8) + var(--space-4));
  min-width: 160px;
  padding: var(--space-4);
  border-radius: var(--radius-menu);
  background: var(--surface-menu);
  box-shadow: var(--shadow-menu);
  animation: sheet-up var(--motion-fast) var(--motion-ease);
}

.msg__menu--up {
  top: auto;
  bottom: calc(100% - var(--space-4));
}

.msg__menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  min-height: var(--tap-min);
  padding-inline: var(--space-12);
  border-radius: var(--space-12);
  text-align: left;
  white-space: nowrap;
}

.msg__menu-item:active { background: var(--surface-pressed); }

.msg--removing {
  height: 0 !important;
  min-height: 0;
  padding-block: 0;
  margin-block: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    height var(--motion-crop) var(--motion-ease),
    padding var(--motion-crop) var(--motion-ease),
    opacity var(--motion-crop) var(--motion-ease);
}

@supports (interpolate-size: allow-keywords) {
  .msg { interpolate-size: allow-keywords; }
}

.sys {
  margin: 0;
  padding: var(--space-10) var(--sys-pad-x);
  color: var(--fg-muted);
  font-size: var(--type-sys-size);
  text-align: center;
  overflow-wrap: anywhere;
}

.chip {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--tap-min);
  margin-block: calc((var(--tap-min) - var(--chip-h)) / -2);
  padding-inline: var(--space-10);
  max-width: 100%;
  color: var(--fg-chip);
  white-space: nowrap;
}

.chip::before {
  content: "";
  position: absolute;
  inset: calc((var(--tap-min) - var(--chip-h)) / 2) 0;
  z-index: -1;
  border-radius: var(--radius-chip);
  background: var(--surface-chip);
}

.chip:active::before { background: var(--surface-chip-pressed); }

.chip__label {
  padding-inline: var(--space-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip--emoji {
  -webkit-touch-callout: none;
  touch-action: none;
}

.chip__emoji {
  display: block;
  width: var(--chip-emoji);
  height: var(--chip-emoji);
  pointer-events: none;
  transition: scale var(--motion-spring-snap) var(--ease-spring-snap);
}

.chip--emoji:active .chip__emoji { scale: 0.85; }

.chip__emoji--swap { animation: chip-emoji-swap var(--motion-fast) var(--ease-out-quart) both; }

@keyframes chip-emoji-swap {
  from { scale: 0.6; opacity: 0; }
  to { scale: 1; opacity: 1; }
}

.input {
  display: flex;
  align-items: flex-end;
  gap: var(--space-8);
  width: 100%;
  min-height: var(--input-card-h);
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background: var(--surface-input);
  box-shadow: var(--shadow-input);
}

.input__field {
  flex: 1 1 auto;
  min-width: 0;
  min-height: calc(var(--input-card-h) - 2 * var(--space-6));
  max-height: var(--input-field-max-h);
  margin: 0;
  padding: var(--space-8);
  border: 0;
  border-radius: var(--radius-field);
  background: transparent;
  color: var(--fg);
  font: inherit;
  line-height: var(--type-body-line-height);
  resize: none;
  overflow-y: auto;
  scrollbar-width: none;
}

.input__field::-webkit-scrollbar { display: none; }

.input__field {
  -webkit-user-select: text;
  user-select: text;
  caret-color: var(--fg);
}

@supports (field-sizing: content) {
  .input__field { field-sizing: content; }
}

.input__field::placeholder {
  color: var(--fg-muted);
  -webkit-text-fill-color: var(--fg-muted);
  opacity: 1;
}

.input__lock {
  flex: none;
  align-self: center;
  width: 15px;
  height: 18px;
  margin-left: var(--space-8);
  color: var(--fg-lock);
}

.input__lock + .input__field { padding-left: var(--space-4); }

.input--locked .input__field::placeholder {
  color: var(--fg-input-locked);
  -webkit-text-fill-color: var(--fg-input-locked);
}

.input--locked .input__field {
  pointer-events: none;
  opacity: 1;
}

.input__send {
  position: relative;
  isolation: isolate;
  flex: none;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--send-w);
  min-height: var(--tap-min);
  margin-block: calc((var(--tap-min) - var(--send-h)) / -2);
  color: var(--fg-on-ink);
}

.input__send::before {
  content: "";
  position: absolute;
  inset: calc((var(--tap-min) - var(--send-h)) / 2) 0;
  z-index: -1;
  border-radius: var(--radius-pill);
  background: var(--surface-send);
}

.input__send .ico {
  width: var(--icon-size-send);
  height: var(--icon-size-send);
}

.input__send:disabled { cursor: default; }
.input__send:disabled::before,
.input--locked .input__send::before { background: var(--surface-send-locked); }

.bar {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bar-gap);
  padding: var(--bar-pad-top) var(--bar-pad-x)
    max(var(--bar-pad-bottom), calc(var(--space-12) + var(--safe-bottom)));
}

[data-composing] .bar { padding-bottom: var(--bar-gap); }

.bar__chips {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-6);
  margin-inline: calc(-1 * var(--bar-pad-x));
  padding-inline: var(--bar-pad-x);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-padding-inline: var(--bar-pad-x);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.bar__chips::-webkit-scrollbar { display: none; }

.bar__chips > * {
  flex: none;
  scroll-snap-align: start;
}

.empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-48) var(--space-20);
  text-align: center;
}

.empty > .btn { margin-top: var(--space-16); }

.empty__title {
  margin: 0;
  max-width: 100%;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--type-hero-size);
  line-height: var(--type-hero-line-height);
  overflow-wrap: anywhere;
}

.empty__text {
  margin: 0;
  max-width: 100%;
  color: var(--fg-chip);
  overflow-wrap: anywhere;
}

.picker {
  --picker-chrome-top: calc(var(--safe-top) + var(--safe-content-top));
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scroll-padding-top: var(--picker-chrome-top);
  padding: max(var(--space-32), calc(var(--picker-chrome-top) + var(--space-16))) var(--space-12) calc(var(--space-48) + var(--safe-bottom));
  font-size: var(--type-picker-body-size);
  line-height: var(--type-picker-body-line-height);
  --fg-muted: var(--color-overlay-muted-funnel);
}

.picker[data-nav="back"] {
  --motion-picker-enter-x: calc(var(--motion-picker-enter-forward-x) * -1);
}

@keyframes picker-arrive {
  from {
    opacity: 0;
    transform: translate3d(var(--motion-picker-enter-x), 0, 0);
  }
}

.picker > * {
  animation: picker-arrive var(--motion-picker-enter-slow) var(--ease-out-quart) both;
}

.picker > .picker__list { animation: none; }
.picker > .picker__note { animation-delay: calc(var(--motion-picker-stagger) * 4); }
.picker > .past,
.picker > .picker__faq { animation-delay: calc(var(--motion-picker-stagger) * 5); }
.picker > .picker__jump { animation-delay: calc(var(--motion-picker-stagger) * 6); }

.picker__title {
  margin: 0 0 var(--space-24);
  padding-inline: var(--space-8);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--type-picker-title-size);
  line-height: var(--type-picker-title-line-height);
}

.picker__city {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--fg-muted);
}

.picker__city-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.picker__city-label { display: inline-flex; align-items: center; gap: var(--space-4); }
.picker__city-label .ico { width: 20px; height: 20px; color: var(--fg-muted); }

.picker__lead {
  margin: 0 0 var(--space-12);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-picker-lead);
  background: var(--surface-1);
  font-size: var(--type-picker-body-size);
  line-height: var(--type-picker-body-line-height);
}

.picker__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.event {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-picker-inner);
  background: var(--surface-lemon);
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--motion-fast) var(--motion-ease);
}

.event {
  animation: picker-arrive var(--motion-picker-enter-slow) var(--ease-out-quart) both;
  animation-delay: var(--motion-picker-stagger);
}

.picker__list > :nth-child(2).event {
  animation-delay: calc(var(--motion-picker-stagger) * 2);
}

.picker__list > :nth-child(n + 3).event {
  animation-delay: calc(var(--motion-picker-stagger) * 3);
}

.event--unavailable {
  background: var(--surface-1);
  color: var(--fg-muted);
  cursor: default;
}

.event--unavailable::before { display: none; }

.event__reason {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: var(--btn-h);
  padding-inline: var(--space-4);
  text-align: right;
}

.event::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-lemon);
  filter: blur(80px);
  pointer-events: none;
}

.event > * { position: relative; }

.event__name {
  margin: 0;
  padding: var(--space-36) var(--space-16);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--type-event-title-size);
  line-height: var(--type-event-title-line-height);
  overflow-wrap: anywhere;
}

.event__foot {
  display: flex;
  align-items: center;
  gap: var(--space-8) var(--space-20);
  padding: var(--space-8) var(--space-16) var(--space-20);
  text-align: left;
}

.event__meta {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline: var(--space-4);
  color: var(--fg);
  line-height: 1.2;
}

.event__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--btn-h);
  padding-inline: var(--space-20);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--fg-on-ink);
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .event__cta[data-nudge] {
    animation: picker-nudge 600ms var(--motion-ease);
  }
}

@keyframes picker-nudge {
  0%,
  100% { rotate: 0deg; }
  25% { rotate: -5deg; }
  75% { rotate: 5deg; }
}

.event__cta-label { padding-inline: var(--space-4); }

.event__cta .ico { width: 19px; height: 19px; }

.event[data-picked] {
  transform: scale(0.99);
}

.picker__note {
  margin: var(--space-32) 0 0;
  padding-inline: var(--space-8);
  line-height: 1.35;
  color: var(--fg);
}

.picker__faq {
  margin-top: var(--space-32);
}

@media (prefers-reduced-motion: no-preference) {
  .picker__faq-item[open] > :not(summary) {
    animation: picker-faq-open var(--motion-fast) var(--motion-ease) both;
  }
}

@keyframes picker-faq-open {
  from {
    opacity: 0;
    transform: translate3d(0, calc(var(--space-8) * -1), 0);
  }
}

.picker__faq-item {
  margin-inline: var(--space-8);
  border-top: 1px solid var(--ink-16);
}

.picker__faq-item:last-of-type {
  border-bottom: 1px solid var(--ink-16);
}

.picker__faq-item summary {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  min-height: 54px;
  padding: var(--space-16) 0;
  list-style: none;
  cursor: pointer;
}

.picker__faq-item summary::-webkit-details-marker { display: none; }
.picker__faq-item summary .ico {
  flex: none;
  margin-left: auto;
  width: 23px;
  height: 23px;
  color: inherit;
  transition: rotate var(--motion-fast) var(--motion-ease);
}
.picker__faq-item[open] summary .ico { rotate: 180deg; }

.picker__faq-item p {
  margin: 0 0 var(--space-16);
  line-height: 1.35;
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}

.picker__jump {
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  margin: var(--space-32) auto 0;
  min-height: var(--btn-h);
  padding: 0 var(--space-24);
  border: 1px solid var(--ink-16);
  border-radius: var(--radius-pill);
  background: var(--surface-0);
  color: inherit;
  text-decoration: none;
}

.past { margin-top: var(--space-32); }

.past__title {
  margin: 0 0 var(--space-12);
  padding-inline: var(--space-8);
  font: inherit;
  line-height: 1.35;
  color: var(--text-secondary);
}

.past__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.past__card {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  padding: var(--space-16);
  border: 0;
  border-radius: var(--radius-picker-inner);
  background: var(--surface-1);
  color: var(--text-primary);
  text-align: left;
  font: inherit;
  cursor: default;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--motion-fast) var(--motion-ease);
}

.past__card--live { cursor: pointer; }
.past__card--pressed { transform: scale(0.97); }

.past__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.past__name,
.past__meta { line-height: 1.35; overflow-wrap: anywhere; }
.past__meta { color: var(--text-secondary); }

.past__card:not(.past__card--live) .past__name,
.past__card:not(.past__card--live) .past__meta { color: var(--text-tertiary); }

.past__state {
  flex: none;
  line-height: 1.35;
  color: var(--text-tertiary);
}

.past__go {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--text-primary);
}

.past__go .ico { width: 20px; height: 20px; }

.past__unread {
  min-width: 24px;
  height: 24px;
  padding-inline: 7px;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: 14px;
  line-height: 24px;
  text-align: center;
}

.picker__empty {
  margin: var(--space-16) 0 0;
  padding-inline: var(--space-8);
  line-height: 1.35;
  color: var(--text-secondary);
}

.picker__refusal { color: var(--text-primary); }
.picker__appeal { text-decoration: underline; text-underline-offset: 2px; }

.pay-page {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: var(--surface-0);
  font-size: var(--type-picker-body-size);
  line-height: var(--type-picker-body-line-height);
  --fg-muted: var(--color-overlay-muted-funnel);
}

.pay-page {
  padding-top: calc(var(--safe-top) + var(--safe-content-top));
}

.pay-page__hero {
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  width: calc(100% + 2 * var(--space-12));
  max-width: 520px;
  margin-inline: calc(-1 * var(--space-12));
  margin-bottom: var(--space-12);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-1);
}

.pay-page__hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pay-page__hero .pay-page__brand {
  position: absolute;
  inset: 0;
  margin: 0;
  color: var(--color-paper);
  text-shadow: var(--shadow-on-video);
}

.pay-page__brand {
  margin: 0 0 var(--space-32);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--type-title-size);
  line-height: var(--type-title-line-height);
}

.pay-page__brand-mark {
  width: 48px;
  height: 48px;
  display: block;
  border-radius: 22%;
}

.pay-page__scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 0 var(--space-12) var(--space-16);
}

.pay__card {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: var(--space-10);
  column-gap: var(--space-16);
  margin: 0;
  padding: var(--space-16);
  border-radius: var(--radius-picker-inner);
  background: var(--surface-1);
}

.pay__card dt { color: var(--fg-muted); }

.pay__card--event {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.pay__card-title {
  margin: 0;
  font: inherit;
}

.pay__card-title:empty { display: none; }

.pay__rows {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: var(--space-10);
  column-gap: var(--space-16);
  margin: 0;
}

.pay__rows dt { color: var(--fg-muted); }
.pay__rows dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.pay__card dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.pay__total-label { align-self: center; }
.pay__total { font-size: var(--type-pay-total-size); line-height: var(--type-pay-total-line-height); align-self: center; }

.pay__small {
  margin: 0;
  padding-inline: var(--space-8);
  color: var(--fg-muted);
}

.pay__small--lead {
  color: inherit;
  margin-bottom: calc(-1 * var(--space-4));
}

.pay__unavailable {
  margin: 0;
  padding-inline: var(--space-8);
  color: var(--fg-muted);
}

.pay-page__foot {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-12) var(--space-12) calc(var(--space-16) + var(--safe-bottom));
  border-top: 1px solid var(--ink-16);
  background: var(--surface-0);
  font-size: var(--type-picker-body-size);
  line-height: var(--type-picker-body-line-height);
}

.pay-page__scroll,
.pay-page__foot {
  animation: picker-arrive var(--motion-picker-enter) var(--ease-out-quart) both;
}

.pay__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  font-size: var(--type-sys-size);
  line-height: 1.4;
  padding: var(--space-6) 0;
}

.pay__consent-box {
  flex: none;
  width: 22px;
  height: 22px;
  font-size: var(--type-sys-size);
  line-height: 1.4;
  margin: calc((1lh - 22px) / 2) 0 0;
  accent-color: var(--color-ink);
}

.pay__consent a { color: inherit; text-decoration: underline; }

.pay__consent > span { text-wrap: balance; }

@media (pointer: coarse) {
  .pay__consent { position: relative; }

  .pay__consent::before {
    content: "";
    position: absolute;
    left: calc((22px - 44px) / 2);
    top: calc(var(--space-6) + 0.5lh - 22px);
    width: 44px;
    height: 44px;
  }

  .pay__consent a,
  .pay-page__foot .pay__cta { position: relative; }
}

.pay__offer {
  margin: 0;
  font-size: var(--type-pay-offer-size);
  line-height: 1.5;
  text-align: center;
  color: var(--fg-muted);
}

.pay__offer a { color: inherit; text-decoration: underline; }

.pay__consent-why {
  margin: calc(-1 * var(--space-4)) 0 0;
  padding-left: calc(22px + var(--space-10));
  font-size: var(--type-sys-size);
  line-height: 1.4;
  color: var(--color-red-funnel);
}

.btn[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

.pay__cta-price { margin-left: var(--space-4); }

.pay__cta {
  padding: var(--space-16);
}

.empty__heading {
  margin: 0;
  max-width: 100%;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--type-heading-size);
  line-height: var(--type-body-line-height);
  overflow-wrap: anywhere;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-h);
  padding-inline: var(--space-20);
  border-radius: var(--radius-pill);
  background: var(--surface-status);
  color: var(--fg-on-ink);
  white-space: nowrap;
}

.btn:active { opacity: 0.8; }

.btn--secondary {
  background: var(--surface-1);
  color: var(--fg);
}

.btn--secondary:active { background: var(--surface-chip-pressed); opacity: 1; }

.skel {
  display: block;
  border-radius: 0;
  background: var(--surface-skel);
  animation: skel-pulse var(--motion-skel) ease-in-out infinite alternate;
}

.skel--title { width: var(--skel-title-w); height: var(--skel-text-h); }
.skel--when { width: var(--skel-when-w); height: var(--skel-line-h); margin-top: var(--space-4); }
.skel--name { width: var(--skel-name-w); height: var(--skel-line-h); margin-bottom: var(--space-6); }
.skel--text { width: var(--skel-text-w); height: var(--skel-text-h); }

.skel--av { border-radius: var(--radius-pill); }

.chat--skel { margin-top: 0; }

.chat--skel .chat__list { padding-bottom: calc(var(--bar-h-rest) + var(--chat-pad-bottom)); }

@keyframes skel-pulse {
  from { opacity: 1; }
  to { opacity: 0.45; }
}

.snack {
  position: absolute;
  z-index: 5;
  top: calc(var(--safe-top) + var(--space-8));
  left: 50%;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  max-width: calc(100% - 2 * var(--space-16));
  padding: var(--space-8) var(--space-14) var(--space-8) var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--surface-status);
  color: var(--fg-on-ink);
  font-size: var(--type-sys-size);
  white-space: nowrap;
  translate: -50% calc(-100% - var(--safe-top) - var(--space-8));
  transition: translate var(--motion-snack) var(--ease-out-quart);
  pointer-events: none;
}

.snack--in { translate: -50% 0; }

.snack__text {
  padding-bottom: var(--snack-text-lift);
  overflow: hidden;
  text-overflow: ellipsis;
}

.snack__spinner {
  flex: none;
  width: var(--snack-spinner);
  height: var(--snack-spinner);
  border-radius: var(--radius-pill);
  border: var(--snack-spinner-stroke) solid var(--fg-on-ink-muted);
  border-top-color: var(--fg-on-ink);
  animation: snack-spin var(--motion-spin) linear infinite;
}

@keyframes snack-spin {
  to { rotate: 360deg; }
}

.snack--ok {
  position: fixed;
  width: max-content;
  padding-left: var(--space-14);
  white-space: normal;
  text-align: center;
}

.snack--ok .snack__text { overflow: visible; text-overflow: clip; }

.snack--ok .ico {
  width: var(--snack-spinner);
  height: var(--snack-spinner);
}

.fx {
  position: fixed;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
}

.fx__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.fx-balloon {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--balloon-size);
  height: var(--balloon-size);
  margin: calc(var(--balloon-size) / -2) 0 0 calc(var(--balloon-size) / -2);
}

.fx-balloon__rise {
  will-change: transform, opacity;
  animation: fx-balloon-rise var(--motion-balloon) linear both;
}

.fx-balloon__drift { animation: fx-balloon-drift var(--motion-balloon) ease-in-out both; }

.fx-balloon__icon {
  display: block;
  width: 100%;
  height: 100%;
  animation: fx-balloon-tilt calc(var(--motion-balloon) / 3) ease-in-out 3 alternate both;
}

@keyframes fx-balloon-rise {
  0% { translate: 0 0; scale: 0; opacity: 1; animation-timing-function: ease-out; }
  8% { scale: 1; opacity: 1; }
  90% { scale: 1; opacity: 1; animation-timing-function: ease-in; }
  100% { translate: 0 var(--balloon-rise); scale: 0.6; opacity: 0; }
}

@keyframes fx-balloon-drift {
  0% { translate: 0 0; }
  35% { translate: -6vw 0; }
  80% { translate: 6vw 0; }
  100% { translate: 0 0; }
}

@keyframes fx-balloon-tilt {
  from { rotate: -12deg; }
  to { rotate: 12deg; }
}

.guide {
  position: fixed;
  inset: 0;
  z-index: 11;
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  background: transparent;
  transition: background-color var(--motion-scrim) linear;
  overflow: hidden;
  overflow: clip;
  --guide-card-w: min(100vw, var(--col-max));
  --guide-card-h: min(calc(var(--guide-card-w) * 16 / 9), var(--tg-viewport-stable-height, 100dvh));
}

.guide--open { background: var(--color-ink); }
.guide--closing { transition-duration: var(--motion-sheet-close); }
.guide::backdrop { background: transparent; }

.guide__card {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--guide-card-w);
  height: var(--guide-card-h);
  translate: -50% 100%;
  transition: translate var(--motion-spring-soft) var(--ease-spring-soft);
  overflow: hidden;
  overflow: clip;
  touch-action: none;
}

.guide--open .guide__card { translate: -50% 0; }

.guide--closing .guide__card {
  translate: -50% 100%;
  transition: translate var(--motion-sheet-close) ease-in;
}

.guide__track {
  position: absolute;
  inset: 0;
}

.guide__slide {
  position: absolute;
  inset: 0;
}

.guide__slot {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--guide-radius) * var(--gs));
  overflow: hidden;
  overflow: clip;
  background:
    var(--guide-glow) center / calc(880 * var(--gs) * 1px) calc(880 * var(--gs) * 1px) no-repeat,
    var(--color-mint);
}

.guide__slot:empty { background: none; }

.guide__slot--prev { translate: -100% 0; }
.guide__slot--next { translate: 100% 0; }

.guide__slide--opening,
.guide__slide--statement {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 calc(32 * var(--gs) * 1px) calc(12 * var(--gs) * 1px);
}

.guide__text {
  display: block;
  margin: 0;
  max-width: 100%;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: calc(var(--type-slide-size) * var(--gs));
  line-height: calc(var(--type-slide-line-height) * var(--gs));
  overflow-wrap: normal;
}

.guide__slide--opening .guide__text {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: calc(var(--type-opening-size) * var(--gs));
  line-height: calc(var(--type-opening-line-height) * var(--gs));
}

.guide__dim { color: var(--guide-dim); }

.guide__slide--picture {
  display: flex;
  flex-direction: column;
}

.guide__caption {
  display: block;
  flex: none;
  margin: calc(120 * var(--gs) * 1px) 0 0;
  padding-inline: calc(24 * var(--gs) * 1px);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: calc(var(--type-slide-caption-size) * var(--gs));
  line-height: calc(var(--type-slide-caption-line-height) * var(--gs));
  text-align: left;
  overflow-wrap: normal;
}

.guide__stage {
  display: block;
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  container-type: size;
  --guide-photo-h: calc((100 - var(--guide-photo-top, 40) - var(--guide-photo-bottom, 15)) * 6.99);
  --guide-photo-w: calc((100 - var(--guide-photo-left, 10) - var(--guide-photo-right, 10)) * 3.93);
  --guide-photo-b: calc(var(--guide-photo-bottom, 15) * 6.99);
  --guide-photo-cx: calc((100 + var(--guide-photo-left, 10) - var(--guide-photo-right, 10)) * 1.965);
  --guide-lift-floor: calc((var(--guide-dots-bottom) + var(--guide-dot-active-w) + 12px) * var(--gs));
  --guide-u: calc(var(--gs) * 1px);
  --guide-lift: 0px;
}

@supports (height: 1cqh) {
  .guide__stage {
    --guide-u: min(
      calc(var(--gs) * 1px),
      calc((100cqh - 24px * var(--gs)) / (var(--guide-photo-b) + var(--guide-photo-h))),
      calc((100cqh - 24px * var(--gs) - var(--guide-lift-floor)) / var(--guide-photo-h))
    );
    --guide-lift: max(0px, calc(var(--guide-lift-floor) - var(--guide-photo-b) * var(--guide-u)));
  }
}

.guide__photo {
  display: block;
  position: absolute;
  left: calc(var(--guide-photo-cx) * var(--gs) * 1px - var(--guide-photo-w) / 2 * var(--guide-u));
  bottom: calc(var(--guide-photo-b) * var(--guide-u) + var(--guide-lift));
  width: calc(var(--guide-photo-w) * var(--guide-u));
  height: calc(var(--guide-photo-h) * var(--guide-u));
  overflow: hidden;
  rotate: var(--guide-photo-rotate, 0deg);
}

.guide__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guide__note {
  display: block;
  position: absolute;
  --guide-note-left: calc(var(--guide-photo-cx) * var(--gs) * 1px + (var(--guide-note-x, 24) - var(--guide-photo-cx)) * var(--guide-u));
  left: var(--guide-note-left);
  bottom: calc((699 - var(--guide-note-y, 460) - 22) * var(--guide-u) + var(--guide-lift));
  margin: 0;
  max-width: calc(100% - var(--guide-note-left));
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: calc(20 * var(--guide-u));
  line-height: calc(22 * var(--guide-u));
  color: var(--fg);
  overflow-wrap: normal;
}

.guide__dots {
  position: absolute;
  left: 50%;
  bottom: calc(var(--guide-dots-bottom) * var(--gs));
  translate: -50% 0;
  z-index: 2;
  width: max-content;
  max-width: calc(var(--guide-dots-w) * var(--gs));
  height: calc(var(--guide-dot-active-w) * var(--gs));
  overflow-x: clip;
  overflow-y: visible;
  pointer-events: none;
}

.guide__strip {
  display: flex;
  align-items: center;
  width: max-content;
  gap: calc(var(--guide-dot-gap) * var(--gs));
  translate: calc(var(--guide-dot-start, 0) * (var(--guide-dot-size) + var(--guide-dot-gap)) * var(--gs) * -1);
  transition: translate var(--motion-guide-dots) var(--ease-out-quart);
}

.guide__dot {
  flex: none;
  position: relative;
  width: calc(var(--guide-dot-size) * var(--gs));
  height: calc(var(--guide-dot-size) * var(--gs));
  border-radius: var(--radius-pill);
  background: var(--guide-dot-track);
  transition:
    width var(--motion-guide-dots) var(--ease-out-quart),
    height var(--motion-guide-dots) var(--ease-out-quart);
}

.guide__dot::after {
  content: "";
  position: absolute;
  inset: calc((var(--guide-dot-active-w) - var(--guide-dot-size)) / 2 * var(--gs));
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  box-shadow: var(--guide-dot-shadow);
  opacity: 0;
  transition: opacity var(--motion-guide-dots) var(--ease-out-quart);
}

.guide__dot--on {
  width: calc(var(--guide-dot-active-w) * var(--gs));
  height: calc(var(--guide-dot-active-w) * var(--gs));
}

.guide__dot--on::after { opacity: 1; }

.guide__strip--jump,
.guide__strip--jump .guide__dot,
.guide__strip--jump .guide__dot::after { transition: none; }

.guide__zone {
  position: absolute;
  bottom: 0;
  height: var(--guide-card-h);
  z-index: 1;
  touch-action: none;
}

.guide__zone--prev {
  left: calc(50% - var(--guide-card-w) / 2);
  width: calc(var(--guide-card-w) / 3);
}

.guide__zone--next {
  left: calc(50% - var(--guide-card-w) / 2 + var(--guide-card-w) / 3);
  width: calc(var(--guide-card-w) * 2 / 3);
}

.sheet__panel--guide {
  padding-top: calc(32 * var(--guide-pick-gs) * 1px);
  --guide-pick-gs: calc(min(100vw, 393px) / 393px);
  --guide-mini-gs: calc(var(--guide-pick-gs) * 64 / 393);
}

.guide-pick {
  display: flex;
  justify-content: space-between;
  gap: calc(51 * var(--guide-pick-gs) * 1px);
  padding-inline: calc(42 * var(--guide-pick-gs) * 1px);
}

.sheet__panel--guide .sheet__action {
  margin-top: calc(32 * var(--guide-pick-gs) * 1px);
}

.guide-pick__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  gap: calc(9 * var(--guide-pick-gs) * 1px);
  flex: 1 1 0;
  min-width: 0;
}

.guide-pick__card {
  position: relative;
  display: block;
  width: calc(393 * var(--guide-mini-gs) * 1px);
  height: calc(699 * var(--guide-mini-gs) * 1px);
  overflow: hidden;
  border-radius: calc(var(--guide-pick-radius) * var(--guide-pick-gs));
  background:
    var(--guide-glow) center / calc(880 * var(--guide-mini-gs) * 1px) calc(880 * var(--guide-mini-gs) * 1px) no-repeat,
    var(--color-mint);
}

.guide-pick__card--read,
.guide-pick__label--read { opacity: var(--guide-pick-read-opacity); }

.guide-pick__card > .guide__slide {
  --gs: 1;
  position: absolute;
  inset: 0 auto auto 0;
  width: 393px;
  height: 699px;
  scale: var(--guide-mini-gs);
  transform-origin: top left;
}

.guide-pick__label {
  width: max-content;
  max-width: calc(100 * var(--guide-pick-gs) * 1px);
  font-size: calc(var(--type-body-size) * var(--guide-pick-gs));
  line-height: var(--type-body-line-height);
  overflow-wrap: normal;
  text-align: center;
}

@supports (corner-shape: superellipse(1.5)) {
  .map,
  .map__img,
  .roster,
  .msg,
  .sheet__panel {
    corner-shape: var(--corner-smooth);
  }

  .map,
  .roster { border-radius: var(--radius-card-smooth); }

  .msg { border-radius: var(--radius-row-smooth); }

  .sheet__panel { border-radius: var(--radius-card-smooth) var(--radius-card-smooth) 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .msg__menu,
  .skel { animation: none; }
}