.workbench { perspective: 1100px; }
.workbench::before {
  content: ""; position: absolute; inset: 8% -5% 10%; z-index: -2;
  background: radial-gradient(ellipse at 75% 55%, #637cff2e, transparent 65%);
  filter: blur(22px); pointer-events: none;
}
.bench-window {
  background: linear-gradient(145deg, #f8faff, #e9effb);
  border: 1px solid #c7d3f6;
  box-shadow: 1px 1px 0 #e3eafe, 3px 4px 0 #a8bae7, 6px 8px 0 #5d74b5,
    10px 14px 0 #27365f, 0 30px 70px #0009;
  transform: perspective(1000px) rotateY(-5deg) rotateX(3deg) rotateZ(-1.2deg);
}
.bench-window::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--mx, 90%) var(--my, 0%), #ffffff55, transparent 45%);
  mix-blend-mode: soft-light; border-radius: inherit;
}
.bench-underlay {
  background: linear-gradient(130deg, #6281e44d, #324b9955 60%, #86c9f022);
  border-color: #9baeff70; box-shadow: inset 0 1px #c4d1ff55, 0 20px 50px #0004;
  backdrop-filter: blur(12px); transform: rotate(5deg) translateY(4px);
}
.bench-titlebar { background: linear-gradient(110deg, #dae3f8, #f0f4ff); }
.bench-window-mark { background: #5269d8; color: #fff; width: 29px; height: 29px;
  display: grid; place-items: center; border-radius: 9px; font-size: 22px;
  box-shadow: 0 4px 8px #536ac43d; }
.bench-titlebar>span:last-child { color: #586fa8; }
.bench-tabs { position: relative; isolation: isolate; background: #e1e8f7; }
.bench-tabs button { z-index: 1; transition: color .2s; }
.bench-tabs:has(.bench-indicator) button[aria-selected="true"] { color: #fff; }
.bench-tabs:has(.bench-indicator) button[aria-selected="true"]::after { display: none; }
.bench-indicator { position: absolute; pointer-events: none; left: 0; top: 8px; bottom: 6px;
  background: linear-gradient(140deg, #607be7, #455dc1); border-radius: 7px;
  box-shadow: inset 0 1px #ffffff55, 0 3px 8px #5268bc33;
  transition: transform .38s cubic-bezier(.2,.8,.2,1), width .38s cubic-bezier(.2,.8,.2,1); }
.bench-content { position: relative; }
.bench-diagram {
  border-radius: 12px; height: 218px; margin-top: 14px; padding: 6px 0;
  background: radial-gradient(ellipse at 78% 68%, #c2d1ff66, transparent 58%),
    linear-gradient(#c8d3ea44 1px, transparent 1px),
    linear-gradient(90deg, #c8d3ea44 1px, transparent 1px), #e5ecfa;
  background-size: auto, 22px 22px, 22px 22px, auto;
  box-shadow: inset 0 0 0 1px #c7d3ec80;
}
.device-depth { filter: drop-shadow(1px 5px 3px #6e86b62b); }
.server-depth { transform: translate(var(--depth-x, 0px), var(--depth-y, 0px)); transition: transform .3s ease-out; }
.laptop-depth { transform: translate(var(--depth-neg-x, 0px), var(--depth-neg-y, 0px)); transition: transform .3s ease-out; }
.bench-path { stroke: #718ad7; stroke-width: 2; }
.bench-path.return { stroke: #63a7cd; }
.bench-packet { opacity: 0; filter: drop-shadow(0 0 5px #5276f5); pointer-events: none; }
.packet-return { filter: drop-shadow(0 0 5px #72bee8); }
.is-transferring .server-led { fill: #547aff; filter: drop-shadow(0 0 3px #547aff); }
.is-transferring .server-slot { fill: #cbd9ff; }
.transfer-controls { display: flex; align-items: center; gap: 11px; margin: 13px 0 21px; }
.transfer-play { border: 1px solid #8094cb; border-radius: 30px; background: #f6f8ff;
  color: #3d55a3; padding: 8px 13px; font-size: 11px; white-space: nowrap;
  transition: background .2s, transform .2s, box-shadow .2s; }
.transfer-play:hover { background: #dce5ff; transform: translateY(-2px); box-shadow: 0 4px 9px #4b69c52b; }
.transfer-play:disabled { cursor: default; opacity: .75; transform: none; }
.transfer-play span { font-size: 8px; margin-right: 4px; }
.transfer-status { color: #647393; font-size: 9px; line-height: 1.7; }
.bench-content [role="tabpanel"] { min-height: 410px; }
.bench-content a { transition: color .25s, padding .25s; }
.bench-content a:hover { padding-left: 7px; padding-right: 7px; }
.bench-content a span { transition: transform .25s; }
.bench-content a:hover span { transform: translate(2px,-2px); }
.bench-network { background: radial-gradient(ellipse at 50% 60%, #c3d2ff55, transparent 65%); }
.mini-device { box-shadow: 2px 3px #b6c4e3, 4px 6px #8fa4cd, 7px 10px #4d679e3d;
  transform: perspective(400px) rotateY(-12deg) rotateX(8deg) rotateZ(-5deg); }
.bench-wire { position: relative; overflow: hidden; height: 3px; border-radius: 3px; }
.bench-wire::after { content: ""; position: absolute; width: 50%; height: 100%; background: #eef4ff;
  animation: wire-flow 2.2s ease-in-out infinite; }
.bench-collab>div { box-shadow: 0 4px 0 #cbd7ec70; transition: transform .25s, box-shadow .25s; }
.bench-collab>div:hover { transform: translateX(4px); box-shadow: -3px 5px 0 #a2b7e460; }
.bench-collab>div:nth-of-type(2):hover { transform: translateX(-4px); }
@keyframes wire-flow { from { left: -60%; } to { left: 120%; } }
@media(max-width:1100px) and (min-width:761px) {
  .bench-diagram { height: 200px; }
  .transfer-controls { flex-wrap: wrap; gap: 5px; margin-bottom: 16px; }
  .bench-content [role="tabpanel"] { min-height: 420px; }
}
@media(max-width:760px) {
  .bench-window { transform: rotate(-1deg); }
  .bench-diagram { height: 190px; }
  .bench-content [role="tabpanel"] { min-height: 400px; }
  .transfer-controls { gap: 8px; margin: 12px 0 17px; }
  .transfer-play { padding: 8px 10px; font-size: 10px; }
  .transfer-status { font-size: 8px; }
}
@media(max-width:360px) {
  .transfer-controls { flex-wrap: wrap; gap: 6px; }
  .bench-content [role="tabpanel"] { min-height: 410px; }
}
@media(prefers-reduced-motion:reduce) { .device-depth, .bench-window { transform: none; } }
.motion-off .device-depth { transform: none!important; }
.page-hidden .workbench *, .bench-offscreen * { animation-play-state: paused!important; }