*{box-sizing:border-box}html,body{margin:0;background:#f1ece4;color:#815348}body{overflow-x:hidden}#site{position:relative;min-height:100vh;width:100%;overflow:hidden}#ground{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;cursor:none;outline:none}#ground:focus-visible{outline:1px solid #af745d;outline-offset:-8px}.corner,footer{position:absolute;font:8px/1.8 "Times New Roman", Times, serif,monospace;letter-spacing:1.3px;pointer-events:none;color:#ae8f7b}.corner{top:29px}.top{left:34px}.top span{margin-left:10px;color:#c1a390}.date{right:34px;text-align:right}footer{bottom:25px;left:34px;right:34px;display:flex;justify-content:space-between;align-items:end}#layer-guide{position:absolute;left:34px;bottom:66px;width:305px;height:190px;max-width:calc(100vw - 48px);padding:6px 0 6px 17px;border-left:1px solid #c4a28f;background:#f1ece4;pointer-events:none;font:8px/1.7 "Times New Roman", Times, serif,monospace;color:#a6806a}#layer-title{letter-spacing:1.1px;color:#8d4837}#layer-hint{font:11px/1.7 "Times New Roman", Times, serif,serif;margin:10px 0 12px;max-width:280px;color:#9d7560}#layer-status{letter-spacing:.4px;font-size:8px}button{font:8px "Times New Roman", Times, serif;letter-spacing:.6px;color:#963f2e;cursor:pointer}#next-layer,#compare{pointer-events:auto;border:0;border-bottom:1px solid #b97459;background:none;padding:9px 0 7px;margin-top:12px;touch-action:none}button:hover{color:#743425;border-color:#963f2e}button:focus-visible{outline:2px solid #9b4d37;outline-offset:4px}button[hidden]{display:none!important}#restart{position:absolute;right:0;bottom:29px;pointer-events:auto;border:0;background:none;color:#b3937c;padding:4px 0;font-size:7px}#ending{position:absolute;bottom:28px;left:38%;font:14px/1.5 "Times New Roman", Times, serif;color:#8f4c38;opacity:0;transition:opacity 3s;pointer-events:none}#ending span{font-size:12px;color:#b18a74}#ending.visible{opacity:1}#opening{position:absolute;left:37%;top:34%;pointer-events:none;animation:opening 6s forwards;z-index:2}#opening span{font:7px "Times New Roman", Times, serif;letter-spacing:1.5px;color:#aa816a}#opening div{font:italic 32px/1.15 "Times New Roman", Times, serif;color:#9d6550;margin-top:14px}#opening.dismissed{display:none}@keyframes opening{0%{opacity:0;transform:translateY(5px)}15%,45%{opacity:1;transform:translateY(0)}100%{opacity:0}}#transcript{position:absolute;left:34px;bottom:40px;max-width:320px;font:7px "Times New Roman", Times, serif;color:#b08b73;z-index:6}#transcript summary{cursor:pointer;letter-spacing:.7px}#transcript[open]{bottom:65px;padding:15px;background:#f1ece4;border:1px solid #c9a38b;max-height:65vh;overflow:auto;box-shadow:0 8px 24px #b88c704d}#transcript h3{font:9px "Times New Roman", Times, serif;color:#914d38}#transcript p{font:12px/1.6 "Times New Roman", Times, serif;margin:8px 0 18px}#brush{position:fixed;width:42px;height:54px;pointer-events:none;opacity:0;z-index:5;transform:translate(-12px,-43px) rotate(22deg);filter:drop-shadow(2px 3px 1px rgba(67,59,44,.2));background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='54' viewBox='0 0 42 54'%3E%3Cpath d='M16 4Q16 0 21 0Q26 0 26 4V11Q26 15 21 15Q16 15 16 11Z' fill='none' stroke='%23676150' stroke-width='2'/%3E%3Cpath d='M21 14V34' stroke='%23847b61' stroke-width='4'/%3E%3Cpath d='M13 32L29 32L31 42Q29 49 21 53Q13 49 11 42Z' fill='%23b97960' stroke='%238a4633'/%3E%3Cpath d='M21 34V48M13 34L14 42Q16 47 21 50' fill='none' stroke='%23edd5c0' stroke-width='1'/%3E%3C/svg%3E") no-repeat}#brush::after{content:attr(data-layer);position:absolute;top:62px;left:5px;transform:rotate(-22deg);white-space:nowrap;font:7px "Times New Roman", Times, serif;letter-spacing:1px;color:#a16b53}#ground:active~#brush{transform:translate(-12px,-41px) rotate(8deg)}@media(max-width:739px){.top{left:24px;font-size:7px}.top span{display:block;margin:0}.date{right:24px;font-size:7px}.corner{top:20px}#layer-guide{left:28px;bottom:72px;width:calc(100vw - 56px);height:190px}footer{left:28px;right:28px;bottom:24px;font-size:7px}#ending{left:28px;bottom:265px;font-size:13px}#ending span{font-size:12px}#opening{left:23%;top:150px}#opening div{font-size:27px}#transcript{left:28px;bottom:42px}#transcript[open]{max-width:calc(100vw - 56px)}#ground{touch-action:pan-y}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}#opening{display:none}}
#next-layer{display:block;width:100%;min-height:44px;margin-top:14px;padding:13px 15px;border:1px solid #9c432f;background:#a64d36;color:#fff6e9;font:700 11px "Times New Roman", Times, serif;letter-spacing:1.4px;box-shadow:0 3px 0 #7d3829;transition:background .2s,transform .2s,box-shadow .2s}#next-layer:hover:not(:disabled){background:#8f3e2b;transform:translateY(-1px);box-shadow:0 4px 0 #7d3829}#next-layer:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #7d3829}#next-layer:disabled{background:#d3b8a5;border-color:#c1a28b;color:#8d6553;box-shadow:none;cursor:default}#layer-guide{padding-right:8px}#layer-hint{font-size:10px;margin:8px 0 10px}#compare{border:1px solid #a8654e;padding:12px 8px;font-size:9px;width:100%}
/* Illustrated case opening: stays until an explicit start. */
#opening{position:fixed;inset:0;z-index:20;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:12px;padding:25px 42px 26px;background:#f1ece4;pointer-events:auto;animation:none;overflow:auto;opacity:1}
#opening.dismissed{display:none!important}
#opening .opening-meta{font:9px/1.5 "Times New Roman", Times, serif;letter-spacing:1.4px;color:#8d4837;display:flex;justify-content:space-between;margin:0}
#opening .opening-meta span{font:inherit;color:#a6806a;letter-spacing:1.4px}
#opening .opening-heading{text-align:center;margin:6px 0 0}
#opening .eyebrow{font:9px "Times New Roman", Times, serif;letter-spacing:2px;margin:0 0 9px;color:#a65a42}
#opening h1{font:normal clamp(27px,3.1vw,48px)/1.12 "Times New Roman", Times, serif;margin:0;color:#743b2d;letter-spacing:-1.5px}
#opening .case-background{font:13px/1.65 "Times New Roman", Times, serif;color:#956c58;margin:12px 0 0}
#opening .crime-scene{display:block;width:100%;height:100%;min-height:180px;max-height:56vh;object-fit:contain;mix-blend-mode:multiply}
#opening .opening-action{margin:0;text-align:center}
#start-digging{width:min(650px,100%);min-height:70px;display:inline-flex;align-items:center;justify-content:space-between;padding:20px 28px;background:#a64d36;color:#fff4e6;border:1px solid #96452f;box-shadow:0 4px 0 #743525;font:700 clamp(15px,1.6vw,22px) "Times New Roman", Times, serif;letter-spacing:2px;transition:background .2s,transform .2s}
#start-digging span{font:32px "Times New Roman", Times, serif!important;color:#fff4e6!important}
#start-digging:hover{background:#8c3f2d;transform:translateY(-2px)}
#opening .opening-action p{font:8px "Times New Roman", Times, serif;letter-spacing:1.5px;color:#ae806a;margin:15px 0 0}
#site:not(.started)>#brush{display:none}
@media(max-width:739px){#opening{padding:20px 22px 24px;gap:16px}#opening .opening-meta{font-size:7px}#opening h1{font-size:33px;max-width:340px;margin:auto}#opening .case-background{font-size:12px}#opening .crime-scene{min-height:210px;object-fit:cover;object-position:50%}#start-digging{min-height:68px;padding:18px 20px;font-size:15px;letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){#opening{display:grid!important}#opening.dismissed{display:none!important}}
#opening h1{font-weight:400;letter-spacing:-.8px}#opening .case-background{font-size:15px}#layer-hint{font-size:12px;line-height:1.55}#layer-title,#layer-status{letter-spacing:.7px}
/* Mystery novel typography: Didot display, Times book text. */
body,button{font-family:"Times New Roman",Times,serif}
#opening h1{font-family:Didot,"Bodoni MT","Times New Roman",serif;font-size:clamp(36px,4.2vw,60px);font-weight:400;line-height:1.08;letter-spacing:-1.1px;max-width:1100px;margin:0 auto}
#opening .case-background{font-family:"Times New Roman",Times,serif;font-size:15px;line-height:1.65;color:#855d4b}
#opening .opening-meta,#opening .eyebrow,#opening .opening-action p{font-family:"Times New Roman",Times,serif;font-weight:400;letter-spacing:2px}
#start-digging{font-family:Didot,"Bodoni MT","Times New Roman",serif;font-weight:400;font-size:clamp(19px,2vw,25px);letter-spacing:2.2px}
#next-layer{font-family:Didot,"Bodoni MT","Times New Roman",serif;font-size:14px;font-weight:400;letter-spacing:1.5px}
#layer-title{font-size:10px;font-weight:400;letter-spacing:1px}#layer-status{font-size:9px;letter-spacing:.7px}#layer-hint{font-family:"Times New Roman",Times,serif;font-size:12px;line-height:1.55}
#compare{font-size:10px;letter-spacing:1px}#transcript h3{font-variant:small-caps;font-size:13px;font-weight:400}#transcript p{font-size:14px}#ending{font-family:Didot,"Bodoni MT","Times New Roman",serif;font-size:16px}#ending span{font-family:"Times New Roman",Times,serif;font-size:13px}
@media(max-width:739px){#opening h1{font-size:37px;max-width:340px}#opening .case-background{font-size:13px}#start-digging{font-size:19px;letter-spacing:1.5px}}
/* Handwritten annotations, clear narrative text. */
body{font-family:ArchiveSerif,"ArchiveSerif Linotype",Georgia,serif}
#opening h1,#start-digging,#next-layer,#compare,#layer-title,#transcript summary,#transcript h3,.corner,footer,button,#ending{font-family:ArchiveHand,"Bradley Hand",cursive;font-weight:400}
#opening h1{font-size:clamp(30px,3.3vw,45px);letter-spacing:0;line-height:1.35}
#opening .case-background,#layer-hint,#transcript p,#ending span{font-family:ArchiveSerif,"ArchiveSerif Linotype",Georgia,serif}
#opening .case-background{font-size:13px;line-height:1.8}
#opening .eyebrow,#opening .opening-meta,#opening .opening-action p{font-family:ArchiveHand,"Bradley Hand",cursive;letter-spacing:1px;font-size:10px}
#opening .opening-action{padding-top:20px}
#start-digging{width:300px;min-height:44px;padding:9px 18px;font-size:17px;letter-spacing:1px;box-shadow:0 2px 0 #743525}
#start-digging span{font-size:23px!important}
#opening .opening-action p{font-size:9px;margin-top:12px}
#next-layer{font-size:15px;letter-spacing:.5px}#layer-title{font-size:11px}#layer-hint{font-size:11px;line-height:1.65}.corner,footer{font-size:9px}
#layer-guide{pointer-events:auto;z-index:7}#transcript{width:305px;max-width:calc(100vw - 56px);bottom:18px;z-index:12;background:#f1ece4}#transcript summary{display:block;min-height:42px;padding:12px 10px;border:1px solid #c9b0a1;font-size:11px;letter-spacing:.4px;touch-action:manipulation}#transcript summary::before{content:'↗ ';color:#a64d36}#transcript[open]{bottom:65px;width:380px;max-width:calc(100vw - 56px);padding:16px;max-height:65vh}#transcript p{font-size:13px;line-height:1.7}#transcript h3{font-size:17px;font-variant:normal}
#finale[hidden]{display:none!important}#finale{position:fixed;inset:0;z-index:18;display:grid;place-items:center;background:rgba(241,236,228,.68);padding:20px;overflow:auto}
#finale-paper{width:330px;max-width:100%;text-align:center;background:#f1ece4;padding:22px 20px 18px;box-shadow:0 20px 60px rgba(98,58,43,.1);border:1px solid #cfb9a9;color:#8d3f2e;transform-origin:center}
#finale.visible #finale-paper{animation:culpritZoom 2s cubic-bezier(.2,.75,.2,1) both}
.finale-eyebrow{font:9px ArchiveHand,cursive;letter-spacing:2px;margin:0 0 6px}.culprit-portrait{position:relative;height:220px}.culprit-portrait canvas{width:100%;height:100%;object-fit:contain}.culprit-portrait svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.culprit-portrait path{fill:none;stroke:#a6422c;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:850;stroke-dashoffset:850}#finale.visible path{animation:circleCulprit 1.3s .8s ease-out forwards}#finale h2{font:28px/1.2 ArchiveHand,cursive;letter-spacing:1px;margin:12px 0 5px}#finale h3{font:19px ArchiveHand,cursive;margin:0}.finale-explanation{font:13px/1.7 ArchiveSerif,"ArchiveSerif Linotype",Georgia,serif;color:#75564a;margin:14px 0 18px}#close-finale{font:14px ArchiveHand,cursive;border:0;border-bottom:1px solid #ad725b;background:none;padding:8px 4px;letter-spacing:0}
@keyframes culpritZoom{0%{transform:translate(var(--from-x),var(--from-y)) scale(var(--from-scale));opacity:0}20%{opacity:1}100%{transform:translate(0,0) scale(1);opacity:1}}
@keyframes circleCulprit{to{stroke-dashoffset:0}}
@media(max-width:739px){#opening h1{font-size:30px}#start-digging{width:260px;font-size:16px}#transcript{left:28px;width:calc(100vw - 56px)}#finale-paper{width:310px}.culprit-portrait{height:190px}}
@media(prefers-reduced-motion:reduce){#finale.visible path{stroke-dashoffset:0}}
#opening .case-background{font-size:15px;line-height:1.75}#layer-hint{font-size:12px;line-height:1.6}#transcript p{font-size:14px;line-height:1.75}.finale-explanation{font-size:14px;line-height:1.7}.date{font-size:11px;letter-spacing:.4px}#opening .opening-meta span{font-size:11px;letter-spacing:.4px}
/* Self-contained iframe sizing. */
@font-face{font-family:ArchiveHand;src:url('./fonts/Handlee.ttf') format('truetype');font-display:swap}
@font-face{font-family:ArchiveSerif;src:url('./fonts/Lora.ttf') format('truetype');font-weight:400 700;font-display:swap}
html,body{width:100%;height:100%;overflow:hidden}#site{height:100%;min-height:0}#ground{touch-action:none}
.corner{top:22px}.date{right:88px}.opening-meta{padding-right:60px}
#opening{height:100%;overflow:hidden;padding:22px clamp(18px,4vw,42px) 24px;gap:10px}#opening .crime-scene{min-height:0;max-height:none;object-fit:contain}#opening h1{font-size:clamp(25px,3.3vw,45px)}#opening .opening-action{padding-top:8px}#opening .case-background{font-size:clamp(12px,1.4vw,15px)}
#layer-guide{left:24px;bottom:62px;width:290px;height:140px;padding:4px 0 4px 14px}#layer-hint{font-size:11px;margin:6px 0;line-height:1.4}#next-layer{margin-top:7px;min-height:34px;padding:8px}#compare{margin-top:7px;padding:9px}
#transcript{left:24px;bottom:14px;width:290px}#transcript summary{min-height:34px;padding:8px 10px}#transcript[open]{bottom:14px;max-height:70%;width:380px}footer{left:340px;right:24px;bottom:22px}#restart{bottom:22px}#ending{left:36%;bottom:58px;font-size:14px}
#finale{overflow:hidden}#finale-paper{max-height:calc(100vh - 40px)}.culprit-portrait{height:min(220px,30vh)}
@media(max-width:739px){.top{left:20px;font-size:8px}.date{right:88px;top:40px;font-size:9px}.opening-meta{display:block!important;padding-right:64px}.opening-meta span{display:block;margin-top:4px!important}#opening .opening-heading{margin-top:12px}#opening .case-background br{display:none}#opening .case-background{line-height:1.65}#opening h1{font-size:29px}#opening .opening-action p{font-size:8px}#layer-guide{left:20px;bottom:64px;width:calc(100% - 40px);height:130px}#layer-hint{font-size:10px}#layer-title{font-size:10px}#layer-status{font-size:8px}#transcript{left:20px;width:calc(100% - 40px);bottom:18px}#transcript[open]{left:20px;width:calc(100% - 40px);max-width:none;bottom:18px}footer{left:20px;right:20px;bottom:3px;font-size:7px}#restart{bottom:0}#ending{left:20px;bottom:200px;font-size:11px}#ending span{font-size:10px}}
@media(max-height:500px){#opening{padding:12px 20px;gap:4px}#opening .opening-heading{margin:0}#opening h1{font-size:24px}#opening .case-background{margin:5px 0 0;font-size:11px}#opening .eyebrow{margin-bottom:3px}#opening .opening-action p{display:none}#start-digging{min-height:30px;padding:5px 14px;font-size:14px}#layer-guide{height:115px;bottom:50px}#layer-hint{font-size:9px}#next-layer{min-height:26px;padding:4px}#finale-paper{padding:10px}.finale-explanation{font-size:11px;margin:8px}#finale h2{font-size:20px;margin:4px}#finale h3{font-size:15px}}
@media(max-width:739px){#transcript:not([open]){width:calc(100% - 120px)}#transcript:not([open]) summary{font-size:9px}#restart{bottom:24px}}