/* Prepared by: Codex. Values and composition from the actual /book/ scene. */
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{background:#101d2c;color:#eee1bf;font-family:Arial,sans-serif}
header{position:absolute;left:24px;right:24px;top:15px;height:48px;display:flex;align-items:center;justify-content:space-between;z-index:5;pointer-events:none}
header a{pointer-events:auto}
.brand{display:flex;align-items:center;gap:7px;text-decoration:none;color:#ead8a9}
.brand img{width:37px;height:43px;object-fit:contain;filter:brightness(0) saturate(100%) invert(80%) sepia(29%) saturate(592%) hue-rotate(358deg) brightness(88%) contrast(91%)}
.brand span{font:23px Georgia,serif;text-shadow:0 2px 3px #261a12}
.scene-menu{padding:10px 15px;border:1px solid #d2b97e66;border-radius:20px;background:#142335e8;color:#ecd9aa;font:13px Arial,sans-serif;text-decoration:none;min-height:40px;display:grid;place-items:center}
.scene-menu:hover{background:#223349}
main,.visual{height:100dvh;position:relative}
#stage{position:absolute;inset:0;touch-action:none}
#stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.fallback{position:absolute;height:66%;max-width:80%;object-fit:contain;left:50%;top:45%;transform:translate(-50%,-50%)}
.viewer-bottom{position:absolute;z-index:4;bottom:max(18px,env(safe-area-inset-bottom));left:32%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);text-align:center}
h1{margin:0 0 28px;font:400 clamp(30px,3vw,48px)/1.2 Georgia,serif;color:#f5dfaa;text-shadow:0 1px 3px #261a12}
.book-introduction{position:absolute;z-index:4;left:62%;top:50%;transform:translateY(-50%);width:30%;max-width:470px;text-align:center}
#book-story{height:clamp(240px,39vh,390px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y;padding:12px 14px 22px;color:#fff2d9;text-shadow:0 1px 3px #160e06;mask-image:linear-gradient(transparent,#000 12px,#000 calc(100% - 22px),transparent)}
#book-story::-webkit-scrollbar{display:none}
.credits-copy{font:400 clamp(18px,1.45vw,23px)/1.65 Georgia,serif}
.credits-copy h2{font:400 clamp(28px,2.4vw,37px)/1.2 Georgia,serif;margin:0 0 10px}
.credits-copy .book-subtitle{margin:0 0 34px;font-style:italic}
.credits-copy p{margin:0 0 32px}
.credits-copy p:last-child{margin-bottom:8px}
#reading-hint{font:12px/1.5 Arial,sans-serif;color:#e5d6b7;margin:16px 0 0}
.book-introduction::before{content:"";position:absolute;z-index:-1;inset:-70px -70px;background:radial-gradient(ellipse,#120c08d9 20%,#120c0877 53%,transparent 72%);pointer-events:none}
#book-story:focus-visible{outline:2px solid #ead299;outline-offset:7px}
.fallback{left:32%}
.view-controls{display:flex;justify-content:center;gap:4px;flex-wrap:wrap}
.view-controls button{border:0;border-radius:18px;background:none;color:#e7dfcb;font:500 12px Arial,sans-serif;padding:9px 12px;cursor:pointer;min-height:40px;text-shadow:0 1px 3px #261a12}
.view-controls button.active{background:#ccb175;color:#172333;text-shadow:none}
.view-controls button:hover{color:#fff2d5}
.view-controls button.active:hover{color:#172333}
.view-controls button:disabled{display:none}
.original-link{display:inline-block;margin-top:8px;padding:5px;color:#eadbb8;font-size:12px;text-underline-offset:3px;text-shadow:0 1px 3px #261a12}
.visual:after{content:"";position:absolute;inset:auto 0 0;height:155px;background:linear-gradient(transparent,#07121db0);pointer-events:none;z-index:3}
button:focus-visible,a:focus-visible{outline:2px solid #ead299;outline-offset:4px}
[hidden]{display:none!important}
@media(max-width:899px){.book-introduction{left:14%;width:72%;max-width:none;top:auto;bottom:100px;transform:none}h1{font-size:28px;margin-bottom:10px}#book-story{height:22vh;min-height:130px}.credits-copy{font-size:18px}.credits-copy h2{font-size:25px}#reading-hint{margin-top:5px}.viewer-bottom{left:50%;bottom:12px}.fallback{left:50%;top:29%;height:37%}.book-introduction::before{inset:-30px -40px}.brand span{font-size:21px}.brand img{width:33px;height:38px}.view-controls button{padding:8px;min-height:44px}}
@media(max-width:500px){header{top:max(10px,env(safe-area-inset-top));left:14px;right:14px;height:44px}.book-introduction{left:7%;width:86%}.viewer-bottom{bottom:max(10px,env(safe-area-inset-bottom))}}
@media(max-height:600px) and (min-width:900px){h1{font-size:30px;margin-bottom:12px}.credits-copy{font-size:18px}#book-story{height:240px;min-height:0}}