.macbook-stage{--mb-w:min(900px, 92vw);--mb-scr-h:calc((var(--mb-w) - 28px) * .5625);--mb-lid-h:calc(var(--mb-scr-h) + 30px);--mb-base:calc(var(--mb-w) * .5);--mb-h:calc(var(--mb-lid-h) + var(--mb-base) * .5 + 30px);position:relative}@media (min-width:1024px){.macbook-stage:not(.is-still){height:calc(100vh + 560px)}.macbook-stage:not(.is-still) .macbook-pin{height:calc(100vh - 78px);position:sticky;top:78px}}.macbook-pin{justify-content:center;align-items:center;padding:12px 0 0;display:flex}.macbook{--o:0;--s:.9;--on:0;width:var(--mb-w);height:var(--mb-h);perspective:2200px;perspective-origin:50% 30%;transform:scale(var(--s));transform-origin:50% 40%;will-change:transform;position:relative}.macbook-3d{pointer-events:none;width:100%;height:100%;transform-style:preserve-3d;transform:translate3d(0, calc(var(--mb-lid-h) * -.95 * (1 - var(--o))), 0);will-change:transform;position:relative}.macbook-lid{width:100%;height:var(--mb-lid-h);transform-origin:50% 100%;transform-style:preserve-3d;transform:translate3d(0, 0, calc(var(--mb-base) * -.866)) rotateX(calc(-118deg + 128deg * var(--o)));will-change:transform;position:absolute;top:0;left:0}.macbook-screen,.macbook-lid-back{backface-visibility:hidden;border-radius:18px;position:absolute;inset:0}.macbook-screen{background:#0a0a10;padding:14px 14px 16px;box-shadow:inset 0 0 0 1.5px #ffffff14,0 0 0 1px #0009}.macbook-screen-img{width:100%;height:var(--mb-scr-h);object-fit:cover;object-position:top;opacity:calc(.06 + .94 * var(--on));background:#0d0c16;border-radius:6px;display:block}.macbook-screen-glare{opacity:calc(.9 - .6 * var(--on));pointer-events:none;background:linear-gradient(112deg,#ffffff29 0%,#ffffff08 38%,#0000 60%);border-radius:6px;position:absolute;inset:14px 14px 16px}.macbook-play{color:#fff;font:inherit;text-align:center;cursor:pointer;opacity:var(--on,1);pointer-events:none;background:radial-gradient(60% 60%,#07060b9e,#07060b57 70%,#07060b33 100%);border:0;border-radius:6px;place-content:center;justify-items:center;gap:12px;padding:14px;transition:opacity .3s;display:grid;position:absolute;inset:14px 14px 16px}.macbook.is-open .macbook-play,.macbook-stage.is-still .macbook-play{pointer-events:auto}.macbook-play-ico{background-color:var(--cta-bg,#36dfb0);background-image:var(--cta-sheen,none);width:58px;height:58px;color:var(--cta-fg,#03140e);border-radius:50%;place-items:center;transition:transform .25s cubic-bezier(.2,.8,.2,1);display:grid;box-shadow:0 10px 34px -12px #000000b3}.macbook-play-ico svg{margin-left:2px}.macbook-play:hover .macbook-play-ico{transform:scale(1.08)}.macbook-play:focus-visible{outline:2px solid var(--cta-bg,#36dfb0);outline-offset:2px}.macbook-play-t{letter-spacing:-.01em;text-shadow:0 2px 14px #000000a6;flex-direction:column;align-items:center;font-size:14.5px;font-weight:700;line-height:1.2;display:flex}.macbook-play-t small{font-family:var(--font-mono);color:#ffffffa8;margin-top:3px;font-size:11.5px;font-weight:500}@media (max-width:640px){.macbook-play{gap:9px;padding:10px}.macbook-play-ico{width:42px;height:42px}.macbook-play-t{font-size:12.5px}}@media (prefers-reduced-motion:reduce){.macbook-play,.macbook-play-ico{transition:none}}.macbook-notch{background:#0a0a10;border-radius:0 0 8px 8px;width:112px;height:11px;position:absolute;top:14px;left:50%;transform:translate(-50%)}.macbook-lid-back{background:linear-gradient(160deg,#ffffff0f,#0000 40%),linear-gradient(#1a1922,#0f0e16);place-items:center;display:grid;transform:rotateX(180deg);box-shadow:inset 0 0 0 1.5px #ffffff12}.macbook-lid-back img{opacity:.55;width:64px;height:64px}.macbook-base{top:calc(var(--mb-lid-h) - var(--mb-base) * .5);width:100%;height:var(--mb-base);transform-origin:50% 100%;background:linear-gradient(#ffffff0d,#0000 30%),linear-gradient(#17161f 0%,#121119 100%);border-radius:14px 14px 26px 26px;position:absolute;left:0;overflow:hidden;transform:rotateX(60deg);box-shadow:inset 0 0 0 1.5px #ffffff12,0 40px 60px -30px #000000e6}.macbook-hinge{background:linear-gradient(#050508,#0c0b12);border-radius:0 0 10px 10px;height:26px;margin:0 8%}.macbook-deck{grid-template-columns:8% 1fr 8%;gap:14px;padding:22px 30px 0;display:grid}.macbook-grill{opacity:.8;background-image:radial-gradient(#ffffff1c 1px,#0000 1.4px);background-size:7px 7px;border-radius:6px}.macbook-keys{gap:6px;display:grid}.macbook-row{grid-template-columns:repeat(14,1fr);gap:6px;display:grid}.macbook-row[data-row="0"] i{height:22px}.macbook-row[data-row="3"]{grid-template-columns:1.6fr repeat(11,1fr) 1.6fr}.macbook-row[data-row="4"]{grid-template-columns:2fr repeat(10,1fr) 2fr}.macbook-row--last{grid-template-columns:1fr 1fr 1.2fr 6fr 1.2fr 1fr}.macbook-row i{background:#0b0b12;border-radius:5px;height:34px;display:block;box-shadow:inset 0 0 0 1px #ffffff0b,inset 0 -2px #0009}.macbook-trackpad{background:#ffffff09;border-radius:14px;width:36%;height:34%;margin:26px auto 0;box-shadow:inset 0 0 0 1px #ffffff12}.macbook-shadow{height:60px;opacity:calc(.4 + .6 * var(--o));z-index:-1;background:radial-gradient(50% 50%,#000000b3,#0000 72%);border-radius:50%;position:absolute;bottom:-2px;left:4%;right:4%}.macbook-stage.is-still .macbook,.macbook-stage.is-still .macbook-lid{--o:1!important;--s:1!important;--on:1!important}@media (max-width:767px),(prefers-reduced-motion:reduce){.macbook,.macbook-lid{--o:1!important;--s:1!important;--on:1!important}.macbook-stage{height:auto}.macbook-pin{height:auto;position:static}}@media (max-width:767px){.macbook-stage{--mb-w:calc(100vw - 24px)}.macbook{perspective:1400px}.macbook-screen{border-radius:12px;padding:8px 8px 10px}.macbook-screen-img{border-radius:4px}.macbook-screen-glare{inset:8px 8px 10px}.macbook-notch{width:64px;height:7px;top:8px}.macbook-stage{--mb-scr-h:calc((var(--mb-w) - 16px) * .5625);--mb-lid-h:calc(var(--mb-scr-h) + 18px)}.macbook-hinge{height:14px}.macbook-deck{gap:8px;padding:12px 16px 0}.macbook-keys,.macbook-row{gap:3px}.macbook-row i{border-radius:3px;height:16px}.macbook-row[data-row="0"] i{height:10px}.macbook-trackpad{border-radius:8px;margin-top:12px}}