@import url('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;0,700;1,500;1,600&display=swap');
:root{--bg:#110f16;--panel:#191720;--panel2:#201b28;--ink:#f5eee8;--muted:#a9a0ad;--rose:#e9a9b9;--peach:#f1c9ad;--line:#37303d;--mono:"DM Mono",monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;background:radial-gradient(ellipse at 14% 5%,#302032 0,transparent 35%),radial-gradient(ellipse at 95% 30%,#292039 0,transparent 35%),var(--bg);color:var(--ink);font-family:"DM Sans",sans-serif;min-height:100vh}
.grain{position:fixed;inset:0;pointer-events:none;z-index:10;opacity:.13;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='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E")}
.topbar{max-width:1160px;margin:auto;padding:25px 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff13;position:relative;z-index:1}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;font-size:12px;letter-spacing:2px;font-weight:600}
.brand b{color:var(--rose);font-weight:600}
.brand-icon{font-size:27px;color:var(--rose)}
.top-note{font:10px var(--mono);letter-spacing:1.5px;color:var(--muted)}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#a8d6ae;box-shadow:0 0 12px #a8d6ae77;margin-right:8px}
main{max-width:1100px;margin:auto;padding:0 28px}
.intro{padding:64px 0 36px;text-align:center}
.kicker{font:10px var(--mono);letter-spacing:2px;color:var(--rose);margin:0 0 12px}
.intro h1{font:clamp(43px,7vw,76px)/1.04 "Playfair Display",Georgia,serif;letter-spacing:-1.8px;margin:0}
.intro h1 em{color:var(--rose);font-weight:500}
.intro-copy{font-size:14px;line-height:1.8;color:var(--muted);margin:20px auto 0;max-width:430px}
.listening-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(270px,.75fr);gap:20px;align-items:stretch}
.feature-card,.queue-card{border:1px solid #ffffff14;background:linear-gradient(145deg,#211c28e8,#17151de8);border-radius:22px;overflow:hidden;box-shadow:0 22px 70px #0003}
.feature-card{padding:18px}
.poster{min-height:390px;aspect-ratio:1.1/1;position:relative;overflow:hidden;border-radius:14px;background:linear-gradient(160deg,#392a4b 0%,#aa718a 43%,#e9b9a2 70%,#5c465f 100%);isolation:isolate}
.poster:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#17111c15,#19121d00 38%,#16121bdb 100%);z-index:1}
.poster-glow{position:absolute;width:280px;height:280px;left:50%;top:24%;transform:translate(-50%,-50%);border-radius:50%;background:#ffdbbc66;filter:blur(24px)}
.poster-top{position:absolute;top:20px;left:22px;right:22px;display:flex;justify-content:space-between;color:#fff1e9;font:9px var(--mono);letter-spacing:1.6px;z-index:2}
.sun{position:absolute;width:38%;aspect-ratio:1;border-radius:50%;background:linear-gradient(#fce2bd,#e8a6a7);top:17%;left:31%;box-shadow:0 0 50px #ffd5bc88}
.mountain{position:absolute;bottom:20%;width:120%;height:43%;left:-10%;clip-path:polygon(0 100%,0 65%,19% 36%,31% 60%,48% 8%,63% 52%,79% 27%,100% 70%,100% 100%);z-index:1}
.mountain-back{background:#77566f;bottom:20%;opacity:.8}
.mountain-front{background:#31283e;bottom:13%;transform:scaleX(-1);opacity:.96}
.poster-orb{position:absolute;top:31%;left:50%;transform:translateX(-50%);width:102px;height:102px;border:1px solid #fff8;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff5e9;font:42px/1 "Playfair Display",serif;z-index:2;text-shadow:0 2px 15px #40243c}
.poster-orb small{font:8px var(--mono);letter-spacing:2px;margin-top:5px}
.poster-bottom{position:absolute;left:24px;right:24px;bottom:26px;z-index:2;display:flex;flex-direction:column;align-items:flex-start}
.poster-caption,.poster-sub{font:9px var(--mono);letter-spacing:2px;color:#f6d7d1}
.poster-line{height:1px;background:#ffffff88;width:40px;margin:10px 0}
.poster-song{font:clamp(24px,4vw,38px)/1.05 "Playfair Display",Georgia,serif;max-width:100%;overflow-wrap:anywhere}
.poster-sub{margin-top:8px;color:#fff0e8;letter-spacing:1.3px}
.equalizer{position:absolute;right:22px;bottom:29px;z-index:3;display:flex;gap:3px;align-items:center;height:30px}
.equalizer i{display:block;width:3px;height:5px;border-radius:4px;background:#f7d6d0;opacity:.9}
.equalizer.active i{animation:wave .8s ease-in-out infinite alternate}
.equalizer i:nth-child(2n){animation-delay:.15s}.equalizer i:nth-child(3n){animation-delay:.3s}.equalizer i:nth-child(4n){animation-delay:.45s}
@keyframes wave{from{height:4px}to{height:27px}}
.player-panel{padding:24px 8px 8px}
.track-meta{display:flex;justify-content:space-between;gap:12px;align-items:center}
.track-meta h2{font:clamp(22px,3vw,30px)/1.2 "Playfair Display",Georgia,serif;margin:0;overflow-wrap:anywhere}
.track-meta p:not(.kicker){color:var(--muted);font-size:12px;margin:7px 0 0}
.vinyl{width:56px;height:56px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:repeating-radial-gradient(circle,#141217 0 3px,#38313d 4px 5px);border:1px solid #ffffff28;color:var(--rose);font-size:18px;animation:spin 8s linear infinite;animation-play-state:paused}
.vinyl.active{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
.player-host{position:relative;margin-top:20px;overflow:hidden;border-radius:12px;background:#0e0d12;min-height:60px}
#player{width:100%;aspect-ratio:16/9;position:relative;z-index:1}
#player iframe{width:100%;height:100%;border:0}
.player-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;background:#17131c;color:#c9bac8;font-size:12px;padding:12px;text-align:center;z-index:2}
.player-placeholder.hidden{display:none}
.play-symbol{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--rose);color:#241722;flex-shrink:0}
.control-row{display:flex;justify-content:center;align-items:center;gap:13px;margin-top:19px}
.control{height:42px;min-width:42px;border:1px solid #ffffff20;background:#ffffff08;color:var(--ink);border-radius:50%;font-size:16px;cursor:pointer;transition:transform .2s,background .2s}
.control:hover{background:#ffffff18;transform:translateY(-2px)}
.main-control{width:54px;height:54px;background:var(--rose);border:0;color:#251923;font-size:19px;box-shadow:0 6px 22px #e9a9b933}
.sound{width:auto;border-radius:22px;padding:0 13px;font-size:12px}
.status{font-size:11px;color:var(--muted);text-align:center;min-height:15px;margin:15px 0 0}
.queue-card{padding:25px 20px;display:flex;flex-direction:column;min-height:100%}
.queue-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}
.queue-heading h2{font:25px "Playfair Display",Georgia,serif;margin:0}
.queue-count{font:9px var(--mono);letter-spacing:1px;color:var(--rose);border:1px solid #e9a9b933;padding:7px 8px;border-radius:20px}
.queue-description{font-size:12px;line-height:1.7;color:var(--muted);margin:15px 0 20px}
.playlist{display:flex;flex-direction:column;gap:8px;max-height:480px;overflow-y:auto;scroll-behavior:smooth;padding-right:3px}
.playlist::-webkit-scrollbar{width:4px}.playlist::-webkit-scrollbar-thumb{background:#554355;border-radius:5px}
.track{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:1px solid transparent;border-radius:12px;background:#ffffff05;color:var(--ink);padding:11px 10px;cursor:pointer;scroll-margin:12px}
.track.active{background:#e9a9b915;border-color:#e9a9b94d}
.track-number{font:11px var(--mono);color:#9d91a4;width:20px;flex-shrink:0}
.track-art{width:39px;height:39px;border-radius:8px;flex-shrink:0;display:grid;place-items:center;background:linear-gradient(145deg,#60405c,#e3a7a8);font-size:17px;color:#fff4e7}
.track-copy{min-width:0;flex:1}
.track-name{display:block;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-sub{display:block;color:var(--muted);font-size:10px;margin-top:5px}
.track-play{font-size:12px;color:var(--rose)}
.empty-queue{font-size:12px;color:var(--muted);line-height:1.7;padding:18px;border:1px dashed #ffffff22;border-radius:12px}
.queue-foot{margin-top:auto;padding-top:22px;color:#9d91a4;font:9px var(--mono);letter-spacing:1.4px}
.tiny-spark{color:var(--rose);font-size:15px;margin-right:7px}
.quote{display:flex;justify-content:center;align-items:center;gap:18px;text-align:center;padding:55px 10px 45px;color:var(--rose)}
.quote span{font:30px "Playfair Display",serif}
.quote p{font:italic 20px "Playfair Display",Georgia,serif;margin:0}
footer{max-width:1100px;margin:auto;padding:20px 28px 26px;border-top:1px solid #ffffff13;display:flex;justify-content:space-between;gap:12px;color:#817785;font:9px var(--mono);letter-spacing:1.2px}
@media(max-width:760px){.topbar{padding:20px 17px}.top-note{font-size:8px;letter-spacing:1px}main{padding:0 14px}.intro{padding:48px 0 30px}.intro h1{letter-spacing:-1px}.listening-layout{grid-template-columns:1fr}.feature-card{padding:12px}.poster{min-height:350px}.queue-card{padding:22px 16px}.playlist{max-height:360px}.quote{padding:40px 4px;gap:10px}.quote p{font-size:17px}footer{padding:18px 15px;flex-wrap:wrap}}
@media(max-width:380px){.brand{font-size:10px;letter-spacing:1px;gap:6px}.brand-icon{font-size:21px}.top-note{font-size:7px}.poster{min-height:315px}.poster-bottom{left:17px;right:17px;bottom:20px}.poster-top{left:17px;right:17px}.poster-orb{width:82px;height:82px;font-size:35px}.equalizer{right:15px;bottom:23px}.poster-sub{font-size:7px;letter-spacing:1px}}

/* Playlist setup + mobile swipe affordance */
.playlist-setup{margin-top:18px;padding:14px;border:1px solid #ffffff14;border-radius:14px;background:#ffffff04}.playlist-setup label{display:block;font:9px var(--mono);letter-spacing:1.4px;color:var(--rose);margin-bottom:9px}.playlist-input-row{display:flex;gap:8px}.playlist-input-row input{min-width:0;flex:1;background:#100e15;border:1px solid #ffffff20;border-radius:10px;color:var(--ink);padding:11px 12px;font:12px "DM Sans",sans-serif;outline:none}.playlist-input-row input:focus{border-color:#e9a9b980;box-shadow:0 0 0 3px #e9a9b91a}.playlist-input-row button{border:0;border-radius:10px;background:var(--rose);color:#251923;font-weight:700;font-size:11px;padding:0 13px;cursor:pointer}.playlist-setup p{font-size:10px;line-height:1.6;color:var(--muted);margin:9px 0 0}.swipe-hint{position:absolute;z-index:3;top:55px;left:50%;transform:translateX(-50%);padding:7px 10px;border:1px solid #ffffff45;border-radius:30px;background:#1b142a88;color:#fff0e8;font:8px var(--mono);letter-spacing:1.2px;white-space:nowrap;backdrop-filter:blur(8px)}.poster{touch-action:pan-y;user-select:none}@media(max-width:420px){.playlist-input-row{flex-direction:column}.playlist-input-row button{padding:11px}.swipe-hint{font-size:7px;top:48px}}


/* Radio mode and playlist prompt */
.playlist-modal{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:20px;background:#09070ddd;backdrop-filter:blur(14px)}
.playlist-modal.open{display:flex}
.playlist-modal-card{width:min(100%,420px);padding:30px 25px 24px;border:1px solid #e9a9b944;border-radius:24px;background:linear-gradient(145deg,#292031,#15121b);box-shadow:0 25px 90px #0009;text-align:center}
.modal-spark{display:grid;place-items:center;margin:0 auto 15px;width:48px;height:48px;border-radius:50%;background:#e9a9b91c;color:var(--rose);font-size:27px}
.playlist-modal-card h2{font:clamp(27px,7vw,36px)/1.1 "Playfair Display",Georgia,serif;margin:0 0 12px}
.playlist-modal-card>p:not(.kicker){font-size:12px;line-height:1.7;color:var(--muted);margin:0 0 19px}
.playlist-modal-card label{display:block;text-align:left;font:9px var(--mono);letter-spacing:1.4px;color:var(--rose);margin:0 0 8px}
.playlist-modal-card input{width:100%;background:#100e15;border:1px solid #ffffff25;border-radius:11px;color:var(--ink);padding:13px 12px;font:12px "DM Sans",sans-serif;outline:none}
.playlist-modal-card input:focus{border-color:#e9a9b980;box-shadow:0 0 0 3px #e9a9b91a}
#modalLoadBtn{width:100%;margin-top:11px;padding:13px;border:0;border-radius:11px;background:var(--rose);color:#251923;font-weight:700;cursor:pointer}
.modal-later{margin-top:12px;border:0;background:transparent;color:var(--muted);padding:8px 15px;cursor:pointer;font-size:11px}
.playlist-modal-card .modal-note{font-size:10px!important;margin:12px 0 0!important;color:#8f8494!important}
.radio-mode .player-host{height:0;min-height:0;margin:0;overflow:hidden;border-radius:0}
.radio-mode #player{width:100%;height:1px;min-height:1px;aspect-ratio:auto;opacity:0;pointer-events:none}
.screen-off-notice{margin:12px 0 0;padding:11px 13px;border:1px solid #e9a9b944;border-radius:12px;background:#e9a9b910;color:#d8c8d5;font-size:11px;line-height:1.6}
.screen-off-notice[hidden]{display:none}
#radioModeBtn[aria-pressed="true"]{background:#e9a9b922;border-color:#e9a9b977;color:var(--rose)}
@media(max-width:420px){.playlist-modal-card{padding:25px 18px 20px}}