:root{--text-color:#3b3939;--selected-text-background-color:#5f5d5d;--selected-text-color:white;--ocean-height:365px;--ocean-width:500px;--wave-stroke-color:rgba(0,0,0,0.5);--wave-stroke-width:2px;--ocean-border-radius:4px;--font-size:0.8rem;--title-height:22px}.ocean-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ocean-container,.project-content span{font-family:Space Mono,monospace;letter-spacing:-1px;font-size:var(--font-size);color:var(--text-color)}.container{flex-direction:column;gap:5px}.container,.ocean{position:relative;display:flex;justify-content:center;align-items:center}.ocean{width:var(--ocean-width);height:var(--ocean-height);border:.8px solid var(--text-color);border-radius:var(--ocean-border-radius);overflow:clip;cursor:crosshair;transition:border .3s ease}.ocean:has(.memory.selected){cursor:pointer!important}.ocean svg{position:absolute;bottom:0;left:0;margin:-25px -25px -10px;transform-origin:center center;transition:opacity .5s ease-out}.ocean path{transition:transform .1s ease-in-out,filter .1s ease-in-out}.ocean path.wave-hovered{transform:scaleY(1.02) translateY(-5px);filter:brightness(.7)}.memory:focus{outline:none}.memory:focus-visible .shape{outline:2px solid var(--text-color);outline-offset:2px;border-radius:4px}.memory:focus-visible .shape path{stroke:var(--text-color);stroke-width:4px;paint-order:stroke}.ocean{animation:border-opacity 1s ease-in-out 1 forwards}@keyframes border-opacity{0%{border:.8px solid rgba(0,0,0,.1)}}.ocean .bubbles path.wave-hovered,.ocean .memory path.wave-hovered{transform:none;filter:none}.ocean [class*=memory]:hover{cursor:pointer}#overlay div{opacity:0;transition:opacity .8s ease}#memory-content{position:absolute;height:var(--ocean-height);width:var(--ocean-width);display:flex;flex-direction:column;align-items:center;justify-content:center;visibility:hidden}#memory-content img{filter:drop-shadow(0 0 4px #787a7a);border-radius:4px;max-width:calc(var(--ocean-width) * .9);max-height:calc(var(--ocean-height) * .9);height:auto;width:auto}#overlay{position:absolute;height:var(--ocean-height);width:var(--ocean-width);display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:rgba(237,237,235,0);border:.8px solid var(--text-color);border-radius:var(--ocean-border-radius);transition:background-color .5s ease,backdrop-filter .5s ease;pointer-events:none}#overlay.show{background-color:rgba(237,237,235,.9)}#overlay.show-memory:has(#memory-content.show-content){backdrop-filter:contrast(1.05) brightness(.95);background-color:rgba(237,237,235,.5)}.ocean-container:has(#overlay.show) .container .ocean{cursor:default}.ocean-container:has(#overlay.show) .container .ocean svg{pointer-events:none}.ocean-container:has(#overlay.show-memory) .container .ocean{cursor:default}.ocean-container:has(#overlay.show-memory) .container .ocean svg{pointer-events:none}#overlay .show-content{visibility:visible;opacity:1}#overlay #memory-content.show-content{animation:grow .5s ease,float 20s ease-in-out infinite;animation-delay:0s,.5s}@keyframes grow{0%{transform:scale(.8);filter:grayscale(80%);opacity:0}30%{transform:scale(.8);filter:grayscale(80%);opacity:0}70%{transform:scale(1.02)}to{transform:scale(1);opacity:1}}@keyframes float{0%{transform:translateY(0) translateX(0)}25%{transform:translateY(-8px) translateX(2px)}50%{transform:translateY(4px) translateX(-1px)}75%{transform:translateY(-6px) translateX(3px)}to{transform:translateY(0) translateX(0)}}#title{position:absolute;margin-top:calc(var(--ocean-height) + var(--title-height) + 24px);width:max-content;text-align:center;min-height:var(--title-height)}.container span{transition:opacity .5s ease-out}.container .active-old{opacity:.6}.container .done{opacity:.8}.container .active-fresh{opacity:.3}.noise{position:absolute;width:var(--ocean-width);height:var(--ocean-height);pointer-events:none;z-index:1000;background-image:url(/ocean/noise.png);background-size:100%;background-repeat:no-repeat;mix-blend-mode:color-burn}.ocean-container:has(.show-memory) .noise{opacity:0}.top-noise{position:absolute;width:var(--ocean-width);height:var(--ocean-height);pointer-events:none;z-index:1000;background-image:url(/ocean/noise.png);background-size:100%;background-repeat:no-repeat;mix-blend-mode:color-burn;opacity:0}.ocean-container:has(.show-memory) .top-noise{opacity:.5}@keyframes dash{0%{stroke-dashoffset:4000px}to{stroke-dashoffset:0}}@keyframes dash-wave-420{0%{stroke-dashoffset:5000px}to{stroke-dashoffset:0}}.ocean path{stroke:var(--wave-stroke-color);stroke-width:var(--wave-stroke-width);stroke-dasharray:4000px;stroke-dashoffset:0px;animation:dash 3s ease-out 1 forwards}.wave-420 path{stroke-dasharray:5000px;animation:dash-wave-420 .5s ease-out 1 forwards}.ocean .memory g{filter:drop-shadow(0 0 20px rgba(255,255,255,.3))}#source{position:fixed;bottom:10px;color:rgb(173,168,168)}.project-desc{width:500px}@media screen and (max-width:580px){:root{--ocean-height:250px;--ocean-width:320px}.project-desc{width:340px}}:root{--bubble-animation-duration:8s;--bubble-animation-delay:0s}.bubbles path{pointer-events:none;transform-origin:center;animation:flicker var(--bubble-animation-duration) ease-in-out infinite;animation-delay:var(--bubble-animation-delay)}@keyframes flicker{50%{opacity:.8}}.bubbles circle,.bubbles ellipse{transform-box:fill-box;transform-origin:center;animation:pulse 1s ease-in-out infinite,opacity 20s ease-in-out infinite;animation-delay:var(--delay,0s);stroke:#000;stroke-width:2px}@keyframes opacity{0%,to{opacity:.2}50%{opacity:0}70%{opacity:.4}}@keyframes pulse{0%,to{transform:scale(.2)}50%{transform:scale(.1)}70%{transform:scale(.05)}}.memory{transform-origin:center;filter:brightness(1) drop-shadow(0 10px 10px rgba(255,255,255,0))}.memory .wrapper{transform:translateY(-5px);transform-origin:center;animation:float-along-path 40s ease-in-out infinite;offset-distance:0;transform-box:fill-box;will-change:transform,offset-distance}@keyframes float-along-path{0%{offset-distance:0}50%{offset-distance:100%}to{offset-distance:0}}.memory .shape{transform:scale(0);opacity:0}.memory.revealed .shape{opacity:1;transform:scale(.5);transition:transform .3s ease-in-out,filter .3s ease-in-out}.memory.revealing .shape{opacity:1;animation:memory-spring .6s ease-out forwards}@keyframes memory-spring{0%{transform:scale(.2)}60%{transform:scale(.6)}80%{transform:scale(.45)}to{transform:scale(.5)}}.memory:hover .child{transform-origin:center;cursor:pointer}.memory:hover .child .shape{transform:scale(.7) rotate(10deg);filter:drop-shadow(0 0 10px rgba(255,255,255,.8))}.memory.selected,.memory:hover{cursor:pointer!important}.memory.selected{filter:brightness(1.05) drop-shadow(0 10px 10px rgba(255,255,255,.5))}.memory.selected .child{transform-origin:center}.memory.selected .child .shape{transform:scale(.8) rotate(10deg);filter:drop-shadow(0 0 10px rgba(255,255,255,.8))}.memory.selected .wrapper,.memory:hover .wrapper{animation-play-state:paused!important}.memory-info.song{text-align:center;opacity:0;transition:opacity .8s ease 1.2s}.container:has(.memory.song:hover) .memory.song-info{opacity:.7}.memento-overlay-container{position:fixed;z-index:101;transition:opacity .3s ease;pointer-events:none;opacity:0}.memory{offset-distance:0;offset-rotate:0deg;transform-box:fill-box;will-change:transform,offset-distance}[class*=wave-]:hover{transform-origin:center;transform:var(--transform-value,translateX(10px))}[class*=wave-]{transition:transform 1s ease}