@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Shadows+Into+Light&display=swap";*{box-sizing:border-box}body{margin:0;background:#1c1c1c;color:#f5f5f5;font-family:Manrope,Arial,sans-serif}main{min-height:100vh;max-width:1240px;margin:auto;padding:64px 32px 30px;display:grid;grid-template-columns:.86fr 1.3fr;gap:44px 64px;align-items:center}.eyebrow,small,footer{font:500 11px DM Mono,monospace;letter-spacing:.13em;color:#a1a1a1}.eyebrow{color:#00bfff;margin:0 0 22px}.intro h1{font-size:clamp(44px,5vw,76px);line-height:.98;letter-spacing:-.075em;margin:0;font-family:Georgia,serif}.intro i{font-family:Shadows Into Light,cursive;font-weight:400;color:#4b91e2}.lead{max-width:410px;line-height:1.75;color:#a1a1a1;margin-top:26px}.camera-card{overflow:hidden;border:1px solid #595959;border-radius:18px;background:#3d3d3d}.camera-stage{aspect-ratio:16/10;position:relative;background:#1c1c1c}video,canvas{width:100%;height:100%;object-fit:cover;position:absolute;top:0;right:0;bottom:0;left:0;transform:scaleX(-1)}canvas{transform:none}.camera-empty{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;text-align:center;color:#a1a1a1}.camera-empty span{font-size:38px;color:#00bfff}.camera-empty p{font:12px DM Mono,monospace}.status{position:absolute;left:16px;bottom:16px;background:#1c1c1ce8;border:1px solid #595959;border-radius:99px;padding:9px 12px;font:10px DM Mono,monospace;color:#a1a1a1;max-width:80%}.status b{display:inline-block;width:7px;height:7px;border-radius:100%;background:#7d7d7d;margin-right:7px}.status b.live{background:#00bfff}.controls{padding:16px;display:flex;gap:12px;justify-content:space-between;align-items:center}.channel-name{font:500 11px DM Mono,monospace;color:#a1a1a1;letter-spacing:.04em}.channel-name i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:8px}.controls button,.effect-buttons button,.effect-stack button{border:1px solid #595959;background:#3d3d3d;color:#f5f5f5;border-radius:8px;padding:9px 11px;font:600 11px DM Mono,monospace;cursor:pointer}.controls .start{background:#0074bd;border-color:#0092d6;font-family:Manrope}.controls .start:hover,.effect-buttons button:hover,.effect-buttons button.active{background:#1c6cce;border-color:#4b91e2}.effect-workbench{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid #595959;padding-top:24px}.effect-workbench>div{min-height:78px}.effect-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.effect-stack{grid-column:1/-1;border:1px dashed #0074bd;border-radius:12px;padding:13px;transition:.15s}.effect-stack:hover{border-color:#00bfff}.effect-stack p{font-size:12px;color:#7d7d7d;margin:14px 0}.effect-stack button{margin:10px 7px 0 0;border-color:#0092d6;color:#00bfff}.readout{grid-column:1/-1;border-top:1px solid #595959;border-bottom:1px solid #595959;padding:20px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.readout div{display:grid;gap:7px}.readout strong{font-size:15px;color:#f5f5f5}footer{grid-column:1/-1;text-align:center;letter-spacing:.04em}@media(max-width:780px){main{padding:36px 20px 22px;display:block}.intro{margin-bottom:34px}.effect-workbench,.readout{margin-top:30px;grid-template-columns:1fr;gap:18px}.controls{align-items:flex-start;flex-direction:column}footer{margin-top:28px}.intro h1{font-size:54px}}.outside-blur{filter:blur(8px)}footer a{color:#00bfff;text-decoration:none}footer a:hover{text-decoration:underline}.control-actions{display:flex;gap:8px}.camera-source{grid-column:1/-1;border-top:1px solid #595959;border-bottom:1px solid #595959;padding:16px 0;display:flex;align-items:center;justify-content:space-between;gap:16px}.camera-source>div{display:flex;gap:8px}.camera-source select,.camera-source button{border:1px solid #595959;border-radius:8px;background:#3d3d3d;color:#f5f5f5;padding:9px 11px;font:500 11px DM Mono,monospace}.camera-source button{cursor:pointer;border-color:#0074bd;color:#00bfff}@media(max-width:780px){.camera-source{display:grid}.camera-source>div{flex-wrap:wrap}.camera-source select{max-width:100%}}.channel-transition{animation:channel-switch .46s ease-in-out}@keyframes channel-switch{0%{opacity:.12;transform:scale(.97)}55%{opacity:.78}to{opacity:1;transform:scale(1)}}