/* A flat scene with a 2.5D hinge: no nested 3D/backface layers to disappear
   when mobile browsers re-composite the page during a scroll. */
.laptop-showcase{position:relative;min-width:0;width:100%;max-width:780px;margin:0;align-self:center;direction:ltr}
.laptop-stage{position:relative;width:100%;aspect-ratio:1.18;isolation:isolate}
.laptop-toggle{position:absolute;inset:0;width:100%;height:100%;display:block;padding:0;border:0;border-radius:24px;background:transparent;color:inherit;cursor:pointer;touch-action:pan-y pinch-zoom;-webkit-tap-highlight-color:transparent}
.laptop-toggle:focus-visible{outline:2px solid var(--ink,#1c1d20);outline-offset:5px}
.laptop-floor{position:absolute;left:9%;right:9%;height:12%;bottom:3%;border-radius:50%;background:radial-gradient(ellipse,rgba(28,29,32,.19),rgba(28,29,32,.07) 38%,transparent 69%);transform:scaleY(.6);pointer-events:none}
.laptop-world{position:absolute;left:9%;top:6%;width:82%;aspect-ratio:1.5;display:block;pointer-events:none}
.laptop-lid{position:absolute;inset:0;z-index:2;display:block;transform-origin:50% 100%;transform:scale(1);transition:transform .85s cubic-bezier(.4,0,.2,1)}
.laptop-lid-front,.laptop-lid-back{position:absolute;inset:0;display:block;border:1px solid #9b9c9e;border-radius:13px 13px 5px 5px;transition:opacity 0s .28s}
.laptop-lid-front{padding:2.2% 1.8% 3.1%;background:linear-gradient(135deg,#36383c,#0c0d0e 34%,#242629 89%);box-shadow:0 0 0 1px #27292b,inset 0 1px 0 #727479;opacity:1}
.laptop-camera{position:absolute;left:calc(50% - 1.7px);top:1%;width:3.4px;height:3.4px;border-radius:50%;background:#060708;box-shadow:inset 0 0 0 1px #343b40,0 0 0 2px #16181a}
.laptop-screen{position:relative;display:block;overflow:hidden;width:100%;height:100%;border-radius:4px;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.laptop-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;user-select:none;-webkit-user-drag:none}
.laptop-screen:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.06),transparent 35%,rgba(255,255,255,.025));pointer-events:none}
.laptop-chin{position:absolute;bottom:.75%;left:0;right:0;text-align:center;font:500 clamp(3px,.43vw,6px)/1 Arial,sans-serif;letter-spacing:.16em;color:#a5a7a9}
.laptop-lid-back{display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#e2e3e5 0%,#babdc1 40%,#d0d2d5 73%,#a9adb1 100%);border-color:#95999e;box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.35);transform:scaleY(-1);opacity:0}
.laptop-back-wordmark{display:flex;flex-direction:column;gap:7px;text-align:center;font:600 clamp(5px,.95vw,11px)/1.3 Arial,sans-serif;letter-spacing:.25em;color:#65686d;text-shadow:0 1px 0 rgba(255,255,255,.65)}
.laptop-back-wordmark span{font-size:.65em;letter-spacing:.5em}
.laptop-base{position:absolute;top:100%;left:-3%;width:106%;height:42%;z-index:1;display:block;border:1px solid #c1c3c6;border-radius:3px 3px 10px 10px;background:linear-gradient(100deg,#d6d8db,#f1f2f4 30%,#d3d5d9 70%,#e6e7e9);box-shadow:inset 0 1px 0 #fff;clip-path:polygon(2.8% 0,97.2% 0,100% 100%,0 100%)}
.laptop-hinge{position:absolute;left:13%;right:13%;top:-.5%;height:3%;border-radius:4px;background:linear-gradient(#0e1012,#45494e 50%,#181a1d)}
.laptop-speaker{position:absolute;top:12%;bottom:34%;width:4%;background:radial-gradient(circle,#7c8085 18%,transparent 28%) 0 0/3px 3px;opacity:.64;border-radius:3px}
.laptop-speaker-left{left:4%}.laptop-speaker-right{right:4%}
.laptop-keyboard{position:absolute;top:11%;left:11%;right:11%;height:52%;display:flex;flex-direction:column;gap:4%;padding:1.2%;border:1px solid #b7bac0;border-radius:5px;background:#a9aeb5;box-shadow:inset 0 1px 3px #878c92}
.laptop-key-row{display:flex;flex:1;gap:1%;min-height:0;direction:ltr}
.laptop-key-row i{display:flex;flex:1;align-items:center;justify-content:center;min-width:0;border-radius:2px;background:linear-gradient(#2c2f35,#17191d);border:1px solid #15171b;box-shadow:0 1px 0 #464950;color:#c8cbd0;font:normal clamp(2px,.42vw,5px)/1 Arial,sans-serif;user-select:none}
.laptop-key-row .key-wide{flex:1.5}.laptop-key-row .key-extra{flex:2}.laptop-key-row .key-space{flex:6}
.laptop-key-row:first-child{flex:.65}
.laptop-trackpad{position:absolute;top:69%;left:34%;width:32%;height:24%;border:1px solid #aeb3ba;border-radius:5px;background:linear-gradient(125deg,#d5d8dd,#dfe2e6);box-shadow:0 1px 0 rgba(255,255,255,.85),inset 0 1px 1px rgba(117,125,135,.1)}
.laptop-base-edge{position:absolute;bottom:0;left:-1px;right:-1px;height:7px;border-radius:0 0 9px 9px;border:1px solid #aeb2b7;border-top-color:#fafafa;background:linear-gradient(#d6d9dc,#a5abb1);box-shadow:0 3px 6px rgba(28,29,32,.1)}
.laptop-base-edge:before{content:"";position:absolute;left:42%;right:42%;top:-1px;height:3px;border-radius:0 0 6px 6px;background:#a1a6ad;box-shadow:inset 0 -1px 0 #e4e6e9}
.laptop-caption{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:3% 9% 0;padding-top:17px;border-top:1px solid var(--line,rgba(28,29,32,.15));direction:rtl}
.laptop-caption-label{display:flex;flex-direction:column;gap:7px;color:var(--ink,#1c1d20);text-align:right;font-size:12px;font-weight:500}
.laptop-caption-label small{font:9px/1.3 Arial,sans-serif;letter-spacing:.12em;color:var(--muted,#64676b)}
.laptop-hint{display:flex;align-items:center;gap:7px;font-size:10px;line-height:1.8;color:var(--muted,#64676b);text-align:right}
.laptop-hint svg{width:16px;height:16px;flex-shrink:0;stroke:currentColor;stroke-width:1.4;fill:none}
[data-laptop-state="closed"] .laptop-lid{transform:scale(1.055,-.414)}
[data-laptop-state="closed"] .laptop-lid-front{opacity:0;transition-delay:.43s}
[data-laptop-state="closed"] .laptop-lid-back{opacity:1;transition-delay:.43s}
[data-laptop-blocked="true"] .laptop-lid,[data-laptop-instant="true"] .laptop-lid,[data-laptop-reduced="true"] .laptop-lid,
[data-laptop-blocked="true"] .laptop-lid>span,[data-laptop-instant="true"] .laptop-lid>span,[data-laptop-reduced="true"] .laptop-lid>span{transition:none}
@media(max-width:760px){.laptop-showcase{max-width:650px;margin-inline:auto}.laptop-caption{margin-top:0;padding-top:13px;gap:12px}.laptop-caption-label{font-size:11px}.laptop-caption-label small{font-size:8px}.laptop-hint{font-size:9px;gap:5px}.laptop-key-row i{border-width:.5px}.laptop-base-edge{height:5px}.laptop-lid-front,.laptop-lid-back{border-radius:9px 9px 3px 3px}.laptop-camera{width:2.4px;height:2.4px;left:calc(50% - 1.2px)}.laptop-trackpad{border-radius:3px}.laptop-chin{font-size:4px}}
@media(max-width:380px){.laptop-caption{margin-inline:5%;gap:8px}.laptop-caption-label{font-size:10px}.laptop-hint{font-size:8px}.laptop-hint svg{width:14px;height:14px}}
@media(prefers-reduced-motion:reduce){.laptop-lid,.laptop-lid>span{transition:none}}