:root{color-scheme:light;--blue:#216ce0;--ink:#132a43;--muted:#41576d;--background:#f4f8fc;--outline:#bccbd9;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--background)}
*{box-sizing:border-box}body{margin:0}main{max-width:1180px;margin:auto;padding:32px 24px}header,.map-heading,.controls,.settings{display:flex;align-items:center;justify-content:space-between;gap:20px}header{margin-bottom:24px;flex-wrap:wrap}.eyebrow{color:var(--blue);font-size:12px;letter-spacing:2px;font-weight:750;margin:0 0 8px}h1{font-size:36px;margin:0;letter-spacing:-1.2px}h1 span{font-size:22px;font-weight:450;margin-left:10px;color:var(--muted)}h2{margin:0;font-size:20px}.card{background:white;border:1px solid var(--outline);border-radius:24px;overflow:hidden;box-shadow:0 12px 42px #163d6410}.map-heading{padding:24px 26px;align-items:flex-start}.map-heading>div{min-width:0}.map-heading p{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.5}.displayed-time{flex-shrink:0;max-width:45%;text-align:right}.displayed-time span{display:block;color:var(--muted);font-size:12px;margin-bottom:5px}#time{color:var(--blue);font-size:19px;font-variant-numeric:tabular-nums}.map{position:relative;background:#eaf2f8;height:clamp(360px,58vw,560px)}canvas{display:block;width:100%;height:100%}.zoom{position:absolute;right:18px;top:18px;display:flex;flex-direction:column;gap:6px}.zoom button{font-size:23px;min-width:48px;padding:5px}button{font:inherit;font-weight:650;background:white;color:var(--blue);border:1px solid #63778a;padding:11px 18px;min-height:48px;border-radius:12px;cursor:pointer}button:hover:not(:disabled){background:#edf4ff}button:disabled{background:#e0eaf4;color:#41576d;cursor:default}button:focus-visible,input:focus-visible{outline:3px solid var(--blue);outline-offset:3px}.controls{padding:20px 26px 0;flex-wrap:wrap}#play{background:var(--blue);color:white;min-width:112px}#play:focus-visible{outline-color:var(--ink)}#play:disabled{background:#e0eaf4;color:#41576d}input[type=range]{accent-color:var(--blue);min-height:48px;cursor:pointer;max-width:100%}input:disabled{cursor:default}#timeline{flex:1;min-width:80px}#range{font-size:13px;color:var(--muted);line-height:1.5;overflow-wrap:anywhere}.settings{padding:6px 26px;font-size:13px;color:var(--muted);flex-wrap:wrap}.settings label{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.settings input{width:130px}.settings p{line-height:1.5}.legend{display:flex;gap:12px;flex-wrap:wrap;padding:12px 26px;font-size:13px}.legend span{display:flex;gap:5px;align-items:center}.legend i{width:15px;height:15px;flex-shrink:0;border-radius:4px;display:inline-block;border:1px solid #63778a}.legend .undetect{background:repeating-conic-gradient(#fff 0 25%,#e4edf5 0 50%) 0/8px 8px}.explanation,.map-notice{font-size:13px;line-height:1.7;color:var(--muted);padding:0 26px 12px;margin:0}.map-notice:not(:empty){padding-top:16px;color:#672b00}.map-notice:empty{display:none}footer{text-align:center;color:var(--muted);font-size:12px;line-height:1.9;margin-top:22px}a{color:var(--blue);text-underline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:760px){main{padding:20px 12px}h1{font-size:31px}h1 span{font-size:20px}.map-heading{padding:18px;flex-direction:column;align-items:flex-start;gap:10px}.displayed-time{max-width:100%;text-align:left}.controls{padding:16px 14px 0;gap:10px}#range{width:100%;text-align:center}.settings{padding:6px 16px;flex-direction:column;align-items:flex-start;gap:0}.legend{padding:10px 16px;gap:8px}.explanation,.map-notice{padding:0 16px 12px}footer{text-align:left;padding:0 5px}}