:root{--ink:#17344e;--blue:#abd0e7;--red:#a31b26;--acid:#dfec60;--n:0}*{box-sizing:border-box}body{margin:0;background:var(--blue);color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,a{touch-action:manipulation}button{font:700 14px Arial;cursor:pointer;color:inherit}a{color:inherit}button:focus-visible,a:focus-visible{outline:4px solid #ef6b21;outline-offset:4px}button:disabled,[aria-disabled=true]{opacity:.5;cursor:not-allowed}header{min-height:68px;padding:18px 3%;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid;gap:15px}header b{font-size:22px;letter-spacing:-1px}header b span{font-size:12px;letter-spacing:2px;display:block;margin-top:3px}nav{display:flex;gap:22px;font-size:14px;font-weight:900}nav a{text-decoration:none;padding:10px 0}nav a:first-child{background:var(--ink);color:var(--acid);padding:10px 16px}#studio{height:850px;position:relative;isolation:isolate;overflow:hidden;background:#8dbad6}#studio:after{content:'';position:absolute;inset:0;background:url('assets/grain-v1.png?v=1');pointer-events:none;z-index:30;mix-blend-mode:multiply}.backdrop{position:absolute;inset:0 12% 0 23%;background:radial-gradient(ellipse at 55% 38%,#c7e0f0,#72a3c6 80%);border:2px solid #517d9e;transform:rotate(-2deg);transition:transform .6s}.headline{position:absolute;top:43px;left:3%;z-index:4;pointer-events:none}.headline p{font-weight:800;font-size:14px;letter-spacing:2px;margin:0 0 15px}h1{font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(76px,9.4vw,150px);line-height:.85;letter-spacing:-3px;margin:0;font-weight:900}h1 em{font-style:normal;color:var(--red)}.headline .sub{font:700 22px/1.15 Arial;letter-spacing:-.5px;max-width:320px;margin-top:25px;transform:rotate(-4deg);background:var(--acid);padding:13px 17px;box-shadow:5px 5px 0 var(--ink)}.hero-rig{position:absolute;width:650px;left:38%;bottom:0;z-index:6;transform-origin:50% 90%;transition:transform .3s}.hero-rig img{width:100%;display:block}.hero{position:relative;z-index:2}.shadow{position:absolute;inset:0;transform:translate(17px,6px);opacity:.85}.dog-says{position:absolute;left:74%;top:44%;z-index:3;background:var(--acid);font:900 15px Arial;padding:9px;transform:rotate(9deg);white-space:nowrap;opacity:0}.match-line{position:absolute;z-index:3;left:52%;top:70%;width:17%;height:4%;border-top:3px dashed var(--acid);transform:rotate(22deg);opacity:0}.focus-box{position:absolute;left:39%;top:7%;width:20%;height:23%;border:2px solid #f2ffce;opacity:0;z-index:3}.halo{position:absolute;top:0;left:22%;background:var(--acid);padding:12px;font-size:16px;font-weight:900;transform:rotate(-6deg);z-index:3;opacity:0}.family-tag{position:absolute;right:2%;top:35px;width:192px;z-index:8;background:#eee9e1;padding:18px 15px;transform:rotate(6deg);box-shadow:5px 6px #17344e55}.family-tag:before,.proof:before{content:'';position:absolute;top:-10px;left:30%;height:24px;width:90px;background:#f6eeaaa8;transform:rotate(-8deg)}.family-tag span{font:700 12px/1.5 monospace}.family-tag strong{display:block;font:900 30px/.99 Arial;margin:17px 0}.proof{position:absolute;left:4%;top:398px;width:138px;padding:8px 8px 20px;background:#e8e7dd;transform:rotate(-10deg);z-index:5}.proof img{width:100%}.proof b{font-size:12px;display:block;margin-top:6px}.softbox{position:absolute;left:43%;top:28px;width:175px;height:145px;background:#e9edf0;border:12px solid var(--ink);clip-path:polygon(15% 0,85% 0,100% 30%,100% 70%,85% 100%,15% 100%,0 70%,0 30%);transform:rotate(15deg);font:900 20px/1.1 Arial;padding:35px 12px;opacity:.65}.rail{position:absolute;left:22%;top:0;width:63%;height:14px;background:var(--ink);transform-origin:0 0;transition:transform .5s}.seam{position:absolute;left:30%;top:0;width:3px;height:100%;background:repeating-linear-gradient(black 0 8px,transparent 8px 16px);opacity:.25}.registration{position:absolute;inset:20px;font:50px monospace;opacity:.3}.registration span{position:absolute;right:0;bottom:40px}.third{position:absolute;left:24%;top:390px;border:2px dashed var(--ink);width:160px;height:190px;transform:rotate(6deg);text-align:center}.third span{font:80px Impact;opacity:.3}.third b{display:block;background:var(--red);color:white;padding:8px;transform:rotate(-14deg);opacity:0}.print-tray{position:absolute;left:3%;bottom:46px;width:340px;height:180px;z-index:9;border-top:7px solid var(--ink);padding-top:12px}.print-tray>span{font:700 12px monospace}.print{position:absolute;width:124px;background:#f0eee5;padding:6px 6px 17px;box-shadow:2px 4px 8px #0006;transform:translate(var(--x),var(--y)) rotate(var(--r));animation:print-in .45s}.print img{width:100%;display:block}.print b{font:700 11px monospace}.receipt{position:absolute;right:2%;top:360px;z-index:9;background:#f0eee5;width:175px;padding:16px;transform:rotate(4deg);clip-path:polygon(0 0,100% 0,100% 96%,92% 100%,84% 96%,76% 100%,68% 96%,60% 100%,52% 96%,44% 100%,36% 96%,28% 100%,20% 96%,12% 100%,0 96%)}.receipt>span{font:700 12px monospace}.receipt strong{display:block;font-size:42px;margin:6px 0}.line{font:12px/1.7 monospace;border-top:1px dashed}.stamp{display:block;opacity:0;border:3px solid var(--red);color:var(--red);font-size:18px;transform:rotate(-12deg);margin:9px -8px}.camera{position:absolute;z-index:15;left:30%;bottom:27px;width:345px;background:var(--ink);color:#f1eee2;padding:13px 15px;transform:rotate(-3deg);box-shadow:9px 9px 0 #0b2234}.camera-top{font:12px monospace;display:flex;justify-content:space-between;margin-bottom:12px}#shoot{background:var(--acid);border:0;width:100%;display:flex;align-items:center;text-align:left;gap:14px;padding:12px;color:var(--ink);font:900 29px/.96 Arial;box-shadow:0 5px 0 #859328}#shoot small{display:block;font:700 10px Arial;margin-top:9px}.lens{font:65px/1 Arial;transition:transform .2s}.camera p{font:10px monospace;margin:14px 0 0}.floor{position:absolute;inset:85% 0 0;background:repeating-linear-gradient(90deg,#527998 0 1px,transparent 1px 170px),#759db8;transform:skewY(-2deg)}.normal-strip{position:absolute;z-index:10;left:-5%;top:52%;width:110%;font:900 40px Impact;background:var(--acid);padding:12px;transform:rotate(-12deg) translateX(-120%);white-space:nowrap;transition:transform .5s}.dog-pass{position:absolute;right:18%;top:18%;width:140px;z-index:5;display:flex;background:#eee9e1;border:5px solid #eee9e1;transform:rotate(13deg) translateY(-400px);transition:transform .6s}.dog-pass img{width:58px;object-fit:cover}.dog-pass span{font:700 11px/1.6 monospace;padding:5px}.curtain{position:absolute;top:0;bottom:0;width:9%;background:repeating-linear-gradient(90deg,#791d30,#ad2638 15px,#641f34 30px);z-index:1;transition:transform .6s}.curtain.left{left:0;transform:translateX(-100%)}.curtain.right{right:0;transform:translateX(100%)}.scrap{position:absolute;z-index:11;background:#eee9e1;padding:6px 13px;font:900 20px Arial;transform:rotate(var(--r));border:2px solid var(--ink)}.lint{position:absolute;left:55%;top:61%;z-index:3}.fiber{position:absolute;width:4px;height:15px;background:var(--acid);animation:fiber .65s forwards;transform:rotate(var(--r))}.flash{position:absolute;inset:0;z-index:20;background:#fff;opacity:0;pointer-events:none}.finale{position:absolute;z-index:18;bottom:25px;left:3%;right:3%;background:var(--acid);padding:22px 26px;transform:rotate(-2deg);box-shadow:9px 9px var(--ink);border:3px solid}.finale[hidden]{display:none}.finale>span{font:700 13px monospace}.finale h2{font:900 clamp(30px,5vw,66px)/.94 Impact;margin:12px 0}.finale button{padding:13px;background:var(--ink);color:white;border:0}.utility{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 3%;border-block:2px solid}.utility p{font-size:14px;font-weight:bold}.utility div{display:flex;gap:8px}.utility button,footer button{padding:10px;background:transparent;border:1px solid}footer{padding:20px 3%;background:var(--ink);color:#eee9e1;font-size:13px}footer p{font-size:16px;font-weight:700}.contract{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:15px 0 22px}code{overflow-wrap:anywhere;max-width:100%;font-size:14px;user-select:all}dialog{max-width:90vw;max-height:95vh;padding:10px;background:var(--blue);border:3px solid var(--ink)}dialog img{display:block;max-width:80vw;max-height:80vh}dialog button{margin-bottom:10px;padding:10px}dialog::backdrop{background:#10293de6}
body[data-phase=armed] .lens{transform:rotate(90deg) scale(.8)}body[data-phase=armed] .camera{transform:rotate(-3deg) translateY(5px)}body[data-phase=armed] .focus-box{opacity:1}body[data-phase=impact] .flash{animation:flash .35s}body[data-phase=impact] .hero-rig{transform:scale(1.025)}body[data-phase=impact] .softbox{background:var(--acid);transform:rotate(-5deg)}body[data-phase=impact] h1{text-shadow:5px 2px #eee9e1,-4px -2px #dfec60}body[data-phase=impact] .receipt{transform:rotate(-4deg) translateY(5px)}body[data-phase=impact] .stamp{opacity:1}body[data-phase=impact] .match-line{opacity:1}body[data-phase=impact] .shadow{transform:translate(28px,3px)}body[data-level]:not([data-level="0"]) .dog-says{opacity:1}body[data-level]:not([data-level="0"]) .third b{opacity:1}body[data-level="2"] .third,body[data-level="3"] .third,body[data-level="4"] .third,body[data-level="5"] .third,body[data-level="6"] .third,body[data-level="7"] .third,body[data-level="8"] .third{transform:rotate(-22deg) translateX(-30px)}body[data-level="3"] .proof,body[data-level="4"] .proof,body[data-level="5"] .proof,body[data-level="6"] .proof,body[data-level="7"] .proof,body[data-level="8"] .proof{transform:rotate(22deg) translateY(25px)}body[data-level="4"] .dog-pass,body[data-level="5"] .dog-pass,body[data-level="6"] .dog-pass,body[data-level="7"] .dog-pass,body[data-level="8"] .dog-pass{transform:rotate(13deg)}body[data-level="5"] .normal-strip,body[data-level="6"] .normal-strip,body[data-level="7"] .normal-strip,body[data-level="8"] .normal-strip{transform:rotate(-12deg) translateX(0)}body[data-level="6"] .halo,body[data-level="7"] .halo,body[data-level="8"] .halo{opacity:1}body[data-level="6"] .rail,body[data-level="7"] .rail,body[data-level="8"] .rail{transform:rotate(12deg)}body[data-level="7"] .curtain,body[data-level="8"] .curtain{transform:translateX(0)}body[data-level="8"] .backdrop{transform:rotate(8deg) translateY(80px)}body[data-level="8"] .family-tag{transform:rotate(18deg) translateY(50px)}body[data-level="8"] h1{color:var(--acid)}@keyframes flash{0%{opacity:.5}100%{opacity:0}}@keyframes print-in{from{opacity:0;translate:0 -80px}to{opacity:1;translate:0 0}}@keyframes fiber{to{translate:var(--dx) -90px;opacity:0}}.low *{animation:none!important;transition:none!important}.low .flash{display:none}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.flash{display:none}}
@media(min-width:1600px){.hero-rig{left:41%;width:720px}#studio{height:900px}}@media(max-width:1100px){.hero-rig{left:27%;width:610px}.headline{top:40px}.headline h1{font-size:100px}.family-tag{width:150px}.family-tag strong{font-size:25px}.camera{left:22%}.receipt{right:1%;top:480px}.softbox{left:48%}}@media(max-width:700px){header{padding:12px 16px;display:block}header b{font-size:22px}header b span{display:inline;margin-left:12px;font-size:10px;letter-spacing:1px}nav{justify-content:space-between;gap:10px;margin-top:12px}#studio{height:1110px}.headline{left:5%;top:28px}.headline p{font-size:10px;letter-spacing:1px}h1,.headline h1{font-size:22vw;line-height:.88;letter-spacing:-2px}.headline .sub{font-size:16px;margin-top:15px;max-width:250px;padding:9px 12px}.hero-rig{left:50%;margin-left:-230px;bottom:315px;width:460px}.family-tag{top:295px;right:3%;width:111px;padding:9px;transform:rotate(7deg);z-index:5}.family-tag strong{font-size:19px;margin:8px 0}.family-tag span{font-size:9px}.family-tag:before{width:50px}.proof{left:4%;top:420px;width:88px;padding:5px 5px 10px;z-index:5}.proof b{font-size:9px}.third{left:4%;top:630px;width:86px;height:105px}.third span{font-size:45px}.third b{font-size:10px;padding:4px}.softbox{left:auto;right:5%;top:180px;width:85px;height:75px;border-width:7px;padding:16px 6px;font-size:12px}.dog-says{left:65%;font-size:11px;padding:6px}.halo{font-size:11px;left:30%;top:2%}.camera{bottom:105px;left:8%;width:84%;max-width:370px}.receipt{right:4%;top:790px;width:125px;padding:10px}.receipt strong{font-size:32px}.receipt>span{font-size:9px}.line{font-size:9px}.stamp{font-size:12px}.print-tray{left:5%;bottom:282px;width:190px;height:90px}.print-tray>span{font-size:9px}.print{width:80px}.print b{font-size:8px}.normal-strip{top:62%;font-size:24px;padding:10px}.dog-pass{right:2%;top:56%;width:105px}.dog-pass img{width:43px}.dog-pass span{font-size:8px}.floor{top:67%}.scrap{font-size:12px;padding:5px}.finale{bottom:75px;padding:18px 13px}.finale h2{font-size:9vw}.utility{display:block;padding:12px 5%}.utility div{flex-wrap:wrap}.utility button{font-size:12px}footer{padding:20px 5%}.contract{gap:10px}footer a{font-size:12px}.backdrop{inset:17% 8% 22% 12%}.curtain{width:7%}.rail{top:22%;left:10%;width:80%}.seam{left:10%}.flash{opacity:0}}
/* QA refinements: preserve both faces at climax and hide the unissued pass. */
.dog-pass{visibility:hidden}body[data-level="4"] .dog-pass,body[data-level="5"] .dog-pass,body[data-level="6"] .dog-pass,body[data-level="7"] .dog-pass,body[data-level="8"] .dog-pass{visibility:visible}.finale{right:auto;width:57%}.quick{display:none}
@media(max-width:700px){.camera{bottom:30px}.receipt{top:785px}.receipt .line:nth-child(-n+5){display:none}.finale{width:auto;right:3%;bottom:28px}.quick{display:inline-block;pointer-events:auto;font-size:13px;font-weight:900;margin-top:8px;padding:8px 12px;background:var(--ink);color:var(--acid);text-decoration:none}.dog-pass{top:56%;right:-2%}.dog-pass span{background:#eee9e1}.print-tray{z-index:7}.hero-rig{z-index:6}}
.normal-strip{visibility:hidden}body[data-level="5"] .normal-strip,body[data-level="6"] .normal-strip,body[data-level="7"] .normal-strip,body[data-level="8"] .normal-strip{visibility:visible}