@font-face { font-family:"Wovrin"; src:url("assets/hero-sans-bold.ttf") format("truetype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Wovrin"; src:url("assets/hero-sans-regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
*,*::before,*::after { box-sizing:border-box; }
html { min-width:280px; background:#f7f6f6; }
body { margin:0; color:#151412; font-family:"Wovrin",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { opacity:.4; cursor:default; }
button,a { touch-action:manipulation; }
a:focus-visible,button:focus-visible { outline:2px solid #9c8769; outline-offset:5px; }
[hidden] { display:none !important; }
.skip-link { position:fixed; z-index:20; top:12px; left:12px; padding:14px 20px; transform:translateY(-160%); background:#fff; color:#111; }
.skip-link:focus { transform:none; }
.auth-layout { display:grid; grid-template-columns:.96fr 1.04fr; min-height:100svh; }
.auth-world { position:sticky; top:0; height:100svh; min-height:680px; overflow:hidden; isolation:isolate; padding:32px; color:#f7f6f6; background:#0b0b0b; }
.world-top { position:relative; z-index:4; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.auth-brand { padding:4px 0; font-size:25px; font-weight:700; letter-spacing:-.055em; }
.world-top>span { color:#8b8680; font-size:8px; letter-spacing:.055em; }
.world-copy { position:relative; z-index:1; margin:clamp(55px,10vh,110px) 0 0; }
.world-copy>p { margin:0 0 24px; color:#8b8680; font-size:9px; letter-spacing:.06em; }
.world-copy h1 { margin:0; font-size:clamp(76px,8.65vw,164px); line-height:.87; letter-spacing:-.065em; }
.world-copy h1>span { color:#b6a58a; }
.world-orbit { position:absolute; z-index:-1; top:36%; left:18%; width:115%; aspect-ratio:1; border:1px solid #2e2b26; border-radius:50%; transform:rotate(-22deg) scaleY(.72); }
.world-orbit::after { content:""; position:absolute; inset:10%; border:1px solid #211f1c; border-radius:50%; }
.world-band { position:absolute; z-index:2; width:105%; height:83%; left:12%; top:23%; object-fit:contain; filter:drop-shadow(0 30px 24px #0004); animation:band-drift 12s ease-in-out infinite alternate; pointer-events:none; }
.world-bottom { position:absolute; z-index:4; left:32px; right:32px; bottom:28px; display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:20px; border-top:1px solid #33302b; font-size:9px; letter-spacing:.025em; }
.world-bottom>span { display:flex; align-items:center; gap:9px; color:#aaa298; }
.world-swatch { display:inline-block; width:9px; height:9px; border-radius:50%; background:#c2af8b; }
.world-bottom a { display:inline-flex; align-items:center; gap:16px; min-height:32px; }
.world-bottom a>span { font-size:20px; transition:transform .3s ease; }
.auth-panel { display:flex; flex-direction:column; min-width:0; padding:26px clamp(28px,4.5vw,84px) 20px; scroll-margin-top:0; }
.auth-topline,.auth-footer { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.auth-topline>a,.auth-topline>button { display:inline-flex; align-items:center; gap:12px; min-height:44px; padding:0; border:0; background:transparent; font-size:11px; }
.auth-topline>a>span,.auth-topline>button>span { font-size:19px; transition:transform .3s; }
.auth-topline>span { color:#8b8379; font-size:8px; letter-spacing:.035em; }
.auth-content { width:100%; max-width:450px; margin:auto; padding:56px 0 50px; }
.setup-progress { display:flex; gap:0; margin:0 0 38px; padding:0; list-style:none; }
.setup-progress li { position:relative; flex:1; min-width:0; padding:0 0 13px; border-bottom:1px solid #d7d1c8; color:#9a9288; font-size:8px; letter-spacing:.025em; transition:color .3s,border-color .3s; }
.setup-progress li+li { padding-left:12px; }
.setup-progress li span { margin-right:5px; font-variant-numeric:tabular-nums; }
.setup-progress li[aria-current],.setup-progress li.is-complete { color:#151412; border-bottom-color:#151412; }
.auth-kicker { margin:0 0 18px; color:#8c8173; font-size:9px; letter-spacing:.07em; }
.auth-heading h2 { margin:0; font-size:clamp(48px,4.5vw,72px); line-height:.96; font-weight:700; letter-spacing:-.055em; outline:none; }
.auth-heading h2>span { display:block; overflow-wrap:anywhere; }
.auth-description { max-width:330px; margin:20px 0 33px; color:#81776b; font-size:13px; line-height:1.7; }
.field { min-width:0; margin-bottom:23px; }
.field label { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:5px 12px; margin-bottom:10px; font-size:9px; font-weight:700; letter-spacing:.04em; }
.field label>span { color:#9b9184; font-size:8px; font-weight:400; }
.field input { display:block; width:100%; min-width:0; min-height:54px; padding:15px 14px; border:1px solid transparent; border-bottom-color:#cfc7bc; border-radius:0; background:#efebe580; color:#151412; font-size:14px; line-height:1.4; outline:none; transition:background .25s,border-color .25s,box-shadow .25s; }
.field input::placeholder { color:#a39787; opacity:1; }
.field input:focus { background:#f1ede6; border-bottom-color:#151412; box-shadow:0 1px 0 #151412; }
.field input[aria-invalid="true"] { border-bottom-color:#a5412f; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field-error { margin:8px 0 0; color:#9a3c29; font-size:11px; line-height:1.5; }
.field-error:empty { display:none; }
.age-field { margin:38px 0 44px; }
.age-input { display:flex; align-items:center; gap:14px; border-bottom:1px solid #cfc7bc; }
.age-input input { width:100%; padding:8px 0 15px; border:0; background:transparent; font-size:64px; line-height:1; letter-spacing:-.04em; appearance:textfield; -moz-appearance:textfield; }
.age-input input::-webkit-inner-spin-button,.age-input input::-webkit-outer-spin-button { appearance:none; margin:0; }
.age-input>span { color:#938675; font-size:10px; letter-spacing:.06em; }
.age-input:focus-within { border-color:#151412; }
.auth-submit { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:56px; margin-top:12px; padding:14px 18px; border:1px solid #151412; border-radius:0; background:#151412; color:#f7f6f6; font-size:12px; font-weight:700; transition:background .3s,transform .2s; }
.auth-submit>span:last-child { font-size:23px; font-weight:400; transition:transform .35s cubic-bezier(.22,1,.36,1); }
.auth-submit:active { transform:scale(.987); }
.entry-note { margin:15px 0 0; color:#918576; font-size:10px; line-height:1.6; text-align:center; }
.auth-footnote { margin:32px 0 0; color:#9b9082; font-size:10px; line-height:1.7; }
.auth-footnote a { color:#6f6252; white-space:nowrap; border-bottom:1px solid #b8aa97; }
.auth-notice { margin:20px 0 0; padding:14px; border-left:2px solid #a78f6b; background:#ece5da; color:#6e5b43; font-size:12px; line-height:1.6; }
.auth-footer { margin-top:auto; min-height:25px; color:#9b9082; font-size:8px; }
.profile-card { margin-top:22px; padding:21px 0; border-top:1px solid #d8d0c5; }
.profile-card-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:13px; }
.profile-card-heading h3 { margin:0; color:#8c8173; font-size:9px; letter-spacing:.05em; font-weight:400; }
.profile-card-heading button { display:flex; align-items:center; gap:10px; min-height:44px; margin:-12px 0; padding:0 2px 0 10px; border:0; background:transparent; font-size:11px; }
.profile-name { margin:0 0 8px; font-size:21px; font-weight:700; overflow-wrap:anywhere; }
.profile-email,.profile-age,.profile-address p { margin:4px 0; color:#7a6f60; font-size:13px; line-height:1.65; overflow-wrap:anywhere; }
.profile-address p:first-child { color:#151412; }
.clear-details { min-height:44px; padding:0; margin-top:13px; border:0; background:transparent; color:#9b8e7d; font-size:10px; text-decoration:underline; text-underline-offset:4px; }
.clear-dialog { width:min(430px,calc(100% - 36px)); max-height:calc(100svh - 36px); padding:32px; border:1px solid #d2c8b9; background:#f7f6f6; color:#151412; }
.clear-dialog::backdrop { background:#0008; backdrop-filter:blur(5px); }
.clear-dialog h2 { margin:0; font-size:38px; letter-spacing:-.05em; }
.clear-dialog>p:not(.auth-kicker):not(.field-error) { color:#81776b; font-size:13px; line-height:1.7; }
.clear-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.clear-actions button { flex:1; min-height:48px; padding:12px; border:1px solid #bfb4a4; background:transparent; font-size:11px; }
.clear-actions button:last-child { border-color:#151412; background:#151412; color:#f7f6f6; }
@keyframes band-drift { from { transform:translate3d(0,-6px,0); } to { transform:translate3d(-6px,10px,0); } }
@media(hover:hover) and (pointer:fine) { .auth-submit:hover { background:#38322a; } .auth-submit:hover>span:last-child,.world-bottom a:hover>span { transform:translate(3px,-3px); } .auth-topline>a:hover>span,.auth-topline>button:hover>span { transform:translateX(-3px); } .profile-card-heading button:hover,.clear-details:hover { color:#151412; } }
@media(min-width:1600px) { .auth-content { max-width:480px; } .auth-world { padding:40px; } .world-bottom { left:40px; right:40px; bottom:32px; } }
@media(max-width:1100px) { .auth-world { padding:26px; } .world-top>span { max-width:80px; font-size:7px; text-align:right; line-height:1.5; } .world-copy h1 { font-size:9.4vw; } .world-copy>p { max-width:190px; line-height:1.6; font-size:8px; } .world-bottom { left:26px; right:26px; font-size:8px; } .world-bottom a { gap:8px; } .auth-topline>span { display:none; } }
@media(max-width:760px) {
 .auth-layout { grid-template-columns:1fr; }
 .auth-world { position:relative; height:290px; min-height:0; padding:22px 24px; }
 .auth-brand { font-size:23px; }
 .world-top>span { max-width:none; font-size:7px; }
 .world-copy { margin-top:28px; }
 .world-copy>p { display:none; }
 .world-copy h1 { font-size:65px; line-height:.89; }
 .world-band { top:6%; left:35%; width:76%; height:110%; }
 .world-orbit { top:-16%; left:43%; width:80%; }
 .world-bottom { display:none; }
 .auth-panel { padding:16px 24px 20px; }
 .auth-topline>span { display:block; font-size:7px; }
 .auth-content { max-width:480px; margin:0 auto; padding:30px 0 38px; }
 .setup-progress { margin-bottom:31px; }
 .auth-heading h2 { font-size:56px; }
 .auth-description { margin-top:17px; margin-bottom:29px; font-size:12px; }
 .field input { font-size:16px; }
 .auth-footer { font-size:7px; gap:12px; }
 .age-input input { font-size:64px; }
 .auth-footnote { margin-top:27px; }
}
@media(max-width:360px) { .auth-world { padding:20px; height:265px; } .world-copy h1 { font-size:57px; } .auth-panel { padding-inline:20px; } .auth-topline>span { display:none; } .auth-heading h2 { font-size:49px; } .field-row { grid-template-columns:1fr; gap:0; } .setup-progress li { font-size:7px; } .setup-progress li+li { padding-left:7px; } }
@media(max-height:740px) and (min-width:761px) { .world-copy { margin-top:45px; } .world-copy h1 { font-size:min(8.4vw,128px); } .world-band { top:22%; } .auth-content { padding-top:35px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } .world-band { transform:none; } }