@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,600&display=swap');
:root{font-family:'DM Sans',system-ui,sans-serif;color:#edf3f0;background:#101419;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}.hidden{display:none!important}.app-shell{min-height:100vh;display:grid;grid-template-columns:234px minmax(0,1fr)}.sidebar{background:#11181a;border-right:1px solid #26332f;padding:29px 17px 24px;display:flex;flex-direction:column;gap:8px}.brand{display:flex;align-items:center;gap:12px;padding:0 9px 49px;font-size:18px;font-weight:700;line-height:1.05}.brand-mark{display:grid;place-items:center;width:37px;height:37px;border-radius:11px;background:#bce880;color:#172116;font-size:25px}.brand-mark.large{width:56px;height:56px;font-size:36px;margin:0 auto 20px}.brand-sub{display:block;color:#adc8ac;font-size:12px;letter-spacing:.22em;text-transform:uppercase;margin-top:6px}.side-label,.eyebrow{font-size:10px;letter-spacing:.2em;font-weight:700;color:#78918b}.side-label{padding:0 14px 13px}.eyebrow.accent{color:#bce880}.nav-link{border:0;background:transparent;text-align:left;color:#a2b6ae;padding:13px 14px;border-radius:10px;font-weight:700}.nav-link span{display:inline-block;width:25px;font-size:18px;vertical-align:-1px}.nav-link:hover,.nav-link.active{background:#22332c;color:#d9f3ca}.side-grow{flex:1}.connection{font-size:12px;color:#8aa099;padding:7px 10px;line-height:1.4}.text-button{border:0;background:transparent;color:#b0c1b9;text-align:left;padding:6px 10px;font-size:12px}.text-button:hover{text-decoration:underline}.main{min-width:0;padding:0 48px 70px;max-width:1600px;width:100%;margin:auto}.topbar{height:92px;display:flex;align-items:center;justify-content:space-between}.top-actions,.heading-actions{display:flex;gap:11px;align-items:center}.button{border:1px solid transparent;border-radius:9px;padding:11px 16px;font-size:13px;font-weight:700;white-space:nowrap}.button.primary{background:#bce880;color:#1a2b1c}.button.primary:hover{background:#d0f5a4}.button.subtle{background:#25322d;border-color:#35463d;color:#e0eee3}.button.subtle:hover{background:#314238}.button.danger{background:transparent;border-color:#5d3c3c;color:#e5afab}.button.wide{width:100%}.hero{min-height:288px;border:1px solid #31473a;border-radius:18px;background:radial-gradient(circle at 82% 38%,#3e6b45 0,#1f392a 34%,#182c25 62%,#192521 100%);display:flex;justify-content:space-between;align-items:center;overflow:hidden;padding:32px 52px}.hero h1,.playlist-heading h1{font-size:clamp(32px,3.5vw,50px);letter-spacing:-.04em;line-height:1.1;margin:10px 0}.hero h1 em{font-family:'Playfair Display',serif;color:#c6eca1;font-weight:600}.hero p,.playlist-heading p{color:#b0c4b9;font-size:14px}.hero-disc{width:225px;height:225px;border-radius:50%;display:grid;place-items:center;background:repeating-radial-gradient(circle,#1a2822 0 4px,#2e4835 5px 6px,#14261d 7px 9px);box-shadow:0 24px 35px #09140d99;transform:rotate(-15deg);flex:none}.hero-disc div{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;background:#bce880;color:#224121;font-size:46px}.section-heading{margin:46px 0 20px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.section-heading h2,.queue h2{margin:0;font-size:22px}.section-heading p{margin:6px 0 0;color:#8aa099;font-size:13px}input{background:#1b2524;border:1px solid #3b4b43;border-radius:9px;color:#eff5ef;padding:11px 13px;outline:none}input:focus{border-color:#bce880}input::placeholder{color:#7f9189}#search{width:min(320px,100%)}.playlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:17px}.playlist-card{background:#1a2424;border:1px solid #293937;border-radius:13px;padding:13px;text-align:left;color:inherit;transition:transform .15s,border-color .15s;min-width:0}.playlist-card:hover{transform:translateY(-3px);border-color:#8aa877}.card-art{height:152px;border-radius:8px;background:#25392f;display:grid;place-items:center;overflow:hidden;color:#a9ce8a;font-size:52px}.card-art img{width:100%;height:100%;object-fit:cover}.playlist-card h3{font-size:15px;margin:14px 3px 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist-card p{font-size:12px;color:#91a49c;margin:0 3px 4px}.empty{text-align:center;padding:70px 20px;background:#182321;border:1px dashed #3b5145;border-radius:13px}.empty-icon{font-size:52px;color:#bce880}.empty h3{font-size:22px;margin:12px}.empty p{color:#9cad9f}.back-button{background:none;border:0;color:#bce880;padding:18px 0;font-size:13px;font-weight:700}.playlist-heading{display:flex;align-items:flex-end;justify-content:space-between;margin:18px 0 34px;gap:15px}.playlist-heading h1{margin:8px 0}.play-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(290px,.8fr);gap:25px}.player-frame{background:#080d0c;aspect-ratio:16/9;min-height:240px;position:relative;border-radius:12px;overflow:hidden;border:1px solid #31443b}.player-frame iframe{width:100%;height:100%}.player-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:#83968b;font-size:14px;pointer-events:none}.now-playing{margin-top:19px;border:1px solid #293937;background:#192321;border-radius:12px;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:15px}.now-playing h2{font-size:18px;margin:7px 0 0}.control-row{display:flex;gap:8px}.control-row button{height:37px;min-width:37px;border:1px solid #405747;border-radius:50%;background:#263a2c;color:#d9f0cc;font-size:15px}.control-row button:hover{background:#3b5840}.queue{background:#192321;border:1px solid #293937;border-radius:12px;padding:19px;max-height:670px;overflow:auto}.queue-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.queue-title h2{font-size:18px}.queue-title span{font-size:12px;color:#91a49c}.queue-item{display:flex;align-items:center;width:100%;gap:10px;text-align:left;background:transparent;border:0;color:#e5efe7;padding:9px;border-radius:8px}.queue-item:hover,.queue-item.active{background:#2a3d31}.queue-item img,.queue-thumb{width:74px;height:48px;object-fit:cover;background:#314338;border-radius:5px;flex:none}.queue-text{min-width:0}.queue-text strong{display:block;font-size:12px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue-text small{color:#a5b5aa}.queue-item.unplayable{opacity:.5}.modal-backdrop{position:fixed;inset:0;background:#07100ccc;display:grid;place-items:center;padding:20px;z-index:10}.modal{position:relative;width:min(560px,100%);max-height:90vh;overflow:auto;background:#1b2824;border:1px solid #47604d;border-radius:17px;padding:32px;box-shadow:0 35px 70px #0009}.modal-close{position:absolute;top:18px;right:18px;background:none;border:0;color:#c2d3c4;font-size:24px}.modal h2{font-size:28px;margin:8px 0}.modal p{font-size:13px;color:#aec2b2;margin:0 0 25px}.modal label{display:block;font-size:12px;font-weight:700;margin-bottom:8px}.input-row{display:flex;gap:9px}.input-row input{min-width:0;flex:1}.divider{text-align:center;color:#81988b;font-size:11px;letter-spacing:.15em;margin:25px 0}.demo-link{border:0;background:none;color:#bce880;padding:18px 0 0;font-weight:700}.youtube-list{max-height:230px;overflow:auto;margin-top:10px}.youtube-choice{width:100%;padding:13px;text-align:left;background:#23332a;border:0;border-radius:8px;color:#ebf4e8;margin:4px 0}.youtube-choice:hover{background:#334a37}.login-screen{position:fixed;inset:0;background:#101b17;display:grid;place-items:center;z-index:20}.login-card{width:min(360px,calc(100% - 30px));background:#1d2b24;border:1px solid #3c5840;border-radius:16px;text-align:center;padding:34px}.login-card h1{font-size:25px}.login-card p{color:#a9baab;font-size:13px}.login-card input{display:block;width:100%;margin:20px 0 10px}.toast{position:fixed;right:25px;bottom:24px;max-width:360px;background:#344f3b;border:1px solid #769e70;border-radius:10px;padding:14px 18px;box-shadow:0 8px 24px #0007;z-index:30;font-size:13px}.toast.error{background:#573333;border-color:#a76c68}@media(max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{position:sticky;top:0;z-index:4;flex-direction:row;align-items:center;padding:9px 16px;gap:3px}.brand{padding:0 14px 0 0;font-size:14px}.brand-mark{width:30px;height:30px;font-size:20px}.brand-sub,.side-label,.side-grow,.connection,.sidebar .text-button{display:none!important}.nav-link{padding:8px;font-size:12px}.nav-link span{width:auto;margin-right:4px}.main{padding:0 22px 50px}.topbar{height:75px}.hero{padding:25px;min-height:230px}.hero-disc{width:150px;height:150px}.play-layout{grid-template-columns:1fr}.queue{max-height:480px}}@media(max-width:600px){.hero-disc{display:none}.hero h1{font-size:34px}.section-heading{align-items:stretch;flex-direction:column}.section-heading #search{width:100%}.topbar .eyebrow{display:none}.topbar{justify-content:flex-end}.playlist-heading{align-items:flex-start;flex-direction:column}.input-row{flex-direction:column}.playlist-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card-art{height:110px}.modal{padding:25px}.now-playing{flex-direction:column;align-items:flex-start}.control-row{align-self:flex-end}}
.audio-art{min-height:280px;border:1px solid #31443b;border-radius:12px;background:radial-gradient(circle at center,#38553c,#1a2c22 45%,#101a17);display:flex;align-items:center;justify-content:center;flex-direction:column;color:#c5eca5}.audio-art span{display:grid;place-items:center;width:132px;height:132px;border-radius:50%;background:repeating-radial-gradient(circle,#172b1c 0 5px,#304a31 6px 8px);font-size:76px;box-shadow:0 20px 38px #0008}.audio-art p{margin:19px 0 0;color:#9fb7a5;font-size:12px;letter-spacing:.15em;text-transform:uppercase}#audio-player{display:block;width:100%;height:42px;margin-top:16px;accent-color:#bce880}.audio-note{font-size:12px;color:#94a89b;line-height:1.5}.queue-item .attach-audio{margin-left:auto;flex:none;border:1px solid #526f50;border-radius:6px;background:#314a33;color:#d8efc8;padding:7px 9px;font-size:11px;font-weight:700}.queue-item .attach-audio:hover{background:#45634a}.queue-item{cursor:pointer}.queue-item.no-audio{opacity:.8}.queue-text small.ready{color:#bce880}.queue-item .attach-audio{cursor:pointer}
.queue-play{display:flex;align-items:center;gap:10px;min-width:0;flex:1;text-align:left;border:0;background:none;color:inherit;padding:0;cursor:pointer}.queue-play:disabled{cursor:default}.queue-play img{width:74px;height:48px;object-fit:cover;border-radius:5px;flex:none}.queue-play .queue-text{min-width:0}
.modal .setup-note{margin:12px 0 0;padding:12px 14px;border:1px solid #8e7743;border-radius:8px;background:#3a3021;color:#f2dda5;line-height:1.5}
#key-form{margin:18px 0 24px;padding:16px;border:1px solid #47604d;border-radius:9px;background:#22352a}.queue-item .external-track{margin-left:auto;flex:none;color:#bce880;font-size:11px;text-decoration:none}.queue-item .external-track:hover{text-decoration:underline}