*{box-sizing:border-box}body{margin:0;background:#10151d;color:#eef0f3;font:16px system-ui,sans-serif}header{height:70px;border-bottom:1px solid #303947;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font:24px Georgia,serif}main{display:grid;grid-template-columns:minmax(0,1fr) 350px;max-width:1550px;margin:auto}#stage{position:relative;height:calc(100vh - 70px);min-height:560px;background:radial-gradient(ellipse,#253347,#10151d 70%)}canvas{display:block}aside{padding:32px 28px;border-left:1px solid #303947;overflow:auto;max-height:calc(100vh - 70px)}h1{font:32px Georgia,serif;margin:8px 0 18px}small{font-size:12px;letter-spacing:2px;color:#c5ab70}#time{font-size:38px;font-variant-numeric:tabular-nums}#date{color:#adb9c8;font-size:14px;margin-bottom:24px}button,input,select{font:inherit;color:inherit;border:1px solid #475363;border-radius:6px;background:#1b2532;padding:10px;min-height:42px}button{cursor:pointer}button:hover{background:#33445b}button.active{background:#d6bb80;color:#10151d;border-color:#d6bb80}.row{display:flex;gap:8px}.row>*{flex:1;min-width:0}label{display:block;font-size:14px;color:#bcc8d7;margin:15px 0 8px}label input,label select{display:block;width:100%;margin-top:7px}#geo{width:100%;margin-top:12px}dl{margin-top:26px}dl div{display:flex;justify-content:space-between;border-top:1px solid #303947;padding:12px 0;font-size:14px}dd{margin:0;color:#e6ce97}#message{color:#e6ce97;font-size:14px}details{font-size:14px;line-height:1.6;color:#aebccc}.caption{position:absolute;bottom:12px;width:100%;text-align:center;color:#9caec3;font-size:14px;pointer-events:none}#loading{position:absolute;top:45%;width:100%;text-align:center}@media(max-width:800px){header{padding:0 16px;font-size:20px}main{display:block}#stage{height:65vh;min-height:360px}aside{border-left:0;border-top:1px solid #303947;max-height:none;padding:24px}}

label.toggle{display:flex;align-items:center;gap:10px;line-height:1.4}label.toggle input{width:20px;height:20px;min-height:20px;margin:0;accent-color:#d6bb80}.hint{font-size:13px;line-height:1.4;color:#aebccc;margin:8px 0 18px}

.header-link{display:inline-flex;align-items:center;justify-content:center;padding:10px;color:#e6ce97;text-decoration:none;border:1px solid #475363;border-radius:6px;min-height:42px;white-space:nowrap}.header-link:hover{background:#33445b}.header-link.active{background:#d6bb80;color:#10151d}.site-title{color:inherit;text-decoration:none}.about-main{display:block;max-width:820px;padding:54px 28px 72px}.about-byline{color:#e6ce97;font-size:14px;margin:0 0 16px}.about-main h1{font-size:clamp(32px,5vw,46px);line-height:1.15;margin-bottom:24px}.about-main h2{font:26px Georgia,serif;margin:36px 0 14px}.about-main p{line-height:1.75;color:#bcc8d7}.about-main .about-lead{font-size:20px;color:#eef0f3;line-height:1.6}.about-return{margin-top:36px}.about-return a{color:#e6ce97;text-underline-offset:4px}@media(max-width:420px){.header-actions{flex-wrap:wrap}.header-actions button,.header-link{font-size:13px;padding:8px}.about-main{padding:32px 20px 48px}}

.header-actions{display:flex;gap:10px;font-family:system-ui,sans-serif;font-size:14px}#explainToggle.active{background:#d6bb80;color:#10151d}#explainPanel{padding-bottom:22px;margin-bottom:24px;border-bottom:1px solid #526177}.guide-intro{font-size:14px;color:#bcc8d7;margin:0 0 12px}.guide-parts{display:grid;grid-template-columns:1fr 1fr;gap:7px}.guide-parts button{font-size:14px;padding:8px}#explainTitle{font:24px Georgia,serif;margin:20px 0 8px}#explainText{font-size:15px;line-height:1.55;margin:0}#explainValue{font-size:14px;color:#e6ce97;line-height:1.5;margin-bottom:0}body.explaining #stage canvas{cursor:crosshair}@media(max-width:650px){header{height:auto;min-height:100px;flex-wrap:wrap;gap:10px;padding:14px 16px}.header-actions{width:100%}.header-actions button:first-child{flex:1}#stage{height:58vh}}

.first-visit{padding:14px;border:1px solid #8c794f;border-radius:8px;background:#263344;margin-bottom:22px}.first-visit p{font-size:14px;line-height:1.5;margin:0 0 10px}.first-visit button{font-size:14px}.demos{margin-bottom:24px;padding-bottom:8px;border-bottom:1px solid #303947}.demos h2{font:22px Georgia,serif;margin:0 0 12px}.demo-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.demo-buttons button{font-size:14px}#shareMoment{width:100%;margin-top:12px}#shareStatus:empty{display:none}#shareLink{font-size:14px}#shareFallback{overflow-wrap:anywhere}.about-main a{color:#e6ce97;overflow-wrap:anywhere}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #8de6ff;outline-offset:3px}
/* Keep the clock and location in view; only secondary menu content scrolls. */
.clock-page main{height:calc(100dvh - 70px);grid-template-columns:minmax(0,1fr) 390px}
.clock-page #stage{height:100%;min-height:0;overflow:hidden}
.clock-page aside{display:flex;flex-direction:column;padding:0;min-height:0;max-height:none;overflow:hidden}
.menu-anchor{flex:none;padding:16px 22px;background:#151d28;border-bottom:1px solid #475363}
.location-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.location-heading label{margin:0;color:#e6ce97}
.clock-page #geo{width:auto;margin:0;padding:6px 10px;font-size:14px;min-height:36px}
.clock-page #location,.clock-page #guideChoice{width:100%}
.clock-readout{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.clock-page #time{font-size:30px}
.clock-page #date{margin:2px 0 12px;line-height:1.4}
.menu-views{display:flex;gap:8px}
.menu-views button{flex:1}
.menu-body{flex:1;min-height:0;overflow:auto;padding:18px 22px;overscroll-behavior:contain;scrollbar-gutter:stable}
.time-mode{margin-bottom:16px}
.time-mode button{font-size:14px}
.clock-page #exploreControls{margin-bottom:22px}
.clock-page .demos{margin-top:20px}
.clock-page #locationDetails{padding:12px 0;border-top:1px solid #303947;border-bottom:1px solid #303947}
.clock-page summary{cursor:pointer;color:#bcc8d7;font-size:14px}
.clock-page dl{margin:18px 0}
.clock-page #explainPanel{padding:0;margin:0;border:0}
.menu-title{font:24px Georgia,serif;margin:0 0 12px}
.clock-page .guide-intro{font-size:16px;line-height:1.5}
.clock-page #explainText{font-size:16px}
.reading-label{color:#bcc8d7;font-size:14px;margin:20px 0 4px}
.clock-page #explainValue{margin-top:0;font-size:16px}
.share-section{border-top:1px solid #303947;margin-top:24px;padding-top:8px}
.clock-page #message:empty{display:none}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
[hidden]{display:none!important}
@media(max-width:800px){
 .clock-page header{height:auto;min-height:100px;flex-wrap:wrap;gap:8px;padding:10px 16px;font-size:20px}
 .clock-page .header-actions{width:100%;gap:8px}
 .clock-page .header-actions button:first-child{flex:1}
 /* On phones the clock leads, followed by one naturally scrolling menu. */
 .clock-page main{display:block;height:auto}
 .clock-page #stage{height:58vh;height:58svh;min-height:360px}
 .clock-page aside{display:block;height:auto;overflow:visible;max-height:none;border-left:0;border-top:1px solid #303947}
 .menu-anchor{padding:18px 20px}
 .menu-body{overflow:visible;overscroll-behavior:auto;scrollbar-gutter:auto;padding:20px}
 .clock-page #time{font-size:32px}
 .clock-readout{margin-top:6px}
 .clock-page #date{margin:0 0 8px}
 .caption{font-size:14px;bottom:8px;margin:6px 0}
}