:root{color-scheme:light;--bg:#f5f5f3;--ink:#28352f;--muted:#657469;--green:#426c55;--line:#d9e1d8;--disabled:#849185;--hover:#e9eee7}
*{box-sizing:border-box}
html{overflow-wrap:break-word}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif}
::selection{background:#dbe8dc;color:var(--ink)}
main{max-width:1280px;margin:auto;padding:40px 48px}
header{display:flex;align-items:center;justify-content:space-between;gap:32px;margin:40px 0 0}
.title-row{display:flex;align-items:baseline;gap:6px;white-space:nowrap;color:var(--muted)}
.brand{margin:0;font-size:14px;line-height:1.5;font-weight:400}
h1{margin:0;font-size:14px;font-weight:400;line-height:1.5;letter-spacing:normal}
.viewer{min-width:0}
h2{margin:0;min-width:0}
button{font-family:inherit}
.viewer{opacity:0;transform:translateY(7px);transition:opacity 180ms ease,transform 180ms ease}
.viewer.shown{opacity:1;transform:translateY(0);transition:opacity 240ms ease,transform 240ms ease}
.media{position:relative;background:#e3e7e0;aspect-ratio:16/9;border-radius:8px;overflow:hidden}
video{display:block;width:100%;height:100%;object-fit:contain;background:#e3e7e0}
.failure{position:absolute;inset:0;display:grid;place-content:center;gap:12px;text-align:center;background:#e3e7e0;padding:16px}
.failure[hidden]{display:none}
.failure p{margin:0}
.failure button{min-height:44px;padding:8px 20px;background:var(--green);border:0;border-radius:8px;color:white;font-size:16px;cursor:pointer}
.failure a{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
a{color:inherit;text-underline-offset:4px}
button:focus-visible,a:focus-visible{outline:2px solid var(--green);outline-offset:2px}
video:focus-visible{outline:3px solid var(--green);outline-offset:-3px}
.nojs{padding:16px}
.nojs a{display:block;padding:12px}
footer{margin-top:48px;padding-top:24px}
@media(max-width:1100px){main{padding-left:32px;padding-right:32px}}
@media(max-width:899px){main{padding:32px 20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;transform:none!important}}

/* Official advice: topic content and media. */
.agenda-page{--green:#345c4b;--body:#505d55;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
.topic-copy{display:grid;min-width:0}
/* Hidden panels still size this grid on desktop, preventing topic jumps. */
.topic-panel{grid-area:1/1;min-width:0;align-self:start;visibility:hidden;pointer-events:none;opacity:0}
.topic-panel.is-active{visibility:visible;pointer-events:auto;opacity:1}
.topic-summary{font-size:26px;line-height:38px;font-weight:500;color:var(--green);margin:0 0 48px;text-wrap:balance}
.topic-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;list-style:none;padding:0;margin:0;font-size:17px;line-height:30px;font-weight:400;color:var(--body)}
.topic-points li{position:relative;min-width:0;padding-left:18px}
.topic-points li::before{content:"";position:absolute;left:0;top:6px;width:4px;height:16px;background:var(--green)}
.topic-points .point-heading{margin:0 0 12px;font-size:18px;line-height:28px;font-weight:500;color:var(--ink)}
.topic-points p{margin:0;color:var(--muted)}
.agenda-page .viewer{opacity:1;transform:none;transition:none;min-width:0;width:100%;max-width:none;justify-self:start}
.topic-media{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;margin:96px 0 0}
.topic-media.has-diagram{grid-template-columns:minmax(0,1.075269fr) minmax(0,1.777778fr);align-items:start}
/* The inner-screen example places its landscape diagram to the video's right. */
#panel-wide-layout .topic-media.has-diagram{grid-template-columns:minmax(0,1.777778fr) minmax(0,1.331187fr)}
.controls-diagram{min-width:0;margin:0}
.controls-diagram[hidden]{display:none}
.diagram-heading{margin:0 0 12px;font-size:16px;line-height:24px;font-weight:400;color:var(--muted)}
.controls-diagram img{display:block;width:100%;height:auto;background:#111;border-radius:8px}
.video-heading{margin:0 0 12px;font-size:16px;line-height:24px;font-weight:400;color:var(--muted)}
.video-heading a{text-decoration-thickness:1px;text-decoration-color:var(--line);text-underline-offset:4px;transition:color 120ms ease,text-decoration-color 120ms ease}
.video-heading a:hover{color:var(--green);text-decoration-color:currentColor}
.loading-note{position:absolute;top:16px;left:16px;background:var(--bg);color:var(--ink);padding:8px 12px;border-radius:6px;font-size:14px;line-height:22px}
.loading-note[hidden]{display:none}
.agenda-page .failure button:hover{background:#284a3b}
.agenda-page .failure a:hover{color:var(--green)}
@media(min-width:1000px){
 .topic-points{font-size:16px;line-height:26px}
 .topic-points .point-heading{margin-bottom:8px}
 .diagram-heading,.video-heading{margin-bottom:8px}
}
@media(min-width:1000px) and (max-height:800px){
 .topic-summary{font-size:24px;line-height:32px}
 .topic-points{line-height:24px}
 .topic-points .point-heading{font-size:17px;line-height:26px;margin-bottom:6px}
}
@media(max-width:999px){
 .topic-copy{display:block}.topic-panel:not(.is-active){display:none}
}
@media(max-width:767px){
 .topic-summary{font-size:20px;line-height:32px}
 .topic-media{gap:16px}
 #panel-wide-layout .topic-media.has-diagram{grid-template-columns:minmax(0,1fr);width:100%}
 .diagram-heading,.video-heading{font-size:14px}
 .topic-points{grid-template-columns:minmax(0,1fr);font-size:16px;line-height:28px}
 .agenda-page .viewer{width:100%}
}

.report-page-title,.report-brand-title{margin:0;font-size:14px;line-height:1.5;font-weight:400;color:var(--muted)}