:root {
  




  --surface-raised: #fff;
  


  























  --content-gap: 0.9rem;
  --content-gap-wide: 1.5rem;
  --heading-gap: 0.3rem;

  --shell: var(--room);
  --shell-edge: var(--room-line);
  --shell-sunk: var(--surface);
  --ink: var(--text);
  --ink-soft: var(--text-muted);

  


  --console: #16181c;
  --console-edge: #2b2f36;
  --console-ink-soft: #8b9199;
  

  --console-cable: #6fb3e0;

  





  --brand: var(--accent);
  --brand-soft: var(--accent-soft);
  --green: var(--ok);
  --green-soft: var(--ok-soft);
  --amber: var(--warn);
  --amber-soft: var(--warn-soft);
  




  --red: var(--bad);
  --red-soft: var(--bad-soft);
  --red: var(--bad);
  --red-soft: var(--bad-soft);

  --radius: 6px;
  --sheet-inset: 16px;
  

  --touch: 44px;
  

}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body.workbench {
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--shell);
  color: var(--ink);
  font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

button,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}







.bar :focus-visible {
  outline-color: var(--structure-accent);
}




















.bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px clamp(10px, 2vw, 18px);
  background: var(--structure);
  color: var(--structure-ink);
  border-bottom: 1px solid var(--structure-line);
}








.titles {
  min-width: 0;
  flex: 1 1 auto;
}

.titles h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subtitle {
  margin: 0;
  font-size: 12px;
  color: var(--structure-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.action {
  min-height: var(--touch);
  padding: 0 14px;
  border: 1px solid var(--shell-edge);
  border-radius: var(--radius);
  background: var(--surface-raised);
  cursor: pointer;
  white-space: nowrap;
}

.action:hover {
  




  border-color: var(--ink-soft);
}






.bar .action {
  background: none;
  border-color: var(--structure-line);
  color: var(--structure-ink);
}

.bar .action:hover {
  border-color: var(--structure-muted);
}



























.action.brand-fill {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.action.brand-fill:hover {
  background: color-mix(in srgb, var(--accent) 85%, var(--accent-ink));
}


















.action.optional {
  background: none;
  border-style: dashed;
  border-color: var(--text-muted);
  color: var(--text);
}

.action.optional:hover {
  border-style: solid;
  border-color: var(--text);
  background: var(--accent-soft);
}




.action.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.action.primary:hover {
  





  background: color-mix(in srgb, var(--accent) 85%, var(--accent-ink));
}

.action.icon {
  min-width: var(--touch);
  padding: 0;
  display: grid;
  place-items: center;
}

.action.wide {
  width: 100%;
  margin-top: 4px;
}

.overflow {
  position: relative;
}

.menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 210px;
  padding: 6px;
  background: var(--surface-raised);
  





  color: var(--ink);
  


  border: 1px solid var(--overlay-keyline);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px -12px var(--overlay-shadow);
  display: grid;
  







  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 720px) {
  .menu {
    

    max-height: 40vh;
  }
}

.menu[hidden] {
  display: none;
}

.menu > * {
  min-height: var(--touch);
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 0;
  border-radius: 4px;
  background: none;
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}









.menu > *[hidden] {
  display: none;
}
















.menu > *:hover:not([role="group"]) {
  background: var(--shell-sunk);
}



.tabs {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 clamp(10px, 2vw, 18px);
  background: var(--shell-sunk);
  border-bottom: 1px solid var(--shell-edge);
  




}

.views {
  display: flex;
  gap: 2px;
}




.views {
  flex: 0 0 auto;
  margin-left: auto;
}

.view {
  min-height: var(--touch);
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  color: var(--ink-soft);
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}

.view[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--brand);
  font-weight: 600;
}

.view:hover {
  color: var(--ink);
}













.cli-modes {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

.view-caret {
  min-height: var(--touch);
  padding: 0 6px 0 2px;
  margin-left: -10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1;
}

.view-caret:hover {
  color: var(--ink);
}




.cli-modes .view[aria-selected="true"] + .view-caret {
  color: var(--ink);
  border-bottom-color: var(--brand);
}

.view-caret[hidden] {
  display: none;
}

.view-caret[aria-expanded="true"] {
  color: var(--ink);
}



.mode-menu {
  top: calc(100% + 4px);
  right: 0;
  left: auto;
  min-width: 210px;
}




.mode-menu [role="group"] + [role="group"] {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 4px;
}

.mode-menu [role="group"][hidden] {
  display: none;
}







.mode-menu > [role="group"] {
  min-height: 0;
  display: block;
  padding: 0;
  cursor: default;
}

.mode-menu [role="group"] > button {
  width: 100%;
  min-height: var(--touch);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 0;
  border-radius: 4px;
  background: none;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.mode-menu [role="group"] > button:hover,
.mode-menu [role="group"] > button:focus-visible {
  background: var(--shell-sunk);
}





.mode-menu [role="group"] > button::before {
  content: "";
  flex: 0 0 12px;
  font-size: 11px;
  line-height: 1;
  color: var(--brand);
}

.mode-menu [role="group"] > button[aria-checked="true"]::before {
  content: "\2713";
}

.mode-menu [role="group"] > button[aria-checked="true"] {
  color: var(--ink);
  font-weight: 600;
}



















#objective-placement-menu > [role="group"] {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 0;
}

#objective-placement-menu .menu-group-label {
  grid-column: 1 / -1;
  padding: 2px 2px 4px;
}

#objective-text-group {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 6px;
  border-top: 1px solid var(--line);
  padding: 6px 0 0;
}

#objective-text-group .menu-group-label {
  grid-column: 1 / -1;
  padding: 2px 2px 4px;
}



.text-size-glyph {
  flex: 0 0 auto;
  line-height: 1;
  font-weight: 600;
}

#objective-text-small .text-size-glyph { font-size: 11px; }
#objective-text-default .text-size-glyph { font-size: 14px; }
#objective-text-large .text-size-glyph { font-size: 17px; }

#objective-placement-group > button[data-objective-placement],
#objective-text-group > button[data-objective-text] {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 4px;
  border: 1px solid var(--shell-edge);
  border-radius: 4px;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 11px;
  line-height: 1;
  



  white-space: nowrap;
  cursor: pointer;
}

#objective-placement-group > button[data-objective-placement]:hover,
#objective-text-group > button[data-objective-text]:hover {
  background: var(--shell-sunk);
  color: var(--ink);
}

#objective-placement-group > button[aria-checked="true"],
#objective-text-group > button[aria-checked="true"] {
  border-color: var(--brand);
  background: var(--shell-sunk);
  color: var(--ink);
  font-weight: 600;
}




.placement-glyph {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 19px;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: 0.85;
}

.placement-glyph > i {
  position: absolute;
  background: currentColor;
}







#objective-placement-group > button[data-objective-placement="right"]
  .placement-glyph > i {
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 36%;
}

#objective-placement-group > button[data-objective-placement="left"]
  .placement-glyph > i {
  top: 1px;
  left: 1px;
  bottom: 1px;
  width: 36%;
}

#objective-placement-group > button[data-objective-placement="bottom"]
  .placement-glyph > i {
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 40%;
}




@media (max-width: 420px) {
  #objective-placement-menu > [role="group"] {
    grid-template-columns: 1fr;
  }

  #objective-placement-group > button[data-objective-placement],
  #objective-text-group > button[data-objective-text] {
    flex-direction: row;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 10px;
  }
}




.menu-group-label {
  display: block;
  padding: 4px 10px 2px;
  color: var(--ink-soft);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}





.pane-device[data-console-path="false"],
.pane-device-option[data-console-path="false"] {
  opacity: 0.55;
  cursor: not-allowed;
  text-decoration: line-through;
}





