main{display:block}body{height:100dvh;display:flex;flex-direction:column;overflow:hidden}header{flex-shrink:0;padding:14px 22px;gap:12px}header h1{font-size:22px}.drawer-toggle{margin-left:auto;flex-shrink:0;background:#ffffff18;color:white;border-color:#ffffff65}.drawer-toggle:hover{background:#ffffff30}main{flex:1;min-height:0}.map-area{height:100%;display:flex;flex-direction:column}.map-area nav{flex-shrink:0}#mapwrap{flex:1;height:auto;min-height:0}footer{flex-shrink:0;padding:8px 20px;font-size:11px}
aside#sidebar{position:fixed;z-index:30;top:0;bottom:0;left:0;width:min(370px,calc(100vw - 32px));height:100dvh;max-height:none;overflow:auto;overscroll-behavior:contain;box-shadow:10px 0 35px #122c4350;padding:0 20px 24px;border-right:1px solid #c5d2d6}.drawer-heading{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;margin-bottom:14px;background:var(--rank-page)}.drawer-heading h2{font-size:18px;margin:0}.drawer-heading button{padding:7px 11px;font-size:18px}.station{pointer-events:none}#map{cursor:grab}#map.is-pickable{cursor:pointer}#map.is-dragging{cursor:grabbing}.hit{pointer-events:none}#nearby{max-width:min(370px,calc(100% - 36px))}
@media(max-width:760px){header{display:flex;padding:10px 12px}header h1{font-size:17px}.brand{font-size:9px;letter-spacing:.06em}.drawer-toggle{font-size:12px;padding:9px}.map-area{order:initial}#mapwrap{height:auto;min-height:0}.map-area nav{gap:5px;padding:8px}.map-area nav button{padding:8px;font-size:12px}footer{font-size:9px;padding:6px 12px}.hoverbar{left:10px;right:10px}.hoverbar #hover{font-size:12px}.legend{left:10px;right:10px}.drawer-heading{padding-top:max(14px,env(safe-area-inset-top))}}