*{box-sizing:border-box}html,body{background:#050303;width:100%;height:100%;margin:0}body{touch-action:manipulation;font-family:Segoe UI,sans-serif;overflow:hidden}.app{--bg:#140a08;--bg-deep:#080605;--blob-1:145, 96, 68;--blob-2:184, 126, 92;--blob-3:222, 192, 150;--blob-4:89, 49, 37;--blob-5:123, 82, 53;--blob-size:min(50rem, 80vw);--blob-size-large:min(50rem, 100vw);--blend-mode:hard-light;--cursor-opacity:.7;background:linear-gradient(40deg, var(--bg), var(--bg-deep));width:100%;height:100dvh;position:relative;overflow:hidden}.liquid{z-index:0;pointer-events:none;background:linear-gradient(40deg, var(--bg), var(--bg-deep));position:absolute;inset:0;overflow:hidden}.liquid:after{content:"";z-index:1;background:radial-gradient(circle at 20% 20%,#ffffff0a,#0000 24%),radial-gradient(circle at 80% 65%,#ffffff08,#0000 28%);position:absolute;inset:0}.liquid-filter{display:none}.liquid-stage{filter:url(#goo)blur(40px);opacity:.95;width:100%;height:100%;position:relative}.blob{width:var(--blob-size);height:var(--blob-size);top:calc(50% - var(--blob-size) / 2);left:calc(50% - var(--blob-size) / 2);transform-origin:50%;mix-blend-mode:var(--blend-mode);opacity:1;position:absolute}.blob-a{background:radial-gradient(circle at center, rgba(var(--blob-1), .78) 0, rgba(var(--blob-1), 0) 50%) no-repeat;animation:30s infinite drift-vertical}.blob-b{background:radial-gradient(circle at center, rgba(var(--blob-2), .78) 0, rgba(var(--blob-2), 0) 50%) no-repeat;transform-origin:calc(50% - 420px);animation:22s infinite reverse spin}.blob-c{background:radial-gradient(circle at center, rgba(var(--blob-3), .74) 0, rgba(var(--blob-3), 0) 50%) no-repeat;top:calc(50% - var(--blob-size) / 2 + 180px);left:calc(50% - var(--blob-size) / 2 - 420px);transform-origin:calc(50% + 360px);animation:40s linear infinite spin}.blob-d{background:radial-gradient(circle at center, rgba(var(--blob-4), .74) 0, rgba(var(--blob-4), 0) 50%) no-repeat;opacity:.76;transform-origin:calc(50% - 220px);animation:36s infinite drift-horizontal}.blob-e{background:radial-gradient(circle at center, rgba(var(--blob-5), .74) 0, rgba(var(--blob-5), 0) 50%) no-repeat;width:var(--blob-size-large);height:var(--blob-size-large);top:calc(50% - var(--blob-size-large) / 2);left:calc(50% - var(--blob-size-large) / 2);transform-origin:calc(50% - 720px) calc(50% + 160px);animation:20s infinite spin}.liquid-cursor{transform-origin:50%;width:100%;height:100%;mix-blend-mode:var(--blend-mode);opacity:var(--cursor-opacity);background:radial-gradient(circle at center, rgba(var(--blob-3), .82) 0, rgba(var(--blob-3), 0) 50%) no-repeat;will-change:transform;position:absolute;top:-50%;left:-50%}.artwork{pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;z-index:2;filter:drop-shadow(0 24px 40px #0000005c)drop-shadow(0 0 36px #0000002e);display:block;position:absolute;transform:translateZ(0)}.eye{z-index:3;pointer-events:none;position:absolute;transform:translateZ(0)}.bubble-layer{z-index:5;pointer-events:none;position:absolute;inset:0;overflow:hidden}.eye-mask{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:url(/assets/eye-mask.png);mask-image:url(/assets/eye-mask.png);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.iris{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;will-change:transform;width:100%;height:100%;position:absolute;inset:0}.bubble-pop{opacity:0;will-change:transform, opacity;animation:bubble-float var(--pop-duration) cubic-bezier(.2, .72, .24, 1) forwards;animation-delay:var(--pop-delay);position:absolute}.bubble-sprite{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;transform-origin:bottom;filter:drop-shadow(0 18px 18px #0000001f)drop-shadow(0 8px 10px #ffffff0f);width:100%;height:auto;animation:bubble-sway var(--pop-sway-duration) ease-in-out infinite alternate;animation-delay:var(--pop-delay);display:block}@keyframes spin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}@keyframes drift-vertical{0%{transform:translateY(-50%)}50%{transform:translateY(50%)}to{transform:translateY(-50%)}}@keyframes drift-horizontal{0%{transform:translate(-50%)translateY(-10%)}50%{transform:translate(50%)translateY(10%)}to{transform:translate(-50%)translateY(-10%)}}@keyframes bubble-float{0%{opacity:0;transform:translate3d(-50%, 18px, 0) scale(var(--pop-scale-start)) rotate(0deg)}12%{opacity:.96}52%{opacity:.94;transform:translate3d(calc(-50% + var(--pop-drift-mid)), var(--pop-rise-mid), 0) scale(var(--pop-scale-mid)) rotate(var(--pop-tilt-mid))}to{opacity:0;transform:translate3d(calc(-50% + var(--pop-drift)), var(--pop-rise), 0) scale(var(--pop-scale-end)) rotate(var(--pop-tilt))}}@keyframes bubble-sway{0%{transform:translate(0,0)rotate(0)}to{transform:translate3d(var(--pop-sway), -10px, 0) rotate(var(--pop-sway-tilt))}}@media (prefers-reduced-motion:reduce){.blob,.liquid-cursor,.iris{transition:none;animation:none}}@media (width<=640px){.app{--blob-size:min(18rem, 54vw);--blob-size-large:min(24rem, 72vw)}.blob-c{top:calc(50% - var(--blob-size) / 2 + 120px);left:calc(50% - var(--blob-size) / 2 - 220px)}.blob-e{transform-origin:calc(50% - 320px) calc(50% + 120px)}}@supports ((-moz-appearance:none)){.app{--blob-size:min(30rem, 44vw);--blob-size-large:min(40rem, 56vw);--cursor-size-firefox:min(22rem, 34vw)}.liquid-stage{filter:blur(54px);opacity:.92}.blob,.liquid-cursor{mix-blend-mode:screen;background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-radius:50%}.blob-d,.blob-e{opacity:.68}.liquid-cursor{width:var(--cursor-size-firefox);height:var(--cursor-size-firefox);top:calc(var(--cursor-size-firefox) * -.5);left:calc(var(--cursor-size-firefox) * -.5);opacity:.58}@media (width<=640px){.app{--blob-size:min(20rem, 62vw);--blob-size-large:min(28rem, 82vw);--cursor-size-firefox:min(15rem, 48vw)}}}.toolbar{z-index:20;padding:.8rem 1rem calc(.9rem + env(safe-area-inset-bottom,0));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:linear-gradient(#00000005,#00000047);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.85rem 1rem;display:flex;position:fixed;bottom:0;left:0;right:0}.brand{color:#f7f1e8;align-items:center;width:10rem;min-width:10rem;min-height:1.8rem;text-decoration:none;transition:transform .18s,opacity .16s;display:flex}.brand:hover{transform:translateY(-1px)}.brand:focus-visible{outline-offset:3px;outline:2px solid #ffffffbf}.brand-canvas{pointer-events:none;width:100%;height:1.5rem;display:block}.toolbar-actions{flex-wrap:wrap;flex:0 auto;justify-content:flex-end;align-items:center;gap:.7rem;margin-left:auto;display:flex}.icon-button{appearance:none;color:#f7f1e8;cursor:pointer;background:#00000042;border:1px solid #ffffff1f;border-radius:999px;place-items:center;width:3.1rem;height:3.1rem;padding:0;transition:transform .18s,background-color .16s,border-color .16s,color .16s,opacity .16s,box-shadow .18s;display:grid;box-shadow:inset 0 1px #ffffff14,0 8px 20px #00000024}.icon-button[aria-pressed=false]{color:#f7f1e894;background:#00000057;border-color:#ffffff2e}.icon-button:hover{transform:translateY(-1px);box-shadow:inset 0 1px #ffffff1a,0 14px 28px #00000047}.icon-button:active{transform:translateY(0)}.icon-button:focus-visible{outline-offset:2px;outline:2px solid #ffffffbf}.icon{width:1.3rem;height:1.3rem;overflow:visible}.icon-off{opacity:0;transition:opacity .16s}.icon-button[aria-pressed=false] .icon-off{opacity:1}@media (width<=640px){.toolbar{flex-direction:column;justify-content:center;align-items:center;gap:.5rem;padding-inline:.75rem}.brand{order:2;justify-content:center;width:min(10rem,100%);min-width:0}.toolbar-actions{order:1;justify-content:center;width:100%;margin-left:0}.icon-button{width:2.9rem;height:2.9rem}}
