:root{
  --bg:#020308;
  --surface:rgba(10,14,25,.52);
  --surface-strong:rgba(10,14,25,.82);
  --line:rgba(255,255,255,.10);
  --text:#faf7ff;
  --muted:#d8deeb;
  --pink:#f6b6d9;
  --rose:#ffe7f2;
  --gold:#ffcb6e;
  --gold-deep:#9f5914;
  --blue:#8fd4ff;
  --earth-blue:#244560;
  --earth-light:#78cff8;
  --shadow:0 28px 80px rgba(0,0,0,.46);
  --radius:28px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  background:var(--bg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
body.modal-open{overflow:hidden}
img{display:block;max-width:100%}
button{font:inherit;border:none;cursor:pointer}

.scene-shell{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
}

.scene{
  position:absolute;
  inset:0;
  width:100vw;
  max-width:430px;
  margin:0 auto;
  left:0;
  right:0;
  overflow:hidden;
  transform:translateZ(0);
}
.scene.shake{animation:sceneImpactShake .66s cubic-bezier(.17,.7,.29,.99)}

.layer,
.eye,
.fall-trail,
.meeting-halo,
.heart-burst,
.impact-flash,
.love-link,
.scene-caption,
.progress-chip,
.moscow-city,
.city-label,
.shockwave,
.ember-burst{
  position:absolute;
}

.base-space,
.deep-stars,
.cosmic-glow,
.nebula-dust,
.aurora,
.planet-orb,
.atmosphere,
.clouds,
.earth-glow,
.earth,
.cosmic-objects,
.shooting-comets{
  inset:0;
  transition:opacity .35s ease, transform .35s ease;
  will-change:opacity, transform;
}

.base-space{
  background:
    radial-gradient(circle at 50% -8%, rgba(255,255,255,.09), transparent 24%),
    linear-gradient(180deg, #020207 0%, #040916 28%, #07111e 44%, #0b1a29 60%, #11283d 78%, #17354f 100%);
}

.deep-stars{
  opacity:.5;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.22) 0 1px, transparent 2px),
    radial-gradient(circle at 79% 12%, rgba(255,255,255,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 66% 32%, rgba(255,255,255,.16) 0 1px, transparent 2px),
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.16) 0 1px, transparent 2px),
    radial-gradient(circle at 15% 42%, rgba(255,255,255,.16) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 46%, rgba(255,255,255,.14) 0 1px, transparent 2px);
  filter:blur(.2px);
}

.cosmic-glow{
  background:
    radial-gradient(circle at 18% 16%, rgba(255,180,211,.18), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(114,172,255,.14), transparent 24%),
    radial-gradient(circle at 50% 46%, rgba(255,240,245,.05), transparent 34%);
}

.nebula-dust{
  opacity:.74;
  background:
    radial-gradient(ellipse at 12% 28%, rgba(255,148,112,.10), transparent 28%),
    radial-gradient(ellipse at 78% 18%, rgba(111,190,255,.10), transparent 26%),
    radial-gradient(ellipse at 66% 40%, rgba(215,163,255,.10), transparent 28%),
    radial-gradient(ellipse at 40% 56%, rgba(255,210,150,.06), transparent 28%);
  filter:blur(26px);
}

.aurora{
  opacity:.55;
  background:
    radial-gradient(ellipse at 40% 8%, rgba(184,112,255,.09), transparent 36%),
    radial-gradient(ellipse at 62% 14%, rgba(100,220,255,.09), transparent 40%);
  filter:blur(18px);
}

.planet-orb{
  opacity:.72;
  inset:auto auto 76svh -7vw;
  width:35vw;
  max-width:168px;
  height:35vw;
  max-height:168px;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.22), transparent 14%),
    radial-gradient(circle at 40% 45%, rgba(205,164,255,.38), transparent 26%),
    radial-gradient(circle at 62% 62%, rgba(123,216,255,.28), transparent 28%),
    linear-gradient(180deg, #5f3da1 0%, #2a1d53 54%, #171328 100%);
  box-shadow:0 0 60px rgba(122,104,255,.18);
}

