/* ── Portal Layout ── */ .portal-wrapper { display: flex; min-height: 100vh; } /* ── Left Zone: World Branding ── */ .portal-left { flex: 0 0 60%; position: relative; display: flex; flex-direction: column; justify-content: center; padding: var(--space-8); background-image: linear-gradient(to right, rgba(10,12,26,0.95) 40%, rgba(10,12,26,0.3) 100%), url('/img/characters/alicia_600.jpg'); background-size: cover; background-position: center right; } .portal-content { max-width: 520px; } .portal-tagline { font-family: var(--font-body); font-size: var(--text-h2); font-style: italic; color: var(--color-text-secondary); line-height: 1.5; margin-top: var(--space-5); } .portal-world-lines { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); } .portal-world-lines p { font-family: var(--font-body); font-size: var(--text-body-sm); font-style: italic; color: var(--color-text-muted); line-height: 1.6; } .portal-spiral { position: absolute; bottom: var(--space-7); left: var(--space-8); width: 48px; height: 48px; opacity: 0.25; } /* ── Right Zone: Login Panel ── */ .portal-right { flex: 0 0 40%; display: flex; align-items: center; justify-content: center; padding: var(--space-6); } .login-panel { width: 100%; max-width: 400px; padding: var(--space-7) var(--space-6); } .login-panel h2 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 600; letter-spacing: 0.03em; color: var(--color-text-primary); margin-bottom: var(--space-6); } .form-group { margin-bottom: var(--space-4); } .form-group label { display: block; font-family: var(--font-display); font-size: var(--text-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: var(--space-2); } .login-btn { width: 100%; margin-top: var(--space-5); padding: var(--space-4) var(--space-5); } #login-error { color: var(--color-prime-red); font-size: var(--text-caption); text-align: center; min-height: 1.4rem; margin-top: var(--space-3); } .login-divider { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-6) 0; color: var(--color-text-muted); font-size: var(--text-caption); font-style: italic; } .login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); } .session-join { display: flex; gap: var(--space-3); } .session-join .input { flex: 1; } .dm-link { display: block; text-align: center; margin-top: var(--space-7); font-family: var(--font-display); font-size: var(--text-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); text-decoration: none; transition: color var(--transition-fast); } .dm-link:hover { color: var(--color-accent-gold); } /* ── Mobile Responsive ── */ @media (max-width: 768px) { .portal-wrapper { flex-direction: column; } .portal-left { flex: none; min-height: 40vh; padding: var(--space-7) var(--space-5); background-position: center center; } .portal-right { flex: none; padding: var(--space-5); } .login-panel { padding: var(--space-5) var(--space-4); } .portal-world-lines { display: none; } .portal-spiral { display: none; } }

AETHERIA

Where beautiful chaos endures, and crooked things outlast the perfect.

A world where mathematics underpins reality.

Where the Riemann Field rings like a bell.

Where beautiful imperfection saves what perfect order cannot.