:root {
  /* Dear ImGui StyleColorsDark() defaults. */
  --imgui-text: rgba(255,255,255,1);
  --imgui-text-disabled: rgba(128,128,128,1);
  --imgui-window-bg: rgba(15,15,15,.94);
  --imgui-border: rgba(110,110,128,.5);
  --imgui-title-bg: rgba(10,10,10,1);
  --imgui-title-bg-active: rgba(41,74,122,1);
  --imgui-frame-bg: rgba(41,74,122,.54);
  --imgui-frame-bg-hovered: rgba(66,150,250,.40);
  --imgui-frame-bg-active: rgba(66,150,250,.67);
  --imgui-button: rgba(66,150,250,.40);
  --imgui-button-hovered: rgba(66,150,250,1);
  --imgui-button-active: rgba(15,135,250,1);
  --imgui-checkmark: rgba(66,150,250,1);
  --imgui-slider-grab: rgba(61,133,224,1);
  --imgui-slider-grab-active: rgba(66,150,250,1);
  --imgui-separator: rgba(110,110,128,.5);
  --imgui-resize-grip: rgba(66,150,250,.2);
  --imgui-font-size: 11px;
  --imgui-window-width: 312px;
  --stage-bg-dim: 0;
  --stage-bg-size: cover;
  --stage-bg-position: center center;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: #657d88;
  color: var(--imgui-text);
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
button, input { font: inherit; }
button { color: inherit; }

.demo-stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 20%, rgba(255,255,255,.11), transparent 33%),
    radial-gradient(circle at 20% 83%, rgba(10,20,24,.14), transparent 36%),
    linear-gradient(135deg, #5c7480 0%, #879ba3 55%, #526a75 100%);
}
.demo-stage.has-local-background {
  background-image: var(--stage-bg-image);
  background-size: var(--stage-bg-size);
  background-position: var(--stage-bg-position);
  background-repeat: no-repeat;
  background-color: #111;
}
.demo-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(0,0,0,var(--stage-bg-dim));
}

/* ImGui defaults: WindowPadding 8,8 / FramePadding 4,3 / ItemSpacing 8,4 /
   WindowBorderSize 1 / WindowRounding 0 / FrameRounding 0. */
.imgui-window {
  position: absolute;
  z-index: 10;
  width: var(--imgui-window-width);
  min-width: 240px;
  max-width: calc(100% - 4px);
  min-height: 32px;
  color: var(--imgui-text);
  background: var(--imgui-window-bg);
  border: 1px solid var(--imgui-border);
  border-radius: 0;
  box-shadow: 0 3px 12px rgba(0,0,0,.22);
  overflow: hidden;
  touch-action: none;
  font-size: var(--imgui-font-size);
  line-height: 1.15;
}

.imgui-titlebar {
  height: calc(var(--imgui-font-size) + 10px);
  min-height: 19px;
  display: flex;
  align-items: center;
  padding: 0 5px 0 3px;
  background: var(--imgui-title-bg);
  cursor: grab;
  white-space: nowrap;
}
.imgui-window.focused > .imgui-titlebar { background: var(--imgui-title-bg-active); }
.imgui-titlebar:active { cursor: grabbing; }
.imgui-collapse {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  padding: 0;
  margin: 0 1px 0 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--imgui-text);
  line-height: 1;
  font-size: 10px;
  cursor: pointer;
}
.imgui-window.collapsed .imgui-collapse { transform: rotate(-90deg); }
.imgui-window-title { overflow: hidden; text-overflow: ellipsis; }

.imgui-body { padding: 8px; background: transparent; }
.imgui-window.collapsed .imgui-body,
.imgui-window.collapsed .imgui-resize-grip { display: none; }

.imgui-fps-row {
  min-height: calc(var(--imgui-font-size) + 5px);
  display: flex;
  align-items: center;
  margin-bottom: 3px;
}
.imgui-separator { height: 1px; margin: 0; background: var(--imgui-separator); }

