@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--ink:#151817;--panel:#202321;--cream:#f6f3eb;--sage:#869b7e;--wine:#7f2020;--linen:#c9caac;--muted:rgba(246,243,235,.56);--line:rgba(201,202,172,.19);font-family:Manrope,Arial,sans-serif;font-synthesis:none}*{box-sizing:border-box}html,body{min-height:100%;margin:0;background:var(--ink);color:var(--cream)}body{font-family:Manrope,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}.login-page{min-height:100vh;display:grid;grid-template-columns:minmax(400px,.92fr) 1.08fr;background:#151817}.login-card{width:min(100%,640px);padding:clamp(36px,7vw,90px);margin:auto}.wordmark{display:inline-flex;align-items:center;gap:12px;color:var(--cream);font-size:13px;font-weight:800;letter-spacing:.13em;text-decoration:none}.wordmark em{display:inline-block;margin-left:4px;color:var(--sage);font-size:10px;font-style:normal;letter-spacing:.22em}.wordmark-dot{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(246,243,235,.38);border-radius:50%;font-size:15px;letter-spacing:-.05em}.eyebrow{color:var(--wine);font-size:10px;font-weight:800;letter-spacing:.18em}.login-card>.eyebrow{margin-top:74px;color:var(--sage)}h1{margin:17px 0 14px;font-size:clamp(43px,5vw,69px);line-height:.99;letter-spacing:-.067em;font-weight:600}.login-copy{max-width:335px;margin:0;color:var(--muted);font-size:13px;line-height:1.75}.login-form{display:grid;gap:10px;margin-top:38px}.login-form label{margin-top:10px;color:rgba(246,243,235,.76);font-size:11px;font-weight:600}.login-form input{width:100%;padding:14px 15px;border:1px solid rgba(201,202,172,.22);border-radius:4px;outline:0;background:rgba(246,243,235,.035);color:var(--cream);font-size:13px;transition:border-color .2s,background .2s}.login-form input::placeholder{color:rgba(246,243,235,.32)}.login-form input:focus{border-color:var(--sage);background:rgba(246,243,235,.06)}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;padding:14px 18px;border:0;border-radius:4px;color:var(--cream);font-size:11px;font-weight:700;letter-spacing:.03em;text-decoration:none;cursor:pointer;transition:transform .2s,background .2s}.button:hover{transform:translateY(-1px)}.button-primary{background:var(--wine)}.button-primary:hover{background:#912c2c}.button-secondary{background:var(--panel)}.button-wide{width:100%;margin-top:15px}.form-error{padding:11px 13px;border:1px solid rgba(216,107,107,.38);border-radius:4px;background:rgba(127,32,32,.17);color:#e9b0a5;font-size:11px;line-height:1.5}.login-foot{display:flex;align-items:center;gap:9px;margin-top:54px;color:rgba(246,243,235,.46);font-size:9px;letter-spacing:.06em}.status-dot,.live-indicator i{width:6px;height:6px;border-radius:50%;background:var(--sage);box-shadow:0 0 10px rgba(134,155,126,.5)}.login-foot-right{margin-left:auto;color:rgba(246,243,235,.28)}.login-art{position:relative;display:flex;min-height:100vh;flex-direction:column;justify-content:space-between;overflow:hidden;padding:40px 44px;background:radial-gradient(ellipse at 54% 49%,rgba(134,155,126,.12),transparent 37%),linear-gradient(135deg,#252a27,#111413 74%)}.login-art:after{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");content:"";opacity:.13;pointer-events:none}.art-kicker,.art-caption{position:relative;z-index:1;display:flex;justify-content:space-between;color:rgba(246,243,235,.45);font-size:9px;font-weight:600;letter-spacing:.16em}.art-center{position:relative;display:grid;place-items:center;min-height:480px}.orbit{position:absolute;width:min(36vw,480px);aspect-ratio:1;border:1px solid rgba(201,202,172,.11);border-radius:50%}.orbit:after{position:absolute;top:12%;left:17%;width:9px;height:9px;border-radius:50%;background:var(--wine);box-shadow:0 0 22px rgba(127,32,32,.9);content:""}.orbit-two{width:min(27vw,360px);border-color:rgba(134,155,126,.2);transform:rotate(37deg) scaleY(.55)}.orbit-two:after{top:auto;right:16%;bottom:14%;left:auto;background:var(--sage)}.sound-core{display:flex;align-items:center;justify-content:center;gap:8px;width:140px;height:140px;border:1px solid rgba(201,202,172,.24);border-radius:50%;background:rgba(21,24,23,.66);box-shadow:0 0 80px rgba(134,155,126,.1)}.sound-core span{width:3px;border-radius:4px;background:var(--sage);box-shadow:0 0 13px rgba(134,155,126,.32)}.sound-core span:nth-child(1),.sound-core span:nth-child(7){height:18px}.sound-core span:nth-child(2),.sound-core span:nth-child(6){height:38px}.sound-core span:nth-child(3),.sound-core span:nth-child(5){height:55px}.sound-core span:nth-child(4){height:72px}.art-caption span:last-child{max-width:220px;text-align:right;line-height:1.6}.player-app,.studio-app{min-height:100vh;background:var(--ink)}.player-header,.studio-header{display:flex;align-items:center;justify-content:space-between;padding:20px clamp(20px,5vw,76px);border-bottom:1px solid var(--line)}.header-right,.studio-header-right{display:flex;align-items:center;gap:26px}.identity{text-align:right}.identity-label{display:block;margin-bottom:5px;color:var(--sage);font-size:8px;font-weight:800;letter-spacing:.16em}.identity strong,.studio-user{font-size:11px;font-weight:600}.logout-button{padding:8px 0;border:0;background:none;color:rgba(246,243,235,.62);font-size:10px;text-decoration:none;cursor:pointer}.logout-button span{margin-left:9px;color:var(--sage)}.player-main,.studio-main{max-width:1120px;margin:0 auto;padding:44px clamp(20px,5vw,56px) 25px}.player-kicker{display:flex;align-items:center;justify-content:space-between;color:var(--sage);font-size:9px;font-weight:800;letter-spacing:.18em}.live-indicator{display:flex;align-items:center;gap:8px;color:rgba(246,243,235,.46);font-size:8px;letter-spacing:.12em}.live-indicator i{width:5px;height:5px;background:rgba(201,202,172,.36);box-shadow:none}.live-indicator.is-live i{background:#90ae76;box-shadow:0 0 11px rgba(144,174,118,.8);animation:pulse 1.8s infinite}@keyframes pulse{50%{opacity:.4;box-shadow:0 0 2px rgba(144,174,118,.2)}}.now-playing{display:grid;grid-template-columns:minmax(230px,.74fr) 1fr;align-items:center;gap:clamp(32px,7vw,90px);margin:52px 0 35px}.album-wrap{position:relative;max-width:345px;aspect-ratio:1}.album-cover{position:relative;width:100%;height:100%;overflow:hidden;border:1px solid rgba(201,202,172,.19);background:radial-gradient(ellipse at 28% 30%,rgba(134,155,126,.3),transparent 42%),radial-gradient(ellipse at 76% 80%,rgba(127,32,32,.39),transparent 44%),linear-gradient(135deg,#303832,#151817 76%);box-shadow:0 30px 90px rgba(0,0,0,.26)}.album-cover:before,.album-cover:after{position:absolute;width:78%;aspect-ratio:1;border:1px solid rgba(201,202,172,.17);border-radius:50%;content:"";transform:translate(23%,18%)}.album-cover:after{width:56%;transform:translate(38%,36%)}.cover-fallback{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;padding:24px}.cover-fallback span{color:rgba(246,243,235,.9);font-size:45px;font-weight:700;letter-spacing:-.1em}.cover-fallback small{color:rgba(246,243,235,.49);font-size:8px;letter-spacing:.16em;line-height:1.6;text-align:right}.cover-image{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}.album-sheen{position:absolute;inset:0;border:1px solid rgba(246,243,235,.05);pointer-events:none}.track-meta{min-width:0}.track-overline{margin-bottom:18px;color:var(--sage);font-size:9px;font-weight:800;letter-spacing:.18em}.track-meta h1{max-width:600px;margin:0;font-size:clamp(30px,5vw,57px);line-height:1.04;letter-spacing:-.065em;font-weight:600;overflow-wrap:anywhere}.track-meta p{margin:12px 0 33px;color:var(--muted);font-size:13px}.progress-track{height:2px;overflow:hidden;background:rgba(201,202,172,.18)}.progress-fill{width:0;height:100%;background:var(--sage);transition:width .2s linear}.time-row{display:flex;justify-content:space-between;margin-top:9px;color:rgba(246,243,235,.39);font-size:9px;font-variant-numeric:tabular-nums}.playback-controls{display:flex;align-items:center;gap:18px;padding:23px 0 35px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.play-button{display:grid;flex:0 0 54px;place-items:center;width:54px;height:54px;border:1px solid rgba(201,202,172,.35);border-radius:50%;background:var(--cream);cursor:pointer;transition:transform .2s,background .2s}.play-button:hover{transform:scale(1.045);background:white}.play-button:disabled{opacity:.6;cursor:wait}.play-icon{width:0;height:0;margin-left:3px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:10px solid var(--ink)}.pause-icon{width:10px;height:13px;border-right:3px solid var(--ink);border-left:3px solid var(--ink)}.play-caption{display:grid;gap:4px}.play-caption strong{font-size:12px;font-weight:700}.play-caption span{color:var(--muted);font-size:10px}.volume-control{display:flex;align-items:center;gap:9px;margin-left:auto;color:rgba(246,243,235,.55);font-size:11px}.volume-control input{width:100px;height:3px;accent-color:var(--sage)}.history-section{padding-top:41px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:16px}.section-heading .eyebrow{margin-bottom:8px}.section-heading h2{margin:0;font-size:23px;letter-spacing:-.045em;font-weight:600}.history-count{color:rgba(246,243,235,.4);font-size:9px}.history-list{border-top:1px solid var(--line)}.history-row{display:grid;grid-template-columns:28px 42px minmax(0,1fr) 76px 44px;align-items:center;gap:13px;min-height:68px;border-bottom:1px solid rgba(201,202,172,.11)}.history-row-new{animation:appear .35s ease-out}@keyframes appear{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.history-number,.history-time{color:rgba(246,243,235,.39);font-size:9px;font-variant-numeric:tabular-nums}.history-art{display:grid;place-items:center;width:39px;height:39px;overflow:hidden;background:var(--panel);color:var(--sage);font-size:12px;font-weight:700}.history-art img{width:100%;height:100%;object-fit:cover}.history-details{display:grid;gap:4px;min-width:0}.history-details strong{overflow:hidden;font-size:11px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.history-details span{overflow:hidden;color:var(--muted);font-size:9px;text-overflow:ellipsis;white-space:nowrap}.history-type{color:var(--sage);font-size:8px;font-weight:700;letter-spacing:.1em}.history-time{text-align:right}.history-empty{padding:23px 0;color:rgba(246,243,235,.43);font-size:10px}.player-footer{display:flex;justify-content:space-between;gap:12px;margin-top:46px;padding-top:16px;border-top:1px solid var(--line);color:rgba(246,243,235,.3);font-size:8px;letter-spacing:.1em}.toast{position:fixed;right:22px;bottom:22px;z-index:5;max-width:min(400px,calc(100vw - 44px));padding:13px 17px;border:1px solid rgba(201,202,172,.22);background:#202321;color:var(--cream);font-size:11px;line-height:1.5;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translateY(0)}.studio-main{max-width:1200px}.studio-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:56px 0 43px;border-bottom:1px solid var(--line)}.studio-hero h1{font-size:clamp(42px,6vw,70px)}.studio-hero h1 em{color:var(--sage);font-style:normal}.studio-hero p{color:var(--muted);font-size:12px}.studio-hero .button{min-width:200px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:20px 0 40px}.stat-card{display:flex;min-height:147px;flex-direction:column;padding:18px;border:1px solid var(--line);background:rgba(246,243,235,.018)}.stat-card>span{color:rgba(246,243,235,.44);font-size:8px;font-weight:700;letter-spacing:.11em}.stat-card>strong{margin:18px 0 auto;font-size:36px;letter-spacing:-.07em;font-weight:600}.stat-card>strong small{color:rgba(246,243,235,.4);font-size:19px}.stat-card>a,.panel-link{margin-top:15px;color:var(--sage);font-size:9px;text-decoration:none}.studio-columns{display:grid;grid-template-columns:1.05fr .95fr;gap:14px}.studio-panel{padding:20px;border:1px solid var(--line);background:rgba(246,243,235,.018)}.studio-panel .section-heading{margin-bottom:13px}.studio-panel .section-heading h2{font-size:21px}.action-row{display:flex;align-items:center;gap:13px;padding:14px 0;border-top:1px solid rgba(201,202,172,.11);color:var(--cream);text-decoration:none}.action-icon{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(201,202,172,.2);color:var(--sage);font-size:9px}.action-row>span:nth-child(2){display:grid;gap:4px}.action-row strong,.recent-row strong{font-size:10px;font-weight:600}.action-row small,.recent-row small{color:var(--muted);font-size:9px}.action-row>b{margin-left:auto;color:var(--sage);font-size:12px;font-weight:400}.recent-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid rgba(201,202,172,.11)}.recent-row>span:last-child{display:grid;gap:5px}.recent-play{display:grid;place-items:center;width:32px;height:32px;background:rgba(134,155,126,.12);color:var(--sage);font-size:11px}.panel-link{display:inline-block}.studio-main .player-footer{margin-top:42px}.studio-user{color:rgba(246,243,235,.69)}
@media(max-width:800px){.login-page{grid-template-columns:1fr}.login-art{display:none}.login-card{width:100%;max-width:540px}.login-card>.eyebrow{margin-top:57px}.player-main,.studio-main{padding-top:33px}.now-playing{grid-template-columns:minmax(170px,.7fr) 1fr;gap:28px;margin:39px 0 28px}.track-meta h1{font-size:clamp(27px,5vw,43px)}.stat-grid{grid-template-columns:repeat(2,1fr)}.studio-columns{grid-template-columns:1fr}.studio-hero{align-items:flex-start;flex-direction:column}.studio-hero .button{align-self:flex-start}}
@media(max-width:560px){.player-header,.studio-header{padding:15px 18px}.wordmark{font-size:10px;gap:8px;letter-spacing:.1em}.wordmark-dot{width:31px;height:31px;font-size:12px}.wordmark em{font-size:8px}.header-right{gap:13px}.identity strong{max-width:145px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}.identity-label{font-size:7px}.logout-button{font-size:9px}.player-main,.studio-main{padding:27px 18px 20px}.player-kicker{font-size:8px}.now-playing{grid-template-columns:1fr;gap:25px;margin:29px 0 24px}.album-wrap{width:min(70vw,300px);margin:0 auto}.track-meta h1{font-size:36px}.track-meta p{margin:9px 0 25px;font-size:11px}.playback-controls{padding:17px 0 25px;gap:13px}.play-button{flex-basis:48px;width:48px;height:48px}.play-caption strong{font-size:11px}.play-caption span{max-width:150px;font-size:9px}.volume-control{gap:5px}.volume-control input{width:66px}.history-section{padding-top:31px}.section-heading h2{font-size:20px}.history-row{grid-template-columns:22px 36px minmax(0,1fr) 37px;gap:8px;min-height:62px}.history-art{width:34px;height:34px}.history-type{display:none}.history-time{grid-column:4;grid-row:1}.player-footer{font-size:7px;letter-spacing:.045em}.player-footer span:nth-child(2){display:none}.studio-hero{padding:42px 0 30px}.studio-hero h1{font-size:46px}.stat-grid{gap:8px;padding:16px 0 25px}.stat-card{min-height:126px;padding:13px}.stat-card>span{font-size:7px}.stat-card>strong{font-size:30px}.stat-card>strong small{font-size:14px}.studio-panel{padding:15px}.studio-header-right{gap:10px}}
