*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;color:#fff}
body{min-height:100vh;background:#120d09 url("background.png") center/cover fixed no-repeat;overflow-x:hidden}
.shade{position:fixed;inset:0;z-index:0;background:linear-gradient(180deg,rgba(0,0,0,.64),rgba(0,0,0,.43) 45%,rgba(0,0,0,.72))}
.topbar{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:22px 38px}
.brand{display:flex;align-items:center;gap:10px;font-size:16px;white-space:nowrap}
.brand strong{font-weight:700}.collab{color:#e9c47e}.bw{font-size:25px;font-weight:950;letter-spacing:-3px;margin-right:5px}
.close-btn{border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.16);backdrop-filter:blur(12px);color:#fff;border-radius:28px;padding:12px 20px;font-size:15px;cursor:pointer}
.close-btn:hover{background:rgba(255,255,255,.12)}
.landing-content,.home-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center}
.landing-content{min-height:calc(100vh - 105px);justify-content:center;padding-bottom:80px}
.tiny{font-size:12px;letter-spacing:5px;color:#edc57d;margin-bottom:15px}
.landing h1{font-size:clamp(76px,10vw,140px);line-height:.9;margin:0;font-weight:850}
.landing p{font-size:21px;margin:25px 0 34px;color:#eee}
.start-btn{width:310px;padding:18px 25px;border:1px solid #f1ce8d;border-radius:17px;background:linear-gradient(135deg,#f4d18e,#dba95f);color:#17110b;font-size:21px;font-weight:800;cursor:pointer;box-shadow:0 18px 45px rgba(0,0,0,.3)}
.start-btn span{float:right;font-size:27px;line-height:20px}
.home-content{padding:46px 22px 120px}
.home-content h1{font-size:64px;line-height:1;margin:0;font-weight:850}
.subtitle{font-size:22px;letter-spacing:7px;color:#eac17b;margin-top:8px}
.welcome{font-size:20px;margin:28px 0 30px}
.search-box{width:min(820px,94vw);height:78px;display:flex;align-items:center;border:1px solid rgba(255,255,255,.28);border-radius:42px;background:rgba(7,7,7,.72);backdrop-filter:blur(16px);box-shadow:0 18px 45px rgba(0,0,0,.25);padding:0 22px}
.search-icon{font-size:35px;color:#ddd;line-height:1}
.search-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-size:20px;padding:0 15px}
.search-box input::placeholder{color:#bdbdbd}
.search-box .divider{height:42px;width:1px;background:rgba(255,255,255,.35)}
.search-box button{border:0;background:transparent;color:#fff;font-size:34px;cursor:pointer;padding-left:20px}
.cards{display:grid;grid-template-columns:repeat(4,minmax(185px,260px));gap:24px;margin-top:38px}
.card{min-height:290px;border:1px solid rgba(229,190,119,.36);border-radius:20px;background:rgba(10,9,8,.70);backdrop-filter:blur(14px);color:#fff;padding:24px 20px;cursor:pointer;transition:.22s;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 15px 40px rgba(0,0,0,.2)}
.card:hover{transform:translateY(-7px);border-color:#e9c37b;background:rgba(20,16,12,.82)}
.card-icon{height:78px;font-size:60px;line-height:70px;color:#f0c77e;font-weight:700}
.card-icon.music{font-size:75px}.card-icon.cloud{font-size:66px}
.card h2{font-size:23px;margin:12px 0 12px}.card p{font-size:14px;line-height:1.55;color:#d7d7d7;margin:0;min-height:44px}
.action{margin-top:auto;background:rgba(196,147,75,.15);padding:12px 27px;border-radius:20px;color:#efc87f;font-size:14px;min-width:130px}.action b{font-size:18px;margin-left:16px}
footer{position:fixed;z-index:3;bottom:17px;left:0;right:0;text-align:center;font-size:12px;color:#ddd}
.bottom-nav{position:fixed;z-index:4;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:2px;padding:5px 8px;border:1px solid rgba(255,255,255,.13);background:rgba(5,5,5,.74);backdrop-filter:blur(15px);border-radius:25px}
.bottom-nav button{width:48px;height:35px;border:0;border-radius:18px;background:transparent;color:#eee;font-size:20px;cursor:pointer}
.bottom-nav button.active{background:rgba(214,164,80,.24);color:#f0c77e}
#toast{position:fixed;z-index:20;left:50%;bottom:65px;transform:translate(-50%,12px);opacity:0;pointer-events:none;padding:13px 18px;border:1px solid #d9ad63;border-radius:12px;background:#111;color:#fff;transition:.25s}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1050px){.cards{grid-template-columns:repeat(2,minmax(210px,280px))}}
@media(max-width:650px){.topbar{padding:17px 15px}.brand strong{font-size:14px}.collab{display:none}.close-btn{padding:10px 14px}.close-btn span{display:none}.home-content{padding-top:35px}.home-content h1{font-size:43px}.subtitle{font-size:14px;letter-spacing:4px}.search-box{height:65px}.search-box input{font-size:16px}.cards{grid-template-columns:1fr;width:min(330px,92vw)}footer{position:relative;margin-top:-65px;padding-bottom:75px}.bottom-nav{bottom:10px}}