.imgui-tab-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  min-height: calc(var(--imgui-font-size) + 10px);
}
.imgui-tab,
.imgui-button {
  appearance: none;
  border: 0;
  border-radius: 0;
  outline: none;
  color: var(--imgui-text);
  background: var(--imgui-button);
  padding: 3px 4px;
  min-height: calc(var(--imgui-font-size) + 6px);
  cursor: pointer;
  white-space: nowrap;
}
.imgui-tab { flex: 1 1 0; min-width: 0; }
.imgui-tab:hover, .imgui-button:hover { background: var(--imgui-button-hovered); }
.imgui-tab:active, .imgui-button:active { background: var(--imgui-button-active); }
.imgui-tab.active { background: var(--imgui-frame-bg-active); }
.imgui-tab-separator { margin-bottom: 4px; }

.imgui-options-grid {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  column-gap: 8px;
  row-gap: 4px;
  align-items: center;
}
.imgui-checkbox-row {
  position: relative;
  min-width: 0;
  min-height: calc(var(--imgui-font-size) + 7px);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.imgui-checkbox-row input { position: absolute; opacity: 0; pointer-events: none; }
.imgui-checkbox-box {
  position: relative;
  flex: 0 0 calc(var(--imgui-font-size) + 7px);
  width: calc(var(--imgui-font-size) + 7px);
  height: calc(var(--imgui-font-size) + 7px);
  background: var(--imgui-frame-bg);
}
.imgui-checkbox-row:hover .imgui-checkbox-box { background: var(--imgui-frame-bg-hovered); }
.imgui-checkbox-row:active .imgui-checkbox-box { background: var(--imgui-frame-bg-active); }
.imgui-checkbox-row input:checked + .imgui-checkbox-box::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: calc(var(--imgui-font-size) - 4px);
  height: calc((var(--imgui-font-size) - 4px) * .52);
  border-left: 3px solid var(--imgui-checkmark);
  border-bottom: 3px solid var(--imgui-checkmark);
  transform: rotate(-45deg);
  transform-origin: 45% 45%;
}
.imgui-label { min-width: 0; overflow: hidden; text-overflow: clip; }
.imgui-coord-row { margin-top: 4px; }

.imgui-slider-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: calc(var(--imgui-font-size) + 10px);
  margin-top: 4px;
}
.imgui-slider-frame {
  position: relative;
  height: calc(var(--imgui-font-size) + 7px);
  background: var(--imgui-frame-bg);
  overflow: hidden;
}
.imgui-slider-frame:hover { background: var(--imgui-frame-bg-hovered); }
.imgui-slider-frame input[type="range"] {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.imgui-slider-fill {
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  background: rgba(66,150,250,.18);
  pointer-events: none;
}
.imgui-slider-grab {
  position: absolute;
  z-index: 2;
  top: 3px;
  width: 8px;
  height: calc(100% - 6px);
  background: var(--imgui-slider-grab);
  pointer-events: none;
}
.imgui-slider-frame:active .imgui-slider-grab { background: var(--imgui-slider-grab-active); }
.imgui-slider-value {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.imgui-slider-label { white-space: nowrap; }

.imgui-bottom-options {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 8px;
  margin-top: 4px;
}
.imgui-action-button { margin-top: 4px; }
.imgui-status {
  min-height: calc(var(--imgui-font-size) + 9px);
  margin: 4px 0;
  display: flex;
  align-items: center;
  line-height: 1.3;
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  color: var(--imgui-text);
}
.imgui-close-button { margin-top: 8px; }

.imgui-resize-grip {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg,
      transparent 0 48%,
      var(--imgui-resize-grip) 49% 58%,
      transparent 59% 67%,
      var(--imgui-resize-grip) 68% 77%,
      transparent 78%);
}
.imgui-reopen {
  position: absolute;
  z-index: 20;
  left: 8px;
  top: 8px;
  padding: 3px 6px;
  border: 0;
  border-radius: 0;
  color: var(--imgui-text);
  background: var(--imgui-button);
  font-size: var(--imgui-font-size);
  cursor: pointer;
}
.imgui-reopen:hover { background: var(--imgui-button-hovered); }

.imgui-tab:focus-visible,
.imgui-button:focus-visible,
.imgui-collapse:focus-visible,
.imgui-checkbox-row input:focus-visible + .imgui-checkbox-box,
.imgui-slider-frame:focus-within {
  outline: 1px solid var(--imgui-checkmark);
  outline-offset: 1px;
}

@media (max-width: 420px) {
  .imgui-window { max-width: calc(100% - 4px); }
}