@import "https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700;800&family=Yomogi&display=swap";:root{color:#24231f;font-synthesis:none;--paper:#f4f2ec;--deep:#ece9e1;--muted:#706e67;--green:#52713f;--line:#cfcdc1;background:#f4f2ec;font-family:"M PLUS Rounded 1c",sans-serif}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}a{color:inherit;text-underline-offset:4px}button:focus-visible{outline-offset:5px;outline:2px solid #71945b}a:focus-visible{outline-offset:5px;outline:2px solid #71945b}button{cursor:pointer}button:disabled{cursor:default}[hidden]{display:none!important}body:after{content:"";pointer-events:none;z-index:20;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23918c7b' filter='url(%23n)' opacity='.32' d='M0 0h180v180H0z'/%3E%3C/svg%3E");position:fixed;top:0;bottom:0;left:0;right:0}.page{min-height:100svh;position:relative;overflow:hidden}.masthead{z-index:3;position:absolute;top:38px;left:4.5vw}.wordmark{letter-spacing:-1px;font-size:20px;font-weight:800;text-decoration:none}.wordmark span{color:#e56f54}.wordmark:before{content:"←";color:var(--muted);margin-right:12px;font-size:14px;font-weight:400}h1{letter-spacing:.06em;margin:37px 0 4px;font-size:clamp(25px,2.4vw,36px);font-weight:800}.handwritten{color:var(--green);letter-spacing:.07em;transform-origin:0;margin:0;font-family:Yomogi,cursive;font-size:22px;font-weight:400;transform:rotate(-4deg)}#stage{touch-action:none;isolation:isolate;position:absolute;top:4vh;bottom:14vh;left:24%;right:23%}#stage canvas{z-index:1;display:block;position:relative}#stage:after{content:"";opacity:.14;filter:blur(7px);z-index:0;background:#696956;border-radius:50%;width:45%;height:3.5%;position:absolute;bottom:2%;left:27.5%}#labels-layer{pointer-events:none;z-index:2;position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden}.city-label{white-space:nowrap;paint-order:stroke fill;-webkit-text-stroke:3px var(--paper);color:#24231f;font-size:11px;font-weight:700;position:absolute;top:0;left:0}.selected-place{z-index:3;border-top:1px solid var(--line);width:225px;padding-top:18px;position:absolute;top:36%;left:4.5vw}.place-heading h2{margin:0;font-size:24px;font-weight:700}.place-heading>span{color:var(--muted);font-family:Yomogi,cursive;font-size:14px}.local-time{color:var(--muted);margin:12px 0 4px;font-size:12px}.weather-reading{align-items:center;gap:20px;margin:10px 0 0;display:flex}.weather-mark{color:#71945b;width:54px;display:block}.weather-mark svg{width:54px;height:56px}.temperature{letter-spacing:-2px;font-size:52px;font-weight:500;line-height:1.15}.temperature small{letter-spacing:0;margin-left:5px;font-size:18px}.condition{margin:12px 0 24px;font-size:14px}dl{gap:28px;margin:0;display:flex}dl div{flex-direction:column;gap:7px;display:flex}dt{color:var(--muted);font-size:11px}dd{margin:0;font-size:13px}.cached-note{color:var(--muted);margin-top:20px;font-size:11px}.world-sheet{z-index:4;flex-direction:column;width:205px;max-height:55vh;display:flex;position:absolute;top:31%;right:4vw}.world-sheet h2{margin:0 0 16px;font-size:16px;font-weight:700}.world-sheet header{justify-content:space-between;align-items:baseline;display:flex}#city-list{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ccc9bc transparent;padding-right:9px;overflow-y:auto}.city-row{border:0;border-bottom:1px dashed var(--line);text-align:left;background:0 0;grid-template-columns:7px 1fr auto;align-items:center;gap:5px 9px;width:100%;padding:13px 0;display:grid}.city-dot{background:#a4ac96;border-radius:50%;width:5px;height:5px}.city-name{white-space:nowrap;font-size:12px}.row-temp{font-size:17px}.row-condition{color:var(--muted);grid-column:2/4;font-size:10px}.city-row:hover .city-name,.city-row[aria-pressed=true] .city-name{color:var(--green)}.city-row[aria-pressed=true] .city-dot{background:#e56f54}.city-row:focus-visible{outline-offset:-2px}.under-globe{text-align:center;pointer-events:none;position:absolute;bottom:10vh;left:28%;right:27%}.sky-time{color:#52713f;margin:0 0 14px;font-family:Yomogi,cursive;font-size:19px}.gesture-hint{color:var(--muted);letter-spacing:.05em;margin:0;font-size:10px}.footer{color:var(--muted);justify-content:space-between;gap:20px;font-size:10px;display:flex;position:absolute;bottom:24px;left:4.5vw;right:4vw}.footer p{margin:0}.footer a{text-decoration-color:#c1bfb2}.footer .little-note{color:var(--green);font-family:Yomogi,cursive;font-size:15px}#sheet-toggle,#sheet-close{display:none}#loading{background:var(--paper);z-index:30;flex-direction:column;justify-content:center;align-items:center;gap:25px;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}#loading-text{color:var(--green);font-family:Yomogi,cursive;font-size:23px}.progress-track{background:#dfdfd2;width:220px;height:2px}#progress-fill{background:#71945b;width:0;height:100%;transition:width .2s}#load-error{text-align:center;color:var(--muted);font-size:13px}#load-error-detail{overflow-wrap:anywhere;max-width:min(520px,86vw);margin-top:10px;font-size:11px;line-height:1.6}.no-weather{font-size:30px}@media (min-width:1600px){#stage{left:21%;right:22%}.selected-place{width:255px}.world-sheet{width:240px}}@media (max-width:1050px) and (min-width:761px){.masthead{left:3vw}.selected-place{width:180px;left:3vw}.world-sheet{width:175px;right:3vw}#stage{left:22%;right:21%}.temperature{font-size:43px}h1{font-size:25px}}@media (max-width:760px){.page{min-height:100svh;overflow:hidden}.masthead{top:20px;left:24px}.wordmark{font-size:17px}h1{margin:22px 0 3px;font-size:25px}.handwritten{font-size:18px}#stage{height:clamp(285px,48svh,480px);top:120px;bottom:auto;left:0;right:0}#stage:after{width:40%;bottom:4%;left:30%}.selected-place{width:auto;padding-top:13px;top:calc(120px + clamp(285px,48svh,480px));left:25px;right:25px}#city-card{grid-template-columns:1fr auto;column-gap:20px;display:grid}.place-heading{grid-area:1/1}.place-heading h2{font-size:21px;display:inline}.place-heading>span{margin-left:10px;font-size:13px}.local-time{grid-area:2/1;margin:6px 0}.weather-reading{grid-area:1/2/4;gap:12px;margin:0}.temperature{font-size:42px}.weather-mark,.weather-mark svg{width:40px}.condition{grid-area:3/1;margin:4px 0 0;font-size:12px}dl{grid-area:4/1/auto/3;gap:24px;margin-top:14px}dl div{flex-direction:row;align-items:baseline;gap:8px}.cached-note{grid-column:1/3;margin:8px 0 0}.under-globe{text-align:right;width:120px;top:78px;bottom:auto;left:auto;right:24px}.sky-time{font-size:14px;line-height:1.8}.gesture-hint{display:none}.footer{margin-top:calc(312px + clamp(285px,48svh,480px));padding:0 24px 82px;font-size:9px;line-height:1.9;display:block;position:relative;bottom:auto;left:auto;right:auto}.little-note{display:none}.footer p{margin-bottom:3px}#sheet-toggle{z-index:7;background:var(--deep);border:0;border-top:1px solid var(--line);width:100%;padding:15px 24px max(16px,env(safe-area-inset-bottom));text-align:left;font-size:13px;display:block;position:fixed;bottom:0;left:0;right:0}#sheet-toggle span{float:right;color:var(--green);font-family:Yomogi,cursive}.world-sheet{background:var(--paper);z-index:6;visibility:hidden;border-top:1px solid #b9baa8;width:auto;height:68svh;max-height:none;padding:25px 26px 78px;transition:transform .35s;position:fixed;top:auto;bottom:0;left:0;right:0;transform:translateY(100%)}.world-sheet.open{visibility:visible;transform:translateY(0)}#sheet-close{color:var(--muted);background:0 0;border:0;font-size:12px;text-decoration:underline;display:block}.city-row{grid-template-columns:6px 1fr 40px 115px;padding:16px 0}.row-condition{grid-column:4;font-size:10px}.city-name{font-size:13px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important}}#sheet-toggle{touch-action:none}.places-scroll{overscroll-behavior:contain;scrollbar-width:thin;padding-right:8px;overflow-y:auto}#city-list{padding-right:0;overflow:visible}.world-sheet .landmarks-heading{margin:28px 0 10px}.landmark-row{border:0;border-bottom:1px dashed var(--line);text-align:left;background:0 0;width:100%;padding:13px 0;font-size:12px;display:block}.landmark-row:hover,.landmark-row[aria-pressed=true]{color:var(--green)}.landmark-row:disabled{opacity:.45}.landmark-description{font-size:13px;line-height:1.9}.landmark-hint{color:var(--muted);font-size:10px;line-height:1.8}.landmark-label{color:#52713f;font-family:Yomogi,cursive;font-size:13px}@media (max-width:760px){.masthead{height:170px;padding:20px 24px 12px;position:relative;top:auto;left:auto}#stage{width:100%;height:clamp(300px,44svh,420px);position:relative;top:auto}.selected-place{width:calc(100% - 50px);min-height:153px;margin:0 25px;position:relative;top:auto;left:auto;right:auto}.footer{margin-top:24px}.landmark-description,.landmark-hint{grid-column:1/3;margin:8px 0}.landmark-row{min-height:44px}.selected-place:has(.landmark-description) .place-heading{grid-column:1/3}.selected-place:has(.landmark-description) h2{font-size:19px}}#stage{isolation:isolate;width:100%;height:100svh;position:fixed;top:0;bottom:0;left:0;right:0}#stage:after{display:none}.masthead,.selected-place,.world-sheet,.under-globe,.footer{background:0 0;border-radius:8px}.close-view .masthead,.close-view .selected-place,.close-view .world-sheet,.close-view .under-globe{background:#f4f2ecdb}.masthead{margin:-12px -16px;padding:12px 16px}.selected-place{width:253px;margin-left:-14px;padding:18px 14px 14px}.world-sheet{width:233px;margin-right:-14px;padding:14px}.under-globe{z-index:3;padding:10px;bottom:76px;left:33%;right:33%}.footer{z-index:3;width:max-content;max-width:calc(100% - 48px);padding:0;bottom:18px;right:auto}@media (max-width:1050px) and (min-width:761px){.selected-place{width:200px}.world-sheet{width:195px}}@media (max-width:760px){.page{height:100svh;min-height:680px}.masthead{width:max-content;max-width:calc(100% - 48px);height:auto;margin:-10px;padding:10px;position:absolute;top:20px;left:24px}.selected-place{width:auto;min-height:0;margin:0;padding:12px;position:absolute;top:auto;bottom:88px;left:16px;right:16px}.under-globe{width:auto;max-width:80%;padding:4px 8px;top:160px;bottom:auto;left:auto;right:18px}.sky-time{margin:0}.footer{width:auto;max-width:none;margin:0;padding:3px 5px;font-size:8px;line-height:1.5;position:absolute;bottom:53px;left:20px;right:20px}.world-sheet{background:#f4f2ecf7;width:auto;margin:0;padding:25px 26px 78px}.landmark-description{margin:5px 0;font-size:12px;line-height:1.6}.landmark-hint{margin:3px 0}}.return-globe{text-underline-offset:4px;grid-column:1/-1;margin:8px 0;font-size:12px;text-decoration:underline;display:inline-block}
