.hardware-scene {
  --hardware-ink: #30312d;
  --hardware-muted: #777870;
  --hardware-led: #668d70;
  position: absolute;
  inset: 0;
  color: var(--hardware-ink);
  overflow: hidden;
  container-type: inline-size;
  isolation: isolate;
}

.hardware-art {position: absolute; inset: 1% 0 20%;}
.hardware-canvas {display: block; width: 100%; height: 100%; overflow: visible;}
.hardware-bot-mark {position: absolute; left: 13.9%; top: 26.25%; width: 8.6%; height: auto; transform: translate(-50%, -50%);}
.hardware-canvas :is(path, polygon, ellipse) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.hardware-bench {color: #dadbd5;}
.hardware-bench polygon {stroke-dasharray: 2 7; stroke-width: .65;}
.hardware-bench path {stroke-width: .65;}
.hardware-future-route {stroke-dasharray: 2 7; opacity: .45;}
.hardware-future-arrow {opacity: .42; stroke-width: .75!important;}
.hardware-cable {stroke-width: 1.1!important; opacity: .8;}
.hardware-cable-twin {stroke-width: .65!important; opacity: .4;}
.hardware-gateway-case {fill: #fff!important; stroke-width: 1!important;}
.hardware-gateway-chip {opacity: .5; stroke-width: .7!important;}
.hardware-gateway-ports {opacity: .6; stroke-width: .8!important;}
.hardware-event-marks path {stroke: #688797; stroke-width: 2!important;}
.hardware-layer-guides {opacity: .23;}
.hardware-layer-guides path {stroke-dasharray: 2 6; stroke-width: .6;}
.hardware-base-bottom {opacity: .55;}
.hardware-base-face {fill: #fff!important; fill-opacity: .92; stroke-opacity: .64;}
.hardware-base-rim {stroke-opacity: .8;}
.hardware-base-inner {opacity: .28; stroke-width: .65!important;}
.hardware-case-seam {opacity: .3; stroke-width: .65!important;}
.hardware-pcb-plane {fill: #fff!important; fill-opacity: .92; stroke-opacity: .6;}
.hardware-pcb-edge {opacity: .35; stroke-width: .7!important;}
.hardware-chip polygon {fill: #fff; stroke-opacity: .78;}
.hardware-chip path {stroke-width: .8; stroke-opacity: .6;}
.hardware-chip-inner {stroke-opacity: .28!important;}
.hardware-trace {opacity: .32; stroke-width: .7!important;}
.hardware-pcb-hole {stroke-width: .65!important; opacity: .42;}
.hardware-lid-top {fill: #fff!important; fill-opacity: .88; stroke-opacity: .85;}
.hardware-lid-edge {opacity: .5; stroke-width: .8!important;}
.hardware-button-plate {stroke-width: .7!important; stroke-opacity: .4;}
.hardware-led-surface, .hardware-led-inner {fill: var(--hardware-led)!important; stroke: var(--hardware-led)!important; stroke-width: .7!important;}
.hardware-led-surface {stroke-opacity: .22;}
.hardware-button-detail {stroke-width: .8!important; opacity: .4;}
.hardware-port polygon {fill: #fff; stroke-opacity: .8;}
.hardware-port-contact {stroke-width: 1.5!important; opacity: .45;}
.hardware-plug polygon, .hardware-plug > path:first-of-type {fill: #fff;}
.hardware-plug {stroke-opacity: .85;}
.hardware-plug-seam {stroke-width: .65!important; opacity: .4;}
.hardware-packet {color: var(--hardware-led);}
.hardware-packet path {stroke-width: 1.8;}
.hardware-scene[data-mode="button"] .hardware-packet {color: #688797;}
.hardware-scene[data-online="false"] .hardware-cable {opacity: .35;}
.hardware-scene[data-online="false"] .hardware-usb-label {color: #996f5a;}

.hardware-label {
  position: absolute;
  color: var(--hardware-muted);
  font: 10px/1.35 'Courier New', monospace;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
}

.hardware-bot-label {left: 14%; top: 37%; color: var(--hardware-ink);}
.hardware-future-label {left: 14%; top: 53%; font-size: 9px;}
.hardware-gateway-label {left: 28.5%; top: 80%; color: var(--hardware-ink); text-align: center;}
.hardware-gateway-label span {display: block; color: var(--hardware-muted); margin-top: 3px; font-size: 9px;}
.hardware-usb-label {left: 43%; top: 78%; font-size: 9px;}
.hardware-board-label {left: 69%; top: 5%; color: var(--hardware-ink);}

.hardware-console {position: absolute; bottom: 1%; left: 5%; right: 5%; text-align: center;}
.hardware-controls {display: flex; justify-content: center; align-items: center; gap: 24px;}
.home-scene .hardware-controls button, .hardware-controls button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  min-width: 54px;
  margin: 0;
  padding: 0 5px;
  border: 0;
  background: transparent;
  color: var(--hardware-muted);
  font: 11px/1.3 'Courier New', monospace;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.hardware-controls button[aria-pressed="true"] {color: var(--hardware-ink); text-decoration: underline; text-underline-offset: 5px;}
.hardware-controls button:hover {color: var(--hardware-ink);}
.hardware-controls button:focus-visible {outline: 2px solid var(--hardware-ink); outline-offset: 1px;}
.hardware-control-icon {display: inline-block; position: relative; width: 9px; height: 9px; flex: none;}
.hardware-led-icon {border: 1px solid var(--hardware-led); border-radius: 50%; background: var(--hardware-led);}
.hardware-button-icon {border: 1px solid currentColor; border-radius: 2px;}
.hardware-button-icon::before {content: ''; position: absolute; inset: 2px; border: 1px solid currentColor;}
.hardware-usb-icon {width: 12px; height: 6px; border: 1px solid currentColor; border-radius: 1px;}
.hardware-usb-icon::after {content: ''; position: absolute; left: -5px; top: 1.5px; width: 4px; height: 1px; background: currentColor;}
.hardware-scene[data-online="false"] .hardware-usb-icon::after {left: -7px; width: 3px;}
.hardware-readout {min-height: 17px; max-width: none; margin: 1px 0 4px; color: var(--hardware-ink); font-size: 11px; line-height: 1.5;}
.hardware-caption {display: inline-block; max-width: 100%; color: var(--hardware-muted); font-size: 9px; line-height: 1.4; text-decoration: none; text-underline-offset: 3px;}
.hardware-caption:hover {text-decoration: underline;}
.hardware-caption:focus-visible {outline: 2px solid var(--hardware-ink); outline-offset: 3px;}

@container (max-width: 580px) {
  .hardware-art {inset: 0 0 26%;}
  .hardware-label {font-size: 9px;}
  .hardware-future-label, .hardware-usb-label, .hardware-gateway-label span {font-size: 8px;}
  .hardware-readout {font-size: 10px; min-height: 15px;}
  .hardware-controls {gap: 20px;}
  .home-scene .hardware-controls button, .hardware-controls button {font-size: 10px;}
}

@container (max-width: 390px) {
  .hardware-art {inset: 0 0 37%;}
  .hardware-console {bottom: 0; left: 3%; right: 3%;}
  .hardware-board-label {top: 1%;}
  .hardware-bot-label {top: 40%;}
  .hardware-future-label {left: 11%; top: 54%; font-size: 7px;}
  .hardware-gateway-label {top: 81%; font-size: 8px;}
  .hardware-gateway-label span {margin-top: 1px; font-size: 7px;}
  .hardware-usb-label {left: 43%; top: 80%; font-size: 7px;}
  .hardware-controls {gap: 16px;}
  .hardware-readout {margin: 0 0 2px; font-size: 9px; line-height: 1.35; min-height: 13px;}
  .hardware-caption {font-size: 8px; line-height: 1.3;}
}

@media (forced-colors: active) {
  .hardware-led-icon {background: Highlight;}
  .hardware-controls button[aria-pressed="true"] {outline: 1px solid Highlight;}
}