:root { color-scheme:dark; --purple:#a66cc3; --muted:#aaa2b1; }
* { box-sizing:border-box; }
body { margin:0; color:#f5f2f7; background:#090909; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
button,input { font:inherit; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; }
.registration { display:grid; grid-template-columns:51.5% 48.5%; min-height:100vh; }
.signup-side { display:flex; flex-direction:column; min-height:100vh; }
.signup-header { padding:26px 25px; display:flex; align-items:center; justify-content:space-between; gap:25px; }
.brand { display:flex; align-items:center; gap:8px; font-size:1.25rem; font-weight:650; letter-spacing:-.04em; }
.brand img { width:40px; height:40px; object-fit:contain; flex-shrink:0; }
.steps { display:flex; align-items:center; gap:10px; }
.steps span { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; font-size:.83rem; background:#171717; color:#736a7a; }
.steps span[aria-current="step"] { color:#fff; background:#37243f; box-shadow:0 0 0 1px #64406d; }
.steps span.complete { color:#d9a8e9; background:#23192a; }
.steps i { width:13px; height:1px; background:#272327; }
.form-wrap { width:min(550px,calc(100% - 80px)); margin:auto; padding:55px 0 70px; }
h1 { font-size:clamp(21px,1.6vw,28px); line-height:1.3; letter-spacing:-.035em; margin:0 0 10px; font-weight:600; }
.intro { color:var(--muted); font-size:.94rem; line-height:1.65; margin:0 0 24px; }
fieldset { border:0; padding:0; margin:0; }
.discovery { display:grid; gap:11px; }
.choice { display:flex; align-items:center; gap:12px; position:relative; min-height:54px; padding:13px 16px; border:1px solid #242225; border-radius:16px; background:#111; font-size:.88rem; cursor:pointer; transition:.15s; }
.choice:hover { border-color:#54395e; }
.choice:has(input:checked) { background:#291b30; border-color:#673a73; box-shadow:0 0 0 1px #46274e; }
.choice input { position:absolute; opacity:0; }
.choice:has(input:focus-visible) { outline:3px solid #bc85d3; outline-offset:3px; }
.choice-icon { width:20px; font-size:1.25rem; text-align:center; }
.selected-mark { margin-left:auto; color:#bb88d0; opacity:0; }
.choice:has(input:checked) .selected-mark { opacity:1; }
.actions { display:flex; gap:10px; margin-top:25px; }
.button { min-height:43px; padding:11px 22px; display:inline-flex; align-items:center; justify-content:center; gap:13px; border:1px solid #282429; border-radius:12px; background:#171717; color:#fff; font-size:.85rem; }
.primary { background:#321b3a; border-color:#633070; flex:1; }
.primary:hover { background:#43234c; }
.secondary { padding-inline:24px; }
.signin-note { margin:21px 0 0; text-align:center; color:#716777; font-size:.75rem; }
.signin-note a { color:#b592c7; }
.field { display:grid; gap:9px; margin:20px 0 0; color:#b6abbf; font-size:.8rem; }
.field input { min-height:49px; width:100%; padding:12px 14px; background:#121112; color:#fff; border:1px solid #29232b; border-radius:11px; outline:0; }
.field input:focus { border-color:#a167ba; box-shadow:0 0 0 3px #a167ba12; }
.field input::placeholder { color:#5b515f; }
.username-input,.password-input { display:flex; align-items:center; border:1px solid #29232b; border-radius:11px; background:#121112; overflow:hidden; }
.username-input span { padding-left:14px; color:#86718f; }
.username-input input,.password-input input { border:0; background:none; box-shadow:none; }
.password-input button { border:0; background:none; color:#9f87aa; padding:12px 16px; }
.privacy-note { color:#706476; font-size:.74rem; line-height:1.6; margin-top:20px; }
.availability { min-height:18px; margin:8px 0 0; color:#9778a3; font-size:.74rem; }
.availability.good { color:#94c9a8; }
.status { color:#c9a8d6; font-size:.8rem; line-height:1.5; min-height:0; margin:16px 0 0; }
.status:empty { display:none; }
.status.error { color:#f2a5a5; }
.moods { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:28px; }
.mood { position:relative; padding:10px 10px 14px; border:1px solid #29222d; border-radius:15px; background:#111; cursor:pointer; }
.mood:has(input:checked) { border-color:#a66cc3; background:#25172b; }
.mood input { position:absolute; opacity:0; }
.mood:has(input:focus-visible) { outline:3px solid #bc85d3; }
.mood strong,.mood small { display:block; margin:11px 2px 0; font-size:.8rem; }
.mood small { margin-top:5px; color:#8c7b96; font-size:.66rem; }
.mood-art { display:block; height:74px; border-radius:9px; }
.twilight { background:radial-gradient(ellipse at 20% 30%,#9b63ff,transparent),linear-gradient(140deg,#271131,#ff8954); }
.rose { background:radial-gradient(ellipse at 20% 30%,#ff658f,transparent),linear-gradient(140deg,#321529,#8d68ff); }
.moonlight { background:radial-gradient(ellipse at 20% 30%,#56b7d9,transparent),linear-gradient(140deg,#132132,#bb79ff); }
.review { margin-top:23px; padding:18px; border:1px solid #2c222f; border-radius:12px; display:grid; gap:8px; font-size:.82rem; }
.review>span:first-child { color:#817287; font-size:.7rem; }
.review strong { color:#d9b5e6; }
.review small { color:#897491; overflow-wrap:anywhere; }
.showcase { background:#111; min-width:0; display:flex; align-items:center; overflow:hidden; padding:70px 0 70px 65px; }
.showcase-content { width:100%; }
.showcase h2 { font-size:1.16rem; font-weight:600; margin:0 0 8px; letter-spacing:-.03em; }
.showcase p { color:#a79caf; font-size:.89rem; line-height:1.6; margin:0 0 24px; padding-right:25px; }
.browser-frame { border:1px solid #242126; border-radius:15px 0 0 15px; overflow:hidden; box-shadow:0 25px 70px #0005; }
.browser-bar { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:11px 15px; background:#191719; color:#a295a9; font-size:.6rem; }
.browser-bar>span:nth-child(2) { text-align:center; border-radius:6px; background:#242024; flex:1; padding:5px; }
.dots { display:flex; gap:5px; }
.dots i { width:8px;height:8px;border-radius:50%;background:#ff6159; }
.dots i:nth-child(2) { background:#ffbd2e; }.dots i:nth-child(3) { background:#28ca42; }
.browser-screen { height:470px; width:100%; overflow:hidden; position:relative; background:#080808; }
.browser-screen iframe { width:1100px; height:940px; transform:scale(.56); transform-origin:top left; border:0; pointer-events:none; }
.showcase .showcase-note { margin-top:22px; color:#5f5365; font-size:.75rem; }
.complete-mark { width:60px; height:60px; display:grid; place-items:center; border:1px solid #704282; background:#2b1833; color:#c793dc; border-radius:20px; font-size:1.6rem; margin-bottom:25px; }
[hidden] { display:none!important; }.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; }
:focus-visible { outline:3px solid #bc85d3; outline-offset:3px; }
@media(min-width:1600px) { .showcase{padding-left:100px}.browser-screen{height:580px}.browser-screen iframe{transform:scale(.7)}.form-wrap{width:min(570px,calc(100% - 100px))} }
@media(max-width:1050px) { .registration{grid-template-columns:58% 42%}.showcase{padding-left:28px}.showcase h2{font-size:1rem}.browser-screen{height:360px}.browser-screen iframe{transform:scale(.43)}.form-wrap{width:calc(100% - 55px)} }
@media(max-width:760px) { .registration{display:block}.showcase{display:none}.signup-header{padding:22px 18px}.brand{font-size:1.1rem}.steps{gap:7px}.steps span{width:27px;height:27px}.steps i{width:7px}.form-wrap{width:min(550px,calc(100% - 40px));padding:50px 0}.choice{font-size:.82rem}.signup-side{min-height:100svh}.intro{font-size:.89rem} }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; } }

/* A focused dark signup card with a quieter studio preview. */
:root { --purple:#bf9ce5; --muted:#a89bb4; }
body { background:#09080b; }
.registration { grid-template-columns:55% 45%; }
.brand { font-family:Georgia,'Times New Roman',serif; font-size:26px; letter-spacing:-.045em; }
.signup-header { padding:24px 30px; }
.steps span { width:27px; height:27px; font-size:11px; border:1px solid #30233a; background:#15101a; }
.steps span[aria-current="step"]{background:#422957;box-shadow:none;border-color:#a77ccb}.steps i{width:12px;background:#35263f}
.form-wrap { width:min(530px,calc(100% - 64px)); padding:32px; margin:55px auto auto; border:1px solid #30233a; border-radius:18px; background:#141016; box-shadow:0 20px 80px #0003; }
h1 { font-size:26px; line-height:1.3; letter-spacing:-.035em; font-weight:600; }
.intro { font-size:13px; line-height:1.8; margin-bottom:25px; }
.choice { border-radius:10px; background:#0c090f; border-color:#2d2235; font-size:12px; padding:14px; }
.choice:has(input:checked){background:#2c1c38;border-color:#aa7acf;box-shadow:none}
.choice-icon{font-size:18px}.button{border-radius:10px;min-height:44px;font-size:13px}
.primary { background:#bc98e3; color:#1b1027; border-color:#c9a8ee; font-weight:600; }.primary:hover{background:#cdaff0}
.field{font-size:12px}.field input{background:#0d0a10;border-color:#36273f;border-radius:9px;font-size:14px}
.username-input,.password-input{background:#0d0a10;border-color:#36273f;border-radius:9px}.username-input span{font-size:12px;color:#b39bc5}
.signin-note{font-size:12px;color:#ad96bf;margin-top:24px}.signin-note a{color:#dbc0f2}.privacy-note{font-size:11px;color:#9e85b0}.review{background:#0d0a10}
.showcase { padding:70px 0 70px 40px; border-left:1px solid #2e2236; background:radial-gradient(ellipse at 40% 40%,#4a2c5b30,transparent 70%),#0e0b11; }
.showcase h2{font-family:Georgia,'Times New Roman',serif;font-size:30px;max-width:440px;line-height:1.2;font-weight:400}.showcase p{font-size:13px;color:#ac94bd}
.browser-frame{border-color:#473055;border-radius:13px 0 0 13px}.browser-bar{background:#22192b}.showcase .showcase-note{font-size:11px;color:#8d749e}
@media(min-width:1600px){.form-wrap{width:550px}.showcase{padding-left:65px}}
@media(max-width:1100px){.registration{grid-template-columns:1fr}.showcase{display:none}.form-wrap{margin:45px auto 60px;width:min(530px,calc(100% - 40px))}.signup-side{min-height:100svh}}
@media(max-width:560px){.signup-header{padding:17px 18px;gap:15px}.brand{font-size:23px;gap:6px}.brand img{width:32px;height:32px}.steps{gap:5px}.steps span{width:22px;height:22px;font-size:10px}.steps i{width:5px}.form-wrap{width:calc(100% - 28px);margin:25px auto 40px;padding:24px 20px;border-radius:14px}h1{font-size:23px}.intro{font-size:12px}.choice{font-size:11px;padding:13px 11px;gap:9px}.field input{font-size:16px}.moods{gap:8px}.mood{padding:7px}.mood small{font-size:9px}.mood-art{height:62px}}