.node .status-dot {
  fill: var(--ink-soft);
  stroke: var(--field);
  stroke-width: 1.5;
  pointer-events: none;
}

.node[data-health="up"] .status-dot { fill: var(--green); }
.node[data-health="partial"] .status-dot { fill: var(--amber); }
.node[data-health="down"] .status-dot { fill: var(--red); }








.workspace {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.stage {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  position: relative;
}








.pane-devices {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 15;
  display: flex;
  gap: 2px;
  padding: 2px;
  background: color-mix(in srgb, var(--shell) 88%, transparent);
  border: 1px solid var(--shell-edge);
  border-radius: 999px;
  box-shadow: 0 4px 12px -6px rgba(35, 32, 27, 0.35);
}

.pane-devices[hidden] {
  display: none;
}










body:not([data-objectives="pinned"]):not([data-layout="phone"]):has(#objective:not([hidden]))
  .stage:not([data-mode="floating"]) .pane-devices {
  right: calc(min(420px, 100%) + 8px);
}



@media (max-width: 900px) {
  body[data-objectives="pinned"]:not([data-layout="phone"]):has(#objective:not([hidden]))
    .stage:not([data-mode="floating"]) .pane-devices {
    right: calc(min(420px, 100%) + 8px);
  }
}


.pane-devices.as-select {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.pane-device {
  min-height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  color: var(--ink-soft);
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.pane-device[aria-selected="true"] {
  color: #fff;
  background: var(--brand);
}

.pane-device:hover:not([aria-selected="true"]) {
  background: var(--shell-sunk);
}




.pane-devices.as-select {
  position: absolute;
  flex-direction: column;
  align-items: flex-end;
}

.pane-device-current {
  min-height: 30px;
  max-width: 12rem;
  padding: 0 24px 0 10px;
  border: 1px solid var(--shell-edge);
  border-radius: 6px;
  background: color-mix(in srgb, var(--shell) 92%, transparent);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}

.pane-device-current::after {
  content: "";
  position: absolute;
  right: 9px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  opacity: 0.7;
}

.pane-device-menu {
  margin-top: 4px;
  min-width: 100%;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface-raised);
  border: 1px solid var(--shell-edge);
  border-radius: 6px;
  box-shadow: 0 8px 20px -10px rgba(35, 32, 27, 0.45);
}

.pane-device-menu[hidden] {
  display: none;
}

.pane-device-option {
  min-height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 4px;
  background: none;
  text-align: left;
  color: var(--ink-soft);
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  cursor: pointer;
}

.pane-device-option:hover,
.pane-device-option:focus-visible {
  background: var(--shell-sunk);
  color: var(--ink);
  outline: none;
}

.pane-device-option[aria-checked="true"] {
  color: #fff;
  background: var(--brand);
}







@media (max-width: 640px) {
  .pane-devices {
    top: 4px;
    right: 4px;
    padding: 1px;
  }

  


  .pane-device,
  .pane-device-current {
    min-height: 44px;
    min-width: 44px;
    padding: 0 12px;
    font-size: 12px;
  }
}








body[data-objectives="pinned"] #objective {
  position: static;
  z-index: auto;
  





  flex: none;
  width: var(--objective, clamp(260px, 28%, 400px));
  box-shadow: none;
}










body[data-objectives="pinned"] #objective,
body[data-objectives="pinned"][data-objective-placement="right"] #objective {
  border-right: 0;
  border-left: 1px solid var(--shell-edge);
}

body[data-objectives="pinned"][data-objective-placement="left"] #objective {
  border-left: 0;
  border-right: 1px solid var(--shell-edge);
}








body[data-objectives="pinned"][data-objective-placement="left"]
  #objective-placement-menu {
  right: auto;
  left: 0;
}





body[data-objectives="pinned"][data-objective-placement="bottom"] #objective {
  width: auto;
  height: var(--objective, clamp(160px, 28%, 420px));
  border-left: 0;
  border-right: 0;
  border-top: 1px solid var(--shell-edge);
}







.objective-seam {
  display: none;
}

body[data-objectives="pinned"]:not([data-layout="phone"])
  .objective-seam:not([hidden]) {
  display: block;
  flex: none;
  width: 8px;
  cursor: col-resize;
  touch-action: none;
  background:
    linear-gradient(to right, transparent 3px, var(--shell-edge) 3px,
                    var(--shell-edge) 4px, transparent 4px);
}

body[data-objectives="pinned"]:not([data-layout="phone"])
  .objective-seam:not([hidden]):hover,
body[data-objectives="pinned"]:not([data-layout="phone"])
  .objective-seam:not([hidden]):focus-visible {
  background:
    linear-gradient(to right, transparent 2px, var(--brand) 2px,
                    var(--brand) 5px, transparent 5px);
  outline: none;
}




body[data-objectives="pinned"][data-objective-placement="bottom"]
  .objective-seam:not([hidden]) {
  width: auto;
  height: 8px;
  cursor: row-resize;
  background:
    linear-gradient(to bottom, transparent 3px, var(--shell-edge) 3px,
                    var(--shell-edge) 4px, transparent 4px);
}



@media (max-width: 900px) {
  .objective-seam {
    display: none !important;
  }
}














body[data-objectives="pinned"] .workspace,
body[data-objectives="pinned"][data-objective-placement="right"] .workspace {
  flex-direction: row;
}

body[data-objectives="pinned"][data-objective-placement="left"] .workspace {
  flex-direction: row-reverse;
}




body[data-objectives="pinned"][data-objective-placement="bottom"] .workspace {
  flex-direction: column;
}



body[data-objectives="pinned"] .drawer-body {
  overflow: auto;
}

.drawer-head .action.icon[aria-pressed="true"] {
  background: var(--brand-soft);
  border-color: var(--brand);
}





@media (max-width: 900px) {
  #objective-pin {
    display: none;
  }

  body[data-objectives="pinned"] #objective {
    position: fixed;
    width: min(420px, 100%);
    border-left: 1px solid var(--shell-edge);
    border-right: 0;
  }
}

.panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.panel[hidden] {
  display: none;
}


















.stage[data-mode="split"] {
  display: grid;
  grid-template-columns: var(--split, 46%) auto 1fr;
  grid-template-areas: "topology divider cli";
}

.stage[data-mode="split"][data-split-placement="left"] {
  grid-template-columns: 1fr auto var(--split, 46%);
  grid-template-areas: "cli divider topology";
}

.stage[data-mode="split"][data-split-placement="bottom"] {
  grid-template-columns: 1fr;
  grid-template-rows: var(--split, 46%) auto 1fr;
  grid-template-areas: "topology" "divider" "cli";
}

.stage[data-mode="split"] .panel {
  position: relative;
  inset: auto;
  min-width: 0;
  min-height: 0;
}

.stage[data-mode="split"] #panel-topology { grid-area: topology; }
.stage[data-mode="split"] #panel-cli { grid-area: cli; }



.stage[data-split-placement="bottom"] .divider {
  width: auto;
  height: 8px;
  cursor: row-resize;
}

.stage[data-split-placement="bottom"] .divider::after {
  inset: -4px 0;
}

.stage[data-split-placement="bottom"][data-dragging="1"] {
  cursor: row-resize;
}














.stage[data-mode="floating"] {
  overflow: hidden;
}

.stage[data-mode="floating"] #panel-cli,
.stage[data-mode="floating"] .console-window {
  inset: auto;
  left: var(--float-left, 16px);
  top: var(--float-top, 16px);
  width: var(--float-width, 560px);
  height: var(--float-height, 360px);
  



  z-index: var(--float-z, 18);
  border: 1px solid var(--shell-edge);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px -18px rgba(35, 32, 27, 0.55);
  overflow: hidden;
}



.console-window {
  background: var(--console);
}

.stage[data-mode="floating"] #panel-cli[data-minimized="true"],
.stage[data-mode="floating"] .console-window[data-minimized="true"] {
  height: auto;
}

