:root {
  --ink: #151818;
  --paper: #f1f0e8;
  --muted: #7e827c;
  --line: #d2d4ca;
  --lime: #d5f655;
  --violet: #8174ff;
  --orange: #f18a55;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--ink); }
body { margin: 0; color: var(--ink); font-family: 'Manrope', sans-serif; background: var(--ink); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 0.98fr) minmax(500px, 1.02fr); }
.art-panel { position: relative; overflow: hidden; min-height: 100vh; padding: 34px 42px 39px; display: flex; flex-direction: column; justify-content: space-between; color: var(--paper); background: #282b29; }
.grain { position: absolute; inset: 0; opacity: .07; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.art-topline, .feature-meta { position: relative; z-index: 2; }
.art-topline { display: flex; align-items: center; justify-content: space-between; }
.wordmark { font-size: 17px; font-weight: 800; letter-spacing: -.05em; }
.wordmark-mark { display: inline-block; color: var(--lime); font-size: 22px; margin-right: 7px; line-height: 0; }
.edition, .eyebrow, .art-index, .feature-note, .form-footer { font-family: 'DM Mono', monospace; letter-spacing: .12em; font-size: 10px; }
.edition { color: #a9ada4; }
.artwork { position: absolute; width: min(78%, 520px); aspect-ratio: 1; left: 50%; top: 49%; transform: translate(-50%, -50%); border-radius: 47% 53% 42% 58% / 50% 39% 61% 50%; background: radial-gradient(circle at 59% 37%, #d5f655 0 4%, transparent 4.4%), radial-gradient(circle at 37% 61%, #f18a55 0 8%, transparent 8.5%), linear-gradient(136deg, #8174ff 0 29%, #f18a55 29% 53%, #202522 53% 100%); box-shadow: 18px 22px 0 rgba(0,0,0,.12), inset 20px 10px 0 rgba(255,255,255,.08); transform-style: preserve-3d; animation: float 9s ease-in-out infinite; }
.artwork::before, .artwork::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid rgba(241,240,232,.58); }
.artwork::before { width: 64%; aspect-ratio: 1; left: 16%; top: 18%; border-width: 1px 0 0 1px; transform: rotate(-28deg); }
.artwork::after { width: 30%; aspect-ratio: 1; right: 11%; bottom: 12%; border-color: rgba(213,246,85,.8); }
.orb { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.orb-one { width: 25%; height: 25%; left: 16%; top: 21%; background: var(--lime); filter: blur(2px); }
.orb-two { width: 38%; height: 38%; right: 9%; top: 32%; background: #d53d85; opacity: .65; filter: blur(6px); }
.orb-three { width: 21%; height: 21%; left: 46%; bottom: 8%; background: #fbd6be; opacity: .55; filter: blur(5px); }
.orbit { position: absolute; border: 1px solid rgba(241,240,232,.45); border-radius: 50%; }
.orbit-one { inset: 9% -4%; transform: rotate(31deg); }
.orbit-two { inset: -4% 12%; transform: rotate(-38deg); }
.album-type { position: absolute; left: 8%; bottom: 8%; color: var(--paper); font-family: 'DM Mono', monospace; font-size: 12px; line-height: 1.02; letter-spacing: .28em; opacity: .9; }
.art-index { position: absolute; right: 9%; top: 10%; color: var(--paper); line-height: 1.5; }
.art-index span { color: var(--lime); }
.feature-meta { display: grid; grid-template-columns: 1fr auto 130px; gap: 24px; align-items: end; }
.eyebrow { margin: 0 0 14px; color: var(--muted); font-weight: 500; }
.art-panel .eyebrow { color: var(--lime); }
.feature-meta h2 { margin: 0; font-family: 'Playfair Display', serif; font-size: clamp(27px, 3vw, 42px); font-weight: 600; line-height: .98; letter-spacing: -.04em; }
.feature-meta h2 em, h1 em { font-weight: 600; }
.feature-rule { width: 1px; height: 50px; background: rgba(241,240,232,.4); }
.feature-note { margin: 0 0 1px; color: #b7bab0; line-height: 1.7; letter-spacing: .08em; }
.form-panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: 36px clamp(42px, 8vw, 125px) 29px; background: var(--paper); }
.mobile-brand { display: none; }
.form-content { width: min(100%, 390px); margin: auto; }
.form-heading { margin-bottom: 42px; }
.form-heading .eyebrow { color: #8f938b; }
h1 { margin: 0 0 21px; font-size: clamp(39px, 4.3vw, 65px); letter-spacing: -.075em; line-height: .96; font-weight: 500; }
h1 em { font-family: 'Playfair Display', serif; letter-spacing: -.05em; }
.subcopy { margin: 0; color: #747a72; font-size: 13px; line-height: 1.65; }
.field-group { margin-bottom: 25px; }
label { display: block; margin-bottom: 9px; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
input { width: 100%; padding: 12px 0; color: var(--ink); border: 0; border-bottom: 1px solid #aeb3a9; border-radius: 0; outline: 0; background: transparent; font-size: 14px; transition: border-color .2s; }
input::placeholder { color: #a2a79f; }
input:focus { border-color: var(--ink); }
.label-row { display: flex; align-items: baseline; justify-content: space-between; }
.quiet-link { color: #777c74; font-size: 10px; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 48px; }
.toggle-password { position: absolute; right: 0; bottom: 12px; padding: 0; color: #777c74; border: 0; background: transparent; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .08em; }
.form-message { min-height: 18px; margin: -3px 0 9px; color: #b0573b; font-size: 11px; }
.primary-button { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; color: var(--ink); border: 1px solid var(--lime); background: var(--lime); font-size: 12px; font-weight: 800; transition: transform .2s, background .2s; }
.primary-button:hover { transform: translateY(-2px); background: #e1ff72; }
.primary-button span { font-size: 19px; font-weight: 400; }
.divider { display: flex; align-items: center; gap: 13px; margin: 27px 0 18px; color: #a0a49c; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .08em; white-space: nowrap; }
.divider::before, .divider::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.social-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.social-button { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 12px; color: var(--ink); border: 1px solid var(--line); background: transparent; font-size: 11px; font-weight: 700; transition: background .2s, border-color .2s; }
.social-button:hover { border-color: #999e94; background: #e7e7dd; }
.social-icon { font-size: 15px; font-weight: 800; }.social-icon.apple { font-size: 12px; }
.signup-line { margin: 30px 0 0; text-align: center; color: #858a82; font-size: 11px; }.signup-line a { color: var(--ink); font-weight: 800; }.signup-line a span { margin-left: 3px; font-size: 15px; }
.form-footer { display: flex; justify-content: space-between; color: #969b91; font-size: 8px; letter-spacing: .1em; }.form-footer span:last-child { display: flex; gap: 17px; }.form-footer a:hover, .quiet-link:hover { color: var(--ink); }
@keyframes float { 0%, 100% { transform: translate(-50%, -50%) rotate(-3deg); } 50% { transform: translate(-50%, -53%) rotate(3deg); } }
@media (max-width: 850px) { .auth-shell { grid-template-columns: 1fr; }.art-panel { min-height: 50vh; height: 50vh; padding: 24px; }.artwork { width: min(65vw, 300px); top: 53%; }.feature-meta { grid-template-columns: 1fr auto; }.feature-note { display: none; }.form-panel { min-height: 50vh; padding: 48px 28px 25px; }.form-content { margin: 0 auto; }.mobile-brand { display: block; position: absolute; top: 23px; left: 28px; font-size: 15px; font-weight: 800; letter-spacing: -.05em; }.form-footer { margin-top: 46px; } }
@media (max-width: 480px) { .edition { font-size: 8px; }.feature-meta h2 { font-size: 27px; }.art-panel { min-height: 43vh; height: 43vh; }.artwork { width: 61vw; }.form-panel { min-height: 57vh; padding-top: 42px; }h1 { font-size: 43px; }.form-heading { margin-bottom: 32px; }.form-footer { font-size: 7px; } }