:root { color-scheme: dark; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: #0c1320; color: #e2eaf5; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; }
.layout { min-height: 100dvh; display: grid; grid-template-columns: minmax(260px, 1fr) minmax(350px, 500px); gap: clamp(28px, 6vw, 110px); align-items: center; max-width: 1180px; padding: clamp(28px, 6vw, 80px); margin: 0 auto; }
.brand { font-size: 39px; font-weight: 780; letter-spacing: -2px; color: #66c1b7; }
.dot { color: #e2eaf5; }
h1 { max-width: 600px; font-size: clamp(36px, 4.4vw, 62px); letter-spacing: -.045em; line-height: 1.09; margin: 40px 0 20px; }
.intro > p { max-width: 470px; color: #a1b1ca; line-height: 1.7; font-size: 17px; }
.stage { margin-top: 48px; padding: 13px 18px; border: 1px solid #3a5065; border-radius: 12px; color: #a6b9cb; max-width: 390px; line-height: 1.5; font-size: 13px; }
.stage-mark { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #66c1b7; margin-right: 6px; }
.auth { border: 1px solid #29394e; background: #131e30; border-radius: 22px; padding: clamp(22px, 4vw, 40px); box-shadow: 0 25px 75px #0005; }
h2 { margin: 0; font-size: 26px; letter-spacing: -.02em; }
.subtitle, .disclaimer { color: #9cacc3; line-height: 1.5; font-size: 13px; }
.subtitle { margin: 10px 0 26px; }
label { display: block; margin: 17px 0 8px; color: #b5c2d5; font-size: 14px; }
input { display: block; width: 100%; border: 1px solid #34485e; border-radius: 12px; background: #1b2a41; color: #e2eaf5; font: inherit; padding: 14px 15px; outline-offset: 3px; }
input:focus { outline: 2px solid #66c1b7; border-color: transparent; }
button { display: block; width: 100%; border: 0; border-radius: 12px; padding: 13px 16px; margin-top: 12px; font: inherit; font-weight: 650; cursor: pointer; }
button:focus-visible { outline: 2px solid white; outline-offset: 3px; }
button:disabled { opacity: .55; cursor: progress; }
.primary { background: #66c1b7; color: #0c1320; margin-top: 26px; }
.secondary { background: #26364b; color: #e2eaf5; }
#result { color: #87d7ca; line-height: 1.55; min-height: 1em; font-size: 14px; }
.disclaimer { margin: 18px 0 0; }
[hidden] { display: none !important; }
@media (max-width: 800px) { .layout { grid-template-columns: 1fr; gap: 24px; padding: 25px 18px 40px; } .intro h1 { font-size: 32px; margin: 20px 0 10px; } .intro > p { font-size: 14px; } .stage { margin-top: 16px; } .auth { padding: 22px; } }