.pm-host {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  background: #18212b;
  --pm-surface: rgb(26 36 46 / 95%);
  --pm-text: #e3e9ec;
  --pm-border: #61717d;
  --pm-active: #b4d9c8;
}
.pm-host > canvas { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab }
.pm-host > canvas:active { cursor:grabbing }
.pm-labels, .pm-leaders { position:absolute; inset:0; pointer-events:none; overflow:hidden }
.pm-leaders { width:100%; height:100%; z-index:1 }
.pm-leaders path { fill:none; stroke-width:1; stroke-linecap:square }
.pm-guide-idle { stroke:#8e9da7; opacity:.84 }
.pm-guide-selected { stroke:#bedbc8 }
.pm-guide-alert { stroke:#ffbf79; stroke-width:1.6!important }
.pm-tag {
  position:absolute; z-index:2; transform:translate(-50%,-100%); pointer-events:auto;
  white-space:nowrap; min-height:23px; padding:3px 7px; border:1px solid var(--pm-border);
  border-radius:2px; background:var(--pm-surface); color:var(--pm-text);
  box-shadow:0 1px 3px #10161a44;
  font:560 clamp(10px,.78vw,14px)/1.4 var(--sans,'Yu Gothic UI',sans-serif);
  letter-spacing:.025em;
}
.pm-tag:hover, .pm-tag:focus-visible { z-index:5; border-color:#dee7e9; background:#303e4a }
.pm-zone-tag b { color:#afbdc8; font:480 .92em/1 Consolas,monospace; border-right:1px solid #4f606d; margin-right:6px; padding-right:6px }
.pm-zone-tag.pm-selected, .pm-zone-tag.pm-order:not(.pm-attacked) { background:#1e3533f5; border-color:#9fc6b4; color:#eff8f2 }
.pm-zone-tag.pm-selected b { color:#bddacc; border-color:#5c7c6f }
.pm-zone-tag.pm-attacked { background:#55402bf5; color:#ffebcb; border-color:#e9af73 }
.pm-zone-tag small:empty { display:none }
.pm-zone-tag small { display:inline-block; margin-left:7px; border-left:1px solid #5e7f70; padding-left:6px; font-size:.83em; font-weight:560; color:#cce1d5 }
.pm-zone-tag.pm-attacked small { border-color:#aa875c; color:#ffddb5 }
.pm-zone-tag.pm-order small::before { content:''; display:inline-block; vertical-align:middle; margin:0 4px 1px 0; width:4px; height:4px; background:#b4ddc8 }
@media (prefers-reduced-motion:no-preference) {
  .pm-zone-tag.pm-order small::before { animation:pm-received 2s ease-out 2 }
  @keyframes pm-received { from{box-shadow:0 0 0 0 #b4ddc899} to{box-shadow:0 0 0 4px #b4ddc800} }
}
.pm-point-tag, .pm-work-tag, .pm-alias-tag { font:560 clamp(10px,.77vw,14px)/1.4 var(--sans,'Yu Gothic UI',sans-serif); border-color:#697b89 }
.pm-work-tag.pm-measured { background:#243e37; color:#e2f1e9; border-color:#a8d4be }
.pm-alias-tag { border-color:#87949e }
.pm-compass { position:absolute; left:12px; top:10px; display:flex; gap:3px; align-items:center; color:#bcc9cf; opacity:.82; pointer-events:none }
.pm-compass svg { width:26px; height:26px }
.pm-compass circle, .pm-dial-ticks { fill:none; stroke:#92a2ad; stroke-width:1 }
.pm-compass g { transform-origin:17px 17px; transform:rotate(var(--heading,0rad)) }
.pm-compass g path:first-child { fill:#d5dfe4 }
.pm-compass g path:last-child { fill:#657682 }
.pm-compass small { font:10px Consolas,monospace }
.pm-zoom { position:absolute; right:10px; bottom:10px; display:flex; z-index:6 }
.pm-zoom button { height:28px; width:29px; min-height:0; padding:0; border:1px solid #536470; border-radius:2px; color:#d4dfe6; background:#1e2a33e8; font:16px/1 Consolas,monospace }
.pm-zoom button + button { margin-left:2px }
.pm-caption { position:absolute; max-width:calc(100% - 94px); bottom:10px; left:12px; padding:4px 9px; border-left:2px solid #849da5; background:#1a2630ef; color:#dbe5e8; font-size:clamp(10px,.74vw,13px); line-height:1.55 }
.pm-caption.pm-trace-finding { left:clamp(12px,1vw,20px); bottom:clamp(14px,1.2vw,24px); background:#1b2b2df2; border-left:3px solid #b8d9c6; padding:8px 15px; font-size:clamp(15px,1.28vw,27px); line-height:1.55; font-weight:630; color:#e7f1ed }