:root{--bg:#070707;--ink:#f5f1e8;--muted:#a7a095;--line:rgba(245,241,232,.14);--hot:#d8ff63;--pink:#ff5ba7;--blue:#5b6cff;--player:104px}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;background:radial-gradient(circle at 15% 10%,rgba(216,255,99,.18),transparent 28%),radial-gradient(circle at 90% 20%,rgba(255,91,167,.16),transparent 26%),var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;overflow-x:hidden;padding-bottom:var(--player)}a{color:inherit;text-decoration:none}button,input,select{font:inherit}.wb-site-header{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:22px 34px;mix-blend-mode:difference}.wb-logo{text-transform:uppercase;letter-spacing:.12em;font-weight:900}.wb-site-header nav{display:flex;gap:20px;align-items:center}.wb-site-header ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}.wb-app{min-height:100vh;padding:110px clamp(18px,4vw,64px) 80px}.wb-hero{min-height:72vh;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);gap:40px;align-items:end;border-bottom:1px solid var(--line);padding-bottom:6vh}.wb-hero.compact{min-height:34vh;display:block}.wb-kicker,.wb-card-meta p{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--hot);font-weight:800}.wb-hero h1,.wb-detail h1{font-size:clamp(58px,13vw,190px);line-height:.78;letter-spacing:-.09em;margin:0;text-transform:uppercase;max-width:1200px}.wb-hero-copy{font-size:clamp(18px,2.2vw,30px);line-height:1.08;color:var(--muted);max-width:520px}.wb-marquee{display:flex;gap:6vw;white-space:nowrap;overflow:hidden;border-bottom:1px solid var(--line);padding:28px 0;margin-bottom:42px}.wb-marquee span{font-size:clamp(42px,9vw,132px);line-height:.8;text-transform:uppercase;letter-spacing:-.08em;color:transparent;-webkit-text-stroke:1px rgba(245,241,232,.5)}.wb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}.wb-card{position:relative;min-height:390px;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:rgba(255,255,255,.045);backdrop-filter:blur(18px);transform-origin:center bottom}.wb-cover{all:unset;cursor:pointer;display:block;position:absolute;inset:0}.wb-cover img{width:100%;height:100%;object-fit:cover;filter:saturate(1.12) contrast(1.04);transition:transform .65s ease,filter .65s ease}.wb-card:hover .wb-cover img{transform:scale(1.08);filter:saturate(1.4) contrast(1.12) brightness(.82)}.wb-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.86),rgba(0,0,0,.05) 62%,rgba(0,0,0,.22))}.wb-cover span{position:absolute;z-index:2;right:18px;top:18px;width:78px;height:78px;display:grid;place-items:center;border-radius:50%;background:var(--hot);color:#000;font-size:13px;font-weight:900;transform:scale(.8);opacity:0;transition:.35s}.wb-card:hover .wb-cover span{transform:scale(1);opacity:1}.wb-card-meta{position:absolute;z-index:2;left:20px;right:20px;bottom:74px}.wb-card h3{font-size:clamp(26px,3vw,42px);line-height:.88;letter-spacing:-.06em;text-transform:uppercase;margin:.2em 0}.wb-actions{position:absolute;z-index:3;left:14px;right:14px;bottom:14px;display:flex;gap:8px;align-items:center}.wb-actions button,.wb-actions a,.wb-pill{border:1px solid rgba(255,255,255,.26);background:rgba(0,0,0,.36);color:var(--ink);border-radius:999px;padding:9px 12px;cursor:pointer;backdrop-filter:blur(12px)}.wb-like.is-liked{background:var(--pink);color:white;border-color:transparent}.wb-detail{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);gap:44px;align-items:start;min-height:80vh;padding-top:50px}.wb-detail-art{position:sticky;top:110px;border-radius:34px;overflow:hidden;min-height:560px}.wb-detail-art img{width:100%;height:100%;object-fit:cover}.wb-content{font-size:20px;line-height:1.55;color:var(--muted);max-width:760px}.wb-detail .wb-card{max-width:460px;margin-top:32px}.wb-section-title{font-size:clamp(34px,6vw,90px);line-height:.9;letter-spacing:-.06em;text-transform:uppercase}.wb-playlists{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.wb-playlists article{border:1px solid var(--line);border-radius:22px;padding:24px;background:rgba(255,255,255,.05)}.wb-bottom-player{position:fixed;z-index:100;left:16px;right:16px;bottom:16px;min-height:88px;border:1px solid var(--line);border-radius:28px;background:rgba(8,8,8,.86);backdrop-filter:blur(22px);display:grid;grid-template-columns:64px minmax(160px,300px) 1fr;gap:16px;align-items:center;padding:12px 16px;box-shadow:0 22px 80px rgba(0,0,0,.4)}.wb-now-thumb{width:64px;height:64px;object-fit:cover;border-radius:18px;background:#222}.wb-now{min-width:0}.wb-now strong,.wb-now span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-now span{color:var(--muted);font-size:13px}.wb-plyr-host>video,.wb-plyr-host>audio,.wb-plyr-host>#wb-embed{display:none}.wb-plyr-host .plyr{--plyr-color-main:var(--hot);border-radius:18px}.wb-modal{position:fixed;z-index:200;inset:0;background:rgba(0,0,0,.7);display:grid;place-items:center}.wb-modal[hidden]{display:none}.wb-modal>div{width:min(440px,92vw);border:1px solid var(--line);border-radius:28px;background:#111;padding:24px}.wb-modal input,.wb-modal select{width:100%;margin:8px 0 12px;padding:12px;border-radius:14px;border:1px solid var(--line);background:#050505;color:var(--ink)}.wb-modal button{border:0;border-radius:999px;padding:10px 14px;background:var(--hot);color:#000;font-weight:800;cursor:pointer}.wb-close{float:right}.wb-cursor{position:fixed;z-index:999;left:0;top:0;width:20px;height:20px;border:1px solid var(--ink);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);opacity:.55}@media (max-width:800px){.wb-site-header{padding:18px}.wb-site-header nav{gap:12px}.wb-hero,.wb-detail{grid-template-columns:1fr;min-height:auto}.wb-hero{padding-top:100px}.wb-detail-art{position:relative;top:auto;min-height:360px}.wb-bottom-player{grid-template-columns:48px 1fr;right:8px;left:8px}.wb-plyr-host{grid-column:1/-1}.wb-now-thumb{width:48px;height:48px}.wb-app{padding-left:16px;padding-right:16px}.wb-cursor{display:none}}

/* Wavebox 0.2 landing page, inspired by the referenced mirror/mousemove GSAP CodePen */
.wb-landing{position:relative;min-height:calc(100vh - 20px);padding:92px 0 90px;color:#fff;overflow:hidden}.wb-landing:before{content:"";position:absolute;inset:-15vh -12vw;background:radial-gradient(circle at 70% 25%,rgba(255,255,255,.10),transparent 26%),radial-gradient(circle at 15% 82%,rgba(212,255,91,.12),transparent 28%);pointer-events:none}.wb-landing-copy{position:absolute;z-index:4;left:0;top:12vh;width:min(58vw,900px);mix-blend-mode:difference}.wb-landing-title{font-family:Georgia,'Times New Roman',serif;font-size:clamp(80px,16vw,232px);font-weight:300;line-height:.76;letter-spacing:-.105em;text-transform:lowercase;margin:0 0 22px -0.06em}.wb-landing-line{width:min(57vw,780px);overflow:hidden;border-top:1px solid rgba(255,255,255,.45);border-bottom:1px solid rgba(255,255,255,.45);padding:9px 0;white-space:nowrap;text-transform:uppercase;font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.78)}.wb-landing-line div{display:flex;gap:36px;animation:wbLandingLine 16s linear infinite}.wb-landing-text{width:min(420px,40vw);font-size:clamp(17px,1.4vw,23px);line-height:1.28;margin:34px 0 28px 10vw;color:rgba(255,255,255,.82)}.wb-landing-cta{margin-left:10vw;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.25);color:#fff;border-radius:999px;padding:15px 22px;text-transform:uppercase;letter-spacing:.12em;cursor:pointer;backdrop-filter:blur(16px)}.wb-mirror{position:absolute;z-index:2;right:3vw;top:7vh;width:min(46vw,660px);height:78vh;min-height:560px}.wb-banner-img{position:absolute;inset:7% 12% 4% 12%;border-radius:999px 999px 22px 22px;overflow:hidden;opacity:.9;filter:saturate(1.05) contrast(1.06)}.wb-banner-img img,.wb-mirror img{width:100%;height:100%;object-fit:cover}.wb-mirror-stage{position:absolute;inset:0;perspective:1200px}.wb-mirror-item{position:absolute;top:14%;width:31%;height:70%;overflow:hidden;transform-style:preserve-3d}.wb-mirror-0{left:0;transform:rotateY(-18deg) skewY(-2deg)}.wb-mirror-1{left:34.5%;transform:translateY(-2%) scale(1.05)}.wb-mirror-2{right:0;transform:rotateY(18deg) skewY(2deg)}.wb-mirror-img{position:absolute;inset:0;border-radius:999px 999px 18px 18px;overflow:hidden}.wb-mirror-mask{clip-path:polygon(0 0,100% 0,82% 100%,14% 100%);filter:brightness(.7)}.wb-mirror-over{position:absolute;z-index:3;bottom:6%;width:22%;height:32%;border-radius:999px 999px 18px 18px;overflow:hidden;opacity:0;filter:brightness(1.35);box-shadow:0 0 54px rgba(255,255,255,.16)}.wb-mirror-over span{position:absolute;inset:0;background:linear-gradient(95deg,transparent,rgba(255,255,255,.32),transparent);mix-blend-mode:screen}.wb-mirror-over-left{left:10%}.wb-mirror-over-center{left:39%}.wb-mirror-over-right{right:10%}.wb-banner-info{position:absolute;right:0;bottom:8%;display:flex;align-items:end;gap:28px;text-transform:uppercase;font-size:12px;letter-spacing:.14em}.wb-banner-info strong{font-family:Georgia,'Times New Roman',serif;font-size:clamp(32px,5vw,74px);font-weight:300;line-height:.8;text-transform:none;letter-spacing:-.08em}.wb-banner-info nav,.wb-bottom-info nav{display:flex;gap:18px}.wb-banner-info a,.wb-bottom-info a{color:rgba(255,255,255,.72)}.wb-bottom-info{position:absolute;z-index:5;left:0;right:0;bottom:18px;display:flex;justify-content:space-between;align-items:center;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.7)}.wb-landing-cursor{position:fixed;z-index:998;left:50%;top:50%;width:0;height:0;pointer-events:none}.wb-landing-cursor button{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(.72);width:136px;height:136px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.18);color:#fff;text-transform:uppercase;font-size:12px;letter-spacing:.08em;opacity:0;transition:opacity .25s,transform .25s;backdrop-filter:blur(10px)}.wb-landing.is-watch .wb-landing-cursor button{opacity:1;transform:translate(-50%,-50%) scale(1)}@keyframes wbLandingLine{to{transform:translateX(-33.333%)}}
.wb-upload-wrap{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(320px,1.1fr);gap:48px;align-items:start;min-height:80vh;padding-top:110px}.wb-upload-form{border:1px solid var(--line);border-radius:34px;background:rgba(255,255,255,.055);padding:26px;backdrop-filter:blur(18px)}.wb-upload-form label{display:block;color:rgba(255,255,255,.74);font-size:13px;text-transform:uppercase;letter-spacing:.12em;margin:0 0 14px}.wb-upload-form input,.wb-upload-form textarea,.wb-upload-form select{width:100%;margin-top:8px;border:1px solid var(--line);border-radius:18px;background:#050505;color:#fff;padding:13px 14px;font:inherit;text-transform:none;letter-spacing:0}.wb-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.wb-upload-form button{border:0;border-radius:999px;background:var(--hot);color:#000;font-weight:900;padding:14px 18px;cursor:pointer}.wb-upload-status{color:var(--muted);min-height:24px}.wb-upload-status.is-error{color:#ff9fa7}.wb-upload-status.is-success{color:var(--hot)}
@media(max-width:900px){.wb-landing{min-height:900px}.wb-landing-copy{position:relative;top:auto;width:100%;mix-blend-mode:normal}.wb-landing-text,.wb-landing-cta{margin-left:0;width:auto}.wb-mirror{position:relative;right:auto;top:auto;width:100%;height:560px;margin-top:42px}.wb-bottom-info{position:relative;bottom:auto;margin-top:24px}.wb-upload-wrap{grid-template-columns:1fr}.wb-form-row{grid-template-columns:1fr}}