/* The source remains portrait. The presentation moves the device around it. */
.magna-chapter{height:720svh;position:relative;scroll-margin-top:0;background:oklch(8% .004 90);color:var(--text)}
.magna-stage{position:sticky;top:0;height:100svh;overflow:clip;perspective:1500px;isolation:isolate}
.magna-heading{position:absolute;left:8vw;top:49%;transform:translateY(-50%) translateZ(1px);z-index:2;opacity:var(--magna-opacity,1)}
.magna-heading h1{margin:0;font-family:'Avenir Next',Avenir,Manrope,sans-serif;font-size:clamp(50px,7vw,112px);font-weight:400;letter-spacing:-.065em;line-height:.98}
.magna-heading .magna-mobile-title{margin-top:32px;font-size:clamp(24px,2.6vw,40px);letter-spacing:-.045em;line-height:1.15;color:var(--muted)}
.magna-phone{--magna-device-width:min(440px,calc((100svh - 190px)*.473));position:absolute;left:69%;top:50%;width:var(--magna-device-width);padding:8px;border-radius:clamp(24px,3vw,48px);background:linear-gradient(115deg,oklch(57% .009 90),oklch(17% .006 90) 14%,oklch(39% .007 90) 49%,oklch(14% .005 90) 85%,oklch(52% .008 90));box-shadow:0 0 0 1px oklch(60% .008 90 / .4),inset 0 0 0 2px oklch(9% .004 90),24px 40px 100px oklch(2% .004 90 / .7);transform:translate(-50%,-50%);transform-origin:center;will-change:transform,opacity;isolation:isolate}
.magna-screen{width:100%;aspect-ratio:390/844;position:relative;overflow:clip;border-radius:clamp(19px,2.4vw,40px);background:oklch(5% .004 90);contain:layout paint;box-shadow:0 0 0 2px oklch(5% .004 90)}
.magna-screen>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.magna-frame{position:absolute;inset:0;width:390px;height:844px;border:0;transform:scale(var(--magna-frame-scale,1));transform-origin:0 0;pointer-events:none;opacity:0;transition:opacity .45s ease-out}
.magna-ready .magna-frame{opacity:1}
.magna-phone:before{content:'';position:absolute;left:-3px;top:23%;width:3px;height:7%;border-radius:2px;background:oklch(38% .008 90);box-shadow:0 45px 0 oklch(32% .008 90)}
.magna-phone:after{content:'';position:absolute;right:-3px;top:29%;width:3px;height:11%;border-radius:2px;background:oklch(35% .008 90)}
.magna-island{position:absolute;z-index:2;width:22%;height:2.5%;top:2%;left:39%;border-radius:40px;background:oklch(4% .004 90);pointer-events:none}
.magna-controls{position:absolute;bottom:25px;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:center;gap:25px;font-size:10px;color:var(--muted);opacity:var(--magna-opacity,1);transform:translateZ(1px)}
.magna-controls a{color:inherit;text-underline-offset:4px}.magna-controls button{font:inherit;font-size:16px;min-width:44px;min-height:44px;cursor:pointer;background:none;border:1px solid oklch(38% .006 90);border-radius:50%;color:var(--text)}
.magna-controls :is(button,a):focus-visible{outline:1px solid var(--text);outline-offset:5px}.magna-controls button[hidden]{display:none}
@media(max-width:1100px){.magna-heading{left:7vw}.magna-heading h1{font-size:clamp(48px,6.5vw,72px)}.magna-phone{left:72%}}
@media(max-height:700px){.magna-phone{--magna-device-width:min(340px,calc((100svh - 165px)*.473))}.magna-controls{bottom:10px}.magna-heading .magna-mobile-title{margin-top:22px}}
.magna-reduced{height:auto;min-height:100svh}.magna-reduced .magna-stage{position:relative;perspective:none}.magna-reduced .magna-phone{transform:translate(-50%,-50%)!important;opacity:1!important}
@media(prefers-reduced-motion:reduce){.magna-frame{transition:none}}
@media print{.magna-chapter{height:auto;break-inside:avoid}.magna-stage{position:relative;height:700px;perspective:none}.magna-phone{--magna-device-width:270px;transform:translate(-50%,-50%)!important;opacity:1!important;box-shadow:none}.magna-heading,.magna-controls{opacity:1!important}.magna-frame,.magna-controls{display:none!important}.magna-heading h1{font-size:55px}}