/* An articulated hardware mockup. Material lighting belongs to the object. */
.device-reveal {
  --device-scale: .72;
  --arm-open: 80deg;
  --lid-open: 25deg;
  --tablet-slide: 50px;
  --view-x: 58deg;
  --view-z: -6deg;
  --screen-on: 1;
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  background: #cbd0c1;
  color: var(--ink);
}
.device-space {
  position: relative;
  height: clamp(330px, 55vw, 720px);
  overflow: hidden;
  perspective: 1800px;
  perspective-origin: 50% 40%;
}
.device-scene {
  position: absolute;
  width: 800px;
  height: 560px;
  left: 50%;
  top: 80%;
  margin: -280px 0 0 -400px;
  transform: scale3d(var(--device-scale), var(--device-scale), var(--device-scale)) rotateX(var(--view-x)) rotateZ(var(--view-z));
  transform-style: preserve-3d;
}
.device-scene *, .device-scene *::before, .device-scene *::after { box-sizing: border-box; }
.keyboard-base, .stand-arm, .tablet-pivot, .tablet-shell { position: absolute; transform-style: preserve-3d; }
.keyboard-base { inset: 0; }
.keyboard-deck, .base-under {
  position: absolute; inset: 0; border-radius: 29px;
  background: linear-gradient(110deg,#55575a 0%,#303235 55%,#4c4e51 100%);
  box-shadow: inset 0 0 0 2px #717478, inset 0 0 0 5px #3d3f42;
}
.keyboard-deck { transform: translateZ(8px); padding: 28px 30px; }
.base-under { background: #242629; transform: translateZ(-4px); }
.base-front { position:absolute; left:20px; right:20px; bottom:-2px; height:12px; background:linear-gradient(#6a6c70,#282a2e); transform-origin:center bottom; transform:rotateX(90deg); border-radius:0 0 5px 5px; }
.base-side { position:absolute; top:22px; bottom:22px; width:12px; background:#37393c; transform-origin:left center; transform:rotateY(90deg); }
.base-side.left { left:0; }.base-side.right { right:-12px; }
.key-bed { height: 314px; padding: 7px; background: #222426; border-radius: 12px; box-shadow: inset 0 0 0 2px #161819; }
.key-row { display:flex; gap:6px; height:48px; padding-bottom:6px; }
.key-row.row-0 { height:34px; }
.key { display:flex; flex:1; align-items:center; justify-content:center; min-width:0; border-radius:5px; background:linear-gradient(#272a2d,#1e2023); color:#cbd0d1; font:15px -apple-system,BlinkMacSystemFont,Arial,sans-serif; box-shadow:0 2px 0 #111315,inset 0 1px 0 #484b4d; }
.row-0 .key { font-size:12px; }.key-wide { flex:1.45; font-size:11px; }.key-space { flex:6; }
.trackpad { width:300px; height:160px; position:absolute; left:250px; bottom:25px; border-radius:11px; background:linear-gradient(120deg,#3d3f42,#333538); box-shadow:inset 0 0 0 1.5px #222427,inset 0 2px 0 #636568; }
.lower-hinge { position:absolute; width:742px; height:22px; left:29px; top:-10px; border-radius:12px; background:linear-gradient(#5c5e61,#242629 50%,#505256); transform:translateZ(6px); }
.stand-arm { left:20px; top:0; width:760px; height:180px; transform-origin:center top; transform:translateZ(15px) rotateX(var(--arm-open)); }
.stand-front,.stand-back { position:absolute; inset:0; border-radius:20px 20px 10px 10px; background:linear-gradient(120deg,#25272a,#404246); backface-visibility:hidden; }
.stand-front { transform:translateZ(3px); box-shadow:inset 0 0 0 2px #55575b; }
.stand-back { transform:rotateX(180deg) translateZ(3px); background:#343639; }
.upper-hinge { position:absolute; width:710px; height:14px; top:174px; left:25px; border-radius:7px; background:linear-gradient(#66696c,#27292c); transform:translateZ(4px); }
.tablet-pivot { left:-20px; top:180px; width:800px; height:0; transform-origin:center top; transform:rotateX(var(--lid-open)); }
.tablet-shell { width:800px; height:560px; top:-180px; transform:translateY(var(--tablet-slide)) translateZ(calc(-30px * var(--opening-progress, 1))); }
.tablet-back,.tablet-front { position:absolute; inset:0; border-radius:32px; backface-visibility:hidden; }
.tablet-back { transform:translateZ(8px); background:linear-gradient(130deg,#393c40 0%,#232529 55%,#34373a); box-shadow:inset 0 0 0 2px #6c7074,inset 0 0 0 6px #292c30; }
.cover-seam { position:absolute; left:12px; right:12px; top:170px; height:2px; background:#181a1d; box-shadow:0 2px 0 #4a4d51; }
.camera-block { position:absolute; right:27px; bottom:25px; width:76px; height:76px; border-radius:19px; background:#34383b; box-shadow:0 0 0 3px #15181a,inset 0 0 0 1px #62666a; }
.camera-block i { position:absolute; width:28px; height:28px; border-radius:50%; background:radial-gradient(circle,#152c38 0 15%,#090b0d 20% 55%,#333d44 58% 65%,#111416 70%); left:9px; top:9px; }
.camera-block i+i { left:39px; top:39px; }.camera-block b { position:absolute; right:12px; top:14px; width:15px; height:15px; border-radius:50%; background:#b4aea0; }
.tablet-front { transform:rotateX(180deg) translateZ(2px); background:#0b0d0f; padding:22px; box-shadow:inset 0 0 0 2px #777b80,inset 0 0 0 5px #202327; }
.display { position:relative; width:100%; height:100%; overflow:hidden; border-radius:12px; background:#090b0d; }
.display img { width:100%; height:100%; max-width:none; opacity:var(--screen-on); object-fit:fill; }
.screen-glass { position:absolute; inset:0; background:linear-gradient(125deg,rgba(255,255,255,.06),transparent 36%,transparent 75%,rgba(255,255,255,.025)); pointer-events:none; }
.front-camera { position:absolute; top:8px; left:50%; width:6px; height:6px; border-radius:50%; background:#13222b; }
.tablet-edge { position:absolute; background:#4a4d51; }
.tablet-edge.top,.tablet-edge.bottom { left:30px; right:30px; height:10px; transform-origin:center top; transform:rotateX(90deg); }
.tablet-edge.top { top:0; }.tablet-edge.bottom { bottom:-10px; }
.tablet-edge.left,.tablet-edge.right { top:30px; bottom:30px; width:10px; transform-origin:left center; transform:rotateY(90deg); }
.tablet-edge.left { left:0; }.tablet-edge.right { right:-10px; }
.device-reveal figcaption { padding:18px 28px 22px; display:flex; justify-content:space-between; align-items:center; gap:18px; font-size:16px; }
[data-device-replay] { min-height:44px; padding:8px 0; border:0; background:none; color:inherit; text-decoration:underline; text-underline-offset:5px; white-space:nowrap; }
@media(max-width:650px) {
 .device-space { height:370px; perspective:1250px; }
 .device-reveal figcaption { padding:8px 20px 18px; flex-wrap:wrap; gap:4px 18px; font-size:14px; }
 .device-reveal figcaption > span { max-width:23ch; }
 [data-device-replay] { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) { .device-reveal { --arm-open:80deg!important; --lid-open:25deg!important; --tablet-slide:50px!important; --view-x:58deg!important; --view-z:-6deg!important; --screen-on:1!important; } }
/* Back-cover details disappear behind the display; all hardware fits its stage. */
.device-scene { top:var(--rig-y,72%); }
.tablet-back * { backface-visibility:hidden; }
.cover-seam { opacity:calc(1 - var(--screen-on)); }

/* Responsive open pose when script is unavailable. JS supplies exact fit. */
@media(max-width:1200px) { .device-reveal { --device-scale:.61; } }
@media(max-width:1000px) { .device-reveal { --device-scale:.52; } }
@media(max-width:800px) { .device-reveal { --device-scale:.45; } }
@media(max-width:650px) { .device-reveal { --device-scale:.35; } }
@media(max-width:400px) { .device-reveal { --device-scale:.31; } }
@media(max-width:360px) { .device-reveal { --device-scale:.27; } }