.stage[data-mode="floating"] #panel-cli[data-minimized="true"] #terminal-host,
.stage[data-mode="floating"] #panel-cli[data-minimized="true"] #pane-devices,
.stage[data-mode="floating"] #panel-cli[data-minimized="true"] #cli-empty,
.stage[data-mode="floating"] #panel-cli[data-minimized="true"] .float-resize,
.stage[data-mode="floating"] .console-window[data-minimized="true"] .terminal-host,
.stage[data-mode="floating"] .console-window[data-minimized="true"] .float-resize {
  display: none;
}

.float-bar {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-height: var(--touch);
  padding: 2px 6px 2px 12px;
  background: var(--shell);
  border-bottom: 1px solid var(--shell-edge);
  cursor: move;
  user-select: none;
  touch-action: none;
}

.stage[data-mode="floating"] .float-bar {
  display: flex;
}

.float-bar:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.float-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.06em;
}

.float-controls {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}

.float-resize {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  cursor: nwse-resize;
  touch-action: none;
  background:
    linear-gradient(135deg, transparent 0 55%, var(--shell-edge) 55% 65%, transparent 65% 75%, var(--shell-edge) 75% 85%, transparent 85%);
}

.stage[data-mode="floating"] .float-resize {
  display: block;
}


.stage[data-mode="floating"] #pane-devices {
  top: calc(var(--touch) + 10px);
}

#panel-cli[data-dragging],
.console-window[data-dragging] {
  user-select: none;
}

.divider {
  grid-area: divider;
  width: 8px;
  cursor: col-resize;
  background: var(--shell-edge);
  border: 0;
  padding: 0;
  position: relative;
}

.divider[hidden] {
  display: none;
}



.divider::after {
  content: "";
  position: absolute;
  inset: 0 -4px;
}

.divider:hover,
.divider:focus-visible {
  background: var(--brand);
  outline: none;
}



.stage[data-dragging="1"] {
  user-select: none;
  cursor: col-resize;
}

.stage[data-dragging="1"] .panel {
  pointer-events: none;
}


.terminal-host {
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px 12px;
  background: var(--console);
  



  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.terminal-host .xterm {
  height: 100%;
}






.term-keys {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  background: var(--shell-sunk);
  border-top: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
  




  overscroll-behavior-x: contain;
  


  flex-wrap: nowrap;
}

.term-keys[hidden],
body.workbench[data-cramped="true"] .term-keys {
  display: none;
}

.term-key {
  flex: 0 0 auto;
  min-width: 52px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.term-key[hidden] {
  display: none;
}



.canvas {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  









  background: var(--field);
  cursor: grab;
  touch-action: none;
  

}

.canvas:active {
  cursor: grabbing;
}

.canvas svg {
  width: 100%;
  height: 100%;
  display: block;
}













.canvas {
  position: relative;
}

#animation {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.packet {
  fill: var(--green);
  stroke: var(--field);
  stroke-width: 1.5;
}








.packet-mark[data-event-id] {
  pointer-events: auto;
  cursor: pointer;
}

.packet-mark .packet {
  fill: var(--proto, var(--green));
  stroke: var(--field);
  stroke-width: 1.5;
}

.packet-mark .packet-label {
  fill: var(--proto-ink);
  font: 600 10.5px/1 var(--font-ui, system-ui, sans-serif);
  letter-spacing: 0.02em;
  paint-order: stroke;
  pointer-events: none;
  user-select: none;
}

.packet-mark.flood .packet {
  fill: var(--field);
  stroke: var(--proto, var(--green));
  stroke-width: 2;
}

.packet-mark.flood .packet-label {
  fill: var(--proto, var(--green));
}

.packet-mark.drop .packet {
  stroke: var(--red);
  stroke-width: 2.5;
}

.packet-mark.filter .packet {
  fill: var(--field-line);
}





.packet.flood {
  fill: var(--field);
  stroke: var(--green);
  stroke-width: 2;
}

.packet.filter {
  fill: var(--field-line);
  stroke: var(--field);
}

.packet.drop {
  fill: var(--red);
  stroke: var(--field);
}

.packet.repeat {
  fill: var(--green);
  opacity: 0.65;
}






.spark-core {
  fill: var(--warn);
}

.spark-halo {
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
}

@media (prefers-reduced-motion: reduce) {
  


  .spark-halo {
    display: none;
  }
}











.node {
  cursor: pointer;
}




.node .hit {
  fill: transparent;
}





.node .halo {
  


  fill: var(--select-field);
  stroke: none;
  opacity: 0;
  transition: opacity 90ms ease-out;
}

.node:hover .halo {
  opacity: 0.45;
}

.node.selected .halo,
.node:focus-visible .halo {
  opacity: 1;
}

.node:focus {
  outline: none;
}

.node:focus-visible .halo {
  stroke: var(--brand);
  stroke-width: 1.5;
}




.node[data-active="true"] .halo {
  opacity: 0.6;
  stroke: var(--brand);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}


.node .hostname {
  font: 600 13px ui-monospace, SFMono-Regular, Menlo, monospace;
  fill: var(--ink);
  text-anchor: middle;
}














.icon .body {
  fill: var(--device-fill);
  stroke: var(--device-edge);
  stroke-width: 1.8;
  stroke-linejoin: round;
}








.icon-switch .top {
  fill: color-mix(in srgb, var(--device-switch) 78%, #fff);
}

.icon-switch .side {
  fill: color-mix(in srgb, var(--device-switch) 78%, #000);
}










.icon-router .body { fill: var(--device-router); }
.icon-switch .front { fill: var(--device-switch); }
.icon-hub .body { fill: var(--device-switch); }
.icon-server .body { fill: var(--device-server); }
.icon-host .body,
.icon-windows-host .body { fill: var(--device-endpoint); }
.icon-alpine-host .body { fill: var(--device-terminal); }




.icon .screen {
  fill: var(--device-screen);
  stroke: none;
}



.icon .port {
  fill: var(--device-mark);
  stroke: none;
}



.icon .mark {
  fill: none;
  stroke: var(--device-mark);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}





.icon.endpoint .mark {
  stroke: var(--device-mark);
  stroke-width: 1.4;
}




.icon .stand {
  fill: none;
  stroke: var(--device-fill);
  stroke-width: 2.4;
  stroke-linecap: round;
}







.node.selected .icon .body {
  stroke: var(--select-ink);
}

.node.selected .icon .mark {
  stroke: var(--select-ink);
}




.node[data-reloading="true"] .icon {
  opacity: 0.35;
}













.node .handle .grab {
  fill: transparent;
}

.node .handle .dot {
  fill: var(--surface-raised);
  stroke: var(--brand);
  stroke-width: 2;
  opacity: 0;
  transition: opacity 90ms ease-out;
}

.node:hover .handle .dot,
.node:focus-visible .handle .dot,
.node.selected .handle .dot {
  opacity: 1;
}

.node .handle {
  cursor: crosshair;
}





.canvas:not([data-mode="sandbox"]) .handle {
  display: none;
}






.cable-draft {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 6 5;
  pointer-events: none;
}

.cable-draft.valid {
  stroke: var(--brand);
  stroke-dasharray: none;
}




.node.target .halo {
  opacity: 1;
  fill: var(--green-soft);
  stroke: var(--green);
  stroke-width: 1.5;
}

.node.target .icon .body,
.node.target .icon .mark {
  stroke: var(--green);
}




.canvas.placing {
  cursor: crosshair;
}




#add-shape[aria-expanded="true"],
body[data-placing-shape] #add-shape {
  

  outline: 2px solid var(--accent);
  outline-offset: 1px;
}


.canvas.cabling {
  cursor: crosshair;
}

.canvas.cabling[data-drop="ok"] {
  cursor: copy;
}

.canvas.cabling[data-drop="no"] {
  cursor: no-drop;
}

.canvas.moving {
  cursor: grabbing;
}


.link {
  stroke: var(--green);
  stroke-width: 2.5;
  stroke-linecap: round;
  



  pointer-events: none;
}

.link.down {
  stroke: var(--red);
  stroke-dasharray: 5 4;
}

.link.admin-down {
  stroke: var(--field-line);
  stroke-dasharray: 2 5;
}









.link.stp-blocked {
  



  stroke: var(--ink-soft);
  stroke-width: 2;
  opacity: 0.85;
}



.link.stp-moving {
  stroke: var(--amber);
}





.link-underlay {
  


  stroke: var(--ink-soft);
  stroke-width: 2.5;
  stroke-linecap: round;
  pointer-events: none;
}

.link.stp-mixed {
  stroke: var(--green);
  stroke-dasharray: 7 6;
}




.link-grab {
  stroke: transparent;
  stroke-width: 14;
  stroke-linecap: round;
  cursor: pointer;
}

.link.selected {
  stroke: var(--brand);
  stroke-width: 4;
  stroke-dasharray: none;
}

.link-label {
  font: 10px ui-monospace, SFMono-Regular, Menlo, monospace;
  fill: var(--ink-soft);
  text-anchor: middle;
  pointer-events: none;
}













body[data-link-labels="hidden"] .link-label {
  display: none;
}

body[data-link-colours="hidden"] .link,
body[data-link-colours="hidden"] .link-underlay {
  stroke: var(--field-line);
  stroke-width: 2.5;
  stroke-dasharray: none;
  opacity: 1;
}

body[data-link-colours="hidden"] .link.selected {
  stroke: var(--brand);
  stroke-width: 4;
}

body[data-device-status="muted"] .node[data-endpoint="false"] .status-dot,
body[data-endpoint-status="muted"] .node[data-endpoint="true"] .status-dot {
  fill: var(--field-line);
}










.end-light {
  pointer-events: none;
  stroke: var(--surface);
  stroke-width: 1.2;
  fill: var(--green);
}




.end-light.down {
  fill: var(--surface);
  stroke: var(--ink-soft);
  stroke-width: 1.6;
}

.end-light.admin-down {
  fill: var(--field-line);
  stroke: var(--surface);
}

.end-light.stp-blocking {
  fill: var(--amber);
}

.end-light.stp-listening,
.end-light.stp-learning {
  fill: var(--surface);
  stroke: var(--amber);
  stroke-width: 1.6;
  animation: end-light-walk 1.2s ease-in-out infinite alternate;
}

.end-light.mixed {
  fill: var(--green);
  stroke: var(--amber);
  stroke-width: 1.4;
}

@keyframes end-light-walk {
  from { opacity: 1; }
  to { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .end-light.stp-listening,
  .end-light.stp-learning {
    animation: none;
  }
}

body[data-interface-status-lights="hidden"] .end-light {
  display: none;
}



.node-actions {
  position: absolute;
  z-index: 20;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-raised);
  border: 1px solid var(--shell-edge);
  border-radius: var(--radius);
  box-shadow: 0 10px 22px -10px rgba(35, 32, 27, 0.4);
}

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












.node-actions.stacked {
  flex-direction: column;
  align-items: stretch;
  min-width: 11rem;
}

.node-actions.stacked button,
.node-actions.stacked .node-submenu-anchor > button {
  text-align: left;
}



.node-actions.stacked .node-submenu-anchor {
  display: flex;
}

.node-actions.stacked .node-submenu {
  top: 0;
  left: calc(100% + 4px);
}







.console-grab {
  stroke: transparent;
  stroke-width: 10;
  pointer-events: stroke;
  cursor: pointer;
  fill: none;
}





.console-cable.selected {
  stroke-width: 3.5;
  filter: brightness(1.25);
}








.node-actions .link-conditions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 17rem;
  padding: 4px 8px;
  font-size: 0.85rem;
}

.node-actions .link-conditions select {
  min-height: var(--touch);
  max-width: 100%;
}

.node-actions .link-conditions .hint {
  margin: 0;
  font-size: 0.78rem;
  opacity: 0.8;
}

.node-actions button {
  min-height: var(--touch);
  padding: 0 12px;
  border: 0;
  border-radius: 4px;
  background: none;
  cursor: pointer;
}

.node-actions button:hover {
  background: var(--shell-sunk);
}

.node-actions button.danger {
  color: var(--red);
}




.node-submenu-anchor {
  position: relative;
  display: inline-flex;
}

.node-submenu-anchor > button {
  min-height: var(--touch);
  padding: 0 12px;
  border: 0;
  border-radius: 4px;
  background: none;
  cursor: pointer;
}

.node-submenu-anchor > button:hover {
  background: var(--shell-sunk);
}

.node-submenu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 21;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  background: var(--surface-raised);
  border: 1px solid var(--shell-edge);
  border-radius: var(--radius);
  box-shadow: 0 10px 22px -10px rgba(35, 32, 27, 0.4);
  white-space: nowrap;
}

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

