html,body{width:100%;height:100%;overflow:hidden;background:#25231e}
#app{height:100dvh;width:100vw;position:relative;overflow:hidden;display:grid;place-items:center;isolation:isolate}
.scene-backdrop{position:absolute;inset:-20px;z-index:-1;background-position:center;background-size:cover;filter:blur(16px) brightness(.65);pointer-events:none}
.plate{width:min(calc(100vw - 12px),calc((100dvh - 12px)*1.5));height:auto;max-height:calc(100dvh - 12px);margin:0;will-change:transform;box-shadow:0 0 32px #0005}
.plate>img{width:100%;height:auto;object-fit:contain}.scene-dock{position:fixed;inset-inline-end:12px;top:8px;display:flex;gap:5px;opacity:.25;transition:opacity .15s;z-index:2}.scene-dock:hover,.scene-dock:focus-within{opacity:1}.scene-dock button{background:#f7f3e9;border:1px solid #655b4c;border-radius:4px;padding:.4rem .7rem;font-size:.85rem;box-shadow:0 2px 6px #0003}
#page-reader{position:fixed;inset:0;margin:auto;width:min(1120px,96vw);max-width:96vw;height:92dvh;max-height:92dvh;overflow:auto;padding:0;border:2px solid #776c5b;background:#f7f3e9;overscroll-behavior:contain}
#page-reader .content{max-width:none;margin:0;padding:1.5rem 2rem}#page-reader .tools{padding-top:3.5rem}.reader-close{position:sticky;top:7px;float:right;margin:7px;z-index:3;padding:.5rem 1rem;background:#171d24;color:#fff;border:1px solid #fff;border-radius:4px}#page-reader:dir(rtl) .reader-close{float:left}
#page-reader::backdrop{background:#141a20b0;backdrop-filter:blur(3px)}
@media(max-width:700px){.scene-dock{opacity:1}.scene-dock button{min-height:44px}.plate{width:calc(100vw - 12px)}#page-reader .content{padding:1rem}#page-reader{width:98vw;max-width:98vw;height:96dvh;max-height:96dvh}}
@media(prefers-reduced-motion:reduce){.plate,.scene-backdrop{transform:none!important;will-change:auto}.scene-dock{transition:none}}

.scene-dock{top:50%;transform:translateY(-50%);flex-direction:column;opacity:.85}.scene-dock button{width:44px;height:44px;padding:0;font-size:1.2rem}
.scene-status{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);margin:0;padding:.5rem 1rem;background:#151c22;color:#fff;border-radius:4px;z-index:4;pointer-events:none}.scene-status:empty{display:none}

/* Owner correction: edge-to-edge page width; preserve the entire composition. */
html{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
body{height:auto;min-height:100dvh;overflow:visible;margin:0}
#app{height:auto;min-height:100dvh;width:100%;display:block;overflow:hidden}
.plate{display:block;width:100%;max-width:none;height:auto;max-height:none;margin:0;box-shadow:none}
.plate>img{display:block;width:100%;height:auto;max-height:none}
.scene-backdrop{position:fixed}
@media(max-width:700px){.plate{width:100%;max-height:none}}

/* Direct page navigation is present in HTML before any scripts load. */
.device-navigation{display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:20;min-height:56px;padding:4px 12px;background:#f7f3e9;color:#171d24;border-bottom:1px solid #776c5b;font:16px/1.3 system-ui,sans-serif}
.device-navigation details{margin-inline-end:auto}
.device-navigation summary,.device-navigation>a{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:8px 12px;cursor:pointer;border:1px solid #776c5b;border-radius:4px;text-decoration:none;list-style:none}
.device-navigation summary::-webkit-details-marker{display:none}
.device-page-list{position:absolute;inset-inline:0;top:100%;max-height:75vh;overflow-y:auto;overscroll-behavior:contain;background:#f7f3e9;box-shadow:0 8px 18px #0005;padding:8px 12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.device-page-list>a,.device-languages>a{display:flex;align-items:center;min-height:44px;padding:10px;border:1px solid #a69b89;text-decoration:none;overflow-wrap:anywhere}
.device-page-list [aria-current=page]{background:#171d24;color:#fff}
.device-languages{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
@media(max-width:500px){.device-navigation{padding:4px 6px;gap:6px;font-size:15px}.device-navigation summary,.device-navigation>a{padding:8px}.device-page-list{grid-template-columns:1fr}}
/* Server-rendered device layouts remain usable when scripts fail or are disabled. */
#app{display:none}
#device-content{background:#f7f3e9;color:#171d24;min-height:calc(100vh - 56px)}
.device-art img{display:block;width:100%;height:auto}
.device-reading{padding:20px;font:17px/1.6 system-ui,sans-serif;overflow-wrap:anywhere}
.device-reading h1{font-size:clamp(28px,4vw,48px);line-height:1.15}.device-reading h2{font-size:24px;line-height:1.3}
.device-cards{display:grid;grid-template-columns:1fr;gap:16px}.device-cards article{padding:16px;border:1px solid #c6b8a3;background:#efe6d5;border-radius:8px}
.device-reading a{display:inline-flex;align-items:center;min-height:44px;padding:8px;color:#673e1e}
.device-reading label{display:block;margin:12px 0}.device-reading input:not([type=checkbox]),.device-reading textarea,.device-reading select{display:block;width:100%;font:inherit;min-height:44px;padding:10px;border:1px solid #8a7b66;background:#fffaf1;box-sizing:border-box}
.device-reading button{font:inherit;min-height:44px;padding:10px 14px;margin:6px;border:1px solid #7a6349;border-radius:5px;background:#202932;color:white}
.device-related{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.device-motion{display:flex;gap:24px;height:150px;align-items:center;justify-content:center;background:#28323b;border-radius:8px}.device-motion span{width:26px;height:26px;background:#e8aa58;border-radius:50%;animation:device-wave 1.6s ease-in-out infinite;animation-play-state:paused}.device-motion span:nth-child(2){animation-delay:.3s}.device-motion span:nth-child(3){animation-delay:.6s}.device-motion.running span{animation-play-state:running}@keyframes device-wave{50%{transform:translateY(-40px)}}
@media(min-width:720px) and (max-width:1180px){.device-reading{padding:32px;font-size:18px}.device-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.device-reading>header{max-width:850px}.device-art{max-height:none}}
@media(min-width:1181px){.device-reading{max-width:1200px;margin:auto;padding:40px}.device-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.device-motion span{animation:none}}

html[data-layout=tablet] .device-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-layout=phone] .device-cards{grid-template-columns:1fr}

.device-art{position:relative}.device-art-link{position:absolute;display:block;touch-action:manipulation}.device-art-link:focus-visible{outline:3px solid #075da8;outline-offset:-3px}

/* Native vertical comic browsing on phone and tablet. No gesture interception. */
.mobile-comic-stream{display:none}
@media(max-width:1180px),(pointer:coarse){
html,body{height:auto!important;overflow-y:auto!important;touch-action:pan-y pinch-zoom}
.mobile-comic-stream{display:block;width:100%;background:#101820}
.mobile-comic-page{margin:0;padding:0;width:100%;border-top:2px solid #101820}
.mobile-comic-page a{display:block;color:#fff;text-decoration:none}
.mobile-comic-page img{display:block;width:100%;height:auto;max-width:100%}
.mobile-comic-page span{display:block;padding:16px 18px;min-height:52px;font:700 16px/1.4 Arial,sans-serif;background:#101820;color:#fff}
}
