:root {
  color-scheme: dark;
  background: transparent;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: transparent;
}

body {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#hand-stage {
  position: relative;
  /* 按图片宽度等比缩放并底部对齐，裁掉原稿顶部留白，避免二次缩小手掌。 */
  width: 100%;
  aspect-ratio: 1050 / 810;
  flex: none;
  cursor: auto;
}

#palm-base,
#sensor-reference,
#particle-grid {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

#hand-stage.coordinate-debugging {
  outline: 1px solid rgba(88, 255, 173, 0.78);
  outline-offset: -1px;
}

#palm-base,
#sensor-reference {
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

#palm-base {
  z-index: 0;
  object-fit: contain;
  transform-origin: 50% 50%;
  will-change: transform;
}

#sensor-reference {
  z-index: 1;
  opacity: 0;
}

#particle-grid {
  z-index: 2;
  touch-action: pan-y;
}

.sensor-editing #particle-grid {
  cursor: crosshair;
}

#sensor-editor {
  position: fixed;
  z-index: 3;
  top: 16px;
  right: 16px;
  display: grid;
  width: 280px;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(255, 147, 68, 0.46);
  border-radius: 8px;
  background: rgba(7, 7, 7, 0.9);
  color: #f6f6f6;
  font: 12px/1.4 Arial, sans-serif;
}

#sensor-editor[hidden] {
  display: none;
}

#selected-zone-name {
  color: #ffad72;
  font-family: Consolas, monospace;
}

.editor-slider {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
}

.editor-slider input {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: #ff7e2e;
  cursor: none;
}

.editor-slider span {
  grid-column: 2;
  grid-row: 1;
  color: rgba(255, 255, 255, 0.86);
  font-family: Consolas, monospace;
}

.alignment-controls {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.alignment-controls summary {
  margin-bottom: 8px;
  color: #ffad72;
  cursor: none;
}

.alignment-controls label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  margin-top: 7px;
}

.alignment-controls output {
  color: rgba(255, 255, 255, 0.8);
  font-family: Consolas, monospace;
}

.alignment-controls input {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: #ff7e2e;
  cursor: none;
}

.alignment-controls button {
  width: 100%;
  min-height: 28px;
  margin-top: 9px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  font: inherit;
  cursor: none;
}

.editor-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.editor-actions button {
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  font: inherit;
  cursor: pointer;
}

.editor-actions button:hover {
  border-color: rgba(255, 159, 90, 0.8);
  background: rgba(255, 126, 46, 0.16);
}

.editor-actions button.is-active {
  border-color: #58ffad;
  background: rgba(88, 255, 173, 0.14);
  color: #b8ffdb;
}

#pressure-cursor {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: 48px;
  height: auto;
  visibility: visible;
  opacity: 1;
  pointer-events: none;
  transform-origin: 46.3415% 29.5652%;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.14));
  will-change: top, left, transform;
}

.pressure-cursor-ready #hand-stage {
  cursor: none;
}

.pressure-cursor-ready #pressure-cursor {
  visibility: visible;
}

#pressure-cursor-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.sensor-editing #pressure-cursor {
  display: none;
}

.sensor-editing,
.sensor-editing * {
  cursor: auto !important;
}


#sensor-editor small {
  color: rgba(255, 255, 255, 0.48);
}

#coordinate-debug {
  position: fixed;
  z-index: 4;
  bottom: 14px;
  left: 14px;
  min-width: 320px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(88, 255, 173, 0.5);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.84);
  color: #b8ffdb;
  font: 11px/1.45 Consolas, monospace;
  pointer-events: none;
}