:root{--bg:#f7f2ee;--card:#fff;--text:#3d3330;--sub:#7a6c67;--accent:#a35a53;--line:#ede4df}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Hiragino Sans,Noto Sans JP,sans-serif}#map{position:fixed;inset:0}.panel{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:1000;background:var(--card);border-radius:18px;flex-direction:column;gap:8px;padding:12px 14px;font-size:12px;display:flex;position:fixed;box-shadow:0 6px 20px #3d33301f}.panel-head{align-items:center;gap:8px;display:flex}.panel .title{font-size:13px;font-weight:700}.panel .back{background:var(--bg);width:32px;height:32px;color:var(--text);border-radius:50%;justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.info{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px;margin:0;display:grid}.info div{justify-content:space-between;gap:6px;display:flex}.info dt{color:var(--sub)}.info dd{font-variant-numeric:tabular-nums;margin:0}.message{color:var(--accent);background:#f6e9e6;border-radius:10px;padding:6px 10px}.controls{flex-wrap:wrap;gap:6px;display:flex}.controls button,.controls select{border:1px solid var(--line);background:var(--card);min-height:36px;color:var(--text);font:inherit;border-radius:999px;padding:0 12px}.controls button.on{background:var(--text);color:#fff;border-color:var(--text)}.top{max-width:560px;margin:0 auto;padding:24px 16px}.top h1{font-size:22px}.top h2{margin-top:24px;font-size:15px}.top a{color:var(--accent)}.top .note{color:var(--sub);font-size:13px}.top li{margin:8px 0}.nomap{justify-content:center;align-items:center;min-height:100%;padding:24px 16px 220px;display:flex}.bubble{background:var(--card);border-radius:22px 22px 22px 6px;max-width:320px;margin:0;padding:16px 20px;font-size:18px;line-height:1.7;box-shadow:0 4px 14px #3d33300f}