.board-viewport {
  position: absolute;

  inset: var(--topbar-height) 0 0 0;
  overflow: hidden;
  background: var(--canvas-bg);
  touch-action: none;
  cursor: default;
}
.board-viewport.can-pan { cursor: grab; }
.board-viewport.panning { cursor: grabbing; }

.board-world {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

.edge-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}

.edge {
  fill: none;
  stroke: var(--edge-stroke);
  stroke-width: calc(1.25 * var(--edge-weight, 1));
  stroke-linecap: round;
}

.edge-tinted {
  stroke: var(--edge-tint, var(--edge-stroke));
}

.edge-comment {
  stroke-dasharray: 3 3;
  opacity: 0.7;
}

.edge-companion {
  stroke: var(--edge-companion-stroke, var(--accent, var(--edge-stroke)));
  stroke-width: 1.25;
  stroke-linejoin: round;
}

.edge-companion.edge-tinted {
  stroke: var(--edge-tint, var(--edge-companion-stroke, var(--accent, var(--edge-stroke))));
}

.seam-layer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}

.seam {
  fill: none;
  stroke: var(--edge-stroke);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.seam-comment {
  stroke-dasharray: 3 3;
  opacity: 0.7;
}

.seam-tree { stroke-width: 1.75; }

.seam-companion {
  stroke: var(--accent-quiet);
  stroke-width: 1.5;
}

.seam-none {
  stroke: var(--line-hairline);
  stroke-width: 1;
  opacity: 0.8;
}

.node {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  --node-scale: 1;
  --card-pad-x: calc(var(--space-3) * var(--node-scale));
  min-width: calc(132px * var(--node-scale));
  max-width: calc(280px * var(--node-scale));

  padding: 0 var(--card-pad-x) calc(var(--space-2) * var(--node-scale));
  display: flex;

  flex-wrap: wrap;
  align-items: center;
  gap: 0 calc(var(--space-2) * var(--node-scale));

  --nf-strip-h: calc(16px * var(--node-scale));

  --nf-glyph: calc(var(--nf-strip-h) * 0.7);

  --nf-controls-right: calc(var(--nf-strip-h) + var(--space-2) * 2);

  --card-surface: var(--card-fill);
  background: var(--card-surface);
  color: var(--card-text);

  --card-rim: var(--card-rim-base);
  border: var(--hairline) solid var(--card-rim);
  border-radius: var(--radius-sm);

  font-family: var(--font-ui);

  font-size: calc(var(--type-md) * var(--node-scale));
  line-height: var(--leading-tight);
  cursor: default;
  user-select: none;

  transition:
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease);
}

.node:hover { --card-rim: var(--line-strong); }

.node.selected {
  --card-rim: var(--card-line-selected);

  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--card-line-selected) 26%, transparent),
    0 0 7px 1px color-mix(in srgb, var(--card-line-selected) 34%, transparent);
}

.node[data-node-style='inverse'] {
  background-color: var(--text-primary);
  color: var(--surface-base);
  border-color: var(--text-primary);
}

.node[data-node-style='inverse'] .node-text { color: var(--surface-base); }

.node[data-node-style='ledger'] {
  border-radius: 0;
  border-top: 2px solid var(--accent-quiet);
  font-family: var(--font-mono);
  font-size: var(--type-sm);
}

.node[data-node-style='chip-card'] {
  border-radius: 999px;
  --card-pad-x: calc(var(--space-4) * var(--node-scale));
}

.node[data-tint] {

  --card-surface: color-mix(in srgb, var(--node-tint) 30%, var(--card-bg));
}

.node[data-tint]:not(.selected) {
  --card-rim: color-mix(in srgb, var(--node-tint) 55%, var(--card-line));
}

.node.node-dot.is-pinned {
  border-color: var(--state-danger);
}

.node.has-media { flex-wrap: nowrap; }

.node.drop-target {
  border-color: var(--drop-target);
  border-style: dashed;
}

.node.dragging {
  opacity: 0.9;

  pointer-events: none;
}

