/* An actual, proportionally extruded PCB. All geometry is supplied locally. */
.board3d {
  --board3d-ink: #202520;
  --board3d-muted: #75796f;
  --board3d-line: rgb(32 37 32 / 14%);
  width: 100%;
  color: var(--board3d-ink);
  position: relative;
  isolation: isolate;
}
.board3d *, .board3d *::before, .board3d *::after { box-sizing: border-box; }
.board3d__viewport {
  width: 100%;
  aspect-ratio: 1.28;
  min-height: 260px;
  position: relative;
  overflow: clip;
  perspective: 1200px;
  cursor: grab;
  touch-action: pan-y;
  outline: none;
  background: radial-gradient(ellipse at 50% 44%, rgb(255 255 255 / 32%), transparent 66%);
  -webkit-tap-highlight-color: transparent;
}
.board3d__viewport:focus-visible { outline: 2px solid #996248; outline-offset: -5px; border-radius: 12px; }
.board3d__viewport[data-dragging="true"] { cursor: grabbing; }
.board3d__ambient {
  position: absolute;
  width: 63%;
  height: 43%;
  left: 19%;
  top: 24%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(191 183 148 / 19%), transparent 71%);
  filter: blur(24px);
  pointer-events: none;
}
.board3d__shadow {
  position: absolute;
  width: 61%;
  height: 13%;
  left: 20%;
  top: 72%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(21 27 21 / 34%), rgb(21 27 21 / 10%) 48%, transparent 73%);
  filter: blur(16px);
  transform: rotate(-16deg);
  pointer-events: none;
}
.board3d__rig {
  position: absolute;
  width: 850px;
  height: 560px;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%) scale3d(var(--board3d-scale, .5), var(--board3d-scale, .5), var(--board3d-scale, .5));
  transform-style: preserve-3d;
  pointer-events: none;
}
.board3d__mesh {
  width: 100%;
  height: 100%;
  position: relative;
  transform: rotateX(44deg) rotateY(-17deg) rotateZ(-22deg);
  transform-style: preserve-3d;
  will-change: transform;
}
.board3d__face {
  position: absolute;
  inset: 0;
  width: 850px;
  height: 560px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}
.board3d__face--top { transform: translateZ(8px); }
.board3d__face--bottom { transform: rotateY(180deg) translateZ(8px); }
.board3d__texture {
  display: block;
  position: absolute;
  top: -10px;
  left: -10px;
  width: 870px;
  height: 580px;
  max-width: none !important;
  user-select: none;
  -webkit-user-drag: none;
}
.board3d__sheen {
  position: absolute;
  inset: 0;
  border-radius: 30px;
  background: linear-gradient(125deg, rgb(255 255 231 / 15%), transparent 40%, rgb(0 0 0 / 12%) 77%, rgb(236 231 191 / 6%));
  /* Clear the four plated mounting bores; the fabrication textures include all drills. */
  -webkit-mask-image: radial-gradient(circle at 35.05px 35px, transparent 13.4px, #000 13.7px), radial-gradient(circle at 35.05px 525px, transparent 13.4px, #000 13.7px), radial-gradient(circle at 615.05px 35px, transparent 13.4px, #000 13.7px), radial-gradient(circle at 615.05px 525px, transparent 13.4px, #000 13.7px);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(circle at 35.05px 35px, transparent 13.4px, #000 13.7px), radial-gradient(circle at 35.05px 525px, transparent 13.4px, #000 13.7px), radial-gradient(circle at 615.05px 35px, transparent 13.4px, #000 13.7px), radial-gradient(circle at 615.05px 525px, transparent 13.4px, #000 13.7px);
  mask-composite: intersect;
}
.board3d__face--bottom .board3d__sheen { transform: scaleX(-1); }
.board3d__edge {
  position: absolute;
  height: 16px;
  transform-origin: center;
  background: linear-gradient(to bottom, #a99765 0%, #c5b581 6%, #706c4c 9%, #474e38 23%, #9b8960 25%, #414a34 28%, #3d4934 47%, #ab9566 49%, #b39b6a 51%, #46513a 54%, #46503b 73%, #ab9362 75%, #566044 79%, #898269 94%, #c0ae78 97%, #a39162 100%);
  backface-visibility: visible;
}
.board3d__bore {
  position: absolute;
  height: 16px;
  background: linear-gradient(to bottom, #b19052, #806b38 17%, #342e1d 50%, #89713c 85%, #c9ae6f);
  backface-visibility: visible;
}
.board3d__annotation {
  position: absolute;
  z-index: 2;
  left: 7%;
  right: 7%;
  top: 8%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font: 500 9px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--board3d-muted);
  pointer-events: none;
}
.board3d__annotation > span:last-child { white-space: nowrap; }
.board3d__dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 7px;
  border-radius: 50%;
  background: #9b6951;
  vertical-align: 1px;
}
.board3d__readout {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 7%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  color: var(--board3d-muted);
  pointer-events: none;
  font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .02em;
}
.board3d__side { color: var(--board3d-ink); }
.board3d__controls {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px 18px;
}
.board3d__control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--board3d-line);
  border-radius: 999px;
  background: rgb(255 255 255 / 24%);
  color: var(--board3d-ink);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
  appearance: none;
}
.board3d__control:hover { border-color: rgb(32 37 32 / 35%); background: rgb(255 255 255 / 65%); }
.board3d__control:focus-visible { outline: 2px solid #996248; outline-offset: 3px; }
.board3d__control svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.board3d__help { width: 100%; margin: 7px 0 0; color: var(--board3d-muted); text-align: center; font-size: 10px; line-height: 1.6; }
.board3d__sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.board3d[data-compact="true"] .board3d__annotation { top: 6%; }
.board3d[data-compact="true"] .board3d__controls { padding-bottom: 8px; }
.board3d[data-compact="true"] .board3d__control[data-action="rotate"],
.board3d[data-compact="true"] .board3d__control[data-action="reset"],
.board3d[data-compact="true"] .board3d__help { display: none; }
@media (max-width: 540px) {
  .board3d__annotation { font-size: 8px; letter-spacing: .08em; }
  .board3d__readout { font-size: 9px; }
  .board3d__control { min-height: 40px; padding: 9px 11px; font-size: 10px; }
  .board3d__controls { gap: 5px; }
  .board3d__help { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .board3d__control { transition: none; }
}