@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Manrope:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@1,500&display=swap";:root{color-scheme:dark;font-family:Manrope,sans-serif;color:#f3f5f4;background:#050a12;font-synthesis:none;--cream: #f2f0e8;--muted: #8b97a8;--cyan: #92e9dc;--gold: #e7c16c;--panel: rgba(13, 20, 31, .72)}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}body{background:radial-gradient(circle at 70% 42%,#102136 0,#060b13 48%,#04070d)}button,input{font:inherit}button{color:inherit}#scene{position:fixed;inset:0;width:100%;height:100%;outline:none;touch-action:none;cursor:grab}#scene:active{cursor:grabbing}.label-layer{position:fixed!important;inset:0;z-index:4;pointer-events:none;overflow:hidden}.scene-label{display:block;padding:5px 8px;border:1px solid rgba(255,255,255,.13);border-radius:2px;background:#050a12c2;color:var(--label-color);box-shadow:0 7px 22px #00000061;text-shadow:0 1px 7px #000;white-space:nowrap;text-transform:uppercase;font:500 12px/1 DM Mono,monospace;letter-spacing:.1em}.scene-label.long{font-size:11px}#app:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:2;background:linear-gradient(90deg,rgba(3,7,13,.66) 0%,rgba(3,7,13,.12) 37%,transparent 68%),linear-gradient(0deg,rgba(3,7,13,.72) 0%,transparent 36%)}.topbar{position:fixed;left:0;right:0;top:0;height:88px;padding:0 42px;display:flex;align-items:center;justify-content:space-between;z-index:10;border-bottom:1px solid rgba(255,255,255,.09)}.brand{display:flex;align-items:center;gap:12px;color:var(--cream);text-decoration:none;font:500 12px/1 DM Mono,monospace;letter-spacing:.18em}.brand-mark{position:relative;display:grid;place-items:center;width:22px;height:22px;border:1px solid rgba(255,255,255,.65);border-radius:50%;overflow:hidden}.brand-mark:after{content:"";width:20px;height:20px;border-radius:50%;background:#05080d;box-shadow:-5px 0 8px var(--gold);transform:translate(5px)}.view-switch{position:absolute;left:50%;transform:translate(-50%);display:flex;gap:4px;padding:4px;border:1px solid rgba(255,255,255,.09);background:#090e1673;border-radius:999px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.view-button{border:0;background:transparent;padding:9px 17px;border-radius:999px;color:#778394;font-size:11px;font-weight:600;letter-spacing:.03em;cursor:pointer;transition:.3s ease}.view-button.active{background:#ffffff1a;color:#f4f5f3;box-shadow:inset 0 0 0 1px #ffffff0d}.info-button{display:flex;align-items:center;gap:11px;border:0;background:none;font-size:11px;color:#aeb6c1;cursor:pointer}.info-icon{display:grid;place-items:center;width:25px;height:25px;border:1px solid rgba(255,255,255,.25);border-radius:50%;font:400 12px/1 Georgia}.hero-copy,.alignment-copy{position:fixed;z-index:5;left:7.2vw;top:18vh;width:min(430px,35vw);transition:opacity .55s ease,transform .55s ease}.eyebrow{margin:0 0 22px;text-transform:uppercase;font:500 10px/1.4 DM Mono,monospace;letter-spacing:.16em;color:#aeb7c3}.live-dot{display:inline-block;width:6px;height:6px;margin:0 8px 1px 0;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}h1{margin:0;font-size:clamp(50px,5.4vw,82px);font-weight:300;letter-spacing:-.065em;line-height:.97}h1 em,.alignment-copy h2 em{font-family:Playfair Display,serif;font-weight:500;color:var(--gold)}.intro{max-width:390px;margin:27px 0;color:#9ca7b5;font-size:13px;line-height:1.75}.hint{display:flex;align-items:center;gap:10px;color:#6e7a8a;text-transform:uppercase;font:500 9px/1 DM Mono,monospace;letter-spacing:.12em}.mouse-icon{width:14px;height:20px;border:1px solid #778392;border-radius:8px;position:relative}.mouse-icon:after{content:"";position:absolute;left:5px;top:4px;width:2px;height:4px;background:#9fa9b4;border-radius:2px}.legend-card{position:fixed;right:4vw;bottom:185px;z-index:5;width:258px;padding:19px;border:1px solid rgba(255,255,255,.1);background:#090f18bd;-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);border-radius:3px;box-shadow:0 24px 70px #00000047;transition:opacity .4s,transform .4s}.legend-heading{display:flex;gap:13px;padding-bottom:14px;margin-bottom:13px;border-bottom:1px solid rgba(255,255,255,.08)}.legend-heading small,.legend-row small{display:block;color:#748092;font:400 9px/1.4 DM Mono,monospace;text-transform:uppercase;letter-spacing:.08em}.legend-heading strong{display:block;margin-top:4px;font-size:12px;font-weight:600}.phase-icon{display:block;width:30px;height:30px;flex:0 0 auto;border-radius:50%;background:var(--gold);box-shadow:0 0 18px #e7c16c59;position:relative;overflow:hidden}.phase-icon:after{content:"";position:absolute;width:30px;height:30px;border-radius:50%;background:#0a0d13;transform:translate(15px,-5px);transition:.3s}.phase-icon.totality{background:#080b10;box-shadow:0 0 0 2px #f1d38c,0 0 20px #e8c66e}.phase-icon.totality:after{display:none}.legend-card>p{color:#8995a4;font-size:10px;line-height:1.55;margin:0 0 15px}.visibility-block{margin:0 0 15px;padding:12px;border:1px solid rgba(146,233,220,.12);background:#2c5c6017}.visibility-block>small{display:block;margin-bottom:8px;color:#718092;text-transform:uppercase;font:400 8px/1 DM Mono;letter-spacing:.1em}.visibility-block>div{display:flex;align-items:center;gap:8px}.visibility-block strong{font-size:10px;font-weight:600;color:#dce8e5}.visibility-dot{width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:var(--gold);box-shadow:0 0 9px var(--gold)}.visibility-block p{margin:7px 0 0 14px;color:#718092;font-size:8px;line-height:1.5}.legend-row{display:flex;align-items:center;gap:11px;margin:10px 0}.legend-row strong{display:block;font-size:10px;font-weight:500}.swatch{width:24px;height:8px;border-radius:50%}.swatch.penumbra{background:#2d3e51b8;box-shadow:0 0 0 1px #617388}.swatch.umbra{background:#010203;box-shadow:0 0 0 1px #d8b85f,0 0 8px #d7b65e4d}.timeline-panel{position:fixed;z-index:8;left:4vw;right:4vw;bottom:27px;height:134px;display:grid;grid-template-columns:180px 1fr 175px;gap:28px;align-items:center;padding:22px 25px;border:1px solid rgba(255,255,255,.11);border-radius:4px;background:#080e17d1;-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);box-shadow:0 22px 80px #00000059;transition:opacity .4s,transform .4s}.time-readout{display:flex;align-items:center;justify-content:space-between;border-right:1px solid rgba(255,255,255,.09);padding-right:21px}.time-readout div{display:grid;grid-template-columns:auto 1fr}.time-readout #dateLabel{grid-column:1 / -1;font:400 8px/1 DM Mono;color:#718095;letter-spacing:.13em}.time-readout strong{margin-top:6px;font:300 27px/1 DM Mono;letter-spacing:-.06em}.time-readout .utc{margin:12px 0 0 7px;color:#778393;font:500 8px/1 DM Mono}.time-readout .local-time{grid-column:1 / -1;margin-top:7px;color:#8fbab7;font:400 7px/1.2 DM Mono;letter-spacing:.045em;white-space:nowrap}.mobile-visibility{display:none}.play-button{border:1px solid rgba(255,255,255,.2);background:#ffffff0f;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:.25s}.play-button:hover{background:#ffffff24;transform:scale(1.04)}.play-symbol{width:0;height:0;margin-left:2px;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid #fff}.play-button.playing .play-symbol{width:7px;height:8px;margin:0;border:0;border-left:2px solid #fff;border-right:2px solid #fff}.slider-wrap{height:72px;position:relative}#timeSlider{position:absolute;z-index:4;width:100%;height:24px;top:12px;margin:0;opacity:0;cursor:pointer}.slider-track{position:absolute;top:22px;left:0;right:0;height:2px;background:#ffffff24}.slider-track div{height:100%;width:0;background:linear-gradient(90deg,#75c7c3,#e7c16c);box-shadow:0 0 11px #7bdacf80;position:relative}.slider-track div:after{content:"";position:absolute;right:-6px;top:-5px;width:11px;height:11px;background:#f6e0aa;border:2px solid #18202a;border-radius:50%;box-shadow:0 0 0 2px #e3c776,0 0 12px #c9aa5c}.events{position:absolute;top:15px;left:0;right:0}.events>span{position:absolute;transform:translate(-50%);width:85px;text-align:center}.events>span:first-child{transform:none;text-align:left}.events>span.last{transform:translate(-100%);text-align:right}.events i{display:block;width:1px;height:15px;background:#fff3;margin:7px auto 8px}.events>span:first-child i{margin-left:0}.events>span.last i{margin-right:0}.events b{display:block;color:#aeb7c2;font:400 8px/1 DM Mono}.events small{display:block;color:#556274;font-size:7px;margin-top:4px;white-space:nowrap}.events .peak i{background:var(--gold);box-shadow:0 0 6px var(--gold)}.events .peak b{color:#e9d49c}.quick-actions{display:flex;flex-direction:column;gap:7px}.quick-actions button{text-align:left;border:0;background:none;color:#8894a3;font-size:9px;cursor:pointer;padding:4px 0}.quick-actions button:hover{color:#fff}.quick-actions span{display:inline-block;width:20px;color:#d1b96f}.quick-actions b{font-weight:600}.timezone-note{color:#5f6c7d;font-size:8px;padding:4px 0}.timezone-note span{display:inline-block;width:20px;color:#718b8c}.timezone-note b{font-weight:500}.alignment-copy{opacity:0;pointer-events:none;transform:translateY(14px);top:17vh}.alignment-copy h2{font-size:clamp(42px,4.8vw,70px);line-height:.98;font-weight:300;letter-spacing:-.055em;margin:0 0 28px}.explain-steps article{display:flex;gap:16px;max-width:390px;padding:13px 0;border-top:1px solid rgba(255,255,255,.09);opacity:.33;transition:opacity .3s;cursor:pointer}.explain-steps article.active,.explain-steps article:hover{opacity:1}.explain-steps article>span{padding-top:3px;color:var(--gold);font:400 9px/1 DM Mono}.explain-steps h3{margin:0;font-size:11px;font-weight:600}.explain-steps p{margin:5px 0 0;color:#8691a0;font-size:10px;line-height:1.5}.concept-note{display:flex;gap:12px;max-width:390px;margin:13px 0 15px;padding:11px 12px;border-left:2px solid rgba(231,193,108,.7);background:#e7c16c0e;color:#788595;font-size:9px;line-height:1.5}.concept-note strong{flex:0 0 auto;color:#d8bf7f;text-transform:uppercase;font:500 8px/1.5 DM Mono;letter-spacing:.08em}.concept-note span{display:block}.scale-note{color:#536071;text-transform:uppercase;font:400 8px/1 DM Mono;letter-spacing:.12em}.alignment-mode .hero-copy{opacity:0;pointer-events:none;transform:translateY(-12px)}.alignment-mode .alignment-copy{opacity:1;pointer-events:auto;transform:none}.alignment-mode .legend-card,.alignment-mode .timeline-panel{opacity:0;pointer-events:none;transform:translateY(15px)}.info-panel{position:fixed;z-index:20;top:0;right:0;bottom:0;width:min(440px,100vw);padding:110px 48px 40px;background:#090e16f0;-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);border-left:1px solid rgba(255,255,255,.1);transform:translate(100%);transition:transform .45s cubic-bezier(.7,0,.2,1)}.info-panel.open{transform:none}.info-panel>button{position:absolute;right:35px;top:28px;border:1px solid rgba(255,255,255,.15);background:none;width:34px;height:34px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer}.info-panel h2{font-size:39px;font-weight:300;letter-spacing:-.045em;margin:0 0 22px}.info-panel>p:not(.eyebrow):not(.source){color:#98a4b2;font-size:12px;line-height:1.8}.facts{margin:30px 0;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.09);border-width:1px 0;padding:19px 0}.facts div{border-right:1px solid rgba(255,255,255,.08);padding-left:13px}.facts div:first-child{padding-left:0}.facts div:last-child{border:0}.facts strong{display:block;font:300 18px/1 DM Mono;color:#e3ca8c}.facts small{display:block;margin-top:8px;color:#677487;font-size:8px;line-height:1.4}.safety{display:flex;gap:15px;padding:17px;background:#e7c16c12;border:1px solid rgba(231,193,108,.16)}.safety>span{display:grid;place-items:center;flex:0 0 25px;height:25px;border:1px solid #d4b76d;color:#d4b76d;border-radius:50%;font:500 11px/1 DM Mono}.safety p{margin:0;color:#9b9176;font-size:9px;line-height:1.6}.safety strong{color:#dec98f;display:block;font-size:10px}.source{position:absolute;bottom:30px;color:#505c6c;font:400 8px/1.5 DM Mono}.source a{color:#7b899b;text-decoration:none;border-bottom:1px solid #465364}.loading{position:fixed;inset:0;z-index:50;display:grid;place-content:center;justify-items:center;gap:15px;background:#050a12;transition:opacity .6s,visibility .6s}.loading.hidden{opacity:0;visibility:hidden}.loading span{width:35px;height:35px;border:1px solid rgba(255,255,255,.12);border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite}.loading p{font:400 9px/1 DM Mono;color:#697588;text-transform:uppercase;letter-spacing:.14em}@keyframes spin{to{transform:rotate(360deg)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:900px){.topbar{height:70px;padding:0 20px}.info-button span:first-child{display:none}.hero-copy,.alignment-copy{left:24px;top:13vh;width:calc(100vw - 48px)}.hero-copy h1{font-size:clamp(46px,11vw,70px)}.intro{max-width:330px}.legend-card{right:20px;bottom:185px;width:225px}.timeline-panel{left:14px;right:14px;bottom:14px;height:138px;grid-template-columns:150px 1fr;gap:18px;padding:17px}.quick-actions,.events small{display:none}}@media(max-width:600px){.topbar{justify-content:space-between}.brand{font-size:10px;flex:0 0 auto}.view-switch{top:78px}.hero-copy{top:18vh}.hero-copy .intro{display:none}.hero-copy .hint{margin-top:22px}.legend-card{display:none}.timeline-panel{grid-template-columns:1fr;height:170px;gap:6px;padding:13px 17px}.time-readout{border:0;padding:0}.mobile-visibility{display:block;grid-column:1 / -1;margin-top:5px;max-width:270px;overflow:hidden;text-overflow:ellipsis;color:#d1bc81;white-space:nowrap;font:400 7px/1.2 DM Mono;letter-spacing:.035em}.slider-wrap{height:60px}.events>span:nth-child(2),.events>span:nth-child(4){display:none}.info-panel{padding:100px 28px 35px}.alignment-copy{top:18vh}.alignment-copy h2{font-size:40px}.alignment-copy .explain-steps article{padding:8px 0}.alignment-copy .explain-steps p{font-size:8.5px}.alignment-copy .concept-note{margin:8px 0 10px;padding:8px 10px;font-size:8px}.alignment-mode #app:before{background:linear-gradient(180deg,rgba(3,7,13,.22) 0%,transparent 30%)}.scene-label{padding:4px 6px;font-size:10px;letter-spacing:.07em}.scene-label.long{font-size:9.5px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}