.node.radar-carried {
  opacity: 0;
  visibility: hidden;
  transition: opacity 90ms ease-out;
}

.node.is-comment {

  padding-bottom: calc(18px * var(--node-scale));
  background-color: var(--surface-inset);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(15px * var(--node-scale)),
    var(--line-strong) calc(15px * var(--node-scale)),
    var(--line-strong) calc(16px * var(--node-scale))
  );

  background-position: 0 calc((2px * var(--node-scale)) + var(--nf-strip-h));
  color: var(--text-secondary);
  font-style: italic;
  border-style: solid;
  border-color: var(--line-hairline);
  border-left: 3px solid var(--line-strong);

  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.node.is-comment.selected {
  border-color: var(--card-line-selected);
  border-left-color: var(--card-line-selected);
}

.node-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  outline: none;
}

.node-text[contenteditable='true'] {
  cursor: text;
  user-select: text;
  border-radius: 2px;
  box-shadow: 0 0 0 2px var(--accent-quiet);
}

.node-text strong { font-weight: 700; }
.node-text em { font-style: italic; }
.node-text s { text-decoration: line-through; }
.node-text code {
  font-family: var(--font-mono);

  font-size: 0.92em;
  color: var(--accent);
}
.node-text a { color: var(--accent); }

.node-text mark {
  padding: 0 0.15em;
  border-radius: 2px;
  background: color-mix(in srgb, var(--state-dirty) 38%, var(--card-bg));
  color: inherit;
}

.node-text[data-md-h='1'] { font-size: 1.5em; font-weight: 650; }
.node-text[data-md-h='2'] { font-size: 1.3em; font-weight: 650; }
.node-text[data-md-h='3'] { font-size: 1.15em; font-weight: 600; }
.node-text[data-md-h='4'],
.node-text[data-md-h='5'],
.node-text[data-md-h='6'] { font-size: 1.05em; font-weight: 600; }

.node-text[contenteditable='true'] mark {
  padding: 0;
  background: none;
}

.node.node-shell .node-text[data-md-h] { font-size: var(--type-sm); }

.node-strip {
  flex: 0 0 auto;
  order: -1;

  align-self: flex-start;
  box-sizing: border-box;

  width: calc(100% + var(--card-pad-x) * 2);
  margin: 0 calc(var(--card-pad-x) * -1) calc(var(--space-2) * var(--node-scale));
  min-height: var(--nf-strip-h);

  padding: 0 var(--nf-controls-right) 0 var(--card-pad-x);
  display: flex;
  flex-wrap: wrap;

  align-items: center;
  gap: calc(var(--nf-strip-h) * 0.25);
  color: var(--text-muted);

  pointer-events: none;
}

.nf-mark[data-press] {
  pointer-events: auto;
}

.node:not(.has-media) > .node-strip {
  border-bottom: calc(var(--hairline) * 2) solid var(--card-rim);
}

.node[data-node-style='inverse']:not(.has-media) > .node-strip {
  border-bottom-color: color-mix(in srgb, var(--surface-base) 30%, transparent);
}

.node.has-media > .node-strip { align-self: stretch; }

.node[data-node-style='inverse'] .node-strip { color: var(--surface-base); }
.node[data-node-style='inverse'] .nf-status { border-color: var(--surface-base); }
.node[data-node-style='inverse'] .nf-count { color: var(--surface-base); }

.node[data-node-style='inverse'] .nf-att { color: var(--attach-ink); }

.node[data-root]:not(.media-no-chassis) {

  --root-tray-h: var(--root-tray-h-decl);

  padding-top: var(--root-tray-h);

  --card-rim: var(--line-strong);
  border-style: double;
  border-width: var(--root-rim-w);
  border-color: transparent;
  background: transparent;
}

.node[data-root]:not(.media-no-chassis) > .node-root-plate {
  position: absolute;
  inset: var(--root-tray-h) calc(-1 * var(--root-rim-w))
    calc(-1 * var(--root-rim-w)) calc(-1 * var(--root-rim-w));
  border: var(--root-rim-w) double var(--card-rim);
  border-radius: var(--radius-sm);
  background: var(--card-surface);

  z-index: 0;
  pointer-events: none;
}

