@font-face {
  font-family: 'Roboto';
  src: url('../_shared/fonts/roboto-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../_shared/fonts/roboto-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --max-font: -apple-system, BlinkMacSystemFont, 'Roboto', system-ui, 'Helvetica Neue', Arial, sans-serif;

  --max-bg-base: #141414;
  --max-bg-tint-1: #1a1420;
  --max-bg-tint-2: #16161c;
  --max-pattern: #c07ac0;
  --max-pattern-alpha: .17;

  --max-header-bg: #17161a;
  --max-composer-bg: #17181c;

  --max-text: #ffffff;
  --max-text-secondary: rgba(255, 255, 255, .64);
  --max-text-tertiary: rgba(255, 255, 255, .48);
  --max-icon: rgba(255, 255, 255, .82);
  --max-divider: rgba(255, 255, 255, .08);

  --max-bubble-in: linear-gradient(239deg, #3b3f5e 0%, #373a4e 50%, #32343d 100%);
  --max-bubble-out: linear-gradient(239deg, #8849b4 0%, #735acd 50%, #5d6ae5 100%);
  --max-bubble-time: rgba(255, 255, 255, .64);
  --max-bot-button: rgba(79, 82, 157, .698);
  --max-bot-button-pressed: rgba(63, 66, 128, .82);
  --max-capsule: rgba(40, 44, 66, .698);
  --max-accent: #2a8cf0;
  --max-accent-pressed: #1f74cf;

  --max-radius-bubble: 16px;
  --max-radius-stack: 6px;
  --max-radius-button: 6px;
  --max-radius-composer: 16px;
  --max-radius-capsule: 10px;

  --max-font-body: 400 16px/20px var(--max-font);
  --max-font-action: 400 16px/24px var(--max-font);
  --max-font-title: 600 16px/20px var(--max-font);
  --max-font-label: 400 12px/16px var(--max-font);
  --max-font-capsule: 400 14px/18px var(--max-font);

  --app-primary: #ff770f;
  --app-primary-link: #f89a32;
  --app-dark: #222222;
  --app-mute: #9b9b9b;
  --app-forms: #f5f5f5;
  --app-bg: #ffffff;
  --app-radius: 10px;
  --app-font: 'Roboto', system-ui, -apple-system, sans-serif;

  --scene-bg-0: #0b0c14;
  --scene-bg-1: #131628;
  --scene-ink: #eef1ff;
  --scene-ink-dim: #7d86ad;
  --scene-accent: #6f8cff;

  --device-scale: 1;
  --device-base-w: 438px;
  --device-base-h: 920px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  color: var(--scene-ink);
  font-family: var(--max-font);
  background:
    radial-gradient(58% 52% at 50% 26%, rgba(111, 140, 255, .18), transparent 70%),
    linear-gradient(180deg, var(--scene-bg-0), var(--scene-bg-1));
}

.stage {
  width: 100%;
  padding: 48px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.stage__eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 400 11px/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--scene-accent);
}

.stage__eyebrow span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--scene-accent);
  box-shadow: 0 0 0 3px rgba(111, 140, 255, .18);
}

.device {
  width: var(--device-base-w);
  height: var(--device-base-h);
  transform: scale(var(--device-scale));
  transform-origin: top center;
  margin-bottom: calc((var(--device-scale) - 1) * var(--device-base-h));
}

.device__frame {
  position: relative;
  width: 438px;
  height: 920px;
  padding: 12px;
  border-radius: 60px;
  background: linear-gradient(155deg, #4a4d5b, #121319 22%, #121319 78%, #4a4d5b);
}

.device__frame::before,
.device__frame::after {
  content: '';
  position: absolute;
  background: #33353f;
}

.device__frame::before {
  left: -3px;
  top: 150px;
  width: 3px;
  height: 32px;
  border-radius: 2px 0 0 2px;
  box-shadow: 0 56px 0 #33353f, 0 102px 0 #33353f;
}

.device__frame::after {
  right: -3px;
  top: 190px;
  width: 3px;
  height: 66px;
  border-radius: 0 2px 2px 0;
}

.device__notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 30px;
  border-radius: 0 0 18px 18px;
  background: #121319;
  z-index: 20;
}

