html, body { width:100%; height:100%; margin:0; padding:0; overflow:hidden; }
body { left:auto; zoom:1; transform:none; background:#111; }
.nein-viewport { position:fixed; inset:0; display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior:contain; scrollbar-width:none; touch-action:pan-x; }
.nein-viewport::-webkit-scrollbar { display:none; }
.nein-frame { flex:0 0 100%; height:100%; position:relative; overflow:hidden; scroll-snap-align:start; scroll-snap-stop:always; contain:layout paint; content-visibility:auto; }
section.nein-canvas { position:absolute; left:50%; top:50%; width:2000px; height:1000px; margin:0; transform:translate(-50%,-50%) scale(var(--stage-scale, .7)); transform-origin:center; background:url('image/web-bk.jpg') center / 2000px 1000px no-repeat; color:#eee; text-shadow:1px 1px 2px rgba(5,187,234,.75),-1px -1px 2px rgba(5,187,234,.75),1px -1px 2px rgba(5,187,234,.75),-1px 1px 2px rgba(5,187,234,.75); }
.nein-canvas:not(.active) * { animation-play-state:paused!important; }
#background-switch, #effect-switch { z-index:20!important; transform:scale(var(--stage-scale, .7)); transform-origin:top right; top:calc(20px * var(--stage-scale, .7))!important; }
#background-switch { right:calc((100vw - 2000px * var(--stage-scale, .7)) / 2 + 20px * var(--stage-scale, .7))!important; }
#effect-switch { right:calc((100vw - 2000px * var(--stage-scale, .7)) / 2 + 120px * var(--stage-scale, .7))!important; }
#blurree { z-index:-1; filter:blur(9px); opacity:.6; pointer-events:none; }
.nein-narration-hidden .dialogue, .nein-narration-hidden .narration { opacity:0!important; }
@media (prefers-reduced-motion:reduce) { .nein-viewport { scroll-behavior:auto; } .nein-canvas * { animation-play-state:paused!important; } }