*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#070915;color:#f5f1e8;font-family:system-ui,-apple-system,sans-serif}#sky{position:fixed;inset:0;overflow:hidden;touch-action:none;cursor:grab;background:radial-gradient(ellipse at 55% 55%,#29204455,transparent 58%),radial-gradient(ellipse at 30% 65%,#13354c55,transparent 55%),#070915}#sky:active{cursor:grabbing}canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#world{position:absolute;left:50%;top:50%;transform-origin:0 0;will-change:transform}.star{position:absolute;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;transform:translate(-50%,-50%) scale(var(--star-scale,1));cursor:pointer;-webkit-tap-highlight-color:transparent;color:#c8e4ff}.star.verse{color:#ffda93}.starlight{position:absolute;left:50%;top:50%;width:var(--core,4px);height:var(--core,4px);transform:translate(-50%,-50%);border-radius:50%;background:#fff;box-shadow:0 0 5px 2px currentColor,0 0 15px 5px currentColor,0 0 34px 7px #98bbff22;animation:twinkle 4s ease-in-out infinite;animation-delay:var(--delay)}.starlight:before,.starlight:after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:linear-gradient(transparent,currentColor,white,currentColor,transparent);width:1px;height:25px;opacity:.7}.starlight:after{transform:translate(-50%,-50%) rotate(90deg);height:19px}.star:hover .starlight,.star:focus-visible .starlight{box-shadow:0 0 7px 3px white,0 0 23px 9px currentColor;animation:none}@keyframes twinkle{50%{opacity:.58;filter:brightness(.8)}0%,100%{opacity:1;filter:brightness(1.2)}}@media(prefers-reduced-motion:reduce){.starlight{animation:none}}header{position:fixed;top:max(24px,env(safe-area-inset-top));left:32px;pointer-events:none}header p{letter-spacing:.32em;color:#d4bb94;font-size:12px;margin:0 0 13px}h1{font:400 clamp(28px,4vw,44px)/1.1 Georgia,serif;margin:0;text-shadow:0 2px 20px #070915}h1 span{display:block;font:400 14px/1.5 system-ui;margin-top:10px;color:#b2afc5}.legend{position:fixed;top:34px;right:32px;display:flex;gap:20px;font-size:13px;color:#c5c6db;pointer-events:none}.legend span:last-child{color:#e1c597}footer{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));left:32px;right:32px;display:flex;align-items:end;justify-content:space-between;pointer-events:none}footer p{font-size:14px;line-height:1.8;color:#d9d8e6;margin:0;text-shadow:0 2px 8px #000}footer p span{font-size:12px;color:#a6a4ba}nav{display:flex;background:#121322d9;border:1px solid #ffffff25;border-radius:40px;padding:4px;pointer-events:auto;backdrop-filter:blur(15px)}nav button,#close{background:transparent;border:0;color:#eee;font-size:25px;width:46px;height:46px;cursor:pointer}button:focus-visible{outline:2px solid #f4d9ab;outline-offset:5px}dialog{background:#101220;color:#fff;border:1px solid #ffffff24;padding:50px 22px 20px;border-radius:16px;width:max-content;max-width:94vw;max-height:92dvh;box-shadow:0 25px 100px #0009}dialog::backdrop{background:#02040cd9;backdrop-filter:blur(12px)}#close{position:absolute;right:6px;top:3px}#content img{display:block;width:auto;height:auto;max-width:82vw;max-height:72dvh;object-fit:contain;border-radius:4px}#content blockquote{font:400 clamp(23px,5vw,34px)/1.5 Georgia,serif;text-align:center;margin:15px auto 28px;max-width:560px;color:#f1e4cc}#content cite{display:block;text-align:center;color:#ddbd83;font-style:normal;font-size:16px}#content .spark{text-align:center;font-size:36px;color:#e6c285}#count{text-align:center;font-size:12px;color:#a3a1b6;margin:18px 0 0}@media(max-width:600px){header{left:22px;top:max(25px,env(safe-area-inset-top))}.legend{top:146px;left:22px;right:auto;font-size:12px}footer{left:20px;right:20px;bottom:max(22px,env(safe-area-inset-bottom));gap:8px}footer p{font-size:12px;max-width:210px}footer p span{font-size:12px}nav button{width:40px;height:44px}dialog{padding:48px 16px 18px}}
header{z-index:2;right:0;padding-bottom:30px;background:linear-gradient(#070915ed 35%,#07091500)}footer{z-index:2}footer p{padding-top:12px}#sky{user-select:none;-webkit-user-select:none} .legend{z-index:3}@media(max-width:600px){footer{align-items:center;bottom:max(20px,env(safe-area-inset-bottom))}footer p{max-width:205px;font-size:12px;line-height:1.6}footer p span{display:none}header{left:0;padding-left:22px;padding-top:25px;top:0}h1{font-size:32px}.legend{top:145px}}
