*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.cs{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.25rem;padding:2rem 1.5rem;text-align:center}
.cs__brand{margin:0;font-size:.9rem;font-weight:500;letter-spacing:.32em;text-indent:.32em}
.cs__title{margin:0;max-width:18ch;font-weight:300;font-size:clamp(2rem,6vw,4.25rem);line-height:1.1;letter-spacing:-.01em}
.cs__sub{margin:0;max-width:44ch;font-size:1rem;line-height:1.6;opacity:.7}
.cs__pw{margin-top:1rem;font-size:.875rem}
.cs__pw summary{cursor:pointer;opacity:.6;list-style:none}
.cs__pw summary::-webkit-details-marker{display:none}
.cs__pw summary:hover,.cs__pw summary:focus-visible{opacity:1}
.cs__form{display:flex;gap:.75rem;margin-top:1rem;justify-content:center;flex-wrap:wrap}
.cs__form input{background:transparent;border:0;border-bottom:1px solid var(--fg);color:var(--fg);padding:.5rem .25rem;font:inherit;min-width:12rem}
.cs__form button{background:transparent;border:1px solid var(--fg);color:var(--fg);padding:.5rem 1.25rem;font:inherit;cursor:pointer}
.cs__form button:hover{background:var(--fg);color:var(--bg)}
.cs__form input:focus-visible,.cs__form button:focus-visible,.cs__pw summary:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.cs__error{flex-basis:100%;margin:.5rem 0 0}
.cs__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  .cs{animation:cs-in 1.2s ease-out both}
  @keyframes cs-in{from{opacity:0}to{opacity:1}}
}