body{background:#000;color:#fff;display:flex;align-items:center;justify-content:center;height:100vh;margin:0;font-family:Meow Script,cursive;overflow:hidden}#app{text-align:center}.login-container{display:flex;flex-direction:column;align-items:center;gap:1rem}button{font-family:Raleway,sans-serif;font-size:1.1rem;padding:.75rem 1.75rem;background-color:#1db954;color:#000;border:none;border-radius:999px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}button:hover{transform:scale(1.03);box-shadow:0 0 20px #1db95466}button:active{transform:scale(.98)}.login-message{margin:0;max-width:320px;color:#bbb;font-size:.9rem}.record{position:relative;width:calc(100vh - 60px);height:calc(100vh - 60px);border-radius:50%;border:20px solid #222;background:#111;overflow:hidden;perspective:1200px;box-shadow:0 0 20px #000c,0 0 60px #00000080,0 0 120px #0000004d;animation:wobble 20s linear infinite;animation-play-state:running}.record.paused{animation-play-state:paused}.record.interactive{cursor:pointer}.record-faces{position:absolute;inset:0;border-radius:50%;transform-style:preserve-3d;transform:rotateY(0);transition:transform .7s cubic-bezier(.4,.2,.1,1);will-change:transform;z-index:0}.record.is-flipping .record-faces{transform:rotateY(180deg)}.record-face{position:absolute;inset:0;border-radius:50%;background-position:center;background-size:cover;backface-visibility:hidden}.record-face-back{transform:rotateY(180deg)}.record:after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:repeating-radial-gradient(rgba(255,255,255,.15) 0px,rgba(255,255,255,.15) 1px,transparent 1px,transparent 3px),repeating-radial-gradient(rgba(0,0,0,.15) 0px,rgba(0,0,0,.15) 1px,transparent 1px,transparent 3px);z-index:2}.record:before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#0000 70%,#0009);pointer-events:none;z-index:1}.label{position:absolute;top:50%;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px;background:radial-gradient(circle,#333,#111 80%);border-radius:50%;z-index:3}.label:after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.15),transparent 70%);pointer-events:none}#info{position:absolute;bottom:10px;right:20px;font-size:2em;color:#cfb9a2;text-shadow:0 0 10px rgba(0,0,0,.7);font-weight:600}@keyframes wobble{0%{transform:rotate(0) translate(0)}25%{transform:rotate(90deg) translate(.5px)}50%{transform:rotate(180deg) translate(0)}75%{transform:rotate(270deg) translate(-.5px)}to{transform:rotate(360deg) translate(0)}}