body,html{padding:0;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;background-color:#0a0a0a;color:beige}*{box-sizing:border-box}.container{min-height:100vh;background:#0a0a0a;padding:0 .5rem 150px;display:flex;align-items:flex-start}main{padding:1rem 0;flex:1 1;justify-content:center;align-items:center;align-content:center}footer,main{display:flex;flex-direction:column}footer{position:fixed;bottom:0;left:0;right:0;width:100%;height:auto;min-height:150px;border-top:2px solid #5d4426;background-color:#0a0a0a;z-index:500}.footer-content{display:flex;justify-content:space-between;align-items:center;height:70px;padding:0 20px;gap:10px;flex-wrap:wrap}footer .waveform-container{width:100%;height:65px;margin:0;position:relative;flex-shrink:0}.footer-text{padding:10px 20px;text-align:center;flex-shrink:0}.rank-text{margin-bottom:5px}.footer-text .drag-text{margin:5px 0}.visitor-count{margin:0}h3{font-size:clamp(14px,2vw,19px);margin:20px 0;position:relative;z-index:200;display:inline-block;background-color:#0a0a0a}strong{color:#95682a;text-decoration:none}button{border-radius:20px;text-align:center;max-width:300px;width:90%;height:auto;padding:8px 20px;transition:all .5s;margin:10px 0;background-color:#1a1a1a;border:2px solid #946928;color:beige;position:relative;z-index:200}.stop-button{max-width:none;width:auto;margin:0;padding:6px 16px;white-space:nowrap;font-size:clamp(10px,2.5vw,14px)}button:hover{background-color:#946928;color:#0a0a0a;cursor:pointer}.title{margin:0 0 5px;line-height:1.15;font-size:48px;position:relative;z-index:200;display:inline-block;background-color:#0a0a0a}.description,.title{text-align:center}.description{line-height:1.5;font-size:1.5rem}code{background:#fafafa;border-radius:5px;padding:.75rem;font-size:1.1rem;font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace}.grid{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;max-width:800px;margin-top:3rem}.card p{margin:5px}.drag{border-radius:15px;-webkit-mask-image:radial-gradient(ellipse,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse,#000 60%,transparent 100%);width:60%;height:auto;transition:opacity .3s ease-in-out}.drag,.drag-text{position:relative;z-index:200}.drag-text{font-size:clamp(14px,2vw,18px);margin:0 0 25px;display:inline-block;background-color:#0a0a0a}button .drag-text{margin:0;font-size:clamp(12px,1.5vw,16px);background:none;display:block}@media screen and (min-width:1300px){.drag{width:513px;height:530px}}@media screen and (min-width:534px){.drag{width:307px;height:312px}}@media screen and (max-width:768px){.footer-content{flex-direction:column;height:auto;min-height:70px;padding:10px;gap:10px}.visitor-count{font-size:14px}.toggle-text{font-size:12px}}.waveform-container{width:60%;height:140px;margin:20px 0;display:flex;align-items:center;justify-content:center;background:transparent;padding:0;box-sizing:border-box}.waveform-container.peak-meter{background:transparent;position:relative;overflow:visible}.waveform-canvas{width:100%;height:100%;border-radius:4px}@media screen and (min-width:1300px){main .waveform-container{width:600px}}@media screen and (min-width:534px) and (max-width:1299px){main .waveform-container{width:400px}}.tennis-ball{position:fixed;width:30px;height:30px;background:radial-gradient(circle at 35% 35%,#fcfca4,#dede4e 20%,#c4c431 40%,#9a9a22 70%,#6e6e18 100%);border-radius:50%;box-shadow:inset -3px -3px 6px rgba(0,0,0,.5),inset 2px 2px 3px hsla(0,0%,100%,.3),2px 2px 12px rgba(0,0,0,.6);top:-40px;z-index:150;pointer-events:none}.tennis-ball:before{width:100%;height:100%;background:repeating-linear-gradient(45deg,transparent,transparent 3px,hsla(0,0%,100%,.1) 0,hsla(0,0%,100%,.1) 4px),repeating-linear-gradient(-45deg,transparent,transparent 3px,rgba(0,0,0,.1) 0,rgba(0,0,0,.1) 4px);opacity:.6}.tennis-ball:after,.tennis-ball:before{content:"";position:absolute;border-radius:50%}.tennis-ball:after{width:26px;height:2px;background:rgba(0,0,0,.2);left:2px;top:50%;transform:translateY(-50%) rotateX(75deg)}.good-boy-toggle{position:relative}.toggle-label{display:flex;align-items:center;gap:10px;cursor:pointer}.toggle-text{color:beige;font-size:14px;font-weight:500}.toggle-text strong{color:#946928}.toggle-input{position:absolute;opacity:0;width:0;height:0}.toggle-slider{position:relative;width:44px;height:24px;background-color:#333;border-radius:34px;transition:background-color .3s;border:2px solid #946928}.toggle-slider:before{content:"";position:absolute;height:16px;width:16px;left:2px;bottom:2px;background-color:beige;border-radius:50%;transition:transform .3s}.toggle-input:checked+.toggle-slider{background-color:#946928}.toggle-input:checked+.toggle-slider:before{transform:translateX(20px)}