.opening-hero { display:grid; grid-template-columns:1.05fr 1fr; gap:70px; align-items:center; padding:60px 0 48px; }
.opening-hero h1 { font-size:clamp(66px,7.8vw,120px); line-height:1.02; letter-spacing:-.065em; margin:28px 0; }
.opening-hero p { max-width:53ch; color:var(--muted); }
.opening-hero .opening-lead { font-size:23px; line-height:1.5; letter-spacing:-.025em; color:var(--ink); }
.opening-hero .video-button { display:inline-block; margin-top:10px; }
.opening-hero-mosaic { display:grid; grid-template-columns:1fr 1fr; gap:24px 14px; }
.opening-hero-frame { text-decoration:none; min-width:0; }
.opening-hero-frame img { display:block; width:100%; height:auto; border:1px solid var(--rule); }
.opening-hero-frame span { display:block; font:10px/1.6 var(--mono); margin-top:9px; color:var(--muted); }
.opening-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; border-block:1px solid var(--rule); padding:25px 0; margin-bottom:28px; }
.opening-stats strong { display:block; font:45px/1.2 var(--sans); letter-spacing:-.045em; }
.opening-stats span { font:11px/1.5 var(--mono); color:var(--muted); }
.opening-index { display:flex; flex-wrap:wrap; gap:12px 25px; padding:26px 0; font:12px/1.6 var(--mono); }
.opening-index a { overflow-wrap:anywhere; }
.opening-how { display:grid; grid-template-columns:1fr 1.15fr; gap:50px; padding:35px 0 50px; }
.opening-how h2,.opening-section h2 { font-size:clamp(30px,4vw,43px); line-height:1.2; letter-spacing:-.04em; }
.opening-how ol { margin:0; padding-left:22px; }
.opening-how li { padding:7px 0 12px 7px; color:var(--muted); }
.opening-how strong { color:var(--ink); }
.opening-case { border-top:1px solid var(--rule-strong); padding:46px 0 58px; scroll-margin-top:22px; }
.opening-case-header { display:grid; grid-template-columns:1fr 1.15fr; gap:60px; padding-bottom:26px; }
.opening-case-header h2 { font-size:clamp(29px,3.8vw,43px); line-height:1.2; letter-spacing:-.04em; margin:16px 0; max-width:21ch; }
.opening-case-header p { margin-top:0; }
.opening-source { font:12px/1.8 var(--mono); color:var(--muted); }
.opening-chart-scroll { overflow-x:auto; border:1px solid var(--rule); padding:20px 16px 8px; }
.opening-chart { min-width:800px; position:relative; }
.opening-chart-ruler,.opening-lane,.opening-cue-row { display:grid; grid-template-columns:140px 1fr; }
.opening-chart-ruler { margin:0 12px 16px 0; font:10px var(--mono); color:var(--muted); }
.opening-chart-ruler > div { position:relative; height:20px; }
.opening-chart-ruler > div span { position:absolute; transform:translateX(-50%); white-space:nowrap; }
.opening-chart-ruler > div span:first-child { transform:none; }
.opening-chart-ruler > div span:last-child { transform:translateX(-100%); }
.opening-lane { min-height:62px; }
.opening-lane-label { display:flex; align-items:center; font:11px/1.5 var(--mono); padding:8px 16px 8px 0; border-top:1px solid var(--rule); }
.opening-track { position:relative; border-top:1px solid var(--rule); margin-right:12px; background:repeating-linear-gradient(90deg,transparent 0,transparent calc(var(--opening-tick-width) - 1px),var(--rule) calc(var(--opening-tick-width) - 1px),var(--rule) var(--opening-tick-width)); }
.opening-bar { position:absolute; top:10px; height:39px; padding:0 7px; min-width:2px; overflow:hidden; cursor:pointer; border:1px solid var(--rule-strong); background:var(--field); color:var(--ink); text-align:left; font:10px var(--mono); white-space:nowrap; }
.opening-bar span { display:block; overflow:hidden; text-overflow:ellipsis; }
.opening-lane[data-lane='1'] .opening-bar { border-bottom-width:4px; }
.opening-lane[data-lane='2'] .opening-bar { border-style:dashed; }
.opening-lane[data-lane='3'] .opening-bar { border-top-width:4px; }
.opening-bar:hover,.opening-bar[aria-pressed='true'] { background:var(--ink); color:var(--paper); }
.opening-bar:focus-visible { outline-offset:2px; z-index:3; }
.opening-cue-row { font:11px var(--mono); color:var(--muted); min-height:44px; align-items:center; }
.opening-cue-track { position:relative; height:40px; margin-right:12px; }
.opening-cue-marker { position:absolute; transform:translateX(-50%); padding:0; width:34px; height:40px; border:0; background:transparent; color:var(--ink); font-size:22px; cursor:pointer; }
.opening-playhead-area { position:absolute; left:140px; right:12px; top:26px; bottom:42px; pointer-events:none; }
.opening-playhead-area span { position:absolute; top:0; bottom:0; width:2px; background:#b14729; box-shadow:0 0 0 1px var(--paper); }
:root[data-theme='dark'] .opening-playhead-area span { background:#ffac76; }
.opening-chart-caption { color:var(--muted); font-size:12px; line-height:1.7; max-width:105ch; }
.opening-chart-caption output { display:block; font:11px/1.7 var(--mono); margin-top:7px; }
.opening-table-details { margin:15px 0 28px; }
.opening-table-details summary,.opening-native summary { font-weight:600; cursor:pointer; }
.opening-table-scroll { overflow-x:auto; margin-top:16px; border:1px solid var(--rule); }
.opening-table-scroll table { width:100%; min-width:700px; border-collapse:collapse; text-align:left; font-size:13px; }
.opening-table-scroll th,.opening-table-scroll td { padding:14px; vertical-align:top; border-bottom:1px solid var(--rule); }
.opening-table-scroll thead { background:var(--field); font:11px/1.6 var(--mono); }
.opening-table-scroll td:nth-child(2) { white-space:nowrap; font-family:var(--mono); font-size:11px; }
.opening-table-seek { border:0; padding:8px 0; background:transparent; color:var(--ink); text-decoration:underline; text-align:left; cursor:pointer; font:11px/1.7 var(--mono); }
.opening-viewer { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:32px; align-items:start; margin-top:28px; }
.opening-viewer video { width:100%; display:block; background:#fff; border:1px solid var(--rule); }
.opening-viewer .motion-controls { padding:14px 0; }
.opening-small { font-size:12px; line-height:1.7; color:var(--muted); }
.opening-selection { border-left:2px solid var(--ink); padding:0 0 0 20px; }
.opening-selection .kicker { margin-top:0; }
.opening-selection > strong { display:block; font-size:22px; line-height:1.4; letter-spacing:-.025em; }
.opening-selected-time { display:block; font:11px/1.8 var(--mono); color:var(--muted); margin-top:10px; }
.opening-selection > p:not(.kicker) { color:var(--muted); font-size:13px; }
.opening-selection > a { display:block; font-size:12px; margin-top:12px; overflow-wrap:anywhere; }
.opening-keyframes-section { margin:32px 0; }
.opening-keyframes-section h3 { font-size:22px; letter-spacing:-.025em; }
.opening-keyframes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.opening-keyframe { padding:0 0 16px; background:transparent; border:0; border-bottom:1px solid var(--rule); text-align:left; cursor:pointer; color:var(--ink); display:flex; flex-direction:column; align-items:start; min-width:0; }
.opening-keyframe img { width:100%; height:auto; border:1px solid var(--rule); }
.opening-keyframe .opening-keyframe-time { font:10px/1.7 var(--mono); margin-top:13px; color:var(--muted); }
.opening-keyframe strong { font-size:16px; margin:7px 0; }
.opening-keyframe > span:last-child { font-size:12px; line-height:1.7; color:var(--muted); }
.opening-keyframe[aria-pressed='true'] img { outline:2px solid var(--ink); outline-offset:3px; }
.opening-keyframe:hover strong { text-decoration:underline; text-underline-offset:3px; }
.opening-reading { display:grid; grid-template-columns:1.15fr 1fr; gap:50px; }
.opening-reading h3 { font-size:18px; }
.opening-reading p,.opening-reading li { color:var(--muted); font-size:14px; }
.opening-reading ul { padding-left:21px; }
.opening-reading li { margin:0 0 12px; padding-left:4px; }
.opening-native { border-block:1px solid var(--rule); padding:20px 0; margin:26px 0; }
.opening-native > p { max-width:105ch; }
.opening-native-strip { display:flex; gap:12px; overflow-x:auto; padding:10px 4px 18px; }
.opening-native-frame { flex:0 0 230px; padding:0; background:transparent; color:var(--ink); border:0; cursor:pointer; }
.opening-native-frame img { width:100%; height:auto; display:block; border:1px solid var(--rule); }
.opening-native-frame span { display:block; font:10px/1.7 var(--mono); margin-top:8px; text-align:left; }
.opening-native-frame[aria-pressed='true'] img { outline:2px solid var(--ink); outline-offset:3px; }
.opening-adaptation { display:grid; grid-template-columns:1.15fr 1fr; gap:45px; background:var(--field); border:1px solid var(--rule); padding:26px; }
.opening-adaptation h3 { font-size:19px; margin-top:0; }
.opening-adaptation p:not(.kicker) { font-size:13px; color:var(--muted); }
.opening-adaptation .kicker { margin-top:0; }
.opening-section { border-top:1px solid var(--rule-strong); padding:46px 0; }
.opening-section > p { max-width:100ch; }
@media(max-width:1100px) { .opening-hero { gap:35px; } .opening-viewer { grid-template-columns:minmax(0,1fr) 240px; gap:22px; } }
@media(max-width:800px) { .opening-hero,.opening-how,.opening-case-header,.opening-reading,.opening-adaptation,.opening-viewer { grid-template-columns:1fr; gap:24px; } .opening-hero { padding-top:40px; } .opening-hero-mosaic { grid-template-columns:repeat(3,minmax(0,1fr)); } .opening-keyframes { grid-template-columns:1fr 1fr; gap:22px 15px; } .opening-selection { padding-block:5px; } .opening-case-header h2 { max-width:none; } .opening-reading { gap:0; } .opening-adaptation { padding:22px; } }
@media(max-width:500px) { .opening-hero-mosaic { grid-template-columns:1fr 1fr; } .opening-stats { grid-template-columns:1fr 1fr; } .opening-hero .opening-lead { font-size:21px; } .opening-keyframe strong { font-size:14px; } .opening-keyframes { gap:20px 12px; } .opening-chart-scroll { padding-inline:12px; } .opening-adaptation { padding:18px; } }