/* Observatory: quiet controls, a clear focal point, responsive safe areas. */
:root{--ink:#e8edf3;--dim:#929eae;--accent:#e6bd79;--panel:rgba(12,17,25,.83);--edge:rgba(205,219,239,.14);--cardbg:rgba(12,17,25,.94)}
body{font-family:Inter,"Segoe UI",system-ui,sans-serif;background:#03060c}
body[data-theme="solar"]{--ink:#e8edf3;--dim:#929eae;--accent:#e6bd79;--panel:rgba(12,17,25,.83);--edge:rgba(205,219,239,.14);--cardbg:rgba(12,17,25,.94)}
body[data-design="11"] .chip:nth-child(even),body[data-design="11"] .chip.on{transform:none}
body[data-design="11"] button,body[data-design="11"] #title,body[data-design="11"] #tzbar,body[data-design="11"] #sunGrp,body[data-design="11"] #tbar,body[data-design="11"] #clockBox,body[data-design="11"] #statline,body[data-design="11"] #tzPin,body[data-design="11"] #card h2{transform:none;box-shadow:none;border:1px solid var(--edge);border-radius:8px;text-shadow:none}
body[data-design="11"] #title{border:0;background:none;font-size:12px;letter-spacing:.32em;font-weight:400;padding:0}
#topbar{position:relative;width:calc(100% - 64px);justify-content:space-between;margin-top:25px;gap:18px}
#topbar{margin-left:auto;margin-right:auto}
#hud{align-items:stretch}#wmGrid{margin:23px auto 0;gap:5px;padding:0;max-width:94vw}
body[data-design="11"] .chip{font-size:10px;letter-spacing:.1em;border:0;background:transparent;padding:9px 12px;color:#a6b0be}
body[data-design="11"] .chip{box-shadow:none;border-radius:5px;font-weight:500;transform:none}
body[data-design="11"] #tzGo,body[data-design="11"] #tzSel{box-shadow:none;transform:none;border:1px solid var(--edge);border-radius:5px;background:#121c28;color:var(--ink);font-size:11px;font-weight:400}
body[data-design="11"] .chip.on{background:#dcb77812;color:var(--accent);box-shadow:inset 0 -1px var(--accent)}
body[data-design="11"] .chip:hover{background:#ffffff09;transform:none}
#tzbar{display:none!important}body[data-mode="clocks"] #tzbar{display:flex!important}
#sunGrp{position:fixed;top:132px;right:32px;padding:8px 12px;gap:10px;background:var(--panel)!important}
#sunGrp{font-size:10px}#sunGrp .daylab{font-size:8px}#nowBtn{border-color:transparent!important}
.daybtn{font-size:11px!important;padding:7px 9px!important}
#sidepanel{display:none}body.settings-open #sidepanel{display:flex;left:auto;right:34px;top:175px;transform:none;background:var(--cardbg);padding:16px;border:1px solid var(--edge);border-radius:12px}
#sidepanel .swgrp.themes .swrow{grid-template-columns:repeat(7,auto)}.tsw{width:22px;height:22px!important;border:0!important;border-radius:50%!important}
#modes{display:flex;gap:5px;pointer-events:auto}#modes button,#settingsBtn{font:11px inherit;color:#929eae;background:none;border:0;padding:9px 14px;letter-spacing:.06em;cursor:pointer}
#modes button[aria-pressed="true"]{background:#ffffff0c;color:var(--ink)}#settingsBtn{pointer-events:auto}
#heroCopy{position:fixed;left:40px;top:145px;pointer-events:none;transition:opacity .5s}#heroCopy span{font-size:10px;letter-spacing:.28em;color:var(--accent)}#heroCopy h1{font:300 clamp(32px,3vw,48px)/1.1 Georgia,serif;letter-spacing:-.03em;margin:13px 0}#heroCopy p{font-size:12px;line-height:1.8;color:#8795a7;max-width:250px}
body.has-focus #heroCopy,body[data-mode="clocks"] #heroCopy,body[data-mode="tour"] #heroCopy{opacity:0}
#card{right:42px;bottom:160px;max-width:310px;text-align:left;background:linear-gradient(135deg,#0b101cd9,#0b101c80);padding:23px;border:1px solid #d3e0f013;border-radius:12px;backdrop-filter:blur(14px)}
body[data-design="11"] #card h2{font:300 33px/1.1 Georgia,serif;letter-spacing:-.025em;background:none;border:0;padding:0;margin:0 0 16px;color:#edf1f6}
#card .flist{font-size:13px;line-height:1.7;color:#c1cad7;text-shadow:none}#card .flist .stat{font-size:11px;color:#8996a9;margin-top:10px}#card .source{display:block;font-size:9px;color:#788598;margin-top:13px;text-decoration:none}
#bottomRow{bottom:40px}body[data-design="11"] #tbar{padding:9px 14px;background:#0b111be8;gap:10px;border-radius:12px;box-shadow:0 12px 45px #0005}
body[data-design="11"] #tbar button{padding:8px 12px;font-size:10px;background:transparent;border-color:transparent;color:#b5becc}body[data-design="11"] #tbar button:hover{background:#ffffff0c;transform:none}
#tbar .ck,#tbar>label,#tbar .sep,#fps,#visits,#statline{display:none}body.settings-open #tbar .ck,body.settings-open #tbar>label{display:inline-flex}#statRow{bottom:103px}body[data-design="11"] #clockBox{border:0;background:none;font-size:10px;letter-spacing:.04em;color:#9aa8b8}
#hint{display:none}#credits{bottom:10px;font-size:8px;opacity:.45}#scaleNote{position:fixed;right:25px;bottom:12px;font-size:9px;color:#768298;pointer-events:none;letter-spacing:.025em}
#vignette{opacity:.5}#grade{opacity:.15}.lbl{font-size:9px;letter-spacing:.12em;text-shadow:0 1px 5px #000;opacity:.7}
body[data-design="11"] #grade{display:none}
#cityDock{display:none;position:fixed;left:32px;top:155px;width:210px;z-index:14;gap:8px;flex-direction:column}body[data-mode="clocks"] #cityDock{display:flex}.cityClock{display:grid;grid-template-columns:1fr auto;text-align:left;gap:5px;background:#0a111acc;color:#dce3ec;border:1px solid var(--edge);border-radius:10px;padding:13px 15px;cursor:pointer;backdrop-filter:blur(14px)}.cityClock.active{border-color:#dbb77880;background:#161c24df}.cityClock b{font-size:11px;font-weight:500}.cityClock time{grid-column:1;font-size:22px;font-weight:300;font-variant-numeric:tabular-nums}.cityClock small{font-size:9px;color:#8d9caf;grid-column:1/-1}.cityClock span{font-size:9px;color:var(--accent)}
body[data-design="11"] #tzPin{padding:6px 10px;background:#0a111ada;border:1px solid #e6bd7940;border-radius:6px}#tzPin .pz{font-size:9px;color:#c7ab7e}#tzPin .pt{font-size:15px;font-weight:400}
#tourControls{display:none;align-items:center;gap:9px}body[data-mode="tour"] #tourControls{display:flex}#tourProgress{font-size:10px!important;min-width:90px;color:var(--accent)!important}#tourTrack{position:fixed;left:0;bottom:0;height:2px;background:var(--accent);width:0;z-index:20;transition:width .6s}
#accuracy{position:fixed;inset:0;margin:auto;width:min(560px,90vw);max-height:80vh;background:#111a26;color:#c8d2df;border:1px solid #6e819344;border-radius:16px;padding:30px;line-height:1.8;z-index:30}#accuracy::backdrop{background:#02050ab8;backdrop-filter:blur(6px)}#accuracy h2{font:32px Georgia,serif;color:#e8edf3}#accuracy a{color:#dcbc86}#accuracy button{float:right;background:none;color:#fff;border:1px solid #ffffff30;padding:8px 12px;cursor:pointer}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent)!important;outline-offset:4px}
body.zen #heroCopy,body.zen #cityDock,body.zen #scaleNote,body.zen #tourTrack{display:none!important}
@media(max-width:700px){
 #topbar{width:calc(100% - 28px);margin-top:17px;gap:10px}body[data-design="11"] #title{font-size:10px;letter-spacing:.19em}#modes{gap:0}#modes button{font-size:10px;padding:8px 9px}#settingsBtn{font-size:0;padding:8px}#settingsBtn:after{content:'⋯';font-size:20px}
 #wmGrid{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;width:calc(100% - 28px);max-width:none;margin:14px auto 0;padding-bottom:5px;scrollbar-width:none}body[data-design="11"] .chip{padding:9px 10px;font-size:9px;flex-shrink:0}
 #heroCopy{left:25px;top:130px}#heroCopy h1{font-size:34px}#heroCopy p{font-size:11px;max-width:205px}
 #card{left:18px;right:18px;bottom:140px;width:auto;max-width:none;padding:16px 18px;max-height:155px;overflow:auto;border-radius:12px}body[data-design="11"] #card h2{font-size:25px;margin-bottom:7px}#card .flist{font-size:12px;line-height:1.5}#card .flist .stat{font-size:10px;margin-top:5px}#card .source{font-size:8px;margin-top:8px}
 #bottomRow{bottom:30px;width:calc(100% - 24px);max-width:none}body[data-design="11"] #tbar{width:100%;padding:8px;gap:4px;justify-content:center;border-radius:12px}body[data-design="11"] #tbar button{font-size:10px;padding:8px}#fsBtn{display:none}#speed{width:65px}#rate{font-size:9px!important}#statRow{bottom:112px;width:100%;gap:0}#clockBox{max-width:100%;font-size:9px!important}#scaleNote{right:0;left:0;bottom:9px;text-align:center;font-size:8px}#credits{display:none}
 #tzbar{order:3;width:100%;justify-content:center;padding:6px!important}#tzSel{max-width:190px;font-size:11px}#sunGrp{top:145px;right:15px;left:15px;justify-content:center;padding:5px;background:#0b111abf!important}#sunGrp .daylab{font-size:8px}
 #cityDock{left:14px;right:14px;top:auto;bottom:145px;width:auto;flex-direction:row;overflow-x:auto;gap:6px}.cityClock{min-width:135px;padding:10px}.cityClock time{font-size:20px}.cityClock small{font-size:8px}body[data-mode="clocks"] #card{display:none}
 body.settings-open #sidepanel{right:14px;top:105px;padding:13px}body.settings-open #tbar{max-height:190px;overflow:auto}#tourProgress{min-width:70px}#tourControls{gap:0}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media(max-width:700px){
 body[data-mode="clocks"] #wmGrid{display:none}
 #statRow{bottom:130px}
 #card{bottom:156px}
 #cityDock{bottom:160px}
}