.node[data-root]:not(.media-no-chassis) > .node-text,
.node[data-root]:not(.media-no-chassis) > .node-strip,
.node[data-root]:not(.media-no-chassis) > .node-media {
  position: relative;
  z-index: 1;
}

.node[data-root] {
  --root-tray-h-decl: calc(13px * var(--node-scale));
  --root-rim-w: calc(3px * var(--node-scale));
}

.node[data-root]:not(.media-no-chassis) > .node-root-tab {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  box-sizing: border-box;
  height: calc(var(--root-tray-h) + var(--hairline));
  display: flex;
  align-items: center;
  padding: 0 calc(var(--space-2) * var(--node-scale));

  border: var(--root-rim-w) double var(--card-rim);
  border-bottom: none;
  border-radius: calc(var(--radius-sm) * var(--node-scale))
    calc(var(--radius-sm) * var(--node-scale)) 0 0;
  background: var(--card-surface);
  font-family: var(--font-mono);
  font-size: calc(var(--root-tray-h) * 0.72);
  line-height: 1;
  white-space: nowrap;
  color: var(--text-secondary);
  z-index: 1;

  pointer-events: none;
}

.node[data-root]:not(.media-no-chassis):not(.node-shell) > .node-strip {
  margin-top: var(--root-rim-w);
}

.node.node-shell[data-root] > .node-root-tab,
.node.node-dot[data-root] > .node-root-tab { display: none; }

.node.node-shell[data-root],
.node.node-dot[data-root] { --root-tray-h: 0px; }

.node.node-dot[data-root] > .node-root-plate { display: none; }
.node.node-dot[data-root] { background: var(--card-line); }

.nf-mark {
  flex: 0 0 auto;
  display: inline-flex;

  align-items: center;
  line-height: 1;
}

.nf-mark[hidden] { display: none; }

.nf-mark .icon {
  width: var(--nf-glyph);
  height: var(--nf-glyph);
}

.nf-status {

  aspect-ratio: 1;
  width: round(var(--nf-glyph) * 0.62, 1px);
  height: round(var(--nf-glyph) * 0.62, 1px);

  border: round(var(--hairline) * 2 * var(--node-scale), 1px) solid transparent;
  border-radius: 50%;
  background: var(--led-ground);
  transition: box-shadow var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease);
}

.nf-att { color: var(--attach-ink); }

.nf-pin { color: var(--state-danger); }

.nf-said { color: var(--text-muted); }

@keyframes nf-pin-refused {
  0%   { transform: scale(1);    opacity: 1; }
  18%  { transform: scale(1.55); opacity: 1; }
  36%  { transform: scale(1);    opacity: 0.35; }
  54%  { transform: scale(1.55); opacity: 1; }
  72%  { transform: scale(1);    opacity: 0.35; }
  100% { transform: scale(1);    opacity: 1; }
}

.node[data-pin-refused] .nf-pin {
  transform-origin: center;
  animation: nf-pin-refused var(--pin-flash, 620ms) ease-in-out 1;
}

.node[data-pin-refused] {
  border-color: var(--state-danger);
}

@media (prefers-reduced-motion: reduce) {
  .node[data-pin-refused] .nf-pin {
    animation: none;
    outline: 2px solid var(--state-danger);
    outline-offset: 1px;
    border-radius: 2px;
  }
}

.nf-status[data-status] {
  background: var(--status-ink);
  border-color: color-mix(in srgb, var(--status-ink) 55%, var(--line-strong));
  box-shadow:
    0 0 calc(var(--nf-glyph) * 0.18) var(--status-ink),
    0 0 calc(var(--nf-glyph) * 0.55) color-mix(in srgb, var(--status-ink) 45%, transparent);
}

.nf-count {

  align-self: flex-start;
  margin-left: 1px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: calc(var(--nf-strip-h) * 0.5);
  line-height: 1;
}

