.tr-source #demo{padding:clamp(16px,2vw,28px);margin-block-start:28px;scroll-margin-block-start:110px}
#demo .demo-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,410px);gap:18px 32px;align-items:end;margin-block-end:18px}
#demo .demo-heading .eyebrow{margin:0 0 9px;font-size:10px}
#demo .demo-heading h3{margin:0;font-size:clamp(28px,3vw,43px);line-height:1.06;letter-spacing:-.02em}
#demo .demo-heading>p{margin:0;max-width:none;font-size:13px;line-height:1.65}
#demo .recording-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin:0 0 14px;color:#c9ded4;font-size:12px}
#demo .recording-speed{border:1px solid #85e6d47a;border-radius:30px;padding:5px 12px;color:#a3f1d8;white-space:nowrap}
#demo .demo-start{margin-left:auto;min-height:44px;border:0;background:#ffcb79;color:#10231e;padding:11px 17px;border-radius:3px;font:600 12px 'DM Sans',Arial,sans-serif;cursor:pointer}
#demo .demo-stage{display:grid;grid-template-columns:minmax(0,1fr) 215px;gap:18px;align-items:start}
#demo .demo-visual{min-width:0;background:#031116;border:1px solid #90baac40;border-radius:4px;overflow:hidden}
.tr-source #demo .demo-visual video{display:block;inline-size:100%;block-size:auto;max-block-size:min(68svh,780px);aspect-ratio:auto;object-fit:contain;border:0;border-radius:0;background:#031116}
#demo .demo-view-help{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin:0;padding:8px 12px;border-top:1px solid #90baac26;font-size:10px;line-height:1.4;color:#b4cdc1}
#demo .demo-view-help a{color:#a3f1d8;text-decoration:underline;text-underline-offset:3px}
#demo .demo-chapters{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;margin:0;min-width:0}
#demo .demo-chapters-label{margin:0 0 2px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#a8c5b8}
#demo .demo-chapters button{min-height:64px;border:1px solid #9fc9b542;border-radius:3px;text-align:left;padding:10px 12px;background:#061c2070;color:#e8f1e7;font:500 12px/1.4 'DM Sans',Arial,sans-serif;cursor:pointer;overflow-wrap:anywhere}
#demo .demo-chapter-number{display:flex;justify-content:space-between;gap:10px;color:#9bbab0;font-size:10px;letter-spacing:.05em;margin-bottom:4px}
#demo .demo-chapters button strong{display:block;font:inherit;font-weight:600}
#demo .demo-chapter-detail{display:block;color:#adc6ba;font-size:10px;line-height:1.5;margin-top:3px}
#demo .demo-chapters button[aria-current="step"]{border-color:#ffcb79;background:#ffcb7915}
#demo .demo-chapters button[aria-current="step"] .demo-chapter-number{color:#ffcb79}
#demo .demo-chapters button:hover:enabled{border-color:#85e6d4}
#demo button:disabled{cursor:default;opacity:.6}
#demo :is(button,a):focus-visible{outline:2px solid #85e6d4;outline-offset:4px}
#demo .demo-preview-note{margin:0 0 15px;padding:12px 15px;border-left:3px solid #ffcb79;background:#ffcb7910;font-size:12px;line-height:1.6;color:#e5dfc7}
#demo .demo-player-status{margin:10px 0 0;color:#ffcb79;font-size:12px;line-height:1.5}
#demo .demo-player-status:empty{display:none}
#demo .demo-disclosure{margin:14px 0 0;font-size:11px;line-height:1.65;max-width:none}
#demo .real-demo-transcript{margin-top:14px;padding-top:8px}
#demo .real-demo-transcript summary{min-height:44px;padding:10px 0;font-size:12px}
#demo .real-demo-transcript :is(ol,p){font-size:12px;line-height:1.7}
@media(max-width:1100px){#demo .demo-stage{grid-template-columns:minmax(0,1fr)}#demo .demo-chapters{grid-template-columns:repeat(3,minmax(0,1fr))}#demo .demo-chapters-label{grid-column:1/-1}.tr-source #demo .demo-visual video{max-block-size:70svh}}
@media(max-width:760px){#demo .demo-heading{grid-template-columns:minmax(0,1fr);gap:12px}#demo .demo-heading h3{font-size:30px}#demo .demo-heading>p{font-size:12px}#demo .demo-chapters{grid-template-columns:repeat(2,minmax(0,1fr))}#demo .demo-chapters button{min-height:76px}#demo .recording-bar{gap:10px;font-size:10px}#demo .demo-start{width:100%;margin-left:0}.tr-source #demo .demo-visual video{max-block-size:none}#demo .demo-chapter-detail{font-size:10px}}
@media(max-width:390px){#demo .demo-chapters{grid-template-columns:minmax(0,1fr)}#demo .demo-chapters button{min-height:58px}}
@media(forced-colors:active){#demo :is(.demo-chapters button,.recording-speed,.demo-visual,.demo-preview-note){border-color:ButtonText}#demo .demo-chapters button[aria-current="step"]{outline:2px solid Highlight}#demo button:disabled{opacity:1}}

#demo .demo-example-note{margin:0 0 20px;padding:12px 16px;border-inline-start:2px solid #e4bc75;background:#ffffff06;color:#c4d8ce;font-size:13px;line-height:1.65}#demo .demo-example-note strong{color:#ffcc84}