*{box-sizing:border-box}
body{margin:0;background:#fff;font-family:Arial,Helvetica,sans-serif;color:#111}
.webcast-shell{width:min(1180px,100%);margin:0 auto;border:1px solid #8ba8c1;background:#fff}
.titlebar{background:linear-gradient(#eef5fb,#dcebf6);border-bottom:1px solid #8ba8c1;padding:7px 12px;font-weight:bold;font-size:15px;letter-spacing:.1px}
.player-layout{display:grid;grid-template-columns:minmax(480px,1.35fr) minmax(430px,1fr);gap:14px;padding:12px 16px 14px;background:#fff;align-items:start}
.video-panel{min-width:0}
.video-frame{background:#181818;border:1px solid #777;box-shadow:inset 0 0 0 1px #2f2f2f}
video{display:block;width:100%;aspect-ratio:3/2;background:#000}
.now-playing{padding:7px 2px 0;font-size:14px;font-weight:bold;color:#314a62;line-height:1.25}.now-label{font-weight:normal;color:#5b6f81}

.flash-controls{height:38px;display:flex;align-items:center;gap:5px;padding:4px 6px;background:linear-gradient(#5b5b5b,#2b2b2b);border-top:1px solid #777;color:#fff;user-select:none}
.control-button{appearance:none;border:1px solid #171717;border-radius:3px;background:linear-gradient(#666,#333);color:#fff;height:28px;min-width:28px;padding:0 7px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.control-button:hover{background:linear-gradient(#777,#3c3c3c)}
.control-button:active{background:linear-gradient(#282828,#4c4c4c)}
.control-button:focus-visible,.seek-bar:focus-visible,.volume-bar:focus-visible,.chapter-button:focus-visible{outline:2px solid #8fc6ef;outline-offset:2px}
.icon-button{display:inline-flex;align-items:center;justify-content:center;padding:0}
.play-icon{width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid #f4f4f4;margin-left:2px}
.pause-icon{display:block;width:12px;height:14px;border-left:4px solid #f4f4f4;border-right:4px solid #f4f4f4}
.stop-icon{width:11px;height:11px;background:#f4f4f4;display:block}
.speaker-icon{font-size:19px;line-height:1;transform:translateY(-1px)}
.fullscreen-button{font-size:17px;line-height:1}

.seek-wrap{position:relative;flex:1;min-width:80px;height:20px;display:flex;align-items:center}
.seek-bar,.volume-bar{appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;margin:0;position:relative;z-index:2}
.seek-bar{width:100%}
.seek-bar::-webkit-slider-runnable-track{height:7px;border-radius:2px;background:linear-gradient(#151515,#292929);border:1px solid #111}
.seek-bar::-moz-range-track{height:7px;border-radius:2px;background:#1b1b1b;border:1px solid #111}
.seek-bar::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:17px;margin-top:-6px;border-radius:2px;background:linear-gradient(#e4e4e4,#888);border:1px solid #111}
.seek-bar::-moz-range-thumb{width:10px;height:17px;border-radius:2px;background:#bbb;border:1px solid #111}
.buffer-bar{position:absolute;left:1px;top:7px;height:6px;width:0;background:#6d6d6d;z-index:1;pointer-events:none;border-radius:2px}
.time-display{font:11px/1.1 Arial,Helvetica,sans-serif;color:#e8e8e8;white-space:nowrap;min-width:75px;text-align:center}
.volume-bar{width:66px}
.volume-bar::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:#171717;border:1px solid #111}
.volume-bar::-moz-range-track{height:5px;border-radius:3px;background:#171717;border:1px solid #111}
.volume-bar::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:14px;margin-top:-5px;border-radius:2px;background:#c8c8c8;border:1px solid #111}
.volume-bar::-moz-range-thumb{width:9px;height:14px;border-radius:2px;background:#c8c8c8;border:1px solid #111}

.chapter-panel{display:flex;flex-direction:column;justify-content:flex-start}
.chapter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 7px}
.chapter-button{border:1px solid #8ca5bb;background:linear-gradient(#f7fbff,#dceaf6);color:#0e2c45;box-shadow:inset 0 0 0 1px #fff;border-radius:2px;cursor:pointer;font-size:12px}
.chapter-button{min-height:40px;padding:5px 8px;text-align:left;display:flex;align-items:flex-start;gap:5px;line-height:1.12;font-size:11.5px}
.chapter-number{flex:0 0 auto;font-weight:bold;color:#0b3d66}
.chapter-title{display:block;min-width:0}
.chapter-button:hover,.chapter-button.active{background:linear-gradient(#dbeaf7,#bdd5e7)}
.chapter-button.active{font-weight:bold;outline:2px solid rgba(69,112,149,.22)}

@media(max-width:900px){.player-layout{grid-template-columns:1fr}.chapter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.webcast-shell{border-left:0;border-right:0}.time-display{min-width:65px}.volume-bar{width:50px}}
@media(max-width:520px){.flash-controls{gap:3px;padding:4px}.fullscreen-button{display:none}.volume-bar{width:44px}.time-display{font-size:10px;min-width:58px}.chapter-grid{grid-template-columns:1fr}.titlebar{font-size:13px}}