#app {
  min-height: 100%;
  background: #f7cf4b;
  color: #241b12;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

button {
  box-sizing: border-box;
}

button::after { border: 0; }

/* Every illustrated sticker gets the same paper-cut white edge. */
.sticker-art {
  filter:
    drop-shadow(calc(min(100vw, 440px) * -3 / 750) calc(min(100vw, 440px) * -3 / 750) 0 #fffdf4)
    drop-shadow(calc(min(100vw, 440px) * 3 / 750) calc(min(100vw, 440px) * -3 / 750) 0 #fffdf4)
    drop-shadow(calc(min(100vw, 440px) * -3 / 750) calc(min(100vw, 440px) * 3 / 750) 0 #fffdf4)
    drop-shadow(calc(min(100vw, 440px) * 3 / 750) calc(min(100vw, 440px) * 3 / 750) 0 #fffdf4)
    drop-shadow(calc(min(100vw, 440px) * 6 / 750) calc(min(100vw, 440px) * 8 / 750) 0 rgba(37, 28, 19, .14)) !important;
}

.safe-top { height: env(safe-area-inset-top); }

.primary-button {
  height: calc(min(100vw, 440px) * 104 / 750);
  border-radius: calc(min(100vw, 440px) * 52 / 750);
  display: flex;
  align-items: center;
  justify-content: center;
  border: calc(min(100vw, 440px) * 4 / 750) solid #2a2119;
  color: #fffaf0;
  font-size: calc(min(100vw, 440px) * 30 / 750);
  font-weight: 700;
  letter-spacing: calc(min(100vw, 440px) * 2 / 750);
  background: #2a2119;
  box-shadow: 0 calc(min(100vw, 440px) * 12 / 750) 0 #fff1c2;
}

.primary-button[disabled] { opacity: 0.55; }

.ghost-button {
  height: calc(min(100vw, 440px) * 88 / 750);
  border-radius: calc(min(100vw, 440px) * 44 / 750);
  border: calc(min(100vw, 440px) * 3 / 750) solid #2a2119;
  background: #fff8e7;
  color: #2a2119;
  font-size: calc(min(100vw, 440px) * 28 / 750);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Shared one-shot sheen for card surfaces. */
.quick-shine {
  position: relative;
  overflow: hidden;
}

.quick-shine::after {
  content: '';
  position: absolute;
  z-index: 30;
  top: -20%;
  bottom: -20%;
  left: -45%;
  width: 36%;
  border: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform: translate3d(-180%, 0, 0) skewX(-14deg);
  animation: quick-card-shine 680ms 100ms ease-out both;
}

@keyframes quick-card-shine {
  0% { opacity: 0; transform: translate3d(-180%, 0, 0) skewX(-14deg); }
  24% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(520%, 0, 0) skewX(-14deg); }
}

.entrance {
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
  overflow-x: hidden;
  padding: calc(min(100vw, 440px) * 34 / 750) calc(min(100vw, 440px) * 38 / 750) calc(calc(min(100vw, 440px) * 44 / 750) + env(safe-area-inset-bottom));
  background: #f7cf4b;
  color: #241b12;
}

.safe-top { height:calc(env(safe-area-inset-top) + calc(min(100vw, 440px) * 168 / 750)); }

.paper-grain { position:absolute;inset:0;opacity:.1;background-image:radial-gradient(#241b12 calc(min(100vw, 440px) * 1 / 750),transparent calc(min(100vw, 440px) * 1 / 750));background-size:calc(min(100vw, 440px) * 18 / 750) calc(min(100vw, 440px) * 18 / 750);pointer-events:none; }
.doodle { position:absolute;z-index:1;color:#241b12;font-family:serif;font-weight:900; }
.doodle-star { right:calc(min(100vw, 440px) * 48 / 750);top:calc(min(100vw, 440px) * 198 / 750);font-size:calc(min(100vw, 440px) * 56 / 750);transform:rotate(12deg); }
.doodle-heart { left:calc(min(100vw, 440px) * 26 / 750);top:calc(min(100vw, 440px) * 420 / 750);font-size:calc(min(100vw, 440px) * 58 / 750);transform:rotate(-16deg); }
.doodle-line { position:absolute;z-index:1;width:calc(min(100vw, 440px) * 80 / 750);height:calc(min(100vw, 440px) * 24 / 750);border-top:calc(min(100vw, 440px) * 5 / 750) solid #241b12;border-radius:50%; }
.line-one { right:calc(min(100vw, 440px) * 38 / 750);top:calc(min(100vw, 440px) * 320 / 750);transform:rotate(-32deg); }.line-two{left:calc(min(100vw, 440px) * 14 / 750);top:calc(min(100vw, 440px) * 570 / 750);transform:rotate(22deg);}
.ink-dot { position:absolute;width:calc(min(100vw, 440px) * 5 / 750);height:calc(min(100vw, 440px) * 5 / 750);border-radius:50%;background:#2a2119;opacity:.28; }

.brand { position:relative;z-index:3;display:flex;align-items:center;gap:calc(min(100vw, 440px) * 16 / 750); }
.brand-cat { width:calc(min(100vw, 440px) * 58 / 750);height:calc(min(100vw, 440px) * 58 / 750);border:calc(min(100vw, 440px) * 4 / 750) solid #2a2119;border-radius:50%;background:#fff6d9;display:flex;align-items:center;justify-content:center;font-size:calc(min(100vw, 440px) * 34 / 750);font-weight:900;transform:rotate(-8deg); }
.brand-name,.brand-sub { display:block; }.brand-name{font-size:calc(min(100vw, 440px) * 22 / 750);font-weight:900;letter-spacing:calc(min(100vw, 440px) * 3 / 750);}.brand-sub{margin-top:calc(min(100vw, 440px) * 3 / 750);font-size:calc(min(100vw, 440px) * 18 / 750);font-weight:650;opacity:.55;}

.intro { position:relative;z-index:3;margin-top:calc(min(100vw, 440px) * 46 / 750);display:flex;flex-direction:column; }
.eyebrow { align-self:flex-start;padding:calc(min(100vw, 440px) * 8 / 750) calc(min(100vw, 440px) * 16 / 750);border:calc(min(100vw, 440px) * 3 / 750) solid #2a2119;border-radius:calc(min(100vw, 440px) * 8 / 750);background:#fff7df;font-size:calc(min(100vw, 440px) * 18 / 750);font-weight:900;letter-spacing:calc(min(100vw, 440px) * 3 / 750);transform:rotate(-2deg);box-shadow:calc(min(100vw, 440px) * 5 / 750) calc(min(100vw, 440px) * 5 / 750) 0 #2a2119; }
.title { margin-top:calc(min(100vw, 440px) * 24 / 750);font-size:calc(min(100vw, 440px) * 64 / 750);line-height:1.08;font-weight:950;letter-spacing:calc(min(100vw, 440px) * -2 / 750); }
.subtitle { margin-top:calc(min(100vw, 440px) * 16 / 750);font-size:calc(min(100vw, 440px) * 24 / 750);font-weight:650;opacity:.62; }

.hero-stage { position:relative;z-index:2;height:calc(min(100vw, 440px) * 440 / 750);margin-top:calc(min(100vw, 440px) * 8 / 750);display:flex;align-items:center;justify-content:center; }
.hero-burst { position:absolute;width:calc(min(100vw, 440px) * 390 / 750);height:calc(min(100vw, 440px) * 300 / 750);border:calc(min(100vw, 440px) * 5 / 750) solid #2a2119;border-radius:50%;background:#62b7d8;box-shadow:calc(min(100vw, 440px) * 12 / 750) calc(min(100vw, 440px) * 12 / 750) 0 #2a2119;transform:rotate(-5deg); }
.hero-burst::before,.hero-burst::after{content:"";position:absolute;width:calc(min(100vw, 440px) * 40 / 750);height:calc(min(100vw, 440px) * 40 / 750);border:calc(min(100vw, 440px) * 4 / 750) solid #2a2119;background:#ef6b55;transform:rotate(24deg);}.hero-burst::before{left:calc(min(100vw, 440px) * -18 / 750);top:calc(min(100vw, 440px) * 54 / 750)}.hero-burst::after{right:calc(min(100vw, 440px) * -15 / 750);bottom:calc(min(100vw, 440px) * 38 / 750);background:#fff6dc;}
.hero-sticker { position:relative;z-index:2;width:calc(min(100vw, 440px) * 430 / 750);height:calc(min(100vw, 440px) * 430 / 750);filter:drop-shadow(calc(min(100vw, 440px) * 8 / 750) calc(min(100vw, 440px) * 12 / 750) 0 rgba(42,33,25,.18)); }
.mini-label { position:absolute;z-index:3;right:calc(min(100vw, 440px) * 22 / 750);bottom:calc(min(100vw, 440px) * 30 / 750);padding:calc(min(100vw, 440px) * 10 / 750) calc(min(100vw, 440px) * 16 / 750);border:calc(min(100vw, 440px) * 4 / 750) solid #2a2119;border-radius:calc(min(100vw, 440px) * 10 / 750);background:#ef6b55;color:#fff8e5;font-size:calc(min(100vw, 440px) * 18 / 750);font-weight:900;display:flex;gap:calc(min(100vw, 440px) * 12 / 750);transform:rotate(5deg); }

.login-card { position:relative;z-index:4;margin-top:calc(min(100vw, 440px) * -8 / 750);padding:calc(min(100vw, 440px) * 30 / 750);border:calc(min(100vw, 440px) * 4 / 750) solid #2a2119;border-radius:calc(min(100vw, 440px) * 28 / 750);background:#fff8e6;box-shadow:calc(min(100vw, 440px) * 10 / 750) calc(min(100vw, 440px) * 12 / 750) 0 #2a2119; }
.card-heading { display:flex;align-items:center;justify-content:space-between;margin-bottom:calc(min(100vw, 440px) * 18 / 750); }.field-label{font-size:calc(min(100vw, 440px) * 27 / 750);font-weight:900;}.card-mark{width:calc(min(100vw, 440px) * 44 / 750);height:calc(min(100vw, 440px) * 44 / 750);border-radius:50%;background:#2a2119;color:#f7cf4b;font-size:calc(min(100vw, 440px) * 18 / 750);font-weight:900;display:flex;align-items:center;justify-content:center;}
.password-field { height:calc(min(100vw, 440px) * 92 / 750);padding:0 calc(min(100vw, 440px) * 16 / 750) 0 calc(min(100vw, 440px) * 26 / 750);display:flex;align-items:center;border:calc(min(100vw, 440px) * 3 / 750) solid #2a2119;border-radius:calc(min(100vw, 440px) * 16 / 750);background:#fffdf6;transition:.15s; }
.password-field.is-focused { box-shadow:calc(min(100vw, 440px) * 6 / 750) calc(min(100vw, 440px) * 6 / 750) 0 #ef6b55;transform:translate(calc(min(100vw, 440px) * -3 / 750),calc(min(100vw, 440px) * -3 / 750)); }
.password-field input { flex:1;height:100%;color:#241b12;font-size:calc(min(100vw, 440px) * 27 / 750);font-weight:650; }.placeholder{color:rgba(36,27,18,.32);}.show-button{width:calc(min(100vw, 440px) * 92 / 750);height:100%;padding:0;margin:0;background:transparent;color:#9d551f;font-size:calc(min(100vw, 440px) * 22 / 750);font-weight:800;line-height:1.2;display:flex;align-items:center;justify-content:center;}
.hint { display:block;min-height:calc(min(100vw, 440px) * 32 / 750);margin:calc(min(100vw, 440px) * 14 / 750) calc(min(100vw, 440px) * 3 / 750) calc(min(100vw, 440px) * 22 / 750);color:rgba(36,27,18,.48);font-size:calc(min(100vw, 440px) * 20 / 750); }
.primary-button { box-shadow:0 calc(min(100vw, 440px) * 9 / 750) 0 #ef6b55; }.error{display:block;margin-top:calc(min(100vw, 440px) * 18 / 750);padding:calc(min(100vw, 440px) * 10 / 750);border:calc(min(100vw, 440px) * 2 / 750) dashed #bc3b2d;border-radius:calc(min(100vw, 440px) * 10 / 750);color:#a22e24;font-size:calc(min(100vw, 440px) * 22 / 750);font-weight:700;text-align:center;}
.privacy { position:relative;z-index:3;display:block;margin-top:calc(min(100vw, 440px) * 32 / 750);font-size:calc(min(100vw, 440px) * 18 / 750);font-weight:750;letter-spacing:calc(min(100vw, 440px) * 1 / 750);text-align:center;opacity:.45; }

/* Remove the browser-native inner frame from the password field. */
#latestPassword { border: 0; outline: 0; box-shadow: none; background: transparent; appearance: none; -webkit-appearance: none; }