body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{--color-white-noise: hsl(0, 0%, 92%);--color-pink-noise: hsl(350, 60%, 75%);--color-green-noise: hsl(140, 45%, 65%);--color-brown-noise: hsl(30, 45%, 60%);--bg-top: hsl(25, 25%, 18%);--bg-bottom: hsl(25, 30%, 10%);--button-size: min(18vw, 80px);--button-gap: min(6vw, 28px);--depth-button-padding: .5rem 1rem;--depth-font-size: .75rem}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.app{width:100%;height:100%;min-height:100dvh;background:linear-gradient(to bottom,var(--bg-top),var(--bg-bottom));display:flex;justify-content:center;align-items:center}.controls-container{display:flex;flex-direction:column;align-items:center;gap:calc(var(--button-gap) * 1.5)}.title{font-size:2.25rem;font-weight:600;color:#d6ccc2e6;letter-spacing:.05em;margin:0}.depth-selector{display:flex;gap:.25rem;background:#251e1899;padding:.25rem;border-radius:2rem}.depth-button{padding:var(--depth-button-padding);font-size:var(--depth-font-size);font-weight:500;border:none;border-radius:1.5rem;background:transparent;color:#b8a694b3;cursor:pointer;transition:all .2s ease;outline:none;-webkit-tap-highlight-color:transparent;white-space:nowrap}.depth-button:hover{color:#d6ccc2e6}.depth-button.active{background:#604d39cc;color:#efebe7}.depth-button:active{transform:scale(.95)}.noise-stack{display:flex;flex-direction:column;gap:var(--button-gap);align-items:center}.noise-button{position:relative;width:var(--button-size);height:var(--button-size);border-radius:50%;border:none;cursor:pointer;transition:transform .15s ease;outline:none;-webkit-tap-highlight-color:transparent}.noise-button:active{transform:scale(.95)}.noise-button--white{background-color:var(--color-white-noise)}.noise-button--pink{background-color:var(--color-pink-noise)}.noise-button--green{background-color:var(--color-green-noise)}.noise-button--brown{background-color:var(--color-brown-noise)}.noise-button.active:before,.noise-button.active:after{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.noise-button.active:before{animation:pulse-ring 2s ease-out infinite}.noise-button.active:after{animation:pulse-ring 2s ease-out infinite 1s}.noise-button--white.active:before,.noise-button--white.active:after{background-color:var(--color-white-noise)}.noise-button--pink.active:before,.noise-button--pink.active:after{background-color:var(--color-pink-noise)}.noise-button--green.active:before,.noise-button--green.active:after{background-color:var(--color-green-noise)}.noise-button--brown.active:before,.noise-button--brown.active:after{background-color:var(--color-brown-noise)}@keyframes pulse-ring{0%{transform:translate(-50%,-50%) scale(1);opacity:.4}to{transform:translate(-50%,-50%) scale(2.2);opacity:0}}.noise-button-inner{position:relative;z-index:1;width:100%;height:100%;border-radius:50%}.noise-button--white .noise-button-inner{background-color:var(--color-white-noise)}.noise-button--pink .noise-button-inner{background-color:var(--color-pink-noise)}.noise-button--green .noise-button-inner{background-color:var(--color-green-noise)}.noise-button--brown .noise-button-inner{background-color:var(--color-brown-noise)}@media(max-width:480px){:root{--button-size: 20vw;--button-gap: 7vw;--depth-button-padding: .4rem .75rem;--depth-font-size: .7rem}}@media(min-width:481px)and (max-width:768px){:root{--button-size: 15vw;--button-gap: 5vw;--depth-button-padding: .45rem .9rem;--depth-font-size: .72rem}}@media(min-width:769px){:root{--button-size: 90px;--button-gap: 32px;--depth-button-padding: .5rem 1.25rem;--depth-font-size: .8rem}}@supports (padding: max(0px)){.app{padding-top:max(0px,env(safe-area-inset-top));padding-bottom:max(0px,env(safe-area-inset-bottom))}}