:root { --bg:#0b0e13; --panel:#10141b; --raised:#161b24; --ink:#e9edf2; --rest:#7d8796; --line:#2e3746; --accent:#3dd6b5; --sans:system-ui,-apple-system,'Segoe UI',sans-serif; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--ink); font:13px/1.45 var(--sans); overflow:hidden; }
button { font:inherit; color:inherit; cursor:pointer; background:none; border:0; touch-action:manipulation; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#map { position:absolute; inset:0; }
.tag { position:absolute; left:calc(12px + env(safe-area-inset-left)); bottom:calc(30px + env(safe-area-inset-bottom)); z-index:3; padding:4px 9px; background:var(--panel); border:1px solid var(--line); border-radius:6px; color:#c2c9d3; font-size:12px; max-width:min(70ch,calc(100% - 90px)); }

.fb { position:absolute; z-index:4; top:calc(12px + env(safe-area-inset-top)); left:12px; right:68px; display:flex; justify-content:center; pointer-events:none; }
.fb-inner { pointer-events:auto; display:flex; align-items:center; gap:6px; max-width:100%; min-height:44px; padding:4px 6px; background:var(--panel); border:1px solid var(--line); border-radius:10px; color:var(--rest); transition:border-color .16s, color .16s; }
.fb-toggle { display:flex; align-items:center; gap:7px; min-height:36px; min-width:44px; padding:0 8px; border-radius:7px; font-weight:600; white-space:nowrap; }
.fb-count { color:var(--accent); font-weight:600; white-space:nowrap; }
.fb-slide { display:grid; grid-template-columns:0fr; min-width:0; transition:grid-template-columns .16s ease; }
.fb-slide > div { overflow:hidden; min-width:0; visibility:hidden; display:flex; align-items:center; gap:6px; }
.fb-chips { display:flex; gap:5px; overflow-x:auto; scrollbar-width:none; padding:2px; min-width:0; }
.fb-chips::-webkit-scrollbar { display:none; }
.fb-chip, .fb-tool { min-height:36px; padding:0 10px; border:1px solid var(--line); border-radius:7px; background:var(--raised); white-space:nowrap; }
.fb-chip[aria-pressed="true"] { border-color:var(--accent); color:var(--accent); background:rgba(61,214,181,.12); }
.fb-tool[aria-pressed="true"] { color:var(--accent); border-color:var(--accent); }
.fb[data-state="awake"] .fb-inner, .fb[data-state="pinned"] .fb-inner { color:var(--ink); border-color:#46536a; }
.fb[data-state="awake"] .fb-slide, .fb[data-state="pinned"] .fb-slide { grid-template-columns:1fr; }
.fb[data-state="awake"] .fb-slide > div, .fb[data-state="pinned"] .fb-slide > div { visibility:visible; }

.rail { position:absolute; z-index:4; right:calc(12px + env(safe-area-inset-right)); top:calc(12px + env(safe-area-inset-top)); display:flex; flex-direction:column; gap:4px; padding:4px; background:var(--panel); border:1px solid var(--line); border-radius:10px; }
.rail button { width:44px; height:44px; border-radius:7px; display:grid; place-items:center; font-weight:600; }
.rail button:hover { background:var(--raised); }
.rail button[aria-pressed="true"] { color:var(--accent); }
#compass { touch-action:none; border:1px solid var(--line); border-radius:50%; }
.hud { position:absolute; z-index:4; left:50%; top:45%; transform:translate(-50%,-50%); padding:6px 12px; background:var(--panel); border:1px solid var(--line); border-radius:8px; font-variant-numeric:tabular-nums; font-size:15px; pointer-events:none; }
.hud[hidden], [hidden] { display:none !important; }
.anchor-dot { width:14px; height:14px; border-radius:50%; border:2px solid var(--accent); background:rgba(61,214,181,.3); }

.help { position:absolute; z-index:6; right:calc(68px + env(safe-area-inset-right)); bottom:calc(30px + env(safe-area-inset-bottom)); width:min(460px,calc(100% - 24px)); max-height:min(78dvh,calc(100% - 90px)); overflow:auto; padding:16px; background:var(--panel); border:1px solid #46536a; border-radius:12px; }
.help h2 { margin:0 0 8px; font-size:15px; }
.help table { width:100%; border-collapse:collapse; }
.help td { padding:5px 0; border-top:1px solid var(--line); vertical-align:top; }
.help td:first-child { color:#c2c9d3; padding-right:12px; }
.help kbd { font:inherit; font-weight:600; }
.help-close { float:right; min-width:44px; min-height:44px; margin:-10px -10px 0 0; font-size:18px; }
.maplibregl-ctrl-attrib { font-size:11px; }

@media (max-width:640px) {
  .fb { right:68px; justify-content:flex-start; }
  .fb[data-state="awake"], .fb[data-state="pinned"] { right:12px; z-index:5; }
  .help { right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); }
  .tag { display:none; }
}
@media (prefers-reduced-motion: reduce) { .fb-inner, .fb-slide { transition:none; } }