*{box-sizing:border-box}html{color-scheme:dark;background:#04171b}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f0f6f5}.preview-bar{max-width:480px;margin:auto;padding:10px 15px;background:#09262d;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;color:#b1cfca}.preview-bar span{display:block;margin-top:3px;color:#809e9e;font-size:9px}select{background:#10343b;color:#deeeea;border:1px solid #73959160;border-radius:7px;padding:8px;font:inherit}.phone{max-width:480px;margin:auto;min-height:100svh;background-color:#04242b;background-image:url('./background.png');background-size:100% auto;background-position:center top;background-repeat:no-repeat;padding-bottom:max(28px,env(safe-area-inset-bottom));box-shadow:0 0 100px #0008}.hero-space{aspect-ratio:941/586}.card{margin:0 6.5%;padding:23px 23px 17px;border:1px solid #87aeb16b;border-radius:23px;background:linear-gradient(120deg,#102c30ee,#042126ef);box-shadow:0 16px 45px #00141645;backdrop-filter:blur(10px)}h1{font-size:27px;line-height:1.2;margin:0 0 6px;font-weight:650;letter-spacing:-.8px}.intro{margin:0 0 20px;color:#ccdcdb;font-size:13px;line-height:1.5;font-weight:350}label{font-size:12px;color:#e5eeee;display:block;margin:14px 0 5px}.input{height:44px;border:1px solid #779da48c;border-radius:9px;background:#0621274d;display:flex;align-items:center;padding:0 13px;gap:13px}.input:focus-within{border-color:#b5ecd3;box-shadow:0 0 0 3px #b5ecd314}input{font:inherit;font-size:16px;background:none;border:0;color:#f1f5f4;outline:0;width:100%;min-width:0;padding:0}input::placeholder{color:#85969f;font-weight:350;font-size:14px}.prefix{font-size:15px;border-right:1px solid #79999d77;padding-right:13px}.primary{min-height:47px;width:100%;border:0;border-radius:99px;background:linear-gradient(110deg,#bae8d1,#ade8cd);color:#062625;font-size:15px;font-weight:650;margin-top:19px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:inset 0 1px #fff4}.primary span{font-size:23px;font-weight:400}.primary:active{transform:scale(.99)}button:focus-visible,select:focus-visible{outline:2px solid #c4f4d8;outline-offset:4px}.footnote{font-size:10px;color:#b0c2c6;text-align:center;line-height:1.6;margin:12px 0 0}.security{display:flex;justify-content:center;align-items:center;gap:7px;color:#c0d1d3;font-size:10px;margin:19px 0 0;text-shadow:0 1px 6px #000}.security svg{width:13px;height:17px}.status-orb{display:grid;place-items:center;width:55px;height:55px;margin:23px auto;border-radius:50%;border:1px solid #b1e3ca6b;color:#bae8d1;font-size:23px}#state{text-align:center}#state h3{font-size:24px;font-weight:500;margin:15px 0}#state-copy{font-size:13px;color:#bed3d2;line-height:1.7}.secondary{min-height:44px;border:0;background:none;color:#bed5d3;font:inherit;font-size:11px;margin-top:10px;cursor:pointer}[hidden]{display:none!important}@media(min-width:700px){.preview-bar{margin-top:20px;border-radius:12px 12px 0 0}.phone{border-radius:0 0 16px 16px;min-height:854px}}@media(max-width:350px){.card{padding:20px 17px}h1{font-size:25px}.intro{font-size:12px}.hero-space{aspect-ratio:941/600}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}


:root {
  --layout-height: 100svh;
  --keyboard-inset: 0px;
  --preview-height: 48px;
}
html {
  scroll-padding-top: 18px;
  scroll-padding-bottom: 24px;
}
.preview-bar {
  margin-top: 0;
  min-height: 48px;
  border-radius: 0;
}
.phone {
  width: 100%;
  min-height: calc(var(--layout-height) - var(--preview-height));
  height: auto;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  border-radius: 0;
}
.hero-space {
  aspect-ratio: auto;
  flex: none;
  height: clamp(150px,
    calc(var(--layout-height) - var(--preview-height) - 485px),
    299px);
  min-height: min(42vw, 202px);
}
.card { flex: none; }
.security {
  flex: none;
  margin: 15px 0 0;
  min-height: 18px;
}
.input { min-height: 44px; }
input {
  font-size: 16px !important;
  scroll-margin-top: 22px;
  scroll-margin-bottom: 24px;
}
body.keyboard-open .phone {
  padding-bottom: calc(var(--keyboard-inset) + 24px);
}
@media (min-width: 700px) {
  .phone, .preview-bar {
    max-width: min(480px,
      calc((var(--layout-height) - var(--preview-height)) * .64));
  }
}
@media (max-height: 760px) {
  .card { padding: 17px 20px 14px; }
  .card h1 { font-size: 25px; }
  .intro { font-size: 12px; margin-bottom: 10px; }
  .card label { margin: 10px 0 5px; }
  .primary { margin-top: 15px; min-height: 44px; }
  .footnote { margin-top: 10px; }
  .security { margin-top: 12px; }
}
@media (max-height: 650px) {
  .hero-space { height: 145px; }
  .card { padding: 14px 18px 12px; }
  .intro { margin-bottom: 7px; }
  .card label { margin-top: 8px; }
  .primary { margin-top: 12px; }
}

.preview-bar{display:none!important}