:root{color-scheme:light;--exit: 0;--open: 108deg;--glare: .7;--reveal: 0;--mac-w: min(62vw, 820px, 96vh);--slab: max(.75px, var(--mac-w) / 410)}*{box-sizing:border-box}html,body{margin:0}body{background:#fff;color:#000;font-family:Didot,"Bodoni 72",Bodoni Moda,Libre Bodoni,Georgia,serif}.hero{height:460vh}.stage{position:sticky;top:0;height:100vh;height:100dvh;display:grid;place-items:center;overflow:hidden}.stage>*{grid-area:1 / 1}.cue{align-self:start;margin-top:4vh;color:#000;opacity:calc(.55 - var(--exit) * 3);text-decoration:none}.cue svg{display:block}.footer{align-self:end;margin:0 0 max(1.4vh,12px);font-family:Helvetica Neue,Helvetica,-apple-system,SF Pro Text,system-ui,Arial,sans-serif;font-size:.72rem;letter-spacing:.01em;color:#00000061}.footer a{color:inherit;text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px;transition:color .15s ease}.footer a:hover{color:#000000b3}.wordmark{margin:0;padding:0 4vw;font-size:clamp(2.5rem,11.5vw,14rem);font-weight:700;letter-spacing:-.01em;line-height:1;white-space:nowrap;pointer-events:none;transform:translateY(calc(var(--exit) * 70vh));opacity:calc(1 - var(--exit) * 1.6);will-change:transform,opacity}.glass{color:#2a56a3}.reveal{display:grid;justify-items:center;gap:.4rem;text-align:center;transform:translateY(calc(-10vh + (1 - var(--reveal)) * 4vh));opacity:var(--reveal);pointer-events:none;will-change:transform,opacity}.reveal.live{pointer-events:auto}.reveal .icon{display:block;width:clamp(96px,14vw,168px);height:auto}.reveal .name{margin:0;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;letter-spacing:-.01em;line-height:1.1}.reveal .download,.reveal .note{font-family:Helvetica Neue,Helvetica,-apple-system,SF Pro Text,system-ui,Arial,sans-serif}.reveal .download{margin-top:.6rem;padding:.6em 1.5em;border-radius:999px;background:#000;color:#fff;font-size:clamp(.95rem,1.3vw,1.05rem);font-weight:500;letter-spacing:.01em;text-decoration:none;transition:background .15s ease}.reveal .download:hover{background:#2a2a2e}.reveal .note{margin:.35rem 0 0;font-size:clamp(.82rem,1.05vw,.95rem);letter-spacing:.01em;color:#00000080}.mac{pointer-events:none;width:var(--mac-w);perspective:3400px;perspective-origin:50% 40%;transform:translateY(calc((1 - var(--exit)) * -80vh));opacity:calc(var(--exit) * 2);will-change:transform,opacity}.laptop{position:relative;width:100%;height:calc(var(--mac-w) * .678);transform-style:preserve-3d;transform:translateY(-22%) rotateX(-17deg)}.lid,.lid-front,.lid-back,.base,.deck,.slab{position:absolute}.lid,.base{transform-style:preserve-3d}.lid{left:0;right:0;bottom:0;height:100%;transform-origin:50% 100%;transform:translateY(-.8%) rotateX(calc(var(--open) - 90deg))}.lid-front,.lid-back{inset:0;border-radius:3.5%/7%;backface-visibility:hidden}.lid-front{background:#0b0b0d;padding:2.6% 2.6% 3.6%;box-shadow:inset 0 0 0 1px #ffffff0f,0 0 0 1px #0009}.lid-back{transform:rotateY(180deg) translateZ(1px);background:linear-gradient(180deg,#d9dbe0,#c2c5cc 55%,#b3b7bf);box-shadow:inset 0 0 0 1px #0000001f,0 30px 60px #0000002e}.screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:1.2%/1.9%;background:#000}.frames{display:block;width:100%;height:100%}.glare{position:absolute;inset:0;pointer-events:none;opacity:calc(var(--glare) * .22);background:linear-gradient(165deg,#ffffff8c,#ffffff2e 28%,#fff0 55%)}.camera{position:absolute;top:1%;left:50%;width:.7%;aspect-ratio:1;transform:translate(-50%);border-radius:50%;background:#1d2330;box-shadow:0 0 0 1px #ffffff14}.base{left:0;right:0;top:100%;height:100%;transform-origin:50% 0%;transform:rotateX(90deg)}.deck{inset:0;border-radius:3.5%/7%;background:linear-gradient(180deg,#cfd2d8,#c4c7ce 40%,#b9bdc5);box-shadow:inset 0 0 0 1px #00000024}.keyboard{position:absolute;top:3.9%;left:11%;right:11%;height:48.3%;display:grid;grid-template-columns:repeat(58,1fr);grid-template-rows:.55fr repeat(5,1fr);gap:3px;padding:calc(5px + 1%) 6px;border-radius:12px/24px;background:#aeb2ba;overflow:hidden}.key{border-radius:2px;background:#a5a9b2}.arrows{grid-column:span 12;display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.updown{display:grid;grid-template-rows:1fr 1fr;gap:2px}.trackpad{position:absolute;top:56%;left:34%;right:34%;height:40%;border-radius:6%/10%;background:#c6c9d0;box-shadow:inset 0 0 0 1px #0000001f}.slab{inset:0;border-radius:3.5%/7%;background:#a4a8b1}.slab:last-child{background:#8f939b}
