:root{color-scheme:dark;font:16px/1.45 system-ui,sans-serif;background:#0b1018;color:#eef1f7;--muted:#abb7cb;--accent:#c2ff72;--line:#34435b}
*{box-sizing:border-box}body{margin:0}main{max-width:1050px;margin:auto;padding:clamp(1rem,5vw,3rem)}[hidden]{display:none!important}
h1{font-size:clamp(2rem,7vw,4rem);letter-spacing:-.06em;line-height:1.05;margin:.6rem 0}h2{margin:.3rem 0 1rem}p{color:var(--muted)}.tag{font-size:.78rem;letter-spacing:.13em;color:var(--accent);font-weight:800}.notice{overflow-wrap:anywhere}
form,.links{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:1rem 0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1rem;margin-top:1.8rem}section{background:#151e2b;border:1px solid var(--line);border-radius:1rem;padding:1.1rem}.links a{color:var(--accent);padding:.35rem}
button,input,select{font:inherit;color:inherit;background:#172234;border:1px solid var(--line);border-radius:.5rem;padding:.56rem .72rem}input{width:min(100%,26rem)}button{cursor:pointer}button:hover,:focus-visible{outline:2px solid var(--accent)}button:disabled{opacity:.5;cursor:default}form button,#start{background:var(--accent);color:#1b280f;font-weight:800}
#preview{width:100%;max-height:55vh;object-fit:contain;background:#080c12;border-radius:.8rem}
#receiver{max-width:none;padding:0}#output{display:block;width:100vw;height:100dvh;object-fit:contain}.receiver-controls{position:fixed;bottom:1rem;left:1rem}.receiver-controls p:not(:empty){background:#101621df;padding:.45rem;border-radius:.3rem}
#chat{max-width:720px}#chat h1{font-size:1.8rem}.message{padding:.55rem .7rem;margin:.35rem 0;background:#121a28ed;border-radius:.55rem;overflow-wrap:anywhere}.badge{margin-right:.5rem;font-weight:800;color:#b6f97e}.tiktok{color:#ffbbdb}.overlay,.overlay body{background:transparent}.overlay #chat{max-width:none;padding:.4rem;height:100dvh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}.overlay #chat-title,.overlay .notice{display:none}.overlay #feed{overflow:hidden}.overlay #feed .message{flex:none}.overlay #feed{display:flex;flex-direction:column;justify-content:flex-end}

.audience{display:flex;flex-wrap:wrap;gap:.4rem;margin:.55rem 0}
.audience-badge{display:inline-flex;align-items:center;gap:.38rem;border:1px solid var(--line);border-radius:99px;padding:.3rem .55rem;background:#121a28ed;font-weight:750;font-variant-numeric:tabular-nums}
.audience-badge.kick{color:#b6f97e}.audience-badge.tiktok{color:#ffbbdb}
.audience-badge svg{width:1rem;height:1rem;flex:none}
.audience-badge [data-count]{color:#eef1f7}
.overlay #chat-audience{flex:none}.overlay #feed{min-height:0}

.camera-studio{padding:clamp(.7rem,3vw,1.5rem)}
.camera-studio h1{font-size:clamp(1.55rem,4vw,2.5rem)}
.camera-studio .tag{margin:.25rem 0}
.camera-studio .publish-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.75rem;align-items:start}
.camera-studio #preview{display:block;height:clamp(130px,39dvh,400px)}
.camera-studio .links{margin:.45rem 0}
.camera-studio .notice,.publish-tip{font-size:.85rem;margin:.4rem 0}
#live-chat{padding:.65rem;min-width:0}
#live-chat h2{font-size:1rem;margin:0}
#publisher-chat-status{font-size:.75rem;margin:.25rem 0 .5rem;overflow-wrap:anywhere}
#publisher-feed{height:clamp(125px,35dvh,360px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
#publisher-feed .message{font-size:.88rem}
@media(max-width:640px){
  .camera-studio .publish-layout{grid-template-columns:minmax(0,1fr);gap:.4rem}
  .camera-studio #preview{height:clamp(100px,24dvh,210px)}
  #publisher-feed{height:clamp(95px,26dvh,250px)}
}
.capture-details{font-size:.82rem;margin:.35rem 0;color:var(--muted)}