.node-chevron {

  pointer-events: auto;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;

  min-width: calc(var(--nf-glyph) * 1.55);
  height: calc(var(--nf-glyph) * 1.55);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: none;
  color: var(--accent);
  font-family: var(--font-mono);

  font-size: calc(var(--nf-glyph) * 0.8);
  line-height: 1;
  cursor: pointer;
  transition: color var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease);
}

.node-chevron[hidden] { display: none; }

.node-chevron::before {
  content: '▾';

  font-size: calc(var(--nf-glyph) * 1.15);

  line-height: 1;

  transform: translateY(calc(var(--nf-glyph) * -0.06));
}

.node.collapsed .node-chevron::before { content: '▸'; }

.node-chevron:hover {
  color: var(--text-primary);
  text-shadow: 0 0 calc(var(--nf-glyph) * 0.45) var(--accent);
}

.node.node-shell {
  min-width: calc(96px * var(--node-scale));
  max-width: calc(180px * var(--node-scale));
  --card-pad-x: calc(var(--space-2) * var(--node-scale));
  padding: 0 var(--card-pad-x) calc(var(--space-1) * var(--node-scale));

  white-space: nowrap;

  --nf-strip-h: calc(13px * var(--node-scale));
}

.node.node-shell .node-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--type-sm);
  color: var(--text-secondary);
}

.node.node-shell .node-chevron {
  padding: 0 2px;
  border-color: transparent;
}

.node.node-shell .node-chevron::before { margin-right: 0; }

.node.node-shell.collapsed .node-chevron {
  color: var(--accent);
  border-color: var(--line-hairline);
}

.node.node-shell.is-comment,
.node.node-dot.is-comment {
  background-image: none;
  clip-path: none;
}

.node.node-dot.is-comment {
  border-left-width: var(--hairline);
  background-color: var(--text-muted);
}

.node.node-dot {
  min-width: 0;
  max-width: none;
  width: 22px;
  height: 8px;
  padding: 0;
  overflow: hidden;
  background: var(--card-line);
  border-color: transparent;
}

.node.node-dot .node-text,
.node.node-dot .node-strip,
.node.node-dot .node-chevron { display: none; }

.node.node-dot.selected {
  background: var(--card-line-selected);
  border-color: var(--card-line-selected);
}

.node[data-media-tier] > .node-text {

  text-align: center;

  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.node[data-status='todo'] { --status-ink: var(--text-muted); }
.node[data-status='doing'] { --status-ink: var(--accent); }
.node[data-status='blocked'] { --status-ink: var(--state-danger); }

.node[data-status='review'] { --status-ink: var(--state-review); }
.node[data-status='done'] { --status-ink: var(--state-ok); }

.node.has-notes::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-top: 5px solid var(--line-strong);
  border-left: 5px solid transparent;
  pointer-events: none;
}

.node.has-state { padding-bottom: calc((var(--space-2) + 15px) * var(--node-scale)); }

.node-state {
  position: absolute;
  left: var(--card-pad-x);
  right: var(--card-pad-x);
  bottom: calc(var(--space-2) * var(--node-scale));
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 10px;
  line-height: 1;
  pointer-events: none;
}

.node-tag {
  max-width: 76px;
  padding: 1px 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  border: var(--hairline) solid var(--line-hairline);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
}

.node-tag-more { flex: 0 0 auto; }

.node-due {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.node-due.overdue { color: var(--state-danger); }

.node.node-shell::after,
.node.node-dot::after { content: none; }

.node.node-shell .node-state,
.node.node-dot .node-state { display: none; }

.node.node-dot[data-status]:not(.selected) {
  background: var(--status-ink);
  border-color: transparent;
}

.fault-chip {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: 4;
  height: var(--control-height);
  padding: 0 var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-raised);
  color: var(--state-danger);
  border: var(--hairline) solid var(--state-danger);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
  font-family: var(--font-ui);
  font-size: var(--type-sm);
  line-height: 1;
  cursor: pointer;
}

