:root {
  --ink: #3d2e1e;
  --paper: #f0ebe0;
  --line: #d8ccb8;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #cfdbe4;
  color: var(--ink);
  font: 14px/1.4 system-ui, sans-serif;
}
#scene {
  display: block;
  width: 100vw;
  height: 100vh;
}
.panel {
  position: absolute;
  top: 12px;
  left: 12px;
  width: min(300px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.panel h1 {
  margin: 0 0 4px;
  font-size: 18px;
}
.hint,
.credit {
  margin: 0 0 8px;
  font-size: 12px;
  opacity: 0.75;
}
fieldset {
  margin: 0 0 8px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
fieldset label {
  display: block;
}
#legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 8px;
  font-size: 12px;
}
#legend span::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--c);
}
#inspect {
  margin: 8px 0;
  font-size: 12px;
}
#inspect pre {
  margin: 6px 0 0;
  white-space: pre-wrap;
  font-size: 12px;
}
#inspect button {
  margin-top: 4px;
  font: inherit;
  padding: 2px 8px;
}
.block-head strong {
  font-size: 16px;
}
.block-head span {
  margin-left: 6px;
  opacity: 0.7;
}
.label.block-label {
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  background: #3d2e1e;
  border-color: #3d2e1e;
}
#inspect:empty {
  display: none;
}
#labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.label {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 2px 6px;
  font-size: 11px;
  white-space: nowrap;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.time input[type="range"] {
  width: 100%;
}
.time legend output {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.time-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 4px;
}
.time-row label {
  display: inline;
}
.time-row button,
.time-row select {
  font: inherit;
  padding: 1px 6px;
}
.day input {
  font: inherit;
  padding: 0 4px;
  margin-left: 4px;
}
.note {
  margin: 2px 0 4px;
  font-size: 12px;
  color: #8a6a10;
}
.note:empty {
  display: none;
}

/* Embed mode (viewer/?embed): the site's /mapa page. See embed.js. */
#panel-toggle {
  display: none;
}
.embed .dev {
  display: none !important;
}
.embed #panel-toggle {
  display: block;
  float: right;
  font: inherit;
  font-size: 12px;
  padding: 1px 8px;
}
.embed .panel.folded {
  width: auto;
}
.embed .panel.folded > :not(#panel-toggle, h1) {
  display: none;
}
.embed .panel.folded h1 {
  display: inline;
  margin-right: 8px;
}
.label.pin {
  pointer-events: auto;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: #d4524a;
  border-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.label.pin-tour {
  background: #2a8c7a;
}
.label.pin-event {
  background: #b8891f;
}
.label.pin-place {
  background: #2d6e3f;
}
a.label.pin:hover,
a.label.pin:focus-visible {
  outline: 2px solid #fff;
  z-index: 1;
}