.node-submenu button {
  min-height: var(--touch);
  padding: 0 12px;
  border: 0;
  border-radius: 4px;
  background: none;
  text-align: left;
  cursor: pointer;
}

.node-submenu button:hover:not(:disabled) {
  background: var(--shell-sunk);
}

.node-submenu button:disabled {
  opacity: 0.5;
  cursor: default;
}








.config-panel {
  position: absolute;
  z-index: 30;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(320px, calc(100% - 32px));
  padding: 16px;
  background: var(--surface-raised);
  




  border: 1px solid var(--overlay-keyline);
  border-radius: var(--radius);
  box-shadow: 0 16px 34px -12px var(--overlay-shadow);
}

.config-panel h2 {
  margin: 0 0 12px;
  font-size: 15px;
}

.config-field {
  display: block;
  margin-bottom: 10px;
}

.config-field span {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--ink-soft);
}

.config-field input,
.config-field select {
  width: 100%;
  min-height: var(--touch);
  padding: 0 8px;
  font: inherit;
  border: 1px solid var(--shell-edge);
  border-radius: 4px;
  background: var(--surface-raised);
}




.config-message {
  margin: 0 0 10px;
  color: var(--red);
  font-size: 13px;
}

.config-actions {
  display: flex;
  gap: 8px;
}

.config-actions button {
  min-height: var(--touch);
  padding: 0 14px;
  border: 1px solid var(--shell-edge);
  border-radius: 4px;
  background: var(--shell-sunk);
  cursor: pointer;
}

.config-actions button.secondary {
  background: none;
}










.config-panel.net-settings {
  width: min(720px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow: auto;
  padding: 16px 18px 18px;
}



.config-panel.net-settings .ns-drag-handle {
  cursor: move;
  touch-action: none;
  user-select: none;
}

.config-panel.net-settings .ns-drag-handle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.config-panel.net-settings[data-dragging] {
  box-shadow: 0 24px 44px -12px rgba(35, 32, 27, 0.55);
}

.ns-body {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.ns-section-title,
.ns-section h3 {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}




.ns-right {
  min-width: 0;
}

.ns-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--shell-edge);
}

.ns-tab {
  min-height: var(--touch);
  padding: 6px 12px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
}

.ns-tab[aria-selected="true"] {
  color: var(--ink);
  background: var(--shell-sunk);
  border-color: var(--shell-edge);
  font-weight: 600;
}

.ns-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.ns-section[hidden] {
  display: none;
}


.ns-name-message {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
}

.adapter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.adapter-list .adapter {
  width: 100%;
  min-height: var(--touch);
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--shell-sunk);
  border: 1px solid var(--shell-edge);
  border-radius: var(--radius);
  cursor: pointer;
}

