@import "https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500&display=swap";*{box-sizing:border-box}html,body{color:#f8f7ee;background:#b5b7a8;width:100%;height:100%;margin:0;overflow:hidden}body{font-family:Noto Serif JP,Hiragino Mincho ProN,serif;font-weight:400}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}button:disabled{cursor:default}:is(button:focus-visible,a:focus-visible){outline-offset:6px;outline:1px solid #fff}a{color:inherit;text-decoration:none}.river{isolation:isolate;height:100svh;min-height:450px;position:relative;overflow:hidden}.landscape{z-index:-3;background:#a9b2a0 -webkit-image-set(url(/assets/river.webp) 1x type("image/webp")) 50%/cover no-repeat;background:#a9b2a0 image-set("/assets/river.webp" 1x type("image/webp")) 50%/cover no-repeat;transition:filter 1.8s,transform 1.8s;position:absolute;inset:-2%}.atmosphere{pointer-events:none;z-index:-2;background:linear-gradient(#1423184d,#0000 40% 72%,#1c1d167a);position:absolute;inset:0}.canvas-mount{z-index:0;touch-action:none;position:absolute;inset:0}.canvas-mount canvas{touch-action:none;width:100%;height:100%;display:block}header{width:100%;padding:max(27px,env(safe-area-inset-top)) 36px;z-index:5;justify-content:space-between;align-items:center;display:flex;position:absolute;top:0}.park{letter-spacing:2px;text-shadow:0 1px 9px #26382b;font:10px/1.5 Arial,sans-serif}.park span{opacity:.45;margin:0 9px}.sound{background:#14271714;border:1px solid #f8f7ee50;border-radius:50%;place-items:center;width:44px;height:44px;display:grid}.sound svg{width:18px;height:18px}.intro{text-align:center;pointer-events:none;text-shadow:0 2px 22px #142d1ac0;width:100%;position:absolute;top:17%;left:0}.eyebrow{letter-spacing:.28em;opacity:.9;margin:0 0 21px;font-size:11px}h1{letter-spacing:.26em;margin:0 0 22px;padding-left:.26em;font-size:clamp(30px,4vw,45px);font-weight:300}.invitation{letter-spacing:.2em;margin:0;font-size:12px}.bottom{bottom:max(18px,env(safe-area-inset-bottom));pointer-events:none;text-align:center;z-index:6;width:100%;position:absolute;left:0}.bottom button,.bottom a{pointer-events:auto}.choose p,.quiet-status{letter-spacing:.18em;text-shadow:0 1px 7px #242920;margin:0 0 10px;font-size:12px}.choose small{font-size:10px;display:block}.continue{opacity:0;color:#3c4338;letter-spacing:.16em;background:#f2f0e5eb;border-radius:2px;min-width:166px;margin:4px 0 9px;padding:13px 29px;font-size:12px;transition:opacity .6s;box-shadow:0 2px 22px #353b3012}.continue.visible{opacity:1}.continue span{margin-left:23px}.continue:disabled{opacity:.5}.continue:not(.visible){visibility:hidden}.return{letter-spacing:.15em;background:#25302538;border:1px solid #ffffff70;margin:15px;padding:12px 28px;font-size:13px}.return span{margin-left:15px}footer{justify-content:center;gap:30px;margin-top:16px;display:flex}footer button{letter-spacing:.09em;opacity:.8;padding:8px;font-size:9px}.phase-place .intro{top:15%}.place-word{letter-spacing:.16em;font-size:14px}.phase-cross .intro{animation:10s ease-in-out forwards cross-text;top:37%}.cross-word{letter-spacing:.3em;font-size:17px}.crossing{letter-spacing:.12em;flex-direction:column;align-items:center;gap:12px;width:100%;font-size:10px;display:flex;position:absolute;bottom:100px}.crossing>span{opacity:.7}.crossing button{border-bottom:1px solid #fff7;padding:12px 22px;font-size:12px}.crossing button span{margin-left:20px}.gesture-note{color:#43473f;letter-spacing:.08em;background:#f3f0e8e6;width:max-content;max-width:90%;padding:15px 21px;font-size:11px;line-height:2;position:absolute;top:24%;left:50%;transform:translate(-50%);box-shadow:0 6px 30px #27322515}.gesture-note small{opacity:.6;margin-top:5px;font-size:9px;display:block}.keyboard-note{text-align:center;pointer-events:none;opacity:.8;width:100%;font-size:9px;position:absolute;bottom:120px}.error{pointer-events:auto;color:#544b3c;background:#f4efe5ee;max-width:360px;margin:0 auto 20px;padding:12px 17px;font-size:12px;line-height:1.8}.error button{margin:8px auto 0;font-size:11px;text-decoration:underline;display:block}.modal-backdrop{z-index:20;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#2631256e;place-items:center;padding:25px;display:grid;position:absolute;inset:0}.modal{color:#42483d;background:#f3f0e8;width:100%;max-width:450px;max-height:90svh;padding:45px 34px;position:relative;overflow:auto;box-shadow:0 20px 80px #15210e2e}.modal h2{letter-spacing:.16em;margin:0 0 29px;font-size:24px;font-weight:400}.modal p{letter-spacing:.07em;font-size:13px;line-height:2.1}.modal .eyebrow{letter-spacing:2px;font:9px Arial,sans-serif}.modal hr{border:0;border-top:1px solid #535a4230;margin:28px 0}.modal .implementation{opacity:.8;font-size:10px;line-height:2}.close{width:34px;height:34px;font:26px Arial,sans-serif;position:absolute;top:9px;right:13px}.text-link{border-bottom:1px solid #42483d70;margin-top:15px;padding:9px 0;font-size:12px}.access-panel{z-index:9;color:#434b3d;background:#f3f0e8f5;width:min(90%,390px);padding:25px;position:absolute;top:35%;left:50%;transform:translate(-50%)}.access-panel p{font-size:12px;line-height:1.9}.stone-options{grid-template-columns:1fr 1fr;gap:5px;display:grid}.stone-options button{text-align:left;border-bottom:1px solid #434b3d25;padding:10px 5px;font-size:10px}.stone-options button[aria-pressed=true]{background:#434b3d1c}@keyframes cross-river{0%{transform:scale(1)}45%{filter:blur(.2px);transform:scale(1.26)translateY(3%)}80%{filter:blur(1px);transform:scale(1.45)translateY(6%)}95%{filter:blur(6px)brightness(1.2)}to{filter:blur();transform:scale(1)}}@keyframes cross-text{0%,to{opacity:0}25%,70%{opacity:1}}@media (max-width:600px){header{padding-left:22px;padding-right:18px}.intro{top:18%}.eyebrow{font-size:10px}h1{letter-spacing:.2em;font-size:29px}.invitation{font-size:11px}.landscape{background-position:52%}.park{letter-spacing:1.6px;font-size:9px}.bottom{bottom:max(16px,env(safe-area-inset-bottom))}footer{margin-top:11px}.keyboard-note{display:none}}@media (prefers-reduced-motion:reduce){.phase-cross .landscape,.phase-cross .intro{animation:none}.landscape{transition:none}}.park,.sound,.intro,.choose p,.choose small,.quiet-status,.return,footer button,.crossing>span,.crossing button,.keyboard-note{color:#fffdf5;background:var(--ink-surface);text-shadow:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.park{letter-spacing:1.5px;border-radius:2px;padding:10px 13px;font-size:11px}.park span{opacity:1;color:#d3d8cd}.sound{border-color:#fffdf580}.intro{border-radius:3px;width:max-content;max-width:calc(100% - 44px);padding:23px 29px 25px;left:50%;transform:translate(-50%);box-shadow:0 4px 26px #14201415}.intro:empty{display:none}.intro .eyebrow{opacity:1;margin-bottom:17px;font-size:12px}.intro h1{font-weight:400}.intro .invitation{font-size:13px;line-height:1.8}.intro .place-word,.intro .cross-word{margin:0;line-height:1.9}.phase-place .intro,.phase-cross .intro{padding:14px 21px}.choose p,.quiet-status{border-radius:2px;max-width:calc(100% - 40px);margin:0 auto 10px;padding:9px 16px;font-size:13px;line-height:1.6;display:table}.choose small{max-width:calc(100% - 40px);margin:6px auto;padding:7px 12px;font-size:11px;line-height:1.6;display:table}.continue{background:var(--paper-surface);color:#303c31;font-size:13px;box-shadow:0 2px 15px #18221b30}.continue:disabled{opacity:1;color:#687065;background:#e3e3dbef}.return{border-color:#fffdf580;min-height:44px}footer{gap:12px}footer button{opacity:1;letter-spacing:.06em;border-radius:2px;min-height:40px;padding:10px 14px;font-size:11px;line-height:1.5}.crossing>span{opacity:1;border-radius:2px;padding:7px 12px;font-size:11px}.crossing button{border:1px solid #fffdf580;border-radius:2px;min-height:44px}.keyboard-note{opacity:1;border-radius:2px;width:max-content;max-width:90%;padding:9px 13px;font-size:11px;line-height:1.7;left:50%;transform:translate(-50%)}.gesture-note,.access-panel,.error{background:var(--paper-surface);color:#303c31}.gesture-note{font-size:12px}.gesture-note small{opacity:1;color:#56624f;font-size:11px}.stone-options button{min-height:44px;font-size:11px}.modal .implementation{opacity:1;font-size:11px}@media (max-width:600px){.intro{padding:20px 21px 22px}.intro h1{letter-spacing:.16em;margin-bottom:17px;font-size:clamp(23px,6.8vw,29px)}.intro .eyebrow{font-size:11px}.intro .invitation{font-size:12px}.park{letter-spacing:1px;padding:9px 10px;font-size:10px}.phase-place .intro{max-width:calc(100% - 36px);padding:12px 15px}.place-word{letter-spacing:.1em;font-size:12px}footer button{padding:9px 12px;font-size:11px}}.river{--ink-surface:#18221b47;--paper-surface:#f7f5ecc7}.park,.sound,.intro,.choose p,.choose small,.quiet-status,.return,footer button,.crossing button,.keyboard-note{text-shadow:0 1px 3px #101c16,0 0 9px #101c16a6;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.intro{box-shadow:none;background:#18221b33}.phase-cross .intro{animation:30s ease-in-out forwards cross-text}@media (prefers-reduced-motion:reduce){.phase-cross .intro{animation:none}}.landscape{z-index:-4}.far-landscape{z-index:-3;opacity:0;pointer-events:none;background:#a9b2a0 url(/assets/far-bank.webp) 50%/cover no-repeat;position:absolute;inset:-2%}.phase-cross .canvas-mount{opacity:0;transition:opacity .8s}.phase-cross .landscape{animation:30s ease-in-out forwards photo-depart}.phase-cross .far-landscape{animation:30s ease-in-out forwards photo-arrive}.phase-place .far-landscape,.phase-saving .far-landscape,.phase-watch .far-landscape{opacity:1}@keyframes photo-depart{0%{transform:scale(1)}70%,to{transform:scale(1.35)translateY(3%)}}@keyframes photo-arrive{0%,45%{opacity:0;transform:scale(1.15)}85%{opacity:1}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.phase-cross .landscape{animation:none}.phase-cross .far-landscape{opacity:1;animation:none}}.far-landscape{background-image:url(/assets/far-bank-upstream.webp)}.cross-video{object-fit:cover;z-index:1;opacity:0;pointer-events:none;width:100%;height:100%;transition:opacity .45s;position:absolute;inset:0}.phase-cross .cross-video{opacity:1}.phase-cross .landscape,.phase-cross .far-landscape{animation:none;transform:none}.phase-cross .far-landscape{opacity:0}.phase-cross .intro{z-index:2;animation:8s ease-in-out forwards cross-text}.crossing{z-index:3}.phase-place .far-landscape{animation:.65s ease-out shore-reveal}@keyframes shore-reveal{0%{transform:scale(1.035)translateY(1%)}to{transform:none}}@media (prefers-reduced-motion:reduce){.cross-video{transition:none}.phase-place .far-landscape,.phase-cross .intro{animation:none}}