:root{background:#0c1527;color:#f2f5fa}body{background:radial-gradient(ellipse at 85% 0%,#243353 0,transparent 45%),#0c1527}#hub{max-width:1180px;padding:22px 26px}.top{gap:12px}.top .brand{margin-right:auto}.release-tag{color:#a3eaf1;background:#23394a;border-color:#89d8e544}.top .round{background:#1c2c43;border-color:#a2c8e12f;width:43px;height:43px}#menuMusic[aria-pressed=true]{color:#88ecdb;background:#21433f}#menuMusic[aria-pressed=false]{color:#91a5ba}
.intro{padding:38px 0 28px;position:relative}.intro .eyebrow{color:#8be4e1;letter-spacing:2.2px}.intro h1{font-size:clamp(40px,7vw,72px);line-height:1.03;letter-spacing:-3px;max-width:800px}.intro h1 em{color:#a8eefd}.intro p{color:#b2c7dc;font-size:16px}.badges span{border:1px solid #91cbd237;background:#203247;color:#d0e9e9}.featured{border:1px solid #8ad9e94d;min-height:270px;background:linear-gradient(110deg,#203e56,#1f274b);box-shadow:0 16px 45px #0003;overflow:hidden;border-radius:28px}.featured>img{width:55%;height:100%;object-fit:cover;opacity:.96}.featured>div{background:linear-gradient(90deg,#18354bea,#18354b44);position:relative}.featured .tag{color:#9ce9e4;font-weight:800}.featured h2{letter-spacing:-1.5px}.featured .primary{background:#a6f0de;color:#12363d;border:0;border-radius:14px;box-shadow:0 6px 0 #0002}.home-stats{border:0;gap:12px;background:none}.home-stats>div{border:1px solid #a2c6ea2b;border-radius:18px;background:linear-gradient(140deg,#20324c,#182439);padding:18px}.home-stats b{color:#b2f2e6}.home-stats>div:nth-child(2) b{color:#ffcb91}.home-stats>div:nth-child(3) b{color:#c8b5ff}.home-actions{gap:12px}.home-actions button{border:1px solid #99bfec35;background:#21314a;border-radius:17px;color:#e7f4f6;padding:18px}.home-actions button:nth-child(1) i{color:#ffd883}.home-actions button:nth-child(2) i{color:#cdb5ff}.home-actions button:nth-child(3) i{color:#90e6ee}#journeyOpen{border:1px solid #d3b6ff45;background:linear-gradient(110deg,#3a2c55,#253548);border-radius:18px}#journeyOpen b{color:#ecdcff}#recent{border:1px solid #7ce3c62f;background:#1a3540;border-radius:17px}.library{padding-top:30px}.section-title h2{font-size:clamp(23px,4vw,31px);letter-spacing:-1px}.library-tools input,.library-tools select{background:#1b2c44;border:1px solid #a4c7ee33;border-radius:13px}#filters{gap:8px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}#filters button{flex:none;border-radius:12px;border:1px solid #9abce629;background:#192940}#filters button.active{background:#a0e8ef;color:#163249;border-color:#a0e8ef}#grid{gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}.card{--tile:#99e7ef;background:linear-gradient(155deg,color-mix(in srgb,var(--tile),#17243a 87%),#142238);border:1px solid color-mix(in srgb,var(--tile),transparent 65%);border-radius:23px;box-shadow:0 8px 24px #0002;overflow:hidden;transition:transform .2s,border-color .2s}.card:hover{transform:translateY(-4px);border-color:var(--tile)}.card .launch img{aspect-ratio:1.6;object-fit:cover;width:100%;border-bottom:2px solid color-mix(in srgb,var(--tile),transparent 60%)}.card .new{background:var(--tile);color:#152734;font-size:9px;padding:5px 9px;border-radius:8px;left:12px;top:12px}.card-info{padding:18px}.card .category{color:var(--tile);font-size:9px;font-weight:800;letter-spacing:1.3px}.card h3{font-size:22px;letter-spacing:-.7px;margin:8px 0}.card p{color:#b5c8db;line-height:1.5;font-size:13px;min-height:40px}.card-bottom{color:#cfdeeb}.card .arrow{background:var(--tile);color:#172636;border-radius:11px;width:34px;height:34px;display:grid;place-items:center;font-size:20px}.card-progress{background:#ffffff0e}.card-progress i{background:var(--tile)}.card .heart{background:#122139df;border-color:#b6cbed40;color:#e6f2f7;top:12px;right:12px}.card .heart.saved{color:#ffb2c2}.card-progress-label{color:#a7bfd5}.music-setting{display:flex;gap:12px;align-items:center}.music-setting input{width:130px}
@media(max-width:760px){#hub{padding:18px 18px 26px}.top{gap:8px}.brand img{width:34px}.brand span{font-size:14px}.release-tag{font-size:9px;padding:5px}.top .round{width:37px;height:37px}.intro{padding:30px 0 24px}.intro h1{font-size:48px;letter-spacing:-2px}.featured{min-height:230px;border-radius:24px}.featured>img{width:55%}.featured>div{padding:24px 20px}.featured h2{font-size:29px}.featured p{font-size:12px}.featured .primary{padding:13px 18px}.home-stats{gap:8px;margin:16px 0}.home-stats>div{padding:14px 8px;border-radius:15px}.home-stats b{font-size:25px}.home-stats span{font-size:10px}.home-actions{gap:8px}.home-actions button{padding:13px 8px;min-height:72px}.home-actions button span{font-size:11px}.section-title h2{max-width:240px}#grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card{border-radius:18px}.card-info{padding:13px}.card h3{font-size:19px}.card p{font-size:11px;min-height:49px}.card .category{font-size:8px;letter-spacing:.6px}.card-bottom{font-size:10px}.card .arrow{width:27px;height:27px}.card .new{font-size:8px;padding:4px 6px;top:9px;left:9px}.card .heart{width:31px;height:31px;font-size:19px;right:8px;top:8px}.card-progress-label{font-size:10px}.featured .tag{font-size:9px}}
@media(max-width:360px){#hub{padding:14px 12px}.top .brand span{font-size:12px}.top .round{width:33px;height:33px}.release-tag{padding:4px}.intro h1{font-size:41px}.featured h2{font-size:25px}.card h3{font-size:17px}}