/* All hardware shares one camera. The lid bottom and deck back are the same
   line; deck sidewalls attach to its actual edges, not independent polygons. */
.he-laptop { position:relative; container-type:inline-size; width:110%; margin-left:-7%; aspect-ratio:1.63; min-width:0; perspective:180cqw; perspective-origin:50% 85%; }
.he-laptop-assembly { position:absolute; left:23%; top:5%; width:73%; height:78%; transform-style:preserve-3d; transform-origin:50% 100%; transform:rotateY(-22deg) rotateZ(1deg); }
.he-laptop-shadow { position:absolute; inset:89% 1% 0 4%; border-radius:50%; background:#0008; filter:blur(1.5cqw); }
.he-laptop-screen { position:absolute; inset:0; padding:2.8% 1.6% 3%; border:.2cqw solid #72828d; border-radius:1.8cqw 1.8cqw .35cqw .35cqw; background:linear-gradient(125deg,#040a10,#111b24 70%,#050b11); box-shadow:inset 0 0 0 .25cqw #02070c,inset -.25cqw 0 .3cqw #a9bbc64d; }
.he-laptop-screen::before { content:""; position:absolute; top:1.35%; left:50%; width:.55cqw; height:.55cqw; border-radius:50%; background:radial-gradient(circle at 40% 35%,#244353,#040b13 65%); }
.he-laptop-base { position:absolute; top:100%; left:0; width:100%; height:42cqw; transform-origin:50% 0; transform:rotateX(84deg); transform-style:preserve-3d; background:linear-gradient(115deg,#7c8b96,#293b48 16%,#40535f 78%,#8f9da7); border:.12cqw solid #72848f; }
.he-laptop-hinge { position:absolute; top:0; left:5%; width:90%; height:1.3cqw; background:linear-gradient(#070d13,#4a5964,#0a121b); border-radius:.5cqw; }
.he-laptop-keyboard { position:absolute; left:8%; top:8%; width:84%; height:49%; display:grid; gap:.4cqw; padding:.5cqw; border:.15cqw solid #6e808c; border-radius:.6cqw; background:#0a141e; }
.he-laptop-keyboard>div { display:flex; gap:.4cqw; }
.he-laptop-keyboard i { flex:1; border-radius:.3cqw; background:linear-gradient(#344550,#182731); box-shadow:0 .18cqw #050b10; }
.he-laptop-keyboard>div:last-child i:nth-child(5) { flex:5; }
.he-laptop-keyboard>div:last-child i:nth-child(n+10) { display:none; }
.he-laptop-trackpad { position:absolute; left:35%; top:65%; width:30%; height:25%; border:.18cqw solid #8f9fa966; border-radius:.65cqw; background:linear-gradient(145deg,#566c7a,#3c515f); }
.he-laptop-front { position:absolute; top:100%; left:-.12cqw; width:calc(100% + .24cqw); height:1.2cqw; transform-origin:50% 0; transform:rotateX(-90deg); background:linear-gradient(#9babb6,#5a6d7a 22%,#273d4b 75%,#0b1c28); border-radius:0 0 .35cqw .35cqw; }
.he-laptop-front span { position:absolute; top:0; left:41%; width:18%; height:38%; background:linear-gradient(#182b39,#526c7c); border-radius:0 0 .4cqw .4cqw; }
.he-laptop-side { position:absolute; left:100%; top:0; width:1.2cqw; height:100%; transform-origin:0 50%; transform:rotateY(90deg); background:linear-gradient(90deg,#8597a4,#314958 70%,#112b3b); }
.he-laptop-side i { position:absolute; left:25%; top:12%; width:48%; height:6%; border-radius:.1cqw; background:#020a11; box-shadow:0 0 0 .08cqw #9fb0b955; }
.he-laptop-side i:nth-child(2) { top:24%; height:9%; }
.he-laptop-side i:nth-child(3) { top:40%; height:7%; }
/* Subpixel smoothing on painted surfaces only. A filter on the assembly or
   deck would flatten their preserve-3d children and break the shared geometry. */
.he-laptop-screen,
.he-laptop-keyboard,
.he-laptop-trackpad,
.he-laptop-front,
.he-laptop-side {
  backface-visibility: hidden;
  filter: blur(.2px);
}
.he-laptop-app>img { image-rendering: auto; }
@media(max-width:700px) { .he-laptop { width:100%; margin:18px auto; } }
.he-laptop-display { display: flex; height: 100%; overflow: hidden; background: #edf3fa; border: .12cqw solid #010509; }
.he-laptop-sidebar { flex: 0 0 19%; background: linear-gradient(110deg,#082231,#041622); padding: 1.5cqw .6cqw; color: #dceaf1; }
.he-laptop-brand { display: flex; align-items: center; white-space: nowrap; margin-bottom: 2.2cqw; font: 500 1.12cqw Arial,sans-serif; letter-spacing: -.04em; }
.he-laptop-brand img { width: 2.2cqw; height: 2.2cqw; object-fit: contain; }
.he-laptop-brand b { color: #59d6ed; font-weight: 500; }
.he-laptop-nav-item { display: flex; align-items: center; gap: 1cqw; min-height: 3.45cqw; padding: .7cqw .7cqw; font: 500 1.04cqw Arial,sans-serif; border-radius: .35cqw; }
.he-laptop-nav-item svg { flex: 0 0 1.35cqw; width: 1.35cqw; height: 1.35cqw; }
.he-laptop-nav-item.is-active { background: linear-gradient(90deg,#124568,#103349); color: #fff; }
.he-laptop-app { min-width: 0; flex: 1; padding: 1.5% 0 0 1%; overflow: hidden; }
.he-laptop-app>img { display: block; width: 100%; height: 100%; object-fit: fill; }