/* Isolated experiments. Source screenshots are never altered. */
.motion-figure{margin:0;min-width:0}.motion-stage{position:relative;aspect-ratio:1.55;container-type:inline-size;isolation:isolate;overflow:hidden;border-radius:16px;perspective:1400px;background:#181c22}
.motion-stage *,.motion-stage *::before,.motion-stage *::after{box-sizing:border-box}.depth-rig{position:absolute;inset:0;transform-style:preserve-3d}.ui-object{position:absolute;display:block;cursor:zoom-in;text-decoration:none;transform-style:preserve-3d;color:inherit;outline-offset:6px}.ui-object:focus-visible{outline:3px solid #aabaff}.ui-object img{display:block;width:100%;height:auto;max-width:none;pointer-events:none}.ui-frame{display:block;position:relative;background:#242b34;transform-style:preserve-3d}.ui-frame::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#252a31;transform:translateZ(-5px);box-shadow:0 3.5cqw 4cqw -1.5cqw #0009}.ui-frame--web{padding:.6cqw;border-radius:1.2cqw;background:linear-gradient(135deg,#9aa4af,#3b424c 24%,#11151a 70%,#6c7580);box-shadow:inset 0 1px #ffffffb0,inset 0 -1px #000a}.ui-frame--web img{border-radius:.65cqw}.ui-frame--app{padding:.65cqw;border-radius:3.4cqw;background:linear-gradient(130deg,#b8c0c8,#46515b 30%,#171d24 70%,#8996a3);box-shadow:inset 0 1px #fff9,inset -1px -1px #0009}.ui-frame--app img{border-radius:2.8cqw}.ui-cut{position:relative;display:block;overflow:hidden;border-radius:1.3cqw;box-shadow:0 2cqw 3cqw -1cqw #0008;background:#f4f6f9}.ui-cut img{position:absolute;height:auto;max-width:none}.ui-cut::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 1px 1px #fff;border-radius:inherit}
/* A: complete static screenshot inside a front-facing laptop. */
.motion-a{perspective:none}
.motion-a .depth-rig,.motion-a .ui-object,.motion-a .ui-frame{transform-style:flat}
.motion-a .ui-frame::before{display:none}
.lift-web-assembly{position:absolute;inset:0;z-index:1}
.lift-rig{--console-top:18%;transform:none}
.lift-console{width:78%;left:7%;top:var(--console-top);transform:none}
.lift-console .ui-frame--web{padding:1.05cqw .85cqw 1.4cqw;border:.13cqw solid #858c95;border-radius:1.35cqw 1.35cqw .65cqw .65cqw;background:#0a0c10;box-shadow:inset 0 0 0 .15cqw #262c34,0 1.5cqw 2cqw -.8cqw #0006}
.lift-console .ui-frame--web img{border-radius:.3cqw}
.laptop-camera{position:absolute;top:.33cqw;left:calc(50% - .14cqw);width:.28cqw;height:.28cqw;border-radius:50%;background:#233849;box-shadow:0 0 0 .12cqw #151a20}
.laptop-hinge{display:block;position:relative;width:96%;height:.45cqw;margin:-.05cqw auto 0;background:linear-gradient(90deg,#4d535b,#191d23 9%,#191d23 91%,#4d535b);border-radius:0 0 .2cqw .2cqw}
.laptop-base{display:block;position:relative;left:-7%;width:114%;height:2.1cqw;background:linear-gradient(#e2e5e9 0%,#aab0b8 22%,#707781 65%,#474d55 85%,#30353c);border-radius:.12cqw .12cqw 4cqw 4cqw / .12cqw .12cqw 1.15cqw 1.15cqw;box-shadow:0 1.4cqw 1.8cqw -.6cqw #0009,inset 0 1px #ffffffb0}
.laptop-base::before{content:"";position:absolute;left:43%;width:14%;top:0;height:.65cqw;border-radius:0 0 .7cqw .7cqw;background:linear-gradient(#696f77,#b5bbc2);box-shadow:0 1px #eff1f470}
.lift-app{width:23%;left:73%;top:13%;transform:none;transform-origin:50% 100%;z-index:2}
.lift-app .ui-frame{box-shadow:inset 1px 1px #fffa,0 1.8cqw 3cqw -.9cqw #0009}
/* B: three complete student screens occupy near, middle and far planes. */
.motion-b{background:radial-gradient(ellipse at 50% 5%,#f8faf8,transparent 70%),linear-gradient(180deg,#dce4e1,#aebdb8);perspective:1100px}.sequence-ground{position:absolute;bottom:8%;height:9%;left:10%;width:80%;background:#2d4a4360;filter:blur(2.8cqw);border-radius:50%}.sequence-screen{width:25%;left:37.5%;top:6%;transform:translateZ(3cqw);transition:transform 950ms cubic-bezier(.22,.8,.18,1),opacity 700ms cubic-bezier(.22,.8,.18,1);will-change:auto}.sequence-screen .ui-frame--app{background:linear-gradient(130deg,#fff,#c3ccc9 45%,#6c7b78);box-shadow:inset 1px 1px #fff,inset -1px -1px #7b8985}.sequence-screen .ui-frame::before{background:#83938d;box-shadow:0 4cqw 4cqw -1.4cqw #2a443c70}.sequence-screen[data-slot=left]{transform:translate3d(-110%,1.2cqw,-11cqw) rotateY(28deg) rotateZ(-5deg) scale(.9);opacity:1}.sequence-screen[data-slot=right]{transform:translate3d(110%,1.2cqw,-11cqw) rotateY(-28deg) rotateZ(5deg) scale(.9);opacity:1}.sequence-screen[data-slot=center]{z-index:3;opacity:1}.sequence-screen:focus-visible{outline-color:#193b33}.motion-stage.is-instant .sequence-screen{transition:none}
/* C: framed screens above a physical base, lit from the upper left. */
.motion-c{background:radial-gradient(ellipse at 15% 4%,#5b626b 0,transparent 58%),linear-gradient(160deg,#2a3039,#12151b 80%);perspective:1400px}.studio-space{position:absolute;inset:0;transform-style:preserve-3d;--studio-scale:.9;transform:rotateX(2deg) rotateY(-4deg) scale(var(--studio-scale))}.studio-base{position:absolute;left:6%;width:89%;height:19%;bottom:4%;border-radius:8% 8% 13% 13% / 18% 18% 25% 25%;background:linear-gradient(177deg,#65707c,#303741 30%,#171b23 37%,#3d4653 40%,#171d25);transform:rotateX(56deg) rotateZ(-4deg);box-shadow:0 3cqw 3.8cqw -1cqw #000b,inset 0 2px #c8d0d850}.studio-rig{--rig-transform:rotateY(-5deg) rotateX(1deg);transform:var(--rig-transform)}.studio-console{width:75%;left:2%;top:17%;transform:rotateY(10deg) rotateZ(-4deg)}.studio-app{width:25%;left:69%;top:9%;transform:translateZ(6cqw) rotateY(-17deg) rotateZ(5deg)}.studio-console .ui-frame--web{padding:1.1cqw;border-radius:1.4cqw;background:linear-gradient(140deg,#c0c6cf,#65707d 17%,#232a34 50%,#7d8794);box-shadow:inset 0 1px #fff9,0 3cqw 4cqw -1.2cqw #0009}.studio-app .ui-frame--app{padding:.75cqw;box-shadow:inset 1px 1px #fffc,0 4.2cqw 4.5cqw -1.5cqw #000c}.studio-console .ui-frame::before{transform:translate3d(0,.65cqw,-7px)}.studio-app .ui-frame::before{transform:translate3d(.5cqw,.3cqw,-5px);background:#657382}
.motion-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;font:14px/1.4 Pretendard,-apple-system,sans-serif;color:#bac3d0}.motion-tools button{appearance:none;background:#222832;color:#e2e7ef;border:1px solid #66717f;padding:9px 14px;min-height:44px;min-width:44px;border-radius:7px;cursor:pointer;font:inherit;transition:background-color 160ms ease,transform 130ms cubic-bezier(.23,1,.32,1)}.motion-tools button:hover{background:#303a48}.motion-tools button:active{transform:scale(.97)}.motion-tools button:focus-visible{outline:3px solid #aabaff;outline-offset:3px}.motion-tools button:disabled{color:#a6afba;background:#20252d;cursor:default}.motion-tools span{margin-left:4px;font-size:13px}.experiment-bar{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:90;display:flex;gap:4px;max-width:calc(100% - 16px);background:#171c24;box-shadow:0 8px 28px #0009;border:1px solid #626d7d;border-radius:12px;padding:6px;font:14px/1.2 Pretendard,-apple-system,sans-serif;color:#f2f4ef}.experiment-bar a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;text-decoration:none;white-space:nowrap;border-radius:6px;color:inherit}.experiment-bar a[aria-current]{background:#e0e6fa;color:#1b263c}.experiment-bar a:focus-visible{outline:3px solid #aabaff;outline-offset:1px}.motion-home{padding-bottom:90px}.motion-home .motion-exhibit{grid-area:visual;min-width:0;align-self:center}.motion-home .motion-stage{aspect-ratio:1.32}.motion-home #case-pmp{scroll-margin-top:112px}.motion-home .sequence-screen{width:28%;left:36%;top:6%}.motion-home .sequence-screen[data-slot=left]{transform:translate3d(-103%,2cqw,-11cqw) rotateY(28deg) rotateZ(-5deg) scale(.88)}.motion-home .sequence-screen[data-slot=right]{transform:translate3d(103%,2cqw,-11cqw) rotateY(-28deg) rotateZ(5deg) scale(.88)}.motion-home .studio-app{width:28%;left:65%;top:9%}.motion-home .studio-console{top:27%}.motion-home .lift-rig{--console-top:18%}.motion-home .lift-app{top:13%}
@media(max-width:700px){.motion-stage{aspect-ratio:1.12!important;border-radius:12px;perspective:900px}.lift-rig,.motion-home .lift-rig{--console-top:28%}.lift-console{width:78%;left:7%}.lift-app,.motion-home .lift-app{width:27%;left:69%;top:10%;transform:none;z-index:2}.studio-space{--studio-scale:.94}.sequence-screen,.motion-home .sequence-screen{width:33%;left:33.5%;top:7%}.sequence-screen[data-slot=left],.motion-home .sequence-screen[data-slot=left]{transform:translate3d(-92%,2cqw,-12cqw) rotateY(30deg) rotateZ(-5deg) scale(.88)}.sequence-screen[data-slot=right],.motion-home .sequence-screen[data-slot=right]{transform:translate3d(92%,2cqw,-12cqw) rotateY(-30deg) rotateZ(5deg) scale(.88)}.studio-console{width:86%;left:-6%;top:31%!important}.studio-app,.motion-home .studio-app{width:34%;left:61%;top:11%}.studio-base{bottom:5%;height:14%;left:3%;width:94%}.motion-tools{gap:6px}.motion-tools button{padding-inline:11px;font-size:13px}.motion-tools span{flex-basis:100%;margin:2px 0 0}.experiment-bar a{padding-inline:9px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.sequence-screen,.motion-tools button{transition:none}}

/* Transparent, bottom-aligned device group; only screen content changes. */
.motion-stage.motion-a{aspect-ratio:1.7!important;perspective:none;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.motion-stage.motion-a::after{display:none}
.motion-a .lift-console{width:82%;left:5.74%;top:auto;bottom:0}
.motion-a .lift-app{width:23.5%;left:auto;right:.25cqw;top:0;bottom:auto;transform:none}
.device-screen{display:block;position:relative;overflow:hidden;isolation:isolate}
.ui-frame--web .device-screen{aspect-ratio:1710/985;border-radius:.3cqw}
.ui-frame--app .device-screen{aspect-ratio:390/844;border-radius:2.8cqw}
.device-screen img{width:100%;height:100%;object-fit:contain}
.device-screen .device-next{position:absolute;inset:0}

/* Standalone scroll demo needs enough exit space on a short mobile page. */
.scroll-preview .single{margin-bottom:clamp(100px,25vh,240px)}
.scroll-preview .project-title{word-break:keep-all;text-wrap:balance}
.keep-word{white-space:nowrap}

/* Focus follows the hardware silhouette and stays visible outside the scene. */
.motion-a .lift-app{border-radius:3.4cqw}
.motion-a .lift-console{border-radius:1.35cqw}
.motion-a .ui-object:focus-visible{outline:2px solid #aabaff;outline-offset:5px}