*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0c0709;color:#f6e9d3;font-family:Georgia,'Times New Roman',serif}button{font:inherit;cursor:pointer;touch-action:manipulation}.app{position:relative;width:100%;height:100dvh;min-height:400px;overflow:hidden;background:#0c0709}.scene{position:absolute;inset:0;overflow:hidden}.scene-photo{width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(.75);transition:filter 1.2s,transform 1.5s}.scene-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(7,2,4,.56),transparent 32%,transparent 75%,rgba(7,2,4,.7))}.glow{position:absolute;top:-20%;left:25%;width:50%;height:75%;background:radial-gradient(ellipse,rgba(255,193,102,.12),transparent 70%);pointer-events:none;animation:glow 5s ease-in-out infinite alternate}@keyframes glow{to{opacity:.4}}.header{position:absolute;top:0;left:0;right:0;padding:clamp(18px,3vw,36px);display:flex;align-items:flex-start;justify-content:space-between;z-index:3;pointer-events:none}.brand,.viewer-brand{font:600 clamp(21px,3vw,34px) Arial,sans-serif;letter-spacing:.15em;color:#fff}.brand small,.viewer-brand small{display:block;font-size:10px;letter-spacing:.55em;text-align:center;margin-top:3px}.eyebrow,.intro-top,.bottom-hint{font:10px Arial,sans-serif;letter-spacing:.23em;color:#e5c69c}.eyebrow{margin-top:10px}.intro{position:absolute;z-index:3;top:15%;left:50%;transform:translateX(-50%);text-align:center;text-shadow:0 2px 16px #000;pointer-events:none;width:90%;transition:opacity .6s}.intro h1{font-size:clamp(24px,3.7vw,50px);font-weight:normal;margin:12px 0}.intro p:not(.intro-top){font-size:14px;color:#f4d5ad}.hotspot{position:absolute;z-index:4;background:transparent;border:0;color:#fff;outline-offset:3px}.hotspot span{position:absolute;left:50%;bottom:0;transform:translate(-50%,100%);padding:9px 12px;white-space:nowrap;background:rgba(17,8,9,.82);border:1px solid rgba(234,191,124,.55);font:10px Arial,sans-serif;letter-spacing:.14em;backdrop-filter:blur(6px);border-radius:24px}.hotspot:focus-visible{outline:2px solid #ffd8a0}.magazine-hotspot{left:31%;top:35%;width:40%;height:50%;transform:rotate(-6deg)}.magazine-hotspot span{bottom:30%;transform:translate(-50%,0)}.coffee-hotspot{left:74%;top:35%;width:23%;height:38%}.coffee-hotspot span{bottom:7%}.music-hotspot{left:1%;top:18%;width:34%;height:34%}.music-hotspot span{bottom:0}.steam{position:absolute;left:45%;top:0;width:2px;height:48px;border-left:2px solid rgba(255,255,255,.65);border-radius:50%;filter:blur(3px);animation:rise 3s ease-out infinite;pointer-events:none}.s2{left:65%;animation-delay:1.4s}@keyframes rise{0%{opacity:0;transform:translateY(8px) scale(.7)}35%{opacity:.6}100%{opacity:0;transform:translateY(-36px) scale(1.6)}}.bottom-hint{position:absolute;bottom:20px;left:0;right:0;text-align:center;z-index:3;text-shadow:0 2px 8px #000}.viewer{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;background:radial-gradient(ellipse at center,#302019 0%,#120b0e 68%,#070507 100%);opacity:0;visibility:hidden;transform:scale(1.05);transition:opacity .55s,transform .55s,visibility .55s}.viewer.active{opacity:1;visibility:visible;transform:scale(1)}.viewer-top{padding:17px clamp(18px,4vw,50px);display:flex;align-items:center;justify-content:space-between}.viewer-brand{font-size:20px}.viewer-brand small{font-size:7px}.icon-btn{border:1px solid #8c7357;border-radius:50%;background:#1b1112;color:#f7dfba;width:40px;height:40px}.book-area{min-height:0;flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(5px,2vw,25px);padding:5px 10px}.book-shell{position:relative;height:100%;max-height:calc(100dvh - 162px);max-width:min(72vw,640px);aspect-ratio:2/3;display:flex;justify-content:center;align-items:center;filter:drop-shadow(16px 14px 14px #0009);perspective:1200px}.book-shell img{height:100%;width:100%;object-fit:contain;box-shadow:5px 4px 0 #5a483c,9px 8px 0 #251a1a;user-select:none;-webkit-user-select:none;transition:transform .32s,opacity .32s}.book-shell.turn-next img{transform:perspective(1100px) rotateY(-24deg) scale(.985);opacity:.6}.book-shell.turn-prev img{transform:perspective(1100px) rotateY(24deg) scale(.985);opacity:.6}.turn-shade{pointer-events:none;position:absolute;inset:0;background:linear-gradient(90deg,#0006,transparent 16%,transparent 90%,#fff1)}.page-nav{width:clamp(34px,7vw,58px);height:clamp(55px,12vw,85px);border:1px solid #9c805e66;background:#1e1515aa;color:#efcf9d;border-radius:40px;font:40px Georgia}.page-nav:disabled{opacity:.2}.viewer-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px clamp(18px,4vw,50px);font:11px Arial,sans-serif;letter-spacing:.13em;color:#e9c89b}.controls{display:flex;gap:8px}.controls button,.ending button{border:1px solid #9c805e;color:#f0d0a5;background:#251718;padding:11px 13px;font:10px Arial,sans-serif;letter-spacing:.1em}.controls button[hidden]{display:none}.swipe-tip{text-align:center;font:9px Arial,sans-serif;letter-spacing:.17em;color:#9e8164;margin:0 0 12px}.ending{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:radial-gradient(ellipse,#3b181b,#080507 70%);opacity:0;visibility:hidden;transition:opacity 1.4s,visibility 1.4s}.ending.active{opacity:1;visibility:visible}.ending-logo{font:600 clamp(44px,12vw,92px) Arial,sans-serif;letter-spacing:.14em;color:#fff}.ending small{font:12px Arial,sans-serif;letter-spacing:.6em}.ending p{font-style:italic;color:#e6c89c;margin:35px 0}.ending button{padding:15px 20px}.app.started .intro{opacity:0}.app.started .scene-photo{filter:brightness(.93)}.app.finished .scene-photo{filter:brightness(.12)}@media(max-width:650px){.scene-photo{object-fit:cover;object-position:48% center}.intro{top:18%}.intro h1{font-size:27px}.intro-top{font-size:8px}.eyebrow{font-size:8px}.magazine-hotspot{left:28%;top:38%;width:46%;height:42%}.coffee-hotspot{left:74%;top:37%;width:25%;height:32%}.music-hotspot{left:0;top:27%;width:35%;height:28%}.hotspot span{font-size:8px;padding:7px}.magazine-hotspot span{bottom:30%}.bottom-hint{font-size:8px;line-height:1.6;padding:0 25px}.book-shell{max-width:76vw;max-height:calc(100dvh - 180px)}.page-nav{width:28px;height:54px;font-size:32px;padding:0}.book-area{gap:4px;padding:3px}.viewer-bottom{font-size:9px;padding:10px}.controls button{font-size:9px;padding:9px}.swipe-tip{font-size:8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* TiMUR physical page V2 */
.book-shell{isolation:isolate;transform-style:preserve-3d;touch-action:pan-y;overflow:visible}
.book-shell>img{transition:none!important}
.paper-leaf{position:absolute;inset:0;z-index:4;transform-origin:left center;transform-style:preserve-3d;backface-visibility:visible;pointer-events:none;display:none;filter:drop-shadow(5px 7px 5px rgba(0,0,0,.45))}
.paper-leaf.visible{display:block}
.paper-leaf.reverse{transform-origin:right center;scale:-1 1}
.paper-front,.paper-back{position:absolute;inset:0;background-size:100% 100%;background-position:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:1px 3px 3px 1px}
.paper-front{box-shadow:inset -12px 0 20px rgba(0,0,0,.16);transform:translateZ(1px)}
.paper-back{transform:rotateY(180deg) translateZ(1px);filter:brightness(.88);box-shadow:inset 12px 0 18px rgba(0,0,0,.25)}
.paper-glint{position:absolute;inset:0;background:linear-gradient(90deg,transparent 45%,rgba(255,255,255,.20) 69%,rgba(0,0,0,.18) 98%);backface-visibility:hidden;opacity:calc(.5 + var(--progress,0)*.3);transform:translateZ(2px)}
.book-area{touch-action:pan-y}
.page-nav{opacity:.24;transition:opacity .2s}
.page-nav:active{opacity:1}

