:root{--bg:#fff;--fg:#111;--mut:#777}
[data-theme=dark]{--bg:#0d0d0d;--fg:#eee;--mut:#888}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font:14px/1.5 system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif}
a{color:inherit;text-decoration:none}
a:hover{opacity:.55}
header,footer{position:fixed;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:baseline;padding:20px 28px;gap:16px}
header{top:0}footer{bottom:0;color:var(--mut);font-size:12px}
header .name{font-weight:600;letter-spacing:.02em}
header .name small{font-weight:400;color:var(--mut);margin-left:10px}
nav{display:flex;gap:22px}
nav a[aria-current=page]{border-bottom:1px solid currentColor}
footer nav{gap:18px}
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:72px 28px 64px;user-select:none;-webkit-user-select:none;touch-action:pan-y}
#stage img{max-width:100%;max-height:100%;object-fit:contain;opacity:0}
#stage img.on{opacity:1}
[data-transition=fade] #stage img{transition:opacity .35s ease}
#stage.native-l{cursor:w-resize}#stage.native-r{cursor:e-resize}
#stage.custom{cursor:none}
#arrow{position:fixed;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;pointer-events:none;z-index:20;opacity:0;transition:opacity .15s;color:var(--fg)}
#arrow.show{opacity:1}
#arrow svg{width:100%;height:100%;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#arrow.left svg{transform:scaleX(-1)}
#count{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:11;color:var(--mut);font-size:12px;font-variant-numeric:tabular-nums}
.text{max-width:560px;margin:0 auto;padding:130px 28px 100px}
.text p{margin:0 0 1.2em;font-size:16px}
.empty{color:var(--mut)}
@media (max-width:600px){header,footer{padding:14px 16px}header .name small{display:none}#stage{padding:60px 8px 56px}}