:root{color:#f1f0f5;font-synthesis:none;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#101218;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(at 15% 0,#29213f66,#0000 48%),#101218;margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled,input:disabled{cursor:default;opacity:.4}button:focus-visible,input:focus-visible,a:focus-visible{outline-offset:4px;outline:2px solid #c2afff}button{color:inherit;border:0}main{max-width:1280px;margin:auto;padding:30px 42px}header{border-bottom:1px solid #ffffff10;justify-content:space-between;align-items:center;padding-bottom:25px;display:flex}.brand{letter-spacing:2px;color:inherit;align-items:center;gap:13px;font-size:16px;font-weight:800;text-decoration:none;display:flex}.brand-light{color:#b6b2c3;margin-left:3px;font-weight:350}.brand-icon{color:#171124;background:#b6a0ed;border-radius:12px;place-items:center;width:40px;height:40px;font-size:29px;display:grid}.pill{letter-spacing:1.3px;color:#bdb6d4;white-space:nowrap;border:1px solid #ffffff15;border-radius:20px;padding:7px 10px;font-size:10px}.intro{justify-content:space-between;align-items:end;padding:33px 0 28px;display:flex}.eyebrow{letter-spacing:2.1px;color:#a7a0ba;margin:0 0 12px;font-size:10px;font-weight:600}h1{letter-spacing:-1.8px;margin:0;font-size:clamp(30px,4vw,49px);font-weight:580;line-height:1.12}h1 span{color:#b7a1ed}.intro-note{color:#8d889b;text-align:right;margin-bottom:4px;font-size:13px;line-height:1.7}.layout{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px;display:grid}.panel{background:#191b24;border:1px solid #ffffff0c;border-radius:23px;padding:25px;overflow:hidden}.panel-heading{justify-content:space-between;align-items:center;gap:8px;display:flex}.panel-heading .eyebrow{margin:0}.panel-heading h2{margin:0;font-size:19px;font-weight:550}.panel-heading h2 span{color:#aaa5ba;vertical-align:middle;background:#272933;border-radius:7px;margin-left:8px;padding:3px 8px;font-size:11px;display:inline-block}.record-stage{place-items:center;height:260px;margin:10px 0;display:grid;position:relative}.record{z-index:1;background:repeating-radial-gradient(circle,#121319 0 2px,#24242e 3px,#121319 4px);border:1px solid #3e394e;border-radius:50%;place-items:center;width:217px;height:217px;display:grid;transform:rotate(-18deg);box-shadow:14px 18px 35px #0006}.record-label{color:#33244e;background:#b7a1ed;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:7px;width:95px;height:95px;display:flex}.record-label span{letter-spacing:3px;font-size:19px;font-weight:800}.record-label i{background:#14131b;border-radius:50%;width:11px;height:11px}.record-label small{letter-spacing:1px;font-size:6px}.orbit{border:1px solid #75628538;border-radius:50%;width:270px;height:190px;position:absolute;transform:rotate(-32deg)}.orbit-two{width:300px;height:220px;transform:rotate(33deg)}.spark{color:#c2afea;z-index:2;font-size:28px;position:absolute}.spark-one{top:45px;right:13%}.spark-two{font-size:18px;bottom:31px;left:12%}.track-info{text-align:center;min-height:100px}.track-info h2{overflow-wrap:anywhere;margin:0 0 8px;font-size:23px;font-weight:550;line-height:1.35}.track-info p:last-child{color:#9690a5;margin:0;font-size:12px;line-height:1.6}.transport{justify-content:center;align-items:center;gap:25px;margin:21px 0;display:flex}.icon-button{color:#d6d2e0;background:#252731;border-radius:50%;width:40px;height:40px}.play-button{color:#271b3c;background:#c5b1f5;border-radius:50%;width:59px;height:59px;font-size:23px;box-shadow:0 0 28px #ae81ff16}.volume{color:#aaa4ba;border-top:1px solid #ffffff0a;align-items:center;gap:13px;padding-top:19px;font-size:11px;display:flex}.volume input{accent-color:#bda5f3;flex:1;min-width:40px;height:4px}.volume output{text-align:right;min-width:35px}.queue{flex-direction:column;display:flex}.text-button{color:#a9a0bd;background:0 0;padding:8px 0;font-size:11px}#add-song{margin-top:24px}.search{background:#11131b;border:1px solid #ffffff13;border-radius:12px;align-items:center;gap:9px;padding:7px 8px 7px 14px;display:flex}.search>span{color:#9c94ad;font-size:23px}.search input{color:#eeebf5;background:0 0;border:0;flex:1;min-width:0;padding:9px 0;font-size:12px}.search input::placeholder{color:#797385}.search button{color:#21162f;background:#bba2f0;border-radius:8px;width:34px;height:34px;font-size:24px}#add-song>p{color:#797587;margin:10px 2px;font-size:10px;line-height:1.5}#tracks{max-height:380px;margin:17px 0;padding:0;list-style:none;overflow:auto}#tracks:empty{margin:0}#tracks li{border-bottom:1px solid #ffffff08;align-items:center;gap:13px;min-height:66px;padding:9px 0;display:flex}.track-number{color:#817b92;font-variant-numeric:tabular-nums;font-size:11px}.queue-title{overflow-wrap:anywhere;flex:1;min-width:0;font-size:13px;line-height:1.5}.queue-actions{gap:3px;display:flex}.queue-actions button{color:#bfb5d6;background:#252731;border-radius:7px;width:28px;height:28px;font-size:12px}#empty{text-align:center;flex:1;min-height:280px;padding:65px 12px}#empty[hidden]{display:none}.empty-icon{color:#bba2f0;background:#bba2f008;border:1px solid #bba2f030;border-radius:19px;place-items:center;width:61px;height:61px;margin:0 auto 21px;font-size:30px;display:grid}#empty h3{margin:0 0 10px;font-size:17px;font-weight:500}#empty p{color:#8b859a;margin:0;font-size:12px;line-height:1.8}.queue-footer{color:#9b94ac;border-top:1px solid #ffffff0a;align-items:center;gap:8px;margin-top:auto;padding-top:17px;font-size:11px;display:flex}.presence-dot{background:#b5a1dc;border-radius:50%;width:6px;height:6px}.page-footer{letter-spacing:1px;color:#6e687d;justify-content:space-between;gap:15px;padding:24px 0 8px;font-size:9px;display:flex}.notice{color:#c4b8dc;background:#bc9fee09;border:1px solid #bc9fee25;border-radius:10px;margin-bottom:18px;padding:11px 15px;font-size:12px;line-height:1.6}.notice.error{color:#f0b6bc;background:#e77c9010;border-color:#e77c9033}.sr-only{clip:rect(0,0,0,0);width:1px;height:1px;position:absolute;overflow:hidden}.spinning{animation:18s linear infinite spin}@keyframes spin{to{transform:rotate(342deg)}}@media (prefers-reduced-motion:reduce){.spinning{animation:none}}@media (width<=760px){main{padding:20px}.layout{grid-template-columns:1fr}.intro{padding:28px 0}.intro-note{display:none}.record-stage{height:235px}.panel{padding:21px}.record{width:195px;height:195px}#empty{min-height:220px;padding:40px 10px}.page-footer{font-size:8px}header{padding-bottom:18px}}@media (width<=380px){main{padding:13px}.brand{gap:9px;font-size:13px}.pill{font-size:8px}.queue-actions{gap:2px}.queue-actions button{width:24px}}@media (width>=761px) and (height<=850px){main{padding-top:20px}.intro{padding:21px 0}h1{font-size:34px}.intro h1 br{display:none}.intro h1 span{margin-left:8px}.record-stage{height:180px}.record{width:155px;height:155px}.record-label{width:74px;height:74px}.record-label span{font-size:15px}.record-label small{font-size:5px}.orbit{width:210px;height:140px}.orbit-two{width:235px;height:165px}.spark-one{top:21px}.track-info{min-height:80px}.track-info h2{font-size:20px}.transport{margin:14px 0}.panel{padding:20px}.play-button{width:49px;height:49px}#empty{min-height:200px;padding:40px 12px}.notice{margin-bottom:14px}.page-footer{padding-top:17px}}