.stars,
.cosmic-objects,
.shooting-comets{overflow:hidden}
.star,
.space-rock,
.shooting-comet{position:absolute;display:block}
.star{
  width:2px;
  height:2px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.55);
  animation:twinkle var(--dur) ease-in-out infinite;
}
.space-rock{
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,246,200,.85), rgba(255,166,84,.16));
  filter:blur(.2px);
  animation:floatRock var(--dur) ease-in-out infinite;
}
.shooting-comet{
  width:2px;
  height:2px;
  border-radius:50%;
  background:rgba(255,255,255,.95);
  box-shadow:0 0 10px rgba(255,255,255,.85), 0 0 24px rgba(158,223,255,.55);
  animation:shootComet var(--dur) linear infinite;
  animation-delay:var(--delay);
}
.shooting-comet::before{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  width:68px;
  height:2px;
  transform:translate(0,-50%) rotate(-18deg);
  transform-origin:right center;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(154,221,255,.44) 48%, rgba(255,255,255,.88) 100%);
  filter:blur(1px);
}

.atmosphere{
  opacity:0;
  background:
    linear-gradient(180deg, rgba(134,181,255,0) 0%, rgba(134,181,255,.08) 24%, rgba(104,179,255,.18) 52%, rgba(179,222,255,.30) 100%),
    radial-gradient(circle at 50% 110%, rgba(182,236,255,.35), transparent 56%);
}

.clouds-back{
  opacity:0;
  background:
    radial-gradient(ellipse at 26% 66%, rgba(255,255,255,.12), transparent 24%),
    radial-gradient(ellipse at 78% 61%, rgba(255,255,255,.12), transparent 20%),
    radial-gradient(ellipse at 48% 76%, rgba(255,255,255,.10), transparent 22%),
    radial-gradient(ellipse at 12% 86%, rgba(255,255,255,.12), transparent 22%),
    radial-gradient(ellipse at 84% 85%, rgba(255,255,255,.10), transparent 24%);
  filter:blur(18px);
}

.clouds-front{
  opacity:0;
  background:
    radial-gradient(ellipse at 20% 82%, rgba(255,255,255,.28), transparent 28%),
    radial-gradient(ellipse at 52% 88%, rgba(255,255,255,.34), transparent 30%),
    radial-gradient(ellipse at 82% 81%, rgba(255,255,255,.26), transparent 24%),
    radial-gradient(ellipse at 40% 72%, rgba(255,255,255,.16), transparent 20%);
  filter:blur(12px);
}

.earth-glow{
  opacity:0;
  inset:auto -20vw -2svh -20vw;
  height:24svh;
  background:radial-gradient(ellipse at 50% 100%, rgba(112,210,255,.54) 0%, rgba(112,210,255,.18) 34%, rgba(112,210,255,0) 68%);
  filter:blur(18px);
}

.earth{
  opacity:0;
  inset:auto -18vw -13svh -18vw;
  height:42svh;
  transform:translateY(18%) scale(1.08);
  border-radius:50% 50% 0 0;
  background:
    radial-gradient(circle at 22% 48%, rgba(90,145,108,.86), transparent 13%),
    radial-gradient(circle at 38% 60%, rgba(71,119,86,.80), transparent 16%),
    radial-gradient(circle at 56% 46%, rgba(88,149,116,.78), transparent 16%),
    radial-gradient(circle at 73% 55%, rgba(67,118,86,.76), transparent 13%),
    radial-gradient(circle at 51% 8%, rgba(183,240,255,.88), transparent 22%),
    linear-gradient(180deg, #7ad8ff 0%, #4a90ba 26%, #284e6f 55%, #112437 100%);
  box-shadow:0 -42px 120px rgba(121,204,255,.18), inset 0 30px 66px rgba(255,255,255,.08);
}
.earth.impact{animation:earthImpactGlow 1.8s ease-out}

.moscow-city{
  left:50%;
  bottom:17svh;
  width:78vw;
  max-width:324px;
  height:22svh;
  opacity:0;
  transform:translateX(-50%) translateY(24px) scale(.92);
  transition:opacity .42s ease, transform .42s ease;
}
.moscow-city.impact{animation:cityImpactRise 1.5s ease-out}

.city-glow{
  position:absolute;
  left:50%;
  bottom:0;
  width:82%;
  height:34%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(126,215,255,.52), rgba(255,200,137,.16) 46%, transparent 76%);
  filter:blur(14px);
}
.city-lights{
  position:absolute;
  left:8%;
  right:8%;
  bottom:1.8%;
  height:10%;
  border-radius:999px;
  background:radial-gradient(circle at 18% 50%, rgba(255,207,122,.95) 0 2px, transparent 4px),
             radial-gradient(circle at 28% 50%, rgba(255,207,122,.85) 0 2px, transparent 4px),
             radial-gradient(circle at 39% 50%, rgba(255,207,122,.95) 0 2px, transparent 4px),
             radial-gradient(circle at 52% 50%, rgba(255,207,122,.85) 0 2px, transparent 4px),
             radial-gradient(circle at 64% 50%, rgba(255,207,122,.95) 0 2px, transparent 4px),
             radial-gradient(circle at 74% 50%, rgba(255,207,122,.85) 0 2px, transparent 4px),
             radial-gradient(circle at 84% 50%, rgba(255,207,122,.95) 0 2px, transparent 4px);
  opacity:.9;
  filter:blur(.5px);
}
.skyline-base{
  position:absolute;
  left:3%;
  right:3%;
  bottom:0;
  height:5%;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(10,15,24,.92), rgba(3,5,10,.98));
  box-shadow:0 0 18px rgba(126,215,255,.08);
}
.city-beam{
  position:absolute;
  bottom:0;
  width:16%;
  height:90%;
  background:linear-gradient(180deg, rgba(134,225,255,0), rgba(134,225,255,.18) 50%, rgba(134,225,255,.04) 100%);
  filter:blur(10px);
  opacity:.46;
}
.beam-left{left:18%; transform:rotate(-7deg)}
.beam-center{left:43%; transform:rotate(1deg)}
.beam-right{right:14%; transform:rotate(7deg)}

