:root{font:16px 'Segoe UI',Arial,sans-serif;color:#e8edf5;background:#0c121b;color-scheme:dark;--green:#bcf05b;--line:#273342}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}button,textarea,select{font:inherit}button,select{background:#1a2432;color:#e8edf5;border:1px solid #364456;border-radius:8px;padding:10px 14px;cursor:pointer;min-height:42px}button:hover{filter:brightness(1.15)}button:disabled{opacity:.5;cursor:default}:focus-visible{outline:2px solid var(--green);outline-offset:3px}header{height:88px;display:flex;gap:22px;align-items:center;border-bottom:1px solid var(--line);padding:0 5vw}.brand{display:flex;gap:12px;align-items:center;font-size:25px;font-weight:700;letter-spacing:-1px;text-decoration:none;color:inherit}.brand span{font-size:26px;background:var(--green);color:#112006;border-radius:10px;padding:5px 9px}.status{margin-left:auto;font-size:14px;display:flex;align-items:center;gap:9px;color:#9cabbf}.status i{display:block;width:8px;height:8px;background:#67758b;border-radius:50%}.status i.live{background:var(--green);box-shadow:0 0 0 4px #bcf05b16}#welcome{max-width:1200px;margin:0 auto;padding:9vh 5vw;display:grid;grid-template-columns:1.4fr 1fr;gap:80px}.eyebrow{font-size:12px;font-weight:600;letter-spacing:2px;color:#8fa0b8}h1{font-size:clamp(34px,3.7vw,52px);font-weight:600;letter-spacing:-1.8px;line-height:1.15;margin:22px 0}em{font-style:normal;color:var(--green)}p{font-size:15px;color:#92a3bb;line-height:1.75}form{margin-top:30px}label{display:block;font-size:14px;margin:12px 0 9px}textarea{width:100%;resize:vertical;background:#111c28;border:1px solid #344456;border-radius:9px;padding:14px;color:#dde7f4;font-size:14px;line-height:1.5}.remember{display:flex;align-items:center;gap:8px;color:#adbbce;font-size:14px;margin:16px 0 22px}input[type=checkbox]{width:17px;height:17px;accent-color:var(--green)}.primary{background:var(--green);color:#18230e;font-weight:650;border-color:var(--green)}form .primary{width:100%;padding:15px}button.quiet{border:0;background:none;color:#92a3bb;padding:10px 0;font-size:13px}.connection-note{margin-top:36px;display:flex;gap:22px;flex-wrap:wrap;font-size:12px;color:#768aa4}aside{border:1px solid var(--line);border-radius:20px;background:linear-gradient(155deg,#1c2c39,#111923);padding:38px 30px;align-self:center;position:relative}aside .eyebrow{font-size:11px}aside h2{font-size:25px;margin:12px 0}aside p{font-size:14px;margin-bottom:30px}.device-icon{font-size:68px;color:#bdd68d;height:95px;line-height:1}.device-line{display:flex;justify-content:space-between;border-top:1px solid #354452;padding:16px 0;font-size:14px;color:#becbd9}#error,#session-error{color:#ffb89c;font-size:14px}body.connected header{height:64px;padding:0 18px}body.connected .brand{font-size:20px}body.connected .brand span{font-size:20px}#session{height:calc(100dvh - 64px);display:flex;flex-direction:column}.toolbar{display:flex;gap:12px;align-items:center;padding:10px 16px;background:#111b27;font-size:14px}.spacer{flex:1}.pill{font-size:12px;color:var(--green);border:1px solid #bcf05b35;border-radius:20px;padding:5px 10px;white-space:nowrap}#stats{color:#94a5bc;font-size:12px}.toolbar button,.toolbar select{font-size:13px;padding:7px 10px;min-height:35px}#stage{position:relative;flex:1;min-height:0;overflow:auto;background:#05080c;display:flex;align-items:center;justify-content:center;touch-action:none;outline-offset:-3px}video{display:block;width:100%;height:100%;object-fit:contain;user-select:none;touch-action:none}#stage.actual{display:block}#stage.actual video{width:auto;height:auto;max-width:none}#loading{position:absolute;padding:22px;background:#101b29dd;border:1px solid #34465b;border-radius:10px;color:#c7d5e9;max-width:90%;text-align:center}.bottom{display:flex;align-items:center;gap:8px;padding:10px 16px;flex-wrap:wrap;border-top:1px solid var(--line)}.bottom>span{flex:1;color:#889cb6;font-size:12px}.bottom button{font-size:12px;padding:8px 11px}#text-panel{padding:0 16px 12px;border-top:1px solid var(--line)}#text-panel>div{display:flex;align-items:center;gap:10px}#remote-text{flex:1}#session-error{margin:0;padding:0 16px;font-size:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:800px){#welcome{gap:35px;padding:6vh 6vw}h1{font-size:37px}aside{padding:25px 22px}.toolbar{gap:6px;flex-wrap:wrap}#stats{margin-left:auto}#computer{display:none}.bottom>span{flex-basis:100%}}@media(max-width:600px){header{height:72px;padding:0 20px;gap:10px}.brand{font-size:22px}.status{font-size:12px}.status span{max-width:155px}#welcome{display:block;padding:38px 24px}h1{font-size:39px;letter-spacing:-1.4px}aside{margin-top:40px}.intro>p br{display:none}.connection-note{margin-top:25px;gap:12px}body.connected header{padding:0 10px;gap:10px}#disconnect{padding:7px;font-size:12px}.toolbar{padding:8px}.bottom{padding:8px;gap:6px}.bottom button{min-height:42px}.bottom>span{font-size:11px}.toolbar .spacer{display:none}#text-panel>div{flex-wrap:wrap}#remote-text{flex-basis:100%}#text-panel button{flex:1}}@media(max-height:500px) and (orientation:landscape){body.connected header{height:44px}.brand span{display:none}#session{height:calc(100dvh - 44px)}.toolbar{padding:3px 10px}.bottom{padding:3px 10px}.bottom>span{display:none}.bottom button{min-height:30px;padding:4px 8px}}
