@import"https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap";:root{font-family:Noto Sans JP,sans-serif;color:#344431;background:#e9eee6;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}header{position:absolute;z-index:2;top:0;left:0;width:100%;height:104px;padding:0 4%;display:flex;align-items:center;justify-content:space-between}.brand{color:inherit;text-decoration:none;font:700 17px/1.5 Arial,sans-serif;letter-spacing:2px;display:grid;grid-template-columns:36px auto;column-gap:10px}.brand-icon{grid-row:span 2;align-self:center;width:36px;height:36px}.edition{font-size:8px;font-weight:400;letter-spacing:2px;color:#7d8976}.location{font:10px Arial,sans-serif;letter-spacing:1.7px;display:flex;gap:12px;align-items:center}.location span{color:#8e9887;font-size:9px;margin-left:12px}i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#7c9265}main{height:calc(100svh - 66px);min-height:650px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 62% 45%,#f6f7ed,#e9eee6 62%,#e2e8df)}.intro{position:absolute;z-index:1;left:5%;top:155px;pointer-events:none}.eyebrow{font:9px Arial,sans-serif;letter-spacing:2.5px;color:#87917b}h1{font-size:clamp(30px,3vw,46px);line-height:1.65;letter-spacing:.12em;font-weight:500;margin:25px 0 18px}.description{font-size:11px;line-height:2.2;letter-spacing:.09em;color:#7b8573}.tag{display:inline-flex;gap:9px;align-items:center;border:1px solid #cbd3c3;border-radius:20px;padding:8px 13px;margin-top:16px;font-size:10px;letter-spacing:1px}#viewport{position:absolute;left:22%;top:8%;width:78%;height:90%;touch-action:none}canvas{display:block;width:100%;height:100%;outline:none}.place-card{position:absolute;bottom:39px;left:5%;width:310px;background:#f7f8f0dd;border:1px solid #fff9;border-radius:3px;padding:20px 23px;box-shadow:0 8px 30px #45523c05}.card-index{font:8px Arial,sans-serif;letter-spacing:2px;color:#99a28c}h2{font-size:15px;font-weight:500;letter-spacing:1px;margin:13px 0}h2 span{font:8px Arial,sans-serif;margin-left:9px;letter-spacing:1px;color:#87927e}.place-card p{font-size:9px;line-height:2;color:#85907b}.card-bottom{border-top:1px solid #dfe5d6;padding-top:12px;margin-top:16px;display:flex;justify-content:space-between;font-size:8px;color:#8d9783}.view-tools{position:absolute;right:3.5%;top:42%;display:flex;flex-direction:column;align-items:center;background:#f8faf3dc;border:1px solid #fff8;border-radius:30px;padding:9px 5px;box-shadow:0 5px 20px #45523c08}.view-tools button{border:0;background:none;color:#65775b;font-size:24px;width:40px;height:43px;cursor:pointer;border-radius:50%;transition:background .2s}.view-tools button:hover,.view-tools button[aria-pressed=true]{background:#dce5d3}.view-tools span{height:1px;width:18px;background:#dce2d5;margin:5px}button:focus-visible,a:focus-visible{outline:2px solid #667f50;outline-offset:4px}.compass{position:absolute;bottom:35px;right:5%;width:48px;text-align:center;font:9px Arial,sans-serif;color:#8c9980}.compass svg{width:48px;height:48px}footer{height:66px;padding:0 4%;border-top:1px solid #d6dece;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:9px;color:#8b9681;background:#e9eee6}.footer-title{font:8px Arial,sans-serif;letter-spacing:1.5px}.instructions{display:flex;gap:24px;font-size:9px}.version{font:8px Arial,sans-serif;letter-spacing:1px}.version b{font-weight:400;margin-left:12px;color:#516647}.error{margin:180px auto;max-width:400px;padding:30px;background:#fff;font-size:14px}@media(min-width:1600px){.intro{top:20%}#viewport{left:18%;width:82%}}@media(max-width:800px){header{height:80px}.location{display:none}.intro{top:110px}.eyebrow{font-size:8px}h1{font-size:30px;margin-top:18px}.description{font-size:10px}.place-card{width:270px;padding:16px;bottom:25px}.instructions{gap:12px;font-size:8px}.footer-title{display:none}.version{font-size:7px}#viewport{left:10%;width:90%}}@media(max-width:550px){main{height:calc(100svh - 60px);min-height:760px}header{padding:0 6%}.brand{font-size:14px}.intro{top:104px;left:7%}h1{font-size:29px;line-height:1.55}.description{margin-top:0}.tag{margin-top:6px}.eyebrow{font-size:7px}#viewport{left:0;top:29%;width:100%;height:58%}.place-card{left:7%;bottom:25px;width:255px;padding:13px 17px}.place-card p{font-size:8px}.card-index{font-size:7px}.card-bottom{display:none}.place-card h2{margin:9px 0;font-size:13px}.view-tools{right:4%;top:39%;transform:scale(.85);transform-origin:right center}.compass{bottom:35px;right:7%;width:30px}.compass svg{width:30px}footer{height:60px;justify-content:center;padding:0 12px}.instructions{gap:12px;font-size:8px}.version{display:none}}.weather-panel{position:absolute;z-index:3;right:4%;top:108px;width:245px;padding:17px 19px;border:1px solid #ffffff80;background:#f7f8f0e8;border-radius:12px;box-shadow:0 8px 30px #233d3310;color:#455743;font-size:10px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.weather-heading{display:flex;justify-content:space-between;gap:10px;align-items:center;font:8px Arial,sans-serif;letter-spacing:1.2px;color:#71836c}.weather-heading span:last-child{font-family:inherit;letter-spacing:0;border:1px solid #aab79c;border-radius:12px;padding:3px 7px}.weather-summary{font-size:18px;line-height:1.5;margin-top:10px;letter-spacing:.03em}#weather-detail{font-size:9px;line-height:1.7;min-height:30px;margin:5px 0 9px;color:#63755e}.weather-controls,.weather-manual{display:flex;align-items:end;gap:10px}.weather-panel label{display:grid;gap:4px;flex:1;font-size:9px}.weather-panel select{min-width:0;width:100%;padding:6px;border:1px solid #c4cfba;background:#fff9;border-radius:5px;color:#41553b;font:10px Noto Sans JP,sans-serif;cursor:pointer}.weather-panel button{padding:7px 9px;border:1px solid #c4cfba;background:#fff9;border-radius:5px;color:#41553b;font-size:10px;cursor:pointer;white-space:nowrap}.weather-panel button:disabled{opacity:.5;cursor:wait}.weather-manual{margin-top:9px}.weather-manual[hidden]{display:none}.weather-credit{font-size:8px;line-height:1.7;color:#74856c;margin:11px 0 0}.weather-credit a{color:inherit;text-underline-offset:2px}.weather-panel[data-status=stale] #weather-detail,.weather-panel[data-status=unavailable] #weather-detail{color:#8b6639}.weather-panel select:focus-visible{outline:2px solid #819b6b;outline-offset:2px}main,footer,body,.place-card,.view-tools{transition:background 1.2s,color 1.2s}body[data-weather=cloudy] main,body[data-weather=rain] main,body[data-weather=snow] main,body[data-weather=storm] main,body[data-weather=fog] main{background:radial-gradient(ellipse at 62% 45%,#dde4df,#b8c6c9)}body[data-time=night]{background:#172b40;color:#e2e8dc}body[data-time=night] main{background:radial-gradient(ellipse at 62% 45%,#30465b,#172b40 75%)}body[data-time=night] footer{background:#172b40;border-color:#405464;color:#afbdc6}body[data-time=night] .description,body[data-time=night] .eyebrow,body[data-time=night] .edition,body[data-time=night] .location span{color:#b3c2c7}body[data-time=night] .tag{border-color:#718395}body[data-time=night] .place-card,body[data-time=night] .weather-panel{background:#20364bed;border-color:#637a8b66;color:#dce3dc}body[data-time=night] .place-card p,body[data-time=night] .place-card h2 span,body[data-time=night] .card-index,body[data-time=night] .card-bottom,body[data-time=night] .weather-heading,body[data-time=night] #weather-detail,body[data-time=night] .weather-credit{color:#b4c4ce}body[data-time=night] .weather-panel select,body[data-time=night] .weather-panel button{background:#344d60;color:#e2e9e5;border-color:#61798b}body[data-time=night] .view-tools{background:#284258ed;border-color:#637a8b66}body[data-time=night] .view-tools button{color:#d6e4df}body[data-time=night] .view-tools button:hover,body[data-time=night] .view-tools button[aria-pressed=true]{background:#49677b}body[data-time=night] .weather-panel[data-status=stale] #weather-detail,body[data-time=night] .weather-panel[data-status=unavailable] #weather-detail{color:#e2c592}body[data-time=night] .version b{color:#c4d4c3}@media(max-width:800px){.weather-panel{right:4%;top:91px;width:220px;padding:13px}.weather-summary{font-size:16px}}@media(max-width:550px){main{min-height:1030px}.weather-panel{top:325px;left:7%;right:auto;width:86%;padding:12px 15px}.weather-summary{margin-top:5px}.weather-heading{float:right;margin-top:4px;gap:7px}.weather-heading>span:first-child{display:none}#weather-detail{min-height:0;margin-bottom:7px}.weather-credit{margin-top:7px}.weather-credit br{display:none}.weather-credit br:after{content:" "}.weather-controls{width:100%}#viewport{top:50%;height:40%;left:0;width:100%}.view-tools{top:62%}.place-card{bottom:14px}.compass{bottom:35px}}@media(prefers-reduced-motion:reduce){main,footer,body,.place-card,.view-tools{transition:none}}.place-card{display:none}.weather-panel{inset:auto auto 28px 5%;width:290px}@media(max-width:800px){.weather-panel{inset:auto auto 25px 5%;width:255px}.intro{top:100px}h1{margin-top:16px}}@media(max-width:550px){.weather-panel{top:325px;bottom:auto;left:7%;width:86%}}.event-panel{position:absolute;z-index:3;right:4%;top:105px;width:250px;padding:14px 16px;background:#f7f8f0ed;border:1px solid #ffffff80;border-radius:12px;color:#455743;box-shadow:0 8px 30px #233d3310}.event-heading{font-size:9px;letter-spacing:.08em;color:#71836c}.event-actions{display:flex;gap:8px;margin-top:10px}.event-panel button{padding:8px 9px;border:1px solid #b5c3a9;border-radius:6px;background:#fff9;color:inherit;font-size:10px;cursor:pointer}.event-toggle[aria-pressed=true]{background:#dce5d3;border-color:#91a47e}.event-status{font-size:9px;margin:9px 0 0;line-height:1.6}body[data-time=night] .event-panel{background:#20364bed;border-color:#637a8b66;color:#dce3dc}body[data-time=night] .event-heading{color:#b4c4ce}body[data-time=night] .event-panel button{background:#344d60;border-color:#61798b}body[data-time=night] .event-toggle[aria-pressed=true]{background:#49677b}@media(max-width:800px){.event-panel{right:4%;top:90px;width:230px}}@media(max-width:550px){main{min-height:1150px}.event-panel{top:530px;left:7%;right:auto;width:86%}.event-actions{margin-top:8px}#viewport{top:57%;height:35%}.view-tools{top:67%}}.control-panel{position:absolute;z-index:3;left:5%;bottom:28px;width:300px;color:#455743;background:#f7f8f0ed;border:1px solid #ffffff80;border-radius:12px;box-shadow:0 8px 30px #233d3310;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);overflow:hidden}.control-panel-heading{display:flex;justify-content:space-between;align-items:center;padding:14px 17px;font:9px Arial,sans-serif;letter-spacing:1px;color:#71836c}.control-panel-heading span{font:9px Noto Sans JP,sans-serif;letter-spacing:0}.control-sections{max-height:clamp(140px,calc(100svh - 530px),390px);overflow-y:auto;overscroll-behavior:contain}.control-sections details{border-top:1px solid #cbd3c380}.control-sections summary{padding:13px 17px;cursor:pointer;font-size:10px;letter-spacing:.05em}.control-sections summary:hover{background:#dce5d350}.control-sections summary:focus-visible{outline:2px solid #819b6b;outline-offset:-3px}.control-panel .weather-panel,.control-panel .event-panel{position:static;width:auto;padding:0 17px 16px;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:inherit}.control-panel .weather-heading{float:none;margin:0;justify-content:flex-end}.control-panel .weather-heading>span:first-child,.control-panel .event-heading{display:none}.control-panel .event-actions{margin-top:0;flex-wrap:wrap}body[data-time=night] .control-panel{background:#20364bed;border-color:#637a8b66;color:#dce3dc}body[data-time=night] .control-panel-heading{color:#b4c4ce}body[data-time=night] .control-sections details{border-color:#637a8b66}@media(max-width:800px){.control-panel{width:275px;bottom:25px}}@media(max-width:550px){main{min-height:1300px}.control-panel{top:325px;bottom:auto;left:7%;width:86%}.control-sections{max-height:390px}#viewport{top:790px;height:430px}.view-tools{top:880px}}.train-panel{padding:0 17px 16px;font-size:10px;line-height:1.8}.train-departures p{margin:0 0 10px}.train-credit{font-size:8px;opacity:.8;margin:0}.event-panel button:disabled{opacity:.55;cursor:not-allowed}.display-panel{padding:0 17px 16px;font-size:10px}.display-panel label{display:flex;align-items:center;gap:8px;cursor:pointer}.display-panel input{accent-color:#71836c}.display-panel input:focus-visible{outline:2px solid #819b6b;outline-offset:3px}@media(max-width:550px){header{position:relative;height:76px;padding:12px 20px}main{display:flex;flex-direction:column;height:auto;min-height:0;overflow:hidden;padding-bottom:20px}#viewport{position:relative;order:1;left:auto;top:auto;width:100%;height:clamp(340px,52svh,500px)}.intro{position:static;order:0;margin:12px 24px 0}.view-tools{position:static;order:2;align-self:center;flex-direction:row;transform:none;margin:0 16px 20px;padding:5px 8px}.view-tools button{width:44px;height:44px}.view-tools span{height:18px;width:1px;margin:0 4px}.control-panel{position:relative;order:3;inset:auto;width:auto;margin:0 16px}.control-sections{max-height:none;overflow:visible}.control-panel-heading{padding:16px;font-size:11px}.control-panel-heading span{font-size:11px}.control-sections summary{min-height:48px;padding:15px 16px;font-size:12px}.weather-panel label,.event-status,.train-panel,.display-panel{font-size:12px}.weather-panel select{min-height:44px;font-size:16px}.weather-panel button,.event-panel button{min-height:44px;font-size:12px}#weather-detail,.weather-credit,.train-credit{font-size:10px}.weather-controls,.weather-manual{gap:8px}.weather-controls label,.weather-manual label{min-width:0}.display-panel label{min-height:44px}.display-panel input{width:20px;height:20px}.compass{top:12px;bottom:auto;right:16px;pointer-events:none}footer{height:auto;min-height:56px;padding:16px 12px calc(16px + env(safe-area-inset-bottom))}.instructions{flex-wrap:wrap;justify-content:center;font-size:10px}.instructions-desktop{display:none}}.instructions-mobile{display:none}.train-mode{display:grid;gap:4px;margin-bottom:12px}.train-mode select,.train-manual button{font:inherit;color:inherit;background:#fff9;border:1px solid #c4cfba;border-radius:5px;padding:7px 9px}.train-mode select{width:100%}.train-actions{display:flex;flex-wrap:wrap;gap:8px}.train-manual button{cursor:pointer}.train-manual button:disabled{opacity:.5;cursor:default}.train-status{margin:10px 0}body[data-time=night] .train-mode select,body[data-time=night] .train-manual button{background:#344d60;border-color:#61798b}@media(max-width:550px){.train-mode select{min-height:44px;font-size:16px}.train-manual button{min-height:44px}}body[data-time=evening] main{background:radial-gradient(ellipse at 65% 35%,#f4d7b7,#e3c5c4 55%,#bac9ce)}body[data-time=evening] footer{background:#d9d9d0;border-color:#bdc7bd}body[data-time=evening] .control-panel{background:#f4ebe5ed}@media(max-width:550px){.instructions-mobile{display:inline}}