:root {
  color-scheme: light;
  font: 16px/1.5 "Inter", "Segoe UI", sans-serif;
  color: #172235;
  background: #eff3f8;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
header {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: .85rem max(1.25rem, calc((100vw - 74rem) / 2));
  border-bottom: 2px solid #e1ad41;
  background: #101c30;
  color: white;
}
header strong { color: #f0bb55; letter-spacing: .13em; }
main { width: min(74rem, calc(100% - 2.5rem)); margin: 2.6rem auto; }
h1, h2 { margin: 0; line-height: 1.2; }
h1 { font-size: clamp(1.8rem, 4vw, 2.65rem); }
h2 { font-size: 1.2rem; }
p { margin: .45rem 0 1rem; }
.heading p { color: #475872; }
#start { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
article, .session-bar {
  padding: 1.2rem;
  border: 1px solid #cbd6e6;
  border-radius: .65rem;
  background: white;
}
label { display: block; margin: .6rem 0 .2rem; font-weight: 600; }
.inline, .session-bar { display: flex; gap: .65rem; align-items: center; flex-wrap: wrap; }
.session-bar { justify-content: space-between; }
input, button {
  min-height: 2.65rem;
  border-radius: .4rem;
  font: inherit;
}
input { width: min(16rem, 100%); padding: .35rem .55rem; border: 1px solid #73839c; }
button { border: 1px solid #2349a9; background: #2349a9; color: white; padding: .4rem .85rem; cursor: pointer; }
button.secondary { border-color: #a03c40; color: #98262b; background: white; }
button:disabled { opacity: .6; cursor: default; }
button:focus-visible, input:focus-visible { outline: 3px solid #2c66ca; outline-offset: 3px; }
output { display: block; font: 600 1.15rem/1.7 Consolas, monospace; overflow-wrap: anywhere; }
.view-tools { margin-top: .75rem; }
.view-tools button { background: white; color: #2349a9; }
.view-tools button[aria-pressed="true"] { background: #2349a9; color: white; }
#resolution { color: #475872; font-variant-numeric: tabular-nums; }
#screen-viewport { max-height: 75vh; margin-top: .5rem; overflow: auto; background: #0a1322; border-radius: .5rem; }
#screen-viewport:fullscreen { max-height: none; border-radius: 0; }
#screen { display: block; margin-inline: auto; width: 100%; max-height: 75vh; object-fit: contain; }
#screen-viewport:fullscreen video { max-height: 100vh; }
#screen-viewport.actual-size video { width: var(--frame-width); max-height: none; }
#status { min-height: 1.5em; margin-top: 1rem; }
#status:empty { display: none; }
#control-status { margin: .7rem 0; font-weight: 600; }
#companion { padding: .8rem 0; }
#companion a { margin-right: .7rem; }
#companion .button-link { display: inline-block; padding: .45rem .85rem; border-radius: .4rem; background: #2349a9; color: white; text-decoration: none; }
#companion .button-link:focus-visible { outline: 3px solid #2c66ca; outline-offset: 3px; }
#screen-viewport.controlling { outline: 2px solid #2349a9; touch-action: none; }
@media (max-width: 640px) { #start { grid-template-columns: 1fr; } main { margin-top: 1.5rem; } }