@font-face{font-family:SCUFF;src:url('/assets/fonts/SFPro-CondensedBlack.ttf') format('truetype');font-weight:900;font-display:swap}
:root{color-scheme:light;--paper:#f2f2f0;--ink:#050505;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:6px}
.signup-page{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;padding:40px 24px 28px;position:relative;isolation:isolate;overflow:hidden}
.auth-brand{font-family:SCUFF,'Arial Narrow',sans-serif;font-size:48px;font-weight:900;letter-spacing:-.045em;line-height:1;text-decoration:none;z-index:2}
.auth-card{width:min(100%,400px);align-self:center;margin:56px 0 34px;z-index:2;text-align:center}
h1{font-family:SCUFF,'Arial Narrow',sans-serif;font-size:clamp(80px,10vw,144px);font-weight:900;letter-spacing:-.045em;line-height:.88;margin:0;white-space:nowrap}.auth-card.is-code h1{font-size:clamp(64px,7.7vw,108px)}
.auth-subtitle{font-size:14px;line-height:1.5;color:#555;margin:22px 0 32px}.auth-form{display:grid;gap:12px;text-align:left}.auth-form label{font-size:13px;font-weight:600}.auth-form input{min-width:0;width:100%;height:58px;border:1px solid #aaa;background:rgba(255,255,255,.65);border-radius:0;padding:0 16px;font-size:16px;color:var(--ink)}.auth-form input:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.auth-form input[aria-invalid=true]{border-color:#b32518}
.auth-button{height:58px;background:var(--ink);color:white;border:1px solid var(--ink);cursor:pointer;font-weight:700;margin-top:4px;transition:transform 160ms var(--ease),background 160ms}.auth-button:hover{background:#292929}.auth-button:active{transform:scale(.985)}button:disabled{opacity:.55;cursor:wait}.auth-actions{display:flex;justify-content:space-between;gap:16px;margin-top:8px}.auth-link{padding:8px 0;border:0;background:none;text-decoration:underline;text-underline-offset:4px;font-size:12px;cursor:pointer}.auth-status{min-height:36px;margin:18px 0 0;font-size:13px;line-height:1.5;color:#555}.auth-status.is-error{color:#a52217}.is-hidden{display:none}.auth-form:not(.is-hidden){animation:form-in 240ms var(--ease)}@keyframes form-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.signup-stamp{font-family:SCUFF,'Arial Narrow',sans-serif;font-weight:900;font-size:clamp(38px,4vw,56px);line-height:1;letter-spacing:-.035em;z-index:2}.signup-stamp sup{font-family:Arial,sans-serif;font-size:12px;vertical-align:top;margin-left:3px}
.photo-frame{position:absolute;inset:0;z-index:-1;pointer-events:none}.photo{position:absolute;top:18%;height:65%;width:18%;overflow:hidden;background:#ddd}.photo img{width:100%;height:100%;object-fit:cover;display:block}.photo:after{content:'';position:absolute;inset:0;backdrop-filter:blur(9px);mask-image:linear-gradient(to right,transparent 45%,black)}.photo--1{left:-9%;top:11%;transform:rotate(-8deg)}.photo--2{left:4%;top:26%;transform:rotate(7deg)}.photo--3{right:4%;top:17%;transform:rotate(-7deg)}.photo--4{right:-9%;top:30%;transform:rotate(8deg)}.photo--3:after,.photo--4:after{mask-image:linear-gradient(to left,transparent 45%,black)}
.signup-intro{position:fixed;inset:0;z-index:10;background:var(--paper);pointer-events:none;overflow:hidden;animation:intro-out 260ms 900ms both}.intro-photo{position:absolute;top:0;width:25%;height:100%;object-fit:cover;animation:photo-in 650ms var(--ease) both,photo-out 500ms 640ms var(--ease) both}.intro-photo:nth-child(1){left:0;--exit:-110%;animation-delay:0ms,640ms}.intro-photo:nth-child(2){left:25%;--exit:-210%;animation-delay:65ms,640ms}.intro-photo:nth-child(3){left:50%;--exit:210%;animation-delay:130ms,640ms}.intro-photo:nth-child(4){left:75%;--exit:110%;animation-delay:195ms,640ms}.intro-mark{position:absolute;left:50%;top:50%;font:900 clamp(110px,28vw,400px)/1 SCUFF,'Arial Narrow',sans-serif;letter-spacing:-.045em;color:white;mix-blend-mode:difference;transform:translate(-50%,-50%);animation:mark-out 500ms 640ms var(--ease) both}
@keyframes photo-in{from{transform:translateY(110%)}to{transform:translateY(0)}}@keyframes photo-out{to{transform:translateX(var(--exit))}}@keyframes mark-out{to{top:40px;transform:translate(-50%,0) scale(var(--mark-scale,.15));transform-origin:top center}}@keyframes intro-out{to{opacity:0;visibility:hidden}}
@media(min-width:1500px){.photo{width:20%}}
@media(max-width:850px){.photo{width:15%}.photo--2{left:-5%}.photo--3{right:-5%}.photo--1{left:-17%}.photo--4{right:-17%}}
@media(max-width:600px){.signup-page{padding:28px 24px 24px;min-height:100svh}.auth-brand{font-size:38px}.auth-card{margin:100px 0 64px}h1{font-size:80px}.auth-subtitle{margin:20px 0 28px}.photo{width:43%;height:110px;top:0}.photo--1{left:-8%;top:-75px}.photo--2{left:-13%;top:72px;transform:rotate(-12deg)}.photo--3{right:-16%;top:auto;bottom:50px;transform:rotate(-12deg)}.photo--4{right:-5%;top:auto;bottom:-85px}.signup-stamp{font-size:38px}.photo:after{backdrop-filter:blur(5px)}@keyframes mark-out{to{top:28px;transform:translate(-50%,0) scale(var(--mark-scale,.15));transform-origin:top center}}}
@media(max-height:600px){.auth-card{margin:36px 0 20px}.photo-frame{opacity:.35}.signup-page{padding-top:24px}.auth-brand{font-size:32px}.signup-stamp{font-size:30px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.signup-intro{display:none}}
h1{text-transform:uppercase}
@media(min-width:601px) and (max-width:1000px){h1{font-size:112px}}
@media(max-width:360px){h1{font-size:72px}.auth-card.is-code h1{font-size:60px}}
@media(max-width:600px){.photo--3{right:-27%}.photo--4{right:-22%}.auth-subtitle{overflow-wrap:anywhere}}
@media(max-height:600px){.photo-frame{display:none}}
.account-avatar{width:96px;height:96px;object-fit:cover;border-radius:50%;margin:0 auto 24px;display:block;animation:avatar-in 460ms cubic-bezier(.16,1,.3,1) both}.account-avatar.is-hidden{display:none}.is-waiting{min-height:300px;display:flex;flex-direction:column;justify-content:center}.is-waiting h1{font-size:clamp(72px,9vw,124px)}@keyframes avatar-in{from{opacity:0;transform:translateY(22px) scale(.65)}to{opacity:1;transform:translateY(0) scale(1)}}
.preview-controls{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:16px;font:12px/1.5 Arial,sans-serif;background:#e5e5e3}.preview-controls span{width:100%;text-align:center;color:#555}
/* Animate each complete step, including its heading, before replacing content. */
.auth-form:not(.is-hidden){animation:none}
.auth-card.step-exit{animation:step-out 220ms cubic-bezier(.4,0,1,1) both;pointer-events:none}
.auth-card.step-enter{animation:step-in 440ms cubic-bezier(.16,1,.3,1) both;pointer-events:none}
.step-enter .auth-subtitle{animation:content-in 360ms 50ms both}
.step-enter .auth-form:not(.is-hidden){animation:content-in 360ms 100ms both}
@keyframes step-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(36px)}}
@keyframes step-in{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:translateY(0)}}
@keyframes content-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.auth-card.step-enter,.auth-card.step-exit,.step-enter .auth-subtitle,.step-enter .auth-form{animation:none}}

/* Keep photography in the entrance; the form rests on plain paper. */
.photo-frame{display:none}
body.signed-in{--paper:#080808;--ink:#f2f2f0;background:var(--paper);color:var(--ink)}
.signed-in .auth-subtitle,.signed-in .auth-status{color:#b5b5b1}.signed-in .auth-status.is-error{color:#ffaaa1}
.signed-in .auth-form input{background:#151515;border-color:#555;color:var(--ink);color-scheme:dark}
.signed-in .auth-button{background:var(--ink);color:var(--paper);border-color:var(--ink)}.signed-in .auth-link{color:var(--ink)}
.signed-in .preview-controls{background:#151515;color:var(--ink)}.signed-in .preview-controls span{color:#aaa}

.onboarding-card{width:min(100%,480px)}.onboarding-card h1{font-size:clamp(56px,6.5vw,88px);white-space:normal;line-height:.94;text-wrap:balance}.onboarding-card h1:focus{outline:none}
.onboarding-avatar{width:80px;height:80px;margin:0 auto 30px;border-radius:50%;background:#242424;position:relative;display:grid;place-items:center;font:900 34px SCUFF,sans-serif;transition:width 400ms var(--ease),height 400ms var(--ease),margin 400ms var(--ease)}.onboarding-avatar img{position:absolute;inset:0;display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;aspect-ratio:1;border-radius:50%;clip-path:circle(50%)}
.profile-fields{display:grid;gap:12px}.profile-fields fieldset{border:0;margin:0;padding:0;display:grid;gap:10px}.gender-choice{display:flex;align-items:center;gap:14px;min-height:56px;border:1px solid #555;padding:12px 16px;cursor:pointer}.gender-choice:has(input:checked){background:#f2f2f0;color:#080808;border-color:#f2f2f0}.auth-form .gender-choice input{width:18px;height:18px;accent-color:#080808;margin:0}.profile-form[hidden]{display:none}.profile-form .auth-link{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.is-finishing .onboarding-avatar{width:136px;height:136px;margin-bottom:40px}.is-finishing .onboarding-avatar:after{content:'';position:absolute;inset:-10px;border:2px solid #373734;border-top-color:#f2f2f0;border-right-color:#f2f2f0;border-radius:50%;animation:session-spin 900ms linear infinite}.is-finishing.is-ready .onboarding-avatar:after{border-color:#f2f2f0;animation:session-ready 260ms ease-out}.is-finishing h1:empty{display:none}
@keyframes session-spin{to{transform:rotate(360deg)}}@keyframes session-ready{50%{transform:scale(1.045)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.onboarding-avatar{transition:none}.is-finishing .onboarding-avatar:after{animation:none}}

/* Each surface interpolates to its authenticated palette in place. */
body,.signup-page,.auth-brand,.signup-stamp,h1,.auth-subtitle,.auth-status,.auth-form label,.auth-form input,.auth-link,.preview-controls,.preview-controls span,.preview-controls a{
  transition:background-color 580ms ease-in-out,color 580ms ease-in-out,border-color 580ms ease-in-out;
}
.auth-button{transition:background-color 580ms ease-in-out,color 580ms ease-in-out,border-color 580ms ease-in-out,transform 160ms var(--ease)}
@media(prefers-reduced-motion:reduce){body,.signup-page,.auth-brand,.signup-stamp,h1,.auth-subtitle,.auth-status,.auth-form label,.auth-form input,.auth-link,.auth-button,.preview-controls,.preview-controls span,.preview-controls a{transition:none}}

.auth-card.is-login h1{font-size:clamp(64px,8vw,112px);white-space:normal;text-wrap:balance;line-height:.95}

.auth-card.is-login{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px}
.auth-card.is-login h1{font:600 22px/1.4 Arial,Helvetica,sans-serif;text-transform:none;letter-spacing:-.02em;animation:content-in 360ms both}
.is-login .auth-subtitle,.is-login .auth-status:empty{display:none}
.login-avatar-shell{position:relative;width:136px;height:136px;display:grid;place-items:center;background:#242424;border-radius:50%;margin:0 auto 38px;font:900 48px SCUFF,sans-serif}
.login-avatar-shell .account-avatar{width:136px;height:136px;margin:0;animation:none}
.login-avatar-shell:after{content:'';position:absolute;inset:-10px;border:2px solid #383835;border-top-color:#f2f2f0;border-right-color:#f2f2f0;border-radius:50%;animation:session-spin 900ms linear infinite}
.login-avatar-shell.is-ready:after{border-color:#f2f2f0;animation:session-ready 260ms ease-out}
@media(prefers-reduced-motion:reduce){.login-avatar-shell:after,.auth-card.is-login h1{animation:none}}
.auth-handoff{position:fixed;inset:0;z-index:100;background:#080808;display:grid;place-items:center;pointer-events:none;animation:handoff-cover 220ms ease both}
.auth-handoff span{color:#f2f2f0;font:900 clamp(80px,14vw,180px)/1 SCUFF,'Arial Narrow',sans-serif;letter-spacing:-.045em;animation:handoff-mark 420ms cubic-bezier(.16,1,.3,1) both}
@keyframes handoff-cover{from{background:transparent}to{background:#080808}}
@keyframes handoff-mark{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}

.photo-picker{display:block;text-align:center;padding:16px;border:1px solid currentColor;cursor:pointer}.photo-help{margin:0;font-size:12px;line-height:1.5;overflow-wrap:anywhere}.profile-form input[type=file]{height:auto;padding:12px;font-size:13px}.profile-form button[hidden]{display:none}

/* Center wide signup headings independently of the form column. */
.auth-card:not(.onboarding-card):not(.is-login) > h1{width:max-content;max-width:calc(100vw - 48px);position:relative;left:50%;translate:-50% 0;white-space:normal;text-wrap:balance}