:root{--accent: #f2e6c4;--back-bg: rgba(5, 6, 12, .6)}body{background:#05060c}.stage{position:relative;height:100vh;height:100svh;min-height:480px;overflow:hidden;user-select:none;-webkit-user-select:none}#sky{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}#sky.dragging{cursor:grabbing}.readout{position:absolute;top:64px;left:16px;max-width:min(30rem,calc(100% - 32px));text-shadow:0 0 2px rgba(0,0,0,.9),0 1px 8px rgba(0,0,0,.85),0 0 22px rgba(0,0,0,.7);pointer-events:none}.readout p{margin:0}.eyebrow{font-size:.85rem;opacity:.75}.readout h1{margin:.1rem 0 .2rem;font-size:clamp(2rem,6vw,3.4rem);font-weight:700;line-height:1.1;color:var(--accent);transition:color .3s}.numbers{font-variant-numeric:tabular-nums;font-size:.95rem}.like{margin-top:.15rem!important;font-size:.95rem;opacity:.9}.sky-note{margin-top:.7rem!important;font-size:.92rem;line-height:1.6;max-width:26rem}.survey{margin-top:.45rem!important;font-size:.78rem;opacity:.65}.fact{position:absolute;top:64px;right:16px;width:min(22rem,calc(100% - 32px));padding:1rem 1.1rem .9rem;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:#080a12db;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:.9rem;line-height:1.65;z-index:6}.fact h2{margin:0 1.6rem .4rem 0;font-size:1rem;color:var(--accent)}.fact p{margin:0 0 .5rem}.fact-close{position:absolute;top:.45rem;right:.55rem;width:1.9rem;height:1.9rem;border:0;border-radius:50%;background:transparent;color:inherit;font-size:1.3rem;line-height:1;cursor:pointer;opacity:.7}.fact-close:hover{opacity:1;background:#ffffff14}.ruler{position:absolute;left:0;right:0;bottom:0;height:var(--ground, 30%);touch-action:none;cursor:pointer}.marks{position:absolute;inset:0}.mark{position:absolute;transform:translate(-50%);padding:.15rem .35rem;border:0;background:none;color:#eef1f899;font:inherit;font-size:.72rem;line-height:1.2;white-space:nowrap;cursor:pointer}.mark:hover,.mark:focus-visible,.mark.open{color:#fff}.mark:after{content:"";position:absolute;left:50%;width:1px;background:currentColor;opacity:.5}.mark.note:after{top:100%;height:var(--stem, 10px)}.mark.band{font-size:.82rem;color:#eef1f8cc}.mark.band.active{color:var(--accent);font-weight:600}.mark.band:after{display:none}.mark.offscale{transform:none}.mark.offscale:after{display:none}.handle{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px #05060c99,0 0 18px 4px var(--accent);cursor:grab;outline:none}.handle:focus-visible{box-shadow:0 0 0 3px #fff,0 0 18px 4px var(--accent)}.specimen{position:absolute;isolation:isolate;bottom:calc(var(--ground, 30%) + 36px);width:220px;margin:0;text-align:center;pointer-events:none;z-index:4}.specimen:before{content:"";position:absolute;inset:-36px -48px -14px;z-index:-1;background:radial-gradient(closest-side,#03040ab8,#03040a73 55%,#03040a00)}.specimen:after{content:"";position:absolute;top:100%;left:var(--stem-x, 50%);width:1px;height:var(--stem, 40px);background:linear-gradient(#eef1f84d,#eef1f800)}.specimen-art{position:relative;height:130px;animation:drift 6s ease-in-out infinite}.specimen-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));opacity:0;transform:scale(.94);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1)}.specimen-art img.on{opacity:1;transform:none}@keyframes drift{50%{transform:translateY(-5px)}}.specimen figcaption{position:relative;display:grid;gap:.05rem;margin-top:.55rem;text-shadow:0 0 2px rgba(0,0,0,.9),0 1px 8px rgba(0,0,0,.85),0 0 22px rgba(0,0,0,.7)}.specimen figcaption:before{content:"";position:absolute;inset:-18px -24px -16px;z-index:-1;background:radial-gradient(closest-side,#03040ae0,#03040a9e 60%,#03040a00)}.specimen b{font-size:1.05rem;font-weight:600;letter-spacing:.04em}.specimen span{font-size:.8rem;opacity:.85;font-variant-numeric:tabular-nums}.specimen .ratio{color:color-mix(in srgb,var(--accent) 45%,#fff);opacity:1}@media(prefers-reduced-motion:reduce){.specimen-art{animation:none}}.hint{position:absolute;left:0;right:0;bottom:10px;margin:0;text-align:center;font-size:.8rem;opacity:.6;pointer-events:none;transition:opacity .6s}.hint.gone{opacity:0}@media(hover:none){.hint .keys{display:none}}@media(max-width:700px){.mark.note{font-size:0;width:22px;height:22px;padding:0}.mark.note:before{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:currentColor}.mark.note:after{top:calc(50% + 3px)}.mark.note.offscale{font-size:.7rem;width:auto;height:auto;padding:.15rem .35rem}.mark.note.offscale:before{display:none}.fact{top:auto;bottom:calc(var(--ground, 30%) + 8px);right:12px;left:12px;width:auto;max-height:45vh;overflow-y:auto}.sky-note{font-size:.85rem}.stage:has(.fact:not([hidden])) .specimen{display:none}}.credits{max-width:60rem;margin:0 auto;padding:2rem 16px 4rem;font-size:.8rem;opacity:.7}.credits h2{margin:0 0 .4rem;font-size:.9rem}.credits p{margin:0 0 .8rem}.credits dl{margin:0;display:grid;gap:.25rem}.credits dl div{display:grid;grid-template-columns:4.5rem 1fr}.credits dt{opacity:.8}.credits dd{margin:0}.credits h2:not(:first-child){margin-top:1.6rem}.credits a{color:inherit}
