:root {
  color-scheme: dark;
  --gold: #d8b96e;
  --gold-soft: #f0dba3;
  --ink: #080510;
  --violet: #6d3fa3;
  --muted: #a49dac;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--ink); color: #f8f4ea; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow-x: hidden; }
button, input { font: inherit; }
#cosmos { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.grain { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .045; 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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
.aurora { position: fixed; z-index: 1; pointer-events: none; border-radius: 50%; filter: blur(90px); opacity: .22; }
.aurora-one { width: 52vw; height: 42vw; top: -20vw; left: -9vw; background: #51338b; animation: drift 16s ease-in-out infinite alternate; }
.aurora-two { width: 45vw; height: 38vw; right: -15vw; bottom: -16vw; background: #7b4c67; animation: drift 20s ease-in-out infinite alternate-reverse; }
.shell { position: relative; z-index: 3; width: min(1240px, calc(100% - 48px)); min-height: 100vh; margin: 0 auto; display: flex; flex-direction: column; }
.topbar { height: 104px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: grid; grid-template-columns: 38px auto; grid-template-rows: auto auto; color: #fff; text-decoration: none; font-family: Georgia, serif; letter-spacing: .23em; font-size: 19px; }
.brand-mark { grid-row: 1 / 3; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(216,185,110,.45); border-radius: 50%; color: var(--gold); box-shadow: 0 0 28px rgba(216,185,110,.2); }
.brand small { color: #817a88; font-family: ui-monospace, monospace; font-size: 7px; letter-spacing: .3em; margin-top: 3px; }
.owner-link { background: rgba(255,255,255,.025); border: 1px solid rgba(216,185,110,.25); border-radius: 999px; padding: 10px 17px; color: #cfc7d1; cursor: pointer; font-size: 12px; letter-spacing: .06em; transition: .25s ease; }
.owner-link:hover { color: var(--gold-soft); border-color: rgba(216,185,110,.65); background: rgba(216,185,110,.06); }
.hero { flex: 1; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 7vw; padding: 50px 0 76px; }
.copy { max-width: 670px; }
.eyebrow { color: var(--gold); font: 10px/1.5 ui-monospace, monospace; letter-spacing: .25em; margin: 0 0 26px; }
.eyebrow span { display: inline-block; width: 28px; height: 1px; margin: 0 12px 3px 0; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
h1 { margin: 0; font: 400 clamp(49px, 6vw, 82px)/.98 Georgia, "Times New Roman", serif; letter-spacing: -.045em; text-wrap: balance; }
h1 em { color: transparent; font-weight: 400; background: linear-gradient(110deg, #96702f, #f6e5b3 45%, #c99d4d 70%, #f5db9d); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 20px rgba(216,185,110,.15)); }
.lead { max-width: 620px; margin: 28px 0 31px; color: #aaa2b1; font-size: 15px; line-height: 1.8; }
.release-line { display: inline-flex; align-items: center; gap: 13px; padding: 10px 17px 10px 12px; border: 1px solid rgba(216,185,110,.18); border-radius: 14px; background: rgba(18,12,29,.58); backdrop-filter: blur(14px); }
.release-line div { display: grid; gap: 2px; }
.release-line strong { color: #e6dcc5; font: 11px/1.4 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.release-line small { color: #746d7c; font-size: 9px; letter-spacing: .05em; }
.pulse { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 13px var(--gold); }
.pulse::after { content: ""; position: absolute; inset: -5px; border: 1px solid rgba(216,185,110,.4); border-radius: inherit; animation: pulse 2.5s ease-out infinite; }
.portal { position: relative; width: min(42vw, 530px); aspect-ratio: 1; margin: auto; display: grid; place-items: center; perspective: 900px; }
.portal::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; background: radial-gradient(circle at 48% 44%, rgba(216,185,110,.13), rgba(64,31,100,.12) 38%, transparent 66%); box-shadow: inset 0 0 75px rgba(216,185,110,.08), 0 0 100px rgba(58,29,91,.22); }
.portal-glow { position: absolute; width: 42%; height: 42%; border-radius: 50%; background: rgba(129,79,168,.2); filter: blur(45px); animation: breathe 7s ease-in-out infinite; }
.orbit { position: absolute; border: 1px solid rgba(216,185,110,.2); border-radius: 50%; transform-style: preserve-3d; }
.orbit::before, .orbit::after { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.orbit::before { top: 10%; left: 18%; }.orbit::after { right: 10%; bottom: 22%; }
.orbit i { position: absolute; top: -12px; left: 48%; color: var(--gold); font-style: normal; text-shadow: 0 0 15px rgba(216,185,110,.7); }
.orbit-a { inset: 7%; animation: spin 34s linear infinite; }.orbit-b { inset: 20%; transform: rotateX(63deg); animation: spin 24s linear infinite reverse; }.orbit-c { inset: 31%; transform: rotateY(65deg); animation: spin 19s linear infinite; }
.breath-core { position: relative; z-index: 3; width: 122px; height: 122px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(244,221,160,.45); background: radial-gradient(circle at 38% 33%, rgba(255,245,216,.25), rgba(166,112,46,.13) 37%, rgba(28,14,43,.86) 73%); box-shadow: 0 0 0 16px rgba(216,185,110,.025), 0 0 55px rgba(216,185,110,.17), inset 0 0 35px rgba(255,232,170,.12); animation: breathe 7s ease-in-out infinite; }
.core-symbol { font: 44px/1 Georgia, serif; color: var(--gold-soft); text-shadow: 0 0 22px rgba(216,185,110,.6); }
.breath-core small { position: absolute; bottom: 22px; font: 6px/1 ui-monospace, monospace; letter-spacing: .35em; color: #9f906d; }
.harmonic { position: absolute; border: 1px solid rgba(216,185,110,.11); border-radius: 50%; animation: harmonic 7s ease-out infinite; }.harmonic-a { width: 35%; height: 35%; }.harmonic-b { width: 35%; height: 35%; animation-delay: 3.5s; }
.float-card { position: absolute; z-index: 4; min-width: 154px; padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: linear-gradient(135deg, rgba(26,18,40,.84), rgba(11,7,19,.7)); backdrop-filter: blur(17px); box-shadow: 0 18px 45px rgba(0,0,0,.25); animation: float 5s ease-in-out infinite; }
.float-card b { color: var(--gold); font: 8px/1.4 ui-monospace, monospace; letter-spacing: .18em; }.float-card span { grid-column: 1; color: #d8d2da; font: 11px/1.4 Georgia, serif; }.float-card i { grid-column: 2; grid-row: 1 / 3; align-self: center; color: #9f8661; font-style: normal; }
.card-one { top: 11%; left: -2%; }.card-two { right: -2%; top: 47%; animation-delay: -1.8s; }.card-three { bottom: 6%; left: 4%; animation-delay: -3.2s; }
.glimpses { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); }
.glimpses article { display: flex; gap: 16px; padding: 25px 24px; border-right: 1px solid rgba(255,255,255,.07); }.glimpses article:first-child { padding-left: 0; }.glimpses article:last-child { border-right: 0; }
.glimpses article > span { color: #655d69; font: 8px/1.5 ui-monospace, monospace; }.glimpses b { color: #ded7df; font: 12px/1.4 Georgia, serif; }.glimpses p { margin: 5px 0 0; color: #716a77; font-size: 10px; line-height: 1.55; }
footer { display: flex; justify-content: space-between; padding: 22px 0 26px; color: #534e58; font: 8px/1.4 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
dialog { width: min(430px, calc(100% - 32px)); padding: 0; border: 1px solid rgba(216,185,110,.3); border-radius: 24px; color: #f5f1e9; background: linear-gradient(145deg, rgba(28,18,43,.98), rgba(8,5,16,.99)); box-shadow: 0 30px 100px #000, inset 0 1px rgba(255,255,255,.05); }
dialog::backdrop { background: rgba(3,1,7,.82); backdrop-filter: blur(16px); }
dialog form { position: relative; padding: 38px; text-align: center; }
.dialog-close { position: absolute; top: 14px; right: 16px; width: 32px; height: 32px; border: 0; border-radius: 50%; color: #8b8291; background: rgba(255,255,255,.04); cursor: pointer; font-size: 22px; }
.dialog-sigil { width: 48px; height: 48px; margin: 0 auto 17px; display: grid; place-items: center; border: 1px solid rgba(216,185,110,.4); border-radius: 50%; color: var(--gold); box-shadow: 0 0 30px rgba(216,185,110,.15); }
.centered { margin: 0 0 9px; }.centered::before { content: ""; }
dialog h2 { margin: 0; font: 30px/1.15 Georgia, serif; }.dialog-copy { margin: 11px auto 26px; max-width: 280px; color: #8d8592; font-size: 12px; line-height: 1.6; }
dialog label { display: block; margin-bottom: 8px; text-align: left; color: #9d94a2; font-size: 10px; letter-spacing: .08em; }
.password-field { display: flex; border: 1px solid rgba(255,255,255,.11); border-radius: 12px; overflow: hidden; background: rgba(0,0,0,.25); transition: .2s; }.password-field:focus-within { border-color: rgba(216,185,110,.6); box-shadow: 0 0 0 3px rgba(216,185,110,.07); }
.password-field input { flex: 1; min-width: 0; padding: 14px 16px; border: 0; outline: 0; color: #fff; background: transparent; letter-spacing: .08em; }.password-field button { width: 48px; border: 0; color: #837a88; background: transparent; cursor: pointer; }
.form-error { min-height: 18px; margin: 8px 0 2px; color: #e68d89; font-size: 10px; }
.login-button { width: 100%; padding: 14px 17px; display: flex; justify-content: space-between; border: 1px solid #d1ad5d; border-radius: 12px; color: #100b17; background: linear-gradient(110deg, #a98239, #f1d78e 48%, #bd8e3d); cursor: pointer; font-weight: 700; transition: .2s; }.login-button:hover { filter: brightness(1.08); transform: translateY(-1px); }.login-button:disabled { opacity: .55; cursor: wait; }
.security-note { display: block; margin-top: 15px; color: #665e6c; font-size: 8px; }
@keyframes spin { to { rotate: 360deg; } } @keyframes breathe { 0%,100% { transform: scale(.91); opacity: .72; } 50% { transform: scale(1.06); opacity: 1; } } @keyframes harmonic { 0% { transform: scale(.75); opacity: .7; } 100% { transform: scale(2.45); opacity: 0; } } @keyframes pulse { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } @keyframes drift { to { transform: translate3d(7vw, 5vw, 0) scale(1.1); } } @keyframes float { 0%,100% { transform: translateY(-5px); } 50% { transform: translateY(7px); } }
@media (max-width: 900px) { .shell { width: min(100% - 32px, 720px); }.topbar { height: 82px; }.hero { grid-template-columns: 1fr; gap: 20px; padding: 55px 0 60px; }.copy { text-align: center; margin: auto; }.lead { margin-left: auto; margin-right: auto; }.portal { width: min(88vw, 500px); }.glimpses { grid-template-columns: 1fr; }.glimpses article, .glimpses article:first-child { padding: 18px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.07); }.glimpses article:last-child { border-bottom: 0; } }
@media (max-width: 560px) { .owner-link { padding: 9px 12px; font-size: 10px; }.brand { font-size: 16px; }.hero { padding-top: 35px; } h1 { font-size: clamp(42px, 13vw, 61px); }.lead { font-size: 13px; }.portal { width: 96vw; margin-left: calc((100% - 96vw)/2); }.float-card { min-width: 132px; padding: 10px 11px; }.card-one { left: 0; }.card-two { right: 0; }.card-three { left: 2%; }.breath-core { width: 104px; height: 104px; } footer { gap: 18px; flex-direction: column; } dialog form { padding: 36px 24px 28px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }