.broadcast-demo { border: 1px solid #ffffff26; border-radius: 16px; overflow: hidden; background: #0b1122; box-shadow: 0 35px 100px #0005; scroll-margin-top: 100px; }
.demo-topline { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 22px; font-size: 11px; color: #afbcd7; }
.demo-topline > span:first-child { display: flex; align-items: center; gap: 9px; }
.demo-indicator { height: 6px; width: 6px; background: #9b87ff; border-radius: 50%; }
.demo-frame { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #070a17; isolation: isolate; }
.demo-frame iframe { position: absolute; inset: 0; border: 0; width: 1280px; height: 720px; transform-origin: top left; z-index: 2; }
.demo-fallback { position: absolute; inset: 0; display: grid; place-items: center; background: #0b1122; z-index: 5; padding: 24px; text-align: center; }
.demo-event { display: grid; grid-template-columns: 1fr auto 1.2fr; gap: 24px; align-items: center; margin: 0 22px; padding: 19px 0; border-bottom: 1px solid #ffffff16; }
.demo-event > span:not(.event-arrow) { color: #8795b2; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.demo-event strong { display: block; margin-top: 7px; font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: #e0e5f3; }
.event-arrow { color: #a890ff; font-size: 24px; }
.demo-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding: 18px 22px 4px; }
.phase-controls,.detail-controls { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-toolbar button { border: 1px solid #ffffff16; background: #ffffff04; color: #b7c2db; border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 11px; cursor: pointer; }
.demo-toolbar button[aria-pressed="true"] { color: #e6deff; background: #7656e331; border-color: #997ef477; }
.demo-toolbar #play-demo { color: #e2d9ff; border-color: #8a73cf70; }
.demo-toolbar button:hover { border-color: #a89ce4; color: white; }
.demo-toolbar button:disabled { opacity: .35; cursor: default; }
.demo-note { font-size: 12px; color: #c6cfe2; line-height: 1.6; margin: 16px 22px 10px; }
.demo-disclaimer { font-size: 10px; line-height: 1.7; color: #8895b3; margin: 0 22px 20px; max-width: 920px; }
@media(max-width:700px) { .demo-topline{font-size:9px;padding:12px}.demo-topline > span:last-child{display:none}.demo-event{gap:12px;margin:0 12px;padding:14px 0}.demo-event strong{font-size:11px}.demo-event > span:not(.event-arrow){font-size:8px}.event-arrow{font-size:17px}.demo-toolbar{padding:14px 12px 0;gap:10px}.demo-toolbar button{font-size:10px;padding:10px}.demo-note{margin:14px 12px 8px;font-size:11px}.demo-disclaimer{margin:0 12px 16px}.broadcast-demo{border-radius:12px} }