.tower{
  position:absolute;
  bottom:2%;
  background:linear-gradient(180deg, rgba(15,23,36,.94), rgba(4,7,12,.98));
  border:1px solid rgba(157,215,255,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 0 16px rgba(110,207,255,.09);
}
.tower::before{
  content:"";
  position:absolute;
  inset:8% 14% 8% 14%;
  background:
    repeating-linear-gradient(180deg,
      rgba(255,210,128,.0) 0 4px,
      rgba(255,210,128,.72) 4px 5px,
      rgba(122,217,255,.0) 5px 9px,
      rgba(122,217,255,.25) 9px 10px);
  opacity:.66;
}
.beacon{
  position:absolute;
  top:-5px;
  left:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  transform:translateX(-50%);
  background:#ff6f7d;
  box-shadow:0 0 10px rgba(255,111,125,.8);
  animation:beaconBlink 1.4s ease-in-out infinite;
}

.tiny{left:1%; width:7%; height:26%;}
.low{left:9%; width:9%; height:34%;}
.imperia{left:19%; width:10%; height:48%; border-radius:3px 3px 2px 2px; transform:skewX(-2deg)}
.federation-left{left:31%; width:11%; height:69%; transform:skewX(-5deg);}
.federation-right{left:42.5%; width:13%; height:79%; transform:skewX(4deg);}
.mercury{left:57.5%; width:10%; height:61%; transform:skewX(-2deg)}
.naberezhnaya{left:68.5%; width:8%; height:44%;}
.oko{left:77%; width:11%; height:73%; transform:skewX(2deg);}
.evolution{left:89.5%; width:8%; height:59%; border-radius:12px 12px 2px 2px; transform:skewX(-10deg)}
.spire-center{
  left:50.5%;
  width:6.4%;
  height:86%;
  clip-path:polygon(50% 0, 100% 16%, 100% 100%, 0 100%, 0 16%);
}
.spire-center::before{inset:14% 22% 8% 22%}
.iq{left:96.5%; width:3.5%; height:28%;}

.city-label{
  left:50%;
  bottom:13.1svh;
  transform:translateX(-50%);
  padding:10px 15px;
  border-radius:999px;
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  background:rgba(8,13,22,.64);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(248,246,255,.9);
  box-shadow:0 8px 28px rgba(0,0,0,.28);
  opacity:0;
  transition:opacity .35s ease, transform .35s ease;
}

.eye{
  left:50%;
  top:16svh;
  width:min(38vw, 150px);
  aspect-ratio:1;
  transform:translate(-50%, -50%);
  will-change:transform, top, left, opacity, filter;
}
.eye img{
  position:relative;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  box-shadow:0 12px 34px rgba(0,0,0,.40), 0 0 30px rgba(255,196,120,.15);
}
.eye-ring{
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1px solid rgba(255,240,210,.36);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 0 28px rgba(255,205,125,.24);
}
.eye-you{opacity:1; z-index:4}
.eye-eli{opacity:0; z-index:4}

.meteor-flame{
  position:absolute;
  left:50%;
  bottom:44%;
  width:92%;
  height:188%;
  transform:translateX(-50%) scaleY(.78);
  transform-origin:center bottom;
  opacity:0;
  filter:blur(4px);
  background:
    radial-gradient(ellipse at 50% 88%, rgba(255,247,229,.96), rgba(255,232,160,.90) 14%, rgba(255,170,70,.76) 30%, rgba(255,114,38,.34) 56%, rgba(255,114,38,0) 78%),
    linear-gradient(180deg, rgba(255,205,138,0) 0%, rgba(255,173,90,.22) 18%, rgba(255,120,46,.58) 56%, rgba(255,95,38,0) 100%);
  mix-blend-mode:screen;
}
.meteor-sparks{
  position:absolute;
  inset:-10% -14% -20% -14%;
  opacity:0;
}
.spark{
  background:linear-gradient(180deg, rgba(255,240,211,.9), rgba(255,123,52,.28));
  filter:blur(.2px);
  animation:driftSpark var(--dur) linear infinite;
}

.fall-trail{
  left:50%;
  top:0;
  width:20vw;
  max-width:76px;
  height:0;
  transform:translateX(-50%);
  transform-origin:center top;
  opacity:0;
  background:
    linear-gradient(180deg, rgba(255,116,36,0) 0%, rgba(255,134,58,.12) 18%, rgba(255,167,88,.44) 58%, rgba(255,236,188,.78) 88%, rgba(255,255,255,.88) 100%);
  filter:blur(14px);
  border-radius:0 0 999px 999px;
  mix-blend-mode:screen;
}

.meeting-halo{
  left:50%;
  top:72.5svh;
  width:32vw;
  max-width:136px;
  aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%, -50%) scale(.72);
  opacity:0;
  background:
    radial-gradient(circle, rgba(255,247,235,.94) 0%, rgba(255,214,148,.58) 28%, rgba(255,164,123,.20) 52%, rgba(255,164,123,0) 74%);
  filter:blur(2px);
}
.meeting-halo.pulse{animation:impactPulse 1.5s ease-out forwards}

