:root{--ink:#111827;--muted:#5b6472;--surface:#f8fafc;--panel:#fff;--line:#334155;--water:#0ea5e9;--water-deep:#0369a1;--green:#16a34a;--amber:#f59e0b;--red:#dc2626;--shadow:0 24px 70px #0f172a24}*{box-sizing:border-box}html,body{min-height:100%}body{color:var(--ink);background:linear-gradient(120deg,#0ea5e921,#0000 32%),linear-gradient(300deg,#f59e0b21,#0000 36%),#eef2f7;margin:0;font-family:Noto Sans JP,Hiragino Kaku Gothic ProN,Meiryo,system-ui,sans-serif}button{font:inherit}.shell{width:min(1220px,100% - 40px);min-height:100vh;margin:0 auto;padding:22px 0}.siteHeader{justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:20px;display:flex}.kicker,.viewerTop p{color:var(--water-deep);letter-spacing:0;text-transform:uppercase;margin:0 0 6px;font-size:.84rem;font-weight:900}h1,h2{letter-spacing:0;margin:0}h1{font-size:clamp(1.8rem,3.3vw,3.3rem);line-height:1.04}h2{font-size:clamp(1.28rem,2.5vw,2.2rem);line-height:1.12}.headerEquations{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.headerEquations span{white-space:nowrap;background:#ffffffb8;border:1px solid #11182724;border-radius:8px;padding:10px 12px;font-weight:900}.viewer{box-shadow:var(--shadow);background:#ffffffc7;border:1px solid #1118271f;border-radius:8px;padding:14px}.viewer:fullscreen{background:#eef2f7;border:0;border-radius:0;width:100vw;height:100vh;padding:24px;overflow:auto}.viewerTop,.viewerBottom{justify-content:space-between;align-items:center;gap:18px;display:flex}.fullscreenButton{background:var(--ink);color:#fff;cursor:pointer;border:0;border-radius:8px;flex:none;padding:10px 14px;font-weight:900}.slideFrame{margin:16px 0;position:relative}.ratioStage{aspect-ratio:16/9;background:radial-gradient(circle at 16% 18%,#bbf7d08c,#0000 24%),radial-gradient(circle at 84% 82%,#fef08a61,#0000 26%),#f5f7ef;border:1px solid #11182721;border-radius:8px;width:min(100%,1080px);margin:0 auto;overflow:hidden}.viewer:fullscreen .ratioStage{width:min(100vw - 48px,135.111vh);height:min(76vh,56.25vw - 27px);margin:0 auto}.ratioStage svg{width:100%;height:100%;display:block}.navButton{z-index:2;width:clamp(40px,4.3vw,58px);height:clamp(40px,4.3vw,58px);color:var(--ink);cursor:pointer;background:#ffffffeb;border:1px solid #11182724;border-radius:50%;font-size:clamp(1.75rem,3.2vw,3.2rem);font-weight:400;line-height:.72;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 12px 30px #0f172a2e}.navButton:hover,.fullscreenButton:hover,.dot:hover{filter:brightness(.96)}.navLeft{left:18px}.navRight{right:18px}.viewerBottom strong{color:var(--water-deep);flex:none;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:clamp(.95rem,1.7vw,1.42rem)}.viewerBottom p{max-width:760px;color:var(--muted);margin:0;font-size:clamp(.9rem,1.2vw,1rem);font-weight:700;line-height:1.65}.dots{gap:9px;display:flex}.dot{cursor:pointer;background:#cbd5e1;border:0;border-radius:50%;width:13px;height:13px;padding:0}.dot.active{background:var(--water-deep)}svg text{fill:var(--ink);letter-spacing:0;text-anchor:middle;font-weight:900}.landStrip{fill:#a16207;opacity:.42}.landStrip.upper{filter:drop-shadow(0 6px #78350f3d)}.riverBody{fill:#0ea5e9;stroke:#0369a1;stroke-width:8px;filter:drop-shadow(0 16px 18px #0f172a21)}.riverSurface{fill:none;stroke:#ffffffe6;stroke-width:8px;stroke-linecap:round;stroke-dasharray:92 54;animation:2.5s linear infinite riverDash}.riverSurface.second{stroke-width:6px;opacity:.74;animation-delay:-1.1s}.compactRiver .riverBody{stroke-width:7px}.riverArrow{fill:none;stroke:#fff;stroke-width:18px;stroke-linecap:round;opacity:.95;animation:1.6s ease-in-out infinite arrowPulse}.speedArrow path{fill:none;stroke:#fff;stroke-width:20px;stroke-linecap:round;opacity:.95;animation:1.5s ease-in-out infinite arrowPulse}.speedArrow text,.speedNote{fill:#075985;paint-order:stroke;stroke:#f5f7ef;stroke-width:8px;font-size:34px}.rockBarrier path,.wideRockBarrier path{fill:#9ca3af;stroke:#4b5563;stroke-width:9px;stroke-linejoin:round;filter:drop-shadow(0 8px 8px #0f172a33)}.rockBarrier path:nth-child(2){fill:#b8bec7}.rockBarrier .rapid,.wideRockBarrier .rapid{fill:none;stroke:#fff;stroke-width:13px;stroke-linecap:round;opacity:.92;filter:none}.rockBarrier text{fill:#7f1d1d;font-size:48px}.wideRockBarrier text{fill:#fff;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:58px}.flowMeter circle{fill:#fff;stroke:var(--water-deep);stroke-width:12px}.flowMeter path{fill:none;stroke:var(--green);stroke-width:14px;stroke-linecap:round;stroke-linejoin:round}.flowMeter text{fill:var(--water-deep);paint-order:stroke;stroke:#f5f7ef;stroke-width:8px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:34px}.largeEquation{fill:var(--water-deep);paint-order:stroke;stroke:#f5f7ef;stroke-width:8px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:48px}.riverLabel{fill:#365314;paint-order:stroke;stroke:#f5f7ef;stroke-width:8px;font-size:40px}.sceneCaption{fill:var(--muted);paint-order:stroke;stroke:#f5f7ef;stroke-width:8px;font-size:36px}.combineArrow{fill:none;stroke:var(--amber);stroke-width:16px;stroke-linecap:round;animation:1.8s ease-in-out infinite arrowDrop}@keyframes riverDash{to{stroke-dashoffset:-100px}}@keyframes arrowDrop{50%{transform:translateY(18px)}}@keyframes arrowPulse{50%{opacity:.55}}@media (max-width:900px){.siteHeader,.viewerTop,.viewerBottom{flex-direction:column;align-items:flex-start}.headerEquations{justify-content:flex-start}.viewerBottom strong{white-space:normal}}@media (max-width:620px){.shell{width:min(100% - 18px,1480px);padding:16px 0}.viewer{padding:10px}.navLeft{left:8px}.navRight{right:8px}}