.device__screen {
  position: relative;
  width: 414px;
  height: 896px;
  border-radius: 48px;
  overflow: hidden;
  background: var(--max-bg-base);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.max {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  font: var(--max-font-body);
  color: var(--max-text);
}

.max__status {
  flex: 0 0 auto;
  height: 44px;
  padding: 14px 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 600 14px/18px var(--max-font);
  letter-spacing: .2px;
}

.max__status-icons { display: flex; align-items: center; gap: 5px; }
.max__signal { display: flex; align-items: flex-end; gap: 1.6px; height: 10px; }
.max__signal i { width: 3px; background: currentColor; border-radius: 1px; }
.max__signal i:nth-child(1) { height: 40%; }
.max__signal i:nth-child(2) { height: 60%; }
.max__signal i:nth-child(3) { height: 80%; }
.max__signal i:nth-child(4) { height: 100%; }

.max__wifi {
  width: 14px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(50% 100%, 0 30%, 12% 18%, 50% 52%, 88% 18%, 100% 30%, 50% 78%);
}

.max__battery {
  position: relative;
  width: 22px;
  height: 11px;
  padding: 1.5px;
  border: 1.4px solid currentColor;
  border-radius: 3px;
}

.max__battery::after {
  content: '';
  position: absolute;
  right: -3.5px;
  top: 3px;
  width: 2px;
  height: 4px;
  border-radius: 0 1px 1px 0;
  background: currentColor;
}

.max__battery i { display: block; height: 100%; width: 76%; border-radius: 1px; background: currentColor; }

.max__header {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  height: 56px;
  padding: 0 8px 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--max-header-bg);
}

.max__icon-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--max-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.max__icon-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.max__back svg { stroke-width: 2; }

.max__avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--avatar-1, #ffc93d), var(--avatar-2, #ff832a));
}

.max__avatar svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.max__titles {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 4px;
}

.max__name {
  font: var(--max-font-title);
  letter-spacing: .15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.max__subtitle { font: var(--max-font-label); letter-spacing: .3px; color: var(--max-text-secondary); }

.max__chat { position: relative; flex: 1 1 auto; min-height: 0; }

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

.max__wallpaper-base {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 54% at 94% 14%, var(--max-bg-tint-1) 0%, rgba(0, 0, 0, 0) 62%),
    radial-gradient(64% 48% at 6% 88%, var(--max-bg-tint-2) 0%, rgba(0, 0, 0, 0) 60%),
    linear-gradient(28deg, var(--max-bg-base) 8%, var(--max-bg-base) 92%);
}