.impact-flash{
  left:50%;
  top:72.5svh;
  width:16vw;
  max-width:78px;
  aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%, -50%) scale(.4);
  opacity:0;
  background:radial-gradient(circle, rgba(255,255,255,.96) 0%, rgba(255,212,145,.76) 32%, rgba(255,212,145,0) 74%);
}
.impact-flash.active{animation:impactFlash 1.2s ease-out forwards}

.shockwave{
  left:50%;
  top:72.5svh;
  width:14vw;
  max-width:62px;
  aspect-ratio:1;
  transform:translate(-50%, -50%) scale(.3);
  border-radius:50%;
  border:1px solid rgba(255,240,200,.8);
  box-shadow:0 0 0 8px rgba(255,196,115,.08);
  opacity:0;
}
.shockwave.active{animation:shockwaveBlast 1.25s ease-out forwards}

.love-link{
  left:50%;
  top:61.8svh;
  width:0;
  height:14px;
  opacity:0;
  transform:translate(-50%, -50%);
  border-radius:999px;
  background:
    radial-gradient(circle at center, rgba(255,245,251,.92) 0%, rgba(255,212,155,.78) 34%, rgba(255,212,155,0) 74%),
    linear-gradient(90deg, rgba(255,212,155,0) 0%, rgba(255,233,247,.82) 50%, rgba(255,212,155,0) 100%);
  filter:blur(6px);
}

.heart-burst,
.ember-burst{
  left:50%;
  top:72.5svh;
  width:0;
  height:0;
  overflow:visible;
}
.heart-particle,
.ember-particle{
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  transform:translate(-50%, -50%) scale(.4) rotate(0deg);
  will-change:transform, opacity;
}
.heart-particle{
  color:#ffd4ea;
  text-shadow:0 0 14px rgba(255,201,223,.75), 0 0 26px rgba(255,174,99,.42);
}
.ember-particle{
  width:8px;
  height:8px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.95), rgba(255,187,110,.9) 36%, rgba(255,109,49,.24) 74%, rgba(255,109,49,0) 100%);
  box-shadow:0 0 16px rgba(255,145,78,.54);
}
.heart-burst.active .heart-particle{animation:heartBurst var(--dur) cubic-bezier(.15,.74,.18,1) var(--delay) forwards}
.ember-burst.active .ember-particle{animation:emberBurst var(--dur) cubic-bezier(.12,.72,.25,1) var(--delay) forwards}

