.workbench-scene {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  pointer-events: none;
  perspective: 1150px;
  perspective-origin: 50% 46%;
  container-type: inline-size;
}

.bench-assembly {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 380ms cubic-bezier(.2,.7,.2,1);
  animation: bench-drift 7s ease-in-out infinite;
}

@keyframes bench-drift {
  50% { translate: 0 -7px; }
}

.bench-shadow {
  position: absolute;
  inset: auto 10% 9% 10%;
  height: 15%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #0009, transparent 71%);
}

.bench-model {
  position: absolute;
  top: 51%;
  left: var(--x);
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
  transform: translate3d(-50%, -50%, var(--z)) rotateZ(var(--rz)) rotateY(var(--ry)) rotateX(var(--rx));
  transition: transform 720ms cubic-bezier(.2,.7,.2,1);
}

.bench-face {
  position: absolute;
  display: block;
  backface-visibility: hidden;
}

.bench-face--front,
.bench-face--back {
  inset: 0;
  border-radius: var(--radius);
}

.bench-face--front {
  transform: translateZ(calc(var(--d) / 2));
  background: var(--front);
  box-shadow: inset 0 0 0 1px var(--rim), inset 0 .2em .2em #ffffff19;
}

.bench-face--back {
  transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
  background: var(--edge);
}

