:root { color-scheme: light; --navy:#102a43; --blue:#1456a0; --sky:#eef6ff; --green:#0b6b4f; --red:#b91c24; --line:#c8d5e0; --header-height:86px; }
* { box-sizing:border-box; }
html,body { width:100%; min-height:100%; overflow-x:hidden; }
body { margin:0; font-family:Arial,Helvetica,sans-serif; font-size:20px; color:var(--navy); background:#f7fafc; }
header { position:relative; width:100%; height:var(--header-height); display:flex; align-items:center; justify-content:center; padding:8px clamp(20px,5vw,72px); background:white; border-bottom:3px solid var(--blue); box-shadow:inset 0 -1px var(--red); }
.brand { display:flex; align-items:center; justify-content:center; gap:14px; font-weight:800; font-size:22px; }
.brand img { width:128px; height:66px; object-fit:contain; }
main { width:100%; min-height:calc(100dvh - var(--header-height)); display:flex; align-items:center; justify-content:center; margin:0 auto; padding:clamp(14px,2.2vh,28px) 20px; }
.card { width:min(740px,100%); margin:auto; background:white; border:2px solid var(--line); border-radius:22px; padding:clamp(28px,4vh,48px) clamp(24px,5vw,56px); box-shadow:0 18px 60px rgba(16,42,67,.10); text-align:center; }
.eyebrow { color:var(--blue); text-transform:uppercase; letter-spacing:.12em; font-weight:800; font-size:15px; line-height:1.4; }
h1 { max-width:18ch; margin:14px auto 20px; font-size:clamp(36px,5vw,54px); line-height:1.1; text-wrap:balance; }
h2 { margin:10px 0; font-size:30px; line-height:1.25; }
p { max-width:58ch; margin:16px auto; font-size:21px; line-height:1.6; color:#334e68; text-wrap:pretty; }
.big-button,button { width:100%; min-height:64px; border:0; border-radius:14px; background:var(--blue); color:white; padding:17px 24px; font-size:22px; line-height:1.3; font-weight:800; cursor:pointer; }
button:hover { filter:brightness(.94); }
.zoom-download { display:flex; align-items:center; justify-content:center; text-align:center; text-decoration:none; }
.zoom-download:hover { filter:brightness(.94); }
button:disabled { opacity:.55; cursor:not-allowed; }
button:focus-visible,a:focus-visible { outline:4px solid #f5b700; outline-offset:3px; }
input { width:100%; border:2px solid #bcccdc; border-radius:12px; padding:16px; margin:8px 0 18px; font-size:19px; }
label { display:block; text-align:left; font-weight:800; font-size:17px; }
.error { color:var(--red); font-weight:800; font-size:19px; }
.hidden { display:none !important; }
.status { display:flex; gap:12px; align-items:center; justify-content:center; margin:4px 0 18px; padding:16px; border-radius:12px; background:var(--sky); font-size:19px; font-weight:800; }
.dot { width:12px; height:12px; border-radius:50%; background:#829ab1; }
.dot.live { background:#21a179; box-shadow:0 0 0 6px rgba(33,161,121,.15); }
.linkbox { display:flex; align-items:center; justify-content:center; gap:18px; margin:18px 0; padding:16px 18px; border:2px solid var(--line); border-radius:12px; background:#f7fafc; text-align:center; }
.linkbox strong { font-size:19px; }
.linkbox small { color:#486581; font-size:16px; font-weight:800; letter-spacing:.06em; }
.actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.viewer-actions { grid-template-columns:1fr 1fr; margin-bottom:16px; }
.secondary { background:#e8f1f8; color:var(--navy); }
.danger { background:var(--red); }
.viewer { width:100%; max-width:1280px; margin:0 auto; }
.viewer .card { width:100%; margin:auto; padding:22px; }
.screen-stage { width:100%; height:clamp(360px,60vh,700px); display:flex; align-items:center; justify-content:center; overflow:hidden; background:#08131f; border-radius:14px; }
.screen-stage video { flex:0 0 100%; width:100%; height:100%; margin:auto; object-fit:contain; object-position:50% 50%; background:#08131f; display:block; }
.viewer-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; margin:auto; background:#edf2f7; padding:32px; text-align:center; }
.viewer-placeholder > div { width:100%; margin:auto; }
.screen-stage:fullscreen { width:100vw; height:100vh; max-width:none; max-height:none; border-radius:0; background:#000; }
.screen-stage:fullscreen video { width:100vw; height:100vh; max-width:100vw; max-height:100vh; object-fit:contain; }
.sharing-note { color:var(--green); font-weight:800; }
.safety { margin-top:24px; font-size:18px; line-height:1.55; color:#486581; }
.simple-steps { max-width:610px; margin:20px auto 24px; padding:0; list-style:none; display:grid; gap:12px; text-align:left; }
.simple-steps li { position:relative; min-height:52px; display:flex; align-items:center; padding:10px 12px 10px 58px; border-radius:12px; background:var(--sky); color:#243b53; font-size:20px; line-height:1.45; font-weight:700; }
.simple-steps span { position:absolute; left:12px; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--blue); color:white; font-weight:800; }
@media (max-width:760px) { :root { --header-height:74px; } header { padding:6px 12px; } .brand { gap:9px; font-size:18px; } .brand img { width:96px; height:50px; } main { padding:20px 14px; } .card { padding:30px 22px; border-radius:16px; } h1 { font-size:clamp(34px,10vw,44px); } p { font-size:20px; } .actions,.viewer-actions { grid-template-columns:1fr; } .screen-stage { height:clamp(300px,52vh,520px); } .linkbox { flex-direction:column; gap:4px; } }
#room { align-items:flex-start; }