.adapter-list .adapter[aria-selected="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.adapter-list .adapter-state {
  font-size: 12px;
  color: var(--ink-soft);
}

.ns-section {
  padding: 0 0 12px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--shell-edge);
}

.ns-info {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 0;
  font-size: 13px;
}

.ns-info dt {
  color: var(--ink-soft);
}

.ns-info dd {
  margin: 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.ns-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
}

.ns-modes legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--ink-soft);
  flex-basis: 100%;
}



.ns-service-nav {
  display: flex;
  gap: 4px;
  margin: 0 0 10px;
  border-bottom: 1px dashed var(--shell-edge);
}

.ns-service-tab {
  min-height: var(--touch);
  padding: 4px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
}

.ns-service-tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.ns-scopes {
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
}

.ns-scope {
  border: 1px solid var(--shell-edge);
  border-radius: 6px;
  background: var(--shell-sunk);
}

.ns-scope-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  min-height: var(--touch);
  padding: 6px 10px;
  cursor: pointer;
  list-style: none;
}

.ns-scope-summary::-webkit-details-marker {
  display: none;
}

.ns-scope-summary::before {
  content: "\25B8";
  margin-right: 2px;
  color: var(--ink-soft);
}

.ns-scope[open] > .ns-scope-summary::before {
  content: "\25BE";
}

.ns-scope-title {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
}

.ns-scope-subnet {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  color: var(--ink-soft);
}

.ns-scope-serving {
  font-size: 12px;
  color: var(--ink-soft);
}

.ns-scope-idle {
  font-style: italic;
}

.ns-scope-body {
  padding: 4px 10px 10px;
  border-top: 1px solid var(--shell-edge);
}

.ns-exclusions {
  display: grid;
  gap: 6px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.ns-exclusion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.ns-exclusion input {
  min-width: 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.ns-exclusion-dash {
  color: var(--ink-soft);
}

.ns-exclusion-remove {
  min-width: var(--touch);
  min-height: var(--touch);
  border: 1px solid var(--shell-edge);
  border-radius: 4px;
  background: none;
  font: inherit;
  cursor: pointer;
}

.ns-binding {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ns-binding-text {
  flex: 1 1 auto;
  min-width: 0;
}

.ns-binding-clear {
  min-width: var(--touch);
  min-height: var(--touch);
  border: 1px solid var(--shell-edge);
  border-radius: 4px;
  background: none;
  font: inherit;
  cursor: pointer;
}

.ns-add-exclusion,
.ns-add-scope,
.ns-remove-scope {
  margin: 2px 0 8px;
}

.ns-radio,
.ns-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--touch);
  cursor: pointer;
}

.ns-radio input:disabled + span {
  color: var(--ink-soft);
  text-decoration: line-through;
}

.ns-note {
  display: block;
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--ink-soft);
}


.ns-note[hidden],
.ns-lease[hidden] {
  display: none;
}

.ns-lease {
  margin: 0 0 10px;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 4px;
  background: var(--shell-sunk);
  border: 1px solid var(--shell-edge);
}

.ns-lease[data-lease-bound="false"] {
  color: var(--warn);
  border-color: var(--warn);
}

.net-settings .config-field input,
.net-settings .config-field select {
  background: var(--well);
  border-color: var(--well-line);
  box-shadow: inset 0 1px 2px var(--well-shadow);
}

.net-settings .config-field input:read-only,
.net-settings .config-field input:disabled,
.net-settings .config-field select:disabled {
  background: var(--surface-raised);
  color: var(--ink-soft);
  box-shadow: none;
}

.net-settings .config-field input:focus-visible {
  background: var(--paper);
}

.net-settings .config-actions {
  padding-top: 4px;
}

.net-settings .config-field {
  margin-bottom: 8px;
}

.empty {
  margin: auto;
  padding: 24px;
  color: var(--ink-soft);
  text-align: center;
}








#cli-empty[hidden] {
  display: none;
}











#topology-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  pointer-events: none;
}

#cli-empty {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--console);
  color: var(--console-ink-soft);
}



.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border-left: 1px solid var(--shell-edge);
  box-shadow: -18px 0 40px -24px rgba(35, 32, 27, 0.5);
}

.drawer[hidden] {
  display: none;
}




.sheet > .drawer-head {
  margin: 0 calc(-1 * var(--sheet-inset));
}

.drawer-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px 10px 18px;
  border-bottom: 1px solid var(--shell-edge);
}

.drawer-head h2 {
  margin: 0;
  font-size: 15px;
}

.drawer-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 18px;
}


























#objective-hints .aside p,
#objective-solution p,
.hints li,
#step-body > p,
#step-questions li,
#step-insight-body,
#step-hint-body {
  white-space: pre-wrap;
}



































#objective {
  --prose: 15.5px;
}

body[data-objective-text="small"] #objective {
  --prose: 14px;
}

body[data-objective-text="large"] #objective {
  --prose: 17.5px;
}

#objective .scenario,
#objective #step-body > p,
#objective #step-questions li,
#objective #step-insight-body,
#objective #step-hint-body,
#objective #objective-hints .aside p,
#objective #objective-solution p,






#objective .hints > li {
  font-size: var(--prose);
  line-height: 1.6;
}

.scenario {
  margin: 0 0 20px;
  white-space: pre-wrap;
}

.drawer-body h3 {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}












.drawer-tabs {
  display: flex;
  gap: 18px;
  margin: -4px 0 16px;
  border-bottom: 1px solid var(--shell-edge);
}






.drawer-tabs.solo {
  border-bottom: none;
}

.drawer-tabs.solo .drawer-tab {
  cursor: default;
  border-bottom-color: transparent;
}

.drawer-tabs[hidden] {
  display: none;
}

.drawer-tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 6px 1px 8px;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
}

.drawer-tab[aria-selected="true"] {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--accent);
}















#objective-hints .aside {
  border-top: 1px solid var(--shell-edge);
  padding: 2px 0 4px;
}

#objective-hints {
  








  border-top: 1px dashed var(--room-line);
  padding-top: 2px;
}

#objective-hints .aside:first-child {
  border-top: 0;
}



















#objective-solution {
  border-top: 2px solid var(--text-muted);
  padding-top: 10px;
}

#objective-solution p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
}





#objective-solution .verdict-commands {
  margin-top: 2px;
}

#objective-solution .solution-offer {
  


  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

#objective-hints summary {
  cursor: pointer;
  padding: 9px 0;
  font-size: 13px;
  color: var(--text);
  list-style: none;
}

#objective-hints summary::-webkit-details-marker {
  display: none;
}



#objective-hints summary::before {
  content: "+";
  display: inline-block;
  width: 14px;
  





  color: var(--text-muted);
  font-weight: 600;
}

#objective-hints .aside[open] summary::before {
  content: "\2212";
}

#objective-hints .aside p {
  margin: 0 0 12px 14px;
  font-size: 14px;
  line-height: 1.6;
}















.active-labs {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.active-lab {
  min-height: var(--touch);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--overlay-tile-edge);
  border-radius: var(--radius);
  background: var(--overlay-tile);
}

.active-lab-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}













.guide {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 40;
  width: min(320px, calc(100vw - 32px));
  padding: 14px 16px 12px;
  background: var(--surface-raised);
  color: var(--ink);
  



  border: 1px solid var(--overlay-keyline);
  border-left: 2px solid var(--brand);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px -12px var(--overlay-shadow);
  








  pointer-events: none;
}

.guide-actions button {
  pointer-events: auto;
}










.guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: auto;
  cursor: grab;
  
  touch-action: none;
}

.guide.dragging .guide-head {
  cursor: grabbing;
}

.guide-head .guide-where {
  margin: 0;
}

.guide-close {
  flex: none;
}





.guide.moved {
  left: var(--guide-x);
  top: var(--guide-y);
  right: auto;
  bottom: auto;
}

