/* Page composition; all control styling lives in design-system.css. */
header{max-width:1080px;margin:auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px}
main{max-width:580px;margin:16px auto 48px;padding:0 28px}
.auth-mascot{margin:0 0 12px -12px;width:104px;height:104px}
.eyebrow{color:var(--text-secondary);font-size:13px;font-weight:600;margin:0 0 12px}
h1{font-size:clamp(28px,3vw,34px);margin:0 0 20px}
h2{font-size:16px;margin:0 0 12px}
.lead{color:var(--text-secondary);line-height:1.7;margin:0 0 24px}
input:not([type=checkbox]){margin-bottom:14px}
.primary{width:auto;justify-content:center}
.note{font-size:12px;color:var(--text-secondary);margin:12px 0 0}
.form-section{border-top:1px solid var(--separator);margin-top:20px;padding-top:18px}
#status{margin-top:24px}
.save-row{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:16px;margin-top:24px;padding:14px 0;background:linear-gradient(transparent,var(--background) 30%)}
.save-state{margin:0;font-size:12px;color:var(--text-secondary)}
#workspace{max-width:720px;margin-inline:auto}
main:has(#workspace:not([hidden])){max-width:780px}
footer{border-top:1px solid var(--separator);padding:24px;text-align:center;color:var(--text-secondary);font-size:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
#google{margin-top:28px}#auth-form{margin-top:26px}
.connection-code{font:600 24px ui-monospace,monospace;letter-spacing:3px}
@media(max-width:480px){header{padding:16px 22px}main{margin-top:12px;padding-inline:22px}}

@media(max-width:600px),(pointer:coarse){.primary{width:100%}.save-row{flex-direction:column;align-items:stretch;gap:8px}.save-state{text-align:center}}