:root { color-scheme: dark; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --text: #fff6ff; --muted: #b7a3ba; --hot: #f65caf; --cyan: #76ebee; --panel: rgba(47,22,50,.5); --stroke: rgba(242,157,214,.22); }
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#0c0710;color:var(--text);min-height:100vh}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.35;cursor:not-allowed}button:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.backdrop{pointer-events:none;z-index:-1;position:fixed;inset:0;background:radial-gradient(ellipse 70% 42% at 58% 5%,rgba(157,51,119,.44),transparent 78%),radial-gradient(ellipse 50% 45% at 85% 28%,rgba(55,93,130,.27),transparent 78%),radial-gradient(ellipse 42% 57% at 18% 58%,rgba(96,19,79,.2),transparent 76%),linear-gradient(170deg,#1a0b1b,#0b0610 63%,#130918)}.site-shell{max-width:1540px;margin:auto;padding:0 34px}.site-header{height:98px;display:flex;align-items:center;justify-content:space-between;gap:15px}.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0}.brand img{height:56px;width:56px;border-radius:12px;object-fit:cover;filter:drop-shadow(0 0 7px rgba(111,241,238,.25))}.brand-text{display:flex;flex-direction:column;font-size:29px;font-style:italic;font-weight:1000;line-height:.86;letter-spacing:-1.7px;transform:skew(-6deg);text-shadow:1px 2px 1px #000}.brand .hot{color:var(--hot)}.brand-sub{align-self:center;color:#ffdd4a;font-size:14px;font-style:italic;letter-spacing:4px;margin-top:9px}.bolt{color:var(--hot);letter-spacing:0}.header-right{display:flex;align-items:center;gap:21px}.domain{font-size:11px;letter-spacing:3px;color:#d0b0cd;font-weight:700}.tiny-divider{height:26px;width:1px;background:#75516d}.icon-btn{color:#f5d9f1;background:none;border:0;font-size:27px}.console{border:1px solid var(--stroke);border-radius:24px;overflow:hidden;background:linear-gradient(125deg,rgba(53,28,54,.66),rgba(32,21,37,.47));box-shadow:0 24px 50px rgba(3,1,9,.3),inset 0 1px rgba(255,255,255,.06);backdrop-filter:blur(32px)}.console-top{min-height:286px;display:flex;align-items:center;gap:38px;padding:26px 36px;position:relative}.hero-art-wrap{flex:none;width:224px;aspect-ratio:1;border:2px solid rgba(117,246,240,.66);padding:5px;border-radius:22px;box-shadow:0 0 24px rgba(59,237,233,.14),0 0 2px #37d5d0}.hero-art{width:100%;height:100%;object-fit:cover;border-radius:16px;display:block}.hero-meta{min-width:0;flex:1}.eyebrow,.channel-line,.section-kicker,.status-label,.library-count{font-size:11px;font-weight:700;letter-spacing:2.4px}.eyebrow{color:#cbb4c8;display:flex;align-items:center;gap:9px;letter-spacing:1.1px;font-weight:600;font-size:14px}.status-dot,.live-dot{width:8px;height:8px;display:inline-block;border-radius:50%;background:#706371}.status-dot.playing,.live-dot{background:#66ffc8;box-shadow:0 0 14px rgba(57,255,177,.75)}.status-dot.error{background:#ff7575;box-shadow:0 0 10px #ff6060}.channel-line{margin-top:12px;color:#e9acd0}.hero-meta h1{font-size:clamp(30px,3.15vw,53px);line-height:1.1;letter-spacing:-1.8px;margin:8px 0 10px;overflow-wrap:anywhere}.subline{font-size:clamp(15px,1.4vw,20px);color:#d2bccf;line-height:1.4}.note{font-size:13px;color:#ae9baa;margin:10px 0 0;min-height:17px}.hero-actions{display:flex;align-items:center;gap:12px;margin-top:23px;color:#bda4ba;font-size:12px}.favorite-btn{background:linear-gradient(160deg,rgba(227,88,158,.28),rgba(106,42,98,.2));border:1px solid rgba(245,135,194,.4);border-radius:50%;width:48px;height:48px;color:#fff;font-size:30px;display:grid;place-items:center}.favorite-btn.active{color:#ff6ebc;box-shadow:0 0 20px rgba(245,91,174,.22)}.hero-right{align-self:flex-start;display:flex;flex-direction:column;gap:13px;align-items:flex-end;min-width:177px}.live-pill{font-size:10px;font-weight:800;letter-spacing:1.8px;color:#ccecdc;border:1px solid rgba(72,216,163,.28);background:rgba(19,95,72,.15);border-radius:50px;padding:8px 12px;display:flex;gap:7px;align-items:center}.live-dot{width:6px;height:6px}.privacy-line{max-width:185px;text-align:right;color:#9e7f9d;font-size:10px;line-height:1.5;letter-spacing:.7px}.console-bottom{border-top:1px solid rgba(255,255,255,.11);padding:15px 32px;display:grid;grid-template-columns:1fr 1.1fr 1fr;align-items:center;min-height:97px;background:rgba(19,11,24,.22)}.status-left{font-size:11px;color:#b9a4ba}.status-left strong{display:block;margin-top:8px;color:#f3d1e5;font-size:12px;letter-spacing:.5px}.status-label{color:#8e788d;font-size:9px}.transport{display:flex;align-items:center;gap:35px;justify-content:center}.transport-btn{width:50px;height:50px;border:1px solid rgba(245,160,222,.4);border-radius:50%;display:grid;place-items:center;background:linear-gradient(150deg,rgba(255,111,188,.16),rgba(75,30,71,.35));color:#fcecf9;transition:transform .16s,box-shadow .16s}.transport-btn:hover{transform:translateY(-2px);box-shadow:0 0 16px rgba(239,102,175,.17)}.transport-btn svg,.volume-row svg,.search-box svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}.transport-btn.primary{width:68px;height:68px;background:linear-gradient(140deg,#b94d90,#5b254f);border:2px solid var(--hot);box-shadow:0 0 28px rgba(255,79,179,.22)}.transport-btn.primary svg{width:30px;height:30px;fill:#fff;stroke:none}.volume-box{justify-self:end;min-width:190px}.volume-box label{color:#aa8daa;display:block;text-align:right;font-size:9px;letter-spacing:2px;font-weight:800}.volume-row{display:flex;align-items:center;gap:16px;margin-top:13px;color:#f7e8f5}.volume-row input{width:150px;accent-color:#f264b9;cursor:pointer}.section-line{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-top:34px}.section-kicker{color:#d98bbd}.section-line h2,.station-header h2{font-size:25px;letter-spacing:-.7px;margin:6px 0 0}.library-count{color:#948394}.carousel-shell{position:relative;margin:20px -20px 28px}.category-strip{display:flex;gap:10px;align-items:center;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:16px 29px 26px;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}.category-strip::-webkit-scrollbar{display:none}.category-card{border:1px solid rgba(255,255,255,.17);width:174px;height:199px;flex:0 0 174px;scroll-snap-align:center;border-radius:13px;position:relative;overflow:hidden;padding:0;background:#1f1330;box-shadow:0 12px 22px rgba(0,0,0,.27);transform:perspective(850px) rotateY(3deg) scale(.97);transition:transform .2s,border-color .2s,box-shadow .2s}.category-card .category-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.category-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.03) 20%,rgba(9,4,15,.85) 100%)}.category-card .category-label{position:absolute;z-index:1;bottom:16px;left:12px;right:12px;font-style:italic;font-weight:1000;font-size:24px;line-height:1;letter-spacing:-1px;text-shadow:0 2px 4px #000,0 0 12px #000;overflow-wrap:anywhere}.category-card .category-amount{position:absolute;z-index:1;top:10px;right:10px;font-size:10px;padding:5px 7px;background:rgba(9,6,12,.65);border:1px solid rgba(255,255,255,.2);border-radius:20px}.category-card.selected{border:2px solid var(--cyan);box-shadow:0 0 17px rgba(51,231,234,.5),0 18px 25px rgba(0,0,0,.35);transform:perspective(850px) rotateY(0) scale(1.05)}.category-card.selected .category-label{color:#fff}.category-card:hover:not(.selected){transform:perspective(850px) rotateY(0) translateY(-5px)}.genre-fallback{position:absolute;inset:0;background:radial-gradient(ellipse at 75% 15%,var(--glow),transparent 60%),linear-gradient(140deg,#231c38,#18101d);display:grid;place-items:center}.genre-fallback::before{content:"";position:absolute;width:85%;aspect-ratio:1;border:19px solid rgba(255,255,255,.07);border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.03),inset 0 0 15px rgba(0,0,0,.3)}.genre-fallback::after{content:"ϟ";color:rgba(255,255,255,.16);font-size:90px;font-weight:900;transform:rotate(-13deg)}.carousel-arrow{position:absolute;top:42%;transform:translateY(-50%);z-index:3;width:34px;height:54px;border:1px solid rgba(255,255,255,.15);color:#fff;background:rgba(18,10,20,.8);font-size:35px;border-radius:12px;display:grid;place-items:center;line-height:1}.carousel-arrow.left{left:2px}.carousel-arrow.right{right:2px}.station-browser{border-top:1px solid rgba(255,255,255,.09);padding-top:29px}.station-header{display:flex;align-items:center;justify-content:space-between;gap:24px}.results-count{font-size:12px;color:#ac91aa}.search-box{width:min(100%,330px);min-width:220px;display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:12px;background:rgba(45,25,46,.65);border:1px solid rgba(255,255,255,.17);color:#a68ba2}.search-box svg{width:17px;height:17px}.search-box input{min-width:0;background:transparent;border:0;outline:0;width:100%;color:white;font-size:13px}.search-box input::placeholder{color:#a38aa0}.station-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}.station-item{min-width:0;text-align:left;display:flex;align-items:center;gap:13px;padding:12px;border:1px solid rgba(255,255,255,.1);background:rgba(38,19,40,.42);border-radius:14px;color:white;position:relative;transition:background .15s,border .15s}.station-item:hover{background:rgba(92,38,81,.46);border-color:rgba(246,115,186,.39)}.station-item.playing{border-color:rgba(99,240,239,.65);background:rgba(37,74,80,.18)}.station-art{width:56px;height:56px;flex:none;border-radius:10px;object-fit:cover;background:#322037}.station-avatar{display:grid;place-items:center;background:radial-gradient(circle at top right,var(--glow),transparent 70%),#342039;font-size:18px;font-weight:900;color:#ffdeef}.station-text{min-width:0;flex:1}.station-num{font-size:10px;font-weight:800;letter-spacing:1.2px;color:#ec85bf}.station-title{font-weight:750;margin:5px 0;font-size:13px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.station-genre{font-size:11px;color:#a99baa;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.station-star{align-self:start;background:none;border:0;color:#b3a0b0;font-size:23px;line-height:24px;padding:2px 3px}.station-star.active{color:#ff6ebc}.station-star:hover{color:white}.no-results{font-size:14px;color:#cdaec8;text-align:center;padding:30px}.site-footer{border-top:1px solid rgba(255,255,255,.11);margin-top:45px;padding:26px 0 40px;display:flex;justify-content:space-between;gap:15px;color:#9e8b9e;font-size:11px;line-height:1.7}.site-footer strong{color:#e7bbd8}.about-dialog{position:fixed;max-width:min(520px,calc(100vw - 28px));background:#29182c;color:white;border:1px solid rgba(251,127,200,.38);border-radius:18px;padding:29px;box-shadow:0 30px 100px #000}.about-dialog::backdrop{background:rgba(0,0,0,.75);backdrop-filter:blur(6px)}.about-dialog form{position:relative}.about-dialog h2{margin:6px 0 16px;font-size:26px}.about-dialog p{line-height:1.65;color:#d1c0d0;font-size:14px}.modal-close{position:absolute;right:0;top:0;border:0;background:none;color:white;font-size:20px}.modal-done{background:var(--hot);color:#270c26;border:0;padding:12px 22px;border-radius:9px;font-weight:800;margin-top:9px}
@media (max-width:1000px){.console-top{gap:22px;padding:22px}.hero-art-wrap{width:186px}.hero-right{display:none}.status-left{display:none}.console-bottom{grid-template-columns:1fr auto}.volume-box{min-width:160px}.station-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:670px){.site-shell{padding:0 16px}.site-header{height:75px}.brand img{height:42px;width:42px}.brand-text{font-size:21px}.brand-sub{font-size:10px}.domain,.tiny-divider{display:none}.console{border-radius:18px}.console-top{display:grid;grid-template-columns:115px 1fr;padding:17px;gap:16px;min-height:0}.hero-art-wrap{width:115px;border-radius:16px;padding:3px}.hero-art{border-radius:12px}.hero-meta h1{font-size:25px;letter-spacing:-.6px;margin:7px 0}.channel-line{font-size:9px;margin-top:10px;letter-spacing:1px}.eyebrow{font-size:12px}.subline{font-size:13px}.note{display:none}.hero-actions{margin-top:14px}.favorite-btn{height:36px;width:36px;font-size:24px}.hero-actions #favorite-hint{display:none}.console-bottom{grid-template-columns:1fr;gap:12px;padding:12px}.transport{gap:34px;order:0}.transport-btn{height:43px;width:43px}.transport-btn.primary{width:56px;height:56px}.volume-box{order:1;min-width:0;width:min(240px,100%);justify-self:center}.volume-box label{display:none}.volume-row{margin-top:0;justify-content:center}.volume-row input{width:145px}.section-line h2,.station-header h2{font-size:22px}.carousel-shell{margin-left:-16px;margin-right:-16px}.category-card{width:138px;flex-basis:138px;height:165px}.category-card .category-label{font-size:21px}.station-header{align-items:stretch;flex-direction:column;gap:13px}.search-box{width:100%}.station-grid{grid-template-columns:1fr;gap:9px}.site-footer{flex-direction:column;gap:6px}.library-count{font-size:9px}.carousel-arrow{height:40px;width:27px;font-size:28px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::after,*::before{transition:none!important;animation:none!important}}
/* Reset native button styling for the station rows. */
.station-art-button,.tune-text{border:0;background:none;color:inherit;padding:0;text-align:left;cursor:pointer;min-width:0}
.station-art-button{flex:none;display:block;height:56px;width:56px}.station-art-button .station-art{display:block}.tune-text{flex:1;display:block}.station-art-button:focus-visible,.tune-text:focus-visible{outline:2px solid var(--cyan);border-radius:5px}