*{box-sizing:border-box}body{margin:0;background:#f8f9fb;color:#20252c;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:13px}button,input{font:inherit}button{cursor:pointer}button:active{transform:scale(.97)}button:focus-visible,a:focus-visible,input:focus-visible,.upload:focus-within{outline:3px solid #8ba6ed;outline-offset:4px}header{height:82px;border-bottom:1px solid #e7e9ed;display:flex;align-items:center;justify-content:space-between;padding:0 4%}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;font-weight:650;font-size:20px;letter-spacing:-.6px}.logo{font-size:33px;color:#4a62d6}.tag{font-size:9px;letter-spacing:1.8px;color:#9196a0;border-left:1px solid #dce0e6;margin-left:10px;padding-left:20px}.header-note{font-size:11px;color:#777e88}i{display:inline-block}.header-note i,.stage-top i,.state-name i{width:6px;height:6px;background:#6d9d83;border-radius:50%;margin-right:7px}main{max-width:1600px;margin:auto;padding:40px 4% 28px;display:grid;grid-template-columns:minmax(0,1fr) 294px;gap:38px}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.eyebrow{font-size:9px;font-weight:650;letter-spacing:2px;color:#89909c;margin:0 0 12px}h1{font-size:29px;letter-spacing:-1px;font-weight:600;margin:0 0 10px}.subtitle{font-size:12px;color:#8a909a;margin:0}.ratio{font-size:10px;color:#989eaa;white-space:nowrap}.ratio b{display:block;color:#535c69;font-size:15px;margin-top:8px;font-weight:500}.stage{height:490px;background:radial-gradient(ellipse at 50% 40%,#fff 0%,#eef0f5 85%);border:1px solid #e4e7ed;border-radius:16px;position:relative;overflow:hidden;touch-action:pan-y;cursor:grab}.stage:active{cursor:grabbing}.stage-top,.stage-bottom{position:absolute;left:22px;right:22px;display:flex;justify-content:space-between;align-items:center;color:#9198a3;font-size:10px;z-index:5}.stage-top{top:20px}.stage-top button{background:#ffffffa0;border:1px solid #e0e4eb;border-radius:6px;color:#737b88;padding:7px 10px}.stage-bottom{bottom:20px}.stage-bottom #stageAngle{font-family:monospace}.scene{position:absolute;left:50%;top:49%;width:560px;height:400px;perspective:1800px;transform:translate(-50%,-50%) scale(.86);transform-style:preserve-3d}.device{width:100%;height:100%;transform-style:preserve-3d;position:relative}.stationary,.fold{position:absolute;top:0;width:50%;height:100%}.stationary{left:50%;border-radius:0 18px 18px 0;overflow:hidden;box-shadow:15px 25px 35px #2e304323}.fold{left:0;transform-origin:100% 50%;transform-style:preserve-3d;z-index:2}.face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;background:#000;box-shadow:inset 0 0 0 1px #ffffff28}.front{border-radius:18px 0 0 18px}.back{transform:rotateY(180deg);border-radius:0 18px 18px 0}.texture{position:absolute;inset:0;background-size:200% 100%;background-repeat:no-repeat}.original{background-position:left center}.btexture{background-position:right center}.global{background-size:100% 100%;background-position:center center;opacity:1}.shade{position:absolute;inset:0;background:#000;opacity:0}.hinge{position:absolute;left:50%;height:100%;width:1px;background:#0003;transform:translateZ(1px);pointer-events:none}.panel-labels{position:absolute;bottom:61px;left:25%;right:25%;display:flex;justify-content:space-between;color:#687283;font-size:11px}.panel-labels small{font-size:9px;color:#a1a7b0;margin-left:7px}.transport{display:flex;align-items:center;gap:23px;background:white;border:1px solid #e7e9ee;border-radius:12px;margin-top:17px;padding:18px 20px}.play{background:#5268dd;color:white;border:0;border-radius:50%;width:39px;height:39px;flex-shrink:0}.reset{border:0;background:none;color:#9299a5;font-size:23px}.scrubber{flex:1}.scrub-label{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#757d89}.scrub-label strong{font-size:20px;color:#465cc9;font-weight:500;font-variant-numeric:tabular-nums}.scrub-label strong span{font-size:12px}input[type=range]{width:100%;height:4px;accent-color:#556cdf;cursor:ew-resize;margin:13px 0}.ticks{display:flex;justify-content:space-between}.ticks button{padding:0;background:none;border:0;font-size:9px;color:#939aa5}.phase-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}.phase{padding:15px 12px;text-align:left;border:1px solid #e6e8ee;background:transparent;border-radius:9px;color:#818997}.phase span{font-size:8px;letter-spacing:1px}.phase b{display:block;font-size:11px;font-weight:500;margin:9px 0}.phase small{font-size:9px;color:#99a0ab}.phase.active{border-color:#aeb9ef;background:#eef1ff;color:#4b62cf}aside{background:#fff;border:1px solid #e5e8ee;border-radius:13px;padding:24px;height:fit-content}.aside-title{display:flex;justify-content:space-between;align-items:center}.aside-title h2{font-size:15px;font-weight:600;margin:0}.aside-title>span{color:#a5acb9}.control{padding:25px 0 20px;border-bottom:1px solid #edf0f4}h3{font-size:11px;font-weight:600;margin:0 0 17px}h3>span{font-size:8px;color:#a5acb8;letter-spacing:1px;float:right;font-weight:400}.presets{display:flex;gap:9px}.swatch{height:65px;flex:1;border:3px solid white;border-radius:8px;background:linear-gradient(155deg,#8394a6,#e8b699 49%,#ae684b 51%,#dbb08c);position:relative;box-shadow:0 0 0 1px #e5e7ed}.swatch[data-preset=ocean]{background:linear-gradient(150deg,#b4dbdb,#578b93 55%,#214b65)}.swatch[data-preset=aurora]{background:linear-gradient(140deg,#443660,#bc9dbc 55%,#6f71a1)}.swatch.active{box-shadow:0 0 0 2px #697fdf}.swatch span{position:absolute;bottom:5px;left:0;right:0;color:white;font-size:9px}.upload{cursor:pointer;margin-top:17px;border:1px dashed #d6dce6;display:flex;flex-direction:column;align-items:center;border-radius:8px;padding:16px 6px;background:#fafbfc}.upload:hover,.upload.dragover{background:#eef1ff;border-color:#7285df}.upload input{position:absolute;width:1px;height:1px;opacity:0}.upload-icon{font-size:23px;color:#8e99ad;margin-bottom:5px}.upload b{font-size:11px;font-weight:500}.upload small{font-size:8px;color:#9ca4b2;margin-top:7px}.file-status{font-size:9px;color:#9aa2ae;text-align:center;overflow-wrap:anywhere}.row{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-top:19px;color:#6c7481}input[role=switch]{appearance:none;width:29px;height:17px;border-radius:20px;background:#d9dde6;position:relative;cursor:pointer;margin:0}input[role=switch]:checked{background:#5f75db}input[role=switch]:before{content:'';position:absolute;top:2px;left:2px;background:white;width:13px;height:13px;border-radius:50%;box-shadow:0 1px 3px #0002}input[role=switch]:checked:before{left:14px}.segmented{display:flex;background:#f1f3f7;padding:3px;border-radius:6px}.segmented button{border:0;background:none;color:#939ba8;font-size:10px;padding:5px 8px;border-radius:4px}.segmented button.active{background:white;color:#5067d0;box-shadow:0 1px 3px #0001}.state-name{font-size:11px;color:#536bcd}.state-name i{background:#7187df}.state-name b{font-weight:500}#stateDesc{font-size:10px;line-height:1.8;color:#9aa1ad;min-height:36px;margin:10px 0 18px}.weight{display:flex;align-items:center;gap:9px;font-size:9px;color:#9099a7;margin:13px 0}.weight>span{width:70px}.weight>div{height:3px;flex:1;background:#eef0f5;border-radius:2px}.weight i{height:3px;display:block;background:#7588df;border-radius:2px}.weight b{width:30px;text-align:right;font-weight:400;font-variant-numeric:tabular-nums}.note{display:flex;gap:10px;color:#a1a9b5;padding-top:18px}.note>span{font-size:20px}.note p{font-size:9px;line-height:1.9;margin:0}footer{display:flex;justify-content:space-between;margin:0 4%;padding:20px 0;border-top:1px solid #e6e9ef;color:#a0a8b4;font-size:9px;letter-spacing:.5px}footer b{margin:0 12px;color:#c5cad2}@media(min-width:1500px){.stage{height:570px}.scene{transform:translate(-50%,-50%) scale(1.02)}}@media(max-width:1050px){main{gap:22px;grid-template-columns:minmax(0,1fr) 270px}.ratio{display:none}.scene{transform:translate(-50%,-50%) scale(.65)}.stage{height:420px}.phase{padding:12px 8px}.phase span{font-size:7px}.phase b{font-size:10px}}@media(max-width:760px){header{height:66px}.tag{display:none}main{grid-template-columns:1fr;padding-top:28px}.intro h1{font-size:25px}.subtitle{font-size:10px}.stage{height:370px}.scene{transform:translate(-50%,-50%) scale(.58)}.phase-cards{gap:6px}.phase b{font-size:9px}aside{padding:22px}.presets .swatch{height:80px}footer{font-size:8px}footer>span:last-child{display:none}}@media(max-width:380px){.scene{transform:translate(-50%,-50%) scale(.49)}}

/* Material layers live inside each face so the light follows the folding plane. */
.front-content,.surface-shade,.reflection{position:absolute;inset:0;pointer-events:none}
.front-content{overflow:hidden}
.surface-shade,.reflection{will-change:opacity}
.back{transform:rotateY(180deg) translateZ(.15px)}
#castShadow{position:absolute;left:0;top:-5%;height:110%;background:linear-gradient(90deg,#080b16cc,#080b1688 75%,transparent);pointer-events:none;transform-origin:left center}
#hingeShade{position:absolute;inset:0 auto 0 0;width:18%;background:linear-gradient(90deg,#0a0c18b3,transparent);pointer-events:none}
@media(prefers-reduced-motion:reduce){button:active{transform:none}}