*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;background:#97674e}#app{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100vh;height:100dvh}#app:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0.33 0.33 0.33 0 0  0.33 0.33 0.33 0 0  0.33 0.33 0.33 0 0  0 0 0 0 1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");background-size:256px 256px;mix-blend-mode:overlay;opacity:.4}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}canvas:focus-visible{outline:none}.edge-trigger{position:absolute;top:20%;bottom:20%;width:clamp(44px,12vw,180px);border:0;background:transparent;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.edge-trigger--previous{left:0}.edge-trigger--next{right:0}.edge-trigger:disabled{pointer-events:none}.edge-trigger:focus-visible{outline:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.status{position:absolute;inset:50% 1.5rem auto;z-index:1;text-align:center;color:#f7e5d8;font:14px/1.5 system-ui,sans-serif;pointer-events:none}