.guide[hidden] {
  display: none;
}

.guide-where {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.guide-title {
  margin: 0 0 6px;
  font-size: 15px;
}

.guide-body {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.55;
}

.guide-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}




.guide-target {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 3px;
}



.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  



  background: var(--overlay-backdrop);
}

.sheet-backdrop[hidden] {
  display: none;
}

.sheet {
  width: min(460px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  
















  padding: 0 var(--sheet-inset) var(--sheet-inset);
  background: var(--surface-raised);
  






  border: 1px solid var(--overlay-keyline);
  border-radius: 10px;
  box-shadow: 0 24px 60px -24px var(--overlay-shadow);
}

.choices {
  display: grid;
  gap: 8px;
  padding: 14px 16px 0;
}



.sheet .count {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0 0;
  font-weight: 600;
}

.sheet .count input {
  width: 4.5em;
  min-height: var(--touch);
  padding: 4px 8px;
  border: 1px solid var(--shell-edge);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: inherit;
  font: inherit;
  text-align: center;
}




.choice {
  min-height: var(--touch);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  



  border: 1px solid var(--overlay-tile-edge);
  border-radius: var(--radius);
  background: var(--overlay-tile);
  cursor: pointer;
  text-align: left;
}










.choice.unavailable {
  opacity: 0.45;
  cursor: not-allowed;
  grid-template-columns: auto 1fr auto;
}

.choice.unavailable:hover,
.choice.unavailable:focus-visible {
  border-color: var(--overlay-tile-edge);
  background: var(--overlay-tile);
}

.choice .choice-note {
  font-size: 0.82em;
  color: var(--muted);
  white-space: nowrap;
}

.choice:hover {
  border-color: var(--brand);
  background: var(--overlay-tile-hover);
}




.choice:focus-visible {
  border-color: var(--brand);
  background: var(--overlay-tile-hover);
}

.choice[aria-pressed="true"],
.choice[aria-selected="true"] {
  border-color: var(--brand);
  background: var(--overlay-tile-selected);
}

.choice .label {
  font-weight: 600;
}





@media (min-width: 480px) {
  .choices {
    grid-template-columns: 1fr 1fr;
  }
}

.choice svg {
  width: 30px;
  height: 30px;
  stroke-linecap: round;
  stroke-linejoin: round;
}








.ports {
  display: grid;
  gap: 6px;
  padding: 16px;
}

.port {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.port .who {
  font: 600 14px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ports select {
  min-width: 8.5em;
  min-height: var(--touch);
  padding: 0 8px;
  border: 1px solid var(--shell-edge);
  border-radius: var(--radius);
  background: var(--surface-raised);
  max-width: 100%;
}



.cable {
  justify-self: center;
  color: var(--ink-soft);
}



.action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ports select:disabled {
  background: var(--shell-sunk);
  color: var(--ink-soft);
}





.sheet-note {
  margin: 0;
  font-size: 12px;
  color: var(--ink-soft);
}

.dev-note {
  margin: 0 16px;
  font-size: 12px;
  color: var(--ink-soft);
}

.sheet > .action.wide {
  
  width: 100%;
  margin: 12px 0 0;
}










.sheet-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 14px 0 0;
}



.verdict {
  padding: 28px 24px 22px;
  text-align: center;
}

.verdict-mark {
  margin: 0 auto 14px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 22px;
}

.verdict.passed .verdict-mark {
  background: var(--green-soft);
  color: var(--green);
}










.verdict.converging .verdict-mark {
  color: var(--ink-soft);
}

.verdict.failed .verdict-mark {
  background: var(--red-soft);
  color: var(--red);
}







.verdict-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.verdict-actions .action {
  flex: 1 1 0;
  min-height: var(--touch);
}



.action.optional {
  background: none;
}





.verdict-more {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--shell-edge);
  text-align: left;
}

.verdict-more[hidden] {
  display: none;
}

.verdict-more h3 {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.verdict-more-body {
  margin: 0;
  white-space: pre-wrap;
  font-size: 14.5px;
  line-height: 1.6;
}



.verdict-device {
  margin: 14px 0 4px;
  font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink-soft);
}

.verdict-lines {
  margin: 0;
  padding: 8px 10px;
  background: var(--surface);
  border-radius: var(--radius);
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  overflow-x: auto;
}

.verdict h2 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.completion {
  margin: 6px 0 0;
  font: 600 24px/1.2 Georgia, "Iowan Old Style", "Times New Roman", serif;
}

.completion:empty {
  display: none;
}

.verdict-body {
  margin: 12px 0 0;
  color: var(--ink-soft);
}

.hints {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.hints:empty {
  display: none;
}

.hints li {
  padding: 8px 12px;
  margin-top: 6px;
  border-radius: 4px;
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 13px;
}



.status {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  



  z-index: 45;
  margin: 0;
  padding: 9px 15px;
  border-radius: 999px;
  











  background: var(--text);
  color: var(--room);
  font-size: 13px;
  pointer-events: none;
}

.status:empty {
  display: none;
}

.provisional {
  flex: 0 0 auto;
  padding: 7px 16px;
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 12px;
  

  border-bottom: 1px solid var(--amber);
}

.provisional[hidden] {
  display: none;
}

.dev-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 12px 16px 0;
  padding: 10px 12px;
  background: var(--surface-raised);
  border: 1px solid var(--shell-edge);
  border-radius: var(--radius);
  font-size: 12px;
}

.dev-controls label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
}

.dev-controls select {
  min-height: 34px;
  padding: 0 6px;
  border: 1px solid var(--shell-edge);
  border-radius: 4px;
  background: var(--surface-raised);
}

.dev-controls .action {
  min-height: 34px;
}

#panel-diagnostics {
  overflow: auto;
  padding: 16px;
  background: var(--field);
}

.dev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  padding: 12px 16px;
}

.dev-grid h2 {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.grid {
  width: 100%;
  border-collapse: collapse;
  font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.grid td {
  padding: 3px 8px 3px 0;
  

  border-bottom: 1px solid var(--room-line);
  white-space: nowrap;
}

.grid .up { color: var(--green); }
.grid .down { color: var(--red); }
.grid .warn { color: var(--amber); }

.sim-time {
  margin: 6px 16px 0;
  font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink-soft);
}




























body.workbench[data-layout="phone"] {
  height: var(--vvh, 100dvh);
}





body.workbench[data-cramped="true"] .bar,
body.workbench[data-cramped="true"] .tabs,
body.workbench[data-cramped="true"] #status {
  display: none;
}

body.workbench[data-cramped="true"] #cramped-exit {
  display: inline-flex;
}

.cramped-exit {
  display: none;
  position: fixed;
  top: 4px;
  right: 6px;
  z-index: 40;
  min-height: 32px;
  min-width: 56px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--shell-sunk);
  color: var(--ink);
  font-size: 12px;
  opacity: 0.92;
}

@media (max-width: 760px) {
  body.workbench {
    height: 100dvh;
  }

  



  .ns-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .adapter-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(140px, 1fr);
    overflow-x: auto;
  }

  .config-panel.net-settings {
    top: 8px;
    transform: translate(-50%, 0);
    max-height: calc(100% - 16px);
  }

  






  .bar {
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 4px 8px;
  }

  .titles {
    flex: 1 1 0;
    min-width: 0;
  }

  .subtitle {
    display: none;
  }

  .titles h1 {
    font-size: 14px;
    

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .actions {
    flex: 1 0 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-bottom: 2px;
  }

  






  .views {
    flex: 0 1 auto;
    min-width: 0;
  }

  

  .action {
    padding: 0 11px;
  }

  .tabs {
    padding: 0 4px;
    flex-wrap: wrap;
  }

  .view {
    padding: 0 11px;
  }

  .drawer {
    width: 100%;
    border-left: 0;
  }

  .sheet-backdrop {
    align-items: end;
    padding: 0;
  }

  
  .sheet {
    width: 100%;
    max-height: 88dvh;
    border-radius: 14px 14px 0 0;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  


























  #picker .sheet {
    height: 88dvh;
    display: flex;
    flex-direction: column;
    

    overflow: hidden;
  }

  #picker .drawer-head,
  #picker .drawer-tabs {
    flex: 0 0 auto;
  }

  #picker [role="tabpanel"] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    

    overscroll-behavior: contain;
  }

  

  .port {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .dev-grid {
    grid-template-columns: 1fr;
  }

  .dev-controls {
    margin: 12px 8px 0;
  }
}















