@layer quartz-base{.corner-fish-shell{--corner-fish-edge:8px;--corner-fish-angle:30deg;--corner-fish-duration:.7s;--corner-fish-color-duration:.15s;--corner-fish-art-width:clamp(9rem, 12vw, 11rem);--corner-fish-art-height:0px;--corner-fish-bounds-width:0px;--corner-fish-bounds-height:0px;z-index:50;width:var(--corner-fish-bounds-width);height:var(--corner-fish-bounds-height);visibility:hidden;pointer-events:none;position:fixed}.corner-fish-shell.is-ready{visibility:visible}.corner-fish-shell.is-unavailable{display:none}.corner-fish-shell--bottom-left{right:auto;bottom:calc(var(--corner-fish-edge) + env(safe-area-inset-bottom,0px));left:calc(var(--corner-fish-edge) + env(safe-area-inset-left,0px));top:auto}.corner-fish-shell--top-right{top:calc(var(--corner-fish-edge) + env(safe-area-inset-top,0px));right:calc(var(--corner-fish-edge) + env(safe-area-inset-right,0px));bottom:auto;left:auto}.corner-fish-shell .corner-fish{width:44px;height:44px;color:inherit;cursor:pointer;isolation:isolate;opacity:.8;pointer-events:auto;touch-action:manipulation;translate:-50% -50%;transform:rotate(var(--corner-fish-angle));transform-origin:50%;transition:opacity var(--corner-fish-color-duration) ease-out;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background:0 0;border:0;border-radius:2px;outline:0;margin:0;padding:0;line-height:0;position:absolute;top:50%;left:50%}.corner-fish-shell .corner-fish:after{width:var(--corner-fish-art-width);height:var(--corner-fish-art-height);background:linear-gradient(90deg, var(--secondary), var(--tertiary));content:"";opacity:.15;pointer-events:none;-webkit-mask-image:var(--corner-fish-image);-webkit-mask-image:var(--corner-fish-image);mask-image:var(--corner-fish-image);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.corner-fish-shell .corner-fish__image{width:var(--corner-fish-art-width);opacity:1;filter:none;pointer-events:none;max-width:none;height:auto;transition:opacity var(--corner-fish-color-duration) ease-out, filter var(--corner-fish-color-duration) ease-out;image-rendering:pixelated;image-rendering:crisp-edges;margin:0;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.corner-fish-shell .corner-fish:focus-visible{outline:2px solid var(--tertiary);outline-offset:4px}@media (hover:hover) and (pointer:fine){.corner-fish-shell .corner-fish{width:var(--corner-fish-art-width);height:var(--corner-fish-art-height)}}.corner-fish-shell .corner-fish:focus-visible,.corner-fish-shell .corner-fish:active,.corner-fish-shell.is-travelling .corner-fish{opacity:1}.corner-fish-shell.is-travelling .corner-fish{pointer-events:none;will-change:transform}.corner-fish-shell.is-travelling{will-change:transform, opacity}@media (max-width:800px){.corner-fish-shell{--corner-fish-art-width:clamp(7rem, 36vw, 9rem)}}}