.fault-chip[hidden] { display: none; }

.fault-chip::before {
  content: '!';
  font-family: var(--font-mono);
  font-weight: 700;
}

.fault-chip:hover { background: var(--surface-sunken); }

.marquee {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  border: var(--hairline) solid var(--accent);
  border-radius: var(--radius-sm);
}

.marquee[hidden] { display: none; }

.node.marquee-hit {
  border-color: var(--accent-quiet);
}

.glow-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}

.glow-edge {
  fill: none;
  stroke: var(--lit-color, var(--accent));
  stroke-width: 2.6;
  stroke-linecap: round;
  opacity: 0.34;
}

.glow-wave {
  fill: none;
  stroke: var(--lit-color, var(--accent));
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-dasharray: 14 100;
  animation: hl-wave var(--lit-wave, 1200ms) ease-out var(--lit-delay, 0ms) 1 both;
}

@keyframes hl-wave {
  from { stroke-dashoffset: 14; opacity: 1; }
  to { stroke-dashoffset: -100; opacity: 0.6; }
}

.node[data-lit],
.insp-text[data-lit],
.insp-mem-row[data-lit],
.insp-section[data-lit] {
  box-shadow:
    var(--lit-under, 0 0 #0000),
    0 0 0 1px color-mix(in srgb, var(--lit-color) 52%, transparent),
    0 0 10px 2px color-mix(in srgb, var(--lit-color) 26%, transparent);
}

.node[data-lit] {

  --lit-under: 0 0 #0000;
  border-color: color-mix(in srgb, var(--lit-color) 72%, var(--card-line));
}

.insp-text[data-lit] {
  --lit-under: 0 0 #0000;
  border-color: color-mix(in srgb, var(--lit-color) 72%, var(--line-hairline));
}

.insp-section[data-lit] {
  --lit-under: 0 0 #0000;
  border-radius: var(--radius-sm);
  border-top-color: color-mix(in srgb, var(--lit-color) 72%, var(--line-hairline));
}

.insp-mem-row[data-lit] {
  --lit-under: 0 0 #0000;
  border-color: color-mix(in srgb, var(--lit-color) 72%, var(--line-hairline));
}

.node.node-dot[data-lit] {
  border-color: var(--lit-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lit-color) 60%, transparent);
}

.node[data-lit-flash],
.insp-text[data-lit-flash],
.insp-mem-row[data-lit-flash],
.insp-section[data-lit-flash] {
  animation: hl-breathe var(--lit-beat, 400ms) ease-in-out var(--lit-delay, 0ms) var(--lit-flashes, 3);
}

@keyframes hl-breathe {
  0%, 100% {
    box-shadow:
      var(--lit-under, 0 0 #0000),
      0 0 0 1px color-mix(in srgb, var(--lit-color) 28%, transparent),
      0 0 6px 0 color-mix(in srgb, var(--lit-color) 16%, transparent);
  }
  50% {
    box-shadow:
      var(--lit-under, 0 0 #0000),
      0 0 0 3px color-mix(in srgb, var(--lit-color) 88%, transparent),
      0 0 24px 7px color-mix(in srgb, var(--lit-color) 62%, transparent);
  }
}

.hl-tags {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: visible;

  z-index: 2;
  pointer-events: none;
}

.hl-tag {
  position: absolute;
  transform: translateY(4px);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--lit-color) 22%, var(--card-bg));
  border: var(--hairline) solid color-mix(in srgb, var(--lit-color) 70%, transparent);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 10px;
  line-height: 1.4;
  white-space: nowrap;
}

.board-world.is-dim .node:not([data-lit]) {
  opacity: 0.22;
}

.board-world.is-dim .edge-layer,
.board-world.is-dim .seam-layer {
  opacity: 0.2;
}

.board-world.is-dim .node,
.board-world.is-dim .edge-layer,
.board-world.is-dim .seam-layer {
  transition: opacity var(--motion-slow, 240ms) var(--motion-ease);
}