.progress-chip{
  top:39svh;
  max-width:35vw;
  padding:10px 12px;
  border-radius:18px;
  background:rgba(9,13,22,.50);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.10);
  color:#f8f6ff;
  font-size:.72rem;
  line-height:1.25;
  text-align:center;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
  opacity:.92;
  transition:opacity .3s ease, transform .3s ease;
}
.progress-left{left:10px; transform:translateY(-50%) rotate(-7deg)}
.progress-right{right:10px; transform:translateY(-50%) rotate(7deg)}

.scene-caption{
  top:max(12px, env(safe-area-inset-top, 0px) + 6px);
  left:50%;
  transform:translateX(-50%);
  width:calc(100% - 28px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  text-align:center;
  color:#f7f4ff;
  text-shadow:0 10px 30px rgba(0,0,0,.52);
  transition:opacity .3s ease, transform .3s ease;
}
.scene-kicker{
  font-size:.69rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(247,244,255,.76);
}
.scene-caption strong{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1rem;
  font-weight:600;
  letter-spacing:.02em;
}

.phone-site{
  position:relative;
  z-index:1;
  width:min(100vw, 430px);
  margin:0 auto;
  padding:0 14px calc(36px + env(safe-area-inset-bottom, 0px));
}
.panel{
  min-height:136svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20svh 0 14svh;
}
.panel-interlude{min-height:104svh}
.panel-interlude-2{min-height:112svh}
.panel-interlude-3{min-height:120svh}
.panel-final{min-height:164svh; padding-bottom:26svh}

.card,
.floating-line{
  width:100%;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.11);
  background:linear-gradient(180deg, rgba(18,24,39,.56), rgba(10,14,25,.78));
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
}
.card{padding:22px 20px}
.hero-card{padding-top:28px; padding-bottom:28px}
.final-card{background:linear-gradient(180deg, rgba(22,28,44,.72), rgba(11,15,28,.86))}

.eyebrow{
  margin-bottom:12px;
  color:rgba(247,231,241,.84);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}

h1,h2,h3{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:600;
  line-height:1.05;
}
h1{font-size:2.35rem; margin-bottom:14px}
h2{font-size:1.72rem; margin-bottom:14px}
h3{font-size:1.8rem; margin-bottom:14px}

p{
  margin:0;
  color:var(--muted);
  line-height:1.62;
  font-size:1rem;
}
.card p + p{margin-top:14px}
strong{color:var(--rose)}

.soft-note{
  margin-top:16px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:#f6eef6;
  font-size:.95rem;
}
.floating-line{
  padding:18px 16px;
  text-align:center;
  color:#f8f5ff;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.2rem;
  line-height:1.4;
}

