:root { --system-rgb: 118, 99, 208; }
[hidden] { display: none !important; }
button:disabled { opacity: .5; cursor: wait; }
button:focus-visible, a:focus-visible { outline: 2px solid #f3dca0; outline-offset: 4px; }
.app-shell { background: radial-gradient(ellipse at 55% 75%, rgba(var(--system-rgb), .25), #0a0d25 48%, #050714 85%); }
.topbar { padding-inline: clamp(18px, 3vw, 58px); gap: 20px; }
.top-actions { flex-wrap: wrap; justify-content: flex-end; }
.sky-footer { gap: 18px; flex-wrap: wrap; align-items: center; }
#syncStatus { font-size: 11px; color: #b2b8d1; }
#syncStatus[data-state="error"] { color: #ffd5a6; }
.account-gate { position: fixed; inset: 0; z-index: 1000; overflow: auto; display: grid; grid-template-columns: 1fr minmax(330px, 470px); align-items: center; gap: 8vw; padding: 6vh 10vw; isolation: isolate; background: radial-gradient(ellipse at 20% 55%, #22204688, transparent 58%), #060919; }
.account-gate::before { content:''; position:absolute; inset:0; z-index:-2; opacity:.55; pointer-events:none; background-image: radial-gradient(circle at 12% 20%, #c7d5ff 0 1px, transparent 1.6px), radial-gradient(circle at 28% 72%, #aebcff 0 1px, transparent 1.7px), radial-gradient(circle at 44% 13%, #f8e6b5 0 1px, transparent 1.5px), radial-gradient(circle at 68% 30%, #b9caff 0 1px, transparent 1.6px), radial-gradient(circle at 84% 78%, #d5ddff 0 1px, transparent 1.7px), radial-gradient(circle at 92% 18%, #fff0c8 0 1px, transparent 1.6px); background-size: 210px 180px, 260px 230px, 310px 270px, 240px 190px, 290px 250px, 340px 300px; animation: account-drift 34s linear infinite; }
.account-gate::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 18% 56%, #9a8cff13, transparent 32%), radial-gradient(ellipse at 44% 44%, #6679d50d, transparent 35%); animation: account-breathe 9s ease-in-out infinite alternate; }
.auth-card { position: relative; width: 100%; max-width: 470px; }
.auth-card h1 { font: 400 clamp(32px, 4vw, 52px)/1.12 Georgia,serif; letter-spacing: -.02em; margin: 22px 0; }
.auth-intro { color: #aeb6cf; line-height: 1.8; font-size: 14px; max-width: 380px; }
.auth-card h2 { font-size: 16px; font-weight: 500; margin: 28px 0 20px; }
.auth-card label,.universe-dialog label { display: grid; gap: 8px; margin: 14px 0; color: #c9cde0; font-size: 13px; }
.auth-card label.remember-option { display:flex; align-items:center; gap:9px; margin: 2px 0 16px; color:#aeb6cf; font-size:12px; cursor:pointer; }
.auth-card label.remember-option input { width:16px; height:16px; margin:0; accent-color:#f3dca0; }
.auth-card input,.universe-dialog input,.universe-dialog textarea,.universe-dialog select { width:100%; border: 1px solid #a8b4e32c; padding: 12px 14px; border-radius: 10px; background: #ffffff05; color:#f4f1ff; font: inherit; }
.auth-links { display: flex; justify-content: space-between; margin-top: 12px; gap: 12px; }
.password-field { position:relative; }
.password-field #accountPassword { padding-right:54px; }
.password-toggle { position:absolute;right:3px;top:50%;transform:translateY(-50%);width:44px;height:40px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:#b9c7ed;cursor:pointer; }
.password-toggle svg { width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.2; }
.password-toggle[aria-pressed="true"] { color:#f4dda0;background:#f4dda00d; }
.password-toggle[aria-pressed="true"] circle { fill:#f4dda035; }
.saved-access-hint { color:#c7d8ba;font-size:12px;line-height:1.6;margin:9px 0 14px; }
.auth-note { font-size: 11px; color:#858fab; line-height: 1.8; margin-top: 30px; }
.auth-orbit { width: min(34vw,490px); aspect-ratio:1; border:1px solid #b6baf025; border-radius:50%; position:relative; box-shadow:0 0 110px #7869c11a,inset 0 0 100px #7771a811; animation: orbit-hover 8s ease-in-out infinite; }
.auth-orbit::before { content:''; position:absolute; inset:calc(50% - 5px); background:#ffefc9; border-radius:50%; box-shadow:0 0 9px 4px #fff5d7,0 0 40px 12px #b5bbf466,0 0 130px 65px #9384c522; animation: star-pulse 3.8s ease-in-out infinite; }
.auth-orbit::after { content:''; position:absolute; inset:calc(50% - 30px); border-radius:50%; background:radial-gradient(circle, #fff4c844, transparent 68%); filter:blur(7px); animation: star-halo 4.5s ease-in-out infinite; }
.auth-orbit i { position:absolute; inset:17%; border:1px solid #989bc326; border-radius:50%; transform:rotate(-28deg) scaleY(.45); animation: orbit-spin 18s linear infinite; }
.auth-orbit i:nth-child(2) { inset:-13%; transform:rotate(35deg) scaleY(.6); animation: orbit-spin-reverse 25s linear infinite; }
.auth-orbit i:nth-child(3) { inset:35%; transform:rotate(65deg) scaleY(.7); animation: orbit-spin-tight 12s linear infinite reverse; }
.auth-orbit i::before { content:''; position:absolute; left:18%; top:8%; width:5px;height:5px;border-radius:50%;background:#bbcaff;box-shadow:0 0 15px #becbff,0 0 26px #b5c5ff99; animation: orbit-glint 2.8s ease-in-out infinite; }
.auth-orbit i:nth-child(2)::before { left:70%; top:24%; width:4px; height:4px; animation-delay:-1.1s; }
.auth-orbit i:nth-child(3)::before { left:42%; top:3%; width:3px; height:3px; animation-delay:-.45s; }
@keyframes orbit-spin { from { transform:rotate(-28deg) scaleY(.45); } to { transform:rotate(332deg) scaleY(.45); } }
@keyframes orbit-spin-reverse { from { transform:rotate(35deg) scaleY(.6); } to { transform:rotate(-325deg) scaleY(.6); } }
@keyframes orbit-spin-tight { from { transform:rotate(65deg) scaleY(.7); } to { transform:rotate(425deg) scaleY(.7); } }
@keyframes orbit-hover { 0%,100% { transform:translate3d(0,0,0) rotate(-1deg); } 50% { transform:translate3d(0,-9px,0) rotate(1deg); } }
@keyframes star-pulse { 0%,100% { transform:scale(.88); opacity:.82; } 50% { transform:scale(1.16); opacity:1; } }
@keyframes star-halo { 0%,100% { transform:scale(.75); opacity:.28; } 50% { transform:scale(1.3); opacity:.75; } }
@keyframes orbit-glint { 0%,100% { opacity:.5; transform:scale(.8); } 45% { opacity:1; transform:scale(1.35); } 65% { opacity:.65; transform:scale(1); } }
@keyframes account-drift { from { transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(-24px,18px,0) scale(1.03); } }
@keyframes account-breathe { from { opacity:.45; transform:scale(1); } to { opacity:.9; transform:scale(1.05); } }
.inline-error { min-height:18px; font-size:12px; color:#ffd1bb; line-height:1.6; }
.universe-dialog { background:linear-gradient(150deg,#15182b,#090d1c); color:#f7f4ff; border:1px solid #c2c6e52a; border-radius:24px; padding:36px; width:min(720px, calc(100vw - 28px)); max-height:88dvh; overflow:auto; box-shadow:0 35px 150px #0009; }
.universe-dialog::backdrop { background:#020510b5; backdrop-filter:blur(12px); }
.dialog-close { position:absolute;right:15px;top:15px; }
.universe-dialog h2 { font:400 32px/1.2 Georgia,serif; margin:12px 0; padding-right:20px; }
.universe-dialog h3 { font-size:15px; font-weight:500; margin:28px 0 14px; }
.muted { color:#a1abc5; font-size:13px; line-height:1.8; }
.system-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0; }
.system-card { text-align:left; min-height:170px; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; border:1px solid #bcc0e92b;border-radius:16px; padding:20px; color:#f5f0ff; position:relative; overflow:hidden; background:radial-gradient(ellipse at 75% 20%,rgba(var(--card-rgb),.30),#0a1020 75%); transition:border-color .3s,transform .3s; }
.system-card::before { content:'·  ✦   ·';position:absolute;right:25px;top:20px;color:#efefff;text-shadow:0 0 18px #fff9;letter-spacing:12px; }
.system-card:hover { transform:translateY(-3px);border-color:#e9d8a77a; }
.system-card[aria-current="true"] { border-color:#e7d49c77; }
.system-card strong { font:400 23px Georgia,serif; }
.system-card span { color:#b6bed6;font-size:11px;letter-spacing:.03em; }
.dialog-actions { display:flex;flex-wrap:wrap;gap:10px;margin-top:20px; }
.small-row { display:flex;gap:12px;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid #c2c6e518; }
.small-row strong { display:block;font-weight:500;font-size:14px; }.small-row span { font-size:11px;color:#a7afc6; }
.invitation-link,.recovery-code { overflow-wrap:anywhere;font:12px/1.8 ui-monospace,monospace;background:#050919;border:1px solid #ead29744;padding:15px;border-radius:10px;user-select:all; }
.theme-choices { display:flex;gap:10px; }.theme-choices label { flex:1; }
.comment { border-left:1px solid #ead4a74d;padding:3px 0 3px 14px;margin:18px 0; }.comment p { white-space:pre-wrap;font-size:13px;line-height:1.7; }.comment small { color:#a6afc5; }
.travel-overlay { position:fixed;inset:0;z-index:1200;background:#030510;overflow:hidden; }
#travelCanvas { position:absolute;width:100%;height:100%;inset:0; }
.travel-caption { position:absolute;left:0;right:0;bottom:17%;text-align:center;padding:0 20px;pointer-events:none; }
.travel-caption h2 { font:400 clamp(30px,5vw,60px) Georgia,serif;margin:16px 0;text-shadow:0 0 40px #b7b0e6aa; }
.travel-caption p:last-child { font-size:13px;letter-spacing:.06em;color:#b7bfd3; }
#skipTravel { position:absolute;right:30px;bottom:24px;color:#b3bbcf; }
.event-date { color:#ebd699 !important; }.draft-note { color:#c9b88a;font-size:11px; }
.memory-social { display:flex;gap:12px;margin-top:18px;flex-wrap:wrap; }
.observatory-controls{display:flex;align-items:end;flex-wrap:wrap;gap:12px;margin:18px 0}.observatory-controls label{flex:1;min-width:150px;margin:0}.observatory-controls button{font-size:11px;margin-bottom:2px}
.observatory{position:relative;isolation:isolate;border:1px solid #abc5ef20;border-radius:20px;overflow:hidden;background:radial-gradient(ellipse at 50% 0,#39478744,transparent 75%),#060b19}
.observatory:before{content:'';position:absolute;inset:-50%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 40% 40%,#79a9eb15,transparent 50%);animation:observatory-nebula 18s ease-in-out infinite alternate}
.observatory-cards{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:36px 28px 30px;perspective:1100px;scrollbar-color:#596a93 #0b1020}
.observatory-card{flex:0 0 245px;scroll-snap-align:center;border:1px solid #b0caef30;border-radius:16px;background:#101a2d;color:#ecf1fc;padding:0;text-align:left;overflow:hidden;cursor:pointer;transform:rotateY(-7deg);transition:transform .45s ease,border-color .3s;box-shadow:0 14px 24px #0005}
.observatory-card:hover,.observatory-card:focus-visible{transform:rotateY(0) translateY(-5px);border-color:#ebd29880}.observatory-image{height:150px;background:radial-gradient(ellipse at 50% 50%,#687ab73d,transparent 65%),#071222;display:grid;place-items:center;overflow:hidden}.observatory-image img{width:100%;height:100%;object-fit:cover}.observatory-image>span{font-size:30px;color:#dce9ff;text-shadow:0 0 24px #8dafff}
.observatory-copy{padding:19px}.observatory-copy small{font-size:10px;color:#cdbb97}.observatory-copy strong{display:block;font:21px/1.2 Georgia,serif;margin:9px 0;overflow-wrap:anywhere}.observatory-copy p{font-size:12px;line-height:1.7;color:#a5b6d0;white-space:pre-wrap;overflow-wrap:anywhere}.observatory-copy>span{font-size:10px;color:#859bb8}.observatory-empty{padding:55px 20px;text-align:center;width:100%}
.observatory[data-view='wall'] .observatory-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;padding:28px 20px;gap:22px;perspective:none}.observatory[data-view='wall'] .observatory-card{animation:observatory-float 9s ease-in-out infinite alternate;animation-delay:var(--drift-delay)}
.observatory[data-view='wall'] .observatory-card:hover,.observatory[data-view='wall'] .observatory-card:focus-visible{animation-play-state:paused}
.observatory[data-motion='off']:before,.observatory[data-motion='off'] .observatory-card{animation:none}.observatory[data-motion='off'] .observatory-card{transition:none;transform:none}
@keyframes observatory-float{from{transform:translateY(-4px) rotate(-.5deg)}to{transform:translateY(4px) rotate(.5deg)}}@keyframes observatory-nebula{to{transform:translate(15%,8%) rotate(15deg)}}
.system-grid{position:relative;isolation:isolate}.system-grid:before{content:'';position:absolute;width:260px;height:260px;right:-20px;top:-70px;z-index:-1;pointer-events:none;border-radius:50%;opacity:.4;background:repeating-radial-gradient(circle,transparent 0 40px,#abc5ed22 41px 42px,transparent 43px 60px),conic-gradient(from 0deg,transparent 75%,#85add332 97%,#b6d5ff55 100%);animation:system-radar 18s linear infinite}
@keyframes system-radar{to{transform:rotate(360deg)}}
@media(max-width:500px){.observatory[data-view='wall'] .observatory-cards{grid-template-columns:1fr}.observatory-card{flex-basis:82%}.observatory-controls button{width:100%}}
@media(prefers-reduced-motion:reduce){.system-grid:before{animation:none}}
.systems-portal{position:relative;height:206px;margin:-22px -20px 4px;overflow:hidden;border-radius:19px;background:radial-gradient(ellipse at 50% 50%,#8c6dbe2e 0%,#25234f55 28%,#0b1126 66%,#050815 100%);isolation:isolate}.systems-portal:before{content:'';position:absolute;inset:-34%;background:repeating-radial-gradient(ellipse at 50% 50%,transparent 0 37px,#c1b8ff16 38px 39px,transparent 41px 65px);opacity:.55;transform:rotate(-12deg);animation:portal-ripple 16s linear infinite}.portal-cloud{position:absolute;border-radius:50%;filter:blur(23px);mix-blend-mode:screen}.portal-cloud-one{width:280px;height:120px;left:calc(50% - 140px);top:26px;background:radial-gradient(ellipse,#a870c766 0%,#5f70db3c 42%,transparent 73%);transform:rotate(-19deg);animation:portal-cloud-one 11s ease-in-out infinite alternate}.portal-cloud-two{width:260px;height:105px;left:calc(50% - 130px);top:76px;background:radial-gradient(ellipse,#f0ad9760 0%,#7d78dd35 38%,transparent 73%);transform:rotate(23deg);animation:portal-cloud-two 14s ease-in-out infinite alternate}.portal-rings{position:absolute;inset:0;display:grid;place-items:center}.portal-rings i{position:absolute;width:178px;height:60px;border:1px solid #dbd5ff42;border-radius:50%;transform:rotate(-20deg) scaleY(.55);box-shadow:0 0 18px #a597f128,inset 0 0 15px #b8c7ff11;animation:portal-orbit 10s linear infinite}.portal-rings i:nth-child(2){width:234px;height:90px;border-color:#f4d99b2f;transform:rotate(38deg) scaleY(.48);animation-duration:16s;animation-direction:reverse}.portal-rings i:nth-child(3){width:119px;height:42px;border-color:#d9eaff54;transform:rotate(74deg) scaleY(.65);animation-duration:7s}.portal-core{position:absolute;left:50%;top:50%;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fffde9 0 9%,#ffeeb39c 18%,#b3b9ff55 39%,transparent 70%);color:#fffdeb;font-size:19px;text-shadow:0 0 13px #fff9d6,0 0 30px #a5baff;box-shadow:0 0 22px 9px #fff0cb70,0 0 70px 24px #9079ef48;animation:portal-core 4.5s ease-in-out infinite}.portal-dust{position:absolute;left:0;right:0;top:41%;color:#f3ecff;opacity:.78;text-align:center;letter-spacing:31px;font-size:15px;text-shadow:0 0 15px #b3c6ff;animation:portal-dust 12s linear infinite}.systems-intro{margin-top:13px}.portal-system-grid{margin-top:17px}.portal-system-card{min-height:137px;padding:17px;transform:translateY(0);animation:portal-card-drift 8s var(--portal-delay) ease-in-out infinite alternate}.portal-system-card:before{content:none}.portal-system-card .system-signal{position:absolute;right:17px;top:13px;color:#f4e0af;font-size:14px;text-shadow:0 0 18px #fff0bb;animation:portal-signal 2.7s var(--portal-delay) ease-in-out infinite}.portal-system-card[aria-current="true"]{box-shadow:0 0 0 1px #f1db9a38,0 0 32px rgba(var(--card-rgb),.24)}.portal-system-card:hover,.portal-system-card:focus-visible{transform:translateY(-5px) scale(1.01);border-color:#f3db9a8c}
@keyframes portal-ripple{to{transform:rotate(348deg)}}@keyframes portal-cloud-one{to{transform:translate(22px,-9px) rotate(-6deg) scale(1.13)}}@keyframes portal-cloud-two{to{transform:translate(-18px,11px) rotate(38deg) scale(.88)}}@keyframes portal-orbit{to{transform:rotate(340deg) scaleY(.55)}}@keyframes portal-core{0%,100%{filter:brightness(.92);transform:translate(-50%,-50%) scale(.9)}50%{filter:brightness(1.3);transform:translate(-50%,-50%) scale(1.15)}}@keyframes portal-dust{from{transform:translateX(-6%)}to{transform:translateX(6%)}}@keyframes portal-card-drift{from{translate:0 -2px}to{translate:0 4px}}@keyframes portal-signal{0%,100%{opacity:.43;scale:.75}48%{opacity:1;scale:1.22}}
@media(max-width:760px){.systems-portal{margin-inline:-11px;height:180px}.portal-system-grid{grid-template-columns:1fr}.portal-system-card{min-height:112px}}
@media(prefers-reduced-motion:reduce){.systems-portal:before,.portal-cloud,.portal-rings i,.portal-core,.portal-dust,.portal-system-card,.portal-system-card .system-signal{animation:none!important}}
.toast { z-index:1500; }
@media(max-width:760px) { .account-gate { display:flex;padding:40px 24px;justify-content:center; }.auth-orbit{display:none;}.auth-card h1{font-size:38px;}.topbar{align-items:flex-start;flex-direction:column;padding:20px;}.top-actions{justify-content:flex-start;gap:7px;}.top-actions button{font-size:11px;padding:9px 12px;}.brand h1{font-size:19px;}.sky-copy{padding-top:6vh;}.system-grid{grid-template-columns:1fr;}.system-card{min-height:135px;}.universe-dialog{padding:28px 22px;}.sky-footer{padding-inline:20px;gap:8px;}.sky-footer .quote{display:none;} }
@media(prefers-reduced-motion:reduce) { .system-card { transition:none; } .account-gate::before,.account-gate::after,.auth-orbit,.auth-orbit::before,.auth-orbit::after,.auth-orbit i,.auth-orbit i::before { animation:none; } }