:root {
  color-scheme: dark;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  background: #16241f;
  color: #f2f1e5;
  --muted: #b3c2b6;
  --accent: #d8e5aa;
  --line: #42534b;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.world { min-height: 100dvh; display: grid; grid-template-columns: 320px minmax(0, 1fr); }
.world-view { grid-column: 2; grid-row: 1; height: 100dvh; position: sticky; top: 0; background: #9dada3; }
#world { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#world:active { cursor: grabbing; }
.world-sidebar { grid-column: 1; grid-row: 1; padding: 26px; border-right: 1px solid var(--line); }
.back { color: var(--accent); font-size: 13px; text-underline-offset: 4px; }
header { margin: 28px 0; border-bottom: 1px solid var(--line); padding-bottom: 22px; }
h1 { margin: 0; font: 400 52px/.95 "Instrument Serif", Georgia, serif; letter-spacing: -.06em; }
header p { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 12px 0 0; }
h2 { margin: 18px 0 10px; font-size: 12px; color: var(--muted); }
h2 span { margin-left: 4px; }
.view-tools, .view-help, #loading { position: absolute; }
.view-tools { display: flex; gap: 6px; top: 14px; right: 14px; }
button, .places a { color: inherit; border: 1px solid var(--line); border-radius: 6px; background: #22362c; padding: 7px 10px; font-size: 12px; }
button:hover, .places a:hover, button[aria-pressed="true"] { background: #385446; color: var(--accent); }
.view-help { bottom: 12px; right: 14px; margin: 0; padding: 8px 11px; border-radius: 5px; font-size: 11px; background: #152521e8; pointer-events: none; }
#loading { top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 10px 14px; background: #152521; font-size: 13px; }
.places { display: flex; flex-wrap: wrap; gap: 5px; }
.places a { text-decoration: none; color: var(--accent); }
.people { display: grid; margin-top: 9px; }
.people button { background: transparent; border-radius: 0; border-width: 0 0 1px; text-align: left; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 2px; }
.people button:hover, .people button[aria-pressed="true"] { background: #263a30; }
.people small, #person-detail small { color: var(--muted); font-size: 11px; }
#person-detail { background: #263a30; padding: 12px; border: 1px solid var(--line); border-radius: 6px; }
#person-detail small { display: block; margin-top: 4px; }
#person-detail p { margin: 8px 0; font-size: 13px; }
@media (max-width: 720px) {
  .world { display: flex; flex-direction: column; }
  .world-view { height: 59dvh; min-height: 320px; position: relative; }
  .world-sidebar { padding: 19px; border: 0; }
  header { margin: 18px 0; }
}