:root { color-scheme:light; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#173b51; background:#edf4fa; }
* { box-sizing:border-box; }
body { margin:0; min-height:100svh; background:linear-gradient(180deg,rgba(4,34,61,.24),rgba(17,56,83,.08) 28%,rgba(238,245,251,.86) 70%,#edf4fa 100%),url(mountain.png) center top/cover fixed; }
main { max-width:1040px; margin:auto; padding:32px 40px 24px; }
header { display:flex; align-items:center; justify-content:space-between; gap:20px; color:white; }
.brand { font-size:38px; font-weight:750; letter-spacing:-2px; color:inherit; text-decoration:none; }
.secure { font-size:12px; letter-spacing:.2px; }
.intro { margin:54px 0 32px; color:#fff; text-shadow:0 2px 18px #173b5140; }
.eyebrow { font-size:11px; letter-spacing:2.6px; font-weight:650; }
h1 { font-size:clamp(42px,7vw,66px); line-height:1.02; letter-spacing:-2.3px; margin:22px 0; }
.intro > p:last-child { font-size:18px; }
.glass { width:100%; max-width:470px; padding:28px; border:1px solid #ffffffe0; border-radius:28px; background:linear-gradient(135deg,#ffffffd9,#eaf3f9c9); box-shadow:0 14px 55px #1f466315,inset 0 1px #fff; backdrop-filter:blur(18px); }
.envelope { display:grid; place-items:center; width:42px; height:42px; border:1px solid #ffffff; border-radius:50%; color:#2168b6; background:#ffffff77; font-size:25px; }
h2 { font-size:24px; line-height:1.17; letter-spacing:-.5px; margin:18px 0 12px; }
p { line-height:1.5; }
#description { color:#466174; font-size:15px; margin-bottom:24px; }
label { display:block; font-size:13px; font-weight:650; margin:18px 0 9px; }
input { font:inherit; font-size:17px; border:1px solid #7897aa40; border-radius:14px; width:100%; padding:14px; color:#173b51; background:#ffffffb3; }
button { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; border:1px solid #ffffff77; border-radius:28px; padding:16px 21px; font:inherit; font-size:15px; font-weight:650; color:white; background:#2269bc; cursor:pointer; box-shadow:0 7px 16px #2269bc20; }
button:disabled { opacity:.65; cursor:wait; } button:hover:not(:disabled) { background:#1c5ca7; }
input:focus-visible,button:focus-visible,a:focus-visible { outline:3px solid #4c9ef1; outline-offset:3px; }
#save { margin-top:24px; }
.hint { font-size:12px; color:#466174; line-height:1.5; }
#feedback { font-size:14px; color:#923e28; margin-bottom:0; } #feedback:empty { display:none; }
footer { max-width:470px; text-align:center; color:#496578; font-size:12px; margin-top:24px; }
[hidden] { display:none!important; }
@media(min-width:800px) { main { display:grid; grid-template-columns:1fr 1fr; column-gap:80px; } header { grid-column:1/-1; } .intro { margin-top:120px; } .glass { margin-top:70px; align-self:start; } footer { grid-column:2; } }
@media(max-width:480px) { main { padding:24px 22px; } .secure { max-width:110px; text-align:right; line-height:1.4; } .intro { margin:38px 0 26px; } .glass { padding:24px; } }
@media(prefers-reduced-transparency:reduce) { .glass { background:#eef4fa; backdrop-filter:none; } }

@media(max-width:799px) {
  body[data-step="password"] .intro { margin:20px 0; }
  body[data-step="password"] .intro p { display:none; }
  body[data-step="password"] h1 { font-size:32px; margin:0; letter-spacing:-1px; }
  body[data-step="password"] .envelope { display:none; }
  body[data-step="password"] h2 { margin-top:0; }
}