.max__wallpaper-pattern {
  position: absolute;
  inset: 0;
  opacity: var(--max-pattern-alpha);
  background: var(--max-pattern);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%22220%22%20viewBox%3D%220%200%20220%20220%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cg%20transform%3D%22translate(14%2016)%20rotate(-12)%22%3E%3Cpath%20d%3D%22M0%207%2013%200l13%207v14l-13%207-13-7Z%22%2F%3E%3Cpath%20d%3D%22M0%207l13%207%2013-7M13%2014v14%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate(98%2014)%20rotate(7)%22%3E%3Cpath%20d%3D%22M0%202h18v13H0z%22%2F%3E%3Cpath%20d%3D%22M18%205h6l5%205v5h-11z%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%2218%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%2223%22%20cy%3D%2218%22%20r%3D%222.6%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate(176%2038)%22%3E%3Cpath%20d%3D%22M9%2024s9-9%209-15A9%209%200%201%200%200%209c0%206%209%2015%209%2015Z%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%229%22%20r%3D%223.2%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate(26%2086)%20rotate(-4)%22%3E%3Cpath%20d%3D%22M2%2016c8%200%208-12%2016-12h8%22%20stroke-dasharray%3D%224%204%22%2F%3E%3Ccircle%20cx%3D%222%22%20cy%3D%2216%22%20r%3D%222.4%22%2F%3E%3Cpath%20d%3D%22M22%200l4%204-4%204%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate(108%2090)%20rotate(-8)%22%3E%3Cpath%20d%3D%22M0%200h34v18H0z%22%2F%3E%3Cpath%20d%3D%22M8.5%200v18M17%200v18M25.5%200v18%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate(184%20112)%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M10%204.5V10l4%203%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate(18%20148)%20rotate(18)%22%3E%3Cpath%20d%3D%22M0%2010%2026%200l-10%2024-4-10Z%22%2F%3E%3Cpath%20d%3D%22M0%2010l12%204%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate(94%20166)%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M5.4%2010.2l3.4%203.4L15%207.4%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate(168%20172)%20rotate(14)%22%3E%3Cpath%20d%3D%22M0%205%209%200l9%205v10l-9%205-9-5Z%22%2F%3E%3Cpath%20d%3D%22M0%205l9%205%209-5M9%2010v10%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate(60%2046)%20rotate(-6)%22%3E%3Cpath%20d%3D%22M0%204h14M0%209h20M0%2014h11%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate(140%20148)%20rotate(10)%22%3E%3Cpath%20d%3D%22M3%200h12l3%205v13a2%202%200%200%201-2%202H2a2%202%200%200%201-2-2V5Z%22%2F%3E%3Cpath%20d%3D%22M0%205h18M7%2010h4%22%2F%3E%3C%2Fg%3E%20%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%22220%22%20viewBox%3D%220%200%20220%20220%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cg%20transform%3D%22translate(14%2016)%20rotate(-12)%22%3E%3Cpath%20d%3D%22M0%207%2013%200l13%207v14l-13%207-13-7Z%22%2F%3E%3Cpath%20d%3D%22M0%207l13%207%2013-7M13%2014v14%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate(98%2014)%20rotate(7)%22%3E%3Cpath%20d%3D%22M0%202h18v13H0z%22%2F%3E%3Cpath%20d%3D%22M18%205h6l5%205v5h-11z%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%2218%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%2223%22%20cy%3D%2218%22%20r%3D%222.6%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate(176%2038)%22%3E%3Cpath%20d%3D%22M9%2024s9-9%209-15A9%209%200%201%200%200%209c0%206%209%2015%209%2015Z%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%229%22%20r%3D%223.2%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate(26%2086)%20rotate(-4)%22%3E%3Cpath%20d%3D%22M2%2016c8%200%208-12%2016-12h8%22%20stroke-dasharray%3D%224%204%22%2F%3E%3Ccircle%20cx%3D%222%22%20cy%3D%2216%22%20r%3D%222.4%22%2F%3E%3Cpath%20d%3D%22M22%200l4%204-4%204%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate(108%2090)%20rotate(-8)%22%3E%3Cpath%20d%3D%22M0%200h34v18H0z%22%2F%3E%3Cpath%20d%3D%22M8.5%200v18M17%200v18M25.5%200v18%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate(184%20112)%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M10%204.5V10l4%203%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate(18%20148)%20rotate(18)%22%3E%3Cpath%20d%3D%22M0%2010%2026%200l-10%2024-4-10Z%22%2F%3E%3Cpath%20d%3D%22M0%2010l12%204%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate(94%20166)%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M5.4%2010.2l3.4%203.4L15%207.4%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate(168%20172)%20rotate(14)%22%3E%3Cpath%20d%3D%22M0%205%209%200l9%205v10l-9%205-9-5Z%22%2F%3E%3Cpath%20d%3D%22M0%205l9%205%209-5M9%2010v10%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate(60%2046)%20rotate(-6)%22%3E%3Cpath%20d%3D%22M0%204h14M0%209h20M0%2014h11%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate(140%20148)%20rotate(10)%22%3E%3Cpath%20d%3D%22M3%200h12l3%205v13a2%202%200%200%201-2%202H2a2%202%200%200%201-2-2V5Z%22%2F%3E%3Cpath%20d%3D%22M0%205h18M7%2010h4%22%2F%3E%3C%2Fg%3E%20%3C%2Fsvg%3E");
  -webkit-mask-size: 150px 150px;
  mask-size: 150px 150px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}

