* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; overflow: hidden; background: #dfe6ea; }
body { font: 15px/1.4 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif; color: #2a1512; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#scene:active { cursor: grabbing; }

.panel {
  position: fixed; top: 16px; left: 16px; max-height: calc(100% - 32px); width: 300px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px; padding: 20px;
  background: #fff8ee; border-radius: 14px; box-shadow: 0 8px 28px rgb(60 20 10 / .22);
}
h1 { font: italic 800 30px/1 Georgia, "Times New Roman", serif; color: #c8102e; }
h1 em { color: #2a1512; }
.lede { color: #6d5148; margin-top: -8px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.label { display: flex; justify-content: space-between; font-weight: 600; font-size: 13px; }
output { font-variant-numeric: tabular-nums; color: #c8102e; }
input[type=range] { width: 100%; accent-color: #c8102e; }

.segments { display: flex; gap: 4px; padding: 3px; background: #f1e4d3; border-radius: 9px; }
.segments button {
  flex: 1; padding: 7px; border: 0; border-radius: 7px; background: none;
  font: inherit; font-weight: 600; color: #6d5148; cursor: pointer;
}
.segments button.on { background: #c8102e; color: #fff; }

.stats { display: flex; gap: 10px; }
.stats div { flex: 1; padding: 10px; background: #f1e4d3; border-radius: 9px; }
dt { font-size: 12px; color: #6d5148; }
dd { margin: 0; font-weight: 700; font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.note { font-size: 12px; color: #6d5148; }

@media (max-width: 720px) {
  .panel { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 46vh; padding: 14px; gap: 12px; }
}