body.workbench[data-layout="phone"] {
  height: 100dvh;
}

body[data-layout="phone"] .stage[data-mode="steps"] {
  display: none;
}

body[data-layout="phone"] .workspace > #objective {
  position: static;
  z-index: auto;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  border: 0;
  box-shadow: none;
}


body[data-layout="phone"] #objective-pin {
  display: none;
}



body[data-layout="phone"] .menu {
  max-width: calc(100vw - 16px);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}









.sheet.ai {
  max-width: 34rem;
  text-align: left;
}

.ai-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  



  border-left: 3px solid var(--accent);
  background: rgba(138, 106, 59, 0.08);
  font-size: 0.95rem;
  line-height: 1.45;
}

.ai-steps {
  margin: 0 0 16px;
  padding-left: 1.25rem;
  line-height: 1.6;
}

.ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.ai-errors {
  margin: 4px 0 14px;
  padding: 12px;
  border: 1px solid rgba(150, 60, 50, 0.35);
  border-radius: 6px;
  background: rgba(150, 60, 50, 0.06);
}

.ai-errors h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.ai-fault-list {
  margin: 0 0 12px;
  padding-left: 1.1rem;
  max-height: 12rem;
  overflow-y: auto;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.85rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}



.ai-errors[hidden] {
  display: none;
}







.steps {
  margin: 0 0 1rem;
}
















.command-block {
  

  margin: 0;
  padding: 0.6rem 0.75rem;
  background: var(--well);
  border-left: 2px solid var(--shell-edge);
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
}


















#steps > *,
#step-body > * {
  margin-top: 0;
  margin-bottom: 0;
}

#steps > * + *,
#step-body > * + * {
  margin-top: var(--content-gap);
}

#steps > #step-title {
  margin-top: var(--heading-gap);
}



#step-body > .command-block + *,
#step-body > * + .command-block {
  margin-top: var(--content-gap-wide);
}





#steps > #step-body:has(> .command-block:last-child) + * {
  margin-top: var(--content-gap-wide);
}

.step-position {
  

  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

.steps h3 {
  margin: 0;
}

.step-unavailable {
  margin: 0;
  padding: 0.5rem 0.6rem;
  border-left: 3px solid currentColor;
  font-size: 0.85rem;
  opacity: 0.85;
}

.step-questions {
  

  margin: 0;
  padding-left: 1.1rem;
}

.step-questions li {
  margin: 0.25rem 0;
}





.steps .aside {
  margin: 0;
  padding-left: 10px;
  

  border-left: 2px solid var(--room-line);
  font-size: 0.9rem;
}

.steps .aside summary {
  cursor: pointer;
  opacity: 0.85;
}

.step-observation {
  margin: 0;
  font-size: 0.8rem;
  opacity: 0.75;
}

.step-nav {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.step-nav .action[disabled] {
  opacity: 0.4;
  cursor: default;
}









.step-demo {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(35, 32, 27, 0.16);
  border-radius: 6px;
  background: rgba(35, 32, 27, 0.03);
}

.demo-title {
  margin: 0;
  font-weight: 600;
}

.demo-caveat {
  margin: 6px 0 0;
  padding-left: 10px;
  


  border-left: 3px solid var(--amber);
  font-size: 0.92em;
  opacity: 0.85;
}

.demo-controls {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.demo-suggest {
  margin: 8px 0 0;
  font-size: 0.95em;
}








.sim-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--room-line);
  background: var(--surface);
}

.sim-bar .action[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.sim-status {
  font-size: 0.9em;
  color: var(--text-muted);
}




#topology .node[data-movable="false"] {
  cursor: pointer;
}

.sim-pacing-note {
  margin: 0;
  padding: 2px 10px 4px;
  font-size: 0.8em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--room-line);
  background: var(--surface);
}





.sim-hint {
  margin: 0;
  padding: 6px 10px 7px;
  font-size: 0.86em;
  line-height: 1.35;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 88%, var(--accent));
  border-bottom: 1px solid var(--accent);
}
.sim-hint-line {
  display: block;
}
.sim-hint-line[hidden] {
  display: none;
}

.sim-timeline {
  



  flex: 0 0 28%;
  min-height: 28%;
  max-height: 28%;
  margin: 0;
  padding: 6px 12px 6px 28px;
  overflow-y: auto;
  border-top: 1px solid var(--room-line);
  background: var(--surface);
  font-size: 0.88em;
}

.sim-timeline[hidden] {
  display: none;
}

.sim-timeline .sim-step {
  list-style: none;
  margin: 6px 0 2px -16px;
  color: var(--text-muted);
  font-variant: small-caps;
}

.sim-timeline .sim-crossing[data-dropped="true"] {
  color: var(--bad);
}




.sim-timeline[data-focused="true"] .sim-crossing[data-focus="false"] {
  opacity: 0.55;
}

.sim-timeline .sim-crossing[data-focus="true"] {
  font-weight: 600;
}

.sim-timeline .sim-note {
  display: block;
  font-weight: 400;
  color: var(--text-muted);
}

.sim-timeline .sim-note[hidden] {
  display: none;
}





.sim-timeline .sim-at {
  float: right;
  margin-left: 8px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.sim-timeline .sim-crossing {
  cursor: pointer;
}

.sim-timeline .sim-crossing[aria-expanded="true"] {
  background: var(--accent-soft);
  border-radius: 4px;
}
















.sim-inspector {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 42;
  width: min(440px, calc(100vw - 32px));
  max-height: min(62vh, calc(100vh - 36px));
  overflow-y: auto;
  padding: 6px 12px 10px;
  border: 1px solid var(--overlay-keyline);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px -12px var(--overlay-shadow);
  background: var(--surface-raised);
  font-size: 0.86em;
}



.sim-inspector.moved {
  left: var(--inspector-x);
  top: var(--inspector-y);
  right: auto;
  bottom: auto;
}

.sim-inspector[hidden] {
  display: none;
}

.sim-inspector-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  

  cursor: move;
  touch-action: none;
}

.sim-inspector.dragging .sim-inspector-bar {
  cursor: grabbing;
}

.sim-layer {
  margin: 4px 0;
}

.sim-layer > summary {
  cursor: pointer;
  font-weight: 600;
}

.sim-fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 14px;
  margin: 4px 0 6px 14px;
}

.sim-fields dt {
  color: var(--text-muted);
  font-family: var(--font-mono, ui-monospace, monospace);
}

.sim-fields dd {
  margin: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  overflow-wrap: anywhere;
}

.sim-fields dd[data-status="not_modelled"] {
  color: var(--text-muted);
  font-style: italic;
}

.sim-fields dd[data-status="derived"] small {
  color: var(--text-muted);
}


.sim-bar .action[data-suggested="true"]:not([aria-pressed="true"]) {
  box-shadow: 0 0 0 2px var(--accent-soft);
  border-color: var(--accent);
}



















.console-cable {
  stroke: var(--console-cable);
  stroke-width: 2;
  stroke-dasharray: 3 4;
  stroke-linecap: round;
  pointer-events: none;
  opacity: 0.95;
}

