:root {
  --ink: #0b0b10;
  --paper: #fdfbf5;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--ink);
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.screen {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  padding: 24px;
}

/* Landing */
.landing {
  background:
    radial-gradient(circle at 15% 20%, #ff4d8d 0, transparent 40%),
    radial-gradient(circle at 85% 80%, #1ed760 0, transparent 45%),
    radial-gradient(circle at 80% 10%, #6c3cff 0, transparent 40%),
    var(--ink);
}
.landing-inner { width: min(420px, 100%); text-align: center; }
.logo-ball {
  width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #ffd6a8 45%, #ff8a3d);
  box-shadow: 0 10px 40px rgba(255, 138, 61, .5);
  animation: bounce 1.4s cubic-bezier(.5, 0, .5, 1) infinite alternate;
}
@keyframes bounce { to { transform: translateY(-14px); } }
.landing h1 { font-size: clamp(48px, 13vw, 76px); font-weight: 900; line-height: .9; letter-spacing: -.04em; }
.landing h1 span { color: #1ed760; }
.tagline { margin: 16px 0 28px; font-size: 18px; opacity: .85; }
form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
input, select, button {
  font: inherit; font-size: 17px; border: 0; border-radius: 999px; padding: 15px 20px;
}
input { background: rgba(255,255,255,.95); color: var(--ink); min-width: 0; }
select { background: rgba(255,255,255,.18); color: var(--paper); }
select option { color: var(--ink); }
button[type=submit] {
  grid-column: 1 / -1; background: #1ed760; color: var(--ink); font-weight: 800; cursor: pointer;
  transition: transform .15s;
}
button[type=submit]:hover { transform: scale(1.03); }
.error { margin-top: 14px; color: #ffd1dc; font-weight: 600; }
.hint { margin-top: 18px; font-size: 14px; opacity: .6; }

/* Loading */
.loading { background: var(--ink); text-align: center; gap: 18px; align-content: center; }
.spinner {
  width: 48px; height: 48px; border-radius: 50%;
  border: 5px solid rgba(255,255,255,.15); border-top-color: #1ed760;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Story */
.story { position: fixed; inset: 0; display: grid; place-items: center; background: #000; }
.story-frame {
  position: relative; overflow: hidden;
  width: 100vw; height: 100dvh;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
@media (min-width: 600px) { .story-frame { border-radius: 18px; height: min(94dvh, 900px); width: calc(min(94dvh, 900px) * 9 / 16); } }

.progress { position: absolute; z-index: 5; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; }
.progress .bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; }
.progress .bar i { display: block; height: 100%; width: 0; background: #fff; }
.progress .bar.done i { width: 100%; }
.close {
  position: absolute; z-index: 6; top: 18px; right: 10px; width: 36px; height: 36px;
  background: none; border: 0; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; opacity: .8;
}

.slides { position: absolute; inset: 0; }
.slide {
  position: absolute; inset: 0; padding: 64px 28px 40px;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  opacity: 0; visibility: hidden; transition: opacity .35s;
  overflow: hidden;
}
.slide.active { opacity: 1; visibility: visible; }
.slide > * { position: relative; z-index: 1; }

/* Blobs give every slide a bit of motion */
.slide::before, .slide::after {
  content: ''; position: absolute; z-index: 0; border-radius: 50%; filter: blur(2px);
  animation: float 9s ease-in-out infinite alternate;
}
.slide::before { width: 70%; aspect-ratio: 1; top: -15%; right: -25%; background: var(--blob1); }
.slide::after { width: 55%; aspect-ratio: 1; bottom: -12%; left: -20%; background: var(--blob2); animation-delay: -4s; }
@keyframes float { to { transform: translate(-6%, 8%) rotate(25deg) scale(1.08); } }

.t-green  { background: #1ed760; color: var(--ink); --blob1: #b4f5c8; --blob2: #0f9e43; }
.t-pink   { background: #ff4d8d; color: var(--ink); --blob1: #ffb3cf; --blob2: #c21d5c; }
.t-purple { background: #4b1fd6; color: var(--paper); --blob1: #7b54ff; --blob2: #2a0c8f; }
.t-orange { background: #ff7a1a; color: var(--ink); --blob1: #ffc08a; --blob2: #d14d00; }
.t-blue   { background: #1d4ed8; color: var(--paper); --blob1: #3b82f6; --blob2: #0b2a7a; }
.t-yellow { background: #f6e04b; color: var(--ink); --blob1: #fff4a3; --blob2: #d4b400; }
.t-red    { background: #d7263d; color: var(--paper); --blob1: #ff5e72; --blob2: #7d0f1f; }
.t-teal   { background: #10b3a3; color: var(--ink); --blob1: #8ef0e5; --blob2: #087368; }
.t-dark   { background: #121216; color: var(--paper); --blob1: #26262e; --blob2: #1ed76033; }

.kicker { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; opacity: .8; }
.big { font-size: clamp(72px, 26vmin, 150px); font-weight: 900; line-height: .85; letter-spacing: -.05em; }
.big small { font-size: .4em; letter-spacing: -.02em; }
.headline { font-size: clamp(30px, 8.5vmin, 44px); font-weight: 900; line-height: 1.02; letter-spacing: -.03em; }
.sub { font-size: 18px; line-height: 1.35; font-weight: 600; opacity: .9; }
.note { font-size: 14px; opacity: .75; }

/* Entrance animation for slide content */
.slide.active > * { animation: rise .6s cubic-bezier(.2, .8, .2, 1) both; }
.slide.active > *:nth-child(2) { animation-delay: .12s; }
.slide.active > *:nth-child(3) { animation-delay: .24s; }
.slide.active > *:nth-child(4) { animation-delay: .36s; }
.slide.active > *:nth-child(5) { animation-delay: .48s; }
.slide.active > *:nth-child(n+6) { animation-delay: .6s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

.person { display: flex; align-items: center; gap: 16px; }
.avatar {
  flex: none; width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  display: grid; place-items: center; font-size: 36px; font-weight: 900;
  background: rgba(0,0,0,.2); border: 4px solid currentColor;
}
.person .name { font-size: clamp(26px, 7.5vmin, 36px); font-weight: 900; line-height: 1.05; letter-spacing: -.02em; }

.wdl { display: flex; height: 18px; border-radius: 9px; overflow: hidden; background: rgba(0,0,0,.15); }
.wdl span { height: 100%; transform-origin: left; animation: grow 1s .4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes grow { from { transform: scaleX(0); } }
.legend { display: flex; gap: 18px; font-weight: 800; font-size: 17px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat { background: rgba(0,0,0,.14); border-radius: 16px; padding: 14px; }
.t-purple .stat, .t-blue .stat, .t-red .stat, .t-dark .stat { background: rgba(255,255,255,.1); }
.stat b { display: block; font-size: 30px; font-weight: 900; letter-spacing: -.03em; }
.stat span { font-size: 13px; font-weight: 600; opacity: .8; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { background: rgba(0,0,0,.15); border-radius: 999px; padding: 5px 11px; font-size: 13px; font-weight: 700; }

.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .line { fill: none; stroke: currentColor; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 2000; stroke-dashoffset: 2000; }
.slide.active .chart .line { animation: draw 2s .3s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.chart .area { fill: currentColor; opacity: .12; }
.chart .dot { fill: currentColor; }
.chart text { fill: currentColor; font: 800 13px var(--font); }

.months { display: flex; align-items: flex-end; gap: 5px; height: 150px; }
.months div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.months i { width: 100%; border-radius: 5px 5px 2px 2px; background: currentColor; opacity: .35; transform-origin: bottom;
  animation: rise-bar .9s cubic-bezier(.2, .8, .2, 1) both; }
.months i.top { opacity: 1; }
.months span { font-size: 10px; font-weight: 800; opacity: .8; }
@keyframes rise-bar { from { transform: scaleY(0); } }

.summary { gap: 10px; justify-content: flex-start; padding-top: 70px; }
.summary .who { display: flex; align-items: center; gap: 12px; }
.summary .who .avatar { width: 56px; height: 56px; font-size: 22px; border-width: 3px; }
.summary .who h2 { font-size: 24px; font-weight: 900; line-height: 1.1; }
.summary .rows { display: grid; gap: 8px; }
.summary .row { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 7px; }
.summary .row span { opacity: .7; font-weight: 600; font-size: 14px; }
.summary .row b { font-weight: 800; font-size: 15px; text-align: right; }
.actions { display: flex; gap: 10px; margin-top: auto; }
.actions button {
  flex: 1; font: 800 15px var(--font); padding: 13px; border-radius: 999px; border: 0; cursor: pointer;
  background: #1ed760; color: var(--ink);
}
.actions button.ghost { background: rgba(255,255,255,.12); color: var(--paper); }
.brand { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .5; text-align: center; }

.pending { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.pending .spinner { width: 28px; height: 28px; border-width: 4px; border-top-color: currentColor; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .chart .line { stroke-dashoffset: 0; }
}

.big.hello { font-size: clamp(48px, 15vmin, 96px); line-height: .95; }
.fit { display: block; width: max-content; max-width: none; white-space: nowrap; }