:root{color-scheme:dark;font-family:'Segoe UI',Arial,sans-serif;background:#080d10;color:#f5f7f8}*{box-sizing:border-box}body{margin:0}header{height:90px;padding:20px 4%;display:flex;align-items:center;justify-content:space-between;background:#080d10;border-bottom:1px solid #dfc68166}header img{width:min(430px,55vw)}header span,.eyebrow{color:#dfc681;letter-spacing:.2em;font-size:12px}main{min-height:calc(100dvh - 80px);display:grid;place-items:center;padding:40px 20px;background:linear-gradient(#080d1050,#080d10ef),url('assets/course.webp') center/cover}.card{width:min(560px,100%);padding:40px;background:linear-gradient(135deg,#121d20f5,#0a1114);border:1px solid #50606b;border-radius:8px;box-shadow:0 15px 60px #0008}h1{font-family:Impact,Bahnschrift,'Arial Narrow',sans-serif;font-weight:400;font-size:44px;margin:18px 0}p{color:#d7dce0;line-height:1.6}label{display:block;color:#dfc681;font-size:13px;letter-spacing:.15em;margin:24px 0 8px}input{width:100%;font:32px Bahnschrift,'Arial Narrow',sans-serif;letter-spacing:.25em;text-transform:uppercase;padding:16px;background:#080d10;border:1px solid #50606b;border-radius:5px;color:#fff}button{cursor:pointer;font:700 15px Bahnschrift,'Arial Narrow',sans-serif;padding:14px 20px;border:1px solid #ffe49a;border-radius:5px;background:linear-gradient(#f3d16e,#be8e2e);color:#080d10}form button{width:100%;margin-top:16px}button:hover{filter:brightness(1.1)}a{color:#d7dce0}a:hover{color:#00c878}.note{font-size:14px}.back{display:inline-block;margin-top:12px}#join-error{color:#dfc681;min-height:24px;font-size:14px}.viewer-bar{display:flex;align-items:center;gap:18px;padding:14px 3%;border-bottom:1px solid #50606b;flex-wrap:wrap}.viewer-bar strong{color:#dfc681}.viewer-bar button{padding:8px 12px}#connection{margin-right:auto;font-size:13px;color:#c0cbd1}#stage{position:relative;height:calc(100dvh - 155px);min-height:300px;overflow:hidden}#waiting{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;text-align:center;padding:24px}#waiting h1{font-size:32px}iframe{position:absolute;left:50%;top:50%;border:0;transform-origin:center;pointer-events:none;background:#080d10}body:has(#viewer:not([hidden])) header{height:80px}[hidden]{display:none!important}:focus-visible{outline:2px solid #00c878;outline-offset:4px}@media(max-width:600px){header span{display:none}header img{width:90%;max-width:350px}header{height:75px}.card{padding:25px}h1{font-size:36px}.viewer-bar{gap:10px}#stage{height:calc(100dvh - 200px)}}