:root { color-scheme: dark; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
* { box-sizing: border-box; }
body { margin: 0; background: #080b0b; color: #e5efdf; }
.topbar { display: flex; justify-content: space-between; gap: 20px; padding: 16px 20px; border-bottom: 1px solid #2a3430; background: #0d1210; }
h1 { margin: 0; font-size: 22px; letter-spacing: .04em; }
p { margin: 5px 0 0; color: #93a69b; }
.digest { max-width: 48ch; text-align: right; color: #9db6a7; font-size: 12px; overflow-wrap: anywhere; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 20px; border-bottom: 1px solid #2a3430; background: #101613; position: sticky; top: 0; z-index: 2; }
input, select, button { font: inherit; background: #161f1a; color: #e5efdf; border: 1px solid #3b4b42; border-radius: 4px; padding: 6px 8px; }
button { cursor: pointer; }
button:hover { background: #233128; }
.layout { display: grid; grid-template-columns: minmax(520px, 1.6fr) minmax(260px, .65fr); gap: 12px; padding: 12px; }
.panel { border: 1px solid #28352f; background: #0e1411; border-radius: 6px; overflow: hidden; }
.panelTitle { padding: 8px 10px; background: #141c18; border-bottom: 1px solid #28352f; font-weight: 700; color: #c9dccd; }
.pond { min-width: 0; }
#pond { width: 100%; height: auto; display: block; background: #050707; image-rendering: pixelated; cursor: crosshair; }
.stats { padding: 8px 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; font-size: 12px; color: #a8b9ae; }
.side { display: grid; gap: 12px; align-content: start; }
.buttonList { display: grid; gap: 6px; padding: 8px; max-height: 260px; overflow: auto; }
.buttonList button { text-align: left; white-space: normal; }
.buttonList.compact button { font-size: 11px; }
.inspector, .timeline { grid-column: 1 / -1; }
#inspector, #timeline { padding: 10px; }
.empty { color: #7f9186; }
.claim { padding: 8px; margin: 6px 0; border-left: 3px solid #586b5f; background: #111814; }
.claim details { margin-top: 5px; color: #91a299; }
.ancestry { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.ancestor { padding: 6px 8px; border: 1px solid #34443b; border-radius: 4px; background: #121a16; }
.archive { border-style: dashed; color: #d3b889; }
#timeline { max-height: 360px; overflow: auto; }
.timeItem { display: grid; grid-template-columns: 90px 160px 1fr; gap: 8px; padding: 5px 0; border-bottom: 1px solid #1e2923; font-size: 12px; }
.kind-landmark { color: #e6c17c; }
.kind-event { color: #9fb9aa; }
footer { padding: 16px 20px 28px; color: #73877b; font-size: 12px; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } .side { grid-template-columns: 1fr 1fr; } .topbar { flex-direction: column; } .digest { text-align: left; } }