*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#080808;color:#fff}.app{min-height:100vh;background:#080808}.nav{height:72px;display:flex;align-items:center;padding:0 5vw;gap:42px;position:sticky;top:0;z-index:20;background:#080808f0;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.brand{font-weight:900;letter-spacing:-1px;font-size:25px}.brand span{font-weight:400}.nav nav{display:flex;gap:22px}.nav button{border:0;background:none;color:#aaa;font-size:14px;cursor:pointer}.nav button:hover{color:#fff}.navRight{margin-left:auto;display:flex;gap:12px;align-items:center}.search{height:38px;width:240px;border:1px solid #333;border-radius:8px;display:flex;align-items:center;gap:8px;padding:0 11px;color:#aaa;background:#111}.search input{width:100%;background:none;border:0;outline:0;color:#fff}.iconBtn{border:1px solid #333!important;width:38px;height:38px;border-radius:50%;display:grid;place-items:center!important;color:#fff!important}.hero{min-height:620px;background-size:cover;background-position:center;display:flex;align-items:end}.heroCopy{padding:8vw 5vw 7vw;max-width:650px}.eyebrow{font-size:11px;letter-spacing:2px;color:#bbb;font-weight:700;margin-bottom:14px}.hero h1{font-size:clamp(38px,5vw,70px);line-height:.98;letter-spacing:-2px;margin:0 0 18px}.meta{color:#bbb;font-size:14px}.description{color:#ddd;line-height:1.65;max-width:550px}.actions{display:flex;gap:10px;margin-top:25px}.primary,.secondary{border:0;border-radius:7px;padding:12px 18px;display:flex;align-items:center;gap:8px;font-weight:700;cursor:pointer}.primary{background:#fff;color:#000}.secondary{background:#2a2a2a;color:#fff}.section{padding:42px 5vw}.sectionHead{display:flex;align-items:center;gap:5px;margin-bottom:18px}.sectionHead h2{font-size:21px;margin:0}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.card{position:relative;background:#111;border-radius:9px;overflow:hidden;cursor:pointer;transition:transform .2s}.card:hover{transform:translateY(-4px)}.card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}.cardOverlay{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;font-size:10px;color:#fff}.cardOverlay span{background:#000000a6;padding:5px 7px;border-radius:5px}.cardBody{padding:13px}.cardBody h3{font-size:15px;margin:0 0 5px}.cardBody p{font-size:12px;color:#888;margin:0}.chips{display:flex;flex-wrap:wrap;gap:10px}.chips button{background:#141414;color:#ddd;border:1px solid #292929;border-radius:999px;padding:10px 16px;cursor:pointer}.creatorBanner{margin:20px 5vw 70px;padding:38px;border:1px solid #282828;border-radius:14px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(120deg,#111,#0b0b0b)}.creatorBanner h2{font-size:30px;margin:0 0 8px}.creatorBanner p{color:#999;margin:0}.creatorBanner .primary{white-space:nowrap}footer{border-top:1px solid #1e1e1e;padding:35px 5vw;color:#777;display:flex;justify-content:space-between;align-items:center}footer p{font-size:12px}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;z-index:50;display:grid;place-items:center;padding:25px}.modalCard{max-width:900px;width:100%;background:#111;border:1px solid #292929;border-radius:14px;overflow:hidden;display:grid;grid-template-columns:42% 58%;position:relative}.modalCard>img{width:100%;height:100%;object-fit:cover;min-height:430px}.modalContent{padding:35px;position:relative}.modalContent h2{font-size:38px;line-height:1;margin:8px 0 12px}.modalContent p{color:#bbb;line-height:1.6}.close{position:absolute;right:15px;top:12px;border:0;background:#222;color:#fff;border-radius:50%;width:34px;height:34px;font-size:25px;cursor:pointer}.creator{display:flex;gap:8px;align-items:center}.notice{font-size:12px!important;color:#777!important;margin-top:25px}@media(max-width:850px){.nav nav{display:none}.search{width:150px}.grid{grid-template-columns:repeat(2,1fr)}.hero{min-height:560px}.creatorBanner{display:block}.creatorBanner .primary{margin-top:20px}.modalCard{grid-template-columns:1fr}.modalCard>img{min-height:230px;max-height:300px}.modalContent{padding:25px}}@media(max-width:500px){.nav{padding:0 18px;gap:10px}.navRight{gap:6px}.search{width:130px}.section{padding:32px 18px}.heroCopy{padding:40px 18px 50px}.grid{gap:10px}.creatorBanner{margin:10px 18px 50px;padding:25px}footer{padding:25px 18px;display:block}}.videoWrapper{width:100%;aspect-ratio:16 / 9;background:#000;position:relative;overflow:hidden}.videoWrapper video,.videoWrapper iframe{width:100%;height:100%;display:block;border:0}.playingCard{display:block!important;max-width:1100px!important;width:95%!important;background:#090909!important}.playingCard .videoWrapper{width:100%;aspect-ratio:16 / 9}.playingCard .modalContent{padding:24px 30px 30px}.playingCard .modalContent h2{font-size:28px;margin-top:6px}.playingCard .notice{margin-top:12px}@media(max-width:600px){.playingCard{width:100%!important;max-height:95vh;overflow-y:auto}.playingCard .videoWrapper{aspect-ratio:16 / 9}.playingCard .modalContent{padding:20px}.playingCard .modalContent h2{font-size:24px}}@media(max-width:768px){.nav{padding:14px 16px;gap:12px;flex-wrap:wrap}.brand{font-size:22px}.nav nav{order:3;width:100%;display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}.nav nav button{flex-shrink:0;white-space:nowrap;padding:8px 12px;font-size:13px}.navRight{margin-left:auto}.search{width:140px}.search input{width:100%}.hero{min-height:520px;background-position:center}.heroCopy{padding:28px 20px;justify-content:flex-end}.heroCopy h1{font-size:32px;line-height:1.05}.description{font-size:14px;line-height:1.5}.actions{flex-wrap:wrap}.section{padding:28px 16px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card img{height:230px;object-fit:cover}.cardBody{padding:10px}.cardBody h3{font-size:14px}.cardBody p{font-size:12px}.cardOverlay{font-size:10px}.myListPage{min-height:60vh}.emptyState{padding:40px 20px;text-align:center}.chips{display:flex;flex-wrap:wrap;gap:8px}.chips button{font-size:12px;padding:8px 12px}.creatorBanner{margin:20px 16px;padding:24px 20px;flex-direction:column;align-items:flex-start;gap:20px}.modal{padding:12px}.modalCard{width:100%;max-height:92vh;overflow-y:auto}.modalContent{padding:20px}.modalContent h2{font-size:24px}.videoWrapper video{width:100%;height:auto}}
