@import"https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;0,900;1,800&family=Inter:wght@400;500;600;700&display=swap";:root{color-scheme:dark;font-family:Inter,system-ui,sans-serif;color:#f4f2ed;background:#070707;font-synthesis:none;--acid: #d7ff43;--muted: #94948e;--panel: #11110f;--line: #292925}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;min-width:320px;height:100%;overflow:hidden;background:radial-gradient(circle at 75% 0%,rgba(215,255,67,.055),transparent 28rem),#070707}button,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid var(--acid);outline-offset:3px}.shell{height:100dvh;overflow:hidden;display:grid;grid-template-rows:72px minmax(0,1fr) 48px}.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;font-family:Barlow Condensed;font-size:1.45rem;font-weight:900;letter-spacing:.12em;transform:skew(-4deg)}.brand-mark{width:34px;height:34px;display:grid;place-items:center;border:1px solid #fff;clip-path:polygon(15% 0,100% 0,85% 100%,0 100%)}.account{display:flex;align-items:center;gap:12px}.demo-badge,.connected{color:var(--muted);font-size:.77rem;letter-spacing:.04em;display:flex;gap:5px;align-items:center}.demo-badge{border:1px solid #3c3c36;border-radius:99px;padding:5px 9px}.icon-button{border:0;background:none;color:var(--muted);padding:8px;cursor:pointer}.hero{width:min(920px,90vw);height:100%;min-height:0;margin:auto;padding:clamp(22px,5vh,58px) 0;text-align:center;display:flex;flex-direction:column;justify-content:center}.eyebrow{display:flex;align-items:center;gap:7px;color:var(--acid);text-transform:uppercase;letter-spacing:.16em;font-weight:700;font-size:.7rem}.hero .eyebrow{justify-content:center}h1,h2{font-family:Barlow Condensed,sans-serif;font-style:italic;font-weight:900;letter-spacing:-.035em;line-height:.84;margin:24px 0;text-transform:uppercase;transform:skew(-2deg)}h1{font-size:clamp(4rem,9.5vw,8rem)}h1 span,h2 span{color:transparent;-webkit-text-stroke:1.5px #77776f}.hero-copy{max-width:600px;margin:0 auto clamp(18px,3vh,32px);color:var(--muted);font-size:1rem;line-height:1.55}.composer{background:#10100e;border:1px solid #34342e;text-align:left;box-shadow:0 26px 80px #00000073}.composer textarea,.refine-composer textarea{width:100%;border:0;resize:vertical;background:transparent;color:#fff;padding:25px;outline:none;font-size:1.05rem;line-height:1.6}.composer textarea{min-height:clamp(90px,14vh,125px)}textarea::placeholder{color:#686862}.composer-footer{min-height:64px;padding:10px 12px 10px 25px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}.composer-footer span{color:#6e6e68;font-size:.75rem}.composer button,.refine-composer button{border:0;background:var(--acid);color:#090909;font-weight:800;padding:14px 20px;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}.examples{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:9px;margin-top:22px}.examples>span{text-transform:uppercase;letter-spacing:.14em;font-size:.65rem;color:#666;margin-right:3px}.examples button{border:1px solid var(--line);background:#0c0c0b;color:#aaa;padding:9px 12px;font-size:.72rem;cursor:pointer;display:flex;align-items:center;gap:6px}.examples button:hover{color:#fff;border-color:#555}.workspace{width:min(1500px,92vw);height:100%;min-height:0;margin:0 auto;padding:clamp(26px,4vh,44px) 0;display:grid;grid-template-columns:minmax(250px,320px) minmax(0,1fr);gap:clamp(38px,5vw,78px);overflow:hidden}.refine-panel{min-height:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3vh,32px)}h2{font-size:clamp(3rem,4.5vw,4.8rem);margin:16px 0}.refine-panel p{color:var(--muted);line-height:1.65;font-size:.9rem}.refine-composer{border:1px solid var(--line);background:var(--panel)}.refine-composer textarea{min-height:135px;font-size:.88rem;padding:18px}.refine-composer button{width:calc(100% - 20px);margin:0 10px 10px}.text-button{border:0;background:none;color:#888;text-decoration:underline;cursor:pointer;text-align:left;padding:0}.playlist-panel{min-height:0;display:flex;flex-direction:column;overflow:hidden}.playlist-heading{flex:0 0 auto;display:flex;justify-content:space-between;align-items:end;gap:30px;padding-bottom:20px}.playlist-heading h3{font-family:Barlow Condensed;font-size:clamp(2.3rem,4vw,4rem);line-height:1;margin:15px 0 8px;text-transform:uppercase}.playlist-heading p{color:var(--muted);max-width:700px;margin:0 0 13px;line-height:1.5}.playlist-actions{display:flex;align-items:center;gap:10px}.new-playlist-button{display:none;border:1px solid var(--line);background:#11110f;color:#c5c5bf;padding:11px 14px;align-items:center;gap:7px;cursor:pointer;white-space:nowrap}.stats{display:flex;gap:20px;color:#777;text-transform:uppercase;letter-spacing:.1em;font-size:.65rem}.stats span{display:flex;align-items:center;gap:6px}.spotify-button{border:0;border-radius:99px;text-decoration:none;white-space:nowrap;background:#1ed760;color:#06150b;font-weight:800;padding:14px 20px;display:flex;align-items:center;gap:9px;cursor:pointer}.spotify-button.small{font-size:.76rem;padding:10px 15px}.spotify-dot{width:14px;height:14px;border-radius:50%;background:currentColor;box-shadow:inset 0 0 0 4px #1ed760;border:2px solid currentColor}.success{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#1ed7601f;border:1px solid rgba(30,215,96,.35);color:#7cf0a5;padding:10px 12px 10px 18px;margin-bottom:14px}.success>span{font-weight:700}.success-actions{display:flex;align-items:center;gap:8px}.success a,.success button{display:flex;align-items:center;gap:7px;border:1px solid rgba(124,240,165,.35);background:#7cf0a514;color:#a1f5bf;padding:9px 12px;cursor:pointer;white-space:nowrap;text-decoration:none;font:inherit}.success .app-link{background:#1ed760;border-color:#1ed760;color:#06150b;font-weight:800}.track-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#444 transparent;scrollbar-width:thin;list-style:none;padding:0 8px 0 0;margin:0;border-top:1px solid var(--line)}.track-list li{min-height:72px;display:grid;grid-template-columns:36px 48px minmax(180px,1.4fr) minmax(130px,1fr) auto 45px 22px;gap:14px;align-items:center;border-bottom:1px solid #20201d;transition:background .15s}.track-list li:hover{background:#0e0e0c}.track-number,.duration,.album{color:#71716b;font-size:.75rem}.cover{width:42px;height:42px;background:#20201d;color:#62625d;display:grid;place-items:center;overflow:hidden}.cover img{width:100%;height:100%;object-fit:cover}.track-main{display:flex;flex-direction:column;gap:4px;min-width:0}.track-main strong,.track-main span,.album{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-main strong{font-size:.88rem}.track-main span{color:#8a8a84;font-size:.76rem}.unverified{color:#b8b885;border:1px solid #48483b;padding:3px 6px;font-size:.58rem;text-transform:uppercase;letter-spacing:.1em}.track-list a{color:#777}.error{margin-top:20px;border:1px solid #703a3a;background:#251313;color:#faa;padding:13px 16px;font-size:.82rem}.spin{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}footer{padding:0 5vw;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;color:#555;text-transform:uppercase;letter-spacing:.1em;font-size:.58rem}@media(max-width:850px){.workspace{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:20px;padding:22px 0}.refine-panel{display:grid;grid-template-columns:minmax(180px,.7fr) minmax(280px,1.3fr);align-items:end;gap:24px}.refine-panel>.text-button{display:none}.refine-panel h2{font-size:3rem;margin:10px 0}.refine-panel p{margin-bottom:0}.playlist-heading{align-items:center}.playlist-heading p,.album{display:none}.track-list li{grid-template-columns:28px 42px minmax(130px,1fr) auto 42px 20px;gap:9px}}@media(max-width:600px){.shell{grid-template-rows:62px minmax(0,1fr) 34px}.topbar{padding:0 18px}.demo-badge,.connected{display:none}.spotify-button.small{font-size:0;width:38px;height:38px;padding:0;justify-content:center}.spotify-button.small .spotify-dot{margin:0}.hero{width:90vw;padding:18px 0}.hero .eyebrow{font-size:.62rem}h1{font-size:clamp(3.4rem,16vw,4.5rem);margin:14px 0}.hero-copy{font-size:.88rem;margin-bottom:16px}.composer textarea{min-height:88px;padding:18px;font-size:.92rem}.composer-footer{align-items:stretch;flex-direction:column;padding:12px}.composer-footer span{display:none}.composer-footer button{width:100%}.examples{justify-content:flex-start;margin-top:12px;gap:6px}.examples button{padding:7px 9px}.examples button:nth-of-type(3){display:none}.workspace{width:90vw;grid-template-rows:auto minmax(0,1fr);padding:14px 0;gap:12px}.refine-panel{display:block}.refine-panel>div:first-child{display:none}.refine-composer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}.refine-composer textarea{min-height:50px;height:50px;resize:none;padding:14px}.refine-composer button{width:auto;height:40px;margin:5px;padding:0 13px;font-size:0}.refine-composer button svg{width:18px}.playlist-heading{padding-bottom:10px;gap:10px}.playlist-heading h3{font-size:2rem;margin:7px 0 4px}.playlist-heading .eyebrow,.playlist-heading .stats span:nth-child(2){display:none}.playlist-actions{gap:6px}.new-playlist-button{display:flex;width:42px;height:42px;padding:0;justify-content:center;font-size:0}.spotify-button{width:42px;height:42px;padding:0;justify-content:center;font-size:0}.success{padding:7px}.success>span{display:none}.success-actions{width:100%}.success a,.success button{flex:1;justify-content:center;padding:8px;font-size:.72rem}.track-list li{grid-template-columns:24px 42px minmax(100px,1fr) 36px}.duration,.unverified,.track-list li>a{display:none}footer span:first-child{display:none}}@media(max-height:720px)and (min-width:601px){.hero{padding:18px 0}h1{font-size:clamp(3.8rem,9vw,6.5rem);margin:14px 0}.hero-copy{margin-bottom:18px}.composer textarea{min-height:86px;padding:18px}.examples{margin-top:12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important}}