.max__history {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 8px 0 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.max__history::before { content: ''; margin-top: auto; }

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

.msg { padding: 0 6px; display: flex; flex-direction: column; }
.msg--in { align-items: flex-start; }
.msg--out { align-items: flex-end; }
.msg + .msg { margin-top: 6px; }

.bubble {
  position: relative;
  max-width: 366px;
  padding: 8px 10px 10px;
  border-radius: var(--max-radius-bubble);
  font: var(--max-font-body);
  letter-spacing: .15px;
  white-space: pre-wrap;
  opacity: 0;
  transform: translateY(8px) scale(.99);
  transition: opacity .3s cubic-bezier(.2, .8, .2, 1), transform .3s cubic-bezier(.2, .8, .2, 1);
}

.bubble.is-shown { opacity: 1; transform: none; }
.msg--in .bubble { background-image: var(--max-bubble-in); border-bottom-left-radius: var(--max-radius-stack); }
.msg--out .bubble { max-width: 350px; background-image: var(--max-bubble-out); border-bottom-right-radius: var(--max-radius-stack); }

.bubble__time {
  float: right;
  margin: 6px 0 0 8px;
  display: flex;
  align-items: center;
  gap: 3px;
  font: var(--max-font-label);
  letter-spacing: .2px;
  color: var(--max-bubble-time);
  white-space: nowrap;
}

.bubble__time svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.typing {
  padding: 12px 14px;
  border-radius: var(--max-radius-bubble);
  border-bottom-left-radius: var(--max-radius-stack);
  background-image: var(--max-bubble-in);
  display: flex;
  gap: 5px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .26s ease, transform .26s ease;
}

.typing.is-shown { opacity: 1; transform: none; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .62); animation: typingDot 1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }

@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-3px); opacity: 1; }
}

.botkb {
  width: 352px;
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .28s ease, transform .28s ease;
}

.botkb.is-shown { opacity: 1; transform: none; }
.botkb__row { display: flex; gap: 2px; }

.botkb__btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--max-radius-button);
  background: var(--max-bot-button);
  color: var(--max-text);
  font: var(--max-font-action);
  letter-spacing: .15px;
  text-align: center;
  cursor: default;
  transition: background .12s ease;
}

.botkb__btn.is-pressed { background: var(--max-bot-button-pressed); }

.capsule {
  align-self: center;
  margin: 6px 0;
  padding: 1px 6px;
  font: var(--max-font-capsule);
  letter-spacing: .15px;
  opacity: 0;
  transition: opacity .3s ease;
}

.capsule.is-shown { opacity: 1; }
.capsule--service { color: var(--max-text-secondary); }

.touch {
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .85);
  background: radial-gradient(circle, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.3);
  z-index: 40;
}

.touch.is-pinging { animation: touchPing .55s cubic-bezier(.2, .8, .2, 1); }