.console-cable-label {
  font: 8px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  fill: var(--console-cable);
  text-anchor: middle;
  pointer-events: none;
}

body[data-link-labels="hidden"] .console-cable-label {
  display: none;
}









.shape {
  fill: none;
  stroke: var(--shape-slate);
  stroke-width: 2;
  pointer-events: none;
}

.shape[data-stroke="slate"] { stroke: var(--shape-slate); }
.shape[data-stroke="blue"] { stroke: var(--shape-blue); }
.shape[data-stroke="green"] { stroke: var(--shape-green); }
.shape[data-stroke="amber"] { stroke: var(--shape-amber); }
.shape[data-stroke="red"] { stroke: var(--shape-red); }
.shape[data-stroke="violet"] { stroke: var(--shape-violet); }
.shape[data-stroke="teal"] { stroke: var(--shape-teal); }


.shape[data-fill="slate"] { fill: var(--shape-slate-fill); }
.shape[data-fill="blue"] { fill: var(--shape-blue-fill); }
.shape[data-fill="green"] { fill: var(--shape-green-fill); }
.shape[data-fill="amber"] { fill: var(--shape-amber-fill); }
.shape[data-fill="red"] { fill: var(--shape-red-fill); }
.shape[data-fill="violet"] { fill: var(--shape-violet-fill); }
.shape[data-fill="teal"] { fill: var(--shape-teal-fill); }
.shape[data-fill="cyan"] { fill: var(--shape-cyan-fill); }
.shape[data-fill="orange"] { fill: var(--shape-orange-fill); }
.shape[data-fill="pink"] { fill: var(--shape-pink-fill); }
.shape[data-fill="lime"] { fill: var(--shape-lime-fill); }
.shape[data-fill="brown"] { fill: var(--shape-brown-fill); }




























.shape[data-fill="slate"][data-fill-style="solid"] { fill: var(--shape-slate); }
.shape[data-fill="blue"][data-fill-style="solid"] { fill: var(--shape-blue); }
.shape[data-fill="green"][data-fill-style="solid"] { fill: var(--shape-green); }
.shape[data-fill="amber"][data-fill-style="solid"] { fill: var(--shape-amber); }
.shape[data-fill="red"][data-fill-style="solid"] { fill: var(--shape-red); }
.shape[data-fill="violet"][data-fill-style="solid"] { fill: var(--shape-violet); }
.shape[data-fill="teal"][data-fill-style="solid"] { fill: var(--shape-teal); }
.shape[data-fill="cyan"][data-fill-style="solid"] { fill: var(--shape-cyan); }
.shape[data-fill="orange"][data-fill-style="solid"] { fill: var(--shape-orange); }
.shape[data-fill="pink"][data-fill-style="solid"] { fill: var(--shape-pink); }
.shape[data-fill="lime"][data-fill-style="solid"] { fill: var(--shape-lime); }
.shape[data-fill="brown"][data-fill-style="solid"] { fill: var(--shape-brown); }

.shape.selected {
  stroke-dasharray: 6 4;
}







.shape-label {
  font: 600 13px system-ui, sans-serif;
  letter-spacing: 0.02em;
  fill: var(--shape-slate);
  pointer-events: none;
}

.shape-label[data-stroke="slate"] { fill: var(--shape-slate); }
.shape-label[data-stroke="blue"] { fill: var(--shape-blue); }
.shape-label[data-stroke="green"] { fill: var(--shape-green); }
.shape-label[data-stroke="amber"] { fill: var(--shape-amber); }
.shape-label[data-stroke="red"] { fill: var(--shape-red); }
.shape-label[data-stroke="violet"] { fill: var(--shape-violet); }
.shape-label[data-stroke="teal"] { fill: var(--shape-teal); }






.shape[data-fill-style="solid"] + .shape-label,
.shape-label[data-fill-style="solid"] {
  fill: var(--field);
  paint-order: stroke;
}


.shape-label-input {
  flex: 1;
  min-width: 10em;
  min-height: 26px;
  padding: 0 6px;
  border: 1px solid var(--shell-edge);
  border-radius: 4px;
  background: var(--well, var(--surface-raised));
  color: var(--text);
  font: inherit;
}




.shape-edge {
  fill: none;
  stroke: transparent;
  stroke-width: 12;
  pointer-events: stroke;
  cursor: move;
}


.shape-handle {
  fill: var(--surface-raised);
  stroke: var(--text-muted);
  stroke-width: 1.5;
  pointer-events: all;
  cursor: nwse-resize;
}



.shape-actions {
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  






  max-width: calc(100vw - 20px);
}

.swatches {
  display: flex;
  align-items: center;
  gap: 4px;
  



  flex-wrap: wrap;
}

.swatch-label {
  min-width: 4.5em;
  font-size: 0.85rem;
  color: var(--text-muted);
}







.node-actions .swatch {
  width: 24px;
  min-height: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--shell-edge);
  border-radius: 4px;
  background: var(--swatch, transparent);
  cursor: pointer;
}




.node-actions .swatch.current {
  width: 26px;
  height: 26px;
  border-width: 2px;
  cursor: default;
}

.swatch-current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 8.5em;
  font-size: 0.85rem;
  color: var(--text);
}


.node-actions .swatch[data-color="none"] {
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--text-muted) 50%,
                    transparent calc(50% + 1px)),
    var(--field);
}

.node-actions .swatch.chosen {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


.annotation {
  font: 12px system-ui, sans-serif;
  

  fill: var(--note-ink);
  pointer-events: none;
}


.annotation.editable {
  pointer-events: all;
  cursor: move;
}








.canvas-hint {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  z-index: 3;
  margin: 0;
  padding: 8px 18px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
  background: color-mix(in srgb, var(--field) 88%, var(--accent));
  border: 1px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--text) 12%, transparent);
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100% - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}


.canvas-hint-line {
  display: block;
}

.canvas-hint-line[hidden] {
  display: none;
}








.sheet-backdrop.anchored {
  display: block;
}

.sheet-backdrop.anchored .sheet {
  position: absolute;
}




@media (min-width: 700px) {
  #picker .drawer-head {
    cursor: move;
    touch-action: none;
  }

  #picker .sheet.dragging .drawer-head {
    cursor: grabbing;
  }
}



.shape-swatch {
  width: 22px;
  height: 16px;
  border: 1.5px solid var(--brand);
  border-radius: 3px;
  background: color-mix(in srgb, var(--brand) 14%, transparent);
}

.canvas-hint[hidden] {
  display: none;
}

.note-editor {
  position: absolute;
  z-index: 4;
  margin: 0;
}

.note-editor input {
  min-width: 16rem;
  font: 13px system-ui, sans-serif;
  padding: 0.3rem 0.5rem;
}






.stp-phase {
  fill: var(--warn);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.stp-phase.learning {
  
  fill: var(--ok);
}











.zoom-controls {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 4px rgb(0 0 0 / 12%);
  pointer-events: auto;
}

.zoom-btn {
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.zoom-btn:hover:not(:disabled) { background: var(--surface-raised); }
.zoom-btn:disabled { opacity: 0.4; cursor: default; }

.zoom-fit {
  font-size: 12px;
  padding: 0 8px;
}



.zoom-level {
  min-width: 42px;
  text-align: center;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
  user-select: none;
}









.report-field {
  display: block;
  margin: 10px 0 4px;
  font-size: 13px;
  font-weight: 600;
}

#report textarea {
  width: 100%;
  box-sizing: border-box;
  

  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--field-line);
  background: var(--field);
  color: var(--text);
  resize: vertical;
}

#report textarea:focus-visible {
  

  outline: 2px solid var(--accent);
  outline-offset: 1px;
}




.report-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
}

.report-consent input {
  margin: 0.2rem 0 0;
  flex: 0 0 auto;
}

#report-state-note {
  margin: 0.3rem 0 0;
}