/* Layout concept: a phone-first video app; on wide screens the phone sits beside a short "how it works". */
:root {
  --ink: #120f1f;        /* page and app ground, dusk violet-black */
  --ink-2: #1c1830;      /* sheets and panels */
  --ink-3: #2a2545;      /* raised controls */
  --line: rgba(245, 242, 255, 0.12);
  --paper: #f5f2ff;      /* text */
  --mist: #a39dbe;       /* secondary text */
  --sun: #ffb45e;        /* reach: warm, the colour of being seen */
  --sun-2: #ff8a5b;
  --tide: #5fe3cf;       /* rings and passing on */
  --rose: #ff6b8b;       /* likes */
  --shadow: rgba(5, 3, 12, 0.55);
  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --body: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  color-scheme: dark;
}
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--body); font-size: 15px; -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; border-radius: 10px; }
input { font: inherit; color: var(--paper); }

/* ---------- page ---------- */
.stage { height: 100%; display: grid; grid-template-columns: minmax(0, 400px) auto; gap: 64px; align-items: center; justify-content: center; padding-inline: 24px; padding-block: 24px; box-sizing: border-box; }
.intro { display: grid; gap: 22px; min-width: 0; }
.wordmark { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; line-height: 1; display: inline-flex; align-items: center; gap: 0.32em; }
.wordmark svg { width: 1.05em; height: 1.05em; flex: none; }
.intro .wordmark { font-size: 46px; }
.intro .tagline { font-family: var(--display); font-weight: 600; font-size: 26px; line-height: 1.15; text-wrap: balance; margin: 0; }
.intro .tagline em { font-style: normal; color: var(--sun); }
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rules li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; color: var(--mist); line-height: 1.45; }
.rules li b { color: var(--paper); font-weight: 600; }
.rules .dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-3); color: var(--sun); font-weight: 700; font-size: 14px; }
.note { color: var(--mist); font-size: 13px; line-height: 1.5; border-top: 1px solid var(--line); padding-top: 14px; margin: 0; }

.phone { position: relative; height: min(860px, calc(100vh - 48px)); aspect-ratio: 9 / 19.5; border-radius: 46px; border: 10px solid #07060d; box-shadow: 0 30px 80px var(--shadow), 0 0 0 1px var(--line); overflow: hidden; overflow: clip; background: #000; }

/* ---------- app shell ---------- */
.app { position: absolute; inset: 0; overflow: hidden; overflow: clip; background: #000; user-select: none; -webkit-user-select: none; touch-action: none; container: app / size; }
.feed { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; will-change: transform; }
.slide canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 55%, rgba(0,0,0,.65) 100%); }

.topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 8px; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.topbar .wordmark { font-size: 22px; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.topbar .spacer { flex: 1; }
.preview-badge { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); border: 1px solid var(--line); border-radius: 8px; padding: 2px 6px; background: rgba(18, 15, 31, 0.45); }
.reach-pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 5px; border-radius: 18px; background: rgba(18, 15, 31, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); font-weight: 700; font-variant-numeric: tabular-nums; }
.reach-pill svg { width: 26px; height: 26px; }
.reach-pill small { font-weight: 500; color: var(--mist); font-size: 12px; }
.reach-pill.bump { animation: bump .5s ease; }
@keyframes bump { 40% { transform: scale(1.12); } }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(18, 15, 31, 0.55); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.icon-btn svg { width: 18px; height: 18px; }

