@font-face{font-family:'Paint Ithaca Serif';src:url('./fonts/Fraunces.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'DM Sans';src:url('./fonts/DMSans.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{font:16px/1.5 'DM Sans',system-ui,sans-serif;color:#fff;background:#14181c;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;overflow:hidden}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}
.viewer{position:relative;height:100svh;height:100dvh;min-height:240px;isolation:isolate}
#viewport{position:absolute;inset:0;touch-action:none;outline-offset:-4px}
canvas{display:block;width:100%;height:100%}
.shade{position:absolute;inset:0;background:linear-gradient(180deg,#0006,transparent 23%,transparent 65%,#0007);pointer-events:none}
.app-header{position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:max(12px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) 0 max(22px,env(safe-area-inset-left));pointer-events:none}
h1{display:flex;align-items:center;gap:9px;font:400 25px/1.2 'Paint Ithaca Serif',Georgia,serif;letter-spacing:-1px;margin:0;text-shadow:0 1px 12px #0008}
.logo{height:34px;width:auto;filter:drop-shadow(0 1px 4px #0006)}
.app-header button{pointer-events:auto}
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:12px;border:0;border-radius:50%;background:transparent;color:inherit;flex-shrink:0}
.icon-button svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.icon-button .filled{fill:currentColor;stroke:none}
.icon-button:hover{background:#ffffff16}
button:disabled,[aria-disabled=true]{opacity:.35;cursor:default;pointer-events:none}
button:focus-visible,a:focus-visible,summary:focus-visible,#viewport:focus-visible{outline:2px solid #d6bfeb;outline-offset:3px}
.loading{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.spinner{width:24px;height:24px;border:1.5px solid #fff3;border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.download-status{position:absolute;bottom:max(5px,env(safe-area-inset-bottom));left:20px;right:20px;margin:0;text-align:center;font-size:14px;text-shadow:0 1px 6px #000;pointer-events:none}
.download-status:empty{display:none}
#viewer-error,noscript{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(440px,calc(100% - 40px));padding:20px;border-radius:16px;background:#161a1ee8;text-align:center;font-size:16px}
noscript a{color:inherit}
.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}
dialog{color-scheme:light;color:#4c514b;background:#f5f3ec;width:min(420px,calc(100% - 24px));max-height:calc(100dvh - 40px);padding:16px 24px 24px;border:0;border-radius:24px;box-shadow:0 16px 64px #0005}
dialog::backdrop{background:#0006}
.sheet-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-right:-12px}
h2{font:400 27px/1.2 'Paint Ithaca Serif',Georgia,serif;margin:0}
.sheet-header form{margin:0}
dialog .icon-button:hover{background:#373a2e0c}
dialog p{margin:12px 0;font-size:16px}
.muted{color:#676b5f}
.sheet-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:24px 0}
.sheet-actions button,.sheet-actions a{background:none;border:0;padding:0;color:inherit;font-size:14px;text-decoration:underline;text-underline-offset:4px;min-height:36px;display:inline-flex;align-items:center}
details{border-top:1px solid #373a2e22;padding:16px 0;font-size:14px}
summary{cursor:pointer}
details p{color:#676b5f;font-size:14px}
.credits{font-size:14px;color:#555d4e;text-underline-offset:4px}
@media(max-width:600px){dialog{margin:auto auto 12px;border-radius:24px 24px 18px 18px;padding-bottom:max(24px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.spinner{border-color:#ffffff66}}
.app-header nav{display:flex;gap:2px;pointer-events:auto}
[aria-busy=true]{opacity:.5;pointer-events:none}
.app-header a.icon-button{color:inherit}
/* Walk map page */
.map-page{color-scheme:light;color:#4c514b;background:#f5f3ec}
.map-page .viewer{display:flex;flex-direction:column;overflow:hidden}
#map{flex:1;min-height:45vh;background:#e9e6dc}
.map-page h1{color:#4c514b;text-shadow:none;background:#fff;padding:5px 14px 5px 8px;border-radius:14px;box-shadow:0 2px 10px #0003;pointer-events:auto}
.map-page .logo{filter:none}
.map-page .app-header{z-index:1000}
.map-page .icon-button:hover{background:#373a2e0c}
.locate{position:absolute;right:max(14px,env(safe-area-inset-right));top:calc(45vh - 62px);z-index:1000;background:#fff;box-shadow:0 2px 10px #0003}
.map-page .locate:hover{background:#fff}
.panel{height:55vh;display:flex;flex-direction:column;background:#f5f3ec;border-top:1px solid #373a2e22}
.tabs{display:flex;gap:4px;padding:8px 12px 0}
.tabs button{background:none;border:0;padding:8px 14px;border-radius:999px;color:#676b5f;font-size:15px}
.tabs button[aria-selected=true]{background:#373a2e12;color:#4c514b}
#map-status{margin:6px 22px;font-size:13px}
.panel ol{margin:0;padding:0 12px max(12px,env(safe-area-inset-bottom));list-style:none;overflow:auto;font-size:15px}
.panel li{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px}
.panel li button{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;padding:0;color:inherit;text-align:left;min-height:44px}
.panel li:hover{background:#373a2e0a}
.panel b{font-weight:500}
.panel .muted{font-size:13px;margin-left:auto;text-align:right}
.swatch{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.rank{width:24px;color:#676b5f;font-variant-numeric:tabular-nums}
@media(min-width:900px){.map-page .viewer{flex-direction:row}#map{height:100%}.panel{width:360px;height:100%;border-top:0;border-left:1px solid #373a2e22;padding-top:64px}.locate{top:auto;bottom:max(24px,env(safe-area-inset-bottom));right:384px}}
.replay{position:absolute;left:max(14px,env(safe-area-inset-left));right:76px;top:calc(45vh - 62px);z-index:1000;display:flex;align-items:center;gap:8px;padding:2px 14px 2px 2px;border-radius:999px;background:#fff;box-shadow:0 2px 10px #0003}
.replay input{flex:1;accent-color:#c0392b;min-width:0}
#clock{font-size:13px;font-variant-numeric:tabular-nums;color:#676b5f;white-space:nowrap}
.replay .icon-button svg{fill:currentColor}
@media(min-width:900px){.replay{top:auto;bottom:max(24px,env(safe-area-inset-bottom));right:450px;left:max(24px,env(safe-area-inset-left));max-width:520px}}
.replay .playing svg path{d:path('M7 5h4v14H7zM13 5h4v14h-4z')}