:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,sans-serif;background:#000;overflow:hidden}.screen-wrapper{position:relative;width:100vw;height:100vh;background:#000;overflow:hidden}.jukebox-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:1}.cutout-content{position:absolute;z-index:2;inset:27% 12% 5%;display:flex}.jukebox-inner{width:100%;height:100%;display:flex;flex-direction:column;color:#fff;background:transparent;min-height:0}.jukebox-header{margin-bottom:8px}.jukebox-logo{font-family:Pacifico,Brush Script MT,cursive;font-size:40px;letter-spacing:.12em;text-align:center;margin:0 0 10px}.top-row{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:17px}.playback-controls{display:flex;align-items:center;gap:8px}.playback-button{width:40px;height:40px;border-radius:999px;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}.playback-button:disabled{opacity:.4;cursor:default}.playlist-button{border:none;border-radius:999px;padding:10px 18px;background:#fff;color:#000;font-weight:600;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}.now-next{display:flex;flex-direction:column;align-items:flex-end;color:#eee}.now-playing,.next-up{margin:2px 0}.highlight{font-weight:600}.track-grid{flex:1;min-height:0;display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:space-between;gap:14px;padding-bottom:8px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.track-card{flex:0 0 calc((100% - 2 * 14px) / 3);display:flex;flex-direction:column;background:#111;border-radius:18px;overflow:hidden;border:2px solid #2a2a2a;box-shadow:0 4px 14px #000000b3}.album-art-wrapper{position:relative;width:100%;padding-top:100%;overflow:hidden;background:#222}.album-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.track-like-button{width:32px;height:32px;border-radius:50%;border:none;background:#28c45e;color:#000;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;padding:0}.track-like-button:active{transform:scale(.95)}.icon-img{width:20px;height:20px;filter:brightness(0) invert(1);pointer-events:none}.track-control-icon:active{transform:scale(.92)}.track-text{padding:6px 8px 2px;color:#fff}.track-title{font-size:15px;font-weight:700;text-transform:uppercase;margin-bottom:2px}.track-artist{font-size:13px;opacity:.8}.vote-icon{display:inline-flex}.jukebox-footer{display:flex;align-items:center;justify-content:space-between;font-size:20px;margin-top:4px}.footer-controls{display:flex;gap:8px}.nav-button{width:50px;height:50px;border-radius:999px;border:none;background:#f89b2a;color:#000;font-size:16px;cursor:pointer}.footer-hint{flex:1;text-align:center;font-weight:600;text-transform:uppercase}.jukebox-inner{min-height:0}.jukebox-main{flex:1;margin-top:8px;margin-bottom:8px;display:flex;overflow:hidden}.next-badge{position:absolute;top:10px;left:10px;padding:4px 8px;border-radius:999px;background:#ffd54a;color:#000;font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;z-index:2}.settings-buttons{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}.settings-save{padding:8px 16px;border-radius:999px;border:none;background:#28c45e;color:#000;font-weight:600;cursor:pointer}.settings-reset{padding:8px 16px;border-radius:999px;border:none;background:#f89b2a;color:#000;font-weight:600;cursor:pointer}.settings-cancel{padding:8px 16px;border-radius:999px;border:none;background:#444;color:#fff;font-weight:500;cursor:pointer}.settings-button{width:40px;height:40px;border-radius:999px;border:none;background:#333;color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-right:8px}.settings-overlay{position:absolute;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:50}.settings-panel{background:#111;border-radius:16px;padding:16px 20px;max-width:420px;width:90%;box-shadow:0 10px 30px #000c;border:1px solid #444;color:#fff}.settings-panel h2{margin-top:0;margin-bottom:10px}.settings-label{display:block;font-size:14px;margin-bottom:4px}.settings-input{width:100%;padding:8px 10px;border-radius:8px;border:1px solid #555;background:#222;color:#fff;font-size:14px;margin-bottom:12px}.settings-checkbox{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:12px}.settings-checkbox input[type=checkbox]{width:16px;height:16px}.settings-buttons{display:flex;justify-content:flex-end;gap:8px}.settings-save,.settings-cancel{border-radius:999px;border:none;padding:8px 14px;font-size:14px;cursor:pointer}.settings-save{background:#28c45e;color:#000;font-weight:600}.settings-cancel{background:#444;color:#fff}.playback-button svg,.settings-button svg{width:24px;height:24px;stroke:#fff;fill:#fff}.playback-button,.settings-button{width:44px;height:44px;border-radius:999px;border:none;background:#ffffff1f;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}.playback-button:active,.settings-button:active,.track-like-button:active{transform:scale(.95)}.icon-img{width:22px;height:22px;object-fit:contain;filter:brightness(0) invert(1);pointer-events:none}.track-overlay{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#0000008c}.track-like-button{width:32px;height:32px;border-radius:50%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}.track-votes{font-size:15px;font-weight:700;color:#fff;min-width:22px;text-align:center}.vote-pop{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:42px;font-weight:800;color:#fff;text-shadow:0 0 10px rgba(0,0,0,.8);pointer-events:none;animation:votePop 1.5s ease-out forwards;z-index:3}@keyframes votePop{0%{transform:scale(.3);opacity:0}15%{transform:scale(1.2);opacity:1}70%{transform:scale(1);opacity:1}to{transform:scale(.6) translateY(40px);opacity:0}}.track-card-big{transform:scale(1.15);z-index:2}.track-card-bump{animation:cardBump .6s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes cardBump{0%{transform:scale(1.25)}60%{transform:scale(.95)}to{transform:scale(1)}}