:root {
  font-family:Arial,Helvetica,sans-serif;
  color:#202b38;
  background:#f7f8fa;
  line-height:1.5
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column
}
main {
  flex:1
}
.shell {
  width:min(100% - 2rem,1060px);
  margin-inline:auto
}
a {
  color:#004b9b;
  text-decoration:underline;
  text-underline-offset:2px
}
a:hover {
  color:#002b65
}
button {
  font:inherit;
  cursor:pointer;
  background:#004b9b;
  color:white;
  border:2px solid #004b9b;
  border-radius:5px;
  padding:.6rem 1rem;
  font-weight:700
}
button:hover:not(:disabled) {
  background:#002b65;
  border-color:#002b65
}
button:disabled {
  opacity:.55;
  cursor:not-allowed
}
button.secondary {
  color:#004b9b;
  background:#fff
}
button.secondary:hover:not(:disabled) {
  color:#fff
}
:focus-visible {
  outline:3px solid #a90533;
  outline-offset:3px
}
.skip-link {
  position:absolute;
  left:-9999px;
  top:0;
  background:#fff;
  padding:.75rem;
  z-index:30
}
.skip-link:focus {
  left:1rem;
  top:1rem
}
.site-header {
  background:#fff;
  border-bottom:1px solid #dce2e8
}
.header-inner {
  min-height:0;
  padding:.5rem 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem
}
.header-inner img {
  display:block;
  width:48px;
  height:auto
}
.header-inner span {
  font-weight:700;
  color:#002b65
}
.header-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.5rem 1rem
}
.header-actions label {
  font-weight:400
}
.header-actions select {
  font:inherit;
  padding:.35rem;
  color:#202b38;
  background:#fff;
  border:1px solid #495a70;
  border-radius:4px
}
.help-header {
  position:sticky;
  top:0;
  z-index:20
}
.header-subrow {
  border-top:1px solid #dce2e8;
  padding:.6rem 0
}
.header-subrow .back-link {
  margin-bottom:0
}
.intro {
  padding:2rem 0 1rem
}
.intro h1,.video-main h1,.help-main h1 {
  margin:0 0 .5rem;
  color:#002b65;
  font-size:clamp(1.8rem,4vw,2.4rem)
}
.intro>p {
  max-width:65ch;
  margin:.3rem 0 1.5rem
}
.system-details {
  display:grid;
  gap:.3rem;
  margin:0;
  padding:1rem 1.25rem;
  background:#eaf0f6;
  border-left:4px solid #002b65;
  border-radius:0
}
.system-details>div {
  display:flex;
  gap:.5rem;
  flex-wrap:wrap
}
.system-details dt {
  font-weight:700
}
.system-details dd {
  margin:0
}
.notice {
  background:#fff2d7;
  border-left:4px solid #a95a00;
  padding:.8rem 1rem;
  margin:1rem 0;
  border-radius:4px
}
.notice[hidden] {
  display:none
}
.card-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.5rem;
  max-width:56rem;
  margin-inline:auto;
  padding:1rem 0 3rem
}
.card {
  background:#fff;
  border:1px solid #dce2e8;
  border-radius:.62rem;
  box-shadow:0 2px 9px #172c470d;
  min-width:0
}
.card {
  display:grid;
  grid-template-rows:auto 1fr;
  min-height:15rem;
  border:0;
  border-radius:0;
  overflow:hidden;
  box-shadow:0 0 10px rgba(115,115,115,.25)
}
.video-card {
  min-height:12rem
}
.card-head {
  min-height:5.5rem;
  background:#f0f0f0;
  display:flex;
  align-items:center;
  position:relative;
  padding:1rem 6.5rem 1rem 1.25rem
}
.card-head.plain-head {
  padding-right:1.25rem
}
.card-head h2 {
  font-size:1.25rem;
  font-weight:600;
  margin:0;
  color:#292929
}
.card-head p {
  margin:.1rem 0 0;
  font-size:1rem;
  overflow-wrap:anywhere
}
.badge {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:5.25rem;
  border-radius:0;
  display:grid;
  place-items:center;
  font-size:2.5rem;
  font-weight:700;
  color:#fff;
  background:#002b65
}
.badge.pass {
  background:#1c6c3e
}
.badge.fail {
  background:#a32626
}
.badge.pending {
  background:#002b65
}
.card-body {
  padding:1rem 1.25rem
}
.card-body p {
  margin:0 0 .8rem
}
.card-body p:last-child {
  margin-bottom:0
}
.link-list {
  display:grid;
  gap:.45rem
}
.site-footer {
  background:#fff;
  border-top:1px solid #dce2e8;
  font-size:.9rem;
  color:#56747e
}
.site-footer a {
  color:inherit
}
.site-footer a:hover {
  color:#3c525c
}
.footer-inner {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.5rem 1rem;
  padding:1rem
}
.video-main,.help-main {
  padding:2rem 0 3rem
}
.back-link {
  display:inline-block;
  margin-bottom:1.25rem
}
.video-main>p {
  max-width:75ch
}
.video-setup {
  display:grid;
  grid-template-columns:minmax(15rem,.75fr) minmax(0,1.25fr);
  gap:2rem;
  margin:1.5rem 0 2rem
}
.video-setup h2 {
  margin:0 0 1rem;
  font-size:1.25rem
}
.device-panel {
  display:flex;
  flex-direction:column;
  align-items:flex-start
}
.device-panel label {
  margin:.75rem 0 .25rem;
  font-weight:700
}
.device-panel select {
  width:100%;
  max-width:100%;
  padding:.6rem;
  font:inherit;
  color:#202b38;
  background:#fff;
  border:1px solid #495a70
}
.preview-panel {
  min-width:0
}
.preview-panel video {
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:contain;
  background:#17212d
}
#recording-review {
  margin-top:2rem
}
#recording-review h3 {
  margin:0 0 .75rem
}
#recording-review p {
  margin:.75rem 0 0
}
.controls {
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:1rem
}
.test-video-button {
  position:relative;
  overflow:hidden;
  min-width:min(100%,17rem)
}
.test-video-button .record-progress {
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  background:#1c6c3e
}
.test-video-button #record-button-label {
  position:relative
}
.test-video-button.is-recording .record-progress {
  animation:record-fill 5s linear forwards
}
@keyframes record-fill {
  to { width:100% }
}
.help-note {
  background:#eaf0f6;
  padding:1rem;
  border-radius:5px
}
.help-main section {
  background:#fff;
  border:0;
  border-radius:0;
  box-shadow:0 0 10px rgba(115,115,115,.25);
  margin:1rem 0;
  padding:0 1.25rem 1.25rem;
  /* Clears the sticky .help-header (logo row + back-link subrow) so a
     #fragment link doesn't land with the heading hidden underneath it. */
  scroll-margin-top:130px
}
.help-main .section-head {
  background:#f0f0f0;
  margin:0 -1.25rem 1.25rem;
  padding:1rem 1.25rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem
}
.help-main h2 {
  color:#292929;
  font-size:1.25rem;
  font-weight:600;
  margin:0
}
.help-main .copy-link {
  position:relative;
  background:transparent;
  border:0;
  color:#6b7684;
  padding:.3rem;
  border-radius:4px;
  display:inline-flex;
  font-weight:400
}
.help-main .copy-link:hover:not(:disabled) {
  background:#eaf0f6;
  color:#002b65;
  border-color:transparent
}
.help-main .copy-link.copied {
  color:#1c6c3e
}
.copy-tooltip {
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%) translateY(-4px);
  margin-bottom:.35rem;
  background:#002b65;
  color:#fff;
  font-size:.75rem;
  font-weight:600;
  line-height:1.4;
  padding:.3rem .55rem;
  border-radius:4px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease
}
.copy-link.copied .copy-tooltip {
  opacity:1
}
.help-main h3 {
  margin-bottom:.25rem
}
.help-main ol,.help-main ul {
  margin-top:.25rem
}
.help-main li+li {
  margin-top:.5rem
}
.help-main nav {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1rem
}
.help-main code {
  background:#eef1f5;
  padding:.1rem .25rem
}
.screenshot-note {
  margin:1.5rem 0;
  padding:.75rem 1rem;
  border-left:4px solid #002b65;
  background:#eaf0f6
}
.screenshot-gallery {
  margin-top:1.5rem
}
.screenshot-gallery h3 {
  margin:1.75rem 0 .75rem
}
.screenshot-gallery figure {
  margin:0 0 1.5rem;
  max-width:100%
}
.screenshot-gallery a {
  display:inline-block;
  max-width:100%
}
.screenshot-gallery img {
  display:block;
  max-width:100%;
  height:auto;
  border:1px solid #dce2e8
}
.screenshot-gallery figcaption {
  margin-top:.4rem;
  color:#4d4d4d;
  font-size:.95rem
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
@media(max-width:720px) {
  .card-grid {
    grid-template-columns:1fr
  }
  .video-setup {
    grid-template-columns:1fr
  }
  .header-inner {
    min-height:70px
  }
  .footer-inner {
    display:grid
  }
  .intro {
    padding-top:1.4rem
  }
}
@media(prefers-reduced-motion:no-preference) {
  html {
    scroll-behavior:smooth
  }
}