:root { color-scheme:dark; font-family:system-ui,sans-serif; background:#10151d; color:#ecedf3; }
body { margin:0; } main { width:min(100% - 40px,560px); margin:8vh auto; }
.brand { color:#bcacdf; letter-spacing:.12em; } h1 { font-size:2.4rem; line-height:1.15; }
section { border:1px solid #333746; border-radius:20px; padding:24px; margin:24px 0; background:#181e29; }
label { display:block; margin:16px 0; } input { box-sizing:border-box; display:block; width:100%; margin-top:8px; padding:12px; border:1px solid #61677a; border-radius:8px; background:#10151d; color:inherit; font:inherit; }
button { font:inherit; color:#10151d; background:#c8bae9; border:0; border-radius:8px; padding:12px 16px; margin:4px 8px 4px 0; cursor:pointer; }
button:disabled { opacity:.5; cursor:wait; } button:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid #f8dd94; outline-offset:3px; }
#error { color:#ffabab; } .note { color:#b4bac9; line-height:1.6; font-size:.9rem; } .actions { margin-top:16px; } li { margin:16px 0; } [hidden] { display:none!important; }
#remote-application { position:fixed; inset:0; margin:0; border-radius:0; padding:0; z-index:10; }
#remote-application>button { position:absolute; top:8px; right:8px; z-index:1; }
#remote-container, #remote-container iframe { width:100%; height:100%; border:0; }