.storage-linked,
.storage-controls,
.storage-scrub,
.storage-stats {
  --storage-blue: #355f9d;
  --storage-blue-soft: #e9eff8;
  --storage-amber: #92701b;
  --storage-amber-soft: #faf0d8;
  --storage-ink: var(--ink, #17221e);
  --storage-muted: var(--muted, #68746f);
  --storage-rule: var(--rule, #d7dfdb);
}

.storage-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.storage-controls button,
.storage-select select,
.storage-scrub-steps button {
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--storage-rule);
  background: #fff;
  color: var(--storage-ink);
  font: inherit;
  font-size: 12px;
}

.storage-controls button,
.storage-scrub-steps button {
  cursor: pointer;
  font-weight: 650;
}

.storage-controls button:hover,
.storage-controls button:focus-visible,
.storage-select select:focus-visible,
.storage-scrub-steps button:hover,
.storage-scrub-steps button:focus-visible {
  border-color: var(--teal, #17827b);
  outline: 3px solid var(--teal-soft, #d9f0ed);
  outline-offset: 1px;
}

.storage-controls button[aria-pressed='true'],
.storage-scrub-steps button[aria-pressed='true'] {
  border-color: var(--storage-ink);
  background: var(--storage-ink);
  color: #fff;
}

.storage-lede {
  max-width: 780px;
  margin: 0 0 18px;
  color: var(--storage-muted);
  font-size: 14px;
  line-height: 1.55;
}

.storage-select {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  color: var(--storage-muted);
  font-size: 12px;
  font-weight: 700;
}

.storage-scrub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}

.storage-control-label {
  color: var(--storage-muted);
  font-size: 12px;
  font-weight: 750;
}

.storage-scrub-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.storage-linked {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(230px, .55fr);
  gap: 20px;
  align-items: start;
  margin-top: 8px;
}

.storage-linked > :first-child {
  min-width: 0;
  overflow: hidden;
}

.storage-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.storage-svg text {
  fill: var(--storage-ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  letter-spacing: 0;
}

.storage-title {
  fill: var(--storage-ink);
  font-size: 14px;
  font-weight: 800;
}

.storage-label {
  fill: var(--storage-ink);
  font-size: 11px;
  font-weight: 700;
}

.storage-caption,
.storage-small {
  fill: var(--storage-muted);
  font-size: 11px;
}

.storage-value {
  fill: var(--storage-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 750;
}

.storage-line {
  fill: none;
  stroke: var(--teal, #17827b);
  stroke-width: 2;
}

.storage-detail {
  min-height: 150px;
  padding: 16px 16px 14px;
  border-left: 3px solid var(--teal, #17827b);
  background: var(--blue-soft, #e9eff8);
}

.storage-detail strong {
  display: block;
  margin-bottom: 8px;
  color: var(--storage-ink);
  font-size: 15px;
}

.storage-detail p {
  margin: 7px 0 0;
  color: var(--storage-ink);
  font-size: 12px;
  line-height: 1.55;
}

.storage-source {
  margin: 18px 0 0;
  color: var(--storage-muted);
  font-size: 12px;
  line-height: 1.5;
}

.storage-source strong {
  color: var(--storage-ink);
}

.storage-source span {
  display: block;
  color: var(--storage-muted);
  font-style: italic;
}

.storage-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 18px;
  border: 1px solid var(--storage-rule);
  background: var(--storage-rule);
}

.storage-stats > div {
  min-width: 0;
  padding: 12px;
  background: #fff;
}

.storage-stats span {
  display: block;
  margin-bottom: 5px;
  color: var(--storage-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.storage-stats strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--storage-ink);
  font-size: 12px;
  line-height: 1.35;
}

.storage-mark[data-inspectable] {
  cursor: pointer;
}

.storage-mark[data-inspectable]:focus-visible {
  outline: 3px solid var(--teal, #17827b);
  outline-offset: 3px;
}

.storage-mark[data-inspectable] rect,
.storage-mark[data-inspectable] circle,
.storage-mark[data-inspectable] path {
  transition: fill .16s ease, stroke .16s ease, stroke-width .16s ease, opacity .16s ease;
}

.storage-mark[data-inspectable]:hover rect,
.storage-mark[data-inspectable]:hover circle,
.storage-mark[data-inspectable]:focus-visible rect,
.storage-mark[data-inspectable]:focus-visible circle {
  stroke: var(--teal, #17827b);
  stroke-width: 3;
}

.p35-tick,
.p42-order {
  fill: none;
  stroke: var(--storage-rule);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.p35-write rect,
.p35-disk-object rect,
.p36-component rect,
.p39-entry path,
.p39-ofd rect,
.p40-pointer rect,
.p40-hop rect,
.p41-group rect,
.p42-home rect,
.p43-slot rect,
.p44-block > rect,
.p44-page rect,
.p45-recovery,
.p47-world rect,
.p48-cache rect {
  fill: #fff;
  stroke: var(--storage-rule);
  stroke-width: 1.5;
}

.p35-write.durable rect,
.p35-disk-object.durable rect,
.p42-record.durable circle,
.p42-home.new rect,
.p43-slot.live rect,
.p43-slot.copied rect,
.p44-page.valid rect,
.p47-world.selected rect {
  fill: var(--amber-soft, var(--storage-amber-soft));
  stroke: var(--storage-amber);
}

.p35-write.pending rect,
.p35-disk-object.pending rect,
.p42-record.pending circle,
.p44-page.stale rect,
.p47-packet.dropped rect,
.p48-datagram.dropped rect {
  fill: var(--coral-soft, #f6e1de);
  stroke: var(--coral, #c9534b);
}

.p35-causal-link,
.p36-setup-route,
.p36-dma-route,
.p36-pio-route,
.p36-data-route,
.p39-edge,
.p39-fd-link,
.p40-route,
.p41-head-path,
.p42-commit-route,
.p43-append-route,
.p43-imap-route,
.p43-read-route,
.p43-clean-route,
.p44-program-route,
.p44-copy-route,
.p45-data-route,
.p45-check-route,
.p47-world-branch,
.p48-protocol-boundary {
  fill: none;
  stroke: var(--teal, #17827b);
  stroke-width: 2;
}

.p35-crash-blade,
.p42-crash-blade {
  stroke: var(--coral, #c9534b);
  stroke-width: 3;
  stroke-dasharray: 6 4;
}

.p35-crash-label,
.p42-crash-label,
.p47-timeout-label {
  fill: var(--coral, #c9534b);
  font-size: 10px;
  font-weight: 800;
}

.p36-component.memory,
.p36-component.controller,
.p40-pointer,
.p40-hop.metadata {
  fill: var(--storage-blue-soft);
}

.p36-component.memory rect,
.p36-component.controller rect {
  fill: var(--storage-blue-soft);
  stroke: var(--storage-blue);
}

.p36-component.device rect,
.p36-component.device circle {
  fill: var(--storage-amber-soft);
  stroke: var(--storage-amber);
}

.p36-pio-route,
.p36-setup-route {
  stroke: var(--storage-blue);
}

.p36-interrupt-route {
  fill: none;
  stroke: var(--coral, #c9534b);
  stroke-width: 2.5;
  stroke-dasharray: 6 4;
}

.p36-status-route {
  fill: none;
  stroke: var(--storage-amber);
  stroke-width: 2.5;
  stroke-dasharray: 3 4;
}

.p36-packet {
  fill: var(--teal, #17827b);
  stroke: #fff;
  stroke-width: 1.5;
}

.p36-packet text {
  fill: #fff;
  font-size: 9px;
  font-weight: 800;
}

.p36-workline {
  stroke: var(--storage-rule);
  stroke-width: 3;
}

.p36-worktoken {
  fill: var(--teal, #17827b);
  stroke: #fff;
  stroke-width: 2;
}

.p36-timeline {
  margin-top: 14px;
}

.p36-row {
  display: grid;
  grid-template-columns: 60px repeat(7, minmax(0, 1fr));
  gap: 3px;
  margin-top: 5px;
}

.p36-row > strong {
  display: flex;
  align-items: center;
  color: var(--storage-ink);
  font-size: 11px;
}

.p36-cell {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 5px 3px;
  border: 1px solid var(--storage-rule);
  background: #fff;
  color: var(--storage-ink);
  font-size: 10px;
  line-height: 1.1;
  text-align: center;
}

.p36-cell.busy,
.p36-cell.poll,
.p36-cell.program-dma,
.p36-cell.dma-irq {
  background: var(--storage-blue-soft);
  border-color: var(--storage-blue);
}

.p36-cell.done,
.p36-cell.run-p2,
.p36-cell.copy-d1 {
  background: var(--teal-soft, #d9f0ed);
  border-color: var(--teal, #17827b);
}

.p36-time-labels {
  display: grid;
  grid-template-columns: 60px repeat(7, minmax(0, 1fr));
  gap: 3px;
  margin-top: 5px;
  color: var(--storage-muted);
  font-size: 9px;
}

.p36-time-labels span:nth-child(1) {
  grid-column: 2;
}

.p36-time-labels span:nth-child(2) {
  grid-column: 3 / span 4;
  text-align: center;
}

.p36-time-labels span:nth-child(3) {
  grid-column: 7 / span 2;
  text-align: right;
}

.p37-platter {
  fill: #f8faf9;
  stroke: var(--storage-rule);
  stroke-width: 2;
}

.p37-track {
  fill: none;
  stroke: #9ba8a3;
  stroke-width: 1.5;
}

.p37-radial {
  stroke: #dfe6e2;
  stroke-width: 1;
}

.p37-spindle {
  fill: var(--storage-ink);
}

.p37-head {
  fill: var(--teal, #17827b);
  stroke: #fff;
  stroke-width: 2;
}

.p37-head-arm {
  stroke: var(--teal, #17827b);
  stroke-width: 3;
  opacity: .72;
}

.p37-sector circle {
  fill: #fff;
  stroke: #83908b;
  stroke-width: 1.2;
}

.p37-sector.requested circle {
  fill: var(--teal-soft, #d9f0ed);
  stroke: var(--teal, #17827b);
}

.p37-sector.selected circle {
  fill: var(--amber-soft, var(--storage-amber-soft));
  stroke: var(--storage-amber);
  stroke-width: 3;
}

.p37-seek {
  fill: none;
  stroke: var(--storage-blue);
  stroke-width: 2;
  stroke-dasharray: 4 3;
}

.p37-rotation {
  fill: none;
  stroke: var(--teal, #17827b);
  stroke-width: 2;
  stroke-dasharray: 2 3;
}

.p37-transfer {
  fill: none;
  stroke: var(--coral, #c9534b);
  stroke-width: 4;
}

.p37-seek.selected,
.p37-rotation.selected,
.p37-transfer.selected {
  stroke-width: 4;
}

.p37-bar-seek {
  fill: var(--storage-blue);
}

.p37-bar-rotation {
  fill: var(--teal, #17827b);
}

.p37-bar-transfer {
  fill: var(--coral, #c9534b);
}

.p38-cell rect {
  fill: #fff;
  stroke: var(--storage-rule);
}

.p38-cell.selected rect {
  fill: var(--amber-soft, var(--storage-amber-soft));
  stroke: var(--storage-amber);
  stroke-width: 3;
}

.p38-cell.contributor rect {
  fill: var(--teal-soft, #d9f0ed);
  stroke: var(--teal, #17827b);
}

.p38-cell.missing rect {
  fill: var(--coral-soft, #f6e1de);
  stroke: var(--coral, #c9534b);
  stroke-width: 2;
}

.p38-failed-column {
  stroke: var(--coral, #c9534b);
  stroke-width: 3;
  stroke-dasharray: 6 4;
}

.p39-path-token rect {
  fill: #fff;
  stroke: var(--storage-rule);
}

.p39-path-token.active rect {
  fill: var(--teal-soft, #d9f0ed);
  stroke: var(--teal, #17827b);
}

.p39-entry path {
  fill: var(--storage-blue-soft);
  stroke: var(--storage-blue);
}

.p39-entry.removed path {
  fill: var(--coral-soft, #f6e1de);
  stroke: var(--coral, #c9534b);
  stroke-dasharray: 4 3;
}

.p39-entry.selected path,
.p39-inode.selected circle,
.p39-ofd.selected rect {
  fill: var(--teal-soft, #d9f0ed);
  stroke: var(--teal, #17827b);
  stroke-width: 3;
}

.p39-inode circle {
  fill: var(--storage-amber-soft);
  stroke: var(--storage-amber);
  stroke-width: 2;
}

.p39-ofd rect {
  fill: var(--teal-soft, #d9f0ed);
  stroke: var(--teal, #17827b);
}

.p39-fd-row rect {
  fill: #fff;
  stroke: var(--storage-rule);
  stroke-width: 1.5;
}

.p39-fd-row text {
  fill: var(--storage-ink);
}

.p39-separator {
  fill: var(--storage-muted);
  font-weight: 800;
}

.p40-pointer rect,
.p40-hop.metadata rect {
  fill: var(--storage-blue-soft);
  stroke: var(--storage-blue);
}

.p40-pointer.selected rect,
.p40-hop.result rect {
  fill: var(--teal-soft, #d9f0ed);
  stroke: var(--teal, #17827b);
  stroke-width: 3;
}

.p40-lbn rect {
  fill: #fff;
  stroke: var(--storage-rule);
}

.p40-lbn.selected rect {
  fill: var(--amber-soft, var(--storage-amber-soft));
  stroke: var(--storage-amber);
  stroke-width: 2;
}

.p41-group.local rect {
  fill: var(--teal-soft, #d9f0ed);
  stroke: var(--teal, #17827b);
}

.p41-group.scattered rect {
  fill: #fff;
  stroke: var(--storage-rule);
}

.p41-group.selected rect {
  stroke-width: 3;
}

.p41-cylinder-lines {
  stroke: #b7c3be;
  stroke-width: 1;
}

.p41-object.local rect {
  fill: var(--teal-soft, #d9f0ed);
  stroke: var(--teal, #17827b);
}

.p41-object.scattered rect {
  fill: var(--amber-soft, var(--storage-amber-soft));
  stroke: var(--storage-amber);
}

.p41-head-path.scattered {
  stroke: var(--coral, #c9534b);
  stroke-dasharray: 5 4;
}

.p42-record circle,
.p42-record path {
  fill: #fff;
  stroke: var(--storage-rule);
  stroke-width: 2;
}

.p42-record.durable circle,
.p42-record.durable path {
  fill: var(--amber-soft, var(--storage-amber-soft));
  stroke: var(--storage-amber);
}

.p42-record.commit path {
  fill: var(--teal-soft, #d9f0ed);
  stroke: var(--teal, #17827b);
  stroke-width: 3;
}

.p42-home.old rect {
  fill: var(--coral-soft, #f6e1de);
  stroke: var(--coral, #c9534b);
}

.p42-home.new rect {
  fill: var(--teal-soft, #d9f0ed);
  stroke: var(--teal, #17827b);
}

.p42-dependency {
  fill: none;
  stroke: var(--storage-blue);
  stroke-width: 2;
  stroke-dasharray: 4 3;
}

.storage-companion {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--storage-rule);
}

.storage-companion h4 {
  margin: 0 0 8px;
  color: var(--storage-ink);
  font-size: 16px;
}

.p42-recovery-box rect,
.p47-source rect {
  fill: #fff;
  stroke: var(--storage-rule);
  stroke-width: 1.5;
}

.p42-recovery-box.journal rect { fill: var(--teal-soft, #d9f0ed); stroke: var(--teal, #17827b); }
.p42-recovery-box.fsck rect { fill: var(--storage-blue-soft); stroke: var(--storage-blue); }
.p42-recovery-route,
.p47-source-route,
.p46-flow-route { fill: none; stroke: var(--teal, #17827b); stroke-width: 2.5; }

.p43-slot.dead rect {
  fill: var(--coral-soft, #f6e1de);
  stroke: var(--coral, #c9534b);
  stroke-dasharray: 4 3;
}

.p43-slot.live rect,
.p43-slot.copied rect {
  fill: var(--teal-soft, #d9f0ed);
  stroke: var(--teal, #17827b);
}

.p43-slot.copied rect {
  fill: var(--amber-soft, var(--storage-amber-soft));
  stroke: var(--storage-amber);
}

.p43-segment-c {
  fill: var(--amber-soft, var(--storage-amber-soft));
  stroke: var(--storage-amber);
  stroke-width: 2;
}

.p43-inode-id circle {
  fill: var(--storage-amber-soft);
  stroke: var(--storage-amber);
  stroke-width: 2;
}

.p44-block > rect {
  fill: #f7f9f8;
  stroke: var(--storage-rule);
}

.p44-page.invalid rect {
  fill: #f0f3f2;
  stroke: #a7b2ad;
}

.p44-page.erased rect {
  fill: var(--amber-soft, var(--storage-amber-soft));
  stroke: var(--storage-amber);
}

.p44-page.stale rect {
  fill: var(--coral-soft, #f6e1de);
  stroke: var(--coral, #c9534b);
  text-decoration: line-through;
}

.p44-page.valid rect {
  fill: var(--teal-soft, #d9f0ed);
  stroke: var(--teal, #17827b);
}

.p44-page.selected rect {
  stroke-width: 3;
}

.p44-erase-route,
.p44-copy-route {
  fill: none;
  stroke: var(--storage-amber);
  stroke-width: 2.5;
  stroke-dasharray: 5 3;
}

.p44-program-route {
  fill: none;
  stroke: var(--teal, #17827b);
  stroke-width: 2.5;
}

.p45-byte rect {
  fill: var(--teal-soft, #d9f0ed);
  stroke: var(--teal, #17827b);
}

.p45-byte.changed rect {
  fill: var(--coral-soft, #f6e1de);
  stroke: var(--coral, #c9534b);
  stroke-width: 2;
}

.p45-checksum circle {
  fill: var(--storage-blue-soft);
  stroke: var(--storage-blue);
  stroke-width: 2;
}

.p45-comparator.match circle {
  fill: var(--teal-soft, #d9f0ed);
  stroke: var(--teal, #17827b);
  stroke-width: 3;
}

.p45-comparator.mismatch circle {
  fill: var(--coral-soft, #f6e1de);
  stroke: var(--coral, #c9534b);
  stroke-width: 3;
}

.p45-recovery-route {
  fill: none;
  stroke: var(--storage-blue);
  stroke-width: 2;
  stroke-dasharray: 5 3;
}

.p45-recovery {
  fill: var(--storage-blue-soft);
  stroke: var(--storage-blue);
}

.p46-flow-box rect,
.p46-scope-chip rect {
  fill: #fff;
  stroke: var(--storage-rule);
  stroke-width: 1.5;
}

.p46-flow-box.failure rect { fill: var(--coral-soft, #f6e1de); stroke: var(--coral, #c9534b); }
.p46-flow-box.mechanism rect { fill: var(--storage-blue-soft); stroke: var(--storage-blue); }
.p46-flow-box.guarantee rect { fill: var(--teal-soft, #d9f0ed); stroke: var(--teal, #17827b); }
.p46-flow-box.limit rect { fill: var(--storage-amber-soft); stroke: var(--storage-amber); }
.p46-scope-chip.selected rect { fill: var(--teal-soft, #d9f0ed); stroke: var(--teal, #17827b); stroke-width: 3; }

.p46-matrix {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
  color: var(--storage-ink);
  font-size: 11px;
}

.p46-matrix caption {
  margin-bottom: 8px;
  text-align: left;
  font-size: 12px;
  font-weight: 800;
}

.p46-matrix th,
.p46-matrix td {
  padding: 8px 7px;
  border: 1px solid var(--storage-rule);
  text-align: left;
  vertical-align: top;
}

.p46-matrix thead th {
  background: var(--page, #f5f7f6);
  color: var(--storage-muted);
}

.p46-matrix th:first-child {
  min-width: 132px;
}

.p46-matrix .selected {
  background: var(--teal-soft, #d9f0ed);
  box-shadow: inset 0 -3px var(--teal, #17827b);
}

.p46-matrix td.none {
  color: #8a9791;
}

.p47-lifeline,
.p48-lifeline {
  fill: none;
  stroke: #a4b0ab;
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
}

.p47-packet rect,
.p48-datagram rect {
  fill: var(--teal-soft, #d9f0ed);
  stroke: var(--teal, #17827b);
  stroke-width: 1.5;
}

.p47-packet path,
.p48-datagram path {
  fill: none;
  stroke: var(--teal, #17827b);
  stroke-width: 2.5;
}

.p47-packet.dropped rect,
.p48-datagram.dropped rect {
  fill: var(--coral-soft, #f6e1de);
  stroke: var(--coral, #c9534b);
  stroke-dasharray: 5 3;
}

.p47-packet.dropped path,
.p48-datagram.dropped path {
  stroke: var(--coral, #c9534b);
  stroke-dasharray: 5 3;
}

.p47-packet.retry rect,
.p48-datagram.retry rect {
  fill: var(--amber-soft, var(--storage-amber-soft));
  stroke: var(--storage-amber);
}

.p47-packet.duplicate rect,
.p48-datagram.duplicate rect {
  fill: var(--coral-soft, #f6e1de);
  stroke: var(--coral, #c9534b);
}

.p47-timeout-line {
  stroke: var(--coral, #c9534b);
  stroke-width: 2;
  stroke-dasharray: 5 3;
}

.p47-world.selected rect {
  fill: var(--teal-soft, #d9f0ed);
  stroke: var(--teal, #17827b);
  stroke-width: 3;
}

.p47-source.client rect { fill: var(--storage-blue-soft); stroke: var(--storage-blue); }
.p47-source.network rect { fill: var(--storage-amber-soft); stroke: var(--storage-amber); }
.p47-source.server rect { fill: var(--teal-soft, #d9f0ed); stroke: var(--teal, #17827b); }
.p47-source.storage rect { fill: var(--coral-soft, #f6e1de); stroke: var(--coral, #c9534b); }
.p47-observation rect { fill: #fff; stroke: var(--storage-ink); stroke-width: 2; }

.p48-loss {
  fill: var(--coral, #c9534b);
}

.p48-loss-line {
  stroke: #fff;
  stroke-width: 2;
}

.p48-timer {
  fill: none;
  stroke: var(--storage-amber);
  stroke-width: 3;
}

.p48-timer.quiet {
  stroke: var(--storage-rule);
}

.p48-timer-hand {
  fill: none;
  stroke: var(--storage-amber);
  stroke-width: 2;
}

.p48-cache.active rect {
  fill: var(--amber-soft, var(--storage-amber-soft));
  stroke: var(--storage-amber);
  stroke-width: 3;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 800px) {
  .storage-linked {
    grid-template-columns: 1fr;
  }

  .storage-linked > :first-child {
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .storage-svg {
    min-width: 720px;
  }

  .storage-detail {
    min-height: 0;
  }

  .storage-stats {
    grid-template-columns: 1fr;
  }

  .storage-select {
    flex-wrap: wrap;
  }

  .storage-source {
    font-size: 11px;
  }
}