:root { color-scheme: dark; background: #030407; color: #e5e8ef; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; width: 100%; min-height: 100%; }
body { overflow: hidden; -webkit-tap-highlight-color: transparent; }
.aurora { position: fixed; inset: 0; overflow: hidden; pointer-events: none; background: #030407; }
.ribbon { position: absolute; width: 160%; height: 75%; left: -30%; top: 0; border-radius: 48%; filter: blur(65px); will-change: transform; }
.ribbon-one {
  background: conic-gradient(from 190deg at 50% 30%, transparent 5%, #5b1938 17%, #623521 24%, #53612e 31%, #155951 41%, #174b67 50%, #292661 61%, #501c53 70%, transparent 80%);
  opacity: .37; transform: rotate(-23deg) scaleY(.7); animation: drift-one 76s ease-in-out infinite alternate;
}
.ribbon-two {
  top: 21%; height: 56%; width: 145%; left: -24%;
  background: linear-gradient(110deg, transparent 9%, #194248 26%, #15463c 34%, #3c4c24 43%, #573923 54%, #54213d 65%, #2d275e 75%, transparent 89%);
  mask-image: radial-gradient(ellipse 65% 22% at 50% 50%, #000 5%, transparent 100%);
  opacity: .42; transform: rotate(-30deg); animation: drift-two 91s ease-in-out infinite alternate;
}
.ribbon-three {
  width: 120%; height: 100%; left: 10%; top: 28%; opacity: .22;
  background: radial-gradient(ellipse 35% 40% at 70% 45%, #292159, transparent 80%), radial-gradient(ellipse 30% 45% at 35% 60%, #10443e, transparent 80%);
  animation: drift-three 110s ease-in-out infinite alternate;
}
.veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 48%, #02040966 0%, transparent 52%, #01020499 100%); }
main { min-height: 100svh; min-height: 100dvh; display: grid; place-items: center; position: relative; padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); }
.constellation { position: relative; width: min(440px, calc(100vw - 32px), calc(100svh - 48px)); aspect-ratio: 1; container-type: inline-size; }
.logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; padding: 12px 15px; border: 0; background: transparent; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; color: inherit; border-radius: 24px; transition: opacity 1.5s, filter 1.5s; }
.logo img { width: min(160px, 38cqw); height: auto; display: block; opacity: .86; pointer-events: none; filter: drop-shadow(0 0 20px #d9e4ff12); }
.logo.holding { opacity: 1; filter: drop-shadow(0 0 12px #dce8ff30); }
.logo:focus-visible { outline: 1px solid #c6d4ef99; outline-offset: 5px; }
nav { position: absolute; inset: 0; }
.orb { position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); margin-left: calc(var(--size) / -2); margin-top: calc(var(--size) / -2); border: 1px solid hsl(var(--hue) 36% 72% / .25); border-radius: 50%; background: hsl(var(--hue) 40% 65% / .025); overflow: hidden; display: grid; place-items: center; isolation: isolate; color: #e3e7f0; transform: translateZ(0); animation: breathe var(--period) ease-in-out var(--delay) infinite; transition: border-color 1.4s, background 1.4s, box-shadow 1.4s; }
.orb.decor { pointer-events: none; }
.liquid { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(150deg, hsl(var(--hue) 48% 74% / .35), hsl(var(--hue) 40% 65% / .1)); clip-path: inset(100% 0 0); animation: tide var(--period) ease-in-out var(--delay) infinite; transition: opacity 1.2s; }
.symbol { width: 52%; height: 52%; object-fit: contain; opacity: 0; transform: scale(.8); transition: opacity 1.4s, transform 1.4s; position: relative; filter: brightness(0) invert(1); }
.symbol.mail { filter: none; }
.symbol.nextcloud { width: 62%; }
.symbol.plex { width: 45%; height: 52%; }
body.revealed .orb { animation: none; border-color: #d8e2f039; background: #b6c6e50c; cursor: pointer; }
body.revealed .orb.decor { opacity: .3; background: transparent; border-color: hsl(var(--hue) 36% 72% / .28); }
body.revealed .liquid { animation-play-state: paused; opacity: 0; }
body.revealed .symbol { opacity: .86; transform: scale(1); }
body.revealed .orb:hover, body.revealed .orb:focus-visible { border-color: #e2eaff88; background: #c3d1ef19; box-shadow: 0 0 20px #a1bce412; outline: none; }
body.revealed .orb:hover .symbol, body.revealed .orb:focus-visible .symbol { opacity: 1; }
.account { position: fixed; z-index: 5; top: max(20px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); display: flex; flex-direction: column; align-items: flex-end; max-width: calc(100vw - 40px); }
.account-button { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid #d8e2f039; background: #202630; color: #e5e8ef; font: 500 18px system-ui, sans-serif; cursor: pointer; overflow: hidden; }
.account-button img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.account-button:focus-visible, .account-action:focus-visible { outline: 2px solid #c6d4ef; outline-offset: 4px; }
.account-menu, .account-status { padding: 16px; border: 1px solid #d8e2f039; border-radius: 18px; background: #11151feb; box-shadow: 0 12px 40px #0005; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); max-width: min(320px, calc(100vw - 40px)); overflow-wrap: anywhere; }
.account-menu { margin-top: 12px; }
.account-menu p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
#account-name { font-weight: 600; }
#account-email { color: #bfc8d8; }
.account-action { border: 1px solid #d8e2f039; border-radius: 24px; background: #ffffff0c; padding: 10px 16px; color: inherit; font: 500 14px system-ui, sans-serif; cursor: pointer; }
.account-action:hover { background: #ffffff18; }
.account-action:disabled { opacity: .6; cursor: wait; }
.account-status { font-size: 13px; line-height: 1.5; margin: 12px 0 0; }
@keyframes tide { 0%, 12%, 100% { clip-path: inset(100% 0 0); } 40%, 53% { clip-path: inset(0 0 0); } 77% { clip-path: inset(67% 0 0); } }
@keyframes breathe { 0%,100% { opacity: .45; } 50% { opacity: .95; } }
@keyframes drift-one { from { transform: translate(-4%, -5%) rotate(-23deg) scaleY(.7); } to { transform: translate(5%, 14%) rotate(-12deg) scaleY(.9); } }
@keyframes drift-two { from { transform: translate(-4%, -6%) rotate(-30deg); } to { transform: translate(8%, 8%) rotate(-18deg) scaleY(1.35); } }
@keyframes drift-three { from { transform: translate(-10%, -5%); } to { transform: translate(5%, 10%); } }
@media (max-width: 600px) { .ribbon { filter: blur(42px); width: 240%; left: -70%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .orb { opacity: .7; } .liquid { clip-path: inset(65% 0 0); } }