:root{--paper:#EDE8DE;--ink:#18100A;--terra:#C4531E;--display:'Preahvihear',sans-serif;--body:'DM Sans',sans-serif;--mono:'JetBrains Mono',monospace}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#18100a}body{font-family:var(--body);color:var(--ink)}button{font:inherit}.reader{min-height:100vh;display:grid;place-content:center;padding:24px}.reader-bar{width:min(92vw,980px);display:flex;justify-content:space-between;margin-bottom:12px;color:#b8aa9a;font:500 10px/1.4 var(--mono);letter-spacing:.1em}.book{position:relative;width:min(92vw,980px);aspect-ratio:16/10;perspective:1900px;filter:drop-shadow(0 30px 34px #0008)}.inside-page,.cover-page{position:absolute;inset:0;overflow:hidden;border:1px solid #0c0805}.inside-page{background:#8aa6ba}.inside-page .bg-scene{position:absolute;inset:0;z-index:0;pointer-events:auto}.inside-page #bg-nature{left:0;bottom:0}.cover-page{z-index:10;transform-origin:left center;transform-style:preserve-3d;backface-visibility:hidden;background:linear-gradient(90deg,rgba(24,16,10,.28),rgba(24,16,10,.05));transition:transform 1.05s cubic-bezier(.65,.02,.25,1),filter .5s}.book.turned .cover-page{transform:rotateY(-108deg);filter:brightness(.76)}.cover-heading{position:absolute;z-index:2;left:5%;top:7%;color:#f5f1e8;text-shadow:3px 3px #18100a}.cover-wordmark{display:block;margin-bottom:clamp(24px,4vw,45px);color:#ffca4e;font:600 clamp(8px,1.1vw,11px)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}.cover-heading small{color:#ffca4e;font:600 clamp(8px,1vw,11px)/1 var(--mono);letter-spacing:.16em}.cover-heading h1{margin:12px 0 18px;font:400 clamp(54px,8.5vw,105px)/.82 var(--display);letter-spacing:-.065em}.cover-heading h1 em{color:#ffca4e;font-style:normal}.cover-heading p{margin:0;font:500 clamp(8px,1vw,11px)/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase}.turn-page{position:absolute;z-index:4;right:24px;bottom:24px;display:flex;align-items:center;gap:10px;border:2px solid #18100a;background:#f5f1e8;color:#18100a;padding:10px 12px 10px 15px;cursor:pointer;font:600 9px var(--mono);letter-spacing:.08em;text-transform:uppercase;box-shadow:4px 4px #18100a}.turn-page:hover,.turn-page:focus{background:#ffca4e}.scene-heading{position:absolute;z-index:4;left:4%;top:6%;color:#f5f1e8;text-shadow:3px 3px #18100a;pointer-events:none}.scene-heading span{color:#ffca4e;font:600 9px var(--mono);letter-spacing:.16em}.scene-heading h2{margin:5px 0;font:400 clamp(40px,7vw,78px)/.9 var(--display)}.turn-back{position:absolute;z-index:9;right:18px;top:18px;border:2px solid #18100a;background:#f5f1e8;padding:8px 11px;cursor:pointer;font:600 9px var(--mono);text-transform:uppercase;box-shadow:3px 3px #18100a}.next-page{position:absolute;z-index:9;right:18px;bottom:18px;border:2px solid #18100a;background:#ffca4e;color:#18100a;padding:8px 11px;text-decoration:none;font:600 9px var(--mono);text-transform:uppercase;box-shadow:3px 3px #18100a}.hotspot{pointer-events:auto;outline:none}.hotspot-mark{position:absolute;z-index:8;right:-10px;top:-10px;display:grid;place-items:center;width:24px;height:24px;padding:0;border:3px solid #18100a;background:#ffca4e;color:#18100a;cursor:pointer;font:700 11px var(--mono);box-shadow:3px 3px #18100a}.hotspot:hover .hotspot-mark,.hotspot:focus-within .hotspot-mark,.hotspot.active .hotspot-mark{background:#f5f1e8;transform:translateY(-2px)}.field-note{position:absolute;z-index:20;display:none;min-height:78px;padding:12px 14px;border:4px solid #18100a;background:#f5f1e8;box-shadow:6px 6px #18100a;pointer-events:auto}.field-note.visible{display:block}.field-note span{color:var(--terra);font:600 8px var(--mono);letter-spacing:.14em}.field-note p{margin:6px 0 0;font:500 13px/1.4 var(--mono)}@media(max-width:650px){.reader{display:block;padding:0}.reader-bar{display:none}.book{width:100vw;min-height:100svh;aspect-ratio:auto;perspective:none;overflow:hidden}.inside-page,.cover-page{min-height:100svh;border:0}.book.turned .cover-page{transform:translateX(-104%);filter:none}.cover-page{transition:transform .72s cubic-bezier(.65,.02,.25,1)}.cover-heading{top:8%;left:6%}.cover-heading h1{font-size:clamp(58px,18vw,86px)}.scene-heading{top:7%;left:5%}.field-note{max-width:calc(100vw - 24px)}.turn-back{right:10px;top:10px}.next-page{right:10px;bottom:10px}}@media(prefers-reduced-motion:reduce){.cover-page{transition:none}.inside-page .bg-scene *{animation-duration:.01ms!important;animation-iteration-count:1!important}}

.hotspot-mark,.field-note{display:none!important}
@media (max-width:650px){body.cover-active .book-nav{display:none}.cover-active .turn-page{right:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translateX(50%);min-width:168px;justify-content:center;padding:15px 20px;background:#ffca4e;font-size:11px}.cover-active .cover-heading{top:9%}.cover-active .cover-heading h1{margin-top:14px}.cover-active .cover-heading p{max-width:82%}}

@media (max-width:650px){body.cover-active .inside-page .scene-heading,body.cover-active .inside-page .turn-back,body.cover-active .inside-page .next-page{display:none!important}}