:root { color-scheme: light; --paper: #f3f2ed; --ink: #243730; --muted: #6b786e; --line: #cdd5c9; --green: #2e4b38; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.6 system-ui, -apple-system, sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: 1px solid var(--line); background: transparent; padding: 8px 13px; border-radius: 5px; color: inherit; }
button:hover { background: #e0e6dc; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #d8a35a; outline-offset: 3px; }
a { color: inherit; }
header { padding: 18px 4%; border-bottom: 1px solid #d7dbd2; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { color: inherit; text-decoration: none; font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.logo { background: #253b33; color: #cce2aa; padding: 0 7px; font-family: Georgia, serif; }
.brand small { font: 10px monospace; letter-spacing: .5px; color: #6b756e; margin-left: 4px; border: 1px solid #d6ddd0; border-radius: 4px; padding: 2px 5px; }
.header-actions { display: flex; align-items: center; gap: 20px; }
.scan-info { position: relative; font-size: 12px; }
summary { cursor: pointer; }
.scan-info summary { list-style: none; color: var(--muted); padding: 8px 0; }
.scan-info summary::-webkit-details-marker { display: none; }
.scan-info summary::after { content: ' +'; font: 14px monospace; }
.scan-info[open] summary::after { content: ' −'; }
.scan-info-content { position: absolute; z-index: 5; top: calc(100% + 12px); right: 0; width: 350px; max-width: calc(100vw - 32px); background: #fafbf5; border: 1px solid var(--line); border-radius: 8px; padding: 20px; box-shadow: 0 12px 35px #20322820; color: #61705f; }
.scan-info-content h2 { margin: 0 0 10px; font: 21px Georgia, serif; color: var(--ink); }
.scan-info-content p { margin: 10px 0 0; }
main { max-width: 1600px; margin: auto; padding: 0 4% 36px; }
.intro { display: flex; justify-content: space-between; align-items: center; padding: 30px 0; gap: 35px; }
.eyebrow { font: 10px monospace; letter-spacing: 1.7px; color: #647369; margin: 0 0 10px; }
h1 { font: 43px/1.06 Georgia, serif; letter-spacing: -1px; margin: 0; }
h1 em { font-weight: normal; color: #5a7856; }
.intro-copy { max-width: 390px; color: #68746d; font-size: 13px; }
.intro-copy p { margin: 0 0 10px; }
.intro-copy p:first-child { font-weight: 600; color: #263c34; font-size: 16px; }
.location-tag { display: inline-flex; align-items: center; gap: 9px; margin-top: 3px; padding: 6px 12px 6px 9px; border: 1px solid #d0dbc9; border-radius: 20px; background: #e9eee2; color: #3d5b43; font-size: 12px; }
.location-tag svg { width: 15px; height: 17px; }
.tag-divider { width: 1px; height: 12px; background: #bfceb5; margin: 0 2px; }
.tag-type { color: #71816c; font: 10px monospace; letter-spacing: .4px; }
.workspace { display: grid; grid-template-columns: minmax(0,1fr) 306px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.map-panel { background: #101e20; color: #d5ded4; min-width: 0; display: flex; flex-direction: column; }
.panelbar { padding: 12px 18px; border-bottom: 1px solid #2e3e3c; display: flex; justify-content: space-between; align-items: center; font: 10px monospace; letter-spacing: 1px; gap: 8px; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #95bb68; margin-right: 8px; }
.view-controls { display: flex; gap: 5px; }
.panelbar button { font: 10px monospace; border-color: #42514b; padding: 6px 8px; color: #d5ded4; }
.panelbar button:hover, .panelbar button[aria-pressed=true] { background: #294136; }
#scene { position: relative; height: clamp(390px,56vh,650px); min-height: 360px; flex: 1; }
#scene canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#loading { position: absolute; z-index: 3; top: 40%; left: 10%; right: 10%; padding: 16px; background: #223b32; color: #dbe5ce; }
.maplabel { position: absolute; top: 17px; left: 18px; font: 10px/1.8 monospace; pointer-events: none; letter-spacing: 1px; }
.maplabel span { display: block; font-size: 9px; color: #91a59e; letter-spacing: 0; }
.legend { position: absolute; bottom: 16px; right: 20px; display: flex; align-items: center; gap: 7px; font: 8px monospace; pointer-events: none; }
.legend b { width: 95px; height: 4px; background: linear-gradient(90deg,#26798d,#8fc97c,#e2b76c); }
.timeline { padding: 13px 20px 10px; border-top: 1px solid #2e3e3c; }
.timeline>div { display: flex; justify-content: space-between; font: 10px monospace; letter-spacing: 1px; }
input[type=range] { width: 100%; accent-color: #afce8e; margin: 12px 0 0; }
aside { padding: 20px; background: #f9f9f4; }
.aside-head h2 { font: 25px Georgia, serif; margin: 0 0 20px; }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.metrics span, .spark-title { font: 9px monospace; letter-spacing: .5px; color: #68776b; }
.metrics strong { font: 24px Georgia, serif; display: block; margin-top: 4px; }
.measurement-info { color: var(--muted); margin: 12px 0 22px; font-size: 11px; }
.measurement-info p { margin: 8px 0 0; }
.spark-title { display: flex; justify-content: space-between; }
#profile { width: 100%; margin: 8px 0 20px; cursor: pointer; display: block; }
form label { font-size: 12px; font-weight: 600; }
select, textarea { display: block; width: 100%; border: 1px solid #cbd4c4; background: #fff; border-radius: 5px; padding: 9px; margin-top: 8px; color: #344b40; font-size: 12px; }
textarea { resize: vertical; min-height: 75px; }
.primary { background: var(--green); color: #f2f5e9; border-color: var(--green); }
.primary:hover { background: #436948; }
form button { width: 100%; margin-top: 8px; font-size: 12px; }
.storage-note { color: #7a8776; font-size: 10px; margin: 7px 0 0; }
#message { font-size: 11px; color: #79532f; margin: 4px 0 0; }
#annotations { max-height: 180px; overflow: auto; }
.annotation { font-size: 11px; padding: 12px 0; border-bottom: 1px solid #dbe1d4; overflow-wrap: anywhere; }
.annotation b { display: block; font: 10px monospace; }
.annotation p { margin: 6px 0; }
.annotation button { float: right; padding: 0 6px; margin-left: 5px; }
.annotation span { color: #6e776b; }
@media (max-width: 1000px) {
  .workspace { grid-template-columns: minmax(0,1fr) 280px; }
  .panelbar { flex-wrap: wrap; }
  .intro-copy { max-width: 350px; }
  h1 { font-size: 38px; }
}
@media (max-width: 760px) {
  .workspace { grid-template-columns: 1fr; }
  #scene { flex: none; height: 420px; }
  .intro { align-items: start; }
  .intro-copy { max-width: 280px; }
  h1 { font-size: 34px; }
}
@media (max-width: 560px) {
  header { padding: 14px 4%; gap: 10px; }
  .brand { font-size: 19px; gap: 7px; }
  .brand small { font-size: 9px; }
  .header-actions { gap: 10px; font-size: 10px; }
  .scan-info { font-size: 10px; position: static; }
  .scan-info-content { right: 16px; top: 64px; }
  .header-actions>button { padding: 6px 8px; }
  .intro { display: block; padding: 24px 0; }
  h1 { font-size: 36px; }
  .intro-copy { max-width: 100%; margin-top: 18px; }
  #scene { height: 360px; }
  .view-controls { flex-wrap: wrap; }
  .maplabel span { font-size: 8px; }
}