.progress { position: absolute; left: 14px; right: 14px; top: calc(60px + env(safe-area-inset-top, 0px)); height: 3px; border-radius: 2px; background: rgba(255,255,255,.22); z-index: 4; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--paper); border-radius: 2px; }
.progress.done i { background: var(--sun); }
.why { position: absolute; left: 14px; top: calc(74px + env(safe-area-inset-top, 0px)); z-index: 4; display: inline-flex; align-items: center; gap: 7px; max-width: calc(100% - 28px); padding: 7px 11px; border-radius: 14px; background: rgba(18, 15, 31, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.why .swatch { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--tide); }
.why[data-why="match"] .swatch { background: var(--sun); }
.why[data-why="follow"] .swatch { background: var(--rose); }
.why[data-why="turn"] .swatch, .why[data-why="new"] .swatch { background: #c9b8ff; }
.why span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rail { position: absolute; right: 10px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); z-index: 4; display: grid; gap: 16px; justify-items: center; }
.rail button { display: grid; justify-items: center; gap: 3px; font-size: 12px; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.5); font-variant-numeric: tabular-nums; }
.rail .ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(18, 15, 31, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.rail .ico svg { width: 24px; height: 24px; }
.rail .liked .ico { color: var(--rose); }
.rail .liked .ico svg { fill: var(--rose); }
.rail .passed .ico { color: var(--tide); }
.rail .pop .ico { animation: pop .35s ease; }
@keyframes pop { 50% { transform: scale(1.25); } }
.avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 16px; color: #1a1426; border: 2px solid var(--paper); position: relative; }
.avatar .plus { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; border-radius: 50%; background: var(--rose); color: #fff; display: grid; place-items: center; font-size: 14px; line-height: 1; border: 2px solid #000; }
.avatar .plus.on { background: var(--tide); color: #062a24; }
.rings-ico { width: 30px; height: 30px; }

.meta { position: absolute; left: 14px; right: 74px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 4; display: grid; gap: 6px; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.meta .who { font-weight: 700; font-size: 15px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.meta .who small { font-weight: 500; color: rgba(245,242,255,.75); font-size: 12.5px; }
.meta .cap { line-height: 1.35; font-size: 14px; }
.meta .sound { font-size: 12px; color: rgba(245,242,255,.8); display: flex; gap: 6px; align-items: center; }
.meta .tags { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; font-weight: 600; color: var(--tide); }

/* ---------- bottom nav ---------- */
.nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 8px 6px calc(10px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(10,8,18,0) 0%, rgba(10,8,18,.85) 40%); }
.nav button { display: grid; justify-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--mist); padding-block: 4px; }
.nav button.on { color: var(--paper); }
.nav svg { width: 24px; height: 24px; }
.post-btn { position: relative; width: 52px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--ink-3); color: var(--mist); margin-inline: auto; }
.post-btn.ready { background: linear-gradient(135deg, var(--sun), var(--sun-2)); color: #2a1408; box-shadow: 0 0 0 0 rgba(255,180,94,.6); animation: ready 2s ease-out infinite; }
@keyframes ready { 70% { box-shadow: 0 0 0 10px rgba(255,180,94,0); } }
.post-btn svg.gate { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); }
.badge { position: absolute; top: -4px; right: 18%; min-width: 16px; height: 16px; border-radius: 8px; background: var(--rose); color: #fff; font-size: 10px; display: grid; place-items: center; padding-inline: 4px; }

/* ---------- toast, bursts ---------- */
.toast { position: absolute; left: 50%; top: calc(112px + env(safe-area-inset-top, 0px)); transform: translate(-50%, -12px); z-index: 30; width: max-content; max-width: calc(100% - 40px); padding: 11px 15px; border-radius: 14px; background: rgba(28, 24, 48, 0.94); border: 1px solid var(--line); box-shadow: 0 10px 30px var(--shadow); font-size: 13.5px; line-height: 1.35; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.sheet-open .toast { top: calc(16px + env(safe-area-inset-top, 0px)); }
.toast b { color: var(--sun); }
.plusone { position: absolute; z-index: 31; font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--sun); pointer-events: none; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.heart { position: absolute; z-index: 6; width: 110px; height: 110px; margin: -55px 0 0 -55px; color: var(--rose); pointer-events: none; animation: heart .9s ease forwards; }
@keyframes heart { 0% { transform: scale(.3); opacity: 0; } 25% { transform: scale(1.1); opacity: 1; } 70% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.4) translateY(-30px); opacity: 0; } }
.ripple { position: absolute; z-index: 6; border: 2px solid var(--tide); border-radius: 50%; pointer-events: none; animation: ripple 1s ease-out forwards; }
@keyframes ripple { from { width: 0; height: 0; opacity: 1; } to { width: 220px; height: 220px; margin: -110px 0 0 -110px; opacity: 0; } }

.pause-ico { position: absolute; left: 50%; top: 45%; z-index: 6; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; display: grid; place-items: center; background: rgba(18, 15, 31, 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none; }
.pause-ico svg { width: 30px; height: 30px; margin-left: 4px; }

/* ---------- end of day ---------- */
.end { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 14px; padding: 0 28px 60px; text-align: center; z-index: 3; }
.end h2 { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1.05; margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
.end p { margin: 0; color: rgba(245,242,255,.85); line-height: 1.5; max-width: 30ch; }
.end .stats { display: flex; gap: 22px; margin-block: 8px; }
.end .stats div { display: grid; gap: 2px; }
.end .stats b { font-family: var(--display); font-size: 30px; color: var(--sun); font-variant-numeric: tabular-nums; }
.end .stats span { font-size: 12px; color: var(--mist); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 23px; font-weight: 700; background: var(--ink-3); border: 1px solid var(--line); }
.btn.primary { background: linear-gradient(135deg, var(--sun), var(--sun-2)); color: #2a1408; border: 0; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .45; cursor: default; }

/* ---------- sheets ---------- */
.scrim { position: absolute; inset: 0; z-index: 20; background: rgba(5,3,12,.55); opacity: 0; transition: opacity .25s; }
.scrim.show { opacity: 1; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 21; max-height: 86%; display: flex; flex-direction: column; background: var(--ink-2); border-radius: 24px 24px 0 0; border-top: 1px solid var(--line); transform: translateY(105%); transition: transform .3s cubic-bezier(.2,.8,.2,1); padding-bottom: env(safe-area-inset-bottom, 0px); }
.sheet.show { transform: none; }
.sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 10px auto 4px; flex: none; }
.sheet header { display: flex; align-items: center; gap: 10px; padding: 8px 18px 10px; flex: none; }
.sheet header h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 19px; flex: 1; }
.sheet .body { overflow-y: auto; padding: 4px 18px 18px; display: grid; gap: 14px; line-height: 1.5; color: var(--mist); }
.sheet .body p { margin: 0; }
.sheet .body b, .sheet .body strong { color: var(--paper); }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.field label { font-size: 12px; font-weight: 600; color: var(--mist); letter-spacing: .02em; }
.field input, .field select { height: 46px; border-radius: 14px; border: 1px solid var(--line); background: var(--ink); padding: 0 14px; color: var(--paper); font: inherit; }
.field textarea { min-height: 64px; border-radius: 14px; border: 1px solid var(--line); background: var(--ink); padding: 10px 14px; color: var(--paper); font: inherit; resize: none; }
.field > input, .field > select, .field > textarea { width: 100%; min-width: 0; box-sizing: border-box; } /* inputs have a built-in minimum width; let them shrink */
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.two > * { min-width: 0; }
.providers { display: grid; gap: 10px; }
.provider { height: 48px; border-radius: 24px; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; background: #fff; color: #1f1f1f; }
.provider svg { width: 20px; height: 20px; }
.provider.apple { background: #000; color: #fff; border: 1px solid var(--line); }
.provider.facebook { background: #1877f2; color: #fff; }
.provider.email { background: var(--ink-3); color: var(--paper); border: 1px solid var(--line); }
.fine { font-size: 12.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid var(--line); background: var(--ink); color: var(--mist); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; }
.chip.on { border-color: var(--sun); color: var(--sun); background: rgba(255,180,94,.1); }
span.chip { cursor: default; }
.add-row { display: flex; gap: 8px; }
.add-row input { flex: 1 1 0; width: 0; min-width: 0; height: 40px; border-radius: 20px; border: 1px solid var(--line); background: var(--ink); padding: 0 14px; }
.add-row button { height: 40px; padding: 0 16px; border-radius: 20px; background: var(--ink-3); border: 1px solid var(--line); font-weight: 700; }
.step-of { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mist); }
.comment { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; }
.comment .avatar { width: 34px; height: 34px; font-size: 13px; border-width: 0; }
.comment b { display: block; font-size: 13px; }
.comment span { color: var(--paper); font-size: 14px; }
.row-input { display: flex; gap: 8px; padding: 10px 18px 14px; border-top: 1px solid var(--line); flex: none; }
.row-input input { flex: 1; height: 42px; border-radius: 21px; border: 1px solid var(--line); background: var(--ink); padding: 0 16px; min-width: 0; }
.row-input button { height: 42px; padding: 0 16px; border-radius: 21px; background: var(--sun); color: #2a1408; font-weight: 700; }
.steps { display: grid; gap: 12px; }
.steps div { display: grid; grid-template-columns: 30px 1fr; gap: 10px; }
.steps i { width: 30px; height: 30px; border-radius: 50%; background: var(--ink-3); color: var(--sun); display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 13px; }

/* rings diagram */
.rings-map { position: relative; width: 230px; height: 230px; margin: 4px auto; }
.rings-map .ring { position: absolute; border-radius: 50%; border: 2px dashed var(--line); display: grid; justify-items: center; }
.rings-map .ring.lit { border: 2px solid var(--tide); background: rgba(95,227,207,.06); }
.rings-map .ring span { font-size: 11px; font-weight: 600; margin-top: 6px; color: var(--mist); }
.rings-map .ring.lit span { color: var(--tide); }
.rings-map .core { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 6px rgba(255,180,94,.25); }

/* ---------- screens (Friends, Inbox, Me) ---------- */
.screen { position: absolute; inset: 0; z-index: 7; background: var(--ink); overflow-y: auto; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(96px + env(safe-area-inset-bottom, 0px)); display: grid; align-content: start; gap: 18px; }
.screen h2 { font-family: var(--display); font-weight: 800; font-size: 28px; margin: 6px 0 0; letter-spacing: -0.02em; }
.screen h4 { margin: 4px 0 -6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--mist); font-weight: 700; }
.list { display: grid; gap: 2px; background: var(--ink-2); border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.item { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; text-align: left; width: 100%; box-sizing: border-box; }
.item + .item { border-top: 1px solid var(--line); }
.item .avatar { width: 44px; height: 44px; border-width: 0; font-size: 15px; }
.item .txt { min-width: 0; }
.item .txt b { display: block; font-size: 15px; }
.item .txt span { display: block; color: var(--mist); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-btn { height: 32px; padding: 0 12px; border-radius: 16px; background: var(--ink-3); border: 1px solid var(--line); font-size: 13px; font-weight: 700; white-space: nowrap; }
.chip-btn.warm { background: rgba(255,180,94,.14); border-color: rgba(255,180,94,.4); color: var(--sun); }
.seg { display: inline-flex; background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; padding: 3px; gap: 3px; justify-self: start; }
.seg button { height: 34px; padding: 0 16px; border-radius: 11px; font-weight: 600; color: var(--mist); }
.seg button.on { background: var(--ink-3); color: var(--paper); }

.chat { position: absolute; inset: 0; z-index: 9; background: var(--ink); display: flex; flex-direction: column; }
.chat header { display: flex; align-items: center; gap: 12px; padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 12px; border-bottom: 1px solid var(--line); }
.chat header .avatar { width: 36px; height: 36px; border-width: 0; font-size: 13px; }
.chat .msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.bubble { max-width: 78%; padding: 9px 13px; border-radius: 18px; line-height: 1.4; font-size: 14.5px; background: var(--ink-3); align-self: flex-start; border-bottom-left-radius: 6px; }
.bubble.you { align-self: flex-end; background: linear-gradient(135deg, var(--sun), var(--sun-2)); color: #2a1408; border-bottom-left-radius: 18px; border-bottom-right-radius: 6px; }
.chat .row-input { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }

.me-head { display: grid; justify-items: center; gap: 10px; text-align: center; padding-top: 8px; }
.me-ring { position: relative; width: 120px; height: 120px; }
.me-ring svg { position: absolute; inset: 0; }
.me-ring .avatar { position: absolute; inset: 14px; width: auto; height: auto; font-size: 32px; border-width: 0; }
.me-head h2 { margin: 0; }
.level { font-size: 13px; color: var(--mist); line-height: 1.5; text-wrap: balance; }
.level b { color: var(--tide); }
.stats4 { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ink-2); border: 1px solid var(--line); border-radius: 18px; padding: 14px 6px; text-align: center; }
.stats4 b { display: block; font-family: var(--display); font-size: 22px; font-variant-numeric: tabular-nums; }
.stats4 span { font-size: 11.5px; color: var(--mist); }
.explain { background: rgba(255,180,94,.08); border: 1px solid rgba(255,180,94,.25); border-radius: 18px; padding: 14px 16px; line-height: 1.5; color: var(--paper); font-size: 14px; }
.explain b { color: var(--sun); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.thumb { position: relative; aspect-ratio: 9 / 14; border-radius: 12px; overflow: hidden; background: var(--ink-2); max-width: 100%; }
.thumb canvas { width: 100%; height: 100%; display: block; }
.thumb span { position: absolute; left: 6px; bottom: 6px; font-size: 11px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.empty { text-align: center; color: var(--mist); padding: 18px; line-height: 1.5; background: var(--ink-2); border-radius: 18px; border: 1px dashed var(--line); }

/* composer + reach animation */
.sheet .body > * { min-width: 0; }
.composer-preview { position: relative; height: clamp(110px, 26cqh, 230px); border-radius: 18px; overflow: hidden; min-width: 0; }
.composer-preview canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.scene-chips button { height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid var(--line); background: var(--ink); font-size: 13px; font-weight: 600; color: var(--mist); }
.scene-chips button.on { border-color: var(--sun); color: var(--sun); }
/* The ripple screen: rings on top (or left), explanation below (or right). They never overlap. */
.launch { position: absolute; inset: 0; z-index: 25; background: radial-gradient(circle at 50% 45%, #2b2150 0%, var(--ink) 70%); display: flex; flex-direction: column; text-align: center; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
.launch .rings { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.launch .wave { position: absolute; left: 50%; top: calc(50% + 10px); border-radius: 50%; border: 2px solid var(--tide); transform: translate(-50%, -50%); width: 0; height: 0; opacity: 0; }
.launch.go .wave { animation: wave 2.4s ease-out forwards; }
@keyframes wave { 0% { width: 0; height: 0; opacity: 1; } 100% { width: var(--to); height: var(--to); opacity: .9; } }
.launch .labels span { position: absolute; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: var(--tide); opacity: 0; transition: opacity .4s; white-space: nowrap; }
.launch .count { position: absolute; left: 50%; top: calc(50% + 10px); transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 4px; z-index: 2; width: 10em; }
.launch .count b { font-family: var(--display); font-weight: 800; font-size: clamp(40px, 9cqmin, 64px); color: var(--sun); font-variant-numeric: tabular-nums; line-height: 1; }
.launch .count span { color: var(--paper); font-weight: 600; font-size: 14px; line-height: 1.3; }
.launch .after { flex: none; display: grid; gap: 12px; padding: 16px 24px 32px; opacity: 0; transition: opacity .5s; color: var(--mist); line-height: 1.5; font-size: 14px; }
.launch .after.show { opacity: 1; }
@container app (orientation: landscape) and (max-height: 560px) {
  .launch { flex-direction: row; }
  .launch .after { width: 46%; align-content: center; padding: 16px 24px; }
}

.nudge { position: absolute; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 9; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 12px 12px 12px 16px; border-radius: 18px; background: rgba(28, 24, 48, 0.96); border: 1px solid rgba(255,180,94,.35); box-shadow: 0 10px 30px var(--shadow); line-height: 1.35; font-size: 13.5px; }
.nudge b { color: var(--sun); }
.nudge .x { position: absolute; top: -8px; right: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--ink-3); border: 1px solid var(--line); display: grid; place-items: center; font-size: 14px; }

/* ---------- short screens (phones in landscape, small windows): compact app ----------
   Container queries: the app adapts to its own size, whether it fills the screen or sits in the phone frame. */
@container app (max-height: 560px) {
  .topbar { padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 4px; }
  .topbar .wordmark { font-size: 18px; }
  .reach-pill { height: 30px; }
  .reach-pill svg { width: 22px; height: 22px; }
  .icon-btn { width: 30px; height: 30px; }
  .progress { top: calc(44px + env(safe-area-inset-top, 0px)); }
  .why { top: calc(53px + env(safe-area-inset-top, 0px)); padding: 5px 9px; font-size: 11.5px; }
  .rail { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); gap: 6px; }
  .rail .ico { width: 40px; height: 40px; }
  .rail .ico svg { width: 21px; height: 21px; }
  .rail .avatar { width: 40px; height: 40px; font-size: 14px; }
  .rail > button:last-child { display: none; } /* "how far it travelled": no room on short screens */
  .meta { bottom: calc(54px + env(safe-area-inset-bottom, 0px)); gap: 3px; }
  .meta .cap { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .meta .sound { display: none; }
  .nav { padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px)); }
  .nav svg { width: 21px; height: 21px; }
  .nav button { font-size: 10.5px; padding-block: 2px; }
  .end { gap: 8px; padding-bottom: 52px; }
  .end h2 { font-size: 24px; }
  .end p { font-size: 13.5px; }
  .end .stats b { font-size: 22px; }
  .end .btn { height: 40px; }
  .sheet { max-height: 94%; }
  .sheet header { padding: 4px 18px 6px; }
  .screen { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
}

/* ---------- narrow phones (e.g. folded foldables, the first iPhone SE): a slimmer top bar ---------- */
@container app (max-width: 380px) {
  .reach-pill small { display: none; }
  .reach-pill { padding-right: 10px; }
}
@container app (max-width: 330px) {
  .preview-badge { display: none; }
  .topbar { gap: 8px; }
}

/* ---------- desktop windows that aren't very tall: a compact explanation beside the phone ---------- */
@media (min-width: 900px) and (min-height: 520px) and (max-height: 759px) {
  .stage { gap: 48px; }
  .intro { gap: 14px; }
  .intro .wordmark { font-size: 34px; }
  .intro .tagline { font-size: 21px; }
  .rules { gap: 10px; }
  .rules li { font-size: 13.5px; line-height: 1.4; }
  .rules .dot { width: 28px; height: 28px; font-size: 12px; }
  .rules li { grid-template-columns: 28px 1fr; }
  .note { font-size: 12px; padding-top: 10px; }
}

/* ---------- phones, tablets in portrait, and any short window: the app is the page ---------- */
@media (max-width: 899px), (max-height: 519px) {
  .stage { display: block; padding: 0; }
  .intro { display: none; }
  .phone { height: 100%; width: 100%; aspect-ratio: auto; border-radius: 0; border: 0; box-shadow: none; }
}
@media (min-width: 900px) { .info-only-mobile { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}