@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap";:root{color:#e4eae8;font-synthesis:none;text-rendering:optimizelegibility;background:#11191d;font-family:DM Sans,sans-serif}*{box-sizing:border-box}body{background:#11191d;min-width:320px;margin:0}button,input{font:inherit}button{cursor:pointer}.app-shell{--bg:#11191d;--panel:#182226d1;--panel-strong:#1a262a;--text:#e6ece9;--subtle:#93a09e;--line:#aec3bc21;--green:#afd99d;background:var(--bg);min-height:100vh;color:var(--text);transition:background .3s,color .3s;position:relative;overflow:hidden}.app-shell.light{--bg:#ecf0eb;--panel:#ffffffb8;--panel-strong:#fff;--text:#1a2828;--subtle:#61706d;--line:#1f403a24;--green:#6a9b6f}.ambient{filter:blur(1px);opacity:.15;pointer-events:none;border-radius:50%;position:absolute}.ambient-one{background:#78ae9c;width:520px;height:520px;top:-320px;left:30%;box-shadow:0 0 130px 80px #78ae9c}.ambient-two{opacity:.08;background:#6c8f98;width:300px;height:300px;top:520px;right:-160px;box-shadow:0 0 100px 60px #6c8f98}.topbar,.main-content,footer{width:min(1120px,100% - 72px);margin:0 auto}.topbar{z-index:1;border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:91px;display:flex;position:relative}.brand{color:var(--text);letter-spacing:-.04em;align-items:center;gap:11px;font-size:20px;font-weight:600;text-decoration:none;display:flex}.brand-accent{color:var(--green)}.brand-mark{align-items:center;gap:3px;width:23px;height:22px;display:flex}.brand-mark span{background:var(--green);border-radius:3px;width:5px;display:block;transform:skew(-19deg)}.brand-mark span:first-child{opacity:.62;height:11px}.brand-mark span:nth-child(2){height:20px}.brand-mark span:nth-child(3){opacity:.8;height:14px}.app-version{color:var(--subtle);letter-spacing:.04em;align-self:flex-end;margin:0 0 2px -5px;font:9px DM Mono,monospace}.topbar-actions{align-items:center;gap:20px;display:flex}.connection,.eyebrow,footer,.master-label,.volume-value{letter-spacing:.11em;text-transform:uppercase;font:500 10px DM Mono,monospace}.connection{color:var(--subtle);align-items:center;gap:8px;display:flex}.status-dot,.loaded-label span{background:var(--green);border-radius:50%;width:6px;height:6px;display:inline-block;box-shadow:0 0 0 4px #afd99d14}.icon-button{color:var(--subtle);background:0 0;border:0;place-items:center;padding:6px;display:grid}.icon-button:hover{color:var(--text)}.share-button.copied{color:var(--green)}.avatar{color:#4c372d;background:#e4c2a6;border-radius:50%;place-items:center;width:32px;height:32px;font-size:11px;font-weight:700;display:grid}.main-content{z-index:1;padding:52px 0 55px;position:relative}.player-landing{width:min(880px,100%);margin:clamp(24px,8vh,86px) auto 0}.hero{justify-content:space-between;align-items:flex-end;margin-bottom:65px;display:flex}.eyebrow{color:var(--green);align-items:center;gap:11px;margin:0 0 19px;display:flex}.eyebrow-line{background:var(--green);width:24px;height:1px;display:inline-block}h1{letter-spacing:-.067em;margin:0;font-size:clamp(45px,6vw,72px);font-weight:500;line-height:.99}.hero h1 em{color:var(--green);letter-spacing:-.06em;font-family:Playfair Display,serif}.hero-copy{color:var(--subtle);margin:27px 0 0;font-size:15px;line-height:1.62}.hero-note{color:#a9b3af;align-items:flex-start;gap:14px;padding:0 30px 8px 0;font-family:Playfair Display,serif;font-size:16px;font-style:italic;line-height:1.45;display:flex}.note-line{background:var(--green);width:28px;height:1px;margin-top:10px}.mixer-panel{background:var(--panel);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);border:1px solid var(--line);border-radius:8px;padding:30px 32px 0;box-shadow:0 20px 60px #0000001f}.section-heading{justify-content:space-between;align-items:flex-start;margin-bottom:26px;display:flex}.title-row{align-items:center;gap:10px;display:flex}.title-row h2{letter-spacing:-.03em;margin:0;font-size:18px;font-weight:600}.count-pill{border:1px solid var(--line);min-width:20px;height:20px;color:var(--green);border-radius:12px;place-items:center;font:10px DM Mono,monospace;display:grid}.section-heading p{color:var(--subtle);margin:8px 0 0;font-size:12px}.add-button{color:var(--green);background:0 0;border:1px solid #afd99d6b;border-radius:4px;align-items:center;gap:8px;padding:10px 14px;font-size:12px;font-weight:600;transition:all .2s;display:inline-flex}.add-button:hover{border-color:var(--green);background:#afd99d1a}.add-form{border:1px solid var(--line);background:#0000001a;border-radius:5px;margin:-4px 0 20px;padding:17px;position:relative}.form-inputs{grid-template-columns:1.2fr .8fr;gap:14px;padding-right:148px;display:grid}.add-form label{color:var(--subtle);letter-spacing:.06em;text-transform:uppercase;flex-direction:column;gap:7px;font:10px DM Mono,monospace;display:flex}.add-form small{opacity:.65;text-transform:lowercase}.add-form input{color:var(--text);border:1px solid var(--line);background:#ffffff0a;border-radius:3px;outline:none;padding:10px 11px;font:12px DM Sans,sans-serif}.add-form input:focus{border-color:var(--green)}.form-submit{background:var(--green);color:#18251f;border:0;border-radius:3px;align-items:center;gap:6px;height:39px;padding:0 12px;font-size:11px;font-weight:700;display:flex;position:absolute;bottom:17px;right:17px}.form-error{color:#e99987;margin:10px 0 0;font-size:11px}.track-list{flex-direction:column;gap:9px;display:flex}.track-card{background:#ffffff08;border:1px solid #0000;border-radius:5px;align-items:center;gap:21px;min-height:84px;padding:12px 17px 12px 15px;transition:background .2s,border .2s;display:flex;position:relative}.track-card:hover{border-color:var(--line);background:#ffffff0e}.track-card.is-playing{background:color-mix(in srgb, var(--track-accent) 7%, transparent);border-color:color-mix(in srgb, var(--track-accent) 21%, transparent)}.track-number{color:#657471;width:20px;font:10px DM Mono,monospace}.track-art{background:radial-gradient(circle at 65% 42%, color-mix(in srgb, var(--art-accent) 65%, transparent) 0 5%, transparent 6%), radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--art-accent) 24%, transparent), transparent 62%), #1c292b;border-radius:4px;flex:none;width:58px;height:58px;position:relative;overflow:hidden}.track-art:before{content:"";background:repeating-linear-gradient(124deg, transparent 0 8px, color-mix(in srgb, var(--art-accent) 10%, transparent) 9px 10px);position:absolute;inset:0}.art-orbit{border:1px solid color-mix(in srgb, var(--art-accent) 42%, transparent);border-radius:50%;position:absolute}.orbit-one{inset:12px 9px 11px 12px;transform:rotate(42deg)}.orbit-two{inset:8px 16px 15px 7px;transform:rotate(-40deg)}.art-core{background:var(--art-accent);width:8px;height:8px;box-shadow:0 0 17px var(--art-accent);border-radius:50%;position:absolute;top:25px;left:25px}.wave-bars{align-items:end;gap:2px;height:13px;display:flex;position:absolute;bottom:8px;right:8px}.wave-bars i,.mini-waves i{background:var(--art-accent);border-radius:3px;width:2px;height:50%;animation:1.1s ease-in-out infinite alternate wave;display:block}.wave-bars i:nth-child(2),.mini-waves i:nth-child(2){height:85%;animation-delay:-.3s}.wave-bars i:nth-child(3),.mini-waves i:nth-child(3){height:62%;animation-delay:-.6s}.wave-bars i:nth-child(4),.mini-waves i:nth-child(4){height:100%;animation-delay:-.1s}@keyframes wave{to{opacity:.5;transform:scaleY(.4)}}.track-info{flex:1;min-width:0}.track-title-row{align-items:center;gap:10px;display:flex}.track-info h3{letter-spacing:-.02em;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:14px;font-weight:600;overflow:hidden}.track-info p{color:var(--subtle);margin:7px 0 0;font-size:11px}.loaded-label,.error-label{color:var(--subtle);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;font:9px DM Mono,monospace}.loaded-label{align-items:center;gap:5px;display:inline-flex}.error-label{color:#e99987}.track-controls{align-items:center;gap:19px;display:flex}.play-button{background:var(--green);color:#1b2a25;border:0;border-radius:50%;place-items:center;width:36px;height:36px;padding-left:2px;transition:transform .2s,box-shadow .2s;display:grid}.play-button:hover{transform:scale(1.06);box-shadow:0 0 0 5px #afd99d1a}.play-button.playing{padding-left:0}.track-volume{color:#82918e;align-items:center;gap:7px;display:flex}.track-volume input{appearance:none;background:linear-gradient(to right, var(--track-accent) 0%, var(--track-accent) var(--track-range,100%), #9baea73b var(--track-range,100%), #9baea73b 100%);border-radius:5px;outline:none;width:66px;height:2px}.track-volume input::-webkit-slider-thumb{appearance:none;background:var(--track-accent);border:2px solid #27352f;border-radius:50%;width:9px;height:9px}.track-volume input::-moz-range-thumb{background:var(--track-accent);border:2px solid #27352f;border-radius:50%;width:9px;height:9px}.mute-button,.delete-button{color:#82918e;background:0 0;border:0;place-items:center;padding:5px;display:grid}.mute-button:hover,.delete-button:hover{color:var(--text)}.mute-button.muted{color:#e5af91}.delete-button{opacity:0;transition:opacity .2s}.track-card:hover .delete-button{opacity:1}.youtube-engine{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute;top:-100px;left:-100px}.play-button,.replay-button{color:#82918e;background:0 0;border:0;border-radius:0;place-items:center;width:28px;height:28px;padding:0;transition:color .2s,transform .2s;display:grid}.play-button:hover,.replay-button:hover{color:var(--green);box-shadow:none;transform:scale(1.1)}.play-button.playing{color:var(--green);padding-left:0}.track-card.is-disabled{opacity:.55}.track-card.is-disabled .track-art{filter:grayscale(.75)}.enable-button{color:#82918e;background:0 0;border:0;place-items:center;width:28px;height:28px;padding:0;transition:color .2s,transform .2s;display:grid}.enable-button.enabled{color:var(--green)}.enable-button:hover{color:var(--text);transform:scale(1.08)}.enable-button.disabled{color:#677572}.play-button:disabled,.replay-button:disabled{cursor:not-allowed;opacity:.4}.master-actions{align-items:center;gap:20px;display:flex}.play-all:disabled{cursor:not-allowed;opacity:.35}.track-time{color:var(--subtle);letter-spacing:.02em;align-items:center;gap:8px;margin-top:8px;font:9px DM Mono,monospace;display:flex}.track-time>span{min-width:72px}.track-progress{background:#9baea73b;border-radius:2px;flex:1;max-width:170px;height:2px;overflow:hidden}.track-progress span{background:var(--track-accent);border-radius:inherit;height:100%;transition:width .2s linear;display:block}.mixer-footer{border-top:1px solid var(--line);justify-content:space-between;align-items:center;min-height:74px;margin:25px -32px 0;padding:0 32px;display:flex}.play-all{color:var(--text);background:0 0;border:0;align-items:center;gap:10px;padding:0;font-size:12px;font-weight:600;display:flex}.play-all:hover{color:var(--green)}.play-all-icon{border:1px solid var(--green);width:23px;height:23px;color:var(--green);border-radius:50%;place-items:center;padding-left:1px;display:grid}.play-all.active .play-all-icon{padding-left:0}.master-control{align-items:center;gap:13px;display:flex}.master-label{color:var(--subtle);font-size:9px}.master-volume-icon{color:var(--subtle);background:0 0;border:0;padding:2px;display:grid}.master-control input{appearance:none;background:linear-gradient(to right, var(--green) 0%, var(--green) var(--range,68%), #9baea73b var(--range,68%), #9baea73b 100%);border-radius:5px;outline:none;width:130px;height:2px}.master-control input::-webkit-slider-thumb{appearance:none;background:var(--green);border:2px solid #27352f;border-radius:50%;width:11px;height:11px}.volume-value{color:var(--text);letter-spacing:.03em;width:28px;font-size:10px}.empty-state{text-align:center;border:1px dashed var(--line);border-radius:5px;place-items:center;padding:45px 20px;display:grid}.empty-icon{border:1px solid var(--green);width:42px;height:42px;color:var(--green);border-radius:50%;place-items:center;display:grid}.empty-state h3{margin:16px 0 5px;font-size:15px}.empty-state p{color:var(--subtle);margin:0 0 18px;font-size:12px}.bottom-row{grid-template-columns:1fr 1fr;gap:18px;margin-top:22px;display:grid}.tip-card,.now-playing{border:1px solid var(--line);background:#ffffff06;border-radius:6px;align-items:center;min-height:91px;display:flex}.tip-card{gap:17px;padding:20px 24px}.tip-icon{width:30px;height:30px;color:var(--green);background:#afd99d1a;border-radius:50%;place-items:center;font-size:17px;display:grid}.small-eyebrow{margin:0 0 8px;font-size:9px}.tip-card p:last-child{color:#aeb9b4;margin:0;font-size:11px;line-height:1.5}.tip-card p span{color:var(--green)}.now-playing{justify-content:space-between;padding:20px 24px}.now-playing-label{color:var(--subtle);letter-spacing:.09em;font:9px DM Mono,monospace}.pulse-dot{background:#e7aa72;border-radius:50%;width:6px;height:6px;margin-right:8px;display:inline-block;box-shadow:0 0 0 4px #e7aa7217}.mini-waves{align-items:center;gap:3px;height:18px;display:flex}.mini-waves i{background:#d49d76}.mini-waves i:nth-child(5){height:70%}.now-playing strong{font-size:12px;font-weight:500}.now-playing strong:first-letter{color:var(--green)}footer{border-top:1px solid var(--line);color:#60706d;justify-content:space-between;padding:21px 0 27px;font-size:9px;display:flex}footer small{color:var(--green);padding:0 7px}@media (width<=720px){.topbar,.main-content,footer{width:min(100% - 32px,1120px)}.topbar{height:72px}.connection{display:none}.main-content{padding-top:52px}.hero{margin-bottom:42px;display:block}.hero-note{padding-top:32px;padding-right:0}.desktop-break{display:none}.mixer-panel{padding:23px 17px 0}.section-heading{margin-bottom:20px}.section-heading p{max-width:200px;line-height:1.4}.track-card{gap:11px;padding:10px 9px}.track-number{display:none}.track-art{width:48px;height:48px}.art-core{width:7px;height:7px;top:20px;left:21px}.track-info h3{font-size:12px}.track-info p{font-size:10px}.track-title-row{display:block}.loaded-label,.error-label{margin-top:5px;font-size:8px;display:block}.track-controls{gap:8px}.track-volume{gap:4px}.track-volume input{width:48px}.mute-button{padding:4px}.delete-button{opacity:1}.mixer-footer{margin-left:-17px;margin-right:-17px;padding:0 17px}.master-label{display:none}.master-control{gap:8px}.master-control input{width:75px}.bottom-row{grid-template-columns:1fr}.tip-card{min-height:auto}.now-playing{min-height:75px}footer{line-height:2;display:block}footer span{display:block}}@media (width<=430px){h1{font-size:44px}.hero-copy{font-size:13px}.add-form{padding-bottom:70px}.form-inputs{grid-template-columns:1fr;padding-right:0}.form-submit{left:17px;right:auto}.track-card{min-height:79px}.track-art{display:none}.play-button{width:32px;height:32px}.track-controls{margin-left:auto}.section-heading{align-items:center}.add-button{padding:9px 10px}.add-button svg{display:none}.now-playing{flex-wrap:wrap;gap:5px}.now-playing strong{order:3;width:100%}}