
*{margin:0;padding:0}
body{min-height:100svh;line-height:1.6;background:var(--void)}
a{color:var(--cyan);text-underline-offset:4px}
a:hover{color:var(--ink)}
.auth-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px clamp(20px,4.5vw,64px);border-bottom:1px solid var(--line-soft)}
.auth-header>a:last-child{font-size:13px;color:var(--muted);text-decoration:none;padding:8px 0}
.auth-header>a:last-child:hover{color:var(--ink)}
.auth-main{width:min(100% - 40px,460px);margin:64px auto 48px}
.auth-main.register{width:min(100% - 40px,520px);margin-top:40px}
.auth-kicker{font:10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin-bottom:14px;display:flex;align-items:center;gap:12px}
.auth-kicker:before{content:'';width:24px;height:1px;background:var(--coral)}
h1{font-size:clamp(30px,4vw,38px);font-weight:300;letter-spacing:-.025em;line-height:1.18;margin-bottom:14px}
.auth-intro{font-size:15px;line-height:1.65;color:var(--muted);max-width:44ch;margin-bottom:30px}
.auth-card{padding:28px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012))}
form{display:grid;gap:20px}
.form-group>label{display:block;font-size:13px;font-weight:500;color:var(--ink);margin-bottom:8px}
.form-input,.input-field{display:block;width:100%;min-height:48px;padding:12px 14px;background:var(--void-2);border:1px solid rgba(233,241,247,.15);border-radius:8px;color:var(--ink);font-size:16px;line-height:1.4}
.form-input:hover,.input-field:hover{border-color:rgba(233,241,247,.3)}
.form-input:focus,.input-field:focus{border-color:var(--cyan);outline:2px solid rgba(58,219,232,.15);outline-offset:2px}
.input-field.invalid,[aria-invalid=true]{border-color:var(--coral-2)}
.auth-primary,.btn-init{display:flex;justify-content:center;align-items:center;min-height:48px;width:100%;padding:12px 20px;border:1px solid transparent;border-radius:999px;background:linear-gradient(180deg,var(--cyan),var(--cyan-deep));color:var(--void);font-size:14px;font-weight:600;cursor:pointer;text-decoration:none}
.auth-primary:hover,.btn-init:hover{color:var(--void);box-shadow:0 4px 18px rgba(58,219,232,.14)}
.auth-primary:disabled,.btn-init:disabled{opacity:.5;cursor:wait;box-shadow:none}
.auth-error,.field-hint.error,#formError{font-size:13px;color:var(--coral-2);line-height:1.5}
.auth-error{display:none}.auth-error.visible{display:block}
.field-hint:empty{display:none}
.field-hint{font-size:12px;color:var(--muted);margin-top:6px}
.auth-switch{font-size:14px;color:var(--muted);text-align:center;margin-top:24px;padding-top:22px;border-top:1px solid var(--line-soft)}
.auth-switch a{font-weight:500;text-decoration:none;margin-left:4px}
.auth-footer{margin-top:24px;color:var(--muted);font-size:12px;text-align:center;line-height:1.7}
.auth-footer a{color:var(--muted);margin:0 8px}
.legal-consent{padding-top:4px}
.legal-check{display:flex;align-items:flex-start;gap:12px;font-size:12px;line-height:1.7;color:var(--muted);cursor:pointer}
.legal-check input{width:17px;height:17px;flex:0 0 17px;margin-top:3px;accent-color:var(--cyan)}
.legal-check a{color:var(--ink);text-decoration-color:rgba(233,241,247,.3)}
.legal-check a:hover{color:var(--cyan)}
.legal-detail{font-size:11px;line-height:1.65;color:var(--muted);margin:12px 0 0 29px}
.hidden{display:none!important}
#successPanel{font-size:14px;line-height:1.65}
#successPanel>p{margin-bottom:16px;color:var(--muted)}
#successPanel>p:first-child{color:var(--cyan);font-size:18px}
#successPanel a{display:block;text-align:center;padding:12px;margin-top:12px;border:1px solid var(--line);border-radius:8px;text-decoration:none}
#successPanel>a{background:var(--cyan);color:var(--void);font-weight:600;border-radius:999px}
@media(max-width:600px){.auth-header{padding:20px;gap:16px}.auth-header .brand-sub{display:none}.auth-header>a:last-child{font-size:12px}.auth-main,.auth-main.register{margin-top:36px}.auth-card{padding:24px 20px}.auth-intro{margin-bottom:24px}.legal-detail{margin-left:0}.auth-footer{padding:0 8px}}

/* Second review: maintain readable legal text and field states at narrow widths. */
[aria-invalid=true]:focus{border-color:var(--coral-2);outline-color:rgba(255,110,138,.18)}
.success-links{display:grid;gap:8px;margin-top:16px}
#successPanel .success-opt{font:10px var(--mono);letter-spacing:.08em;margin-top:24px}
@media(max-width:380px){.auth-header .brand-word{font-size:16px}.auth-header>a:last-child{font-size:11px}.auth-card{padding:22px 18px}.auth-switch{font-size:13px}}

