:root{--bg:#0a0b0f;--panel:#12141a;--panel-soft:#171a21;--line:#292d38;--text:#f5f7fa;--muted:#9399a6;--acid:#c9ff3d;--red:#ff5a66}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(900px 480px at 72% -15%,rgba(129,93,255,.12),transparent 60%),var(--bg);color:var(--text);font:14px Manrope,Arial,sans-serif}.topbar{height:68px;display:flex;align-items:center;padding:0 max(24px,4.5vw);border-bottom:1px solid rgba(255,255,255,.07);background:rgba(10,11,15,.78);backdrop-filter:blur(16px);position:sticky;z-index:5;top:0}.logo{font-size:18px;font-weight:800;letter-spacing:-1px;text-decoration:none;color:#fff}.logo span{color:var(--acid)}nav{display:flex;gap:26px;margin-left:48px}nav a{color:#8d93a0;text-decoration:none;font-size:12px;font-weight:600}nav a.active,nav a:hover{color:#fff}.live-mark{margin-left:auto;display:flex;align-items:center;gap:8px;font:10px 'DM Mono';letter-spacing:.1em}.live-mark i,.stage-live i{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 14px var(--red)}.live-mark b{color:#a8afba;font-weight:400;margin-left:4px}main{max-width:1440px;margin:auto;padding:clamp(32px,5vw,68px) max(22px,4.5vw)}.live-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin:0 0 28px}.eyebrow,.chat-top p{margin:0 0 9px;color:var(--acid);font:10px 'DM Mono';letter-spacing:.14em}.live-head h1{font-size:clamp(34px,4vw,56px);line-height:.98;letter-spacing:-.06em;margin:0}.live-head h1+p{margin:12px 0 0;color:var(--muted);font-size:14px;max-width:620px}.share{border:1px solid #3a3f4d;border-radius:9px;background:rgba(255,255,255,.03);color:#fff;padding:10px 14px;cursor:pointer;font:11px 'DM Mono';transition:.2s}.share:hover{border-color:#727987;background:#1a1d25}.layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}.stage{overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#050608;box-shadow:0 30px 80px rgba(0,0,0,.32);position:relative}.stage:after{content:'';position:absolute;inset:0;pointer-events:none;border:1px solid rgba(255,255,255,.05);border-radius:14px}.stage-live{position:absolute;z-index:1;top:16px;left:16px;display:flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid rgba(255,255,255,.12);border-radius:7px;background:rgba(10,11,15,.7);backdrop-filter:blur(8px);font:10px 'DM Mono';letter-spacing:.1em}iframe{width:100%;display:block;border:0;background:#050505;aspect-ratio:16/9}.chat{height:min(720px,calc(100vh - 150px));min-height:590px;display:flex;flex-direction:column;overflow:hidden;position:sticky;top:88px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:linear-gradient(145deg,rgba(27,30,38,.94),rgba(17,19,25,.96));box-shadow:0 28px 65px rgba(0,0,0,.22)}.chat-top{min-height:76px;display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.08)}.chat-top p{margin-bottom:5px}.chat-top h2{margin:0;font-size:18px;letter-spacing:-.8px}.chat-meta{display:flex;align-items:center;gap:9px}.chat-meta>span:last-child{min-width:27px;padding:6px 7px;text-align:center;border-radius:6px;background:#252a35;color:#c9cdd5;font:10px 'DM Mono'}.presence{color:#ff9299;font:9px 'DM Mono';letter-spacing:.08em}.presence:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);margin-right:5px}.messages{flex:1;min-height:0;overflow:auto;padding:8px 18px 18px;scrollbar-color:#444a57 transparent;scrollbar-width:thin}.msg{display:flex;gap:10px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.055)}.msg:last-child{border-bottom:0}.person,.avatar{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;overflow:hidden;border-radius:9px;background:linear-gradient(135deg,#d2ff62,#90bf26);color:#12150b;font:bold 12px 'DM Mono'}.person img,.avatar img{width:100%;height:100%;object-fit:cover}.message-body{flex:1;min-width:0}.message-name{display:flex;justify-content:space-between;gap:8px;align-items:baseline}.message-name b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#fff;font-size:12px}.message-name time{white-space:nowrap;color:#737986;font:10px 'DM Mono'}.msg p{margin:4px 0 0;color:#c9cdd5;line-height:1.55;font-size:13px;overflow-wrap:anywhere}.message-actions{display:flex;justify-content:flex-end;margin-top:7px}.like{display:inline-flex;align-items:center;gap:4px;border:0;border-radius:6px;padding:3px 5px;background:transparent;color:#79818d;font:11px 'DM Mono';cursor:pointer}.like:hover{background:#252a32;color:#e2e5e9}.like.liked{color:#ff717b}.like span{font-size:10px}.empty{margin:0;padding:80px 12px;text-align:center;color:#828896;font-size:12px}.empty small{display:block;margin-top:8px;color:#686f7b;font-size:11px}.login-box,.composer{border-top:1px solid rgba(255,255,255,.08);padding:15px 16px;background:rgba(15,17,23,.58)}.login-copy{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px}.login-copy>span{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:rgba(201,255,61,.12);color:var(--acid)}.login-box strong{font-size:13px}.login-box p{margin:3px 0 0;color:#959ba6;font-size:11px;line-height:1.45}.login-box small,.composer>small{display:block;margin-top:8px;color:#9298a3;font-size:10px}.hidden{display:none!important}.identity{display:flex;align-items:center;gap:8px;margin-bottom:10px}.identity .avatar{width:27px;height:27px;flex-basis:27px;border-radius:8px}.identity strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.identity button{margin-left:auto;border:0;background:transparent;color:#9298a4;padding:4px;font:11px Manrope;cursor:pointer}.message-field{display:block;overflow:hidden;border:1px solid #363c49;border-radius:9px;background:#0d0f14;transition:border-color .2s}.message-field:focus-within{border-color:#88ae35}.composer textarea{width:100%;height:62px;border:0;outline:0;resize:none;background:transparent;color:#fff;padding:10px 10px 4px;font:12px Manrope}.composer textarea::placeholder{color:#6c727d}.message-field small{display:flex;justify-content:space-between;gap:5px;padding:0 10px 8px;color:#707783;font-size:9px}.message-field small b{font:9px 'DM Mono';color:#989eaa}.composer>button{width:100%;margin-top:9px;border:0;border-radius:7px;padding:10px 11px;background:var(--acid);color:#10130a;font:bold 11px 'DM Mono';cursor:pointer;transition:transform .18s,filter .18s}.composer>button:hover{filter:brightness(1.07);transform:translateY(-1px)}.composer>button span{float:right}.reveal{animation:rise .55s cubic-bezier(.2,.75,.2,1) both}.delay{animation-delay:.1s}@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@media(max-width:920px){.layout{grid-template-columns:1fr}.chat{height:620px;position:static}.messages{min-height:250px}}@media(max-width:600px){.topbar{height:60px;padding:0 18px}nav{display:none}.live-mark b{display:none}main{padding:32px 18px}.live-head{align-items:start;margin-bottom:20px}.live-head h1{font-size:36px}.live-head h1+p{font-size:13px}.share{padding:9px}.share span{display:none}.stage{border-radius:11px}.chat{height:610px;min-height:540px;border-radius:11px}.message-field small span{display:none}}
@media(max-width:700px){body{background:var(--bg)}.topbar{height:56px;padding:0 14px}.logo{font-size:17px}.live-mark{gap:6px;font-size:9px}.live-mark b{display:none}main{padding:24px 12px 32px}.live-head{display:block;margin-bottom:16px}.eyebrow{font-size:9px;margin-bottom:7px}.live-head h1{font-size:clamp(30px,9vw,40px);line-height:1.02}.live-head h1+p{margin-top:8px;font-size:12px;line-height:1.5}.share{position:absolute;right:14px;top:68px;width:36px;height:36px;padding:0;display:grid;place-items:center;border-radius:9px;font-size:15px}.share span{display:none}.layout{gap:16px}.stage{border-radius:10px}.stage-live{top:10px;left:10px;padding:6px 8px;font-size:9px}.chat{height:clamp(500px,72vh,610px);min-height:0;border-radius:10px}.chat-top{min-height:64px;padding:13px 14px}.chat-top h2{font-size:16px}.messages{padding:6px 14px 12px}.msg{padding:11px 0}.person{width:28px;height:28px;flex-basis:28px;border-radius:8px}.message-name b{font-size:12px}.msg p{font-size:13px;line-height:1.5}.login-box,.composer{padding:13px 14px}.composer textarea{height:54px;font-size:16px}.composer>button{min-height:42px;font-size:12px}.message-field small{padding-bottom:7px}.empty{padding:48px 10px}.reveal{animation-duration:.35s}}@media(max-width:360px){main{padding-left:10px;padding-right:10px}.topbar{padding-left:12px;padding-right:12px}.live-head h1{font-size:29px}.chat{height:520px}.chat-top{padding-left:12px;padding-right:12px}.messages{padding-left:12px;padding-right:12px}.login-box,.composer{padding-left:12px;padding-right:12px}}
@media(max-width:700px){.mobile-tabs{display:flex;margin:0 0 14px;padding:4px;border:1px solid var(--line);border-radius:10px;background:#101217}.mobile-tabs button{flex:1;min-height:38px;border:0;border-radius:7px;background:transparent;color:#949ba7;font:600 12px Manrope;cursor:pointer}.mobile-tabs button.active{background:#242934;color:#fff}.mobile-tabs span{margin-left:4px;color:var(--acid);font:10px 'DM Mono'}.layout{display:block}.chat{display:none;height:calc(100dvh - 230px);min-height:390px;max-height:620px}.mobile-chat-open .broadcast{display:none}.mobile-chat-open .chat{display:flex}.mobile-chat-open .layout{min-height:calc(100dvh - 230px)}.mobile-chat-open .messages{padding-bottom:10px}.mobile-chat-open .composer,.mobile-chat-open .login-box{flex:0 0 auto}.stage{box-shadow:none}}@media(min-width:701px){.mobile-tabs{display:none}}
@media(max-width:700px){main{height:calc(100dvh - 56px);overflow:hidden;padding:12px 10px 10px;display:flex;flex-direction:column}.live-head{flex:0 0 48px;margin:0;min-height:0}.live-head .eyebrow{display:none}.live-head h1{font-size:26px;line-height:48px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-head h1+p{display:none}.share{top:66px;right:12px}.mobile-tabs{display:none}.layout{display:grid;grid-template-rows:minmax(150px,34dvh) minmax(0,1fr);gap:10px;flex:1;min-height:0}.broadcast,.stage,.stage iframe{height:100%}.stage iframe{aspect-ratio:auto}.chat,.mobile-chat-open .chat{display:flex;position:static;height:auto;min-height:0;max-height:none}.mobile-chat-open .broadcast{display:block}.mobile-chat-open .layout{min-height:0}.chat-top{min-height:54px;padding:10px 13px}.chat-top p{display:none}.chat-top h2{font-size:15px}.messages{padding:4px 13px 8px}.msg{padding:8px 0}.login-box,.composer{padding:10px 13px}.login-copy{margin-bottom:7px}.composer textarea{height:46px}.composer>button{min-height:38px;margin-top:7px}.message-field small{display:none}.identity{margin-bottom:7px}.empty{padding:25px 10px}}@media(max-height:680px) and (max-width:700px){.layout{grid-template-rows:minmax(125px,30dvh) minmax(0,1fr)}.live-head{flex-basis:40px}.live-head h1{font-size:23px;line-height:40px}.topbar{height:50px}main{height:calc(100dvh - 50px);padding-top:8px}.share{top:56px}.chat-top{min-height:48px}.composer textarea{height:40px}}
@media(max-width:700px){html,body{height:100%;overflow:hidden}.topbar{position:relative}.chat{overflow:hidden}.messages{overscroll-behavior:contain}}
@media(max-width:700px){.keyboard-open .live-head{display:none}.keyboard-open .layout{grid-template-rows:1fr}.keyboard-open .broadcast{display:none}.keyboard-open .chat{height:100%;display:flex}.keyboard-open .messages{min-height:0}.keyboard-open .composer{padding-bottom:max(10px,env(safe-area-inset-bottom))}}

/* Mobile live experience: inspired by the reference's hierarchy, using Streamline's own visual system. */
.channel-strip{display:flex;align-items:center;gap:12px;margin-top:12px;padding:13px 14px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:linear-gradient(135deg,#171a22,#111319)}
.channel-avatar{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:12px;background:linear-gradient(135deg,#ccff3d,#7bad1f);color:#0a0d06;font:800 19px Manrope}.channel-copy{min-width:0;flex:1}.channel-copy p{margin:0 0 2px;color:#b9f534;font:9px 'DM Mono';letter-spacing:.11em}.channel-copy p i{display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%;background:#ff5a66;box-shadow:0 0 8px #ff5a66}.channel-copy h2{margin:0;color:#f8fafc;font-size:15px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.channel-copy span{display:block;margin-top:3px;color:#9097a4;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.follow{flex:0 0 auto;border:0;border-radius:8px;background:var(--acid);color:#10130a;padding:10px 12px;font:700 10px 'DM Mono';cursor:pointer}.follow.following{background:#2d3540;color:#e9edf2}
@media(min-width:701px){.channel-strip{display:none}}
@media(max-width:700px){.topbar{height:54px;padding:0 16px;background:#0d0f14;border-bottom-color:#242833}.logo{font-size:16px;letter-spacing:-1px}.logo:before{content:'S';display:inline-grid;place-items:center;width:25px;height:25px;margin-right:7px;border-radius:7px;background:var(--acid);color:#10130a;font:800 15px Manrope}.logo{font-size:0}.logo span{display:none}.topbar:after{content:'⌕  ◉';margin-left:14px;color:#e5e8ec;font-size:21px;letter-spacing:12px}.live-mark{margin-left:auto}.live-mark span{display:none}main{height:calc(100dvh - 54px);padding:0;display:block;overflow:hidden}.live-head{display:none}.layout{height:100%;display:grid;grid-template-rows:minmax(210px,40dvh) minmax(0,1fr);gap:0}.broadcast{position:relative;min-height:0;background:#060709}.stage{height:100%;border:0;border-radius:0;box-shadow:none}.stage:after{border:0;border-radius:0}.stage-live{top:12px;left:12px;border:0;border-radius:6px;background:rgba(7,8,11,.72);font-size:9px}.stage iframe{height:100%;aspect-ratio:auto}.channel-strip{position:absolute;z-index:2;bottom:0;left:0;right:0;margin:0;border-width:1px 0 0;border-radius:0;background:linear-gradient(0deg,rgba(9,10,14,.98),rgba(9,10,14,.84));backdrop-filter:blur(8px);padding:10px 12px}.channel-avatar{width:34px;height:34px;flex-basis:34px;border-radius:10px;font-size:15px}.channel-copy p{font-size:8px}.channel-copy h2{font-size:13px}.channel-copy span{display:none}.follow{padding:8px 10px;font-size:9px}.chat{display:flex;position:static;border:0;border-radius:0;background:#0d0f14;box-shadow:none;min-height:0;height:auto;max-height:none}.chat-top{min-height:44px;padding:8px 13px;border-bottom-color:#252a34;background:#11141a}.chat-top h2{font-size:14px}.chat-meta .presence{font-size:8px}.messages{padding:3px 13px 6px;background:#0d0f14}.msg{padding:7px 0;gap:8px}.person{width:25px;height:25px;flex-basis:25px;border-radius:8px;font-size:10px}.msg p{font-size:12px;line-height:1.4}.message-name b{font-size:11px}.message-name time{font-size:9px}.message-actions{margin-top:3px}.login-box,.composer{padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:#11141a;border-top-color:#252a34}.login-copy{display:none}.identity{display:none}.message-field{border-radius:9px;background:#0a0c10}.composer textarea{height:38px;min-height:38px;padding:9px 10px;font-size:16px}.composer>button{position:absolute;right:20px;bottom:calc(15px + env(safe-area-inset-bottom));width:auto;margin:0;padding:7px 8px;border-radius:6px;font-size:0;background:transparent;color:var(--acid)}.composer>button:after{content:'➤';font-size:16px}.composer>button span{display:none}.composer>small{display:none}.message-field small{display:none}.keyboard-open .layout{grid-template-rows:1fr}.keyboard-open .broadcast{display:none}.keyboard-open .chat{height:100%}.keyboard-open .composer>button{bottom:calc(15px + env(safe-area-inset-bottom))}}

/* Keep the signed-in composer anchored on every mobile viewport. */
@media(max-width:700px){.chat{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%!important;overflow:hidden}.messages{min-height:0;height:auto;overflow-y:auto}.composer{position:relative;display:block;min-height:57px;flex:none;z-index:3}.composer.hidden{display:none!important}.login-box{position:relative;z-index:3;max-height:110px;overflow:auto}.keyboard-open .chat{display:grid;grid-template-rows:auto minmax(0,1fr) auto}.keyboard-open .messages{min-height:0}.keyboard-open .composer{min-height:57px}}

/* The player and the channel card must not overlap on mobile. */
@media(max-width:700px){.layout{grid-template-rows:minmax(245px,33dvh) minmax(0,1fr)}.broadcast{display:grid;grid-template-rows:minmax(0,1fr) 61px;overflow:hidden}.stage{min-height:0}.stage iframe{object-fit:cover}.channel-strip{position:static;display:flex;height:61px;min-height:61px;padding:9px 12px;border-width:1px 0 0;background:#11141a;backdrop-filter:none}.keyboard-open .layout{grid-template-rows:1fr}.keyboard-open .broadcast{display:none}}

.channel-copy small{display:block;margin-top:3px;color:#aab1bd;font:9px 'DM Mono'}
@media(max-width:700px){.channel-copy small{display:none}}

@media(max-width:700px){.topbar .live-mark{display:none}.channel-strip{gap:9px}.follow{margin-left:1px}}

.viewer-label{color:#9ca4b1;font:9px 'DM Mono';letter-spacing:.03em}
@media(max-width:700px){.topbar{gap:12px}.topbar:after{display:none}.topbar nav{display:flex;margin-left:auto;gap:13px}.topbar nav a{font-size:10px;color:#aeb5c1}.topbar nav a.active{color:var(--acid)}.chat-meta{gap:7px}.chat-meta>span:last-child{min-width:22px;padding:4px 6px;background:#252a35;color:#eef1f4}.viewer-label{font-size:8px;letter-spacing:0}.presence{display:none}}

.presence:before{animation:livebeat 1.1s ease-in-out infinite}@keyframes livebeat{0%,100%{transform:scale(.8);opacity:.6}50%{transform:scale(1.35);opacity:1}}
@media(max-width:700px){.presence{display:inline;color:#ff9299;font-size:8px}.viewer-label{display:none}}

/* Remove the pale side gutters on narrow screens. */
@media(max-width:700px){html,body{width:100%;background:#08090c!important;overflow-x:hidden}body{background-image:none!important}.topbar,main,.layout,.broadcast,.stage,.chat{width:100%;max-width:none;margin-left:0;margin-right:0;border-left:0;border-right:0}.stage,.stage iframe{background:#000}}