.qr-editorial{grid-column:1/-1;box-sizing:border-box;width:100%;max-width:1120px;margin:48px auto;background:#000;color:#e9e9e9;font-family:Arial,'Malgun Gothic',sans-serif}.qr-editorial *{box-sizing:border-box}.qr-clean-head{display:flex;justify-content:space-between;padding:28px 36px;font-size:9px;letter-spacing:.13em;background:#202225;color:#c5c5c5}.qr-clean-hero{min-height:620px;position:relative;overflow:hidden;background:linear-gradient(#202225 50%,#101112 85%,#000);padding:55px 8% 75px;display:grid;grid-template-columns:1fr 1.2fr;align-items:center}.qr-clean-title{position:relative;z-index:2}.qr-clean-title h2{font-size:clamp(36px,5vw,62px);line-height:1.05;letter-spacing:-.05em;font-weight:400;margin:0 0 24px}.qr-clean-title p{font-size:11px;color:#9b9b9b;line-height:1.8}.qr-clean-cards{height:420px;position:relative;perspective:1200px}.qr-clean-cards img{position:absolute;width:44%;height:auto;border-radius:7%;box-shadow:12px 28px 35px #0009}.qr-front{left:7%;top:8%;transform:rotate(-8deg) rotateY(12deg)}.qr-back{left:43%;top:23%;transform:rotate(8deg) rotateY(-10deg)}.qr-auto-stage{padding:60px 36px 36px}.qr-auto-label{display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:.12em;color:#757575;margin-bottom:25px}.qr-auto-label button{background:none;border:0;color:#999;padding:10px;cursor:pointer}.qr-auto-label button:focus-visible{outline:1px solid #ddd}.qr-clean-screens{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;max-width:810px;margin:auto}.qr-clean-still{margin:0;background:#111;border-radius:12px;padding:65px 25px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center}.qr-clean-still>img{width:80%;max-width:270px;border-radius:7%;height:auto;box-shadow:0 15px 30px #0006}.qr-clean-still figcaption,.qr-clean-live>p{font-size:8px;letter-spacing:.08em;color:#777;text-align:center;margin:25px 0 0}.qr-clean-live{background:#080808;border-radius:12px;padding:10px 0 20px;overflow:hidden}.qr-live-screen{width:100%;height:700px;overflow:hidden;background:#050505}.qr-live-screen iframe{display:block;width:100%;height:100%;border:0;filter:grayscale(1)}.qr-demo-caption{display:flex;justify-content:space-between;font-size:10px;line-height:1.8;color:#777;margin:28px auto 0;max-width:810px}.qr-demo-caption span{font-size:8px}@media(max-width:650px){.qr-editorial{margin:24px auto}.qr-clean-head{padding:22px;font-size:8px}.qr-clean-hero{min-height:640px;padding:35px 25px 40px;grid-template-columns:1fr}.qr-clean-title h2{font-size:42px}.qr-clean-title p{font-size:10px}.qr-clean-cards{height:360px;max-width:400px;width:100%;margin:auto}.qr-clean-cards img{width:40%}.qr-front{left:10%;top:6%}.qr-back{left:46%;top:17%}.qr-auto-stage{padding:25px 18px}.qr-clean-screens{grid-template-columns:1fr;gap:18px}.qr-clean-still{padding:35px 25px 22px}.qr-clean-still>img{max-width:180px}.qr-live-screen{height:700px}.qr-demo-caption{font-size:9px;gap:10px}}

/* Black image artwork with live demo below. */
.qr-editorial{background:#000;margin-top:0}.qr-black-artwork{display:block;width:100%;height:auto;margin:0}.qr-auto-stage{background:#000}.qr-clean-still{display:none}.qr-clean-screens{display:block;max-width:390px}.qr-clean-live{background:#000}.qr-auto-label,.qr-demo-caption{max-width:390px;margin-left:auto;margin-right:auto}
.qr-composite{position:relative;isolation:isolate;overflow:hidden;background:#000}.qr-composite .qr-phone-screen{position:absolute;left:0;top:0;width:390px;height:844px;transform-origin:0 0;border-radius:48px;overflow:hidden;background:#050505;z-index:2;will-change:transform}.qr-phone-screen iframe{display:block;width:390px;height:844px;border:0;filter:grayscale(1);background:#050505;pointer-events:none}.qr-phone-notch{position:absolute;top:12px;left:125px;width:140px;height:30px;background:#000;border-radius:24px;pointer-events:none}.qr-composite #qrMotionToggle{position:absolute;right:7%;top:50%;z-index:3;background:#090909bb;border:1px solid #555;color:#ccc;border-radius:50%;width:32px;height:32px;font-size:12px;cursor:pointer}.qr-composite #qrMotionToggle:focus-visible{outline:2px solid white;outline-offset:4px}
/* Keep the fixed source viewport independent of desktop grid sizing. */
#qrScanArchive.qr-composite{display:block;padding:0;border:0;min-width:0;line-height:0}
#qrScanArchive>.qr-black-artwork{display:block;width:100%;max-width:none;height:auto;padding:0;border:0;margin:0;transform:none}
#qrScanArchive>#qrLiveDemo{box-sizing:border-box;width:390px;min-width:390px;max-width:none;height:844px;min-height:844px;max-height:none;margin:0;padding:0;border:0;line-height:normal}
#qrLiveDemo>#qrServiceFrame{width:390px;min-width:390px;max-width:none;height:844px;min-height:844px;max-height:none;margin:0;padding:0;border:0}
/* The foreground card occludes the lower-left corner of the upper phone. */
#qrLiveDemo{clip-path:polygon(0 0,100% 0,100% 100%,14% 100%,11% 78%,7% 58%,0 36%)}
#qrScanArchive>.qr-secondary{position:absolute;left:0;top:0;box-sizing:border-box;width:390px;min-width:390px;max-width:none;height:844px;margin:0;padding:0;transform-origin:0 0;border-radius:48px;overflow:hidden;z-index:2;background:#050505}
.qr-secondary>iframe{width:390px;height:844px;max-width:none;border:0;display:block;filter:grayscale(1);pointer-events:none}
/* Lower photographed displays are wider than the tall hero screen. */
#qrScanArchive>.qr-secondary{height:700px;min-height:700px;max-height:700px;border-radius:44px 44px 0 0}
#qrScanArchive>.qr-secondary>iframe{width:390px;height:700px;min-height:700px;max-height:700px}
/* Individual screen geometry: perspective and source aspect ratio per device. */
#qrScanArchive>.qr-secondary{min-height:0;max-height:none;border-radius:48px 48px 0 0}
#qrScanArchive>.qr-secondary>iframe{min-height:0;max-height:none}
#qrLowerArchive .qr-phone-notch{top:10px;left:128px;width:132px;height:27px}
#qrLowerRecord .qr-phone-notch{top:10px;left:128px;width:132px;height:27px}

/* Alternate editorial composition: physical card and a straight-on live display. */
.qr-variation{grid-column:1/-1;width:100%;max-width:1120px;box-sizing:border-box;margin:80px auto 0;padding:64px 7% 48px;background:#050505;color:#eee;overflow:hidden}
.qr-variation *{box-sizing:border-box}
.qr-variation-heading{display:flex;justify-content:space-between;gap:20px;font:9px/1.5 Arial,sans-serif;letter-spacing:.16em;color:#888}
.qr-variation h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(38px,5vw,72px);font-weight:400;line-height:1.05;letter-spacing:-.045em;margin:58px 0 40px}
.qr-variation h2 em{font-weight:400;color:#999}
.qr-variation-stage{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:9%;padding:10px 0 60px}
.qr-variation-cards{position:relative;aspect-ratio:1/1.3;width:100%;margin:0;isolation:isolate}
.qr-variation-cards img{position:absolute;width:57%;height:auto;aspect-ratio:638/1110;object-fit:cover;border-radius:7%;box-shadow:0 22px 45px #000;outline:1px solid #353535}
.qr-variation-front{left:7%;top:5%;transform:rotate(-12deg)}
.qr-variation-back{right:3%;top:17%;transform:rotate(9deg)}
.qr-variation-cards figcaption{position:absolute;bottom:0;left:8%;font:8px/1.5 Arial,sans-serif;letter-spacing:.15em;color:#666}
.qr-variation-device{width:100%;max-width:290px;justify-self:center;padding:8px;border-radius:38px;background:#141414;border:1px solid #484848;box-shadow:0 32px 60px #000}
.qr-variation-display{position:relative;width:100%;aspect-ratio:390/844;overflow:hidden;border-radius:30px;background:#050505}
.qr-variation-frame{position:absolute;top:0;left:0;display:block;width:390px!important;min-width:390px;max-width:none!important;height:844px!important;border:0;transform-origin:0 0;filter:grayscale(1);pointer-events:none}
.qr-variation-footer{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;font:9px/1.8 Arial,'Malgun Gothic',sans-serif;letter-spacing:.08em;color:#888}
.qr-variation-footer p{margin:0;letter-spacing:0;font-size:11px;line-height:1.9}
@media(max-width:650px){.qr-variation{margin-top:36px;padding:36px 24px}.qr-variation-heading{font-size:7px}.qr-variation h2{margin:38px 0;font-size:40px}.qr-variation-stage{gap:5%;padding-bottom:0}.qr-variation-cards{width:80%;max-width:300px;justify-self:center}.qr-variation-device{width:78%;max-width:270px}.qr-variation-footer{flex-wrap:wrap;gap:18px}.qr-variation-footer p{order:3;width:100%}}

/* Edition 02: an uncaptioned photographic composition. */
.qr-variation{background:#000;padding:84px 7%;margin-top:32px}
.qr-variation-stage{grid-template-columns:1.15fr 1fr;gap:5%;padding:0;min-height:660px;align-items:center}
.qr-variation-cards{aspect-ratio:1/1.4;transform:translateY(28px)}
.qr-variation-cards img{width:64%;outline:1px solid #222;box-shadow:0 28px 48px #000}
.qr-variation-front{left:0;top:0;transform:rotate(-14deg)}
.qr-variation-back{right:-1%;top:21%;transform:rotate(7deg)}
.qr-variation-device{max-width:310px;border-color:#292929;padding:6px;background:#111;box-shadow:0 30px 50px #000}
@media(max-width:650px){.qr-variation{padding:48px 24px 60px;margin-top:16px}.qr-variation-stage{min-height:0;gap:5%}.qr-variation-cards{width:86%;max-width:330px;transform:none;aspect-ratio:1/1.35}.qr-variation-device{width:76%;max-width:280px}}

/* Edition 02 keeps its two-column composition on narrow screens. */
@media(max-width:650px){
 .qr-variation{padding:32px 16px 40px}
 .qr-variation-stage{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:5%;min-height:0;align-items:center}
 .qr-variation-cards{width:100%;max-width:none;aspect-ratio:1/1.4;transform:translateY(12px)}
 .qr-variation-device{width:100%;max-width:310px;min-width:0;padding:3px;border-radius:20px}
 .qr-variation-display{border-radius:16px}
}


/* Explicit columns prevent implicit mobile rows in embedded detail layouts. */
.qr-variation .qr-variation-stage{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.qr-variation .qr-variation-cards{grid-column:1;grid-row:1;min-width:0}
.qr-variation .qr-variation-device{grid-column:2;grid-row:1;min-width:0}