.geometry-sketch-layer {
  position: absolute;
  inset: 0;
  z-index: 4200;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: crosshair;
}

.geometry-sketch-layer.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.geometry-sketch-panel {
  position: absolute;
  right: 2.2%;
  top: 5.8%;
  z-index: 5300;
  width: min(44%, 640px);
  padding: .55em;
  border: 1px solid rgba(211,173,99,.58);
  border-radius: 4px;
  background: rgba(5,8,11,.92);
  color: #e0d1ad;
  font: 700 clamp(7px, .72vw, 12px)/1.3 ui-monospace, Consolas, monospace;
  box-shadow: 0 8px 24px rgba(0,0,0,.38);
}

.geometry-sketch-panel[hidden] {
  display: none;
}

.geometry-sketch-heading,
.geometry-sketch-tools {
  display: flex;
  align-items: center;
  gap: .42em;
  flex-wrap: wrap;
}

.geometry-sketch-heading {
  justify-content: space-between;
  margin-bottom: .48em;
}

.geometry-sketch-heading strong {
  color: #fff1bd;
}

#geometry-sketch-map,
#geometry-sketch-coords {
  color: #aebac4;
  font-weight: 600;
}

.geometry-sketch-tools button {
  padding: .38em .55em;
  border: 1px solid rgba(211,173,99,.42);
  border-radius: 2px;
  background: rgba(36,41,46,.92);
  color: #d8c69d;
  font: inherit;
  cursor: pointer;
}

.geometry-sketch-tools button:hover,
.geometry-sketch-tools button:focus-visible {
  border-color: #e0ba70;
  color: #fff2c5;
  outline: none;
}

#geometry-sketch-walkable.selected {
  border-color: rgba(104,255,164,.95);
  color: #b9ffd1;
  background: rgba(24,93,55,.82);
}

#geometry-sketch-blocked.selected,
#geometry-sketch-delete-blocked.selected {
  border-color: rgba(255,108,94,.98);
  color: #ffd0ca;
  background: rgba(111,43,36,.84);
}

#geometry-sketch-occluder.selected {
  border-color: rgba(255,226,122,.98);
  color: #fff1bd;
  background: rgba(108,82,28,.88);
  box-shadow: inset 0 0 10px rgba(255,226,122,.12);
}

#geometry-sketch-animation.selected {
  border-color: rgba(91,228,255,.98);
  color: #c8f8ff;
  background: rgba(20,79,96,.90);
  box-shadow: inset 0 0 10px rgba(91,228,255,.12);
}

#geometry-sketch-move-exit.selected {
  border-color: rgba(105,205,255,.98);
  color: #d5f3ff;
  background: rgba(27,75,111,.90);
}

#geometry-sketch-move-entrance.selected,
#geometry-sketch-move-spawn.selected {
  border-color: rgba(232,185,255,.98);
  color: #f4dcff;
  background: rgba(82,43,103,.90);
}

#geometry-sketch-reset-edits {
  border-color: rgba(255,210,128,.55);
}

.geometry-sketch-animation-label {
  display: flex;
  align-items: center;
  gap: .55em;
  margin: .52em 0 .15em;
  color: #bdeffa;
}

.geometry-sketch-animation-label[hidden] {
  display: none;
}

.geometry-sketch-animation-label input {
  flex: 1;
  min-width: 13em;
  padding: .38em .48em;
  border: 1px solid rgba(91,228,255,.42);
  border-radius: 2px;
  background: rgba(0,0,0,.42);
  color: #d9faff;
  font: inherit;
}

.geometry-sketch-animation-label input:focus-visible {
  border-color: rgba(91,228,255,.9);
  outline: none;
}

.geometry-sketch-instructions {
  margin: .5em 0;
  color: #c6bdab;
  font-weight: 600;
}

.geometry-sketch-instructions code {
  color: #f2d59e;
  font: inherit;
}

#geometry-sketch-output {
  box-sizing: border-box;
  width: 100%;
  height: 10.5em;
  resize: vertical;
  border: 1px solid rgba(211,173,99,.28);
  border-radius: 2px;
  padding: .45em;
  background: rgba(0,0,0,.44);
  color: #bdcbd3;
  font: 600 .92em/1.35 ui-monospace, Consolas, monospace;
}

.walk-stage.geometry-sketch-active .player,
.walk-stage.geometry-sketch-active .map-npc,
.walk-stage.geometry-sketch-active .interaction-prompt {
  opacity: .72;
}

@media (max-width: 900px) {
  .geometry-sketch-panel {
    width: 62%;
  }
}