:root{--black:#17121f;--paper:#fffdf8;--lime:#dfff32;--coral:#ff4f91;--lilac:#9c6cff;--sky:#42d9ff;--yellow:#ffd92f;--blue:#635bff}
body{background:var(--paper)}
.topbar{background:rgba(255,253,248,.9);box-shadow:0 3px 0 rgba(23,18,31,.05)}
.login-btn{border:1px solid var(--black);border-radius:999px;padding:11px 16px;background:white;font-size:13px;font-weight:800;transition:.2s transform,.2s box-shadow}
.login-btn:hover{transform:translateY(-2px);box-shadow:3px 3px 0 var(--black)}
.creator-login{background:var(--black);color:#fff}
.live-hero{background:linear-gradient(135deg,#fffdf8 0,#fff9e9 100%)}
.live-hero .hero-copy:before{content:"";position:absolute;width:110px;height:20px;background:var(--yellow);left:5vw;top:84px;transform:rotate(-3deg);z-index:-1}
.live-hero h1 em{color:var(--coral);text-shadow:3px 3px 0 #fff,7px 7px 0 rgba(23,18,31,.12)}
.live-dot{display:inline-block;width:9px;height:9px;background:#ff315d;border-radius:50%;margin-right:8px;box-shadow:0 0 0 6px rgba(255,49,93,.15);animation:blink 1.1s infinite}
.pop{background:linear-gradient(100deg,#ff4f91,#ff7043);border:0;box-shadow:5px 5px 0 var(--black);transition:.2s}
.pop:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--black)}
.live-hero .hero-art{background:linear-gradient(145deg,#8c6bff 0%,#5fe2ff 48%,#dfff32 100%)}
.guardian{filter:brightness(0);z-index:4;animation:float 3.4s ease-in-out infinite}
.spark{position:absolute;font-size:54px;z-index:1;color:var(--yellow);animation:spin 4s linear infinite}.s1{top:9%;left:12%}.s2{right:9%;top:22%;color:white;font-size:34px;animation-direction:reverse}.s3{left:18%;bottom:17%;color:var(--coral);font-size:26px}
.confetti{position:absolute;inset:0;background-image:radial-gradient(circle at 15% 30%,#ff4f91 0 5px,transparent 6px),radial-gradient(circle at 75% 13%,#dfff32 0 6px,transparent 7px),radial-gradient(circle at 86% 71%,#ffd92f 0 5px,transparent 6px),linear-gradient(40deg,transparent 48%,rgba(255,255,255,.65) 49% 51%,transparent 52%);background-size:170px 170px,210px 210px,190px 190px,90px 90px;opacity:.8}
.alert-burst{left:2%;top:14%;width:min(430px,84%);border:3px solid;box-shadow:9px 9px 0 var(--yellow);animation:alertPop 2.8s ease-in-out infinite}.alert-burst:after{content:"BOOM!";position:absolute;right:-22px;top:-28px;background:var(--coral);padding:6px 10px;transform:rotate(8deg);font:900 12px "DM Sans"}
.ranking{right:2%;top:47%;border:3px solid;box-shadow:8px 8px 0 var(--lilac);animation:slideRank 3s ease-in-out infinite}.ranking .signal{background:var(--yellow)}
.hero-note span{display:inline-block;background:#ff315d;color:white;border-radius:999px;padding:5px 9px;margin-right:8px;font:800 11px "DM Sans";animation:blink 1s infinite}
.ticker{background:linear-gradient(90deg,#ff4f91,#8c6bff,#42d9ff);color:var(--black);border-block:2px solid}.ticker b{color:#fff}
.discover{background:linear-gradient(180deg,#fffdf8,#fff7ca)}
.creator-card{border-width:2px;box-shadow:7px 7px 0 var(--black);transition:.22s transform,.22s box-shadow}.creator-card:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--black)}
.portrait{border:1px solid var(--black)}.portrait span{background:#ff315d;border-radius:999px}.viewer{position:absolute;right:12px;bottom:12px;background:rgba(23,18,31,.85);color:white;border-radius:99px;padding:6px 10px;font-size:12px;font-style:normal}.live-goal{display:flex;justify-content:space-between;align-items:center;border-top:1px solid;padding:12px 4px 3px;font-size:13px}.live-goal b{color:#ff315d}
.ways{background:linear-gradient(145deg,#17121f,#2a1748)}.way-grid article{position:relative;overflow:hidden}.way-grid article:after{content:"";position:absolute;width:80px;height:80px;border-radius:50%;background:var(--coral);right:-55px;top:-55px;transition:.25s}.way-grid article:hover:after{transform:scale(2)}.way-grid article:nth-child(2) .way-icon{color:var(--coral)}.way-grid article:nth-child(3) .way-icon{color:var(--yellow)}.way-grid article:nth-child(4) .way-icon{color:var(--sky)}
.overlay-lab{display:grid;grid-template-columns:.85fr 1.15fr;gap:7vw;align-items:center;background:var(--yellow);overflow:hidden}.overlay-copy>p:not(.eyebrow){font-size:18px;line-height:1.7;max-width:560px}.url-box{display:flex;background:white;border:2px solid;border-radius:14px;padding:8px 8px 8px 16px;margin:30px 0 18px;box-shadow:7px 7px 0 var(--black)}.url-box span{flex:1;align-self:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:600 13px "DM Sans"}.url-box button{border:0;background:var(--black);color:white;border-radius:9px;padding:12px 15px;font-weight:800}.overlay-checks{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;font-weight:700}.stream-preview{min-height:520px;border:4px solid;background:linear-gradient(145deg,#6857ea,#302272);position:relative;box-shadow:14px 14px 0 var(--coral);overflow:hidden}.stream-top{display:flex;justify-content:space-between;color:white;padding:16px;font:700 12px "DM Sans"}.stream-top span{background:#ff315d;border-radius:99px;padding:5px 9px}.stream-person{width:190px;height:250px;background:linear-gradient(#ffc2df,#ff79b4);border-radius:100px 100px 10px 10px;position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:grid;place-items:center;font:900 78px "DM Sans"}.layer-alert{position:absolute;top:100px;left:7%;right:7%;background:white;border:3px solid;padding:18px;text-align:center;box-shadow:7px 7px 0 var(--lime);animation:alertPop 2.8s ease-in-out infinite}.layer-alert b,.layer-alert span{display:block}.layer-alert b{color:#ff315d;font-size:19px}.layer-alert span{margin-top:5px;font-size:13px}.layer-rank{position:absolute;right:14px;bottom:16px;margin:0;background:rgba(17,11,33,.88);color:white;padding:15px 17px;width:220px;list-style:none;border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(9px)}.layer-rank>b{font:700 11px "DM Sans";color:var(--yellow)}.layer-rank li{display:flex;gap:8px;padding-top:9px;font-size:12px}.layer-rank li i{color:var(--yellow);font-style:normal}.layer-rank strong{margin-left:auto}.burst-lines{position:absolute;left:8%;bottom:20%;font-size:28px;color:var(--lime);animation:spin 5s linear infinite}
.screens{background:linear-gradient(145deg,#d9f8ff,#eadfff)}.screen-tabs button{border-width:2px;font-weight:700}.browser-shell{border-width:2px;box-shadow:12px 12px 0 var(--lilac)}
.feature-spec{background:linear-gradient(135deg,var(--lime),#65e8ff)}.spec-columns article{border-width:2px;box-shadow:5px 5px 0 rgba(23,18,31,.9)}
.final-cta{background:linear-gradient(125deg,#ff4f91 0%,#ff7955 48%,#ffd92f 100%)}.cta-logins{display:flex;justify-content:center;gap:12px}.final-cta .pill:not(.light){background:var(--black);color:white}
.login-dialog{background:linear-gradient(145deg,#fff,#fff8cf);border:3px solid;box-shadow:12px 12px 0 var(--lilac);text-align:center;overflow:visible}.login-dialog h2{font-size:35px;margin:0}.login-dialog>p:not(.eyebrow){color:#666}.login-badge{position:absolute;right:-18px;top:-18px;background:var(--coral);border:2px solid;border-radius:50%;width:70px;height:70px;display:grid;place-items:center;font:900 15px "DM Sans";transform:rotate(10deg)}.social{display:block;width:100%;border:2px solid;border-radius:9px;padding:13px;margin:9px 0;font-weight:800}.kakao{background:#fee500}.google{background:white}.or{height:30px;border-bottom:1px solid #ddd;margin-bottom:28px}.or span{position:relative;top:19px;background:white;padding:0 12px;color:#888;font-size:12px}.login-dialog label{text-align:left}.login-dialog input{width:100%;border:2px solid;border-radius:9px;padding:13px;margin-top:7px}.login-dialog>small{display:block;color:#888;line-height:1.5;margin-top:15px}
@keyframes blink{50%{opacity:.45}}@keyframes float{50%{transform:translateY(-12px) rotate(-1deg)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes alertPop{0%,100%{transform:scale(.96) rotate(-1deg)}45%,55%{transform:scale(1.03) rotate(1deg)}}@keyframes slideRank{50%{transform:translateX(-12px)}}
@media(max-width:900px){.login-btn{padding:9px 12px}.fan-login{display:none}.overlay-lab{grid-template-columns:1fr}.stream-preview{min-height:480px}}
@media(max-width:620px){.creator-login{display:block;font-size:12px}.live-hero .hero-copy:before{top:42px}.alert-burst{top:9%}.ranking{top:48%;max-width:260px}.spark{font-size:36px}.overlay-lab{padding-inline:20px}.overlay-checks{display:grid}.layer-rank{width:190px}.cta-logins{flex-direction:column;align-items:center}.url-box{flex-direction:column;gap:8px}.url-box span{width:100%}}
@media(prefers-reduced-motion:reduce){.guardian,.spark,.alert-burst,.ranking,.live-dot{animation:none}}