/* V3: stable physical page plane; never transform or scale the artwork */
.header,.intro{display:none!important}.hotspot span:not(.sr-only){display:none!important}.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.bottom-hint{font-family:Georgia,serif;font-size:clamp(8px,1.8vw,12px);letter-spacing:.13em;white-space:nowrap;bottom:clamp(17px,5vh,45px);padding:0 8px}.bottom-hint em{font-style:normal;color:#d8ac6d;padding:0 .35em}.viewer-top{justify-content:flex-end}.viewer-brand{display:none}.book-shell{overflow:hidden;isolation:isolate;touch-action:none;transform:none!important;perspective:none!important}.book-shell>img{width:100%;height:100%;object-fit:fill;transform:none!important;opacity:1!important;transition:none!important}.curl-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:8;display:none;pointer-events:none}.curl-canvas.active{display:block}.turn-shade,.paper-leaf{display:none!important}.official-logo{display:block;width:min(78vw,480px);height:auto;object-fit:contain}.ending small{display:none}.finish{font-size:20px!important;line-height:1}.coffee-hotspot:active,.music-hotspot:active{filter:drop-shadow(0 0 10px #ffe5ae)}.viewer-bottom{position:relative}.swipe-tip{opacity:.75}@media(max-width:650px){.bottom-hint{font-size:clamp(7px,2vw,10px);letter-spacing:.055em}.book-shell{max-width:min(76vw,500px)}}

/* V4: closing screen visual replacement only. Other interactions untouched. */
.ending{background:#080506;gap:0}
.ending-art{position:absolute;inset:0;background-image:url('assets/ending-v4.png');background-repeat:no-repeat;background-position:center;background-size:contain;pointer-events:none}
.ending #replay{position:absolute;left:50%;top:68.7%;transform:translate(-50%,-50%);width:min(49vw,245px);height:clamp(44px,6.2vh,62px);opacity:0;background:transparent;border:0;color:transparent;cursor:pointer;z-index:2}
.ending #replay:focus-visible{opacity:1;color:#f3d4a0;background:#150d0de8;border:2px solid #e4b66d;outline:2px solid white;outline-offset:3px}
@media(max-aspect-ratio:9/16){.ending #replay{top:68.7%;width:min(49vw,245px)}}