:root{color-scheme:dark;--orange: #ff7a32;--line: rgba(255, 255, 255, .14)}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#000;color:#fff;font-family:system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden;user-select:none;-webkit-tap-highlight-color:transparent}button,input{font:inherit}canvas#stage{position:fixed;inset:0;width:100%;height:100%;object-fit:contain;background:#000}#app{position:fixed;inset:0;pointer-events:none}#topbar,#gate,#status,#center-play,#toast,#rotate,#rec,#library-modal,#settings-modal,#exit-modal{pointer-events:auto}[hidden]{display:none!important}#topbar{position:absolute;top:0;left:0;right:0;padding:12px 14px 8px;background:linear-gradient(to bottom,#000000c7,#0000);transition:opacity .35s ease}#topbar.hidden{opacity:0;pointer-events:none}body.recording #topbar{transition:none;opacity:0;visibility:hidden;pointer-events:none}.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.brand{font-weight:700;letter-spacing:.04em}#song-title{opacity:.8;max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spacer{flex:1}#clock{font-variant-numeric:tabular-nums;opacity:.85}button,.yt input,.server input{border:1px solid var(--line);background:#ffffff0f;color:#fff;border-radius:999px;min-height:42px;padding:0 14px}button{cursor:pointer}button:hover,button:focus-visible{border-color:var(--orange)}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:2px}.is-tv button:focus,.is-tv input:focus,.is-tv summary:focus,.is-tv select:focus,.is-tv a:focus{outline:3px solid var(--orange);outline-offset:2px;border-color:var(--orange)}button[aria-pressed=true]{background:var(--orange);color:#1a0a04;border-color:transparent;font-weight:700}.scrub-wrap{position:relative;width:100%;margin-top:8px}.loop-band{position:absolute;left:0;right:0;top:50%;height:10px;margin-top:-5px;border-radius:999px;pointer-events:none;background:#ffffff14;overflow:hidden}.loop-band:after{content:"";position:absolute;top:0;bottom:0;left:var(--loop-start, 0%);width:var(--loop-width, 100%);background:#ff7a1a73;border-radius:999px}#scrub{position:relative;z-index:1;width:100%;margin:0;accent-color:var(--orange)}#gate{position:absolute;inset:0;display:grid;place-items:center;align-items:safe center;padding:12px;pointer-events:none;background:linear-gradient(to bottom,#00000047,#0000001a 45%,#0003)}#gate.dismissible{pointer-events:auto;cursor:pointer;background:#00000059}#gate.dismissible #panel{cursor:auto}#panel,.card{position:relative;width:min(560px,100%);max-height:calc(100dvh - 24px);overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:#0a0808d1;border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:28px 24px 22px;box-shadow:0 24px 80px #00000073;backdrop-filter:blur(16px)}#panel{pointer-events:auto;touch-action:pan-y;will-change:transform}.gate-drag{margin:-8px -6px 4px;padding:8px 6px 4px}.gate-drag h1{margin:0}#gate-close{position:absolute;top:12px;right:12px;width:40px;min-height:40px;padding:0;border-radius:999px;font-size:22px;line-height:1;z-index:1}h1{margin:0 0 8px;font-size:clamp(28px,4vw,40px);letter-spacing:-.03em}.lead{margin:0 0 18px;line-height:1.45;color:#ffffffc7}.drop{display:grid;gap:4px;place-items:center;text-align:center;border:1.5px dashed rgba(255,122,50,.7);border-radius:16px;padding:22px 16px;background:#ff7a320f;cursor:pointer}.is-tv #drop{display:none!important}.is-phone .drop{border-style:solid}.drop.hot{background:#ff7a322e}.drop span,.hint,summary{color:#ffffff9e}#file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.yt,.server{display:flex;gap:8px;margin-top:12px}.yt input,.server input{flex:1;border-radius:12px;min-width:0}.yt-results{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px;max-height:min(320px,42vh);overflow:auto}.yt-result{display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px;align-items:center;width:100%;text-align:left;border:1px solid rgba(255,255,255,.12);background:#ffffff0d;border-radius:14px;padding:8px;min-height:0;color:inherit}.yt-result:hover,.yt-result:focus-visible{border-color:#ff7a328c;background:#ff7a321f}.yt-thumb{width:88px;height:50px;object-fit:cover;border-radius:10px;background:#00000059}.yt-result-body{display:grid;gap:2px;min-width:0}.yt-result-title{font-weight:600;font-size:14px;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.yt-result-meta{font-size:12px;color:#ffffff8c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#yt-go{background:var(--orange);color:#1a0a04;border:0;font-weight:700}.ghost{background:transparent}.wide{width:100%;margin-top:8px}#library-open{margin-top:8px}.modal{position:absolute;inset:0;z-index:40;display:grid;place-items:center;padding:12px;align-items:safe center}.modal[hidden]{display:none!important}.modal-backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;background:#0000008c;cursor:pointer}.modal-card{position:relative;z-index:1;pointer-events:auto;width:min(560px,100%);max-height:min(720px,calc(100dvh - 24px));overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:grid;gap:12px;align-content:start;background:#0a0808f0;border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:20px 18px 16px;box-shadow:0 24px 80px #00000080;backdrop-filter:blur(18px)}.modal-head{display:flex;align-items:center;gap:12px}.modal-head h2{margin:0;flex:1;font-size:clamp(22px,3vw,28px);letter-spacing:-.03em}#settings-modal.modal-float,#library-modal.modal-float,#exit-modal.modal-float{place-items:center;pointer-events:none}#settings-modal .modal-card,#library-modal .modal-card,#exit-modal .modal-card{pointer-events:auto;touch-action:pan-y;will-change:transform}#settings-modal .modal-backdrop,#library-modal .modal-backdrop,#exit-modal .modal-backdrop{background:#00000038;pointer-events:none;cursor:default}.modal-drag{cursor:grab;user-select:none;touch-action:none;margin:-8px -6px 0;padding:8px 6px;border-radius:14px}@media(orientation:landscape)and (max-height:480px){.modal,#gate{padding:6px 10px}.modal-card,#panel,.card{max-height:calc(100dvh - 12px);padding:14px 14px 12px}.modal-head h2,.gate-drag h1{font-size:clamp(18px,4.5vh,24px)}}.modal-drag:active,.modal-card.is-dragging .modal-drag{cursor:grabbing}.modal-card.is-dragging,#panel.is-dragging{box-shadow:0 28px 90px #000000a6}.exit-card{width:min(420px,100%);max-height:none;text-align:center}.exit-card h2{margin:0;font-size:clamp(22px,3vw,28px);letter-spacing:-.03em}.exit-drag{margin-bottom:0}.exit-actions{display:flex;gap:10px;justify-content:center;margin-top:4px}.exit-actions button{min-width:120px}#library-close,#settings-close{width:40px;min-height:40px;padding:0;border-radius:999px;font-size:22px;line-height:1}.settings-card{width:min(420px,100%)}.settings-section{display:grid;gap:10px}.settings-section h3{margin:0;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#ffffff8c}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.settings-grid button{width:100%;justify-self:stretch}.settings-keys-count{margin:10px 0 0;font-weight:700;font-size:15px}.settings-keys{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;margin-top:8px}.settings-keys-label{color:#ffffffb8;font-size:13px}.settings-keys button{min-width:56px;min-height:48px;font-size:22px;font-weight:700}.is-tv .settings-keys button:focus{outline:3px solid var(--orange);outline-offset:2px;border-color:var(--orange)}.library-path{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.library-path button,.library-crumb{border:0;background:transparent;color:#ffffffb3;min-height:0;padding:4px 8px;border-radius:999px;font-size:13px}.library-path button:hover,.library-path button:focus-visible{background:#ff7a3224;border-color:transparent;color:#fff}.library-crumb[aria-current=page]{color:#fff;font-weight:700}.library-toolbar{display:flex;gap:8px}.library-folder-form{display:flex;gap:8px;align-items:center}.library-folder-form input{flex:1;min-width:0;border:1px solid var(--line);background:#ffffff0f;color:#fff;border-radius:12px;min-height:42px;padding:0 14px}.library-folder-form button[type=submit]{background:var(--orange);color:#1a0a04;border:0;font-weight:700}.library-browser{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-height:min(420px,48vh);overflow:auto}.library-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px 10px 10px 12px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#ffffff0a}.library-item.is-folder{background:#ff7a3214;border-color:#ff7a3247}.library-main{display:grid;gap:2px;justify-items:start;min-width:0;width:100%;border:0;background:transparent;color:inherit;text-align:left;border-radius:10px;padding:2px 4px;min-height:0}.library-main:hover,.library-main:focus-visible{border-color:transparent;background:#ff7a321f}.library-title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.library-meta{font-size:12px;color:#ffffff8c}.library-actions{display:flex;gap:6px;align-items:center;flex-shrink:0}.library-move{max-width:132px;min-height:36px;border-radius:10px;border:1px solid var(--line);background:#ffffff0f;color:#fff;padding:0 8px;font-size:12px}.library-remove{width:36px;min-width:36px;min-height:36px;padding:0;border-radius:999px;font-size:18px;line-height:1;color:#ffffffbf;flex-shrink:0}.is-tv .library-remove:focus,.is-tv .library-remove:focus-visible{border-color:#e10600;color:#fff;outline-color:#e10600}.library-remove:hover,.library-remove:focus-visible{border-color:#e10600;color:#fff}#library-empty{margin:0;text-align:center;padding:18px 8px 8px}details{margin-top:14px}summary{cursor:pointer}.server{flex-direction:column;align-items:stretch;margin-top:10px}.hint{font-size:13px;line-height:1.4}#link-kind{margin:8px 0 0}#link-kind:empty{display:none}#status{position:absolute;inset:0;display:grid;place-items:center;background:#00000059}.bar{height:8px;border-radius:99px;background:#ffffff1a;overflow:hidden;margin:14px 0}#status-fill{height:100%;width:0;background:linear-gradient(90deg,#ff4d2a,#ffb15a);border-radius:inherit}#status-fill.indeterminate{width:40%;animation:slide 1.1s ease-in-out infinite}@keyframes slide{0%{transform:translate(-120%)}to{transform:translate(320%)}}#center-play{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;border:0;background:#ff7a32eb;color:#1a0a04;font-size:34px;padding:0 0 0 4px}#rec{position:absolute;top:16px;left:16px;z-index:2;background:#e10600;color:#fff;font-weight:800;letter-spacing:.08em;border-radius:999px;padding:6px 10px;pointer-events:none}#toast{position:absolute;left:50%;bottom:28px;transform:translate(-50%);max-width:min(520px,calc(100% - 32px));background:#1e0c08eb;border:1px solid rgba(255,122,50,.5);border-radius:12px;padding:12px 16px;text-align:center}#rotate{display:none;position:absolute;inset:0;place-items:center;text-align:center;padding:24px;background:#000000e0;font-size:22px}@media(orientation:portrait)and (max-width:900px){#rotate{display:grid}}