.bench-face--left,
.bench-face--right {
  top: 0;
  left: calc((var(--w) - var(--d)) / 2);
  width: var(--d);
  height: 100%;
  border-radius: calc(var(--radius) / 3);
  background: linear-gradient(90deg, var(--edge), var(--rim) 26%, var(--edge) 78%, #070906);
}

.bench-face--left { transform: translateX(calc(var(--w) / -2)) rotateY(-90deg); }
.bench-face--right { transform: translateX(calc(var(--w) / 2)) rotateY(90deg); }

.bench-face--top,
.bench-face--bottom {
  top: calc((var(--h) - var(--d)) / 2);
  width: 100%;
  height: var(--d);
  border-radius: calc(var(--radius) / 3);
  background: linear-gradient(var(--rim), var(--edge));
}

.bench-face--top { transform: translateY(calc(var(--h) / -2)) rotateX(90deg); }
.bench-face--bottom { transform: translateY(calc(var(--h) / 2)) rotateX(-90deg); }

.bench-model--stopwatch {
  --w: clamp(118px, 24cqw, 285px);
  --h: var(--w);
  --d: calc(var(--w) * .29);
  --radius: 50%;
  --front: conic-gradient(from -72deg, #515a54, #949b93, #3b433d, #232b24, #515a54);
  --edge: #343c36;
  --rim: #b1b7ad;
  --x: 50%;
  --z: 8px;
  --rz: -7deg;
  --ry: 13deg;
  --rx: 13deg;
  color: #17201a;
  font: 750 calc(var(--w) * .047)/1.2 system-ui, sans-serif;
}

.bench-model--stopwatch .bench-face--front {
  box-shadow: inset 0 0 0 .32em #171d17, inset 0 0 0 .48em #838c82, inset 0 0 0 .62em #262e27;
}

.watch-facet {
  position: absolute;
  top: calc((var(--h) - var(--d)) / 2);
  left: 45.55%;
  width: 8.9%;
  height: var(--d);
  background: linear-gradient(0deg, #262c27, #4e5a50 21%, #303833 32%, #777e75 84%, #232b25 90%);
  backface-visibility: hidden;
  transform: rotateZ(var(--face-angle)) translateY(calc(var(--w) * -.497)) rotateX(90deg);
}

.watch-facet:nth-child(4n) {
  filter: brightness(.87);
}

.watch-screen > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: .08em;
}

.watch-screen {
  position: absolute;
  inset: 8%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 13%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 22%, #202a20, #101610 63%, #080c08);
  color: #caff70;
  box-shadow: 0 0 0 .26em #101611, inset .2em .3em .8em #000a;
  font: 600 1em/1 ui-monospace, "SFMono-Regular", monospace;
}

.watch-screen::after {
  content: "";
  position: absolute;
  inset: 7%;
  border: 1px solid #caff7040;
  border-bottom-color: transparent;
  border-radius: 50%;
}

.watch-screen > div { font-size: .72em; }

.watch-screen strong {
  display: block;
  margin: .12em 0 .17em;
  font-size: 3.65em;
  font-weight: 700;
  letter-spacing: -.09em;
  text-shadow: 0 0 .35em #b6ff6544;
}

.watch-keys {
  position: absolute;
  inset: 0;
  transform: translateZ(calc(var(--d) * -.27));
}

.watch-keys i {
  position: absolute;
  top: 19%;
  left: 87%;
  width: 12%;
  height: 9%;
  border-radius: .3em;
  transform: rotate(-35deg);
  background: linear-gradient(#f2df71, #ab8b2c);
  box-shadow: inset 0 1px 1px #fff6, 0 .1em .2em #0009;
}

.watch-keys i:nth-child(2) {
  top: 38%;
  left: 94%;
  transform: rotate(-9deg);
  background: linear-gradient(#8db8eb, #426698);
}

.watch-keys i:nth-child(3) {
  top: 59%;
  left: 92%;
  transform: rotate(18deg);
  background: linear-gradient(#d96953, #a13323);
}

.watch-caption {
  position: absolute;
  bottom: 13%;
  left: 50%;
  color: #a0af9b;
  font-size: .52em;
  letter-spacing: .18em;
  transform: translateX(-50%);
}

.bench-model--steak {
  --w: clamp(86px, 16.5cqw, 191px);
  --h: calc(var(--w) * 2.04);
  --d: calc(var(--w) * .087);
  --radius: calc(var(--w) * .16);
  --front: linear-gradient(150deg, #293230, #111715 54%, #060b09);
  --edge: #242b28;
  --rim: #8b968e;
  --x: 28%;
  --z: -40px;
  --rz: -15deg;
  --ry: -18deg;
  --rx: 6deg;
  color: #f5f3ec;
  font: 650 calc(var(--w) * .07)/1.15 system-ui, sans-serif;
}

.bench-model--steak .bench-face--front { padding: 5%; }

.phone-display {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radius) * .74);
  background: #1c1212 url("/media/steak-screen.webp") center / cover no-repeat;
  overflow: hidden;
}

.phone-camera {
  position: absolute;
  top: 2.4%;
  left: 37%;
  width: 26%;
  height: 4%;
  border-radius: 99px;
  background: #050504;
}

.steak-tray { display: none; }

.bench-model--red-door {
  --w: clamp(90px, 18cqw, 225px);
  --h: calc(var(--w) * 1.79);
  --d: calc(var(--w) * .20);
  --radius: calc(var(--w) * .014);
  --front: linear-gradient(112deg, #f36a4c, #a72d24 42%, #771911);
  --edge: #681811;
  --rim: #e45e47;
  --x: 73%;
  --z: -36px;
  --rz: 12deg;
  --ry: 21deg;
  --rx: -5deg;
  color: #ffcdad;
  font: 600 calc(var(--w) * .078)/1 system-ui, sans-serif;
}

.bench-model--red-door .bench-face--front {
  padding: 7%;
  background:
    repeating-linear-gradient(89deg, #28080200 0 6%, #ffc78a15 6% 6.5%),
    var(--front);
}

.door-inset {
  width: 100%;
  height: 100%;
  padding: 3% 4% 0 3%;
  background: #300d09;
  box-shadow: inset .25em .2em .24em #0009, 0 .12em 0 #ff8c69a8;
}

.door-leaf {
  position: relative;
  display: grid;
  grid-template-rows: 17% 49% 26%;
  gap: 4%;
  width: 100%;
  height: 100%;
  padding: 8% 13%;
  background: linear-gradient(137deg, #c54332, #ad2e24 55%, #852016);
  border-left: .23em solid #e2513d;
  box-shadow: inset -1px 0 #410b08;
}

.door-transom {
  display: grid;
  place-items: center;
  font-family: Georgia, serif;
  font-size: .93em;
  letter-spacing: .19em;
  padding-left: .19em;
  border: .13em solid #ee6a50;
  background: linear-gradient(120deg, #201411, #39221c);
  box-shadow: inset .15em .12em .12em #000a, 0 .16em #781e17;
}

.door-panel {
  border: .23em solid #c34a35;
  border-bottom-color: #832119;
  border-right-color: #8e241b;
  background: linear-gradient(140deg, #a1271f, #b93c2b);
  box-shadow: inset .1em .14em .17em #4e110b9c;
}

.door-handle {
  position: absolute;
  right: 8%;
  top: 67%;
  width: 8%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, #ffdc95, #ad6e34 75%);
  box-shadow: .06em .13em .12em #280b03a0;
}

[data-active="stopwatch"] .bench-model--stopwatch { --z: 60px; --ry: 16deg; --rz: -8deg; }
[data-active="steak"] .bench-model--steak { --z: 53px; --ry: -14deg; --rz: -13deg; }
[data-active="red-door"] .bench-model--red-door { --z: 53px; --ry: 22deg; --rz: 10deg; }

@media (max-width: 620px) {
  .workbench-scene { perspective: 700px; }
  .bench-model--stopwatch { --x: 50%; --w: clamp(105px, 30cqw, 180px); }
  .bench-model--steak { --x: 23%; --w: clamp(77px, 23cqw, 130px); }
  .bench-model--red-door { --x: 77%; --w: clamp(77px, 23cqw, 130px); }
}

@media (prefers-reduced-motion: reduce) {
  .bench-assembly { transform: none; transition: none; animation: none; }
  .bench-model { transition: none; }
}

torinz-model.workbench-scene {
  position: absolute;
  inset: 0;
  display: block;
}

torinz-model .bench-assembly { animation: none; }

.bench-render {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  visibility: hidden;
  pointer-events: none;
  transition: transform 450ms cubic-bezier(.2,.7,.2,1);
}

torinz-model.has-rendered-model .bench-render { visibility: visible; }
torinz-model.has-rendered-model .bench-assembly { visibility: hidden; }
torinz-model[data-emphasis] .bench-render { transform: scale(1.08); }

torinz-model .bench-model {
  --x: 50%;
  --z: 32px;
}
torinz-model .bench-model { transition: transform 720ms cubic-bezier(.2,.7,.2,1), scale 450ms ease-out; }
torinz-model[data-emphasis] .bench-model { scale: 1.15; }

torinz-model .bench-model--stopwatch { --w: min(63cqw, 365px); }
torinz-model .bench-model--steak { --x: 33%; --w: min(32cqw, 220px); }
torinz-model .bench-model--red-door { --w: min(41cqw, 245px); }
torinz-model .bench-shadow { opacity: .36; }

torinz-model .steak-tray {
  position: absolute;
  top: 23%;
  left: 106%;
  display: flex;
  align-items: flex-end;
  width: 119%;
  height: 72%;
  padding: 10% 7%;
  border: .2em solid #575f57;
  border-radius: 12%;
  background:
    radial-gradient(ellipse at 50% 34%, #a84849 0 37%, #ae7772 38% 42%, transparent 44%),
    linear-gradient(145deg, #293530, #141b18);
  transform: rotate(21deg);
}

.steak-tray > div {
  width: 100%;
  padding: .35em .5em;
  border-radius: 7%;
  background: #e9e1cf;
  color: #29201d;
  font: 700 .76em/1.3 ui-monospace, monospace;
}

.steak-tray i {
  display: block;
  height: 1.2em;
  margin: .2em 0;
  background: repeating-linear-gradient(90deg, #211f1b 0 4%, transparent 4% 6%, #211f1b 6% 7%, transparent 7% 10%);
}

.bench-model--forma,
.bench-model--piega,
.bench-model--iterix {
  --w: min(66cqw, 435px);
  --h: calc(var(--w) * .68);
  --d: calc(var(--w) * .064);
  --radius: 6%;
  --rx: 9deg;
}

.bench-model--forma {
  --x: 45%;
  --front: #3f4d67;
  --edge: #687891;
  --rim: #bac7df;
  --ry: -15deg;
  --rz: -4deg;
  --display: url("/images/torinz/forma.webp");
}

.bench-model--piega {
  --front: #243d34;
  --edge: #325448;
  --rim: #91ab9a;
  --ry: 15deg;
  --rz: 4deg;
  --display: url("/images/torinz/piega.webp");
}

.bench-model--iterix {
  --h: calc(var(--w) * .83);
  --front: #252837;
  --edge: #4b4e61;
  --rim: #8e94b5;
  --ry: -13deg;
  --rz: -3deg;
  --display: url("/images/torinz/iterix.webp");
}

.workbench-display {
  position: absolute;
  inset: 5%;
  border-radius: 4%;
  background: #12191b var(--display) center / cover no-repeat;
}

.bench-model--iterix .workbench-display {
  inset: 7% 5% 28%;
}

.forma-files {
  position: absolute;
  inset: 17% -16% auto auto;
  display: grid;
  gap: .25em;
  font: 700 calc(var(--w) * .051)/1.2 ui-monospace, monospace;
}

.forma-files span {
  padding: .28em .55em;
  border: 1px solid #cbd7fa;
  border-radius: .27em;
  background: #273653;
  color: #e1eaff;
}

.piega-stand {
  position: absolute;
  inset: 97% 20% auto;
  height: 17%;
  border-radius: 0 0 17% 17%;
  background: linear-gradient(#334b3e, #8aa494);
  transform: skewX(-16deg);
}

.iterix-flow {
  position: absolute;
  inset: auto 4% 7%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .36em;
  padding: .3em;
  background: linear-gradient(#3857ff, #3857ff) center / 90% 2px no-repeat;
  font: 750 calc(var(--w) * .036)/1.2 ui-monospace, monospace;
}

.iterix-flow span {
  padding: .75em .48em;
  border: 1px solid #6880fe;
  border-radius: .28em;
  background: #161c42;
  color: #f1f3ff;
  box-shadow: 0 .22em 0 #151b38;
  white-space: nowrap;
}

.bench-model--iterix::before,
.bench-model--iterix::after {
  content: "";
  position: absolute;
  top: 31%;
  width: 17%;
  height: 52%;
  border: max(2px, .72cqw) solid #3857ff;
  border-radius: 48%;
}

.bench-model--iterix::before { left: -10%; }
.bench-model--iterix::after { right: -10%; border-color: #ff9e52; }

.bench-model--computer {
  --w: min(78cqw, 440px);
  --h: calc(var(--w) * .77);
  --d: calc(var(--w) * .30);
  --radius: 6%;
  --front: linear-gradient(148deg, #efe6d4, #d5c8b2);
  --edge: #c9bba3;
  --rim: #f3ebdd;
  --rz: -5deg;
  --ry: -18deg;
  --rx: 10deg;
  top: 42%;
}

.terminal-screen {
  position: absolute;
  inset: 7% 7% 30%;
  padding: 4.5% 6%;
  border: max(3px, .85cqw) solid #2a1d16;
  border-radius: 5%;
  background: #1a0a04;
  box-shadow: 0 0 0 max(3px, .7cqw) #8c7b73;
  color: #efe5d3;
  font: 600 calc(var(--w) * .036)/1.25 ui-monospace, monospace;
}

.terminal-status {
  display: flex;
  justify-content: space-between;
  margin-bottom: .65em;
  padding-bottom: .4em;
  border-bottom: 1px solid #8c7b7355;
  color: #8c7b73;
  font-size: .66em;
  letter-spacing: .07em;
}

.terminal-screen pre { margin: 0; }
.terminal-screen b,
.terminal-screen i { color: #ff5a1f; }

.terminal-keys {
  position: absolute;
  inset: 99% 3% auto;
  height: 40%;
  border: max(4px, 1.05cqw) solid #e9dfcc;
  border-radius: 0 0 7% 7%;
  background:
    repeating-linear-gradient(90deg, transparent 0 6%, #1a0a04 6% 7%),
    repeating-linear-gradient(#f3ebdd 0 16%, #1a0a04 16% 20%);
  box-shadow: 0 .35em 0 #c9bba3;
  transform: rotateX(60deg);
  transform-origin: top;
}

.bench-model--telephone {
  --w: min(74cqw, 420px);
  --h: calc(var(--w) * .74);
  --d: calc(var(--w) * .16);
  --radius: 14%;
  --front: linear-gradient(150deg, #efe6d4, #d5c8b2);
  --edge: #c9bba3;
  --rim: #f3ebdd;
  --rz: -4deg;
  --ry: -16deg;
  --rx: 14deg;
}

.phone-handset {
  position: absolute;
  inset: 9% 6% auto;
  height: 31%;
  border-radius: 40% / 50%;
  background: #ff5a1f;
  box-shadow: 0 .3em 0 #c63c14;
}

.phone-pad {
  position: absolute;
  inset: 50% 54% 8% 8%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7%;
  padding: 4%;
  border-radius: 10%;
  background: #1a0a04;
}

.phone-pad i { border-radius: 22%; background: #efe5d3; }

.phone-lcd {
  position: absolute;
  inset: 52% 7% 22% 50%;
  display: grid;
  align-content: center;
  gap: .3em;
  padding: 0 6%;
  border-radius: 8%;
  background: #1a0a04;
  color: #efe5d3;
  font: 700 calc(var(--w) * .028)/1.2 ui-monospace, monospace;
}

.phone-lcd span { color: #ff5a1f; font-weight: 500; }

.bench-model--torinz {
  --w: min(61cqw, 330px);
  --h: var(--w);
  --d: calc(var(--w) * .16);
  --radius: 12%;
  --front: #171a13;
  --edge: #292c20;
  --rim: #e4d268;
  --rz: -14deg;
  --ry: -24deg;
  --rx: 16deg;
}

.torinz-face {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: .3em;
  color: #ff5a1f;
  font: 700 calc(var(--w) * .46)/.87 var(--font-base, system-ui);
}

.torinz-face small { font-size: .15em; letter-spacing: .22em; }

@media (prefers-reduced-motion: reduce) {
  torinz-model .bench-model,
  .bench-render { transition: none; }
  torinz-model[data-emphasis] .bench-render { transform: none; }
}