#hardware { scroll-margin-top: 1.5rem; }
.hardware-viewer { margin: 0 0 2rem; color: #363636; }
.hardware-viewer [hidden] { display: none !important; }
.hardware-header { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.hardware-header h3 { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.3; text-align: center; }
.hardware-viewer button { font: inherit; cursor: pointer; color: #363636; background: #fff; border: 1px solid #d9d9d9; border-radius: 4px; padding: .2rem .6rem; min-height: 32px; font-size: .85rem; }
.hardware-viewer button:hover { border-color: #b5b5b5; }
.hardware-viewer button:disabled { cursor: wait; opacity: .55; }
.hardware-viewer button:focus-visible, .hardware-viewer input:focus-visible, .hardware-viewer a:focus-visible, .hardware-viewer canvas:focus-visible { outline: 2px solid var(--i3l-orange); outline-offset: 2px; }
.hardware-models { position: absolute; right: .5rem; top: .5rem; z-index: 1; display: flex; gap: .3rem; }
.hardware-models button { padding: .25rem .65rem; border-radius: 999px; font-size: .8rem; }
.hardware-models button[aria-pressed="true"] { background: #363636; border-color: #363636; color: #fff; }
.hardware-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 1.25rem; }
.hardware-preview { display: flex; flex-direction: column; min-width: 0; }
.hardware-stage { position: relative; flex: 1; min-width: 0; min-height: 460px; border-radius: 6px; overflow: hidden; background-color: #f3f1ed; background-image: radial-gradient(#d7d0c7 .65px, transparent .65px); background-size: 18px 18px; }
.hardware-canvas { position: absolute; inset: 0; }
.hardware-canvas canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; outline-offset: -4px !important; }
.hardware-canvas canvas:active { cursor: grabbing; }
.hardware-stage-label { position: absolute; left: .75rem; right: 10rem; top: 1rem; pointer-events: none; font-size: .7rem; color: #70665d; }
.hardware-robot { position: absolute; right: .5rem; bottom: .5rem; width: clamp(112px, 25%, 176px); border: 2px solid #5d7fb5; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 8px rgba(54, 54, 54, .12); pointer-events: none; }
.hardware-robot-heading { background: #f8f6f3; padding: .25rem .35rem; font-size: .65rem; font-weight: 600; line-height: 1.3; }
.hardware-robot-viewport { aspect-ratio: .85; }
.hardware-robot[data-state="loading"] .hardware-robot-viewport { display: grid; place-items: center; background: #f8f6f3; }
.hardware-robot[data-state="loading"] .hardware-robot-viewport::after { content: "Loading robot…"; font-size: .65rem; color: #70665d; }
.hardware-placeholder { position: absolute; inset: 4rem 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; color: #6c625b; font-size: .9rem; }
.hardware-placeholder p { max-width: 22rem; }
.hardware-camera-controls { position: absolute; left: .5rem; right: calc(clamp(112px, 25%, 176px) + 1rem); bottom: .5rem; z-index: 1; display: flex; flex-wrap: wrap; gap: .3rem; }
.hardware-camera-controls button { padding: .2rem .45rem; font-size: .75rem; }
.hardware-camera-controls button { min-width: 32px; }
.hardware-camera-controls button[aria-pressed="true"] { background: #363636; border-color: #363636; color: #fff; }
.hardware-sidebar { min-width: 0; padding: .5rem 0 0; }
.hardware-sidebar h4 { font-size: 1rem; font-weight: 600; margin: 0 0 .4rem; }
.hardware-sidebar > p { font-size: .8rem; line-height: 1.5; color: #70665d; }
.hardware-joints { border: 0; margin: .85rem 0 0; padding: 0; min-width: 0; }
.hardware-joints legend { font-size: .8rem; font-weight: 600; margin: 0 0 .65rem; padding: 0; }
.hardware-arm-controls { display: flex; margin-bottom: .8rem; }
.hardware-arm-controls button { flex: 1; border-radius: 0; margin-left: -1px; }
.hardware-arm-controls button:first-child { border-radius: 4px 0 0 4px; margin-left: 0; }
.hardware-arm-controls button:last-child { border-radius: 0 4px 4px 0; }
.hardware-arm-controls button[aria-pressed="true"] { background: #363636; border-color: #363636; color: #fff; }
.hardware-joint { margin-bottom: .55rem; }
.hardware-joint-heading { display: flex; justify-content: space-between; align-items: baseline; font-size: .75rem; color: #4a4a4a; }
.hardware-joint-heading output { font-variant-numeric: tabular-nums; color: #363636; }
.hardware-joint input { display: block; width: 100%; height: 19px; margin: 0; accent-color: #363636; cursor: pointer; }
#hardware-reset { margin-top: .2rem; }
.hardware-joint-note { font-size: .65rem; line-height: 1.45; margin-top: .55rem; color: #7e746c; }
.hardware-static-note { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid #ece5df; }
.hardware-viewer[data-state="ready"] .hardware-static-note { display: none; }
.hardware-footer { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .75rem; font-size: .75rem; color: #70665d; }
.hardware-footer p { line-height: 1.6; }
.hardware-footer p span { font-size: .65rem; color: #7e746c; }
.hardware-downloads { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.hardware-downloads span { font-size: .75rem; }
.hardware-downloads a { color: var(--i3l-orange-dark); text-decoration: underline; text-underline-offset: 3px; padding: .15rem 0; }
@media (max-width: 768px) {
  .hardware-layout { grid-template-columns: 1fr; }
  .hardware-stage { min-height: 360px; }
  .hardware-sidebar { padding: 0; }
  .hardware-viewer button { min-height: 40px; }
  .hardware-camera-controls button { min-width: 40px; }
  .hardware-joints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 1rem; }
  .hardware-arm-controls { grid-column: 1 / -1; }
  #hardware-joint-controls { display: contents; }
  #hardware-reset { align-self: center; justify-self: end; margin: 0 0 .55rem; }
  .hardware-joint input { height: 28px; }
  .hardware-joints { margin-top: .85rem; }
  .hardware-footer { flex-direction: column; }
}
@media print { .hardware-viewer { display: none !important; } }