:root{font-family:Inter,system-ui,sans-serif}*{margin:0;box-sizing:border-box}.page{min-height:100dvh;display:grid;place-items:center;overflow:hidden;position:relative}.content{position:relative;display:flex;flex-direction:column;align-items:center}.action{appearance:none;border:none;border-radius:.9rem;padding:clamp(1.2rem,2vw,1.6rem) clamp(1.5rem,3vw,2rem);font-size:clamp(1.2rem,1.8vw,1.5rem);font-weight:600;letter-spacing:.01em;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#ffffffb3;box-shadow:0 2px 8px #0000001a;text-shadow:none;width:280px;cursor:pointer;position:relative;transition:all .3s ease}.action:after{pointer-events:none;content:"";position:absolute;top:120%;left:0;height:100%;width:100%;background-color:var(--v343e4049);filter:blur(2em);opacity:0;transform:perspective(1.5em) rotateX(35deg) scaleY(.6);transition:opacity .3s ease}.action:hover{color:#fff;background:var(--v343e4049);border:1px solid var(--v343e4049);-webkit-backdrop-filter:none;backdrop-filter:none;text-shadow:0 0 .3em oklch(.562 0 89.876);box-shadow:0 0 1em .25em var(--v343e4049),0 0 4em 2em var(--v343e4049),inset 0 0 .75em .25em #ffffff4d}.action:hover:after{opacity:.7}.action:active{box-shadow:0 0 .6em .2em var(--v343e4049),0 0 2.5em 1.5em var(--v343e4049);transition:all .1s ease}.flavor-text{position:absolute;top:calc(100% + 1rem);left:50%;transform:translate(-50%);color:#ffffffb3;font-size:clamp(.875rem,1.2vw,1rem);opacity:.8;text-align:center;white-space:nowrap}.title{position:absolute;top:1rem;left:50%;transform:translate(-50%);color:#ffffffb3;font-size:clamp(4rem,4vw,3rem);font-weight:700;letter-spacing:-.02em;text-align:center;white-space:nowrap}.attribution{position:absolute;bottom:1.5rem;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:.4rem;text-align:center;color:#ffffffb3;font-size:clamp(.75rem,1vw,.875rem);opacity:.6;transition:transform .3s ease}.palette-container:hover~.attribution{transform:translateY(-6rem)}.attribution a{display:inline-flex;align-items:center;color:inherit;text-decoration:none;transition:opacity .2s ease}.attribution a:hover{opacity:1}.vue-logo{width:1.2em;height:1.2em;fill:currentColor;transform:translateY(.1em)}.palette-container{position:fixed;bottom:1em;left:50%;transform:translate(-50%) translateY(100%);width:min(90vw,40rem);height:7rem;border-radius:1em 1em 0 0;overflow:hidden;box-shadow:0 -.625rem 1.25rem #0000004d;transition:transform .3s ease;z-index:1000}.palette-container:hover{transform:translate(-50%) translateY(1rem)}@media(hover:none)and (pointer:coarse){.palette-container{display:none}}.palette{display:flex;height:100%;width:100%}.color{height:100%;flex:1;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;letter-spacing:.0625em;transition:flex .1s linear;cursor:pointer;touch-action:manipulation;position:relative;overflow:hidden}.color span{opacity:0;transition:opacity .1s linear;font-size:.625rem;text-shadow:0 .0625rem .125rem oklch(0 0 0 / .5);word-break:break-all;padding:.25em;text-align:center}.color:hover,.color:active{flex:2;box-shadow:0 -.4375rem 1.8125rem #80808033}.color:hover span,.color:active span{opacity:1}.color:after{content:"";position:absolute;width:100%;height:100%;background:#ffffff4d;border-radius:50%;transform:scale(0);opacity:0;pointer-events:none}.color.copied:after{animation:ripple .6s ease-out}.ripple{position:absolute;left:0;top:0;width:100%;height:100%;background:#ffffff4d;border-radius:50%;transform:scale(0);opacity:0;pointer-events:none;animation:ripple .6s ease-out}@keyframes ripple{0%{transform:scale(0);opacity:.7}to{transform:scale(2.5);opacity:0}}