:root {
  --ink: #14080d;
  --ink-2: #1c0c14;
  --champagne: #f6ecdf;
  --mist: #cbb8c0;
  --rose: #ff4d88;
  --rose-deep: #c81e56;
  --line: rgba(255, 214, 214, 0.16);
  --card: rgba(22, 10, 16, 0.78);
  --serif: "Fraunces", "Iowan Old Style", Palatino, serif;
  --sans: "Outfit", "Segoe UI", sans-serif;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  background: var(--ink);
  color: var(--champagne);
  font-family: var(--sans);
  font-weight: 360;
  font-size: 16px;
  line-height: 1.5;
  color-scheme: dark;
}
body[data-view="home"] { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
html[lang^="zh"] body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", var(--sans);
}
html[lang^="zh"] h1,
html[lang^="zh"] h2,
html[lang^="zh"] h3,
html[lang^="zh"] .count-num {
  font-family: "PingFang SC", "Microsoft YaHei", var(--serif);
}
img, svg { display: block; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
::selection { background: rgba(255, 77, 136, 0.35); }

.atmosphere, .grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.atmosphere { z-index: 0; overflow: hidden; background: radial-gradient(1200px 700px at 50% -10%, #3a1428, transparent 60%), var(--ink); }
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0.85;
}
.orb-a { width: 46vw; height: 46vw; left: -8vw; top: -10vw; background: #ff4d88; animation: drift 22s ease-in-out infinite; }
.orb-b { width: 38vw; height: 38vw; right: -10vw; bottom: -8vw; background: #6a2a7a; animation: drift 26s ease-in-out infinite reverse; }
.orb-c { width: 22vw; height: 22vw; left: 18vw; bottom: 8vh; background: #e7a15a; opacity: 0.45; animation: drift 18s ease-in-out infinite; }
.grain {
  z-index: 40;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.view { position: relative; z-index: 1; }
.view[hidden] { display: none !important; }

.wrap { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  text-decoration: none;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.wordmark em { font-style: italic; color: #ffb3cb; }
.logo-mark {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffd5e4, var(--rose) 42%, #8e123c);
  box-shadow: 0 0 0 5px rgba(255, 77, 136, 0.16);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 560;
  cursor: pointer;
}
.btn-rose {
  background: linear-gradient(180deg, #ff7aa6, #ff3d7f);
  color: #2a0612;
  box-shadow: 0 12px 30px rgba(255, 61, 127, 0.28);
}
.btn-rose:hover { filter: brightness(1.05); }
.btn-block { width: 100%; }
.text-link { color: var(--champagne); text-underline-offset: 4px; }
.btn:focus-visible, .text-link:focus-visible, .back:focus-visible, .slide-thumb:focus-visible, input:focus-visible {
  outline: 2px solid #ffd0e0;
  outline-offset: 3px;
}

body[data-view="load"] .atmosphere { display: none; }
.gate-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  object-fit: cover;
  z-index: 0;
}
.gate {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: calc(28px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
}
.gate::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: linear-gradient(rgba(20, 8, 13, 0.28), rgba(20, 8, 13, 0.5));
}
.gate-card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  padding: 28px 24px 22px;
  border-radius: 28px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  text-align: center;
}
.gate-card h1 {
  margin: 18px 0 6px;
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.04em;
}
.gate-desc { margin: 0 0 18px; color: var(--mist); }
.gate-timer { display: grid; justify-items: center; gap: 8px; margin: 0 0 18px; }
.gate-timer[hidden] { display: none !important; }
.count-ring-wrap { position: relative; width: 72px; height: 72px; }
.count-ring-wrap svg { width: 72px; height: 72px; }
.count-track, .count-arc { fill: none; stroke-width: 3; }
.count-track { stroke: rgba(255, 255, 255, 0.12); }
.count-arc {
  stroke: var(--rose);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 36px 36px;
  stroke-dasharray: 188.5;
}
.count-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 28px;
  font-variant-numeric: tabular-nums;
}
.count-caption { margin: 0; color: var(--mist); font-size: 13px; }
.gate-note { margin: 14px 0 0; color: var(--mist); font-size: 13px; }
.gate-status { margin: 14px 0 0; color: #ffd0e0; font-size: 14px; }

.slide {
  position: relative;
  height: 58px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  touch-action: none;
}
.slide-fill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(var(--x) + 50px);
  border-radius: 999px;
  background: linear-gradient(90deg, #c81e56, #ff7aa6);
}
.slide-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding-left: 28px;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: rgba(246, 236, 223, 0.8);
  opacity: calc(1 - var(--p));
  pointer-events: none;
}
.slide.is-done .slide-label { opacity: 1; padding-left: 0; }
.slide-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 50%;
  background: #fff8f4;
  color: var(--rose-deep);
  transform: translateX(var(--x));
  cursor: grab;
  display: grid;
  place-items: center;
}
.slide-thumb svg { width: 22px; height: 22px; }
.slide-thumb:active { cursor: grabbing; }
.slide.is-snapping .slide-thumb,
.slide.is-snapping .slide-fill { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }

.nav, .auth-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(76px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 22px 0;
}
.nav {
  background: rgba(20, 8, 13, 0.9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.nav-links { display: flex; align-items: center; gap: 18px; }
.nav .btn { height: 40px; }

.hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  align-items: center;
  padding: calc(112px + env(safe-area-inset-top)) 0 calc(132px + env(safe-area-inset-bottom));
}
.hero-copy { max-width: 820px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  color: #ffb3cb;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 0 0 rgba(255, 77, 136, 0.7);
  animation: ping 1.8s ease-out infinite;
}
.hero h1, .finale h2, .auth-card h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.96;
}
.hero h1 { font-size: clamp(52px, 8vw, 104px); }
.hero h1 em, .finale h2 em { font-style: italic; color: #ffb3cb; }
.lede, .auth-lead { color: var(--mist); font-size: 18px; }
.lede { max-width: 460px; margin: 22px 0 0; }
.hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 28px; flex-wrap: wrap; }

.panel { padding: 28px 0 64px; }
.panel-tight { padding-top: 0; }
.section-head { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 18px; }
.section-head h2, .feature h3, .host-meta h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.03em;
}
.section-head h2 { font-size: 40px; }
.section-head p { margin: 0; max-width: 280px; color: var(--mist); font-size: 14px; }

.hosts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
a.host {
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a.host:focus-visible { outline: 2px solid #ffd0e0; outline-offset: 4px; border-radius: 22px; }
.portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  overflow: hidden;
  background: #1a0c12;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.35s ease;
}
a.host:hover .portrait img { transform: scale(1.04); }
.bust { position: absolute; inset: 0; }
.head, .neck, .shoulders, .hair, .eye, .mouth { position: absolute; display: block; }
.shoulders {
  z-index: 1;
  left: 50%;
  bottom: -2%;
  width: 96%;
  height: 58%;
  transform: translateX(-50%);
  border-radius: 46% 46% 0 0;
  background: linear-gradient(180deg, var(--dress), #12060c 78%);
}
.neck {
  z-index: 1;
  left: 50%;
  top: 48%;
  width: 14%;
  height: 14%;
  transform: translateX(-50%);
  border-radius: 10px;
  background: var(--skin);
}
.head {
  z-index: 2;
  left: 50%;
  top: 16%;
  width: 42%;
  aspect-ratio: 0.8;
  transform: translateX(-50%);
  border-radius: 50% 50% 47% 47%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.38), transparent 24%),
    radial-gradient(circle at 50% 72%, rgba(176, 72, 86, 0.22), transparent 32%),
    var(--skin);
}
.eye {
  top: 44%;
  width: 10%;
  height: 12%;
  border-radius: 50%;
  background: #3a221c;
}
.head .eye:nth-child(1) { left: 26%; }
.head .eye:nth-child(2) { left: 64%; }
.mouth {
  left: 50%;
  top: 66%;
  width: 16%;
  height: 7%;
  transform: translateX(-50%);
  border-radius: 0 0 12px 12px;
  background: rgba(150, 64, 74, 0.55);
}
.hair {
  z-index: 3;
  left: 50%;
  background: var(--hair);
}
.hair::before,
.hair::after {
  content: "";
  position: absolute;
  top: 55%;
  width: 32%;
  background: inherit;
}
.hair-long .hair {
  top: 11%;
  width: 50%;
  height: 18%;
  transform: translateX(-50%);
  border-radius: 50% 50% 16% 16%;
}
.hair-long .hair::before,
.hair-long .hair::after {
  height: 300%;
  width: 22%;
  border-radius: 0 0 50% 50%;
}
.hair-long .hair::before { left: 2%; }
.hair-long .hair::after { right: 2%; }
.hair-bob .hair {
  top: 11%;
  width: 48%;
  height: 14%;
  transform: translateX(-50%);
  border-radius: 48% 48% 20% 20%;
}
.hair-bob .hair::before,
.hair-bob .hair::after {
  height: 80%;
  width: 18%;
  border-radius: 0 0 50% 50%;
}
.hair-bob .hair::before { left: 6%; }
.hair-bob .hair::after { right: 6%; }
.hair-wave .hair {
  top: 12%;
  width: 54%;
  height: 18%;
  transform: translateX(-52%) rotate(-4deg);
  border-radius: 46% 54% 18% 22%;
}
.hair-wave .hair::before,
.hair-wave .hair::after {
  height: 260%;
  border-radius: 0 0 40% 50%;
}
.hair-wave .hair::before { left: -14%; width: 38%; }
.hair-wave .hair::after { right: -6%; width: 28%; }
.hair-bun .hair {
  top: 13%;
  width: 46%;
  height: 16%;
  transform: translateX(-50%);
  border-radius: 50% 50% 24% 24%;
}
.hair-bun .hair::before { display: none; }
.hair-bun .hair::after {
  width: 42%;
  height: 90%;
  left: 30%;
  top: -78%;
  border-radius: 50%;
}
.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.45));
  pointer-events: none;
}
.live-pill, .viewers {
  position: absolute;
  top: 12px;
  z-index: 1;
  height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(12, 6, 9, 0.55);
  backdrop-filter: blur(8px);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.live-pill { left: 12px; color: #ffb3cb; }
.live-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--rose);
}
.viewers { right: 12px; font-variant-numeric: tabular-nums; }
.host-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px 4px 0; }
.host-meta h3 { font-size: 18px; }
.host-meta p { margin: 2px 0 0; color: var(--mist); font-size: 13px; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature {
  padding: 22px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
}
.feature-index { margin: 0 0 28px; color: #ffb3cb; font-size: 13px; letter-spacing: 0.14em; }
.feature h3 { font-size: 28px; }
.feature p:last-child { margin: 8px 0 0; color: var(--mist); }

.finale {
  padding: 48px 36px;
  border-radius: 32px;
  text-align: center;
  background:
    radial-gradient(500px 180px at 50% 0%, rgba(255, 77, 136, 0.28), transparent 70%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
}
.finale h2 { font-size: clamp(40px, 6vw, 72px); }
.finale p { margin: 12px auto 22px; max-width: 420px; color: var(--mist); }

.footer { padding: 10px 0 28px; color: var(--mist); font-size: 13px; }
.footer-row { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer p { margin: 0; }
.footer a { color: var(--champagne); }

.sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  background: rgba(20, 8, 13, 0.88);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.sticky-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sticky p { display: flex; align-items: center; gap: 8px; margin: 0; }
.sticky .btn { height: 40px; }

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.72);
}
.auth-overlay[hidden] { display: none !important; }
body.auth-open { overflow: hidden; }
.auth-split {
  width: min(960px, 100%);
  height: min(680px, calc(100dvh - 48px));
  min-height: 0;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  background: #101012;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.auth-story { position: relative; min-height: 0; height: 100%; overflow: hidden; background: #1a1020; }
.auth-story img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.auth-story-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 20%, rgba(0, 0, 0, 0.78) 100%);
}
.auth-story-copy { position: absolute; left: 40px; right: 40px; bottom: 48px; z-index: 1; }
.auth-brand {
  margin: 0 0 10px;
  color: #ff3d8e;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.auth-story-copy p:last-of-type { margin: 0 0 18px; max-width: 380px; color: #fff; font-size: 20px; line-height: 1.35; }
.auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.auth-points li { display: flex; align-items: center; gap: 10px; color: #f4f4f5; font-size: 16px; }
.auth-points li::before { content: "✓"; color: #ff3d8e; font-weight: 700; }
.auth-panel {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 72px 36px 48px;
  background: #141416;
}
.auth-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  text-decoration: none;
  font-size: 22px;
  line-height: 1;
}
.auth-card {
  width: min(440px, 100%);
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.auth-card h1 {
  font-family: var(--sans);
  font-size: 34px;
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin-bottom: 10px;
}
.auth-lead { margin: 0 0 26px; color: #b9b9c2; font-size: 15px; }
.auth-card label { display: grid; gap: 8px; margin: 0 0 16px; color: #eee; font-size: 14px; font-weight: 560; }
.auth-card input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font-size: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: #2a2a2e;
  color: #fff;
}
.auth-card input::placeholder { color: #8d8d96; }
.code-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.send-code {
  height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: #ff2f86;
  color: #fff;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}
.send-code:disabled { opacity: 0.7; cursor: default; }
.pass-wrap { position: relative; display: block; }
.eye-btn {
  position: absolute;
  top: 0;
  right: 4px;
  width: 40px;
  height: 48px;
  border: 0;
  background: transparent;
  color: #b9b9c2;
  cursor: pointer;
}
.eye-btn svg { width: 20px; height: 20px; margin: 0 auto; }
.form-error { margin: 0 0 12px; color: #ffb4c4; font-size: 14px; }
.btn-gradient {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  margin-top: 6px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(90deg, #ff3b8d, #b44bff);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.auth-switch { margin: 16px 0 0; text-align: center; color: #9a9aa3; font-size: 14px; }
.auth-switch a { color: #ff4d9a; text-decoration: none; }
.success .btn-gradient { margin-top: 8px; }

@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(4%, 6%, 0) scale(1.08); }
}
@keyframes ping {
  70% { box-shadow: 0 0 0 8px rgba(255, 77, 136, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 136, 0); }
}

@media (max-width: 900px) {
  .hosts { grid-template-columns: repeat(2, 1fr); }
  .features { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: start; }
  .hero h1 { font-size: clamp(46px, 12vw, 72px); }
  .auth-split { grid-template-columns: 1fr; height: auto; max-height: calc(100dvh - 32px); }
  .auth-story { display: none; }
  .auth-panel { min-height: 0; }
}
@media (max-width: 640px) {
  .wrap { width: min(1120px, calc(100% - 32px)); }
  .wordmark { font-size: 18px; gap: 8px; }
  .nav {
    height: calc(58px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 16px 0;
  }
  .nav-links { gap: 10px; }
  .nav .text-link { font-size: 14px; }
  .nav .btn { height: 36px; padding: 0 14px; }
  .hero {
    align-items: end;
    padding: calc(78px + env(safe-area-inset-top)) 0 calc(108px + env(safe-area-inset-bottom));
  }
  .hero h1 { font-size: clamp(38px, 11vw, 52px); }
  .lede { font-size: 16px; margin-top: 16px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 22px; }
  .hero-actions .btn { width: 100%; height: 48px; }
  .hero-actions .text-link { display: flex; align-items: center; justify-content: center; min-height: 44px; }
  .section-head h2 { font-size: 32px; }
  .hosts { gap: 10px; }
  .portrait { border-radius: 16px; }
  .host-meta { align-items: start; }
  .host-meta h3 { font-size: 15px; }
  .host-meta p { font-size: 12px; }
  .feature { padding: 18px; }
  .feature h3 { font-size: 24px; }
  .finale { padding: 28px 16px; }
  .finale h2 { font-size: clamp(32px, 9vw, 44px); }
  .footer { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .sticky-row { width: min(1120px, calc(100% - 32px)); gap: 10px; }
  .sticky p { flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; }
  .sticky .btn { flex: none; height: 40px; padding: 0 14px; }
  .gate { padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); }
  .gate-card { padding: 22px 16px 18px; border-radius: 22px; }
  .gate-card h1 { font-size: 34px; margin-top: 12px; }
  .slide-label { font-size: 13px; padding-left: 54px; padding-right: 10px; }
  .auth-overlay { padding: 0; align-items: stretch; }
  .auth-split {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .auth-panel {
    min-height: 100%;
    align-content: start;
    padding: calc(64px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
  }
  .auth-card h1 { font-size: 28px; }
  .auth-lead { margin-bottom: 18px; }
  .auth-close { top: calc(12px + env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; }
  .code-row { grid-template-columns: minmax(0, 1fr) auto; }
  .send-code { padding: 0 12px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .orb, .pulse, .live-pill::before { animation: none; }
  .slide.is-snapping .slide-thumb,
  .slide.is-snapping .slide-fill { transition: none; }
}