@media (prefers-reduced-motion: reduce) {
  .node[data-lit-flash],
  .insp-text[data-lit-flash],
  .insp-mem-row[data-lit-flash],
  .insp-section[data-lit-flash],
  .glow-wave {
    animation: none;
  }

  .glow-wave { stroke-dasharray: none; opacity: 0.5; }

  .board-world.is-dim .node,
  .board-world.is-dim .edge-layer,
  .board-world.is-dim .seam-layer {
    transition: none;
  }
}

.shape-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}

.board-shape {
  pointer-events: all;
  stroke: var(--shape-ink, var(--line-strong));
  stroke-width: var(--shape-border, 2px);
  stroke-linejoin: round;
  stroke-linecap: round;
  fill: var(--shape-ink, var(--line-strong));

  fill-opacity: var(--shape-fill);
}

.board-shape[data-ink="0"] {
  fill: none;
}

.shape-layer-above .board-shape[data-ink="0"] {
  pointer-events: stroke;
}

.board-shape[data-pinned="1"] {
  cursor: default;
}

.board-shape:not([data-pinned="1"]) {
  cursor: move;
}

.shape-ghost {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  pointer-events: none;
  border: 1px dashed var(--card-line-selected);
  background: color-mix(in srgb, var(--card-line-selected) 12%, transparent);
  transform-origin: 0 0;
}

.shape-ghost[data-line] {
  border-color: transparent;
  background: none;
}

.shape-ghost[data-line="nw"],
.shape-ghost[data-line="se"] {
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    var(--card-line-selected) calc(50% - 1px),
    var(--card-line-selected) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

.shape-ghost[data-line="ne"],
.shape-ghost[data-line="sw"] {
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 1px),
    var(--card-line-selected) calc(50% - 1px),
    var(--card-line-selected) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

.shape-ghost[hidden] {
  display: none;
}

.board-viewport.is-placing-shape {
  cursor: crosshair;
}

.shape-frame {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  pointer-events: none;
  border: 1px solid var(--card-line-selected);
  z-index: 4;
}

.shape-frame[hidden] {
  display: none;
}

.shape-frame[data-locked="1"] {
  border-style: dashed;
  border-color: var(--accent-quiet);
}

.shape-frame[data-line="1"] {
  border-color: transparent;
}

.shape-grip {
  position: absolute;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  padding: 0;
  background: var(--surface-base);
  border: 1px solid var(--card-line-selected);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 22%);
  pointer-events: auto;
  transform-origin: 0 0;
  transform: scale(var(--handle-scale, 1)) translate(-50%, -50%);
}

.shape-grip[hidden] {
  display: none;
}

.shape-grip[data-axis="nwse"] { cursor: nwse-resize; }
.shape-grip[data-axis="nesw"] { cursor: nesw-resize; }
.shape-grip[data-axis="ns"] { cursor: ns-resize; }
.shape-grip[data-axis="ew"] { cursor: ew-resize; }

.shape-frame[data-line="1"] .shape-grip {
  border-radius: 50%;
}

.shape-frame.is-resizing .shape-grip,
.shape-frame.is-turning .shape-grip {
  opacity: 0.55;
}

.shape-rotate {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--shape-badge, 22px);
  height: var(--shape-badge, 22px);
  color: var(--card-line-selected);
  background: var(--surface-base);
  border: 1px solid var(--card-line-selected);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgb(0 0 0 / 22%);
  cursor: grab;
  transform-origin: 0 0;
  z-index: 5;
}

.shape-rotate .icon {
  width: 68%;
  height: 68%;
}

.shape-rotate:active {
  cursor: grabbing;
}

.shape-rotate[hidden] {
  display: none;
}

.shape-lock {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--shape-badge, 22px);
  height: var(--shape-badge, 22px);
  color: var(--state-danger);
  pointer-events: none;
  transform-origin: 0 0;
  z-index: 5;
}

.shape-lock .icon {
  width: 84%;
  height: 84%;
}

.shape-lock[hidden] {
  display: none;
}