.chips{
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.chips span,
.route-pill{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:#f6eef6;
  font-size:.9rem;
}
.chips-danger span{background:rgba(255,125,125,.09); border-color:rgba(255,145,145,.16)}
.route-pill{margin-top:18px; display:inline-flex}

.moments{
  list-style:none;
  padding:0;
  margin:4px 0 0;
  display:grid;
  gap:14px;
}
.moments li{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:10px;
  align-items:start;
}
.moments span{font-size:1.2rem; line-height:1.4}
.moments div{color:var(--muted); line-height:1.6}

.signature{margin-top:18px; color:#fff3fb; font-size:1.06rem}

.note-btn,
.close-note{
  margin-top:22px;
  width:100%;
  border-radius:18px;
  padding:14px 16px;
  color:#1f0f18;
  background:linear-gradient(180deg, #ffe2f2, #ffb9dd);
  box-shadow:0 14px 28px rgba(255,152,200,.28);
  font-weight:600;
}

.note-modal{position:fixed; inset:0; z-index:5; pointer-events:none}
.note-backdrop{position:absolute; inset:0; background:rgba(3,4,8,.62); opacity:0; transition:opacity .3s ease}
.note-sheet{
  position:absolute;
  left:50%;
  top:50%;
  width:min(92vw, 390px);
  transform:translate(-50%, -46%);
  border-radius:28px;
  padding:22px 20px 20px;
  background:linear-gradient(180deg, #fffafc, #fff0f7);
  color:#352430;
  box-shadow:0 28px 80px rgba(0,0,0,.38);
  opacity:0;
  transition:opacity .3s ease, transform .3s ease;
}
.note-sheet p{color:#5a4651}
.note-sheet-top{width:60px; height:4px; margin:0 auto 16px; border-radius:999px; background:rgba(70,46,57,.14)}
.note-modal.open{pointer-events:auto}
.note-modal.open .note-backdrop{opacity:1}
.note-modal.open .note-sheet{opacity:1; transform:translate(-50%, -50%)}

.reveal{opacity:0; transform:translateY(24px); transition:opacity .75s ease, transform .75s ease}
.reveal.visible{opacity:1; transform:translateY(0)}

@keyframes twinkle{0%,100%{opacity:.22; transform:scale(.85)} 50%{opacity:.9; transform:scale(1.22)}}
@keyframes floatRock{0%,100%{transform:translate3d(0,0,0) rotate(0deg)} 50%{transform:translate3d(4px,-10px,0) rotate(12deg)}}
@keyframes shootComet{
  0%{transform:translate3d(-12vw,0,0); opacity:0}
  10%{opacity:.86}
  90%{opacity:.72}
  100%{transform:translate3d(116vw,28vh,0); opacity:0}
}
@keyframes driftSpark{
  0%{transform:translate3d(0,0,0) scale(1); opacity:0}
  14%{opacity:.9}
  100%{transform:translate3d(var(--sx), var(--sy), 0) scale(.2); opacity:0}
}
@keyframes impactFlash{
  0%{opacity:.96; transform:translate(-50%, -50%) scale(.3)}
  55%{opacity:.74; transform:translate(-50%, -50%) scale(2.8)}
  100%{opacity:0; transform:translate(-50%, -50%) scale(4.6)}
}
@keyframes impactPulse{
  0%{opacity:.74; transform:translate(-50%, -50%) scale(.72)}
  65%{opacity:.28; transform:translate(-50%, -50%) scale(2.35)}
  100%{opacity:0; transform:translate(-50%, -50%) scale(3.2)}
}
@keyframes shockwaveBlast{
  0%{opacity:.95; transform:translate(-50%, -50%) scale(.32)}
  100%{opacity:0; transform:translate(-50%, -50%) scale(7.2)}
}
@keyframes heartBurst{
  0%{opacity:0; transform:translate(-50%, -50%) scale(.35) rotate(0deg)}
  15%{opacity:1}
  100%{opacity:0; transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.22) rotate(var(--rot))}
}
@keyframes emberBurst{
  0%{opacity:0; transform:translate(-50%, -50%) scale(.3)}
  12%{opacity:1}
  100%{opacity:0; transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.72)}
}
@keyframes earthImpactGlow{
  0%{box-shadow:0 -42px 120px rgba(121,204,255,.18), inset 0 30px 66px rgba(255,255,255,.08)}
  32%{box-shadow:0 -48px 160px rgba(148,224,255,.38), inset 0 30px 78px rgba(255,255,255,.12)}
  100%{box-shadow:0 -42px 120px rgba(121,204,255,.18), inset 0 30px 66px rgba(255,255,255,.08)}
}
@keyframes cityImpactRise{
  0%{filter:drop-shadow(0 0 0 rgba(255,208,120,0));}
  28%{filter:drop-shadow(0 0 26px rgba(255,208,120,.28));}
  100%{filter:drop-shadow(0 0 0 rgba(255,208,120,0));}
}
@keyframes sceneImpactShake{
  0%,100%{transform:translate3d(0,0,0)}
  18%{transform:translate3d(-2px,1px,0)}
  34%{transform:translate3d(2px,-1px,0)}
  52%{transform:translate3d(-1px,2px,0)}
  70%{transform:translate3d(2px,1px,0)}
}
@keyframes beaconBlink{0%,100%{opacity:.28} 50%{opacity:1}}

@media (max-width:380px){
  h1{font-size:2.05rem}
  h2{font-size:1.54rem}
  .progress-chip{font-size:.68rem; max-width:36vw; padding:9px 10px}
  .card{padding:20px 17px}
  .city-label{font-size:.68rem}
}