: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 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; }
.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; }
.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; } }