@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;600;800&family=Zen+Kurenaido&family=Courier+Prime:wght@400;700&display=swap');
/* Archive paper, photographic prints and a dark room. Everything is CSS over the existing photographs. */
:root{
  --desk:#0d0c0a;--ink:#221d16;--ink-soft:#463c2f;--paper:#d9cfb5;--paper-edge:#a8996f;--blood:#8f1610;--red-ink:#a51b12;
  --serif:'Shippori Mincho','Noto Serif JP','Hiragino Mincho ProN','Yu Mincho',serif;--hand:'Zen Kurenaido','Shippori Mincho',serif;--type:'Courier Prime','Courier New',monospace;
  --noise:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibre:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='4' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .55 -.12'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23f)'/%3E%3C/svg%3E");
  --blot:url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .38 0 0 0 0 .24 0 0 0 0 .1 0 0 0 2.4 -1.35'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23b)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{background:var(--desk)}
body{margin:0;min-height:100svh;background:radial-gradient(ellipse 80% 60% at 50% 35%,#24201a 0%,#12100d 55%,#070605 100%) fixed,var(--desk);color:#cfc5ad;font-family:var(--serif);overflow-x:hidden}
/* film grain and vignette over the whole experience */
body:before{content:'';position:fixed;inset:-50%;background:var(--noise);opacity:.07;pointer-events:none;z-index:60;animation:grain .9s steps(5) infinite}
body:after{content:'';position:fixed;inset:0;pointer-events:none;z-index:59;background:radial-gradient(ellipse 75% 70% at 50% 45%,transparent 55%,#000a 100%)}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
body.lv2{background:radial-gradient(ellipse 80% 60% at 50% 35%,#2a1714 0%,#130c0a 55%,#050303 100%) fixed,#090605}
body.lv2:after,body.lv3:after{background:radial-gradient(ellipse 70% 62% at 50% 45%,transparent 45%,#1a0302cc 100%)}
body.lv3{background:#050404}
body.lv2:before,body.lv3:before{opacity:.11}
button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #c9a86a;outline-offset:4px}
header{height:72px;margin:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff14;position:relative;z-index:10}
.brand{font-family:var(--type);font-size:14px;letter-spacing:4px;font-weight:700;text-decoration:none;color:#d8ccb0;display:flex;align-items:center;gap:20px}
.brand span{font-family:var(--serif);font-size:10px;letter-spacing:3px;font-weight:400;color:#8c816a}
.header-actions{display:flex;align-items:center;gap:14px}
#language{max-width:156px;background:#15130f;color:#b8ad94;border:1px solid #ffffff22;border-radius:0;padding:7px;font:inherit;font-size:11px}#language option{background:#15130f;color:#d8ccb0}
.exit,footer button{background:none;border:0;color:#8c816a;font-size:11px;letter-spacing:1px;padding:12px}
main{max-width:1120px;margin:0 auto;padding:40px 28px 70px;min-height:calc(100svh - 140px);position:relative;z-index:2}
main:focus{outline:none}
footer{margin:0 5%;border-top:1px solid #ffffff14;height:68px;display:flex;align-items:center;justify-content:space-between;color:#6f6654;font-size:10px;letter-spacing:2px;position:relative;z-index:2}
footer a{color:#8c816a;font-size:11px;text-decoration:none}footer a:hover{text-decoration:underline}
p{font-size:14px;line-height:2.1}
h1{font-family:var(--serif);font-weight:800;line-height:1.55;letter-spacing:2px;margin:0 0 14px}

/* ---------- the test sheet ---------- */
.desk{position:relative;display:grid;place-items:center}
.sheet{position:relative;z-index:2;width:100%;max-width:780px;color:var(--ink);padding:30px 44px 34px;
  background:var(--blot),var(--fibre),radial-gradient(ellipse at 15% 0%,#efe6cd 0%,transparent 55%),radial-gradient(ellipse at 100% 100%,#b4a27a 0%,transparent 60%),var(--paper);
  background-size:620px,420px,auto,auto,auto;
  box-shadow:inset 0 0 0 1px #00000014,inset 0 0 90px #6b4f2366,inset 0 0 18px #4a35184d,0 30px 60px -20px #000,0 6px 18px #000a;
  transform:rotate(-.35deg)}
.sheet:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 49.6%,#4a35180f 50%,#ffffff12 50.4%,transparent 51%),var(--noise);opacity:.16;mix-blend-mode:multiply}
.sheet>*{position:relative}
.lv1 .sheet{--paper:#d1c3a2;background-size:520px,420px,auto,auto,auto}
.lv2 .sheet{--paper:#c3b08b;--ink:#1c1510;box-shadow:inset 0 0 0 1px #00000018,inset 0 0 120px #4b1c0f99,inset 0 0 24px #3a17104d,0 30px 60px -20px #000,0 6px 18px #000c}
.lv2 .sheet:after{content:'';position:absolute;right:-30px;top:38%;width:190px;height:240px;pointer-events:none;background:radial-gradient(ellipse at 40% 40%,#5b0d0866 0%,#5b0d0833 30%,transparent 62%);filter:blur(1px);mix-blend-mode:multiply;transform:rotate(25deg)}
.lv3 .sheet{--paper:#b19d77;box-shadow:inset 0 0 160px #2b0c06cc,0 30px 60px -20px #000}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--type);font-size:11px;letter-spacing:2px;color:var(--ink-soft);border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:22px;text-transform:uppercase}
.sheet-head .dim{opacity:.55}
.progress{display:inline-block;width:150px;height:6px;border:1px solid var(--ink);vertical-align:middle}.progress i{display:block;height:100%;background:var(--ink);transition:width .7s}
.lv2 .progress i,.lv3 .progress i{background:var(--blood)}
.sheet h1{font-size:clamp(23px,3vw,33px);color:var(--ink)}
.hint{margin:0 0 18px;font-size:13px;color:var(--ink-soft)}
.eyebrow{font-family:var(--type);font-size:11px;letter-spacing:4px;color:#7b2a1c;margin:0 0 18px}
.footnote{font-family:var(--type);font-size:10px;letter-spacing:1px;color:var(--ink-soft);margin:14px 0 0;opacity:.8}

/* ---------- photographic print ---------- */
.print{margin:0;position:relative;background:#ece4cf;padding:12px 12px 14px;box-shadow:0 1px 0 #fff6 inset,0 0 0 1px #00000014,0 14px 28px -8px #000b;transform:rotate(.5deg)}
.print svg,.print>img{display:block;width:100%;height:auto}
#scene{aspect-ratio:auto;touch-action:manipulation}
#scene svg{aspect-ratio:16/10;height:auto;overflow:hidden;background:#1a1712}
#scene:after,.hero-print:after{z-index:2;content:'';position:absolute;inset:12px 12px 14px;pointer-events:none;
  background:linear-gradient(95deg,transparent 30%,#fff1 30.2%,transparent 30.6%),linear-gradient(88deg,transparent 71%,#0002 71.2%,transparent 71.5%),radial-gradient(ellipse at 50% 50%,transparent 55%,#1a0f0599 100%);
  mix-blend-mode:multiply;opacity:.9}
#scene:before{content:'';position:absolute;inset:12px 12px 14px;z-index:2;pointer-events:none;background:var(--noise);opacity:.22;mix-blend-mode:overlay}
.tape{position:absolute;z-index:3;top:-11px;left:50%;width:110px;height:26px;margin-left:-55px;background:#e9dfbfaa;box-shadow:0 1px 3px #0003;transform:rotate(-3deg);clip-path:polygon(2% 0,98% 6%,100% 92%,0 100%,3% 50%)}
.ph{filter:sepia(.45) saturate(.75) contrast(1.12) brightness(.9)}
.lv2 .ph{filter:sepia(.55) saturate(.6) contrast(1.22) brightness(.82) hue-rotate(-8deg)}
.lv3 .ph{filter:sepia(.5) saturate(.55) contrast(1.28) brightness(.78)}
.plate-paper{fill:#d7cdb2}
.plate-label{font-family:'Courier Prime',monospace;font-size:13px;letter-spacing:3px;fill:#5c5242}
.plate-mark{font-family:'Courier Prime',monospace;font-size:24px;font-weight:700;fill:#f3ead3}
.zoom{transform-origin:400px 250px;transition:transform .09s linear}
/* Q2 — an afterimage inside the vase */
.afterimage{opacity:0;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.5) brightness(1.08) blur(.8px)}
.afterimage.on{opacity:.14;transition:opacity 2.6s cubic-bezier(.5,0,.9,.6)}
.afterimage.off{opacity:0;transition:none}
/* Q3 — a cast shadow from someone just outside the frame */
.cast{filter:brightness(0) blur(3px);opacity:.31}
.cast-wrap{transform-origin:640px 500px;animation:sway 7s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(0)}50%{transform:rotate(-.9deg) translateX(-2px)}}
/* Q4 — a face kept in the dark of a doorway */
.lurk{filter:sepia(.5) brightness(.36) contrast(1.3) blur(.3px)}
/* Q5, Q7, Q8 — camera movement */
.dolly{transform-origin:376px 192px;animation:dolly 40s linear forwards}
@keyframes dolly{to{transform:scale(1.16)}}
.creep{transform-origin:356px 92px;animation:creep 18s steps(6,jump-none) forwards}
@keyframes creep{to{transform:scale(1.42)}}
.stare{transform-origin:400px 175px}
.stare.jolt{animation:jolt .18s steps(2)}
@keyframes jolt{50%{filter:brightness(.55) contrast(1.6)}}
/* Q9 — the first print bleaches away to what was always there */
.bleach{transition:opacity 4.5s cubic-bezier(.6,0,.4,1)}.bleach.gone{opacity:0}
/* the red pen of whoever used these photographs before */
.ring{fill:none;stroke:var(--red-ink);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.88;mix-blend-mode:multiply}
.ring.draw{stroke-dashoffset:0;transition:stroke-dashoffset 1.15s cubic-bezier(.45,.05,.35,1)}

/* ---------- newspaper peeking from under the sheet ---------- */
.peek{position:absolute;z-index:1;top:180px;right:calc(50% - 390px - 92px);width:150px;height:430px;overflow:hidden;transform:rotate(5deg);box-shadow:0 10px 30px #000c;clip-path:polygon(0 2%,40% 0,100% 1%,98% 40%,100% 99%,55% 100%,0 98%);opacity:.92}
.peek img{position:absolute;height:auto;width:620px;left:-470px;top:-60px;filter:sepia(.7) contrast(1.05) brightness(.82)}
.peek:after{content:'';position:absolute;inset:0;background:var(--blot),linear-gradient(90deg,#0000 60%,#0006);mix-blend-mode:multiply}
.peek-2{right:calc(50% - 390px - 34px);top:260px}
.peek-3{right:calc(50% - 390px - 62px);top:150px;transform:rotate(7deg)}

/* ---------- choices as a form ---------- */
.choices{display:grid;grid-template-columns:1fr 1fr;gap:4px 26px;margin:22px 0 6px;position:relative}
.choices .choice:last-child:nth-child(odd){grid-column:1/-1}
.choice{display:flex;align-items:center;gap:14px;text-align:left;background:transparent;border:0;border-bottom:1px dashed #22180e55;padding:13px 4px;color:var(--ink);font-family:var(--serif);font-size:15px;font-weight:600}
.choice b{flex:1;font-weight:600}
.choice span{font-family:var(--type);font-size:11px;color:var(--ink-soft);letter-spacing:1px}
.choice:hover:not(:disabled){background:#22180e0d}
.choice:disabled{cursor:default}
.box{position:relative;flex:none;width:20px;height:20px;border:1.6px solid var(--ink)}
.box svg{position:absolute;left:-12px;top:-12px;width:44px;height:44px;overflow:visible}
.box path{fill:none;stroke:var(--red-ink);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;mix-blend-mode:multiply}
.choice.selected .box path{stroke-dashoffset:0;transition:stroke-dashoffset .45s ease-out}
.choice.smear .box path{opacity:.35;filter:blur(1.2px);transform:translate(3px,2px);transition:all .4s}
.choice.echo{color:#5a1009}
.choice.overwritten b,.choice.record-rewritten b{color:#5a1009;letter-spacing:1px}
.choice.record-rewritten span{color:var(--red-ink);font-weight:700}
.choices:after{content:'';position:absolute;inset:-6px;background:#0d0a07;opacity:0;pointer-events:none;transition:opacity 60ms linear}
.choices.record-outage:after{opacity:.94}
.typing:after{content:'▌';animation:caret .5s steps(1) infinite;margin-left:2px;opacity:.7}
@keyframes caret{50%{opacity:0}}

.feedback{margin-top:14px;min-height:92px;border-top:2px solid var(--ink);padding-top:16px}
.feedback p{margin:0 0 14px;color:var(--ink);font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:1px}
.lv2 .feedback p,.lv3 .feedback p{color:#4f0e08}
.feedback .checking{font-family:var(--type);font-size:13px;letter-spacing:2px;color:var(--ink-soft);animation:caret 1s steps(1) infinite}

/* ---------- buttons ---------- */
.primary{border:2px solid var(--ink);background:var(--ink);color:#e8dfc6;padding:13px 28px;font-family:var(--type);font-size:13px;letter-spacing:3px;min-width:170px;text-transform:uppercase;transition:background .2s,transform .2s}
.primary:hover{background:#3a2c1c;transform:translateY(-1px)}
.primary:disabled{cursor:wait;opacity:.6;transform:none}
.secondary{border:1.5px solid var(--ink);background:transparent;color:var(--ink);padding:13px 22px;font-size:13px;letter-spacing:1px}
.button-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.error{color:#8f1610;font-size:12px}

/* ---------- cover ---------- */
.cover{max-width:1000px;padding:30px 46px 40px}
.cover-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.cover h1{font-size:clamp(28px,3.3vw,42px)}
.cover .intro{color:var(--ink-soft);max-width:440px;margin:0 0 18px}
.consent{font-size:12px;line-height:1.9;color:var(--ink-soft);display:flex;align-items:flex-start;gap:10px;max-width:440px;margin:18px 0 20px}
.consent input{margin-top:5px;accent-color:#5a1009;width:16px;height:16px}
.meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:22px 0 0;font-family:var(--type);font-size:11px;color:var(--ink-soft)}
.hero-print{transform:rotate(1.8deg)}
.hero-print img{aspect-ratio:4/5;object-fit:cover;filter:sepia(.45) saturate(.7) contrast(1.12) brightness(.9)}
.hero-print figcaption{display:flex;justify-content:space-between;font-family:var(--type);font-size:11px;letter-spacing:2px;color:#4f4537;padding-top:10px}
.hero-print:after{inset:12px 12px 38px}

/* ---------- newspaper clippings ---------- */
.article{gap:0}
.clipping{position:relative;margin:0 auto;max-width:720px;width:100%;transform:rotate(-1.2deg);filter:drop-shadow(0 18px 30px #000)}
.clipping .newspaper-image{display:block;width:100%;height:auto;filter:sepia(.62) contrast(1.08) brightness(.86) saturate(.85)}
.clipping:before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:multiply;
  background:var(--blot),var(--fibre),linear-gradient(90deg,transparent 49.5%,#3a280f40 50%,#fff2 50.6%,transparent 51.5%),linear-gradient(0deg,transparent 33%,#3a280f30 33.4%,transparent 34.2%),radial-gradient(ellipse at 50% 50%,transparent 50%,#4d32118c 100%);background-size:700px,500px,auto,auto,auto}
.clipping:after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--noise);opacity:.35;mix-blend-mode:multiply}
.np-ghost{position:absolute;z-index:1;left:6.3%;top:14.15%;width:27.5%;height:32.4%;object-fit:cover;object-position:50% 30%;opacity:0;filter:grayscale(1) sepia(.5) contrast(1.3) brightness(.8)}
.np-ghost.on{opacity:1}
.np-ink{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}
.np-ink .ring{stroke-width:7}
.scrawl{position:absolute;z-index:3;left:7%;bottom:12%;margin:0;max-width:72%;font-family:var(--hand);font-size:clamp(17px,3vw,30px);line-height:1.4;color:#8a130c;transform:rotate(-7deg);mix-blend-mode:multiply;clip-path:inset(0 100% 0 0);text-shadow:0 0 1px #8a130c}
.scrawl.write{clip-path:inset(0 0 0 0);transition:clip-path 2.6s steps(14)}
.clipping.fragment{max-width:680px;aspect-ratio:1100/470;overflow:hidden;transform:rotate(-3.5deg);animation:drop .9s cubic-bezier(.2,.8,.2,1) both}
.clipping.fragment .newspaper-image{width:109%;margin:-14.5% 0 0 -5%}
@keyframes drop{from{opacity:0;transform:translateY(-40px) rotate(-9deg)}to{opacity:1;transform:translateY(0) rotate(-3.5deg)}}
.article-actions{max-width:720px;width:100%;margin:26px auto 0;display:flex;justify-content:flex-end}
.article-actions .primary{background:#d6cbb0;color:#1a140e;border-color:#d6cbb0}
.article-transcript{max-width:720px;width:100%;margin:22px auto 0}
.article-transcript summary{color:#9b907a;font-size:13px;cursor:pointer;padding:10px 0}
.paper.transcript{background:var(--fibre),#d6ccb3;color:#2b241a;padding:30px;box-shadow:inset 0 0 60px #6b4f2355}
.paper .date{font-family:var(--type);font-size:11px;border-bottom:2px solid #3e372d;padding-bottom:10px;display:flex;justify-content:space-between;gap:20px}
.paper h1{font-size:26px;margin:20px 0 8px}.paper h2{font-size:15px;line-height:1.8;font-weight:600}
.paper p{color:#3d3428;font-size:14px;line-height:2}
.portrait{float:right;width:95px;margin:6px 0 12px 20px}.portrait img{display:block;width:100%;filter:grayscale(1) sepia(.3)}
.annotation{color:#8a130c!important;font-family:var(--hand)!important;font-size:20px!important;transform:rotate(-4deg)}

/* ---------- final matching ---------- */
.final{max-width:900px;margin:0 auto}
.final-head{display:flex;justify-content:space-between;font-family:var(--type);font-size:12px;letter-spacing:2px;color:#9b907a;margin-bottom:12px}
.rec i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#c3170f;margin-right:7px;animation:caret 1.2s steps(1) infinite}
.camera{--h:min(62svh,560px);height:var(--h);background:#050504;position:relative;overflow:hidden;border:1px solid #2c2820}
.camera:before{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 2px,#0000002e 2px 3px),radial-gradient(ellipse at 50% 50%,transparent 50%,#000c 100%)}
.camera:after{content:'';position:absolute;inset:-50%;z-index:4;pointer-events:none;background:var(--noise);opacity:.22;animation:grain .5s steps(4) infinite}
.frame{position:absolute;left:50%;top:50%;width:max(100%,var(--h));aspect-ratio:1;transform:translate(-50%,-50%)}
.camera.live .frame{width:100%;height:100%;aspect-ratio:auto}
.frame video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);filter:grayscale(.55) sepia(.3) contrast(1.15) brightness(.85)}
.room-photo{display:block;width:100%;height:100%;filter:sepia(.5) contrast(1.25) brightness(.62) saturate(.6)}
.apparition{position:absolute;left:51.5%;bottom:36%;height:33%;transform:translateX(-50%);opacity:0;filter:sepia(.4) brightness(.45) contrast(1.2) blur(.7px)}
.camera.live .apparition{bottom:18%;height:42%}
.apparition.s1{opacity:.75;transition:opacity 3.4s ease-in}
.apparition.s2{opacity:.9;height:50%;bottom:22%;filter:sepia(.4) brightness(.55) contrast(1.2) blur(.4px)}
.apparition.s3{opacity:.95;height:84%;bottom:-6%;filter:sepia(.4) brightness(.72) contrast(1.25)}
.apparition.s4{opacity:1;height:170%;bottom:-88%;filter:sepia(.35) brightness(.78) contrast(1.3)}
.camera.live .apparition.s2{height:62%;bottom:4%}.camera.live .apparition.s3{height:100%;bottom:-24%}
.blackout{position:absolute;inset:0;z-index:6;background:#000;opacity:0;pointer-events:none}
.camera.dropout .blackout{opacity:.92}
.camera.dropout .frame{transform:translate(-50%,-50%) translateX(6px);filter:contrast(2) brightness(.6)}
.camera.dark .blackout{opacity:1}
.camera-label{position:absolute;top:18px;left:20px;color:#cfc5ad;font-family:var(--type);font-size:11px;letter-spacing:2px;z-index:5;text-shadow:0 1px 3px #000}
.scan-corner{position:absolute;inset:14%;border:1px solid #d8ccb033;z-index:5;pointer-events:none}
.camera-status{font-family:var(--serif);font-size:20px;font-weight:600;color:#e2d6bb;min-height:48px;text-align:center;padding-inline:22px;letter-spacing:2px}
.final .footnote{color:#7f7562;text-align:center}
#final-action{display:flex;justify-content:center}
#final-action .primary{background:#d6cbb0;color:#1a140e;border-color:#d6cbb0}
.camera-impact{position:absolute;inset:0;z-index:7;opacity:0;transform:translateY(115%) scale(1.25);pointer-events:none}
.camera-impact img{width:100%;height:100%;object-fit:cover;object-position:center 45%;filter:sepia(.35) contrast(1.25) brightness(.9)}
.camera.impact{position:fixed;inset:0;z-index:20;width:100vw;height:100svh;border:0}
main:has(.camera.impact),.final:has(.camera.impact){animation:none;transform:none}
main:has(.camera.impact){z-index:30}
.camera.impact .camera-impact{opacity:1;transform:translateY(0) scale(1.1);transition:transform 210ms cubic-bezier(.12,.85,.16,1)}
.camera.impact .camera-label,.camera.impact .scan-corner{display:none}
body:has(.camera.impact) header{position:relative;z-index:40;border:0}
body:has(.camera.impact) .camera-status{position:fixed;bottom:90px;left:0;right:0;z-index:30;color:#fff;text-shadow:0 2px 14px #000;pointer-events:none}
body:has(.camera.impact) #final-action{position:fixed;bottom:28px;left:0;right:0;z-index:30}

/* ---------- centered sheets ---------- */
.center{max-width:660px;text-align:center}
.center h1{font-size:clamp(25px,3.4vw,34px)}
.center p{color:var(--ink-soft)}
.center .eyebrow{text-align:center}
.ending .record{font-family:var(--type);font-size:12px;letter-spacing:2px;line-height:2.4;margin:22px auto;color:#5a1009;border:1.5px solid #5a100988;display:inline-block;padding:12px 22px;transform:rotate(-1.5deg)}

/* ---------- transitions ---------- */
.soft-in .sheet,.soft-in .clipping:not(.fragment),.soft-in .final{animation:enter .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes enter{from{opacity:0;transform:translateY(14px) rotate(-.9deg)}}
.sheet.leaving{transition:transform .32s cubic-bezier(.6,0,.9,.4),opacity .32s;transform:translateX(-30px) rotate(-3deg);opacity:0}
.sheet.cut{opacity:0;transition:none}
.splice{position:fixed;inset:0;z-index:70;background:#000;pointer-events:none}
.splice img{width:100%;height:100%;object-fit:cover;opacity:.42;filter:grayscale(1) sepia(.4) contrast(1.4) brightness(.6)}

dialog{max-width:560px;width:calc(100% - 40px);border:0;background:var(--fibre),#d9cfb5;color:var(--ink);padding:34px;box-shadow:0 20px 60px #000}
dialog::backdrop{background:#000c}
dialog h2{font-family:var(--serif);font-weight:800}
dialog p{color:var(--ink-soft)}
.ad-break{max-width:800px;margin:70px auto 0;padding-top:18px;border-top:1px solid #ffffff14;text-align:center}.ad-break[hidden]{display:none}.ad-label{display:block;font-size:9px;color:#8c816a;letter-spacing:1px;margin-bottom:8px}#ad-slot{display:flex;justify-content:center;min-height:50px}#ad-slot iframe{max-width:100%;border:0}

@media(max-width:860px){.peek{display:none}}
@media(max-width:760px){
  header{height:60px;margin:0 16px}.brand{font-size:12px;letter-spacing:3px}.brand span{display:none}.header-actions{gap:3px}#language{max-width:118px;font-size:10px;padding:5px}.exit{padding:10px 4px;font-size:10px;letter-spacing:0}
  main{padding:20px 16px 44px;min-height:calc(100svh - 124px)}
  footer{margin:0 16px;height:60px;font-size:9px}
  .sheet{padding:20px 18px 24px;transform:none}
  .cover{padding:20px 18px 28px}.cover-grid{grid-template-columns:1fr;gap:26px}.hero-print{order:-1;max-width:330px;margin:6px auto 0;transform:rotate(1deg)}.hero-print img{aspect-ratio:4/3}
  .sheet-head{font-size:10px;letter-spacing:1px;margin-bottom:16px}.progress{width:80px}
  .print{padding:8px 8px 10px}#scene:after{inset:8px 8px 10px}
  #scene svg{aspect-ratio:4/3}
  .choices{grid-template-columns:1fr;gap:0}.choice{font-size:14px;padding:12px 2px}
  .feedback p{font-size:15px}
  .clipping{transform:rotate(-.6deg)}
  .camera{--h:55svh}
  .camera-status{font-size:17px}
}
@media(max-width:400px){.button-row>button{width:100%}.primary{min-width:0;width:100%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.camera.impact .camera-impact{transform:none}}

/* Q9 — the first photograph, heavy and breathing, then a dead stop and a lunge at the figure */
.soft-in .sheet.q8{animation:enter .55s cubic-bezier(.2,.7,.2,1) both,drift 9s ease-in-out .55s infinite}
@keyframes drift{0%,100%{transform:rotate(-.35deg)}50%{transform:rotate(.15deg) translateY(3px)}}
.q8 #scene svg{animation:haze 6.5s ease-in-out infinite}
@keyframes haze{0%,100%{filter:blur(0) brightness(1)}50%{filter:blur(.7px) brightness(.86)}}
.q8 .zoom{animation:breathe 6.5s ease-in-out infinite;transform-origin:424px 322px}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.murk{position:absolute;inset:12px 12px 14px;z-index:2;pointer-events:none;background:radial-gradient(ellipse 60% 55% at 53% 62%,transparent 20%,#0b0503 100%);opacity:.35;animation:murk 6.5s ease-in-out infinite}
@keyframes murk{50%{opacity:.75}}
body.frozen:before,body.frozen .camera:after{animation-play-state:paused!important}
body.frozen .sheet.q8{animation-play-state:paused!important}
body.frozen .q8 #scene svg,body.frozen .murk{animation:none!important}
body.frozen .murk{opacity:.85;transition:opacity .5s}
body.frozen #scene svg{animation:none}
body.frozen #scene:before{opacity:.5}
.q8 .zoom.lunge{animation:none;transition:none;transform-origin:0 0}
.q8 .zoom.lunge.jolt{animation:snap .16s steps(2)}
@keyframes snap{0%{filter:brightness(.45) contrast(1.6)}50%{filter:brightness(.8) contrast(1.3)}100%{filter:none}}
body.frozen 
.stand-in{opacity:0}.stand-in.on{opacity:1}
.q8 .stand-in{filter:sepia(.4) contrast(1.3) brightness(.92)}