/* Art direction: one continuous editorial surface, with the landing's own atmosphere. */
body{display:grid;grid-template-columns:minmax(320px,.95fr) minmax(520px,1.05fr);align-items:start}
.auth-header{position:absolute;inset:0 0 auto;z-index:3;padding:32px 44px;border:0}
.auth-header>a:last-child{font-size:12px;letter-spacing:.02em}
.auth-scene{position:sticky;top:0;min-height:100svh;align-self:start;overflow:hidden;isolation:isolate;border-right:1px solid var(--line-soft);grid-column:1;grid-row:1}
.auth-sky{position:absolute;inset:0;z-index:-1;overflow:hidden}
.auth-sky .hero-clouds{opacity:.52}
.auth-sky .hero-glow{opacity:.5}
.auth-sky .hero-rim{opacity:.45}
.auth-sky .hero-vignette{background:linear-gradient(180deg,rgba(5,10,15,.32),rgba(5,10,15,.06) 35%,rgba(5,10,15,.94) 100%)}
.auth-scene-copy{position:absolute;left:clamp(36px,5vw,80px);right:32px;top:39%;transform:translateY(-10%)}
.scene-eyebrow{font:10px var(--mono);letter-spacing:.2em;color:var(--cyan);margin-bottom:28px}
.scene-statement{font-size:clamp(44px,4.4vw,72px);line-height:1.09;letter-spacing:-.035em;font-weight:300;color:var(--ink)}
.scene-statement span{color:var(--coral)}
.scene-rule{display:block;width:40px;height:1px;background:var(--cyan);margin-top:36px}
.scene-footer{position:absolute;left:clamp(36px,5vw,80px);bottom:36px;font:10px var(--mono);letter-spacing:.04em;color:var(--muted)}
.scene-footer span{color:var(--coral);margin:0 10px}
.auth-main,.auth-main.register{grid-column:2;grid-row:1;width:min(100% - 112px,420px);margin:0 auto;padding:clamp(150px,22vh,240px) 0 48px}
.auth-main.register{width:min(100% - 112px,460px);padding-top:124px}
.auth-kicker{font-size:10px;color:var(--muted);margin-bottom:20px;letter-spacing:.15em}
.auth-kicker:before{width:18px;background:var(--cyan)}
h1{font-size:38px;letter-spacing:-.03em;font-weight:300;line-height:1.15;margin-bottom:14px}
.auth-intro{font-size:14px;line-height:1.7;margin-bottom:36px}
.auth-card{padding:0;border:0;border-radius:0;background:none}
form{gap:22px}
.form-group>label{font-size:12px;margin-bottom:9px;color:var(--muted)}
.form-input,.input-field{background:rgba(255,255,255,.018);border-color:rgba(233,241,247,.16);border-radius:5px;min-height:50px}
.auth-primary,.btn-init{margin-top:6px;border-radius:5px;min-height:50px;background:var(--cyan);font-size:13px;letter-spacing:.01em}
.auth-primary:hover,.btn-init:hover{background:var(--cyan);box-shadow:0 4px 20px rgba(58,219,232,.12)}
.auth-switch{font-size:13px;text-align:left;margin-top:28px;padding-top:24px}
.auth-footer{text-align:left;font-size:11px;margin-top:24px}
.auth-footer a:first-child{margin-left:0}
.legal-check{font-size:11px;line-height:1.7}
.legal-detail{font-size:10px;line-height:1.7;margin-top:14px}
.auth-main.register form{gap:18px}
@media(max-width:1000px){body{grid-template-columns:minmax(280px,.85fr) minmax(420px,1.15fr)}.auth-main,.auth-main.register{width:calc(100% - 64px)}.auth-header{padding:28px 32px}.scene-statement{font-size:46px}.auth-scene-copy{left:32px}.scene-eyebrow{font-size:8px}}
@media(max-width:760px){body{display:block}.auth-header{position:relative;padding:22px 24px;background:transparent}.auth-scene{position:absolute;inset:0 0 auto;height:260px;min-height:0;z-index:-1;border:0;opacity:.65}.auth-scene-copy,.scene-footer{display:none}.auth-sky .hero-vignette{background:linear-gradient(180deg,rgba(5,10,15,.3),var(--void))}.auth-main,.auth-main.register{width:calc(100% - 48px);max-width:460px;padding:40px 0 36px;margin:0 auto}.auth-header .brand-sub{display:none}.auth-header>a:last-child{font-size:11px}.auth-kicker{margin-bottom:16px}h1{font-size:34px}.auth-intro{margin-bottom:30px}.auth-card{padding:0}.auth-switch{text-align:center}.auth-footer{text-align:center}.legal-detail{font-size:11px}.legal-check{font-size:12px}}
