html{scroll-snap-type:y proximity}@media (min-width:720px) and (prefers-reduced-motion:no-preference){html{scroll-snap-type:y mandatory}}body.page-learn{background:radial-gradient(1200px 600px at 50% -10%, #163a4d 0%, var(--bg) 60%)}.scene{scroll-snap-align:start;max-width:640px;min-height:calc(100dvh - 60px);padding:14px calc(var(--sar) + 16px) 40px calc(var(--sal) + 16px);grid-template-rows:auto 1fr auto;gap:10px;margin:0 auto;display:grid}.scene h2{margin:8px 0 0;font-size:26px;line-height:1.15}.scene .pic{justify-content:center;align-items:center;min-height:260px;display:flex}.scene .pic svg{width:100%;max-width:520px;height:auto;overflow:visible}.scene p.say{margin:0;font-size:20px;line-height:1.45}.scene .controls{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.scene .next{color:var(--muted);align-items:center;gap:6px;margin-left:auto;font-size:14px;text-decoration:none;display:inline-flex}.scene .step{display:none}@media (prefers-reduced-motion:reduce){.scene[data-animated] .step{display:inline-flex}}.scene .hint{color:var(--muted);font-size:14px}.scene:not(.is-visible) svg *{animation-play-state:paused!important}.earth-spin{transform-origin:160px 130px;animation:14s linear infinite spin}.orbit{transform-origin:160px 130px;animation:28s linear infinite spin}.house-spin{transform-origin:160px 130px;animation:14s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.counter text{opacity:0;font-size:22px;font-weight:800}.counter .hi{animation:7s step-end infinite flip}.counter .lo{animation:7s step-end 3.5s infinite flip}@keyframes flip{0%{opacity:1}50%{opacity:0}to{opacity:0}}.bulge{transform-origin:160px 130px;transition:transform .9s}.scene[data-mode=half] .bulge{transform:scale(.86,1.14)}.scene[data-mode=half] .moon-pos{transform:rotate(-90deg)}.moon-pos{transform-origin:160px 130px;transition:transform .9s}.scene[data-mode=aligned] .spring-label,.scene[data-mode=half] .neap-label{opacity:1}.spring-label,.neap-label{opacity:0;font-size:18px;font-weight:800;transition:opacity .6s}.water{animation:12s ease-in-out infinite tide}.hand{transform-origin:300px 40px;animation:6s linear infinite spin}@keyframes tide{0%{transform:translateY(0)}25%{transform:translateY(-70px)}50%{transform:translateY(-10px)}75%{transform:translateY(-55px)}to{transform:translateY(0)}}.scene[data-paused="1"] .water,.scene[data-paused="1"] .hand{animation-play-state:paused}.dot{animation:4s linear infinite rush}.dot:nth-child(2){animation-delay:-1s}.dot:nth-child(3){animation-delay:-2s}.dot:nth-child(4){animation-delay:-3s}.dot:nth-child(5){animation-delay:-.5s}.dot:nth-child(6){animation-delay:-2.5s}@keyframes rush{0%{transform:translate(0)}36%{transform:translate(118px)}46%{transform:translate(192px)}to{transform:translate(310px)}}.scene[data-dir=ebb] .dot{animation-direction:reverse}.scene[data-dir=ebb] .left-level{transform:translateY(26px)}.scene[data-dir=ebb] .right-level{transform:translateY(-26px)}.left-level,.right-level{transition:transform .8s}@media (prefers-reduced-motion:reduce){.earth-spin,.orbit,.house-spin,.counter text,.water,.hand,.dot{animation:none!important}.counter .hi{opacity:1}.scene[data-step="1"] .orbit{transform:rotate(120deg)}.scene[data-step="2"] .orbit{transform:rotate(240deg)}.scene[data-step="1"] .house-spin{transform:rotate(90deg)}.scene[data-step="2"] .house-spin{transform:rotate(180deg)}.scene[data-step="1"] .counter .hi{opacity:0}.scene[data-step="1"] .counter .lo{opacity:1}.scene[data-step="1"] .water{transform:translateY(-70px)}.scene[data-step="2"] .water{transform:translateY(-30px)}.scene[data-step="1"] .dot{transform:translate(150px)}.scene[data-step="2"] .dot{transform:translate(300px)}}.live .big{font-variant-numeric:tabular-nums;font-size:40px;font-weight:800}.live .rows{grid-template-columns:1fr 1fr;gap:8px;margin:8px 0;display:grid}.live .rows div{border:1px solid var(--line);border-radius:12px;padding:10px}.live .rows .k{color:var(--muted);font-size:13px}.live .rows .v{font-size:20px;font-weight:700}.moons{align-items:flex-end;gap:4px;height:150px;display:flex}.moons .d{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;gap:4px;min-width:0;display:flex}.moons .d .bar{background:var(--accent);width:70%;height:var(--h);border-radius:3px 3px 0 0}.moons .d svg{width:100%;max-width:20px;height:auto}.moons .d.spring .bar{background:var(--accent-2)}.safe{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.safe div{text-align:center;border:1px solid var(--line);border-radius:14px;padding:14px 8px}.safe .ico{font-size:44px}.safe b{margin-top:6px;font-size:15px;display:block}