.dtr-water{--start:40px;--finish:30px;--boat:112px}.dtr-lane{border-bottom:3px dotted #ffffff8c;position:relative}@media (min-width:640px){.dtr-water{--start:64px;--finish:46px;--boat:160px}}@media (min-width:1024px){.dtr-water{--boat:190px}}.dtr-lane:last-child{border-bottom:none}.dtr-water{background:radial-gradient(60px 6px at 20% 30%,#ffffff2e,#0000 70%) 0 0/260px 80px,radial-gradient(80px 6px at 70% 70%,#ffffff24,#0000 70%) 0 0/340px 90px,linear-gradient(#5cc3e8,#2a86c8) 0 0/100% 100%;animation:9s linear infinite dtr-water}.dtr-active-lane{background-color:#fff6c22e;box-shadow:inset 0 0 0 3px #ffd65ed9}.dtr-post{left:calc(var(--start) + var(--boat) + (100% - var(--start) - var(--finish) - var(--boat)) * var(--p))}.dtr-boat{width:var(--boat);bottom:2px;left:calc(var(--start) + (100% - var(--start) - var(--finish) - var(--boat)) * var(--p));transition:left .7s cubic-bezier(.3,1.15,.5,1);animation:2.6s ease-in-out infinite dtr-bob;position:absolute}.dtr-finish{background:repeating-conic-gradient(#151b46 0 25%, #fff 0 50%) 0 0 / 14px 14px}.dtr-paddle{transform:rotate(0)}.dtr-rowing .dtr-paddle{animation:.5s ease-in-out infinite dtr-row}.dtr-foam{animation:.5s ease-out infinite dtr-foam}.dtr-glow{animation:1.4s ease-in-out infinite dtr-glow}.dtr-drum{animation:.3s ease-out dtr-drum-hit}.dtr-dot-hit{animation:.3s cubic-bezier(.2,.9,.3,1.4) dtr-dot-pop}@keyframes dtr-water{0%{background-position:0 0,0 0,0 0}to{background-position:-260px 0,-340px 0,0 0}}@keyframes dtr-bob{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-3px)rotate(-.6deg)}}@keyframes dtr-row{0%,to{transform:rotate(-18deg)}50%{transform:rotate(22deg)}}@keyframes dtr-foam{0%{opacity:.9;transform:translate(0)}to{opacity:0;transform:translate(-10px)}}@keyframes dtr-glow{0%,to{opacity:.35}50%{opacity:.85}}@keyframes dtr-drum-hit{0%{transform:scale(1.18)}to{transform:scale(1)}}@keyframes dtr-dot-pop{0%{transform:scale(.4)}to{transform:scale(1)}}