@font-face{font-family:Atkinson Hyperlegible Next Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(../media/atkinson-hyperlegible-next-latin-ext-wght-normal.06adi5qjgm3bm.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Atkinson Hyperlegible Next Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(../media/atkinson-hyperlegible-next-latin-wght-normal.1o9o6__l__p-w.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--asphalt:#111315;--dash:#1d2324;--dash-light:#293032;--lane:#ffc857;--lane-deep:#9b6a0a;--fog:#f4f7f5;--muted:#aeb8b5;--stop:#ff6b5e;--success:#7be0b4}*{box-sizing:border-box}html{background:var(--asphalt)}body{background:linear-gradient(90deg, #ffffff06 1px, transparent 1px) 0 0 / 72px 72px, var(--asphalt);min-height:100vh;color:var(--fog);margin:0;font-family:Atkinson Hyperlegible Next Variable,Atkinson Hyperlegible,sans-serif;font-size:16px;line-height:1.45}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a,button{color:inherit}:focus-visible{outline:3px solid var(--lane);outline-offset:3px}.srOnly{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.brand{color:var(--fog);letter-spacing:-.025em;align-items:center;gap:12px;font-size:1.14rem;font-weight:760;display:inline-flex}.brandMark{background:var(--lane);width:42px;height:42px;color:var(--asphalt);border-radius:50%;place-items:center;display:grid}.brandMark svg{width:23px;height:23px}.loadingScreen{place-content:center;justify-items:center;gap:30px;min-height:100svh;display:grid}.roadLoader{gap:9px;display:flex}.roadLoader span{background:var(--lane);border-radius:8px;width:34px;height:8px;animation:1.1s ease-in-out infinite loaderPulse}.roadLoader span:nth-child(2){animation-delay:.12s}.roadLoader span:nth-child(3){animation-delay:.24s}.loadingScreen p{color:var(--muted);margin:0}@keyframes loaderPulse{50%{opacity:.25;transform:scaleX(.7)}}.connectPage{flex-direction:column;width:min(1240px,100%);min-height:100svh;margin:0 auto;padding:32px clamp(22px,5vw,72px);display:flex}.connectHeader,.appHeader{justify-content:space-between;align-items:center;display:flex}.personalUse{color:var(--muted);font-size:.93rem}.connectHero{flex:1;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);align-items:center;gap:clamp(40px,8vw,120px);padding:70px 0;display:grid}.connectCopy{max-width:660px}.connectCopy h1{letter-spacing:-.065em;max-width:620px;margin:0 0 24px;font-size:clamp(3.5rem,7.4vw,7.4rem);font-weight:780;line-height:.9}.connectCopy>p{max-width:590px;color:var(--muted);margin:0 0 34px;font-size:clamp(1.1rem,2vw,1.35rem);line-height:1.5}.connectButton{background:var(--fog);min-height:68px;color:var(--asphalt);border-radius:18px;align-items:center;gap:14px;padding:0 28px;font-size:1.14rem;font-weight:760;text-decoration:none;display:inline-flex}.connectButton:hover{background:#fff}.spotifyDot{border:6px solid #1ed760;border-radius:50%;width:20px;height:20px}.connectCopy .connectNote{margin:16px 0 0;font-size:.92rem}.shuffleInstrument{aspect-ratio:1;background:radial-gradient(circle, #242b2d 0 17%, var(--dash) 17% 54%, #171b1c 54%);border:1px solid #394143;border-radius:50%;justify-self:end;width:min(100%,460px);position:relative;overflow:hidden;box-shadow:0 30px 80px #00000061}.instrumentTrack{background:var(--lane);transform-origin:0;border-radius:12px;height:12px;position:absolute}.instrumentTrackOne{width:76%;top:28%;left:6%;transform:rotate(26deg)}.instrumentTrackTwo{width:82%;top:50%;left:8%;transform:rotate(-18deg)}.instrumentTrackThree{width:68%;top:68%;left:12%;transform:rotate(13deg)}.instrumentKnob{border:9px solid var(--asphalt);background:var(--lane);width:126px;height:126px;color:var(--asphalt);border-radius:50%;place-items:center;display:grid;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.instrumentKnob svg{stroke-width:2.4px;width:56px;height:56px}.instrumentLabel{color:var(--fog);font-weight:700;position:absolute;bottom:15%;right:17%}.connectFooter{color:var(--muted);border-top:1px solid #303638;gap:28px;padding-top:24px;font-size:.88rem;display:flex}.errorBanner{border-left:5px solid var(--stop);background:#ff6b5e17;flex-direction:column;gap:3px;margin:0 0 24px;padding:16px 18px;display:flex}.errorBanner span{color:#e8c0bb}.errorBanner button{cursor:pointer;background:0 0;border:1px solid #70413d;border-radius:8px;width:fit-content;margin-top:8px;padding:8px 14px}.appPage{width:min(1280px,100%);min-height:100svh;margin:0 auto;padding:24px clamp(18px,4vw,56px) 48px}.appHeader{min-height:64px;margin-bottom:42px}.headerActions{align-items:center;gap:10px;display:flex}.quietButton,.profileButton{background:var(--dash);cursor:pointer;border:1px solid #343b3d;border-radius:14px;min-height:52px}.quietButton{color:var(--muted);align-items:center;gap:9px;padding:0 16px;display:inline-flex}.quietButton svg{width:19px;height:19px}.profileButton{align-items:center;gap:10px;padding:5px 14px 5px 5px;display:flex}.profileButton img,.profileButton>span:first-child{background:var(--dash-light);object-fit:cover;border-radius:11px;place-items:center;width:40px;height:40px;display:grid}.profileName{text-overflow:ellipsis;white-space:nowrap;max-width:150px;overflow:hidden}.infoBanner{color:#c9f7e4;background:#283a35;border-radius:12px;justify-content:space-between;align-items:center;gap:18px;min-height:56px;margin:-20px 0 28px;padding:12px 16px;display:flex}.infoBanner button{color:inherit;cursor:pointer;background:0 0;border:0;text-decoration:underline}.topError{margin:-20px 0 28px}.workspace{grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);align-items:start;gap:clamp(28px,5vw,70px);display:grid}.sectionHeading{justify-content:space-between;align-items:end;gap:24px;margin-bottom:22px;display:flex}.sectionHeading h1{letter-spacing:-.045em;margin:0;font-size:clamp(2rem,3.6vw,3.3rem);line-height:1}.sectionHeading p{color:var(--muted);margin:8px 0 0}.searchBox{background:var(--dash);min-width:220px;min-height:54px;color:var(--muted);border:1px solid #343b3d;border-radius:14px;align-items:center;gap:10px;padding:0 14px;display:flex}.searchBox:focus-within{border-color:var(--lane)}.searchBox svg{flex:none;width:20px}.searchBox input{width:100%;color:var(--fog);background:0 0;border:0;outline:0}.searchBox input::placeholder{color:#89928f}.sourceList{border-top:1px solid #343b3d}.sourceRow{border-bottom:1px solid #343b3d;grid-template-columns:minmax(0,1fr) 58px;display:grid;position:relative}.sourceRowSelected{background:#ffc85713}.sourceRowSelected:before{background:var(--lane);content:"";width:4px;position:absolute;inset:0 auto 0 0}.sourceChoice{text-align:left;cursor:pointer;background:0 0;border:0;grid-template-columns:58px minmax(0,1fr) 34px;align-items:center;gap:15px;min-width:0;min-height:86px;padding:10px 8px 10px 12px;display:grid}.sourceChoice:hover{background:#ffffff06}.sourceThumb{width:58px;height:58px}.sourceArtworkImage,.likedArtwork{object-fit:contain;background:#293032;border-radius:9px;place-items:center;width:100%;height:100%;display:grid}.likedArtwork{color:var(--lane)}.likedArtwork svg{fill:currentColor;width:26px;height:26px}.sourceText{flex-direction:column;min-width:0;display:flex}.sourceText strong{text-overflow:ellipsis;white-space:nowrap;font-size:1.05rem;overflow:hidden}.sourceText span{color:var(--muted);margin-top:3px;font-size:.9rem}.selectionMark{border:2px solid #4b5455;border-radius:50%;place-items:center;width:30px;height:30px;display:grid}.sourceRowSelected .selectionMark{border-color:var(--lane);background:var(--lane);color:var(--asphalt)}.selectionMark svg{stroke-width:3px;width:18px;height:18px}.sourceLink{min-height:58px;color:var(--muted);align-self:center;place-items:center;display:grid}.sourceLink:hover{color:var(--fog)}.sourceLink svg{width:19px;height:19px}.emptyState{color:var(--muted);padding:32px 12px}.cockpit{background:var(--dash);border:1px solid #374042;border-radius:28px;padding:clamp(22px,3vw,34px);position:sticky;top:22px;box-shadow:0 28px 70px #0000004d}.selectedSource{border-bottom:1px solid #394143;grid-template-columns:128px minmax(0,1fr);align-items:center;gap:22px;min-height:130px;padding-bottom:26px;display:grid}.heroArtwork{width:128px;height:128px}.heroArtwork .sourceArtworkImage,.heroArtwork .likedArtwork{border-radius:18px}.heroArtwork .likedArtwork svg{width:50px;height:50px}.selectedSource p{color:var(--lane);margin:0 0 7px;font-weight:700}.selectedSource h2{letter-spacing:-.04em;overflow-wrap:anywhere;margin:0;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.02}.selectedSource>div>span{color:var(--muted);margin-top:9px;display:block}.deviceControl{margin:26px 0 22px}.deviceControl label{align-items:center;gap:9px;margin-bottom:11px;font-weight:700;display:flex}.deviceControl label svg{width:21px;height:21px;color:var(--lane)}.deviceSelectRow{grid-template-columns:minmax(0,1fr) 60px;gap:10px;display:grid}.deviceSelectRow select{width:100%;min-height:60px;color:var(--fog);background:#15191a;border:1px solid #485153;border-radius:14px;padding:0 42px 0 16px}.refreshButton{cursor:pointer;background:#15191a;border:1px solid #485153;border-radius:14px;place-items:center;min-height:60px;display:grid}.refreshButton:disabled{cursor:wait;opacity:.6}.refreshButton svg{width:22px;height:22px}.deviceHelp{color:var(--lane);margin:11px 0 0;font-size:.93rem}.shuffleButton{background:var(--lane);width:100%;min-height:90px;box-shadow:0 8px 0 var(--lane-deep);color:var(--asphalt);cursor:pointer;border:0;border-radius:22px;justify-content:center;align-items:center;gap:16px;padding:16px 24px;font-size:clamp(1.25rem,2.4vw,1.65rem);font-weight:800;display:flex}.shuffleButton:hover:not(:disabled){background:#ffd271}.shuffleButton:active:not(:disabled){box-shadow:0 3px 0 var(--lane-deep);transform:translateY(5px)}.shuffleButton:disabled{cursor:not-allowed;filter:grayscale(.65);opacity:.55}.shuffleButton svg{stroke-width:2.4px;width:31px;height:31px}.cockpitMessage{margin:24px 0 0}.successMessage{color:var(--success);background:#7be0b417;border-radius:16px;grid-template-columns:36px minmax(0,1fr);gap:13px;margin-top:24px;padding:18px;display:grid}.successMessage>svg{stroke-width:2.8px;width:30px;height:30px}.successMessage div{flex-direction:column;gap:5px;display:flex}.successMessage span{color:#c7ded5}.successMessage a{align-items:center;gap:7px;width:fit-content;margin-top:7px;font-weight:700;display:inline-flex}.successMessage a svg{width:17px;height:17px}.queueNote{color:#89928f;margin:22px 4px 0;font-size:.88rem}.spinning{animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:900px){.connectHero{grid-template-columns:1fr}.shuffleInstrument{display:none}.workspace{flex-direction:column;display:flex}.cockpit{order:-1;width:100%;position:static}.sourceSection{width:100%}}@media (max-width:620px){.connectPage{padding-top:20px;padding-bottom:22px}.personalUse{display:none}.connectHero{padding:72px 0 54px}.connectCopy h1{font-size:clamp(3.3rem,16vw,5.2rem)}.connectButton{justify-content:center;width:100%}.connectFooter{grid-template-columns:1fr 1fr;gap:12px;display:grid}.appPage{padding:16px 14px 36px}.appHeader{margin-bottom:26px}.profileName,.installButton span{display:none}.quietButton{justify-content:center;width:52px;padding:0}.profileButton{padding-right:5px}.sectionHeading{flex-direction:column;align-items:stretch;gap:16px}.searchBox{width:100%}.cockpit{border-radius:22px;padding:18px}.selectedSource{grid-template-columns:92px minmax(0,1fr);gap:16px;min-height:96px}.heroArtwork{width:92px;height:92px}.selectedSource h2{font-size:1.75rem}.shuffleButton{min-height:82px}.sourceChoice{grid-template-columns:54px minmax(0,1fr) 30px;gap:12px;min-height:82px;padding-left:8px}.sourceThumb{width:54px;height:54px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}