:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #0b0908; color: #d8cbb6; }
body { font-family: ui-monospace, Menlo, Consolas, monospace; }

#stage { position: relative; display: block; }
.bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.bg-base { background: #15110d; }
.bg-noise { opacity: 0.6; background-repeat: repeat; }
.bg-lamp {
  background: radial-gradient(120% 75% at 50% 110%, rgba(255, 166, 74, 0.17), rgba(255, 150, 60, 0.05) 45%, rgba(0, 0, 0, 0) 72%);
}
.bg-vig { background: radial-gradient(85% 85% at 50% 42%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.42) 100%); }
canvas { position: relative; z-index: 2; display: block; background: transparent; }

#caption {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 7px 14px; height: 32px;
  background: rgba(8, 6, 5, 0.88);
  border-top: 1px solid rgba(255, 190, 110, 0.14);
  font-size: 11px; letter-spacing: 0.06em; white-space: nowrap;
  backdrop-filter: blur(3px);
  -webkit-user-select: none; user-select: none;
}
#caption .dim { color: #8a7d68; }
#brand { color: #e8d5a8; font-weight: 700; letter-spacing: 0.18em; }
#status { overflow: hidden; text-overflow: ellipsis; }
#last { flex: 1; overflow: hidden; text-overflow: ellipsis; text-align: right; color: #b09a72; }
#strataLink { cursor: pointer; color: #c9a86a; letter-spacing: 0.2em; padding: 2px 4px; }
#strataLink:hover { color: #ffe2ac; }

#tip {
  position: fixed; z-index: 30; pointer-events: none;
  max-width: 360px; padding: 8px 11px;
  background: rgba(12, 9, 7, 0.95); border: 1px solid rgba(255, 190, 110, 0.28);
  border-radius: 4px; font-size: 11px; line-height: 1.6; color: #c9baa0;
}
#tip .txt {
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600; font-size: 13px; line-height: 1.45;
  padding: 2px 0 6px; margin-bottom: 5px;
  border-bottom: 1px solid rgba(255, 190, 110, 0.15);
}
#tip .k { color: #7c705c; }
#tip .v { color: #efe2c8; }
#strata {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(7, 5, 4, 0.96); overflow-y: auto; padding: 34px 6vw 80px;
}
#strataHead {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; letter-spacing: 0.3em; color: #8a7d68;
  border-bottom: 1px solid rgba(255, 190, 110, 0.12); padding-bottom: 14px; margin-bottom: 22px;
}
#strataClose { cursor: pointer; color: #c9a86a; }
.row {
  display: flex; gap: 16px; align-items: baseline;
  font-size: 13px; line-height: 1.8; color: rgba(216, 203, 182, 0.4);
}
.row .tag { color: rgba(216, 203, 182, 0.55); min-width: 5em; }
.row .when { color: rgba(138, 125, 104, 0.5); min-width: 9em; text-align: right; font-size: 11px; }
.row.conf { color: rgba(224, 200, 160, 0.62); }
#empty { color: #5c5344; padding: 40px 0; }