@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500&display=swap');
:root{color-scheme:dark;--gold:#c8aa6d;--cream:#eee5d2}*{box-sizing:border-box}body{margin:0;background:#171610;color:var(--cream);font-family:Inter,Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #f5d18c;outline-offset:6px}header{height:96px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;border-bottom:1px solid #ffffff16}.wordmark{font:32px 'Cormorant Garamond',Georgia,serif;text-decoration:none;color:var(--cream)}.wordmark span{display:block;font:8px Inter,Arial;letter-spacing:3px;margin-top:5px;color:#b6ac97}header button,footer button{background:none;border:0;font-size:11px;letter-spacing:1px}header button span,footer button span{margin-left:20px;color:var(--gold)}main{position:relative}.intro{text-align:center;padding:38px 12px 26px}.intro p,.eyebrow{font-size:9px;letter-spacing:3px;color:var(--gold)}h1{font:500 clamp(32px,3.4vw,54px)/1.05 'Cormorant Garamond',Georgia,serif;margin:16px 0}.viewport{width:100%;overflow:hidden}.scene{width:min(100%,1600px);aspect-ratio:1672/941;position:relative;margin:auto;isolation:isolate}.backdrop{width:100%;height:100%;display:block}.scene:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#17161030,transparent 25%,transparent 80%,#171610aa);z-index:2}.hotspot{position:absolute;background:transparent;border:0;z-index:3;border-radius:25%}.hotspot:hover{box-shadow:0 0 30px #e9c27c30}.candle{left:33.6%;top:1%;width:4%;height:20%}.flame{position:absolute;left:48%;top:12%;width:11px;height:29px;border-radius:80% 10% 60% 40%;background:linear-gradient(#fff9d7,#ffe9a0 50%,#ed850e);box-shadow:0 0 22px 8px #ffbe5560;transform-origin:bottom;animation:flicker 1.3s infinite alternate}.candle.out .flame{opacity:0}.type-hot{left:2%;top:38%;width:28%;height:35%}.ink-hot{left:86%;top:30%;width:12%;height:21%}#typed{position:absolute;left:5%;top:20%;width:15%;height:11%;font:clamp(5px,.8vw,13px)/1.4 monospace;transform:rotate(-14deg);color:#33251d;overflow:hidden;white-space:pre-wrap;pointer-events:none}#drawing{position:absolute;left:70%;top:38%;width:23%;height:27%;transform:rotate(-11deg);z-index:3;touch-action:auto}#drawing.inked{cursor:crosshair;touch-action:none}.book{position:absolute;left:38%;top:40%;width:24%;height:48%;background:radial-gradient(ellipse at 35% 25%,#a27d36,#5f4119 60%,#3d2c13);border:3px solid #ad8844;border-radius:5px 12px 12px 5px;box-shadow:-8px 5px 0 #3c2916,-11px 9px 0 #c6b390,-13px 13px 0 #5c3b1c,4px 25px 35px #000a,inset 0 0 35px #1a1209;transform:perspective(1000px) rotateX(16deg) rotateZ(-10deg);transition:transform .5s,filter .5s;z-index:4;animation:breathe 5s ease-in-out infinite}.book:hover{filter:brightness(1.18);animation:none;transform:perspective(1000px) rotateX(8deg) rotateZ(-6deg) translateY(-12px)}.book-inner{position:absolute;inset:6%;border:1px solid #d7b86e;outline:1px solid #c8a361;outline-offset:5px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#ebd395;text-shadow:0 1px 1px #221600}.corner{position:absolute;font-size:clamp(15px,3vw,43px);color:#dcc17d;z-index:1}.tl{left:2%;top:0}.tr{right:2%;top:0;transform:scaleX(-1)}.bl{left:2%;bottom:0;transform:scaleY(-1)}.br{right:2%;bottom:0;transform:scale(-1)}.sun{font-size:clamp(20px,3vw,48px)}.edition{font-size:clamp(4px,.55vw,9px);letter-spacing:2px;margin:6% 0}.book-title{font:500 clamp(20px,4vw,64px)/.85 'Cormorant Garamond',Georgia,serif}.ornament{font-size:30px;margin:5%}.book-sub{font:italic clamp(8px,1.1vw,17px) Georgia}.book-hint{position:absolute;left:65%;top:78%;font:italic clamp(10px,1.3vw,19px) Georgia;color:#ead9b8;transform:rotate(-5deg);z-index:4}.book-hint span{display:inline-block;margin-left:8px;transform:rotate(-60deg)}footer{display:flex;justify-content:space-between;align-items:center;padding:24px 5% 30px;color:#b9b09e;font-size:10px;letter-spacing:1px}dialog{color:#352c20;background:#eee3ca;border:1px solid #bb9f6d;border-radius:3px;padding:48px;width:min(650px,92vw);max-height:90dvh;box-shadow:0 30px 150px #000c}dialog::backdrop{background:#100e0bc9;backdrop-filter:blur(8px)}dialog h2{font:500 44px/1 'Cormorant Garamond',Georgia,serif;margin:12px 0 24px}dialog .eyebrow{color:#806331}.close{position:absolute;right:15px;top:10px;font:28px Georgia;background:transparent;border:0;color:inherit}dialog p{line-height:1.8;font-size:14px}.small{font-size:10px!important;color:#7c705c;text-align:center}textarea{width:100%;height:170px;resize:vertical;background:#f8efd9;border:1px solid #cbbb97;padding:20px;font:16px/1.7 monospace;color:#33291e}#keys{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:20px 0}#keys button{width:33px;height:33px;border-radius:50%;background:#28251f;color:#eee3ca;border:2px solid #98876c;box-shadow:0 3px #8e7e64;font:12px monospace}.actions{display:flex;justify-content:space-between;gap:15px;margin-top:20px}.actions button,#enter,#backContents{border:1px solid #aa936a;padding:12px 16px;background:transparent;color:#4a3922;font-size:11px}.cover-art{background:radial-gradient(ellipse at 30% 20%,#a78643,#573a16);border:double 6px #d1b16a;color:#eed79f;text-align:center;padding:35px 20px;box-shadow:inset 0 0 40px #241907,8px 8px 0 #c2ab7e;width:min(290px,75vw);margin:0 auto 30px}.cover-art>span{font-size:45px}.cover-art p{font-size:8px;letter-spacing:2px}.cover-art h2{font-size:64px;margin:25px 0}.cover-art em{display:block;font:italic 14px Georgia;margin:15px}#living{width:min(850px,94vw);transition:width .7s}#coverView{text-align:center}#enter{background:#40331e;color:#f0dfba;min-width:200px}#contents{animation:pageIn .8s ease both}#contents h2{font-size:54px}.lede{font:italic 20px Georgia!important;color:#857150}#authorList button{display:flex;width:100%;justify-content:space-between;align-items:center;text-align:left;background:none;border:0;border-bottom:1px solid #caba96;padding:22px 0;color:#392e20}#authorList strong{font:26px 'Cormorant Garamond',Georgia,serif}#authorList small{display:block;font-size:10px;letter-spacing:1px;margin-top:7px;color:#8b7552}#workBody{font:20px/1.8 'Cormorant Garamond',Georgia,serif;white-space:pre-line}#reader .eyebrow{margin-top:35px}#toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,15px);padding:13px 23px;background:#f0e3c9;color:#44321e;border:1px solid #a88a55;font-size:12px;opacity:0;transition:.3s;pointer-events:none;z-index:20;max-width:90%;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}@keyframes flicker{to{transform:rotate(7deg) scaleY(.87)}}@keyframes breathe{50%{transform:perspective(1000px) rotateX(16deg) rotateZ(-10deg) translateY(-5px);filter:brightness(1.08)}}@keyframes pageIn{from{opacity:0;transform:perspective(900px) rotateY(-35deg);transform-origin:left}to{opacity:1;transform:rotateY(0)}}@media(max-width:650px){header{height:77px;padding:0 6%}.wordmark{font-size:27px}header button{font-size:9px}.intro{padding:30px 10px 25px}.intro p{font-size:7px;letter-spacing:2px}.viewport{overflow-x:auto}.scene{width:950px;max-width:none;margin-left:calc((100vw - 950px)/2)}.book{left:39%;width:23%}.book-title{font-size:45px}.edition{font-size:7px}.sun{font-size:32px}.book-sub{font-size:12px}.corner{font-size:30px}.book-hint{display:none}.candle{left:33.6%}.intro h1{font-size:38px}footer{padding:20px 6%;gap:20px;line-height:1.8}footer>span{max-width:180px;font-size:9px}dialog{padding:38px 24px}dialog h2{font-size:36px}#typed{font-size:8px}.book-inner{inset:7%}.flame{width:9px;height:23px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}