:root {
  color-scheme: dark;
  --phone-scale: 1;
  --phone-width: 418px;
  --phone-height: 872px;
  background: #030403;
}

@font-face { font-family: "Seven Manrope"; src: url("assets/assets/fonts/Manrope.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Seven Allura"; src: url("assets/assets/fonts/Allura.ttf") format("truetype"); font-display: swap; }

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #030403; color: #f7f8ee; }

.preview-stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 46%, #10140b 0, #070906 35%, #030403 68%);
}

.studio-lights {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.light-pool {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(65vw, 700px);
  height: min(82vh, 790px);
  border-radius: 50%;
  filter: blur(70px);
  animation: light-breathe 9s ease-in-out infinite alternate;
}

.light-pool-gold {
  background: radial-gradient(ellipse, #dca62935 0, #b17a1514 43%, transparent 70%);
  transform: translate(-70%, -66%) rotate(-24deg);
}

.light-pool-green {
  background: radial-gradient(ellipse, #9bc64421 0, #27653416 40%, transparent 70%);
  transform: translate(-20%, -24%) rotate(20deg);
  animation-delay: -4s;
}

.neon-loop {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(390px * var(--phone-scale));
  height: calc(700px * var(--phone-scale));
  border: 1px solid;
  border-radius: 45%;
}

.neon-loop-gold {
  transform: translate(-54%, -50%) rotate(-31deg);
  border-color: #f6cf678c;
  box-shadow:
    0 0 5px #ffe5a966,
    0 0 18px #f0b93755,
    0 0 46px #d18b242b,
    inset 0 0 18px #e7ad3326;
  background: linear-gradient(130deg, #e8b54b05, transparent 55%);
  animation: gold-neon 8s ease-in-out infinite alternate;
}

.neon-loop-green {
  width: calc(430px * var(--phone-scale));
  height: calc(680px * var(--phone-scale));
  transform: translate(-46%, -48%) rotate(29deg);
  border-color: #beec7438;
  box-shadow: 0 0 10px #b7ed6b22, 0 0 38px #7bb7471c;
  opacity: .7;
}

.floor-light {
  position: absolute;
  top: calc(50% + 434px * var(--phone-scale));
  left: 50%;
  width: calc(440px * var(--phone-scale));
  height: calc(44px * var(--phone-scale));
  transform: translate(-50%, 0);
  border-radius: 50%;
  background: radial-gradient(ellipse, #d3ad4a2b, #91b7350d 50%, transparent 72%);
  filter: blur(15px);
}

.phone-slot {
  position: relative;
  width: calc(var(--phone-width) * var(--phone-scale));
  height: calc(var(--phone-height) * var(--phone-scale));
}

.iphone {
  position: relative;
  width: var(--phone-width);
  height: var(--phone-height);
  padding: 9px;
  border: 1px solid #f4d79a;
  border-radius: 61px;
  transform: scale(var(--phone-scale));
  transform-origin: top left;
  background: linear-gradient(115deg,
    #65471d 0%, #ead194 5%, #fff0c0 9%, #af8143 13%,
    #d7b373 30%, #f8df9c 48%, #9b6b32 69%, #e8c68b 89%, #6d4923 100%);
  box-shadow:
    inset 0 0 0 1px #fff4d492,
    inset 0 0 0 4px #68471936,
    0 0 0 1px #684c28,
    0 0 0 2px #c9a66b55,
    0 3px 6px #000b,
    0 28px 75px #000d,
    -10px -6px 52px #e9b94f12,
    10px 15px 48px #a3ce3d0c;
}

.iphone::before {
  position: absolute;
  content: "";
  inset: 3px;
  border: 1px solid #fce6b080;
  border-radius: 57px;
  pointer-events: none;
}

.phone-bezel {
  position: relative;
  width: 398px;
  height: 852px;
  padding: 4px;
  border-radius: 51px;
  background: #020403;
  box-shadow: 0 0 0 1px #513b1a, inset 0 0 0 1px #000;
}

.phone-display {
  position: relative;
  width: 390px;
  height: 844px;
  overflow: hidden;
  border-radius: 47px;
  background: #09120e;
  box-shadow: 0 0 0 1px #293428;
  /* Retains rounded clipping for the composited Flutter canvas in Safari. */
  isolation: isolate;
  clip-path: inset(0 round 47px);
}

#app-screen { position: relative; width: 390px; height: 844px; overflow: hidden; }

.dynamic-island {
  position: absolute;
  z-index: 5;
  top: 11px;
  left: 50%;
  width: 112px;
  height: 29px;
  transform: translateX(-50%);
  border: 1px solid #151916;
  border-radius: 20px;
  background: #010202;
  box-shadow: 0 1px 2px #000c, inset 0 1px 1px #ffffff05;
  pointer-events: none;
}

.island-speaker {
  position: absolute;
  top: 12px;
  left: 25px;
  width: 36px;
  height: 3px;
  border-radius: 4px;
  background: #0b0e0d;
}

.camera-lens {
  position: absolute;
  top: 8px;
  right: 11px;
  width: 11px;
  height: 11px;
  border: 1px solid #182028;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 33%, #2b455d 0, #0c1929 23%, #05090f 48%, #020303 70%);
  box-shadow: inset 0 0 2px #000, 0 0 0 2px #080b0b;
}

.earpiece {
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 50%;
  width: 45px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: #5d4425;
  box-shadow: 0 1px 0 #ffe8ad77;
}

.side-button {
  position: absolute;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(90deg, #8d652e, #f2d497 48%, #b68e50);
  box-shadow: inset 0 1px 1px #fff0be80, 0 1px 2px #0008;
}

.action-button { left: -5px; top: 121px; height: 28px; }
.volume-up { left: -5px; top: 174px; height: 53px; }
.volume-down { left: -5px; top: 243px; height: 53px; }
.power-button { right: -5px; top: 191px; height: 83px; }
.antenna { position: absolute; z-index: 2; top: 86px; width: 8px; height: 3px; background: #7b633d; opacity: .7; }
.antenna-left { left: 0; }
.antenna-right { right: 0; top: auto; bottom: 88px; }

@keyframes light-breathe { from { opacity: .7; } to { opacity: 1; } }
@keyframes gold-neon { from { opacity: .65; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .light-pool, .neon-loop { animation: none; }
}

/* This shell appears before the Flutter engine paints its first frame. */
#startup-splash {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff7e2;
  background: radial-gradient(ellipse at 50% 45%, #182619 0, #09110c 43%, #050907 82%);
  pointer-events: none;
}
.startup-brand { text-align: center; animation: startup-arrive 900ms cubic-bezier(.16, 1, .3, 1) both; }
.startup-seven {
  font: 800 192px/1 "Seven Manrope", sans-serif;
  color: #c9ff4b;
  letter-spacing: -12px;
  text-shadow: 0 0 42px #b8ff4326, 0 12px 45px #0008;
  animation: startup-glow 2.8s ease-in-out infinite alternate;
}
.startup-wordmark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 6px;
  padding-bottom: 12px;
  font: 52px/1 "Seven Allura", cursive;
  transform: rotate(-2deg);
}
.startup-flourish { position: absolute; left: 0; bottom: 0; width: 180px; opacity: .3; }
.startup-heart { width: 34px; height: 32px; animation: startup-heartbeat 1.8s ease-in-out infinite; }
.startup-edition { color: #ffe9b7b0; font-size: 35px; transform: translateY(-7px) rotate(-6deg); }
.startup-loading { max-width: calc(100% - 48px); margin-top: 48px; font: 10px/1.5 system-ui, sans-serif; letter-spacing: 1.4px; text-align: center; color: #cbd4bf80; }
@keyframes startup-arrive { from { opacity: 0; transform: translateY(18px) scale(.93); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes startup-glow { from { text-shadow: 0 0 22px #b8ff431a, 0 12px 45px #0008; } to { text-shadow: 0 0 52px #b8ff4347, 0 12px 45px #0008; } }
@keyframes startup-heartbeat { 0%, 45%, 100% { transform: rotate(5deg) scale(1); } 15%, 28% { transform: rotate(5deg) scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .startup-brand, .startup-seven, .startup-heart { animation: none; }
}

/* Installed web apps use the real display; browser visits keep the preview. */
html[data-presentation="standalone"] .preview-stage { display: block; padding: 0; gap: 0; overflow: hidden; }
html[data-presentation="standalone"] .phone-slot,
html[data-presentation="standalone"] .iphone,
html[data-presentation="standalone"] .phone-bezel,
html[data-presentation="standalone"] .phone-display,
html[data-presentation="standalone"] #app-screen {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  clip-path: none;
}
html[data-presentation="standalone"] .phone-slot { width: 100vw; height: 100svh; }
html[data-presentation="standalone"] #app-screen {
  position: absolute;
  inset: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  width: auto;
  height: auto;
}
html[data-presentation="standalone"] .iphone::before,
html[data-presentation="standalone"] .studio-lights,
html[data-presentation="standalone"] .side-button,
html[data-presentation="standalone"] .antenna,
html[data-presentation="standalone"] .earpiece,
html[data-presentation="standalone"] .dynamic-island,
html[data-presentation="standalone"] .mobile-downloads { display: none; }