@keyframes touchPing {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  25% { opacity: .9; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

.max__composer-area { position: relative; z-index: 3; flex: 0 0 auto; padding: 6px 16px 10px; }

.max__composer {
  min-height: 48px;
  padding: 4px;
  border-radius: var(--max-radius-composer);
  background: var(--max-composer-bg);
  display: flex;
  align-items: center;
  gap: 2px;
}

.max__apps {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--max-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.max__apps-grid { display: grid; grid-template-columns: repeat(2, 6px); grid-template-rows: repeat(2, 6px); gap: 3px; }
.max__apps-grid i { display: block; width: 6px; height: 6px; border-radius: 1.5px; background: #fff; }

.max__field {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 10px 2px;
  display: flex;
  align-items: center;
  font: var(--max-font-body);
  letter-spacing: .15px;
  color: var(--max-text);
  overflow: hidden;
  white-space: nowrap;
}

.max__placeholder { color: var(--max-text-secondary); }

.max__send {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--max-accent);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: transform .12s ease, background .12s ease;
}

.max__send svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.max__send.is-active { display: flex; }
.max__send.is-pressed { transform: scale(.88); background: var(--max-accent-pressed); }

.steps { margin: 0; padding: 0; list-style: none; display: flex; gap: 18px; }

.steps__item {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 400 12px/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color: var(--scene-ink-dim);
  transition: color .3s ease;
}

.steps__item span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: all .3s ease;
}

.steps__item.is-active { color: var(--scene-ink); }
.steps__item.is-active span { background: var(--scene-accent); border-color: var(--scene-accent); color: #fff; box-shadow: 0 0 0 4px rgba(111, 140, 255, .16); }
.steps__item.is-done { color: var(--scene-accent); }
.steps__item.is-done span { border-color: var(--scene-accent); }

@media (max-width: 720px) {
  .stage { padding: 24px 12px 28px; gap: 20px; }
  .steps { gap: 10px; }
  .steps__item { font-size: 0; gap: 0; }
  .steps__item span { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .bubble, .botkb, .capsule, .post, .comments, .miniapp, .steps__item, .steps__item span { transition: none !important; }
  .touch, .miniapp { animation: none !important; }
}

.post { max-width: 337px; }

.post-stack {
  width: 337px;
  border-radius: var(--max-radius-bubble);
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px) scale(.99);
  transition: opacity .3s cubic-bezier(.2, .8, .2, 1), transform .3s cubic-bezier(.2, .8, .2, 1);
}

.post-stack.is-shown { opacity: 1; transform: none; }

.post-stack__bubble {
  background-image: var(--max-bubble-in);
  border-radius: var(--max-radius-stack);
}

.post-stack__text {
  display: block;
  padding: 8px 10px 10px;
  font: var(--max-font-body);
  letter-spacing: .15px;
  white-space: pre-wrap;
}

.post__meta {
  float: right;
  margin: 6px 0 0 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  font: var(--max-font-label);
  letter-spacing: .2px;
  color: var(--max-bubble-time);
  white-space: nowrap;
}

.post__meta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.comments {
  height: 44px;
  padding: 0 10px;
  border-top: 1px solid var(--max-divider);
  display: flex;
  align-items: center;
  gap: 18px;
  font: var(--max-font-action);
  letter-spacing: .15px;
  color: rgba(255, 255, 255, .72);
}

.comments__left { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; }
.comments svg { flex: 0 0 auto; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.comments__chevron { width: 20px; height: 20px; stroke-width: 2; }

.post-stack .botkb { width: 100%; margin: 0; padding-top: 2px; }

.botkb__btn--app { position: relative; padding-right: 36px; }

.botkb__icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: repeat(2, 5px);
  grid-template-rows: repeat(2, 5px);
  gap: 2px;
}

.botkb__icon i { display: block; width: 5px; height: 5px; border-radius: 1px; background: rgba(255, 255, 255, .78); }

.miniapp {
  position: absolute;
  inset: 44px 0 0 0;
  z-index: 50;
  display: none;
  flex-direction: column;
  background: var(--app-bg);
  font-family: var(--app-font);
  color: var(--app-dark);
}

.miniapp.is-open { display: flex; animation: miniappFadeIn .2s ease-out; }
.miniapp.is-closing { display: flex; animation: miniappFadeIn .2s ease-out reverse; }

@keyframes miniappFadeIn { from { opacity: 0; } to { opacity: 1; } }

.miniapp__header {
  flex: 0 0 auto;
  height: 56px;
  padding: 4px;
  display: flex;
  align-items: center;
  background: var(--max-composer-bg);
  color: #fff;
}

.miniapp__btn {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.miniapp__btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.miniapp__btn--dots svg { stroke: none; fill: currentColor; }

.miniapp__title {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font: 600 17px/22px var(--max-font);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.miniapp__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

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

.app-form { display: flex; flex-flow: column; gap: 16px; padding: 16px; }

.app-radio { display: flex; flex-flow: row; gap: 8px; width: 100%; overflow-x: auto; scrollbar-width: none; }

.app-radio::-webkit-scrollbar { display: none; }

.app-radio__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  border: 1px solid var(--app-forms);
  border-radius: 999px;
  background: transparent;
  color: var(--app-mute);
  font-size: 14px;
  white-space: nowrap;
}

.app-radio__item.is-checked { background: var(--app-primary); border-color: var(--app-primary); color: var(--app-bg); }

.app-field {
  position: relative;
  width: 100%;
  height: 50px;
  padding: 8px 16px 9px;
  display: flex;
  flex-flow: column;
  gap: 4px;
  border-radius: var(--app-radius);
  background: var(--app-forms);
}

.app-field--area { height: auto; min-height: 92px; }

.app-field__label { font-size: 10px; color: var(--app-dark); opacity: .4; }
.app-field__value { font-size: 14px; color: var(--app-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-field__value--empty { opacity: .4; }
.app-field__value--wrap { white-space: normal; overflow: visible; text-overflow: clip; }

.app-field__arrow {
  position: absolute;
  right: 16px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--app-dark);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-field--qty { flex-flow: row; align-items: center; }
.app-field--qty .app-field__col { flex: 1 1 auto; display: flex; flex-flow: column; gap: 4px; }
.app-field__steppers { display: flex; gap: 24px; align-items: center; }
.app-field__steppers svg { width: 24px; height: 24px; fill: none; stroke: var(--app-dark); stroke-width: 1.8; stroke-linecap: round; }

.app-switch {
  width: 100%;
  height: 50px;
  padding: 8px 16px 9px;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--app-forms);
  border-radius: var(--app-radius);
  font-size: 14px;
}

.app-switch__track { position: relative; flex-shrink: 0; width: 36px; height: 14px; border-radius: 999px; background: var(--app-mute); }
.app-switch__thumb { position: absolute; left: 0; top: 0; bottom: 0; margin: auto 0; width: 20px; height: 20px; border-radius: 50%; background: var(--app-bg); box-shadow: -1px 1px 1px 0 rgba(51, 51, 51, .25); }

.app-field--phone { flex-flow: row; align-items: center; gap: 12px; padding-left: 6px; }
.app-field--phone .app-field__col { flex: 1 1 auto; display: flex; flex-flow: column; gap: 4px; }

.app-phone__code {
  flex: 0 0 auto;
  width: 45px;
  height: 100%;
  border-radius: 6px;
  background: var(--app-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.app-submit { flex: 0 0 auto; position: relative; z-index: 2; padding: 16px; background: var(--app-bg); border-top: 1px solid #e1e1e1; }

.app-submit__btn {
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: var(--app-radius);
  background: var(--app-primary);
  color: var(--app-bg);
  font: 400 14px/1 var(--app-font);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .4;
  cursor: default;
}

.app-submit__policy { margin-top: 8px; font-size: 12px; line-height: 1.35; text-align: center; color: #666666; }
.app-submit__policy b { color: var(--app-primary-link); }

.is-bare {
  --device-base-w: 438px;
  --device-base-h: 920px;
}

.is-bare body { background: transparent; min-height: 0; }
.is-bare .stage { padding: 0; gap: 0; height: 100vh; justify-content: center; }
.is-bare .stage__eyebrow,
.is-bare .steps { display: none; }

.is-naked { --device-base-w: 414px; --device-base-h: 896px; }
.is-naked .device__frame { padding: 0; border-radius: 0; background: none; filter: none; }
.is-naked .device__frame::before,
.is-naked .device__frame::after,
.is-naked .device__notch { display: none; }
.is-naked .device__frame { width: 414px; height: 896px; }
.is-naked .device__screen { border-radius: 0; }