:root { color-scheme: light; font: 17px/1.55 system-ui, sans-serif; color: #173047; background: #f3f7fa; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 1380px; margin: auto; padding: 28px 20px 50px; }
header { margin-bottom: 24px; }
h1, h2, h3 { line-height: 1.15; }
h1 { margin: 8px 0 14px; font-size: clamp(2rem, 5vw, 3rem); }
a { color: #135a86; }
.eyebrow { letter-spacing: .12em; font-size: .8rem; font-weight: 700; color: #28617f; }
.video-layout { display: grid; grid-template-columns: minmax(230px, 320px) minmax(0, 1fr); gap: 24px; align-items: start; }
.video-list, .video-panel { padding: 20px; border: 1px solid #cedee9; border-radius: 12px; background: white; }
.video-list h2 { font-size: 1.15rem; margin-top: 0; }
.video-list label { display: block; font-weight: 650; margin-bottom: 6px; }
.video-list input { display: block; width: 100%; font: inherit; padding: 8px; border: 1px solid #9fb8ca; border-radius: 5px; }
.video-search-status { font-size: .85rem; color: #4c6171; }
.video-list ol { margin: 0; padding-left: 1.5rem; }
.video-list li { margin-bottom: 9px; }
button { font: inherit; text-align: left; color: #164b6d; border: 1px solid #9fb8ca; border-radius: 6px; background: white; padding: 8px 11px; cursor: pointer; }
.video-list button { width: 100%; }
button[aria-current="true"] { background: #e6f1f8; border-color: #286b96; font-weight: 650; }
:focus-visible { outline: 3px solid #287daf; outline-offset: 3px; }
video { width: 100%; max-height: 72vh; display: block; background: #13293e; border-radius: 6px; }
.video-status { min-height: 1.5rem; color: #4c6171; font-size: .95rem; }
.video-panel h2 { margin-top: 0; }
.video-chapters { display: flex; gap: 8px; flex-wrap: wrap; padding: 0; list-style: none; }
.video-topics { display: flex; gap: 8px; flex-wrap: wrap; padding: 0; list-style: none; }
.video-topics li { background: #edf4f8; border-radius: 4px; padding: 3px 8px; font-size: .9rem; }
.video-sources { font-size: .95rem; }
.video-downloads { display: flex; gap: 18px; flex-wrap: wrap; }
@media (max-width: 780px) { .video-layout { display: flex; flex-direction: column-reverse; } .video-list, .video-panel { width: 100%; padding: 16px; } main { padding: 22px 12px; } }
.video-list select { display: block; width: 100%; font: inherit; padding: 8px; border: 1px solid #9fb8ca; border-radius: 5px; margin: 6px 0 10px; }
.video-list label { margin-top: 8px; }
.video-panel details { margin-top: 20px; }
.video-panel summary { cursor: pointer; font-weight: 650; }
.video-sources { list-style: none; padding: 0; }
.video-sources li { margin: 16px 0; }
/* System diagrams: three stacked frames, full width, sized from the SVG viewBox. */
.system-diagram{margin:32px 0;padding:22px;border:1px solid var(--line,#d6dee3);border-radius:18px;background:var(--surface,var(--white,#fff))}
.system-diagram h2,.system-diagram h3{margin:0 0 12px}.system-diagram-item+.system-diagram-item{margin-top:28px;padding-top:22px;border-top:1px solid var(--line,#d6dee3)}
.system-diagram-frame{margin:16px 0}.system-diagram-frame img{display:block;width:100%;max-width:100%;height:auto;border:1px solid var(--line,#d6dee3);border-radius:12px;background:#fff}
.system-diagram-frame figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:6px;font-size:.85rem;color:var(--muted,#4f6170)}
.system-diagram a{font-weight:700}.system-diagram a:focus-visible{outline:3px solid currentColor;outline-offset:3px}.system-diagram-summary{max-width:72ch}
@media(max-width:620px){.system-diagram{padding:16px 12px;margin:24px 0}}