[hidden]{display:none!important}
.demo-dialog{border:1px solid #dedfd9;border-radius:7px;background:#fff;color:var(--ink);padding:16px 25px;width:min(1060px,calc(100% - 64px));max-height:calc(100dvh - 40px);overflow:auto;margin:auto;box-shadow:0 20px 100px #17201920;overscroll-behavior:contain;font-family:Arial,sans-serif}
.demo-dialog[open]{animation:dialog-in .18s ease-out}
.demo-dialog::backdrop{background:#fff9;backdrop-filter:blur(5px)}
.film-header{position:relative;margin-bottom:18px;text-align:center}
.dialog-heading{margin-bottom:0;text-align:center}
.dialog-heading h2{font:400 25px/1.2 var(--serif);letter-spacing:-.5px;outline:none}
.close-demo{position:absolute;top:0;right:-9px;width:44px;height:44px;display:grid;place-items:center;background:transparent;border-radius:50%;margin-right:0}
.close-demo:hover{background:#f3f3ef}.close-demo svg{width:20px;height:20px}
.film-options{position:relative;display:flex;justify-content:center;gap:25px;align-items:center;flex-wrap:wrap;max-width:calc(100% - 88px);margin:0 auto 16px}
.film-options button{min-height:44px;padding:5px 0;background:transparent;font:600 13px/1.3 Arial,sans-serif;color:var(--muted)}
.film-options button:hover,.film-options button[aria-pressed=true]{color:var(--ink)}
/* Keep keyboard focus quiet and distinct from the moving selection underline. */
.demo-dialog :focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.dialog-heading h2:focus{outline:none}
.film-options button:focus{outline:none}
.film-options button:focus-visible>span{outline:1px solid var(--ink);outline-offset:4px;border-radius:2px}
.film-tab-indicator{position:absolute;top:0;left:0;height:1px;background:var(--ink);pointer-events:none;transition:transform .22s ease,width .22s ease;will-change:transform}
.film-player{--film-scale:1;--film-origin:50% 50%;position:relative;background:#f6f6f3;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.film-topline{display:none;position:absolute;inset:0 0 auto;z-index:2;font-size:9px;letter-spacing:.6px;color:#797e75;justify-content:space-between;gap:12px;padding:11px 13px;background:#fafaf8;min-height:34px}
.film-topline>span:last-child{display:flex;gap:18px}.film-player[data-playing=true] #film-state:before{content:'';display:inline-block;width:5px;height:5px;background:#6a7d59;border-radius:50%;margin-right:7px;vertical-align:1px}
.media-frame{margin-inline:auto;aspect-ratio:16/9;max-height:min(max(160px,calc(100dvh - 320px)),600px);position:relative;overflow:hidden;background:#f0f0eb;isolation:isolate}
.media-frame video{display:block;width:100%;height:100%;object-fit:contain;transform:scale(1);transform-origin:var(--film-origin)}
.film-player[data-view-transition=true] video{transition:transform .3s}
.film-player[data-enhanced=true][data-view=work] video{transform:scale(var(--film-scale))}
.film-player[data-view=full] video{transform:scale(1)}
.film-start{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;background:#0a130b33;color:#fff;width:100%;font-size:12px;text-shadow:0 1px 5px #0006}
.play-disc{width:60px;height:60px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 3px 25px #0001}.play-disc svg{width:22px;height:22px;fill:currentColor;stroke:none}
.film-controls{display:flex;align-items:center;gap:16px;padding:0 10px;background:#fafaf8;min-height:54px;border-top:1px solid var(--line)}
.media-button{display:flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:48px;background:transparent;font:11px Arial,sans-serif;color:var(--ink);padding:0 5px}
.media-button svg{width:15px;height:15px}.media-button:first-child svg{fill:currentColor}.film-player[data-playing=true] .media-button:first-child svg{fill:none}
.film-controls .media-button:first-child{flex:0 0 72px;width:72px}
.film-controls input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;flex:1;width:0;min-width:24px;height:44px;margin:0;cursor:pointer;--played:0%}
.film-controls input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,#66775d var(--played),#dcdfd6 var(--played))}
.film-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border:2px solid #fafaf8;box-shadow:0 0 0 1px #66775d;background:#66775d;border-radius:50%;margin-top:-5px}
.film-controls input[type=range]::-moz-range-track{height:2px;background:#dcdfd6}.film-controls input[type=range]::-moz-range-progress{background:#66775d}.film-controls input[type=range]::-moz-range-thumb{width:9px;height:9px;border:2px solid #fafaf8;background:#66775d;border-radius:50%}
.film-time{font:10px ui-monospace,SFMono-Regular,monospace;white-space:nowrap;font-variant-numeric:tabular-nums;color:#6e7368}
#film-title{font:inherit}
.film-after{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:10px;min-height:39px}
.view-button{min-height:44px;padding:0 0 0 10px;font:11px Arial,sans-serif;color:var(--muted);background:transparent;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#c5c6bd;white-space:nowrap}
.film-beats{list-style:none;margin:0;padding:0}
.film-beats li{display:none;gap:13px;align-items:baseline;font:13px/1.5 Arial,sans-serif}.film-beats li.is-current{display:flex}.film-beats li>span{font:10px ui-monospace,monospace;color:#8b8e81}.film-beats li>p{margin:0}
.film-source{font:12px/1.65 Arial,sans-serif;color:var(--muted);margin-top:0}
.film-source summary{display:flex;align-items:center;gap:8px;min-height:32px;cursor:pointer;list-style:none;width:fit-content;font-size:11px}.film-source summary:after{content:'+';font-size:15px}.film-source[open] summary:after{content:'−'}.film-source summary::-webkit-details-marker{display:none}.film-source p{max-width:790px;margin:8px 0}
.film-player:fullscreen{display:flex;flex-direction:column;justify-content:center;width:100vw;height:100vh;background:#171b15;border:0;border-radius:0}
.film-player:fullscreen .media-frame{width:100%;max-height:calc(100dvh - 92px);background:#171b15}.film-player:fullscreen .media-frame video{object-fit:contain}.film-player:fullscreen .film-topline{display:flex}.film-player:fullscreen .film-topline,.film-player:fullscreen .film-controls{flex:0 0 auto}
@keyframes dialog-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:650px){.demo-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px);padding:12px 13px;border-radius:5px}.dialog-heading h2{font-size:21px}.close-demo{right:-5px}.film-options{gap:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:8px}.film-options button{text-align:center;font-size:12px}.film-options button:nth-child(even){padding-left:0}.film-topline{font-size:7px;padding:10px}.film-topline>span:last-child{gap:9px}.film-controls{gap:8px;padding:0 5px}.media-button{font-size:10px;padding:0 4px}.film-time{font-size:9px}.view-button{padding-left:0;min-height:44px}.film-after{align-items:flex-start;flex-direction:column;gap:2px;padding-top:4px}.film-beats li{font-size:12px;gap:10px}.media-frame{max-height:max(160px,calc(100dvh - 370px))}}
@media(max-width:360px){#film-play-label{display:none}.film-controls{gap:6px}.film-time{font-size:8px}.film-topline{font-size:6px;padding:10px 7px}}

.film-player[data-notice=loading] .film-topline,.film-player[data-notice=error] .film-topline{display:flex}.film-player[data-notice=error] #film-state{color:#9a3c34}
/* Keep the complete recording narrative visible and timestamped. */
.film-description{font:13px/1.5 Arial,sans-serif;max-width:790px;margin:8px auto 0;text-align:center}
.film-context-label{font:9px/1.5 Arial,sans-serif;letter-spacing:.8px;color:var(--muted);margin:0}
.film-after{margin-top:12px;min-height:35px}
.film-beats{display:grid;gap:2px;margin:0 0 12px}
.film-beats li,.film-beats li.is-current{display:block;font:13px/1.5 Arial,sans-serif}
.film-beats button{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:baseline;width:100%;min-height:44px;padding:10px 9px;text-align:left;border-left:2px solid transparent;background:transparent;border-radius:2px;font:inherit;color:var(--muted)}
.film-beats button:hover{background:#f7f8f4;color:var(--ink)}
.film-beats .is-current button{border-left-color:var(--ink);background:#f6f7f4;color:var(--ink)}
.film-beats time{font:11px/1.5 ui-monospace,SFMono-Regular,monospace;font-variant-numeric:tabular-nums;color:var(--muted)}
.film-beats .is-current time{color:var(--ink)}
.film-beats li p{margin:0}
.film-source{border-top:1px solid var(--line);padding-top:14px;margin-top:8px}
.film-source .film-context-label{margin:0 0 7px}
.film-source p{max-width:900px}
@media(max-width:650px){.film-description{font-size:12px}.film-after{flex-direction:row;align-items:center;gap:12px}.film-beats button{font-size:12px;grid-template-columns:38px minmax(0,1fr);gap:8px;padding:10px 6px}.film-source{font-size:11px}}
.film-content{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(240px,1fr);gap:22px;align-items:start}
.film-story{min-width:0}.film-story .film-after{margin-top:0}
.film-story .view-button{font-size:10px;padding-left:0}
.film-slot{display:grid;min-width:0;align-content:start}
.film-slot>*{grid-area:1/1;min-width:0;align-self:start}
.film-slot-measure{visibility:hidden;pointer-events:none;user-select:none}
@media(max-width:800px){.film-content{grid-template-columns:minmax(0,1fr);gap:10px}}
@media(max-width:360px){.film-controls .media-button:first-child{flex-basis:44px;width:44px}}