:root { color-scheme: light; font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif; color: #262624; background: #fafaf9; }
* { box-sizing: border-box; }
body { margin: 0; }
#scroll-space { height: 460vh; height: 460svh; }
.viewport { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 62% 46%, #fff 10%, #fafaf9 70%); }
.intro { position: absolute; left: clamp(24px, 6vw, 100px); top: clamp(30px, 8vh, 90px); z-index: 2; pointer-events: none; }
.eyebrow { font-size: .75rem; letter-spacing: .18em; font-weight: 600; margin: 0 0 20px; color: #797975; }
h1 { font-size: clamp(1.75rem, 3.1vw, 3.2rem); font-weight: 500; letter-spacing: .05em; margin: 0 0 22px; line-height: 1.4; }
#instruction { font-size: 1rem; line-height: 1.9; color: #686861; margin: 0; }
#stage { position: absolute; inset: 0; }
canvas { position: absolute; display: block; width: 100%; height: 100%; }
.ground { position: absolute; width: min(32vw, 390px); height: 7vh; left: 62%; top: 82%; transform: translate(-50%, -50%); background: radial-gradient(ellipse, #66664e16, #66664e00 68%); }
#fallback { width: min(62vw, 600px); height: 70vh; object-fit: contain; position: absolute; left: 62%; top: 50%; transform: translate(-50%,-50%); }
.status { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center; z-index: 3; font-size: .875rem; max-width: 85vw; line-height: 1.7; padding: 12px 18px; background: #fffffff0; border-radius: 6px; }
.status[hidden], [hidden] { display: none !important; }
.loading-mark { display: inline-block; width: 9px; height: 9px; border: 1px solid #8b2524; margin-right: 10px; border-radius: 50%; }
#retry { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); z-index: 4; border: 1px solid #c8c8c3; padding: 12px 20px; border-radius: 4px; background: white; color: #333; font: inherit; cursor: pointer; }
#retry:focus-visible { outline: 2px solid #9c2525; outline-offset: 4px; }
.guide { position: absolute; left: clamp(24px, 6vw, 100px); right: clamp(24px, 6vw, 100px); bottom: max(32px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 26px; z-index: 2; }
.scroll-note { display: flex; align-items: center; gap: 12px; font-size: .875rem; color: #55554f; white-space: nowrap; }
.scroll-icon { border: 1px solid #aaa9a2; height: 26px; width: 17px; border-radius: 9px; position: relative; }
.scroll-icon::after { content: ''; position: absolute; width: 1px; height: 6px; background: #666; top: 5px; left: 7px; }
.progress { height: 1px; flex: 1; background: #dfdfd9; }
#progress-fill { display: block; width: 100%; height: 1px; background: #942426; transform: scaleX(0); transform-origin: left; }
.fraction { color: #77776f; font-size: .875rem; font-variant-numeric: tabular-nums; min-width: 46px; text-align: right; }
.noscript { position: fixed; top: 45%; width: 100%; text-align: center; background: white; padding: 16px; z-index: 10; }
@media (max-width: 700px) {
 .intro { top: max(26px, env(safe-area-inset-top)); left: 24px; }
 .eyebrow { margin-bottom: 9px; font-size: .75rem; }
 h1 { font-size: 1.6rem; margin-bottom: 10px; }
 #instruction { font-size: .875rem; line-height: 1.7; }
 .guide { gap: 16px; bottom: max(24px, env(safe-area-inset-bottom)); }
 .ground { left: 50%; top: 79%; width: 60vw; }
 #fallback { left: 50%; top: 55%; width: 85vw; height: 65vh; }
}
@media (prefers-reduced-motion: reduce) { #scroll-space { height: 100vh; height: 100svh; } .progress,.fraction,.scroll-icon { display: none; } }